/* =============================================================
   ZYRA — Landing Page CSS
   Identidad de marca aplicada (Manual de Marca Zyra)
   Paleta: Vino · Duna (oro) · Ciruela · Laurel · Bruma · Hueso
   Tipografía: Cormorant Garamond (títulos) · Jost (cuerpo/UI)
   ============================================================= */

/* === RESET & BASE ========================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 18px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
}

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

ul[role="list"] { list-style: none; }

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

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
    font-size: inherit;
}

/* === CSS VARIABLES ========================================= */
:root {
    /* --- Paleta de marca Zyra --- */
    --vino:                 #4A0C0A;   /* Vino   */
    --vino-light:           #6B2422;   /* Vino aclarado (hover) */
    --duna:                 #CBA870;   /* Duna (oro) */
    --duna-dark:            #B08F54;   /* Oro más profundo */
    --ciruela:              #7A5457;   /* Ciruela */
    --laurel:               #7E8B87;   /* Laurel (sage) */
    --bruma:                #8EA0A3;   /* Bruma */
    --hueso:                #D9D0C2;   /* Hueso */
    --crema:                #FBF6EE;   /* Crema (texto sobre vino) */

    /* --- Roles semánticos --- */
    --color-bg:             #FBF9F6;   /* off-white cálido */
    --color-text:           #2E1413;   /* Vino casi-negro (lectura AA) */
    --color-text-muted:     #7A5457;   /* Ciruela */
    --color-border:         #E7DFD2;
    --color-surface:        #F2ECE3;   /* Hueso suave */
    --color-placeholder-bg: #D9D0C2;
    --color-placeholder-fg: #9C8970;
    --color-primary:        var(--vino);
    --color-primary-light:  var(--vino-light);
    --color-accent:         var(--duna);
    --color-accent-dark:    var(--duna-dark);
    --color-btn-bg:         var(--duna);
    --color-btn-text:       var(--vino);
    --color-whatsapp:       #25d366;

    /* --- Tipografía --- */
    /* Fuentes comerciales del manual de marca (New Standard / Mero Thai);
       si no están instaladas localmente, el navegador cae al fallback webfont. */
    --font-serif:           'New Standard', 'Playfair Display', 'Georgia', 'Times New Roman', serif;
    --font-sans:            'Mero Thai', 'Poppins', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --max-width:            1200px;
    --padding-x:            1.5rem;
    --section-py:           5rem;
    --border-radius:        8px;
    --border-radius-lg:     16px;
    --shadow-sm:            0 1px 4px rgba(74,12,10,.06);
    --shadow-md:            0 6px 22px rgba(74,12,10,.10);
    --shadow-lg:            0 12px 40px rgba(74,12,10,.16);
    --transition:           .25s ease;
    --header-h:             100px;
}

/* === UTILITIES ============================================= */
.container {
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--padding-x);
}

.section {
    padding-block: var(--section-py);
}

.section-header {
    text-align: center;
    max-width: 640px;
    margin-inline: auto;
    margin-bottom: 3rem;
}

.section-title {
    font-family: var(--font-serif);
    font-size: clamp(2.1rem, 4.5vw, 3rem);
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.15;
    color: var(--color-primary);
    margin-bottom: .75rem;
}

.section-header .section-title::after {
    content: "";
    display: block;
    width: 56px;
    height: 2px;
    margin: 1rem auto 0;
    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
}

.section-subtitle {
    font-size: 1.0625rem;
    color: var(--color-text-muted);
    line-height: 1.7;
}

/* === BUTTONS =============================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .75rem 1.75rem;
    border-radius: var(--border-radius);
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: .01em;
    transition: background-color var(--transition), color var(--transition),
                border-color var(--transition), box-shadow var(--transition),
                transform var(--transition);
    white-space: nowrap;
    user-select: none;
}

.btn svg {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
}

.btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

.btn-primary {
    background: var(--color-btn-bg);
    color: var(--color-btn-text);
    border: 2px solid var(--color-btn-bg);
}
.btn-primary:hover {
    background: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-outline {
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-accent);
}
.btn-outline:hover {
    border-color: var(--color-primary);
    background: var(--color-surface);
    transform: translateY(-1px);
}

/* Botón dorado (acento de marca) */
.btn-gold {
    background: var(--color-accent);
    color: var(--vino);
    border: 2px solid var(--color-accent);
}
.btn-gold:hover {
    background: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-lg {
    padding: .9375rem 2.25rem;
    font-size: 1rem;
}

.btn-block {
    width: 100%;
}

.btn-whatsapp {
    background: var(--color-whatsapp);
    color: #ffffff;
    border: 2px solid var(--color-whatsapp);
}
.btn-whatsapp:hover {
    background: #20bc5a;
    border-color: #20bc5a;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* === IMAGE PLACEHOLDERS ==================================== */
.img-placeholder {
    background:
        linear-gradient(135deg, rgba(203,168,112,.18), transparent 55%),
        var(--color-placeholder-bg);
    color: var(--color-placeholder-fg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    border-radius: var(--border-radius);
    border: 1px solid rgba(203,168,112,.35);
    width: 100%;
}

/* Cuando .img-placeholder es una <img> real, llena el hueco sin deformar */
img.img-placeholder {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-color: transparent;
}

.img-placeholder--lg  { aspect-ratio: 4/3; min-height: 280px; border-radius: var(--border-radius-lg); }
.img-placeholder--md  { aspect-ratio: 16/9; }
.img-placeholder--sm  { aspect-ratio: 16/7; margin-bottom: 1.25rem; border-radius: var(--border-radius); }

/* =============================================================
   HEADER / NAV
   ============================================================= */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
    height: var(--header-h);
    background: rgba(74,12,10,.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(203,168,112,.18);
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.site-header.scrolled {
    background: rgba(58,9,8,.97);
    border-bottom-color: rgba(203,168,112,.3);
    box-shadow: var(--shadow-md);
}

.nav-container {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 2rem;
}

/* La Propuesta A suma texto (wordmark + eslogan) donde antes solo había
   una imagen angosta; se ajusta el espaciado para que los 6 enlaces
   sigan cabiendo en una sola línea sin romperse. */
.site-header--a .nav-container { gap: .875rem; }
.site-header--a .nav-links     { gap: 0; }
.site-header--a .nav-link      { padding-inline: .5rem; white-space: nowrap; }

/* ── Header original (en vivo para el público) ── */
.nav-logo {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
}

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

/* ── Marca en el header (isotipo + wordmark) ── */
.nav-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-shrink: 0;
}

.nav-isotipo {
    width: 34px;
    height: 34px;
    color: var(--color-accent);
    flex-shrink: 0;
}

.nav-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.nav-brand-word {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--crema);
    letter-spacing: .01em;
}

.nav-brand-tagline {
    font-family: var(--font-sans);
    font-size: .6875rem;
    color: rgba(251,246,238,.7);
    margin-top: 1px;
    white-space: nowrap;
}

/* ── Propuesta B: logo centrado ──
   Grid de 3 columnas (en vez de centrar con position:absolute) para que
   el logo quede matemáticamente centrado sin importar cuánto midan el
   botón "hamburguesa" o el CTA a los lados — así nunca se encima con
   ellos en pantallas angostas. */
.nav-container--b {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
    align-items: center;
    column-gap: .5rem;
}

.nav-side {
    display: flex;
    align-items: center;
    min-width: 0;
}

.nav-side--start { justify-content: flex-start; }
.nav-side--end   { justify-content: flex-end; }

/* .nav-toggle trae "margin-left: auto" de la Propuesta A (donde se
   necesitaba para empujarlo contra el CTA en una fila simple). Aquí
   el propio grid ya lo alinea, así que ese margen se anula para que
   quede pegado al borde izquierdo real y no al lado del logo. */
.nav-side .nav-toggle { margin-left: 0; }

.nav-brand--b {
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    text-align: center;
}

.nav-isotipo--b {
    width: 44px;
    height: 44px;
}

.nav-brand-word--b {
    font-size: 1.35rem;
    line-height: 1;
}

/* El menú de la Propuesta B siempre vive detrás del botón hamburguesa,
   incluso en escritorio, y el CTA siempre queda visible al otro extremo. */
.site-header--b .nav-toggle { display: flex; }

.site-header--b .nav-cta { display: inline-flex; }

.site-header--b .nav-links {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    background: var(--color-primary);
    border-bottom: 1px solid rgba(203,168,112,.25);
    flex-direction: column;
    align-items: stretch;
    padding: .75rem 1rem 1.25rem;
    gap: .25rem;
    box-shadow: var(--shadow-md);
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--transition), opacity var(--transition);
    z-index: 899;
}

.site-header--b .nav-links.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.site-header--b .nav-link {
    padding: .875rem 1rem;
    border-radius: var(--border-radius);
    font-size: 1rem;
}

/* ── Propuesta C: menú a la izquierda + logo centrado (solo texto) + CTA a la derecha ──
   Inspirada en la referencia del cliente. Mismo truco de grid de 3
   columnas que la Propuesta B para que el logo quede centrado de verdad. */
.nav-container--c {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
    align-items: center;
    column-gap: .75rem;
}

.nav-links-inline {
    display: flex;
    align-items: center;
    gap: .125rem;
    min-width: 0;
}

.nav-links-inline .nav-link {
    padding-inline: .5rem;
    font-size: .8125rem;
    white-space: nowrap;
}

.nav-brand-word--c {
    font-size: 1.625rem;
    letter-spacing: .03em;
}

/* El <ul id="nav-links"> completo (6 enlaces) es SOLO el menú móvil en
   esta propuesta — el menú de escritorio real es .nav-links-inline.
   Se saca del flujo del grid con position:fixed para que no aparezca
   como una fila fantasma debajo del header en escritorio. */
.site-header--c .nav-links {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    background: var(--color-primary);
    border-bottom: 1px solid rgba(203,168,112,.25);
    flex-direction: column;
    align-items: stretch;
    padding: .75rem 1rem 1.25rem;
    gap: .25rem;
    box-shadow: var(--shadow-md);
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--transition), opacity var(--transition);
    z-index: 899;
}

.site-header--c .nav-links.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.site-header--c .nav-links .nav-link {
    padding: .875rem 1rem;
    border-radius: var(--border-radius);
    font-size: 1rem;
}

@media (max-width: 900px) {
    .nav-links-inline { display: none; }
}

/* ── Propuesta D: misma estética que la C, pero con hamburguesa
   siempre a la izquierda en vez de enlaces en línea. Reutiliza el
   grid de 3 columnas de la Propuesta B (mismo mecanismo, mismos
   nombres de clase .nav-side / .nav-container--b). ── */
.site-header--d .nav-toggle { display: flex; }

.site-header--d .nav-cta { display: inline-flex; }

.site-header--d .nav-links {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    background: var(--color-primary);
    border-bottom: 1px solid rgba(203,168,112,.25);
    flex-direction: column;
    align-items: stretch;
    padding: .75rem 1rem 1.25rem;
    gap: .25rem;
    box-shadow: var(--shadow-md);
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--transition), opacity var(--transition);
    z-index: 899;
}

.site-header--d .nav-links.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.site-header--d .nav-links .nav-link {
    padding: .875rem 1rem;
    border-radius: var(--border-radius);
    font-size: 1rem;
}

/* ── Propuesta E: igual que la D, pero con el logo apilado real
   (isotipo + "Zyra" + eslogan) en vez del wordmark solo texto. ── */
.nav-logo-stack-img {
    height: 76px;
    width: auto;
    display: block;
}

.site-header--e .nav-toggle { display: flex; }

.site-header--e .nav-cta { display: inline-flex; }

.site-header--e .nav-links {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    background: var(--color-primary);
    border-bottom: 1px solid rgba(203,168,112,.25);
    flex-direction: column;
    align-items: stretch;
    padding: .75rem 1rem 1.25rem;
    gap: .25rem;
    box-shadow: var(--shadow-md);
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--transition), opacity var(--transition);
    z-index: 899;
}

.site-header--e .nav-links.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.site-header--e .nav-links .nav-link {
    padding: .875rem 1rem;
    border-radius: var(--border-radius);
    font-size: 1rem;
}

.nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    flex: 1;
}

.nav-link {
    padding: .5rem .875rem;
    border-radius: var(--border-radius);
    font-size: .9375rem;
    color: rgba(251,246,238,.72);
    transition: color var(--transition), background-color var(--transition);
}

.nav-link:hover {
    color: var(--color-accent);
    background: rgba(251,246,238,.07);
}

.nav-cta {
    flex-shrink: 0;
    padding: .5rem 1.125rem;
    font-size: .875rem;
    background: var(--color-accent);
    color: var(--vino);
    border-color: var(--color-accent);
}
.nav-cta:hover {
    background: var(--crema);
    border-color: var(--crema);
    color: var(--vino);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: .5rem;
    margin-left: auto;
    border-radius: var(--border-radius);
}

.nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--crema);
    border-radius: 2px;
    transition: transform var(--transition), opacity var(--transition);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Colapsa a menú hamburguesa antes de que los 6 enlaces se apiñen en tablet */
@media (max-width: 900px) {
    .nav-toggle { display: flex; }
    .nav-cta    { display: none; }

    .nav-links {
        position: fixed;
        top: var(--header-h);
        left: 0;
        right: 0;
        background: var(--color-primary);
        border-bottom: 1px solid rgba(203,168,112,.25);
        flex-direction: column;
        align-items: stretch;
        padding: .75rem 1rem 1.25rem;
        gap: .25rem;
        box-shadow: var(--shadow-md);
        transform: translateY(-100%);
        opacity: 0;
        pointer-events: none;
        transition: transform var(--transition), opacity var(--transition);
        z-index: 899;
    }

    .nav-links.is-open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .nav-link {
        padding: .875rem 1rem;
        border-radius: var(--border-radius);
        font-size: 1rem;
    }
}

/* =============================================================
   HERO
   ============================================================= */
.hero {
    padding-top: calc(var(--header-h) + 4rem);
    padding-bottom: 4rem;
    background:
        radial-gradient(1100px 520px at 85% -8%, rgba(203,168,112,.16), transparent 60%),
        radial-gradient(900px 480px at 5% 0%, rgba(217,208,194,.4), transparent 55%),
        var(--color-bg);
}

.hero-mark {
    width: 52px;
    height: 52px;
    color: var(--color-accent);
    margin-bottom: 1.25rem;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    margin-bottom: 4rem;
}

/* Sin esto, los grid items no se encogen por debajo del ancho de su
   contenido ("grid blowout"): el título largo empujaba la columna más
   ancha que la pantalla y desbordaba horizontalmente en móvil. */
.hero-content,
.hero-visual {
    min-width: 0;
}

.hero-eyebrow {
    display: inline-block;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--color-accent-dark);
    margin-bottom: 1.25rem;
    padding: .4rem 1rem;
    border: 1px solid var(--color-accent);
    border-radius: 100px;
    background: rgba(203,168,112,.08);
}

.hero-title {
    font-family: var(--font-serif);
    font-size: clamp(2.6rem, 6vw, 4.25rem);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: 0;
    color: var(--color-primary);
    margin-bottom: 1.25rem;
}

.hero-description {
    font-size: 1.0625rem;
    color: var(--color-text-muted);
    line-height: 1.75;
    margin-bottom: 2rem;
    max-width: 480px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.hero-visual { position: relative; }

/* Pillars bar */
.hero-pillars {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

.pillar-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--color-text);
}

.pillar-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.pillar-divider {
    width: 1px;
    height: 1.25rem;
    background: var(--color-border);
    flex-shrink: 0;
}

/* =============================================================
   BENEFITS
   ============================================================= */
.benefits { background: var(--color-surface); }

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.benefit-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: 2rem 1.5rem;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-accent);
}

.benefit-icon {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, rgba(203,168,112,.22), rgba(217,208,194,.35));
    color: var(--color-accent-dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    transition: background var(--transition), color var(--transition);
}

.benefit-card:hover .benefit-icon {
    background: var(--color-primary);
    color: var(--color-accent);
}

.benefit-icon svg {
    width: 24px;
    height: 24px;
}

.benefit-title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: .625rem;
}

.benefit-desc {
    font-size: .9375rem;
    color: var(--color-text-muted);
    line-height: 1.65;
}

/* =============================================================
   CATEGORÍAS
   ============================================================= */
.categories { background: var(--color-bg); }

.categories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.categories-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.category-card {
    text-align: left;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    display: flex;
    flex-direction: column;
    width: 100%;
}

.category-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-accent);
}

.category-card .img-placeholder--md {
    border-radius: 0;
    aspect-ratio: 16/9;
    transition: opacity var(--transition);
}

.category-card:hover .img-placeholder--md { opacity: .9; }

.category-info {
    padding: .875rem 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.category-title {
    font-family: var(--font-serif);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: .375rem;
}

.category-desc {
    font-size: .8125rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    flex: 1;
    margin-bottom: .625rem;
}

.category-cta {
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--color-accent-dark);
    transition: gap var(--transition);
}

.category-card:hover .category-cta {
    color: var(--color-primary);
}

/* =============================================================
   MODALES
   ============================================================= */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(46,20,19,.6);
    backdrop-filter: blur(3px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    opacity: 0;
    transition: opacity .25s ease;
}

.modal-overlay.is-open {
    opacity: 1;
}

.modal-overlay[hidden] { display: none; }

.modal {
    background: var(--color-bg);
    border-radius: var(--border-radius-lg);
    max-width: 640px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 2rem;
    position: relative;
    transform: translateY(16px);
    transition: transform .25s ease;
    box-shadow: var(--shadow-lg);
}

.modal-overlay.is-open .modal {
    transform: translateY(0);
}

.modal--form {
    max-width: 640px;
}

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-surface);
    font-size: 1.375rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    transition: background var(--transition), color var(--transition);
}
.modal-close:hover { background: var(--color-border); color: var(--color-text); }

.modal-header { margin-bottom: 1.25rem; }

.modal-title {
    font-family: var(--font-serif);
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--color-primary);
    margin-bottom: .5rem;
}

.modal-body h4 {
    color: var(--color-primary);
}

.modal-subtitle {
    font-size: .9375rem;
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
}

.modal-body p {
    color: var(--color-text-muted);
    line-height: 1.7;
    margin-bottom: 1.25rem;
}

.modal-body h4 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: .75rem;
}

.modal-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-bottom: 1.5rem;
}

.modal-features li {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    font-size: .9375rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.modal-features li::before {
    content: "✓";
    font-size: .875rem;
    font-weight: 700;
    color: var(--color-accent-dark);
    flex-shrink: 0;
    margin-top: .05em;
}

.modal-gallery {
    margin-bottom: 1.5rem;
}

.modal-gallery-main {
    display: block;
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    margin-bottom: .625rem;
    background: var(--color-placeholder-bg);
    border: 1px solid rgba(203,168,112,.35);
}

.modal-gallery-main img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modal-gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .625rem;
}

.modal-gallery-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 4/3;
    padding: 0;
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    background: none;
    transition: border-color var(--transition), opacity var(--transition);
    opacity: .7;
}

.modal-gallery-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modal-gallery-thumb:hover { opacity: 1; }

.modal-gallery-thumb.is-active {
    border-color: var(--color-accent-dark);
    opacity: 1;
}

.modal-footer { padding-top: 1.25rem; border-top: 1px solid var(--color-border); }
.modal-footer .btn + .btn { margin-top: .75rem; }

.modal-quote-btn {
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    animation: modalQuoteGlow 2.4s ease-in-out infinite;
}
.modal-quote-btn:hover {
    animation-play-state: paused;
    box-shadow: var(--shadow-lg);
}
.modal-quote-btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.65), transparent);
    transform: skewX(-20deg);
    animation: modalQuoteShine 3.2s ease-in-out infinite;
}

@keyframes modalQuoteGlow {
    0%, 100% { box-shadow: var(--shadow-md), 0 0 0 0 rgba(203,168,112,.55); }
    50%      { box-shadow: var(--shadow-lg), 0 0 14px 4px rgba(203,168,112,.35); }
}

@keyframes modalQuoteShine {
    0%   { left: -60%; }
    45%  { left: 130%; }
    100% { left: 130%; }
}

.modal-buy-btn {
    opacity: .85;
}

@media (prefers-reduced-motion: reduce) {
    .modal-quote-btn,
    .modal-quote-btn::after {
        animation: none;
    }
}

/* Modal specs grid */
.modal-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .625rem 1rem;
    margin: 1.25rem 0;
    padding: 1rem 1.25rem;
    background: var(--color-surface);
    border-radius: var(--border-radius);
}

.modal-spec span {
    display: block;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: .125rem;
}

.modal-spec strong {
    font-size: .9375rem;
    color: var(--color-primary);
}

/* Modal highlight */
.modal-highlight {
    border-left: 3px solid var(--color-accent);
    padding: .875rem 1.25rem;
    margin: 1.25rem 0;
    font-style: italic;
    font-size: .9375rem;
    color: var(--color-text-muted);
    line-height: 1.7;
    background: var(--color-surface);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

/* =============================================================
   FORM
   ============================================================= */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    margin-bottom: 1rem;
}

.form-row .form-group { margin-bottom: 0; }

.form-group label {
    font-size: .875rem;
    font-weight: 600;
    color: var(--color-text);
}

.form-group label span { color: var(--color-text-muted); }

.form-group input,
.form-group select,
.form-group textarea {
    font-family: inherit;
    font-size: .9375rem;
    color: var(--color-text);
    background: var(--color-bg);
    border: 1.5px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: .6875rem .875rem;
    transition: border-color var(--transition), box-shadow var(--transition);
    width: 100%;
    resize: vertical;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #B3A595;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(203,168,112,.2);
}

.form-group input.is-invalid,
.form-group select.is-invalid,
.form-group textarea.is-invalid {
    border-color: #c0392b;
}

.form-error {
    font-size: .8125rem;
    color: #c0392b;
    min-height: 1.2em;
}

.form-feedback {
    padding: .875rem 1rem;
    border-radius: var(--border-radius);
    font-size: .9375rem;
    margin-bottom: 1rem;
    font-weight: 500;
}

.form-feedback.is-success {
    background: #f0faf4;
    color: #1a7a41;
    border: 1px solid #aadfc0;
}

.form-feedback.is-error {
    background: #fff0ef;
    color: #c0392b;
    border: 1px solid #f5bcb8;
}

.form-feedback[hidden] { display: none; }

/* Submit spinner */
.btn-spinner {
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* =============================================================
   ANIMACIONES — fade-in al hacer scroll + entrada del hero
   ============================================================= */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s cubic-bezier(.22,.61,.36,1),
                transform .7s cubic-bezier(.22,.61,.36,1);
    will-change: opacity, transform;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hero-eyebrow,
.hero-title,
.hero-description,
.hero-actions,
.hero-visual {
    opacity: 0;
    animation: heroFadeUp .8s cubic-bezier(.22,.61,.36,1) forwards;
}

.hero-eyebrow     { animation-delay: .05s; }
.hero-title       { animation-delay: .15s; }
.hero-description { animation-delay: .28s; }
.hero-actions      { animation-delay: .4s; }
.hero-visual      { animation-delay: .2s; }

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .hero-eyebrow, .hero-title, .hero-description, .hero-actions, .hero-visual {
        opacity: 1;
        animation: none;
    }
}

/* =============================================================
   TESTIMONIOS
   ============================================================= */
.testimonials { background: var(--color-surface); }

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.testimonial-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: var(--shadow-sm);
}

.testimonial-card--wide {
    grid-column: 1 / -1;
}

.testimonial-stars {
    color: var(--color-accent);
    font-size: 1rem;
    letter-spacing: .1em;
}

.testimonial-text {
    font-size: .9375rem;
    line-height: 1.75;
    color: var(--color-text-muted);
    flex: 1;
    font-style: italic;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: .875rem;
}

.author-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-accent);
    font-size: .8125rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.author-logo {
    height: 42px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.author-logo img {
    height: 100%;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    display: block;
}

.author-name {
    display: block;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--color-primary);
}

.author-role {
    display: block;
    font-size: .8125rem;
    color: var(--color-text-muted);
}

/* =============================================================
   LOGOS CAROUSEL
   ============================================================= */
.logos-section {
    padding-block: 3rem;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    overflow: hidden;
}

.logos-label {
    text-align: center;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 2rem;
}

.logos-outer { overflow: hidden; }

.logos-track {
    display: flex;
    align-items: center;
    gap: 2rem;
    width: max-content;
    animation: logos-scroll 22s linear infinite;
}

.logos-track:hover { animation-play-state: paused; }

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

.logo-item { flex-shrink: 0; }

.logo-img {
    height: 68px;
    width: auto;
    max-width: 190px;
    object-fit: contain;
    display: block;
}

.logo-placeholder {
    min-width: 140px;
    height: 84px;
    padding-inline: 1.25rem;
    background: var(--color-placeholder-bg);
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--color-placeholder-fg);
    white-space: nowrap;
}

/* =============================================================
   PROCESO
   ============================================================= */
.process { background: var(--color-bg); }

.process-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
}

.process-step {
    flex: 1;
    min-width: 180px;
    max-width: 240px;
    text-align: center;
    padding: 2rem 1rem;
    position: relative;
}

.step-number {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--color-accent-dark);
    margin-bottom: .75rem;
}

.step-icon {
    width: 64px;
    height: 64px;
    border: 1.5px solid var(--color-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
    margin-bottom: 1.25rem;
    color: var(--color-accent-dark);
    background: rgba(203,168,112,.07);
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
}

.process-step:hover .step-icon {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-accent);
    box-shadow: var(--shadow-sm);
}

.step-icon svg {
    width: 26px;
    height: 26px;
}

.step-title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: .5rem;
}

.step-desc {
    font-size: .875rem;
    color: var(--color-text-muted);
    line-height: 1.65;
}

.process-arrow {
    display: flex;
    align-items: center;
    padding-top: 1.5rem;
    color: var(--color-accent);
    flex-shrink: 0;
}

.process-arrow svg {
    width: 28px;
    height: 28px;
}

/* Process note */
.process-note {
    text-align: center;
    font-size: .875rem;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: .875rem 1.5rem;
    margin-top: 2.5rem;
    background: var(--color-surface);
    max-width: 600px;
    margin-inline: auto;
    line-height: 1.6;
}

/* =============================================================
   CTA FINAL
   ============================================================= */
.cta-final {
    background:
        radial-gradient(800px 400px at 90% 110%, rgba(203,168,112,.16), transparent 60%),
        var(--color-surface);
    border-top: 1px solid var(--color-border);
}

.cta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.cta-eyebrow {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--color-accent-dark);
    margin-bottom: .875rem;
}

.cta-title {
    font-family: var(--font-serif);
    font-size: clamp(2.1rem, 3.8vw, 3rem);
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.12;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.cta-right-title {
    color: var(--color-primary);
}

.cta-text {
    font-size: 1rem;
    color: var(--color-text-muted);
    line-height: 1.7;
    margin-bottom: 1.75rem;
}

.cta-image { margin-top: .5rem; }

.cta-right {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: 2rem;
    position: sticky;
    top: calc(var(--header-h) + 1rem);
}

.cta-right-title {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
}

.cta-right .btn + .btn { margin-top: .75rem; }

/* =============================================================
   FOOTER
   ============================================================= */
.site-footer {
    background:
        radial-gradient(700px 300px at 90% 0%, rgba(203,168,112,.12), transparent 60%),
        var(--color-primary);
    color: var(--color-btn-text);
    padding-block: 1.75rem;
}

.footer-inner {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: .875rem;
    align-items: center;
    justify-items: center;
    text-align: center;
}

.footer-logo-img {
    height: 40px;
    width: auto;
    display: block;
    margin: 0 auto .375rem;
}

.footer-tagline {
    font-size: .875rem;
    color: rgba(255,255,255,.55);
    margin-bottom: .25rem;
}

.footer-location {
    font-size: .8125rem;
    color: rgba(255,255,255,.4);
    font-style: normal;
    margin-top: .375rem;
}

.footer-legal {
    grid-column: 1 / -1;
    padding-top: .875rem;
    border-top: 1px solid rgba(255,255,255,.12);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 1rem;
    font-size: .8125rem;
    color: rgba(255,255,255,.45);
}

.footer-legal a { transition: color var(--transition); }
.footer-legal a:hover { color: #fff; }
.footer-sep { color: rgba(255,255,255,.2); }

.footer-credits {
    grid-column: 1 / -1;
    font-size: .8125rem;
    color: rgba(255,255,255,.35);
}

.footer-credits strong { color: rgba(255,255,255,.6); }

/* =============================================================
   PÁGINA NOSOTROS
   ============================================================= */

/* Franjas vino (superior e inferior) */
.page-strip {
    background:
        radial-gradient(600px 260px at 90% 0%, rgba(203,168,112,.14), transparent 60%),
        var(--vino);
    color: var(--crema);
    text-align: center;
}

.page-strip-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.page-strip--top {
    padding-top: calc(var(--header-h) + 3.5rem);
    padding-bottom: 3.5rem;
}

.page-strip-mark {
    width: 44px;
    height: 44px;
    color: var(--color-accent);
    margin-bottom: 1rem;
}

.page-strip-eyebrow {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: .5rem;
}

.page-strip-title {
    font-family: var(--font-serif);
    font-size: clamp(2.4rem, 5vw, 3.5rem);
    font-weight: 700;
    color: var(--crema);
}

.page-strip--bottom {
    padding-block: 3rem;
}

/* Historia: bloques narrativos */
.nosotros-story { background: var(--color-bg); }

.story-blocks {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    max-width: 760px;
    margin-inline: auto;
}

.story-block {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.story-block-number {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-accent-dark);
    flex-shrink: 0;
    width: 2.5rem;
}

.story-block-title {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: .5rem;
}

.story-block-text {
    font-size: 1rem;
    color: var(--color-text-muted);
    line-height: 1.75;
}

/* Bloque 4: insight destacado (ciruela) */
.story-insight {
    background:
        radial-gradient(500px 240px at 90% 0%, rgba(203,168,112,.18), transparent 60%),
        var(--ciruela);
    color: var(--crema);
    border-radius: var(--border-radius-lg);
    padding: 2.5rem;
    text-align: center;
    box-shadow: var(--shadow-md);
}

.story-insight-label {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 1rem;
}

.story-insight-stat {
    font-family: var(--font-serif);
    font-size: clamp(3rem, 8vw, 4.5rem);
    font-weight: 700;
    line-height: 1;
    color: var(--crema);
    margin-bottom: .75rem;
}

.story-insight-text {
    font-size: 1.0625rem;
    line-height: 1.7;
    max-width: 480px;
    margin-inline: auto;
    color: rgba(255,255,255,.88);
}

/* Bloque de confianza: ubicación */
.nosotros-trust { background: var(--color-surface); }

.trust-location {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    max-width: 640px;
    margin-inline: auto;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: 1.75rem 2rem;
}

.trust-location-icon {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(203,168,112,.14);
    color: var(--color-accent-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}

.trust-location-icon svg { width: 26px; height: 26px; }

.trust-location-title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: .25rem;
}

.trust-location-text {
    font-size: .9375rem;
    color: var(--color-text-muted);
}

/* Bloque de confianza: equipo */
.nosotros-team { background: var(--color-bg); }

.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.team-placeholder-frame {
    aspect-ratio: 3/4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: 1.25rem;
    text-align: center;
    border: 1.5px solid var(--color-accent);
    border-radius: var(--border-radius-lg);
    background:
        linear-gradient(135deg, rgba(203,168,112,.1), transparent 60%),
        var(--color-surface);
    color: var(--color-placeholder-fg);
    transition: border-color var(--transition), background var(--transition);
}

.team-placeholder-frame svg {
    width: 40px;
    height: 40px;
    color: var(--color-accent-dark);
}

.team-placeholder-frame span {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.team-placeholder:hover .team-placeholder-frame {
    border-color: var(--color-primary);
    background:
        linear-gradient(135deg, rgba(203,168,112,.18), transparent 60%),
        var(--color-surface);
}

/* Responsive — Nosotros */
@media (max-width: 1024px) {
    .team-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .page-strip--top { padding-top: calc(var(--header-h) + 2.5rem); padding-bottom: 2.5rem; }
    .story-block { flex-direction: column; gap: .5rem; }
    .story-block-number { width: auto; }
    .story-insight { padding: 2rem 1.5rem; }
    .trust-location { flex-direction: column; text-align: center; padding: 1.5rem; }
    .team-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
}

/* =============================================================
   SCROLL-TO-TOP (accessibility helper)
   ============================================================= */
.scroll-top {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 44px;
    height: 44px;
    background: var(--color-primary);
    color: var(--color-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 800;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity var(--transition), transform var(--transition);
    box-shadow: var(--shadow-md);
}

.scroll-top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.scroll-top:hover { background: var(--color-primary-light); }
.scroll-top svg { width: 20px; height: 20px; }

/* =============================================================
   RESPONSIVE
   ============================================================= */

/* Tablet → 2-col grids */
@media (max-width: 1024px) {
    .benefits-grid    { grid-template-columns: repeat(2, 1fr); }
    .categories-grid  { grid-template-columns: repeat(2, 1fr); }
    .categories-grid--3 { grid-template-columns: repeat(2, 1fr); }
    .process-steps    { gap: 0; }
    .cta-grid         { gap: 2.5rem; }
}

/* Tablet narrow */
@media (max-width: 860px) {
    :root { --section-py: 3.5rem; }

    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .hero-content { order: 1; }
    .hero-visual  { order: 0; }
    .hero-description { max-width: 100%; }
    .hero-actions { justify-content: center; }
    .hero-eyebrow { display: block; margin-inline: auto; }



    .cta-grid { grid-template-columns: 1fr; }
    .cta-right { position: static; }
}

/* Mobile */
@media (max-width: 640px) {
    :root {
        --padding-x:   1rem;
        --section-py:  3rem;
        --header-h:    60px;
    }

    /* Los botones con etiquetas largas (ej. el CTA del hero) se
       desbordaban horizontalmente en pantallas angostas porque .btn
       usa white-space:nowrap por default. Aquí se permite el ajuste
       de línea; los botones con textos cortos no se ven afectados. */
    .btn { white-space: normal; }

    /* Le da aire al crédito del footer para que el botón flotante de
       "volver arriba" no quede encimado con el texto en móvil. */
    .footer-credits { padding-bottom: 3rem; }

    .nav-logo-img { height: 42px; }

    /* Marca: en móvil se compacta para caber en el header de 60px */
    .nav-brand-tagline { display: none; }
    .nav-isotipo       { width: 26px; height: 26px; }
    .nav-brand-word    { font-size: 1.125rem; }

    .nav-brand--b    { gap: .15rem; }
    .nav-isotipo--b  { width: 26px; height: 26px; }
    .nav-brand-word--b { font-size: 1rem; }

    .site-header--b .nav-cta {
        padding: .4rem .625rem;
        font-size: .75rem;
    }

    /* Propuesta C/D: el wordmark también se compacta en móvil */
    .nav-brand-word--c { font-size: 1.125rem; }

    .site-header--d .nav-cta {
        padding: .4rem .625rem;
        font-size: .75rem;
    }

    /* Propuesta E: logo apilado más chico + CTA compacto en móvil */
    .nav-logo-stack-img { height: 48px; }

    .site-header--e .nav-cta {
        padding: .4rem .625rem;
        font-size: .75rem;
    }

    /* Grids → 1-col */
    .benefits-grid      { grid-template-columns: 1fr; }
    .categories-grid    { grid-template-columns: 1fr; }
    .categories-grid--3 { grid-template-columns: 1fr; }
    .pillar-divider     { display: none; }
    .testimonials-grid  { grid-template-columns: 1fr; }

    /* Process: stack vertically */
    .process-steps    { flex-direction: column; align-items: center; }
    .process-arrow    { transform: rotate(90deg); padding-top: 0; padding-block: .25rem; }
    .process-step     { max-width: 360px; width: 100%; }

    /* Form single-col */
    .form-row { grid-template-columns: 1fr; }

    /* Footer */
    .footer-inner {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 1.5rem;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
    html { scroll-behavior: auto; }
}