/* =========================================================
   OLIVOTRONIC · PREMIUM VISUAL UPGRADE
   Capa adicional sobre home.css — solo añade, no sobrescribe
   ========================================================= */

/* ---------------------------------------------------------
   1. Scroll progress bar (oro metálico, fijo arriba)
   --------------------------------------------------------- */
.ot-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 100;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        rgba(212, 175, 90, 0)    0%,
        rgba(184, 144, 58, 0.7) 18%,
        rgba(212, 175, 90, 1)   45%,
        rgba(240, 221, 164, 1)  70%,
        rgba(248, 236, 198, 1) 100%
    );
    transform: scaleX(0);
    transform-origin: 0 50%;
    box-shadow:
        0 0 18px rgba(212, 175, 90, 0.55),
        0 0 4px rgba(240, 221, 164, 0.85);
    will-change: transform;
}

/* ---------------------------------------------------------
   2. Cursor halo (foco dorado siguiendo el ratón)
   --------------------------------------------------------- */
.ot-cursor-halo {
    position: fixed;
    top: 0;
    left: 0;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: screen;
    background:
        radial-gradient(circle,
            rgba(240, 221, 164, 0.18) 0%,
            rgba(212, 175, 90, 0.12) 22%,
            rgba(155, 181, 113, 0.06) 48%,
            transparent 70%);
    filter: blur(32px);
    transform: translate3d(-9999px, -9999px, 0);
    opacity: 0;
    transition: opacity 0.45s ease;
    will-change: transform;
}
.ot-cursor-halo.is-active { opacity: 1; }

@media (hover: none), (pointer: coarse) {
    .ot-cursor-halo { display: none !important; }
}

/* ---------------------------------------------------------
   3. Hero · entrada coreografiada (CSS only)
   El h1 entra sin filter porque su <span> usa background-clip: text
   y un filter residual sobre el padre rompe el clipping en WebKit.
   --------------------------------------------------------- */
.js .hero__content .eyebrow,
.js .hero__content .hero__text,
.js .hero__content .hero__actions {
    opacity: 0;
    transform: translateY(32px);
    filter: blur(10px);
    animation: otHeroLine 1.05s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.js .hero__content h1 {
    opacity: 0;
    transform: translateY(32px);
    animation: otHeroLineH1 1.05s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.js .hero__content .eyebrow      { animation-delay: 0.08s; }
.js .hero__content h1            { animation-delay: 0.22s; }
.js .hero__content .hero__text   { animation-delay: 0.46s; }
.js .hero__content .hero__actions{ animation-delay: 0.62s; }

@keyframes otHeroLine {
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}
@keyframes otHeroLineH1 {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.js .hero__visual {
    opacity: 0;
    transform: translateY(48px) scale(0.94);
    filter: blur(18px);
    animation: otHeroVisual 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.32s forwards;
    will-change: opacity, transform, filter;
}
@keyframes otHeroVisual {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* ---------------------------------------------------------
   4. H1 · shimmer dorado metálico en el span
   Sin filter (rompería el clipping); el glow va por text-shadow.
   --------------------------------------------------------- */
h1 span {
    background-image: linear-gradient(
        100deg,
        var(--oli-gold-300) 0%,
        var(--oli-gold-200) 22%,
        #FFF6CF             46%,
        var(--oli-gold-200) 56%,
        var(--oli-gold-300) 74%,
        var(--oli-gold-400) 100%
    );
    background-size: 220% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow:
        0 0 28px rgba(212, 175, 90, 0.42),
        0 0 6px  rgba(240, 221, 164, 0.55);
    animation: otGoldShimmer 7.5s ease-in-out infinite;
}
@keyframes otGoldShimmer {
    0%   { background-position: 0%   50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0%   50%; }
}

/* ---------------------------------------------------------
   5. Tilt 3D en cards (variables controladas por JS)
   --------------------------------------------------------- */
.feature-card,
.process-card,
.pillar-card,
.module-grid article,
.timeline-panel article,
.comparison-grid article,
.trace-grid article,
.network-grid article,
.demo-card,
.cost-levels article {
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

/* Inner shine que se intensifica con el tilt */
.feature-card::after,
.process-card::after,
.pillar-card::after,
.module-grid article::after,
.comparison-grid article::after,
.trace-grid article::after,
.network-grid article::after,
.demo-card::after,
.cost-levels article::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(
        var(--ot-shine-angle, 115deg),
        transparent 0%,
        rgba(240, 221, 164, 0.10) 38%,
        rgba(255, 246, 207, 0.18) 50%,
        rgba(240, 221, 164, 0.08) 62%,
        transparent 100%
    );
    opacity: 0;
    transition: opacity 0.35s ease;
    mix-blend-mode: screen;
    z-index: 1;
}
.feature-card:hover::after,
.process-card:hover::after,
.pillar-card:hover::after,
.module-grid article:hover::after,
.comparison-grid article:hover::after,
.trace-grid article:hover::after,
.network-grid article:hover::after,
.demo-card:hover::after,
.cost-levels article:hover::after {
    opacity: 1;
}

/* ---------------------------------------------------------
   6. Botones magnéticos (transición fluida)
   --------------------------------------------------------- */
.btn,
.header-cta {
    transform-style: preserve-3d;
    transition:
        transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1.05),
        box-shadow 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 0.32s ease;
    will-change: transform;
}

/* ---------------------------------------------------------
   7. Olivia flow · línea vertical dorada con puntos
   --------------------------------------------------------- */
.olivia-flow {
    position: relative;
}
.olivia-flow::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 12px;
    bottom: 12px;
    width: 1px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(212, 175, 90, 0.85) 8%,
        rgba(240, 221, 164, 0.95) 50%,
        rgba(212, 175, 90, 0.85) 92%,
        transparent 100%
    );
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 1.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow:
        0 0 14px rgba(212, 175, 90, 0.55),
        0 0 4px rgba(240, 221, 164, 0.7);
    z-index: 3;
    pointer-events: none;
}
.olivia-flow.is-flow-visible::before {
    transform: scaleY(1);
}

.olivia-flow div {
    position: relative;
    z-index: 1;
    overflow: visible;
    padding-left: 44px !important;
    transition:
        transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 0.32s ease,
        background 0.32s ease,
        box-shadow 0.32s ease;
}
.olivia-flow div::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%,
            #FFF6CF 0%,
            var(--oli-gold-400) 45%,
            var(--oli-gold-600) 100%);
    box-shadow:
        0 0 0 3px rgba(212, 175, 90, 0.18),
        0 0 18px rgba(212, 175, 90, 0.7),
        0 0 4px rgba(240, 221, 164, 0.85);
    z-index: 4;
    transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1.4);
}
.olivia-flow.is-flow-visible div::before {
    transform: translateY(-50%) scale(1);
}
.olivia-flow.is-flow-visible div:nth-child(1)::before { transition-delay: 0.20s; }
.olivia-flow.is-flow-visible div:nth-child(2)::before { transition-delay: 0.40s; }
.olivia-flow.is-flow-visible div:nth-child(3)::before { transition-delay: 0.60s; }
.olivia-flow.is-flow-visible div:nth-child(4)::before { transition-delay: 0.80s; }
.olivia-flow.is-flow-visible div:nth-child(5)::before { transition-delay: 1.00s; }
.olivia-flow.is-flow-visible div:nth-child(6)::before { transition-delay: 1.20s; }
.olivia-flow.is-flow-visible div:nth-child(7)::before { transition-delay: 1.40s; }

.olivia-flow div:hover {
    transform: translateX(10px);
    border-color: rgba(212, 175, 90, 0.42);
    background: rgba(0, 0, 0, 0.4);
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.45),
        0 0 24px rgba(212, 175, 90, 0.18);
}

/* ---------------------------------------------------------
   8. Reveal mejorado (escala + desenfoque + easing premium)
   --------------------------------------------------------- */
.js .reveal {
    opacity: 0;
    transform: translateY(50px) scale(0.965);
    filter: blur(12px);
    transition:
        opacity   1.05s cubic-bezier(0.2, 0.8, 0.2, 1),
        transform 1.05s cubic-bezier(0.2, 0.8, 0.2, 1),
        filter    1.05s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: opacity, transform, filter;
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

.js .reveal-left {
    opacity: 0;
    transform: translateX(-46px) scale(0.97);
    filter: blur(10px);
    transition:
        opacity   1.0s cubic-bezier(0.2, 0.8, 0.2, 1),
        transform 1.0s cubic-bezier(0.2, 0.8, 0.2, 1),
        filter    1.0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.js .reveal-right {
    opacity: 0;
    transform: translateX(46px) scale(0.97);
    filter: blur(10px);
    transition:
        opacity   1.0s cubic-bezier(0.2, 0.8, 0.2, 1),
        transform 1.0s cubic-bezier(0.2, 0.8, 0.2, 1),
        filter    1.0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal-left.is-visible,
.reveal-right.is-visible {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
}

/* ---------------------------------------------------------
   9. Header · luz dorada que cruza al hacer scroll
   --------------------------------------------------------- */
.site-header.is-scrolled {
    overflow: visible;
}
.site-header.is-scrolled::before {
    content: "";
    position: absolute;
    left: 14%;
    right: 14%;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(212, 175, 90, 0.55) 50%,
        transparent 100%);
    animation: otHeaderSweep 7s ease-in-out infinite;
    pointer-events: none;
}
@keyframes otHeaderSweep {
    0%, 18%   { opacity: 0; transform: translateX(-30%); }
    50%       { opacity: 1; }
    82%, 100% { opacity: 0; transform: translateX(30%); }
}

/* ---------------------------------------------------------
   9b. Definition panel · etiquetas <strong> en oro
   --------------------------------------------------------- */
.definition-panel p strong {
    color: var(--ot-gold-soft);
    font-weight: 700;
    margin-right: 0.15em;
    letter-spacing: 0.01em;
}

/* ---------------------------------------------------------
   10. Brand mark · brillo permanente sutil
   --------------------------------------------------------- */
.brand__mark {
    box-shadow:
        var(--shadow-gold),
        0 0 0 1px rgba(240, 221, 164, 0.35) inset;
}

/* ---------------------------------------------------------
   12. H2 · gradiente metálico marfil-plata
   --------------------------------------------------------- */
.section__header h2,
.promise-card h2,
.olivia-card h2,
.cost-card h2,
.final-cta-section h2,
.wide-visual-block__text h3,
.olivia-step h2 {
    background-image: linear-gradient(
        172deg,
        #FFFCF2 0%,
        #F2EFE6 38%,
        #D9D4C4 70%,
        #B5B0A2 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: 0 2px 32px rgba(255, 246, 207, 0.08);
    position: relative;
    padding-bottom: 22px;
}

/* ---------------------------------------------------------
   13. H2 · línea dorada que se dibuja al entrar en viewport
   --------------------------------------------------------- */
.section__header h2::after,
.promise-card h2::after,
.olivia-card h2::after,
.cost-card h2::after,
.final-cta-section h2::after,
.wide-visual-block__text h3::after,
.olivia-step h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 72px;
    height: 2px;
    background: linear-gradient(
        90deg,
        rgba(240, 221, 164, 0.95) 0%,
        rgba(212, 175, 90, 0.85) 50%,
        rgba(212, 175, 90, 0)   100%
    );
    box-shadow:
        0 0 14px rgba(212, 175, 90, 0.55),
        0 0 4px  rgba(240, 221, 164, 0.7);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) 0.35s;
}
.is-visible h2::after,
.is-visible h3::after,
.reveal.is-visible h2::after,
.reveal.is-visible h3::after,
.section__header.is-visible h2::after {
    transform: scaleX(1);
}
/* El hero H2 (que está dentro de .promise-card / .olivia-card etc. dentro de .reveal)
   o cualquier sección sin .reveal en el header padre → trigger por .section__header */

/* ---------------------------------------------------------
   14. Aura rotatoria dorada detrás de paneles premium
   (elemento <span class="ot-aura-ring"> inyectado por JS)
   --------------------------------------------------------- */
.ot-aura-host {
    position: relative;
    isolation: isolate;
}
.ot-aura-ring {
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    background: conic-gradient(
        from 0deg,
        rgba(212, 175, 90, 0.0)   0deg,
        rgba(212, 175, 90, 0.55) 60deg,
        rgba(240, 221, 164, 0.85) 120deg,
        rgba(155, 181, 113, 0.45) 180deg,
        rgba(212, 175, 90, 0.0) 240deg,
        rgba(212, 175, 90, 0.0) 360deg
    );
    filter: blur(14px);
    opacity: 0.42;
    z-index: -1;
    pointer-events: none;
    animation: otAuraSpin 18s linear infinite;
    will-change: transform;
}
@keyframes otAuraSpin {
    to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------
   15. Glassmorphism + embossing 3D dramático en paneles premium
   --------------------------------------------------------- */
.definition-panel,
.promise-card,
.olivia-card,
.cost-card,
.final-cta-section,
.wide-visual-block,
.launch-card {
    backdrop-filter: blur(14px) saturate(1.30);
    -webkit-backdrop-filter: blur(14px) saturate(1.30);
    box-shadow:
        /* Inset top — luz captada en el borde superior */
        0 1px 0 rgba(240, 221, 164, 0.24) inset,
        0 4px 0 rgba(255, 246, 207, 0.07) inset,
        /* Inset bottom — recesión profunda */
        0 -1px 0 rgba(0, 0, 0, 0.70) inset,
        /* Borde dorado de 1px — rim metálico */
        0 0 0 1px rgba(212, 175, 90, 0.12),
        /* Drop shadow ambiente apilado */
        0 1px 0 rgba(255, 246, 207, 0.06),
        0 22px 48px rgba(0, 0, 0, 0.38),
        0 60px 130px rgba(0, 0, 0, 0.55),
        /* Halo dorado externo */
        0 0 120px rgba(212, 175, 90, 0.14);
}

/* ---------------------------------------------------------
   16. Botones primarios · pulse glow constante
   --------------------------------------------------------- */
.btn--primary,
.header-cta {
    animation: otBtnPulse 4.6s ease-in-out infinite;
}
@keyframes otBtnPulse {
    0%, 100% {
        box-shadow:
            0 0 24px rgba(212, 175, 90, 0.22),
            0 0 60px rgba(184, 144, 58, 0.10);
    }
    50% {
        box-shadow:
            0 0 56px rgba(240, 221, 164, 0.45),
            0 0 110px rgba(212, 175, 90, 0.28);
    }
}

/* ---------------------------------------------------------
   17. Cards · hover más dramático
   --------------------------------------------------------- */
.feature-card:hover,
.process-card:hover,
.pillar-card:hover,
.module-grid article:hover,
.timeline-panel article:hover,
.comparison-grid article:hover,
.trace-grid article:hover,
.network-grid article:hover,
.demo-card:hover,
.cost-levels article:hover {
    border-color: rgba(212, 175, 90, 0.45);
    box-shadow:
        0 1px 0 rgba(240, 221, 164, 0.12) inset,
        0 48px 120px rgba(0, 0, 0, 0.55),
        0 0 90px rgba(212, 175, 90, 0.22),
        0 0 24px rgba(240, 221, 164, 0.10);
}

/* ---------------------------------------------------------
   18. Capa de grano fílmico
   (elemento <div class="ot-grain"> inyectado por JS)
   --------------------------------------------------------- */
.ot-grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    opacity: 0.07;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.9  0 0 0 0 0.85  0 0 0 0 0.7  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 220px 220px;
}

/* ---------------------------------------------------------
   19. Vignette cinematográfica
   (elemento <div class="ot-vignette"> inyectado por JS)
   --------------------------------------------------------- */
.ot-vignette {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        radial-gradient(
            ellipse 110% 80% at 50% 35%,
            transparent 35%,
            rgba(0, 0, 0, 0.18) 65%,
            rgba(0, 0, 0, 0.45) 92%,
            rgba(0, 0, 0, 0.62) 100%
        );
    mix-blend-mode: multiply;
}

/* ---------------------------------------------------------
   20. Hero · aura amplificada (la conic ya existe en home.css,
       solo subimos potencia y saturación)
   --------------------------------------------------------- */
.hero::before {
    opacity: 0.92 !important;
    filter: blur(28px) !important;
    background:
        conic-gradient(
            from 120deg,
            transparent,
            rgba(212, 175, 90, 0.22),
            rgba(240, 221, 164, 0.18),
            rgba(155, 181, 113, 0.14),
            transparent,
            rgba(184, 144, 58, 0.22),
            rgba(212, 175, 90, 0.18),
            transparent
        ) !important;
}

/* ---------------------------------------------------------
   21. Sections · spotlight cenital sutil por sección
   --------------------------------------------------------- */
.section {
    position: relative;
}
.section::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 320px;
    pointer-events: none;
    background: radial-gradient(
        ellipse 60% 100% at 50% 0%,
        rgba(240, 221, 164, 0.045),
        rgba(212, 175, 90, 0.022) 40%,
        transparent 75%
    );
    z-index: -1;
}

/* ---------------------------------------------------------
   22b. Olivo SVG en el hero · pieza de marca propia
   --------------------------------------------------------- */
.ot-olive-tree {
    position: absolute;
    left: -180px;
    top: -60px;
    width: 580px;
    height: 780px;
    z-index: -1;
    pointer-events: none;
    opacity: 0.72;
    filter:
        drop-shadow(0 30px 60px rgba(0, 0, 0, 0.55))
        drop-shadow(0 0 40px rgba(88, 122, 72, 0.18));
}

.ot-tree-sway {
    transform-origin: 50% 100%;
    animation: otTreeSway 9.5s ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes otTreeSway {
    0%   { transform: rotate(-1.4deg); }
    100% { transform: rotate(1.6deg); }
}

/* Con ~440 hojas, el balanceo global ya genera el efecto vivo;
   un pulse de saturación al grupo entero añade respiración sin matar el render. */
.ot-leaves {
    animation: otLeavesBreath 8s ease-in-out infinite alternate;
}
@keyframes otLeavesBreath {
    0%   { filter: saturate(0.9)  brightness(0.95); }
    100% { filter: saturate(1.15) brightness(1.05); }
}

.ot-olives {
    filter:
        drop-shadow(0 0 5px rgba(212, 175, 90, 0.85))
        drop-shadow(0 0 14px rgba(212, 175, 90, 0.45));
    animation: otOlivePulse 4.2s ease-in-out infinite alternate;
}
@keyframes otOlivePulse {
    0%   { filter: drop-shadow(0 0 5px rgba(212, 175, 90, 0.7))  drop-shadow(0 0 12px rgba(212, 175, 90, 0.32)); }
    100% { filter: drop-shadow(0 0 8px rgba(240, 221, 164, 0.95)) drop-shadow(0 0 20px rgba(212, 175, 90, 0.55)); }
}

/* En pantallas pequeñas, el olivo se reduce y se desplaza fuera para no estorbar */
@media (max-width: 920px) {
    .ot-olive-tree {
        width: 360px;
        height: 480px;
        left: -200px;
        opacity: 0.45;
    }
}
@media (max-width: 620px) {
    .ot-olive-tree {
        display: none;
    }
}

/* ---------------------------------------------------------
   22c. Eyebrows · emblema "O" dorado antes del texto
   (presencia de marca constante en cada sección)
   --------------------------------------------------------- */
.eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
}
.eyebrow::before {
    content: "";
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-image: url("../img/o-emblem.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0 0 6px rgba(212, 175, 90, 0.55));
}

/* ---------------------------------------------------------
   22d. Definition grid · 3 paneles para Onboarding/Olivia/Temporada
   --------------------------------------------------------- */
.definition-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 48px;
}
.definition-card {
    min-height: 340px;
    padding: 34px;
    border: 1px solid rgba(212, 175, 90, 0.16);
    border-radius: var(--radius-xl);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
        radial-gradient(circle at top right, rgba(155, 181, 113, 0.10), transparent 45%);
    backdrop-filter: blur(8px) saturate(1.18);
    -webkit-backdrop-filter: blur(8px) saturate(1.18);
    position: relative;
    overflow: hidden;
    transition:
        transform   0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 0.32s ease,
        box-shadow  0.32s ease;
    box-shadow:
        0 1px 0 rgba(240, 221, 164, 0.18) inset,
        0 3px 0 rgba(255, 246, 207, 0.05) inset,
        0 -1px 0 rgba(0, 0, 0, 0.55) inset,
        0 1px 0 rgba(255, 246, 207, 0.05),
        0 18px 38px rgba(0, 0, 0, 0.38),
        0 36px 84px rgba(0, 0, 0, 0.45),
        0 0 60px rgba(212, 175, 90, 0.06);
}
.definition-card h3 {
    margin: 0 0 18px;
    font-size: 1.7rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    /* Gradiente metálico, mismo tratamiento que h2 de section header */
    background-image: linear-gradient(
        172deg,
        #FFFCF2 0%,
        #F2EFE6 38%,
        #D9D4C4 70%,
        #B5B0A2 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: 0 2px 24px rgba(255, 246, 207, 0.06);
    position: relative;
    padding-bottom: 14px;
}
.definition-card h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 56px;
    height: 2px;
    background: linear-gradient(
        90deg,
        rgba(240, 221, 164, 0.95) 0%,
        rgba(212, 175, 90, 0.85) 50%,
        rgba(212, 175, 90, 0)   100%
    );
    box-shadow:
        0 0 12px rgba(212, 175, 90, 0.5),
        0 0 4px  rgba(240, 221, 164, 0.65);
}
.definition-card p {
    margin: 0;
    font-size: 0.99rem;
    line-height: 1.65;
}
.definition-card:hover {
    transform: translateY(-12px);
    border-color: rgba(212, 175, 90, 0.45);
    box-shadow:
        0 1px 0 rgba(240, 221, 164, 0.20) inset,
        0 -1px 0 rgba(0, 0, 0, 0.65) inset,
        0 48px 120px rgba(0, 0, 0, 0.55),
        0 0 90px rgba(212, 175, 90, 0.22),
        0 0 24px rgba(240, 221, 164, 0.10);
}

@media (max-width: 1050px) {
    .definition-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------
   22e. Watermark "O" arquitectónica · filigrana de Origen
   --------------------------------------------------------- */
.ot-watermark-o {
    position: absolute;
    top: 50%;
    right: -120px;
    width: 720px;
    height: 720px;
    transform: translateY(-50%);
    opacity: 0.055;
    pointer-events: none;
    z-index: -1;
    filter: drop-shadow(0 0 80px rgba(212, 175, 90, 0.4));
}
.ot-watermark-o img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.story-section {
    position: relative;
    overflow: hidden;
}
@media (max-width: 920px) {
    .ot-watermark-o {
        width: 480px;
        height: 480px;
        right: -180px;
        opacity: 0.04;
    }
}

/* ---------------------------------------------------------
   22. Cards · embossing 3D real (multi-capa)
   --------------------------------------------------------- */
.feature-card,
.process-card,
.pillar-card,
.module-grid article,
.timeline-panel article,
.comparison-grid article,
.trace-grid article,
.network-grid article,
.demo-card,
.cost-levels article {
    box-shadow:
        /* Inset top — luz captada arriba */
        0 1px 0 rgba(240, 221, 164, 0.18) inset,
        0 3px 0 rgba(255, 246, 207, 0.05) inset,
        /* Inset bottom — recesión */
        0 -1px 0 rgba(0, 0, 0, 0.55) inset,
        /* Outer rim sutil */
        0 1px 0 rgba(255, 246, 207, 0.05),
        /* Drop shadow apilado para profundidad */
        0 18px 38px rgba(0, 0, 0, 0.38),
        0 36px 84px rgba(0, 0, 0, 0.45),
        /* Halo dorado ambiente */
        0 0 60px rgba(212, 175, 90, 0.06);
}

/* ---------------------------------------------------------
   22f. Panel step · número de paso encima del icono
   --------------------------------------------------------- */
.panel-step {
    display: block;
    color: var(--ot-gold-soft);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin: 0 0 16px;
    line-height: 1;
}

/* Espaciado entre párrafos consecutivos dentro de cards */
.process-card p + p,
.definition-card p + p,
.pillar-card p + p,
.feature-card p + p,
.promise-card p + p,
.text-panel p + p,
.story-panel p + p {
    margin-top: 14px;
}

/* CTA dentro de paneles grandes — separación con el texto */
.promise-card > .btn {
    margin-top: 30px;
}

/* ---------------------------------------------------------
   Olivia · grid 2×2 con texto full-width arriba
   Row 1: texto (spans both cols) + banner Olivia overlapping right
   Row 2: esquema (left) | screenshot (right)
   --------------------------------------------------------- */
.olivia-card.olivia-card--enhanced {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    column-gap: clamp(40px, 5vw, 64px);
    row-gap: clamp(28px, 3.5vw, 48px);
    align-items: start;
    position: relative;
}

.olivia-cell {
    position: relative;
    z-index: 2;
    min-width: 0;
}

/* Titular · row 1, columna izquierda */
.olivia-title {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
}

/* Banner Olivia · row 1, columna derecha */
.olivia-banner-wrap {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    z-index: 3;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    position: relative;
}

/* Shimmer dorado que recorre la silueta de Olivia + logo
   Pseudo-elemento posicionado y escalado igual que la imagen,
   mascarado con la misma silueta para que el destello solo
   aparezca sobre Olivia y el logo, no en el espacio transparente. */
.olivia-banner-wrap::after,
.olivia-hero-banner::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    max-width: 720px;
    aspect-ratio: 3 / 2;
    pointer-events: none;
    z-index: 2;

    background: linear-gradient(
        115deg,
        transparent 35%,
        rgba(255, 250, 220, 0.55) 47%,
        rgba(255, 255, 255, 0.95) 50%,
        rgba(255, 250, 220, 0.55) 53%,
        transparent 65%
    );
    background-size: 220% 100%;
    background-position: -80% 0;
    background-repeat: no-repeat;

    -webkit-mask-image: url("../img/oliviaYlogo-transparent.png");
    mask-image: url("../img/oliviaYlogo-transparent.png");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: right top;
    mask-position: right top;

    transform-origin: right top;
    mix-blend-mode: screen;

    animation:
        otOliviaFloat 7s ease-in-out infinite alternate,
        otOliviaShine 5s ease-in-out infinite;
}

@keyframes otOliviaShine {
    0%, 100% { background-position: -80% 0; opacity: 0; }
    20%      { opacity: 1; }
    50%      { background-position: 180% 0; opacity: 1; }
    80%      { opacity: 1; }
}

/* Body · row 2, ancho completo (separador entre titular/imagen y flow/screen) */
.olivia-body {
    grid-column: 1 / -1;
    grid-row: 2;
}
.olivia-body > .btn {
    margin-top: 26px;
}

.olivia-flow-wrap {
    grid-column: 1;
    grid-row: 3;
}

.olivia-screen-wrap {
    grid-column: 2;
    grid-row: 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.olivia-banner {
    width: 100%;
    max-width: 720px;
    height: auto;
    display: block;
    margin: 0;
    transform-origin: right top;
    filter:
        drop-shadow(0 18px 32px rgba(0, 0, 0, 0.55))
        drop-shadow(0 0 26px rgba(212, 175, 90, 0.30))
        drop-shadow(0 0 6px rgba(240, 221, 164, 0.4));
    animation: otOliviaFloat 7s ease-in-out infinite alternate;
}
@keyframes otOliviaFloat {
    0%   { transform: translateY(25px) scale(1.44); }
    100% { transform: translateY(17px) scale(1.44); }
}

.olivia-still {
    width: 100%;
    max-width: 540px;
    aspect-ratio: 16 / 10;
}
.olivia-still img {
    object-position: left center;
}

@media (max-width: 1050px) {
    .olivia-card.olivia-card--enhanced {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    .olivia-title,
    .olivia-banner-wrap,
    .olivia-body,
    .olivia-flow-wrap,
    .olivia-screen-wrap {
        grid-column: 1;
        grid-row: auto;
    }
}
@media (max-width: 700px) {
    .olivia-banner {
        max-width: 380px;
    }
}

/* ---------------------------------------------------------
   Onboarding · timeline-panel reconvertido a grid 3×2
   --------------------------------------------------------- */
.timeline-panel {
    grid-template-columns: repeat(3, 1fr);
}

/* Trazabilidad · trace-grid de 4 a 3 columnas */
.trace-grid {
    grid-template-columns: repeat(3, 1fr);
}

/* OlivoConecTronic · network-grid de 5 a 4 columnas
   (eliminado el panel "Market" — el market es transversal a los 4 niveles) */
.network-grid {
    grid-template-columns: repeat(4, 1fr);
}

/* ---------------------------------------------------------
   Hero variant · una sola columna, para páginas internas
   (sin orbe de logo; el orbe + olivo solo van en la home)
   --------------------------------------------------------- */
.hero.hero--simple {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 60px;
    padding-bottom: 100px;
}
.hero.hero--simple .hero__content {
    max-width: 920px;
}

/* ---------------------------------------------------------
   Página Olivia · hero 2 columnas (título + banner Olivia)
   --------------------------------------------------------- */
.page-olivia .hero {
    min-height: auto;
    padding-top: 40px;
    padding-bottom: 80px;
}

.olivia-hero-banner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
}
/* El .olivia-banner ya tiene su CSS con scale 1.44 + drop-shadows + animación
   otOliviaFloat — se reutiliza tal cual desde la home */

/* ---------------------------------------------------------
   Blog público · lista de posts (cards) + single post
   --------------------------------------------------------- */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    margin-top: 40px;
}
@media (max-width: 920px) {
    .blog-grid { grid-template-columns: 1fr; }
}

.blog-card {
    border: 1px solid rgba(212, 175, 90, 0.16);
    border-radius: 22px;
    overflow: hidden;
    background:
        linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.018));
    backdrop-filter: blur(8px) saturate(1.10);
    transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
                border-color 0.32s ease,
                box-shadow 0.32s ease;
    box-shadow:
        0 1px 0 rgba(240, 221, 164, 0.14) inset,
        0 18px 40px rgba(0, 0, 0, 0.35);
}
.blog-card:hover {
    transform: translateY(-8px);
    border-color: rgba(212, 175, 90, 0.42);
    box-shadow:
        0 1px 0 rgba(240, 221, 164, 0.18) inset,
        0 36px 100px rgba(0, 0, 0, 0.55),
        0 0 70px rgba(212, 175, 90, 0.18);
}
.blog-card__link {
    display: block;
    color: inherit;
    text-decoration: none;
}
.blog-card__cover {
    aspect-ratio: 16 / 10;
    background:
        radial-gradient(circle at 30% 20%, rgba(155, 181, 113, 0.16), transparent 60%),
        linear-gradient(145deg, rgba(20, 36, 30, 0.7), rgba(10, 20, 16, 0.85));
    overflow: hidden;
}
.blog-card__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.blog-card__cover--placeholder {
    background-image:
        radial-gradient(circle at center, rgba(212, 175, 90, 0.10), transparent 60%),
        linear-gradient(145deg, rgba(20, 36, 30, 0.60), rgba(10, 20, 16, 0.80));
}
.blog-card__body {
    padding: 24px 26px 28px;
}
.blog-card__date {
    color: var(--ot-gold-soft);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 0 0 12px;
}
.blog-card h3 {
    font-size: 1.45rem;
    margin: 0 0 12px;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--fg-primary);
}
.blog-card__excerpt {
    color: var(--fg-secondary);
    font-size: 0.96rem;
    line-height: 1.55;
    margin: 0 0 18px;
}
.blog-card__cta {
    color: var(--ot-gold-soft);
    font-weight: 700;
    font-size: 0.92rem;
}

/* ----- Single post ----- */
.blog-post {
    width: min(820px, calc(100% - 40px));
    margin: 0 auto;
    padding: 60px 0 80px;
}
.blog-post__hero { margin-bottom: 36px; }
.blog-post__hero-inner { text-align: left; }
.blog-post__hero h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.1;
    letter-spacing: -0.04em;
    margin: 14px 0 18px;
    background-image: linear-gradient(172deg, #FFFCF2, #F2EFE6 40%, #D9D4C4 75%, #B5B0A2);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.blog-post__lead {
    color: var(--fg-secondary);
    font-size: 1.18rem;
    line-height: 1.6;
    margin: 0;
}
.blog-post__cover {
    margin: 0 0 40px;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(212, 175, 90, 0.20);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.blog-post__cover img {
    width: 100%;
    height: auto;
    display: block;
}
.blog-post__body {
    color: var(--fg-secondary);
    font-size: 1.08rem;
    line-height: 1.8;
}
.blog-post__body h2,
.blog-post__body h3 {
    color: var(--fg-primary);
    margin-top: 2em;
    letter-spacing: -0.01em;
}
.blog-post__body h2 { font-size: 1.7rem; }
.blog-post__body h3 { font-size: 1.35rem; }
.blog-post__body p  { margin-bottom: 1.4em; }
.blog-post__body ul,
.blog-post__body ol { padding-left: 1.4em; margin-bottom: 1.4em; }
.blog-post__body li { margin-bottom: 0.4em; }
.blog-post__body a {
    color: var(--ot-gold-soft);
    border-bottom: 1px solid rgba(212, 175, 90, 0.40);
}
.blog-post__body img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    margin: 1.6em 0;
}
.blog-post__body blockquote {
    margin: 1.6em 0;
    padding: 12px 22px;
    border-left: 3px solid var(--ot-gold-soft);
    color: var(--fg-primary);
    font-style: italic;
}

.blog-post__back {
    display: inline-block;
    margin: 40px 0 0;
    color: var(--ot-gold-soft);
    font-weight: 700;
}

/* ----- Comentarios (vista pública) ----- */
.blog-comments {
    margin-top: 64px;
    padding-top: 40px;
    border-top: 1px solid rgba(212, 175, 90, 0.18);
}
.blog-comments h2 {
    font-size: 1.6rem;
    margin: 0 0 26px;
    color: var(--fg-primary);
    background-image: linear-gradient(172deg, #FFFCF2, #F2EFE6 50%, #D9D4C4);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.blog-comments__empty {
    color: var(--fg-muted);
    font-style: italic;
    margin: 0 0 28px;
}
.blog-comments__list {
    list-style: none;
    margin: 0 0 40px;
    padding: 0;
    display: grid;
    gap: 14px;
}
.blog-comment {
    border: 1px solid rgba(212, 175, 90, 0.14);
    border-radius: 14px;
    padding: 18px 22px;
    background: rgba(0, 0, 0, 0.28);
}
.blog-comment--admin {
    border-color: rgba(212, 175, 90, 0.40);
    background: rgba(212, 175, 90, 0.05);
}
.blog-comment__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    margin-bottom: 8px;
}
.blog-comment__head strong { color: var(--fg-primary); }
.blog-comment__head time { color: var(--fg-muted); font-size: 0.8rem; margin-left: auto; }
.blog-comment__badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--ot-gold-soft), var(--ot-gold));
    color: #1A1205;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}
.blog-comment p {
    color: var(--fg-secondary);
    margin: 0;
    line-height: 1.6;
}

/* ----- Form de comentario ----- */
.blog-comment-form {
    background: rgba(0, 0, 0, 0.30);
    border: 1px solid rgba(212, 175, 90, 0.18);
    border-radius: 18px;
    padding: 28px;
}
.blog-comment-form h3 {
    margin: 0 0 18px;
    font-size: 1.2rem;
    color: var(--fg-primary);
}
.blog-comment-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}
@media (max-width: 620px) {
    .blog-comment-form__row { grid-template-columns: 1fr; }
}
.blog-comment-form label {
    display: grid;
    gap: 6px;
}
.blog-comment-form label > span {
    color: var(--ot-gold-soft);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.blog-comment-form input,
.blog-comment-form textarea {
    width: 100%;
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.42);
    border: 1px solid rgba(212, 175, 90, 0.22);
    border-radius: 10px;
    color: var(--fg-primary);
    font-family: var(--font-main);
    font-size: 0.96rem;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.blog-comment-form textarea {
    margin-bottom: 14px;
    resize: vertical;
    line-height: 1.55;
}
.blog-comment-form input:focus,
.blog-comment-form textarea:focus {
    border-color: rgba(212, 175, 90, 0.55);
    background: rgba(0, 0, 0, 0.55);
}
.blog-comment-form button {
    margin-top: 6px;
}
.blog-comment-form__notice {
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 18px;
    font-size: 0.92rem;
}
.blog-comment-form__notice--ok {
    background: rgba(111, 191, 127, 0.10);
    border: 1px solid rgba(111, 191, 127, 0.32);
    color: #9BDCA7;
}
.blog-comment-form__notice--err {
    background: rgba(214, 106, 90, 0.10);
    border: 1px solid rgba(214, 106, 90, 0.32);
    color: #EE9A8D;
}

/* ---------------------------------------------------------
   Página Olivia · pasos del recorrido
   --------------------------------------------------------- */
.olivia-step {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 5vw, 72px);
    align-items: center;
    padding-top: clamp(40px, 5vw, 70px);
    padding-bottom: clamp(40px, 5vw, 70px);
}

/* Alternar: pasos pares tienen imagen a la izquierda, texto a la derecha */
.olivia-step:nth-of-type(even) .olivia-step__text {
    order: 2;
}
.olivia-step:nth-of-type(even) .olivia-step__image {
    order: 1;
}

.olivia-step__num {
    display: block;
    color: var(--ot-gold-soft);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

/* Icono premium grande para los pasos de la página de extras */
.extra-icon {
    width: 60px;
    height: 60px;
    display: block;
    margin-bottom: 22px;
    overflow: visible;
    filter:
        drop-shadow(0 0 18px rgba(212, 175, 90, 0.55))
        drop-shadow(0 8px 14px rgba(0, 0, 0, 0.45));
    transition: transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.olivia-step:hover .extra-icon {
    transform: translateY(-4px) scale(1.06);
}

.olivia-step h2 {
    margin-bottom: 22px;
}

.olivia-step__text > p {
    color: var(--fg-secondary);
    font-size: 1.05rem;
    line-height: 1.7;
}

.olivia-step__chain {
    margin-top: 18px;
    color: var(--ot-gold-soft) !important;
    font-style: italic;
    font-size: 0.98rem !important;
    border-left: 2px solid rgba(212, 175, 90, 0.45);
    padding-left: 18px;
    opacity: 0.92;
}

/* ----- Imagen del paso (placeholder elegante o imagen real clicable) ----- */
.olivia-step__image {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    aspect-ratio: 1600 / 793; /* coincide con el ratio de las capturas reales */
    border: 1px solid rgba(212, 175, 90, 0.20);
    background:
        radial-gradient(circle at 20% 20%, rgba(212, 175, 90, 0.08), transparent 50%),
        linear-gradient(145deg, rgba(20, 36, 30, 0.55), rgba(10, 20, 16, 0.65));
    box-shadow:
        0 1px 0 rgba(240, 221, 164, 0.10) inset,
        0 30px 80px rgba(0, 0, 0, 0.45),
        0 0 60px rgba(212, 175, 90, 0.06);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease, border-color 0.3s ease;
}

.olivia-step__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

/* Placeholder · cuando no hay imagen real todavía (mantiene aspect-ratio cuadrado) */
.olivia-step__image--placeholder {
    aspect-ratio: 16 / 10;
    display: grid;
    place-items: center;
    cursor: default;
}
/* Patrón sutil de cuadrícula sobre el placeholder, para que no se vea vacío */
.olivia-step__image--placeholder::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(212, 175, 90, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212, 175, 90, 0.06) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
}

.olivia-step__image-label {
    color: var(--ot-gold-soft);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: center;
    padding: 0 24px;
    text-shadow: 0 0 24px rgba(212, 175, 90, 0.4);
    z-index: 1;
}
.olivia-step__image-note {
    margin-top: 8px;
    color: var(--fg-muted);
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    z-index: 1;
}

/* Imagen real (clicable) — hover con elevación y halo dorado */
.olivia-step__image.is-clickable {
    cursor: zoom-in;
}
.olivia-step__image.is-clickable:hover {
    transform: translateY(-8px);
    border-color: rgba(212, 175, 90, 0.45);
    box-shadow:
        0 1px 0 rgba(240, 221, 164, 0.14) inset,
        0 48px 120px rgba(0, 0, 0, 0.55),
        0 0 90px rgba(212, 175, 90, 0.20);
}

/* ----- Modal lightbox para imágenes ampliadas ----- */
.ot-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(40px, 6vw, 80px);
    background: rgba(6, 11, 9, 0.92);
    backdrop-filter: blur(24px) saturate(0.9);
    -webkit-backdrop-filter: blur(24px) saturate(0.9);
    opacity: 0;
    transition: opacity 0.32s ease;
}
.ot-modal.is-open {
    display: flex;
    animation: otModalFadeIn 0.32s ease forwards;
}
@keyframes otModalFadeIn {
    to { opacity: 1; }
}
.ot-modal__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 16px;
    box-shadow:
        0 40px 120px rgba(0, 0, 0, 0.7),
        0 0 100px rgba(212, 175, 90, 0.18),
        0 1px 0 rgba(240, 221, 164, 0.12) inset;
    animation: otModalImgIn 0.42s cubic-bezier(0.2, 0.8, 0.2, 1.05);
}
@keyframes otModalImgIn {
    from { transform: scale(0.94); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}
.ot-modal__close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 52px;
    height: 52px;
    border: 1px solid rgba(212, 175, 90, 0.32);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(10px);
    color: var(--ot-gold-soft);
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.ot-modal__close:hover {
    transform: scale(1.08);
    background: rgba(212, 175, 90, 0.20);
    border-color: var(--ot-gold-soft);
}

@media (max-width: 920px) {
    .olivia-step {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .olivia-step:nth-of-type(even) .olivia-step__text {
        order: 1;
    }
    .olivia-step:nth-of-type(even) .olivia-step__image {
        order: 2;
    }
}

/* ---------------------------------------------------------
   Página OlivoConecTronic · grid de niveles con ejemplos
   --------------------------------------------------------- */
.net-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 48px;
}

.net-level {
    padding: clamp(24px, 2.5vw, 32px);
    border: 1px solid rgba(212, 175, 90, 0.18);
    border-radius: 24px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
        radial-gradient(circle at top right, rgba(155, 181, 113, 0.12), transparent 45%);
    backdrop-filter: blur(8px) saturate(1.10);
    -webkit-backdrop-filter: blur(8px) saturate(1.10);
    box-shadow:
        0 1px 0 rgba(240, 221, 164, 0.16) inset,
        0 -1px 0 rgba(0, 0, 0, 0.55) inset,
        0 18px 38px rgba(0, 0, 0, 0.36),
        0 36px 84px rgba(0, 0, 0, 0.42),
        0 0 60px rgba(212, 175, 90, 0.05);
    transition:
        transform   0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 0.32s ease,
        box-shadow  0.32s ease;
}

.net-level:hover {
    transform: translateY(-8px);
    border-color: rgba(212, 175, 90, 0.40);
    box-shadow:
        0 1px 0 rgba(240, 221, 164, 0.18) inset,
        0 -1px 0 rgba(0, 0, 0, 0.55) inset,
        0 38px 100px rgba(0, 0, 0, 0.50),
        0 0 80px rgba(212, 175, 90, 0.18);
}

.net-level__tag {
    display: inline-block;
    color: var(--ot-gold-soft);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.net-level h3 {
    font-size: 1.45rem;
    margin: 0 0 12px;
    color: var(--fg-primary);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.net-level > p {
    color: var(--fg-secondary);
    font-size: 0.96rem;
    line-height: 1.55;
    margin: 0 0 18px;
}

.net-level__sample {
    color: var(--fg-muted) !important;
    font-size: 0.78rem !important;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 700;
    margin-bottom: 10px !important;
}

.net-level__posts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.net-post {
    padding: 14px 18px;
    border: 1px solid rgba(212, 175, 90, 0.14);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.32);
    color: var(--fg-secondary);
    font-style: italic;
    font-size: 0.92rem;
    line-height: 1.5;
    transition: border-color 0.25s ease, background 0.25s ease;
}
.net-post:hover {
    border-color: rgba(212, 175, 90, 0.30);
    background: rgba(0, 0, 0, 0.42);
}

@media (max-width: 1050px) {
    .net-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------
   Calculadora interactiva · configurador 2 columnas
   --------------------------------------------------------- */
.calc-config {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: clamp(36px, 4vw, 64px);
    margin-top: 48px;
    padding: clamp(34px, 4vw, 56px);
    border: 1px solid rgba(212, 175, 90, 0.22);
    border-radius: 32px;
    background:
        linear-gradient(180deg, rgba(20, 36, 30, 0.55), rgba(10, 20, 16, 0.50));
    backdrop-filter: blur(16px) saturate(1.20);
    -webkit-backdrop-filter: blur(16px) saturate(1.20);
    box-shadow:
        0 1px 0 rgba(240, 221, 164, 0.16) inset,
        0 -1px 0 rgba(0, 0, 0, 0.55) inset,
        0 30px 80px rgba(0, 0, 0, 0.50),
        0 0 90px rgba(212, 175, 90, 0.10);
    position: relative;
}

/* ---- Campos del formulario ---- */
.calc-field {
    margin-bottom: 30px;
}
.calc-field:last-child { margin-bottom: 0; }

.calc-field__label {
    display: block;
    color: var(--ot-gold-soft);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    margin: 0 0 12px;
}

.calc-field__input {
    width: 100%;
    padding: 16px 20px;
    border: 1px solid rgba(212, 175, 90, 0.22);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.32);
    color: var(--fg-primary);
    font-family: var(--font-main);
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    font-feature-settings: "tnum";
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    outline: none;
}
.calc-field__input::placeholder {
    color: rgba(168, 175, 166, 0.55);
    font-weight: 400;
}
.calc-field__input:hover {
    border-color: rgba(212, 175, 90, 0.36);
}
.calc-field__input:focus {
    border-color: rgba(212, 175, 90, 0.60);
    background: rgba(0, 0, 0, 0.42);
    box-shadow: 0 0 0 4px rgba(212, 175, 90, 0.14);
}
/* Quitar las flechitas del number input para look más limpio */
.calc-field__input::-webkit-outer-spin-button,
.calc-field__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.calc-field__input[type="number"] { -moz-appearance: textfield; }

/* ---- Lista de extras con checkboxes custom ---- */
.calc-extras {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.calc-extra {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border: 1px solid rgba(212, 175, 90, 0.16);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.22);
    cursor: pointer;
    transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
    user-select: none;
}
.calc-extra:hover {
    border-color: rgba(212, 175, 90, 0.42);
    background: rgba(0, 0, 0, 0.32);
    transform: translateX(4px);
}
.calc-extra input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.calc-extra__check {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: 1.5px solid rgba(212, 175, 90, 0.45);
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.45);
    display: grid;
    place-items: center;
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    position: relative;
}
.calc-extra__check::after {
    content: "✓";
    color: #1A1205;
    font-weight: 900;
    font-size: 14px;
    line-height: 1;
    transform: scale(0);
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1.4);
}
.calc-extra__name {
    color: var(--fg-primary);
    font-size: 1rem;
    font-weight: 500;
}
/* Estado checked */
.calc-extra:has(input:checked) {
    border-color: rgba(212, 175, 90, 0.55);
    background: rgba(212, 175, 90, 0.06);
}
.calc-extra:has(input:checked) .calc-extra__check {
    background: linear-gradient(180deg, #F0DDA4, #D4AF5A 50%, #957029);
    border-color: var(--ot-gold-soft);
    box-shadow:
        0 0 14px rgba(212, 175, 90, 0.45),
        0 2px 4px rgba(0, 0, 0, 0.4);
}
.calc-extra:has(input:checked) .calc-extra__check::after {
    transform: scale(1);
}

/* Foco visible para teclado */
.calc-extra input:focus-visible + .calc-extra__check {
    box-shadow: 0 0 0 4px rgba(212, 175, 90, 0.30);
}

/* ---- Panel resumen ---- */
.calc-config__summary {
    border-left: 1px solid rgba(212, 175, 90, 0.16);
    padding-left: clamp(28px, 3vw, 48px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.calc-summary__label {
    margin: 0 0 14px;
    color: var(--ot-gold-soft);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.calc-summary__price {
    margin: 0 0 18px;
    line-height: 1;
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.calc-summary__num {
    font-size: clamp(3.6rem, 7.5vw, 5.6rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
    background: linear-gradient(
        180deg,
        #FFFCF2 0%,
        #F0DDA4 24%,
        #D4AF5A 60%,
        #957029 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: 0 0 32px rgba(212, 175, 90, 0.32);
    font-feature-settings: "tnum";
    display: inline-block;
    transform-origin: left bottom;
}
@keyframes calcPriceFlash {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.07); }
    100% { transform: scale(1); }
}

.calc-summary__suffix {
    color: var(--ot-muted);
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.calc-summary__breakdown {
    margin: 0 0 32px;
    color: var(--ot-muted);
    font-size: 0.95rem;
    letter-spacing: 0.01em;
}

.calc-summary__cta {
    align-self: flex-start;
}

/* ---- Responsive ---- */
@media (max-width: 920px) {
    .calc-config {
        grid-template-columns: 1fr;
    }
    .calc-config__summary {
        border-left: none;
        border-top: 1px solid rgba(212, 175, 90, 0.16);
        padding-left: 0;
        padding-top: 32px;
    }
}

/* ---------------------------------------------------------
   Origen · cita personal del fundador
   --------------------------------------------------------- */
.origen-quote {
    position: relative;
    margin: 0;
    padding: 14px 0 0 0;
    font-style: italic;
    font-size: 1.08rem;
    line-height: 1.7;
}
.origen-quote::before {
    content: "\AB";
    position: absolute;
    top: -48px;
    left: -10px;
    font-size: 6.5rem;
    line-height: 1;
    color: var(--ot-gold-soft);
    opacity: 0.55;
    font-style: normal;
    font-family: Georgia, "Times New Roman", serif;
    pointer-events: none;
    text-shadow: 0 0 24px rgba(212, 175, 90, 0.35);
}
.origen-quote p {
    color: var(--fg-primary);
    margin-bottom: 0;
}
.origen-quote cite {
    display: block;
    margin-top: 32px;
    text-align: right;
    font-style: normal;
    color: var(--ot-gold-soft);
    letter-spacing: 0.05em;
    font-size: 1rem;
}
.origen-quote cite strong {
    color: var(--ot-gold-soft);
    font-weight: 700;
    letter-spacing: 0.06em;
}

/* ---------------------------------------------------------
   Olivo miniatura · marca de identidad junto a títulos
   --------------------------------------------------------- */
.title-leaf {
    width: 44px;
    height: 44px;
    display: inline-block;
    vertical-align: -10px;
    margin-right: 14px;
    /* Anular el text-fill-color: transparent del h2 para que el SVG se pinte */
    -webkit-text-fill-color: initial;
    color: initial;
    filter:
        drop-shadow(0 0 8px rgba(212, 175, 90, 0.40))
        drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}
/* Quitamos la línea horizontal decorativa que tenía sentido en
   secuencia lineal de 5 cards, no en 3×2 */
.timeline-panel article::before {
    display: none !important;
}
/* En tablet → 2 columnas (ya cubierto por la media query existente
   de home.css en max-width: 1150px), en móvil → 1 columna */

/* ---------------------------------------------------------
   23. Iconos custom de panel (sprite SVG inline en main)
   --------------------------------------------------------- */
.panel-icon {
    width: 46px;
    height: 46px;
    display: block;
    margin-bottom: 22px;
    overflow: visible;
    filter:
        drop-shadow(0 0 14px rgba(212, 175, 90, 0.55))
        drop-shadow(0 6px 12px rgba(0, 0, 0, 0.40));
    transition: transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.panel-icon use {
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Cuando el icono está en una card que se hace tilt, escala muy ligeramente */
article:hover > .panel-icon,
.definition-card:hover > .panel-icon,
.process-card:hover  > .panel-icon,
.pillar-card:hover   > .panel-icon {
    transform: translateZ(20px) scale(1.06);
}

/* Reset de margin-top en h3/strong cuando van precedidos del icono */
.panel-icon + h3,
.panel-icon + strong {
    margin-top: 0 !important;
}

/* En módulos (cards más compactas) icono más pequeño */
.module-grid .panel-icon {
    width: 36px;
    height: 36px;
    margin-bottom: 16px;
}

/* ---------------------------------------------------------
   24. Zonas · tinte inverso al fondo
   Top oscuro (verde profundo casi negro) → fondo claro
   Bottom verde oliva → fondo negro
   --------------------------------------------------------- */
.zone-1 { --zone-tint: rgba(7, 13, 8, 0.78); }
.zone-2 { --zone-tint: rgba(11, 22, 17, 0.72); }
.zone-3 { --zone-tint: rgba(17, 32, 25, 0.65); }
.zone-4 { --zone-tint: rgba(25, 44, 32, 0.60); }
.zone-5 { --zone-tint: rgba(37, 56, 36, 0.58); }

[class*="zone-"] .feature-card,
[class*="zone-"] .pillar-card,
[class*="zone-"] .definition-card,
[class*="zone-"] .process-card,
[class*="zone-"] .module-grid article,
[class*="zone-"] .timeline-panel article,
[class*="zone-"] .comparison-grid article,
[class*="zone-"] .trace-grid article,
[class*="zone-"] .network-grid article,
[class*="zone-"] .demo-card,
[class*="zone-"] .cost-levels article,
[class*="zone-"] .text-panel,
[class*="zone-"] .promise-card,
[class*="zone-"] .olivia-card,
[class*="zone-"] .cost-card,
[class*="zone-"] .wide-visual-block,
[class*="zone-"] .story-panel,
[class*="zone-"] .definition-panel {
    background-color: var(--zone-tint);
}
.final-cta-section.zone-5 {
    background-color: var(--zone-tint);
}

/* ---------------------------------------------------------
   25. Olivo SVG · profundidad 3D real
   --------------------------------------------------------- */
.hero {
    perspective: 1500px;
}
.ot-olive-tree {
    transform-style: preserve-3d;
    transform: rotateY(-12deg) rotateX(2deg);
}
.ot-tree-sway {
    transform-style: preserve-3d;
}
.ot-trunk,
.ot-trunk-ridge {
    transform: translateZ(-12px);
}
.ot-branches {
    transform: translateZ(0);
    transform-style: preserve-3d;
}
.ot-leaves {
    transform: translateZ(22px);
    transform-style: preserve-3d;
}
.ot-olives {
    transform: translateZ(32px);
    transform-style: preserve-3d;
}

/* En táctil/móvil quitamos el tilt 3D para evitar peso visual y de render */
@media (hover: none), (pointer: coarse) {
    .ot-olive-tree {
        transform: none;
    }
    .ot-trunk, .ot-trunk-ridge,
    .ot-branches, .ot-leaves, .ot-olives {
        transform: none;
    }
}

/* ---------------------------------------------------------
   11. Reduced motion · accesibilidad
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .ot-progress,
    .ot-cursor-halo,
    .site-header.is-scrolled::before,
    h1 span,
    .ot-aura-ring,
    .btn--primary,
    .header-cta,
    .ot-tree-sway,
    .ot-leaves,
    .ot-olives,
    .olivia-banner,
    .olivia-banner-wrap::after,
    .olivia-hero-banner::after {
        animation: none !important;
        transition: none !important;
    }
    .js .hero__content .eyebrow,
    .js .hero__content h1,
    .js .hero__content .hero__text,
    .js .hero__content .hero__actions,
    .js .hero__visual {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
    .olivia-flow::before {
        transform: scaleY(1) !important;
        transition: none !important;
    }
    .olivia-flow div::before {
        transform: translateY(-50%) scale(1) !important;
        transition: none !important;
    }
    .section__header h2::after,
    .promise-card h2::after,
    .olivia-card h2::after,
    .cost-card h2::after,
    .final-cta-section h2::after,
    .wide-visual-block__text h3::after,
    .olivia-step h2::after {
        transform: scaleX(1) !important;
        transition: none !important;
    }
}

/* =====================================================================
   LISTA DE ESPERA · página waitlist
   ===================================================================== */

/* ---- Bloque de ventajas (perks) ---- */
.wl-perks {
    list-style: none;
    margin: 48px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}
.wl-perks li {
    padding: 24px 26px;
    border: 1px solid rgba(212, 175, 90, 0.18);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(20, 36, 30, 0.55), rgba(10, 20, 16, 0.45));
    backdrop-filter: blur(12px) saturate(1.10);
    -webkit-backdrop-filter: blur(12px) saturate(1.10);
    box-shadow:
        0 1px 0 rgba(240, 221, 164, 0.10) inset,
        0 18px 50px rgba(0, 0, 0, 0.40);
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.wl-perks li:hover {
    border-color: rgba(212, 175, 90, 0.42);
    transform: translateY(-3px);
    box-shadow:
        0 1px 0 rgba(240, 221, 164, 0.14) inset,
        0 28px 70px rgba(0, 0, 0, 0.50),
        0 0 60px rgba(212, 175, 90, 0.14);
}
.wl-perks__title {
    margin: 0 0 8px;
    color: var(--ot-gold-soft);
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.wl-perks li p:not(.wl-perks__title) {
    margin: 0;
    color: var(--fg-primary);
    font-size: 1rem;
    line-height: 1.55;
}
.wl-foot {
    margin: 36px 0 0;
    color: var(--ot-muted);
    font-size: 0.95rem;
    font-style: italic;
    max-width: 760px;
}

/* ---- Pasos del proceso (1 · 2 · 3) ---- */
.wl-steps {
    list-style: none;
    margin: 48px 0 0;
    padding: 0;
    display: grid;
    gap: 18px;
    counter-reset: wlstep;
}
.wl-steps li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 28px;
    align-items: start;
    padding: 28px 32px;
    border: 1px solid rgba(212, 175, 90, 0.20);
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(20, 36, 30, 0.55), rgba(10, 20, 16, 0.45));
    backdrop-filter: blur(12px) saturate(1.10);
    -webkit-backdrop-filter: blur(12px) saturate(1.10);
    box-shadow:
        0 1px 0 rgba(240, 221, 164, 0.10) inset,
        0 22px 60px rgba(0, 0, 0, 0.40);
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.wl-steps li:hover {
    border-color: rgba(212, 175, 90, 0.42);
    transform: translateY(-3px);
    box-shadow:
        0 1px 0 rgba(240, 221, 164, 0.14) inset,
        0 32px 80px rgba(0, 0, 0, 0.50),
        0 0 70px rgba(212, 175, 90, 0.16);
}
.wl-steps__num {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(180deg, #F0DDA4, #D4AF5A 50%, #957029);
    color: #0E1B16;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    box-shadow:
        0 0 22px rgba(212, 175, 90, 0.40),
        0 4px 14px rgba(0, 0, 0, 0.50);
    flex-shrink: 0;
}
.wl-steps__title {
    margin: 4px 0 10px;
    color: var(--ot-gold-soft);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.wl-steps li > div p:not(.wl-steps__title) {
    margin: 0;
    color: var(--fg-primary);
    font-size: 1rem;
    line-height: 1.6;
}
.wl-steps li > div p strong {
    color: var(--ot-gold-soft);
    font-weight: 600;
}
@media (max-width: 600px) {
    .wl-steps li {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 24px 24px;
    }
}

/* ---- Formulario ---- */
.wl-form {
    margin-top: 48px;
    padding: clamp(28px, 4vw, 56px);
    border: 1px solid rgba(212, 175, 90, 0.22);
    border-radius: 32px;
    background:
        linear-gradient(180deg, rgba(20, 36, 30, 0.55), rgba(10, 20, 16, 0.50));
    backdrop-filter: blur(16px) saturate(1.20);
    -webkit-backdrop-filter: blur(16px) saturate(1.20);
    box-shadow:
        0 1px 0 rgba(240, 221, 164, 0.16) inset,
        0 -1px 0 rgba(0, 0, 0, 0.55) inset,
        0 30px 80px rgba(0, 0, 0, 0.50),
        0 0 90px rgba(212, 175, 90, 0.10);
}

.wl-fieldset {
    border: none;
    padding: 0;
    margin: 0 0 44px;
}
.wl-fieldset:last-of-type {
    margin-bottom: 32px;
}
.wl-fieldset__legend {
    color: var(--ot-gold-soft);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 0;
    margin: 0 0 22px;
    border-bottom: 1px solid rgba(212, 175, 90, 0.18);
    padding-bottom: 14px;
    width: 100%;
    display: block;
}

.wl-grid {
    display: grid;
    gap: 22px;
}
.wl-grid--2 {
    grid-template-columns: 1fr 1fr;
}

.wl-field {
    margin-bottom: 22px;
}
.wl-fieldset .wl-grid + .wl-field,
.wl-fieldset .wl-field + .wl-grid {
    margin-top: 22px;
}
.wl-fieldset > .wl-field:last-child,
.wl-fieldset > .wl-grid:last-child .wl-field {
    margin-bottom: 0;
}

.wl-label {
    display: block;
    color: var(--fg-primary);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    margin: 0 0 10px;
}
.wl-req {
    color: var(--ot-gold-soft);
    margin-left: 2px;
}
.wl-hint {
    color: var(--ot-muted);
    font-weight: 400;
    font-size: 0.85em;
    margin-left: 4px;
}
.wl-hint-text {
    margin: -4px 0 10px;
    color: var(--ot-muted);
    font-size: 0.86rem;
    line-height: 1.5;
}

.wl-input {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid rgba(212, 175, 90, 0.22);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.32);
    color: var(--fg-primary);
    font-family: var(--font-main);
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: -0.005em;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    outline: none;
    box-sizing: border-box;
}
.wl-input::placeholder {
    color: rgba(168, 175, 166, 0.50);
}
.wl-input:hover {
    border-color: rgba(212, 175, 90, 0.36);
}
.wl-input:focus {
    border-color: rgba(212, 175, 90, 0.60);
    background: rgba(0, 0, 0, 0.42);
    box-shadow: 0 0 0 4px rgba(212, 175, 90, 0.14);
}
.wl-input.is-invalid {
    border-color: rgba(216, 110, 90, 0.60);
    background: rgba(40, 12, 10, 0.35);
}
.wl-textarea {
    resize: vertical;
    min-height: 100px;
    font-family: var(--font-main);
}
.wl-error {
    margin: 8px 0 0;
    color: #E89880;
    font-size: 0.85rem;
}

/* ---- Radios custom ---- */
.wl-radio-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.wl-radio {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border: 1px solid rgba(212, 175, 90, 0.18);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.22);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
    user-select: none;
    color: var(--fg-primary);
    font-size: 0.95rem;
}
.wl-radio:hover {
    border-color: rgba(212, 175, 90, 0.42);
    background: rgba(0, 0, 0, 0.32);
}
.wl-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.wl-radio__dot {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 1.5px solid rgba(212, 175, 90, 0.45);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    display: grid;
    place-items: center;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}
.wl-radio__dot::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(180deg, #F0DDA4, #D4AF5A 50%, #957029);
    transform: scale(0);
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1.4);
}
.wl-radio:has(input:checked) {
    border-color: rgba(212, 175, 90, 0.55);
    background: rgba(212, 175, 90, 0.06);
}
.wl-radio:has(input:checked) .wl-radio__dot {
    border-color: var(--ot-gold-soft);
    box-shadow: 0 0 12px rgba(212, 175, 90, 0.35);
}
.wl-radio:has(input:checked) .wl-radio__dot::after {
    transform: scale(1);
}
.wl-radio input:focus-visible + .wl-radio__dot {
    box-shadow: 0 0 0 4px rgba(212, 175, 90, 0.30);
}

/* ---- Checkboxes custom ---- */
.wl-check-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.wl-check {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border: 1px solid rgba(212, 175, 90, 0.18);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.22);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
    user-select: none;
    color: var(--fg-primary);
    font-size: 0.95rem;
}
.wl-check:hover {
    border-color: rgba(212, 175, 90, 0.42);
    background: rgba(0, 0, 0, 0.32);
}
.wl-check input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.wl-check__box {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 1.5px solid rgba(212, 175, 90, 0.45);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.45);
    display: grid;
    place-items: center;
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    position: relative;
}
.wl-check__box::after {
    content: "✓";
    color: #1A1205;
    font-weight: 900;
    font-size: 13px;
    line-height: 1;
    transform: scale(0);
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1.4);
}
.wl-check:has(input:checked) {
    border-color: rgba(212, 175, 90, 0.55);
    background: rgba(212, 175, 90, 0.06);
}
.wl-check:has(input:checked) .wl-check__box {
    background: linear-gradient(180deg, #F0DDA4, #D4AF5A 50%, #957029);
    border-color: var(--ot-gold-soft);
    box-shadow:
        0 0 12px rgba(212, 175, 90, 0.40),
        0 2px 4px rgba(0, 0, 0, 0.4);
}
.wl-check:has(input:checked) .wl-check__box::after {
    transform: scale(1);
}
.wl-check input:focus-visible + .wl-check__box {
    box-shadow: 0 0 0 4px rgba(212, 175, 90, 0.30);
}

/* ---- Submit ---- */
.wl-submit {
    margin-top: 36px;
    padding-top: 32px;
    border-top: 1px solid rgba(212, 175, 90, 0.18);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
}
.wl-legal {
    margin: 0;
    color: var(--ot-muted);
    font-size: 0.85rem;
    line-height: 1.55;
    max-width: 640px;
}
.wl-btn {
    font-size: 1.05rem;
    padding: 16px 40px;
}

/* ---- Confirmación ---- */
.wl-success {
    max-width: 720px;
    margin: 24px auto 0;
    padding: clamp(40px, 5vw, 64px);
    border: 1px solid rgba(212, 175, 90, 0.32);
    border-radius: 32px;
    background:
        radial-gradient(circle at top, rgba(155, 181, 113, 0.10), transparent 60%),
        linear-gradient(180deg, rgba(20, 36, 30, 0.65), rgba(10, 20, 16, 0.55));
    backdrop-filter: blur(18px) saturate(1.25);
    -webkit-backdrop-filter: blur(18px) saturate(1.25);
    box-shadow:
        0 1px 0 rgba(240, 221, 164, 0.20) inset,
        0 30px 90px rgba(0, 0, 0, 0.55),
        0 0 120px rgba(212, 175, 90, 0.18);
    text-align: center;
}
.wl-success__icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #F0DDA4, #D4AF5A 55%, #957029);
    color: #0E1B16;
    box-shadow:
        0 0 32px rgba(212, 175, 90, 0.45),
        0 8px 24px rgba(0, 0, 0, 0.45);
}
.wl-success__icon svg {
    width: 38px;
    height: 38px;
}
.wl-success h2 {
    margin: 16px 0 18px;
}
.wl-success__text {
    margin: 0 0 14px;
    color: var(--fg-primary);
    font-size: 1.1rem;
    line-height: 1.6;
}
.wl-success__text strong {
    color: var(--ot-gold-soft);
    font-weight: 600;
}
.wl-success__small {
    margin: 0 0 32px;
    color: var(--ot-muted);
    font-size: 0.95rem;
    line-height: 1.55;
}
.wl-success__actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ---- Responsive ---- */
@media (max-width: 760px) {
    .wl-perks {
        grid-template-columns: 1fr;
    }
    .wl-grid--2 {
        grid-template-columns: 1fr;
    }
    .wl-radio-row {
        flex-direction: column;
        align-items: stretch;
    }
    .wl-radio {
        width: 100%;
    }
    .wl-check-row {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   FOOTER ampliado · brand + enlaces legales
   ===================================================================== */
.site-footer__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.site-footer__brand p {
    margin: 0;
}
.site-footer__legal {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 0.85rem;
}
.site-footer__legal a {
    color: var(--ot-muted);
    text-decoration: none;
    transition: color 0.2s;
}
.site-footer__legal a:hover {
    color: var(--ot-gold-soft);
}
.site-footer__sep {
    color: rgba(168, 175, 166, 0.30);
}

/* =====================================================================
   BANNER DE COOKIES
   ===================================================================== */
.ot-cookie-banner {
    position: fixed;
    left: 20px;
    right: 20px;
    bottom: 20px;
    max-width: 720px;
    margin: 0 auto;
    z-index: 9999;
    background: linear-gradient(180deg, rgba(20, 36, 30, 0.96), rgba(10, 20, 16, 0.96));
    border: 1px solid rgba(212, 175, 90, 0.42);
    border-radius: 16px;
    backdrop-filter: blur(16px) saturate(1.20);
    -webkit-backdrop-filter: blur(16px) saturate(1.20);
    box-shadow:
        0 1px 0 rgba(240, 221, 164, 0.16) inset,
        0 30px 80px rgba(0, 0, 0, 0.55),
        0 0 60px rgba(212, 175, 90, 0.18);
    padding: 18px 22px;
    transform: translateY(140%);
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.45s;
}
.ot-cookie-banner.is-visible {
    transform: translateY(0);
    opacity: 1;
}
.ot-cookie-banner.is-hidden {
    display: none;
}
.ot-cookie-banner__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    align-items: center;
}
.ot-cookie-banner__text {
    color: var(--fg-primary);
    font-size: 0.92rem;
    line-height: 1.55;
}
.ot-cookie-banner__text strong {
    color: var(--ot-gold-soft);
    display: block;
    margin-bottom: 4px;
    font-size: 0.95rem;
}
.ot-cookie-banner__text strong + strong {
    display: inline;
    margin: 0;
    font-weight: 600;
}
.ot-cookie-banner__text a {
    color: var(--ot-gold-soft);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.ot-cookie-banner__btn {
    background: linear-gradient(180deg, #F0DDA4, #D4AF5A 50%, #957029);
    color: #1A1205;
    border: none;
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.92rem;
    font-family: inherit;
    cursor: pointer;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 14px rgba(212, 175, 90, 0.35);
    transition: transform 0.15s, box-shadow 0.15s;
}
.ot-cookie-banner__btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(212, 175, 90, 0.50);
}
@media (max-width: 600px) {
    .ot-cookie-banner__inner {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   PÁGINAS LEGALES · contenido tipográfico legible
   ===================================================================== */
.legal-section {
    padding-top: 0 !important;
}
.legal-content {
    max-width: 820px;
    margin: 0 auto;
    padding: clamp(28px, 4vw, 56px);
    border: 1px solid rgba(212, 175, 90, 0.18);
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(20, 36, 30, 0.55), rgba(10, 20, 16, 0.45));
    backdrop-filter: blur(12px) saturate(1.10);
    box-shadow:
        0 1px 0 rgba(240, 221, 164, 0.10) inset,
        0 24px 64px rgba(0, 0, 0, 0.40);
    color: var(--fg-primary);
    line-height: 1.7;
    font-size: 1rem;
}
.legal-content h2 {
    margin: 36px 0 14px;
    color: var(--ot-gold-soft);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.legal-content h2:first-child {
    margin-top: 0;
}
.legal-content h3 {
    margin: 24px 0 10px;
    color: var(--fg-primary);
    font-size: 1.1rem;
    font-weight: 600;
}
.legal-content p {
    margin: 0 0 14px;
}
.legal-content ul {
    margin: 0 0 18px 22px;
    padding: 0;
}
.legal-content li {
    margin-bottom: 8px;
}
.legal-content strong {
    color: var(--ot-gold-soft);
    font-weight: 600;
}
.legal-content a {
    color: var(--ot-gold-soft);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.legal-content code {
    background: rgba(0, 0, 0, 0.42);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.88em;
    color: var(--ot-gold-soft);
    border: 1px solid rgba(212, 175, 90, 0.18);
}
.legal-content .legal-note {
    margin: 18px 0;
    padding: 14px 16px;
    background: rgba(251, 191, 36, 0.08);
    border-left: 3px solid #fbbf24;
    border-radius: 8px;
    font-size: 0.92rem;
}
.legal-content .legal-meta {
    margin-top: 36px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.85rem;
    color: var(--ot-muted);
    text-align: right;
    font-style: italic;
}
.legal-content .legal-table {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0 22px;
    font-size: 0.92rem;
}
.legal-content .legal-table th {
    text-align: left;
    padding: 10px 12px;
    background: rgba(212, 175, 90, 0.10);
    color: var(--ot-gold-soft);
    font-weight: 700;
    font-size: 0.85rem;
    border: 1px solid rgba(212, 175, 90, 0.22);
}
.legal-content .legal-table td {
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    vertical-align: top;
}
.legal-content .legal-table tr:nth-child(even) td {
    background: rgba(0, 0, 0, 0.18);
}

/* =====================================================================
   CHECKBOX RGPD en formularios
   ===================================================================== */
.ot-rgpd {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(212, 175, 90, 0.22);
    border-radius: 10px;
    margin: 14px 0 22px;
    font-size: 0.85rem;
    color: var(--fg-primary);
    line-height: 1.55;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.2s, background 0.2s;
}
.ot-rgpd:hover {
    border-color: rgba(212, 175, 90, 0.42);
}
.ot-rgpd input[type="checkbox"] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--ot-gold-soft);
    cursor: pointer;
}
.ot-rgpd a {
    color: var(--ot-gold-soft);
    text-decoration: underline;
}
.ot-rgpd.is-invalid {
    border-color: rgba(216, 110, 90, 0.55);
    background: rgba(40, 12, 10, 0.32);
}

/* =====================================================================
   Capturas reales del producto en la home: object-fit contain
   (las capturas tienen ratio 1600/793, distinto de los contenedores)
   ===================================================================== */
.visual-frame img[src*="/capturas/"],
.demo-placeholder--image img[src*="/capturas/"],
.cost-dashboard img[src*="/capturas/"],
.olivia-screens img[src*="/capturas/"],
.season-screens img[src*="/capturas/"],
.wide-visual-block img[src*="/capturas/"],
.product-showcase img[src*="/capturas/"] {
    object-fit: contain !important;
    object-position: center !important;
    background: linear-gradient(145deg, rgba(20, 36, 30, 0.45), rgba(10, 20, 16, 0.55));
}

/* =====================================================================
   PANEL THUMB · miniaturas dentro de los paneles del onboarding
   y otras secciones, clickables para ampliar con lightbox
   ===================================================================== */
.panel-thumb {
    position: relative;
    margin-top: 18px;
    aspect-ratio: 1600 / 793;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(212, 175, 90, 0.20);
    background: linear-gradient(145deg, rgba(20, 36, 30, 0.55), rgba(10, 20, 16, 0.65));
    cursor: zoom-in;
    transition:
        transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 0.3s,
        box-shadow 0.3s;
    box-shadow:
        0 1px 0 rgba(240, 221, 164, 0.08) inset,
        0 8px 24px rgba(0, 0, 0, 0.30);
}
.panel-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.6s ease, filter 0.4s ease;
}
.panel-thumb:hover {
    transform: translateY(-2px);
    border-color: rgba(212, 175, 90, 0.55);
    box-shadow:
        0 1px 0 rgba(240, 221, 164, 0.16) inset,
        0 14px 40px rgba(0, 0, 0, 0.42),
        0 0 32px rgba(212, 175, 90, 0.18);
}
.panel-thumb:hover img {
    transform: scale(1.04);
    filter: saturate(1.10);
}

/* Lupa "+" en la esquina superior derecha al hacer hover */
.panel-thumb__zoom {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(212, 175, 90, 0.92), rgba(149, 112, 41, 0.95));
    border: 1px solid rgba(240, 221, 164, 0.45);
    border-radius: 50%;
    color: #1A1205;
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.25s, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1.4);
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.40);
}
.panel-thumb:hover .panel-thumb__zoom {
    opacity: 1;
    transform: scale(1);
}

/* Variante placeholder (cuando aún no hay imagen real) */
.panel-thumb--placeholder {
    cursor: default;
    display: grid;
    place-items: center;
    gap: 6px;
    border-style: dashed;
    border-color: rgba(212, 175, 90, 0.16);
}
.panel-thumb--placeholder:hover {
    transform: none;
    border-color: rgba(212, 175, 90, 0.30);
    box-shadow:
        0 1px 0 rgba(240, 221, 164, 0.08) inset,
        0 8px 24px rgba(0, 0, 0, 0.30);
}
.panel-thumb__icon {
    font-size: 32px;
    opacity: 0.45;
    filter: grayscale(0.3);
}
.panel-thumb__label {
    color: rgba(168, 175, 166, 0.55);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* Asegurar que el aspecto de la miniatura sea consistente en grid de timeline-panel */
.timeline-panel article {
    display: flex;
    flex-direction: column;
}
.timeline-panel article .panel-thumb {
    margin-top: auto; /* la miniatura se queda abajo del article */
}

/* =====================================================================
   Timeline-panel · permitir que la miniatura sea visible
   (el article original tiene overflow: hidden y min-height fijo,
   los relajamos cuando contiene panel-thumb)
   ===================================================================== */
.timeline-panel article:has(.panel-thumb) {
    overflow: visible;
    min-height: auto;
    padding-bottom: 24px;
}

/* Asegurar que la línea decorativa ::before del article siga visible
   y no se descontrole con overflow:visible */
.timeline-panel article:has(.panel-thumb)::before {
    overflow: hidden;
}

/* Hacemos que la miniatura tenga un margin-top sano respecto al texto */
.timeline-panel article .panel-thumb {
    margin-top: 18px;
}

/* =====================================================================
   Permitir que las miniaturas sean visibles en TODOS los contenedores
   tipo grid-card que tenían overflow:hidden y min-height
   ===================================================================== */
.definition-grid article:has(.panel-thumb),
.comparison-grid article:has(.panel-thumb),
.trace-grid article:has(.panel-thumb),
.network-grid article:has(.panel-thumb),
.cost-levels article:has(.panel-thumb) {
    overflow: visible;
    min-height: auto;
    display: flex;
    flex-direction: column;
    padding-bottom: 24px;
}

.definition-grid article .panel-thumb,
.comparison-grid article .panel-thumb,
.trace-grid article .panel-thumb,
.network-grid article .panel-thumb,
.cost-levels article .panel-thumb {
    margin-top: auto; /* la miniatura se queda al fondo */
    margin-top: 18px;
}

/* Variante mini · para los grids más densos (cost-levels, network-grid) */
.panel-thumb--mini {
    aspect-ratio: 16 / 9;
    margin-top: 14px;
    border-radius: 10px;
}
.panel-thumb--mini .panel-thumb__zoom {
    width: 22px;
    height: 22px;
    font-size: 14px;
    top: 6px;
    right: 6px;
}