/* =========================================================
   ESTILOS PROPIOS — complementan a Tailwind
   Aquí solo va lo que Tailwind no cubre cómodamente:
   estados de radios, scroll suave y accesibilidad.
   ========================================================= */

/* Scroll suave al pulsar los enlaces del menú (#seguros, #cita…) */
html {
  scroll-behavior: smooth;
  /* Compensa la cabecera fija de 64px para que el título no quede tapado */
  scroll-padding-top: 80px;
}

/* Cuando un radio de "ramo" está seleccionado, resaltamos su tarjeta.
   Usamos :has() para no depender de JS. */
.ramo-option:has(input:checked) {
  border-color: #00008f;             /* Azul AXA */
  background-color: rgba(0, 0, 143, 0.05);
  box-shadow: 0 0 0 3px rgba(0, 0, 143, 0.12);
}

/* Foco visible por accesibilidad (personas que navegan con teclado) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid #e00000;        /* Rojo AXA */
  outline-offset: 2px;
  border-radius: 4px;
}

/* Respeta a quien prefiere menos movimiento (accesibilidad) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* Quita la flecha por defecto de <summary> en algunos navegadores */
summary::-webkit-details-marker { display: none; }
summary { list-style: none; }