/* ============================================================
   BIOFARMA — hoja de estilos
   Móvil primero, en serio: promotores en la calle, veterinarias
   atendiendo y envíos a provincia con mala señal.
   ============================================================ */

/* ============================================================
   Paleta medida del vademécum impreso, respetando su reparto
   real (amarillo 46% · magenta 11% · azul 2%):
   - AMARILLO es la superficie: el "papel" del vademécum. En
     pantalla va en tinte (#FFF0BA); el #E9C30A puro queda para
     franjas, porque media pantalla en dorado pleno cansa.
   - MAGENTA es la estructura: header, footer, hero, bandas de
     sección, botón primario, links y etiquetas de categoría.
   - AZUL es la tinta: títulos y texto. Sobre dorado va siempre
     navy (--ink-on-gold); magenta sobre dorado da 4,13:1 y
     reprueba WCAG.
   Sobre amarillo, una card blanca da 1,14:1 contra el fondo y la
   sombra casi no se ve: los bloques se separan con filete
   (--border, 3,23:1), igual que en el impreso.
   Los estados no se comunican solo por color: danger y magenta
   son de tono cercano, siempre van con texto o ícono.
   ============================================================ */

:root {
    /* ----- Marca ----- */
    --magenta: #AD0165;
    --gold: #E9C30A;
    --navy: #1B3A72;

    /* ----- Escalas ----- */
    --magenta-50: #FFF3F7; --magenta-100: #FFE5EE; --magenta-200: #FFCCDE;
    --magenta-300: #F6AEC9; --magenta-400: #E588AD; --magenta-500: #D06090;
    --magenta-600: #BE3B79; --magenta-700: #AD0165; --magenta-800: #85004C;
    --magenta-900: #5F0035; --magenta-950: #430023;

    --gold-50: #FFFAE8; --gold-100: #FFF0BA; --gold-200: #FFDE61; --gold-300: #E9C30A;
    --gold-400: #C8A81F; --gold-500: #A58C26; --gold-600: #877328; --gold-700: #6B5D28;
    --gold-800: #514725; --gold-900: #363220; --gold-950: #232015;

    --navy-50: #F2F7FF; --navy-100: #E8EDF5; --navy-200: #D7DDE6; --navy-300: #BDC7D7;
    --navy-400: #9BAAC4; --navy-500: #798DAF; --navy-600: #5D759E; --navy-700: #45608E;
    --navy-800: #1B3A72; --navy-900: #132F62; --navy-950: #061D48;

    --sand-50: #F9F7EE; --sand-100: #EFEDE4; --sand-200: #DEDDD4; --sand-300: #C8C6BE;
    --sand-400: #ABA9A1; --sand-500: #8E8C84; --sand-600: #76756D; --sand-700: #626056;
    --sand-800: #4A483E; --sand-900: #343229; --sand-950: #222118;

    /* ----- Semánticos ----- */
    --surface: var(--gold-100);           /* fondo de página */
    --surface-raised: #FFFDF2;            /* cards, paneles, campos */
    --surface-sunken: #F5E08F;            /* zonas hundidas, filtros */

    --band: var(--magenta-700);           /* header, hero, bandas */
    --band-deep: var(--magenta-800);      /* footer, backoffice, hover de banda */
    --ink-on-band: #FFFFFF;
    --tint-accent: var(--magenta-100);    /* fondo de chips y badges suaves */

    --gold-strong: var(--gold-300);       /* franjas de énfasis */
    --ink-on-gold: var(--navy-900);

    --ink-strong: var(--navy-900);        /* títulos */
    --ink-body: var(--sand-900);          /* texto corrido */
    --ink-muted: var(--sand-800);
    --ink-accent: var(--magenta-700);     /* links, títulos de categoría */
    --ink-accent-hover: var(--magenta-800);

    --border: var(--gold-500);            /* borde de cards: separa del fondo */
    --border-subtle: #E0CE85;             /* divisores internos */
    --focus-ring: var(--magenta-700);

    --ok: #0A5F49; --ok-bg: #E6F2ED;
    --warn: #6E4B00; --warn-bg: #FAF0D8;
    --danger: #7E1A0C; --danger-bg: #FBEAE5;

    /* ----- Degradados: en el impreso los colores se funden, no cortan en seco ----- */
    /* Magenta que se aclara hacia rosado; el extremo claro (#BE3B79) sigue dando
       >5:1 con texto blanco, por eso no se llega a --magenta-500. */
    --grad-band: linear-gradient(135deg, var(--magenta-800) 0%, var(--magenta-700) 55%, var(--magenta-600) 100%);
    --grad-band-v: linear-gradient(180deg, var(--magenta-700) 0%, var(--magenta-800) 100%);
    /* Filete de acento: magenta que se desvanece a rosado y luego a nada. */
    --grad-filete: linear-gradient(90deg, var(--magenta-700) 0%, var(--magenta-400) 60%, rgba(229, 136, 173, 0) 100%);
    /* Amarillo fuerte que se diluye en el tinte de página. */
    --grad-oro: linear-gradient(180deg, #F2D56A 0%, var(--surface-sunken) 35%, var(--surface) 100%);
    --grad-borde-oro: 36px;               /* alto de la transición magenta → dorado → amarillo */

    --bf-radio: 12px;
    --bf-sombra: 0 6px 18px rgba(107, 93, 40, .18);

    /* ----- Elevación (reposo → hover) y movimiento ----- */
    /* Sombras teñidas del dorado/magenta de la marca: el gris puro se ve sucio sobre amarillo. */
    --elev-1: 0 1px 2px rgba(107, 93, 40, .10), 0 3px 8px rgba(107, 93, 40, .08);
    --elev-2: 0 14px 32px rgba(133, 0, 76, .16), 0 4px 10px rgba(107, 93, 40, .12);
    --ease-salida: cubic-bezier(.2, .8, .2, 1);
    --t-rapida: .18s;
    /* Color del brillo que sigue al mouse en las tarjetas (wwwroot/js/biofarma.js). */
    /* Tenue a propósito: tiene que acompañar, no llamar la atención. */
    --brillo: rgba(255, 222, 97, .24);

    /* ----- Bootstrap: que sus componentes hereden la paleta ----- */
    --bs-body-bg: var(--surface-raised);  /* campos, desplegables y tablas en crema, no en amarillo */
    --bs-body-color: var(--ink-body);
    --bs-emphasis-color: var(--ink-strong);
    --bs-secondary-color: var(--ink-muted);
    --bs-border-color: var(--border);
    --bs-primary: var(--magenta-700);
    --bs-primary-rgb: 173, 1, 101;
    --bs-link-color: var(--ink-accent);
    --bs-link-color-rgb: 173, 1, 101;
    --bs-link-hover-color: var(--ink-accent-hover);
    --bs-link-hover-color-rgb: 133, 0, 76;
    --bs-focus-ring-color: rgba(173, 1, 101, .25);
}

html, body {
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
    color: var(--ink-body);
    background: var(--surface);
    scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6 { font-weight: 650; letter-spacing: -.01em; color: var(--ink-strong); }
a { color: var(--ink-accent); text-underline-offset: 2px; }
a:hover { color: var(--ink-accent-hover); }
.text-muted { color: var(--ink-muted) !important; }

.btn-primary {
    --bs-btn-bg: var(--band);
    --bs-btn-border-color: var(--band);
    --bs-btn-color: var(--ink-on-band);
    --bs-btn-hover-bg: var(--band-deep);
    --bs-btn-hover-border-color: var(--band-deep);
    --bs-btn-active-bg: var(--magenta-900);
    --bs-btn-active-border-color: var(--magenta-900);
    --bs-btn-focus-shadow-rgb: 173, 1, 101;
    --bs-btn-disabled-bg: var(--magenta-400);
    --bs-btn-disabled-border-color: var(--magenta-400);
}

/* Secundarios: borde navy, fondo transparente — para no competir con el magenta. */
.btn-outline-primary,
.btn-outline-secondary {
    --bs-btn-color: var(--navy-800);
    --bs-btn-border-color: var(--navy-800);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--navy-800);
    --bs-btn-hover-border-color: var(--navy-800);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--navy-900);
    --bs-btn-active-border-color: var(--navy-900);
    --bs-btn-focus-shadow-rgb: 27, 58, 114;
    --bs-btn-disabled-color: var(--navy-600);
    --bs-btn-disabled-border-color: var(--navy-400);
}

.btn-link {
    --bs-btn-color: var(--ink-accent);
    --bs-btn-hover-color: var(--ink-accent-hover);
    --bs-btn-active-color: var(--ink-accent-hover);
}

.form-control, .form-select { border-color: var(--border); }

.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--focus-ring);
    box-shadow: 0 0 0 .2rem rgba(173, 1, 101, .18);
}

.form-check-input { border-color: var(--border); }
.form-check-input:checked { background-color: var(--band); border-color: var(--band); }

.dropdown-menu { border-color: var(--border); }
.dropdown-item.active, .dropdown-item:active { background-color: var(--band); color: var(--ink-on-band); }

.nav-pills { --bs-nav-pills-link-active-bg: var(--band); --bs-nav-link-color: var(--ink-strong); }

:focus-visible { outline-color: var(--focus-ring); }

/* Un título no es un control: si algo lo enfoca por programa (antes lo hacía FocusOnNavigate),
   no debe quedar el recuadro de foco dibujado encima. Botones, enlaces y campos conservan
   su foco visible, que es lo que necesita quien navega con teclado. */
h1:focus,
h1:focus-visible { outline: none; }

/* ---------- Encabezado ---------- */

/* El filete dorado inferior sube difuminado hacia el magenta en vez de cortar en seco. */
.bf-navbar {
    background:
        linear-gradient(0deg, var(--gold-strong) 0, var(--gold-strong) 2px, rgba(233, 195, 10, .55) 4px, rgba(233, 195, 10, 0) 12px),
        linear-gradient(90deg, var(--magenta-800) 0%, var(--magenta-700) 45%, var(--magenta-600) 100%);
    padding-block: .65rem calc(.65rem + 4px);
}

.bf-navbar .nav-link { color: rgba(255, 255, 255, .9); font-weight: 500; }
.bf-navbar .nav-link:hover, .bf-navbar .nav-link.active { color: var(--ink-on-band); }

/* Subrayado dorado que crece desde el centro al pasar el mouse; fijo en la página actual. */
.bf-nav-paginas .nav-link { position: relative; }

.bf-nav-paginas .nav-link::after {
    content: "";
    position: absolute;
    left: .8rem;
    right: .8rem;
    bottom: .2rem;
    height: 2px;
    border-radius: 2px;
    background: var(--gold-200);
    transform: scaleX(0);
    transition: transform var(--t-rapida) var(--ease-salida);
}

.bf-nav-paginas .nav-link:hover::after,
.bf-nav-paginas .nav-link.active::after { transform: scaleX(1); }
.bf-nav-paginas .nav-link.active { font-weight: 600; }
.bf-navbar .navbar-toggler { border-color: rgba(255, 255, 255, .5); }
.bf-navbar .navbar-toggler-icon {
    filter: invert(1) grayscale(1) brightness(2);
}

.bf-brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; }

.bf-brand__logo {
    display: block;
    flex-shrink: 0;
    width: auto;
    height: 48px;
    border-radius: 6px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .35), 0 2px 6px rgba(67, 0, 35, .35);
}

.bf-brand__texto { display: flex; flex-direction: column; line-height: 1.1; color: var(--ink-on-band); }
.bf-brand__texto strong { font-size: 1.05rem; letter-spacing: .06em; }
.bf-brand__texto small { font-size: .62rem; opacity: .9; text-transform: uppercase; }

.bf-nav-paginas .nav-link { padding-inline: .8rem; }

/* Acciones del visitante, separadas de las páginas del sitio por un filete. */
.bf-nav-acciones { align-items: center; gap: .5rem; }

.bf-carrito-widget {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 999px;
    padding: .3rem .85rem !important;
}

.bf-carrito-widget:hover { background: rgba(255, 255, 255, .12); }
.bf-nav-registro { font-size: .9rem; }
.bf-nav-portal { --bs-btn-color: var(--band-deep); --bs-btn-hover-color: var(--band-deep); font-weight: 600; }

@media (min-width: 992px) {
    .bf-nav-acciones { border-left: 1px solid rgba(255, 255, 255, .3); padding-left: 1rem; }
}

@media (max-width: 991.98px) {
    .bf-nav-acciones {
        flex-direction: row;
        flex-wrap: wrap;
        border-top: 1px solid rgba(255, 255, 255, .25);
        margin-top: .5rem;
        padding-top: .75rem;
    }
}

.bf-carrito-widget__badge {
    background: var(--gold-strong);
    color: var(--ink-on-gold);
    font-weight: 700;
}

/* ---------- Estructura ---------- */

.bf-main { min-height: 60vh; }
.bf-seccion { padding-block: 2.25rem; }
.bf-seccion__cabecera { margin-bottom: 1.25rem; }
.bf-seccion__cabecera h2 {
    display: inline-block;
    padding: 0 2.5rem .3rem 0;
    background: var(--grad-filete) left bottom / 100% 3px no-repeat;
}

.bf-migas { font-size: .82rem; color: var(--ink-muted); margin-bottom: .75rem; }
.bf-migas a { color: var(--ink-muted); }
.bf-migas a:hover { color: var(--ink-accent); }
.bf-migas span { margin-inline: .25rem; }

.bf-panel {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--bf-radio);
    padding: 1.25rem;
}

.bf-panel--suave { background: var(--surface-sunken); border-color: var(--border-subtle); }

.bf-vacio {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--ink-muted);
    background: var(--surface-sunken);
    border-radius: var(--bf-radio);
}

/* ---------- Hero ---------- */

/* Abajo, el magenta pasa por el dorado y se funde en el amarillo de la página, como
   las mezclas del vademécum. El padding inferior deja el texto fuera de esa zona. */
.bf-hero {
    background:
        linear-gradient(0deg, var(--surface) 0, var(--gold-strong) calc(var(--grad-borde-oro) * .45), rgba(233, 195, 10, 0) var(--grad-borde-oro)),
        var(--grad-band);
    color: var(--ink-on-band);
    padding-block: 3.5rem calc(3.5rem + var(--grad-borde-oro));
}

.bf-hero h1, .bf-hero h2 { color: var(--ink-on-band); }

.bf-hero__sello {
    display: inline-block;
    background: var(--gold-strong);
    color: var(--ink-on-gold);
    border-radius: 999px;
    padding: .2rem .8rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.bf-hero__titulo { font-size: clamp(1.9rem, 5vw, 3rem); max-width: 16ch; }
.bf-hero__bajada { max-width: 56ch; opacity: .95; margin-block: 1rem 1.75rem; }
.bf-hero__acciones { display: flex; flex-wrap: wrap; gap: .75rem; }
.bf-hero .btn-light { --bs-btn-color: var(--band-deep); --bs-btn-hover-color: var(--band-deep); }

.bf-puerta {
    height: 100%;
    background:
        var(--grad-filete) left top / 100% 5px no-repeat,
        linear-gradient(180deg, #FFF6D2 0%, var(--surface-raised) 55%);
    border: 1px solid var(--border);
    border-radius: var(--bf-radio);
    padding: calc(1.5rem + 5px) 1.5rem 1.5rem;
}

.bf-franja {
    background:
        var(--grad-filete) left top / 100% 4px no-repeat,
        var(--grad-oro);
    padding-block: calc(2.25rem + 4px) 2.25rem;
    margin-top: 2rem;
}

.bf-franja--suave {
    margin-top: 2rem;
    padding: 1.5rem;
    border-radius: var(--bf-radio);
}

/* ---------- Carrusel de portada ---------- */

/* Ocupa el lugar del hero: misma banda magenta que se funde en dorado y amarillo abajo. */
.bf-carrusel {
    background:
        linear-gradient(0deg, var(--surface) 0, var(--gold-strong) calc(var(--grad-borde-oro) * .45), rgba(233, 195, 10, 0) var(--grad-borde-oro)),
        var(--grad-band);
    color: var(--ink-on-band);
    padding-block: 2.5rem calc(1rem + var(--grad-borde-oro));
}

.bf-carrusel__slide {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    align-items: center;
    gap: 2rem;
    min-height: 320px;
}

.bf-carrusel__texto { max-width: 34rem; }

.bf-carrusel__etiqueta {
    display: inline-block;
    border-radius: 999px;
    padding: .22rem .8rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: .9rem;
}

/* Sobre magenta: la oferta en dorado con texto navy, nunca magenta sobre dorado. */
.bf-carrusel__etiqueta--oferta { background: var(--gold-strong); color: var(--ink-on-gold); }
.bf-carrusel__etiqueta--novedad { background: #fff; color: var(--band-deep); }
.bf-carrusel__etiqueta--destacado { background: var(--navy-900); color: #fff; }

.bf-carrusel__titulo { font-size: clamp(1.7rem, 4.5vw, 2.75rem); color: var(--ink-on-band); margin-bottom: .6rem; }
.bf-carrusel__bajada { font-size: 1.05rem; opacity: .95; margin-bottom: .5rem; }
.bf-carrusel__especies { font-size: .85rem; opacity: .85; margin-bottom: 1.25rem; }
.bf-carrusel .btn-light { --bs-btn-color: var(--band-deep); --bs-btn-hover-color: var(--band-deep); margin-top: .5rem; }

.bf-carrusel__imagen {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    background: radial-gradient(circle at 50% 45%, var(--surface-raised) 40%, var(--gold-100) 100%);
    border-radius: var(--bf-radio);
    box-shadow: 0 12px 32px rgba(67, 0, 35, .35);
    overflow: hidden;
}

.bf-carrusel__imagen img { width: 100%; height: 100%; object-fit: contain; padding: 1.25rem; }

.bf-carrusel__promo {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    background: radial-gradient(circle at 50% 45%, var(--gold-200) 0%, var(--gold-strong) 70%);
    border-radius: var(--bf-radio);
    box-shadow: 0 12px 32px rgba(67, 0, 35, .35);
    color: var(--ink-on-gold);
    font-size: clamp(2rem, 6vw, 3.5rem);
    font-weight: 800;
    text-align: center;
    padding: 1rem;
    line-height: 1.05;
}

.bf-carrusel__controles {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: 1.5rem;
}

/* Bootstrap posiciona .carousel-indicators en absoluto sobre la imagen: acá va en la barra. */
.bf-carrusel .bf-carrusel__puntos {
    position: static;
    margin: 0;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.bf-carrusel .bf-carrusel__puntos [data-bs-slide-to] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: transparent;
    opacity: .8;
    margin: 0 4px;
}

.bf-carrusel .bf-carrusel__puntos .active { background: var(--gold-200); border-color: var(--gold-200); opacity: 1; }

.bf-carrusel__flecha,
.bf-carrusel__pausa {
    border: 1px solid rgba(255, 255, 255, .6);
    background: rgba(255, 255, 255, .08);
    color: #fff;
    border-radius: 999px;
    line-height: 1;
}

.bf-carrusel__flecha { width: 2.25rem; height: 2.25rem; font-size: 1.4rem; padding-bottom: .15rem; }
.bf-carrusel__pausa { margin-left: auto; font-size: .8rem; padding: .45rem .9rem; }
.bf-carrusel__flecha:hover, .bf-carrusel__pausa:hover { background: rgba(255, 255, 255, .2); }
.bf-carrusel__flecha:focus-visible, .bf-carrusel__pausa:focus-visible { outline: 2px solid var(--gold-200); outline-offset: 2px; }

/* ---------- Portada: accesos, qué es, quiénes somos ---------- */

.bf-antetitulo {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-accent);
    margin-bottom: .35rem;
}

.bf-quees__titulo { font-size: clamp(1.6rem, 3.2vw, 2.2rem); margin-bottom: .9rem; }
.bf-quees__lead { font-size: 1.1rem; color: var(--ink-strong); }

.bf-quees__objetivo {
    border-left: 4px solid var(--band);
    padding: .4rem 0 .4rem .9rem;
    font-weight: 600;
    color: var(--ink-strong);
}

/* Portada: una tarjeta en dos paneles. A la izquierda la marca sobre la banda magenta (el
   mismo degradado del header), a la derecha el texto sobre crema. */
.bf-quees__tarjeta {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: calc(var(--bf-radio) + 4px);
    box-shadow: var(--elev-2);
    overflow: hidden;
}

.bf-quees__visual {
    position: relative;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 2.5rem 2rem 3rem;
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 222, 97, .28) 0%, transparent 60%),
        var(--grad-band);
}

.bf-quees__logo {
    width: min(210px, 70%);
    height: auto;
    border-radius: var(--bf-radio);
    box-shadow: 0 18px 40px rgba(67, 0, 35, .45);
}

/* El sello va redondo (la imagen ya está recortada en círculo), con un aro blanco que lo
   despega del magenta. */
.bf-quees__sello {
    position: absolute;
    right: 1.5rem;
    bottom: 1.25rem;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: #fff;
    padding: 3px;
    box-shadow: 0 6px 16px rgba(67, 0, 35, .35);
}

.bf-quees__texto { padding: 2.5rem 2.75rem; align-self: center; }
.bf-quees__invitacion { color: var(--ink-muted); }

@media (max-width: 991.98px) {
    .bf-quees__tarjeta { grid-template-columns: 1fr; }
    .bf-quees__visual { padding: 2rem 1.5rem 2.25rem; }
    .bf-quees__logo { width: min(150px, 45%); }
    .bf-quees__texto { padding: 1.75rem 1.5rem; }
}


.bf-pilar {
    height: 100%;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--bf-radio);
    padding: 1.25rem;
}

.bf-pilar__titulo {
    font-size: 1.1rem;
    display: inline-block;
    padding: 0 1.5rem .25rem 0;
    margin-bottom: .75rem;
    background: var(--grad-filete) left bottom / 100% 3px no-repeat;
}

.bf-pilar .bf-lista { margin: 0; font-size: .92rem; }

.bf-valor {
    height: 100%;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-top: 4px solid var(--gold-strong);
    border-radius: var(--bf-radio);
    padding: 1rem 1.1rem;
    font-size: .9rem;
}

.bf-valor__nombre { font-size: 1rem; color: var(--ink-accent); margin-bottom: .4rem; }


/* Saltos dentro de una página larga (Nuestros clientes). */
.bf-subnav { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }

.bf-subnav a {
    border: 1px solid var(--border);
    background: var(--surface-raised);
    border-radius: 999px;
    padding: .3rem .9rem;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
}

.bf-subnav a:hover { border-color: var(--band); background: var(--tint-accent); }
.bf-clientes__intro { max-width: 46rem; }

/* Los saltos a #clientes y a cada departamento no deben quedar pegados al borde. */
#clientes, .bf-departamento { scroll-margin-top: 1rem; }

/* Un bloque por departamento en "Nuestros clientes" (/nosotros). */
.bf-departamento { margin-top: 2rem; }

.bf-departamento__titulo {
    display: inline-block;
    font-size: 1.25rem;
    padding: 0 2rem .3rem 0;
    margin-bottom: 1rem;
    background: var(--grad-filete) left bottom / 100% 3px no-repeat;
}

.bf-departamento__subtitulo { font-size: 1rem; color: var(--ink-muted); margin: 1.25rem 0 .75rem; }

/* ---------- Nuestros clientes ---------- */

.bf-clientes__departamentos {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.bf-clientes__departamentos li {
    background: var(--tint-accent);
    color: var(--magenta-800);
    border-radius: 999px;
    padding: .2rem .75rem;
    font-size: .8rem;
}

.bf-clientes__grilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.bf-cliente {
    display: flex;
    flex-direction: column;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--bf-radio);
    overflow: hidden;
}

.bf-cliente__foto {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, var(--gold-100), var(--surface-sunken));
    border-bottom: 1px solid var(--border-subtle);
}

.bf-cliente__foto img { width: 100%; height: 100%; object-fit: cover; }

.bf-cliente__iniciales {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--grad-band);
    color: #fff;
    font-size: 1.6rem;
    font-weight: 800;
}

.bf-cliente__cuerpo { padding: .85rem 1rem 1rem; }
.bf-cliente__tipo { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-accent); font-weight: 700; margin: 0 0 .2rem; }
.bf-cliente__nombre { font-size: 1.02rem; margin: 0 0 .2rem; }
.bf-cliente__lugar { font-size: .85rem; color: var(--ink-muted); margin: 0; }

/* Backoffice: columna "En la web" de clientes. */
.bf-vitrina-admin { display: flex; gap: .6rem; align-items: flex-start; }

.bf-vitrina-admin__foto {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 64px;
    height: 48px;
    background: var(--surface-sunken);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    overflow: hidden;
}

.bf-vitrina-admin__foto img { width: 100%; height: 100%; object-fit: cover; }
.bf-vitrina-admin__foto .small { font-size: .62rem; text-align: center; line-height: 1.1; }
.bf-subir:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ---------- Tarjetas de producto ---------- */

.bf-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--bf-radio);
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}


.bf-card__imagen {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    background: radial-gradient(circle at 50% 40%, var(--surface-raised) 35%, #FFF1C4 100%);
    border-bottom: 1px solid var(--border-subtle);
    text-decoration: none;
}

.bf-card__imagen img { width: 100%; height: 100%; object-fit: contain; padding: 1rem; }

.bf-card__placeholder {
    color: var(--navy-700);
    font-weight: 700;
    text-align: center;
    padding: 1rem;
}

.bf-card__cinta {
    position: absolute;
    top: .6rem;
    left: .6rem;
    background: var(--band);
    color: var(--ink-on-band);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: .18rem .55rem;
    border-radius: 999px;
}

.bf-card__cuerpo { display: flex; flex-direction: column; gap: .35rem; padding: 1rem; flex: 1; }
.bf-card__tipo { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-accent); font-weight: 700; margin: 0; }
.bf-card__titulo { font-size: 1.05rem; margin: 0; }
.bf-card__titulo a { text-decoration: none; color: var(--ink-strong); }
.bf-card__titulo a:hover { color: var(--ink-accent); }
.bf-card__texto { font-size: .85rem; color: var(--ink-muted); margin: 0; }
.bf-card__especies { font-size: .75rem; color: var(--navy-700); margin: 0; }

.bf-card__pie {
    margin-top: auto;
    padding-top: .75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    flex-wrap: wrap;
}

/* ---------- Precio ---------- */

.bf-precio { display: inline-flex; align-items: baseline; gap: .3rem; }
.bf-precio__desde { font-size: .7rem; color: var(--ink-muted); }
.bf-precio__monto { font-weight: 700; font-size: 1.05rem; color: var(--ink-strong); }
.bf-precio--corporativo .bf-precio__monto { color: var(--ink-accent); }

.bf-precio__etiqueta {
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    background: var(--navy-800);
    color: #fff;
    border-radius: 999px;
    padding: .1rem .45rem;
}

.bf-precio--consultar { color: var(--ink-muted); font-size: .85rem; }

.bf-referencial {
    font-size: .75rem;
    color: var(--warn);
    background: var(--surface-raised);
    border: 1px dashed var(--warn);
    border-radius: 8px;
    padding: .3rem .6rem;
    display: inline-block;
}

/* ---------- Filtros ---------- */

.bf-filtros {
    background: linear-gradient(180deg, var(--surface-sunken) 0%, #FAEBA8 100%);
    border: 1px solid var(--border-subtle);
    border-radius: var(--bf-radio);
    padding: 1rem;
    margin-block: 1rem;
}

/* Pestañas de especie en /productos: una fila, subrayado magenta en la elegida. */
.bf-especies {
    display: flex;
    gap: .25rem;
    overflow-x: auto;
    scrollbar-width: thin;
    border-bottom: 2px solid var(--border-subtle);
    margin-bottom: 1rem;
}

.bf-especies__tab {
    flex-shrink: 0;
    position: relative;
    padding: .6rem 1rem;
    font-weight: 600;
    color: var(--ink-muted);
    text-decoration: none;
    border-radius: 8px 8px 0 0;
    transition: color var(--t-rapida), background-color var(--t-rapida);
}

.bf-especies__tab:hover { color: var(--ink-accent); background: var(--tint-accent); }

.bf-especies__tab--activa,
.bf-especies__tab--activa:hover { color: var(--ink-accent); background: var(--surface-raised); }

.bf-especies__tab--activa::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--grad-band);
}

.bf-resultados {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* Una sola vez por página explica por qué no hay precios, en vez de "consultar" en cada tarjeta. */
.bf-nota-precios {
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    border-left: 4px solid var(--band);
    border-radius: 8px;
    padding: .65rem .9rem;
    font-size: .88rem;
    color: var(--ink-body);
}

.bf-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.5rem; }

.bf-chip {
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: .25rem .8rem;
    font-size: .82rem;
    text-decoration: none;
    color: var(--ink-body);
    background: var(--surface-raised);
}

.bf-chip:hover { border-color: var(--band); color: var(--band); background: var(--tint-accent); }
.bf-chip--activo, .bf-chip--activo:hover { background: var(--band); border-color: var(--band); color: var(--ink-on-band); }

/* ---------- Ficha de producto ---------- */

.bf-ficha__imagen {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    background: radial-gradient(circle at 50% 40%, var(--surface-raised) 40%, #FFF1C4 100%);
    border: 1px solid var(--border);
    border-radius: var(--bf-radio);
    overflow: hidden;
}

.bf-ficha__imagen img { width: 100%; height: 100%; object-fit: contain; padding: 2rem; }
.bf-ficha__tipo { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-accent); font-weight: 700; }
.bf-ficha__titulo { font-size: clamp(1.6rem, 4vw, 2.25rem); }
.bf-ficha__corta { font-size: 1.05rem; color: var(--ink-muted); }
.bf-ficha__especies { font-size: .9rem; }
.bf-ficha__documentos { margin-top: 1.25rem; }
.bf-ficha__documentos ul { list-style: none; padding: 0; margin: 0; }
.bf-ficha__documentos li { padding: .35rem 0; border-bottom: 1px solid var(--border-subtle); }
.bf-ficha__acciones { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
/* Ficha técnica: una tarjeta con filas "dato | texto", en vez de títulos y párrafos sueltos. */
.bf-ficha-tecnica {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--bf-radio);
    box-shadow: var(--elev-1);
    overflow: hidden;
}

.bf-ficha-dato {
    display: grid;
    grid-template-columns: minmax(9rem, 13rem) 1fr;
    gap: .25rem 1.5rem;
    padding: .9rem 1.25rem;
}

.bf-ficha-dato + .bf-ficha-dato { border-top: 1px solid var(--border-subtle); }
.bf-ficha-dato:nth-child(even) { background: #FFF9E4; }

.bf-ficha-dato__titulo {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink-accent);
    margin: .15rem 0 0;
}

.bf-ficha-dato__texto { margin: 0; }

@media (max-width: 575.98px) {
    .bf-ficha-dato { grid-template-columns: 1fr; }
}

.bf-senasag {
    display: inline-block;
    background: var(--surface-raised);
    border: 1px solid var(--navy-800);
    color: var(--navy-900);
    border-radius: 8px;
    padding: .35rem .7rem;
    font-size: .85rem;
    font-weight: 600;
}

.bf-retiro {
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    border-left: 4px solid var(--warn);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-top: 1.5rem;
}

.bf-presentaciones { display: flex; flex-direction: column; gap: .6rem; }

.bf-presentacion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--bf-radio);
    padding: .85rem 1rem;
}

.bf-presentacion__datos { flex: 1 1 200px; }
.bf-presentacion__nombre { font-weight: 600; margin: 0; color: var(--ink-strong); }
.bf-presentacion__peso, .bf-presentacion__sku { font-size: .78rem; color: var(--ink-muted); margin: 0; }
.bf-presentacion__precio { flex: 0 0 auto; }
.bf-presentacion__accion { display: flex; gap: .35rem; align-items: center; }
.bf-presentacion__accion input { width: 4.5rem; }

/* ---------- Tablas, avisos, estados ---------- */

.bf-tabla { --bs-table-bg: transparent; --bs-table-color: var(--ink-body); --bs-border-color: var(--border-subtle); }
.bf-tabla thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); border-bottom: 2px solid var(--border); }
.bf-fila-bonificada { background: var(--ok-bg); }
.bf-cantidad { display: flex; gap: .35rem; align-items: center; }
.bf-cantidad input { width: 5rem; }

.bf-badge-promo { background: var(--band); color: var(--ink-on-band); font-weight: 500; }

/* Sobre amarillo, los fondos suaves de los avisos casi no se distinguen: llevan borde. */
.bf-aviso { border: 1px solid; border-radius: var(--bf-radio); padding: .85rem 1.1rem; margin-bottom: 1rem; }
.bf-aviso--ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok); }
.bf-aviso--alerta { background: var(--warn-bg); color: var(--warn); border-color: var(--warn); }
.bf-aviso--error { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }
.bf-error { color: var(--danger); font-size: .82rem; }

.bf-estado {
    font-weight: 500;
    background: var(--sand-100);
    color: var(--sand-800);
    text-transform: none;
}

.bf-estado--enviada, .bf-estado--registrada { background: var(--navy-100); color: var(--navy-800); }
.bf-estado--enrevision, .bf-estado--contactada { background: var(--warn-bg); color: var(--warn); }
.bf-estado--cotizada, .bf-estado--programada { background: var(--tint-accent); color: var(--magenta-800); }
.bf-estado--aceptada, .bf-estado--aprobado, .bf-estado--vigente, .bf-estado--entregado,
.bf-estado--cerrada { background: var(--ok-bg); color: var(--ok); }
.bf-estado--rechazada, .bf-estado--rechazado, .bf-estado--perdida, .bf-estado--cancelado,
.bf-estado--suspendido { background: var(--danger-bg); color: var(--danger); }
.bf-estado--vencida, .bf-estado--inactiva, .bf-estado--borrador { background: var(--sand-100); color: var(--sand-700); }
.bf-estado--pendiente { background: var(--warn-bg); color: var(--warn); }
.bf-estado--recibido, .bf-estado--confirmado, .bf-estado--enpreparacion,
.bf-estado--despachado { background: var(--navy-100); color: var(--navy-800); }

.bf-alerta-vence { color: var(--warn); font-weight: 600; }

/* ---------- Puntos de venta, blog ---------- */

.bf-puntos { margin-top: 2rem; }
.bf-punto { height: 100%; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--bf-radio); padding: 1rem; }
.bf-punto__nombre { font-size: 1rem; font-weight: 600; margin-bottom: .4rem; }
.bf-punto__dato { font-size: .85rem; color: var(--ink-muted); margin: 0 0 .15rem; }

.bf-nota { height: 100%; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--bf-radio); padding: 1.25rem; }
.bf-nota__titulo { font-size: 1.15rem; }
.bf-nota__titulo a { color: var(--ink-strong); text-decoration: none; }
.bf-nota__titulo a:hover { color: var(--ink-accent); }
.bf-nota__fecha { font-size: .78rem; color: var(--ink-muted); }
.bf-nota__resumen { font-size: .9rem; color: var(--ink-muted); }

.bf-articulo { max-width: 46rem; }
.bf-articulo__resumen { font-size: 1.05rem; color: var(--ink-muted); }
.bf-articulo__cuerpo p { line-height: 1.75; }

.bf-lista { padding-left: 1.1rem; }
.bf-lista li { margin-bottom: .4rem; }
.bf-lista li::marker { color: var(--ink-accent); }
.bf-datos { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--bf-radio); padding: 1.25rem; }
.bf-datos p { margin-bottom: .3rem; font-size: .9rem; }

/* ---------- Portal ---------- */

.bf-login { padding-block: 3rem; }

.bf-timeline { list-style: none; padding: 0; margin: 1rem 0 0; }

.bf-timeline__item {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .4rem 0 .4rem 1rem;
    border-left: 2px solid var(--band);
    font-size: .85rem;
}

.bf-timeline__estado { font-weight: 600; color: var(--ink-strong); }
.bf-timeline__fecha { color: var(--ink-muted); }
.bf-timeline__nota { color: var(--ink-muted); font-style: italic; }

/* ---------- Backoffice ---------- */

.bf-admin { display: flex; min-height: 100vh; background: var(--surface); }

.bf-admin__nav {
    width: 250px;
    flex-shrink: 0;
    background: var(--grad-band-v);
    color: var(--ink-on-band);
    padding: 1.25rem 1rem;
    display: flex;
    flex-direction: column;
}

.bf-admin__marca {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--ink-on-band);
    text-decoration: none;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.bf-admin__nav .nav-link { color: rgba(255, 255, 255, .85); border-radius: 8px; padding: .45rem .7rem; }
.bf-admin__nav .nav-link:hover { background: rgba(255, 255, 255, .12); color: var(--ink-on-band); }
.bf-admin__nav .nav-link.active { background: var(--surface-raised); color: var(--band-deep); font-weight: 600; box-shadow: inset 3px 0 0 var(--gold-strong); }

.bf-admin__grupo {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--gold-200);
    margin: 1rem 0 .3rem .7rem;
}

.bf-admin__pie { margin-top: auto; padding-top: 1.5rem; display: flex; flex-direction: column; gap: .4rem; }
.bf-admin__link { color: rgba(255, 255, 255, .85); font-size: .85rem; text-decoration: none; text-align: left; }
.bf-admin__link:hover { color: var(--ink-on-band); }
.bf-admin__link--boton { background: none; border: 0; padding: 0; }

.bf-admin__contenido { flex: 1; padding: 1.75rem; min-width: 0; }

.bf-admin__cabecera {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.bf-kpis { margin-bottom: .5rem; }

.bf-kpi {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    height: 100%;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--bf-radio);
    padding: 1rem;
    text-decoration: none;
    color: var(--ink-body);
}

.bf-kpi:hover { border-color: var(--band); color: var(--ink-body); }
.bf-kpi__valor { font-size: 1.9rem; font-weight: 700; line-height: 1; color: var(--ink-strong); }
.bf-kpi--activo { border-top: 4px solid var(--band); }
.bf-kpi--activo .bf-kpi__valor { color: var(--ink-accent); }
.bf-kpi__titulo { font-size: .82rem; font-weight: 600; }
.bf-kpi__detalle { font-size: .72rem; color: var(--ink-muted); }

.bf-tabs { margin-bottom: 1rem; gap: .35rem; }
.bf-tabs .nav-link { color: var(--ink-body); background: var(--surface-raised); border: 1px solid var(--border); }
.bf-tabs .nav-link:hover { border-color: var(--band); color: var(--band); }
.bf-tabs .nav-link.active { background: var(--band); border-color: var(--band); color: var(--ink-on-band); }

.bf-ranking { list-style: none; counter-reset: pos; padding: 0; margin: 0; }

.bf-ranking li {
    counter-increment: pos;
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--border-subtle);
}

.bf-ranking li::before { content: counter(pos) "."; color: var(--ink-accent); font-weight: 700; margin-right: .4rem; }
.bf-ranking__valor { font-weight: 600; color: var(--ink-strong); }

.bf-dl { display: grid; grid-template-columns: auto 1fr; gap: .25rem .75rem; font-size: .85rem; margin: 0; }
.bf-dl dt { color: var(--ink-muted); font-weight: 500; }
.bf-dl dd { margin: 0; }

.bf-scroll { max-height: 240px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: .6rem; background: var(--surface-raised); }

.bf-zona { padding: .6rem 0; border-bottom: 1px solid var(--border-subtle); }
.bf-zona__nombre { font-weight: 600; margin: 0; color: var(--ink-strong); }
.bf-zona__localidades { font-size: .82rem; color: var(--ink-muted); margin: 0; }

/* ---------- Pie ---------- */

/* Arriba, el amarillo de la página se oscurece a dorado y se funde en el magenta:
   la misma transición del hero, en sentido inverso. */
.bf-footer {
    background:
        linear-gradient(180deg, var(--surface) 0, var(--gold-strong) calc(var(--grad-borde-oro) * .45), rgba(233, 195, 10, 0) var(--grad-borde-oro)),
        linear-gradient(180deg, var(--magenta-700) 0%, var(--magenta-800) 60%, var(--magenta-900) 100%);
    color: rgba(255, 255, 255, .85);
    padding-block: calc(2.5rem + var(--grad-borde-oro)) 1.5rem;
    margin-top: 3rem;
}
.bf-footer__marca { font-weight: 800; letter-spacing: .1em; color: #fff; margin-bottom: .5rem; }
.bf-footer__texto { font-size: .85rem; }
.bf-footer__sello { display: block; width: 96px; height: auto; margin-top: .9rem; }
.bf-footer__titulo { font-weight: 600; color: var(--gold-strong); font-size: .9rem; }
.bf-footer__lista { list-style: none; padding: 0; font-size: .85rem; }
.bf-footer__lista li { margin-bottom: .3rem; }
.bf-footer__lista a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.bf-footer__lista a:hover { color: #fff; }
.bf-footer__legal { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .18); font-size: .75rem; display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; justify-content: space-between; align-items: baseline; }
.bf-footer__aviso { margin: 0; opacity: .8; }
.bf-footer__autoria { margin: 0; opacity: .8; }
.bf-footer__autoria a { color: var(--gold-200); text-decoration: none; font-weight: 600; }
.bf-footer__autoria a:hover, .bf-footer__autoria a:focus-visible { color: #fff; text-decoration: underline; }

/* ============================================================
   Secciones: la misma división en todas las vistas.
   Cada vista es una pila de .bf-bloque a lo ancho, con el mismo
   espaciado y el mismo encabezado (antetítulo + título con filete
   + bajada). Los bloques --alterno cambian de fondo, así el corte
   entre secciones se ve sin necesidad de líneas.
   ============================================================ */

.bf-cabecera-pagina {
    background: linear-gradient(180deg, var(--surface-sunken) 0%, var(--surface) 100%);
    border-bottom: 1px solid var(--border-subtle);
    padding-block: 1.5rem 1.75rem;
}

.bf-cabecera-pagina h1 { margin-bottom: .35rem; }
.bf-cabecera-pagina .bf-migas { margin-bottom: .5rem; }
.bf-cabecera-pagina__bajada { color: var(--ink-muted); max-width: 48rem; margin: 0; }

.bf-bloque { padding-block: 3rem; }
.bf-bloque + .bf-bloque { border-top: 1px solid var(--border-subtle); }

/* Justo debajo de la cabecera de página: no hace falta tanto aire arriba. */
.bf-bloque--compacto { padding-top: 1.5rem; }
.bf-bloque--compacto .bf-filtros { margin-top: 0; }

.bf-bloque--alterno {
    background: linear-gradient(180deg, #FCE9A4 0%, var(--surface-sunken) 100%);
    border-top-color: transparent !important;
}

.bf-bloque__cabecera { margin-bottom: 1.75rem; max-width: 48rem; }

.bf-bloque__titulo {
    display: inline-block;
    font-size: clamp(1.35rem, 2.6vw, 1.75rem);
    padding: 0 2.5rem .35rem 0;
    margin-bottom: .5rem;
    background: var(--grad-filete) left bottom / 100% 3px no-repeat;
}

.bf-bloque__bajada { color: var(--ink-muted); margin: 0; }

/* Grupos de un formulario largo (registro): un subtítulo con filete separa cada parte. */
.bf-form__grupo {
    color: var(--ink-accent);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .78rem;
    margin: 1.75rem 0 .9rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--border-subtle);
}

.bf-form__grupo:first-child { margin-top: 0; }

/* Llamado a registrarse: una sola caja limpia, texto a la izquierda y botón a la derecha. */
.bf-registro__caja {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem 2rem;
    background:
        var(--grad-filete) left top / 100% 4px no-repeat,
        var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--bf-radio);
    box-shadow: var(--elev-1);
    padding: 1.75rem 2rem;
}

.bf-registro__caja > div { flex: 1 1 28rem; }

/* ============================================================
   Tarjetas: elevación, hover y brillo que sigue al mouse.
   El brillo es un radial-gradient en --mx/--my, que actualiza
   wwwroot/js/biofarma.js. Sin JavaScript la tarjeta se ve igual,
   solo que sin el brillo.
   ============================================================ */

.bf-card, .bf-cliente, .bf-pilar, .bf-valor, .bf-punto, .bf-nota,
.bf-presentacion, .bf-objetivo, .bf-datos, .bf-historia, .bf-kpi {
    box-shadow: var(--elev-1);
    transition:
        transform var(--t-rapida) var(--ease-salida),
        box-shadow var(--t-rapida) var(--ease-salida),
        border-color var(--t-rapida) var(--ease-salida);
}

.bf-card:hover, .bf-cliente:hover, .bf-pilar:hover, .bf-valor:hover, .bf-punto:hover,
.bf-nota:hover, .bf-objetivo:hover, .bf-historia:hover, .bf-kpi:hover {
    transform: translateY(-3px);
    box-shadow: var(--elev-2);
    border-color: var(--magenta-300);
}

/* La presentación y los datos de contacto tienen formularios adentro: no se mueven, solo se iluminan. */
.bf-presentacion:hover, .bf-datos:hover { box-shadow: var(--elev-2); border-color: var(--magenta-300); }

.bf-card:hover, .bf-cliente:hover, .bf-pilar:hover, .bf-valor:hover, .bf-punto:hover,
.bf-nota:hover, .bf-presentacion:hover, .bf-objetivo:hover, .bf-datos:hover,
.bf-historia:hover, .bf-kpi:hover {
    background-image: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), var(--brillo), transparent 70%);
}

/* La foto crece apenas dentro de su marco. */
.bf-card__imagen img, .bf-cliente__foto img { transition: transform .35s var(--ease-salida); }
.bf-card:hover .bf-card__imagen img, .bf-cliente:hover .bf-cliente__foto img { transform: scale(1.05); }
.bf-cliente__foto { overflow: hidden; }

/* Botones: un leve despegue al pasar el mouse. */
.btn { transition: transform var(--t-rapida) var(--ease-salida), box-shadow var(--t-rapida) var(--ease-salida), background-color var(--t-rapida), border-color var(--t-rapida), color var(--t-rapida); }
.btn-primary:hover, .btn-success:hover, .btn-light:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(133, 0, 76, .22); }
.btn:active { transform: translateY(0); }

/* Aparición al hacer scroll. Solo si corre el script (html.bf-js): sin él, todo visible. */
.bf-js .bf-revelar { opacity: 0; transform: translateY(14px); }
.bf-js .bf-revelar.bf-visible { opacity: 1; transform: none; transition: opacity .5s var(--ease-salida), transform .5s var(--ease-salida); }

/* ---------- Promociones ---------- */

.bf-promo {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: calc(var(--bf-radio) + 4px);
    box-shadow: var(--elev-1);
    padding: 1.5rem;
}

.bf-promo + .bf-promo { margin-top: 1.5rem; }
.bf-promo { scroll-margin-top: 1rem; }

/* Franja de promociones arriba de /productos: tarjetitas que llevan a /promociones#promo-N. */
.bf-promos-franja {
    background:
        var(--grad-filete) left top / 100% 4px no-repeat,
        var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--bf-radio);
    box-shadow: var(--elev-1);
    padding: 1rem 1.1rem 1.1rem;
    margin-bottom: 1.5rem;
}

.bf-promos-franja__cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .75rem;
}

.bf-promos-franja__lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: .75rem;
}

.bf-promo-mini {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .75rem;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    background: var(--gold-50);
    color: var(--ink-body);
    text-decoration: none;
    transition: border-color var(--t-rapida), box-shadow var(--t-rapida), transform var(--t-rapida) var(--ease-salida);
}

.bf-promo-mini:hover { border-color: var(--magenta-300); box-shadow: var(--elev-1); transform: translateY(-2px); color: var(--ink-body); }

.bf-promo-mini__mecanica {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    min-width: 3.6rem;
    height: 3.6rem;
    padding: 0 .4rem;
    border-radius: 10px;
    background: var(--grad-band);
    color: #fff;
    font-weight: 800;
    font-size: 1.05rem;
}

.bf-promo-mini__texto { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.bf-promo-mini__texto strong { color: var(--ink-strong); }
.bf-promo-mini__texto span { font-size: .8rem; color: var(--ink-muted); }

/* Contáctanos: el motivo como opciones grandes, fáciles de tocar en el celular. */
.bf-motivos { display: flex; flex-wrap: wrap; gap: .5rem; }

.bf-motivo {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .9rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-raised);
    cursor: pointer;
    font-weight: 500;
}

.bf-motivo .form-check-input { margin: 0; }
.bf-motivo:has(:checked) { border-color: var(--band); background: var(--tint-accent); color: var(--ink-accent); }
.bf-contacto__datos { margin-top: .5rem; }

/* Backoffice → Consultas: el mensaje completo, respetando sus saltos de línea. */
.bf-consulta__mensaje { white-space: pre-line; }

.bf-promo__cabecera { display: flex; gap: 1.5rem; align-items: flex-start; }

/* La mecánica ("12 + 1", "15 %") es lo primero que se tiene que leer. */
.bf-promo__mecanica {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 8.5rem;
    min-height: 8.5rem;
    padding: .75rem;
    border-radius: var(--bf-radio);
    background:
        radial-gradient(circle at 50% 40%, rgba(255, 222, 97, .25), transparent 65%),
        var(--grad-band);
    color: #fff;
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    box-shadow: 0 10px 24px rgba(133, 0, 76, .25);
}

.bf-promo__info { flex: 1; min-width: 0; }
.bf-promo__titulo { font-size: 1.4rem; margin-bottom: .25rem; }
.bf-promo__detalle { font-weight: 600; color: var(--ink-accent); margin-bottom: .35rem; }
.bf-promo__descripcion { color: var(--ink-muted); margin-bottom: .75rem; }

.bf-promo__datos {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 2rem;
    list-style: none;
    padding: .75rem 0;
    margin: 0 0 .75rem;
    border-block: 1px solid var(--border-subtle);
    font-size: .92rem;
}

.bf-promo__dato-titulo {
    display: block;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink-muted);
}

.bf-promo__urgente {
    display: inline-block;
    margin-left: .35rem;
    background: var(--gold-strong);
    color: var(--ink-on-gold);
    border-radius: 999px;
    padding: .05rem .5rem;
    font-size: .72rem;
    font-weight: 700;
}

.bf-promo__condiciones { font-size: .82rem; color: var(--ink-muted); font-style: italic; margin-bottom: .75rem; }
.bf-promo__productos { margin-top: 1.25rem; }

@media (max-width: 575.98px) {
    .bf-promo { padding: 1.1rem; }
    .bf-promo__cabecera { flex-direction: column; gap: 1rem; }
    .bf-promo__mecanica { width: 100%; min-height: 5.5rem; font-size: 1.9rem; }
}

/* Promoción con imagen: la foto con la mecánica como sello en la esquina. */
.bf-promo__imagen {
    position: relative;
    flex-shrink: 0;
    width: 15rem;
    aspect-ratio: 4 / 3;
    margin: 0;
    border-radius: var(--bf-radio);
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(133, 0, 76, .2);
}

.bf-promo__imagen img { width: 100%; height: 100%; object-fit: cover; }

.bf-promo__sello {
    position: absolute;
    left: .6rem;
    bottom: .6rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    background: var(--grad-band);
    color: #fff;
    font-weight: 800;
    font-size: 1.1rem;
    box-shadow: 0 4px 10px rgba(67, 0, 35, .35);
}

@media (max-width: 575.98px) {
    .bf-promo__imagen { width: 100%; }
}

/* ---------- Imágenes: galería de la ficha, portadas del blog ---------- */

.bf-galeria__miniaturas {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    list-style: none;
    padding: 0;
    margin: .75rem 0 0;
}

.bf-galeria__miniatura {
    display: block;
    width: 4.5rem;
    height: 4.5rem;
    border: 2px solid var(--border-subtle);
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface-raised);
    transition: border-color var(--t-rapida), transform var(--t-rapida) var(--ease-salida);
}

.bf-galeria__miniatura img { width: 100%; height: 100%; object-fit: cover; }
.bf-galeria__miniatura:hover { border-color: var(--magenta-300); transform: translateY(-2px); }
.bf-galeria__miniatura--activa { border-color: var(--band); }

.bf-nota { overflow: hidden; }

.bf-nota__portada {
    display: block;
    margin: -1.25rem -1.25rem 1rem;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--gold-100);
}

.bf-nota__portada img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease-salida); }
.bf-nota:hover .bf-nota__portada img { transform: scale(1.04); }

.bf-articulo__portada {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--bf-radio);
    box-shadow: var(--elev-1);
    margin: .5rem 0 1.75rem;
}

/* ---------- Backoffice: documentos PDF del producto ---------- */

.bf-documentos__lista { list-style: none; padding: 0; margin: 0 0 1rem; }

.bf-documentos__item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .55rem 0;
    border-bottom: 1px solid var(--border-subtle);
}

.bf-documentos__icono {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.8rem;
    border-radius: 6px;
    background: var(--danger-bg);
    color: var(--danger);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .04em;
}

.bf-documentos__datos { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* ---------- Backoffice: subida de imágenes ---------- */

.bf-subidor__grilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: .75rem;
    list-style: none;
    padding: 0;
    margin: 0 0 .5rem;
}

.bf-subidor__item {
    position: relative;
    aspect-ratio: 1;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface-sunken);
}

.bf-subidor__item img { width: 100%; height: 100%; object-fit: cover; }
.bf-subidor__item--principal { border: 2px solid var(--band); }

.bf-subidor__acciones {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    justify-content: space-between;
    gap: .25rem;
    padding: .35rem;
    background: linear-gradient(0deg, rgba(0, 0, 0, .55), transparent);
}

.bf-subidor__acciones .btn { --bs-btn-padding-y: .1rem; --bs-btn-padding-x: .45rem; --bs-btn-font-size: .72rem; }

.bf-subidor__etiqueta {
    align-self: center;
    background: var(--band);
    color: #fff;
    border-radius: 999px;
    padding: .1rem .5rem;
    font-size: .7rem;
    font-weight: 700;
}

.bf-subidor__item--agregar { border-style: dashed; background: var(--surface-raised); }

.bf-subidor__agregar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    width: 100%;
    height: 100%;
    cursor: pointer;
    color: var(--ink-accent);
    font-weight: 600;
    font-size: .85rem;
}

.bf-subidor__agregar:hover { background: var(--tint-accent); }
.bf-subidor__agregar:focus-within { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.bf-subidor__mas { font-size: 2rem; line-height: 1; }

/* ---------- Paginador (tablas y grillas) ---------- */

.bf-paginador {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    padding-top: 1rem;
    margin-top: .5rem;
    border-top: 1px solid var(--border-subtle);
}

.bf-paginador__resumen { margin: 0; font-size: .88rem; color: var(--ink-muted); }
.bf-paginador__resumen strong { color: var(--ink-strong); }

.bf-paginador__controles { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.bf-paginador__tamano .form-select { width: auto; }

/* Grupo de botones unidos, como el paginador de Tailwind UI. */
.bf-paginador__paginas {
    display: inline-flex;
    list-style: none;
    padding: 0;
    margin: 0;
    border-radius: 10px;
    box-shadow: var(--elev-1);
}

.bf-paginador__boton {
    display: inline-grid;
    place-items: center;
    min-width: 2.35rem;
    height: 2.35rem;
    padding: 0 .65rem;
    border: 1px solid var(--border);
    margin-left: -1px;
    background: var(--surface-raised);
    color: var(--ink-body);
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--t-rapida), color var(--t-rapida);
}

.bf-paginador__paginas li:first-child .bf-paginador__boton { border-radius: 10px 0 0 10px; margin-left: 0; }
.bf-paginador__paginas li:last-child .bf-paginador__boton { border-radius: 0 10px 10px 0; }

.bf-paginador__boton:hover { background: var(--tint-accent); color: var(--ink-accent); }

.bf-paginador__boton--actual,
.bf-paginador__boton--actual:hover {
    position: relative;
    z-index: 1;
    background: var(--band);
    border-color: var(--band);
    color: #fff;
}

.bf-paginador__boton--deshabilitado,
.bf-paginador__boton--deshabilitado:hover { color: var(--sand-400); background: var(--surface-raised); cursor: default; }

.bf-paginador__salto {
    display: inline-grid;
    place-items: center;
    min-width: 2.35rem;
    height: 2.35rem;
    border: 1px solid var(--border);
    margin-left: -1px;
    background: var(--surface-raised);
    color: var(--ink-muted);
}

.bf-paginador__boton:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; z-index: 2; }

/* ---------- Portal: Mi cuenta ---------- */

/* La categoría del cliente, destacada: es la que decide los precios que ve. */
.bf-categoria-tarjeta {
    height: 100%;
    padding: 1.75rem;
    border-radius: calc(var(--bf-radio) + 4px);
    background:
        radial-gradient(circle at 85% 15%, rgba(255, 222, 97, .3), transparent 55%),
        var(--grad-band);
    color: #fff;
    box-shadow: var(--elev-2);
}

.bf-categoria-tarjeta__titulo {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .75rem;
    font-weight: 700;
    color: var(--gold-200);
    margin-bottom: .25rem;
}

.bf-categoria-tarjeta__nombre { font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 800; margin-bottom: .5rem; }
.bf-categoria-tarjeta .btn-light { --bs-btn-color: var(--band-deep); --bs-btn-hover-color: var(--band-deep); }

.bf-cuenta__datos { grid-template-columns: max-content 1fr; gap: .45rem 1.25rem; margin-bottom: 1rem; }

.bf-cuenta__atajos { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }

.bf-cuenta__atajo {
    flex: 1 1 10rem;
    padding: .75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--bf-radio);
    background: var(--surface-raised);
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    box-shadow: var(--elev-1);
}

.bf-cuenta__atajo:hover { border-color: var(--magenta-300); background: var(--tint-accent); }

/* ---------- Quiénes somos: historia, objetivos ---------- */

/* La historia como línea de tiempo: cada párrafo es un hito sobre un riel magenta. */
.bf-historia {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--bf-radio);
    padding: 1.5rem 1.5rem .75rem;
}

.bf-historia__lista { list-style: none; margin: 0; padding: 0; }

.bf-historia__lista li {
    position: relative;
    padding: 0 0 1rem 1.6rem;
    border-left: 2px solid var(--magenta-200);
    margin-left: .45rem;
}

.bf-historia__lista li:last-child { border-left-color: transparent; }

.bf-historia__lista li::before {
    content: "";
    position: absolute;
    left: -.5rem;
    top: .2rem;
    width: .9rem;
    height: .9rem;
    border-radius: 50%;
    background: var(--band);
    box-shadow: 0 0 0 4px var(--tint-accent);
}

.bf-historia__lista p { margin: 0; }

.bf-objetivos-grilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem;
    list-style: none;
    counter-reset: objetivo;
    padding: 0;
    margin: 0;
}

.bf-objetivo {
    counter-increment: objetivo;
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--bf-radio);
    padding: 1rem 1.1rem;
    font-size: .92rem;
}

.bf-objetivo::before {
    content: counter(objetivo);
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--grad-band);
    color: #fff;
    font-weight: 800;
}

@media (prefers-reduced-motion: reduce) {
    .bf-card, .bf-cliente, .bf-pilar, .bf-valor, .bf-punto, .bf-nota, .bf-objetivo,
    .bf-historia, .bf-kpi, .btn, .bf-card__imagen img, .bf-cliente__foto img { transition: none; }
    .bf-card:hover, .bf-cliente:hover, .bf-pilar:hover, .bf-valor:hover, .bf-punto:hover,
    .bf-nota:hover, .bf-objetivo:hover, .bf-historia:hover, .bf-kpi:hover,
    .btn-primary:hover, .btn-success:hover, .btn-light:hover,
    .bf-card:hover .bf-card__imagen img, .bf-cliente:hover .bf-cliente__foto img { transform: none; }
    .bf-js .bf-revelar { opacity: 1; transform: none; }
}

@media (max-width: 575.98px) {
    .bf-bloque { padding-block: 2rem; }
}

/* ---------- Errores de Blazor ---------- */

#blazor-error-ui {
    color-scheme: light only;
    background: var(--gold-strong);
    color: var(--ink-on-gold);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, .2);
    display: none;
    left: 0;
    padding: .6rem 1.25rem .7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

.blazor-error-boundary {
    background: var(--danger);
    padding: 1rem;
    color: #fff;
    border-radius: 8px;
}

/* ---------- Móvil ---------- */

@media (max-width: 991.98px) {
    .bf-admin { flex-direction: column; }
    .bf-admin__nav { width: 100%; flex-direction: row; flex-wrap: wrap; gap: .5rem; align-items: center; }
    .bf-admin__nav .nav { flex-direction: row !important; flex-wrap: wrap; gap: .25rem; }
    .bf-admin__marca { margin-bottom: 0; margin-right: 1rem; }
    .bf-admin__grupo { display: none; }
    .bf-admin__pie { margin-top: 0; padding-top: 0; flex-direction: row; gap: 1rem; }
    .bf-admin__contenido { padding: 1rem; }
    .bf-navbar .navbar-nav { gap: .25rem; padding-top: .5rem; }
    /* En el desplegable el subrayado no se lee: la página actual se marca con una barra a la izquierda. */
    .bf-nav-paginas .nav-link::after { display: none; }
    .bf-navbar .nav-link.active { box-shadow: inset 3px 0 0 var(--gold-200); padding-left: .6rem; }

    /* En tablet y celular la imagen va arriba y más baja, para que el texto entre sin scroll. */
    .bf-carrusel__slide { grid-template-columns: 1fr; gap: 1.25rem; min-height: 0; }
    .bf-carrusel__imagen, .bf-carrusel__promo { order: -1; aspect-ratio: 16 / 9; max-height: 240px; }
}

@media (max-width: 575.98px) {
    .bf-seccion { padding-block: 1.5rem; }
    .bf-hero { padding-block: 2.5rem calc(2.5rem + var(--grad-borde-oro)); }
    .bf-carrusel { padding-top: 1.5rem; }
    .bf-quees__sello { width: 68px; height: 68px; right: 1rem; bottom: 1rem; }
    .bf-presentacion { flex-direction: column; align-items: stretch; }
    .bf-presentacion__accion { justify-content: space-between; }
    .bf-presentacion__accion input { flex: 1; }
}