/* ============================================================================
   CORI ALQUICIRA — V5 "EDITORIAL CÁLIDO"
   Sistema de diseño construido desde cero. Rama: rediseno-premium
   Inspiración: editorial cálido (crema/tinta/pasteles) + hero centrado
   ============================================================================ */

/* ---------- 1. TOKENS ---------- */
:root {
    /* ====== PALETA 2026 ======
       Base oscura: navy del logo. Acento de marca: rosa del logo.
       Rellenos pastel: rosa, salvia, aqua, amarillo.
       Los nombres de variable se conservan para no romper usos; solo
       cambian sus valores. */
    --ink: #1B213D;          /* navy logo — texto y base oscura */
    --ink-soft: #2E3650;
    --gray: #5A6072;
    --gray-light: #9298A8;
    --crema: #F9F7F2;        /* crema — ahora acento, no fondo global */
    --beige: #EFEBE3;
    --white: #FFFFFF;        /* blanco — fondo dominante */

    /* Pasteles (rellenos: tarjetas, chips, tintes de sección) */
    --pink: #FECCC3;         /* rosa del logo */
    --sage: #C8D9A7;         /* verde salvia */
    --aqua-c: #D1EEED;       /* aqua suave */
    --yellow: #FDD66E;       /* amarillo */

    /* Acentos legibles para TEXTO/detalle (versiones profundas) */
    --rose: #C85E7C;         /* rosa profundo — palabras resaltadas e iconos */
    --amber: #C85E7C;        /* (sin mustard) — iconos/detalle en rosa */

    /* --- Alias de compatibilidad (mismos nombres, nuevos valores) --- */
    --gold: #FDD66E;         /* era #FCC113 → ahora amarillo (rellenos/botones) */
    --gold-deep: #C85E7C;    /* detalle/icono sobre fondo claro → rosa legible */
    --terracota: #C85E7C;    /* acento de texto → rosa profundo legible */
    --durazno: #FDD66E;      /* → amarillo */
    --vainilla: #FEF2CE;     /* → amarillo muy claro */
    --menta: #C8D9A7;        /* → salvia */
    --aqua: #D1EEED;         /* → aqua suave */
    --coral: #FECCC3;        /* → rosa del logo */
    --navy: #1B213D;
    --whatsapp: #25D366;

    /* Tipografía */
    --font-display: 'Bricolage Grotesque', sans-serif;
    --font-body: 'Outfit', sans-serif;
    --fs-hero: clamp(2.6rem, 6.5vw, 5.25rem);
    --fs-h2: clamp(2rem, 4.2vw, 3.4rem);
    --fs-h3: clamp(1.25rem, 2vw, 1.55rem);
    --fs-lead: clamp(1.1rem, 1.6vw, 1.35rem);

    /* Forma */
    --r-xl: 40px;
    --r-lg: 28px;
    --r-md: 20px;
    --r-pill: 999px;

    /* Movimiento */
    --ease: cubic-bezier(.22, .61, .36, 1);
    --t-fast: .25s var(--ease);
    --t-med: .5s var(--ease);

    /* Layout */
    --container: 1200px;
    --gutter: clamp(1.25rem, 4vw, 2.5rem);
}

/* ---------- 2. RESET / BASE ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
    scroll-behavior: smooth;
    overflow-x: hidden;   /* fallback navegadores antiguos */
    overflow-x: clip;     /* evita scroll/zoom horizontal en móvil sin romper sticky/fixed */
}
body {
    font-family: var(--font-body);
    background: var(--white);
    color: var(--ink);
    line-height: 1.6;
    font-size: 1.0625rem;
    overflow-x: hidden;   /* fallback navegadores antiguos */
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    max-width: 100%;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
::selection { background: var(--gold); color: var(--ink); }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--ink);
}

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
/* Padding simétrico moderado para ritmo uniforme entre secciones */
.section { padding-block: clamp(2.75rem, 5vw, 4.25rem); }

/* Modificadores de fondo para dar ritmo entre secciones.
   Base blanca; los tintes son MUY suaves (pasteles al ~35-45%). */
.section--white   { background: var(--white); }
.section--cream   { background: var(--crema); }
.section--vanilla { background: linear-gradient(180deg, var(--white), #FFF7E4 55%, var(--white)); }
.section--mint    { background: linear-gradient(180deg, var(--white), #EEF6E6 55%, var(--white)); }
.section--pink    { background: linear-gradient(180deg, var(--white), #FFF1ED 55%, var(--white)); }
.section--aqua    { background: linear-gradient(180deg, var(--white), #EAF6F5 55%, var(--white)); }
.section--beige   { background: var(--beige); }
.section--ink     { background: var(--ink); color: var(--crema); }
.section--ink .eyebrow { color: rgba(249, 247, 242, .85); }
.section--ink h2 { color: var(--crema); }
.section--ink .section-head p { color: rgba(249, 247, 242, .72); }

/* ---------- 3. UTILIDADES EDITORIALES ---------- */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    text-transform: uppercase;
    letter-spacing: .15em;
    font-size: .78rem;
    font-weight: 600;
    color: var(--ink-soft);
}
.eyebrow::before {
    content: '';
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--rose);
    flex-shrink: 0;
}
.eyebrow--light { color: var(--crema); }

.section-head { text-align: center; max-width: 820px; margin-inline: auto; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head .eyebrow { margin-bottom: 1.1rem; }
.section-head h2 { font-size: var(--fs-h2); }
.section-head p { margin-top: 1.1rem; color: var(--gray); font-size: var(--fs-lead); line-height: 1.55; }

.accent { color: var(--terracota); }
.text-center { text-align: center; }

/* ---------- 4. BOTONES ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    padding: 1.05rem 1.9rem;
    border-radius: var(--r-pill);
    font-weight: 600;
    font-size: 1.02rem;
    transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
    will-change: transform;
}
.btn:hover { transform: translateY(-3px); }
.btn--ink { background: var(--ink); color: var(--crema); }
.btn--ink:hover { background: var(--gold); color: var(--ink); box-shadow: 0 14px 34px rgba(253, 214, 110, .35); }
.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: var(--ink); color: var(--crema); box-shadow: 0 14px 34px rgba(10, 11, 13, .25); }
.btn--ghost { border: 2px solid var(--ink); color: var(--ink); padding-block: .95rem; }
.btn--ghost:hover { background: var(--ink); color: var(--crema); }
.btn--light { border: 2px solid rgba(249,247,242,.4); color: var(--crema); }
.btn--light:hover { background: var(--crema); color: var(--ink); }

.btn .arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7em; height: 1.7em;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
    transition: transform var(--t-fast);
}
.btn .arrow i { font-size: .7em; color: var(--crema); mix-blend-mode: normal; }
.btn--ink .arrow i { color: var(--ink); }
.btn--ink:hover .arrow i { color: var(--gold); }
.btn--gold .arrow i { color: var(--gold); }
.btn--gold:hover .arrow i { color: var(--ink); }
.btn:hover .arrow { transform: translateX(4px); }

/* Link flecha editorial */
.link-arrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-weight: 600; color: var(--ink);
    transition: gap var(--t-fast), color var(--t-fast);
}
.link-arrow:hover { gap: .85rem; color: var(--terracota); }

/* ---------- 5. NAV (Editorial premium V5.40) ---------- */
.nav {
    position: fixed; inset-inline: 0; top: 0; z-index: 100;
    transition: background var(--t-fast), box-shadow var(--t-fast), padding var(--t-fast), border-color var(--t-fast);
    padding-block: 1.1rem;
    border-bottom: 1px solid transparent;
}
.nav.scrolled {
    background: var(--crema);
    box-shadow: 0 1px 0 rgba(10, 11, 13, .07);
    padding-block: .55rem;
    border-bottom-color: rgba(27, 33, 61, .08);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 2.5rem; }
.nav__logo {
    display: inline-flex; align-items: center;
    transition: transform var(--t-fast);
}
.nav__logo img {
    height: 92px; width: auto;
    transition: height var(--t-fast);
}
.nav.scrolled .nav__logo img { height: 68px; }
.nav__logo:hover { transform: translateX(2px); }

.nav__links { display: flex; gap: 2.4rem; align-items: center; }
.nav__links > a:not(.nav__cta),
.nav__dropdown-trigger {
    font-family: var(--font-body);
    font-weight: 500; font-size: 1.125rem; color: var(--ink);
    position: relative; padding-block: .35rem;
    letter-spacing: .005em;
    text-decoration: none;
}
.nav__links > a:not(.nav__cta)::after,
.nav__dropdown-trigger::after {
    content: ''; position: absolute; left: 0; bottom: 0;
    width: 100%; height: 1.5px; background: var(--rose);
    transform: scaleX(0); transform-origin: right;
    transition: transform .35s var(--ease);
}
.nav__links > a:not(.nav__cta):hover::after,
.nav__dropdown-trigger:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- Dropdowns en Menú (Editorial V5) ---------- */
.nav__dropdown {
    position: relative;
}
.nav__dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
}
.nav__dropdown-arrow {
    font-size: 0.7rem;
    opacity: 0.6;
    transition: transform 0.3s var(--ease);
}
.nav__dropdown:hover .nav__dropdown-arrow {
    transform: rotate(180deg);
}

.nav__dropdown-content {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 15px);
    background: var(--white);
    border: 1px solid rgba(27, 33, 61, 0.08);
    border-radius: var(--r-lg);
    box-shadow: 0 16px 40px rgba(27, 33, 61, 0.08);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s var(--ease);
    z-index: 100;
    padding: 1.5rem;
}
.nav__dropdown:hover .nav__dropdown-content {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/* Anchos específicos de dropdowns */
.nav__dropdown-content--sectores {
    width: 620px;
}
.nav__dropdown-content--soluciones {
    width: 420px;
}
.nav__dropdown-content--calculadoras {
    width: 580px;
}

.nav__dropdown-grid {
    display: grid;
    gap: 0.75rem;
}
.nav__dropdown-content--sectores .nav__dropdown-grid {
    grid-template-columns: repeat(2, 1fr);
}
.nav__dropdown-content--calculadoras .nav__dropdown-grid {
    grid-template-columns: repeat(2, 1fr);
}
.nav__dropdown-content--soluciones .nav__dropdown-grid {
    grid-template-columns: 1fr;
}

.nav__dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.65rem 0.85rem;
    border-radius: var(--r-md);
    text-decoration: none !important;
    transition: background var(--t-fast);
}
.nav__dropdown-item::after {
    display: none !important;
}
.nav__dropdown-item:hover {
    background: var(--crema);
}
.nav__dropdown-item .icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.nav__dropdown-item h4 {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 0.15rem 0;
    text-align: left;
}
.nav__dropdown-item p {
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: var(--gray);
    margin: 0;
    text-align: left;
}

.nav__dropdown-footer {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(27, 33, 61, 0.06);
    text-align: center;
}
.nav__dropdown-footer a {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--rose) !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0 !important;
}
.nav__dropdown-footer a::after {
    display: none !important;
}
.nav__dropdown-footer a:hover {
    color: var(--ink) !important;
}


.nav__cta {
    display: inline-flex; align-items: center; gap: .55rem;
    font-family: var(--font-body); font-weight: 600;
    font-size: 1.125rem; color: var(--ink);
    padding: .35rem 0;
    margin-left: .4rem;
    transition: color var(--t-fast);
}
.nav__cta .arrow {
    width: 28px; height: 28px;
    border-radius: 50%; background: var(--ink);
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform var(--t-fast), background var(--t-fast);
}
.nav__cta .arrow i { font-size: .72rem; color: var(--crema); }
.nav__cta:hover { color: var(--rose); }
.nav__cta:hover .arrow { transform: translateX(3px); background: var(--rose); }

.nav__burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px;
    padding: 0;
    border: 1px solid rgba(27, 33, 61, .15);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    z-index: 110;
    transition: border-color var(--t-fast), background var(--t-fast);
    align-items: center;
}
.nav__burger:hover { border-color: var(--ink); background: rgba(27, 33, 61, .04); }
.nav__burger span {
    width: 18px; height: 1.5px; background: var(--ink); border-radius: 2px;
    transition: transform var(--t-fast), opacity var(--t-fast), background var(--t-fast);
}

/* Nav invertido (sobre hero cinemático con video, antes de hacer scroll) */
.nav--cinematic:not(.scrolled) .nav__logo img { filter: brightness(0) invert(1); }
.nav--cinematic:not(.scrolled) .nav__links > a:not(.nav__cta),
.nav--cinematic:not(.scrolled) .nav__dropdown-trigger { color: rgba(249, 247, 242, .92); }
.nav--cinematic:not(.scrolled) .nav__links > a:not(.nav__cta)::after,
.nav--cinematic:not(.scrolled) .nav__dropdown-trigger::after { background: var(--gold); }
.nav--cinematic:not(.scrolled) .nav__cta { color: var(--crema); }
.nav--cinematic:not(.scrolled) .nav__cta .arrow { background: var(--gold); }
.nav--cinematic:not(.scrolled) .nav__cta .arrow i { color: var(--ink); }
.nav--cinematic:not(.scrolled) .nav__cta:hover { color: var(--gold); }
.nav--cinematic:not(.scrolled) .nav__burger { border-color: rgba(249, 247, 242, .35); }
.nav--cinematic:not(.scrolled) .nav__burger span { background: var(--crema); }

/* ---------- MENÚ OVERLAY (desktop + móvil) ---------- */
.mobile-menu {
    position: fixed; inset: 0; z-index: 105;
    background: var(--crema);
    opacity: 0; pointer-events: none;
    transition: opacity .4s var(--ease);
    overflow-y: auto;
}
.mobile-menu.open { opacity: 1; pointer-events: auto; }
.mobile-menu__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.4rem var(--gutter) 3rem;
    display: flex; flex-direction: column;
    min-height: 100%;
}
.mobile-menu__head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 3.5rem;
}
.mobile-menu__logo img { height: 64px; width: auto; }
.mobile-menu__close {
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(27, 33, 61, .15);
    background: transparent;
    position: relative;
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast);
}
.mobile-menu__close span {
    position: absolute; top: 50%; left: 50%;
    width: 18px; height: 1.5px; background: var(--ink);
    transform-origin: center;
}
.mobile-menu__close span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.mobile-menu__close span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }
.mobile-menu__close:hover { background: rgba(27, 33, 61, .04); border-color: var(--ink); }

.mobile-menu__nav {
    display: flex; flex-direction: column;
    flex: 1;
}
.mobile-menu__nav a {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    align-items: baseline;
    gap: 1.2rem;
    padding-block: 1rem;
    color: var(--ink);
    border-bottom: 1px solid rgba(27, 33, 61, .08);
    transition: padding var(--t-fast), color var(--t-fast);
}
.mobile-menu__nav a:first-child { border-top: 1px solid rgba(27, 33, 61, .08); }
.mobile-menu__nav a:hover {
    padding-left: .6rem;
    color: var(--rose);
}
.mobile-menu__num {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: .85rem;
    letter-spacing: .15em;
    color: var(--gray);
    text-transform: uppercase;
}
.mobile-menu__label {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.2rem, 7vw, 4.2rem);
    line-height: 1;
    letter-spacing: -.02em;
}
.mobile-menu__nav a i {
    font-size: 1.05rem;
    color: var(--ink);
    opacity: .35;
    transition: opacity var(--t-fast), transform var(--t-fast), color var(--t-fast);
}
.mobile-menu__nav a:hover i { opacity: 1; transform: translateX(4px); color: var(--rose); }

.mobile-menu__cta .mobile-menu__label { color: var(--rose); }
.mobile-menu__cta i { color: var(--rose); opacity: .65; }

.mobile-menu__foot {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(27, 33, 61, .08);
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 1.2rem;
}
.mobile-menu__support {
    font-family: var(--font-display);
    font-weight: 600; font-size: 1.05rem;
    color: var(--ink);
}
.mobile-menu__contact {
    display: flex; gap: 1.5rem; flex-wrap: wrap;
}
.mobile-menu__contact a {
    color: var(--ink-soft);
    font-family: var(--font-body); font-weight: 500; font-size: .95rem;
    display: inline-flex; align-items: center; gap: .5rem;
    transition: color var(--t-fast);
}
.mobile-menu__contact a:hover { color: var(--rose); }
.mobile-menu__contact a i { color: var(--rose); }

body.menu-open { overflow: hidden; }
body.menu-open .nav__burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body.menu-open .nav__burger span:nth-child(2) { opacity: 0; }
body.menu-open .nav__burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---------- 6. HERO ---------- */
.hero { position: relative; padding-bottom: clamp(3rem, 6vw, 5rem); }

/* 6a. Bloque cinemático con video de fondo */
.hero__cinematic {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: clamp(8rem, 16vw, 12rem) 0 clamp(5rem, 10vw, 8.5rem);
    border-radius: 0 0 var(--r-xl) var(--r-xl);
    margin-bottom: clamp(3rem, 6vw, 5rem);
}
.hero__video {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: -2;
    animation: hero-kenburns 28s ease-in-out infinite alternate;
}
@keyframes hero-kenburns {
    from { transform: scale(1) translateY(0); }
    to { transform: scale(1.09) translateY(-1.5%); }
}
.hero__overlay {
    position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(ellipse at 25% 30%, rgba(27, 33, 61, .35) 0%, transparent 55%),
        linear-gradient(180deg, rgba(27, 33, 61, .78) 0%, rgba(27, 33, 61, .62) 45%, rgba(27, 33, 61, .85) 100%);
}
/* Viñeta sutil en bordes */
.hero__cinematic::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .35) 100%);
    pointer-events: none;
    z-index: -1;
}

.hero__head { text-align: center; max-width: 1000px; margin-inline: auto; position: relative; padding-inline: var(--gutter); }
.hero__head .eyebrow { margin-bottom: 1.8rem; }
.hero__title { font-size: var(--fs-hero); font-weight: 800; }
.hero__title--accent {
    margin-top: .35em;
    font-size: clamp(1.7rem, 3.8vw, 3rem);
    font-weight: 700;
}
.hero__ctas { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2.6rem; }

/* Inversión de colores sobre el video cinemático */
.hero__cinematic .hero__title { color: var(--crema); text-shadow: 0 2px 20px rgba(0, 0, 0, .25); }
.hero__cinematic .hero__title--accent { color: var(--gold); text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
.hero__cinematic .eyebrow { color: var(--crema); opacity: .92; }
.hero__cinematic .eyebrow::before { background: var(--gold); box-shadow: 0 0 18px var(--gold); }
.hero__cinematic .btn--ink { background: var(--gold); color: var(--ink); }
.hero__cinematic .btn--ink:hover { background: var(--crema); color: var(--ink); }
.hero__cinematic .btn--ink .arrow { background: var(--ink); }
.hero__cinematic .btn--ink .arrow i { color: var(--gold); }
.hero__cinematic .btn--ink:hover .arrow i { color: var(--ink); }
.hero__cinematic .btn--ghost { border-color: rgba(249, 247, 242, .55); color: var(--crema); backdrop-filter: blur(6px); background: rgba(249, 247, 242, .04); }
.hero__cinematic .btn--ghost:hover { background: var(--crema); color: var(--ink); border-color: var(--crema); }

/* Marcador de video pendiente (se autoelimina cuando el video carga) */
.hero__video-marker {
    position: absolute;
    bottom: clamp(1.2rem, 2.5vw, 2rem); left: clamp(1.2rem, 2.5vw, 2rem);
    z-index: 3;
    display: inline-flex; align-items: center; gap: .55rem;
    background: rgba(249, 247, 242, .14);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(249, 247, 242, .3);
    color: var(--crema);
    border-radius: var(--r-pill);
    padding: .55rem 1.05rem;
    font-size: .72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .12em;
}
.hero__video-marker i { color: var(--gold); }

/* Botón play/pause flotante (premium glassmorphic) */
.hero__video-toggle {
    position: absolute;
    bottom: clamp(1.2rem, 2.5vw, 2rem); right: clamp(1.2rem, 2.5vw, 2rem);
    z-index: 3;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: rgba(249, 247, 242, .14);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(249, 247, 242, .32);
    color: var(--crema);
    display: flex; align-items: center; justify-content: center;
    font-size: .9rem;
    transition: background var(--t-fast), transform var(--t-fast);
}
.hero__video-toggle:hover { background: rgba(249, 247, 242, .26); transform: scale(1.08); }

/* Indicador de scroll bajo el bloque */
.hero__scroll {
    position: absolute;
    bottom: clamp(1.2rem, 3vw, 2.2rem);
    left: 50%; transform: translateX(-50%);
    z-index: 3;
    display: flex; flex-direction: column; align-items: center; gap: .5rem;
    color: rgba(249, 247, 242, .65);
    font-size: .72rem; text-transform: uppercase; letter-spacing: .18em;
    animation: hero-scroll-bounce 2.4s ease-in-out infinite;
}
.hero__scroll i { font-size: 1rem; }
@keyframes hero-scroll-bounce {
    0%, 100% { transform: translate(-50%, 0); opacity: .6; }
    50% { transform: translate(-50%, 6px); opacity: 1; }
}

/* 6b. Bloque personal (foto + descripción) bajo el cinemático */
.hero__blob {
    position: absolute; border-radius: 50%; filter: blur(80px); opacity: .4; pointer-events: none;
}
.hero__blob--1 { width: 420px; height: 420px; background: var(--vainilla); top: 30%; right: -120px; }
.hero__blob--2 { width: 340px; height: 340px; background: var(--menta); bottom: -100px; left: -120px; opacity: .35; }

.hero__body {
    display: grid; grid-template-columns: 1.05fr .95fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
    position: relative;
}
.hero__media { position: relative; }
.hero__media img {
    width: 100%; aspect-ratio: 4 / 4.2; object-fit: cover; object-position: top;
    border-radius: var(--r-xl);
}
.hero__badge {
    position: absolute; bottom: 1.4rem; left: 1.4rem;
    display: flex; align-items: center; gap: .8rem;
    background: rgba(249, 247, 242, .95);
    border-radius: var(--r-md);
    padding: .8rem 1.2rem;
    box-shadow: 0 12px 36px rgba(10, 11, 13, .14);
}
.hero__badge i {
    width: 44px; height: 44px; border-radius: 14px;
    background: var(--menta); color: var(--ink);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
}
.hero__badge strong { font-family: var(--font-display); display: block; line-height: 1.2; }
.hero__badge small { color: var(--gray); }

.hero__text p.lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--ink-soft); }
.hero__lead-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.5rem, 2.6vw, 2.25rem);
    line-height: 1.22;
    letter-spacing: -.015em;
    color: var(--ink);
}
.hero__lead-title .accent { color: var(--rose); }
.hero__text .support {
    display: flex; align-items: flex-start; gap: .7rem;
    margin-top: 1.6rem; color: var(--gray); font-size: 1.02rem;
}
.hero__text .support i { color: var(--rose); margin-top: .25rem; }
.hero__chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.8rem; }
.hero__chips span {
    padding: .5rem 1rem; border-radius: var(--r-pill);
    background: var(--white); border: 1px solid rgba(10, 11, 13, .08);
    font-size: .9rem; font-weight: 500;
}

/* ---------- 7. MARQUEE ---------- */
.marquee {
    overflow: hidden; white-space: nowrap;
    padding-block: 1.1rem;
    background: var(--ink); color: var(--crema);
}
.marquee__track { display: inline-flex; align-items: center; gap: 2.8rem; animation: marquee 32s linear infinite; padding-right: 2.8rem; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee span { display: inline-flex; align-items: center; gap: .8rem; font-weight: 500; font-size: 1.02rem; opacity: .85; }
.marquee i { color: var(--gold); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- 8. MÉTRICAS ---------- */
.stats { padding-block: clamp(3.5rem, 7vw, 6rem); }
.stats__grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.2rem;
}
.stat-card {
    border-radius: var(--r-lg);
    padding: 2rem 1.4rem 1.7rem;
    text-align: center;
    transition: transform var(--t-med);
}
.stat-card:nth-child(1) { background: var(--durazno); transform: rotate(-1.2deg); }
.stat-card:nth-child(2) { background: var(--menta); transform: rotate(1deg); }
.stat-card:nth-child(3) { background: var(--vainilla); transform: rotate(-0.8deg); }
.stat-card:nth-child(4) { background: var(--aqua); transform: rotate(1.2deg); }
.stat-card:nth-child(5) { background: var(--ink); transform: rotate(-1deg); }
.stat-card:hover { transform: rotate(0) translateY(-6px); }
.stat-card .num {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 4vw, 3.4rem);
    font-weight: 800; line-height: 1; color: var(--ink);
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    white-space: nowrap;
}
.stat-card:nth-child(5) .num { color: var(--gold); }
.stat-card .lbl { margin-top: .55rem; font-size: .92rem; color: var(--ink-soft); font-weight: 500; }
.stat-card:nth-child(5) .lbl { color: rgba(249, 247, 242, .75); }

/* ---------- 9. GALERÍA COLLAGE ---------- */
.gallery { overflow: hidden; padding-block: clamp(2rem, 4vw, 3.5rem); }
.gallery__track {
    display: flex; gap: 1.4rem; width: max-content;
    animation: marquee 46s linear infinite;
    padding-right: 1.4rem;
}
.gallery:hover .gallery__track { animation-play-state: paused; }
.gallery__item {
    width: clamp(220px, 24vw, 330px);
    border-radius: var(--r-lg);
    overflow: hidden; flex-shrink: 0;
    transition: transform var(--t-med);
}
.gallery__item:hover { transform: translateY(-8px) rotate(-1deg); }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; }
.gallery__item--tall { aspect-ratio: 3 / 3.7; }
.gallery__item--wide { aspect-ratio: 3 / 3.7; }
.gallery__item.ph {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: .8rem;
    font-weight: 600; color: var(--ink-soft); font-size: .95rem;
}
.gallery__item.ph i { font-size: 2.2rem; color: var(--ink); opacity: .75; }

/* ---------- 10. PLACEHOLDER DE FOTO (marcador para sesión fotográfica) ---------- */
.ph-photo {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: .5rem;
    width: 100%; height: 100%;
    border: 2px dashed rgba(27, 33, 61, .35);
    border-radius: inherit;
    text-align: center;
    padding: 1rem;
    color: var(--ink-soft);
}
.ph-photo i { font-size: 1.7rem; opacity: .6; }
.ph-photo strong {
    font-size: .82rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
}
.ph-photo small { font-size: .75rem; color: var(--gray); line-height: 1.35; }

/* ---------- 10b. CARRUSEL (base reutilizable en todas las secciones) ---------- */
.carousel { position: relative; }
.carousel__track {
    display: flex; gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding: .5rem .25rem 1.5rem;
    scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__nav {
    display: flex; gap: .7rem;
    justify-content: center;
    margin-top: .5rem;
}
.carousel__btn {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--white);
    border: 1.5px solid rgba(27, 33, 61, .15);
    color: var(--ink);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
    transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.carousel__btn:hover { background: var(--ink); color: var(--gold); transform: scale(1.06); }

/* ---------- 10c. CARDS SECTORES (carrusel, tarjetas grandes con imagen) ---------- */
.sector-card {
    scroll-snap-align: start;
    flex: 0 0 clamp(300px, 31vw, 420px);
    border-radius: var(--r-lg);
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform var(--t-med), box-shadow var(--t-med);
}
.sector-card:nth-child(6n+1) { background: var(--durazno); }
.sector-card:nth-child(6n+2) { background: var(--menta); }
.sector-card:nth-child(6n+3) { background: var(--aqua); }
.sector-card:nth-child(6n+4) { background: var(--vainilla); }
.sector-card:nth-child(6n+5) { background: var(--coral); }
.sector-card:nth-child(6n+6) { background: var(--beige); }
.sector-card:hover { transform: translateY(-8px); box-shadow: 0 22px 44px rgba(27, 33, 61, .14); }
.sector-card__media {
    aspect-ratio: 4 / 2.8;
    margin: 1rem 1rem 0;
    border-radius: var(--r-md);
    overflow: hidden;
    position: relative;
    background: rgba(255, 255, 255, .45);
}
.sector-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.sector-card:hover .sector-card__media img { transform: scale(1.05); }
.sector-card__body {
    padding: 1.4rem 1.6rem 1.7rem;
    display: flex; flex-direction: column; gap: .7rem;
    flex-grow: 1;
}
.sector-card__body .head { display: flex; align-items: center; gap: .8rem; }
.sector-card__icon {
    width: 48px; height: 48px; border-radius: 15px;
    background: var(--white);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; color: var(--ink);
    box-shadow: 0 4px 14px rgba(27, 33, 61, .08);
    flex-shrink: 0;
}
.sector-card h3 { font-size: var(--fs-h3); }
.sector-card p { color: var(--ink-soft); font-size: .96rem; line-height: 1.5; flex-grow: 1; }
.sector-card .link-arrow { font-size: .98rem; }

/* ---------- 11. SERVICIOS PREMIUM (cases) ---------- */
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.service-card {
    display: flex; flex-direction: column;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--white);
    border: 1px solid rgba(10, 11, 13, .06);
    transition: transform var(--t-med), box-shadow var(--t-med);
}
.service-card:hover { transform: translateY(-8px); box-shadow: 0 26px 52px rgba(10, 11, 13, .12); }
.service-card__media {
    aspect-ratio: 4 / 3.1;
    position: relative;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    padding: 1.1rem;
}
.service-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.service-card:hover .service-card__media img { transform: scale(1.05); }
.service-card__media .tag {
    position: absolute; top: 1rem; left: 1rem; z-index: 2;
    background: rgba(249, 247, 242, .94);
    border-radius: var(--r-pill);
    padding: .35rem .9rem;
    font-size: .8rem; font-weight: 600;
    color: var(--ink);
}
.service-card__media .num {
    position: absolute; top: .9rem; right: 1.1rem; z-index: 2;
    font-family: var(--font-display);
    font-size: 1.05rem; font-weight: 800;
    color: rgba(27, 33, 61, .45);
}
/* fondos placeholder por categoría */
.media--durazno { background: linear-gradient(135deg, var(--durazno), var(--vainilla)); }
.media--menta { background: linear-gradient(135deg, var(--menta), #d9f5df); }
.media--aqua { background: linear-gradient(135deg, var(--aqua), #d8f5f5); }
.media--coral { background: linear-gradient(135deg, var(--coral), #ffd3d5); }
.media--vainilla { background: linear-gradient(135deg, var(--vainilla), #fffaf0); }
.media--beige { background: linear-gradient(135deg, var(--beige), #f4f1e9); }

.service-card__body { padding: 1.6rem 1.6rem 1.8rem; display: flex; flex-direction: column; gap: .65rem; flex-grow: 1; }
.service-card__body h3 { font-size: 1.35rem; }
.service-card__body .desc { color: var(--gray); font-size: .97rem; line-height: 1.55; }
.service-card__body .quote { font-style: italic; color: var(--ink-soft); font-size: .94rem; }
.service-card__body .link-arrow { margin-top: auto; padding-top: .6rem; font-size: .96rem; }

/* ---------- 12. SECCIÓN IA (oscura) ---------- */
.ia-section { background: var(--ink); color: var(--crema); border-radius: var(--r-xl); margin-inline: var(--gutter); }
@media (min-width: 1280px) { .ia-section { margin-inline: auto; max-width: calc(var(--container) + 4rem); } }
.ia-section .section-head h2 { color: var(--crema); }
.ia-section .section-head p { color: rgba(249, 247, 242, .72); }
.ia-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.ia-card {
    background: rgba(249, 247, 242, .06);
    border: 1px solid rgba(249, 247, 242, .12);
    border-radius: var(--r-lg);
    padding: 2rem 1.7rem;
    transition: background var(--t-med), transform var(--t-med);
}
.ia-card:hover { background: rgba(249, 247, 242, .1); transform: translateY(-6px); }
.ia-card__icon {
    width: 56px; height: 56px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; margin-bottom: 1.2rem; color: var(--ink);
}
.ia-card h3 { color: var(--crema); font-size: 1.3rem; margin-bottom: .6rem; }
.ia-card > p { color: rgba(249, 247, 242, .68); font-size: .96rem; margin-bottom: 1rem; }
.ia-card ul { display: flex; flex-direction: column; gap: .55rem; }
.ia-card li { display: flex; gap: .6rem; font-size: .93rem; color: rgba(249, 247, 242, .8); line-height: 1.45; }
.ia-card li i { color: var(--menta); margin-top: .22rem; flex-shrink: 0; }
.ia-card li strong { color: var(--crema); }

/* ---------- 13. PRODUCTOS ---------- */
.pack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.pack-card {
    border-radius: var(--r-lg);
    padding: 1.9rem 1.7rem;
    display: flex; flex-direction: column; gap: .8rem;
    background: var(--white);
    border: 1px solid rgba(10, 11, 13, .07);
    position: relative;
    transition: transform var(--t-med), box-shadow var(--t-med);
}
.pack-card:hover { transform: translateY(-8px); box-shadow: 0 24px 48px rgba(10, 11, 13, .12); }
.pack-card__top { display: flex; justify-content: space-between; align-items: center; }
.pack-card__top i { font-size: 1.6rem; color: var(--ink-soft); }
.pack-card .pill {
    padding: .35rem .9rem; border-radius: var(--r-pill);
    font-size: .8rem; font-weight: 600; color: var(--ink);
}
.pill--durazno { background: var(--durazno); }
.pill--menta { background: var(--menta); }
.pill--aqua { background: var(--aqua); }
.pack-card h3 { font-size: 1.3rem; }
.pack-card .desc { color: var(--gray); font-size: .95rem; flex-grow: 1; }
.pack-card__foot { display: flex; align-items: flex-end; justify-content: space-between; padding-top: .8rem; border-top: 1px solid rgba(10, 11, 13, .07); }
.pack-card .price { font-family: var(--font-display); font-size: 2rem; font-weight: 800; line-height: 1; }
.pack-card .price small { display: block; font-family: var(--font-body); font-size: .8rem; font-weight: 400; color: var(--gray); margin-top: .3rem; }

.mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 1.4rem; }
.mini-card {
    display: flex; flex-direction: column; gap: .5rem;
    background: var(--white); border-radius: var(--r-md);
    border: 1px solid rgba(10, 11, 13, .07);
    padding: 1.4rem 1.3rem;
    transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.mini-card:hover { transform: translateY(-5px); box-shadow: 0 16px 36px rgba(10, 11, 13, .1); }
.mini-card i { font-size: 1.3rem; color: var(--gold-deep); }
.mini-card h4 { font-family: var(--font-display); font-size: 1.05rem; }
.mini-card p { font-size: .88rem; color: var(--gray); flex-grow: 1; }
.mini-card .price { font-weight: 700; font-size: 1.05rem; }

.recursos-band {
    margin-top: 3rem;
    background: var(--vainilla);
    border-radius: var(--r-lg);
    padding: 2.4rem;
}
.recursos-band h3 { font-size: 1.5rem; margin-bottom: 1.4rem; display: flex; align-items: center; gap: .8rem; }
.recursos-band h3 i { color: var(--gold-deep); }
.recursos-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.recurso-item {
    background: var(--white); border-radius: var(--r-md);
    padding: 1.1rem; display: flex; gap: .8rem; align-items: flex-start;
}
.recurso-item i { color: var(--gold-deep); margin-top: .2rem; }
.recurso-item h4 { font-size: .95rem; font-family: var(--font-body); font-weight: 600; }
.recurso-item p { font-size: .8rem; color: var(--gray); }

/* ---------- 14. HERRAMIENTAS (scroll-snap) ---------- */
.tools-scroll {
    display: flex; gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 1rem;
    scrollbar-width: thin;
    scrollbar-color: var(--beige) transparent;
}
.tool-chip {
    scroll-snap-align: start;
    flex: 0 0 250px;
    background: var(--white);
    border: 1px solid rgba(10, 11, 13, .07);
    border-radius: var(--r-md);
    padding: 1.3rem;
    display: flex; gap: .9rem; align-items: center;
    transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.tool-chip:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(10, 11, 13, .1); }
.tool-chip i {
    width: 46px; height: 46px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; color: var(--ink); flex-shrink: 0;
}
.tool-chip:nth-child(4n+1) i { background: var(--menta); }
.tool-chip:nth-child(4n+2) i { background: var(--durazno); }
.tool-chip:nth-child(4n+3) i { background: var(--aqua); }
.tool-chip:nth-child(4n+4) i { background: var(--coral); }
.tool-chip h4 { font-size: .98rem; font-family: var(--font-body); font-weight: 600; }
.tool-chip p { font-size: .8rem; color: var(--gray); }

/* ---------- 15. SOBRE MÍ ---------- */
.about { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.about__media { position: relative; }
.about__media img { border-radius: var(--r-xl); aspect-ratio: 4/4.6; object-fit: cover; }
.about__media::after {
    content: ''; position: absolute; z-index: -1;
    inset: auto -1.4rem -1.4rem auto;
    width: 60%; height: 60%;
    background: var(--durazno); border-radius: var(--r-xl);
}
.about__text .eyebrow { margin-bottom: 1.1rem; }
.about__text h2 { font-size: var(--fs-h2); margin-bottom: 1.4rem; }
.about__text p { color: var(--ink-soft); margin-bottom: 1rem; line-height: 1.65; }
.about__text p strong { color: var(--ink); }
.about__badges { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
.about__badges span {
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--white); border: 1px solid rgba(10, 11, 13, .08);
    border-radius: var(--r-pill); padding: .55rem 1.1rem;
    font-size: .9rem; font-weight: 500;
}
.about__badges i { color: var(--gold-deep); }

/* ---------- 16. TESTIMONIOS ---------- */
.reviews-section { background: var(--beige); }
.rating-chip {
    display: inline-flex; align-items: center; gap: .8rem;
    background: var(--white); border-radius: var(--r-pill);
    padding: .8rem 1.5rem; margin-top: 1.5rem;
    box-shadow: 0 6px 20px rgba(10, 11, 13, .07);
    font-size: .95rem;
}
.rating-chip strong { font-size: 1.15rem; }
.rating-chip .stars { color: #F5B301; letter-spacing: .1em; }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.review-card {
    background: var(--white); border-radius: var(--r-lg);
    padding: 2rem 1.8rem;
    display: flex; flex-direction: column; gap: 1.1rem;
    transition: transform var(--t-med), box-shadow var(--t-med);
}
.review-card:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(10, 11, 13, .1); }
.review-card .stars { color: #F5B301; letter-spacing: .12em; font-size: .9rem; }
.review-card blockquote { color: var(--ink-soft); line-height: 1.6; flex-grow: 1; font-size: .99rem; }
.review-card footer { display: flex; align-items: center; gap: .9rem; padding-top: 1rem; border-top: 1px solid rgba(10, 11, 13, .07); }
.review-card .avatar {
    width: 46px; height: 46px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; color: var(--ink); font-size: .9rem;
}
.review-card footer strong { display: block; font-size: .95rem; }
.review-card footer small { color: var(--gray); }

/* ---------- 17. BLOG (legacy .blog-grid — reemplazado por componente editorial) ----------
   El bloque de blog de cada landing ahora usa components/blog-editorial.php
   con las clases .blog-card editoriales (sección 26). Aquí solo queda el
   header del bloque reutilizable. */

/* ---------- 18. CONTACTO ---------- */
.contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 1.8rem; align-items: stretch; }
.contact-info {
    background: var(--ink); color: var(--crema);
    border-radius: var(--r-lg); padding: 2.4rem 2.1rem;
    display: flex; flex-direction: column; gap: 1.5rem;
}
.contact-info h3 { color: var(--crema); font-size: 1.5rem; }
.contact-info .sub { color: rgba(249, 247, 242, .6); font-size: .92rem; margin-top: .2rem; }
.contact-info .row { display: flex; gap: 1rem; align-items: center; }
.contact-info .row i {
    width: 46px; height: 46px; border-radius: 14px;
    background: rgba(249, 247, 242, .08);
    display: flex; align-items: center; justify-content: center;
    color: var(--gold); flex-shrink: 0;
}
.contact-info .row small { display: block; text-transform: uppercase; letter-spacing: .1em; font-size: .68rem; color: rgba(249, 247, 242, .5); }
.contact-info .row a, .contact-info .row p { font-weight: 500; color: var(--crema); }
.contact-info .row a:hover { color: var(--gold); }
.contact-info .socials { display: flex; gap: .7rem; padding-top: 1.2rem; border-top: 1px solid rgba(249, 247, 242, .1); }
.contact-info .socials a {
    width: 44px; height: 44px; border-radius: 13px;
    background: rgba(249, 247, 242, .08);
    display: flex; align-items: center; justify-content: center;
    transition: background var(--t-fast), color var(--t-fast);
}
.contact-info .socials a:hover { background: var(--gold); color: var(--ink); }
.contact-info .btn { justify-content: center; }
.contact-info .note { font-size: .8rem; color: rgba(249, 247, 242, .45); text-align: center; }

.contact-form {
    background: var(--white); border-radius: var(--r-lg);
    padding: 2.4rem 2.1rem;
    border: 1px solid rgba(10, 11, 13, .06);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-bottom: 1.1rem; }
.form-field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.1rem; }
.form-row .form-field { margin-bottom: 0; }
.form-field label { font-size: .88rem; font-weight: 600; }
.form-field input, .form-field select, .form-field textarea {
    font: inherit; font-size: .98rem;
    padding: .85rem 1.05rem;
    border-radius: 14px;
    border: 1.5px solid rgba(10, 11, 13, .12);
    background: var(--crema);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
    width: 100%;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
    outline: none; border-color: var(--gold);
    box-shadow: 0 0 0 4px rgba(253, 214, 110, .15);
}
.form-field textarea { resize: vertical; min-height: 110px; }
.contact-form .btn { width: 100%; justify-content: center; margin-top: .4rem; }
.contact-form .legal { font-size: .78rem; color: var(--gray); text-align: center; margin-top: .9rem; }
.contact-form .legal a { text-decoration: underline; }

/* ---------- 19. FOOTER ---------- */
.footer { background: var(--ink); color: var(--crema); padding-top: clamp(3.5rem, 7vw, 5.5rem); margin-top: clamp(3rem, 6vw, 5rem); }
.footer__word {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 8.5vw, 6.4rem);
    font-weight: 800; line-height: 1;
    letter-spacing: -0.03em;
    color: var(--crema);
    padding-bottom: clamp(2rem, 5vw, 3.5rem);
    border-bottom: 1px solid rgba(249, 247, 242, .12);
}
.footer__word em { font-style: normal; color: var(--gold); }
.footer__cols {
    display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 2.5rem; padding-block: clamp(2.5rem, 5vw, 3.5rem);
}
.footer__cols h4 { color: var(--crema); font-size: .85rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 1.1rem; font-family: var(--font-body); font-weight: 600; opacity: .55; }
.footer__cols p { color: rgba(249, 247, 242, .6); font-size: .95rem; line-height: 1.6; max-width: 300px; }
.footer__cols ul { display: flex; flex-direction: column; gap: .65rem; }
.footer__cols a { color: rgba(249, 247, 242, .72); font-size: .95rem; transition: color var(--t-fast); }
.footer__cols a:hover { color: var(--gold); }
.footer__social { display: flex; gap: .7rem; margin-top: 1.4rem; }
.footer__social a {
    width: 42px; height: 42px; border-radius: 12px;
    background: rgba(249, 247, 242, .07);
    display: flex; align-items: center; justify-content: center;
    transition: background var(--t-fast), color var(--t-fast);
}
.footer__social a:hover { background: var(--gold); color: var(--ink); }
.footer__legal {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
    padding-block: 1.6rem;
    border-top: 1px solid rgba(249, 247, 242, .12);
    font-size: .85rem; color: rgba(249, 247, 242, .45);
}
.footer__legal a { color: rgba(249, 247, 242, .6); }
.footer__legal a:hover { color: var(--gold); }

/* ---------- 20. FLOTANTES ---------- */
.whatsapp-float {
    position: fixed; bottom: 1.8rem; right: 1.8rem; z-index: 90;
    width: 60px; height: 60px; border-radius: 50%;
    background: var(--whatsapp); color: var(--white);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.7rem;
    box-shadow: 0 12px 30px rgba(37, 211, 102, .4);
    transition: transform var(--t-fast);
}
.whatsapp-float:hover { transform: scale(1.1); }

/* Modal gracias */
.modal-overlay {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(10, 11, 13, .55);
    display: flex; align-items: center; justify-content: center;
    padding: 1.5rem;
    opacity: 0; pointer-events: none;
    transition: opacity .3s var(--ease);
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }
.modal-box {
    background: var(--crema); border-radius: var(--r-lg);
    max-width: 440px; width: 100%;
    padding: 2.6rem 2.2rem; text-align: center;
    transform: translateY(16px);
    transition: transform .3s var(--ease);
}
.modal-overlay.open .modal-box { transform: none; }
.modal-box .check {
    width: 70px; height: 70px; border-radius: 50%;
    background: var(--menta);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; color: var(--ink);
    margin: 0 auto 1.3rem;
}
.modal-box h3 { font-size: 1.5rem; margin-bottom: .6rem; }
.modal-box p { color: var(--gray); margin-bottom: 1.6rem; }
.modal-box .actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }

/* ---------- 21. REVEAL ANIMATIONS ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; }
}

/* ---------- 22. RESPONSIVE ---------- */
/* ============================================================================
   23. PÁGINA SECTORES (V5.3)
   ============================================================================ */

/* 23a. Cards grandes de sector con foto + soluciones */
.sectors-list { display: grid; grid-template-columns: 1fr; gap: 3.5rem; }
.sector-detail {
    background: var(--white);
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid rgba(27, 33, 61, .07);
    display: flex; flex-direction: column;
    transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
    position: relative;
}
@media (min-width: 1025px) {
    .sector-detail {
        flex-direction: row;
        min-height: 420px;
    }
    .sector-detail:nth-child(even) {
        flex-direction: row-reverse;
    }
    .sector-detail__media {
        width: 42%;
        aspect-ratio: auto;
        flex-shrink: 0;
        min-height: 100%;
        padding: 0;
    }
    .sector-detail__media img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .sector-detail__body {
        width: 58%;
        padding: 3rem;
        justify-content: center;
    }
}

.sector-detail::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s var(--ease);
    z-index: 4;
}
.sector-detail:hover {
    transform: translateY(-10px);
    box-shadow: 0 36px 72px rgba(27, 33, 61, .16);
    border-color: var(--gold);
}
.sector-detail:hover::after { transform: scaleX(1); }
.sector-detail__media {
    aspect-ratio: 16 / 9;
    position: relative;
    overflow: hidden;
    padding: 1.25rem;
}
.sector-detail__media img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .7s var(--ease);
}
.sector-detail:hover .sector-detail__media img { transform: scale(1.06); }
.sector-detail__media .tag {
    position: absolute;
    top: 1.1rem; left: 1.1rem;
    z-index: 2;
    background: rgba(249, 247, 242, .94);
    border-radius: var(--r-pill);
    padding: .4rem 1rem;
    font-size: .78rem; font-weight: 700;
    color: var(--ink);
    text-transform: uppercase; letter-spacing: .1em;
}
/* Fondos por sector cuando hay placeholder de foto */
.sector-detail:nth-of-type(5n+1) .sector-detail__media { background: linear-gradient(135deg, var(--menta), #d9f5df); }
.sector-detail:nth-of-type(5n+2) .sector-detail__media { background: linear-gradient(135deg, var(--aqua), #d8f5f5); }
.sector-detail:nth-of-type(5n+3) .sector-detail__media { background: linear-gradient(135deg, var(--durazno), var(--vainilla)); }
.sector-detail:nth-of-type(5n+4) .sector-detail__media { background: linear-gradient(135deg, var(--coral), #ffd3d5); }
.sector-detail:nth-of-type(5n+5) .sector-detail__media { background: linear-gradient(135deg, var(--vainilla), #fffaf0); }

.sector-detail__body {
    padding: 2rem 2rem 2.2rem;
    display: flex; flex-direction: column;
    gap: 1.1rem;
    flex-grow: 1;
}
.sector-detail__body h3 {
    font-size: clamp(1.5rem, 2.4vw, 1.85rem);
    line-height: 1.1;
}
.sector-detail__body .hook {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--terracota);
    line-height: 1.3;
}
.sector-detail__body .desc {
    color: var(--gray);
    font-size: .98rem;
    line-height: 1.6;
}
.sector-detail__solutions h4 {
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--ink);
    margin-bottom: .9rem;
    font-family: var(--font-body);
}
.sector-detail__solutions ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .55rem .9rem;
}
.sector-detail__solutions li {
    display: flex; align-items: flex-start; gap: .55rem;
    font-size: .92rem;
    color: var(--ink-soft);
    line-height: 1.4;
}
.sector-detail__solutions li i {
    color: var(--gold);
    margin-top: .2rem;
    flex-shrink: 0;
    font-size: .8rem;
}
.sector-detail__body .link-arrow {
    margin-top: auto;
    padding-top: .8rem;
    font-size: 1rem;
}

/* 23b. Pilares (4 columnas) */
.pillars-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.4rem;
    margin-top: 2.5rem;
}
.pillar-card {
    background: var(--white);
    border-radius: var(--r-lg);
    border: 1px solid rgba(27, 33, 61, .08);
    padding: 2.2rem 1.7rem 2rem;
    display: flex; flex-direction: column; gap: .8rem;
    transition: transform var(--t-med), box-shadow var(--t-med);
    position: relative;
    overflow: hidden;
}
.pillar-card:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(27, 33, 61, .1); }
.pillar-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t-med);
}
.pillar-card:hover::before { transform: scaleX(1); }
.pillar-card .icon {
    width: 56px; height: 56px;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    color: var(--ink);
    margin-bottom: .4rem;
}
.pillar-card:nth-of-type(1) .icon { background: var(--menta); }
.pillar-card:nth-of-type(2) .icon { background: var(--aqua); }
.pillar-card:nth-of-type(3) .icon { background: var(--durazno); }
.pillar-card:nth-of-type(4) .icon { background: var(--coral); }
.pillar-card h3 { font-size: 1.25rem; }
.pillar-card p { color: var(--gray); font-size: .96rem; line-height: 1.5; }

/* 23c. Proceso (4 pasos editoriales con número gigante y detalle) */
.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.4rem;
    margin-top: 3rem;
}
.step-card {
    position: relative;
    background: var(--white);
    border: 1px solid rgba(27, 33, 61, .08);
    border-radius: var(--r-lg);
    padding: 2.4rem 1.8rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow: hidden;
    transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
}
.step-card::before {
    content: attr(data-num);
    position: absolute;
    top: -.5rem; right: 1.2rem;
    font-family: var(--font-display);
    font-size: clamp(6rem, 9vw, 9rem);
    font-weight: 800;
    color: var(--ink);
    opacity: .05;
    line-height: 1;
    letter-spacing: -0.05em;
    pointer-events: none;
    transition: opacity var(--t-med), color var(--t-med);
}
.step-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 56px rgba(27, 33, 61, .14);
    border-color: var(--gold);
}
.step-card:hover::before {
    opacity: .12;
    color: var(--gold);
}
.step-card .step-num {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: var(--ink);
    position: relative;
    z-index: 1;
}
.step-card .step-num::before {
    content: '';
    width: 28px; height: 2px;
    background: var(--gold);
}
.step-card .step-icon {
    width: 56px; height: 56px;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    color: var(--ink);
    margin-top: .3rem;
    position: relative;
    z-index: 1;
    transition: transform var(--t-med);
}
.step-card:hover .step-icon {
    transform: rotate(-6deg) scale(1.05);
}
.step-card:nth-of-type(1) .step-icon { background: var(--menta); }
.step-card:nth-of-type(2) .step-icon { background: var(--aqua); }
.step-card:nth-of-type(3) .step-icon { background: var(--durazno); }
.step-card:nth-of-type(4) .step-icon { background: var(--coral); }
.step-card h3 {
    font-size: 1.35rem;
    line-height: 1.15;
    position: relative;
    z-index: 1;
}
.step-card p {
    color: var(--gray);
    font-size: .96rem;
    line-height: 1.55;
    position: relative;
    z-index: 1;
}

/* 23d. Marquee de tecnologías (similar al del home pero en crema) */
.tech-marquee {
    overflow: hidden; white-space: nowrap;
    padding-block: 1.6rem;
    background: var(--white);
    border-radius: var(--r-lg);
    margin-top: 2.5rem;
    border: 1px solid rgba(27, 33, 61, .06);
}
.tech-marquee__track {
    display: inline-flex; align-items: center; gap: 2.8rem;
    animation: marquee 38s linear infinite;
    padding-right: 2.8rem;
}
.tech-marquee:hover .tech-marquee__track { animation-play-state: paused; }
.tech-marquee span {
    display: inline-flex; align-items: center; gap: .7rem;
    font-weight: 600;
    color: var(--ink);
    font-size: 1rem;
}
.tech-marquee i { color: var(--gold); font-size: 1.1rem; }

/* 23e. CTA con GRADIENTE ANIMADO de marca (aurora de pasteles sobre navy).
   Reemplaza el video de fondo: lo heredan todos los .cta-cinematic del sitio.
   Técnica: @property para interpolar custom properties (sin JS, GPU-friendly). */
@property --cta-x1 { syntax: '<percentage>'; inherits: false; initial-value: 10%; }
@property --cta-y1 { syntax: '<percentage>'; inherits: false; initial-value: 12%; }
@property --cta-x2 { syntax: '<percentage>'; inherits: false; initial-value: 88%; }
@property --cta-y2 { syntax: '<percentage>'; inherits: false; initial-value: 14%; }
@property --cta-x3 { syntax: '<percentage>'; inherits: false; initial-value: 12%; }
@property --cta-y3 { syntax: '<percentage>'; inherits: false; initial-value: 88%; }
@property --cta-x4 { syntax: '<percentage>'; inherits: false; initial-value: 90%; }
@property --cta-y4 { syntax: '<percentage>'; inherits: false; initial-value: 86%; }
@property --cta-x5 { syntax: '<percentage>'; inherits: false; initial-value: 8%; }
@property --cta-y5 { syntax: '<percentage>'; inherits: false; initial-value: 8%; }
@property --cta-s1 { syntax: '<percentage>'; inherits: false; initial-value: 16%; }
@property --cta-s2 { syntax: '<percentage>'; inherits: false; initial-value: 18%; }
@property --cta-s3 { syntax: '<percentage>'; inherits: false; initial-value: 14%; }
@property --cta-s4 { syntax: '<percentage>'; inherits: false; initial-value: 17%; }
@property --cta-s5 { syntax: '<percentage>'; inherits: false; initial-value: 20%; }

.cta-cinematic {
    color: var(--crema);
    border-radius: var(--r-xl);
    padding: clamp(5rem, 9vw, 7rem) clamp(2rem, 4vw, 3.5rem);
    text-align: center;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-color: #141A2E;
    background-image:
        /* 5 destellos animados (núcleo sólido + caída rápida = chispa) */
        radial-gradient(circle at var(--cta-x1) var(--cta-y1), var(--pink) 0%, var(--pink) 4%, transparent var(--cta-s1)),
        radial-gradient(circle at var(--cta-x2) var(--cta-y2), var(--rose) 0%, var(--rose) 4%, transparent var(--cta-s2)),
        radial-gradient(circle at var(--cta-x3) var(--cta-y3), var(--sage) 0%, var(--sage) 4%, transparent var(--cta-s3)),
        radial-gradient(circle at var(--cta-x4) var(--cta-y4), var(--aqua-c) 0%, var(--aqua-c) 4%, transparent var(--cta-s4)),
        radial-gradient(circle at var(--cta-x5) var(--cta-y5), var(--yellow) 0%, var(--yellow) 4%, transparent var(--cta-s5)),
        /* destellos fijos extra en las orillas (campo de chispas) */
        radial-gradient(circle at 6% 76%, var(--rose) 0%, transparent 7%),
        radial-gradient(circle at 84% 16%, var(--yellow) 0%, transparent 6%),
        radial-gradient(circle at 94% 58%, var(--pink) 0%, transparent 6%),
        radial-gradient(circle at 8% 30%, var(--aqua-c) 0%, transparent 7%),
        radial-gradient(circle at 88% 90%, var(--sage) 0%, transparent 6%);
    animation:
        cta-blob1 16s ease-in-out infinite,
        cta-blob2 19s ease-in-out infinite,
        cta-blob3 17s ease-in-out infinite,
        cta-blob4 21s ease-in-out infinite,
        cta-blob5 14s ease-in-out infinite,
        cta-size1 11s ease-in-out infinite,
        cta-size2 13s ease-in-out infinite,
        cta-size3 12s ease-in-out infinite,
        cta-size4 15s ease-in-out infinite,
        cta-size5 10s ease-in-out infinite;
}
/* Viñeta navy sutil: oscurece los bordes para dar profundidad y deja brillar
   los destellos en el centro. El navy base ya es muy oscuro (#141A2E), así que
   el texto blanco contrasta de sobra; el text-shadow protege si un destello
   pasa por el centro. */
.cta-cinematic::before {
    content: '';
    position: absolute; inset: 0;
    z-index: -1;
    /* halo navy en el centro: protege el texto y deja brillar los destellos
       de los bordes (transparente hacia las orillas) */
    background: radial-gradient(ellipse 70% 75% at 50% 50%,
        rgba(20, 26, 46, .55) 0%,
        rgba(20, 26, 46, .35) 45%,
        rgba(20, 26, 46, 0) 78%);
}
/* Restos del antiguo CTA con video: habilitados como fondo absoluto sobre el gradiente */
.cta-cinematic__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    display: block;
}
.cta-cinematic__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse 70% 75% at 50% 50%,
        rgba(20, 26, 46, 0.65) 0%,
        rgba(20, 26, 46, 0.45) 45%,
        rgba(20, 26, 46, 0.25) 78%);
    display: block;
}
.cta-cinematic__marker { display: none; }

/* Trayectorias que abrazan los BORDES (nunca el centro, donde va el texto) */
@keyframes cta-blob1 { /* borde izquierdo */
    0%, 100% { --cta-x1: 4%;  --cta-y1: 12%; }
    33%      { --cta-x1: 9%;  --cta-y1: 48%; }
    66%      { --cta-x1: 3%;  --cta-y1: 82%; }
}
@keyframes cta-blob2 { /* borde superior */
    0%, 100% { --cta-x2: 16%; --cta-y2: 6%;  }
    33%      { --cta-x2: 52%; --cta-y2: 11%; }
    66%      { --cta-x2: 86%; --cta-y2: 5%;  }
}
@keyframes cta-blob3 { /* borde derecho */
    0%, 100% { --cta-x3: 96%; --cta-y3: 18%; }
    40%      { --cta-x3: 91%; --cta-y3: 55%; }
    70%      { --cta-x3: 97%; --cta-y3: 86%; }
}
@keyframes cta-blob4 { /* borde inferior */
    0%, 100% { --cta-x4: 84%; --cta-y4: 94%; }
    30%      { --cta-x4: 50%; --cta-y4: 90%; }
    60%      { --cta-x4: 18%; --cta-y4: 95%; }
}
@keyframes cta-blob5 { /* recorre las esquinas */
    0%, 100% { --cta-x5: 8%;  --cta-y5: 8%;  }
    25%      { --cta-x5: 92%; --cta-y5: 6%;  }
    50%      { --cta-x5: 94%; --cta-y5: 92%; }
    75%      { --cta-x5: 6%;  --cta-y5: 90%; }
}
@keyframes cta-size1 { 0%, 100% { --cta-s1:  7%; } 50% { --cta-s1: 14%; } }
@keyframes cta-size2 { 0%, 100% { --cta-s2:  8%; } 50% { --cta-s2: 16%; } }
@keyframes cta-size3 { 0%, 100% { --cta-s3:  6%; } 50% { --cta-s3: 13%; } }
@keyframes cta-size4 { 0%, 100% { --cta-s4:  7%; } 50% { --cta-s4: 15%; } }
@keyframes cta-size5 { 0%, 100% { --cta-s5:  9%; } 50% { --cta-s5: 18%; } }

@media (prefers-reduced-motion: reduce) {
    .cta-cinematic { animation: none; }
}
.cta-cinematic .eyebrow {
    color: var(--gold);
    margin-bottom: 1.4rem;
    justify-content: center;
}
.cta-cinematic .eyebrow::before { background: var(--gold); box-shadow: 0 0 14px var(--gold); }
/* El titular del CTA es h2 (no h1): el h1 de la página es el del hero. */
.cta-cinematic h2 {
    color: var(--crema);
    font-size: clamp(1.9rem, 3.8vw, 3.1rem);
    max-width: 820px;
    margin-inline: auto;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .35);
}
.cta-cinematic h3 {
    color: var(--gold);
    font-size: clamp(1.3rem, 2.4vw, 1.85rem);
    font-weight: 600;
    margin-top: .8rem;
    max-width: 900px;
    margin-inline: auto;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .4);
}
.cta-cinematic h3 em { font-style: normal; }
.cta-cinematic p {
    margin-top: 1.8rem;
    color: var(--crema);
    font-size: var(--fs-lead);
    max-width: 700px;
    margin-inline: auto;
    line-height: 1.6;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
}
.cta-cinematic .btn { margin-top: 2.4rem; }
.cta-cinematic .btn--gold { background: var(--gold); color: var(--ink); }
.cta-cinematic .btn--gold:hover { background: var(--crema); color: var(--ink); box-shadow: 0 16px 36px rgba(249, 247, 242, .2); }
.cta-cinematic .btn--gold .arrow { background: var(--ink); }
.cta-cinematic .btn--gold .arrow i { color: var(--gold); }
.cta-cinematic .btn--gold:hover .arrow i { color: var(--ink); }

/* 23m. Stats del hero (3 KPIs en línea editorial) */
.hero-static__stats {
    display: flex;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    margin-top: 2.5rem;
    padding-top: 2.2rem;
    border-top: 1px solid rgba(27, 33, 61, .12);
    flex-wrap: wrap;
}
.hero-stat {
    display: flex; flex-direction: column;
    gap: .25rem;
}
.hero-stat__num {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 800;
    line-height: 1;
    color: var(--gold);
    letter-spacing: -0.03em;
}
.hero-stat__lbl {
    font-size: .92rem;
    color: var(--gray);
    font-weight: 500;
}

/* Mini-banda de stats independiente del hero (3 KPIs centrados) */
.stats-strip {
    padding-block: clamp(2.5rem, 4.5vw, 3.5rem);
    border-top: 1px solid rgba(200, 94, 124, .25);
    border-bottom: 1px solid rgba(200, 94, 124, .25);
    background: linear-gradient(180deg, var(--white), #FFF1ED, var(--white));
}
.stats-strip__inner {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: center;
}
.stats-strip .hero-stat { align-items: center; text-align: center; gap: .35rem; }
.stats-strip .hero-stat__num {
    font-size: clamp(2.4rem, 4vw, 3.4rem);
    color: var(--gold-deep);
}
.stats-strip .hero-stat__lbl {
    font-size: 1rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink-soft);
    font-weight: 500;
}
@media (max-width: 560px) {
    .stats-strip__inner { grid-template-columns: 1fr; }
}

/* 23n. Chips grid genérico (tratamientos / especialidades) — limpio en 3 cols */
.chip-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 2.8rem;
}
.chip-grid__item {
    background: var(--white);
    border: 1px solid rgba(27, 33, 61, .1);
    border-radius: var(--r-md);
    padding: 1.25rem 1.4rem;
    display: flex; align-items: center; gap: .85rem;
    font-weight: 600;
    color: var(--ink);
    font-size: 1rem;
    transition: transform var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
    cursor: default;
}
.chip-grid__item:hover {
    transform: translateY(-3px);
    border-color: var(--gold);
    box-shadow: 0 10px 28px rgba(27, 33, 61, .1);
}
.chip-grid__item i {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--vainilla);
    color: var(--gold-deep);
    font-size: .75rem;
    transition: background var(--t-fast), color var(--t-fast);
    flex-shrink: 0;
}
.chip-grid__item:hover i {
    background: var(--gold);
    color: var(--ink);
}
@media (max-width: 1024px) { .chip-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .chip-grid { grid-template-columns: 1fr; } }

/* 23o. Pilares de 4 columnas con check (decisión del paciente) */
.value-pillars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.4rem;
    margin-top: 2.8rem;
}
.value-pillar {
    text-align: center;
    padding: 2.4rem 1.4rem 2rem;
    border-radius: var(--r-lg);
    background: var(--white);
    border: 1px solid rgba(27, 33, 61, .08);
    transition: transform var(--t-med), box-shadow var(--t-med), background var(--t-med);
    position: relative;
    overflow: hidden;
}
.value-pillar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 60%, rgba(253, 214, 110, .12));
    opacity: 0;
    transition: opacity var(--t-med);
}
.value-pillar:hover { transform: translateY(-8px); box-shadow: 0 26px 50px rgba(27, 33, 61, .14); }
.value-pillar:hover::before { opacity: 1; }
.value-pillar:nth-of-type(1) .value-pillar__icon { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); }
.value-pillar:nth-of-type(2) .value-pillar__icon { background: linear-gradient(135deg, var(--menta), #7fcf94); }
.value-pillar:nth-of-type(3) .value-pillar__icon { background: linear-gradient(135deg, var(--aqua), #6ec4c4); }
.value-pillar:nth-of-type(4) .value-pillar__icon { background: linear-gradient(135deg, var(--coral), #ec7378); }
.value-pillar__icon {
    width: 72px; height: 72px;
    border-radius: 50%;
    color: var(--ink);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1.2rem;
    font-size: 1.5rem;
    position: relative; z-index: 1;
    box-shadow: 0 12px 30px rgba(27, 33, 61, .12);
    transition: transform var(--t-med);
}
.value-pillar:hover .value-pillar__icon {
    transform: scale(1.1) rotate(-6deg);
}
.value-pillar h3 {
    font-size: 1.2rem;
    margin-bottom: .55rem;
}
.value-pillar p {
    color: var(--gray);
    font-size: .92rem;
    line-height: 1.5;
}
@media (max-width: 1024px) { .value-pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .value-pillars { grid-template-columns: 1fr; } }

/* 23p. Paquetes / Pricing (Starter / Profesional / Premium) */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
    align-items: stretch;
    margin-top: 2.5rem;
}
.pricing-card {
    background: var(--white);
    border: 1px solid rgba(27, 33, 61, .1);
    border-radius: var(--r-lg);
    padding: 2.4rem 2rem 2rem;
    display: flex; flex-direction: column; gap: .6rem;
    position: relative;
    transition: transform var(--t-med), box-shadow var(--t-med);
}
.pricing-card:hover { transform: translateY(-6px); box-shadow: 0 26px 52px rgba(27, 33, 61, .12); }
.pricing-card--featured {
    background: var(--ink);
    color: var(--crema);
    transform: scale(1.04);
    border: none;
}
.pricing-card--featured:hover { transform: scale(1.04) translateY(-6px); }
.pricing-card__badge {
    position: absolute;
    top: -.85rem; left: 50%; transform: translateX(-50%);
    background: var(--gold);
    color: var(--ink);
    padding: .35rem 1.1rem;
    border-radius: var(--r-pill);
    font-size: .78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
}
.pricing-card h3 {
    font-size: 1.4rem;
    margin-bottom: .2rem;
}
.pricing-card--featured h3 { color: var(--crema); }
.pricing-card__sub {
    color: var(--gray);
    font-size: .92rem;
    margin-bottom: 1.2rem;
}
.pricing-card--featured .pricing-card__sub { color: rgba(249, 247, 242, .65); }
.pricing-card__price {
    font-family: var(--font-display);
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1;
    color: var(--ink);
    letter-spacing: -0.03em;
}
.pricing-card--featured .pricing-card__price { color: var(--gold); }
.pricing-card__price small {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    color: var(--gray);
    margin-left: .2rem;
}
.pricing-card--featured .pricing-card__price small { color: rgba(249, 247, 242, .6); }
.pricing-card ul {
    display: flex; flex-direction: column; gap: .65rem;
    margin: 1.6rem 0;
    flex-grow: 1;
}
.pricing-card li {
    display: flex; align-items: flex-start; gap: .6rem;
    font-size: .95rem;
    line-height: 1.4;
    color: var(--ink-soft);
}
.pricing-card--featured li { color: rgba(249, 247, 242, .85); }
.pricing-card li i {
    margin-top: .2rem;
    flex-shrink: 0;
    color: var(--gold-deep);
    font-size: .85rem;
}
.pricing-card--featured li i { color: var(--gold); }
.pricing-card li.is-off { color: var(--gray-light); }
.pricing-card li.is-off i { color: var(--gray-light); }
.pricing-card .btn {
    width: 100%;
    justify-content: center;
    margin-top: auto;
}
.pricing-note {
    text-align: center;
    margin-top: 1.5rem;
    font-size: .88rem;
    color: var(--gray);
    font-style: italic;
}
@media (max-width: 1024px) {
    .pricing-grid { grid-template-columns: 1fr; gap: 1.6rem; }
    .pricing-card--featured { transform: none; }
    .pricing-card--featured:hover { transform: translateY(-6px); }
}

/* 23q. Marquee de reseñas Google */
.reviews-marquee {
    overflow: hidden;
    position: relative;
    margin-top: 2.5rem;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.reviews-marquee__track {
    display: inline-flex; gap: 1.5rem;
    animation: marquee 48s linear infinite;
    padding-right: 1.5rem;
}
.reviews-marquee:hover .reviews-marquee__track { animation-play-state: paused; }
.review-google {
    flex: 0 0 360px;
    background: var(--white);
    border-radius: var(--r-lg);
    padding: 1.8rem 1.7rem;
    border: 1px solid rgba(27, 33, 61, .08);
    display: flex; flex-direction: column; gap: .9rem;
}
.review-google__top { display: flex; justify-content: space-between; align-items: center; }
.review-google__stars { color: #F5B301; letter-spacing: .15em; font-size: .9rem; }
.review-google__logo svg { width: 18px; height: 18px; opacity: .5; }
.review-google__text {
    color: var(--ink-soft);
    font-size: .98rem;
    line-height: 1.55;
    flex-grow: 1;
}
.review-google__author {
    display: flex; align-items: center; gap: .8rem;
    padding-top: .7rem;
    border-top: 1px solid rgba(27, 33, 61, .07);
}
.review-google__avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: .85rem;
    color: var(--ink);
}
.review-google__author strong { display: block; font-size: .94rem; }
.review-google__author small { color: var(--gray); font-size: .82rem; }
.reviews-header {
    display: inline-flex;
    align-items: center; gap: .7rem;
    background: var(--white);
    border-radius: var(--r-pill);
    padding: .55rem 1.2rem;
    margin-top: 1.2rem;
    box-shadow: 0 6px 18px rgba(27, 33, 61, .06);
}
.reviews-header svg { width: 18px; height: 18px; }
.reviews-header strong { font-size: 1.05rem; }
.reviews-header__stars { color: #F5B301; letter-spacing: .12em; font-size: .9rem; }

/* 23r. Sección de formulario (diagnóstico gratis) */
.form-section { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
.form-section__left .eyebrow { margin-bottom: 1.3rem; }
.form-section__left h2 { font-size: var(--fs-h2); margin-bottom: 1.4rem; }
.form-section__left > p { color: var(--gray); font-size: var(--fs-lead); line-height: 1.55; margin-bottom: 2rem; }
.form-bullets { display: flex; flex-direction: column; gap: 1.2rem; }
.form-bullet { display: flex; gap: 1rem; align-items: flex-start; }
.form-bullet__icon {
    width: 42px; height: 42px;
    border-radius: 12px;
    background: var(--menta);
    color: var(--ink);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.form-bullet h4 { font-family: var(--font-body); font-size: 1.02rem; font-weight: 700; color: var(--ink); margin-bottom: .15rem; }
.form-bullet p { color: var(--gray); font-size: .92rem; line-height: 1.45; }

.lead-form {
    background: var(--white);
    border-radius: var(--r-lg);
    border: 1px solid rgba(27, 33, 61, .08);
    padding: 2.4rem 2.1rem;
    box-shadow: 0 20px 50px rgba(27, 33, 61, .08);
}
.lead-form h3 { font-size: 1.6rem; margin-bottom: 1.5rem; }
.lead-form .form-field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.1rem; }
.lead-form label { font-size: .88rem; font-weight: 600; color: var(--ink); }
.lead-form input, .lead-form select {
    font: inherit; font-size: .98rem;
    padding: .85rem 1.05rem;
    border-radius: 14px;
    border: 1.5px solid rgba(27, 33, 61, .12);
    background: var(--crema);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
    width: 100%;
}
.lead-form input:focus, .lead-form select:focus {
    outline: none; border-color: var(--gold);
    box-shadow: 0 0 0 4px rgba(253, 214, 110, .18);
}
.lead-form .btn { width: 100%; justify-content: center; margin-top: .4rem; }
.lead-form .legal { font-size: .82rem; color: var(--gray); text-align: center; margin-top: 1rem; }
@media (max-width: 1024px) { .form-section { grid-template-columns: 1fr; } }

/* 23s. FAQ premium (acordeón nativo <details>) */
.faq-list {
    max-width: 820px;
    margin: 2.5rem auto 0;
    display: flex; flex-direction: column;
    gap: .8rem;
}
.faq-item {
    background: var(--white);
    border: 1px solid rgba(27, 33, 61, .08);
    border-radius: var(--r-md);
    padding: 1.4rem 1.6rem;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.faq-item[open] {
    border-color: var(--gold);
    box-shadow: 0 14px 32px rgba(27, 33, 61, .08);
}
.faq-item > summary {
    list-style: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem;
    font-weight: 700;
    color: var(--ink);
    font-size: 1.05rem;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary i {
    color: var(--gold-deep);
    font-size: 1rem;
    transition: transform var(--t-fast);
    flex-shrink: 0;
}
.faq-item[open] > summary i { transform: rotate(180deg); }
.faq-item p {
    margin-top: 1rem;
    color: var(--ink-soft);
    line-height: 1.6;
    font-size: .98rem;
}

/* 23t. Banda CTA WhatsApp final (sage / green band) */
.cta-whatsapp-band {
    background: linear-gradient(135deg, var(--whatsapp) 0%, #1eaa54 100%);
    border-radius: var(--r-xl);
    padding: clamp(2.8rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem);
    text-align: center;
    color: var(--white);
}
.cta-whatsapp-band h2 { color: var(--white); font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: .8rem; }
.cta-whatsapp-band p { color: rgba(255, 255, 255, .92); font-size: var(--fs-lead); margin-bottom: 1.8rem; }
.cta-whatsapp-band .btn--whatsapp {
    background: var(--white);
    color: var(--ink);
}
.cta-whatsapp-band .btn--whatsapp:hover { background: var(--ink); color: var(--white); }
.cta-whatsapp-band .btn--whatsapp i { color: var(--whatsapp); }
.cta-whatsapp-band .btn--whatsapp:hover i { color: var(--whatsapp); }

/* ============================================================================
   24. CARRUSEL EN ABANICO (reutilizable, fondo claro)
   Centro protagónico + lados inclinados, atenuados y a menor escala + flechas.
   JS en footer-v5 posiciona cada tarjeta. Las tarjetas hijas pueden ser
   cualquier card del sistema (.sector-card, .service-card, .pillar-card…).
   ============================================================================ */
.fan-carousel {
    position: relative;
    max-width: 1100px;
    margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
    /* Sin overflow-x aquí: las tarjetas laterales del abanico deben asomar
       completas en escritorio. El clip de html/body evita el scroll horizontal
       en móvil sin recortar el efecto. */
}
.fan-stage {
    position: relative;
    height: 480px;
}
/* cada tarjeta directa del stage se vuelve un ítem posicionado */
.fan-stage > * {
    position: absolute;
    top: 50%; left: 50%;
    width: 340px;
    margin-left: -170px;
    flex: none;
    transform-origin: center center;
    transition: transform .6s cubic-bezier(.22, 1, .36, 1), opacity .6s ease, box-shadow .6s ease;
    will-change: transform, opacity;
}
.fan-stage > *:not(.is-center) { pointer-events: none; }
.fan-stage > .is-center { box-shadow: 0 30px 60px rgba(27, 33, 61, .18); }

.fan-nav {
    display: flex;
    justify-content: center;
    gap: .8rem;
    margin-top: 2.4rem;
}
.fan-arrow {
    width: 54px; height: 54px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    transition: transform .2s ease, background .2s ease, color .2s ease;
}
.fan-arrow.prev { background: var(--white); border: 1.5px solid rgba(27, 33, 61, .15); color: var(--ink); }
.fan-arrow.next { background: var(--ink); color: var(--gold); border: none; }
.fan-arrow:hover { transform: scale(1.08); }

@media (max-width: 600px) {
    .fan-stage { height: 440px; }
    .fan-stage > * { width: 280px; margin-left: -140px; }
}

/* Variante compacta para cards cortas (pilares, value-pillars) */
.fan-carousel--sm .fan-stage { height: 330px; }
.fan-carousel--sm .fan-stage > * { width: 300px; margin-left: -150px; }
@media (max-width: 600px) {
    .fan-carousel--sm .fan-stage { height: 320px; }
    .fan-carousel--sm .fan-stage > * { width: 260px; margin-left: -130px; }
}

/* 23g. Lista de "problema" editorial (tarjetas negativas en grid 3 cols) */
.problem-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
    margin-top: 2.8rem;
}
.problem-list__item {
    background: var(--white);
    border: 1px solid rgba(200, 94, 124, .25);
    border-left: 4px solid var(--terracota);
    border-radius: var(--r-md);
    padding: 1.5rem 1.4rem 1.5rem 1.5rem;
    display: flex;
    align-items: center;
    gap: .9rem;
    transition: transform var(--t-med), box-shadow var(--t-med), border-left-color var(--t-med);
    cursor: default;
}
.problem-list__item:hover {
    transform: translateY(-5px) rotate(-.3deg);
    box-shadow: 0 20px 40px rgba(200, 94, 124, .18);
    border-left-color: var(--gold);
}
.problem-list__item i {
    color: var(--terracota);
    font-size: 1.15rem;
    flex-shrink: 0;
    transition: transform var(--t-fast), color var(--t-fast);
}
.problem-list__item:hover i {
    color: var(--gold-deep);
    transform: scale(1.15) rotate(-8deg);
}
.problem-list__item span {
    font-weight: 600;
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.35;
}
@media (max-width: 1024px) { .problem-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .problem-list { grid-template-columns: 1fr; } }

/* 23h. Pilares de 5 columnas (variante para "Resultados que buscamos") */
.pillars-grid--five { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1024px) { .pillars-grid--five { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .pillars-grid--five { grid-template-columns: 1fr; } }

/* 23i. Bloque "Por qué trabajar conmigo" (split foto + texto) */
.about-strip {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}
.about-strip__media {
    position: relative;
    border-radius: var(--r-xl);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: linear-gradient(135deg, var(--vainilla), var(--menta));
}
.about-strip__media img { width: 100%; height: 100%; object-fit: cover; }
.about-strip__media::after {
    content: '';
    position: absolute;
    bottom: -1.5rem; right: -1.5rem;
    width: 60%; height: 60%;
    background: var(--gold);
    border-radius: var(--r-xl);
    z-index: -1;
}
.about-strip__text .eyebrow { margin-bottom: 1.2rem; }
.about-strip__text h2 { font-size: var(--fs-h2); margin-bottom: 1.3rem; }
.about-strip__text p { color: var(--ink-soft); margin-bottom: 1rem; line-height: 1.65; font-size: 1.02rem; }
.about-strip__text p strong { color: var(--ink); }
.about-strip__chips {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .6rem .9rem;
    margin: 1.5rem 0;
}
.about-strip__chips span {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-weight: 600;
    color: var(--ink);
    font-size: .96rem;
}
.about-strip__chips span i { color: var(--rose); }
@media (max-width: 1024px) {
    .about-strip { grid-template-columns: 1fr; }
    .about-strip__media { max-width: 480px; margin: 0 auto; }
}
@media (max-width: 560px) {
    .about-strip__chips { grid-template-columns: 1fr; }
}

/* 23f. Hero ESTÁTICO para páginas interiores (estilo gusta.studio/services).
   Sin video. Left-aligned. Tipografía protagonista. */
.hero-static {
    padding: clamp(8rem, 14vw, 11rem) 0 clamp(3rem, 5vw, 4.5rem);
    background: linear-gradient(180deg, var(--white) 0%, #FBF6F4 100%);
    position: relative;
    overflow: hidden;
}
.hero-static__inner {
    max-width: 1140px;
    margin-inline: auto;
    padding-inline: var(--gutter);
    position: relative;
    z-index: 2;
}
.hero-static .eyebrow { margin-bottom: 1.6rem; }
.hero-static h1 {
    font-size: clamp(2rem, 4.5vw, 3.8rem);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.025em;
    max-width: 26ch;
}
.hero-static h1 em {
    font-style: normal;
    color: var(--terracota);
}
.hero-static h1 .gold-mark {
    color: var(--rose);
    font-style: normal;
}
.hero-static .sub {
    margin-top: 1.8rem;
    font-size: clamp(1.1rem, 1.7vw, 1.4rem);
    line-height: 1.55;
    color: var(--gray);
    max-width: 60ch;
}
.hero-static__tags {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 2.4rem;
}
.hero-static__tags a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem 1.15rem;
    border-radius: var(--r-pill);
    border: 1.5px solid var(--ink);
    color: var(--ink);
    background: transparent;
    font-weight: 600;
    font-size: .95rem;
    transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.hero-static__tags a:hover {
    background: var(--ink);
    color: var(--crema);
    transform: translateY(-2px);
}
.hero-static__cta {
    margin-top: 2.6rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.hero-static__support {
    margin-top: 2.4rem;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: var(--gray);
    font-size: .98rem;
}
.hero-static__support i { color: var(--rose); }

/* 23u. Hero estático SPLIT (texto izquierda + imagen derecha con badges) */
.hero-static--split .hero-static__inner {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: center;
}
.hero-static--split h1 {
    max-width: 14ch;
}
.hero-static--split .hero-static__cta { margin-top: 2.2rem; }
.hero-static--split .hero-static__stats {
    margin-top: 2.2rem;
    padding-top: 1.8rem;
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

.hero-media {
    position: relative;
    border-radius: var(--r-xl);
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg, var(--menta) 0%, var(--vainilla) 100%);
}
.hero-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .7s var(--ease);
}
.hero-media .ph-photo {
    color: var(--ink);
    font-size: .92rem;
}
.hero-media .ph-photo i { font-size: 2rem; }

.hero-badge {
    position: absolute;
    background: var(--white);
    border-radius: var(--r-md);
    padding: .9rem 1.3rem;
    display: flex; align-items: center; gap: .85rem;
    box-shadow: 0 16px 40px rgba(27, 33, 61, .18);
    animation: hero-badge-float 5s ease-in-out infinite;
    z-index: 2;
}
.hero-badge--top {
    top: clamp(1.5rem, 4vw, 2.5rem);
    right: clamp(-1rem, -1vw, 0rem);
}
.hero-badge--bottom {
    bottom: clamp(1.5rem, 4vw, 2.5rem);
    right: clamp(-1rem, -1vw, 0rem);
    animation-delay: -2.5s;
}
.hero-badge__icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.hero-badge__icon--green { background: var(--menta); color: var(--ink); }
.hero-badge__icon--gold { background: var(--gold); color: var(--ink); }
.hero-badge strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.1rem;
    line-height: 1.1;
    color: var(--ink);
}
.hero-badge small {
    font-size: .82rem;
    color: var(--gray);
}
@keyframes hero-badge-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* Eyebrow píldora (variante para el hero split) */
.hero-static--split .eyebrow {
    background: var(--white);
    padding: .7rem 1.3rem;
    border-radius: var(--r-pill);
    border: 1px solid rgba(27, 33, 61, .08);
    box-shadow: 0 4px 14px rgba(27, 33, 61, .06);
    text-transform: none;
    letter-spacing: 0;
    font-size: .92rem;
    font-weight: 600;
}
.hero-static--split .eyebrow::before { display: none; }
.hero-static--split .eyebrow i {
    color: var(--gold-deep);
    margin-right: .15rem;
}

@media (max-width: 1024px) {
    .hero-static--split .hero-static__inner { grid-template-columns: 1fr; }
    .hero-static--split .hero-media { max-width: 540px; margin: 0 auto; }
}

/* 23w. Galería de casos / showcase visual (grid responsive con placeholders) */
.case-gallery {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1.4rem;
    margin-top: 2.8rem;
}
.case-tile {
    border-radius: var(--r-lg);
    overflow: hidden;
    position: relative;
    transition: transform var(--t-med);
    background: linear-gradient(135deg, var(--menta), var(--aqua));
}
.case-tile:hover { transform: translateY(-6px); }
.case-tile img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .7s var(--ease);
}
.case-tile:hover img { transform: scale(1.05); }
.case-tile__label {
    position: absolute;
    bottom: 1rem; left: 1rem; right: 1rem;
    z-index: 2;
    background: rgba(249, 247, 242, .94);
    backdrop-filter: blur(8px);
    border-radius: var(--r-md);
    padding: .7rem 1rem;
}
.case-tile__label strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1rem;
    line-height: 1.1;
    color: var(--ink);
}
.case-tile__label small {
    font-size: .8rem;
    color: var(--gray);
}
.case-tile--hero {
    grid-row: 1 / 3;
    aspect-ratio: 1 / 1.2;
}
.case-tile--small {
    aspect-ratio: auto;
    height: 100%;
}
.case-tile:nth-child(2) { background: linear-gradient(135deg, var(--durazno), var(--vainilla)); }
.case-tile:nth-child(3) { background: linear-gradient(135deg, var(--coral), #ffd3d5); }
.case-tile:nth-child(4) { background: linear-gradient(135deg, var(--aqua), #d8f5f5); }
.case-tile:nth-child(5) { background: linear-gradient(135deg, var(--vainilla), #fffaf0); }
@media (max-width: 1024px) {
    .case-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
    .case-tile--hero { grid-row: auto; aspect-ratio: 4 / 3; grid-column: 1 / -1; }
    .case-tile--small { aspect-ratio: 4 / 2.8; height: auto; }
}
@media (max-width: 560px) {
    .case-gallery { grid-template-columns: 1fr; }
}

/* 23v. Secciones con visual lateral (imagen + contenido split) */
.section-visual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: center;
    margin-top: 3rem;
}
.section-visual--reverse .section-visual__media { order: 2; }
.section-visual__media {
    position: relative;
    border-radius: var(--r-xl);
    overflow: hidden;
    aspect-ratio: 4 / 4.2;
    background: linear-gradient(135deg, var(--aqua), var(--menta));
}
.section-visual__media img { width: 100%; height: 100%; object-fit: cover; }
.section-visual__media .ph-photo i { font-size: 2.2rem; }
@media (max-width: 1024px) {
    .section-visual { grid-template-columns: 1fr; }
    .section-visual--reverse .section-visual__media { order: -1; }
    .section-visual__media { max-width: 500px; margin: 0 auto; }
}

/* Sub-hero / banda de industrias que respira info pesada del hero */
.industries-band {
    background: var(--white);
    border-top: 1px solid rgba(27, 33, 61, .07);
    border-bottom: 1px solid rgba(27, 33, 61, .07);
    padding: clamp(3rem, 6vw, 5rem) 0;
}
.industries-band__inner {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}
.industries-band__left .eyebrow { margin-bottom: 1.1rem; }
.industries-band__left h2 {
    font-size: clamp(1.55rem, 2.6vw, 2.15rem);
    line-height: 1.1;
    margin-bottom: 1rem;
}
.industries-band__left p {
    color: var(--gray);
    font-size: 1.02rem;
    line-height: 1.55;
}
.industries-band__support {
    margin-top: 1.6rem;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: var(--ink);
    font-weight: 600;
    font-size: .96rem;
    padding: .65rem 1.1rem;
    background: var(--vainilla);
    border-radius: var(--r-pill);
}
.industries-band__support i { color: var(--gold-deep); }
.industries-band__right {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.industry-chip {
    background: var(--crema);
    border: 1.5px solid rgba(27, 33, 61, .12);
    border-radius: var(--r-md);
    padding: 1.15rem 1.25rem;
    display: flex;
    align-items: center;
    gap: .85rem;
    color: var(--ink);
    transition: transform var(--t-fast), background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.industry-chip:hover {
    transform: translateY(-4px);
    background: var(--ink);
    color: var(--crema);
    border-color: var(--ink);
    box-shadow: 0 14px 30px rgba(27, 33, 61, .15);
}
.industry-chip__icon {
    width: 40px; height: 40px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: var(--gold);
    color: var(--ink);
    font-size: 1rem;
    flex-shrink: 0;
    transition: background var(--t-fast), color var(--t-fast);
}
.industry-chip:hover .industry-chip__icon {
    background: var(--gold);
    color: var(--ink);
}
.industry-chip__label {
    display: flex; flex-direction: column;
    gap: .15rem;
}
.industry-chip__label strong {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.1;
}
.industry-chip__label small {
    font-size: .8rem;
    color: var(--gray);
    transition: color var(--t-fast);
}
.industry-chip:hover .industry-chip__label small {
    color: rgba(249, 247, 242, .65);
}

/* Blob decorativo sutil */
.hero-static__blob {
    position: absolute;
    width: 540px; height: 540px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: .35;
    z-index: 1;
    pointer-events: none;
}
.hero-static__blob--gold {
    background: var(--gold);
    top: -180px; right: -120px;
    opacity: .25;
    animation: blob-float-a 14s ease-in-out infinite;
}
.hero-static__blob--menta {
    background: var(--menta);
    bottom: -200px; left: -120px;
    opacity: .4;
    animation: blob-float-b 18s ease-in-out infinite;
}
@keyframes blob-float-a {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-40px, 40px) scale(1.08); }
}
@keyframes blob-float-b {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(50px, -30px) scale(1.1); }
}

@media (max-width: 1024px) {
    .stats__grid { grid-template-columns: repeat(3, 1fr); }
    .service-grid, .pack-grid, .mini-grid, .review-grid, .blog-grid, .ia-grid { grid-template-columns: repeat(2, 1fr); }
    .recursos-grid { grid-template-columns: repeat(2, 1fr); }
    .footer__cols { grid-template-columns: 1fr 1fr; }
    .pillars-grid, .process-grid { grid-template-columns: repeat(2, 1fr); }
    .industries-band__inner { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .nav__links { display: none; }
    .nav__burger { display: flex; }
    .hero__body { grid-template-columns: 1fr; }
    .hero__media { order: -1; max-width: 480px; margin-inline: auto; }
    .stats__grid { grid-template-columns: repeat(2, 1fr); }
    .stat-card:nth-child(5) { grid-column: span 2; }
    .about { grid-template-columns: 1fr; }
    .about__media { max-width: 420px; }
    .contact-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; gap: 0; }
    .form-row .form-field { margin-bottom: 1.1rem; }
}

@media (max-width: 560px) {
    .service-grid, .pack-grid, .mini-grid, .review-grid, .blog-grid, .ia-grid, .recursos-grid { grid-template-columns: 1fr; }
    .sector-card { flex-basis: 85vw; }
    .sectors-list, .pillars-grid, .process-grid { grid-template-columns: 1fr; }
    .sector-detail__solutions ul { grid-template-columns: 1fr; }
    .industries-band__right { grid-template-columns: 1fr; }
    .stats__grid { grid-template-columns: 1fr 1fr; }
    .hero__ctas .btn { width: 100%; justify-content: center; }
    .footer__cols { grid-template-columns: 1fr; }
}

/* ============================================================================
   25. RELATED SECTORS (linkbuilding interno entre landings)
   Grid de 3 mini-cards al final de cada landing apuntando a sectores afines.
   ============================================================================ */
.related-sectors {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-top: 2.5rem;
}
.related-sector {
    background: var(--white);
    border: 1px solid rgba(27, 33, 61, .1);
    border-radius: var(--r-md);
    padding: 1.4rem 1.45rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--ink);
    transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.related-sector:hover {
    transform: translateY(-4px);
    border-color: var(--rose);
    box-shadow: 0 14px 32px rgba(27, 33, 61, .12);
}
.related-sector__icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--pink);
    color: var(--ink);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
    transition: background var(--t-fast), color var(--t-fast);
}
.related-sector:hover .related-sector__icon { background: var(--rose); color: var(--white); }
.related-sector__body { display: flex; flex-direction: column; gap: .15rem; }
.related-sector__body strong { font-family: var(--font-display); font-size: 1.02rem; line-height: 1.15; }
.related-sector__body small { font-size: .82rem; color: var(--gray); }
.related-sector__arrow {
    margin-left: auto;
    color: var(--ink);
    opacity: .35;
    transition: transform var(--t-fast), opacity var(--t-fast);
}
.related-sector:hover .related-sector__arrow { opacity: 1; transform: translateX(3px); }
@media (max-width: 1024px) { .related-sectors { grid-template-columns: 1fr; } }

/* ============================================================================
   26. BLOG EDITORIAL (Behind the Lens inspired, paleta V5)
   ============================================================================ */
.blog-editorial { background: var(--crema); padding-block: 4rem 6rem; }
.blog-editorial__container { max-width: 1280px; margin: 0 auto; padding-inline: var(--gutter); }

/* HERO */
.blog-hero { padding-block: 3rem 3.5rem; }
.blog-hero__pill {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .4rem 1rem;
    background: rgba(27, 33, 61, .06);
    border-radius: 999px;
    font-family: var(--font-body); font-weight: 600; font-size: .82rem;
    color: var(--ink-soft); letter-spacing: .04em;
    margin-bottom: 2rem;
}
.blog-hero__title {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(2.8rem, 7vw, 5rem); line-height: 1;
    letter-spacing: -.025em; color: var(--ink);
    margin-bottom: 2rem;
}
.blog-hero__bottom {
    display: grid; grid-template-columns: 1fr auto; gap: 2rem;
    align-items: end;
}
.blog-hero__sub {
    max-width: 520px;
    font-family: var(--font-body); font-weight: 500;
    font-size: 1.1rem; line-height: 1.55;
    color: var(--gray); opacity: .92;
}
.blog-hero__btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .8rem 1.6rem;
    background: var(--ink); color: var(--crema);
    border-radius: 999px;
    font-family: var(--font-body); font-weight: 600; font-size: .92rem;
    transition: transform var(--t-fast), background var(--t-fast);
    white-space: nowrap;
}
.blog-hero__btn:hover { transform: scale(1.02); background: var(--rose); }
.blog-hero__btn i { font-size: .85rem; }

/* FEATURED POST (2-col) */
.blog-featured {
    display: grid; grid-template-columns: 1fr 1fr;
    border-radius: 20px;
    border: 1px solid rgba(27, 33, 61, .08);
    background: var(--white);
    overflow: hidden;
    min-height: 540px;
    margin-bottom: 2.5rem;
}
.blog-featured__media {
    position: relative;
    overflow: hidden;
    min-height: 400px;
    background: linear-gradient(135deg, var(--menta), var(--aqua));
}
.blog-featured__media img,
.blog-featured__media video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .5s cubic-bezier(.33, 1, .68, 1);
}
.blog-featured__body {
    padding: 3.5rem;
    display: flex; flex-direction: column;
    gap: 1.2rem;
}
.blog-featured__badge {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .4rem .95rem;
    background: var(--ink); color: var(--crema);
    border-radius: 999px;
    font-family: var(--font-body); font-weight: 600;
    font-size: .78rem; letter-spacing: .04em;
    text-transform: uppercase;
    width: fit-content;
}
.blog-featured__title {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(1.8rem, 3.4vw, 3rem); line-height: 1.05;
    letter-spacing: -.018em;
    color: var(--ink);
    transition: color var(--t-fast);
}
.blog-featured:hover .blog-featured__title { color: var(--rose); }
.blog-featured__desc {
    font-family: var(--font-body);
    font-size: 1.05rem; color: var(--gray);
    line-height: 1.55;
}
.blog-featured__foot {
    margin-top: auto;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(27, 33, 61, .06);
}
.blog-featured__author {
    font-family: var(--font-body); font-weight: 500;
    font-size: .88rem; color: var(--ink-soft);
    display: inline-flex; align-items: center; gap: .55rem;
}
.blog-featured__author i { color: var(--rose); }

/* BLOG GRID (3 cards) */
.blog-grid-hero {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.6rem;
    margin-bottom: 4rem;
}
.blog-card {
    display: flex; flex-direction: column; gap: 1rem;
}
.blog-card__media {
    position: relative;
    aspect-ratio: 16/10;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--menta), var(--aqua));
}
.blog-card__media img,
.blog-card__media video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .5s cubic-bezier(.33, 1, .68, 1);
}
.blog-card__placeholder {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255, 255, 255, .4); font-size: 2rem;
}

/* Hover effects (shared featured + card) */
.blog-featured__media,
.blog-card__media { cursor: pointer; }
.blog-featured__media::before,
.blog-card__media::before {
    content: ''; position: absolute; inset: 0;
    background: rgba(27, 33, 61, .42);
    opacity: 0;
    transition: opacity .4s var(--ease);
    z-index: 2;
}
.blog-featured:hover .blog-featured__media::before,
.blog-card:hover .blog-card__media::before { opacity: 1; }
.blog-featured:hover .blog-featured__media img,
.blog-featured:hover .blog-featured__media video,
.blog-card:hover .blog-card__media img,
.blog-card:hover .blog-card__media video {
    transform: scale(1.08);
}

/* + button center */
.blog-featured__media::after,
.blog-card__media::after {
    content: '+';
    position: absolute; top: 50%; left: 50%;
    width: 70px; height: 70px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--ink);
    font-family: var(--font-body); font-weight: 400;
    font-size: 2.2rem; line-height: 70px; text-align: center;
    transform: translate(-50%, -50%) scale(.7);
    opacity: 0;
    transition: transform .3s var(--ease), opacity .3s var(--ease);
    z-index: 3;
    pointer-events: none;
}
.blog-featured:hover .blog-featured__media::after,
.blog-card:hover .blog-card__media::after {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

/* Corner brackets (L-shape) */
.blog-bracket {
    position: absolute;
    width: 12px; height: 12px;
    border: 1.5px solid var(--white);
    opacity: 0;
    transition: opacity .35s var(--ease);
    z-index: 3;
    pointer-events: none;
}
.blog-bracket--tl { top: 15px; left: 15px; border-right: 0; border-bottom: 0; }
.blog-bracket--tr { top: 15px; right: 15px; border-left: 0; border-bottom: 0; }
.blog-bracket--bl { bottom: 15px; left: 15px; border-right: 0; border-top: 0; }
.blog-bracket--br { bottom: 15px; right: 15px; border-left: 0; border-top: 0; }
.blog-featured:hover .blog-bracket,
.blog-card:hover .blog-bracket { opacity: 1; }

/* Card body */
.blog-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
}
.blog-card__body > div {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    order: 2;
    width: 100%;
}
.blog-cat-badge {
    order: 1;
}
.blog-card__title {
    font-family: var(--font-display); font-weight: 600;
    font-size: 1.18rem; line-height: 1.3;
    letter-spacing: -.005em;
    color: var(--ink);
    transition: color var(--t-fast);
}
.blog-card:hover .blog-card__title { color: var(--rose); }
.blog-card__meta {
    font-family: var(--font-body);
    font-size: .82rem; color: var(--gray);
    display: flex; gap: .8rem;
    margin-top: .35rem;
}
.blog-card__meta i { color: var(--rose); margin-right: .25rem; opacity: .7; }

/* Category badges (paleta V5) */
.blog-cat-badge {
    display: inline-flex; align-items: center;
    padding: .25rem .8rem;
    border-radius: 999px;
    font-family: var(--font-body); font-weight: 700;
    font-size: .72rem; letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}
.blog-cat-badge--rose { background: var(--rose); color: var(--white); }
.blog-cat-badge--gold { background: var(--gold); color: var(--ink); }
.blog-cat-badge--menta { background: var(--menta); color: var(--ink); }
.blog-cat-badge--coral { background: var(--coral); color: var(--white); }
.blog-cat-badge--aqua { background: var(--aqua); color: var(--ink); }
.blog-cat-badge--ink { background: var(--ink); color: var(--crema); }

/* SEARCH + FILTERS */
.blog-search-section { padding-block: 2rem 1.5rem; }
.blog-search {
    max-width: 720px; margin: 0 auto 1.5rem;
    position: relative;
}
.blog-search input {
    width: 100%;
    padding: 1rem 1.5rem 1rem 3.2rem;
    font-family: var(--font-body); font-size: 1rem;
    border: 1px solid rgba(27, 33, 61, .12);
    border-radius: 999px;
    background: var(--white);
    color: var(--ink);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.blog-search input:focus {
    outline: none;
    border-color: var(--rose);
    box-shadow: 0 0 0 4px rgba(200, 94, 124, .08);
}
.blog-search__icon {
    position: absolute; left: 1.3rem; top: 50%;
    transform: translateY(-50%);
    color: var(--gray); font-size: 1rem;
    pointer-events: none;
}
.blog-search__count {
    margin-top: .7rem; font-size: .85rem;
    color: var(--gray); text-align: center;
}

.blog-filters {
    display: flex; gap: .6rem;
    overflow-x: auto; padding-bottom: .5rem;
    scrollbar-width: thin;
}
.blog-filter-pill {
    padding: .55rem 1.1rem;
    border-radius: 999px;
    border: 1px solid rgba(27, 33, 61, .12);
    background: var(--white); color: var(--ink);
    font-family: var(--font-body); font-weight: 500;
    font-size: .88rem;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.blog-filter-pill:hover { border-color: var(--ink); }
.blog-filter-pill.active {
    background: var(--ink); color: var(--crema);
    border-color: var(--ink);
}

/* No results */
.blog-no-results {
    text-align: center; padding: 3rem 1rem;
    color: var(--gray);
}
.blog-no-results i { font-size: 2rem; color: var(--rose); margin-bottom: 1rem; }
.blog-no-results h3 { font-family: var(--font-display); color: var(--ink); margin-bottom: .5rem; }

/* Category sections */
.blog-cat-section {
    padding-block: 3rem;
    border-top: 1px solid rgba(27, 33, 61, .08);
}
.blog-cat-section__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; margin-bottom: 2rem;
    flex-wrap: wrap;
}
.blog-cat-section__title {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(1.4rem, 3vw, 2rem);
    color: var(--ink);
    display: flex; align-items: center; gap: .85rem;
}
.blog-cat-section__count {
    font-family: var(--font-body); font-size: .82rem;
    color: var(--gray); font-weight: 500;
    padding: .35rem .8rem;
    border-radius: 999px;
    background: rgba(27, 33, 61, .05);
}
.blog-cat-section__grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.6rem;
}
.blog-show-more {
    text-align: center; margin-top: 2.5rem;
}
.blog-show-more__btn {
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .85rem 1.6rem;
    background: transparent;
    color: var(--ink);
    border: 1px solid rgba(27, 33, 61, .15);
    border-radius: 999px;
    font-family: var(--font-body); font-weight: 600;
    font-size: .92rem;
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.blog-show-more__btn:hover {
    background: var(--ink); color: var(--crema); border-color: var(--ink);
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .blog-featured { grid-template-columns: 1fr; }
    .blog-featured__body { padding: 2rem; }
    .blog-grid-hero,
    .blog-cat-section__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .blog-hero__title { font-size: clamp(2.2rem, 9vw, 3.5rem); }
    .blog-hero__bottom { grid-template-columns: 1fr; }
    .blog-grid-hero,
    .blog-cat-section__grid { grid-template-columns: 1fr; }
    .blog-featured__title { font-size: clamp(1.5rem, 6vw, 2rem); }
    .blog-featured__body { padding: 1.8rem; }
}

/* ============================================================================
   27. TIMELINE TRAYECTORIA (Sobre Mí, paleta V5)
   ============================================================================ */
.timeline {
    position: relative;
    max-width: 920px;
    margin: 0 auto;
    padding-block: 1rem;
}
.timeline::before {
    content: '';
    position: absolute;
    left: 50%; top: 0; bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, transparent, rgba(27,33,61,.18) 8%, rgba(27,33,61,.18) 92%, transparent);
    transform: translateX(-50%);
}
.timeline__item {
    position: relative;
    width: 50%;
    padding: 1.5rem 2.5rem;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.timeline__item.tl-visible { opacity: 1; transform: translateY(0); }
.timeline__item--left  { left: 0; text-align: right; }
.timeline__item--right { left: 50%; text-align: left; }
.timeline__dot {
    position: absolute; top: 1.9rem;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--ink); color: var(--crema);
    display: flex; align-items: center; justify-content: center;
    font-size: .9rem;
    z-index: 2;
    box-shadow: 0 0 0 6px var(--crema);
}
.timeline__item--left  .timeline__dot { right: -22px; }
.timeline__item--right .timeline__dot { left: -22px; }
.timeline__dot--gold { background: var(--gold); color: var(--ink); }
.timeline__dot--rose { background: var(--rose); color: var(--white); }
.timeline__dot--sage { background: var(--menta); color: var(--ink); }
.timeline__card {
    background: var(--white);
    border: 1px solid rgba(27,33,61,.08);
    border-radius: var(--r-md);
    padding: 1.5rem 1.7rem;
    transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
    text-align: left;
}
.timeline__item--left .timeline__card { text-align: right; }
.timeline__card:hover {
    transform: translateY(-3px);
    border-color: var(--rose);
    box-shadow: 0 14px 32px rgba(27,33,61,.1);
}
.timeline__year {
    display: inline-block;
    padding: .25rem .8rem;
    border-radius: 999px;
    background: rgba(252,193,19,.18);
    color: var(--ink);
    font-family: var(--font-body); font-weight: 700;
    font-size: .78rem; letter-spacing: .03em;
    margin-bottom: .7rem;
}
.timeline__card h3 {
    font-family: var(--font-display); font-weight: 700;
    font-size: 1.18rem; color: var(--ink);
    line-height: 1.25; margin-bottom: .5rem;
}
.timeline__card p {
    font-family: var(--font-body); font-size: .95rem;
    color: var(--gray); line-height: 1.5;
}
.timeline__card a { color: var(--rose); font-weight: 600; }
.timeline__card--highlight {
    background: var(--ink);
    border-color: var(--ink);
}
.timeline__card--highlight h3 { color: var(--crema); }
.timeline__card--highlight p { color: rgba(249,247,242,.78); }
.timeline__card--highlight .timeline__year { background: rgba(252,193,19,.25); color: var(--gold); }

/* Certificaciones (grid de badges) */
.cert-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    max-width: 920px; margin: 2.5rem auto 0;
}
.cert-item {
    display: flex; align-items: center; gap: 1rem;
    background: var(--white);
    border: 1px solid rgba(27,33,61,.08);
    border-radius: var(--r-md);
    padding: 1.1rem 1.2rem;
    transition: transform var(--t-fast), border-color var(--t-fast);
}
.cert-item:hover { transform: translateY(-3px); border-color: var(--rose); }
.cert-item__icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: var(--ink); color: var(--gold);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; font-weight: 700;
    flex-shrink: 0;
}
.cert-item__body strong { display: block; font-family: var(--font-display); font-size: 1rem; color: var(--ink); line-height: 1.2; }
.cert-item__body small { font-size: .82rem; color: var(--gray); }

/* Manifiesto editorial grande */
.manifesto {
    max-width: 920px; margin: 0 auto; text-align: center;
}
.manifesto__big {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(1.8rem, 4.2vw, 3.2rem);
    line-height: 1.12; letter-spacing: -.018em;
    color: var(--ink);
    margin-bottom: 1.8rem;
}
.manifesto__big em { color: var(--rose); font-style: normal; }
.manifesto__text {
    font-family: var(--font-body); font-size: var(--fs-lead);
    color: var(--gray); line-height: 1.6;
    max-width: 720px; margin: 0 auto;
}

@media (max-width: 768px) {
    .timeline::before { left: 22px; }
    .timeline__item, .timeline__item--left, .timeline__item--right {
        width: 100%; left: 0; text-align: left; padding: 1rem 0 1rem 3.5rem;
    }
    .timeline__item--left .timeline__card,
    .timeline__card { text-align: left; }
    .timeline__item--left .timeline__dot,
    .timeline__item--right .timeline__dot { left: 0; right: auto; }
}

/* ---------- Header del bloque blog reutilizable (landings) ---------- */
.blog-block-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 2rem; margin-bottom: 2.5rem; flex-wrap: wrap;
}
.blog-block-head .eyebrow { margin-bottom: .8rem; }
.blog-block-head h2 {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.1;
    letter-spacing: -.015em; color: var(--ink); margin-bottom: .6rem;
}
.blog-block-head p { color: var(--gray); max-width: 520px; font-size: 1.02rem; }
.blog-block-head__btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .8rem 1.5rem;
    background: var(--ink); color: var(--crema);
    border-radius: 999px;
    font-family: var(--font-body); font-weight: 600; font-size: .9rem;
    white-space: nowrap; flex-shrink: 0;
    transition: transform var(--t-fast), background var(--t-fast);
}
.blog-block-head__btn:hover { transform: scale(1.02); background: var(--rose); }
.blog-block-head__btn i { font-size: .82rem; }
@media (max-width: 768px) {
    .blog-block-head { flex-direction: column; align-items: flex-start; }
}

/* ============================================================================
   SECCIÓN 28 — LANDING PAGES DE PRODUCTOS
   ============================================================================ */

/* Precio en el hero */
.hero-price {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    margin: .9rem 0 1.5rem;
}
.hero-price__amount {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    font-weight: 800;
    color: var(--ink);
    line-height: 1;
}
.hero-price__suffix {
    font-size: .9rem;
    color: var(--gray);
    line-height: 1;
}
.hero-price__badge {
    display: inline-flex;
    align-items: center;
    padding: .28rem .85rem;
    background: var(--gold);
    color: var(--ink);
    font-size: .75rem;
    font-weight: 700;
    border-radius: var(--r-pill);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.hero-price__badge--rose { background: var(--rose); color: #fff; }

/* Qué incluye — grid de checks */
.includes-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .7rem;
    margin-top: 1.8rem;
}
.includes-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    background: var(--white);
    border-radius: var(--r-md);
    padding: .85rem 1.1rem;
    border: 1px solid rgba(10,11,13,.07);
}
.includes-item i {
    color: var(--gold-deep);
    font-size: .95rem;
    margin-top: .18rem;
    flex-shrink: 0;
}
.includes-item span {
    font-size: .92rem;
    line-height: 1.45;
    color: var(--ink);
}

/* Formulario de recursos gratuitos */
.form-recursos {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    max-width: 520px;
    margin: 2rem auto 0;
}
.form-recursos__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .9rem;
}
.form-recursos input,
.form-recursos select {
    width: 100%;
    padding: .9rem 1.1rem;
    border: 1.5px solid rgba(249,247,242,.25);
    border-radius: var(--r-md);
    font-family: var(--font-body);
    font-size: .95rem;
    background: rgba(255,255,255,.08);
    color: var(--crema);
    outline: none;
    transition: border-color var(--t-fast);
}
.form-recursos input::placeholder { color: rgba(249,247,242,.5); }
.form-recursos select { color: rgba(249,247,242,.7); }
.form-recursos select option { color: var(--ink); background: var(--white); }
.form-recursos input:focus,
.form-recursos select:focus { border-color: var(--gold); }
.form-recursos__note {
    font-size: .78rem;
    color: rgba(249,247,242,.5);
    text-align: center;
}
.form-recursos__thanks {
    display: none;
    text-align: center;
    padding: 2rem;
    background: rgba(255,255,255,.07);
    border-radius: var(--r-lg);
    margin-top: 1rem;
}
.form-recursos__thanks h3 { color: var(--gold); margin-bottom: .6rem; font-size: 1.3rem; }
.form-recursos__thanks p { color: rgba(249,247,242,.8); font-size: .95rem; }

/* Recursos grid (4 lead magnets) */
.recursos-lead-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
    margin-top: 2rem;
}
.recurso-lead-card {
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
    background: var(--white);
    border-radius: var(--r-lg);
    padding: 1.4rem 1.5rem;
    border: 1px solid rgba(10,11,13,.07);
    transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.recurso-lead-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(10,11,13,.1); }
.recurso-lead-card__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--r-md);
    background: var(--vainilla);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.recurso-lead-card__icon i { font-size: 1.3rem; color: var(--gold-deep); }
.recurso-lead-card h3 { font-size: 1rem; margin-bottom: .3rem; line-height: 1.3; }
.recurso-lead-card p { font-size: .85rem; color: var(--gray); line-height: 1.5; }

/* Responsive */
@media (max-width: 768px) {
    .includes-grid { grid-template-columns: 1fr; }
    .form-recursos__row { grid-template-columns: 1fr; }
    .recursos-lead-grid { grid-template-columns: 1fr; }
}