/* ============================================================
   TopInfra · UI layer — componentes portados de 21st.dev a CSS/JS vanilla
   (Blur Fade, Text Reveal, Number Ticker, Marquee, Spotlight Card, 3D Tilt,
   Timeline, Border Beam, Shimmer Button, Aurora, Scroll Progress, Floating
   Navbar, Curtain/Preloader, View Transitions, Dock).
   Se carga DESPUÉS del <style> de cada página para poder afinarla.
   Clases en <html>: .js (hay JS) · .ti-hold (primera visita: curtain)
   · .ti-anim (reveal activo) · .ti-cursor (cursor custom).
   Easing editorial: cubic-bezier(.16,1,.3,1). Reduced motion: todo se apaga al final.
   ============================================================ */
:root{
  --ti-ease:cubic-bezier(.16,1,.3,1);
  --ti-champagne:#c8a87c;
  --hold:0ms;            /* offset de la intro mientras baja el curtain */
  --hh:96px;             /* alto del header (lo actualiza JS) */
}
html.ti-hold{--hold:1500ms}
@property --ti-a{syntax:'<angle>';inherits:false;initial-value:0deg}

/* Foco visible, siempre */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--ti-accent);outline-offset:4px}

/* ===== 0. View Transitions (navegación entre páginas) ===== */
@view-transition{navigation:auto}
@keyframes ti-vt-out{to{opacity:0;transform:translateY(-12px)}}
@keyframes ti-vt-in{from{opacity:0;transform:translateY(16px)}}
::view-transition-old(root){animation:ti-vt-out .3s ease both}
::view-transition-new(root){animation:ti-vt-in .6s var(--ti-ease) both}

/* ===== 1. Curtain (solo la primera página de la sesión) ===== */
.ti-curtain{display:none}
html.ti-hold .ti-curtain{display:flex;position:fixed;inset:0;z-index:100000;background:#0a0a0a;align-items:center;justify-content:center;pointer-events:none;animation:ti-curtain-out .95s 1.45s var(--ti-ease) forwards}
html.ti-hold .ti-curtain img{height:64px;filter:brightness(0) invert(1);animation:ti-curtain-logo 1.1s var(--ti-ease) both,ti-curtain-logo-out .5s 1.2s ease both}
html.ti-hold .ti-curtain .line{position:absolute;left:50%;bottom:20%;width:1px;height:0;background:var(--ti-champagne);transform:translateX(-50%);animation:ti-curtain-line 1s .25s var(--ti-ease) both}
@keyframes ti-curtain-logo{from{opacity:0;translate:0 18px;filter:brightness(0) invert(1) blur(10px)}to{opacity:1;translate:none;filter:brightness(0) invert(1) blur(0)}}
@keyframes ti-curtain-logo-out{to{opacity:0;translate:0 -14px}}
@keyframes ti-curtain-line{to{height:80px}}
@keyframes ti-curtain-out{to{transform:translateY(-100%)}}

/* ===== 2. Intro (hero / cabeceras de página) — puro CSS, JS solo divide palabras ===== */
@keyframes ti-rise{from{opacity:0;translate:0 26px;filter:blur(10px)}to{opacity:1;translate:none;filter:blur(0)}}
@keyframes ti-fade{from{opacity:0}to{opacity:1}}
html.js :is(.hero-center,.page-header-inner,.contact-hero-inner,.identity-grid>div)>*,
html.js :is(.legal-page>.ti-eyebrow,.legal-page>h1,.legal-page>.updated,.identity-img){
  animation:ti-rise 1s var(--ti-ease) both;animation-delay:calc(var(--d,120ms) + var(--hold))
}
html.js :is(.hero-center,.page-header-inner,.contact-hero-inner,.identity-grid>div)>*:nth-child(1){--d:80ms}
html.js :is(.hero-center,.page-header-inner,.contact-hero-inner,.identity-grid>div)>*:nth-child(2){--d:220ms}
html.js :is(.hero-center,.page-header-inner,.contact-hero-inner,.identity-grid>div)>*:nth-child(3){--d:620ms}
html.js :is(.hero-center,.page-header-inner,.contact-hero-inner,.identity-grid>div)>*:nth-child(4){--d:780ms}
html.js :is(.hero-center,.page-header-inner,.contact-hero-inner,.identity-grid>div)>*:nth-child(5){--d:920ms}
html.js .legal-page>.ti-eyebrow{--d:80ms}html.js .legal-page>h1{--d:220ms}html.js .legal-page>.updated{--d:620ms}
html.js .identity-img{--d:500ms}
html.js .hero-caption{animation:ti-fade 1s ease both;animation-delay:calc(1300ms + var(--hold))}
html.js .scroll-cue{animation:ti-fade 1s ease both,ti-scroll-bob 2s ease-in-out infinite;animation-delay:calc(1300ms + var(--hold)),calc(2300ms + var(--hold))}
html.js .site-header:not(.is-fixed):not(.is-settled){animation:ti-fade 1s ease both;animation-delay:calc(260ms + var(--hold))}
body.menu-open .site-header{animation:none!important}
.mobile-toggle{min-width:44px;min-height:44px;justify-content:center}
/* Text reveal por palabra (JS envuelve cada palabra en .w) */
html.js :is(.hero-center,.page-header-inner,.contact-hero-inner,.identity-grid>div)>.ti-split,html.js .legal-page>h1.ti-split{animation:none;opacity:1;filter:none;translate:none}
.ti-split .w{display:inline-block;animation:ti-rise 1.1s var(--ti-ease) both;animation-delay:calc(var(--d,0ms) + var(--hold));will-change:opacity,translate,filter}
.ti-split.is-done .w{animation:none;will-change:auto}
/* Ken Burns inicial del hero (JS lo lleva a escala 1) */
html.js .hero .hero-bg{transform:scale(1.12);will-change:transform}
html.js .hero .hero-bg.is-still{will-change:auto}

/* ===== 3. Reveal al hacer scroll (Blur Fade + stagger) ===== */
html.ti-anim [data-ti-reveal]{transition:opacity .95s var(--ti-ease),translate .95s var(--ti-ease),filter .95s var(--ti-ease)}
html.ti-anim [data-ti-reveal]:not(.ti-in){opacity:0;translate:0 28px;filter:blur(7px)}
html.ti-anim [data-ti-reveal].ti-in{opacity:1;translate:none;filter:none}
/* Aparición escalonada tras filtrar (proyectos) */
.grid-masonry{transition:opacity .28s ease}
.grid-masonry.is-filtering{opacity:0}
.grid-masonry figure.ti-pop{animation:ti-rise .75s var(--ti-ease) both;animation-delay:calc(var(--i,0)*45ms)}

/* ===== 4. Hero a pantalla completa ===== */
.hero{height:100svh;min-height:600px;max-height:1040px}
@media (max-width:720px){.hero{min-height:560px}}
.hero-bg{transition:none}

/* ===== 5. Header flotante (Floating Navbar) ===== */
.site-header{transition:padding .5s var(--ti-ease),color .3s ease}
.wordmark img{transition:height .5s var(--ti-ease),filter .3s ease}
.site-header.is-fixed{position:fixed;top:0;left:0;right:0;z-index:40;padding:12px 60px;color:#fff;background:none;border-bottom:1px solid rgba(255,255,255,.08);transition:transform .55s var(--ti-ease),padding .5s var(--ti-ease);animation:ti-header-in .6s var(--ti-ease) backwards}
.site-header.is-fixed::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(10,10,10,.8);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
.site-header.is-fixed .wordmark img{height:42px;filter:brightness(0) invert(1)}
.site-header.is-fixed .header-right .ti-btn{border-color:rgba(255,255,255,.7);padding:10px 20px;font-size:11px}
.site-header.is-fixed .header-right .ti-btn:hover{background:#fff;color:#0a0a0a}
.site-header.is-fixed .mobile-toggle{color:#fff}
.site-header.is-fixed .site-nav a{opacity:.9}
.site-header.is-hidden{transform:translateY(-110%)}
body.menu-open .site-header{transform:none!important}
@keyframes ti-header-in{from{transform:translateY(-100%)}}
.ti-header-spacer{display:block}
@media (max-width:1024px){.site-header.is-fixed{padding:10px 20px}.site-header.is-fixed .wordmark img{height:38px}}

/* ===== 6. Scroll progress ===== */
.ti-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:9000;pointer-events:none;background:linear-gradient(90deg,var(--ti-accent),var(--ti-champagne));transform-origin:left center;transform:scaleX(0)}
body.menu-open .ti-progress,body.lightbox-open .ti-progress{opacity:0}

/* ===== 7. Marquee (venues) ===== */
.venues{padding:44px 0 40px;background:var(--ti-bg);border-bottom:1px solid var(--ti-hair);overflow:hidden}
.venues-head{text-align:center;margin-bottom:24px;padding:0 24px}
.ti-marquee{overflow:hidden;position:relative;-webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.ti-marquee-track{display:flex;width:max-content;animation:ti-marquee var(--ti-marquee-dur,46s) linear infinite}
.ti-marquee:hover .ti-marquee-track{animation-play-state:paused}
.ti-marquee-track>ul{display:flex;align-items:center;flex:none;margin:0;padding:0;list-style:none}
.ti-marquee li{display:flex;align-items:center;gap:34px;padding:0 17px;white-space:nowrap;font-family:var(--ti-serif);font-style:italic;font-weight:300;font-size:30px;line-height:1.2;letter-spacing:-.01em;color:var(--ti-ink)}
.ti-marquee li::after{content:'';width:5px;height:5px;border-radius:50%;background:var(--ti-accent);opacity:.75;flex:none}
@keyframes ti-marquee{to{transform:translateX(-50%)}}
@media (max-width:720px){.venues{padding:32px 0 28px}.ti-marquee li{font-size:22px;gap:22px;padding:0 11px}.ti-marquee-track{--ti-marquee-dur:34s}}

/* ===== 8. Number ticker ===== */
[data-ticker]{font-variant-numeric:tabular-nums;display:inline-block;min-width:1ch}

/* ===== 9. Spotlight card + 3D tilt ===== */
.ti-spot{position:relative}
.ti-spot::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;z-index:3;transition:opacity .5s ease;background:radial-gradient(460px circle at var(--mx,50%) var(--my,50%),rgba(200,168,124,.22),transparent 58%)}
@media (hover:hover){.ti-spot:hover::after{opacity:1}.ti-spot:hover{border-color:rgba(154,123,79,.55)}}
.ti-tilt{transform-style:preserve-3d;transition:transform .7s var(--ti-ease),box-shadow .7s ease}
.ti-tilt.is-tilting{transition:transform .1s linear}
.bifurcation-card{overflow:hidden;transition:box-shadow .5s ease,translate .5s var(--ti-ease),border-color .4s ease}
@media (hover:hover){.bifurcation-card:hover{translate:0 -4px;box-shadow:0 30px 60px -30px rgba(10,10,10,.35)}}
.includes-right>div,.planner-grid>div,.benefit,.couples-grid>div{transition:background-color .4s ease}
@media (hover:hover){.includes-right>div:hover,.planner-grid>div:hover{background:#fbfaf7}}

/* ===== 10. Imágenes: <img class="ti-bg"> dentro de .ti-img (lazy nativo + zoom) ===== */
.ti-img{position:relative;overflow:hidden;background:#1a1510}
.ti-img>img.ti-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;margin:0;max-width:none;transition:transform 1.4s var(--ti-ease);will-change:transform}
.ti-img:before{z-index:1}
.ti-img>*:not(.ti-bg){position:relative;z-index:2}
.ti-img>.play-badge{z-index:3}
@media (hover:hover){
  .gallery-grid figure:hover img.ti-bg,.grid-masonry figure:hover img.ti-bg,.bifurcation-card:hover img.ti-bg{transform:scale(1.07)}
  .gallery-grid figure,.grid-masonry figure{transition:translate .6s var(--ti-ease),box-shadow .6s ease,filter .6s ease}
  .gallery-grid figure:hover,.grid-masonry figure:hover{translate:0 -6px;box-shadow:0 30px 56px -24px rgba(0,0,0,.5);filter:brightness(1.04);z-index:2}
  .ti-video>video{transition:transform 1s var(--ti-ease)}
  .ti-video:hover>video{transform:scale(1.06)}
  .grid-masonry figcaption,.gallery-grid figcaption{transition:translate .6s var(--ti-ease)}
  .grid-masonry figure:hover figcaption,.gallery-grid figure:hover figcaption{translate:0 -4px}
}
.ti-parallax{scale:1.18;will-change:translate}

/* ===== 11. Timeline (proceso / alianza / pasos) ===== */
.ti-timeline .process-line,.ti-timeline .alliance-line,.ti-timeline .steps-line{transform:scaleX(0);transform-origin:left center;transition:transform 2s var(--ti-ease) .2s;background:var(--ti-accent);opacity:.55}
.ti-timeline.is-in .process-line,.ti-timeline.is-in .alliance-line,.ti-timeline.is-in .steps-line{transform:scaleX(1)}
.ti-timeline .process-step,.ti-timeline .alliance-step,.ti-timeline .step{transition:opacity .9s var(--ti-ease),translate .9s var(--ti-ease);transition-delay:calc(var(--i,0)*230ms + 150ms)}
html.ti-anim .ti-timeline:not(.is-in) .process-step,html.ti-anim .ti-timeline:not(.is-in) .alliance-step,html.ti-anim .ti-timeline:not(.is-in) .step{opacity:0;translate:0 22px}
.process-circle,.alliance-circle,.step-circle{transition:border-color .6s ease,scale .7s var(--ti-ease),box-shadow .6s ease;transition-delay:calc(var(--i,0)*230ms + 500ms)}
.ti-timeline.is-in .process-circle,.ti-timeline.is-in .alliance-circle,.ti-timeline.is-in .step-circle{border-color:var(--ti-accent);box-shadow:0 0 0 6px rgba(154,123,79,.08)}
.ti-timeline.is-in .process-step:first-child .process-circle,.ti-timeline.is-in .alliance-step:first-child .alliance-circle{box-shadow:0 0 0 8px rgba(10,10,10,.06)}
@media (max-width:720px){
  .ti-timeline .process-steps,.ti-timeline .alliance-steps,.ti-timeline .steps-grid{gap:0}
  .ti-timeline .process-step,.ti-timeline .alliance-step,.ti-timeline .step{display:grid;grid-template-columns:56px 1fr;column-gap:22px;text-align:left;padding:0 0 40px;position:relative}
  .ti-timeline .process-step:last-child,.ti-timeline .alliance-step:last-child,.ti-timeline .step:last-child{padding-bottom:0}
  .ti-timeline .process-circle,.ti-timeline .alliance-circle,.ti-timeline .step-circle{width:56px;height:56px;font-size:20px;margin:0;grid-row:1/3;align-self:start;display:inline-flex}
  .ti-timeline .process-step h4,.ti-timeline .alliance-step h4,.ti-timeline .step h4{margin-top:14px;margin-bottom:8px}
  .ti-timeline .process-step p,.ti-timeline .alliance-step p,.ti-timeline .step p{max-width:none;margin:0;font-size:14px}
  .ti-timeline .process-step::before,.ti-timeline .alliance-step::before,.ti-timeline .step::before{content:'';position:absolute;left:28px;top:60px;bottom:4px;width:1px;background:var(--ti-accent);opacity:.45;transform:scaleY(0);transform-origin:top;transition:transform .9s var(--ti-ease);transition-delay:calc(var(--i,0)*230ms + 350ms)}
  .ti-timeline.is-in .process-step::before,.ti-timeline.is-in .alliance-step::before,.ti-timeline.is-in .step::before{transform:scaleY(1)}
  .ti-timeline .process-step:last-child::before,.ti-timeline .alliance-step:last-child::before,.ti-timeline .step:last-child::before{display:none}
}

/* ===== 12. Acordeón (FAQ) ===== */
.faq-item .answer{overflow:hidden}
.faq-item summary{transition:color .3s ease}
.faq-item .sign{transition:transform .5s var(--ti-ease),color .3s ease}
@media (hover:hover){.faq-item summary:hover .sign{color:var(--ti-accent)}}
.faq-item[open] .sign{color:var(--ti-accent)}

/* ===== 13. Border beam ===== */
.ti-beam{position:relative}
.ti-beam::before{content:'';position:absolute;inset:-1px;padding:1px;border-radius:inherit;pointer-events:none;z-index:4;background:conic-gradient(from var(--ti-a),transparent 0 60%,var(--ti-champagne) 82%,#fff 88%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;animation:ti-beam 5.5s linear infinite}
@keyframes ti-beam{to{--ti-a:360deg}}

/* ===== 14. Botones (Shimmer + magnetic + estados) ===== */
.ti-btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .25s var(--ti-ease),background-color .35s ease,color .35s ease,border-color .35s ease,box-shadow .35s ease,opacity .25s ease}
.ti-btn::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.22) 50%,transparent 62%);transform:translateX(-130%)}
.ti-btn-solid::after,.ti-btn-white::after{animation:ti-shimmer 4.2s ease-in-out infinite}
.ti-btn-white::after{background:linear-gradient(105deg,transparent 38%,rgba(10,10,10,.09) 50%,transparent 62%)}
@keyframes ti-shimmer{0%{transform:translateX(-130%)}42%,100%{transform:translateX(130%)}}
.ti-btn:hover{opacity:1;background:rgba(154,123,79,.14)}
.ti-btn-ghost:hover{background:var(--ti-ink);color:#fff;border-color:var(--ti-ink)}
.ti-btn-white-ghost:hover{background:#fff;color:#0a0a0a;border-color:#fff}
.ti-btn-solid:hover{background:var(--ti-black);box-shadow:0 16px 36px -12px rgba(10,10,10,.55)}
.ti-btn-white:hover{background:#fff;box-shadow:0 16px 36px -12px rgba(0,0,0,.35)}
.ti-btn:active{transform:scale(.97)}
.ti-btn svg,.link svg,.bifurcation-card .cta svg,.gallery-link a svg{transition:transform .4s var(--ti-ease)}
.ti-btn:hover svg,.link:hover svg,.bifurcation-card:hover .cta svg,.gallery-link a:hover svg{transform:translateX(5px)}
@media (min-width:1025px){
  .site-header .site-nav a:not(.active):after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:1px;background:currentColor;opacity:.55;transform:scaleX(0);transform-origin:left center;transition:transform .4s var(--ti-ease)}
  .site-header .site-nav a:not(.active):hover:after{transform:scaleX(1)}
}
.header-right .login-link{transition:opacity .2s,translate .25s var(--ti-ease)}
.header-right .login-link:hover{translate:0 -1px}
.filters .chip{transition:background-color .25s ease,color .25s ease,border-color .25s ease,translate .25s var(--ti-ease)}
@media (hover:hover){.filters .chip:hover{translate:0 -1px}}
.footer-grid .social a{transition:border-color .3s ease,color .3s ease,translate .3s var(--ti-ease)}
@media (hover:hover){.footer-grid .social a:hover{translate:0 -2px}}
.footer-grid ul li a{position:relative}
.footer-grid ul li a::after{content:'';position:absolute;left:0;bottom:-3px;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ti-ease);opacity:.6}
.footer-grid ul li a:hover::after{transform:scaleX(1)}

/* ===== 15. Aurora (secciones oscuras) ===== */
.ti-aurora{position:relative;overflow:hidden;isolation:isolate}
.ti-aurora::before,.ti-aurora::after{content:'';position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:-1;opacity:.6}
.ti-aurora::before{width:60vw;height:60vw;max-width:820px;max-height:820px;left:-14%;top:-32%;background:radial-gradient(circle,rgba(200,168,124,.5),transparent 62%);animation:ti-aurora-a 20s ease-in-out infinite alternate}
.ti-aurora::after{width:52vw;height:52vw;max-width:720px;max-height:720px;right:-12%;bottom:-34%;background:radial-gradient(circle,rgba(154,123,79,.5),transparent 62%);animation:ti-aurora-b 24s ease-in-out infinite alternate}
@keyframes ti-aurora-a{to{transform:translate(20%,24%) scale(1.15)}}
@keyframes ti-aurora-b{to{transform:translate(-18%,-22%) scale(1.1)}}
@media (max-width:720px){.ti-aurora::before,.ti-aurora::after{filter:blur(44px);opacity:.5}}

/* ===== 16. Grain (solo puntero fino) ===== */
@media (hover:hover) and (pointer:fine){
  html.js body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:8000;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:260px 260px}
}

/* ===== 17. Dock de WhatsApp (móvil) ===== */
.ti-dock{position:fixed;right:18px;bottom:18px;z-index:900;width:58px;height:58px;border-radius:50%;background:#0a0a0a;color:#fff;display:none;align-items:center;justify-content:center;box-shadow:0 18px 40px -14px rgba(0,0,0,.6);opacity:0;translate:0 20px;scale:.8;transition:opacity .45s var(--ti-ease),translate .45s var(--ti-ease),scale .45s var(--ti-ease)}
.ti-dock.is-on{opacity:1;translate:none;scale:1}
.ti-dock svg{width:26px;height:26px;display:block}
.ti-dock::before{content:'';position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(154,123,79,.6);animation:ti-pulse 2.6s ease-out infinite}
@keyframes ti-pulse{0%{transform:scale(.85);opacity:1}100%{transform:scale(1.4);opacity:0}}
@media (max-width:1024px){.ti-dock{display:flex}}
body.menu-open .ti-dock,body.lightbox-open .ti-dock{opacity:0;pointer-events:none}

/* ===== 18. Lightbox con transiciones ===== */
.lightbox{display:flex;opacity:0;visibility:hidden;pointer-events:none;background:rgba(6,5,4,.9);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transition:opacity .45s ease,visibility 0s linear .45s}
.lightbox.open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .45s ease}
.lightbox-stage img,.lightbox-stage video{animation:ti-lb-in .6s var(--ti-ease) both;box-shadow:0 40px 100px -30px rgba(0,0,0,.8)}
.lightbox-stage.is-prev img,.lightbox-stage.is-prev video{animation-name:ti-lb-in-prev}
@keyframes ti-lb-in{from{opacity:0;transform:translateX(34px) scale(.98)}}
@keyframes ti-lb-in-prev{from{opacity:0;transform:translateX(-34px) scale(.98)}}
.lightbox-caption,.lightbox-counter,.lightbox-close,.lightbox-prev,.lightbox-next{transition:opacity .4s ease .15s,translate .55s var(--ti-ease) .15s,background .2s ease,border-color .2s ease}
.lightbox:not(.open) .lightbox-caption{opacity:0;translate:0 10px}
.lightbox:not(.open) .lightbox-counter,.lightbox:not(.open) .lightbox-close{opacity:0}

/* ===== 19. Menú móvil (stagger) ===== */
@media (max-width:1024px){
  .site-nav{transition:transform .6s var(--ti-ease),visibility 0s linear .6s;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:36px}
  .site-nav.open{transition:transform .6s var(--ti-ease)}
  .site-nav::before{content:'';position:fixed;left:-20%;right:-20%;bottom:-30%;height:70%;background:radial-gradient(ellipse at center,rgba(200,168,124,.2),transparent 62%);pointer-events:none}
  .site-nav>a{opacity:0;translate:0 18px;transition:opacity .7s var(--ti-ease),translate .7s var(--ti-ease);position:relative}
  .site-nav.open>a{opacity:1;translate:none;transition-delay:calc(140ms + var(--i,0)*55ms)}
  .site-nav>a:nth-child(1){--i:0}.site-nav>a:nth-child(2){--i:1}.site-nav>a:nth-child(3){--i:2}.site-nav>a:nth-child(4){--i:3}.site-nav>a:nth-child(5){--i:4}.site-nav>a:nth-child(6){--i:5}.site-nav>a:nth-child(7){--i:6}
  .nav-mobile-extra{display:flex;flex-direction:column;gap:16px;margin-top:auto;padding-top:28px;border-top:1px solid rgba(255,255,255,.14);width:100%;opacity:0;transition:opacity .7s ease .55s;position:relative}
  .site-nav.open .nav-mobile-extra{opacity:1}
  .nav-mobile-extra .ti-btn{justify-content:center;min-height:52px}
  .nav-mobile-extra .plain{font-family:var(--ti-sans)!important;font-style:normal!important;font-size:12px!important;letter-spacing:.2em!important;text-transform:uppercase!important;color:#c8c2b5!important;opacity:1!important;padding:8px 0}
  .nav-mobile-extra .nav-contact{font-size:12px;letter-spacing:.06em;color:#9a9388;line-height:1.9}
  .nav-mobile-extra .nav-contact a{font:inherit;color:#e8e3d9;letter-spacing:.06em;text-transform:none;opacity:1}
}
@media (min-width:1025px){.nav-mobile-extra,.site-nav .nav-more{display:none}}
@media (max-width:1024px) and (min-height:700px){.site-nav{gap:24px}}
@media (max-width:1024px) and (max-height:699px){.site-nav{gap:14px;padding-top:84px}.site-nav a{font-size:22px}}

/* ===== 20. Formulario de contacto ===== */
.field{position:relative}
.field::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ti-champagne);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ti-ease)}
.field:focus-within::after{transform:scaleX(1)}
.field label{transition:color .3s ease}
.field:focus-within label{color:var(--ti-champagne)}
.contact-form input,.contact-form select,.contact-form textarea{min-height:44px}
.contact-form input[type="date"]{color-scheme:dark}
.form-success{grid-column:1/-1;border:1px solid rgba(200,168,124,.45);padding:24px 26px;font-size:14px;line-height:1.7;color:#e8e3d9;animation:ti-rise .8s var(--ti-ease) both}
.form-success strong{display:block;font-family:var(--ti-serif);font-style:italic;font-weight:300;font-size:26px;color:#fff;margin-bottom:8px;letter-spacing:-.01em}
.form-success a{color:var(--ti-champagne);text-decoration:underline;text-underline-offset:3px}
.form-success .again{display:inline-block;margin-top:14px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#9a9388;text-decoration:none;cursor:pointer}
.form-success .again:hover{color:#fff}
@media (max-width:720px){.form-success{grid-column:1}}

/* ===== 21. Filtros de proyectos ===== */
.filters-meta{max-width:1280px;margin:22px auto 0;display:flex;justify-content:center;align-items:center;gap:14px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ti-mute);min-height:24px}
.filters-meta .pill{display:inline-flex;align-items:center;gap:10px;padding:6px 6px 6px 12px;border:1px solid var(--ti-accent);color:var(--ti-ink);font-family:var(--ti-serif);font-style:italic;font-weight:300;font-size:16px;letter-spacing:0;text-transform:none;animation:ti-rise .5s var(--ti-ease) both}
.filters-meta .pill button{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;font-size:12px;color:var(--ti-mute);transition:background .2s,color .2s}
.filters-meta .pill button:hover{background:var(--ti-ink);color:#fff}
.filters .chip{min-height:38px}
.filters .chip.active{box-shadow:0 10px 24px -14px rgba(10,10,10,.6)}

/* ===== 22. Cursor custom (solo puntero fino, activado por JS) ===== */
html.ti-cursor,html.ti-cursor *{cursor:none}
.ti-cursor-dot,.ti-cursor-ring{position:fixed;top:0;left:0;border-radius:50%;pointer-events:none;z-index:99999;transform:translate(-50%,-50%);opacity:0;will-change:transform}
.ti-cursor-ready .ti-cursor-dot,.ti-cursor-ready .ti-cursor-ring{opacity:1}
.ti-cursor-dot{width:7px;height:7px;background:var(--ti-accent);transition:opacity .3s ease,width .25s ease,height .25s ease}
.ti-cursor-ring{width:30px;height:30px;border:1px solid rgba(154,123,79,.55);transition:opacity .3s ease,width .35s var(--ti-ease),height .35s var(--ti-ease),background-color .35s ease,border-color .35s ease}
.ti-cursor-ring.is-active{width:56px;height:56px;background:rgba(154,123,79,.12);border-color:rgba(154,123,79,.85)}
.ti-cursor-dot.is-active{width:4px;height:4px}
.ti-cursor-ring.is-down{width:22px;height:22px;background:rgba(154,123,79,.18)}
.ti-cursor-dot.is-down{width:11px;height:11px}
.ti-cursor-ring.is-media{width:84px;height:84px;background:rgba(10,10,10,.55);border-color:transparent}
.ti-cursor-ring.is-media::after{content:'Ver';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--ti-sans);font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:#fff}
.ti-cursor-dot.is-media{opacity:0}

/* ===== 23. Backdrop words (parallax por JS) ===== */
.ti-backdrop{will-change:translate}

/* ===== 24. EventOS · beams ===== */
.hero-beams{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero-beams span{position:absolute;top:-180px;width:1px;height:180px;background:linear-gradient(180deg,transparent,var(--ti-champagne) 60%,transparent);opacity:.8;left:var(--x);animation:ti-beam-fall var(--t,7s) linear infinite;animation-delay:var(--dl,0s)}
.hero-beams span.h{width:180px;height:1px;left:-180px;top:var(--y);background:linear-gradient(90deg,transparent,var(--ti-champagne) 60%,transparent);animation-name:ti-beam-run}
@keyframes ti-beam-fall{to{transform:translateY(calc(100vh + 360px))}}
@keyframes ti-beam-run{to{transform:translateX(calc(100vw + 360px))}}
@keyframes ti-float{from{translate:0 0}to{translate:0 -14px}}
.what-img{animation:ti-float 5s ease-in-out infinite alternate}

/* ===== 25. Reduced motion: apagar todo ===== */
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  html.ti-hold .ti-curtain{display:none}
  html.js :is(.hero-center,.page-header-inner,.contact-hero-inner,.identity-grid>div)>*,
  html.js :is(.legal-page>.ti-eyebrow,.legal-page>h1,.legal-page>.updated,.identity-img,.hero-caption,.scroll-cue,.site-header),
  .ti-split .w,.grid-masonry figure.ti-pop,.form-success,.filters-meta .pill{animation:none!important;opacity:1!important;translate:none!important;filter:none!important}
  html.js .hero .hero-bg{transform:none!important}
  html.ti-anim [data-ti-reveal]{opacity:1!important;translate:none!important;filter:none!important;transition:none!important}
  .ti-timeline .process-line,.ti-timeline .alliance-line,.ti-timeline .steps-line,.ti-timeline .process-step::before,.ti-timeline .alliance-step::before,.ti-timeline .step::before{transform:none!important;transition:none!important}
  html.ti-anim .ti-timeline:not(.is-in) .process-step,html.ti-anim .ti-timeline:not(.is-in) .alliance-step,html.ti-anim .ti-timeline:not(.is-in) .step{opacity:1;translate:none}
  .ti-marquee-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .ti-marquee-track>ul[aria-hidden]{display:none}
  .ti-marquee{-webkit-mask:none;mask:none}
  .ti-btn::after,.ti-beam::before,.ti-aurora::before,.ti-aurora::after,.ti-dock::before,.hero-beams span,.what-img{animation:none!important}
  .ti-btn,.ti-tilt,.bifurcation-card,.gallery-grid figure,.grid-masonry figure,.ti-img>img.ti-bg,.ti-video>video,.filters .chip,.footer-grid .social a,.header-right .login-link,.site-header,.lightbox,.site-nav,.site-nav>a{transition:none!important;transform:none!important;translate:none!important}
  .lightbox-stage img,.lightbox-stage video{animation:none!important}
  .site-nav.open>a{opacity:1}
  .ti-parallax{scale:1;translate:none!important}
  .ti-backdrop{translate:none!important}
  .ti-progress{display:none}
}
