/* Start by Talent — variables de marca */

:root {
  /* Colores */
  --color-azul-principal: #1D3E8A;
  --color-azul-profundo: #10233F;
  --color-dorado: #C7A35A;
  /* Dorado oscurecido, solo para dorado usado como texto sobre fondos claros:
     el dorado de marca da 2.19 de contraste sobre marfil y no llega al mínimo */
  --color-dorado-texto: #A8863F;
  --color-marfil: #F7F5F0;
  --color-blanco: #FFFFFF;

  /* Tipografías */
  --font-titulos: 'Playfair Display', serif;
  --font-destacado: 'Cormorant Garamond', serif;
  --font-cuerpo: 'Poppins', sans-serif;

  /* Layout */
  --header-height: 92px;
}

@media (max-width: 768px) {
  :root {
    --header-height: 84px;
  }
}


/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-cuerpo);
  background-color: var(--color-blanco);
  color: var(--color-azul-profundo);
  /* Compensa el header fijo para que el contenido no quede tapado */
  padding-top: var(--header-height);
}

/* Los saltos por ancla no quedan escondidos bajo el header */
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}


/* ---------- Header ---------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--header-height);
  background-color: var(--color-marfil);
  box-shadow: 0 1px 4px rgba(16, 35, 63, 0.08);
}

.site-header__inner {
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.site-header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.site-header__logo img {
  height: 75px;
  width: auto;
  display: block;
}


/* ---------- Navegación ---------- */

.nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav__link {
  /* Fijada aparte a propósito: el menú se queda en Libre Baskerville aunque
     --font-cuerpo cambie para el resto del sitio */
  font-family: 'Libre Baskerville', serif;
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--color-azul-profundo);
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.nav__link:hover,
.nav__link:focus-visible {
  color: var(--color-azul-principal);
  border-bottom-color: var(--color-dorado);
}


/* ---------- Botón hamburguesa (solo móvil) ---------- */

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.nav-toggle__bar {
  display: block;
  width: 26px;
  height: 2px;
  margin: 0 auto;
  background-color: var(--color-azul-profundo);
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.nav-toggle:hover .nav-toggle__bar {
  background-color: var(--color-azul-principal);
}

/* Estado abierto: las barras forman una X */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ---------- Responsive: 768px o menos ---------- */

@media (max-width: 768px) {

  /* En móvil se mantiene en 60px: 75px no dejaría margen en un header de 84px */
  .site-header__logo img {
    height: 60px;
  }

  .nav-toggle {
    display: flex;
    order: 2;
  }

  .nav {
    order: 3;
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    background-color: var(--color-marfil);
    box-shadow: 0 4px 6px rgba(16, 35, 63, 0.08);
    display: none;
  }

  .nav.is-open {
    display: block;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 1.5rem 1rem;
  }

  .nav__link {
    display: block;
    padding: 0.875rem 0;
    border-bottom: 1px solid rgba(16, 35, 63, 0.08);
  }

  .nav__list li:last-child .nav__link {
    border-bottom: 0;
  }

  .nav__link:hover,
  .nav__link:focus-visible {
    color: var(--color-azul-principal);
    border-bottom-color: rgba(16, 35, 63, 0.08);
  }
}


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

.hero {
  background-color: var(--color-blanco);
  /* El body ya compensa el header fijo; aquí solo el aire propio de la sección */
  padding: 4.5rem 1.5rem 5.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--header-height));
}

.hero__inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.hero__logo {
  width: 280px;
  max-width: 70%;
  height: auto;
  display: block;
  margin: 0 auto 2.5rem;
}

.hero__tagline {
  font-family: var(--font-destacado);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--color-azul-profundo);
  margin: 0;
}

.hero__tagline-es {
  font-family: var(--font-destacado);
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.3;
  color: var(--color-azul-principal);
  margin: 0.75rem 0 0;
}

.hero__esencia {
  font-family: var(--font-cuerpo);
  font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
  line-height: 1.85;
  color: var(--color-azul-profundo);
  margin: 2.5rem auto 0;
  max-width: 65ch;
}

.hero__cta {
  display: inline-block;
  margin-top: 3rem;
  padding: 1rem 2.25rem;
  font-family: var(--font-cuerpo);
  font-size: 1rem;
  text-decoration: none;
  color: var(--color-blanco);
  background-color: var(--color-azul-principal);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(16, 35, 63, 0.15);
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.hero__cta:hover,
.hero__cta:focus-visible {
  background-color: var(--color-azul-profundo);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(16, 35, 63, 0.22);
}

@media (max-width: 768px) {

  .hero {
    padding: 3rem 1.25rem 4rem;
    min-height: 0;
  }

  .hero__logo {
    width: 200px;
    margin-bottom: 2rem;
  }

  .hero__esencia {
    margin-top: 2rem;
    line-height: 1.8;
    text-align: left;
  }

  .hero__cta {
    margin-top: 2.5rem;
    width: 100%;
    max-width: 320px;
    padding: 1rem 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__cta {
    transition: background-color 0.2s ease;
  }

  .hero__cta:hover,
  .hero__cta:focus-visible {
    transform: none;
  }
}


/* ---------- Quiénes somos ---------- */

.quienes {
  /* Marfil para contrastar con el hero, que es blanco */
  background-color: var(--color-marfil);
  padding: 6rem 1.5rem;
}

.quienes__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.quienes__titulo {
  font-family: var(--font-titulos);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-azul-profundo);
  text-align: center;
  margin: 0;
}

/* Línea decorativa dorada bajo el encabezado */
.quienes__titulo::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin: 1.25rem auto 0;
  background-color: var(--color-dorado);
}

.quienes__intro,
.quienes__filosofia {
  font-family: var(--font-cuerpo);
  font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
  line-height: 1.9;
  color: var(--color-azul-profundo);
  max-width: 70ch;
  margin: 2.5rem auto 0;
}


/* ---------- Bloque diferenciador ---------- */

.diferenciador {
  max-width: 60ch;
  margin: 3.5rem auto 0;
  padding: 2.25rem 2.5rem;
  background-color: var(--color-azul-profundo);
  color: var(--color-blanco);
  /* Líneas doradas simétricas a ambos lados */
  border-left: 4px solid var(--color-dorado);
  border-right: 4px solid var(--color-dorado);
  border-radius: 4px;
  /* Con un solo párrafo, centrar sigue acompañando la simetría de los bordes */
  text-align: center;
}

.diferenciador__afirmacion {
  font-family: var(--font-destacado);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--color-blanco);
  margin: 0;
}


/* ---------- Metodología Start Star ---------- */

.metodologia {
  margin-top: 5rem;
}

.metodologia__titulo {
  font-family: var(--font-titulos);
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-azul-profundo);
  text-align: center;
  margin: 0;
}

.metodologia__intro {
  font-family: var(--font-cuerpo);
  font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
  line-height: 1.9;
  color: var(--color-azul-profundo);
  max-width: 70ch;
  margin: 1.75rem auto 0;
  text-align: center;
}

.pilares {
  list-style: none;
  margin: 3.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
}

.pilar {
  background-color: var(--color-blanco);
  border-top: 3px solid var(--color-dorado);
  border-radius: 4px;
  padding: 1.75rem 1.5rem;
  box-shadow: 0 1px 4px rgba(16, 35, 63, 0.07);
}

.pilar__titulo {
  font-family: var(--font-titulos);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-azul-principal);
  margin: 0 0 0.75rem;
}

.pilar__texto {
  font-family: var(--font-cuerpo);
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--color-azul-profundo);
  margin: 0;
}


/* ---------- Responsive: Quiénes somos ---------- */

@media (max-width: 1100px) {
  .pilares {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {

  .quienes {
    padding: 4rem 1.25rem;
  }

  .quienes__intro,
  .quienes__filosofia {
    margin-top: 2rem;
    line-height: 1.85;
  }

  .diferenciador {
    margin-top: 2.75rem;
    padding: 2rem 1.5rem;
  }

  .metodologia {
    margin-top: 3.5rem;
  }

  .metodologia__intro {
    text-align: left;
  }

  .pilares {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-top: 2.5rem;
  }
}

@media (max-width: 520px) {
  .pilares {
    grid-template-columns: 1fr;
  }
}


/* ---------- Nuestros servicios ---------- */

.servicios {
  /* Blanco para alternar con el marfil de "Quiénes somos" */
  background-color: var(--color-blanco);
  padding: 6.5rem 1.5rem;
}

.servicios__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.servicios__titulo {
  font-family: var(--font-titulos);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-azul-profundo);
  text-align: center;
  margin: 0;
}

.servicios__titulo::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin: 1.25rem auto 0;
  background-color: var(--color-dorado);
}

.servicios__grid {
  list-style: none;
  counter-reset: servicio;
  margin: 4rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

/* La quinta tarjeta ocupa el ancho completo para cerrar el catálogo
   sin dejar un hueco impar en la última fila */
.servicio--ancho {
  grid-column: 1 / -1;
}

.servicio {
  counter-increment: servicio;
  position: relative;
  background-color: var(--color-marfil);
  border-left: 4px solid var(--color-dorado);
  border-radius: 4px;
  padding: 2.75rem 2.5rem 2.75rem 6.5rem;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

/* Numeral decorativo de cada servicio */
.servicio::before {
  content: counter(servicio, decimal-leading-zero);
  position: absolute;
  top: 2.5rem;
  left: 2.5rem;
  font-family: var(--font-titulos);
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1;
  /* Variante oscurecida: es texto, no un adorno de línea, y necesita contraste */
  color: var(--color-dorado-texto);
}

.servicio:hover {
  box-shadow: 0 6px 20px rgba(16, 35, 63, 0.1);
  transform: translateY(-3px);
}

.servicio__titulo {
  font-family: var(--font-titulos);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-azul-principal);
  margin: 0 0 1rem;
}

.servicio__texto {
  font-family: var(--font-cuerpo);
  font-size: clamp(0.9375rem, 1.4vw, 1rem);
  line-height: 1.85;
  color: var(--color-azul-profundo);
  margin: 0;
  max-width: 62ch;
}


/* ---------- Responsive: servicios ---------- */

@media (max-width: 900px) {

  .servicios__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .servicio--ancho {
    grid-column: auto;
  }
}

@media (max-width: 768px) {

  .servicios {
    padding: 4rem 1.25rem;
  }

  .servicios__grid {
    margin-top: 2.5rem;
  }

  .servicio {
    padding: 2rem 1.5rem 2rem 1.5rem;
  }

  /* En móvil el numeral pasa a flujo normal, arriba del título */
  .servicio::before {
    position: static;
    display: block;
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
  }

  .servicio:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {

  .servicio {
    transition: box-shadow 0.25s ease;
  }

  .servicio:hover {
    transform: none;
  }
}


/* ---------- Línea de Ruta ---------- */

.ruta {
  /* Marfil para alternar con "Nuestros servicios", que es blanco */
  background-color: var(--color-marfil);
  padding: 6.5rem 1.5rem;
}

.ruta__inner {
  max-width: 1100px;
  margin: 0 auto;
}

.ruta__titulo {
  font-family: var(--font-titulos);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-azul-profundo);
  text-align: center;
  margin: 0;
}

.ruta__titulo::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin: 1.25rem auto 0;
  background-color: var(--color-dorado);
}

.ruta__subtitulo {
  font-family: var(--font-destacado);
  font-size: clamp(1.125rem, 2.2vw, 1.5rem);
  font-style: italic;
  color: var(--color-azul-principal);
  text-align: center;
  margin: 1.25rem 0 0;
}


/* Timeline: extremos + puntos */

.ruta__timeline {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  /* Reserva aire arriba para que el tooltip no choque con el subtítulo.
     El más alto (Diagnóstico) mide 187px + 18px de separación = 205px;
     el resto queda de holgura por si la fuente cae al serif de respaldo. */
  margin-top: 14rem;
}

.ruta__extremo {
  flex-shrink: 0;
  padding-top: 3px;
  font-family: var(--font-cuerpo);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-azul-principal);
  /* 0.7 dejaba el contraste en 4.20, por debajo del mínimo AA de 4.5 */
  opacity: 0.8;
}

.ruta__pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  position: relative;
  display: flex;
  justify-content: space-between;
}

/* Línea que conecta los puntos */
.ruta__pasos::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--color-azul-principal);
  opacity: 0.35;
}

.paso {
  position: relative;
  flex: 1;
  display: flex;
  justify-content: center;
}

.paso__punto {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
}

/* El punto en sí */
.paso__punto::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--color-azul-principal);
  /* El borde en color de fondo corta la línea alrededor del punto */
  border: 3px solid var(--color-marfil);
  box-shadow: 0 0 0 0 rgba(29, 62, 138, 0.25);
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.paso__nombre {
  font-family: var(--font-cuerpo);
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--color-azul-profundo);
  text-align: center;
  transition: color 0.2s ease;
}


/* Detalle revelable */

.paso__detalle {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  width: 250px;
  margin-bottom: 1.125rem;
  padding: 1rem 1.125rem;
  font-family: var(--font-cuerpo);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--color-blanco);
  background-color: var(--color-azul-profundo);
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(16, 35, 63, 0.18);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  z-index: 5;
}

/* Punta del tooltip.
   Cuelga del propio paso y no del globo, para que siga apuntando al punto
   aunque el globo se desplace hacia dentro en los pasos extremos.
   1.125rem es el margen inferior del globo; 14px es el alto de la punta. */
.paso::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 1.125rem - 14px);
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: var(--color-azul-profundo);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s;
  z-index: 6;
}

/* Estado activo: por click (JS) o por teclado */
.paso.is-active .paso__detalle,
.paso__punto:focus-visible ~ .paso__detalle {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.paso.is-active::after,
.paso:has(.paso__punto:focus-visible)::after {
  opacity: 1;
  visibility: visible;
}

.paso.is-active .paso__punto::before,
.paso__punto:focus-visible::before {
  transform: scale(1.25);
  background-color: var(--color-dorado);
  box-shadow: 0 0 0 6px rgba(199, 163, 90, 0.2);
}

.paso.is-active .paso__nombre {
  color: var(--color-azul-principal);
}

/* Hover solo en dispositivos con puntero real */
@media (hover: hover) {

  .paso:hover .paso__detalle {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }

  .paso:hover .paso__punto::before {
    transform: scale(1.25);
    background-color: var(--color-dorado);
    box-shadow: 0 0 0 6px rgba(199, 163, 90, 0.2);
  }

  .paso:hover .paso__nombre {
    color: var(--color-azul-principal);
  }

  .paso:hover::after {
    opacity: 1;
    visibility: visible;
  }
}


/* Pasos extremos: el globo se ancla al borde de su columna en vez de
   centrarse sobre el punto, para no desbordar el ancho de la página.
   La punta no se mueve, porque cuelga del paso y no del globo. */

.paso:first-child .paso__detalle {
  left: 0;
  transform: translateX(0) translateY(6px);
}

.paso:last-child .paso__detalle {
  left: auto;
  right: 0;
  transform: translateX(0) translateY(6px);
}

.paso:first-child.is-active .paso__detalle,
.paso:last-child.is-active .paso__detalle,
.paso:first-child .paso__punto:focus-visible ~ .paso__detalle,
.paso:last-child .paso__punto:focus-visible ~ .paso__detalle {
  transform: translateX(0) translateY(0);
}

@media (hover: hover) {

  .paso:first-child:hover .paso__detalle,
  .paso:last-child:hover .paso__detalle {
    transform: translateX(0) translateY(0);
  }
}


/* Nota al pie */

.ruta__nota {
  font-family: var(--font-cuerpo);
  font-size: 0.8125rem;
  font-style: italic;
  line-height: 1.8;
  color: var(--color-azul-profundo);
  opacity: 0.75;
  text-align: center;
  max-width: 68ch;
  margin: 5rem auto 0;
}


/* ---------- Responsive: Línea de Ruta (vertical) ---------- */

@media (max-width: 768px) {

  .ruta {
    padding: 4rem 1.25rem;
  }

  .ruta__timeline {
    /* En móvil la línea rota a vertical */
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    margin-top: 2.5rem;
  }

  .ruta__extremo {
    padding-top: 0;
    padding-left: 3.25rem;
  }

  .ruta__pasos {
    flex-direction: column;
    gap: 0.5rem;
  }

  /* La línea pasa a vertical, alineada al centro de los puntos */
  .ruta__pasos::before {
    top: 0;
    bottom: 0;
    left: 11px;
    right: auto;
    width: 2px;
    height: auto;
  }

  .paso {
    display: block;
    padding-left: 3.25rem;
    padding-bottom: 0.5rem;
  }

  .paso__punto {
    flex-direction: row;
    align-items: center;
    gap: 0;
    width: 100%;
    text-align: left;
    /* Sin position propio, el punto absoluto se ancla a .paso (el ancestro
       posicionado) y queda fuera del texto, no encima de él */
    position: static;
  }

  .paso__punto::before {
    position: absolute;
    left: 0;
    top: 0;
  }

  .paso__nombre {
    text-align: left;
    font-size: 0.9375rem;
    padding: 0.125rem 0;
  }

  /* El detalle entra en el flujo, desplegándose bajo el paso */
  .paso__detalle {
    position: static;
    transform: none;
    width: auto;
    max-width: none;
    margin: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    visibility: visible;
    box-shadow: none;
    transition: max-height 0.3s ease, opacity 0.25s ease,
                padding 0.3s ease, margin 0.3s ease;
  }

  /* En vertical no hay nada que desbordar: se anula el anclaje lateral */
  .paso:first-child .paso__detalle,
  .paso:last-child .paso__detalle {
    left: auto;
    right: auto;
    transform: none;
  }

  .paso::after {
    display: none;
  }

  .paso.is-active .paso__detalle {
    transform: none;
    max-height: 16rem;
    margin-top: 0.75rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  /* En vertical el punto no escala, para no descuadrar la línea */
  .paso.is-active .paso__punto::before,
  .paso__punto:focus-visible::before {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {

  .paso__punto::before,
  .paso__detalle {
    transition: none;
  }

  .paso.is-active .paso__punto::before {
    transform: none;
  }
}


/* ---------- Pulso constante de los puntos ---------- */

/* Se anima el halo (box-shadow) y no transform: una animación gana sobre las
   declaraciones normales, así que animar transform pisaría el scale(1.25)
   del estado hover/activo. */
@keyframes pulso-punto {
  0% {
    box-shadow: 0 0 0 0 rgba(29, 62, 138, 0.32);
  }
  70% {
    box-shadow: 0 0 0 11px rgba(29, 62, 138, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(29, 62, 138, 0);
  }
}

/* El halo vive en su propia capa (::after) y nunca se detiene: si se apagara
   con animation:none, al reanudarse arrancaría de cero y ese punto quedaría
   desfasado del resto. Para atenuarlo se baja su opacidad, no su animación,
   así los cinco comparten siempre la misma fase. */
@media (prefers-reduced-motion: no-preference) {

  .paso__punto::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    pointer-events: none;
    animation: pulso-punto 2.6s ease-out infinite;
    transition: opacity 0.2s ease;
  }

  /* El punto activo atenúa su halo para que el anillo dorado quede limpio */
  .paso.is-active .paso__punto::after,
  .paso__punto:focus-visible::after {
    opacity: 0;
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {

  .paso:hover .paso__punto::after {
    opacity: 0;
  }
}

/* En vertical el punto se ancla a .paso, no al botón */
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {

  .paso__punto::after {
    top: 0;
    left: 0;
    transform: none;
  }
}


/* ---------- Línea vertical: corta en el último punto ---------- */

@media (max-width: 768px) {

  /* La línea única del <ol> llegaba hasta el final del último <li>, pasándose
     del último punto. Se sustituye por un tramo por paso, de su punto al
     siguiente, y el último paso no dibuja tramo. */
  .ruta__pasos::before {
    display: none;
  }

  .paso::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 12px;
    /* 8px de gap entre pasos + 12px hasta el centro del punto siguiente */
    bottom: -20px;
    width: 2px;
    background-color: var(--color-azul-principal);
    opacity: 0.35;
  }

  .paso:last-child::before {
    display: none;
  }
}


/* ---------- Acerca de mí ---------- */

.acerca {
  /* Blanco para alternar con "Línea de Ruta", que es marfil */
  background-color: var(--color-blanco);
  padding: 6.5rem 1.5rem;
}

.acerca__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 4rem;
}

.acerca__foto {
  /* Recorte fijo para que la foto no dependa de su alto original */
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(16, 35, 63, 0.14);
}

.acerca__foto img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* El rostro queda en el tercio superior del encuadre original */
  object-position: center 28%;
}

.acerca__titulo {
  font-family: var(--font-titulos);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-azul-profundo);
  margin: 0;
}

.acerca__titulo::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin: 1.25rem 0 0;
  background-color: var(--color-dorado);
}

.acerca__parrafo {
  font-family: var(--font-cuerpo);
  font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
  line-height: 1.9;
  color: var(--color-azul-profundo);
  max-width: 60ch;
  margin: 2rem 0 0;
}


/* ---------- Responsive: Acerca de mí ---------- */

@media (max-width: 900px) {

  .acerca__inner {
    /* Foto arriba, texto debajo */
    grid-template-columns: 1fr;
    gap: 2.5rem;
    justify-items: center;
  }

  .acerca__foto {
    width: 100%;
    max-width: 340px;
  }

  .acerca__texto {
    text-align: center;
  }

  .acerca__titulo::after {
    margin-left: auto;
    margin-right: auto;
  }

  .acerca__parrafo {
    text-align: left;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 768px) {

  .acerca {
    padding: 4rem 1.25rem;
  }

  .acerca__foto {
    max-width: 280px;
  }

  .acerca__parrafo {
    margin-top: 1.75rem;
    line-height: 1.85;
  }
}


/* ---------- Contáctanos ---------- */

.contacto {
  /* Fondo oscuro para cerrar la página antes del footer */
  background-color: var(--color-azul-profundo);
  color: var(--color-blanco);
  padding: 4.5rem 1.5rem;
}

.contacto__inner {
  /* Mismo ancho que "Línea de Ruta" y "Acerca de mí" */
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 4.5rem;
  align-items: start;
}

.contacto__titulo {
  font-family: var(--font-titulos);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-blanco);
  margin: 0;
}

.contacto__titulo::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin: 1rem 0 0;
  background-color: var(--color-dorado);
}

.contacto__invitacion {
  font-family: var(--font-cuerpo);
  font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
  line-height: 1.8;
  color: var(--color-blanco);
  opacity: 0.88;
  max-width: 42ch;
  margin: 1.5rem 0 0;
}


/* Datos de contacto */

.contacto__lista {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}

.contacto__lista li + li {
  margin-top: 0.75rem;
}

.contacto__dato {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  font-family: var(--font-cuerpo);
  font-size: 1rem;
  text-decoration: none;
  color: var(--color-blanco);
  padding: 0.5rem 0;
  transition: color 0.2s ease;
}

.contacto__icono {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--color-dorado);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.2s ease;
}

.contacto__dato:hover,
.contacto__dato:focus-visible {
  color: var(--color-dorado);
}

.contacto__dato:hover .contacto__icono,
.contacto__dato:focus-visible .contacto__icono {
  stroke: var(--color-blanco);
}


/* Formulario */

.campo + .campo {
  margin-top: 1.125rem;
}

.campo__label {
  display: block;
  font-family: var(--font-cuerpo);
  font-size: 0.875rem;
  color: var(--color-blanco);
  opacity: 0.9;
  margin-bottom: 0.5rem;
}

.campo__opcional {
  opacity: 0.6;
  font-size: 0.8125rem;
}

.campo__control {
  display: block;
  width: 100%;
  /* Alto cómodo para tocar en móvil */
  min-height: 48px;
  padding: 0.75rem 1rem;
  font-family: var(--font-cuerpo);
  font-size: 1rem;
  color: var(--color-blanco);
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 4px;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.campo__control--area {
  min-height: 104px;
  resize: vertical;
  line-height: 1.7;
}

.campo__control::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.campo__control:hover {
  border-color: rgba(255, 255, 255, 0.38);
}

.campo__control:focus {
  outline: none;
  background-color: rgba(255, 255, 255, 0.1);
  border-color: var(--color-dorado);
  box-shadow: 0 0 0 3px rgba(199, 163, 90, 0.25);
}

/* Solo marca en rojo tras un intento de envío o al salir del campo.
   :user-invalid, a diferencia de :invalid, no se activa al cargar la página. */
.campo__control:user-invalid {
  border-color: #E88B8B;
}

.formulario__enviar {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.875rem 2.25rem;
  font-family: var(--font-cuerpo);
  font-size: 1rem;
  cursor: pointer;
  /* Dorado sobre el fondo oscuro: el azul principal se perdería contra el azul profundo */
  color: var(--color-azul-profundo);
  background-color: var(--color-dorado);
  border: 0;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.formulario__enviar:hover,
.formulario__enviar:focus-visible {
  background-color: #D9B978;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32);
}

.formulario__enviar:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}


/* Mensajes de resultado del envío.
   Sin declarar display, para que el atributo hidden siga ocultándolos. */

.formulario__exito {
  font-family: var(--font-cuerpo);
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--color-blanco);
  margin: 0;
  padding: 1.75rem 1.5rem;
  background-color: rgba(199, 163, 90, 0.14);
  border: 1px solid var(--color-dorado);
  border-radius: 4px;
  text-align: center;
}

.formulario__error {
  font-family: var(--font-cuerpo);
  font-size: 0.875rem;
  line-height: 1.7;
  color: #F0B4B4;
  margin: 1.5rem 0 0;
}


/* ---------- Responsive: Contáctanos ---------- */

@media (max-width: 900px) {

  .contacto__inner {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
}

@media (max-width: 768px) {

  .contacto {
    padding: 3rem 1.25rem;
  }

  .contacto__invitacion {
    margin-top: 1.25rem;
  }

  .contacto__lista {
    margin-top: 1.5rem;
  }

  .formulario__enviar {
    width: 100%;
    max-width: 320px;
    padding: 0.9375rem 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {

  .formulario__enviar {
    transition: background-color 0.2s ease;
  }

  .formulario__enviar:hover,
  .formulario__enviar:focus-visible {
    transform: none;
  }
}


/* ---------- Footer ---------- */

.site-footer {
  background-color: var(--color-azul-profundo);
  /* Misma base que "Contáctanos": una línea sutil marca la separación */
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 1.75rem 1.5rem;
}

.site-footer__texto {
  font-family: var(--font-cuerpo);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--color-blanco);
  opacity: 0.75;
  text-align: center;
  margin: 0;
}

@media (max-width: 768px) {

  .site-footer {
    padding: 1.5rem 1.25rem;
  }
}