/* ==========================================================================
   HOME.CSS
   Estilos específicos de la página de inicio (index.html)
   Requiere base.css, components.css y layout.css cargados antes.
   ==========================================================================
   Índice:
     1. Utilidades de sección compartidas (heading, eyebrow, cta-band, reveal)
     2. Hero
     3. Grid de servicios
     4. Quiénes somos (resumen)
     5. Presencia geográfica
     6. Bloque "¿Quieres saber más?"
     7. Grid de industrias/sectores
     8. Servicio destacado (SARLAFT/SAGRILAFT)
     9. Diferenciadores
     10. CTA final
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. UTILIDADES COMPARTIDAS ENTRE SECCIONES
   -------------------------------------------------------------------------- */

.section {
  padding-block: var(--space-section-y);
}

.section--alt {
  background-color: var(--color-bg-alt);
}

/* Ritmo entre secciones: no todas las secciones pesan lo mismo, y darles a
   todas el mismo padding-block genera el mismo bloque de espacio vacío
   antes/después de una banda CTA de una línea que antes/después de un grid
   de 6 tarjetas. .section--tight usa --space-block-y (la mitad aprox. de
   --space-section-y) para las secciones de contenido liviano: bandas CTA,
   el bloque de media/brochure y los callouts de normativa. */
.section--tight {
  padding-block: var(--space-block-y);
}

.section__header {
  max-width: 640px;
  margin-bottom: var(--space-10);
}

.section__header--center {
  margin-inline: auto;
  text-align: center;
}

.section__title {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-4);
}

.section__lead {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

/* Banda de fondo sólido reutilizada en el CTA intermedio y el CTA final */
.cta-band {
  background-color: var(--color-primary-900);
  color: var(--color-text-inverse);
  border-radius: var(--radius-xl);
  padding: var(--space-12) var(--space-6);
  text-align: center;
}

/* El eyebrow por defecto (verde oscuro) no tiene contraste suficiente sobre
   fondos oscuros: en bloques invertidos usamos el verde claro del acento. */
.cta-band .eyebrow,
.featured-service .eyebrow {
  color: var(--color-accent-light);
}

.cta-band__title {
  color: var(--color-text-inverse);
  font-size: var(--text-3xl);
  margin-bottom: var(--space-4);
}

.cta-band__lead {
  color: var(--color-text-inverse-muted);
  font-size: var(--text-lg);
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--space-8);
}

/* .eyebrow y .reveal/.reveal-group ahora viven en components.css (uso
   sitewide, no solo home) — ver ese archivo. */


/* --------------------------------------------------------------------------
   2. HERO
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: 160px var(--space-section-y);
}

/* El header vive fijo y transparente sobre el hero hasta que el usuario hace
   scroll (ver .site-header en css/layout.css). A diferencia de las páginas
   internas, este hero NO tiene una foto de fondo oscura propia: sin este
   respaldo navy, el logo y el menú en blanco quedan invisibles sobre el
   fondo claro de la home en los primeros ~120px. Se desvanece antes de que
   empiece el contenido (padding-top: 160px) para no tapar el texto. */
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 130px;
  background: linear-gradient(180deg, var(--color-primary-900) 0%, var(--color-primary-900) 55%, transparent 100%);
  z-index: 0;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-10);
  align-items: center;
}

@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-16);
  }
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  margin-bottom: var(--space-5);
}

.hero__lead {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  max-width: 52ch;
  margin-bottom: var(--space-8);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-10);
}

.hero__credentials {
  display: flex;
  flex-wrap: wrap;
  max-width: 560px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero__credentials li {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-snug);
  padding-inline: var(--space-4);
  border-left: 1px solid var(--color-border);
}

.hero__credentials li:first-child {
  padding-left: 0;
  border-left: none;
}

.hero__visual img {
  width: 100%;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}


/* --------------------------------------------------------------------------
   3. GRID DE SERVICIOS
   -------------------------------------------------------------------------- */

/* Séptima tarjeta de servicios (Reportes SOC): con 7 tarjetas en un grid de
   3 columnas, la última fila quedaría con 2 casillas vacías. En vez de
   forzar un 8vo elemento de relleno, esta tarjeta ocupa el ancho completo
   de la fila final y pasa a layout horizontal desde tablet — se lee como
   un cierre deliberado del grid, no como un hueco sin llenar. */
@media (min-width: 768px) {
  .service-card--wide {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: var(--space-6);
  }

  .service-card--wide .card__icon {
    flex-shrink: 0;
  }

  .service-card--wide .service-card__text {
    flex: 1;
  }

  .service-card--wide .card__footer {
    margin-top: 0;
    flex-shrink: 0;
  }
}

.service-card .service-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  text-decoration: none;
}

.service-card .service-card__link svg {
  width: 1em;
  height: 1em;
  transition: transform var(--transition-fast);
}

.service-card .service-card__link:hover svg {
  transform: translateX(3px);
}


/* --------------------------------------------------------------------------
   4. QUIÉNES SOMOS (resumen)
   -------------------------------------------------------------------------- */

.about-summary__inner {
  display: grid;
  gap: var(--space-10);
  /* stretch, no center: con center, la tarjeta de la cita (mucho más corta
     que la columna de texto) quedaba centrada verticalmente con grandes
     huecos vacíos arriba y abajo — ver .quote-feature abajo, que ahora
     ocupa el alto completo de la fila. */
  align-items: stretch;
}

@media (min-width: 1024px) {
  .about-summary__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
  }
}

/* Cita destacada — reemplaza el .card--inverse genérico: antes era una
   tarjeta pequeña sin firma, centrada en una columna mucho más alta que
   ella, lo que dejaba mucho espacio vacío alrededor. Ahora ocupa el alto
   completo de la fila, con tipografía más grande y una firma. */
.quote-feature {
  background-color: var(--color-primary-800);
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-6);
}

.quote-feature__mark {
  width: 38px;
  height: 30px;
  color: rgba(255, 255, 255, 0.32);
}

.quote-feature__text {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-style: italic;
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  color: var(--color-text-inverse);
}

.quote-feature__attribution {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-inverse-muted);
}

.about-summary__title {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-4);
}

.about-summary__body {
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
}

.about-summary__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.about-summary__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.about-summary__list svg {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-accent-dark);
  margin-top: 0.15em;
}


/* --------------------------------------------------------------------------
   5. PRESENCIA GEOGRÁFICA
   -------------------------------------------------------------------------- */

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

@media (min-width: 768px) {
  .presence-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.presence-card {
  text-align: center;
  align-items: center;
}

.presence-card__flag {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-2);
}

.presence-card--soon {
  border-style: dashed;
}

.presence-card--soon .card__title {
  color: var(--color-text-muted);
}


/* --------------------------------------------------------------------------
   6. BLOQUE "¿QUIERES SABER MÁS?"
   (usa .cta-band, definido en la sección 1 de utilidades)
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   7. GRID DE INDUSTRIAS / SECTORES
   -------------------------------------------------------------------------- */

.industries-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 640px) {
  .industries-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .industries-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* 14 tarjetas en un grid de 4 columnas deja la última fila con 2 casillas
     vacías (14 = 3 filas de 4 + 2). Las últimas 2 tarjetas ocupan doble
     ancho para cerrar la fila sin dejar hueco. */
  .industry-card--wide {
    grid-column: span 2;
  }
}

/* Tarjetas fotográficas: imagen de fondo + etiqueta en overlay, calcado del
   tratamiento de .mosaic__item pero en formato de grid compacto */
.industry-card {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
}

.industry-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}

.industry-card:hover img {
  transform: scale(1.06);
}

.industry-card::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Degradado concentrado en el ~55% inferior, donde vive .industry-card__name;
     el resto de la tarjeta queda sin velar, foto a opacity:1 (ver img arriba). */
  background: linear-gradient(180deg, transparent 45%, rgba(28, 23, 18, 0.85) 100%);
}

.industry-card__name {
  position: absolute;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-3);
  z-index: 1;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: #fff;
}


/* --------------------------------------------------------------------------
   8. SERVICIO DESTACADO — SARLAFT / SAGRILAFT
   -------------------------------------------------------------------------- */

.featured-service {
  background-color: var(--color-primary-900);
  color: var(--color-text-inverse-muted);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.featured-service__inner {
  display: grid;
  gap: var(--space-8);
  padding: var(--space-10);
}

@media (min-width: 1024px) {
  .featured-service__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    padding: var(--space-16);
  }
}

.featured-service__title {
  color: var(--color-text-inverse);
  font-size: var(--text-3xl);
  margin-bottom: var(--space-4);
}

.featured-service__body {
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
}

.featured-service__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

@media (min-width: 1024px) {
  .featured-service__list {
    margin-bottom: 0;
  }
}

.featured-service__list li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding-block: var(--space-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.featured-service__list li:last-child {
  border-bottom: none;
}

.featured-service__list strong {
  display: block;
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-1);
}

.featured-service__list svg {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-accent-light);
}


/* --------------------------------------------------------------------------
   8B. PREGUNTAS FRECUENTES (FAQ)
   Acordeón nativo <details>/<summary> — accesible por teclado, sin JS,
   mismo tratamiento de línea fina que .differentiators-list en vez de
   otro grid de tarjetas.
   -------------------------------------------------------------------------- */

.faq-list {
  max-width: 760px;
  margin-inline: auto;
  border-top: 1px solid var(--color-border);
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-5);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink);
  cursor: pointer;
  list-style: none;
}

.faq-item__question::-webkit-details-marker {
  display: none;
}

.faq-item__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--color-text-muted);
  transition: transform var(--transition-base);
}

.faq-item[open] .faq-item__icon {
  transform: rotate(45deg);
}

.faq-item__answer {
  padding-bottom: var(--space-5);
  max-width: 65ch;
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

/* --------------------------------------------------------------------------
   8C. PERSPECTIVAS (insights técnicos)
   Tarjetas de contenido editorial — categoría + título + extracto + enlace
   a la línea de servicio relacionada. Deliberadamente distintas del
   .service-card (sin ícono, con etiqueta de categoría) para no sumar un
   cuarto grid idéntico de icono+título+texto.
   -------------------------------------------------------------------------- */

.insight-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.insight-card__category {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent-900);
}

.insight-card__title {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink);
  line-height: 1.35;
}

.insight-card__body {
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  flex: 1;
}

/* --------------------------------------------------------------------------
   9. DIFERENCIADORES
   -------------------------------------------------------------------------- */

/* Lista tipo "ledger" — deliberadamente distinta del grid de tarjetas
   de Servicios/Presencia: divisores de línea fina en vez de tarjetas
   repetidas, para que la última sección antes del CTA final no sea un
   cuarto grid idéntico. Ver DESIGN.md — "The Institutional Ledger". */
.differentiators-list {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  max-width: 920px;
  margin-inline: auto;
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--color-border);
}

@media (min-width: 768px) {
  .differentiators-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.differentiators-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

@media (min-width: 768px) {
  .differentiators-list__item:nth-child(odd) {
    padding-right: var(--space-8);
    border-right: 1px solid var(--color-border);
  }

  .differentiators-list__item:nth-child(even) {
    padding-left: var(--space-8);
  }
}

.differentiators-list__check {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-primary-700);
  color: var(--color-primary-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}

.differentiators-list__title {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink);
  margin-bottom: var(--space-2);
}

.differentiators-list__body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}


/* --------------------------------------------------------------------------
   10. CTA FINAL
   Reutiliza .cta-band tal cual (navy-900). La variante .cta-band--accent
   (fondo accent-dark) se retiró: con texto claro encima no supera ~3:1 de
   contraste (por debajo de WCAG AA) y el botón --primary quedaba casi
   invisible sobre su propio fondo. Ver DESIGN.md — The Text Contrast Rule.
   -------------------------------------------------------------------------- */