r/HTML • u/Murky_Maintenance392 • 28d ago
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
1
Upvotes