html{scroll-behavior:smooth}
body{margin:0;background:#0a0c10;color:#ffffff;font-family:'Instrument Sans',system-ui,sans-serif;font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:#b8c3d6;text-decoration:none}
a:hover{color:#ffffff}
h1,h2,h3{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:700;line-height:1.12;letter-spacing:-0.01em;margin:0}
p{text-wrap:pretty}
[data-scroller]{scrollbar-width:none;-ms-overflow-style:none}
[data-scroller]::-webkit-scrollbar{display:none}
[data-scroller]:hover > [data-anim]{animation-play-state:paused}

/* Atlas fijo de fondo: las secciones siguientes lo tapan al pasar por encima */
#inicio ~ section,#inicio ~ footer{position:relative;z-index:1}
/* Pantalla de inicio: el logo se arma letra por letra y el telón sube */
[data-intro]{position:fixed;inset:0;z-index:100;background:#0a0c10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;clip-path:inset(0 0 0 0);animation:telon 1s cubic-bezier(.76,0,.24,1) 1.55s forwards}
@keyframes telon{to{clip-path:inset(0 0 100% 0)}}
[data-intro-logo]{display:flex;overflow:hidden;font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:700;font-size:clamp(3.2rem,9vw,6.5rem);letter-spacing:-0.03em;line-height:1.15;animation:logo-sale .9s cubic-bezier(.76,0,.24,1) 1.5s forwards}
[data-intro-logo] span{display:inline-block;transform:translateY(110%);animation:letra .8s cubic-bezier(.22,1,.36,1) forwards}
[data-intro-logo] span:nth-child(2){animation-delay:.07s}
[data-intro-logo] span:nth-child(3){animation-delay:.14s}
[data-intro-logo] span:nth-child(4){animation-delay:.21s}
[data-intro-logo] span:nth-child(5){animation-delay:.28s}
[data-intro-logo] span:nth-child(6){animation-delay:.42s;color:#b8c3d6}
@keyframes letra{to{transform:none}}
@keyframes logo-sale{to{transform:translateY(-40px);opacity:0}}
[data-intro-linea]{width:min(15rem,55vw);height:1px;background:linear-gradient(90deg,transparent,#b8c3d6,transparent);transform:scaleX(0);animation:linea 1s cubic-bezier(.22,1,.36,1) .45s forwards}
@keyframes linea{to{transform:scaleX(1)}}
[data-intro-sub]{font-size:.78rem;letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,.55);opacity:0;animation:aparece .8s ease .7s forwards}
@keyframes aparece{to{opacity:1}}

/* El Atlas entra deslizándose desde la izquierda cuando sube el telón */
[data-hero-img]{animation:atlas-entra 2s cubic-bezier(.16,1,.3,1) 1.85s both,atlas-respira 14s ease-in-out 4s infinite alternate}
@keyframes atlas-entra{from{opacity:0;translate:-110vw 0}}
@keyframes atlas-respira{to{opacity:.24}}

/* Entrada del hero, escalonada con animation-delay en cada elemento */
[data-hero-in]{animation:sube 1s cubic-bezier(.22,1,.36,1) both}
@keyframes sube{from{opacity:0;transform:translateY(28px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
[data-dot]{animation:latido 2.4s ease-in-out infinite}
@keyframes latido{50%{opacity:.25;transform:scale(.7)}}
[data-hero] a:hover > span{transform:translateX(5px)}

/* Aparición al hacer scroll (el retraso escalonado lo pone main.js) */
[data-reveal]{opacity:0;transform:translateY(36px);filter:blur(6px);transition:opacity .9s ease,transform .9s cubic-bezier(.22,1,.36,1),filter .9s ease,border-color .3s ease,box-shadow .3s ease}
[data-reveal].in-view{opacity:1;transform:none;filter:none}

/* Tarjetas: se elevan al pasar el mouse */
[data-reveal][style*="border-radius:1.1rem"].in-view:hover,
[data-reveal][style*="border-radius:1.75rem"].in-view:hover{transform:translateY(-6px);border-color:rgba(184,195,214,.35) !important;box-shadow:0 34px 70px -34px rgba(0,0,0,.9)}

/* Tarjetas de trabajos: 3 columnas en compu, una debajo de otra en pantallas chicas */
[data-trabajos]{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
@media (max-width:900px){[data-trabajos]{grid-template-columns:minmax(0,34rem) !important;justify-content:center}}
/* La captura se acerca y la flecha se mueve */
[data-trabajo-img]{transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
[data-trabajo]:hover [data-trabajo-img]{transform:scale(1.06)}
[data-trabajo]:hover [data-flecha]{transform:translate(3px,-3px)}

/* Palabras en cursiva de los títulos: brillo que las recorre al aparecer */
h2 span[style*="Instrument Serif"]{background:linear-gradient(100deg,currentColor 40%,#ffffff 50%,currentColor 60%) 0 0/250% 100% no-repeat;-webkit-background-clip:text;background-clip:text}
.in-view h2 span[style*="Instrument Serif"],h2.in-view span[style*="Instrument Serif"]{-webkit-text-fill-color:transparent;animation:brillo 2.2s ease .5s both}
@keyframes brillo{from{background-position:100% 0}to{background-position:0 0}}

/* Barra de progreso de lectura */
[data-progress]{position:fixed;top:0;left:0;right:0;height:2px;z-index:80;background:linear-gradient(90deg,#2f4a78,#b8c3d6);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}

/* Botón de WhatsApp: onda suave alrededor */
[data-chatfab]::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid rgba(255,255,255,.45);animation:onda 2.8s ease-out infinite;pointer-events:none}
@keyframes onda{from{transform:scale(1);opacity:.8}to{transform:scale(1.7);opacity:0}}

/* ---------- Barra superior ---------- */
[data-topbar]{position:fixed;top:0;left:0;right:0;z-index:60;background:rgba(7,9,13,.55);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid rgba(255,255,255,.07);transition:background .4s ease,transform .5s cubic-bezier(.22,1,.36,1),box-shadow .4s ease;animation:barra-entra 1s cubic-bezier(.22,1,.36,1) 2.15s both}
@keyframes barra-entra{from{transform:translateY(-100%);opacity:0}}
[data-topbar].solida{background:rgba(7,9,13,.92);box-shadow:0 18px 40px -24px rgba(0,0,0,.9)}
[data-topbar].oculta{transform:translateY(-100%)}
[data-topbar-in]{position:relative;max-width:84rem;margin:0 auto;padding:0 2.5rem;height:4.5rem;display:flex;align-items:center;justify-content:space-between;gap:2rem}
[data-logo]{display:inline-flex;align-items:center;gap:.6rem;color:#ffffff;font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:700;font-size:1.3rem;letter-spacing:-0.02em}
[data-logo]:hover{color:#ffffff}
[data-logo] svg{color:#b8c3d6;transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
[data-logo]:hover svg{transform:rotate(180deg)}
[data-navlinks]{display:flex;align-items:center;gap:2.25rem;font-size:.92rem}
[data-navlinks] a{position:relative;color:rgba(255,255,255,.72);padding:.35rem 0;transition:color .25s ease}
[data-navlinks] a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#ffffff;transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.22,1,.36,1)}
[data-navlinks] a:hover,[data-navlinks] a.activo{color:#ffffff}
[data-navlinks] a:hover::after,[data-navlinks] a.activo::after{transform:scaleX(1);transform-origin:left}
[data-topbar-acc]{display:flex;align-items:center;gap:1.25rem}
[data-cupos]{display:inline-flex;align-items:center;gap:.5rem;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.55)}
[data-cupos] [data-dot]{width:6px;height:6px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.15)}
[data-topcta]{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:.5rem;border:1px solid rgba(255,255,255,.28);color:#ffffff;border-radius:9999px;padding:.55rem 1.15rem;font-size:.88rem;font-weight:600;transition:color .35s ease,border-color .35s ease}
[data-topcta]::before{content:"";position:absolute;inset:0;background:#ffffff;transform:translateY(101%);transition:transform .45s cubic-bezier(.22,1,.36,1);z-index:-1}
[data-topcta]:hover{color:#0b1424;border-color:#ffffff}
[data-topcta]:hover::before{transform:none}
[data-topcta] span{transition:transform .35s ease}
[data-topcta]:hover span{transform:translateX(3px)}
[data-burger]{display:none;flex-direction:column;justify-content:center;align-items:center;gap:6px;width:2.75rem;height:2.75rem;border:1px solid rgba(255,255,255,.18);background:transparent;border-radius:9999px;cursor:pointer}
[data-burger] span{display:block;width:16px;height:1.5px;background:#ffffff;transition:transform .35s ease}
[data-topbar].menu-abierto [data-burger] span:first-child{transform:translateY(3.75px) rotate(45deg)}
[data-topbar].menu-abierto [data-burger] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}

/* ---------- Hero: grilla sutil, cifras e indicador de scroll ---------- */
#inicio::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:76px 76px;-webkit-mask-image:radial-gradient(ellipse 70% 70% at 30% 45%,#000 10%,transparent 75%);mask-image:radial-gradient(ellipse 70% 70% at 30% 45%,#000 10%,transparent 75%);pointer-events:none}
[data-stats]{display:grid;grid-template-columns:repeat(3,minmax(0,13rem));gap:2.5rem;margin-top:4.5rem;padding-top:2rem;border-top:1px solid rgba(255,255,255,.1)}
[data-stat-num]{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:700;font-size:clamp(1.8rem,1.3rem + 1.4vw,2.5rem);letter-spacing:-0.03em;line-height:1}
[data-stat-txt]{margin-top:.5rem;font-size:.88rem;color:rgba(255,255,255,.55);line-height:1.4}
[data-scrollcue]{position:absolute;right:2.5rem;bottom:2.25rem;z-index:1;display:flex;flex-direction:column;align-items:center;gap:.75rem;color:rgba(255,255,255,.5);font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;writing-mode:vertical-rl;animation:aparece 1s ease 3.2s both}
[data-scrollcue]:hover{color:#ffffff}
[data-scrollcue] i{position:relative;display:block;width:1px;height:3.5rem;background:rgba(255,255,255,.15);overflow:hidden}
[data-scrollcue] i::after{content:"";position:absolute;left:0;top:0;width:1px;height:40%;background:#ffffff;animation:cae 2s cubic-bezier(.65,0,.35,1) infinite}
@keyframes cae{from{transform:translateY(-100%)}to{transform:translateY(260%)}}

/* ---------- Cinta con lo que incluye cada página ---------- */
[data-cinta]{overflow:hidden;background:#07090d;border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07);padding:1.6rem 0}
[data-cinta-pista]{display:flex;align-items:center;gap:2.25rem;width:max-content;animation:marquee 38s linear infinite}
[data-cinta]:hover [data-cinta-pista]{animation-play-state:paused}
[data-cinta-pista] span{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:700;font-size:clamp(1.4rem,1rem + 1.4vw,2.2rem);letter-spacing:-0.02em;white-space:nowrap;color:#ffffff}
[data-cinta-pista] span[data-hueco]{color:transparent;-webkit-text-stroke:1px rgba(184,195,214,.7)}
[data-cinta-pista] i{width:.5rem;height:.5rem;border-radius:50%;background:#2f4a78;flex:0 0 auto}

/* ---------- Tarjetas: luz que sigue al mouse ---------- */
[data-spot]{background-image:radial-gradient(460px circle at var(--mx,50%) var(--my,-30%),rgba(184,195,214,.11),transparent 45%) !important}

/* ---------- Botones blancos: reflejo al pasar el mouse ---------- */
a[style*="background:#ffffff;color:#14213d"]{position:relative;overflow:hidden}
a[style*="background:#ffffff;color:#14213d"]::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(20,33,61,.14) 50%,transparent 70%);transform:translateX(-120%);transition:transform .9s cubic-bezier(.22,1,.36,1);pointer-events:none}
a[style*="background:#ffffff;color:#14213d"]:hover::after{transform:translateX(120%)}

/* ---------- Firma grande al pie ---------- */
footer{overflow:hidden}
[data-firma]{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:800;font-size:clamp(6rem,22vw,20rem);line-height:.78;letter-spacing:-0.06em;text-align:center;margin:3rem 0 -0.12em;background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 85%);-webkit-background-clip:text;background-clip:text;color:transparent;user-select:none;transform:translateY(30%);opacity:0;transition:transform 1.4s cubic-bezier(.22,1,.36,1),opacity 1.4s ease}
[data-firma].in-view{transform:none;opacity:1}

@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes girar{100%{transform:rotate(360deg)}}
@media (max-width:900px){
  [data-hero-img]{height:70% !important;right:-35% !important;opacity:.2 !important}
  [data-hero]{gap:3rem !important}
  #inicio{padding-top:7.5rem !important;padding-bottom:6rem !important;min-height:0 !important;display:block !important}
}
@media (max-width:560px){
  #inicio{padding-top:6.5rem !important;padding-bottom:4rem !important}
  [data-hero]{gap:2.5rem !important}
  [data-hero-img]{height:62% !important;right:-38% !important;top:58% !important;opacity:.2 !important}
  [data-sect]{padding-top:3.75rem !important;padding-bottom:3.75rem !important}
  [data-wrap]{padding-inline:1.25rem !important}
  [data-card]{padding:1.25rem !important}
  [data-chatfab]{right:1rem !important;bottom:1rem !important}
  [data-scroller] > div > div{width:13rem !important}
  blockquote{font-size:1.25rem !important}
}
@media (max-width:980px){
  [data-cupos]{display:none}
  [data-navlinks]{gap:1.6rem}
}
@media (max-width:780px){
  [data-topbar-in]{padding:0 1.25rem;height:4rem}
  [data-navlinks]{display:none;position:absolute;top:calc(100% + 1px);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:rgba(7,9,13,.97);border-bottom:1px solid rgba(255,255,255,.08);padding:.5rem 1.25rem 1.25rem}
  [data-navlinks] a{padding:1rem 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:1.05rem}
  [data-navlinks] a::after{display:none}
  [data-navlinks][data-open="1"]{display:flex;animation:menu-baja .35s cubic-bezier(.22,1,.36,1)}
  @keyframes menu-baja{from{opacity:0;transform:translateY(-8px)}}
  [data-burger]{display:inline-flex}
  [data-topcta]{padding:.5rem .95rem;font-size:.82rem}
  [data-stats]{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;margin-top:3rem}
  [data-stat-txt]{font-size:.78rem}
  [data-scrollcue]{display:none}
  [data-hero] h1{font-size:clamp(2.1rem,1.5rem + 4vw,2.9rem) !important}
  [data-hero] a{min-height:48px}
  [data-scroller]{scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  [data-scroller] > div > div{scroll-snap-align:start}
}
@media (prefers-reduced-motion:reduce){
  [data-intro]{display:none}
  [data-topbar],[data-scrollcue],[data-scrollcue] i::after,[data-cinta-pista]{animation:none !important}
  [data-firma]{transform:none;opacity:1;transition:none}
  [data-anim],[data-hero-in],[data-hero-img],[data-dot],[data-chatfab]::after,h2 span[style*="Instrument Serif"]{animation:none !important}
  h2 span[style*="Instrument Serif"]{-webkit-text-fill-color:currentColor !important}
  [data-reveal]{opacity:1;transform:none;filter:none;transition:none}
}