/* -----------------------------------------------------------------------------
   Complementos a Tailwind: cosas que el CDN no cubre (keyframes, honeypot,
   estados de foco, menú móvil). Los hex de aquí NO salen del tailwind.config —
   si cambia la paleta, hay que sincronizarlos a mano.
     accent-gold #FFC107 · deep-navy #0A192F · border-subtle #DADCE0
----------------------------------------------------------------------------- */

/* Iconos ------------------------------------------------------------------- */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  line-height: 1;
  user-select: none;
}

/* Foco accesible visible en toda la interfaz -------------------------------- */
:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 2px solid #FFC107;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Honeypot: oculto por CSS, no con type="hidden" (los bots lo detectan) ------ */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Menú móvil: transición por max-height ------------------------------------ */
.mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.mobile-menu.open {
  max-height: 32rem;
}

/* Hero: degradado de respaldo si la imagen de fondo no está disponible ------ */
.hero-bg {
  background-color: #f3f4f5;
  background-image: linear-gradient(160deg, #f8f9fa 0%, #e7e8e9 100%);
}

/* Animaciones on-scroll ----------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}

/* Stepper del proceso ------------------------------------------------------
   Los cuatro círculos arrancan apagados y `initStepper` (js/main.js) les añade
   `.animated` de forma escalonada: I, II, III, IV. El color final es el mismo
   para los cuatro. */
/* Tarjetas de contenido -----------------------------------------------------
   Una única clase para todas las rejillas de tarjetas (perfiles, metodología,
   quién revisa, testimonios), en lugar de un hover distinto por sección.

   El fondo se aclara a blanco: en las tarjetas que ya son blancas no se nota,
   y en las grises refuerza la sensación de que la tarjeta se levanta. */
.card {
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease,
    background-color 0.25s ease;
}

.card:hover {
  transform: translateY(-4px);
  border-color: #FFC107;
  background-color: #FFFFFF;
  box-shadow: 0 12px 28px rgba(10, 25, 47, 0.10);
}

/* El medallón numerado se rellena de oro, igual que los círculos del stepper. */
.card-badge {
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease;
}

.card:hover .card-badge {
  background-color: #FFC107;
  border-color: #FFC107;
  color: #0A192F;
}

/* Raíl que une los círculos. Antes llevaba `-z-10`, que lo mandaba por detrás
   del fondo de la sección: no se veía nunca. Ahora se apoya en el orden del DOM.

   Los extremos van calculados para morir en el centro del primer y del último
   círculo. Los números salen del layout del grid: 4 columnas con `gap-8` (32px)
   y círculos `w-16` (64px, centro a 32px del borde de su columna), de donde
   ancho de columna = 25% - 24px y el centro del cuarto círculo cae a
   25% - 56px del borde derecho. Si cambian las columnas, el gap o el tamaño del
   círculo, hay que rehacer estas dos cuentas. */
@media (min-width: 768px) {
  .process-track {
    left: 32px;
    right: calc(25% - 56px);
  }
}

.process-line {
  width: 0;
  transition: width 1.2s ease-out;
}

.process-track.animated .process-line {
  width: 100%;
}

.step-dot {
  transition:
    background-color 0.45s ease,
    border-color 0.45s ease,
    color 0.45s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.step.animated .step-dot {
  background-color: #FFC107;
  border-color: #FFC107;
  color: #0A192F;
  animation: step-pop 0.5s ease both;
}

.step.animated .step-chip {
  color: #FFC107;
}

/* Hover: invierte a azul marino. Va después de `.animated` a propósito —misma
   especificidad—, para que el estado de hover gane sobre el encendido. */
.step:hover .step-dot {
  background-color: #0A192F;
  border-color: #0A192F;
  color: #FFC107;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(10, 25, 47, 0.18);
}

@keyframes step-pop {
  0%   { transform: scale(0.85); box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.5); }
  60%  { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(255, 193, 7, 0); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); }
}

/* Detalle de acordeón: rotación suave del chevron -------------------------- */
details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}

/* Respeto por prefers-reduced-motion --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .mobile-menu {
    transition: none;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
  /* Se quitan el recorrido y el rebote, pero NO el color: los círculos deben
     acabar encendidos igual, solo que sin transición. */
  .step-dot,
  .process-line,
  .card,
  .card-badge {
    transition: none;
  }
  /* El color del hover se mantiene; lo que se quita es el desplazamiento. */
  .card:hover {
    transform: none;
  }
  .step.animated .step-dot {
    animation: none;
  }
  html {
    scroll-behavior: auto;
  }
}