/* Estilos propios de la página de inicio */

/* Botón del banner principal: algo más separado del texto */
.pagina-inicio .banner:first-child .boton {
  margin-top: var(--espacio-7);
}

/* Botón del banner de cierre: más separado que el habitual (+20 % y luego +15 %) */
.pagina-inicio .banner[data-revelar="banner"] .boton {
  margin-top: calc(var(--espacio-5) * 1.38);
}

/* Título del banner principal más ancho que el resto del texto, para que ocupe menos líneas */
@media (min-width: 64rem) {
  .pagina-inicio .banner:first-child h1 {
    width: 46rem;
    max-width: calc(100vw - 2 * var(--relleno-lateral));
  }
}

/* ---------- Situaciones que requieren avanzar ---------- */
.lista-situaciones {
  display: grid;
  gap: var(--espacio-3);
  margin-block: var(--espacio-4);
  padding: 0;
  list-style: none;
}

.lista-situaciones li {
  position: relative;
  padding: var(--espacio-3) var(--espacio-4) var(--espacio-3) var(--espacio-6);
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
}

.lista-situaciones li::before {
  content: "";
  position: absolute;
  top: 1.35rem;
  left: var(--espacio-4);
  width: 0.5rem;
  height: 0.5rem;
  background: var(--color-primario-claro);
  border-radius: 1px;
}

.nota-destacada {
  padding: var(--espacio-4) var(--espacio-5);
  font-weight: var(--peso-medio);
  color: var(--color-primario);
  background: var(--color-primario-fondo);
  border: 1px solid var(--color-primario-tinte);
  border-radius: var(--radio-md);
}

/* ---------- Servicios ---------- */
.tarjetas-servicio {
  display: grid;
  gap: var(--espacio-5);
  margin-top: var(--espacio-6);
}

.tarjeta-servicio {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  padding: var(--espacio-5);
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  box-shadow: var(--sombra-suave);
}

/* Icono lineal en cuadrado naranja con trazo blanco (3,20:1, suficiente para gráficos), sobre el título de la tarjeta */
.tarjeta-servicio-icono {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  margin-bottom: var(--espacio-2);
  color: var(--color-sobre-secundario);
  background: var(--color-secundario);
  border-radius: var(--radio-md);
}

/* Donde el contenedor ya separa sus hijos (gap o .flujo), no se suma otro margen */
.flujo > .tarjeta-servicio-icono,
.expectativa > .tarjeta-servicio-icono {
  margin-bottom: 0;
}

.tarjeta-servicio-icono svg {
  width: 2.5rem;
  height: 2.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tarjeta-servicio-resumen {
  font-weight: var(--peso-semibold);
  color: var(--color-texto-suave);
}

/* Botones del ancho de su texto, alineados con el contenido de la tarjeta */
.tarjeta-servicio-acciones {
  display: grid;
  justify-items: start;
  gap: var(--espacio-3);
  margin-top: auto;
  padding-top: var(--espacio-4);
}

/* Tarjeta enlazada: el enlace se extiende con ::after a toda la tarjeta, así el área
   clicable es la tarjeta completa con un solo enlace en el HTML. El realce va en el
   ::after y no en la tarjeta, para no pisar la transición de entrada (movimiento.css) */
.tarjeta-enlazada {
  position: relative;
}

.tarjeta-enlazada .boton::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: var(--radio-md);
  box-shadow: 0 0 0 1px transparent;
  transition: box-shadow var(--transicion);
}

.tarjeta-enlazada .boton:hover::after {
  box-shadow: 0 0 0 1px var(--color-borde-fuerte), var(--sombra-media);
}

@media (min-width: 64rem) {
  .tarjetas-servicio {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Servicios en Inicio: interlineado un 10 % más compacto que el resto del sitio */
.seccion-servicios {
  line-height: calc(var(--interlineado-texto) * 0.9);
}

.seccion-servicios :is(h2, h3) {
  line-height: calc(var(--interlineado-titulos) * 0.9);
}

/* Títulos de sección del Inicio: mismo tamaño que el título del banner principal */
.seccion-servicios h2,
.titulo-ampliado,
.pagina-inicio .banner h2 {
  font-size: calc(var(--titulo-banner) * var(--escala-titulos));
}

/* Antetítulo ("01 / …") al lado del icono; el resto de la tarjeta ocupa el ancho completo */
.seccion-servicios .tarjeta-servicio {
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: start;
  column-gap: var(--espacio-3);
}

.seccion-servicios .tarjeta-servicio > :not(.tarjeta-servicio-icono, .antetitulo) {
  grid-column: 1 / -1;
}

.seccion-servicios .tarjeta-servicio-icono {
  margin-bottom: 0;
}

.seccion-servicios .tarjeta-servicio .antetitulo {
  align-self: center;
}

@media (min-width: 64rem) {
  /* En escritorio la sección completa debe caber en una pantalla de portátil */
  .seccion-servicios {
    padding-block: var(--espacio-6);
  }

  .seccion-servicios .seccion-intro {
    margin-bottom: var(--espacio-5);
  }

  /* Las tres tarjetas comparten filas (subgrid): el título más largo fija la altura
     de todos, y descripciones y botones quedan alineados entre tarjetas */
  .seccion-servicios .tarjetas-servicio {
    grid-template-rows: repeat(4, auto);
  }

  .seccion-servicios .tarjeta-servicio {
    grid-row: span 4;
    grid-template-rows: subgrid;
    gap: var(--espacio-2);
    padding: var(--espacio-4) var(--espacio-5);
  }

  .seccion-servicios .tarjeta-servicio h3 {
    align-self: start;
  }

  .seccion-servicios .tarjeta-servicio-icono {
    width: 3rem;
    height: 3rem;
  }

  .seccion-servicios .tarjeta-servicio-icono svg {
    width: 2rem;
    height: 2rem;
  }
}

/* ---------- Qué puede esperar ---------- */
.expectativas {
  display: grid;
  gap: var(--espacio-5);
  margin-top: var(--espacio-6);
}

.expectativa {
  padding: var(--espacio-5);
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
}

.expectativa h3 {
  margin-bottom: var(--espacio-2);
  font-size: calc(var(--texto-lg) * var(--escala-titulos));
}

@media (min-width: 40rem) {
  .expectativas {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .expectativas {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------- Secuencia de trabajo ---------- */
.pasos {
  display: grid;
  gap: var(--espacio-3);
  margin: var(--espacio-6) 0 var(--espacio-5);
  padding: 0;
  list-style: none;
  counter-reset: paso;
}

.paso {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  padding: var(--espacio-3) var(--espacio-4);
  font-family: var(--fuente-titulos);
  font-size: var(--texto-xl);
  font-weight: var(--peso-negrita);
  color: var(--color-primario);
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  counter-increment: paso;
}

.paso::before {
  content: counter(paso);
  display: grid;
  flex: none;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  font-size: var(--texto-base);
  color: var(--color-sobre-primario);
  background: var(--color-primario);
  border-radius: 50%;
}

@media (min-width: 48rem) {
  .pasos {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--espacio-5);
  }

  .paso {
    flex-direction: column;
    justify-content: center;
    padding-block: var(--espacio-5);
    text-align: center;
  }

  /* Flecha entre pasos, dibujada con bordes */
  .paso:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(100% + var(--espacio-5) / 2 - 0.375rem);
    width: 0.75rem;
    height: 0.75rem;
    border-top: 3px solid var(--color-primario-claro);
    border-right: 3px solid var(--color-primario-claro);
    transform: translateY(-50%) rotate(45deg);
  }
}

/* ---------- Conocimiento ---------- */
.seccion-accion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-5);
}

.seccion-accion > div {
  flex: 1 1 24rem;
}

/* ---------- KAIROVA (bloque oscuro) ---------- */
.kairova-principio {
  margin-top: var(--espacio-5);
  font-family: var(--fuente-titulos);
  font-size: var(--titulo-3);
  font-weight: var(--peso-negrita);
  color: var(--color-sobre-primario);
}

/* ---------- Color con función (solo Inicio, mediante clases modificadoras) ----------
   El azul marino guía; el naranja sigue reservado a la acción principal y a la página actual.
   Regla de esta página: azul marino sólido = "cerrado y respaldado". */

/* Banda de la secuencia: un azul más profundo que --color-fondo-suave para dar campo a los pasos */
.seccion-tinte {
  background: var(--color-primario-fondo);
}

/* Último paso ("Cerrar"): la secuencia termina en marino sólido */
.pasos-cierre .paso:last-child {
  color: var(--color-sobre-primario);
  background: var(--color-primario);
  border-color: var(--color-primario);
}

.pasos-cierre .paso:last-child::before {
  color: var(--color-primario);
  background: var(--color-blanco);
}

/* Última expectativa ("Cierre respaldado"): mismo lenguaje, texto secundario derivado del fondo */
.expectativas-cierre .expectativa:last-child {
  color: var(--color-sobre-primario-suave);
  background: var(--color-primario);
  border-color: var(--color-primario);
}

.expectativas-cierre .expectativa:last-child h3 {
  color: var(--color-sobre-primario);
}

/* Credencial (Certus Authorized Partner): resaltada como marca de texto, no como texto de color */
.credencial {
  padding: 0.1em 0.4em;
  color: var(--color-primario);
  background: var(--color-primario-fondo);
  border-radius: var(--radio-sm);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Etapas detalladas (Cómo trabajamos): la última cierra en marino sólido, como el último paso */
.etapas-cierre .etapa:last-child {
  color: var(--color-sobre-primario-suave);
  background: var(--color-primario);
  border-color: var(--color-primario);
}

.etapas-cierre .etapa:last-child h3 {
  color: var(--color-sobre-primario);
}

.etapas-cierre .etapa:last-child::before {
  color: var(--color-primario);
  background: var(--color-blanco);
}

/* Tarjeta de cierre con acciones (Conocimiento): marino sólido, el botón naranja resalta sobre él */
.tarjeta-cierre {
  color: var(--color-sobre-primario-suave);
  background: var(--color-primario);
  border-color: var(--color-primario);
}

.tarjeta-cierre h3 {
  color: var(--color-sobre-primario);
}

.tarjeta-cierre :focus-visible {
  outline-color: var(--color-foco-inverso);
}

/* ---------- Acentos naranjos (solo Inicio, mediante .pagina-inicio en el body) ---------- */

/* Título de Guías: sin balanceo, para que la primera línea llegue hasta el borde de la tercera tarjeta */
#guias .titulo-ampliado {
  text-wrap: wrap;
}

/* Viñetas: marcas decorativas, el naranja puro basta */
.pagina-inicio .lista-situaciones li::before {
  background: var(--color-secundario);
}

/* "Cierre respaldado": el texto blanco no alcanza 4,5:1 sobre el naranja, se usa tinta */
.pagina-inicio .expectativas-cierre .expectativa:last-child {
  color: var(--color-tinta);
  background: var(--color-secundario);
  border-color: var(--color-secundario);
}

.pagina-inicio .expectativas-cierre .expectativa:last-child h3 {
  color: var(--color-tinta);
}

/* Cómo trabajamos: banda naranja clara, para que el botón naranja siga destacando */
.pagina-inicio .seccion-tinte {
  background: var(--color-secundario-fondo);
}

/* Bloque KAIROVA: naranja profundo, el texto blanco mantiene 5,66:1 */
.pagina-inicio .seccion-oscura {
  color: var(--color-sobre-primario);
  background: var(--color-secundario-texto);
}

/* Título de un grupo de servicios dentro de una sección (Inicio, Servicios) */
.titulo-grupo {
  font-size: calc(var(--titulo-3) * var(--escala-titulos));
}