/* =========================================================
   AURA LABS — Ingeniería audiovisual para iglesias
   Estilo inspirado en la estética "Creativex":
   tipografía Oswald condensada, texto contorneado,
   retículas de puntos y marquesinas.
   Soporta modo oscuro (por defecto) y modo claro.
   ========================================================= */

/* ---------- 1. Tokens · MODO OSCURO (por defecto) ---------- */
:root{
    --bg:            #111111;
    --bg-alt:        #0c0c0c;

    --txt:           #b2b2b2;
    --txt-strong:    #e0e0e0;
    --txt-dim:       #5f5f5f;
    --txt-faint:     #3a3a3a;

    --line:          #242424;
    --line-soft:     #1b1b1b;

    /* Verde de marca */
    --accent:        #8eff03;
    --accent-on:     #111111;                  /* texto sobre el acento */
    --accent-tint:   rgba(142,255,3,.10);

    /* Superficies y velos */
    --header-bg:     rgba(17,17,17,.86);
    --surface-hover: rgba(255,255,255,.022);
    --surface-soft:  rgba(255,255,255,.018);
    --dot:           rgba(255,255,255,.055);
    --dot-menu:      rgba(255,255,255,.05);
    --hairline:      rgba(255,255,255,.28);
    --hairline-soft: rgba(255,255,255,.25);
    --scroll-thumb:  #2a2a2a;

    /* Tratamiento de imagen */
    --hero-stroke:   rgba(255,255,255,.82);
    --hero-filter:   grayscale(1) contrast(1.06) brightness(.42);
    --hero-veil-a:   rgba(17,17,17,.28);
    --hero-veil-b:   rgba(17,17,17,.90);
    --hero-veil-c:   rgba(17,17,17,.85);
    --hero-veil-d:   rgba(17,17,17,.40);
    --hero-veil-e:   rgba(17,17,17,.95);
    --work-filter:       grayscale(1) brightness(.55);
    --work-filter-hover: grayscale(0) brightness(.72);
    --testi-filter:  grayscale(1) brightness(.3);
    --testi-veil:    rgba(17,17,17,.72);

    /* Marquesina */
    --marquee-fill:   #2b2b2b;
    --marquee-stroke: #333333;

    /* Estados */
    --danger:        #8a3b3b;
    --danger-txt:    #c07070;

    --ff-display:    'Oswald', 'Arial Narrow', sans-serif;
    --ff-body:       'Raleway', system-ui, sans-serif;

    --wrap:          1360px;
    --gut:           clamp(22px, 5vw, 80px);

    --ease:          cubic-bezier(.22,1,.36,1);
}

/* ---------- 2. Tokens · MODO CLARO ----------
   El verde #8eff03 es ilegible sobre fondo claro (contraste ~1.3:1),
   así que en este tema se usa el mismo verde oscurecido a #437800,
   que alcanza 4.9:1 sobre el fondo y cumple WCAG AA.             */
:root[data-theme="light"]{
    --bg:            #f5f5f3;
    --bg-alt:        #ecece9;

    --txt:           #4a4a48;
    --txt-strong:    #111111;
    --txt-dim:       #78787a;
    --txt-faint:     #b4b4b0;

    --line:          #d9d9d4;
    --line-soft:     #e6e6e2;

    --accent:        #437800;
    --accent-on:     #ffffff;
    --accent-tint:   rgba(67,120,0,.10);

    --header-bg:     rgba(245,245,243,.88);
    --surface-hover: rgba(0,0,0,.030);
    --surface-soft:  rgba(0,0,0,.022);
    --dot:           rgba(0,0,0,.075);
    --dot-menu:      rgba(0,0,0,.06);
    --hairline:      rgba(0,0,0,.26);
    --hairline-soft: rgba(0,0,0,.22);
    --scroll-thumb:  #c8c8c2;

    --hero-stroke:   rgba(0,0,0,.82);
    --hero-filter:   grayscale(1) contrast(.88) brightness(1.42);
    --hero-veil-a:   rgba(245,245,243,.46);
    --hero-veil-b:   rgba(245,245,243,.72);
    --hero-veil-c:   rgba(245,245,243,.70);
    --hero-veil-d:   rgba(245,245,243,.26);
    --hero-veil-e:   rgba(245,245,243,.84);
    --work-filter:       grayscale(1) contrast(.95) brightness(1.04);
    --work-filter-hover: grayscale(0) brightness(1.02);
    --testi-filter:  grayscale(1) contrast(.85) brightness(1.5);
    --testi-veil:    rgba(245,245,243,.66);

    --marquee-fill:   #dededa;
    --marquee-stroke: #c4c4be;

    --danger:        #b04a4a;
    --danger-txt:    #a33f3f;
}

/* Transición suave únicamente durante el cambio de tema */
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after{
    transition: background-color .4s ease, color .4s ease,
                border-color .4s ease, fill .4s ease,
                -webkit-text-stroke-color .4s ease !important;
}

/* ---------- 3. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
    margin:0;
    background:var(--bg);
    color:var(--txt);
    font-family:var(--ff-body);
    font-size:15px;
    font-weight:300;
    line-height:1.75;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
body.is-locked{ overflow:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,blockquote,figure{ margin:0; }
::selection{ background:var(--accent); color:var(--accent-on); }

::-webkit-scrollbar{ width:9px; }
::-webkit-scrollbar-track{ background:var(--bg-alt); }
::-webkit-scrollbar-thumb{ background:var(--scroll-thumb); }
::-webkit-scrollbar-thumb:hover{ background:var(--accent); }

/* ---------- 4. Layout ---------- */
.wrap{
    position:relative; z-index:2;
    max-width:var(--wrap);
    margin:0 auto;
    padding:0 var(--gut);
}
.lower-page{
    position:relative;
    padding:clamp(90px,13vw,180px) 0;
    overflow:hidden;
    border-top:1px solid var(--line-soft);
}
.bg-dark{ background:var(--bg-alt); }

.divider-m{ height:clamp(20px,3vw,34px); }
.divider-l{ height:clamp(44px,6vw,80px); }
.divider-xl{ height:clamp(70px,10vw,140px); }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; align-items:start; }
.gap-xl{ gap:clamp(40px,6vw,90px); }
.col-offset{ padding-top:clamp(0px,2vw,26px); }

.dot-grid{
    position:absolute; inset:0; z-index:0; pointer-events:none;
    background-image:radial-gradient(circle, var(--dot) 1px, transparent 1px);
    background-size:26px 26px;
    mask-image:linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
    -webkit-mask-image:linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}

/* ---------- 5. Tipografía de marca ---------- */
.section-heading{
    display:flex; align-items:center; gap:16px;
    font-family:var(--ff-display);
    font-size:13px; font-weight:500;
    letter-spacing:.16em; text-transform:uppercase;
    color:var(--txt-dim);
    margin-bottom:clamp(30px,5vw,54px);
}
.section-heading span{ color:var(--txt-strong); }
.section-heading .hr{
    display:block; width:clamp(28px,5vw,60px); height:1px;
    background:var(--line); flex:none;
}

.section-header{
    font-family:var(--ff-display);
    font-weight:700;
    font-size:clamp(30px,4.4vw,54px);
    line-height:1.16;
    letter-spacing:-.02em;
    text-transform:uppercase;
    color:transparent;
    -webkit-text-fill-color:transparent;
    -webkit-text-stroke:1px var(--txt);
}
.section-header span{
    color:var(--txt-strong);
    -webkit-text-fill-color:var(--txt-strong);
    -webkit-text-stroke:0;
}

.label-line{
    display:flex; align-items:center; gap:12px;
    font-family:var(--ff-display);
    font-size:12px; font-weight:500;
    letter-spacing:.16em; text-transform:uppercase;
    color:var(--txt-dim);
    margin-bottom:22px;
}
.label-line.center{ justify-content:center; }
.label-line .dot{
    width:9px; height:9px; border-radius:50%;
    background:var(--accent); flex:none;
}
.label-line .line{
    width:34px; height:1px; background:var(--line); flex:none;
}

.body-txt{
    font-size:15px; line-height:1.85;
    color:var(--txt); max-width:56ch;
    margin-bottom:20px;
}
.body-txt strong{ color:var(--txt-strong); font-weight:500; }
.body-txt.lead{ font-size:clamp(16px,1.6vw,18px); max-width:62ch; }
.quote-txt{
    font-family:var(--ff-display);
    font-weight:300; font-size:clamp(16px,1.9vw,21px);
    line-height:1.5; color:var(--txt-strong);
    text-transform:uppercase; letter-spacing:-.01em;
    border-left:2px solid var(--accent);
    padding-left:20px;
}

/* ---------- 6. Preloader ---------- */
.preloader{
    position:fixed; inset:0; z-index:9999;
    background:var(--bg);
    display:flex; align-items:center; justify-content:center;
    transition:opacity .6s var(--ease), visibility .6s;
}
.preloader.is-done{ opacity:0; visibility:hidden; }
.preloader-inner{ text-align:center; }
.preloader-logo{ width:86px; margin:0 auto 26px; opacity:.9; }
:root[data-theme="light"] .preloader-logo{ filter:invert(1); }
.preloader-bar{ width:160px; height:1px; background:var(--line); overflow:hidden; }
.preloader-bar span{
    display:block; height:100%; width:0; background:var(--accent);
    animation:load 1.1s var(--ease) forwards;
}
@keyframes load{ to{ width:100%; } }

/* ---------- 7. Cursor ---------- */
.cursor-dot,.cursor-ring{
    position:fixed; top:0; left:0; z-index:9998;
    pointer-events:none; border-radius:50%;
    transform:translate(-50%,-50%);
    opacity:0; transition:opacity .3s;
}
.cursor-dot{ width:5px; height:5px; background:var(--accent); }
.cursor-ring{
    width:34px; height:34px; border:1px solid var(--hairline-soft);
    transition:opacity .3s, width .3s var(--ease), height .3s var(--ease),
               border-color .3s, background-color .3s;
}
body.cursor-ready .cursor-dot,
body.cursor-ready .cursor-ring{ opacity:1; }
body.cursor-hover .cursor-ring{
    width:62px; height:62px;
    border-color:var(--accent);
    background:var(--accent-tint);
}
body.cursor-hover .cursor-dot{ opacity:0; }
@media (hover:none),(max-width:900px){
    .cursor-dot,.cursor-ring{ display:none; }
}

/* ---------- 8. Header ---------- */
/* Por encima del overlay (1000) para que el logo y la "X" sigan accesibles */
.site-header{
    position:fixed; top:0; left:0; right:0; z-index:1002;
    display:flex; align-items:center; justify-content:space-between;
    padding:24px var(--gut);
    transition:background-color .4s, padding .4s, border-color .4s;
    border-bottom:1px solid transparent;
}
.site-header.is-stuck{
    background:var(--header-bg);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom-color:var(--line-soft);
    padding-top:16px; padding-bottom:16px;
}
.brand img{ width:clamp(120px,13vw,168px); }
/* El logotipo es blanco: se invierte en el tema claro */
:root[data-theme="light"] .brand img,
:root[data-theme="light"] .footer-mark img{ filter:invert(1); }

body.menu-open .site-header{
    background:transparent; border-bottom-color:transparent;
    backdrop-filter:none; -webkit-backdrop-filter:none;
}

.header-actions{ display:flex; align-items:center; gap:6px; }

/* Interruptor de tema */
.theme-toggle{
    width:44px; height:44px; border-radius:50%;
    display:grid; place-items:center;
    color:var(--txt-strong);
    border:1px solid transparent;
    transition:color .35s, border-color .35s, background-color .35s, transform .45s var(--ease);
}
.theme-toggle:hover{
    color:var(--accent); border-color:var(--accent);
    background:var(--accent-tint); transform:rotate(-25deg);
}
.theme-toggle svg{ width:20px; height:20px; grid-area:1/1; }
/* Oscuro → se ofrece el sol.  Claro → se ofrece la luna. */
.theme-toggle .ic-moon{ display:none; }
:root[data-theme="light"] .theme-toggle .ic-sun{ display:none; }
:root[data-theme="light"] .theme-toggle .ic-moon{ display:block; }

.menu-toggle{
    width:44px; height:44px; position:relative;
    display:flex; flex-direction:column; align-items:flex-end;
    justify-content:center; gap:5px;
}
.menu-toggle span{
    display:block; height:1px; background:var(--txt-strong);
    transition:.4s var(--ease);
}
.menu-toggle span:nth-child(1){ width:24px; }
.menu-toggle span:nth-child(2){ width:16px; }
.menu-toggle span:nth-child(3){ width:24px; }
.menu-toggle:hover span{ width:24px; background:var(--accent); }
body.menu-open .menu-toggle span:nth-child(1){ width:24px; transform:translateY(6px) rotate(45deg); }
body.menu-open .menu-toggle span:nth-child(2){ opacity:0; }
body.menu-open .menu-toggle span:nth-child(3){ width:24px; transform:translateY(-6px) rotate(-45deg); }

/* ---------- 9. Overlay menu ---------- */
.overlay-menu{
    position:fixed; inset:0; z-index:1000;
    background:var(--bg);
    display:flex; align-items:center;
    opacity:0; visibility:hidden;
    clip-path:circle(0% at calc(100% - 46px) 46px);
    transition:clip-path .8s var(--ease), opacity .4s, visibility .4s;
}
.overlay-menu::before{
    content:''; position:absolute; inset:0;
    background-image:radial-gradient(circle, var(--dot-menu) 1px, transparent 1px);
    background-size:26px 26px;
}
body.menu-open .overlay-menu{
    opacity:1; visibility:visible;
    clip-path:circle(150% at calc(100% - 46px) 46px);
}
.overlay-menu-inner{
    position:relative; width:100%;
    max-width:var(--wrap); margin:0 auto;
    padding:110px var(--gut) 50px;
    display:grid; grid-template-columns:1.1fr .9fr;
    gap:clamp(40px,6vw,80px); align-items:center;
}
.overlay-nav li{
    overflow:hidden;
    display:flex; align-items:baseline; gap:16px;
}
.overlay-nav .mn{
    font-family:var(--ff-display); font-size:12px;
    color:var(--txt-faint); letter-spacing:.14em;
}
.overlay-nav a{
    display:block;
    font-family:var(--ff-display); font-weight:700;
    font-size:clamp(30px,5.4vw,66px);
    line-height:1.18; letter-spacing:-.03em;
    text-transform:uppercase;
    color:transparent;
    -webkit-text-fill-color:transparent;
    -webkit-text-stroke:1px var(--txt-dim);
    transform:translateY(105%);
    transition:color .35s, -webkit-text-stroke-color .35s, -webkit-text-fill-color .35s;
}
body.menu-open .overlay-nav a{
    transform:translateY(0);
    transition:transform .75s var(--ease) var(--d,0s),
               color .35s, -webkit-text-fill-color .35s;
}
.overlay-nav a:hover{
    color:var(--accent);
    -webkit-text-fill-color:var(--accent);
    -webkit-text-stroke-color:var(--accent);
}
.overlay-meta{ display:grid; gap:34px; }
.om-block p{ font-size:14px; color:var(--txt-dim); line-height:1.8; }
.om-mail{
    font-family:var(--ff-display); font-size:clamp(15px,1.7vw,20px);
    text-transform:uppercase; letter-spacing:-.01em; color:var(--txt-strong);
    border-bottom:1px solid var(--line); padding-bottom:3px;
    transition:color .3s, border-color .3s;
}
.om-mail:hover{ color:var(--accent); border-color:var(--accent); }
.om-social{ display:flex; gap:22px; }
.om-social a{
    font-family:var(--ff-display); font-size:13px;
    letter-spacing:.12em; text-transform:uppercase; color:var(--txt);
    transition:color .3s;
}
.om-social a:hover{ color:var(--accent); }

/* ---------- 10. Hero ---------- */
.upper-page{
    position:relative;
    height:100svh; min-height:600px;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
}
.hero-slider{ position:absolute; inset:0; }
.hero-slide{
    position:absolute; inset:0;
    background-size:cover; background-position:center;
    opacity:0; transform:scale(1.12);
    transition:opacity 1.5s var(--ease);
    filter:var(--hero-filter);
}
.hero-slide.is-active{
    opacity:1;
    animation:kenburns 11s linear forwards;
}
@keyframes kenburns{
    from{ transform:scale(1.14); }
    to{ transform:scale(1.02); }
}
.hero-veil{
    position:absolute; inset:0;
    background:
        radial-gradient(ellipse at 50% 45%, var(--hero-veil-a), var(--hero-veil-b) 78%),
        linear-gradient(180deg, var(--hero-veil-c), var(--hero-veil-d) 35%, var(--hero-veil-e));
}
.upper-page .dot-grid{ mask-image:none; -webkit-mask-image:none; opacity:.6; }

.hero-content{
    position:relative; z-index:3;
    text-align:center; padding:0 var(--gut);
}
.hero-heading{
    font-family:var(--ff-display);
    font-weight:700;
    font-size:clamp(52px,13.5vw,190px);
    line-height:.95;
    letter-spacing:-.045em;
    text-transform:uppercase;
    color:transparent;
    -webkit-text-fill-color:transparent;
    -webkit-text-stroke:1px var(--hero-stroke);
    animation:heroIn 1.3s var(--ease) .25s both;
}
@keyframes heroIn{
    from{ opacity:0; transform:translateY(34px); letter-spacing:.02em; }
    to{ opacity:1; transform:none; letter-spacing:-.045em; }
}

.hero-taglines{ position:relative; height:26px; margin-top:18px; }
.hero-tagline{
    position:absolute; left:0; right:0;
    font-family:var(--ff-display); font-weight:700;
    font-size:clamp(12px,1.4vw,16px);
    letter-spacing:.06em; text-transform:uppercase;
    color:var(--txt-strong);
    opacity:0; transform:translateY(10px);
    transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.hero-tagline.is-active{ opacity:1; transform:none; }

.hero-sub{
    margin-top:26px;
    font-size:14px; line-height:1.9; color:var(--txt);
    animation:fadeUp 1s var(--ease) .8s both;
}
@keyframes fadeUp{ from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;} }

.hero-controls{
    position:absolute; left:var(--gut); bottom:44px; z-index:4;
    display:flex; gap:12px;
}
.circle-btn{
    width:46px; height:46px; border-radius:50%;
    border:1px dashed var(--hairline);
    display:grid; place-items:center;
    color:var(--txt-strong);
    transition:border-color .35s, color .35s, transform .35s var(--ease), background-color .35s;
}
.circle-btn:hover{
    border-color:var(--accent); color:var(--accent);
    transform:scale(1.08); background:var(--accent-tint);
}
.circle-btn svg{ width:20px; height:20px; fill:currentColor; }
.circle-btn .ic-play{ display:none; }
.circle-btn.is-paused .ic-pause{ display:none; }
.circle-btn.is-paused .ic-play{ display:block; }

.hero-dots{
    position:absolute; right:var(--gut); top:50%; z-index:4;
    transform:translateY(-50%);
    display:flex; flex-direction:column; gap:14px;
}
.hero-dots button{
    width:7px; height:7px; border-radius:50%;
    background:var(--hairline-soft);
    transition:background-color .35s, transform .35s;
}
.hero-dots button.is-active{ background:var(--accent); transform:scale(1.5); }

.hero-scroll{
    position:absolute; left:50%; bottom:40px; z-index:4;
    transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:12px;
    font-family:var(--ff-display); font-size:11px;
    letter-spacing:.2em; text-transform:uppercase; color:var(--txt-dim);
}
.scroll-line{ width:1px; height:52px; background:var(--line); position:relative; overflow:hidden; }
.scroll-line::after{
    content:''; position:absolute; top:-50%; left:0;
    width:1px; height:50%; background:var(--accent);
    animation:scrollPulse 1.9s ease-in-out infinite;
}
@keyframes scrollPulse{ to{ top:100%; } }

/* ---------- 11. Marquesina ---------- */
.marquee{
    position:relative; z-index:2;
    overflow:hidden;
    margin:clamp(10px,2vw,20px) 0 clamp(46px,7vw,80px);
    width:100vw; margin-left:calc(50% - 50vw);
    mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track{ display:flex; width:max-content; animation:marquee 26s linear infinite; }
.marquee-rev .marquee-track{ animation-direction:reverse; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

.marquee-item{
    font-family:var(--ff-display);
    font-weight:700;
    font-size:clamp(46px,10vw,140px);
    line-height:1.05;
    letter-spacing:-.04em;
    text-transform:uppercase;
    white-space:nowrap;
    padding-right:.22em;
    color:var(--marquee-fill);
}
.marquee-item span{
    color:transparent;
    -webkit-text-fill-color:transparent;
    -webkit-text-stroke:1px var(--marquee-stroke);
}

/* ---------- 12. Pilares ---------- */
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(26px,4vw,54px); }
.pillar{ border-top:1px solid var(--line); padding-top:26px; transition:border-color .4s; }
.pillar:hover{ border-color:var(--accent); }
.pillar-num{
    font-family:var(--ff-display); font-size:12px;
    letter-spacing:.18em; color:var(--accent); margin-bottom:16px;
}
.pillar-title{
    font-family:var(--ff-display); font-weight:700;
    font-size:clamp(20px,2.4vw,29px); line-height:1.12;
    letter-spacing:-.02em; text-transform:uppercase;
    color:var(--txt-strong); margin-bottom:16px;
}
.pillar p{ font-size:14px; line-height:1.85; color:var(--txt); }

/* ---------- 13. Cifras ---------- */
.stats{
    display:grid; grid-template-columns:repeat(4,1fr);
    gap:clamp(20px,3vw,40px);
    border-top:1px solid var(--line); padding-top:clamp(30px,4vw,48px);
}
.stat-n{
    font-family:var(--ff-display); font-weight:700;
    font-size:clamp(38px,5.6vw,74px); line-height:1;
    letter-spacing:-.04em;
    color:transparent;
    -webkit-text-fill-color:transparent;
    -webkit-text-stroke:1px var(--txt-strong);
    margin-bottom:14px;
    transition:color .4s, -webkit-text-fill-color .4s;
}
.stat:hover .stat-n{
    color:var(--accent);
    -webkit-text-fill-color:var(--accent);
    -webkit-text-stroke:0;
}
.stat-l{
    font-family:var(--ff-display); font-size:11px;
    letter-spacing:.14em; text-transform:uppercase;
    line-height:1.7; color:var(--txt-dim);
}

/* ---------- 14. Pasos del método ---------- */
.steps{ display:grid; gap:0; }
.step{
    display:grid; grid-template-columns:120px 1fr;
    gap:clamp(16px,3vw,44px);
    padding:clamp(26px,3.6vw,42px) 0;
    border-top:1px solid var(--line);
    transition:background-color .45s, padding-left .45s var(--ease);
}
.step:last-child{ border-bottom:1px solid var(--line); }
.step:hover{ background:var(--surface-soft); padding-left:14px; }
.step-n{
    font-family:var(--ff-display); font-weight:700;
    font-size:clamp(34px,4.6vw,60px); line-height:1;
    letter-spacing:-.04em;
    color:transparent;
    -webkit-text-fill-color:transparent;
    -webkit-text-stroke:1px var(--txt-faint);
    transition:-webkit-text-stroke-color .4s;
}
.step:hover .step-n{ -webkit-text-stroke-color:var(--accent); }
.step-body h3{
    font-family:var(--ff-display); font-weight:700;
    font-size:clamp(18px,2.2vw,26px); line-height:1.2;
    letter-spacing:-.02em; text-transform:uppercase;
    color:var(--txt-strong); margin-bottom:12px;
}
.step-body p{ font-size:14px; line-height:1.85; max-width:62ch; }

.closing-note{ position:relative; }
.circle-cta{
    display:grid; place-items:center; text-align:center;
    width:clamp(120px,14vw,158px); height:clamp(120px,14vw,158px);
    border-radius:50%; border:1px dashed var(--hairline);
    font-family:var(--ff-display); font-size:12px; font-weight:500;
    letter-spacing:.16em; text-transform:uppercase; color:var(--txt-strong);
    margin-top:38px;
    transition:border-color .4s, color .4s, transform .5s var(--ease), background-color .4s;
}
.circle-cta:hover{
    border-color:var(--accent); color:var(--accent);
    background:var(--accent-tint); transform:scale(1.06) rotate(-4deg);
}

/* ---------- 15. Servicios ---------- */
.services{
    display:grid; grid-template-columns:repeat(3,1fr);
    border-top:1px solid var(--line);
    border-left:1px solid var(--line);
}
.service{
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:clamp(26px,3.2vw,42px);
    position:relative; overflow:hidden;
    transition:background-color .45s;
}
.service::after{
    content:''; position:absolute; left:0; bottom:0;
    width:100%; height:1px; background:var(--accent);
    transform:scaleX(0); transform-origin:left;
    transition:transform .5s var(--ease);
}
.service:hover{ background:var(--surface-hover); }
.service:hover::after{ transform:scaleX(1); }
.s-n{
    display:block;
    font-family:var(--ff-display); font-size:12px;
    letter-spacing:.18em; color:var(--txt-faint);
    margin-bottom:20px; transition:color .4s;
}
.service:hover .s-n{ color:var(--accent); }
.service h3{
    font-family:var(--ff-display); font-weight:700;
    font-size:clamp(16px,1.8vw,21px); line-height:1.24;
    letter-spacing:-.015em; text-transform:uppercase;
    color:var(--txt-strong); margin-bottom:14px;
}
.service p{ font-size:13.5px; line-height:1.8; color:var(--txt); }

.fail-list{ margin-bottom:30px; }
.fail-list li{
    display:flex; gap:16px; align-items:baseline;
    padding:16px 0; border-bottom:1px solid var(--line);
    font-size:14.5px; color:var(--txt-strong);
}
.fail-list span{
    font-family:var(--ff-display); font-size:11px;
    letter-spacing:.16em; color:var(--accent); flex:none;
}

/* ---------- 16. Proyectos ---------- */
.works{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2.6vw,34px); }
.work-lg{ grid-column:1 / -1; }
.work{ position:relative; overflow:hidden; }
.work-img{
    aspect-ratio:4/3;
    background-size:cover; background-position:center;
    filter:var(--work-filter);
    transform:scale(1);
    transition:transform 1.1s var(--ease), filter .7s var(--ease);
}
.work-lg .work-img{ aspect-ratio:21/9; }
.work:hover .work-img{ transform:scale(1.05); filter:var(--work-filter-hover); }
.work figcaption{ display:flex; flex-direction:column; gap:6px; padding-top:20px; }
.w-n{ font-family:var(--ff-display); font-size:11px; letter-spacing:.18em; color:var(--accent); }
.work h3{
    font-family:var(--ff-display); font-weight:700;
    font-size:clamp(16px,1.9vw,23px); letter-spacing:-.015em;
    text-transform:uppercase; color:var(--txt-strong);
}
.work p{ font-size:13px; color:var(--txt-dim); }

/* ---------- 17. Testimonio ---------- */
.testimonial-page{
    position:relative; overflow:hidden;
    padding:clamp(90px,13vw,170px) 0;
    text-align:center;
}
.testimonial-bg{
    position:absolute; inset:0;
    background-size:cover; background-position:center;
    filter:var(--testi-filter);
}
.testimonial-veil{ position:absolute; inset:0; background:var(--testi-veil); }
.testimonial{
    font-family:var(--ff-display); font-weight:300;
    font-size:clamp(19px,3.1vw,40px);
    line-height:1.32; letter-spacing:-.02em;
    text-transform:uppercase;
    color:var(--txt-strong);
    margin:0 auto;
    max-width:min(100%,900px);
}
.testimonial span{ color:var(--accent); }
.testimonial-author{ margin-top:34px; display:flex; flex-direction:column; gap:6px; }
.testimonial-author strong{
    font-family:var(--ff-display); font-weight:700; font-size:14px;
    letter-spacing:.12em; text-transform:uppercase; color:var(--txt-strong);
}
.testimonial-author span{
    font-size:12px; letter-spacing:.1em;
    text-transform:uppercase; color:var(--txt-dim);
}

/* ---------- 18. Contacto ---------- */
.contact-meta{ display:grid; gap:30px; }
.cm a{ color:var(--txt-strong); border-bottom:1px solid var(--line); transition:color .3s, border-color .3s; }
.cm a:hover{ color:var(--accent); border-color:var(--accent); }
.cm p{ font-size:14px; line-height:1.8; color:var(--txt); }

.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:34px; }
.chip{ position:relative; cursor:pointer; }
.chip input{ position:absolute; opacity:0; pointer-events:none; }
.chip span{
    display:block;
    padding:11px 20px;
    border:1px solid var(--line);
    font-family:var(--ff-display); font-size:11px;
    letter-spacing:.14em; text-transform:uppercase; color:var(--txt-dim);
    transition:border-color .35s, color .35s, background-color .35s;
}
.chip:hover span{ border-color:var(--txt-dim); color:var(--txt); }
.chip input:checked + span{
    border-color:var(--accent); color:var(--accent);
    background:var(--accent-tint);
}
.chip input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:2px; }

.field{ position:relative; margin-bottom:8px; }
.field input,.field textarea{
    width:100%;
    background:transparent; border:0;
    border-bottom:1px solid var(--line);
    padding:26px 0 12px;
    font-family:var(--ff-body); font-size:15px; font-weight:300;
    color:var(--txt-strong);
    transition:border-color .35s;
    resize:vertical;
}
.field textarea{ line-height:1.7; }
.field label{
    position:absolute; left:0; top:26px;
    font-family:var(--ff-display); font-size:12px;
    letter-spacing:.12em; text-transform:uppercase; color:var(--txt-dim);
    pointer-events:none;
    transition:transform .35s var(--ease), color .35s;
    transform-origin:left top;
}
.field input:focus,.field textarea:focus{ outline:none; border-bottom-color:var(--accent); }
.field input:focus + label,
.field textarea:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:not(:placeholder-shown) + label{
    transform:translateY(-22px) scale(.86);
    color:var(--accent);
}
.field.has-error input,.field.has-error textarea{ border-bottom-color:var(--danger); }

.btn-send{
    margin-top:34px;
    display:inline-flex; align-items:center; gap:14px;
    padding:17px 32px;
    border:1px solid var(--line);
    font-family:var(--ff-display); font-size:12px; font-weight:500;
    letter-spacing:.18em; text-transform:uppercase; color:var(--txt-strong);
    transition:border-color .4s, color .4s, background-color .4s, gap .4s var(--ease);
}
.btn-send svg{ width:22px; height:22px; }
.btn-send:hover{
    border-color:var(--accent); color:var(--accent);
    background:var(--accent-tint); gap:22px;
}
.btn-send:disabled{ cursor:wait; opacity:.6; }
.btn-send.is-loading svg{
    animation:sending 1s var(--ease) infinite;
}
@keyframes sending{
    0%{ transform:translateX(0); opacity:1; }
    60%{ transform:translateX(9px); opacity:0; }
    61%{ transform:translateX(-9px); opacity:0; }
    100%{ transform:translateX(0); opacity:1; }
}

/* Campo trampa anti-spam: fuera de pantalla, nunca visible ni enfocable */
.hp{
    position:absolute !important;
    left:-9999px; top:auto;
    width:1px; height:1px; overflow:hidden;
}

.form-status{ margin-top:20px; min-height:20px; font-size:13px; color:var(--txt-dim); }
.form-status.is-ok{ color:var(--accent); }
.form-status.is-err{ color:var(--danger-txt); }
.status-link{ color:var(--accent); border-bottom:1px solid currentColor; }

/* ---------- 19. Footer ---------- */
.site-footer{
    position:relative; overflow:hidden;
    border-top:1px solid var(--line-soft);
    background:var(--bg);
    padding:clamp(60px,8vw,100px) 0 34px;
}
.site-footer .wrap{ display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(36px,6vw,80px); }
.footer-mark img{ width:170px; margin-bottom:22px; }
.footer-mark p{ font-size:13.5px; line-height:1.85; color:var(--txt-dim); }
.footer-cols{ display:grid; grid-template-columns:1fr 1fr; gap:34px; }
.footer-cols ul{ display:grid; gap:11px; }
.footer-cols a{ font-size:13.5px; color:var(--txt); transition:color .3s, padding-left .3s var(--ease); }
.footer-cols a:hover{ color:var(--accent); padding-left:6px; }
.footer-bottom{
    grid-column:1 / -1;
    margin-top:clamp(40px,6vw,70px); padding-top:24px;
    border-top:1px solid var(--line-soft);
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
    font-family:var(--ff-display); font-size:11px;
    letter-spacing:.12em; text-transform:uppercase; color:var(--txt-faint);
}

/* ---------- 20. Volver arriba ---------- */
.to-top{
    position:fixed; right:22px; bottom:22px; z-index:800;
    width:44px; height:44px; border-radius:50%;
    border:1px solid var(--line);
    background:var(--header-bg);
    backdrop-filter:blur(8px);
    display:grid; place-items:center; color:var(--txt);
    opacity:0; visibility:hidden; transform:translateY(12px);
    transition:.45s var(--ease);
}
.to-top svg{ width:20px; height:20px; }
.to-top.is-shown{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ border-color:var(--accent); color:var(--accent); }

/* ---------- 21. Reveal ---------- */
.reveal{
    opacity:0; transform:translateY(26px);
    transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-in{ opacity:1; transform:none; }

/* ---------- 22. Responsive ---------- */
@media (max-width:1080px){
    .services{ grid-template-columns:repeat(2,1fr); }
    .stats{ grid-template-columns:repeat(2,1fr); row-gap:38px; }
}
@media (max-width:900px){
    .grid-2{ grid-template-columns:1fr; }
    .col-offset{ padding-top:0; }
    .pillars{ grid-template-columns:1fr; }
    .overlay-menu-inner{ grid-template-columns:1fr; align-content:center; gap:44px; }
    .site-footer .wrap{ grid-template-columns:1fr; }
    .works{ grid-template-columns:1fr; }
    .hero-dots{ display:none; }
}
@media (max-width:640px){
    .services{ grid-template-columns:1fr; }
    .step{ grid-template-columns:1fr; gap:12px; }
    .footer-cols{ grid-template-columns:1fr; }
    .hero-controls{ bottom:26px; }
    .hero-scroll{ display:none; }
    .footer-bottom{ flex-direction:column; }
}

/* ---------- 23. Accesibilidad ---------- */
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }
    .reveal{ opacity:1; transform:none; }
    .marquee-track{ animation:none; }
    .hero-slide.is-active{ animation:none; }
}