/* ============================================================================
   ZENITH 360 — layout.css
   Una sola retícula de 12 columnas y sus variantes. Cada sección rompe el
   grid de forma distinta usando las MISMAS columnas: así ninguna sección
   repite la composición de la anterior sin que haya que inventar un sistema
   nuevo cada vez.

   Regla: aquí va posición y estructura. Color, borde y sombra van en
   components.css. Si una regla de este archivo lleva un color, está mal puesta.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1. CONTENEDORES
   --------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--narrow { max-width: 960px; }
.shell--wide   { max-width: 1680px; }
.shell--bleed  { max-width: none; padding-inline: 0; }

/* Secciones. El ritmo vertical NO es igual en todas: cada una declara el suyo
   con los modificadores, para evitar la monotonía que prohíbe el brief. */
.section { position: relative; padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * .62); }
.section--loose { padding-block: calc(var(--section-y) * 1.28); }
.section--flush-top { padding-top: 0; }
.section--band { padding-block: var(--s-12); }   /* barra de confianza */

/* ---------------------------------------------------------------------------
   2. RETÍCULA DE 12 COLUMNAS
   --------------------------------------------------------------------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--gutter);
}

/* Colocación por columnas. En móvil todo ocupa el ancho completo; a partir
   de 768px entran las posiciones reales. */
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { grid-column: 1 / -1; }

/* OJO con la forma de escribir esto: va "auto / span N", no "span N".
   Con "span N" el navegador fija además el inicio, y entonces una clase
   .start-N posterior lo pisa dejando el bloque de UNA sola columna de ancho.
   Con "auto / span N" el ancho sobrevive y .start-N solo mueve el inicio. */
@media (min-width: 768px) {
  .col-1  { grid-column: auto / span 1; }   .col-2  { grid-column: auto / span 2; }
  .col-3  { grid-column: auto / span 3; }   .col-4  { grid-column: auto / span 4; }
  .col-5  { grid-column: auto / span 5; }   .col-6  { grid-column: auto / span 6; }
  .col-7  { grid-column: auto / span 7; }   .col-8  { grid-column: auto / span 8; }
  .col-9  { grid-column: auto / span 9; }   .col-10 { grid-column: auto / span 10; }
  .col-11 { grid-column: auto / span 11; }  .col-12 { grid-column: auto / span 12; }

  .start-1  { grid-column-start: 1; }   .start-2  { grid-column-start: 2; }
  .start-3  { grid-column-start: 3; }   .start-4  { grid-column-start: 4; }
  .start-5  { grid-column-start: 5; }   .start-6  { grid-column-start: 6; }
  .start-7  { grid-column-start: 7; }   .start-8  { grid-column-start: 8; }
  .start-9  { grid-column-start: 9; }   .start-10 { grid-column-start: 10; }
}

/* Rupturas deliberadas del grid (§12.2 del brief pide al menos 3).
   Sangrado controlado hacia un borde, sin provocar scroll horizontal. */
.bleed-right { margin-right: calc(var(--gutter) * -1); }
.bleed-left  { margin-left: calc(var(--gutter) * -1); }
@media (min-width: 1024px) {
  .bleed-right { margin-right: calc((100vw - min(100vw, var(--maxw))) / -2 - var(--gutter)); }
  .bleed-left  { margin-left:  calc((100vw - min(100vw, var(--maxw))) / -2 - var(--gutter)); }
}
.pull-up   { margin-top: calc(var(--s-24) * -1); }
.overhang  { margin-bottom: calc(var(--s-16) * -1); position: relative; z-index: 2; }

/* ---------------------------------------------------------------------------
   3. COMPOSICIONES POR SECCIÓN — ninguna repite a la anterior
   --------------------------------------------------------------------------- */

/* 01 · Hero — entrada tipo portada: titular centrado sobre el azul y, pegada
   abajo, la banda de herramientas a sangre completa.

   El brief prohibía centrar el hero (§ «NO centrado»). Esa regla apuntaba al
   cliché de foto a pantalla completa + velo + texto encima; aquí no hay foto
   detrás del texto, y el cliente pidió esta composición señalando la referencia.
   Si se quiere volver al split 7/5, está en el histórico. */
.hero { position: relative; padding-top: clamp(7rem, 16vh, 12rem); padding-bottom: 0; overflow: hidden; }
.hero__body { max-width: 1040px; margin-inline: auto; text-align: center; }
.hero__title { font-size: var(--fs-display); max-width: 15ch; margin-inline: auto; }
.hero__title .line { display: block; overflow: hidden; }
.hero .lead { max-width: 60ch; margin-inline: auto; margin-top: var(--s-8); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-8); justify-content: center; }
/* Franja de prueba: años y sectores, visible SIN scroll. Las disciplinas ya
   no van aquí en letra pequeña: son las cuatro fotos de abajo. */
.hero__proof {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--s-3) var(--s-6);
  max-width: 620px; margin: var(--s-12) auto 0;
  padding-top: var(--s-6);
  border-top: 1px solid var(--rule);
}
.hero__proof-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--paper-200); flex: none; }

/* 01b · Banda de herramientas — cuatro fotos verticales de borde a borde, una
   por disciplina. Sin .shell a propósito: el sangrado total es lo que la
   diferencia de una cuadrícula de tarjetas cualquiera. */
.toolstrip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin-top: clamp(3rem, 7vh, 5.5rem);
}
@media (min-width: 900px) { .toolstrip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.toolstrip__item { position: relative; }
.toolstrip__link { display: block; position: relative; text-decoration: none; }
.toolstrip__media { position: relative; aspect-ratio: 3 / 4; margin: 0; overflow: hidden; }
.toolstrip__media img { width: 100%; height: 100%; object-fit: cover; }
.toolstrip__label {
  position: absolute; inset: auto 0 0 0;
  /* En móvil la tarjeta mide 257 px: con 64 px de aire arriba el velo se comía
     más de la mitad de la foto. */
  padding: var(--s-8) var(--s-4) var(--s-4);
  display: grid; gap: 4px; justify-items: start;
}
.toolstrip__rule { width: 26px; height: 2px; }
.toolstrip__desc { display: none; }
@media (min-width: 560px) {
  .toolstrip__label { padding: var(--s-16) var(--s-6) var(--s-6); }
  .toolstrip__desc { display: block; }
}

/* 02 · Barra de confianza — banda a sangre completa, sin grid */
.trustbar { overflow: hidden; }
.trustbar__track { display: flex; width: max-content; align-items: center; gap: var(--s-8); }
.trustbar__item { display: flex; align-items: center; gap: var(--s-8); white-space: nowrap; }

/* 03 · Punto de partida — encabezado a la izquierda, panel desplazado a la derecha */
.start__head { grid-column: 1 / -1; }
.start__panel { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .start__head  { grid-column: 1 / span 4; position: sticky; top: 120px; align-self: start; }
  .start__panel { grid-column: 6 / span 7; }
}
.start__tabs { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-8); }
.start__symptoms { display: grid; gap: var(--s-4); }

/* 04 · Servicios — bento asimétrico: la primera tarjeta ocupa 2×2 */
.services__filters { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin-bottom: var(--s-8); }
.services__grid { display: grid; gap: var(--gutter); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services__grid { grid-template-columns: repeat(3, 1fr); } }
/* Sin tarjeta destacada: las nueve iguales, retícula 3×3.
   Se probó 2×2 y 2×1 y las dos dejaban hueco muerto — la fila la estira la
   tarjeta más alta y la destacada, al tener menos texto, no lo llenaba.
   La asimetría del sitio ya vive en el hero, en los casos y en recursos. */

/* 05 · Diagnóstico — columna central estrecha, respiración máxima */
.diagnostic__head { grid-column: 1 / -1; }
.diagnostic__stage { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .diagnostic__head  { grid-column: 2 / span 10; }
  .diagnostic__stage { grid-column: 3 / span 8; }
}
.diagnostic__result { display: grid; gap: var(--s-12); }
@media (min-width: 900px) {
  .diagnostic__result { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* 06 · Metodología — sticky narrativo: izquierda fija, derecha avanza */
.method__layout { display: grid; gap: var(--s-12); }
@media (min-width: 1024px) {
  .method__layout { grid-template-columns: 5fr 7fr; gap: var(--s-16); }
  .method__orbit { position: sticky; top: 128px; align-self: start; }
}
.method__nodes { display: grid; gap: var(--s-16); }
.method__process { margin-top: var(--s-24); }

/* 07 · Casos — tres composiciones distintas, no tres tarjetas iguales */
.case { display: grid; gap: var(--gutter); align-items: center; }
.case + .case { margin-top: var(--s-24); }
/* En móvil TODO hijo de un caso ocupa el ancho completo. Sin esta línea, los
   casos que solo declaran su posición a partir de 900px caen en una columna de
   las doce, y la imagen se queda en 8px de ancho. */
.case > * { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .case--full-bleed .case__media { grid-column: 1 / span 8; }
  .case--full-bleed .case__body  { grid-column: 9 / span 4; }
  .case--split .case__body       { grid-column: 1 / span 5; }
  .case--split .case__media      { grid-column: 7 / span 6; }
  .case--cifra-dominante .case__body  { grid-column: 4 / span 6; }
  .case--cifra-dominante .case__media { grid-column: 1 / span 3; align-self: end; }
}

/* 08 · Sobre — retrato vertical + texto, sobre fondo ancla */
.about__portrait { grid-column: 1 / -1; }
.about__body { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .about__portrait { grid-column: 1 / span 5; }
  .about__body     { grid-column: 7 / span 6; }
}
.about__credentials { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-8); }

/* 09 · Modelo de trabajo — tabla comparativa con scroll propio en móvil */
.fees__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fees__table { min-width: 720px; }

/* 10 · Recursos — tres columnas desiguales */
.resources__grid { display: grid; gap: var(--gutter); }
@media (min-width: 900px) {
  .resources__grid { grid-template-columns: 1.35fr 1fr 1fr; align-items: start; }
  .resources__grid > :nth-child(2) { margin-top: var(--s-12); }
  .resources__grid > :nth-child(3) { margin-top: var(--s-24); }
}

/* 11 · Testimonios — cita ancha con retrato desbordando */
.testimonial { position: relative; }
.testimonial__quote { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .testimonial__quote { grid-column: 3 / span 8; }
}
.testimonial__portrait { width: 96px; height: 96px; border-radius: var(--r-pill); overflow: hidden; flex: none; }
.testimonial__meta { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-8); }
.testimonial__controls { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-8); }

/* 12 · FAQ — pregunta a la izquierda, acordeón a la derecha */
.faq__head { grid-column: 1 / -1; }
.faq__list { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .faq__head { grid-column: 1 / span 4; }
  .faq__list { grid-column: 6 / span 7; }
}

/* 13 · Contacto — datos a la izquierda, formulario a la derecha */
.contact__info { grid-column: 1 / -1; }
.contact__form { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .contact__info { grid-column: 1 / span 5; }
  .contact__form { grid-column: 7 / span 6; }
}
/* Los campos se ponen en dos columnas SOLO si cada una llega a 260px.
   Sin punto de ruptura fijo: en una tableta estrecha se apilan solos en vez
   de quedarse en dos campos demasiado angostos para escribir. */
.form__row { display: grid; gap: var(--s-4); }
.form__row--2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* 14 · Footer — cuatro columnas + banda inferior */
.footer__cols { display: grid; gap: var(--s-12); }
@media (min-width: 640px)  { .footer__cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer__cols { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.footer__wordmark { overflow: hidden; margin-top: var(--s-16); line-height: .78; }
.footer__bottom { margin-top: var(--s-12); padding-top: var(--s-6); }

/* ---------------------------------------------------------------------------
   4. ELEMENTOS FIJOS
   --------------------------------------------------------------------------- */

.site-nav { position: fixed; inset-inline: 0; top: 0; z-index: var(--z-nav); }
.site-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); min-height: 76px; }
.site-nav__links { display: none; }
@media (min-width: 1024px) {
  .site-nav__links { display: flex; align-items: center; gap: var(--s-6); }
}
.site-nav__actions { display: flex; align-items: center; gap: var(--s-3); }

.reading-progress { position: fixed; inset-inline: 0; top: 0; height: 2px; z-index: calc(var(--z-nav) + 1); transform-origin: 0 50%; }

.wa-float { position: fixed; right: var(--s-6); bottom: var(--s-6); z-index: var(--z-wa); }

.menu-full { position: fixed; inset: 0; z-index: var(--z-menu); display: grid; align-content: center; }

/* Contenedor con desbordamiento horizontal propio: nunca lo hereda el body */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }