/* ============================================================
   traverso.cl — sistema de estilo · prototipo HTML v1 (sept 2026)
   Dirección: heritage contemporáneo
   · Títulos en Archivo 800 al ancho justo (100 %), mayúscula solo en portada
     y títulos de sección; títulos de contenido en caja alta y baja
   · Textos de lectura, leads e interfaz de lectura en Public Sans 400
     (Lab 12, Opción 3, elegida por Axel el 08-09-2026; antes Archivo 900
     extendida al 108 % + Source Serif 4). Sin serifas en ninguna parte.
   · Colores oficiales: azul #000E78 · amarillo #F9E404 · blanco
   · El amarillo es detalle fino (trazo, líneas), nunca fondo grande
   · Los rojos / verdes / naranjas / ciruelas diferencian familias
   ============================================================ */

:root{
  /* identidad oficial */
  --azul:#000e78;
  --amarillo:#f9e404;
  --blanco:#ffffff;

  /* gama derivada del azul (matiz 233°) */
  --azul-osc:#00094c;
  --azul-med:#1022ad;
  --azul-cla:#3c4dd2;
  --bruma:#b4bae5;
  --hielo:#edeefa;
  --hielo-2:#f6f7fd;

  /* neutros fríos */
  --tinta:#080c29;
  --tinta2:#363c68;
  --gris:#6a6f95;
  --linea:#d2d4e8;

  /* sistema ampliado · una familia de producto por color */
  --carmin:#c42a45;   --carmin-osc:#96253a;
  --terracota:#c16325;--tostado:#89471a;
  --oliva:#768226;    --oliva-osc:#505918;
  --verde:#24704e;    --verde-osc:#164733;
  --ciruela:#883894;  --ciruela-osc:#5d2466;

  /* tipografía */
  --sans:'Archivo',system-ui,-apple-system,sans-serif;
  --cuerpo:'Public Sans','Archivo',system-ui,-apple-system,sans-serif;
  --serif:var(--cuerpo);   /* alias: lo que era serif hoy es Public Sans (Opción 3) */
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;

  /* medidas */
  --ancho:min(1640px,86vw);
  --gutter:clamp(18px,4vw,48px);
  --radio:14px;
  --radio-s:8px;
  --topbar:76px;
  --sombra:0 24px 60px -28px rgba(0,14,120,.28);
  --sombra-s:0 10px 30px -18px rgba(0,14,120,.25);

  /* familia por defecto = marca */
  --fam:var(--azul);
  --fam-osc:var(--azul-osc);
  --fam-tinte:var(--hielo);
}

/* ---------- familias: color propio, siempre con el azul al mando ---------- */
.f-vinagres        {--fam:var(--verde);     --fam-osc:var(--verde-osc);   --fam-tinte:#e4efe9}
.f-limones         {--fam:var(--terracota); --fam-osc:var(--tostado);     --fam-tinte:#fbecdc}
.f-salsas          {--fam:var(--carmin);    --fam-osc:var(--carmin-osc);  --fam-tinte:#f8e3e6}
.f-soya            {--fam:var(--tostado);   --fam-osc:#5e2f10;            --fam-tinte:#f0e6de}
.f-sopas           {--fam:var(--oliva);     --fam-osc:var(--oliva-osc);   --fam-tinte:#eef0dd}
.f-encurtidos      {--fam:var(--oliva-osc); --fam-osc:#33390f;            --fam-tinte:#e9ecdd}
.f-concentrados    {--fam:var(--ciruela);   --fam-osc:var(--ciruela-osc); --fam-tinte:#f1e4f3}
.f-representaciones{--fam:var(--azul-med);  --fam-osc:var(--azul-osc);    --fam-tinte:#e6e8f8}
.f-vintage         {--fam:var(--carmin-osc);--fam-osc:#6e1a2b;            --fam-tinte:#f6e7e3}
.f-marca           {--fam:var(--azul);      --fam-osc:var(--azul-osc);    --fam-tinte:var(--hielo)}
/* en el mega menú y el catálogo móvil las familias van solo en gama corporativa; los colores propios quedan para las puertas (Mundo Vintage, Recetas) */
.mega [class*="f-"],.mv-catalogo [class*="f-"]{--fam:var(--azul);--fam-osc:var(--azul-osc);--fam-tinte:var(--hielo)}

/* ============================================================
   BASE
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--topbar) + 16px);-webkit-text-size-adjust:100%}
body{background:var(--blanco);color:var(--tinta);font-family:var(--cuerpo);font-size:16.5px;line-height:1.62;font-optical-sizing:auto}
html{overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
strong,b{font-weight:600}
::selection{background:var(--amarillo);color:var(--tinta)}

/* Opción 3 (08-09-2026): Archivo 800 al 100 % de ancho. Mayúscula solo en h1 y h2;
   h3 y h4 (cards, recetas, fichas, puertas) en caja alta y baja, 700. */
h1,h2,h3,h4,.t{font-family:var(--sans);font-weight:800;font-stretch:100%;text-transform:uppercase;line-height:1;letter-spacing:-.02em}
h1{font-size:clamp(40px,7vw,96px);line-height:.96}
h2{font-size:clamp(30px,4.4vw,58px);line-height:.98}
h3{font-size:clamp(20px,2.3vw,28px);font-weight:700;text-transform:none;letter-spacing:-.015em;line-height:1.08}
h4{font-size:16px;font-weight:700;text-transform:none;letter-spacing:-.012em;line-height:1.1}
.t-serif{font-family:var(--serif);font-weight:400;text-transform:none;letter-spacing:0;line-height:1.15}
.t-serif em{font-style:italic;color:var(--azul-med)}
h2 em,h1 em{font-style:normal;color:var(--amarillo)}
.oscuro h2 em,.oscuro h1 em{color:var(--amarillo)}
.claro h2 em,.claro h1 em{color:var(--azul-med)}

.lead{font-size:clamp(18px,1.6vw,22px);line-height:1.5;color:var(--tinta2);max-width:640px}
.txt{color:var(--tinta2);max-width:640px}
.txt p+p{margin-top:1em}
.mono{font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}

/* ojo = eyebrow con el trazo amarillo, guiño al logo */
.ojo{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:700;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--azul-med)}
.ojo::before{content:"";width:22px;height:3px;background:var(--amarillo);border-radius:2px;flex:none}
.oscuro .ojo,.azul .ojo{color:#c9cef5}

/* ---------- layout ---------- */
.wrap{max-width:var(--ancho);margin:0 auto;padding:0 var(--gutter)}
.wrap.ancha{max-width:var(--ancho)}
.sec{padding:clamp(56px,8vw,112px) 0}
.sec.corta{padding:clamp(36px,5vw,64px) 0}
.sec.hielo{background:var(--hielo)}
.sec.hielo-2{background:var(--hielo-2)}
.sec.oscuro,.oscuro{background:var(--azul-osc);color:#fff}
.sec.azul{background:var(--azul);color:#fff}
.sec.fam{background:var(--fam-tinte)}
.oscuro .lead,.oscuro .txt,.azul .lead,.azul .txt{color:#d6d9f4}
.sec-h{display:grid;grid-template-columns:1fr auto;gap:18px 40px;align-items:end;margin-bottom:clamp(28px,4vw,52px)}
.sec-h .ojo{margin-bottom:16px}
.sec-h p{margin-top:16px}
.sec-h .der{justify-self:end;align-self:end}
@media(max-width:760px){.sec-h{grid-template-columns:1fr}.sec-h .der{justify-self:start}}

.grid{display:grid;gap:clamp(14px,2vw,24px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g4,.g3,.g2{grid-template-columns:1fr}}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:700;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;padding:15px 26px;border-radius:40px;border:1.5px solid var(--azul);background:var(--azul);color:#fff;text-decoration:none;transition:transform .2s,background .2s,color .2s,border-color .2s;white-space:nowrap}
.btn:hover{background:var(--azul-med);border-color:var(--azul-med);transform:translateY(-1px)}
.btn.amarillo{background:var(--amarillo);border-color:var(--amarillo);color:var(--tinta)}
.btn.amarillo:hover{background:#ffef4d;border-color:#ffef4d}
.btn.blanco{background:#fff;border-color:#fff;color:var(--azul)}
.btn.blanco:hover{background:var(--amarillo);border-color:var(--amarillo);color:var(--tinta)}
.btn.ghost{background:transparent;color:var(--azul)}
.btn.ghost:hover{background:var(--azul);color:#fff}
.oscuro .btn.ghost,.azul .btn.ghost{color:#fff;border-color:rgba(255,255,255,.7)}
.oscuro .btn.ghost:hover,.azul .btn.ghost:hover{background:#fff;color:var(--azul);border-color:#fff}
.btn.fam{background:var(--fam);border-color:var(--fam);color:#fff}
.btn.fam:hover{background:var(--fam-osc);border-color:var(--fam-osc)}
.btn.sm{padding:10px 18px;font-size:11px}
.btn .fl{font-size:15px;line-height:1}

.lnk{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:700;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--azul-med);padding-bottom:4px;border-bottom:2px solid var(--amarillo);transition:gap .2s,color .2s}
.lnk:hover{gap:14px;color:var(--azul)}
.oscuro .lnk,.azul .lnk{color:#fff}

/* ---------- etiquetas / chips ---------- */
.tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-weight:700;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;padding:6px 11px;border-radius:20px;background:var(--fam-tinte);color:var(--fam-osc)}
.tag.solido{background:var(--fam);color:#fff}
.tag.azul{background:var(--azul);color:#fff}
.tag.amarillo{background:var(--amarillo);color:var(--tinta)}
.tag.linea{background:transparent;border:1px solid var(--linea);color:var(--tinta2)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:11px;letter-spacing:.06em;padding:7px 12px;border:1px solid var(--linea);border-radius:20px;color:var(--tinta2);background:#fff}
.oscuro .chip{background:transparent;border-color:rgba(255,255,255,.3);color:#d6d9f4}

/* ============================================================
   FOTOS · placeholders con la pauta de imagen del cliente
   ============================================================ */
.ph{position:relative;overflow:hidden;background:var(--hielo);border-radius:var(--radio);aspect-ratio:4/3;isolation:isolate}
.ph img,.ph video{width:100%;height:100%;object-fit:cover;display:block}
.ph.r169{aspect-ratio:16/9}.ph.r32{aspect-ratio:3/2}.ph.r11{aspect-ratio:1}.ph.r45{aspect-ratio:4/5}.ph.r21{aspect-ratio:2/1}.ph.r34{aspect-ratio:3/4}
.ph.cuadrada{border-radius:0}
.ph.pend{background:
  repeating-linear-gradient(-45deg,transparent 0 18px,rgba(0,14,120,.045) 18px 19px),
  linear-gradient(160deg,var(--fam-tinte),#fff)}
.ph.pend::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 30%,rgba(255,255,255,.7),transparent 55%)}
.ph.pend::after{content:"Foto · " attr(data-foto);position:absolute;left:14px;bottom:14px;right:14px;font:italic 500 10.5px/1.45 var(--cuerpo);letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,.94);color:var(--tinta2);padding:8px 11px;border-radius:6px;max-width:min(100%,360px);width:max-content;box-shadow:0 2px 10px rgba(0,14,120,.08)}
.ph.pend.fuente-nueva::after{content:"Sesión nueva · " attr(data-foto)}
.ph.pend.fuente-archivo::after{content:"Archivo Traverso · " attr(data-foto)}
.ph.pend.fuente-catalogo::after{content:"Packshot oficial · " attr(data-foto)}
.ph.pend.fuente-ia::after{content:"Recreación IA · " attr(data-foto)}
.ph.pend.fuente-marca::after{content:"Material oficial de marca · " attr(data-foto)}
.ph .cap{position:absolute;left:14px;bottom:14px;font:italic 500 10.5px/1.4 var(--cuerpo);letter-spacing:.06em;text-transform:uppercase;background:rgba(8,12,41,.75);color:#fff;padding:7px 11px;border-radius:6px;backdrop-filter:blur(4px)}
.ph.sepia img{filter:sepia(.35) contrast(1.05)}
.ph .velo{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,9,76,0) 40%,rgba(0,9,76,.75));z-index:1}
.ph .sobre{position:absolute;left:0;right:0;bottom:0;padding:22px;z-index:2;color:#fff}
.ph .sobre h3{margin-top:6px}

/* ============================================================
   BOTELLAS · ilustración CSS mientras llegan los packshots
   La etiqueta con el rombo cumple el rol del diamante de Tabasco.
   ============================================================ */
.bot{--h:220px;--c:var(--fam);--tapa:var(--azul);--liq:var(--c);position:relative;width:calc(var(--h)*.36);height:var(--h);display:inline-block;flex:none;filter:drop-shadow(0 18px 14px rgba(0,9,76,.18))}
.bot .tapa{position:absolute;left:35%;right:35%;top:0;height:10%;background:var(--tapa);border-radius:14% 14% 4% 4%/40% 40% 10% 10%;z-index:3}
.bot .tapa::after{content:"";position:absolute;left:14%;right:14%;top:28%;height:14%;background:rgba(255,255,255,.35);border-radius:2px}
.bot .cuello{position:absolute;left:37%;right:37%;top:9%;height:14%;background:linear-gradient(90deg,color-mix(in srgb,var(--liq),#000 18%),var(--liq) 40%,color-mix(in srgb,var(--liq),#fff 35%) 70%,color-mix(in srgb,var(--liq),#000 8%));z-index:2}
.bot .cuerpo{position:absolute;left:0;right:0;top:20%;bottom:0;background:linear-gradient(90deg,color-mix(in srgb,var(--liq),#000 22%) 0%,var(--liq) 38%,color-mix(in srgb,var(--liq),#fff 38%) 66%,var(--liq) 84%,color-mix(in srgb,var(--liq),#000 12%));border-radius:46% 46% 12% 12%/18% 18% 5% 5%;z-index:1}
.bot .cuerpo::before{content:"";position:absolute;left:13%;top:16%;width:7%;height:64%;background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,0));border-radius:50%}
.bot .cuerpo::after{content:"";position:absolute;left:8%;right:8%;bottom:0;height:4%;background:rgba(0,0,0,.14);border-radius:50%}
.bot .etq{position:absolute;left:6%;right:6%;top:42%;bottom:9%;background:#fff;border-radius:4px;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--h)*.02);padding:6% 4%;text-align:center;box-shadow:inset 0 0 0 1px rgba(0,14,120,.08)}
.bot .etq::before{content:"";position:absolute;left:10%;right:10%;top:9%;height:3px;background:var(--amarillo);border-radius:2px;transform:skewY(-3deg)}
.bot .rombo{width:38%;aspect-ratio:1;background:var(--azul);transform:rotate(45deg);border-radius:8%;display:flex;align-items:center;justify-content:center;flex:none;margin-top:8%}
.bot .rombo span{transform:rotate(-45deg);color:#fff;font:900 calc(var(--h)*.03)/1 var(--sans);letter-spacing:.06em;white-space:nowrap}
.bot .nom{font:900 calc(var(--h)*.052)/1.02 var(--sans);text-transform:uppercase;color:var(--c);letter-spacing:-.01em;max-width:100%}
.bot .sub{font:500 calc(var(--h)*.03)/1.2 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--gris)}
.bot .fondo{position:absolute;left:0;right:0;bottom:0;height:6%;background:rgba(0,0,0,.08);border-radius:0 0 12% 12%/0 0 40% 40%;z-index:2}
/* formas */
.bot.limon{--tapa:var(--amarillo)}
.bot.limon .tapa{left:40%;right:40%;height:13%;border-radius:40% 40% 8% 8%/60% 60% 10% 10%;background:linear-gradient(90deg,#d9c500,var(--amarillo) 55%,#fff59a)}
.bot.limon .cuello{top:12%;height:12%;left:39%;right:39%}
.bot.limon .cuerpo{top:22%;border-radius:40% 40% 14% 14%/16% 16% 6% 6%}
.bot.salsa{width:calc(var(--h)*.44)}
.bot.salsa .tapa{left:30%;right:30%;height:9%;border-radius:30% 30% 6% 6%/50% 50% 12% 12%}
.bot.salsa .tapa::before{content:"";position:absolute;left:38%;right:38%;top:-30%;height:36%;background:var(--tapa);border-radius:40% 40% 0 0}
.bot.salsa .cuello{left:24%;right:24%;top:8%;height:8%}
.bot.salsa .cuerpo{top:14%;border-radius:22% 22% 16% 16%/8% 8% 6% 6%}
.bot.salsa .etq{top:34%;bottom:10%}
.bot.frasco{width:calc(var(--h)*.6)}
.bot.frasco .tapa{left:8%;right:8%;height:11%;border-radius:8% 8% 3% 3%/30% 30% 10% 10%;background:linear-gradient(90deg,#8d93bd,#dfe2f5 50%,#8d93bd)}
.bot.frasco .cuello{left:9%;right:9%;top:10%;height:6%}
.bot.frasco .cuerpo{top:14%;border-radius:10% 10% 12% 12%/5% 5% 6% 6%}
.bot.frasco .etq{top:32%;bottom:12%}
.bot.doy{width:calc(var(--h)*.5)}
.bot.doy .tapa{left:64%;right:20%;height:8%;border-radius:20% 20% 0 0;z-index:3}
.bot.doy .cuello{display:none}
.bot.doy .cuerpo{top:7%;border-radius:8% 8% 10% 10%/3% 3% 18% 18%;clip-path:polygon(4% 0,96% 0,100% 100%,0 100%)}
.bot.doy .etq{top:22%;bottom:14%;left:12%;right:12%}
.bot.bidon{width:calc(var(--h)*.52)}
.bot.bidon .tapa{left:52%;right:26%;height:9%}
.bot.bidon .cuello{left:54%;right:28%;top:8%;height:7%}
.bot.bidon .cuerpo{top:13%;border-radius:12% 34% 8% 8%/8% 30% 4% 4%}
.bot.bidon .cuerpo::before{left:70%}
.bot.bidon .etq{top:36%;bottom:10%}
.bot.sachet{width:calc(var(--h)*.5);height:calc(var(--h)*.7)}
.bot.sachet .tapa,.bot.sachet .cuello{display:none}
.bot.sachet .cuerpo{top:0;border-radius:4px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.bot.sachet .cuerpo::after{display:none}
.bot.sachet .etq{top:14%;bottom:14%}
/* tamaños */
.bot.xs{--h:76px}.bot.s{--h:120px}.bot.m{--h:170px}.bot.l{--h:260px}.bot.xl{--h:340px}
.bot.xs .etq,.bot.s .etq{gap:2px}
.bot.xs .sub{display:none}
.bot.xs .rombo span,.bot.s .rombo span{font-size:calc(var(--h)*.036)}
.bot.xs .nom{font-size:calc(var(--h)*.075)}

/* ============================================================
   HEADER
   ============================================================ */
.trazo{height:4px;background:var(--amarillo)}
.topbar{position:sticky;top:0;z-index:200;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--linea);transition:box-shadow .3s}
.topbar.pegado{box-shadow:0 6px 30px -14px rgba(0,14,120,.25)}
.topbar-in{max-width:var(--ancho);margin:0 auto;padding:0 var(--gutter);height:var(--topbar);display:flex;align-items:center;gap:22px}
.logo{display:flex;align-items:center;flex:none;text-decoration:none}
.logo img{height:40px;width:auto}
.logo small{display:none}
.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav>li{position:relative}
.nav>li.tiene-mega{position:static}
.nav>li>a{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-weight:700;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--tinta);padding:12px 14px;border-radius:24px;transition:background .2s}
.nav>li>a:hover,.nav>li.on>a{background:var(--hielo)}
.nav>li.on>a{box-shadow:inset 0 -2px 0 var(--amarillo)}
.nav>li.abre>a{background:var(--azul);color:#fff}
.nav>li>a .fl{font-size:9px;transition:transform .2s}
.nav>li.abre>a .fl{transform:rotate(180deg)}
.acciones{display:flex;align-items:center;gap:8px;flex:none}
.acc-ico{width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--linea);color:var(--tinta);text-decoration:none;transition:background .2s,border-color .2s}
.acc-ico:hover{background:var(--hielo);border-color:var(--bruma)}
.acc-ico svg{width:18px;height:18px}
.burger{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--linea);align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger i{display:block;width:18px;height:2px;background:var(--tinta);border-radius:2px;transition:transform .25s,opacity .25s}
.burger.x i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.x i:nth-child(2){opacity:0}
.burger.x i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* nav móvil · con hamburguesa hasta 1200 px (antes 980; ver BARRA · tramo medio, 30-09-2026) */
@media(max-width:1200px){
  .nav{display:none}
  .burger{display:inline-flex}
  .acciones .btn{display:none}
  .topbar.abierto .nav{display:flex;flex-direction:column;align-items:stretch;position:fixed;left:0;right:0;top:calc(var(--topbar) + 4px);bottom:0;background:#fff;padding:18px var(--gutter) 40px;overflow:auto;gap:0;margin:0}
  .topbar.abierto .nav>li>a{border-radius:0;padding:16px 4px;font-size:16px;border-bottom:1px solid var(--linea);display:flex;justify-content:space-between}
  .topbar.abierto .nav .btn-movil{display:inline-flex;margin-top:22px;justify-content:center}
}
.nav .btn-movil{display:none}

/* ============================================================
   HERO · las recetas (Lab 27, Axel 15-09-2026: V3 "limpio" + botón B1
   "cristal"; antes, el cinemático del Lab 03d sobre video con velo blanco):
   barra transparente al inicio, la foto de una receta a sangre que cambia
   sola (app.js), logo + claim centrados en blanco, el botón de la esquina a
   la receta que se ve y el carrusel continuo de packshots a siete columnas;
   debajo, el panel de la familia que se abre al tocar un producto
   ============================================================ */
.hero-arc{font-family:var(--sans);font-weight:700;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gris);display:flex;align-items:center;gap:12px;margin-bottom:26px}
.hero-arc::before{content:"";width:28px;height:3px;background:var(--amarillo)}
.hero-fam{font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--fam);margin-bottom:12px}
.hero-desc{font-size:clamp(17px,1.4vw,20px);color:var(--tinta2);max-width:400px;margin-top:22px;line-height:1.5}
.hero-links{display:flex;gap:22px;align-items:center;margin-top:30px;flex-wrap:wrap}
/* barra transparente mientras el inicio está arriba del todo: sobre la foto, los enlaces van en blanco */
.topbar{transition:background .3s,box-shadow .3s,border-color .3s}
body.home .topbar:not(.pegado):not(.abierto){background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
body.home .topbar:not(.pegado):not(.abierto) .topbar-in{box-shadow:inset 0 -1px 0 rgba(255,255,255,.24)}
body.home .topbar:not(.pegado):not(.abierto) .nav>li>a{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.45)}
body.home .topbar:not(.pegado):not(.abierto) .nav>li>a:hover,
body.home .topbar:not(.pegado):not(.abierto) .nav>li.on>a{color:#fff}
body.home .topbar:not(.pegado):not(.abierto) .burger{border-color:rgba(255,255,255,.55)}
body.home .topbar:not(.pegado):not(.abierto) .burger i{background:#fff}
body.home .topbar:not(.pegado):not(.abierto) .acciones .intl,
body.home .topbar:not(.pegado):not(.abierto) .acciones .acc-ico,
body.home .topbar:not(.pegado):not(.abierto) .acciones .btn.ghost{color:#fff;border-color:rgba(255,255,255,.6)}
.hero-v{position:relative;overflow:hidden;isolation:isolate;margin-top:-80px;padding-top:80px;min-height:min(820px,90vh);display:flex;flex-direction:column;background:var(--azul-osc);color:#fff}
/* el fondo: dos capas de foto que se funden; el acercamiento lo lleva app.js (GSAP) o, sin él, la clase .zoom */
.hero-rc-fondo{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--azul-osc)}
.hero-rc-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform-origin:50% 50%;will-change:opacity,transform;transition:opacity 1.4s ease-in-out}
.hero-rc-img.on{opacity:1}
.hero-rc-img.zoom{animation:hero-rc-zoom 9.5s linear forwards}
@keyframes hero-rc-zoom{from{transform:scale(1)}to{transform:scale(1.07)}}
@media(prefers-reduced-motion:reduce){.hero-rc-img{transition:none}.hero-rc-img.zoom{animation:none}}
.hero-rc-fondo .pend{position:absolute;inset:0;background:radial-gradient(circle at 70% 30%,var(--azul-med),var(--azul-osc) 70%)}
/* el único velo es oscuro y por los bordes: arriba para la barra, abajo para los productos (nada de velo blanco: Axel, 15-09-2026) */
.hero-rc-velo{position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,9,76,.46) 0%,rgba(0,9,76,.12) 32%,rgba(0,0,0,.06) 52%,rgba(0,0,0,.58) 100%)}
.hero-v-claim{position:relative;z-index:1;flex:1;display:flex;align-items:center;padding-top:clamp(20px,2.6vw,36px);padding-bottom:clamp(12px,2vw,28px)}
.hero-v-claim-in{width:100%;text-align:center}
.hero-v-logo{display:block;height:clamp(76px,8.5vw,116px);width:auto;margin:0 auto 18px;filter:drop-shadow(0 14px 22px rgba(0,0,0,.35))}
/* el claim en blanco sobre la foto, sin contorno (V3 "limpio"); la sombra suave lo despega de la foto */
.hero-v h1{font-size:clamp(28px,3.8vw,56px);margin-top:0;color:#fff;max-width:none;letter-spacing:-.01em;text-shadow:0 2px 4px rgba(0,0,0,.35),0 14px 44px rgba(0,0,0,.4)}
.hero-v h1 em{font-style:normal;color:#fff}
.hero-v h1 .ln2{display:block}
.hero-v .lead{font-family:var(--cuerpo);font-weight:600;font-size:clamp(16px,1.25vw,19px);line-height:1.55;max-width:62ch;margin:14px auto 0;color:#fff;text-shadow:0 1px 2px var(--tinta),0 2px 12px rgba(0,0,0,.6)}
.hero-v .hero-links{justify-content:center;margin-top:22px}
/* el botón de la esquina (B1 "cristal"): bajo la barra, su borde derecho coincide con el final de la línea de
   la barra (la caja .topbar-in, por eso sin padding derecho); UNA línea: "En la foto", un filete, el nombre y
   la flecha; el nombre se corta con puntos suspensivos si no cabe. Absoluto: no mueve el claim. */
.hero-rc-esquina{position:absolute;left:0;right:0;top:calc(80px + 16px);z-index:3;display:flex;justify-content:flex-end;padding-right:0;pointer-events:none}
.hero-rc-receta{pointer-events:auto;display:flex;align-items:center;gap:10px;max-width:min(560px,70vw);padding:9px 14px 9px 15px;border-radius:6px;text-decoration:none;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.42);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 12px 30px -16px rgba(0,0,0,.6);transition:background .2s,border-color .2s,color .2s}
.hero-rc-receta span{font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;line-height:1.2;color:rgba(255,255,255,.85);padding-top:1px}
.hero-rc-receta strong{display:flex;align-items:baseline;gap:8px;min-width:0;max-width:100%;font-family:var(--sans);font-weight:800;font-size:11.5px;letter-spacing:.02em;text-transform:uppercase;line-height:1.2}
.hero-rc-receta strong::before{content:"";flex:none;width:1px;height:12px;background:rgba(255,255,255,.45);margin-right:2px;align-self:center}
.hero-rc-receta strong b{font-weight:800;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-rc-receta strong i{font-style:normal;flex:none;color:var(--amarillo);transition:transform .2s}
.hero-rc-receta:hover{background:rgba(255,255,255,.94);border-color:#fff;color:var(--azul)}
.hero-rc-receta:hover span{color:var(--azul-med)}
.hero-rc-receta:hover strong::before{background:rgba(0,14,120,.35)}
.hero-rc-receta:hover strong i{color:var(--azul);transform:translateX(3px)}
/* carrusel continuo de packshots (sin textos, 2 por familia) a siete columnas: cada envase ocupa un séptimo
   del ancho y el packshot (cuadrado) crece al 86 % de su columna (Axel, 15-09-2026: "así crecen un poco").
   30-09-2026, Traverso: "pueden ir en un tamaño mayor" → 5,5 columnas y el envase al 90 % (tope 330 px);
   en el celular 2,6 columnas en vez de 3,4 */
.hc{--hc-cols:5.5;position:relative;z-index:1;overflow:hidden;padding-top:0}
.hc-in{display:flex;align-items:flex-end;gap:0;width:max-content;padding:0 0 20px}
.hc-item{flex:none;width:calc(100vw / var(--hc-cols));display:flex;justify-content:center;align-items:flex-end;padding:0;position:relative;opacity:1;cursor:pointer;transition:transform .3s,opacity .3s}
.hc-item img{width:min(90%,330px);height:auto;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 18px 18px rgba(0,0,0,.45))}
.hc-item::after{content:"";position:absolute;left:32%;right:32%;bottom:-12px;height:4px;border-radius:2px;background:var(--azul);opacity:0;transition:opacity .2s}
.hc-item:hover{transform:translateY(-8px);opacity:1}
.hc-item.on{transform:translateY(-12px) scale(1.1);opacity:1}
.hc-item.sel::after{opacity:1}   /* la línea azul solo bajo el envase que se tocó (Axel, 22-09-2026); antes salía en toda la familia y en el clon del bucle */
/* panel de la familia (cerrado hasta el clic) */
.hero-panel{background:linear-gradient(120deg,var(--hielo),#fff 70%);border-bottom:1px solid var(--linea);overflow:hidden}
.hero-panel[hidden]{display:none}
.hero-panel-in{max-width:min(var(--ancho),1180px);margin:0 auto;padding:clamp(28px,4vw,52px) var(--gutter);display:grid;grid-template-columns:1.1fr .9fr;   /* el panel más apretado de ancho (Axel, 22-09-2026) */gap:clamp(24px,4vw,56px);align-items:center;position:relative}
.hero-panel .hero-arc{margin-bottom:14px}
.hero-panel-h{font-size:clamp(34px,4.4vw,64px);line-height:.96;letter-spacing:-.02em;color:var(--azul)}
.hero-panel .hero-desc{max-width:460px;margin-top:16px;font-size:clamp(15px,1.2vw,18px)}
.hero-panel .chips{margin-top:16px}
.hero-panel .chips a{font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:10.5px;letter-spacing:.04em;padding:6px 11px;border:1px solid var(--linea);border-radius:20px;color:var(--tinta2);text-decoration:none;background:#fff;transition:border-color .2s,color .2s}
.hero-panel .chips a:hover{border-color:var(--azul);color:var(--azul)}
.hero-panel .hero-links{margin-top:26px;gap:16px}
.mini{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--tinta);font-family:var(--sans);font-weight:700;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--linea);border-radius:30px;padding:6px 14px 6px 6px;background:#fff;transition:border-color .2s,transform .2s}
.mini img{height:34px;width:34px;object-fit:contain;border-radius:50%;background:var(--hielo-2)}
.mini b,.mini i{color:var(--azul)}
.mini i{font-style:normal}
.mini:hover{border-color:var(--azul);transform:translateX(2px)}
.hero-panel-arte{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:320px}
.hero-panel-arte img.suelto{height:min(46vh,340px);width:auto;filter:drop-shadow(0 26px 24px rgba(0,9,76,.28))}
.hero-panel-arte .etq{font-family:var(--cuerpo);font-style:italic;font-weight:500;font-style:normal;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--azul);border:1px solid var(--bruma);background:#fff;border-radius:20px;padding:4px 10px}
.hero-panel-cerrar{position:absolute;right:var(--gutter);top:22px;width:40px;height:40px;border-radius:50%;border:1px solid var(--linea);background:#fff;color:var(--tinta);font-size:22px;line-height:1;display:inline-flex;align-items:center;justify-content:center;transition:background .2s,color .2s}
.hero-panel-cerrar:hover{background:var(--azul);color:#fff;border-color:var(--azul)}
@media(max-width:1200px){.hero-v{margin-top:calc(-1 * var(--topbar));padding-top:var(--topbar)}.hero-rc-esquina{top:calc(var(--topbar) + 12px)}}
@media(max-width:900px){
  .hero-v{min-height:82vh}
  .hero-v h1{font-size:clamp(28px,7.5vw,40px)}
  .hc{--hc-cols:2.6}
  .hc-item img{width:80%}
  .hero-rc-receta{max-width:min(320px,72vw)}
  .hero-panel-in{grid-template-columns:1fr;gap:20px}
  .hero-panel-arte{order:-1;min-height:0}
  .hero-panel-arte img.suelto{height:200px}
}

/* ============================================================
   MÓDULOS DEL INICIO
   ============================================================ */
/* franja de sellos: patrón "badges escaneables" */
/* barra de sellos bajo el hero · azul fija (Lab 09 V5, elegida 07-09-2026).
   Una sola barra con los cinco DATOS, no claims; la banda amarilla del cierre se eliminó. */
.sellos{background:var(--azul-osc)}   /* azul profundo #00094C, un poco más oscuro que el oficial (Axel, 22-09-2026) */
.sellos-in{margin:0 auto;padding:20px var(--gutter);display:flex;flex-wrap:wrap;gap:12px 40px;justify-content:center}
.sello-i{display:inline-flex;align-items:center;gap:11px;font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.17em;text-transform:uppercase;color:#c9cef5}
.sello-i b{font-weight:900;color:#fff}
.sello-i::before{content:"";width:8px;height:8px;background:var(--amarillo);transform:rotate(45deg);flex:none}

/* +130 años */
.anos{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,72px);align-items:center}
.anos .num{font-family:var(--sans);font-weight:900;font-size:clamp(90px,14vw,190px);line-height:.85;letter-spacing:-.05em;color:var(--azul);position:relative;display:inline-block}
.anos .num small{display:inline-block;font-size:.3em;color:var(--azul-med);letter-spacing:-.02em;margin-left:14px;vertical-align:top;margin-top:.35em}
.anos .num::after{content:"";display:block;height:6px;width:60%;background:var(--amarillo);border-radius:3px;margin-top:14px;transform:skewY(-2deg)}
.anos h2{margin-top:22px}
.anos .fotos{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:end}
.anos .fotos .ph:first-child{aspect-ratio:3/4;transform:translateY(24px)}
.anos .fotos .ph:last-child{aspect-ratio:3/4}
.anos .fotos .ano{position:absolute;top:14px;left:14px;font-family:var(--sans);font-weight:900;font-size:26px;color:#fff;background:var(--azul);padding:6px 12px;border-radius:8px;letter-spacing:-.02em;z-index:2}
@media(max-width:900px){.anos{grid-template-columns:1fr}.anos .fotos .ph:first-child{transform:none}}

/* categorías destacadas */
.fams{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px)}
.fam-card{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:420px;border-radius:var(--radio);background:var(--fam);color:#fff;padding:26px;text-decoration:none;overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;isolation:isolate}
.fam-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 15%,rgba(255,255,255,.22),transparent 45%),linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.28));z-index:-1}
.fam-card:hover{transform:translateY(-6px);box-shadow:var(--sombra)}
.fam-card .n{font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.fam-card h3{font-size:clamp(24px,2.4vw,34px);margin-top:10px;max-width:8ch}
.fam-card p{font-size:15px;color:rgba(255,255,255,.85);margin-top:10px;max-width:24ch;line-height:1.45}
.fam-card .bots{display:flex;align-items:flex-end;justify-content:center;gap:6px;margin:18px 0 12px;min-height:150px;transition:transform .4s}
.fam-card .bots .bot{--c:#fff;filter:drop-shadow(0 12px 10px rgba(0,0,0,.25))}
.fam-card .bots .bot .cuerpo,.fam-card .bots .bot .cuello{background:linear-gradient(90deg,rgba(255,255,255,.55),rgba(255,255,255,.95) 45%,rgba(255,255,255,.7))}
.fam-card .bots .bot .nom{color:var(--fam)}
.fam-card:hover .bots{transform:translateY(-6px)}
.fam-card .pie{display:flex;justify-content:space-between;align-items:center;font-family:var(--sans);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.fam-card .pie i{width:34px;height:34px;border-radius:50%;background:#fff;color:var(--fam);display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:16px;transition:transform .3s}
.fam-card:hover .pie i{transform:translateX(4px)}
.fam-card.rep{background:var(--azul);--fam:var(--azul)}
.fam-card.rep .logos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:18px 0 12px;align-self:stretch;width:100%}
.fam-card.rep .logos span{background:#fff;color:var(--azul);border-radius:8px;padding:14px 6px;font-family:var(--sans);font-weight:900;font-size:11px;overflow:hidden;letter-spacing:.06em;text-transform:uppercase;text-align:center;display:flex;align-items:center;justify-content:center;min-height:62px}
.fam-card.rep .logos span.kik{color:#b3161f}
.fam-card.rep .logos span.mel{color:#c8102e}
@media(max-width:980px){.fams{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.fams{grid-template-columns:1fr}.fam-card{min-height:340px}}

/* Traverso en tu mesa */
.mesa{background:var(--azul);color:#fff;position:relative;overflow:hidden;border-radius:var(--radio)}
.mesa-in{max-width:none;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;min-height:560px}
.mesa .txt-col{padding:clamp(44px,6vw,90px) var(--gutter);display:flex;flex-direction:column;justify-content:center;gap:22px}
.mesa .cita{font-family:var(--serif);font-size:clamp(28px,3.4vw,46px);line-height:1.15;font-weight:400;max-width:16ch}
.mesa .cita em{font-style:italic;color:var(--amarillo)}
.mesa .foto-col{position:relative;min-height:380px}
.mesa .foto-col .ph{position:absolute;inset:0;border-radius:0;aspect-ratio:auto}
.mesa .foto-col .ph.pend{background:radial-gradient(circle at 30% 30%,#1b2bb7,var(--azul-osc) 70%)}
.mesa .foto-col .ph.pend::before{background:radial-gradient(circle at 70% 75%,rgba(249,228,4,.22),transparent 40%)}
.mesa .fila{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:flex-end;gap:8px;padding:0 20px 28px;z-index:2}
.mesa .fila .bot{--h:150px}
.mesa .fila .bot:nth-child(2n){--h:180px}
.mesa .fila .bot:nth-child(3){--h:210px}
.mesa .mantel{position:absolute;inset:auto 0 0 0;height:22%;background:repeating-linear-gradient(45deg,rgba(255,255,255,.08) 0 16px,transparent 16px 32px),repeating-linear-gradient(-45deg,rgba(255,255,255,.08) 0 16px,transparent 16px 32px);z-index:1}
@media(max-width:900px){.mesa-in{grid-template-columns:1fr}}

/* productos destacados */
.prods{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px)}
.prod{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:18px 18px 20px;display:flex;flex-direction:column;gap:12px;text-decoration:none;color:inherit;position:relative;transition:transform .3s,box-shadow .3s,border-color .3s}
.prod:hover{transform:translateY(-4px);box-shadow:var(--sombra);border-color:var(--bruma)}
.prod .escena{background:var(--fam-tinte);border-radius:10px;height:230px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:18px;position:relative;overflow:hidden}
.prod .escena::before{content:"";position:absolute;left:10%;right:10%;bottom:10px;height:14px;border-radius:50%;background:rgba(0,14,120,.08);filter:blur(4px)}
.prod .escena .bot{--h:190px;transition:transform .35s}
.prod:hover .escena .bot{transform:translateY(-6px) rotate(-2deg)}
.prod .escena .tag{position:absolute;top:12px;left:12px}
.prod .escena .ph{position:absolute;inset:0;border-radius:0;aspect-ratio:auto}
.prod h3{font-size:19px;line-height:1.05}
.prod .fam-n{font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fam);display:flex;align-items:center;gap:8px}
.prod .fam-n::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--fam)}
.prod p{font-size:14.5px;color:var(--tinta2);line-height:1.45}
.prod .formatos{font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:10.5px;letter-spacing:.06em;color:var(--gris);margin-top:auto;padding-top:8px;border-top:1px dashed var(--linea)}
@media(max-width:1000px){.prods{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.prods{grid-template-columns:1fr}}

/* calidad */
.calidad{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,60px);align-items:center}
.calidad .mosaico{display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:auto auto;gap:12px}
.calidad .mosaico .ph:first-child{grid-row:1/3;aspect-ratio:3/4}
.calidad .mosaico .ph{aspect-ratio:1}
.cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px;padding-top:26px;border-top:1px solid var(--linea)}
.cifra b{display:block;font-family:var(--sans);font-weight:900;font-size:clamp(34px,4vw,56px);line-height:.95;letter-spacing:-.03em;color:var(--azul)}
.cifra b small{font-size:.5em;letter-spacing:0;color:var(--azul-med)}
.cifra span{display:block;font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);margin-top:8px}
.oscuro .cifra b{color:#fff}.oscuro .cifra b small{color:var(--amarillo)}.oscuro .cifra span{color:#c9cef5}.oscuro .cifras{border-color:rgba(255,255,255,.2)}
.sello-brc{display:inline-flex;align-items:center;gap:14px;background:var(--hielo);border:1px solid var(--linea);border-radius:12px;padding:12px 16px;margin-top:22px}
.sello-brc i{width:54px;height:54px;border-radius:50%;background:var(--azul);color:#fff;display:inline-flex;align-items:center;justify-content:center;font:900 11px/1 var(--sans);letter-spacing:.04em;flex:none;text-align:center;font-style:normal}
.sello-brc b{display:block;font-family:var(--sans);font-size:13px;text-transform:uppercase;letter-spacing:.06em}
.sello-brc span{font-size:13.5px;color:var(--tinta2)}
@media(max-width:900px){.calidad{grid-template-columns:1fr}.cifras{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.cifras{grid-template-columns:1fr 1fr}}

/* recetas */
.recs{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px)}
.rec{display:flex;flex-direction:column;gap:12px;text-decoration:none;color:inherit}
.rec .ph{aspect-ratio:4/5;transition:transform .35s}
.rec:hover .ph{transform:translateY(-4px)}
.rec .meta{display:flex;gap:12px;font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.rec h3{font-size:18px;line-height:1.1}
.rec .usa{display:flex;flex-wrap:wrap;gap:6px}
.rec .usa span{font-family:var(--sans);font-weight:700;font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:12px;background:var(--hielo);color:var(--azul)}
@media(max-width:1000px){.recs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.recs{grid-template-columns:1fr}}

/* historia teaser */
.hist{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:var(--radio);overflow:hidden;background:var(--azul-osc);color:#fff;min-height:520px}
.hist .lado{position:relative;min-height:320px}
.hist .lado .ph{position:absolute;inset:0;border-radius:0;aspect-ratio:auto}
.hist .lado .ano{position:absolute;left:24px;top:24px;font-family:var(--sans);font-weight:900;font-size:clamp(48px,6vw,88px);letter-spacing:-.04em;line-height:1;color:#fff;text-shadow:0 8px 30px rgba(0,0,0,.4);z-index:3}
.hist .lado .ano small{display:block;font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;margin-top:6px;color:var(--amarillo)}
.hist .centro{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;background:var(--amarillo);color:var(--tinta);border-radius:50%;width:112px;height:112px;display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--sans);font-weight:900;font-size:11px;letter-spacing:.14em;text-transform:uppercase;line-height:1.2;padding:12px;text-decoration:none;box-shadow:0 20px 40px -14px rgba(0,0,0,.5);transition:transform .3s}
.hist .centro:hover{transform:translate(-50%,-50%) scale(1.06) rotate(-4deg)}
@media(max-width:760px){.hist{grid-template-columns:1fr}.hist .centro{display:none}}

/* representaciones */
.marcas{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px)}
.marca{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:26px 22px;display:flex;flex-direction:column;gap:14px;text-decoration:none;color:inherit;transition:transform .3s,box-shadow .3s}
.marca:hover{transform:translateY(-4px);box-shadow:var(--sombra)}
.marca .wm{height:74px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:var(--hielo);font-family:var(--sans);font-weight:900;font-size:22px;letter-spacing:.04em;text-transform:uppercase}
.marca .wm.kik{color:#b3161f;font-family:var(--serif);font-weight:700;letter-spacing:0;text-transform:none;font-style:italic}
.marca .wm.mel{color:#c8102e;font-family:var(--serif);font-weight:700;text-transform:none;letter-spacing:0}
.marca .wm.fre{color:var(--terracota)}
.marca .wm.mon{color:var(--verde)}
.marca p{font-size:14.5px;color:var(--tinta2);line-height:1.45}
.marca .lnk{margin-top:auto;font-size:11px}
@media(max-width:900px){.marcas{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.marcas{grid-template-columns:1fr}}

/* dónde comprar */
.comprar{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(20px,3vw,40px);align-items:stretch}
.comprar .ml{background:var(--amarillo);color:var(--tinta);border-radius:var(--radio);padding:clamp(26px,3.6vw,44px);display:flex;flex-direction:column;gap:16px;position:relative;overflow:hidden}
.comprar .ml::after{content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.35)}
.comprar .ml h3{font-size:clamp(24px,2.6vw,36px);max-width:12ch;position:relative}
.comprar .ml p{max-width:38ch;position:relative}
.comprar .ml .btn{align-self:flex-start;position:relative}
.comprar .retail{background:var(--hielo);border-radius:var(--radio);padding:clamp(26px,3.6vw,44px);display:flex;flex-direction:column;gap:18px}
.comprar .retail h3{font-size:22px}
.retailers{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.retailers span{background:#fff;border:1px solid var(--linea);border-radius:10px;min-height:56px;display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-weight:900;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta2);text-align:center;padding:8px}
@media(max-width:860px){.comprar{grid-template-columns:1fr}}

/* CTA final */
.cta{background:var(--azul);color:#fff;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 20%,rgba(60,77,210,.5),transparent 45%),radial-gradient(circle at 85% 80%,rgba(249,228,4,.12),transparent 40%)}
.cta-in{position:relative;display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center}
.cta h2{max-width:14ch}
.cta .acc{display:flex;gap:14px;flex-wrap:wrap;justify-self:end}
.cta .btn.ghost{color:#fff;border-color:rgba(255,255,255,.7)}
.cta .btn.ghost:hover{background:#fff;color:var(--azul);border-color:#fff}
@media(max-width:860px){.cta-in{grid-template-columns:1fr}.cta .acc{justify-self:start}}

/* ============================================================
   FOOTER
   ============================================================ */
.pie{background:var(--azul-osc);color:#c9cef5;border-top:4px solid var(--amarillo)}
.pie-in{max-width:var(--ancho);margin:0 auto;padding:clamp(44px,5vw,70px) var(--gutter) 30px;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.2fr;gap:34px}
.pie .logo img{height:46px}
.pie .firma{font-family:var(--serif);font-size:18px;line-height:1.35;color:#fff;margin-top:18px;max-width:26ch}
.pie .firma em{color:var(--amarillo);font-style:italic}
.pie h5{font-family:var(--sans);font-weight:900;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#fff;margin-bottom:14px}
.pie a{display:block;font-size:15px;color:#c9cef5;text-decoration:none;padding:3px 0;transition:color .15s}
.pie a:hover{color:#fff}
.pie .redes{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.pie .redes a{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.25);display:inline-flex;align-items:center;justify-content:center;padding:0;font-family:var(--sans);font-weight:700;font-size:11px;letter-spacing:.04em}
.pie .redes a:hover{background:#fff;color:var(--azul)}
.pie .contacto-pie{font-size:14.5px;line-height:1.6}
.pie .contacto-pie b{color:#fff;font-family:var(--sans);text-transform:uppercase;font-size:11px;letter-spacing:.14em;display:block;margin-bottom:6px}
.pie-bajo{max-width:var(--ancho);margin:0 auto;padding:18px var(--gutter) 28px;border-top:1px solid rgba(255,255,255,.14);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#8d94d0}
.pie-bajo a{color:inherit;text-decoration:none}
.pie-bajo a:hover{color:#fff}
.pie .mayorista{margin-top:16px;padding:14px 16px;border:1px dashed rgba(255,255,255,.3);border-radius:10px;font-size:14px}
.pie .mayorista a{display:inline;color:var(--amarillo);padding:0}
@media(max-width:1000px){.pie-in{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.pie-in{grid-template-columns:1fr}}

/* ============================================================
   PÁGINAS INTERIORES · componentes compartidos
   ============================================================ */
/* hero interior */
.hero-int{position:relative;background:var(--azul-osc);color:#fff;overflow:hidden;min-height:min(62vh,600px);display:flex;align-items:flex-end}
.hero-int .fondo{position:absolute;inset:0}
.hero-int .fondo img,.hero-int .fondo video{width:100%;height:100%;object-fit:cover;opacity:.55}
.hero-int .fondo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,9,76,.2),rgba(0,9,76,.85))}
.hero-int .fondo.pend{background:radial-gradient(circle at 70% 30%,var(--azul-med),var(--azul-osc) 70%)}
.hero-int .fondo.pend::before{content:"Foto · " attr(data-foto);position:absolute;right:var(--gutter);top:22px;font:italic 500 10.5px/1.4 var(--cuerpo);letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,.92);color:var(--tinta2);padding:8px 11px;border-radius:6px;z-index:3;max-width:360px}
.hero-int .fondo.fuente-nueva::before{content:"Sesión nueva · " attr(data-foto)}
.hero-int .fondo.fuente-archivo::before{content:"Archivo Traverso · " attr(data-foto)}
.hero-int .fondo.fuente-catalogo::before{content:"Packshots oficiales · " attr(data-foto)}
.hero-int .fondo.fuente-marca::before{content:"Material oficial de marca · " attr(data-foto)}
.hero-int .fondo.fam{background:linear-gradient(120deg,var(--fam-osc),var(--fam))}
.hero-int-in{position:relative;z-index:2;max-width:var(--ancho);margin:0 auto;padding:clamp(60px,10vw,120px) var(--gutter) clamp(40px,5vw,64px);width:100%}
.hero-int h1{max-width:12ch}
.hero-int .lead{color:#d6d9f4;margin-top:22px}
.hero-int .miga{font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#c9cef5;margin-bottom:24px;display:flex;gap:10px;flex-wrap:wrap}
.hero-int .miga a{text-decoration:none;color:inherit}
.hero-int .miga a:hover{color:#fff}
.hero-int .miga span::before{content:"→";margin-right:10px;color:var(--amarillo)}
.hero-int.claro{background:var(--hielo);color:var(--tinta);min-height:0}
.hero-int.claro .lead{color:var(--tinta2)}
.hero-int.claro .miga{color:var(--gris)}
.hero-int.claro .miga a:hover{color:var(--tinta)}
.hero-int.fam-bg{background:var(--fam);color:#fff}
.hero-int .bots-hero{position:absolute;right:var(--gutter);bottom:0;display:flex;align-items:flex-end;gap:10px;z-index:2}
.hero-int .bots-hero .bot{--c:#fff;--h:200px}
.hero-int .bots-hero .bot .cuerpo,.hero-int .bots-hero .bot .cuello{background:linear-gradient(90deg,rgba(255,255,255,.6),rgba(255,255,255,.98) 45%,rgba(255,255,255,.75))}
.hero-int .bots-hero .bot .nom{color:var(--fam)}
@media(max-width:900px){.hero-int .bots-hero{display:none}}

/* subnav de sección (Nosotros) */
.subnav{position:sticky;top:var(--topbar);z-index:150;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.subnav-in{max-width:var(--ancho);margin:0 auto;padding:0 var(--gutter);display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.subnav-in::-webkit-scrollbar{display:none}
.subnav a{flex:none;font-family:var(--sans);font-weight:700;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--tinta2);padding:16px 14px;border-bottom:3px solid transparent;transition:color .2s,border-color .2s}
.subnav a:hover{color:var(--tinta)}
.subnav a.on{color:var(--azul);border-color:var(--amarillo)}

/* bloque texto + imagen alternado */
.dos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:center}
.dos.inv>.ph{order:-1}
.dos h2{margin-top:16px}
.dos .txt{margin-top:20px}
@media(max-width:860px){.dos{grid-template-columns:1fr}.dos.inv>.ph{order:0}}

/* pilares (Nosotros hub) */
.pilares{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px)}
.pilar{display:flex;flex-direction:column;gap:14px;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:16px;transition:transform .3s,box-shadow .3s}
.pilar:hover{transform:translateY(-5px);box-shadow:var(--sombra)}
.pilar .ph{aspect-ratio:4/3}
.pilar .n{font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--azul-med)}
.pilar h3{font-size:20px}
.pilar p{font-size:14.5px;color:var(--tinta2);line-height:1.45}
.pilar .lnk{margin-top:auto;font-size:11px;align-self:flex-start}
@media(max-width:980px){.pilares{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.pilares{grid-template-columns:1fr}}

/* valores */
.valores{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,24px)}
.valor{background:#fff;border-radius:var(--radio);padding:clamp(24px,3vw,40px);border-top:6px solid var(--fam);display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden}
.valor .num{font-family:var(--sans);font-weight:900;font-size:64px;line-height:1;letter-spacing:-.04em;color:var(--hielo);position:absolute;right:20px;top:14px}
.valor h3{font-size:clamp(22px,2.2vw,30px);max-width:12ch;position:relative}
.valor p{color:var(--tinta2);position:relative}
.valor:nth-child(1){--fam:var(--azul)}.valor:nth-child(2){--fam:var(--carmin)}.valor:nth-child(3){--fam:var(--terracota)}.valor:nth-child(4){--fam:var(--verde)}
@media(max-width:700px){.valores{grid-template-columns:1fr}}

/* visión / misión */
.vm{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,24px)}
.vm .caja{background:var(--azul);color:#fff;border-radius:var(--radio);padding:clamp(26px,3.6vw,48px);display:flex;flex-direction:column;gap:18px;position:relative;overflow:hidden}
.vm .caja:nth-child(2){background:var(--azul-osc)}
.vm .caja::after{content:"";position:absolute;right:-40px;bottom:-40px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.06)}
.vm .caja p{font-family:var(--serif);font-size:clamp(18px,1.7vw,23px);line-height:1.4;color:#e6e8fa}
@media(max-width:760px){.vm{grid-template-columns:1fr}}

/* timeline · la línea de tiempo de los 130 años */
.tl{position:relative;max-width:1040px;margin:0 auto;padding:20px 0 40px}
.tl::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--linea);transform:translateX(-50%)}
.tl .progreso{position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--azul);transform:translateX(-50%) scaleY(0);transform-origin:top}
.hito{position:relative;display:grid;grid-template-columns:1fr 80px 1fr;gap:0 24px;align-items:center;padding:clamp(28px,4vw,56px) 0}
.hito .punto{grid-column:2;justify-self:center;width:18px;height:18px;border-radius:50%;background:#fff;border:4px solid var(--azul);position:relative;z-index:2}
.hito.destacado .punto{background:var(--amarillo);border-color:var(--azul)}
.hito .ano{font-family:var(--sans);font-weight:900;font-size:clamp(54px,8vw,120px);line-height:.9;letter-spacing:-.05em;color:var(--azul);grid-column:1;text-align:right}
.hito .ano small{display:block;font-size:.2em;letter-spacing:.1em;font-stretch:100%;color:var(--azul-med);margin-top:10px;font-family:var(--cuerpo);font-style:italic;font-weight:500;font-weight:500;text-transform:uppercase}
.hito .cuerpo-h{grid-column:3;display:flex;flex-direction:column;gap:12px}
.hito .cuerpo-h h3{font-size:clamp(20px,2.2vw,28px);max-width:16ch}
.hito .cuerpo-h p{color:var(--tinta2);max-width:40ch}
.hito .cuerpo-h .ph{max-width:360px;aspect-ratio:4/3}
.hito.inv .ano{grid-column:3;text-align:left;grid-row:1}
.hito.inv .cuerpo-h{grid-column:1;grid-row:1;align-items:flex-end;text-align:right}
.hito.inv .cuerpo-h h3{max-width:16ch}
.hito.inv .punto{grid-row:1}
.tl-cierre{text-align:center;padding-top:30px}
.tl-cierre .badge{display:inline-flex;align-items:center;gap:10px;background:var(--azul);color:#fff;padding:12px 22px;border-radius:30px;font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
@media(max-width:760px){
  .tl::before,.tl .progreso{left:14px}
  .hito,.hito.inv{grid-template-columns:30px 1fr;gap:0 16px}
  .hito .punto,.hito.inv .punto{grid-column:1;grid-row:1;align-self:start;margin-top:14px}
  .hito .ano,.hito.inv .ano{grid-column:2;grid-row:1;text-align:left;font-size:54px}
  .hito .cuerpo-h,.hito.inv .cuerpo-h{grid-column:2;grid-row:2;align-items:flex-start;text-align:left;margin-top:12px}
}

/* certificaciones / procesos */
.procesos{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px)}
.proceso{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:22px;display:flex;flex-direction:column;gap:12px}
.proceso .n{font-family:var(--sans);font-weight:900;font-size:12px;color:var(--azul-med);letter-spacing:.14em}
.proceso h3{font-size:19px}
.proceso p{font-size:14.5px;color:var(--tinta2);line-height:1.45}
@media(max-width:900px){.procesos{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.procesos{grid-template-columns:1fr}}
.certs{display:flex;gap:14px;flex-wrap:wrap}
.cert{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--linea);border-radius:12px;padding:14px 18px;min-width:260px}
.cert i{width:56px;height:56px;border-radius:50%;background:var(--azul);color:#fff;display:inline-flex;align-items:center;justify-content:center;font:900 10.5px/1.1 var(--sans);letter-spacing:.04em;text-align:center;font-style:normal;flex:none;padding:6px}
.cert.pend i{background:var(--hielo);color:var(--gris);border:1px dashed var(--bruma)}
.cert b{display:block;font-family:var(--sans);font-size:13px;text-transform:uppercase;letter-spacing:.06em}
.cert span{font-size:13.5px;color:var(--tinta2)}

/* unidades de negocio */
.unidades{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,24px)}
.unidad{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;display:grid;grid-template-columns:1fr 1.2fr}
.unidad .ph{border-radius:0;aspect-ratio:auto;min-height:260px}
.unidad .cu{padding:26px;display:flex;flex-direction:column;gap:12px}
.unidad .cu h3{font-size:22px}
.unidad .cu p{font-size:14.5px;color:var(--tinta2);line-height:1.5}
.unidad .cu .lnk{margin-top:auto;align-self:flex-start;font-size:11px}
@media(max-width:1000px){.unidades{grid-template-columns:1fr}}
@media(max-width:600px){.unidad{grid-template-columns:1fr}}

/* ---------- catálogo ---------- */
.cat-portada{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px)}
.cat-otras{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px)}
.cat-card{position:relative;background:var(--fam);color:#fff;border-radius:var(--radio);padding:24px;min-height:300px;display:flex;flex-direction:column;justify-content:space-between;text-decoration:none;overflow:hidden;transition:transform .3s,box-shadow .3s}
.cat-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 10%,rgba(255,255,255,.22),transparent 45%),linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.25))}
.cat-card:hover{transform:translateY(-5px);box-shadow:var(--sombra)}
.cat-card>*{position:relative}
.cat-card .n{font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.cat-card h3{font-size:clamp(24px,2.4vw,34px);margin-top:8px}
.cat-card .lineas{font-size:14px;color:rgba(255,255,255,.85);margin-top:10px;line-height:1.45}
.cat-card .bots{display:flex;align-items:flex-end;justify-content:center;gap:6px;margin:14px 0 8px}
.cat-card .bots .bot{--c:#fff;filter:drop-shadow(0 12px 10px rgba(0,0,0,.25))}
.cat-card .bots .bot .cuerpo,.cat-card .bots .bot .cuello{background:linear-gradient(90deg,rgba(255,255,255,.55),rgba(255,255,255,.95) 45%,rgba(255,255,255,.7))}
.cat-card .bots .bot .nom{color:var(--fam)}
.cat-card .pie{display:flex;justify-content:space-between;align-items:center;font-family:var(--sans);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.cat-card.chica{min-height:220px}
.cat-card.chica h3{font-size:22px}
.cat-card.marca-rep{background:#fff;color:var(--tinta);border:1px solid var(--linea)}
.cat-card.marca-rep::before{display:none}
.cat-card.marca-rep .n{color:var(--gris)}
.cat-card.marca-rep .wm{height:80px;display:flex;align-items:center;justify-content:center;background:var(--hielo);border-radius:10px;font-family:var(--sans);font-weight:900;font-size:22px;text-transform:uppercase;letter-spacing:.04em}
@media(max-width:900px){.cat-portada{grid-template-columns:1fr}.cat-otras{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.cat-otras{grid-template-columns:1fr}}

.linea-h{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:clamp(40px,5vw,64px) 0 22px;padding-top:22px;border-top:2px solid var(--tinta)}
.linea-h:first-child{margin-top:0}
.linea-h h2{font-size:clamp(24px,3vw,38px)}
.linea-h p{color:var(--tinta2);max-width:60ch;width:100%}
.linea-h .cnt{font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.filtros{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.filtros button,.filtros a{font-family:var(--sans);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:10px 16px;border-radius:24px;border:1px solid var(--linea);background:#fff;color:var(--tinta2);text-decoration:none;transition:all .2s}
.filtros button:hover,.filtros a:hover{border-color:var(--azul)}
.filtros button.on,.filtros a.on{background:var(--azul);border-color:var(--azul);color:#fff}

.tabla{width:100%;border-collapse:collapse;font-size:14.5px}
.tabla th,.tabla td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--linea);vertical-align:top}
.tabla th{font-family:var(--sans);font-weight:700;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}

/* mundo vintage · retro contenido dentro de la gama Traverso */
.vintage{--fam:var(--carmin);--fam-osc:var(--carmin-osc);--fam-tinte:#f6e7e3}
.vintage .hero-int{background:var(--azul-osc)}
.vintage .hero-int .fondo.fam{background:linear-gradient(120deg,var(--azul-osc),var(--azul));}
.damero-v{height:18px;background:repeating-linear-gradient(90deg,var(--azul) 0 18px,#fff 18px 36px)}
.vint-claim{font-family:var(--serif);font-style:italic;font-size:clamp(26px,3.4vw,46px);line-height:1.15;color:var(--carmin);max-width:18ch}
.vint-carta{background:#fff;border:2px solid var(--azul);border-radius:var(--radio);padding:clamp(22px,3vw,36px);position:relative}
.vint-carta::before{content:"";position:absolute;inset:8px;border:1px dashed var(--bruma);border-radius:10px;pointer-events:none}
.vint-carta h3{font-size:22px;text-align:center;margin-bottom:18px}
.vint-carta ul li{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px dotted var(--linea);font-size:16px}
.vint-carta ul li span{font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:11px;letter-spacing:.06em;color:var(--gris)}

/* ---------- recetas ---------- */
.receta-hero{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,60px);align-items:center}
.receta-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px}
.receta-meta div{background:var(--hielo);border-radius:10px;padding:14px}
.receta-meta b{display:block;font-family:var(--sans);font-size:18px;text-transform:uppercase;letter-spacing:-.01em}
.receta-meta span{font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.receta-cuerpo{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,80px);align-items:start}
.ingredientes{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:24px;position:sticky;top:calc(var(--topbar) + 20px)}
.ingredientes li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dotted var(--linea);font-size:15.5px}
.ingredientes li span{font-family:var(--mono);font-size:11px;color:var(--gris);white-space:nowrap}
.ingredientes li.tr{color:var(--azul);font-weight:600}
.pasos{counter-reset:paso;display:flex;flex-direction:column;gap:22px}
.pasos li{counter-increment:paso;display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:start}
.pasos li::before{content:counter(paso,decimal-leading-zero);font-family:var(--sans);font-weight:900;font-size:26px;color:var(--azul);letter-spacing:-.03em;line-height:1}
.pasos li p{color:var(--tinta2)}
.usados{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:900px){.receta-hero,.receta-cuerpo{grid-template-columns:1fr}.ingredientes{position:static}}
@media(max-width:600px){.usados{grid-template-columns:1fr}}

/* ---------- contacto: el bloque v1 (.router, .form) se retiró el 15-09-2026; la página vive en el bloque CONTACTO al final ---------- */

/* ============================================================
   MARQUESINA · el sello "Desde 1896 en la mesa de Chile"
   ============================================================ */
.marq{overflow:hidden;background:var(--amarillo);color:var(--tinta);padding:12px 0;border-top:1px solid rgba(0,0,0,.06);border-bottom:1px solid rgba(0,0,0,.06)}
.marq-in{display:flex;gap:0;white-space:nowrap;width:max-content}
.marq span{font-family:var(--sans);font-weight:900;font-size:13px;letter-spacing:.2em;text-transform:uppercase;padding:0 28px;display:inline-flex;align-items:center;gap:28px}
.marq span::after{content:"";width:9px;height:9px;background:var(--azul);transform:rotate(45deg)}
.marq.azul{background:var(--azul);color:#fff}
.marq.azul span::after{background:var(--amarillo)}

/* ============================================================
   UTILIDADES · animación
   ============================================================ */
[data-reveal]{opacity:0}
.no-js [data-reveal],.reduced [data-reveal]{opacity:1}
.nota-proto{position:fixed;left:14px;bottom:14px;z-index:300;background:var(--tinta);color:#fff;font:500 10.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:8px 12px;border-radius:8px;opacity:.85;pointer-events:none}
@media(max-width:700px){.nota-proto{display:none}}
@media(prefers-reduced-motion:reduce){[data-reveal]{opacity:1}*{animation:none!important;transition:none!important}}

/* ============================================================
   PACKSHOTS REALES (fotos de la tienda actual, banda recortada)
   ============================================================ */
.hero-stage{background:#fff}
.hero-stage .escena{display:flex;align-items:center;justify-content:center;width:100%;height:100%;position:relative;z-index:1}
.hero-stage .escena img.packshot{height:min(58vh,520px);max-width:88%;width:auto;object-fit:contain;filter:drop-shadow(0 30px 30px rgba(0,9,76,.18))}
.hero-thumbs .thumb img{height:64px;width:auto}
.prod .escena.foto{background:#fff;border:1px solid var(--hielo)}
.prod .escena.foto img{height:200px;width:auto;max-width:90%;object-fit:contain;transition:transform .35s}
.prod:hover .escena.foto img{transform:translateY(-6px) rotate(-2deg)}
.prod .fmts{font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:10.5px;letter-spacing:.06em;color:var(--gris);margin-top:auto;padding-top:8px;border-top:1px dashed var(--linea)}
.fam-card .bots img,.cat-card .bots img{width:calc(33.333% - 6px);height:auto;aspect-ratio:1;object-fit:contain;background:#fff;border-radius:10px;padding:6px;box-shadow:0 12px 24px -12px rgba(0,0,0,.35)}
.cat-card.chica .bots img{width:calc(50% - 6px)}
.hero-int .bots-hero .card-img{background:#fff;border-radius:14px 14px 0 0;padding:14px 14px 0;display:block}
.hero-int .bots-hero .card-img img{height:180px;width:auto}
.miga{font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);display:flex;gap:10px;flex-wrap:wrap}
.miga a{text-decoration:none;color:inherit}.miga a:hover{color:var(--tinta)}
.miga span::before{content:"→";margin-right:10px;color:var(--amarillo)}
.ph.pend.fuente-gastro::after{content:"Material gastronómico · " attr(data-foto)}
.mesa .fila img{height:150px;width:auto;background:#fff;border-radius:10px;padding:8px;box-shadow:0 18px 30px -12px rgba(0,0,0,.5)}
.mesa .fila img:nth-child(2n){height:175px}
.mega .promo-img{position:absolute;right:8px;bottom:4px;width:120px;height:auto;transform:rotate(-8deg)}
@media(max-width:600px){.variantes{grid-template-columns:1fr 1fr}}

/* ============================================================
   PROPUESTA B · declaración tipográfica + góndola + índice editorial
   ============================================================ */
.hero-b{background:var(--hielo-2);position:relative;overflow:hidden;border-bottom:1px solid var(--linea)}
.hero-b-in{display:grid;grid-template-columns:1.4fr .6fr;gap:40px;align-items:end;padding-top:clamp(48px,7vw,96px);padding-bottom:clamp(30px,4vw,56px)}
.hero-b h1{font-size:clamp(44px,7.6vw,110px);max-width:11ch;margin-top:22px}
.hero-b h1 em{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:0;color:var(--azul-med)}
.hero-b .lead{margin-top:24px;max-width:560px}
.hero-b .hero-links{margin-top:30px;display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.hero-b-sello{justify-self:end;text-align:center;width:180px;height:180px;border-radius:50%;background:var(--azul);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;box-shadow:var(--sombra);position:relative}
.hero-b-sello::after{content:"";position:absolute;inset:10px;border:1px dashed rgba(255,255,255,.4);border-radius:50%}
.hero-b-sello b{font-family:var(--sans);font-weight:900;font-size:64px;line-height:.9;letter-spacing:-.04em}
.hero-b-sello b small{font-size:.35em;color:var(--amarillo);letter-spacing:0}
.hero-b-sello span{font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;max-width:110px;line-height:1.4;color:#c9cef5}
.gondola{position:relative;padding:20px 0 0;overflow:hidden}
.gond-in{display:flex;align-items:flex-end;gap:clamp(18px,3vw,44px);width:max-content;padding:0 var(--gutter) 26px}
.gond-item{display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;color:var(--tinta2);flex:none;transition:transform .3s}
.gond-item img{height:clamp(120px,16vw,200px);width:auto;filter:drop-shadow(0 16px 14px rgba(0,9,76,.18))}
.gond-item span{font-family:var(--sans);font-weight:700;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.gond-item:hover{transform:translateY(-8px)}
.gondola .repisa{height:10px;background:var(--azul);box-shadow:0 10px 30px -10px rgba(0,14,120,.5);position:relative}
.gondola .repisa::before{content:"";position:absolute;left:0;right:0;top:-3px;height:3px;background:var(--amarillo)}
@media(max-width:860px){.hero-b-in{grid-template-columns:1fr}.hero-b-sello{justify-self:start;width:140px;height:140px}.hero-b-sello b{font-size:48px}}

.fam-lista{border-top:2px solid var(--tinta)}
.fam-fila{display:grid;grid-template-columns:70px 1.1fr 1.2fr auto 50px;align-items:center;gap:24px;padding:22px 10px;border-bottom:1px solid var(--linea);text-decoration:none;color:inherit;transition:background .3s,padding .3s;position:relative}
.fam-fila:hover{background:var(--fam-tinte);padding-left:22px}
.fam-fila .num{font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:12px;letter-spacing:.1em;color:var(--fam)}
.fam-fila h3{font-size:clamp(24px,3.4vw,44px);color:var(--tinta);transition:color .3s}
.fam-fila:hover h3{color:var(--fam)}
.fam-fila p{font-size:15px;color:var(--tinta2);line-height:1.4}
.fam-fila .pk{display:flex;gap:8px;align-items:flex-end;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
.fam-fila .pk img{height:74px;width:auto}
.fam-fila:hover .pk{opacity:1;transform:none}
.fam-fila i{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--tinta);display:inline-flex;align-items:center;justify-content:center;font-style:normal;justify-self:end;transition:background .3s,color .3s,border-color .3s}
.fam-fila:hover i{background:var(--fam);border-color:var(--fam);color:#fff}
@media(max-width:860px){.fam-fila{grid-template-columns:40px 1fr 40px}.fam-fila p,.fam-fila .pk{display:none}}

.mesa-b{background:var(--azul-osc);color:#fff;position:relative;overflow:hidden}
.mesa-b-in{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,80px);align-items:center;padding:clamp(56px,8vw,110px) 0}
.mesa-b .cita{font-family:var(--serif);font-size:clamp(30px,4vw,56px);line-height:1.1;max-width:16ch}
.mesa-b .cita em{font-style:italic;color:var(--amarillo)}
.mesa-b .claves{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.mesa-b .claves span{font-family:var(--sans);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:9px 14px;border:1px solid rgba(255,255,255,.35);border-radius:20px}
.mesa-b .ph{aspect-ratio:4/5}
.mesa-b .ph.pend{background:radial-gradient(circle at 30% 30%,#1b2bb7,var(--azul) 70%)}
.mesa-b.caja{border-radius:var(--radio)}
.mesa-b.caja .mesa-b-in{padding:clamp(36px,5vw,72px) clamp(24px,4vw,64px)}
.mesa-b .ph.pend::after{background:rgba(255,255,255,.94)}
@media(max-width:860px){.mesa-b-in{grid-template-columns:1fr}}

.vitrina{background:#fff;border:2px solid var(--azul);border-radius:var(--radio);padding:clamp(24px,3.5vw,44px);position:relative;overflow:hidden}
.vitrina .damero-v{position:absolute;left:0;right:0;top:0}
.vitrina-h{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:end;margin-top:12px}
.vitrina .claim{font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.6vw,34px);color:var(--carmin);line-height:1.15;max-width:18ch;margin-top:10px}
.vitrina .fila-v{display:flex;gap:clamp(10px,2vw,28px);justify-content:space-between;align-items:flex-end;margin-top:30px;overflow-x:auto;scrollbar-width:none;padding-bottom:8px}
.vitrina .fila-v a{flex:none;text-align:center;text-decoration:none;color:var(--tinta2);font-family:var(--sans);font-weight:700;font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.vitrina .fila-v img{height:clamp(110px,14vw,180px);width:auto;display:block;margin:0 auto 8px;filter:drop-shadow(0 12px 12px rgba(0,9,76,.15));transition:transform .3s}
.vitrina .fila-v a:hover img{transform:translateY(-6px) rotate(-2deg)}
@media(max-width:700px){.vitrina-h{grid-template-columns:1fr}}

.tl-mini{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative;margin-top:30px}
.tl-mini::before{content:"";position:absolute;left:0;right:0;top:9px;height:2px;background:var(--linea)}
.tl-mini div{position:relative;padding:32px 18px 0 0}
.tl-mini div::before{content:"";position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;background:#fff;border:4px solid var(--azul)}
.tl-mini div:last-child::before{background:var(--amarillo)}
.tl-mini b{display:block;font-family:var(--sans);font-weight:900;font-size:clamp(26px,3vw,40px);letter-spacing:-.03em;line-height:1;color:var(--azul)}
.tl-mini span{display:block;font-size:14.5px;color:var(--tinta2);margin-top:8px;line-height:1.4;max-width:22ch}
@media(max-width:860px){.tl-mini{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.tl-mini{grid-template-columns:1fr}}

.logos-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.logos-strip a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:26px 18px;text-decoration:none;color:var(--tinta2);font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;transition:transform .3s,box-shadow .3s}
.logos-strip a:hover{transform:translateY(-4px);box-shadow:var(--sombra)}
.logos-strip .wm{font-family:var(--sans);font-weight:900;font-size:24px;letter-spacing:.04em;text-transform:uppercase}
@media(max-width:700px){.logos-strip{grid-template-columns:1fr 1fr}}

.switch-prop{position:fixed;right:14px;bottom:14px;z-index:300;display:flex;gap:4px;background:var(--tinta);padding:5px;border-radius:30px;box-shadow:0 10px 30px -10px rgba(0,0,0,.5)}
.switch-prop a{font-family:var(--sans);font-weight:700;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#c9cef5;text-decoration:none;padding:8px 14px;border-radius:20px}
.switch-prop a.on{background:var(--amarillo);color:var(--tinta)}

/* mega menú · base del desplegable (posición y apertura) */
.mega{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--linea);box-shadow:0 30px 60px -30px rgba(0,14,120,.35);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .22s,transform .22s,visibility .22s;z-index:5}
.topbar.mega-on .mega{opacity:1;visibility:visible;transform:none}
.mega-in{max-width:var(--ancho);margin:0 auto;padding:30px var(--gutter) 22px;display:grid}
.mega h5{font-family:var(--sans);font-weight:700;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:12px;padding-bottom:10px;border-bottom:2px solid var(--amarillo)}

/* ============================================================
   HEADER v2 · barra 16: logo · navegación centrada · International, buscar, comprar
   ============================================================ */
.topbar-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:80px;gap:18px}
.logo img{height:44px}
.nav{margin:0;gap:8px}
.nav>li>a{font-size:11.5px;letter-spacing:.16em;color:var(--tinta2);padding:10px 14px;border-radius:0}
.nav>li>a:hover,.nav>li.on>a{background:transparent;color:var(--azul)}
.nav>li.on>a{box-shadow:none;font-weight:800;color:var(--tinta)}
/* Catálogo abierto: pestaña blanca con la letra azul, del color del mega que cuelga debajo (Axel, 29-10-2026: "al
   hacer hover blanco, no azul"; el fondo azul no hacía falta y sobre la barra transparente del inicio se veía raro) */
.nav>li.abre>a{background:#fff;color:var(--azul);border-radius:6px 6px 0 0}
body.home .topbar:not(.pegado):not(.abierto) .nav>li.abre>a{color:var(--azul);text-shadow:none}
.nav>li.abre>a .fl{transform:rotate(180deg)}
.acciones{justify-self:end;gap:12px}
.acciones .intl{font-family:var(--sans);font-weight:700;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta2);text-decoration:none;margin-right:4px;white-space:nowrap}
.acciones .intl:hover{color:var(--azul)}
.acciones .btn.ghost.sm{border-color:var(--azul);padding:8px 14px;letter-spacing:.14em}
.nav .solo-movil{display:none}

/* ============================================================
   MEGA MENÚ v2 · índice con vista previa editorial (Lab 01b · 3B)
   ============================================================ */
.mega .puerta{display:flex;flex-direction:column;justify-content:space-between;gap:8px;border-radius:12px;padding:16px;text-decoration:none;color:#fff;background:var(--azul);min-height:0;position:relative;overflow:hidden}
/* === V3 base (pulida) ==================================================== */
.mega-v3 .mega-in{grid-template-columns:.95fr 1.9fr 236px;gap:0;padding:0 var(--gutter)}
.v3-lista{border-right:1px solid var(--linea);padding:20px 26px 20px 0}
.v3-lista li a{display:grid;grid-template-columns:34px 1fr 24px;align-items:center;gap:10px;padding:11px 10px;border-radius:8px;text-decoration:none;color:var(--tinta);font-family:var(--sans);font-weight:700;font-size:17px;letter-spacing:.01em;text-transform:uppercase;line-height:1;transition:background .15s,color .15s;border-left:3px solid transparent}
.v3-lista li a .num{font-family:var(--cuerpo);font-style:italic;font-weight:500;font-weight:500;font-size:10.5px;letter-spacing:.12em;color:var(--gris)}
.v3-lista li a i{font-style:normal;opacity:0;transition:opacity .15s,transform .15s;transform:translateX(-4px);color:var(--fam)}
.v3-lista li.on a,.v3-lista li a:hover{background:var(--fam-tinte);color:var(--fam);border-left-color:var(--fam)}
.v3-lista li.on a i,.v3-lista li a:hover i{opacity:1;transform:none}
.v3-lista li.sep{height:1px;background:var(--linea);margin:10px 10px}
.v3-preview{padding:26px 32px;position:relative;min-height:420px}
.p3{display:none}.p3.on{display:grid}
.p3 h4{font-size:clamp(22px,2vw,30px);letter-spacing:-.01em;color:var(--fam)}
.p3 small{display:block;font-family:var(--cuerpo);font-style:italic;font-weight:500;font-weight:500;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);margin-bottom:8px}
.p3 p{font-size:14.5px;color:var(--tinta2);margin-top:10px;line-height:1.5}
.p3 .lnk{font-size:11px;color:var(--fam)}
.v3-puertas{display:grid;grid-template-rows:auto auto auto;gap:10px;padding:20px 0 20px 26px;border-left:1px solid var(--linea);align-content:start}
.mega .puerta{display:flex;flex-direction:column;justify-content:space-between;gap:8px;border-radius:12px;padding:16px;text-decoration:none;color:#fff;background:var(--azul);min-height:0;position:relative;overflow:hidden}
.mega .puerta b{font-family:var(--sans);font-weight:700;font-size:16px;line-height:1.05;text-transform:uppercase;max-width:12ch}
.mega .puerta small{font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#c9cef5;line-height:1.4;max-width:62%}
.mega .puerta.vint{background:var(--carmin)}.mega .puerta.vint small{color:#ffd9df}
.mega .puerta.rec{background:var(--verde)}.mega .puerta.rec small{color:#cfe9dc}
.mega .puerta img{position:absolute;right:2px;bottom:0;height:78px;width:auto;transform:rotate(-8deg);filter:drop-shadow(0 8px 10px rgba(0,0,0,.25))}
.mega-v3 .mega-pie{max-width:var(--ancho);margin:0 auto;padding:14px var(--gutter) 22px;border-top:1px solid var(--linea);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.mega .pills{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.mega .pills span{font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);margin-right:6px}
.mega .pills a{font-family:var(--sans);font-weight:700;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:9px 14px;border:1px solid var(--linea);border-radius:20px;text-decoration:none;color:var(--tinta);background:#fff;transition:background .2s,color .2s,border-color .2s}
.mega .pills a:hover{background:var(--azul);color:#fff;border-color:var(--azul)}
.mega .pie-links{display:flex;gap:18px}
.mega .pie-links a{font-family:var(--sans);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--azul);text-decoration:none;padding:0}
/* === 3A · vitrina de productos ========================================== */
.p3a.on{display:block}
.p3-h{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:16px}
.p3a-gondola{display:flex;justify-content:space-around;align-items:flex-end;gap:14px;padding:10px 10px 0}
.p3a-gondola a{display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;color:var(--tinta2);font-family:var(--sans);font-weight:700;font-size:10px;letter-spacing:.08em;text-transform:uppercase;text-align:center;max-width:130px;transition:transform .25s}
.p3a-gondola a:hover{transform:translateY(-5px)}
.p3a-gondola img{height:118px;width:auto;background:#fff;border:1px solid var(--linea);border-bottom:0;border-radius:10px 10px 0 0;padding:8px 10px 0}
.p3a-repisa{height:8px;background:var(--fam);position:relative;border-radius:2px;margin-bottom:16px}
.p3a-repisa::before{content:"";position:absolute;left:0;right:0;top:-3px;height:3px;background:var(--amarillo)}
.p3a .chips a{font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:10.5px;letter-spacing:.04em;padding:6px 11px;border:1px solid var(--linea);border-radius:20px;color:var(--tinta2);text-decoration:none;background:#fff;display:inline-flex;gap:6px;align-items:center}
.p3a .chips a em{font-style:normal;color:var(--fam);font-weight:500}
.p3a .chips a:hover{border-color:var(--fam);color:var(--fam)}
/* === 3B · panel editorial =============================================== */
.p3b.on{grid-template-columns:1fr 1fr;gap:28px;align-items:stretch}
.p3b-arte{position:relative;background:linear-gradient(150deg,var(--fam-tinte),#fff 70%);border:1px solid var(--linea);border-radius:14px;min-height:300px;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;gap:14px;padding:70px 20px 32px}
.p3b-arte .marca{position:absolute;left:14px;top:2px;font-family:var(--sans);font-weight:900;font-size:120px;letter-spacing:-.06em;color:var(--fam);opacity:.10;line-height:1}
.p3b-arte img{position:relative;z-index:1;height:172px;width:auto;background:#fff;border:1px solid var(--linea);border-radius:10px;padding:8px;box-shadow:0 18px 30px -16px rgba(0,9,76,.3)}
.p3b-arte img.a1{height:150px}
.p3b-txt{display:flex;flex-direction:column;justify-content:center}
.p3b-lineas{margin-top:14px;border-top:1px solid var(--linea)}
.p3b-lineas li a{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px solid var(--linea);font-family:var(--sans);font-weight:700;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta);text-decoration:none}
.p3b-lineas li a i{font-style:normal;color:var(--fam);transition:transform .15s}
.p3b-lineas li a:hover{color:var(--fam)}.p3b-lineas li a:hover i{transform:translateX(4px)}
.p3b .lnk{margin-top:16px;align-self:flex-start}
.mega .pie-links a{padding:0}
.p3b-arte img{position:relative}
@media(max-width:1180px){.mega-v3 .mega-in{grid-template-columns:.9fr 1.7fr 210px}.p3b.on{grid-template-columns:1fr}.p3b-arte{min-height:220px}.p3b-arte img{height:120px}}

/* ============================================================
   MENÚ MÓVIL v2 · catálogo como acordeón (Lab 01b · móvil)
   ============================================================ */
.mv-catalogo{display:none}
.mv-catalogo{padding:6px 0 10px;border-bottom:1px solid var(--linea)}
.mv-fam{border-bottom:1px solid var(--hielo)}
.mv-fam summary{list-style:none;display:grid;grid-template-columns:30px 1fr 22px;align-items:center;gap:10px;padding:13px 4px;cursor:pointer;font-family:var(--sans);font-weight:700;font-size:15px;letter-spacing:.02em;text-transform:uppercase;color:var(--tinta);border-left:3px solid transparent}
.mv-fam summary::-webkit-details-marker{display:none}
.mv-fam summary .num{font-family:var(--cuerpo);font-style:italic;font-weight:500;font-weight:500;font-size:10px;letter-spacing:.12em;color:var(--gris)}
.mv-fam summary i{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--linea);position:relative}
.mv-fam summary i::before,.mv-fam summary i::after{content:"";position:absolute;left:5px;right:5px;top:9px;height:1.5px;background:var(--tinta)}
.mv-fam summary i::after{transform:rotate(90deg);transition:transform .2s}
.mv-fam[open] summary{color:var(--fam);border-left-color:var(--fam);background:var(--fam-tinte);border-radius:0 8px 8px 0}
.mv-fam[open] summary i{border-color:var(--fam)}
.mv-fam[open] summary i::after{transform:rotate(0)}
.mv-cuerpo{padding:12px 4px 18px 8px}
.mv-lineas{display:flex;flex-wrap:wrap;gap:8px}
.mv-linea{font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:11px;padding:7px 11px;border:1px solid var(--linea);border-radius:20px;color:var(--tinta2);text-decoration:none;background:#fff}
.mv-linea em{font-style:normal;color:var(--fam);font-weight:500}
.mv-tira{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;margin:14px -18px 0 -8px;padding:6px 18px 10px 8px;border-bottom:6px solid var(--fam)}
.mv-tira::-webkit-scrollbar{display:none}
.mv-tira a{flex:none;width:104px;text-decoration:none;text-align:center;font-family:var(--sans);font-weight:700;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta2)}
.mv-tira img{height:88px;width:auto;margin:0 auto 6px;background:#fff;border:1px solid var(--linea);border-bottom:0;border-radius:8px 8px 0 0;padding:6px 8px 0;display:block}
.mv-cuerpo .lnk{margin-top:14px;font-size:10.5px;color:var(--fam)}
.mv-puertas{display:grid;gap:10px;padding:18px 0 6px}
.mv-puertas .puerta{display:flex;flex-direction:column;gap:6px;border-radius:12px;padding:16px;text-decoration:none;color:#fff;background:var(--azul);position:relative;overflow:hidden;min-height:84px;justify-content:center}
.mv-puertas .puerta b{font-family:var(--sans);font-weight:700;font-size:16px;text-transform:uppercase;line-height:1.05}
.mv-puertas .puerta small{font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#c9cef5;max-width:62%;line-height:1.4}
.mv-puertas .puerta.vint{background:var(--carmin)}.mv-puertas .puerta.vint small{color:#ffd9df}
.mv-puertas .puerta.rec{background:var(--verde)}.mv-puertas .puerta.rec small{color:#cfe9dc}
.mv-puertas .puerta img{position:absolute;right:4px;bottom:-4px;height:84px;width:auto;transform:rotate(-8deg)}
@media(max-width:1200px){
  .topbar-in{display:flex;justify-content:space-between;height:var(--topbar)}
  .logo img{height:38px}
  .acciones .intl,.acciones .btn.ghost.sm{display:none}
  .nav .solo-movil{display:block}
  .nav .solo-movil .btn-movil{display:inline-flex;margin-top:18px;justify-content:center;border-color:var(--azul)}
  .topbar.abierto .nav>li>a{border-radius:0;padding:16px 4px;font-size:16px;border-bottom:1px solid var(--linea);display:flex;justify-content:space-between;color:var(--tinta);box-shadow:none;background:transparent}
  .topbar.abierto .nav>li.abre>a{color:var(--azul);background:transparent}
  .mega{display:none!important}
  .topbar.abierto{backdrop-filter:none;-webkit-backdrop-filter:none}
  .topbar.abierto .nav{top:var(--topbar);height:calc(100vh - var(--topbar));height:calc(100dvh - var(--topbar))}
  .nav>li.abre .mv-catalogo{display:block;padding:6px 0 10px;border-bottom:1px solid var(--linea)}
  .mv-puertas .puerta{color:#fff}
}

/* ============================================================
   CATÁLOGO · corte de afiche
   Mosaico de doce columnas cortado a sangre por los afiches de las
   tres marcas con identidad propia. Migrado del lab 06b, propuesta 6.
   ============================================================ */
/* ============================================================
   COMÚN
   ============================================================ */
/* tira de envases que desfila sola · cada producto con su formato más grande */
.tira{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.tira .riel{display:flex;align-items:flex-end;gap:clamp(14px,2vw,32px);width:max-content;animation:desfile var(--dur,50s) linear infinite}
.tira:hover .riel{animation-play-state:paused}
.tira.quieta .riel{animation:none;width:100%;justify-content:center}
.tira.izq .riel{animation-direction:reverse}
@keyframes desfile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .tira .riel{animation:none}
}
.env{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:inherit}
.env img{width:auto;object-fit:contain;object-position:bottom;transition:transform .25s}
.env:hover img{transform:translateY(-5px)}
.env b{font-family:var(--sans);font-weight:700;font-size:9px;letter-spacing:.07em;text-transform:uppercase;text-align:center;max-width:12ch;line-height:1.15;color:var(--tinta2)}
.env em{font:italic 500 8px/1 var(--cuerpo);letter-spacing:.1em;color:var(--gris)}
/* pauta de imagen del cuestionario */
.pauta{font:italic 500 9.5px/1.5 var(--cuerpo);letter-spacing:.04em;color:var(--gris);display:flex;gap:7px;align-items:flex-start;margin-top:9px}
.pauta::before{content:"◇";color:var(--amarillo);flex:none}
/* ============================================================
   AFICHE DE MARCA · la pieza que comparten las propuestas 6, 7 y 8.
   Solo lo reciben Kikkoman, Vintage y Melitta: son las tres marcas con
   identidad gráfica propia. El resto va como baldosa del mosaico.
   ============================================================ */
.afi{position:relative;background:var(--m-fondo);color:var(--m-texto);overflow:hidden;text-decoration:none;
  display:grid;grid-template-columns:.88fr 1.12fr;align-items:center;min-height:clamp(310px,40vh,430px)}
.afi .afi-txt{padding:clamp(26px,3.2vw,48px) clamp(24px,4vw,52px);position:relative;z-index:2}
.afi .afi-tipo{font:italic 500 10px/1 var(--cuerpo);letter-spacing:.2em;text-transform:uppercase;color:var(--m-acento)}
.afi h2{font-family:var(--sans);font-weight:900;text-transform:uppercase;font-size:clamp(36px,5vw,80px);
  line-height:.88;letter-spacing:-.02em;margin-top:12px;color:var(--m-texto)}
.afi p{font-size:15.5px;line-height:1.5;margin-top:13px;max-width:40ch;opacity:.85}
.afi .afi-meta{font:italic 500 10px/1 var(--cuerpo);letter-spacing:.1em;text-transform:uppercase;margin-top:15px;opacity:.6;display:block}
.afi .btn{margin-top:22px;background:var(--m-acento);border-color:var(--m-acento);color:#111}
.afi .afi-arte{position:relative;z-index:2;padding:clamp(14px,1.8vw,24px) 0}
.afi .env img{height:clamp(84px,8vw,130px)}
.afi .env b,.afi .env em{color:var(--m-texto);opacity:.75}
.afi .halo{position:absolute;right:-90px;top:-90px;width:380px;height:380px;border-radius:50%;background:var(--m-acento);opacity:.15;pointer-events:none}
.afi .damero{position:absolute;left:0;right:0;top:0;height:14px;background:repeating-linear-gradient(90deg,var(--m-acento) 0 14px,#fff 14px 28px)}
.afi.condamero .afi-txt{padding-top:clamp(40px,4vw,62px)}
@media(max-width:860px){
  .afi{grid-template-columns:1fr}
}
/* ============================================================
   === M1 · corte de afiche · PROPUESTA ELEGIDA ===
   Rejilla de doce con relleno denso: todas las piezas miden 4 u 8
   columnas, así cada fila cierra exacta y no quedan huecos. Antes las
   placas de marca caían en una sola columna de 145 px, y por eso se
   veían raras: la regla de ancho estaba atada a otro contenedor.
   ============================================================ */
.mosaico{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-flow:dense;
  gap:clamp(10px,1.2vw,16px);padding:clamp(16px,2vw,28px) clamp(24px,4vw,52px)}
.mosaico > *{grid-column:span var(--span,4)}
/* --- card de familia (lab 07, propuesta A) ---
   La foto ocupa la pieza entera y un velo diagonal la aclara arriba, donde
   va el texto. Sin nombre de producto: solo la imagen.
   HÍBRIDA según el tamaño de la familia: hasta 8 productos rota un envase
   grande cada 3 s; sobre 8, carrusel continuo. Con dos o tres productos un
   carrusel se ve pobre, y un envase grande se ve estupendo. */
.bal{position:relative;display:flex;flex-direction:column;border-radius:var(--radio);overflow:hidden;
  background:#fff;border:1px solid var(--linea);text-decoration:none;color:inherit;min-height:380px;
  transition:transform .3s,box-shadow .3s,border-color .3s}
.bal:hover{transform:translateY(-4px);box-shadow:var(--sombra);border-color:var(--fam)}
.bal .bal-foto{position:absolute;inset:0;z-index:0}
.bal .bal-foto .ph{width:100%;height:100%;aspect-ratio:auto;border-radius:0}
.bal .bal-foto img{width:100%;height:100%;object-fit:cover;display:block}
/* Velo blanco desde arriba (lab 11, elegido el 08-09-2026): denso bajo el
   texto y se abre hacia abajo, donde se apoyan los envases. Seis paradas
   parejas para que el fundido no marque una línea. Antes era diagonal.
   Más liviano desde el 09-09-2026 (Axel: "que se vea más la foto, menos
   blanco"): arriba sigue habiendo blanco suficiente para el texto del
   catálogo y en el inicio la pestaña ya lo sostiene. Antes .86→.1. */
.bal .bal-foto::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,.6) 18%,rgba(255,255,255,.42) 36%,
    rgba(255,255,255,.25) 54%,rgba(255,255,255,.12) 74%,rgba(255,255,255,.04) 100%)}
/* El bloque de texto no puede invadir la zona del envase: se le limita el
   ancho y se le deja un margen inferior. Así dejan de chocar y queda más
   fondo a la vista, que era el punto. */
.bal .bal-in{position:relative;z-index:3;padding:clamp(16px,1.6vw,22px) clamp(16px,1.7vw,24px)
  clamp(14px,1.4vw,20px);max-width:88%}
.bal.ancha .bal-in{max-width:62%}
/* El título ya NO reserva una segunda línea: con nombres de una sola —
   Limones, Vinagres, Soya— esa reserva dejaba un hueco justo entre el
   título y la bajada. Ahora la bajada va pegada, a 3 px.
   Los títulos siguen alineados arriba en todas las cards; lo que varía es
   dónde empieza la bajada, según el título ocupe una línea o dos.
   Las anchas NO agrandan la letra: usan la Archivo más ancha, que cambia
   el ancho y no el alto. */
.bal h3{font-size:clamp(18px,1.7vw,25px);line-height:1.02;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bal.ancha h3{font-stretch:100%}
.bal p{font-size:12.5px;line-height:1.42;color:var(--tinta2);margin-top:3px;min-height:2.84em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bal.ancha p{max-width:52ch}
/* modo rotación: un envase grande */
.bal .rot{position:absolute;left:22%;right:0;bottom:0;top:34%;z-index:2}
.bal .rot img{position:absolute;left:50%;bottom:8%;width:auto;max-height:92%;max-width:88%;opacity:0;
  transform:translateX(-50%);
  transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.2,1);
  filter:drop-shadow(0 22px 24px rgba(0,9,76,.24))}
.bal .rot img.on{opacity:1}
.bal .rot img:not(.on){transform:translateX(-50%) translateY(10px)}
.bal.ancha .rot{left:46%;top:30%}
@media(prefers-reduced-motion:reduce){
  .bal .rot img{transition:none}
}
/* modo carrusel: la tira desfila apoyada abajo */
/* La tira mide lo mismo que el rotador (66 % inferior de la card) y sus
   envases el 92 % de eso, apoyados al 8 %: así el envase del carrusel es tan
   grande como el individual de las cards angostas. Caben menos por card y la
   separación es menor; el resto desfila. (lab 11, 08-09-2026) */
.bal .tira{position:absolute;left:0;right:0;bottom:0;height:66%;z-index:2;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.bal .tira .riel{position:absolute;left:0;top:0;bottom:8%;display:flex;align-items:flex-end;
  gap:clamp(8px,1vw,14px);width:max-content;padding-left:clamp(14px,1.5vw,20px);
  animation:desfile var(--dur,46s) linear infinite;
  /* el carrusel solo corre cuando el mouse esta sobre la card */
  animation-play-state:paused}
.bal:hover .tira .riel{animation-play-state:running}
/* en tactil no hay mouse: la tira corre sola, como antes */
@media(hover:none){.bal .tira .riel{animation-play-state:running}}
.bal .tira img{flex:none;width:auto;height:100%;object-fit:contain;object-position:bottom;
  filter:drop-shadow(0 14px 16px rgba(0,9,76,.2))}
/* --- placa de marca: sin foto, solo color e identidad --- */
.placa{position:relative;display:flex;flex-direction:column;border-radius:var(--radio);overflow:hidden;
  background:var(--m-fondo);color:var(--m-texto);text-decoration:none;min-height:380px;
  padding:clamp(18px,1.8vw,26px);transition:transform .28s,box-shadow .28s}
.placa.ancha h3{font-stretch:100%}
/* carrusel dentro de la placa de marca, para las que tienen varios productos */
.placa .tira{position:absolute;left:0;right:0;bottom:0;height:56%;z-index:1;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.placa .tira .riel{position:absolute;left:0;bottom:clamp(16px,1.8vw,26px);display:flex;align-items:flex-end;
  gap:clamp(12px,1.6vw,24px);width:max-content;padding-left:clamp(18px,1.8vw,26px);
  animation:desfile var(--dur,46s) linear infinite}
.placa .tira:hover .riel{animation-play-state:paused}
.placa .tira img{flex:none;width:auto;height:clamp(92px,8.6vw,138px);object-fit:contain;object-position:bottom;
  filter:drop-shadow(0 14px 16px rgba(0,0,0,.34))}
.placa:hover{transform:translateY(-4px);box-shadow:var(--sombra)}
.placa .halo{position:absolute;right:-70px;top:-70px;width:230px;height:230px;border-radius:50%;
  background:var(--m-acento);opacity:.16;pointer-events:none}
.placa > *{position:relative;z-index:1}
.placa .p-tipo{font:italic 500 9px/1 var(--cuerpo);letter-spacing:.1em;text-transform:uppercase;color:var(--m-acento)}
.placa h3{font-family:var(--sans);font-weight:900;font-size:clamp(26px,2.6vw,38px);text-transform:uppercase;
  letter-spacing:-.01em;line-height:.94;margin-top:11px;color:var(--m-texto)}
.placa p{font-size:13px;line-height:1.45;margin-top:9px;opacity:.82}
/* el envase, estatico, cierra el afiche de la marca de un solo producto */
.placa .p-prod{position:relative;z-index:1;margin-top:auto;padding-top:16px;display:flex;justify-content:center}
.placa .p-prod img{height:clamp(96px,9vw,146px);width:auto;object-fit:contain;
  filter:drop-shadow(0 16px 20px rgba(0,0,0,.32))}
.placa .p-pend{position:relative;z-index:1;margin-top:auto;padding-top:18px;text-align:center;
  font:italic 500 9.5px/1.4 var(--cuerpo);letter-spacing:.1em;text-transform:uppercase;opacity:.45}
/* Las marcas al pie de una categoria van SIEMPRE en dos columnas: dos llenan
   la fila y una sola ocupa media, no un tercio. Manda la rejilla, no el --span
   en linea de cada placa. */
.mosaico.marcas-pie{grid-template-columns:repeat(2,1fr)}
.mosaico.marcas-pie > *{grid-column:auto}
@media(max-width:820px){.mosaico.marcas-pie{grid-template-columns:1fr}}
@media(max-width:1100px){
  .mosaico{grid-template-columns:repeat(8,1fr)}
  .mosaico > *{--span:4}
}
@media(max-width:820px){
  .mosaico{grid-template-columns:repeat(4,1fr)}
}
/* ============================================================
   GAMA OFICIAL
   Todo el catalogo va en azules, amarillo y celestes: se anulan los
   colores propios de cada familia. Las unicas excepciones son las tres
   marcas con identidad grafica propia —Kikkoman, Melitta y Vintage—,
   que pintan con sus variables --m-* puestas en linea y no dependen de
   --fam. Mismo criterio del mega menu y de la ficha de producto.
   ============================================================ */
.bal,.placa,.mosaico [class*="f-"],
.cat-cab,.pr,.prods [class*="f-"],
[data-cat] [class*="f-"]{
  --fam:var(--azul);--fam-osc:var(--azul-osc);--fam-tinte:var(--hielo)}

/* ============================================================
   PÁGINA DE CATEGORÍA · el envase que cambia
   Un card por producto: manda el formato más grande y los demás se
   recorren al pasar el mouse. Migrado del lab 08, propuesta A.
   ============================================================ */
/* ============================================================
   CABECERA DE LA CATEGORÍA · común a las tres
   ============================================================ */
.cat-cab{padding:clamp(26px,3.4vw,46px) clamp(24px,4vw,52px) clamp(18px,2.2vw,28px);
  background:linear-gradient(165deg,var(--fam-tinte),#fff 70%);border-bottom:1px solid var(--linea)}
.cat-cab .miga{font:italic 500 10px/1 var(--cuerpo);letter-spacing:.1em;text-transform:uppercase;color:var(--gris);
  display:flex;gap:8px;align-items:center}
.cat-cab .miga b{color:var(--fam);font-weight:500}
/* la miga de la cabecera trae su propio "›": la flecha amarilla de .miga span::before no va (se veían las dos, 15-09-2026) */
.cat-cab .miga span::before{content:none}
.cat-cab h1{font-size:clamp(34px,4.6vw,64px);margin-top:14px;color:var(--fam-osc);line-height:.96}
.cat-cab .lead{margin-top:12px;max-width:56ch}
.cat-cab .cuenta{font:italic 500 10px/1 var(--cuerpo);letter-spacing:.1em;text-transform:uppercase;color:var(--gris);
  margin-top:16px;display:block}
/* ============================================================
   COMÚN A LAS FICHAS DE PRODUCTO DE LA CATEGORÍA
   Una card por PRODUCTO. Los sabores son variedades del mismo
   producto, no productos distintos, y los formatos no se listan:
   manda el más grande y el resto se insinúa.
   ============================================================ */
.prods{display:grid;gap:clamp(12px,1.5vw,20px);padding:clamp(20px,2.6vw,34px) clamp(24px,4vw,52px) clamp(30px,4vw,48px)}
.pr{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--linea);
  border-radius:var(--radio);overflow:hidden;text-decoration:none;color:inherit;
  transition:transform .28s,box-shadow .28s,border-color .28s}
.pr:hover{transform:translateY(-4px);box-shadow:var(--sombra);border-color:var(--fam)}
.pr-arte{position:relative;background:var(--fam-tinte);display:flex;align-items:center;justify-content:center;
  aspect-ratio:1;overflow:hidden}
.pr-arte::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 34%,rgba(255,255,255,.9),transparent 64%)}
.pr-arte img{position:relative;z-index:1;max-height:78%;max-width:74%;width:auto;
  filter:drop-shadow(0 18px 20px rgba(0,9,76,.2));transition:opacity .3s,transform .3s}
.pr-in{padding:14px clamp(14px,1.4vw,20px) 16px;display:flex;flex-direction:column;flex:1}
.pr h3{font-size:16.5px;line-height:1.08}
.pr .sub{font-size:12.5px;color:var(--tinta2);margin-top:5px;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em}
/* la línea que resume variedades y formatos, sin listarlos */
.pr .resumen{margin-top:auto;padding-top:11px;display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.pr .resumen b{font:italic 500 9px/1 var(--cuerpo);letter-spacing:.1em;text-transform:uppercase;color:var(--fam-osc);
  background:var(--fam-tinte);border-radius:20px;padding:5px 9px;font-weight:500}
.pr .resumen em{font:italic 500 9px/1 var(--cuerpo);letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
/* el tamaño del envase que se está viendo */
.pr .medida{position:absolute;left:12px;top:12px;z-index:2;font:italic 500 9px/1 var(--cuerpo);letter-spacing:.12em;
  text-transform:uppercase;background:#fff;color:var(--fam-osc);padding:6px 10px;border-radius:20px;
  opacity:0;transition:opacity .25s}
.pr:hover .medida{opacity:1}
@media(hover:none){
  .pr .medida{opacity:1}
}
/* ============================================================
   === A · El envase que cambia ===
   Al pasar el mouse, el envase recorre los formatos de mayor a
   menor. Unos puntos abajo dicen cuántos hay.
   ============================================================ */
.ca .prods{grid-template-columns:repeat(4,1fr)}
.ca .puntos{position:absolute;left:0;right:0;bottom:10px;z-index:2;display:flex;gap:5px;justify-content:center}
.ca .puntos i{width:5px;height:5px;border-radius:50%;background:var(--fam);opacity:.28;transition:opacity .25s,transform .25s}
.ca .puntos i.on{opacity:1;transform:scale(1.35)}
/* La marca que sube a la ultima fila de productos ocupa el hueco que dejan:
   dos columnas de las cuatro. Ver la regla de huecos en construir_sitio.py. */
.ca .prods .placa{grid-column:span 2}
@media(max-width:1100px){
  .ca .prods{grid-template-columns:repeat(3,1fr)}
  .ca .prods .placa{grid-column:span 1}
}
@media(max-width:820px){
  .ca .prods{grid-template-columns:repeat(2,1fr)}
  .ca .prods .placa{grid-column:span 2}
}

/* ============================================================
   FICHA DE PRODUCTO · la galería
   Packshot y miniaturas en una sola pieza, más la información
   oficial. Migrado del lab 05, propuesta 6.
   ============================================================ */
/* ============================================================
   COMÚN A LAS TRES FICHAS · selectores de variedad y formato
   ============================================================ */
.sel-h{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.sel-h h4{color:var(--gris);letter-spacing:.16em;font-size:11px;margin:0}
.sel-h .cuenta{font:italic 500 10.5px/1 var(--cuerpo);color:var(--bruma)}
/* variedad: pastilla con mini packshot */
.variedades{display:flex;gap:8px;flex-wrap:wrap}
.variedad{display:inline-flex;align-items:center;gap:9px;padding:6px 14px 6px 6px;border:1.5px solid var(--linea);border-radius:30px;background:#fff;transition:border-color .2s,box-shadow .2s,transform .2s}
.variedad img{height:30px;width:30px;object-fit:contain;border-radius:50%;background:var(--hielo-2);flex:none}
.variedad b{font-family:var(--sans);font-weight:700;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--tinta2);white-space:nowrap}
.variedad:hover{border-color:var(--bruma);transform:translateY(-1px)}
.variedad.on{border-color:var(--fam);box-shadow:0 0 0 3px var(--fam-tinte)}
.variedad.on b{color:var(--fam-osc)}
.variedad.sin-foto img{background:repeating-linear-gradient(45deg,var(--hielo) 0 5px,#fff 5px 10px)}
/* panel del formato elegido */
/* auto-fit: la grilla se ajusta a las celdas que haya, sin dejar huecos */
.sku-panel{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:12px;overflow:hidden}
.sku-panel div{background:#fff;padding:14px 16px}
.sku-panel b{display:block;font-family:var(--sans);font-weight:900;font-size:17px;letter-spacing:-.01em;color:var(--tinta);text-transform:uppercase;line-height:1.1}
.sku-panel span{display:block;font:italic 500 9.5px/1.3 var(--cuerpo);letter-spacing:.12em;text-transform:uppercase;color:var(--gris);margin-bottom:5px}
.sku-panel .ok{color:var(--verde)}
.sku-panel .no{color:var(--terracota)}
/* compra */
.compra{display:flex;flex-direction:column;gap:10px}
.compra .fila{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.compra .pie{font:italic 500 10.5px/1.5 var(--cuerpo);letter-spacing:.05em;color:var(--gris);display:flex;align-items:center;gap:7px}
.compra .pie::before{content:"";width:6px;height:6px;background:var(--amarillo);transform:rotate(45deg);flex:none}
/* ============================================================
   === F6 · La galería · packshot y miniaturas en una sola pieza ===
   ============================================================ */
/* Gama oficial: esta ficha va siempre en azules, amarillo y celestes, sin el
   color propio de la familia. Mismo criterio que ya usan el mega menú y el
   catálogo móvil en estilo.css. */
.fp{background:#fff;border:1px solid var(--linea);border-radius:0 0 14px 14px;border-top:0;overflow:hidden;
  --fam:var(--azul);--fam-osc:var(--azul-osc);--fam-tinte:var(--hielo)}
/* un solo panel, todo en blanco: el packshot y las miniaturas se leen como una
   pieza, sin cajas ni fondos que los separen */
.fp-panel{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(24px,3.4vw,58px);align-items:center;
  padding:clamp(26px,3.6vw,46px) clamp(24px,4vw,52px) clamp(30px,4vw,48px);background:#fff}
.fp-visor{display:flex;flex-direction:column;gap:0}
.fp-arte{position:relative;display:flex;align-items:center;justify-content:center;min-height:360px}
.fp-arte img{max-height:340px;width:auto;position:relative;z-index:1;filter:drop-shadow(0 30px 34px rgba(0,9,76,.22));transition:opacity .3s,transform .35s cubic-bezier(.2,.8,.2,1)}
.fp-arte img.cambiando{opacity:0;transform:translateY(12px) scale(.97)}
/* La galería: miniaturas flotando sobre el blanco, sin marco ni borde. Todas
   del mismo tamaño — a escala real el sachet de 8 ml queda invisible y no se
   puede tocar —; la diferencia la dice el rótulo.
   Una sola fila: width:fit-content + margen auto la centra cuando caben todas
   y la deja desplazable cuando no. Con justify-content:center el navegador
   recortaría las primeras al desplazar. */
.gal{display:flex;gap:clamp(8px,1.4vw,20px);flex-wrap:nowrap;overflow-x:auto;padding:22px 2px 6px;width:fit-content;max-width:100%;margin-inline:auto;scrollbar-width:thin}
.gal[hidden]{display:none}
.gal::-webkit-scrollbar{height:5px}
.gal::-webkit-scrollbar-thumb{background:var(--hielo);border-radius:4px}
.gal-item{flex:none;width:78px;display:flex;flex-direction:column;align-items:center;gap:10px;background:none}
.gal-item .marco{width:78px;height:78px;display:flex;align-items:flex-end;justify-content:center;position:relative}
.gal-item .marco img{max-height:100%;max-width:100%;width:auto;object-fit:contain;object-position:bottom;
  opacity:.5;filter:saturate(.5);transition:opacity .22s,filter .22s,transform .22s}
.gal-item .rot{text-align:center;width:100%}
.gal-item .rot b{display:block;font-family:var(--sans);font-weight:900;font-size:12.5px;letter-spacing:-.01em;text-transform:uppercase;color:var(--gris);line-height:1.1;transition:color .2s}
.gal-item .rot em{display:block;font:italic 500 9px/1.3 var(--cuerpo);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--bruma);margin-top:4px;transition:color .2s}
/* al pasar y al elegir: el envase sale del gris y se levanta con su sombra,
   como si flotara. Sin bordes, sin líneas, sin cajas. */
.gal-item:hover .marco img{opacity:.9;filter:saturate(1);transform:translateY(-3px)}
.gal-item:hover .rot b{color:var(--azul-med)}
.gal-item.on .marco img{opacity:1;filter:saturate(1) drop-shadow(0 12px 16px rgba(0,9,76,.26));transform:translateY(-3px)}
.gal-item.on .rot b{color:var(--azul)}
.gal-item.on .rot em{color:var(--azul-med)}
.fp-txt h1{font-size:clamp(34px,4vw,58px)}
.fp-txt .lead{font-size:21px;margin-top:14px}
.fp-txt .txt{margin-top:12px}
.fp-txt .fam-n{font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--azul);display:flex;align-items:center;gap:8px;margin-bottom:14px}
.fp-txt .fam-n::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--amarillo)}
.fp-txt .bloque{margin-top:24px}
/* recetas relacionadas · van antes de la información oficial: primero la
   inspiración, después la letra chica. Usa el componente .rec del sitio. */
.fp-recetas{border-top:1px solid var(--linea);padding:clamp(22px,2.6vw,32px) clamp(24px,4vw,52px) clamp(26px,3vw,38px)}
.fp-recetas[hidden]{display:none}
.fp-recetas .sec-h{margin-bottom:clamp(14px,1.6vw,20px);align-items:center}
.fp-recetas .sec-h .ojo{margin-bottom:7px}
.fp-recetas .sec-h h2{font-size:clamp(18px,1.7vw,23px)}
.fp-recetas .sec-h .lnk{font-size:10.5px;letter-spacing:.1em}
/* Franja: cuatro columnas y tarjeta mínima — foto apaisada, tiempo y
   dificultad, y el nombre. Sin las pastillas de producto: estas recetas ya
   están relacionadas con el producto de la ficha, repetirlo sobra.
   La tarjeta .rec grande del sitio queda intacta para la portada y el índice. */
.fp-recetas .recs{grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,20px)}
.fp-recetas .rl-otras{margin-top:0}   /* el afiche corto de las recetas (15-09-2026); su rejilla vive en recetas.css */
.fp-recetas .rec{gap:9px}
.fp-recetas .rec .ph{aspect-ratio:16/9;border-radius:8px}
.fp-recetas .rec .ph.pend::after{font-size:8px;padding:5px 7px;left:8px;right:8px;bottom:8px;letter-spacing:.04em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fp-recetas .rec .meta{font-size:9px;letter-spacing:.08em;gap:7px}
/* dos líneas reservadas al título: mantiene la franja pareja */
.fp-recetas .rec h3{font-size:14px;line-height:1.2;min-height:2.4em}
.fp-recetas .rec .usa{display:none}
@media(max-width:1100px){
  .fp-recetas .recs{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:820px){
  .fp-recetas .recs{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
  .fp-recetas .recs{grid-template-columns:1fr}
}
/* la información oficial cierra la ficha, sobre hielo para separarla del
   producto sin cortar la página */
/* la informacion oficial no es una tarjeta aparte: continua el mismo blanco de
   la ficha, separada solo por el filete, igual que la franja de recetas */
.fp-oficial{border-top:1px solid var(--linea);background:#fff;padding:clamp(24px,2.8vw,36px) clamp(24px,4vw,52px) clamp(28px,3.2vw,42px)}
.fp-oficial .ioa{border:0;border-radius:0;background:none;overflow:visible}
.fp-oficial .ioa-tabs{border-bottom:1px solid var(--linea)}
.fp-oficial .ioa-tabs button{padding:11px 18px}
.fp-oficial .ioa-tabs button:first-child{padding-left:0}
.fp-oficial .ioa-tabs button:hover{background:none;color:var(--azul-med)}
.fp-oficial .ioa-cuerpo{padding:26px 0 0}
@media(max-width:900px){
  .fp-panel{grid-template-columns:1fr}
  .fp-arte{min-height:270px}
  .fp-arte img{max-height:240px}
}
/* ============================================================
   === IO · Información oficial · componentes comunes ===
   ============================================================ */
/* encabezado de sub-bloque dentro de la informacion oficial */
.io-h{font-family:var(--sans);font-weight:900;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--azul);margin-bottom:12px}
/* Los sellos no tienen estado "sin sellos": o el producto los lleva y se
   muestran, o el bloque no existe. */
.io-sellos-bloque{margin-top:26px;padding-top:22px;border-top:1px solid var(--linea)}
.io-sellos-bloque[hidden]{display:none}
.io-sellos{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start}
.sello{width:96px;height:96px;background:#000;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:8px;flex:none;
  clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
.sello i{font-style:normal;font-family:var(--sans);font-weight:900;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;line-height:1}
.sello b{font-family:var(--sans);font-weight:900;font-size:13px;letter-spacing:-.01em;text-transform:uppercase;line-height:1.02;margin:3px 0 4px}
.sello em{font-style:normal;font-family:var(--sans);font-weight:700;font-size:6px;letter-spacing:.04em;text-transform:uppercase;line-height:1.05;opacity:.9}
.io-sinsellos{display:inline-flex;align-items:center;gap:11px;border:1.5px solid var(--linea);border-radius:12px;padding:14px 18px;background:#fff}
.io-sinsellos .marca{width:34px;height:34px;border-radius:50%;background:var(--hielo);color:var(--azul);display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-weight:900;font-size:16px;flex:none}
.io-sinsellos b{display:block;font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta)}
.io-sinsellos span{display:block;font:italic 500 10px/1.4 var(--cuerpo);letter-spacing:.06em;color:var(--gris);margin-top:3px}
/* dato pendiente de Traverso */
.io-pend{display:inline-flex;align-items:center;gap:6px;font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:11px;letter-spacing:.04em;color:#8a6a00;background:#fdf6d8;border:1px dashed #d9bd3a;border-radius:5px;padding:2px 8px}
.io-pend::before{content:"◇";font-size:9px}
/* tabla nutricional */
.nutri{width:100%;border-collapse:collapse;font-size:14px}
.nutri caption{caption-side:top;text-align:left;font-family:var(--sans);font-weight:900;font-size:13px;text-transform:uppercase;letter-spacing:.02em;padding-bottom:8px;color:var(--tinta)}
.nutri th,.nutri td{padding:8px 10px;border-bottom:1px solid var(--linea);text-align:right}
.nutri th:first-child,.nutri td:first-child{text-align:left}
.nutri thead th{font-family:var(--sans);font-weight:700;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);border-bottom:1.5px solid var(--tinta)}
.nutri td{font-family:var(--mono);font-size:12.5px;color:var(--tinta2)}
.nutri td:first-child{font-family:var(--serif);font-size:14.5px;color:var(--tinta)}
.nutri tr.destaca td{font-weight:600;color:var(--tinta)}
.nutri tr.sangria td:first-child{padding-left:26px;font-size:13.5px;color:var(--tinta2)}
.nutri tfoot td{border:0;padding-top:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;color:var(--gris);text-align:left}
/* lista de datos */
.io-datos{display:grid;gap:0}
.io-datos > div{display:grid;grid-template-columns:minmax(140px,.42fr) 1fr;gap:14px;padding:10px 0;border-bottom:1px dotted var(--linea);align-items:baseline}
.io-datos dt,.io-datos .k{font-family:var(--sans);font-weight:700;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--gris)}
.io-datos dd,.io-datos .v{font-size:15px;color:var(--tinta2)}
.io-datos .v b{font-weight:600;color:var(--tinta)}
.io-datos .v .mono{font-family:var(--mono);font-size:13px}
@media(max-width:620px){
  .io-datos > div{grid-template-columns:1fr;gap:3px}
}
/* === IO-A · panel con pestañas === */
.ioa{border:1.5px solid var(--linea);border-radius:14px;background:#fff;overflow:hidden}
.ioa-h{display:flex;align-items:center;gap:14px;padding:18px 22px;background:var(--hielo-2);border-bottom:1px solid var(--linea);flex-wrap:wrap}
.ioa-h .esc-of{width:34px;height:34px;border-radius:8px;background:var(--azul);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-weight:900;font-size:15px;flex:none}
.ioa-h b{font-family:var(--sans);font-weight:900;font-size:15px;text-transform:uppercase;letter-spacing:.01em;display:block}
.ioa-h span{font:italic 500 10px/1.4 var(--cuerpo);letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
.ioa-h .lnk{margin-left:auto;font-size:11px}
.ioa-tabs{display:flex;gap:0;border-bottom:1px solid var(--linea);overflow-x:auto}
.ioa-tabs button{font-family:var(--sans);font-weight:700;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);padding:13px 20px;border-bottom:2.5px solid transparent;white-space:nowrap;transition:color .2s,border-color .2s,background .2s}
.ioa-tabs button:hover{background:var(--hielo-2)}
.ioa-tabs button.on{color:var(--azul);border-bottom-color:var(--amarillo);background:#fff}
.ioa-cuerpo{padding:26px 22px}
.ioa-panel[hidden]{display:none}
.ioa-cols{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
@media(max-width:820px){
  .ioa-cols{grid-template-columns:1fr;gap:24px}
}
/* enlace a la información oficial desde la ficha */
.io-ancla{display:flex;align-items:center;gap:14px;border:1px solid var(--linea);border-left:3px solid var(--azul);border-radius:0 12px 12px 0;padding:14px 18px;background:var(--hielo-2);text-decoration:none;color:inherit;transition:background .2s,transform .2s}
.io-ancla:hover{background:var(--hielo);transform:translateX(3px)}
.io-ancla b{display:block;font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.07em;text-transform:uppercase}
.io-ancla span{display:block;font:italic 500 10.5px/1.4 var(--cuerpo);letter-spacing:.04em;color:var(--gris);margin-top:3px}
.io-ancla i{margin-left:auto;font-style:normal;color:var(--azul);font-size:19px}

/* ============================================================
   GAMA OFICIAL en catálogo, categoría y ficha
   Todo va en azules, amarillo y celestes: se anulan los colores
   propios de familia. Las únicas excepciones son las tres marcas
   con identidad gráfica propia —Kikkoman, Melitta y Vintage—, que
   pintan con sus variables --m-* puestas en línea.
   ============================================================ */
.mosaico [class*="f-"],.bal,.placa,
.cat-cab,.pr,.prods [class*="f-"],
.pag-producto,.pag-producto [class*="f-"]{
  --fam:var(--azul);--fam-osc:var(--azul-osc);--fam-tinte:var(--hielo)}
/* la cabecera de una página de marca toma su identidad: solo la usan las tres
   con mundo propio (Kikkoman, Vintage y Melitta) */
.cat-cab.demarca{background:var(--m-fondo);border-bottom:0;position:relative;overflow:hidden}
.cat-cab.demarca h1{color:var(--m-texto)}
/* cabecera de Kikkoman y Melitta: el logo en alfa hace de título (09-09-2026) */
.cat-cab h1.h1-logo{margin-top:18px;line-height:0}
.cat-cab h1.h1-logo img{display:block;height:clamp(96px,10vw,160px);width:auto;max-width:min(100%,420px);object-fit:contain}
.cat-cab.demarca .lead{color:var(--m-texto);opacity:.85}
.cat-cab.demarca .miga,.cat-cab.demarca .cuenta{color:var(--m-texto);opacity:.6}
.cat-cab.demarca .miga a{color:var(--m-acento);opacity:1}
.cat-cab.demarca .miga b{color:var(--m-acento)}

/* ============================================================
   Correcciones tras la migración
   ============================================================ */
/* la miniatura es display:flex, así que [hidden] por sí solo no la esconde:
   sin esto se veían las 18 variedades del jugo a la vez */
.gal-item[hidden]{display:none !important}

/* la tira necesita una altura base: sin ella, los envases del afiche salían
   al tamaño natural del packshot (850 px) */
.tira img{height:clamp(74px,7vw,108px);width:auto;object-fit:contain;object-position:bottom}
.afi .tira img{height:clamp(84px,8vw,130px)}

/* la galería no muestra barra de desplazamiento: se arrastra, no se empuja */
.gal{scrollbar-width:none;-ms-overflow-style:none}
.gal::-webkit-scrollbar{display:none}

/* ============================================================
   ANCHO COMÚN
   El catálogo, la categoría y la ficha venían del laboratorio con el
   contenido de borde a borde. Acá se alinean al mismo ancho que el resto
   del sitio: el contenido queda en --ancho con su --gutter, igual que
   dentro de un .wrap, y los fondos siguen sangrando de lado a lado.
   ============================================================ */
:root{--marco:max(var(--gutter),calc((100% - var(--ancho)) / 2 + var(--gutter)))}
.mosaico,.prods,.cat-cab,.fp-panel,.fp-recetas,.fp-oficial,.afi{
  padding-inline:var(--marco)}
.afi .afi-txt,.afi .afi-arte{padding-inline:0}
/* la ficha ya no es una tarjeta suelta: es la página */
.fp{border:0;border-radius:0}


/* ============================================================
   CARD DE FAMILIA CON PESTAÑA (catálogo, 09-09-2026)
   El título va en la pestaña blanca del inicio (.bal-tab reemplaza a
   .bal-in), con la bajada larga del catálogo debajo, en hasta dos líneas.
   La pestaña cuelga centrada del borde de arriba y el envase se centra
   bajo ella (antes iba corrido a la derecha del texto). Las cards del
   inicio (.familias-cards) afinan esto más abajo.
   ============================================================ */
.bal.tab .bal-tab{position:absolute;left:50%;top:0;transform:translateX(-50%);z-index:3;
  background:#fff;color:var(--tinta);text-align:center;width:max-content;min-width:62%;max-width:min(92%,58ch);
  padding:clamp(9px,.9vw,13px) clamp(12px,1.3vw,22px) clamp(10px,1vw,15px);border-radius:0 0 22px 22px;  /* menos aire (Axel, 09-09-2026) */
  box-shadow:0 14px 30px -12px rgba(0,9,76,.5),0 1px 0 rgba(0,9,76,.06)}
.bal.tab .bal-tab h3{color:var(--azul);line-height:1.1;white-space:nowrap;display:block;-webkit-line-clamp:unset;overflow:visible}
.bal.tab .bal-tab p{margin-top:5px;color:var(--tinta2);min-height:0;max-width:52ch;margin-left:auto;margin-right:auto;
  display:block;-webkit-line-clamp:unset;overflow:visible;
  /* líneas parejas: el navegador reparte el texto en renglones del mismo largo,
     así no queda una palabra suelta ni una coma colgando (Axel, 09-09-2026) */
  text-wrap:balance}  /* la bajada sale completa, sin recorte a dos líneas */
.bal.ancha.tab .bal-tab{min-width:44%;max-width:min(72%,64ch)}
.bal.tab .rot{left:0;right:0;top:40%}
.bal.ancha.tab .rot{left:0;top:36%}
.bal.tab .rot img{z-index:1}
/* tablet y móvil: el --span en línea le gana a las reglas responsivas, así que
   se fija por grid-column: bajo 820 px las cards de familia van a una columna */
@media(max-width:820px){.mosaico > .bal{grid-column:1/-1}}
@media(max-width:640px){
  .bal.tab .bal-tab,.bal.ancha.tab .bal-tab{min-width:86%;max-width:96%;padding:10px 12px 12px;border-radius:0 0 16px 16px}
}

/* ============================================================
   FAMILIAS DEL INICIO · cards con fondo (Lab 04, propuesta D, elegida 08-09-2026)
   + pestaña blanca con el título (Lab 13, H5, elegida 09-09-2026)
   La card del catálogo (.bal: textura, velo blanco desde arriba) en dos
   filas: tres protagonistas a cuatro columnas y cuatro a tres columnas.
   Un solo envase por card, que cambia solo cada 3 s (.bal.auto), y todos
   los envases del mismo tamaño: manda la card angosta de la fila de cuatro,
   así en la fila de tres el envase queda más chico y deja ver la textura.
   Las repisas de C3 quedan más abajo por si vuelven.
   ============================================================ */
.familias-cards.mosaico{padding:0}
/* sobre la banda azul del inicio (08-09-2026) las cards siguen siendo claras: no heredan el blanco del texto de la sección */
.sec.azul .bal,.sec.azul .bal h3{color:var(--tinta)}
.familias-cards .bal{min-height:clamp(300px,25vw,350px)}
.familias-cards .bal .bal-in{max-width:100%}
.familias-cards .bal p{min-height:0}
.familias-cards .bal .rot{left:0;right:0;top:38%;bottom:0}
/* Envases más grandes y TODOS del mismo alto (Axel, 09-09-2026): alto fijo en
   vez de tope, así las bolsas anchas ya no chocan con el tope de ancho y
   quedan igual de altas que las botellas. Antes max-height 140–185 px. */
.familias-cards .bal .rot img{bottom:6%;height:clamp(160px,15vw,215px);max-height:none;max-width:86%}
/* --- la pestaña blanca (Lab 13, H5, elegida 09-09-2026): el título y la
   bajada van en una pestaña colgada del borde de arriba (.bal-tab reemplaza
   a .bal-in). Es ancha: mide lo que mide su texto (width:max-content), nunca
   menos del 82 % de la card ni más del 100 %, y el texto no se parte: título
   y bajada van SIEMPRE en una sola línea. La letra se mide en cqw (la card es
   contenedor) con tope en la escala del inicio: en escritorio manda la escala
   y en las cards angostas del teléfono baja lo justo para caber. --- */
.familias-cards .bal.tab{container-type:inline-size}
.familias-cards .bal.tab .bal-tab{position:absolute;left:50%;top:0;transform:translateX(-50%);z-index:3;
  background:#fff;color:var(--tinta);text-align:center;width:max-content;min-width:82%;max-width:100%;
  padding:clamp(12px,1.2vw,18px) clamp(12px,1.3vw,24px) clamp(14px,1.3vw,20px);border-radius:0 0 22px 22px;
  /* sombra presente: sobre el mármol de Concentrados y la madera clara de
     Sopas la pestaña blanca se fundía con el fondo */
  box-shadow:0 14px 30px -12px rgba(0,9,76,.5),0 1px 0 rgba(0,9,76,.06)}
.familias-cards .bal.tab .bal-tab h3,.familias-cards .bal.tab .bal-tab p{white-space:nowrap;display:block;-webkit-line-clamp:unset;overflow:visible}
.home .familias-cards .bal.tab .bal-tab h3{color:var(--azul);line-height:1.1;font-size:min(var(--t-tarjeta),6.9cqw)}
.home .familias-cards .bal.tab .bal-tab p{margin-top:4px;color:var(--tinta2);min-height:0;font-size:min(var(--t-nota),5.4cqw)}
/* en la fila de cuatro (span 3) la card es más angosta: la pestaña ocupa más */
.familias-cards .bal.tab[style*="--span:3"] .bal-tab{min-width:88%}
.familias-cards .bal.tab .rot img{z-index:1}
/* --- tablet y móvil: DOS columnas (Axel, 09-09-2026). OJO: el ancho de cada
   card viene en línea en el HTML (style="--span:N") y una variable en línea
   le gana a cualquier regla de aquí, así que la rejilla se fija por columnas
   y grid-column, que sí mandan. La séptima card (Sopas) queda sola en la
   última fila y se estira a todo el ancho para no dejar un hueco. --- */
@media(max-width:1100px){
  .familias-cards.mosaico{grid-template-columns:1fr 1fr}
  .familias-cards > *{grid-column:auto}
  .familias-cards > *:last-child{grid-column:1/-1}
}
/* móvil: la sección usa todo el ancho del teléfono (el .wrap se queda en
   86 vw y dejaba cards de 138 px); pestaña a todo el ancho de la card, con
   menos aire; la card ancha de Sopas lleva la misma letra que las angostas
   (su contenedor mide el doble, por eso la mitad del factor cqw) */
@media(max-width:640px){
  #familias .wrap{max-width:none}
  .familias-cards .bal{min-height:clamp(220px,60vw,280px)}
  .familias-cards .bal.tab .bal-tab,.familias-cards .bal.tab[style*="--span:3"] .bal-tab{min-width:92%;padding:10px 10px 11px;border-radius:0 0 16px 16px}
  .familias-cards .bal.tab .bal-tab p{margin-top:3px}
  .home .familias-cards .bal.tab .bal-tab p{font-size:min(var(--t-nota),5.9cqw)}
  .home .familias-cards > :last-child.bal.tab .bal-tab h3{font-size:min(var(--t-tarjeta),3.45cqw)}
  .home .familias-cards > :last-child.bal.tab .bal-tab p{font-size:min(var(--t-nota),2.95cqw)}
  .familias-cards .bal .rot{top:32%}
  .familias-cards .bal .rot img{height:min(160px,44vw);max-width:88%}
  .familias-cards > *:last-child .rot img{height:160px}
}


/* ============================================================
   FAMILIAS DEL INICIO · dos repisas (Lab 04, propuesta C3, elegida 07-09-2026)
   Arriba, en grande, las tres familias protagonistas (Vinagres, Limones,
   Salsas); abajo, en repisa más baja, las otras cuatro. Sin cuenta de
   productos. Cada envase cambia solo cada 3 s con el rotador de app.js y
   entra con su formato más grande. Gama corporativa, sin color de familia.
   ============================================================ */
.gond{display:grid;gap:clamp(8px,1.2vw,18px)}
.gond.g-alta{grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,36px)}
.gond.g-baja{grid-template-columns:repeat(4,1fr);margin-top:clamp(36px,4vw,56px)}
.est{display:flex;flex-direction:column;text-decoration:none;color:inherit;padding:0 6px}
.est-pk{position:relative;height:clamp(120px,11vw,160px);margin:0 4px}
.g-alta .est-pk{height:clamp(200px,20vw,290px)}
.est .rot img{position:absolute;left:50%;bottom:0;width:auto;max-width:96%;max-height:100%;
  transform:translateX(-50%);opacity:0;transition:opacity .55s ease,transform .45s cubic-bezier(.2,.8,.2,1);
  filter:drop-shadow(0 16px 18px rgba(0,9,76,.22))}
.est .rot img.on{opacity:1}
.est .rot img:not(.on){transform:translateX(-50%) translateY(8px)}
.est:hover .rot img.on{transform:translateX(-50%) translateY(-10px)}
/* la repisa: un canto azul con el filo amarillo y una sombra que apoya el envase */
.est-repisa{display:block;height:12px;margin-top:-1px;background:var(--azul);border-top:3px solid var(--amarillo);
  border-radius:0 0 3px 3px;box-shadow:0 10px 18px -10px rgba(0,9,76,.45)}
.g-alta .est-repisa{height:14px;border-top-width:4px}
.est h3{font-size:clamp(15px,1.3vw,19px);line-height:1.05;margin-top:16px;color:var(--tinta);transition:color .3s}
.g-alta .est h3{font-size:clamp(20px,2vw,28px)}
.est:hover h3{color:var(--azul)}
@media(prefers-reduced-motion:reduce){.est .rot img{transition:none}}
@media(max-width:900px){.gond.g-baja{grid-template-columns:repeat(2,1fr)}}
/* en móvil la repisa baja va a dos columnas y sus envases se verían más grandes que los
   protagonistas de arriba: se les baja el alto y el ancho para conservar la jerarquía */
@media(max-width:640px){.g-alta .est-pk{height:150px}.g-alta .est h3{font-size:16px}.est h3{font-size:14px}
  .g-baja .est-pk{height:104px}.g-baja .rot img{max-width:64%}}


/* ============================================================
   CALIDAD DEL INICIO (Lab 10, propuesta Q9, elegida 07-09-2026)
   Video de planta 4:3, chico (38 % del ancho) y a la izquierda, sin leyenda;
   el texto ocupa el resto, centrado a la altura del video. Solo cambian
   TAMAÑOS: la tipografía oficial conserva peso y mayúsculas.
   ============================================================ */
.ph.r43{aspect-ratio:4/3}
/* Las secciones de dos columnas del inicio (quiénes somos, negocios, recetas,
   calidad) comparten la misma rejilla: la de negocios, 1 a 1,1 con el mismo
   aire entre columnas (Axel, 08-09-2026: "el ancho de las dos columnas debe
   ser igual siempre"). Se cambia aquí y se cambia en todas. */
:root{--dos-cols:1fr 1.1fr;--dos-gap:clamp(28px,5vw,72px)}
/* sin esto una columna con contenido que no se parte (los canales de calidad)
   se ensancha sola y rompe la proporción */
.qs-dos > *,.neg-dos > *,.rec-dos > *,.calidad-q > *{min-width:0}
.calidad-q{display:grid;grid-template-columns:var(--dos-cols);gap:var(--dos-gap);align-items:center}
.calidad-q h2{font-size:clamp(24px,2.6vw,34px);margin-top:16px}
.calidad-q .lead{font-size:clamp(15.5px,1.2vw,17.5px);line-height:1.55;max-width:66ch;margin-top:20px}
.calidad-q .cifras{display:flex;gap:0;margin-top:26px;padding-top:0;border-top:0}
.calidad-q .cifra{padding:4px 24px 4px 0;margin-right:24px;border-right:1px solid var(--linea)}
.calidad-q .cifra:last-child{border-right:0}
.calidad-q .cifra b{font-size:clamp(22px,2.2vw,30px)}
.calidad-q .cifra span{font-size:9.5px;margin-top:5px}
@media(max-width:900px){.calidad-q{grid-template-columns:1fr}}


/* ============================================================
   QUIÉNES SOMOS (Lab 10, propuesta N6, elegida 07-09-2026)
   Reemplaza a las dos secciones de historia del inicio. Texto a la
   izquierda (título aprobado, párrafo "Traverso hoy", la línea de 1896 con
   enlace a la timeline y UN botón que despliega las cuatro páginas de
   Nosotros); a la derecha tres fotos: tapas en grande, archivo en sepia
   con el año, y la vitrina de productos. Sin leyendas.
   ============================================================ */
.qs-dos{display:grid;grid-template-columns:var(--dos-cols);gap:var(--dos-gap);align-items:center}
/* mismo tamaño de texto que calidad (Axel, 07-09-2026: "que todos los textos estén iguales"):
   título 34 px, párrafo 17,5 px, la línea de 1896 en 14 px */
.qs-dos h2{margin-top:16px;font-size:clamp(24px,2.6vw,34px)}
.qs-dos .lead{margin-top:18px;max-width:66ch;font-size:clamp(15.5px,1.2vw,17.5px);line-height:1.55}
.qs-desde{margin-top:16px;font-size:14px;color:var(--tinta2);max-width:66ch}
.qs-desde span{display:block;margin-bottom:8px}
.qs-desde .lnk{font-size:11px}
.qs-mosaico{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:auto auto;gap:12px}
.qs-mosaico .ph:first-child{grid-row:1/3;aspect-ratio:3/4}
.qs-mosaico .ph{aspect-ratio:1}
.qs-mosaico .ano{position:absolute;top:12px;left:12px;font-family:var(--sans);font-weight:900;font-size:18px;color:#fff;background:var(--azul);padding:4px 10px;border-radius:7px;z-index:2}

/* --- un solo botón que despliega las cuatro páginas de Nosotros --- */
.qs-menu{position:relative;display:inline-block;margin-top:26px}
.qs-menu .btn .fl{transition:transform .25s}
.qs-menu .btn[aria-expanded="true"] .fl{transform:rotate(180deg)}
.qs-panel{position:absolute;left:0;top:calc(100% + 10px);min-width:330px;background:#fff;border:1px solid var(--linea);
  border-radius:14px;box-shadow:var(--sombra);padding:8px;z-index:30}
.qs-panel[hidden]{display:none}
.qs-panel a{display:block;padding:10px 12px;border-radius:9px;text-decoration:none;color:inherit;transition:background .2s}
.qs-panel a:hover{background:var(--hielo)}
.qs-panel a b{display:flex;align-items:center;gap:9px;font-family:var(--sans);font-weight:700;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--azul)}
.qs-panel a b::before{content:"";width:6px;height:6px;background:var(--amarillo);transform:rotate(45deg);flex:none}
.qs-panel a span{display:block;font-size:13.5px;line-height:1.4;color:var(--tinta2);margin-top:3px;padding-left:15px}
@media(max-width:900px){.qs-dos{grid-template-columns:1fr}}


/* ============================================================
   RECETAS DEL INICIO (Lab 10, propuesta R7, elegida 07-09-2026)
   Absorbe la cita de "Traverso en tu mesa" como título de la sección
   (en la tipografía de titulares, escala chica) con su párrafo y sus
   claves; a la derecha, cuatro recetas en la tarjeta REDUCIDA de la ficha
   de producto (foto 16:9, título 14 px, sin pastillas), en dos por dos.
   Reemplaza a #mesa y a la sección de recetas de cuatro tarjetas grandes.
   ============================================================ */
.rec-dos{display:grid;grid-template-columns:var(--dos-cols);gap:var(--dos-gap);align-items:center}
.rec-dos h2{font-size:clamp(24px,2.6vw,34px);margin-top:14px;max-width:18ch}
.rec-dos .lead{font-size:clamp(15.5px,1.2vw,17.5px);line-height:1.55;max-width:66ch;margin-top:16px}
.rec-dos .claves{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.rec-dos .claves span{font-family:var(--sans);font-weight:700;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:7px 11px;border:1px solid var(--linea);border-radius:20px;color:var(--azul-med)}
.rec-chica{grid-template-columns:1fr 1fr;gap:16px}
.rec-chica .rec{gap:9px}
.rec-chica .rec .ph{aspect-ratio:16/9;border-radius:8px}
.rec-chica .rec .ph.pend::after{font-size:8px;padding:5px 7px;left:8px;right:8px;bottom:8px;letter-spacing:.04em}
.rec-chica .rec .meta{font-size:9px;letter-spacing:.08em;gap:7px}
.rec-chica .rec h3{font-size:14px;line-height:1.2}
.rec-chica .rec .usa{display:none}
@media(max-width:900px){.rec-dos{grid-template-columns:1fr}}
@media(max-width:520px){.rec-chica{grid-template-columns:1fr}}


/* ============================================================
   PUERTAS DE NEGOCIO (Lab 10, propuesta P3, elegida 08-09-2026)
   Módulo nuevo: reemplaza a "Marcas del mundo". Texto a la izquierda y,
   a la derecha, las tres salidas B2B como filas con miniatura: para tu
   negocio (contacto comercial), marca privada (Negocios Traverso) y
   Traverso International Foods (sitio internacional). Escala chica.
   ============================================================ */
.neg-dos{display:grid;grid-template-columns:var(--dos-cols);gap:var(--dos-gap);align-items:center}
.neg-dos h2{font-size:clamp(24px,2.6vw,34px);margin-top:14px}
.neg-dos .lead{font-size:clamp(15.5px,1.2vw,17.5px);line-height:1.55;max-width:66ch;margin-top:16px}
.pta-lista{display:flex;flex-direction:column;border-top:1px solid var(--linea)}
.pta-fila{display:grid;grid-template-columns:96px 1fr 36px;gap:18px;align-items:center;padding:16px 0;border-bottom:1px solid var(--linea);text-decoration:none;color:inherit}
.pta-fila .ph{border-radius:10px}
.pta-sub{font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--azul-med)}
.pta-fila h3{font-size:clamp(16px,1.4vw,20px);line-height:1.08;margin-top:3px;transition:color .25s}
.pta-fila p{font-size:13.5px;line-height:1.5;color:var(--tinta2);margin-top:5px}
.pta-fila i{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--azul);color:var(--azul);display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:14px;transition:background .25s,color .25s}
.pta-fila:hover i{background:var(--azul);color:#fff}
.pta-fila:hover h3{color:var(--azul)}
@media(max-width:900px){.neg-dos{grid-template-columns:1fr}}
@media(max-width:520px){.pta-fila{grid-template-columns:72px 1fr}.pta-fila i{display:none}}


/* ============================================================
   CIERRE DEL INICIO (Lab 10, propuesta D2, elegida 08-09-2026)
   Una sola banda azul que funde "Dónde comprar" y "¿Cocinamos juntos?":
   la pregunta como título, los textos de tienda y supermercados, y a la
   derecha los dos botones (comprar en amarillo, contacto en línea) con las
   cadenas en una sola línea. El botón de compra va a la tienda oficial y
   nunca nombra la plataforma (regla del cliente, 03-09-2026). Escala chica.
   ============================================================ */
.cie-dos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.cie-dos h2{font-size:clamp(24px,2.6vw,34px);margin-top:14px}
.cie-dos .lead{font-size:clamp(15.5px,1.2vw,17.5px);line-height:1.55;max-width:60ch;margin-top:16px}
.cie-dos .lead+.lead{margin-top:12px}
.cie-acc{display:flex;flex-direction:column;align-items:flex-start;gap:12px;justify-self:end}
.cie-lista{font-size:13px;color:#c9cef5;margin-top:14px;max-width:34ch;line-height:1.5}
.cie-lista b{display:block;font-family:var(--sans);font-weight:700;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:4px}
@media(max-width:900px){.cie-dos{grid-template-columns:1fr}.cie-acc{justify-self:start}}


/* --- calidad con doble intención (08-09-2026): presencia por CANALES, sin nombres de cadenas ---
   No se pueden nombrar ni mostrar logos de otros supermercados. Las cifras salieron. */
/* rombos (Lab 10 Q13, Axel 08-09-2026): sin fondo ni borde, el mismo vocabulario de la barra de sellos */
/* dos por dos, simétrico (Axel, 08-09-2026) */
.canales{display:grid;grid-template-columns:repeat(2,max-content);gap:12px 32px;margin-top:20px}
@media(max-width:520px){.canales{grid-template-columns:1fr}}
.canales span{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--azul)}
.canales span::before{content:"";width:6px;height:6px;background:var(--amarillo);transform:rotate(45deg);flex:none}
/* las cifras (+130, +300, BRCGS) viven ahora en "Traverso para tu negocio" (08-09-2026) */
.neg-dos .cifras{display:flex;gap:0;margin-top:24px;padding-top:0;border-top:0}
.neg-dos .cifra{padding:4px 24px 4px 0;margin-right:24px;border-right:1px solid var(--linea)}
.neg-dos .cifra:last-child{border-right:0}
.neg-dos .cifra b{font-size:clamp(22px,2.2vw,30px)}
.neg-dos .cifra span{font-size:9.5px;margin-top:5px}
/* --- cierre centrado, solo el botón de la tienda (08-09-2026) --- */
.cie-centro{max-width:62ch;margin:0 auto;text-align:center}
.cie-centro .ojo{justify-content:center}
.cie-centro h2{font-size:clamp(24px,2.6vw,34px);margin-top:14px}
.cie-centro .lead{font-size:clamp(15.5px,1.2vw,17.5px);line-height:1.55;margin:16px auto 0;max-width:60ch}
.cie-centro .btn{margin-top:24px}


/* mega menú (08-09-2026): familias y puertas siguen en MAYÚSCULA (Axel: "está bueno en alta"); solo el peso baja de 900 a 700 */

/* ============================================================
   ESCALA TIPOGRÁFICA DEL INICIO (Axel, 08-09-2026: "todas las tipografías
   del inicio quedaron disparejas, homologa los tamaños")
   Una sola escala para todo el inicio; este bloque manda sobre los tamaños
   que cada sección trae de su laboratorio. Cambiar aquí = cambia en todas.
     portada   · el h1 del hero
     sección   · todos los h2 (quiénes somos, familias, negocios, recetas,
                 calidad, cierre) y el claim de Vintage
     tarjeta   · títulos de card (familias, puertas de negocio, recetas)
     párrafo   · leads y párrafos, hasta 66 caracteres, interlínea 1,55
     nota      · textos secundarios (línea de 1896, bajadas de card, listas)
     etiqueta  · ojos, metas, claves, canales, subtítulos mono
     botón     · botones y enlaces de acción
   ============================================================ */
:root{
  --t-portada:clamp(28px,3.8vw,56px);
  --t-seccion:clamp(24px,2.6vw,34px);
  --t-tarjeta:clamp(16px,1.35vw,19px);
  --t-parrafo:clamp(15.5px,1.2vw,17.5px);
  --t-nota:14px;
  --t-etiqueta:11px;
  --t-boton:12.5px;
}
.home .hero-v h1{font-size:var(--t-portada)}
.home .hero-v .lead{font-size:var(--t-parrafo);line-height:1.55;max-width:66ch}
.home .hero-panel-h{font-size:var(--t-seccion)}
.home .hero-panel .hero-desc{font-size:var(--t-parrafo);line-height:1.55}
.home .sec h2,.home .sec-h h2,.home .cie-centro h2,.home .cie-dos h2{font-size:var(--t-seccion);line-height:1.02}
.home .vitrina .claim{font-family:var(--sans);font-weight:800;font-style:normal;text-transform:uppercase;letter-spacing:-.02em;font-size:var(--t-seccion);line-height:1.02;max-width:20ch}
.home .lead,.home .txt,.home .sec .lead{font-size:var(--t-parrafo);line-height:1.55;max-width:66ch}
.home .bal h3,.home .pta-fila h3,.home .rec h3,.home .rec-chica .rec h3,.home .fam-card h3{font-size:var(--t-tarjeta);line-height:1.12}
.home .bal p,.home .pta-fila p,.home .qs-desde,.home .cie-lista,.home .qs-panel a span,.home .hero-desc{font-size:var(--t-nota);line-height:1.5}
.home .ojo,.home .pta-sub,.home .rec .meta,.home .rec-chica .rec .meta,.home .rec-dos .claves span,.home .canales span,
.home .cifra span,.home .calidad-q .cifra span,.home .neg-dos .cifra span,.home .sello-i,.home .vitrina .fila-v a,
.home .cie-lista b,.home .qs-panel a b,.home .hero-arc,.home .hero-fam{font-size:var(--t-etiqueta)}
.home .btn,.home .lnk,.home .qs-desde .lnk,.home .sec-h .lnk{font-size:var(--t-boton)}
.home .btn.sm{font-size:var(--t-etiqueta)}
/* las metas de receta (tiempo · dificultad · ocasión) bajan de línea enteras, no a mitad de palabra */
.home .rec .meta{flex-wrap:wrap;gap:4px 10px}
.home .rec .meta > *{white-space:nowrap}
.home .cifra b,.home .calidad-q .cifra b,.home .neg-dos .cifra b{font-size:clamp(22px,2.2vw,30px)}
.home .sec-h{align-items:end}
@media(max-width:640px){.home .hero-v h1{font-size:clamp(28px,7.5vw,40px)}}
/* en el celular el botón de la esquina deja la etiqueta "En la foto" y muestra solo el nombre de la receta con la flecha */
@media(max-width:640px){.hero-rc-receta span,.hero-rc-receta strong::before{display:none}.hero-rc-receta{max-width:min(320px,80vw)}}

/* ============================================================
   COLOR DEL INICIO (Axel, 09-09-2026)
   El amarillo es acento fino: brilla sobre azul y se apaga sobre blanco.
   · Sobre azul: destacado del título, rombos y botón en amarillo (como estaba).
   · Sobre blanco o hielo: el amarillo queda SOLO en el subrayado de los
     enlaces; el destacado del título pasa a azul medio y los rombos y
     detalles a azul claro; las pastillas se rellenan con hielo y bruma,
     los dos tonos de la marca que no se estaban usando.
   · El cierre va en azul profundo, distinto de la banda azul del catálogo,
     con el logo sin fondo (texto blanco + ola amarilla) sobre el título.
   El hero no cambia: su destacado va en el azul oficial (decisión del 08-09).
   ============================================================ */
.home .sec:not(.azul) h2 em{color:var(--azul-med)}
.home .sec:not(.azul) .canales span::before,.home .sec:not(.azul) .pauta::before{background:var(--azul-cla)}
.home .sec:not(.azul) .rec-dos .claves span{background:var(--hielo);border-color:var(--bruma);color:var(--azul-med)}
.home .sec:not(.azul) .cifra b small{color:var(--azul-cla)}
/* Prueba (Axel, 09-09-2026): la banda con la foto del pasillo de supermercado
   detrás ("mayuo traverso vintage banner test"), teñida de azul profundo para
   que el texto siga sobre azul. El velo va de más denso al centro, donde está
   el texto, a algo más abierto en los bordes. */
.home .sec.cie-profundo{position:relative;background:var(--azul-osc);isolation:isolate}
.home .sec.cie-profundo::before{content:"";position:absolute;inset:0;z-index:-2;
  background:url(../img/cierre-supermercado.webp) center/cover no-repeat}
.home .sec.cie-profundo::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(0,9,76,.72) 0%,rgba(0,9,76,.9) 35%,rgba(0,9,76,.9) 65%,rgba(0,9,76,.72) 100%)}
.home .cie-centro .cie-logo{display:block;width:clamp(150px,14vw,210px);height:auto;margin:0 auto 22px}
.home .cie-centro h2{margin-top:0}

/* Etiquetas pequeñas del inicio (Axel, 09-09-2026): la monoespaciada IBM Plex
   Mono le parecía ajena; pasan a la cursiva de Public Sans, la misma familia
   del cuerpo, con el mismo tamaño, mayúscula y espaciado. Cifras de Negocios,
   subtítulos de las puertas y metadatos de las recetas. */
.home .cifra span,.home .pta-sub,.home .rec .meta,.home .rec-chica .rec .meta{
  font-family:var(--cuerpo);font-style:italic;font-weight:500;letter-spacing:.1em}

/* ============================================================
   MEGA MENÚ · purga (Axel, 09-09-2026)
   Sin números ni cuentas (los quita el generador), sin líneas que no
   separan nada: se van los filetes entre columnas, el de la lista, el del
   pie y los de la lista de líneas del panel; el aire hace el trabajo. Las
   etiquetas pequeñas pasan de la monoespaciada a Public Sans cursiva, el
   mismo criterio del inicio.
   ============================================================ */
.v3-lista li a{grid-template-columns:1fr 24px}
/* (09-09-2026, segunda pasada) Axel: los filetes de columnas, del pie y entre
   las líneas del panel funcionan bien y se quedan; solo se van los
   separadores de la lista, que agrupaban por número. */
/* el cuadro del panel: la foto de fondo de la familia a sangre, sin degradado
   ni borde ni envases */
.p3b-arte.fondo{background:none;border:0;display:block;padding:0}
.p3b-arte.fondo .ph{position:absolute;inset:0;aspect-ratio:auto;border-radius:0;height:auto}
.p3b-arte.fondo .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;padding:0;border:0;border-radius:0;box-shadow:none}
.mega .pills span,.mega .puerta small,.mv-puertas .puerta small{font-family:var(--cuerpo);font-style:italic;font-weight:500;letter-spacing:.1em}
.mv-linea{font-family:var(--cuerpo);font-weight:500}
.mv-fam summary{grid-template-columns:1fr 22px}
/* el filete azul del ítem activo sobra: con el fondo celeste basta (Axel, 09-09-2026) */
.v3-lista li a,.v3-lista li.on a,.v3-lista li a:hover{border-left:0;padding-left:14px}
.mv-fam summary,.mv-fam[open] summary{border-left:0;border-radius:8px}

/* ============================================================
   CARD DE CATEGORÍA · el abanico (Lab 08, B; Axel, 09-09-2026, solo escritorio)
   Al pasar el mouse sube desde abajo una tira con los formatos como
   miniaturas; al tocar una, el envase grande cambia (app.js). En táctil
   no existe: ahí sigue la A, el envase que rota solo con sus puntos.
   ============================================================ */
.pr .abanico{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;gap:8px;justify-content:center;flex-wrap:wrap;
  padding:9px 10px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.96) 42%);
  transform:translateY(100%);opacity:0;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s}
.pr:hover .abanico{transform:translateY(0);opacity:1}
/* con muchos formatos (Soya tiene 7) las miniaturas se achican para caber en
   UNA fila: reparten el ancho de la card, con tope de 44 px y sin bajar de 26 */
.pr .abanico{flex-wrap:nowrap;gap:4px;padding:8px 8px}
.pr .abanico button{flex:1 1 0;width:auto;max-width:44px;min-width:0;height:auto;aspect-ratio:1;border-radius:9px;background:#fff;border:1.5px solid var(--linea);cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:4px;transition:border-color .2s}
.pr .abanico button.on,.pr .abanico button:hover{border-color:var(--fam)}
.pr .abanico img{max-width:100%;max-height:100%;width:auto;height:auto}
/* con el abanico, los puntos de la A sobran en escritorio */
@media(hover:hover){.pr .puntos{display:none}}
@media(hover:none){.pr .abanico{display:none}}

/* ============================================================
   CARD DE CATEGORÍA · tamaño y tipografía (Axel, 09-09-2026)
   Mismo tamaño y cuatro columnas de siempre (Axel: "me gustaba mucho el
   tamaño anterior"). Lo que cambia es la caja de texto: sin la cuenta de
   formatos, la card termina justo bajo la bajada. (Por la tarde, al meter la
   placa de marca en la fila, las piezas volvieron a estirarse por fila: ver
   la regla de abajo.) Tipografía con la escala
   del inicio: título --t-tarjeta, bajada --t-nota; la medida de la esquina
   en Public Sans cursiva, como todas las etiquetas pequeñas.
   ============================================================ */
/* 09-09-2026 (tarde, Axel: "deben ser del mismo tamaño"): las piezas de una
   fila vuelven a estirarse a la más alta, cards y placa de marca por igual.
   Así la placa mide lo mismo que las cards de al lado y una card de título
   de una línea no queda más corta que su vecina de dos. El texto sigue
   pegado arriba; el aire sobrante queda bajo la bajada. */
.ca .prods{align-items:stretch}
.ca .prods .placa{min-height:0}
/* mismo aire arriba y abajo del texto (Axel, 09-09-2026): 14 px y 14 px. El
   aire de más que se veía abajo era la bajada, que reservaba dos líneas de
   alto (min-height) aunque tuviera una; en la categoría ya no reserva */
.ca .pr-in{padding-top:14px;padding-bottom:14px}
.ca .pr .sub{min-height:0}
.ca .pr h3{font-size:var(--t-tarjeta);line-height:1.12}
.ca .pr .sub{font-size:var(--t-nota);line-height:1.45;margin-top:4px}
.pr .medida{font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:10.5px;letter-spacing:.08em}
.pr .resumen,.cat-cab .cuenta{display:none}

/* ==================================================================
   CATÁLOGO OFICIAL 2025 (09-09-2026): sellos, atributos, logos de marca
   y formatos sin foto. Ver _fuente/fusionar_catalogo.py.
   ================================================================== */
/* sellos chicos junto al panel de datos de la ficha: mismos octógonos negros,
   a escala de lectura rápida */
.sellos-mini{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.sello-m{width:58px;height:58px;background:#000;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:5px;flex:none;
  clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%);box-shadow:0 0 0 2px #000,0 0 0 3.5px #fff}
.sello-m i{font-style:normal;font-family:var(--sans);font-weight:900;font-size:6px;letter-spacing:.06em;text-transform:uppercase;line-height:1}
.sello-m b{font-family:var(--sans);font-weight:900;font-size:8px;letter-spacing:-.01em;text-transform:uppercase;line-height:1.02;margin-top:2px}
.io-nota{font:italic 500 11px/1.5 var(--cuerpo);color:var(--gris);margin-top:10px}
.ean{font-family:var(--mono);letter-spacing:.08em}
/* atributos del envase: vegano, sin colorantes, 4% acidez… */
.atrib{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.atrib span{font:italic 500 10.5px/1 var(--cuerpo);letter-spacing:.1em;text-transform:uppercase;color:var(--azul);background:var(--hielo);border:1px solid var(--linea);border-radius:999px;padding:7px 11px}
/* formato sin foto (catálogo oficial sin packshot todavía) */
.gal-item.sin-foto .marco img{opacity:.55}
.gal-item.sin-foto .rot em{color:var(--terracota)}
.fp-arte img[src$="sin-foto.svg"]{opacity:.9}
/* logos de marca (del catálogo oficial): placa, índice del inicio y cabecera de la marca */
.p-logo{display:inline-flex;align-items:center;background:#fff;border-radius:10px;padding:9px 13px;margin-top:12px;width:fit-content;max-width:78%}
.p-logo img{display:block;height:clamp(26px,2.4vw,36px);width:auto;max-width:100%;object-fit:contain}
.placa.conlogo h3{font-size:clamp(20px,2vw,28px);margin-top:10px}
/* 09-09-2026 (Axel): la placa ya no lleva rótulo de tipo ni cuenta de productos,
   y con logo no repite el nombre: el logo abre la pieza y debajo va la bajada */
.placa .p-logo{margin-top:0}
.placa.conlogo p{margin-top:12px}
/* el afiche de marca ya no corta a sangre: es una pieza más del mosaico, a lo
   ancho de las doce columnas, con el radio y el margen de las cards. Recupera
   el relleno interior que la versión a sangre ponía en cero. */
.mosaico > .afi{grid-column:1/-1;border-radius:var(--radio);padding-inline:0;
  min-height:clamp(260px,30vh,340px);transition:transform .28s,box-shadow .28s}
.mosaico > .afi:hover{transform:translateY(-4px);box-shadow:var(--sombra)}
.mosaico > .afi .afi-txt{padding:clamp(24px,2.8vw,42px) clamp(20px,2.8vw,42px)}
.mosaico > .afi.condamero .afi-txt{padding-top:clamp(36px,3.6vw,54px)}
/* el logo del afiche va en alfa, sin caja blanca (Kikkoman en su versión
   blanca y mucho más grande; Melitta con su rojo sobre el verde) */
.afi .p-logo.alfa{margin-top:0;padding:0;background:none;border-radius:0;max-width:100%}
.afi .p-logo.alfa img{height:clamp(44px,4.4vw,66px)}
/* el logo apilado de Kikkoman (hexágono sobre la palabra) se mide por alto */
.afi .p-logo.alfa.grande img{height:clamp(96px,9.5vw,150px)}
.afi.conlogo p{margin-top:18px}
/* las columnas del afiche no pueden crecer con la tira (width:max-content):
   sin el mínimo en cero el texto quedaba en una columna angosta y en móvil
   se salía de la card */
.afi{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr)}
.afi .afi-arte,.afi .afi-txt{min-width:0}
@media(max-width:860px){.afi{grid-template-columns:minmax(0,1fr)}}
/* afiche a media anchura (Kikkoman y Melitta lado a lado, 09-09-2026):
   ocupa seis columnas y se apila, texto arriba y la tira de envases abajo */
.mosaico > .afi.media{grid-column:span 6;grid-template-columns:minmax(0,1fr);align-content:start;
  min-height:clamp(400px,42vh,480px)}
.mosaico > .afi.media .afi-txt{padding-bottom:0}
.mosaico > .afi.media .afi-arte{margin-top:auto;padding:clamp(16px,2vw,28px) 0 clamp(18px,2vw,28px)}
.mosaico > .afi.media .p-logo.alfa img{height:clamp(80px,7.5vw,110px)}
.mosaico > .afi.media .p-logo.alfa.grande img{height:clamp(84px,8vw,120px)}
.mosaico > .afi.media p{max-width:44ch}
@media(max-width:1100px){.mosaico > .afi.media{grid-column:1/-1}}
/* Vintage conserva el damero de rockola, ahora dentro de su placa */
.placa .damero{position:absolute;left:0;right:0;top:0;height:10px;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--m-acento) 0 10px,#fff 10px 20px)}
.placa.condamero{padding-top:calc(clamp(18px,1.8vw,26px) + 10px)}
.m-logo{display:inline-flex;align-items:center;background:var(--hielo);border-radius:10px;padding:8px 12px;margin-top:10px}
.m-logo img{display:block;height:28px;width:auto;object-fit:contain}
.cat-cab{position:relative}
.marca-logo{position:absolute;right:clamp(24px,4vw,52px);top:50%;transform:translateY(-50%);background:#fff;border:1px solid var(--linea);border-radius:14px;padding:14px 20px;box-shadow:var(--sombra)}
.marca-logo img{display:block;height:clamp(40px,4.6vw,66px);width:auto;max-width:220px;object-fit:contain}
@media(max-width:860px){.marca-logo{position:static;transform:none;margin-top:16px;width:fit-content}}
/* logos verticales (Higueras): se miden por alto, no por ancho */
.p-logo.alto img{height:clamp(46px,4.2vw,62px)}
.m-logo.alto img{height:44px}
.marca-logo.alto img{height:clamp(70px,7.5vw,116px)}

/* mega menú · paneles Representaciones y Marcas (09-09-2026): título, bajada y
   los logos en mosaico; sin fotos de producto ni lista */
.p3l.on{grid-template-columns:repeat(3,1fr);gap:18px 14px;align-content:center;min-height:300px}
.p3l-txt{grid-column:1/3}
.p3l .lnk{grid-column:1/-1;justify-self:start;margin-top:4px}
.p3l-logos{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.logo-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:124px;padding:18px 16px;background:#fff;border:0;border-radius:14px;text-decoration:none;transition:transform .18s,box-shadow .18s,border-color .18s}
.logo-tile img{display:block;width:80%;height:70px;object-fit:contain}
.logo-tile.alto img{width:auto;height:92px}
.logo-tile span{font-family:var(--sans);font-weight:700;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta2)}
.logo-tile:hover{transform:translateY(-3px);box-shadow:0 18px 30px -18px rgba(0,9,76,.35)}
.logo-tile:hover span{color:var(--azul)}
.mv-bajada{font-size:13.5px;line-height:1.5;color:var(--tinta2);margin:2px 0 12px}
.mv-logos{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:12px}
.mv-logos .logo-tile{flex:0 0 calc(50% - 4px);min-height:104px;padding:14px 8px;gap:10px;border-radius:10px;background:var(--hielo)}
.mv-logos .logo-tile img{width:86%;height:44px}
.mv-logos .logo-tile.alto img{width:auto;height:68px}
.mv-logos .logo-tile span{font-size:9px;letter-spacing:.1em}

/* ANCLAS DE LÍNEA (10-09-2026): los enlaces de línea del menú llegan a la primera card de su línea; que no quede bajo la barra */
.pr[id]{scroll-margin-top:calc(var(--topbar) + 28px)}

/* MEGA MENU · escenas (10-09-2026): el cuadro del panel de cada FAMILIA muestra
   la escena con productos (assets/img/escenas/). Los paneles de Representaciones
   y Marcas no llevan foto (Axel): siguen con texto y logos. */

/* ============================================================
   CARD DE FAMILIA · el muro (Axel, 10-09-2026 · Lab 15, H1)
   El fondo de las cards de familia del inicio y del catálogo es una fotografía
   de luz y sombra sobre estuco: no hay ningún objeto, solo su sombra, así que
   no compite con el packshot que va encima. El muro es neutro y el COLOR lo
   pone el envase: --halo trae el color dominante del packshot y app.js lo
   actualiza cuando el envase rota, así que la card respira con el producto.
   Dos formatos por familia: la 16:9 en el recorte normal y la 4:1 entre 620 y
   1180 px, donde la fila se pone apaisada y la 16:9 se recortaría demasiado.
   El encuadre va subido (34 %) porque la card solo deja ver la franja central
   y la sombra vive arriba.
   ============================================================ */
.bal.muro{--campo:color-mix(in srgb,var(--halo,#8f97c4) 12%,var(--hielo));--img:var(--foto,none)}
@media(min-width:620px) and (max-width:1180px){
  .bal.muro{--img:var(--foto-ancha,var(--foto,none))}
}
/* la card ancha del catálogo (span 8) es apaisada en cualquier pantalla */
.bal.muro.ancha{--img:var(--foto-ancha,var(--foto,none))}
.bal.muro .bal-foto{background:var(--img) center 34%/cover no-repeat,var(--campo);
  transition:background-color .6s ease}
/* el muro toma la temperatura del envase */
.bal.muro .bal-foto::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 82%,
    color-mix(in srgb,var(--halo,#8f97c4) 22%,transparent) 0%,
    color-mix(in srgb,var(--halo,#8f97c4) 9%,transparent) 46%,
    transparent 84%);
  mix-blend-mode:multiply;transition:background .6s ease}
/* apoyo bajo el envase, en vez del velo blanco de la textura anterior */
.bal.muro .bal-foto::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 122%,rgba(8,12,41,.12),transparent 60%)}
/* sombra de contacto: el envase deja de flotar sobre el muro */
.bal.muro .rot::after{content:"";position:absolute;left:50%;bottom:5%;
  width:46%;height:5%;transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(8,12,41,.3),transparent 72%);
  filter:blur(3px);pointer-events:none;z-index:0}
.bal.muro .rot img{filter:drop-shadow(0 14px 16px rgba(8,12,41,.22))}

/* ============================================================
   PÁGINA DE RECETAS · el índice (10-09-2026)
   Faltaba: "Todas las recetas" del inicio y la puerta Recetas del menú
   apuntaban a recetas/ y en el servidor eso daba error, porque el .htaccess no
   lista directorios. La página reusa la cabecera .cat-cab y la tarjeta .rec;
   solo hay que darle a la rejilla y a los filtros el mismo aire que a .prods,
   que .recs no trae porque en el inicio vive dentro de .wrap.
   ============================================================ */
.ca .recs{padding:clamp(20px,2.6vw,34px) clamp(24px,4vw,52px) clamp(30px,4vw,48px)}
.recs-barra{padding:0 clamp(24px,4vw,52px)}
.recs-barra .filtros{margin-bottom:0}
@media(max-width:980px){.ca .recs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.ca .recs{grid-template-columns:1fr}}

/* ============================================================
   BARRA LIMPIA DEL INICIO (Axel, 10-09-2026)
   Mientras el logo grande del hero está a la vista, la barra muestra solo los
   cinco enlaces: sin el logo chico de la izquierda y sin las acciones de la
   derecha, para no repetir la marca dos veces. Al pasar ese logo aparecen con
   un fundido. app.js pone y saca la clase `limpia` midiendo el logo del hero.

   Se usa visibility + opacity y NO display:none, para que la rejilla de tres
   columnas de .topbar-in no se mueva y los cinco enlaces queden centrados igual.
   El burger NO se oculta: en móvil es la única forma de abrir el menú.
   ============================================================ */
.topbar .logo,
.topbar .acciones > .intl,
.topbar .acciones > .acc-ico,
.topbar .acciones > .btn{
  transition:opacity .32s ease,transform .32s ease,visibility .32s;
}
/* Solo de 1201 px para arriba (antes 981; BARRA · tramo medio, 30-09-2026), que es donde se ven los cinco enlaces. Bajo esa
   medida la nav se esconde tras el burger y, sin el logo, la barra quedaría
   vacía y el sitio sin identidad. */
@media(min-width:1201px){
  .topbar.limpia:not(.mega-on):not(.abierto) .logo,
  .topbar.limpia:not(.mega-on):not(.abierto) .acciones > .intl,
  .topbar.limpia:not(.mega-on):not(.abierto) .acciones > .acc-ico,
  .topbar.limpia:not(.mega-on):not(.abierto) .acciones > .btn{
    opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
  }
}
/* Al llegar al pie (Axel, 22-09-2026): mientras el logo del pie está a la vista, el de la
   barra se esconde con el mismo fundido, para no tener la marca dos veces en pantalla.
   app.js pone la clase `al-pie` con un IntersectionObserver sobre el logo del pie. */
.topbar.al-pie:not(.mega-on):not(.abierto) .logo{opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none}
@media(prefers-reduced-motion:reduce){
  .topbar .logo,.topbar .acciones > *{transition:none}
}



/* === CONTACTO · inicio (generado por 04-desarrollo-de-diseno/_gen/contacto_sitio.py; no editar aquí) === */
/* ============================================================
   CONTACTO · la página según el cuestionario (Lab 26, 15-09-2026)
   Cabecera estándar (.cat-cab) · la pregunta "¿En qué podemos
   ayudarte?" con los siete motivos como lista de filetes, fija a un
   tercio · el formulario a dos tercios, que cambia con el motivo
   ("quiero comprar" no tiene formulario: va a la tienda) · debajo,
   Contacto general y Contacto comercial como dos columnas planas.
   Decisiones de Axel (15-09-2026): cabecera estándar, lista de
   filetes ("ese queda"), general y comercial sin foto, sin card y
   sobre blanco, sin "cómo llegar", amables pero sin invitar a ir;
   "preciso". Rótulos chicos en la
   cursiva medium de Public Sans; acento del título en azul sobre
   fondo claro; sin colores de familia.
   ============================================================ */
.pag-contacto .sec:not(.azul):not(.oscuro) h2 em{color:var(--azul)}
.ct-eti{font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;line-height:1.4}
.ct-cab .lead{max-width:62ch}

/* la pregunta y la lista, fijas a un tercio; el formulario a dos tercios */
.ct-ws-sec{padding-top:clamp(36px,4.6vw,64px)}
.ct-ws{display:grid;grid-template-columns:minmax(280px,1fr) 2fr;gap:clamp(32px,5vw,88px);align-items:start}
.ct-ws-izq{position:sticky;top:calc(var(--topbar) + 28px)}
.ct-ws-izq h2{font-size:clamp(28px,3vw,40px)}
.ct-ws-txt{margin-top:12px;color:var(--tinta2);font-size:15px;line-height:1.55;max-width:34ch}

/* la lista de filetes: filas separadas por una línea, el elegido en azul con la flecha.
   Son radios fuera del formulario; el JS pasa el elegido al campo oculto `motivo`. */
.ct-lista{display:flex;flex-direction:column;margin-top:22px;border-top:1px solid var(--linea)}
.ct-op{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 14px;padding:13px 2px;border-bottom:1px solid var(--linea);cursor:pointer}
.ct-op input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.ct-op b{font-family:var(--sans);font-weight:800;font-size:15px;letter-spacing:-.01em;text-transform:uppercase;line-height:1.1;color:var(--tinta);transition:color .2s}
.ct-op span{grid-column:1;font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:12px;line-height:1.4;color:var(--gris)}
.ct-op::after{content:"→";grid-column:2;grid-row:1/3;font-family:var(--sans);font-weight:700;font-size:16px;color:var(--azul);opacity:0;transform:translateX(-6px);transition:opacity .2s,transform .2s}
.ct-op:hover b,.ct-op.on b{color:var(--azul)}
.ct-op.on span{color:var(--azul-med)}
.ct-op.on::after,.ct-op:hover::after{opacity:1;transform:none}
.ct-op:has(input:focus-visible){outline:3px solid var(--amarillo);outline-offset:2px}

/* el formulario */
.ct-caja{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:clamp(26px,3.4vw,44px);scroll-margin-top:calc(var(--topbar) + 24px)}
.ct-caja[hidden]{display:none}
.ct-form-cab h3{font-size:clamp(24px,2.4vw,32px)}
.ct-form-cab p{margin-top:10px;color:var(--tinta2);font-size:15.5px;line-height:1.55;max-width:72ch}
.ct-campos{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;margin-top:26px}
.campo{display:flex;flex-direction:column;gap:7px;min-width:0}
.campo.ancho{grid-column:1/-1}
.campo[hidden]{display:none}
.campo label{font-family:var(--sans);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta2)}
.campo label small{font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:11px;letter-spacing:.06em;text-transform:none;color:var(--gris);margin-left:6px}
.campo input,.campo select,.campo textarea{font:inherit;font-size:16px;padding:13px 14px;border:1px solid var(--linea);border-radius:8px;background:var(--hielo-2);color:var(--tinta);outline:none;width:100%;transition:border-color .2s,box-shadow .2s,background .2s}
.campo input::placeholder,.campo textarea::placeholder{color:#9ba0c2}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--azul);box-shadow:0 0 0 3px var(--hielo);background:#fff}
.campo textarea{min-height:150px;resize:vertical}
.campo select{appearance:none;-webkit-appearance:none;padding-right:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23000e78' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center}
.ct-pie{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:24px}
.ct-pie p{font-size:13.5px;color:var(--gris)}
.ct-pie p a{color:var(--azul-med)}
.ct-hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}
.ct-ok,.ct-error{margin-top:18px;padding:16px 18px;border-radius:10px;font-size:15px;line-height:1.5}
.ct-ok{background:var(--hielo);color:var(--tinta)}
.ct-error{background:#fbe9ec;color:var(--carmin-osc)}
.ct-ok[hidden],.ct-error[hidden]{display:none}

/* "quiero comprar": sin formulario; la tienda y los canales, en azul */
.ct-comprar{background:var(--azul);color:#fff;border-radius:var(--radio);padding:clamp(28px,3.6vw,48px);display:grid;grid-template-columns:1fr auto;gap:28px 40px;align-items:center;scroll-margin-top:calc(var(--topbar) + 24px)}
.ct-comprar[hidden]{display:none}
.ct-comprar h3{font-size:clamp(24px,2.4vw,32px)}
.ct-comprar p{margin-top:12px;color:#d6d9f4;font-size:16px;line-height:1.55;max-width:58ch}
.ct-comprar .lnk{display:inline-flex;margin-top:20px;color:#fff;font-size:11.5px}
.ct-comprar .btn.amarillo{white-space:nowrap}

/* contacto general | contacto comercial: dos columnas planas sobre blanco, sin
   card y sin línea (Axel: "sin card en fondo blanco total", "sin línea") */
.ct-tarjetas{padding:0 0 clamp(56px,7vw,96px)}
.ct-tj-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);padding-top:clamp(16px,2vw,28px)}
.ct-tj{display:flex;flex-direction:column;scroll-margin-top:calc(var(--topbar) + 24px)}
.ct-tj h2{margin-top:0;font-size:clamp(24px,2.4vw,34px)}
.ct-tj .lead{margin-top:12px;font-size:15.5px;line-height:1.6;max-width:52ch}
.ct-datos{display:grid;grid-template-columns:1fr 1fr;gap:16px 22px;margin-top:22px}
.ct-dato .ct-eti{display:block;color:var(--azul-med);margin-bottom:6px}
.ct-dato b,.ct-dato a{display:block;font-family:var(--cuerpo);font-weight:600;font-size:17px;line-height:1.4;color:var(--tinta);text-decoration:none}
.ct-dato a{text-decoration:underline;text-decoration-color:var(--amarillo);text-decoration-thickness:2px;text-underline-offset:4px;width:max-content;max-width:100%}
.ct-dato a:hover{color:var(--azul)}
.ct-dato small{display:block;font-size:14px;line-height:1.4;color:var(--tinta2);margin-top:2px}
.ct-puertas{margin-top:22px;border-top:1px solid var(--linea)}
.ct-puerta{display:flex;align-items:center;gap:18px;padding:16px 0;border-bottom:1px solid var(--linea);text-decoration:none;color:inherit}
.ct-puerta b{display:block;font-family:var(--sans);font-weight:700;font-size:clamp(16px,1.4vw,19px);letter-spacing:-.012em;line-height:1.1;transition:color .25s}
.ct-puerta span{display:block;font-size:13.5px;line-height:1.5;color:var(--tinta2);margin-top:5px}
.ct-puerta i{margin-left:auto;flex:none;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--azul);color:var(--azul);display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:14px;transition:background .25s,color .25s}
.ct-puerta:hover b{color:var(--azul)}
.ct-puerta:hover i{background:var(--azul);color:#fff}

/* responsivo */
@media(max-width:980px){
  .ct-ws{grid-template-columns:1fr}
  .ct-ws-izq{position:static}
  .ct-tj-grid{grid-template-columns:1fr}
}
@media(max-width:700px){
  .ct-campos{grid-template-columns:1fr}
  .ct-datos{grid-template-columns:1fr}
  .ct-comprar{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.ct-op b,.ct-op::after,.ct-puerta i{transition:none}}
/* === CONTACTO · fin === */





/* === NOSOTROS · inicio (generado por 04-desarrollo-de-diseno/_gen/nosotros_sitio.py; no editar aquí) === */
/* ============================================================
   Laboratorio · Lab 23 · Nosotros (15-09-2026)
   Una sola página: portada · en un minuto · historia (A o B) ·
   propósito · calidad y procesos · negocios · cierre.
   La cargan nosotros-a.html y nosotros-b.html (generadas por
   _gen/nosotros.py). Cuando se elija, el bloque se migra a estilo.css
   y las imágenes de img-nosotros/ a assets/img/historia/.
   Reglas: gama corporativa (azul, hielo, amarillo como detalle),
   sin colores de familia; rótulos chicos en la cursiva medium de
   Public Sans (Axel, 09-09-2026), no en la monoespaciada.
   ============================================================ */

/* Axel (15-09-2026): el acento de los títulos va en azul Traverso, no en amarillo.
   Sobre fondo claro (en un minuto, historia, calidad, negocios) el <em> toma el
   azul oficial; sobre azul o foto oscura (portada, propósito, cierre) se mantiene
   el amarillo, como en el inicio, porque azul sobre azul no se lee. */
.pag-nosotros .sec:not(.azul):not(.oscuro) h2 em{color:var(--azul)}

/* Axel (15-09-2026): las imágenes van con esquinas rectas (decisión de diseño que cambió en el camino) */
.pag-nosotros .ph,.pag-nosotros .ph.pend,.pag-nosotros .ng,.pag-nosotros .ns-slider{border-radius:0}

/* rótulo chico de la página (fichas, leyendas, escala) */
.ns-eti{font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;line-height:1.4}

/* ============================================================
   PORTADA · foto real de la planta con zoom out lento (Axel: foto,
   no video). El zoom es CSS puro; el paralaje al bajar lo hace el JS.
   Alto (Axel, 15-09-2026): el mismo que el header de Recetas, 620 px
   fijos (con vh los dos no coincidían: el contenido de esta portada
   ya mide ~616 px a 1440) — la pantalla completa no funcionaba.
   ============================================================ */
.ns-hero{position:relative;min-height:620px;display:flex;align-items:flex-end;color:#fff;background:var(--azul-osc);overflow:hidden;isolation:isolate}
.ns-hero .fondo{position:absolute;inset:0;z-index:0}
.ns-hero .fondo img{width:100%;height:100%;object-fit:cover;object-position:center 40%;transform:scale(1.2);animation:ns-zoom 18s cubic-bezier(.12,.55,.2,1) forwards}
@keyframes ns-zoom{to{transform:scale(1.02)}}
/* sin velo sobre la foto (Axel, 15-09-2026); la legibilidad la da una sombra suave en los textos */
.ns-hero-in{position:relative;z-index:2;max-width:var(--ancho);margin:0 auto;padding:clamp(120px,14vw,170px) var(--gutter) clamp(44px,5vw,72px);width:100%}
.ns-hero h1{max-width:none;font-size:clamp(40px,6.1vw,92px);text-shadow:0 2px 4px rgba(0,9,76,.35),0 6px 30px rgba(0,9,76,.45)}
.ns-hero h1 em{color:var(--amarillo);font-style:normal}
.ns-hero-acc{display:flex;gap:26px;align-items:center;margin-top:30px;flex-wrap:wrap}
.ns-hero-acc .lnk{color:#fff}
@media(prefers-reduced-motion:reduce){.ns-hero .fondo img{animation:none;transform:none}}
@media(max-width:700px){.ns-hero{min-height:82vh}}

/* ============================================================
   TRAVERSO EN UN MINUTO · texto + mosaico de fotos reales, y
   debajo la fila de cifras que cuentan (data-contar de app.js)
   ============================================================ */
.ns-min-grid{display:grid;grid-template-columns:var(--dos-cols);gap:var(--dos-gap);align-items:center}   /* la misma rejilla de dos columnas de todo el sitio (Axel, 08-09-2026) */
.ns-min-grid > *{min-width:0}
.ns-min h2{font-size:clamp(28px,3.4vw,46px);margin-top:16px}
.ns-min .lead{margin-top:20px;max-width:62ch;font-size:clamp(15.5px,1.2vw,17.5px);line-height:1.62}
.ns-min .lead+.lead{margin-top:12px}
/* el slider sutil (Lab 26 · U1): una ventana 4:5, fundido lento y acercamiento apenas perceptible */
.ns-slider{position:relative;width:100%;max-width:560px;justify-self:end;aspect-ratio:4/5;overflow:hidden;background:var(--hielo);isolation:isolate}   /* más chico (Axel, 15-09-2026): 480 px como máximo, centrado en su columna */
.ns-slider figure{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.8s ease}
.ns-slider figure.on{opacity:1;z-index:1}
.ns-slider img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.001);transition:transform 9s linear}
.ns-slider figure.on img{transform:scale(1.07)}
@media(prefers-reduced-motion:reduce){.ns-slider img,.ns-slider figure.on img{transform:none;transition:none}}
/* las cifras, incorporadas a la columna del texto (Axel, 15-09-2026: "más sutiles, elegantes"):
   una fila discreta bajo los párrafos, números medianos, rótulo en la cursiva chica, filetes finos */
.ns-cifras{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:clamp(26px,3vw,40px);padding-top:clamp(18px,2vw,26px);border-top:1px solid var(--linea)}
.ns-cifras .cifra{padding:2px 12px 2px 0;margin-right:clamp(14px,1.6vw,24px);border-right:1px solid var(--linea)}
.ns-cifras .cifra:last-child{border-right:0;margin-right:0;padding-right:0}
.ns-cifras .cifra b{font-size:clamp(22px,2vw,30px);font-weight:700;letter-spacing:-.02em}
.ns-cifras .cifra span{font-family:var(--cuerpo);font-style:italic;font-weight:500;letter-spacing:.08em;font-size:9.5px;margin-top:5px;max-width:none}
@media(max-width:1200px){.ns-cifras{grid-template-columns:repeat(3,1fr);row-gap:14px}.ns-cifras .cifra:nth-child(3){border-right:0}}   /* que el rótulo quepa en dos líneas, no en tres */
@media(max-width:900px){.ns-min-grid{grid-template-columns:1fr}}
@media(max-width:560px){.ns-cifras{grid-template-columns:repeat(2,1fr)}.ns-cifras .cifra:nth-child(3){border-right:1px solid var(--linea)}.ns-cifras .cifra:nth-child(2n){border-right:0}}

/* ============================================================
   NUESTRA HISTORIA · cabecera común a las dos mecánicas
   ============================================================ */
.ns-hist{background:var(--hielo-2);padding:0}   /* solo el pasillo, sin cabecera (Axel, 15-09-2026) */
.ns-hist-h{max-width:960px}
.ns-hist-h h2{font-size:clamp(30px,4.2vw,58px);margin-top:16px;max-width:18ch}
.ns-hist-h .lead{margin-top:20px;max-width:64ch}
.ns-pc{display:inline-flex;align-items:center;gap:6px;font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--terracota);border:1px dashed var(--terracota);padding:4px 9px;border-radius:20px;background:#fff}

/* objetos de la línea de tiempo (compartidos por A y B) */
.ph.arch{background:#f4f1e8;border:1px solid #e6e0cf}
.ph.arch img{object-fit:contain;padding:12%;filter:sepia(.3) contrast(1.03)}
.ph.plano{background:#fff}
.ph.plano img{object-fit:contain;padding:7%}
.ph.pack{background:var(--hielo)}
.ph.pack img{object-fit:contain;padding:10%;filter:drop-shadow(0 18px 18px rgba(0,9,76,.22))}
.ph .stamp{position:absolute;top:12px;left:12px;z-index:2;font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--azul);background:rgba(255,255,255,.92);padding:5px 9px;border-radius:6px;box-shadow:0 2px 8px rgba(0,14,120,.1)}
.ph.pend .stamp{display:none}
/* 1896: la etiqueta de fábrica dibujada, mientras no llegue el retrato */
.etq-1896{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-3deg);width:64%;aspect-ratio:1/1.2;background:#fffdf6;border:2px solid var(--azul);border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:10% 8%;box-shadow:inset 0 0 0 5px #fff,inset 0 0 0 6px var(--azul),0 18px 30px -18px rgba(0,9,76,.45);z-index:1}
.etq-1896 small{font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta2)}
.etq-1896 b{font-family:var(--sans);font-weight:800;font-size:clamp(20px,2vw,30px);line-height:.95;text-transform:uppercase;letter-spacing:-.01em;color:var(--azul)}
.etq-1896 i{display:block;width:34px;height:3px;background:var(--amarillo);margin:4px 0}
.etq-1896 span{font-family:var(--sans);font-weight:700;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--azul-med)}
/* 2003–2008: la cita de archivo (lo que decía el sitio de 2008) */
.cita-2008{position:relative;height:100%;display:flex;flex-direction:column;justify-content:center;gap:16px;padding:clamp(18px,2vw,28px);background:#fffdf6;border:1px solid #e6e0cf;border-radius:10px}
.cita-2008 img{width:min(190px,70%);height:auto;filter:grayscale(.2)}
.cita-2008 blockquote{font-family:var(--cuerpo);font-style:italic;font-weight:400;font-size:clamp(13.5px,1.05vw,15.5px);line-height:1.5;color:var(--tinta)}
.cita-2008 blockquote::before{content:"\201C";font-family:var(--sans);font-weight:800;font-size:2.4em;line-height:0;color:var(--amarillo);vertical-align:-.35em;margin-right:4px}
.cita-2008 cite{font-style:normal}
.cita-2008 .spots{display:flex;gap:6px}
.cita-2008 .spots img{width:54px;height:54px;object-fit:cover;border-radius:6px;filter:none}

/* ============================================================
   A · EL AÑO QUE CORRE · la columna izquierda queda fija y el año
   cuenta hasta el hito que está a la vista; las fichas de archivo
   desfilan a la derecha con el trazo amarillo dibujándose.
   ============================================================ */
.tlA{display:grid;grid-template-columns:minmax(260px,.85fr) minmax(0,1.5fr);gap:clamp(28px,5vw,90px);align-items:start;margin-top:clamp(32px,5vw,72px)}
.tlA-ano{position:sticky;top:calc(var(--topbar) + 40px)}
.tlA-num{font-family:var(--sans);font-weight:800;font-size:clamp(96px,12.5vw,232px);line-height:.84;letter-spacing:-.055em;color:var(--azul);font-variant-numeric:tabular-nums;white-space:nowrap}
.tlA-num b{font-weight:inherit}
.tlA-num i{font-style:normal;color:var(--bruma)}
.tlA-era{margin-top:18px;display:flex;align-items:center;gap:10px;font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--azul-med)}
.tlA-era::before{content:"";width:24px;height:3px;background:var(--amarillo);flex:none}
.tlA-indice{margin-top:34px;display:flex;flex-direction:column;gap:4px;border-left:1px solid var(--linea);padding-left:20px}
.tlA-indice button{text-align:left;font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);padding:4px 0;position:relative;transition:color .25s}
.tlA-indice button::before{content:"";position:absolute;left:-25px;top:50%;width:9px;height:9px;border-radius:50%;background:var(--linea);transform:translateY(-50%);transition:background .25s,box-shadow .25s}
.tlA-indice button:hover{color:var(--tinta)}
.tlA-indice button.on{color:var(--azul)}
.tlA-indice button.on::before{background:var(--amarillo);box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--azul)}
.tlA-fichas{position:relative;padding-left:44px}
.tlA-linea{position:absolute;left:8px;top:0;bottom:0;width:2px;background:var(--linea)}
.tlA-linea i{position:absolute;inset:0;background:var(--amarillo);transform:scaleY(0);transform-origin:top}
.fa{position:relative;display:grid;grid-template-columns:minmax(220px,.84fr) 1.16fr;gap:clamp(20px,3vw,40px);background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:clamp(20px,2.6vw,34px);margin-bottom:clamp(28px,4vw,60px);box-shadow:var(--sombra-s);transition:border-color .35s,box-shadow .35s}
.fa:last-child{margin-bottom:0}
.fa::before{content:"";position:absolute;left:-42px;top:36px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--linea);transition:border-color .3s,background .3s;z-index:2}
.fa.on{border-color:var(--azul);box-shadow:var(--sombra)}
.fa.on::before{border-color:var(--azul);background:var(--amarillo)}
.fa-obj{min-width:0}
.fa-obj .ph{aspect-ratio:4/5;border-radius:10px;height:100%;max-height:440px}
.fa-txt{display:flex;flex-direction:column;justify-content:center;min-width:0}
.fa-cab{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--azul-med)}
.fa-cab b{font-family:var(--sans);font-style:normal;font-weight:800;font-size:12px;letter-spacing:.04em;color:var(--azul);background:var(--hielo);padding:4px 8px;border-radius:6px}
.fa-txt h3{font-size:clamp(22px,2.2vw,31px);margin-top:14px;max-width:18ch}
.fa-txt p{margin-top:12px;color:var(--tinta2);font-size:15.5px;line-height:1.62;max-width:52ch}
.fa-cap{margin-top:16px;font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);line-height:1.5;max-width:46ch}
.fa-pie{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px}
.tlA-cierre{margin-top:clamp(28px,4vw,56px);padding-top:8px}
@media(max-width:900px){
  .tlA{grid-template-columns:1fr;gap:0}
  .tlA-ano{top:var(--topbar);z-index:20;background:rgba(246,247,253,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:baseline;gap:16px;padding:10px 0;border-bottom:1px solid var(--linea);margin-bottom:24px}
  .tlA-num{font-size:46px}
  .tlA-era{margin-top:0;font-size:10.5px}
  .tlA-indice{display:none}
  .tlA-fichas{padding-left:26px}
  .tlA-linea{left:4px}
  .fa{grid-template-columns:1fr}
  .fa::before{left:-27px;top:24px;width:12px;height:12px}
  .fa-obj .ph{aspect-ratio:16/10;height:auto;max-height:none}
}

/* ============================================================
   B · EL PASILLO · la sección se ancla y la historia avanza de
   lado con el scroll; cada época es un panel; el hilo amarillo
   cruza todos los paneles y la escala de abajo dice dónde estás.
   En móvil no hay anclaje: los paneles se apilan.
   ============================================================ */
.tlB{position:relative;margin-top:0}
.tlB-pin{position:relative;height:calc(100vh - var(--topbar));min-height:560px;overflow:hidden;background:#fff;border-top:1px solid var(--linea)}
.tlB-track{position:relative;display:flex;width:max-content;height:100%;will-change:transform}   /* max-content: el hilo (::before) cruza todos los paneles */
.tlB-p{position:relative;flex:none;width:clamp(640px,76vw,1280px);height:100%;overflow:hidden;background:#fff;border-right:1px solid var(--linea)}
.tlB-p:nth-child(even){background:var(--hielo-2)}
.tlB-p:last-child{border-right:0}   /* su ancho lo fija el JS al ancho de la ventana, para cerrar limpio */
.tlB-p.azul{background:var(--azul);color:#fff;border-right:0}
.tlB-fondo{position:absolute;inset:0;z-index:0}
.tlB-fondo img{width:100%;height:100%;object-fit:cover;opacity:.5}
.tlB-fondo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,9,76,.92) 0%,rgba(0,9,76,.62) 50%,rgba(0,9,76,.3) 100%)}
.tlB-in{position:relative;z-index:2;height:100%;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,3vw,56px);padding:clamp(28px,4vw,56px) clamp(28px,4.5vw,72px) 128px;align-items:center}
.tlB-txt{display:flex;flex-direction:column;justify-content:center;min-width:0}
.tlB-cab{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--azul-med)}
.tlB-cab b{font-family:var(--sans);font-style:normal;font-weight:800;font-size:12px;letter-spacing:.04em;color:var(--azul);background:var(--hielo);padding:4px 8px;border-radius:6px}
.tlB-p.azul .tlB-cab{color:#c9cef5}
.tlB-p.azul .tlB-cab b{background:rgba(255,255,255,.12);color:#fff}
.tlB-ano{font-family:var(--sans);font-weight:700;font-stretch:100%;font-size:clamp(92px,13vw,236px);line-height:.86;letter-spacing:-.035em;color:var(--azul);margin-top:12px;white-space:nowrap}   /* Archivo al ancho justo, como los títulos del inicio; en 700 y no en 800 para que los números no se lean anchos (Axel, 15-09-2026) */
.tlB-ano.largo{font-size:clamp(54px,6.6vw,120px);line-height:.92;letter-spacing:-.03em}
.tlB-p.azul .tlB-ano{color:#fff}
.tlB-txt h3{font-size:clamp(22px,2.3vw,32px);margin-top:22px;max-width:20ch}
.tlB-txt p{margin-top:14px;color:var(--tinta2);font-size:clamp(15px,1.15vw,17px);line-height:1.6;max-width:50ch}
.tlB-p.azul .tlB-txt p{color:#d6d9f4}
.tlB-txt .fa-cap{max-width:44ch}
.tlB-p.azul .fa-cap{color:#a9b0e6}
.tlB-obj{display:flex;align-items:center;justify-content:center;min-width:0;height:100%}
.tlB-obj .ph{width:100%;max-height:min(60vh,600px);aspect-ratio:4/5;border-radius:var(--radio);box-shadow:var(--sombra)}
.tlB-p.azul .tlB-obj .ph{box-shadow:0 30px 70px -30px rgba(0,0,0,.6)}
/* el hilo amarillo y el punto de cada época */
.tlB-track::before{content:"";position:absolute;left:0;right:0;bottom:96px;height:3px;background:var(--amarillo);z-index:3}
.tlB-p::after{content:"";position:absolute;left:clamp(28px,4.5vw,72px);bottom:87px;width:17px;height:17px;border-radius:50%;background:var(--azul);border:3px solid var(--amarillo);z-index:4;box-sizing:border-box;transition:transform .3s}
.tlB-p.on::after{transform:scale(1.35)}
/* la botonera flotante (Axel, 15-09-2026): compacta y más arriba para poder hacer clic;
   al fondo solo el avance y el color. Flechas de época anterior / siguiente. */
.tlB-nav{position:absolute;left:0;right:0;bottom:0;z-index:5;pointer-events:none}
.tlB-avance{position:absolute;left:0;right:0;bottom:0;height:5px;background:rgba(0,9,76,.5)}
.tlB-prog{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--amarillo)}
.tlB-botonera{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);display:flex;align-items:center;gap:2px;padding:5px;border-radius:40px;background:rgba(8,12,41,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 14px 34px -12px rgba(0,0,0,.55);pointer-events:auto;max-width:calc(100% - 2*var(--gutter))}
.tlB-botonera ol{display:flex;gap:2px;list-style:none}
.tlB-botonera li button,.tlB-flecha{font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#c9cef5;padding:10px 15px;border-radius:30px;white-space:nowrap;transition:background .2s,color .2s}
.tlB-botonera li button:hover,.tlB-flecha:hover{color:#fff;background:rgba(255,255,255,.1)}
.tlB-botonera li.on button{background:var(--amarillo);color:var(--tinta);font-style:normal;font-weight:700}
.tlB-flecha{font-style:normal;font-size:16px;line-height:1;padding:8px 13px}
.tlB-flecha[disabled]{opacity:.3;pointer-events:none}
/* la salida rápida (Axel, 15-09-2026): saltar la historia e ir a la sección siguiente */
.tlB-saltar{font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta);background:#fff;text-decoration:none;padding:10px 15px;border-radius:30px;margin-left:6px;white-space:nowrap;transition:background .2s,color .2s}
.tlB-saltar:hover{background:var(--amarillo)}
.tlB-pista{position:absolute;right:var(--gutter);top:22px;z-index:5;display:flex;gap:10px;align-items:center;font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);transition:opacity .4s}
.tlB-pista i{display:block;width:34px;height:2px;background:var(--amarillo);animation:ns-pista 1.6s ease-in-out infinite}
@keyframes ns-pista{0%,100%{transform:translateX(0)}50%{transform:translateX(8px)}}
.tlB-cierre{max-width:var(--ancho);margin:clamp(28px,4vw,56px) auto 0;padding:0 var(--gutter)}
/* ---------- el año al mismo tamaño en todos los paneles (Axel, 15-09-2026) ---------- */
:root{--tl-ano:clamp(64px,9vw,160px)}   /* 2013 tenía 13 vw y "Siglo XX" 6,6 vw; el promedio ronda 9-10 vw */
.tlB .tlB-ano,.tlB .tlB-ano.largo{font-size:var(--tl-ano);line-height:.9;letter-spacing:-.035em}
.tlB .tlB-cuerpo h3{margin-top:0}
.tlB .tlB-cuerpo{margin-top:22px}
.tlB .tlB-txt > .tlB-cuerpo p{margin-top:12px}

/* ============================================================
   EL AFICHE (Lab 24 · P2, elegido el 15-09-2026) · cada época es una pantalla completa partida en dos
   cajas, 1:3 y 2:3 (Axel, 15-09-2026): la imagen u objeto en el tercio
   izquierdo y el texto perfectamente centrado en los dos tercios de la
   derecha. Con foto entera, la foto cubre todo el panel (también el
   tercio) y el texto va sobre un velo que crece hacia la derecha.
   ============================================================ */
.p-afiche .tlB-p{width:calc(100vw - var(--sb,0px));border-right:0}
.p-afiche .tlB-fondo{display:none}
.p-afiche .tlB-in{display:grid;grid-template-columns:1fr 2fr;gap:0;height:100%;padding:0 0 96px;align-items:stretch}
/* la caja del texto (2:3): el bloque perfectamente centrado en los dos ejes y, dentro,
   el texto alineado a la izquierda (Axel: "eso ayuda a la lectura"). Una sola columna
   de rejilla del ancho del contenido, centrada; todo comparte el mismo borde izquierdo */
.p-afiche .tlB-txt{grid-column:2;position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,max-content);justify-content:center;align-content:center;justify-items:start;text-align:left;padding:4vh 6% 4vh;min-width:0}
.p-afiche .tlB-cuerpo h3{max-width:22ch}
.p-afiche .tlB-cuerpo p{max-width:56ch}
.p-afiche .tlB-cuerpo .fa-cap{max-width:52ch}
/* sin el rótulo "05 · Calidad" (Axel, 15-09-2026): el año y el título bastan */
.p-afiche .tlB-cab{display:none}
/* la caja de la imagen (1:3): el objeto ocupa la caja y se alinea a la derecha, pegado al texto */
.p-afiche .tlB-obj{grid-column:1;grid-row:1;position:relative;height:100%;display:flex;align-items:center;justify-content:flex-end;padding:6vh 4% 6vh 10%;min-width:0}
.p-afiche .tlB-obj .ph{width:100%;height:100%;max-height:none;aspect-ratio:auto;background:transparent;border:0;box-shadow:none;border-radius:0}
.p-afiche .tlB-obj .ph img{padding:0;object-fit:contain;object-position:right center}
.p-afiche .tlB-obj .ph .stamp{left:auto;right:12px}   /* el sello "Archivo · 2002" acompaña a la imagen, que va a la derecha */
.p-afiche .t-pend .tlB-obj .ph{width:90%;background:rgba(255,255,255,.12);border:1px dashed rgba(0,14,120,.25);border-radius:var(--radio)}
.p-afiche .t-pend.azul .tlB-obj .ph{border-color:rgba(255,255,255,.35)}
.p-afiche .t-cita .tlB-obj .cita-2008{width:min(100%,540px);height:auto;max-height:100%;margin-left:auto}
/* con foto entera: la foto cubre todo el panel, incluido el tercio; el velo crece hacia el texto */
.p-afiche .t-foto .tlB-obj{position:absolute;left:0;right:0;top:0;bottom:96px;grid-column:auto;grid-row:auto;height:auto;padding:0;display:block;z-index:0}
.p-afiche .t-foto .tlB-obj .ph{position:absolute;inset:0;width:100%;height:100%}
.p-afiche .t-foto .tlB-obj .ph img{object-fit:cover}
.p-afiche .t-foto .tlB-obj::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,9,76,.06) 0%,rgba(0,9,76,.28) 33%,rgba(0,9,76,.78) 60%,rgba(0,9,76,.86) 100%);z-index:1}
.p-afiche .t-foto,.p-afiche .tlB-p.azul{color:#fff}
.p-afiche .t-foto .tlB-cab{color:#c9cef5}
.p-afiche .t-foto .tlB-cab b{background:rgba(255,255,255,.14);color:#fff}
.p-afiche .t-foto .tlB-ano,.p-afiche .t-foto h3{color:#fff}
.p-afiche .t-foto .tlB-cuerpo p{color:#d6d9f4}
.p-afiche .t-foto .fa-cap{color:#a9b0e6}
/* con objeto: el panel es un campo de color (papel, hielo, blanco) */
.p-afiche .t-arch,.p-afiche .t-pend:not(.azul){background:#f4f1e8}
.p-afiche .t-pack{background:var(--hielo)}
.p-afiche .t-plano{background:#fff}
.p-afiche .t-cita{background:#fffdf6}
/* el punto de época, bajo el centro de la caja del texto */
.p-afiche .tlB-p::after{left:calc(66.666% - 8px)}
/* la portada del pasillo (Axel, 15-09-2026): el logo en lugar del título, la bajada debajo, todo azul */
.p-afiche .tlB-portada .tlB-logo{width:min(100%,400px);height:auto}
.p-afiche .tlB-portada .lead{color:#d6d9f4;margin-top:28px;max-width:52ch}
.p-afiche .tlB-portada::after{display:none}
.ns-hero h1{margin-bottom:6px}

@media(max-width:980px){
  .tlB-pin{height:auto;min-height:0;overflow:visible}
  .tlB-track{flex-direction:column;width:auto;height:auto}
  .tlB-p,.tlB-p:last-child{width:auto;height:auto;border-right:0;border-bottom:1px solid var(--linea)}
  .tlB-in{grid-template-columns:1fr;padding:32px var(--gutter) 40px;height:auto}
  .tlB-ano{font-size:clamp(64px,18vw,120px)}
  .tlB-ano.largo{font-size:clamp(40px,10vw,64px)}
  .tlB-obj{order:-1;height:auto}
  .tlB-obj .ph{aspect-ratio:16/10;max-height:none}
  .tlB-track::before,.tlB-p::after,.tlB-nav,.tlB-pista{display:none}
  .p-afiche .tlB-p{width:auto}
  .p-afiche .tlB-in{display:block;padding:0 0 32px;height:auto}
  .p-afiche .tlB-obj,.p-afiche .t-foto .tlB-obj{position:relative;inset:auto;height:auto;padding:0;display:block}
  .p-afiche .tlB-obj .ph,.p-afiche .t-foto .tlB-obj .ph{position:relative;inset:auto;aspect-ratio:16/10;height:auto}
  .p-afiche .t-foto .tlB-obj::after{display:none}
  .p-afiche .t-foto{color:var(--tinta)}
  .p-afiche .t-foto .tlB-ano,.p-afiche .t-foto h3{color:var(--azul)}
  .p-afiche .t-foto .tlB-cuerpo p{color:var(--tinta2)}
  .p-afiche .tlB-txt{display:block;position:relative;padding:24px var(--gutter) 0}
}

/* ============================================================
   LO QUE NOS MUEVE (Lab 25 · M1 "Dos frases", elegida el 15-09-2026)
   Azul liso, sin foto. El título, dos frases apiladas —lo que hacemos
   cada día (misión) y hacia dónde vamos (visión)— que se escriben
   palabra a palabra con el scroll, y los valores en cuatro columnas de
   texto. Sin eyebrow, sin rótulos Visión / Misión, sin "Valor 01".
   ============================================================ */
.ns-pp{background:var(--azul)}
.ns-pp h2{font-size:clamp(30px,4.2vw,58px)}
.pp-txt{font-family:var(--cuerpo);font-weight:500;font-size:clamp(22px,2.7vw,42px);line-height:1.24;letter-spacing:-.012em;color:#fff;max-width:30ch}
.pp-txt .w{display:inline-block}
.pp-frases{margin-top:clamp(44px,6vw,84px);display:flex;flex-direction:column;gap:clamp(44px,6vw,96px)}
.pp-frase .ns-eti{display:block;color:var(--amarillo);margin-bottom:18px}
.pp-valores{margin-top:clamp(64px,8vw,120px);padding-top:30px;border-top:1px solid rgba(255,255,255,.16)}
.pp-valores > .ns-eti{color:#a9b0e6}
.pp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,48px);margin-top:28px}
.pp-val h3{color:#fff;font-size:clamp(18px,1.4vw,21px);max-width:14ch;padding-top:14px;position:relative}
.pp-val h3::before{content:"";position:absolute;left:0;top:0;width:22px;height:3px;background:var(--amarillo)}
.pp-val p{color:#c9cef5;font-size:14.5px;line-height:1.55;margin-top:12px}
@media(max-width:980px){.pp-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pp-grid{grid-template-columns:1fr}}

/* ============================================================
   CALIDAD Y PROCESOS · la misma diagramación de "en un minuto", espejada:
   el slider a la izquierda, el texto a la derecha, los sellos como una
   fila discreta igual que las cifras (Axel, 15-09-2026)
   ============================================================ */
.ns-cal-grid{display:grid;grid-template-columns:var(--dos-cols);gap:var(--dos-gap);align-items:center}   /* misma rejilla; aquí la imagen va primero */
.ns-cal-grid > *{min-width:0}
.ns-cal h2{font-size:clamp(26px,3.2vw,44px);margin-top:16px}
.ns-cal .lead{margin-top:18px;max-width:62ch;font-size:clamp(15.5px,1.2vw,17.5px);line-height:1.6}
.ns-cal .lead+.lead{margin-top:12px}
.ns-sellos.ns-cifras{grid-template-columns:repeat(4,1fr)}
/* Nosotros · En un minuto con cuatro cifras (Axel, 21-10-2026: sin «+130 años de trayectoria») */
.ns-cifras.ns-cifras-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1200px){.ns-cifras.ns-cifras-4{grid-template-columns:repeat(2,1fr)}.ns-cifras.ns-cifras-4 .cifra:nth-child(3){border-right:1px solid var(--linea)}.ns-cifras.ns-cifras-4 .cifra:nth-child(2n){border-right:0}}
.ns-sellos .cifra b{font-size:clamp(18px,1.5vw,24px);text-transform:uppercase;letter-spacing:-.01em}
.ns-sellos-nota{margin-top:12px;font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
@media(max-width:1200px){.ns-sellos.ns-cifras{grid-template-columns:repeat(2,1fr)}.ns-sellos.ns-cifras .cifra:nth-child(2n){border-right:0}.ns-sellos.ns-cifras .cifra:nth-child(3){border-right:1px solid var(--linea)}}
.ns-cal .ns-slider{justify-self:start}
/* el slider de Calidad girado a horizontal (Axel, 15-09-2026, en el inicio: "era solo girar la imagen; más wide, más baja
   de altura… debe verse una línea elegante"): 16:9 al ancho de su columna, pareja en altura al bloque de texto */
.ns-cal .ns-slider.ancho{max-width:none;aspect-ratio:16/9;justify-self:stretch}
@media(max-width:900px){.ns-cal-grid{grid-template-columns:1fr}.ns-cal-grid .ns-slider{order:2}.ns-slider{justify-self:start}}

/* ============================================================
   NEGOCIOS TRAVERSO · una tarjeta que rota por las cuatro unidades
   (Axel, 15-09-2026: "un card dinámico que cambie, algo más elegante;
   es un slide importante"). Lab 28, la misma noche: "los nombres del
   slide son secciones importantes, deben destacar más; el título con la
   bajada ocupan mucho espacio; que cambie sola, que esté animado" →
   cabecera compacta e índice vertical (N3): la imagen a la izquierda con
   fundido y acercamiento leve; el panel derecho es la lista de los cuatro
   nombres, grandes, con filetes; el activo en azul se desplaza un poco y
   se abre en acordeón con rótulo, texto y enlace (suben escalonados), y
   la línea amarilla avanza sobre su filete. Cambia sola mientras está a
   la vista (nosotros.js), sin pausa con el mouse.
   ============================================================ */
/* la cabecera: título en dos líneas a la izquierda, la bajada en la columna derecha al pie (rejilla .sec-h del sitio) */
.ns-neg h2{font-size:clamp(26px,3.2vw,44px);margin-top:0;max-width:16em}
.ns-neg .ng-h{grid-template-columns:minmax(0,1fr) minmax(320px,34%);gap:16px clamp(32px,4vw,72px);align-items:end;margin-bottom:clamp(24px,3vw,44px)}
.ns-neg .ng-h .lead{margin:0;font-size:clamp(15px,1.1vw,16.5px);line-height:1.58;max-width:none;justify-self:stretch}
/* la "tarjeta" ya sin caja (Axel, 15-09-2026, sobre el inicio: "la imagen debe ser similar en aspecto o tamaño a la
   de Calidad; sin bordes —los separadores sí van—; los textos y la imagen con el mismo tamaño de caja"): la rejilla de
   dos columnas del sitio, la imagen 16:9 al ancho de su columna y la lista con sus filetes, centrada en el alto */
.ns-negocio{display:grid;grid-template-columns:var(--dos-cols);gap:var(--dos-gap);align-items:center;isolation:isolate}
.ns-negocio > *{min-width:0}
.ng-imagen{position:relative;aspect-ratio:16/9;background:var(--hielo);overflow:hidden}
.ng-imagen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease,transform 7s linear;transform:scale(1.001)}
.ng-imagen img.on{opacity:1;transform:scale(1.05)}
.ng-imagen img.plano{object-fit:contain;padding:8%;transform:none}
.ng-imagen img.plano.on{transform:none}
.ng-panel{display:flex;flex-direction:column;justify-content:center}
/* la lista de los cuatro nombres */
.ng-lista{display:block;margin:0;padding:0;border-top:0;border-bottom:1px solid var(--linea)}
.ng-fila{position:relative;border-top:1px solid var(--linea)}
.ng-fila button{position:relative;display:flex;align-items:baseline;gap:16px;width:100%;text-align:left;padding:clamp(14px,1.3vw,20px) 0 clamp(12px,1.1vw,17px);color:var(--tinta2);transition:color .25s}
.ng-fila button i{position:absolute;left:0;top:-1px;width:100%;height:2px;overflow:hidden}   /* la línea de avance, sobre el filete del activo */
.ng-fila button i::after{content:"";position:absolute;inset:0;background:var(--amarillo);transform:scaleX(0);transform-origin:left}
.ng-fila button.on i::after{transform:scaleX(1);transition:transform var(--ng-cada,6s) linear}
.ng-fila button b{flex:none;width:32px;font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:10.5px;letter-spacing:.12em;color:var(--gris);transition:color .25s}
.ng-fila button span{font-family:var(--sans);font-style:normal;font-weight:700;text-transform:none;font-size:clamp(20px,1.75vw,27px);letter-spacing:-.015em;line-height:1.1;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.ng-fila button:hover,.ng-fila button.on{color:var(--azul)}
.ng-fila button.on b{color:var(--azul-med)}
.ng-fila button.on span{transform:translateX(10px)}   /* el nombre activo se desplaza un poco a la derecha */
/* el texto del activo se abre en acordeón (fila de rejilla 0fr → 1fr) y sus piezas suben escalonadas */
.ng-txt{display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;transition:grid-template-rows .55s ease,opacity .3s ease,visibility 0s .55s}
.ng-txt.on{grid-template-rows:1fr;opacity:1;visibility:visible;transition:grid-template-rows .55s ease,opacity .5s ease .2s,visibility 0s}
.ng-txt-in{overflow:hidden;min-height:0;padding-left:48px}
.ng-txt .ns-eti{display:block;color:var(--azul-med)}
.ng-txt p{font-size:clamp(14.5px,1.05vw,16px);line-height:1.6;color:var(--tinta2);margin-top:8px;max-width:50ch}
.ng-txt .lnk{margin:16px 0 clamp(18px,1.6vw,26px);font-size:11px}
.ng-txt .ns-eti,.ng-txt p{opacity:0;transform:translateY(10px);transition:opacity .3s ease,transform .4s ease}
.ng-txt .lnk{opacity:0;transform:translateY(10px);transition:opacity .3s ease,transform .4s ease,gap .2s,color .2s}
.ng-txt.on .ns-eti{opacity:1;transform:none;transition:opacity .4s ease .2s,transform .5s ease .2s}
.ng-txt.on p{opacity:1;transform:none;transition:opacity .4s ease .3s,transform .5s ease .3s}
.ng-txt.on .lnk{opacity:1;transform:none;transition:opacity .4s ease .4s,transform .5s ease .4s,gap .2s,color .2s}
@media(prefers-reduced-motion:reduce){.ng-imagen img,.ng-imagen img.on{transform:none;transition:opacity .3s}.ng-txt,.ng-txt.on,.ng-txt .ns-eti,.ng-txt p,.ng-txt .lnk,.ng-txt.on .ns-eti,.ng-txt.on p,.ng-txt.on .lnk,.ng-fila button span{transition:none}}
@media(max-width:900px){.ns-neg .ng-h{grid-template-columns:1fr}.ns-neg .ng-h .lead{margin-top:10px}.ns-negocio{grid-template-columns:1fr}.ng-txt-in{padding-left:0}}

/* ============================================================
   CIERRE · como el del inicio: foto real teñida de azul profundo
   ============================================================ */
.ns-cie{position:relative;background:var(--azul-osc);color:#fff;isolation:isolate;overflow:hidden}
.ns-cie .fondo{position:absolute;inset:0;z-index:-2}
.ns-cie .fondo img{width:100%;height:100%;object-fit:cover}
.ns-cie::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,9,76,.74) 0%,rgba(0,9,76,.9) 35%,rgba(0,9,76,.9) 65%,rgba(0,9,76,.74) 100%)}
.ns-cie .cie-logo{display:block;width:clamp(150px,14vw,210px);height:auto;margin:0 auto 22px}
.ns-cie .cie-centro h2{margin-top:0;font-size:clamp(26px,3vw,40px)}
.ns-cie .cie-centro .lead{color:#d6d9f4}
.ns-cie-acc{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.ns-cie-acc .btn{margin-top:0}

/* la nota de prototipo sube para no tapar la botonera del pasillo */
.pag-nosotros .nota-proto{bottom:84px}
/* === NOSOTROS · fin === */

/* === INICIO-H · inicio (generado por 04-desarrollo-de-diseno/_gen/inicio_h.py --sitio; no editar aquí) === */
/* ============================================================
   Laboratorio · Lab 29 · El inicio con los slides y estilos de
   Nosotros (15-09-2026). La carga inicio-h.html (generada por
   _gen/inicio_h.py); al migrar, este bloque va a estilo.css entre
   marcadores INICIO-H. Los módulos (slider sutil .ns-slider, cifras
   .ns-cifras, tarjeta .ns-negocio, rejillas .ns-min-grid / .ns-cal-grid)
   ya viven en el bloque NOSOTROS de estilo.css: aquí solo lo que el
   inicio suma o ajusta.
   ============================================================ */

/* acento de los títulos en azul sobre fondo claro (amarillo solo sobre azul), como en Nosotros y Contacto */
.home .sec:not(.azul):not(.oscuro) h2 em{color:var(--azul)}

/* fotos con esquinas rectas (las cards de familias y la vitrina Vintage conservan su radio: no son fotos) */
.home .ph,.home .ns-slider,.home .rec-chica .rec .ph{border-radius:0}

/* los titulares del inicio crecen (Axel, 15-09-2026: "el tamaño del título de recetas me gustó bastante; otras
   secciones también deberían tener ese tamaño"): la escala del inicio (--t-seccion, 08-09-2026) pasa al tamaño
   de portada, así cambia en todas las secciones a la vez; el claim de la vitrina Vintage, una frase de 80
   caracteres, conserva el tamaño anterior para no irse a seis líneas */
body.home{--t-seccion:clamp(28px,3.8vw,56px)}
.home .vitrina .claim{font-size:clamp(24px,2.6vw,34px)}
/* "El sabor de siempre" y "Calidad garantizada" vuelven al tamaño de antes (Axel, 15-09-2026: "esta debe tener el tamaño de antes y esta también") */
.home .ns-min h2,.home .ns-cal h2{font-size:clamp(24px,2.6vw,34px)}
.ns-enlace{margin-top:22px}

/* "El sabor de siempre": solo el contenido, centrado (Axel, 15-09-2026: sin imágenes ni datos duros);
   el título en una sola línea (Axel) */
.ns-centro{max-width:1240px;margin:0 auto;text-align:center}   /* ancho para que el título quepa en una línea al tamaño grande */
.ns-centro h2{max-width:none;margin:0 auto}
.ns-centro .lead{margin:22px auto 0}
.ns-centro .qs-desde{margin:18px auto 0;max-width:66ch}
.ns-centro .qs-desde span{display:block;margin-bottom:12px}

/* la fila de claves: rótulos en la cursiva chica separados por filetes; reemplaza a las
   píldoras "Confiables · Sabrosos…" de recetas y a la lista de canales de calidad (Axel, 15-09-2026: sin píldoras) */
.ns-claves{display:grid;grid-template-columns:repeat(var(--n,4),auto);justify-content:start;margin-top:24px;padding-top:16px;border-top:1px solid var(--linea)}
.ns-claves span{font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:var(--t-etiqueta,10.5px);letter-spacing:.12em;text-transform:uppercase;line-height:1.4;color:var(--tinta2);padding:2px 16px 2px 0;margin-right:16px;border-right:1px solid var(--linea)}
.ns-claves span:last-child{border-right:0;margin-right:0;padding-right:0}
@media(max-width:700px){.ns-claves{grid-template-columns:1fr 1fr;row-gap:10px}.ns-claves span:nth-child(2n){border-right:0}}

/* el slider de Calidad horizontal (.ns-slider.ancho, 16:9) y la tarjeta de negocios sin caja viven en el bloque NOSOTROS de estilo.css: valen para las dos páginas */


/* ============================================================
   RECETAS · "Sentándonos a la mesa contigo" con más power (Lab 30, R3
   elegida por Axel, 15-09-2026: "la narrativa a la izquierda; con los
   tamaños de texto que ya teníamos definidos, utiliza la diagramación
   nomás"): la foto de una receta a sangre, con paralaje, detrás de la
   rejilla de dos columnas de siempre; el texto en blanco a la izquierda
   sobre la parte más oscura del degradado y los cuatro afiches del
   recetario (.rl-afiche.chica, recetas.css) dos por fila a la derecha.
   ============================================================ */
.sec-rc{position:relative;color:#fff}
.rc-fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.rc-texto{position:relative;max-width:680px}
.rc-texto h2{color:#fff;font-size:var(--t-seccion);line-height:1.02;text-shadow:0 2px 4px rgba(0,9,76,.35),0 6px 30px rgba(0,9,76,.45)}   /* la escala del inicio, no la de portada (Axel) */
.home .sec-rc h2 em,.rc-texto h2 em{color:var(--amarillo)}   /* el acento sobre la foto en amarillo, como en el resto de los fondos oscuros (se probó celeste, Axel 15-09-2026: "se ve raro, volvamos al amarillo") */
.rc-texto .lead{color:#fff;margin-top:20px;max-width:58ch;text-shadow:0 1px 2px rgba(0,9,76,.5)}
.rc-texto .ns-claves{border-top-color:rgba(255,255,255,.32);margin-top:22px}
.rc-texto .ns-claves span{color:#fff;border-right-color:rgba(255,255,255,.32)}
.rc-texto .btn{margin-top:28px}
.rc-afiches{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px)}
.rc-afiches > .rl-afiche,.rc-afiches > .rl-afiche.chica{grid-column:auto}   /* en la landing el afiche ocupa 4 (o 3) de 12 columnas y recetas.css carga después de estilo.css: aquí, una */
.rc-afiches .rl-afiche-arte{box-shadow:0 30px 60px -30px rgba(0,9,76,.6)}
.rc-afiches.dos{grid-template-columns:1fr 1fr}
.rc-afiches.dos .rl-afiche-arte{aspect-ratio:3/2}   /* dos por fila, más cortos y anchos (como en "Inspírate") */
.rc3{overflow:hidden;isolation:isolate;background:var(--azul-osc);padding:clamp(56px,8vw,112px) 0}
.rc3::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(8,12,41,.84) 0%,rgba(8,12,41,.62) 50%,rgba(8,12,41,.4) 100%)}
.rc3-in{position:relative;z-index:2;display:grid;grid-template-columns:var(--dos-cols);gap:var(--dos-gap);align-items:center}
.rc3-in > *{min-width:0}
@media(max-width:900px){.rc-afiches{grid-template-columns:1fr 1fr}.rc3-in{grid-template-columns:1fr}}
/* === INICIO-H · fin === */

/* ============================================================
   REGLA DE TÍTULOS DEL INICIO (Axel, 17-09-2026): los títulos de sección
   van al tamaño chico, el de "El sabor de la fuente de soda"; el grande
   queda para las portadas. Primero "Lo que llevamos a tu mesa".
   ============================================================ */
.home .repisas .sec-h h2{font-size:clamp(26px,2.5vw,36px)}

/* ============================================================
   FICHA DE PRODUCTO · regularización (22-09-2026)
   La ficha usa la cabecera estándar del sitio (.cat-cab) en versión
   compacta: solo la miga, sin h1 (el nombre ya va junto al envase).
   Se fue la banda hielo alta con la miga de flechas amarillas.
   Sobre blanco el amarillo se apaga (regla del color, 09-09-2026):
   el punto del eyebrow va en azul claro y el botón de compra en azul.
   ============================================================ */
.cat-cab.fp-cab{padding-top:clamp(16px,1.8vw,24px);padding-bottom:clamp(14px,1.6vw,22px)}
.cat-cab.fp-cab .miga{flex-wrap:wrap;row-gap:6px;line-height:1.4}
.fp-txt .fam-n::before{background:var(--azul-cla)}

/* ============================================================
   RECETAS DEL INICIO · sobre azul (Axel, 22-09-2026)
   Se fue la foto de fondo con paralaje y el velo oscuro: la sección
   va en el mismo azul en gradiente de la portada de receta, para que
   las fotos de las recetas tomen el protagonismo. Sin sombras de
   texto, que eran para leer sobre la foto.
   ============================================================ */
.rc3{background:radial-gradient(circle at 70% 30%,var(--azul-med),var(--azul-osc) 70%)}
.rc3::after{content:none}
.rc3 .rc-texto h2,.rc3 .rc-texto .lead{text-shadow:none}
/* el título al tamaño chico de sección, el mismo de "El sabor de la fuente de soda" y "Lo que llevamos a tu mesa" (Axel, 22-09-2026) */
.home .rc3 .rc-texto h2{font-size:clamp(26px,2.5vw,36px)}
/* los afiches del inicio sin el borde del texto (Axel, 22-09-2026); desde el 23-09-2026 ninguna receta lleva borde (recetas.css) */
.home .rc-afiches .rl-afiche h3{-webkit-text-stroke:0;paint-order:normal;text-shadow:0 1px 2px rgba(0,0,0,.55),0 4px 18px rgba(0,0,0,.45)}
.home .rc-afiches .rl-tiempo{text-shadow:0 1px 2px rgba(0,0,0,.55),0 3px 12px rgba(0,0,0,.4)}
/* y un degradado oscuro suave al pie del afiche, para que el texto se lea sobre cualquier foto */
.home .rc-afiches .rl-afiche-arte::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.55))}

/* ============================================================
   LA CASA · pulido (Axel, 22-09-2026)
   La portadilla es solo el titular, como una mini portada (a la
   manera de la portada de Nosotros: abajo a la izquierda, más
   grande); el párrafo de presentación abre el resto del relato.
   Cuatro formas: las cuatro unidades se leen completas sin hacer
   clic; la activa solo enciende el título y cambia la imagen.
   OJO: va ANTES del bloque "LA CASA · inicio" porque
   _gen/inicio_casa_sitio.py trunca estilo.css desde ese marcador.
   ============================================================ */
/* con más especificidad que el bloque "LA CASA · inicio", que viene después */
/* la portadilla al ancho del contenido, con marco blanco arriba y abajo y las esquinas del sitio;
   el titular alineado a la derecha (Axel, 22-09-2026) */
.sec.casa .casa-portadilla{min-height:min(480px,54vh);align-items:flex-end;
  width:min(calc(100% - 2*var(--gutter)),calc(var(--ancho) - 2*var(--gutter)));
  margin:clamp(48px,6vw,96px) auto clamp(48px,6vw,96px);border-radius:0}   /* sin esquinas redondeadas (Axel) */
.sec.casa .casa-portadilla-in{width:100%;text-align:left;padding:clamp(90px,11vw,150px) clamp(22px,2.6vw,36px) clamp(30px,3.4vw,48px)}   /* pegado a la izquierda, en tres líneas (Axel) */
.home .sec.casa .casa-portadilla h2{font-size:clamp(34px,4.8vw,68px);max-width:none;margin:0;text-shadow:none}   /* a la izquierda y sin sombra (Axel, 22-09-2026); los saltos van en el HTML: El sabor / de siempre, / hecho hoy. */
/* la presentación en dos columnas: el párrafo | las certificaciones (Axel, 22-09-2026) */
.casa-intro{margin-bottom:clamp(44px,5.4vw,84px);display:grid;grid-template-columns:var(--dos-cols);gap:var(--dos-gap);align-items:center}
.casa-intro > *{min-width:0}
.casa-certs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,1.8vw,26px) clamp(18px,2.4vw,36px)}
.casa-certs .cifra{border-top:1px solid var(--linea);padding-top:12px}
.casa-certs .ns-sellos-nota{grid-column:1/-1;margin-top:0}
@media(max-width:900px){
  .casa-intro{grid-template-columns:1fr}
}
@media(max-width:520px){
  .casa-certs{grid-template-columns:1fr}
}
.casa-intro .lead{max-width:66ch;font-size:clamp(17px,1.35vw,20px);line-height:1.6}
.sec.casa .casa-ng-item .ng-txt,.sec.casa .casa-ng-item .ng-txt.on{opacity:1}
@media(max-width:900px){
  .sec.casa .casa-portadilla{min-height:min(360px,48vh);margin-top:clamp(24px,5vw,40px);margin-bottom:clamp(32px,6vw,48px)}
  .sec.casa .casa-portadilla-in{padding-top:clamp(70px,16vw,110px)}
}

/* ============================================================
   CIERRE "¿COCINAMOS JUNTOS?" (Axel, 22-09-2026)
   Se fue la foto del supermercado y su velo; primero fue solo color
   y después la imagen lúdica de la tienda sobre celeste bruma. Logo oficial (el de la
   barra), título y bajada en una sola línea.
   ============================================================ */
/* 22-09-2026 (Axel): la imagen lúdica de la tienda (productos flotando sobre celeste bruma,
   03-recursos/imagenes descargadas/fondo-ludico-traverso-celeste-bruma-4x1 (3).png) como fondo del cierre.
   Fondo claro: el texto pasa a azul, el acento a azul medio y el botón a azul (regla del color).
   Un velo claro al centro levanta el texto sin tapar los productos de los bordes. */
.home .sec.cie-profundo{background:#b7bde8 url(../img/cierre-tienda.webp) center/cover no-repeat;color:var(--azul-osc)}
.home .sec.cie-profundo::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse 46% 80% at 50% 50%,rgba(237,238,250,.9),rgba(237,238,250,.55) 55%,rgba(237,238,250,0) 100%)}
.home .sec.cie-profundo::after{content:none}
.home .sec.cie-profundo .cie-centro h2{color:var(--azul-osc)}
.home .sec.cie-profundo .cie-centro h2 em{color:var(--azul-med)}
.home .sec.cie-profundo .cie-centro .lead{color:var(--tinta)}
.home .sec.cie-profundo .btn.amarillo{background:var(--azul);border-color:var(--azul);color:#fff}
.home .sec.cie-profundo .btn.amarillo:hover{background:var(--azul-med);border-color:var(--azul-med)}
.home .cie-centro{max-width:none}
.home .cie-centro .cie-logo{width:clamp(130px,11vw,170px);margin-bottom:26px}
.home .cie-centro h2{max-width:none}
.home .cie-centro .lead{max-width:none}
@media(min-width:900px){
  .home .cie-centro h2,.home .cie-centro .lead{white-space:nowrap}
}

/* ============================================================
   PÁGINAS LEGALES (Axel, 22-09-2026)
   Preguntas frecuentes, Políticas de privacidad y Términos y
   condiciones: cabecera estándar (.cat-cab) y, debajo, un índice
   fijo a la izquierda con las secciones y el texto a la derecha en
   una columna de lectura. Las preguntas frecuentes van en acordeón
   (details). Texto literal del traverso.cl actual.
   ============================================================ */
.lg-in{display:grid;grid-template-columns:260px minmax(0,1fr);}
.lg-in:not(:has(.lg-idx)){grid-template-columns:minmax(0,1fr)}   /* sin índice (privacidad): una sola columna */
.lg-in{gap:clamp(30px,5vw,80px);align-items:start;padding:clamp(30px,3.6vw,52px) var(--marco) clamp(60px,7vw,100px)}
.lg-idx{position:sticky;top:calc(var(--topbar) + 24px)}
.lg-idx .lg-h,.lg-idx ol{margin:0;padding:0}
.lg-h{display:block;font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);margin-bottom:10px}
.lg-idx ol{list-style:none;counter-reset:lg}
.lg-idx li{counter-increment:lg;border-top:1px solid var(--linea)}
.lg-idx li:last-child{border-bottom:1px solid var(--linea)}
.lg-idx a{display:flex;gap:12px;align-items:baseline;padding:10px 2px;font-family:var(--sans);font-weight:700;font-size:13px;letter-spacing:-.005em;line-height:1.2;color:var(--tinta2);text-decoration:none;transition:color .15s}
.lg-idx a::before{content:counter(lg,decimal-leading-zero);font-family:var(--mono);font-weight:500;font-size:10.5px;color:var(--bruma);flex:none;width:22px}
.lg-idx a:hover{color:var(--azul)}
.lg-txt{max-width:72ch;font-family:var(--cuerpo);font-size:clamp(16px,1.15vw,17.5px);line-height:1.62;color:var(--tinta2)}
.lg-txt > p{margin:0 0 1em}
.lg-sec{padding:clamp(18px,2.2vw,30px) 0 clamp(22px,2.6vw,36px);border-top:1px solid var(--linea)}
.lg-sec:first-child{border-top:0;padding-top:0}
.lg-sec h2{font-family:var(--sans);font-weight:800;font-size:clamp(20px,1.7vw,24px);letter-spacing:-.015em;line-height:1.1;color:var(--azul);margin:0 0 16px;display:flex;gap:14px;align-items:baseline;text-transform:none}
.lg-sec h2 .n{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.06em;color:var(--azul-cla);flex:none}
.lg-sec h3,.lg-txt > h3{font-family:var(--sans);font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta);margin:22px 0 10px}
.lg-sec p{margin:0 0 1em}
.lg-sec ul,.lg-txt > ul{margin:0 0 1em;padding-left:0;list-style:none}
.lg-sec ul li,.lg-txt > ul li{position:relative;padding-left:20px;margin-bottom:.45em}
.lg-sec ul li::before,.lg-txt > ul li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;background:var(--azul-cla);transform:rotate(45deg)}
.lg-txt a{color:var(--azul);text-decoration:none;border-bottom:1.5px solid var(--amarillo)}
.lg-txt a:hover{color:var(--azul-med)}
/* las preguntas en acordeón */
.lg-q{border-top:1px solid var(--linea)}
.lg-q:last-of-type{border-bottom:1px solid var(--linea)}
.lg-q summary{display:flex;gap:14px;align-items:baseline;padding:14px 0;cursor:pointer;list-style:none;font-family:var(--sans);font-weight:700;font-size:15.5px;letter-spacing:-.01em;line-height:1.25;color:var(--tinta);transition:color .15s}
.lg-q summary::-webkit-details-marker{display:none}
.lg-q summary .n{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.04em;color:var(--bruma);flex:none;width:30px}
.lg-q summary .t{flex:1}
.lg-q summary i{flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--linea);position:relative;transition:transform .25s,border-color .15s;align-self:center}
.lg-q summary i::before,.lg-q summary i::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:1.5px;background:var(--azul);transform:translate(-50%,-50%)}
.lg-q summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.lg-q summary:hover{color:var(--azul)}
.lg-q summary:hover i{border-color:var(--azul)}
.lg-q[open] summary{color:var(--azul)}
.lg-q[open] summary i{transform:rotate(45deg);border-color:var(--azul)}
.lg-a{padding:0 0 18px 44px}
.lg-a > :last-child{margin-bottom:0}
@media(max-width:900px){
  .lg-in{grid-template-columns:1fr;gap:26px}
  .lg-idx{position:static}
  .lg-idx ol{display:flex;flex-wrap:wrap;gap:6px}
  .lg-idx li,.lg-idx li:last-child{border:0}
  .lg-idx a{padding:8px 12px;border:1px solid var(--linea);border-radius:20px;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
  .lg-idx a::before{display:none}
  .lg-a{padding-left:0}
}

/* ============================================================
   BUSCADOR (Axel, 22-09-2026)
   La lupa de la barra abre un panel sobre la página: velo azul
   profundo, caja blanca arriba con el campo grande y los resultados
   agrupados (productos, recetas, páginas). Sugerencias con el campo
   vacío. app.js lo abre/cierra (Esc, velo, botón) y busca en
   data/buscar.json sin acentos ni mayúsculas.
   ============================================================ */
.bq{position:fixed;inset:0;z-index:600;display:flex;justify-content:center;align-items:flex-start;padding:clamp(56px,10vh,120px) var(--gutter) 24px}
.bq[hidden]{display:none}
.bq-velo{position:absolute;inset:0;background:rgba(0,9,76,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.bq-caja{position:relative;width:min(100%,760px);max-height:calc(100vh - clamp(56px,10vh,120px) - 24px);display:flex;flex-direction:column;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 40px 90px -30px rgba(0,9,76,.6);
  animation:bq-entra .22s cubic-bezier(.2,.8,.2,1)}
@keyframes bq-entra{from{opacity:0;transform:translateY(-10px) scale(.985)}to{opacity:1;transform:none}}
.bq-form{display:flex;align-items:center;gap:14px;padding:6px 14px 6px 22px;border-bottom:1px solid var(--linea)}
.bq-lupa{width:22px;height:22px;flex:none;color:var(--azul)}
.bq-input{flex:1;min-width:0;border:0;outline:0;background:none;font-family:var(--sans);font-weight:600;font-size:clamp(18px,1.6vw,22px);letter-spacing:-.01em;color:var(--tinta);padding:16px 0}
.bq-input::placeholder{color:var(--bruma);font-weight:500}
.bq-input::-webkit-search-cancel-button{-webkit-appearance:none}
.bq-cerrar{flex:none;border:1px solid var(--linea);background:#fff;border-radius:8px;padding:6px 9px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);cursor:pointer}
.bq-cerrar:hover{border-color:var(--azul);color:var(--azul)}
.bq-res{overflow-y:auto;overscroll-behavior:contain;padding:8px 10px 14px}
.bq-h{display:block;font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);padding:12px 12px 6px}
.bq-sug{padding:6px 2px 8px}
.bq-sug button{font-family:var(--sans);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:9px 14px;border:1px solid var(--linea);border-radius:20px;background:#fff;color:var(--tinta2);margin:4px 3px;cursor:pointer;transition:all .15s}
.bq-sug button:hover{border-color:var(--azul);color:var(--azul)}
.bq-grupo{list-style:none;margin:0;padding:0}
.bq-it{display:flex;align-items:center;gap:14px;padding:9px 12px;border-radius:10px;text-decoration:none;color:inherit}
.bq-it:hover,.bq-it.on{background:var(--hielo)}
.bq-it .th{flex:none;width:54px;height:54px;border-radius:9px;background:var(--hielo-2);display:flex;align-items:center;justify-content:center;overflow:hidden}
.bq-it .th img{max-width:84%;max-height:84%;width:auto;height:auto;object-fit:contain}
.bq-it.receta .th img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}
.bq-it.pagina .th{background:var(--azul);color:#fff}
.bq-it.pagina .th svg{width:20px;height:20px}
.bq-it b{display:block;font-family:var(--sans);font-weight:700;font-size:15.5px;letter-spacing:-.01em;line-height:1.15;color:var(--tinta)}
.bq-it b mark{background:none;color:var(--azul-med)}
.bq-it span{display:block;font-size:13px;color:var(--tinta2);margin-top:3px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bq-it small{display:block;font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);margin-top:4px}
.bq-it .txt{min-width:0;flex:1}
.bq-it i{flex:none;font-style:normal;color:var(--bruma);font-size:16px;transition:color .15s,transform .15s}
.bq-it:hover i,.bq-it.on i{color:var(--azul);transform:translateX(3px)}
.bq-nada{padding:26px 12px 18px;color:var(--tinta2);font-size:15px}
.bq-nada b{font-family:var(--sans);color:var(--tinta)}
.bq-nada a{color:var(--azul);font-weight:600}
.bq-pie{display:flex;justify-content:space-between;gap:12px;padding:10px 12px 2px;border-top:1px solid var(--linea);margin-top:6px;font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.bq-pie kbd{font-family:var(--mono);font-style:normal;border:1px solid var(--linea);border-radius:4px;padding:1px 5px;margin:0 2px}
html.bq-abierta{overflow:hidden}
@media(max-width:640px){
  .bq{padding:0}
  .bq-caja{width:100%;max-height:100vh;border-radius:0;min-height:100vh}
  .bq-form{padding-left:16px}
  .bq-input{font-size:17px}
  .bq-it span{white-space:normal}
  .bq-pie{display:none}
}
@media(prefers-reduced-motion:reduce){.bq-caja{animation:none}}

/* ============================================================
   MEGA MENÚ · puertas (Axel, 22-09-2026)
   Las tres puertas del desplegable y del acordeón móvil toman el
   diseño del pie (.pf6 .puerta, bloque PIE DEL SITIO) en tamaño
   chico: la columna del menú mide ~210 px. El pie del desplegable
   (Buscar por uso, Novedades, Packs, Comprar online) se retiró.
   ============================================================ */
/* resets sobre las reglas viejas del menú (.mega .puerta y .mv-puertas .puerta iban en columna y con la imagen absoluta) */
.mega .puertas-menu .puerta,.mv-puertas.puertas-menu .puerta{flex-direction:row;align-items:center;justify-content:space-between}
.mega .puertas-menu .puerta img,.mv-puertas.puertas-menu .puerta img{position:static;right:auto;bottom:auto;transform:none}
.mega .puertas-menu .puerta .fondo,.mv-puertas.puertas-menu .puerta .fondo{position:absolute;inset:0;height:100%}
.mega .puertas-menu .puerta .envases img,.mv-puertas.puertas-menu .puerta .envases img{height:100%}
.mega .puertas-menu .puerta b,.mv-puertas.puertas-menu .puerta b{max-width:none}
/* la columna de las puertas más ancha (Axel, 22-09-2026: "alargar las cards"): 236 → 320 px; las salsas de Vintage vuelven entre el texto y la flecha */
.mega-v3 .mega-in{grid-template-columns:.9fr 1.7fr 320px}
@media(max-width:1180px){.mega-v3 .mega-in{grid-template-columns:.85fr 1.5fr 280px}}
.puertas-menu .puerta{padding:14px 16px 14px 18px;min-height:92px;border-radius:12px;gap:10px}
.puertas-menu .puerta b{font-size:15px}
.puertas-menu .puerta small{font-size:9.5px;letter-spacing:.1em;margin-top:6px;max-width:16ch}
.puertas-menu .puerta i{width:28px;height:28px;font-size:14px;border-width:1.25px}
.puertas-menu .puerta.p-vint > span:not(.envases){max-width:12ch}
.puertas-menu .puerta.p-vint > span:not(.envases) small{max-width:11ch}
/* en la columna angosta del menú las salsas van chicas, abajo a la derecha, y la flecha encima */
.v3-puertas.puertas-menu .puerta.p-vint .envases{right:50px;bottom:-9px;height:68px}
.v3-puertas.puertas-menu .puerta.p-vint .envases img{margin-left:-20px}
.puertas-menu .puerta.p-vint .envases img{margin-left:-20px}
.mega .puertas-menu .puerta.p-vint .envases img:nth-child(1),.mv-puertas.puertas-menu .puerta.p-vint .envases img:nth-child(1){transform:rotate(-14deg) translate(14px,3px)}
.mega .puertas-menu .puerta.p-vint .envases img:nth-child(2),.mv-puertas.puertas-menu .puerta.p-vint .envases img:nth-child(2){transform:rotate(-5deg) translate(4px,0)}
.mega .puertas-menu .puerta.p-vint .envases img:nth-child(3),.mv-puertas.puertas-menu .puerta.p-vint .envases img:nth-child(3){transform:rotate(6deg) translate(-4px,2px)}
.puertas-menu .puerta.p-rec > span:not(.envases),.puertas-menu .puerta.p-neg > span:not(.envases){max-width:calc(100% - 36px)}
.v3-puertas.puertas-menu{grid-template-rows:1fr 1fr 1fr;align-content:stretch}   /* desde el 29-10-2026 son dos puertas (sin Recetas), con la altura de antes: la tercera fila queda libre */
.v3-puertas.puertas-menu .puerta{height:100%}
.mv-puertas.puertas-menu .puerta{min-height:96px;padding:16px 18px}
.mv-puertas.puertas-menu .puerta.p-vint .envases{right:52px;height:78px}
.mv-puertas.puertas-menu .puerta.p-vint > span:not(.envases){max-width:calc(100% - 130px)}

/* ============================================================
   PIE DEL SITIO (Lab 34, F7 · Axel, 22-09-2026)
   Dos columnas en claro: logo y líneas de enlaces | las tres
   puertas del menú; debajo el piso compacto. Las reglas vienen
   del laboratorio (pie.css: común + F1 piso + F3 líneas + F6
   puertas + F7 claro). Va ANTES de "LA CASA · inicio" porque
   _gen/inicio_casa_sitio.py trunca estilo.css desde ese marcador.
   ============================================================ */
/* --- común a las tres --- */
.pf .redes a{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;padding:0;border:1px solid rgba(255,255,255,.28);color:#fff;transition:background .2s,color .2s,border-color .2s}
.pf .redes a svg{width:16px;height:16px;fill:currentColor}
.pf .redes a:hover{background:#fff;color:var(--azul);border-color:#fff}
.pf .logo img{height:46px;width:auto;display:block}
.pf .pie-bajo{font-size:10.5px}
.pf .pie-bajo a{display:inline;padding:0;font-size:inherit}   /* los legales en línea, no apilados */

/* ============================================================
   F1 · COMPACTO · azul profundo, dos pisos
   Piso 1: logo y firma | tres columnas de enlaces.
   Piso 2: los datos de Traverso S.A. en una línea, las redes y la
   invitación al contacto comercial como texto, sin caja.
   ============================================================ */
.pf1 .pf1-arriba{max-width:var(--ancho);margin:0 auto;padding:clamp(40px,4.6vw,64px) var(--gutter) clamp(30px,3.4vw,44px);display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(24px,3vw,44px);align-items:start}
.pf1 .firma{margin-top:16px;font-size:17px}
.pf1 h5{margin-bottom:12px}
.pf1 .pf1-abajo{max-width:var(--ancho);margin:0 auto;padding:22px var(--gutter) 24px;border-top:1px solid rgba(255,255,255,.14);display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.pf1 .pf1-datos{font-size:14px;line-height:1.5;color:#c9cef5;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
.pf1 .pf1-datos b{color:#fff;font-family:var(--sans);text-transform:uppercase;font-size:10.5px;letter-spacing:.14em}
.pf1 .pf1-datos a{display:inline;padding:0;color:#fff;border-bottom:1.5px solid var(--amarillo)}
.pf1 .pf1-datos a:hover{color:var(--amarillo)}
.pf1 .redes{margin:0 0 0 auto}
.pf1 .mayorista{margin:0;padding:0;border:0;border-radius:0;font-size:14px;color:#c9cef5;flex-basis:100%}
@media(max-width:900px){
  .pf1 .pf1-arriba{grid-template-columns:1fr 1fr}
  .pf1 .pf1-arriba > div:first-child{grid-column:1/-1}
}
@media(max-width:520px){.pf1 .pf1-arriba{grid-template-columns:1fr}}

/* ============================================================
   F3 · LA BANDA · azul, el logo grande y los enlaces en líneas
   Sin columnas: a la izquierda el logo grande con la firma y las
   redes; a la derecha cada grupo es una línea de enlaces con su
   etiqueta al frente, como el índice de una revista. Los datos de
   contacto cierran la banda.
   ============================================================ */
.pf3 .pf3-in{max-width:var(--ancho);margin:0 auto;padding:clamp(44px,5vw,72px) var(--gutter) clamp(30px,3.4vw,44px);display:grid;grid-template-columns:minmax(260px,.9fr) 2fr;gap:clamp(30px,5vw,80px);align-items:start}
.pf3 .logo img{height:64px}
.pf3 .firma{margin-top:22px;font-size:19px;max-width:20ch}
.pf3 .redes{margin-top:20px}
.pf3 .pf3-lineas{display:grid;gap:18px}
.pf3 .pf3-linea{display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:baseline;padding:14px 0;border-top:1px solid rgba(255,255,255,.14)}
.pf3 .pf3-linea:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.pf3 .pf3-linea h5{margin:0}
.pf3 .pf3-linea div{display:flex;flex-wrap:wrap;gap:6px 0}
.pf3 .pf3-linea a{display:inline;padding:0;font-size:15px}
.pf3 .pf3-linea a{white-space:nowrap}
.pf3 .pf3-linea a:not(:last-child)::after{content:"·";margin:0 12px;color:rgba(255,255,255,.35)}   /* el punto cierra el enlace: al saltar de línea no queda al frente */
.pf3 .pf3-datos{max-width:var(--ancho);margin:0 auto;padding:0 var(--gutter) 28px;display:flex;flex-wrap:wrap;gap:8px 28px;align-items:baseline;font-size:14.5px;color:#c9cef5}
.pf3 .pf3-datos b{color:#fff;font-family:var(--sans);text-transform:uppercase;font-size:11px;letter-spacing:.14em}
.pf3 .pf3-datos a{display:inline;padding:0;color:#fff;border-bottom:1.5px solid var(--amarillo)}
.pf3 .pf3-datos a:hover{color:var(--amarillo)}
.pf3 .pf3-datos .mayorista{margin:0;padding:0;border:0;font-size:14.5px;margin-left:auto}
@media(max-width:900px){
  .pf3 .pf3-in{grid-template-columns:1fr}
  .pf3 .pf3-linea{grid-template-columns:1fr;gap:8px}
  .pf3 .pf3-datos .mayorista{margin-left:0;flex-basis:100%}
}

/* ============================================================
   F6 · DOS COLUMNAS (Axel, 22-09-2026)
   Las líneas de enlaces a la izquierda, las puertas a la derecha.
   Puertas nuevas: Vintage con tres salsas; Recetas con foto de
   receta de fondo (como la card del recetario); Para tu negocio con
   la bodega teñida de azul.
   ============================================================ */
.pf6 .pf6-in{max-width:var(--ancho);margin:0 auto;padding:clamp(36px,4vw,56px) var(--gutter) clamp(22px,2.6vw,36px);display:grid;grid-template-columns:1fr minmax(280px,340px);gap:clamp(30px,4vw,64px);align-items:start}   /* la columna de cards más angosta (Axel) */
.pf6 .pf3-lineas{align-self:center}
.pf6 .pf3-linea{grid-template-columns:110px 1fr;padding:14px 0}
.pf6-puertas{display:grid;gap:12px}
.pf6 .puerta{display:flex;align-items:center;justify-content:space-between;gap:14px;border-radius:14px;padding:18px 20px;min-height:104px;text-decoration:none;color:#fff;background:var(--azul);position:relative;overflow:hidden;isolation:isolate;transition:transform .2s}
.pf6 .puerta:hover{transform:translateY(-2px);color:#fff}
.pf6 .puerta > span:not(.envases){display:block;position:relative;z-index:2;max-width:none}   /* titulares en una línea (Axel) */
.pf6 .puerta b{display:block;font-family:var(--sans);font-weight:700;font-size:clamp(17px,1.3vw,20px);line-height:1.02;text-transform:uppercase;letter-spacing:-.01em;white-space:nowrap}
.pf6 .puerta small{display:block;font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#c9cef5;line-height:1.45;margin-top:8px;max-width:20ch}
.pf6 .puerta i{position:relative;z-index:2;flex:none;width:36px;height:36px;border-radius:50%;border:1.5px solid rgba(255,255,255,.7);display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:16px;transition:background .2s,color .2s}
.pf6 .puerta:hover i{background:#fff;color:var(--azul)}
/* Vintage: tres salsas en abanico entre el texto y la flecha */
.pf6 .puerta.p-vint{background:var(--carmin)}.pf6 .puerta.p-vint small{color:#ffd9df}.pf6 .puerta.p-vint:hover i{color:var(--carmin)}
.pf6 .puerta.p-vint > span:not(.envases) small{max-width:14ch}
.pf6 .puerta.p-vint .envases{position:absolute;right:56px;bottom:-10px;height:78px;display:flex;align-items:flex-end;z-index:1;pointer-events:none}
.pf6 .puerta.p-vint .envases img{height:100%;width:auto;filter:drop-shadow(0 8px 10px rgba(0,0,0,.3));margin-left:-26px}   /* juntas, en abanico */
.pf6 .puerta.p-vint .envases img:first-child{margin-left:0}
.pf6 .puerta.p-vint .envases img:nth-child(1){transform:rotate(-14deg) translate(18px,4px)}
.pf6 .puerta.p-vint .envases img:nth-child(2){transform:rotate(-5deg) translate(6px,0);z-index:1}
.pf6 .puerta.p-vint .envases img:nth-child(3){transform:rotate(6deg) translate(-6px,2px)}
/* Recetas: foto de receta a sangre con el pie oscurecido, como la card del recetario */
.pf6 .puerta.p-rec{background:#1a1a1a}
/* la foto va como <img class="fondo"> y no como url() en una variable: Chrome resuelve esa url relativa a la hoja de estilo, no a la página */
.pf6 .puerta .fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;margin:0;transform:none;filter:none}
.pf6 .puerta.p-rec::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.25) 70%,rgba(0,0,0,.45))}
.pf6 .puerta.p-rec small{color:#fff;opacity:.85}
.pf6 .puerta.p-rec:hover i{color:#111}
/* Para tu negocio: la bodega teñida de azul profundo */
.pf6 .puerta.p-neg{background:var(--azul)}
.pf6 .puerta.p-neg .fondo{opacity:.45;filter:saturate(.4)}
.pf6 .puerta.p-neg::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(0,14,120,.92),rgba(0,14,120,.55) 70%,rgba(0,14,120,.75))}
.pf6 .puerta.p-neg small{color:#c9cef5}
@media(max-width:1100px){
  .pf6 .pf6-in{grid-template-columns:1fr}
  .pf6-puertas{grid-template-columns:repeat(2,1fr)}   /* dos puertas desde el 29-10-2026 */
}
@media(max-width:900px){
  .pf6-puertas{grid-template-columns:1fr}
  .pf6 .pf3-linea{grid-template-columns:1fr;gap:8px}
  .pf6 .puerta{min-height:100px;padding:18px 18px}
  .pf6 .puerta.p-vint .envases{right:58px;height:82px}
  .pf6 .puerta > span:not(.envases){max-width:calc(100% - 120px)}
  .pf6 .puerta.p-rec > span:not(.envases),.pf6 .puerta.p-neg > span:not(.envases){max-width:calc(100% - 50px)}
}

/* ============================================================
   F7 · DOS COLUMNAS, EN CLARO (Axel, 22-09-2026)
   La F6 sobre hielo: textos en tinta, etiquetas en azul, amarillo
   solo en los subrayados. El logo oficial arriba a la derecha.
   ============================================================ */
.pf7{background:var(--hielo);color:var(--tinta2);border-top:1px solid var(--linea)}
/* el logo va dentro de la columna izquierda, sobre las líneas; las cards se alinean con el logo
   arriba y con la última línea abajo (Axel, 22-09-2026) */
.pf7 .pf7-cab{display:flex;justify-content:flex-start;margin-bottom:16px}
.pf7 .pf7-izq{display:flex;flex-direction:column}
.pf7 .pf6-in{align-items:stretch;padding-top:clamp(30px,3.4vw,46px)}
.pf7 .pf6-puertas{height:100%;grid-auto-rows:1fr;align-content:stretch}
.pf7 .puerta{min-height:0;height:100%}
/* dos puertas desde el 29-10-2026 (sin Recetas) con la altura que tenían de a tres (Axel: "la altura se debe
   mantener"): en escritorio la columna sigue repartida en tres filas y la tercera queda libre */
@media(min-width:1101px){.pf7 .pf6-puertas{grid-template-rows:repeat(3,1fr)}}
.pf7 .pf7-cab .logo img{height:44px}
.pf7 .pf3-lineas{align-self:start}
.pf7 .pf3-linea{border-top-color:var(--linea)}
.pf7 .pf3-linea:last-child{border-bottom-color:var(--linea)}
.pf7 h5{color:var(--azul)}
.pf7 .pf3-linea a{color:var(--tinta2)}
.pf7 .pf3-linea a:hover{color:var(--azul)}
.pf7 .pf3-linea a:not(:last-child)::after{color:var(--bruma)}
.pf7 .pf1-abajo{border-top:0;padding-top:8px}   /* sin la línea entre las cards y los datos (Axel, 22-09-2026) */
/* el piso en dos columnas y una sola línea: datos | contacto comercial; las redes bajo Descubre (Axel, 22-09-2026) */
.pf7 .pf1-abajo{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:18px 32px}
.pf7 .pf1-abajo .mayorista{flex-basis:auto;margin:0;justify-self:end;text-align:right;white-space:normal}   /* a la derecha; en una línea cuando cabe (desde ~1500 px), si no parte en dos sin salirse */
.pf7 .pf7-izq .redes{margin:22px 0 0;justify-content:flex-start}
.pf7 .pf1-datos{flex-wrap:nowrap;white-space:nowrap}
@media(max-width:1100px){.pf7 .pf1-abajo{grid-template-columns:1fr}.pf7 .pf1-abajo .mayorista{white-space:normal}.pf7 .pf1-datos{flex-wrap:wrap;white-space:normal}}
.pf7 .pf1-datos{color:var(--tinta2)}
.pf7 .pf1-datos b{color:var(--azul)}
.pf7 .pf1-datos a{color:var(--azul)}
.pf7 .pf1-datos a:hover{color:var(--azul-med)}
.pf7 .redes a{border-color:var(--bruma);color:var(--azul)}
.pf7 .redes a:hover{background:var(--azul);color:#fff;border-color:var(--azul)}
.pf7 .mayorista{color:var(--tinta2)}
.pf7 .mayorista a{color:var(--azul);border-bottom:1.5px solid var(--amarillo)}
.pf7 .pie-bajo{border-top-color:var(--linea);color:var(--gris)}
.pf7 .pie-bajo a:hover{color:var(--azul)}
/* los enlaces legales, legibles (Traverso en el tablero, 08-10-2026: "no se ven nada estos enlaces"):
   más grandes, en el gris oscuro del texto y subrayados para que se lean como enlaces */
.pf7 .pie-bajo span:last-child a{font-size:12px;letter-spacing:.06em;color:var(--tinta2);text-decoration:underline;text-decoration-color:var(--bruma);text-decoration-thickness:1px;text-underline-offset:4px}
.pf7 .pie-bajo span:last-child a:hover{color:var(--azul);text-decoration-color:var(--azul)}
@media(max-width:640px){.pf7 .pie-bajo span:last-child a{font-size:12px}}
.pf7 .puerta{box-shadow:0 14px 30px -18px rgba(0,14,120,.35)}

/* === LÍNEA DE TIEMPO · Nosotros (Lab 35 · D) · inicio === */
/* ============================================================
   Reemplaza al pasillo en nosotros/#historia. Más ancha que la
   pantalla: cada hito es una columna con la foto de un lado de la
   línea y el texto del otro, alternados; el tallo pasa por el punto y
   une los dos. La pista se arrastra con el mouse (grab, con inercia),
   se desliza en el celular y abajo van las flechas y el mini scroll
   (app.js, bloque LÍNEA DE TIEMPO). La primera columna parte alineada
   con el contenido de la página y la última termina en el mismo borde.
   Sin anotaciones internas (pautas, "por confirmar", sellos).
   ============================================================ */
.ns-hist.ns-linea{padding:clamp(56px,6vw,96px) 0}
.ns-linea h2{font-size:clamp(26px,3.2vw,44px);margin-top:0;max-width:16em}
.ns-linea .ng-h{grid-template-columns:minmax(0,1fr) minmax(320px,34%);gap:16px clamp(32px,4vw,72px);align-items:end;margin-bottom:clamp(26px,3vw,44px)}
.ns-linea .ng-h .lead{margin:0;font-size:clamp(15px,1.1vw,16.5px);line-height:1.58;max-width:none;justify-self:stretch}
.ns-linea h3{font-family:var(--sans);font-weight:700;letter-spacing:-.012em;color:var(--tinta)}
@media(max-width:900px){.ns-linea .ng-h{grid-template-columns:1fr}.ns-linea .ng-h .lead{margin-top:6px}}
.ld{--col:clamp(262px,26vw,400px);--eje:44px;position:relative}
.ld-pista{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;cursor:grab;outline:none;overscroll-behavior-x:contain}
.ld-pista::-webkit-scrollbar{display:none}
.ld-pista:focus-visible{box-shadow:inset 0 0 0 2px var(--azul)}
.ld-pista.arrastrando{cursor:grabbing;user-select:none}
.ld-pista.arrastrando .ld-h{pointer-events:none}
.ld-pista img{-webkit-user-drag:none;user-select:none}
/* OJO: cada columna lleva su grid-column en línea; la línea es el ::before de la rejilla en la fila del
   medio, y una columna auto-ubicada que cruza esa fila salta a columnas implícitas enormes */
.ld-hitos{list-style:none;margin:0;position:relative;display:grid;width:max-content;
  grid-template-columns:repeat(7,var(--col)) calc(var(--col) * .5);grid-template-rows:auto var(--eje) auto;
  padding:0 calc((100% - var(--ancho)) / 2 + var(--gutter))}
.ld-hitos::before{content:"";grid-row:2;grid-column:1/-1;align-self:center;height:2px;transform-origin:left center;
  background:linear-gradient(90deg,var(--bruma) 0,var(--bruma) calc(100% - var(--col) * .5),rgba(180,186,229,0) 100%)}
.ld-h{grid-row:1/4;display:grid;grid-template-rows:subgrid;min-width:0;padding-right:clamp(22px,2.4vw,40px)}
.ld-arriba{grid-row:1;display:flex;flex-direction:column;min-width:0}
.ld-eje{grid-row:2;position:relative;border-left:1px solid var(--azul-cla)}
.ld-abajo{grid-row:3;display:flex;flex-direction:column;min-width:0}
.ld-arriba .ld-tallo{flex:1 1 auto;min-height:16px;margin-top:14px;border-left:1px solid var(--azul-cla)}
.ld-abajo .ld-tallo{flex:0 0 auto;height:16px;border-left:1px solid var(--azul-cla)}
.ld-punto{position:absolute;left:0;top:50%;width:15px;height:15px;border-radius:50%;background:#fff;border:2px solid var(--azul);box-sizing:border-box;transform:translate(-50%,-50%);z-index:2}
.ld-h.hoy .ld-punto{background:var(--azul);box-shadow:0 0 0 3px var(--hielo-2),0 0 0 4.5px var(--azul)}
.ld-h.hoy .ld-punto::before{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--azul);animation:ld-pulso 2.6s ease-out infinite}
@keyframes ld-pulso{0%{transform:scale(1);opacity:.6}100%{transform:scale(3);opacity:0}}
.ld-caja{min-width:0}
.ld-ano{font-family:var(--sans);font-weight:700;font-stretch:100%;font-size:clamp(30px,2.6vw,40px);line-height:.95;letter-spacing:-.035em;color:var(--azul);white-space:nowrap}
.ld-caja h3{font-size:clamp(16.5px,1.3vw,19px);line-height:1.2;margin-top:10px}
.ld-caja p{margin-top:8px;font-size:clamp(14px,1vw,15px);line-height:1.58;color:var(--tinta2)}
.ld-foto{position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--hielo);isolation:isolate;--etq:1}
.ld-foto .ph{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border-radius:0;box-shadow:none;background:transparent;border:0;margin:0}
.ld-foto.t-foto .ph img{object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.ld-h:hover .ld-foto.t-foto .ph img{transform:scale(1.04)}
/* 30-09-2026: el fondo de las imágenes rescatadas de la infografía de Traverso (1896, 1996, 2015), para que no se vea su recuadro */
.ld-foto.t-arch{background:#f9f6ee}
.ld-foto.t-pend{background:#f4f1e8}
.ld .ph.arch{border:0}
.ld .ph.arch img{padding:7%;filter:none}   /* 1996 y 2015 traen el borde fundido al fondo #f9f6ee en el archivo */
.ld .ph .stamp,.ld .ph.pend::before,.ld .ph.pend::after{display:none}
.ld .etq-1896{width:128px;padding:14px 10px;gap:5px;transform:translate(-50%,-50%) rotate(-3deg) scale(var(--etq,1))}
.ld .etq-1896 b{font-size:18px}
.ld .etq-1896 small,.ld .etq-1896 span{font-size:8px;letter-spacing:.14em}
.ld-ctrl{display:flex;align-items:center;gap:10px;margin-top:clamp(20px,2.2vw,32px)}
.ld-flecha{width:40px;height:40px;border-radius:50%;border:1px solid var(--linea);display:grid;place-items:center;font-size:15px;line-height:1;color:var(--azul);background:#fff;cursor:pointer;transition:background .2s,color .2s,border-color .2s,opacity .2s}
.ld-flecha:hover:not(:disabled){background:var(--azul);color:#fff;border-color:var(--azul)}
.ld-flecha:disabled{opacity:.35;cursor:default}
.ld-barra{position:relative;flex:0 1 220px;height:20px;cursor:pointer;touch-action:none}
.ld-barra::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--linea)}
.ld-pulgar{position:absolute;left:0;top:50%;height:4px;margin-top:-2px;width:30%;background:var(--azul);border-radius:2px;transition:height .15s,margin-top .15s}
.ld-barra:hover .ld-pulgar,.ld-barra.activa .ld-pulgar{height:6px;margin-top:-3px}
.ld-pista-txt{margin-left:8px;font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.ld.sin-scroll .ld-ctrl{visibility:hidden}
/* al entrar a la vista: la línea se dibuja y las columnas llegan desde la derecha, una tras otra */
.ld.ld-js .ld-hitos::before{transform:scaleX(0);transition:transform 1.6s cubic-bezier(.3,.6,.2,1)}
.ld.ld-js.va .ld-hitos::before{transform:none}
.ld.ld-js .ld-h{opacity:0;transform:translateX(28px);transition:opacity .7s ease,transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(.15s + var(--k) * .12s)}
.ld.ld-js.va .ld-h{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.ld-h.hoy .ld-punto::before{animation:none;display:none}.ld-foto.t-foto .ph img{transition:none}}
@media(max-width:700px){
  .ld{--eje:36px}
  .ld-pista-txt{display:none}
  .ld-barra{flex:1 1 auto}
}
/* === LÍNEA DE TIEMPO · fin === */
/* === LÍNEA SOLA · Nosotros (Lab 42 · L1 el escenario) · inicio === */
/* ============================================================
   La línea sola (Lab 42 · L1 el escenario), en nosotros/#historia,
   y bajo 900 px la misma línea con la escala cortada (Lab 44 · B).
   Sale de 04-desarrollo-de-diseno/linea.css y linea-movil.css
   (clases l36 → lh) con _fuente/linea_sola_sitio.py: los ajustes se
   hacen en el laboratorio y se vuelve a correr el instalador. Escala
   real: --x por año, 0 = el primer hito, 1 = hoy (app.js la recalcula
   con los años publicados; en el celular la corta).
   OJO: el sitio apaga las transiciones con "reducir movimiento"; aquí
   van con !important porque el movimiento es el contenido (decisión
   pendiente con Axel).
   ============================================================ */
/* ---------- la sección: una pantalla de escritorio ---------- */
.lhs{padding:clamp(36px,3.8vw,64px) 0;min-height:calc(100svh - var(--topbar));display:flex;flex-direction:column;justify-content:center}
.lhs > .wrap{width:100%}
.lhs h2{font-size:clamp(26px,2.7vw,40px);margin-top:0;max-width:18em}
.lhs .ng-h{grid-template-columns:minmax(0,1fr) minmax(320px,34%);gap:16px clamp(32px,4vw,72px);align-items:end;margin-bottom:clamp(22px,2.8vw,44px)}
.lhs .ng-h .lead{margin:0;font-size:clamp(15px,1.1vw,16.5px);line-height:1.58;max-width:none;justify-self:stretch}
.lhs h3{font-family:var(--sans);font-weight:700;letter-spacing:-.012em;color:var(--tinta)}

.lh{--t-ano:clamp(17px,1.7vw,27px);--dibujo:2.2s;--ease:cubic-bezier(.65,0,.25,1);--mov:.9s;position:relative}
.lh img{-webkit-user-drag:none;user-select:none}

/* ---------- el eje (común) ---------- */
.lh-eje{position:absolute;left:0;right:0;top:var(--linea-y);height:0}
.lh-hilo{position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--bruma);transform-origin:left center}
.lh-tic{position:absolute;left:calc(var(--xo,var(--x)) * 100%);top:-4px;width:1px;height:8px;margin-left:-.5px;background:var(--bruma)}
.lh-tic.largo{top:-7px;height:14px}
/* 2020 → hoy: el último hito es un tramo; se marca cuando está abierto */
.lh-tramo-hoy{position:absolute;top:-2px;height:4px;left:calc(var(--a) * 100%);width:calc((var(--b) - var(--a)) * 100%);background:var(--azul);opacity:0;transform-origin:left center;transition:opacity .4s ease,left var(--mov) var(--ease),width var(--mov) var(--ease)!important}
.lh.en-hoy .lh-tramo-hoy{opacity:1}

/* un botón por año: el punto sobre la línea y el año arriba o abajo (también es zona de clic).
   La caja del botón crece hacia el lado de su año (24 px hacia el rótulo, 6 px hacia el otro lado):
   con la escala real 2012 y 2015 quedan a 15-30 px y dos cajas centradas en el punto se pisaban */
.lh-p{position:absolute;left:calc(var(--xo,var(--x)) * 100%);top:0;width:24px;height:30px;margin:-24px 0 0 -12px;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer;z-index:3;-webkit-tap-highlight-color:transparent;transition:left var(--mov) var(--ease)!important}
.lh-p.abajo{margin-top:-6px}
.lh-p:focus{outline:none}
.lh-p:focus-visible .lh-punto{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--azul)}
.lh-punto{position:absolute;left:50%;top:24px;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;background:var(--hielo-2);border:2px solid var(--azul);box-sizing:border-box;transition:transform .3s var(--ease),background .25s ease,opacity .3s ease!important}
.lh-p.abajo .lh-punto{top:6px}
.lh-p:hover .lh-punto,.lh-p.on .lh-punto{background:var(--azul);transform:scale(1.3)}
.lh-ano{position:absolute;left:50%;transform:translateX(-50%);font-family:var(--sans);font-weight:700;font-stretch:100%;font-size:var(--t-ano);line-height:1;letter-spacing:-.035em;color:var(--tinta2);white-space:nowrap;font-variant-numeric:tabular-nums;transition:color .25s ease,opacity .3s ease,font-size var(--mov) var(--ease)!important}
.lh-p.arriba .lh-ano{bottom:calc(100% - 6px)}
.lh-p.abajo .lh-ano{top:calc(100% - 6px)}
.lh-p.primero .lh-ano{left:5px;transform:none}
.lh-p.ultimo .lh-ano{left:auto;right:5px;transform:none}
.lh-p:hover .lh-ano,.lh-p.on .lh-ano{color:var(--azul)}
/* hoy: el extremo de la línea, el punto lleno que late y el rótulo en la cursiva de la casa */
.lh-p.hoy .lh-punto{background:var(--azul)}
.lh-p.hoy .lh-punto::before{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--azul);animation:lh-pulso 2.6s ease-out infinite!important}
.lh-p.hoy .lh-ano{font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:calc(var(--t-ano) * .62);letter-spacing:.02em}
@keyframes lh-pulso{0%{transform:scale(1);opacity:.6}100%{transform:scale(3);opacity:0}}

/* al entrar a la vista: el trazo corre de 1896 a hoy (lineal, a escala real) y cada año se
   enciende cuando el trazo llega a su punto; 1896 al tiro, el resto después del tramo vacío */
.lh.js .lh-hilo{transform:scaleX(0);transition:transform var(--dibujo) linear!important}
.lh.js.va .lh-hilo{transform:none}
.lh.js .lh-p,.lh.js .lh-tic{opacity:0;transition:opacity .45s ease calc(var(--x) * var(--dibujo)),left var(--mov) var(--ease) 0s!important}
.lh.js.va .lh-p,.lh.js.va .lh-tic{opacity:1}
.lh.js.va .lh-punto{animation:lh-llega .55s cubic-bezier(.3,1.7,.5,1) calc(var(--x) * var(--dibujo)) backwards!important}
.lh.js.listo .lh-p,.lh.js.listo .lh-tic{transition-delay:0s!important}
@keyframes lh-llega{0%{transform:scale(0)}}

/* ============================================================
   L1 · EL ESCENARIO (elegida, Axel 13-10-2026)
   La regla arriba, bajo la cabecera (como la fila de productos del
   inicio); al principio debajo solo va la invitación. Al hacer clic en
   un año la caja baja y crece hasta el escenario, como el panel del
   header del inicio al tocar un producto (alto de 0 a su medida y el
   contenido sube con fundido; linea.js), y la página la acompaña.
   Abierto: imagen | año gigante + título + texto; un cabezal recorre la
   regla hasta el año (--xa) y el año corre como contador; la imagen
   cambia con una cortina en el sentido del viaje.
   ============================================================ */
.lhs-1{min-height:0;display:block}   /* la sección crece al abrir, como el inicio: no reserva la pantalla */
.lh-v1{--alto-escena:clamp(320px,calc(100svh - var(--topbar) - 430px),480px);--linea-y:50%}
.lh-v1 .lh-regla{position:relative;height:104px}
.e-caja{position:relative;overflow:hidden}
/* la imagen más angosta (Axel, 13-10-2026: "no tan ancha, para que esté más compactado"): su ancho sale
   del alto del escenario (~4:3) y no del ancho de la pantalla; imagen y texto centrados ("centrado el card") */
.lh-v1 .lh-escena{--e-gap:clamp(28px,3.6vw,64px);display:none;grid-template-columns:minmax(0,calc(var(--alto-escena) * 1.3)) minmax(0,580px);gap:var(--e-gap);align-items:center;height:var(--alto-escena);margin:clamp(14px,1.8vw,28px) auto 0;max-width:calc(var(--alto-escena) * 1.3 + 580px + var(--e-gap))}
.lh-v1.abierta .lh-escena{display:grid}
/* la cruz, como .hero-panel-cerrar del inicio, en la esquina superior derecha del bloque: el escenario mide
   lo mismo que imagen + texto (max-width y margen automático en vez de justify-content, que en Chrome
   dejaba la cruz absoluta en el borde del contenedor) */
.lh-v1 .lh-escena{position:relative}
.e-cerrar{position:absolute;top:0;right:0;width:40px;height:40px;border-radius:50%;border:1px solid var(--linea);background:#fff;color:var(--tinta);font-size:22px;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;z-index:3;transition:background .2s,color .2s,border-color .2s!important}
.e-cerrar:hover{background:var(--azul);color:#fff;border-color:var(--azul)}
.e-cerrar:focus-visible{outline:2px solid var(--azul);outline-offset:3px}
/* al principio no aparece nada: bajo la línea, la invitación a hacer clic en un año (Axel, 13-10-2026);
   llega cuando el trazo va pasando la mitad y se va al abrir el primer año */
.e-invita{display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(14px,1.8vw,26px) 0 6px;opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .5s var(--ease)!important}
.lh-v1.va .e-invita{opacity:1;transform:none;transition:opacity .8s ease calc(var(--dibujo) * .55),transform 1s var(--ease) calc(var(--dibujo) * .55)!important}
.lh-v1.abierta .e-invita{display:none}
.e-invita p{font-family:var(--sans);font-weight:700;font-stretch:100%;font-size:clamp(22px,2vw,32px);line-height:1.15;letter-spacing:-.02em;color:var(--tinta);max-width:22em;margin-top:12px}
.e-invita em{font-style:normal;color:var(--azul)}
.e-flecha{display:block;font-size:22px;line-height:1;color:var(--azul);animation:lh-flecha 1.8s ease-in-out infinite!important}
@keyframes lh-flecha{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
/* mientras espera, los puntos laten en ola, de 1896 a 2020 */
.lh-v1.listo:not(.abierta) .lh-p:not(.hoy) .lh-punto::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--azul);opacity:0;animation:lh-invita 3s ease-out calc(var(--k) * .16s) infinite!important}
@keyframes lh-invita{0%{transform:scale(1);opacity:.55}35%{transform:scale(2.6);opacity:0}100%{transform:scale(2.6);opacity:0}}
.e-media{position:relative;height:100%;overflow:hidden;background:var(--hielo)}
.lh-fig{margin:0;overflow:hidden;background:var(--hielo)}
.lh-fig img{display:block;width:100%;height:100%;object-fit:cover}
/* las imágenes rescatadas de la infografía (1896, 1996, 2015) traen el borde fundido a #f9f6ee */
.lh-fig.t-arch{background:#f9f6ee}
.lh-fig.t-arch img{object-fit:contain;padding:6%}
.lh-fig.t-pack img{object-fit:contain;padding:7% 7% 5%}
.e-fig{position:absolute;inset:0;visibility:hidden}
.e-fig.on,.e-fig.sale{visibility:visible}
.e-fig.on{z-index:2}
.e-fig.sale{z-index:1}
.e-txt{min-width:0}
.e-ano{font-family:var(--sans);font-weight:700;font-stretch:100%;font-size:clamp(64px,7.4vw,124px);line-height:.84;letter-spacing:-.05em;color:var(--azul);font-variant-numeric:tabular-nums;white-space:nowrap}
.e-ano .lh-resto{font-size:.3em;letter-spacing:-.015em;margin-left:.3em;color:var(--azul-cla)}
.e-cuerpos{display:grid;margin-top:clamp(14px,1.6vw,24px)}
.e-cuerpo{grid-area:1/1;opacity:0;transform:translateY(14px);visibility:hidden;transition:opacity .3s ease,transform .45s var(--ease),visibility 0s linear .3s!important}
.e-cuerpo.on{opacity:1;transform:none;visibility:visible;transition:opacity .5s ease .3s,transform .7s var(--ease) .3s,visibility 0s!important}
.e-cuerpo h3{font-size:clamp(20px,1.65vw,26px);line-height:1.18}
.e-cuerpo p{margin-top:10px;font-size:clamp(15px,1.08vw,16.5px);line-height:1.6;color:var(--tinta2);max-width:54ch}
/* el avance y el cabezal */
.lh-lleno{position:absolute;left:0;top:-1px;height:2px;width:calc(var(--xa,0) * 100%);background:var(--azul);transition:width var(--mov) var(--ease)!important}
.lh-cabezal{position:absolute;left:calc(var(--xa,0) * 100%);top:0;width:19px;height:19px;margin:-9.5px 0 0 -9.5px;border-radius:50%;background:var(--azul);box-shadow:0 0 0 4px var(--hielo-2);opacity:0;z-index:4;pointer-events:none;transition:left var(--mov) var(--ease),opacity .3s ease!important}
.lh-v1.abierta .lh-cabezal{opacity:1}

/* ============================================================
   EL CELULAR · Lab 44 B "la escala cortada" (Axel, 14-10-2026)
   ============================================================ */
/* ---------- común ---------- */
.lm-cel,.lm-corte{display:none}
@media(max-width:900px){
  .lm-esc{display:none}
  .lm-cel{display:inline}
  .lhs .ng-h{grid-template-columns:1fr}
  .lhs .ng-h .lead{margin-top:8px}
  .lhs .lh{display:block}   /* linea.css la escondía bajo 900 px */
  .lh-v1{--t-ano:15px}
  .lh-v1 .lh-regla{height:84px;touch-action:pan-y;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
  .lh-v1 .lh-p{pointer-events:none}   /* el toque es de la regla entera: abre el año más cercano (linea-movil.js) */
  .lh-v1 .lh-cabezal{width:15px;height:15px;margin:-7.5px 0 0 -7.5px;box-shadow:0 0 0 3px var(--hielo-2)}

  /* la invitación, más chica */
  .lh-v1 .e-invita{padding-top:8px}
  .lh-v1 .e-invita p{font-size:22px;margin-top:10px}

  /* el escenario, apilado: la foto a todo el ancho, debajo el año, el título y el texto */
  .lh-v1 .lh-escena{grid-template-columns:minmax(0,1fr);height:auto;max-width:none;gap:16px;margin-top:4px;align-items:start;touch-action:pan-y}
  .lh-v1 .e-media{height:auto;aspect-ratio:4/3;-webkit-user-select:none;user-select:none}
  .lh-v1 .e-ano{font-size:clamp(58px,17vw,88px)}
  .lh-v1 .e-cuerpos{margin-top:12px}
  .lh-v1 .e-cuerpo h3{font-size:20px}
  .lh-v1 .e-cuerpo p{font-size:15px;line-height:1.58;max-width:none}
  .lh-v1 .e-cerrar{top:10px;right:10px}
}

/* ---------- B · la escala cortada ---------- */
/* entre 1896 y 1980 la línea se corta (dos rayas inclinadas sobre un hueco del color de la sección);
   las marcas de década de ese tramo no van */
@media(max-width:900px){
  [data-movil="b"] .lh-punto{width:11px;height:11px;margin:-5.5px 0 0 -5.5px}
  [data-movil="b"] .lh-tic.lm-fuera{display:none}
  [data-movil="b"] .lm-corte{display:block;position:absolute;top:-9px;left:calc(var(--x) * 100%);width:14px;height:18px;margin-left:-7px;background:var(--hielo-2);z-index:2;pointer-events:none}
  [data-movil="b"] .lm-corte::before,[data-movil="b"] .lm-corte::after{content:"";position:absolute;top:1px;bottom:1px;width:2px;background:var(--bruma);transform:skewX(-24deg)}
  [data-movil="b"] .lm-corte::before{left:2px}
  [data-movil="b"] .lm-corte::after{right:2px}
  .lh.js[data-movil="b"] .lm-corte{opacity:0;transition:opacity .45s ease calc(var(--x) * var(--dibujo))!important}
  .lh.js.va[data-movil="b"] .lm-corte{opacity:1}
}

/* ============================================================
   EL COMPUTADOR · Lab 46 · la L1 con anclas (Axel, 15-10-2026)
   Sobre 900 px: la sección en azul, la pieza .lh-esc (tres anclas,
   clic en un año, linea-anclas.js) y la L1 de arriba escondida;
   bajo 900 px, al revés. La card sale de linea-ref.css y lo demás
   de linea-anclas.css (04-desarrollo-de-diseno).
   ============================================================ */
@media (min-width:901px){
  /* la sección, en el azul con el papel con fibras de las cards de marca (soft-light), y la cabecera en claro */
  .lr2.ns-hist{background-color:var(--azul);background-image:url(../img/fondos/papel-marcas.webp);background-size:cover;background-position:center;background-blend-mode:soft-light;color:#fff;overflow:hidden}
  .lr2 .sec-h h2{color:#fff}
  .pag-nosotros .sec.ns-hist.lr2:not(.azul):not(.oscuro) h2 em{color:var(--amarillo)}
  .pag-nosotros .lr2 .sec-h .lead{color:#d6d9f4}
  .lr2 .lh-cel{display:none!important}
  /* ---------- el hito: [imagen y año | texto] ---------- */
  .lr-pieza{display:grid;grid-template-columns:var(--a) var(--b);column-gap:var(--gap);width:max-content}
  /* arriba: la imagen sobre el año (el tallo cae al centro del año) y el texto al lado, al pie */
  .lr-h.arriba .lr-pieza{grid-row:1;align-self:end;align-items:end;margin-bottom:var(--tallo);margin-left:calc(var(--a) / -2)}
  .lr-h.arriba .lr-cuerpo{padding-bottom:.15em}
  /* abajo: la imagen a la izquierda; el año (bajo el tallo) y el texto a la derecha */
  .lr-h.abajo .lr-pieza{grid-row:3;align-self:start;align-items:start;margin-top:var(--tallo);margin-left:calc(-1 * (var(--a) + var(--gap) + var(--fs) * 1.17))}
  .lr-h.abajo .lr-ano{margin-bottom:12px}
  .lr-h.abajo .lr-fig{margin-top:.1em}
  .lr-col{display:flex;flex-direction:column;align-items:center;gap:10px}

  /* la imagen recortada en la bandera del logo */
  .lr-fig{width:var(--a);aspect-ratio:4/3;margin:0;clip-path:url(#lr-bandera);background:rgba(255,255,255,.08)}
  .lr-fig img{display:block;width:100%;height:100%;object-fit:cover}
  /* el envase se para delante de una bandera clara y se sale de ella por arriba */
  .lr-fig.t-pack{clip-path:none;background:none;position:relative}
  .lr-fig.t-pack::before{content:"";position:absolute;left:0;right:0;bottom:0;height:70%;background:var(--hielo-2);clip-path:url(#lr-bandera)}
  .lr-fig.t-pack img{position:relative;object-fit:contain;filter:drop-shadow(0 12px 14px rgba(0,4,40,.45))}

  /* el año */
  .lr-ano{font-family:var(--sans);font-weight:800;font-stretch:100%;font-size:var(--fs);line-height:.84;letter-spacing:-.02em;color:var(--amarillo);white-space:nowrap}
  .lr-ano b{font-weight:800}
  .lr-resto{font-size:.3em;letter-spacing:0;margin-left:.2em}

  /* el texto: el título en cursiva, como la bajada de la referencia, y el texto en blanco */
  .lr-cuerpo{width:var(--b)}
  .lr-cuerpo h3{font-family:var(--cuerpo);font-style:italic;font-weight:500;text-transform:none;letter-spacing:0;
    font-size:clamp(13.5px,1.02vw,16px);line-height:1.3;color:#c9cdf2;margin:0 0 5px}
  .lr-cuerpo p{font-family:var(--cuerpo);font-weight:500;font-size:clamp(13.5px,1.02vw,16px);line-height:1.42;color:#fff;margin:0}


  /* ---------- la regla, en claro sobre el azul ---------- */
  .lr2 .lh-hilo,.lr2 .lh-tic{background:rgba(255,255,255,.38)}
  /* más fina y elegante (Axel, 21-10-2026: "pulir un poco la navegación para que se vea más elegante"): años
     chicos y espaciados, punto fino, hilo de 1 px; las anclas y lo que pasa por el mouse siguen en amarillo */
  .lr2 .lh-esc{--t-ano:clamp(14px,1.05vw,16px)}
  .lr2 .lh-esc .lh-hilo{height:1px;top:-.5px;background:rgba(255,255,255,.3)}
  .lr2 .lh-esc .lh-ano{font-weight:600;letter-spacing:.06em;color:rgba(255,255,255,.58)}
  .lr2 .lh-esc .lh-p.arriba .lh-ano{bottom:calc(100% - 2px)}
  .lr2 .lh-esc .lh-p.abajo .lh-ano{top:calc(100% - 2px)}
  .lr2 .lh-esc .lh-punto{width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-width:1.5px;border-color:rgba(255,255,255,.75)}
  .lr2 .lh-esc .lh-p:hover .lh-punto,.lr2 .lh-esc .lh-p.on .lh-punto{transform:scale(1.45)}
  .lr2 .lh-esc .lh-p:hover .lh-ano{color:#fff}
  .lr2 .lh-esc .lh-p.on .lh-ano{color:var(--amarillo)}
  .lr2 .lh-esc .lh-p.hoy .lh-ano{letter-spacing:.04em}
  .lr2 .lh-esc.listo:not(.abierta) .lh-p:not(.hoy) .lh-punto::after{border-width:1px;opacity:0;animation-name:lr2-invita!important}
  @keyframes lr2-invita{0%{transform:scale(1);opacity:.4}35%{transform:scale(2.4);opacity:0}100%{transform:scale(2.4);opacity:0}}
  .lr2 .lh-punto{background:var(--azul);border-color:rgba(255,255,255,.8)}
  .lr2 .lh-ano{color:rgba(255,255,255,.72)}
  .lr2 .lh-p:hover .lh-punto,.lr2 .lh-p.on .lh-punto{background:var(--amarillo);border-color:var(--amarillo)}
  .lr2 .lh-p:hover .lh-ano,.lr2 .lh-p.on .lh-ano{color:var(--amarillo)}
  .lr2 .lh-p:focus-visible .lh-punto{box-shadow:0 0 0 3px var(--azul),0 0 0 5px var(--amarillo)}
  .lr2 .lh-p.hoy .lh-punto{background:var(--amarillo);border-color:var(--amarillo)}
  .lr2 .lh-p.hoy .lh-punto::before{border-color:var(--amarillo)}
  .lr2 .lh-lleno,.lr2 .lh-tramo-hoy{background:var(--amarillo)}
  .lr2 .lh-cabezal{background:var(--amarillo);box-shadow:0 0 0 4px var(--azul)}
  /* en reposo, los años de las anclas se encienden en amarillo */
  .lr2 .lh:not(.abierta) .lh-p.ancla .lh-punto{background:var(--amarillo);border-color:var(--amarillo)}
  .lr2 .lh:not(.abierta) .lh-p.ancla .lh-ano{color:var(--amarillo)}
  .lr2 .lh-v1.listo:not(.abierta) .lh-p:not(.hoy) .lh-punto::after{border-color:var(--amarillo)}

  /* ---------- la señal: se abre con clic (Axel, 15-10-2026: "quizás deba ser al clic y haya una señal que
     te avise dónde hacer clic"). La invitación de la L1 sobre la regla, con la flecha que late hacia ella;
     los puntos laten en ola mientras esperan. Abierto un año, se queda más tenue ---------- */
  .lr2 .e-pista{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 4px;text-align:center;
    font-family:var(--sans);font-weight:700;font-stretch:100%;font-size:clamp(15px,1.15vw,18px);line-height:1.2;letter-spacing:-.01em;color:#fff;
    opacity:0;transform:translateY(-6px);transition:opacity .5s ease,transform .6s var(--ease)!important}
  .lr2 .e-pista em{font-style:normal;color:var(--amarillo)}
  .lr2 .e-pista .e-flecha{font-size:18px;color:var(--amarillo)}
  .lr2 .lh.va .e-pista{opacity:1;transform:none;transition:opacity .8s ease calc(var(--dibujo) * .55),transform 1s var(--ease) calc(var(--dibujo) * .55)!important}
  .lr2 .lh.va.listo .e-pista{transition-delay:0s!important}
  .lr2 .lh.abierta .e-pista{opacity:.45}
  .lr2 .lh.abierta .e-pista .e-flecha{animation:none!important}
  .lr2 .lh-p{cursor:pointer}

  /* ---------- la caja: anclas y escenario en la misma celda (abrir un año no mueve la página) ---------- */
  .lr2 .e-caja{display:grid;overflow:visible;padding-top:clamp(40px,4.4vw,64px)}
  .lr2 .e-anclas,.lr2 .lh-v1 .lh-escena{grid-area:1/1}
  .lr2 .e-hilos{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
  .lr2 .e-hilos path{fill:none;stroke:var(--amarillo);stroke-width:1.5}

  /* las anclas: tres hitos repartidos, con la card del Lab 46 */
  .lr2 .e-anclas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(28px,3.4vw,56px);align-self:center;position:relative;z-index:2}
  .lr2 .e-anclas .lr-pieza{grid-template-columns:44% minmax(0,1fr);column-gap:clamp(14px,1.4vw,22px);width:auto;margin:0;align-items:start;cursor:pointer}
  .lr2 .e-anclas .lr-fig{width:100%}
  /* el año sobre el texto (21-10-2026), a la medida de su columna */
  .lr2 .e-anclas .lr-cuerpo{width:auto;padding-bottom:.2em;container-type:inline-size}
  .lr2 .e-anclas .lr-ano{font-size:31cqw;margin:0 0 10px}
  .lr2 .e-anclas .lr-fig img{transition:transform .5s cubic-bezier(.2,.7,.2,1)!important}
  .lr2 .e-anclas .lr-pieza:hover .lr-fig img{transform:scale(1.05)}

  /* el escenario: un hito solo, la card del Lab 46 en grande y centrada */
  .lr2 .lh-v1{--fig-alto:clamp(190px,25vh,290px);--ea:calc(var(--fig-alto) * 4 / 3)}
  .lr2 .lh-v1 .lh-escena{display:grid;grid-template-columns:var(--ea) minmax(0,560px);column-gap:clamp(28px,3.4vw,56px);align-items:end;
    height:auto;margin:0 auto;max-width:calc(var(--ea) + 560px + 56px);width:100%;position:relative;z-index:2}
  .lr2 .e-col{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
  .lr2 .e-media{width:var(--ea);height:auto;aspect-ratio:4/3;clip-path:url(#lr-bandera);background:rgba(255,255,255,.08);overflow:visible}
  .lr2 .lh-fig{background:transparent}
  .lr2 .lh-fig.t-arch img{object-fit:cover;padding:0}
  .lr2 .lh-fig.t-pack{background:var(--hielo-2)}
  .lr2 .lh-fig.t-pack img{object-fit:contain;padding:8% 8% 4%;filter:drop-shadow(0 12px 14px rgba(0,4,40,.35))}
  .lr2 .e-ano{font-family:var(--sans);font-weight:800;font-stretch:100%;font-size:calc(var(--ea) * .34);line-height:.84;letter-spacing:-.02em;color:var(--amarillo)}
  .lr2 .e-ano .lh-resto{font-size:.3em;letter-spacing:0;margin-left:.2em;color:var(--amarillo)}
  .lr2 .e-txt{align-self:center;padding-bottom:0}
  .lr2 .e-txt .e-ano{font-size:clamp(84px,7.4vw,124px);margin-bottom:16px}   /* el año sobre el texto (21-10-2026) */
  .lr2 .e-cuerpos{margin-top:0}
  .lr2 .e-cuerpo{align-self:end}
  .lr2 .e-cuerpo h3{font-family:var(--cuerpo);font-style:italic;font-weight:500;text-transform:none;letter-spacing:0;
    font-size:clamp(16px,1.3vw,20px);line-height:1.3;color:#c9cdf2;margin:0}
  .lr2 .e-cuerpo p{margin-top:6px;font-family:var(--cuerpo);font-weight:500;font-size:clamp(15px,1.1vw,17px);line-height:1.5;color:#fff;max-width:none}
  .lr2 .e-cerrar{top:-8px;right:-8px;background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
  .lr2 .e-cerrar:hover{background:var(--amarillo);color:var(--azul);border-color:var(--amarillo)}
  .lr2 .e-cerrar:focus-visible{outline-color:var(--amarillo)}

  /* ---------- el cambio: anclas ↔ escenario ---------- */
  .lr2 .e-anclas,.lr2 .e-hilos{transition:opacity .45s ease .1s,visibility 0s!important}
  .lr2 .lh-v1 .lh-escena{opacity:0;visibility:hidden;transition:opacity .22s ease,visibility 0s linear .22s!important}
  .lr2 .lh-v1.abierta .lh-escena{opacity:1;visibility:visible;transition:opacity .4s ease .12s,visibility 0s!important}
  .lr2 .lh.abierta .e-anclas,.lr2 .lh.abierta .e-hilos{opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s linear .2s!important}
  /* al entrar a la vista: primero la línea, después las anclas con sus hilos */
  .lr2 .lh.js:not(.va) .e-anclas,.lr2 .lh.js:not(.va) .e-hilos{opacity:0;visibility:hidden}
  .lr2 .lh.js.va:not(.listo):not(.abierta) .e-anclas,.lr2 .lh.js.va:not(.listo):not(.abierta) .e-hilos{transition:opacity .9s ease calc(var(--dibujo) * .75),visibility 0s!important}
}
@media (max-width:900px){
  .lr2 .lh-esc{display:none!important}
}
/* === LÍNEA SOLA · fin === */

/* === SITIO CERRADO · sin avisos internos (23-09-2026) · inicio === */
/* Axel, 23-09-2026: "el sitio ya debe quedar cerrado". Los avisos se sacaron en su origen
   (_fuente/cierre_sitio.py); esto es la red de seguridad: las pautas que el CSS escribe sobre
   los marcadores sin foto ("Foto ·", "Material gastronómico ·", "Archivo Traverso ·"…) y
   cualquier nota que un instalador del laboratorio vuelva a meter quedan ocultas. */
.ph.pend::after,.rc-hero .fondo.fuente-gastro::before,.hero-int .fondo.fuente-archivo::before{display:none}
.io-pend,.io-nota,.rc-nota,.ns-sellos-nota,.ns-pc,.nota-proto{display:none}
/* === SITIO CERRADO · fin === */

/* === NOSOTROS · sellos y negocios como el inicio (23-09-2026) · inicio === */
/* nosotros_ajustes_sitio.py: los sellos en la rejilla del inicio (.casa-certs) bajo el texto de calidad,
   y las cuatro unidades de negocio a la vista como en el inicio (.casa-neg2); el inicio las deja todas a
   opacidad plena con .sec.casa, aquí lo hace .ns-neg */
.ns-cal-certs{margin-top:clamp(24px,2.6vw,36px)}
/* los sellos al tamaño del inicio (.home .cifra b y .home .cifra span) */
.ns-cal-certs .cifra b{font-size:clamp(22px,2.2vw,30px)}
.ns-cal-certs .cifra span{font-size:var(--t-etiqueta);font-family:var(--cuerpo);font-style:italic;font-weight:500;letter-spacing:.1em}
.ns-neg .casa-ng-item .ng-txt,.ns-neg .casa-ng-item .ng-txt.on{opacity:1}
/* negocios en dos columnas: a la izquierda el título y la bajada sobre la imagen, que crece hasta completar
   el alto; a la derecha las cuatro unidades una bajo otra, entre filetes, en todo el alto */
.ns-negocio.ns-neg-dos{align-items:stretch}
.ns-neg-izq{display:flex;flex-direction:column;gap:clamp(22px,2.6vw,36px);min-width:0}
.ns-neg-izq .casa-col > .lead{margin-top:16px}
.ns-neg-izq .ng-imagen{flex:1 1 auto;aspect-ratio:auto;min-height:clamp(200px,18vw,300px)}
/* ronda 4 (Axel: "un poco más ancho o más apretado de altura, está muy alto todo"): menos aire entre las
   unidades y el párrafo a 70 caracteres; la imagen de la izquierda ya no fuerza el alto. Las columnas NO cambian:
   la izquierda debe medir lo mismo que la de calidad, la sección anterior (var(--dos-cols); Axel: "se rompe la
   diagramación") */
.ns-neg-lista{display:grid;grid-template-rows:repeat(4,1fr);min-width:0}
.ns-neg-lista .casa-ng-item{display:flex;flex-direction:column;justify-content:center;padding:clamp(10px,1.1vw,16px) 0}
.ns-neg-lista .casa-ng-item .ng-txt .lnk{margin-top:10px}
/* ronda 3 (Axel): sin filetes entre las unidades y el párrafo más angosto, para facilitar la lectura */
.ns-neg-lista .casa-ng-item .ng-txt p{max-width:70ch}   /* Axel: "un poco más ancho, no tan corto" (46ch → 58ch) */
@media(max-width:900px){.ns-neg-izq .ng-imagen{flex:none;aspect-ratio:16/9;min-height:0}}
/* calidad como negocios: el título (en dos líneas) sobre la imagen a la izquierda; el texto y los sellos a la
   derecha, centrados en el alto; la imagen crece hasta completar el alto */
.ns-cal-grid.ns-cal-dos{align-items:stretch}
.ns-cal-izq{display:flex;flex-direction:column;gap:clamp(22px,2.6vw,36px);min-width:0}
.ns-cal-izq h2{margin-top:0}
.ns-cal .ns-cal-izq .ns-slider.ancho{flex:1 1 auto;aspect-ratio:auto;min-height:clamp(240px,24vw,380px);width:100%}
.ns-cal-der{align-self:center;min-width:0}
.ns-cal-der > .lead:first-child{margin-top:0}
@media(max-width:900px){.ns-cal .ns-cal-izq .ns-slider.ancho{flex:none;aspect-ratio:16/9;min-height:0}}
/* el cierre en claro, como el del inicio: la imagen lúdica de fondo, un velo claro al centro que levanta el
   texto sin tapar los productos de los bordes, texto azul, acento azul medio y botón azul (regla del color) */
.ns-cie.ns-cie-claro{background:#b7bde8;color:var(--azul-osc)}
.ns-cie.ns-cie-claro::after{background:radial-gradient(ellipse 46% 80% at 50% 50%,rgba(237,238,250,.9),rgba(237,238,250,.55) 55%,rgba(237,238,250,0) 100%)}
.ns-cie-claro .fondo img{object-position:center}
.ns-cie-claro .cie-centro h2{color:var(--azul-osc)}
.ns-cie-claro .cie-centro h2 em{color:var(--azul-med)}
.ns-cie-claro .cie-centro .lead{color:var(--tinta)}
.ns-cie-claro .btn.amarillo{background:var(--azul);border-color:var(--azul);color:#fff}
.ns-cie-claro .btn.amarillo:hover{background:var(--azul-med);border-color:var(--azul-med)}
.ns-cie-claro .cie-logo{width:clamp(130px,11vw,170px);margin-bottom:26px}
/* === NOSOTROS · sellos y negocios · fin === */

/* === INICIO · las cuatro formas, en corto (23-09-2026) · inicio === */
/* inicio_formas_sitio.py: los cuatro nombres con el estilo de los canales (.ns-claves, el de "Supermercados ·
   Almacenes de barrio…") y "Saber más →" con el .lnk de siempre a nosotros/#negocios. Sin estilos nuevos
   (Axel, 23-09-2026: "no inventes nuevos estilos"; el título en azul de las certificaciones "era para probar") */
.casa-col > .lnk{margin-top:clamp(22px,2.4vw,30px)}
/* "Lo que llevamos a tu mesa" en el azul en gradiente de las recetas, pero invertido para que no se repita
   (Axel, 23-09-2026): la luz arriba a la izquierda, donde está el título; en las recetas va arriba a la derecha */
.home #familias.sec.azul{background:radial-gradient(circle at 30% 30%,var(--azul-med),var(--azul-osc) 70%)}
/* === INICIO · las cuatro formas · fin === */

/* === MIGA EN EL EYEBROW · ficha (23-09-2026) · inicio === */
/* miga_eyebrow_sitio.py: la miga de la ficha deja su banda y va en el eyebrow, junto al punto azul (Axel,
   23-09-2026). El eyebrow queda como estaba; solo se deja cortar en dos líneas y sus enlaces van como los de .miga */
.fp-txt .fam-n{flex-wrap:wrap;row-gap:6px;line-height:1.4}
.fp-txt .fam-n a{text-decoration:none;color:inherit}
.fp-txt .fam-n a:hover{color:var(--tinta)}
/* === MIGA EN EL EYEBROW · ficha · fin === */

/* === MÓVIL · un solo ancho (24-09-2026) · inicio === */
/* ============================================================
   MÓVIL · TODAS LAS CAJAS AL MISMO ANCHO (Axel, 24-09-2026)
   "el ancho de todas las cajas debe ser igual… lo más ancho que se
   pueda, 95 %… para aprovechar el espacio de diseño".
   En el teléfono el contenido se encerraba en --ancho (86 vw) y además
   llevaba el --gutter: a 390 px las cajas medían el 77 % de la pantalla
   (45 px por lado), las familias del inicio y el menú 18 px, el pie 27 px.
   Ahora --ancho es todo el ancho y el único margen es --margen-movil: el
   mismo para textos, cards, fotos, formularios, la barra, el menú, el
   buscador y el pie. Para otro ancho se cambia SOLO ese número (el
   comparador del Lab 36 lo cambia en vivo). Tablet y escritorio, igual.
   Elegido: 92 %, 4 vw por lado (Axel, en el Lab 36): el 95 % quedaba
   mal en las pantallas curvas a los costados.
   Instalado con _fuente/movil_ancho_sitio.py.
   ============================================================ */
:root{--margen-movil:4vw}   /* por lado: 2.5vw = cajas al 95 % · 4vw = 92 % · 5vw = 90 % */
@media(max-width:640px){
  :root{--ancho:100%;--gutter:var(--margen-movil)}
  /* el botón "En la foto" del hero iba al borde de la caja de la barra (sin padding): termina donde termina el menú */
  .hero-rc-esquina{padding-right:var(--gutter)}
  /* la línea de los legales del pie, al ancho de las cajas (iba al borde de --ancho, más ancha que el resto) */
  .pie-bajo{margin-inline:var(--gutter);padding-inline:0}
  /* la escala de envases de las marcas, sin su sangría del 1 %: los filetes parten donde parten las cajas */
  .lm-sec .lm-escala{padding-inline:0}
}
/* === MÓVIL · un solo ancho · fin === */

/* === INICIO · móvil, primera ronda (24-09-2026) · inicio === */
/* ============================================================
   INICIO · MÓVIL, PRIMERA RONDA (Axel, 24-09-2026)
   · Familias: dos columnas y la séptima al centro, del mismo tamaño
     ("para que todas tengan el mismo peso visual"); antes se estiraba
     a todo el ancho, y bajo 820 px la regla del mosaico del catálogo
     las dejaba en una sola columna.
   · Certificaciones en dos columnas también en el teléfono.
   · Más aire sobre "Entrar al mundo Vintage" y "Saber más".
   · Huinchas: la banda de sellos y los rótulos .ns-claves en una sola
     línea que corre sola (app.js, bloque HUINCHAS), con el desfile y el
     fundido de la tira de envases del catálogo (.tira).
   Instalado con _fuente/inicio_movil_sitio.py.
   ============================================================ */
/* las familias: rejilla de cuatro columnas, cada card toma dos y la séptima va de la segunda a la tercera */
@media(max-width:1100px){
  .familias-cards.mosaico{grid-template-columns:repeat(4,minmax(0,1fr))}
  .familias-cards.mosaico > .bal{grid-column:span 2}
  .familias-cards.mosaico > .bal:last-child:nth-child(odd){grid-column:2 / span 2}
}
@media(max-width:640px){
  /* la séptima ya no es ancha: la misma letra y el mismo envase que las otras */
  .home .familias-cards > :last-child.bal.tab .bal-tab h3{font-size:min(var(--t-tarjeta),6.9cqw)}
  .home .familias-cards > :last-child.bal.tab .bal-tab p{font-size:min(var(--t-nota),5.9cqw)}
  .familias-cards > *:last-child .rot img{height:min(160px,44vw)}
}
/* las certificaciones en dos columnas también en el teléfono (antes una sola bajo 520 px) */
@media(max-width:520px){.casa-certs{grid-template-columns:1fr 1fr}}
/* más aire sobre los enlaces que cierran un bloque, en el apilado */
@media(max-width:900px){
  .sec.mk-solo .mk-panel.solo .lnk{margin-top:30px}   /* "Entrar al mundo Vintage", bajo el comercial (antes 14 px) */
  .casa-col > .lnk{margin-top:30px}                   /* "Saber más", bajo las cuatro formas (antes 22 px) */
}
/* --- HUINCHAS: el riel lo arma app.js con los rótulos dos veces; corre con el desfile de la .tira
   (0 → -50 %) y se funde en los bordes igual que ella. El aire entre rótulos va en cada uno y no en
   gap, para que la vuelta no salte. --- */
@media(max-width:640px){
  .huincha{display:block}
  .huincha-v{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
  .huincha .riel{display:flex;align-items:center;width:max-content;animation:desfile var(--dur,30s) linear infinite}
  .huincha.al-reves .riel{animation-direction:reverse}
  .huincha.parada .riel{animation-play-state:paused}
  .huincha.quieta .huincha-v{overflow-x:auto;scrollbar-width:none}
  .huincha.quieta .huincha-v::-webkit-scrollbar{display:none}
  .huincha.quieta .riel{animation:none}
  /* la banda de sellos: la huincha va de borde a borde de la pantalla */
  .sellos-in.huincha{padding-inline:0}
  .sellos-in.huincha .sello-i{flex:none;white-space:nowrap;margin-right:40px}
  /* los rótulos: todos con su filete a la derecha, también el último de cada vuelta */
  .ns-claves.huincha .riel > span{flex:none;white-space:nowrap;border-right:1px solid var(--linea);padding-right:16px;margin-right:16px}
}
@media(prefers-reduced-motion:reduce){.huincha .riel{animation:none}}
/* === INICIO · móvil, primera ronda · fin === */

/* === INICIO · móvil, segunda ronda (24-09-2026) · inicio === */
/* ============================================================
   INICIO · MÓVIL, SEGUNDA RONDA (Axel, 24-09-2026)
   · Los productos del hero un poco más grandes, con las mismas
     columnas (3,4 a la vista): el envase llena el 96 % de su columna
     (antes el 80 %).
   · "Lo que llevamos / a tu mesa": el destacado en su propia línea.
   · Recetas: el título se achica con la card (9,5 cqw, tope 19 px)
     para que "Hamburguesa" quepa entera, y el pie lleva menos relleno
     a los lados; así el título respira arriba (a 390 px, de 15 a
     unos 27 px de aire).
   Instalado con _fuente/inicio_movil_sitio.py.
   ============================================================ */
@media(max-width:640px){
  .hc-item img{width:96%}
  .home #familias .sec-h h2 em{display:block}
  .home .rc-afiches .rl-afiche{container-type:inline-size}
  .home .rc-afiches .rl-afiche.chica h3{font-size:min(19px,9.5cqw)}
  .home .rc-afiches .rl-afiche-pie{padding:14px 14px 16px}
}
/* === INICIO · móvil, segunda ronda · fin === */

/* === PIE · móvil (24-09-2026) · inicio === */
/* ============================================================
   PIE DEL SITIO · MÓVIL (Axel, 24-09-2026): "en el footer hay que
   tener los logos y textos principalmente centrados, para que no se
   vea desordenado; revisar qué puede estar en 2 columnas".
   En el teléfono van centrados el logo, las etiquetas, las redes,
   los datos, el contacto comercial y los legales; los enlaces de
   cada grupo (Nosotros, Catálogo, Descubre) van como un solo texto
   centrado separado por puntos, sin punto al final de un renglón
   (las dos columnas de la primera vuelta "quedaron raras"); la
   dirección en dos líneas. Las puertas siguen como tarjetas.
   Instalado con _fuente/inicio_movil_sitio.py.
   ============================================================ */
@media(max-width:640px){
  .pf7 .pf7-cab{justify-content:center}
  .pf7 .pf3-lineas{align-self:stretch}
  .pf7 .pf3-linea{text-align:center}
  /* los enlaces de cada grupo como un solo texto centrado, separado por puntos (Axel: "quizás sea mejor como
     todo un texto separado por un punto"; las dos columnas "quedaron raras"). app.js (bloque PIE · renglones)
     esconde el punto que cae al final de un renglón y fija ahí el salto con un corte de ancho completo */
  .pf7 .pf3-linea > div{justify-content:center;row-gap:4px}
  .pf7 .pf3-linea a.fin::after{content:none}
  .pf7 .pf3-linea .corte{flex-basis:100%;height:0}
  .pf7 .pf7-izq .redes{justify-content:center}
  .pf7 .pf1-abajo{justify-items:center;text-align:center}
  .pf7 .pf1-datos{justify-content:center}
  .pf7 .pf1-datos > b,.pf7 .pf1-datos > span{flex-basis:100%}
  /* la dirección en dos líneas: "Av. Américo Vespucio 1313," / "La Cisterna · Santiago, Chile" */
  .pf7 .pf1-datos .dir-ciudad{display:block}
  .pf7 .pf1-abajo .mayorista{justify-self:center;text-align:center;text-wrap:balance}
  .pf .pie-bajo{flex-direction:column;align-items:center;text-align:center;gap:10px}
  .pf .pie-bajo span:first-child{text-wrap:balance}
  /* los legales centrados y sin los puntos: cada enlace es un bloque en línea y los puntos quedan en cero */
  .pf .pie-bajo span:last-child{display:block;font-size:0;line-height:0}
  .pf .pie-bajo span:last-child a{display:inline-block;font-size:10.5px;line-height:1.6;margin:2px 8px}
}
/* === PIE · móvil · fin === */

/* === INICIO · móvil, tercera ronda (24-09-2026) · inicio === */
/* el botón de la esquina del hero que lleva a la receta de la foto, mucho más chico en el teléfono
   (Axel, 24-09-2026: "debe ser mucho más pequeño, es un dato sutil"): letra de 9,5 px, menos relleno y sin sombra */
@media(max-width:640px){
  .hero-rc-receta{padding:5px 9px;gap:6px;border-radius:5px;max-width:min(230px,62vw);box-shadow:none}
  .hero-rc-receta strong{font-size:9.5px;letter-spacing:.06em;gap:5px}
  .hero-rc-receta strong,.hero-rc-receta strong b{font-weight:700}
}
/* === INICIO · móvil, tercera ronda · fin === */

/* === NOSOTROS · móvil (24-09-2026) · inicio === */
/* ============================================================
   NOSOTROS · MÓVIL (Axel, 24-09-2026): "con estos mismos criterios
   debemos mejorar la página de nosotros, especialmente la línea de
   tiempo". Los criterios del inicio: todas las cajas al mismo ancho,
   el texto entero dentro de su caja, orden y simetría, aire sobre
   los botones.
   · Línea de tiempo: cada hito mide lo que las demás cajas (el ancho
     del contenido) y la pista calza de a un hito en el borde, así no
     queda un texto cortado; la foto siempre arriba de la línea y el
     texto abajo (en el escritorio se alternan). Siguen las flechas y
     el mini scroll, que saltan de hito en hito.
   · Cifras de "En un minuto": centradas y la quinta al centro.
   · Cuatro formas: más aire sobre cada enlace.
   · Cierre: los dos botones del mismo ancho, uno bajo el otro.
   Instalado con _fuente/nosotros_movil_sitio.py.
   ============================================================ */
@media(max-width:640px){
  /* la columna = el ancho del contenido + el margen, así el hito siguiente parte justo en el borde de la pantalla */
  .ld{--col:calc(100vw - var(--gutter))}
  .ld-h{padding-right:var(--gutter);scroll-snap-align:start}
  .ld-pista{scroll-padding-inline:var(--gutter)}
  /* la foto arriba también en los hitos que en el escritorio llevan el texto arriba; los tallos cambian de lado */
  .ld-h.txt-arriba .ld-arriba{grid-row:3}
  .ld-h.txt-arriba .ld-abajo{grid-row:1}
  .ld-h.txt-arriba .ld-arriba .ld-tallo{order:-1;flex:0 0 auto;height:16px;min-height:0;margin-top:0}
  .ld-h.txt-arriba .ld-abajo .ld-tallo{order:1;flex:1 1 auto;height:auto;min-height:16px;margin-top:14px}
  /* cuatro formas: más aire sobre cada enlace (antes 10 px) */
  .ns-neg-lista .casa-ng-item .ng-txt .lnk{margin-top:18px}
  /* cierre: los dos botones del mismo ancho, uno bajo el otro */
  .ns-cie-acc{flex-direction:column;align-items:stretch;width:min(100%,280px);margin-inline:auto}
  .ns-cie-acc .btn{justify-content:center}
}
/* el calce de a un hito solo en táctil: con el mouse, el arrastre con inercia de app.js pelearía con él */
@media(max-width:640px) and (hover:none){.ld-pista{scroll-snap-type:x mandatory}}
/* las cifras en dos columnas (bajo 560 px): centradas, con el filete al medio, y la quinta al centro */
@media(max-width:560px){
  .ns-min .ns-cifras .cifra{padding:2px 8px;margin-right:0;text-align:center}
  .ns-min .ns-cifras .cifra:last-child:nth-child(odd){grid-column:1/-1;padding:2px 8px}
}
/* === NOSOTROS · móvil · fin === */

/* === FICHA · móvil (24-09-2026) · inicio === */
/* ============================================================
   FICHA DE PRODUCTO · MÓVIL (Axel, 24-09-2026: "hay que mejorar la
   página de producto")
   · El arreglo: la tira de formatos le daba su ancho a la columna de
     la ficha (una columna de la rejilla no baja del ancho mínimo de su
     contenido): con 8 formatos medía 684 px en una pantalla de 390 y
     el envase, la miga y el texto quedaban cortados a la derecha. Con
     min-width:0 la columna mide la pantalla y la tira se desliza
     dentro. En el escritorio la tira cabe: no cambia nada.
   · En el teléfono la tira llega al borde de la pantalla, con
     miniaturas de 72 px, para que el quinto formato asome y se
     entienda que se desliza; con pocos formatos quedan al centro.
   Instalado con _fuente/ficha_movil_sitio.py.
   ============================================================ */
.fp-panel > *{min-width:0}
@media(max-width:640px){
  .fp-visor .gal{width:auto;max-width:none;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);gap:8px}
  /* al centro cuando caben y desde el margen cuando no: dos espaciadores elásticos a los lados (se les descuenta el gap) */
  .fp-visor .gal::before,.fp-visor .gal::after{content:"";flex:1 0 0}
  .fp-visor .gal::before{margin-right:-8px}
  .fp-visor .gal::after{margin-left:-8px}
  .fp-visor .gal-item,.fp-visor .gal-item .marco{width:72px}
  .fp-visor .gal-item .marco{height:72px}
}
/* === FICHA · móvil · fin === */

/* === FICHA · la caja de datos en el teléfono (14-10-2026) · inicio === */
/* Axel, 14-10-2026: "en la ficha de producto en mobile el texto es muy grande, desarma la caja y en
   algunos casos la palabra sobrepasa la caja". Con tres columnas de ~120 px y la letra a 17 px,
   "BILAMINADO" no cabía. En el teléfono: contenido neto y unidades por caja lado a lado, el envase
   (el texto largo) abajo a todo el ancho, y la letra a 15 px. En cualquier ancho, una palabra que no
   cabe baja entera o se parte, pero ya no se sale de la caja. */
.sku-panel b{overflow-wrap:break-word}
@media(max-width:640px){
  .sku-panel{grid-template-columns:1fr 1fr}
  .sku-panel div{padding:12px 14px}
  .sku-panel b{font-size:15px;line-height:1.15}
  .sku-panel div:nth-child(2){grid-column:1/-1;order:3}
}
/* === FICHA · la caja de datos en el teléfono · fin === */

/* === FICHA · información oficial en el teléfono (24-09-2026) · inicio === */
/* ============================================================
   FICHA · INFORMACIÓN OFICIAL EN EL TELÉFONO (Axel, 24-09-2026:
   "hay que agregar la información nutricional, esto es clave… y
   optimizada para mobile")
   · Pliego abierto: con más de una pestaña (hoy, los productos con
     su rotulación en _fuente/rotulacion.json), en el teléfono no hay
     pestañas y todo queda a la vista en el orden de una etiqueta:
     denominación e ingredientes → información nutricional →
     conservación → el envase → el origen. Es lo que recomendaba el
     Lab 05 (tratamiento B): "la información obligatoria no debería
     estar a un clic de distancia". En el escritorio siguen las
     pestañas; los productos sin tabla quedan igual.
   · La tabla: la porción en su línea bajo el título (en el
     encabezado apretaba la primera columna) y las columnas de
     cifras sin partirse.
   Instalado con _fuente/rotulacion_sitio.py.
   ============================================================ */
.nutri caption .nutri-porcion{display:none}
@media(max-width:640px){
  .fp-oficial .ioa-tabs:has(button + button){display:none}
  .fp-oficial .ioa-cuerpo{display:flex;flex-direction:column;gap:28px}
  .fp-oficial .ioa-panel,.fp-oficial .ioa-panel[hidden],.fp-oficial .ioa-cols{display:contents}
  .fp-oficial .ioa-panel[data-p="rot"] .ioa-cols > div:first-child{order:1}
  .fp-oficial .ioa-panel[data-p="nut"] .ioa-cols > div:first-child{order:2}
  .fp-oficial .ioa-panel[data-p="nut"] .ioa-cols > div:last-child{order:3}
  .fp-oficial .ioa-panel[data-p="rot"] .ioa-cols > div:last-child{order:4}
  .fp-oficial .ioa-cols > div:empty{display:none}
  .nutri caption .nutri-porcion{display:block;margin-top:6px;font-family:var(--cuerpo);font-style:italic;font-weight:500;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
  .nutri .nutri-porcion-th{display:none}
  .nutri thead th{white-space:nowrap}
  .nutri th,.nutri td{padding:9px 6px}
  .nutri th:first-child,.nutri td:first-child{padding-left:0}
  .nutri th:last-child,.nutri td:last-child{padding-right:0}
}
/* === FICHA · información oficial en el teléfono · fin === */

/* === CONTACTO · móvil (25-09-2026) · inicio === */
/* ============================================================
   CONTACTO · MÓVIL (Axel, 25-09-2026), con los criterios del inicio
   · El formulario más ancho: la caja lleva menos relleno, así los
     campos se acercan al ancho del resto (92 %).
   · "Enviar mensaje" a todo el ancho y el aviso de privacidad
     centrado; "Comprar online" con el texto al centro.
   · Contacto general: teléfono y correo lado a lado; la dirección y
     el horario, a todo el ancho.
   · Al elegir un motivo, la página baja al formulario (app.js).
   Instalado con _fuente/contacto_movil_sitio.py.
   ============================================================ */
@media(max-width:640px){
  .ct-caja{padding:24px 18px 26px}
  .ct-comprar{padding:26px 18px}
  .ct-pie{flex-direction:column;align-items:stretch;gap:14px}
  .ct-pie .btn{justify-content:center}
  .ct-pie p{text-align:center}
  .ct-comprar .btn.amarillo{justify-self:stretch;justify-content:center}
  .ct-datos{grid-template-columns:1fr 1fr;gap:16px}
  .ct-dato:first-child,.ct-dato:last-child{grid-column:1/-1}
  .ct-dato b,.ct-dato a{font-size:16px}
}
/* === CONTACTO · móvil · fin === */

/* === MENÚ · móvil (25-09-2026) · inicio === */
/* ============================================================
   MENÚ · MÓVIL (Axel, 25-09-2026: "ahora falta repasar el menú")
   · "Comprar online" vuelve a ser el botón del sitio (pastilla), a
     todo el ancho: la regla de los enlaces del menú abierto le
     quitaba las puntas y le dejaba un borde gris abajo.
   · La tira de productos de cada familia sale a los dos bordes de la
     pantalla, como las otras tiras que se deslizan; el primer envase
     sigue alineado con las líneas. Sin la barra de 6 px que se salía
     del margen, y cada envase en su caja cerrada.
   · En el inicio, el logo chico de la barra aparece solo al bajar,
     igual que en escritorio (Axel, 25-09-2026: "no debe aparecer en
     el inicio, solo al scroll"). Antes se dejaba en el teléfono para
     que la barra no quedara vacía; la lupa y la hamburguesa siguen.
   Instalado con _fuente/menu_movil_sitio.py.
   ============================================================ */
@media(max-width:1200px){
  .topbar.abierto .nav>li.solo-movil>a.btn-movil{display:flex;width:100%;justify-content:center;margin-top:22px;padding:15px 26px;border:1.5px solid var(--azul);border-radius:40px;font-size:12.5px;letter-spacing:.12em;color:var(--azul);background:transparent}
  .topbar.abierto .nav>li.solo-movil>a.btn-movil:hover{background:var(--azul);color:#fff}
  .mv-tira{margin:14px calc(-4px - var(--gutter)) 0 calc(-8px - var(--gutter));padding:6px calc(4px + var(--gutter)) 4px calc(8px + var(--gutter));border-bottom:0}
  .mv-tira img{height:94px;border-bottom:1px solid var(--linea);border-radius:8px;padding:6px 8px}   /* 6 px más de alto: el relleno de abajo, y el envase queda del mismo tamaño */
  /* el logo chico de la barra: en el inicio aparece solo al bajar, igual que en escritorio (la clase
     `limpia` la pone app.js en todos los anchos); la lupa y la hamburguesa se quedan */
  .topbar.limpia:not(.mega-on):not(.abierto) .logo{opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none}
}
/* === MENÚ · móvil · fin === */

/* === BARRA · tramo medio (30-09-2026) · inicio === */
/* La barra de escritorio (logo · cinco enlaces · International, lupa y Comprar online) necesita
   ~1045 px de caja y no cabía bajo ~1330 px de pantalla: la rejilla 1fr auto 1fr de .topbar-in le
   quitaba el espacio al logo (0 px entre 1000 y 1180 px, más chico hasta 1320) y a 1000-1024 px
   "Comprar online" se salía de la pantalla (scroll horizontal en todo el sitio).
   · Hasta 1200 px va la barra de tableta que ya existía (logo, lupa y hamburguesa): los cortes de
     980 px del menú pasaron a 1200 (nav móvil, HEADER v2, hero del inicio y MENÚ · móvil) y a
     1201 la barra limpia del inicio y esDesktop() de app.js. Los demás cortes de 980 no cambian.
   · De 1201 a 1360 px la barra va sin "International" (sigue en el pie) y así cabe completa.
   · El logo ya no se encoge: img{max-width:100%} lo dejaba comprimible dentro de la rejilla. */
.topbar .logo img{max-width:none}
@media(min-width:1201px) and (max-width:1360px){
  .acciones .intl{display:none}
}
/* === BARRA · tramo medio · fin === */

/* ============================================================
   LA CASA · inicio (Lab 33, C3 "la columna", Axel 17-09-2026)
   Quiénes somos + negocios + calidad como un solo relato: la
   portadilla "El sabor de siempre, hecho hoy" (la foto de fondo bajo un
   velo claro, texto centrado) y dos filas imagen | texto con los títulos
   al tamaño chico (subtítulos). Negocios: las cuatro unidades en una
   línea, todas a la vista, sin números ni líneas; la activa a color
   (misma tarjeta [data-negocio] de app.js). Calidad cierra la casa.
   ============================================================ */
.sec.casa{background:#fff;padding-top:0}
/* la portadilla como la portada de Nosotros (Axel, 17-09-2026): la misma foto de la planta, sin velo, el texto en blanco
   con sombra y el acento en amarillo; el zoom lento (ns-zoom) arranca cuando la franja entra a la vista (.va, app.js) */
.casa-portadilla{position:relative;isolation:isolate;overflow:hidden;min-height:min(380px,44vh);display:flex;align-items:center;margin-bottom:clamp(48px,6vw,96px);background:var(--azul-osc);color:#fff}   /* la franja más baja */
.casa-portadilla-fondo{position:absolute;inset:0;z-index:0}
.casa-portadilla-fondo img{width:100%;height:100%;object-fit:cover;object-position:center 40%;transform:scale(1.2)}
.casa-portadilla.va .casa-portadilla-fondo img{animation:ns-zoom 18s cubic-bezier(.12,.55,.2,1) forwards}
.casa-portadilla-in{position:relative;z-index:3;text-align:center;padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(40px,5vw,64px)}
.casa-portadilla h2{font-size:var(--t-seccion);line-height:1.02;max-width:none;margin:0 auto;color:#fff;text-shadow:0 2px 4px rgba(0,9,76,.35),0 6px 30px rgba(0,9,76,.45)}
.home .sec:not(.azul):not(.oscuro) .casa-portadilla h2 em,.casa-portadilla h2 em{color:var(--amarillo)}   /* el acento sobre foto va en amarillo (regla de Axel) */
.casa-portadilla .lead{margin:22px auto 0;max-width:64ch;font-size:clamp(15.5px,1.2vw,17.5px);line-height:1.62;color:#fff;text-shadow:0 1px 2px rgba(0,9,76,.5),0 2px 12px rgba(0,9,76,.5)}
/* las filas: imagen a la izquierda, texto a la derecha; filete entre filas */
.casa-fila{display:grid;grid-template-columns:var(--dos-cols);gap:var(--dos-gap);align-items:center}
.casa-fila > *{min-width:0}
.casa-fila + .casa-fila{margin-top:clamp(48px,6vw,96px)}   /* sin filete ni el aire que lo acompañaba: la calidad sigue a las cuatro formas, es el mismo contenido (Axel, 23-09-2026) */
.home .casa .casa-col h2{font-size:clamp(26px,2.5vw,36px);line-height:1.02;max-width:none}   /* el tamaño chico de "El sabor de la fuente de soda"; pesa más que .home .sec h2 */
.casa-col > .lead{margin-top:18px;max-width:58ch;font-size:clamp(15.5px,1.2vw,17.5px);line-height:1.6}
.casa-col .lead + .lead{margin-top:12px}
.casa .casa-slider{max-width:none;justify-self:stretch;aspect-ratio:16/9}
/* negocios: imagen | título y bajada; debajo, las cuatro unidades en una línea */
.casa-neg2{align-items:center;row-gap:clamp(22px,2.6vw,40px)}
.casa-neg2 .casa-col{align-self:center}
.casa-ng-linea{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.6vw,40px)}
.casa-ng-item{min-width:0}
.casa-ng-item button{display:block;width:100%;text-align:left;padding:0 0 4px;border:0;background:none;color:var(--tinta2);transition:color .25s;cursor:pointer}
.casa-ng-item button span{font-family:var(--sans);font-weight:700;font-size:clamp(17px,1.4vw,21px);letter-spacing:-.015em;line-height:1.1;transition:none}
.casa-ng-item button.on,.casa-ng-item button:hover{color:var(--azul)}
.casa-ng-item .ng-txt,.casa-ng-item .ng-txt.on{display:block;grid-template-rows:none;opacity:.6;visibility:visible;transition:opacity .4s ease}
.casa-ng-item .ng-txt.on{opacity:1}
.casa-ng-item .ng-txt-in{padding-left:0;overflow:visible}
.casa-ng-item .ng-txt .ns-eti,.casa-ng-item .ng-txt p,.casa-ng-item .ng-txt .lnk,
.casa-ng-item .ng-txt.on .ns-eti,.casa-ng-item .ng-txt.on p,.casa-ng-item .ng-txt.on .lnk{opacity:1;transform:none;transition:none}
.casa-ng-item .ng-txt .ns-eti{margin-top:8px}
.casa-ng-item .ng-txt p{font-size:14.5px;line-height:1.55;max-width:none}
.casa-ng-item .ng-txt .lnk{margin:14px 0 0;font-size:11px}
@media(max-width:1100px){
  .casa-ng-linea{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .casa-fila{grid-template-columns:1fr}
  .casa-portadilla{min-height:0}
  .casa-ng-linea{grid-template-columns:1fr;gap:6px}
}

/* === INICIO · botón de la receta del header, simple (07-10-2026) · inicio === */
/* Axel: "me gustaría que se viera simple como está en la imagen de referencia" → sin caja, sin filete ni
   flecha: la etiqueta RECETA chica y espaciada, y el nombre de la receta en blanco, en tipo de texto. */
.hero-rc-receta{background:none;border:0;border-radius:0;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;padding:6px 0;gap:14px;text-shadow:0 1px 10px rgba(0,0,0,.55)}
.hero-rc-receta span{font-family:var(--sans);font-style:normal;font-weight:700;font-size:10.5px;letter-spacing:.2em;color:rgba(255,255,255,.72);padding-top:0}
.hero-rc-receta strong{font-family:var(--cuerpo);font-weight:600;font-size:15px;letter-spacing:0;text-transform:none}
.hero-rc-receta strong::before,.hero-rc-receta strong i{display:none}
.hero-rc-receta strong b{font-weight:600}
.hero-rc-receta:hover{background:none;border:0;color:#fff}
.hero-rc-receta:hover span{color:rgba(255,255,255,.72)}
.hero-rc-receta:hover strong b{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
/* === INICIO · botón de la receta del header, simple · fin === */

/* === ECOVIN · card de marca en verde claro (07-10-2026) · inicio === */
/* Axel: "me gustaba el color verdecito… cambiar el color de blanco a azul en el titular". El card de marca
   (.mk-panel) asume fondo oscuro y escribe en blanco: en Ecovin, sobre su verde claro, va en el azul del logo. */
.mk-panel.mk-ecovin h3,.mk-panel.mk-ecovin .lnk{color:#0b1478}
.mk-panel.mk-ecovin h3 em{color:#10a84f}
/* en el mosaico de logos del menú (y del índice de marcas), Ecovin un poco más chico (Axel, 07-10-2026) */
.logo-tile.alto[href$="marca/ecovin/"] img{height:70px}
.mv-logos .logo-tile.alto[href$="marca/ecovin/"] img{height:52px}
/* === ECOVIN · card de marca en verde claro · fin === */

/* ============================================================
   CARRUSEL DEL INICIO A 6 (Axel, 07-10-2026: "el tamaño de los productos me parece espectacular… agregar
   una columna más, que muestren de a 6 productos al mismo tamaño"). En escritorio pasa de 5,5 a 6,5
   columnas (sigue asomando medio envase) y el envase conserva el tamaño que tenía a 5,5:
   90 % de la columna antigua (100vw / 5,5), tope 330 px. Celular y tableta (≤ 900 px) quedan igual.
   ============================================================ */
@media(min-width:901px){
  .home .hc{--hc-cols:6.5}
  .home .hc-item img{width:min(calc(90vw / 5.5),330px);max-width:none;flex:none}
}

/* CARRUSEL DEL INICIO · sombra sutil (Axel, 07-10-2026: "ahora que las imágenes son de mucho mejor calidad,
   ¿una sombra sutil, para fusionar mejor?"): un contacto corto bajo el envase y un halo suave, en vez de la
   sombra única y pesada de antes (0 18px 18px al 45 %). */
.hc-item img{filter:drop-shadow(0 3px 4px rgba(0,0,0,.28)) drop-shadow(0 16px 24px rgba(0,0,0,.22))}

/* ============================================================
   CARRUSEL DEL INICIO INTEGRADO A LA FOTO · Lab 38, variante C (Axel, 07-10-2026: "definitivamente esta
   es la combinación que mejora todo"). Solo CSS: sirve con cualquier envase que Traverso elija en el panel.
   · A · apoyados: sombra de contacto bajo la base (las fotos llevan 5,4 % de aire bajo el envase)
   · B · una sola luz: velo soft-light sobre envases y fondo, cálido a la izquierda y oscuro en la base,
     que se desvanece hacia arriba (sin borde)
   · tono: el brillo de estudio un punto más abajo
   Reemplaza la sombra doble del bloque anterior.
   ============================================================ */
.home .hc{--hc-img:min(calc(90vw / 5.5),330px)}
@media(max-width:900px){.home .hc{--hc-img:calc(100vw / 2.6 * .8)}}
@media(max-width:640px){.home .hc{--hc-img:calc(100vw / 2.6 * .96)}}
.home .hc-item::before{content:"";position:absolute;left:50%;bottom:calc(var(--hc-img) * .035);width:calc(var(--hc-img) * .62);height:calc(var(--hc-img) * .09);transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.85),rgba(0,0,0,.45) 50%,rgba(0,0,0,0));filter:blur(1.5px);pointer-events:none;z-index:0}
.home .hc-item img{position:relative;z-index:1;filter:brightness(.93) saturate(.9) contrast(.97) drop-shadow(0 2px 2px rgba(0,0,0,.3)) drop-shadow(0 12px 18px rgba(0,0,0,.18))}
/* HERO · tamaños (Lab 43 · E5, 13-10-2026): cada envase trae --esc (mediano 0,78 · chico 0,58; lo elige
   Traverso en el panel). La imagen se achica desde la base del envase (va centrado en su cuadro y ocupa
   ~89 % del alto: la base cae al 94,6 %) y la sombra de contacto con él; `scale` y no `transform`, para no
   pisar el envase elegido (.hc-item.on) */
.home .hc-item img{scale:var(--esc,1);transform-origin:50% 94.6%}
.home .hc-item::before{width:calc(var(--hc-img) * .62 * var(--esc,1));height:calc(var(--hc-img) * .09 * var(--esc,1))}
.home .hc::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:soft-light;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 40%);mask-image:linear-gradient(180deg,transparent 0%,#000 40%);
  background:linear-gradient(100deg,rgba(255,226,190,.3) 0%,rgba(255,226,190,0) 45%),linear-gradient(180deg,rgba(255,240,220,.3) 30%,rgba(0,0,0,0) 60%,rgba(0,0,30,.7) 100%)}
/* en el celular (Axel, 08-10-2026, Brave en Android): el soft-light sobre el carrusel en movimiento se mezcla
   a trozos y deja manchas onduladas alrededor de los envases. En pantallas táctiles, el mismo velo sin modo
   de mezcla: luz cálida a la izquierda y la base un poco más oscura. */
@media(hover:none),(pointer:coarse){
  .home .hc::after{mix-blend-mode:normal;
    background:linear-gradient(100deg,rgba(255,226,190,.08) 0%,rgba(255,226,190,0) 45%),linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,30,.22) 100%)}
}

/* ============================================================
   FAMILIAS EN FILA EN EL CELULAR (Lab 39, propuesta A; Axel, 07-10-2026: "me gusta lista, sin el brillo de
   color de fondo, y los textos de título con el azul más oscuro, un poco más negro el titular")
   Hasta 640 px cada familia es una fila: el nombre grande y la bajada a la izquierda, sobre el muro con un
   velo blanco sutil de izquierda a derecha ("algo sutil"), y el envase a la derecha, que CAMBIA como en las
   cards de antes (Axel: "las imágenes deben ser dinámicas, tal como estaban en los cards"): el que rota sigue
   rotando (app.js) y en las familias que desfilaban (Vinagres, Salsas) los envases de la tira se turnan en
   el mismo lugar (app.js, bloque FAMILIAS EN FILA). Sin el halo de color del muro. Con el tono y la sombra
   de contacto del header (Lab 40). En el catálogo (.pag-catalogo) y en «Lo que llevamos a tu mesa» del
   inicio ("estas al inicio… muy guapas"), cada una con su bajada de siempre. Escritorio y tableta, igual.
   ============================================================ */
@media(max-width:640px){
  /* el inicio: una sola columna (antes dos, con la séptima al centro) */
  .home .familias-cards.mosaico{grid-template-columns:1fr}
  .home .familias-cards.mosaico > .bal.tab:nth-child(n){grid-column:1/-1}
  :is(.pag-catalogo .mosaico,.home .familias-cards.mosaico) > .bal.tab{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 40%;align-items:center}
  :is(.pag-catalogo .mosaico,.home .familias-cards.mosaico) > .bal.tab .bal-tab{position:relative;left:auto;top:auto;transform:none;z-index:3;background:none;box-shadow:none;border-radius:0;
    width:auto;min-width:0;max-width:none;text-align:left;padding:20px 0 20px 18px}
  :is(.pag-catalogo .mosaico,.home .familias-cards.mosaico) > .bal.tab .bal-tab h3{font-weight:800;text-transform:uppercase;letter-spacing:-.01em;white-space:normal;
    font-size:clamp(20px,6vw,26px);line-height:.98;color:var(--azul-osc)}
  :is(.pag-catalogo .mosaico,.home .familias-cards.mosaico) > .bal.tab .bal-tab p{font-size:13px;line-height:1.45;margin:8px 0 0;max-width:none;white-space:normal;text-wrap:pretty}
  /* el envase que rota */
  :is(.pag-catalogo .mosaico,.home .familias-cards.mosaico) > .bal.tab .rot{position:relative;inset:auto;align-self:stretch;min-height:156px}
  :is(.pag-catalogo .mosaico,.home .familias-cards.mosaico) > .bal.tab .rot img{bottom:7%;width:auto;height:auto;max-height:86%;max-width:94%}
  /* las que desfilaban: los envases de la tira, uno sobre otro en el mismo lugar, se turnan (app.js); sin JS, el primero */
  .pag-catalogo .mosaico > .bal.tab .tira{position:relative;inset:auto;height:auto;align-self:stretch;min-height:156px;overflow:visible;
    -webkit-mask-image:none;mask-image:none}
  .pag-catalogo .mosaico > .bal.tab .tira .riel{position:absolute;inset:0;width:auto;padding:0;animation:none}
  .pag-catalogo .mosaico > .bal.tab .tira .riel img{position:absolute;z-index:1;left:50%;bottom:7%;transform:translateX(-50%) translateY(10px);
    width:auto;height:auto;max-height:86%;max-width:94%;opacity:0;transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.2,1);
    filter:drop-shadow(0 2px 2px rgba(0,0,0,.3)) drop-shadow(0 12px 18px rgba(0,0,0,.18))}
  .pag-catalogo .mosaico > .bal.tab .tira .riel img.on,.pag-catalogo .mosaico > .bal.tab .tira:not(.turna) .riel img:first-child{opacity:1;transform:translateX(-50%)}
  .pag-catalogo .mosaico > .bal.tab .tira::after{content:"";position:absolute;left:50%;bottom:calc(7% + 4px);width:58%;height:auto;aspect-ratio:62/9;
    transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(8,12,41,.62),rgba(8,12,41,.3) 50%,rgba(8,12,41,0));filter:blur(1.5px);pointer-events:none;z-index:0}
  /* sin el brillo de color del muro (el halo que toma el color del envase): un velo blanco sutil para leer el texto */
  :is(.pag-catalogo .mosaico,.home .familias-cards.mosaico) > .bal.muro .bal-foto::before{content:"";mix-blend-mode:normal;
    background:linear-gradient(90deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.42) 45%,rgba(255,255,255,0) 75%)}
  /* la sombra del header en los envases sobre el muro (Lab 40); sin el tono desde el 07-10-2026 ("se ven opacos") */
  .bal.muro .rot img{filter:drop-shadow(0 2px 2px rgba(0,0,0,.3)) drop-shadow(0 12px 18px rgba(0,0,0,.18))}
  .bal.muro .rot::after{left:50%;bottom:calc(7% + 4px);width:58%;height:auto;aspect-ratio:62/9;border-radius:50%;background:radial-gradient(closest-side,rgba(8,12,41,.62),rgba(8,12,41,.3) 50%,rgba(8,12,41,0));filter:blur(1.5px)}
}

/* === INICIO · móvil, cuarta ronda (14-10-2026) · inicio === */
/* Axel, 14-10-2026: "darle un poco más de espacio arriba al logo, y la receta achicarla un poco, más pequeña
   la tipografía, está muy apretado, le falta aire arriba". La receta de la esquina había vuelto a 15 px en el
   teléfono (el botón simple del 07-10 pisó la tercera ronda del 24-09): pasa a 12 px. El claim baja para
   que el logo no quede pegado a la receta.
   Segunda vuelta, el mismo día: "más padding arriba del logo, más espacio, que la barra llegue hasta abajo,
   el espacio azul abajo sobra" → el hero mide la pantalla menos la banda de sellos (56 px exactos: 20 + 16
   + 20), así la banda cierra la primera pantalla y no asoma la sección azul de las familias. */
@media(max-width:640px){
  .hero-rc-receta{padding:4px 0}
  .hero-rc-receta strong{font-size:12px}
  .hero-v-claim{padding-top:80px}
  .hero-v{min-height:calc(100vh - 56px);min-height:calc(100svh - 56px)}
  .sellos-in.huincha{padding-block:20px}
  .sellos-in.huincha .sello-i{line-height:16px}
}
/* === INICIO · móvil, cuarta ronda · fin === */

/* === INICIO · escritorio, aire del hero (14-10-2026) · inicio === */
/* Axel, 14-10-2026: "lo mismo en el escritorio, un poco más de aire" (como en el teléfono: más espacio
   sobre el logo y que la banda de sellos llegue hasta abajo). Desde 1200 px los cinco sellos caben en una
   línea: la banda mide 56 px fijos y el hero, la pantalla menos la banda (sin el tope de 820 px), así la
   banda cierra la primera pantalla. Entre 641 y 1199 px (la banda puede ir en dos líneas) queda como estaba. */
@media(min-width:1200px){
  .hero-v{min-height:calc(100vh - 56px);min-height:calc(100svh - 56px)}
  .hero-v-claim{padding-top:clamp(48px,4.4vw,76px)}
  .sellos-in{flex-wrap:nowrap;padding-block:20px}
  .sellos-in .sello-i{line-height:16px;white-space:nowrap}
}
/* === INICIO · escritorio, aire del hero · fin === */

/* === MENÚ · logos sin caja (14-10-2026) · inicio === */
/* Axel, 14-10-2026: "eliminamos las cajas con logos adentro". Los logos de las marcas del menú (escritorio y
   celular) ya no van en baldosa blanca o hielo: el logo oficial directo sobre el panel, con el mismo espacio
   para tocarlo. Al pasar el mouse solo sube, sin la sombra de caja. */
.logo-tile,.mv-logos .logo-tile{background:none;border-radius:0}
.logo-tile:hover{box-shadow:none}
/* === MENÚ · logos sin caja · fin === */

/* === CARD DE FAMILIA · papeles y manteles (14-10-2026) · inicio === */
/* Axel, 14-10-2026 (Lab 45): "me encantan, la mezcla de papeles con manteles se ve muy bien, implementemos
   el catálogo". Las cards de familia (inicio y catálogo) pasan del muro con sombra a un papel o un mantel
   por familia (--foto y --foto-pos, de _fondo_card_vars en construir_sitio.py) y el texto va sin la
   pestaña blanca, como en el celular: el nombre en mayúsculas grandes, arriba a la izquierda, directo
   sobre el fondo. Sobre los fondos oscuros detrás del texto (cuadrillé azul, papel rojo) va en blanco
   (--card-texto, --card-sombra) y, en el teléfono, sin el velo blanco (--card-velo). Sin el tinte del
   envase (--halo en multiply), que ensuciaba los colores del papel. */
.bal.muro .bal-foto{background:var(--img) var(--foto-pos,center)/cover no-repeat,#f3ead9}
@media(min-width:641px){
  .bal.muro .bal-foto::before{display:none}
  :is(.home .familias-cards,.pag-catalogo .mosaico) > .bal.muro.tab .bal-tab{left:0;top:0;transform:none;background:none;box-shadow:none;border-radius:0;
    width:auto;min-width:0;max-width:82%;text-align:left;padding:clamp(18px,1.8vw,28px) clamp(20px,2vw,30px);
    text-shadow:var(--card-sombra,0 0 16px rgba(255,255,255,.75))}
  :is(.home .familias-cards,.pag-catalogo .mosaico) > .bal.muro.tab .bal-tab h3{font-family:var(--sans);font-weight:800;text-transform:uppercase;
    letter-spacing:-.01em;white-space:normal;font-size:clamp(22px,2.1vw,32px);line-height:.98;color:var(--card-texto,var(--azul-osc))}
  :is(.home .familias-cards,.pag-catalogo .mosaico) > .bal.muro.tab .bal-tab p{font-size:clamp(13px,1vw,15px);line-height:1.45;margin:8px 0 0;
    max-width:34ch;white-space:normal;color:var(--card-texto,var(--tinta));text-wrap:pretty}
}
@media(max-width:640px){
  :is(.pag-catalogo .mosaico,.home .familias-cards.mosaico) > .bal.muro .bal-foto::before{
    background:var(--card-velo,linear-gradient(90deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.42) 45%,rgba(255,255,255,0) 75%))}
  :is(.pag-catalogo .mosaico,.home .familias-cards.mosaico) > .bal.muro.tab .bal-tab{text-shadow:var(--card-sombra,none)}
  :is(.pag-catalogo .mosaico,.home .familias-cards.mosaico) > .bal.muro.tab .bal-tab h3{color:var(--card-texto,var(--azul-osc))}
  :is(.pag-catalogo .mosaico,.home .familias-cards.mosaico) > .bal.muro.tab .bal-tab p{color:var(--card-texto,var(--tinta))}
}
/* === CARD DE FAMILIA · papeles y manteles · fin === */

/* === CATEGORÍA · cabecera con su papel o mantel (14-10-2026) · inicio === */
/* Axel, 14-10-2026: "en el catálogo, en el fondo del header vamos a colocar la imagen del mantel". La
   cabecera de cada categoría lleva el mismo papel o mantel que su card del inicio y del catálogo
   (--foto, --foto-pos de _fondo_card_vars), así la página abre con la misma pieza que se tocó. Un velo
   crema a la izquierda, donde va el texto, que se abre hacia la derecha para dejar ver el fondo; en el
   teléfono el texto ocupa todo el ancho y el velo va parejo. Sobre el cuadrillé azul y el papel rojo, el
   velo es oscuro (.oscuro) y el texto va en blanco (--card-texto, --card-sombra). */
.cat-cab.con-fondo{--velo:linear-gradient(90deg,rgba(250,247,240,.93) 0%,rgba(250,247,240,.8) 42%,rgba(250,247,240,.12) 100%);
  background:var(--velo),var(--foto) var(--foto-pos,center)/cover no-repeat,#f3ead9}
.cat-cab.con-fondo.oscuro{--velo:linear-gradient(90deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.34) 45%,rgba(0,0,0,.06) 100%)}
@media(max-width:640px){
  .cat-cab.con-fondo{--velo:linear-gradient(rgba(250,247,240,.86),rgba(250,247,240,.86))}
  .cat-cab.con-fondo.oscuro{--velo:linear-gradient(rgba(0,0,0,.42),rgba(0,0,0,.42))}
}
.cat-cab.con-fondo h1{color:var(--card-texto,var(--azul-osc));text-shadow:var(--card-sombra,none)}
.cat-cab.con-fondo .lead{color:var(--card-texto,var(--tinta));text-shadow:var(--card-sombra,none)}
.cat-cab.con-fondo .miga,.cat-cab.con-fondo .miga a{color:var(--card-texto,var(--gris))}
.cat-cab.con-fondo .miga b{color:var(--card-texto,var(--fam))}
/* === CATEGORÍA · cabecera con su papel o mantel · fin === */

/* === CATEGORÍA · grupos dentro de la grilla ===
   Limones (Axel, 15-10-2026): "Tradicionales" arriba e "Innovaciones" abajo, de forma sutil. El rótulo de
   siempre (.ojo) sobre un filete fino a todo el ancho; cada grupo empieza fila nueva. Lo arma
   GRUPOS_CATEGORIA en construir_sitio.py (espejo en catalogo.php). */
.ca .prods-h{grid-column:1/-1;padding-bottom:10px;border-bottom:1px solid var(--linea)}
.ca .prods-h~.prods-h{margin-top:clamp(14px,2vw,28px)}
/* === CATEGORÍA · grupos dentro de la grilla · fin === */

/* === NOSOTROS · subtítulos de misión y visión (19-10-2026) ===
   Traverso en el tablero (Alejandra, 14-10-2026): "Llevamos sabor a tu mesa. Con letra más grande" y "Crecer,
   innovar y llegar más lejos… del mismo tamaño que el subtítulo de arriba". Los rótulos chicos (.ns-eti) pasan a
   subtítulo: la letra de los títulos del sitio (h1-h4), al tamaño de los títulos de las cards (.cat-card h3),
   en el amarillo que ya tenía el rótulo. */
.pp-frase .pp-sub{display:block;color:var(--amarillo);font-size:clamp(24px,2.4vw,34px);font-weight:800;
  text-transform:uppercase;letter-spacing:-.02em;line-height:1;margin-bottom:18px}
/* === NOSOTROS · subtítulos de misión y visión · fin === */

/* === PUERTA · Traverso International Foods (21-10-2026) · inicio === */
/* la tercera puerta del menú y del pie (antes «Para tu negocio»): el nombre es largo y la frase también; el nombre
   pasa a dos líneas y la frase toma el ancho de la tarjeta, sin tocar la flecha */
.puerta.p-int .p-int-nombre,.pf6 .puerta.p-int .p-int-nombre{white-space:normal;max-width:none;line-height:0}   /* el logo oficial de traversointernational.com en vez del nombre */
.pf6 .puerta.p-int small,.puertas-menu .puerta.p-int small{max-width:30ch}
.pf6 .puerta.p-int > span:not(.envases){max-width:calc(100% - 60px)}
.puertas-menu .puerta.p-int > span:not(.envases){max-width:calc(100% - 44px)}
.puerta.p-int .p-int-logo{position:static;display:block;height:34px;width:auto;max-width:100%;transform:none;filter:none;margin:0 0 4px}
.puertas-menu .puerta.p-int .p-int-logo{height:28px}
/* más aire entre el logo y la frase sin agrandar la tarjeta (Axel, 21-10-2026): el espacio que gana el logo abajo lo cede
   la frase arriba (pie: 4 + 8 → 12 + 0; menú: 4 + 6 → 10 + 0) */
.pf6 .puerta.p-int .p-int-logo{margin-bottom:12px}
.pf6 .puerta.p-int small{margin-top:0}
.puertas-menu .puerta.p-int .p-int-logo{margin-bottom:10px}
.puertas-menu .puerta.p-int small{margin-top:0}
/* las frases de las tres puertas se cortan donde dijo Axel (21-10-2026: "El sabor de la / fuente de soda", "Por ocasión y /
   por producto", "Conoce nuestro / catálogo internacional"): con <br>, sin ancho máximo que las corte antes */
.pf6 .puerta small,.puertas-menu .puerta small,.pf6 .puerta.p-int small,.puertas-menu .puerta.p-int small{max-width:none;white-space:nowrap}
/* === PUERTA · Traverso International Foods · fin === */
/* inicio · Cuatro formas: Traverso International Foods como marca hermana (Axel, 21-10-2026: "una marca paralela, de la
   misma familia… su diagramación necesita imponer un poco de respeto, muy elegante y sutil"). Bajo «Saber más», tras un filete:
   el logo a color con aire propio, un filete vertical y el rótulo, la frase y el enlace. Presencia por el aire, no por el tamaño */
.casa-intl{display:grid;grid-template-columns:auto 1px minmax(0,1fr);align-items:center;column-gap:clamp(20px,2.2vw,32px);margin-top:0;padding-top:16px;border-top:1px solid var(--linea)}
.casa-intl::after{content:"";grid-column:2;grid-row:1;align-self:stretch;background:var(--linea)}
.casa-intl-logo{grid-column:1;grid-row:1;display:block;transition:opacity .25s}
.casa-intl-logo img{display:block;height:clamp(34px,2.8vw,42px);width:auto}
.casa-intl-logo:hover{opacity:.8}
.casa-intl-txt{grid-column:3;grid-row:1;padding:2px 0}
.casa-intl-txt .ojo{font-size:10px;letter-spacing:.22em}
.casa-intl-txt .ojo::before{content:none}
/* inicio · el subtítulo de la portadilla de La casa (Alejandra en el tablero, 21-10-2026), bajo el titular, en blanco sobre la foto */
.casa-portadilla-sub{margin:clamp(14px,1.4vw,20px) 0 0;font-family:var(--cuerpo);font-weight:500;font-size:clamp(17px,1.5vw,21px);line-height:1.4;color:#fff;max-width:36ch;text-shadow:0 1px 3px rgba(0,9,76,.45)}   /* sin la raya amarilla (Axel, 21-10-2026: "el destacado amarillo hay que eliminarlo") */
/* la fila de las formas: los tres nombres a la izquierda y «Saber más» a la derecha (Axel, 21-10-2026), con el mismo aire de la
   línea de arriba a la fila, de la fila a la línea de abajo y de esa línea a la firma de International. International ya no va en
   la fila: está en la firma. En el celular, «Saber más» baja (los nombres son la huincha que corre) */
.formas-fila{display:flex;align-items:center;justify-content:space-between;gap:14px 28px;margin-top:24px;padding:16px 0;border-top:1px solid var(--linea)}
.formas-fila .ns-claves{margin:0;padding:0;border:0;min-width:0}
.formas-fila .lnk{flex:none;font-size:11px;padding-bottom:3px}
@media(max-width:640px){.formas-fila{flex-direction:column;align-items:flex-start}.formas-fila .ns-claves{width:100%}}
.casa-intl-txt p{margin:8px 0 6px;font-size:14.5px;line-height:1.5;color:var(--tinta2);max-width:48ch;text-wrap:pretty}
.casa-intl-ir{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.06em;color:var(--azul);text-decoration:none;transition:box-shadow .25s}
.casa-intl-ir:hover,.casa-intl-ir:focus-visible{box-shadow:inset 0 -2px 0 var(--amarillo)}
/* «Saber más» de las cuatro formas, en el celular, a la derecha del logo de International (Axel, 22-10-2026: "movamos el
   botón de saber más a la derecha del logo de Traverso International, ahí en mobile queda bien"): bajo la huincha quedaba
   solo en su renglón. Va dos veces en el marcado: el de la fila de las formas (computador y tableta) y .casa-intl-mas
   junto al logo (celular); cada uno se esconde en el otro tramo */
.casa-intl-mas{display:none}
@media(max-width:640px){
  .casa-intl{grid-template-columns:auto minmax(0,1fr);row-gap:16px}
  .casa-intl::after{display:none}
  .casa-intl-txt{grid-column:1 / -1;grid-row:2}
  .formas-fila .lnk{display:none}
  .casa-intl .casa-intl-mas{display:inline-flex;grid-column:2;grid-row:1;justify-self:end;align-self:center;font-size:11px;padding-bottom:3px;white-space:nowrap}
}

/* === LÍNEA B · la infografía viva · inicio === */
/* =====================================================================
   NUESTRA HISTORIA · la infografía viva (opción B de lineas-de-tiempo/, en Nosotros desde el 21-10-2026)
   La pieza «Historia Traverso» de Traverso hecha página: papel crema, una sola línea horizontal con
   todos los hitos a la vista, alternados arriba y abajo con su tallo, el año grande (la referencia de
   Nutrisco) y la imagen de cada época. Al llegar la línea se dibuja y los hitos se encienden en orden;
   el mouse (o el dedo) destaca un hito y apaga el resto.
   ===================================================================== */
.lc-b{--crema:#f6f1e6;--crema-osc:#ece4d2;position:relative;background-color:var(--crema);color:var(--azul);overflow:hidden;isolation:isolate}
.lc-b::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.55;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55  0 0 0 0 .47  0 0 0 0 .32  0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}
.lc-b-cab{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 48px;align-items:end;margin-bottom:clamp(34px,4vw,60px)}
.lc-b-cab h2{color:var(--azul)}
.lc-b-cab h2 em{color:var(--azul-med)}
.lc-b-lema{margin:0;padding-left:20px;border-left:2px solid var(--azul);font-family:var(--sans);font-weight:600;font-size:13px;line-height:1.9;letter-spacing:.32em;text-transform:uppercase;color:var(--azul)}

/* la línea: una grilla de n+1 columnas; cada hito ocupa dos, arriba los pares y abajo los impares (como la
   infografía), el eje en la fila del medio */
/* la línea más ancha que la pantalla: parte alineada con el .wrap y se arrastra hacia la derecha */
.lc-b-scroll{--col:clamp(140px,11.2vw,170px);overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;cursor:grab;padding:6px calc((100% - var(--ancho)) / 2 + var(--gutter)) 26px;outline:none}
/* la barra para arrastrar: fina y separada del contenido (Axel, 21-10-2026). Chrome/Safari con ::-webkit-scrollbar;
   Firefox (no la conoce) con la delgada estándar */
.lc-b-scroll::-webkit-scrollbar{height:3px}
.lc-b-scroll::-webkit-scrollbar-track{background:rgba(0,14,120,.1);border-radius:3px}
.lc-b-scroll::-webkit-scrollbar-thumb{background:var(--azul);border-radius:3px}
@supports not selector(::-webkit-scrollbar){.lc-b-scroll{scrollbar-width:thin;scrollbar-color:var(--azul) rgba(0,14,120,.1)}}
.lc-b-scroll.arrastrando{cursor:grabbing;user-select:none}
.lc-b-scroll.arrastrando .lc-b-h{pointer-events:none}
.lc-b-hitos{list-style:none;margin:0;padding:0;display:grid;width:max-content;grid-template-columns:repeat(var(--n),var(--col)) calc(var(--col) * 1.8);grid-template-rows:auto 3px auto;column-gap:0;position:relative}
/* "arrastra": chico, centrado y pegado a la línea (Axel, 21-10-2026) */
.lc-b-pie{display:flex;justify-content:center}
.lc-b-pista{margin:2px 0 0;font-family:var(--sans);font-weight:600;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--azul-med);opacity:.85}
.lc-b-pista span{display:inline-block;animation:lc-pista 1.6s ease-in-out infinite}
.lc-b-pista span.izq{animation-name:lc-pista-izq}   /* parte al medio: se recorre hacia los dos lados (21-10-2026) */
@keyframes lc-pista-izq{50%{transform:translateX(-6px)}}
@keyframes lc-pista{50%{transform:translateX(6px)}}
.lc-b-eje{grid-row:2;grid-column:1/-1;background:var(--azul);border-radius:2px;transform-origin:left center;transform:scaleX(0);transition:transform 1.8s cubic-bezier(.65,0,.25,1)}
.lc-b-h{grid-column:var(--c) / span 2;position:relative;padding:0 22px 0 24px;outline:none;transition:opacity .35s,transform .35s}
.lc-b-h.arriba{grid-row:1;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:34px}
.lc-b-h.abajo{grid-row:3;padding-top:34px}
.lc-b-tallo{position:absolute;left:0;width:2px;background:var(--azul);transform:scaleY(0);transition:transform .7s cubic-bezier(.3,0,.2,1)}
.lc-b-h.arriba .lc-b-tallo{top:6px;bottom:0;transform-origin:bottom}
.lc-b-h.abajo .lc-b-tallo{top:0;height:calc(100% - 4px);max-height:220px;transform-origin:top}
.lc-b-punto{position:absolute;left:-8px;width:18px;height:18px;border-radius:50%;background:var(--azul);box-shadow:0 0 0 4px var(--crema);transform:scale(0);transition:transform .45s cubic-bezier(.3,1.6,.5,1),background .25s}
.lc-b-h.arriba .lc-b-punto{bottom:-10px}
.lc-b-h.abajo .lc-b-punto{top:-10px}
.lc-b-txt,.lc-b-fig{opacity:0;transform:translateY(14px);transition:opacity .6s,transform .6s cubic-bezier(.2,.7,.2,1)}
/* el año, sobre la línea junto a su punto (21-10-2026): el papel detrás corta la línea a su alrededor */
.lc-b-ano{position:absolute;left:16px;z-index:2;padding:0 8px 0 4px;background:var(--crema);font-family:var(--sans);font-weight:800;font-size:clamp(22px,1.8vw,28px);line-height:1;letter-spacing:-.01em;color:var(--azul);white-space:nowrap;transition:box-shadow .3s,color .25s;opacity:0}
.lc-b-h.arriba .lc-b-ano{bottom:calc(-.5em - 1.5px)}
.lc-b-h.abajo .lc-b-ano{top:calc(-.5em - 1.5px)}
.lc-b-resto{font-size:.6em;letter-spacing:0;margin-left:.2em}
/* una época en vez de un año («Época del 50», «Década de 1960», 21-10-2026): más chica, para que quepa entre sus vecinos */
.lc-b-ano.texto{font-size:clamp(15px,1.15vw,18px);letter-spacing:0}
.lc-b-txt h3{text-wrap:balance;margin:0 0 6px;font-family:var(--sans);font-size:18px;line-height:1.12;text-transform:none;letter-spacing:-.01em;color:var(--azul)}
.lc-b-txt p{margin:0;font-size:14.5px;line-height:1.48;color:var(--azul-osc);max-width:none;text-wrap:pretty}   /* pretty: sin palabras sueltas en la última línea */
/* todas las imágenes en una caja del mismo alto (21-10-2026: "que no sean más altas unas que otras") */
.lc-b-fig{margin:14px 0 0;height:clamp(118px,9.6vw,146px);width:100%;max-width:280px}
.lc-b-h.abajo .lc-b-fig{margin-top:16px}
.lc-b-fig img{width:100%;height:100%;object-fit:cover;display:block;
  -webkit-mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,#000 58%,transparent 100%);mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,#000 58%,transparent 100%)}
.lc-b-fig.t-arch img{filter:grayscale(1) sepia(.25) contrast(1.05)}
.lc-b-fig.t-obj img{object-fit:contain;object-position:left center}   /* el trofeo y Campari, enteros (21-10-2026) */
.lc-b-fig.t-pack{display:flex}
.lc-b-fig.t-pack img{object-fit:contain;object-position:left bottom;height:84%;margin-top:auto;-webkit-mask-image:none;mask-image:none;filter:drop-shadow(0 8px 10px rgba(0,9,76,.2))}
/* un producto: la familia, de menor a mayor, más chica que la caja y apoyada abajo */
.lc-b-fig.t-familia{display:flex;align-items:flex-end;padding-bottom:4px}
.lc-b-fig.t-familia img{width:auto;height:calc(var(--h) * 92%);aspect-ratio:.36;max-width:none;object-fit:cover;object-position:center bottom;-webkit-mask-image:none;mask-image:none;margin-right:2px;filter:drop-shadow(0 8px 10px rgba(0,9,76,.2))}

/* al llegar: la línea se dibuja y los hitos se encienden en orden */
.lc-b-hitos.on .lc-b-eje{transform:scaleX(1)}
.lc-b-hitos.on .lc-b-punto{transform:scale(1);transition-delay:calc(.25s + var(--k) * .2s)}
.lc-b-hitos.on .lc-b-ano{opacity:1;transition:opacity .5s calc(.3s + var(--k) * .2s),box-shadow .3s,color .25s}
.lc-b-hitos.listo .lc-b-ano{transition:box-shadow .3s,color .25s}
.lc-b-hitos.on .lc-b-tallo{transform:scaleY(1);transition-delay:calc(.45s + var(--k) * .2s)}
.lc-b-hitos.on .lc-b-txt,.lc-b-hitos.on .lc-b-fig{opacity:1;transform:none;transition-delay:calc(.6s + var(--k) * .2s)}

/* destacar uno: el resto se apaga y el año se marca con amarillo */
/* destacar uno (21-10-2026: "que el punto no tenga la opacidad baja… solo la línea, el texto y la imagen"): de los
   otros se apagan el tallo, el texto y la imagen; los años y los puntos quedan enteros y se lee el orden */
.lc-b-tallo,.lc-b-txt,.lc-b-fig{transition:opacity .35s,transform .6s cubic-bezier(.2,.7,.2,1)}
@media(hover:hover){.lc-b-hitos.listo:hover .lc-b-h:not(:hover) :is(.lc-b-tallo,.lc-b-txt,.lc-b-fig){opacity:.28}}
.lc-b-hitos.listo.elige .lc-b-h:not(.activo) :is(.lc-b-tallo,.lc-b-txt,.lc-b-fig){opacity:.28}
.lc-b-hitos.listo .lc-b-h.arriba:is(:hover,:focus-visible,.activo) :is(.lc-b-txt,.lc-b-fig){transform:translateY(-4px)}
.lc-b-hitos.listo .lc-b-h.abajo:is(:hover,:focus-visible,.activo) :is(.lc-b-txt,.lc-b-fig){transform:translateY(4px)}
/* ya entrada la línea, apagar y encender es inmediato (sin el retraso escalonado de la entrada) */
.lc-b-hitos.on.listo .lc-b-h :is(.lc-b-tallo,.lc-b-txt,.lc-b-fig,.lc-b-punto){transition-delay:0s}
/* la fecha en lugar del punto (Axel, 21-10-2026: "¿y si reemplazas el punto por la fecha?"): el año queda centrado
   en el tallo, sobre la línea; el tallo llega hasta él. Solo en el computador: en el celular sigue el punto */
@media(min-width:901px){
  .lc-b-punto{display:none}
  .lc-b-ano{left:0;padding:0 9px;transform:translateX(-50%) scale(.7)}
  .lc-b-hitos.on .lc-b-ano{transform:translateX(-50%);transition:opacity .5s calc(.3s + var(--k) * .2s),transform .5s cubic-bezier(.3,1.6,.5,1) calc(.3s + var(--k) * .2s),box-shadow .3s,color .25s}
  .lc-b-hitos.listo .lc-b-ano{transition:box-shadow .3s,color .25s,transform .3s}
  .lc-b-h:is(:hover,:focus-visible,.activo) .lc-b-ano{color:var(--azul-med)}
}
/* el año se subraya con el marcador amarillo */
.lc-b-h:is(:hover,:focus-visible,.activo) .lc-b-ano{box-shadow:inset 0 -.34em 0 var(--amarillo)}
.lc-b-h:is(:hover,:focus-visible,.activo) .lc-b-punto{background:var(--azul-med);box-shadow:0 0 0 4px var(--crema),0 0 0 7px var(--amarillo)}
.lc-b-h{cursor:pointer}

/* celular y tablet angosta (Axel, 22-10-2026: "la línea de tiempo dejó de funcionar en mobile… que aparecieran los
   cards en 3 columnas arriba y abajo y al hacer clic se hace un pop up con el card de ese año, simple, como que crece,
   y puedo recorrer 6 hitos por pantalla"; "si hago clic crece, si dejo apretado arrastra"). La misma línea del
   computador en pantallas de seis hitos: tres arriba y tres abajo, alternados con su tallo y su punto; cada pantalla
   son 7 columnas del ancho de la caja (los hitos ocupan dos) y se pasa de a una (scroll-snap). En el card chico van el
   año, el título y la imagen; el texto se lee al tocarlo (.lc-b-carta). La vertical de antes quedaba invisible: la
   lista medía ~4.800 px y el 18 % que pedía el IntersectionObserver nunca cabía en la pantalla */
@media(max-width:900px){
  .lc-b-cab{grid-template-columns:1fr}
  .lc-b-lema{font-size:11.5px}
  .lc-b-scroll{container-type:inline-size;cursor:auto;scroll-snap-type:x mandatory;scroll-padding-inline:calc((100% - var(--ancho)) / 2 + var(--gutter))}
  .lc-b-scroll.arrastrando{scroll-snap-type:none}
  .lc-b-hitos{grid-template-columns:repeat(var(--cols-m),calc((100vw - 2 * var(--gutter)) / 7))}
  @supports(width:1cqw){ .lc-b-hitos{grid-template-columns:repeat(var(--cols-m),calc(100cqw / 7))} }
  .lc-b-eje{grid-column:1 / var(--fin-m)}
  .lc-b-h{grid-column:var(--cm) / span 2}
  .lc-b-h.ini{scroll-snap-align:start}
  .lc-b-h,.lc-b-h.arriba,.lc-b-h.abajo{padding-left:10px;padding-right:6px}
  .lc-b-h.arriba{padding-bottom:20px}
  .lc-b-h.abajo{padding-top:20px}
  .lc-b-punto{width:12px;height:12px;left:-5px;box-shadow:0 0 0 3px var(--crema)}
  .lc-b-h.arriba .lc-b-punto{bottom:-7.5px}
  .lc-b-h.abajo .lc-b-punto{top:-7.5px}
  .lc-b-h:is(:hover,:focus-visible,.activo) .lc-b-punto{box-shadow:0 0 0 3px var(--crema),0 0 0 5px var(--amarillo)}
  .lc-b-ano,.lc-b-h.arriba .lc-b-ano,.lc-b-h.abajo .lc-b-ano{position:static;align-self:flex-start;display:inline-block;margin:0 0 5px;padding:0;background:none;font-size:18px}
  .lc-b-h .lc-b-ano.texto{font-size:12px}
  .lc-b-txt h3{margin:0;font-size:12px;line-height:1.16;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
  /* dejar el dedo apretado arrastra la línea: sin seleccionar texto ni abrir el menú de la imagen */
  .lc-b-hitos{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  .lc-b-txt p{display:none}
  .lc-b-fig,.lc-b-h.abajo .lc-b-fig{height:60px;margin-top:8px;max-width:none}
  .lc-b-hitos.listo .lc-b-h:is(:hover,:focus-visible,.activo) :is(.lc-b-txt,.lc-b-fig){transform:none}
}
/* el card de un hito en el celular: crece desde el hito tocado hasta el centro (linea-b.js), en el papel de la línea,
   con la imagen, el año, el título y el texto completos; se cierra con la ✕ (el círculo de la lupa), tocando fuera o Esc */
.lc-b-velo{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:var(--gutter);background:rgba(0,9,76,0);transition:background .35s}
.lc-b-velo.on{background:rgba(0,9,76,.45)}
.lc-b.lc-b-carta{width:min(100%,440px);max-height:100%;overflow:auto;overscroll-behavior:contain;border-radius:14px;padding:22px 22px 26px;
  box-shadow:0 24px 60px rgba(0,9,76,.35);transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s}
.lc-b-carta .lc-b-fig{opacity:1;transform:none;height:200px;max-width:none;margin:0 0 18px}
.lc-b-carta .lc-b-fig.t-obj img{object-position:center}
.lc-b-carta .lc-b-fig.t-pack img{object-position:center bottom}
.lc-b-carta .lc-b-fig.t-familia,.lc-b-carta .lc-b-fig.t-pack{justify-content:center}
.lc-b-carta .lc-b-ano{position:static;display:inline-block;opacity:1;transform:none;margin:0 0 10px;padding:0;background:none;font-size:34px;box-shadow:inset 0 -.34em 0 var(--amarillo)}
.lc-b-carta .lc-b-ano.texto{font-size:22px}
.lc-b-carta .lc-b-txt{opacity:1;transform:none}
.lc-b-carta .lc-b-txt h3{font-size:21px;margin:0 0 10px}
.lc-b-carta .lc-b-txt p{display:block;font-size:15px}
.lc-b-cierra{position:absolute;top:12px;right:12px;z-index:3;width:40px;height:40px;padding:0;border-radius:50%;border:1px solid var(--linea);background:var(--crema);
  color:var(--tinta2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.lc-b-cierra:hover,.lc-b-cierra:focus-visible{background:var(--hielo);border-color:var(--bruma);color:var(--azul)}
.lc-b-cierra svg{width:16px;height:16px}
html.lc-b-abierta{overflow:hidden}
@media(prefers-reduced-motion:reduce){
  .lc-b-eje,.lc-b-punto,.lc-b-tallo,.lc-b-txt,.lc-b-fig,.lc-b-ano{transition:none!important}
}
/* === LÍNEA B · fin === */

/* === IDIOMAS · el selector ESP | ENG junto a la lupa (21-10-2026) · inicio ===
   Axel: "agregar al menú el ENG y ESP al lado de la lupa" (después, "coloquemos ES EN"); "que sean circulitos, así aparecen
   3 círculos en el menú con 3 acciones diferentes". ESP y ENG son el mismo círculo de la lupa (.acc-ico),
   con la letra de "International ↗"; el idioma de la página con el borde y la letra en azul. Los enlaces
   los pone admin/idiomas.php (la página gemela en en/). En el inicio, sobre la foto, en blanco; con la
   barra limpia se esconde junto a la lupa. */
.idiomas{display:inline-flex;align-items:center;flex:none;gap:inherit}
.idiomas .lang-op{width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none;
  border:1px solid var(--linea);font-family:var(--sans);font-weight:700;font-size:10px;letter-spacing:.08em;padding-left:.08em;
  text-transform:uppercase;color:var(--tinta2);text-decoration:none;transition:background .2s,border-color .2s,color .2s}
.idiomas .lang-op:hover{background:var(--hielo);border-color:var(--bruma);color:var(--azul)}
.idiomas .lang-op.on{border-color:var(--azul);color:var(--azul)}
body.home .topbar:not(.pegado):not(.abierto) .idiomas .lang-op{color:#fff;border-color:rgba(255,255,255,.6)}
body.home .topbar:not(.pegado):not(.abierto) .idiomas .lang-op.on{border-color:#fff}
.topbar .acciones > .idiomas{transition:opacity .32s ease,transform .32s ease,visibility .32s}
@media(min-width:1201px){
  .topbar.limpia:not(.mega-on):not(.abierto) .acciones > .idiomas{opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none}
}
@media(prefers-reduced-motion:reduce){ .topbar .acciones > .idiomas{transition:none} }
/* el mismo alto que el botón de al lado (Axel: "así se ve todo unificado"): en escritorio, el de "Comprar
   online"; en tableta y celular, el de la hamburguesa. ES · EN en dos letras para no achicar la letra */
@media(min-width:1201px){ .topbar .acciones .acc-ico,.topbar .idiomas .lang-op{width:36px;height:36px} }
@media(max-width:1200px){ .topbar .acciones .acc-ico,.topbar .idiomas .lang-op{width:44px;height:44px} }
/* un poco menos de aire entre los círculos y el botón (Axel, 21-10-2026: "disminuir un poco el espaciado"): de 12 a 8 px */
.topbar .acciones{gap:8px}
/* «Comprar online» con los colores de la lupa y de ES · EN (Axel, 21-10-2026: "debe tener los mismos colores que la
   lupa y el EN y ES"): borde gris, letra gris; al pasar, el celeste de los círculos. Sobre la foto del inicio los cuatro
   siguen en blanco y al pasar se llenan de blanco con la letra azul (como .btn.ghost sobre fondo oscuro). */
.topbar .acciones .btn.ghost.sm{border-color:var(--linea);color:var(--tinta2);transition:background .2s,border-color .2s,color .2s}
.topbar .acciones .btn.ghost.sm:hover{background:var(--hielo);border-color:var(--bruma);color:var(--azul)}
body.home .topbar:not(.pegado):not(.abierto) .acciones :is(.acc-ico,.btn.ghost,.lang-op):hover{background:#fff;border-color:#fff;color:var(--azul)}
/* en inglés las palabras largas de la caja de datos de la ficha ("polyethylene") se parten con guion,
   no a la mala: el diccionario de guiones lo da lang="en" */
html:is([lang="en"],[lang="pt-BR"]) .sku-panel b{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:normal}   /* y en portugués (29-10-2026) */
/* === IDIOMAS · fin === */

/* === PULIDO · títulos largos de las cards de familia (21-10-2026; sin cortes desde el 29-10-2026) ===
   "CONCENTRADOS" (y en inglés "CONCENTRATES") no cabía en las cards angostas del inicio y del catálogo.
   El 21-10 se partía con guion; Axel, 29-10-2026: "no debemos cortar las palabras". Ahora va entera: en
   computador y tableta la caja del título crece lo justo para la palabra más larga (sobre su 82 %, hasta el
   ancho de la card) y, si ni así cabe, o en el celular junto al envase, app.js baja la letra de todos los
   títulos de la página al mismo tamaño (bloque FAMILIAS · títulos sin cortar). */
:is(.home .familias-cards,.pag-catalogo .mosaico) > .bal.tab .bal-tab h3{hyphens:manual;-webkit-hyphens:manual;overflow-wrap:normal}
@media(min-width:641px){
  :is(.home .familias-cards,.pag-catalogo .mosaico) > .bal.muro.tab .bal-tab{min-width:min-content}
}
/* Los formatos de la ficha (Axel, 21-10-2026: "en el carrusel de formatos no alcanzan a verse todos… después de
   un número se tupe"): con siete o más, la tira no cabía en la columna y los últimos quedaban cortados (el
   desplazamiento no se nota). En computador y tableta pasan a dos filas parejas (8 → 4 + 4, 9 → 5 + 4); en el
   celular sigue la tira que se desliza a sangre. */
@media(min-width:641px){
  .gal:not([hidden]):has(> :nth-child(7)){display:grid;grid-template-columns:repeat(var(--gal-cols,4),minmax(0,78px));justify-content:center;
    column-gap:clamp(8px,1.4vw,20px);row-gap:18px;overflow:visible;width:auto}
  .gal:not([hidden]):has(> :nth-child(9)){--gal-cols:5}
  .gal:not([hidden]):has(> :nth-child(11)){--gal-cols:6}
  .gal:not([hidden]):has(> :nth-child(7)) .gal-item{width:auto;min-width:0}
  .gal:not([hidden]):has(> :nth-child(7)) .gal-item .marco{width:100%;height:auto;aspect-ratio:1}
}
/* === PULIDO · fin === */

/* === BARRA · botones al centro sin logo (22-10-2026) · inicio ===
   Axel: "los botones deben estar centrados mientras no aparece el logo; cuando aparece se mueven a la derecha". Con la
   hamburguesa (≤ 1200 px) la barra es el logo y, a la derecha, ES · EN, la lupa y el menú. Mientras el logo chico está
   escondido (en el inicio, sobre el logo del hero: `limpia`; al llegar al pie: `al-pie`) los círculos van al centro, y
   al aparecer el logo se corren a la derecha. left:-50% (media barra) + translateX(50%) (medio grupo) = al centro.
   Antes de que app.js mida (`barra-lista`), el inicio parte con los botones al centro y sin animar, para que no se
   los vea viajar al cargar. */
@media(max-width:1200px){
  .topbar .acciones{position:relative;left:0}
  .topbar.barra-lista .acciones{transition:left .32s ease,transform .32s ease}
  .topbar:is(.limpia,.al-pie):not(.mega-on):not(.abierto) .acciones,
  body.home .topbar:not(.barra-lista):not(.abierto) .acciones{left:-50%;transform:translateX(50%)}
}
@media(max-width:1200px) and (prefers-reduced-motion:reduce){ .topbar.barra-lista .acciones{transition:none} }
/* === BARRA · botones al centro · fin === */

/* === SIN FOTO (22-10-2026) · inicio ===
   Axel: "en el admin panel debo poder eliminar fotos, no solo cambiarlas". Una foto que el panel quitó queda con
   data-sin-foto (admin/bake.php): no se muestra, y si va en una <figure> (los carruseles, los hitos de la línea de
   tiempo) tampoco la figura; app.js la saca de la vuelta del carrusel. Con !important porque varias reglas del sitio
   le dan display a sus imágenes. */
img[data-sin-foto]{display:none!important}
figure:has(img[data-sin-foto]){display:none!important}
/* === SIN FOTO · fin === */

/* === COMPRAR · la pastilla y CATÁLOGO · la tarjeta (Lab 46, 29-10-2026) · inicio ===
   Axel, tras la reunión en Traverso: "Comprar online" pasa a "Comprar" y al pasar el mouse despliega dos botones,
   Compra online (la tienda del panel) y Compra mayorista (Contacto comercial). Elegida la variante 1 del lab, "la
   pastilla que se divide": del botón caen dos pastillas, una bajo la otra. Abierto, el botón queda con sus colores
   pero apagado ("que se vea desactivado"); las dos pastillas van blancas y al pasar solo se enciende una aureola
   blanca transparente (sin azul ni amarillo). El mega de Catálogo toma la tarjeta de la variante 3 ("todo
   queda en esa tarjeta"): flota bajo la barra con la punta hacia Catálogo (app.js mide dónde), baja con una caída
   corta y su contenido entra en cascada. Generadores del lab: 04-desarrollo-de-diseno/_gen/compra.py (compra-4). */
.compra{position:relative;display:inline-flex;flex:none}
.compra-abre{cursor:pointer;gap:8px}
.compra-fl{width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .3s}
.compra.abierta .compra-fl{transform:translateY(1px) rotate(-135deg)}
/* como el botón de antes: se esconde con la barra limpia del inicio y no va bajo 1201 px (va en el menú) */
.topbar .acciones > .compra{transition:opacity .32s ease,transform .32s ease,visibility .32s}
@media(min-width:1201px){
  .topbar.limpia:not(.mega-on):not(.abierto) .acciones > .compra{opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none}
}
@media(max-width:1200px){ .acciones .compra{display:none} }
/* en el menú del celular: los dos botones, uno bajo el otro */
.topbar.abierto .nav>li.compra-movil>a.btn-movil + a.btn-movil{margin-top:10px}
/* abierto: los colores de siempre, apagado (le gana al hover de la barra blanca y al de la foto del inicio) */
.compra-abre{transition:background .2s,border-color .2s,color .2s,opacity .25s}
.topbar .acciones .compra.abierta .compra-abre.btn,
.topbar .acciones .compra.abierta .compra-abre.btn:hover{background:transparent;border-color:var(--linea);color:var(--tinta2);opacity:.45}
body.home .topbar:not(.pegado):not(.abierto) .acciones .compra.abierta .compra-abre.btn,
body.home .topbar:not(.pegado):not(.abierto) .acciones .compra.abierta .compra-abre.btn:hover{background:transparent;border-color:rgba(255,255,255,.6);color:#fff}
/* las dos pastillas: salen del botón hacia abajo con un rebote (la de mayorista, un instante después) */
.compra-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:2;display:flex;flex-direction:column;align-items:flex-end;gap:8px;
  visibility:hidden;pointer-events:none;transition:visibility 0s linear .4s}
.compra.abierta .compra-menu{visibility:visible;pointer-events:auto;transition:visibility 0s}
.compra-menu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:12px}   /* puente para el mouse */
.compra-op{--viaje:calc(-100% - 8px);display:flex;align-items:center;justify-content:center;gap:6px;min-width:var(--ancho-boton,118px);
  padding:11px 20px;border-radius:40px;border:1.5px solid var(--azul);color:var(--azul);white-space:nowrap;text-decoration:none;
  background:rgba(255,255,255,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);   /* el mismo blanco de la barra (Axel: "el blanco puro destaca mucho") */
  font-family:var(--sans);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 8px 20px rgba(0,9,76,.2);
  opacity:0;transform:translateY(var(--viaje)) scale(.92);transition:opacity .18s,transform .3s,background .2s,color .2s}
.compra-op.op-mayor{--viaje:calc(-200% - 16px)}
.compra.abierta .compra-op{opacity:1;transform:none;
  transition:opacity .2s,transform .55s cubic-bezier(.3,1.45,.5,1),background .2s,color .2s,translate .22s,box-shadow .22s}
.compra.abierta .compra-op.op-mayor{transition-delay:.07s,.07s,0s,0s,0s,0s}
.compra-flecha{font-style:normal;display:inline-block;transition:transform .22s}
/* al pasar, solo la aureola: blanca y transparente (Axel, 29-10-2026: "ambos botones blancos y el hover… una aureola,
   quizás solo eso, de color blanco transparente"); la sombra crece un poco para que también se lea sobre blanco */
.compra-op:hover,.compra-op:focus-visible{box-shadow:0 0 0 5px rgba(255,255,255,.55),0 12px 26px rgba(0,9,76,.3)}
.op-online:hover .compra-flecha,.op-online:focus-visible .compra-flecha{transform:translate(2px,-2px)}
.op-mayor:hover .compra-flecha,.op-mayor:focus-visible .compra-flecha{transform:translateX(3px)}
.compra-op:active{box-shadow:0 0 0 3px rgba(255,255,255,.7),0 6px 14px rgba(0,9,76,.22)}
@media(prefers-reduced-motion:reduce){ .compra-menu,.compra-op,.compra-fl,.compra-flecha{transition:none!important} }
/* el mega de Catálogo en una tarjeta (escritorio; bajo 1201 px el catálogo va en el acordeón del menú) */
@media(min-width:1201px){
  /* más ancha y con más aire (Axel, 29-10-2026: "el catálogo en el menú está increíble… debe ser más ancho, no tan
     compacto"): casi a todo el ancho de la pantalla, hasta 1500 px */
  .mega{left:50%;right:auto;top:calc(100% + 12px);width:min(1500px,calc(100vw - 64px));border:0;border-radius:18px;
    box-shadow:0 28px 64px rgba(0,9,76,.24),0 0 0 1px rgba(0,14,120,.06);
    transform:translate(-50%,-10px) scale(.97);transform-origin:var(--punta,50%) 0;
    transition:opacity .2s,transform .34s cubic-bezier(.2,.8,.2,1),visibility 0s linear .34s}
  .topbar.mega-on .mega{transform:translate(-50%,0);transition:opacity .2s,transform .34s cubic-bezier(.2,.8,.2,1),visibility 0s}
  .mega::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}   /* puente para el mouse */
  .mega::after{content:"";position:absolute;top:-6px;left:var(--punta,50%);width:14px;height:14px;margin-left:-7px;
    background:#fff;border-radius:3px;transform:rotate(45deg)}   /* la punta, bajo Catálogo */
  .mega .mega-in{max-width:none;padding:8px 22px 8px 36px;border-radius:18px;overflow:hidden}
  .mega.mega-v3 .mega-in{grid-template-columns:.95fr 1.8fr 360px}
  .mega .v3-lista{padding:28px 34px 28px 0}
  .mega .v3-preview{padding:34px 48px;min-height:460px}
  .mega .v3-puertas.puertas-menu{padding:28px 8px 28px 34px;gap:12px}
  .nav>li.abre>a{border-radius:6px}
  /* la cascada */
  .mega :is(.v3-lista li,.v3-preview,.v3-puertas .puerta){opacity:0;transform:translateY(8px);transition:opacity .28s,transform .42s cubic-bezier(.2,.8,.2,1)}
  .topbar.mega-on .mega :is(.v3-lista li,.v3-preview,.v3-puertas .puerta){opacity:1;transform:none}
  .topbar.mega-on .mega .v3-lista li:nth-child(2){transition-delay:.025s}
  .topbar.mega-on .mega .v3-lista li:nth-child(3){transition-delay:.05s}
  .topbar.mega-on .mega .v3-lista li:nth-child(4){transition-delay:.075s}
  .topbar.mega-on .mega .v3-lista li:nth-child(5){transition-delay:.1s}
  .topbar.mega-on .mega .v3-lista li:nth-child(6){transition-delay:.125s}
  .topbar.mega-on .mega .v3-lista li:nth-child(7){transition-delay:.15s}
  .topbar.mega-on .mega .v3-lista li:nth-child(8){transition-delay:.175s}
  .topbar.mega-on .mega .v3-lista li:nth-child(n+9){transition-delay:.2s}
  .topbar.mega-on .mega .v3-preview{transition-delay:.08s}
  .topbar.mega-on .mega .v3-puertas .puerta:nth-child(1){transition-delay:.14s}
  .topbar.mega-on .mega .v3-puertas .puerta:nth-child(2){transition-delay:.2s}
}
@media(min-width:1201px) and (prefers-reduced-motion:reduce){
  .mega,.mega :is(.v3-lista li,.v3-preview,.v3-puertas .puerta){transition:none}
}
/* el círculo PT (29-10-2026): con tres idiomas, la lupa y el menú junto al logo, en el celular no cabía (a 360 px
   se pasaba 5 px; a 320 px, 62). El <nav> vacío también cuenta: hay dos espacios entre el logo y los círculos. */
@media(max-width:420px){
  .topbar-in{gap:10px}
  .topbar .acciones{gap:6px}
  .topbar .acciones .acc-ico,.topbar .idiomas .lang-op,.topbar .burger{width:38px;height:38px}
}
@media(max-width:365px){
  .topbar-in{gap:6px}
  .topbar .acciones{gap:4px}
  .topbar .acciones .acc-ico,.topbar .idiomas .lang-op,.topbar .burger{width:33px;height:33px}
  .topbar .logo img{height:36px;width:auto}
}
/* === COMPRAR · la pastilla y CATÁLOGO · la tarjeta · fin === */

/* === PIE · redes sin dirección (29-10-2026) ===
   Las redes del pie salen de Páginas › Todas las páginas › Redes sociales; mientras una no tiene dirección (el bake
   la deja en "#"), su ícono no se muestra, y si ninguna la tiene, tampoco la fila. Aparecen solas al cargarlas. */
.pie .redes a[href="#"]{display:none}
.pie .redes:not(:has(a:not([href="#"]))){display:none}