:root{
    /* Superficie oscura (default del sitio) */
    --bg:#121110;
    --bg-soft:#1b1916;
    --bg-line: rgba(255,255,255,.10);
    --text:#f2ead9;
    --text-soft: rgba(242,234,217,.66);

    /* Superficie clara (secciones que se separan del fondo) */
    --white:#ffffff;
    --ink:#15130f;
    --ink-soft:#55503f;
    --line-light: rgba(21,19,15,.12);

    /* Marca */
    --olive:#333f26;
    --olive-2:#4a5a35;
    --rust:#c2411c;
    --rust-2:#a3350f;
    --gold:#c99a3e;
    --teal:#1e4a49;
    --wa:#6fcf97;

    --maxw: 1280px;
    --pad: clamp(20px, 4vw, 64px);
    --hdr-pad: 20px;   /* respiro interno del header de cristal */
    /* Desplazamiento del logo hacia la derecha, como PROPORCIÓN de su ancho.
       En proporción y no en píxeles para que el corrimiento se vea igual en
       escritorio (caja de 96px) y en móvil (72px).
       0.10 = 10% a la derecha. Con esto el logo deja de estar exactamente
       sobre el margen del contenido: es una decisión estética de Gustavo,
       para separarlo del borde del cristal y darle más presencia. */
    --logo-nudge: 0.10;

    --glass-bg: rgba(255,255,255,.09);
    --glass-border: rgba(255,255,255,.16);
    --hdr-text:#f2ead9;
    --hdr-text-soft: rgba(242,234,217,.7);
  }

  *{ box-sizing:border-box; }
  /* [hidden] debe ganarle a cualquier display: sin esto, .team-panel-empty
     (display:flex) seguia visible aunque el JS le pusiera hidden=true. */
  [hidden]{ display:none !important; }
  html{
    scroll-behavior:smooth;
    /* el header es fixed: sin esto los anclajes quedan tapados */
    scroll-padding-top:140px;
  }
  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:'Archivo', system-ui, sans-serif;
    font-size:16px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  img,video{ max-width:100%; display:block; }
  a{ color:inherit; text-decoration:none; }
  button{ font-family:inherit; cursor:pointer; }
  .wrap{ max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
  h1,h2,h3{ font-family:'Fraunces', serif; font-weight:600; margin:0; letter-spacing:-0.01em; }
  :focus-visible{ outline:2px solid var(--rust); outline-offset:3px; }
  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; }
    /* el marquee con duration:0 saltaba a -50% y se cortaba: mejor detenerlo en 0 */
    .marquee{ animation:none !important; transform:none !important; }
  }

  [id]{ scroll-margin-top:140px; }

  /* ============ SITE HEADER — glass flotante ============ */
  /* ALINEACIÓN: el cristal se inseta MENOS que el contenido (--pad menos --hdr-pad) y por
     dentro respira --hdr-pad. La suma da exactamente --pad, así el logo cae sobre el mismo
     eje vertical que los títulos de la página, en cualquier ancho y en los dos estados. */
  .site-header{ position:fixed; top:0; left:0; right:0; z-index:100; padding:16px max(0px, calc(var(--pad) - var(--hdr-pad) - 1px)) 0; transition:padding .35s ease; }
  /* el -1px compensa el borde de 1px de .header-inner, que si no desplaza el logo */
  .site-header.is-scrolled{
    padding:0;
    /* Ahora la línea de contacto está fuera del cristal, así que el fondo oscuro
       lo tiene que poner el header entero para que ella también quede sobre negro. */
    background:rgba(18,17,16,.92);
    backdrop-filter:blur(16px) saturate(150%); -webkit-backdrop-filter:blur(16px) saturate(150%);
    box-shadow:0 1px 0 var(--bg-line);
  }
  .site-header.is-scrolled .topbar{ border-bottom:1px solid var(--bg-line); }

  .header-inner{
    /* +2px = los dos bordes de 1px del propio cristal; sin ellos el centrado
       deja el logo 1px corrido respecto del contenido */
    max-width:calc(var(--maxw) - (2 * var(--pad)) + (2 * var(--hdr-pad)) + 2px);
    margin:0 auto; border-radius:18px;
    background:var(--glass-bg); border:1px solid var(--glass-border);
    backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
    box-shadow:0 24px 48px -24px rgba(0,0,0,.6);
    overflow:hidden;
    transition:border-radius .35s ease, background .35s ease, box-shadow .35s ease;
  }
  /* Al hacer scroll el cristal ocupa todo el ancho, así que el contenedor interno pasa a
     comportarse como .wrap para no perder la alineación con el contenido. */
  .is-scrolled .nav{
    max-width:var(--maxw); margin:0 auto;
    padding-left:var(--pad); padding-right:var(--pad);
  }
  .is-scrolled .header-inner{
    /* El cristal desaparece: el fondo oscuro ya lo pone .site-header */
    max-width:none; border-radius:0; border:0;
    background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none;
    box-shadow:none;
  }

  /* Línea de contacto: ya no vive dentro del cristal, va suelta encima.
     Sin fondo ni borde propios: el texto se apoya directamente sobre el hero,
     con sombra para que se lea sobre las zonas claras del video. */
  .topbar{ font-size:12.5px; }
  .topbar .wrap{
    display:flex; align-items:center; justify-content:space-between; gap:24px;
    height:34px; max-width:var(--maxw);
    padding-left:var(--pad); padding-right:var(--pad);
  }
  .topbar-left, .topbar-right{ text-shadow:0 1px 3px rgba(0,0,0,.55); }
  .is-scrolled .topbar-left, .is-scrolled .topbar-right{ text-shadow:none; }
  .topbar-left{ display:flex; align-items:center; gap:20px; color:var(--hdr-text-soft); }
  .topbar-left span{ display:flex; align-items:center; gap:7px; white-space:nowrap; }
  .topbar-left svg{ width:13px; height:13px; flex:none; opacity:.85; }
  .topbar-right{ display:flex; align-items:center; gap:16px; }
  .topbar-right a{ display:flex; align-items:center; gap:6px; color:var(--hdr-text-soft); transition:color .15s; }
  .topbar-right a:hover{ color:var(--hdr-text); }
  .topbar-right svg{ width:13px; height:13px; }
  @media (max-width: 780px){ .topbar-left span:nth-child(2){ display:none; } }
  /* En móvil el correo y el WhatsApp de la topbar quedaban cortados por el
     ancho de pantalla: se leían a medias y no se podían tocar. Se retiran de
     aquí y pasan al menú hamburguesa, donde hay sitio para leerlos enteros. */
  @media (max-width: 700px){
    .topbar-right{ display:none; }
    .topbar .wrap{ justify-content:flex-start; }
  }
  @media (max-width: 560px){
    .topbar .wrap{ font-size:11.5px; gap:12px; }
    .topbar-left{ gap:12px; }
  }

  /* El cristal del header no debe tocar el borde de la pantalla.
     --hdr-pad baja a 10px para que el inset exterior (--pad menos --hdr-pad
     menos 1) deje 11px de aire, y el logo siga cayendo sobre el margen del
     contenido: 11 + 1 de borde + 10 de respiro = 22 = --pad. */
  @media (max-width: 600px){
    :root{ --pad: 22px; --hdr-pad: 10px; }
  }

  /* gap:0 a propósito: el hueco entre el logo y los enlaces lo controla
     .nav-links con su margin-left. Con un gap aquí se sumaban los dos y el
     logo quedaba a 61px de "Inicio" mientras los enlaces estaban a 28. */
  .nav{ display:flex; align-items:center; justify-content:space-between; height:84px; gap:0; padding-left:var(--hdr-pad); padding-right:var(--hdr-pad); max-width:none; }
  .logo{ display:flex; align-items:center; gap:10px; flex:none; }
  /* max-width:none anula la regla global img{max-width:100%}, que con el
     margen negativo encogía el logo a 91px en vez de 96 y descuadraba el
     cálculo de la equidistancia. */
  .logo-mark{ display:block; width:32px; height:32px; flex:none; object-fit:contain; max-width:none; }
  /* El SVG del logo es una caja cuadrada de 180x180 con aire transparente:
     5,5% a cada lado y 25,25% arriba y abajo. Es decir, el trazo ocupa el 89%
     del ancho y solo el 49,5% del alto de su caja.
     Por eso: (a) la caja tiene que ser bastante mayor que el tamaño aparente
     que buscamos, y (b) hace falta un margin-left negativo del 5,5% para que
     el TRAZO quede sobre el margen de la web, no la caja invisible. */
  .logo-mark--full{ width:96px; height:96px; margin-left:calc(96px * (var(--logo-nudge) - 0.055)); }
  .logo-word{ font-family:'Fraunces', serif; font-weight:700; font-size:21px; letter-spacing:.01em; line-height:1; color:var(--hdr-text); }
  .logo-word small{ display:block; font-family:'Archivo', sans-serif; font-weight:600; font-size:9px; letter-spacing:.14em; color:var(--hdr-text-soft); margin-top:3px; }

  /* Nav justificada a la izquierda, junto al logo (antes iba centrada) */
  /* Equidistancia real: la separación visible entre dos enlaces es
     gap + 2*padding-lateral = 2 + 2*13 = 28px. Para que el hueco entre el
     TRAZO del logo y "Inicio" mida lo mismo, el margen izquierdo descuenta
     el padding del enlace y el 5,5% de aire del borde derecho del SVG:
     28 - 13 - (96*0.055) = 9,7px. */
  .nav-links{
    display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0;
    flex:1; justify-content:flex-start;
    margin-left:calc(28px - 13px - (96px * 0.055));
  }
  .nav-links > li{ position:relative; }
  .nav-links > li > a{
    display:flex; align-items:center; gap:5px; padding:9px 13px; font-size:14px; font-weight:600;
    color:var(--hdr-text); border:none; background:none; border-radius:99px; transition:background .15s;
  }
  .nav-links > li > a:hover{ background:rgba(255,255,255,.10); }

  .nav-actions{ display:flex; align-items:center; gap:10px; flex:none; margin-left:28px; }
  .btn{ display:inline-flex; align-items:center; gap:9px; padding:10px 19px; font-size:13.5px; font-weight:700; border-radius:99px; border:1px solid transparent; transition:transform .15s, background .15s; white-space:nowrap; }
  .btn:active{ transform:translateY(1px); }
  .btn-primary{ background:var(--rust); color:#fff; }
  .btn-primary:hover{ background:var(--rust-2); }
  .btn-ghost{ border-color:var(--hdr-text-soft); color:var(--hdr-text); }
  .btn-ghost:hover{ background:rgba(255,255,255,.10); }
  .btn svg{ width:15px; height:15px; }
  /* variante para usarse sobre secciones blancas */
  .section-light .btn-ghost{ border-color:var(--ink); color:var(--ink); }
  .section-light .btn-ghost:hover{ background:var(--ink); color:var(--white); }

  .icon-btn{ display:none; width:38px; height:38px; align-items:center; justify-content:center; border:1px solid var(--hdr-text-soft); border-radius:99px; background:transparent; color:var(--hdr-text); flex:none; }
  .icon-btn svg{ width:17px; height:17px; }

  @media (max-width: 1020px){
    .nav-links{ display:none; }
    .icon-btn{ display:inline-flex; }
    .nav-actions .btn-ghost{ display:none; }
  }
  @media (max-width: 480px){
    .nav{ height:72px; }
    .logo-mark--full{ width:72px; height:72px; margin-left:calc(72px * (var(--logo-nudge) - 0.055)); }
    .logo-word{ font-size:18px; }
    /* Solo el botón del header se reduce a ícono. Antes el selector era
       global y dejaba sin texto "Explorar catálogo", "Cotizar" y "Enviar". */
    .nav-actions .btn-primary span{ display:none; }
    .nav-actions .btn-primary{ padding:10px 13px; }
  }

  /* ============ MOBILE DRAWER ============ */
  .drawer{ position:fixed; inset:0; z-index:200; display:none; }
  .drawer.open{ display:block; }
  .drawer-scrim{ position:absolute; inset:0; background:rgba(0,0,0,.6); }
  .drawer-panel{ position:absolute; top:0; right:0; bottom:0; width:min(360px, 86vw); background:var(--bg-soft); padding:22px; overflow-y:auto; box-shadow:-20px 0 40px rgba(0,0,0,.4); }
  .drawer-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
  .drawer-head .icon-btn{ color:var(--text); border-color:var(--bg-line); }
  .drawer-title{
    font-family:'Archivo', sans-serif; font-size:11px; font-weight:800;
    letter-spacing:.12em; text-transform:uppercase; color:var(--text-soft);
  }
  .drawer-nav a{
    display:block; padding:14px 4px; font-size:17px; font-weight:600;
    font-family:'Fraunces', serif; border-bottom:1px solid var(--bg-line); color:var(--text);
  }

  /* Bloque de contacto del menú móvil */
  .drawer-contact{ margin-top:26px; }
  .drawer-contact-label{
    display:block; font-family:'Archivo', sans-serif; font-size:11px; font-weight:800;
    letter-spacing:.09em; text-transform:uppercase; color:var(--gold); margin-bottom:12px;
  }
  .drawer-contact-item{
    display:flex; align-items:center; gap:13px;
    padding:13px 14px; margin-bottom:9px;
    background:var(--bg); border:1px solid var(--bg-line); border-radius:12px;
    color:var(--text); transition:border-color .15s;
  }
  .drawer-contact-item:hover, .drawer-contact-item:focus-visible{ border-color:var(--gold); }
  .drawer-contact-item svg{ width:19px; height:19px; flex:none; color:var(--gold); }
  .drawer-contact-item span{ display:flex; flex-direction:column; min-width:0; }
  .drawer-contact-item b{ font-family:'Archivo', sans-serif; font-size:14px; font-weight:700; }
  .drawer-contact-item small{ font-size:11.5px; color:var(--text-soft); margin-top:2px; }

  .drawer-panel .btn{ margin-top:22px; width:100%; justify-content:center; }

  /* ============ HERO — video full-bleed, funde hacia el fondo ============ */
  .hero{
    position:relative; height:100vh; height:100svh; min-height:600px; max-height:980px; overflow:hidden;
    /* Imagen de 279 bytes incrustada: se pinta al instante, antes de que llegue
       el poster (80 KB) y mucho antes del video. Evita el parpadeo en negro. */
    background:var(--bg) url("data:image/jpeg;base64,/9j//gARTGF2YzU4LjEzNC4xMDAA/9sAQwAIGBgcGBwhISEhISEnJCcoKCgnJycnKCgoKysrMzMzKysrKCgrKzAwMzM3OTc0NDM0OTk8PDxISEVFVFRXZ2d8/8QAXQAAAwEAAAAAAAAAAAAAAAAAAwQGBQEBAQEAAAAAAAAAAAAAAAAABAIDEAACAwADAQEBAAAAAAAAAAAAAQMRAhIxIWIEQREBAQEBAQAAAAAAAAAAAAAAAQACEhH/wAARCAASACADASIAAhEAAxEA/9oADAMBAAIRAxEAPwCra496RkbkznVcvSRmkel2Jxy6y/aYN6JR419yT/qCJWT2f0fKEtTO7snLpq0BTzFhhi4yLECgQpmVt//Z") center/cover no-repeat;
  }
  .hero video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }

  /* ---- HERO EN MÓVIL --------------------------------------------------
     La pantalla de un teléfono es mucho más alta que un video 16:9.
     Recortando a "cover" solo se veía el 26% del ancho: se perdían la proa
     y el logo del barco. Así que el video se muestra entero, como una
     franja, y sus bordes se DISUELVEN EN EL NEGRO DEL SITIO.

     Por qué el negro y no un fondo desenfocado: el desenfoque es la firma
     de la cabecera de cristal. Repetirlo aquí lo abarataría y haría que el
     hero pareciera resuelto con un truco. El fundido a negro, en cambio, es
     el mismo recurso que el degradado del hero ya usa por abajo en
     escritorio: se aplica también arriba y no se inventa nada nuevo.
     Además un desenfoque a pantalla completa es de lo más caro que se le
     puede pedir a la GPU de un teléfono.
     -------------------------------------------------------------------- */
  @media (max-width: 700px){
    /* --hero-aire = distancia desde el borde superior de la pantalla hasta el
       borde de la franja de video. Tiene que ser MAYOR que el alto de la
       cabecera, o el cristal se monta sobre el mástil y la bandera del barco.
       Cabecera = 16px de aire + 34px de topbar + alto de la nav.
       Con nav de 84px son 134px; le damos ~42px de respiro. */
    :root{ --hero-aire: 186px; }
    /* El alto no puede ser una fracción fija de la pantalla: la franja mide
       ancho x 9/16 x 1.10 (= 62vw) y en una tableta de 700px eso son 433px,
       que no caben en 62svh. Se toma el mayor de los dos: la proporción
       agradable, o lo que la franja necesita mas su aire arriba y abajo. */
    .hero{ height:max(62svh, calc(var(--hero-aire) + 62vw + 104px)); min-height:0; max-height:none; }

    /* EL ELEMENTO ES LA FRANJA, NO EL HERO.
       Con object-fit:contain sobre un elemento de alto completo, el video
       quedaba centrado dentro de una caja mucho mayor y su borde inferior
       era un canto recto. Con width:100% y height:auto el propio <video>
       mide exactamente lo que mide la imagen (ancho x 9/16), así que la
       máscara cae justo sobre sus bordes reales.

       El desvanecido es asimétrico a propósito: 15% arriba, donde solo hay
       cielo, y 24% abajo, donde el agua tiene que entregarse al negro del
       que sale el resto de la página. El barco no se toca en ninguno de los
       dos extremos.

       scale(1.10) = el 10% de aumento pedido. Desborda un 5% por lado, que
       el overflow del hero recorta. Medido sobre el fotograma: el casco deja
       un 13% de margen del lado de la proa, así que ese 5% no la corta. */
    .hero video{
      position:absolute; top:var(--hero-aire); left:50%;
      width:100%; height:auto; max-width:none;
      object-fit:fill; z-index:2;
      transform:translateX(-50%) scale(1.10);
      -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 15%, #000 76%, transparent 100%);
              mask-image:linear-gradient(to bottom, transparent 0%, #000 15%, #000 76%, transparent 100%);
    }

    /* El degradado ya no tiene que tapar ningún canto: la máscara lo hace.
       Aquí solo queda oscurecer lo justo para que la cabecera se lea y para
       cerrar contra la sección siguiente. */
    .hero-scrim{
      background:linear-gradient(180deg,
        rgba(18,17,16,.55) 0%,
        rgba(18,17,16,.10) 24%,
        rgba(18,17,16,.10) 62%,
        rgba(18,17,16,.85) 92%,
        rgba(18,17,16,1) 100%
      );
    }
  }
  /* Con la nav de 72px la cabecera mide 122px: se recorta el aire en la misma
     proporción para que la franja no se aleje de más en pantallas pequeñas. */
  @media (max-width: 480px){
    :root{ --hero-aire: 164px; }
  }
  .hero-scrim{
    position:absolute; inset:0; z-index:2; pointer-events:none;
    background:linear-gradient(180deg,
      rgba(18,17,16,.55) 0%,
      rgba(18,17,16,.05) 30%,
      rgba(18,17,16,.15) 62%,
      rgba(18,17,16,.85) 88%,
      rgba(18,17,16,1) 100%
    );
  }
  .scroll-cue{
    position:absolute; left:50%; bottom:38px; transform:translateX(-50%); z-index:4;
    display:flex; flex-direction:column; align-items:center; gap:8px;
    color:var(--text-soft); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
    animation:cueBob 2.4s ease-in-out infinite;
  }
  .scroll-cue svg{ width:16px; height:16px; }
  @keyframes cueBob{ 0%,100%{ transform:translateX(-50%) translateY(0); } 50%{ transform:translateX(-50%) translateY(7px); } }
  /* ============ INTRO — mensaje principal ============ */
  .intro{ padding:clamp(51px,6.4vw,88px) 0 clamp(20px,3vw,32px); } /* v25: −20 % respecto a la v24 */
  .intro-copy{ max-width:760px; }
  .eyebrow{
    display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:700; color:var(--gold);
    background:rgba(201,154,62,.12); border:1px solid rgba(201,154,62,.24);
    padding:7px 13px 7px 10px; border-radius:99px; margin-bottom:22px;
  }
  .eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--rust); flex:none; }
  .intro h1{ font-size:clamp(2.3rem, 4.2vw, 3.6rem); line-height:1.06; color:var(--text); }
  .intro h1 em{ font-style:normal; color:var(--gold); }
  .intro p.lead{ margin:20px 0 0; max-width:56ch; font-size:17.5px; line-height:1.6; color:var(--text-soft); }
  .hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
  .intro .btn{ padding:13px 24px; font-size:14.5px; }

  /* ============ ABOUT + STATS ============ */
  .about{ padding:clamp(28px,4vw,40px) 0 clamp(60px,7vw,88px); }
  .about-copy{ max-width:680px; margin-bottom:clamp(36px,4.5vw,52px); }
  .about-copy .eyebrow{ margin-bottom:18px; }
  .about h2{ font-size:clamp(1.5rem, 2.4vw, 2rem); line-height:1.24; color:var(--text); font-weight:500; }
  .about p{ margin:16px 0 0; max-width:62ch; font-size:16px; line-height:1.7; color:var(--text-soft); }

  .stats-row{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
    background:var(--bg-line); border:1px solid var(--bg-line); border-radius:14px; overflow:hidden;
  }
  .stat-block{
    background:var(--bg-soft); padding:clamp(26px,3vw,36px) clamp(20px,2.6vw,32px);
    display:flex; flex-direction:column; gap:8px;
  }
  .stat-block b{ font-family:'Fraunces', serif; font-weight:600; color:var(--gold); font-size:clamp(2rem,3vw,2.6rem); line-height:1; }
  .stat-block span{ font-size:13.5px; color:var(--text-soft); }
  @media (max-width: 720px){ .stats-row{ grid-template-columns:1fr; } }

  /* ============ BRAND LOOP — sección clara, quiebra el negro ============ */
  .brandstrip{ background:var(--white); padding:clamp(28px,4vw,44px) 0; overflow:hidden; }
  /* El título de la sección vive fuera de la franja: la franja es solo para logos */
  .brands-block{ padding-bottom:clamp(28px,3.5vw,40px); }
  .brands-block .block-head{ margin-bottom:0; }
  /* Fundido en los bordes: los logos entran y salen, no se cortan en seco */
  .marquee-viewport{
    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);
  }
  .marquee{ display:flex; width:max-content; animation:scroll 55s linear infinite; will-change:transform; }
  .brandstrip:hover .marquee{ animation-play-state:paused; }
  @keyframes scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
  /* Cada logo vive en una celda 2:1 idéntica; el aire entre marcas ya viene dentro del SVG */
  .brand-logo{ flex:none; height:clamp(84px,7.6vw,108px); aspect-ratio:2/1; margin-inline:clamp(-6px,-1.2vw,-18px); }
  .brand-logo img{ display:block; width:100%; height:100%; }
  @media (max-width:560px){ .marquee{ animation-duration:40s; } }
  @media (prefers-reduced-motion: reduce){
    .marquee-viewport{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
    .marquee [aria-hidden="true"]{ display:none; }
  }

  /* ============ FOOTER — minimalista ============ */
  .site-footer{ background:var(--bg-soft); border-top:1px solid var(--bg-line); padding-top:clamp(48px,6vw,72px); }

  /* Bloque superior del footer: marca a la izquierda, formulario a la derecha */
  .footer-cta{
    display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(32px,5vw,64px);
    padding-bottom:clamp(40px,5vw,56px); margin-bottom:clamp(36px,4.5vw,48px);
    border-bottom:1px solid var(--bg-line);
  }
  @media (max-width:820px){ .footer-cta{ grid-template-columns:1fr; } }
  .footer-hours{ font-size:13.5px; color:var(--text-soft); margin:14px 0 0; }

  .footer-form h3{ font-family:'Fraunces', serif; font-size:clamp(1.25rem,2vw,1.6rem); font-weight:600; color:var(--text); margin:0; }
  .footer-form-lead{ font-size:14px; color:var(--text-soft); margin:8px 0 20px; max-width:44ch; line-height:1.6; }

  .contact-form{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .contact-form .field{ display:flex; flex-direction:column; gap:6px; }
  /* Por CLASE, no por posición: con nth-child bastaba agregar o quitar un
     input oculto para que Asunto y Mensaje dejaran de ocupar el ancho completo. */
  .contact-form .field--full,
  .contact-form .form-foot{ grid-column:1 / -1; }
  @media (max-width:520px){ .contact-form{ grid-template-columns:1fr; } }

  .contact-form label{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--text-soft); }
  .contact-form input, .contact-form textarea{
    font-family:'Archivo', sans-serif; font-size:14.5px; color:var(--text);
    background:var(--bg); border:1px solid var(--bg-line); border-radius:12px;
    padding:12px 14px; width:100%; transition:border-color .15s;
  }
  .contact-form textarea{ resize:vertical; min-height:96px; }
  .contact-form input:focus, .contact-form textarea:focus{ outline:none; border-color:var(--gold); }
  .contact-form input:user-invalid, .contact-form textarea:user-invalid{ border-color:var(--rust); }
  /* Trampa antibots: fuera de pantalla, nunca la ve ni la tabula una persona */
  .contact-form .hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

  .form-foot{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:4px; }
  .contact-form .btn{ padding:13px 30px; }
  .contact-form button[disabled]{ opacity:.55; cursor:progress; }
  .form-status{ font-size:13.5px; margin:0; color:var(--text-soft); }
  .form-status.ok{ color:var(--wa); }
  .form-status.err{ color:#e8734f; }

  .footer-grid{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:clamp(28px,4vw,48px);
    padding-bottom:clamp(36px,5vw,52px);
    border-bottom:1px solid var(--bg-line);
  }
  .footer-brand .logo{ margin-bottom:18px; }
  .footer-brand .logo-mark{ width:76px; height:76px; margin-left:calc(76px * -0.055); }
  .footer-tagline{ font-size:14px; line-height:1.65; color:var(--text-soft); max-width:32ch; margin:0; }

  .footer-col h4{
    font-family:'Archivo', sans-serif; font-size:11px; font-weight:800;
    letter-spacing:.09em; text-transform:uppercase; color:var(--gold); margin:0 0 16px;
  }
  .footer-col a, .footer-col p{
    display:block; font-size:14px; line-height:1.5; color:var(--text-soft);
    margin:0 0 11px; transition:color .15s;
  }
  .footer-col a:hover{ color:var(--text); }

  @media (max-width: 900px){
    .footer-grid{ grid-template-columns:1fr 1fr; }
    .footer-brand{ grid-column:1 / -1; }
  }
  @media (max-width: 540px){
    .footer-grid{ grid-template-columns:1fr; }
  }

  /* Mapa de cobertura real — Venezuela por región, con pines interactivos */
  /* ============ COBERTURA COMERCIAL — sección propia ============ */
  .coverage{ padding:clamp(56px,7vw,88px) 0; }
  .coverage .eyebrow{ margin-bottom:18px; }
  .coverage h2{ font-size:clamp(1.6rem,2.6vw,2.2rem); line-height:1.2; color:var(--text); font-weight:500; max-width:26ch; }
  .coverage .lead{ margin:14px 0 0; max-width:56ch; font-size:15.5px; color:var(--text-soft); line-height:1.6; }

  /* Escritorio: mapa y panel lado a lado (se consulta sin hacer scroll).
     Tablet y móvil: panel debajo del mapa. */
  .coverage-grid{ display:grid; gap:20px; margin-top:clamp(28px,3.5vw,40px); align-items:start; }
  @media (min-width:1024px){ .coverage-grid{ grid-template-columns:minmax(0,1.5fr) minmax(320px,1fr); } }

  .map-card{
    position:relative;
    border-radius:18px; overflow:hidden; border:1px solid var(--bg-line);
    background:
      radial-gradient(120% 100% at 26% 0%, rgba(51,63,38,.34), transparent 62%),
      var(--bg);
    padding:clamp(14px,1.6vw,20px);
  }
  /* Proporción idéntica al viewBox (500 x 428): el SVG nunca hace letterbox,
     así el % de cada punto cae siempre sobre su estado, en cualquier ancho. */
  .map-inner{ position:relative; aspect-ratio:500/428; }
  .map-inner svg{ position:absolute; inset:0; z-index:1; width:100%; height:100%; display:block; }

  /* Estados con equipo: teñidos con el color de su zona. Sin equipo: neutros. */
  #cobertura path[data-zone]{
    fill:color-mix(in srgb, var(--zc) 30%, #3a3527);
    cursor:pointer; transition:fill .2s ease;
  }
  #cobertura path[data-zone].is-hover{ fill:color-mix(in srgb, var(--zc) 55%, #3a3527); }
  #cobertura.has-zone path[data-zone]:not(.is-active){ fill:color-mix(in srgb, var(--zc) 16%, #3a3527); }
  #cobertura path[data-zone].is-active{ fill:color-mix(in srgb, var(--zc) 78%, #3a3527); }

  .map-grid{
    position:absolute; inset:0; z-index:0; pointer-events:none;
    background-image:
      linear-gradient(rgba(242,234,217,.09) 1px, transparent 1px),
      linear-gradient(90deg, rgba(242,234,217,.09) 1px, transparent 1px);
    background-size: 28px 28px;
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 25%, transparent 85%);
            mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 25%, transparent 85%);
  }
  .map-badge{
    position:absolute; top:14px; left:14px; z-index:6;
    display:inline-flex; align-items:center; gap:7px;
    background:var(--glass-bg); border:1px solid var(--glass-border);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    color:var(--text); font-size:11px; font-weight:700; letter-spacing:.03em;
    padding:7px 13px; border-radius:99px;
  }
  @media (max-width:640px){
    .map-badge{ position:static; margin:2px 0 12px; }
  }

  /* Punto: área táctil de 44 px aunque el punto visible sea pequeño */
  .zone-pin{
    position:absolute; transform:translate(-50%,-50%);
    width:44px; height:44px; display:flex; align-items:center; justify-content:center;
    background:none; border:none; padding:0; border-radius:50%;
    cursor:pointer; z-index:2; animation:pinDrop .45s ease both; animation-delay:var(--delay);
  }
  .pin-pulse{
    position:absolute; left:50%; top:50%; width:20px; height:20px; transform:translate(-50%,-50%) scale(.6);
    border-radius:50%; background:var(--pin-color); opacity:0; pointer-events:none;
  }
  .zone-pin:hover .pin-pulse, .zone-pin:focus-visible .pin-pulse, .zone-pin.is-active .pin-pulse, .zone-pin.is-hover .pin-pulse{
    animation:pinPulse 1.4s ease-out infinite;
  }
  .pin-dot{
    position:relative; display:block; width:13px; height:13px; border-radius:50%;
    background:var(--pin-color); border:1.5px solid rgba(18,17,16,.7);
    box-shadow:0 0 0 1px rgba(255,255,255,.25), 0 2px 6px -1px rgba(0,0,0,.7);
    transition:transform .18s ease;
  }
  .zone-pin:hover .pin-dot, .zone-pin:focus-visible .pin-dot, .zone-pin.is-active .pin-dot, .zone-pin.is-hover .pin-dot{
    transform:scale(1.4);
    box-shadow:0 0 0 1px rgba(255,255,255,.4), 0 0 14px 3px var(--pin-color);
  }
  .pin-state-label{
    position:absolute; left:50%; bottom:calc(100% - 8px); transform:translateX(-50%);
    white-space:nowrap; font-family:'Archivo', sans-serif; font-size:10.5px; font-weight:700;
    letter-spacing:.03em; color:var(--gold); opacity:0;
    background:rgba(18,17,16,.86); padding:3px 8px; border-radius:5px;
    transition:opacity .15s ease; pointer-events:none; z-index:10;
  }
  .zone-pin:hover .pin-state-label, .zone-pin:focus-visible .pin-state-label, .zone-pin.is-active .pin-state-label, .zone-pin.is-hover .pin-state-label{ opacity:1; }
  .pin-state-label--below{ top:calc(100% - 8px); bottom:auto; }
  .zone-pin.is-active, .zone-pin.is-hover{ z-index:4; }
  @keyframes pinDrop{ from{ opacity:0; transform:translate(-50%,-70%); } to{ opacity:1; transform:translate(-50%,-50%); } }
  @keyframes pinPulse{
    0%{ transform:translate(-50%,-50%) scale(.6); opacity:.6; }
    100%{ transform:translate(-50%,-50%) scale(2.8); opacity:0; }
  }

  /* Panel de equipo */
  .team-panel{
    padding:20px; background:var(--bg-soft); border:1px solid var(--bg-line); border-radius:14px;
  }
  @media (min-width:1024px){
    .team-panel{ position:sticky; top:150px; }
    /* Solo en escritorio el listado tiene scroll propio: en móvil se usa el de la página */
    .team-panel-list{ max-height:520px; overflow-y:auto; padding-right:4px; }
  }
  .team-panel-hint{ margin:0 0 12px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-soft); }
  .zone-chips{ display:flex; flex-wrap:wrap; gap:8px; }
  .zone-chip{
    display:inline-flex; align-items:center; gap:8px; min-height:40px;
    padding:0 12px 0 11px; border-radius:99px;
    background:var(--bg); border:1px solid var(--bg-line); color:var(--text);
    font-family:'Archivo', sans-serif; font-size:13px; font-weight:600;
    transition:border-color .15s, background .15s;
  }
  .zone-chip small{ font-size:11px; font-weight:700; color:var(--text-soft); }
  .zone-chip-dot{ width:8px; height:8px; border-radius:50%; background:var(--pin-color); flex:none; }
  .zone-chip:hover, .zone-chip:focus-visible, .zone-chip.is-active{ border-color:var(--pin-color); background:color-mix(in srgb, var(--pin-color) 12%, var(--bg)); outline:none; }
  .key-account{ margin-top:18px; padding-top:16px; border-top:1px solid var(--bg-line); }
  .key-account-label{ display:block; margin-bottom:10px; font-size:12px; color:var(--text-soft); }

  .team-panel-head{
    display:flex; align-items:center; gap:12px;
    margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--bg-line);
  }
  .team-back{
    width:36px; height:36px; flex:none; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--bg); border:1px solid var(--bg-line); color:var(--text);
  }
  .team-back svg{ width:16px; height:16px; }
  .team-back:hover{ border-color:var(--zone-color, var(--gold)); }
  .team-panel-titles{ flex:1; min-width:0; }
  .team-panel-head h3{ font-family:'Fraunces', serif; font-size:18px; font-weight:600; color:var(--text); margin:0; }
  .team-panel-titles span{ display:block; margin-top:2px; font-size:12px; color:var(--text-soft); }
  .team-panel-count{ font-size:12px; color:var(--text-soft); white-space:nowrap; }
  .team-panel-list{
    display:grid; grid-template-columns:1fr; gap:10px;
    scrollbar-width:thin; scrollbar-color:var(--bg-line) transparent;
  }
  .team-panel-list::-webkit-scrollbar{ width:6px; }
  .team-panel-list::-webkit-scrollbar-thumb{ background:var(--bg-line); border-radius:99px; }
  @media (min-width:640px) and (max-width:1023px){ .team-panel-list{ grid-template-columns:repeat(2,1fr); } }

  /* Ficha: TODA es clicable -> abre WhatsApp */
  .rep-card{
    display:flex; align-items:center; gap:12px; width:100%;
    background:var(--bg); border:1px solid var(--bg-line); border-radius:12px;
    padding:10px 12px; cursor:pointer; text-align:left;
    font-family:'Archivo', sans-serif;
    transition:border-color .15s, background .15s;
  }
  .rep-card:hover, .rep-card:focus-visible{ border-color:color-mix(in srgb, var(--wa) 45%, transparent); background:color-mix(in srgb, var(--wa) 6%, transparent); outline:none; }
  .rep-card-avatar{
    width:48px; height:48px; border-radius:50%; flex:none; object-fit:cover;
    background:var(--bg-soft); border:1px solid var(--bg-line);
  }
  .rep-card-info{ flex:1; min-width:0; display:flex; flex-direction:column; }
  .rep-card-info b{ font-size:14px; color:var(--text); font-weight:700; }
  .rep-card-info span{ font-size:12px; color:var(--text-soft); margin-top:2px; line-height:1.35; }
  .rep-card-cta{
    display:flex; align-items:center; justify-content:center; flex:none;
    width:34px; height:34px; border-radius:50%;
    background:color-mix(in srgb, var(--wa) 14%, transparent); border:1px solid color-mix(in srgb, var(--wa) 35%, transparent); color:var(--wa);
  }
  .rep-card-cta svg{ width:15px; height:15px; }



  .footer-bottom{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;
    padding:22px 0; font-size:12.5px; color:var(--text-soft);
  }
  .footer-legal{ display:flex; gap:20px; }
  .footer-legal a:hover{ color:var(--text); }

/* ============ PÁGINA CATÁLOGO ============ */
.cat-hero{
  position:relative; overflow:hidden;
  padding:clamp(150px,16vw,200px) 0 clamp(56px,7vw,88px);
  background:var(--bg);
}
/* Fondo animado del catálogo: manchas de color de marca que derivan muy lento.
   No es video — pesa 0 KB, no se puede trabar ni desincronizar, y no compite
   con las fotos de producto que van a entrar en las tarjetas.
   inset negativo: el blur y el scale nunca deben dejar ver un borde. */
.cat-hero-anim{
  position:absolute; inset:-25%; z-index:1; pointer-events:none;
  background:
    radial-gradient(38% 55% at 22% 38%, rgba(51,63,38,.80),  transparent 70%),
    radial-gradient(32% 48% at 72% 30%, rgba(194,65,28,.42), transparent 70%),
    radial-gradient(30% 45% at 55% 72%, rgba(201,154,62,.30), transparent 70%),
    radial-gradient(34% 50% at 88% 66%, rgba(30,74,73,.50),  transparent 70%);
  filter:blur(30px);
  animation:catDrift 42s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes catDrift{
  0%   { transform:translate3d(-3%,-2%,0) scale(1.05); }
  50%  { transform:translate3d( 2%, 3%,0) scale(1.12); }
  100% { transform:translate3d( 4%,-3%,0) scale(1.06); }
}
/* Mismo degradado que el home: arranca oscuro arriba (para que el header se lea),
   se abre en el medio y cierra en negro puro abajo, para fundirse con la sección
   siguiente sin ninguna costura visible. */
.cat-hero-scrim{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(18,17,16,.86) 0%,
    rgba(18,17,16,.62) 26%,
    rgba(18,17,16,.60) 58%,
    rgba(18,17,16,.92) 88%,
    rgba(18,17,16,1) 100%
  );
}
.cat-hero-copy{ position:relative; z-index:3; }
.cat-hero h1{ font-family:'Fraunces', serif; font-weight:500; font-size:clamp(1.8rem,3.2vw,2.6rem); color:var(--text); max-width:22ch; line-height:1.15; margin:16px 0 0; }
.cat-hero .lead{ margin:14px 0 0; max-width:56ch; font-size:15.5px; color:var(--text-soft); line-height:1.6; }

.cat-filters{ padding:clamp(20px,3vw,28px) 0; border-bottom:1px solid var(--bg-line); }

/* Barra de filtros: buscador + dos desplegables en una sola línea.
   Se eligió sobre pestañas porque los filtros SE COMBINAN (quesos DE Kroon),
   y con pestañas una oculta a la otra. */
.filter-bar{ display:grid; grid-template-columns:1fr 230px 230px; gap:12px; align-items:stretch; }
@media (max-width:900px){ .filter-bar{ grid-template-columns:1fr 1fr; } .filter-bar .search-box{ grid-column:1 / -1; } }
@media (max-width:520px){ .filter-bar{ grid-template-columns:1fr; } }

.select-wrap{ position:relative; display:flex; }
.select-wrap select{
  appearance:none; -webkit-appearance:none; width:100%;
  font-family:'Archivo', sans-serif; font-size:14px; font-weight:600; color:var(--text);
  background:var(--bg-soft); border:1px solid var(--bg-line); border-radius:14px;
  padding:14px 42px 14px 18px; cursor:pointer; transition:border-color .15s;
}
.select-wrap select:hover{ border-color:var(--gold); }
.select-wrap select:focus{ outline:none; border-color:var(--gold); }
.select-wrap select option{ background:var(--bg-soft); color:var(--text); }
.select-wrap > svg{ position:absolute; right:16px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--text-soft); pointer-events:none; }

/* Chips de filtros activos: siempre visibles, con x para quitarlos uno a uno */
.active-filters{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:14px; }
.active-filters .af-label{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--text-soft); margin-right:2px; }
.af-chip{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Archivo', sans-serif; font-size:12.5px; font-weight:600;
  background:rgba(201,154,62,.14); border:1px solid rgba(201,154,62,.4); color:var(--text);
  padding:7px 9px 7px 14px; border-radius:99px; cursor:pointer; transition:background .15s;
}
.af-chip:hover{ background:rgba(201,154,62,.24); }
.af-chip svg{ width:13px; height:13px; opacity:.75; }
.af-clear{
  font-family:'Archivo', sans-serif; font-size:12.5px; font-weight:700; color:var(--text-soft);
  background:none; border:none; text-decoration:underline; text-underline-offset:3px; padding:7px 4px;
}
.af-clear:hover{ color:var(--text); }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.search-box{
  position:relative; display:flex; align-items:center; gap:12px;
  margin-bottom:22px; padding:14px 18px;
  background:var(--bg-soft); border:1px solid var(--bg-line); border-radius:14px;
  transition:border-color .15s;
}
.search-box:focus-within{ border-color:var(--gold); }
.search-box svg{ width:19px; height:19px; color:var(--text-soft); flex:none; }
.search-box input{
  flex:1; background:none; border:none; outline:none;
  font-family:'Archivo', sans-serif; font-size:15px; color:var(--text);
}
.search-box input::placeholder{ color:var(--text-soft); opacity:.7; }
.filter-group{ display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.filter-group:last-child{ margin-bottom:0; }
.filter-label{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); }
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  font-family:'Archivo', sans-serif; font-size:12.5px; font-weight:600;
  padding:8px 15px; border-radius:99px; border:1px solid var(--bg-line);
  background:var(--bg-soft); color:var(--text-soft); cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
.chip:hover{ border-color:var(--gold); color:var(--text); }
.chip.is-active{ background:var(--gold); border-color:var(--gold); color:#171410; }

.cat-grid-section{ padding:clamp(24px,3vw,32px) 0 clamp(48px,6vw,72px); }
.cat-grid-head{ margin-bottom:16px; font-size:12.5px; color:var(--text-soft); }
.cat-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:16px;
}
@media (max-width:1080px){ .cat-grid{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:760px){ .cat-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:480px){ .cat-grid{ gap:10px; } .product-body{ padding:10px 10px 12px; } .product-body h3{ font-size:13.5px; } }
.cat-grid-empty{ text-align:center; padding:40px 0; color:var(--text-soft); font-size:14px; }

.product-card{
  position:relative; background:var(--bg-soft); border:1px solid var(--bg-line); border-radius:14px;
  overflow:hidden; transition:border-color .18s, transform .18s;
}
.product-card.is-featured{ cursor:pointer; }
.product-card.is-featured:hover, .product-card.is-featured:focus-visible{ border-color:var(--gold); transform:translateY(-2px); outline:none; }
.product-badge{
  position:absolute; top:10px; left:10px; z-index:2;
  background:var(--gold); color:#171410; font-size:10px; font-weight:800;
  padding:4px 10px; border-radius:99px; letter-spacing:.02em;
}
.product-thumb{
  aspect-ratio:1/1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background:radial-gradient(120% 120% at 30% 20%, rgba(201,154,62,.14), transparent 65%), var(--bg);
  color:var(--text-soft);
}
.product-thumb svg{ width:34px; height:34px; opacity:.55; }
.thumb-note{ font-size:9.5px; color:var(--text-soft); opacity:.6; letter-spacing:.03em; }
.product-body{ padding:14px 14px 16px; }
.product-brand{ display:block; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); margin-bottom:5px; }
.product-body h3{ font-family:'Fraunces', serif; font-size:15px; font-weight:600; color:var(--text); margin:0; line-height:1.3; }
.product-meta{ display:block; font-size:11.5px; color:var(--text-soft); margin-top:6px; }

/* Ficha de detalle de producto */
.product-detail{ padding:clamp(40px,5vw,60px) 0 clamp(56px,7vw,80px); border-top:1px solid var(--bg-line); }
.breadcrumb{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:16px; font-size:12.5px; color:var(--text-soft); }
.breadcrumb a{ color:var(--text-soft); transition:color .15s; }
.breadcrumb a:hover{ color:var(--gold); }
.detail-grid{
  display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(24px,3vw,44px);
  margin-top:24px; align-items:start;
}
@media (max-width:800px){ .detail-grid{ grid-template-columns:1fr; } }
.detail-image{
  aspect-ratio:1/1; border-radius:16px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  background:radial-gradient(120% 120% at 30% 15%, rgba(201,154,62,.16), transparent 65%), var(--bg-soft);
  border:1px solid var(--bg-line); color:var(--text-soft);
}
.detail-image svg{ width:64px; height:64px; opacity:.5; }
.detail-info h2{ font-family:'Fraunces', serif; font-size:clamp(1.5rem,2.4vw,2rem); font-weight:600; color:var(--text); margin:6px 0 0; }
.detail-desc{ margin:16px 0 0; font-size:15px; line-height:1.65; color:var(--text-soft); max-width:52ch; }
.spec-table{ width:100%; border-collapse:collapse; margin:22px 0; font-size:13.5px; }
.spec-table th{ text-align:left; font-weight:700; color:var(--text); padding:10px 16px 10px 0; border-bottom:1px solid var(--bg-line); width:40%; }
.spec-table td{ text-align:left; color:var(--text-soft); padding:10px 0; border-bottom:1px solid var(--bg-line); }
.detail-note{ margin-top:28px; padding-top:20px; border-top:1px dashed var(--bg-line); font-size:12.5px; color:var(--text-soft); max-width:60ch; }

/* ================================================================
   BLOQUES DE CONTENIDO DEL HOME (ampliación)
   ================================================================ */

/* --- Placeholder de imagen reutilizable ---------------------------
   Mientras no haya fotografía real, cada hueco de imagen muestra este
   bloque: gradiente de marca + ícono + nota. Es el MISMO lenguaje que
   ya usan las tarjetas de producto, para que el sitio se vea coherente
   y para que sea obvio qué falta reemplazar. */
.ph{
  position:relative; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px;
  background:
    radial-gradient(120% 120% at 30% 18%, rgba(201,154,62,.16), transparent 62%),
    var(--bg-soft);
  border:1px solid var(--bg-line); border-radius:14px;
  color:var(--text-soft); overflow:hidden;
}
.ph::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(140deg, rgba(255,255,255,.05), transparent 42%);
}
.ph svg{ width:30px; height:30px; opacity:.5; }
.ph span{ font-size:10px; letter-spacing:.06em; text-transform:uppercase; opacity:.65; }
.ph--wide{ aspect-ratio:16/10; }
.ph--square{ aspect-ratio:1/1; }
.ph--tall{ aspect-ratio:3/4; }
.ph--banner{ aspect-ratio:21/9; }

/* --- Sección genérica de contenido -------------------------------- */
.block{ padding:clamp(56px,7vw,88px) 0; }
.block-head{ max-width:640px; margin-bottom:clamp(28px,3.5vw,40px); }
.block-head h2{
  font-size:clamp(1.5rem,2.5vw,2.1rem); line-height:1.22;
  color:var(--text); font-weight:500; margin:14px 0 0;
}
.block-head p{ margin:14px 0 0; font-size:16px; line-height:1.65; color:var(--text-soft); max-width:58ch; }

/* --- Qué distribuimos: rejilla de categorías ----------------------- */
.cat-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:1000px){ .cat-cards{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){ .cat-cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:440px){ .cat-cards{ grid-template-columns:1fr; } }
.cat-card{
  display:block; background:var(--bg-soft); border:1px solid var(--bg-line);
  border-radius:14px; overflow:hidden; transition:border-color .18s, transform .18s;
}
.cat-card:hover{ border-color:var(--gold); transform:translateY(-2px); }
.cat-card .ph{ border:0; border-radius:0; }
.cat-card-media{ aspect-ratio:900/560; background:#fff; overflow:hidden; }
.cat-card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.cat-card:hover .cat-card-media img{ transform:scale(1.04); }
.cat-card-body{ padding:14px 16px 16px; }
.cat-card h3{ font-family:'Fraunces',serif; font-size:15.5px; font-weight:600; color:var(--text); margin:0; }
.cat-card p{ margin:6px 0 0; font-size:12.5px; line-height:1.5; color:var(--text-soft); }

/* --- Infografía: cómo llega el producto --------------------------- */
.flow{
  position:relative;
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
  counter-reset:paso;
}
@media (max-width:900px){ .flow{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .flow{ grid-template-columns:1fr; } }

.flow-step{
  position:relative; background:var(--bg-soft);
  border:1px solid var(--bg-line); border-radius:16px;
  padding:26px 22px 24px; counter-increment:paso;
  /* columna flex + margin-top:auto en la cifra = todas las cifras caen sobre
     la MISMA línea, aunque los párrafos tengan largos distintos. Sin esto la
     infografía se lee escalonada y pierde el efecto de comparación. */
  display:flex; flex-direction:column;
}
/* La línea que une los pasos: solo en 4 columnas, y nunca después del último */
@media (min-width:901px){
  .flow-step:not(:last-child)::after{
    content:""; position:absolute; top:52px; right:-18px; width:18px; height:1px;
    background:linear-gradient(90deg, var(--gold), rgba(201,154,62,.15));
  }
}
.flow-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%; margin-bottom:16px;
  background:rgba(201,154,62,.14); border:1px solid rgba(201,154,62,.38);
  color:var(--gold); font-size:12.5px; font-weight:800;
}
.flow-num::before{ content:counter(paso); }
.flow-step h3{
  font-family:'Fraunces',serif; font-size:16.5px; font-weight:600;
  color:var(--text); margin:0 0 8px; line-height:1.3;
}
.flow-step p{ margin:0 0 18px; font-size:13.5px; line-height:1.6; color:var(--text-soft); }
.flow-figure{
  display:block; margin-top:auto; padding-top:14px;
  border-top:1px dashed var(--bg-line);
  font-family:'Fraunces',serif; font-size:1.6rem; font-weight:600;
  color:var(--gold); line-height:1;
}
.flow-figure small{
  display:block; margin-top:6px; font-family:'Archivo',sans-serif;
  font-size:11px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--text-soft);
}

/* --- A quién servimos --------------------------------------------- */
.who{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,52px); align-items:center; }
@media (max-width:860px){ .who{ grid-template-columns:1fr; } }
.who-list{ list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:2px; }
.who-list li{
  display:flex; align-items:flex-start; gap:13px;
  padding:14px 0; border-bottom:1px solid var(--bg-line);
}
.who-list li:last-child{ border-bottom:0; }
.who-list svg{ width:19px; height:19px; flex:none; color:var(--gold); margin-top:1px; }
.who-list b{ display:block; font-size:14.5px; color:var(--text); font-weight:700; }
.who-list span{ display:block; font-size:13px; color:var(--text-soft); margin-top:3px; line-height:1.55; }

/* --- Diferenciales ------------------------------------------------ */
.edge{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:820px){ .edge{ grid-template-columns:1fr; } }
.edge-card{
  background:var(--bg-soft); border:1px solid var(--bg-line);
  border-radius:16px; padding:26px 24px;
}
.edge-card svg{ width:24px; height:24px; color:var(--gold); margin-bottom:14px; }
.edge-card h3{ font-family:'Fraunces',serif; font-size:16.5px; font-weight:600; color:var(--text); margin:0 0 8px; }
.edge-card p{ margin:0; font-size:13.5px; line-height:1.6; color:var(--text-soft); }

/* --- Banda de cierre con CTA -------------------------------------- */
.closer{ padding:clamp(48px,6vw,72px) 0; }
.closer-inner{
  position:relative; overflow:hidden;
  border:1px solid var(--bg-line); border-radius:20px;
  padding:clamp(32px,4.5vw,56px);
  background:
    radial-gradient(90% 130% at 12% 0%, rgba(51,63,38,.55), transparent 62%),
    radial-gradient(70% 120% at 88% 100%, rgba(194,65,28,.28), transparent 62%),
    var(--bg-soft);
}
.closer h2{ font-size:clamp(1.5rem,2.6vw,2.1rem); font-weight:500; line-height:1.22; color:var(--text); margin:0; max-width:20ch; }
.closer p{ margin:14px 0 0; font-size:15.5px; line-height:1.6; color:var(--text-soft); max-width:52ch; }
.closer .hero-cta{ margin-top:26px; }

/* ================================================================
   CATÁLOGO — pestañas de filtro
   ================================================================ */
/* Pestañas Categoría / Marca al mismo nivel. Una oculta los chips de la
   otra, PERO la fila de filtros activos de abajo sigue mostrando todo lo
   aplicado, así nunca se pierde de vista que se están combinando dos. */
.filter-tabs{
  display:flex; gap:4px; margin:18px 0 0; padding:5px;
  background:var(--bg-soft); border:1px solid var(--bg-line);
  border-radius:99px; width:max-content; max-width:100%;
}
.ftab{
  font-family:'Archivo',sans-serif; font-size:13px; font-weight:700;
  color:var(--text-soft); background:none; border:none;
  padding:9px 22px; border-radius:99px; transition:background .15s, color .15s;
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
}
.ftab:hover{ color:var(--text); }
.ftab.is-active{ background:var(--gold); color:#171410; }
.ftab .ftab-dot{
  width:6px; height:6px; border-radius:50%; background:var(--rust); flex:none;
}
.ftab:not(.is-on) .ftab-dot{ display:none; }
.ftab.is-active .ftab-dot{ background:#171410; }
.filter-panel{ margin-top:16px; }

/* ============ v25 — footer, formulario y aviso de cookies ============ */
/* El padding horizontal lo da .wrap. Antes .footer-bottom lo pisaba con
   "padding:22px 0" y el texto se salía del margen en desktop y móvil. */
.footer-bottom{ padding-top:22px; padding-bottom:22px; padding-left:var(--pad); padding-right:var(--pad); }
.footer-copy{ min-width:0; }
.footer-legal{ flex-wrap:wrap; gap:8px 18px; }
.footer-legal a, .linklike{ color:var(--text-soft); }
.linklike{ background:none; border:0; padding:0; font:inherit; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.linklike:hover{ color:var(--text); }
.footer-address{ font-style:normal; line-height:1.55; color:var(--text-soft); margin:0 0 10px; }
.form-consent{ grid-column:1 / -1; font-size:12px; color:var(--text-soft); margin:0; }
.form-consent a{ color:var(--gold); text-decoration:underline; text-underline-offset:3px; }
@media (max-width:640px){
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
}
.cookie-bar{
  position:fixed; z-index:90; left:16px; right:16px; bottom:16px; max-width:720px; margin:0 auto;
  display:flex; align-items:center; gap:16px 20px; flex-wrap:wrap; padding:16px 18px;
  background:rgba(24,22,19,.96); border:1px solid var(--bg-line); border-radius:14px; box-shadow:0 18px 40px rgba(0,0,0,.45);
  font-size:13.5px; color:var(--text-soft);
}
.cookie-bar p{ margin:0; flex:1 1 320px; line-height:1.5; }
.cookie-bar a{ color:var(--gold); text-decoration:underline; }
.cookie-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.cookie-bar[hidden]{ display:none; }

/* ============ v25 — páginas interiores (Nosotros, legales, 404) ============ */
.page-hero{ padding:clamp(140px,14vw,180px) 0 clamp(40px,5vw,64px); }
.page-hero h1{ max-width:24ch; }

.about-page .block-head p{ max-width:68ch; }
.pillars{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:clamp(28px,4vw,40px); }
.pillar{ background:var(--bg-soft); border:1px solid var(--bg-line); border-radius:14px; padding:clamp(20px,2.4vw,28px); }
.pillar h3{ font-family:'Fraunces', serif; font-weight:600; font-size:17px; color:var(--text); margin:0 0 10px; }
.pillar p{ margin:0; font-size:14.5px; line-height:1.65; color:var(--text-soft); }
@media (max-width:760px){ .pillars{ grid-template-columns:1fr; } }
.about-quote{ margin:clamp(32px,4vw,48px) 0; padding:0 0 0 22px; border-left:2px solid var(--gold); max-width:62ch; }
.about-quote p{ margin:0; font-family:'Fraunces', serif; font-size:clamp(1.15rem,1.9vw,1.45rem); line-height:1.45; color:var(--text); }
.about-page .stats-row{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .about-page .stats-row{ grid-template-columns:repeat(2,1fr); } }
.backing{ display:flex; align-items:center; gap:clamp(18px,3vw,32px); margin-top:clamp(32px,4vw,48px); padding:20px; border:1px solid var(--bg-line); border-radius:14px; }
.backing-copy{ max-width:none; }
.backing img{ width:200px; height:auto; background:#fff; border-radius:10px; padding:10px 14px; flex:none; }
.backing p{ margin:0; font-size:14.5px; line-height:1.6; color:var(--text-soft); }
.backing b{ color:var(--text); }
@media (max-width:640px){ .backing{ flex-direction:column; align-items:flex-start; } }

/* Organigrama: niveles unidos por una línea vertical dorada */
.org{ margin-top:clamp(32px,4vw,48px); }
.org-level{ position:relative; display:flex; justify-content:center; flex-wrap:wrap; gap:14px; padding-top:34px; }
.org-level::before{ content:""; position:absolute; top:0; left:50%; width:1px; height:34px; background:linear-gradient(var(--gold), rgba(201,154,62,.25)); }
.org-level--top{ padding-top:0; }
.org-level--top::before{ display:none; }
.org-level--mgr{ display:grid; grid-template-columns:repeat(4,1fr); }
.org-level--mgr::after{ content:""; position:absolute; top:34px; left:12.5%; right:12.5%; height:1px; background:rgba(201,154,62,.35); }
.org-level--mgr{ padding-top:48px; }
.org-level--mgr::before{ height:34px; }
.org-person{
  position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px;
  min-width:0; width:220px; max-width:100%; padding:18px 14px 16px;
  background:var(--bg-soft); border:1px solid var(--bg-line); border-radius:14px;
}
.org-level--mgr .org-person{ width:auto; }
.org-level--top .org-person{ border-color:rgba(201,154,62,.55); }
.org-avatar{ width:56px; height:56px; border-radius:50%; background:#26231e; display:flex; align-items:center; justify-content:center; margin-bottom:8px; overflow:hidden; }
.org-avatar svg{ width:44px; height:44px; fill:rgba(242,234,217,.28); margin-top:10px; }
.org-role{ font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--gold); line-height:1.35; }
.org-name{ font-family:'Fraunces', serif; font-size:15.5px; font-weight:600; color:var(--text); }
.org-person.is-pending .org-name{ font-family:'Archivo', sans-serif; font-size:12.5px; font-weight:500; font-style:italic; color:var(--text-soft); }
.org-teams{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:34px; padding-top:34px; border-top:1px dashed rgba(201,154,62,.35); }
.org-team{ background:transparent; border:1px solid var(--bg-line); border-radius:14px; padding:18px 20px; }
.org-team h4{ font-family:'Fraunces', serif; font-size:16px; font-weight:600; color:var(--text); margin:0 0 10px; }
.org-team ul{ margin:0; padding:0; list-style:none; }
.org-team li{ font-size:13.5px; color:var(--text-soft); padding:7px 0; border-top:1px solid var(--bg-line); }
.org-team-link{ display:inline-block; margin-top:12px; font-size:13px; font-weight:700; color:var(--gold); }
@media (max-width:1000px){
  .org-level--mgr{ grid-template-columns:repeat(2,1fr); }
  .org-level--mgr::after{ left:25%; right:25%; }
  .org-teams{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .org-level--dir{ display:grid; grid-template-columns:1fr 1fr; }
  .org-level--dir .org-person{ width:auto; }
  .org-person{ padding:14px 10px; }
  .org-avatar{ width:44px; height:44px; }
  .org-avatar svg{ width:34px; height:34px; }
}

/* Páginas legales */
.legal-grid{ display:grid; grid-template-columns:240px minmax(0,1fr); gap:clamp(28px,5vw,64px); align-items:start; }
.legal-toc{ position:sticky; top:130px; font-size:13.5px; }
.legal-toc-title{ display:block; font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--gold); margin-bottom:12px; }
.legal-toc ol{ margin:0; padding:0; list-style:none; }
.legal-toc a{ display:block; padding:6px 0; color:var(--text-soft); border-top:1px solid var(--bg-line); }
.legal-toc a:hover{ color:var(--text); }
.legal-body{ max-width:72ch; }
.legal-updated{ font-size:13px; color:var(--text-soft); margin:0 0 20px; }
.legal-body section{ scroll-margin-top:120px; padding:18px 0; border-top:1px solid var(--bg-line); }
.legal-body h2{ font-family:'Fraunces', serif; font-weight:600; font-size:clamp(1.1rem,1.6vw,1.3rem); color:var(--text); margin:0 0 10px; }
.legal-body p, .legal-body li{ font-size:15px; line-height:1.7; color:var(--text-soft); }
.legal-body p{ margin:0 0 12px; }
.legal-body ul{ margin:0 0 12px; padding-left:20px; }
.legal-body a{ color:var(--gold); text-decoration:underline; text-underline-offset:3px; }
.legal-body b{ color:var(--text); }
.legal-table{ overflow-x:auto; margin:6px 0 14px; border:1px solid var(--bg-line); border-radius:10px; }
.legal-table table{ width:100%; border-collapse:collapse; font-size:13.5px; min-width:560px; }
.legal-table th, .legal-table td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--bg-line); color:var(--text-soft); vertical-align:top; }
.legal-table th{ color:var(--text); font-weight:700; background:var(--bg-soft); }
@media (max-width:860px){
  .legal-grid{ grid-template-columns:1fr; }
  .legal-toc{ position:static; }
}

/* v25 — paginación del catálogo y ajustes móviles de páginas legales */
.cat-more{ display:flex; justify-content:center; margin-top:28px; }
.cat-more[hidden]{ display:none; }
.legal-body{ min-width:0; }
@media (max-width:860px){ .legal-grid{ grid-template-columns:minmax(0,1fr); } }

/* ============ v26 — CATÁLOGO: buscador fijo + pestañas de marca tipo carpeta ============ */
:root{ --paper:#ffffff; --paper-2:#e4ddd0; --ink:#1d1a16; --ink-soft:#6b6358; --gold-ink:#94701f; --paper-line:#ebe5da; }
.cat-hero--compact{ padding:clamp(128px,12vw,156px) 0 clamp(18px,2.6vw,30px); }
@media (max-width:760px){ .cat-hero--compact{ padding:136px 0 8px; } .cat-hero--compact .lead{ display:none; } .cat-hero--compact h1{ font-size:1.6rem; } }
.catalog{ padding:0 0 clamp(56px,7vw,88px); }
.cat-search{ position:sticky; top:var(--hdr-h, 74px); z-index:30; padding:12px 0; background:var(--bg); }
@media (max-width:760px){ .cat-search{ margin:0 calc(-1 * var(--pad)); padding:10px var(--pad); box-shadow:0 8px 16px rgba(0,0,0,.35); } }

/* v27 — Marcas: burbujas + una pestaña "líquida".
   Las marcas inactivas son burbujas. Detrás de la activa se desliza una sola
   forma blanca (.btab-ind) que se funde con el panel mediante curvas invertidas.
   Al cambiar de marca, main.js la estira hacia la nueva y luego la contrae. */
.brand-tabs{
  position:relative; display:flex; align-items:flex-end; gap:8px; margin-top:12px; padding:0;
  overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  --tab-h:70px; --pill-h:54px; --tab-r:18px;
  height:var(--tab-h); /* altura fija: la transición de las burbujas no empuja la grilla */
}
.brand-tabs::-webkit-scrollbar{ display:none; }
.btab-ind{
  position:absolute; left:0; bottom:0; width:0; height:var(--tab-h); z-index:0; pointer-events:none;
  background:var(--paper); border-radius:var(--tab-r) var(--tab-r) 0 0;
}
.btab-ind::before, .btab-ind::after{ content:""; position:absolute; bottom:0; width:var(--tab-r); height:var(--tab-r); }
.btab-ind::before{ right:100%; background:radial-gradient(circle at 0 0, transparent calc(var(--tab-r) - .5px), var(--paper) var(--tab-r)); }
.btab-ind::after{ left:100%; background:radial-gradient(circle at 100% 0, transparent calc(var(--tab-r) - .5px), var(--paper) var(--tab-r)); }
.btab{
  position:relative; z-index:1; flex:none;
  display:flex; align-items:center; justify-content:center;
  height:var(--pill-h); min-width:124px; padding:6px 16px; margin:0 0 9px;
  border:0; border-radius:999px; background:var(--paper-2); cursor:pointer;
  transition:background-color .3s ease, border-radius .45s cubic-bezier(.65,0,.35,1), height .45s cubic-bezier(.65,0,.35,1), margin .45s cubic-bezier(.65,0,.35,1), box-shadow .2s;
}
.btab:first-child{ margin-left:0; }
.btab img{ height:44px; width:auto; max-width:104px; object-fit:contain; opacity:.7; filter:grayscale(.5); transition:opacity .25s, filter .25s, transform .45s cubic-bezier(.65,0,.35,1); }
.btab:hover{ box-shadow:inset 0 0 0 1.5px rgba(29,26,22,.25); }
.btab:hover img{ opacity:1; filter:none; }
.btab--text{ font-family:'Archivo', sans-serif; font-size:13px; font-weight:800; color:#4b4439; white-space:nowrap; }
.btab.is-active{
  height:var(--tab-h); margin-bottom:0; border-radius:var(--tab-r) var(--tab-r) 0 0; box-shadow:none;
  background-color:transparent; color:var(--ink);
  transition-delay:.12s;
}
.btab.is-active img{ transform:scale(1.14); opacity:1; filter:none; } /* transform: no cambia el ancho medido */
/* Sin JS (o antes de que cargue) la activa se pinta sola */
.brand-tabs:not(.has-ind) .btab.is-active{ background-color:var(--paper); }
.btab:focus-visible{ outline:2px solid var(--gold); outline-offset:-4px; }

.brand-panel{
  position:relative; background:var(--paper); color:var(--ink); margin-top:-1px;
  border-radius:18px; padding:clamp(18px,2.6vw,34px);
  transition:border-radius .3s ease;
}
.brand-panel.flush-l{ border-top-left-radius:0; }
.brand-panel.flush-r{ border-top-right-radius:0; }
.bp-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.bp-head h2{ font-family:'Fraunces', serif; font-weight:600; font-size:clamp(1.3rem,2.2vw,1.75rem); color:var(--ink); margin:0; }
#resultsCount{ font-size:13px; font-weight:600; color:var(--ink-soft); }
.cat-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 22px; }
.cat-chips .chip{ background:transparent; border-color:#ddd5c6; color:#4b4439; }
.cat-chips .chip:hover{ border-color:var(--ink); color:var(--ink); }
.cat-chips .chip.is-active{ background:var(--ink); border-color:var(--ink); color:#f2ead9; }
.cat-chips .chip.is-empty{ opacity:.38; }
@media (max-width:760px){
  .brand-panel{ margin:-1px calc(-1 * var(--pad)) 0; border-radius:0; padding:18px var(--pad) 28px; }
  .brand-panel.flush-l, .brand-panel.flush-r{ border-radius:0; }
  .brand-tabs{ margin-left:calc(-1 * var(--pad)); margin-right:calc(-1 * var(--pad)); padding:0 var(--pad); scroll-padding:0 var(--pad); --tab-h:60px; --pill-h:46px; --tab-r:14px; gap:6px; }
  .btab{ min-width:96px; padding:4px 12px; margin-bottom:7px; }
  .btab img{ height:36px; max-width:84px; }
  .cat-chips{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:14px calc(-1 * var(--pad)) 18px; padding:0 var(--pad); }
  .cat-chips::-webkit-scrollbar{ display:none; }
  .cat-chips .chip{ flex:none; }
}

/* Tarjetas sobre papel blanco: las fotos de producto (fondo blanco) se integran sin recuadro */
.cat-grid--light .product-card{ background:var(--paper); border:1px solid var(--paper-line); border-radius:14px; display:block; color:var(--ink); transition:border-color .18s, transform .18s, box-shadow .18s; }
.cat-grid--light .product-card:hover, .cat-grid--light .product-card:focus-visible{ border-color:#cdbf9f; transform:translateY(-2px); box-shadow:0 10px 24px rgba(29,26,22,.08); outline:none; }
.product-thumb{ position:relative; }
.cat-grid--light .product-thumb{ background:var(--paper); color:#b9b0a0; }
.cat-grid--light .product-thumb img{ width:100%; height:100%; object-fit:contain; padding:8%; }
.cat-grid--light .product-brand{ color:var(--gold-ink); }
.cat-grid--light .product-body h3{ color:var(--ink); }
.cat-grid--light .product-meta{ color:var(--ink-soft); }
.product-tag{ position:absolute; left:10px; bottom:10px; font-size:10.5px; font-weight:700; background:#f3eee5; color:#5b5246; padding:3px 9px; border-radius:99px; }
.brand-panel .cat-grid-empty{ color:var(--ink-soft); }
.btn-dark{ background:var(--ink); color:#f2ead9; }
.btn-dark:hover{ background:#000; }

/* ============ v26 — FICHA DE PRODUCTO (una página por producto) ============ */
.pdp{ padding:clamp(136px,11vw,150px) 0 clamp(36px,5vw,64px); }
.pdp .breadcrumb{ margin:0 0 18px; }
.pdp-grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(24px,4vw,60px); align-items:start; }
.pdp-media{ position:sticky; top:110px; }
.pdp-main{ background:var(--paper); border-radius:22px; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; color:#b9b0a0; overflow:hidden; }
.pdp-main img{ width:100%; height:100%; object-fit:contain; padding:8%; }
.pdp-main svg{ width:64px; height:64px; }
.pdp-info{ display:flex; flex-direction:column; gap:14px; }
.pdp-brandrow{ min-height:0; }
.pdp-logo{ height:52px; width:auto; background:var(--paper); border-radius:10px; padding:6px 12px; }
.pdp-info h1{ font-family:'Fraunces', serif; font-weight:600; font-size:clamp(1.8rem,3.4vw,2.7rem); line-height:1.1; color:var(--text); margin:0; }
.pdp-cat{ align-self:flex-start; font-size:12px; font-weight:700; color:var(--gold); border:1px solid rgba(201,154,62,.45); border-radius:99px; padding:5px 12px; }
.pdp-desc{ margin:0; font-size:15.5px; line-height:1.65; color:var(--text-soft); max-width:52ch; }
.pd-opts{ border:0; padding:0; margin:6px 0 0; display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:10px; }
.pd-opts legend{ padding:0; margin-bottom:10px; font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--text-soft); }
.pd-opt{ position:relative; display:flex; align-items:center; gap:10px; padding:10px; border:1px solid var(--bg-line); border-radius:14px; cursor:pointer; transition:border-color .15s, background .15s; }
.pd-opt:hover{ border-color:rgba(201,154,62,.6); }
.pd-opt input{ position:absolute; opacity:0; pointer-events:none; }
.pd-opt:has(input:checked){ border-color:var(--gold); background:rgba(201,154,62,.1); }
.pd-opt:has(input:focus-visible){ outline:2px solid var(--gold); outline-offset:2px; }
.pd-opt-img{ flex:none; width:48px; height:48px; border-radius:9px; background:var(--paper); display:flex; align-items:center; justify-content:center; color:#b9b0a0; overflow:hidden; }
.pd-opt-img img{ width:100%; height:100%; object-fit:contain; padding:3px; }
.pd-opt-img svg{ width:22px; height:22px; }
.pd-opt-txt{ font-size:13.5px; font-weight:600; color:var(--text); line-height:1.3; text-wrap:balance; }
.pdp-cta{ margin-top:8px; justify-content:center; padding:15px 24px; font-size:15px; }
.pdp-cta svg{ width:18px; height:18px; }
.pdp-note{ margin:0; font-size:12.5px; color:var(--text-soft); }
.pdp-more{ font-size:13.5px; font-weight:700; color:var(--gold); }
.pdp-related{ padding-top:clamp(24px,3vw,40px); }
.pdp-related .block-head h2{ font-family:'Fraunces', serif; font-weight:500; }
.pdp-related .cat-grid{ margin-top:18px; }
@media (max-width:860px){
  .pdp-grid{ grid-template-columns:1fr; }
  .pdp-media{ position:static; }
  .pdp-main{ aspect-ratio:4/3; }
}

/* ============ v26 — NOSOTROS: aliados comerciales ============ */
.ally-dir{ margin-top:clamp(32px,4vw,48px); padding:clamp(20px,2.6vw,30px); border:1px solid var(--bg-line); border-radius:16px; background:var(--bg-soft); }
.ally-dir-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.ally-dir-head h3{ font-family:'Fraunces', serif; font-weight:600; font-size:1.25rem; margin:0; color:var(--text); }
.ally-count{ margin:0; font-size:13px; color:var(--text-soft); }
.ally-form{ display:grid; grid-template-columns:260px 1fr; gap:12px; margin:16px 0; }
@media (max-width:640px){ .ally-form{ grid-template-columns:1fr; } }
.ally-form .field{ display:flex; flex-direction:column; gap:6px; }
.ally-form .field span{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--text-soft); }
.ally-form select, .ally-form input{
  width:100%; font:inherit; font-size:14.5px; color:var(--text); background:var(--bg); border:1px solid var(--bg-line);
  border-radius:10px; padding:11px 12px;
}
.ally-form select:focus, .ally-form input:focus{ outline:none; border-color:var(--gold); }
/* ~5 filas visibles, el resto con scroll interno */
.ally-list{ list-style:none; margin:0; padding:0; max-height:calc(5 * 52px); overflow-y:auto; border-top:1px solid var(--bg-line); scrollbar-width:thin; scrollbar-color:rgba(201,154,62,.5) transparent; }
.ally-list li{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px; padding:0 4px; border-bottom:1px solid var(--bg-line); }
.ally-list li[hidden]{ display:none; }
.ally-list span{ font-size:14.5px; color:var(--text); }
.ally-list small{ font-size:12px; color:var(--text-soft); text-align:right; }
.ally-empty{ margin:12px 0 0; font-size:13.5px; color:var(--text-soft); }

/* ============ v27 — FOOTER en dos niveles ============
   Nivel 1: marca + enlaces (izquierda) | formulario (derecha).
   Nivel 2: copyright e información legal. */
.footer-cta{ margin-bottom:0; align-items:start; }
.footer-brand .logo{ margin-bottom:14px; }
.footer-links{ display:grid; grid-template-columns:1.15fr 1fr 1.1fr; gap:24px; margin-top:clamp(28px,3.4vw,40px); }
.footer-links .footer-col h4{ margin-bottom:14px; }
.footer-links .footer-col a, .footer-links .footer-col p{ margin-bottom:9px; font-size:13.5px; }
.footer-col .footer-more{ color:var(--gold); font-weight:700; }
.footer-address{ display:flex; gap:10px; align-items:flex-start; margin:clamp(18px,2.4vw,26px) 0 0; padding-top:18px; border-top:1px solid var(--bg-line); font-size:13px; max-width:52ch; }
.footer-address svg{ width:16px; height:16px; flex:none; margin-top:2px; color:var(--gold); }
@media (max-width:520px){
  .footer-links{ grid-template-columns:1fr 1fr; }
  .footer-links .footer-col:last-child{ grid-column:1 / -1; }
}

/* ============ v27 — NOSOTROS con imagen ============ */
figure{ margin:0; }
.about-hero{ padding:clamp(128px,12vw,164px) 0 clamp(40px,5vw,72px); position:relative; overflow:hidden; }
.about-hero::before{ content:""; position:absolute; inset:0; background:radial-gradient(60% 70% at 85% 30%, rgba(40,86,120,.28), transparent 70%); pointer-events:none; }
.about-hero-grid{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:center; }
.about-hero h1{ font-size:clamp(2.1rem,4vw,3.4rem); line-height:1.06; margin:18px 0 0; max-width:16ch; }
.about-hero .lead{ margin:20px 0 0; max-width:48ch; font-size:17px; line-height:1.6; color:var(--text-soft); }
.about-hero .hero-cta{ margin-top:28px; display:flex; gap:12px; flex-wrap:wrap; }
.about-hero-media{ position:relative; aspect-ratio:4/5; max-height:620px; border-radius:22px; overflow:hidden; background:#10222c; }
.about-hero-media img{ width:100%; height:100%; object-fit:cover; }
.about-hero-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(18,17,16,.55)); }
.about-hero-badge{
  position:absolute; z-index:1; left:18px; bottom:18px; display:flex; align-items:center; gap:12px;
  padding:12px 16px 12px 14px; border-radius:14px; background:rgba(18,17,16,.72); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12);
}
.about-hero-badge b{ font-family:'Fraunces', serif; font-size:30px; font-weight:600; color:var(--gold); line-height:1; }
.about-hero-badge span{ font-size:12.5px; line-height:1.35; color:var(--text); max-width:18ch; }
@media (max-width:860px){
  .about-hero{ padding-top:136px; }
  .about-hero-grid{ grid-template-columns:1fr; }
  .about-hero-media{ aspect-ratio:16/11; }
}

.about-split{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,5vw,72px); align-items:center; }
.about-split .block-head p + p{ margin-top:14px; }
.about-split-media{ aspect-ratio:4/5; max-height:520px; border-radius:20px; overflow:hidden; background:#1f2a33; }
.about-split-media img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:860px){ .about-split{ grid-template-columns:1fr; } .about-split-media{ aspect-ratio:16/10; } }

/* Pilares: tarjetas con foto */
.pillars{ gap:18px; }
.pillar{ display:grid; grid-template-columns:40% 1fr; padding:0; overflow:hidden; }
.pillar-media{ position:relative; min-height:100%; background:#1f2a33; }
.pillar-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.pillar:hover .pillar-media img{ transform:scale(1.04); }
.pillar-body{ padding:clamp(20px,2.4vw,28px); }
.pillar-n{ display:block; font-size:11px; font-weight:800; letter-spacing:.1em; color:var(--gold); margin-bottom:10px; }
@media (max-width:1100px){ .pillar{ grid-template-columns:1fr; } .pillar-media{ aspect-ratio:16/9; min-height:0; } }

/* Franja del mar con la cita */
.about-band{
  position:relative; padding:clamp(72px,10vw,140px) 0; overflow:hidden;
  background:#0f2233 var(--band-img) center/cover no-repeat;
}
.about-band::before{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(18,17,16,.92) 0%, rgba(18,17,16,.7) 55%, rgba(18,17,16,.35) 100%), linear-gradient(180deg, var(--bg) 0%, transparent 18%, transparent 82%, var(--bg) 100%); }
.about-band .wrap{ position:relative; }
.about-band .about-quote{ margin:0; border-left-color:var(--gold); max-width:34ch; }
.about-band .about-quote p{ font-size:clamp(1.3rem,2.6vw,2rem); line-height:1.35; }
.about-numbers{ padding-top:clamp(32px,4vw,48px); }

/* Respaldo DGM: texto + foto */
.backing{ padding:0; overflow:hidden; align-items:stretch; gap:0; }
.backing-copy{ flex:1 1 55%; display:flex; flex-direction:column; justify-content:center; gap:18px; padding:clamp(22px,3vw,36px); }
.backing-copy img{ width:200px; height:auto; background:#fff; border-radius:10px; padding:10px 14px; }
.backing-media{ flex:1 1 45%; min-height:240px; position:relative; background:#0d1520; }
.backing-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media (max-width:640px){ .backing{ flex-direction:column; } .backing-media{ min-height:200px; } }

/* ============ v27 — ORGANIGRAMA horizontal ============
   Árbol de izquierda a derecha. Las líneas salen de un punto a la derecha de cada
   tarjeta y bajan/suben con esquinas redondeadas hasta sus hijos. */
.ot-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }
.ot-nav{ display:flex; gap:8px; flex:none; }
.ot-btn{ width:44px; height:44px; border-radius:50%; border:1px solid var(--bg-line); background:var(--bg-soft); color:var(--text); display:grid; place-items:center; cursor:pointer; transition:border-color .2s, opacity .2s; }
.ot-btn svg{ width:18px; height:18px; }
.ot-btn:hover{ border-color:var(--gold); }
.ot-btn[disabled]{ opacity:.35; cursor:default; border-color:var(--bg-line); }
.ot-frame{ position:relative; margin-top:clamp(24px,3vw,36px); border:1px solid var(--bg-line); border-radius:20px; background:linear-gradient(180deg, var(--bg-soft), rgba(27,25,22,.4)); }
.ot-frame::before, .ot-frame::after{ content:""; position:absolute; top:0; bottom:0; width:48px; z-index:2; pointer-events:none; opacity:0; transition:opacity .25s; border-radius:20px; }
.ot-frame::before{ left:0; background:linear-gradient(90deg, var(--bg-soft), transparent); }
.ot-frame::after{ right:0; background:linear-gradient(270deg, var(--bg-soft), transparent); }
.ot-frame.can-l::before, .ot-frame.can-r::after{ opacity:1; }
.ot-scroll{ overflow-x:auto; overflow-y:hidden; padding:clamp(24px,3vw,40px); scrollbar-width:thin; scrollbar-color:rgba(201,154,62,.45) transparent; cursor:grab; outline:none; }
.ot-scroll.is-drag{ cursor:grabbing; user-select:none; }
.ot-scroll:focus-visible{ box-shadow:inset 0 0 0 2px var(--gold); border-radius:20px; }
.ot-hint{ display:none; margin:12px 0 0; font-size:12.5px; color:var(--text-soft); }
@media (hover:none){ .ot-hint{ display:block; } }

.otree, .otree ul{ list-style:none; margin:0; padding:0; }
.otree{ display:flex; width:max-content; margin:0 auto; }
.otree li{ position:relative; display:flex; align-items:center; }
.otree ul{ position:relative; display:flex; flex-direction:column; padding-left:22px; }
/* tramo horizontal padre → columna */
.otree ul::before{ content:""; position:absolute; left:0; top:50%; width:22px; border-top:1.5px solid var(--ot-line); }
.otree ul > li{ padding:6px 0 6px 22px; }
/* codo hacia cada hijo */
.otree ul > li::before{ content:""; position:absolute; left:0; width:22px; top:50%; border-top:1.5px solid var(--ot-line); }
.otree ul > li::after{ content:""; position:absolute; left:0; top:0; bottom:0; border-left:1.5px solid var(--ot-line); }
.otree ul > li:first-child::after{ top:50%; border-top-left-radius:12px; border-top:1.5px solid var(--ot-line); width:22px; }
.otree ul > li:first-child::before{ display:none; }
.otree ul > li:last-child::after{ bottom:50%; border-bottom-left-radius:12px; border-bottom:1.5px solid var(--ot-line); width:22px; }
.otree ul > li:last-child::before{ display:none; }
.otree ul > li:only-child::after{ display:none; }
.otree ul > li:only-child::before{ display:block; }
.otree{ --ot-line:rgba(201,154,62,.42); }

.ot-card{
  position:relative; z-index:1; display:flex; align-items:center; gap:10px; width:236px; padding:10px 14px 10px 10px;
  background:#1f1c18; border:1px solid var(--bg-line); border-radius:14px; box-shadow:0 6px 18px rgba(0,0,0,.25);
  transition:border-color .2s, transform .2s;
}
.ot-card:hover{ border-color:rgba(201,154,62,.55); transform:translateY(-1px); }
/* punto de salida hacia los hijos */
.has-kids > .ot-card::after{ content:""; position:absolute; right:-5px; top:50%; width:8px; height:8px; margin-top:-4px; border-radius:50%; background:var(--bg); border:1.5px solid var(--gold); }
.has-kids > .ot-card{ margin-right:0; }
.ot-card.is-top{ border-color:rgba(201,154,62,.6); background:linear-gradient(135deg, #2a2419, #1f1c18); }
.ot-av{ flex:none; width:40px; height:40px; border-radius:50%; background:#2b2722; display:grid; place-items:center; overflow:hidden; }
.ot-av svg{ width:32px; height:32px; fill:rgba(242,234,217,.3); margin-top:8px; }
.ot-txt{ display:flex; flex-direction:column; min-width:0; }
.ot-txt b{ font-size:13.5px; font-weight:700; color:var(--text); line-height:1.3; }
.ot-txt small{ font-size:12px; color:var(--text-soft); margin-top:2px; }
.ot-card.is-pending small{ font-style:italic; }
.ot-unit{
  display:inline-flex; align-items:center; gap:8px; padding:7px 14px 7px 8px; border-radius:999px; white-space:nowrap;
  font-size:12.5px; font-weight:600; color:var(--text-soft); background:rgba(242,234,217,.05); border:1px solid var(--bg-line);
}
.ot-unit::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--gold); margin-left:4px; }
.ot-unit i{ font-style:normal; font-size:11.5px; font-weight:800; color:var(--bg); background:var(--gold); border-radius:999px; min-width:24px; height:24px; display:grid; place-items:center; padding:0 6px; margin-left:-2px; }
.ot-unit:has(i)::before{ display:none; }
a.ot-unit{ color:var(--text); }
a.ot-unit:hover{ border-color:var(--gold); }
@media (max-width:640px){
  .ot-head{ flex-direction:column; align-items:flex-start; }
  .ot-scroll{ padding:16px 14px; }
  .ot-card{ width:150px; gap:8px; padding:8px 10px 8px 8px; border-radius:12px; }
  .ot-av{ width:30px; height:30px; } .ot-av svg{ width:24px; height:24px; margin-top:6px; }
  .ot-txt b{ font-size:12px; } .ot-txt small{ font-size:11px; }
  .otree ul > li{ padding-top:4px; padding-bottom:4px; }
  .ot-unit{ font-size:11.5px; padding:6px 12px 6px 6px; }
  .ot-nav{ align-self:flex-end; margin-top:-8px; }
  .otree ul{ padding-left:18px; }
  .otree ul::before, .otree ul > li::before, .otree ul > li:first-child::after, .otree ul > li:last-child::after{ width:18px; }
  .otree ul > li{ padding-left:18px; }
}

/* v28 — La grilla se despliega hacia abajo al cambiar de marca o categoría */
@keyframes cardIn{ from{ opacity:0; transform:translateY(-10px); } to{ opacity:1; transform:none; } }
.cat-grid.grid-in > *{ animation:cardIn .42s cubic-bezier(.22,.8,.26,1) both; }
.cat-grid.grid-in > :nth-child(2){ animation-delay:28ms; }
.cat-grid.grid-in > :nth-child(3){ animation-delay:56ms; }
.cat-grid.grid-in > :nth-child(4){ animation-delay:84ms; }
.cat-grid.grid-in > :nth-child(5){ animation-delay:112ms; }
.cat-grid.grid-in > :nth-child(6){ animation-delay:140ms; }
.cat-grid.grid-in > :nth-child(7){ animation-delay:168ms; }
.cat-grid.grid-in > :nth-child(8){ animation-delay:196ms; }
.cat-grid.grid-in > :nth-child(9){ animation-delay:224ms; }
.cat-grid.grid-in > :nth-child(10){ animation-delay:252ms; }
.cat-grid.grid-in > :nth-child(11){ animation-delay:280ms; }
.cat-grid.grid-in > :nth-child(12){ animation-delay:308ms; }
.cat-grid.grid-in > :nth-child(n+13){ animation-delay:340ms; }
@media (prefers-reduced-motion:reduce){ .cat-grid.grid-in > *{ animation:none; } }

/* v28 — Nosotros: hero con loop del mar a sangre, mismo oscurecido que Inicio */
.about-hero--video{ min-height:min(88vh, 780px); display:flex; align-items:flex-end; padding:clamp(150px,14vw,190px) 0 clamp(56px,7vw,96px); background:#0c1418; isolation:isolate; }
.about-hero--video::before{ display:none; }
.about-hero--video video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.about-hero--video .hero-scrim{ z-index:1; }
.about-hero-side{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(18,17,16,.78) 0%, rgba(18,17,16,.45) 38%, rgba(18,17,16,0) 68%); }
.about-hero--video .about-hero-copy{ position:relative; z-index:2; width:100%; }
.about-hero--video h1{ max-width:15ch; }
.about-hero--video .lead{ color:rgba(242,234,217,.82); }
.about-hero--video .about-hero-badge{ position:static; display:inline-flex; align-items:center; gap:12px; margin:30px 0 0; padding:0; background:none; border:0; box-shadow:none; backdrop-filter:none; }
@media (max-width:760px){
  .about-hero--video{ min-height:82vh; padding:150px 0 48px; }
  .about-hero-side{ background:linear-gradient(0deg, rgba(18,17,16,.7) 0%, rgba(18,17,16,.25) 60%, rgba(18,17,16,0) 100%); }
}
/* El respaldo: sin foto, logo y texto en una sola fila */
.backing-copy{ flex-direction:row; align-items:center; gap:clamp(20px,3vw,40px); }
.backing-copy p{ max-width:72ch; }
@media (max-width:640px){ .backing-copy{ flex-direction:column; align-items:flex-start; } }

/* v29 — Aliados: tarjetas cuadradas. El logo flota sobre su propio color, se
   acerca y se aleja muy lento, y la tarjeta se funde con el fondo oscuro por
   debajo, donde van el nombre y la zona. */
.ally-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(12px,1.6vw,20px); margin-top:clamp(24px,3vw,36px); }
.ally-card{ position:relative; min-width:0; aspect-ratio:1/1; border-radius:20px; overflow:hidden; isolation:isolate;
  background:var(--ally-bg, #fff); box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 24px 40px -28px rgba(0,0,0,.9);
  transition:transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s; }
.ally-card:hover{ transform:translateY(-4px); box-shadow:0 0 0 1px rgba(201,154,62,.5), 0 30px 50px -28px rgba(0,0,0,.95); }
.ally-logo{ position:absolute; left:0; right:0; top:4%; height:62%; display:flex; align-items:center; justify-content:center; z-index:0; }
.ally-logo img{ width:100%; height:auto; aspect-ratio:2/1; object-fit:contain;
  animation:allyBreath 18s ease-in-out infinite alternate; animation-delay:var(--d, 0s); will-change:transform; }
@keyframes allyBreath{ from{ transform:scale(.94); } to{ transform:scale(1.06); } }
@media (prefers-reduced-motion:reduce){ .ally-logo img{ animation:none; } }
.ally-card::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(18,17,16,0) 46%, rgba(18,17,16,.55) 64%, rgba(18,17,16,.92) 82%, var(--bg) 100%); }
.ally-meta{ position:absolute; left:0; right:0; bottom:0; z-index:2; display:flex; flex-direction:column; gap:4px; padding:0 clamp(14px,1.8vw,22px) clamp(14px,1.8vw,20px); }
.ally-title{ margin:0; font-family:'Fraunces', serif; font-size:clamp(1.05rem,1.6vw,1.35rem); font-weight:600; line-height:1.15; color:var(--text); overflow-wrap:break-word; }
.ally-region{ font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); }
.ally-logo.no-logo{ top:0; height:70%; }
.ally-name{ font-family:'Fraunces', serif; font-weight:600; font-size:1.3rem; color:var(--ink); text-align:center; padding:0 12%; }
/* Móvil: carrusel horizontal con imán, así cada tarjeta conserva tamaño y protagonismo */
@media (max-width:640px){
  .ally-grid{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
    margin-left:calc(-1 * var(--pad)); margin-right:calc(-1 * var(--pad)); padding:4px var(--pad) 8px; scroll-padding:0 var(--pad); }
  .ally-grid::-webkit-scrollbar{ display:none; }
  .ally-card{ flex:0 0 58%; scroll-snap-align:start; border-radius:18px; }
  .ally-card:hover{ transform:none; }
}

/* ============ v29 — FOOTER: orden por áreas ============
   Escritorio: marca / enlaces / dirección a la izquierda, formulario a la derecha.
   Móvil: marca → formulario → enlaces → dirección. */
.footer-cta{ grid-template-columns:1fr 1.15fr; grid-template-areas:"brand form" "links form" "addr form"; row-gap:0; }
.footer-brand{ grid-area:brand; }
.footer-form{ grid-area:form; }
.footer-links{ grid-area:links; }
.footer-address{ grid-area:addr; align-self:start; }
.footer-social{ display:inline-flex; align-items:center; gap:8px; margin-top:16px; font-size:13.5px; font-weight:600; color:var(--text-soft); transition:color .15s; }
.footer-social svg{ width:18px; height:18px; color:var(--gold); }
.footer-social:hover{ color:var(--text); }
.fcol-btn{ all:unset; display:flex; align-items:center; gap:6px; font:inherit; letter-spacing:inherit; text-transform:inherit; color:inherit; cursor:default; }
.fcol-chev{ display:none; flex:none; width:14px; height:14px; transition:transform .3s ease; }
.fcol-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:6px; }
.footer-links .footer-col{ min-width:0; }
.footer-links .footer-col a{ overflow-wrap:break-word; }
@media (min-width:641px){ .footer-cta{ grid-template-columns:1.15fr 1fr; } .footer-links{ grid-template-columns:minmax(0,1fr) minmax(0,.8fr) minmax(0,1.25fr); gap:20px; } }
@media (max-width:1023px){
  .footer-cta{ grid-template-columns:1fr !important; grid-template-areas:"brand" "form" "links" "addr"; row-gap:clamp(28px,6vw,40px); }
}
@media (max-width:640px){
  /* Tres pestañas en fila; al tocar una se despliega su lista debajo (una a la vez) */
  .footer-links{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; margin-top:0; }
  .footer-links .footer-col{ display:contents; }
  .footer-links .footer-col h4{ grid-row:1; margin:0; }
  .fcol-btn{ box-sizing:border-box; width:100%; justify-content:center; gap:4px; padding:12px 4px; font-size:10.5px; letter-spacing:.05em; white-space:nowrap; border:1px solid var(--bg-line); border-radius:12px; cursor:pointer; background:rgba(242,234,217,.03); transition:border-color .2s, background-color .2s; }
  .fcol-chev{ display:block; }
  .fcol-btn[aria-expanded="true"]{ border-color:rgba(201,154,62,.6); background:rgba(201,154,62,.08); }
  .fcol-btn[aria-expanded="true"] .fcol-chev{ transform:rotate(180deg); }
  .fcol-list{ grid-row:2; grid-column:1 / -1; display:none; padding:14px 4px 2px; }
  .footer-col.is-open .fcol-list{ display:block; animation:fcolIn .3s ease both; }
  .footer-links .footer-col .fcol-list a, .footer-links .footer-col .fcol-list p{ font-size:14.5px; margin-bottom:12px; }
  .footer-address{ margin-top:0; }
}
@keyframes fcolIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

/* Topbar con dos correos e Instagram: se aligera según el ancho */
.topbar-ig{ padding:2px; }
.topbar-ig svg{ width:15px !important; height:15px !important; }
@media (max-width:1180px){ .topbar-left span:nth-child(2){ display:none; } }
@media (max-width:900px){ .topbar-mail2{ display:none !important; } }

/* Hero de Nosotros: el video va atenuado para que acompañe y no compita con el texto */
.about-hero--video video{ filter:brightness(.68) saturate(.8); }

/* ============ v30 — RECETAS ============ */
/* Índice */
.recipes{ padding-top:clamp(24px,3vw,40px); }
.rc-filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(20px,2.6vw,30px); }
.rc-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(16px,2vw,26px); }
.rc-card{ display:flex; flex-direction:column; min-width:0; border-radius:20px; overflow:hidden; background:var(--bg-soft); border:1px solid var(--bg-line);
  transition:transform .45s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .45s; }
.rc-card:hover{ transform:translateY(-4px); border-color:rgba(201,154,62,.5); box-shadow:0 30px 50px -30px rgba(0,0,0,.9); }
.rc-card[hidden]{ display:none; }
.rc-media{ position:relative; aspect-ratio:4/5; overflow:hidden; background:#1a1714; }
.rc-media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.2,.7,.2,1); }
.rc-card:hover .rc-media img{ transform:scale(1.04); }
.rc-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(18,17,16,0) 55%, rgba(18,17,16,.85) 100%); }
.rc-play{ position:absolute; left:14px; bottom:14px; z-index:1; display:inline-flex; align-items:center; gap:8px; padding:7px 12px 7px 8px; border-radius:999px;
  background:rgba(18,17,16,.62); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:#f2ead9; font-size:12.5px; font-weight:700; border:1px solid rgba(255,255,255,.14); }
.rc-play svg{ width:22px; height:22px; padding:5px; border-radius:50%; background:var(--rust); color:#fff; }
.rc-body{ display:flex; flex-direction:column; gap:8px; padding:18px 18px 20px; }
.rc-type{ font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); }
.rc-body h2, .rc-body h3{ margin:0; font-family:'Fraunces', serif; font-weight:600; font-size:clamp(1.15rem,1.6vw,1.4rem); line-height:1.2; color:var(--text); }
.rc-body p{ margin:0; font-size:14px; line-height:1.55; color:var(--text-soft); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.rc-pills{ list-style:none; margin:6px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.rc-pills li{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px 3px 3px; border-radius:999px; background:var(--paper, #fff); color:var(--ink, #1d1a16); font-size:12px; font-weight:700; max-width:100%; }
.rc-pills img{ width:24px; height:24px; border-radius:50%; object-fit:contain; background:#fff; }
.rc-pills span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:900px){ .rc-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px){ .rc-grid{ grid-template-columns:1fr; } .rc-media{ aspect-ratio:5/4; } }

/* Tarjeta de la autora + cierre hacia Instagram */
.rc-author{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:clamp(28px,4vw,48px); padding:clamp(16px,2vw,22px);
  border-radius:18px; background:linear-gradient(135deg, rgba(201,154,62,.12), rgba(201,154,62,.03)); border:1px solid rgba(201,154,62,.28); }
.rc-author-av{ flex:none; width:64px; height:64px; border-radius:50%; overflow:hidden; display:grid; place-items:center; background:#2a2419; border:1.5px solid var(--gold); }
.rc-author-av img{ width:100%; height:100%; object-fit:cover; }
.rc-author-av span{ font-family:'Fraunces', serif; font-size:22px; font-weight:600; color:var(--gold); }
.rc-author-txt{ display:flex; flex-direction:column; gap:2px; flex:1 1 180px; min-width:0; }
.rc-author-kicker{ font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--text-soft); }
.rc-author-txt b{ font-family:'Fraunces', serif; font-size:1.25rem; font-weight:600; color:var(--text); }
.rc-author-txt small{ font-size:13px; color:var(--text-soft); }
.rc-ig svg, .rc-share svg{ width:18px; height:18px; }
@media (max-width:560px){ .rc-author .btn{ width:100%; justify-content:center; } }

/* Página de receta */
.rp{ padding:clamp(136px,11vw,150px) 0 clamp(36px,5vw,64px); }
.rp-grid{ display:grid; grid-template-columns:minmax(0, 400px) minmax(0, 1fr); gap:clamp(28px,4.5vw,64px); margin-top:clamp(18px,2.4vw,28px); align-items:start; }
.rp-media{ position:sticky; top:calc(var(--hdr-h, 74px) + 20px); display:flex; flex-direction:column; gap:12px; }
.rp-player{ position:relative; aspect-ratio:9/16; max-height:calc(100vh - var(--hdr-h, 74px) - 90px); margin:0 auto; width:100%; border-radius:22px; overflow:hidden; background:#000;
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 40px 70px -40px rgba(0,0,0,.95); }
.rp-player img, .rp-player video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.rp-player video{ object-fit:contain; background:#000; }
.rp-play{ position:absolute; left:50%; top:50%; width:76px; height:76px; margin:-38px 0 0 -38px; border:0; border-radius:50%; cursor:pointer;
  background:var(--rust); color:#fff; display:grid; place-items:center; box-shadow:0 0 0 10px rgba(194,65,28,.25); transition:transform .25s, box-shadow .25s; }
.rp-play svg{ width:30px; height:30px; margin-left:4px; }
.rp-play:hover{ transform:scale(1.06); box-shadow:0 0 0 14px rgba(194,65,28,.22); }
.rp-play:focus-visible{ outline:3px solid var(--gold); outline-offset:4px; }
.rp-dur{ position:absolute; right:12px; bottom:12px; padding:4px 9px; border-radius:999px; background:rgba(18,17,16,.7); color:#f2ead9; font-size:12px; font-weight:700; }
.rp-player.is-playing .rp-play, .rp-player.is-playing .rp-dur, .rp-player.is-playing > img{ display:none; }
.rp-iglink{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--text-soft); transition:color .15s; }
.rp-iglink svg{ width:18px; height:18px; color:var(--gold); }
.rp-iglink:hover{ color:var(--text); }
.rp-body h1{ font-size:clamp(2rem,3.6vw,3rem); line-height:1.08; margin:16px 0 0; }
.rp-byline{ margin:12px 0 0; font-size:14px; color:var(--text-soft); }
.rp-byline b{ color:var(--gold); font-weight:700; }
.rp-lead{ margin:16px 0 0; font-size:17px; line-height:1.65; color:var(--text); max-width:60ch; }
.rp-meta{ list-style:none; margin:22px 0 0; padding:14px 0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); border-top:1px solid var(--bg-line); border-bottom:1px solid var(--bg-line); }
.rp-meta li{ display:flex; flex-direction:column; gap:2px; padding:0 12px; border-left:1px solid var(--bg-line); }
.rp-meta li:first-child{ border-left:0; padding-left:0; }
.rp-meta b{ font-family:'Fraunces', serif; font-size:1.25rem; font-weight:600; color:var(--text); }
.rp-meta span{ font-size:11.5px; color:var(--text-soft); text-transform:uppercase; letter-spacing:.06em; font-weight:700; }
.rp-block{ margin-top:clamp(28px,3.4vw,40px); }
.rp-block h2{ font-family:'Fraunces', serif; font-weight:600; font-size:clamp(1.3rem,2vw,1.6rem); margin:0 0 14px; color:var(--text); }
.rp-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.rp-progress{ font-size:12.5px; color:var(--text-soft); }
.rp-progress.is-done{ color:var(--gold); font-weight:700; }
/* Productos PAFIA: tarjetas claras que llevan a la ficha */
.rp-prods{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:10px; }
.rp-prod{ display:flex; align-items:center; gap:12px; padding:10px 14px 10px 10px; border-radius:16px; background:var(--paper, #fff); color:var(--ink, #1d1a16);
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s; }
.rp-prod:hover{ transform:translateY(-2px); box-shadow:0 0 0 2px var(--gold); }
.rp-prod-img{ flex:none; width:60px; height:60px; border-radius:50%; background:#f4efe6; display:grid; place-items:center; overflow:hidden; }
.rp-prod-img img{ width:86%; height:86%; object-fit:contain; }
.rp-prod-txt{ display:flex; flex-direction:column; min-width:0; }
.rp-prod-txt small{ font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-ink, #94701f); }
.rp-prod-txt b{ font-size:14.5px; line-height:1.25; }
.rp-prod-txt i{ font-style:normal; font-size:12.5px; font-weight:700; color:var(--ink-soft, #6b6358); margin-top:3px; }
/* Ingredientes y pasos: se marcan al tocarlos */
.rp-ings, .rp-steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.rp-ings li, .rp-steps li{ display:flex; align-items:center; gap:8px; }
.rp-check, .rp-step{ all:unset; box-sizing:border-box; flex:1; display:flex; align-items:flex-start; gap:12px; padding:11px 14px; border-radius:12px; cursor:pointer;
  background:rgba(242,234,217,.03); border:1px solid var(--bg-line); transition:background-color .2s, border-color .2s; }
.rp-check:hover, .rp-step:hover{ border-color:rgba(201,154,62,.45); }
.rp-check:focus-visible, .rp-step:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.rp-box{ flex:none; width:22px; height:22px; border-radius:7px; border:1.5px solid rgba(242,234,217,.35); display:grid; place-items:center; margin-top:1px; transition:background-color .2s, border-color .2s; }
.rp-box svg{ width:14px; height:14px; color:var(--bg); opacity:0; transform:scale(.6); transition:opacity .2s, transform .2s; }
.rp-txt{ font-size:15px; line-height:1.5; color:var(--text); transition:color .2s, opacity .2s; }
.rp-check[aria-pressed="true"], .rp-step[aria-pressed="true"]{ background:rgba(201,154,62,.08); border-color:rgba(201,154,62,.35); }
.rp-check[aria-pressed="true"] .rp-box{ background:var(--gold); border-color:var(--gold); }
.rp-check[aria-pressed="true"] .rp-box svg{ opacity:1; transform:none; }
.rp-check[aria-pressed="true"] .rp-txt, .rp-step[aria-pressed="true"] .rp-txt{ color:var(--text-soft); text-decoration:line-through; text-decoration-color:rgba(201,154,62,.6); }
.rp-tag{ flex:none; padding:5px 10px; border-radius:999px; font-size:11px; font-weight:800; letter-spacing:.06em; color:var(--bg); background:var(--gold); transition:filter .2s; }
.rp-tag:hover{ filter:brightness(1.12); }
.rp-n{ flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-family:'Fraunces', serif; font-weight:600; font-size:14px;
  color:var(--gold); border:1.5px solid rgba(201,154,62,.55); transition:background-color .2s, color .2s; }
.rp-step[aria-pressed="true"] .rp-n{ background:var(--gold); color:var(--bg); }
.rp-close{ margin:clamp(28px,3.4vw,40px) 0 0; font-family:'Fraunces', serif; font-style:italic; font-size:clamp(1.2rem,2vw,1.5rem); line-height:1.35; color:var(--text); }
.rp-more{ padding-top:0; }
.rc-grid--sm .rc-body p{ -webkit-line-clamp:2; }
@media (max-width:900px){
  .rp-grid{ grid-template-columns:1fr; }
  .rp-media{ position:static; }
  .rp-player{ max-width:min(100%, 380px); max-height:none; }
}
@media (max-width:560px){ .rp-meta{ grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:12px; } .rp-meta li:nth-child(3){ border-left:0; padding-left:0; } }

/* Ficha de producto: recetas que lo usan */
.pdp-recipes{ padding-top:0; }
.pdp-rec-list{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:12px; }
.pdp-rec{ display:flex; align-items:center; gap:14px; padding:10px; border-radius:16px; background:var(--bg-soft); border:1px solid var(--bg-line); transition:border-color .2s; }
.pdp-rec:hover{ border-color:rgba(201,154,62,.5); }
.pdp-rec img{ width:72px; height:90px; border-radius:10px; object-fit:cover; flex:none; }
.pdp-rec span{ display:flex; flex-direction:column; gap:3px; }
.pdp-rec small{ font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); }
.pdp-rec b{ font-family:'Fraunces', serif; font-weight:600; font-size:1.05rem; color:var(--text); }
.pdp-rec i{ font-style:normal; font-size:12.5px; font-weight:700; color:var(--text-soft); }

/* v31 — Inicio · "A quién servimos": foto propia; si aún no está en el servidor, queda el aviso */
.who-media{ position:relative; aspect-ratio:3/4; border-radius:18px; overflow:hidden; }
.who-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.who-media .ph{ position:absolute; inset:0; aspect-ratio:auto; }

/* v32 — Marcas en escritorio: al pasar el cursor por las burbujas aparece la manita;
   se recorren arrastrando o con la rueda del mouse. Los bordes se desvanecen si hay más marcas. */
.bt-wrap{ position:relative; }
.bt-wrap::before, .bt-wrap::after{ content:""; position:absolute; bottom:0; height:calc(var(--pill-h, 54px) + 18px); width:64px; z-index:3; pointer-events:none; opacity:0; transition:opacity .25s; }
.bt-wrap::before{ left:0; background:linear-gradient(90deg, var(--bg) 20%, rgba(18,17,16,0)); }
.bt-wrap::after{ right:0; background:linear-gradient(270deg, var(--bg) 20%, rgba(18,17,16,0)); }
.bt-wrap.can-l::before, .bt-wrap.can-r::after{ opacity:1; }
@media (hover:hover) and (pointer:fine){
  .brand-tabs{ cursor:grab; }
  .brand-tabs .btab{ cursor:grab; }
  .brand-tabs.is-drag, .brand-tabs.is-drag .btab{ cursor:grabbing; user-select:none; }
  .brand-tabs.is-drag .btab{ pointer-events:none; }
}
/* v32b — Móvil/táctil: sin desvanecidos en los bordes de la fila de marcas
   (se veían como bloques oscuros sobre las burbujas); ahí basta el deslizamiento con el dedo. */
@media (hover:none), (max-width:760px){ .bt-wrap::before, .bt-wrap::after{ display:none; } }

/* ============ v32c — Nosotros: ajustes finos ============ */
/* 1. Móvil · Quiénes somos: etiqueta → imagen → título → texto */
@media (max-width:860px){
  .about-split{ gap:0; }
  .about-split .block-head{ display:contents; }
  .about-split .block-head .eyebrow{ order:1; justify-self:start; margin-bottom:18px; }
  .about-split-media{ order:2; margin-bottom:24px; }
  .about-split .block-head h2{ order:3; margin-top:0; }
  .about-split .block-head p{ order:4; }
  .about-split .block-head h2 + p{ margin-top:14px; }
}
/* 2. Directorio de aliados: flecha del selector con aire y margen derecho en la lista */
.ally-form select{ -webkit-appearance:none; appearance:none; padding-right:44px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c99a3e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; background-size:16px; }
.ally-form input{ padding-right:16px; }
.ally-list{ scrollbar-gutter:stable; padding-right:6px; }
.ally-list li{ padding:0 18px 0 4px; }
/* 3. Organigrama: botón de ejecutivos con número en círculo perfecto y mismo ancho que el de arriba */
.otree li.leaf > .ot-unit{ flex:1 1 auto; }
.ot-unit:has(i){ gap:10px; padding:6px 18px 6px 6px; }
.ot-unit i{ flex:none; width:30px; height:30px; min-width:0; padding:0; margin:0; border-radius:50%; font-size:12px; line-height:1; }

/* v33b — Cobertura (escritorio): el panel de ejecutivos mide exactamente lo mismo que el mapa.
   contain:size hace que el mapa defina el alto de la fila; el panel se estira a ese alto
   y la lista usa su propio scroll interno. Nunca sobrepasa al mapa. */
@media (min-width:1024px){
  .coverage-grid{ align-items:stretch; }
  .team-panel{ position:relative; top:auto; contain:size; display:flex; flex-direction:column; min-height:0; overflow-y:auto; }
  .team-panel > div:not([hidden]){ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
  .team-panel-head{ flex:none; }
  .team-panel-list{ flex:1 1 auto; min-height:0; max-height:none; overflow-y:auto; align-content:start; padding-right:6px; }
}

/* v33c — Cobertura: tarjetas de ejecutivos "flotantes" (sin el recuadro que las agrupaba).
   Escritorio: mismo alto que el mapa, scroll interno.
   Tablet/móvil: la lista muestra 4 tarjetas y media (3 filas y media en tablet) y el resto se
   recorre dentro; la media tarjeta asoma para indicar que hay más. */
.team-panel{ background:transparent; border:0; padding:0; border-radius:0; }
.team-panel-head{ padding:0 2px 14px; }
.rep-card{ background:var(--bg-soft); }
.team-panel-list{
  --row:80px;                     /* 70px de tarjeta + 10px de separación */
  overscroll-behavior-y:auto; padding-bottom:26px;
  -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 34px), transparent);
          mask-image:linear-gradient(to bottom, #000 calc(100% - 34px), transparent);
}
@media (max-width:1023px){
  .team-panel{ margin-top:6px; }
  .team-panel-list{ max-height:calc(var(--row) * 4.5); overflow-y:auto; padding-right:4px; }
}
@media (min-width:640px) and (max-width:1023px){
  .team-panel-list{ max-height:calc(var(--row) * 3.5); }
}

/* ============ v34 · TICKER Y MENÚ DEL CONCURSO "GANA CON PAFIA" ============ */
/* Franja fija sobre el header. Mientras exista, el header baja su altura.
   Al cerrar el concurso, main.js la retira y todo vuelve a su lugar. */
.promo-ticker{ position:fixed; top:0; left:0; right:0; z-index:101; height:30px; display:flex; align-items:center; overflow:hidden;
  background:linear-gradient(90deg, var(--rust-2), var(--rust) 50%, var(--rust-2)); color:#fff; text-decoration:none;
  font-size:12.5px; letter-spacing:.02em; box-shadow:0 1px 0 rgba(0,0,0,.25); }
.tk-track{ display:flex; width:max-content; animation:tkMove 46s linear infinite; }
.tk-run{ display:flex; align-items:center; flex:none; }
.tk-item{ white-space:nowrap; padding:0 14px; }
.tk-item b{ font-weight:800; letter-spacing:.08em; color:#ffe4a8; }
.tk-sep{ color:#ffe4a8; font-size:10px; opacity:.85; }
.tk-cta{ font-weight:800; text-decoration:underline; text-underline-offset:3px; }
.promo-ticker:hover .tk-track, .promo-ticker:focus-visible .tk-track{ animation-play-state:paused; }
.promo-ticker:focus-visible{ outline:2px solid #ffe4a8; outline-offset:-3px; }
@keyframes tkMove{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .tk-track{ animation:none; } }
body:has(.promo-ticker) .site-header{ top:30px; }
body:has(.promo-ticker) [id]{ scroll-margin-top:170px; }
html:has(.promo-ticker){ scroll-padding-top:170px; }
/* Enlace "Concurso" del menú */
.nav-links a.nav-promo{ color:#ffe4a8; }
.nav-links a.nav-promo::before{ content:"✦"; font-size:10px; margin-right:6px; color:var(--gold); }
.drawer-nav a.nav-promo{ color:var(--gold); }
.drawer-nav a.nav-promo small{ display:block; font-size:11px; letter-spacing:.12em; color:var(--hdr-text-soft, rgba(242,234,217,.7)); font-weight:700; }
/* Con la franja del concurso, todo lo que estaba calculado debajo del header baja 30px */
body:has(.promo-ticker) .page-hero{ padding-top:clamp(170px,calc(14vw + 30px),210px); }
body:has(.promo-ticker) .cat-hero{ padding-top:clamp(180px,calc(16vw + 30px),230px); }
body:has(.promo-ticker) .cat-hero--compact{ padding-top:clamp(158px,calc(12vw + 30px),186px); }
body:has(.promo-ticker) .about-hero{ padding-top:clamp(158px,calc(12vw + 30px),194px); }
body:has(.promo-ticker) .about-hero--video{ padding-top:clamp(180px,calc(14vw + 30px),220px); }
@media (max-width:860px){ body:has(.promo-ticker) .about-hero{ padding-top:166px; } }
@media (max-width:760px){
  body:has(.promo-ticker) .cat-hero--compact{ padding-top:166px; }
  body:has(.promo-ticker) .about-hero--video{ padding-top:180px; }
}
@media (max-width:700px){ body:has(.promo-ticker){ --hero-aire:216px; } }
@media (max-width:480px){ body:has(.promo-ticker){ --hero-aire:194px; } }
@media (max-width:560px){ .promo-ticker{ font-size:12px; } .tk-item{ padding:0 11px; } }
body:has(.promo-ticker) .pdp{ padding-top:clamp(184px,calc(11vw + 40px),198px); }