/* =====================================================================
   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.
   ===================================================================== */

@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 {
  position: relative; overflow: hidden;
  /* Las tres piezas se agrupan y el conjunto se centra. Antes el texto se
     centraba por su cuenta en el espacio sobrante, lo que abría un hueco entre
     la ilustración y «Cómo funciona». */
  display: grid; grid-template-rows: auto auto auto; align-content: center;
  padding: 1.8rem 1.5rem;
  background: var(--rg-tinte); border-right: 1px solid var(--rg-linea);
}

/* La pieza gráfica de la tienda, al fondo y muy tenue.
   Va en un pseudoelemento y no como `background-image` del contenedor porque
   así se le puede bajar la opacidad sin desteñir también el texto. Anclada
   abajo a la derecha y recortada por el `overflow`, funciona como marca de
   agua sin robarle protagonismo a los pasos. */
.rg-col-izq::after {
  content: "";
  position: absolute; inset: 0;
  /* Anclada a la derecha a propósito: midiendo el PNG por franjas verticales,
     la izquierda solo tiene 3% de píxeles opacos y la derecha 76%. Centrada se
     veía casi vacía. Con `cover` llena la columna y `right` deja a la vista la
     parte que sí tiene dibujo. */
  background: url('/assets/img/fondo-regalos.png') no-repeat right center / cover;
  opacity: .16;
  pointer-events: none;
}

/* El contenido por encima de la marca de agua. */
/* Va justo debajo de la ilustración, sin centrarse por su cuenta. */
.rg-izq-caja { position: relative; z-index: 1; max-width: 21rem; margin: 1.4rem auto 0; }
/* Fila 1. El grupo entero va centrado, así que no hace falta descolgarlo. */
.rg-izq-logo { display: block; width: 100%; max-width: 265px; height: auto; margin: 0 auto; }
.rg-izq-titulo { color: var(--rg-hondo); text-align: center; margin-bottom: 1.1rem !important; }

.rg-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.rg-pasos li { display: flex; align-items: flex-start; gap: .65rem; }
.rg-pasos p { margin: 0; font-size: .82rem; line-height: 1.45; }
/* El tag de Bulma es rectangular: se fuerza a círculo para el número. */
.rg-paso-n { width: 1.5rem; height: 1.5rem; padding: 0; font-weight: 700; font-size: .72rem; flex: none; }
.rg-paso-marca { width: 1.3rem; height: 1.3rem; font-size: .68rem; margin-right: .45rem; vertical-align: middle; }

.rg-despues { margin-top: 1.2rem; padding-top: .9rem; border-top: 1px solid var(--rg-tinte-2); }
.rg-despues-titulo { color: var(--rg-suave); margin-bottom: .5rem !important; }
.rg-despues-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.rg-despues-lista li { display: flex; gap: .5rem; font-size: .78rem; line-height: 1.4; color: var(--rg-suave); }
.rg-despues-lista li::before { content: "·"; color: var(--rg-morado); font-weight: 800; }

/* Acompaña al logo. Al añadirla, la marca de agua del fondo baja de
   intensidad: dos piezas gráficas al mismo peso se estorban. */
.rg-izq-ilustracion { display: block; margin: .8rem auto 0; max-width: 15.5rem; }
.rg-izq-ilustracion img { width: 100%; height: auto; display: block; }

/* ─────────── 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; }
.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; }
  .rg-col-izq { grid-template-rows: auto auto auto; align-content: start; }
  .rg-izq-logo { max-width: 185px; margin: 0 auto 1.1rem; }
  .rg-izq-ilustracion { max-width: 10rem; margin-top: .8rem; }
  .rg-izq-titulo { font-size: 1.15rem !important; margin-bottom: .7rem !important; }

  /* La columna es mucho más baja aquí: la marca de agua se reduce y se corre
     al borde para no quedar detrás del texto. */
  .rg-col-izq::after { opacity: .12; }
  .rg-pasos { gap: .45rem; }
  .rg-pasos p { font-size: .78rem; }

  /* «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: .8rem; padding-top: .7rem; }
  .rg-despues-lista { gap: .25rem; }
  .rg-despues-lista li { font-size: .72rem; }

  /* 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-tarjeta-campo { flex: 1 1 auto; }
  .rg-flecha { display: none; }
  .rg-tarjeta-linea > .rg-paso-marca { margin-bottom: 0; align-self: flex-start; }

  /* 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; } }