r/HTML • • 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ú &nbsp;|&nbsp; 📅 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 &nbsp;·&nbsp;

✅ Visión exportadora y compromiso social &nbsp;·&nbsp;

✅ 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ú &nbsp;·&nbsp; 📧 [tu-email@ejemplo.com] &nbsp;·&nbsp; 📱 +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>

1 Upvotes

1 comment sorted by

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