/* ==========================================================================
   Home B2B (Fase 1, brief 1.1)

   Antes esto era un <style> de 100 lineas al final de app/views/home.php. Se
   movio aqui porque ese bloque declaraba reglas globales (section, .display-6)
   desde una vista, y porque el layout ya tiene un enganche para CSS propio de
   pagina: el controlador pasa 'pageStyles' => ['css/pages/home.css'] y se
   carga bloqueante en el <head> (maqueta la primera pantalla; diferirlo
   provocaria saltos de maquetacion).

   Todo va bajo body.home-page o con clases .home-*: main.css y
   mobile-improvements.css traen reglas propias para .home-hero, y este fichero
   necesita ganarlas sin recurrir a !important.
   ========================================================================== */

/* ---------- Hero -------------------------------------------------------- */

/* Altura por contenido en movil (el hero lleva titular, credenciales y las dos
   puertas: fijar 60vh dejaba las puertas fuera de pantalla o un hueco enorme
   en pantallas altas). En escritorio se limita con min() para que no crezca
   sin fin en monitores verticales. */
body.home-page .home-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 0;
  padding: 2.25rem 0 2.5rem;
  overflow: hidden;
  color: #fff;
}

@media (min-width: 992px) {
  body.home-page .home-hero {
    min-height: min(82vh, 700px);
    padding: 3.5rem 0;
  }
}

/* ImageHelper::picture() envuelve la imagen en un <picture> (AVIF + WebP).
   Ese elemento es "inline" por defecto y, como hijo del flex del heroe, se
   convierte en un item de tamano cero que no molesta; pero con display:
   contents desaparece del arbol de cajas y el <img> absoluto queda como hijo
   directo del heroe a todos los efectos, igual que antes de la Fase 3
   (product-lite.css hace lo mismo en las fichas de excursion y espectaculo). */
body.home-page .home-hero > picture {
  display: contents;
}

.home-hero__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

body.home-page .home-hero .hero-overlay {
  z-index: 1;
  opacity: .78;
}

/* Segunda capa, siempre presente: el degradado del panel es configurable y no
   garantiza contraste. Esta oscurece de arriba abajo para que el texto blanco
   cumpla AA aunque manana alguien elija dos colores claros. */
.home-hero__scrim {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: linear-gradient(180deg, rgba(4, 14, 26, .35) 0%, rgba(4, 14, 26, .55) 100%);
  pointer-events: none;
}

.home-hero__inner {
  position: relative;
  z-index: 2;
  text-align: center;
}

/* El selector lleva body.home-page y .home-hero a proposito: main.css tiene una
   regla `.container > h1` que pinta los titulares en naranja de marca y fija
   2,25rem. Sobre la imagen del hero ese naranja da 2,6:1 con el fondo oscuro
   (AA pide 4,5:1) y el tamano fijo se comia el clamp. */
body.home-page .home-hero .home-hero__title {
  color: #fff;
  font-size: clamp(1.85rem, 3.4vw + .75rem, 3rem);
  /* 700 y no 800: Poppins solo se sirve en 400, 600 y 700, asi que 800 caia
     igualmente en la cara de 700. Pedir el peso que existe deja claro que
     fichero precargar (layouts/main.php precarga poppins-700-latin, que es
     el del titular, el elemento LCP de esta pagina junto con la foto). */
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.01em;
  margin: 0 auto .75rem;
  max-width: 24ch;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}

.home-hero__lead {
  color: rgba(255, 255, 255, .96);
  font-size: clamp(1rem, .5vw + .9rem, 1.2rem);
  line-height: 1.55;
  margin: 0 auto 1.35rem;
  max-width: 48rem;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}

/* Los ajustes de movil del hero NO van aqui: estaban en este punto del fichero
   y no hacian nada. Una media query no suma especificidad, asi que
   `.home-door { padding }` declarado aqui lo pisaba el `.home-door { padding }`
   de la seccion de puertas, doscientas lineas mas abajo, por simple orden de
   aparicion. Todo el bloque de movil esta ahora al final de la seccion de las
   puertas, despues de las reglas que sobreescribe. */

/* ---------- Franja de credenciales -------------------------------------- */

.home-creds {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  list-style: none;
  margin: 0 auto 1.5rem;
  padding: 0;
  max-width: 62rem;
}

.home-creds__item {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .85rem;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  background: rgba(6, 18, 32, .6);
  color: #fff;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
}

.home-creds__item i {
  color: var(--accent-color, #FFD23F);
  font-size: .95rem;
  flex-shrink: 0;
}

.home-creds__item a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- Las dos puertas --------------------------------------------- */

.home-doors {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  max-width: 62rem;
  margin: 0 auto;
  text-align: left;
}

@media (min-width: 768px) {
  .home-doors {
    grid-template-columns: 1fr 1fr;
  }
}

.home-door {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 14px;
  padding: 1.25rem 1.25rem 1.15rem;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
  color: var(--text-dark, #2C3E50);
}

.home-door__title {
  display: flex;
  /* El icono se alinea con la PRIMERA linea: centrado, en un titulo que se
     parte en dos lineas en moviles estrechos, quedaba a media altura. */
  align-items: flex-start;
  gap: .55rem;
  margin: 0 0 .4rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-dark, #2C3E50);
}

.home-door__title i { margin-top: .18rem; flex-shrink: 0; }
.home-door--agency .home-door__title i { color: var(--primary-color, #004E89); }
.home-door--private .home-door__title i { color: var(--secondary-color, #004E89); }

.home-door__text {
  flex-grow: 1;
  margin: 0 0 1rem;
  color: #4A5561;
  font-size: .95rem;
  line-height: 1.55;
}

/* En columna, no en fila: con el enlace secundario al lado del boton, las dos
   puertas quedaban con los botones a distinta altura segun lo que ocupara su
   texto, y en movil el enlace largo se partia debajo del boton igual. */
.home-door__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .7rem;
}

.home-door__cta {
  padding: .6rem 1.4rem;
}

/* Las dos puertas se distinguian por el color del boton: naranja la de agencia
   y azul la del viajero. Desde que el color de accion es el azul del logotipo
   (2026-09-21) los dos botones serian identicos, asi que la diferencia pasa a
   ser de jerarquia y no de tono: la agencia va en solido, que es el comprador
   que persigue la fase 1, y el viajero en contorno. El contorno mantiene el
   contraste del texto azul sobre blanco (8,59:1) y un borde de 2 px. */
.home-door--private .home-door__cta {
  background: transparent;
  border: 2px solid var(--secondary-color, #004E89);
  color: var(--secondary-color, #004E89);
}
.home-door--private .home-door__cta:hover,
.home-door--private .home-door__cta:focus-visible {
  background: var(--secondary-color, #004E89);
  color: #fff;
}

.home-door__link {
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
}

.home-door--agency .home-door__link { color: var(--primary-color, #004E89); }
.home-door--private .home-door__link { color: var(--secondary-color, #004E89); }
/* :focus-visible ademas de :hover: el teclado tiene que recibir la misma senal
   que el raton. El anillo de foco global de main.css ya se ve, pero el anillo
   dice "estas aqui" y el subrayado dice "esto es un enlace"; son dos cosas
   distintas y hacen falta las dos. */
.home-door__link:hover,
.home-door__link:focus-visible { text-decoration: underline; }

/* ---------- Botones de las dos puertas a la misma altura -----------------
   A partir de 768 px las dos puertas van lado a lado y sus botones quedaban a
   64 px de altura distinta (76 a 768 px exactos, medido). No era un fallo de
   alineacion vertical: la tarjeta de agencia tiene CUATRO hijos (titulo,
   texto, acciones y la coletilla de la videollamada) y la del viajero TRES,
   asi que el flex-grow:1 del texto termina de rellenar en un punto distinto
   en cada tarjeta. Dos columnas en flujo propio no tienen forma de ponerse de
   acuerdo sobre donde empieza la tercera pieza.
   Con subgrid las dos tarjetas comparten las mismas cuatro filas de la
   rejilla madre: titulo con titulo, texto con texto, botones con botones. La
   cuarta fila solo la ocupa la puerta de agencia, que es la unica que la usa.

   Tres detalles que no son opcionales:
   - Va dentro de @supports. En un navegador sin subgrid el display:grid
     entraria sin filas compartidas, el flex-grow del texto dejaria de
     funcionar y los botones subirian pegados al titulo: peor que el desfase
     de hoy. Con @supports, ese navegador se queda exactamente con lo de hoy.
   - Va DESPUES de `.home-door { display:flex }`. Una media query no suma
     especificidad: escrito junto al grid-template-columns de arriba, el
     display:flex de la linea 176 lo pisaba por orden de aparicion. Es el
     mismo motivo por el que el bloque de movil esta al final de la hoja.
   - row-gap:0 porque en este tramo la rejilla madre solo tiene UNA fila de
     tarjetas (el hueco entre ellas es el de columna) y la subrejilla hereda
     por defecto los huecos de la madre: sin esto, cada tarjeta se abriria
     1 rem entre titulo, texto y botones, que ya los separan sus margenes. */

@media (min-width: 768px) {
  @supports (grid-template-rows: subgrid) {
    .home-doors {
      grid-template-rows: repeat(4, auto);
      row-gap: 0;
      column-gap: 1rem;
    }

    .home-door {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 4;
    }
  }
}

/* ---------- Primera pantalla en movil ------------------------------------
   Este bloque va al FINAL de las secciones de hero, credenciales y puertas a
   proposito: una media query no suma especificidad y estas mismas reglas,
   escritas mas arriba, las pisaba el orden de aparicion. Si manana se anade
   una regla a .home-door o a .home-creds, tiene que ir por encima de aqui.

   El presupuesto de un movil corriente (390x844, con 46 px de barra de
   navegacion) no da para improvisar: las dos tarjetas de puerta ocupan por si
   solas unos 480 px, asi que titular, entradilla, credenciales y los aires
   entre bloques tienen que caber en poco mas de 300 px. Antes no cabian: la
   segunda puerta empezaba 16 px por debajo del borde inferior y su boton
   quedaba a 171 px de distancia, de modo que en la primera visita el
   comprador no veia que hubiese dos caminos. Cada recorte de abajo esta
   medido contra esa cuenta, no es un ajuste estetico.

   La franja de credenciales deja de ser pildoras: cada pildora es una caja
   indivisible y a 390 px no hay dos que quepan en la misma fila (la mas corta
   media 191 px y la mas larga 306, con 357 de ancho util), asi que las seis
   caian una por fila y costaban 269 px. Como texto corrido el navegador
   reparte por lineas completas en vez de por cajas y las mismas seis
   credenciales, sin recortar ninguna ni encoger mas la letra (ya esta en
   .8rem), ocupan unos 80 px. Los iconos se ocultan aqui porque en flujo en
   linea se separan de su texto al final de una fila; son decorativos
   (aria-hidden) y no se pierde informacion. El separador va en ::after para
   que el marcado siga siendo una lista.

   El corte es 767,98 px, el mismo al que las puertas dejan de ir en dos
   columnas: por encima caben una al lado de otra y el problema no existe; por
   debajo van apiladas y la franja es lo que decide si la segunda entra en
   pantalla. Los tamanos de letra del titular y de la entradilla solo se tocan
   en el tramo de movil (575,98 px), mas abajo.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .home-creds {
    display: block;
    gap: 0;
    margin-bottom: .85rem;
    font-size: .8rem;
    line-height: 1.55;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
  }

  .home-creds__item {
    display: inline;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: inherit;
    font-weight: 500;
    line-height: inherit;
    text-align: inherit;
  }

  .home-creds__item i { display: none; }

  .home-creds__item::after {
    content: '\00B7';
    margin: 0 .3rem 0 .45rem;
    color: rgba(255, 255, 255, .6);
  }

  .home-creds__item:last-child::after { content: none; }

  .home-doors { gap: .75rem; }
  .home-door { padding: 1rem 1rem .95rem; }
  .home-door__text { margin-bottom: .7rem; line-height: 1.45; }
  .home-door__actions { gap: .5rem; }
  .home-door__cta { padding: .5rem 1.15rem; }
}

/* Tramo de movil: aqui el ancho ya no da para nada y el titular es lo unico
   que queda por recortar. A 1,85rem el H1 se partia en tres lineas (104 px) y
   a 1,55rem entra en dos (59 px) a 390 px de ancho, que son los 45 px que
   faltaban para que la segunda puerta entrase entera. Sigue siendo, con
   diferencia, el elemento mas grande de la pantalla. */
@media (max-width: 575.98px) {
  body.home-page .home-hero { padding: 1.4rem 0 1.75rem; }

  body.home-page .home-hero .home-hero__title {
    font-size: 1.55rem;
    line-height: 1.16;
    margin-bottom: .55rem;
  }

  .home-hero__lead {
    font-size: .95rem;
    margin-bottom: .85rem;
  }
}

/* ---------- Primera visita: sitio reservado al aviso de cookies -----------
   Solo mientras el aviso esta en pantalla. La clase .has-cookie-banner la pone
   <html> en partials/cookie-consent.php, antes del primer pintado, y se retira
   en cuanto el visitante acepta o rechaza; a partir de ese momento la home
   vuelve pixel a pixel a la maquetacion de arriba, que es la que esta
   verificada.

   El motivo: el aviso mide ~108 px en movil y esta fijo abajo, asi que la
   primera pantalla util pasa de 844 a 736 px. La cuenta de arriba deja las dos
   puertas terminando en 814 px, de modo que en la primera visita la segunda
   puerta —"Viajo por mi cuenta", con "Ver circuitos" en 715-763 y "Pedir
   cotizacion como viajero" en 771-799— quedaba DEBAJO del aviso y no se podia
   pulsar: de las dos puertas que pide el brief 1.1 solo funcionaba una. Faltan
   unos 85 px y se recortan aqui, repartidos entre los aires de la portada y el
   interior de las tarjetas, sin quitar ni una palabra de la pagina.

   El recorte mas grande, y el unico que no es un margen, son los interlineados
   heredados: el titulo de cada puerta arrastraba el line-height 1,8 de <body>
   (35,6 px para una letra de 19,8 px) y son 11 px por tarjeta. A 1,25 el
   titulo sigue holgado.

   Va al final de la seccion de movil por la misma razon que el bloque de
   arriba: aqui gana por especificidad (lleva la clase de <html>), pero si
   manana alguien anade reglas de .home-door mas abajo, este bloque tiene que
   seguir siendo el ultimo.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .has-cookie-banner body.home-page .home-hero { padding-top: .8rem; }

  /* El relleno inferior del hero no mueve las puertas (esta por debajo de
     ellas), pero sin el sobra un hueco vacio justo donde se posa el aviso. */
  .has-cookie-banner body.home-page .home-hero { padding-bottom: .8rem; }

  .has-cookie-banner body.home-page .home-hero .home-hero__title {
    margin-bottom: .35rem;
  }

  .has-cookie-banner .home-hero__lead {
    line-height: 1.45;
    margin-bottom: .55rem;
  }

  .has-cookie-banner .home-creds {
    line-height: 1.45;
    margin-bottom: .55rem;
  }

  .has-cookie-banner .home-doors { gap: .55rem; }
  .has-cookie-banner .home-door { padding: .8rem .95rem .8rem; }

  .has-cookie-banner .home-door__title {
    line-height: 1.25;
    margin-bottom: .25rem;
  }

  .has-cookie-banner .home-door__text {
    line-height: 1.35;
    margin-bottom: .55rem;
  }

  .has-cookie-banner .home-door__actions { gap: .4rem; }
}

/* ---------- Secciones ---------------------------------------------------- */

.home-section {
  padding: 3.25rem 0;
  background: #fff;
}

@media (min-width: 992px) {
  .home-section { padding: 4.25rem 0; }
}

.home-section--alt {
  background: var(--bg-light, #F8F9FA);
}

.home-section__head {
  max-width: 48rem;
  margin: 0 auto 2.25rem;
  text-align: center;
}

.home-section__title {
  font-size: clamp(1.55rem, 1.3vw + 1.1rem, 2.15rem);
  font-weight: 700;
  color: var(--text-dark, #2C3E50);
  margin-bottom: .65rem;
}

.home-section__intro {
  margin: 0;
  color: #55606B;
  font-size: 1.05rem;
  line-height: 1.6;
}

.home-section__footlink {
  margin: 1.75rem 0 0;
  text-align: center;
}

.home-section__footlink a {
  font-weight: 600;
  color: var(--primary-color, #004E89);
  text-decoration: none;
}

.home-section__footlink a:hover,
.home-section__footlink a:focus-visible { text-decoration: underline; }

/* ---------- Posicionamiento --------------------------------------------- */

.home-intro {
  background: #fff;
  padding: 3rem 0 1.5rem;
}

.home-intro__body {
  max-width: 52rem;
  margin: 0 auto;
  text-align: center;
}

.home-intro__title {
  font-size: clamp(1.45rem, 1.2vw + 1.05rem, 2rem);
  font-weight: 700;
  color: var(--text-dark, #2C3E50);
  margin-bottom: .85rem;
}

.home-intro__lead {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-dark, #2C3E50);
  margin-bottom: .75rem;
}

.home-intro__text {
  color: #4A5561;
  font-size: 1.02rem;
  line-height: 1.7;
  margin-bottom: 1.25rem;
}

/* Alcance geografico (D1): se destaca porque es la frase que mas veces tiene
   que leer un comprador para no preguntar por destinos que no operamos. */
.home-intro__scope {
  display: inline-flex;
  align-items: flex-start;
  gap: .6rem;
  margin: 0;
  padding: .8rem 1.1rem;
  border: 1px solid #FED7AA;
  border-radius: 12px;
  background: #FFF7ED;
  color: #7C2D12;
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
}

.home-intro__scope i {
  margin-top: .15rem;
  flex-shrink: 0;
}

/* ---------- Tipologias --------------------------------------------------- */

.home-type {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.5rem;
  border: 1px solid #E5E9EF;
  border-radius: 14px;
  background: #fff;
  transition: box-shadow .25s ease, transform .25s ease;
}

.home-type:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, .1));
}

.home-type__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
  border-radius: 12px;
  background: rgba(194, 65, 12, .1);
  color: var(--primary-color, #004E89);
  font-size: 1.35rem;
}

.home-type__title {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: .5rem;
  color: var(--text-dark, #2C3E50);
}

.home-type__text {
  flex-grow: 1;
  margin-bottom: 1rem;
  color: #4A5561;
  font-size: .95rem;
  line-height: 1.6;
}

.home-type__link {
  align-self: flex-start;
  font-weight: 600;
  font-size: .95rem;
  color: var(--primary-color, #004E89);
  text-decoration: none;
}

.home-type__link:hover,
.home-type__link:focus-visible { text-decoration: underline; }

/* Fase 4: la tarjeta lleva a la landing del tipo de viaje y conserva el
   enlace a cotizar como accion secundaria (partials/home-trip-types.php). */
.home-type__title-link {
  color: inherit;
  text-decoration: none;
}

.home-type__title-link:hover,
.home-type__title-link:focus-visible {
  color: var(--primary-color, #004E89);
  text-decoration: underline;
}

.home-type__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.25rem;
  margin: 0;
}

.home-type__actions .home-type__link { align-self: auto; }

/* ---------- Flecha o subrayado, nunca los dos ni ninguno (2026-09-24) -----
   CRITERIO DE LA PORTADA para los enlaces de llamada a la accion. Leerlo antes
   de tocar cualquiera de las reglas de esta seccion.

   Todos estos enlaces van en azul de marca sobre blanco (8,57:1, de sobra para
   leerlos). El problema no es leerlos: es SABER QUE SON ENLACES. Y el color no
   sirve para eso, porque el azul de marca contra el gris del texto que los
   rodea da 1,13:1 (medido en el navegador), cuando para que el color valga
   como unica senal hacen falta 3:1. O sea que cada enlace necesita una senal
   que no sea el color. Hay dos disponibles y con una basta:

     - Los que llevan FLECHA (.home-section__footlink, .home-door__link y
       .home-type__link) ya la tienen: la flecha es la senal. No llevan
       subrayado fijo; lo recuperan al apuntar y al enfocar.
     - Los que NO llevan flecha (.home-door__aside y este .home-type__link--
       quote) usan el SUBRAYADO como senal, y es fijo.

   Antes de esta fecha la portada no seguia ningun criterio: el subrayado lo
   repartia una regla global de main.css segun si el <a> tenia clase o no, que
   no tiene nada que ver con como se lee la pagina. El resultado medido era que
   el pie de seccion salia subrayado y la tarjeta de encima no, siendo el mismo
   gesto, y que estos seis "Solicitar cotizacion" se quedaban en gris sin
   subrayado ni flecha: sin UNA SOLA senal de que fueran pulsables. */

.home-type__link--quote {
  /* Azul de marca: era #4A5561, el mismo gris del parrafo de la tarjeta, o sea
     1,00:1 contra el texto que lo rodea. Se leia como una linea muerta. */
  color: var(--primary-color, #004E89);
  /* Peso 500 frente al 600 del enlace principal de la tarjeta: la jerarquia
     entre "Como se cotiza y se opera" y "Solicitar cotizacion" se mantiene con
     el peso, que es lo que siempre la marco, y no con el color. */
  font-weight: 500;
  /* El subrayado es aqui la senal no cromatica, porque este enlace no lleva
     flecha (el marcado solo se la pone cuando el tipo de viaje no tiene
     landing y este es el unico enlace de la tarjeta). Mismo tratamiento que
     .home-door__aside, que tampoco la lleva. */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: currentColor;
  text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
  text-underline-offset: 0.2em;
}

/* Al apuntar y al enfocar, la linea se vuelve opaca y engorda, igual que hace
   main.css con los enlaces de prosa: la senal se refuerza, no aparece de la
   nada. Hace falta escribirlo aqui porque .home-type__link:hover pone
   text-decoration a secas y perderia el grosor y el color de la linea. */
.home-type__link--quote:hover,
.home-type__link--quote:focus-visible {
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}

/* ---------- Donde operamos (hubs de destino, Fase 4) ---------------------- */

.home-destinations .listing-card-col { display: flex; }

/* ---------- Producto destacado ------------------------------------------- */

.home-featured__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  margin-top: 1.25rem;
}

/* ---------- Prueba social ------------------------------------------------ */

.home-ref {
  height: 100%;
  margin: 0;
  padding: 1.5rem;
  border: 1px solid #E5E9EF;
  border-radius: 14px;
  background: #fff;
}

.home-ref__logo {
  max-width: 180px;
  height: auto;
  margin-bottom: 1rem;
}

.home-ref__quote {
  margin: 0 0 1rem;
  color: #4A5561;
  font-size: .98rem;
  line-height: 1.6;
}

.home-ref__quote::before { content: '\201C'; }
.home-ref__quote::after { content: '\201D'; }

.home-ref__name {
  font-weight: 700;
  color: var(--text-dark, #2C3E50);
}

.home-ref__country {
  display: block;
  font-weight: 500;
  font-size: .9rem;
  color: #6B747E;
}

/* ---------- Como trabajamos ---------------------------------------------- */

.home-steps {
  margin: 0;
  padding-left: 0;
  list-style: none;
  counter-reset: none;
}

.home-step {
  height: 100%;
  padding: 1.5rem;
  border: 1px solid #E5E9EF;
  border-radius: 14px;
  background: #fff;
}

.home-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: .85rem;
  border-radius: 50%;
  background: var(--secondary-color, #004E89);
  color: #fff;
  font-weight: 700;
}

.home-step__title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: .4rem;
  color: var(--text-dark, #2C3E50);
}

.home-step__text {
  margin: 0;
  color: #4A5561;
  font-size: .95rem;
  line-height: 1.6;
}

.home-how__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem 2.5rem;
  margin: 2rem 0 0;
}

.home-how__fact {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  font-size: .95rem;
}

.home-how__fact dt { font-weight: 700; color: var(--text-dark, #2C3E50); }
.home-how__fact dd { margin: 0; color: #4A5561; }

.home-how__cta {
  margin: 2rem 0 0;
  text-align: center;
}

/* ---------- Cierre -------------------------------------------------------- */

.home-cta {
  padding: 3.25rem 0;
  background: var(--secondary-color, #004E89);
  color: #fff;
}

.home-cta__title {
  color: #fff;
  font-size: clamp(1.45rem, 1.2vw + 1.05rem, 2rem);
  font-weight: 700;
  margin-bottom: .75rem;
}

.home-cta__text {
  color: rgba(255, 255, 255, .94);
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: .5rem;
}

.home-cta__contact {
  margin: 0;
  color: rgba(255, 255, 255, .88);
  font-size: .95rem;
}

.home-cta__contact a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.home-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

@media (min-width: 992px) {
  .home-cta__actions { justify-content: flex-end; }
}

/* Los botones de Bootstrap sobre el azul del cierre: el contorno claro con
   hover blanco necesita texto oscuro para no perder contraste. */
.home-cta .btn-outline-light:hover,
.home-cta .btn-outline-light:focus {
  color: var(--secondary-color, #004E89);
}