/* ============================================================
   GRUPO ACB — HOJA COMPARTIDA
   Usada por todas las páginas nuevas (no por index.html, que se
   queda con su copia en línea intacta para no arriesgar nada de
   lo ya afinado ahí). Tokens, navbar, footer, botones, overlay de
   búsqueda y patrones de tipografía extraídos 1:1 de index.html.
   ============================================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html.lenis,html.lenis body{height:auto}
:root{
  --font-body:'Open Sans',system-ui,sans-serif;
  --font-display:'Bebas Neue',sans-serif;
  --surface:#15110d;
  --surface-2:#1c1714;
  --surface-3:#231e1a;
  --surface-light:#fdf6ee;
  --surface-light-2:#f5ede3;
  --accent:#4c3832;
  --accent-hover:#bba39e;
  --accent-gradient:linear-gradient(120deg,#4c3832,#bba39e);
  --accent-soft:rgba(76,56,50,0.15);
  --text:#fdf6ee;
  --text-soft:rgba(253,246,238,0.7);
  --text-muted:rgba(253,246,238,0.55);
  --text-dark:#15110d;
  --text-dark-soft:rgba(21,17,13,0.65);
  --border:rgba(255,255,255,0.06);
  --border-light:rgba(0,0,0,0.08);
  --dur:0.4s;
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-in-out:cubic-bezier(0.65,0,0.35,1);
  --nav-h:72px;
}
html{
  font-family:var(--font-body);
  /* Negro puro siempre en estas páginas internas — la home ya lo hace
     así con su propio bloque "FONDO NEGRO GLOBAL"; esto lo iguala aquí. */
  background:#000;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  scroll-behavior:smooth;
}
body{overflow-x:clip}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
.skip-link{
  position:absolute;left:-999px;top:0;z-index:99999;
  background:#fdf6ee;color:#100d0a;padding:12px 20px;border-radius:0 0 8px 0;
}
.skip-link:focus{left:0}

/* Panel de transición al navegar entre páginas — ver page-transition.js.
   Empieza siempre invisible/sin bloquear: si JS falla, nunca se queda
   una pantalla negra atascada. */
.page-transition{
  position:fixed;inset:0;z-index:100000;
  background:#000;
  opacity:0;
  pointer-events:none;
}

/* ============================================================
   ETIQUETAS DE SECCIÓN — mismo patrón que index.html: label chico
   en mayúsculas + título grande con énfasis en degradado.
   ============================================================ */
.section-label{
  font-size:0.78rem;font-weight:700;
  letter-spacing:0.2em;text-transform:uppercase;
  color:#fdf6ee;margin-bottom:1rem;
}
.section-title{
  font-family:var(--font-display);
  font-size:clamp(2.4rem,5.5vw,4.6rem);
  font-weight:500;line-height:1.05;letter-spacing:-0.02em;
  color:var(--text);
}
.section-title em{
  font-style:normal;
  background:var(--accent-gradient);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}

/* ============================================================
   BOTONES
   ============================================================ */
.btn-primary{
  display:inline-flex;align-items:center;gap:0.6rem;
  padding:0.95rem 2.5rem;
  background:#fdf6ee;color:#100d0a;
  font-size:0.85rem;font-weight:600;
  letter-spacing:0.01em;
  border-radius:999px;
  transition:all var(--dur) var(--ease-out);
  min-height:52px;
}
.btn-primary:hover{opacity:0.85;transform:translateY(-2px)}
.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;
  padding:1rem 2rem;
  border-radius:999px;
  border:1px solid var(--border);
  font-size:0.85rem;font-weight:500;
  letter-spacing:0.01em;
  color:var(--text-soft);
  transition:all var(--dur) var(--ease-out);
}
.btn-ghost:hover{border-color:rgba(255,255,255,0.3);color:var(--text);background:rgba(255,255,255,0.06)}

/* ============================================================
   01 — NAVBAR
   ============================================================ */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:10001;
  display:flex;align-items:center;justify-content:space-between;
  width:100%;
  padding:clamp(18px,2.4vh,30px) clamp(20px,4vw,52px);
  background:transparent;
  pointer-events:none;
  transition:padding 0.55s var(--ease-out);
}
.navbar > *{pointer-events:auto}
.navbar.scrolled{padding-top:clamp(12px,1.6vh,18px);padding-bottom:clamp(12px,1.6vh,18px)}

.nav-logo{position:relative;display:flex;align-items:center;flex-shrink:0;z-index:2}
.nav-logo img{height:42px;width:auto;display:block;transition:height 0.5s var(--ease-out),opacity 0.35s}
.navbar.scrolled .nav-logo img{height:34px}
.nav-logo:hover img{opacity:0.78}
.nav-logo-img--dark{position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:0}
.navbar.on-light .nav-logo-img--light{opacity:0}
.navbar.on-light .nav-logo-img--dark{opacity:1}
.navbar.on-light .nav-logo:hover .nav-logo-img--dark{opacity:0.78}

.nav-tabs{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:2px;padding:5px;list-style:none;
  border-radius:999px;
  background:rgba(255,255,255,0.055);
  backdrop-filter:blur(22px) saturate(1.7);-webkit-backdrop-filter:blur(22px) saturate(1.7);
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.16),inset 0 -1px 0 rgba(0,0,0,0.18),0 8px 32px rgba(0,0,0,0.32);
  transition:background 0.5s var(--ease-out),border-color 0.5s var(--ease-out);
}
.navbar.scrolled .nav-tabs{background:rgba(255,255,255,0.075);border-color:rgba(255,255,255,0.14)}
.nav-tabs::before{
  content:'';position:absolute;top:5px;bottom:5px;left:var(--tab-x,5px);width:var(--tab-w,0px);
  border-radius:999px;background:#fdf6ee;box-shadow:0 2px 12px rgba(0,0,0,0.28);
  transition:left 0.52s var(--ease-out),width 0.52s var(--ease-out),opacity 0.35s;
  opacity:var(--tab-o,0);z-index:0;
}
.nav-tabs li{display:flex}
/* Combinador directo (> li >) a propósito: así estas reglas solo
   alcanzan a los tabs de primer nivel y nunca a los links de dentro
   de .nav-dropdown-panel, que viven más anidados dentro del mismo li. */
.nav-tabs>li>a{
  position:relative;z-index:1;display:flex;align-items:center;
  padding:0 clamp(13px,1.5vw,22px);height:38px;
  font-size:0.79rem;font-weight:500;letter-spacing:0.015em;
  color:rgba(253,246,238,0.62);white-space:nowrap;border-radius:999px;
  transition:color 0.42s var(--ease-out);
}
.nav-tabs>li>a:hover{color:#100d0a}
.nav-tabs>li>a.active{color:#100d0a;font-weight:600}
.nav-tabs>li>a.active:hover{color:#100d0a}
.nav-tabs:hover>li>a.active:not(:hover){color:rgba(253,246,238,0.62)}

.nav-right-group{display:flex;align-items:center;gap:10px;flex-shrink:0;z-index:2}
.nav-search{
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;color:rgba(253,246,238,0.7);
  background:rgba(255,255,255,0.055);
  backdrop-filter:blur(22px) saturate(1.7);-webkit-backdrop-filter:blur(22px) saturate(1.7);
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.14);
  cursor:pointer;transition:all 0.42s var(--ease-out);
}
.nav-search:hover{background:rgba(255,255,255,0.12);color:#fdf6ee;border-color:rgba(255,255,255,0.2)}
.nav-search svg{width:15px;height:15px}

.nav-cta a{
  display:inline-flex;align-items:center;gap:12px;height:44px;padding:0 6px 0 22px;
  border-radius:999px;background:#fdf6ee;color:#100d0a;
  font-size:0.79rem;font-weight:600;letter-spacing:0.01em;white-space:nowrap;
  box-shadow:0 6px 24px rgba(0,0,0,0.3);transition:all 0.42s var(--ease-out);
}
.nav-cta a:hover{opacity:0.85}
.nav-cta .cta-dot{
  width:32px;height:32px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:#100d0a;color:#fdf6ee;
}
.nav-cta .cta-dot svg{width:13px;height:13px}

.nav-hamburger{
  display:none;width:44px;height:44px;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  border-radius:50%;background:rgba(255,255,255,0.055);
  backdrop-filter:blur(22px) saturate(1.7);-webkit-backdrop-filter:blur(22px) saturate(1.7);
  border:1px solid rgba(255,255,255,0.10);
  cursor:pointer;position:relative;z-index:10005;padding:0;
}
.nav-hamburger span{display:block;width:17px;height:1.5px;background:#fdf6ee;border-radius:2px;transition:all 0.35s var(--ease-out);transform-origin:center}
.nav-hamburger.active span:nth-child(1){transform:translateY(3.25px) rotate(45deg)}
.nav-hamburger.active span:nth-child(2){opacity:0}
.nav-hamburger.active span:nth-child(3){transform:translateY(-3.25px) rotate(-45deg)}

/* ── Estado del navbar según lo que tenga detrás ──
   Por defecto (sin .on-light) asume fondo oscuro: pastilla de vidrio
   CLARO (blanco translúcido) con texto crema — así se lee bien sobre
   video/foto oscuros, que es el fondo de casi todo el sitio.
   .on-light es la excepción (una sección con fondo blanco/claro
   detrás, como "Equipo directivo" en quienes-somos.html): ahí el
   vidrio claro se volvería invisible, así que el navbar se invierte
   por completo — misma pastilla, pero sólida y oscura con texto
   claro — no un simple tinte, para que siga leyéndose igual de bien
   que en su estado normal. Cualquier pieza nueva del navbar debe
   definir explícitamente su versión .on-light aquí mismo. */
.navbar.on-light .nav-tabs{
  background:rgba(21,17,13,0.82);border-color:rgba(255,255,255,0.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),inset 0 -1px 0 rgba(0,0,0,0.25),0 8px 28px rgba(21,17,13,0.28);
}
.navbar.on-light.scrolled .nav-tabs{background:rgba(21,17,13,0.9);border-color:rgba(255,255,255,0.16)}
.navbar.on-light .nav-tabs>li>a{color:rgba(253,246,238,0.65)}
.navbar.on-light .nav-tabs>li>a:hover,
.navbar.on-light .nav-tabs>li>a.active,
.navbar.on-light .nav-tabs>li>a.active:hover{color:#100d0a}
.navbar.on-light .nav-tabs:hover>li>a.active:not(:hover){color:rgba(253,246,238,0.65)}
.navbar.on-light .nav-search{color:rgba(253,246,238,0.75);background:rgba(21,17,13,0.82);border-color:rgba(255,255,255,0.12)}
.navbar.on-light .nav-search:hover{background:rgba(21,17,13,0.92);color:#fdf6ee;border-color:rgba(255,255,255,0.2)}
.navbar.on-light .nav-cta a{background:#15110d;color:#fdf6ee;box-shadow:0 6px 20px rgba(21,17,13,0.18)}
.navbar.on-light .nav-cta .cta-dot{background:#fdf6ee;color:#15110d}
.navbar.on-light .nav-hamburger{background:rgba(21,17,13,0.82);border-color:rgba(255,255,255,0.12)}
.navbar.on-light .nav-hamburger span{background:#fdf6ee}

/* Dropdown "Productos" — panel de cristal oscuro que flota debajo del
   tab, siempre con el mismo contraste sin importar qué sección del
   navbar (clara u oscura) haya detrás. */
.nav-tab-dropdown{position:relative}
.nav-dropdown-trigger{display:flex;align-items:center;gap:5px}
.nav-caret{flex-shrink:0;opacity:0.55;transition:transform 0.35s var(--ease-out),opacity 0.35s var(--ease-out)}
.nav-tab-dropdown:hover .nav-caret,
.nav-tab-dropdown:focus-within .nav-caret{transform:rotate(180deg);opacity:1}
.nav-tab-dropdown::after{content:'';position:absolute;top:100%;left:0;width:100%;height:14px}
/* El texto del trigger debe seguir oscuro (sobre la pastilla blanca)
   mientras el cursor siga DENTRO del dropdown, no solo mientras está
   encima del link — si no, al bajar el cursor hacia el panel el
   :hover del link se pierde y el texto vuelve a blanco sobre la
   pastilla blanca (ilegible), aunque la pastilla se quede encendida. */
.nav-tab-dropdown:hover .nav-dropdown-trigger,
.nav-tab-dropdown:focus-within .nav-dropdown-trigger,
.navbar.on-light .nav-tab-dropdown:hover .nav-dropdown-trigger,
.navbar.on-light .nav-tab-dropdown:focus-within .nav-dropdown-trigger{color:#100d0a}
.nav-dropdown-panel{
  position:absolute;top:calc(100% + 14px);left:50%;
  transform:translateX(-50%) translateY(-8px);
  min-width:220px;padding:10px;border-radius:20px;
  background:rgba(0,0,0,0.92);
  backdrop-filter:blur(22px) saturate(1.7);-webkit-backdrop-filter:blur(22px) saturate(1.7);
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 20px 50px rgba(0,0,0,0.4);
  display:flex;flex-direction:column;gap:2px;
  opacity:0;pointer-events:none;
  transition:opacity 0.3s var(--ease-out),transform 0.3s var(--ease-out);
  z-index:20;
}
.nav-tab-dropdown:hover .nav-dropdown-panel,
.nav-tab-dropdown:focus-within .nav-dropdown-panel{
  opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
.nav-dropdown-panel a{
  display:flex;align-items:center;height:auto;
  padding:11px 16px;border-radius:12px;
  font-size:0.82rem;font-weight:500;letter-spacing:0.01em;
  color:rgba(253,246,238,0.72);white-space:nowrap;
  transition:background 0.25s,color 0.25s;
}
.nav-dropdown-panel a:hover{background:rgba(255,255,255,0.09);color:#fdf6ee}
.nav-dropdown-panel a.nav-dropdown-all{
  margin-top:4px;padding-top:13px;
  border-top:1px solid rgba(255,255,255,0.12);
  color:rgba(253,246,238,0.5);font-size:0.76rem;
}
.nav-dropdown-panel a.nav-dropdown-all:hover{color:#fdf6ee}

@media(max-width:1160px){
  .nav-tabs>li>a{padding:0 13px;font-size:0.74rem}
  .nav-cta a{padding:0 5px 0 16px;font-size:0.74rem;gap:9px}
}
@media(max-width:900px){
  .navbar{padding:16px 20px}
  .nav-tabs{display:none}
  .nav-search{display:none}
  .nav-cta{display:none}
  .nav-hamburger{display:flex!important}
  .nav-logo img{height:24px}
}
@media(min-width:901px){.nav-hamburger{display:none!important}}

/* Mobile menu overlay */
.nav-mobile-menu{
  position:fixed;top:0;left:0;width:100vw;height:100dvh;
  background:#000;display:flex;flex-direction:column;
  z-index:10002;opacity:0;pointer-events:none;
  transition:opacity 0.5s var(--ease-out);overflow-y:auto;
}
.nav-mobile-menu.open{opacity:1;pointer-events:auto}
.nav-mobile-menu.open .mobile-menu-link{opacity:1;transform:translateY(0)}
.mobile-menu-header{display:flex;align-items:center;justify-content:space-between;padding:20px clamp(20px,5vw,32px);border-bottom:1px solid var(--border)}
.mobile-menu-logo img{height:28px;width:auto;display:block;opacity:0.9}
.mobile-menu-close{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:none;border:1px solid var(--border);border-radius:50%;color:var(--text-soft);cursor:pointer;transition:border-color 0.3s,color 0.3s}
.mobile-menu-close:hover{border-color:var(--accent-hover);color:var(--text)}
.mobile-menu-nav{flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 clamp(24px,6vw,48px);gap:0}
.mobile-menu-link{display:flex;align-items:baseline;gap:16px;padding:18px 0;border-bottom:1px solid var(--border);text-decoration:none;opacity:0;transform:translateY(20px);transition:opacity 0.4s var(--ease-out),transform 0.4s var(--ease-out),color 0.3s}
.mobile-menu-link:first-child{border-top:1px solid var(--border)}
.mobile-menu-link:nth-child(1){transition-delay:0.05s}
.mobile-menu-link:nth-child(2){transition-delay:0.1s}
.mobile-menu-link:nth-child(3){transition-delay:0.15s}
.mobile-menu-link:nth-child(4){transition-delay:0.2s}
.mobile-menu-link:nth-child(5){transition-delay:0.25s}
.mobile-menu-idx{font-family:var(--font-body);font-size:0.7rem;letter-spacing:0.1em;color:var(--accent-hover);min-width:20px}
.mobile-menu-label{font-family:var(--font-display);font-size:clamp(1.5rem,6vw,2.2rem);font-weight:300;color:var(--text-soft);transition:color 0.3s;letter-spacing:-0.01em}
.mobile-menu-link:hover .mobile-menu-label{color:var(--text)}

/* Grupo expandible "Productos" dentro del menú móvil — mismo acordeón
   en las 15 páginas que comparten este archivo. */
.mobile-menu-group{border-bottom:1px solid var(--border)}
.mobile-menu-group .mobile-menu-link{border-bottom:none}
.mobile-menu-toggle{background:none;border:none;width:100%;font:inherit;-webkit-appearance:none;cursor:pointer}
.mobile-menu-caret{width:16px;height:16px;flex-shrink:0;margin-left:auto;color:var(--accent-hover);transition:transform 0.4s var(--ease-out)}
.mobile-menu-group.open .mobile-menu-caret{transform:rotate(180deg)}
.mobile-menu-submenu{display:grid;grid-template-rows:0fr;transition:grid-template-rows 0.4s var(--ease-out)}
.mobile-menu-group.open .mobile-menu-submenu{grid-template-rows:1fr}
.mobile-menu-submenu-inner{overflow:hidden;display:flex;flex-direction:column}
.mobile-menu-sublink{padding:12px 0 12px 36px;font-family:var(--font-body);font-size:1rem;color:var(--text-soft);text-decoration:none;transition:color 0.3s}
.mobile-menu-sublink:hover{color:var(--text)}
.mobile-menu-sublink-all{color:var(--accent-hover);font-weight:600;border-top:1px solid var(--border);margin-top:4px;padding-top:14px}
.mobile-menu-footer{padding:24px clamp(24px,6vw,48px) 40px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:20px}
.mobile-menu-cta{display:block;text-align:center;padding:16px 32px;background:var(--text);color:var(--surface);font-family:var(--font-body);font-size:0.85rem;font-weight:600;letter-spacing:0.03em;border-radius:999px;text-decoration:none;transition:background 0.3s}
.mobile-menu-cta:hover{background:var(--accent-hover);color:#100d0a}
.mobile-menu-social{display:flex;justify-content:center;gap:24px}
.mobile-menu-social a{font-family:var(--font-body);font-size:0.75rem;letter-spacing:0.08em;color:var(--text-muted);text-decoration:none;text-transform:uppercase;transition:color 0.3s}
.mobile-menu-social a:hover{color:var(--text)}

/* ============================================================
   BUSCADOR PREDICTIVO — overlay pantalla completa
   ============================================================ */
.search-overlay{
  position:fixed;inset:0;z-index:20000;
  background:rgba(0,0,0,0.92);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  opacity:0;pointer-events:none;
  transition:opacity 0.35s cubic-bezier(0.16,1,0.3,1);
  display:flex;align-items:flex-start;justify-content:center;
  padding-top:clamp(80px,15vh,160px);
}
.search-overlay.open{opacity:1;pointer-events:auto}
.search-overlay.open .search-box{transform:translateY(0);opacity:1}
.search-box{width:90%;max-width:620px;transform:translateY(20px);opacity:0;transition:all 0.4s cubic-bezier(0.16,1,0.3,1) 0.1s}
.search-input-wrap{display:flex;align-items:center;gap:12px;border-bottom:1px solid rgba(255,255,255,0.15);padding-bottom:12px;margin-bottom:24px}
.search-input-wrap svg{width:20px;height:20px;color:#fdf6ee;flex-shrink:0}
.search-input{flex:1;background:none;border:none;outline:none;font-family:var(--font-body);font-size:clamp(1.2rem,3vw,1.6rem);color:var(--text);letter-spacing:-0.01em}
.search-input::placeholder{color:var(--text-muted)}
.search-close{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:none;border:1px solid rgba(255,255,255,0.1);border-radius:50%;color:var(--text-soft);cursor:pointer;flex-shrink:0;transition:border-color 0.3s,color 0.3s}
.search-close:hover{border-color:rgba(255,255,255,0.5);color:var(--text)}
.search-results{display:flex;flex-direction:column;gap:2px}
.search-result{display:flex;align-items:center;gap:16px;padding:14px 16px;border-radius:12px;color:var(--text-soft);text-decoration:none;transition:background 0.2s,color 0.2s;font-size:0.95rem}
.search-result:hover,.search-result:focus{background:rgba(255,255,255,0.06);color:var(--text)}
.search-result-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.08);border-radius:8px;flex-shrink:0}
.search-result-icon svg{width:16px;height:16px;color:#fdf6ee}
.search-result-title{font-weight:500;color:var(--text)}
.search-result-desc{font-size:0.8rem;color:var(--text-muted);margin-top:2px}
.search-no-results{color:var(--text-muted);text-align:center;padding:32px 0;font-size:0.95rem}
.search-hint{margin-top:24px;text-align:center;font-size:0.75rem;color:var(--text-muted);letter-spacing:0.05em}
.search-hint kbd{display:inline-block;padding:2px 8px;background:rgba(255,255,255,0.08);border-radius:4px;font-family:var(--font-body);font-size:0.7rem}

/* Barra de búsqueda grande embebida en una página (abre el mismo overlay) */
.search-bar-big{
  display:flex;align-items:center;gap:14px;
  width:100%;max-width:640px;margin:0 auto;
  padding:1.1rem 1.6rem;border-radius:999px;
  background:rgba(255,255,255,0.045);
  border:1px solid var(--border);
  color:var(--text-muted);cursor:pointer;
  transition:all var(--dur) var(--ease-out);
}
.search-bar-big:hover{background:rgba(255,255,255,0.07);border-color:rgba(255,255,255,0.16);color:var(--text-soft)}
.search-bar-big svg{width:18px;height:18px;flex-shrink:0}
.search-bar-big span{font-size:0.95rem}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:#000;border-top:1px solid var(--border)}
.footer-main{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(2rem,4vw,4rem);padding:clamp(3rem,6vh,5rem) 5%;max-width:1200px;margin:0 auto}
.footer-brand-col .nav-logo{margin-bottom:1rem}
.footer-brand-desc{font-size:0.88rem;color:var(--text-soft);line-height:1.7;max-width:30ch;margin-bottom:1.5rem}
.footer-social{display:flex;gap:12px}
.footer-social a{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:50%;color:var(--text-muted);transition:all var(--dur) var(--ease-out)}
.footer-social a:hover{border-color:var(--accent-hover);color:var(--text)}
.footer-social a svg{width:16px;height:16px}
.footer-col-title{font-size:0.78rem;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;color:var(--text);margin-bottom:1.2rem}
.footer-col-links{list-style:none;display:flex;flex-direction:column;gap:0.6rem}
.footer-col-links a{font-size:0.88rem;color:var(--text-soft);line-height:1.5;transition:color var(--dur) var(--ease-out);display:inline-flex;align-items:center;min-height:44px}
.footer-col-links a:hover{color:var(--text)}
.footer-langs{display:flex;gap:8px;flex-wrap:wrap;margin-top:0.5rem}
.footer-lang{
  display:inline-flex;align-items:center;gap:0.55rem;
  padding:3px 0.95rem 3px 3px;
  border:1px solid var(--border);border-radius:999px;
  background:transparent;
  font-family:var(--font-body);font-size:0.72rem;font-weight:600;
  letter-spacing:0.08em;color:var(--text-muted);
  transition:all var(--dur) var(--ease-out);
  cursor:pointer;
}
.footer-lang-flag{width:26px;height:26px;flex-shrink:0;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:0.9rem;line-height:1;background:rgba(255,255,255,0.07)}
.footer-lang:hover{background:rgba(255,255,255,0.045);color:var(--text-soft)}
.footer-lang.active{border-color:var(--text);color:var(--text)}
.footer-bottom{border-top:1px solid var(--border);padding:1.5rem 5%;display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;flex-wrap:wrap;gap:0.8rem}
.footer-copy{font-size:0.78rem;color:var(--text-muted)}
.footer-legal{display:flex;gap:1.5rem}
.footer-legal a{font-size:0.78rem;color:var(--text-muted);line-height:1.5;transition:color var(--dur) var(--ease-out);display:inline-flex;align-items:center;min-height:44px}
.footer-legal a:hover{color:var(--text)}

@media(max-width:900px){
  .footer-main{grid-template-columns:1fr 1fr;gap:2.5rem 1.5rem}
}
@media(max-width:600px){
  .footer-main{grid-template-columns:1fr}
}

/* ============================================================
   PÁGINA — encabezado genérico para páginas internas
   (Categorías, Nosotros, Blog, etc. — la home no lo usa, tiene
   su propio hero cinemático)
   ============================================================ */
.page-hero{
  position:relative;
  padding:clamp(160px,26vh,240px) 5% clamp(60px,8vh,90px);
  background:#000;
  overflow:hidden;
}
.page-hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 62% 48% at 74% 8%,rgba(187,163,158,0.07),transparent 66%);
}
.page-hero-inner{position:relative;z-index:1;max-width:900px}
.page-hero .section-label{color:var(--accent-hover)}
.page-hero p.page-lede{
  margin-top:1.2rem;font-size:clamp(1rem,1.3vw,1.15rem);
  color:var(--text-soft);line-height:1.7;max-width:56ch;
}
.page-section{padding:clamp(60px,8vh,100px) 5%;max-width:1200px;margin:0 auto}

/* Contenedor genérico para grids de tarjetas (categorías, productos) */
.card-grid{display:grid;gap:clamp(16px,2vw,28px)}
.card-grid--3{grid-template-columns:repeat(3,1fr)}
.card-grid--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.card-grid--3,.card-grid--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.card-grid--3,.card-grid--4{grid-template-columns:1fr}}

/* Sección de la grilla de producto — única excepción a "fondo
   siempre negro" en todo el sitio, pedida a propósito: blanco/crema
   de marca para que la puerta (3D o "Próximamente") se lea como
   producto de catálogo, no como escena nocturna. */
.product-grid-section{background:#fdf6ee}

/* Tarjeta de producto — usada en las páginas de categoría. Fondo
   crema, con un fundido blanco de abajo hacia arriba sobre el visor
   3D para que el texto siempre se lea, sin tapar la puerta. */
.product-card{
  position:relative;overflow:hidden;
  border-radius:14px;
  background:rgba(21,17,13,0.035);
  border:1px solid rgba(21,17,13,0.1);
  padding:2rem 1.7rem;min-height:300px;
  display:flex;flex-direction:column;justify-content:flex-end;
  transition:transform var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out);
}
.product-card:hover{transform:translateY(-4px);border-color:rgba(21,17,13,0.22)}
.product-card::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:radial-gradient(circle at 50% 28%, var(--card-color,#4c3832) 0%, transparent 62%);
  opacity:0.3;
}
.product-card::after{
  content:'';position:absolute;left:0;right:0;bottom:0;z-index:1;height:62%;
  background:linear-gradient(to top, #fdf6ee 0%, rgba(253,246,238,0.88) 40%, rgba(253,246,238,0) 100%);
  pointer-events:none;
}
.product-card-fam{position:relative;z-index:2;font-size:0.72rem;letter-spacing:0.18em;text-transform:uppercase;color:rgba(21,17,13,0.55);margin-bottom:0.5rem}
.product-card-name{position:relative;z-index:2;font-family:var(--font-display);font-weight:500;font-size:clamp(1.8rem,2.6vw,2.4rem);letter-spacing:-0.01em;color:var(--text-dark)}
.product-card-desc{position:relative;z-index:2;font-size:0.88rem;color:rgba(21,17,13,0.68);margin-top:0.6rem;line-height:1.55}
.product-card-cta{position:relative;z-index:2;margin-top:1.4rem;font-size:0.76rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent)}
.product-card[data-model]{padding-top:0;min-height:380px}
.pc3d-canvas{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;
  display:block;opacity:0;transition:opacity 0.6s var(--ease-out);
}
.product-card.pc3d-ready .pc3d-canvas{opacity:1}
.product-card.pc3d-ready::before{opacity:0.1}
@media(prefers-reduced-motion:reduce){.pc3d-canvas{transition:none}}
.product-card.is-soon{cursor:default}
.product-card.is-soon::before{opacity:0.16}
.product-card.is-soon .product-card-cta{color:rgba(21,17,13,0.4)}

/* Aparición suave al entrar en pantalla (ver site.js) */
.reveal{opacity:0;transform:translateY(24px);transition:opacity 0.7s var(--ease-out),transform 0.7s var(--ease-out)}
.reveal.in{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}