/**
 * SECTIONS — layout propio de cada template-part.
 * Los tokens, botones y tarjetas viven en sus propios archivos;
 * aquí solo va el "andamiaje" de composición de cada sección.
 */

/* ---- Proyecto / ficha técnica ---- */
.project-intro{
  display:grid; grid-template-columns:.85fr 1.15fr; gap:80px;
  margin-bottom:80px;
  align-items:start;
}
.project-intro__body p{ font-size:17px; line-height:1.7; color:var(--color-stone-dark); max-width:52ch; }
.project-intro__body p + p{ margin-top:18px; }
@media (max-width:820px){
  .project-intro{ grid-template-columns:1fr; gap:28px; margin-bottom:56px; }
  .project-intro__body{ margin-top:0; }
}
/* Home reutiliza este mismo componente sin una ficha técnica debajo
   (a diferencia de Casuarinas) — sin este ajuste, el margin-bottom
   pensado para separarlo de esa ficha se suma al padding del <section>
   y deja un vacío exagerado antes del footer. Scopeado a .page-home,
   no toca el spacing en Casuarinas. */
.page-home .project-intro{ margin-bottom:0; }
.project-address{
  margin-top:22px !important; color:var(--color-ink) !important;
  font-weight:600; font-size:14px !important; letter-spacing:.02em;
}

/* ---- Home: sección corporativa pendiente (ver home-content-placeholder.html) ---- */

/* ---- Home: sección corporativa pendiente (ver home-content-placeholder.html) ---- */
.section-placeholder{
  padding:96px 0;
  text-align:center;
  border-bottom:1px solid var(--color-line);
  scroll-margin-top:var(--header-h); /* Home no tiene subnav — el offset es solo el header corporativo */
}
.section-placeholder p{
  font-family:var(--font-body); font-size:12px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--color-stone);
}

/* ---- Contacto (página mínima) ---- */
.contact-min{ padding-top:calc(var(--header-h) + 140px); padding-bottom:160px; max-width:560px; margin:0 auto; }
.contact-min h1{ font-size:clamp(38px,5.4vw,64px); margin-top:14px; }
.contact-min__lede{ margin-top:18px; font-size:17px; color:var(--color-stone-dark); }
.contact-min .btn{ margin-top:32px; }

/* ---- Ubicación ---- */
.location-head{
  display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:28px;
  margin-bottom:40px;
}
.location-head h2{ font-size:clamp(38px,5.4vw,68px); }
.location-meta{ display:flex; gap:56px; flex-wrap:wrap; }
.location-meta__label{
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--color-brand); margin:0 0 8px;
}
.location-meta__value{ font-size:15.5px; line-height:1.6; margin:0; }
.location-meta__value a:hover{ color:var(--color-brand); }

.location-map{ width:100%; height:480px; margin-bottom:56px; background:var(--color-bg-alt); }
.location-map iframe{ display:block; }
@media (max-width:640px){ .location-map{ height:340px; } }

/* ---- Interiores ---- */
.interior-render{ margin:56px 0 0; } /* <figure> trae un margen UA por defecto (incl. horizontal) — se resetea explícito */
.interior-render:first-of-type{ margin-top:0; }
.interior-render__frame{
  position:relative; overflow:hidden; border-radius:var(--radius);
  width:100%; min-height:320px; aspect-ratio:16/9.3; background:var(--color-bg-alt);
}
.interior-render__frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.interior-render__cap{
  font-family:var(--font-body); font-weight:700;
  font-size:15px; letter-spacing:.01em; line-height:1.3; color:var(--color-ink);
  text-align:left; margin:0;
}
.interior-render__head{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:16px; margin-bottom:16px; /* mismo margen inferior para los 6 — con o sin controles */
}
@media (max-width:900px){
  /* En pantallas angostas, min-height:320px combinado con aspect-ratio:16/9.3
     obligaba a un frame más alto que ancho de lo previsto, provocando un
     recuadro desproporcionado y un encuadre demasiado ajustado sobre los
     renders (poco panorámicos, con mucho recorte lateral). Un aspect-ratio
     más cercano al de los renders originales (1400×901 ≈ 3/2) y un
     min-height menor devuelven un encuadre correcto sin deformar la imagen
     (sigue usando object-fit:cover) y sin exigir tanta altura en mobile. */
  .interior-render__frame, .toggle-imgwrap{ aspect-ratio:3/2; min-height:220px; }
}
@media (max-width:640px){
  .interior-render{ margin-top:40px; }
  .interior-render__head{ flex-direction:column; align-items:flex-start; gap:12px; }
}

/* Selector "Opción 1 / Opción 2": ambos botones ocupan el mismo ancho
   (flex:1) dentro del track (.toggle-btns) para leerse como un único
   control segmentado, no como dos elementos sueltos. El botón inactivo
   ahora tiene su propio borde sutil (antes quedaba sin ningún borde ni
   fondo, se confundía con texto no interactivo). Área táctil ≥44px de
   alto en los tres breakpoints — ver también @media más abajo. */
.toggle-btns{
  display:flex; gap:6px; width:100%;
  background:var(--color-bg-alt); padding:4px; border-radius:var(--radius);
}
.toggle-btns button{
  flex:1 1 0; display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:46px; background:var(--color-bg); border:1px solid var(--color-line); padding:10px 14px;
  font-size:12.5px; font-weight:600; line-height:1.35;
  letter-spacing:.02em; color:var(--color-stone-dark); border-radius:var(--radius);
  cursor:pointer; transition:background var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.toggle-btns button:hover:not([aria-pressed="true"]){
  color:var(--color-ink); background:var(--color-bg); border-color:var(--color-stone);
}
.toggle-btns button:focus-visible{ outline:2px solid var(--color-amber); outline-offset:2px; }
.toggle-btns button[aria-pressed="true"]{
  background:var(--color-brand); color:var(--color-bg); border-color:var(--color-brand);
  box-shadow:0 1px 4px rgba(175,0,71,.3);
}
.toggle-imgwrap{ position:relative; overflow:hidden; width:100%; min-height:320px; aspect-ratio:16/9.3; }
.toggle-imgwrap img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .45s ease; }
.toggle-imgwrap img.is-active{ opacity:1; }

/* ---- Planos: carrusel de tipologías A/B/C ---- */
.planos-carousel{ margin-top:8px; }

.planos-tabs{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  border-bottom:1px solid var(--color-line); margin-bottom:44px;
}
.planos-tabs__group{ display:flex; gap:14px; }
.planos-tab{
  background:none; border:none; border-bottom:3px solid transparent;
  padding:16px 26px; margin-bottom:-1px; min-width:52px;
  font-family:var(--font-display); font-weight:500; font-size:30px; color:#6b6459;
  transition:color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.planos-tab:hover{ color:var(--color-ink); }
.planos-tab.is-active{ color:var(--color-brand); border-color:var(--color-brand); }

.planos-tabs__nav{ display:flex; gap:8px; flex:0 0 auto; }
.planos-nav-btn{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--color-line);
  background:var(--color-bg); color:var(--color-ink);
  display:flex; align-items:center; justify-content:center;
  transition:border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.planos-nav-btn:hover{ border-color:var(--color-brand); color:var(--color-brand); }

.planos-panel{ display:none; }
.planos-panel.is-active{ display:block; }

/* Jerarquía de lectura: 1) plano 3D (protagonista, columna dominante)
   2) información técnica  3) huella (cierra la columna secundaria,
   sin manipular su orden — ya es la última en el DOM). */
.planos-panel__grid{ display:grid; grid-template-columns:2.3fr 1fr; gap:56px; align-items:start; }
.planos-panel__plano{
  position:relative; width:100%; aspect-ratio:1800/1158;
  display:flex; align-items:center; justify-content:center;
}
.planos-panel__plano img{ width:100%; height:100%; object-fit:contain; display:block; }

.planos-panel__info{ display:flex; flex-direction:column; padding-top:8px; }
.planos-panel__name{
  font-family:var(--font-display); font-weight:500; font-size:clamp(22px,2vw,26px);
  color:var(--color-ink); line-height:1.2; margin:0 0 12px;
}
.planos-panel__spec{ font-family:var(--font-body); font-weight:700; font-size:15px; color:var(--color-brand); margin:0 0 10px; }
.planos-panel__area{ font-family:var(--font-body); font-size:14px; color:var(--color-stone-dark); margin:0; }
.planos-panel__area strong{ color:var(--color-ink); font-weight:700; }
.planos-panel__huella{ width:96px; margin-top:36px; opacity:.9; } /* secundaria a propósito: chica, sin competir con el plano */
.planos-panel__huella img{ width:100%; height:auto; display:block; }

@media (max-width:900px){
  .planos-panel__grid{ grid-template-columns:1fr; gap:32px; }
}
@media (max-width:640px){
  .planos-tabs{ margin-bottom:32px; }
  .planos-tabs__group{ gap:8px; }
  .planos-tab{ padding:14px 20px; font-size:24px; min-width:46px; }
  .planos-panel__huella{ width:80px; margin-top:28px; }
}


/* ---- Descargas ---- */
.downloads{ padding:64px 0; border-bottom:1px solid var(--color-line); }
.downloads-inner{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px;
}
.downloads-lede{ font-size:17px; max-width:440px; margin:0; }
.downloads-actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* ---- Quiénes somos (teaser — versión corta, la completa vive en /nosotros/) ---- */
.about-teaser{ background:var(--color-bg-alt); }
.about-teaser--page{ padding-top:calc(var(--header-h) + 64px); } /* sin hero encima: compensa el header fijo */
.about-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:center; }
@media (max-width:900px){ .about-grid{ grid-template-columns:1fr; gap:32px; } }
.about-img img{ border-radius:var(--radius); }
.about-copy h1, .about-copy h2{ font-size:clamp(36px,5vw,60px); margin-top:14px; }
.about-copy p{ margin-top:18px; font-size:16px; color:var(--color-stone-dark); max-width:480px; }
.about-link{
  display:inline-flex; align-items:center; gap:8px; margin-top:22px;
  font-weight:700; font-size:14px; color:var(--color-brand); border-bottom:1px solid currentColor; padding-bottom:2px;
}
.about-link:hover{ gap:12px; }
.about-link span{ transition:transform .2s ease; }

/* ---- Equipo (Home) ---- */
.team{ padding-bottom:120px; }
.team-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }

.team-profile__image{
  position:relative; width:100%; aspect-ratio:4/5; min-height:340px; overflow:hidden;
  border-radius:var(--radius); background:var(--color-bg-alt); margin-bottom:24px;
}
.team-profile__image img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.team-profile__image--placeholder{
  display:flex; align-items:center; justify-content:center;
  border:1px dashed var(--color-stone); background:var(--color-bg);
}
.team-profile__image--placeholder svg{ width:56px; height:56px; color:var(--color-stone); opacity:.7; }

.team-profile__name{
  font-family:var(--font-display); font-weight:500; font-size:22px; color:var(--color-ink);
  margin:0 0 4px;
}
.team-profile__role{ font-family:var(--font-body); font-weight:700; font-size:13.5px; color:var(--color-brand); margin:0 0 14px; }
.team-profile__bio{ font-family:var(--font-body); font-size:15px; line-height:1.65; color:var(--color-stone-dark); margin:0; max-width:46ch; }

.team-profile__more{
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .45s ease, opacity .3s ease, margin-top .45s ease;
}
.team-profile__more.is-expanded{ max-height:640px; opacity:1; margin-top:16px; }
.team-profile__more p{ font-family:var(--font-body); font-size:15px; line-height:1.65; color:var(--color-stone-dark); margin:0 0 16px; max-width:46ch; }
.team-profile__edu{ margin:0; padding:0; list-style:none; }
.team-profile__edu li{
  font-family:var(--font-body); font-size:14px; line-height:1.6; color:var(--color-stone-dark);
  padding:10px 0; border-top:1px solid var(--color-line);
}
.team-profile__edu li:last-child{ padding-bottom:0; }

.team-profile__toggle{
  display:inline-flex; align-items:center; gap:8px; margin-top:18px;
  background:none; border:none; padding:0; padding-bottom:2px;
  font-family:var(--font-body); font-weight:700; font-size:14px; color:var(--color-brand);
  border-bottom:1px solid currentColor; transition:gap var(--dur-fast) ease, color var(--dur-fast) ease;
}
.team-profile__toggle:hover{ gap:12px; color:var(--color-brand-hover); }
.team-profile__toggle:focus-visible{ outline:2px solid var(--color-amber); outline-offset:3px; }

@media (max-width:900px){
  .team-grid{ grid-template-columns:1fr; gap:48px; }
  .team-profile__image{ max-width:420px; }
}
@media (max-width:640px){
  .team{ padding-bottom:88px; }
  .team-profile__image{ max-width:none; }
}