/* ==========================================================================
   RegalaShop — base visual del rediseño de 2026
   ==========================================================================

   POR QUE ESTE ARCHIVO EXISTE, Y NO SE TOCO themes.css

   `themes.css` pesa 407 KB, vive en `public_html/css/` y NO esta en control
   de versiones: `/public` esta en el .gitignore y `public_html` ni siquiera
   esta dentro del repositorio. Editarlo es escribir sin historial y sin
   vuelta atras.

   Esta hoja se carga DESPUES de aquella, asi que gana en igualdad de
   especificidad sin tener que pelear regla por regla. El original se
   versiona aqui, en `resources/css/`, y el despliegue lo copia al docroot.

   Si algun dia hay que revertir el rediseño, se quita el <link> del layout.

   ---

   DE DONDE SALEN LOS NUEVE TONOS

   De la lamina de marca que mando la clienta el 3 de noviembre de 2026, con
   su nombre y su hexadecimal. No son muestreados de capturas ni inventados.

   Todo el color del rediseño sale de aqui. La regla es: en las vistas no se
   escribe un hexadecimal nunca mas, se escribe una clase. Lo vigila
   `tests/Feature/PaletaEnVariablesTest.php`.
   ========================================================================== */

:root {
    /* Los nueve de la lamina, con el nombre que les puso la clienta. */
    --rs-coral:          #EE7F65;
    --rs-durazno:        #FBF6F3;
    --rs-gris-muy-claro: #F1F5F7;
    --rs-azul:           #4D7293;
    --rs-taupe:          #A6867B;
    --rs-gris:           #70747B;
    --rs-fondo:          #FBF9F8;
    --rs-marfil:         #FAF8F5;
    --rs-noche:          #0F121E;

    /* Derivados. No estan en la lamina: salen de ella y existen para no
       escribir un color suelto en un :hover. */
    --rs-azul-oscuro:    #3C5B76;   /* hover de los botones azules */
    --rs-coral-oscuro:   #E0603F;   /* hover de los botones coral  */
    --rs-linea:          #ECE7E3;   /* bordes y separadores        */

    /* El separador de la barra de cifras, que tiene que VERSE.

       "Las líneas de separación en nuestro gris claro para que se
       distinga", el 5 de noviembre de 2026. En la lamina de la paleta no
       hay ningun tono que se llame asi: estan "Gris muy claro" (#F1F5F7)
       y "Gris" (#70747B). El primero es MAS claro que la linea que ya
       habia, asi que puesto sobre la barra —que en la misma tanda pasa a
       blanca— no se distinguiria nada, que es justo lo contrario de lo
       que pide.

       Asi que es el gris de la paleta rebajado sobre blanco. Estuvo al
       30% —#D3D6DA, 1.46:1 contra el blanco de la barra— y Armando lo
       subio al 50% el 5 de noviembre de 2026: "a las lineas si ponles
       gris medio".

       Donde cae cada candidato, por si hay que volver a moverlo:

         #F1F5F7   1.10:1   "Gris muy claro" de la paleta. MENOS visible
                            que el beige que habia; no sirve para esto.
         #ECE7E3   1.23:1   --rs-linea, el beige de los demas bordes.
         #D3D6DA   1.46:1   el gris de la paleta al 30%.
         #B0B4BA   2.08:1   al 50%  <- este, gris medio.
         #70747B   4.69:1   el gris de la paleta entero.

       QUEDA PREGUNTADO a la clienta cual queria ella: dijo "nuestro gris
       claro" y en su lamina no hay ningun tono con ese nombre. */
    --rs-linea-gris:     #B0B4BA;   /* separadores que deben notarse */

    /* ------------------------------------------------------------------
       UN DECIMO TONO QUE NO ESTA EN LA LAMINA DE MARCA

       El antetitulo del hero —"DESDE 2014 ACOMPAÑANDO CELEBRACIONES"— se
       habia puesto en taupe. Armando noto el 4 de noviembre de 2026 que en
       el diseño se ve mas calido, y tiene razon: no es taupe. Pero tampoco
       es el coral de la lamina.

       COMO SE MIDIO, QUE NO FUE A OJO

       La unica copia que tenemos del diseño es una miniatura de Slack, o
       sea un JPEG reescalado, y el texto mide 13px: el color de un trazo
       tan fino siempre sale mezclado con el fondo. Asi que no se midio el
       color sino la DIRECCION de la mezcla —(fondo - promedio de la banda),
       normalizada—, que no depende de cuanta tinta cubre cada pixel.

       El metodo se calibro contra dos textos de color conocido de la misma
       lamina, el parrafo en --rs-gris y el titulo en --rs-noche, y acerto
       dentro de 0.12. Resultado del antetitulo, ya corregido por ese sesgo:

         medido       0.359 : 0.771 : 1.000
         si fuera coral  0.093 : 0.827 : 1.000   <- no
         si fuera taupe  0.672 : 0.914 : 1.000   <- no

       Sobre esa recta de tono, la unica eleccion libre es que tan oscuro.
       Se tomo el punto donde el texto pasa 4.5:1, que es el minimo para
       13px. Mas claro —#BF6B4F, el centro de la medicion— se queda en
       3.7:1 y repite el problema que tenia el taupe.

       PENDIENTE: preguntarle a quien hizo el diseño cual es este color.
       No esta entre los nueve que mando la clienta.
       ------------------------------------------------------------------ */
    --rs-coral-tostado:  #B1592A;

    /* ------------------------------------------------------------------
       CONTRASTE: el dato medido, para que nadie lo redescubra

       Sobre blanco, segun WCAG 2.1:

         --rs-noche          #0F121E   18.7 : 1   texto de cualquier tamaño
         --rs-azul           #4D7293    5.1 : 1   texto de cualquier tamaño
         --rs-coral-tostado  #B1592A    4.8 : 1   texto de cualquier tamaño
         --rs-gris           #70747B    4.7 : 1   texto de cualquier tamaño
         --rs-coral-oscuro   #E0603F    3.6 : 1   SOLO texto grande (>=24px)
         --rs-taupe          #A6867B    3.3 : 1   SOLO texto grande (>=24px)
         --rs-coral          #EE7F65    2.7 : 1   NO sirve para texto

       De ahi salen dos reglas que el diseño ya respeta y conviene no romper:

       1. El antetitulo va en --rs-coral-tostado. Es corto, va en mayusculas
          y con espaciado, pero mide 13px, asi que necesita 4.5:1 completos.
          El taupe que llevaba antes daba 3.3:1 y se quedaba corto; sigue en
          la paleta, pero ya no se usa para texto.

       2. El coral NO se usa para texto corrido. En el diseño aparece como
          texto solo en las italicas de los titulos de 40px, donde el minimo
          es 3:1 y pasa raspando.

       QUEDA UN PENDIENTE, y es a proposito: el texto BLANCO sobre coral
       —el boton del hero, la pestaña activa de Servicios— mide 2.7:1 y el
       minimo es 4.5:1. Se implemento como lo pide el diseño porque es lo
       que la clienta aprobo. Para que pasara haria falta un coral bastante
       mas oscuro (luminancia <= 0.18, algo como #B8432A), que ya es otro
       color. Esta preguntado a quien hizo el diseño. El dia que conteste, se
       cambia `--rs-coral-boton` de abajo y no hay que tocar ninguna vista.
       ------------------------------------------------------------------ */
    --rs-coral-boton:    var(--rs-coral);

    /* ------------------------------------------------------------------
       TIPOGRAFIA

       `HK Grotesk` es el nombre comercial de Hanken Grotesk: mismo tipo,
       licencia SIL Open Font, y esta en Google Fonts. Sale gratis y
       reemplaza a la Poppins de hoy.

       `The Youngest Serif` hay que comprarla y todavia no llega. Mientras
       tanto el respaldo es Playfair Display —tambien de Google Fonts—, que
       es una serif de despliegue con el mismo contraste alto y remates
       afilados. NO es la tipografia final: es un suplente elegido para que
       la revision con la clienta se parezca a su diseño, en vez de verse
       con la Georgia del sistema.

       El dia que llegue la licencia: se agrega el @font-face, se pone
       'The Youngest Serif' al principio de --rs-serif y se quita Playfair
       del enlace del layout. Son tres lineas.

       `Aptos` no se incluye. Casi no aparece en el diseño y su licencia web
       se vende aparte, por dominio. Esta preguntado si Hanken Grotesk puede
       cubrir ese papel.
       ------------------------------------------------------------------ */
    --rs-sans:  'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --rs-serif: 'The Youngest Serif', 'Playfair Display', Georgia, 'Times New Roman', serif;

    /* La escala. `clamp` para no escribir un media query por cada titulo:
       el minimo es el de celular, el maximo el del diseño de escritorio. */
    --rs-display: clamp(2.25rem, 1.35rem + 3.1vw, 3.5rem);    /* 36 -> 56 px */

    /* Titulos y subtitulos subieron un escalon el 5 de noviembre de 2026.
       Lo pidio la clienta en tres sitios distintos de la misma tanda de
       comentarios —"y el font de ¿Cómo funciona? y más grande", "más
       grande los títulos de cada paso", "revisar los tamaños de los
       títulos a como mencioné arriba"—, asi que se mueve la escala y no
       cada bloque por separado.

       Las rampas conservan su forma; cambian los dos extremos. */
    --rs-titulo:  clamp(2rem, 1.3rem + 2.2vw, 3rem);          /* 32 -> 48 px */
    --rs-subtitulo: clamp(1.4375rem, 1.2rem + 0.8vw, 1.75rem); /* 23 -> 28 px */
    --rs-entrada: clamp(1rem, 0.95rem + 0.25vw, 1.1875rem);   /* 16 -> 19 px */
}

/* ==========================================================================
   Base
   ========================================================================== */

body {
    font-family: var(--rs-sans);
    color: var(--rs-gris);
    background-color: #FFF;
}

/* Los titulos van en la serif de despliegue. Se listan uno por uno y no con
   `h1, h2, h3`a secas porque el administrador y los correos comparten este
   documento y ahi no se quiere la serif. */
.rs-display,
.rs-titulo,
.rs-subtitulo {
    font-family: var(--rs-serif);
    color: var(--rs-noche);
    font-weight: 500;
    line-height: 1.15;
    margin: 0;
}

.rs-display   { font-size: var(--rs-display); }
.rs-titulo    { font-size: var(--rs-titulo); }
.rs-subtitulo { font-size: var(--rs-subtitulo); }

/* El trozo en italica coral de los titulos. En el diseño aparece dos veces:
   "los regalos lleguen a ti" y "en sus invitados". */
.rs-display em,
.rs-titulo em,
.rs-subtitulo em {
    font-style: italic;
    color: var(--rs-coral);
}

/* El antetitulo: mayusculas, espaciado y coral tostado. Siempre arriba de un
   titulo y siempre corto. El porque del color —y por que ya no es taupe—
   esta arriba, en el bloque del decimo tono. */
.rs-antetitulo {
    font-family: var(--rs-sans);
    /* 14px y no 13. "Un punto más grande la letra, así como los demás
       título que tienen este color", el 5 de noviembre de 2026: va por el
       antetitulo, que es el unico texto de la portada en coral tostado, y
       por eso se cambia aqui y sale en los cuatro sitios donde aparece. */
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rs-coral-tostado);
    margin: 0 0 0.75rem;
}

.rs-entrada {
    font-size: var(--rs-entrada);
    line-height: 1.6;
    color: var(--rs-gris);
}

/* ==========================================================================
   Utilidades

   `!important` a proposito y solo aqui: themes.css trae reglas muy
   especificas y estas clases tienen que ganarles sin que haya que ir
   subiendo la especificidad caso por caso. Fuera de las utilidades no se
   usa.
   ========================================================================== */

.rs-texto-coral   { color: var(--rs-coral) !important; }
.rs-texto-azul    { color: var(--rs-azul) !important; }
.rs-texto-noche   { color: var(--rs-noche) !important; }
.rs-texto-taupe   { color: var(--rs-taupe) !important; }
.rs-texto-gris    { color: var(--rs-gris) !important; }
.rs-texto-blanco  { color: #FFF !important; }

.rs-fondo-coral      { background-color: var(--rs-coral) !important; }
.rs-fondo-azul       { background-color: var(--rs-azul) !important; }
.rs-fondo-noche      { background-color: var(--rs-noche) !important; }
.rs-fondo-durazno    { background-color: var(--rs-durazno) !important; }
.rs-fondo-gris-claro { background-color: var(--rs-gris-muy-claro) !important; }
.rs-fondo-marfil     { background-color: var(--rs-marfil) !important; }
.rs-fondo-claro      { background-color: var(--rs-fondo) !important; }
.rs-fondo-blanco     { background-color: #FFF !important; }

.rs-borde         { border: 1px solid var(--rs-linea) !important; }
.rs-borde-coral   { border-color: var(--rs-coral) !important; }
.rs-borde-azul    { border-color: var(--rs-azul) !important; }

/* ==========================================================================
   Botones

   Clase propia y no `.btn` del tema: aquel trae su propio relleno, su radio
   y sus estados, y sobrescribirlos uno por uno sale mas caro que empezar de
   cero. Los `.btn` viejos del resto del sitio siguen intactos.
   ========================================================================== */

.rs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    font-family: var(--rs-sans);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
    padding: 0.875rem 1.75rem;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.rs-btn:hover,
.rs-btn:focus { text-decoration: none; }

.rs-btn-coral          { background-color: var(--rs-coral-boton); color: #FFF; }
.rs-btn-coral:hover,
.rs-btn-coral:focus    { background-color: var(--rs-coral-oscuro); color: #FFF; }

.rs-btn-azul           { background-color: var(--rs-azul); color: #FFF; }
.rs-btn-azul:hover,
.rs-btn-azul:focus     { background-color: var(--rs-azul-oscuro); color: #FFF; }

.rs-btn-contorno       { background-color: transparent; border-color: var(--rs-coral); color: var(--rs-coral); }
.rs-btn-contorno:hover,
.rs-btn-contorno:focus { background-color: var(--rs-coral); color: #FFF; }

/* El foco visible es el del teclado. Sin esto no se ve donde esta parado
   quien navega con tabulador, porque el reset del tema quita el contorno. */
.rs-btn:focus-visible,
.rs-enlace:focus-visible {
    outline: 2px solid var(--rs-azul);
    outline-offset: 3px;
}

/* ==========================================================================
   Piezas que se repiten
   ========================================================================== */

/* Secciones: el ritmo vertical del rediseño, en un solo lugar.

   BAJO UN ESCALON EL 5 DE NOVIEMBRE DE 2026, Y ES UNA MEDIDA

   La clienta dibujo sobre la captura el hueco que queria entre la barra
   de cifras y "¿Cómo funciona?" —"acortar un poco la franja para que no
   haya tanto espacio entre ellos, más o menos de este tamaño"—. Medido
   el rectangulo que trazo sobre su captura de 1263 px de ancho: 81 px,
   contra los 138 que habia (64 de relleno inferior del hero mas 74 de
   relleno superior de la seccion).

   Esos 138 no salen de un sitio solo, asi que tampoco se arregla en uno
   solo: 60 aqui mas 22 en el hero dan 82. Y lo mismo pidio dos veces mas
   abajo —"compactar también más la sección" del video, "subir un poco
   toda la sección"—, de modo que lo que quiere es menos aire en toda la
   pagina y no un parche en el hero. */
.rs-seccion       { padding: clamp(2.5rem, 1.25rem + 3.2vw, 4.5rem) 0; }
.rs-seccion-corta { padding: clamp(1.5rem, 0.75rem + 2vw, 2.75rem) 0; }

/* El ancho util de los bloques del rediseño.

   "Compactar un poco los pasos aunque sobre un poco de espacio en los
   costados", "también hacer las tarjetas más pequeñas, no pasa nada que
   sobre espacio en los costados", "compactar también más la sección":
   tres veces lo mismo el 5 de noviembre de 2026.

   El contenedor del tema es `container container-xxl`, que de 1200px
   para arriba son el 95% de la pantalla y 1750px fijos desde 1750. Eso
   es mucho mas ancho que la lamina, donde el contenido mide 1098 px
   sobre un lienzo de 1200. Esta clase le pone tope a la fila de adentro
   y deja el aire a los lados que ella pide.

   70rem = 1120 px. Medida la lamina del video, su tarjeta mide 1054 px
   de ancho; medida la de los pasos, la separacion entre columnas es de
   248.5 px, o sea 994 px los cuatro. Esto queda un 7% por encima de los
   dos, y el porque esta abajo, en `.rs-paso .rs-subtitulo`: con la
   tipografia suplente los titulos de los pasos no entran en un renglon
   en 248 px y en la lamina si entran.

   Lo otro que ella pidio —"al compactarlo, los textos abajo de los pasos
   se hacen en 3 renglones"— no sale de este numero sino del tope que
   lleva el parrafo de cada paso, que es como esta hecha la lamina: alli
   el titulo mide 192 px y el parrafo nunca pasa de 168. */
.rs-compacto {
    max-width: 70rem;
    margin-left: auto;
    margin-right: auto;
}

/* Las dos filas de TARJETAS van un poco mas anchas que los pasos y el
   video.

   "¿Las tarjetas pudieran ser un poco mas anchas? Creo que ahi si
   quedaron un poco angostas", el 5 de noviembre de 2026, por las de "Sí,
   los novios son nuestros clientes".

   Y es un caso distinto del de los pasos aunque las dos filas tengan
   cuatro columnas: un paso lleva tres lineas de texto y una tarjeta lleva
   un titulo de dos o tres palabras mas un parrafo que puede llegar a seis
   renglones. Medido a 1263 px, con 70rem la tarjeta mide 250 px y el
   titulo de la cuarta —"Diferentes métodos de pago"— se parte en tres
   renglones; con 76rem mide 266 y se queda en dos.

   76rem Y NO MAS, porque mas no hace nada: a 1263 px el contenedor del
   tema ya tope en 1200 y la fila no puede pasar de ahi. De 1280 para
   arriba este numero si manda, y es lo que mantiene la compactacion que
   pidio la clienta.

   LAS DOS FILAS LLEVAN LA MISMA CLASE aunque la queja fuera de una: van
   una encima de otra y con anchos distintos el escalon se nota. */
.rs-compacto--tarjetas {
    max-width: 76rem;
}

/* Dos secciones del MISMO fondo, seguidas: la mitad de aire.

   Medidos los huecos de la portada a 1440px:

     hero    -> pasos        142px   cambia el fondo
     pasos   -> video        142px   mismo fondo, pero el video trae su
                                     propia tarjeta azul y ya separa
     video   -> novios       170px   cambia el fondo
     novios  -> disfruta     170px   MISMO fondo y el mismo patron de
                                     cuatro tarjetas  <- el problema
     disfruta-> encuentranos 160px   cambia el fondo (el beige)

   El numero no es el problema: 170px funciona donde el fondo cambia,
   porque ahi separa dos bandas. En el unico sitio donde no cambia nada no
   separa nada, y se lee como un hueco. Lo noto Armando el 4 de noviembre
   de 2026.

   Va contra el par concreto que existe hoy y no contra `.rs-seccion +
   .rs-seccion` porque CSS no sabe si dos secciones comparten fondo: hay
   que nombrarlas. Si algun dia se repite el caso con otro tono, se agrega
   su pareja aqui. */
.rs-seccion.rs-fondo-claro + .rs-seccion.rs-fondo-claro,
.rs-seccion.rs-fondo-blanco + .rs-seccion.rs-fondo-blanco,
.rs-seccion.rs-fondo-blanco + .rs-seccion-corta.rs-fondo-blanco {
    padding-top: clamp(1.25rem, 0.5rem + 1.6vw, 2.25rem);
}

/* Y el par del video con "Sí, los novios…" va mas apretado todavia.

   "Quitale un poco de margen de la seccion del video a la de un enfoque
   diferente, porque se ve un poco lejos", el 5 de noviembre de 2026.
   Eran 65 px —37 del relleno inferior del video mas 28 de este— y quedan
   en 45. Tiene su propia regla y no se baja la de arriba porque esa
   tambien gobierna el hueco de los pasos al video, del que nadie se ha
   quejado. */
.rs-seccion-corta.rs-fondo-blanco + .rs-seccion.rs-fondo-blanco {
    padding-top: clamp(0.5rem, 0.25rem + 0.4vw, 0.75rem);
}

/* Y EL HUECO DE LOS PASOS AL VIDEO, QUE ERA EL QUE QUEDABA

   "¿También le puedes quitar un poco entre la sección de ¿cómo funciona? y
   el video?", Armando, el 6 de noviembre de 2026.

   Hasta aqui la mitad de abajo —el relleno superior del video— ya estaba
   recortada por la regla de pares de arriba, en 28px. La que seguia entera
   era la de arriba: el relleno inferior de la seccion de los pasos, que es
   el generico de 60px. Medido a 1263px, del texto del paso mas bajo al
   borde de la tarjeta azul habia 88.6px.

   Queda en 58, que es lo mismo que el hueco de "Sí, los novios…" a "Tú
   disfruta…" despues de la vuelta del mismo dia. Que los dos midan igual
   no es coincidencia buscada a ojo: son las dos unicas juntas de la pagina
   que alguien ha señalado, y acaban en el mismo numero.

   AQUI NO HACE FALTA MAS AIRE QUE ALLA aunque el fondo no cambie —las dos
   son blancas— porque el video trae su propia tarjeta con fondo gris y
   esquinas redondeadas: la separacion la hace la tarjeta, no el hueco. */
.rs-seccion.rs-fondo-blanco:has(+ .rs-seccion-corta.rs-fondo-blanco) {
    padding-bottom: clamp(1.75rem, 1.25rem + 0.8vw, 2.5rem);
}

/* Y LA MISMA JUNTA CUANDO EL VIDEO NO ESTA, QUE DESDE HOY PASA

   "Del video, lo podremos dejar pendiente? Y ocultar esa sección cuando
   lo subamos a producción?", la clienta, el 9 de noviembre de 2026. Con
   el bloque apagado, los pasos quedan pegados a "Sí, los novios…" y
   aparece una junta que no existia.

   LA MITAD DE ARRIBA YA ESTABA RESUELTA SIN SABERLO. El selector
   `.rs-seccion.rs-fondo-blanco + .rs-seccion.rs-fondo-blanco` de la regla
   de pares se escribio el 5 de noviembre para la banda blanca de tres
   secciones y hasta hoy no casaba con nada: ningun par de secciones
   blancas enteras era adyacente, porque el video —que es `-corta`— iba
   siempre en medio. Al apagarlo empieza a aplicar y pone 28px arriba.

   La de abajo seguia entera. Medido a 1280px: 60.96 de relleno inferior
   de los pasos mas 28.48 del superior de las tarjetas son 89px, y eso es
   mas aire del que lleva el cambio de banda blanco -> beige, que son 72.
   Al reves de como deberia: la hoja dice tres lineas mas abajo que una
   banda de color necesita aire propio y una junta dentro de la misma
   banda no.

   Queda en 58, que es EL MISMO numero del par de los pasos con el video.
   No es un valor nuevo: es el unico hueco blanco-con-blanco que la
   clienta ha visto y aprobado, y asi la escala vuelve a ordenarse —58
   dentro de la banda, 72 al cambiar de banda, 122 el generico—.

   CUANDO EL VIDEO VUELVA, ESTA REGLA SE APAGA SOLA. Entonces el vecino
   de los pasos es `.rs-seccion-corta` y no `.rs-seccion`, asi que casa la
   de arriba y no esta. Las dos no pueden aplicar a la vez. */
.rs-seccion.rs-fondo-blanco:has(+ .rs-seccion.rs-fondo-blanco) {
    padding-bottom: clamp(1.75rem, 1.25rem + 0.8vw, 2.5rem);
}

/* Y EL ULTIMO PAR: DONDE SE ACABA EL BLANCO Y EMPIEZA EL BEIGE

   "Recortar un poco los espacios entre las secciones. Todo lo de aquí del
   centro recortarlo", el 6 de noviembre de 2026, con dos rayas dibujadas
   sobre la captura: una debajo de "Porque mientras más fácil sea para tus
   invitados regalar" y otra encima de "POR QUÉ CONTRATAR REGALASHOP".

   Las dos rayas son las dos mitades del mismo hueco. Medido a 1263px:
   61px de relleno inferior de la banda blanca mas 61 de relleno superior
   de la beige, 122px en total. Quedan en 36 + 36 = 72.

   NO SE BAJA A LOS 45px DEL PAR DE ARRIBA, y la diferencia tiene motivo:
   aquel son dos secciones del MISMO blanco, donde el hueco es lo unico
   que las separa y por eso puede ser chico. Aqui cambia el fondo, y una
   banda de color necesita aire propio o se lee como si empezara pegada a
   lo anterior.

   EL `:has()` ES PARA LA MITAD DE ARRIBA. CSS no tiene "hermano
   anterior", asi que el relleno inferior de la banda blanca solo se puede
   pedir diciendo "la seccion blanca que va SEGUIDA de una beige". En un
   navegador sin `:has()` —ninguno de los que usa la gente hoy— esa mitad
   se queda en 61px y la de abajo si baja: el hueco sale un poco mayor y
   nada mas. No se rompe nada. */
.rs-seccion.rs-fondo-blanco:has(+ .rs-seccion.rs-fondo-claro) {
    padding-bottom: clamp(1.5rem, 1rem + 0.6vw, 2rem);
}

.rs-seccion.rs-fondo-blanco + .rs-seccion.rs-fondo-claro {
    padding-top: clamp(1.5rem, 1rem + 0.6vw, 2rem);
}

/* Los tres pares de blanco se agregaron el 5 de noviembre de 2026, cuando
   "Sí, los novios son nuestros clientes" paso a fondo blanco: desde ese
   dia los pasos, el video y las tarjetas de invitados son una sola banda
   blanca de tres secciones. La clienta pidio ademas cerrar ese hueco en
   concreto —"subir un poco toda la sección para que no quede tanto
   espacio en blanco entre el video de arriba y UN ENFOQUE"—. */

/* La tarjeta: fondo suave, marco tenue y esquinas grandes. */
/* EL MARCO SE QUITO Y VOLVIO. LAS DOS VECES POR UNA PETICION, Y NO SE
   CONTRADICEN

   Llevaba `border: 1px solid var(--rs-linea)` —una raya beige— y el 4 de
   noviembre de 2026 Armando dijo que las tarjetas se veian mas opacas que
   en la lamina. Medido el perfil de un borde pixel por pixel:

     diseño   ... FBFBFB FAF9FA F9F6F6 F8F2F2 F7F0EF F8F0EF FAF3F1 FCF6F4 FCF8F6 ...
     nuestro  ... FBF9F8 FCFAF9 F8F5F4 EEE9E5 FAF5F2 FBF6F3 ...
                                      ^^^^^^ una linea de 1px, 13 niveles
                                             mas oscura que el relleno

   La lamina no tenia linea sino una sombra que baja cinco niveles a lo
   largo de ocho pixeles, asi que se quito.

   El 5 de noviembre la clienta pidio lo contrario, dos veces: "los
   recuadros llevan un ligero marco más obscuro para que se noten" y "las
   tarjetas deben de tener también un marco que haga que se noten o se
   diferencien del fondo". NO es volver atras: en la misma tanda el fondo
   de "Sí, los novios..." pasa a BLANCO, y una tarjeta de durazno muy
   palido sobre blanco, sin contorno, deja de leerse como tarjeta. La
   medicion de ayer describia la lamina de ayer, con su fondo beige.

   El marco es el relleno de cada tarjeta bajado un 6%, no un gris
   generico: sobre el durazno tiene que leerse calido y sobre el gris
   frio, o se ve sucio. */
.rs-tarjeta {
    background-color: var(--rs-durazno);
    border: 1px solid #F0E2DA;
    border-radius: 1rem;
    padding: 1.75rem 1.5rem;
    height: 100%;
    box-shadow: 0 2px 10px rgba(15, 18, 30, 0.04);
}

.rs-tarjeta--azul {
    background-color: var(--rs-gris-muy-claro);
    border-color: #DCE6EC;
}

/* La negrita dentro de una tarjeta va del color del parrafo.

   "Los textos en bold de '1 a 2 días hábiles...' deben de ser en el mismo
   color gris del que están escritas las frases, no en el negro", el 5 de
   noviembre de 2026. Iban en azul noche con la clase `rs-texto-noche`,
   que se quito de la vista; esto es el cinturon por si el tema le pone
   color a `strong` en algun sitio. */
.rs-tarjeta strong {
    color: inherit;
    font-weight: 600;
}

/* El circulo del icono. El tamaño va en `em` para que una tarjeta pueda
   achicarlo cambiando solo su `font-size`. */
.rs-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background-color: #FDECE7;
    color: var(--rs-coral);
    font-size: 1.375rem;
}

.rs-icono--azul {
    background-color: #E4EDF4;
    color: var(--rs-azul);
}

/* El circulo grande de "¿Cómo funciona?".

   2.25rem y no 1.75: medido sobre la lamina, el dibujo ocupa el 49% del
   ancho del circulo y con 1.75rem se quedaba en 29%. Mismo problema que
   tenia la barra de cifras —el trazo fino de `fal` diluido en un circulo
   grande—, reportado por Armando el 4 de noviembre de 2026. Los pesos de
   cada icono se cambiaron en `config/portada.php`.

   EL NUMERO SE AJUSTO POR ALTO, NO POR ANCHO, Y HAY UN PORQUE

   Cada glifo llena su caja de forma distinta, asi que con un solo
   `font-size` los cuatro salen con anchos distintos: 38, 44, 51 y 56% del
   circulo. Lo que si queda parejo es el ALTO —los cuatro en ~36px—, y eso
   es lo que el ojo lee como "del mismo tamaño". 2.25rem pone ese alto en
   el 50% del circulo, que es donde esta el del diseño. */
.rs-icono--grande { width: 4.5rem; height: 4.5rem; font-size: 2.25rem; }

/* LOS ICONOS QUE MANDO LA CLIENTA, QUE YA NO SON DE FONT AWESOME

   El 5 de noviembre de 2026 adjunto ocho PNG —"les adjunto íconos" para
   los cuatro pasos y "anexo los íconos correctos y más grandes" para los
   cuatro beneficios— y con eso se acaba el problema que estaba anotado
   en `config/portada.php`: tres de esos dibujos no existen en Font
   Awesome 5 Pro (la hoja con rayas Y lapiz, la mano con el dolar DENTRO
   de un circulo, el escudo con candado) y se venian aproximando.

   Cada PNG trae el circulo pintado, asi que estos iconos NO usan
   `.rs-icono`: son una imagen y ya. Los de la barra de cifras y los de
   "Sí, los novios..." siguen siendo glifos, porque de esos no mando
   nada.

   LOS ARCHIVOS SE NORMALIZARON ANTES DE USARLOS. Los ocho venian en
   lienzos de 1254x1254 pero con el circulo a tamaños distintos —de 873 a
   1100 px—, asi que puestos en una caja igual habrian salido de tamaños
   distintos. Se recorto cada uno a su circulo y se escalaron todos a
   192px. El guion esta en el expediente del despliegue. */
.rs-icono-img {
    display: block;
    width: 5.5rem;
    height: 5.5rem;
}

/* Las tarjetas de "Sí, los novios son nuestros clientes" llevan el icono
   OSCURO sobre un circulo mas teñido. Es el unico bloque donde el diseño
   lo hace asi; en la barra de cifras y en los cuatro pasos el icono va en
   coral, y por eso esto va acotado a su seccion y no a `.rs-icono`.

   Medido sobre la lamina:

                     circulo        nucleo del dibujo
     diseño          #FDDDD2        #515567   <- oscuro, no coral
     antes           #FDECE7        #EE826B

   El par va junto: el circulo mas fuerte pide un dibujo mas oscuro, y al
   reves el conjunto pierde contraste, que es lo que se veia. */
/* 4rem y no 3.5: "los íconos van un poco más grandes", el 5 de noviembre
   de 2026. El dibujo sube con el circulo para que la proporcion no cambie. */
.rs-tarjetas-invitados .rs-icono {
    width: 4rem;
    height: 4rem;
    background-color: #FDDDD2;
    color: var(--rs-noche);
    font-size: 1.875rem;
}

.rs-tarjetas-invitados .rs-icono--azul {
    background-color: #D7E7F2;
    color: var(--rs-noche);
}

/* Las tarjetas de "Tú disfruta tu celebración" llevan el circulo MAS
   GRANDE, y el icono en coral.

   Que vayan en coral y no oscuros no es un descuido: es lo que hace la
   lamina. Los dos bloques usan tarjetas y circulos, pero el de invitados
   los pinta oscuros y este en coral. Por eso cada uno tiene su regla.

   Medido sobre la lamina, llevandolo todo a pixeles CSS:

                              circulo    dibujo
     "Si, los novios…"         68 px      32 px
     "Tu disfruta…"            94 px      48 px   <- un 40% mas grande
     aqui, antes               56 px      21 px

   El tinte del circulo si coincide ya con el del diseño (#FDECE8 contra
   nuestro #FDECE7), asi que eso no se toca: lo que faltaba era tamaño y
   grosor. Los pesos pasaron de `fal` a `far` en la vista. */
.rs-tarjetas-beneficios .rs-icono {
    width: 5.5rem;
    height: 5.5rem;
    font-size: 3.25rem;
}

/* "Anexo los íconos correctos y más grandes": 6.25rem contra los 5.5 que
   median los circulos dibujados con CSS. */
.rs-tarjetas-beneficios .rs-icono-img {
    width: 6.25rem;
    height: 6.25rem;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   Portada · el hero
   ========================================================================== */

.rs-hero {
    position: relative;
    /* Blanco y no el fondo marfil: la foto nueva trae su propio
       difuminado a BLANCO pintado dentro del archivo, y cualquier otro
       tono dejaria una costura donde la foto se acaba. */
    background-color: #FFF;
    /* La vista pasa las dos fotos en variables —la apaisada y el recorte
       de telefono— y aqui se elige. Ver `componentes/hero.blade.php`. */
    background-image: var(--rs-hero-foto);
    background-position: center right;
    background-size: cover;
    background-repeat: no-repeat;
    /* El encabezado va en `position-absolute fixed-top`, o sea flotando
       encima. Este relleno es el que impide que el antetitulo quede debajo
       del logo. */
    padding-top: clamp(7rem, 5rem + 7vw, 10rem);
    /* La otra mitad del hueco que la clienta midio sobre su captura. La
       primera esta arriba, en `.rs-seccion`. */
    padding-bottom: clamp(1.25rem, 0.75rem + 0.8vw, 1.75rem);
}

/* El velo que hace legible el texto sobre la foto.

   Va de opaco a transparente de izquierda a derecha, igual que en el diseño:
   la pareja esta a la derecha y el texto a la izquierda. Sin esto, el titulo
   en azul noche cae sobre el vestido blanco y se pierde.

   ESTE DEGRADADO MANDA DE 576 A 991, NO EN EL TELEFONO

   Debajo de 576 la portada tiene su propio encuadre y su propio velo, en
   el bloque que viene justo despues. Lo que sigue es como se llego a eso,
   porque explica por que aqui el velo sigue tan alto y alli no.

   "El fondo de pantalla sale muy blancoso", dijo la clienta mirando la
   portada en su telefono. Tenia razon, y el culpable no era solo el velo
   —0.94 arriba y 0.80 abajo, casi opaco de punta a punta— sino el
   ENCUADRE. Con `cover`, en un telefono de 390px solo entra el 23% derecho
   del archivo: justo el traje azul marino y los escalones, que es la zona
   OSCURA —luminancia 46 a 92 sobre 255—. El titulo va en azul noche y la
   entrada en gris: sobre eso, sin velo, no se leen.

   POR ESO EL VELO ESTABA EN SU TOPE Y NO SOBRANDO. Medido el 9 de
   noviembre con la foto de ella puesta, el peor pixel debajo de la entrada
   gris daba 4.13:1 CON EL VELO AL 0.96 —ya por debajo del 4.5:1 de la
   norma—; a 0.90 eran 3.64 y a 0.80, 2.90. Debajo de un mismo parrafo la
   foto iba de luminancia 0 a 255, asi que no habia opacidad que arreglara
   las dos cosas a la vez.

   LO QUE LO RESOLVIO FUE MOVER LA FOTO, NO BAJAR EL VELO. El 9 de
   noviembre por la tarde la clienta mando una maqueta del telefono con el
   vestido de la novia debajo del texto, y sobre blanco se lee: ahi el velo
   puede bajar a 0.60 y la foto por fin se ve. Esta en el bloque de abajo.

   Antes de eso se probo sacar el texto de encima de la foto —una banda con
   la foto arriba del todo y el texto debajo sobre blanco limpio— y se
   revirtio el mismo dia: los tres textos subian a 18.66:1, 4.69:1 y 4.85:1
   pero el hero crecia 260px y el titulo dejaba de entrar en la primera
   pantalla ("el texto no empieza desde el principio sino que se tiene que
   hacer scroll", Armando). Mover el encuadre consigue lo mismo sin tocar
   el alto.

   EL REPARTO POR FRANJAS DE ESTE DEGRADADO SE MIDIO PARA EL TELEFONO, que
   ya no lo usa. De 576 a 991 nadie ha pedido nada y aqui sigue igual que
   antes, pero sus cortes —46%, 55%, 64%— salieron de donde caia el
   buscador en una pantalla de 390px, no de 700. Esta anotado en la hoja de
   despliegue como pendiente, no como acabado. */
.rs-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(251, 249, 248, 0.96) 0%,
        rgba(251, 249, 248, 0.96) 46%,
        rgba(251, 249, 248, 0.60) 55%,
        rgba(251, 249, 248, 0.00) 64%
    );
}

/* LA FOTO EN EL TELEFONO: OTRO ENCUADRE Y UN VELO PAREJO

   "Adjunto cómo me gustaría la foto de fondo para la vista del celular. Es
   la misma foto de fondo que al final les envié, se las vuelvo a adjuntar
   pero con transparencia del 40% y está centrado el vestido de la novia y
   novio", la clienta el 9 de noviembre de 2026, con una maqueta.

   NO HAY FOTO NUEVA NI HACE FALTA, Y ESTA COMPROBADO. Se midio su maqueta
   contra el archivo que ya esta puesto, buscando escala y desplazamiento
   por correlacion: calza con 0.9994 sobre 1. O sea que es la misma foto al
   mismo tamaño; lo unico que hizo fue CORRERLA y aclarar el velo. Por eso
   esto son dos lineas de CSS y no un archivo mas que subir a mano.

   EL 75% SALE DE SU MAQUETA, MEDIDO. En ella se ve del archivo la franja
   que va de x=916 a x=1389 de los 1672 que tiene, o sea centrada en 1152.
   Con `cover` a 390px de pantalla y el hero en 921.7px de alto, la foto se
   dibuja a 1637.7px de ancho y sobran 1247.7 para repartir: para que el
   centro de la ventana caiga en ese 1152 hace falta el 74.8%.

   Y UN PORCENTAJE AGUANTA LOS TRES ANCHOS, que no era obvio: la ventana se
   abre o se cierra con el alto del hero, asi que el encuadre podria irse.
   Medido, la franja del archivo que se ve queda asi:

     320px   1029 .. 1329   centro 1179
     390px    955 .. 1354   centro 1154
     430px    925 .. 1364   centro 1144
     ella     916 .. 1389   centro 1152

   El centro se mueve 35px sobre 1672 entre el telefono mas estrecho y el
   mas ancho. Y a 430px la ventana es casi exactamente la suya, que es otra
   manera de decir que su captura salio de un telefono de ese ancho.

   Y ESE ENCUADRE ES EL QUE PAGA EL VELO BAJO. Antes la ventana era el 23%
   derecho —traje azul marino y escalones, luminancia 46 a 92— y debajo del
   texto no habia nada claro; ahora cae sobre el vestido, que es lo mas
   claro del archivo. El velo deja de ser un degradado y pasa a ser parejo
   al 0.60, que es el que ella pinto: medido sobre su maqueta en tres
   franjas distintas da 0.627, 0.599 y 0.602, y el color que mezclo es
   blanco (253 de 255 en los tres canales).

   CONTRASTE MEDIDO DESPUES, sobre el render real a 390px, tapando el texto
   en una segunda captura para mirar el fondo que queda debajo de cada
   letra. El peor 2% de esos pixeles:

     titulo       12.04:1    antes 16.39
     antetitulo    4.01:1    antes  4.23
     entrada       2.63:1    antes  4.14

   LA ENTRADA GRIS BAJA, Y CONVIENE SABER DONDE. Ese 2.63 no esta
   repartido: por columnas de 24px la linea va de 4.37 a 3.78 en todo su
   ancho y solo se hunde entre x=269 y x=317, que es donde las ultimas
   letras de "recibes el" tocan el canto del pantalon del novio. Son los
   pixeles suavizados del borde de dos o tres letras. La mediana debajo del
   parrafo entero es 4.33, que es mejor que el 4.21 de antes.

   NO HAY ENCUADRE QUE LO SALVE, Y ESTA PROBADO. Con el velo al 0.60, el
   peor 2% de la entrada da 3.03 al 62%, 2.77 al 66%, 3.17 al 70%, 3.44 al
   72% y 2.63 al 75%. El numero salta porque cada encuadre mete un objeto
   distinto debajo de las mismas palabras, pero ninguno llega al 4.5.

   LO QUE NO DA ES EL COLOR DEL TEXTO, NO EL VELO. `--rs-gris` es #70747B y
   sobre blanco puro ya se queda en 4.69:1; para que llegue a 4.5 sobre
   esta foto el fondo tendria que estar en luminancia 0.96, o sea blanco
   casi opaco, que es justo lo que ella llama "blancoso". O se oscurece ese
   gris o la entrada se queda donde esta. Preguntado al cliente el 6 de
   noviembre de 2026 y sin responder.

   SOLO HASTA 575.98. De 576 para arriba manda el degradado de mas arriba y
   la foto vuelve a anclarse a la derecha, que es lo que pide el diseño de
   escritorio —"la vista en la computadora está perfecta", ella el mismo
   dia—. */
@media (max-width: 575.98px) {
    .rs-hero {
        background-position: 75% center;
    }

    .rs-hero::before {
        background: rgba(251, 249, 248, 0.60);
    }
}

.rs-hero > .container { position: relative; z-index: 1; }

/* "Empezar los textos y botones más a la derecha, no tan pegado", el 5 de
   noviembre de 2026, con una raya dibujada sobre la captura.

   Medido: en su captura de 1263 px utiles el antetitulo, el titulo, la
   entrada y el boton empiezan todos en x=31, que es exactamente el margen
   del contenedor del tema —el 95% de la pantalla—, y la raya que ella
   trazo cae en x=41. En la lamina el contenido empieza en 51 de 1200, o
   sea en el 4.25% del ancho; aqui estaba en el 2.5%.

   1.25rem lo deja en 51 px a ese ancho, que es la proporcion de la lamina
   y pasa de largo la raya. Va sobre el contenedor del hero y no sobre
   `.container`, que lo comparte el sitio entero. */
@media (min-width: 992px) {
    .rs-hero > .container {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

/* 38rem y no 34: la entrada —"Tus invitados regalan fácil y tú recibes el
   100% del valor de los regalos"— va en un solo renglón en el diseño, y a
   34rem se partía en dos. */
.rs-hero__texto { max-width: 38rem; }

.rs-hero__entrada {
    font-size: var(--rs-entrada);
    color: var(--rs-gris);
    margin: 1.25rem 0 1.75rem;
}

@media (min-width: 992px) {
    /* 46rem y no 40: con 40 el hero quedaba en ~700px de alto y la foto,
       que es 16:9, se recortaba 110px por abajo — justo donde estan las
       piernas de ella y los zapatos de el. Se veia al novio entero y de la
       novia solo el vestido.

       Armando lo noto el 4 de noviembre de 2026: en el diseño la foto esta
       puesta a la derecha para que se vean los dos, y ahi se ven enteros
       porque aquel hero es mas alto en proporcion (~0.61 del ancho; este
       con 40rem iba en 0.49). Con 46rem el recorte baja a 74px y la pareja
       entra completa.

       No se subio a 50rem —que no recortaria nada— para que el hero no se
       coma la pantalla entera en una laptop y se siga viendo que la pagina
       continua. */
    .rs-hero { min-height: 46rem; }

    .rs-hero::before {
        background: linear-gradient(
            90deg,
            rgba(251, 249, 248, 0.97) 0%,
            rgba(251, 249, 248, 0.92) 30%,
            rgba(251, 249, 248, 0.55) 52%,
            rgba(251, 249, 248, 0.00) 68%
        );
    }
}

/* Y DE 1200 PARA ARRIBA NO HAY VELO

   "Esta foto debe estar más a la derecha y sin transparencia. Anexo
   foto", el 5 de noviembre de 2026. La foto que mando trae el
   difuminado PINTADO DENTRO DEL ARCHIVO: de 0 a ~57% del ancho es blanco
   que se va abriendo, y la pareja empieza donde acaba. O sea que el velo
   que poniamos encima se sumaba al suyo y era lo que dejaba la foto
   palida.

   No se quita en los tres tamaños, solo de 1200 para arriba, y hay un
   motivo medido: con `cover`, debajo de ese ancho el alto manda y la
   imagen se recorta por los lados. A 1000px de pantalla se le comen 294
   de los 1294 que ocuparia, y como va anclada a la derecha lo que se
   pierde es justo el blanco: la pareja se corre hasta x=445 y se mete
   debajo del titulo. Ahi el velo sigue haciendo falta.

   De 1200 para arriba el recorte baja a 31 px y la foto se basta sola. */
@media (min-width: 1200px) {
    .rs-hero::before { background: none; }
}

/* EL BOTON DE ABRIR MESA, DEL MISMO ANCHO QUE "BUSCAR"

   "Centrar el botón de 'Abrir mi mesa de regalos' y centrarlo como el de
   'Buscar'", la clienta el 9 de noviembre de 2026. Los dos botones estan
   uno encima del otro y no cuadraban: "Buscar" va apilado y ocupa el
   renglon entero, asi que se lee centrado, y este colgaba de la izquierda
   con 65px de aire a la derecha.

   Hubo tres versiones el mismo dia, y la tercera es esta: centrado con el
   ancho de su texto, luego de borde a borde de la pantalla, y al final
   —"mejor sí ponlo del mismo ancho del de buscar", Armando, mirandolo a
   400px— exactamente el ancho del otro boton.

   DE DONDE SALE EL 0.5rem: ES EL RELLENO DE LA CAJITA BLANCA DEL BUSCADOR.

   "Buscar" no mide el ancho de la columna sino el de esa cajita por dentro,
   que es la columna menos sus 0.5rem de relleno a cada lado. Copiando ese
   mismo margen aqui, los dos miden lo mismo sin depender de ningun numero
   en pixeles: medido a 390px, 315.5 los dos; a 320px, 256.0 los dos.

   Por eso el valor esta escrito como `0.5rem` y no como el resultado: si
   alguien cambia el relleno de `.rs-buscador-hero`, esto hay que cambiarlo
   con el, y asi al menos se ve de donde viene.

   Y HUBO QUE QUITAR UN PIXEL EN LA OTRA PUNTA. `.input-group-append` de
   Bootstrap trae `margin-left: -1px` para que el boton se monte sobre el
   borde del campo y no se vea una raya doble entre los dos; apilado no hay
   nada contra lo que solapar y lo unico que hacia ese pixel era sacar a
   "Buscar" 1px por fuera del relleno de su cajita. Con los dos botones del
   mismo ancho, uno encima del otro, se veia. Se quita donde se apila, que
   es `estilos-buscador-mesa.blade.php`, y no copiandoselo a este boton.

   Medido despues, a 320, 390, 400 y 430px: los dos empiezan y acaban en el
   mismo pixel.

   `display: flex` no es decoracion: `.rs-btn` es `inline-flex`, o sea una
   caja de linea, y asi no estira hasta los margenes que se le pongan.

   SOLO EN EL TELEFONO. De 576 para arriba el boton vuelve a su ancho, que
   es lo que pide el diseño: pegado a la izquierda, debajo del titulo. */
@media (max-width: 575.98px) {
    .rs-hero__texto .rs-btn {
        display: flex;
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }
}

/* --- El buscador dentro del hero -------------------------------------- */

/* La cajita blanca que envuelve al campo y al boton, como en el diseño. */
.rs-buscador-hero {
    background-color: #FFF;
    border-radius: 0.875rem;
    padding: 0.5rem;
    box-shadow: 0 10px 30px rgba(15, 18, 30, 0.08);
    /* 545px, que es lo que mide en el diseño.

       Estuvo en 576 un rato: con el texto de ayuda largo —"Busca por
       nombres, apellidos o numero de evento", 355px medidos en el
       navegador— y la lupa puesta, no cabia en 545 y salia cortado. Al
       adoptar el texto del diseño —280px— sobran 60px y la caja vuelve a
       su medida. Si alguna vez se alarga el texto, esto se entera. */
    max-width: 34rem;
}

/* El campo lleva su PROPIO contorno adentro de la cajita blanca, como en el
   diseño: una caja dentro de otra. La primera version lo dejo sin bordes y
   el campo se fundia con la cajita; Armando lo noto el 4 de noviembre de
   2026 ("creo que lleva un contenedor encima"). */
.rs-buscador-hero .form-control {
    border: 1px solid var(--rs-linea);
    box-shadow: none;
    background-color: #FFF;
    color: var(--rs-noche);
}

.rs-buscador-hero .form-control:focus {
    box-shadow: none;
    background-color: #FFF;
    border-color: var(--rs-azul);
}

.rs-buscador-hero .form-control::placeholder { color: #9AA0A8; }

/* El botón, dentro de la cajita blanca.

   El tema pone `text-transform: uppercase` a todo `.btn`, y en el diseño
   dice "Buscar", no "BUSCAR". Y las esquinas: en un `input-group` el botón
   pierde las de su izquierda, lo que aquí deja un rectángulo recto dentro
   de una caja redondeada. */
.rs-buscador-hero .btn {
    text-transform: none;
    font-weight: 500;
    border-radius: 0.625rem;
    padding: 0.75rem 1.75rem;
}

.rs-buscador-hero .form-control { padding-left: 1rem; }

/* --- La lupa, y el aire entre el campo y el boton ---------------------
   DE 768px PARA ARRIBA, Y NO ANTES. Debajo de 576px el parcial
   `estilos-buscador-mesa` baja el relleno del campo a 0.375rem porque los
   47 caracteres del texto de ayuda no caben en un telefono de 360px: esa
   medicion vino de una queja de la clienta y robarle 3rem para la lupa la
   tiraria. El corte es el mismo 768px donde el boton vuelve al lado del
   campo y la pantalla ya se parece al diseño.

   La lupa va de fondo del campo y no como elemento aparte. Asi no se toca
   el marcado de `buscador-mesa`, que lo comparte /regalar y tiene dos
   arreglos de octubre con pruebas encima; y `center` la centra sola sea
   cual sea la altura del campo, sin posicionarla a mano.

   El selector lleva cuatro clases a proposito: Bootstrap pone
   `border-radius: 0` al campo de un `input-group` con
   `.input-group > .form-control:not(:last-child)`, y hay que ganarle. */
@media (min-width: 768px) {
    .rs-buscador-hero .rs-buscador-mesa.input-group > .form-control {
        border-radius: 0.625rem;
        padding-left: 3rem;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='%230F121E' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='9.2' cy='9.2' r='7'/%3E%3Cpath d='M14.4 14.4 L19.6 19.6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: left 1.0625rem center;
        background-size: 1.125rem 1.125rem;
    }

    /* Bootstrap los pega con `margin-left: -1px` para que compartan borde.
       Aqui son dos cajas separadas, como en el diseño. */
    .rs-buscador-hero .input-group-append { margin-left: 0.5rem; }

    /* Y el boton redondo por los cuatro lados.

       En un `input-group` el boton va pegado al campo, asi que Bootstrap le
       cuadra las esquinas de la izquierda con
       `.input-group > .input-group-append > .btn`. Ese selector tiene tres
       clases y el de arriba —`.rs-buscador-hero .btn`— solo dos, asi que
       ganaba Bootstrap y el boton quedaba redondo a la derecha y recto a la
       izquierda. Lo noto Armando el 4 de noviembre de 2026.

       Aqui ya no estan pegados —se separan con el `margin-left` de arriba—,
       asi que no hay ninguna razon para cuadrarlas. Mismo truco que con el
       campo: se le suben las clases al selector para ganarle. */
    .rs-buscador-hero .rs-buscador-mesa.input-group > .input-group-append > .btn {
        border-radius: 0.625rem;
    }
}

/* --- La barra de cifras ----------------------------------------------- */

.rs-cifras {
    position: relative;
    z-index: 1;
    margin-top: clamp(2.5rem, 1rem + 5vw, 4.5rem);
    /* Blanco opaco. "El fondo de esta franja tampoco debe de tener
       transparencia y que sea de color blanco", el 5 de noviembre de
       2026. Estaba en durazno al 93%, asi que la foto se transparentaba
       por detras de los numeros. */
    background-color: #FFF;
    border: 1px solid var(--rs-linea);
    border-radius: 1.25rem;
    padding: 1.5rem clamp(1rem, 0.5rem + 2vw, 2.5rem);
    box-shadow: 0 10px 34px rgba(15, 18, 30, 0.07);
}

/* La barra NO ocupa todo el contenedor: va sangrada, como en el diseño.

   Medido sobre la lamina, tomando como referencia el borde izquierdo del
   boton coral y el del icono del carrito, que marcan el contenedor:

     contenedor   51 .. 1149 px   (1098 de ancho, en un lienzo de 1200)
     barra       115 .. 1076 px   ( 961 de ancho)

   961/1098 = 87.5%, centrada. Va en porcentaje y no en pixeles para que el
   sangrado siga siendo el mismo en cualquier pantalla.

   DE 1200px PARA ARRIBA, Y NO DESDE 992. Las tres cifras se ponen en fila
   desde 768px, pero hasta 1200 el ancho da apenas para los pies —"han
   confiado en RegalaShop" mide 189px, medido— y quitarle otro 12.5% los
   parte en dos renglones. El diseño es una lamina de escritorio y no dice
   nada de la tableta, asi que en esa franja la barra sigue usando el
   contenedor completo, que es como se veia hasta ahora. */
/* LA BARRA SE AJUSTA A SUS TRES CIFRAS, Y NO AL REVES

   Hasta el 5 de noviembre de 2026 la barra medía el 87.5% del contenedor
   —el sangrado medido en la lámina— y las tres cifras iban centradas en
   tres celdas iguales. Armando dijo ese día que se veían "muy separadas
   entre sí", y al medirlo apareció algo que el 87.5% escondía: el hueco
   entre un grupo y el siguiente NO ERA UN NUMERO, dependía del ancho de
   la pantalla.

     ancho útil   hueco vacío entre cifras
       1200 px       70 px
       1263 px       87 px
       1440 px      110 px
       1750 px      174 px   <- dos veces y media el de la lámina

   El motivo es que el contenedor crece y el contenido no: el texto de
   cada cifra mide lo que mide, así que todo lo que sobra de la celda se
   reparte a sus lados. En una pantalla grande las tres cifras se iban
   cada una a su esquina.

   Estrechar la barra lo arregla en un ancho y lo deja igual en los
   demás, así que el arreglo no es un porcentaje mejor: es quitar la
   regla de tres celdas iguales. Ahora cada celda mide lo que mide su
   cifra, llevan un relleno fijo a los lados y la barra se ajusta al
   conjunto.

   Lo que se gana, aparte del hueco constante:

     · la raya queda a la MISMA distancia del texto que termina y del
       círculo que empieza, en cualquier pantalla. Antes dependía de lo
       ancho que fuera cada grupo, y de ahí salían las dos quejas del 4
       de noviembre —"quedaron muy pegadas a los iconos"—;
     · no se puede partir en dos renglones. Con las celdas fijas el grupo
       más ancho llegó a quedarse sin un solo píxel de holgura a 1200 px:
       una tipografía suplente un poco más ancha lo habría roto.

   A 1200 px —el ancho de la lámina— la barra queda en el 89% del
   contenedor, que es prácticamente el sangrado del diseño. De ahí para
   arriba deja de crecer, que es justo lo que se quería. */
@media (min-width: 1200px) {
    .rs-cifras {
        width: -moz-fit-content;
        width: fit-content;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding-left: 2rem;
        padding-right: 2rem;
    }

    /* `nowrap` porque las celdas ya no suman 100%: sin esto Bootstrap
       podría bajar la tercera de renglón en cuanto sobrara un píxel. */
    .rs-cifras .row {
        flex-wrap: nowrap;
        justify-content: center;
    }

    /* Esto es lo que deshace las tres columnas iguales de Bootstrap
       —`flex: 0 0 33.33%` y `max-width: 33.33%`— para que cada celda
       mida su contenido.

       2.375rem a cada lado dan 76 px de hueco entre una cifra y la
       siguiente, y la raya a 38 px de cada una.

       EL NUMERO SE BUSCO POR TANTEO Y EL RECORRIDO QUEDA AQUI, PORQUE EL
       MARGEN RESULTO ESTRECHO Y SIN ESTO SE REPITE:

         87 px   lo que habia con las celdas iguales, a 1263px. Armando:
                 "se siguen viendo muy separados entre si".
         70-77   lo que mide en la lamina, segun el hueco.
         48 px   primer intento con esta estructura. Armando: "ya me
                 gusta mas pero ahora quedo muy junto".
         65 px   segundo. "Aun se ve un poco junto".
         76 px   este. Es el punto medio exacto entre los dos que
                 rechazo —65 y 87— y cae dentro de lo que mide la
                 lamina, en su extremo alto.

       Y OJO CON UNA COSA, que es la que hacia falta tantear: este numero
       es constante en todas las pantallas. Antes no lo era —iba de 70 a
       174 segun el ancho—, asi que "se ve junto" o "se ve separado"
       dependia de en que monitor se mirara. Por eso los tres primeros
       intentos fallaron por sitios distintos. */
    .rs-cifras__celda {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
        padding-left: 2.375rem;
        padding-right: 2.375rem;
    }
}
.rs-cifra { display: flex; align-items: center; gap: 1rem; }

/* En fila, cada cifra va centrada en su celda.

   Las tres celdas miden lo mismo —son `col-md-4`— pero su contenido no:
   medido a 1440px, 264px la primera, 220 la segunda y 281 la tercera. Con
   el contenido pegado a la izquierda, lo que sobra de cada celda se
   acumula todo del lado derecho, asi que el separador quedaba a 94px del
   texto que termina y a 20px del circulo que empieza. Por eso se veia
   pegado al icono aunque las celdas ya tuvieran relleno; lo noto Armando
   el 4 de noviembre de 2026.

   Centrando, ese sobrante se reparte a los dos lados y la raya queda entre
   los dos bloques, como en el diseño. No queda exacta —los bloques siguen
   midiendo distinto— pero pasa de 94/20 a 57/79.

   Desde 768px, que es donde aparecen los separadores. Apiladas no hay nada
   que separar y el centrado no aplica. */
@media (min-width: 768px) {
    .rs-cifra { justify-content: center; }
}

/* El icono, mas grande que en el resto de la pagina.

   Medido sobre la lamina: el circulo mide 57.6px y el dibujo 27.3, o sea
   que el icono ocupa el 47% del circulo. Con el tamaño de base se quedaba
   en 39% y, sumado al trazo fino, el coral casi no se distinguia del
   durazno del circulo. Armando lo reporto el 4 de noviembre de 2026.

   2rem y no 1.7: el alto del dibujo es ~0.85 del tamaño de letra, no el
   tamaño completo. La otra mitad del arreglo esta en `config/portada.php`:
   los iconos pasaron de `fal` a `far`/`fas`. */
.rs-cifra .rs-icono { font-size: 2rem; }

/* Y las barras se centran a mano, porque el glifo no esta centrado.

   `fa-signal-alt-3` es de la familia de las barras de cobertura: dibuja 3
   de 4 posiciones y CONSERVA la caja de las cuatro, para que las barras no
   se muevan al cambiar de estado. Flexbox centra esa caja, no el dibujo,
   asi que el icono se veia corrido a la izquierda y mas chico que los
   otros dos. Lo noto Armando el 4 de noviembre de 2026.

   Medido sobre la propia fuente, dibujando cada glifo a 64px y buscando la
   caja de su tinta:

     regalo y corazon   tinta 64x60   centro en (-1.5, -7.5)
     signal-alt-3       tinta 52x48   centro en (-11.5, +0.5)

   De ahi salen los dos numeros: 64/52 = 1.23em iguala el ancho del dibujo
   al de los otros dos, y el desplazamiento lleva su centro al mismo punto
   que el de ellos. En `em` para que sigan al tamaño del icono.

   `inline-block` porque `transform` no aplica a un elemento en linea. */
.rs-cifra .fa-signal-alt-3 {
    display: inline-block;
    font-size: 1.23em;
    transform: translate(0.16em, -0.1em);
}

/* El tamaño baja un escalon en la franja media, y no es capricho.

   Playfair Display es el SUPLENTE de The Youngest Serif y es mas ancha:
   "40,000+ regalos" mide 249px a 34px, contra los 196px que ocupa en el
   diseño. Con la barra sangrada, de 1200 a 1500px eso no cabe en una linea
   y el numero se parte en dos.

   La rampa esta calculada contra el ancho real de la celda. El contenedor
   del hero es `container container-xxl`, que en este tema son 95% de la
   pantalla desde 1200px —no el 85% del `.container` a secas, que es lo que
   dice el comentario de `estilos-buscador-mesa`— y 1750px fijos desde ahi.
   Descontando el relleno de la barra y el de las celdas, al texto le
   quedan 199px a 1200, 245 a 1366 y 377 de 1750 en adelante; la rampa se
   queda por debajo de eso en todo el recorrido y llega al tamaño del
   diseño hacia los 1765px.

   El dia que llegue la tipografia definitiva se puede volver a
   `1.1rem + 1.4vw`, porque el problema se va con ella. */
.rs-cifra__dato {
    font-family: var(--rs-serif);
    /* 600 y no el 500 del resto de los titulos: en el diseño las cifras
       son visiblemente mas gruesas que los titulos, y con 500 se veian
       delgadas al lado de la lamina. */
    font-weight: 600;
    font-size: clamp(1.5rem, 0.25rem + 1.7vw, 2.125rem);
    line-height: 1.1;
    color: var(--rs-noche);
    margin: 0;
}

.rs-cifra__pie {
    font-size: 0.9375rem;
    color: var(--rs-gris);
    margin: 0.125rem 0 0;
}

/* Los separadores entre cifras. Solo donde las tres caben en un renglon;
   apiladas no separan nada, estorban. */
/* Las rayas van en gris y no en el beige de los demas bordes: "las líneas
   de separación en nuestro gris claro para que se distinga", el 5 de
   noviembre de 2026. El porque del tono exacto esta arriba, donde se
   define `--rs-linea-gris`. */
@media (min-width: 768px) {
    .rs-cifras__celda + .rs-cifras__celda { border-left: 1px solid var(--rs-linea-gris); }
}

/* ==========================================================================
   Portada · los cuatro pasos
   ========================================================================== */

.rs-paso { text-align: center; }

/* EL TITULO DEL PASO TIENE UN TECHO, Y NO ES UN GUSTO

   La clienta pidio el 5 de noviembre de 2026 "más grande los títulos de
   cada paso" y, en el mismo mensaje, compactar las columnas. Las dos
   cosas juntas no caben, y se puede demostrar con numeros.

   Medido en el navegador, "Tus invitados regalan" —el titulo mas largo—
   ocupa 284 px a 30 px de cuerpo con Playfair Display. En su lamina ese
   mismo titulo ocupa 192 px y va en un renglon, porque alli la
   tipografia es The Youngest Serif, que es mas estrecha: a igualdad de
   altura mide un 9% menos, y encima el cuerpo del diseño son 22 px.

   O sea que el renglon unico de la lamina lo da la tipografia, no el
   tamaño. Con la suplente, el mayor cuerpo que cabe en una columna de
   280 px es 26, que es el que tenia. Mas grande lo parte en dos, y
   "Comparte tu / mesa" se ve peor que un titulo un poco menor.

   LO QUE SI CRECIO EN ESTE BLOQUE: el icono paso de 72 a 88 px y el
   numero de 36 a 48. Son los otros dos elementos que ella señalo con la
   misma flecha, y esos no tienen tope.

   EL DIA QUE LLEGUE LA TIPOGRAFIA ESTO SE QUITA. Con The Youngest Serif
   el titulo entra en un renglon al tamaño que quiera. */
.rs-paso .rs-subtitulo {
    font-size: clamp(1.375rem, 1.1rem + 1vw, 1.625rem);   /* 22 -> 26 px */
}

/* El parrafo va mas estrecho que su columna, igual que en la lamina: ahi
   el titulo llega a 192 px y el parrafo nunca pasa de 168. Es lo que hace
   que los textos caigan en tres renglones, que es como los describio la
   clienta.

   184 px Y NO 216. Con 216 el paso 2 se quedaba en dos renglones y en la
   lamina va en tres; Armando lo noto el 5 de noviembre de 2026 y pregunto
   si habia que subir el cuerpo del texto. Medido, no: un punto mas —17px—
   no cambia nada y hacen falta 18, que dejarian este parrafo como el texto
   corrido mas grande de la pagina y ademas por encima de los ~15px de la
   lamina. Lo que hay que mover es el ancho, que es donde esta la
   diferencia: el parrafo de la lamina mide 168 px y el nuestro medía 216.

     cuerpo 16px, caja 216   renglones 2, 2, 3, 3
     cuerpo 17px, caja 216   renglones 2, 2, 3, 3   <- un punto no alcanza
     cuerpo 18px, caja 216   renglones 2, 3, 3, 3
     cuerpo 16px, caja 184   renglones 2, 3, 3, 3   <- este

   NO TOCA LOS TITULOS, y se comprobo porque era la duda razonable: el tope
   va en el parrafo, asi que la caja del `h3` sigue siendo la columna
   entera —250 px— y los cuatro titulos siguen en un renglon.

   SOLO DE 992 PARA ARRIBA. Mas abajo los pasos se apilan de dos en dos o
   de uno en uno, y ahi el parrafo tiene que usar el ancho que le toque:
   un texto de 184 px centrado en un telefono de 360 se lee como una
   columna de periodico. La regla estaba sin acotar y eso era un descuido.

   LA CLASE PROPIA TAMBIEN SE AGREGO AQUI. Iba como `.rs-paso p`, que
   tambien casaba con el numero del paso —que es un `<p>`— y le ponia el
   mismo tope sin que hiciera falta. No se veia porque el numero cabe de
   sobra, pero era casualidad. */
@media (min-width: 992px) {
    .rs-paso__texto {
        max-width: 11.5rem;
        margin-left: auto;
        margin-right: auto;
    }
}

/* 3rem y no 2.25: "más grandes los números", el 5 de noviembre de 2026.
   Va en la misma tanda que el titulo de cada paso, que sube con la escala
   de `--rs-subtitulo`. */
.rs-paso__numero {
    font-family: var(--rs-serif);
    font-size: 3rem;
    line-height: 1;
    color: var(--rs-azul);
    margin: 1rem 0 0.5rem;
}

/* EN CELULAR LOS CUATRO PASOS SE ACUESTAN

   "Los pasos de cómo funciona siento que se alargan mucho", el 6 de
   noviembre de 2026, mirando la portada en su telefono. Medido antes de
   tocar nada, a 390px de pantalla: cada celda 247px de alto mas 48 de
   separacion, o sea 1,180px de los 7,661 que medía la pagina entera. Casi
   tres pantallas de telefono para cuatro frases.

   De donde sale ese alto: apilados, los cuatro elementos del paso —icono,
   numero, titulo y texto— van uno debajo de otro y CENTRADOS, que es como
   deben ir en escritorio, donde son cuatro columnas de una fila. En un
   telefono no hay columnas: hay una lista. Y una lista se lee mejor
   acostada, con el icono a la izquierda haciendo de viñeta.

   Son 99px menos por paso —396 en total, un tercio de la seccion— y
   ninguno se pierde: lo que se quita es aire vertical, no contenido.

   SE HACE CON GRID Y SIN TOCAR EL MARCADO. El icono ocupa la columna de
   la izquierda y las tres filas; numero, titulo y texto caen solos en la
   columna derecha, en el orden en que estan escritos. La vista se
   comparte con "¿Cómo funciona?" del punto 5, asi que cuanto menos se
   toque, mejor.

   SOLO DEBAJO DE 576px. De ahi para arriba los pasos ya van de dos en dos
   —`col-sm-6`— y cada uno tiene su columna de verdad: ahi el centrado del
   diseño vuelve a ser el correcto.

   Y SON UNA LINEA DE TIEMPO, NO UNA LISTA

   La primera version de esto los acosto y ya: icono a la izquierda, y a la
   derecha el numero, el titulo y el texto, uno debajo de otro. Funcionaba
   —la seccion bajo de 1,261px a 786— pero Armando pregunto el mismo dia si
   no habria una forma mejor de enseñarlos, y la habia.

   Lo que fallaba es que se leian como CUATRO COSAS SUELTAS. En escritorio
   no pasa: ahi los cuatro van en fila, encadenados por un galon y
   separados por una raya vertical, y se entiende de un vistazo que es una
   secuencia. Apilados se perdia eso, que es justamente lo que el bloque
   tiene que decir: "4 pasos, no más", en orden.

   Asi que se encadenan en vertical, que es el mismo recurso girado 90
   grados: una raya que baja de un icono al siguiente.

   Y EL NUMERO SE MUDA AL CIRCULO. Tenia renglon propio, lo que costaba
   ~30px por paso y empujaba el titulo hacia abajo. Como medalla sobre el
   icono no ocupa alto ninguno, se lee antes —esta pegado a la figura que
   numera— y de paso deja el titulo arriba del todo, alineado con el
   circulo. La seccion baja de 786px a 668.

   Las tres piezas van juntas a proposito: la raya sin numeros seria
   decoracion, y los numeros sin raya serian una lista numerada. */
@media (max-width: 575.98px) {
    /* La separacion entre pasos deja de ser margen de la columna y pasa a
       ser relleno del paso. Tiene que ser asi: la raya que encadena se
       dibuja DENTRO del paso, y con margen por fuera se cortaria entre uno
       y otro. En la vista va `mb-0 mb-sm-5`, que es la otra mitad. */
    .rs-paso {
        position: relative;
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 1.125rem;
        text-align: left;
        padding-bottom: 1.75rem;
    }

    .rs-pasos__celda:last-child .rs-paso { padding-bottom: 0; }

    /* La raya que baja de un icono al siguiente.

       `top` es el alto del circulo mas un respiro, y `bottom: 0` la deja
       justo donde empieza el paso de abajo, asi que la cadena no tiene
       cortes. Va en el centro del circulo: 2rem de los 4 que mide.

       No la lleva el ultimo, que no encadena con nada. */
    .rs-pasos__celda:not(:last-child) .rs-paso::after {
        content: "";
        position: absolute;
        left: 2rem;
        top: 4.5rem;
        bottom: 0;
        border-left: 1px solid var(--rs-linea);
    }

    /* El icono. Los dos selectores porque es el PNG de la clienta cuando
       lo hay y el circulo de CSS cuando falta. `align-self: start` para
       que se quede arriba y no se centre contra un texto que puede medir
       el triple. */
    .rs-paso > .rs-icono-img,
    .rs-paso > .rs-icono {
        grid-column: 1;
        grid-row: 1 / span 2;
        align-self: start;
        width: 4rem;
        height: 4rem;
    }

    /* El numero, como medalla en la esquina del circulo.

       VA ABSOLUTO Y NO EN LA REJILLA, y la primera version lo hizo al
       reves: puesto en la misma celda que el icono quedaba a la altura
       que tuviera el TITULO, porque la fila la mide el titulo. Con uno de
       un renglon caia bonito, por casualidad; con uno de dos —a 320px
       pasa— se bajaba solo. La medalla pertenece al circulo, asi que se
       mide contra el circulo.

       El circulo son 4rem y la medalla 1.625: con 2.5rem de desplazamiento
       se monta en la esquina de abajo a la derecha y la muerde un poco,
       que es lo que la hace leerse como pegada a el y no como otra cosa
       al lado.

       Azul relleno con el numero en blanco: sobre el durazno palido del
       circulo es el contraste mas alto que da la paleta sin meter un
       color nuevo. */
    .rs-paso .rs-paso__numero {
        position: absolute;
        left: 2.5rem;
        top: 2.5rem;
        width: 1.625rem;
        height: 1.625rem;
        margin: 0;
        font-size: 0.9375rem;
        line-height: 1.625rem;
        text-align: center;
        color: #FFF;
        background-color: var(--rs-azul);
        border-radius: 50%;
    }

    .rs-paso .rs-subtitulo {
        grid-column: 2;
        grid-row: 1;
        font-size: 1.375rem;
        /* Para que la primera linea del titulo quede a la altura de la
           mitad de arriba del circulo y no pegada a su borde. */
        margin-top: 0.375rem;
    }

    .rs-paso__texto {
        grid-column: 2;
        grid-row: 2;
    }
}

/* La linea vertical entre pasos y el galon que los encadena. Los dos
   desaparecen apilados, donde no hay nada que encadenar.

   Los pseudoelementos cuelgan de la COLUMNA, no de `.rs-paso`. Cada paso
   vive dentro de su propia columna de Bootstrap, asi que los `.rs-paso` no
   son hermanos entre si y un `+` entre ellos no casa nunca: la primera
   version de esta regla estaba escrita asi y no pintaba nada. */
@media (min-width: 992px) {
    .rs-pasos__celda { position: relative; }

    .rs-pasos__celda + .rs-pasos__celda::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0.5rem;
        bottom: 0.5rem;
        border-left: 1px solid var(--rs-linea);
    }

    /* El galon. El fondo blanco es para que tape la linea justo detras.

       VA CENTRADO EN LA CELDA, Y SE LLEGO AHI DANDO UN RODEO LARGO

       Tres sitios distintos, en este orden:

         `top: 1.9rem`   unos 5px por debajo del centro del circulo: ni
                         centrado ni en otro lado, que es lo que se lee
                         como mal puesto.
         `top: 3.1rem`   copiando la lamina, donde el galon va a 0.40
                         diametros del centro, casi en el borde de abajo
                         del circulo. Armando lo siguio viendo
                         descentrado y pidio centrarlo.
         `top: 2.25rem`  el centro del circulo, que es lo que el pedia.

       El 5 de noviembre de 2026 la clienta dijo que seguian mal: "las
       flechitas no van tan arriba, centrarlas". Y tiene razon en algo
       que los tres intentos anteriores daban por supuesto: lo que la
       flecha separa no son dos CIRCULOS sino dos PASOS enteros —circulo,
       numero, titulo y texto—, asi que el centro que el ojo busca es el
       de la celda, no el del circulo.

       De ahi `top: 50%`, que es el medio de la columna. Ya no depende del
       tamaño del circulo, asi que agrandarlo —cosa que paso en esta misma
       tanda— no lo vuelve a descolocar. La raya vertical de al lado va de
       borde a borde de la celda, de modo que ahora los dos estan
       centrados sobre lo mismo.

       El peso solido si viene de la lamina: con `300` se veia como una
       rayita. */
    .rs-pasos__celda + .rs-pasos__celda::after {
        content: "\f054";                      /* fa-chevron-right */
        font-family: 'Font Awesome 5 Pro';
        font-weight: 900;
        position: absolute;
        left: -0.5rem;
        top: 50%;                              /* el medio de la celda */
        transform: translateY(-50%);
        font-size: 1rem;
        line-height: 1;
        color: var(--rs-azul);
        background-color: #FFF;
        padding: 0.375rem 0;
    }
}

/* ==========================================================================
   Portada · el bloque del video
   ========================================================================== */

/* "Compactar también más la sección" y "dar más espacio entre los bordes
   hacia el botón, hacia la línea y de la línea hacia los textos", el 5 de
   noviembre de 2026. Son dos cosas a la vez: la tarjeta se estrecha —con
   `.rs-compacto` en la vista— y al mismo tiempo se le da mas relleno por
   dentro, que es lo que separa el boton del borde. */
.rs-video {
    /* En una variable porque la columna de la tableta tiene que restarlo
       exacto para apoyarse en el borde de la tarjeta. Si cambia el
       relleno, el recorte la sigue solo. */
    --rs-video-relleno: clamp(2rem, 1.25rem + 2.6vw, 3.5rem);
    background-color: var(--rs-gris-muy-claro);
    border-radius: 1.25rem;
    /* El relleno de arriba y abajo NO es el mismo que el de los lados.

       El de los lados es el que pidio la clienta —"dar mas espacio entre
       los bordes hacia el boton"— y se queda. El vertical bajo a 2.25rem
       el 5 de noviembre de 2026, a peticion de Armando: "quiza debas
       hacer el recuadro menos alto". Son 34 px menos de alto, y como la
       tableta va anclada al borde de abajo, los 34 se convierten en 34
       px mas de tableta asomando por arriba. */
    padding: 2.25rem var(--rs-video-relleno);
}

/* El titulo de este bloque no usa la escala general.

   Comparte clase con "¿Cómo funciona?" pero no comparte sitio: aquel
   tiene el ancho entero de la pagina y este una media columna de ~330 px
   al lado del boton de reproducir. A 48 px "Mira cómo regalan tus
   invitados" se parte en cuatro renglones y el bloque se descuadra.

   36 px sale de la lamina: alli ese titulo mide 40 px y va en dos
   renglones de 302 px. Con Playfair, que es mas ancha, 40 px darian 326
   px sobre 332 disponibles —entraria por seis pixeles, o sea que no
   entra— y 36 dan 294 con holgura. */
.rs-video .rs-titulo {
    font-size: clamp(1.625rem, 1.1rem + 1.7vw, 2.25rem);  /* 26 -> 36 px */
}

.rs-video__boton-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    border: 0;
    border-radius: 50%;
    background-color: var(--rs-azul);
    color: #FFF;
    font-size: 1.5rem;
    padding-left: 0.35rem;   /* el triangulo no esta centrado en su caja */
    cursor: pointer;
}

.rs-video__boton-play:hover { background-color: var(--rs-azul-oscuro); }

.rs-video__marco {
    width: 100%;
    border-radius: 0.875rem;
    background-color: var(--rs-noche);
    display: block;
}

/* El aire a los dos lados de la raya. Iba con las utilidades `pl-4 ml-4`
   del tema —1.5rem cada una— y se quedaron cortas; aqui se puede subir
   sin tocar la vista.

   En celular no hay raya pero el boton y el texto siguen lado a lado, asi
   que algo de separacion hace falta igual. */
.rs-video__separador { padding-left: 1.25rem; }
@media (min-width: 992px) {
    .rs-video__separador {
        border-left: 1px solid #D7E2EA;
        padding-left: 2.5rem;
        margin-left: 2.5rem;
    }
}

/* La foto de la tableta, que es lo que la lamina pone a la derecha del
   bloque. Llego el 5 de noviembre de 2026 —"les adjunto la foto de la
   pantalla del iPad"— y sustituye al reproductor, que hasta ese dia
   salia en negro ocupando su sitio.

   El archivo lleva el fondo de la tarjeta aplanado adentro en vez de
   transparencia, porque en PNG con alfa pesaba 1.1 MB y en JPG sobre ese
   mismo gris pesa 130 KB. Si alguna vez cambia el fondo de `.rs-video`
   hay que reexportarla, y por eso queda dicho aqui. */
.rs-tableta {
    display: block;
    width: 100%;
    height: auto;
}

/* La tableta entera es pulsable. El boton no tiene que parecer un boton:
   solo recoge el clic y le da foco de teclado a la imagen. */
.rs-tableta__boton {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

/* LA TABLETA SE SALE DEL RECUADRO, Y EL TRUCO ESTA EN LA MASCARA

   "¿Crees que podamos lograr el efecto de que la tablet esta sobre el
   recuadro?", el 5 de noviembre de 2026. En la lamina la tableta llena
   casi todo el alto de la tarjeta y se apoya en su borde; aqui salia
   flotando en medio, bastante mas chica.

   EL PROBLEMA NO ERA EL TAMAÑO SINO EL FONDO. El archivo lleva el gris de
   la tarjeta aplanado dentro —se hizo asi porque en PNG con alfa pesaba
   1.1 MB y en JPG sobre ese gris pesa 130 KB—, de modo que en cuanto la
   imagen asoma fuera del recuadro ese gris se ve como un rectangulo sobre
   el blanco de la pagina.

   Las opciones medidas, para que no haya que volver a medirlas:

     PNG con alfa a 1100 px    949 KB
     PNG con alfa a  760 px    493 KB
     JPG + mascara             130 + 44 KB   <- esto

   La mascara es la silueta de la tableta, sacada del canal alfa del
   archivo original, y `mask-image` recorta el JPG con ella: el gris
   desaparece y el borde queda suavizado, igual que con transparencia de
   verdad.

   LA SILUETA VA EN EL CANAL ALFA DE LA MASCARA, no en su brillo. Se
   probo primero en escala de grises —que pesaba 11 KB en vez de 44— y no
   recortaba nada: `mask-image` usa el alfa por omision, asi que una
   imagen opaca enmascara la imagen entera y no se nota. `mask-mode:
   luminance` lo arreglaria, pero no esta en WebKit con prefijo, asi que
   sale mas barato pagar los 33 KB.

   EL RECORTE ES LIMPIO Y POR ESO FUNCIONA. Se comprobo el perfil del
   alfa en el borde de la tableta: pasa de 0 a opaco en tres pixeles, o
   sea que es antialiasing y no una sombra. Si algun dia el archivo trae
   sombra, la mascara deja de valer y hay que volver al PNG.

   VA DENTRO DE UN `@supports` a proposito. Donde no haya mascaras la
   tableta se queda como estaba —dentro del recuadro, sin asomar—, que se
   ve bien. Sin esa condicion se veria el rectangulo gris. */
@supports ((-webkit-mask-image: url('../images/rediseno/tableta-mascara.png')) or (mask-image: url('../images/rediseno/tableta-mascara.png'))) {
    @media (min-width: 992px) {
        /* El recorte es obligatorio, no decorativo.

           La tableta asoma 4rem por la derecha de su columna, y la
           columna acaba donde acaba la tarjeta. Medido a 1200px de
           pantalla, el borde derecho de la tarjeta cae en 1160 y la
           tableta llegaria a 1224: 24 px fuera de la ventana, o sea
           barra de desplazamiento horizontal en TODA la pagina.

           `clip` y no `hidden`: con `overflow-x: hidden` el eje
           vertical pasa a `auto` por especificacion y la seccion se
           convierte en un contenedor de scroll, que aqui recortaria la
           sombra de la tarjeta. `clip` recorta y ya. */
        .rs-seccion-corta:has(.rs-video),
        .rs-video-recorte { overflow-x: clip; }

        /* LA TABLETA SE CORTA ABAJO Y ASOMA ARRIBA

           "En la parte de abajo deberia desaparecer y en la parte de
           arriba sobresalir del recuadro", el 5 de noviembre de 2026.

           POR QUE ESTA FUERA DEL FLUJO, QUE ES LO QUE COSTO ENTENDER

           Mientras la tableta fuera una columna normal, el alto de la
           tarjeta lo mandaba ELLA: al agrandarla para que asomara por
           arriba, la tarjeta crecia con ella y volvia a quedar dentro.
           Daba igual cuanto se agrandara; es una persecucion que no
           termina. Y como la imagen tiene una proporcion fija, crecer a
           lo alto significa crecer a lo ancho, asi que tampoco se podia
           tirar mucho de ahi sin que se saliera de la pantalla.

           En `absolute` el alto de la tarjeta lo marca la columna de la
           izquierda —el boton, el titulo, el texto— y la tableta ya no
           cuenta. Entonces si puede ser mas alta que la tarjeta.

           Las piezas:

             `bottom: 0`  el fondo de la columna, en el borde de la
                          tarjeta. Las posiciones absolutas se miden
                          contra la caja de RELLENO, que al no haber
                          borde acaba donde acaba la tarjeta: con 0
                          basta. Restarle ademas el relleno —que fue el
                          primer intento— la bajaba 53 px de mas y el
                          corte caia fuera.
             `clip-path`  recorta SOLO por abajo: los tres valores
                          negativos dejan pasar lo que asoma por arriba
                          y por los lados, y el 0 es el corte.
             el margen    inferior del boton, en negativo: la imagen
                          baja por debajo de ese corte y lo que sobra
                          desaparece. Eso es lo que hace que la tableta
                          se "meta" en la tarjeta en vez de apoyarse.

           La lamina hace lo mismo: alli la tableta se ve de 525x279 px
           pero su proporcion real daria 392 de alto, o sea que le faltan
           113 por abajo. Esta cortada. */
        .rs-video { position: relative; }

        /* `right` POSITIVO: la tableta se mete, no se sale por la derecha.

           Estuvo en -3rem, asomando 48 px por fuera de la tarjeta, y
           Armando lo corrigio el 5 de noviembre de 2026: "deberia estar
           un poco mas a la izquierda porque en la imagen, del lado
           derecho todavia se ve parte del recuadro". Y es asi: medida la
           lamina, entre el borde derecho de la tableta y el de la tarjeta
           quedan 41 px, que a nuestra escala son unos 43.

           Con 1.5rem quedan 24 px de tarjeta a la vista, iguales en
           todos los anchos. Estuvo en 2.25rem —36 px— hasta que Armando
           pidio separar la tableta otro poco del texto: los 12 px que
           pierde el recuadro por la derecha se los gana el hueco por la
           izquierda.

           La caja del titulo y la de la tableta se solapan 21 px, y no
           pasa nada: la tableta esta girada, asi que su punto mas a la
           izquierda esta ABAJO, por debajo del texto. A la altura del
           titulo su borde va 70 px mas a la derecha. Comprobado en el
           render a 1100 y a 1263. */
        .rs-video__columna {
            position: absolute;
            right: 1.5rem;
            bottom: 0;
            /* `max-width: none` NO SOBRA: `col-lg-6` trae `max-width: 50%`
               y, aunque las propiedades de flex dejan de aplicar al sacar
               la columna del flujo, el tope de ancho sigue en pie. Estuvo
               un rato con `width: 64%` sin que se notara nada, porque el
               50% lo recortaba antes.

               Y los porcentajes de un absoluto se miden contra la caja de
               RELLENO del contenedor —1120 px, la tarjeta entera—, no
               contra su contenido. 47% son 526 px. */
            width: 41%;
            max-width: none;
            padding: 0;
            clip-path: inset(-25rem -25rem 0 -25rem);
        }

        /* CUANTO SE METE LA TABLETA, Y DE DONDE SALE EL NUMERO

           Este margen es lo unico que decide el aspecto del bloque, y se
           ajusto a ojo cuatro veces antes de medirlo. Puesto uno al lado
           del otro el bloque de la lamina y el nuestro, a la misma
           escala, la diferencia no era el tamaño de la tableta sino
           cuanto se mete:

                                     lamina        nosotros (antes)
             ancho de la tableta     49.7% de la   45% de la tarjeta
                                     tarjeta
             borde de arriba         24 px POR     37 px POR ENCIMA
                                     DEBAJO del    del borde
                                     borde
             lo que se corta abajo   112 px        40 px
             alto visible / ancho    1.88          1.50

           O sea que en la lamina la tableta no asoma por arriba: esta
           metida 24 px, y lo que la hace parecer "puesta encima" es que
           se corta MUCHO por abajo —un tercio de su alto—.

           Se probo llevarlo a 100 px, que es lo que reproduce esas
           proporciones: la tableta queda metida 23 px por arriba y
           cortada 100 por abajo, con una proporcion visible de 1.83
           contra el 1.88 de la lamina. Clavado.

           Y SE VEIA PEOR. Armando lo dijo en una palabra, y tiene razon
           en algo que la tabla de arriba no recoge: la lamina es un
           bloque mas ancho y mas bajo que el nuestro, con la tableta
           ocupando la mitad de su ancho. Copiar una proporcion suya
           dentro de una tarjeta con otras medidas no da el mismo
           resultado, da otro.

           QUEDA ANOTADO EL CALLEJON para que no se repita: la medicion
           contra la lamina es buena para los colores y los tamaños de
           letra, donde hay un valor correcto. Para la composicion no,
           porque el contenedor no es el mismo.

           DONDE QUEDO, Y LA REGLA QUE LO GOBIERNA

           1.5rem —24 px—, con la tableta al 41% del ancho de la tarjeta:
           asoma 19 px por arriba y se corta 24 por abajo.

           Lo que asoma y lo que se corta SUMAN UNA CONSTANTE mientras la
           tableta no cambie de tamaño: su suma es el alto de la imagen
           menos el de la tarjeta. Mover este margen reparte entre los
           dos, no da mas de ambos. Para tener mas de los dos hay que
           agrandar la tableta —y entonces se acerca al texto— o acortar
           la tarjeta, que es lo unico sin contrapartida y ya se hizo. */
        .rs-tableta__boton {
            width: 100%;
            margin: 0 0 -1.5rem;
        }
        /* LA TABLETA NO SE INCLINA, Y SE PROBO

           La de la lamina esta recostada —su lado corto va a 23 grados
           sobre la horizontal— y la del archivo que mando la clienta casi
           de frente, a 73. Son dos renders distintos del mismo iPad, y es
           lo que explica que seis ajustes de tamaño y posicion no
           acercaran el bloque a la lamina.

           El 5 de noviembre de 2026 se probo aproximarlo con una
           transformacion 3D —`perspective(1300px) rotate(-10deg)
           rotateX(32deg)`, elegida comparando cuatro candidatos contra la
           lamina— y Armando la rechazo: "se mira mas raro". Y tiene
           sentido: la imagen YA trae su propia perspectiva fotografica, y
           estirarla con otra encima da una tableta con dos puntos de fuga
           que el ojo detecta aunque no sepa nombrarlo.

           NO SE VUELVE A INTENTAR POR CSS. Lo que falta es el archivo: el
           mockup tal como esta en su lamina. Queda preguntado. */
        /* `100% 100%` y no `contain`: la mascara y el JPG salen del mismo
           archivo y tienen el mismo encuadre, asi que estirarla al tamaño
           de la imagen la hace coincidir exactamente. */
        .rs-tableta {
            -webkit-mask-image: url('../images/rediseno/tableta-mascara.png');
            mask-image: url('../images/rediseno/tableta-mascara.png');
            -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
        }
    }
}

.rs-tableta__boton:focus-visible {
    outline: 2px solid var(--rs-azul);
    outline-offset: 4px;
}

/* --- La ventana del video --------------------------------------------

   Se abre al pulsar el boton redondo, el boton "Ver video" o la tableta.
   El porque esta en el parcial `video.blade.php`.

   `z-index` 1080 y no 1030: el encabezado del tema va en `fixed-top`, que
   en Bootstrap 4 es 1030, y la ventana tiene que taparlo. */
.rs-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1080;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background-color: rgba(15, 18, 30, 0.88);
}

.rs-modal--abierto { display: flex; }

.rs-modal__caja {
    position: relative;
    width: 100%;
    max-width: 56rem;
}

/* Arriba de la caja y no encima del video, para no tapar los controles.
   En pantallas bajas no hay sitio ahi arriba, asi que baja adentro. */
.rs-modal__cerrar {
    position: absolute;
    top: -2.75rem;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    color: #FFF;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.rs-modal__cerrar:hover,
.rs-modal__cerrar:focus { background-color: rgba(255, 255, 255, 0.18); }

@media (max-height: 30rem) {
    .rs-modal__cerrar {
        top: 0.5rem;
        right: 0.5rem;
        background-color: rgba(15, 18, 30, 0.6);
    }
}

/* ==========================================================================
   Portada · el remate con los logos de pago
   ========================================================================== */

/* Los seis sellos: una sola fila, todos del mismo tamaño.

   DE DONDE SALE ESTO, QUE NO ES UN GUSTO

   Eran mas chicos que en la lamina —medidos, el 4.8% del ancho de la
   tarjeta contra el 11.4%—, y se veian de juguete. Lo noto Armando el 4 de
   noviembre de 2026.

   Subirles el alto a secas no funciona, y el porque esta en los archivos:
   cinco de los seis son cuadrados (256x256) pero `spei.png` es 640x320, o
   sea el doble de ancho. Con `height` y `width: auto` cada sello se
   dimensiona segun SU logo, el de SPEI sale el doble de ancho que los
   demas, y a 2rem los seis ya no caben en el renglon de una tarjeta de
   264px: se partian en dos filas.

   En la lamina los seis miden lo mismo y llenan el ancho de lado a lado.
   Eso es una rejilla, no un flex: `grid-auto-flow: column` con columnas de
   `1fr` reparte el ancho en partes iguales, sean seis sellos o siete, y
   `object-fit: contain` encaja cada logo dentro de su caja sin
   deformarlo. */
.rs-logos-pago {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0.25rem;
    margin-top: 1rem;
}

.rs-logos-pago img {
    width: 100%;
    height: 2rem;
    object-fit: contain;
    /* Los seis logos vienen con lienzos de distinto tamaño. El fondo blanco
       y el borde los iguala visualmente sin tener que reexportarlos. */
    background-color: #FFF;
    border: 1px solid var(--rs-linea);
    border-radius: 0.25rem;
    padding: 0.1875rem 0.25rem;
}

/* El de OXXO, que trae margen DENTRO del archivo.

   Medida la caja de tinta de cada PNG sobre su lienzo:

     visa / mastercard / amex    100% del ancho
     spei                         81%
     oxxo                         78%   <- 22% mas chico que los demas,
                                           y no por el CSS sino por el PNG

   Con `contain` la imagen se encoge hasta caber entera, margen incluido,
   asi que ese 22% se ve. `cover` la escala hasta llenar la caja y recorta
   lo que sobra, que aqui es justo el margen vacio: la tinta pasa de 18.7 a
   23.9px de ancho, los mismos 24 que mide la de Visa. El recorte vertical
   son 3px por lado de espacio en blanco; la tinta de OXXO mide 40% del
   alto y va centrada, asi que no la toca.

   Lo pidio Armando el 4 de noviembre de 2026. La alternativa es recortar
   el PNG, pero ese archivo vive en `public_html`, fuera del repositorio:
   el arreglo se perderia en el siguiente despliegue y nadie sabria por que. */
.rs-logos-pago .rs-logo-recortado { object-fit: cover; }

/* La frase de cierre con una rayita a cada lado.

   `justify-content: center` NO sobra. Las rayitas son los pseudoelementos
   de abajo, con `flex: 1` pero topadas en 5rem: crecen hasta ahi y paran.
   Lo que queda del renglon es espacio libre, y sin esta linea el flex lo
   deja todo a la derecha, asi que la frase y sus rayitas se van pegadas al
   borde izquierdo. Se veia asi hasta el 4 de noviembre de 2026, cuando
   Armando lo noto; en la lamina va centrada. */
.rs-cierre {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    color: var(--rs-gris);
    font-size: 1rem;
}

.rs-cierre::before,
.rs-cierre::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--rs-linea);
    max-width: 5rem;
}

/* ==========================================================================
   Encabezado

   El unico cambio es el color: el menu pasa de #333333 a azul noche y los
   enlaces de sesion de #536D88 al azul nuevo. La estructura no se toca.
   ========================================================================== */

/* `.sidenav` es el menú de celular, que es otro bloque y no cuelga de
   `.main-header`. Por eso van los dos selectores. */
.main-header .nav-link,
.sidenav .nav-link { color: var(--rs-noche); }

.main-header .nav-link:hover,
.sidenav .nav-link:hover { color: var(--rs-azul); }

/* El enlace de sesión —"Inicia Sesión", "Administrador", "Mi Evento"— va en
   azul para distinguirse del resto del menú, como en el diseño. Gana al
   selector de arriba por especificidad, sin `!important`. */
.main-header .nav-link.rs-nav-sesion,
.sidenav .nav-link.rs-nav-sesion { color: var(--rs-azul); }