/* ==========================================================================
   STYLES.CSS — Obligado Park
   NOTA: Mismos valores de diseño. Solo se ordena y comenta mejor.
   ========================================================================== */


/* ==========================================================================
   1) GLOBAL / BASE
   - Variables de diseño
   - Reset mínimo
   - Tipografía
   - Contenedor .wrap (1600px)
   ========================================================================== */

:root{
  /* Lienzo visual total (fondos a todo ancho) */
  --canvasw: 1920px;

  /* Ancho de contenido (según mock) */
  --contentw: 1600px;

  /* Espaciado lateral interno del contenido */
  --pad: 24px;

  /* Header */
  --header-h: 90px;

  /* Colores base */
  --c-bg: #ffffff;
  --c-text: #111111;
  --c-muted: #ffffffcc;  /* blanco con transparencia p/ subtítulo sobre imagen */
  --c-border: #ffffff66; /* borde CTA outline */
}

/* Reset mínimo */
*{ box-sizing:border-box; }
html{ font-size:16px; }
body{
  margin:0;
  background:var(--c-bg);
  color:var(--c-text);
  /* Nexa (cuando se conecte licencia) → fallback Open Sans */
  font-family: Nexa, "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:"Open Sans", sans-serif; margin:0 0 .5em; }

/* Contenido encapsulado (1600px) */
.wrap{
  width:100%;
  max-width:var(--contentw);
  margin-inline:auto;
  padding-inline:var(--pad);
}


/* ==========================================================================
   2) HEADER
   - Barra superior blanca
   - Logo izq / Menú der
   ========================================================================== */
/* ==========================================================================
   2) HEADER
   - Sticky en desktop y móvil
   - Hamburguesa <900px
   ========================================================================== */

.header{
  background:#fff;
  height:var(--header-h);
  border-bottom:1px solid #eee;
  position: sticky;
  top: 0;
  z-index: 1100; /* sobre el contenido */
}
.header__inner{
  height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

/* Logo específico del header */
.op-header-logo{
  height:64px;
  width:auto;
  transform:none;
  object-fit:contain;
  display:block;
}

/* Nav desktop */
.nav__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:28px;
}
.nav__link{
  display:inline-block;
  line-height:1;
  padding:6px 0;
  font-size:.92rem;
  font-family:"Open Sans", sans-serif; /* 400 */
  font-weight:400;
}
/* Header nav — color base y hover verde */
.nav__link{
  color:#174535;                 /* verde institucional base */
  transition: color .18s ease;
}

.nav__link:hover,
.nav__link:focus-visible{
  color:#3CBB8F;                 /* verde hover */
  outline: none;                 /* manejamos el focus abajo */
}

/* Indicador sutil (línea) al hover/focus */
.nav__link{
  position:relative;
}
.nav__link::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-6px;
  height:2px; width:0%;
  background:#3CBB8F;
  transition: width .18s ease;
}
.nav__link:hover::after,
.nav__link:focus-visible::after{
  width:100%;
}

/* Accesibilidad: focus claro para teclado */
.nav__link:focus-visible{
  text-decoration:none;
  box-shadow: 0 0 0 3px rgba(60,187,143,.35);
  border-radius:3px;
}


/* Botón hamburguesa (oculto en desktop) */
.nav__toggle{
  display:none;
  -webkit-tap-highlight-color: transparent;
  background:#174535;
  color:#fff;
  border:0;
  width:44px; height:44px;
  border-radius:8px;
  align-items:center; justify-content:center;
  cursor:pointer;
  flex-direction: column;   /* <— apila las barras */
  gap: 4px;                 /* separación entre barras */
}
.nav__bar{
  display:block;
  width:20px; height:2px; background:#fff; margin:3px 0; border-radius:2px;
}

/* ===== Breakpoint header ===== */
@media (max-width:900px){
  .nav__list{ display:none; }    /* oculto menú desktop */
  .nav__toggle{ display:inline-flex; } /* visible hamburguesa */
}

/* ==========================================================================
   MODAL FULL-SCREEN DEL MENÚ (móvil)
   ========================================================================== */

.navmodal{
  position:fixed;
  inset:0;
  background:#174535;
  color:#fff;
  z-index: 1300;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.navmodal.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.navmodal__close{
  position:absolute;
  top:14px; right:14px;
  width:44px; height:44px;
  border-radius:8px;
  background:#0f2b22; color:#fff; border:1px solid #ffffff33;
  font-size:26px; line-height:1; cursor:pointer;
}
.navmodal__inner{ width:min(92vw, 520px); }
.navmodal__list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:16px; align-items:stretch;
}
.navmodal__link{
  display:block;
  padding:14px 18px;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-family:"Open Sans", sans-serif;
  font-weight:800;
  font-size:1.25rem;
  background:#1d5a47;
  border:1px solid #ffffff22;
  border-radius:8px;
}
.navmodal__link:hover{ background:#206350; }

/* Lock scroll cuando el modal está abierto */
body.nav-open{ overflow:hidden; }

/* ==========================================================================
   BOTÓN BACK-TO-TOP
   ========================================================================== */
.backtop{
  position:fixed;
  right:16px; bottom:16px;
  width:44px; height:44px;
  border-radius:999px;
  background:#174535;
  color:#fff;
  border:1px solid #0e2a22;
  font-size:20px;
  line-height:44px;
  text-align:center;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  opacity:0; transform:translateY(10px);
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  z-index:1200;
}
.backtop.show{ opacity:1; transform:none; pointer-events:auto; }

















/* ==========================================================================
   3) BOTÓN REUTILIZABLE (CTA)
   ========================================================================== */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.9rem 1.4rem;
  border-radius:4px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
  will-change: transform;
}
.btn--outline{
  color:#fff;
  background:transparent;
  border:1px solid var(--c-border);
}
.btn--outline:hover{
  background:#fff;
  color:#111;
  border-color:#fff;
  transform: translateY(-1px);
}





/* ==========================================================================
   4) HERO
   - Fondo full-bleed SIN overlay (la imagen ya está oscura)
   - Contenido a 1600px (.wrap)
   - Tira de 3 thumbnails superpuesta
   ========================================================================== */

.hero{
  position:relative;
  color:#fff;
  background:#000 url("../img/Banner_principal.jpg") center / cover no-repeat; /* fondo a todo ancho */
  min-height:86vh;
  display:block;
}
.hero__inner{
  position:relative;                 /* referencia para la tira de thumbs */
  min-height:inherit;
  display:grid;
  grid-template-columns:1fr;         /* el strip se posiciona aparte */
  align-content:start;               /* (antes center) */
  padding-top:calc(var(--header-h) + 32px); /* sube el H1 */
  padding-bottom:72px;               /* respiro inferior */
}
.hero__content{ max-width:640px; }

.hero__title{
  font-size:clamp(2rem, 4.2vw, 4rem); /* ~32→64px */
  line-height:1.15;
  margin:0 0 .4em;
  color:#fff;
}
.hero__subtitle{
  font-size:clamp(1rem, 1.4vw, 1.25rem); /* ~16→20px */
  line-height:1.6;
  color:var(--c-muted);
  margin:0 0 1.2rem;
}

/* Tira de thumbnails (anclada a borde derecho de .wrap) */
.hero__strip{
  position:absolute;
  right:-65px;
  bottom:clamp(24px, 6vh, 64px);
  display:flex;
  gap:10px; /* antes 16px → más juntas */
}
/* Fallback si gap no es soportado */
@supports not (gap: 10px){
  .hero__strip .thumb + .thumb{ margin-left:10px; }
}

/* Thumb individual */
.thumb{
  margin:0;                          /* anula margin UA de <figure> */
  width:clamp(220px, 20vw, 380px);
  aspect-ratio:16 / 9;
  border:1px solid rgba(255,255,255,.14);
  overflow:hidden;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  background:#111;
}
.thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.001);            /* evita gaps por subpixel */
}


/* ----- HERO Breakpoints ----- */

/* ≤ 1400px: ajustes tipográficos + separación */
@media (max-width:1400px){
  .nav__list{ gap:22px; }
  .hero__title{ font-size:clamp(2rem, 4.6vw, 3.4rem); }
  .thumb{ width:clamp(200px, 24vw, 320px); }
}

/* ≤ 1200px: la tira pasa debajo del texto en grid 3x1 */
@media (max-width:1200px){
  .hero__inner{ display:block; }
  .hero__strip{
    position:static;
    margin-top:1.2rem;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:12px;
  }
  .thumb{ width:100%; aspect-ratio:16/9; }
}

/* < 900px: stack + carrusel horizontal usable */
@media (max-width:900px){
  .nav__list{ gap:16px; }
  .hero{ min-height:auto; }
  .hero__inner{ padding-block:56px; }
  .hero__title{ font-size:clamp(1.9rem, 7vw, 2.25rem); }
  .hero__subtitle{ font-size:1rem; }

  .hero__strip{
    position:static;
    display:flex;
    overflow-x:auto;
    gap:10px;
    padding-bottom:4px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }
  .hero__strip .thumb{
    flex:0 0 80%;
    scroll-snap-align:center;
  }
}


/* ==========================================================================
   5) SEC2 — ACERCA DEL PROYECTO
   - Layout 2 columnas: texto + panel único (imagen compuesta)
   - Eyebrow verde #4FAF4D (Open Sans 700)
   - Título Open Sans 700; párrafo Nexa
   ========================================================================== */

.sec2{
  background:#fff;
  padding-block:clamp(56px, 10vh, 104px);
}
.sec2__inner{
  display:grid;
  grid-template-columns:.92fr 1.08fr;  /* derecha un poco más ancha */
  gap:clamp(32px, 6vw, 80px);
  align-items:center;
}

/* Texto */
.sec2__content{ max-width:640px; }
.sec2__eyebrow{
  display:inline-block;
  margin-bottom:10px;
  color:#4FAF4D;
  font-family:"Open Sans", sans-serif; /* Open Sans 700 */
  font-weight:700;
  letter-spacing:.04em;
}
.sec2__title{
  font-family:"Open Sans", sans-serif; /* Open Sans 700 */
  font-weight:700;
  font-size:clamp(2rem, 3.2vw, 3rem);  /* ~32→48px */
  line-height:1.15;
  margin:0 0 .55em;
  color:#111;
}
.sec2__text{
  font-family:Nexa, "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size:clamp(1rem, 1.2vw, 1.125rem); /* 16→18px */
  line-height:1.7;
  color:#333;
  margin:0 0 1.25rem;
}
.sec2__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#2E6E2C;
  border:1px solid #2A6628;
  color:#fff;
  padding:.9rem 1.4rem;
  border-radius:4px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  transition:transform .2s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
}
.sec2__cta:hover{ background:#4FAF4D; border-color:#4FAF4D; transform:translateY(-1px); }

/* Panel único (imagen compuesta) */
.sec2__panel{
  margin:0;
  justify-self:end;                 /* alinea a borde derecho del wrap */
  max-width:min(100%, 920px);
  border-radius:10px;
  overflow:hidden;
}
.sec2__panel img{ display:block; width:100%; height:auto; }

/* ----- SEC2 Breakpoints ----- */
@media (max-width:1200px){
  .sec2__panel{ max-width:860px; }
}
@media (max-width:900px){
  .sec2{ padding-block:48px; }
  .sec2__panel{ max-width:100%; }
}
/* (Notas: las clases sec2__grid / item se mantienen por compatibilidad de código previo) */
@media (max-width:1400px){
  .sec2__inner{ gap:36px; }
  .sec2__title{ font-size:clamp(1.9rem, 3.2vw, 2.6rem); }
}
@media (max-width:1200px){
  .sec2__inner{ grid-template-columns:1fr; }
  .sec2__content{ max-width:720px; }
  .sec2__grid{ max-width:860px; }
}
@media (max-width:900px){
  .sec2__grid{ gap:12px; }
  .sec2__item--a,
  .sec2__item--b,
  .sec2__item--c,
  .sec2__item--d{ transform:none; } /* simplificado en mobile */
}
@media (max-width:480px){
  .sec2__grid{ grid-template-columns:1fr; }
}


/* ==========================================================================
   6) SEC3 — BARRIO / AMENITIES / DETALLES
   - 3 columnas pegadas en desktop; 1 en mobile
   - Sin radios, título/texto más abajo
   ========================================================================== */
/* SEC3 — Galería de 3 imágenes pegadas */
/* SEC3 — Galería de 3 imágenes SIN recorte (tamaño natural) */
.sec3--gallery{
  background:#fff;
  padding-block:clamp(48px, 9vh, 96px);
}
.sec3g{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:0;                 /* pegadas entre sí */
  align-items:start;     /* respeta alturas distintas */
}
.sec3g__item{ margin:0; }
.sec3g__item img{
  display:block;
  width:100%;
  height:auto;           /* 👈 mantiene proporción original, sin recortes */
  object-fit:unset;      /* por si quedó algo heredado */
  background:none;
}

/* Mobile: una abajo de otra */
@media (max-width:900px){
  .sec3g{ grid-template-columns:1fr; }
}

/* (Opcional) sin padding lateral del wrap para que toquen los bordes */
 /* .sec3--gallery .wrap{ padding-inline:0; } */



/* ==========================================================================
   7) SEC5 — PLANOS (clases únicas sec5-*)
   ========================================================================== */

.sec5{
  background:#fff;
  padding-block:clamp(48px, 8vh, 96px);
}
.sec5__title{
  font-family:"Open Sans", sans-serif;
  font-weight:800;
  font-size:clamp(2rem, 3.6vw, 3rem);
  line-height:1.1;
  margin:0 0 18px;
  color:#111;
}

/* Grid principal */
.sec5__inner{
  display:grid;
  grid-template-columns:320px minmax(0,1fr) 380px;
  grid-template-areas:
    "header  header  header"
    "filters viewer  specs";
  gap:clamp(18px, 2.6vw, 32px);
  align-items:start;
}
.sec5__header{  grid-area:header; }
.sec5__filters{ grid-area:filters; }
.sec5__viewer{  grid-area:viewer; }
.sec5__specs{   grid-area:specs; }

/* Breakpoints grid */
@media (max-width:1400px){
  .sec5__inner{ grid-template-columns:300px minmax(0,1fr) 340px; }
}
@media (max-width:1200px){
  .sec5__inner{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:
      "header"
      "filters"
      "viewer"
      "specs";
  }
  .sec5__specs{ border-left:0; padding-left:0; }
}

/* Filtros (izq) */
.sec5__toggle{
  width:100%;
  height:48px;
  border:0;
  border-radius:4px;
  background:#3CBB8F;
  color:#fff;
  font-weight:700;
  letter-spacing:.04em;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  cursor:pointer;
}
.sec5__toggle svg{ width:18px; height:18px; fill:none; stroke:#fff; stroke-width:2; }
.sec5__floors{ list-style:none; margin:14px 0 0; padding:0; }
.sec5__floor{ padding:16px 0; border-bottom:1px solid #e8e8e8; }
.sec5__floorlabel{
  display:block;
  font-weight:700;
  font-family:"Open Sans", sans-serif;
  margin:0 0 10px;
}
.sec5__chips{ display:flex; gap:10px; flex-wrap:wrap; }
.sec5__chip{
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid #b8d8cc;
  background:#fff;
  color:#174535;
  font-weight:700;
  cursor:pointer;
  transition:all .2s ease;
}
.sec5__chip:hover{ transform:translateY(-1px); border-color:#3CBB8F; }
.sec5__chip[disabled]{ opacity:.35; cursor:not-allowed; }
.sec5__chip.is-active{ background:#174535; color:#fff; border-color:#174535; }

/* Visor (centro) */
.sec5__viewer{ margin:0; }
.sec5__canvas{
  position:relative;
  width:100%;
  aspect-ratio:4 / 3;               /* evita CLS */
  background:#f3f3f3;
  border-radius:8px;
  overflow:hidden;
}
.sec5__canvas img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform-origin:center;
}
.sec5__openlb{
  position:absolute;
  right:12px;
  bottom:12px;
  background:#174535;
  color:#fff;
  border:0;
  border-radius:4px;
  padding:.5rem .75rem;
  font-weight:700;
  letter-spacing:.04em;
  cursor:pointer;
  opacity:.9;
}
.sec5__openlb:hover{ opacity:1; }

/* Ficha (derecha) */
.sec5__specs{
  border-left:1px solid #eee;
  padding-left:clamp(10px, 1.2vw, 16px);
}
.sec5__model{
  font-family:"Open Sans", sans-serif;
  font-weight:700;
  color:#319874;
  margin:.25rem 0 .25rem;
}
.sec5__desc{ margin:0 0 .75rem; font-weight:300; }
.sec5__orient{ margin:.25rem 0 1rem; font-weight:700; }
.sec5__dl{
  display:grid;
  grid-template-columns:1fr auto;
  gap:.35rem .75rem;
  margin:0 0 1rem;
}
.sec5__dl dt{ color:#666; font-weight:600; }
.sec5__dl dd{ margin:0; font-weight:300; }
.sec5__total dt,
.sec5__total dd{ font-weight:800; }
.sec5__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#174535;
  color:#fff;
  border:1px solid #174535;
  padding:.85rem 1.2rem;
  border-radius:4px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.sec5__cta:hover{ background:#3CBB8F; border-color:#3CBB8F; }

/* Lightbox */
.sec5__lightbox[hidden]{ display:none; }
.sec5__lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.82);
  z-index:9999;
  display:flex;
  flex-direction:column;
}
.sec5__lbclose{
  position:absolute;
  top:12px;
  right:12px;
  width:44px;
  height:44px;
  border-radius:6px;
  border:1px solid #ffffff55;
  background:#000;
  color:#fff;
  font-size:22px;
  cursor:pointer;
  opacity:.9;
}
.sec5__lbstage{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
#sec5LbImg{
  max-width:none;
  transform-origin:center;
  user-select:none;
  pointer-events:none;
}
.sec5__lbctrls{
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  display:flex;
  gap:10px;
}
.sec5__btn{
  min-width:56px;
  height:40px;
  border-radius:6px;
  border:1px solid #ffffff55;
  background:#111;
  color:#fff;
  font-weight:700;
  cursor:pointer;
}

/* SEC5 Breakpoints */
@media (max-width:1400px){
  .sec5__inner{ grid-template-columns:300px minmax(0,1fr) 340px; }
}
@media (max-width:1200px){
  .sec5__inner{ grid-template-columns:minmax(0,1fr); }
  .sec5__specs{ border-left:0; padding-left:0; }
}
@media (max-width:900px){
  .sec5{ padding-block:40px; }
  .sec5__chips{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .sec5__chip{ flex:0 0 auto; }
}


/* ==========================================================================
   8) MAPA
   ========================================================================== */

.sec-map{ padding:0; background:#143a2f; }
.sec-map__iframe{
  width:100%;
  height:420px;
  border:0;
  display:block;
}
@media (min-width:1200px){
  .sec-map__iframe{ height:520px; }
}


/* ==========================================================================
   9) SEC6 — CONTACTO / FOOTER
   ========================================================================== */

.sec6{
  background:#174535;
  color:#fff;
  padding-block:clamp(56px, 10vh, 96px);
}
.sec6__inner{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  grid-template-areas:"copy form";
  gap:clamp(24px, 3vw, 48px);
  align-items:start;
}

/* Copy */
.sec6__copy{ grid-area:copy; }
.sec6__title{
  font-family:"Open Sans", sans-serif;
  font-weight:800;
  font-size:clamp(2.2rem, 5vw, 4rem);
  line-height:1.05;
  margin:0 0 .75rem;
}
.sec6__lead{
  font-weight:300;
  line-height:1.7;
  margin:0 0 1rem;
  color:#e9f3ef;
}
.sec6__where{
  margin:.25rem 0 0;
  font-weight:300;
  color:#e9f3ef;
}
.sec6__where strong{ font-weight:700; }

/* Form */
.sec6__form{
  grid-area:form;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(12px, 2vw, 22px);
}
.sec6__field{ display:flex; flex-direction:column; gap:8px; }
.sec6__field--wide{ grid-column:1 / -1; }

.sec6__label{
  font-family:"Open Sans", sans-serif;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:700;
  font-size:.9rem;
  color:#cde5dd;
}

.sec6__input,
.sec6__textarea{
  width:100%;
  color:#fff;
  background:transparent;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.35);
  padding:.75rem 0 .6rem;
  outline:0;
  font-weight:300;
  caret-color:#fff;
}
.sec6__textarea{ resize:vertical; min-height:120px; }
.sec6__input::placeholder,
.sec6__textarea::placeholder{ color:#ffffff66; }

/* Focus / valid */
.sec6__input:focus,
.sec6__textarea:focus{
  border-bottom-color:#fff;
  box-shadow:0 2px 0 0 #fff inset;
}

/* Submit */
.sec6__submit{
  grid-column:1 / -1;
  height:56px;
  border-radius:4px;
  border:1px solid #dfe6e2;
  background:#e9efec;
  color:#174535;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  cursor:pointer;
}
.sec6__submit:hover{ filter:brightness(0.97); }

/* Nota legal */
.sec6__note{
  margin:clamp(28px, 5vh, 48px) auto 0;
  font-size:.9rem;
  line-height:1.6;
  color:#cde5dd;
  text-align:center;
}

/* Honeypot */
.sec6__hp{ position:absolute; left:-9999px; opacity:0; }

/* Breakpoints SEC6 */
@media (max-width:1400px){
  .sec6__inner{ grid-template-columns:.9fr 1fr; }
}
@media (max-width:1200px){
  .sec6__inner{
    grid-template-columns:1fr;
    grid-template-areas:
      "copy"
      "form";
  }
  .sec6__title{ margin-bottom:.5rem; }
}
@media (max-width:900px){
  .sec6{ padding-block:40px; }
  .sec6__form{ grid-template-columns:1fr; }
}


/* ==========================================================================
   10) SEC6 — Flash message (feedback del form)
   ========================================================================== */

.sec6__flash{
  margin-top:12px;
  padding:.75rem 1rem;
  border-radius:6px;
  font-weight:700;
  border:1px solid transparent;
}
.sec6__flash.is-ok{
  background:#e6f4ea;
  color:#174535;
  border-color:#b7dcc2;
}
.sec6__flash.is-err{
  background:#ffeaea;
  color:#8a1136;
  border-color:#f4b6c2;
}
/* SEC5 — Controles de carrusel */
.sec5__nav{
  position:absolute; inset:0; pointer-events:none;
}
.sec5__prev, .sec5__next{
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:999px;
  border:1px solid #ffffff66; background:#174535; color:#fff; font-size:22px;
  display:grid; place-items:center; opacity:.9; cursor:pointer; pointer-events:auto;
}
.sec5__prev{ left:10px; } .sec5__next{ right:10px; }
.sec5__prev:hover, .sec5__next:hover{ opacity:1; }

.sec5__dots{
  position:absolute; left:50%; bottom:12px; transform:translateX(-50%);
  display:flex; gap:6px; pointer-events:auto;
}
.sec5__dot{
  width:8px; height:8px; border-radius:999px; border:0; background:#ffffff66; cursor:pointer;
}
.sec5__dot.is-active{ background:#fff; }






/* SEC6 — Contacto con iconos */
.sec6__contactlist{
  margin-top:.5rem;
  list-style:none;
  padding:0;
  display:grid;
  gap:8px;
}
.sec6__contact{
  display:flex;
  align-items:center;
  gap:10px;
  color:#e9f3ef;
}
.sec6__contact svg{
  width:18px; height:18px;
  flex:0 0 18px;
  stroke:currentColor;
  fill:none;
  stroke-width:2;
  opacity:.9;
}
.sec6__contact a{
  color:#fff;
  text-decoration:none;
  border-bottom:1px dashed rgba(255,255,255,.45);
}
.sec6__contact a:hover{
  border-bottom-color:#fff;
}



/* SEC5 — Fit específico por tipo (plano vs render) */
.sec5__canvas img{ object-fit: cover; }            /* default: renders */
.sec5__canvas.is-plan{ background:#fff; padding:10px 14px; }
.sec5__canvas.is-plan img{ object-fit: contain; }  /* planos sin recorte */
.sec5__canvas.is-render{ padding:0; }              /* renders llenan el frame */




/* HERO — fondo rotatorio simple (fondo + overlay por debajo del contenido) */
.hero{ position:relative; }
.hero__bg{ position:absolute; inset:0; }
.hero__bgimg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; filter:brightness(.92);
  will-change:opacity; backface-visibility:hidden; transform:translateZ(0);
}
.hero__bgimg.is-top{ z-index:1; }
.hero__overlay{ position:absolute; inset:0; background:rgba(0,0,0,.44); z-index:2; pointer-events:none; }
/* el contenido ya es relative; aseguramos nivel sobre overlay */
.hero__inner{ position:relative; z-index:3; }

/* Offset de anclas con header sticky */
[id] { scroll-margin-top: calc(var(--header-h) + 8px); }

/* Alias de ancla “vacía” (p/ #nosotros) */
.anchorfix {
  position: relative;
  top: calc(-1 * (var(--header-h) + 8px));
  display: block;
  height: 0;
  overflow: hidden;
}
















/*nuevo para ambientes /*
/* === OP: Ambientes (scoped) === */
#planos .is-hidden{ display:none !important; }
#planos [hidden]{ display:none !important; }
#planos .chev{ transition: transform .2s ease; }
#planos .sec5__filter-group[aria-open="true"] .chev{ transform: rotate(180deg); }

/* Chips para N° AMBIENTES (no toca .sec5__chip existentes) */
#planos .chip{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:40px; height:36px; padding:0 12px; cursor:pointer;
  border:1px solid #b8d8cc; border-radius:999px;
  background:#fff; color:#174535; font-weight:700; line-height:1;
  transition:transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}
#planos .chip:hover{ transform:translateY(-1px); border-color:#3CBB8F; }
#planos .chip.is-active{ background:#174535; color:#fff; border-color:#174535; }



/* === NOSOTROS (optimizado) ===================================== */
#nosotros-full{
  --nos-img-w: 536px;
  --nos-img-h: 693px;
  --nos-gap: 48px;
  --nos-pad-x: 24px;
  background:#d6d6d6;
}

/* Layout principal: foto fija + dos columnas de texto */
#nosotros-full .sec-nos__grid{
  display:grid;
  grid-template-columns: var(--nos-img-w) minmax(0,1fr);
  min-height: var(--nos-img-h);
}

/* Foto exacta */
#nosotros-full .sec-nos__image{
  margin:0;
  width:var(--nos-img-w);
  height:var(--nos-img-h);
  overflow:hidden;
}
#nosotros-full .sec-nos__image img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* Contenido */
#nosotros-full .sec-nos__content{
  display:grid;
  grid-template-columns: 1fr 0.9fr;
  column-gap: var(--nos-gap);
  align-items:stretch;
  padding:48px clamp(var(--nos-pad-x), 4vw, 64px) 0; /* 0 abajo para fijar brandrow */
}
#nosotros-full .sec-nos__col{
  display:flex; flex-direction:column;
  padding-bottom:35px;                /* 35px del piso */
}
#nosotros-full .sec-nos__brandrow{
  margin-top:auto;                    /* ancla al fondo */
  display:flex; align-items:center; gap:18px;
  padding-top:16px;
}

/* Separador blanco y compensación de título */
#nosotros-full .sec-nos__col--natal{
  border-left:1px solid #fff;
  padding-left: clamp(24px, 3vw, 48px);
  padding-top:29px;
}

/* Texto / títulos */
#nosotros-full .sec-nos__eyebrow{
  color:#4FAF4D; font-family:"Open Sans", sans-serif; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; margin:0 0 12px;
}
#nosotros-full .sec-nos__text{
  font-family:Nexa, "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight:100; font-size:24px; line-height:1.34; letter-spacing:0; color:#1e1e1e;
  margin:0 0 16px;
}

/* Logos y botón */
#nosotros-full .sec-nos__logo{ width:auto; height:auto; object-fit:contain; }
#nosotros-full .sec-nos__logo--ieb{ width:233px; height:23px; }
#nosotros-full .sec-nos__logo--natal{ width:157px; height:49px; }
#nosotros-full .sec-nos__btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.50rem .75rem;                /* antes .7rem 1rem */
  border-radius:4px;
  background:#174535; border:1px solid #174535; color:#fff;
  font-size:.60rem;                     /* nuevo: 60% del tamaño base */
  font-weight:800; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap;
  line-height:1;                        /* compensa el tamaño menor */
}

#nosotros-full .sec-nos__btn:hover{ background:#3CBB8F; border-color:#3CBB8F; }

/* Responsive */
@media (max-width:1200px){
  #nosotros-full .sec-nos__grid{
    grid-template-columns:1fr;
    min-height:unset;
  }
  #nosotros-full .sec-nos__image{
    width:100%; height:auto; aspect-ratio:536/693; max-height:420px;
  }
  
  #nosotros-full .sec-nos__content{
    grid-template-columns:1fr;
    column-gap:0;
    padding:36px 24px 0;
  }
  #nosotros-full .sec-nos__col--natal{
    border-left:0; border-top:1px solid #fff; padding-left:0; padding-top:24px;
  }
}
/* NOSOTROS — responsive fixes */
@media (max-width: 1700px){
  #nosotros-full { --nos-img-w: 520px; --nos-gap: 44px; }
  #nosotros-full .sec-nos__text{ font-size:23px; }
}
@media (max-width: 1600px){
  #nosotros-full { --nos-img-w: 500px; --nos-gap: 40px; }
  #nosotros-full .sec-nos__text{ font-size:22px; }
}
@media (max-width: 1440px){
  #nosotros-full { --nos-img-w: 460px; --nos-gap: 36px; }
  #nosotros-full .sec-nos__text{ font-size:21px; }
}
@media (max-width: 1320px){
  #nosotros-full { --nos-img-w: 420px; --nos-gap: 28px; }
  #nosotros-full .sec-nos__text{ font-size:20px; }
  #nosotros-full .sec-nos__col--natal{ padding-top:36px; }
}
/* ya existe el corte a 1200px que colapsa a 1 columna */

/* NOSOTROS — ajustes mobile finos */
@media (max-width: 900px){
  #nosotros-full { padding-bottom: 72px; } /* evita que el back-to-top tape los CTAs */
  #nosotros-full .sec-nos__text{ font-size:18px; line-height:1.5; }
  #nosotros-full .sec-nos__brandrow{ flex-wrap:wrap; gap:14px; }
  #nosotros-full .sec-nos__btn{ padding:.8rem 1rem; font-size:.9rem; }
  #nosotros-full .sec-nos__col{ padding-bottom:24px; } /* en mobile no tan pegado */
  #nosotros-full .sec-nos__logo--ieb{ width:180px; height:auto; }
  #nosotros-full .sec-nos__logo--natal{ width:140px; height:auto; }
}

@media (max-width: 520px){
  #nosotros-full .sec-nos__brandrow{ 
    flex-direction:column; 
    align-items:flex-start; 
    gap:10px;
  }
}

/* OP — Espaciado N° AMBIENTES (sin tocar Plantas) */
#planos .sec5__filter-group[data-filter="amb"] { margin-bottom: 16px; }
#planos .sec5__filter-group[data-filter="amb"] .sec5__toggle { margin-bottom: 12px; }
#planos .sec5__filter-group[data-filter="amb"] .sec5__chips{
  display:flex;
  flex-wrap:wrap;
  gap: 10px 12px;       /* separación entre píldoras */
  padding-bottom: 6px;  /* respiro con lo de abajo */
}



/* ====== OP: filtro por ambientes integrado a PLANTAS ====== */
.sec5 .chip{
  padding:10px 14px;
  border:1px solid #b8d8cc;
  background:#fff;
  color:#174535;
  font-weight:700;
  border-radius:999px;
  cursor:pointer;
  transition:all .18s ease;
}
.sec5 .chip:hover{ transform:translateY(-1px); border-color:#3CBB8F; }
.sec5 .chip.is-active{ background:#174535; color:#fff; border-color:#174535; }

.sec5__ambfilter{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:14px 0 10px;
  border-bottom:1px solid #e8e8e8;
  margin-bottom:12px;
}

/* Chips de plantas “apagados” por filtro */
.sec5__chip.is-dim,
.sec5 .chip.is-dim{
  opacity:.35;
  pointer-events:none;
}

/* Un toque más de aire en la lista de pisos */
.sec5__floors{ margin-top:8px; }


/* ===== SEC5 — Drawer móvil (≤900px) ===== */
@media (max-width:900px){
  /* Botón lateral (oculto por defecto; aparece cuando #planos.drawer-armed) */
  #planos .sec5__drawerbtn{
    position: fixed;
    left: 8px;
    top: 50%;
    transform: translate(-2px, -50%);      /* leve fuera de pantalla */
    z-index: 1300;
    width: 38px; height: 48px;
    display: grid; place-items: center;
    border: 1px solid #3CBB8F;
    border-radius: 8px;
    background:#3CBB8F; color:#fff;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
    opacity: 0;                             /* oculto */
    pointer-events: none;                   /* desactivado */
    transition: opacity .2s ease, transform .2s ease;
     color:#fff;
     
  }
  #planos.drawer-armed .sec5__drawerbtn{
    opacity: 1;                             /* visible al “armarse” */
    pointer-events: auto;
    transform: translate(0, -50%);
  }
  #planos .sec5__drawerchev{ display:block; font-size:22px; line-height:1; transition:transform .2s ease; }
  #planos.drawer-open .sec5__drawerbtn .sec5__drawerchev{ transform: rotate(180deg); }

  /* Drawer (aside) */
  #planos .sec5__filters{
    position: fixed;
    top: var(--header-h);
    left: 0;
    height: calc(100vh - var(--header-h));
    width: min(78vw, 360px);
    max-width: 92%;
    padding: 16px;
    background:#fff;
    box-shadow: 0 20px 40px rgba(0,0,0,.22);
    overflow: auto;
    z-index: 1250;
    transform: translateX(-105%);
    transition: transform .25s ease;
  }
  #planos.drawer-open .sec5__filters{ transform:none; }

  /* Overlay */
  #planos .sec5__overlay[hidden]{ display:none; }
  #planos .sec5__overlay{
    position: fixed;
    top: var(--header-h);
    left: 0; right:0; bottom:0;
    background: rgba(0,0,0,.45);
    z-index: 1200;
  }

  /* Grid sin hueco para filters */
  .sec5__inner{
    position: relative;
    grid-template-areas:
      "header"
      "viewer"
      "specs";
  }
}

@media (min-width:901px){
  #planos .sec5__drawerbtn{ display:none; }
  #planos .sec5__overlay{ display:none !important; }
}





/* === SEC5 — hint para opciones alternativas (pulse suave) === */
.sec5__chip.is-dim{
  opacity:.35;
  filter:grayscale(.6);
}

/* chips que coinciden con el filtro, pero NO son el seleccionado */
.sec5__chip.is-hint{
  box-shadow:0 0 0 2px #3CBB8F, 0 0 0 0 rgba(60,187,143,.55);
  animation:sec5Pulse 1.8s ease-out 0s 3; /* 3 pulsos y se apaga */
  border-color:#3CBB8F;
}

@keyframes sec5Pulse{
  0%   { box-shadow:0 0 0 2px #3CBB8F, 0 0 0 0 rgba(60,187,143,.55); transform:translateY(0); }
  70%  { box-shadow:0 0 0 2px #3CBB8F, 0 0 0 10px rgba(60,187,143,0); transform:translateY(-1px); }
  100% { box-shadow:0 0 0 2px #3CBB8F, 0 0 0 0 rgba(60,187,143,0); transform:translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  .sec5__chip.is-hint{ animation:none; }
}








/* Evitar que el ring se recorte */
.sec5__chips,
.sec5__floor,
.sec5__chip{
  overflow: visible;  /* asegura que el halo pueda salir sin ser cortado */
}

/* Ring de pulso con pseudo-elemento (no se recorta) */
.sec5__chip.is-hint{
  position: relative;
  z-index: 0;
}
.sec5__chip.is-hint::after{
  content: "";
  position: absolute;
  inset: -8px;                  /* halo fuera del chip */
  border-radius: 999px;
  border: 2px solid rgba(79,175,77,.35); /* verde clarito */
  pointer-events: none;
  opacity: 0;
  transform: scale(.85);
  animation: ringHint 1.0s ease-out 20!important;   /* 10 pulsos, 0.6s c/u = 6s totales */
}

@keyframes ringHint{
  0%   { opacity: 0; transform: scale(.85); }
  35%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.25); }
}

/* Respeto a reduce motion */
@media (prefers-reduced-motion: reduce){
  .sec5__chip.is-hint::after{ animation: none; }
}

@media (max-width:900px){
  .hero__strip{ display:none !important; }
}



@media (max-width:1200px){
  #nosotros-full .sec-nos__image{
    width:100%;
    aspect-ratio: 536 / 693;   /* mantiene el marco */
    max-height:none;           /* evita compresión extra */
    background:#d6d6d6;        /* color de fondo para las “bandas” */
    overflow:hidden;
  }
  #nosotros-full .sec-nos__image img{
    width:100%;
    height:100%;
    object-fit: contain;       /* 👈 no recorta */
    object-position: center;
  }
}


/* ===== WhatsApp FAB ===== */
/* El botón */
.wa-fab{
  position:fixed;
  right:16px;
  bottom:72px;
  width:56px; height:56px;
  border-radius:999px;
  background:#25D366;          /* o tu verde */
  color:#fff;
  display:grid; place-items:center; /* centra el contenido */
  box-shadow:0 10px 24px rgba(0,0,0,.25);
  border:1px solid #1fa855;
  z-index:1400;
}

/* El SVG que pusiste como imagen */
.wa-fab img{
  width:28px; height:28px; display:block;
}

/* En móvil: subilo para no chocar con “subir” */
@media (max-width:900px){
  .wa-fab{ bottom:72px; right:16px; }
}