/* =====================================================================
   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: 48px;           /* espacio arriba y abajo de cada sección: 96px entre dos secciones */
    --ui-tint: #edf2f6;
}

@media (max-width: 1024px) { :root { --sec-y: 40px; } }   /* 80px entre secciones */
@media (max-width: 767px)  { :root { --sec-y: 32px; } }    /* 64px entre secciones */

.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; }
}

/* Vitrina de botellas: todos los productos al mismo tamaño (el de las botellas de 1L).
   Se quitaron los ajustes por producto (latas 330ML, botellitas 270ML, griego y colágeno). */


/* ---------- Cards del catálogo: todas del mismo tamaño y ordenadas ----------
   Foto en un alto fijo, nombre en 2 líneas reservadas y precio + bolsa en la
   misma fila al fondo. Solo afecta al catálogo (.products__content). */
:root { --card-foto: 190px; --card-boton: 38px; }
@media (max-width: 1023px) { :root { --card-foto: 170px; } }
@media (max-width: 767px)  { :root { --card-foto: 140px; --card-boton: 32px; } }

.products__content {
    grid-auto-rows: 1fr;                 /* todas las filas igual de altas */
}

.products__content .products__card {
    height: 100% !important;
    padding: 1.25rem 1rem 1rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: center;
}

.products__content .products__card > a:first-child {
    display: flex !important;
    flex-direction: column;
    flex: 1;
}

.products__content .products__img {
    position: static !important;
    top: auto !important;
    width: 100% !important;
    height: var(--card-foto) !important;
    object-fit: contain;
    margin: 0 0 0.9rem !important;
}

/* Latas de 330ML: más chicas dentro del mismo espacio */
.products__content .products__img--lata {
    padding: calc(var(--card-foto) * 0.12) 0;
}

.products__content .products__nombre {
    font-weight: 400 !important;
    font-size: 0.9rem !important;
    line-height: 1.3 !important;
    color: #000 !important;
    text-transform: none !important;
    min-height: 2.6em !important;        /* 2 líneas siempre reservadas */
    margin: 0 0 0.75rem !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.products__content .products__price {
    display: block !important;
    margin-top: auto !important;         /* siempre al fondo de la card */
    min-height: var(--card-boton);
    line-height: var(--card-boton) !important;
    padding-right: calc(var(--card-boton) + 0.5rem);
    text-align: left !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: #000 !important;
}

.products__content .products__button {
    position: absolute !important;
    right: 1rem !important;
    bottom: 1rem !important;
    width: var(--card-boton) !important;
    height: var(--card-boton) !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

@media (max-width: 767px) {
    .products__content .products__card { padding: 1rem 0.75rem 0.75rem !important; }
    .products__content .products__nombre { font-size: 0.8rem !important; }
    .products__content .products__price { font-size: 0.95rem !important; }
    .products__content .products__button { right: 0.75rem !important; bottom: 0.75rem !important; }
}

/* Tablet y celular: las cards llenan el ancho disponible en vez de columnas fijas de 160px */
@media (max-width: 1023px) {
    .products__content {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 1.25rem !important;
    }
}
@media (max-width: 767px) {
    .products__content {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 1rem !important;
    }
}

/* Precio centrado y en Poppins (más legible que Titan One en números).
   Se reserva el mismo espacio a ambos lados para que el botón no lo tape. */
.products__content .products__price {
    text-align: center !important;
    padding-left: calc(var(--card-boton) + 0.5rem);
    font-family: var(--body-font) !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
}

.products__content .products__price { white-space: nowrap; }

@media (max-width: 767px) {
    .products__content .products__price {
        padding-left: calc(var(--card-boton) + 2px);
        padding-right: calc(var(--card-boton) + 2px);
        font-size: 0.9rem !important;
    }
}

/* Precios con Lilita One: rústica y gordita como la Titan One original,
   pero con números más claros. */
.products__content .products__price {
    font-family: "Lilita One", var(--body-font) !important;
    font-weight: 400 !important;
    font-size: 1.3rem !important;
    letter-spacing: 0.01em;
}
@media (max-width: 767px) {
    .products__content .products__price { font-size: 1.05rem !important; }
}


/* ---------- Conócenos, Talleres, Ubícanos y Contáctanos ----------
   Todos los párrafos con el mismo tamaño e interlineado que el texto de
   Talleres ("En nuestros talleres de Kéfir..."). */
main .talleres-parrafo,
main .collage__description_talleres,
main .contact__subtitle,
main .texto-principal,
main .degustacion-text,
main .empty-state-text,
main .map-update-text,
main .section__header p,
main .kefir-item p,
main .kefir-result p,
main .trust__description,
main .sb-description,
main .contact__information p,
main .contact__data p {
    font-size: var(--fs-texto) !important;
    line-height: 1.65 !important;
}

/* =====================================================================
   TALLERES · ¿Cómo nace nuestro Kéfir? — pasos en línea de tiempo + una foto
   ===================================================================== */
.proceso { padding-block: var(--sec-y); }
.proceso__titulo { text-align: center; margin-bottom: 3rem !important; }

.proceso__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 4.5rem;
    align-items: center;
    max-width: 1080px;
    margin: 0 auto;
}

.proceso__pasos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

.proceso__paso {
    position: relative;
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 1rem;
    align-items: start;
}

/* Línea punteada que une los números */
.proceso__paso:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 19px;
    top: 44px;
    bottom: -1.2rem;
    border-left: 2px dashed #c3d0dc;
}

.proceso__num {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ui-primary);
    color: #fff;
    display: grid;
    place-items: center;
    font-family: var(--second-font);
    font-size: 1.05rem;
    box-shadow: 0 0 0 5px var(--ui-tint);
}

.proceso__paso-titulo {
    margin: 0.2rem 0 0.2rem !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    color: var(--ui-ink) !important;
}

.proceso__paso p { margin: 0; color: #4b5563; }

.proceso__resultado {
    margin-top: 2rem;
    display: flex;
    gap: 0.9rem;
    align-items: center;
    padding: 1.1rem 1.25rem;
    border-radius: 16px;
    background: var(--ui-tint);
}
.proceso__resultado p { margin: 0; color: var(--ui-ink); }
.proceso__resultado-icono {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #fff;
    color: var(--ui-accent);
    display: grid;
    place-items: center;
    font-size: 1.3rem;
}

.proceso__foto {
    position: relative;
    margin: 0;
}
/* Bloque de color desplazado detrás de la foto */
.proceso__foto::before {
    content: "";
    position: absolute;
    inset: 24px -24px -24px 24px;
    border-radius: 28px;
    background: var(--ui-tint);
    z-index: 0;
}
.proceso__foto img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 28px;
    transform: scaleX(-1);              /* la foto original se mostraba en espejo */
    box-shadow: 0 18px 40px rgba(31, 42, 55, 0.14);
}
.proceso__insignia {
    position: absolute;
    z-index: 2;
    left: -28px;
    bottom: 36px;
    display: flex;
    flex-direction: column;
    padding: 0.9rem 1.2rem;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(31, 42, 55, 0.14);
}
.proceso__insignia strong {
    font-family: var(--second-font);
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.1;
    color: var(--ui-primary);
}
.proceso__insignia span { font-size: var(--fs-pequeno); color: #4b5563; }

@media (max-width: 1023px) {
    .proceso__grid { grid-template-columns: 1fr; gap: 3rem; max-width: 620px; }
    .proceso__foto { order: -1; margin-right: 24px; }
    .proceso__foto img { aspect-ratio: 16 / 11; }
    .proceso__insignia { left: 16px; bottom: 16px; }
}
@media (max-width: 767px) {
    .proceso__titulo { margin-bottom: 2rem !important; }
    .proceso__foto { margin-right: 14px; }
    .proceso__foto::before { inset: 14px -14px -14px 14px; border-radius: 22px; }
    .proceso__foto img { aspect-ratio: 4 / 3; border-radius: 22px; }
    .proceso__insignia { padding: 0.7rem 0.95rem; }
    .proceso__insignia strong { font-size: 1.3rem; }
    .proceso__resultado { align-items: flex-start; }
}

/* =====================================================================
   TALLERES · Crea con Simbiose — carrusel de recetas (3 / 2 / 1 por vista)
   ===================================================================== */
.recetas { padding-block: var(--sec-y); }
.recetas__titulo { text-align: center; margin-bottom: 2.5rem !important; }

.recetas__carrusel .carrusel__viewport { padding: 6px 4px 14px; }

.receta {
    flex: 0 0 calc((100% - 3rem) / 3);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    padding: 1.1rem 1.1rem 1.4rem;
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--ui-line);
    box-shadow: 0 10px 26px rgba(70, 96, 122, 0.09);
}

.receta__foto {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
}
.receta__foto img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.receta:hover .receta__foto img { transform: scale(1.04); }

.receta__categoria {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--ui-primary);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.receta__titulo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1.1rem 0 0.4rem !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: var(--ui-ink) !important;
}
.receta__titulo i { color: var(--ui-accent); font-size: 1.25rem; }

main .receta__texto {
    flex: 1;
    margin: 0 0 1.2rem;
    color: #4b5563;
    font-size: var(--fs-pequeno) !important;
    line-height: 1.55 !important;
}

.receta__boton {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 1.5rem;
    border-radius: 999px;
    background: var(--ui-primary);
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background-color 0.2s ease, gap 0.2s ease;
}
.receta__boton:hover { background: #33475b; color: #fff; gap: 0.65rem; }

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

/* =====================================================================
   DETALLE DE PRODUCTO — galería a la izquierda, información a la derecha,
   precio grande. En celular: foto primero y luego la información.
   ===================================================================== */
.product-detail-section { padding-inline: 24px !important; }

.product-detail-section .product-container {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 4rem !important;
    align-items: start;
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 !important;
}

.product-detail-section .product-visuals,
.product-detail-section .product-content {
    min-width: 0 !important;
    width: 100%;
    display: block !important;
    order: 0 !important;
    margin: 0 !important;
}


.product-detail-section .main-card {
    aspect-ratio: 1 / 1;
    max-width: none;
    margin: 0;
    padding: 2.5rem !important;
    border-radius: 28px !important;
    background: #fff;
    box-shadow: 0 14px 36px rgba(70, 96, 122, 0.10);
    border: 1px solid var(--ui-line);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.product-detail-section .main-product-img {
    width: auto !important;
    height: 100% !important;
    max-width: 100%;
    object-fit: contain;
}
.product-detail-section .main-product-img--lata { height: 80% !important; }

.product-detail-section .thumbnail-list {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}
.product-detail-section .thumb {
    width: 76px !important;
    height: 76px !important;
    padding: 6px !important;
    object-fit: contain;
    border-radius: 14px !important;
    background: #fff;
    border: 2px solid var(--ui-line);
    box-shadow: none;
    cursor: pointer;
    transition: border-color 0.2s ease;
}
.product-detail-section .thumb.active,
.product-detail-section .thumb:hover { border-color: var(--ui-primary); }

/* Información */
.product-detail-section .product-header { margin: 0 !important; }

.product-detail-section .badge {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    background: var(--ui-tint);
    color: var(--ui-primary);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
}

.product-detail-section .product-header h1 {
    margin: 0.75rem 0 0.5rem !important;
    color: var(--ui-ink) !important;
    font-weight: 700 !important;
}

main .product-detail-section .price-tag {
    margin: 0 0 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--ui-line);
    font-family: "Lilita One", var(--second-font) !important;
    font-weight: 400 !important;
    font-size: 2.6rem !important;
    line-height: 1 !important;
    color: var(--ui-primary) !important;
}

.product-detail-section .product-description p { text-align: left !important; margin: 0; }
.product-detail-section .details-body { text-align: left !important; }

.product-detail-section .action-area { margin: 1.75rem 0 !important; }

/* Tablet: una columna, foto centrada */
@media (max-width: 1023px) {
    .product-detail-section .product-container {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        max-width: 620px;
    }
    .product-detail-section .main-card { max-width: 460px; margin: 0 auto; }
    .product-detail-section .thumbnail-list { justify-content: center; }
}

@media (max-width: 767px) {
    .product-detail-section { margin-top: 120px !important; padding-inline: 16px !important; }
    .product-detail-section .product-header { margin-top: 0 !important; }
    .product-detail-section .main-card { max-width: 340px; padding: 1.75rem !important; border-radius: 22px !important; }
    .product-detail-section .thumb { width: 60px !important; height: 60px !important; }
    main .product-detail-section .price-tag { font-size: 2.1rem !important; margin-bottom: 1.25rem; padding-bottom: 1.25rem; }
}

/* Relacionados: misma grilla y cards que el catálogo */
.related-products { padding-inline: 24px; }
.related-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 1.5rem !important;
    max-width: 1160px;
    margin: 0 auto;
}
@media (max-width: 1023px) {
    .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 767px) {
    .related-products { padding-inline: 16px; }
    .related-grid { gap: 1rem !important; padding: 0 !important; }
}
@media (max-width: 1023px) {
    .proceso > .container,
    .recetas > .container { padding-inline: 24px !important; }
}
@media (max-width: 767px) {
    .proceso > .container,
    .recetas > .container { padding-inline: 16px !important; }
    .recetas .carrusel { padding: 0; }
}

/* =====================================================================
   RITMO ENTRE SECCIONES EN TODAS LAS VISTAS
   Entre el final de una sección y el título de la siguiente siempre hay
   2 × --sec-y: 96px en escritorio, 80px en tablet y 64px en celular.
   ===================================================================== */
:root { --gap-sec: calc(var(--sec-y) * 2); }

/* Inicio */
.section_favorite.home-gama { padding-top: var(--gap-sec) !important; }   /* después del banner */
.promo-section { padding-top: var(--gap-sec) !important; }                /* la franja de botellas ya ocupa su padding */

/* Conócenos, Talleres, Ubícanos y Contáctanos: banner + primer título */
main > .contact .contact__banner { margin-bottom: 0 !important; }
main > .contact > .promo-title {
    margin-top: var(--gap-sec) !important;
    margin-bottom: 2.5rem !important;
}
main > .contact > .promo-title .section__title { margin-bottom: 0 !important; }

/* Talleres */
.seccion-talleres-simbiose {
    margin: 0 !important;
    padding-bottom: var(--sec-y) !important;
}

/* Conócenos */
main > .contact.section { padding-bottom: var(--sec-y) !important; }
main > .trust.section {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: var(--sec-y) !important;
    padding-bottom: var(--sec-y) !important;
}
.timeline-slider-section { padding-top: var(--sec-y) !important; margin-top: 0 !important; }

/* Conócenos: las fotos del collage están en posición absoluta dentro de una caja
   más alta que ellas (dejaba ~80px vacíos) y las tarjetas traían margen abajo */
@media (min-width: 1025px) {
    .collage__container_1 { height: 420px !important; min-height: 0 !important; }
}
.trust__container { margin-bottom: 0 !important; }

/* Ubícanos: títulos internos a la misma distancia */
main > .contact > .container > .section__header { margin-top: calc(var(--gap-sec) - 24px) !important; }
.degustacion-banner { margin-bottom: 0 !important; }

/* Espacio antes del footer: la última sección aporta --sec-y y main el resto */
main { padding-bottom: var(--sec-y); }

/* Ajustes finos del espacio antes del footer */
.pagination__container { padding-bottom: 0 !important; }
.related-grid { padding-bottom: 0 !important; }
.contact__container { padding-bottom: 0 !important; }
.timeline-slider-section { padding-bottom: 0 !important; }
.related-products { padding-top: 0 !important; }
.related-products > .promo-title { margin-top: var(--gap-sec) !important; }
.product-detail-section { padding-bottom: 0 !important; margin-bottom: 0 !important; }
main .texto-principal { margin-bottom: 0 !important; }
main > .contact > .container > .section__header { margin-top: var(--gap-sec) !important; }
.simbiose-delivery-section { margin-bottom: 0 !important; padding-bottom: var(--sec-y) !important; }
@media (min-width: 1024px) {
    /* La botella de "Razones" flota y baja un poco: se compensa */
    .kefir-premium-showcase { padding-bottom: calc(var(--sec-y) + 32px) !important; }
}

/* Recetas con el mismo color, sombra y forma que las cards de productos */
.receta {
    background: transparent;
    border: 0;
    border-radius: 20px;
    box-shadow: inset 0 -6px 18px rgba(70, 96, 122, 0.14);
}
.recetas__carrusel .carrusel__viewport { padding: 6px 2px 10px; }
/* "Respondemos tus dudas" tiene fondo azul: su borde es visible, así que las
   secciones vecinas dejan el espacio completo antes y después del azul */
.home-ig { padding-bottom: var(--gap-sec) !important; }
.home-ayuda + .home-testimonios,
.home-ayuda ~ .home-testimonios { padding-top: var(--gap-sec) !important; }

/* Vitrina: más aire entre el título y los productos (las latas llegan casi al tope) */
.home-gama .home-seccion__head { margin-bottom: 5rem !important; }
@media (max-width: 1023px) { .home-gama .home-seccion__head { margin-bottom: 4rem !important; } }
@media (max-width: 767px)  { .home-gama .home-seccion__head { margin-bottom: 3rem !important; } }

/* =====================================================================
   El contenedor principal recortaba con overflow: hidden y eso anulaba
   position: sticky (resumen del carrito y del pago). clip recorta igual
   sin crear un contenedor de scroll; flow-root mantiene los márgenes.
   ===================================================================== */
.main { overflow: clip !important; display: flow-root; }

/* =====================================================================
   CARRITO — tamaños de texto uniformes, sabores en lista y resumen fijo
   ===================================================================== */
.seccion-carrito .titulo-resumen {
    margin: 0 0 1.25rem !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: var(--ui-ink) !important;
}

.tabla-productos thead tr { font-size: var(--fs-pequeno) !important; color: #6b7280 !important; }
.tabla-productos th { font-weight: 600; }

.fila-producto { border-bottom: 1px solid var(--ui-line) !important; }
.fila-producto:last-child { border-bottom: 0 !important; }
.celda-info { padding: 18px 0 !important; }
.info-producto { align-items: flex-start !important; gap: 16px !important; }
.img-producto { width: 72px !important; height: 72px; object-fit: contain; flex-shrink: 0; }

.textos-producto { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.textos-producto h4 {
    margin: 0 !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1.35;
    color: var(--ui-ink) !important;
}

/* Sabores elegidos: uno debajo del otro */
.pack-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.pack-lista li {
    position: relative;
    padding-left: 14px;
    font-size: var(--fs-pequeno);
    line-height: 1.4;
    color: #4b5563;
}
.pack-lista li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.55em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ui-accent);
}
.pack-lista li span { font-weight: 600; color: var(--ui-primary); }

.seccion-carrito .pack-editar { align-self: flex-start; font-size: var(--fs-pequeno) !important; margin: 0 !important; }

main .seccion-carrito .etiqueta-categoria { margin: 0 !important; font-size: var(--fs-pequeno) !important; color: #6b7280; }

.precio-eliminar { font-size: 1rem; font-weight: 700; color: var(--ui-primary); white-space: nowrap; }

/* Resumen del pedido: se queda fijo al bajar */
.columna-derecha { position: sticky !important; top: 130px !important; align-self: flex-start; }

.fila-total { font-size: 0.95rem; color: #4b5563 !important; margin-bottom: 0.75rem !important; }
.fila-total span:last-child { font-weight: 600; color: var(--ui-ink); }
.nota-igv { margin: 0 0 1rem; font-size: var(--fs-pequeno) !important; color: #6b7280; }
.total-final { font-size: 1.2rem !important; margin-top: 0 !important; }
.total-final span { color: var(--ui-primary) !important; font-weight: 700 !important; }
.seccion-carrito .separador { margin: 0 0 1rem !important; border-top: 1px solid var(--ui-line) !important; }
.btn-proceder { margin-top: 1.25rem; border-radius: 14px !important; font-size: 1rem; }

@media (max-width: 1024px) {
    /* En tablet y celular el resumen va debajo de los productos */
    .columna-derecha { position: static !important; }
    .img-producto { width: 64px !important; height: 64px; }
}

/* =====================================================================
   PAGO (/pago) — pasos a la izquierda, resumen fijo a la derecha
   ===================================================================== */
.pago { padding: 160px 24px var(--sec-y); }
.pago__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 2rem;
    align-items: start;
    max-width: 1160px;
    margin: 0 auto;
}
.pago__pasos { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.pago__resumen { position: sticky; top: 130px; }

/* Tarjetas: mismo estilo que el carrito */
.pago-paso,
.pago-resumen {
    padding: 1.75rem;
    border-radius: 24px;
    background: transparent;
    box-shadow: inset var(--shadow-card);
    transition: opacity 0.2s ease;
}

.pago-paso__cabecera { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.pago-paso__titulo { display: flex; align-items: center; gap: 12px; }
.pago-paso__titulo h4 { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--ui-ink); }
.pago-paso__num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #d6dde4;
    color: #9aa5b1;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.pago-paso__editar { color: var(--ui-primary); font-size: 1.3rem; }

/* Campos */
.pago-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; }
.pago-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pago-campo--completo { grid-column: 1 / -1; }
.pago-campo label,
.pago-voucher label { font-size: var(--fs-pequeno); font-weight: 600; color: var(--ui-ink); }

.pago-campo input,
.pago-campo textarea,
.pago-campo select,
.pago .ss-main {
    width: 100%;
    min-height: 50px;
    padding: 0.8rem 1rem;
    border: 1.5px solid #dfe3e8 !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: var(--ui-ink) !important;
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.pago-campo textarea { resize: vertical; min-height: 80px; }
.pago-campo input:focus,
.pago-campo textarea:focus,
.pago .ss-main.ss-open-below,
.pago .ss-main.ss-open-above {
    outline: none;
    border-color: var(--ui-primary) !important;
    box-shadow: 0 0 0 3px rgba(70, 96, 122, 0.12);
}
.pago .ss-main .ss-values .ss-single { font-size: 1rem; }
.pago .ss-main.ss-disabled { background: #f5f6f7 !important; }
.ss-content { border-radius: 12px !important; border-color: #dfe3e8 !important; font-size: 0.95rem; }
.ss-content .ss-list .ss-option.ss-highlighted,
.ss-content .ss-list .ss-option:hover { background: var(--ui-primary) !important; color: #fff !important; }

.pago-envio-costo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.9rem 1rem;
    border-radius: 12px;
    background: var(--ui-tint);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ui-primary);
}

/* Delivery / Recojo en tienda */
.entrega-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
.entrega-opcion { cursor: pointer; }
.entrega-opcion input { position: absolute; opacity: 0; pointer-events: none; }
.entrega-opcion__caja {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    padding: 1rem 1.1rem;
    border: 1.5px solid #dfe3e8;
    border-radius: 14px;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.entrega-opcion__caja > i {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-size: 1.3rem;
    background: var(--ui-tint);
    color: var(--ui-primary);
}
.entrega-opcion__caja strong { display: block; font-size: 1rem; color: var(--ui-ink); }
.entrega-opcion__caja small { display: block; font-size: var(--fs-pequeno); color: #6b7280; }
.entrega-opcion input:checked + .entrega-opcion__caja {
    border-color: var(--ui-primary);
    box-shadow: 0 0 0 3px rgba(70, 96, 122, 0.12);
}
.entrega-opcion input:checked + .entrega-opcion__caja > i { background: var(--ui-primary); color: #fff; }
.entrega-opcion input:focus-visible + .entrega-opcion__caja { outline: 2px solid var(--ui-primary); outline-offset: 2px; }

.entrega-recojo {
    gap: 14px;
    align-items: flex-start;
    padding: 1.1rem 1.25rem;
    border-radius: 14px;
    background: var(--ui-tint);
}
.entrega-recojo > i { font-size: 1.5rem; color: var(--ui-primary); }
.entrega-recojo strong { display: block; font-size: 1rem; color: var(--ui-ink); margin-bottom: 4px; }
.entrega-recojo p { margin: 0; font-size: 0.95rem !important; color: #4b5563; }
main .entrega-recojo .entrega-recojo__nota { margin-top: 6px; font-size: var(--fs-pequeno) !important; color: #6b7280; }

/* Botones */
.pago-boton {
    width: 100%;
    margin-top: 1.5rem;
    padding: 1rem;
    border: 0;
    border-radius: 14px;
    background: var(--ui-primary);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.pago-boton:hover { background: #33475b; }
.pago-boton--confirmar { background: #28a745; margin-top: 0; }
.pago-boton--confirmar:hover { background: #218838; }
.pago-boton--secundario { background: transparent; color: var(--ui-ink); border: 1.5px solid #cfd6dd; margin-top: 0.75rem; }
.pago-boton--secundario:hover { background: #f3f1ea; }

/* Paso 3 */
.pago-metodos { display: flex; justify-content: center; gap: 1rem; margin-bottom: 1.5rem; }
.pay-option {
    width: 110px;
    padding: 0.9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    border: 2px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s ease;
}
.pay-option img { height: 40px; width: auto; object-fit: contain; }
.pay-option p { margin: 0; font-size: var(--fs-pequeno) !important; font-weight: 700; color: var(--ui-ink); }

.pago-cuenta { text-align: center; margin-bottom: 1.5rem; }
.pago-cuenta h5 { margin: 0 0 6px; font-size: 1rem; font-weight: 700; color: var(--ui-ink); }
main .pago-cuenta #pay-number { margin: 0; font-size: 1.35rem !important; font-weight: 700; color: var(--ui-ink); }
main .pago-cuenta .pago-cuenta__titular { margin: 4px 0 0; font-size: var(--fs-pequeno) !important; color: #6b7280; }
main .pago-cuenta .pago-cuenta__total { margin: 12px 0 0; font-weight: 700; color: var(--ui-ink); }

.pago-voucher {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 460px;
    margin: 0 auto 1.5rem;
    padding: 1.25rem;
    border: 1.5px dashed var(--ui-primary);
    border-radius: 16px;
    background: #fff;
}
.pago-voucher input { width: 100%; font-size: var(--fs-pequeno); }
.pago-voucher__preview { position: relative; padding-top: 12px; border-top: 1px solid var(--ui-line); }
.pago-voucher__preview img { width: 100%; max-height: 250px; object-fit: contain; border-radius: 10px; }
#btn-remove-preview {
    position: absolute;
    top: 0;
    right: 0;
    width: 28px;
    height: 28px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #e5484d;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    z-index: 2;
}
.pago-acciones { max-width: 460px; margin: 0 auto; }

/* Resumen */
.pago-resumen__cabecera { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; }
.pago-resumen__cabecera h3 { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--ui-ink); }
.pago-resumen__cabecera a { font-size: var(--fs-pequeno); font-weight: 600; color: var(--ui-primary); text-decoration: none; }

.pago-resumen__items { max-height: 320px; overflow-y: auto; margin: 0 -4px; padding: 8px 4px 0; }
.pago-item {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    padding: 12px 0;
    border-bottom: 1px solid var(--ui-line);
}
.pago-item:last-child { border-bottom: 0; }
.pago-item__foto { position: relative; width: 56px; height: 56px; }
.pago-item__foto img { width: 100%; height: 100%; object-fit: contain; border-radius: 10px; background: #fff; border: 1px solid var(--ui-line); }
.pago-item__foto span {
    position: absolute;
    top: -8px;
    left: -6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: var(--ui-primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    display: grid;
    place-items: center;
}
.pago-item__texto { display: flex; flex-direction: column; gap: 4px; }
main .pago-item .pago-item__nombre { margin: 0; font-size: 0.95rem !important; font-weight: 600; line-height: 1.35; color: var(--ui-ink); }
.pago-item__texto small { font-size: var(--fs-pequeno); color: #6b7280; }
.pago-item .pack-editar { align-self: flex-start; font-size: var(--fs-pequeno) !important; margin: 0 !important; }
.pago-item__precio { font-size: 0.95rem; font-weight: 700; color: var(--ui-primary); white-space: nowrap; }

.pago-progreso {
    margin: 1rem 0 1.25rem;
    padding: 1rem;
    border-radius: 14px;
    background: var(--ui-tint);
}
.pago-progreso__texto { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: var(--fs-pequeno); color: var(--ui-primary); }
.pago-progreso__texto strong { margin-left: auto; }
.pago-progreso__barra { height: 8px; border-radius: 20px; background: #dbe3ea; overflow: hidden; }
#shipping-progress-bar { width: 0%; height: 100%; border-radius: 20px; background: var(--ui-primary); transition: width 0.4s ease; }
.pago-progreso__ok { margin-top: 10px; text-align: center; }
.pago-progreso__ok span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 30px;
    background: #28a745;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}

.pago-totales { border-top: 1px solid var(--ui-line); padding-top: 1rem; }
.pago-totales__fila { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.6rem; font-size: 0.95rem; color: #4b5563; }
.pago-totales__fila > span:last-child { font-weight: 600; color: var(--ui-ink); }
.pago-totales .nota-igv { margin: 0.25rem 0 0.9rem; }
.pago-totales__total { margin: 0; padding-top: 0.9rem; border-top: 1px solid var(--ui-line); font-size: 1.1rem; font-weight: 700; color: var(--ui-ink); }
.pago-totales__total > span:last-child { font-size: 1.3rem; font-weight: 700; color: var(--ui-primary); }

/* Tablet: resumen debajo de los pasos */
@media (max-width: 1023px) {
    .pago { padding-top: 140px; }
    .pago__grid { grid-template-columns: 1fr; max-width: 680px; }
    .pago__resumen { position: static; }
    .pago-resumen__items { max-height: none; }
}

@media (max-width: 767px) {
    .pago { padding: 120px 16px var(--sec-y); }
    .pago-paso, .pago-resumen { padding: 1.25rem; border-radius: 20px; }
    .pago-campos { grid-template-columns: 1fr; }
    .entrega-opciones { grid-template-columns: 1fr; gap: 0.75rem; }
    .pago-metodos { gap: 0.75rem; }
}
/* El resumen fijo debe caber en la pantalla: la lista de productos se desplaza sola */
@media (min-width: 1024px) {
    .pago__grid { grid-template-columns: minmax(0, 1fr) 400px; }
    .pago-resumen__items { max-height: max(160px, calc(100vh - 520px)); }
}

/* Detalle de producto: beneficios / modo de uso / naturaleza como lista numerada */
.detalle-lista {
    list-style: none;
    counter-reset: punto;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.detalle-lista li {
    counter-increment: punto;
    position: relative;
    padding-left: 2.1rem;
    line-height: 1.6;
    color: #4b5563;
}
.detalle-lista li::before {
    content: counter(punto);
    position: absolute;
    left: 0;
    top: 0.1em;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--ui-primary);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    display: grid;
    place-items: center;
}

/* Vitrina: solo las latas de 330ML un poco más chicas que el resto */
.home-gama__img--lata { max-height: 85% !important; }
@media (max-width: 1024px) { .seccion-carrito { margin-top: 130px !important; } }
@media (max-width: 767px)  { .seccion-carrito { margin-top: 120px !important; } }

/* Detalle de producto: flechas dentro de la foto y zoom al pasar el mouse */
.product-detail-section .main-card { position: relative; cursor: zoom-in; }
.product-detail-section .main-product-img { transition: transform 0.25s ease; }
.product-detail-section .main-card.is-zoom .main-product-img { transform: scale(2); }

.galeria-flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--ui-line);
    background: rgba(255, 255, 255, 0.92);
    color: var(--ui-primary);
    font-size: 1.5rem;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(70, 96, 122, 0.14);
    transition: background-color 0.2s ease, color 0.2s ease;
}
.galeria-flecha:hover { background: var(--ui-primary); color: #fff; }
.galeria-flecha--prev { left: 14px; }
.galeria-flecha--next { right: 14px; }

@media (max-width: 767px) {
    .galeria-flecha { width: 36px; height: 36px; font-size: 1.3rem; }
    .galeria-flecha--prev { left: 8px; }
    .galeria-flecha--next { right: 8px; }
}

/* =====================================================================
   GRACIAS (compra exitosa) — rústico y minimalista: sello, pasos y un
   ticket de papel con borde troquelado
   ===================================================================== */
.gracias { padding: 160px 24px var(--sec-y); }
.gracias__contenido { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 2.25rem; }

.gracias__cabecera { text-align: center; }
.gracias__sello { width: 120px; height: 120px; margin: 0 auto 1.25rem; animation: sello-entra 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.3) both; }
.gracias__sello svg { width: 100%; height: 100%; overflow: visible; transform: rotate(-8deg); }
.gracias__sello-borde { fill: none; stroke: var(--ui-primary); stroke-width: 2; stroke-dasharray: 3 4; }
.gracias__sello-centro { fill: var(--ui-primary); }
.gracias__sello-texto { font-family: var(--second-font); font-size: 11.5px; letter-spacing: 2.2px; fill: var(--ui-primary); }
.gracias__sello-check { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }

@keyframes sello-entra {
    from { opacity: 0; transform: scale(1.35) rotate(12deg); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .gracias__sello { animation: none; } }

.gracias__etiqueta {
    display: inline-block;
    margin: 0 0 0.6rem !important;
    padding: 0.3rem 0.9rem;
    border: 1.5px dashed var(--ui-primary);
    border-radius: 999px;
    color: var(--ui-primary);
    font-size: var(--fs-pequeno) !important;
    font-weight: 600;
    letter-spacing: 0.06em;
}
.gracias__titulo {
    margin: 0 0 0.5rem;
    font-family: var(--second-font);
    font-weight: 400;
    font-size: var(--fs-titulo);
    line-height: 1.1;
    color: var(--ui-primary);
}
main .gracias__texto { margin: 0 auto; max-width: 440px; color: #4b5563; }

/* Qué sigue */
.gracias__pasos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    position: relative;
}
.gracias__pasos::before {
    content: "";
    position: absolute;
    top: 22px;
    left: 16.6%;
    right: 16.6%;
    border-top: 2px dashed #c3d0dc;
}
.gracias__pasos li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; text-align: center; }
.gracias__pasos span {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--ui-bg);
    border: 2px solid var(--ui-primary);
    color: var(--ui-primary);
    font-size: 1.25rem;
}
.gracias__pasos li:first-child span { background: var(--ui-primary); color: #fff; }
.gracias__pasos strong { font-size: var(--fs-pequeno); font-weight: 600; color: var(--ui-ink); }

/* Ticket de papel */
.ticket { filter: drop-shadow(0 12px 22px rgba(70, 96, 122, 0.12)); }
.ticket__cuerpo {
    padding: 1.75rem 1.75rem 1.25rem;
    border-radius: 18px 18px 0 0;
    background: #fff;
}
.ticket__borde {
    height: 14px;
    background:
        radial-gradient(circle at 8px 0, transparent 7px, #fff 7.5px) 0 0 / 16px 14px repeat-x;
}
.ticket__cabecera {
    display: flex;
    justify-content: space-between;
    padding-bottom: 1rem;
    margin-bottom: 0.5rem;
    border-bottom: 2px dashed var(--ui-line);
    font-size: var(--fs-pequeno);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #6b7280;
}
.ticket__items { list-style: none; margin: 0; padding: 0; }
.ticket__item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
    padding: 0.85rem 0;
    border-bottom: 1px dashed var(--ui-line);
    font-size: 0.95rem;
    color: var(--ui-ink);
}
.ticket__cant { font-weight: 700; color: var(--ui-primary); }
.ticket__nombre { font-weight: 600; line-height: 1.4; }
.ticket__nombre .pack-lista { margin-top: 6px; font-weight: 400; }
.ticket__precio { font-weight: 700; white-space: nowrap; }

.ticket__totales { padding-top: 0.85rem; display: flex; flex-direction: column; gap: 0.5rem; }
.ticket__totales > div { display: flex; justify-content: space-between; font-size: 0.95rem; color: #4b5563; }
.ticket__gratis { color: #28a745; font-weight: 600; }
.ticket__total {
    margin-top: 0.4rem;
    padding-top: 0.85rem;
    border-top: 2px dashed var(--ui-line);
    font-weight: 700;
    color: var(--ui-ink) !important;
}
.ticket__total span:last-child { font-family: "Lilita One", var(--second-font); font-weight: 400; font-size: 1.6rem; color: var(--ui-primary); }
main .ticket .ticket__metodo {
    margin: 1rem 0 0;
    padding: 0.6rem 0.9rem;
    border-radius: 10px;
    background: var(--ui-tint);
    font-size: var(--fs-pequeno) !important;
    color: var(--ui-primary);
    font-weight: 600;
}

/* Datos */
.gracias__datos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.gracias__dato { padding: 1.25rem; border-radius: 18px; box-shadow: inset var(--shadow-card); }
.gracias__dato h2 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 0.6rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ui-ink);
}
.gracias__dato h2 i { color: var(--ui-accent); }
main .gracias__dato p { margin: 0; font-size: 0.95rem !important; color: var(--ui-ink); word-break: break-word; }
main .gracias__dato .gracias__dato-sub { margin-top: 2px; font-size: var(--fs-pequeno) !important; color: #6b7280; }

.gracias__acciones { display: flex; justify-content: center; gap: 0.75rem; flex-wrap: wrap; }
.gracias__boton {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.85rem 1.6rem;
    border-radius: 999px;
    background: var(--ui-primary);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease;
}
.gracias__boton:hover { background: #33475b; color: #fff; }
.gracias__boton--linea { background: transparent; color: var(--ui-primary); border: 1.5px solid var(--ui-primary); }
.gracias__boton--linea:hover { background: var(--ui-primary); color: #fff; }

@media (max-width: 767px) {
    .gracias { padding: 120px 16px var(--sec-y); }
    .gracias__contenido { gap: 1.75rem; }
    .gracias__sello { width: 100px; height: 100px; }
    .ticket__cuerpo { padding: 1.25rem 1.1rem 1rem; }
    .gracias__datos { grid-template-columns: 1fr; }
    .gracias__pasos strong { font-size: 0.78rem; }
    .gracias__acciones .gracias__boton { flex: 1; justify-content: center; }
}
@media (max-width: 767px) {
    .gracias__acciones { flex-direction: column; }
    .gracias__acciones .gracias__boton { width: 100%; white-space: nowrap; }
}

/* =====================================================================
   COBERTURA — distritos agrupados por zona, con buscador
   ===================================================================== */
.cobertura { padding: 160px 24px 0; }
.cobertura__contenido { max-width: 1100px; margin: 0 auto; }
.cobertura__cabecera { text-align: center; margin-bottom: 2rem; }
.cobertura__cabecera .section__title { margin: 0 0 0.75rem !important; }
main .cobertura__cabecera p { margin: 0; color: #4b5563; }

.cobertura__buscador {
    position: relative;
    max-width: 520px;
    margin: 0 auto;
}
.cobertura__buscador i {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    color: var(--ui-primary);
}
.cobertura__buscador input {
    width: 100%;
    padding: 0.95rem 1rem 0.95rem 3rem;
    border: 1.5px solid #dfe3e8;
    border-radius: 999px;
    background: #fff;
    font-size: 1rem;
    font-family: inherit;
    color: var(--ui-ink);
}
.cobertura__buscador input:focus { outline: none; border-color: var(--ui-primary); box-shadow: 0 0 0 3px rgba(70, 96, 122, 0.12); }

main .cobertura__resultado { min-height: 1.6em; margin: 0.75rem 0 0; text-align: center; color: var(--ui-primary); }

.cobertura__gratis {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 520px;
    margin: 1rem auto 2.5rem;
    padding: 0.75rem 1rem;
    border-radius: 14px;
    background: var(--ui-tint);
    color: var(--ui-primary);
    font-size: var(--fs-pequeno);
    text-align: center;
}
.cobertura__gratis i { font-size: 1.15rem; }

.cobertura__zonas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; align-items: start; }

.zona {
    border-radius: 22px;
    box-shadow: inset var(--shadow-card);
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}
.zona.is-activa { box-shadow: inset var(--shadow-card), 0 0 0 2px var(--ui-primary); }

.zona__cabecera {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 1.4rem 1rem 1.2rem;
    color: #fff;
    text-align: center;
}
.zona--1 .zona__cabecera { background: #3ea8ab; }
.zona--2 .zona__cabecera { background: #5b7c99; }
.zona--3 .zona__cabecera { background: #46607a; }
.zona__numero {
    padding: 0.15rem 0.75rem;
    border: 1.5px dashed rgba(255, 255, 255, 0.7);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.zona__precio { margin-top: 0.4rem; font-family: "Lilita One", var(--second-font); font-weight: 400; font-size: 1.9rem; line-height: 1.1; }
.zona__desc { font-size: var(--fs-pequeno); opacity: 0.9; }

.zona__lista { list-style: none; margin: 0; padding: 0.5rem 1.1rem 1rem; }
.zona__distrito {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 0.6rem 0.4rem;
    border-bottom: 1px dashed var(--ui-line);
    font-size: 0.95rem;
    color: var(--ui-ink);
    border-radius: 8px;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}
.zona__distrito:last-child { border-bottom: 0; }
.zona__distrito em {
    margin-left: 6px;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: var(--ui-tint);
    color: var(--ui-primary);
    font-style: normal;
    font-size: 0.7rem;
    font-weight: 600;
    vertical-align: 1px;
}
.zona__costo { font-weight: 700; color: var(--ui-primary); white-space: nowrap; font-size: 0.9rem; }
.zona__distrito.is-encontrado { background: var(--ui-tint); font-weight: 700; }
.zona__distrito.is-atenuado { opacity: 0.35; }

main .cobertura__nota { margin: 2rem 0 0; text-align: center; color: #4b5563; }
.cobertura__nota a { color: var(--ui-primary); font-weight: 600; }

@media (max-width: 1023px) {
    .cobertura { padding-top: 140px; }
    .cobertura__zonas { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
    .cobertura { padding: 120px 16px 0; }
    .cobertura__zonas { grid-template-columns: 1fr; gap: 1rem; }
}

/* =====================================================================
   POLÍTICA DE ENVÍOS
   ===================================================================== */
.politica { padding: 160px 24px 0; }
.politica__contenido { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 2.5rem; }
.politica__cabecera { text-align: center; }
.politica__cabecera .section__title { margin: 0.5rem 0 0.75rem !important; }
main .politica__cabecera p { margin: 0 auto; max-width: 580px; color: #4b5563; }
main .politica__cabecera .politica__etiqueta {
    display: inline-block;
    padding: 0.25rem 0.85rem;
    border: 1.5px dashed var(--ui-primary);
    border-radius: 999px;
    font-size: var(--fs-pequeno) !important;
    font-weight: 600;
    color: var(--ui-primary);
}

.politica__resumen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.politica__dato {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 1.25rem 0.75rem;
    border-radius: 18px;
    box-shadow: inset var(--shadow-card);
    text-align: center;
}
.politica__dato i { font-size: 1.6rem; color: var(--ui-accent); margin-bottom: 4px; }
.politica__dato strong { font-size: 0.95rem; color: var(--ui-ink); line-height: 1.3; }
.politica__dato span { font-size: var(--fs-pequeno); color: #6b7280; }

.politica__secciones { list-style: none; counter-reset: sec; margin: 0; padding: 0; display: flex; flex-direction: column; }
.politica__secciones > li {
    counter-increment: sec;
    position: relative;
    padding: 1.6rem 0 1.6rem 3.5rem;
    border-bottom: 1.5px dashed var(--ui-line);
}
.politica__secciones > li:last-child { border-bottom: 0; }
.politica__secciones > li::before {
    content: counter(sec, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 1.55rem;
    font-family: var(--second-font);
    font-size: 1.4rem;
    color: var(--ui-accent);
}
.politica__secciones h2 { margin: 0 0 0.6rem; font-size: 1.2rem; font-weight: 700; color: var(--ui-ink); }
main .politica__secciones p { margin: 0 0 0.6rem; color: #4b5563; }
main .politica__secciones p:last-child { margin-bottom: 0; }
.politica__secciones a { color: var(--ui-primary); font-weight: 600; }

.politica__tabla { margin: 0.25rem 0 0.9rem; border-radius: 14px; overflow: hidden; border: 1px solid var(--ui-line); background: #fff; }
.politica__tabla > div { display: flex; justify-content: space-between; padding: 0.7rem 1rem; border-bottom: 1px solid var(--ui-line); font-size: 0.95rem; color: var(--ui-ink); }
.politica__tabla > div:last-child { border-bottom: 0; }
.politica__tabla strong { color: var(--ui-primary); }
.politica__tabla-gratis { background: var(--ui-tint); }
.politica__tabla-gratis strong { color: #28a745 !important; }

.politica__contacto {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.4rem 1.6rem;
    border-radius: 20px;
    background: var(--ui-primary);
    color: #fff;
}
.politica__contacto strong { display: block; font-size: 1.05rem; }
.politica__contacto span { font-size: var(--fs-pequeno); opacity: 0.85; }
.politica__contacto .gracias__boton { background: #fff; color: var(--ui-primary); flex-shrink: 0; }
.politica__contacto .gracias__boton:hover { background: var(--ui-tint); color: var(--ui-primary); }

@media (max-width: 1023px) {
    .politica { padding-top: 140px; }
    .politica__resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .politica { padding: 120px 16px 0; }
    .politica__contenido { gap: 2rem; }
    .politica__secciones > li { padding-left: 2.75rem; }
    .politica__secciones > li::before { font-size: 1.15rem; }
    .politica__contacto { flex-direction: column; text-align: center; }
    .politica__contacto .gracias__boton { width: 100%; justify-content: center; }
}

/* Listas dentro de las páginas legales */
.politica__lista { margin: 0 0 0.75rem; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.politica__lista li { color: #4b5563; line-height: 1.6; font-size: var(--fs-texto); }
.politica__lista li::marker { color: var(--ui-accent); }
.politica__lista strong { color: var(--ui-ink); }
.politica__lista { list-style: disc !important; }
.politica__lista li { display: list-item; }

/* =====================================================================
   LIBRO DE RECLAMACIONES — mismo estilo que el pago y las políticas
   ===================================================================== */
.libro__resumen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.libro__form { display: flex; flex-direction: column; gap: 1.5rem; }
.libro__bloque { border: 0; margin: 0; min-width: 0; }
.libro__bloque legend { float: left; width: 100%; margin-bottom: 1.5rem; padding: 0; }
.libro__bloque legend + * { clear: both; }
.libro__num { background: var(--ui-primary); border-color: var(--ui-primary) !important; color: #fff !important; }

.libro__telefono { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; }
.libro__solo-lectura { background: #f5f6f7 !important; color: #6b7280 !important; }

.libro__aviso {
    padding: 1.1rem 1.25rem;
    border-radius: 16px;
    border: 1.5px dashed var(--ui-primary);
    background: #fff;
}
main .libro__aviso p { margin: 0 0 0.5rem; font-size: var(--fs-pequeno) !important; color: #4b5563; line-height: 1.6; }
main .libro__aviso p:last-child { margin-bottom: 0; }
.libro__aviso a { color: var(--ui-primary); font-weight: 600; }

.libro__enviar { margin-top: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

.libro .ss-main {
    min-height: 50px;
    padding: 0.55rem 0.9rem;
    border: 1.5px solid #dfe3e8 !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: var(--ui-ink) !important;
    font-size: 1rem;
}
.libro .ss-main.ss-open-below,
.libro .ss-main.ss-open-above { border-color: var(--ui-primary) !important; box-shadow: 0 0 0 3px rgba(70, 96, 122, 0.12); }

@media (max-width: 767px) {
    .libro__resumen { grid-template-columns: 1fr; }
    .libro__resumen .politica__dato { flex-direction: row; justify-content: flex-start; gap: 10px; text-align: left; padding: 0.9rem 1rem; }
    .libro__resumen .politica__dato i { margin: 0; }
    .libro__resumen .politica__dato span { margin-left: auto; text-align: right; }
}

/* "Ciencia y sabiduría": íconos de los KPI más grandes y botón ajustado a su texto */
.stat-icon-wrapper img { width: 60px !important; height: 60px !important; }
@media (max-width: 767px) { .stat-icon-wrapper img { width: 52px !important; height: 52px !important; } }

.boton_historia {
    width: auto !important;
    display: inline-flex !important;
    justify-content: center !important;
    padding: 0.85rem 1.6rem !important;
    font-size: 1rem !important;
    border-radius: 999px !important;
    align-self: flex-start;
}
@media (max-width: 1024px) { .boton_historia { align-self: center; } }

/* =====================================================================
   AJUSTES MÓVILES: recetas, galería de talleres, mapa de ubícanos,
   carrito y pago con barra fija abajo
   ===================================================================== */

/* Barra de envío gratis y barra fija: ocultas fuera del celular */
.carrito-envio,
.carrito-barra,
.btn-remove--movil { display: none; }

.carrito-cuenta { font-weight: 500; color: #6b7280; }

@media (max-width: 767px) {
    /* Talleres: sin flechas en el carrusel de recetas; fotos con margen a los lados */
    .recetas__carrusel .carrusel__flecha { display: none !important; }
    .seccion-talleres-simbiose .talleres-wrapper { padding-inline: 16px !important; box-sizing: border-box; }
    .talleres-fila-bottom { gap: 12px !important; }

    /* Ubícanos: las dos tarjetas con el mismo margen a izquierda y derecha */
    .search-main-content > .table-column,
    .search-main-content > .map-column,
    .table-column #container-tabla {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
    .table-column .empty-state { width: 100% !important; margin: 0 !important; box-sizing: border-box; }

    /* ---------- Carrito ---------- */
    .seccion-carrito { margin-bottom: 0 !important; padding-bottom: 190px !important; }
    .seccion-carrito .columna-derecha { display: none !important; }   /* el resumen pasa a la barra fija */
    .seccion-carrito .tarjeta-resumen { padding: 1.1rem !important; }
    .seccion-carrito .titulo-resumen { font-size: 1.1rem !important; margin-bottom: 1rem !important; }

    .carrito-envio {
        display: block;
        margin: 0 -1.1rem 0.5rem;
        padding: 1rem 1.1rem 0.9rem;
        background: var(--ui-tint);
    }
    .carrito-envio__barra { position: relative; height: 6px; margin: 10px 14px 12px 0; border-radius: 999px; background: #d4dde5; }
    .carrito-envio__relleno { height: 100%; width: 0; border-radius: 999px; background: var(--ui-primary); transition: width 0.4s ease; }
    .carrito-envio__camion {
        position: absolute;
        top: 50%;
        left: 0;
        width: 30px;
        height: 30px;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        background: #fff;
        border: 2px solid var(--ui-primary);
        color: var(--ui-primary);
        display: grid;
        place-items: center;
        font-size: 0.95rem;
        transition: left 0.4s ease;
    }
    main .carrito-envio__texto { margin: 0; font-size: var(--fs-pequeno) !important; color: var(--ui-ink); }
    .carrito-envio__texto span { color: var(--ui-accent); font-weight: 700; }
    .carrito-envio.is-completo .carrito-envio__relleno { background: #28a745; }
    .carrito-envio.is-completo .carrito-envio__camion { border-color: #28a745; color: #28a745; }

    /* Filas compactas: foto | nombre, sabores, precio | cantidad + tacho */
    .seccion-carrito .fila-producto {
        grid-template-columns: 1fr auto !important;
        grid-template-areas:
            "info   info"
            "qty    precio" !important;
        padding: 16px 0 !important;
    }
    .seccion-carrito .celda-info { padding: 0 !important; }
    .seccion-carrito .img-producto { width: 76px !important; height: 76px; background: #fff; border-radius: 12px !important; padding: 4px; }
    .btn-remove--escritorio { display: none !important; }
    .btn-remove--movil {
        display: inline-grid !important;
        position: static !important;
        place-items: center;
        width: 36px;
        height: 36px;
        margin-left: 10px;
        border-radius: 10px;
        font-size: 1.15rem !important;
        color: #6b7280 !important;
        background: #f3f1ea;
    }
    .seccion-carrito .precio-eliminar { gap: 0 !important; }
    .seccion-carrito .control-cantidad { border-radius: 10px !important; background: #f3f1ea !important; border: 0 !important; }

    /* Barra fija */
    .carrito-barra {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 90;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        background: #fff;
        border-top: 1px solid var(--ui-line);
        box-shadow: 0 -10px 28px rgba(31, 42, 55, 0.12);
        border-radius: 20px 20px 0 0;
    }
    .carrito-barra__total { display: flex; justify-content: space-between; align-items: baseline; }
    .carrito-barra__total span { font-size: 0.95rem; font-weight: 600; color: var(--ui-ink); }
    .carrito-barra__total strong { font-size: 1.25rem; font-weight: 800; color: var(--ui-primary); }
    .carrito-barra__boton {
        display: block;
        width: 100%;
        padding: 0.9rem;
        border: 0;
        border-radius: 999px;
        background: var(--ui-primary);
        color: #fff !important;
        text-align: center;
        font-size: 1rem;
        font-weight: 700;
        text-decoration: none;
        font-family: inherit;
        cursor: pointer;
    }
    .carrito-barra__boton--confirmar { background: #28a745; }
    .carrito-barra__boton--bloqueado { background: #9aa5b1; }
    .carrito-barra__boton:disabled { opacity: 0.6; }
    .carrito-barra__seguir { text-align: center; font-size: var(--fs-pequeno); font-weight: 600; color: var(--ui-primary); text-decoration: none; }

    /* Botones flotantes por encima de la barra */
    body:has(.carrito-barra) #wa_button { bottom: 170px !important; }
    body:has(.carrito-barra) .scrollup { bottom: 170px !important; }
    body:has(.carrito-barra) .footer { padding-bottom: 170px !important; }

}
@media (max-width: 767px) {
    .search-main-content > .table-column,
    .search-main-content > .map-column { min-width: 0 !important; flex: 1 1 100% !important; }
}

/* =====================================================================
   MÓVIL: espacios más compactos, precio a la izquierda en las cards y
   orden del detalle de producto (categoría, nombre, precio → foto → resto)
   ===================================================================== */
@media (max-width: 767px) {
    /* Inicio · "Ciencia y sabiduría": el texto más cerca de la foto */
    .container-esencia { row-gap: 20px !important; gap: 20px !important; }
    .esencia-contenido > .texto-principal:first-of-type { margin-top: 0 !important; }

    /* Cards de productos (catálogo y relacionados): precio a la izquierda, bolsa a la derecha */
    .products__content .products__price {
        text-align: left !important;
        padding-left: 0 !important;
        padding-right: calc(var(--card-boton) + 6px) !important;
    }

    /* Detalle de producto: categoría, nombre y precio arriba; luego la foto; luego lo demás */
    .product-detail-section .product-container { display: flex !important; flex-direction: column !important; gap: 0 !important; }
    .product-detail-section .product-content { display: contents !important; }
    .product-detail-section .product-header { order: 1 !important; margin-bottom: 1rem !important; }
    .product-detail-section .product-visuals { order: 2 !important; margin-bottom: 1.5rem !important; }
    .product-detail-section .product-content > :not(.product-header) { order: 3 !important; }
    main .product-detail-section .price-tag { margin-bottom: 0 !important; padding-bottom: 0 !important; border-bottom: 0 !important; }

    /* Talleres: el texto más cerca de "Fermentación y comunidad" */
    main > .contact:has(+ .seccion-talleres-simbiose) { padding-bottom: 0 !important; }
    main > .contact:has(+ .seccion-talleres-simbiose) > .promo-title { margin-bottom: 1.25rem !important; }

    /* Pago: sin el hueco grande arriba */
    .pago { padding-top: 44px !important; }
}

/* =====================================================================
   CARRITO · "También te podría gustar" (carrusel 4 / 3 / 2 por vista)
   ===================================================================== */
.sugeridos { max-width: 1200px; margin: 0 auto; padding-top: var(--gap-sec); }
.sugeridos__titulo { text-align: center; margin: 0 0 2rem !important; }
.sugeridos__carrusel .carrusel__viewport { padding: 6px 2px 10px; }

.sugerido {
    flex: 0 0 calc((100% - 4.5rem) / 4);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    padding: 1rem 1rem 0.9rem;
    border-radius: 20px;
    box-shadow: inset 0 -6px 18px rgba(70, 96, 122, 0.14);
}
.sugerido__enlace { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; }
.sugerido__foto { height: 170px; display: grid; place-items: center; margin-bottom: 0.75rem; }
.sugerido__foto img { max-height: 100%; max-width: 100%; object-fit: contain; transition: transform 0.3s ease; }
.sugerido:hover .sugerido__foto img { transform: scale(1.05); }
.sugerido__categoria { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ui-accent); }
.sugerido__nombre {
    margin-top: 2px;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ui-ink);
    min-height: 2.7em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sugerido__pie { display: flex; align-items: center; justify-content: space-between; margin-top: 0.6rem; gap: 8px; }
.sugerido__precio { font-family: "Lilita One", var(--second-font); font-size: 1.15rem; color: var(--ui-primary); }
.sugerido__agregar {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border: 0;
    border-radius: 10px;
    background: var(--ui-primary);
    color: #fff;
    font-size: 1.05rem;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.sugerido__agregar:hover { background: #33475b; }
.sugerido__agregar:disabled { opacity: 0.6; }

@media (max-width: 1024px) {
    .sugerido { flex-basis: calc((100% - 3rem) / 3); }
}
@media (max-width: 767px) {
    .sugeridos { padding-top: var(--gap-sec); }
    .sugeridos__carrusel { padding: 0 !important; }
    .sugerido { flex-basis: calc((100% - 1rem) / 2); padding: 0.8rem 0.75rem 0.75rem; }
    .sugeridos__carrusel .carrusel__viewport { gap: 1rem; }
    .sugerido__foto { height: 130px; }
    .sugerido__precio { font-size: 1rem; }
    .sugerido__agregar { width: 32px; height: 32px; }
}

/* Fotos de productos en el carrito y el resumen del pago: completas, sin recortes */
.seccion-carrito .img-producto { height: 72px !important; object-fit: contain !important; }
.pago-item__foto img { width: 56px !important; height: 56px !important; max-width: none !important; object-fit: contain !important; }
@media (max-width: 767px) {
    .seccion-carrito .img-producto { width: 64px !important; height: 80px !important; }
}
.sugerido__foto { display: block !important; overflow: hidden; }
.sugerido__foto img { display: block; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: contain !important; }
@media (max-width: 767px) {
    .sugeridos__carrusel .carrusel__flecha { display: none !important; }
}

/* Cards de productos: categoría en turquesa sobre el nombre (igual que "También te podría gustar") */
.products__content .products__categoria {
    display: block;
    margin-bottom: 2px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ui-accent);
    text-align: center;
}

@media (max-width: 767px) {
    /* Tienda: menos espacio entre el banner y los filtros */
    .products__container .shop__wrapper { margin-top: 32px !important; }
    .products__container .filter__card { margin-top: 0 !important; }
}

/* =====================================================================
   CARDS DE PRODUCTO UNIFICADAS (catálogo, relacionados y carrito)
   Todas usan el diseño .sugerido. Aquí se anulan las reglas antiguas de
   .products__card / .products__button cuando la card es .sugerido.
   ===================================================================== */
.products__content .products__card.sugerido {
    height: 100% !important;
    padding: 1rem 1rem 0.9rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: left !important;
    border-radius: 20px !important;
    background: transparent !important;
    box-shadow: inset 0 -6px 18px rgba(70, 96, 122, 0.14) !important;
    overflow: visible !important;
}
.products__card.sugerido h2.sugerido__nombre {
    margin: 2px 0 0 !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    color: var(--ui-ink) !important;
    text-transform: none !important;
    min-height: 2.7em !important;
    text-align: left !important;
}
.sugerido .products__button.sugerido__agregar {
    position: static !important;
    inset: auto !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    display: grid !important;
    place-items: center !important;
    background: var(--ui-primary) !important;
    color: #fff !important;
    font-size: 1.05rem !important;
    box-shadow: none !important;
}
.sugerido .products__button.sugerido__agregar i { margin: 0 !important; width: auto !important; height: auto !important; }
.sugerido__foto img.sugerido__img--lata { padding: 8% 0; box-sizing: border-box; }

@media (max-width: 767px) {
    .products__content .products__card.sugerido { padding: 0.8rem 0.75rem 0.75rem !important; }
    .sugerido .products__button.sugerido__agregar { width: 32px !important; height: 32px !important; }
}

/* Detalle de producto: el cursor de lupa solo cuando la foto tiene zoom (desde la 2.ª foto) */
.product-detail-section .main-card { cursor: default; }
.product-detail-section .main-card.con-zoom { cursor: zoom-in; }

/* Botón "Añadir al carrito" del banner: igual que los enlaces del banner */
button.hero__boton { border: 0; cursor: pointer; font-family: inherit; line-height: inherit; }
button.hero__boton:disabled { opacity: 0.7; cursor: wait; }

/* =====================================================================
   MODAL DE PROMOS (elige tus sabores) — rústico y minimalista
   Solo diseño: la lógica está en pack-modal.js y no cambia.
   ===================================================================== */
.pack-modal__fondo { background: rgba(31, 42, 55, 0.45); backdrop-filter: blur(4px); }

.pack-modal__card {
    background: var(--ui-bg);
    border: 1px solid var(--ui-line);
    border-radius: 24px;
    padding: 1.75rem 1.75rem 1.5rem;
    box-shadow: 0 24px 60px rgba(31, 42, 55, 0.22);
}

.pack-modal__cerrar {
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1.5px solid var(--ui-line);
    box-shadow: none;
    color: var(--ui-primary);
    display: grid;
    place-items: center;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.pack-modal__cerrar:hover { background: var(--ui-primary); color: #fff; border-color: var(--ui-primary); }

/* Cabecera: foto en un círculo punteado, etiqueta, nombre y precio */
.pack-modal__head {
    gap: 1rem;
    padding: 0 40px 1.25rem 0;
    border-bottom: 2px dashed var(--ui-line);
}
.pack-modal__img-box {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--ui-tint);
    border: 1.5px dashed var(--ui-primary);
    box-shadow: none;
    padding: 8px;
}
.pack-modal .badge {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    border: 1.5px dashed var(--ui-accent);
    color: var(--ui-accent);
    background: transparent;
    font-size: 0.66rem;
    letter-spacing: 0.1em;
}
.pack-modal__titulo {
    margin: 0.45rem 0 0.2rem;
    font-family: var(--second-font);
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 1.2;
    color: var(--ui-primary);
}
.pack-modal__precio {
    font-family: "Lilita One", var(--second-font);
    font-weight: 400;
    font-size: 1.35rem;
    color: var(--ui-ink);
}

/* Grupo: título en mayúsculas y contador tipo sello */
.pack-modal__cuerpo { margin-top: 1.25rem; }
.pack-selector .pack-grupo__head {
    align-items: center;
    padding-bottom: 0.6rem;
    border-bottom: 0;
}
.pack-selector .pack-grupo__titulo {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ui-ink);
}
.pack-selector .pack-grupo__contador {
    min-width: 52px;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    border: 1.5px dashed #b9c4ce;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: #7b8794;
    transition: all 0.2s ease;
}
.pack-selector .pack-grupo.is-completo .pack-grupo__contador {
    border-style: solid;
    border-color: var(--ui-primary);
    background: var(--ui-primary);
    color: #fff;
}
.pack-selector .pack-grupo.is-completo .pack-grupo__contador::before { content: "✓ "; }

/* Sabores: filas limpias con separador punteado */
.pack-selector .pack-opciones { border-top: 1px dashed var(--ui-line); }
.pack-selector .pack-opcion {
    gap: 0.85rem;
    padding: 0.7rem 0.6rem;
    margin: 0 -0.6rem;
    border-bottom: 1px dashed var(--ui-line);
    border-radius: 12px;
    transition: background-color 0.2s ease;
}
.pack-selector .pack-opcion.is-elegida { background: var(--ui-tint); border-bottom-color: transparent; }
.pack-selector .pack-opcion__img {
    width: 42px;
    height: 42px;
    padding: 4px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--ui-line);
}
.pack-selector .pack-opcion__nombre { font-size: 0.92rem; line-height: 1.35; color: #4b5563; }
.pack-selector .pack-opcion.is-elegida .pack-opcion__nombre { color: var(--ui-ink); font-weight: 600; }

/* Cantidad: − número + minimalista */
.pack-selector .pack-opcion__qty {
    gap: 0.35rem;
    padding: 0;
    background: transparent;
    box-shadow: none;
}
.pack-selector .pack-opcion__btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid #cfd6dd;
    background: #fff;
    color: var(--ui-primary);
    font-size: 1rem;
    display: grid;
    place-items: center;
    transition: all 0.15s ease;
}
.pack-selector .pack-opcion__btn[data-accion="mas"]:not(:disabled) {
    border-color: var(--ui-primary);
    background: var(--ui-primary);
    color: #fff;
}
.pack-selector .pack-opcion__btn:not(:disabled):hover { transform: scale(1.08); }
.pack-selector .pack-opcion__btn:disabled { border-style: dashed; color: #c3cbd3; background: transparent; }
.pack-selector .pack-opcion__num {
    min-width: 22px;
    font-family: "Lilita One", var(--second-font);
    font-weight: 400;
    font-size: 1.05rem;
    color: var(--ui-ink);
}

/* Botón */
.pack-modal__pie { padding-top: 1.25rem; }
.pack-modal .pack-modal__confirmar {
    border-radius: 999px !important;
    padding: 0.95rem !important;
    background: var(--ui-primary) !important;
    color: #fff !important;
    font-size: 1rem;
    font-weight: 700;
    box-shadow: 0 10px 22px rgba(70, 96, 122, 0.25);
}
.pack-modal .pack-modal__confirmar:disabled {
    opacity: 1;
    background: transparent !important;
    color: #9aa5b1 !important;
    border: 1.5px dashed #c3cbd3 !important;
    box-shadow: none;
}

@media (max-width: 767px) {
    .pack-modal__card { border-radius: 24px 24px 0 0; padding: 1.5rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom)); }
    .pack-modal__img-box { width: 64px; height: 64px; }
    .pack-modal__titulo { font-size: 1.1rem; }
}
.pack-modal .pack-modal__cuerpo { overflow-x: hidden; }
.pack-selector .pack-opcion { margin: 0; }
.pack-selector .pack-opcion__img { width: 42px !important; height: 42px !important; max-width: none !important; object-fit: contain !important; flex-shrink: 0; }

/* Detalle de producto: el selector de sabores con el mismo estilo que el modal */
.product-detail-section .pack-selector {
    margin-top: 1.5rem;
    padding: 1.25rem 1.25rem 0.75rem;
    border-radius: 20px;
    border: 1px solid var(--ui-line);
    background: #fff;
}
.product-detail-section .pack-selector .pack-grupo + .pack-grupo { margin-top: 1rem; }
.product-detail-section .pack-hint {
    margin: 0.75rem 0 0 !important;
    font-size: var(--fs-pequeno) !important;
    color: #6b7280;
}

/* =====================================================================
   AVISOS (SweetAlert2) — rústico y minimalista, como el resto de la web
   Solo diseño. Los colores que traen los avisos en línea (confirmButtonColor)
   se reemplazan por los de la marca.
   ===================================================================== */
div:where(.swal2-container).swal2-backdrop-show { background: rgba(31, 42, 55, 0.45) !important; backdrop-filter: blur(4px); }

.swal2-popup {
    width: min(420px, calc(100vw - 32px)) !important;
    padding: 2rem 1.75rem 1.6rem !important;
    border-radius: 24px !important;
    background: var(--ui-bg) !important;
    border: 1px solid var(--ui-line) !important;
    box-shadow: 0 24px 60px rgba(31, 42, 55, 0.22) !important;
    font-family: var(--body-font) !important;
}

/* Íconos: más pequeños y en los colores de la marca */
/* Íconos: se usan las medidas originales de SweetAlert (así nada se corta)
   y se reduce el ícono completo con font-size, que escala todas sus partes */
.swal2-icon { font-size: 0.8rem !important; margin: 0.25rem auto 1rem !important; }
.swal2-icon.swal2-success { border-color: var(--ui-accent) !important; }
.swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--ui-accent) !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(62, 168, 171, 0.3) !important; }
.swal2-icon.swal2-success [class^='swal2-success-circular-line'],
.swal2-icon.swal2-success .swal2-success-fix { background-color: var(--ui-bg) !important; }
.swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background-color: #d9776f !important; }
.swal2-icon.swal2-warning { border-color: #e2b25a !important; color: #d49a32 !important; }
.swal2-icon.swal2-info { border-color: var(--ui-primary) !important; color: var(--ui-primary) !important; }
.swal2-icon.swal2-question { border-color: var(--ui-primary) !important; color: var(--ui-primary) !important; }
.swal2-icon.swal2-error { border-color: #d9776f !important; }

/* Textos */
.swal2-title {
    padding: 0 !important;
    margin: 0 0 0.5rem !important;
    font-family: var(--second-font) !important;
    font-weight: 400 !important;
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
    color: var(--ui-primary) !important;
}
.swal2-html-container {
    margin: 0 !important;
    padding: 0.25rem 0.25rem 0 !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    color: #4b5563 !important;
}
.swal2-html-container p { margin: 0.35rem 0 !important; font-size: 0.95rem !important; }
.swal2-html-container strong { color: var(--ui-ink); }

/* Botones: píldoras de la marca */
.swal2-actions {
    width: 100% !important;
    margin: 1.4rem 0 0 !important;
    padding-top: 1.1rem !important;
    border-top: 2px dashed var(--ui-line) !important;
    gap: 0.6rem !important;
}
.swal2-styled {
    margin: 0 !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 999px !important;
    font-family: var(--body-font) !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease !important;
}
.swal2-styled:focus { box-shadow: 0 0 0 3px rgba(70, 96, 122, 0.2) !important; }
.swal2-styled:active { transform: scale(0.97); }
.swal2-styled.swal2-confirm { background: var(--ui-primary) !important; color: #fff !important; }
.swal2-styled.swal2-confirm:hover { background: #33475b !important; }
.swal2-styled.swal2-cancel,
.swal2-styled.swal2-deny {
    background: transparent !important;
    color: var(--ui-primary) !important;
    border: 1.5px solid #cfd6dd !important;
}
.swal2-styled.swal2-cancel:hover,
.swal2-styled.swal2-deny:hover { background: #f3f1ea !important; }

/* Barra del temporizador (avisos que se cierran solos) */
.swal2-timer-progress-bar { background: var(--ui-accent) !important; height: 3px !important; }
.swal2-close { color: #9aa5b1 !important; }
.swal2-close:hover { color: var(--ui-primary) !important; }

@media (max-width: 767px) {
    .swal2-popup { padding: 1.6rem 1.25rem 1.3rem !important; }
    .swal2-title { font-size: 1.3rem !important; }
    .swal2-actions { flex-direction: column-reverse; }
    .swal2-actions .swal2-styled { width: 100%; }
}

/* Pack de contenido fijo ("Incluye"): sin botones, solo la lista */
.pack-incluye {
    display: block;
    margin-top: 2px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ui-accent);
}
.pack-grupo--fijo .pack-grupo__contador,
.pack-grupo--fijo .pack-opcion__btn { display: none !important; }
.pack-grupo--fijo .pack-opcion { background: transparent !important; }
.pack-grupo--fijo .pack-opcion__nombre { color: var(--ui-ink) !important; font-weight: 600; }
.pack-grupo--fijo .pack-opcion__num::before { content: "×"; }
.pack-grupo--fijo .pack-opcion__num { color: var(--ui-primary) !important; }

/* "Razones": botella de vaca 1L. Su foto trae menos margen que la anterior,
   se reduce para que la botella mida lo mismo y quede centrada en el círculo */
.kefir-premium-showcase .home__img--vaca { scale: 0.85; }

/* Tiendas: logos con tamaño fijo (2:1) para que la franja no dependa de que
   carguen; animación en su propia capa (iPhone) y un poco más rápida */
.home-tiendas__item img { aspect-ratio: 2 / 1; width: 200px !important; }
.home-tiendas__marquee {
    animation-duration: 24s !important;
    will-change: transform;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
}
@keyframes tiendas-desliza {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}
@media (max-width: 767px) {
    .home-tiendas__item img { width: 160px !important; }
    /* Menos aire arriba y abajo: sin el subtítulo oculto que reservaba espacio */
    .home-tiendas .home-seccion__sub--oculto { display: none; }
    .home-tiendas .home-seccion__head { margin-bottom: 1.25rem; }
    .home-tiendas { padding-bottom: var(--sec-y) !important; }
}