/* ==========================================================================
   MINMUEBLES ARCO — Estilos Página de Inicio (index.php)
   ========================================================================== */

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
/* Alto del hero en la maquetación: 1088px a 1440 de ancho (75.5vw) */
.hero{
  position:relative;
  min-height:clamp(560px,75.5vw,1088px);
  display:flex;
  align-items:flex-start;
  padding-block:clamp(150px,27.85vw,401px) clamp(60px,8vw,115px);
  overflow:hidden;
}
.hero__fondo{position:absolute;inset:0;z-index:0;}
.hero__fondo img{width:100%;height:100%;object-fit:cover;object-position:center;}
.hero__fondo::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(0,0,0,.46) 0%,rgba(0,0,0,.3) 45%,rgba(0,0,0,.05) 100%),
             linear-gradient(180deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,0) 32%);
}
.hero__contenido{position:relative;z-index:1;}
/* Título: cap 56px en la maqueta → 78px de fuente, interlínea 106px */
.hero__titulo{
  max-width:830px;
  font-weight:300;
  font-size:clamp(2rem,5.42vw,78px);
  line-height:1.36;
  letter-spacing:-.005em;
  text-transform:uppercase;
}
.hero__titulo strong{font-weight:700;}
/* Párrafo: 803px de ancho, 20px de fuente, interlínea 40px */
.hero__texto{
  margin-top:clamp(10px,1.04vw,15px);
  max-width:803px;
  font-size:clamp(.9rem,1.736vw,25px);
  line-height:1.6;
}
/* Botón: 385x85 centrado bajo el bloque de texto */
.hero .boton{
  margin-top:clamp(34px,7.02vw,101px);
  margin-left:clamp(0px,15.4vw,222px);
  letter-spacing:0;
  padding:0 clamp(1.2em,2vw,29px);
  min-width:clamp(240px,26.2vw,378px);
  height:clamp(52px,5.9vw,85px);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:clamp(.85rem,1.74vw,25px);
}

@media (max-width:600px){
  .hero{align-items:flex-end;}
  .hero__contenido{text-align:left;}
}

/* --------------------------------------------------------------------------
   7. Open House
   -------------------------------------------------------------------------- */
/* Medidas de la maquetación a 1440px:
   título 92px (cap 72) a 239px del inicio de la sección · "2025" 115px abajo
   foto a todo lo ancho: 1440x896 · mosaico 1021px de ancho, 3 columnas sin
   separación, 341x597 cada una, la central baja 159px                      */
.openhouse{position:relative;padding-top:clamp(60px,15.14vw,218px);padding-bottom:clamp(60px,9.58vw,138px);overflow:hidden;}
.openhouse .deco--izq{top:clamp(24px,5.28vw,76px);left:clamp(10px,2.01vw,29px);}
.openhouse .deco--der{right:clamp(-14px,-.97vw,0px);bottom:clamp(20px,3.9vw,56px);}
.openhouse__titulo{
  font-size:clamp(1.9rem,6.667vw,96px);
  line-height:1.208;
  margin-bottom:0;
}
.openhouse__titulo span{display:block;font-size:1em;font-weight:300;}

.openhouse__principal{margin-top:clamp(-4px,-.278vw,0px);}
.openhouse__principal img{width:100%;aspect-ratio:1440/896;object-fit:cover;}
@media (max-width:640px){.openhouse__principal img{aspect-ratio:4/3;}}

.mosaico{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  margin:clamp(6px,.83vw,12px) auto 0;
  width:min(100% - 2 * var(--gutter),70.9%);
  align-items:start;
}
.mosaico img{width:100%;aspect-ratio:341/597;object-fit:cover;}
/* La imagen central baja respecto a las laterales, como en la maquetación */
.mosaico figure:nth-child(2){margin-top:46.6%;}

@media (max-width:640px){
  .mosaico{width:calc(100% - 2 * var(--gutter));}
  .mosaico img{aspect-ratio:100/150;}
}
/* En pantallas pequeñas los cuadros decorativos estorban al contenido */
@media (max-width:860px){
  .deco{display:none;}
}

/* --------------------------------------------------------------------------
   8. Video
   -------------------------------------------------------------------------- */
.video{padding-block:clamp(40px,7vw,90px);}
.video__marco{
  position:relative;
  aspect-ratio:16/9;
  background:#000;
  overflow:hidden;
  border-radius:2px;
}
.video__marco iframe{width:100%;height:100%;border:0;display:block;}

/* Reproductor con carga diferida (facade): la miniatura se muestra al
   instante y el video de YouTube se carga solo al hacer clic. */
.video__play{
  position:absolute;inset:0;width:100%;height:100%;
  padding:0;border:0;cursor:pointer;background:#000;display:block;
}
.video__thumb{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:opacity .35s,transform 4s ease;
}
.video__play:hover .video__thumb{opacity:.9;}
.video__boton{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:clamp(60px,6.5vw,92px);height:clamp(42px,4.5vw,64px);
  border-radius:16px;background:rgba(20,20,20,.72);
  display:grid;place-items:center;
  transition:background .3s,transform .3s;
}
.video__play:hover .video__boton{background:#e10600;transform:translate(-50%,-50%) scale(1.05);}
.video__boton::after{
  content:'';margin-left:.28em;
  border-style:solid;border-width:.55em 0 .55em .95em;
  border-color:transparent transparent transparent #fff;
}

/* --------------------------------------------------------------------------
   9. Proyectos
   -------------------------------------------------------------------------- */
.proyectos{padding-block:var(--seccion-y);}
.proyectos__titulo{margin-bottom:clamp(38px,6vw,64px);}
.proyectos{--gg:clamp(12px,2.2vw,30px);}
.galeria{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gg);}
.galeria a,.galeria figure{position:relative;overflow:hidden;display:block;}
.galeria img{
  width:100%;aspect-ratio:12/13;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.3,1),filter var(--trans);
}
.galeria a:hover img{transform:scale(1.06);filter:brightness(1.08);}
/* Segunda fila: dos columnas del mismo ancho que la primera, centradas */
.galeria__fila2{
  grid-template-columns:repeat(2,1fr);
  width:calc((200% - var(--gg)) / 3);
  margin:clamp(14px,3vw,44px) auto 0;
}

@media (max-width:700px){
  .galeria{grid-template-columns:repeat(2,1fr);}
  .galeria__fila2{grid-template-columns:repeat(2,1fr);width:100%;}
}

/* --------------------------------------------------------------------------
   10. Serenidad (sección con imagen de fondo)
   -------------------------------------------------------------------------- */
/* Medidas de la maquetación a 1440px:
   foto de fondo VISIBLE (solo un velo suave a la izquierda para el texto)
   título cap 48px (≈68px de fuente) · párrafo 803px de ancho, 25px
   deco arriba a la derecha · sección de ~1190px de alto                  */
.serenidad{position:relative;padding-top:clamp(70px,17.4vw,250px);padding-bottom:clamp(70px,15.8vw,228px);overflow:hidden;}
.serenidad__fondo{position:absolute;inset:0;z-index:0;}
.serenidad__fondo img{width:100%;height:100%;object-fit:cover;object-position:center;}
/* Velo suave: oscurece solo la franja izquierda donde va el texto y se
   desvanece hacia la derecha para dejar la foto a la vista. */
.serenidad__fondo::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.5) 26%,rgba(0,0,0,.18) 52%,rgba(0,0,0,0) 78%),
    linear-gradient(180deg,rgba(0,0,0,.4) 0%,rgba(0,0,0,0) 22%);
}
.serenidad__deco{top:clamp(20px,3.9vw,56px);right:clamp(-14px,-.97vw,0px);bottom:auto;left:auto;}
.serenidad__contenido{position:relative;z-index:1;}
/* El título va ligeramente indentado respecto al texto, como en la maqueta */
.serenidad .titulo{
  max-width:820px;
  margin-left:clamp(0px,5.14vw,74px);
  margin-bottom:clamp(18px,4.93vw,71px);
  font-size:clamp(1.9rem,4.72vw,68px);
  line-height:1.13;
}
.serenidad .parrafo{
  max-width:803px;
  font-size:clamp(.9rem,1.736vw,25px);
  line-height:1.6;
}
.serenidad .lista-amenidades{max-width:640px;}
.lista-amenidades{margin-top:clamp(26px,4.86vw,70px);display:grid;gap:clamp(.4em,.9vw,.6em);}
.lista-amenidades li{position:relative;padding-left:1.6em;font-size:clamp(.95rem,1.53vw,22px);font-weight:600;}
.lista-amenidades li::before{
  content:'';position:absolute;left:.2em;top:.66em;
  width:.3em;height:.3em;border-radius:50%;background:#fff;
}
.lista-amenidades li:first-child{padding-left:0;}
.lista-amenidades li:first-child::before{display:none;}
@media (max-width:640px){
  .serenidad .titulo{margin-left:0;}
}

/* --------------------------------------------------------------------------
   11. Preguntas frecuentes
   -------------------------------------------------------------------------- */
.faq{position:relative;padding-block:var(--seccion-y);overflow:hidden;}
.faq__plano{
  position:absolute;left:0;top:0;width:min(46%,560px);height:100%;
  object-fit:cover;object-position:right center;opacity:.5;z-index:0;
  -webkit-mask-image:linear-gradient(90deg,#000 45%,transparent 100%);
          mask-image:linear-gradient(90deg,#000 45%,transparent 100%);
}
.faq__inner{position:relative;z-index:1;}
@media (max-width:860px){
  .faq__plano{width:100%;opacity:.16;-webkit-mask-image:none;mask-image:none;}
}
.faq .titulo{margin-bottom:clamp(34px,5vw,60px);}
.acordeon{max-width:760px;margin-inline:auto;display:grid;gap:2px;}
.acordeon__item{border-bottom:1px solid rgba(255,255,255,.14);}
.acordeon__boton{
  width:100%;display:flex;align-items:flex-start;gap:14px;
  padding:1.05em 0;background:none;border:0;text-align:left;cursor:pointer;
  font-size:clamp(.92rem,1.7vw,1.06rem);font-weight:600;line-height:1.45;
  transition:opacity var(--trans);
}
.acordeon__boton:hover{opacity:.75;}
.acordeon__boton::before{content:'•';flex:none;opacity:.9;}
.acordeon__signo{
  margin-left:auto;flex:none;font-weight:300;font-size:1.5em;line-height:1;
  transition:transform var(--trans);
}
.acordeon__boton[aria-expanded="true"] .acordeon__signo{transform:rotate(45deg);}
.acordeon__panel{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--trans);
}
.acordeon__item.abierto .acordeon__panel{grid-template-rows:1fr;}
.acordeon__panel > div{overflow:hidden;}
.acordeon__panel p{
  padding:0 0 1.3em 1.6em;color:var(--gris-texto);
  font-size:clamp(.88rem,1.5vw,.98rem);line-height:1.85;
}
.faq__nota{
  max-width:660px;margin:clamp(34px,5vw,54px) auto 0;
  text-align:center;font-size:.86rem;font-weight:500;line-height:1.9;color:#dcdcdc;
}

/* --------------------------------------------------------------------------
   12. Contacto
   -------------------------------------------------------------------------- */
.contacto{padding-block:var(--seccion-y);}
.contacto__grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(34px,6vw,70px);align-items:start;
}
.contacto__info{text-align:center;padding-top:clamp(10px,3vw,30px);}
.contacto__direccion{
  font-size:clamp(1rem,2vw,1.22rem);font-weight:600;line-height:1.5;
  margin-bottom:clamp(20px,3vw,32px);
}
.contacto__info .parrafo{text-align:justify;font-weight:500;}
.contacto__tels{margin-top:clamp(28px,4vw,44px);}
.contacto__tels h3{font-size:clamp(.95rem,1.8vw,1.1rem);font-weight:600;margin-bottom:1.1em;}
.tel{margin-bottom:1.4em;}
.tel__num{
  display:inline-flex;align-items:center;gap:.65em;
  font-size:clamp(1rem,2vw,1.16rem);font-weight:600;letter-spacing:.06em;
  transition:opacity var(--trans);
}
.tel__num:hover{opacity:.7;}
.tel__num img{width:22px;height:22px;flex:none;}
.tel__rol{display:block;margin-top:.25em;font-weight:600;font-size:clamp(.95rem,1.8vw,1.1rem);}

/* Formulario */
.formulario{
  background:var(--gris-card);
  border-radius:var(--radio);
  padding:clamp(26px,4vw,46px);
}
.formulario__fila{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.6vw,18px);}
.campo{margin-bottom:clamp(10px,1.6vw,18px);}
.campo input,.campo select{
  width:100%;
  padding:.72em 1.25em;
  background:transparent;
  border:1px solid var(--gris-borde);
  border-radius:999px;
  color:#fff;
  font-size:.92rem;
  font-weight:400;
  transition:border-color var(--trans),background var(--trans);
}
.campo select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23fff' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1.15em center;background-size:11px;
  padding-right:2.6em;}
.campo select option{background:#1c1c1c;color:#fff;}
.campo input::placeholder{color:#8d8d8d;}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:#fff;outline:none;background:rgba(255,255,255,.04);}

.campo--mensaje{margin-top:clamp(18px,3vw,30px);}
.campo--mensaje label{display:block;font-size:1rem;font-weight:400;margin-bottom:.5em;color:#dedede;}
.campo--mensaje textarea{
  width:100%;min-height:78px;resize:vertical;
  background:transparent;border:0;border-bottom:1px solid var(--gris-borde);
  color:#fff;font-size:.92rem;padding:.4em 0;
  transition:border-color var(--trans);
}

.aviso{
  display:flex;gap:.7em;align-items:flex-start;
  margin:clamp(18px,3vw,26px) 0 clamp(18px,3vw,26px);
  font-size:.635rem;line-height:1.55;color:#a8a8a8;
}
.aviso input{
  flex:none;width:11px;height:11px;margin-top:.3em;
  accent-color:#fff;cursor:pointer;
}
.aviso a{text-decoration:underline;}

.formulario .boton{width:auto;min-width:150px;padding:.7em 2.2em;background:transparent;}
.formulario__estado{margin-top:1em;font-size:.85rem;color:#9ee6a8;min-height:1.2em;}

@media (max-width:820px){
  .contacto__grid{grid-template-columns:1fr;}
}
@media (max-width:460px){
  .formulario__fila{grid-template-columns:1fr;}
}

/* --------------------------------------------------------------------------
   13. Banner final
   -------------------------------------------------------------------------- */
/* La foto se muestra completa (aspecto 1.5) y clara, como en la maqueta.
   Solo un velo muy tenue + sombra en el texto para asegurar legibilidad.
   Texto: cap 46px (≈66px de fuente), ambas líneas del mismo tamaño.       */
.banner{position:relative;aspect-ratio:1440/938;overflow:hidden;}
.banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.banner::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(120% 80% at 50% 33%,rgba(0,0,0,.34) 0%,rgba(0,0,0,.16) 45%,rgba(0,0,0,.05) 100%);
}
/* El texto va en el tercio superior, centrado horizontalmente, como en la maqueta */
.banner__texto{
  position:absolute;top:33%;left:50%;transform:translate(-50%,-50%);
  width:100%;z-index:1;text-align:center;padding-inline:var(--gutter);
  text-shadow:0 2px 24px rgba(0,0,0,.5);}
.banner__texto span{display:block;font-weight:300;font-size:clamp(1.5rem,4.58vw,66px);line-height:1.16;text-transform:uppercase;letter-spacing:.01em;}
.banner__texto strong{display:block;font-weight:700;font-size:clamp(1.7rem,4.58vw,66px);line-height:1.16;text-transform:uppercase;}
@media (max-width:640px){
  .banner{aspect-ratio:3/4;}
}

/* --------------------------------------------------------------------------
   14. Pie de página
   -------------------------------------------------------------------------- */
.pie{background:var(--negro);padding-block:clamp(28px,4vw,44px);}
.pie__inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(16px,4vw,40px);flex-wrap:wrap;
}
.pie img{width:clamp(105px,12vw,140px);}
.pie a,.pie p{font-size:clamp(.78rem,1.4vw,.9rem);font-weight:600;}
.pie a{transition:opacity var(--trans);}
.pie a:hover{opacity:.65;}
@media (max-width:640px){
  .pie__inner{flex-direction:column;text-align:center;gap:18px;}
}

/* --------------------------------------------------------------------------
   15. Cabecera de páginas internas
   -------------------------------------------------------------------------- */
.encabezado-pagina{
  position:relative;min-height:clamp(320px,44vw,480px);
  display:flex;align-items:flex-end;
  padding-block:clamp(150px,20vw,190px) clamp(45px,7vw,80px);
  overflow:hidden;
}
.encabezado-pagina img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.encabezado-pagina::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.35) 45%,rgba(0,0,0,.8) 100%);
}
.encabezado-pagina .contenedor{position:relative;z-index:1;}

.bloque-texto{padding-block:var(--seccion-y);}
.bloque-texto .titulo{margin-bottom:clamp(20px,3vw,32px);}
.bloque-texto .parrafo + .parrafo{margin-top:1.2em;}

/* Aviso de sección pendiente de maquetación */
.pendiente{
  border:1px dashed rgba(255,255,255,.28);
  border-radius:var(--radio);
  padding:clamp(24px,4vw,40px);
  text-align:center;
  color:var(--gris-texto);
  font-size:.95rem;
}
.pendiente strong{color:#fff;font-weight:600;}

/* ==========================================================================
   PÁGINA NOSOTROS
   ========================================================================== */

/* --- Hero: blueprint + retrato + intro --------------------------------- */
.nos-hero{
  position:relative;
  overflow:hidden;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:clamp(110px,11vw,160px);
  padding-bottom:clamp(36px,4.5vw,65px);
  box-sizing:border-box;
}
.nos-hero__fondo{position:absolute;inset:0;z-index:0;}
.nos-hero__fondo img{width:100%;height:100%;object-fit:cover;object-position:center center;opacity:.65;}
.nos-hero__fondo::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.15) 35%,rgba(0,0,0,.75) 100%);}
.nos-hero__inner{position:relative;z-index:1;text-align:center;width:100%;}
.nos-hero__retrato{width:clamp(180px,19.5vw,285px);margin:0 auto clamp(16px,2vw,30px);}
.nos-hero__retrato img{width:100%;height:auto;display:block;}
.nos-hero__intro{
  max-width:1010px;margin:0 auto;
  font-size:clamp(.82rem,1.15vw,1.05rem);line-height:1.65;text-align:justify;text-justify:inter-word;color:#e8e8e8;font-weight:300;
}

/* --- Valores / Misión / Visión ----------------------------------------- */
.nos-vmv{padding-block:clamp(50px,8vw,110px);}
.nos-vmv__grid{
  display:grid;grid-template-columns:1fr 1.15fr 1fr;
  gap:clamp(30px,5vw,80px);
}
.nos-vmv__col + .nos-vmv__col{position:relative;}
.nos-vmv__col + .nos-vmv__col::before{
  content:'';position:absolute;left:calc(-1 * clamp(15px,2.5vw,40px));top:.3em;bottom:.3em;
  width:1px;background:rgba(255,255,255,.28);
}
.nos-vmv h3{
  font-family:var(--fuente-heavy);
  font-size:clamp(1.2rem,2.4vw,1.85rem);
  font-weight:700;
  letter-spacing:.04em;
  margin-bottom:1.1em;
}
.nos-vmv__lista li{font-size:clamp(.95rem,1.6vw,1.12rem);font-weight:300;line-height:2.1;}
.nos-vmv p{font-size:clamp(.88rem,1.5vw,1.02rem);line-height:1.85;font-weight:300;color:#dcdcdc;text-align:justify;}
.nos-vmv__nota{
  max-width:720px;margin:clamp(40px,6vw,80px) auto 0;text-align:center;
  font-size:clamp(.9rem,1.6vw,1.05rem);font-weight:300;color:#d0d0d0;line-height:1.7;
}

/* --- Secciones de servicios con fondo foto ----------------------------- */
.nos-serv{position:relative;overflow:hidden;padding-block:clamp(60px,9vw,130px);}
.nos-serv__fondo{position:absolute;inset:0;z-index:0;}
.nos-serv__fondo img{width:100%;height:100%;object-fit:cover;object-position:center center;}
.nos-serv__fondo::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.5);}

/* Fondo y degradado nítido para Ingeniería Eléctrica */
.nos-serv--electrica .nos-serv__fondo img{
  opacity:0.92;
  filter:grayscale(1) contrast(1.05);
}
.nos-serv--electrica .nos-serv__fondo::after{
  background:radial-gradient(ellipse at 50% 45%,rgba(0,0,0,.15) 0%,rgba(0,0,0,.45) 85%),
             linear-gradient(180deg,rgba(0,0,0,.4) 0%,transparent 20%,transparent 80%,rgba(0,0,0,.65) 100%);
}

/* Fondo y degradado nítido para Aire Acondicionado */
.nos-serv--aire .nos-serv__fondo img{
  opacity:0.92;
  filter:grayscale(1) contrast(1.08);
}
.nos-serv--aire .nos-serv__fondo::after{
  background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,.15) 0%,rgba(0,0,0,.45) 85%),
             linear-gradient(180deg,rgba(0,0,0,.45) 0%,transparent 20%,transparent 80%,rgba(0,0,0,.65) 100%);
}

.nos-serv__inner{position:relative;z-index:1;}
.nos-serv__eyebrow{
  font-size:clamp(.95rem,1.4vw,1.25rem);
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:clamp(10px,1.5vw,20px);
}
.nos-serv__eyebrow strong{font-weight:700;}
.nos-serv__titulo{
  font-size:clamp(1.4rem,2.8vw,2.4rem);
  font-weight:300;
  text-transform:uppercase;
  line-height:1.2;
  letter-spacing:.03em;
  margin-bottom:clamp(45px,6vw,75px);
}
.nos-serv__titulo strong{font-weight:700;}

/* Timeline vertical zigzag (2 columnas) con nodos circulares */
.nos-cols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(30px,6vw,90px);
  max-width:1160px;
  margin-inline:auto;
}
.nos-tl{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:clamp(16px,2.2vw,28px);
  padding:0;
}
.nos-tl::before{
  content:'';
  position:absolute;
  left:50%;
  top:12px;
  bottom:12px;
  width:1.5px;
  background:rgba(255,255,255,.65);
  transform:translateX(-50%);
  z-index:0;
}
.nos-tl__item{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  position:relative;
  z-index:1;
  min-height:2.8em;
}
.nos-tl__dot{
  grid-column:2;
  width:14px;
  height:14px;
  border-radius:50%;
  border:2px solid #fff;
  background:#0a0a0a;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:2;
  box-shadow:0 0 0 2px rgba(0,0,0,0.85);
  margin:0 auto;
}
.nos-tl__dot::before{
  content:'';
  width:4px;
  height:4px;
  border-radius:50%;
  background:#fff;
}

/* Items a la derecha: [Spacer] [Dot] [Number + Text] */
.nos-tl__item--der .nos-tl__content{
  grid-column:3;
  display:flex;
  align-items:center;
  gap:clamp(8px,1.2vw,14px);
  padding-left:clamp(10px,1.4vw,18px);
}
.nos-tl__item--der .nos-tl__num{
  font-size:clamp(1.9rem,3.2vw,2.8rem);
  font-weight:700;
  line-height:1;
  color:#fff;
  flex:none;
}
.nos-tl__item--der .nos-tl__txt{
  font-size:clamp(.72rem,.95vw,.86rem);
  line-height:1.3;
  font-weight:300;
  color:#e8e8e8;
  text-align:left;
  max-width:230px;
}

/* Items a la izquierda: [Text + Number] [Dot] [Spacer] */
.nos-tl__item--izq .nos-tl__content{
  grid-column:1;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:clamp(8px,1.2vw,14px);
  padding-right:clamp(10px,1.4vw,18px);
}
.nos-tl__item--izq .nos-tl__txt{
  font-size:clamp(.72rem,.95vw,.86rem);
  line-height:1.3;
  font-weight:300;
  color:#e8e8e8;
  text-align:right;
  max-width:230px;
}
.nos-tl__item--izq .nos-tl__num{
  font-size:clamp(1.9rem,3.2vw,2.8rem);
  font-weight:700;
  line-height:1;
  color:#fff;
  flex:none;
}

/* Timeline diagonal (aire) */
.nos-diag{
  position:relative;
  width:100%;
  max-width:1160px;
  height:clamp(460px,46vw,580px);
  margin:clamp(20px,3vw,40px) auto 0;
}
.nos-diag__linea{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:0;
}
.nos-diag__node{
  position:absolute;
  transform:translate(-50%,-50%);
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
}
.nos-diag__dot{
  width:14px;
  height:14px;
  border-radius:50%;
  border:2px solid #fff;
  background:#0a0a0a;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 0 2px rgba(0,0,0,0.85);
  position:relative;
  z-index:2;
}
.nos-diag__dot::before{
  content:'';
  width:4px;
  height:4px;
  border-radius:50%;
  background:#fff;
}

/* Coordenadas en la diagonal ascendente (1 a 10) */
.nos-diag__node--1 { left:18.0%; top:85.0%; }
.nos-diag__node--2 { left:26.2%; top:77.8%; }
.nos-diag__node--3 { left:34.4%; top:70.6%; }
.nos-diag__node--4 { left:42.7%; top:63.4%; }
.nos-diag__node--5 { left:50.9%; top:56.2%; }
.nos-diag__node--6 { left:59.1%; top:48.8%; }
.nos-diag__node--7 { left:67.3%; top:41.6%; }
.nos-diag__node--8 { left:75.6%; top:34.4%; }
.nos-diag__node--9 { left:83.8%; top:27.2%; }
.nos-diag__node--10{ left:92.0%; top:20.0%; }

.nos-diag__content{
  display:flex;
  align-items:center;
  gap:clamp(6px,.9vw,12px);
  position:absolute;
  white-space:nowrap;
}
.nos-diag__num{
  font-size:clamp(1.5rem,2.4vw,2.3rem);
  font-weight:700;
  line-height:1;
  color:#fff;
  flex:none;
}
.nos-diag__txt{
  font-size:clamp(.68rem,.88vw,.82rem);
  line-height:1.25;
  font-weight:300;
  color:#e8e8e8;
  text-align:left;
}

/* Items ARRIBA-IZQUIERDA del nodo */
.nos-diag__node--arriba .nos-diag__content{
  bottom:12px;
  right:4px;
  flex-direction:row;
  justify-content:flex-end;
}

/* Items ABAJO-DERECHA del nodo */
.nos-diag__node--abajo .nos-diag__content{
  top:12px;
  left:4px;
  flex-direction:row;
  justify-content:flex-start;
}

/* --- Especiales -------------------------------------------------------- */
.nos-esp{
  padding-block:clamp(70px,10vw,140px);
  background:var(--negro);
}
.nos-esp__titulo{
  font-family:var(--fuente-heavy);
  text-align:center;
  font-size:clamp(2rem,3.8vw,3.2rem);
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:clamp(50px,7vw,90px);
  color:#fff;
}
.nos-esp__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(30px,6vw,80px);
  align-items:center;
  max-width:1140px;
  margin-inline:auto;
}
.nos-esp__lista{
  display:flex;
  flex-direction:column;
  gap:clamp(38px,5.5vw,68px);
  max-width:460px;
}
.nos-esp__item{
  display:flex;
  align-items:flex-start;
  gap:clamp(18px,2.2vw,28px);
}
.nos-esp__num{
  font-size:clamp(3.2rem,5.2vw,4.5rem);
  font-weight:700;
  line-height:.88;
  color:#fff;
  flex:none;
}
.nos-esp__txt{
  font-size:clamp(.82rem,1.05vw,.95rem);
  font-weight:300;
  line-height:1.45;
  color:#e6e6e6;
  padding-top:4px;
}

/* Fotos escalonadas: Foto 2 a la izquierda (abajo), Foto 1 a la derecha (arriba) */
.nos-esp__fotos{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(16px,2.5vw,32px);
  align-items:start;
  max-width:540px;
  margin-left:auto;
}
.nos-esp__foto{
  margin:0;
}
.nos-esp__foto--1{
  margin-top:0;
}
.nos-esp__foto--2{
  margin-top:clamp(100px,14vw,190px);
}
.nos-esp__foto img{
  width:100%;
  height:auto;
  aspect-ratio:9/16;
  object-fit:cover;
  display:block;
}

/* --- Experiencia ------------------------------------------------------- */
.nos-exp{
  padding-block:clamp(70px,10vw,140px);
  background:var(--negro);
}
.nos-exp__titulo{
  font-family:var(--fuente-heavy);
  text-align:center;
  font-size:clamp(2rem,3.8vw,3.2rem);
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:clamp(50px,7vw,90px);
  color:#fff;
}
.nos-exp__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(38px,5.5vw,70px) clamp(24px,4vw,55px);
  max-width:1140px;
  margin-inline:auto;
}
.nos-exp__item{
  display:flex;
  align-items:flex-start;
  gap:clamp(14px,1.8vw,22px);
}
.nos-exp__badge{
  width:clamp(56px,5.8vw,74px);
  height:clamp(56px,5.8vw,74px);
  border-radius:50%;
  border:1.5px solid #fff;
  display:grid;
  place-items:center;
  flex:none;
  font-size:clamp(1.5rem,2.3vw,2.1rem);
  font-weight:700;
  color:#fff;
  line-height:1;
}
.nos-exp__content{
  display:flex;
  flex-direction:column;
}
.nos-exp__txt{
  font-size:clamp(.75rem,.95vw,.86rem);
  line-height:1.4;
  color:#e6e6e6;
  font-weight:300;
}
.nos-exp__txt strong{
  font-weight:700;
  color:#fff;
}
.nos-exp__dots{
  display:flex;
  gap:8px;
  margin-top:10px;
  align-items:center;
}
.nos-exp__dots span{
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(255,255,255,.38);
}
.nos-exp__dots span:first-child{
  background:#fff;
}
.nos-exp__dots span:last-child{
  background:rgba(255,255,255,.75);
}

/* Disposición escalonada/cascada en escritorio (3 columnas) */
@media (min-width:861px){
  .nos-exp__item--1{ grid-column:1; grid-row:1; }
  .nos-exp__item--2{ grid-column:2; grid-row:1; }
  .nos-exp__item--3{ grid-column:3; grid-row:1; }
  .nos-exp__item--4{ grid-column:1; grid-row:2; }
  .nos-exp__item--5{ grid-column:2; grid-row:2; }
  .nos-exp__item--6{ grid-column:3; grid-row:2; }
  .nos-exp__item--7{ grid-column:2; grid-row:3; }
  .nos-exp__item--8{ grid-column:3; grid-row:3; }
  .nos-exp__item--9{ grid-column:3; grid-row:4; }
}

/* --- Principales obras (años) ------------------------------------------ */
.nos-obras{
  padding-block:clamp(60px,9vw,130px);
  background:var(--negro);
}
.nos-obras__titulo{
  font-family:var(--fuente-heavy);
  text-align:center;
  font-size:clamp(2.4rem,4.4vw,3.6rem);
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  line-height:1.15;
  margin-bottom:clamp(55px,8vw,90px);
  color:#fff;
}

/* Línea de tiempo de años con gráfico de maquetación */
.nos-timeline{
  position:relative;
  max-width:780px;
  width:calc(100% - 30px);
  margin:0 auto clamp(60px,9vw,110px);
  padding-block:54px;
}
.nos-timeline__grafico{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.nos-timeline__img{
  width:100%;
  height:auto;
  display:block;
  pointer-events:none;
}
.nos-timeline__years{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  pointer-events:none;
}
.nos-timeline__year{
  font-family:var(--fuente-bebas);
  position:absolute;
  font-size:clamp(1.8rem,3.2vw,2.6rem);
  font-weight:700;
  letter-spacing:.03em;
  color:transparent;
  -webkit-text-stroke:1.4px #ffffff;
  text-decoration:none;
  pointer-events:auto;
  transition:transform .2s ease, -webkit-text-stroke .2s ease, color .2s ease, text-shadow .2s ease;
  cursor:pointer;
  user-select:none;
  line-height:1;
  white-space:nowrap;
}
.nos-timeline__year:hover,
.nos-timeline__year.activo{
  -webkit-text-stroke:1.6px #fff;
  color:#fff;
  text-shadow:0 0 16px rgba(255,255,255,.65);
}

/* Posicionamiento alternado ceñido arriba / abajo de la barra */
.nos-timeline__year--above{
  bottom:calc(50% + 14px);
  transform:translateX(-50%);
}
.nos-timeline__year--below{
  top:calc(50% + 14px);
  transform:translateX(-50%);
}

/* Posiciones X calibradas exactamente con cada uno de los 6 puntos de line-time.webp */
.nos-timeline__year--2018{ left:4.0%; }
.nos-timeline__year--2019{ left:19.8%; }
.nos-timeline__year--2020{ left:37.6%; }
.nos-timeline__year--2021{ left:56.7%; }
.nos-timeline__year--2022{ left:75.7%; }
.nos-timeline__year--2023{ left:96.7%; }

.nos-anio{
  display:none;
  margin-bottom:clamp(40px,7vw,90px);
}
.nos-anio.activo{
  display:block;
  animation:nosAnioFade .4s ease-out forwards;
}
@keyframes nosAnioFade{
  from{
    opacity:0;
    transform:translateY(14px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}
.nos-anio__num{
  font-family:var(--fuente-bebas);
  text-align:center;
  font-size:clamp(4rem,12vw,10rem);
  font-weight:700;
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,.7);
  margin-bottom:clamp(35px,5.5vw,65px);
  letter-spacing:.02em;
}
.nos-anio__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(40px,6vw,85px) clamp(24px,4.5vw,65px);
  max-width:1140px;
  margin-inline:auto;
  padding-left:clamp(20px,3vw,40px);
  border-left:1.5px solid rgba(255,255,255,.65);
}
.nos-anio__grid--single{
  display:flex;
  justify-content:center;
  border-left:none;
  padding-left:0;
}
.nos-anio__grid--single .obra{
  max-width:380px;
}
.obra{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.obra__desc{
  font-size:clamp(.78rem,1vw,.88rem);
  line-height:1.5;
  font-weight:300;
  color:#e2e2e2;
}
.obra__meta{
  margin-top:1.1em;
  font-size:clamp(.78rem,1vw,.88rem);
  font-weight:700;
  line-height:1.5;
  color:#fff;
}
.obra__meta span{display:block;}

/* --- Responsive Nosotros ----------------------------------------------- */
@media (max-width:900px){
  .nos-vmv__grid{grid-template-columns:1fr;gap:clamp(34px,6vw,50px);}
  .nos-vmv__col + .nos-vmv__col::before{display:none;}
  .nos-exp__grid{grid-template-columns:1fr 1fr;}
  .nos-anio__grid{grid-template-columns:1fr 1fr;}
  
  /* Timeline diagonal en tablets y móviles: flujo vertical */
  .nos-diag{
    height:auto;
    display:flex;
    flex-direction:column;
    gap:clamp(14px,2.5vw,20px);
    margin-top:24px;
    padding-left:14px;
  }
  .nos-diag__linea{display:none;}
  .nos-diag__node{
    position:relative;
    left:auto !important;
    top:auto !important;
    transform:none;
    justify-content:flex-start;
    gap:14px;
  }
  .nos-diag__content{
    position:static;
    white-space:normal;
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:10px;
  }
  .nos-diag__txt{font-size:.85rem;max-width:none;}
  .nos-diag__num{font-size:1.6rem;}
}
@media (max-width:760px){
  .nos-cols{grid-template-columns:1fr;gap:clamp(30px,6vw,50px);}
  .nos-esp__grid{grid-template-columns:1fr;gap:clamp(40px,7vw,60px);}
  .nos-esp__lista{max-width:none;}
  .nos-esp__fotos{max-width:440px;margin-inline:auto;}
  .nos-esp__foto--2{margin-top:clamp(40px,8vw,70px);}
  
  /* Timeline en móvil: línea lateral y flujo continuo */
  .nos-tl::before{left:14px;transform:none;}
  .nos-tl{gap:clamp(16px,3vw,22px);}
  .nos-tl__item{grid-template-columns:28px 1fr;gap:12px;min-height:0;}
  .nos-tl__dot{grid-column:1;margin:0 auto;}
  .nos-tl__item--der .nos-tl__content,
  .nos-tl__item--izq .nos-tl__content{
    grid-column:2;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    padding:0;
    gap:12px;
  }
  .nos-tl__item--izq .nos-tl__txt{order:2;text-align:left;max-width:none;}
  .nos-tl__item--izq .nos-tl__num{order:1;}
  .nos-tl__item--der .nos-tl__txt{max-width:none;}
}
@media (max-width:560px){
  .nos-exp__grid{grid-template-columns:1fr;}
  .nos-anio__grid{grid-template-columns:1fr;}
  .nos-esp__fotos{grid-template-columns:1fr 1fr;}
  .nos-timeline{padding-block:34px;width:100%;}
  .nos-timeline__year{font-size:1.05rem;}
}

/* ==========================================================================
   11. PREDIO 2064 (Página de Predio)
   ========================================================================== */

/* Hero de Predio */

/* ==========================================================================
   Ajustes de móvil (revisión técnica) — bloque nuevo, escritorio intacto
   ========================================================================== */
@media (max-width:760px){
  /* iOS amplía la página al enfocar un campo con texto menor de 16px, y no
     vuelve a alejarse. 16px lo evita sin tocar el diseño de escritorio. */
  .campo input,
  .campo select,
  .campo--mensaje textarea{font-size:16px;}

  /* La casilla de consentimiento medía 11x11: imposible de acertar con el dedo. */
  .aviso input{width:18px;height:18px;margin-top:.15em;}
  /* Y su texto legal, 10.2px. */
  .aviso{font-size:.78rem;line-height:1.5;gap:.6em;}

  /* Los teléfonos son la acción principal del sitio y tenían 26px de alto.
     El padding vertical los lleva a ~44px sin mover nada de sitio. */
  .tel__num{padding-block:9px;}
}