/* =========================================
   Aberturas FAR — Estilos globales
   Sistema de color basado en la guía de marca
   ========================================= */

:root{
  --far-deep:#1A3A52;
  --far-steel:#2E5C7E;
  --far-sky:#3A7BA8;
  --far-carbon:#0F1F2E;
  --far-cloud:#F4F6F8;
  --far-aluminum:#C9D4DE;
  --far-red:#E63946;
  --far-white:#FFFFFF;

  --font: 'Montserrat', system-ui, sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html, body{
  height:100%;
  width:100%;
  overflow:hidden;       /* Single-viewport, sin scroll */
  background:var(--far-carbon);
  font-family:var(--font);
  color:var(--far-cloud);
  -webkit-font-smoothing:antialiased;
}

button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
a{ color:inherit; text-decoration:none; }

/* =========================================
   APP CONTAINER
   ========================================= */
.app{
  position:fixed;
  inset:0;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(1200px 800px at 80% 20%, rgba(58,123,168,.18), transparent 60%),
    radial-gradient(1000px 700px at 10% 90%, rgba(46,92,126,.20), transparent 60%),
    linear-gradient(180deg, #0B1822 0%, #0F1F2E 50%, #0A1620 100%);
}

/* =========================================
   HEADER / NAV CENTRAL (según sketch)
   ========================================= */
.header{
  position:relative;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px 40px 0;
  flex-shrink:0;
  height:120px;
}

.nav{
  display:grid;
  grid-template-columns: auto auto auto;
  align-items:center;
  gap:0;
  width:auto;
}

.nav-side{
  display:flex;
  align-items:center;
  gap:6px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(201,212,222,.12);
  backdrop-filter: blur(10px);
  padding:6px;
  border-radius:14px;
}
.nav-side.left{ justify-content:flex-end; margin-right:-30px; padding-right:50px;}
.nav-side.right{ justify-content:flex-start; margin-left:-30px; padding-left:50px;}

.nav-btn{
  position:relative;
  padding:12px 22px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--far-aluminum);
  border-radius:10px;
  transition:color .25s ease, background .25s ease;
}
.nav-btn:hover{ color:var(--far-white); }
.nav-btn.active{
  color:var(--far-white);
  background:linear-gradient(180deg, var(--far-steel), var(--far-deep));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 4px 18px rgba(46,92,126,.45);
}

.logo-wrap{
  position:relative;
  z-index:5;
  width:104px;
  height:104px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.logo-wrap .logo-disk{
  width:100%;
  height:100%;
  border-radius:50%;
  overflow:hidden;
  background:var(--far-white);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:
    0 0 0 4px rgba(255,255,255,.06),
    0 18px 40px -10px rgba(0,0,0,.55),
    inset 0 -8px 20px rgba(26,58,82,.08);
}

/* =========================================
   STAGE — donde viven las secciones
   ========================================= */
.stage{
  flex:1;
  position:relative;
  overflow:hidden;
}

.section{
  position:absolute;
  inset:0;
  padding:0 6vw 40px;
  display:flex;
  flex-direction:column;
  will-change:transform;
}

/* La "junta" central (mullion) */
.slider-mullion{
  position:absolute;
  top:0; bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:34px;
  background:
    linear-gradient(90deg, #1A2530 0%, #C9D4DE 35%, #F4F6F8 50%, #C9D4DE 65%, #1A2530 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.35),
    0 0 30px rgba(0,0,0,.5);
}
.slider-mullion::before, .slider-mullion::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  width:18px; height:38px; border-radius:4px;
  background:linear-gradient(180deg, #0F1F2E, #1A2A38);
  border:1px solid rgba(0,0,0,.6);
}
.slider-mullion::before{ top:46%; }
.slider-mullion::after{ top:54%; opacity:0; }
/* manija */
.slider-handle{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%, -50%);
  width:14px; height:60px;
  border-radius:8px;
  background:linear-gradient(180deg, #1A2A38, #0F1F2E);
  border:1px solid rgba(244,246,248,.15);
  box-shadow:
    0 2px 6px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(244,246,248,.2);
}

/* =========================================
   COMMON SECTION ELEMENTS
   ========================================= */
.eyebrow{
  font-size:11px;
  letter-spacing:.32em;
  font-weight:500;
  text-transform:uppercase;
  color:var(--far-sky);
  margin-bottom:18px;
  display:flex;
  align-items:center;
  gap:14px;
}
.eyebrow::before{
  content:"";
  width:36px; height:1px;
  background:var(--far-sky);
}
/* Eyebrow sin margen inferior — para layouts ajustados */
.eyebrow--flush{ margin:0; }

h1, h2{
  font-family:var(--font);
  font-weight:900;
  letter-spacing:-.02em;
  color:var(--far-white);
  line-height:.92;
  text-wrap:balance;
}

.h-display{ font-size:clamp(48px, 6.4vw, 96px); text-transform:uppercase;}
.h-display .accent{ color:var(--far-sky); }

p.lead{
  font-size:clamp(15px, 1.05vw, 17px);
  line-height:1.55;
  color:var(--far-aluminum);
  max-width:46ch;
}

.cta-row{ display:flex; gap:14px; margin-top:30px; }
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 24px;
  border-radius:10px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.btn-primary{
  background:linear-gradient(180deg, var(--far-steel), var(--far-deep));
  color:var(--far-white);
  border:1px solid rgba(58,123,168,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 2px 6px rgba(0,0,0,.25);
}
.btn-primary:hover{
  transform:translateY(-1px);
  background:linear-gradient(180deg, #366d97, var(--far-steel));
}
.btn-ghost{
  border:1px solid rgba(201,212,222,.25);
  color:var(--far-cloud);
}
.btn-ghost:hover{ background:rgba(255,255,255,.04); }

/* =========================================
   HERO (Inicio)
   ========================================= */
.hero{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:60px;
  align-items:center;
  height:100%;
  padding-top:10px;
}
/* Tamaños tipográficos específicos de sección (reemplazan inline styles) */
.hero .h-display{ font-size:clamp(40px, 5.2vw, 76px); }
.hero .lead{ margin-top:22px; }
.hero-left{ padding-left:1vw; }
.hero-right{
  position:relative;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.hero-stats{
  display:grid;
  grid-template-columns:repeat(3, auto);
  gap:32px;
  margin-top:32px;
  padding-top:22px;
  border-top:1px solid rgba(201,212,222,.12);
  max-width:540px;
}
.stat-num{
  font-weight:900;
  font-size:28px;
  color:var(--far-white);
  letter-spacing:-.02em;
}
.stat-lbl{
  font-size:10.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--far-aluminum);
  margin-top:4px;
}

/* =========================================
   HERO CAROUSEL
   ========================================= */
.hero-carousel{
  position:relative;
  width:min(560px, 100%);
  height:100%;
  max-height:78vh;
  display:grid;
  grid-template-columns: 44px 1fr 44px;
  grid-template-rows: 1fr auto;
  align-items:center;
  gap:0 12px;
}
.hc-stage{
  grid-column: 1 / -1;
  grid-row: 1;
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  perspective:1600px;
  perspective-origin:50% 50%;
  user-select:none;
  overflow:hidden;
}

/* Slide wrapper — un layer absolute por modelo durante la transición */
.hc-slide{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  will-change: transform, opacity;
}

/* La flecha derecha empuja los modelos a la derecha:
   - el modelo saliente se va para la derecha
   - el modelo entrante viene desde la izquierda hacia el centro
   La flecha izquierda hace lo opuesto. Mantiene la sensación
   de "agarrar el slide y arrastrarlo" hacia donde apunta la flecha. */
@keyframes hc-out-right { from { transform: translateX(0);     opacity:1; } to { transform: translateX( 48px); opacity:0; } }
@keyframes hc-out-left  { from { transform: translateX(0);     opacity:1; } to { transform: translateX(-48px); opacity:0; } }
@keyframes hc-in-from-left  { from { transform: translateX(-48px); opacity:0; } to { transform: translateX(0); opacity:1; } }
@keyframes hc-in-from-right { from { transform: translateX( 48px); opacity:0; } to { transform: translateX(0); opacity:1; } }

.hc-slide.exiting.dir-r  { animation: hc-out-right     480ms cubic-bezier(.4,.0,.2,1) forwards; }
.hc-slide.exiting.dir-l  { animation: hc-out-left      480ms cubic-bezier(.4,.0,.2,1) forwards; }
.hc-slide.entering.dir-r { animation: hc-in-from-left  480ms cubic-bezier(.4,.0,.2,1); }
.hc-slide.entering.dir-l { animation: hc-in-from-right 480ms cubic-bezier(.4,.0,.2,1); }
.hc-stage::after{
  /* Sombra de piso */
  content:"";
  position:absolute;
  bottom:6%;
  left:50%;
  transform:translateX(-50%);
  width:55%;
  height:22px;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.55), transparent 70%);
  filter:blur(4px);
  pointer-events:none;
}

.hc-arrow{
  grid-row:1;
  z-index:5;
  width:44px;
  height:44px;
  border-radius:50%;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(201,212,222,.18);
  color:var(--far-aluminum);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background .2s ease, color .2s ease, transform .15s ease, border-color .2s ease;
  align-self:center;
}
.hc-arrow:hover{
  background:rgba(58,123,168,.18);
  border-color:rgba(58,123,168,.5);
  color:var(--far-white);
}
.hc-arrow.left  { grid-column:1; }
.hc-arrow.right { grid-column:3; }

.hc-meta{
  grid-column: 1 / -1;
  grid-row:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding-top:16px;
  border-top:1px solid rgba(201,212,222,.10);
  margin-top:10px;
}
.hc-label{
  display:flex; flex-direction:column;
}
.hc-label strong{
  font-size:14px; font-weight:700; color:var(--far-white); letter-spacing:.02em;
}
.hc-label span{
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--far-sky);
  margin-top:3px;
}
.hc-dots{
  display:flex; gap:8px;
}
.hc-dot{
  width:8px; height:8px; border-radius:50%;
  background:rgba(201,212,222,.25);
  border:none;
  cursor:pointer;
  transition: background .2s ease, transform .15s ease, width .3s ease;
}
.hc-dot:hover{ background:rgba(201,212,222,.5); }
.hc-dot.active{
  background:var(--far-sky);
  width:22px;
  border-radius:4px;
}

.hc-floating-hint{
  position:absolute;
  top:18px; left:50%;
  transform:translateX(-50%);
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--far-aluminum);
  background:rgba(11,24,34,.7);
  border:1px solid rgba(201,212,222,.12);
  backdrop-filter:blur(6px);
  pointer-events:none;
  opacity:.85;
}
.hc-pulse{
  width:6px; height:6px; border-radius:50%;
  background:var(--far-sky);
  box-shadow:0 0 8px var(--far-sky);
  animation:pulse 2s ease-in-out infinite;
}

/* =========================================
   HERO WINDOWS (modelos interactivos)
   ========================================= */
.hw{
  position:relative;
  width:340px;
  height:460px;
  transform-style:preserve-3d;
  /* Tilt sutil para dar 3D sin hacerlo girar */
  transform: rotateX(3deg) rotateY(-8deg);
}

/* MARCO ----------------------------------- */
.hw-frame{
  position:absolute;
  background:linear-gradient(180deg, #EEF2F6 0%, #C9D4DE 50%, #8a9aab 100%);
  border:1px solid rgba(0,0,0,.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -1px 0 rgba(0,0,0,.18);
  z-index:3;
}
.hw-frame.top    { left:0; top:0; right:0; height:16px; }
.hw-frame.bottom { left:0; bottom:0; right:0; height:16px; }
.hw-frame.side.left   { left:0; top:0; bottom:0; width:14px; }
.hw-frame.side.right  { right:0; top:0; bottom:0; width:14px; }
.hw-frame.thick.top, .hw-frame.thick.bottom { height:22px; }
.hw-frame.thick.side { width:22px; }

/* Esquineros (Patagonia) */
.hw-corner{
  position:absolute;
  width:30px; height:30px;
  background:linear-gradient(135deg, #3a4756 0%, #1c2530 100%);
  z-index:4;
}
.hw-corner.tl{ left:0; top:0; border-radius:4px 0 8px 0; }
.hw-corner.tr{ right:0; top:0; border-radius:0 4px 0 8px; }
.hw-corner.bl{ left:0; bottom:0; border-radius:0 8px 0 4px; }
.hw-corner.br{ right:0; bottom:0; border-radius:8px 0 4px 0; }

/* Riel A30 */
.hw-rail{
  position:absolute;
  left:14px; right:14px;
  bottom:14px;
  height:3px;
  background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.5));
  z-index:4;
  border-radius:1px;
}

/* HOJAS (sashes) ------------------------- */
.hw-sash{
  position:absolute;
  background:linear-gradient(180deg, #DCE3EA 0%, #B7C3CE 50%, #8a9aab 100%);
  border:1px solid rgba(0,0,0,.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 2px 8px rgba(0,0,0,.25);
  transform-style:preserve-3d;
  transition: transform 1s cubic-bezier(.7,.05,.25,1), left 1s cubic-bezier(.7,.05,.25,1), right 1s cubic-bezier(.7,.05,.25,1);
}

.hw-glass{
  position:absolute;
  inset:6px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.05) 30%, rgba(58,123,168,.20) 60%, rgba(15,31,46,.4) 100%),
    linear-gradient(180deg, rgba(105,160,200,.55), rgba(46,92,126,.65));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    inset 0 20px 50px rgba(255,255,255,.12),
    inset 0 -20px 50px rgba(15,31,46,.45);
  overflow:hidden;
}
.hw-glass::after{
  content:"";
  position:absolute;
  top:-10%; left:-30%;
  width:50%; height:140%;
  background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  transform:rotate(8deg);
}
.hw-glass.dvh{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    inset 0 0 0 5px rgba(255,255,255,.05),
    inset 0 0 0 6px rgba(0,0,0,.2),
    inset 0 20px 50px rgba(255,255,255,.10),
    inset 0 -20px 50px rgba(15,31,46,.45);
}

/* Cruz divisora (visual de hoja partida) */
.hw-cross{ display:none; }

/* HANDLES -------------------------------- */
.hw-handle{
  position:absolute;
  background:linear-gradient(180deg, #4a5663, #1a232d);
  border:1px solid rgba(0,0,0,.5);
  border-radius:3px;
  box-shadow: 0 2px 5px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.2);
  transform: translateZ(4px);
  z-index:5;
}
.hw-handle.vertical-right { width:9px; height:24%; top:40%; right:8px; }
.hw-handle.vertical-left  { width:9px; height:24%; top:40%; left:8px;  }
.hw-handle.horizontal-bottom { width:22%; height:8px; bottom:6px; left:39%; }
.hw-handle.small{ height:18%; width:7px; }

/* A30 corrediza ------------------------- */
.hw-sash-a30{
  top:16px;
  bottom:19px;
  width:calc(50% - 14px);
}
.hw-sash-a30.back  { left:14px; transform: translateZ(-6px); }
.hw-sash-a30.front { left:50%;  transform: translateZ(8px); z-index:4; }
.hw-sash-a30.front.slid {
  left:14px;
  transform: translateZ(8px);
}

/* Proyectante --------------------------- */
.hw-mullion-h{
  position:absolute;
  left:14px; right:14px;
  top:30%;
  height:12px;
  background:linear-gradient(180deg, #EEF2F6, #C9D4DE 50%, #8a9aab);
  border:1px solid rgba(0,0,0,.35);
  z-index:4;
}
.hw-sash-fixed-bottom{
  left:14px; right:14px;
  top:calc(30% + 12px);
  bottom:16px;
}
.hw-sash-proyectante{
  left:14px; right:14px;
  top:16px;
  height:calc(30% - 16px);
  transform-origin: 50% 0%;
  transform: rotateX(0deg) translateZ(2px);
  z-index:5;
}
.hw-sash-proyectante.tilt{
  transform: rotateX(-38deg) translateZ(2px);
}
/* Brazos de proyección */
.hw-arm{
  position:absolute;
  top:16px;
  width:2px;
  height:calc(30% - 16px);
  background:linear-gradient(180deg, #8a9aab, #4a5663);
  transform-origin: 50% 0%;
  transition: opacity .4s ease, transform 1s cubic-bezier(.7,.05,.25,1);
  opacity:0;
  z-index:2;
}
.hw-arm.left  { left:25%; }
.hw-arm.right { right:25%; }
.hw-arm.show  { opacity:.6; transform: rotateZ(20deg); }
.hw-arm.right.show { transform: rotateZ(-20deg); }

/* Patagonia batiente -------------------- */
.hw-mullion-v{
  position:absolute;
  top:22px; bottom:22px;
  left:50%;
  transform:translateX(-50%);
  width:5px;
  background:linear-gradient(180deg, #EEF2F6, #C9D4DE 50%, #8a9aab);
  border:1px solid rgba(0,0,0,.35);
  z-index:2;
  transition: opacity .4s ease;
}
.hw-mullion-v.fade{ opacity:.25; }

.hw-sash-batiente{
  top:22px;
  bottom:22px;
  width:calc(50% - 24px);
  transition: transform 1.1s cubic-bezier(.7,.05,.25,1);
  z-index:4;
}
.hw-sash-batiente.left-leaf  { left:22px;  transform-origin: 0% 50%;   }
.hw-sash-batiente.right-leaf { right:22px; transform-origin: 100% 50%; }
.hw-sash-batiente.left-leaf.opened   { transform: rotateY(-55deg); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), -20px 10px 30px rgba(0,0,0,.4); }
.hw-sash-batiente.right-leaf.opened  { transform: rotateY( 55deg); box-shadow: inset 0 1px 0 rgba(255,255,255,.55),  20px 10px 30px rgba(0,0,0,.4); }

/* =========================================
   PRODUCTOS
   ========================================= */
.products{
  display:grid;
  grid-template-columns: 1.4fr 1fr;
  gap:50px;
  height:100%;
  padding-top:4px;
}
.products-stage{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  /* fondo: suelo */
}
.products-stage::after{
  content:"";
  position:absolute;
  bottom:8%;
  left:50%;
  transform:translateX(-50%);
  width:60%;
  height:24px;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.55), transparent 70%);
  filter:blur(4px);
}

.products-right{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:10px;
  gap:16px;
}
.products-body{
  font-size:14px;
  margin:0;
  max-width:52ch;
}

/* Lista de características de la línea */
.feat-list{
  list-style:none;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px 18px;
}
.feat-list li{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:12.5px;
  line-height:1.35;
  color:var(--far-aluminum);
}
.feat-tick{
  flex-shrink:0;
  width:16px; height:16px;
  border-radius:50%;
  background:rgba(58,123,168,.2);
  color:var(--far-sky);
  font-size:9px;
  font-weight:700;
  display:flex; align-items:center; justify-content:center;
  margin-top:1px;
}

/* spec strip */
.spec-strip{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:0;
  margin-top:10px;
  border-top:1px solid rgba(201,212,222,.12);
  border-bottom:1px solid rgba(201,212,222,.12);
  padding:14px 0;
}
.spec-strip-4{
  grid-template-columns: repeat(4, 1fr);
  margin-top:0;
}
.spec-strip-4 .spec{ padding:0 9px; }
.spec-strip-4 .spec-value{ font-size:12.5px; line-height:1.3; }
.spec-strip-4 .spec-label{ margin-bottom:4px; }
.spec{
  text-align:left;
  padding:0 14px;
  border-right:1px solid rgba(201,212,222,.08);
}
.spec:last-child{ border-right:none;}
.spec-label{
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--far-sky);
  margin-bottom:6px;
}
.spec-value{
  font-size:15px;
  font-weight:700;
  color:var(--far-white);
}

/* =========================================
   3D WINDOW (modelos)
   ========================================= */
.w3d-scene{
  width:100%; height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  perspective:1800px;
  perspective-origin:50% 45%;
}
.w3d{
  position:relative;
  transform-style:preserve-3d;
  animation:w3dSpin 16s ease-in-out infinite;
}
@keyframes w3dSpin{
  0%   { transform: rotateY(-22deg) rotateX(4deg); }
  50%  { transform: rotateY( 22deg) rotateX(4deg); }
  100% { transform: rotateY(-22deg) rotateX(4deg); }
}

/* Piezas del modelo paramétrico Window3D */
.win-bar, .win-glass, .win-panel, .win-back{
  position:absolute;
}
.win-bar{ border-radius:1.5px; }
.win-panel{ border-radius:1.5px; }
.win-back{
  background:linear-gradient(165deg, #0d151d 0%, #070b10 100%);
  border:1px solid rgba(0,0,0,.7);
}
.win-glass{
  background:
    linear-gradient(135deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.04) 32%, rgba(58,123,168,.20) 62%, rgba(15,31,46,.38) 100%),
    linear-gradient(180deg, rgba(112,165,205,.55), rgba(46,92,126,.66));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.20),
    inset 0 26px 54px rgba(255,255,255,.13),
    inset 0 -26px 54px rgba(15,31,46,.45);
  overflow:hidden;
}
.win-glass-reflect{
  position:absolute;
  top:-12%; left:-32%;
  width:55%; height:142%;
  background:linear-gradient(110deg, transparent 34%, rgba(255,255,255,.30) 50%, transparent 66%);
  transform:rotate(8deg);
  pointer-events:none;
}
.win-handle{
  position:absolute;
  background:linear-gradient(180deg, #3c4654, #11181f);
  border:1px solid rgba(0,0,0,.6);
  border-radius:3px;
  box-shadow: 0 2px 5px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18);
}

/* Epígrafe del modelo 3D */
.w3d-caption{
  position:absolute;
  bottom:1%;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  text-align:center;
  pointer-events:none;
}
.w3d-caption strong{
  font-size:14px;
  font-weight:700;
  color:var(--far-white);
  letter-spacing:.03em;
}
.w3d-caption span{
  font-size:9.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--far-sky);
}

/* =========================================
   DROPDOWN (selector de línea / modelo)
   ========================================= */
.dd{ position:relative; }
.dd + .products-body{ margin-top:14px; }
.dd-label{
  display:block;
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--far-sky);
  margin-bottom:8px;
}
.dd-trigger{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:13px 16px;
  border-radius:12px;
  background:rgba(15,31,46,.6);
  border:1px solid rgba(201,212,222,.16);
  transition:border-color .2s ease, background .2s ease;
}
.dd-trigger:hover{ border-color:rgba(58,123,168,.5); }
.dd.open .dd-trigger{
  border-color:var(--far-sky);
  background:rgba(58,123,168,.1);
}
.dd-caret{
  color:var(--far-aluminum);
  flex-shrink:0;
  transition:transform .25s ease;
}
.dd.open .dd-caret{ transform:rotate(180deg); }

.dd-value, .dd-line{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.dd-name{
  font-size:15px;
  font-weight:700;
  color:var(--far-white);
  white-space:nowrap;
}
.dd-sub{
  font-size:10.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--far-aluminum);
  white-space:nowrap;
}
.dd-thumb{
  width:36px; height:36px;
  border-radius:8px;
  background:linear-gradient(180deg, #C9D4DE, #8a9aab);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  border:1px solid rgba(0,0,0,.25);
}
.dd-thumb svg{ width:26px; height:26px; }

.dd-menu{
  position:absolute;
  top:calc(100% + 6px);
  left:0; right:0;
  z-index:40;
  background:linear-gradient(180deg, #14283a, #0d1c29);
  border:1px solid rgba(201,212,222,.16);
  border-radius:12px;
  padding:6px;
  box-shadow:0 24px 48px -16px rgba(0,0,0,.75);
  max-height:min(320px, 56vh);
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:rgba(58,123,168,.5) transparent;
}
.dd-menu::-webkit-scrollbar{ width:6px; }
.dd-menu::-webkit-scrollbar-thumb{ background:rgba(58,123,168,.5); border-radius:3px; }
/* Apertura hacia arriba cuando no hay espacio abajo */
.dd-menu.up{
  top:auto;
  bottom:calc(100% + 6px);
}
.dd-item{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 12px;
  border-radius:9px;
  text-align:left;
  transition:background .15s ease;
}
.dd-item:hover{ background:rgba(255,255,255,.05); }
.dd-item.sel{ background:linear-gradient(180deg, rgba(46,92,126,.45), rgba(26,58,82,.5)); }

/* =========================================
   NOSOTROS
   ========================================= */
.nosotros .h-display{ font-size:clamp(32px, 3.4vw, 46px); }
.nosotros .lead{ margin-top:14px; }
.nosotros{
  display:grid;
  grid-template-columns: 1fr 1.05fr;
  gap:48px;
  height:100%;
  align-items:stretch;
}
.nosotros-info{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
}
.values{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  margin-top:18px;
}
.value{
  padding:14px 15px;
  border-radius:12px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(201,212,222,.10);
}
.value-num{
  font-size:10px; letter-spacing:.22em; color:var(--far-sky);
  font-weight:600;
  margin-bottom:7px;
  display:block;
}
.value-title{
  font-size:14.5px; font-weight:700; color:var(--far-white);
  margin-bottom:4px;
}
.value-text{
  font-size:12px; color:var(--far-aluminum); line-height:1.4;
}

/* =========================================
   NOSOTROS — Galería de obras
   ========================================= */
.nosotros-gallery{
  display:flex;
  flex-direction:column;
  min-height:0;
  min-width:0;
}
.gallery-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px;
}
.gallery-hint{
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--far-aluminum);
}

.obra-gallery{
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
  min-height:0;
  min-width:0;
}

.obra-main{
  position:relative;
  flex:1;
  min-height:200px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(201,212,222,.12);
  cursor:pointer;
  background:#0d1c29;
}
.obra-main img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.obra-grad{
  position:absolute;
  inset:auto 0 0 0;
  height:90px;
  background:linear-gradient(180deg, transparent, rgba(7,13,19,.85));
  pointer-events:none;
}

.obra-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:40px; height:40px;
  border-radius:50%;
  background:rgba(11,24,34,.7);
  border:1px solid rgba(201,212,222,.18);
  color:var(--far-cloud);
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(6px);
  transition:background .2s ease, border-color .2s ease;
  z-index:3;
}
.obra-arrow:hover{
  background:rgba(58,123,168,.6);
  border-color:rgba(58,123,168,.6);
}
.obra-arrow.left{ left:12px; }
.obra-arrow.right{ right:12px; }

.obra-counter{
  position:absolute;
  bottom:14px; left:16px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.1em;
  color:var(--far-white);
  z-index:2;
}
.obra-zoom{
  position:absolute;
  top:12px; right:12px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 12px;
  border-radius:999px;
  font-size:10px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--far-cloud);
  background:rgba(11,24,34,.7);
  border:1px solid rgba(201,212,222,.16);
  backdrop-filter:blur(6px);
  z-index:2;
}

.obra-thumbs{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding-bottom:4px;
  scrollbar-width:thin;
  scrollbar-color:rgba(58,123,168,.5) transparent;
  flex-shrink:0;
  min-width:0;
  width:100%;
}
.obra-thumbs::-webkit-scrollbar{ height:6px; }
.obra-thumbs::-webkit-scrollbar-thumb{ background:rgba(58,123,168,.5); border-radius:3px; }
.obra-thumb{
  flex:0 0 auto;
  width:74px;
  height:56px;
  border-radius:8px;
  overflow:hidden;
  border:2px solid transparent;
  opacity:.55;
  transition:opacity .2s ease, border-color .2s ease;
  padding:0;
}
.obra-thumb img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.obra-thumb:hover{ opacity:.85; }
.obra-thumb.active{
  opacity:1;
  border-color:var(--far-sky);
}

/* Lightbox a pantalla completa */
.obra-lightbox{
  position:fixed;
  inset:0;
  z-index:200;
  background:rgba(6,11,16,.94);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:48px 72px;
  backdrop-filter:blur(4px);
  animation:obraFade .2s ease;
}
@keyframes obraFade{ from{ opacity:0; } to{ opacity:1; } }
.obra-lightbox-img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  border-radius:6px;
  box-shadow:0 30px 80px rgba(0,0,0,.7);
}
.obra-close{
  position:absolute;
  top:20px; right:24px;
  width:44px; height:44px;
  border-radius:50%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(201,212,222,.2);
  color:var(--far-cloud);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease;
}
.obra-close:hover{ background:rgba(230,57,70,.5); }
.obra-lightbox .obra-arrow{
  width:52px; height:52px;
}
.obra-lightbox .obra-arrow.left{ left:24px; }
.obra-lightbox .obra-arrow.right{ right:24px; }
.obra-lightbox-counter{
  position:absolute;
  bottom:22px; left:50%;
  transform:translateX(-50%);
  font-size:13px;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--far-aluminum);
}

/* =========================================
   CONTACTO v1 — eliminado. Ahora usa .contacto-v2
   ========================================= */
.contact-icon{
  width:38px; height:38px; border-radius:10px;
  background:linear-gradient(180deg, var(--far-steel), var(--far-deep));
  display:flex; align-items:center; justify-content:center;
  color:var(--far-white);
  flex-shrink:0;
}
.contact-data{ display:flex; flex-direction:column; }
.contact-label{ font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--far-sky); }
.contact-value{ font-size:14px; font-weight:600; color:var(--far-white); margin-top:2px; }

/* =========================================
   FOOTER MINI (info bar)
   ========================================= */
.footer-bar{
  position:absolute;
  bottom:0; left:0; right:0;
  height:32px;
  padding:0 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:10.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(201,212,222,.45);
  border-top:1px solid rgba(201,212,222,.08);
  background:rgba(11,24,34,.6);
  z-index:20;
}
.footer-bar .dot{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--far-sky); margin-right:8px;
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ opacity:.5; transform:scale(1); }
  50%   { opacity:1;  transform:scale(1.4); }
}

/* =========================================
   CONTACTO v2 — Mapa + datos + WhatsApp + Instagram
   ========================================= */
.contacto-v2 .h-display{ font-size:clamp(38px, 4.6vw, 64px); }
.contact-col .lead{ margin-top:14px; max-width:48ch; }
.map-link-arrow{ margin-left:6px; }
.contacto-v2{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap:40px;
  height:100%;
  align-items:stretch;
  padding-top:6px;
  padding-bottom:50px; /* deja aire respecto al footer-bar */
}

/* ---- Tarjeta del mapa ---- */
.map-card{
  position:relative;
  display:flex;
  flex-direction:column;
  background:rgba(15,31,46,.55);
  border:1px solid rgba(201,212,222,.10);
  border-radius:18px;
  overflow:hidden;
  backdrop-filter:blur(10px);
}
.map-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 22px;
  border-bottom:1px solid rgba(201,212,222,.08);
  background:rgba(11,24,34,.5);
}
.map-title{
  margin-top:6px;
  font-size:18px;
  font-weight:700;
  color:var(--far-white);
  letter-spacing:.01em;
}
.map-link{
  font-size:11px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--far-sky);
  padding:8px 14px;
  border-radius:8px;
  border:1px solid rgba(58,123,168,.35);
  transition:background .2s ease;
}
.map-link:hover{ background:rgba(58,123,168,.12); }

.map-frame{
  position:relative;
  flex:1;
  min-height:280px;
}
.map-frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  /* Filtro que tinta el mapa hacia el azul de marca sin perder legibilidad */
  filter:
    grayscale(.45)
    saturate(.75)
    contrast(.95)
    brightness(.85)
    hue-rotate(178deg);
}
.map-tint{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(15,31,46,.18) 0%, rgba(15,31,46,0) 25%, rgba(15,31,46,0) 75%, rgba(15,31,46,.25) 100%),
    radial-gradient(circle at 50% 50%, rgba(58,123,168,.05), transparent 70%);
  mix-blend-mode:multiply;
}

/* ---- Columna derecha ---- */
.contact-col{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:0 4px;
}

.btn-wsp{
  display:inline-flex;
  align-items:center;
  gap:12px;
  align-self:flex-start;
  margin-top:24px;
  padding:16px 24px;
  border-radius:12px;
  font-size:14px;
  font-weight:700;
  letter-spacing:.06em;
  color:#062D1A;
  background:linear-gradient(180deg, #25D366 0%, #1FAE54 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    0 10px 26px -8px rgba(37,211,102,.6);
  transition:transform .15s ease, box-shadow .2s ease;
}
.btn-wsp:hover{
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    0 12px 30px -8px rgba(37,211,102,.7);
}
.btn-wsp svg{ flex-shrink:0; }
.btn-wsp .btn-arrow{ margin-left:4px; font-size:14px; }

/* Fila de CTAs — WA ocupa toda la fila superior; IG y ML comparten la inferior */
.contact-btns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:22px;
}
.contact-btns .btn-wsp{
  grid-column:1 / -1; /* ocupa ambas columnas */
  justify-content:center;
}
.btn-ig{
  display:inline-flex;
  align-items:center;
  gap:12px;
  align-self:flex-start;
  padding:16px 22px;
  border-radius:12px;
  font-size:14px;
  font-weight:700;
  letter-spacing:.06em;
  color:#fff;
  background:linear-gradient(120deg, #515BD4 0%, #8134AF 28%, #DD2A7B 60%, #F58529 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    0 10px 26px -8px rgba(221,42,123,.55);
  transition:transform .15s ease, box-shadow .2s ease;
}
.btn-ig:hover{
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    0 12px 30px -8px rgba(221,42,123,.7);
}
.btn-ig svg{ flex-shrink:0; }
.btn-ig .btn-arrow{ margin-left:2px; font-size:14px; }

/* Botón Mercado Libre — amarillo de marca ML con texto azul ML */
.btn-ml{
  display:inline-flex;
  align-items:center;
  gap:12px;
  align-self:flex-start;
  padding:16px 22px;
  border-radius:12px;
  font-size:14px;
  font-weight:700;
  letter-spacing:.06em;
  color:#2D3277;
  background:linear-gradient(180deg, #FFE600 0%, #FFD400 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 10px 26px -8px rgba(255,214,0,.55);
  transition:transform .15s ease, box-shadow .2s ease;
}
.btn-ml:hover{
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 12px 30px -8px rgba(255,214,0,.8);
}
.btn-ml svg{ flex-shrink:0; }
.btn-ml .btn-arrow{ margin-left:2px; font-size:14px; }

/* ---- Lista de contacto ---- */
.contact-info-v2{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:22px;
}
.contact-item-v2{
  display:grid;
  grid-template-columns: 44px 1fr auto;
  gap:16px;
  align-items:center;
  padding:14px 18px;
  border-radius:12px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(201,212,222,.10);
  transition: background .2s ease, border-color .2s ease, transform .15s ease;
  cursor:pointer;
}
.contact-item-v2:hover{
  background:rgba(58,123,168,.08);
  border-color:rgba(58,123,168,.4);
  transform:translateX(2px);
}
.contact-item-v2 .contact-icon{
  width:44px; height:44px;
  border-radius:11px;
}
.contact-cta{
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--far-sky);
  white-space:nowrap;
}

.contact-hours{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid rgba(201,212,222,.10);
  font-size:13px;
  color:var(--far-aluminum);
}
.contact-hours strong{ color:var(--far-white); font-weight:700; }
.dot-on{
  width:8px; height:8px; border-radius:50%;
  background:#25D366;
  box-shadow: 0 0 10px rgba(37,211,102,.7);
  animation:pulse 2s ease-in-out infinite;
}

@media (max-width:1100px){
  .contacto-v2{ grid-template-columns:1fr; gap:20px; }
  .map-card{ min-height:260px; }
}

/* =========================================
   SIDE NAV ARROWS — desktop, sutiles a los costados
   ========================================= */
.side-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:25;
  width:46px;
  height:80px;
  border-radius:14px;
  background:rgba(15,31,46,.5);
  border:1px solid rgba(201,212,222,.10);
  color:var(--far-aluminum);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  backdrop-filter:blur(8px);
  opacity:.4;
  transition: opacity .25s ease, background .25s ease, transform .15s ease, border-color .25s ease;
}
.side-nav:hover{
  opacity:1;
  background:rgba(46,92,126,.55);
  border-color:rgba(58,123,168,.5);
  color:var(--far-white);
}
.side-nav.left  { left:14px; }
.side-nav.right { right:14px; }
.side-nav:hover.left  { transform:translateY(-50%) translateX(-2px); }
.side-nav:hover.right { transform:translateY(-50%) translateX( 2px); }
.side-nav:disabled{
  opacity:.12;
  cursor:not-allowed;
  pointer-events:none;
}

/* =========================================
   MULLION — wrapper genérico (vertical|horizontal)
   ========================================= */
.mullion{
  position:absolute;
  pointer-events:none;
  z-index:50;
}
.mullion.vertical{
  top:0; bottom:0;
  width:42px;
}
.mullion.horizontal{
  left:0; right:0;
  height:42px;
}
.mullion.horizontal .slider-mullion{
  /* Variante horizontal del mullion */
  background:
    linear-gradient(180deg, #1A2530 0%, #C9D4DE 35%, #F4F6F8 50%, #C9D4DE 65%, #1A2530 100%);
}
.mullion.horizontal .slider-handle{
  /* Manija rotada para el mullion horizontal */
  width:60px; height:14px;
  border-radius:8px;
}
.mullion-shadow{
  position:absolute;
  background:linear-gradient(90deg, transparent, rgba(0,0,0,.55));
}
.mullion.vertical .mullion-shadow.ahead  { top:0; bottom:0; left:-60px; width:60px; background:linear-gradient(90deg, transparent, rgba(0,0,0,.55)); }
.mullion.vertical .mullion-shadow.behind { top:0; bottom:0; left:42px;  width:60px; background:linear-gradient(-90deg, transparent, rgba(0,0,0,.55)); }
.mullion.horizontal .mullion-shadow.ahead  { left:0; right:0; top:-60px; height:60px; background:linear-gradient(180deg, transparent, rgba(0,0,0,.55)); }
.mullion.horizontal .mullion-shadow.behind { left:0; right:0; top:42px;  height:60px; background:linear-gradient(0deg,   transparent, rgba(0,0,0,.55)); }

/* =========================================
   MOBILE — header, hamburger, menú desplegable
   ========================================= */
.nav-mobile{
  width:100%;
  display:grid;
  grid-template-columns: 44px 1fr 44px;
  align-items:center;
  padding:0 18px;
  gap:14px;
}
.nav-mobile .logo-wrap{
  width:64px; height:64px;
  justify-self:center;
}
.nav-mobile .logo-disk{
  width:100%; height:100%;
  border-radius:50%;
  overflow:hidden;
  background:var(--far-white);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px -6px rgba(0,0,0,.55);
}

.hamburger{
  width:44px; height:44px;
  border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(201,212,222,.15);
  color:var(--far-aluminum);
  display:flex; align-items:center; justify-content:center;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.hamburger:hover, .hamburger[aria-expanded="true"]{
  background:rgba(58,123,168,.18);
  border-color:rgba(58,123,168,.5);
  color:var(--far-white);
}

.nav-mobile-spacer{
  width:44px;
  height:44px;
}

/* Menú desplegable (drawer) */
.mobile-menu{
  position:fixed;
  top:84px;       /* debajo del header */
  left:0;
  right:0;
  bottom:0;
  z-index:40;
  pointer-events:none;
}
.mobile-menu.open{ pointer-events:auto; }

.mobile-menu-bg{
  position:absolute;
  inset:0;
  background:rgba(11,24,34,.0);
  transition:background .3s ease;
  z-index:1;
}
.mobile-menu.open .mobile-menu-bg{
  background:rgba(11,24,34,.7);
  backdrop-filter:blur(4px);
}

.mobile-menu-inner{
  position:absolute;
  top:0; left:14px; right:14px;
  z-index:2;     /* importante: por encima del backdrop */
  background:linear-gradient(180deg, #122332 0%, #0B1822 100%);
  border:1px solid rgba(201,212,222,.12);
  border-radius:18px;
  padding:10px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.7);
  transform:translateY(-12px);
  opacity:0;
  transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .25s ease;
}
.mobile-menu.open .mobile-menu-inner{
  transform:translateY(0);
  opacity:1;
}
.mobile-menu-item{
  width:100%;
  display:grid;
  grid-template-columns: 40px 1fr auto;
  align-items:center;
  gap:14px;
  padding:18px 14px;
  border-radius:12px;
  background:transparent;
  color:var(--far-cloud);
  text-align:left;
  transition: background .2s ease, color .2s ease;
}
.mobile-menu-item + .mobile-menu-item{
  border-top:1px solid rgba(201,212,222,.08);
}
.mobile-menu-item:hover{ background:rgba(255,255,255,.025); }
.mobile-menu-item.active{
  background:linear-gradient(180deg, rgba(46,92,126,.35), rgba(26,58,82,.45));
}
.mm-idx{
  font-size:11px;
  font-weight:600;
  letter-spacing:.18em;
  color:var(--far-sky);
}
.mm-label{
  font-size:18px;
  font-weight:700;
  color:var(--far-white);
  letter-spacing:.01em;
}
.mm-arrow{
  color:var(--far-aluminum);
  font-size:18px;
}
.mobile-menu-item.active .mm-arrow{ color:var(--far-sky); }

/* =========================================
   RESPONSIVE LAYOUTS — todas las secciones
   ========================================= */
@media (max-width: 900px){
  .app{ overflow:hidden; }
  .header{
    height:84px;
    padding:14px 0 0;
  }
  .stage{
    /* Reservamos un poco menos de aire abajo para el footer */
  }
  .section{
    padding: 16px 18px 24px;
    overflow-y:auto;   /* permitir scroll DENTRO de la sección si excede,
                          en mobile es razonable porque cada sección
                          puede tener más alto que el viewport */
    -webkit-overflow-scrolling:touch;
  }

  /* Ocultamos el footer-bar en mobile: el contador y los hints
     no aportan en pantalla chica y se superponían con el contenido */
  .footer-bar{ display:none; }

  /* ---- Hero mobile ---- */
  .hero{
    grid-template-columns:1fr;
    gap:24px;
    align-items:flex-start;
    padding-top:0;
  }
  .hero-left{ padding-left:0; }
  .hero-right{ display:flex; height:auto; min-height:380px; }
  .h-display{ font-size:38px !important; }
  .hero-stats{
    grid-template-columns:repeat(3, 1fr);
    gap:14px;
    margin-top:18px;
    padding-top:16px;
  }
  .stat-num{ font-size:22px; }
  .stat-lbl{ font-size:9px; letter-spacing:.14em; }

  .hero-carousel{
    width:100%;
    max-height:none;
    height:auto;
    grid-template-columns: 36px 1fr 36px;
  }
  .hc-stage{ min-height:340px; }
  .hw{
    width:240px;
    height:320px;
  }
  .hc-arrow{ width:36px; height:36px; }
  .hc-floating-hint{ display:none; }

  /* ---- Productos mobile ---- */
  .products{
    grid-template-columns:1fr;
    gap:18px;
    height:auto;
  }
  .products-stage{ min-height:300px; height:auto; }
  .products-stage .w3d-scene{ transform: scale(.66); }
  .products-right{ padding-top:0; }
  .spec-strip-4{ grid-template-columns: repeat(2, 1fr); gap:12px 0; }
  .feat-list{ grid-template-columns:1fr; }
  .dd-menu{ max-height:50vh; overflow-y:auto; }

  /* ---- Nosotros mobile ---- */
  .nosotros{
    grid-template-columns:1fr;
    gap:22px;
    height:auto;
    align-items:stretch;
  }
  .nosotros .h-display{ font-size:38px !important; }
  .values{ grid-template-columns:1fr 1fr; gap:10px; }
  .value{ padding:14px; }
  .obra-gallery{ flex:none; }
  .obra-main{ height:260px; flex:none; }
  .obra-lightbox{ padding:32px 16px; }
  .obra-lightbox .obra-arrow.left{ left:8px; }
  .obra-lightbox .obra-arrow.right{ right:8px; }

  /* ---- Contacto mobile ---- */
  .contacto-v2{
    grid-template-columns:1fr;
    gap:18px;
    padding-bottom:80px;
  }
  .map-card{ min-height:240px; }
  .map-frame{ min-height:200px; }
  .contacto-v2 .h-display{ font-size:42px !important; }
  .contact-item-v2{
    grid-template-columns: 40px 1fr;
    padding:12px 14px;
  }
  .contact-item-v2 .contact-cta{ display:none; }
  .contact-btns{ gap:10px; }
  .btn-wsp, .btn-ig, .btn-ml{
    width:100%;
    justify-content:center;
    padding:14px 18px;
  }

}

/* ---- Mobile chico (< 480px) ---- */
@media (max-width: 480px){
  .h-display{ font-size:32px !important; }
  .nosotros .h-display, .contacto-v2 .h-display{ font-size:34px !important; }
  .nav-mobile{ padding:0 12px; }
  .nav-mobile-section{ font-size:9px; letter-spacing:.16em; }
  .section{ padding:12px 14px 60px; }
  .values{ grid-template-columns:1fr; }
  .spec-strip-4{ grid-template-columns: repeat(2, 1fr); }
}

/* =========================================
   INTRO — apertura tipo ventana corrediza
   ========================================= */
.intro{
  position:fixed; inset:0;
  z-index:9999;
  pointer-events:none;
  overflow:hidden;
}

/* Mientras la intro está visible, bloqueamos la app por debajo
   para evitar que el usuario interactúe a través del overlay */
.app.intro-pending{ pointer-events:none; }
.app.intro-pending .stage,
.app.intro-pending .header{ filter: blur(2px); opacity:.85; transition: filter .8s ease, opacity .8s ease; }
.app.intro-done    .stage,
.app.intro-done    .header{ filter: none; opacity:1; transition: filter .8s ease, opacity .8s ease; }

/* Dos paneles que cubren la pantalla; al abrir, cada uno se va a su lado */
.intro-panel{
  position:absolute; top:0; bottom:0; width:50%;
  background:
    radial-gradient(900px 600px at 70% 30%, rgba(58,123,168,.16), transparent 60%),
    linear-gradient(180deg, #0B1822 0%, #0F1F2E 50%, #0A1620 100%);
  transition: transform 1050ms cubic-bezier(.76,.02,.24,1);
  will-change: transform;
}
.intro-panel.left { left:0;  transform: translateX(0); box-shadow: inset -1px 0 0 rgba(201,212,222,.10); }
.intro-panel.right{ right:0; transform: translateX(0); box-shadow: inset  1px 0 0 rgba(201,212,222,.10); }

/* Borde interno de cada hoja — la "junta" de aluminio */
.intro-edge{
  position:absolute; top:0; bottom:0; width:2px;
  background: linear-gradient(180deg,
    rgba(201,212,222,0) 0%,
    rgba(201,212,222,.18) 12%,
    rgba(201,212,222,.45) 50%,
    rgba(201,212,222,.18) 88%,
    rgba(201,212,222,0) 100%);
}
.intro-panel.left  .intro-edge{ right:0; }
.intro-panel.right .intro-edge{ left:0;  }

/* Hilo de luz central que aparece cuando el logo está montado */
.intro-seam{
  position:absolute; top:0; bottom:0; left:50%; width:1px;
  transform:translateX(-50%);
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255,255,255,.0) 20%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,.0) 80%,
    transparent 100%);
  opacity:0;
  transition: opacity 600ms ease;
}
.intro-hold .intro-seam,
.intro-open .intro-seam{ opacity:1; }

/* Logo + wordmark centrado */
.intro-logo{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:22px;
  opacity:0;
  transform:scale(.9);
  transition:
    opacity 850ms cubic-bezier(.2,.7,.2,1),
    transform 1100ms cubic-bezier(.2,.7,.2,1);
  filter: drop-shadow(0 22px 60px rgba(58,123,168,.45));
}
.intro-enter .intro-logo,
.intro-hold  .intro-logo{ opacity:1; transform:scale(1); }
.intro-open  .intro-logo{
  opacity:0; transform:scale(1.08);
  transition: opacity 650ms ease-out, transform 1000ms cubic-bezier(.7,.05,.25,1);
}

/* Disco circular que contiene el logo en la intro */
.intro-logo-disk{
  width:220px; height:220px;
  border-radius:50%;
  overflow:hidden;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:
    0 0 0 6px rgba(255,255,255,.08),
    0 24px 60px rgba(0,0,0,.45);
  flex-shrink:0;
}

/* Resplandor sutil detrás del logo */
.intro-logo-glow{
  position:absolute;
  width:520px; height:520px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(58,123,168,.28) 0%, rgba(58,123,168,0) 65%);
  filter: blur(8px);
  animation: introBreath 2.6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes introBreath{
  0%, 100%{ transform:scale(1);   opacity:.85; }
  50%     { transform:scale(1.06); opacity:1; }
}

.intro-wordmark{
  font:700 15px/1 'Montserrat', system-ui, sans-serif;
  letter-spacing:.42em;
  padding-left:.42em;
  color:#E8EEF4;
  opacity:0;
  transform:translateY(10px);
  animation: introWord 900ms cubic-bezier(.2,.7,.2,1) 280ms forwards;
}
.intro-tagline{
  font:500 11px/1 'Montserrat', system-ui, sans-serif;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:#3A7BA8;
  opacity:0;
  transform:translateY(6px);
  animation: introWord 900ms cubic-bezier(.2,.7,.2,1) 520ms forwards;
}
@keyframes introWord{
  to{ opacity:.92; transform:translateY(0); }
}

/* La apertura — paneles afuera */
.intro-open .intro-panel.left { transform: translateX(-100%); }
.intro-open .intro-panel.right{ transform: translateX( 100%); }

/* En mobile la "ventana" se abre vertical (arriba/abajo),
   coherente con la navegación vertical del sitio */
@media (max-width:900px){
  .intro-panel{ width:100%; height:50%; }
  .intro-panel.left { top:0;    left:0; right:0; bottom:auto; box-shadow: inset 0 -1px 0 rgba(201,212,222,.10); }
  .intro-panel.right{ bottom:0; left:0; right:0; top:auto;    box-shadow: inset 0  1px 0 rgba(201,212,222,.10); }
  .intro-panel.left  .intro-edge{ right:auto; left:0; bottom:0; top:auto; width:100%; height:2px;
    background: linear-gradient(90deg,
      rgba(201,212,222,0) 0%, rgba(201,212,222,.45) 50%, rgba(201,212,222,0) 100%);
  }
  .intro-panel.right .intro-edge{ left:0; top:0; right:auto; bottom:auto; width:100%; height:2px;
    background: linear-gradient(90deg,
      rgba(201,212,222,0) 0%, rgba(201,212,222,.45) 50%, rgba(201,212,222,0) 100%);
  }
  .intro-seam{ left:0; right:0; top:50%; bottom:auto; width:auto; height:1px; transform:translateY(-50%);
    background: linear-gradient(90deg,
      transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
  }
  .intro-open .intro-panel.left { transform: translateY(-100%); }
  .intro-open .intro-panel.right{ transform: translateY( 100%); }
  .intro-logo-glow{ width:360px; height:360px; }
  .intro-wordmark{ font-size:13px; letter-spacing:.36em; }
}

@media (prefers-reduced-motion: reduce){
  .intro{ display:none; }
  .app.intro-pending .stage,
  .app.intro-pending .header{ filter:none; opacity:1; }
}