:root{
  --maiz:#F2B84B; --maiz-claro:#FBE3A6; --terracota:#C65D3B; --terracota-osc:#A44829;
  --eco:#4F7A4B; --eco-osc:#2F4F2E; --crema:#FBF5E9; --cafe:#3B2A20; --texto:#5A4A3F;
  --sombra:0 20px 50px -20px rgba(59,42,32,.28); --radio:24px;
  --serif:'Playfair Display',Georgia,serif; --sans:'Plus Jakarta Sans',system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{font-family:var(--sans);background:var(--crema);color:var(--texto);line-height:1.7;overflow-x:hidden}
h1,h2,h3{font-family:var(--serif);color:var(--cafe);line-height:1.15;font-weight:700}
h1{font-size:clamp(2.4rem,5.5vw,4.4rem)} h2{font-size:clamp(1.9rem,3.6vw,3rem)} h3{font-size:1.35rem}
em{color:var(--terracota);font-style:italic}
a{color:inherit;text-decoration:none}
ul{list-style:none}

/* Botones */
.btn{display:inline-block;background:var(--terracota);color:#fff;padding:.95rem 1.8rem;border-radius:999px;font-weight:600;font-size:.95rem;border:none;cursor:pointer;transition:transform .3s,box-shadow .3s,background .3s;box-shadow:0 10px 25px -10px rgba(198,93,59,.7);font-family:var(--sans)}
.btn:hover{transform:translateY(-3px);background:var(--terracota-osc);box-shadow:0 16px 30px -10px rgba(198,93,59,.8)}
.btn-ghost{background:transparent;color:var(--cafe);border:1.5px solid var(--cafe);box-shadow:none}
.btn-ghost:hover{background:var(--cafe);color:#fff}
.btn-small{padding:.6rem 1.3rem;font-size:.85rem}
.btn-block{width:100%;padding:1.1rem;font-size:1rem}
.eyebrow{display:inline-block;text-transform:uppercase;letter-spacing:.18em;font-size:.75rem;font-weight:700;color:var(--eco);margin-bottom:1rem;transition:opacity .4s}
.eyebrow.light{color:var(--maiz)}

/* Nav */
.nav{position:fixed;top:16px;left:50%;transform:translateX(-50%);width:min(1120px,calc(100% - 32px));display:flex;align-items:center;justify-content:space-between;padding:.7rem 1.4rem;background:rgba(251,245,233,.75);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(59,42,32,.08);border-radius:999px;z-index:100;transition:box-shadow .3s,background .3s}
.nav.scrolled{box-shadow:var(--sombra);background:rgba(251,245,233,.92)}
.logo{font-family:var(--serif);font-size:1.35rem;font-weight:700;color:var(--cafe);display:flex;align-items:center;gap:.5rem}
.logo.light{color:#fff}
.logo-dot{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--maiz-claro),var(--maiz) 60%,var(--terracota))}
.menu{display:flex;align-items:center;gap:1.7rem;font-size:.9rem;font-weight:500}
.menu a:not(.btn){position:relative}
.menu a:not(.btn)::after{content:'';position:absolute;left:0;bottom:-4px;width:0;height:2px;background:var(--terracota);transition:width .3s}
.menu a:not(.btn):hover::after{width:100%}
.burger{display:none;background:none;border:none;width:32px;height:32px;cursor:pointer;position:relative}
.burger span{position:absolute;left:5px;right:5px;height:2px;background:var(--cafe);transition:.3s}
.burger span:first-child{top:12px}.burger span:last-child{top:19px}
.burger.open span:first-child{top:16px;transform:rotate(45deg)}.burger.open span:last-child{top:16px;transform:rotate(-45deg)}

/* Hero */
.hero{position:relative;padding:150px 24px 90px;background:linear-gradient(160deg,#FFF3D3 0%,var(--crema) 55%,#F7E6CC 100%);overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;animation:morph 14s ease-in-out infinite alternate}
.blob-1{width:420px;height:420px;background:var(--maiz);top:-120px;right:-80px}
.blob-2{width:340px;height:340px;background:#C8DDB8;bottom:-100px;left:-100px;animation-delay:-6s}
@keyframes morph{to{transform:translate(40px,30px) scale(1.15)}}
.hero-inner{position:relative;max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
.hero-text p{font-size:1.1rem;max-width:520px;margin:1.4rem 0 2rem;transition:opacity .4s}
.hero-text h1{transition:opacity .4s,transform .4s}
.fade{opacity:0!important;transform:translateY(8px)}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap}
.dots{display:flex;gap:.6rem;margin-top:2.2rem}
.dot{width:10px;height:10px;border-radius:999px;border:none;background:rgba(59,42,32,.2);cursor:pointer;transition:width .4s,background .4s}
.dot.active{width:34px;background:var(--terracota)}

/* Arepas CSS */
.hero-visual{position:relative;height:440px}
.plate{position:absolute;inset:30px 10px;border-radius:50%;background:radial-gradient(circle,#fff 0%,#F6EAD2 70%,#EBD8B3 100%);box-shadow:inset 0 0 0 10px rgba(255,255,255,.7),var(--sombra);animation:giro 40s linear infinite}
@keyframes giro{to{transform:rotate(360deg)}}
.arepa{position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFE59B 0%,var(--maiz) 45%,#D98F2B 100%);box-shadow:inset -8px -10px 20px rgba(160,90,20,.35),0 14px 24px -8px rgba(59,42,32,.45)}
.arepa::after{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 60% 55%,rgba(160,80,20,.35) 0 6%,transparent 7%),radial-gradient(circle at 30% 65%,rgba(160,80,20,.3) 0 5%,transparent 6%),radial-gradient(circle at 55% 25%,rgba(160,80,20,.3) 0 4%,transparent 5%)}
.a1{width:56%;height:56%;top:20%;left:22%}
.a2{width:30%;height:30%;top:6%;left:10%}
.a3{width:26%;height:26%;bottom:8%;right:10%}
.steam{position:absolute;left:35%;top:-30px;width:12px;height:50px;border-radius:50%;background:rgba(255,255,255,.7);filter:blur(6px);animation:humo 3s ease-in-out infinite}
@keyframes humo{0%{opacity:0;transform:translateY(20px)}50%{opacity:.9}100%{opacity:0;transform:translateY(-30px)}}
.float-card{position:absolute;display:flex;align-items:center;gap:.7rem;background:#fff;border-radius:18px;padding:.8rem 1.1rem;box-shadow:var(--sombra);font-size:.8rem;line-height:1.3;animation:flota 6s ease-in-out infinite}
.float-card b{font-family:var(--serif);font-size:1.4rem;color:var(--terracota)}
.fc-1{top:6%;right:-4%}.fc-2{bottom:22%;left:-6%;animation-delay:-2s}.fc-3{bottom:-2%;right:12%;animation-delay:-4s}
@keyframes flota{50%{transform:translateY(-14px)}}

/* Contador antojos */
.antojo{position:relative;max-width:1120px;margin:70px auto 0;display:flex;align-items:center;gap:2rem;background:#fff;border-radius:var(--radio);padding:1.6rem 2rem;box-shadow:var(--sombra);flex-wrap:wrap}
.antojo-num{font-family:var(--serif);font-size:3.2rem;font-weight:700;color:var(--terracota);line-height:1;display:flex;flex-direction:column}
.antojo-num small{font-family:var(--sans);font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;color:var(--texto);font-weight:600;margin-top:.3rem}
.antojo-num.bump #contador{animation:bump .5s}
@keyframes bump{40%{transform:scale(1.3);color:var(--eco)}}
.antojo p{flex:1;min-width:220px}
.btn-heart span{display:inline-block;margin-left:.3rem;transition:transform .3s}
.btn-heart:hover span{transform:scale(1.4)}
.btn-heart.done{background:var(--eco);box-shadow:0 10px 25px -10px rgba(79,122,75,.7)}
.heart-fly{position:fixed;pointer-events:none;font-size:1.4rem;z-index:200;animation:vuela 1.2s ease-out forwards}
@keyframes vuela{to{transform:translate(var(--dx),-160px) scale(.4) rotate(var(--r));opacity:0}}

/* Sellos */
.sellos{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding:60px 24px}
.sello{text-align:center;padding:1rem}
.sello span{font-size:2rem;display:block;margin-bottom:.4rem}
.sello p{font-size:.88rem;font-weight:500;color:var(--cafe)}

/* Secciones */
.section{max-width:1120px;margin:0 auto;padding:90px 24px}
.section-head{text-align:center;max-width:760px;margin:0 auto 3.2rem}
.section-head p{margin-top:1.2rem}
.split{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.split-text p{margin-top:1.1rem}
.card-photo{position:relative;border-radius:var(--radio);background:linear-gradient(150deg,var(--eco) 0%,var(--eco-osc) 100%);aspect-ratio:1/1.05;overflow:hidden;box-shadow:var(--sombra);display:flex;align-items:flex-end}
.mazorca{position:absolute;top:12%;left:50%;width:34%;height:56%;transform:translateX(-50%) rotate(8deg);border-radius:50% 50% 45% 45%/60% 60% 40% 40%;background:repeating-linear-gradient(90deg,var(--maiz) 0 9px,#E8A72F 9px 11px),var(--maiz);box-shadow:inset -10px 0 18px rgba(120,60,10,.3),0 20px 30px -10px rgba(0,0,0,.4);animation:mece 6s ease-in-out infinite}
.mazorca::before,.mazorca::after{content:'';position:absolute;bottom:-8%;width:55%;height:78%;background:linear-gradient(180deg,#8FB57F,#5F8A55);border-radius:10% 90% 10% 90%/20% 80% 20% 80%}
.mazorca::before{left:-30%;transform:rotate(-14deg)}.mazorca::after{right:-30%;transform:scaleX(-1) rotate(-14deg)}
@keyframes mece{50%{transform:translateX(-50%) rotate(2deg)}}
.quote{position:relative;margin:1.5rem;padding:1.3rem 1.5rem;background:rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:18px;color:#fff;font-family:var(--serif);font-style:italic;font-size:1.15rem;border:1px solid rgba(255,255,255,.25)}
.checks{margin-top:1.5rem;display:grid;gap:.7rem}
.checks li{padding-left:2rem;position:relative;font-weight:500;color:var(--cafe)}
.checks li::before{content:'✓';position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:50%;background:var(--eco);color:#fff;font-size:.75rem;display:grid;place-items:center}

/* Queso */
.queso{max-width:none;background:#FFF8E7;border-radius:48px;margin:20px 16px;padding-left:max(24px,calc((100% - 1120px)/2 + 24px));padding-right:max(24px,calc((100% - 1120px)/2 + 24px))}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.card{background:#fff;border-radius:var(--radio);padding:2.2rem 1.8rem;box-shadow:var(--sombra);transition:transform .4s,box-shadow .4s;border:1px solid rgba(242,184,75,.25)}
.card:hover{transform:translateY(-10px);box-shadow:0 30px 60px -20px rgba(59,42,32,.35)}
.icon{width:60px;height:60px;border-radius:18px;background:var(--maiz-claro);display:grid;place-items:center;font-size:1.7rem;margin-bottom:1.2rem}
.card p{margin-top:.7rem;font-size:.95rem}
.nota{text-align:center;font-size:.8rem;margin-top:2rem;opacity:.75}

/* Productos */
.productos{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem;align-items:stretch}
.producto{position:relative;background:#fff;border-radius:var(--radio);padding:2.2rem 1.8rem;text-align:center;box-shadow:var(--sombra);transition:transform .4s;display:flex;flex-direction:column;align-items:center}
.producto:hover{transform:translateY(-10px) rotate(-.6deg)}
.producto p{font-size:.93rem;margin:.7rem 0 1.2rem;flex:1}
.producto.destacado{border:2px solid var(--maiz);transform:translateY(-14px)}
.producto.destacado:hover{transform:translateY(-24px)}
.badge{position:absolute;top:-14px;background:var(--terracota);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.35rem 1rem;border-radius:999px}
.mini-arepa{width:120px;height:120px;border-radius:50%;margin-bottom:1.3rem;background:radial-gradient(circle at 35% 30%,#FFE59B,var(--maiz) 50%,#D98F2B);box-shadow:inset -6px -8px 16px rgba(160,90,20,.35),0 14px 20px -8px rgba(59,42,32,.4);transition:transform .6s}
.producto:hover .mini-arepa{transform:rotate(25deg) scale(1.08)}
.mini-arepa.dorada{background:radial-gradient(circle at 35% 30%,#FFD27A,#E49A2C 50%,#B8701A)}
.mini-arepa.verde{background:radial-gradient(circle at 35% 30%,#FFE59B,var(--maiz) 50%,#D98F2B);outline:6px solid #C8DDB8;outline-offset:4px}
.precio{font-family:var(--serif);font-size:1.7rem;color:var(--terracota);font-weight:700;margin-bottom:1.1rem}
.precio small{font-family:var(--sans);font-size:.7rem;color:var(--texto);font-weight:500}

/* Campo */
.campo{max-width:none;background:linear-gradient(160deg,var(--eco) 0%,var(--eco-osc) 100%);color:#E8F0E2;border-radius:48px;margin:20px 16px;padding-left:max(24px,calc((100% - 1120px)/2 + 24px));padding-right:max(24px,calc((100% - 1120px)/2 + 24px))}
.campo h2{color:#fff}.campo em{color:var(--maiz)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.stat{text-align:center;padding:1.8rem 1rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:var(--radio);backdrop-filter:blur(6px)}
.stat b{display:block;font-family:var(--serif);font-size:2.8rem;color:var(--maiz);line-height:1.1}
.stat span{font-size:.88rem}

/* Pedido */
.pedido-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:3.5rem;align-items:start}
.pedido-info p{margin-top:1.1rem}
.form{background:#fff;padding:2.4rem;border-radius:28px;box-shadow:var(--sombra);border-top:6px solid var(--maiz)}
.field{margin-bottom:1.2rem;display:flex;flex-direction:column;flex:1}
.row{display:flex;gap:1rem}
label{font-size:.82rem;font-weight:600;color:var(--cafe);margin-bottom:.4rem}
input,select,textarea{font-family:var(--sans);font-size:.95rem;padding:.9rem 1.1rem;border:1.5px solid #E7DCC8;border-radius:14px;background:var(--crema);color:var(--cafe);transition:border-color .3s,box-shadow .3s,background .3s;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--terracota);background:#fff;box-shadow:0 0 0 4px rgba(198,93,59,.15)}
input.invalid,textarea.invalid{border-color:#c0392b;background:#fff5f3}
textarea{resize:vertical}
.contador-chars{align-self:flex-end;margin-top:.3rem;font-size:.75rem;opacity:.7}
.total{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.2rem;background:var(--maiz-claro);border-radius:14px;margin-bottom:1.2rem;font-weight:600;color:var(--cafe)}
.total b{font-family:var(--serif);font-size:1.5rem;color:var(--terracota)}
.error{color:#c0392b;font-size:.85rem;min-height:1.2rem;margin-bottom:.6rem}

/* Footer */
.footer{background:var(--cafe);color:#D9C9B8;padding:70px 24px 30px;margin-top:80px}
.footer-in{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:3rem}
.footer p{font-size:.9rem;margin-top:.8rem}
.footer h4{color:#fff;font-family:var(--serif);margin-bottom:.8rem}
.footer a:not(.logo){display:block;font-size:.9rem;padding:.2rem 0;transition:color .3s}
.footer a:not(.logo):hover{color:var(--maiz)}
.copy{max-width:1120px;margin:3rem auto 0;border-top:1px solid rgba(255,255,255,.12);padding-top:1.4rem;text-align:center;font-size:.8rem}

/* Reveal */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s ease,transform .9s ease}
.reveal.in{opacity:1;transform:none}
.producto.destacado.reveal.in{transform:translateY(-14px)}

/* Confirmación PHP */
.confirm-body{min-height:100vh;display:grid;place-items:center;padding:30px 16px;background:linear-gradient(160deg,#FFF3D3,var(--crema) 55%,#F7E6CC)}
.confirm{max-width:560px;width:100%;background:#fff;border-radius:32px;padding:3rem 2.4rem;box-shadow:var(--sombra);text-align:center;animation:entra .8s cubic-bezier(.2,.8,.2,1)}
@keyframes entra{from{opacity:0;transform:translateY(30px) scale(.96)}}
.check-big{width:84px;height:84px;margin:0 auto 1.4rem;border-radius:50%;background:var(--eco);color:#fff;font-size:2.4rem;display:grid;place-items:center;animation:pop .7s .3s both cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{from{transform:scale(0)}}
.confirm h1{font-size:2rem;margin-bottom:.6rem}
.resumen{margin:1.8rem 0;text-align:left;background:var(--crema);border-radius:20px;padding:1.4rem 1.6rem}
.resumen div{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px dashed #E3D5BC;font-size:.92rem}
.resumen div:last-child{border:none}
.resumen b{color:var(--cafe)}
.resumen .coment{display:block}
.resumen .coment p{margin-top:.3rem;font-style:italic;word-break:break-word}
.confirm .err-list{color:#c0392b;text-align:left;margin:1rem 0 1.6rem;padding-left:1.2rem;list-style:disc}

/* Responsive */
@media(max-width:900px){
  .hero-inner,.split,.pedido-wrap{grid-template-columns:1fr}
  .hero-visual{height:340px;order:-1}
  .hero{padding-top:120px}
  .cards,.productos{grid-template-columns:1fr}
  .producto.destacado{transform:none}.producto.destacado.reveal.in{transform:none}
  .stats{grid-template-columns:1fr 1fr}
  .sellos{grid-template-columns:1fr 1fr}
  .footer-in{grid-template-columns:1fr}
  .burger{display:block}
  .menu{position:absolute;top:calc(100% + 10px);left:0;right:0;flex-direction:column;background:var(--crema);padding:1.5rem;border-radius:24px;box-shadow:var(--sombra);gap:1.1rem;opacity:0;pointer-events:none;transform:translateY(-10px);transition:.3s}
  .menu.open{opacity:1;pointer-events:auto;transform:none}
  .section{padding:64px 20px}
  .queso,.campo{border-radius:32px}
  .fc-1{right:0}.fc-2{left:0}
}
@media(max-width:560px){
  .row{flex-direction:column;gap:0}
  .form{padding:1.6rem}
  .antojo{padding:1.4rem}
  .stats{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}