/* =========================================================
   FARMAVITAE — LANDING PRINCIPAL (HTML_inicio_farmavitae)
   Hoja exclusiva de esta página. Reutiliza al 100% las variables
   y componentes de estilos.css y mercado.css (--brand, --accent,
   .btn-mkt-primary, .hero-mercado, .card, .tienda-card,
   .producto-card-mkt, .grid-productos, etc.) SIN redefinirlas.

   REDISEÑO PREMIUM — v2
   Todo lo nuevo usa el prefijo "ini-" para no chocar nunca con
   clases de estilos.css / mercado.css. No se eliminó ninguna
   clase de la v1: solo se amplió y se mejoró visualmente.
   ========================================================= */

/* ============ RESET DE APOYO PARA ICONOS SVG ============ */
.ini-ico { width: 20px; height: 20px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ini-ico-sm { width: 16px; height: 16px; }
.ini-ico-lg { width: 28px; height: 28px; }

/* ============ ENLACE "SALTAR AL CONTENIDO" (accesibilidad) ============ */
.ini-skip-link {
    position: absolute;
    left: -999px;
    top: auto;
    background: var(--brand);
    color: var(--white);
    padding: 10px 18px;
    border-radius: var(--r-full);
    z-index: 2000;
    font-weight: 700;
    font-size: var(--text-sm);
}
.ini-skip-link:focus {
    left: var(--space-4);
    top: var(--space-4);
}

/* ============ FOCUS VISIBLE GLOBAL (accesibilidad) ============ */
a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ============ BARRA DE CONFIANZA SUPERIOR ============ */
.barra-confianza {
    background: var(--brand-dark);
    color: rgba(255,255,255,.88);
}
.barra-confianza-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 7px var(--space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    font-size: 12px;
}
.barra-confianza-lista {
    display: flex;
    gap: var(--space-5);
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}
.barra-confianza-lista li { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.barra-confianza-lista .ini-ico { width: 14px; height: 14px; }
.barra-confianza-ayuda {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.barra-confianza-ayuda:hover { text-decoration: underline; }
@media (max-width: 720px) { .barra-confianza-ayuda { display: none; } }

/* ============ NAVBAR: sticky + blur + encogimiento en scroll ============ */
.nav-sitio {
    position: sticky;
    top: 0;
    /* El carrito-drawer ya NO vive dentro del navbar (se mueve a
       document.body por JS al iniciar), así que debe volver a un z-index
       bajo — menor al del panel (1000) y al fondo oscuro (999). */
    z-index: 40;
    background: var(--white);
    transition: box-shadow .25s ease, padding .25s ease;
}
.nav-sitio.ini-nav-encogida {
    box-shadow: 0 8px 24px rgba(6,37,68,.10);
}
.nav-sitio.ini-nav-encogida .nav-sitio-inner { padding-top: 8px; padding-bottom: 8px; }
.nav-sitio-inner { transition: padding .25s ease; }
.nav-sitio-links a[href="mercado.html"] {
    position: relative;
    font-weight: 800;
    color: var(--brand);
}
.nav-sitio-iconos .ini-ico { width: 19px; height: 19px; }
.nav-sitio-iconos > span,
.btn-nav-carrito {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ---- Carrito: badge con cantidad, drawer lateral ---- */

/* Convertimos el panel del carrito en un drawer lateral tipo Shopify.
   No se toca la lógica de apertura/cierre (sigue viviendo en
   farmavitae-carrito.js vía la clase .oculto): solo se reposiciona
   visualmente y se anima con transform + un fondo oscuro (ini-carrito-fondo)
   que agrega inicio.js sin tocar el archivo del carrito. */
.panel-carrito {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(420px, 100vw);
    max-width: 100vw;
    border-radius: 0;
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.4,0,.2,1);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    box-shadow: -18px 0 40px rgba(6,37,68,.18);
    background: var(--white);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.panel-carrito:not(.oculto) { transform: translateX(0); }
/* Un solo scroll para todo el drawer (ítems + pasos del checkout), con el
   encabezado fijo arriba — ver el mismo comentario en mercado.css. */
.panel-carrito { overflow-y: auto; }
.panel-carrito-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--white);
}
.panel-carrito-cuerpo { flex: none; overflow-y: visible; max-height: none; }
.ini-carrito-fondo {
    position: fixed;
    inset: 0;
    background: rgba(6,37,68,.45);
    backdrop-filter: blur(2px);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}
.ini-carrito-fondo.ini-visible { opacity: 1; pointer-events: auto; }
body.ini-carrito-abierto { overflow: hidden; }

/* ============ HERO ============ */
.hero-mercado-wrap { position: relative; overflow: hidden; }

/* Saludo + historias y barra de progreso a envío gratis — SOLO celular
   (en escritorio el hero ya cumple ese rol de bienvenida, y hay más
   espacio para verlo todo de una, así que estos elementos extra
   estorbarían más de lo que ayudan ahí). */
.ini-saludo-seccion { display: none !important; }
@media (max-width: 640px) {
    .ini-saludo-seccion {
        display: block !important;
        /* Tarjeta flotante con esquinas redondeadas y sombra suave, en
           vez de un rectángulo pegado de borde a borde — se siente más
           como un componente cuidado de la interfaz, no como una franja
           de fondo. Fondo con degradado sutil de marca (mismo lenguaje
           visual que el resto del sitio: radiales azul + turquesa). */
        background:
            radial-gradient(480px 220px at 15% -20%, rgba(0,91,170,.07), transparent 60%),
            radial-gradient(420px 200px at 100% 0%, rgba(25,211,211,.09), transparent 55%),
            var(--white);
        margin: var(--space-4) var(--space-4) 0;
        border-radius: 22px;
        padding: 20px var(--space-4) var(--space-4);
        box-shadow: 0 10px 30px -14px rgba(0,40,90,.14), 0 1px 3px rgba(0,40,90,.06);
        border: 1px solid color-mix(in srgb, var(--brand) 7%, transparent);
    }
    .ini-saludo-texto {
        margin: 0;
        font-size: 13px;
        font-weight: 700;
        color: var(--brand);
        letter-spacing: .01em;
    }
    .ini-saludo-titulo {
        margin: 3px 0 0;
        font-family: var(--font-display);
        font-weight: 800;
        font-size: 22px;
        color: var(--ink);
    }
    .ini-stories-fila {
        display: flex;
        gap: 18px;
        overflow-x: auto;
        padding: var(--space-4) 2px 6px;
        scrollbar-width: none;
    }
    .ini-stories-fila::-webkit-scrollbar { display: none; }
    .ini-story-item {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 7px;
        text-decoration: none;
        color: var(--ink);
        width: 64px;
        transition: transform .15s ease;
    }
    .ini-story-item:active { transform: scale(.94); }
    .ini-story-aro {
        width: 62px;
        height: 62px;
        border-radius: 50%;
        padding: 3px;
        background: linear-gradient(135deg, var(--accent) 0%, var(--brand-mid) 100%);
        box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--brand) 50%, transparent);
    }
    .ini-story-aro-destacada { background: linear-gradient(135deg, #FF6B6B, #FFB84D); box-shadow: 0 6px 16px -6px rgba(255,107,107,.5); }
    .ini-story-aro-int {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: var(--white);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
    }
    .ini-story-item span:last-child { font-size: 11px; font-weight: 700; text-align: center; letter-spacing: -.01em; }
    /* Buscador debajo de las historias — mismo componente que el del
       hero (pill blanca con sombra), pero sin el margen vertical grande
       que tenía pensado para flotar dentro del hero. */
    .ini-buscador-movil { display: none; }

    /* Las secciones de confianza (¿Por qué Farmavitae?, Sobre
       Farmavitae/Creemos en una vida mejor, Farmavitae Market) ocupan
       mucho espacio en celular — se ocultan por defecto y se
       reemplazan por una tarjeta chica; se revelan solo al tocarla
       (clase .mostrar-confianza, ver inicio.js). En escritorio se ven
       siempre igual que antes (la regla de abajo solo aplica dentro de
       este @media). */
    .seccion-confianza-farmavitae { display: none; }
    .seccion-confianza-farmavitae.mostrar-confianza { display: block; }
    .ini-teaser-confianza-movil { display: block; margin: var(--space-4) var(--space-4) 0; }
}

.ini-teaser-confianza-movil { display: none; }
.ini-teaser-confianza-boton {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    background: var(--white);
    border: 1px solid color-mix(in srgb, var(--brand) 10%, transparent);
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 0 6px 20px -12px rgba(0,40,90,.14);
    cursor: pointer;
    text-align: left;
}
.ini-teaser-confianza-logo { width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; }
.ini-teaser-confianza-texto { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ini-teaser-confianza-texto strong { font-size: 14px; color: var(--ink); }
.ini-teaser-confianza-texto span:last-child { font-size: 12.5px; color: var(--ink-muted); }
.ini-teaser-confianza-boton .ini-ico { color: var(--ink-muted); flex-shrink: 0; }

.hero-mercado-wrap::before,
.hero-mercado-wrap::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .35;
    z-index: 0;
    pointer-events: none;
}
.hero-mercado-wrap::before {
    width: 420px; height: 420px;
    background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
    top: -180px; right: -120px;
}
.hero-mercado-wrap::after {
    width: 360px; height: 360px;
    background: radial-gradient(circle, var(--brand) 0%, transparent 70%);
    bottom: -160px; left: -140px;
}
.hero-mercado, .hero-mercado-texto, .hero-inicio-visual { position: relative; z-index: 1; }

.ini-hero-kicker-nuevo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--accent-dim, #E6F7F7);
    color: #0f7a7a;
    font-weight: 700;
    font-size: var(--text-xs);
    padding: 5px 12px;
    border-radius: var(--r-full);
    margin-bottom: var(--space-3);
}

/* ---- Buscador principal del hero ---- */
.ini-buscador { position: relative; max-width: 560px; margin: var(--space-5) 0; }
.ini-buscador-form {
    display: flex;
    align-items: center;
    background: var(--white);
    border: 1px solid var(--surface-3);
    border-radius: var(--r-full);
    box-shadow: var(--shadow-lg);
    padding: 6px 6px 6px 20px;
    gap: 8px;
    transition: box-shadow .2s ease, border-color .2s ease;
}
.ini-buscador-form:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px var(--accent-dim, #E6F7F7), var(--shadow-lg);
}
.ini-buscador-form .ini-ico { color: var(--ink-muted); }
.ini-buscador-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: var(--text-sm);
    color: var(--ink);
    padding: 10px 0;
}
.ini-buscador-input::placeholder { color: var(--ink-muted); }
.ini-buscador-btn {
    border: none;
    background: var(--brand);
    color: var(--white);
    font-weight: 700;
    font-size: var(--text-sm);
    padding: 12px 22px;
    border-radius: var(--r-full);
    cursor: pointer;
    transition: background .2s ease, transform .15s ease;
    white-space: nowrap;
}
.ini-buscador-btn:hover { background: var(--brand-dark); transform: translateY(-1px); }

.ini-buscador-sugerencias {
    position: absolute;
    top: calc(100% + 8px);
    left: 0; right: 0;
    background: var(--white);
    border: 1px solid var(--surface-3);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-3);
    z-index: 30;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    max-height: min(420px, 70vh);
    overflow-y: auto;
}
.ini-buscador-sugerencias.ini-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.ini-buscador-sugerencias.ini-buscador-sugerencias-flotante { position: fixed; right: auto; z-index: 200; }
.ini-buscador-sugerencias-titulo {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-muted);
    font-weight: 700;
    margin: 4px 8px 8px;
}
.ini-buscador-sugerencia {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 8px;
    border-radius: 10px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--ink-light);
    text-decoration: none;
}
.ini-buscador-sugerencia:hover, .ini-buscador-sugerencia:focus-visible { background: var(--surface-2); }
.ini-buscador-sugerencia img { width: 40px; height: 40px; border-radius: 8px; object-fit: contain; background: var(--surface-2); flex-shrink: 0; }
.ini-buscador-sugerencia-inicial {
    width: 40px; height: 40px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--brand));
    color: var(--white);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 800;
    flex-shrink: 0;
}
.ini-buscador-sugerencia-texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ini-buscador-sugerencia-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ini-buscador-sugerencia-marca { font-size: 11px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .03em; font-weight: 700; }
.ini-buscador-sugerencia small { color: var(--ink-muted); margin-left: auto; font-weight: 700; flex-shrink: 0; }
.ini-buscador-sugerencia-precio { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; margin-left: auto; flex-shrink: 0; }
.ini-buscador-sugerencia-precio small { margin-left: 0; color: var(--brand); }
.ini-buscador-sugerencia-antes { font-size: 10px; color: var(--ink-muted); text-decoration: line-through; }
.ini-buscador-sugerencia-oferta {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #E4483C;
    background: rgba(228,72,60,.1);
    padding: 1px 6px;
    border-radius: var(--r-full);
}
.ini-buscador-vacio { padding: var(--space-4) var(--space-2); text-align: center; color: var(--ink-muted); font-size: var(--text-sm); }

/* ---- Hero visual: collage con glassmorphism ---- */
.hero-inicio-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
}
.hero-inicio-svg-wrap { position: relative; width: 100%; max-width: 380px; }
.hero-inicio-svg-wrap svg { width: 100%; height: auto; display: block; }

/* partículas suaves */
.ini-hero-particula {
    position: absolute;
    border-radius: 50%;
    background: var(--accent);
    opacity: .5;
    animation: ini-flotar 6s ease-in-out infinite;
}
.ini-hero-particula:nth-child(2) { animation-delay: -2s; background: var(--brand); }
.ini-hero-particula:nth-child(3) { animation-delay: -4s; }
@keyframes ini-flotar {
    0%, 100% { transform: translateY(0) translateX(0); }
    50% { transform: translateY(-14px) translateX(6px); }
}

.hero-inicio-flotante {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(10px) saturate(1.3);
    -webkit-backdrop-filter: blur(10px) saturate(1.3);
    border: 1px solid rgba(255,255,255,.6);
    border-radius: var(--r-full);
    box-shadow: var(--shadow-lg);
    padding: 10px 16px;
    font-size: var(--text-xs);
}
.hero-inicio-flotante .ini-ico { color: var(--brand); }
.hero-inicio-flotante strong { font-family: var(--font-display); font-size: var(--text-md); color: var(--brand); line-height: 1; }
.hero-inicio-flotante span { color: var(--ink-muted); display: block; }
.hero-inicio-flotante-1 { top: -8%; left: -10%; }
/* bottom más negativo que el de -1 a propósito: a -4% esta insignia
   quedaba encima de la tarjeta de marca #4 (abajo a la derecha),
   tapándole el nombre — bajarla la saca del área de las tarjetas. */
.hero-inicio-flotante-2 { bottom: -9%; right: -8%; }
@media (max-width: 640px) {
    .hero-inicio-flotante-1 { left: 0; top: -6%; }
    .hero-inicio-flotante-2 { right: 0; }
    /* Barra de confianza (Envíos rápidos / Productos 100% originales /
       Compra segura) en una sola línea, más chica, en vez de partirse
       en varias filas — mismo tratamiento que ya tiene el Marketplace,
       para que el encabezado se vea igual en todo el sitio. */
    .barra-confianza-inner { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 7px var(--space-4); }
    .barra-confianza-lista { flex-wrap: nowrap; gap: var(--space-3); font-size: 10px; }
    .barra-confianza-lista li { gap: 4px; }
    .barra-confianza-lista .ini-ico { width: 11px; height: 11px; }
}

/* ---- Collage de productos flotantes (glassmorphism, estilo campaña) ---- */
.ini-hero-collage {
    position: relative;
    width: 100%;
    max-width: 420px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
}
.ini-hero-collage-tarjeta {
    position: absolute;
    background: rgba(255,255,255,.6);
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    border: 1px solid rgba(255,255,255,.7);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    padding: 10px;
    text-align: center;
    animation: ini-flotar 7s ease-in-out infinite;
}
.ini-hero-collage-tarjeta img { width: 100%; aspect-ratio: 1/1; object-fit: contain; background: var(--white); border-radius: 10px; display: block; padding: 6px; box-sizing: border-box; }
.ini-hero-collage-iniciales {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 10px;
    background: var(--accent-dim, #E6F7F7);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--text-md);
}
.ini-hero-collage-tarjeta span { display: block; font-size: 10px; font-weight: 700; color: var(--ink-light); margin-top: 6px; }
.ini-hero-collage-tarjeta:nth-child(1) { width: 34%; top: 2%; left: 4%; animation-delay: -1s; }
.ini-hero-collage-tarjeta:nth-child(2) { width: 30%; top: 8%; right: 0; animation-delay: -3s; }
.ini-hero-collage-tarjeta:nth-child(3) { width: 32%; bottom: 4%; left: 0; animation-delay: -5s; }
.ini-hero-collage-tarjeta:nth-child(4) { width: 30%; bottom: 0; right: 6%; animation-delay: -2s; }
.ini-hero-collage-tarjeta:nth-child(5) { width: 26%; top: 38%; left: 36%; animation-delay: -4s; z-index: 2; }

.fila-confianza-hero {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    margin-bottom: var(--space-6);
}
.fila-confianza-hero span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ink-light);
}
.fila-confianza-hero .ini-ico { color: #0f7a7a; }

/* ============ TÍTULO DE SECCIÓN REUTILIZABLE ============ */
.ini-seccion-cabecera { text-align: center; margin-bottom: var(--space-7); }
.ini-seccion-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: 10px;
}
.ini-seccion-eyebrow::before {
    content: '';
    display: inline-block;
    width: 22px;
    height: 2px;
    border-radius: var(--r-full);
    background: linear-gradient(90deg, var(--accent), var(--brand));
}
.ini-seccion-cabecera h2 { margin: 0 0 var(--space-2); letter-spacing: -.01em; }
.ini-seccion-cabecera p { color: var(--ink-muted); margin: 0; max-width: 52ch; margin-inline: auto; line-height: 1.65; }

/* ============ BENEFICIOS ============ */
.ini-beneficios {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
    margin: var(--space-6) 0 var(--space-7);
}
@media (max-width: 960px) { .ini-beneficios { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ini-beneficios { grid-template-columns: 1fr; } }
.ini-beneficio-card {
    background: var(--white);
    border: 1px solid var(--surface-3);
    border-radius: var(--r-lg);
    padding: var(--space-5);
    text-align: left;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.ini-beneficio-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}
.ini-beneficio-ico {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-dim, #E6F7F7), color-mix(in srgb, var(--brand) 8%, transparent));
    border: 1px solid color-mix(in srgb, var(--brand) 10%, transparent);
    color: var(--brand);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: var(--space-4);
    transition: transform .25s ease, background .25s ease;
}
.ini-beneficio-card:hover .ini-beneficio-ico, .porque-card:hover .ini-beneficio-ico { transform: scale(1.08) rotate(-4deg); background: linear-gradient(135deg, var(--accent), var(--brand)); color: var(--white); }
.ini-beneficio-card h3 { font-family: var(--font-display); font-size: var(--text-base); margin: 0 0 6px; color: var(--ink); }
.ini-beneficio-card p { margin: 0; color: var(--ink-muted); font-size: var(--text-sm); line-height: 1.55; }

/* ============ BARRA DE MARCAS (carrusel automático) ============ */
.ini-marcas { margin-bottom: var(--space-7); }
.ini-marcas-viewport {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ini-marcas-track {
    display: flex;
    gap: var(--space-6);
    width: max-content;
    animation: ini-marcas-scroll 28s linear infinite;
}
.ini-marcas-viewport:hover .ini-marcas-track { animation-play-state: paused; }
@keyframes ini-marcas-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
.ini-marca-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 64px;
    padding: 0 var(--space-6);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--text-lg);
    color: var(--ink-muted);
    text-transform: uppercase;
    white-space: nowrap;
    opacity: .8;
    transition: opacity .2s ease, color .2s ease;
    text-decoration: none;
    cursor: pointer;
}
.ini-marca-item img { height: 32px; width: 32px; object-fit: contain; border-radius: 6px; background: var(--white); flex-shrink: 0; }
.ini-marca-item:hover { opacity: 1; color: var(--brand); }

/* ============ OFERTAS DE LA SEMANA ============ */
.ini-ofertas-seccion {
    position: relative;
    background: linear-gradient(135deg, var(--brand-dark), var(--brand));
    background-size: cover;
    background-position: center;
    border-radius: var(--r-lg);
    padding: var(--space-7) var(--space-6);
    margin-bottom: var(--space-7);
    color: var(--white);
    overflow: hidden;
    isolation: isolate;
}
/* Capa de imagen real de fondo (el producto destacado de la oferta,
   puesta vía JS en pintarOfertas) — desenfocada y oscurecida con un
   degradado encima para que el texto y las tarjetas blancas mantengan
   contraste, en vez de un color plano sin textura. */
.ini-ofertas-seccion::before {
    content: '';
    position: absolute;
    inset: -20px;
    background-image: var(--ini-ofertas-fondo, none);
    background-size: cover;
    background-position: center;
    filter: blur(18px) saturate(1.15);
    transform: scale(1.1);
    opacity: .55;
    z-index: -2;
}
.ini-ofertas-seccion::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand-dark) 92%, transparent), color-mix(in srgb, var(--brand) 88%, transparent));
    z-index: -1;
}
.ini-ofertas-seccion .ini-seccion-cabecera { color: var(--white); }
.ini-ofertas-seccion .ini-seccion-cabecera h2 { color: var(--white) !important; }
.ini-ofertas-seccion .ini-seccion-eyebrow { color: var(--accent); }
.ini-ofertas-seccion .ini-seccion-cabecera p { color: rgba(255,255,255,.75); }
.ini-ofertas-grid {
    display: flex;
    align-items: stretch;
    gap: var(--space-5);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: var(--space-2) var(--space-2) var(--space-3);
    scrollbar-width: thin;
}
.ini-ofertas-grid::-webkit-scrollbar { height: 6px; }
.ini-ofertas-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,.35); border-radius: var(--r-full); }
/* Con 1-3 ofertas activas, centradas — si no, queda mucho espacio vacío a
   la derecha en vez de verse como una vitrina bien compuesta. */
.ini-ofertas-grid-centrado { justify-content: center; }
/* Las tarjetas de oferta ahora son las mismas tarjetas de producto
   compartidas (con badges, favorito y vista previa) — solo se les da un
   ancho fijo para el carrusel, igual que en "Novedades"/"Más vendidos". */
.ini-ofertas-grid > .producto-card-mkt {
    flex: 0 0 230px;
    width: 230px;
    scroll-snap-align: start;
    box-shadow: var(--shadow-lg);
    /* La tarjeta comparte una regla base con un fondo casi-blanco
       (98% + transparencia) pensada para descansar sobre un fondo claro;
       aquí, sobre el degradado oscuro de esta sección, esa pequeña
       transparencia sí se notaba y bajaba el contraste del texto. Se
       fuerza blanco 100% sólido solo en este carrusel. */
    background: var(--white) !important;
}

.ini-ofertas-cta { text-align: center; margin-top: var(--space-6); }
.ini-ofertas-cta .btn-mkt-secundario {
    background: var(--white);
    color: var(--brand) !important;
    border-color: var(--white);
}
.ini-ofertas-cta .btn-mkt-secundario:hover { background: var(--accent); border-color: var(--accent); color: var(--brand-dark) !important; }
.ini-ofertas-vacio { text-align: center; color: rgba(255,255,255,.8); padding: var(--space-5) 0; }

/* ============ CATEGORÍAS ============ */
/* El diseño real vive en mercado.css (.fila-categorias-hero,
   .categoria-hero-item, .categoria-hero-ico) — antes había una
   versión DUPLICADA aquí, distinta a la de mercado.css. Como esta
   hoja se carga después en esta página, esa versión le ganaba a la
   de mercado.css, y por eso Inicio y Marketplace se veían distintos
   aunque comparten el mismo HTML/JS. Se quita para que ambas páginas
   usen siempre la misma regla, sin importar cuál se edite después.
*/

/* ============ SECCIONES DE PRODUCTOS EN CARRUSEL (nuevos / más vendidos) ============ */
.seccion-catalogo { margin-bottom: 56px; }

.ini-productos-scroll {
    display: flex;
    gap: var(--space-5);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--space-3);
    scrollbar-width: thin;
}
.ini-productos-scroll::-webkit-scrollbar { height: 6px; }
.ini-productos-scroll::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: var(--r-full); }
/* Las 3 secciones de producto de Inicio (Destacados, Recién llegados,
   Más vendidos) muestran la imagen COMPLETA, sin recortar — a
   diferencia del catálogo del Marketplace, que sí recorta para llenar
   el cuadro. Se usa "contain" en vez de "cover", con fondo blanco para
   rellenar el espacio que quede alrededor. */
.ini-productos-scroll .producto-card-img,
#grid-productos-inicio .producto-card-img {
    object-fit: contain;
    background: var(--white);
    padding: 10px;
    box-sizing: border-box;
}

.ini-productos-scroll > .producto-card-mkt {
    flex: 0 0 230px;
    width: 230px;
    scroll-snap-align: start;
    /* Se pisa el "height: 100%" de la regla base a propósito — dentro
       de esta fila (que no tiene una altura propia definida), ese
       100% se comporta de forma poco confiable según el navegador, y
       terminaba impidiendo que las tarjetas se estiraran parejo: las
       que tenían más contenido (por ejemplo, con "En promoción" o
       "Envío gratis") se veían más altas, y las demás se quedaban con
       su tamaño natural más chico, en vez de igualarse todas a la más
       alta de la fila (que es el comportamiento normal de una fila
       flexible, sin necesidad de forzar nada). */
    height: auto;
    min-height: 460px;
}
.ini-productos-scroll > .producto-card-mkt .producto-card-descripcion {
    max-height: 50px;
}

/* ============ TARJETA DE PRODUCTO: badges + favorito ============ */
.producto-card-mkt {
    position: relative;
    /* Todas las tarjetas de esta página viven en filas flex (scroll horizontal
       o el grid de ofertas), así que se estiran a la misma altura; convertimos
       cada tarjeta en columna para que "Agregar" / "Ir al perfil" siempre
       queden a la misma altura, sin importar si el precio ocupa una o dos líneas. */
    display: flex;
    flex-direction: column;
    height: 100%;
    cursor: pointer;
}
.producto-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.producto-card-acciones {
    margin-top: auto;
    padding-top: var(--space-3);
}
.producto-card-badges {
    position: absolute;
    top: 10px; left: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 2;
}
.producto-card-badge {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .02em;
    padding: 4px 8px;
    border-radius: var(--r-full);
    color: var(--white);
    text-transform: uppercase;
}
.producto-card-badge-nuevo { background: var(--brand); }
.producto-card-badge-oferta { background: #E4483C; }
.producto-card-badge-original { background: #0f9a7a; }
.producto-card-badge-agotado { background: var(--ink-muted); }
.producto-card-badge-destacado { background: #7c4dff; }
.producto-card-badge-2x1 { background: #F5A623; color: #4a3200; }
.producto-card-fav {
    position: absolute;
    top: 10px; right: 10px;
    z-index: 2;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(4px);
    border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: var(--ink-muted);
    transition: color .18s ease, transform .18s ease;
}
.producto-card-fav:hover { transform: scale(1.08); }
.producto-card-fav.ini-activo { color: #E4483C; }
.producto-card-fav.ini-activo .ini-ico { fill: currentColor; }
.producto-card-envio-gratis {
    font-size: 11px;
    color: #0f9a7a;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}
.producto-card-stock {
    font-size: 11px;
    color: var(--ink-muted);
    margin-top: 2px;
}

/* Todas las tarjetas de esta página con el mismo tamaño, sin importar si el
   nombre es corto/largo, si el producto está en promoción (bloque de precio
   más alto) o si trae descripción: se recorta el texto y se reserva el
   espacio del precio, en vez de depender solo del "stretch" del contenedor. */
.producto-card-nombre {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 36px;
}
.producto-card-descripcion {
    min-height: 34px;
    max-height: 50px;
    overflow-y: auto;
    font-size: var(--text-xs);
    color: var(--ink-muted);
    line-height: 1.5;
    margin: 4px 0 0;
}
.producto-card-descripcion::-webkit-scrollbar { width: 4px; }
.producto-card-descripcion::-webkit-scrollbar-track { background: var(--surface-3); border-radius: 4px; }
.producto-card-descripcion::-webkit-scrollbar-thumb { background: var(--ink-subtle, var(--surface-3)); border-radius: 4px; }
.producto-card-precio { min-height: 54px; }
.producto-card-meta { min-height: 34px; }

/* ============ CÓMO FUNCIONA ============ */
.seccion-como-funciona { margin-bottom: var(--space-7); text-align: center; }
.seccion-como-funciona h2 { margin-bottom: var(--space-2); }
.como-funciona-sub { color: var(--ink-muted); margin: 0 0 var(--space-6); }
.pasos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-5);
    text-align: left;
}
.paso-card {
    background: var(--white);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5);
    position: relative;
    border: 1px solid var(--surface-3);
}
.paso-card-num {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--brand);
    color: var(--white);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 800;
    margin-bottom: var(--space-4);
}
.paso-card h3 { font-family: var(--font-display); font-size: var(--text-base); margin: 0 0 var(--space-2); color: var(--ink); }
.paso-card p { margin: 0; color: var(--ink-muted); font-size: var(--text-sm); line-height: 1.55; }

/* ============ ¿POR QUÉ FARMAVITAE? ============ */
.ini-porque { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); margin-bottom: var(--space-7); }
@media (max-width: 1080px) { .ini-porque { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) {
    .ini-porque { grid-template-columns: 1fr 1fr; }
    /* Son 5 tarjetas en una grilla de 2 columnas — la última queda sola
       en su fila, pegada a la izquierda por defecto. Se centra para
       que no se vea descuadrada. */
    .ini-porque .porque-card:last-child { grid-column: 1 / -1; max-width: 50%; margin: 0 auto; }
}
.porque-card {
    text-align: center;
    padding: var(--space-5) var(--space-4);
    background: var(--white);
    border: 1px solid var(--surface-3);
    border-radius: var(--r-lg);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.porque-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.porque-card .ini-beneficio-ico { margin-inline: auto; }
.porque-card h3 { font-family: var(--font-display); font-size: var(--text-base); margin: 0 0 6px; }
.porque-card p { margin: 0; color: var(--ink-muted); font-size: var(--text-sm); line-height: 1.55; }

/* ============ CTA "ÚNETE COMO VENDEDOR" / NOSOTROS ============ */
.cta-vendedor-grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: var(--space-7);
    align-items: stretch;
}
@media (max-width: 860px) { .cta-vendedor-grid { grid-template-columns: 1fr; } }
.cta-vendedor-imagen {
    border-radius: var(--fv-r-lg, 14px);
    display: flex;
    align-items: stretch;
}
.cta-vendedor-texto h2 { margin-bottom: var(--space-3); }
.cta-vendedor-texto p { color: var(--ink-muted); line-height: 1.6; margin: 0 0 var(--space-5); }
.cta-vendedor-stats { display: flex; gap: var(--space-4); margin-bottom: var(--space-5); }
.cta-vendedor-stat-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    background: var(--surface-2);
    border: 1px solid var(--surface-3);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4) var(--space-5);
    transition: transform .2s ease, box-shadow .2s ease;
    flex: 1;
}
.cta-vendedor-stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.cta-vendedor-stat-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-dim, #E6F7F7), color-mix(in srgb, var(--brand) 10%, transparent));
    box-shadow: inset 0 1px 2px rgba(255,255,255,.6), 0 3px 8px -3px color-mix(in srgb, var(--brand) 35%, transparent);
    color: var(--brand);
    margin-bottom: var(--space-2);
    transition: transform .25s ease, background .25s ease;
}
.cta-vendedor-stat-ico svg { width: 22px; height: 22px; }
.cta-vendedor-stat-card:hover .cta-vendedor-stat-ico { transform: scale(1.08) rotate(-4deg); background: linear-gradient(135deg, var(--accent), var(--brand)); color: var(--white); }
.cta-vendedor-stats strong { font-family: var(--font-display); font-size: var(--text-xl); color: var(--brand); }
.cta-vendedor-stats span:not(.cta-vendedor-stat-ico) { font-size: var(--text-xs); color: var(--ink-muted); }
.cta-vendedor-bullets { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); }
.cta-vendedor-bullets div { display: flex; align-items: center; gap: 10px; font-size: var(--text-sm); font-weight: 600; color: var(--ink-light); }
.cta-vendedor-bullets .ico-check {
    width: 22px; height: 22px; flex-shrink: 0;
    border-radius: 50%;
    background: var(--accent-dim);
    color: #0f7a7a;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
}
.cta-vendedor-bullets .ico-check svg { width: 13px; height: 13px; }
.cta-vendedor-imagen svg { width: 100%; height: auto; display: block; }

/* ---- Panel "Así de simple es vender" (reemplaza la ilustración SVG) ---- */
.cta-vendedor-pasos {
    position: relative;
    overflow: hidden;
    flex: 1;
    width: 100%;
    background:
        radial-gradient(420px 260px at 115% -10%, rgba(76,224,208,.18), transparent 70%),
        linear-gradient(135deg, var(--fv-ink, #0B2545), #0F2D52);
    border-radius: var(--fv-r-lg, 14px);
    padding: 30px 30px 26px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
/* Marca de agua discreta que llena el espacio libre */
.cta-vendedor-pasos::after {
    content: "";
    position: absolute;
    right: -60px;
    bottom: -70px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    border: 2px solid rgba(76,224,208,.12);
    box-shadow: 0 0 0 40px rgba(255,255,255,.03);
    pointer-events: none;
}
.cta-vendedor-pasos > * { position: relative; z-index: 1; }
.cta-vendedor-pasos-titulo {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--fv-teal, #4CE0D0);
}
.cta-vendedor-pasos-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.cta-vendedor-pasos-lista li {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 16px;
    align-items: start;
    position: relative;
}
/* Riel que conecta los números de paso */
.cta-vendedor-pasos-lista li:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 19px;
    top: 44px;
    bottom: -20px;
    width: 2px;
    background: linear-gradient(180deg, rgba(76,224,208,.4), rgba(76,224,208,.06));
}
.cta-vendedor-paso-num {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(76,224,208,.12);
    border: 1px solid rgba(76,224,208,.45);
    color: var(--fv-teal, #4CE0D0);
    font-weight: 800;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cta-vendedor-pasos-lista strong {
    display: block;
    font-size: 15.5px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 3px;
}
.cta-vendedor-pasos-lista p {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: rgba(255,255,255,.72);
}
/* Mini-flujo de iconos: llena el espacio entre el paso 3 y el pie */
.cta-vendedor-flujo {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 4px 0;
}
.cta-vendedor-flujo-ico {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fv-teal, #4CE0D0);
    background: rgba(76,224,208,.1);
    border: 1px solid rgba(76,224,208,.35);
}
.cta-vendedor-flujo-ico svg { width: 22px; height: 22px; }
.cta-vendedor-flujo-linea {
    flex: 1;
    max-width: 52px;
    height: 2px;
    border-radius: 2px;
    background: repeating-linear-gradient(90deg, rgba(76,224,208,.5) 0 5px, transparent 5px 10px);
}
.cta-vendedor-pasos-pie {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    border-top: 1px solid rgba(255,255,255,.14);
    padding-top: 18px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}
.cta-vendedor-pasos-pie::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--fv-teal, #4CE0D0);
    flex-shrink: 0;
}

/* Cuando la sección se apila (< 860px) los 3 pasos van en fila */
@media (min-width: 641px) and (max-width: 860px) {
    .cta-vendedor-pasos-lista {
        flex-direction: row;
        gap: 24px;
    }
    .cta-vendedor-pasos-lista li {
        flex: 1;
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .cta-vendedor-pasos-lista li:not(:last-child)::before { display: none; }
}
/* El mini-flujo de iconos solo aporta cuando el panel es alto (2 columnas) */
@media (max-width: 860px) {
    .cta-vendedor-flujo { display: none; }
}

/* ============ BANDA DE ESTADÍSTICAS ============ */
.ini-stats-banda {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    text-align: center;
    background: var(--white);
    border: 1px solid var(--surface-3);
    border-radius: var(--r-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-7);
}
@media (max-width: 640px) { .ini-stats-banda { grid-template-columns: 1fr 1fr; padding: var(--space-4); gap: var(--space-3); margin-bottom: var(--space-5); } }
.ini-stat-item strong {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--brand);
}
.ini-stat-item span { font-size: var(--text-xs); color: var(--ink-muted); font-weight: 600; }

/* ============ TESTIMONIOS ============ */
.ini-testimonios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-5);
    margin-bottom: var(--space-7);
}
.testimonio-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--white);
    border: 1px solid var(--surface-3);
    border-radius: var(--r-lg);
    padding: var(--space-6) var(--space-5) var(--space-5);
    box-shadow: var(--shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease;
}
.testimonio-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.testimonio-card::before {
    content: '“';
    position: absolute;
    top: 6px; right: 20px;
    font-family: var(--font-display);
    font-size: 64px;
    font-weight: 800;
    color: var(--surface-3);
    line-height: 1;
    z-index: 0;
}
.testimonio-card > * { position: relative; z-index: 1; }
.testimonio-estrellas { display: flex; gap: 3px; color: #F5A623; margin-bottom: var(--space-3); }
.testimonio-estrellas .ini-ico { width: 15px; height: 15px; fill: currentColor; }
.testimonio-card p.testimonio-texto { color: var(--ink-light); font-size: var(--text-sm); line-height: 1.6; margin: 0 0 var(--space-4); }
.testimonio-autor { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: var(--space-3); }
.testimonio-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    color: var(--white);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 800; font-size: var(--text-xs);
    box-shadow: var(--shadow-sm);
    text-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.testimonio-autor strong { display: block; font-size: var(--text-sm); color: var(--ink); }
.testimonio-autor span { font-size: 11px; color: var(--ink-muted); }

/* ============ NEWSLETTER ============ */
.ini-newsletter {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, var(--surface-2) 0%, color-mix(in srgb, var(--accent) 8%, var(--surface-2)) 100%);
    border: 1px solid var(--surface-3);
    border-radius: var(--r-lg);
    padding: var(--space-7) var(--space-6);
    text-align: center;
    margin-bottom: var(--space-7);
}
.ini-newsletter::before {
    content: '';
    position: absolute;
    width: 260px; height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%);
    top: -120px; right: -60px;
    pointer-events: none;
}
.ini-newsletter > * { position: relative; }
.ini-newsletter h2 { margin: 0 0 var(--space-2); }
.ini-newsletter p { color: var(--ink-muted); margin: 0 0 var(--space-5); }
.ini-newsletter-form {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 640px;
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: center;
    transition: opacity .3s ease, transform .3s ease;
}
.ini-newsletter-form-oculto { opacity: 0; transform: translateY(-6px); pointer-events: none; position: absolute; left: 0; right: 0; }
.ini-newsletter-campos {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 300px;
    background: var(--white);
    border: 1px solid var(--surface-3);
    border-radius: var(--r-full);
    box-shadow: var(--shadow-sm);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.ini-newsletter-campos:focus-within { border-color: var(--brand); box-shadow: var(--shadow-md); }
.ini-newsletter-form input[type="email"], .ini-newsletter-form input[type="tel"] {
    flex: 1;
    min-width: 0;
    padding: 14px 20px;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: var(--text-sm);
}
.ini-newsletter-form input[type="email"]:focus, .ini-newsletter-form input[type="tel"]:focus { outline: none; }
.ini-newsletter-divisor { width: 1px; height: 24px; background: var(--surface-3); flex-shrink: 0; }
.ini-newsletter-form .btn-mkt-primary { flex-shrink: 0; padding: 14px 28px; }
@media (max-width: 560px) {
    .ini-newsletter-campos { flex-direction: column; border-radius: var(--r-md); width: 100%; }
    .ini-newsletter-divisor { width: 100%; height: 1px; }
    .ini-newsletter-form .btn-mkt-primary { width: 100%; }
}
.ini-newsletter-msg {
    display: inline-block;
    margin-top: 40px;
    padding: 8px 18px;
    background: color-mix(in srgb, #0f9a7a 8%, var(--white));
    border: 1px solid color-mix(in srgb, #0f9a7a 22%, transparent);
    border-radius: var(--r-full);
    font-size: var(--text-xs);
    font-weight: 600;
    color: #0f9a7a;
    min-height: 0;
}
.ini-newsletter-msg:empty { display: none; margin: 0; }
.ini-newsletter-msg-en-lugar {
    display: inline-block;
    margin-top: 0;
    padding: 10px 22px;
    font-size: var(--text-xs);
    animation: ini-newsletter-msg-aparece .3s ease;
}
@keyframes ini-newsletter-msg-aparece {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============ ESQUELETOS DE CARGA (productos destacados) ============ */
.producto-esqueleto {
    height: 300px;
    border-radius: var(--r-lg);
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
    background-size: 400% 100%;
    animation: brillo-esqueleto-inicio 1.4s ease infinite;
}
@keyframes brillo-esqueleto-inicio { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ============ FOOTER AMPLIADO ============ */
.footer-inicio {
    background: linear-gradient(180deg, var(--brand-dark) 0%, #041627 100%);
    color: rgba(255,255,255,.72);
    margin-top: var(--space-7);
    position: relative;
}
.footer-inicio::before {
    content: '';
    display: block;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), var(--brand-mid), transparent);
    opacity: .6;
}
.footer-inicio-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: var(--space-7) var(--space-6) var(--space-5);
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: var(--space-6);
}
@media (max-width: 860px) { .footer-inicio-inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) {
    .footer-inicio-inner {
        grid-template-columns: 1fr;
        padding: var(--space-6) var(--space-4) var(--space-4);
        gap: 0;
    }
    /* En celular ya no se muestran "Navegación" ni "Farmavitae" — son
       enlaces que ya están arriba en el menú principal, y ocupaban
       mucho espacio repitiendo lo mismo. Se deja solo "Contacto", que
       sí tiene información que no está en ningún otro lado. */
    .footer-inicio-col-navegacion,
    .footer-inicio-col-farmavitae { display: none; }

    /* Logo + descripción: en fila horizontal (logo a la izquierda,
       texto a la derecha) en vez de apilados y centrados — se lee más
       como una "tarjeta de presentación" y ocupa menos alto. Las redes
       sociales se quedan centradas debajo, como cierre de este bloque. */
    .footer-inicio-inner > div:first-child {
        padding-bottom: var(--space-5);
        margin-bottom: var(--space-5);
        border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .footer-inicio-logo-desc-fila {
        display: flex;
        align-items: center;
        gap: var(--space-4);
        text-align: left;
    }
    .footer-inicio-logo { margin: 0; flex-shrink: 0; }
    .footer-inicio-desc { max-width: none; margin: 0; }
    .footer-inicio-redes { justify-content: center; margin-top: var(--space-4); }
    .footer-inicio-col { padding-bottom: var(--space-5); margin-bottom: var(--space-5); border-bottom: 1px solid rgba(255,255,255,.08); }
    .footer-inicio-col:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: none; }
    .ini-footer-pago { justify-content: flex-start; }
}
.footer-inicio-logo {
    height: 44px;
    width: auto;
    display: block;
    margin: 0 0 var(--space-3);
    background: var(--white);
    border-radius: var(--r-sm);
    padding: 6px 10px;
    box-sizing: content-box;
}
.footer-inicio-desc { font-size: var(--text-sm); line-height: 1.6; max-width: 34ch; margin: 0; }
.footer-inicio-col h4 { color: var(--white); font-family: var(--font-display); font-size: var(--text-sm); margin: 0 0 var(--space-3); letter-spacing: .02em; }
.footer-inicio-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-inicio-col a { color: rgba(255,255,255,.72); text-decoration: none; font-size: var(--text-sm); transition: color .2s ease; }
.footer-inicio-col a:hover { color: var(--accent); }
.footer-inicio-col li { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); }
.footer-inicio-redes { display: flex; gap: var(--space-3); margin-top: var(--space-3); }
.footer-inicio-redes a {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.1);
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
    color: var(--white);
    transition: transform .2s ease, background .2s ease;
}
.footer-inicio-redes a:hover { background: var(--accent); transform: translateY(-3px); }
.ini-footer-pago {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: var(--space-3);
}
.ini-footer-pago span {
    background: rgba(255,255,255,.08);
    border-radius: 6px;
    padding: 5px 9px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
}
.footer-inicio-bottom {
    border-top: 1px solid rgba(255,255,255,.12);
    text-align: center;
    font-size: var(--text-xs);
    padding: var(--space-4);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: center;
    align-items: center;
}
.footer-inicio-bottom a { color: rgba(255,255,255,.6); text-decoration: none; }
.footer-inicio-bottom a:hover { color: var(--accent); }

/* ============ AJUSTES MENORES DE ESTA PÁGINA ============ */
#productos-destacados .catalogo-vacio,
#tiendas .catalogo-vacio { padding: var(--space-6) 0; }

/* "Productos destacados" en una sola fila con scroll horizontal (solo en esta
   página: se sobreescribe por ID para no tocar .grid-productos que también
   usan mercado.html y tienda.html con varias filas). */
#grid-productos-inicio {
    display: flex;
    gap: var(--space-5);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--space-3);
    scrollbar-width: thin;
}
#grid-productos-inicio::-webkit-scrollbar { height: 6px; }
#grid-productos-inicio::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: var(--r-full); }
#grid-productos-inicio > .producto-card-mkt,
#grid-productos-inicio > .producto-esqueleto {
    flex: 0 0 230px;
    width: 230px;
    scroll-snap-align: start;
    /* Mismo motivo que en "Recién llegados"/"Más vendidos": se pisa el
       "height: 100%" de la regla base, que en esta fila sin altura
       propia no dejaba que las tarjetas se estiraran parejo entre sí. */
    height: auto;
    min-height: 460px;
}
#grid-productos-inicio > .producto-card-mkt .producto-card-descripcion {
    max-height: 50px;
}

/* ============ MODAL: VISTA PREVIA DE PRODUCTO ============
   El estilo del modal vive AHORA en una sola hoja (mercado.css) para
   que la vista previa se vea idéntica en Inicio, Marketplace y Tienda.
   Antes se duplicaba aquí con valores ligeramente distintos y, como
   inicio.css carga después, en Inicio se veía diferente. */

/* ============ MICROANIMACIONES: revelado al hacer scroll ============ */
.ini-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s ease;
}
.ini-reveal.ini-reveal-visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .ini-reveal, .hero-inicio-flotante, .ini-hero-collage-tarjeta, .ini-marcas-track, .panel-carrito {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ============ RESPONSIVE GENERAL DE ESTA PÁGINA ============ */
@media (max-width: 640px) {
    .ini-hero-collage { max-width: 220px; margin: var(--space-3) auto 0; }
    .ini-ofertas-seccion { padding: var(--space-5) var(--space-4); }
    /* Más aire a los lados del carrusel que el que deja el padding de
       la sección — si no, con "overflow:hidden" en la sección (para
       recortar la imagen de fondo desenfocada), la última tarjeta
       quedaba con el borde derecho cortado en vez de verse completa. */
    .ini-ofertas-grid {
        padding-left: 44px;
        padding-right: 44px;
        scroll-padding-left: 44px;
    }
    /* Tarjetas de producto más compactas en celular — antes quedaban
       casi tan anchas como en escritorio (200-230px, con 460px de
       alto mínimo forzado), viéndose desproporcionadamente grandes
       comparadas con las del Marketplace, que en celular caben 2 por
       fila. Se igualan al mismo ancho aproximado (~148-160px) y se
       quita la altura mínima fija — que cada tarjeta tome solo el
       alto que su contenido necesita, igual que en el Marketplace. */
    .ini-ofertas-grid > .producto-card-mkt { flex-basis: 156px; width: 156px; }
    .ini-productos-scroll > .producto-card-mkt { flex-basis: 156px; width: 156px; min-height: 0; }
    .producto-card-mkt .producto-card-nombre { font-size: 12.5px; }
    .producto-card-mkt .producto-card-precio-actual { font-size: 14px; }
    .ini-newsletter { padding: var(--space-5) var(--space-4); }

    /* El hero repetía las mismas 3 frases de confianza que ya están en
       la barra de arriba (Envíos rápidos / Productos originales /
       Compra segura) — en celular ocupa espacio de más sin decir nada
       nuevo, así que se quita solo ahí. */
    .fila-confianza-hero { display: none; }

    /* El resto de reglas que iban acá (tamaño del h1 del hero, del
       buscador, de los botones, etc.) quedaron obsoletas cuando el
       hero-mercado-texto completo pasó a ocultarse en celular (ver
       mercado.css) — esos elementos ya no se muestran, así que
       ajustarles el tamaño no tenía ningún efecto. La única que SÍ
       importaba (el padding de .hero-mercado-wrap) quedó compitiendo
       con la que de verdad se usa ahora (mercado.css, que lo pone en 0
       porque ya no hay texto adentro) — como esta regla cargaba
       después, ganaba ella, dejando un padding/fondo visible sin nada
       dentro (el "rectángulo" reportado). */
}

/* ============ SOBRE FARMAVITAE + FARMAVITAE MARKET (una sola tarjeta) ============ */
.seccion-nosotros-market { padding: var(--space-7); }
@media (max-width: 720px) { .seccion-nosotros-market { padding: var(--space-6) var(--space-4); } }
.seccion-nosotros-market .ini-seccion-cabecera { text-align: center; margin-bottom: 0; }
.sobre-farmavitae-pilares {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin: var(--space-6) 0;
}
@media (max-width: 720px) { .sobre-farmavitae-pilares { grid-template-columns: repeat(2, 1fr); } }
.sobre-farmavitae-pilar {
    background: var(--surface-2);
    border: 1px solid var(--surface-3);
    border-radius: var(--r-lg);
    padding: var(--space-5) var(--space-3);
    text-align: center;
    transition: transform .2s ease, box-shadow .2s ease;
}
.sobre-farmavitae-pilar:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.sobre-farmavitae-ico {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-dim, #E6F7F7), color-mix(in srgb, var(--brand) 8%, transparent));
    border: 1px solid color-mix(in srgb, var(--brand) 10%, transparent);
    color: var(--brand);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto var(--space-3);
    transition: transform .25s ease, background .25s ease;
}
.sobre-farmavitae-ico svg { width: 24px; height: 24px; }
.sobre-farmavitae-pilar:hover .sobre-farmavitae-ico { transform: scale(1.08) rotate(-4deg); background: linear-gradient(135deg, var(--accent), var(--brand)); color: var(--white); }
.sobre-farmavitae-pilar h3 { font-family: var(--font-display); font-size: var(--text-md); margin: 0 0 4px; color: var(--ink); }
.sobre-farmavitae-pilar p { font-size: var(--text-sm); color: var(--ink-muted); margin: 0; }
.sobre-farmavitae-texto-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--space-7);
    align-items: center;
}
@media (max-width: 780px) { .sobre-farmavitae-texto-grid { grid-template-columns: 1fr; } }
.sobre-farmavitae-texto {
    text-align: left;
}
.sobre-farmavitae-logo-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    height: 100%;
}
@media (max-width: 780px) { .sobre-farmavitae-logo-wrap { display: none; } }
.sobre-farmavitae-logo-wrap .imagen-nosotros-dinamica { width: 100%; max-width: 420px; height: 280px; object-fit: cover; display: block; border-radius: var(--r-lg); box-shadow: var(--shadow-md); }
.sobre-farmavitae-texto p { color: var(--ink-light); line-height: 1.75; font-size: var(--text-md); margin: 0 0 var(--space-4); }

/* Carrusel de imágenes de clientes/emprendedores — configurable desde
   Admin -> Configuración (hasta 6, opcional). Va debajo de la foto, en
   la misma columna. El contenedor es un poco más ancho que la foto de
   arriba (420px) para compensar el espacio que ocupan las 2 flechas —
   antes esas flechas restaban ese espacio AL PROPIO ancho de 420px,
   así que las imágenes del carrusel terminaban viéndose más chicas
   que la foto grande, en vez de coincidir con su ancho real. */
.carrusel-testimonios-inicio {
    width: 100%;
    max-width: 512px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: var(--space-3);
}
.carrusel-testimonios-viewport {
    flex: 1;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--surface-2);
}
.carrusel-testimonios-track {
    display: flex;
    /* Curva de easing más suave (desacelera al llegar) en vez de la
       transición lineal-ish anterior, y un poco más lenta para que se
       sienta menos brusca al pasar de una página a otra. */
    transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
/* Cada "página" del carrusel muestra 2 imágenes lado a lado — antes
   mostraba una sola imagen dentro de un contenedor ancho (16:10), lo
   que dejaba mucho espacio libre a los costados. Ahora cada imagen
   mantiene su propia proporción 4:3 (misma que se recorta en el panel
   de admin — antes eran distintas, así que la imagen ya recortada en
   cuadrado se volvía a recortar para encajar en el contenedor ancho). */
.carrusel-testimonios-pagina {
    flex: 0 0 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.carrusel-testimonios-pagina img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    border-radius: var(--r-md);
    /* Acompaña la transición del track con un fundido/leve escala
       propio de cada imagen — antes solo se movía el conjunto entero
       de golpe, con esto se siente un poco más pulido. */
    animation: apareceCarruselTestimonio .5s cubic-bezier(.22, 1, .36, 1);
}
@keyframes apareceCarruselTestimonio {
    from { opacity: 0; transform: scale(.97); }
    to { opacity: 1; transform: scale(1); }
}
/* Si una página se queda con una sola imagen (cantidad impar), que
   ocupe todo el ancho en vez de dejar un hueco vacío al lado. */
.carrusel-testimonios-pagina:has(img:only-child) { grid-template-columns: 1fr; }
.carrusel-testimonios-flecha {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid var(--surface-3);
    background: var(--white);
    color: var(--brand);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--ease);
}
.carrusel-testimonios-flecha:hover { background: var(--brand); color: var(--white); }
.carrusel-testimonios-flecha:disabled { opacity: .35; cursor: default; }
.carrusel-testimonios-flecha:disabled:hover { background: var(--white); color: var(--brand); }
.carrusel-testimonios-flecha svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
}

/* ============ PRODUCTOS DESTACADOS — sección protagónica ============ */
.seccion-destacados-premium {
    position: relative;
    overflow: hidden;
    background: linear-gradient(155deg, var(--white) 0%, color-mix(in srgb, var(--accent) 6%, var(--white)) 60%, color-mix(in srgb, var(--brand) 5%, var(--white)) 100%);
    border: 1px solid color-mix(in srgb, var(--brand) 12%, transparent);
    border-radius: var(--r-lg);
    padding: var(--space-7) var(--space-6);
    box-shadow: 0 30px 60px -35px color-mix(in srgb, var(--brand) 30%, transparent);
    margin-bottom: 64px;
}
.seccion-destacados-glow {
    position: absolute;
    width: 340px; height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 25%, transparent), transparent 70%);
    top: -160px; right: -80px;
    pointer-events: none;
    z-index: 0;
}
.seccion-destacados-premium .seccion-header, .seccion-destacados-premium .grid-productos { position: relative; z-index: 1; }
.destacados-eyebrow {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: 6px;
}
.seccion-destacados-premium h2 { font-size: var(--text-2xl); }
@media (max-width: 720px) { .seccion-destacados-premium { padding: var(--space-6) var(--space-4); } }
.sobre-farmavitae-texto p:last-child { margin-bottom: 0; }

/* Separador sutil entre la parte de misión/valores y la de Farmavitae
   Market, para que se lean como dos momentos distintos dentro de la
   misma tarjeta, en vez de un solo bloque de texto corrido. */
.nosotros-divisor {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--surface-3) 15%, var(--surface-3) 85%, transparent);
    margin: var(--space-7) 0;
}
/* ========================================================================
   INICIO MÁS COMPACTO EN CELULAR — las secciones (Por qué Farmavitae,
   Creemos en una vida mejor, Farmavitae Market, Ofertas de la semana)
   usaban el mismo espaciado generoso que en escritorio (48px entre
   encabezado y contenido, por ejemplo) — en una pantalla angosta eso
   se siente como mucho scroll vacío. Se aprieta solo en celular, sin
   tocar cómo se ve en escritorio.
   ======================================================================== */
@media (max-width: 640px) {
    .ini-seccion-cabecera { margin-bottom: var(--space-5); }
    .ini-seccion-eyebrow { margin-bottom: 4px; }
    /* La rayita antes de "CONFIANZA" (en "¿Por qué Farmavitae?") se
       quita en celular — el resto de las etiquetas de sección la
       conservan, esto es específico de esa sección nada más. */
    section[aria-label="¿Por qué elegir Farmavitae?"] .ini-seccion-eyebrow::before { display: none; }
    .ini-porque { margin-bottom: var(--space-5); gap: var(--space-3); }
    /* Estas 2 secciones se habían quedado con el margen de escritorio
       (48px) sin reducir para celular — sumado a las demás secciones
       de la página, eso eran varios "saltos" grandes de espacio en
       blanco entre bloques, uno detrás de otro. */
    .ini-marcas { margin-bottom: var(--space-5); }
    .seccion-como-funciona { margin-bottom: var(--space-5); }
    .ini-testimonios { margin-bottom: var(--space-5); }
    .seccion-nosotros-market { padding: var(--space-5) var(--space-4); }
    .ini-ofertas-seccion { padding: var(--space-5) var(--space-4); }
    .nosotros-divisor { margin: var(--space-5) 0; }
    .sobre-farmavitae-pilares { gap: var(--space-3); }
    .cta-vendedor-stats { gap: var(--space-2); }
    /* Los títulos de sección (h2) también bajan un poco de tamaño — en
       celular no hace falta que ocupen tanto ancho para verse bien. */
    .ini-seccion-cabecera h2, .seccion-nosotros-market h2 { font-size: 22px; }
    /* Título de "Productos destacados del Marketplace" y similares
       (Recién llegados, Más vendidos) — más chico en celular. */
    .seccion-header h2 { font-size: 19px; }
    .seccion-header { margin-bottom: var(--space-3); }
    .destacados-eyebrow { font-size: 11px; }

    /* "¿Por qué Farmavitae?" — tarjetas más chicas y compactas, menos
       relleno interno, para que quepan más sin tanto scroll. */
    .porque-card { padding: var(--space-3) var(--space-2); }
    .porque-card h3 { font-size: 12.5px; }
    .porque-card p { font-size: 11px; }
    .ini-beneficio-ico { width: 36px; height: 36px; margin-bottom: 6px; }

    /* Sombra permanente y sutil en celular — en escritorio la sombra
       solo aparece con :hover, pero eso nunca se activa al tocar en un
       celular, así que estas tarjetas se veían completamente planas
       (solo un borde fino). Con una sombra ligera de base, se sienten
       con más peso/calidad sin necesitar la interacción de mouse. */
    .porque-card, .sobre-farmavitae-pilar {
        box-shadow: 0 4px 14px -6px rgba(10, 30, 60, .1);
        border-color: transparent;
    }

    /* "Creemos en una vida mejor" — mismo criterio: tarjetas más chicas. */
    .sobre-farmavitae-pilar { padding: var(--space-3) var(--space-2); }
    .sobre-farmavitae-ico { width: 38px; height: 38px; }
    .sobre-farmavitae-pilar h3 { font-size: 12.5px; }
    .sobre-farmavitae-pilar p { font-size: 11px; }

    /* "Lo que dicen de nosotros" — en vez de apilarse en una columna
       (lo que hacía la cuadrícula en pantallas angostas), quedan en una
       sola fila con scroll horizontal, como los carruseles de
       productos — y bastante más chicas. */
    .ini-testimonios {
        display: flex;
        overflow-x: auto;
        gap: var(--space-3);
        margin-bottom: var(--space-5);
        scroll-snap-type: x mandatory;
        padding-bottom: 4px;
    }
    .testimonio-card {
        flex: 0 0 210px;
        padding: var(--space-3) var(--space-3) var(--space-3);
        scroll-snap-align: start;
        /* Altura fija — igual que se corrigió antes en "Recién llegados"/
           "Más vendidos": sin esto, cada tarjeta se ajustaba solo a su
           propio texto (algunos testimonios son más largos que otros),
           quedando unas más altas que otras en la misma fila. */
        height: 190px;
        overflow: hidden;
    }
    .testimonio-estrellas .ini-ico { width: 13px; height: 13px; }
    .testimonio-texto {
        font-size: 11.5px;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .testimonio-avatar { width: 30px; height: 30px; font-size: 11px; }
    .testimonio-autor strong { font-size: 12px; }
    .testimonio-autor span { font-size: 10.5px; }

    /* "Creemos en una vida mejor" — el texto quedaba más grande que el
       de "Farmavitae Market" (misma tarjeta, un poco más abajo) sin
       motivo — mismo tamaño ahora. */
    .sobre-farmavitae-texto p { font-size: 13.5px; line-height: 1.6; }

    /* El colage de logos + las tarjetas flotantes de estadísticas
       quedaban apiladas debajo de los botones "Ver productos" /
       "Conócenos" en celular, ocupando espacio sin aportar mucho ahí
       (las mismas cifras ya están en la banda de estadísticas más
       abajo en la página). */
    .hero-inicio-visual { display: none; }
}
/* ============ IMPACTO SOCIAL — vitrina en Inicio ============ */


/* ============================================================
   RITMO VERTICAL CONSISTENTE EN CELULAR
   ------------------------------------------------------------
   .seccion-catalogo usaba 56px fijos de separación (sin ningún
   ajuste para celular) y .seccion-tiendas-destacadas usaba 48px —
   en una pantalla angosta, esos huecos fijos se sienten mucho más
   grandes en proporción que en escritorio, y se acumulan sección
   tras sección (catálogo + encabezado interno + el siguiente
   catálogo...). Se deja un solo valor de separación entre bloques,
   consistente en todo Inicio.
   ============================================================ */
@media (max-width: 640px) {
    .seccion-catalogo { margin-bottom: var(--space-6); }
    .seccion-tiendas-destacadas { margin-bottom: var(--space-6); }
    .seccion-impacto-social-inicio { margin-bottom: var(--space-5); }
}

/* ============================================================
   PESTAÑAS "DESTACADOS / NUEVOS / MÁS VENDIDOS" — SOLO CELULAR
   ------------------------------------------------------------
   En escritorio esto no se muestra: las 3 secciones de catálogo
   (Destacados, Recién llegados, Más vendidos) siguen exactamente
   igual que siempre, una debajo de otra. En celular, en cambio,
   apilar 3 carruseles con el mismo tipo de tarjeta uno detrás de
   otro se sentía repetitivo y hacía la página mucho más larga de
   lo necesario — ahora comparten un solo espacio: se elige una
   pestaña y se ve solo esa selección de productos.
   ============================================================ */
.ini-tabs-catalogo-movil { display: none; }
@media (max-width: 640px) {
    .ini-tabs-catalogo-movil {
        display: flex;
        gap: 8px;
        margin: 0 0 var(--space-4);
        overflow-x: auto;
        scrollbar-width: none;
    }
    .ini-tabs-catalogo-movil::-webkit-scrollbar { display: none; }
    .ini-tab-catalogo {
        flex: 0 0 auto;
        font-family: var(--font);
        font-size: 12.5px;
        font-weight: 700;
        color: var(--ink-light);
        background: var(--white);
        border: 1px solid var(--surface-3);
        border-radius: var(--r-full);
        padding: 9px 16px;
        white-space: nowrap;
        cursor: pointer;
        transition: var(--ease);
    }
    .ini-tab-catalogo-activa {
        color: var(--white);
        background: linear-gradient(135deg, var(--brand) 0%, var(--brand-mid) 100%);
        border-color: transparent;
        box-shadow: var(--shadow-sm);
    }

    /* Solo la sección con la pestaña activa se muestra; las otras 2
       quedan fuera del flujo (display:none), así que tampoco dejan un
       hueco de margen vacío detrás. */
    .ini-catalogo-tab-oculta { display: none !important; }

    /* Con las pestañas ya indicando de qué tarjeta se trata, el
       encabezado interno de cada sección se simplifica: se quita el
       "eyebrow" (ya redundante con la pestaña "✨ Destacados") y el
       título baja un poco de tamaño. */
    #productos-destacados .destacados-eyebrow { display: none; }
    #productos-destacados .seccion-header h2,
    #seccion-novedades .seccion-header h2,
    #seccion-mas-vendidos .seccion-header h2 { font-size: 17px; }

    /* Como ahora las 3 secciones comparten el mismo bloque visual (una
       reemplaza a la otra en el mismo lugar), no debe quedar un margen
       inferior propio en cada una — ese espacio ya lo da el bloque
       compartido de pestañas + sección visible. */
    #productos-destacados, #seccion-novedades, #seccion-mas-vendidos { margin-bottom: 0; }
}

/* ============================================================
   CÍRCULO "VER TODAS" AL FINAL DE "EXPLORA POR CATEGORÍA"
   ------------------------------------------------------------
   Mismo lenguaje visual que ya usan Marketplace y Distribución
   para su propio círculo "Ver todas" (aro punteado) — antes Inicio
   era la única de las 3 páginas sin él, y la fila de categorías
   quedaba con un hueco vacío a la derecha en vez de terminar con
   una acción clara.
   ============================================================ */
.categoria-hero-item-vertodas .categoria-hero-ico-vertodas {
    background: var(--surface-2);
    box-shadow: none;
    border: 2px dashed color-mix(in srgb, var(--brand) 30%, transparent);
    color: var(--brand);
    font-weight: 800;
}
.categoria-hero-item-vertodas:hover .categoria-hero-ico-vertodas { background: var(--surface-2); }

/* ============================================================
   SISTEMA VISUAL DEL MOCKUP — SOLO CELULAR, SOLO INICIO
   ------------------------------------------------------------
   Del brief de diseño: fondo blanco, borde de 1px en vez de
   sombra, títulos alineados a la izquierda (no centrados), un
   solo acento azul (sin el arcoíris de colores por categoría) y
   categorías sin contador de productos. Se aplica solo en celular
   y solo acá (Inicio) por ahora — Marketplace y Distribución
   comparten estas mismas clases (categoria-hero-ico, etc.) y les
   toca su propio pase de diseño más adelante; tocar esas clases
   sin acotar rompería la consistencia ahí antes de tiempo.
   ============================================================ */
@media (max-width: 640px) {
    .ini-seccion-cabecera { text-align: left; }
    .ini-seccion-cabecera p { margin-inline: 0; }
    .ini-seccion-eyebrow::before { display: none; }
    .seccion-header { text-align: left; }

    /* Tarjetas con borde de 1px en vez de sombra — mismo look "plano"
       que pide el mockup, en vez de las sombras suaves de antes. */
    .testimonio-card, .producto-card-mkt, .categoria-hero-item {
        box-shadow: none !important;
        border: 1px solid var(--surface-3);
    }

    /* Un solo acento azul para las categorías de Inicio — antes cada
       ícono tenía su propio degradado de color (rosado, celeste,
       amarillo…), acá se unifica a un solo tono. */
    #fila-categorias-inicio .categoria-hero-ico {
        background: var(--accent-dim);
        box-shadow: none;
    }

    /* Sin contador de productos debajo de cada categoría — ya lo oculta
       mercado.css para Marketplace/Distribución; acá se agrega lo mismo
       para Inicio, que usa su propio marcado. */
    #fila-categorias-inicio .categoria-hero-cantidad { display: none; }

    /* Las pestañas del catálogo sin emoji — texto solo, un tono de
       gris/azul consistente con el resto (los emojis de colores no
       encajan con "un solo acento azul"). */
    .ini-tab-catalogo { font-size: 12px; }
}

/* ============================================================================
   PARTE 1 — REDISEÑO DE INICIO (SOLO CELULAR) — SISTEMA --fv-*
   ----------------------------------------------------------------------------
   Header con buscador persistente → franja de confianza → banner de
   campaña → categorías → módulo "Productos" con chips → marcas →
   impacto social (franja) → reseñas → footer.
   Todo acotado a <=640px. En escritorio Inicio se ve igual que antes.
   ============================================================================ */

/* --- Elementos nuevos: ocultos por defecto, solo aparecen en celular --- */
.ini-header-buscador { display: none; }
.ini-banner-campana { display: none; }
.ini-modulo-productos-cabecera { display: none; }
.ini-impacto-strip { display: none; }
.ini-impacto-banner { display: none; }
.ini-resenas-resumen { display: none; }
/* "Vender" en el menú: oculto en escritorio (ahí ya está el enlace
   grande del hero); solo aparece dentro del menú hamburguesa en celular. */
.nav-sitio-link-vender { display: none; }

@media (max-width: 640px) {

    /* ---- Fondo de página blanco (elimina el degradado azul global) ---- */
    body.cuerpo-mercado { background: #fff !important; }

    /* ============ HEADER + BUSCADOR PERSISTENTE ============
       La franja de confianza va arriba del header (orden natural de
       "announcement bar"); el header — con el buscador — queda sticky
       y persiste al hacer scroll. */
    .nav-sitio { background: #fff; border-bottom: 1px solid var(--fv-border); box-shadow: 0 2px 10px -6px rgba(10,30,60,.12); }
    .nav-sitio-inner { padding: var(--fv-s-3) var(--fv-s-4); align-items: center; }
    .logo-sitio img { height: 34px; }
    /* "Vender" fuera del header primario (baja al menú del hamburguesa
       y al footer) */
    .nav-quiero-vender { display: none !important; }
    .nav-sitio-links .nav-sitio-link-vender { display: block; }

    .ini-header-buscador { display: block; padding: 0 var(--fv-s-4) var(--fv-s-3); background: #fff; }
    .ini-header-buscador .ini-buscador-form {
        box-shadow: none;
        border: 1px solid var(--fv-border);
        background: var(--fv-surface);
        border-radius: var(--fv-r-md);
        padding: 0 var(--fv-s-3);
        gap: var(--fv-s-2);
        min-height: var(--fv-tap);
    }
    .ini-header-buscador .ini-buscador-form:focus-within {
        border-color: var(--fv-blue);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--fv-blue) 15%, transparent);
    }
    .ini-header-buscador .ini-buscador-form .ini-ico { color: var(--fv-soft); width: 19px; height: 19px; flex-shrink: 0; }
    .ini-header-buscador .ini-buscador-input { font-size: 14px; padding: 12px 0; color: var(--fv-ink); }
    .ini-header-buscador .ini-buscador-input::placeholder { color: var(--fv-soft); }

    /* Buscador viejo del hero: fuera en celular */
    .ini-buscador-movil, .ini-saludo-seccion { display: none !important; }

    /* ============ FRANJA DE CONFIANZA (estática, 3 ítems) ============ */
    .barra-confianza { background: var(--fv-ink); }
    .barra-confianza-inner {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--fv-s-2);
        overflow: visible;
        padding: 9px var(--fv-s-3);
        max-width: none;
    }
    .barra-confianza-lista {
        display: contents;
    }
    .barra-confianza-lista li {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        text-align: center;
        white-space: normal;
        font-size: 10px;
        font-weight: 600;
        line-height: 1.15;
        color: rgba(255,255,255,.9);
    }
    .barra-confianza-lista .ini-ico { width: 15px; height: 15px; color: var(--fv-teal); }
    .barra-confianza-largo { display: none; }
    .barra-confianza-corto { display: inline; }
    .barra-confianza-ayuda { display: none; }

    /* ============ BANNER DE CAMPAÑA ============ */
    .mercado-main { display: flex; flex-direction: column; padding: var(--fv-s-4); gap: 0; }

    .ini-banner-campana {
        display: block;
        order: 1;
        margin: 0 0 var(--fv-s-5);
    }
    .ini-banner-campana-link {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 7px;
        background: linear-gradient(135deg, var(--fv-ink) 0%, #0F2D52 100%);
        border-radius: var(--fv-r-xl);
        padding: 20px var(--fv-s-4);
        text-decoration: none;
        box-shadow: none;
    }
    .ini-banner-campana-eyebrow {
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .09em;
        text-transform: uppercase;
        color: var(--fv-teal);
    }
    .ini-banner-campana-titular {
        font-size: 21px;
        font-weight: 800;
        line-height: 1.25;
        color: #fff;
        margin: 2px 0 8px;
    }
    .ini-banner-campana-cta {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 36px;
        padding: 0 16px;
        border-radius: var(--fv-r-pill);
        background: #fff;
        color: var(--fv-ink);
        font-size: 13px;
        font-weight: 700;
    }
    .ini-banner-campana-cta svg { width: 15px; height: 15px; }

    /* ============ ORDEN DE SECCIONES EN EL <main> ============ */
    #seccion-impacto-social-inicio    { order: 2; }
    #ini-marcas-seccion               { order: 3; }
    #categorias                       { order: 4; }
    .ini-modulo-productos-cabecera    { order: 5; }
    .ini-tabs-catalogo-movil          { order: 6; }
    #ini-ofertas-seccion              { order: 7; }
    #seccion-novedades                { order: 7; }
    #seccion-mas-vendidos             { order: 7; }
    .seccion-testimonios             { order: 8; }
    .ini-newsletter                   { order: 9; }
    #ini-teaser-confianza-movil       { order: 10; margin: var(--fv-s-4) 0 0; }
    /* Si el usuario toca el teaser "¿Quieres saber qué es Farmavitae?",
       las secciones que se revelan (.mostrar-confianza) deben salir
       JUSTO debajo del teaser, no saltar al inicio del <main>. */
    .seccion-confianza-farmavitae.mostrar-confianza { order: 11; }

    /* Fuera de la home en celular */
    .hero-mercado-wrap,
    .seccion-tiendas-destacadas,
    #productos-destacados { display: none !important; }

    /* ============ CATEGORÍAS ============ */
    #categorias { margin-bottom: var(--fv-s-5); }
    #categorias .seccion-header {
        margin-bottom: var(--fv-s-3);
        flex-wrap: nowrap;
        align-items: baseline;
        gap: var(--fv-s-3);
    }
    #categorias .seccion-header h2 { font-size: 19px; font-weight: 800; color: var(--fv-ink); white-space: nowrap; }
    #categorias .seccion-header .btn-mkt-link { flex: 0 0 auto; white-space: nowrap; font-weight: 700; color: var(--fv-blue); }
    #fila-categorias-inicio { gap: 10px; align-items: flex-start; }
    #fila-categorias-inicio .categoria-hero-item {
        flex: 0 0 auto;
        width: 72px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 7px;
        padding: 0;
        background: none;
        border: none;
        box-shadow: none;
        text-align: center;
    }
    #fila-categorias-inicio .categoria-hero-ico {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--fv-surface);
        color: var(--fv-blue);
        box-shadow: none;
        font-size: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    #fila-categorias-inicio .categoria-hero-ico svg { width: 26px; height: 26px; }
    #fila-categorias-inicio .categoria-hero-item-vertodas .categoria-hero-ico svg { width: 22px; height: 22px; }
    #fila-categorias-inicio .categoria-hero-item > span:not(.categoria-hero-ico):not(.categoria-hero-cantidad) {
        display: block;
        width: 100%;
        font-size: 10.5px;
        font-weight: 600;
        line-height: 1.2;
        color: var(--fv-body);
        text-align: center;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    #fila-categorias-inicio .categoria-hero-cantidad { display: none; }

    /* ============ MÓDULO "PRODUCTOS" ============ */
    .ini-modulo-productos-cabecera {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--fv-s-3);
        margin-bottom: var(--fv-s-3);
    }
    .ini-modulo-productos-cabecera h2 {
        margin: 0;
        font-size: 19px;
        font-weight: 800;
        color: var(--fv-ink);
    }
    .ini-modulo-productos-cabecera .btn-mkt-link {
        font-size: 13px;
        font-weight: 700;
        color: var(--fv-blue);
        white-space: nowrap;
    }

    /* Chips Ofertas / Nuevos / Más vendidos */
    .ini-tabs-catalogo-movil { gap: var(--fv-s-2); margin: 0 0 var(--fv-s-4); }
    .ini-tab-catalogo {
        height: 34px;
        padding: 0 14px;
        display: inline-flex;
        align-items: center;
        font-family: var(--fv-font);
        font-size: 12.5px;
        font-weight: 600;
        color: var(--fv-body);
        background: #fff;
        border: 1px solid var(--fv-border);
        border-radius: var(--fv-r-pill);
    }
    .ini-tab-catalogo-activa {
        background: var(--fv-blue);
        border-color: var(--fv-blue);
        color: #fff;
        box-shadow: none;
    }

    /* Las 3 secciones de producto: sin fondo/marco propio, comparten el módulo */
    #ini-ofertas-seccion,
    #seccion-novedades,
    #seccion-mas-vendidos {
        padding: 0 !important;
        margin: 0 0 var(--fv-s-5) !important;
        background: none !important;
        border-radius: 0;
        color: var(--fv-body);
        overflow: visible;
        isolation: auto;
    }
    #ini-ofertas-seccion::before,
    #ini-ofertas-seccion::after { display: none !important; }
    #ini-ofertas-seccion .ini-seccion-cabecera,
    #ini-ofertas-seccion .ini-ofertas-cta,
    #seccion-novedades .seccion-header,
    #seccion-mas-vendidos .seccion-header { display: none !important; }
    #ini-ofertas-seccion .ini-ofertas-vacio {
        color: var(--fv-muted) !important;
        padding: var(--fv-s-4) 0 !important;
        font-size: 12.5px;
        text-align: left;
    }

    /* Grid de 2 columnas */
    #grid-ofertas,
    #grid-novedades,
    #grid-mas-vendidos {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: var(--fv-s-3);
        overflow: visible !important;
        padding: 0 !important;
        scroll-snap-type: none;
    }
    #grid-ofertas > .producto-card-mkt,
    #grid-novedades > .producto-card-mkt,
    #grid-mas-vendidos > .producto-card-mkt {
        width: auto !important;
        flex: none !important;
        height: auto !important;
        min-height: 0 !important;
        scroll-snap-align: none;
    }
    /* La tarjeta completa (imagen + marca + nombre + descripción +
       precio + selector de cantidad + "Agregar") — misma que en el
       Marketplace, ver el bloque compartido .producto-card-mkt en
       mercado.css. */
    .catalogo-vacio { font-size: 12.5px; color: var(--fv-muted); padding: var(--fv-s-4) 0; }

    /* ============ MARCAS VERIFICADAS (fila de chips, sin titular grande) ============ */
    #ini-marcas-seccion { margin: 0 0 var(--fv-s-5); }
    #ini-marcas-seccion .ini-seccion-cabecera {
        display: block;
        text-align: left;
        margin: 0 0 var(--fv-s-2);
    }
    #ini-marcas-seccion .ini-seccion-cabecera .ini-seccion-eyebrow { display: none; }
    #ini-marcas-seccion .ini-seccion-cabecera h2 {
        font-family: var(--fv-font);
        font-size: 11px !important;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--fv-soft);
        margin: 0;
    }
    .ini-marca-item {
        border: 1px solid var(--fv-border);
        border-radius: var(--fv-r-pill);
        padding: 6px 12px;
        background: #fff;
        color: var(--fv-body);
        font-size: 12px;
        font-weight: 600;
    }
    .ini-marca-item img { height: 20px; width: 20px; }

    /* ============ IMPACTO SOCIAL — BANNER DE CAMPAÑA ============ */
    #seccion-impacto-social-inicio { margin: 0 0 var(--fv-s-5); padding: 0 !important; }
    #seccion-impacto-social-inicio .ini-seccion-cabecera,
    #seccion-impacto-social-inicio .fila-impacto-social-fundaciones,
    #seccion-impacto-social-inicio > div:last-of-type { display: none !important; }
    .ini-impacto-banner {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        overflow: hidden;
        padding: 20px var(--fv-s-4);
        border-radius: var(--fv-r-xl);
        text-decoration: none;
        color: #fff;
        background:
            radial-gradient(320px 180px at 100% 0%, rgba(228,70,43,.35), transparent 70%),
            linear-gradient(135deg, var(--fv-ink) 0%, #0F2D52 100%);
    }
    .ini-impacto-banner::after {
        content: '';
        position: absolute;
        right: -24px;
        bottom: -30px;
        width: 130px;
        height: 130px;
        background: rgba(255,255,255,.08);
        -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.9-10-9.3C.4 8.3 2 4.5 5.6 4A5 5 0 0 1 12 7a5 5 0 0 1 6.4-3c3.6.5 5.2 4.3 3.6 7.7C19.5 16.1 12 21 12 21Z'/%3E%3C/svg%3E");
        mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.9-10-9.3C.4 8.3 2 4.5 5.6 4A5 5 0 0 1 12 7a5 5 0 0 1 6.4-3c3.6.5 5.2 4.3 3.6 7.7C19.5 16.1 12 21 12 21Z'/%3E%3C/svg%3E");
    }
    .ini-impacto-banner > * { position: relative; z-index: 1; }
    .ini-impacto-banner-texto-col { display: flex; flex-direction: column; gap: 6px; }
    .ini-impacto-banner-eyebrow {
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--fv-teal);
    }
    .ini-impacto-banner-titular {
        font-size: 17px;
        font-weight: 800;
        line-height: 1.3;
        color: #fff;
        max-width: 24ch;
    }
    .ini-impacto-banner-titular span { color: var(--fv-teal); }
    .ini-impacto-banner-cta {
        margin-top: 6px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 34px;
        padding: 0 16px;
        border-radius: var(--fv-r-pill);
        background: #fff;
        color: var(--fv-ink);
        font-size: 12.5px;
        font-weight: 700;
    }
    .ini-impacto-banner-cta svg { width: 14px; height: 14px; }

    /* ============ RESEÑAS (resumen + carrusel de testimonios) ============ */
    .seccion-testimonios { margin: 0 0 var(--fv-s-5); }
    .seccion-testimonios .ini-seccion-cabecera .ini-seccion-eyebrow { display: none; }
    .seccion-testimonios .ini-seccion-cabecera h2 { font-size: 19px; font-weight: 800; color: var(--fv-ink); }
    .ini-resenas-resumen {
        display: flex;
        align-items: center;
        gap: 6px;
        margin: 4px 0 var(--fv-s-3);
        font-size: 13px;
        color: var(--fv-muted);
    }
    .ini-resenas-resumen strong { font-size: 15px; font-weight: 800; color: var(--fv-ink); }
    .ini-resenas-resumen-estrellas svg { width: 15px; height: 15px; fill: #F5A623; }
    .seccion-testimonios .ini-testimonios {
        display: flex;
        gap: var(--fv-s-3);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        margin: 0;
        padding: 0 0 4px;
    }
    .seccion-testimonios .ini-testimonios::-webkit-scrollbar { display: none; }
    .seccion-testimonios .ini-testimonios .testimonio-card {
        flex: 0 0 82%;
        scroll-snap-align: start;
        height: auto;
        overflow: visible;
        border: 1px solid var(--fv-border);
        box-shadow: none;
        border-radius: var(--fv-r-lg);
        padding: var(--fv-s-4);
    }
    .seccion-testimonios .ini-testimonios .testimonio-texto {
        -webkit-line-clamp: 4;
        font-size: 12.5px;
        color: var(--fv-body);
    }

    /* ============ NEWSLETTER / SUSCRIPCIÓN ============ */
    .ini-newsletter {
        margin: 0 0 var(--fv-s-5);
        padding: var(--fv-s-5) var(--fv-s-4);
        background: var(--fv-surface);
        border: 1px solid var(--fv-border);
        border-radius: var(--fv-r-xl);
        text-align: left;
    }
    .ini-newsletter h2 { font-size: 18px; font-weight: 800; color: var(--fv-ink); margin: 0 0 4px; }
    .ini-newsletter > p { font-size: 12.5px; color: var(--fv-muted); margin: 0 0 var(--fv-s-3); }
    .ini-newsletter-campos { flex-direction: column; gap: var(--fv-s-2); border: none; background: none; padding: 0; }
    .ini-newsletter-divisor { display: none; }
    .ini-newsletter-campos input {
        width: 100%;
        height: 44px;
        padding: 0 14px;
        border: 1px solid var(--fv-border);
        border-radius: var(--fv-r-md);
        background: #fff;
        font-size: 14px;
    }
    .ini-newsletter-form { display: flex; flex-direction: column; gap: var(--fv-s-2); }
    .ini-newsletter-form .btn-mkt-primary { width: 100%; height: 44px; border-radius: var(--fv-r-md); }

    /* ============ FOOTER (compacto) ============ */
    .footer-inicio { margin-top: 0; background: var(--fv-ink); }
    .ini-footer-pago {
        margin-top: 6px;
        gap: 6px;
    }
    .ini-footer-pago span {
        background: rgba(255,255,255,.1);
        color: rgba(255,255,255,.9);
        font-size: 10.5px;
        font-weight: 700;
        padding: 4px 9px;
        border-radius: 6px;
    }
}