/* Evita el scroll horizontal. "clip" no rompe position: sticky; "hidden" solo es respaldo para navegadores antiguos */
html { background: #0d0d10; overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
body { font-family: Inter, system-ui, sans-serif; color: #efebe3; -webkit-font-smoothing: antialiased; }
img, video, svg { max-width: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
:focus-visible { outline: 2px solid #9a9bff; outline-offset: 3px; }

.wrap { width: 100%; max-width: 1600px; margin: 0 auto; padding-inline: clamp(1rem, 4vw, 3.5rem); }

/* ---------- Tipografía extrema ---------- */
.mega { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; letter-spacing: -0.055em; line-height: .88; font-size: clamp(2.6rem, 15.5vw, 17rem); }
@media (max-width: 480px) { .mega { font-size: max(2.5rem, 13.5vw); } }
.hero-title { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; letter-spacing: -0.04em; line-height: 1; font-size: clamp(1.65rem, 8.6vw, 5rem); }
@media (min-width: 1024px) { .hero-title { font-size: clamp(3rem, 4.6vw, 5.25rem); } }
.hero-lead { margin-top: clamp(1.5rem, 3vw, 2.5rem); max-width: 38rem; color: #9d9da9; font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.6; }
.hero-actions { margin-top: clamp(2rem, 4vw, 3rem); }
.line { display: block; overflow: hidden; padding: .08em .05em .14em 0; margin: -.08em 0 -.14em; }
.line-inner { display: block; will-change: transform; }

/* ---------- Carrusel ---------- */
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; width: max-content; }
.marquee:not(.js-driven) .marquee-track { animation: scroll 30s linear infinite; }
.marquee-group { display: flex; gap: 1rem; padding-right: 1rem; }
@keyframes scroll { to { transform: translateX(-50%); } }
.chip { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.8rem; border: 1px solid #2c2c36; border-radius: 999px; background: #17171d; white-space: nowrap; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 500; font-size: 1.25rem; }
.chip i { font-size: 2rem; line-height: 1; }

/* ---------- Elementos flotantes ---------- */
.floater { position: absolute; display: grid; place-items: center; box-shadow: 0 25px 50px -15px rgba(0,0,0,.7); will-change: transform; }

/* ---------- Tarjetas apiladas ---------- */
.stack-card { position: sticky; top: calc(5.5rem + var(--i) * 1.75rem); margin-bottom: 14vh; }
.stack-card:last-child { margin-bottom: 0; }
.card-inner { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(1.5rem, 3vw, 3rem); min-height: min(74vh, 720px); padding: clamp(1.5rem, 3vw, 3rem); background: var(--bg); border: 1px solid #34343f; border-radius: 3rem; overflow: hidden; transform-origin: 50% 0; box-shadow: 0 -30px 60px -30px rgba(0,0,0,.8); }
.card-info { display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; }
.flip .card-info { order: 2; }
.big-num { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; line-height: .8; letter-spacing: -0.06em; font-size: clamp(5.5rem, 11vw, 11rem); color: transparent; -webkit-text-stroke: 2px #efebe3; }
.card-title { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; letter-spacing: -0.035em; line-height: 1; font-size: clamp(1.75rem, 3.2vw, 3.25rem); overflow-wrap: anywhere; }
.tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.tags span { border: 1px solid #3a3a46; border-radius: 999px; padding: .3rem .85rem; font-size: .85rem; color: #b9b9c4; }

/* Collage asimétrico: tres capturas superpuestas */
.collage { position: relative; border-radius: 2rem; background: var(--tint); min-height: 320px; overflow: hidden; }
.shot { position: absolute; overflow: hidden; background: #0c0c10; border: 1px solid #3c3c48; box-shadow: 0 30px 70px -20px rgba(0,0,0,.75); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.shot .bar { height: 24px; background: #1d1d25; display: flex; align-items: center; gap: 6px; padding: 0 12px; }
.shot .bar span { width: 8px; height: 8px; border-radius: 50%; background: #3a3a46; }
.shot .ph { position: absolute; inset: 0; background: var(--g); }
.shot .bar + .ph { top: 24px; }
.shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.s1 { width: 68%; aspect-ratio: 16/10; left: -6%; top: 9%; border-radius: 16px; transform: rotate(-3deg); z-index: 1; }
.s2 { width: 52%; aspect-ratio: 4/3; right: -5%; bottom: 8%; border-radius: 16px; transform: rotate(4deg); z-index: 2; }
.s3 { width: 21%; aspect-ratio: 9/19; right: 14%; top: 7%; border-radius: 24px; transform: rotate(-6deg); z-index: 3; }
.collage:hover .s1 { transform: rotate(-4.5deg) translate(-8px, -6px); }
.collage:hover .s2 { transform: rotate(5.5deg) translate(8px, 6px); }
.collage:hover .s3 { transform: rotate(-9deg) translateY(-10px); }

@media (max-width: 767px) {
  .stack-card { position: relative; top: 0; margin-bottom: 2rem; }
  .card-inner { grid-template-columns: 1fr; min-height: 0; border-radius: 2rem; }
  .flip .card-info { order: 0; }
  .collage { min-height: 300px; }
}

/* ---------- Botones y formulario ---------- */
.pill { transition: transform .35s cubic-bezier(.2,.8,.2,1), background .3s, color .3s; }
.pill:hover { transform: scale(1.06); background: #9a9bff; color: #0d0d10; }
.pill-outline { border: 1px solid #3c3c48; color: #efebe3; }
.pill-outline:hover { background: transparent; color: #9a9bff; border-color: #9a9bff; }
.field { width: 100%; background: #17171d; border: 1px solid #2c2c36; border-radius: 14px; padding: .9rem 1.1rem; color: #efebe3; transition: border-color .25s, box-shadow .25s, background .25s; }
.field:focus { outline: none; border-color: #9a9bff; background: #1b1b23; box-shadow: 0 0 0 4px rgba(154,155,255,.18), 0 0 30px -4px rgba(154,155,255,.45); }
.field.invalid { border-color: #ff7a8a; }

/* ---------- Redes sociales ---------- */
.social-link { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid #3c3c48; border-radius: 999px; font-size: 1.3rem; color: #efebe3; transition: color .3s, border-color .3s, transform .35s cubic-bezier(.2,.8,.2,1); }
.social-link:hover { color: #9a9bff; border-color: #9a9bff; transform: translateY(-3px); }
.header-social .social-link { width: 2.25rem; height: 2.25rem; font-size: 1.05rem; }

/* ---------- Hero: foto ---------- */
.hero-photo { background: linear-gradient(160deg, #17171d, #131318); }

/* ---------- Categorías de skills (puntos de color) ---------- */
.dot-backend  { background: #3d9bff; box-shadow: 0 0 8px #3d9bff; }
.dot-frontend { background: #3dff9a; box-shadow: 0 0 8px #3dff9a; }
.dot-db       { background: #ff9f3d; box-shadow: 0 0 8px #ff9f3d; }
.dot-tools    { background: #d9d9e3; box-shadow: 0 0 8px rgba(217,217,227,.6); }

/* ---------- Etiqueta de rol en proyectos ---------- */
.tags .role { border-color: #9a9bff; color: #9a9bff; }

/* ---------- Modales: altura correcta en móviles (la barra del navegador no la recorta) ---------- */
@supports (height: 100dvh) {
  [data-modal-scroll] { max-height: 88dvh; }
}

/* ---------- Selector de idioma ES / EN ---------- */
.lang-toggle { display: inline-flex; align-items: center; padding: 2px; border: 1px solid #3c3c48; border-radius: 999px; background: transparent; color: #9d9da9; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: .72rem; line-height: 1; cursor: pointer; transition: border-color .3s; }
.lang-toggle:hover { border-color: #9a9bff; }
.lang-toggle span { padding: .45rem .7rem; border-radius: 999px; transition: background .25s, color .25s; }
.lang-toggle span.is-active { background: #efebe3; color: #0d0d10; }

/* ---------- Botón del menú móvil ---------- */
.menu-toggle { width: 2.25rem; height: 2.25rem; border: 1px solid #3c3c48; border-radius: 999px; background: transparent; color: #efebe3; cursor: pointer; transition: color .3s, border-color .3s; }
.menu-toggle:hover { color: #9a9bff; border-color: #9a9bff; }