/* Capuleto — hoja unica del sitio. La sirve Pages al lado de las paginas y la comparten las seis.
   Vive fuera del HTML a proposito: el sitio paso de UNA pagina a SEIS, y con la hoja dentro de cada
   una el navegador se descargaria el mismo CSS seis veces y ademas habria seis copias que se
   separan. Aqui se descarga una vez y la segunda pagina ya la tiene en cache.
   La paleta NO esta escrita a mano: sale de marca.colores en config.json. Si Arturo cambia el oliva
   de su marca, cambian la caja, el ticket y las seis paginas en el mismo despliegue. */
:root{
  --oliva:#7A7D62; --olivaOsc:#575A43; --caramelo:#C98A63; --carameloClaro:#E9BC96;
  --tinta:#241F1A; --gris:#6F6960; --linea:#E7E1D5; --crema:#F6F1E7; --papel:#FFFFFF;
  --ok:#2E7D4F;
  --sombra:0 10px 30px rgba(36,31,26,.10); --sombra2:0 22px 55px rgba(36,31,26,.18);
  --cab:66px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Manrope,system-ui,sans-serif;color:var(--tinta);background:var(--crema);-webkit-font-smoothing:antialiased;line-height:1.55;overflow-x:hidden}
h1,h2,h3,.disp{font-family:Fraunces,Georgia,serif;letter-spacing:-.015em;line-height:1.1}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 20px}
.hidden{display:none!important}
section{scroll-margin-top:calc(var(--cab) + 8px)}

/* AVISO DE CONTRASTE (paleta de la marca): blanco sobre el oliva claro da 4.25, por debajo del 4.5
   que pide el texto pequeno. Por eso todo lo que lleva texto encima usa --olivaOsc, y sobre el
   caramelo se escribe en tinta y nunca en blanco. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:14px 24px;font-family:Fraunces,Georgia,serif;font-weight:700;font-size:15.5px;cursor:pointer;transition:transform .12s ease,box-shadow .2s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-pri{background:var(--olivaOsc);color:#fff;box-shadow:0 8px 22px rgba(87,90,67,.34)}
.btn-acc{background:var(--caramelo);color:var(--tinta);box-shadow:0 8px 22px rgba(201,138,99,.32)}
.btn-wa{background:#25d366;color:#fff;box-shadow:0 8px 22px rgba(37,211,102,.3)}
.btn-ghost{background:transparent;color:var(--olivaOsc);border:2px solid var(--olivaOsc)}
.btn-claro{background:rgba(255,255,255,.14);color:#fff;border:1.5px solid rgba(255,255,255,.55)}
.btn-lg{padding:16px 30px;font-size:16.5px}
.btn-blq{display:flex;width:100%}
.eyebrow{font-family:Manrope,system-ui,sans-serif;font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--olivaOsc)}
.eyebrow.claro{color:var(--carameloClaro)}

/* ── cabecera ──────────────────────────────────────────────────────────────────────────────── */
header{position:sticky;top:0;z-index:60;background:rgba(246,241,231,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--linea)}
.nav{display:flex;align-items:center;justify-content:space-between;height:var(--cab);gap:12px}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
/* El logo NO se pide a ciegas: nace oculto y solo se enciende cuando la imagen carga de verdad
   (capuleto.js). Mientras Arturo no suba el suyo, /api/publico/logo devuelve 404 y lo que se ve es
   el nombre, que es lo correcto: nunca el emblema que dibujamos nosotros. */
.brand img{width:40px;height:40px;border-radius:50%;flex:none;box-shadow:0 2px 8px rgba(0,0,0,.12);object-fit:cover}
.brand b{font-family:Fraunces;font-weight:800;font-size:18.5px;display:block;line-height:1.15}
.brand .sb{display:block;font-size:10.5px;color:var(--gris);font-weight:600;letter-spacing:.05em}
.nav-links{display:none;gap:22px;font-weight:600;font-size:14.5px}
.nav-links a{position:relative;padding:4px 0;color:var(--gris);transition:color .2s}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--caramelo);border-radius:2px;transition:right .25s cubic-bezier(.2,.7,.2,1)}
.nav-links a:hover{color:var(--tinta)}
.nav-links a:hover::after,.nav-links a.aqui::after{right:0}
.nav-links a.aqui{color:var(--olivaOsc)}
@media(min-width:960px){.nav-links{display:flex}}
.nav .btn{padding:11px 19px;font-size:14.5px}
/* El menu de telefono. Sin el, seis paginas con una sola barra de iconos se vuelven un sitio en el
   que solo se puede ir hacia delante. */
.burger{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;border:1.5px solid var(--linea);background:var(--papel);cursor:pointer;flex:none}
@media(min-width:960px){.burger{display:none}}
.burger span{display:block;width:17px;height:2px;background:var(--tinta);border-radius:2px;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:17px;height:2px;background:var(--tinta);border-radius:2px;transition:transform .25s,top .25s}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.menu-abierto .burger span{background:transparent}
.menu-abierto .burger span::before{top:0;transform:rotate(45deg)}
.menu-abierto .burger span::after{top:0;transform:rotate(-45deg)}
.menu-movil{position:fixed;inset:var(--cab) 0 auto 0;z-index:59;background:var(--crema);border-bottom:1px solid var(--linea);box-shadow:var(--sombra2);padding:12px 0 18px;transform:translateY(-120%);transition:transform .3s cubic-bezier(.2,.7,.2,1);max-height:calc(100vh - var(--cab));overflow-y:auto}
.menu-movil.on{transform:translateY(0)}
@media(min-width:960px){.menu-movil{display:none}}
.menu-movil a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 20px;font-family:Fraunces;font-weight:700;font-size:18px;border-bottom:1px solid var(--linea)}
.menu-movil a:last-child{border-bottom:0}
.menu-movil a .mm-d{font-family:Manrope,system-ui,sans-serif;font-weight:500;font-size:12.5px;color:var(--gris);text-align:right;max-width:52%}
.menu-movil a.aqui{color:var(--olivaOsc);background:var(--papel)}

/* ── la banda de estado: lo primero que sale de la caja en cada pagina ─────────────────────── */
/* Nace oculta. Solo aparece cuando /api/publico/negocio contesta y se ha podido calcular si el
   local esta abierto AHORA. Si la caja no responde, no se afirma nada: no hay peor cartel que uno
   que dice ABIERTO con la persiana bajada. */
.estado{position:relative;z-index:3;background:var(--olivaOsc);color:#fff;font-size:13px;font-weight:600;text-align:center;padding:9px 20px;line-height:1.4}
.estado.cerrado{background:var(--tinta)}
.estado b{color:#fff;font-weight:700}
.estado .pt{color:var(--carameloClaro)}


/* ── las puertas de la portada ─────────────────────────────────────────────────────────────── */
.puertas{display:grid;gap:14px}
@media(min-width:720px){.puertas{grid-template-columns:repeat(2,1fr);gap:18px}}
@media(min-width:1000px){.puertas{grid-template-columns:repeat(4,1fr)}}
.puerta{position:relative;display:flex;flex-direction:column;gap:6px;background:var(--papel);border:1px solid var(--linea);border-radius:20px;padding:22px 20px 20px;box-shadow:var(--sombra);overflow:hidden;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s}
.puerta::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--caramelo),var(--carameloClaro));transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
@media(hover:hover){.puerta:hover{transform:translateY(-6px);box-shadow:var(--sombra2);border-color:var(--carameloClaro)}.puerta:hover::before{transform:scaleX(1)}}
.puerta .pi{width:46px;height:46px;border-radius:14px;background:var(--crema);display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.puerta .pi svg{width:24px;height:24px;stroke:var(--olivaOsc);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.puerta b{font-family:Fraunces;font-weight:700;font-size:18px}
.puerta span{font-size:13.5px;color:var(--gris)}
.puerta .flecha{margin-top:10px;font-size:13px;font-weight:700;color:var(--olivaOsc);display:flex;align-items:center;gap:6px}
.puerta .flecha::after{content:"→";transition:transform .25s}
@media(hover:hover){.puerta:hover .flecha::after{transform:translateX(5px)}}

/* ── franja de pruebas ─────────────────────────────────────────────────────────────────────── */
.proof{background:var(--papel);border-bottom:1px solid var(--linea)}
.proof-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 14px;padding:26px 0}
@media(min-width:820px){.proof-grid{grid-template-columns:repeat(4,1fr);gap:22px}}
.proof-i b{display:block;font-family:Fraunces;font-weight:700;font-size:16px}
.proof-i span{display:block;font-size:12.5px;color:var(--gris);margin-top:2px}

/* ── bloques ───────────────────────────────────────────────────────────────────────────────── */
.blk{padding:56px 0}
@media(min-width:820px){.blk{padding:78px 0}}
.blk h2{font-size:29px;font-weight:700}
@media(min-width:820px){.blk h2{font-size:40px}}
.blk .sub{color:var(--gris);margin-top:10px;max-width:56ch;font-size:15.5px}
.head-blk{margin-bottom:28px}
.blk.papel{background:var(--papel)}

/* ── especialidades ────────────────────────────────────────────────────────────────────────── */
.esp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(min-width:820px){.esp-grid{grid-template-columns:repeat(3,1fr);gap:22px}}
.esp{background:var(--papel);border-radius:20px;overflow:hidden;box-shadow:var(--sombra);border:1px solid var(--linea);display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
@media(hover:hover){.esp:hover{transform:translateY(-5px);box-shadow:var(--sombra2)}}
.esp .ph{aspect-ratio:4/3;background:linear-gradient(150deg,#6C6F55,#575A43 60%,#3F4130);position:relative;overflow:hidden}
.esp .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
@media(hover:hover){.esp:hover .ph img{transform:scale(1.06)}}
/* Sin foto la tarjeta NO se ve rota: el hueco se convierte en una placa con el nombre del producto
   sobre el oliva de la marca. Se deshace solo en cuanto Arturo suba la foto desde su telefono. */
.esp .ph.noimg::after{content:attr(data-n);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-family:Fraunces;font-weight:700;font-size:17px;text-align:center;padding:16px;line-height:1.2}
.esp .bd{padding:14px 16px 16px;display:flex;flex-direction:column;gap:4px;flex:1}
.esp .bd h3{font-size:16.5px;font-weight:700}
.esp .bd .d{font-size:12.5px;color:var(--gris);flex:1}
.esp .bd .row{display:flex;align-items:center;justify-content:space-between;margin-top:10px;gap:8px}
.esp .price{font-family:Fraunces;font-weight:800;color:var(--olivaOsc);font-size:18px}
.mini{background:var(--crema);color:var(--olivaOsc);border:1.5px solid var(--olivaOsc);border-radius:9px;width:34px;height:34px;font-size:20px;cursor:pointer;font-weight:700;line-height:1;flex:none}
.mini:active{transform:scale(.9)}
/* En la PORTADA la tarjeta no tiene carrito detras: su boton es un enlace a la carta. El estilo es
   el mismo para que no se aprenda un gesto distinto en cada pagina. */
a.mini{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}

/* ── carta ─────────────────────────────────────────────────────────────────────────────────── */
.carta{background:var(--crema);padding-top:40px}
@media(min-width:820px){.carta{padding-top:56px}}
.catnav{position:sticky;top:var(--cab);z-index:40;background:rgba(246,241,231,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);margin-top:22px}
.catnav .wrap{display:flex;gap:8px;overflow-x:auto;padding-top:11px;padding-bottom:11px;scrollbar-width:none}
.catnav .wrap::-webkit-scrollbar{display:none}
.catnav a{flex:none;padding:7px 15px;border-radius:999px;background:var(--papel);border:1px solid var(--linea);font-size:13.5px;font-weight:600;white-space:nowrap;color:var(--gris)}
.catnav a.on{background:var(--olivaOsc);border-color:var(--olivaOsc);color:#fff}
.catsec{padding-top:30px}
.catsec h3{font-size:22px;font-weight:700;display:flex;align-items:center;gap:10px}
.catsec h3 .em{width:26px;height:3px;border-radius:2px;background:var(--caramelo);flex:none}
.catsec .note{color:var(--gris);font-size:13.5px;margin-top:6px}
.items{margin-top:14px;display:grid;gap:10px}
@media(min-width:820px){.items{grid-template-columns:1fr 1fr;gap:12px 22px}}
.it{background:var(--papel);border:1px solid var(--linea);border-radius:14px;padding:13px 15px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.it .info b{font-weight:600;font-size:15px}
.it .info small{display:block;color:var(--gris);font-size:12.5px;margin-top:2px}
.it .pa{display:flex;align-items:center;gap:10px;flex-shrink:0}
.it .p{font-family:Fraunces;font-weight:700;color:var(--olivaOsc);font-size:15.5px}
.it .add{background:var(--crema);color:var(--olivaOsc);border:1.5px solid var(--olivaOsc);border-radius:9px;width:34px;height:34px;font-size:20px;cursor:pointer;font-weight:700;line-height:1}
.it .add:active{transform:scale(.9)}
.qbadge{background:var(--caramelo);color:var(--tinta);border-radius:999px;min-width:20px;height:20px;font-size:11.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}

.it.agt-out .info b{text-decoration:line-through;color:var(--gris)}
.it.agt-out .info small,.it.agt-out .p{opacity:.5}
.agt-tag{background:var(--linea);color:var(--gris);border-radius:999px;padding:5px 11px;font-size:11.5px;font-weight:700;white-space:nowrap}
.esp.agt-out{opacity:.55}
.esp.agt-out h3{text-decoration:line-through}


/* El aviso «Quitamos X de tu pedido» NO puede vivir dentro del cajon del carrito: el cajon solo se
   abre pulsando el boton flotante, y ese boton se esconde justo cuando el carrito se queda en cero
   lineas, que es el caso en que mas falta hace el aviso. */
.wv-aviso{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:95;width:calc(100% - 28px);max-width:420px;display:flex;align-items:flex-start;gap:10px;background:#fff7e6;border:1px solid var(--linea);color:var(--tinta);font-size:12.5px;border-radius:12px;padding:10px 12px;line-height:1.45;box-shadow:0 12px 30px rgba(0,0,0,.22)}
.wv-aviso .t{flex:1}
.wv-aviso .x{flex:none;background:none;border:0;color:var(--gris);font-size:20px;line-height:1;padding:0 2px;cursor:pointer}


/* ── bloque oscuro ─────────────────────────────────────────────────────────────────────────── */
.dark{background:#575A43;color:#fff;position:relative;overflow:hidden}
.dark h2{color:#fff}
.dark .sub{color:rgba(255,255,255,.84)}
.dark-grid{display:grid;gap:26px}
@media(min-width:860px){.dark-grid{grid-template-columns:1.05fr .95fr;align-items:center;gap:44px}}
.perfiles{display:grid;gap:12px}
.perfil{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:14px}
.perfil b{font-family:Fraunces;font-weight:700;font-size:16px;display:block}
.perfil span{font-size:12.5px;color:rgba(255,255,255,.78)}
.perfil .pp{font-family:Fraunces;font-weight:800;color:var(--carameloClaro);font-size:16.5px;white-space:nowrap}

/* ── las dos casas ─────────────────────────────────────────────────────────────────────────── */
/* Montesco y Capuleto son las dos familias de la obra, y Arturo llamo asi a sus dos negocios a
   proposito. La pagina lo cuenta con un escudo por casa. Lo que NO entra, ni en literal ni en
   broma: el final de la obra. Es una cafeteria. */
.casas{display:grid;gap:18px}
@media(min-width:820px){.casas{grid-template-columns:1fr auto 1fr;align-items:center;gap:26px}}
.casa{position:relative;border-radius:22px;padding:26px 22px;border:1px solid var(--linea);background:var(--papel);box-shadow:var(--sombra);overflow:hidden}
.casa.esta{border-color:var(--carameloClaro);box-shadow:var(--sombra2)}
.casa .escudo{width:74px;height:86px;margin-bottom:14px}
.casa .escudo svg{width:100%;height:100%}
.casa h3{font-size:24px;font-weight:800}
.casa .rol{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--caramelo);margin-top:4px}
.casa p{font-size:14.5px;color:var(--gris);margin-top:12px}
.casa .ir{margin-top:16px}
.casas .y{font-family:Fraunces;font-weight:800;font-size:22px;color:var(--gris);text-align:center}
@media(min-width:820px){.casas .y{writing-mode:vertical-rl}}
.linea-tiempo{margin-top:34px;display:grid;gap:0;position:relative}
.linea-tiempo::before{content:"";position:absolute;left:13px;top:8px;bottom:8px;width:2px;background:var(--linea)}
.hito{position:relative;padding:0 0 22px 40px}
.hito::before{content:"";position:absolute;left:7px;top:5px;width:14px;height:14px;border-radius:50%;background:var(--caramelo);border:3px solid var(--crema)}
.hito b{display:block;font-family:Fraunces;font-size:16.5px}
.hito span{font-size:13.5px;color:var(--gris)}

/* ── delivery ──────────────────────────────────────────────────────────────────────────────── */
.zonas{list-style:none;display:grid;gap:10px;margin-top:18px}
.zonas li{background:var(--papel);border:1px solid var(--linea);border-radius:14px;padding:13px 16px;display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:14.5px}
.zonas li b{font-weight:600}
.pasos{display:grid;gap:14px;margin-top:22px}
@media(min-width:820px){.pasos{grid-template-columns:repeat(3,1fr);gap:20px}}
.paso{background:var(--papel);border:1px solid var(--linea);border-radius:18px;padding:20px}
.paso .n{width:30px;height:30px;border-radius:50%;background:var(--caramelo);color:var(--tinta);font-family:Fraunces;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:15px;margin-bottom:10px}
.paso b{display:block;font-family:Fraunces;font-size:16.5px;margin-bottom:4px}
.paso span{font-size:13.5px;color:var(--gris)}

/* ── cuenta del comensal / app ─────────────────────────────────────────────────────────────── */
.cuenta-caja{background:var(--papel);border:1px solid var(--linea);border-radius:22px;padding:28px 22px;box-shadow:var(--sombra)}
@media(min-width:820px){.cuenta-caja{padding:44px 40px}}
.cuenta-lista{display:grid;gap:14px;margin-top:24px}
@media(min-width:820px){.cuenta-lista{grid-template-columns:repeat(3,1fr);gap:22px}}
.cuenta-i b{display:block;font-family:Fraunces;font-size:16px;margin-bottom:3px}
.cuenta-i span{font-size:13.5px;color:var(--gris)}
/* el telefono dibujado de la pagina de la app */
.fono{width:230px;max-width:70vw;margin:0 auto;aspect-ratio:9/18.5;border-radius:34px;border:9px solid var(--tinta);background:var(--crema);box-shadow:var(--sombra2);position:relative;overflow:hidden}
.fono .isla{position:absolute;left:50%;top:9px;width:64px;height:17px;margin-left:-32px;border-radius:999px;background:var(--tinta);z-index:2}
.fono .pant{position:absolute;inset:0;display:flex;flex-direction:column}
.fono .pt{background:var(--olivaOsc);color:#fff;padding:32px 12px 12px;font-family:Fraunces;font-weight:800;font-size:14px}
.fono .pl{flex:1;padding:10px;display:grid;gap:7px;align-content:start}
.fono .pl i{display:block;height:34px;border-radius:9px;background:var(--papel);border:1px solid var(--linea)}
.fono .pl i:nth-child(2){background:linear-gradient(90deg,var(--papel) 70%,rgba(201,138,99,.25))}
.fono .pb{background:var(--caramelo);color:var(--tinta);text-align:center;font-family:Fraunces;font-weight:800;font-size:12.5px;padding:11px}
.pasos-app{display:grid;gap:12px;margin-top:20px;counter-reset:pa}
.pasos-app li{list-style:none;position:relative;padding:14px 16px 14px 52px;background:var(--papel);border:1px solid var(--linea);border-radius:14px;font-size:14px}
.pasos-app li::before{counter-increment:pa;content:counter(pa);position:absolute;left:14px;top:13px;width:26px;height:26px;border-radius:50%;background:var(--olivaOsc);color:#fff;font-family:Fraunces;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}
.pasos-app li b{font-weight:700}

/* ── ubicacion ─────────────────────────────────────────────────────────────────────────────── */
.ubi-grid{display:grid;gap:24px}
@media(min-width:860px){.ubi-grid{grid-template-columns:1fr 1fr;gap:40px}}
.dato{display:flex;gap:13px;padding:15px 0;border-bottom:1px solid var(--linea)}
.dato .ic{width:38px;height:38px;border-radius:11px;background:var(--crema);display:flex;align-items:center;justify-content:center;font-size:18px;flex:none}
.dato b{display:block;font-size:14.5px;font-weight:600}
.dato span{display:block;font-size:13.5px;color:var(--gris)}
.mapa{border:0;width:100%;height:300px;border-radius:20px;box-shadow:var(--sombra);background:var(--papel)}
@media(min-width:860px){.mapa{height:100%;min-height:340px}}

/* ── preguntas ─────────────────────────────────────────────────────────────────────────────── */
.faq{background:var(--papel)}
.faq-l{margin-top:22px;border-top:1px solid var(--linea)}
.faq-i{border-bottom:1px solid var(--linea)}
.faq-i summary{padding:17px 0;font-family:Fraunces;font-weight:700;font-size:16.5px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.faq-i summary::-webkit-details-marker{display:none}
.faq-i summary::after{content:"+";color:var(--caramelo);font-size:22px;line-height:1;flex:none}
.faq-i[open] summary::after{content:"–"}
.faq-i p{padding:0 0 17px;color:var(--gris);font-size:14.5px;max-width:70ch}

/* ── pie ───────────────────────────────────────────────────────────────────────────────────── */
footer{background:#241F1A;color:rgba(255,255,255,.72);padding:44px 0 34px;font-size:13.5px}
footer b{color:#fff}
.foot-grid{display:grid;gap:22px}
@media(min-width:860px){.foot-grid{grid-template-columns:1.3fr 1fr 1fr 1fr}}
.foot-grid h4{font-family:Fraunces;color:#fff;font-size:15.5px;margin-bottom:9px}
.foot-grid a:hover{color:#fff}
.legal{margin-top:28px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);font-size:12px;color:rgba(255,255,255,.5);display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between}

/* ── carrito ───────────────────────────────────────────────────────────────────────────────── */
.fab{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:80;display:none;align-items:center;gap:12px;background:var(--olivaOsc);color:#fff;border:0;border-radius:999px;padding:14px 22px;font-family:Fraunces;font-weight:700;font-size:15px;cursor:pointer;box-shadow:0 14px 34px rgba(63,65,48,.45)}
.fab.on{display:flex}
.fab .t{background:rgba(255,255,255,.18);border-radius:999px;padding:3px 11px;font-size:14px}
.fab.bump{animation:bump .3s}
@keyframes bump{0%{transform:translateX(-50%) scale(1)}45%{transform:translateX(-50%) scale(1.07)}100%{transform:translateX(-50%) scale(1)}}
.back{position:fixed;inset:0;background:rgba(36,31,26,.5);z-index:88;opacity:0;pointer-events:none;transition:opacity .25s}
.back.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--crema);border-radius:22px 22px 0 0;transform:translateY(102%);transition:transform .3s cubic-bezier(.2,.7,.2,1);max-height:88vh;display:flex;flex-direction:column}
.drawer.on{transform:translateY(0)}
@media(min-width:820px){.drawer{left:auto;right:0;top:0;bottom:0;width:430px;border-radius:0;transform:translateX(102%);max-height:none}.drawer.on{transform:translateX(0)}}
.dwrap{padding:18px 20px 22px;overflow-y:auto;display:flex;flex-direction:column;gap:14px}
.dhead{display:flex;justify-content:space-between;align-items:center}
.dhead h3{font-size:21px;font-weight:700}
.dclose{background:none;border:0;font-size:28px;line-height:1;color:var(--gris);cursor:pointer;padding:0 4px}
.ln{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--papel);border:1px solid var(--linea);border-radius:13px;padding:11px 13px}
.ln .n{font-size:14px;font-weight:600}
.ln .s{font-size:12.5px;color:var(--gris)}
.ln .q{display:flex;align-items:center;gap:9px;flex:none}
.ln .q button{width:29px;height:29px;border-radius:8px;border:1.5px solid var(--linea);background:var(--crema);font-size:17px;line-height:1;cursor:pointer;color:var(--olivaOsc);font-weight:700}
.ln .q b{min-width:16px;text-align:center;font-size:14.5px}
.vacio{text-align:center;color:var(--gris);font-size:14px;padding:26px 0}
.tot{display:flex;justify-content:space-between;align-items:center;font-family:Fraunces;font-weight:800;font-size:19px;padding-top:6px}
.dnota{font-size:12.5px;color:var(--gris);line-height:1.5;background:var(--papel);border:1px solid var(--linea);border-radius:13px;padding:12px 14px}
.ups{background:var(--papel);border:1px dashed var(--caramelo);border-radius:14px;padding:13px}
.ups-t{font-size:13px;font-weight:600;margin-bottom:9px}
.ups-row{display:flex;flex-wrap:wrap;gap:8px}
.ups-b{background:var(--crema);border:1px solid var(--linea);border-radius:999px;padding:8px 13px;font-size:12.5px;font-weight:600;cursor:pointer;color:var(--tinta)}
.dpie{font-size:12px;color:var(--gris);text-align:center;line-height:1.45;margin:-6px 2px 2px}
.toast{position:fixed;left:50%;transform:translateX(-50%) translateY(20px);bottom:80px;z-index:99;background:var(--tinta);color:#fff;padding:11px 20px;border-radius:999px;font-size:13.5px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── movimiento ────────────────────────────────────────────────────────────────────────────── */
.rev{opacity:0;transform:translateY(18px);transition:opacity .6s,transform .6s}
.rev.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rev{opacity:1;transform:none;transition:none}.fab.bump{animation:none}}

/* ── el grano del cartón ───────────────────────────────────────────────────────────────────── */
:root{
  --kraft:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='k'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23k)' opacity='0.42'/></svg>");
  /* el canto ondulado del cartón, visto de perfil: la onda del corrugado */
  --onda:repeating-linear-gradient(90deg, rgba(0,0,0,.16) 0 1px, rgba(255,255,255,.14) 1px 3px, rgba(0,0,0,.05) 3px 5px);
}
/* El grano, sobre el fondo de página y sobre el papel de las tarjetas. Va en un pseudo-elemento
   para no pisar el `background` que ya tiene cada bloque. */
.blk.papel::before,.proof::before,.faq::before{
  content:"";position:absolute;inset:0;background-image:var(--kraft);background-size:180px 180px;
  opacity:.055;pointer-events:none;mix-blend-mode:multiply;
}
.blk.papel,.proof,.faq{position:relative}
.blk.papel > .wrap,.proof > .wrap,.faq > .wrap{position:relative;z-index:1}

/* LAS TARJETAS, RECORTADAS. Un canto claro arriba y una sombra corta abajo: es lo que hace que una
   caja blanca se lea como una pieza de cartón apoyada en la pared, y no como un rectángulo. */
.puerta,.esp,.paso,.casa,.cuenta-caja,.zonas li,.pasos-app li{
  background-image:var(--kraft);background-size:180px 180px;background-blend-mode:multiply;
}
.puerta,.esp,.paso,.casa,.cuenta-caja{
  box-shadow:var(--sombra),0 1px 0 rgba(255,255,255,.7) inset,0 -2px 0 rgba(36,31,26,.06) inset;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   EL MUNDO DE CARTÓN
   ═══════════════════════════════════════════════════════════════════════════════════════════
   El barrio 3D (mundo.js) vive en un contenedor [data-mundo]. Lo PRIMERO que se pinta es el
   cielo de la tarde y el póster (poster.svg); el lienzo 3D llega después de `load` y entra con un
   fundido. Si el 3D no arranca —sin WebGL, ahorro de datos, poca memoria— se queda el póster y
   la página funciona igual: nadie ve un hueco. */
:root{
  --cielo:linear-gradient(180deg,#34283d 0%,#6d4552 30%,#b86a55 58%,#e7a26c 80%,#f3c690 100%);
  --kraft-c:#c9a57a; --kraft-o:#a87f55; --canto:#b8976b;
  /* El grosor del cartón: un canto claro, uno oscuro y la sombra. Es lo que hace que una caja de
     color se lea como una pieza cortada y apoyada, no como un rectángulo. */
  --grosor:0 1px 0 rgba(255,255,255,.75) inset,0 3px 0 #dcc6a4,0 5px 0 var(--canto),0 18px 34px rgba(58,34,18,.26);
  --grosor-s:0 1px 0 rgba(255,255,255,.7) inset,0 2px 0 #dcc6a4,0 3px 0 var(--canto),0 10px 20px rgba(58,34,18,.2);
}
.mundo{position:relative;overflow:hidden;background:var(--cielo);isolation:isolate}
.mundo .poster{position:absolute;inset:0;background:url(/poster.svg) 50% 100%/auto 86% no-repeat;transition:opacity .9s ease}
.mundo-lienzo{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;opacity:0;transition:opacity .9s ease}
.mundo-listo .mundo-lienzo{opacity:1}
.mundo-listo .poster{opacity:0}
/* las estrellas de la tarde: puntitos que no pesan nada y que hacen cielo */
.mundo::before{content:"";position:absolute;inset:0 0 45% 0;background-image:radial-gradient(1.5px 1.5px at 12% 18%,rgba(255,240,210,.9),transparent),radial-gradient(1px 1px at 32% 8%,rgba(255,240,210,.7),transparent),radial-gradient(1.5px 1.5px at 58% 14%,rgba(255,240,210,.8),transparent),radial-gradient(1px 1px at 78% 6%,rgba(255,240,210,.7),transparent),radial-gradient(1.2px 1.2px at 90% 22%,rgba(255,240,210,.6),transparent);opacity:.8;pointer-events:none;z-index:0}

/* ── la portada: el recorrido ─────────────────────────────────────────────────────────────── */
/* El lienzo queda FIJO detrás mientras se lee el recorrido; los bloques de después llevan fondo
   propio y lo tapan. mundo.js deja de pintar en cuanto el recorrido sale de pantalla. */
.mundo-fijo{position:fixed;inset:0;z-index:0}
.mundo-fijo .poster{background-position:50% 30%;background-size:auto 64%}
@media(min-width:1000px){.mundo-fijo .poster{background-position:82% 58%;background-size:auto 78%}}
.recorrido{position:relative;z-index:1}
.parada{min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;padding:calc(var(--cab) + 16px) 0 18px}
@media(min-width:768px){.parada{align-items:center;padding-bottom:40px}}
.parada .wrap{display:flex}
.panel{position:relative;max-width:460px;width:100%;background-color:#fbf4e8;background-image:var(--kraft);background-size:180px 180px;background-blend-mode:multiply;border-radius:20px;padding:22px 22px 20px;box-shadow:var(--grosor);transform:rotate(-.4deg);transition:opacity .55s ease,transform .7s cubic-bezier(.2,.9,.25,1.25)}
.parada:nth-child(even) .panel{transform:rotate(.5deg)}
/* Los textos NACEN visibles (el primer pintado no espera a nadie). Solo cuando el 3D ya esta
   andando, las escenas que no son la de ahora se retiran para dejarle el plano a la camara. */
.con-mundo .parada:not(.activa) .panel{opacity:0;transform:translateY(24px) rotate(-.4deg)}
.panel .eyebrow{display:flex;align-items:center;gap:8px}
.panel .eyebrow .num{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;border-radius:50%;background:var(--olivaOsc);color:#fff;font-size:11px;letter-spacing:0}
.panel h2{font-size:27px;font-weight:800;margin-top:8px}
.panel p{color:var(--gris);font-size:15px;margin-top:8px}
.panel .acciones{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
/* En el telefono la tarjeta vive abajo y el barrio arriba: la tarjeta tiene que ser corta, o se
   come la escena que acaba de llegar. */
@media(max-width:767px){
  .panel{padding:16px 16px 15px;border-radius:16px}
  .panel h2{font-size:21px;margin-top:6px}
  .panel p{font-size:13.5px;line-height:1.5;margin-top:6px}
  .panel .acciones{margin-top:12px;gap:8px}
  .panel .btn{padding:11px 16px;font-size:14px}
  .portada h1{font-size:31px}
  .portada .lead{font-size:14px;margin-top:8px}
  .portada .btn-lg{padding:12px 18px;font-size:15px}
  .portada .datos-vivos{margin-top:10px;font-size:12px}
}
@media(max-width:999px){.portada .btn-claro{background:transparent;color:var(--olivaOsc);border:2px solid var(--olivaOsc);box-shadow:0 3px 0 rgba(87,90,67,.25)}}
@media(min-width:768px){.panel{padding:28px 28px 26px}.panel h2{font-size:34px}.panel p{font-size:16px}}
@media(min-width:1000px){.parada .wrap{padding-left:max(20px,4vw)}}
@media(min-width:1600px){.panel{max-width:520px}.panel h2{font-size:40px}}
/* La primera parada es la portada: el título va sobre el cielo, grande, sin tarjeta, en escritorio.
   En el teléfono la tarjeta se queda: sobre el 3D en movimiento, el texto necesita su papel. */
.parada.portada{align-items:flex-end}
.portada .panel{max-width:620px}
.portada h1{font-size:40px;font-weight:800;line-height:1.02;letter-spacing:-.02em}
.portada .lead{font-size:16px;color:var(--gris);margin-top:12px}
.portada .datos-vivos{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:14px;font-size:13px;color:var(--gris)}
.portada .datos-vivos b{color:var(--tinta)}
@media(min-width:1000px){
  .parada.portada{align-items:center}
  .portada .panel{background:none;box-shadow:none;padding:0;transform:none!important;opacity:1}
  .portada h1{font-size:72px;color:#fff6e8;text-shadow:0 3px 0 rgba(58,34,18,.35),0 18px 40px rgba(40,20,10,.45)}
  .portada .lead{color:rgba(255,246,232,.94);font-size:18.5px;max-width:44ch;text-shadow:0 2px 12px rgba(40,20,10,.55)}
  .portada .eyebrow{color:#f3c690}
  .portada .datos-vivos{color:rgba(255,246,232,.9)}.portada .datos-vivos b{color:#fff}
}
@media(min-width:1600px){.portada h1{font-size:88px}}
/* la pista de que hay que bajar */
.baja{display:none}
@media(min-width:1000px){.baja{display:flex;position:absolute;left:50%;bottom:22px;transform:translateX(-50%);flex-direction:column;align-items:center;gap:6px;color:rgba(255,246,232,.85);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.baja i{width:2px;height:34px;background:linear-gradient(#fff6e8,transparent);border-radius:2px;animation:baja 1.8s ease-in-out infinite}}
@keyframes baja{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}100%{transform:scaleY(.2);transform-origin:bottom}}
/* la barra de progreso del recorrido: una cuerda con sus nudos, a la derecha */
.nudos{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:5;display:none;flex-direction:column;gap:10px}
@media(min-width:768px){.con-mundo .nudos{display:flex}}
.nudos a{width:11px;height:11px;border-radius:50%;background:rgba(255,246,232,.35);border:2px solid rgba(255,246,232,.75);transition:transform .3s,background .3s}
.nudos a.on{background:#f3c690;transform:scale(1.35)}
/* Sin 3D, el recorrido no puede depender del scroll para mostrar sus textos */
.sin-mundo .parada{min-height:auto;padding:26px 0}
.sin-mundo .parada:not(:first-child){background:var(--crema)}
.sin-mundo .parada:first-child{min-height:88vh;min-height:88svh}

/* después del recorrido, todo lleva fondo propio: tapa el lienzo fijo */
.tras-recorrido{position:relative;z-index:2;background:var(--crema)}

/* ── la banda de las demás páginas: una estación del barrio ──────────────────────────────── */
.banda{position:relative;height:clamp(330px,52vh,520px);overflow:hidden;background:var(--cielo)}
@media(min-width:768px){.banda{height:clamp(380px,60vh,640px)}}
@media(min-width:1600px){.banda{height:min(66vh,760px)}}
.banda .mundo{position:absolute;inset:0}
.banda .mundo .poster{background-position:50% 100%;background-size:auto 92%}
.banda-txt{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:60px 0 22px;background:linear-gradient(0deg,rgba(40,24,16,.72),rgba(40,24,16,0));color:#fff6e8;pointer-events:none}
.banda-txt a,.banda-txt button{pointer-events:auto}
.banda-txt h1{font-size:34px;font-weight:800;text-shadow:0 3px 18px rgba(20,10,5,.5);max-width:18ch}
.banda-txt p{font-size:15px;max-width:52ch;color:rgba(255,246,232,.92);margin-top:6px;text-shadow:0 2px 10px rgba(20,10,5,.5)}
.banda-txt .eyebrow{color:#f3c690}
@media(min-width:768px){.banda-txt{padding-bottom:34px}.banda-txt h1{font-size:52px}.banda-txt p{font-size:17px}}
@media(min-width:1600px){.banda-txt h1{font-size:64px}}

/* ── los viajes entre páginas: View Transitions entre documentos ─────────────────────────── */
/* Navegar por el sitio es el mismo viaje: la cabecera se queda quieta, el barrio se funde de una
   estación a la siguiente y la página se desliza como una diapositiva hacia el lado al que se va.
   El sentido lo decide capuleto.js según el orden de las páginas (adelante / atrás). */
@view-transition{navigation:auto}
header{view-transition-name:cabecera}
.mundo{view-transition-name:mundo}
::view-transition-group(mundo){animation-duration:.6s}
::view-transition-old(root){animation:.42s cubic-bezier(.4,0,.2,1) both vt-sale}
::view-transition-new(root){animation:.6s cubic-bezier(.2,.8,.2,1) both vt-entra}
html:active-view-transition-type(atras)::view-transition-old(root){animation-name:vt-sale-atras}
html:active-view-transition-type(atras)::view-transition-new(root){animation-name:vt-entra-atras}
@keyframes vt-sale{to{opacity:0;transform:translateX(-7%) scale(.97)}}
@keyframes vt-entra{from{opacity:0;transform:translateX(9%) scale(.97)}}
@keyframes vt-sale-atras{to{opacity:0;transform:translateX(7%) scale(.97)}}
@keyframes vt-entra-atras{from{opacity:0;transform:translateX(-9%) scale(.97)}}
@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .panel{transition:none;opacity:1;transform:none!important}
  .baja i{animation:none}
}


/* ═══════════════════════════════════════════════════════════════════════════════════════════
   LAS PIEZAS DE PAPEL: botones, tarjetas e iconos
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
/* EL BOTÓN SE APLASTA. Un canto debajo que se come al pulsarlo: la versión de interfaz del
   «aplastar y estirar». Se nota con el dedo, que es donde se pide. */
.btn{box-shadow:0 3px 0 rgba(36,31,26,.28),0 10px 22px rgba(58,34,18,.2);transition:transform .12s ease,box-shadow .12s ease}
.btn:active{transform:translateY(3px) scale(.985);box-shadow:0 0 0 rgba(36,31,26,.28),0 4px 10px rgba(58,34,18,.2)}
.btn-pri{background:var(--olivaOsc);box-shadow:0 3px 0 #3d3f2e,0 10px 22px rgba(87,90,67,.32)}
.btn-acc{box-shadow:0 3px 0 #9c6644,0 10px 22px rgba(201,138,99,.3)}
.btn-claro{box-shadow:0 3px 0 rgba(0,0,0,.2)}
.btn-ghost{box-shadow:0 3px 0 rgba(87,90,67,.25)}
.btn .fl{display:inline-block;transition:transform .25s}
@media(hover:hover){.btn:hover .fl{transform:translateX(4px)}}
/* el chip de la app: el botón que lleva a pedir, siempre el mismo en todo el sitio */
.btn-app{background:var(--caramelo);color:var(--tinta);box-shadow:0 3px 0 #9c6644,0 10px 22px rgba(201,138,99,.35)}
.btn-app svg{width:18px;height:18px;flex:none}

/* Las tarjetas son cartón: papel con grano y su canto */
.puerta,.esp,.paso,.casa,.cuenta-caja,.it,.zonas li,.pasos-app li,.ln{box-shadow:var(--grosor-s);border-color:#e3d3b8}
.puerta,.esp,.casa,.cuenta-caja{border-radius:18px}
@media(hover:hover){.esp:hover,.puerta:hover{transform:translateY(-6px) rotate(-.6deg)}}

/* ── los iconos de categoría: recortes de cartón dibujados en SVG ──────────────────────────
   Sustituyen a la placa con el nombre repetido cuando un producto no tiene foto. No son fotos de
   comida y no pretenden serlo: son señalética. La foto de verdad la sube Arturo desde su caja y
   manda sobre esto en cuanto existe (P5 de PIEZAS-CAPULETO.md). */
.esp .ph.noimg{background:#d9bf98;background-image:var(--kraft),linear-gradient(160deg,#e3cba6,#c9a57a);background-size:180px 180px,auto;background-blend-mode:multiply}
.esp .ph.noimg::after{content:"";inset:14% 22%;background:var(--ic,none) center/contain no-repeat;filter:drop-shadow(0 6px 0 rgba(120,86,52,.35)) drop-shadow(0 14px 16px rgba(58,34,18,.28));padding:0}
.esp .ph.noimg[data-ic]::after{animation:respira 5s ease-in-out infinite}
@keyframes respira{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-5px) rotate(2deg)}}
[data-ic=dona]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='52' r='40' fill='%23d9a86c' stroke='%23575a43' stroke-width='3'/%3E%3Cpath d='M16 46c4-18 20-30 34-30s31 11 34 29c-6 6-9 1-14 6-6 5-9-2-15 2-7 5-10-2-17 2-7 4-10-4-22-9z' fill='%23ee93ad' stroke='%23575a43' stroke-width='3' stroke-linejoin='round'/%3E%3Ccircle cx='50' cy='50' r='12' fill='%23c9a57a' stroke='%23575a43' stroke-width='3'/%3E%3Cg stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M30 34l5 3' stroke='%23f4e9d6'/%3E%3Cpath d='M62 30l4-4' stroke='%237a7d62'/%3E%3Cpath d='M72 44l5 1' stroke='%23d83a2a'/%3E%3Cpath d='M42 26l-2 5' stroke='%237a7d62'/%3E%3C/g%3E%3C/svg%3E")}
[data-ic=caja]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M12 40h76v42H12z' fill='%23c9a57a' stroke='%23575a43' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M12 40l10-18h56l10 18z' fill='%23f4e9d6' stroke='%23575a43' stroke-width='3' stroke-linejoin='round'/%3E%3Ccircle cx='34' cy='40' r='11' fill='%23d9a86c' stroke='%23575a43' stroke-width='3'/%3E%3Ccircle cx='60' cy='40' r='11' fill='%235b3622' stroke='%23575a43' stroke-width='3'/%3E%3Cpath d='M12 58h76' stroke='%23575a43' stroke-width='3'/%3E%3Cpath d='M44 58v24M56 58v24' stroke='%23d83a2a' stroke-width='4'/%3E%3C/svg%3E")}
[data-ic=caliente]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M22 42h48l-5 36H27z' fill='%23fbf4e8' stroke='%23575a43' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M70 48c12 0 12 18-2 18' fill='none' stroke='%23575a43' stroke-width='3'/%3E%3Cellipse cx='46' cy='42' rx='24' ry='5' fill='%235b3622' stroke='%23575a43' stroke-width='3'/%3E%3Cpath d='M14 80h66' stroke='%23575a43' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M38 32c-4-6 4-8 0-14M52 32c-4-6 4-8 0-14' fill='none' stroke='%23c98a63' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E")}
[data-ic=frio]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M30 28h40l-6 58H36z' fill='%23e9bc96' stroke='%23575a43' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M32 46h36' stroke='%23fbf4e8' stroke-width='5'/%3E%3Cpath d='M26 28h48' stroke='%23575a43' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M58 28l8-18' stroke='%23d83a2a' stroke-width='4' stroke-linecap='round'/%3E%3Crect x='40' y='54' width='8' height='8' fill='%23fbf4e8' stroke='%23575a43' stroke-width='2'/%3E%3Crect x='52' y='62' width='8' height='8' fill='%23fbf4e8' stroke='%23575a43' stroke-width='2'/%3E%3C/svg%3E")}
[data-ic=empanada]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M10 66c4-26 26-40 40-40s36 14 40 40z' fill='%23d9a86c' stroke='%23575a43' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M16 66c6 6 10-4 16 2s10-4 16 2 10-4 16 2 10-4 16 2' fill='none' stroke='%23575a43' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M34 46l4 3M50 40v4M64 46l-4 3' stroke='%23a87f55' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E")}
[data-ic=triple]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M12 74L50 22l38 52z' fill='%23fbf4e8' stroke='%23575a43' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M22 60h56' stroke='%237d8a55' stroke-width='6'/%3E%3Cpath d='M29 50h42' stroke='%23d83a2a' stroke-width='5'/%3E%3Cpath d='M36 40h28' stroke='%23e9c07a' stroke-width='5'/%3E%3C/svg%3E")}
[data-ic=botella]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M42 12h16v12c10 6 12 14 12 22v38a6 6 0 0 1-6 6H36a6 6 0 0 1-6-6V46c0-8 2-16 12-22z' fill='%23cfe3dc' stroke='%23575a43' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M30 52h40v18H30z' fill='%237a7d62'/%3E%3Crect x='40' y='8' width='20' height='8' rx='2' fill='%23c98a63' stroke='%23575a43' stroke-width='3'/%3E%3C/svg%3E")}
/* El icono también encabeza cada sección de la carta, pequeño, en lugar de la raya */
.catsec h3[data-ic]::before{content:"";width:34px;height:34px;flex:none;background:var(--ic) center/contain no-repeat;filter:drop-shadow(0 3px 0 rgba(120,86,52,.3))}
.catsec h3[data-ic] .em{display:none}

/* ── en la portada, después del recorrido ─────────────────────────────────────────────────── */
.pedir-app{display:grid;gap:22px;align-items:center}
@media(min-width:900px){.pedir-app{grid-template-columns:1.1fr .9fr;gap:48px}}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--papel);border:1px solid #e3d3b8;border-radius:999px;padding:7px 13px;font-size:13px;font-weight:600;box-shadow:0 2px 0 #dcc6a4}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
.chip.no i{background:#b9ad9b}
/* el enlace que lleva a pedir UNA cosa: la tarjeta entera se vuelve un atajo a la app */
.esp .pedir1{font-size:12.5px;font-weight:700;color:var(--olivaOsc);display:inline-flex;align-items:center;gap:4px}
.esp .pedir1::after{content:"→";transition:transform .2s}
@media(hover:hover){.esp:hover .pedir1::after{transform:translateX(4px)}}

/* ── la página de la app ──────────────────────────────────────────────────────────────────── */
.app-grid{display:grid;gap:26px;align-items:center}
@media(min-width:900px){.app-grid{grid-template-columns:1fr 1fr;gap:56px}}
.qr-caja{display:none}
@media(min-width:900px) and (hover:hover){.qr-caja{display:flex;gap:18px;align-items:center;background:var(--papel);border:1px solid #e3d3b8;border-radius:18px;padding:16px;box-shadow:var(--grosor-s);margin-top:22px;max-width:440px}}
.qr-caja .qr{width:124px;height:124px;flex:none;background:#fff;border-radius:10px;padding:8px;display:flex;align-items:center;justify-content:center}
.qr-caja .qr svg,.qr-caja .qr img,.qr-caja .qr canvas{width:100%;height:100%}
.qr-caja b{display:block;font-family:Fraunces;font-size:16px}
.qr-caja span{font-size:13px;color:var(--gris)}
.funciones{display:grid;gap:12px;margin-top:22px}
@media(min-width:720px){.funciones{grid-template-columns:1fr 1fr}}
.funcion{display:flex;gap:12px;align-items:flex-start;background:var(--papel);border:1px solid #e3d3b8;border-radius:16px;padding:15px;box-shadow:var(--grosor-s)}
.funcion .fi{width:38px;height:38px;border-radius:11px;background:var(--crema);display:flex;align-items:center;justify-content:center;flex:none}
.funcion .fi svg{width:22px;height:22px;stroke:var(--olivaOsc);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.funcion b{display:block;font-family:Fraunces;font-size:16px}
.funcion span{font-size:13.5px;color:var(--gris)}
.funcion.no{opacity:.72}
.funcion.no b::after{content:" · todavía no";font-family:Manrope,system-ui,sans-serif;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--caramelo);text-transform:uppercase}

/* ── el pie y la cabecera, al cartón ─────────────────────────────────────────────────────── */
header{background:rgba(246,241,231,.9)}
.brand b{letter-spacing:-.01em}
footer{position:relative;z-index:2}
.tras-recorrido .blk:first-child{padding-top:64px}
@media(prefers-reduced-motion:reduce){.esp .ph.noimg[data-ic]::after{animation:none}}

/* ── la entrada de las páginas interiores, debajo de la banda del barrio ─────────────────── */
.intro{position:relative;background:var(--crema);padding:22px 0 8px}
.intro .lead{font-size:16px;color:var(--gris);max-width:62ch}
.intro-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.intro-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px;font-size:13px;color:var(--gris)}
.intro-meta b{color:var(--tinta)}
@media(min-width:768px){.intro{padding:34px 0 10px}.intro .lead{font-size:17.5px}}