/**
 * RadioOptionsCta.css — port del `extraComponent` de
 * `mx-cms/src/sections/beneficios/BeneficiosHeader`.
 *
 * El legacy lo arma con `Box marginBottom="20px"` + `RadioGroup
 * flexDirection="column" spaceY="1rem"` + un `LinkButton withArrow size="large"`.
 *
 * Los radios son nativos (ver la nota en el `.jsx`), así que el estilo replica el
 * del design system a mano: círculo con borde `neutral[40]` y punto verde
 * `primary[40]` al seleccionar.
 */

/* Paridad de render de texto con el legacy: el sitio viejo setea
 * -webkit-font-smoothing: antialiased global, que en macOS renderiza la
 * tipografía más liviana. Los Code Components viven en shadow roots aislados,
 * así que hay que declararlo por componente en :host para que herede al shadow
 * tree — la propiedad NO cruza el límite. */
:host {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.radio-options-cta {
  font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
  display: block;
  width: 100%;
  box-sizing: border-box;

  /* Box marginBottom="20px" que envuelve al RadioGroup */
  .options {
    display: flex;
    flex-direction: column;
    /* `spaceY="1rem"` del RadioGroup */
    gap: 1rem;
    margin-bottom: 20px;
  }

  /* Cada opción es un `<label>` para que el click en el texto también seleccione. */
  .option {
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
  }

  /* El radio nativo, estilado. `appearance: none` lo deja en blanco y el punto
     interior se dibuja con un `box-shadow` inset — es la técnica que funciona en
     todos los motores sin pseudo-elementos, que en un input no siempre andan. */
  .radio {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    margin: 0;
    border: 1px solid #3b4540; /* neutral[40] */
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }

  .radio:checked {
    border: 1px solid #8edb00;
    background: #8edb00;
    /* El punto verde del centro: un inset de 4px deja un anillo de 6px de radio. */
    box-shadow: inset 0 0 0 4px #8edb00;
  }

  /* El foco visible es obligatorio: sin él, quien navega con teclado no sabe en
     qué opción está. `:focus-visible` no lo muestra al hacer click con el mouse. */
  .radio:focus-visible {
    outline: 2px solid #317500; /* primary[80] */
    outline-offset: 2px;
  }

  /* Typography del label. body.md = 16px · ls xs 0.3 · lh md 24px · regular 400 */
  .option-label {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.3px;
    line-height: 24px;
    color: inherit;
  }

  /* El botón sale del design system (`CardCtaButton` → `ButtonPrimaryWithArrow`),
     así que acá NO va su estilo: color, radio, padding y tipografía los pone el DS.
     El elemento cambia según el estado —`<a>` si hay opción elegida, `<button>` si
     no— pero ya no hay estado deshabilitado que estilar (ver el `.jsx`).

     Lo único que queda es el ancho: el legacy lo deja a ancho completo en mobile y
     lo encoge con un mínimo desde 1024px. Los selectores bajan al `button`/`a` que
     renderiza el DS. */
  .cta {
    display: block;
    width: 100%;

    @media (min-width: 1024px) {
      width: fit-content;
      min-width: 264px;
    }
  }

  .cta svg {
    margin-left: auto;
  }

  /* Mensaje de error: texto rojo pelado, sin recuadro ni subrayado, a pedido.

     ⚠️ Queda anotado lo que se midió cuando esto era un chip, porque el dato
     sigue siendo cierto y explica por qué alguna vez tuvo fondo: este bloque
     vive en el slot "Contenido extra" de un `Generic Image`, que tiene cuatro
     fondos posibles, y `error[60]` no llega a AA en ninguno como texto suelto:

       #de3543 sobre oscuro #292929 ... 3.25:1   (AA pide 4.5 para texto)
       #de3543 sobre blanco .......... 4.47:1
       #de3543 sobre gris #f1f3f2 .... 4.01:1
       #de3543 sobre beige #e9e9e1 ... 3.66:1

     Los cuatro pasan el 3:1 de "texto grande", así que si en alguna sección se
     ve flojo, subirle el tamaño o el peso lo acomoda sin cambiar el color. */
  .error {
    margin: 0 0 12px;
    color: #de3543; /* error[60] */
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.3px;
    line-height: 20px;
    text-decoration: none;
  }

  /* Del barrido sobre BR: 7 de sus componentes respetan esta preferencia. */
  @media (prefers-reduced-motion: reduce) {
    .radio {
      transition: none;
    }
  }
}

/* Reset de box-sizing scopeado al componente. El reset de Webflow no llega
   adentro del shadow root, así que cada componente declara el suyo. */
.radio-options-cta,
.radio-options-cta *,
.radio-options-cta *::before,
.radio-options-cta *::after {
  box-sizing: border-box;
}