/* =====================================================================
   SIMBIOSE · capa de orden visual
   Se carga después de styles.css. Mismos colores de marca; más aire,
   mejor contraste y un layout consistente en desktop, tablet y móvil.
   Quitar este archivo del layout devuelve el diseño anterior.
   ===================================================================== */

:root {
    --ui-primary: #46607a;
    --ui-primary-strong: #354b61;
    --ui-accent: #3ea8ab;
    --ui-bg: #fffdf5;
    --ui-surface: #ffffff;
    --ui-ink: #1f2a37;
    --ui-muted: #6b7280;
    --ui-line: #ece7d8;
    --ui-success: #2e9e5b;
    --ui-danger: #d64541;
    --ui-radius: 20px;
    --ui-radius-sm: 12px;

    /* Las tarjetas "hundidas" de la marca, con un borde más limpio y menos gris */
    --shadow-card: 0 -6px 18px rgba(70, 96, 122, 0.14);
}

body {
    color: var(--ui-ink);
    -webkit-font-smoothing: antialiased;
}

/* ---------- Botones y campos ---------- */

.btn-add-cart,
.btn-proceder {
    transition: background-color 0.2s ease, transform 0.1s ease, opacity 0.2s ease;
}

.btn-add-cart:not(:disabled):hover,
a.btn-proceder:hover {
    background: var(--ui-primary-strong);
}

.btn-add-cart:not(:disabled):active,
a.btn-proceder:active {
    transform: scale(0.98);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea,
select {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--ui-primary) !important;
    box-shadow: 0 0 0 3px rgba(70, 96, 122, 0.15);
}

:focus-visible {
    outline: 2px solid var(--ui-primary);
    outline-offset: 2px;
}

/* ---------- Cabecera ---------- */

.header {
    box-shadow: 0 1px 0 var(--ui-line);
}

.info__short { display: none; }

@media screen and (max-width: 1150px) {
    .header__top { padding: 0; }

    .header__top-container {
        padding: 8px 16px !important;
        gap: 12px;
    }

    .header__top-left { min-width: 0; flex: 1; }
    .top__info-item { min-width: 0; }
    .top__info-item i { font-size: 1.2rem !important; }

    /* Un solo renglón con el mensaje de envío */
    .info__title,
    .info__subtitle { display: none !important; }

    .info__short {
        display: block;
        font-size: 0.75rem;
        font-weight: 600;
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .nav { height: 64px; }

    .header__cart i { font-size: 1.35rem !important; }
    .nav__toggle { font-size: 1.5rem !important; }
}

@media screen and (min-width: 768px) and (max-width: 1150px) {
    .nav { height: 72px; }
}

/* ---------- Logos: mismo tamaño y centrados en header y footer ---------- */

:root { --logo-w: 220px; }                                              /* escritorio */

@media screen and (max-width: 1150px) { :root { --logo-w: 170px; } }    /* tablet */
@media screen and (max-width: 767px)  { :root { --logo-w: 140px; } }    /* móvil */

.nav__logo-center img,
.footer__logo img {
    width: var(--logo-w) !important;
    height: auto !important;
    display: block;
}

.footer__logo { display: inline-block; }

/* Escritorio: [enlaces] [logo] [enlaces], con el mismo espacio a ambos lados del logo */
@media screen and (min-width: 1151px) {
    .nav__menu {
        display: grid;
        grid-template-columns: minmax(0, 1fr) calc(var(--logo-w) + 6rem) minmax(0, 1fr);
        align-items: center;
        width: 100%;
        max-width: 1200px;
        margin-inline: auto;
    }

    .nav__list {
        display: flex;
        align-items: center;
        gap: 2.25rem;
        width: auto !important;
    }

    .nav__list li:nth-child(3) { margin-right: 0 !important; }

    .nav__list--izq { grid-column: 1; justify-content: flex-end !important; }
    .nav__list--der { grid-column: 3; justify-content: flex-start !important; }
}

@media screen and (max-width: 1150px) {
    /* El logo del header queda centrado, igual que el del footer */
    .nav { justify-content: flex-end !important; }

    .nav__logo-center {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    /* Menú móvil: los dos grupos seguidos, con el mismo espacio entre enlaces */
    .nav__menu { row-gap: 2.5rem; }
}

/* ---------- Íconos de redes: mismos que el footer y mismo tamaño ---------- */

.nav__social-top { gap: 1.25rem; }

.nav__social-link i,
.footer__social-link {
    font-size: 1.4rem !important;
    line-height: 1;
}

/* ---------- Menú móvil: botón cerrar en la esquina ---------- */

@media screen and (max-width: 1150px) {
    .nav__close {
        position: absolute;
        top: 1.5rem;
        right: 1.5rem;
        font-size: 1.75rem !important;
    }
}

/* ---------- Menú: página actual ---------- */

.nav__link.active-link,
.nav__link.active-link:hover {
    color: var(--ui-accent) !important;
}

/* ---------- Botones flotantes (WhatsApp y subir) ---------- */

@media (max-width: 767px) {
    #wa_button {
        transform: scale(0.72);
        transform-origin: bottom right;
        bottom: 12px;
    }

    .scrollup { right: 16px; }
}

/* ---------- Catálogo ---------- */

.products__card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) {
    .products__card:hover { transform: translateY(-3px); }
}

/* Tablet y móvil: filtros como chips horizontales en vez de una tarjeta larga */
@media screen and (max-width: 968px) {
    .shop__wrapper { gap: 1.25rem; }

    .shop__sidebar { margin-bottom: 0 !important; }

    .filter__card {
        margin-top: 5rem !important; /* el banner tiene margen inferior negativo (-56px) */
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    .filter__main-title { display: none; }

    .filter__group { margin: 0 0 0.75rem; }

    .filter__subtitle {
        margin: 0 0 0.6rem !important;
        font-size: 0.75rem !important;
        color: var(--ui-muted) !important;
        letter-spacing: 1px !important;
    }

    .filter__group {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    /* El subtítulo va sobre los chips */
    .filter__subtitle { flex: 0 0 100%; }

    .filter__item {
        margin: 0 !important;
        gap: 0 !important;
        position: relative;
    }

    .filter__checkbox {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .filter__label {
        display: inline-block;
        padding: 8px 16px;
        border-radius: 999px;
        background: var(--ui-surface);
        border: 1px solid var(--ui-line);
        color: var(--ui-ink) !important;
        font-size: 0.85rem !important;
        font-weight: 600 !important;
        white-space: nowrap;
        transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }

    .filter__checkbox:checked + .filter__label {
        background: var(--ui-primary);
        border-color: var(--ui-primary);
        color: #fff !important;
    }

    .filter__checkbox:focus-visible + .filter__label {
        outline: 2px solid var(--ui-primary);
        outline-offset: 2px;
    }
}

/* ---------- Detalle de producto ---------- */

.product-header h1 { color: var(--ui-ink); line-height: 1.15; }
.price-tag { color: var(--ui-primary); }
.product-description p { color: #4b5563; line-height: 1.6; }

/* Tablet: una sola columna centrada, para que el texto y el selector respiren */
@media (min-width: 768px) and (max-width: 1024px) {
    .product-container {
        display: flex !important;
        flex-direction: column !important;
        max-width: 640px;
        margin: 0 auto;
        gap: 32px !important;
        padding: 0 24px !important;
    }

    .product-visuals,
    .product-content { min-width: 0 !important; width: 100%; }

    .main-card { max-width: 420px; margin: 0 auto; }

    .action-area {
        flex-direction: row !important;
        align-items: center !important;
    }

    .btn-add-cart { flex: 1; width: auto !important; padding: 16px !important; }
}

/* ---------- Carrito ---------- */

.textos-producto h4 { color: var(--ui-ink); font-size: 0.98rem; line-height: 1.3; }
.line-total { white-space: nowrap; color: var(--ui-primary); }
.btn-remove { transition: color 0.2s ease; }
.btn-remove:hover { color: var(--ui-danger); }

.control-cantidad {
    border-color: var(--ui-line);
    border-radius: 999px;
    overflow: hidden;
}

.btn-qty-cart { color: var(--ui-ink); }
.btn-qty-cart:hover { background: #f5f2e8; }

/* Tablet y móvil: cada producto es una fila compacta
   [imagen + nombre + sabores ........ ×]
   [− 1 +                        S/ 00.00] */
@media (max-width: 1024px) {
    .seccion-carrito { padding: 0 16px; }

    .envoltorio-carrito { flex-direction: column; gap: 20px; }

    .columna-izquierda,
    .columna-derecha { width: 100%; flex: none; position: static; }

    .tarjeta-resumen { margin-top: 0 !important; }

    .tabla-productos thead { display: none; }

    .tabla-productos tbody { display: block; }

    .fila-producto {
        display: grid !important;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "info info"
            "qty  precio";
        align-items: center;
        row-gap: 12px;
        padding: 18px 0 !important;
        position: relative;
        border-bottom: 1px solid var(--ui-line);
    }

    .fila-producto:last-child { border-bottom: none; }

    .celda-info { grid-area: info; padding: 0 32px 0 0 !important; }
    .celda-cantidad { grid-area: qty; padding: 0 !important; text-align: left !important; }
    .celda-precio { grid-area: precio; padding: 0 !important; }

    .precio-eliminar {
        width: auto !important;
        margin: 0 !important;
        justify-content: flex-end !important;
    }

    .btn-remove {
        position: absolute !important;
        top: 16px !important;
        right: 0 !important;
    }

    .img-producto { width: 64px; flex-shrink: 0; }
}

/* ---------- Checkout ---------- */

/* El resumen muestra todos los productos; en desktop con un tope cómodo */
.res-right-col [style*="max-height: 200px"] {
    max-height: 45vh !important;
}

@media (max-width: 992px) {
    .res-right-col [style*="max-height: 200px"] {
        max-height: none !important;
        overflow: visible !important;
    }
}

@media (max-width: 768px) {
    /* Con la cabecera compacta, el primer paso queda justo debajo */
    #container-step-1 { margin-top: 82px !important; }
}

/* =====================================================================
   INICIO · secciones nuevas
   ===================================================================== */

/* ---------- Ayuda / preguntas frecuentes ---------- */

.home-ayuda {
    background: var(--ui-primary);
    color: #fff;
    padding: 5rem 0;
}

.home-ayuda__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 3rem;
    align-items: center;
}

.home-ayuda__kicker {
    display: block;
    font-size: 0.95rem;
    opacity: 0.85;
    margin-bottom: 0.5rem;
}

.home-ayuda__titulo {
    font-family: var(--second-font);
    font-weight: 400;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    line-height: 1.15;
    color: #fff;
    margin: 0 0 1rem;
}

.home-ayuda__texto {
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.7;
    margin: 0 0 2rem;
    max-width: 30rem;
}

.home-ayuda__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: 999px;
    background: #fff;
    color: var(--ui-primary);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.home-ayuda__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.home-ayuda__btn--primario {
    background: var(--ui-primary);
    color: #fff;
}

.home-ayuda__card {
    background: #fff;
    color: var(--ui-ink);
    border-radius: 24px;
    padding: 1.5rem 2.25rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

/* Acordeón (inicio y página de preguntas frecuentes) */
.faq-lista__item { border-bottom: 1px solid var(--ui-line); }
.faq-lista__item:last-child { border-bottom: none; }

.faq-lista__pregunta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    padding: 1.35rem 0;
    font-weight: 700;
    font-size: 1rem;
    color: var(--ui-ink);
    cursor: pointer;
    list-style: none;
}

.faq-lista__pregunta::-webkit-details-marker { display: none; }

.faq-lista__icono {
    position: relative;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.faq-lista__icono::before,
.faq-lista__icono::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--ui-primary);
    border-radius: 2px;
    transition: transform 0.25s ease;
}

.faq-lista__icono::after { transform: rotate(90deg); }
.faq-lista__item[open] .faq-lista__icono::after { transform: rotate(0deg); }

.faq-lista__respuesta p {
    margin: 0 0 1.35rem;
    color: #4b5563;
    line-height: 1.7;
}

/* ---------- Página de preguntas frecuentes ---------- */

.faq-page { padding: 11rem 0 5rem; }

.faq-page__container { max-width: 820px; }

.faq-page__head { text-align: center; margin-bottom: 2.5rem; }
.faq-page__head .home-ayuda__kicker { color: var(--ui-muted); opacity: 1; }
.faq-page__head .section__title { margin-bottom: 1rem; }

.faq-page__intro { color: #4b5563; line-height: 1.7; margin: 0; }

.faq-page__card {
    background: #fff;
    border-radius: 24px;
    padding: 1rem 2.25rem;
    border: 1px solid var(--ui-line);
    box-shadow: 0 12px 32px rgba(70, 96, 122, 0.08);
}

.faq-page__contacto {
    text-align: center;
    margin-top: 2.5rem;
}

.faq-page__contacto p { color: var(--ui-muted); margin: 0 0 1rem; }

/* ---------- Instagram ---------- */

.home-ig { padding: 5rem 0; }

.home-ig__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 2.5rem;
    text-align: center;
}

.home-ig__head .section__title { margin: 0; }

.home-ig__handle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--ui-line);
    color: var(--ui-primary);
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.home-ig__handle:hover { background: var(--ui-primary); color: #fff; }
.home-ig__handle i { font-size: 1.2rem; }

.home-ig__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
}

.home-ig__card {
    position: relative;
    aspect-ratio: 9 / 16;
    border-radius: 18px;
    overflow: hidden;
    background: #1f2a37;
    box-shadow: 0 10px 28px rgba(31, 42, 55, 0.18);
}

.home-ig__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.home-ig__producto {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.home-ig__producto:hover { background: #fff; }

.home-ig__producto-img {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    object-fit: contain;
    border-radius: 8px;
    background: var(--ui-bg);
}

.home-ig__producto-info { display: flex; flex-direction: column; min-width: 0; }

.home-ig__producto-nombre {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ui-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-ig__producto-precio {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ui-primary);
}

/* ---------- Responsive de las secciones nuevas ---------- */

@media (max-width: 1024px) {
    .home-ayuda__grid { grid-template-columns: 1fr; gap: 2rem; }
    .home-ayuda__intro { text-align: center; }
    .home-ayuda__texto { margin-inline: auto; }

    /* Tablet: 2 videos por fila */
    .home-ig__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    /* En móvil .container queda sin margen lateral: las secciones nuevas llevan su propio aire */
    .home-ayuda > .container,
    .home-ig > .container,
    .faq-page__container { padding-inline: 16px; }

    .home-ayuda,
    .home-ig { padding: 3.5rem 0; }

    .home-ayuda__card,
    .faq-page__card { padding: 0.5rem 1.25rem; }

    .faq-lista__pregunta { font-size: 0.95rem; padding: 1.1rem 0; }

    .faq-page { padding: 8rem 0 3.5rem; }

    /* Móvil: los videos se deslizan de lado */
    .home-ig__grid {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 12px;
        margin-inline: -16px;
        padding: 0 16px 4px;
        scrollbar-width: none;
    }

    .home-ig__grid::-webkit-scrollbar { display: none; }

    .home-ig__card {
        flex: 0 0 72%;
        scroll-snap-align: center;
    }
}


/* =====================================================================
   INICIO · ritmo entre secciones
   Mismo espacio vertical en todas, sin márgenes negativos, y fondos
   alternados (crema / azul suave de la marca) para separarlas.
   ===================================================================== */

:root {
    --sec-y: 64px;           /* espacio arriba y abajo de cada sección */
    --ui-tint: #edf2f6;
}

@media (max-width: 1024px) { :root { --sec-y: 52px; } }
@media (max-width: 767px)  { :root { --sec-y: 44px; } }

.section_favorite,
.nuestra-esencia-v2,
.promo-section,
.kefir-premium-showcase,
.home-ayuda,
.home-ig,
.home-tiendas,
.home-testimonios,
.sb-author-signature {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: var(--sec-y) !important;
    padding-bottom: var(--sec-y) !important;
}

/* Fondos: todas las secciones en crema #fffdf5; solo "Respondemos tus dudas"
   va en el azul de la marca. Las separa el mismo espacio vertical en todas. */
.section_favorite,
.promo-section,
.nuestra-esencia-v2,
.home-razones-titulo,
.kefir-premium-showcase,
.home-ig,
.home-tiendas,
.home-testimonios { background-color: var(--ui-bg) !important; }

/* "Razones para elegir…" es el título de la sección de beneficios: van juntos */
.home-razones-titulo {
    margin: 0 !important;
    padding: var(--sec-y) 16px 0;
}

.home-razones-titulo .seccion_razones { margin: 0 !important; }
.home-razones-titulo + .kefir-premium-showcase { padding-top: 2.5rem !important; }

/* Títulos de sección con el mismo aire debajo */
.home-ig .section__title { margin-bottom: 0 !important; }

/* =====================================================================
   Espacio antes del footer: el mismo en todas las páginas
   ===================================================================== */

.footer { margin-top: 0 !important; }

main > section:last-of-type {
    margin-bottom: 0 !important;
    padding-bottom: var(--sec-y) !important;
}

@media (max-width: 767px) {
    /* La frase de María & Ignacio no toca los bordes */
    .sb-author-signature { padding-inline: 20px !important; }
}

/* =====================================================================
   INICIO · mascota, tiendas y testimonios
   ===================================================================== */

/* ---------- Vaca en "Respondemos tus dudas": asomada sobre la tarjeta ---------- */

.home-ayuda__card { position: relative; }

.home-ayuda__vaca {
    position: absolute;
    right: 32px;
    bottom: calc(100% - 14px); /* las patas quedan apoyadas en el borde */
    width: 84px;
    height: auto !important;
    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.2));
    animation: vaca-flota 4s ease-in-out infinite;
    transform-origin: bottom center;
    pointer-events: none;
}

@keyframes vaca-flota {
    0%, 100% { transform: rotate(-3deg); }
    50%      { transform: rotate(3deg) translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
    .home-ayuda__vaca { animation: none; }
}

/* Tablet y móvil: espacio sobre la tarjeta para que la vaca no tape el botón */
@media (max-width: 1024px) {
    .home-ayuda__card { margin-top: 64px; }
}

@media (max-width: 767px) {
    .home-ayuda__vaca { width: 68px; right: 20px; }
    .home-ayuda__card { margin-top: 52px; }
}

/* ---------- Tiendas: franja de logos infinita ---------- */

.home-tiendas { overflow: hidden; }

/* Cabecera compartida: título + subtítulo + mismo aire antes del contenido */
.home-seccion__head { text-align: center; margin-bottom: 2.5rem; }
.home-seccion__head .section__title { margin: 0 0 0.75rem !important; }
.home-seccion__sub { color: #4b5563; margin: 0; }
.home-seccion__sub--oculto { visibility: hidden; }

@media (max-width: 767px) {
    .home-seccion__head { padding-inline: 16px; }
}

.home-tiendas__marquee {
    display: flex;
    width: max-content;
    animation: tiendas-desliza 30s linear infinite;
}

.home-tiendas__lista {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0 0.75rem;
    margin: 0;
    list-style: none;
}

.home-tiendas__item img {
    display: block;
    height: 100px !important;  /* los logos vienen en un lienzo 2:1 (800x400) ya equilibrado */
    width: auto !important;
    max-width: none;
    object-fit: contain;
}

@keyframes tiendas-desliza {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (max-width: 767px) {
    .home-tiendas__lista { gap: 1.5rem; padding: 0 0.75rem; }
    .home-tiendas__item img { height: 80px !important; }
}

/* ---------- Testimonios ---------- */


.carrusel {
    position: relative;
    padding: 0 3.5rem;
}

.carrusel__viewport {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 4px 2px 8px;
}

.carrusel__viewport::-webkit-scrollbar { display: none; }

.testimonio {
    flex: 0 0 calc((100% - 3rem) / 3);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--ui-line);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(70, 96, 122, 0.08);
}

.testimonio__cuerpo {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.25rem 1.4rem;
}

.testimonio__estrellas { color: #f5a524; font-size: 0.95rem; letter-spacing: 1px; }

.testimonio__autor {
    display: block;
    margin: 0.5rem 0 0.4rem;
    font-size: 0.95rem;
    color: var(--ui-ink);
}

.testimonio__texto {
    color: #4b5563;
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0 0 0.9rem;
    flex: 1;
}

.testimonio__producto {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 0.8rem;
    border-top: 1px solid var(--ui-line);
    text-decoration: none;
}

.testimonio__producto img {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    object-fit: contain;
    border-radius: 50%;
    background: var(--ui-tint);
    padding: 4px;
}

.testimonio__producto > span { display: flex; flex-direction: column; min-width: 0; }

.testimonio__producto-nombre {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ui-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.testimonio__producto-precio { font-weight: 700; color: var(--ui-primary); font-size: 0.9rem; }

.testimonio__producto:hover .testimonio__producto-nombre { color: var(--ui-primary); }


/* Flechas y puntos */
.carrusel__flecha {
    position: absolute;
    top: calc(50% - 20px);
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--ui-line);
    background: #fff;
    color: var(--ui-primary);
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(70, 96, 122, 0.12);
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
    z-index: 2;
}

.carrusel__flecha:hover { background: var(--ui-primary); color: #fff; }
.carrusel__flecha:active { transform: translateY(-50%) scale(0.94); }
.carrusel__flecha--prev { left: 0; }
.carrusel__flecha--next { right: 0; }

.carrusel__puntos {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 1.5rem;
}

.carrusel__punto {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: #cfd8e0;
    cursor: pointer;
    transition: width 0.25s ease, background-color 0.25s ease;
}

.carrusel__punto.is-activo { width: 24px; background: var(--ui-primary); }

.carrusel--sin-controles .carrusel__flecha,
.carrusel--sin-controles .carrusel__puntos { display: none; }

/* Tablet: 2 testimonios por vez; móvil: 1 */
@media (max-width: 1024px) {
    .testimonio { flex-basis: calc((100% - 1.5rem) / 2); }
}

@media (max-width: 767px) {
    .home-testimonios > .container { padding-inline: 16px; }

    .carrusel { padding: 0; }

    .testimonio { flex-basis: 100%; }
    .testimonio__cuerpo { padding: 1.25rem; }

    /* Flechas pegadas a los bordes de la tarjeta */
    .carrusel__flecha {
        width: 38px;
        height: 38px;
        font-size: 1.3rem;
    }

    .carrusel__flecha--prev { left: -6px; }
    .carrusel__flecha--next { right: -6px; }
}

/* =====================================================================
   INICIO · carrusel de botellas (vitrina estilo Lokki)
   Las botellas se paran sobre una franja de color; se arrastra o se usa
   con las flechas; al pasar el mouse la botella crece un poco.
   ===================================================================== */

:root {
    --gama-alto: 255px;          /* alto del área de la botella */
    --gama-franja: var(--ui-tint); /* franja sobre la que se paran: mismo azul suave del resto */
}

@media (max-width: 1024px) { :root { --gama-alto: 215px; } }
@media (max-width: 767px)  { :root { --gama-alto: 180px; } }

.home-gama { padding-bottom: 0 !important; }

.home-gama__slider {
    position: relative;
    /* La franja empieza a media altura de las botellas y contiene los nombres */
    background: linear-gradient(transparent calc(var(--gama-alto) * 0.62), var(--gama-franja) calc(var(--gama-alto) * 0.62));
    padding-bottom: var(--sec-y);
}

.home-gama__slider .splide__track {
    overflow: visible;
    margin: 0 !important;   /* una regla global da 130px arriba y 50px abajo a todo Splide */
}
.home-gama__slider .splide__slide { position: relative; }
.home-gama__slider .splide__slide:hover { z-index: 2; }

.home-gama__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    padding: 0 0.5rem;
}

.home-gama__foto {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: var(--gama-alto);
}

.home-gama__img {
    max-height: 100% !important;
    max-width: 100%;
    width: auto !important;
    height: auto;
    object-fit: contain;
    transform-origin: bottom center;
    transition: transform 0.25s ease;
    filter: drop-shadow(0 10px 12px rgba(31, 42, 55, 0.12));
}

.home-gama__item:hover .home-gama__img { transform: scale(1.08); }

.home-gama__nombre {
    margin-top: 1.1rem;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ui-ink);
    max-width: 16ch;
}

.home-gama__precio {
    margin-top: 0.25rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ui-primary);
}

/* Flechas: círculos azules de la marca, sobre las botellas */
.home-gama__slider .splide__arrow {
    width: 46px;
    height: 46px;
    top: calc(var(--gama-alto) / 2);
    background: var(--ui-primary);
    opacity: 1;
    box-shadow: 0 6px 16px rgba(31, 42, 55, 0.2);
    transition: background-color 0.2s ease, transform 0.15s ease;
}

.home-gama__slider .splide__arrow svg { fill: #fff; width: 16px; height: 16px; }
.home-gama__slider .splide__arrow:hover:not(:disabled) { background: var(--ui-primary-strong); opacity: 1; }
.home-gama__slider .splide__arrow--prev { left: max(16px, calc((100% - 1120px) / 2 - 8px)); }
.home-gama__slider .splide__arrow--next { right: max(16px, calc((100% - 1120px) / 2 - 8px)); }

@media (max-width: 767px) {
    .home-gama__slider .splide__arrow { width: 38px; height: 38px; }
    .home-gama__slider .splide__arrow--prev { left: 8px; }
    .home-gama__slider .splide__arrow--next { right: 8px; }
    .home-gama__nombre { font-size: 0.8rem; }
}

/* =====================================================================
   Modal de anuncio del inicio
   Va por encima de la cabecera, entra siempre en la pantalla y la X
   queda dentro de la tarjeta (antes chocaba con el header).
   ===================================================================== */

.modal-overlay-custom {
    z-index: 100000030 !important;   /* sobre el header (100000000) */
    padding: 16px !important;
}

.modal-content-custom {
    display: flex;
    flex-direction: column;
    max-width: 460px !important;
    width: 100%;
    max-height: calc(100dvh - 32px);
    border-radius: 24px !important;
    background: #fff;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.modal-image-container {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    background: #fff;
}

.modal-image-container a { display: flex; width: 100%; }

.modal-image-container img {
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    height: auto !important;
    max-height: calc(100dvh - 32px - 44px);   /* deja lugar a la franja inferior */
    object-fit: contain;
}

.modal-footer-custom {
    flex-shrink: 0;
    border-radius: 0 !important;
    padding: 12px 16px !important;
}

/* X: círculo blanco dentro de la esquina superior derecha */
.modal-close-custom {
    top: 12px !important;
    right: 12px !important;
    margin: 0 !important;
    z-index: 2;
    width: 38px;
    height: 38px;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.modal-close-custom svg { width: 20px; height: 20px; }
.modal-close-custom svg line { stroke: var(--ui-ink); stroke-width: 2.5; }

/* =====================================================================
   Banner principal y carrusel de promociones
   ===================================================================== */

/* El banner quedaba con 50px sueltos debajo (los puntos van dentro de la imagen) */
#hero-pc .splide__track,
#hero-mob .splide__track { margin-bottom: 0 !important; }

/* Promociones: 3 tarjetas a la vez en escritorio, 2 en tablet, 1 en móvil */
.carrusel--promos .promo__card {
    flex: 0 0 calc((100% - 3rem) / 3);
    min-width: 0 !important;
    scroll-snap-align: start;
    margin: 0 !important;
}

.carrusel--promos .promo__card:hover { transform: none; }

@media (max-width: 1024px) {
    .carrusel--promos .promo__card { flex-basis: calc((100% - 1.5rem) / 2); }
}

@media (max-width: 767px) {
    .promo-section > .container { padding-inline: 16px; }
    .carrusel--promos .promo__card { flex-basis: 100%; }
}

/* ---------- Banner principal: flechas a los costados y puntos debajo ----------
   Mismo diseño que los demás carruseles: círculo blanco con ícono azul y
   puntos en forma de píldora. */

.smb-main-hero-wrapper .splide__track { position: relative; }

.smb-main-hero-wrapper .splide__arrow {
    width: 44px;
    height: 44px;
    top: 50%;                         /* las flechas están dentro del área de la imagen */
    background: #fff;
    color: var(--ui-primary);
    font-size: 1.5rem;
    z-index: 2;
    opacity: 1;
    border: 1px solid var(--ui-line);
    box-shadow: 0 6px 16px rgba(70, 96, 122, 0.15);
    transition: background-color 0.2s ease;
}

.smb-main-hero-wrapper .splide__arrow:hover:not(:disabled) { background: var(--ui-primary); color: #fff; opacity: 1; }
.smb-main-hero-wrapper .splide__arrow--prev { left: 24px; }
.smb-main-hero-wrapper .splide__arrow--next { right: 24px; }

.smb-main-hero-wrapper .splide__pagination {
    position: static !important;
    transform: none !important;
    padding: 16px 0 0 !important;
    gap: 8px;
}

.smb-main-hero-wrapper .splide__pagination li { line-height: 0; }

.smb-main-hero-wrapper .splide__pagination__page {
    width: 8px;
    height: 8px;
    margin: 0 !important;
    border-radius: 999px;
    background: #cfd8e0 !important;
    opacity: 1;
    transform: none !important;
    transition: width 0.25s ease, background-color 0.25s ease;
}

.smb-main-hero-wrapper .splide__pagination__page.is-active {
    width: 24px;
    background: var(--ui-primary) !important;
}

@media (max-width: 767px) {
    .smb-main-hero-wrapper .splide__arrow { width: 36px; height: 36px; }
    .smb-main-hero-wrapper .splide__arrow--prev { left: 10px; }
    .smb-main-hero-wrapper .splide__arrow--next { right: 10px; }
}

/* =====================================================================
   Banner principal con título, texto y botón
   Escritorio/tablet: el texto va sobre la mitad libre de la imagen.
   Móvil: imagen arriba (recortada al producto) y texto debajo.
   ===================================================================== */

.hero__slide { position: relative; }

.hero__img {
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1933 / 814;
    object-fit: cover;
}

.hero__contenido {
    position: absolute;
    top: 50%;
    right: 6%;
    transform: translateY(-50%);
    width: min(42%, 540px);
    color: var(--ui-ink);
}

.hero__etiqueta {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--ui-primary);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.hero__titulo {
    font-family: var(--second-font);
    font-weight: 400;
    font-size: var(--fs-display);
    line-height: 1.08;
    color: var(--ui-primary);
    margin: 1rem 0 0.75rem;
}

.hero__texto {
    font-size: var(--fs-texto) !important;
    line-height: 1.55;
    color: #374151;
    margin: 0 0 1.75rem;
    max-width: 32ch;
}

.hero__boton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 15px 32px;
    border-radius: 999px;
    background: var(--ui-primary);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(31, 42, 55, 0.2);
    transition: transform 0.15s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.hero__boton i { font-size: 1.2rem; }

.hero__boton:hover {
    transform: translateY(-2px);
    background: var(--ui-primary-strong);
    box-shadow: 0 14px 28px rgba(31, 42, 55, 0.25);
}

/* Imagen oscura: texto blanco y botón blanco */
.hero__slide--oscuro .hero__titulo,
.hero__slide--oscuro .hero__texto { color: #fff; }
.hero__slide--oscuro .hero__etiqueta { background: #fff; color: var(--ui-primary); }
.hero__slide--oscuro .hero__boton { background: #fff; color: var(--ui-primary); }
.hero__slide--oscuro .hero__boton:hover { background: #eef3f7; }

@media (max-width: 1024px) {
    .hero__contenido { right: 4%; width: 48%; }
    .hero__texto { margin-bottom: 1.25rem; }
    .hero__boton { padding: 12px 24px; font-size: 0.9rem; }
}

/* Móvil: imagen recortada al producto y el texto debajo */
@media (max-width: 767px) {
    .hero__img {
        aspect-ratio: 4 / 3;
        object-position: 22% center;
    }

    .hero__contenido {
        position: static;
        transform: none;
        width: auto;
        padding: 1.5rem 20px 0.5rem;
        text-align: center;
    }

    .hero__texto { margin: 0 auto 1.25rem; }
    .hero__slide--oscuro .hero__contenido { background: var(--ui-bg); }
    .hero__slide--oscuro .hero__titulo { color: var(--ui-primary); }
    .hero__slide--oscuro .hero__texto { color: #374151; }
    .hero__slide--oscuro .hero__etiqueta { background: var(--ui-primary); color: #fff; }
    .hero__slide--oscuro .hero__boton { background: var(--ui-primary); color: #fff; }

    /* Flechas centradas sobre la imagen (alto = 75vw) */
    #hero .splide__arrow { top: 37.5vw; }
}

/* =====================================================================
   Loader: logo de la marca con burbujas de fermentación
   Las burbujas brotan de la "o" del logo (que ya tiene burbujitas)
   y suben desvaneciéndose, cada una a su ritmo.
   ===================================================================== */

.loader__spinner { display: none !important; }

.loader__marca {
    position: relative;
    width: 190px;
    margin-bottom: 18px;
}

.loader__logo {
    display: block;
    width: 100% !important;
    height: auto !important;
    animation: loader-respira 2.1s ease-in-out infinite;
}

.loader__burbuja {
    position: absolute;
    bottom: 72%;                     /* a la altura de las burbujitas del logo */
    left: var(--x);
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    border: 2px solid var(--ui-primary);
    background: rgba(255, 255, 255, 0.7);
    opacity: 0;
    animation: loader-brotar 2.1s ease-out infinite;
    animation-delay: var(--d);
}

/* Cada burbuja sube, se desvía un poco hacia un lado y se desvanece */
@keyframes loader-brotar {
    0%   { opacity: 0; transform: translate(-50%, 0) scale(0.3); }
    15%  { opacity: 1; }
    100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), -80px) scale(1); }
}

/* El logo "respira" suavemente mientras carga */
@keyframes loader-respira {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
    .loader__logo { animation: none; }
    .loader__burbuja { animation-duration: 4s; }
}

/* ---------- Banner: colores que combinan con cada imagen ---------- */

/* Golden Goat: tonos cúrcuma sobre el fondo crema */
.hero__slide--dorado .hero__titulo { color: #9a5514; }
.hero__slide--dorado .hero__texto { color: #5c4630; }
.hero__slide--dorado .hero__etiqueta { background: #c7741c; }
.hero__slide--dorado .hero__boton { background: #b3651a; box-shadow: 0 10px 24px rgba(154, 85, 20, 0.28); }
.hero__slide--dorado .hero__boton:hover { background: #914f12; }

/* Coco: verde hoja sobre el fondo menta */
.hero__slide--coco .hero__titulo { color: #1d5a4b; }
.hero__slide--coco .hero__texto { color: #2d4a43; }
.hero__slide--coco .hero__etiqueta { background: #2f8570; }
.hero__slide--coco .hero__boton { background: #2a7a66; box-shadow: 0 10px 24px rgba(29, 90, 75, 0.28); }
.hero__slide--coco .hero__boton:hover { background: #1f5f4f; }

/* Puntos pegados debajo del banner (una regla global da 50px bajo todo Splide) */
#hero .splide__track { margin-bottom: 0 !important; }
#hero .splide__pagination { padding-top: 14px !important; }

/* =====================================================================
   Escala tipográfica única para toda la web
   Mismo tamaño para cada tipo de texto en todas las páginas:
   · display: títulos de los banners
   · título:  títulos de sección y de página (incluye el nombre del producto)
   · texto:   párrafos
   · pequeño: textos secundarios de tarjetas
   ===================================================================== */

:root {
    --fs-titulo: clamp(1.75rem, 3.125vw, 2.5rem);   /* 28px en móvil → 40px en escritorio */
    --fs-display: var(--fs-titulo);                 /* los banners usan el mismo tamaño que los títulos */
    --fs-subtitulo: 1.3rem;
    --fs-texto: 1rem;
    --fs-pequeno: 0.875rem;
}

@media (max-width: 767px) {
    :root {
        --fs-subtitulo: 1.15rem;
        --fs-texto: 0.95rem;
    }
}

/* La clase repetida le da más peso que reglas antiguas como ".trust .section__title" */
.section__title,
main .section__title.section__title,
.home-ayuda__titulo,
.product-header h1 {
    font-size: var(--fs-titulo) !important;
    line-height: 1.15 !important;
}

main p,
main p.sb-description {
    font-size: var(--fs-texto) !important;
    line-height: 1.65;
}

/* Textos que por diseño son secundarios (tarjetas, precios, avisos) */
main .testimonio__texto,
main .trust__description,
main .texto-promociones,
main .pack-hint,
main .pack-aviso,
main .home-gama__nombre,
main .faq-page__contacto p,
main .products__card p,
main .etiqueta-categoria {
    font-size: var(--fs-pequeno) !important;
}

/* Subtítulos de formularios y bloques internos */
main .contact__title-form {
    font-size: var(--fs-subtitulo) !important;
}

/* Loader: solo el logo y las burbujas */
.loader__text { display: none !important; }

/* =====================================================================
   Tarjetas de testimonios y promociones con el diseño de "Razones":
   fondo crema, esquinas de 20px, sombra interior azulada y una
   etiqueta tipo píldora montada sobre el borde superior.
   ===================================================================== */

:root { --tarjeta-etiqueta: #5b7c99; }

/* Espacio arriba para que la etiqueta que sobresale no se corte */
.carrusel--promos .carrusel__viewport { padding-top: 22px; }
.home-testimonios .carrusel__viewport { padding-top: 8px; padding-inline: 4px; }

.testimonio,
.carrusel--promos .promo__card {
    position: relative;
    overflow: visible !important;
    background: var(--ui-bg) !important;
    border: none !important;
    border-radius: 20px !important;
    box-shadow: inset 0 -6px 18px rgba(70, 96, 122, 0.14) !important;
}

/* Testimonios */
.testimonio__cuerpo { padding: 1.4rem 1.4rem 1.25rem; }

.testimonio__estrellas { margin-bottom: 0.1rem; }

/* Sin esto, un nombre de producto largo (sin salto de línea) ensancha la
   tarjeta y la última del carrusel queda cortada */
.testimonio { min-width: 0; }

.testimonio__autor {
    font-weight: 800;
    color: #222;
    margin-top: 0.25rem;
}

.testimonio__producto { border-top-color: rgba(70, 96, 122, 0.12); }

.carrusel--promos .products_price { margin-top: 0 !important; }

/* =====================================================================
   Footer
   Logo al centro; debajo: frase de los fundadores + redes · Enlaces ·
   Atención al cliente · Libro de reclamaciones. Burbujas de fermentación
   suben despacio por el fondo, como en el loader.
   ===================================================================== */

.footer-nuevo {
    position: relative;
    overflow: hidden;
    background: var(--ui-primary) !important;
    color: #fff;
    padding: 4rem 0 0 !important;
}

.footer-nuevo__contenido { position: relative; z-index: 1; }

.footer-nuevo__logo {
    display: block !important;
    width: max-content;
    margin: 0 auto 3rem;
}

.footer-nuevo__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.1fr) auto;
    gap: 3rem;
    align-items: start;
    padding-bottom: 3rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

/* Frase */
.footer-nuevo__frase {
    position: relative;
    margin: 0;
    padding-left: 2.25rem;
    font-size: 1.05rem;
    font-style: italic;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.92);
}

.footer-nuevo__frase::before {
    content: "\201C";
    position: absolute;
    left: 0;
    top: -0.9rem;
    font-family: var(--second-font);
    font-size: 3.5rem;
    font-style: normal;
    line-height: 1;
    color: rgba(255, 255, 255, 0.35);
}

.footer-nuevo__firma {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 1rem 0 1.75rem 2.25rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
}

.footer-nuevo__firma::before {
    content: "";
    width: 28px;
    height: 2px;
    background: rgba(255, 255, 255, 0.5);
}

/* Redes */
.footer-nuevo__redes {
    display: flex;
    gap: 10px;
    margin-left: 2.25rem;
}

.footer-nuevo__redes a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #fff;
    background: #fff;
    color: var(--ui-primary) !important;
    font-size: 1.15rem;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.footer-nuevo__redes a:hover {
    background: transparent;
    color: #fff !important;
    transform: translateY(-3px);
}

/* Columnas de enlaces */
.footer-nuevo__titulo {
    position: relative;
    margin: 0 0 1.25rem;
    padding-bottom: 0.75rem;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
}

.footer-nuevo__titulo::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 24px;
    height: 2px;
    border-radius: 2px;
    background: var(--ui-accent);
}

.footer-nuevo__lista {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-nuevo__lista a {
    position: relative;
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 0.95rem;
    text-decoration: none;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

/* Al pasar el mouse aparece una burbujita y el enlace se desplaza */
.footer-nuevo__lista a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ui-accent);
    opacity: 0;
    transform: translateY(-50%) scale(0);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.footer-nuevo__lista a:hover { color: #fff !important; padding-left: 14px; }
.footer-nuevo__lista a:hover::before { opacity: 1; transform: translateY(-50%) scale(1); }

/* Libro de reclamaciones */
.footer-nuevo__libro {
    display: block;
    padding: 1rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.footer-nuevo__libro:hover { background: rgba(255, 255, 255, 0.14); transform: translateY(-3px); }

.footer-nuevo__libro img {
    display: block;
    width: 130px !important;
    height: auto !important;
}

/* Barra inferior */
/* Copyright y "Designed by + logo" en una sola fila, centrados */
.footer-nuevo__base {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem 1.25rem;
    padding: 1.5rem 0 1.75rem;
    text-align: center;
}

.footer-nuevo__credito {
    padding-left: 1.25rem;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
}

/* Si no entran en una fila (móvil), el separador sobra */
@media (max-width: 767px) {
    .footer-nuevo__credito { padding-left: 0; border-left: none; }
}

.footer-nuevo__copy {
    margin: 0;
    font-size: 0.8rem !important;
    color: rgba(255, 255, 255, 0.7);
}

.footer-nuevo__credito {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff !important;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.footer-nuevo__credito:hover { opacity: 0.85; }

/* Logo de Summer Code en blanco (el filtro pasa todo el logo a blanco) */
.footer-nuevo__credito img {
    height: 1rem !important;   /* proporcionado al texto de 0.8rem */
    width: auto !important;
    display: block;
    filter: brightness(0) invert(1);
}

/* Burbujas del fondo */
.footer-nuevo__burbujas { position: absolute; inset: 0; pointer-events: none; }

.footer-nuevo__burbujas span {
    position: absolute;
    bottom: -30px;
    left: var(--x);
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.04);
    animation: footer-burbuja var(--t) linear infinite;
    animation-delay: var(--d);
}

@keyframes footer-burbuja {
    0%   { transform: translate(0, 0); opacity: 0; }
    10%  { opacity: 1; }
    50%  { transform: translate(12px, -50vh); }
    100% { transform: translate(-8px, -110vh); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .footer-nuevo__burbujas span { animation: none; opacity: 0.5; bottom: 20%; }
}

/* Tablet: frase arriba a lo ancho, las columnas debajo */
@media (max-width: 1024px) {
    .footer-nuevo__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2.5rem 2rem;
    }

    .footer-nuevo__col--frase { grid-column: 1 / -1; max-width: 640px; margin: 0 auto; text-align: left; }

    /* En tablet .container queda sin margen lateral */
    .footer-nuevo__contenido { padding-inline: 32px; }
}

/* Móvil: todo en una columna y centrado */
@media (max-width: 767px) {
    .footer-nuevo { padding-top: 3rem !important; }
    .footer-nuevo__contenido { padding-inline: 20px; }
    .footer-nuevo__logo { margin-bottom: 2.25rem; }

    .footer-nuevo__grid {
        grid-template-columns: 1fr;
        gap: 2.25rem;
        text-align: center;
    }

    .footer-nuevo__frase { padding: 1.75rem 0 0; font-size: 1rem; text-align: center; }
    .footer-nuevo__frase::before { left: 50%; transform: translateX(-50%); top: -0.6rem; }
    .footer-nuevo__firma { justify-content: center; margin: 1rem 0 1.5rem; }
    .footer-nuevo__redes { justify-content: center; margin-left: 0; }

    .footer-nuevo__titulo::after { left: 50%; transform: translateX(-50%); }
    .footer-nuevo__lista { align-items: center; }
    .footer-nuevo__lista a:hover { padding-left: 0; }
    .footer-nuevo__lista a::before { display: none; }

    .footer-nuevo__col--libro { display: flex; justify-content: center; }

}

/* Texto de las promos alineado a la izquierda (justificado dejaba huecos) */
.carrusel--promos .texto-promociones { text-align: left !important; }

/* Los números de las promos ("20%", "2x32") con el mismo tamaño que los títulos */
.carrusel--promos .products_price { font-size: var(--fs-titulo) !important; line-height: 1.1 !important; }

/* ---------- "Ciencia y sabiduría": foto e íconos más compactos ---------- */

.foto-fundadores {
    width: 100%;
    max-width: 380px !important;
    height: auto !important;
    margin-inline: auto;
    display: block;
}

/* La columna mide lo mismo que la foto, así la etiqueta "+4 años" queda pegada a ella */
.esencia-imagen {
    position: relative;
    width: fit-content !important;
    max-width: 100%;
    margin-inline: auto;
    flex: 0 0 auto !important;
}

.stat-icon-wrapper { height: auto !important; min-height: 0 !important; margin-bottom: 0.5rem; }

.stat-icon-wrapper img {
    width: 64px !important;
    height: 64px !important;
    object-fit: contain;
    margin: 0 auto !important;   /* el primer ícono traía un margen de 20px en línea */
}

@media (max-width: 767px) {
    .foto-fundadores { max-width: 260px !important; }
    .stat-icon-wrapper img { width: 52px !important; height: 52px !important; }
}

@media (max-width: 767px) {
    /* La etiqueta "+4 años" pequeña, en la esquina de la foto */
    .badge-experiencia {
        width: auto !important;
        max-width: 70% !important;
        left: -8px !important;
        right: auto !important;
        top: 12px !important;
        padding: 8px 14px !important;
        text-align: left !important;
    }

    .badge-experiencia .numero { font-size: 1.3rem !important; line-height: 1.1; }
    .badge-experiencia p { font-size: 0.72rem !important; margin: 0 !important; }
}

/* Promociones: sin etiqueta sobre el borde; "PROMO" vuelve a su texto turquesa original */
.carrusel--promos .carrusel__viewport { padding-top: 8px; }
.carrusel--promos .promo__card { padding: 1.25rem !important; }

/* ---------- "Ciencia y sabiduría": foto y texto más juntos, KPI y etiqueta compactos ---------- */

@media (min-width: 1025px) {
    .container-esencia {
        grid-template-columns: auto minmax(0, 1fr) !important;   /* la columna de la foto mide lo que la foto */
        gap: 3rem !important;
        max-width: 1000px !important;
        margin-inline: auto !important;
    }
}

.stat-number { font-size: 1.75rem !important; line-height: 1.1 !important; }
.stat-label { font-size: 0.8rem !important; }

.stat-icon-wrapper img {
    width: 48px !important;
    height: 48px !important;
}

.badge-experiencia {
    width: auto !important;
    padding: 12px 18px !important;
    border-radius: 14px !important;
}

.badge-experiencia .numero { font-size: 1.4rem !important; line-height: 1.1 !important; }
.badge-experiencia p { font-size: 0.8rem !important; margin: 0 !important; }

/* KPI de "Ciencia y sabiduría": juntos y alineados a la izquierda con el texto */
.simbiose-stats-container {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 2.5rem !important;
    width: 100%;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

.simbiose-stat-item {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.simbiose-stat-item .stat-icon-wrapper { justify-content: flex-start !important; width: auto !important; }
.simbiose-stat-item .stat-icon-wrapper img { margin: 0 !important; }

/* Móvil: centrados, como el resto del bloque */
@media (max-width: 767px) {
    .simbiose-stats-container {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.75rem !important;
    }
    .simbiose-stat-item { align-items: center !important; text-align: center !important; }
    .simbiose-stat-item .stat-icon-wrapper { justify-content: center !important; }
}

/* =====================================================================
   Conócenos · "Confiar en Simbiose": carrusel solo en móvil (puntos, sin flechas)
   En tablet y escritorio se mantiene la grilla de tarjetas.
   ===================================================================== */

@media (max-width: 767px) {
    .trust__container {
        display: flex !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        gap: 16px !important;
        padding: 56px 4px 10px;      /* el círculo del ícono sobresale por arriba de la tarjeta */
        margin-top: 2rem !important;
        margin-bottom: 0 !important;
        align-items: stretch;
    }

    .trust__container::-webkit-scrollbar { display: none; }

    .trust__card {
        flex: 0 0 100%;
        min-width: 0;
        scroll-snap-align: start;
    }

    .trust__card:hover { transform: none; }

    .trust__carrusel .carrusel__puntos { margin-top: 1rem; }
}

/* Fuera de móvil no hay carrusel: los puntos no se muestran */
@media (min-width: 768px) {
    .trust__carrusel .carrusel__puntos { display: none; }
}

@media (max-width: 1023px) {
    /* La sección de tarjetas traía margin-bottom: -50px y subía el título de
       "El camino de Simbiose" encima de los puntos del carrusel */
    .trust.section {
        margin-bottom: 0 !important;
        padding-bottom: var(--sec-y) !important;
    }

    .timeline-slider-section { padding-top: 0.5rem !important; }
}

/* =====================================================================
   Móvil · carruseles solo con puntos, Instagram en 2x2 y "Razones" en carrusel
   ===================================================================== */

@media (max-width: 767px) {
    /* Promociones y testimonios: sin flechas, solo puntos */
    .carrusel--promos .carrusel__flecha,
    .home-testimonios .carrusel__flecha { display: none !important; }

    /* Instagram: 2 filas de 2 videos */
    .home-ig__grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        overflow: visible;
        margin-inline: 0;
        padding: 0;
    }

    .home-ig__card { flex: none; border-radius: 14px; }

    .home-ig__producto {
        left: 6px;
        right: 6px;
        bottom: 6px;
        gap: 6px;
        padding: 5px;
        border-radius: 10px;
    }

    .home-ig__producto-img { width: 30px; height: 30px; border-radius: 6px; }
    .home-ig__producto-nombre { font-size: 0.68rem; }
    .home-ig__producto-precio { font-size: 0.72rem; }

    /* Razones: sin la imagen central, las 4 tarjetas en carrusel */
    .kefir-premium-showcase .hero-visual,
    .kefir-premium-showcase .connector-line { display: none !important; }

    .kefir-premium-showcase .main-layout {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;       /* una regla anterior forzaba overflow: visible */
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 16px;        /* la tarjeta encaja respetando el margen lateral */
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        gap: 40px !important;          /* mayor que el margen lateral: las vecinas no se asoman */
        padding: 20px 16px 8px !important;   /* arriba: la etiqueta "01" sobresale */
        align-items: stretch;
    }

    .kefir-premium-showcase .main-layout::-webkit-scrollbar { display: none; }

    /* Las columnas no ocupan lugar: las tarjetas pasan a ser la fila */
    .kefir-premium-showcase .cards-column { display: contents !important; }

    .kefir-premium-showcase .benefit-card {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0;
        margin: 0 !important;
        scroll-snap-align: start;
    }

    .razones__puntos { margin-top: 1rem; }
}

@media (min-width: 768px) {
    .razones__puntos { display: none !important; }
}

/* "+4 Años fermentando bienestar": en móvil y tablet va debajo de la foto
   (una píldora de una línea) para no tapar a las personas */
@media (max-width: 1024px) {
    .esencia-imagen {
        display: flex !important;
        flex-direction: column;
        align-items: center;
    }

    .badge-experiencia {
        position: static !important;
        transform: none !important;
        display: inline-flex !important;
        align-items: center;
        gap: 10px;
        width: auto !important;
        max-width: 100% !important;
        margin: 1rem auto 0 !important;
        padding: 8px 16px !important;
        border-radius: 999px !important;
        text-align: left !important;
    }

    .badge-experiencia .numero { font-size: 1.2rem !important; }
    .badge-experiencia p { font-size: 0.78rem !important; white-space: nowrap; }
}

/* Tablet: "Ciencia y sabiduría" en una columna (foto, texto y KPI en fila de 3),
   igual que en móvil; en dos columnas el texto quedaba muy angosto */
@media (min-width: 768px) and (max-width: 1024px) {
    .container-esencia {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 2rem !important;
        max-width: 640px !important;
        margin-inline: auto !important;
    }

    .esencia-contenido { width: 100%; }

    .simbiose-stats-container {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem !important;
    }

    .simbiose-stat-item { align-items: center !important; text-align: center !important; }
    .simbiose-stat-item .stat-icon-wrapper { justify-content: center !important; }

    .boton_historia { margin-inline: auto; }
}

/* "Descubre nuestra historia": ícono y texto alineados a la izquierda dentro del botón */
.boton_historia {
    justify-content: flex-start !important;
    padding-left: 1.75rem !important;
    padding-right: 1.75rem !important;
}

/* =====================================================================
   Móvil · Ubícanos "Nuestros aliados estratégicos" en carrusel
   y banners pegados a la cabecera
   ===================================================================== */

@media (max-width: 767px) {
    .aliados__grid {
        display: flex !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        gap: 40px !important;
        margin-bottom: 0 !important;
        padding: 6px 0 10px;
    }

    .aliados__grid::-webkit-scrollbar { display: none; }

    .aliados__grid .aliado__card {
        flex: 0 0 100%;
        max-width: none !important;
        min-width: 0;
        scroll-snap-align: start;
    }

    .aliados__carrusel { margin-bottom: 3rem; }
    .aliados__carrusel .carrusel__puntos { margin-top: 1rem; }

    /* Banners: sin el hueco bajo la cabecera (estaban calculados para la cabecera alta) */
    #hero .splide__track { margin-top: 96px !important; }                 /* inicio: 34px menos */
    .contact__banner.conocenos-mobile { margin-top: 21px !important; }    /* páginas: 39px menos */
}

@media (min-width: 768px) {
    .aliados__carrusel .carrusel__puntos { display: none; }
}