/* =====================================================================
   regalos.css — capa fina sobre Bulma

   Bulma pone los componentes (field, control, button, card, grid, level,
   modal) y el tema de la campaña le inyecta la paleta por sus variables
   `--bulma-primary-*`, así que aquí NO se reimplementa nada de eso.

   Esta hoja solo aporta tres cosas:
     1. Montserrat servida local, que es la tipografía de lineaestetica.co.
     2. El amarillo #f0ec4d, que en la tienda marca las ofertas y el hover
        de los botones. Bulma no tiene ese concepto.
     3. El alto completo de la pantalla y el catálogo con desplazamiento
        propio, que es una decisión de esta vista y no un componente.
   ===================================================================== */

/* Poppins es la tipografía de la columna explicativa: Black para los titulares
   y Bold para todo lo demás, que es lo que trae la pieza de diseño. Se sirven
   locales, subset latino, porque la CSP del sitio es `font-src 'self'` — desde
   Google Fonts no cargarían y el navegador caería al system-ui sin avisar. */
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins-900.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/assets/fonts/montserrat.woff2') format('woff2');
  font-weight: 100 900;          /* fuente variable: un archivo, todos los pesos */
  font-style: normal;
  font-display: swap;
}

.regalos {
  --rg-amarillo: #f0ec4d;
  --rg-morado:   var(--c-primario, #9165cc);
  --rg-hondo:    var(--c-primario-oscuro, #422765);
  --rg-tinte:    var(--c-fondo-alt, #f4eeff);
  --rg-tinte-2:  #e0d3fb;
  --rg-linea:    var(--c-borde, #e7dcfb);
  --rg-suave:    var(--c-texto-suave, #6f6580);

  font-family: 'Montserrat', system-ui, sans-serif;
  overflow-x: hidden;
}

/* El hover amarillo es la interacción propia de la tienda; Bulma por sí sola
   solo oscurece el botón. */
.regalos .button.is-primary:hover:not([disabled]) {
  background-color: var(--rg-amarillo);
  color: var(--rg-hondo);
}
.regalos .button.is-primary.is-outlined:hover:not([disabled]) {
  background-color: var(--rg-amarillo);
  border-color: var(--rg-amarillo);
  color: var(--rg-hondo);
}

/* ─────────── Barra superior ─────────── */
.rg-barra {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .6rem 1.4rem;
  background: #fff; border-bottom: 1px solid var(--rg-linea);
}
.rg-marca { display: flex; align-items: center; color: var(--rg-hondo); font-weight: 700; }
.rg-marca img { max-height: 34px; width: auto; display: block; }
.rg-contador { text-decoration: none; }

/* ═════════════ Pantalla única ═════════════ */
.rg-app { display: grid; grid-template-columns: 1fr; min-height: calc(100dvh - 3.2rem); }
@media (min-width: 62rem) {
  /* La columna explicativa pesa menos que la herramienta. */
  .rg-app { grid-template-columns: minmax(15rem, .62fr) 1.6fr; height: calc(100dvh - 3.2rem); }
}

.rg-col-izq {
  /* Los colores salen medidos de las propias piezas gráficas, no a ojo: el
     morado es el del trazo de la ilustración y los rosas los del lockup, así
     que el texto y los números son literalmente los mismos tonos que el dibujo. */
  --rg-trazo:      #522d6e;
  --rg-rosa:       #e95a7f;
  --rg-rosa-suave: #ef98ac;

  position: relative; overflow: hidden auto;
  /* Cuatro piezas apiladas y centradas horizontalmente. Se alinean arriba
     —no al centro— porque con el lockup añadido el contenido llena la columna:
     centrar aquí solo sirve para que en una pantalla baja se recorte por
     arriba, que es justo la parte que no se puede perder. */
  display: grid;
  grid-template-rows: auto auto auto auto;
  justify-items: center;
  /* `safe center` centra el grupo cuando sobra alto y se comporta como `start`
     cuando no cabe. El `center` a secas desborda por los dos lados a la vez, y
     con `overflow` el scroll no llega al principio: el logo quedaría cortado
     y fuera de alcance en una pantalla baja. */
  align-content: safe center;
  gap: clamp(.6rem, 2.5vh, 1.9rem);
  padding: clamp(1rem, 3vh, 2.2rem) 1.5rem clamp(1rem, 2.5vh, 1.6rem);
  border-right: 1px solid var(--rg-linea);

  font-family: 'Poppins', 'Montserrat', system-ui, sans-serif;
  font-weight: 700;
  color: var(--rg-trazo);

  /* El degradado va DEBAJO de la foto y con sus mismos colores, muestreados
     del JPG. Si la columna queda más alta que la imagen, o la imagen no carga,
     el fondo sigue siendo el correcto en vez de un hueco blanco. */
  background:
    url('/assets/img/fondo-.jpg') no-repeat center top / cover,
    linear-gradient(180deg, #e4c6ed 0%, #ddc5e2 15%, #e0d4d8 45%, #f0e6e5 100%);
}

/* Las tres piezas gráficas. Miden en `clamp` con `vh` para que en una pantalla
   baja encojan ellas antes que apretarse el texto: el lockup y la estrellita
   se leen igual un 20% más pequeños, los pasos no. */
.rg-izq-logo        { display: block; width: clamp(140px, 58%, 235px); height: auto; }
/* El h1 solo envuelve al lockup: se le quitan el margen y el tamaño que le
   pone la hoja base, o abriría un hueco donde no hay texto que sostenerlo.
   Va a ancho completo y la imagen se centra con márgenes automáticos. Sin las
   dos cosas el h1 se dimensionaba a su contenido, el `%` de la imagen se
   resolvía contra ese ancho en vez de contra la columna, y la imagen quedaba
   pegada al borde izquierdo del h1: 43 px descentrada respecto al resto. */
.rg-izq-lockup-h1   { width: 100%; margin: 0; font-size: 0; line-height: 0; }
.rg-izq-lockup      { display: block; width: clamp(155px, 76%, 272px); height: auto; margin-inline: auto; }
.rg-izq-ilustracion { display: block; width: clamp(125px, 64%, 235px); height: auto; }

.rg-izq-caja { position: relative; z-index: 1; width: 100%; max-width: 21rem; }

/* Titulares blancos con contorno morado, como en la pieza.
   `paint-order: stroke fill` manda el trazo por detrás del relleno. Sin eso el
   contorno se pinta centrado sobre el borde de la letra y se come la mitad del
   grosor hacia dentro, dejando la tipografía escuálida justo donde se quería
   contundente. */
.rg-izq-titulo,
.rg-despues-titulo {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .022em;
  line-height: 1.1;
  color: #fff;
  -webkit-text-stroke: .105em var(--rg-trazo);
  paint-order: stroke fill;
  text-align: center;
  margin: 0 0 clamp(.5rem, 1.5vh, .9rem) !important;
}
.rg-izq-titulo     { font-size: clamp(1.1rem, 2.5vh, 1.55rem); }
.rg-despues-titulo { font-size: clamp(.92rem, 2.1vh, 1.25rem); }

.rg-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(.4rem, 1.3vh, .85rem); }
.rg-pasos li { display: flex; align-items: center; gap: .7rem; }
.rg-pasos p { margin: 0; font-size: clamp(.75rem, 1.55vh, .88rem); line-height: 1.4; }

/* El número es un círculo rosa relleno, no un tag de Bulma: se sobreescriben
   forma, color y peso. Vale igual para el marcador gemelo de la columna de la
   derecha —el que va sobre cada sección del formulario—, porque los dos son el
   mismo paso y con colores distintos se dejarían de leer como pareja. */
.rg-paso-n {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem; padding: 0; border-radius: 50%;
  background-color: var(--rg-rosa-suave, #ef98ac);
  color: #fff;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 900; font-size: .82rem; line-height: 1;
}
.rg-paso-marca { width: 1.4rem; height: 1.4rem; font-size: .72rem; margin-right: .45rem; vertical-align: middle; }

.rg-despues {
  margin-top: clamp(.7rem, 2vh, 1.3rem);
  padding-top: clamp(.6rem, 1.8vh, 1.1rem);
  border-top: 1px solid rgba(82, 45, 110, .3);
}
.rg-despues-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(.3rem, 1vh, .55rem); }
/* Sangría francesa con el punto en posición absoluta, NO flex.
   Con `display:flex` cada trozo de texto suelto y cada <strong> se vuelven
   ítems independientes, y al envolver la línea se descolocan entre sí: la
   frase «Le hacemos llegar tu WhatsApp o correo» salía con las palabras en
   desorden. En flujo normal el texto enriquecido se comporta como texto. */
.rg-despues-lista li {
  position: relative; padding-left: 1rem;
  font-size: clamp(.73rem, 1.5vh, .85rem); line-height: 1.45;
  color: var(--rg-trazo);
}
.rg-despues-lista li::before {
  content: "•"; position: absolute; left: .1rem; top: 0;
  color: var(--rg-trazo);
}
.rg-despues-lista strong { font-weight: 900; color: inherit; }

/* ─────────── Columna de trabajo ─────────── */
.rg-col-der { display: flex; flex-direction: column; min-height: 0; padding: 1.1rem 1.5rem 0; }

.rg-tarjeta { flex: none; margin-bottom: .9rem; padding: .9rem 1rem; }
.rg-tarjeta-linea { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem .8rem; }
.rg-tarjeta-linea > .rg-paso-marca { margin-bottom: .55rem; }
.rg-tarjeta-campo { flex: 1 1 11rem; min-width: 0; margin-bottom: 0 !important; }

/* ─────────── Lista abierta (amigo secreto) ─────────── */
/* ─────────── Pantalla de gracias ───────────
   Sustituye a la herramienta cuando el ciclo termina: no es un paso más, es lo
   que queda cuando ya cumplió. Por eso ocupa la pantalla y no vive dentro del
   modal, que se cierra. */
.rg-gracias {
  min-height: calc(100dvh - 3.2rem);
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(1.2rem, 5vh, 3rem) 1rem 3rem;
  background:
    url('/assets/img/fondo-.jpg') no-repeat center top / cover,
    linear-gradient(180deg, #e4c6ed 0%, #ddc5e2 15%, #e0d4d8 45%, #f0e6e5 100%);
}
.rg-gracias-caja {
  width: 100%; max-width: 30rem;
  background: #fff; border-radius: 18px;
  padding: clamp(1.2rem, 4vw, 2rem);
  box-shadow: 0 6px 26px rgba(31, 27, 36, .12);
  text-align: center;
}
.rg-gracias-img { width: 210px; max-width: 62%; height: auto; display: block; margin: 0 auto .4rem; }
.rg-gracias-titulo {
  margin: 0 0 .5rem; font-size: 1.5rem; font-weight: 800; color: var(--rg-hondo);
}
/* Son dos párrafos: el primero respira poco, el último abre paso al bloque
   del enlace. */
.rg-gracias-texto {
  margin: 0 0 .7rem; font-size: .9rem; line-height: 1.55; color: var(--rg-suave);
}
.rg-gracias-texto:last-of-type { margin-bottom: 1.4rem; }
.rg-gracias-bloque {
  text-align: left;
  background: var(--rg-tinte);
  border: 1px solid var(--rg-linea);
  border-radius: 12px;
  padding: .85rem .9rem .65rem;
  margin-bottom: .9rem;
}
.rg-gracias-recomendar { background: #fff; border-style: dashed; }
.rg-gracias-recomendar-txt {
  margin: 0 0 .7rem; font-size: .85rem; line-height: 1.5; color: var(--rg-hondo);
}
.rg-gracias-nueva { width: 100%; border-radius: 999px; margin-top: .3rem; }

/* ─────────── Lista abierta (amigo secreto) ─────────── */
/* El desplegable y el campo, en la misma línea: la decisión y su consecuencia
   se leen juntas. La columna del destinatario pesa más porque lleva dos
   controles donde la de «Soy» lleva uno. */
.rg-tarjeta-campo-de { flex: 1.7 1 18rem; }

.rg-de-fila { display: flex; align-items: stretch; gap: .5rem; }
.rg-de-select { flex: 0 0 auto; }
.rg-de-select select { height: 100%; }
.rg-de-campo { flex: 1 1 8rem; min-width: 0; }

/* Deshabilitado se ve apagado, no roto: sigue ahí, simplemente no aplica. */
.rg-de-campo .input:disabled {
  background: var(--rg-tinte); border-style: dashed; color: var(--rg-suave);
  cursor: not-allowed;
}


.rg-flecha { color: var(--rg-morado); font-size: 1.1rem; font-weight: 700; padding-bottom: .5rem; }

/* ─────────── Catálogo ─────────── */
.rg-catalogo-caja { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.rg-catalogo-top { flex: none; }
.rg-h2 { color: var(--rg-hondo); margin-bottom: .1rem !important; }
.rg-sub { margin-bottom: .6rem !important; }
.rg-filtros { margin-bottom: .7rem !important; }

/* El catálogo se desplaza dentro de su caja para que el contador y el botón
   de abajo queden siempre a la vista. */
.rg-rejilla {
  flex: 1; min-height: 0; overflow-y: auto; align-content: start;
  padding: .1rem .4rem .5rem 0;
  --bulma-grid-gap: .6rem;
}

.rg-producto { height: 100%; display: flex; flex-direction: column; box-shadow: none; border: 1px solid var(--rg-tinte-2); }
.rg-producto:hover { border-color: var(--rg-morado); box-shadow: 0 3px 12px rgba(66,39,101,.09); }
/* Fondo blanco: las fotos de la tienda vienen recortadas sobre blanco y
   cualquier tinte detrás se nota como un halo alrededor del producto. */
.rg-producto-img { position: relative; aspect-ratio: 5 / 4; overflow: hidden; background: #fff; }
.rg-producto-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.rg-producto-cuerpo { padding: .5rem !important; display: flex; flex-direction: column; gap: .15rem; flex: 1; }
.rg-producto-cuerpo h3 {
  font-size: .71rem; font-weight: 600; line-height: 1.3; margin: 0;
  /* Dos líneas: con nombres largos las tarjetas quedaban de alturas distintas. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rg-marca-txt { font-size: .58rem !important; margin: 0 !important; color: var(--rg-suave); }
.rg-precio { font-size: .84rem; font-weight: 800; color: var(--rg-hondo); margin: 0 0 .35rem; }
.rg-precio s { font-weight: 500; font-size: .78em; color: var(--rg-suave); margin-left: .3rem; }
.rg-producto-cuerpo .button { margin-top: auto; }

/* La etiqueta de oferta usa el amarillo de la tienda, igual que allá. */
.rg-etiqueta {
  position: absolute; top: .35rem; left: .35rem;
  background: var(--rg-amarillo); color: var(--rg-hondo);
  font-size: .58rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  height: auto; padding: .15rem .45rem;
}

.rg-paginacion { flex: none; margin-bottom: 0 !important; padding: .2rem 0; }
.rg-barra-inferior {
  flex: none; margin-bottom: 0 !important;
  padding: .7rem 0 .9rem; border-top: 1px solid var(--rg-linea); background: #fff;
}
.rg-conteo { margin: 0; font-size: .82rem; color: var(--rg-suave); }
.rg-conteo strong { color: var(--rg-hondo); font-size: 1.2rem; margin-right: .15rem; }

/* ─────────── Modal ─────────── */
.rg-modal-caja { max-width: 30rem; }
.rg-grupo-titulo { color: var(--rg-morado); margin: 1rem 0 .5rem !important; }
.rg-grupo-titulo:first-child { margin-top: 0 !important; }
.rg-envio-opciones { display: grid; gap: .55rem; margin-bottom: 1rem; }
.rg-boton-whatsapp { background-color: #25D366; color: #06301a; border-color: #25D366; font-weight: 700; }
.rg-boton-whatsapp:hover { background-color: #1fb757; color: #06301a; border-color: #1fb757; }

/* ─────────── Aviso flotante ─────────── */
.rg-aviso-flotante {
  position: fixed; left: 50%; bottom: 1.3rem; transform: translateX(-50%);
  z-index: 70; width: auto; padding: .6rem 1.3rem !important;
  font-size: .84rem; font-weight: 600;
  box-shadow: 0 8px 22px rgba(43,35,56,.28);
}
.rg-aviso-flotante[hidden] { display: none; }

/* ═════════════ Vista del destinatario ═════════════ */
.rg-ver { max-width: 66rem; margin: 0 auto; padding: 2rem 1.4rem 3.5rem; }
.rg-ver-cabecera { text-align: center; max-width: 34rem; margin: 0 auto 2rem; }
.rg-ver-ocasion { color: var(--rg-morado); margin-bottom: .4rem; }
.rg-ver-cabecera h1 { color: var(--rg-hondo); }
.rg-ver-mensaje {
  background: var(--rg-tinte); border-radius: 10px;
  padding: 1rem 1.2rem; margin: 0 0 1rem; font-size: .92rem; line-height: 1.6; text-align: left;
}
.rg-ver-ayuda, .rg-ver-pie { font-size: .82rem; color: var(--rg-suave); }
.rg-ver-pie { text-align: center; margin-top: 2rem; }
/* La rejilla de la lista recibida no vive dentro de una caja con scroll
   propio como la del catálogo: crece con la página. */
.rg-ver .rg-rejilla { overflow: visible; min-height: 0; padding: 0; }
.rg-ver .rg-producto-cuerpo h3 {
  font-size: .8rem; font-weight: 600; line-height: 1.35; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rg-ver .rg-precio { font-size: .95rem; margin-bottom: .5rem; }
.rg-ver .rg-producto-img { aspect-ratio: 1; }

/* La etiqueta del favorito sí lleva el morado y no el amarillo de oferta:
   son dos cosas distintas y no deben confundirse. */
.rg-etiqueta-favorito { background: var(--rg-morado); color: #fff; }

.rg-producto.is-tomado { opacity: .55; }
.rg-producto.is-mia { border-color: #25D366; box-shadow: 0 0 0 1.5px #25D366; }
.rg-velo {
  position: absolute; inset: auto 0 0 0;
  background: rgba(43,35,56,.86); color: #fff;
  font-size: .7rem; font-weight: 700; text-align: center; padding: .35rem .3rem;
}
.rg-tomado-nota { font-size: .7rem; color: var(--rg-suave); margin: auto 0 0; }
.rg-mia-acciones { display: grid; gap: .25rem; margin-top: auto; }
.rg-vacio { grid-column: 1 / -1; text-align: center; color: var(--rg-suave); padding: 2rem 0; font-size: .88rem; }

/* ─────────── Pie ─────────── */
.rg-pie {
  background: var(--c-pie-fondo, #9164cc); color: #fff;
  text-align: center; padding: 1.5rem 1.4rem; font-size: .82rem;
}
.rg-pie p { margin: 0 0 .2rem; }
.rg-pie-logo { display: block; margin: 0 auto .6rem; height: auto; max-width: 150px; width: 100%; }
/* Blanco casi pleno y no un gris translúcido: sobre este morado el contraste
   ya está justo, y bajarle opacidad lo dejaría por debajo de lo legible. */
.rg-pie-fino { font-size: .76rem; color: rgba(255,255,255,.88); }
.rg-pie strong { color: #fff; }

/* ═════════════ Móvil ═════════════
   La mayoría llega desde un enlace de WhatsApp, así que esta es la vista
   principal, no una adaptación. Aquí la pantalla sí se desplaza entera: en
   375 px no hay forma de que quepa todo sin recortar algo. */
@media (max-width: 61.99rem) {
  .rg-app { height: auto; min-height: 0; }

  /* La explicación primero. En escritorio ambas columnas se ven a la vez y el
     orden da igual; en móvil lo primero es lo único que se ve, y quien llega
     desde un enlace de WhatsApp aterrizaría en un campo que dice «Soy» sin
     saber qué es esto. Va compacta para que el formulario quede enseguida. */
  .rg-col-izq {
    order: 1; border-right: 0; border-bottom: 1px solid var(--rg-linea);
    padding: 1.1rem 1rem 1.2rem;
  }
  .rg-col-der { order: 2; padding: 1rem .85rem 0; }
  .rg-izq-caja { max-width: none; }

  /* En móvil manda el ancho, no el alto: las medidas en `vh` de escritorio no
     sirven —la columna ya no ocupa la pantalla— y dejarían el lockup diminuto
     en un teléfono apaisado. Se vuelve a medidas fijas y compactas. */
  .rg-izq-logo        { width: 165px; }
  .rg-izq-lockup      { width: 205px; }
  .rg-izq-ilustracion { width: 160px; }

  .rg-izq-titulo     { font-size: 1.15rem; margin-bottom: .7rem !important; }
  .rg-despues-titulo { font-size: 1rem; margin-bottom: .55rem !important; }

  .rg-pasos { gap: .5rem; }
  .rg-pasos p { font-size: .8rem; }

  /* «Y después» se resume en una línea: en móvil ocupaba media pantalla antes
     de que se viera un solo producto. El detalle sigue al pie de la página. */
  .rg-despues { margin-top: .9rem; padding-top: .8rem; }
  .rg-despues-lista { gap: .35rem; }
  .rg-despues-lista li { font-size: .78rem; }

  /* Los dos nombres se apilan: dos campos de 11 rem no caben en 375 px, y al
     envolverse la flecha quedaba huérfana en su propia línea. */
  .rg-tarjeta { padding: .8rem .85rem; margin-bottom: .8rem; }
  .rg-tarjeta-linea { flex-direction: column; align-items: stretch; gap: .55rem; }
  .rg-de-fila { flex-direction: column; gap: .4rem; }
  /* Mismo caso que arriba, un nivel más abajo: las 8 rem de base del campo se
     volvían 128 px de alto al apilar. Los dos controles miden lo que miden. */
  .rg-de-campo { flex: 0 0 auto; }
  .rg-de-select, .rg-de-select select { width: 100%; }
  /* En `flex-direction: column` el `flex-basis` deja de ser ancho y pasa a ser
     ALTO. Sin anular las medidas de escritorio, la columna del destinatario
     reservaba 18 rem —288 px— de hueco vacío debajo del campo. */
  .rg-tarjeta-campo, .rg-tarjeta-campo-de { flex: 0 0 auto; }
  .rg-flecha { display: none; }
  /* El número deja de consumir una fila entera para él solo, pero se queda a
     la IZQUIERDA como en el resto de la pantalla —los pasos de la columna
     explicativa y el del formulario final van todos ahí—. Se lee «① Soy».
     La primera etiqueta se sangra lo justo para dejarle sitio; los campos no
     se mueven. */
  .rg-tarjeta { position: relative; }
  .rg-tarjeta-linea > .rg-paso-marca {
    position: absolute; top: .62rem; left: .75rem; margin: 0;
  }
  .rg-tarjeta-linea > .rg-tarjeta-campo:first-of-type > .label { padding-left: 1.7rem; }

  /* Bulma mantiene `is-grouped` en una fila pase lo que pase; en móvil eso
     deja tres controles de 90 px que no se pueden ni leer ni tocar. */
  .rg-col-der .field.is-grouped,
  .modal .field.is-grouped { flex-direction: column; gap: .55rem; }
  .rg-col-der .field.is-grouped > .control,
  .modal .field.is-grouped > .control { width: 100%; margin-right: 0 !important; }

  /* El catálogo crece con la página en vez de tener su propio desplazamiento:
     dos áreas que scrollean por separado en un móvil se pelean con el dedo. */
  .rg-rejilla { overflow: visible; min-height: 0; padding-right: 0; }

  /* La barra pegada va de borde a borde. Sin los márgenes negativos se veían
     los productos pasar por los lados al desplazarse. */
  .rg-barra-inferior {
    position: sticky; bottom: 0; z-index: 20;
    margin: 0 -.85rem !important;
    padding: .7rem .85rem calc(.7rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 14px rgba(43,35,56,.12);
  }
  .rg-barra-inferior .button { min-height: 2.6rem; }

  /* El modal ocupa casi toda la pantalla: con nueve campos, uno pequeño
     obliga a desplazarse dentro de una caja que ya está dentro de otra. */
  .rg-modal-caja { max-width: none; width: calc(100vw - 1.2rem); max-height: calc(100dvh - 1.6rem); }
  .modal-card-head, .modal-card-foot { padding: .85rem 1rem; }
  .modal-card-body { padding: 1rem; }
  .modal-card-title { font-size: 1.05rem !important; }

  /* Objetivos táctiles: 44 px es el mínimo cómodo para el pulgar. */
  .rg-producto-cuerpo .button { min-height: 2.3rem; }
  .rg-paginacion .button { min-height: 2.4rem; }
}

/* Pantallas muy angostas: una sola columna de producto se lee mejor que dos
   tarjetas de 140 px con el nombre partido. */
@media (max-width: 22rem) {
  .rg-rejilla { --bulma-grid-column-min: 100%; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ─────────── Barra de compra de la vista de quien recibe ───────────
   Va fija abajo porque la decisión de comprar se toma después de recorrer
   toda la rejilla, y el pie de la lista puede quedar a varias pantallas.
   La sección reserva espacio con `padding-bottom` en vez de dejar que la
   barra flote encima: en `sticky` dentro de un contenedor con desplazamiento
   la barra tapa las últimas tarjetas en lugar de hacerles sitio. */
.rg-ver { padding-bottom: 6.5rem; }

.rg-ver-barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: .85rem clamp(1rem, 4vw, 2.5rem);
  background: #ffffff;
  border-top: 1px solid var(--rg-linea);
  box-shadow: 0 -4px 18px rgba(31, 27, 36, .1);
}
.rg-ver-barra-datos { display: flex; align-items: baseline; gap: .7rem; }
.rg-ver-barra-n     { margin: 0; font-weight: 700; color: var(--rg-hondo); }
.rg-ver-barra-total { margin: 0; font-weight: 800; font-size: 1.15rem; color: var(--rg-morado); }
.rg-ver-barra-boton { border-radius: 999px; padding-inline: 1.6rem; }

.rg-mia-nota {
  margin: 0 0 .5rem; font-size: .78rem; font-weight: 700;
  color: var(--rg-morado); text-align: center;
}

@media (max-width: 40rem) {
  .rg-ver-barra { flex-direction: column; align-items: stretch; gap: .55rem; }
  .rg-ver-barra-datos { justify-content: space-between; }
  .rg-ver-barra-boton { width: 100%; }
}

/* ─────────── Panel de regalos elegidos ───────────
   Se despliega sobre la barra inferior. Es el único lugar donde se ven todos
   los regalos elegidos a la vez: el catálogo solo enseña la página actual. */
.rg-conteo {
  display: inline-flex; align-items: center; gap: .4rem;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: inherit;
}
.rg-conteo[aria-expanded="true"] .rg-conteo-flecha { transform: rotate(180deg); }
.rg-conteo-flecha { transition: transform .15s ease; font-size: .8em; }

.rg-elegidos {
  border-top: 1px solid var(--rg-linea);
  background: var(--rg-tinte);
  padding: .8rem clamp(.85rem, 2vw, 1.5rem);
  max-height: 40vh; overflow-y: auto;
}
.rg-elegidos-titulo {
  margin: 0 0 .6rem; font-size: .72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em; color: var(--rg-suave);
}
.rg-elegidos-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }

.rg-elegido {
  display: flex; align-items: center; gap: .7rem;
  background: #fff; border: 1px solid var(--rg-linea);
  border-radius: 10px; padding: .45rem .6rem;
}
.rg-elegido img { width: 38px; height: 38px; object-fit: contain; flex: none; }
.rg-elegido-txt { flex: 1 1 auto; min-width: 0; }
.rg-elegido-nombre {
  margin: 0; font-size: .78rem; line-height: 1.3; color: var(--rg-hondo);
  /* El nombre puede ser larguísimo; se corta en dos líneas y no empuja al botón. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rg-elegido-precio { margin: .15rem 0 0; font-size: .76rem; font-weight: 700; color: var(--rg-morado); }
.rg-elegido-quitar { flex: none; color: var(--rg-morado); text-decoration: underline; }

/* ─────────── Pantalla de cierre del modal ───────────
   Es lo que le dice a la persona que ya terminó. Antes se compartía la lista,
   se cerraba el modal y volvía al catálogo con todo igual: sin confirmación y
   sin el enlace privado con el que regresar a su lista. */


/* `hidden` es solo `display:none` de la hoja del navegador, así que CUALQUIER
   `display` propio lo anula. Pasó exactamente eso: el pie de la última etapa
   llevaba `display:flex` y sus botones —«Crear otra lista» y «Cerrar»— se veían
   también en la primera pantalla del modal. Esta regla lo cierra para siempre. */
[hidden] { display: none !important; }

/* ─────────── Instrucción sobre las opciones de envío ─────────── */
.rg-envio-instruccion {
  margin: .9rem 0 .5rem; font-size: .78rem; font-weight: 700;
  color: var(--rg-hondo);
}

/* ─────────── Pantalla de gracias ───────────
   Sustituye a la herramienta cuando el ciclo termina: no es un paso más, es lo
   que queda cuando ya cumplió. Por eso ocupa la pantalla y no vive dentro del
   modal, que se cierra. */
.rg-gracias {
  min-height: calc(100dvh - 3.2rem);
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(1.2rem, 5vh, 3rem) 1rem 3rem;
  background:
    url('/assets/img/fondo-.jpg') no-repeat center top / cover,
    linear-gradient(180deg, #e4c6ed 0%, #ddc5e2 15%, #e0d4d8 45%, #f0e6e5 100%);
}
.rg-gracias-caja {
  width: 100%; max-width: 30rem;
  background: #fff; border-radius: 18px;
  padding: clamp(1.2rem, 4vw, 2rem);
  box-shadow: 0 6px 26px rgba(31, 27, 36, .12);
  text-align: center;
}
.rg-gracias-img { width: 210px; max-width: 62%; height: auto; display: block; margin: 0 auto .4rem; }
.rg-gracias-titulo {
  margin: 0 0 .5rem; font-size: 1.5rem; font-weight: 800; color: var(--rg-hondo);
}
/* Son dos párrafos: el primero respira poco, el último abre paso al bloque
   del enlace. */
.rg-gracias-texto {
  margin: 0 0 .7rem; font-size: .9rem; line-height: 1.55; color: var(--rg-suave);
}
.rg-gracias-texto:last-of-type { margin-bottom: 1.4rem; }
.rg-gracias-bloque {
  text-align: left;
  background: var(--rg-tinte);
  border: 1px solid var(--rg-linea);
  border-radius: 12px;
  padding: .85rem .9rem .65rem;
  margin-bottom: .9rem;
}
.rg-gracias-recomendar { background: #fff; border-style: dashed; }
.rg-gracias-recomendar-txt {
  margin: 0 0 .7rem; font-size: .85rem; line-height: 1.5; color: var(--rg-hondo);
}
.rg-gracias-nueva { width: 100%; border-radius: 999px; margin-top: .3rem; }

/* ─────────── Pantalla de gracias ───────────
   Sustituye a la herramienta cuando el ciclo termina: no es un paso más, es lo
   que queda cuando ya cumplió. Por eso ocupa la pantalla y no vive dentro del
   modal, que se cierra. */
.rg-gracias {
  min-height: calc(100dvh - 3.2rem);
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(1.2rem, 5vh, 3rem) 1rem 3rem;
  background:
    url('/assets/img/fondo-.jpg') no-repeat center top / cover,
    linear-gradient(180deg, #e4c6ed 0%, #ddc5e2 15%, #e0d4d8 45%, #f0e6e5 100%);
}
.rg-gracias-caja {
  width: 100%; max-width: 30rem;
  background: #fff; border-radius: 18px;
  padding: clamp(1.2rem, 4vw, 2rem);
  box-shadow: 0 6px 26px rgba(31, 27, 36, .12);
  text-align: center;
}
.rg-gracias-img { width: 210px; max-width: 62%; height: auto; display: block; margin: 0 auto .4rem; }
.rg-gracias-titulo {
  margin: 0 0 .5rem; font-size: 1.5rem; font-weight: 800; color: var(--rg-hondo);
}
.rg-gracias-texto {
  margin: 0 0 1.4rem; font-size: .9rem; line-height: 1.55; color: var(--rg-suave);
}
.rg-gracias-bloque {
  text-align: left;
  background: var(--rg-tinte);
  border: 1px solid var(--rg-linea);
  border-radius: 12px;
  padding: .85rem .9rem .65rem;
  margin-bottom: .9rem;
}
.rg-gracias-recomendar { background: #fff; border-style: dashed; }
.rg-gracias-recomendar-txt {
  margin: 0 0 .7rem; font-size: .85rem; line-height: 1.5; color: var(--rg-hondo);
}
.rg-gracias-nueva { width: 100%; border-radius: 999px; margin-top: .3rem; }

/* ─────────── Lista abierta (amigo secreto) ─────────── */
/* El desplegable de modo va sobre el campo del destinatario, así que se le
   deja aire y se alinea con los `select` de los filtros del catálogo. */

.rg-nota-abierta {
  background: var(--rg-tinte); border: 1px dashed var(--rg-tinte-2);
  border-radius: 10px; padding: .7rem .8rem;
  font-size: .78rem; line-height: 1.5; color: var(--rg-hondo);
}