/*
Theme Name: Bouquet
Description: Tema custom para Bouquet Fragancias.
Author: Bouquet
Version: 1.0
Text Domain: bouquet
*/

:root {
    --bq-cream: #FBF7EF;
    --bq-cream-2: #F3ECDD;
    --bq-ink: #2B2620;
    --bq-ink-soft: #6b6255;
    --bq-gold: #C8A15B;
    --bq-gold-deep: #A9793B;
    --bq-line: rgba(43,38,32,0.12);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bq-cream);
    color: var(--bq-ink);
    font-family: "Cormorant Garamond", "Georgia", serif;
    overflow-x: hidden;
}

body {
    position: relative;
}

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

.bq-sans {
    font-family: "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Burbujas (canvas 2D, toda la pagina) ---------- */
.bq-main,
.bq-site-footer {
    position: relative;
    z-index: 1;
}

#bq-bubbles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10; /* por encima del contenido, por debajo del header (60) */
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    #bq-bubbles { display: none; }
}

/* ---------- Reflejo de vidrio: una franja de luz diagonal que cruza
   lentamente la pantalla, como el brillo deslizandose sobre la
   superficie de un frasco de vidrio. No distorsiona nada debajo —
   solo aporta luz — asi el resto de la pagina sigue siendo legible. */
.bq-glass-sheen {
    position: fixed;
    inset: 0;
    z-index: 15; /* por encima del contenido, por debajo del header (60) */
    overflow: hidden;
    pointer-events: none;
}
.bq-glass-sheen::before {
    content: "";
    position: absolute;
    top: -60%;
    left: -60%;
    width: 45%;
    height: 220%;
    background: linear-gradient(
        75deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.22) 44%,
        rgba(255,255,255,0.4) 50%,
        rgba(255,255,255,0.22) 56%,
        rgba(255,255,255,0) 100%
    );
    mix-blend-mode: overlay;
    animation: bq-sheen-sweep 12s ease-in-out infinite;
}
@keyframes bq-sheen-sweep {
    0%   { left: -70%; }
    20%  { left: 130%; }
    100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
    .bq-glass-sheen { display: none; }
}

/* ---------- Header ---------- */
.bq-site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 5vw;
    background: #E4E3D3;
    border-bottom: 1px solid var(--bq-line);
    position: sticky;
    top: 0;
    z-index: 60;
}

.bq-logo {
    display: flex;
    align-items: center;
}

.bq-logo img {
    height: 52px;
    width: auto;
    display: block;
}

.bq-nav ul {
    list-style: none;
    display: flex;
    gap: 34px;
    margin: 0;
    padding: 0;
}

.bq-nav a {
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bq-ink-soft);
    transition: color 0.25s ease;
}

.bq-nav a:hover { color: var(--bq-gold-deep); }

.bq-cart {
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    letter-spacing: 0.08em;
    border: 1px solid var(--bq-ink);
    padding: 9px 18px;
    border-radius: 999px;
    transition: all 0.25s ease;
}
.bq-cart:hover { background: var(--bq-ink); color: var(--bq-cream); }

/* ---------- Hero ----------
   aspect-ratio igual al de la foto (1666x640): asi el fondo nunca
   recorta verticalmente el frasco, sea cual sea el ancho de pantalla. */
.bq-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 1666 / 640;
    min-height: 340px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    padding: 0 5vw;
    background-color: var(--bq-cream);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.bq-hero-inner {
    max-width: 1240px;
    width: 100%;
}

.bq-hero-inner-photo {
    display: block;
}

/* la "etiqueta": tarjeta translucida con blur para que el texto se lea
   siempre, sin importar que parte de la foto quede detras */
.bq-hero-inner-photo .bq-hero-copy {
    max-width: 440px;
    background: rgba(251,247,239,0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.5);
    padding: clamp(18px, 3vw, 34px);
    border-radius: 20px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 20px 50px rgba(43,38,32,0.12);
}

.bq-hero-copy .bq-eyebrow {
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 12px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--bq-gold-deep);
    margin-bottom: 18px;
    display: block;
}

.bq-hero-copy h1 {
    font-size: clamp(40px, 5.4vw, 76px);
    line-height: 1.04;
    font-weight: 500;
    margin: 0 0 22px;
    color: var(--bq-ink);
}

.bq-hero-copy h1 em {
    font-style: italic;
    color: var(--bq-gold-deep);
}

.bq-hero-copy p {
    font-size: 19px;
    color: var(--bq-ink-soft);
    max-width: 440px;
    margin: 0 0 34px;
    line-height: 1.6;
}

@media (min-width: 901px) {
    .bq-hero-inner-photo .bq-hero-copy {
        max-width: 720px;
    }
    .bq-hero-copy p {
        max-width: 640px;
    }
}

.bq-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background: var(--bq-ink);
    color: var(--bq-cream);
    padding: 16px 32px;
    border-radius: 999px;
    transition: transform 0.3s ease, background 0.3s ease;
}
.bq-btn:hover { background: var(--bq-gold-deep); transform: translateY(-2px); }

.bq-scroll-cue {
    position: absolute;
    bottom: 34px;
    left: 50%;
    transform: translateX(-50%);
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--bq-ink-soft);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.bq-scroll-cue .bq-line {
    width: 1px;
    height: 36px;
    background: linear-gradient(var(--bq-gold-deep), transparent);
    animation: bq-scrollline 1.8s ease-in-out infinite;
}
.bq-scroll-cue span:first-child {
    animation: bq-scrolltext 1.8s ease-in-out infinite;
}
@keyframes bq-scrollline {
    0% { transform: scaleY(0.3); opacity: 0.4; }
    50% { transform: scaleY(1); opacity: 1; }
    100% { transform: scaleY(0.3); opacity: 0.4; }
}
@keyframes bq-scrolltext {
    0%, 100% { transform: translateY(0); opacity: 0.65; }
    50% { transform: translateY(5px); opacity: 1; }
}

/* ---------- Generic sections ---------- */
.bq-section {
    padding: 110px 5vw;
    max-width: 1180px;
    margin: 0 auto;
}

/* ---------- Fondo tipo liquido en movimiento (mesh gradient) ----------
   Capa fija detras de TODO el contenido de la home (no de una sola
   seccion): tres manchas de color ambar/dorado/rosado, cada una con su
   propia deriva lenta e independiente — simula esencia liquida
   moviendose despacio, sin ser literal. Se ve en cualquier zona que no
   tenga su propio fondo opaco encima (secciones, header con fondo
   solido, etc. la tapan donde corresponde). */
.bq-mesh-bg-page {
    position: fixed;
    inset: 0;
    z-index: 0; /* por encima del fondo base de <body>, por debajo del contenido (z-index 1) */
    overflow: hidden;
    pointer-events: none;
}
.bq-mesh-blob-page {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.5;
}
.bq-mesh-blob-page-1 {
    width: 42vw;
    height: 42vw;
    max-width: 560px;
    max-height: 560px;
    left: -10%;
    top: 4%;
    background: radial-gradient(circle, rgba(200,161,91,0.55), rgba(200,161,91,0) 70%);
    animation: bq-mesh-drift-a 26s ease-in-out infinite;
}
.bq-mesh-blob-page-2 {
    width: 36vw;
    height: 36vw;
    max-width: 480px;
    max-height: 480px;
    right: -8%;
    top: 46%;
    background: radial-gradient(circle, rgba(169,121,59,0.5), rgba(169,121,59,0) 70%);
    animation: bq-mesh-drift-b 32s ease-in-out infinite;
}
.bq-mesh-blob-page-3 {
    width: 28vw;
    height: 28vw;
    max-width: 380px;
    max-height: 380px;
    left: 38%;
    bottom: -6%;
    background: radial-gradient(circle, rgba(216,163,168,0.4), rgba(216,163,168,0) 70%);
    animation: bq-mesh-drift-c 22s ease-in-out infinite;
}

@keyframes bq-mesh-drift-a {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(6%, 30%) scale(1.15); }
}
@keyframes bq-mesh-drift-b {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-8%, -24%) scale(1.1); }
}
@keyframes bq-mesh-drift-c {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(10%, -18%) scale(1.2); }
}

@media (prefers-reduced-motion: reduce) {
    .bq-mesh-bg-page { display: none; }
}

.bq-section-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 60px;
}

.bq-section-head .bq-eyebrow {
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 12px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--bq-gold-deep);
    display: block;
    margin-bottom: 14px;
}

.bq-section-head h2 {
    font-size: clamp(30px, 3.6vw, 46px);
    font-weight: 500;
    margin: 0 0 14px;
}

.bq-section-head p {
    color: var(--bq-ink-soft);
    font-size: 17px;
    line-height: 1.6;
}

/* product grid */
/* ---------- Encabezado "Tienda en linea": barra de acento + titulo a
   la izquierda, link "ver todos" a la derecha (formato ecommerce) ---------- */
.bq-store-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0 0 34px;
    text-align: left;
}
.bq-store-head h2 {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: clamp(24px, 2.6vw, 34px);
    margin: 0;
}
.bq-store-bar {
    display: inline-block;
    width: 5px;
    height: 1em;
    background: var(--bq-gold-deep);
    border-radius: 3px;
}
.bq-store-all {
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    letter-spacing: 0.06em;
    color: var(--bq-gold-deep);
    white-space: nowrap;
    transition: color 0.25s ease;
}
.bq-store-all:hover {
    color: var(--bq-ink);
}

/* ---------- Carrusel de productos: 6 tarjetas cuadradas completas ---------- */
#bq-story {
    max-width: 1180px;
    padding-bottom: 40px;
}
#bq-lines {
    padding-top: 40px;
}
@media (min-width: 1400px) {
    #bq-story { max-width: 1720px; }
}
@media (min-width: 1800px) {
    #bq-story { max-width: 92vw; }
}

.bq-carousel-frame {
    position: relative;
    padding: 8px 56px;
}

.bq-carousel {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    /* sin scroll-snap ni scroll-behavior: smooth aqui — pelean con el
       desplazamiento automatico continuo hecho a mano en JS (cada
       asignacion de scrollLeft se veia "frenada" por el snap/smooth).
       Los botones de flecha piden su propio behavior:'smooth' en JS. */
    perspective: 1300px;
    padding: 6px 2px 10px;
    /* oculta la barra de scroll nativa, sin perder el gesto de arrastre */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.bq-carousel::-webkit-scrollbar { display: none; }

.bq-carousel .bq-card {
    flex: 0 0 calc((100% - 5 * 20px) / 6);
    aspect-ratio: 3 / 4;
}

.bq-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--bq-line);
    background: rgba(255,255,255,0.95);
    color: var(--bq-ink);
    font-size: 17px;
    cursor: pointer;
    z-index: 2;
    box-shadow: 0 6px 18px rgba(43,38,32,0.1);
    transition: background 0.25s ease, transform 0.25s ease;
}
.bq-carousel-arrow:hover {
    background: var(--bq-ink);
    color: var(--bq-cream);
}
.bq-carousel-prev { left: 0; }
.bq-carousel-next { right: 0; }

@media (max-width: 980px) {
    .bq-carousel .bq-card { flex-basis: calc((100% - 3 * 20px) / 4); }
}
@media (max-width: 640px) {
    .bq-carousel-frame { padding: 8px 40px; }
    .bq-carousel .bq-card { flex-basis: calc((100% - 20px) / 2); }
}

.bq-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: rgba(255,255,255,0.5);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.6);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 8px 26px rgba(43,38,32,0.05);
    border-radius: 16px;
    padding: 18px 14px 14px;
    text-align: center;
    overflow: hidden;
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform 0.15s ease-out, box-shadow 0.35s ease;
}
.bq-card:hover {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 30px 50px rgba(43,38,32,0.1);
}
/* brillo tipo vidrio que sigue al cursor dentro de la tarjeta (JS
   escribe --mx/--my en % con la posicion del mouse) */
.bq-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.65), rgba(255,255,255,0) 55%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.bq-card:hover::after {
    opacity: 1;
}
.bq-card-media {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
.bq-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    margin: 0 auto 10px;
    flex: 1 1 auto;
    min-height: 0;
}
.bq-card h3 {
    font-size: 14px;
    line-height: 1.3;
    margin: 0 0 4px;
    font-weight: 500;
    flex: 0 0 auto;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bq-card .bq-price {
    font-family: "Helvetica Neue", Arial, sans-serif;
    color: var(--bq-gold-deep);
    font-size: 13px;
    letter-spacing: 0.05em;
    display: block;
    flex: 0 0 auto;
    white-space: nowrap;
}
.bq-btn-add {
    margin-top: 10px;
    padding: 9px 0;
    font-size: 11px;
    letter-spacing: 0.12em;
    width: 100%;
    justify-content: center;
}

@media (max-width: 640px) {
    .bq-card h3 { font-size: 12px; }
}

.bq-empty-note {
    text-align: center;
    color: var(--bq-ink-soft);
    font-size: 15px;
}

/* ---------- Lineas de negocio ---------- */
#bq-lines {
    max-width: 1180px;
}
@media (min-width: 1400px) {
    #bq-lines { max-width: 1720px; }
}
@media (min-width: 1800px) {
    #bq-lines { max-width: 92vw; }
}

.bq-lines-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 26px;
}

@media (min-width: 1200px) {
    .bq-lines-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;
    }
    .bq-line-card:nth-child(5) { grid-column: 2 / 3; }
    .bq-line-card:nth-child(6) { grid-column: 3 / 4; }
}

.bq-line-card {
    /* reset de <button>: se convirtio en boton para poder abrir el panel */
    font: inherit;
    color: inherit;
    cursor: pointer;
    width: 100%;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;

    position: relative;
    background: rgba(255,255,255,0.42);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.55);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 8px 26px rgba(43,38,32,0.05);
    border-radius: 20px;
    padding: 36px 32px;
    text-align: left;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.bq-line-card:hover {
    transform: translateY(-6px);
    border-color: rgba(200,161,91,0.5);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 26px 46px rgba(43,38,32,0.1);
}

.bq-line-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: var(--bq-cream-2);
    border: 1px solid var(--bq-line);
    color: var(--bq-gold-deep);
    margin-bottom: 20px;
    transition: background 0.3s ease, color 0.3s ease;
}
.bq-line-icon svg { width: 28px; height: 28px; }
.bq-line-card:hover .bq-line-icon {
    background: var(--bq-ink);
    color: var(--bq-cream);
}

.bq-line-card .bq-eyebrow {
    font-size: 11px;
    letter-spacing: 0.2em;
    color: var(--bq-gold-deep);
    text-transform: uppercase;
    display: block;
    margin-bottom: 8px;
}

.bq-line-card h3 {
    font-size: 21px;
    font-weight: 500;
    margin: 0 0 10px;
    color: var(--bq-ink);
}

.bq-line-card p {
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.6;
    color: var(--bq-ink-soft);
    margin: 0;
}

.bq-line-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid var(--bq-line);
}

.bq-line-cta {
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--bq-gold-deep);
}

.bq-line-tag {
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--bq-ink-soft);
    background: var(--bq-cream-2);
    padding: 5px 10px;
    border-radius: 999px;
}
.bq-line-cta-soon {
    color: var(--bq-ink-soft);
    cursor: default;
    opacity: 0.7;
}

/* ---------- Sub-nav pegajosa de lineas de negocio ----------
   Queda fija justo debajo del header mientras el usuario recorre toda
   la pagina, para saltar a cualquier linea sin scrollear a mano ni
   perder el lugar donde estaba. */
.bq-lines-subnav {
    position: sticky;
    top: 76px; /* alto real del header */
    z-index: 40;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    background: rgba(251,247,239,0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--bq-line);
    border-radius: 999px;
    padding: 6px;
    margin: 0 0 30px;
    width: fit-content;
}
.bq-lines-subnav a {
    font-size: 11px;
    letter-spacing: 0.05em;
    padding: 8px 16px;
    border-radius: 999px;
    color: var(--bq-ink-soft);
    transition: background 0.25s ease, color 0.25s ease;
    white-space: nowrap;
}
.bq-lines-subnav a:hover {
    color: var(--bq-ink);
    background: var(--bq-cream-2);
}
.bq-lines-subnav a.is-active {
    background: var(--bq-ink);
    color: var(--bq-cream);
}

/* ---------- Seccion de detalle por linea (ej. Fragancias) ---------- */
.bq-line-detail-intro {
    max-width: 780px;
    margin: -10px auto 50px;
    font-size: 16px;
    line-height: 1.75;
    color: var(--bq-ink-soft);
}
.bq-line-detail-intro p { margin: 0 0 16px; }
.bq-line-detail-intro strong { color: var(--bq-ink); }

.bq-families-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 40px;
}
.bq-families-head h3 {
    font-size: clamp(24px, 2.8vw, 32px);
    font-weight: 500;
    margin: 6px 0 10px;
}
.bq-families-head p {
    font-size: 14px;
    color: var(--bq-ink-soft);
    line-height: 1.6;
}

.bq-families-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 20px;
}
.bq-family-card {
    background: rgba(255,255,255,0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.55);
    border-radius: 16px;
    padding: 22px 20px;
}
.bq-family-card h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--bq-gold-deep);
    margin: 0 0 8px;
}
.bq-family-card p {
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--bq-ink-soft);
    margin: 0;
}

/* ---------- Panel compartido (contenido de la linea seleccionada) ----------
   El mismo panel se reposiciona segun el modo activo: cajon lateral con
   fondo oscurecido, o acordeon dentro del flujo normal de la pagina. */
.bq-line-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(20,17,12,0.4);
    backdrop-filter: blur(2px);
    z-index: 70;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.bq-line-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.bq-line-panel {
    background: var(--bq-cream);
    border: 1px solid var(--bq-line);
}
.bq-line-panel-inner {
    position: relative;
    padding: 40px 34px 50px;
}
.bq-line-panel-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--bq-line);
    background: #fff;
    font-size: 20px;
    line-height: 1;
    color: var(--bq-ink-soft);
    cursor: pointer;
}
.bq-line-panel-title,
#bq-line-panel-title {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 500;
    margin: 4px 0 22px;
}
.bq-line-panel-body p {
    font-size: 15px;
    line-height: 1.75;
    color: var(--bq-ink-soft);
    margin: 0 0 14px;
}
.bq-panel-subhead {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bq-gold-deep);
    margin: 28px 0 14px;
}
.bq-panel-note {
    font-style: italic;
    opacity: 0.8;
}
.bq-panel-cta-row {
    margin-top: 30px;
}

/* Modo cajon: panel fijo a la derecha, desliza con la pantalla oscurecida */
.bq-line-panel.mode-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(520px, 92vw);
    z-index: 71;
    overflow-y: auto;
    box-shadow: -20px 0 60px rgba(43,38,32,0.2);
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.bq-line-panel.mode-drawer.is-open {
    transform: translateX(0);
}

/* Modo acordeon: panel dentro del flujo de la pagina, debajo de la grilla */
.bq-line-panel.mode-accordion {
    position: relative;
    width: 100%;
    border-radius: 20px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: 0;
    transition: max-height 0.5s ease, opacity 0.4s ease, margin-top 0.4s ease;
}
.bq-line-panel.mode-accordion.is-open {
    max-height: 3000px;
    opacity: 1;
    margin-top: 28px;
}
.bq-line-panel.mode-accordion .bq-line-backdrop { display: none; }

/* ---------- Listas tipo chip (aceites, sectores, bases) ---------- */
.bq-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.bq-chip {
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 12px;
    letter-spacing: 0.02em;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--bq-cream-2);
    border: 1px solid var(--bq-line);
    color: var(--bq-ink);
}

/* ---------- Tarjetas de valor numeradas (Marketing, Manufactura) ---------- */
.bq-value-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}
.bq-value-card {
    position: relative;
    background: rgba(255,255,255,0.5);
    border: 1px solid var(--bq-line);
    border-radius: 14px;
    padding: 20px 18px 18px;
}
.bq-value-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bq-gold-deep);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 10px;
}
.bq-value-card h4 {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 6px;
}
.bq-value-card p {
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--bq-ink-soft);
    margin: 0;
}

@media (max-width: 640px) {
    .bq-line-panel-inner { padding: 30px 20px 40px; }
}

@media (max-width: 640px) {
    .bq-lines-subnav { position: static; width: 100%; overflow-x: auto; flex-wrap: nowrap; }
}

/* ---------- Footer ---------- */
.bq-site-footer {
    border-top: 1px solid var(--bq-line);
    padding: 60px 5vw 34px;
    background: var(--bq-cream-2);
}

.bq-footer-top {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
    max-width: 1180px;
    margin: 0 auto 30px;
}

.bq-footer-note {
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    color: var(--bq-ink-soft);
    text-align: center;
    max-width: 1180px;
    margin: 0 auto;
    padding-top: 24px;
    border-top: 1px solid var(--bq-line);
}

/* ===================== Pagina Manufactura ===================== */

.bq-mf-hero {
    position: relative;
    min-height: 78vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
    padding: 150px 6vw 60px;
    max-width: 1400px;
    margin: 0 auto;
}
.bq-mf-hero-inner { position: relative; z-index: 1; max-width: 560px; flex: 1 1 460px; color: var(--bq-ink); }
.bq-mf-hero-inner .bq-eyebrow { color: var(--bq-gold-deep); letter-spacing: 0.12em; text-transform: uppercase; font-size: 13px; }
.bq-mf-hero-inner h1 { font-size: clamp(32px, 4.4vw, 54px); line-height: 1.08; margin: 14px 0 18px; }
.bq-mf-hero-inner p { font-size: 18px; line-height: 1.55; color: var(--bq-ink-soft); margin-bottom: 26px; }
.bq-mf-trust { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 22px; font-size: 13px; color: var(--bq-ink-soft); }
.bq-mf-hero-photo { flex: 1 1 480px; max-width: 720px; }
.bq-mf-hero-photo.is-cutout img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 0;
    box-shadow: none;
}
@media (max-width: 900px) {
    .bq-mf-hero { padding-top: 130px; justify-content: center; text-align: center; }
    .bq-mf-hero-inner { max-width: 100%; }
    .bq-mf-trust { justify-content: center; }
}

.bq-mf-float-nav {
    position: fixed;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
}

@keyframes bqMfBubbleShift {
    0%, 100% { transform: translateX(0); }
    10% { transform: translateX(-42px); }
    22% { transform: translateX(0); }
}

@keyframes bqMfIconWobble {
    0%, 100% { transform: rotate(0deg); }
    10% { transform: rotate(-9deg); }
    16% { transform: rotate(8deg); }
    22% { transform: rotate(0deg); }
}
.bq-mf-float-caption {
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bq-ink-soft);
    margin-bottom: 2px;
    padding-right: 4px;
}
.bq-mf-float-btn {
    appearance: none;
    position: relative;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 1px solid var(--bq-line);
    background: rgba(251,247,239,0.94);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    box-shadow: 0 12px 28px -14px rgba(43,38,32,0.4);
    transition: background 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    padding: 8px;
    animation: bqMfBubbleShift 4.8s ease-in-out infinite;
}
.bq-mf-float-btn:nth-child(3) { animation-delay: 1.2s; }
.bq-mf-float-btn:nth-child(4) { animation-delay: 2.4s; }
.bq-mf-float-btn:nth-child(5) { animation-delay: 3.6s; }
.bq-mf-float-btn:hover { filter: brightness(1.05); animation-play-state: paused; }
.bq-mf-float-icon svg { width: 28px; height: 28px; color: var(--bq-ink); display: block; animation: bqMfIconWobble 4.8s ease-in-out infinite; }
.bq-mf-float-btn:nth-child(3) .bq-mf-float-icon svg { animation-delay: 1.2s; }
.bq-mf-float-btn:nth-child(4) .bq-mf-float-icon svg { animation-delay: 2.4s; }
.bq-mf-float-btn:nth-child(5) .bq-mf-float-icon svg { animation-delay: 3.6s; }
.bq-mf-float-btn.is-active {
    background: var(--bq-ink);
    border-color: var(--bq-ink);
    box-shadow: 0 0 0 5px rgba(200,161,91,0.32), 0 12px 28px -14px rgba(43,38,32,0.4);
}
.bq-mf-float-btn.is-active .bq-mf-float-icon svg { color: var(--bq-gold); }

.bq-mf-float-tip {
    font-size: 12px;
    line-height: 1.15;
    text-align: center;
    color: var(--bq-ink-soft);
    white-space: normal;
}
.bq-mf-float-btn.is-active .bq-mf-float-tip { color: var(--bq-cream); }

@media (max-width: 900px) {
    .bq-mf-float-nav {
        top: auto;
        bottom: 16px;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        flex-direction: row;
        align-items: center;
        gap: 10px;
        background: rgba(251,247,239,0.94);
        padding: 8px 10px;
        border-radius: 999px;
        border: 1px solid var(--bq-line);
        box-shadow: 0 12px 28px -14px rgba(43,38,32,0.4);
    }
    .bq-mf-float-caption { display: none; }
    .bq-mf-float-btn { width: 58px; height: 58px; box-shadow: none; }
    .bq-mf-float-btn.is-active { box-shadow: 0 0 0 4px rgba(200,161,91,0.32); }
    .bq-mf-float-icon svg { width: 22px; height: 22px; }
    .bq-mf-float-tip {
        position: static;
        opacity: 1;
        pointer-events: none;
        transform: none;
        background: none;
        color: var(--bq-ink-soft);
        box-shadow: none;
        padding: 0;
        font-size: 8.5px;
        display: block;
        margin-top: 2px;
    }
    .bq-mf-float-btn { flex-direction: column; gap: 2px; border-radius: 20px; height: auto; padding: 8px 6px; }
    .bq-mf-float-btn.is-active .bq-mf-float-tip { color: var(--bq-cream); }
    .bq-mf-float-btn { animation-name: bqMfBubbleShiftMobile; }
}

@keyframes bqMfBubbleShiftMobile {
    0%, 100% { transform: translateY(0); }
    10% { transform: translateY(-22px); }
    22% { transform: translateY(0); }
}

.bq-mf-panel { display: none; padding: 70px 6vw 20px; max-width: 1180px; margin: 0 auto; }
.bq-mf-panel.is-active { display: block; }

.bq-mf-intro { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 40px; align-items: center; }
.bq-mf-intro-copy h2 { font-size: clamp(26px, 3vw, 38px); margin: 0 0 14px; }
.bq-mf-sub { font-size: 18px; color: var(--bq-ink-soft); margin-bottom: 16px; }
.bq-mf-intro-photo img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    object-position: center 30%;
    border-radius: 4px;
    box-shadow: 0 30px 60px -30px rgba(43,38,32,0.35);
}
.bq-mf-intro-photo.is-cutout {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.bq-mf-intro-photo.is-cutout img {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    border-radius: 0;
    box-shadow: none;
    filter: drop-shadow(0 30px 34px rgba(43,38,32,0.16));
}

.bq-mf-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 54px; }
.bq-mf-cat-card {
    background: rgba(255,255,255,0.55);
    border: 1px solid var(--bq-line);
    border-radius: 4px;
    padding: 26px 24px;
}
.bq-mf-cat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    margin-bottom: 16px;
}
.bq-mf-cat-icon svg { width: 26px; height: 26px; }
.bq-mf-cat-card h3 { font-size: 20px; margin: 0 0 12px; }
.bq-mf-cat-card ul { margin: 0; padding-left: 18px; font-family: "Helvetica Neue", Arial, sans-serif; font-size: 14px; color: var(--bq-ink-soft); line-height: 1.9; }

.bq-mf-process { padding: 90px 6vw; max-width: 1180px; margin: 0 auto; }
.bq-mf-timeline {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 14px;
    margin-top: 40px;
}
.bq-mf-step {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    border-top: 2px solid var(--bq-line);
    padding-top: 16px;
}
.bq-mf-step.is-visible { opacity: 1; transform: translateY(0); border-top-color: var(--bq-gold); }
.bq-mf-step-num { display: block; font-family: "Helvetica Neue", Arial, sans-serif; font-size: 13px; color: var(--bq-gold-deep); margin-bottom: 8px; }
.bq-mf-step h4 { margin: 0 0 6px; font-size: 17px; }
.bq-mf-step p { margin: 0; font-size: 13px; color: var(--bq-ink-soft); line-height: 1.5; }

.bq-mf-gallery { padding: 20px 6vw 90px; max-width: 1180px; margin: 0 auto; }
.bq-mf-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-template-areas:
        "p1 p2 vid"
        "p4 p5 vid";
    gap: 16px;
    margin-top: 34px;
    height: clamp(420px, 38vw, 640px);
}
.bq-mf-gallery-item { overflow: hidden; border-radius: 4px; height: 100%; }
.bq-mf-gallery-item-1 { grid-area: p1; }
.bq-mf-gallery-item-2 { grid-area: p2; }
.bq-mf-gallery-item-4 { grid-area: p4; }
.bq-mf-gallery-item-5 { grid-area: p5; }
.bq-mf-gallery-video { grid-area: vid; }
.bq-mf-gallery-item img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.5s ease; }
.bq-mf-gallery-item-2 img { object-position: center bottom; }
.bq-mf-gallery-item:hover img { transform: scale(1.06); }
.bq-mf-gallery-video video { width: 100%; height: 100%; object-fit: cover; display: block; }

.bq-mf-trustbar { background: var(--bq-cream-2); padding: 34px 6vw; }
.bq-mf-trustbar-inner { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: 32px; flex-wrap: wrap; justify-content: center; }
.bq-mf-trustbar-inner img { height: 56px; width: auto; }
.bq-mf-trustbar-inner span { font-family: "Helvetica Neue", Arial, sans-serif; font-size: 13px; color: var(--bq-ink-soft); }

.bq-mf-faq { padding: 90px 6vw; max-width: 820px; margin: 0 auto; }
.bq-mf-faq-list { margin-top: 30px; }
.bq-mf-faq-item { border-bottom: 1px solid var(--bq-line); }
.bq-mf-faq-q {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    appearance: none;
    background: none;
    border: none;
    text-align: left;
    padding: 22px 0;
    font-size: 17px;
    font-family: "Cormorant Garamond", serif;
    color: var(--bq-ink);
    cursor: pointer;
}
.bq-mf-faq-icon { font-size: 20px; color: var(--bq-gold-deep); transition: transform 0.25s ease; flex-shrink: 0; }
.bq-mf-faq-item.is-open .bq-mf-faq-icon { transform: rotate(45deg); }
.bq-mf-faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.bq-mf-faq-item.is-open .bq-mf-faq-a { max-height: 240px; }
.bq-mf-faq-a p { margin: 0 0 20px; font-family: "Helvetica Neue", Arial, sans-serif; font-size: 14.5px; color: var(--bq-ink-soft); line-height: 1.7; }

.bq-mf-form-section { background: var(--bq-ink); padding: 90px 6vw; }
.bq-mf-form-wrap { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 50px; }
.bq-mf-form-copy .bq-eyebrow { color: var(--bq-gold); }
.bq-mf-form-copy h2 { color: var(--bq-cream); font-size: clamp(26px, 3vw, 36px); margin: 12px 0 14px; }
.bq-mf-form-copy p { color: rgba(251,247,239,0.75); font-size: 16px; line-height: 1.6; }
.bq-mf-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bq-mf-form label { display: flex; flex-direction: column; gap: 6px; font-family: "Helvetica Neue", Arial, sans-serif; font-size: 13px; color: rgba(251,247,239,0.7); }
.bq-mf-form input, .bq-mf-form select, .bq-mf-form textarea {
    background: rgba(251,247,239,0.08);
    border: 1px solid rgba(251,247,239,0.2);
    border-radius: 4px;
    padding: 11px 12px;
    color: var(--bq-cream);
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
}
.bq-mf-form input:focus, .bq-mf-form select:focus, .bq-mf-form textarea:focus { outline: 1px solid var(--bq-gold); }
.bq-mf-form-full { grid-column: 1 / -1; }
.bq-mf-form button.bq-btn { justify-self: start; }
.bq-mf-form-msg { font-family: "Helvetica Neue", Arial, sans-serif; font-size: 13px; margin: 0; }
.bq-mf-form-msg.is-ok { color: #9ad8a5; }
.bq-mf-form-msg.is-error { color: #e59a9a; }

@media (max-width: 900px) {
    .bq-mf-intro { grid-template-columns: 1fr; }
    .bq-mf-cats { grid-template-columns: 1fr; }
    .bq-mf-timeline { grid-template-columns: repeat(2, 1fr); }
    .bq-mf-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
        grid-template-areas:
            "p1 p2"
            "p4 vid"
            "p5 vid";
        height: clamp(560px, 165vw, 820px);
    }
    .bq-mf-form-wrap { grid-template-columns: 1fr; }
    .bq-mf-form { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .bq-hero-inner-photo { text-align: center; }
    .bq-hero-inner-photo .bq-hero-copy { max-width: none; margin: 0 auto; }
    .bq-hero-copy p { margin-left: auto; margin-right: auto; }
    .bq-nav { display: none; }
}