/* DOFA Grupo Industrial · maqueta
   Hoja de estilos heredada de la maqueta de Grupo TREGON (misma estructura), recoloreada. */

:root{
  /* DOFA: azul marino #1E4A71 y ámbar #EBA70E, tomados del CSS de dofagi.com.mx.
     --medio es el ámbar oscurecido: el #EBA70E sobre blanco no alcanza contraste
     para texto chico, así que en fondo claro se usa este y en fondo oscuro --claro. */
  --navy:#1E4A71;
  --azul:#1E4A71;
  --medio:#9A6800;
  --claro:#EBA70E;
  --ambar:#EBA70E;
  --gris:#5E6670;
  --grad:linear-gradient(135deg,#1E4A71,#2B6496);
  --bg:#F3F5F7;
  --line:rgba(30,74,113,.14);
  --display:"Aldrich", system-ui, sans-serif;
  --texto:"Montserrat", system-ui, -apple-system, sans-serif;
  --gutter:40px;
  --ancho:1320px;
}

*{box-sizing:border-box}
body{
  margin:0;background:#fff;color:#22262c;
  /* El peso base es 500: su sitio actual usa texto mas cargado que un 400 */
  font-family:var(--texto);font-weight:500;font-size:16.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
a{color:inherit;text-decoration:none}

.wrap{max-width:var(--ancho);margin:0 auto;padding:0 var(--gutter)}

/* Regla de marca: los titulos SIEMPRE van en mayusculas */
h1,h2,h3{
  font-family:var(--display);font-weight:400;color:var(--navy);
  letter-spacing:.012em;
}
h1{font-size:clamp(30px,3.8vw,50px);line-height:1.14;margin:0 0 22px}
h2{font-size:clamp(23px,2.7vw,35px);line-height:1.2;margin:0 0 16px}
h3{font-size:18.5px;line-height:1.3;margin:0 0 9px;letter-spacing:.03em}
p{margin:0 0 16px}
.lead{font-size:18.5px;font-weight:600;line-height:1.58;color:#3d4753}
.eyebrow{
  font-family:var(--display);font-size:11.5px;letter-spacing:.2em;
  color:var(--medio);margin:0 0 15px;
}

/* ── Botones ── */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-weight:700;font-size:15px;letter-spacing:.01em;padding:15px 28px;border-radius:3px;
  border:1.5px solid transparent;cursor:pointer;transition:transform .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primario{background:var(--grad);color:#fff}
.btn-blanco{background:#fff;color:var(--navy)}
.btn-linea{border-color:var(--navy);color:var(--navy)}
.btn-linea-inv{border-color:rgba(255,255,255,.55);color:#fff}

/* ══ ENCABEZADO ══ */
.top{background:var(--navy);color:#fff;font-size:13px}
.top .in{display:flex;justify-content:space-between;align-items:center;height:40px;
  font-family:var(--display);font-size:11.5px}
.top a{color:var(--claro)}
.top .enlaces{display:flex;gap:24px}
.top .enlaces a{}
.top .enlaces a:hover{color:#fff}

/* La barra se queda pegada arriba en todo el sitio.
   El margen negativo es lo que le permite seguir flotando sobre el video del inicio
   sin empujarlo hacia abajo: sticky si reserva su lugar en el flujo, absolute no.
   La altura NO cambia al pegarse, a proposito: si encogiera, el contenido daria un
   brinco de 20 y pico pixeles justo cuando el visitante empieza a leer. */
.nav{position:sticky;top:0;z-index:40;margin-bottom:-92px;transition:background .25s ease,box-shadow .25s ease}
.nav.solida{margin-bottom:0;background:#fff;border-bottom:1px solid var(--line)}
.nav .in{display:flex;align-items:center;justify-content:space-between;height:92px}

/* Ya se desplazo: la barra se vuelve solida */
.nav.pegada{background:#fff;box-shadow:0 12px 34px -24px rgba(16,46,74,.9)}
.nav.pegada .menu a:not(.btn){color:#3d4753}
.nav.pegada .menu a:not(.btn):hover,.nav.pegada .menu a.aqui:not(.btn){color:var(--navy);border-color:var(--medio)}
.nav.pegada .lockup{color:var(--navy)}
.nav.pegada .marca.inv{filter:none}
.nav.pegada .btn-blanco{background:var(--grad);color:#fff}
.nav.solida.pegada{border-bottom-color:transparent}
.nav .menu{display:flex;align-items:center;gap:28px}
/* El boton de menu solo existe en movil; en escritorio los enlaces se ven. */
.hamburguesa{
  display:none;background:none;border:0;padding:0;cursor:pointer;
  width:44px;height:44px;flex:none;  /* 44px es el minimo tocable comodo */
  flex-direction:column;justify-content:center;align-items:flex-end;gap:5px;
}
.hamburguesa span{
  display:block;height:2px;width:26px;background:#fff;
  transition:transform .22s ease,opacity .18s ease;
}
.nav.solida .hamburguesa span,.nav.pegada .hamburguesa span,
.nav.menu-abierto .hamburguesa span{background:var(--navy)}
/* Abierto: las tres barras se vuelven una cruz. */
.nav.menu-abierto .hamburguesa span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.menu-abierto .hamburguesa span:nth-child(2){opacity:0}
.nav.menu-abierto .hamburguesa span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.solo-movil{display:none}
/* Regla del cliente (24-ago): el menu tambien va en mayusculas.
   En caja alta lee mas grande, asi que el tamano baja y el interletrado sube. */
.nav .menu a:not(.btn){font-size:13px;font-weight:700;color:rgba(255,255,255,.92);
  
  padding:6px 0;border-bottom:2px solid transparent}
.nav .menu a:not(.btn):hover{color:#fff;border-color:var(--claro)}
.nav.solida .menu a:not(.btn){color:#3d4753}
.nav.solida .menu a:not(.btn):hover{color:var(--navy);border-color:var(--medio)}
/* La pagina en la que estas parado */
.nav .menu a.aqui:not(.btn){color:#fff;border-color:var(--claro)}
.nav.solida .menu a.aqui:not(.btn){color:var(--navy);border-color:var(--medio)}

/* lockup: logo + barra + unidad */
/* El logotipo va como lo tiene la marca: isotipo arriba, nombre abajo */
.lockup{display:flex;align-items:center;gap:18px;color:#fff}
.lockup.oscuro{color:var(--navy)}
.lockup .marca{height:68px;width:auto;flex:0 0 auto;display:block}
.lockup .marca.inv{filter:brightness(0) invert(1)}
/* Dentro de una unidad va solo el isotipo, sin el nombre debajo */
.lockup .marca.solo{height:52px}
.lockup .barra{width:1px;height:46px;background:currentColor;opacity:.3}
.lockup .unidad{font-family:var(--display);font-size:18px;
  line-height:1}

/* ══ HERO ══ */
.hero{
  position:relative;min-height:min(88vh,720px);display:flex;align-items:flex-end;
  color:#fff;overflow:hidden;
}
.hero .fondo{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero .fondo img{width:100%;height:100%;object-fit:cover;object-position:center 38%;display:block}
/* El video institucional, servido desde el propio dominio. Al ser un <video> de verdad
   basta object-fit:cover y ya no hace falta la sobremedida en vh que pedia el iframe. */
.hero .fondo video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 45%;display:block;pointer-events:none;
}
/* Se queda para los videos de YouTube que siguen incrustados en otras secciones. */
.hero .fondo iframe{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100vw;height:56.25vw;min-height:100%;min-width:177.78vh;
  border:0;pointer-events:none;
}
/* El velo son DOS capas y se multiplican: la opacidad que se ve no es la que
   dice cada gradiente. Con .94 y .72 encimados el titular quedaba a ~98% y el
   video no se veia. Bajado el 4-sep a peticion del cliente: detras del titular
   da ~55% efectivo y a la derecha ~21%, para que el video respire. */
.hero .velo{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg, rgba(16,46,74,.46) 0%, rgba(16,46,74,.40) 38%, rgba(16,46,74,.16) 72%, rgba(16,46,74,.22) 100%),
    linear-gradient(180deg, rgba(16,46,74,.34) 0%, rgba(16,46,74,.03) 45%, rgba(16,46,74,.52) 100%);
}
/* Con el velo al 50% el blanco pierde respaldo si el cuadro del video sale
   claro. La sombra suave lo sostiene sin volver a oscurecer la imagen. */
.hero h1,.hero .lead{text-shadow:0 2px 18px rgba(12,24,48,.55)}
/* OJO: aqui NO se usa el shorthand de padding, borraria el lateral que pone .wrap */
.hero .in{position:relative;z-index:2;padding-top:178px;padding-bottom:74px;width:100%}
/* El bloque de texto NO se centra: arranca en la misma columna del logotipo */
.hero .caja{max-width:720px;margin:0}
.hero h1{color:#fff}
/* Regla de marca: dentro de un titulo la palabra clave cambia de voz.
   El renglon sigue en Aldrich y en mayusculas; la parte que importa se escribe
   en Montserrat, en cursiva y un punto mas grande.

   Viene del 28-ago y se habia quedado del otro lado de la bifurcacion del repo.
   Se porta el 4-sep porque el cliente volvio a pedir lo mismo por WhatsApp:
   "a desarrollo inmobiliario ponlo un poco mas grande en montserrat y cursiva". */
h1 em,h2 em,h3 em,.clave{
  font-family:var(--texto);font-style:italic;font-weight:600;
  font-size:1.14em;letter-spacing:-.005em;color:var(--medio);
}
/* Sobre fondo oscuro la palabra clave se ilumina en vez de oscurecerse */
.hero .clave,.hero h1 em,.hero h2 em,
.cifras .clave,.cifras h2 em,
.contacto .clave,.contacto h2 em,
.u .clave,.u h3 em,
.pie .clave{color:var(--claro)}
.hero .lead{color:#e2eaf4;max-width:600px;font-weight:600}
.hero .acc{display:flex;gap:13px;margin-top:30px;flex-wrap:wrap}
.hero .firma{
  margin-top:38px;padding-top:20px;border-top:1px solid rgba(255,255,255,.22);
  font-family:var(--display);font-size:12px;color:rgba(255,255,255,.72);
}
.hero .nota-video{
  position:absolute;right:var(--gutter);bottom:20px;z-index:3;
  font-family:var(--display);font-size:10px;color:rgba(255,255,255,.5);
}


/* == SOLUCIONES INTEGRALES, DICHO CON TEXTO ==
   El 24-ago el cliente descarto el grafico: la idea se explica escribiendola. */
.integral{background:#0F2E4A;color:#fff;padding:46px 0;
  border-top:1px solid rgba(255,255,255,.10)}
.integral .wrap{display:grid;grid-template-columns:1.3fr 1fr;gap:46px;align-items:center}
.integral .frase{
  font-family:var(--display);margin:0;color:#fff;
  font-size:clamp(19px,2.05vw,27px);line-height:1.3;letter-spacing:.015em;
}
.integral .frase em{font-style:normal;color:var(--claro)}
.integral .nota{margin:0;font-size:15.5px;font-weight:500;color:#c6d4e6;line-height:1.6}

/* ══ UNIDADES ══ */
.unidades{padding:78px 0 84px}
.unidades .cab{max-width:760px;margin-bottom:38px}
.uu{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.u{
  position:relative;display:block;overflow:hidden;border-radius:3px;
  min-height:440px;background:var(--navy);
}
.u img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.u:hover img{transform:scale(1.06)}
.u .velo{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(16,46,74,.06) 0%, rgba(16,46,74,.10) 46%,
             rgba(16,46,74,.72) 72%, rgba(16,46,74,.95) 100%);
}
.u .cn{position:absolute;left:0;right:0;bottom:0;padding:22px 20px 22px;color:#fff}
.u .num{font-family:var(--display);font-size:10.5px;letter-spacing:.2em;color:var(--claro)}
.u h3{color:#fff;margin:9px 0 8px;font-size:19.5px;}
.u p{font-size:13.8px;color:#cfdcea;line-height:1.45;margin:0 0 12px}
.u .ir{font-size:13px;font-weight:700;color:#fff;opacity:.95;letter-spacing:.02em}

/* ══ CIFRAS ══ */
.cifras{background:var(--navy);color:#fff;padding:66px 0}
.cifras .g{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
/* Con las seis cifras que quedaron el 23-sep, cuatro columnas dejan una fila
   coja de dos. Tres por fila reparten 3+3 y la cifra larga respira. */
.cifras .g.seis{grid-template-columns:repeat(3,1fr);gap:30px 40px}
.cifras .n{font-family:var(--display);font-size:clamp(25px,2.45vw,34px);line-height:1.05;white-space:nowrap;
  color:var(--claro);letter-spacing:.01em}
/* Las etiquetas van en mayusculas, como en su lamina de experiencia */
.cifras .l{font-family:var(--display);font-size:14px;color:#b9c8dd;margin-top:14px;line-height:1.35;
  }
.cifras .cab{display:flex;justify-content:space-between;align-items:flex-end;
  gap:36px;margin-bottom:40px;flex-wrap:wrap}
.cifras h2{color:#fff;margin:0;max-width:640px}
.cifras .cab p{color:#c6d4e6;margin:0;max-width:420px;font-size:15.5px;font-weight:500}

/* ══ TRAYECTO ══ */
.trayecto{padding:78px 0;background:var(--bg)}
.pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:40px}
.paso{background:#fff;border:1px solid var(--line);border-top:3px solid var(--azul);padding:26px 24px}
.paso .k{font-family:var(--display);font-size:11px;color:var(--medio)}
.paso h3{margin:13px 0 9px;font-size:17px}
.paso p{font-size:14.5px;font-weight:500;color:var(--gris);margin:0;line-height:1.52}

/* ══ PREVENTA ══ */
.preventa{padding:78px 0}
.preventa .cab{display:flex;justify-content:space-between;align-items:flex-end;
  gap:30px;margin-bottom:34px;flex-wrap:wrap}
.casas{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.casa{border:1px solid var(--line);overflow:hidden;transition:box-shadow .2s ease}
.casa:hover{box-shadow:0 22px 46px -30px rgba(16,46,74,.6)}
.casa .im{height:200px;position:relative;background:var(--grad);overflow:hidden}
.casa .im img{width:100%;height:100%;object-fit:cover;display:block;opacity:.9}
.casa .est{position:absolute;left:15px;top:15px;background:#fff;color:var(--navy);
  font-family:var(--display);font-size:10px;padding:7px 12px}
.casa .cn{padding:22px 24px 24px}
.casa h3{margin:0 0 5px;font-size:17.5px}
.casa .z{font-size:14px;font-weight:600;color:var(--gris);margin-bottom:16px}
.casa .d{display:flex;gap:20px;border-top:1px solid var(--line);padding-top:14px;
  font-size:13.5px;color:var(--gris)}
.casa .d b{display:block;font-family:var(--display);font-size:16px;color:var(--navy)}
/* Las palomas son del renglon completo, NO de la tercera columna de datos.
   Estaban anidadas dentro del <div> de "Entrega" y se veian colgando de ahi. */
.casa .palomas{margin:14px 0 0;padding-top:13px;border-top:1px solid var(--line)}

/* ══ PREGUNTAS FRECUENTES ══ */
.faq{padding:78px 0;border-top:1px solid var(--line)}
.faq .cab{max-width:760px;margin-bottom:36px}
.faq .lista{border-top:1px solid var(--line)}
.faq .q{border-bottom:1px solid var(--line);padding:24px 0;display:grid;
  grid-template-columns:1fr 1.35fr;gap:36px;align-items:start}
.faq .q h3{margin:0;font-size:17px;line-height:1.32}
.faq .q p{margin:0;font-size:15.5px;font-weight:500;color:#3d4753;line-height:1.62}

/* ══ NOSOTROS ══ */
.nosotros{padding:78px 0;background:var(--bg);border-top:1px solid var(--line)}
.nosotros .g{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.linea{margin-top:8px;border-left:2px solid var(--line);padding-left:26px}
.linea .h{position:relative;padding-bottom:26px}
.linea .h:last-child{padding-bottom:0}
.linea .h::before{content:"";position:absolute;left:-33px;top:5px;width:12px;height:12px;
  background:var(--medio);border:3px solid var(--bg);border-radius:2px;transform:rotate(45deg)}
.linea .a{font-family:var(--display);font-size:14px;color:var(--medio);}
.linea .t{font-weight:700;color:var(--navy);margin-top:3px}
.linea .d{font-size:14.5px;color:var(--gris)}

/* ══ CONTACTO ══ */
.contacto{padding:78px 0;background:var(--navy);color:#fff}
.contacto .g{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:start}
.contacto h2{color:#fff}
.contacto p{color:#c6d4e6;font-weight:500}
.form{background:#fff;padding:32px;border-radius:4px}
.form .fila{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.campo{margin-bottom:16px}
.campo label{display:block;font-family:var(--display);font-size:10px;
  color:var(--medio);margin-bottom:7px}
.campo .c{border:1px solid var(--line);padding:13px 14px;font-size:15.5px;color:var(--navy);
  background:#fff;font-weight:600}
.campo .c.ph{color:#9aa5b1;font-weight:400}
.pastillas{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pastillas .op{border:1px solid var(--line);padding:11px 12px;border-radius:2px;cursor:pointer}
.pastillas .op b{display:block;font-size:13.5px;color:var(--navy);line-height:1.2}
.pastillas .op i{display:block;font-style:normal;font-size:11.5px;font-weight:500;color:var(--gris);
  margin-top:5px;line-height:1.3}
.pastillas .op.on{background:#eef4f8;border-color:var(--medio)}
/* El formulario dejo de ser maqueta el 17-sep-2026. Estas reglas existen para que un
   input, un select y un textarea de verdad se vean EXACTAMENTE igual que los div que
   los simulaban: mismo borde, mismo padding, misma tipografia. */
.campo input.c, .campo select.c, .campo textarea.c{
  width:100%; box-sizing:border-box; font-family:inherit; border-radius:0;
  -webkit-appearance:none; appearance:none; outline:none; display:block}
.campo textarea.c{resize:vertical; min-height:88px; font-weight:400}
.campo input.c::placeholder, .campo textarea.c::placeholder{color:#9aa5b1; font-weight:400}
.campo input.c:focus, .campo select.c:focus, .campo textarea.c:focus{border-color:var(--medio)}
/* La flecha del select, que appearance:none se lleva. */
.campo select.c{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23667' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:11px; padding-right:34px}
/* Las pastillas ahora son <label> con un radio adentro: sin esto quedan en linea. */
.pastillas .op{display:block; margin:0}
/* El campo trampa del antispam. Fuera de pantalla y no display:none, porque asi
   algunos bots lo ignoran, que es justo lo contrario de lo que se busca. */
.trampa{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form .aviso.ok{color:#1b7a3e; font-weight:600}
.form .aviso.mal{color:#a4282c; font-weight:600}
.form .btn[disabled]{opacity:.6; cursor:progress}
.form .btn{width:100%;justify-content:center;margin-top:6px}
.form .aviso{font-size:12.5px;color:var(--gris);margin:14px 0 0;line-height:1.45}

/* ══ PIE ══ */
.pie{background:#0F2E4A;color:#adbdd2;padding:52px 0 30px;font-size:14.5px;font-weight:500}
.pie .g{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
.pie h4{font-family:var(--display);font-size:11px;color:#fff;
  margin:0 0 16px;font-weight:400}
.pie a{display:block;padding:5px 0;
  font-size:13px;}
.pie a:hover{color:#fff}
.pie .fin{border-top:1px solid rgba(255,255,255,.12);margin-top:38px;padding-top:20px;
  display:flex;justify-content:space-between;gap:20px;font-size:13px;flex-wrap:wrap}

/* ── Marca de maqueta ── */
.maqueta{
  position:fixed;left:16px;bottom:16px;z-index:90;background:var(--navy);color:#fff;
  font-family:var(--display);font-size:10.5px;padding:9px 16px;
  border-radius:20px;box-shadow:0 12px 28px -16px rgba(0,0,0,.75);opacity:.92;
}

@media (max-width:1100px){
  .uu{grid-template-columns:repeat(2,1fr)}
  .cifras .g,.pasos{grid-template-columns:repeat(2,1fr)}
  .cifras .g.seis{grid-template-columns:repeat(2,1fr)}
  .casas{grid-template-columns:1fr}
  .nosotros .g,.contacto .g{grid-template-columns:1fr;gap:34px}
  .faq .q{grid-template-columns:1fr;gap:10px}
  .pie .g{grid-template-columns:1fr 1fr}

  /* ── Menu de movil ──
     Antes aqui solo decia .nav .menu{display:none} y no habia reemplazo: el
     sitio no se podia navegar desde un telefono. Ahora el menu es un panel que
     baja de la barra, y el boton de Contactanos de la barra se va al panel
     porque en 390px se comia casi la mitad del ancho. */
  .hamburguesa{display:flex}
  .cta-barra{display:none}
  .solo-movil{display:block;width:100%;text-align:center;margin-top:6px}

  .nav .menu{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;top:100%;left:0;right:0;
    background:#fff;border-bottom:1px solid var(--line);
    box-shadow:0 24px 40px -28px rgba(16,46,74,.85);
    padding:8px var(--gutter) 18px;
    /* Cerrado no basta con opacidad: tiene que salir del orden de tabulacion,
       o el teclado y el lector de pantalla siguen entrando a un menu invisible. */
    visibility:hidden;opacity:0;transform:translateY(-8px);
    transition:opacity .2s ease,transform .2s ease,visibility .2s;
    max-height:calc(100vh - 92px);overflow-y:auto;
  }
  .nav.menu-abierto .menu{visibility:visible;opacity:1;transform:none}
  /* En el inicio la barra flota transparente sobre el video; con el panel
     abierto tiene que volverse solida o los enlaces caen sobre la imagen. */
  .nav.menu-abierto{background:#fff;box-shadow:0 12px 34px -24px rgba(16,46,74,.9)}
  .nav.menu-abierto .lockup{color:var(--navy)}

  /* Renglones de toque, no enlaces apretados en fila. */
  .nav .menu a:not(.btn){
    padding:15px 0;border-bottom:1px solid var(--line);border-top:0;
    font-size:14px;color:#3d4753;
  }
  .nav .menu a:not(.btn):last-of-type{border-bottom:0}
  .nav.pegada .menu a:not(.btn),.nav.menu-abierto .menu a:not(.btn){color:#3d4753}
  .nav .menu a.aqui:not(.btn),
  .nav.solida .menu a.aqui:not(.btn),
  .nav.menu-abierto .menu a.aqui:not(.btn){color:var(--navy);border-color:var(--line)}
}
@media (max-width:900px){
  .pastillas{grid-template-columns:repeat(2,1fr)}
  .integral .wrap{grid-template-columns:1fr;gap:18px}
}
@media (max-width:820px){
  .top .enlaces{display:none}
}
@media (max-width:600px){
  :root{--gutter:22px}
  .uu,.pasos,.pastillas{grid-template-columns:1fr}
  /* Estas dos rejillas se quedaban en dos columnas hasta 320px y desbordaban a
     lo ancho: .cifras .n va con nowrap y "+1.4 MILLONES" no cabe en media
     pantalla. El desborde horizontal no es solo feo, rompe el sticky de la
     barra y hace que la pagina entera se deslice de lado. */
  .cifras .g{grid-template-columns:1fr;gap:26px}
  .cifras .g.seis{grid-template-columns:1fr;gap:26px}
  .pie .g{grid-template-columns:1fr}
  .lockup .marca{height:46px}
  .form{padding:24px 20px}
  .form .fila{grid-template-columns:1fr}
  .hero .in{padding-top:138px;padding-bottom:56px}
  .hero .nota-video{display:none}
}

/* ── Conmutador de formas (solo para revision del cliente) ── */
.formas{
  position:fixed;right:16px;bottom:16px;z-index:95;display:flex;align-items:center;gap:2px;
  background:rgba(16,46,74,.94);border-radius:24px;padding:5px 7px;
  box-shadow:0 14px 30px -16px rgba(0,0,0,.8);font-family:var(--display);
}
.formas .et{font-size:9.5px;color:rgba(255,255,255,.45);padding:0 9px 0 7px}
.formas a{
  font-size:10.5px;color:rgba(255,255,255,.72);
  padding:8px 14px;border-radius:18px;white-space:nowrap;cursor:pointer;
}
.formas a.on{background:#fff;color:var(--navy)}
/* El de intensidad va encima del de formas, no encimado. Se distingue con el
   acento lima para que no se confundan de un vistazo. */
.formas.corte{bottom:62px}
.formas.corte a.on{background:var(--claro);color:var(--navy)}
@media (max-width:760px){ .formas.corte{bottom:54px} }
@media (max-width:760px){
  .formas .et{display:none}
  .formas a{padding:7px 10px;font-size:9.5px;}
}


/* ═══════════════════════════════════════════════════════════════
   COMPONENTES COMPARTIDOS DE LAS PÁGINAS INTERIORES
   Todo lo de aquí abajo es lo que las tres opciones de forma moldean.
   ═══════════════════════════════════════════════════════════════ */

/* ── Heroes de página interior ── */
.hero.unidad{min-height:min(58vh,470px)}
.hero.unidad .in{padding-top:70px;padding-bottom:64px}
.hero.corta{min-height:min(50vh,400px)}
.hero.corta .in{padding-top:70px;padding-bottom:60px}
.hero.unidad h1,.hero.corta h1{font-size:clamp(26px,3vw,39px)}

/* ── Secciones ── */
.seccion{padding:76px 0}
.seccion.gris{background:var(--bg);border-top:1px solid var(--line)}
.seccion.linea{border-top:1px solid var(--line)}
.seccion .cab{max-width:780px;margin-bottom:38px}
.seccion .cab.ancha{max-width:none;display:flex;justify-content:space-between;
  align-items:flex-end;gap:32px;flex-wrap:wrap}

/* ── Tarjeta general: el componente que más se repite en el sitio ── */
.tarjetas{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.tarjetas.dos{grid-template-columns:repeat(2,1fr)}
.tarjetas.cuatro{grid-template-columns:repeat(4,1fr)}
/* Cinco puntos en una sola fila. Con 1240px utiles cada columna queda en ~228px, asi que
   estas tarjetas van con menos aire y sin lista de palomas. Bajan a 3 y luego a 2. */
.tarjetas.cinco{grid-template-columns:repeat(5,1fr);gap:18px}
.tarjetas.cinco .cn{padding:22px 20px 24px}
.tarjetas.cinco h3{font-size:18px}
.tarjetas.cinco p{font-size:14.5px}
@media(max-width:1140px){.tarjetas.cinco{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){.tarjetas.cinco{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.tarjetas.cinco{grid-template-columns:1fr}}
.tj{border:1px solid var(--line);background:#fff;overflow:hidden;
  display:flex;flex-direction:column;transition:box-shadow .2s ease}
.tj:hover{box-shadow:0 22px 46px -30px rgba(16,46,74,.6)}
.tj .im{height:190px;position:relative;overflow:hidden;background:var(--grad)}
.tj .im img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.tj:hover .im img{transform:scale(1.05)}
.tj .et{position:absolute;left:14px;top:14px;background:#fff;color:var(--navy);
  font-family:var(--display);font-size:10px;padding:7px 12px}
.tj .cn{padding:22px 22px 24px;flex:1;display:flex;flex-direction:column}
.tj .k{font-family:var(--display);font-size:11px;color:var(--medio);
  margin-bottom:11px;display:block}
/* El <i> es el numero suelto. Aqui va pegado a la etiqueta; en la opcion
   circulos se convierte en un circulo de verdad. */
.k i{font-style:normal;margin-right:9px}
.tj h3{margin:0 0 8px;font-size:17.5px}
.tj p{font-size:14.6px;font-weight:500;color:var(--gris);line-height:1.55;margin:0 0 14px}
.tj .ir{margin-top:auto;font-size:13px;font-weight:700;color:var(--navy)}
/* Sin foto: la tarjeta se sostiene sola */
.tj.plana{border-top:3px solid var(--azul)}

/* ── Mosaico de imágenes ── */
.mosaico{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.mosaico figure{margin:0;position:relative;overflow:hidden;height:215px}
.mosaico figure.ancha{grid-column:span 2}
.mosaico img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.mosaico figure:hover img{transform:scale(1.05)}
.mosaico figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 16px 14px;color:#fff;
  font-family:var(--display);font-size:11px;letter-spacing:.1em;
  background:linear-gradient(180deg,rgba(16,46,74,0),rgba(16,46,74,.9))}

/* ── Retrato (foto vertical de apoyo) ── */
.dos-columnas{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.retrato{overflow:hidden;background:var(--grad);height:420px}
.retrato img{width:100%;height:100%;object-fit:cover;display:block}

/* ── Tabla de especificaciones ── */
/* La tabla de capacidades tiene CUATRO columnas y no hay CSS que la haga caber
   en un telefono. En vez de apretarla hasta romperla, se desplaza sola dentro
   de su contenedor: asi el desborde se queda AQUI y no empuja la pagina entera
   de lado, que era lo que rompia el sticky de la barra. */
.tabla-ancha{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ── Video a sangre: la seccion ENTERA es el video ──
   El cliente pidio esto en lugar del reproductor enmarcado. El texto va encima
   con su propio velo, igual que el banner de inicio. */
.video-pleno{
  position:relative;overflow:hidden;color:#fff;
  min-height:min(72vh,560px);display:flex;align-items:flex-end;
}
.video-pleno .fondo{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--navy)}
.video-pleno .fondo img{width:100%;height:100%;object-fit:cover;display:block}
/* Escalado a 16:9 con sobremedida, para que cubra el alto sea cual sea el ancho */
.video-pleno .fondo iframe{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100vw;height:56.25vw;min-height:100%;min-width:177.78vh;
  border:0;pointer-events:none;
}
.video-pleno .velo{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg, rgba(16,46,74,.62) 0%, rgba(16,46,74,.44) 46%, rgba(16,46,74,.14) 100%),
    linear-gradient(180deg, rgba(16,46,74,.30) 0%, rgba(16,46,74,.05) 40%, rgba(16,46,74,.72) 100%);
}
.video-pleno .in{position:relative;z-index:2;width:100%;padding-top:96px;padding-bottom:56px}
.video-pleno .caja{max-width:660px}
.video-pleno .eyebrow{color:var(--claro)}
.video-pleno h2{color:#fff;margin:0 0 14px}
.video-pleno h2 em{color:var(--claro)}
.video-pleno .lead{color:#e2eaf4;font-weight:600;margin:0}
/* El credito del video, discreto y abajo */
.video-pleno .pie-video{
  margin:26px 0 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.22);
  font-family:var(--display);font-size:11.5px;
  color:rgba(255,255,255,.74);
}
@media (max-width:760px){
  .video-pleno{min-height:66vh}
  .video-pleno .in{padding-top:64px;padding-bottom:44px}
}

/* ── Videos de obra ── */
.reja-video{display:grid;grid-template-columns:1fr;gap:26px}
.reja-video.dos{grid-template-columns:1fr 1fr}
.video{margin:0}
/* El marco reserva el 16:9 ANTES de que cargue el iframe. Sin esto la pagina
   brinca cuando el video entra, justo mientras alguien esta leyendo. */
.marco16{position:relative;padding-top:56.25%;background:var(--navy);overflow:hidden}
.marco16 iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.video figcaption{
  margin-top:14px;font-family:var(--display);font-size:12px;letter-spacing:.1em;
  color:var(--navy);line-height:1.5;
}
.video figcaption em{display:block;font-style:normal;color:var(--gris);
  font-size:10.5px;margin-top:5px}
@media (max-width:900px){
  .reja-video.dos{grid-template-columns:1fr}
}
.espec{width:100%;border-collapse:collapse;border:1px solid var(--line);background:#fff}
.espec th{background:var(--navy);color:#fff;font-family:var(--display);font-weight:400;
  font-size:11px;text-align:left;padding:14px 18px;}
.espec td{border-top:1px solid var(--line);padding:15px 18px;font-size:14.8px;
  font-weight:500;color:#3d4753}
.espec td:first-child{font-weight:700;color:var(--navy)}
.espec tr:nth-child(even) td{background:#f8fafb}

/* ── Datos sueltos ── */
.datos{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:38px}
.dato{border-top:3px solid var(--azul);padding-top:18px}
.dato b{display:block;font-family:var(--display);font-weight:400;color:var(--navy);
  font-size:clamp(23px,2.2vw,30px);line-height:1.05;white-space:nowrap}
.dato span{display:block;font-family:var(--display);font-size:11px;
  color:var(--gris);margin-top:11px;line-height:1.4}

/* ── Franja de cierre ── */
.cta-final{background:var(--grad);color:#fff;padding:54px 0}
.cta-final .wrap{display:grid;grid-template-columns:1.5fr auto;gap:40px;align-items:center}
.cta-final h2{color:#fff;margin:0 0 8px}
.cta-final p{margin:0;color:#e0edf5;font-weight:500;max-width:640px}

/* ── ETRUM trae su propio color ──
   Naranja tomado de grupoetrum.com (#FB8000). Para texto pequeño se usa un tono
   más oscuro, porque el naranja original sobre blanco no alcanza contraste. */
body.etrum{
  --medio:#C25E00;
  --claro:#FFC584;
  --azul:#E06A00;
  --grad:linear-gradient(135deg,#E06A00,#FB8000);
}
.lockup .unidad em{font-style:normal;display:block;font-size:9.5px;
  opacity:.65;margin-top:4px}

/* ── Aviso de contenido de relleno ── */
.relleno{background:#FFF8E6;border-left:3px solid #E8B62C;padding:14px 18px;
  font-size:13.5px;color:#6b5416;margin:0 0 26px;font-weight:500}

@media (max-width:1100px){
  .tarjetas,.tarjetas.cuatro{grid-template-columns:repeat(2,1fr)}
  .mosaico{grid-template-columns:repeat(2,1fr)}
  .datos{grid-template-columns:repeat(2,1fr)}
  .dos-columnas{grid-template-columns:1fr;gap:32px}
  .retrato{height:320px}
  .cta-final .wrap{grid-template-columns:1fr;gap:22px}
}
@media (max-width:700px){
  .tarjetas,.tarjetas.dos,.tarjetas.cuatro{grid-template-columns:1fr}
  .mosaico{grid-template-columns:1fr}
  .mosaico figure.ancha{grid-column:span 1}
  .datos{grid-template-columns:1fr}
  .espec{font-size:13px}
  /* Con el ancho minimo la tabla se desplaza en vez de apachurrar el texto
     hasta que cada celda sea una columna de una letra. */
  .espec{min-width:520px}
}

.marcas{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
/* Cada tarjeta es del color del desarrollo, como en el carrusel del cliente.
   Cuando lleguen los logotipos, el color de fondo se cambia por el logotipo y
   la reja no se toca. */
.marca-tj{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:220px;padding:22px 20px;text-decoration:none;
  transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s ease;
}
/* La foto va DEBAJO del color de la marca: el color de fondo lo pone el estilo
   en linea y la imagen se tiñe con el, asi la tarjeta sigue identificando al
   desarrollo y la foto solo le da cuerpo. El degradado de abajo es lo que
   sostiene el contraste del texto: sin el, una foto clara se lo come. */
.marca-tj img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.46;mix-blend-mode:luminosity;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.marca-tj::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 34%,rgba(0,0,0,.55) 100%);
}
.marca-tj > span{position:relative;z-index:2}
a.marca-tj:hover img{transform:scale(1.06)}
a.marca-tj:hover{transform:translateY(-5px);box-shadow:0 26px 50px -30px rgba(16,46,74,.85)}
/* Sin sitio no lleva a ningun lado, y se ve: no se levanta al pasar el raton. */
.marca-tj.sin{opacity:.72}
.marca-tj .mn{font-family:var(--display);font-size:19px;
  line-height:1.15}
.marca-tj .ms{font-family:var(--display);font-size:10px;
  color:rgba(255,255,255,.62);margin-top:8px}
.marca-tj .mir{font-size:12.5px;font-weight:700;color:#fff;margin-top:16px;
  padding-top:13px;border-top:1px solid rgba(255,255,255,.2)}
.marca-tj.sin .mir{color:rgba(255,255,255,.6);font-weight:600}
@media (max-width:1100px){.marcas{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.marcas{grid-template-columns:1fr}}

/* ══ MARCA PROPIA POR DESARROLLO ══
   Un micrositio tiene que leerse como el desarrollo, no como el grupo. Se
   tiñen el velo del hero, los acentos y el degradado del boton; la estructura
   se queda en la paleta del grupo para no perder los contrastes ya medidos.
   Es el mismo mecanismo que ya usaba ETRUM, ahora por variables.

   MARETA va con paleta PROVISIONAL: es el arena/tostado de su tarjeta en el
   carrusel del cliente, no de su manual. Se cambia cuando llegue el logotipo.
   Los que si estan muestreados de su logotipo real:
     KOEL                #073630 verde muy oscuro + #D59F35 dorado
     CAMPESTRE SANTIAGO  #06693A verde
     ALAMO SUR           #1F5A41 verde                                       */
/* ══ LANDING SUELTA ══
   El tercer modelo de micrositio: mismo dominio, pero se ve como sitio aparte.
   Sin la barra de contacto del grupo, sin menu de unidades y con pie corto.
   Grupo Tregon se acredita en el pie, no arriba. */
.nav-suelta{position:sticky;top:0;z-index:40;background:var(--fondo-suelto,#F7F4EE);
  border-bottom:1px solid rgba(0,0,0,.09)}
.nav-suelta .in{display:flex;align-items:center;justify-content:space-between;height:82px}
.marca-suelta{
  font-family:var(--display);font-size:17px;
  color:var(--navy);text-decoration:none;line-height:1.1;
}
.marca-suelta em{display:block;font-style:normal;font-size:9.5px;
  color:var(--gris);margin-top:5px}
.menu-suelto{display:flex;align-items:center;gap:26px}
.pie-suelto{background:var(--navy);color:#fff;padding:52px 0 44px;text-align:center}
.fs-marca{font-family:var(--display);font-size:21px;
  color:#fff;line-height:1.15}
.fs-marca em{display:block;font-style:normal;font-size:10px;
  color:var(--claro);margin-top:8px}
.fs-nota{margin:22px 0 0;font-size:14px;font-weight:500;color:#c6d4e6}
.fs-nota a{color:#fff;font-weight:700}
@media (max-width:1100px){
  .nav-suelta .menu-suelto{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:1px solid var(--line);padding:8px var(--gutter) 18px;
    visibility:hidden;opacity:0;transform:translateY(-8px);
    transition:opacity .2s ease,transform .2s ease,visibility .2s;
  }
  .nav-suelta.menu-abierto .menu-suelto{visibility:visible;opacity:1;transform:none}
}

/* LAGO LOS ENCINOS · su paleta propia, distinta del grupo y de KOEL:
   verde bosque con arena. Es "residencial campestre", asi que va calido. */
body.encinos{
  --navy:#22382F;--azul:#3E5C46;--medio:#5C7F62;--claro:#D9C7A4;--gris:#6E7A6E;
  --grad:linear-gradient(120deg,#22382F,#3E5C46);
  --fondo-suelto:#F6F3EC;
}
body.encinos{background:#FBF9F4}
body.encinos .hero .velo{
  background:
    linear-gradient(90deg, rgba(20,38,30,.54) 0%, rgba(28,52,40,.46) 38%, rgba(46,80,60,.20) 72%, rgba(20,38,30,.28) 100%),
    linear-gradient(180deg, rgba(20,38,30,.30) 0%, rgba(28,52,40,.04) 45%, rgba(20,38,30,.54) 100%);
}
body.encinos .tira,body.encinos .cifras,body.encinos .cta-final{background:#1A2C24}
body.encinos .seccion.gris{background:#F1EDE3}

/* CAMPESTRE SANTIAGO · verde #06693A, muestreado de su logotipo. */
body.campestre{--claro:#BFE6C8;--azul:#06693A;--medio:#0A8A4C;--grad:linear-gradient(120deg,#06693A,#0A8A4C)}
body.campestre .hero .velo{
  background:
    linear-gradient(90deg, rgba(4,58,32,.52) 0%, rgba(6,84,46,.46) 38%, rgba(10,110,60,.20) 72%, rgba(4,58,32,.28) 100%),
    linear-gradient(180deg, rgba(4,58,32,.30) 0%, rgba(6,84,46,.04) 45%, rgba(4,58,32,.52) 100%);
}
body.campestre .tira,body.campestre .cifras,body.campestre .cta-final{background:#04452A}

/* ALAMO SUR · verde #1F5A41, muestreado de su logotipo. */
body.alamo{--claro:#B9DFC9;--azul:#1F5A41;--medio:#2E7D5B;--grad:linear-gradient(120deg,#1F5A41,#2E7D5B)}
body.alamo .hero .velo{
  background:
    linear-gradient(90deg, rgba(18,54,39,.52) 0%, rgba(31,90,65,.46) 38%, rgba(46,125,91,.20) 72%, rgba(18,54,39,.28) 100%),
    linear-gradient(180deg, rgba(18,54,39,.30) 0%, rgba(31,90,65,.04) 45%, rgba(18,54,39,.52) 100%);
}
body.alamo .tira,body.alamo .cifras,body.alamo .cta-final{background:#123627}

/* 360 UNION PARK · verde #31AB4A, negro y blanco. Sale del manual de identidad que
   hizo Pragma Firm, no de una muestra: viene con proporcion 40/40/20. Es el unico
   desarrollo que no es de vivienda, y por eso va con negro en vez de azul marino:
   la identidad se describe como "industrial, confiable y visionaria". */
body.up360{
  --navy:#101211;--azul:#1E7F36;--medio:#31AB4A;--claro:#A8E6B8;--gris:#5C635E;
  --grad:linear-gradient(120deg,#101211,#1E7F36);
  --fondo-suelto:#F4F6F4;
}
body.up360 .hero .velo{
  background:
    linear-gradient(90deg, rgba(10,14,12,.56) 0%, rgba(14,22,17,.48) 38%, rgba(30,127,54,.20) 72%, rgba(10,14,12,.30) 100%),
    linear-gradient(180deg, rgba(10,14,12,.32) 0%, rgba(14,22,17,.04) 45%, rgba(10,14,12,.56) 100%);
}
body.up360 .tira,body.up360 .cifras,body.up360 .cta-final{background:#101211}
body.up360 .seccion.gris{background:#F1F4F1}

body.mareta{--claro:#E6D3BE;--azul:#7A6247;--medio:#9C7F5F;--grad:linear-gradient(120deg,#7A6247,#9C7F5F)}
body.mareta .hero .velo{
  background:
    linear-gradient(90deg, rgba(58,45,32,.52) 0%, rgba(72,56,40,.46) 38%, rgba(96,76,55,.22) 72%, rgba(58,45,32,.30) 100%),
    linear-gradient(180deg, rgba(58,45,32,.30) 0%, rgba(72,56,40,.04) 45%, rgba(58,45,32,.52) 100%);
}
body.mareta .tira{background:#3A2D20}
body.mareta .cifras,body.mareta .cta-final{background:#3A2D20}

/* El hero de ETRUM se tiñe con su propio color: si el encabezado dice ETRUM,
   el banner tiene que decirlo también. El tono es quemado, no el naranja pleno
   de grupoetrum.com, porque sobre foto el pleno se come el titular. */
/* Bajado el 4-sep junto con el de inicio, pero MENOS: aqui la foto de fondo es
   la instalacion del generador, que es oscura. Al 50% se hace lodo en vez de
   dejar ver el equipo. Queda ~61% detras del titular y ~26% a la derecha. */
body.etrum .hero .velo{
  background:
    linear-gradient(90deg, rgba(122,58,0,.52) 0%, rgba(150,70,0,.46) 38%, rgba(180,84,0,.22) 72%, rgba(122,58,0,.30) 100%),
    linear-gradient(180deg, rgba(92,44,0,.30) 0%, rgba(150,70,0,.04) 45%, rgba(92,44,0,.50) 100%);
}


/* ═══════════════════════════════════════════════════════════════
   PRODUCCIÓN: movimiento, composiciones encimadas y ritmo
   Lo que separa una maqueta de una plantilla comercial no es el radio
   de las esquinas: es que algo se mueva, algo se encime y algo respire.
   ═══════════════════════════════════════════════════════════════ */

/* ── Entrada al desplazarse ── */
.rv{opacity:0;transform:translateY(24px);
  transition:opacity .75s cubic-bezier(.2,.7,.3,1),transform .75s cubic-bezier(.2,.7,.3,1)}
.rv.visto{opacity:1;transform:none}
.rv.r1{transition-delay:.09s}
.rv.r2{transition-delay:.18s}
.rv.r3{transition-delay:.27s}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
}

/* El levantón al pasar el cursor va DESPUÉS de .rv.visto, para que gane */
.tj:hover,.casa:hover,.vac:hover{transform:translateY(-6px)}
.tj,.casa,.vac{transition:box-shadow .25s ease,transform .25s ease}
.paso,.razon{transition:box-shadow .25s ease,transform .25s ease}
.paso:hover,.razon:hover{transform:translateY(-4px);box-shadow:0 24px 48px -34px rgba(16,46,74,.7)}

/* ── Tarjeta encimada sobre la foto ── */
.marco{position:relative}
.flotante{
  position:absolute;right:-26px;bottom:-26px;z-index:2;
  background:var(--navy);color:#fff;padding:26px 30px;max-width:255px;
  box-shadow:0 34px 64px -32px rgba(16,46,74,.85);
}
.flotante b{display:block;font-family:var(--display);font-size:clamp(28px,2.6vw,36px);
  color:var(--claro);line-height:1}
.flotante span{display:block;font-family:var(--display);font-size:10.5px;
  margin-top:10px;color:#c6d4e6;line-height:1.45}

/* ── Indice de capacidades ──
   Era una marquesina infinita (.carril + @keyframes correr) y se quito el
   4-sep: el texto que se desplaza solo es una de las firmas mas reconocibles
   de plantilla o de pagina hecha con IA. Ahora es un indice numerado y quieto,
   alineado a la reja. Se lee de un golpe y se puede contar, que es justo lo
   que una marquesina no deja hacer. */
.tira{background:var(--navy);color:#fff;padding:30px 0 32px;
  border-top:1px solid rgba(255,255,255,.12)}
.tira .rotulo{
  font-family:var(--display);font-size:10.5px;letter-spacing:.2em;
  color:var(--claro);margin:0 0 18px;
}
.capacidades{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);
  column-gap:0;row-gap:16px;
}
/* La linea divisoria va SOLO entre columnas: en el primero de cada renglon se
   apaga, porque si no queda un filo suelto pegado al margen. */
.capacidades li{
  position:relative;display:flex;align-items:baseline;gap:11px;
  padding:2px 22px;
  font-family:var(--display);font-size:12.5px;
  color:#dbe7f2;line-height:1.4;
  border-left:1px solid rgba(255,255,255,.16);
}
.capacidades li:nth-child(4n+1){border-left:0;padding-left:0}
.capacidades .n{
  font-family:var(--display);font-size:10.5px;
  color:var(--claro);opacity:.9;flex:none;
}
@media (max-width:980px){
  .capacidades{grid-template-columns:repeat(2,1fr)}
  .capacidades li:nth-child(4n+1){border-left:1px solid rgba(255,255,255,.16);padding-left:22px}
  .capacidades li:nth-child(odd){border-left:0;padding-left:0}
}
@media (max-width:560px){
  .capacidades{grid-template-columns:1fr;row-gap:13px}
  .capacidades li,
  .capacidades li:nth-child(4n+1){border-left:0;padding-left:0}
}

/* ── Testimonios ── */
.testimonio{background:#fff;border:1px solid var(--line);padding:30px 28px;
  display:flex;flex-direction:column}
.testimonio .comilla{font-family:var(--display);font-size:34px;color:var(--medio);
  line-height:.6;margin-bottom:16px;display:block}
.testimonio p{font-size:15.5px;line-height:1.65;color:#3d4753;margin:0 0 20px;font-weight:500}
.testimonio .quien{margin-top:auto;border-top:1px solid var(--line);padding-top:16px;
  font-family:var(--display);font-size:11.5px;letter-spacing:.1em;
  color:var(--navy)}
.testimonio .quien em{display:block;font-style:normal;color:var(--gris);margin-top:5px;
  font-size:10.5px}

/* ── Trama de puntos de apoyo ── */
.puntos{position:relative;overflow:hidden}
.puntos::before{
  content:"";position:absolute;right:-40px;top:-40px;width:300px;height:300px;
  background-image:radial-gradient(rgba(16,46,74,.16) 1.4px, transparent 1.4px);
  background-size:20px 20px;pointer-events:none;z-index:0;
}
.puntos>.wrap{position:relative;z-index:1}

/* ── Encabezado de sección centrado, para variar el ritmo ── */
.seccion .cab.centro{max-width:720px;margin-left:auto;margin-right:auto;text-align:center}

@media (max-width:1100px){
  .flotante{right:16px;bottom:-20px;max-width:210px;padding:20px 22px}
}


/* ── Lista con palomitas ── */
.palomas{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:9px}
.palomas li{position:relative;padding-left:26px;font-size:13.8px;font-weight:600;
  color:#3d4753;line-height:1.42}
.palomas li::before{content:"";position:absolute;left:0;top:4px;width:15px;height:15px;
  border:1.5px solid var(--medio)}
.palomas li::after{content:"";position:absolute;left:5px;top:6px;width:4px;height:8px;
  border:solid var(--medio);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* ── Tarjeta destacada, la que se levanta de la fila ── */
.tj.destacada{background:var(--navy);border-color:var(--navy);margin-top:-18px;
  box-shadow:0 34px 66px -32px rgba(16,46,74,.85)}
.tj.destacada h3{color:#fff}
.tj.destacada p{color:#c6d4e6}
.tj.destacada .k{color:var(--claro)}
.tj.destacada .ir{color:#fff}
.tj.destacada .palomas li{color:#dbe7f2}
.tj.destacada .palomas li::before{border-color:var(--claro)}
.tj.destacada .palomas li::after{border-color:var(--claro)}

/* ── Barras de avance ── */
.barras{display:grid;gap:22px;margin-top:6px}
.barra{display:grid;grid-template-columns:250px 1fr 58px;gap:22px;align-items:center}
.barra .et{font-family:var(--display);font-size:11.5px;
  color:var(--navy)}
.barra .pista{height:8px;background:var(--line);position:relative;display:block;overflow:hidden}
.barra .pista i{position:absolute;left:0;top:0;bottom:0;display:block;
  width:calc(var(--p) * 1%);background:var(--grad);
  transition:width 1.2s cubic-bezier(.2,.7,.3,1)}
.barra .pct{font-family:var(--display);font-size:15px;color:var(--medio);text-align:right}
/* Arranca vacía y se llena al entrar en pantalla */
.barra.rv .pista i{width:0}
.barra.rv.visto .pista i{width:calc(var(--p) * 1%)}

@media (max-width:800px){
  .barra{grid-template-columns:1fr 52px;gap:8px 14px}
  .barra .et{grid-column:1 / -1}
}


/* ═══════════════════════════════════════════════════════════════
   BARRIDO FINO DE ESPACIADO Y TIPOGRAFÍA
   Va al final a propósito: son ajustes que ganan por orden de fuente,
   no por especificidad, y así se leen juntos en vez de repartidos.
   Aplica a las cuatro opciones de forma por igual.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* Escala de espaciado de 8. Antes cada sección elegía su número. */
  --e1:8px; --e2:16px; --e3:24px; --e4:32px; --e5:48px; --e6:64px;
}

/* ── Texto base: un punto más de interlínea. A 16.5px con 1.6 los párrafos
      de cinco líneas se cerraban demasiado. ── */
body{line-height:1.66}

/* ── Escala tipográfica ──
   Aldrich en caja alta pesa más que una tipografía normal al mismo tamaño,
   así que la interlínea de los títulos sube y el interletrado se afina. */
h1{font-size:clamp(31px,3.9vw,51px);line-height:1.12;margin:0 0 22px;letter-spacing:.008em}
h2{font-size:clamp(24px,2.85vw,36px);line-height:1.19;margin:0 0 18px;letter-spacing:.01em}
h3{font-size:19px;line-height:1.32;margin:0 0 10px;letter-spacing:.028em}
/* Que el navegador reparta las líneas de un titular en vez de dejar una palabra sola */
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}

.lead{font-size:18px;line-height:1.62;font-weight:600}
.eyebrow{font-size:11.5px;margin:0 0 14px}

/* ── Medida de lectura ──
   Una línea de más de 70 caracteres cansa. Solo se limita el texto de
   encabezado de sección: dentro de una tarjeta el ancho ya lo pone la rejilla. */
.cab .lead,.cab p{max-width:64ch}
.dos-columnas p{max-width:62ch}

/* ── Ritmo vertical ──
   Todas las secciones respiran igual y escalan con el ancho de pantalla. */
.seccion{padding:clamp(58px,6.2vw,94px) 0}
.unidades{padding:clamp(58px,6.2vw,94px) 0}
.trayecto,.preventa,.faq,.nosotros,.contacto{padding:clamp(58px,6.2vw,94px) 0}
.cifras{padding:clamp(54px,5.6vw,82px) 0}
.cta-final{padding:clamp(46px,4.6vw,64px) 0}
.seccion .cab,.unidades .cab,.faq .cab{margin-bottom:clamp(30px,3.4vw,46px)}

/* ── Rejillas ── */
.tarjetas{gap:26px}
.uu{gap:18px}
.pasos{gap:26px;margin-top:var(--e5)}
.casas{gap:28px}
.datos{gap:30px}

/* ── Interior de las tarjetas ──
   26px de aire en vez de 22: con 15px de texto, 22 se sentía apretado. */
.tj .cn{padding:24px 26px 28px}
.tj h3{margin:0 0 9px}
.tj p{font-size:15px;line-height:1.6;margin:0 0 15px}
.tj .k{margin-bottom:12px}
.paso,.razon{padding:28px 26px}
.paso p,.razon p{font-size:14.8px;line-height:1.58}
.casa .cn{padding:24px 26px 26px}
.u .cn{padding:24px 22px}
.u p{font-size:14.2px;line-height:1.5}

/* ── Preguntas frecuentes: más aire entre columna y columna ── */
.faq .q{padding:26px 0;gap:46px}
.faq .q p{font-size:15.5px;line-height:1.66}

/* ── Tabla ── */
.espec th{padding:15px 20px}
.espec td{padding:16px 20px;font-size:15px}

/* ── Botones: un pelo más anchos y con el texto menos apretado ── */
.btn{padding:14px 30px;font-size:14.5px;letter-spacing:.015em}

/* ── Barra de utilidad y pie ── */
.top .in{height:42px}
.pie{font-size:14px;padding:56px 0 30px}
.pie a{padding:6px 0}
.pie .g{gap:40px}

/* ── Franja de la promesa ── */
.integral{padding:clamp(38px,4vw,52px) 0}
.integral .wrap{gap:clamp(26px,4vw,50px)}

@media (max-width:600px){
  h1{letter-spacing:.004em}
  .faq .q{gap:12px}
}


/* ═══════════════════════════════════════════════════════════════
   EL CORTE ENTRE SECCIONES · traslape
   Decisión del 24-ago. La franja de cifras no cambia de sección con un
   ángulo: se despega del fondo y flota como tarjeta sobre la costura.
   Es lo que hacen Bizio y Finovate con su fila de cifras. Aplica a las
   cuatro opciones de forma por igual.
   ═══════════════════════════════════════════════════════════════ */

.cifras{
  background:transparent;padding:0;position:relative;
  top:-74px;margin-bottom:-74px;z-index:3;
}
.cifras>.wrap{
  position:relative;
  background:var(--navy);
  padding:clamp(38px,4.2vw,56px) clamp(28px,3vw,52px);
  box-shadow:0 44px 92px -48px rgba(16,46,74,.9);
}
/* La sección de arriba abre espacio para que la tarjeta no le tape el contenido */
.seccion:has(+ .cifras),
.unidades:has(+ .cifras){padding-bottom:calc(clamp(58px,6.2vw,94px) + 78px)}

@media (max-width:700px){
  .cifras{top:-46px;margin-bottom:-46px}
  .seccion:has(+ .cifras),
  .unidades:has(+ .cifras){padding-bottom:calc(clamp(58px,6.2vw,94px) + 50px)}
}

/* ── Socios comerciales (Construcción) ──
   Doce logotipos, asi que ya no caben a un lado del valor agregado: el muro va a todo
   lo ancho, 6 x 2, y el valor agregado baja como renglon de cinco. Cada celda mide lo
   mismo tenga logotipo o no, para que la reja no se deforme mientras faltan archivos.

   Los logotipos entran en gris y toman color al pasar el cursor: doce marcas ajenas a
   todo color pelean con la paleta de Tregon y se ven como un tianguis de anuncios. */
.socios .logos{
  display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:46px;
}
.socios .lg{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  min-height:112px;padding:18px 14px;background:#fff;border:1px solid var(--line);
}
/* Todos los archivos vienen del mismo lienzo 360x120, asi que basta con fijar el ancho:
   el equilibrio optico ya viene resuelto en el archivo. Se probo con gris y se descarto:
   Berel es un aro de colores y Home Depot un cuadro naranja, y en gris los dos quedaban
   irreconocibles, peor que los nombres compuestos de los que todavia no tienen logotipo. */
.socios .lg img{
  width:100%;max-width:158px;height:auto;object-fit:contain;
  opacity:.92;transition:opacity .2s ease,transform .2s ease;
}
.socios .lg:hover img{opacity:1;transform:scale(1.03)}
/* ETRUM es unidad del propio grupo, no un proveedor: se marca con su naranja. */
.socios .lg.propio{border-color:rgba(251,128,0,.42)}
.socios .lg .wm{
  font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.03em;
  color:var(--navy);line-height:1.15;text-align:center;
}
.socios .lg .sb{
  font-size:9.5px;letter-spacing:.1em;color:var(--gris);
  text-align:center;
}
.socios .valor{
  border-top:1px solid var(--line);padding-top:26px;
}
.socios .valor .k{
  font-family:var(--display);font-size:12px;
  color:var(--medio);margin:0 0 14px;
}
/* Los cinco puntos en renglon: como lista vertical debajo de doce logotipos se veia
   como una coletilla suelta. */
.socios .valor .palomas{
  display:grid;grid-template-columns:repeat(5,1fr);gap:10px 26px;margin:0;
}
@media(max-width:1100px){
  .socios .logos{grid-template-columns:repeat(4,1fr)}
  .socios .valor .palomas{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
  .socios .logos{grid-template-columns:repeat(3,1fr);gap:10px}
  .socios .lg{min-height:94px;padding:14px 10px}
  .socios .lg .wm{font-size:13px}
  .socios .valor .palomas{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:460px){
  .socios .logos{grid-template-columns:repeat(2,1fr)}
  .socios .valor .palomas{grid-template-columns:1fr}
}
}

/* ══ VITRINA ══
   Las casas a lo ancho de la pantalla, en paneles cortados en diagonal, con la foto
   de fondo en grande. Sustituye a la reja de tarjetas: el cliente pidio el 7-sep que
   dejara de verse "muy cuadrada". Funciona con el numero de casas que sea.

   Como funciona el corte: cada panel se recorta con un poligono cuyo lado izquierdo
   arranca --s px a la derecha, y el derecho termina --s px antes. Los paneles se
   encabalgan con un margen negativo de --s para que no quede ranura entre uno y otro.
   El primero y el ultimo van rectos por fuera para no dejar picos contra el borde. */
.vitrina{padding:76px 0 0}
.vitrina.gris{background:var(--bg);border-top:1px solid var(--line)}
.vitrina .cab{margin-bottom:34px}

.vitrina .pn{
  --s:62px;
  --sep:2px;                                    /* grosor de la costura entre paneles */
  display:flex;overflow:hidden;                 /* el overflow contiene los margenes negativos */
  min-height:clamp(400px,44vw,560px);
}
.vitrina .p{
  flex:1 1 0;min-width:0;position:relative;overflow:hidden;background:var(--navy);
  display:flex;align-items:flex-end;
  clip-path:polygon(var(--s) 0, 100% 0, calc(100% - var(--s)) 100%, 0 100%);
}
.vitrina .p + .p{margin-left:calc(var(--s) * -1)}
.vitrina .p:first-child{clip-path:polygon(0 0, 100% 0, calc(100% - var(--s)) 100%, 0 100%)}
.vitrina .p:last-child{clip-path:polygon(var(--s) 0, 100% 0, 100% 100%, 0 100%)}
.vitrina .p:only-child{clip-path:none}

/* La costura entre panel y panel.
   Pedida por Tregon el 10-sep: las cuatro fotos se tocaban sin nada en medio y
   a primera vista se leian como una sola imagen ancha, no como cuatro casas.

   No puede ser un border: el panel esta recortado con clip-path y el borde se
   va con el recorte. Es una banda con la MISMA inclinacion, pegada al filo de
   ataque de cada panel. El poligono va de (s,0) a (s+sep,0) arriba y de (0,100%)
   a (sep,100%) abajo, asi que cae exactamente sobre el corte del panel anterior.

   Se cuelga de .p + .p para que el primer panel no estrene linea por fuera. */
.vitrina .p + .p::before{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:rgba(255,255,255,.34);
  clip-path:polygon(var(--s) 0, calc(var(--s) + var(--sep)) 0, var(--sep) 100%, 0 100%);
}

.vitrina .p img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.vitrina .p:hover img{transform:scale(1.045)}
.vitrina .p .velo{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,46,74,.16) 0%,rgba(16,46,74,.12) 30%,rgba(12,24,48,.72) 62%,rgba(12,24,48,.90) 100%);
}

/* El contenido se despega del corte. Ojo con de que lado: el texto va abajo, y ABAJO
   el borde izquierdo del poligono esta en 0 mientras que el derecho ya se metio --s.
   Por eso el relleno grande va a la DERECHA, no a la izquierda. Con el relleno al reves
   se comia la palabra "Recamaras" de la ultima columna de datos. */
.vitrina .cn{
  position:relative;z-index:2;color:#fff;
  padding:0 calc(var(--s) + 26px) 34px 34px;width:100%;
}
/* El ultimo panel va recto por fuera: ahi ese margen extra solo seria hueco. */
.vitrina .p:last-child .cn{padding-right:34px}
.vitrina .est{
  display:inline-block;background:#fff;color:var(--navy);font-family:var(--display);
  font-size:10px;padding:7px 12px;margin-bottom:14px;
}
/* El color va explicito: h2 y h3 traen navy del estilo global y sobre la foto desaparecen. */
.vitrina h3{margin:0 0 4px;font-size:clamp(21px,2.1vw,27px);line-height:1.12;color:#fff}
.vitrina .z{display:block;font-size:13.5px;font-weight:600;color:var(--claro);margin-bottom:18px}
.vitrina .d{
  display:flex;flex-wrap:wrap;gap:8px 16px;padding-top:14px;font-size:12px;
  border-top:1px solid rgba(255,255,255,.26);color:rgba(255,255,255,.82);
}
.vitrina .d span{display:block}
.vitrina .d b{display:block;font-family:var(--display);font-size:15.5px;color:#fff;font-weight:400}
.vitrina .pr{
  display:block;margin-top:16px;font-family:var(--display);font-size:clamp(18px,1.7vw,22px);
  color:#fff;letter-spacing:.01em;
}

/* Debajo de 1000px la diagonal se cierra y los paneles se apilan: mantenerla obliga a
   un corte horizontal que en vertical se lee como error, no como intencion. */
@media(max-width:1000px){
  .vitrina .pn{
    --s:0px;flex-wrap:wrap;min-height:0;
    /* Aqui los paneles se acomodan en varios renglones, asi que la costura deja de
       servir: le tocaria linea al primero de cada renglon, que va pegado a la orilla,
       y ninguna entre renglon y renglon. El hueco del flex si separa en los dos ejes. */
    gap:var(--sep);background:#fff;
  }
  .vitrina .p + .p::before{display:none}
  .vitrina .p{flex:1 1 320px;min-height:340px;clip-path:none !important;margin-left:0 !important}
  .vitrina .cn{padding:0 26px 28px}
}
@media(max-width:620px){
  .vitrina{padding-top:56px}
  .vitrina .p{flex:1 1 100%;min-height:300px}
}

/* ══ BARRA DE DOS PISOS (páginas de unidad y micrositios) ══
   Arriba el menú del grupo, abajo las secciones de la unidad. Reemplaza al menú que
   se sustituía por completo al entrar a una unidad: se perdía la forma de saltar de
   Residencial a ETRUM sin volver al inicio.

   El nombre de la unidad NO cabe junto a los siete renglones del grupo: a 1440px se
   encimaba con "Inicio" y "Bolsa de trabajo" se partía en dos. Por eso baja a la caja
   azul de esta segunda barra, donde además manda en vez de competir. */
.nav.dos-pisos .in{height:84px}
.nav.dos-pisos .lockup .marca{height:60px}
.nav.dos-pisos .menu{gap:22px}
.nav.dos-pisos .menu a:not(.btn){font-size:13.5px;white-space:nowrap}

.subnav{border-top:1px solid var(--line);background:var(--bg)}
.subnav .wrap{display:flex;align-items:stretch;gap:0}
.subnav .tabs{display:flex;align-items:center;gap:30px;min-width:0}

/* La caja de la unidad va en sólido con el texto invertido: es la etiqueta de mando
   de este piso, no un enlace más. */
.subnav .quien{
  display:flex;flex-direction:column;justify-content:center;flex:none;
  background:var(--azul);color:#fff;
  font-family:var(--display);font-size:13px;
  padding:13px 26px;margin-right:28px;line-height:1;white-space:nowrap;
}
.subnav .quien em{
  font-style:normal;font-size:9px;letter-spacing:.2em;opacity:.72;margin-top:5px;
}
.subnav a{
  display:flex;align-items:center;
  font-family:var(--display);font-size:12px;
  color:var(--gris);padding:16px 0;border-bottom:2px solid transparent;white-space:nowrap;
}
.subnav a:hover{color:var(--navy)}
.subnav a.aqui{color:var(--azul);border-bottom-color:var(--medio)}

/* En pantalla angosta el menú del grupo se va a la hamburguesa, pero las secciones se
   quedan: son la navegación de la página en la que estás. Se deslizan de lado.
   El overflow va CONTENIDO en la barra, no en el documento: si se sale del documento
   rompe el position:sticky de toda la página. */
@media(max-width:1100px){
  .nav.dos-pisos .in{height:72px}
  .nav.dos-pisos .lockup .marca{height:52px}
  .subnav .wrap{
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .subnav .wrap::-webkit-scrollbar{display:none}
  .subnav .quien{padding:11px 18px;margin-right:20px;font-size:12px}
  .subnav .tabs{gap:24px;padding-right:20px}
}

/* ── Barra de dos pisos: que el nombre de unidad y el menú del grupo QUEPAN ──
   Medido el 11-sep en Construcción, a 1440 px: el lockup pedía 408 px, el menú 836 y el
   botón 160, o sea 1404 contra 1320 disponibles. Como .lockup es un elemento flexible
   normal, en vez de desbordar se ENCOGIÓ a 344 y la palabra CONSTRUCCIÓN se salió de su
   propia caja 64 px, quedando encima de INICIO. El navegador no reporta desborde porque
   la caja padre sí cabe: solo se sale el texto. Por eso hay que fijar el lockup y
   recortar milímetros de los tres lados. */
/* El isotipo solo se leia como un logotipo recortado. Va el completo, que ademas es MAS
   angosto porque viene apilado: 81px contra 94 del isotipo. Se gana marca y 13px. */
.nav.dos-pisos .lockup{flex:none;gap:15px}
.nav.dos-pisos .lockup .marca{height:56px}
.nav.dos-pisos .lockup .unidad{font-size:14px;white-space:nowrap}
.nav.dos-pisos .lockup .barra{height:34px}
.nav.dos-pisos .menu{gap:17px}
.nav.dos-pisos .menu a:not(.btn){font-size:13px}

/* Debajo de 1300 px ya no alcanza ni recortando, así que el menú del grupo se va a la
   hamburguesa. La barra de la unidad se queda: es la de la página donde estás. */
@media(max-width:1300px){
  .nav.dos-pisos .menu{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;top:100%;left:0;right:0;
    background:#fff;border-top:1px solid var(--line);
    box-shadow:0 18px 38px -26px rgba(16,46,74,.75);
    padding:10px 40px 18px;
    visibility:hidden;opacity:0;transform:translateY(-8px);
    transition:opacity .2s ease,transform .2s ease,visibility .2s;
    z-index:40;
  }
  .nav.dos-pisos.menu-abierto .menu{visibility:visible;opacity:1;transform:none}
  .nav.dos-pisos .hamburguesa{display:flex}
  .nav.dos-pisos .hamburguesa span{background:var(--navy)}
  .nav.dos-pisos .cta-barra{display:none}
  .nav.dos-pisos .menu .solo-movil{display:block;width:100%;text-align:center;margin-top:6px}
}

/* ── La franja del titular de Inicio ──
   Pedida el 11-sep con imagen de referencia: las dos palabras en cursiva van sobre una
   banda azul sólida, en blanco, no en azul claro sobre la foto.

   La banda es un degradado de corte duro y no un `background` liso, porque en la
   referencia el filo superior atraviesa las letras a media altura, como marcador, en vez
   de encajonar el renglón completo.

   `box-decoration-break:clone` es lo que hace que al partirse en dos renglones cada uno
   estrene su banda. Sin eso, la banda se dibuja una sola vez de punta a punta y en el
   salto de línea deja un rectángulo colgando en el aire. */
.hero h1 em{
  color:#fff;
  background:linear-gradient(to top,
    var(--azul) 0%, var(--azul) 74%, transparent 74%);
  padding:0 .14em .04em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}

/* El hero del inicio quedó con tres frases que se leen de corrido, y el cliente pidió
   el 23-sep que fueran horizontales. La caja angosta de 720px las partía a media frase,
   así que aquí se ensancha y se evita el corte donde no debe ir. */
.hero.ancho .caja{max-width:1000px}
.hero.ancho .lead{max-width:760px}
@media(min-width:1100px){
  .hero.ancho h1{white-space:nowrap}
}
.grupo-mega{position:static;display:inline-flex;align-items:center}
.nav .menu .grupo-mega > a{display:inline-flex;align-items:center;gap:6px}
.nav .menu .grupo-mega > a::after{
  content:"";width:5px;height:5px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-1px);
  opacity:.55;transition:transform .2s ease;
}
.grupo-mega.abierto > a::after{transform:rotate(-135deg) translateY(-1px)}

/* El panel cuelga de la BARRA, no del boton: por eso .grupo-mega va position:static y
   el ancla es .nav, que si es relativo. */
.nav{position:sticky}
.mega{
  position:absolute;left:0;right:0;top:100%;z-index:50;
  background:#fff;border-top:1px solid var(--line);
  box-shadow:0 26px 50px -30px rgba(16,46,74,.55);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
}
.grupo-mega.abierto .mega{opacity:1;visibility:visible;transform:none}
.mega .wrap{display:grid;grid-template-columns:1fr 420px;gap:44px;padding:30px 40px 34px;align-items:start}
.mega .rot{
  font-family:var(--display);font-size:10.5px;
  color:var(--medio);margin:0 0 14px;
}
.mega .lista a{
  display:block;padding:13px 16px;border-radius:8px;border:1px solid transparent;
  transition:background .16s ease,border-color .16s ease;text-transform:none;letter-spacing:0;
}
.mega .lista a b{
  display:block;font-family:var(--display);font-size:16px;color:var(--navy);font-weight:400;
  letter-spacing:.02em;
}
/* La descripcion hereda mayusculas y espaciado del menu de la barra. Se le quitan con
   suficiente peso, porque .nav .menu a gana por especificidad. */
.nav .mega .lista a span{
  display:block;font-family:var(--texto);font-size:13.5px;color:var(--gris);
  margin-top:4px;line-height:1.42;text-transform:none;letter-spacing:normal;font-weight:500;
}
.mega .lista a:hover,.mega .lista a.on{background:var(--bg);border-color:var(--line)}
.mega .lista a:hover b,.mega .lista a.on b{color:var(--azul)}
.mega .vista{overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3;background:var(--bg)}
.mega .vista img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .18s ease}
.mega .vista img.cambiando{opacity:0}

/* En pantalla angosta el menu ya es hamburguesa: el megamenu se apaga y la lista se
   muestra plana dentro del panel, sin la imagen. */
/* El megamenu en "modo lista": siempre desplegado, sin imagen, para cuando el menu ya
   vive dentro de la hamburguesa.

   ERROR QUE CORRIGE ESTO (25-sep, lo vio el cliente en una MacBook Air): el modo lista
   estaba a 1300px para TODAS las paginas, porque asi venia de la propuesta B, donde todo
   el menu se volvia hamburguesa a 1300. Aqui no: el inicio y las paginas sin barra de dos
   pisos siguen con menu horizontal hasta 1100px. Entre 1101 y 1300 el menu era horizontal
   pero los dos paneles quedaban forzados a verse, sin cursor, colgando sobre el hero y
   tapando sus propios botones. En pantallas anchas no pasaba, por eso no se veia aqui.

   Regla: el modo lista va JUNTO con la hamburguesa, nunca por su cuenta. Por eso son dos
   bloques, cada uno con el corte de la hamburguesa que le toca. */
@media(max-width:1100px){
  .mega{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border-top:0;border-left:2px solid var(--line);margin:4px 0 8px 10px;
  }
  .mega .wrap{grid-template-columns:1fr;gap:0;padding:2px 0 2px 14px;max-width:none}
  .mega .vista{display:none}
  .mega .rot{display:none}
  .mega .lista a{padding:9px 0;border:0}
  .mega .lista a span{display:none}
  .grupo-mega{display:block;width:100%}
  .nav .menu .grupo-mega > a::after{display:none}
}
/* Las paginas de unidad cambian a hamburguesa antes, a 1300px, porque su barra es de dos
   pisos. Solo ellas estrenan el modo lista en ese tramo. */
@media(min-width:1101px) and (max-width:1300px){
  .nav.dos-pisos .mega{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border-top:0;border-left:2px solid var(--line);margin:4px 0 8px 10px;
  }
  .nav.dos-pisos .mega .wrap{grid-template-columns:1fr;gap:0;padding:2px 0 2px 14px;max-width:none}
  .nav.dos-pisos .mega .vista{display:none}
  .nav.dos-pisos .mega .rot{display:none}
  .nav.dos-pisos .mega .lista a{padding:9px 0;border:0}
  .nav.dos-pisos .mega .lista a span{display:none}
  .nav.dos-pisos .grupo-mega{display:block;width:100%}
  .nav.dos-pisos .menu .grupo-mega > a::after{display:none}
}


/* ══ 10 AÑOS DEJANDO HUELLA · COMPLETA, EN NOSOTROS ══
   Acordeón con <details>. Va en gris claro y no en navy a propósito: arriba tiene
   "Quiénes somos" en blanco y abajo las cifras en navy, y en navy se fundía con ellas
   en un solo bloque. En gris se lee como sección propia. */
.huella{background:var(--bg)}
.huella .acordeon{margin-top:8px;border-top:1px solid var(--line)}
.huella details{border-bottom:1px solid var(--line);transition:background .15s}
.huella details[open]{background:#fff}
.huella summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:120px 1fr 30px;
  gap:26px;align-items:center;padding:18px 18px}
.huella summary::-webkit-details-marker{display:none}
.huella summary:hover{background:rgba(36,123,160,.06)}
.huella summary:focus-visible{outline:2px solid var(--medio);outline-offset:-2px}
.huella .anio{font-family:var(--display);font-size:27px;color:var(--medio);line-height:1}
.huella summary h3{margin:0;font-size:16px;letter-spacing:.03em;color:var(--navy)}
.huella .mas{justify-self:end;width:22px;height:22px;position:relative}
.huella .mas::before,.huella .mas::after{content:"";position:absolute;left:50%;top:50%;
  background:var(--medio)}
.huella .mas::before{width:14px;height:2px;transform:translate(-50%,-50%)}
.huella .mas::after{width:2px;height:14px;transform:translate(-50%,-50%);transition:transform .2s}
.huella details[open] .mas::after{transform:translate(-50%,-50%) scaleY(0)}
.huella details p{margin:0;font-size:15px;line-height:1.65;color:var(--gris);
  padding:0 64px 24px 164px;max-width:1040px}
.huella .cierre-huella{margin:34px 0 0;font-family:var(--display);
  font-size:clamp(19px,2.2vw,25px);color:var(--navy);line-height:1.25}
@media(max-width:760px){
  .huella summary{grid-template-columns:64px 1fr 22px;gap:14px;padding:16px 4px}
  .huella .anio{font-size:21px}
  .huella summary h3{font-size:14px}
  .huella details p{padding:0 4px 20px 82px;font-size:14.5px}
}

/* ══ 10 AÑOS DEJANDO HUELLA · RESUMEN, EN EL INICIO ══
   Seis hitos en un riel SIN scroll: los seis caben a lo ancho, así que no hay nada
   escondido a la derecha. La línea que une los puntos es la que dice "esto es una
   historia" sin tener que escribirlo. */
.resumen-huella{background:var(--navy);color:#fff;padding:clamp(54px,5.6vw,78px) 0}
.resumen-huella .eyebrow{color:var(--claro)}
.resumen-huella h2{color:#fff;margin:0}
.resumen-huella h2 em{color:var(--claro)}
.resumen-huella .riel{display:grid;grid-template-columns:repeat(6,1fr);margin:44px 0 38px}
.resumen-huella .h{position:relative;padding-right:22px}
.resumen-huella .h::after{content:"";position:absolute;left:0;right:0;top:6px;height:2px;
  background:rgba(143,208,232,.28)}
.resumen-huella .h:last-child::after{right:22px}
.resumen-huella .pt{position:relative;z-index:1;display:block;width:13px;height:13px;
  border-radius:50%;background:var(--claro);margin-bottom:20px}
.resumen-huella .h:last-child .pt{background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.16)}
.resumen-huella .anio{display:block;font-family:var(--display);font-size:30px;
  color:var(--claro);line-height:1;margin-bottom:10px}
.resumen-huella h3{margin:0;font-size:14.5px;line-height:1.35;color:#fff;padding-right:10px}
/* Abajo de 1000px seis columnas aprietan los títulos: pasan a tres, y en celular a dos.
   La línea se corta por renglón, que es lo honesto: no hay un riel continuo que dibujar. */
@media(max-width:1000px){
  .resumen-huella .riel{grid-template-columns:repeat(3,1fr);row-gap:34px}
  .resumen-huella .h:nth-child(3n)::after{right:22px}
}
@media(max-width:560px){
  .resumen-huella .riel{grid-template-columns:repeat(2,1fr)}
  .resumen-huella .h:nth-child(3n)::after{right:0}
  .resumen-huella .h:nth-child(2n)::after{right:22px}
  .resumen-huella .anio{font-size:25px}
  .resumen-huella h3{font-size:13.5px}
}

/* ══ LOS SALTOS DE ANCLA NO CAEN DEBAJO DE LA BARRA ══
   Hallado el 23-sep al probar el menú nuevo: de catorce anclas, doce aterrizaban con
   el título escondido detrás de la barra fija. En las páginas de unidad fallaba hasta en
   escritorio, porque ahí la barra es de dos pisos y mide 140 px. El subnav de
   Residencial, Desarrollos y ETRUM traía este error desde el 10-sep.

   scroll-padding-top le dice al navegador cuánto reservar arriba al saltar a un ancla,
   y aplica a TODAS a la vez, así que no hay que tocar sección por sección.
   El valor es el alto EXACTO de cada barra, sin aire extra: cada sección ya trae su
   propio relleno arriba, y sumarle más dejaba un hueco vacío al llegar. */
html{scroll-padding-top:93px}
html:has(.nav.dos-pisos){scroll-padding-top:140px}

/* Entre 1101 y 1180 px el menu del inicio va justo: con el hueco normal de 28 px, a
   1101 "Unidades de negocio" y "10.o aniversario" se partian en dos renglones y el menu
   quedaba pegado al boton de Contactanos. Se cierra un poco el hueco en ese tramo y se
   prohibe partir los botones. Las paginas de unidad no entran aqui: a ese ancho ya son
   hamburguesa. */
@media(min-width:1101px) and (max-width:1180px){
  .nav:not(.dos-pisos) .menu{gap:18px}
  .nav:not(.dos-pisos) .menu > a,
  .nav:not(.dos-pisos) .menu > .grupo-mega > a{white-space:nowrap}
}

/* ── Línea del tiempo de Nosotros (7-oct-2026, formato pedido por el cliente) ──
   Línea al centro, año de un lado y tarjeta del otro, alternando. En celular, una sola
   columna con la línea a la izquierda. */
.huella .lt{list-style:none;margin:34px 0 0;padding:0;position:relative}
.huella .lt::before{content:"";position:absolute;top:6px;bottom:6px;left:50%;width:2px;
  transform:translateX(-50%);background:rgba(16,46,74,.18)}
.huella .lt-i{display:grid;grid-template-columns:1fr 64px 1fr;align-items:center;
  position:relative;margin:0 0 26px}
.huella .lt-i:last-child{margin-bottom:0}
.huella .lt-punto{grid-column:2;grid-row:1;justify-self:center;width:16px;height:16px;
  border-radius:50%;background:#fff;border:3px solid var(--medio);position:relative;z-index:1}
.huella .lt-anio{grid-row:1;font-family:var(--display);font-size:34px;line-height:1;
  color:var(--navy);letter-spacing:.02em}
.huella .lt-tarjeta{grid-row:1;position:relative;background:#fff;border-radius:10px;
  padding:24px 26px 22px 92px;box-shadow:0 14px 34px -18px rgba(16,46,74,.35),
  0 2px 6px rgba(16,46,74,.06)}
/* Lado izquierdo: tarjeta a la izquierda, año a la derecha. */
.huella .lt-i:not(.der) .lt-tarjeta{grid-column:1}
.huella .lt-i:not(.der) .lt-anio{grid-column:3;justify-self:start;padding-left:6px}
.huella .lt-i.der .lt-tarjeta{grid-column:3}
.huella .lt-i.der .lt-anio{grid-column:1;justify-self:end;padding-right:6px}
/* La flechita que apunta a la línea. */
.huella .lt-tarjeta::after{content:"";position:absolute;top:50%;width:16px;height:16px;
  background:inherit;transform:translateY(-50%) rotate(45deg)}
.huella .lt-i:not(.der) .lt-tarjeta::after{right:-7px;box-shadow:3px -3px 6px -4px rgba(16,46,74,.18)}
.huella .lt-i.der .lt-tarjeta::after{left:-7px;box-shadow:-3px 3px 6px -4px rgba(16,46,74,.18)}
.huella .lt-ico{position:absolute;left:24px;top:22px;width:50px;height:50px;border-radius:50%;
  background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center}
.huella .lt-ico svg{width:24px;height:24px}
.huella .lt-tarjeta h3{margin:0 0 8px;font-size:17px;letter-spacing:.03em;color:var(--navy)}
.huella .lt-tarjeta p{margin:0;font-size:15px;line-height:1.65;color:var(--gris)}
/* El décimo aniversario cierra en navy. */
.huella .lt-i.final .lt-tarjeta{background:var(--navy)}
.huella .lt-i.final .lt-tarjeta h3{color:#fff}
.huella .lt-i.final .lt-tarjeta p{color:rgba(255,255,255,.82)}
.huella .lt-i.final .lt-ico{background:#fff;color:var(--navy)}
.huella .lt-i.final .lt-punto{background:var(--navy);border-color:var(--claro)}
@media (max-width:900px){
  .huella .lt::before{left:11px;transform:none}
  .huella .lt-i{grid-template-columns:24px 1fr;column-gap:16px;row-gap:8px;align-items:start}
  .huella .lt-punto{grid-column:1;grid-row:1;margin-top:8px}
  .huella .lt-i:not(.der) .lt-anio,.huella .lt-i.der .lt-anio{grid-column:2;grid-row:1;justify-self:start;
    padding:0;font-size:26px}
  .huella .lt-i:not(.der) .lt-tarjeta,.huella .lt-i.der .lt-tarjeta{grid-column:2;grid-row:2}
  .huella .lt-tarjeta{padding:20px 20px 18px 20px}
  .huella .lt-ico{position:static;width:42px;height:42px;margin-bottom:12px}
  .huella .lt-tarjeta::after{display:none}
}

/* Al pasar el mouse la tarjeta se prende con el degradado de marca (pedido 7-oct).
   El fondo es una capa ::before que se desvanece: un degradado no se puede animar con
   transition, la opacidad si. La flechita toma el color del lado del degradado que le toca. */
.huella .lt-tarjeta{isolation:isolate;transition:transform .25s ease,box-shadow .25s ease}
.huella .lt-tarjeta::before{content:"";position:absolute;inset:0;border-radius:inherit;
  background:var(--grad);opacity:0;transition:opacity .25s ease;z-index:-1}
.huella .lt-tarjeta h3,.huella .lt-tarjeta p{transition:color .25s ease}
.huella .lt-ico,.huella .lt-punto,.huella .lt-anio{transition:background .25s ease,color .25s ease,border-color .25s ease}
.huella .lt-tarjeta::after{transition:background .25s ease}
@media (hover:hover){
  .huella .lt-i:hover .lt-tarjeta{transform:translateY(-3px);
    box-shadow:0 22px 40px -18px rgba(31,72,126,.55),0 2px 6px rgba(16,46,74,.08)}
  .huella .lt-i:hover .lt-tarjeta::before{opacity:1}
  .huella .lt-i:hover .lt-tarjeta h3{color:#fff}
  .huella .lt-i:hover .lt-tarjeta p{color:rgba(255,255,255,.9)}
  .huella .lt-i:hover .lt-ico{background:#fff;color:var(--azul)}
  .huella .lt-i:not(.der):hover .lt-tarjeta::after{background:#247BA0}
  .huella .lt-i.der:hover .lt-tarjeta::after{background:#1F487E}
  .huella .lt-i:hover .lt-punto{background:var(--medio);border-color:var(--medio)}
  .huella .lt-i:hover .lt-anio{color:var(--medio)}
}

/* ── Cambios del Excel del cliente (19-oct-2026) ── */
/* Hero del inicio: la segunda línea, "creciendo patrimonios", va más grande. */
.hero h1 .h1-grande{font-size:1.32em;line-height:1.05;display:inline-block}
/* La franja "integral" quedó con una sola frase: centrada y a todo lo ancho. */
.integral.solo .wrap{grid-template-columns:1fr;text-align:center}
.integral.solo .frase{margin:0 auto;max-width:900px}
/* Video institucional en Nosotros, en lugar del texto de "Quiénes somos". */
.video-inst video{width:100%;max-width:1100px;display:block;margin:0 auto;aspect-ratio:16/9;
  background:#0B243B;box-shadow:0 24px 50px -24px rgba(16,46,74,.45)}
.video-inst .acc-centro{text-align:center;margin-top:28px}

/* El rotulo (eyebrow) tiene un ancho maximo menor que el titulo: en las cabeceras centradas
   se quedaba cargado a la izquierda. Con margen automatico queda al centro. */
.seccion .cab.centro .eyebrow{margin-left:auto;margin-right:auto}

/* 21-oct: las ligas de las cuatro unidades del inicio van en mayusculas, como en el Excel. */
.uu .u .ir{}

/* 29-oct: "oportunidades de negocio" completo en una sola linea (pedido del cliente). En celular puede partirse. */
@media (min-width:700px){.una-linea{white-space:nowrap}}

/* Dos tarjetas centradas (Residencial, "Tu mejor opcion", 29-oct). */
.tarjetas.dos{grid-template-columns:repeat(2,minmax(0,1fr));max-width:860px;margin-left:auto;margin-right:auto}
@media (max-width:700px){.tarjetas.dos{grid-template-columns:1fr}}