/* ---------- Fuentes servidas desde el propio hosting ----------
   Antes venían de Google Fonts: esa hoja bloqueaba la primera pintada casi 1 s en celular
   y, al llegar las letras, el titular se movía. Mismos archivos (subconjunto latino). */
@font-face{font-family:"Archivo";font-style:normal;font-weight:300 900;font-stretch:62% 125%;font-display:swap;src:url(../assets/fuentes/archivo.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fuentes/barlow-400.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fuentes/barlow-500.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fuentes/barlow-600.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fuentes/barlow-700.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:400 700;font-display:swap;src:url(../assets/fuentes/space-grotesk.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ============ TOKENS ============ */
:root{
  --navy-950:#05122B;
  --navy-900:#081B3F;
  --navy-800:#0C2B63;
  --azul:#1A5CE5;
  --azul-luz:#7FB0FF;
  --amarillo:#FFC400;
  --amarillo-2:#FFD84D;
  --hueso:#F3F5F9;
  --hueso-2:#E6EAF2;
  --tinta:#0B1220;
  --tinta-2:#4B5568;
  --blanco:#FFFFFF;
  --niebla:rgba(255,255,255,.12);
  --niebla-2:rgba(255,255,255,.06);
  --max:1320px;
  /* letra pequeña: Barlow, la misma de las etiquetas de alutech.com.co (elegida por David) */
  --mono:"Barlow",system-ui,sans-serif;
  --nav:"Space Grotesk",system-ui,sans-serif;   /* solo la barra de navegación */
  --sans:"Archivo",system-ui,sans-serif;       /* títulos y cifras grandes */
  --texto:"Barlow",system-ui,sans-serif;       /* todo lo que no es título, como en alutech.com.co */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--navy-950);
  color:var(--blanco);
  font-family:var(--texto);
  font-size:17.5px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--amarillo);outline-offset:3px}
::selection{background:var(--amarillo);color:var(--navy-950)}

.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
h1,h2,h3,h4,.cifra b,.pilar .n,.hito .anio,.pasos3 b,.lab-tab b,.logo span,.manifiesto p{font-family:var(--sans)}
.mono{font-family:var(--mono);font-weight:600;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}

/* ============ NAV (píldora flotante — ADN del grupo) ============ */
.nav-wrap{position:fixed;top:0;left:0;right:0;z-index:100;pointer-events:none}
.nav{
  position:relative;
  pointer-events:auto;
  /* barra de lado a lado, pegada arriba (opción A, 10-sep-2026); el contenido se alinea con .wrap */
  height:78px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 max(32px,calc((100vw - 1320px)/2 + 32px));
  background:rgba(5,18,43,.9);   /* más sólida: sobre secciones claras a .74 se veía gris */
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.10);
  box-shadow:0 8px 30px rgba(5,18,43,.3);
}
.nav img{height:36px;width:auto}
.nav ul{display:flex;gap:4px;list-style:none}
.nav ul a{
  position:relative;overflow:hidden;display:block;
  font-family:var(--nav);font-weight:600;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.1em;
  /* el tracking mete un hueco al final de la palabra: se lo descuento a la derecha
     para que la píldora quede ópticamente centrada */
  padding:11px 14px 11px 15px;border-radius:9px;
  opacity:.72;border:1px solid transparent;
  transition:background .25s,opacity .25s,border-color .25s;
}
.nav ul a:hover{background:rgba(255,255,255,.07);opacity:1}
.nav ul a.act{
  opacity:1;color:var(--blanco);
  background:rgba(127,176,255,.13);border-color:rgba(127,176,255,.32);
  box-shadow:inset 0 0 20px rgba(127,176,255,.16);
}
/* destello que cruza la píldora activa: el mismo reflejo del hero, en pequeño */
.nav ul a.act::after{
  content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:translateX(0) skewX(-18deg);
  animation:destello 3.6s cubic-bezier(.65,0,.35,1) infinite;
}
/* se mueve con transform y no con left: así lo pinta la tarjeta de video y no recalcula la barra en cada cuadro.
   489% = recorrer de -70% a 150% del botón siendo el brillo el 45% de ancho */
@keyframes destello{0%,62%{transform:translateX(0) skewX(-18deg)}100%{transform:translateX(489%) skewX(-18deg)}}
@media(prefers-reduced-motion:reduce){.nav ul a.act::after{animation:none;opacity:0}}
/* Tienda es la otra mitad del negocio: se le da zona propia, separada del menú */
.nav-right{display:flex;gap:10px;align-items:center;margin-left:22px;padding-left:26px;border-left:1px solid var(--niebla)}
/* todos los botones del sitio en MAYÚSCULAS con letra espaciada,
   igual que el de Tienda en la barra */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 22px;border-radius:9px;
  font-size:.82rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;
  border:1px solid transparent;
  transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-amarillo{
  background:linear-gradient(180deg,var(--amarillo-2),var(--amarillo));
  color:var(--navy-950);border-color:var(--amarillo);
  box-shadow:0 6px 20px rgba(255,196,0,.3);
}
.btn-amarillo:hover{
  background:linear-gradient(180deg,#FFE380,var(--amarillo-2));
  box-shadow:0 9px 26px rgba(255,196,0,.44);
}
.btn-fantasma{background:rgba(255,255,255,.06);border-color:rgba(127,176,255,.3);color:var(--blanco)}
.btn-fantasma:hover{background:rgba(255,255,255,.13);border-color:rgba(127,176,255,.55);box-shadow:0 6px 22px rgba(127,176,255,.16)}
.btn-navy{background:var(--navy-950);color:var(--blanco);border-color:var(--navy-950);box-shadow:0 6px 18px rgba(5,18,43,.22)}
.btn-navy:hover{background:var(--navy-800);box-shadow:0 9px 24px rgba(5,18,43,.3)}
/* en la barra los botones van en Space Grotesk y un punto más pequeños */
.nav .btn{font-family:var(--nav);font-size:.79rem;letter-spacing:.1em;padding:14px 26px}

/* Botón de la tienda: es el mismo sello "Olglass Home" de la sección de la tienda,
   encogido al alto de la barra. Fondo hueso porque el logo va en sus colores
   originales y sobre el amarillo se le pierde la media luna. */
.nav-tienda{
  transform:translateZ(0); /* capa propia: su brillo animado no obliga a repintar toda la barra */
  display:inline-flex;align-items:center;gap:10px;width:max-content;white-space:nowrap;
  padding:9px 18px;border-radius:10px;background:var(--hueso);
  box-shadow:0 8px 22px rgba(0,0,0,.28);
  transition:transform .18s ease,box-shadow .18s ease;
}
.nav-tienda:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(0,0,0,.38)}
.nav-tienda img{height:22px;width:auto;-webkit-user-drag:none}
.nav-tienda .nt-sim{display:none}
.nav-tienda b{
  padding-left:11px;border-left:3px solid var(--amarillo);
  font-family:var(--sans);font-variation-settings:"wdth" 118;font-weight:750;
  font-size:1.05rem;line-height:1;letter-spacing:.05em;text-transform:uppercase;
  background:linear-gradient(100deg,var(--navy-950) 42%,var(--azul) 50%,var(--navy-950) 58%) 100% 0/260% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:brilloHome 4.2s cubic-bezier(.65,0,.35,1) infinite;
}
@media(prefers-reduced-motion:reduce){
  .nav-tienda b{animation:none;background:none;color:var(--navy-950);-webkit-text-fill-color:var(--navy-950)}
}
.burger{display:none;width:44px;height:44px;border:1px solid var(--niebla);border-radius:9px;place-items:center}
.burger span{display:block;width:18px;height:2px;background:#fff;box-shadow:0 -6px 0 #fff,0 6px 0 #fff}

/* ============ HERO ============ */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
/* margen fijo y no en %: con % el borde superior dependía del alto del hero y, al llegar las fuentes y cambiar ese alto,
   la foto de portada "saltaba" (Lighthouse lo medía como desplazamiento de 0.26 en Proyectos) */
.hero-media{position:absolute;inset:-48px;z-index:-2}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover}
/* el iPhone en ahorro de batería no reproduce videos solos y pone un botón de play encima: queda la foto de portada limpia */
.hero-media video::-webkit-media-controls-start-playback-button,
.planta-media video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
.hero-media video::-webkit-media-controls,.planta-media video::-webkit-media-controls{display:none!important}
.hero-media img{transform:scale(1.02);animation:kb 22s ease-in-out infinite alternate}
@keyframes kb{to{transform:scale(1.12) translate(-1.5%,1%)}}
.hero-tint{position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(5,18,43,.55) 0%,rgba(5,18,43,.15) 35%,rgba(5,18,43,.75) 78%,var(--navy-950) 100%),
    linear-gradient(90deg,rgba(5,18,43,.65),rgba(5,18,43,0) 60%);
}
/* el destello de vidrio: un haz de luz que cruza el hero como reflejo en una lámina */
.hero-sweep{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.hero-sweep::before{
  content:"";position:absolute;top:-30%;bottom:-30%;left:-40%;width:28%;
  background:linear-gradient(100deg,transparent 0%,rgba(127,176,255,.10) 40%,rgba(255,255,255,.28) 50%,rgba(127,176,255,.10) 60%,transparent 100%);
  transform:translateX(0) skewX(-18deg);
  animation:sweep 9s cubic-bezier(.65,0,.35,1) infinite;
}
/* igual que el destello del menú: transform en vez de left (643% = de -40% a 140% siendo el haz el 28%) */
@keyframes sweep{0%,55%{transform:translateX(0) skewX(-18deg)}100%{transform:translateX(643%) skewX(-18deg)}}
.hero-in{position:relative;width:100%;padding-top:150px;padding-bottom:76px}
.hero-meta{
  display:flex;gap:0;margin-bottom:38px;
  border-left:1px solid var(--niebla);
}
.hero-meta div{padding:4px 22px;border-right:1px solid var(--niebla);color:var(--azul-luz);max-width:200px;line-height:1.5}
.hero h1{
  font-size:clamp(2.1rem,4.6vw,4.4rem);
  text-transform:uppercase;
  font-variation-settings:"wdth" 116;
  font-weight:700;
  /* en versales: interlínea corta (no hay descendentes) y tracking casi neutro
     — el negativo de antes aplastaba las mayúsculas unas contra otras */
  line-height:.94;letter-spacing:-.012em;
  max-width:15ch;
}
.hero h1 .l{display:inline-block;opacity:0;transform:translateY(.35em) rotate(1.2deg);animation:letra .8s cubic-bezier(.2,.75,.25,1) forwards}
@keyframes letra{to{opacity:1;transform:none}}
.hero-foot{
  margin-top:40px;display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:end;
}
.hero-foot p{font-size:clamp(1.02rem,1.5vw,1.25rem);max-width:46ch;color:#C9D6EE}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.scroll-cue{position:absolute;left:50%;transform:translateX(-50%);bottom:22px;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--azul-luz)}
.scroll-cue i{display:block;width:1px;height:48px;background:linear-gradient(var(--amarillo),transparent);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.sello{position:absolute;left:32px;top:112px;writing-mode:vertical-rl;color:rgba(255,255,255,.45)}
/* en portátiles de 1280-1366 px el contenido arranca a 32 px y el texto vertical se montaba sobre el titular */
@media(max-width:1399px){.sello{display:none}}

/* ============ CIFRAS (una sola tarjeta ancha) ============ */
.cinta{background:var(--navy-950);padding:64px 0 78px}
.cifra{
  position:relative;
  display:grid;grid-template-columns:auto 1fr;gap:36px;align-items:center;
  background:rgba(255,255,255,.035);
  border:1px solid var(--niebla);border-radius:14px;
  padding:34px 34px 32px;
  transition:background .3s,border-color .3s;
}
/* la línea amarilla de arriba: se alarga al pasar el mouse */
.cifra::before{
  content:"";position:absolute;left:34px;top:-1px;
  height:2px;width:40px;background:var(--amarillo);border-radius:2px;
  transition:width .4s cubic-bezier(.2,.7,.25,1);
}
.cifra:hover{background:rgba(255,255,255,.055);border-color:rgba(127,176,255,.3)}
.cifra:hover::before{width:96px}
.cifra b{
  display:block;font-size:clamp(3rem,6vw,4.6rem);font-weight:700;
  font-variation-settings:"wdth" 116;letter-spacing:-.035em;line-height:1;color:var(--blanco);
  white-space:nowrap;
}
.cifra b .mas{font-style:normal;color:var(--amarillo);margin-right:.04em}
.cifra b small{font-size:.32em;color:#9FB3D6;font-weight:500;margin-left:9px;letter-spacing:-.01em}
.cifra-txt .et{color:var(--amarillo);display:block;margin-bottom:9px}
.cifra-txt p{color:#9FB3D6;font-size:1.02rem;line-height:1.55;max-width:62ch}
@media(prefers-reduced-motion:reduce){.cifra,.cifra::before{transition:none}}

/* ============ SECCIONES ============ */
section{padding:120px 0}
h2{
  font-size:clamp(1.7rem,3vw,2.6rem);
  text-transform:uppercase;
  font-variation-settings:"wdth" 110;font-weight:650;
  line-height:1.04;letter-spacing:-.008em;max-width:22ch;
}
.lede{margin-top:20px;max-width:58ch;font-size:1.08rem;color:#B7C5E3}
.claro{background:var(--hueso);color:var(--tinta)}
.claro .lede{color:var(--tinta-2)}
.encabezado{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.encabezado>div:first-child{flex:1 1 560px}
.encabezado .lede{flex:0 1 440px}
.encabezado .mono{color:var(--azul);margin-bottom:14px;display:block}
.claro .encabezado .mono{color:var(--azul)}
.oscuro .encabezado .mono{color:var(--amarillo)}

/* reveal al scroll — un solo patrón, sutil */
.r{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.25,1),transform .8s cubic-bezier(.2,.7,.25,1)}
.r.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .r{opacity:1;transform:none;transition:none}
  .hero h1 .l{animation:none;opacity:1;transform:none}
  .hero-media img,.hero-sweep::before,.scroll-cue i{animation:none}
}

/* ============ SECTORES ============ */
/* cuatro frentes: tres de obra y el hogar (Olglass Home) */
.sectores{margin-top:64px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.sector{
  position:relative;min-height:470px;border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;padding:28px;
  background:var(--navy-900);color:#fff;isolation:isolate;
}
.sector img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .8s cubic-bezier(.2,.7,.25,1),filter .6s}
.sector::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(5,18,43,.05) 30%,rgba(5,18,43,.92) 100%)}
.sector:hover img{transform:scale(1.06);filter:saturate(1.1)}
/* pastilla oscura: sobre fotos claras (cielo, baño blanco) el número se perdía */
.sector .num{position:absolute;top:22px;left:22px;padding:6px 10px;border-radius:7px;color:var(--amarillo);background:rgba(5,18,43,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.1)}
.sector h3{font-size:1.6rem;font-weight:650;font-variation-settings:"wdth" 110;letter-spacing:-.02em}
.sector p{margin-top:10px;color:#C9D6EE;font-size:.98rem;max-width:32ch}
.sector .tag{margin-top:18px;display:inline-flex;gap:8px;align-items:center;color:var(--amarillo);font-weight:600;font-size:.9rem}
.sector .tag::after{content:"";width:22px;height:1px;background:var(--amarillo);transition:width .3s}
.sector:hover .tag::after{width:44px}

/* ============ LABORATORIO DE VIDRIO ============ */
.lab{background:radial-gradient(1200px 600px at 20% 0%,#0E3477 0%,var(--navy-950) 60%)}
.lab-grid{margin-top:64px;display:grid;grid-template-columns:300px 1fr 360px;gap:40px;align-items:stretch}
.lab-tabs{display:flex;flex-direction:column;gap:6px}
.lab-tab{
  position:relative;overflow:hidden;
  text-align:left;padding:18px 20px;border-radius:12px;border:1px solid transparent;
  display:flex;flex-direction:column;gap:4px;
  transition:background .2s,border-color .2s;
}
/* barra de progreso de la rotación automática (solo en el tab activo) */
.lab-tab .prog{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--amarillo);opacity:0}
.lab-tabs.auto .lab-tab[aria-selected="true"] .prog{opacity:1;animation:prog 6s linear forwards}
@keyframes prog{from{width:0}to{width:100%}}
.lab-tab .mono{color:var(--azul-luz)}
.lab-tab b{font-size:1.15rem;font-weight:600;letter-spacing:-.01em}
.lab-tab:hover{background:var(--niebla-2)}
.lab-tab[aria-selected="true"]{background:rgba(26,92,229,.18);border-color:rgba(127,176,255,.35)}
.lab-tab[aria-selected="true"] .mono{color:var(--amarillo)}
.lab-stage{
  position:relative;border-radius:18px;overflow:hidden;
  background:linear-gradient(160deg,#0B2558,#05122B);
  border:1px solid var(--niebla);min-height:520px;
  display:flex;align-items:center;justify-content:center;
}
.lab-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.18;filter:saturate(.6)}
.lab-stage svg{position:relative;width:100%;max-width:640px;height:auto}
.lab-stage .cap{position:absolute;left:24px;bottom:20px;right:24px;display:flex;justify-content:space-between;color:var(--azul-luz)}
.lab-leyenda{position:absolute;left:24px;top:20px;display:flex;gap:16px;flex-wrap:wrap;color:#9FB3D6;z-index:1}
.lab-leyenda span{display:inline-flex;align-items:center;gap:7px;opacity:.28;transition:opacity .5s}
.lab-leyenda span.on{opacity:1;color:#fff}
.lab-leyenda i{display:inline-block;width:10px;height:10px;border-radius:2px}
.fx{transition:opacity .6s}
.capa{transition:x .7s cubic-bezier(.2,.7,.25,1),width .7s cubic-bezier(.2,.7,.25,1),opacity .5s}
.lab-info{display:flex;flex-direction:column;gap:22px;padding:8px 0}
.lab-info>div .mono{color:var(--amarillo);display:block;margin-bottom:8px}
.lab-info .btn{align-self:stretch;width:100%}
.lab-info h3{font-size:2rem;font-weight:650;font-variation-settings:"wdth" 112;letter-spacing:-.02em;line-height:1.1}
.lab-info p{color:#B7C5E3;font-size:1rem}
.lab-info dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:.95rem;border-top:1px solid var(--niebla);padding-top:18px}
.lab-info dt{color:#9FB3D6}
.lab-info dd{color:#fff;font-weight:500}
.barras{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--niebla);padding-top:18px}
.barra{display:grid;grid-template-columns:110px 1fr 36px;align-items:center;gap:12px;font-size:.88rem}
.barra span:last-child{text-align:right;font-family:var(--mono);font-size:.78rem;color:var(--amarillo)}
.barra i{display:block;height:6px;border-radius:99px;background:var(--niebla)}
.barra i b{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--azul),var(--azul-luz));width:0;transition:width .9s cubic-bezier(.2,.7,.25,1)}

/* etiquetas azules sobre fondo claro: una línea que se dibuja al pasar el mouse.
   El área sensible es el encabezado entero, no el texto: si fuera el texto,
   habría que apuntar a unos pocos píxeles de alto. */
.claro .encabezado .mono,
.clientes .encabezado .mono,
.commerce-grid>div>.mono{
  position:relative;display:inline-block;
  color:var(--azul);margin:0 0 14px;padding-bottom:9px;
}
.claro .encabezado .mono::after,
.clientes .encabezado .mono::after,
.commerce-grid>div>.mono::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;
  height:2px;border-radius:2px;background:var(--azul);
  transition:right .45s cubic-bezier(.2,.7,.25,1);
}
.claro .encabezado:hover .mono::after,
.claro .encabezado.vista .mono::after,
.clientes .encabezado:hover .mono::after,
.clientes .encabezado.vista .mono::after,
.commerce-grid>div:hover>.mono::after,
.commerce-grid>div.vista>.mono::after{right:0}
@media(prefers-reduced-motion:reduce){
  .claro .encabezado .mono::after,.clientes .encabezado .mono::after,.commerce-grid>div>.mono::after{transition:none}
}

/* ============ PROYECTOS ============ */
.proy-grid{margin-top:64px;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:260px;gap:14px}
.proy{position:relative;border-radius:14px;overflow:hidden;background:var(--hueso-2);isolation:isolate}
.proy img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.25,1)}
.proy:hover img{transform:scale(1.05)}
.proy .cap{
  position:absolute;left:0;right:0;bottom:0;padding:18px 20px;
  background:linear-gradient(180deg,transparent,rgba(5,18,43,.85));color:#fff;
  display:flex;justify-content:space-between;align-items:flex-end;gap:12px;
}
.proy .cap b{font-size:1.15rem;font-weight:600;letter-spacing:-.01em}
.proy .cap .mono{color:var(--amarillo);font-size:.66rem}
.proy.big{grid-column:span 2;grid-row:span 2}
.proy.tall{grid-row:span 2}
.proy.wide{grid-column:span 2}

.proy-salida{margin-top:38px;display:flex;justify-content:center}

/* ============ PLANTA (diseñamos · fabricamos · instalamos) ============ */
.planta{background:radial-gradient(900px 500px at 80% 100%,#0E3477 0%,var(--navy-950) 60%)}
.planta-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.planta .mono{color:var(--amarillo);display:block;margin-bottom:14px}
.pasos3{list-style:none;margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pasos3 li{border-top:1px solid var(--niebla);padding-top:18px;display:flex;flex-direction:column}
.pasos3 li .mono{margin-bottom:12px}
.pasos3 b{font-size:1.2rem;font-weight:650;letter-spacing:-.01em;font-variation-settings:"wdth" 108}
.pasos3 p{margin-top:6px;color:#B7C5E3;font-size:.95rem;max-width:22ch}
.planta .btn{margin-top:40px}
.planta-media{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--niebla);aspect-ratio:16/11;background:var(--navy-900)}
.planta-media img,.planta-media video{width:100%;height:100%;object-fit:cover}


/* ============ COMMERCE ============ */
.commerce{background:var(--hueso);color:var(--tinta)}
/* sello "Olglass Home": logo + HOME, con un brillo que recorre las letras */
.marca-home{transform:translateZ(0);display:inline-flex;align-items:center;gap:14px;margin-bottom:26px}
.marca-home img{height:42px;width:auto}
.marca-home b{
  padding-left:15px;border-left:3px solid var(--amarillo);
  font-family:var(--sans);font-variation-settings:"wdth" 118;font-weight:750;
  font-size:1.75rem;line-height:1;letter-spacing:.05em;text-transform:uppercase;
  background:linear-gradient(100deg,var(--navy-950) 42%,var(--azul) 50%,var(--navy-950) 58%) 100% 0/260% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:brilloHome 4.2s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes brilloHome{0%,55%{background-position:100% 0}100%{background-position:0 0}}
@media(prefers-reduced-motion:reduce){.marca-home b{animation:none}}
/* etiquetas en versalitas (.mono, sello vertical, meta del hero), clientes y sello Olglass Home:
   no se dejan seleccionar ni arrastrar */
.mono,.sello,.hero-meta,.clientes .encabezado,.clientes .logos,.marca-home,.nav-tienda{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.clientes .logos img,.marca-home img,.nav-tienda img{-webkit-user-drag:none;pointer-events:none}
.commerce-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.commerce .lede{color:var(--tinta-2)}
/* mosaico: una sola foto no alcanzaba a mostrar los tres productos del texto */
/* dos piezas verticales escalonadas: la segunda baja para que el bloque no se lea como una tabla */
.commerce-fotos{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.cf:nth-child(2){margin-top:64px}
.cf{
  position:relative;border-radius:14px;overflow:hidden;
  background:var(--hueso-2);aspect-ratio:3/4;
  box-shadow:0 18px 44px rgba(5,18,43,.12);
}
.cf img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.25,1)}
.cf:hover img{transform:scale(1.05)}
.cf figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:48px 20px 18px;
  background:linear-gradient(180deg,transparent,rgba(5,18,43,.78));
  color:#fff;font-size:.72rem;
}
.commerce ul{list-style:none;margin-top:26px;display:grid;gap:10px;font-size:.98rem}
.commerce li{display:flex;gap:12px;align-items:center}
.commerce li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--amarillo);flex:none;box-shadow:0 0 0 3px rgba(255,196,0,.2)}

/* ============ CLIENTES ============ */
.clientes{background:var(--hueso);color:var(--tinta);padding-top:0}
/* sin titular grande, la etiqueta es el único encabezado: gana cuerpo y una línea */
.clientes .encabezado{display:block;padding-bottom:22px;border-bottom:1px solid #D5DCE8}
.clientes .encabezado .mono{font-size:.78rem;letter-spacing:.16em}
.clientes .logos{margin-top:32px}
.logos{margin-top:48px;display:grid;grid-template-columns:repeat(7,1fr);gap:12px}
.logo{
  background:#fff;border:1px solid var(--hueso-2);border-radius:12px;height:96px;
  display:flex;align-items:center;justify-content:center;padding:16px 18px;
  filter:grayscale(1);opacity:.75;transition:filter .3s,opacity .3s,transform .3s;
}
.logo:hover{filter:none;opacity:1;transform:translateY(-2px)}
.logo img{max-height:48px;max-width:100%;width:auto;object-fit:contain}
.logo span{font-weight:600;font-variation-settings:"wdth" 108;color:var(--navy-800);text-align:center;font-size:.95rem;line-height:1.2}

/* ============ CONTACTO ============ */
.contacto{
  position:relative;overflow:hidden;
  background:linear-gradient(90deg,rgba(5,18,43,.96) 40%,rgba(5,18,43,.55)),url("../assets/img/vidrio-lowe.jpg") center/cover;
}
.contacto-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center}
.contacto .lede{color:#B7C5E3}
.contacto-cta{margin-top:34px;display:flex;gap:12px;flex-wrap:wrap}
.datos{display:grid;gap:22px;border-left:1px solid var(--niebla);padding-left:32px}
.datos .mono{color:var(--amarillo);margin-bottom:6px;display:block}
.datos p{color:#C9D6EE;font-size:1rem}

/* ============ FOOTER ============ */
footer{background:#03091B;color:#8EA0C2;padding:62px 0 26px;font-size:.92rem}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:40px}
footer img{height:34px;width:auto;margin-bottom:16px}

/* el lema: la marca en blanco y el resto apagado, para que no se lea como un bloque gris */
.foot-lema{max-width:32ch;line-height:1.6;color:#8EA0C2}
.foot-lema b{display:block;color:var(--blanco);font-weight:600;font-size:1.04rem;letter-spacing:-.01em;margin-bottom:5px}

/* títulos de columna: la misma etiqueta mono del resto del sitio */
footer h3{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amarillo);font-weight:500;line-height:1.4;margin-bottom:18px;
}
footer li{list-style:none;margin-bottom:3px}
/* 4px arriba y abajo: el dedo tiene 26px de alto para tocar, con el mismo espacio a la vista */
footer li a{display:inline-block;padding:4px 0;color:#B7C5E3;transition:color .2s}
footer li a:hover{color:var(--blanco)}
footer a:hover{color:var(--amarillo)}

.foot-dato{margin-bottom:12px;line-height:1.55}
.foot-dato a{display:block;width:fit-content;padding:3px 0;color:#8EA0C2;transition:color .2s}
.foot-dato a:hover{color:var(--amarillo)}
.foot-dato b{color:var(--blanco);font-weight:500}

.foot-redes{display:flex;gap:10px;margin-top:22px}
.foot-redes a{
  width:42px;height:42px;border-radius:10px;border:1px solid var(--niebla);
  display:grid;place-items:center;color:#B7C5E3;
  transition:background .22s,color .22s,border-color .22s,transform .22s;
}
.foot-redes a:hover{background:var(--amarillo);color:var(--navy-950);border-color:var(--amarillo);transform:translateY(-2px)}
.foot-redes svg{width:19px;height:19px}

.foot-bottom{margin-top:46px;padding-top:20px;border-top:1px solid var(--niebla-2);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.8rem;color:#6E80A4}
.foot-bottom a{color:#8EA0C2}

/* WhatsApp flotante */
.wa{position:fixed;right:22px;bottom:22px;z-index:90;width:58px;height:58px;border-radius:50%;background:var(--amarillo);display:grid;place-items:center;box-shadow:0 14px 40px rgba(255,196,0,.35);transition:transform .2s}
.wa:hover{transform:scale(1.06)}
.wa svg{width:28px;height:28px}

/* ============ RESPONSIVE ============ */
/* el menú completo (logo, 5 enlaces y el sello Home) necesita ~940 px: por debajo va en hamburguesa
   (en tablets y celulares acostados el logo se aplastaba) */
@media(max-width:960px){
  .nav>a{flex:none}
  .nav ul{display:none}
  .nav-right{margin-left:auto;padding-left:0;border-left:0}
  /* fondo sólido: con el desenfoque de la barra se alcanzaba a leer la página por detrás (23-sep-2026) */
  .nav.open ul{display:flex;position:absolute;top:100%;left:0;right:0;border-radius:0 0 14px 14px;flex-direction:column;gap:4px;background:#05122B;backdrop-filter:none;-webkit-backdrop-filter:none;padding:14px;border-top:1px solid var(--niebla);box-shadow:0 18px 40px rgba(3,9,27,.45)}
  .nav.open ul a{display:block;padding:14px 14px;font-size:.86rem}
  .burger{display:grid}
}
@media(max-width:1100px){
  .sectores{grid-template-columns:repeat(2,1fr)}
  .lab-grid{grid-template-columns:1fr;gap:28px}
  .lab-tabs{flex-direction:row;overflow-x:auto;padding-bottom:6px}
  .lab-tab{min-width:190px}
  .logos{grid-template-columns:repeat(3,1fr)}
  .planta-grid{grid-template-columns:1fr;gap:40px}
  .proy-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:220px}
  .proy.big{grid-column:span 2;grid-row:span 1}
  .foot-grid{grid-template-columns:1fr 1fr}
  /* tablets y celulares grandes con zoom: el texto y los botones del hero no caben lado a lado */
  .hero h1{max-width:none}
  .hero-foot{grid-template-columns:1fr;gap:26px}
  .hero-cta{justify-content:flex-start}
  .scroll-cue{display:none}
}
@media(max-width:820px){
  /* en celular no cabe el logo completo: se cambia por el símbolo solo */
  .nav-tienda{padding:7px 11px;gap:8px}
  .nav-tienda .nt-logo{display:none}
  .nav-tienda .nt-sim{display:block;height:20px;width:20px}
  .nav-tienda b{font-size:.88rem;padding-left:9px;border-left-width:2px}
  .nav{height:68px;padding:0 20px}
  .sello{display:none}
  .hero-meta{flex-wrap:wrap;border-left:0}
  .hero-meta div{border:0;padding:4px 0;max-width:none}
  .hero h1{max-width:none}
  .hero-foot{grid-template-columns:1fr;gap:26px}
  .hero-cta{justify-content:flex-start}
  .scroll-cue{display:none}
  .cifra{grid-template-columns:1fr;gap:18px;padding:28px 26px 26px}
  .cifra::before{left:26px}
  section{padding:80px 0}
  .sectores{grid-template-columns:1fr}
  .sector{min-height:320px}
  .commerce-grid,.contacto-grid{grid-template-columns:1fr;gap:34px}
  .cf:nth-child(2){margin-top:36px}
  .pasos3{grid-template-columns:1fr;gap:16px}
  .datos{border-left:0;padding-left:0}
  .logos{grid-template-columns:repeat(2,1fr)}
  .proy-grid{grid-template-columns:1fr;grid-auto-rows:240px}
  .proy.big,.proy.wide{grid-column:span 1}
  .proy.tall{grid-row:span 1}
  .foot-grid{grid-template-columns:1fr}
}

/* ====================================================================
   NOSOTROS (nosotros.html)
   ==================================================================== */

/* hero más bajo para páginas interiores */
.hero-sub{min-height:78svh}
.hero-sub .hero-in{padding-top:170px;padding-bottom:64px}
.hero-sub h1{max-width:16ch}
.hero-sub .hero-media{background:radial-gradient(900px 500px at 70% 30%,#0E3477 0%,var(--navy-950) 70%)}
.hero-sub .hero-media img,.hero-sub .hero-media video{opacity:.55}

/* ---- Quiénes somos (manifiesto) ---- */
.quienes{background:var(--hueso);color:var(--tinta)}
.quienes-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:60px;align-items:center;margin-top:56px}
.manifiesto p{font-size:clamp(1.35rem,2.1vw,1.9rem);line-height:1.3;letter-spacing:-.015em;color:var(--tinta);max-width:30ch;font-weight:500;font-variation-settings:"wdth" 106}
.manifiesto p+p{margin-top:24px}
.manifiesto p b{font-weight:650;color:var(--azul)}
/* la foto es lo que llena el vacío blanco que dejaba esta sección */
.quienes-foto{border-radius:16px;overflow:hidden;aspect-ratio:1/1;background:var(--hueso-2);box-shadow:0 30px 70px rgba(5,18,43,.14)}
.quienes-foto img{width:100%;height:100%;object-fit:cover}

/* los cinco pilares, en tarjetas: en hilera con líneas se perdían sobre el fondo claro */
.pilares{margin-top:64px;display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.pilar{
  position:relative;overflow:hidden;
  background:#fff;border:1px solid var(--hueso-2);border-radius:14px;
  padding:24px 22px 24px;display:flex;flex-direction:column;
  transition:border-color .3s,box-shadow .3s,transform .3s;
}
/* el número, en grande, hace de ancla visual */
.pilar .n{
  display:block;font-size:2.1rem;font-weight:700;
  font-variation-settings:"wdth" 116;letter-spacing:-.04em;line-height:1;
  color:var(--azul);margin-bottom:16px;
}
.pilar::after{
  content:"";position:absolute;left:22px;right:22px;top:0;height:2px;
  background:var(--amarillo);transform:scaleX(0);transform-origin:left;
  transition:transform .4s cubic-bezier(.2,.7,.25,1);
}
.pilar:hover{border-color:rgba(26,92,229,.28);box-shadow:0 18px 44px rgba(5,18,43,.1);transform:translateY(-3px)}
.pilar:hover::after{transform:scaleX(1)}
.pilar h3{font-size:1.1rem;font-weight:650;letter-spacing:-.015em;font-variation-settings:"wdth" 106;line-height:1.22}
.pilar p{margin-top:8px;color:var(--tinta-2);font-size:.92rem;line-height:1.5}
@media(prefers-reduced-motion:reduce){.pilar,.pilar::after{transition:none}}

/* ---- Historia (línea de tiempo) ---- */
.historia{background:radial-gradient(1000px 500px at 85% 10%,#0E3477 0%,var(--navy-950) 60%)}
.linea{position:relative;margin-top:72px;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.linea::before{content:"";position:absolute;left:0;right:0;top:9px;height:1px;background:var(--niebla)}
.linea::after{content:"";position:absolute;left:0;top:9px;height:1px;width:0;background:linear-gradient(90deg,var(--amarillo),var(--azul-luz));transition:width 1.6s cubic-bezier(.2,.7,.25,1)}
.linea.va::after{width:100%}
.hito{position:relative;padding-top:34px}
.hito::before{content:"";position:absolute;left:0;top:3px;width:13px;height:13px;border-radius:50%;background:var(--navy-950);border:2px solid var(--azul-luz);transition:background .4s,border-color .4s,box-shadow .4s}
.linea.va .hito::before{background:var(--amarillo);border-color:var(--amarillo);box-shadow:0 0 0 6px rgba(255,196,0,.15)}
.linea.va .hito:nth-child(2)::before{transition-delay:.4s}
.linea.va .hito:nth-child(3)::before{transition-delay:.8s}
.linea.va .hito:nth-child(4)::before{transition-delay:1.2s}
.hito .anio{font-size:clamp(2.2rem,3.8vw,3.2rem);font-weight:700;font-variation-settings:"wdth" 116;letter-spacing:-.03em;line-height:1;color:#fff}
.hito .anio.txt{font-size:clamp(1.5rem,2.3vw,2rem);padding-top:.35em}
.hito .anio small{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amarillo);margin-bottom:10px;font-weight:500}
.hito h3{margin-top:14px;font-size:1.2rem;font-weight:600;letter-spacing:-.01em}
.hito p{margin-top:8px;color:#B7C5E3;font-size:.95rem;max-width:30ch}

@media(prefers-reduced-motion:reduce){.linea::after{transition:none}}

/* ---- Sede ---- */
/* sin foto de fondo: las dos fotos de la columna derecha ya cargan la sección */
/* el brillo baja del borde: Sede va justo después de Historia (oscura) y en el borde se veía un corte */
.sede{background:radial-gradient(1000px 520px at 12% 45%,#0E3477 0%,var(--navy-950) 62%)}
/* dos secciones oscuras seguidas: sin esto quedaban 240 px de vacío entre ambas */
.historia+.sede{padding-top:24px}
/* texto arriba a lo ancho y las dos fotos lado a lado: en dos columnas quedaba un hueco grande bajo el texto */
.sede-grid{display:grid;grid-template-columns:1fr;gap:56px}
.sede-info{display:grid;grid-template-columns:1.15fr 1fr;column-gap:64px;align-items:end}
.sede-info>*{grid-column:1}
.sede-info>.mono{color:var(--amarillo);display:block;margin-bottom:14px}
.sede-cta{margin-top:36px;display:flex;gap:12px;flex-wrap:wrap}
.sede-datos{
  grid-column:2 !important;grid-row:1 / span 3;align-self:end;
  display:grid;grid-template-columns:1fr;gap:22px;
  padding-left:36px;border-left:1px solid var(--niebla);
}
.sede-datos .mono{color:var(--amarillo);margin-bottom:7px;display:block}
.sede-datos p{color:#C9D6EE;font-size:.97rem;line-height:1.55}

/* las dos fotos, lado a lado */
.sede-fotos{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sede-fotos figure{
  position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/3;
  border:1px solid var(--niebla);background:var(--navy-900);
}
.sede-fotos img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.25,1)}
.sede-fotos figure:first-child img{object-position:center 42%}
.sede-fotos figure:hover img{transform:scale(1.04)}
.sede-fotos figcaption{
  position:absolute;left:16px;bottom:14px;padding:6px 12px;border-radius:7px;
  background:rgba(5,18,43,.62);backdrop-filter:blur(8px);
  border:1px solid var(--niebla);color:#fff;
}

/* ---- Responsive Nosotros ---- */
@media(max-width:1100px){
  .quienes-grid{grid-template-columns:1fr;gap:36px}
  .pilares{grid-template-columns:repeat(3,1fr)}
  .linea{grid-template-columns:1fr 1fr;gap:40px 28px}
  .linea::before,.linea::after{display:none}
  .hito{padding-top:0;padding-left:28px}
  .hito::before{top:10px}
  .sede-grid{gap:40px}
  .sede-info{grid-template-columns:1fr}
  .sede-datos{grid-column:1 !important;grid-row:auto;grid-template-columns:1fr 1fr;margin-top:36px;padding:26px 0 0;border-left:0;border-top:1px solid var(--niebla)}
}
@media(max-width:820px){
  /* alto mínimo fijo también en celular: si depende solo del texto, cuando llegan las fuentes el hero cambia de alto y empuja todo lo de abajo */
  .hero-sub{min-height:78svh}
  .sede-fotos{grid-template-columns:1fr}
  .sede-datos{grid-template-columns:1fr}
  .hero-sub .hero-in{padding-top:140px}
  .linea{grid-template-columns:1fr}
  .pilares{grid-template-columns:1fr}
}

/* ====================================================================
   PROYECTOS (proyectos.html)
   ==================================================================== */
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.obras{background:radial-gradient(1100px 560px at 15% 40%,#0E3477 0%,var(--navy-950) 62%)}   /* brillo lejos del borde: arriba chocaba con la portada */

/* ---- barra de filtros ---- */
.filtros{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-bottom:22px;border-bottom:1px solid var(--niebla);
}
.filtros .chips{display:flex;gap:8px;flex-wrap:wrap}
.filtro{
  font-family:var(--nav);font-size:.76rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.09em;
  padding:10px 15px;border-radius:9px;
  border:1px solid var(--niebla);color:#B7C5E3;
  transition:background .22s,color .22s,border-color .22s;
}
.filtro:hover{background:var(--niebla-2);color:#fff}
.filtro[aria-selected="true"]{background:var(--amarillo);border-color:var(--amarillo);color:var(--navy-950)}
.conteo{color:#8EA0C2;white-space:nowrap}
.conteo b{color:var(--amarillo);font-weight:500}

/* ---- rejilla de obras ---- */
.rejilla{margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:34px 26px}
.obra{display:flex;flex-direction:column}
/* las que el filtro esconde: fuera del flujo y del tabulador */
.obra[hidden]{display:none}

.obra-foto{
  position:relative;display:block;width:100%;padding:0;
  aspect-ratio:4/3;border-radius:14px;overflow:hidden;
  background:var(--navy-900);border:1px solid var(--niebla);cursor:zoom-in;
}
.obra-foto img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.25,1),filter .5s}
.obra-foto::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,18,43,0) 55%,rgba(5,18,43,.55) 100%);
  opacity:0;transition:opacity .4s;
}
.obra-foto:hover img{transform:scale(1.05)}
.obra-foto:hover::after{opacity:1}
.lupa{
  position:absolute;right:14px;bottom:14px;z-index:1;
  padding:7px 12px;border-radius:7px;
  background:rgba(5,18,43,.6);backdrop-filter:blur(8px);
  border:1px solid var(--niebla);color:#fff;
  opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s;
}
.obra-foto:hover .lupa,.obra-foto:focus-visible .lupa{opacity:1;transform:none}

.obra-cat{display:block;color:var(--amarillo);margin:18px 0 7px}
.obra-nombre{
  font-size:1.45rem;font-weight:650;letter-spacing:-.02em;
  font-variation-settings:"wdth" 108;line-height:1.15;color:var(--blanco);
}
.obra-lugar{display:block;margin-top:6px;color:#9FB3D6;font-size:.92rem}

.sin-obras{margin-top:48px;color:#9FB3D6;font-size:1.05rem}

/* ---- visor de foto grande ---- */
.visor{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:24px;background:rgba(3,9,27,.93);backdrop-filter:blur(10px);
  animation:visorEntra .25s ease;
}
.visor[hidden]{display:none}
@keyframes visorEntra{from{opacity:0}to{opacity:1}}
.visor-caja{max-width:min(1100px,92vw);max-height:88vh;display:flex;flex-direction:column;gap:16px}
.visor-caja img{
  max-width:100%;max-height:76vh;width:auto;height:auto;
  border-radius:14px;border:1px solid var(--niebla);object-fit:contain;
}
.visor-caja figcaption{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.visor-caja .mono{color:var(--amarillo)}
.visor-caja b{font-size:1.3rem;font-weight:650;letter-spacing:-.02em;color:#fff}
.visor-cerrar{
  position:absolute;top:20px;right:24px;
  width:46px;height:46px;border-radius:50%;font-size:1.9rem;line-height:1;
  color:#fff;background:rgba(255,255,255,.07);border:1px solid var(--niebla);
  display:grid;place-items:center;transition:background .2s;
}
.visor-cerrar:hover{background:rgba(255,255,255,.16)}
.visor-nav{
  flex:none;width:52px;height:52px;border-radius:50%;font-size:2rem;line-height:1;
  color:#fff;background:rgba(255,255,255,.07);border:1px solid var(--niebla);
  display:grid;place-items:center;transition:background .2s;
}
.visor-nav:hover{background:rgba(255,255,255,.16)}

/* ---- responsive ---- */
@media(max-width:1100px){
  .rejilla{grid-template-columns:repeat(2,1fr);gap:30px 20px}
}
@media(max-width:820px){
  .rejilla{grid-template-columns:1fr;gap:34px}
  .filtros{align-items:flex-start;flex-direction:column;gap:14px}
  .filtros .chips{overflow-x:auto;flex-wrap:nowrap;width:100%;padding-bottom:4px}
  .filtro{flex:none}
  .obra-nombre{font-size:1.3rem}
  .visor{padding:14px}
  .visor-nav{width:44px;height:44px;font-size:1.6rem}
  .visor-cerrar{top:12px;right:14px;width:40px;height:40px;font-size:1.6rem}
}
@media(prefers-reduced-motion:reduce){
  .obra-foto img,.lupa,.obra-foto::after{transition:none}
  .visor{animation:none}
}

/* ====================================================================
   VIDRIOS (vidrios.html)
   ==================================================================== */
.visor3d{background:radial-gradient(1200px 620px at 25% 0%,#0E3477 0%,var(--navy-950) 62%)}
.v3-grid{margin-top:60px;display:grid;grid-template-columns:280px 1fr 340px;gap:34px;align-items:stretch}

/* ---- selector ---- */
.v3-tabs{display:flex;flex-direction:column;gap:6px}
.v3-tab{
  text-align:left;padding:16px 18px;border-radius:12px;border:1px solid transparent;
  display:flex;flex-direction:column;gap:3px;
  transition:background .2s,border-color .2s;
}
.v3-tab .mono{color:var(--azul-luz)}
.v3-tab b{font-size:1.08rem;font-weight:600;letter-spacing:-.01em}
.v3-tab:hover{background:var(--niebla-2)}
.v3-tab[aria-selected="true"]{background:rgba(26,92,229,.18);border-color:rgba(127,176,255,.35)}
.v3-tab[aria-selected="true"] .mono{color:var(--amarillo)}

/* ---- escena 3D ---- */
.v3-escena{
  position:relative;border-radius:18px;overflow:hidden;min-height:540px;
  background:linear-gradient(160deg,#0B2558,#05122B);border:1px solid var(--niebla);
  cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
}
/* la perspectiva vive aparte del overflow: si comparten elemento, Safari aplana las capas.
   Y la cámara va posicionada, no como celda de una grid: en Safari el height:100% de un
   ítem de grid se quedaba en cero y la perspectiva se calculaba contra una caja vacía. */
.v3-camara{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  perspective:1500px;perspective-origin:50% 46%;
  -webkit-perspective:1500px;-webkit-perspective-origin:50% 46%;
}
.v3-escena.girando{cursor:grabbing}
.v3-escena::before{  /* piso, para que la lámina no flote en el vacío */
  content:"";position:absolute;left:12%;right:12%;bottom:76px;height:120px;
  background:radial-gradient(ellipse at 50% 50%,rgba(127,176,255,.16),transparent 70%);
  filter:blur(6px);pointer-events:none;
}
.v3-mundo{transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.7,.25,1)}/* sin will-change: Safari promueve la capa y aplana el 3D de los hijos */
.v3-mundo.libre{transition:none}
.v3-lamina{position:relative;width:230px;height:320px;transform-style:preserve-3d;-webkit-transform-style:preserve-3d}

.capa3{
  position:absolute;inset:0;border-radius:4px;
  transition:transform .7s cubic-bezier(.2,.7,.25,1);
  backface-visibility:visible;-webkit-backface-visibility:visible;
}
/* vidrio: verde azulado translúcido con brillo, como el canto real de una lámina */
.capa3.v{
  background:linear-gradient(135deg,rgba(140,205,205,.42) 0%,rgba(215,245,245,.2) 42%,rgba(110,180,190,.42) 100%);
  border:1.5px solid rgba(200,242,242,.8);
  box-shadow:inset 0 0 26px rgba(190,240,240,.22),0 0 18px rgba(140,215,215,.14);
}
.capa3.pvb{
  background:linear-gradient(135deg,rgba(255,196,0,.6),rgba(255,216,77,.4));
  border:1.5px solid rgba(255,224,110,.9);
  box-shadow:0 0 16px rgba(255,196,0,.2);
}
.capa3.lowe{
  background:linear-gradient(135deg,rgba(255,216,77,.65),rgba(255,241,179,.4));
  border:1px solid rgba(255,241,179,.75);
  box-shadow:0 0 14px rgba(255,216,77,.35);
}
.capa3.air{
  background:repeating-linear-gradient(45deg,rgba(127,176,255,.09) 0 6px,transparent 6px 12px);
  border:1px dashed rgba(127,176,255,.5);
}
/* etiqueta de cada capa: solo aparece con las capas separadas */
/* cada etiqueta se escalona en vertical: si van todas a la misma altura,
   al proyectarse en 3D se encaraman una sobre otra */
.capa3 span{
  position:absolute;left:calc(100% + 16px);
  top:calc(10% + var(--i) * var(--paso,11%));
  font-family:var(--mono);font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;
  color:#CFE0FA;white-space:nowrap;opacity:0;transition:opacity .4s;
  padding:3px 8px;border-radius:5px;background:rgba(5,18,43,.72);border:1px solid var(--niebla);
}
.v3-lamina.abierta .capa3 span{opacity:1}
.capa3 span::before{content:"";position:absolute;right:calc(100% + 5px);top:50%;width:11px;height:1px;background:rgba(127,176,255,.7)}

.v3-pista{position:absolute;top:20px;left:0;right:0;text-align:center;color:#7FB0FF;opacity:.8;transition:opacity .4s;pointer-events:none}
.v3-pista.oculta{opacity:0}
.v3-mandos{position:absolute;left:20px;bottom:20px;display:flex;gap:8px;flex-wrap:wrap}
.v3-boton{
  font-family:var(--nav);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.09em;
  padding:9px 14px;border-radius:8px;border:1px solid var(--niebla);
  background:rgba(255,255,255,.05);color:#fff;transition:background .2s,border-color .2s;
}
.v3-boton:hover:not([disabled]){background:rgba(255,255,255,.12)}
.v3-boton[disabled]{opacity:.45;cursor:default}
.v3-boton[aria-pressed="true"]{background:var(--amarillo);border-color:var(--amarillo);color:var(--navy-950)}
.v3-total{position:absolute;right:20px;bottom:24px;color:var(--amarillo)}

/* ---- ficha ---- */
.v3-ficha{display:flex;flex-direction:column;gap:20px;padding:6px 0}
.v3-ficha>div .mono{color:var(--amarillo);display:block;margin-bottom:8px}
.v3-ficha h3{font-size:1.9rem;font-weight:650;font-variation-settings:"wdth" 112;letter-spacing:-.02em;line-height:1.12}
.v3-ficha p{color:#B7C5E3;font-size:1rem}
.v3-ficha dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:.94rem;border-top:1px solid var(--niebla);padding-top:16px}
.v3-ficha dt{color:#9FB3D6}
.v3-ficha dd{color:#fff;font-weight:500}
.v3-ficha .btn{align-self:stretch;width:100%}

/* ---- guía + comparador (una sola sección) ---- */
.guia{background:var(--hueso);color:var(--tinta)}
.usos{margin-top:44px;display:flex;gap:10px;flex-wrap:wrap}
.uso{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--nav);font-size:.76rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  padding:13px 18px;border-radius:11px;border:1px solid #D5DCE8;background:#fff;color:var(--tinta-2);
  transition:background .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s;
}
.uso svg{width:19px;height:19px;flex:none;color:var(--azul);transition:color .2s}
.uso:hover{border-color:var(--azul);color:var(--azul);transform:translateY(-2px);box-shadow:0 10px 24px rgba(5,18,43,.08)}
.uso[aria-pressed="true"]{background:var(--azul);border-color:var(--azul);color:#fff}
.uso[aria-pressed="true"] svg{color:#fff}

.guia-estado{
  margin-top:30px;display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.guia-estado .conteo{color:var(--tinta-2)}
.guia-estado .conteo b{color:var(--azul);font-weight:500}
.guia-estado .pista{color:var(--tinta-3)}
.tabla-caja{margin-top:18px;overflow-x:auto;border:1px solid #D5DCE8;border-radius:16px;background:#fff;box-shadow:0 20px 50px rgba(5,18,43,.06)}
.tabla{width:100%;border-collapse:collapse;min-width:860px;font-size:.94rem}
.tabla th,.tabla td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--hueso-2)}
.tabla thead th{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tinta-2);font-weight:500;background:var(--hueso);white-space:nowrap;
}
.tabla tbody th{font-weight:650;letter-spacing:-.01em;white-space:nowrap}
.tabla tbody th .mono{color:var(--azul);display:block;font-size:.64rem;margin-bottom:4px;font-weight:500}
.tabla tbody tr:last-child th,.tabla tbody tr:last-child td{border-bottom:0}
.tabla tbody tr{transition:background .25s;cursor:pointer}
.tabla tbody tr:hover{background:#F2F6FC}
.tabla tbody tr[hidden]{display:none}
/* el filtro deja una marca amarilla a la izquierda en los que sirven */
.tabla tbody tr.marcada th{box-shadow:inset 3px 0 0 var(--amarillo)}
.tabla td{color:var(--tinta-2);white-space:nowrap}
.tabla td.usos-td{white-space:normal;min-width:26ch}
.tabla td.ver{text-align:right}
.ver-3d{
  font-family:var(--nav);font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  padding:8px 13px;border-radius:8px;border:1px solid #D5DCE8;color:var(--tinta-2);background:#fff;
  white-space:nowrap;transition:background .2s,color .2s,border-color .2s;
}
.tabla tbody tr:hover .ver-3d{background:var(--azul);border-color:var(--azul);color:#fff}
.nota-tabla{margin-top:18px;color:var(--tinta-2);font-size:.86rem;max-width:70ch}

/* ---- responsive ---- */
/* a tres columnas la escena queda estrecha y las etiquetas de las capas se cortan:
   se pasa a una columna antes que el resto del sitio */
@media(max-width:1300px){
  .v3-grid{grid-template-columns:1fr;gap:26px}
  .v3-tabs{flex-direction:row;overflow-x:auto;padding-bottom:6px}
  .v3-tab{min-width:180px;flex:none}
  .v3-escena{min-height:500px}
}
@media(max-width:820px){
  .v3-escena{min-height:430px}
  .v3-camara{perspective:1000px;-webkit-perspective:1000px}
  .v3-lamina{width:180px;height:250px}
  .v3-mandos{left:14px;bottom:14px}
  /* en celular no cabe al lado de los botones: el espesor sube encima de ellos */
  .v3-total{left:16px;right:auto;bottom:66px}
  /* fichas de uso en dos columnas parejas; "Todos los usos" ocupa la fila completa */
  .usos{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:34px}
  .uso{padding:12px 13px;gap:9px;font-size:.68rem;letter-spacing:.05em;line-height:1.3;min-height:58px;text-align:left}
  .uso svg{width:17px;height:17px}
  .uso:first-child{grid-column:1/-1;justify-content:center;min-height:48px}
  .capa3 span{display:none}
  .v3-ficha h3{font-size:1.6rem}
}
@media(prefers-reduced-motion:reduce){
  .v3-mundo,.capa3{transition:none}
}

/* en celular el titular escala con el ancho: "TRANSFORMAMOS" en versales no cabe a 2.1rem en 375 px */
@media(max-width:560px){.hero h1{font-size:7vw}}

/* ============ PÁGINA DE CONTACTO ============ */
.hero-contacto{min-height:74svh}
.hero-contacto .hero-media img{object-position:center 40%}
/* aire para que las tarjetas de canales monten sobre el borde sin tocar el texto */
.hero-contacto .hero-in{padding-bottom:132px}
.hero-contacto .hero-foot p{max-width:52ch}
/* el borde de abajo se funde con el navy de la sección siguiente (todas las portadas interiores) */
.hero-sub::after{content:"";position:absolute;left:0;right:0;bottom:0;height:200px;z-index:-1;pointer-events:none;background:linear-gradient(rgba(5,18,43,0),var(--navy-950))}

/* canales: tres tarjetas que montan sobre el borde del hero */
.canales-sec{position:relative;z-index:2;background:var(--navy-950);padding:0 0 110px}
.canales{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:-58px}
.canal{
  position:relative;display:flex;flex-direction:column;gap:6px;
  padding:30px 30px 28px;border-radius:16px;
  background:linear-gradient(180deg,rgba(18,44,96,.78),rgba(8,27,63,.94));
  border:1px solid rgba(127,176,255,.18);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 24px 60px rgba(0,0,0,.35);
  transition:transform .35s cubic-bezier(.2,.7,.25,1),border-color .3s,box-shadow .3s;
}
.canal::before{
  content:"";position:absolute;left:30px;top:-1px;height:2px;width:40px;
  background:var(--amarillo);border-radius:2px;transition:width .4s cubic-bezier(.2,.7,.25,1);
}
.canal:hover{transform:translateY(-4px);border-color:rgba(127,176,255,.42);box-shadow:0 30px 70px rgba(0,0,0,.42)}
.canal:hover::before{width:96px}
.canal-ico{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;background:rgba(127,176,255,.12);color:var(--azul-luz);margin-bottom:16px}
.canal-ico svg{width:23px;height:23px}
.canal-wa .canal-ico{background:rgba(37,211,102,.14);color:#25D366}
.canal .mono{color:var(--amarillo)}
.canal b{font-family:var(--sans);font-size:1.45rem;font-weight:650;font-variation-settings:"wdth" 108;letter-spacing:-.01em;line-height:1.25;color:var(--blanco)}
.canal b a:hover{color:var(--amarillo-2)}
.canal .canal-2{font-size:1.12rem;color:#B7C5E3}
.canal-ir{
  margin-top:auto;padding-top:20px;align-self:flex-start;
  display:inline-flex;align-items:center;gap:8px;
  color:var(--amarillo);font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.09em;
}
.canal-ir svg{width:16px;height:16px;transition:transform .25s}
.canal:hover .canal-ir svg{transform:translateX(4px)}

/* armador: el mensaje se escribe solo mientras eliges */
.armador-sec{background:linear-gradient(180deg,var(--hueso) 0%,#E4ECF7 100%)}
.armador{margin-top:56px;display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:start}
.armador-form{
  display:grid;gap:30px;padding:36px;border-radius:18px;background:#fff;
  border:1px solid rgba(5,18,43,.07);
  box-shadow:0 2px 4px rgba(5,18,43,.03),0 18px 44px rgba(5,18,43,.08);
}
.armador fieldset{border:0;padding:0;margin:0;min-width:0}
.armador legend{display:flex;align-items:center;gap:10px;margin-bottom:14px;color:var(--tinta);font-size:.74rem}
.armador legend i{font-style:normal;color:var(--azul)}
.fichas{display:flex;flex-wrap:wrap;gap:8px}
.fichas button{
  display:inline-flex;align-items:center;
  padding:11px 17px;border-radius:999px;
  border:1px solid rgba(5,18,43,.14);background:#fff;color:var(--tinta);
  font-weight:600;font-size:.94rem;
  transition:background .2s,color .2s,border-color .2s,box-shadow .2s,transform .15s;
}
.fichas button:hover{border-color:var(--azul);color:var(--azul)}
.fichas button:active{transform:scale(.97)}
.fichas button[aria-pressed="true"]{background:var(--navy-950);border-color:var(--navy-950);color:var(--blanco);box-shadow:0 6px 16px rgba(5,18,43,.2)}
.fichas button[aria-pressed="true"]::before{
  content:"";width:7px;height:7px;border-radius:50%;margin-right:9px;
  background:var(--amarillo);box-shadow:0 0 0 3px rgba(255,196,0,.25);
}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.campos .ancho{grid-column:1/-1}
.campos label>span{display:block;margin-bottom:7px;font-size:.84rem;font-weight:600;color:var(--tinta-2)}
.campos em{font-style:normal;font-weight:400;opacity:.7}
.campos input,.campos textarea{
  width:100%;font:inherit;font-size:1rem;color:var(--tinta);
  background:var(--hueso);border:1px solid transparent;border-radius:10px;padding:13px 15px;
  transition:border-color .2s,background .2s,box-shadow .2s;resize:vertical;
}
.campos input::placeholder,.campos textarea::placeholder{color:#8A94A8}
.campos input:focus,.campos textarea:focus{outline:none;background:#fff;border-color:var(--azul);box-shadow:0 0 0 4px rgba(26,92,229,.12)}

/* vista previa: un chat como el que le va a llegar a Olglass */
.vista-previa{position:sticky;top:104px}
.telefono{padding:10px;border-radius:28px;background:#0B141A;border:1px solid rgba(5,18,43,.25);box-shadow:0 30px 70px rgba(5,18,43,.28)}
.tel-cab{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:20px 20px 0 0;background:#1F2C34;color:#E9EDEF}
.tel-cab img{width:38px;height:38px;border-radius:50%;background:#fff;padding:5px;object-fit:contain}
.tel-cab b{display:block;font-size:1rem;font-weight:600}
.tel-cab span{font-size:.8rem;color:#8696A0}
.tel-chat{
  min-height:270px;padding:24px 16px 28px;border-radius:0 0 20px 20px;
  display:flex;align-items:flex-end;justify-content:flex-end;
  background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.03) 0 1px,transparent 1.5px) 0 0/18px 18px,#0B141A;
}
.burbuja{
  position:relative;max-width:90%;padding:10px 13px 24px;
  border-radius:12px 12px 4px 12px;background:#005C4B;color:#E9EDEF;
  font-size:.96rem;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;
  box-shadow:0 1px 1px rgba(0,0,0,.25);
}
.burbuja::after{content:attr(data-hora) "  ✓✓";position:absolute;right:10px;bottom:5px;font-size:.7rem;color:rgba(233,237,239,.62)}
.burbuja.pop{animation:pop .35s cubic-bezier(.2,.8,.3,1.3)}
@keyframes pop{0%{transform:scale(.96);opacity:.6}100%{transform:none;opacity:1}}
.enviar{display:grid;gap:10px;margin-top:18px}
.enviar .btn{width:100%;padding:17px 22px}
.enviar .btn svg{width:18px;height:18px}
.privado{margin-top:12px;text-align:center;font-size:.86rem;color:var(--tinta-2)}

/* sede: mapa en tono navy con la ficha encima */
.sede-contacto{background:radial-gradient(1000px 500px at 85% 10%,#0E3477 0%,var(--navy-950) 60%)}
.mapa{position:relative;margin-top:56px;height:480px;border-radius:18px;overflow:hidden;border:1px solid var(--niebla);box-shadow:0 30px 70px rgba(0,0,0,.35);background:var(--navy-900)}
/* el mapa sube 110 px para esconder la ficha blanca de Google: la dirección ya va en .mapa-ficha.
   El filtro lo pasa a tonos navy sin necesitar clave de la API */
.mapa iframe{position:absolute;left:0;top:-110px;width:100%;height:calc(100% + 110px);border:0;filter:invert(.9) hue-rotate(180deg) saturate(.65) brightness(.95) contrast(.95)}
.mapa-ficha{
  position:absolute;left:28px;bottom:28px;max-width:410px;padding:26px 26px 24px;border-radius:14px;
  background:rgba(5,18,43,.84);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(127,176,255,.2);box-shadow:0 18px 44px rgba(0,0,0,.35);
}
.mapa-ficha .mono{display:block;margin-bottom:8px;color:var(--amarillo)}
.mapa-ficha p{color:#C9D6EE;line-height:1.55}
.mapa-cta{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap}

@media(max-width:1000px){
  .canales{grid-template-columns:1fr}
  .armador{grid-template-columns:1fr}
  .vista-previa{position:static}
}
@media(max-width:820px){
  /* en celulares angostos el correo largo empujaba la tarjeta fuera de la pantalla */
  .canal{min-width:0}
  .canal b{overflow-wrap:anywhere}
  .canales{margin-top:-28px}
  .canales-sec{padding-bottom:80px}
  .armador-form{padding:24px 20px}
  .campos{grid-template-columns:1fr}
  .mapa{height:auto}
  /* top:0 anula el top:-110px de escritorio: con los dos, el mapa subía el doble y dejaba un hueco vacío abajo */
  .mapa iframe{position:relative;display:block;top:0;height:410px;margin-top:-110px}
  .mapa-ficha{position:static;max-width:none;border-radius:0;border:0;border-top:1px solid var(--niebla);box-shadow:none}
}
@media(prefers-reduced-motion:reduce){.canal,.canal::before,.burbuja.pop{transition:none;animation:none}}

/* ====================================================================
   LEGAL (privacidad.html, terminos.html)
   ==================================================================== */
.hero-legal{min-height:62svh}
.hero-legal .hero-in{padding-bottom:84px}
.hero-legal h1{max-width:18ch}
.hero-legal .hero-foot{grid-template-columns:1fr}
.hero-legal .hero-foot p{max-width:62ch}

.legal{padding:88px 0 110px}
.legal-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:72px;align-items:start}

/* índice: se queda a la vista mientras se lee */
.legal-indice{position:sticky;top:112px}
.legal-indice>.mono{display:block;color:var(--azul);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}
.legal-indice ol{list-style:none;border-left:1px solid var(--hueso-2)}
.legal-indice li a{display:flex;gap:10px;padding:7px 0 7px 16px;margin-left:-1px;border-left:2px solid transparent;color:var(--tinta-2);font-size:.92rem;line-height:1.35;transition:color .2s,border-color .2s}
.legal-indice li a .mono{color:#9AA6BC;font-size:.74rem;padding-top:2px}
.legal-indice li a:hover,.legal-indice li a.act{color:var(--tinta);border-left-color:var(--azul)}
.legal-otro{display:inline-block;margin-top:26px;padding:10px 0;color:var(--azul);font-weight:600;font-size:.92rem}

.legal-texto{max-width:72ch;color:var(--tinta-2);font-size:1.02rem;line-height:1.7}
.legal-sec{padding:34px 0;border-top:1px solid var(--hueso-2);scroll-margin-top:100px}
.legal-sec:first-child{border-top:0;padding-top:0}
.legal-sec h2{display:flex;align-items:baseline;gap:14px;max-width:none;font-size:clamp(1.15rem,1.6vw,1.35rem);line-height:1.2;letter-spacing:-.01em;color:var(--tinta);margin-bottom:16px;font-weight:650}
.legal-sec h2 .mono{color:var(--azul);font-size:.8rem;letter-spacing:.1em;font-weight:600}
.legal-sec p+p,.legal-sec ul+p,.legal-sec p+ul{margin-top:14px}
.legal-sec ul{list-style:none}
.legal-sec ul li{position:relative;padding-left:22px;margin-top:9px}
.legal-sec ul li::before{content:"";position:absolute;left:2px;top:.72em;width:8px;height:2px;border-radius:2px;background:var(--amarillo)}
.legal-sec b{color:var(--tinta);font-weight:600}
.legal-texto a{color:var(--azul);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* ficha con los datos de la empresa */
.legal-sec ul.legal-datos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px}
.legal-sec ul.legal-datos li{margin:0;padding:14px 16px;background:#fff;border:1px solid var(--hueso-2);border-radius:12px;color:var(--tinta);font-size:.94rem;line-height:1.4;overflow-wrap:anywhere}
.legal-sec ul.legal-datos li::before{display:none}
.legal-datos span{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#8A96AD;margin-bottom:4px}
.legal-sec ul.legal-datos a{text-decoration:none;font-weight:500}

.legal-pie{margin-top:18px;padding:22px 24px;border-radius:14px;background:var(--navy-950);color:#B7C5E3}
.legal-pie a{color:var(--amarillo)!important}

@media(max-width:960px){
  .legal{padding:56px 0 80px}
  .legal-grid{grid-template-columns:1fr;gap:36px}
  .legal-indice{position:static;padding:20px 22px;background:#fff;border:1px solid var(--hueso-2);border-radius:14px}
  .legal-indice ol{columns:2;column-gap:24px;border-left:0}
  .legal-indice li{break-inside:avoid}
  .legal-indice li a{padding-left:0;border-left:0}
  .legal-otro{margin-top:12px}
}
@media(max-width:600px){
  .hero-legal{min-height:0}
  .hero-legal .hero-in{padding-bottom:56px}
  .legal-indice ol{columns:1}
  .legal-texto{font-size:.98rem}
  .legal-sec ul.legal-datos{grid-template-columns:1fr}
}