/*
 * El popup de bienvenida de la portada.
 *
 * SCALE WARNING — igual que `relojes.css`: la home también corre con la raíz
 * de Bricks en 62.5%, así que 1rem acá vale 10px, no 16px.
 *
 * Toma prestada la paleta y los tokens de la landing de inversión
 * (`--landing-primary`, `--color-gold`, `--radius-buttons`, `--text-m`, la
 * transición `--transicion-hover`) en vez de inventar unos propios: este
 * popup vive en la portada y tiene que leerse como la misma casa que las
 * landings, no como un cartel pegado encima.
 *
 * Nombrado `hb-` (bienvenida), un prefijo que ningún otro módulo usa.
 */

.hb-overlay {
  /* `--rl-night`/`--rl-paper` no llegan hasta acá: viven en relojes.css,
     escopados a `.rl-header/.rl-hero/.rl-section/.rl-footer`, que esta
     página no tiene. Literales, no `var()` de un token que nunca aplica. */
  --hb-night: #16130e;
  --hb-gold: var(--landing-primary, #b59c67);
  --hb-ink: #f4f3f3;
  --hb-rule: rgb(181 156 103 / .28);

  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgb(10 8 5 / .68);
  backdrop-filter: blur(8px);

  /* Cerrado por clase y no por `[hidden]`: este elemento ya lleva un
     `display` propio (`flex`), y el atributo no gana contra eso. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s ease, visibility .3s;
}

.hb-overlay.is-abierto {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.hb-modal {
  position: relative;
  width: 100%;
  max-width: 76rem;
  max-height: 88vh;
  overflow-y: auto;
  box-sizing: border-box;
  padding: clamp(2.4rem, 3vw, 4rem);
  border: 1px solid rgb(181 156 103 / .35);
  border-radius: 2rem;
  background: var(--hb-night);
  box-shadow: 0 2rem 6rem rgb(0 0 0 / .55);
  translate: 0 1.2rem;
  scale: .98;
  transition: translate .35s ease, scale .35s ease;
}

.hb-overlay.is-abierto .hb-modal {
  translate: 0 0;
  scale: 1;
}

/* El foco entra acá al abrir (ver bienvenida.js). Es un contenedor, no un
   control: sin anillo propio, el que sí importa es el del primer elemento
   real que seguiría en la vuelta de tabulador. */
.hb-modal:focus {
  outline: none;
}

.hb-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.hb-cerrar {
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  flex: none;
  border: 1px solid rgb(181 156 103 / .4);
  border-radius: 999px;
  background: rgb(255 255 255 / .05);
  color: var(--hb-gold);
  cursor: pointer;
  transition: var(--transicion-hover, .3s ease-in-out);
  transition-property: background-color, border-color;
}

.hb-cerrar:hover,
.hb-cerrar:focus-visible {
  background: rgb(255 255 255 / .12);
  border-color: var(--hb-gold);
}

.hb-cerrar:focus-visible {
  outline: 2px solid var(--hb-gold);
  outline-offset: 2px;
}

.hb-cerrar__icono {
  width: 2rem;
  height: 2rem;
}

.hb-cabecera {
  text-align: center;
  padding-inline-end: 3rem;
  margin-block-end: clamp(2rem, 2.4vw, 3rem);
}

.hb-medalla {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 6rem;
  height: 6rem;
  margin-block-end: 1.2rem;
  border: 1px solid rgb(181 156 103 / .4);
  border-radius: 999px;
  background: radial-gradient(circle at 50% 40%, rgb(181 156 103 / .22), transparent 72%);
  color: var(--hb-gold);
}

.hb-medalla__icono {
  width: 3.4rem;
  height: 3.4rem;
}

.hb-titulo {
  margin: 0 0 .8rem;
  font-family: Montserrat, system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 1vw + 1.8rem, 2.6rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--hb-gold);
  text-wrap: balance;
}

.hb-subtitulo {
  margin: 0;
  color: rgb(244 243 243 / .78);
  font-size: var(--text-m, 1.6rem);
  font-weight: 300;
  line-height: 1.5;
}

.hb-grupos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 3vw, 3.2rem);
  margin-block-end: clamp(2rem, 2.4vw, 2.8rem);
}

.hb-grupo:first-child {
  padding-inline-end: clamp(2rem, 3vw, 3.2rem);
  border-inline-end: 1px solid var(--hb-rule);
}

/*
 * `.hb-grupo` es un `<details>` y `.hb-grupo__titulo` su `<summary>`: en
 * mobile eso da el desplegable gratis, sin JS propio. En desktop se fuerza
 * siempre abierto y sin click más abajo — acá sólo se le saca el triángulo
 * nativo del navegador, que ninguna de las dos versiones usa.
 */
.hb-grupo__titulo {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 0 0 1.4rem;
  font-family: Montserrat, system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(1.5rem, .6vw + 1.35rem, 1.8rem);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--hb-ink);
  list-style: none;
}

.hb-grupo__titulo::-webkit-details-marker {
  display: none;
}

.hb-grupo__icono {
  flex: none;
  color: var(--hb-gold);
}

.hb-grupo__destacado {
  color: var(--hb-gold);
}

.hb-grupo__chevron {
  display: none;
  flex: none;
  margin-inline-start: auto;
  color: var(--hb-gold);
  transition: rotate .25s ease-in-out;
}

.hb-grupo__lista {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hb-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.5rem 1.8rem;
  border: 1px solid var(--hb-rule);
  border-radius: 1.2rem;
  background: rgb(255 255 255 / .04);
  color: var(--hb-ink);
  font-family: Montserrat, system-ui, sans-serif;
  font-size: var(--text-m, 1.6rem);
  font-weight: 400;
  line-height: 1.3;
  text-decoration: none;
  transition: var(--transicion-hover, .3s ease-in-out);
  transition-property: background-color, border-color;
}

.hb-card__flecha {
  flex: none;
  color: var(--hb-gold);
  transition: translate .3s ease-in-out;
}

.hb-card:hover,
.hb-card:focus-visible {
  background: rgb(255 255 255 / .09);
  border-color: rgb(181 156 103 / .65);
}

.hb-card:hover .hb-card__flecha,
.hb-card:focus-visible .hb-card__flecha {
  translate: 4px 0;
}

.hb-card:focus-visible {
  outline: 2px solid var(--hb-gold);
  outline-offset: 2px;
}

.hb-checkbox {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: fit-content;
  padding-block: .6rem;
  color: rgb(244 243 243 / .78);
  font-size: 1.4rem;
  cursor: pointer;
}

.hb-checkbox__input {
  width: 1.8rem;
  height: 1.8rem;
  flex: none;
  accent-color: var(--hb-gold);
  cursor: pointer;
}

/* Mientras el popup está abierto, la página de atrás no se mueve: el dedo que
   arrastra sobre el velo no tiene por qué scrollear lo que está tapando. */
html.hb-quieto {
  overflow: hidden;
}

/*
 * Desktop: los dos grupos quedan siempre abiertos. El `open` real lo pone
 * bienvenida.js según el ancho —Chrome esconde el contenido cerrado de un
 * `<details>` en una caja interna que ningún CSS sobre `.hb-grupo__lista`
 * alcanza a pisar, así que forzarlo por acá no sirve—; esta regla sólo evita
 * que un click en el `<summary>` lo vuelva a cerrar.
 */
@media (min-width: 48em) {
  .hb-grupo__titulo {
    cursor: default;
    pointer-events: none;
  }
}

@media (max-width: 47.9375em) {
  .hb-overlay {
    padding: 1.2rem;
    align-items: center;
  }

  .hb-modal {
    width: min(100%, 34rem);
    max-height: 88vh;
    padding: clamp(2rem, 6vw, 2.6rem);
    border-radius: 1.6rem;
  }

  .hb-cabecera {
    /* Simétrico y no sólo `-end`: el contenido de acá adentro se centra con
       `text-align`, así que un padding parejo en los dos lados es lo único
       que deja el botón de cerrar afuera sin correr ese centro. Chico:
       el título queda debajo de la medalla, ya fuera de la fila del botón,
       así que no hace falta el mismo margen que en desktop —y con menos,
       el título entra en dos líneas en vez de tres. */
    padding-inline: .8rem;
    margin-block-end: 1.8rem;
  }

  .hb-subtitulo {
    display: none;
  }

  /*
   * El espacio arriba y abajo de la línea divisoria tiene que ser el mismo:
   * arriba lo dan el padding del summary (.6rem) más el del propio
   * `.hb-grupo:first-child` (.8rem); abajo, ese mismo .8rem de acá —el gap
   * de la grilla— más el padding del summary siguiente (.6rem). 1.4rem de
   * los dos lados.
   */
  .hb-grupos {
    grid-template-columns: 1fr;
    gap: .8rem;
  }

  .hb-grupo:first-child {
    padding-inline-end: 0;
    padding-block-end: .8rem;
    border-inline-end: 0;
    border-block-end: 1px solid var(--hb-rule);
  }

  .hb-grupo__titulo {
    position: relative;
    justify-content: center;
    margin-block-end: 0;
    padding-block: .6rem;
    cursor: pointer;
  }

  .hb-grupo__chevron {
    display: block;
    position: absolute;
    inset-inline-end: 0;
    margin-inline-start: 0;
  }

  .hb-grupo[open] .hb-grupo__chevron {
    rotate: 180deg;
  }

  .hb-grupo__lista {
    padding-block-start: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hb-overlay,
  .hb-modal,
  .hb-card,
  .hb-card__flecha,
  .hb-cerrar {
    transition: none;
  }

  .hb-modal {
    translate: none;
    scale: 1;
  }
}