/* Diseño pensado primero para celular: una sola columna, creativos a todo el ancho, CTA tras cada bloque. */
:root{
  --verde-os:#103D28;--verde:#4A8D32;--verde-t:#34701f;--crema:#F8F5EC;--cta:#F5C518;--cta-h:#e3b30c;
  --texto:#26302b;--suave:#5b665f;--linea:#e2dccb;--error:#b3261e;--rojo:#b3261e;
  --serif:Georgia,"Times New Roman",serif;--sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;font-family:var(--sans);font-size:16px;line-height:1.5;color:var(--texto);background:#0a2a1b;padding-bottom:80px}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--serif);line-height:1.15;margin:0 0 .5em}
p{margin:0 0 .75em}
a{color:inherit}
:focus-visible{outline:3px solid var(--cta);outline-offset:2px;box-shadow:0 0 0 5px var(--verde-os)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:#fff;color:#000;padding:10px 14px;z-index:99}
.skip:focus{left:8px;top:8px}
.centro{text-align:center}.peq{font-size:.9rem}

/* Columna tipo teléfono, centrada también en pantallas grandes */
.pagina{max-width:520px;margin:0 auto;background:var(--verde-os);color:#fff;min-height:100vh;box-shadow:0 0 40px rgba(0,0,0,.35)}

.top{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:#0a2a1b}
.logo{font:700 1.25rem var(--serif);letter-spacing:.03em;text-decoration:none}
.top span{font-size:.85rem;opacity:.85}
.aviso-top{background:var(--cta);color:#1c2a1f;overflow:hidden;white-space:nowrap;padding:11px 0;font:800 .9rem/1.2 var(--sans);letter-spacing:.03em}
.aviso-top__pista{display:flex;width:max-content;animation:aviso-mover 22s linear infinite}
.aviso-top__g{display:flex;flex:none}
.aviso-top__g span{padding:0 14px}
@keyframes aviso-mover{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.aviso-top{white-space:normal;text-align:center;padding:9px 12px}.aviso-top__pista{animation:none;width:auto}.aviso-top__g+.aviso-top__g{display:none}.aviso-top__g span:nth-child(n+4){display:none}}

/* Bloques apilados */
.bloque{padding:22px 16px;border-top:1px solid rgba(255,255,255,.08)}
.bloque h2{font-size:1.45rem;text-align:center;color:#fff}
.bloque--img{padding-left:0;padding-right:0}
.bloque--img>h2,.bloque--img>ul,.bloque--img>p,.bloque--img>.btn{margin-left:16px;margin-right:16px}
.bloque--img>.btn{width:calc(100% - 32px)}
.bloque--img>p{margin-bottom:12px}
#hero{padding-top:0;border-top:0}
.full{width:100%;height:auto;aspect-ratio:1/1;background:#173f2b}
.bloque--img .full{margin-bottom:14px}
#hero .full{margin-bottom:12px}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:12px 22px;border:0;border-radius:12px;font:800 1.05rem/1.1 var(--sans);text-decoration:none;cursor:pointer;background:var(--cta);color:#1c2a1f;box-shadow:0 4px 0 #b99500;text-align:center;letter-spacing:.01em}
.btn:hover{background:var(--cta-h)}.btn:active{transform:translateY(2px);box-shadow:0 2px 0 #b99500}
.btn--block{display:flex;width:100%}
.btn--grande{min-height:60px;font-size:1.15rem}
.btn--sec{background:#fff;color:var(--verde-os);box-shadow:0 3px 0 #bdb7a3;min-height:44px;font-size:.95rem}
.btn[disabled]{opacity:.6;cursor:wait}

/* Problemas: 2x2 */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.mini{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:12px 10px;text-align:center;font-weight:600;font-size:.92rem;line-height:1.3}
.mini span{display:block;font-size:1.5rem;margin-bottom:4px}

/* Listas y notas */
.lista{list-style:none;padding:0;margin-top:0;margin-bottom:12px;display:grid;gap:10px}
.lista li{padding-left:32px;position:relative}
.lista li::before{content:"✓";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;background:var(--cta);color:#1c2a1f;font-size:.8rem;font-weight:800;display:grid;place-items:center}
.nota{font-size:.82rem;color:#d3e3d9;background:rgba(0,0,0,.2);border-left:4px solid var(--cta);padding:9px 11px;border-radius:6px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;padding:0;list-style:none}
.tags li{background:#fff;color:var(--verde-os);border-radius:999px;padding:5px 12px;font-weight:700;font-size:.88rem}
.pendiente{background:#fff7d6;color:#3a3300;border-radius:10px;padding:10px 12px;font-size:.92rem}
#ingredientes p{color:#e8f1ec}

/* Carrusel */
.car__pista{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:6px 16px 12px;scrollbar-width:thin;margin:0 -16px}
.car__item{flex:0 0 72%;scroll-snap-align:center;background:#fff;color:var(--texto);border-radius:14px;overflow:hidden;position:relative}
.car__item img{width:100%;height:auto}
.car__item blockquote{margin:0;padding:16px 16px 6px;font-style:italic}
.car__autor{padding:0 16px 14px;font-weight:700;color:var(--verde-os);font-size:.9rem}
.car__ejemplo{position:absolute;top:8px;left:8px;z-index:2;background:var(--rojo);color:#fff;font-size:.66rem;font-weight:800;padding:3px 8px;border-radius:999px}
.car__nav{display:flex;justify-content:center;gap:14px;margin:4px 0 14px}
.car__btn{width:50px;height:50px;border-radius:50%;border:2px solid #fff;background:transparent;color:#fff;font-size:1.4rem;cursor:pointer}
.car__aviso{background:#ffe9e7;color:#7a1610;padding:9px 11px;border-radius:10px;font-size:.82rem}

/* Promociones: banda roja + 2x2 */
.bloque--rojo{background:linear-gradient(180deg,#0e4a2e,var(--verde-os))}
.banda{background:var(--rojo);color:#fff;border-radius:8px;padding:12px 10px;margin:0 0 6px;text-transform:uppercase;letter-spacing:.02em}
.promo-lista{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.promo{position:relative;background:#fff;color:var(--texto);border:3px solid transparent;border-radius:14px;padding:14px 8px 10px;text-align:center;display:flex;flex-direction:column;align-items:center}
.promo__t{font:800 .95rem/1.15 var(--sans);color:var(--verde-os);margin:0 0 6px;min-height:2.3em;display:flex;align-items:center;text-transform:uppercase;letter-spacing:.02em}
.promo__img{height:150px;width:auto;max-width:100%;object-fit:contain;margin:0 auto 6px;filter:drop-shadow(0 6px 5px rgba(0,0,0,.28))}
.promo__u{display:none}
.promo__precio{font:800 2rem/1 var(--serif);color:var(--verde-os);margin:2px 0 2px}
.promo__det{color:var(--suave);margin:0;font-size:.8rem}
.promo__ahorro{font-weight:700;color:var(--verde-t);margin:2px 0 8px;font-size:.82rem}
.promo__btn{margin-top:auto;width:100%;padding:8px 4px;background:var(--verde-os);color:#fff;box-shadow:0 3px 0 #06180f}
.promo--top{background:linear-gradient(180deg,#fff2b8,#fff);border-color:var(--cta);grid-column:1/-1;padding-top:22px}
.promo--top .promo__img{height:170px}
.promo--top .promo__precio{font-size:2.3rem}
.promo__flag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--rojo);color:#fff;font-weight:800;font-size:.75rem;padding:4px 12px;border-radius:999px;white-space:nowrap}
.promo.is-sel{border-color:var(--verde);box-shadow:0 0 0 3px rgba(245,197,24,.9)}
.promo.is-sel .promo__btn{background:var(--verde);color:#fff;box-shadow:0 3px 0 #2f6a1d}

/* Formulario */
#pedido h2{margin-bottom:12px}
.form{display:grid;gap:10px}
.campo label{display:block;font-weight:700;margin-bottom:3px;font-size:.82rem;text-transform:uppercase;letter-spacing:.03em}
.campo input,.campo select,.campo textarea{width:100%;min-height:50px;padding:11px 12px;border:0;border-radius:8px;font:inherit;font-size:16px;background:#fff;color:var(--texto)}
.campo textarea{min-height:76px;resize:vertical}
.campo [aria-invalid="true"]{outline:3px solid var(--error)}
.err{color:#ffb4ab;font-size:.84rem;margin:3px 0 0;font-weight:600}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.resumen{background:rgba(255,255,255,.1);border:1px dashed rgba(255,255,255,.5);border-radius:10px;padding:10px 12px}
.resumen.is-vacio{color:#d3e3d9}
.res__l{display:flex;justify-content:space-between;gap:10px;margin:0 0 3px}
.res__tot{border-top:1px solid rgba(255,255,255,.25);padding-top:7px;margin-top:5px;font-size:1.2rem}
.res__n{margin:5px 0 0;color:var(--cta);font-weight:700}
.estado{border-radius:8px;padding:10px 12px;font-weight:600}
.estado--error{background:#fde8e6;color:#7a1610}
.estado--info{background:#e8f1e1;color:var(--verde-os)}
.seguro{font-size:.8rem;color:#d3e3d9;text-align:center;margin:0}

/* FAQ */
.faq details{background:#fff;color:var(--texto);border-radius:10px;margin-bottom:8px}
.faq summary{padding:14px 16px;font-weight:700;cursor:pointer;min-height:50px;list-style:none;display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:.95rem}
.faq summary::after{content:"+";font-size:1.4rem;color:var(--verde-t)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 16px 14px;margin:0;color:var(--suave);font-size:.92rem}

.pie{background:#0a2a1b;color:#b9cfc2;padding:22px 16px 34px;font-size:.78rem}
.pie p{margin-bottom:.6em}

.cta-fijo{position:fixed;left:0;right:0;bottom:0;z-index:50;max-width:520px;margin:0 auto;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(10,42,27,.96);transform:translateY(110%);transition:transform .25s}
.cta-fijo.is-on{transform:none}

/* Gracias */
.gracias{min-height:70vh;display:grid;place-items:center;padding:24px 16px}
.card{background:#fff;color:var(--texto);border-radius:16px;padding:24px 18px;max-width:480px;margin:0 auto;text-align:center}
.card h1{color:var(--verde-os);font-size:1.7rem}
.card .err{color:var(--error)}
.check{width:68px;height:68px;border-radius:50%;background:var(--verde);color:#fff;font-size:2.1rem;display:grid;place-items:center;margin:0 auto 12px}
.pedido-id{font:700 1.2rem/1.2 monospace;background:var(--crema);border-radius:10px;padding:10px;display:inline-block;word-break:break-all}
.datos{text-align:left;margin:14px 0}
.datos p{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--linea);padding:8px 0;margin:0}
.card .btn{color:#1c2a1f}
.promo:last-child{grid-column:1/-1}