/*
 * inicio.css — estilos propios de la página `inicio`, secciones que no son componentes
 * compartidos con otras páginas (a diferencia de header/footer/boton-flecha).
 * Geometría exacta: _dev/registro-decisiones.md, 2026-08-14.
 */

/* --- hero-inicio: contenido superpuesto a la foto (headline, párrafo, botón, dots) ---
   El nav ya está posicionado por header.css (.gyo-nav, position:absolute top). Este bloque
   ocupa el resto del alto de `.gyo-hero-inicio`, con posiciones absolutas medidas del PDF —
   es contenido de carrusel, no fluye con el resto de la página. */

.gyo-hero-inicio__content {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  z-index: 1; /* por encima de .gyo-hero__overlay (z-index:1, pero después en el DOM) y por
    DEBAJO de .gyo-nav (z-index:2) — bug real corregido 2026-08-17: tenía el mismo z-index que
    el nav (2), y al venir después de <nav> en el DOM ganaba el desempate de pintado, tapando
    el nav completo (incluidos sus links) en toda esta caja de 100% de alto, no solo donde hay
    contenido visible. Mismo bug que en hero-interior.css, aplicado acá porque `inicio` no
    reutiliza ese componente. El botón "Ver servicios" y los dots siguen clickeables: solo
    necesitan estar por encima de .gyo-hero__bg/__overlay, no por encima del nav. */
}

.gyo-hero-inicio__content .gyo-container {
  position: relative;
  height: 100%;
}

/* Nota: `left` va con el valor absoluto medido (no `left:0` dentro de `.gyo-container`) porque
   un hijo `position:absolute` ignora el padding-inline del contenedor — se posiciona respecto
   al border-box, no al content-box. Encontrado y corregido 2026-08-14 al verificar con
   Chrome headless (el texto salía pegado al borde izquierdo real de la página). */
.gyo-hero-inicio__headline {
  position: absolute;
  top: var(--gyo-hero-inicio-headline-top-6);
  left: var(--gyo-margen-contenido-1);
  max-width: 780px; /* medido: ancho del rect de texto, 776px */
  margin: 0;
  font-size: var(--gyo-font-size-h1-inicio);
  font-weight: 600; /* SemiBold: el peso más pesado disponible en Raleway (CLAUDE.md §3).
                        El render del PDF se ve más grueso que cualquiera de los 3 pesos
                        vendorizados — posible fuente distinta solo para este headline, no
                        confirmable sin acceso a Figma. Se implementa con SemiBold, el máximo
                        disponible, y se marca PROVISIONAL para revisar en el QA visual. */
  line-height: 1.175; /* 94/80, Fase 3: reemplaza el px fijo (94px exacto a 80px) por un
    múltiplo — con `--gyo-font-size-h1-inicio` ahora en `clamp()`, un leading en px fijo dejaría
    de guardar la misma proporción al achicarse el font-size (se vería desproporcionadamente
    separado). El múltiplo reproduce el mismo 94px exacto en el ancho de referencia. */
  color: var(--color-beige);
}

.gyo-hero-inicio__parrafo {
  position: absolute;
  top: var(--gyo-hero-inicio-parrafo-top-6);
  left: var(--gyo-margen-contenido-1);
  max-width: 735px; /* medido: 730.9px */
  margin: 0;
  font-size: var(--gyo-font-size-parrafo-hero);
  font-weight: 400;
  line-height: 1.8261; /* 42/23, mismo criterio que el headline de arriba */
  color: var(--color-beige);
}

.gyo-hero-inicio__boton {
  position: absolute;
  top: var(--gyo-hero-inicio-boton-top-6);
  left: var(--gyo-margen-contenido-1);
}

.gyo-hero-inicio__dots {
  position: absolute;
  top: var(--gyo-hero-inicio-dots-top-6);
  left: 913px; /* medido directo (posición absoluta en la página, no relativa al contenedor) */
  display: flex;
  gap: 13px; /* medido: 13px entre segmentos */
}

.gyo-hero-inicio__dots span {
  width: 47px;
  height: 4px;
  background-color: #818181; /* medido: color de los segmentos inactivos */
}

.gyo-hero-inicio__dots span.activo {
  background-color: #FFFFFF; /* medido: segmento activo, único blanco puro del sitio */
}

.gyo-hero-inicio {
  height: 955px; /* alto de la imagen de fondo, y55→1010 — movido acá desde un `style` inline en
    el HTML (2026-08-18, Fase 3): un `style` inline no se puede pisar por media query sin
    `!important`; en un archivo normal, la cascada ya lo resuelve. */
}

/* Fase 3 (2026-08-18): por debajo de `lg` (992px) el contenido deja de posicionarse absoluto con
   coordenadas exactas del PDF (headline/párrafo/botón/dots cada uno en su `top`/`left` medido) y
   pasa a flujo normal, apilado — las coordenadas absolutas solo tienen sentido en el ancho donde
   se midieron (CLAUDE.md §0: el PDF no define nada por debajo del ancho de referencia). Con
   `--gyo-font-size-h1-inicio` en `clamp()` el texto además puede envolver a más líneas de las que
   el alto fijo de 955px preveía — de ahí `min-height` en vez de `height` en el hero, y el
   contenido fluyendo en vez de superponerse. */
@media (max-width: 991.98px) {
  .gyo-hero-inicio {
    height: auto;
    min-height: 480px; /* alto de trabajo — el PDF no define un alto para este ancho, decisión de
      Fase 3, no medida vinculante al píxel */
  }

  .gyo-hero-inicio__content {
    position: static;
    height: auto;
    /* despeja la barra de nav (que sigue `position:absolute`, no ocupa espacio en el flujo):
       36px de franja + 202px de alto de barra + aire propio */
    padding-top: calc(var(--gyo-header-gap-topbar-nav-6) + var(--gyo-header-height-9) + var(--gyo-space-4));
    padding-bottom: var(--gyo-space-5);
  }

  .gyo-hero-inicio__content .gyo-container {
    position: static;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: var(--gyo-space-4);
  }

  .gyo-hero-inicio__headline,
  .gyo-hero-inicio__parrafo,
  .gyo-hero-inicio__boton,
  .gyo-hero-inicio__dots {
    position: static;
    top: auto;
    left: auto;
    max-width: none;
  }
}

/* --- ultimos-proyectos ---
   Ver P29 (_dev/puntos-abiertos.md): el PDF dibuja 9 tarjetas en 3 filas, la fila 3 duplica
   exacto la fila 1 (copiar/pegar). Se implementan 6 (las dos filas distintas) como default de
   trabajo, no como resolución final — la cantidad real depende de cuántos proyectos traiga la
   consulta a la CPT en Fase 4/5. */
.gyo-seccion-ultimos-proyectos {
  background-color: var(--color-beige);
  padding-block: 117px 96px; /* top: medido (offset del eyebrow); bottom: valor de trabajo */
}

.gyo-seccion-ultimos-proyectos__header {
  display: flex;
  flex-wrap: wrap; /* Fase 3 (2026-08-18): el botón "Ver más proyectos" no puede achicarse (su
    texto no hace wrap, boton-flecha.css) — a columnas angostas (375px) no entraba junto al
    título en la misma fila. Con flex-wrap baja a su propia línea, mismo criterio ya usado en
    `.gyo-tarjeta-servicio__pie` (tarjeta-servicio.css, 2026-08-17). Sin cambio a 1923px (sigue
    en una sola fila, hay espacio de sobra). */
  gap: var(--gyo-space-4);
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 74px; /* medido: 1300(top fila 1) - 1225.9(fin título) */
}

.gyo-seccion-ultimos-proyectos__eyebrow {
  display: block;
  font-size: var(--gyo-font-size-eyebrow); /* 24→16, Fase 3 */
  color: var(--color-cafe-claro);
  margin: 0 0 8px 0;
}

.gyo-seccion-ultimos-proyectos__eyebrow::after {
  content: '';
  display: block;
  width: 48px;
  height: 1px;
  background-color: var(--color-cafe-claro);
  margin-top: 14px;
}

.gyo-seccion-ultimos-proyectos__titulo {
  font-size: var(--gyo-font-size-h2); /* 48→28, Fase 3 */
  margin: 0;
  color: var(--color-negro-texto);
}

.gyo-seccion-ultimos-proyectos__titulo span {
  color: var(--color-cafe-claro);
}

/* Convertido a `.row`/`col-lg-4` de Bootstrap (auditoría 2026-08-18, hallazgo 7 — arquitectura,
   no había overflow real: CSS Grid con `1fr` ya evitaba el problema de redondeo original, ver
   nota vieja abajo, pero seguía siendo un segundo mecanismo de columnas paralelo al del resto del
   sitio). `--bs-gutter-y` reproduce el mismo gap cuando las tarjetas apilan por debajo de `lg`
   (992px) sin necesitar una regla aparte: Bootstrap solo lo hace visible cuando el `row` realmente
   wrappea, así que a 1923px el render no cambia ni un píxel. */
.gyo-seccion-ultimos-proyectos__grid {
  --bs-gutter-x: var(--gyo-tarjeta-proyecto-gap-6);
  --bs-gutter-y: var(--gyo-tarjeta-proyecto-gap-6);
  /* El bleed por debajo de `lg` (margen del container más angosto que la mitad de este gutter) ya
     lo resuelve la regla de base `.gyo-container .row` en base.css — no se repite acá. */
}

/* --- banda-estadisticas (solo `inicio`, plan-segmentacion.md §2.8) ---
   4 stats: [número grande][divisor vertical][ícono + label de 2 líneas], distribuidos con el
   espacio sobrante entre grupos (medido: ~130–143px entre el fin de un grupo y el número
   siguiente — variación de exportación, se reparte con space-between en vez de un gap fijo). */
.gyo-banda-estadisticas {
  background-color: var(--color-negro-fondos);
  height: 280px; /* medido: rect [1,3605,1924,3885] */
  display: flex;
  align-items: center;
}

/* Convertido a `.row.justify-content-between` + `.col-auto` por `.gyo-stat` (auditoría
   2026-08-18, hallazgo 1 — desbordaba desde 1200px, un ancho real de escritorio: los 4 `.gyo-stat`
   no cedían y `justify-content:space-between` sin `flex-wrap` fijaba la fila en ~1360px sin
   importar el viewport). `.row` trae `flex-wrap:wrap` de fábrica: por debajo del mínimo de
   contenido, las estadísticas pasan a 2 filas de 2 en vez de forzar overflow. `--bs-gutter-x:0`
   porque el espaciado real lo da `space-between`, no un gutter fijo — mismo mecanismo de
   distribución que antes, solo cambia el nombre de la clase que lo implementa (diff cero a
   1923px). `--bs-gutter-y` solo se hace visible si el `row` llega a wrappear. */
.gyo-banda-estadisticas__grid {
  --bs-gutter-x: 0;
  --bs-gutter-y: var(--gyo-space-4);
}

/* Fase 3 (2026-08-18): a diferencia de las grillas `col-12 col-lg-*` (que ya apilan solas por
   debajo de `lg`), `.col-auto` no tiene breakpoint — sin esto, por debajo de 1200px el `row`
   solo pasaría a 2 columnas de 2 (el wrap "natural" que ya arregló el hallazgo 1), no a 1 sola
   columna como pide esta fase para 375/768. */
@media (max-width: 991.98px) {
  .gyo-banda-estadisticas {
    height: auto;
    padding-block: var(--gyo-space-5);
  }

  .gyo-banda-estadisticas__grid {
    flex-direction: column;
    align-items: flex-start;
  }
}

.gyo-stat {
  display: flex;
  align-items: center;
  gap: 20px; /* medido: ~17–21px entre el número y el divisor */
}

.gyo-stat__numero {
  font-size: var(--gyo-font-size-stat-numero); /* 76→40, Fase 3 */
  font-weight: 600;
  color: var(--color-beige);
  line-height: 1;
}

.gyo-stat__divisor {
  width: 1px;
  height: 112px;
  background-color: var(--color-beige);
}

.gyo-stat__icono {
  width: 27px;
  height: 27px;
  margin-bottom: 8px;
}

.gyo-stat__label {
  font-size: 23px;
  font-weight: 400;
  color: #FFFFFF; /* medido: excepción confirmada a la regla de beige — ver registro de decisiones */
  line-height: 1.2;
  margin: 0;
}

/* --- sobre-gyo-teaser (solo `inicio`, plan-segmentacion.md §1.1) ---
   Foto izquierda + eyebrow/título bicolor/párrafo/botón a la derecha. */
.gyo-sobre-gyo {
  background-color: #FFFFFF;
  padding-block: 90px;
}

/* Convertido a `.row` + `.col-lg-5` (foto) + `.col-lg` (texto, ancho flexible = el resto)
   (auditoría 2026-08-18, hallazgo 2 — desbordaba desde 992px: el `flex-shrink:0` de la foto no la
   protegía porque el reset global `img{max-width:100%}` (base.css) igual la clampeaba, y con la
   foto ya achicada la fila seguía sin entrar por el `gap` fijo + el mínimo de contenido del
   texto). El gap sigue siendo la propiedad `gap` de CSS (no `--bs-gutter-x`): el gutter de
   Bootstrap se implementa con `padding` en cada columna, y como la foto es un `<img>` usado
   directamente como columna, ese padding comprime el contenido real de la imagen en vez de crear
   espacio entre columnas (bug real, encontrado al verificar con CDP). `--bs-gutter-x:0` para que
   ninguna columna reciba ese padding. Por debajo de `lg` (992px) las columnas apilan a ancho
   completo en vez de competir por el mismo espacio angosto. */
.gyo-sobre-gyo__grid {
  --bs-gutter-x: 0;
  gap: 103px; /* medido: 961(inicio del texto) - 858(fin de la foto) */
  align-items: center;
}

.gyo-sobre-gyo__foto {
  width: 100%; /* proporcional a la columna por debajo del ancho de referencia */
  height: 509px; /* medido: 4533-4024, redondeado */
  object-fit: cover;
}

.gyo-sobre-gyo__texto {
  max-width: 866px; /* medido: ancho del párrafo, 1828-962 */
}

/* Ancho de referencia del PDF: fuerza el ancho exacto medido de la foto por encima de la columna
   aproximada de Bootstrap (mismo umbral ya auditado el 2026-08-17 para el footer). */
@media (min-width: 1830px) {
  .gyo-sobre-gyo__foto {
    width: 763px; /* medido: 858-95 */
  }
}

.gyo-sobre-gyo__eyebrow {
  display: block;
  font-size: var(--gyo-font-size-eyebrow); /* 24→16, Fase 3 */
  color: var(--color-cafe-claro);
  margin: 0 0 8px 0;
}

.gyo-sobre-gyo__eyebrow::after {
  content: '';
  display: block;
  width: 48px;
  height: 1px;
  background-color: var(--color-cafe-claro);
  margin-top: 14px;
}

.gyo-sobre-gyo__titulo {
  font-size: var(--gyo-font-size-h2); /* 48→28, Fase 3 */
  margin: 0 0 var(--gyo-space-4) 0;
  color: var(--color-negro-texto);
}

.gyo-sobre-gyo__titulo span {
  color: var(--color-cafe-claro);
}

.gyo-sobre-gyo__parrafo {
  font-size: var(--gyo-font-size-parrafo); /* 22→16, Fase 3 */
  line-height: 1.9091; /* 42/22, mismo criterio que el párrafo del hero (ver hero-inicio arriba):
    reemplaza el px fijo por un múltiplo para que el leading siga proporcional al font-size
    fluido en vez de quedar desproporcionado a viewports angostos */
  color: var(--color-negro-texto);
  margin: 0 0 var(--gyo-space-4) 0;
}

/* --- cta-cierre de `inicio`: alto propio, distinto del de las 6 páginas interiores (552px) ---
   Medido: heading empieza en y4729, botón termina en y5113, footer arranca en y5183 → banda
   completa (incluido el aire arriba/abajo) mide ~720px, no 552. */
.gyo-cta-cierre--inicio {
  height: 720px;
}

/* Fase 3 (2026-08-18): repite el override de `.gyo-cta-cierre` (cta-cierre.css) para esta
   variante — `.gyo-cta-cierre--inicio` carga después en la cascada (misma especificidad, este
   archivo va después de cta-cierre.css) y sin esto pisaría el `height:auto` a cualquier ancho,
   incluido mobile. */
@media (max-width: 991.98px) {
  .gyo-cta-cierre--inicio {
    height: auto;
    min-height: 552px;
  }
}