/* =========================================================
   Cocina de Prestigio · ESTILOS
   Reglas en WEB/DESIGN.md. Un solo botón naranja lleno por pantalla,
   cuatro formas (píldora, plato, tarjeta, recta), sin sombras.
   Después de cada cambio sube VERSION en _fuente/construir.py.
   ========================================================= */

/* §1 Tokens */
:root{
  --carbon:#1C1C1C;--naranja:#F2902A;--naranja-hover:#E07F1C;--cobre:#A85A12;
  --humo:#F3F1EE;--arena:#D9D3CB;--blanco:#FFFFFF;--acero:#6A6A6A;--texto:#333;
  --f-titulo:"DM Serif Display",Georgia,serif;--f-texto:"Barlow",Arial,sans-serif;--f-boton:"Barlow Condensed","Arial Narrow",sans-serif;
  --t-display:clamp(40px,4.8vw,66px);--t-h1:clamp(36px,5vw,58px);--t-h2:clamp(30px,3.8vw,46px);
  --t-h3:clamp(22px,2vw,26px);--t-lead:clamp(18px,1.6vw,21px);--t-body:clamp(17px,1.2vw,18px);
  --t-small:15px;--t-eyebrow:13px;
  --sec:clamp(72px,10vw,136px);--max:1200px;--col:640px;
  --r-pildora:999px;--r-tarjeta:20px;
  --linea:1px solid var(--carbon);--linea-suave:1px solid var(--arena);
  --ease-out:cubic-bezier(0.23,1,0.32,1);--ease-inout:cubic-bezier(0.77,0,0.175,1);
  --d-press:120ms;--d-ui:200ms;--d-in:500ms;
}

/* §2 Base */
*{box-sizing:border-box}
html{font-synthesis:none;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--humo);color:var(--carbon);font-family:var(--f-texto);font-size:var(--t-body);line-height:1.6;-webkit-tap-highlight-color:transparent;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
p{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.wrap>*,.dos>*{min-width:0}
h1,h2,h3{font-family:var(--f-titulo);font-weight:400;letter-spacing:-0.02em;margin:0}
h1 em,h2 em,h3 em{font-style:normal;color:var(--cobre)}
.ceja{font-family:var(--f-boton);font-weight:600;font-size:var(--t-eyebrow);letter-spacing:.14em;text-transform:uppercase;color:var(--cobre);margin-bottom:14px}
.nota{font-size:var(--t-small);color:var(--acero);margin-top:16px}
.nota a{color:var(--carbon)}
.pendiente{background:#fff3cc;border-radius:4px;padding:0 4px;font-size:.9em;color:#5a4a00;font-family:var(--f-texto);letter-spacing:0;text-transform:none}
.saltar{position:absolute;left:16px;top:-60px;z-index:50;background:var(--carbon);color:var(--blanco);padding:10px 16px;border-radius:var(--r-pildora)}
.saltar:focus{top:12px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--carbon);outline-offset:3px}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* §3 Botones y enlaces */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:var(--r-pildora);font-family:var(--f-boton);font-weight:600;font-size:17px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border:1.5px solid var(--carbon);cursor:pointer;background:transparent;color:var(--carbon);transition:background-color var(--d-ui) var(--ease-out),color var(--d-ui) var(--ease-out),border-color var(--d-ui) var(--ease-out),transform var(--d-press) var(--ease-out);user-select:none;-webkit-user-select:none}
.btn:active{transform:scale(.97)}
.btn-1{background:var(--naranja);border-color:var(--naranja);color:var(--carbon)}
@media (hover:hover){.btn-1:hover{background:var(--naranja-hover);border-color:var(--naranja-hover)}.btn-2:hover{background:var(--carbon);color:var(--blanco)}}
.btn svg{width:20px;height:20px;flex:none}
.btn--claro{color:var(--blanco);border-color:var(--blanco)}
@media (hover:hover){.btn--claro:hover{background:var(--blanco);color:var(--carbon)}}
.mas{display:inline-block;margin-top:24px;font-weight:600;color:var(--cobre);text-decoration:underline;text-underline-offset:4px}
@media (hover:hover){.mas:hover{color:var(--carbon)}}
.enlace-boton{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;min-height:44px;border:var(--linea);border-radius:var(--r-pildora);padding:0 18px;text-decoration:none;font:inherit;font-size:16px;background:transparent;color:var(--carbon);cursor:pointer;transition:background-color var(--d-ui) var(--ease-out),color var(--d-ui) var(--ease-out)}
.chip[aria-pressed="true"]{background:var(--carbon);color:var(--blanco)}
@media (hover:hover){.chip:hover{background:var(--carbon);color:var(--blanco)}}
.chip-oferta{display:inline-block;background:var(--naranja);color:var(--carbon);border-radius:var(--r-pildora);padding:6px 16px;font-family:var(--f-boton);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:15px;margin-bottom:18px}

/* §4 Logo y firma (tres puntos) */
.logo{font-family:var(--f-titulo);font-size:26px;line-height:1;text-decoration:none;white-space:nowrap;letter-spacing:-0.01em;color:inherit}
.logo i{font-style:normal;position:relative}
.logo i::after{content:"";position:absolute;left:50%;top:.17em;width:.17em;height:.17em;margin-left:-.085em;border-radius:50%;background:var(--naranja)}
.puntos{display:flex;gap:8px;margin:22px 0 0}
.puntos span{width:10px;height:10px;border-radius:50%;background:var(--naranja)}
.js .puntos span{transform:scale(.4);opacity:0;transition:transform var(--d-in) var(--ease-out),opacity var(--d-in) var(--ease-out)}
.js .puntos.on span{transform:none;opacity:1}
.puntos.on span:nth-child(2){transition-delay:80ms}.puntos.on span:nth-child(3){transition-delay:160ms}

/* §5 Barra de anuncio y navegación */
.anuncio{background:var(--carbon);color:var(--blanco);font-size:var(--t-small);text-align:center;padding:9px 16px}
.anuncio b{font-family:var(--f-boton);letter-spacing:.06em;text-transform:uppercase;color:var(--naranja);font-weight:600;margin-right:6px}
.anuncio a{color:var(--blanco);margin-left:6px}
.nav{position:sticky;top:0;z-index:20;background:var(--blanco);border-bottom:var(--linea-suave)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:24px}
.nav__menu{display:flex;gap:22px;list-style:none;margin:0;padding:0}
.nav__menu a{text-decoration:none;font-weight:600;font-size:16px}
.nav__menu a[aria-current="page"]{color:var(--cobre)}
@media (hover:hover){.nav__menu a:hover{color:var(--cobre)}}
.nav__solo-movil{display:none}
.nav__cta{min-height:44px;padding:0 20px;font-size:16px}
.nav.lleno .nav__cta{background:var(--naranja);border-color:var(--naranja);color:var(--carbon)}
.nav__abrir{display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:7px}
.nav__abrir span{display:block;width:24px;height:2px;background:var(--carbon);transition:transform var(--d-ui) var(--ease-out)}
.nav__abrir[aria-expanded="true"] span:first-child{transform:translateY(4.5px) rotate(45deg)}
.nav__abrir[aria-expanded="true"] span:last-child{transform:translateY(-4.5px) rotate(-45deg)}
@media (max-width:980px){
  .nav .wrap{height:64px}.logo{font-size:22px}
  .nav__abrir{display:flex}
  .nav nav{position:absolute;left:0;right:0;top:100%;background:var(--blanco);border-bottom:var(--linea-suave);display:none}
  .nav.abierto nav{display:block}
  .nav__menu{flex-direction:column;gap:0;padding:8px clamp(16px,4vw,40px) 20px}
  .nav__menu a{display:flex;align-items:center;min-height:52px;border-bottom:var(--linea-suave);font-size:18px}
  .nav__solo-movil{display:block}
}
@media (max-width:760px){.nav .nav__cta{display:none}}
.nav--lp .nav__cta{display:inline-flex}

/* §6 Hero */
.hero{padding:clamp(40px,7vw,88px) 0 clamp(56px,8vw,96px)}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.hero h1{font-size:var(--t-display);line-height:1.03}
.hero .lead{font-size:var(--t-lead);line-height:1.55;margin-top:22px;max-width:42ch;color:var(--texto)}
.acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero figure{margin:0;position:relative}
.hero figure img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:38% 50%;border-radius:var(--r-tarjeta)}
.hero figcaption{position:absolute;left:16px;bottom:16px;right:16px;width:max-content;max-width:calc(100% - 32px);background:var(--blanco);border-radius:var(--r-pildora);padding:8px 16px;font-size:14px;font-weight:600}
.hero--interior,.hero--lp{padding-top:clamp(24px,4vw,56px)}
.hero--interior figure img,.hero--lp figure img{aspect-ratio:1/1}
.hero figure.plato img{border-radius:50%;background:var(--blanco)}
.hero .nota{max-width:52ch}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr}.hero figure{order:-1}.hero figure img,.hero--interior figure img,.hero--lp figure img{aspect-ratio:4/3}.hero figure.plato{max-width:320px;margin:0 auto}.hero figure.plato img{aspect-ratio:1/1}}
.migas{font-size:14px;color:var(--acero);padding-top:20px;padding-bottom:4px}
.migas a{color:var(--acero)}

/* §7 Verificador de zip */
.zip{background:var(--blanco);border:var(--linea);border-radius:var(--r-tarjeta);padding:22px;margin-top:34px;max-width:520px}
.zip label{display:block;font-family:var(--f-titulo);font-size:22px;margin-bottom:12px}
.zip__fila{display:flex;gap:10px}
.zip input{flex:1;min-width:0;height:52px;border:var(--linea-suave);border-radius:var(--r-pildora);padding:0 20px;font:inherit;font-size:18px;letter-spacing:.08em;background:var(--humo);color:var(--carbon);transition:border-color var(--d-ui) var(--ease-out)}
.zip input:focus{outline:none;border-color:var(--carbon)}
.zip__resp{font-size:16px;margin-top:12px;min-height:26px}
.zip__resp b{color:var(--cobre)}
.zip__resp a{font-weight:600}

/* §8 Tira de confianza */
.confianza{border-top:var(--linea-suave);border-bottom:var(--linea-suave);background:var(--blanco)}
.confianza ul{list-style:none;margin:0 auto;padding:22px clamp(16px,4vw,40px);max-width:var(--max);display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.confianza li{font-size:16px;line-height:1.4;display:flex;gap:12px;align-items:flex-start}
.confianza li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--naranja);margin-top:8px}
.confianza b{display:block;font-weight:600}
@media (max-width:860px){.confianza ul{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.confianza ul{grid-template-columns:1fr}}

/* §9 Secciones */
.sec{padding:var(--sec) 0}
.sec--arriba{padding-top:clamp(32px,5vw,64px)}
.sec--corta{padding:48px 0}
.sec.blanco{background:var(--blanco)}
.cab{max-width:var(--col);margin-bottom:clamp(40px,5vw,64px)}
.cab h1{font-size:var(--t-h1);line-height:1.06}
.cab h2{font-size:var(--t-h2);line-height:1.1}
.cab p{font-size:var(--t-lead);margin-top:16px;color:var(--texto)}
.cab .ceja{font-size:var(--t-eyebrow);margin-top:0;color:var(--cobre)}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.dos .cab{margin-bottom:0}
.dos img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-tarjeta)}
.dos h2{font-size:var(--t-h2);line-height:1.1}
@media (max-width:860px){.dos{grid-template-columns:1fr}}

/* Pasos */
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,48px);position:relative;list-style:none;margin:0;padding:0;counter-reset:p}
.pasos::before{content:"";position:absolute;left:14px;right:14px;top:14px;border-top:var(--linea-suave)}
.pasos li{position:relative;counter-increment:p}
.pasos li::before{content:counter(p);display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--naranja);font-family:var(--f-boton);font-weight:600;font-size:15px;margin-bottom:22px;position:relative}
.pasos h3{font-size:var(--t-h3);line-height:1.2;margin-bottom:10px}
.pasos p{color:var(--texto)}
.pasos__dato{font-family:var(--f-boton);font-weight:600;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--acero)!important;margin-top:14px}
.pasos--lista{grid-template-columns:1fr;margin-top:32px}
.pasos--lista::before{left:14px;right:auto;top:14px;bottom:14px;border-top:0;border-left:var(--linea-suave)}
.pasos--lista li{padding-left:52px}
.pasos--lista li::before{position:absolute;left:0;top:0}
@media (max-width:760px){.pasos{grid-template-columns:1fr}.pasos::before{left:14px;right:auto;top:14px;bottom:14px;border-top:0;border-left:var(--linea-suave)}.pasos li{padding-left:52px}.pasos li::before{position:absolute;left:0;top:0}}

/* Lista en filas */
.lista-filas{list-style:none;margin:28px 0 0;padding:0;border-top:var(--linea)}
.lista-filas li{padding:18px 0;border-bottom:var(--linea-suave);display:grid;grid-template-columns:150px 1fr;gap:16px}
.lista-filas b{font-family:var(--f-boton);font-weight:600;font-size:15px;letter-spacing:.1em;text-transform:uppercase;padding-top:3px}
@media (max-width:560px){.lista-filas li{grid-template-columns:1fr;gap:4px}}
.lista{padding-left:0;list-style:none;margin:16px 0}
.lista li{position:relative;padding-left:22px;margin:10px 0}
.lista li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--naranja)}

/* Productos (fotos en plato) */
.productos{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,36px)}
.productos--todos{grid-template-columns:repeat(3,1fr)}
.prod{text-decoration:none;display:block}
.prod img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:50%;background:var(--blanco);transition:transform var(--d-in) var(--ease-out)}
@media (hover:hover){.prod:hover img{transform:scale(1.03)}.prod:hover .mas{color:var(--carbon)}}
.prod h3{font-size:24px;margin:22px 0 6px}
.prod p{font-size:16px;color:var(--texto)}
.prod .mas{margin-top:10px;font-size:16px}
@media (max-width:900px){.productos,.productos--todos{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.productos,.productos--todos{gap:16px}.prod h3{font-size:20px}}

/* Promo en carbón */
.promo{background:var(--carbon);color:var(--blanco)}
.promo h2 em{color:var(--naranja)}
.promo .ceja{color:var(--naranja)}
.promo p{color:#d8d4ce;margin-top:16px;max-width:46ch}
.promo .btn{margin-top:26px}
.promo img{aspect-ratio:4/3}

/* Promociones (página) */
.promos{list-style:none;margin:0;padding:0;display:grid;gap:24px}
.promo-tarjeta{display:grid;grid-template-columns:320px 1fr;gap:28px;align-items:center;background:var(--blanco);border:var(--linea-suave);border-radius:var(--r-tarjeta);padding:20px}
.promo-tarjeta img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px}
.promo-tarjeta h2{font-size:var(--t-h3);line-height:1.2;margin-bottom:8px}
.promo-tarjeta .mas{margin-top:12px}
@media (max-width:760px){.promo-tarjeta{grid-template-columns:1fr}}

/* Zonas */
.zonas{display:flex;flex-wrap:wrap;gap:10px}
.zonas a{border:var(--linea);border-radius:var(--r-pildora);padding:10px 18px;text-decoration:none;font-size:16px;min-height:44px;display:inline-flex;align-items:center;transition:background-color var(--d-ui) var(--ease-out),color var(--d-ui) var(--ease-out)}
.zonas a small{color:var(--acero);margin-left:8px;font-size:14px}
@media (hover:hover){.zonas a:hover{background:var(--carbon);color:var(--blanco)}.zonas a:hover small{color:#bbb}}
.barrios{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.barrio-tarjeta a{display:block;height:100%;text-decoration:none;border:var(--linea-suave);border-radius:var(--r-tarjeta);padding:24px;background:var(--blanco);transition:border-color var(--d-ui) var(--ease-out)}
.sec.blanco .barrio-tarjeta a{background:var(--humo)}
@media (hover:hover){.barrio-tarjeta a:hover{border-color:var(--carbon)}}
.barrio-tarjeta h2,.barrio-tarjeta h3{font-size:24px;margin-bottom:8px}
.barrio-tarjeta p{font-size:16px;color:var(--texto)}
.barrio-tarjeta .ceja{margin:14px 0 0;color:var(--acero)}

/* Preguntas */
.faq{max-width:820px;border-top:var(--linea)}
.faq details{border-bottom:var(--linea-suave)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:22px 0;font-family:var(--f-titulo);font-size:var(--t-h3);line-height:1.25}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--f-texto);font-size:28px;line-height:1;transition:transform var(--d-ui) var(--ease-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq__respuesta p{padding:0 0 24px;max-width:var(--col);color:var(--texto)}

/* Reseñas */
.resenas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.resena{background:var(--blanco);border:var(--linea-suave);border-radius:var(--r-tarjeta);padding:24px}
.resena blockquote{margin:0;font-family:var(--f-titulo);font-size:21px;line-height:1.35}
.resena__quien{margin-top:16px;font-size:15px;color:var(--acero)}

/* §10 Formulario de demostración */
.agenda .wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(32px,5vw,72px);align-items:start}
.agenda .cab{margin-bottom:0}
.agenda .cab h2,.agenda .cab h1{font-size:var(--t-h1);line-height:1.06}
.agenda__lista{list-style:none;padding:0;margin:24px 0 0;border-top:var(--linea-suave)}
.agenda__lista li{padding:12px 0;border-bottom:var(--linea-suave)}
.agenda__wa{font-size:16px!important}
.agenda__wa a{font-weight:600}
@media (max-width:860px){.agenda .wrap{grid-template-columns:1fr}}
.form{background:var(--blanco);border:var(--linea);border-radius:var(--r-tarjeta);padding:clamp(22px,3vw,36px);position:relative}
.avance{display:flex;align-items:center;gap:10px;margin-bottom:24px;font-family:var(--f-boton);font-weight:600;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--acero)}
.avance span{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--naranja);transition:background-color var(--d-ui) var(--ease-out)}
.avance span.on{background:var(--naranja)}
.avance em{font-style:normal;margin-left:6px}
.paso{border:0;padding:0;margin:0;min-width:0}
.js .paso{display:none}.js .paso.activo{display:block;animation:entra var(--d-in) var(--ease-out)}
@keyframes entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.paso legend{font-family:var(--f-titulo);font-size:26px;margin-bottom:18px;padding:0}
.campo{margin-bottom:16px}
.campo label,.campo__titulo{display:block;font-weight:600;font-size:16px;margin-bottom:6px}
.campo input,.campo select,.campo textarea{width:100%;min-height:52px;border:var(--linea-suave);border-radius:12px;padding:0 16px;font:inherit;font-size:17px;background:var(--blanco);color:var(--carbon)}
.campo textarea{padding:12px 16px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--carbon)}
.zip-aviso{font-size:15px;margin:-6px 0 14px;min-height:0}
.zip-aviso b{color:var(--cobre)}
.opciones{display:flex;flex-wrap:wrap;gap:8px}
.opciones label{margin:0;position:relative}
.opciones input{position:absolute;opacity:0;width:1px;height:1px}
.opciones span{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:var(--linea-suave);border-radius:var(--r-pildora);cursor:pointer;font-weight:400;transition:border-color var(--d-ui) var(--ease-out),background-color var(--d-ui) var(--ease-out)}
.opciones input:checked+span{border-color:var(--carbon);background:var(--humo);font-weight:600}
.opciones input:focus-visible+span{outline:2px solid var(--carbon);outline-offset:2px}
.permiso{display:flex;gap:12px;font-size:14px;line-height:1.45;color:#444;margin:6px 0 20px}
.permiso input{width:22px;height:22px;flex:none;margin-top:1px;accent-color:var(--carbon)}
.form__btns{display:flex;gap:10px;justify-content:space-between;flex-wrap:wrap}
.form__error{color:#8a1c00;font-size:15px;min-height:22px;margin-top:10px}
.volver{background:none;border:0;font:inherit;font-weight:600;text-decoration:underline;cursor:pointer;padding:0 4px;min-height:44px}
.form__listo h3{font-size:28px;margin-bottom:12px}
.form--simple .btn{margin-top:4px}

/* §11 Blog */
.guias{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,32px)}
.guia a{display:block;text-decoration:none}
.guia img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-tarjeta);background:var(--arena)}
.guia .ceja{margin:18px 0 8px}
.guia h3{font-size:24px;line-height:1.2;margin-bottom:8px}
.guia p:last-child{font-size:16px;color:var(--texto)}
@media (hover:hover){.guia a:hover h3{color:var(--cobre)}}
@media (max-width:900px){.guias{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.guias{grid-template-columns:1fr}}
.blog__filtros{display:grid;gap:16px;margin-bottom:40px}
.buscar input{width:100%;max-width:520px;min-height:52px;border:var(--linea-suave);border-radius:var(--r-pildora);padding:0 20px;font:inherit;background:var(--blanco)}
.buscar input:focus{outline:none;border-color:var(--carbon)}

.articulo__cab{max-width:860px;padding-top:clamp(24px,4vw,48px)}
.articulo__cab h1{font-size:var(--t-h1);line-height:1.06}
.articulo__resumen{font-size:var(--t-lead);margin-top:20px;color:var(--texto);max-width:var(--col)}
.articulo__autor{font-size:15px;color:var(--acero);margin-top:18px}
.articulo__foto{margin-top:32px;margin-bottom:0}
.articulo__foto img{width:100%;aspect-ratio:2/1;object-fit:cover;border-radius:var(--r-tarjeta);background:var(--arena)}
.articulo__grid{display:grid;grid-template-columns:260px minmax(0,var(--col));gap:clamp(32px,6vw,96px);padding-top:48px;padding-bottom:var(--sec)}
.articulo__lado{position:sticky;top:96px;align-self:start;display:grid;gap:28px}
.indice ol{margin:0;padding-left:18px;font-size:15px}
.indice li{margin:8px 0}
.indice a{text-decoration:none}
@media (hover:hover){.indice a:hover{color:var(--cobre)}}
.articulo__cta{border:var(--linea);border-radius:var(--r-tarjeta);padding:20px;background:var(--blanco)}
.articulo__cta p{font-family:var(--f-titulo);font-size:21px;margin-bottom:14px}
.articulo__cta .btn{width:100%;padding:0 12px}
@media (max-width:900px){.articulo__grid{grid-template-columns:1fr}.articulo__lado{position:static;order:2}}
.prosa h2{font-size:clamp(26px,3vw,34px);line-height:1.15;margin:48px 0 14px}
.prosa h3{font-size:22px;margin:32px 0 10px}
.prosa p{margin:0 0 18px}
.prosa ol{padding-left:22px}
.prosa ol li{margin:8px 0}
.prosa a{color:var(--cobre);text-underline-offset:3px}
.prosa .consulta{background:var(--blanco);border-left:4px solid var(--naranja);border-radius:0 var(--r-tarjeta) var(--r-tarjeta) 0;padding:20px 24px;margin:32px 0}
.prosa .consulta__titulo{font-family:var(--f-boton);font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:14px;color:var(--cobre);margin-bottom:8px}
.prosa .consulta p:last-child{margin:0}
.fuentes{margin-top:48px;border-top:var(--linea);padding-top:8px}
.fuentes ul{padding-left:18px;font-size:15px}
.fuentes li{margin:8px 0;overflow-wrap:anywhere}
.legal{max-width:780px}
.legal h1{font-size:var(--t-h1);line-height:1.06;margin-bottom:16px}
.legal h2{font-size:26px}
.copiar{background:var(--blanco);border:var(--linea-suave);border-radius:12px;padding:16px 18px;overflow-wrap:anywhere}
.legal code{font-size:15px;overflow-wrap:anywhere}

/* §12 Pie */
.pie{background:var(--carbon);color:#d8d4ce;padding:72px 0 calc(40px + env(safe-area-inset-bottom))}
.pie .logo{color:var(--blanco);font-size:30px}
.pie__lema{margin:14px 0 12px;font-size:16px}
.pie p{font-size:16px}
.pie__cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;margin-bottom:48px}
.pie h2{font-family:var(--f-boton);font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:14px;color:var(--blanco);margin:0 0 14px}
.pie ul{list-style:none;margin:0;padding:0}
.pie li{margin:8px 0;font-size:16px}
.pie a{text-decoration:none}
@media (hover:hover){.pie a:hover{color:var(--naranja)}}
.pie__legal{border-top:1px solid #3a3a3a;padding-top:24px;display:grid;gap:10px}
.pie__legal p{font-size:14px;line-height:1.6;color:#a9a49d}
.pie__legal a{text-decoration:underline}
.pie--lp{padding-top:40px}
.pie--lp .pie__legal{border-top:0;padding-top:0}
@media (max-width:860px){.pie__cols{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.pie__cols{grid-template-columns:1fr}}

/* §13 Barra fija del celular y aviso de cookies */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:30;display:none;gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--blanco);border-top:var(--linea-suave);box-shadow:0 -6px 24px rgba(28,28,28,.08);transform:translateY(110%);transition:transform var(--d-in) var(--ease-out)}
.barra .btn{flex:1;padding:0 12px}
.barra .barra__wa{flex:0 0 auto;width:52px;padding:0}
.barra.ver{transform:none}
@media (max-width:760px){.barra{display:flex}}
.cookies{position:fixed;left:16px;right:16px;bottom:16px;z-index:40;max-width:560px;margin:0 auto;background:var(--carbon);color:var(--blanco);border-radius:var(--r-tarjeta);padding:20px;font-size:15px}
.cookies a{color:var(--blanco)}
.cookies__btns{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.cookies .btn{color:var(--blanco);border-color:var(--blanco);min-height:44px;flex:1;padding:0 14px;white-space:nowrap}
@media (max-width:760px){.cookies{bottom:calc(84px + env(safe-area-inset-bottom))}}
@media (hover:hover){.cookies .btn:hover{background:var(--blanco);color:var(--carbon)}}

/* §14 Entradas (una sola vez) */
.js .revelar{opacity:0;transform:translateY(16px);transition:opacity var(--d-in) var(--ease-out),transform var(--d-in) var(--ease-out)}
.js .revelar.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .revelar{opacity:1;transform:none}.js .puntos span{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* §15 Slider de la portada (01/06) */
.slider{padding:clamp(24px,4vw,56px) 0 clamp(32px,5vw,56px)}
.slider__pista{display:grid}
.diapo{grid-area:1/1;display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,5vw,72px);align-items:center;opacity:0;visibility:hidden;transition:opacity var(--d-in) var(--ease-out),visibility 0s linear var(--d-in)}
.diapo.activa{opacity:1;visibility:visible;transition:opacity var(--d-in) var(--ease-out),visibility 0s}
.diapo__texto{min-width:0}
.diapo__titulo{font-size:var(--t-display);line-height:1.03}
.diapo .lead{font-size:var(--t-lead);line-height:1.55;margin-top:22px;max-width:42ch;color:var(--texto)}
.diapo__ver{margin-top:20px}
.diapo__foto{margin:0;min-width:0}
.diapo__foto img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-tarjeta)}
.js .diapo.activa .diapo__foto img{animation:acerca 6.5s linear both}
@keyframes acerca{from{transform:scale(1.04)}to{transform:scale(1)}}
.slider__abajo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin-top:28px}
.slider__abajo .acciones{margin-top:0}
.slider__control{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.slider__cuenta{font-family:var(--f-boton);font-weight:600;letter-spacing:.08em;font-size:15px;color:var(--acero);text-transform:uppercase;min-width:170px}
.slider__cuenta b{color:var(--carbon);font-size:18px}
.slider__cuenta span{margin-left:8px}
.slider__barras{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.slider__barras button{width:36px;height:44px;border:0;background:none;padding:0;cursor:pointer}
.slider__barras span{display:block;height:3px;background:var(--arena);border-radius:2px;overflow:hidden}
.slider__barras i{display:block;height:100%;background:var(--naranja);transform:scaleX(0);transform-origin:left}
.slider__barras [aria-current="true"] i{transform:scaleX(1)}
.slider.corriendo .slider__barras [aria-current="true"] i{animation:barra 6s linear both}
@keyframes barra{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.slider__flechas{display:flex;gap:8px}
.slider__flechas button{width:44px;height:44px;border-radius:50%;border:var(--linea);background:transparent;cursor:pointer;font-size:16px;color:var(--carbon);transition:background-color var(--d-ui) var(--ease-out),color var(--d-ui) var(--ease-out)}
@media (hover:hover){.slider__flechas button:hover{background:var(--carbon);color:var(--blanco)}}
.slider__flechas button:active{transform:scale(.95)}
@media (max-width:860px){
  .diapo{grid-template-columns:1fr;gap:20px;align-content:start}
  .diapo__foto{order:-1}
  .diapo__foto img{aspect-ratio:4/3;max-height:40vh}
  .diapo__titulo{font-size:clamp(32px,9vw,44px)}
  .diapo .lead{margin-top:14px}
  .slider__abajo{flex-direction:column;align-items:stretch}
  .slider__abajo .acciones .btn{flex:1}
  .slider__control{justify-content:space-between}
  .slider__cuenta{min-width:0}
  .slider__barras button{width:28px}
}
@media (max-width:420px){.slider__barras{display:none}}

/* §16 Cinta de productos */
.cinta{border-top:var(--linea-suave);border-bottom:var(--linea-suave);background:var(--blanco);overflow:hidden}
.cinta__pista{display:flex;gap:28px;width:max-content;padding:14px 0;animation:cinta 60s linear infinite}
.cinta:hover .cinta__pista,.cinta:focus-within .cinta__pista{animation-play-state:paused}
@keyframes cinta{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.cinta__item{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:600;font-size:15px;white-space:nowrap}
.cinta__item img{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--humo)}
@media (prefers-reduced-motion:reduce){.cinta__pista{animation:none;flex-wrap:wrap;width:auto;padding:14px 16px}.cinta__item[aria-hidden]{display:none}}

/* §17 Catálogo por categorías y producto */
.zip--ancho{max-width:none;margin-top:0;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px 24px}
.zip--ancho label{margin:0}
.zip--ancho .zip__resp{grid-column:1/-1;margin-top:0}
@media (max-width:760px){.zip--ancho{grid-template-columns:1fr}}
.categorias{margin:-24px 0 48px}
.categoria{margin-bottom:clamp(56px,7vw,88px);scroll-margin-top:96px}
.categoria__titulo{font-size:var(--t-h3);padding-bottom:14px;margin-bottom:28px;border-bottom:var(--linea)}
.categoria__titulo small{font-family:var(--f-boton);font-size:14px;color:var(--acero);letter-spacing:.08em;margin-left:8px}
.productos--todos{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.productos--todos{grid-template-columns:1fr 1fr}}
.plato-foto{width:100%;max-width:460px;margin:0 auto;aspect-ratio:1/1;object-fit:cover;border-radius:50%;background:var(--humo)}
.hero--interior figure img{aspect-ratio:4/3}

/* §18 Aviso de imagen creada con IA (Manual de Comunicación Digital de Hy Cite, 1.7.1) */
figure,.guia a,.prod,.promo-tarjeta,.dos>div,.cambia .wrap{position:relative}
.ia-nota{position:absolute;left:10px;top:10px;z-index:2;background:rgba(28,28,28,.72);color:#fff;font-family:var(--f-texto);font-size:11px;line-height:1;letter-spacing:.02em;padding:5px 8px;border-radius:var(--r-pildora);pointer-events:none}
.prod .ia-nota{left:50%;transform:translateX(-50%);top:12px}
.articulo__foto{position:relative}
.cinta .ia-nota{display:none}

/* §19 Movimiento: paso entre páginas, entradas en cascada y efectos al pasar el mouse.
   Todo es transform, opacity o clip-path, y con prefers-reduced-motion se apaga. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:220ms var(--ease-out) both sale}
::view-transition-new(root){animation:420ms var(--ease-out) both entra}
@keyframes sale{to{opacity:0}}

/* Cabecera: se esconde al bajar y vuelve al subir */
.nav{transition:transform 360ms var(--ease-out)}
.nav.oculta{transform:translateY(-100%)}
.nav__menu a{position:relative}
.nav__menu a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--cobre);transform:scaleX(0);transform-origin:right;transition:transform 320ms var(--ease-out)}
.nav__menu a[aria-current="page"]::after{transform:scaleX(1)}
@media (hover:hover){.nav__menu a:hover::after{transform:scaleX(1);transform-origin:left}}
@media (max-width:980px){
  .nav__menu a::after{display:none}
  .nav.abierto nav{animation:entra 320ms var(--ease-out) both}
  .nav.abierto .nav__menu li{animation:entra 420ms var(--ease-out) both;animation-delay:calc(var(--i,0) * 45ms)}
}

/* Carga: el texto del hero y de cada diapositiva sube en cascada; la foto se abre como cortina */
.js .hero .wrap>div>*,.js .diapo.activa .diapo__texto>*{animation:sube 700ms var(--ease-out) both}
.js .hero .wrap>div>:nth-child(2),.js .diapo.activa .diapo__texto>:nth-child(2){animation-delay:70ms}
.js .hero .wrap>div>:nth-child(3),.js .diapo.activa .diapo__texto>:nth-child(3){animation-delay:140ms}
.js .hero .wrap>div>:nth-child(4),.js .diapo.activa .diapo__texto>:nth-child(4){animation-delay:210ms}
.js .hero .wrap>div>:nth-child(n+5),.js .diapo.activa .diapo__texto>:nth-child(n+5){animation-delay:280ms}
@keyframes sube{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.js .hero figure,.js .diapo.activa .diapo__foto{animation:cortina 1100ms var(--ease-out) both}
@keyframes cortina{from{clip-path:inset(8% 8% 8% 8% round var(--r-tarjeta));opacity:.4}to{clip-path:inset(0 0 0 0 round var(--r-tarjeta));opacity:1}}
.js .hero figure.plato{animation:plato 1000ms var(--ease-out) both}
@keyframes plato{from{opacity:0;transform:scale(.88) rotate(-8deg)}to{opacity:1;transform:none}}

/* Entradas en cascada: script.js reparte --i entre los hijos de cada grilla */
.js .revelar{transition-delay:calc(var(--i,0) * 80ms)}
.js img.revelar{opacity:1;transform:scale(1.06);clip-path:inset(10% 10% 10% 10% round var(--r-tarjeta));transition:transform 1100ms var(--ease-out),clip-path 1100ms var(--ease-out)}
.js img.revelar.on{transform:none;clip-path:inset(0 0 0 0 round var(--r-tarjeta))}

/* Subrayado que se dibuja bajo la palabra destacada del título */
.cab h1 em,.cab h2 em,.dos h2 em,.diapo__titulo em,.hero h1 em{background:linear-gradient(currentColor,currentColor) 0 94%/0 2px no-repeat;transition:background-size 900ms var(--ease-out) 350ms}
.revelar.on h1 em,.revelar.on h2 em,.diapo.activa .diapo__titulo em,.hero h1 em{background-size:100% 2px}
.js .hero h1 em{animation:subraya 900ms var(--ease-out) 450ms both}
@keyframes subraya{from{background-size:0 2px}to{background-size:100% 2px}}

/* Ceja con una raya que crece */
.cab .ceja,.dos .ceja{display:flex;align-items:center;gap:10px}
.cab .ceja::before,.dos .ceja::before{content:"";width:22px;height:1.5px;background:currentColor;transform-origin:left;transition:transform 700ms var(--ease-out) 150ms}
.js .revelar:not(.on) .ceja::before,.js .cab.revelar:not(.on) .ceja::before{transform:scaleX(0)}

/* Botones: el contorno se llena desde abajo; el naranja se levanta un poco */
.btn{position:relative;isolation:isolate;overflow:hidden;--relleno:var(--carbon)}
.btn-2::before{content:"";position:absolute;inset:-1px;z-index:-1;background:var(--relleno);border-radius:inherit;transform:translateY(101%);transition:transform 380ms var(--ease-out)}
.btn--claro,.cookies .btn{--relleno:var(--blanco)}
@media (hover:hover){
  .btn-2:hover,.btn--claro:hover,.cookies .btn:hover{background:transparent}
  .btn-2:hover::before{transform:none}
  .nav.lleno .nav__cta:hover{color:var(--blanco)}
  .btn-1{transition:background-color var(--d-ui) var(--ease-out),transform 260ms var(--ease-out)}
  .btn-1:hover{transform:translateY(-2px)}
  .btn-1:active{transform:scale(.97)}
}

/* Enlaces «Ver más» con flecha que avanza */
.mas::after{content:"→";display:inline-block;margin-left:8px;transition:transform 300ms var(--ease-out)}
@media (hover:hover){.mas:hover::after,.prod:hover .mas::after,.guia a:hover .mas::after{transform:translateX(5px)}}

/* Tarjetas */
.prod img{transition:transform 700ms var(--ease-out)}
.prod h3,.guia h3,.barrio-tarjeta h2,.barrio-tarjeta h3{transition:color var(--d-ui) var(--ease-out)}
.guia img,.promo-tarjeta img{transition:transform 700ms var(--ease-out)}
.barrio-tarjeta a,.promo-tarjeta,.resena{transition:transform 360ms var(--ease-out),border-color var(--d-ui) var(--ease-out)}
@media (hover:hover){
  .prod:hover img{transform:scale(1.05) rotate(-4deg)}
  .prod:hover h3,.guia a:hover h3,.barrio-tarjeta a:hover h2,.barrio-tarjeta a:hover h3{color:var(--cobre)}
  .guia a:hover img{transform:scale(1.03)}
  .barrio-tarjeta a:hover,.promo-tarjeta:hover,.resena:hover{transform:translateY(-4px)}
  .promo-tarjeta:hover{border-color:var(--carbon)}
  .promo-tarjeta:hover img{transform:scale(1.03)}
  .cinta__item img{transition:transform 400ms var(--ease-out)}
  .cinta__item:hover img{transform:scale(1.12) rotate(-6deg)}
  .cinta__item:hover{color:var(--cobre)}
  .faq summary{transition:color var(--d-ui) var(--ease-out)}
  .faq summary:hover{color:var(--cobre)}
  .confianza li::before{transition:transform 300ms var(--ease-out)}
  .confianza li:hover::before{transform:scale(1.6)}
  .slider__flechas [data-ant]:hover{transform:translateX(-3px)}
  .slider__flechas [data-sig]:hover{transform:translateX(3px)}
  .slider__flechas button{transition:background-color var(--d-ui) var(--ease-out),color var(--d-ui) var(--ease-out),transform var(--d-ui) var(--ease-out)}
}
.faq details[open] .faq__respuesta{animation:sube 420ms var(--ease-out) both}
.pasos li::before{transition:transform 500ms var(--ease-out) 200ms}
.js .pasos li.revelar:not(.on)::before{transform:scale(.3)}

/* Barra de lectura en las guías */
.progreso{position:fixed;left:0;right:0;top:0;z-index:60;height:3px;background:var(--cobre);transform:scaleX(0);transform-origin:left;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .js img.revelar{transform:none;clip-path:none}
  .nav.oculta{transform:none}
  .cab h1 em,.cab h2 em,.dos h2 em,.diapo__titulo em,.hero h1 em{background-size:100% 2px}
  .progreso{display:none}
}