/*
 * El sitio público de GiftMe.
 *
 * **Es CSS escrito a mano y no Tailwind compilado, y esa es una decisión de
 * despliegue antes que de estilo.** El sitio se sirve desde este repositorio
 * porque el servidor no tiene Node; meter Tailwind acá volvería a pedir un paso
 * de compilación, o sea o un `package.json` en la API —que el CLAUDE.md
 * prohíbe— o regenerar la hoja desde otro repositorio cada vez que alguien
 * toque una vista. Eso último deja una trampa mala: se agrega una clase a un
 * Blade, no pasa nada, y no hay forma de darse cuenta. Sin build, desplegar
 * sigue siendo `git pull`.
 *
 * **Los tokens son los mismos de la app y del sitio en Astro**, copiados tal
 * cual: esta web y la app son la misma marca vista con dos minutos de
 * diferencia, y dos paletas parecidas se leen como dos productos.
 *
 * **Las clases van en español y sin tildes.** Es la regla del repositorio para
 * identificadores: el texto lleva tildes, lo que se escribe en el código no.
 */

:root {
  --primary: #137E7C;
  --on-primary: #ffffff;
  --primary-container: #008080;
  --on-primary-container: #e3fffe;
  --tertiary-fixed: #ffe16d;
  --on-tertiary-fixed: #221b00;

  --surface: #f4f7f6;
  --on-surface: #002020;
  --on-surface-variant: #3e4949;
  --surface-lowest: #ffffff;
  --surface-low: #d7fafa;
  --surface-container: #d2f5f4;
  --surface-high: #ccefee;

  --outline-variant: #bdc9c8;
  --gris-borde: #b5b5b5;
  --gris-texto: #5a5a5a;
  /* El carril del selector de la portada. Es el único gris de fondo del sitio y
     está para eso: ahí el color de marca es la mitad elegida, así que el carril
     tiene que quedarse atrás. */
  --gris-fondo: #e7eaea;

  --ambar-fondo: #fff0cc;
  --ambar-texto: #6c5000;
  --verde-fondo: #dcf3e4;
  --verde-texto: #1b5e3a;

  /*
   * **El par de lo que salió mal**, al lado del ámbar y del verde y con el mismo
   * molde: un fondo suave y un texto que contrasta sobre él. Lo estrenó la
   * sesión del navegador, que es lo primero que este sitio tuvo que pudiera
   * fallar —hasta que se pudo reservar, no había ninguna acción que rechazar—.
   */
  --rojo-fondo: #fbe3e3;
  --rojo-texto: #7d1f1f;

  --font-titulo: 'Momo Trust Display', ui-serif, Georgia, serif;
  --font-cuerpo: 'Lato', ui-sans-serif, system-ui, sans-serif;
  --font-marca: 'DM Sans', ui-sans-serif, system-ui, sans-serif;

  /*
   * **El sitio se dibuja siempre en claro.** No hay `prefers-color-scheme` y no
   * es un olvido: la app tiene un solo esquema, y esto es lo que alguien ve dos
   * minutos antes de descargarla. Un enlace que abre en oscuro y una app que
   * abre en claro se leen como dos productos.
   */
  color-scheme: light;
}

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

body {
  margin: 0;
  min-height: 100dvh;
  background-color: var(--surface);
  color: var(--on-surface);
  font-family: var(--font-cuerpo);
  /* Lato se publica en 400 y 700 y en ningún intermedio, así que el cuerpo
     va en 400 y todo lo que resalta en 700: un 500 o un 600 acá no tiene
     archivo y el navegador dibuja el más cercano. Son los mismos pesos que
     la app, y lo que se agregue tiene que elegir entre esos dos. */
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/*
 * **`height: auto` no es de adorno.** Los atributos `width` y `height` del HTML
 * se mapean a las propiedades CSS del mismo nombre, así que una imagen a la que
 * una regla le fije el ancho se queda con el alto del atributo y sale estirada.
 * Las capturas de la portada llevan `height="820"` justamente para reservar el
 * espacio antes de que carguen, así que sin esto se deforman las tres.
 */
img {
  max-width: 100%;
  height: auto;
}

/*
 * **Los encabezados no heredan la negrita del navegador, y esto es load-bearing.**
 *
 * Momo Trust Display —la tipografía de los títulos— **se publica con un solo
 * peso**. El `font-weight: bold` que el navegador le pone por omisión a un `h1`
 * no tiene archivo que cargar, así que el navegador **la engorda a mano**: la
 * «negrita floja», con el trazo empastado y los contornos sucios. Es el mismo
 * problema que la app ya tuvo una vez.
 *
 * Que se vea bien no es entonces una elección de estilo sino la ausencia de un
 * defecto: hay que **desactivar** la negrita, no pedirla. Lo que separa un
 * título de un párrafo acá es su forma y su tamaño.
 *
 * El sitio en Astro no lo necesitaba escrito porque el preflight de Tailwind ya
 * resetea los encabezados; al pasar a CSS propio, eso hay que traerlo.
 */
h1,
h2,
h3,
h4 {
  font-size: inherit;
  font-weight: inherit;
}

a {
  color: inherit;
}

/* ---------------------------------------------------------------- El molde */

.contenido {
  width: 100%;
  max-width: 42rem;
  margin: 0 auto;
  padding: 2rem 1rem 4rem;
}

.contenido-ancho {
  max-width: 64rem;
}

/* --------------------------------------------------------- El encabezado */

.encabezado {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 60%, transparent);
  background-color: color-mix(in srgb, var(--surface) 85%, transparent);
  backdrop-filter: blur(8px);
}

.encabezado > div {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 4rem;
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 1rem;
}

.marca {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.marca span {
  font-family: var(--font-marca);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--primary);
}

/*
 * **La tira de secciones se esconde en el teléfono y no se convierte en un menú
 * de hamburguesa.** Un menú es un botón, un panel y una trampa de foco para tres
 * enlaces que bajan a tres secciones de esta misma página: en un teléfono se
 * llega a las tres bajando. Lo que no se puede perder es el botón, y ese se
 * queda.
 */
.secciones {
  display: none;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.secciones a {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--on-surface-variant);
  text-decoration: none;
  transition: color 0.15s;
}

.secciones a:hover {
  color: var(--primary);
}

/* ------------------------------------------------------------- Los botones */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  height: 2.75rem;
  flex-shrink: 0;
  padding: 0 1.25rem;
  border: 0;
  border-radius: 9999px;
  background-color: var(--primary);
  color: var(--on-primary);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s;
}

.boton:hover {
  background-color: var(--primary-container);
}

.boton-del-encabezado {
  margin-left: auto;
}

.boton-chico {
  height: 2.25rem;
  padding: 0 1rem;
  font-size: 0.875rem;
}

.boton-borde {
  background-color: transparent;
  border: 1px solid var(--gris-borde);
  color: var(--gris-texto);
}

.boton-borde:hover {
  background-color: var(--surface-low);
}

/* ------------------------------------------------------- Texto largo */

.texto h1 {
  margin: 0;
  font-family: var(--font-titulo);
  font-size: 1.875rem;
  line-height: 1.15;
  text-wrap: balance;
}

.texto .fecha {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--on-surface-variant);
}

.texto h2 {
  margin: 3rem 0 0;
  font-family: var(--font-titulo);
  font-size: 1.5rem;
  line-height: 2rem;
}

.texto h3 {
  margin: 2rem 0 0;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--on-surface);
}

.texto p,
.texto li {
  margin-top: 1rem;
  line-height: 1.75;
  color: var(--on-surface-variant);
}

.texto li {
  margin-top: 0.5rem;
}

.texto ul {
  margin-top: 1rem;
  padding-left: 1.25rem;
}

.texto strong {
  font-weight: 700;
  color: var(--on-surface);
}

.texto a {
  font-weight: 700;
  color: var(--primary);
  text-underline-offset: 2px;
}

.texto a:hover {
  color: var(--primary-container);
}

.texto code {
  border-radius: 0.25rem;
  background-color: var(--surface-container);
  padding: 0.125rem 0.375rem;
  font-size: 0.9em;
}

/* ------------------------------------------------ La cabecera de una lista */

.ficha {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/*
 * **Las iniciales y no una foto**: no hay foto de perfil en el producto, así que
 * no hay hueco gris que llenar ni imagen que pueda faltar. Es lo mismo que hace
 * la app.
 */
.iniciales {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background-color: var(--primary);
  color: var(--on-primary);
  font-weight: 700;
}

.ficha .rotulo {
  margin: 0;
  font-size: 0.875rem;
  color: var(--on-surface-variant);
}

.ficha .nombre {
  margin: 0;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.titulo-de-lista {
  margin: 1.25rem 0 0;
  font-family: var(--font-titulo);
  font-size: 1.875rem;
  line-height: 2.5rem;
}

.bajada {
  margin: 0.5rem 0 0;
  color: var(--on-surface-variant);
}

/* ------------------------------------------------------------ Los regalos */

.regalos {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.regalo {
  position: relative;
  display: flex;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--gris-borde) 60%, transparent);
  border-radius: 1.5rem;
  background-color: var(--surface-lowest);
}

/*
 * **El borde va en lo disponible y no en lo cerrado**, igual que en la app: no
 * está para marcar lo que ya se resolvió sino para señalar lo que todavía se
 * puede regalar, que es a lo que vino quien abrió el enlace.
 */
.regalo.cerrado {
  border-color: transparent;
}

.regalo .foto {
  width: 5rem;
  height: 5rem;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 1rem;
  background-color: var(--surface-low);
}

.regalo .foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.regalo.cerrado .foto img {
  opacity: 0.45;
  filter: grayscale(1);
}

.regalo .foto .sin-foto {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--on-surface-variant) 50%, transparent);
}

.regalo .datos {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
}

.regalo h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.regalo.cerrado h3 {
  color: var(--on-surface-variant);
}

.regalo .precio {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--primary);
}

/* **No es un precio, así que no va con el color del precio.** En el primario
   pesaría igual que «Gs. 320.000» en la fila de al lado, y lo que dice es
   justamente que ese número no lo tenemos. */
.regalo .precio-a-consultar {
  font-weight: 400;
  color: var(--on-surface-variant);
}

.regalo .nota {
  margin: 0;
  font-size: 0.875rem;
  color: var(--on-surface-variant);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.regalo .acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.375rem;
}

/*
 * **Lo que su dueña señaló como lo que más quiere**, que es el dato que alguien
 * eligiendo un regalo quiere ver primero. Va en su propio renglón y no al lado
 * del título: ahí le comía el ancho y un nombre de producto entero se partía en
 * cuatro renglones.
 */
.mas-querido {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.125rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  background-color: var(--tertiary-fixed);
  color: var(--on-tertiary-fixed);
  font-size: 0.75rem;
  font-weight: 700;
}

.etiqueta {
  display: flex;
  height: 2.25rem;
  align-items: center;
  gap: 0.375rem;
  padding: 0 0.875rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 700;
}

.etiqueta-tomado {
  background-color: var(--ambar-fondo);
  color: var(--ambar-texto);
}

.etiqueta-recibido {
  background-color: var(--verde-fondo);
  color: var(--verde-texto);
}

/* ------------------------------------------------------------- Los carteles */

.aviso {
  margin: 0;
  padding: 2.5rem 1.5rem;
  border: 1px solid var(--outline-variant);
  border-radius: 1.5rem;
  background-color: var(--surface-lowest);
  text-align: center;
  color: var(--on-surface-variant);
}

.pie-de-marca {
  margin-top: 2.5rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--gris-texto);
}

.pie-de-marca b {
  font-family: var(--font-marca);
  font-weight: 700;
  color: var(--primary);
}

/* ------------------------------------------------------- El cartel de la app */

/*
 * **El `display` va sobre `[open]` y no sobre el elemento, y eso es load-bearing.**
 * Un `<dialog>` cerrado lo esconde el navegador con `display: none`; una regla de
 * acá que declare `display: flex` a secas le gana a esa, y entonces el cartel se
 * dibuja abierto desde que carga la página y `close()` no lo saca —el atributo
 * `open` desaparece, pero el CSS lo sigue mostrando—. Se ve como un cartel
 * trabado que no se puede cerrar con nada.
 */
.velo {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  border: 0;
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  background-color: rgb(0 32 32 / 0.72);
}

.velo[open] {
  display: flex;
}

.velo::backdrop {
  background-color: rgb(0 32 32 / 0.72);
}

.cartel {
  /* Posicionado porque la equis de cerrar cuelga de su esquina. */
  position: relative;
  width: 100%;
  max-width: 24rem;
  padding: 1.75rem;
  border-radius: 1.75rem;
  background-color: var(--surface-lowest);
  text-align: center;
}

/*
 * **Cerrar es una equis en la esquina y ya no un botón abajo**, en los dos
 * carteles. Decisión del usuario: «Ahora no» en gris al pie pesaba como una
 * tercera acción y competía con lo que el cartel viene a ofrecer.
 *
 * **Sigue habiendo dos formas más de cerrar que esto no reemplaza** —la tecla de
 * escape y tocar el fondo—: las trae el `<dialog>` y la segunda la agrega
 * `sitio.partes.dialogos`.
 */
.cerrar-cartel {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  /*
   * **Opaca y no transparente**, que es lo que se ve apenas el cuerpo se
   * desplaza: la equis se queda quieta y el formulario le pasa por debajo, así
   * que sin fondo propio quedaba un aspa encima del borde de un campo. Es el
   * color de la tarjeta, así que arriba de todo no se nota que es un disco.
   */
  background-color: var(--surface-lowest);
  color: var(--gris-texto);
  cursor: pointer;
}

.cerrar-cartel:hover {
  background-color: var(--surface-low);
  color: var(--on-surface);
}

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

.cartel h2 {
  margin: 1rem 0 0;
  font-family: var(--font-titulo);
  font-size: 1.5rem;
  line-height: 2rem;
}

.cartel p {
  margin: 0.75rem 0 0;
  color: var(--on-surface-variant);
}

.cartel .botones {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

/* --------------------------------------------------------------- El 404 */

.vacio {
  display: flex;
  min-height: calc(100dvh - 4rem);
  width: 100%;
  max-width: 28rem;
  margin: 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 1.5rem 4rem;
  text-align: center;
}

.vacio .icono {
  display: flex;
  width: 4rem;
  height: 4rem;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  background-color: var(--surface-high);
  color: var(--on-surface-variant);
}

.vacio h1 {
  margin: 1.5rem 0 0;
  font-family: var(--font-titulo);
  font-size: 1.875rem;
  line-height: 2.5rem;
}

.vacio p {
  margin: 0.75rem 0 0;
  color: var(--on-surface-variant);
}

/* ------------------------------------------------------------- La portada */

.hero {
  width: 100%;
  max-width: 48rem;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 6rem;
  text-align: center;
}

/*
 * **El titular va en Momo Trust Display y en peso normal.** La tipografía se
 * publica con un solo archivo, así que pedirle negrita no baja nada y deja que
 * el navegador la engorde a mano —la «negrita floja» que la app ya tuvo una
 * vez—. Lo que separa un título de un párrafo acá es su forma y su tamaño, no
 * su peso.
 */
.hero h1 {
  margin: 2rem 0 0;
  font-family: var(--font-titulo);
  font-size: 2.25rem;
  line-height: 1.1;
  text-wrap: balance;
}

.hero p {
  margin: 1.5rem auto 0;
  max-width: 36rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: var(--on-surface-variant);
  text-wrap: pretty;
}

/*
 * **El botón del titular es más grande que el de la barra**, y tiene que serlo:
 * es el que la página vino a ofrecer, y el de arriba lo acompaña.
 */
.hero .boton {
  height: 3.5rem;
  margin-top: 2.25rem;
  padding: 0 2.25rem;
  font-size: 1.125rem;
  font-weight: 700;
}

.seccion {
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 1.5rem 6rem;
  scroll-margin-top: 5rem;
}

.seccion h2 {
  margin: 0;
  font-family: var(--font-titulo);
  font-size: 1.875rem;
  line-height: 1.15;
  text-align: center;
  text-wrap: balance;
}

/*
 * **Una lista ordenada de verdad y no tres cajas sueltas**: el orden es el
 * contenido de esta sección, así que quien la escucha con un lector de pantalla
 * tiene que oír «1 de 3» sin depender del círculo, que es un dibujo.
 */
.pasos {
  display: grid;
  gap: 4rem 2rem;
  margin: 3.5rem 0 0;
  padding: 0;
  list-style: none;
}

.paso {
  text-align: center;
}

.paso .numero {
  display: flex;
  width: 3rem;
  height: 3rem;
  /* El aire entre la captura y su número: pegados, el círculo se lee como parte
     del teléfono y no como el rótulo del paso. */
  margin: 2rem auto 0;
  font-size: 1.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: var(--primary);
  color: var(--on-primary);
  font-family: var(--font-marca);
  font-weight: 700;
}

.paso h4 {
  margin: 1rem 0 0;
  font-size: 1.125rem;
  font-weight: 700;
}

/*
 * **Con ancho máximo también en el teléfono**, donde no hay columna que lo
 * recorte: sin esto el renglón cruza la pantalla entera y deja de tener el ancho
 * de lectura que tiene en escritorio.
 */
.paso p {
  margin: 0.5rem auto 0;
  max-width: 20rem;
  color: var(--on-surface-variant);
}

/*
 * **Se miden por el alto y no por el ancho, y ése es el punto.** Los tres
 * archivos vienen recortados a su figura y llevados todos a 820 de alto: puestos
 * a la misma altura de CSS salen del mismo tamaño, que es lo que se quiere. El
 * ancho de cada uno cambia de a pocos píxeles porque la sombra no bleedea igual,
 * así que fijarlo sería lo que los desiguala.
 */
.paso img,
.paso .hueco {
  display: block;
  width: auto;
  height: 20rem;
  margin: 1.5rem auto 0;
}

/* ------------------------------------------- «Descubre GiftMe» y su selector */

/*
 * **El título de esta sección es más grande que el de una sección cualquiera**,
 * porque no lo es: acá abajo está todo lo que el producto hace, partido en dos
 * mitades que el visitante elige. Sigue por debajo del titular —la portada tiene
 * una sola figura y es la de arriba—, así que queda en el escalón del medio.
 */
.descubrir {
  text-align: center;
}

.descubrir h2 {
  font-size: 2.25rem;
}

/*
 * **La bajada de la sección, más angosta que el título.** Es un párrafo de
 * lectura y no un titular, así que se corta antes: un renglón que cruza las 64rem
 * de la sección obliga a barrer la cabeza para volver al principio del siguiente.
 * `pretty` y no `balance` porque son tres renglones y no dos palabras — `balance`
 * los emparejaría a costa de dejarlos todos cortos.
 */
.bajada {
  margin: 1.25rem auto 0;
  max-width: 40rem;
  color: var(--on-surface-variant);
  text-wrap: pretty;
}

/*
 * **Los radios se esconden sin salirse del teclado.** `display: none` y
 * `visibility: hidden` los sacan del orden de tabulación, y ahí el selector deja
 * de existir para quien no usa el mouse; recortados a un píxel siguen recibiendo
 * el foco y siguen siendo lo que el lector de pantalla anuncia al recorrer el
 * grupo. Lo que se ve es la pastilla de al lado, que es su etiqueta.
 */
.interruptor {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/*
 * **Es una pastilla y no dos botones sueltos**: el carril exterior es lo que dice
 * que son dos caras de una misma cosa y que siempre hay una elegida.
 *
 * **El carril va en gris y no en el celeste de la marca.** Acá el color de marca
 * es la mitad elegida, y sobre un fondo verde claro esa pastilla compite con su
 * propio carril: los dos tiran del ojo y cuál está activa deja de leerse de un
 * vistazo. En gris, lo único con color de la sección es lo que está elegido.
 *
 * **Las dos mitades miden lo mismo y las columnas son iguales a propósito.** No
 * es estética: la pastilla que se desliza mide media pastilla, así que con
 * «Listas» más angosta que «Intercambios» tendría que cambiar de ancho mientras
 * viaja —y eso es lo que se ve como un rebote—. Con `1fr` manda la más larga y
 * la otra iguala.
 */
.pastilla {
  position: relative;
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem;
  margin: 2rem auto 0;
  padding: 0.25rem;
  border-radius: 9999px;
  background-color: var(--gris-fondo);
}

/*
 * **La pastilla elegida es un elemento propio que viaja, y no el fondo de cada
 * etiqueta.** Un `background-color` que se enciende de un lado y se apaga del
 * otro no se puede deslizar: son dos cajas distintas. Con una sola que se mueve,
 * el movimiento cuenta que es la misma cosa que cambió de lugar.
 *
 * Comparte celda con la primera etiqueta —las dos en `1 / 1`— así que la que
 * dibuja el ancho es la etiqueta, y esto la calca; el viaje es una columna más
 * el `gap`, que es exactamente lo que las separa.
 */
.indicador {
  grid-area: 1 / 1;
  /* Va por encima de las etiquetas —al revés de lo que parece— porque adentro
     lleva el calco que las reemplaza mientras las tapa. */
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 9999px;
  background-color: var(--primary);
  transition: transform 0.25s ease;
}

#ver-intercambios:checked ~ .pastilla .indicador {
  transform: translateX(calc(100% + 0.25rem));
}

/*
 * **El calco es la fila entera de rótulos en blanco, recortada por el
 * indicador.** Mide las dos columnas más el `gap` —o sea `200%` del indicador,
 * que es una— y se contra-mueve exactamente lo que el indicador avanza, así que
 * queda clavado sobre las etiquetas de verdad todo el viaje. Lo que se ve es
 * cada letra en blanco donde el verde llega y oscura donde todavía no.
 *
 * **Los dos traslados tienen que durar lo mismo**: si el calco llegara un
 * milisegundo después, el texto se despegaría de su propia sombra.
 */
.calco {
  /* **Va posicionado, y no es por dónde queda sino por lo que mide.** El calco
     tiene adentro los dos rótulos, así que en el flujo normal le prestaba su
     ancho a la columna que lo contiene: como las dos van iguales, esa mitad se
     duplicaba y el selector terminaba midiendo el doble de lo que su texto
     necesita. Fuera del flujo no cuenta para el tamaño de nadie, que es lo que
     lo deja del ancho de sus dos palabras. */
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem;
  width: calc(200% + 0.25rem);
  color: var(--on-primary);
  transition: transform 0.25s ease;
}

/*
 * El indicador avanza una columna más el `gap`. Sobre el calco eso es la mitad
 * de su ancho menos medio `gap`, que es de dónde sale este número: los dos
 * recorren la misma distancia en direcciones contrarias.
 */
#ver-intercambios:checked ~ .pastilla .calco {
  transform: translateX(calc(-50% - 0.125rem));
}

/*
 * **La misma caja para las dos capas, y tiene que serlo.** El calco se apoya
 * sobre las etiquetas de verdad al píxel: si acá se le cambiara el alto o el
 * costado a una sola, el texto blanco quedaría corrido del oscuro y se leería
 * doble. Lo único que no comparten es el color.
 */
.pastilla label,
.calco > span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  /* **El aire lateral es lo que decide el ancho de todo el selector**, porque el
     texto no se puede achicar: son dos palabras y las columnas van iguales. Con
     más, la pastilla se estira hasta parecer una barra de navegación; con menos,
     los rótulos se pegan al borde. */
  padding: 0 1.25rem;
  font-weight: 700;
  white-space: nowrap;
}

/*
 * **Las etiquetas de verdad no cambian nunca de color, y ahí está el truco.** El
 * blanco de la elegida no es esta capa: es el calco que el indicador lleva
 * encima. Encender el blanco acá volvería a poner el problema que el calco vino
 * a sacar —una palabra medio blanca sobre un fondo medio verde a mitad del
 * viaje—.
 */
.pastilla label {
  color: var(--on-surface-variant);
  cursor: pointer;
  transition: color 0.15s;
}

.pastilla label:nth-of-type(1) {
  grid-area: 1 / 1;
}

.pastilla label:nth-of-type(2) {
  grid-area: 1 / 2;
}

.pastilla label:hover {
  color: var(--on-surface);
}

/*
 * **El foco se dibuja sobre la etiqueta y no sobre el radio**, que está
 * recortado a un píxel y dejaría el anillo en un punto perdido de la esquina.
 * Va con `:focus-visible` para que tocar con el dedo no lo encienda.
 */
#ver-listas:focus-visible ~ .pastilla label[for="ver-listas"],
#ver-intercambios:focus-visible ~ .pastilla label[for="ver-intercambios"] {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/*
 * **Quien pidió menos movimiento no lo recibe.** El deslizamiento acá es un
 * adorno —cuál está elegida ya lo dice el color— así que apagarlo no le saca
 * nada a nadie, y dejarlo puesto le da náuseas a quien configuró el sistema
 * justamente para no verlo. Es la única animación del sitio, así que la regla
 * vive al lado de ella.
 */
/*
|--------------------------------------------------------------------------
| La sesión del navegador
|--------------------------------------------------------------------------
|
| Todo lo que sigue lo estrenó la tanda que dejó reservar desde el navegador:
| las cuatro pantallas con formulario —crear la cuenta, entrar y los dos pasos
| de recuperar la contraseña—, el estado de la sesión en el encabezado, y los
| dos estados de un regalo que antes no existían.
|
| **Hasta acá el sitio no tenía un solo campo de formulario**, así que nada de
| esto se pudo reusar: se escribió entero, a mano y sin paso de compilación,
| como el resto de la hoja. Los colores salen de los tokens de arriba y las dos
| únicas medidas propias son las de un campo, que se eligieron para que la
| altura coincida con la de `.boton` —2.75rem— y los dos se puedan poner en la
| misma fila sin que nada baile.
*/

/*
 * **Más angosto que el resto, y no es estética.** Un campo de formulario que
 * cruza 42rem obliga a barrer la pantalla de punta a punta entre el rótulo y lo
 * que se escribe. Es la medida contraria a `.contenido-ancho`, que existe para
 * la portada.
 */
.contenido-angosto {
  max-width: 27rem;
}

/*
 * La tarjeta que envuelve un formulario. **Mismo molde que el resto del sitio**
 * —blanca, borde de un píxel, esquinas grandes y sin sombra, que esta hoja no
 * usa en ninguna parte— por lo mismo que la de «Descubre GiftMe»: que se lea
 * como una cosa del sitio y no como una pantalla prestada.
 */
.tarjeta {
  padding: 2rem 1.5rem;
  border: 1px solid var(--outline-variant);
  border-radius: 1.5rem;
  background-color: var(--surface-lowest);
}

.titulo-de-form {
  margin: 0;
  font-family: var(--font-titulo);
  font-size: 1.625rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--on-surface);
}

.bajada-de-form {
  margin: 0.625rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--on-surface-variant);
}

.formulario {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.75rem;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.campo label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--on-surface);
}

/*
 * **`font: inherit` y no una familia escrita de nuevo.** Sin esa línea el
 * navegador le pone su fuente de formulario a los campos y quedan en otra
 * tipografía que el resto de la página, que es de las cosas que se ven de
 * inmediato y cuestan un rato encontrar.
 *
 * **Y `font-size: 1rem` como mínimo**: Safari en iPhone hace zoom solo al
 * enfocar un campo que mide menos de 16 píxeles, y de ahí no vuelve.
 */
.campo input {
  height: 2.75rem;
  width: 100%;
  padding: 0 0.875rem;
  border: 1px solid var(--gris-borde);
  border-radius: 0.875rem;
  background-color: var(--surface-lowest);
  font-family: inherit;
  font-size: 1rem;
  color: var(--on-surface);
}

/*
 * **El anillo de foco es de la marca y no el azul del navegador.** Se notó
 * cuando el cartel de la app pasó a abrirse solo: `showModal()` le da el foco al
 * primer botón, así que el azul de fábrica queda dibujado en el medio de un
 * cartel verde apenas se abre. Va sobre todos los botones y no solo sobre ése:
 * el mismo azul salía al recorrer la página con el teclado, y ahí nadie lo había
 * mirado.
 */
.boton:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.campo input:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  border-color: var(--primary);
}

/*
 * El ojito para mostrar la contraseña.
 *
 * **Va encima del campo y no al lado**: en una fila con el campo, los seis
 * cuadros del código y este botón tendrían que repartirse el ancho de un
 * teléfono, y el campo perdería justo donde se escribe.
 */
.campo-con-ojo {
  position: relative;
}

/* El hueco que le deja el botón, para que el texto no le pase por debajo. */
.campo-con-ojo input {
  padding-right: 3rem;
}

.ojo {
  position: absolute;
  top: 50%;
  right: 0.375rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: none;
  color: var(--gris-texto);
  cursor: pointer;
}

.ojo:hover {
  color: var(--on-surface);
}

/*
 * **Cuál de los dos ojos se dibuja, a partir del estado que el botón declara.**
 *
 * El primer intento los cambiaba poniéndoles `hidden` desde el guion y **no
 * funcionó**: `hidden` no surte efecto dentro de un `<svg>` —sí en el `<button>`,
 * que por eso nace escondido así— y quedaban los dos dibujados uno al lado del
 * otro. Lo encontró una captura y ninguna prueba.
 *
 * Colgado de `aria-pressed`, además, el ícono no puede contradecir al estado:
 * son el mismo dato leído una vez.
 */
.ojo [data-visible] {
  display: none;
}

.ojo[aria-pressed='true'] [data-visible] {
  display: block;
}

.ojo[aria-pressed='true'] [data-escondido] {
  display: none;
}

/*
 * **Se ve aunque el botón esté fuera del recorrido con el teclado.** Lleva
 * `tabindex="-1"` —quien tabula desde la contraseña va al campo siguiente, no a
 * un botón que solo cambia cómo se ve lo que ya escribió— pero se puede llegar
 * con el puntero, y ahí el anillo dice cuál está tocado.
 */
.ojo:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

/*
 * **El campo que falló se marca por el borde y no solo por el texto de abajo.**
 * Con cuatro campos y un mensaje al pie de uno, la mirada tiene que recorrerlos
 * para encontrar cuál era.
 */
.campo input[aria-invalid='true'] {
  border-color: var(--rojo-texto);
}

.campo .error {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--rojo-texto);
}

.campo .ayuda,
.ayuda {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--on-surface-variant);
}

/* El botón que cierra un formulario ocupa el ancho: no compite con nada. */
.boton-ancho {
  width: 100%;
  margin-top: 0.5rem;
}

/*
 * La otra puerta, debajo del formulario. **Es un renglón y no una pestaña**:
 * quien abre el enlace de un regalo casi nunca tiene cuenta todavía, así que
 * una de las dos es la que corresponde por omisión y la otra es la salida.
 */
.alternativa {
  margin: 1.25rem 0 0;
  text-align: center;
  font-size: 0.875rem;
  color: var(--on-surface-variant);
}

.alternativa a {
  color: var(--primary);
  font-weight: 700;
}

/*
 * **Lo que salió mal, arriba de la página a la que se volvió.** Reusa `.aviso`
 * —el mismo cartel que dice que una lista está vacía— y solo le cambia los
 * colores y el aire: es un mensaje y no una sección, así que no necesita los
 * 2.5rem de relleno del otro.
 */
/*
 * **La forma de un mensaje, que no es la de una sección.**
 *
 * `.aviso` nació como el cartel de «esta lista está vacía»: un panel centrado
 * con 2.5rem de relleno y sin margen, porque es lo único que hay en la página.
 * Los mensajes que dejó una petición anterior lo reusan, y con esa forma quedan
 * altos y pegados a lo que sigue: en la lista, «Soltaste tal regalo» aterrizaba
 * encima de «La lista de Ana Giménez» sin nada en el medio.
 *
 * **Va acá y no en cada variante** porque el rojo ya lo tenía y el neutro no,
 * que es exactamente la clase de diferencia que nadie decidió: los dos son lo
 * mismo —algo que pasó y se cuenta— y tienen que verse hermanos.
 */
.aviso-de-paso {
  margin-bottom: 2rem;
  padding: 1rem 1.25rem;
  text-align: left;
}

/* Y el rojo solo cambia el color, que es lo único suyo. */
.aviso-malo {
  border-color: color-mix(in srgb, var(--rojo-texto) 30%, transparent);
  background-color: var(--rojo-fondo);
  color: var(--rojo-texto);
  font-weight: 700;
}

/*
 * **El regalo que tomó quien mira.** Verde como «ya se lo regalaron» —las dos
 * son buenas noticias— pero con su propio nombre: aquella dice que la historia
 * terminó y ésta que hay algo que esa persona todavía tiene que comprar.
 */
.etiqueta-mia {
  background-color: var(--verde-fondo);
  color: var(--verde-texto);
}

/*
 * **Por qué no hay botón cuando se acabó el cupo.** Es una explicación y no un
 * estado del regalo, así que va sin fondo de color: pintarla como las otras dos
 * diría que a ese regalo le pasó algo, y no le pasó nada.
 */
.etiqueta-sin-cupo {
  padding: 0;
  height: auto;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--on-surface-variant);
}

/*
 * **`display: contents` para que el formulario no sea una caja.** `.acciones` es
 * una fila flexible y sus hijos son la etiqueta y los botones; envolviendo un
 * botón en un `<form>`, ese formulario pasaba a ser el hijo y el botón dejaba de
 * alinearse con lo que tiene al lado. Con esto el formulario deja de dibujar
 * caja y el botón vuelve a ser hijo de la fila —sigue mandándose igual—.
 */
.regalo .acciones form {
  display: contents;
}

/*
 * El modal de crear la cuenta o entrar.
 *
 * **Hereda `.cartel` y le cambia tres cosas**, que son las tres que separan un
 * cartel de aviso de uno con formulario: se alinea a la izquierda —los rótulos
 * de un campo no se centran—, se ensancha un poco, y **se deja desplazar**.
 */
.cartel-de-cuenta {
  max-width: 26rem;
  text-align: left;
  /*
   * **Lo que sostiene el modal en un teléfono.** Cuatro campos con el teclado
   * abierto no entran en la pantalla, y un diálogo centrado que no se desplaza
   * deja el botón de mandar afuera y sin forma de llegar. `dvh` y no `vh`
   * porque en Safari de iPhone `vh` cuenta la barra de direcciones que se
   * esconde, así que mide de más justo donde importa.
   */
  max-height: 85dvh;
  display: flex;
  flex-direction: column;
}

/*
 * **El que se desplaza es el cuerpo y no la tarjeta**, y esa es la razón por la
 * que existe este envoltorio. Con el desplazamiento arriba, la equis —que cuelga
 * de la esquina de la tarjeta— se iba de la pantalla al bajar hasta el botón de
 * mandar: quedaba un cartel sin salida visible justo en el aparato donde el
 * formulario no entra de una.
 */
.cartel-de-cuenta .cartel-cuerpo {
  overflow-y: auto;
  /*
   * **Para que un campo enfocado no quede pegado al borde.** El navegador
   * desplaza solo hasta lo que enfoca —al rechazar un campo vacío, y en un
   * teléfono también al abrir el teclado—, y sin este respiro el rótulo del
   * campo queda cortado contra el filo del recuadro.
   */
  scroll-padding: 1rem 0;
}

.cartel-de-cuenta h2 {
  margin: 0;
  text-align: left;
  /* Que un título largo no se meta abajo de la equis. Son sus 2.25rem más el
     aire que la separa del borde: menos que eso y el renglón la roza. */
  padding-right: 2.75rem;
}

.cartel-de-cuenta .bajada-de-form,
.cartel-de-cuenta .alternativa {
  text-align: left;
}

/*
 * El código de seis dígitos, en seis cuadros.
 *
 * **Son seis campos de verdad**, así que esto solo los pone en fila y les da
 * forma de casilla: el dígito está centrado en su caja porque la caja **es** su
 * campo, y no porque un `letter-spacing` lo haya dejado caer ahí.
 */
.digitos {
  display: flex;
  gap: 0.5rem;
}

.digitos input {
  /*
   * `min-width: 0` con `flex: 1` es lo que hace que los seis se repartan el
   * ancho: sin eso un `input` no baja de su ancho natural —unas veinte letras—
   * y la fila se sale de la tarjeta en un teléfono.
   */
  flex: 1;
  min-width: 0;
  height: 3rem;
  padding: 0;
  border: 1px solid var(--gris-borde);
  border-radius: 0.75rem;
  background-color: var(--surface-lowest);
  font-family: inherit;
  /* 1.25rem y no más: seis cuadros con el ancho de una pantalla chica no dan
     para una letra más grande sin que el recuadro se deforme. */
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
  color: var(--on-surface);
}

.digitos input:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  border-color: var(--primary);
}

.digitos input[aria-invalid='true'] {
  border-color: var(--rojo-texto);
}

/*
 * **El rótulo de los seis es un párrafo y no un `<label>`**: un `for` apunta a
 * un campo y acá son seis. Se ve igual que los demás rótulos a propósito.
 */
.rotulo-de-campo {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--on-surface);
}

/*
 * **Los dos formularios se cambian con radios y `:checked ~`**, el mismo
 * mecanismo que la portada y por la misma razón: sin paso de compilación, y
 * funcionando antes de que cargue nada. Los radios van escondidos con
 * `.interruptor`, que ya existía.
 */
.panel-cuenta {
  display: none;
}

#modo-registro:checked ~ .panel-cuenta-registro,
#modo-ingreso:checked ~ .panel-cuenta-ingreso,
#modo-recuperar:checked ~ .panel-cuenta-recuperar,
#modo-codigo:checked ~ .panel-cuenta-codigo {
  display: block;
}

/*
 * El que cambia de panel es un `<label>` y no un enlace, así que hay que
 * devolverle lo que un enlace trae solo.
 */
.cartel-de-cuenta .alternativa label {
  color: var(--primary);
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/*
 * **El foco se ve aunque el radio esté escondido.** Sin esto, quien recorre el
 * diálogo con el teclado llega al que cambia de panel y no hay ninguna señal de
 * dónde está parado.
 */
.interruptor:focus-visible + .interruptor + .panel-cuenta label,
.cartel-de-cuenta .alternativa label:hover {
  color: var(--on-surface);
}

/*
 * Quién está adentro, en el encabezado. **Ocupa el lugar de «Probar Gratis»**:
 * ofrecerle probar el producto a quien ya tiene la sesión abierta es ruido.
 */
.sesion {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}

.sesion .quien {
  max-width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--on-surface);
}

/*
 * **Salir es un botón de formulario disfrazado de enlace.** Tiene que ir por
 * `POST` —cierra una sesión— pero no puede pesar como el botón principal de la
 * barra: lo que se ofrece arriba no es irse.
 */
.sesion .salir {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--gris-texto);
  cursor: pointer;
  text-decoration: underline;
}

.sesion .salir:hover {
  color: var(--on-surface);
}

@media (prefers-reduced-motion: reduce) {
  .indicador,
  .calco {
    transition: none;
  }
}

/*
 * **El panel que no está elegido no se dibuja, y no es que se esconda a medias.**
 * Con `visibility` o una opacidad en cero sus tres capturas se seguirían
 * descargando y sus encabezados seguirían leyéndose en un lector de pantalla,
 * que es lo mismo que dejar las dos mitades puestas a la vez.
 */
/*
 * **El panel es una tarjeta y no contenido suelto sobre el fondo**, y ése es su
 * trabajo acá: lo que el selector elige tiene que verse como una cosa que
 * cambió, no como una página que se reescribió sola. El borde dibuja hasta dónde
 * llega lo que la pastilla de arriba manda.
 *
 * Es el mismo molde de tarjeta que el resto del sitio —blanco sobre el fondo,
 * borde de un píxel y esquinas grandes, sin sombra—: el sitio no usa `box-shadow`
 * en ninguna parte y una acá sería el único bloque que flota.
 */
.panel {
  display: none;
  margin-top: 2.5rem;
  padding: 2rem 1.5rem;
  border: 1px solid color-mix(in srgb, var(--gris-borde) 60%, transparent);
  border-radius: 1.75rem;
  background-color: var(--surface-lowest);
}

#ver-listas:checked ~ .panel-listas,
#ver-intercambios:checked ~ .panel-intercambios {
  display: block;
}

/*
 * **El rótulo del panel es un renglón y no un segundo título.** «Tres pasos y
 * listo» dice de qué van los tres dibujos de abajo; competir en tamaño con
 * «Descubre GiftMe» dejaría la sección con dos figuras.
 */
.panel h3 {
  margin: 0;
  font-family: var(--font-titulo);
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 400;
  text-wrap: balance;
}

.panel .pasos {
  margin-top: 3rem;
}

/*
 * **El hueco de una captura que todavía no está.** Se dibuja con la silueta del
 * teléfono y no se saltea: sin él los pasos de ese panel subirían hasta el
 * rótulo y la sección se vería armada distinto según qué mitad esté elegida.
 * Cuando la captura llegue ocupa exactamente este lugar.
 */
.paso .hueco {
  aspect-ratio: 401 / 820;
  border: 2px dashed var(--gris-borde);
  border-radius: 1.75rem;
  background-color: var(--gris-fondo);
}

/* --------------------------------------------------------------- El pie */

/*
 * **Separado por una línea y no por un fondo distinto.** El sitio entero está
 * sobre `--surface`, y un pie con su propio color sería el único bloque de la
 * página que cambia de fondo sin cambiar de tema.
 */
.pie {
  border-top: 1px solid color-mix(in srgb, var(--outline-variant) 60%, transparent);
  margin-top: 4rem;
}

/*
 * **El mismo ancho y el mismo margen lateral que el encabezado** —64rem y 1rem—:
 * lo de arriba y lo de abajo tienen que alinearse con el contenido del medio.
 *
 * En el teléfono va en una columna centrada; a partir de 640 se abre en fila,
 * con los enlaces a la derecha y la marca a la izquierda.
 */
.pie > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding: 2rem 1rem;
  text-align: center;
}

.pie .marca span {
  font-size: 1.125rem;
}

.enlaces-del-pie {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
}

.enlaces-del-pie a {
  color: var(--on-surface-variant);
  text-decoration: none;
}

.enlaces-del-pie a:hover {
  color: var(--primary);
  text-decoration: underline;
}

.derechos {
  margin: 0;
  font-size: 0.875rem;
  color: var(--gris-texto);
}

@media (min-width: 640px) {
  .pie > div {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }

  /* Los enlaces al medio y los derechos a la derecha, para que la marca y el
     año queden en los dos extremos, como el encabezado. */
  .enlaces-del-pie {
    order: 1;
  }

  .derechos {
    order: 2;
  }

  .contenido {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .encabezado > div {
    padding: 0 1.5rem;
  }

  .texto h1 {
    font-size: 2.5rem;
  }

  .hero {
    padding-top: 5rem;
  }

  /* El salto de verdad del titular: es lo que lo vuelve la figura de la
     pantalla en vez de un renglón grande. */
  .hero h1 {
    font-size: 3.75rem;
  }

  .hero p {
    font-size: 1.25rem;
    line-height: 2rem;
  }

  .seccion h2 {
    font-size: 2.25rem;
  }

  /* Sube con la sección, y por lo mismo: acá abajo está todo lo que el producto
     hace. La regla de arriba tiene la misma especificidad y viene después, así
     que sin repetirlo el título de «Descubre GiftMe» se quedaría en el tamaño de
     una sección cualquiera. */
  .descubrir h2 {
    font-size: 3rem;
  }

  .bajada {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .panel h3 {
    font-size: 1.875rem;
  }

  .panel {
    padding: 3rem;
  }

  .titulo-de-lista {
    font-size: 2.25rem;
  }

  .regalo .foto {
    width: 6rem;
    height: 6rem;
  }

  .pasos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .paso img,
  .paso .hueco {
    height: 24rem;
  }

  .cartel .botones {
    flex-direction: row;
    justify-content: center;
  }
}

@media (min-width: 768px) {
  .secciones {
    display: flex;
  }
}