/* VARIABLES DE DISEÑO (Cuadrado, Premium, Limpio) */
:root {
    --verde: #549F3B;
    --verde-osc: #3d7a29;
    --verde-hondo: #2c5a1e;
    --verde-claro: #a8dd93;
    --tinta: #141414;
    --gris: #5c5f57;
    --gris-claro: #8a8d84;
    --linea: #e5e4de;
    --fondo: #fcfdfc;
    --crema: #f6f4ec;
    --crema-2: #efe9db;
    --oscuro: #1a1a18;
    --wa: #25d366;

    /* Tipografía editorial: serif para titulares, Inter para todo lo demás */
    --serif: 'Fraunces', serif;

    /* Variables de estructura - Estilo Cuadrado (Brutalism ligero) */
    --b-radius: 4px; /* Bordes muy poco redondeados casi cuadrados */
    --b-radius-card: 0px; /* Tarjetas totalmente cuadradas para estilo más serio/premium */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', sans-serif;
    color: var(--tinta);
    background: var(--fondo);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* TIPOGRAFÍA PREMIUM */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', sans-serif;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.03em; /* Letra más junta, muy moderno */
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 32px;
}

/* EYEBROW (Subtítulo superior) */
.eyebrow {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--verde);
    margin-bottom: 20px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: 'Inter', sans-serif;
}
.eyebrow::before {
    content: '';
    width: 32px;
    height: 2px;
    background: var(--verde);
    display: inline-block;
}


/* ================= HEADER ================= */
.main-header {
    background: #ffffff;
    border-bottom: 2px solid var(--verde);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 85px;
}

.logo img {
    height: 40px;
    width: auto;
    object-fit: contain;
}

.main-nav {
    display: flex;
    gap: 24px;
}

.main-nav a {
    font-size: 15px;
    font-weight: 600;
    color: var(--tinta);
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    transition: color 0.2s;
}

.main-nav a:hover {
    color: var(--verde);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 24px;
}

.login-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--tinta);
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    transition: color 0.2s;
}

.login-btn:hover {
    color: var(--verde);
}

.login-btn svg {
    width: 18px;
    height: 18px;
}

.btn-solid-sm {
    background: var(--verde);
    color: #fff;
    padding: 10px 24px;
    border-radius: var(--b-radius);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 14px;
    transition: all 0.3s;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid var(--verde);
}

.btn-solid-sm:hover {
    background: var(--oscuro);
    border-color: var(--oscuro);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 2px 2px 0px rgba(0,0,0,0.1);
}

@media (max-width: 1080px) {
    .main-nav, .login-btn, .btn-solid-sm {
        display: none;
    }
}


/* ================= HERO ================= */
.hero {
    background: linear-gradient(160deg, #ffffff 0%, var(--crema) 100%);
    position: relative;
    overflow: hidden;
    padding: 0;
    border-bottom: 1px solid var(--linea);
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 0;
    align-items: stretch;
    min-height: 54vh;
}

.hero-text {
    padding: 48px 60px 48px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero .eyebrow { color: var(--verde-claro); }
.hero .eyebrow::before { background: var(--verde-claro); }

.hero h1 {
    font-family: var(--serif);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--tinta);
    font-size: clamp(38px, 4.6vw, 60px);
    margin-bottom: 20px;
}
.hero h1 em {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
    color: var(--verde);
    display: inline-block;
}

.hero p {
    font-size: 19px;
    color: var(--gris);
    max-width: 500px;
    margin-bottom: 32px;
    font-weight: 300;
}

.hero .btn-line {
    color: var(--tinta);
    border-bottom-color: rgba(20,20,20,0.25);
}
.hero .btn-line:hover {
    color: var(--verde);
    border-color: var(--verde);
}

/* BOTONES ESTILO CUADRADO */
.hero-btns {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
}

.btn-solid {
    background: var(--verde);
    color: #fff;
    padding: 16px 36px;
    border-radius: var(--b-radius);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 16px;
    transition: all 0.3s;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid var(--verde);
}
.btn-solid:hover {
    background: var(--oscuro);
    border-color: var(--oscuro);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 4px 4px 0px rgba(0,0,0,0.1);
}

.btn-line {
    color: var(--tinta);
    padding: 16px 24px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 16px;
    border-bottom: 2px solid var(--tinta);
    transition: all 0.3s;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.btn-line:hover {
    color: var(--verde);
    border-color: var(--verde);
}

/* IMAGEN HERO */
.hero-visual {
    align-self: stretch;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 48px 24px 48px 0;
}
.hero-visual::after {
    display: none;
}
.hero-visual img {
    width: 100%;
    max-width: 460px;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
    box-shadow: 0 14px 32px rgba(0,0,0,0.28);
    transition: transform 0.6s ease;
}
.hero-visual:hover img {
    transform: scale(1.04);
}
/* Acento cuadrado de diseño */
.square-accent {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 150px;
    height: 150px;
    background: transparent;
    border: 15px solid rgba(255,255,255,0.05);
    z-index: 1;
}


/* ================= STATS (Tarjetas de cifras) ================= */
.stats {
    background: var(--fondo);
    padding: 40px 0;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.stat {
    background: #fff;
    border: 1px solid var(--linea);
    padding: 28px 28px;
    transition: transform 0.3s, box-shadow 0.3s;
}
.stat:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(0,0,0,0.06);
}
.stat b {
    display: block;
    font-size: 48px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--verde);
}
.stat span {
    font-size: 13px;
    color: var(--gris);
    margin-top: 14px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}


/* ================= CATEGORÍAS DESTACADAS (parrilla con foto) ================= */
.categorias-showcase {
    background: var(--fondo);
    padding: 40px 0 84px;
}
.categorias-showcase .head { margin-bottom: 36px; }
.cat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}
.cat-card {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--crema);
}
.cat-photo {
    aspect-ratio: 3 / 4;
    overflow: hidden;
}
.cat-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}
.cat-card:hover .cat-photo img { transform: scale(1.05); }
.cat-label {
    position: absolute;
    left: 0;
    bottom: 0;
    background: #fff;
    padding: 20px 30px 20px 24px;
    max-width: 82%;
}
.cat-label h3 {
    font-size: 21px;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: var(--tinta);
    margin-bottom: 6px;
}
.cat-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--gris);
    font-weight: 500;
}
.cat-cta svg { width: 34px; height: 8px; flex-shrink: 0; transition: transform 0.3s ease; }
.cat-card:hover .cat-cta svg { transform: translateX(5px); }
.cat-card:hover .cat-cta { color: var(--verde); }

@media (max-width: 1024px) {
    .cat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .cat-grid { grid-template-columns: 1fr; }
}


/* ================= SECCIONES (Estilos Generales) ================= */
section { padding: 100px 0; }
.head {
    max-width: 700px;
    margin-bottom: 60px;
}
.head h2 {
    font-family: var(--serif);
    font-weight: 600;
    letter-spacing: -0.01em;
    font-size: clamp(32px, 4vw, 48px);
    margin-bottom: 20px;
}
.head h2 em {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
    color: var(--verde);
}
.head p {
    font-size: 20px;
    color: var(--gris);
    font-weight: 300;
}

/* ================= SEGMENTOS (A quién servimos) ================= */
.segmentos {
    background: var(--fondo);
}
.seg-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--linea);
    border: 1px solid var(--linea);
}
.seg-card {
    background: #fff;
    padding: 44px 32px;
    transition: background 0.3s;
}
.seg-card:hover { background: var(--crema); }
.seg-card .seg-num {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
    font-size: 32px;
    color: var(--verde);
    margin-bottom: 28px;
    display: block;
}
.seg-card h3 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 22px;
    color: var(--tinta);
    margin-bottom: 12px;
    letter-spacing: 0;
}
.seg-card p {
    font-size: 15px;
    color: var(--gris);
    line-height: 1.7;
}
@media (max-width: 920px) {
    .seg-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .seg-card { padding: 24px 16px; }
    .seg-card .seg-num { font-size: 24px; margin-bottom: 16px; }
    .seg-card h3 { font-size: 16px; margin-bottom: 8px; }
    .seg-card p { font-size: 13px; line-height: 1.5; }
}

/* ================= POR QUÉ (Cuadrícula Estricta) ================= */
.why-section {
    background: var(--fondo);
}
.why-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    border: 1px solid var(--linea);
}
.why-card {
    background: #fff;
    padding: 50px 40px;
    display: flex;
    gap: 24px;
    align-items: flex-start;
    border: 1px solid var(--linea);
    margin: -1px 0 0 -1px; /* Solapa bordes para crear grid perfecto */
    transition: background 0.3s;
}
.why-card:hover {
    background: var(--crema);
}
.why-card .mark {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 0; /* Totalmente cuadrado */
    background: var(--verde);
    display: grid;
    place-items: center;
    color: #fff;
}
.why-card .mark svg { width: 24px; height: 24px; }
.why-content h3 {
    font-size: 22px;
    margin-bottom: 12px;
}
.why-content p {
    font-size: 16px;
    color: var(--gris);
}


/* ================= PRODUCTOS ================= */
.productos {
    background: var(--crema);
    border-top: 1px solid var(--linea);
    border-bottom: 1px solid var(--linea);
}
.prod-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.prod-card {
    background: #fff;
    border-radius: var(--b-radius-card); /* Cuadrado */
    border: 1px solid var(--linea);
    box-shadow: 0 1px 2px rgba(20,20,20,0.03);
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.prod-card:hover {
    transform: translateY(-5px);
    box-shadow: 10px 10px 0px rgba(84, 159, 59, 0.1);
    border-color: var(--verde);
}
.prod-card .prod-visual {
    aspect-ratio: 1 / 1;
    background: #fff;
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--linea);
    padding: 18px;
}
.prod-card .prod-visual img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    z-index: 0;
}
.prod-card .prod-visual.placeholder {
    background: linear-gradient(155deg, var(--crema-2) 0%, var(--crema) 100%);
}
.prod-card .prod-visual.placeholder img {
    width: auto;
    height: auto;
    max-width: 42%;
    max-height: 42%;
    opacity: 0.8;
}
.prod-visual-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.prod-card .ref {
    display: block;
    font-size: 11px;
    color: var(--gris-claro);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 0;
    margin-bottom: 8px;
    white-space: nowrap;
}
.prod-card .prod-body {
    padding: 24px 24px 28px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.prod-card .tag {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #fff;
    background: var(--tinta);
    padding: 6px 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.18);
}
.prod-card:hover .tag:not(.tag-discount) {
    background: var(--verde);
}
.prod-card .tag.tag-discount {
    background: #e11d48;
}
.btn-fav {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    background: #fff;
    border: 1px solid var(--linea);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
    transition: transform 0.2s, border-color 0.2s;
}
.btn-fav:hover {
    transform: scale(1.08);
    border-color: var(--verde);
}
.prod-card h3 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 21px;
    line-height: 1.25;
    margin-bottom: 8px;
    letter-spacing: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.prod-card h3 a {
    color: var(--tinta);
}
.prod-card h3 em {
    font-style: italic;
    color: var(--verde);
}
.prod-specs {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 12.5px;
    color: var(--gris);
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.prod-spec-sep {
    color: #ccc;
}
.prod-price {
    font-weight: 700;
    font-size: 17px;
    color: var(--verde);
}
.prod-price-ud {
    font-size: 10px;
    font-weight: 400;
    color: #888;
    margin-left: 1px;
}
.prod-header-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    gap: 6px 12px;
}
.prod-header-top .ref {
    margin-bottom: 0;
}
.prod-header-top .prod-price-wrap {
    text-align: right;
    flex-shrink: 0;
}
.prod-header-top .prod-price {
    font-size: 21px;
}
.prod-price-locked {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--gris-claro);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
.price-crossed {
    font-size: 13px;
    font-weight: 500;
    text-decoration: line-through;
    color: #999;
    display: block;
    margin-bottom: 2px;
}
.prod-spec-item {
    display: inline-flex;
    align-items: center;
    font-weight: 400;
}
.prod-card .prod-link {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: auto;
    background: #111;
    color: white;
    border: 1px solid #111;
    padding: 13px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    border-radius: 0;
    transition: background 0.3s, border-color 0.3s;
}
.prod-card .prod-link:hover {
    background: var(--verde);
    border-color: var(--verde);
    color: white;
}
.prod-card .prod-link-ghost {
    background: transparent;
    color: var(--verde);
    border-color: var(--verde);
}
.prod-card .prod-link-ghost:hover {
    background: var(--verde);
    color: #fff;
}


/* ================= RECETAS / INSPIRACIÓN ================= */
.recetas-section {
    background: var(--fondo);
}
.recetas-section.mas-recetas { background: var(--crema); border-top: 1px solid var(--linea); }
.migas-recetas { margin-bottom: 24px; }
.recetas-intro { max-width: 760px; margin: 0 auto 50px; text-align: center; }
.recetas-intro p { font-size: 17px; color: var(--gris); line-height: 1.8; }

.form-field.checkbox-row { flex-direction: row; align-items: center; gap: 8px; }
.form-field.checkbox-row input[type="checkbox"] { width: auto; }
.form-field.checkbox-row label { margin: 0; font-weight: 400; }
.category-main { background: #fdfaf6; min-height: 80vh; padding: 0 0 40px 0; }
.productos.sin-borde { border-top: none; }
.bottom-nav-cart { position: relative; }
.error-page-content { max-width: 600px; }
.cuenta-form-wrap .intro-text { margin-bottom: 20px; color: var(--gris); }
.dashboard-nav-item.salir { color: #d32f2f; margin-top: 20px; }

/* ================= MAPA DE COBERTURA (tooltip) ================= */
/* Posición fija respecto a la ventana, no al mapa: el Tarragonès tiene 22
   poblaciones y en cinco filas ocupa más ancho del que mide la columna del
   mapa. El guión lo coloca junto al cursor y lo mantiene dentro de pantalla. */
.map-tooltip {
    position: fixed;
    top: 0; left: 0;
    background: #fff;
    border: 1px solid var(--linea);
    border-radius: 12px;
    padding: 14px 18px 16px;
    box-shadow: 0 20px 48px rgba(20, 20, 20, .14);
    pointer-events: none;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease;
    z-index: 1200;
    max-width: min(760px, calc(100vw - 24px));
}
.map-tooltip.active {
    opacity: 1;
    transform: translateY(0);
}
.map-tooltip h4 {
    margin: 0 0 10px;
    font-family: var(--serif);
    font-weight: 600;
    color: var(--tinta);
    font-size: 1.05rem;
    border-bottom: 1px solid var(--linea);
    padding-bottom: 8px;
}
/* Cinco filas fijas y tantas columnas como hagan falta. */
.map-tooltip ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--gris);
    display: grid;
    grid-template-rows: repeat(5, auto);
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    column-gap: 28px;
    row-gap: 2px;
}
.map-tooltip ul li {
    display: flex;
    align-items: baseline;
    gap: 7px;
    white-space: nowrap;
}
.map-tooltip ul li::before {
    content: "";
    flex: none;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--verde);
    transform: translateY(-2px);
}
.map-tooltip ul li.proximamente { font-style: italic; }
.map-tooltip ul li.proximamente::before { background: var(--gris-claro, #c9c9c9); }

@media (max-width: 700px) {
    .map-tooltip ul {
        grid-auto-flow: row;
        grid-template-rows: none;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 16px;
    }
    .map-tooltip ul li { white-space: normal; }
}
.recipe-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.recipe-card {
    background: #fff;
    border: 1px solid var(--linea);
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.recipe-card:hover {
    transform: translateY(-5px);
    box-shadow: 10px 10px 0px rgba(84, 159, 59, 0.1);
    border-color: var(--verde);
}
.recipe-card .recipe-visual {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.recipe-card .recipe-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.recipe-card:hover .recipe-visual img {
    transform: scale(1.06);
}
.recipe-card .recipe-body {
    padding: 28px 28px 32px;
}
.recipe-card .tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    background: var(--tinta);
    padding: 6px 14px;
    margin-bottom: 18px;
}
.recipe-card:hover .tag { background: var(--verde); }
.recipe-card h3 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 22px;
    margin-bottom: 10px;
    letter-spacing: 0;
}
.recipe-card h3 em {
    font-style: italic;
    color: var(--verde);
}
.recipe-card p {
    font-size: 15px;
    color: var(--gris);
    margin-bottom: 18px;
}
.recipe-card .recipe-link {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--verde-osc);
    border-bottom: 1px solid var(--verde);
    padding-bottom: 2px;
    transition: color 0.2s;
}
.recipe-card .recipe-link:hover { color: var(--oscuro); }

@media (max-width: 920px) {
    .recipe-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .recipe-grid { grid-template-columns: 1fr; }
}


/* ================= MARCAS ================= */
.marcas-section {
    background: var(--fondo);
    overflow: hidden; /* Evita que el marquee expanda la página */
}
.colab-marquee-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    /* Difuminado a los lados opcional */
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}
.colab-grid {
    display: flex;
    width: max-content;
    animation: scroll-brands 30s linear infinite;
    gap: 30px;
}
.colab-grid:hover {
    animation-play-state: paused;
}
.colab-track {
    display: flex;
    gap: 30px;
    align-items: center;
}
@keyframes scroll-brands {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 15px)); } /* Desplaza exactamente una pista (50% del total + mitad del gap) */
}
.colab-card {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    width: 160px;
    height: 100px;
    background: transparent;
    filter: grayscale(1);
    opacity: 0.6;
    transition: all 0.3s;
}
.colab-card:hover {
    filter: grayscale(0);
    opacity: 1;
    background: var(--crema);
}
.colab-card img {
    max-height: 60px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}
/* Logos blancos o casi blancos: sobre el fondo claro de la web no se ven.
   Se les pone una tarjeta oscura detrás, que además queda como un sello.
   Se elige marca por marca desde el panel, no se adivina aquí. */
.colab-card.colab-oscuro {
    background: #23231f;
    border-radius: 10px;
    padding: 16px 20px;
    /* La tarjeta va a plena opacidad: si se desvaneciera al 60% como las
       demás, el fondo oscuro saldría gris descolorido y el logo blanco
       volvería a perderse, que es justo lo que se quiere arreglar. */
    opacity: 1;
}
/* El apagado se pasa al logo, para que el conjunto mantenga el mismo ritmo
   visual que el resto de tarjetas. */
.colab-card.colab-oscuro img { opacity: 0.75; transition: opacity 0.3s; }
.colab-card.colab-oscuro:hover { background: #14140f; }
.colab-card.colab-oscuro:hover img { opacity: 1; }


/* ================= RESEÑAS ================= */
.reviews {
    background: var(--verde-hondo);
    color: #fff;
}
.reviews .eyebrow { color: #a8dd93; }
.reviews .eyebrow::before { background: #a8dd93; }
.reviews .head h2 { color: #fff; }
.reviews .head h2 em { color: #a8dd93; }

.rev-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.rev-card {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 0;
    padding: 40px;
    transition: background 0.3s;
}
.rev-card:hover {
    background: rgba(255,255,255,0.05);
}
.stars {
    color: #f0c14b;
    font-size: 18px;
    letter-spacing: 2px;
    margin-bottom: 24px;
}
.rev-card p {
    font-size: 18px;
    color: #eef3ea;
    margin-bottom: 30px;
    font-weight: 300;
}
.rev-card .who b {
    font-size: 15px;
    display: block;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.rev-card .who span {
    font-size: 14px;
    color: #a8dd93;
}


/* ================= COBERTURA ================= */
.cobertura {
    background: var(--fondo);
    border-bottom: 1px solid var(--linea);
}
.cob-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    align-items: center;
}
.cob-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.cob-tags span {
    background: var(--crema);
    border: 1px solid var(--linea);
    border-radius: 0;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 500;
    color: var(--tinta);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s;
}
.cob-tags span:hover {
    background: var(--verde);
    color: #fff;
    border-color: var(--verde);
}
.cob-tags span.tag-main {
    background: var(--oscuro);
    color: #fff;
    border-color: var(--oscuro);
}


/* ================= CTA ================= */
.cta {
    background: var(--verde-osc);
    color: #fff;
    text-align: center;
    padding: 100px 32px;
    position: relative;
    overflow: hidden;
}
.cta::after {
    content: '';
    position: absolute;
    left: 50%;
    top: -50%;
    width: 800px;
    height: 800px;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(255,255,255,0.08), transparent 60%);
    pointer-events: none;
}
.cta-inner {
    position: relative;
    z-index: 2;
}
.cta h2 {
    font-size: clamp(32px, 4vw, 56px);
    margin-bottom: 20px;
}
.cta p {
    font-size: 20px;
    color: #c7cabf;
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 300;
}
.cta-btns {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}
.cta .btn-wa {
    background: var(--wa);
    color: #fff;
    padding: 18px 36px;
    border-radius: 0;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.cta .btn-wa:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(37, 211, 102, 0.3);
}
.cta .btn-wa svg {
    width: 24px;
    height: 24px;
    fill: #fff;
}
.cta .btn-tel {
    background: transparent;
    border: 2px solid rgba(255,255,255,0.4);
    color: #fff;
    padding: 16px 36px;
    border-radius: 0;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.2s;
}
.cta .btn-tel:hover {
    border-color: #fff;
    background: #fff;
    color: var(--verde-osc);
}


/* ================= RESPONSIVE ================= */
@media (max-width: 1024px) {
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .hero-text {
        padding: 80px 0 60px;
    }
    .hero-visual {
        min-height: 400px;
    }
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cob-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 768px) {
    section { padding: 40px 0; }
    .hero-text { padding: 40px 0 30px; }
    .why-grid, .prod-grid, .rev-grid {
        grid-template-columns: 1fr;
    }
    .why-card {
        margin: -1px 0 0 0;
    }
    .head { margin-bottom: 30px; }
}

@media (max-width: 560px) {
    .wrap { padding: 0 20px; }
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .stat {
        padding: 15px 10px;
    }
    .stat b {
        font-size: 28px;
    }

}

/* ================= FOOTER ================= */
footer {
    background: var(--oscuro);
    color: #e5e5e5;
    padding: 80px 0 0 0;
    border-top: 5px solid var(--verde);
}
.foot-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 60px;
    margin-bottom: 60px;
}
.foot-brand p {
    font-size: 15px;
    color: #a8aaa2;
    margin: 24px 0;
    line-height: 1.8;
}
.foot-logo img {
    height: 40px;
    width: auto;
    object-fit: contain;
}
.foot-eu img {
    height: 35px;
    width: auto;
    opacity: 0.8;
}
footer h4 {
    color: #fff;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 24px;
    font-weight: 700;
}
.foot-list {
    list-style: none;
    padding: 0;
}
.foot-list li {
    margin-bottom: 12px;
}
.foot-list a {
    color: #a8aaa2;
    font-size: 15px;
    transition: color 0.3s;
}
.foot-list a:hover {
    color: #fff;
}
.foot-c {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.foot-c a, .foot-c span {
    color: #a8aaa2;
    font-size: 15px;
    transition: color 0.3s;
    line-height: 1.6;
}
.foot-c a:hover {
    color: var(--verde);
}
.foot-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 24px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #777;
}

/* WA FLOTANTE */
.wa-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background: var(--wa);
    border-radius: 50%;
    display: grid;
    place-items: center;
    z-index: 9999;
    box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4);
    transition: transform 0.3s;
}
.wa-float:hover {
    transform: scale(1.1);
}
.wa-float svg {
    width: 32px;
    height: 32px;
    fill: #fff;
}

@media (max-width: 920px) {
    .foot-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}
@media (max-width: 560px) {
    .foot-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px 20px;
    }
    .foot-grid > .foot-brand,
    .foot-grid > div:last-child {
        grid-column: 1 / -1;
    }
    .foot-brand {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 10px;
    }
    .foot-brand > p {
        grid-column: 1 / -1;
        grid-row: 2;
        margin-top: 5px;
    }
    .foot-eu {
        text-align: right;
    }
    .foot-c {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .foot-c a, .foot-c span {
        font-size: 13px;
    }
    .foot-c span {
        grid-column: 1 / -1;
        margin-top: 5px;
    }
    .foot-bottom {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
}

/* ================= CABECERAS DE PÁGINA (plantillas) ================= */
.page-header {
    background: var(--fondo);
    border-bottom: 1px solid var(--linea);
    padding: 80px 32px;
    text-align: center;
}
.page-header h1 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 48px;
    margin-bottom: 16px;
}
.page-header h1 em { font-style: italic; font-weight: 500; color: var(--verde); }
.page-header p { font-size: 18px; color: var(--gris); max-width: 640px; margin: 0 auto; }
.page-header.oscura {
    background: linear-gradient(155deg, var(--oscuro) 0%, var(--verde-hondo) 100%);
    color: #fff;
    border-bottom: none;
    padding: 90px 32px;
}
.page-header.oscura h1 em { color: var(--verde-claro); }
.page-header.oscura p { color: #c7cabf; }
.page-header.compacta { padding: 40px 0 60px; }
.page-header.con-imagen {
    background-image: linear-gradient(200deg, rgba(20,20,20,0.25) 0%, rgba(20,20,20,0.75) 100%), var(--bg-img);
    background-size: cover;
    background-position: center;
    color: #fff;
    border-bottom: none;
    padding: 110px 32px;
}
.page-header.con-imagen.oscuro-fuerte {
    background-image: linear-gradient(200deg, rgba(20,20,20,0.3) 0%, rgba(20,20,20,0.8) 100%), var(--bg-img);
}
.page-header.con-imagen h1 em { color: var(--verde-claro); }
.page-header.con-imagen p { color: #ececec; }

/* ================= FILTROS DE CATÁLOGO ================= */
.product-filters {
    display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
    padding: 40px 32px; background: #fff; border-bottom: 1px solid var(--linea);
}
.filter-btn {
    padding: 8px 24px; border: 1px solid var(--linea); background: var(--crema);
    font-family: 'Inter', sans-serif; font-weight: 600; cursor: pointer;
    text-transform: uppercase; letter-spacing: 0.05em; font-size: 14px; transition: all 0.2s;
}
.filter-btn.active, .filter-btn:hover { background: var(--verde); color: #fff; border-color: var(--verde); }
.prod-card[hidden] { display: none; }

/* ================= CONTENIDO SIMPLE (páginas CMS) ================= */
/* Contenedor ancho: las tarjetas ocupan todo; el texto se centra a 860px */
.content-page {
    max-width: 1240px;
    margin: 0 auto;
    padding: 70px 32px;
}
.content-page .content-h,
.content-page .content-rich,
.content-page .content-figure,
.content-page .content-html {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}
.content-page .content-h {
    font-family: var(--serif);
    font-weight: 600;
    margin-top: 40px;
    margin-bottom: 16px;
}
/* El primer bloque no arrastra su margen superior: se sumaría al relleno de la
   página y dejaría 110 px de blanco justo debajo de la cabecera. */
.content-page > *:first-child { margin-top: 0; }
.content-page h2.content-h { font-size: 34px; }
.content-page h3.content-h { font-size: 24px; }
.content-rich { font-size: 17px; color: var(--gris); margin-bottom: 20px; }
.content-rich p { margin-bottom: 16px; }
/* Listas: punto verde propio en lugar del disco del navegador, alineado con la
   primera línea. Sin justificar —en renglones cortos el justificado abre huecos
   enormes entre palabras y parte términos por la mitad. */
.content-rich ul { list-style: none; margin: 0 0 18px; padding: 0; }
.content-rich ul li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 11px;
    text-align: left;
    hyphens: manual;
    -webkit-hyphens: manual;
}
.content-rich ul li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: .62em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--verde);
}
.content-rich ul li > b:first-child,
.content-rich ul li > strong:first-child {
    color: var(--tinta);
    font-weight: 600;
}
.content-rich ol { margin: 0 0 18px 22px; }
.content-rich ol li { margin-bottom: 11px; text-align: left; }
.content-rich a { color: var(--verde-osc); border-bottom: 1px solid var(--verde); }
.content-figure { margin-top: 30px; margin-bottom: 30px; }
.content-figure figcaption { font-size: 14px; color: var(--gris-claro); margin-top: 10px; }
/* Las secciones de componente siguen exactamente el mismo ritmo vertical que un
   párrafo: 16 px por debajo de su título, 40 px antes del título siguiente. Sin
   esto heredan el `section { padding: 100px 0 }` global, que se suma a los
   márgenes del texto y hace que los huecos salten de 62 a 146 px.
   Las que llevan fondo propio (cobertura) sí conservan relleno, porque ahí el
   espacio queda dentro de la banda de color y no se ve como hueco. */
.content-page .recetas-section,
.content-page .split-section,
.content-page .reparto-section,
.content-page .buscazona {
    padding: 0;
    margin: 0 0 20px;
}
.content-page .cobertura {
    padding: 46px 0;
    margin: 0 0 20px;
}
.content-page .recetas-section .wrap { padding: 0; }

/* Alinea todos los componentes de ancho variable (imagen+texto, tabs de reparto,
   mapa de cobertura) a la misma columna de lectura de 860px que usan los
   párrafos y títulos, para que los márgenes sean siempre los mismos. */
.content-page .split-section > .wrap,
.content-page .reparto-section > .wrap,
.content-page .buscazona > .wrap,
.content-page .cobertura > .wrap {
    max-width: 860px;
    padding-left: 0;
    padding-right: 0;
}
/* La furgoneta es una sección a sangre con su propio alto de scroll: cualquier
   relleno heredado se convierte en 200 px de blanco muerto a su alrededor. */
.content-page .furgo-section {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding: 0;
}
.content-page .cob-grid { gap: 40px; }

/* ================= BLOQUE INSTITUCIONAL ================= */
.institucional {
    background: var(--crema);
    border-top: 1px solid var(--linea);
    padding: 60px 0;
}
.inst-grid {
    display: grid;
    grid-template-columns: 220px 1fr 260px;
    gap: 50px;
    align-items: center;
}
.inst-logo img { max-height: 90px; width: auto; }
.inst-text p { font-size: 13px; color: var(--gris); line-height: 1.7; }
.inst-logos-gov img { max-width: 100%; }
.logo-placeholder {
    border: 1px dashed var(--gris-claro);
    padding: 24px;
    text-align: center;
    font-size: 12px;
    color: var(--gris-claro);
}
@media (max-width: 920px) {
    .inst-grid { grid-template-columns: 1fr; gap: 28px; text-align: center; }
    .inst-logo img { margin: 0 auto; }
}

/* ================= MAPA COMARCAL ================= */
.cob-mapa { position: relative; }
/* En móvil el mapa ocupa media pantalla y lo único que aporta es qué comarcas
   están en verde, que ya dicen las etiquetas de al lado. Encima su información
   real (las poblaciones) sale al pasar el ratón, y en un móvil no hay ratón:
   ahí el buscador hace ese trabajo mucho mejor. */
@media (max-width: 768px) {
    .cob-mapa { display: none; }
}
.mapa-comarcal { width: 100%; height: auto; display: block; }
/* El contorno pinta también la Val d'Aran (no viene como comarca en el SVG base) */
.mapa-comarcal .contorn { fill: #edebe2; stroke: #ffffff; stroke-width: 1.6; }
.mapa-comarcal .comarca {
    fill: #edebe2;
    stroke: #ffffff;
    stroke-width: 1.6;
    transition: fill 0.2s;
    cursor: pointer;
}
.mapa-comarcal .comarca:hover { fill: var(--verde-claro); }

/* ================= MIGAS DE PAN ================= */
.breadcrumbs { font-size: 13px; color: #888; padding: 15px 0; }
.breadcrumbs a { color: #666; text-decoration: none; }
.breadcrumbs .sep { margin: 0 5px; }
.breadcrumbs .current { color: #333; font-weight: 500; }

/* ================= FICHA DE PRODUCTO ================= */
.prod-detail { padding: 60px 0 100px; background: var(--fondo); }
.migas { margin-bottom: 32px; }
.migas a {
    font-size: 14px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--gris);
}
.migas a:hover { color: var(--verde); }
.prod-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}
.prod-detail-visual {
    background: #fff;
    border: 1px solid var(--linea);
}
.prod-detail-visual img { width: 100%; height: auto; display: block; }
.prod-detail-info h1 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(30px, 3.5vw, 44px);
    margin: 16px 0 8px;
}
.prod-detail-info h1 em { font-style: italic; font-weight: 500; color: var(--verde); }
.prod-detail-info .ref {
    display: block; font-size: 13px; color: var(--gris-claro);
    text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 24px;
}
.prod-desc { font-size: 17px; color: var(--gris); margin-bottom: 16px; }
.prod-formato { font-size: 15px; color: var(--gris); margin-bottom: 24px; }
.prod-precio {
    font-family: var(--serif); font-size: 32px; font-weight: 600;
    margin-bottom: 32px; color: var(--tinta);
}
.prod-precio small { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 400; color: var(--gris-claro); }
.prod-add-form { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.prod-add-form label { font-weight: 600; font-size: 15px; }
.prod-add-form input[type="number"] {
    width: 90px; padding: 14px; border: 1px solid var(--linea);
    font-family: 'Inter', sans-serif; font-size: 16px; text-align: center;
}
.prod-add-form .btn-solid { border: none; cursor: pointer; }
.prod-body h3 a { color: inherit; }
.prod-body h3 a:hover { color: var(--verde-osc); }

.ficha-specs { margin-top: 56px; padding-top: 32px; border-top: 1px solid #eee; }
.ficha-specs h2 { font-size: 1.3rem; margin-bottom: 22px; }
.ficha-specs-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 18px 40px; max-width: 860px;
}
.spec-label {
    display: block; font-size: 12px; color: #999; text-transform: uppercase;
    letter-spacing: .04em; margin-bottom: 3px;
}
.spec-value { font-size: 15px; color: var(--tinta); font-weight: 600; }
.ficha-attrs { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; }
.ficha-attr-pill {
    display: inline-flex; align-items: center; padding: 6px 14px;
    border-radius: 20px; background: #eef6ea; color: var(--verde-osc);
    font-size: 13px; font-weight: 600;
}

.prod-detail-info { display: flex; flex-direction: column; gap: 1rem; justify-content: flex-start; }
.prod-detail-cats { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.prod-detail-cat-pill {
    display: inline-block; padding: 4px 12px; border-radius: 20px;
    background: #f2f2f2; font-size: 12px; font-weight: 600;
    letter-spacing: .04em; color: #555; text-transform: uppercase;
}
.prod-detail-image-frame {
    aspect-ratio: 1; background: #fff; border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.prod-detail-image-frame.placeholder { background: #f5f5f5; box-shadow: none; color: #ccc; }
#prod-main-img { width: 100%; height: 100%; object-fit: contain; }
.prod-detail-gallery { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.prod-detail-gallery img {
    width: 74px; height: 74px; object-fit: contain; background: #fff;
    border-radius: 8px; border: 1px solid #eee; cursor: pointer;
}
.section-head-spaced { margin-top: 80px; }
.section-head-spaced--sm { margin-top: 60px; }

/* --- Zona de precio de la ficha (solo se ve con sesión de cliente) --- */
.ficha-precio { padding: 18px 0; border-top: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0; }
.ficha-precio-rebaja { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ficha-badge-desc {
    display: inline-block; background: #e11d48; color: #fff;
    font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
    padding: 4px 9px;
}
.ficha-precio-antes { font-size: 14px; color: #999; text-decoration: line-through; }
.ficha-precio-grande {
    font-family: var(--serif); font-size: 34px; font-weight: 600;
    color: var(--verde); margin: 0; line-height: 1.1;
}
.ficha-precio-grande small {
    font-family: 'Inter', sans-serif; font-size: 12px;
    font-weight: 400; color: var(--gris-claro); margin-left: 3px;
}
.ficha-precio-caja { font-size: 13px; color: #888; margin: 4px 0 0; }
.ficha-precio-iva { font-size: 13px; color: #888; margin: 2px 0 0; }
.ficha-minimo { font-size: 12px; color: #d97706; font-weight: 600; margin: 8px 0 0; }
.ficha-bajo-demanda {
    display: inline-flex; align-items: center; gap: 6px; width: fit-content;
    background: #fff7ed; color: #c2650c; border: 1px solid #fde5c8;
    font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: 6px;
}

.ficha-cantidad {
    display: flex; align-items: center;
    border: 1.5px solid #ddd; border-radius: 8px; overflow: hidden;
}
.ficha-cantidad label {
    padding: 0 12px; font-size: 13px; color: #666;
    border-right: 1px solid #eee; white-space: nowrap;
}
.prod-add-form .ficha-cantidad input[type="number"] {
    width: 74px; padding: 11px 12px; border: none; outline: none; font-size: 15px;
}
/* Con el padding de .btn-solid el texto se partia en dos lineas; asi cabe
   en una, y cuando la columna es estrecha salta a su propia fila. */
.ficha-add {
    flex: 1 1 240px; display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; padding: 14px 20px; font-size: 15px;
}
.ficha-fav {
    width: 46px; height: 46px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: #fff; border: 1.5px solid #ddd; border-radius: 8px; cursor: pointer;
    transition: border-color 0.2s;
}
.ficha-fav:hover { border-color: var(--verde); }

/* --- Puerta de entrada B2B: lo que ve quien no ha iniciado sesión --- */
.ficha-acceso {
    border: 1px solid #dbe9d4; border-left: 3px solid var(--verde);
    background: #f6faf4; padding: 20px 22px; border-radius: 8px;
}
.ficha-acceso-titulo {
    display: flex; align-items: center; gap: 8px; margin: 0 0 8px;
    font-size: 15px; font-weight: 700; color: var(--verde-osc);
}
.ficha-acceso-texto { font-size: 14px; color: #555; line-height: 1.6; margin: 0 0 16px; }
.ficha-acceso-botones { display: flex; gap: 12px; flex-wrap: wrap; }
.ficha-acceso-botones .btn-solid,
.ficha-acceso-botones .btn-line { padding: 13px 26px; font-size: 14px; }
.ficha-acceso-wa {
    display: inline-block; margin-top: 14px;
    font-size: 13px; color: var(--gris); text-decoration: underline;
}
.ficha-acceso-wa:hover { color: var(--verde); }

.vistos-recientes { display: flex; gap: 16px; flex-wrap: wrap; }
.visto-item {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    width: 100px; text-decoration: none; text-align: center;
}
.visto-item img {
    width: 80px; height: 80px; object-fit: contain; background: #fff;
    border: 1px solid #eee; border-radius: 8px; padding: 6px;
}
.visto-item span { font-size: 12px; color: var(--tinta); line-height: 1.3; }

@media (max-width: 860px) {
    .prod-detail-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 480px) {
    .ficha-precio-grande { font-size: 28px; }
    /* Uno debajo del otro: en dos columnas el texto se partia en dos lineas. */
    .ficha-acceso-botones { flex-direction: column; gap: 10px; }
    .ficha-acceso-botones .btn-solid,
    .ficha-acceso-botones .btn-line { text-align: center; }
}

/* ================= CESTA ================= */
.cesta-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: var(--tinta);
}
.cesta-btn svg { width: 22px; height: 22px; }
.cesta-btn:hover { color: var(--verde); }
.cesta-badge {
    position: absolute; top: -8px; right: -10px;
    background: var(--verde); color: #fff;
    font-size: 11px; font-weight: 700;
    min-width: 18px; height: 18px; border-radius: 50%;
    display: grid; place-items: center; padding: 0 4px;
}
.cesta-page { padding: 60px 32px 100px; }
.cesta-tabla { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--linea); }
.cesta-tabla th {
    text-align: left; font-size: 13px; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--gris-claro);
    padding: 16px 20px; border-bottom: 2px solid var(--linea);
}
.cesta-tabla td { padding: 16px 20px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.c-img img { width: 80px; height: 80px; object-fit: contain; border: 1px solid var(--linea); }
.c-nombre a { color: inherit; }
.c-nombre a:hover b { color: var(--verde-osc); }
.c-nombre .ref { display: block; font-size: 12px; color: var(--gris-claro); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; }
.c-qty form { display: flex; gap: 8px; align-items: center; }
.c-qty input { width: 70px; padding: 10px; border: 1px solid var(--linea); text-align: center; font-family: 'Inter', sans-serif; }
.btn-mini {
    padding: 8px 14px; border: 1px solid var(--linea); background: var(--crema);
    font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; transition: all 0.2s;
}
.btn-mini:hover { background: var(--verde); color: #fff; border-color: var(--verde); }
.btn-mini.quitar:hover { background: #c0392b; border-color: #c0392b; }
.c-subtotal { font-weight: 600; white-space: nowrap; }
.c-total-label { text-align: right; font-weight: 600; text-transform: uppercase; font-size: 14px; letter-spacing: 0.05em; }
/* Visitante sin cuenta: en vez del importe, por qué no lo ve. */
.c-precio-oculto { font-weight: 400; color: var(--gris); font-size: 14px; }
.cesta-aviso-precios { margin-top: 24px; padding: 16px 20px; background: #f7f6f2; border-left: 3px solid var(--verde); color: var(--gris); font-size: 15px; line-height: 1.55; max-width: 640px; }
.cesta-acciones { display: flex; gap: 20px; margin-top: 40px; flex-wrap: wrap; align-items: center; }
.cesta-vacia { text-align: center; padding: 80px 0; }
.cesta-vacia p { font-size: 18px; color: var(--gris); margin-bottom: 24px; }
@media (max-width: 700px) {
    .cesta-tabla thead { display: none; }
    .cesta-tabla, .cesta-tabla tbody, .cesta-tabla tr, .cesta-tabla td { display: block; width: 100%; }
    .cesta-tabla tr { border-bottom: 2px solid var(--linea); padding: 12px 0; }
    .cesta-tabla td { border: none; padding: 8px 16px; }
}

/* ================= SELECTOR DE IDIOMA ================= */
.lang-switch { display: flex; gap: 4px; align-items: center; font-size: 13px; font-weight: 700; }
.lang-switch a, .lang-switch span {
    padding: 4px 8px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gris-claro);
}
.lang-switch a:hover { color: var(--verde); }
.lang-switch .activo { color: var(--tinta); border-bottom: 2px solid var(--verde); }

/* ================= TEXTO JUSTIFICADO (párrafos, no títulos) ================= */
.hero p,
.head p,
.seg-card p,
.why-content p,
.prod-card p,
.recipe-card p,
.rev-card p,
.content-rich,
.content-rich p,
.prod-desc,
.inst-text p,
.foot-brand p,
.cob-text p {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* ================= FAQ ================= */
.faq-section { margin: 40px auto; }
.faq-item {
    border: 1px solid var(--linea);
    background: #fff;
    margin-bottom: 10px;
}
.faq-item summary {
    cursor: pointer;
    padding: 18px 22px;
    font-weight: 600;
    font-size: 16px;
    color: var(--tinta);
    list-style: none;
    position: relative;
    padding-right: 48px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    color: var(--verde);
    font-weight: 400;
}
.faq-item[open] summary::after { content: '−'; }
.faq-item[open] summary { border-bottom: 1px solid var(--linea); }
.faq-respuesta { padding: 16px 22px; font-size: 15px; color: var(--gris); text-align: justify; }
.faq-respuesta p { margin-bottom: 10px; }

/* Cabecera de receta */
.page-header .receta-tag {
    display: inline-block;
    font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: #fff; background: var(--verde); padding: 6px 14px; margin-bottom: 18px;
}
.seo-superior { padding-bottom: 0; }

/* ================= CUENTAS B2B ================= */
.cuenta-btn { position: relative; display: inline-flex; align-items: center; color: var(--tinta); }
.cuenta-form-wrap { max-width: 780px; margin: 0 auto; padding: 60px 32px 100px; }
.cuenta-form-wrap.estrecho { max-width: 440px; }
.cuenta-form { background: #fff; border: 1px solid var(--linea); padding: 40px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }
.form-field { display: flex; flex-direction: column; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.form-field input, .form-field select, .form-field textarea {
    padding: 12px 14px; border: 1px solid var(--linea); font-family: 'Inter', sans-serif;
    font-size: 15px; background: var(--fondo); outline: none; transition: border-color 0.2s;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--verde); }
.form-field small { color: var(--gris-claro); font-size: 12px; margin-top: 4px; }
.campo-error { color: #c0392b; font-size: 13px; margin-top: 4px; }
.form-error { background: #fdecea; border: 1px solid #f5c6cb; color: #a5342b; padding: 12px 16px; margin-bottom: 20px; font-size: 14px; }
.cuenta-form .btn-solid { border: none; cursor: pointer; }
.cuenta-alt { margin-top: 20px; font-size: 14px; color: var(--gris); }
.cuenta-alt a { color: var(--verde-osc); border-bottom: 1px solid var(--verde); }

.cuenta-panel { padding: 50px 32px 100px; }
.cuenta-grid { display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: start; }
.cuenta-datos { background: var(--crema); border: 1px solid var(--linea); padding: 30px; }
.cuenta-datos h3, .cuenta-pedidos h3 { font-family: var(--serif); font-weight: 600; font-size: 22px; margin-bottom: 20px; }
.cuenta-datos dl { margin-bottom: 24px; }
.cuenta-datos dt { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gris-claro); margin-top: 14px; }
.cuenta-datos dd { font-size: 15px; color: var(--tinta); }
.cuenta-pedidos-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.cuenta-pedidos-head .btn-solid { padding: 10px 22px; font-size: 14px; }
.sin-pedidos { color: var(--gris); }
.sin-pedidos a, .cuenta-datos .btn-line { color: var(--verde-osc); }
.badge-estado { display: inline-block; padding: 4px 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.estado-pendiente { background: #fff3cd; color: #856404; }
.estado-validado { background: #d4edda; color: #256a34; }
.estado-enviado_erp { background: #d1ecf1; color: #0c5460; }
.estado-servido { background: var(--verde); color: #fff; }
.estado-cancelado { background: #f0f0f0; color: #888; }
.aviso { padding: 14px 18px; margin-bottom: 24px; font-size: 15px; border-left: 4px solid var(--verde); background: var(--crema); }
.aviso-success { border-color: var(--verde); }
.aviso-warning { border-color: #e0a800; background: #fff8e6; }
.aviso-info { border-color: #17a2b8; background: #e8f6f8; }
.checkout-form .btn-solid { border: none; cursor: pointer; margin-right: 12px; }
@media (max-width: 760px) {
    .form-grid { grid-template-columns: 1fr; }
    .cuenta-grid { grid-template-columns: 1fr; }
}

/* ================= 404 PAGE ================= */
.error-page-container {
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 60px 20px;
    background-color: var(--fondo);
}

.error-page-container .error-code {
    font-size: clamp(6rem, 15vw, 10rem);
    margin: 0;
    color: var(--verde);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.05em;
}

.error-page-container .error-title {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    color: var(--tinta);
    margin: 20px 0;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.error-page-container .error-desc {
    font-size: 1.1rem;
    color: var(--gris);
    margin-bottom: 40px;
    line-height: 1.6;
    font-weight: 500;
}

.error-page-btn {
    display: inline-block;
    padding: 16px 32px;
    background-color: var(--verde);
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    border-radius: var(--b-radius, 4px);
    transition: all 0.3s ease;
}

.error-page-btn:hover {
    background-color: var(--verde-osc) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(84, 159, 59, 0.2);
}

/* ═══════════════════════════════════════════════════
   HEADER — estilo Délifrance: beige cálido, elegante
   ═══════════════════════════════════════════════════ */

/* --- Top bar (beige cálido, slim) --- */
.hdr-top {
    background: var(--verde);
    padding: 0.4rem 0;
}
.hdr-top-text {
    font-size: 12.5px;
    color: #fff;
    letter-spacing: 0.01em;
}
.hdr-top-text a {
    color: #fff;
    font-weight: 600;
    transition: color .2s;
}
.hdr-top-text a:hover {
    color: rgba(255,255,255,.7);
}

/* --- Cabecera principal (blanca, espaciosa) --- */
.hdr-main {
    background: #fff;
    padding: 1.3rem 0;
}

.hdr-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #333;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 400;
    transition: color .2s;
}
.hdr-action svg {
    flex-shrink: 0;
}
.hdr-action:hover {
    color: var(--verde);
}

.hdr-badge {
    position: absolute;
    top: -5px;
    right: -12px;
    background: var(--verde);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* --- Navbar (beige + menú + buscador) --- */
.hdr-nav {
    background: #fff;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding: 0;
    position: relative;
}
.hdr-nav .wrap {
    padding-top: 0;
    padding-bottom: 0;
    display: flex; justify-content: space-between; align-items: center;
}
.hdr-top .wrap { display: flex; justify-content: flex-end; align-items: center; }
.hdr-action--solo { padding: 0 8px; }
.hdr-cart { position: relative; }
.drawer-footer-account.con-borde { border-bottom: 1px solid #f0f0f0; }
.drawer-ver-todas-item { margin-top: 15px; border-top: 1px solid #f0f0f0; }
.drawer-ver-todas-link { font-weight: 600; font-size: 14px; margin-top: 15px; }
.icon-ml-10 { margin-left: 10px; }

.favoritos-vacio {
    background: white; padding: 40px; border-radius: 12px;
    text-align: center; border: 1px solid #eaeaea;
}
.favoritos-vacio svg { margin-bottom: 15px; }
.favoritos-vacio h3 { color: #555; font-weight: 500; }
.favoritos-vacio p { color: #888; margin-bottom: 20px; }
.wrap.catalogo-top { padding-top: 5px; }
.filter-btn input[type="radio"] { display: none; }
.productos.sin-borde-top { border-top: none; padding-top: 0; }
.grid-mensaje-vacio { grid-column: 1/-1; text-align: center; color: var(--gris); }
.busqueda-vacia { grid-column: 1/-1; text-align: center; padding: 20px 0; }
.busqueda-vacia .grid-mensaje-vacio { margin-bottom: 24px; }
.busqueda-vacia-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 40px; }
.busqueda-vacia-chip {
    padding: 10px 20px; border: 1px solid var(--linea); background: var(--crema);
    font-family: 'Inter', sans-serif; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.05em; font-size: 13px; color: var(--tinta); text-decoration: none;
    transition: all 0.2s;
}
.busqueda-vacia-chip:hover { background: var(--verde); color: #fff; border-color: var(--verde); }
.busqueda-vacia-productos {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 20px; max-width: 800px; margin: 0 auto;
}
.busqueda-vacia-producto { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: var(--tinta); }
.busqueda-vacia-producto img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; border: 1px solid var(--linea); }
.busqueda-vacia-producto span { font-size: 13px; font-weight: 600; text-align: center; }

/* ================= RUTAS DE REPARTO (página Cobertura) ================= */
.reparto-section { padding: 46px 0; }
.reparto-tabs { margin-top: 10px; }
.reparto-tabs-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.reparto-tab-btn {
    flex: 1 1 160px; padding: 16px 20px; border: 1px solid var(--linea); background: var(--crema);
    font-family: 'Inter', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    font-size: 14px; color: var(--tinta); cursor: pointer; text-align: center; transition: all .2s;
}
.reparto-tab-btn:hover { border-color: var(--verde); }
.reparto-tab-btn.active { background: var(--verde); color: #fff; border-color: var(--verde); }
.reparto-tab-count {
    display: block; font-size: 11px; font-weight: 400; text-transform: none;
    letter-spacing: normal; opacity: .75; margin-top: 4px;
}
.reparto-tab-panel { display: none; }
.reparto-tab-panel.active { display: block; animation: repartoFade .25s ease; }
@keyframes repartoFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.reparto-zonas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.reparto-zona h4 {
    font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--verde-osc); margin-bottom: 8px; font-weight: 700;
}
.reparto-zona p { font-size: 14px; color: var(--tinta); line-height: 1.7; margin: 0; }

/* ================= IMAGEN Y TEXTO LADO A LADO ================= */
.split-section { padding: 46px 0; }
.split-grid { display: flex; align-items: center; gap: 56px; }
.split-reverse { flex-direction: row-reverse; }
.split-media, .split-text { flex: 1 1 0; min-width: 0; }
.split-media { overflow: hidden; }
.split-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.split-media-parallax img { will-change: transform; }
.split-text { max-width: 480px; font-size: 17px; color: var(--gris); }
.split-text p { margin-bottom: 14px; }
.split-text p:last-child { margin-bottom: 0; }
.split-text a { color: var(--verde-osc); border-bottom: 1px solid var(--verde); }
@media (max-width: 860px) {
    .split-grid, .split-reverse { flex-direction: column; gap: 22px; }
    .split-media, .split-text { flex: none; width: 100%; }
    .split-text { max-width: none; }
    .split-media img { aspect-ratio: 16 / 10; }
}

/* ================= BUSCADOR DE POBLACIÓN ================= */
.buscazona-titulo {
    font-family: var(--serif); font-weight: 600; font-size: 28px;
    color: var(--tinta); margin: 0 0 8px;
}
.buscazona-texto { font-size: 17px; color: var(--gris); margin: 0 0 22px; }
.buscazona-caja { position: relative; max-width: 520px; }

.buscazona-campo {
    position: relative; display: flex; align-items: center;
    border: 1px solid var(--linea); border-radius: 12px; background: #fff;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.buscazona-campo:focus-within {
    border-color: var(--verde);
    box-shadow: 0 0 0 3px rgba(84, 159, 59, .14);
}
.buscazona-lupa {
    width: 20px; height: 20px; flex: none; margin-left: 16px;
    fill: none; stroke: var(--gris); stroke-width: 2; stroke-linecap: round;
}
.buscazona-input {
    flex: 1; min-width: 0; border: 0; background: none; outline: none;
    font-family: inherit; font-size: 17px; color: var(--tinta);
    padding: 15px 12px;
}
.buscazona-input::placeholder { color: var(--gris-claro, #9a9a9a); }
/* Safari pinta su propia X en los input de tipo search */
.buscazona-input::-webkit-search-cancel-button { display: none; }
.buscazona-limpiar {
    flex: none; border: 0; background: none; cursor: pointer;
    font-size: 24px; line-height: 1; color: var(--gris);
    padding: 0 16px 0 4px;
}

.buscazona-sugerencias {
    position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px);
    margin: 0; padding: 6px; list-style: none;
    background: #fff; border: 1px solid var(--linea); border-radius: 12px;
    box-shadow: 0 18px 40px rgba(20, 20, 20, .12);
    max-height: 288px; overflow-y: auto;
}
.buscazona-sugerencias li {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 11px 12px; border-radius: 8px; cursor: pointer; outline: none;
}
.buscazona-sugerencias li:hover,
.buscazona-sugerencias li:focus { background: var(--crema); }
.buscazona-ciudad { font-weight: 600; color: var(--tinta); }
.buscazona-comarca { font-size: 13px; color: var(--gris); }

.buscazona-resultado {
    margin-top: 16px; padding: 20px 22px; border-radius: 12px;
    border: 1px solid var(--linea); background: var(--crema);
}
.buscazona-resultado.es-si { border-color: rgba(84, 159, 59, .35); }
.buscazona-veredicto { margin: 0 0 14px; font-size: 17px; color: var(--tinta); }
.buscazona-veredicto b { font-weight: 600; }
.buscazona-dias { display: flex; flex-wrap: wrap; gap: 8px; }
.buscazona-dia {
    font-size: 13px; font-weight: 600; letter-spacing: .02em;
    color: #fff; background: var(--verde);
    padding: 6px 12px; border-radius: 999px;
}
.buscazona-dia-vacio { background: var(--gris); }
.buscazona-extra { margin: 14px 0 0; font-size: 15px; color: var(--gris); line-height: 1.6; }
.buscazona-cta {
    display: inline-block; margin-top: 16px;
    background: var(--verde); color: #fff; font-weight: 600; font-size: 15px;
    padding: 11px 20px; border-radius: 999px; text-decoration: none;
}
.buscazona-cta:hover { background: var(--verde-osc); }

@media (max-width: 640px) {
    .buscazona-titulo { font-size: 24px; }
    .buscazona-texto { font-size: 16px; }
    .buscazona-caja { max-width: none; }
    .buscazona-input { font-size: 16px; }  /* menos de 16 y iOS hace zoom al enfocar */
}

/* ================= FURGONETA ANIMADA (scroll) =================
   Los fotogramas tienen el fondo blanco puro, así que la escena se deja
   en blanco para que el camión flote sin recuadro visible. El color y la
   profundidad vienen del halo cálido detrás del texto. */
.furgo-sticky-wrap { height: 190vh; position: relative; }

/* Sin efecto imán: probado con `scroll-snap` del navegador (atrae desde 300 px,
   sin forma de ajustarlo) y con un imán propio de radio corto. Los dos trababan
   el scroll, así que la sección se recorre libre. */
/* El alto se topa en 800 px: al centrar la composición en toda la pantalla, el
   blanco de arriba crecía con la ventana (174 px en un portátil, 330 en un
   monitor de 1080) y era lo primero que se veía al llegar a la sección. */
.furgo-sticky {
    position: sticky;
    /* Con el tope de 660 px, en pantallas altas la escena se quedaba pegada
       arriba y dejaba todo el vacío debajo. Centrada, el aire se reparte y
       parece intencionado. En pantallas bajas el cálculo da 0 y se ancla arriba. */
    top: max(0px, calc((100vh - 660px) / 2));
    height: 100vh; max-height: 660px;
    display: flex; align-items: center;
    overflow: hidden; background: #fff;
}
/* El texto arranca en la misma columna de lectura que el resto de la página
   (860px centrados), mientras la escena aprovecha el ancho que sobra: llega
   hasta el borde derecho para que el camión se vea lo más grande posible. */
.furgo-inner {
    position: relative; z-index: 1; width: 100%;
    padding-left: max(32px, calc((100% - 860px) / 2));
    padding-right: 0;
    display: grid; grid-template-columns: 0.72fr 1.28fr;
    gap: 44px; align-items: center;
}

/* --- Columna de texto --- */
/* El halo se ancla al texto y nunca sobrepasa su columna: si asomase por
   detrás del canvas se vería el borde recto del fotograma sobre el fondo. */
.furgo-textos { position: relative; }
.furgo-textos::before {
    content: ''; position: absolute; z-index: -1;
    left: -25%; width: 125%; top: 50%; height: 760px;
    transform: translateY(-50%);
    background: radial-gradient(ellipse at center, rgba(84, 159, 59, .11), rgba(84, 159, 59, 0) 65%);
    pointer-events: none;
}
/* Los momentos se apilan en la misma celda de rejilla: así la caja mide
   exactamente lo que ocupa el más alto, sin alturas fijas inventadas que
   metían relleno invisible y empujaban el texto hacia abajo. */
.furgo-momentos { position: relative; display: grid; }
.furgo-momento {
    grid-area: 1 / 1;
    align-self: center;
    opacity: 0; will-change: transform, opacity;
}
/* El primer momento se pinta ya con el CSS, sin esperar al JavaScript: si no,
   el texto más grande de la página tardaría en aparecer y Google lo cuenta
   como página lenta. En cuanto arranca el guión, éste toma el control. */
.furgo-momento.is-activo { opacity: 1; }
/* El antetítulo lleva una rayita delante que crece con el momento activo. */
.furgo-eyebrow {
    display: flex; align-items: center; gap: 12px;
    font-family: 'Inter', sans-serif; font-size: 12px;
    font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
    color: var(--verde-osc); margin-bottom: 18px;
}
.furgo-eyebrow::before {
    content: ''; display: block; height: 1px; width: 28px;
    background: var(--verde); transform-origin: left center;
    transform: scaleX(0); transition: transform .5s cubic-bezier(.22,.61,.36,1) .1s;
}
.furgo-momento.is-activo .furgo-eyebrow::before { transform: scaleX(1); }
.furgo-numero {
    display: block; font-family: var(--serif); font-weight: 600;
    font-size: clamp(64px, 8.4vw, 132px); line-height: .84;
    color: var(--verde); margin-bottom: 14px; letter-spacing: -.03em;
    font-variant-numeric: lining-nums;
}
.furgo-titulo {
    font-family: var(--serif); font-weight: 600;
    font-size: clamp(28px, 3.6vw, 46px); line-height: 1.1;
    color: var(--tinta); margin: 0 0 18px; letter-spacing: -.015em;
    max-width: 13ch;
}
.furgo-texto {
    font-size: 18px; line-height: 1.65; color: var(--gris);
    max-width: 420px; margin: 0;
}

/* --- Indicador de tramos ---
   Anclado al fondo de la pantalla en lugar de colgando del texto: así la
   composición ocupa todo el alto y el hueco de debajo deja de verse vacío. */
/* Va justo debajo del texto, no anclada al fondo de la pantalla: así se lee
   como parte del bloque y no queda un vacío entre medias. */
.furgo-progreso {
    display: flex; align-items: center; gap: 20px;
    margin-top: 30px;
}
.furgo-pasos { display: flex; gap: 10px; width: min(240px, 62%); }
.furgo-paso {
    flex: 1; height: 2px; background: rgba(20, 20, 20, .1);
    overflow: hidden; display: block;
}
.furgo-paso i {
    display: block; height: 100%; background: var(--verde);
    transform: scaleX(0); transform-origin: left center;
}
.furgo-contador {
    font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
    letter-spacing: .1em; color: var(--gris); font-variant-numeric: tabular-nums;
}
.furgo-contador b { color: var(--tinta); font-weight: 700; }

/* --- Escena del camión --- */
.furgo-escena { position: relative; }
/* El tope de alto evita que en monitores muy anchos el fotograma crezca más que
   la propia escena y acabe recortado. Al dibujarse "contenido", la furgoneta
   simplemente deja blanco a los lados, que es invisible sobre fondo blanco. */
.furgo-canvas {
    width: 100%; aspect-ratio: 16 / 9; display: block;
    max-height: min(56vh, 420px); margin-inline: auto;
}
.furgo-suelo {
    position: absolute; left: 14%; right: 14%; bottom: 9%; height: 30px;
    background: radial-gradient(ellipse at center, rgba(20, 20, 20, .18), rgba(20, 20, 20, 0) 70%);
    pointer-events: none;
}

@media (max-width: 900px) {
    .furgo-sticky-wrap { height: 200vh; }
    .furgo-inner {
        grid-template-columns: 1fr; gap: 8px;
        /* Los mismos 32 px de relleno que usa .content-page: la sección va a
           sangre, así que si no se repiten aquí el texto empieza más adentro
           que el resto de la página. */
        padding-left: 32px; padding-right: 32px;
        align-content: center;
    }
    .furgo-escena { order: -1; }
    /* Apilado, el halo quedaría por detrás del fotograma y dibujaría su borde
       recto sobre el fondo; en pantallas pequeñas aporta poco, así que se quita. */
    .furgo-textos::before { display: none; }
    .furgo-titulo { max-width: none; }
    .furgo-texto { font-size: 16px; max-width: none; }
    .furgo-progreso { margin-top: 22px; gap: 16px; }
    .furgo-pasos { width: 55%; }
}
/* Pantallas anchas pero bajas (portátiles pequeños, ventana a media altura):
   la composición encogía hasta rozar la barra de progreso. */
@media (min-width: 901px) and (max-height: 680px) {
    .furgo-numero { font-size: clamp(44px, 5.4vw, 78px); margin-bottom: 8px; }
    .furgo-titulo { font-size: clamp(24px, 2.7vw, 34px); margin-bottom: 12px; }
    .furgo-texto { font-size: 16px; }
    .furgo-eyebrow { margin-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .furgo-momento { transition: none; }
}

.barra-comercial {
    background: var(--verde, #4F8A31); color: #fff; font-size: 13px; padding: 9px 16px;
    display: flex; align-items: center; justify-content: center; gap: 14px;
    flex-wrap: wrap; position: relative; z-index: 1000;
}
.barra-comercial .titulo { font-weight: 700; letter-spacing: .02em; }
.barra-comercial a { color: #fff; text-decoration: underline; font-weight: 600; }
.barra-comercial .salir { opacity: .85; font-weight: 400; }
.favoritos-vacio-btn {
    display: inline-block; padding: 10px 20px; background: var(--verde, #235230);
    color: white; border-radius: 6px; text-decoration: none; font-weight: 600;
}

.hdr-nav-links {
    display: flex;
    align-items: center;
    gap: 0;
}
.hdr-nav-links a {
    font-size: 14px;
    font-weight: 400;
    color: #444;
    text-decoration: none;
    padding: 0.85rem 1.3rem;
    transition: color .2s;
    letter-spacing: 0.01em;
}
.hdr-nav-links > a:first-child,
.hdr-nav-links > .nav-mega:first-child .nav-mega-trigger {
    padding-left: 0;
}
.hdr-nav-links a:hover {
    color: var(--verde);
}

/* ================= MEGAMENÚ ================= */
.nav-mega { position: static; }
.megamenu {
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: #fff;
    border-top: 1px solid var(--linea);
    box-shadow: 0 24px 48px rgba(0,0,0,0.10);
    opacity: 0; visibility: hidden;
    transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    z-index: 300;
}
.nav-mega:hover .megamenu { opacity: 1; visibility: visible; transform: translateY(0); }
.megamenu .mega-cols {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 40px;
    padding: 40px 32px;
    align-items: start;
}
.megamenu .mega-col-title {
    display: block;
    font-size: 14px; font-weight: 700;
    color: var(--tinta);
    padding-bottom: 12px;
    margin-bottom: 10px;
    border-bottom: 2px solid var(--verde);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.megamenu .mega-col-title:hover { color: var(--verde); }
.megamenu .mega-col ul { list-style: none; margin: 0; padding: 0; }
.megamenu .mega-col li a {
    display: block; padding: 6px 0;
    font-size: 14px; color: var(--gris); font-weight: 400;
}
.megamenu .mega-col li a:hover { color: var(--verde); }
.megamenu .mega-verall { color: var(--verde) !important; font-weight: 600; }
@media (max-width: 1024px) {
    .megamenu { display: none; }
}

.hdr-search {
    display: flex;
    align-items: center;
    gap: 8px;
}
.hdr-search input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    color: #888;
    width: 280px;
    font-family: inherit;
    font-style: italic;
    padding: 0.5rem 0;
}
.hdr-search input::placeholder {
    color: #aaa;
    font-style: italic;
}
.hdr-search button {
    background: none;
    border: none;
    cursor: pointer;
    color: #777;
    padding: 0;
    display: flex;
    align-items: center;
    transition: color .2s;
}
.hdr-search button:hover {
    color: var(--verde);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .hdr-search input { width: 180px; }
    .hdr-nav-links a { padding: 0.85rem 0.9rem; font-size: 13px; }
}
@media (max-width: 768px) {
    .hdr-main .wrap { flex-direction: column; gap: 1rem; text-align: center; }
    .hdr-nav .wrap { flex-direction: column; gap: 0.8rem; padding: 0.8rem 0; }
    .hdr-nav-links { flex-wrap: wrap; justify-content: center; }
    .hdr-search { width: 100%; }
    .hdr-search input { width: 100%; }
}

/* --- Dashboard Cliente (Mi Cuenta) --- */
.dashboard-layout {
    display: flex;
    gap: 30px;
    margin: 40px 0;
    align-items: flex-start;
}
.dashboard-sidebar {
    width: 260px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    padding: 20px 0;
    flex-shrink: 0;
}
.dashboard-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    color: var(--tinta);
    text-decoration: none;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: all 0.2s;
}
.dashboard-nav-item:hover {
    background: #f8fafc;
    color: var(--verde);
}
.dashboard-nav-item.active {
    border-left-color: var(--verde);
    color: var(--verde);
    background: #f0fdf4;
}
.dashboard-nav-item svg {
    width: 18px;
    height: 18px;
}
.dashboard-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.dashboard-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    padding: 30px;
}
.dashboard-card-title {
    margin-top: 0;
    font-family: var(--serif);
    font-size: 1.5rem;
    margin-bottom: 25px;
    border-bottom: 1px solid #f1f3f5;
    padding-bottom: 15px;
}
.badge-estado {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}
.estado-pendiente { background: #fef08a; color: #854d0e; }
.estado-en_proceso { background: #bfdbfe; color: #1e3a8a; }
.estado-servido { background: #bbf7d0; color: #166534; }
.estado-cancelado { background: #fecaca; color: #991b1b; }

/* ================= UTILIDADES ================= */
.u-right { text-align: right; }
.u-gris { color: var(--gris); }
.u-gris-claro { color: var(--gris-claro); }
.u-op-80 { opacity: .8; }
.u-nowrap { white-space: nowrap; }

.dashboard-card-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 25px; border-bottom: 1px solid #f1f3f5; padding-bottom: 15px;
}
.dashboard-card-header h2 { margin: 0; font-family: var(--serif); font-size: 1.5rem; }
.btn-sm { padding: 8px 16px; font-size: 14px; }
.table-scroll { overflow-x: auto; }
.pedido-ref-link { color: var(--tinta); font-weight: 600; }
.pedido-fecha-cell { color: var(--gris); }
.pedido-entrega-cell { color: var(--gris); font-size: 13px; }
.pedido-total-cell { text-align: right; font-weight: 700; }
.repetir-form { display: inline-block; margin-left: 10px; }
.repetir-btn { background: none; border: none; color: var(--verde); cursor: pointer; padding: 0; }
.icon-18 { width: 18px; height: 18px; vertical-align: middle; }
.dashboard-empty { color: var(--gris); text-align: center; padding: 40px 0; }
.dashboard-empty a { color: var(--verde-osc); text-decoration: underline; }
.datos-empresa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.dato-label { font-size: 12px; color: var(--gris-claro); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.dato-valor { font-weight: 500; }
.u-center { text-align: center; }

.pedido-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; flex-wrap: wrap; gap: 20px; }
.pedido-volver-link { color: var(--verde-osc); font-weight: 500; text-decoration: none; }
.pedido-repetir-form { margin: 0; }
.pedido-repetir-form .icon-18 { margin-right: 8px; vertical-align: text-bottom; }
.producto-nombre-cell { font-weight: 600; }
.subtotal-cell { text-align: right; font-weight: bold; color: var(--tinta); }
.total-label-cell { text-align: right; padding: 20px 15px; font-size: 1.1rem; color: var(--gris); }
.total-value-cell { text-align: right; padding: 20px 15px; font-size: 1.4rem; color: var(--verde); font-weight: 800; }
.pedido-notas { margin-top: 30px; background: #faf9f6; padding: 20px; border-radius: 8px; border-left: 4px solid var(--verde); }
.pedido-notas h3 { margin-top: 0; font-size: 1.1rem; font-family: var(--serif); }
.pedido-notas p { margin: 0; color: var(--gris); }
.oculto { display: none; }

/* ================= CHECKOUT ================= */
.form-field.espaciado { margin-bottom: 20px; }
.form-field.espaciado-top { margin-top: 24px; }
.codigo-aplicado-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.codigo-aplicado-texto { color: var(--verde-osc, #3d7a29); font-weight: 600; }
.codigo-quitar-link { font-size: 0.85em; color: #888; }
.codigo-form { display: flex; gap: 8px; }
.codigo-input { flex: 1; text-transform: uppercase; }
.subtotal-tachado { text-decoration: line-through; color: #888; font-size: 0.9em; display: block; }
.descuentos-aplicados-box { padding: 15px; background: #fdf5e6; border-left: 4px solid #f39c12; }
.descuentos-aplicados-lista { margin: 5px 0 0 20px; color: #d35400; }
.c-total-label.destacado, .c-subtotal.destacado { color: var(--verde-osc, #3d7a29); }
.btn-toggle-logistica {
    background: var(--verde); border: 1px solid var(--verde); color: #fff;
    padding: 10px 15px; border-radius: 6px; cursor: pointer; width: 100%;
    text-align: left; font-weight: 600; transition: background 0.2s;
}
.opciones-logistica-box {
    background: #fafbfc; padding: 20px; border: 1px solid #f1f3f5;
    border-radius: 8px; margin-bottom: 24px;
}
.toggle-logistica-wrap { margin: 20px 0; }
.zona-aviso-text { color: var(--verde-osc); margin-bottom: 5px; }
.condiciones-nota { margin-top: 14px; font-size: 0.85em; color: #888; }

.u-mt-20 { margin-top: 20px; }
.u-mt-30 { margin-top: 30px; }
.form-help-text { color: var(--gris); display: block; margin-top: 5px; font-size: 0.85em; }
.form-error-text { color: red; font-size: 0.85em; margin-top: 5px; }
.ajustes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.form-modern.compacta { max-width: 400px; }
.form-group.espaciado { margin-bottom: 20px; }
.btn-dark { background-color: #334155; }

/* Estilos extra para los formularios modernos del dashboard */
.form-modern .form-group {
    display: flex;
    flex-direction: column;
}
.form-modern label {
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--tinta);
    font-size: 0.9em;
}
.form-modern input.form-control {
    padding: 12px 15px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 1rem;
    font-family: var(--sans);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form-modern input.form-control:focus {
    border-color: var(--verde);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
    outline: none;
}
.form-modern input.form-control[readonly] {
    background-color: #f8fafc;
    color: #64748b;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .dashboard-layout { flex-direction: column; }
    .dashboard-sidebar { width: 100%; }
}

/* ================= MOBILE MENU DRAWER ================= */
.show-on-mobile { display: none; }
.hide-on-mobile { display: block; }

.hdr-main-wrap { display: flex; justify-content: space-between; align-items: center; width: 100%; flex-wrap: nowrap; }
.hdr-logo img { max-height: 52px; width: auto; }
.hdr-actions-wrapper { display: flex; align-items: center; gap: 2.5rem; flex-wrap: nowrap; }
.mobile-menu-overlay, .mobile-menu-drawer { display: none; }

@media (max-width: 920px) {
    .hide-on-mobile { display: none !important; }
    .show-on-mobile { display: block; }
    button.show-on-mobile { display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: var(--tinta); }
    
    .hdr-actions-wrapper { gap: 12px; }
    .hdr-main-wrap { padding: 12px 15px; flex-direction: row !important; }
    .hdr-logo img { max-height: 38px; }
    
    /* Buscador Móvil igual al de PC */
    .hdr-search-mobile { background: #fff; padding: 10px 15px; border-bottom: 2px solid var(--verde); }
    .hdr-search-m-form { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #ccc; padding-bottom: 5px; width: 100%; }
    .hdr-search-m-form input { border: none; background: transparent; width: 100%; outline: none; font-size: 14px; font-style: italic; color: #888; font-family: inherit; }
    .hdr-search-m-form input::placeholder { color: #aaa; font-style: italic; }
    .hdr-search-m-form button { background: none; border: none; color: var(--verde); padding: 0; display: flex; align-items: center; transition: color 0.2s; cursor: pointer; }
    .hdr-search-m-form button:hover, .hdr-search-m-form button:active { opacity: 0.8; }
    
    /* Drawer Premium */
    .mobile-menu-overlay { display: block; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.4); z-index: 10000; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; backdrop-filter: blur(2px); }
    .mobile-menu-overlay.active { opacity: 1; pointer-events: auto; }
    
    .mobile-menu-drawer { display: flex; position: fixed; top: 0; right: 0; width: 85%; max-width: 350px; height: 100vh; background: #fff; z-index: 10001; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); flex-direction: column; box-shadow: -5px 0 25px rgba(0,0,0,0.1); }
    .mobile-menu-drawer.active { transform: translateX(0); }
    
    .drawer-header { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid #f0f0f0; }
    .drawer-logo { height: 30px; }
    .drawer-close { background: none; border: none; cursor: pointer; color: var(--tinta); }
    
    .drawer-content { flex: 1; overflow-y: auto; background: #fff; display: flex; flex-direction: column; }
    .drawer-submenu { position: absolute; top: 71px; left: 100%; width: 100%; height: calc(100vh - 71px); transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 2; background: #fff; }
    .drawer-submenu.active { left: 0; }
    
    .drawer-submenu-header { display: flex; align-items: center; padding: 20px; background: #fcfdfc; font-weight: 600; font-size: 14px; border-bottom: 1px solid #f0f0f0; cursor: pointer; text-transform: uppercase; }
    .drawer-submenu-header span { margin-left: 15px; }
    
    .drawer-nav-list { list-style: none; padding: 0; margin: 0; flex: 1; overflow-y: auto; }
    .drawer-nav-list li { border-bottom: 1px solid #f9f9f9; }
    
    .drawer-nav-item { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 18px 20px; background: none; border: none; text-align: left; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 500; color: var(--tinta); text-decoration: none; cursor: pointer; }
    .drawer-nav-has-children { font-weight: 600; }
    
    .drawer-footer { margin-top: auto; padding: 20px; background: #fcfdfc; border-top: 1px solid #eaeaea; }
    .drawer-footer-account { padding: 0; display: flex; align-items: center; font-weight: 600; color: var(--tinta); }
    .drawer-footer-account svg { margin-right: 12px; }
    
    .lang-switch-mobile { margin-top: 15px; font-size: 13px; display: flex; gap: 10px; }
    .lang-switch-mobile a { color: var(--gris); text-decoration: none; }
}

/* ================= PRODUCT GRID ================= */
.product-filters { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; padding: 60px 32px 20px; background: #fff; }
.filter-btn { padding: 12px 32px; border: 1px solid var(--linea); background: var(--crema); font-family: 'Inter', sans-serif; font-weight: 600; cursor: pointer; text-transform: uppercase; letter-spacing: 0.05em; font-size: 14px; transition: all 0.2s; border-radius: 0; }
.filter-btn:has(input:checked), .filter-btn:hover { background: var(--verde); color: #fff; border-color: var(--verde); }
.seo-text { text-align: center; color: var(--gris); font-size: 18px; max-width: 800px; margin: 0 auto 40px; min-height: 60px; font-weight: 300; transition: opacity 0.3s; }
.prod-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 24px !important; }
.prod-card .desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; margin-bottom: 12px; }
.landing-header { text-align: center; margin-bottom: 40px; }
.landing-banner { width: 100%; max-height: 400px; object-fit: cover; border-radius: 8px; margin-bottom: 24px; }
.landing-sectorial-wrap { padding-top: 40px; }
.landing-sectorial-cta { text-align: center; margin-top: 40px; }
.landing-sectorial-bottom { margin-top: 60px; }

.aviso-centrado { max-width: 600px; margin: 60px auto; text-align: center; }
.aviso-centrado .dashboard-card { padding: 40px; }
.aviso-centrado .icono {
    width: 60px; height: 60px; color: var(--verde); margin-bottom: 20px;
}
.aviso-centrado h2 { font-family: var(--serif); margin-bottom: 15px; }
.aviso-centrado p { color: var(--gris); margin-bottom: 30px; }

.google-badge {
    display: inline-flex; align-items: center; gap: 8px; font-size: 14px;
    background: #fff; padding: 6px 12px; border-radius: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); margin-top: 15px; font-weight: 500;
}
.stars.google { color: #FBBC05; }
.who.con-foto { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
.who-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.who .fuente { font-size: 12px; color: #888; display: block; }

.horizontal-filters { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); margin-bottom: 30px; font-family: 'Inter', sans-serif; font-size: 14px; }
.filter-dropdowns { display: flex; gap: 24px; align-items: center; }
/* Custom Dropdowns */
.custom-dropdown { position: relative; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: var(--oscuro); cursor: pointer; outline: none; }
.custom-dropdown .dd-header { display: flex; align-items: center; gap: 8px; transition: color 0.2s; }
.custom-dropdown:hover .dd-header { color: var(--verde); }
.custom-dropdown .dd-header::after { content: ''; display: inline-block; width: 10px; height: 6px; background-image: url('data:image/svg+xml;utf8,<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L5 5L9 1" stroke="%23333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>'); background-repeat: no-repeat; background-size: contain; transition: transform 0.2s; }
.custom-dropdown.open .dd-header::after { transform: rotate(180deg); }
.custom-dropdown .dd-list { position: absolute; top: 100%; left: 0; margin-top: 10px; background: #fff; box-shadow: 0 10px 25px rgba(0,0,0,0.1); border-radius: 8px; border: 1px solid var(--linea); min-width: 220px; list-style: none; padding: 8px 0; z-index: 100; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.custom-dropdown.open .dd-list { opacity: 1; visibility: visible; transform: translateY(0); }
.custom-dropdown .dd-list li { padding: 10px 20px; font-weight: 400; color: var(--gris); transition: background 0.15s, color 0.15s; }
.custom-dropdown .dd-list li:hover { background: var(--crema); color: var(--verde); }
.custom-dropdown .dd-list li.selected { font-weight: 600; color: var(--verde); background: rgba(84, 159, 59, 0.05); }
.product-count { color: var(--gris); font-size: 14px; font-weight: 500; }

@media (max-width: 768px) {
    .prod-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
    .product-filters { padding: 20px 20px 10px; gap: 8px; }
    .filter-btn { padding: 8px 16px; font-size: 12px; }
    .horizontal-filters { flex-direction: column; align-items: flex-start; gap: 15px; }
    .filter-dropdowns { width: 100%; justify-content: space-between; }
    .prod-card .prod-visual { padding: 10px; }
    .prod-card .tag { font-size: 9.5px; padding: 4px 8px; top: 8px; left: 8px; }
    .btn-fav { width: 28px; height: 28px; top: 8px; right: 8px; }
    .prod-card .prod-body { padding: 14px 14px 16px; }
    .prod-card h3 { font-size: 15px; line-height: 1.3; margin-bottom: 6px; }
    .prod-header-top { margin-bottom: 8px; }
    .prod-header-top .prod-price { font-size: 16px; }
    .prod-price { font-size: 14px; }
    .prod-price-locked { font-size: 9px; }
    .prod-specs { font-size: 11px; margin-bottom: 10px; }
    .prod-card .prod-link { padding: 10px; font-size: 11px; letter-spacing: 0.6px; }
    .seo-text { font-size: 15px; margin-bottom: 20px; }
}

/* ================= PREMIUM UI ================= */
.sticky-wrapper {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.bottom-nav { display: none; }

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.stat, .cat-card, .prod-card, .why-card {
    animation: fadeInUp 0.6s ease-out forwards;
}

@media (max-width: 768px) {
    body { padding-bottom: 70px; }
    
    .bottom-nav {
        display: block; position: fixed; bottom: 0; left: 0; width: 100%;
        background: #fff; border-top: 1px solid #eaeaea; z-index: 9998;
        padding-bottom: env(safe-area-inset-bottom);
        box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    }
    .bottom-nav-wrap { display: flex; justify-content: space-between; align-items: center; height: 60px; padding: 0 10px; }
    .bottom-nav-item {
        flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
        text-decoration: none; color: #888; font-size: 10px; font-weight: 500; font-family: 'Inter', sans-serif;
    }
    .bottom-nav-item svg { width: 22px; height: 22px; margin-bottom: 4px; transition: color 0.2s; }
    .bottom-nav-item.active { color: var(--verde); }
    .bottom-nav-item.active svg { stroke-width: 2.5; }
    .bottom-nav-badge { position: absolute; top: 4px; right: 20%; background: #e11d48; color: #fff; font-size: 10px; font-weight: bold; border-radius: 50%; min-width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
    
    /* Swipeable carousels (tiras cortas: categorías, "más productos", motivos).
       El catálogo/categoría/favoritos usan .prod-grid a secas y se quedan en
       rejilla de 2 columnas (ver regla más arriba); solo .prod-carousel (tira
       de relacionados en la ficha de producto) se convierte en carrusel. */
    .cat-grid, .prod-carousel, .why-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        gap: 15px !important;
        padding-bottom: 15px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
    }
    .cat-grid::-webkit-scrollbar, .prod-carousel::-webkit-scrollbar, .why-grid::-webkit-scrollbar { display: none; }

    .cat-card, .prod-carousel .prod-card, .why-card {
        scroll-snap-align: start;
        flex: 0 0 80%;
        min-width: 80%;
    }
    
    /* Mover el botón de WhatsApp arriba de la barra inferior */
    .wa-float { bottom: 85px; right: 20px; width: 50px; height: 50px; }
    .wa-float svg { width: 26px; height: 26px; }
    
    /* Reducir tamaño de letra general en móvil */
    p, .hero-text p, .seg-card p, .why-card p {
        font-size: 14px !important;
        line-height: 1.5;
    }
}

/* ================= POPUP DE CAPTACIÓN (newsletter/lead B2B) ================= */
.b2b-modal-overlay, .b2b-modal-overlay * {
  box-sizing: border-box;
}

.b2b-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  padding: 15px;
}

.b2b-modal-overlay.oculto { display: none; }

.b2b-modal-overlay.show {
  opacity: 1;
  visibility: visible;
}

.b2b-modal-container {
  background: var(--fondo, #fcfdfc);
  width: 100%;
  max-width: 420px;
  border-radius: var(--b-radius, 4px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
  position: relative;
  transform: scale(0.95);
  transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  overflow: hidden;
  padding: 35px 40px;
}

.b2b-modal-overlay.show .b2b-modal-container {
  transform: scale(1);
}

.b2b-close-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  background: transparent;
  border: none;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--gris, #5c5f57);
  z-index: 10;
  transition: all 0.2s ease;
}

.b2b-close-btn:hover {
  color: var(--tinta, #141414);
  transform: rotate(90deg);
}

.b2b-modal-content {
  display: flex;
  flex-direction: column;
}

/* Cabecera */
.b2b-form-header {
  text-align: center;
  margin-bottom: 25px;
}

.b2b-logo-img {
  max-height: 45px;
  width: auto;
  margin: 0 auto 15px auto;
  display: block;
}

.b2b-form-header h3 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--tinta, #141414);
  margin: 0 0 5px 0;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.b2b-form-header p {
  font-size: 0.9rem;
  color: var(--gris, #5c5f57);
  margin: 0;
}

.b2b-promo-text {
  color: var(--verde, #549F3B) !important;
  font-weight: 600;
}

.b2b-form-group {
  margin-bottom: 14px;
}

.b2b-form-group label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gris, #5c5f57);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.b2b-form-group input, .b2b-select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--linea, #e5e4de);
  border-radius: var(--b-radius, 4px);
  font-size: 0.9rem;
  color: var(--tinta, #141414);
  background: var(--fondo, #fcfdfc);
  transition: all 0.2s ease;
}

.b2b-form-group input:focus, .b2b-select:focus {
  outline: none;
  border-color: var(--verde, #549F3B);
  box-shadow: 0 0 0 2px rgba(84, 159, 59, 0.15);
}

.b2b-form-group input::placeholder {
  color: #a0aabf;
}

/* Legal & Checkboxes */
.b2b-legal-section {
  margin-top: 5px;
  padding-top: 10px;
}

.b2b-checkbox-label {
  display: flex;
  align-items: flex-start;
  margin-bottom: 8px;
  cursor: pointer;
  position: relative;
}

.b2b-checkbox-label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.b2b-custom-checkbox {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border: 1px solid var(--linea, #e5e4de);
  border-radius: 3px;
  margin-right: 8px;
  margin-top: 2px;
  background: #fff;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.b2b-custom-checkbox svg {
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.2s cubic-bezier(0.19, 1, 0.22, 1);
}

.b2b-checkbox-label input[type="checkbox"]:checked ~ .b2b-custom-checkbox {
  background: var(--verde, #549F3B);
  border-color: var(--verde, #549F3B);
}

.b2b-checkbox-label input[type="checkbox"]:checked ~ .b2b-custom-checkbox svg {
  opacity: 1;
  transform: scale(1);
}

.b2b-checkbox-text {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--gris, #5c5f57);
}

.b2b-checkbox-text a {
  color: var(--tinta, #141414);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--linea, #e5e4de);
  text-underline-offset: 2px;
}

/* Botón y Mensajes */
.b2b-form-actions {
  margin-top: 20px;
}

.b2b-submit-btn {
  width: 100%;
  padding: 12px;
  background: var(--verde, #549F3B);
  color: #ffffff;
  border: none;
  border-radius: var(--b-radius, 4px);
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: all 0.2s;
}

.b2b-submit-btn:hover {
  background: var(--verde-osc, #3d7a29);
}

.b2b-msg {
  margin-top: 10px;
  font-size: 0.85rem;
  text-align: center;
  font-weight: 500;
  padding: 8px;
  border-radius: 4px;
}

.b2b-msg.ok { background: #f0fdf4; color: #16a34a; }
.b2b-msg.error { background: #fef2f2; color: #ef4444; }

/* Responsivo */
@media (max-width: 650px) {
  .b2b-modal-container {
    padding: 25px 20px;
  }
}

/* ---------- Aviso de cookies ---------- */
/* Abajo del todo y estrecho: no tapa la web como los banners de pantalla
   completa, pero se ve. Los dos botones tienen el mismo tamaño a propósito:
   la normativa exige que rechazar sea tan fácil como aceptar. */
.cookies-aviso {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999;
    display: flex; gap: 24px; align-items: center; justify-content: space-between;
    flex-wrap: wrap;
    padding: 18px 24px;
    background: #fff; border-top: 3px solid var(--verde);
    box-shadow: 0 -6px 24px rgba(0,0,0,.10);
}
.cookies-texto { flex: 1 1 420px; min-width: 0; }
.cookies-texto strong { display: block; margin-bottom: 4px; font-size: 15px; }
.cookies-texto p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--gris); }
.cookies-texto a { color: var(--verde); text-decoration: underline; }
.cookies-botones { display: flex; gap: 12px; flex-shrink: 0; }
.cookies-botones button { min-width: 130px; cursor: pointer; }

/* En móvil, el aviso va por encima de la barra inferior de navegación. */
@media (max-width: 700px) {
    .cookies-aviso { bottom: 64px; padding: 16px; gap: 14px; }
    .cookies-botones { width: 100%; }
    .cookies-botones button { flex: 1; min-width: 0; }
}

/* Mientras el aviso de cookies está abierto, el botón de WhatsApp se aparta:
   si no, se pone justo encima de "Aceptar" y el visitante no puede pulsarlo. */
body:has(#aviso-cookies:not([hidden])) .wa-float { bottom: 130px; }
@media (max-width: 700px) {
    body:has(#aviso-cookies:not([hidden])) .wa-float { bottom: 250px; }
}