/* ==========================================================================
   BonoBorja — skin
   --------------------------------------------------------------------------
   Capa de variables que se aplica ENCIMA de plantilla/css/style.css.
   Todo el color del sitio público sale de aquí.

   Paleta de marca:
     Azul institucional   #002854
     Ámbar (dorado)       #f5a623   — el acento cálido que pega con el azul
     Naranja              #e8620c   — rellenos sólidos y botones (texto blanco)
     Rojo de logotipo     #fd3c3d   — solo detalles y la franja de los botones

   Reparto:
     - El ÁMBAR (#f5a623) es el acento principal: subtítulo del hero, iconos,
       reglas y detalles cálidos. Va sobre azul o como marca decorativa; no
       se usa para texto sobre blanco (2.0:1).
     - El NARANJA (#e8620c) rellena botones y bloques, con TEXTO BLANCO.
     - El ROJO (#fd3c3d) queda reservado a la franja lateral de los botones
       y a detalles puntuales que casan con el logotipo.

   El texto de cuerpo va siempre en tinta navy/ink.
   ========================================================================== */

:root {
    /* --- Marca ---------------------------------------------------------- */
    --bb-blue: #002854;
    --bb-blue-500: #0a4a86;
    --bb-blue-600: #003a75;

    /* Naranja para rellenos sólidos (botones, píldoras). Matiz ~23°, un
       naranja de verdad, no el rojo del logotipo. Blanco encima: 3.4:1. */
    --bb-orange: #e8620c;

    /* Ámbar/dorado: el tercer color, cálido, que pega con el azul. */
    --bb-amber: #f5a623;

    /* Rojo del logotipo, reservado a la franja de los botones y detalles. */
    --bb-red: #fd3c3d;

    /* Alias de --bb-orange para texto/bordes de acento. */
    --bb-orange-600: #e8620c;

    /* Hover de los elementos naranjas: un punto más profundo (transitorio). */
    --bb-orange-hover: #d2560a;

    /* Tinte claro para texto sobre azul. En ámbar claro, lee más dorado que
       el rosa que se usaba antes, y pasa de sobra (10:1 sobre navy). */
    --bb-orange-claro: #ffd08a;

    /* --- Texto ---------------------------------------------------------- */
    /* Derivados del azul de marca, oscurecidos hasta pasar AA como texto.
       Ratios verificados sobre blanco:
         --bb-ink        15.8:1
         --bb-ink-soft    7.3:1
         --bb-heading    14.7:1 */
    --bb-ink: #10233d;
    --bb-ink-soft: #46586f;
    --bb-heading: #002854;

    /* --- Variables que consume style.css -------------------------------- */
    /* --primary lo usa la plantilla para texto (unos 50 selectores), bordes
       y fondos. Va en el naranja de marca: la mayor parte de sus usos son
       iconos (que piden 3:1) o estados hover. */
    --primary: var(--bb-orange);
    --primary-hover: var(--bb-orange-hover);
    --primary-dark: #a8430a;

    /* Degradado de acento. Se mantiene dentro de la familia naranja. */
    --gradient: linear-gradient(135deg, var(--bb-orange) 0%, var(--bb-orange-hover) 100%);
    --gradientY: linear-gradient(to top, var(--bb-orange) 0%, var(--bb-orange-hover) 100%);
    --quote: url(../images/quotes-3.svg);

    /* Fondos amplios (hero, pie, cabeceras internas): azul institucional. */
    --gradient-sec: linear-gradient(135deg, var(--bb-blue) 0%, #00366f 55%, #00478f 100%);

    /* Azulados suaves para fondos de sección (pocas fotos = evitar blanco plano). */
    --bb-bg-soft: #f4f7fb;
    --bb-bg-softer: #eaf1f8;

    --rgba-primary-05: rgba(232, 98, 12, 0.05);
    --rgba-primary-1: rgba(232, 98, 12, 0.1);
    --rgba-primary-2: rgba(232, 98, 12, 0.2);
    --rgba-primary-3: rgba(232, 98, 12, 0.3);
    --rgba-primary-4: rgba(232, 98, 12, 0.4);
    --rgba-primary-5: rgba(232, 98, 12, 0.5);
    --rgba-primary-6: rgba(232, 98, 12, 0.6);
    --rgba-primary-7: rgba(232, 98, 12, 0.7);
    --rgba-primary-8: rgba(232, 98, 12, 0.8);
    --rgba-primary-9: rgba(232, 98, 12, 0.9);
}

/* ==========================================================================
   Fondos de sección
   --------------------------------------------------------------------------
   Hay pocas fotos, así que el fondo blanco plano queda soso. Se alternan
   blancos y azulados suaves para dar ritmo sin imágenes.

   El hero se disuelve en blanco: el degradado del pie del azul llega hasta
   el blanco puro, así que no queda ni escalón ni franja gris entre el azul y
   el contenido. La primera sección tras el hero es blanca y ya no necesita
   degradado propio.
   ========================================================================== */

/* El gris de la plantilla (#f8f5ff, un lavanda) se pasa a un azulado suave. */
.bg-gray {
    background-color: var(--bb-bg-soft);
}

/* Banda azul oscura (CTA de comercios, paneles). Mismo lenguaje que el hero
   y las cabeceras internas: azul, retícula de puntos y halo, sin texturas de
   la plantilla. */
.bb-band {
    background-color: var(--bb-blue);
    background-image:
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.045) 1px, transparent 0),
        radial-gradient(900px 480px at 90% -10%, rgba(96, 156, 224, 0.20), transparent 65%),
        linear-gradient(180deg, #002854 0%, #06406f 100%);
    background-size: 26px 26px, auto, auto;
    background-repeat: repeat, no-repeat, no-repeat;
}

/* Clase auxiliar para dar fondo azulado suave a una sección concreta. */
.bb-bg-soft {
    background-color: var(--bb-bg-soft);
}

.bb-bg-softer {
    background-color: var(--bb-bg-softer);
}

/* ==========================================================================
   Tipografía
   --------------------------------------------------------------------------
   Dos voces, un solo sistema:

     Source Serif 4 — serif de display para titulares grandes (hero, cabeceras
                 de sección, cabeceras internas). Voz de documento oficial:
                 trazo grueso y contraste bajo, que se lleva bien con el
                 logotipo (sans geométrico muy pesado) sin competir con él.
                 Se fijó opsz 30 para que los titulares conserven el mismo
                 cuerpo a 34 px y a 58 px.
     Manrope   — sans de interfaz: cuerpo, botones, formularios, cifras y
                 titulares pequeños. Palo seco, x-height alto, aguanta bien
                 el tamaño pequeño y las versales.

   Las cargas de fuentes van en `elementos/css.blade.php` (link), no con
   @import, para que no dependan del orden de las reglas.
   ========================================================================== */

:root {
    --bb-display: "Source Serif 4", "Iowan Old Style", Georgia, serif;
    --bb-sans: "Manrope", "Segoe UI", sans-serif;
    --bb-line: #d7e0ea;
}

body {
    font-family: var(--bb-sans);
    color: var(--bb-ink);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: var(--bb-heading);
    font-family: var(--bb-sans);
    font-weight: 800;
}

/* Titulares de display: solo h1/h2 (y los títulos de sección, que también
   son h2). Los h3–h6 siguen en Manrope para no serifar toda la interfaz. */
h1, .h1,
h2, .h2,
.banner-content h1,
.dlab-bnr-inr h1,
.section-head h2.title,
.section-head .title {
    font-family: var(--bb-display);
    font-weight: 600;
    letter-spacing: -0.012em;
    /* opsz fijo: el titular se ve igual de macizo a 34 px que a 58 px. */
    font-variation-settings: "opsz" 30;
}

p, li {
    text-wrap: pretty;
}

/* El menú principal en sentence case. La plantilla capitaliza cada palabra
   ("Cómo Funciona"), un tic de plantilla que no encaja con los titulares en
   serif ni con las preguntas del FAQ, ya en minúscula. */
.header-nav .nav > li > a {
    text-transform: none;
}

/* Cifras monetarias siempre tabulares: alinean en columna y no bailan. */
.bb-bono__valor,
.bb-tarifas__importe,
.section-head .title,
.bb-hero-cifra {
    font-variant-numeric: tabular-nums lining-nums;
}

/* Las cifras grandes también en serif y con el mismo cuerpo optical que los
   titulares, para que el dinero y el texto hablen el mismo idioma. */
.bb-bono__valor,
.bb-tarifas__importe,
.bb-cifras__valor {
    font-variation-settings: "opsz" 30;
}

/* ==========================================================================
   Marca de acento
   ========================================================================== */

.gradient {
    background-image: var(--gradient);
}

/* .text-yellow venía del tema upstream (ámbar sobre azul). Se remapea al
   naranja aclarado: el de marca se queda en 3.8:1 sobre el azul del hero. */
.text-yellow {
    color: var(--bb-orange-claro) !important;
}

/* ==========================================================================
   Botones
   ==========================================================================
   Una sola familia, para que el sitio no parezca hecho a trozos:

     `.btn-primary`  -> CTA principal. Relleno naranja de marca (#fa2a28)
                         con tinta navy encima (#0a1a2f). El blanco sobre
                         naranja se queda en 3.9:1 y el navy llega a 4.5:1.

   El relleno es SÓLIDO, no degradado: un degradado con un extremo más
   oscuro baja la tinta navy por debajo de AA (3.7:1 en #e0231d), así que
   el color plano es lo que permite mantener la tinta legible.

   La clase .gradient se conserva en el HTML por compatibilidad con la
   plantilla, pero aquí se neutraliza: si se deja, el background-image del
   degradado gana al background-color y el botón se ve de otro color.
   ========================================================================== */

/* CTA principal: relleno naranja con TEXTO BLANCO y un borde en el rojo del
   logotipo. El borde es completo (no una franja a un lado), que es lo que
   pide la marca y evita el "pestaña" de color lateral. */
.btn-primary,
.btn-primary.gradient {
    background-color: var(--bb-orange);
    background-image: none;
    border: 1px solid var(--bb-red);
    color: #fff;
    font-weight: 700;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.gradient:hover,
.btn-primary.gradient:focus {
    background-color: var(--bb-orange-hover);
    border-color: var(--bb-red);
    color: #fff;
}

/* Los filtros de categoría de la página de comercios usaban btn-info, que en
   Bootstrap es el cian (#17a2b8): un color que no está en la paleta. Aquí el
   estado inactivo es una pastilla neutra con borde y el hover lleva el
   naranja de marca. */
.btn-info {
    background-color: transparent;
    border-color: #d3dbe5;
    color: var(--bb-ink-soft);
    font-weight: 600;
}

.btn-info:hover,
.btn-info:focus {
    background-color: transparent;
    border-color: var(--bb-orange-600);
    color: var(--bb-orange-600);
}

/* Variante con solo contorno, sobre fondo claro. */
.btn-outline-primary {
    color: var(--bb-blue);
    border-color: var(--bb-blue);
    background-color: transparent;
}

.btn-outline-primary:hover {
    background-color: var(--bb-blue);
    border-color: var(--bb-blue);
    color: #fff;
}

/* Contorno blanco: se usa sobre las secciones azules. */
.btn-outline-light {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.7);
    background-color: transparent;
}

.btn-outline-light:hover {
    background-color: #fff;
    border-color: #fff;
    color: var(--bb-blue);
}

/* ==========================================================================
   Enlaces y foco
   ==========================================================================
   El azul de marca no alcanza 4.5:1 sobre blanco si se aclara demasiado:
   el enlace vive en --bb-blue-500 (9.0:1) y el hover baja a naranja-600.
   ========================================================================== */

a {
    color: var(--bb-blue-500);
    transition: color 0.18s ease;
}

a:hover,
a:focus {
    color: var(--bb-orange-600);
}

a:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--bb-orange-600);
    outline-offset: 2px;
}

/* En superficie oscura el foco naranja de marca se pierde sobre azul claro:
   se usa el tinte aclarado y se sube el grosor para compensar. */
.bg-primary :focus-visible,
.site-footer :focus-visible,
.dlab-bnr-inr :focus-visible {
    outline: 3px solid var(--bb-orange-claro);
}

/* ==========================================================================
   Logo de la cabecera
   ==========================================================================
   El logotipo de BonoBorja es un wordmark ancho (relación 2.8:1). La
   plantilla reserva 170px de ancho para el logo, con lo que queda pequeño.
   Se ensancha en la cabecera transparente y se reduce al fijarse (la barra
   fija mide 90px de alto y el logo no puede pasarse de ahí). */
.logo-header {
    width: 265px;
}

.logo-header img {
    max-width: 100%;
}

.site-header .sticky-header.is-fixed .logo-header {
    width: 200px;
    height: 90px;
}

@media only screen and (max-width: 1199px) {
    .logo-header {
        width: 200px;
    }

    .site-header .sticky-header.is-fixed .logo-header {
        width: 165px;
    }
}

@media only screen and (max-width: 575px) {
    .logo-header {
        width: 160px;
    }

    .site-header .sticky-header.is-fixed .logo-header {
        width: 150px;
    }
}

/* ==========================================================================
   Navegación y cabecera
   ========================================================================== */

.site-header .nav li a span,
.header-nav .nav li a {
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* El nav superior se dibuja sobre la foto del hero; el blanco garantiza
   contraste constante sea cual sea la imagen que haya detrás.

   OJO: la cabecera es "header-transparent" y al hacer scroll la plantilla
   le pone fondo blanco (`.is-fixed .main-bar`). El nav tiene que pasar a
   oscuro EN ESE MOMENTO, si no queda texto blanco sobre fondo blanco.

   `.is-fixed` NO se pone en el <header> sino en el div `.sticky-header`
   que va DENTRO, así que el selector tiene que ser de descendiente y no
   de elemento único.

   Y OJO OTRO: esta regla es SOLO para escritorio. En movil el mismo nav
   vive dentro del panel lateral (`.header-nav`, que la plantilla pinta de
   fondo blanco y fijo a la izquierda), así que si el texto se quedara en
   blanco se leería blanco sobre blanco. Por eso va dentro de un
   `min-width: 992px` (el mismo corte que usa la plantilla) y el panel
   movil tiene sus propias reglas mas abajo. */
@media only screen and (min-width: 992px) {
    .site-header.header-transparent .sticky-header:not(.is-fixed) .nav.navbar-nav > li > a {
        color: #fff;
    }
}

/* Panel lateral movil: ver el bloque "Panel lateral movil (fondo blanco)"
   mas abajo, DESPUES de las reglas de escritorio (el orden importa). */

.site-header.header-transparent .sticky-header.is-fixed .nav.navbar-nav > li > a {
    color: var(--bb-heading);
}

.site-header.header-transparent .sticky-header.is-fixed .nav.navbar-nav > li.active > a,
.site-header.header-transparent .sticky-header.is-fixed .nav.navbar-nav > li > a:hover {
    color: var(--bb-orange-600);
}

.site-header.header-transparent .sticky-header:not(.is-fixed) .nav.navbar-nav > li.active > a,
.site-header.header-transparent .sticky-header:not(.is-fixed) .nav.navbar-nav > li > a:hover {
    color: var(--bb-orange-claro);
}

/* El submenú desplegable. */
.site-header.header-transparent .sticky-header.is-fixed .nav.navbar-nav .sub-menu li a {
    color: var(--bb-ink);
}

.site-header.header-transparent .sticky-header.is-fixed .nav.navbar-nav .sub-menu li a:hover {
    color: var(--bb-orange-600);
}

/* --------------------------------------------------------------------------
   Panel lateral movil (fondo blanco)
   --------------------------------------------------------------------------
   Este bloque va DESPUES de las reglas de escritorio de arriba a proposito:
   tienen la misma especificidad y, con el mismo peso, gana la ultima. Si el
   bloque de movil se pone antes, el enlace activo se queda en ambar claro
   (--bb-orange-claro) sobre fondo blanco, que es casi ilegible.

   Los selectores replican los dos estados (con y sin `.is-fixed`) para que
   ganen en los dos casos: la cabecera fija la pone la plantilla al hacer
   scroll, dentro del div `.sticky-header`. */
@media only screen and (max-width: 991px) {
    .site-header.header-transparent .sticky-header:not(.is-fixed) .nav.navbar-nav > li > a,
    .site-header.header-transparent .sticky-header.is-fixed .nav.navbar-nav > li > a {
        color: var(--bb-heading);
    }

    .site-header.header-transparent .sticky-header:not(.is-fixed) .nav.navbar-nav > li > a span,
    .site-header.header-transparent .sticky-header.is-fixed .nav.navbar-nav > li > a span {
        color: var(--bb-heading);
    }

    .site-header.header-transparent .sticky-header:not(.is-fixed) .nav.navbar-nav > li.active > a,
    .site-header.header-transparent .sticky-header:not(.is-fixed) .nav.navbar-nav > li > a:hover,
    .site-header.header-transparent .sticky-header.is-fixed .nav.navbar-nav > li.active > a,
    .site-header.header-transparent .sticky-header.is-fixed .nav.navbar-nav > li > a:hover {
        color: var(--bb-orange-600);
    }

    /* El chevron del desplegable ("Comercio") hereda el color del enlace. */
    .site-header.header-transparent .sticky-header:not(.is-fixed) .nav.navbar-nav > li > a i,
    .site-header.header-transparent .sticky-header.is-fixed .nav.navbar-nav > li > a i {
        color: var(--bb-heading);
        background-color: transparent;
    }

    /* Submenú (comercio): tinta suave para que se distinga del principal. */
    .site-header.header-transparent .sticky-header:not(.is-fixed) .nav.navbar-nav .sub-menu li a,
    .site-header.header-transparent .sticky-header.is-fixed .nav.navbar-nav .sub-menu li a {
        color: var(--bb-ink-soft);
    }

    .site-header.header-transparent .sticky-header:not(.is-fixed) .nav.navbar-nav .sub-menu li a:hover,
    .site-header.header-transparent .sticky-header.is-fixed .nav.navbar-nav .sub-menu li a:hover {
        color: var(--bb-orange-600);
    }
}

/* El botón de la cabecera al fijarse mantiene el naranja con texto blanco. */
.site-header .sticky-header.is-fixed .extra-nav .btn-primary {
    background-color: var(--bb-orange);
    border-color: var(--bb-red);
    color: #fff;
}

/* ==========================================================================
   Hero (banner-three)
   ==========================================================================
   La plantilla fija el alto a 850px y superpone una ola decorativa
   (`.banner-three:after`, pic2.png) por encima del contenido. Con el titular
   y los dos CTA el contenido no cabe en 850px, así que los botones quedaban
   tapados por la ola. Aquí el alto pasa a automático y la ola baja a adorno
   de fondo, con el contenido por encima.

   El padding-top sube de 100px (`.p-t100`) a 190px porque la cabecera es
   transparente y se superpone al hero: ocupa unos 90px, así que con 100px
   el titular quedaba pegado al menú. */
.banner-three {
    height: auto;
    min-height: 760px;
    padding-top: 190px;
    padding-bottom: 120px;
}

/* Fondo propio del hero: azul institucional con una retícula de puntos muy
   tenue y un halo en la esquina. Sustituye a las texturas de la plantilla
   (bg18.png traía confeti rosa, fuera de paleta).
   El degradado es VERTICAL a propósito: la base queda de un solo color en
   todo el ancho, así el fundido con la sección siguiente no se rompe por la
   derecha, que es lo que pasaba con el degradado diagonal anterior. */
.bb-hero {
    background-color: var(--bb-blue);
    background-image:
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 0),
        radial-gradient(1100px 560px at 84% -18%, rgba(96, 156, 224, 0.22), transparent 66%),
        linear-gradient(180deg, #002854 0%, #003a6e 55%, #0a4a86 100%);
    background-size: 26px 26px, auto, auto;
    background-repeat: repeat, no-repeat, no-repeat;
}

/* Variante sin fundido (404): no hay sección detrás, el hero enlaza con el
   pie en azul plano. */
.banner-three.bb-hero--flat:after {
    content: none;
}

/* El botón contorno va sobre el degradado que se funde en blanco. Un fondo
   azul translúcido le da un respaldo propio, para que el texto blanco no
   dependa de lo que haya detrás. Tiene que ser SUFICIENTEMENTE opaco: en
   móvil el botón cae en la zona del fundido y con un 42 % el blanco se
   quedaba en 2,4:1. */
.bb-hero .btn-outline-light {
    background-color: rgba(0, 26, 56, 0.82);
}

/* Al pasar el ratón el botón se invierte a blanco. El texto va en naranja de
   marca: con el azul heredado (`.btn-outline-light:hover`) quedaba casi
   ilegible sobre el fondo oscuro del hero. */
.bb-hero .btn-outline-light:hover,
.bb-hero .btn-outline-light:focus {
    background-color: #fff;
    border-color: #fff;
    color: var(--bb-orange);
}

/* En móvil la cabecera crece (logo + botón) y la plantilla deja el hero con
   muy poco aire arriba: el titular quedaba debajo del botón. Además se deja
   más aire abajo para que los CTA no caigan en la zona del fundido blanco. */
@media only screen and (max-width: 767px) {
    .banner-three.bb-hero {
        padding-top: 150px;
        padding-bottom: 160px;
    }

    .banner-three:after {
        height: 190px;
    }
}

@media only screen and (max-width: 575px) {
    .banner-three.bb-hero {
        padding-top: 148px;
    }
}

/* El hero termina disolviéndose en BLANCO y en TODO el ancho. La sección
   siguiente es blanca, así que el azul se funde con el contenido sin escalón
   ni franja gris intermedia. La ola (pic2.png) de la plantilla no hace falta. */
.banner-three:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 280px;
    background-image: linear-gradient(180deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.22) 34%,
        rgba(255, 255, 255, 0.62) 66%,
        #ffffff 100%);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 1;
    z-index: 0;
    pointer-events: none;
}

/* Motivo geométrico muy tenue: un par de anillos en el azul dan profundidad
   al fondo plano del hero. Van detrás del contenido (z-index 0) y no roban
   atención al texto. Si más adelante se pone una foto de Borja de fondo,
   este motivo se puede quitar con quitar la clase .bb-hero del HTML. */
.bb-hero::before {
    content: "";
    position: absolute;
    right: -140px;
    top: 40px;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    border: 70px solid rgba(255, 255, 255, 0.045);
    pointer-events: none;
    z-index: 0;
}

.bb-hero .container {
    position: relative;
}

/* La cifra del titular en ámbar claro: es el tercer color de la paleta, el
   dorado que pega con el azul. Solo se usa sobre el azul del hero, donde
   tiene contraste de sobra. */
.bb-hero-cifra {
    color: var(--bb-orange-claro);
    white-space: nowrap;
}

.banner-three .banner-inner {
    z-index: 1;
}

/* `.banner-inner` es un flex para centrar verticalmente, y eso convierte la
   `.row` en un flex item que se encoge al ancho del contenido. En la portada
   no se nota, pero en el 404 la fila quedaba a 699px y la ficha del bono a
   203px. Con esto la fila ocupa el ancho del contenedor. */
.banner-three .banner-inner > .row {
    flex: 1 1 auto;
    min-width: 0;
}

/* El titular del hero baja de 70px: a ese tamaño ocupa tres líneas y deja el
   resto del bloque sin aire. */
.banner-three .banner-content h1 {
    font-size: 58px;
    line-height: 1.08;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

@media only screen and (max-width: 1199px) {
    .banner-three .banner-content h1 {
        font-size: 44px;
    }
}

@media only screen and (max-width: 991px) {
    .banner-three {
        padding-top: 130px;
    }
}

@media only screen and (max-width: 767px) {
    .banner-three {
        min-height: auto;
        padding-top: 110px;
        padding-bottom: 80px;
    }

    .banner-three .banner-content h1 {
        font-size: 34px;
    }
}

/* ==========================================================================
   Secciones
   ==========================================================================
   Los títulos de sección de la plantilla (`style-3`) llegan a 65px, y a ese
   cuerpo un título de sección compite con el titular del hero en vez de
   sostenerlo: se baja a 46px. El reparto de líneas va en `balance`, no en
   `initial`: con el reparto greedy el título se partía dejandomos una sola
   palabra suelta en la última línea ("... en una / venta"). */
.section-head h2.title,
.section-head.style-3 h2.title {
    text-wrap: balance;
    font-size: 46px;
    letter-spacing: -0.025em;
    max-width: 18ch;
    margin-left: auto;
    margin-right: auto;
}

/* En secciones con título a la izquierda manda la columna, no el centrado. */
.section-head:not(.text-center) h2.title,
.section-head:not(.text-center) .title {
    margin-left: 0;
    margin-right: 0;
}

.section-head .title {
    color: var(--bb-heading);
    /* Los titulares de dos líneas se reparten: evita que la última quede
       con una sola palabra suelta ("... en una / venta"). */
    text-wrap: balance;
}

/* Los párrafos de introducción no deben cruzar todo el contenedor: a ~93
   caracteres por línea el ojo pierde el renglón. */
.section-head p {
    /* 60ch deja la línea en unos 75–80 caracteres reales en Manrope. */
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
}

.section-head:not(.text-center) p {
    margin-left: 0;
    margin-right: 0;
}

@media only screen and (max-width: 991px) {
    .section-head h2.title,
    .section-head.style-3 h2.title {
        font-size: 34px;
        max-width: 20ch;
    }
}

@media only screen and (max-width: 575px) {
    .section-head h2.title,
    .section-head.style-3 h2.title {
        font-size: 28px;
        max-width: 100%;
    }
}

/* La línea de acento que la plantilla pone sobre los títulos de sección. */
.section-head.style-3 h2::after,
.section-head.style-3 .line::after {
    background-color: var(--bb-orange);
}

/* ==========================================================================
   Acordeón (Preguntas frecuentes)
   ==========================================================================
   La plantilla trae `.dlab-accordion`, pero pinta cada cabecera con el
   degradado de marca: cuatro bloques naranja seguidos saturan la página. Aquí
   se reaprovecha el comportamiento collapse de Bootstrap 4 y se pinta con la
   jerarquía del sitio: fila limpia, separador, y la abierta con fondo azul
   claro. El signo +/- va a la derecha.
   ========================================================================== */

.bb-faq .card {
    border: 0;
    border-bottom: 1px solid #e4e9f0;
    border-radius: 0;
    background: transparent;
    /* La plantilla pone una sombra difusa de 60px de desenfoque; con una
       lista de preguntas queda como un halo sucio bajo cada fila. */
    box-shadow: none;
    margin-bottom: 0;
    overflow: visible;
}

.bb-faq .card:first-of-type {
    border-top: 1px solid #e4e9f0;
}

.bb-faq .card-header {
    background: transparent;
    border: 0;
    padding: 0;
}

/* La fila pulsable. Se atienden las dos estructuras que hay en el proyecto:
   botón (.btn-link, en la portada) y enlace (<a> dentro de .dlab-title, en
   la página de preguntas frecuentes). */
/* El título de la pregunta es un h2 por jerarquía del documento, pero se
   pinta como una fila de preguntas: sans, peso alto y tamaño contenido. */
.bb-faq .dlab-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    font-family: var(--bb-sans);
    line-height: 1.4;
}

.bb-faq .btn-link,
.bb-faq .card-header .dlab-title a {
    position: relative;
    display: block;
    width: 100%;
    padding: 20px 44px 20px 0;
    text-align: left;
    text-decoration: none;
    color: var(--bb-heading);
    font-family: var(--bb-sans);
    font-weight: 700;
    font-size: 1.02rem;
    line-height: 1.4;
    background: transparent;
    border: 0;
    margin: 0;
    box-shadow: none;
}

/* La plantilla pinta el enlace con el degradado de marca mediante un
   pseudo-elemento; hay que apagarlo o cada cabecera es un bloque naranja. */
.bb-faq .card-header .dlab-title a::after {
    display: none;
}

.bb-faq .btn-link:hover,
.bb-faq .btn-link:focus,
.bb-faq .card-header .dlab-title a:hover,
.bb-faq .card-header .dlab-title a:focus {
    color: var(--bb-orange-600);
    background: transparent;
    text-decoration: none;
}

/* Signo +/- con dos pseudo-elementos: un solo trazo, sin icono heredado.
   En la página de FAQ el signo llega como <span class="toggle-close">, así
   que ahí se usa ese elemento en lugar de los pseudo-elementos. */
.bb-faq .btn-link::before,
.bb-faq .btn-link::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    background: var(--bb-orange-600);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.bb-faq .btn-link::before {
    width: 14px;
    height: 2px;
    margin-top: -1px;
}

.bb-faq .btn-link::after {
    width: 2px;
    height: 14px;
    /* Centrado sobre el trazo horizontal: con `right` en ambos, la barra
       vertical caía en el extremo derecho y se leía como "–|". */
    right: 14px;
    margin-top: -7px;
    opacity: 1;
}

.bb-faq .btn-link[aria-expanded="true"]::after {
    opacity: 0;
}

/* Las preguntas van en sentence case: en versal parecían un formulario
   todo en mayúsculas y se leían peor. */
.bb-faq .btn-link,
.bb-faq .card-header .dlab-title a {
    text-transform: none;
}

/* El signo de la plantilla es un <span class="toggle-close"> de 55x55 con la
   fuente Themify. Aquí se reduce a un trazo de 14px: el selector lleva los
   mismos pasos que el de la plantilla para ganarle por especificidad
   (4 clases + 3 elementos), así que hace falta uno más. */
.bb-faq .card-header .dlab-title a .toggle-close {
    position: absolute;
    right: 8px;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    font-size: 0;
    line-height: 1;
    color: transparent;
    text-indent: 0;
    overflow: visible;
}

/* La plantilla monta el signo así:
     - `::before` = glifo Themify (content "\e61a") girado 45 grados,
     - `::after`  = cuadro con el degradado de marca de fondo.
   Los dos hay que desmontarlos con la MISMA especificidad que la regla de
   la plantilla (4 clases + 2 elementos), o siguen mandando ellos.
   El signo se vuelve a dibujar con dos trazos: horizontal en ::before y
   vertical en ::after. */
.bb-faq .card-header .dlab-title a .toggle-close::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 14px;
    height: 2px;
    background: var(--bb-orange-600);
    background-image: none;
    transform: none;
    opacity: 1;
    font-size: 0;
    line-height: normal;
    z-index: 1;
    display: block;
    transition: opacity 0.2s ease;
}

.bb-faq .card-header .dlab-title a .toggle-close::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 0;
    width: 2px;
    height: 14px;
    background: var(--bb-orange-600);
    background-image: none;
    z-index: 1;
    transition: opacity 0.2s ease;
}

/* Abierto: el vertical desaparece y queda solo el horizontal. */
.bb-faq [aria-expanded="true"] .toggle-close::after {
    opacity: 0;
}

.bb-faq .card-body {
    padding: 0 44px 22px 0;
    color: var(--bb-ink-soft);
    font-size: 0.95rem;
}

/* Estado abierto: el fondo azul claro separa la respuesta de la lista sin
   necesidad de una caja con sombra. */
.bb-faq .card.show {
    background: #f5f8fc;
}

.bb-faq .card.show .btn-link,
.bb-faq .card.show .dlab-title a {
    padding-left: 20px;
}

.bb-faq .card.show .card-body {
    padding-left: 20px;
}

/* ==========================================================================
   Cabeceras internas y migas de pan
   ==========================================================================
   La plantilla pinta un banner de 480px con una ola blanca (bnr2/bnr4) y las
   migas como píldora. Es la firma visual más reconocible del tema original,
   así que aquí se cambia por una banda de documento: azul plano con retícula
   de puntos, título serif, migas encima en versal y regla ámbar al pie.
   ========================================================================== */

.dlab-bnr-inr,
.dlab-bnr-inr.style-1 {
    background-color: var(--bb-blue) !important;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.055) 1px, transparent 0),
        linear-gradient(180deg, #002854 0%, #06406f 100%) !important;
    background-size: 24px 24px, auto !important;
    background-position: 0 0, center !important;
    background-repeat: repeat, no-repeat !important;
}

.dlab-bnr-inr.style-1 {
    height: 340px;
}

/* Regla ámbar al pie de la banda: el mismo detalle que cierra el hero y el
   pie. Sustituye a la ola bnr4.png. */
.dlab-bnr-inr.style-1:after {
    background-image: none;
    background-color: var(--bb-amber);
    height: 4px;
}

.dlab-bnr-inr .container {
    display: flex;
    align-items: center;
    height: 100%;
    /* La cabecera es transparente y se superpone; este relleno deja el
       contenido por debajo del menú sin descentrarlo del todo. */
    padding-top: 84px;
}

.dlab-bnr-inr .dlab-bnr-inr-entry {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    height: auto;
    padding-top: 0;
    text-align: left;
}

.dlab-bnr-inr .breadcrumb-row {
    margin: 0 0 12px;
}

/* El título de las cabeceras internas. */
.dlab-bnr-inr h1,
.dlab-bnr-inr.style-1 .dlab-bnr-inr-entry h1 {
    font-family: var(--bb-display);
    font-weight: 600;
    letter-spacing: -0.015em;
    color: #fff;
    font-size: 56px;
    line-height: 1.05;
    margin-bottom: 0;
    /* La plantilla capitaliza cada palabra ("Cómo Funciona"). En serif y en
       sentence case se lee más natural y menos de plantilla. */
    text-transform: none;
}

/* Migas sin píldora: ruta pequeña en versal sobre la banda. */
.breadcrumb-row.style-1 .breadcrumb {
    background: none;
    background-image: none;
    border: 0;
    padding: 0;
    border-radius: 0;
    margin: 0;
}

.breadcrumb-row .breadcrumb-item,
.breadcrumb-row .breadcrumb-item a {
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.breadcrumb-row .breadcrumb-item a:hover {
    color: #fff;
}

.breadcrumb-row .breadcrumb-item.active {
    color: var(--bb-amber);
    font-weight: 700;
}

.breadcrumb-row ul .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.72rem;
}

@media only screen and (max-width: 991px) {
    .dlab-bnr-inr.style-1 {
        height: 320px;
    }

    .dlab-bnr-inr .container {
        padding-top: 90px;
    }

    .dlab-bnr-inr h1,
    .dlab-bnr-inr.style-1 .dlab-bnr-inr-entry h1 {
        font-size: 42px;
    }
}

@media only screen and (max-width: 575px) {
    .dlab-bnr-inr.style-1 {
        height: 300px;
    }

    .dlab-bnr-inr .container {
        padding-top: 100px;
    }

    .dlab-bnr-inr h1,
    .dlab-bnr-inr.style-1 .dlab-bnr-inr-entry h1 {
        font-size: 34px;
    }
}

/* ==========================================================================
   Pie
   ==========================================================================
   Mismo lenguaje que el resto: azul plano con retícula de puntos, regla
   ámbar arriba y títulos con un trazo corto en ámbar. Se quita la textura de
   la plantilla (bg11.png) y la doble barra naranja bajo los títulos.
   ========================================================================== */

.site-footer.style-3 {
    background-color: var(--bb-blue) !important;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.04) 1px, transparent 0),
        linear-gradient(180deg, #002854 0%, #06406f 100%) !important;
    background-size: 26px 26px, auto !important;
    background-position: 0 0, center !important;
    background-repeat: repeat, no-repeat !important;
    border-top: 4px solid var(--bb-amber);
}

/* La doble barra naranja de la plantilla se sustituye por un trazo corto en
   ámbar, coherente con las reglas de las bandas. */
footer .footer-title::after {
    content: none;
}

.site-footer .footer-title {
    position: relative;
    color: #fff;
    font-weight: 700;
    padding-bottom: 14px;
    margin-bottom: 24px;
}

.site-footer .footer-title::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px;
    height: 3px;
    border-radius: 0;
    background: var(--bb-amber);
}

/* Enlaces que el pie destaca como vía de acceso (comercios). */
.site-footer .bb-pie-destacado {
    color: var(--bb-orange-claro);
    font-weight: 700;
}

/* El pie capitaliza cada palabra ("Aviso Legal", "Cómo Funcionan Los Bonos").
   En sentence case se lee igual que el menú y que los titulares. */
.site-footer .widget_services ul li a {
    text-transform: none;
}

.site-footer .bb-pie-destacado:hover {
    color: #fff;
}

/* En el pie el texto secundario se tiñe del propio azul, nunca gris: un
   gris neutro sobre fondo azul se ensucia y pierde contraste. */
.site-footer .widget p,
.site-footer .widget li,
.site-footer .widget_services li a,
.site-footer .widget_getintuch span {
    color: #c4d4e8;
}

/* La plantilla baja la opacidad del dato de contacto al 60 %, que sobre el
   azul deja el texto en 3.7:1. Con el color ya atenuado, la opacidad sobra. */
.site-footer .widget_getintuch ul li span {
    opacity: 1;
}

/* Misma trampa en el párrafo de presentación del pie (opacidad 0.6). */
.site-footer .widget_about p {
    opacity: 1;
}

.site-footer .widget_getintuch span:hover {
    color: #fff;
}

.site-footer a,
.site-footer .footer-title {
    transition: color 0.18s ease;
}

.site-footer a:hover {
    color: var(--bb-orange-claro);
}

/* Los iconos de contacto pasan de círculo naranja con glifo blanco a círculo
   ámbar con glifo azul: más cálido y con mejor contraste. */
/* Los iconos de contacto van en el naranja de los botones (antes iban en
   ámbar y no casaban con ningún otro elemento del pie). */
.site-footer .widget_getintuch ul li i {
    background-image: none;
    background-color: var(--bb-orange);
    color: #fff;
}

/* Barra inferior del pie: azul profundo, no una franja blanca que cortaba el
   bloque en dos. */
.site-footer.style-3 .footer-bottom {
    background: #001a38;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: 18px 0;
}

.site-footer .footer-bottom img {
    max-height: 46px;
    width: auto;
}

.site-footer .copyright-text,
.site-footer .copyright-text a,
.site-footer .footer-bottom a {
    color: rgba(255, 255, 255, 0.72);
}

.site-footer .footer-bottom a:hover {
    color: var(--bb-amber);
}

/* ==========================================================================
   Formularios
   ========================================================================== */

.form-control,
.form-select {
    border-color: #d3dbe5;
    color: var(--bb-ink);
}

/* La plantilla pinta etiquetas y valores de formulario en #888 (3.5:1). */
.form-group label {
    color: var(--bb-ink-soft);
}

/* Select sin elegir: se queda en tono de pista, no en tinta de valor. */
select.form-control:invalid {
    color: #66748a;
}

/* bootstrap-select viste el <select> como un botón con la tinta por defecto
   de la plantilla (#888, 3.5:1). Se alinea con el resto de campos: tinta de
   valor cuando hay selección y tono de pista cuando no. */
.bootstrap-select > .btn,
.bootstrap-select .dropdown-toggle.btn-default,
.bootstrap-select .dropdown-toggle.btn-light {
    color: var(--bb-ink);
    background-color: #fff;
    border-color: #d3dbe5;
}

.bootstrap-select .btn.bs-placeholder,
.bootstrap-select .btn.bs-placeholder .filter-option {
    color: #66748a;
}

.bootstrap-select .dropdown-menu li a {
    color: var(--bb-ink);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--bb-blue-500);
    box-shadow: 0 0 0 3px rgba(217, 31, 29, 0.14);
}

/* Los placeholders no son texto real; se tiñen para que no parezcan contenido
   ya escrito. Oscurecido hasta 4.5:1 (AA). */
.form-control::placeholder {
    color: #66748a;
}

/* ==========================================================================
   Lectura
   ==========================================================================
   El contenedor de la plantilla mide 1140px. Un párrafo a esa medida son
   más de 130 caracteres por línea y el ojo se pierde al volver al principio.
   Las páginas de contenido se estrechan a una columna de documento, y el
   texto corrido se acota además a una medida legible. */
.content-inner .container > .row > .col-lg-12 {
    max-width: 940px;
    margin-left: auto;
    margin-right: auto;
}

.content-inner .container > .row > .col-lg-12 > p,
.content-inner .container > .row > .col-lg-12 > .section-head > p {
    /* ~75–80 caracteres reales en Manrope a 15 px. */
    max-width: 60ch;
}

/* ==========================================================================
   Utilidades de marca
   ==========================================================================
   Clases añadidas para el rediseño de la portada. Se definen aquí para que
   el color de marca no se duplique en el HTML.
   ========================================================================== */

/* Panel de ayuda (página de preguntas frecuentes).
   Sustituye a una ilustración de banco de imágenes en magenta que traía la
   plantilla: un color que no tenía nada que ver con la marca. */
.bb-ayuda {
    background: var(--gradient-sec);
    border-radius: 16px;
    padding: 44px 40px;
    height: 100%;
    position: relative;
    overflow: hidden;
}

/* Una forma geométrica muy tenue da profundidad sin robar atención al
   texto. */
.bb-ayuda::after {
    content: "";
    position: absolute;
    right: -70px;
    top: -70px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    border: 34px solid rgba(255, 255, 255, 0.05);
    pointer-events: none;
}

.bb-ayuda__titulo {
    font-family: var(--bb-display);
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.1;
    color: #fff;
    margin: 0 0 14px;
}

.bb-ayuda__texto {
    color: #c4d4e8;
    max-width: 42ch;
    margin-bottom: 28px;
}

.bb-ayuda__acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.bb-ayuda__link {
    color: #fff;
    font-weight: 700;
}

.bb-ayuda__link:hover {
    color: var(--bb-orange-claro);
}

/* Ficha del bono-descuento (lado derecho del hero).
   Sustituye a la ilustración de vouchers que llevaba marca de Tudela. */
.bb-bono {
    background: #fff;
    border-radius: 16px;
    padding: 30px 30px 24px;
    /* Sombra con desplazamiento: da profundidad sin ser halo. */
    box-shadow: 0 18px 40px -18px rgba(0, 20, 45, 0.55);
    max-width: 330px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.bb-bono__marca {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bb-orange-600);
    display: flex;
    align-items: center;
    gap: 8px;
    /* La cabecera de la ficha va centrada (marca, importe y "por cada...").
       La lista de condiciones y el codigo de barras siguen a la izquierda:
       son bloques de texto largo que se leen mejor alineados. */
    justify-content: center;
}

/* Pequeño sello dorado delante de la etiqueta. */
.bb-bono__marca::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--bb-amber);
}

.bb-bono__valor {
    font-family: var(--bb-display);
    font-size: 4.8rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 0.95;
    color: var(--bb-blue);
    margin: 14px 0 6px;
    text-align: center;
}

.bb-bono__valor span {
    font-size: 2.6rem;
    vertical-align: 0.5em;
    margin-left: 3px;
}

.bb-bono__para {
    color: var(--bb-ink-soft);
    font-size: 0.95rem;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px dashed #d8e0ea;
    text-align: center;
}

.bb-bono__para strong {
    color: var(--bb-blue);
    font-weight: 800;
}

.bb-bono__lista {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bb-bono__lista li {
    position: relative;
    padding-left: 26px;
    font-size: 0.9rem;
    color: var(--bb-ink);
    margin-bottom: 10px;
}

.bb-bono__lista li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.42em;
    width: 12px;
    height: 7px;
    border-left: 2.5px solid var(--bb-orange-600);
    border-bottom: 2.5px solid var(--bb-orange-600);
    transform: rotate(-45deg);
}

.bb-bono__lista li:last-child {
    margin-bottom: 0;
}

/* Código de barras decorativo al pie: remata el aire de cupón real. */
.bb-bono__codigo {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #eef2f7;
    height: 30px;
    background-image: repeating-linear-gradient(90deg,
        var(--bb-ink) 0 2px, transparent 2px 5px,
        var(--bb-ink) 5px 8px, transparent 8px 12px,
        var(--bb-ink) 12px 13px, transparent 13px 17px);
    opacity: 0.22;
}

/* Etiqueta de caducidad: el dato más importante para el consumidor. Relleno
   naranja con texto blanco, como los botones. */
/* Píldora de caducidad del hero.
   Va en blanco y no en naranja: es un dato, no una llamada a la acción, y en
   naranja competía con los dos botones que van justo debajo. El icono sí
   mantiene el acento cálido. */
.bb-caduca {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #fff;
    color: var(--bb-blue);
    font-weight: 700;
    font-size: 0.875rem;
    padding: 10px 20px;
    border-radius: 999px;
    box-shadow: 0 8px 22px rgba(0, 20, 45, 0.18);
}

.bb-caduca strong {
    font-weight: 800;
}

/* El icono de FontAwesome hereda el color del texto; se le fija de forma
   explícita para que no caiga en el negro por defecto del sprite. */
.bb-caduca i {
    color: var(--bb-orange);
}

/* Barra divisoria de sección con el acento de marca. */
.bb-rule {
    height: 3px;
    width: 56px;
    background: var(--bb-orange-600);
    border-radius: 2px;
}

/* ==========================================================================
   Sobre fondo oscuro
   ==========================================================================
   El texto secundario se tiñe del azul en vez de gris neutro.
   ========================================================================== */

.bg-primary h1,
.bg-primary h2,
.bg-primary h3 {
    color: #fff;
}

.banner-content .sub-title {
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ==========================================================================
   Infografías
   -------------------------------------------------------------------------
   Tres piezas reutilizables que explican el producto sin una sola foto, que
   es el material que no tenemos:

     .bb-escalera  — el umbral de compra y el descuento, en una escalera de
                     barras. La parte ámbar de cada barra es lo que se ahorra.
     .bb-flujo     — una secuencia de pasos con disco numerado y guía.
     .bb-ticket    — la factura de ejemplo que debe emitir el comercio.

   Regla de color: el ámbar se usa siempre como RELLENO (sobre azul, o con
   texto navy encima). Nunca como texto sobre blanco: 2:1.
   ========================================================================== */

/* --- Leyenda ------------------------------------------------------------- */

.bb-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    justify-content: center;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
}

.bb-leyenda__item {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 0.82rem;
    color: var(--bb-ink-soft);
}

.bb-leyenda__muestra {
    width: 15px;
    height: 15px;
    border-radius: 4px;
    flex: 0 0 15px;
}

.bb-leyenda__muestra--ahorro {
    background: var(--bb-amber);
}

.bb-leyenda__muestra--compra {
    background: var(--bb-blue);
}

/* --- Escalera de umbrales ----------------------------------------------- */

.bb-escalera {
    --u: 24px;            /* unidad de altura de la barra */
    --ancho-barra: 132px;
    --linea: #d7e0ea;
    --gap: 18px;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gap);
    align-items: end;
}

.bb-escalera__col {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bb-escalera__barra {
    width: 100%;
    max-width: var(--ancho-barra);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    background: var(--bb-blue);
}

/* Segmento ámbar: lo que se ahorra. Crece con el importe de la compra. */
.bb-escalera__ahorro {
    background: var(--bb-amber);
    color: var(--bb-blue);
    height: calc(var(--ahorro) * var(--u));
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--bb-display);
    font-weight: 600;
    font-size: 1rem;
    font-variation-settings: "opsz" 30;
    font-variant-numeric: tabular-nums lining-nums;
    line-height: 1;
}

/* Segmento navy: lo que se gasta. */
.bb-escalera__compra {
    height: calc((var(--compra) - var(--ahorro)) * var(--u));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: var(--bb-display);
    font-weight: 600;
    font-size: 1.2rem;
    font-variation-settings: "opsz" 30;
    font-variant-numeric: tabular-nums lining-nums;
    line-height: 1;
    background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.09) 1px, transparent 0);
    background-size: 18px 18px;
}

/* Eje: importe de compra y número de bonos. El trazo se prolonga media
   columna a cada lado para que las cuatro basalcas formen UNA sola línea
   continua: el gráfico se lee como una escalera y no como barras sueltas. */
.bb-escalera__eje {
    width: 100%;
    position: relative;
    padding: 12px 0 0;
    text-align: center;
}

.bb-escalera__eje::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% + var(--gap));
    height: 2px;
    background: var(--linea);
}

/* La última columna no sobresale: la línea termina donde acaba el gráfico. */
.bb-escalera__col:last-child .bb-escalera__eje::before {
    width: 100%;
}

.bb-escalera__importe {
    font-family: var(--bb-display);
    font-weight: 600;
    font-size: 1.35rem;
    font-variation-settings: "opsz" 30;
    color: var(--bb-blue);
    line-height: 1.1;
}

.bb-escalera__bonos {
    margin-top: 3px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bb-orange);
}

@media only screen and (max-width: 991px) {
    .bb-escalera {
        --u: 18px;
        --ancho-barra: 100px;
        --gap: 10px;
    }
}

/* --- Flujo de pasos ------------------------------------------------------ */

.bb-flujo {
    --n: 3;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(var(--n), minmax(0, 1fr));
    gap: 30px;
}

.bb-flujo__paso {
    position: relative;
}

.bb-flujo__num {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--bb-blue);
    color: #fff;
    font-family: var(--bb-display);
    font-weight: 600;
    font-size: 1.45rem;
    font-variation-settings: "opsz" 30;
    line-height: 1;
    margin-bottom: 18px;
}

/* Guía entre pasos: un trazo fino que une los discos. Va por debajo (z 0)
   para que el disco lo tape al pasar por su centro. */
.bb-flujo__paso:not(:last-child)::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 26px;
    left: calc(50% + 36px);
    width: 100%;
    height: 2px;
    background: var(--bb-line);
}

.bb-flujo__titulo {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0 0 8px;
    color: var(--bb-heading);
}

.bb-flujo__texto {
    color: var(--bb-ink-soft);
    font-size: 0.95rem;
    margin: 0;
    max-width: 36ch;
}

.bb-flujo__cta {
    display: inline-block;
    margin-top: 14px;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--bb-blue-500);
}

.bb-flujo__cta:hover {
    color: var(--bb-orange-600);
}

.bb-flujo__cta i {
    margin-left: 4px;
}

/* Variante vertical: para listas largas de pasos (canjeo en el comercio). */
.bb-flujo--vertical {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    max-width: 780px;
}

.bb-flujo--vertical .bb-flujo__paso {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 22px;
    padding-bottom: 30px;
}

.bb-flujo--vertical .bb-flujo__num {
    margin-bottom: 0;
}

/* En vertical el texto va a su aire: la columna ya es ancha. */
.bb-flujo--vertical .bb-flujo__texto {
    max-width: 64ch;
}

.bb-flujo--vertical .bb-flujo__paso:not(:last-child)::after {
    top: 54px;
    bottom: 22px;
    left: 26px;
    right: auto;
    width: 2px;
    height: auto;
}

@media only screen and (max-width: 767px) {
    .bb-flujo {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
    }

    /* En una sola columna la guía horizontal no tiene sentido: se retira. */
    .bb-flujo__paso:not(:last-child)::after {
        display: none;
    }

    .bb-flujo--vertical .bb-flujo__paso {
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 16px;
    }

    .bb-flujo--vertical .bb-flujo__num {
        width: 46px;
        height: 46px;
        font-size: 1.25rem;
    }
}

/* --- Ticket de ejemplo --------------------------------------------------- */

.bb-ticket {
    --ticket-fondo: #ffffff;
    --ticket-linea: #d7e0ea;

    position: relative;
    max-width: 430px;
    background: var(--ticket-fondo);
    color: #10233d;
    border: 1px solid var(--ticket-linea);
    border-radius: 14px;
    padding: 24px 26px;
    font-size: 0.88rem;
    box-shadow: 0 22px 48px -28px rgba(0, 40, 84, 0.45);
}

.bb-ticket__negocio {
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--bb-blue);
}

.bb-ticket__dato {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--bb-ink-soft);
}

.bb-ticket__dato b {
    color: #10233d;
    font-weight: 700;
}

.bb-ticket__titulo {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--bb-blue);
}

.bb-ticket__titulo span {
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--bb-ink-soft);
}

.bb-ticket__meta {
    font-size: 0.78rem;
    color: var(--bb-ink-soft);
    margin-top: 2px;
}

.bb-ticket__tabla {
    width: 100%;
    margin-top: 12px;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.bb-ticket__tabla th {
    text-align: left;
    font-weight: 700;
    color: var(--bb-ink-soft);
    border-bottom: 2px solid var(--bb-blue);
    padding: 0 0 6px;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bb-ticket__tabla td {
    padding: 8px 0;
    border-bottom: 1px solid var(--ticket-linea);
}

.bb-ticket__tabla .num {
    text-align: right;
    font-variant-numeric: tabular-nums lining-nums;
}

.bb-ticket__linea {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    font-size: 0.88rem;
}

.bb-ticket__linea span {
    color: var(--bb-ink-soft);
}

.bb-ticket__linea b {
    font-variant-numeric: tabular-nums lining-nums;
}

.bb-ticket__ahorro {
    border-top: 1px dashed var(--ticket-linea);
    padding-top: 10px;
}

.bb-ticket__ahorro b {
    color: var(--bb-orange);
    font-weight: 800;
}

.bb-ticket__total {
    border-top: 2px solid var(--bb-blue);
    padding-top: 10px;
    font-size: 1.05rem;
}

.bb-ticket__total span {
    font-weight: 800;
    color: var(--bb-blue);
}

.bb-ticket__total b {
    font-family: var(--bb-display);
    font-weight: 600;
    font-variation-settings: "opsz" 30;
    font-size: 1.25rem;
    color: var(--bb-blue);
}

.bb-ticket__iva {
    margin-top: 10px;
    font-size: 0.74rem;
    color: var(--bb-ink-soft);
}

/* Perforación del ticket: troquel con muescas a ambos lados. */
.bb-ticket__perforado {
    position: relative;
    margin: 20px -26px;
    border-top: 2px dashed var(--ticket-linea);
}

.bb-ticket__perforado::before,
.bb-ticket__perforado::after {
    content: "";
    position: absolute;
    top: -10px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bb-ticket-fondo-externo, #f4f7fb);
}

.bb-ticket__perforado::before {
    left: -10px;
}

.bb-ticket__perforado::after {
    right: -10px;
}

/* --- Notas (condiciones en tarjetas) ------------------------------------- */

.bb-notas {
    display: grid;
    grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
    gap: 18px;
}

.bb-notas__item {
    border: 1px solid var(--bb-line);
    border-radius: 12px;
    padding: 20px 22px;
    background: #fff;
}

.bb-notas__titulo {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0 0 6px;
    color: var(--bb-heading);
}

.bb-notas__texto {
    margin: 0;
    color: var(--bb-ink-soft);
    font-size: 0.92rem;
}

@media only screen and (max-width: 767px) {
    .bb-notas {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --- Lista de documentos ------------------------------------------------- */

.bb-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.bb-lista__item {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    background: #fff;
    border: 1px solid var(--bb-line);
    border-radius: 12px;
    padding: 16px 18px;
}

.bb-lista__n {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--bb-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--bb-display);
    font-weight: 600;
    font-size: 1.05rem;
    font-variation-settings: "opsz" 30;
    line-height: 1;
}

.bb-lista__item > div > b {
    display: block;
    font-size: 0.98rem;
    color: var(--bb-heading);
}

.bb-lista__item > div > span {
    display: block;
    font-size: 0.88rem;
    color: var(--bb-ink-soft);
    margin-top: 2px;
}

/* Variante panel: una sola tarjeta con hairlines entre filas. Para listas de
   comprobación (sin descripción por línea) ocupa mucho menos. */
.bb-lista--panel {
    gap: 0;
    background: #fff;
    border: 1px solid var(--bb-line);
    border-radius: 12px;
    overflow: hidden;
}

.bb-lista--panel .bb-lista__item {
    border: 0;
    border-top: 1px solid var(--bb-line);
    border-radius: 0;
    padding: 12px 18px;
    background: transparent;
}

.bb-lista--panel .bb-lista__item:first-child {
    border-top: 0;
}

.bb-notas__enlace {
    display: inline-block;
    margin-top: 10px;
    font-weight: 700;
    font-size: 0.86rem;
    color: var(--bb-blue-500);
    word-break: break-all;
}

.bb-notas__enlace:hover {
    color: var(--bb-blue);
}

/* --- Tabla de tarifas (portada) ------------------------------------------ */

.bb-tarifas {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: #fff;
    border: 1px solid var(--bb-line);
    border-radius: 14px;
    overflow: hidden;
}

.bb-tarifas__celda {
    padding: 28px 18px;
    text-align: center;
    border-left: 1px solid var(--bb-line);
}

.bb-tarifas__celda:first-child {
    border-left: 0;
}

.bb-tarifas__importe {
    font-family: var(--bb-display);
    font-weight: 600;
    font-size: 2.2rem;
    font-variation-settings: "opsz" 30;
    color: var(--bb-blue);
    line-height: 1;
}

.bb-tarifas__bonos {
    margin-top: 9px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bb-orange);
}

.bb-tarifas__nota {
    margin-top: 4px;
    font-size: 0.8rem;
    color: var(--bb-ink-soft);
}

@media only screen and (max-width: 767px) {
    .bb-tarifas {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bb-tarifas__celda:nth-child(odd) {
        border-left: 0;
    }

    .bb-tarifas__celda:nth-child(n + 3) {
        border-top: 1px solid var(--bb-line);
    }
}

/* --- Bloque de cifras (datos destacados) --------------------------------- */

.bb-cifras {
    display: grid;
    grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr));
    gap: 1px;
    background: var(--bb-line);
    border: 1px solid var(--bb-line);
    border-radius: 14px;
    overflow: hidden;
}

@media only screen and (max-width: 575px) {
    .bb-cifras {
        grid-template-columns: minmax(0, 1fr);
    }
}

.bb-cifras__celda {
    background: #fff;
    padding: 26px 28px;
    text-align: center;
}

.bb-cifras__valor {
    font-family: var(--bb-display);
    font-weight: 600;
    font-size: 2.5rem;
    font-variation-settings: "opsz" 30;
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--bb-blue);
    line-height: 1;
}

.bb-cifras__etiqueta {
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--bb-ink-soft);
    max-width: 26ch;
    margin-left: auto;
    margin-right: auto;
}

/* --- Selector de perfil (página "Cómo funciona") --------------------------
   Dos tarjetas grandes: consumidor / establecimiento. La activa va en azul
   institucional con una regla ámbar arriba; la otra, en blanco con filete.
   ------------------------------------------------------------------------- */

.bb-selector {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.bb-selector__opcion {
    position: relative;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    padding: 26px 28px;
    border: 1px solid var(--bb-line);
    border-radius: 16px;
    background: #fff;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.bb-selector__opcion:hover {
    border-color: var(--bb-amber);
    box-shadow: 0 10px 26px rgba(0, 40, 84, 0.09);
    transform: translateY(-2px);
}

.bb-selector__opcion--activa {
    background: var(--bb-blue);
    border-color: var(--bb-blue);
    box-shadow: 0 14px 32px rgba(0, 40, 84, 0.2);
}

/* Regla ámbar de "estás aquí". */
.bb-selector__opcion--activa::after {
    content: "";
    position: absolute;
    top: -1px;
    left: 28px;
    right: 28px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--bb-amber);
}

.bb-selector__icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--bb-bg-soft);
    color: var(--bb-blue);
    transition: background 0.2s ease, color 0.2s ease;
}

.bb-selector__icono svg {
    width: 30px;
    height: 30px;
}

.bb-selector__opcion--activa .bb-selector__icono {
    background: rgba(255, 255, 255, 0.14);
    color: var(--bb-orange-claro);
}

.bb-selector__titulo {
    display: block;
    margin: 0 0 6px;
    font-family: var(--bb-display);
    font-size: 1.35rem;
    font-weight: 600;
    font-variation-settings: "opsz" 30;
    line-height: 1.15;
    color: var(--bb-heading);
}

.bb-selector__opcion--activa .bb-selector__titulo {
    color: #fff;
}

.bb-selector__texto {
    display: block;
    margin: 0;
    max-width: 36ch;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--bb-ink-soft);
}

.bb-selector__opcion--activa .bb-selector__texto {
    color: rgba(255, 255, 255, 0.8);
}

@media only screen and (max-width: 767px) {
    .bb-selector {
        grid-template-columns: minmax(0, 1fr);
    }

    .bb-selector__opcion {
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 14px;
        padding: 20px;
    }

    .bb-selector__icono {
        width: 46px;
        height: 46px;
    }

    .bb-selector__icono svg {
        width: 25px;
        height: 25px;
    }
}

/* --- Circuito del euro ----------------------------------------------------
   La secuencia completa de la campaña: se compra, se recibe el bono, se
   canjea y el comercio lo cobra. La flecha de vuelta cierra el circulo: el
   dinero no sale de Borja.
   ------------------------------------------------------------------------- */

.bb-circuito {
    --n: 4;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(var(--n), minmax(0, 1fr));
    gap: 28px;
}

.bb-circuito__nodo {
    position: relative;
    padding: 24px 24px 22px;
    background: #fff;
    border: 1px solid var(--bb-line);
    border-radius: 16px;
}

.bb-circuito__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: var(--bb-orange);
    color: #fff;
    font-weight: 800;
    font-size: 0.95rem;
    line-height: 1;
}

/* Chevron entre nodos. */
.bb-circuito__nodo:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 38px;
    right: -20px;
    width: 11px;
    height: 11px;
    border-top: 2px solid var(--bb-amber);
    border-right: 2px solid var(--bb-amber);
    transform: rotate(45deg);
}

.bb-circuito__titulo {
    margin: 0 0 8px;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--bb-heading);
}

.bb-circuito__texto {
    margin: 0;
    max-width: 32ch;
    font-size: 0.93rem;
    line-height: 1.55;
    color: var(--bb-ink-soft);
}

/* Flecha de vuelta + su lectura. */
.bb-circuito__vuelta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 38ch);
    align-items: center;
    gap: 24px;
    margin-top: 16px;
    padding: 18px 26px;
    background: var(--bb-bg-soft);
    border: 1px solid var(--bb-line);
    border-radius: 14px;
}

.bb-circuito__vuelta-linea {
    width: 100%;
    height: 18px;
    color: var(--bb-blue-500);
}

.bb-circuito__vuelta-texto {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--bb-ink);
}

@media only screen and (max-width: 991px) {
    .bb-circuito {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .bb-circuito__nodo:nth-child(2)::after {
        display: none;
    }
}

@media only screen and (max-width: 575px) {
    .bb-circuito {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .bb-circuito__nodo:not(:last-child)::after {
        display: none;
    }

    .bb-circuito__vuelta {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }
}

/* --- Bloque ilustrado (contacto) ------------------------------------------
   Sustituye a la ilustracion de banco de imagenes de la plantilla: un
   grafico propio que explica el canjeo en una imagen.
   ------------------------------------------------------------------------- */

.bb-contacto {
    padding: 30px;
    background: var(--bb-bg-soft);
    border: 1px solid var(--bb-line);
    border-radius: 20px;
}

.bb-contacto__img {
    display: block;
    width: 100%;
    height: auto;
}

.bb-contacto__pie {
    max-width: 42ch;
    margin: 20px auto 0;
    font-size: 0.92rem;
    line-height: 1.55;
    text-align: center;
    color: var(--bb-ink-soft);
}

/* --- Maqueta del área de canjeo -------------------------------------------
   Reproduce la pantalla real del panel del comercio
   (`Modules/Comercio/Resources/views/livewire/canjeo-bonos.blade.php`): los
   mismos campos, en el mismo orden y con los mismos rótulos. No es una
   captura —no hay entorno de producción—: es un dibujo en CSS. Si cambia el
   formulario real, esta maqueta hay que actualizarla.
   ------------------------------------------------------------------------- */

.bb-canjear {
    background: #fff;
    border: 1px solid var(--bb-line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0, 40, 84, 0.1);
}

.bb-canjear__barra {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 18px;
    background: var(--bb-bg-soft);
    border-bottom: 1px solid var(--bb-line);
}

.bb-canjear__luz {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--bb-line);
}

.bb-canjear__ruta {
    margin-left: 10px;
    font-size: 0.78rem;
    color: var(--bb-ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bb-canjear__cuerpo {
    padding: 22px 26px 26px;
}

/* Cabecera de la operación: fecha y establecimiento. */
.bb-canjear__meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--bb-line);
    text-align: center;
}

.bb-canjear__meta-celda .bb-canjear__valor {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--bb-ink);
}

/* Rejilla de campos: dos columnas como el formulario real. */
.bb-canjear__fila {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}

/* Fila del código: input + botón "Añadir" + botón "QR". */
.bb-canjear__fila--bono {
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: end;
}

.bb-canjear__etiqueta {
    display: block;
    margin-bottom: 5px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bb-ink-soft);
}

.bb-canjear__etiqueta em {
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--bb-ink-soft);
}

.bb-canjear__dato {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 42px;
    padding: 9px 13px;
    background: #fff;
    border: 1px solid #c9d5e2;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--bb-ink);
    font-variant-numeric: tabular-nums;
}

.bb-canjear__dato--codigo {
    letter-spacing: 0.12em;
    font-family: var(--bb-display);
    font-weight: 600;
    font-variation-settings: "opsz" 30;
}

/* Aviso de cuántos bonos caben en esta venta. */
.bb-canjear__aviso {
    margin: 15px 0 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--bb-ink-soft);
}

.bb-canjear__aviso strong {
    color: var(--bb-heading);
}

.bb-canjear__accion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid #c9d5e2;
    border-radius: 8px;
    background: var(--bb-bg-soft);
    color: var(--bb-blue);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.bb-canjear__accion--qr {
    background: var(--bb-blue);
    border-color: var(--bb-blue);
    color: #fff;
}

/* Tabla de bonos añadidos a la venta. */
.bb-canjear__tabla {
    width: 100%;
    margin-top: 18px;
    border-collapse: collapse;
    text-align: left;
}

.bb-canjear__tabla th {
    padding: 0 8px 8px;
    border-bottom: 1px solid var(--bb-line);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bb-ink-soft);
}

.bb-canjear__tabla td {
    padding: 10px 8px;
    border-bottom: 1px solid #eef3f8;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--bb-ink);
    font-variant-numeric: tabular-nums;
}

.bb-canjear__tabla td:first-child {
    font-family: var(--bb-display);
    font-weight: 600;
    letter-spacing: 0.08em;
    font-variation-settings: "opsz" 30;
    white-space: nowrap;
}

.bb-canjear__borrar {
    display: inline-block;
    padding: 4px 9px;
    border-radius: 5px;
    background: #fdecec;
    color: #b4231f;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Resumen y botón de confirmación. */
.bb-canjear__resumen {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 18px 0 16px;
}

.bb-canjear__resumen-etiqueta {
    font-size: 0.85rem;
    color: var(--bb-ink-soft);
}

.bb-canjear__resumen-valor {
    font-family: var(--bb-display);
    font-size: 1.6rem;
    font-weight: 600;
    font-variation-settings: "opsz" 30;
    color: var(--bb-orange-600);
    font-variant-numeric: tabular-nums;
}

.bb-canjear__boton {
    display: block;
    padding: 13px 20px;
    border-radius: 8px;
    background: var(--bb-orange);
    border: 1px solid var(--bb-red);
    color: #fff;
    font-weight: 800;
    font-size: 0.88rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
}

/* Acción secundaria (reiniciar). */
.bb-canjear__boton--secundario {
    margin-top: 10px;
    background: var(--bb-bg-soft);
    border-color: var(--bb-line);
    color: var(--bb-ink-soft);
    font-weight: 700;
}

@media only screen and (max-width: 575px) {
    .bb-canjear__cuerpo {
        padding: 18px 18px 20px;
    }

    .bb-canjear__fila,
    .bb-canjear__fila--bono {
        grid-template-columns: minmax(0, 1fr);
    }

    .bb-canjear__tabla th:nth-child(3),
    .bb-canjear__tabla td:nth-child(3) {
        display: none;
    }

    .bb-canjear__tabla td {
        font-size: 0.74rem;
        padding: 9px 6px;
    }
}

/* ==========================================================================
   Tablas de listado y DataTables
   -------------------------------------------------------------------------
   La plantilla deja las celdas y los controles de DataTables en grises por
   debajo de AA (#888 sobre blanco = 3.5:1).
   ========================================================================== */

.table,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_paginate {
    color: var(--bb-ink-soft);
}

/* ==========================================================================
   Loader de carga
   -------------------------------------------------------------------------
   La plantilla traia un spinner rosa (#f8eef2) que era de la marca anterior.
   Ahora se muestra el logotipo de BonoBorja en negro sobre fondo azul suave,
   con una barra ambar que recorre la base.

   El loader se desvanece en lugar de aparecer y desaparecer de golpe: la
   plantilla lo eliminaba con setTimeout(..., 0) al cargar la pagina y eso
   dejaba un flash feo. Ahora la entrada y la salida las gestiona
   resources/views/elementos/loader.blade.php (clase 'bb-visible').
   ========================================================================== */

/* Base: invisible y preparado para el fundido */
#loading-area {
    opacity: 0;
    transition: opacity 0.35s ease;
}

/* Estado visible (lo añade el JS del loader) */
#loading-area.bb-visible {
    opacity: 1;
}

/* Contenedor: solo el fondo. El logotipo va en una caja interior porque su
   animacion (que "respira") tiene que ir en un elemento distinto del que
   hace el fundido: si compartieran elemento, la animacion pisaria el
   fundido de salida y el loader desapareceria de golpe.

   El 'background-image: none' es IMPORTANTE: sin el, la plantilla pone su
   spinner magenta (#ef146e) de fondo y se ve debajo del logotipo. */
#loading-area.loading-03 {
    background-color: var(--bb-bg-soft);
    background-image: none;
    background-size: auto;
    background-position: center center;
}

/* Caja interior: el logotipo de BonoBorja en negro */
#loading-area .bb-loader-caja {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 280px;
    height: 100px;
    margin: -50px 0 0 -140px;
    background-image: url("../../../img/ui/bonoborja-loader.png");
    background-size: 280px auto;
    background-position: center center;
    background-repeat: no-repeat;
    animation: bb-loader-logo 1.9s ease-in-out infinite;
}

/* Pista de la barra */
#loading-area.loading-03::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 280px;
    height: 3px;
    margin: 76px 0 0 -140px;
    border-radius: 3px;
    background: var(--bb-line);
}

/* Barrido ambar */
#loading-area.loading-03::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 280px;
    height: 3px;
    margin: 76px 0 0 -140px;
    border-radius: 3px;
    background: linear-gradient(
        90deg,
        rgba(245, 166, 35, 0) 0%,
        var(--bb-amber) 50%,
        rgba(245, 166, 35, 0) 100%
    );
    background-size: 55% 100%;
    background-repeat: no-repeat;
    animation: bb-loader-barra 1.5s ease-in-out infinite;
}

@keyframes bb-loader-logo {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

@keyframes bb-loader-barra {
    0% {
        background-position: -60% 0;
    }

    100% {
        background-position: 160% 0;
    }
}

/* ==========================================================================
   Movimiento
   ==========================================================================
   WOW.js anima la entrada de las secciones. Se acota a un solo plano
   (desplazamiento + opacidad) para que no entre en conflicto con los
   hover de los bloques de umbral.
   ========================================================================== */

.wow {
    animation-duration: 0.6s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   Preferencias de movimiento
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .wow {
        opacity: 1 !important;
        transform: none !important;
    }
}