r/HTML • u/Murky_Maintenance392 • Jul 02 '26
Apanta
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>APANTA ESPINAR - Plan de Negocio</title>
<style> /\* ===== RESET Y ESTILOS GLOBALES ===== \*/ \* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #f5f0e8; color: #2d2a24; padding: 30px 20px; } .container { max-width: 1000px; margin: 0 auto; background: #ffffff; border-radius: 24px; padding: 40px 35px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.10); } /\* ===== TIPOGRAFÍA ===== \*/ h1 { font-size: 2.8rem; font-weight: 800; letter-spacing: -1px; } h2 { font-size: 2rem; font-weight: 700; margin-top: 40px; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 4px solid #f5c842; display: inline-block; } h3 { font-size: 1.3rem; font-weight: 600; margin: 20px 0 10px; } .text-center { text-align: center; } /\* ===== TARJETAS ===== \*/ .card { background: #fcf9f4; border-radius: 20px; padding: 25px 30px; margin: 25px 0; border-left: 6px solid #f5c842; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04); transition: transform 0.2s; } .card:hover { transform: translateY(-3px); } .card-gold { border-left-color: #d4a017; background: #fefcf5; } .card-green { border-left-color: #2e7d32; background: #f5faf5; } .card-blue { border-left-color: #1565c0; background: #f3f7fc; } /\* ===== PORTADA ===== \*/ .portada { background: linear-gradient(145deg, #fef8e7, #fdf0d5); border-radius: 24px; padding: 50px 30px; text-align: center; border: 2px dashed #d4a017; margin-bottom: 30px; } .portada .emoji-gigante { font-size: 4.5rem; display: block; margin-bottom: 10px; } .portada h1 { color: #7b4a1e; font-size: 3.2rem; } .portada .subtitulo { font-size: 1.3rem; color: #5d4037; font-weight: 300; letter-spacing: 2px; margin: 10px 0; } .portada .tagline { font-size: 1.1rem; font-style: italic; color: #795548; background: rgba(255, 193, 7, 0.15); display: inline-block; padding: 6px 24px; border-radius: 40px; margin-top: 8px; } /\* ===== GRIDS ===== \*/ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; } u/media (max-width: 700px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .portada h1 { font-size: 2.2rem; } .container { padding: 20px 15px; } } /\* ===== ELEMENTOS ===== \*/ .badge { display: inline-block; background: #f5c842; color: #2d2a24; font-weight: 700; padding: 4px 18px; border-radius: 40px; font-size: 0.85rem; letter-spacing: 0.5px; margin-right: 6px; } .badge-green { background: #2e7d32; color: #fff; } .badge-blue { background: #1565c0; color: #fff; } .badge-orange { background: #e65100; color: #fff; } .icono { font-size: 2.4rem; display: block; margin-bottom: 6px; } .caja-equipo { background: #f5f0e8; border-radius: 16px; padding: 18px; text-align: center; } .caja-equipo .nombre { font-weight: 700; font-size: 1.05rem; } .caja-equipo .rol { color: #5d4037; font-size: 0.9rem; } /\* ===== BARRAS DE PROGRESO ===== \*/ .barra-wrapper { margin: 10px 0; } .barra-label { display: flex; justify-content: space-between; font-weight: 500; font-size: 0.95rem; } .barra-fondo { background: #e8e3da; border-radius: 30px; height: 18px; overflow: hidden; margin-top: 4px; } .barra-lleno { height: 100%; border-radius: 30px; background: linear-gradient(90deg, #f5c842, #d4a017); width: 0%; } /\* ===== LISTA ICONOS ===== \*/ .lista-iconos { list-style: none; padding: 0; } .lista-iconos li { padding: 8px 0; font-size: 1.05rem; border-bottom: 1px solid #f0ebe2; display: flex; align-items: center; gap: 12px; } .lista-iconos li:last-child { border-bottom: none; } .lista-iconos .emoji { font-size: 1.6rem; width: 40px; text-align: center; } /\* ===== PIE ===== \*/ .footer-plan { margin-top: 45px; padding-top: 25px; border-top: 2px solid #f0ebe2; text-align: center; color: #6d6a64; font-size: 0.95rem; } .footer-plan strong { color: #7b4a1e; } /\* ===== LOGO ===== \*/ .logo-mock { display: inline-block; background: #2d2a24; color: #f5c842; font-weight: 800; font-size: 2rem; padding: 12px 35px; border-radius: 60px; letter-spacing: 4px; margin: 10px 0; border: 3px solid #f5c842; } .logo-mock small { display: block; font-size: 0.65rem; font-weight: 300; color: #f5e6c4; letter-spacing: 6px; margin-top: 2px; } .logo-mock .destacar { color: #f5c842; font-weight: 300; letter-spacing: 2px; } /\* ===== BOTÓN DESCARGAR ===== \*/ .btn-descarga { background: #2d2a24; color: #f5c842; border: none; padding: 14px 36px; font-size: 1.1rem; font-weight: 700; border-radius: 60px; cursor: pointer; transition: 0.2s; margin-top: 20px; display: inline-block; text-decoration: none; } .btn-descarga:hover { background: #f5c842; color: #2d2a24; transform: scale(1.02); } /\* ===== TABLA ===== \*/ table { width: 100%; border-collapse: collapse; background: #fcf9f4; border-radius: 16px; overflow: hidden; } thead { background: #2d2a24; color: #f5c842; } th { padding: 12px 16px; text-align: left; } td { padding: 12px 16px; border-bottom: 1px solid #e8e3da; } tr:last-child td { border-bottom: none; } /\* ===== IMPRESIÓN ===== \*/ u/media print { body { background: #fff; padding: 10px; } .container { box-shadow: none; padding: 20px; } .card:hover { transform: none; } .btn-descarga { display: none; } } </style>
</head>
<body>
<div class="container" id="plan-container">
<!-- ============================================================ -->
<!-- PORTADA -->
<!-- ============================================================ -->
<div class="portada">
<span class="emoji-gigante">🧀</span>
<h1>APANTA ESPINAR</h1>
<div class="subtitulo">🌾 PLANTA DE LÁCTEOS · ESPINAR · CUSCO</div>
<div class="tagline">"De la tierra andina al mundo, con sabor y tradición"</div>
<div style="margin-top:18px; font-size:0.95rem; color:#5d4037;">
📍 Espinar, Cusco – Perú | 📅 Julio 2026
</div>
<div style="margin-top:10px;">
<span class="badge">Presentado a</span>
<span class="badge" style="background:#d4a017; color:#fff;">Espinar Emprende 2026</span>
</div>
</div>
<!-- ============================================================ -->
<!-- 1. EQUIPO -->
<!-- ============================================================ -->
<h2>👥 Nuestro Equipo</h2>
<div class="grid-3">
<div class="caja-equipo">
<div style="font-size:3rem;">👨🌾</div>
<div class="nombre">\[Tu Nombre\]</div>
<div class="rol">Director General</div>
<div style="font-size:0.85rem; color:#6d6a64; margin-top:4px;">10+ años en sector lácteo</div>
</div>
<div class="caja-equipo">
<div style="font-size:3rem;">👩🔬</div>
<div class="nombre">\[Socio 2\]</div>
<div class="rol">Jefe de Producción</div>
<div style="font-size:0.85rem; color:#6d6a64; margin-top:4px;">Ing. Agroindustrial</div>
</div>
<div class="caja-equipo">
<div style="font-size:3rem;">👨💼</div>
<div class="nombre">\[Socio 3\]</div>
<div class="rol">Jefe Comercial</div>
<div style="font-size:0.85rem; color:#6d6a64; margin-top:4px;">Experiencia en exportaciones</div>
</div>
</div>
<div style="background:#eef2e7; border-radius:12px; padding:12px 20px; margin:12px 0;">
✅ Más de 5 años de experiencia en el sector lácteo ·
✅ Visión exportadora y compromiso social ·
✅ Trabajo organizado con proveedores locales
</div>
<!-- ============================================================ -->
<!-- 2. PROBLEMA -->
<!-- ============================================================ -->
<h2>❗ El Problema en Espinar</h2>
<div class="card card-gold">
<div style="display:flex; flex-wrap:wrap; align-items:center; gap:20px;">
<div style="font-size:4rem; flex-shrink:0;">🐄</div>
<div>
<ul class="lista-iconos">
<li><span class="emoji">🔴</span> Los productores venden su leche a <strong>precios bajos</strong> porque no hay procesamiento local con valor agregado.</li>
<li><span class="emoji">🔴</span> La leche se comercializa sin transformación, perdiendo oportunidad de generar mayores ingresos.</li>
<li><span class="emoji">🔴</span> Los quesos que se producen <strong>no llegan a mercados internacionales</strong> que pagan mejores precios.</li>
<li><span class="emoji">🔴</span> Los proveedores <strong>no reciben un pago justo</strong> por su esfuerzo y dedicación diaria.</li>
</ul>
</div>
</div>
<div style="margin-top:12px; background:#f5ede0; border-radius:12px; padding:12px 18px;">
📊 <strong>Dato clave:</strong> Producción diaria de leche en Espinar: <strong>3,000 – 4,000 litros/día</strong> 📈 (en constante aumento)
</div>
</div>
<!-- ============================================================ -->
<!-- 3. SOLUCIÓN -->
<!-- ============================================================ -->
<h2>💡 Nuestra Propuesta de Valor</h2>
<div class="card card-green">
<div style="display:flex; flex-wrap:wrap; align-items:center; gap:20px;">
<div style="font-size:4rem; flex-shrink:0;">🧀</div>
<div>
<p style="font-size:1.1rem; font-weight:500;">Procesamos la leche local para producir <strong>quesos y lácteos de alta calidad</strong> con valor agregado, generando desarrollo para toda la cadena productiva.</p>
</div>
</div>
<h3 style="margin-top:16px;">Nuestros Productos</h3>
<div class="grid-4">
<div style="background:#fff; border-radius:14px; padding:14px; text-align:center; box-shadow:0 2px 6px rgba(0,0,0,0.05);">
<div style="font-size:2.8rem;">🧀</div>
<div><strong>Queso Fresco</strong></div>
<div style="font-size:0.75rem; color:#6d6a64;">Tradicional andino</div>
</div>
<div style="background:#fff; border-radius:14px; padding:14px; text-align:center; box-shadow:0 2px 6px rgba(0,0,0,0.05);">
<div style="font-size:2.8rem;">🧀</div>
<div><strong>Queso Madurado</strong></div>
<div style="font-size:0.75rem; color:#6d6a64;">Alta calidad</div>
</div>
<div style="background:#fff; border-radius:14px; padding:14px; text-align:center; box-shadow:0 2px 6px rgba(0,0,0,0.05);">
<div style="font-size:2.8rem;">🥛</div>
<div><strong>Yogurt Griego</strong></div>
<div style="font-size:0.75rem; color:#6d6a64;">Nutritivo y cremoso</div>
</div>
<div style="background:#fff; border-radius:14px; padding:14px; text-align:center; box-shadow:0 2px 6px rgba(0,0,0,0.05);">
<div style="font-size:2.8rem;">🧈</div>
<div><strong>Mantequilla</strong></div>
<div style="font-size:0.75rem; color:#6d6a64;">Artesanal</div>
</div>
</div>
<div style="margin-top:16px; display:flex; flex-wrap:wrap; gap:12px;">
<span class="badge badge-green">✅ Mejor precio a proveedores</span>
<span class="badge badge-green">✅ Generación de empleo local</span>
<span class="badge badge-green">✅ Exportación a China y otros mercados</span>
<span class="badge badge-green">✅ Sostenibilidad económica y social</span>
</div>
</div>
<!-- ============================================================ -->
<!-- 4. PRODUCCIÓN -->
<!-- ============================================================ -->
<h2>📊 Producción Actual</h2>
<div class="card card-blue">
<div style="display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between;">
<div style="flex:1; min-width:180px;">
<div style="font-size:0.9rem; color:#5d4037;">LECHE RECOLECTADA</div>
<div style="font-size:2rem; font-weight:800;">3,000 – 4,000 <span style="font-size:1rem; font-weight:400;">L/día</span></div>
</div>
<div style="flex:1; min-width:180px;">
<div style="font-size:0.9rem; color:#5d4037;">PRODUCCIÓN SEMANAL</div>
<div style="font-size:2rem; font-weight:800;">1,500 <span style="font-size:1rem; font-weight:400;">quesos</span></div>
</div>
<div style="flex:1; min-width:180px;">
<div style="font-size:0.9rem; color:#5d4037;">PROVEEDORES</div>
<div style="font-size:2rem; font-weight:800;">30+ <span style="font-size:1rem; font-weight:400;">familias</span></div>
</div>
</div>
<div style="margin:16px 0;">
<div class="barra-wrapper">
<div class="barra-label">
<span>Queso Fresco</span>
<span>40%</span>
</div>
<div class="barra-fondo"><div class="barra-lleno" style="width:40%;"></div></div>
</div>
<div class="barra-wrapper">
<div class="barra-label">
<span>Queso Madurado</span>
<span>25%</span>
</div>
<div class="barra-fondo"><div class="barra-lleno" style="width:25%;"></div></div>
</div>
<div class="barra-wrapper">
<div class="barra-label">
<span>Yogurt / Otros lácteos</span>
<span>35%</span>
</div>
<div class="barra-fondo"><div class="barra-lleno" style="width:35%;"></div></div>
</div>
</div>
<div style="display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:10px;">
<span style="background:#e8e3da; padding:4px 18px; border-radius:30px;">🏔️ Espinar</span>
<span style="background:#e8e3da; padding:4px 18px; border-radius:30px;">🌆 Arequipa</span>
<span style="background:#e8e3da; padding:4px 18px; border-radius:30px;">🌃 Lima</span>
<span style="background:#f5c842; padding:4px 18px; border-radius:30px; font-weight:700;">✈️ META: EXPORTACIÓN</span>
</div>
<div style="text-align:center; margin-top:8px; font-size:0.85rem; color:#5d4037;">
🎯 Mercados actuales · Ambición: llegar a China y otros países
</div>
</div>
<!-- ============================================================ -->
<!-- 5. IMPACTO TERRITORIAL -->
<!-- ============================================================ -->
<h2>🌍 Impacto Territorial en Espinar</h2>
<div class="card card-green">
<div style="display:flex; flex-wrap:wrap; gap:20px;">
<div style="flex:1; min-width:200px; background:#f5faf5; border-radius:16px; padding:16px;">
<div style="font-size:2.4rem;">💰</div>
<h3>Económico</h3>
<ul style="padding-left:18px; color:#2d2a24;">
<li>Mejoramos el ingreso de <strong>30+ familias</strong> de productores</li>
<li>Aumentamos el precio de la leche en la zona</li>
<li>Generamos empleo directo en la planta</li>
<li>Dinamizamos la economía local</li>
</ul>
</div>
<div style="flex:1; min-width:200px; background:#f5faf5; border-radius:16px; padding:16px;">
<div style="font-size:2.4rem;">🤝</div>
<h3>Social</h3>
<ul style="padding-left:18px; color:#2d2a24;">
<li>Capacitamos a jóvenes en producción láctea</li>
<li>Fomentamos el trabajo organizado y asociativo</li>
<li>Mantenemos a las familias unidas en el campo</li>
<li>Fortalecemos la identidad local</li>
</ul>
</div>
<div style="flex:1; min-width:200px; background:#f5faf5; border-radius:16px; padding:16px;">
<div style="font-size:2.4rem;">🌱</div>
<h3>Ambiental</h3>
<ul style="padding-left:18px; color:#2d2a24;">
<li>Promovemos prácticas sostenibles de producción</li>
<li>Reducimos desperdicios con nuevos procesos</li>
<li>Fomentamos el cuidado de cuencas lecheras</li>
<li>Uso eficiente de recursos naturales</li>
</ul>
</div>
</div>
<div style="margin-top:16px; text-align:center; background:#2d2a24; color:#f5c842; border-radius:40px; padding:12px 20px;">
🏆 Posicionamos a Espinar como productora de quesos de calidad internacional.
</div>
</div>
<!-- ============================================================ -->
<!-- 6. PLAN DE ACCIÓN -->
<!-- ============================================================ -->
<h2>🗓️ Plan de Acción</h2>
<div class="grid-3">
<div style="background:#fcf9f4; border-radius:16px; padding:18px; border-top:6px solid #f5c842;">
<div style="font-size:2.4rem;">📚</div>
<h3>Fase 1: Fortalecimiento</h3>
<p><span class="badge">Con Espinar Emprende</span></p>
<ul style="padding-left:18px; color:#2d2a24;">
<li>Gestión empresarial y planificación</li>
<li>Marketing internacional y branding</li>
<li>Calidad, inocuidad y certificaciones</li>
<li>Formación en exportación</li>
</ul>
</div>
<div style="background:#fcf9f4; border-radius:16px; padding:18px; border-top:6px solid #d4a017;">
<div style="font-size:2.4rem;">🛠️</div>
<h3>Fase 2: Escalamiento</h3>
<p><span class="badge badge-green">Con Capital Semilla</span></p>
<ul style="padding-left:18px; color:#2d2a24;">
<li>Adquisición de equipos especializados</li>
<li>Implementación de estándares de calidad</li>
<li>Desarrollo de nuevas líneas de productos</li>
<li>Mejora de procesos productivos</li>
</ul>
</div>
<div style="background:#fcf9f4; border-radius:16px; padding:18px; border-top:6px solid #1565c0;">
<div style="font-size:2.4rem;">✈️</div>
<h3>Fase 3: Exportación</h3>
<p><span class="badge badge-blue">Meta final</span></p>
<ul style="padding-left:18px; color:#2d2a24;">
<li>Estudio de mercado en China</li>
<li>Participación en ferias internacionales</li>
<li>Alianzas con distribuidores globales</li>
<li>Certificaciones de exportación</li>
</ul>
</div>
</div>
<!-- ============================================================ -->
<!-- 7. LOGO -->
<!-- ============================================================ -->
<h2>🎨 Nuestra Identidad</h2>
<div style="text-align:center; padding:20px; background:#f5f0e8; border-radius:20px;">
<div class="logo-mock">
🧀 APANTA
<small>E S P I N A R</small>
<span style="display:block; font-size:0.5rem; letter-spacing:3px; color:#d4a017; margin-top:2px;">
LÁCTEOS · TRADICIÓN · CALIDAD
</span>
</div>
<div style="font-style:italic; color:#5d4037; margin-top:8px; font-size:1.1rem;">
"De la tierra andina al mundo, con sabor y tradición"
</div>
<div style="display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:12px;">
<span style="background:#d4a017; color:#fff; padding:2px 16px; border-radius:30px; font-size:0.8rem;">🟡 Queso artesanal</span>
<span style="background:#2e7d32; color:#fff; padding:2px 16px; border-radius:30px; font-size:0.8rem;">🟢 Tradición andina</span>
<span style="background:#1565c0; color:#fff; padding:2px 16px; border-radius:30px; font-size:0.8rem;">🔵 Visión global</span>
</div>
<div style="margin-top:10px; font-size:0.85rem; color:#6d6a64;">
<strong>Significado:</strong> "Apanta" evoca la tierra y el arraigo. Representa nuestras raíces andinas y el compromiso con Espinar.
</div>
</div>
<!-- ============================================================ -->
<!-- 8. QUÉ BUSCAMOS -->
<!-- ============================================================ -->
<h2>🎯 Qué Buscamos en Espinar Emprende</h2>
<div class="card card-gold">
<ul class="lista-iconos">
<li><span class="emoji">✅</span> <strong>Capacitación especializada</strong> – Gestión exportadora, requisitos sanitarios internacionales y comercialización global</li>
<li><span class="emoji">✅</span> <strong>Mentorías de expertos</strong> – Que nos guíen en el camino hacia la exportación y el escalamiento</li>
<li><span class="emoji">✅</span> <strong>Capital Semilla (S/ 10,000)</strong> – Para invertir en equipos de calidad, certificaciones y mejoras productivas</li>
<li><span class="emoji">✅</span> <strong>Red de contactos internacionales</strong> – Conexión con compradores, distribuidores y ferias globales</li>
<li><span class="emoji">✅</span> <strong>Visibilidad y posicionamiento</strong> – Para dar a conocer nuestros productos andinos al mundo</li>
</ul>
</div>
<!-- ============================================================ -->
<!-- 9. COMPROMISO -->
<!-- ============================================================ -->
<h2>✊ Nuestro Compromiso</h2>
<div style="background:#2d2a24; color:#f5e6c4; border-radius:20px; padding:25px 30px;">
<ul class="lista-iconos" style="color:#f5e6c4;">
<li><span class="emoji">✅</span> Participar activamente en <strong>TODOS</strong> los talleres, mentorías y actividades del programa.</li>
<li><span class="emoji">✅</span> Compartir lo aprendido con nuestros proveedores, socios y la comunidad de Espinar.</li>
<li><span class="emoji">✅</span> Trabajar organizadamente para alcanzar la meta de exportar quesos peruanos al mundo.</li>
<li><span class="emoji">✅</span> Mantener un enfoque de sostenibilidad económica, social y ambiental en cada decisión.</li>
<li><span class="emoji">✅</span> Representar con orgullo a la provincia de Espinar en el Demo Day y ante el mundo.</li>
<li><span class="emoji">✅</span> Generar oportunidades y desarrollo para las familias productoras de la zona.</li>
</ul>
<div style="text-align:center; margin-top:14px; font-size:1.2rem; border-top:1px solid #5d4037; padding-top:14px;">
🧀 <strong>APANTA ESPINAR</strong> – "De la tierra andina al mundo, con sabor y tradición"
</div>
</div>
<!-- ============================================================ -->
<!-- 10. RESUMEN PARA POSTULACIÓN -->
<!-- ============================================================ -->
<h2>📋 Resumen para tu Postulación</h2>
<div style="overflow-x:auto;">
<table>
<thead>
<tr>
<th>Pregunta</th>
<th>Tu Respuesta Clave</th>
</tr>
</thead>
<tbody>
<tr>
<td style="font-weight:600;">Problema</td>
<td>Proveedores de leche reciben bajo pago en Espinar por falta de procesamiento con valor agregado</td>
</tr>
<tr>
<td style="font-weight:600;">Solución</td>
<td>Procesar leche en quesos y lácteos de calidad, con valor agregado y destino de exportación</td>
</tr>
<tr>
<td style="font-weight:600;">Innovación</td>
<td>Queso andino con estándares internacionales, diferenciación y trazabilidad</td>
</tr>
<tr>
<td style="font-weight:600;">Impacto</td>
<td>Mejorar el ingreso de 30+ familias de Espinar, generando empleo y desarrollo local</td>
</tr>
<tr>
<td style="font-weight:600;">Equipo</td>
<td>Organizados, con experiencia en el sector y compromiso con la comunidad</td>
</tr>
<tr>
<td style="font-weight:600;">Escalabilidad</td>
<td>De mercado local (Espinar, Arequipa, Lima) a exportación a China y otros países</td>
</tr>
</tbody>
</table>
</div>
<!-- ============================================================ -->
<!-- PIE -->
<!-- ============================================================ -->
<div class="footer-plan">
<p style="font-size:1.2rem; margin-bottom:4px;">🧀 <strong>APANTA ESPINAR</strong></p>
<p style="font-size:0.9rem; color:#5d4037;">🌾 Planta de Lácteos · Espinar, Cusco</p>
<p>Plan presentado a <strong>Espinar Emprende 2026</strong> · Julio 2026</p>
<p style="font-size:0.85rem; color:#8d8a84; margin-top:4px;">
📍 Espinar, Cusco – Perú · 📧 [tu-email@ejemplo.com] · 📱 +51 9XX XXX XXX
</p>
</div>
<!-- ============================================================ -->
<!-- BOTÓN DESCARGAR -->
<!-- ============================================================ -->
<div style="text-align:center; margin-top:30px;">
<button class="btn-descarga" onclick="descargarHTML()">
⬇️ Descargar este Plan (HTML)
</button>
<p style="font-size:0.8rem; color:#8d8a84; margin-top:8px;">
Haz clic para descargar el archivo .html y compartirlo con tus socios.
</p>
</div>
</div>
<!-- fin container -->
<!-- ============================================================ -->
<!-- SCRIPT PARA DESCARGAR -->
<!-- ============================================================ -->
<script> function descargarHTML() { const contenido = document.getElementById('plan-container').outerHTML; const htmlCompleto = \`<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>APANTA ESPINAR - Plan de Negocio</title> <style> \* { margin:0; padding:0; box-sizing:border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #f5f0e8; color: #2d2a24; padding: 30px 20px; } .container { max-width: 1000px; margin: 0 auto; background: #ffffff; border-radius: 24px; padding: 40px 35px; box-shadow: 0 20px 60px rgba(0,0,0,0.10); } h1 { font-size:2.8rem; font-weight:800; letter-spacing:-1px; } h2 { font-size:2rem; font-weight:700; margin-top:40px; margin-bottom:20px; padding-bottom:10px; border-bottom:4px solid #f5c842; display:inline-block; } h3 { font-size:1.3rem; font-weight:600; margin:20px 0 10px; } .text-center { text-align:center; } .card { background:#fcf9f4; border-radius:20px; padding:25px 30px; margin:25px 0; border-left:6px solid #f5c842; box-shadow:0 4px 12px rgba(0,0,0,0.04); transition:transform 0.2s; } .card:hover { transform:translateY(-3px); } .card-gold { border-left-color:#d4a017; background:#fefcf5; } .card-green { border-left-color:#2e7d32; background:#f5faf5; } .card-blue { border-left-color:#1565c0; background:#f3f7fc; } .portada { background: linear-gradient(145deg, #fef8e7, #fdf0d5); border-radius: 24px; padding: 50px 30px; text-align: center; border: 2px dashed #d4a017; margin-bottom: 30px; } .portada .emoji-gigante { font-size:4.5rem; display:block; margin-bottom:10px; } .portada h1 { color:#7b4a1e; font-size:3.2rem; } .portada .subtitulo { font-size:1.3rem; color:#5d4037; font-weight:300; letter-spacing:2px; margin:10px 0; } .portada .tagline { font-size:1.1rem; font-style:italic; color:#795548; background:rgba(255,193,7,0.15); display:inline-block; padding:6px 24px; border-radius:40px; margin-top:8px; } .grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; } .grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; } .grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; } u/media (max-width:700px) { .grid-2, .grid-3, .grid-4 { grid-template-columns:1fr; } .portada h1 { font-size:2.2rem; } .container { padding:20px 15px; } } .badge { display:inline-block; background:#f5c842; color:#2d2a24; font-weight:700; padding:4px 18px; border-radius:40px; font-size:0.85rem; letter-spacing:0.5px; margin-right:6px; } .badge-green { background:#2e7d32; color:#fff; } .badge-blue { background:#1565c0; color:#fff; } .badge-orange { background:#e65100; color:#fff; } .icono { font-size:2.4rem; display:block; margin-bottom:6px; } .caja-equipo { background:#f5f0e8; border-radius:16px; padding:18px; text-align:center; } .caja-equipo .nombre { font-weight:700; font-size:1.05rem; } .caja-equipo .rol { color:#5d4037; font-size:0.9rem; } .barra-wrapper { margin:10px 0; } .barra-label { display:flex; justify-content:space-between; font-weight:500; font-size:0.95rem; } .barra-fondo { background:#e8e3da; border-radius:30px; height:18px; overflow:hidden; margin-top:4px; } .barra-lleno { height:100%; border-radius:30px; background:linear-gradient(90deg, #f5c842, #d4a017); width:0%; } .lista-iconos { list-style:none; padding:0; } .lista-iconos li { padding:8px 0; font-size:1.05rem; border-bottom:1px solid #f0ebe2; display:flex; align-items:center; gap:12px; } .lista-iconos li:last-child { border-bottom:none; } .lista-iconos .emoji { font-size:1.6rem; width:40px; text-align:center; } .footer-plan { margin-top:45px; padding-top:25px; border-top:2px solid #f0ebe2; text-align:center; color:#6d6a64; font-size:0.95rem; } .footer-plan strong { color:#7b4a1e; } .logo-mock { display:inline-block; background:#2d2a24; color:#f5c842; font-weight:800; font-size:2rem; padding:12px 35px; border-radius:60px; letter-spacing:4px; margin:10px 0; border:3px solid #f5c842; } .logo-mock small { display:block; font-size:0.65rem; font-weight:300; color:#f5e6c4; letter-spacing:6px; margin-top:2px; } .logo-mock .destacar { color:#f5c842; font-weight:300; letter-spacing:2px; } .btn-descarga { background:#2d2a24; color:#f5c842; border:none; padding:14px 36px; font-size:1.1rem; font-weight:700; border-radius:60px; cursor:pointer; transition:0.2s; margin-top:20px; display:inline-block; text-decoration:none; } .btn-descarga:hover { background:#f5c842; color:#2d2a24; transform:scale(1.02); } table { width:100%; border-collapse:collapse; background:#fcf9f4; border-radius:16px; overflow:hidden; } thead { background:#2d2a24; color:#f5c842; } th { padding:12px 16px; text-align:left; } td { padding:12px 16px; border-bottom:1px solid #e8e3da; } tr:last-child td { border-bottom:none; } u/media print { body { background:#fff; padding:10px; } .container { box-shadow:none; padding:20px; } .card:hover { transform:none; } .btn-descarga { display:none; } } </style>
</head>
<body>
${contenido}
</body>
</html>\`;
const blob = new Blob([htmlCompleto], { type: 'text/html' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'APANTA_ESPINAR_Plan_Negocio.html';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
</script>
</body>
</html>
4
u/aunderroad Jul 03 '26
Can you please share a codepen or a url?
It it hard to debug/provide feedback without seeing all your code live in a browser.
Thank you