/* Base del portfolio: sticky, Archivo expandida y m?scaras por letra. */
:root{color-scheme:dark;--fondo:rgb(0.982422, 0.982422, 0.982422);--papel:#FFFFFF;--tinta:#0B0B0B;--linea:#DDDCDA;--texto:#F2F0EB;--acento:#FF5A1F;--piedra:#8A8781;--grafito:#454443;font-family:Archivo,Arial,sans-serif;font-stretch:125%}
*{box-sizing:border-box}html{scrollbar-gutter:stable}body{margin:0;background:var(--papel);color:var(--tinta)}a{color:inherit;text-decoration:none}a:focus-visible{outline:2px solid var(--acento);outline-offset:8px}::selection{background:var(--acento);color:var(--tinta)}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.nav{color:var(--texto);position:fixed;z-index:10;top:0;left:0;right:0;height:52px;display:flex;align-items:center;justify-content:space-between;padding:12px 18px;background:transparent;backdrop-filter:none;border:0;box-shadow:none}.nav img{display:block;width:auto;height:30px}.nav__links{display:flex;align-items:center;gap:22px}.nav__links a{font:12px 'JetBrains Mono',monospace;letter-spacing:.04em;opacity:.78;transition:opacity .25s}.nav__links a:hover,.nav__links a[aria-current]{opacity:1}#navContacto{opacity:1}#navContacto::after{content:'\2197';margin-left:.4em;color:var(--acento)}
.hero{height:700vh;background:var(--fondo)}.hero__sticky{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden;background:var(--fondo)}:is(#heroVideo,.cuadro-retenido){position:absolute;left:50%;top:50%;translate:-50% -50%;width:100%;height:100%;object-fit:contain;opacity:1}#carga,.hero__pista{position:absolute;bottom:35px;left:4.5vw;font:11px 'JetBrains Mono',monospace;color:var(--grafito)}.hero__pista{left:auto;right:4.5vw;color:var(--texto);opacity:var(--pista-opacity,1)}
.servicio{min-height:88vh;padding:17vh 7vw 15vh;border-bottom:1px solid var(--linea);display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,30%);align-content:center;gap:5vw}.servicio h2{margin:0;text-transform:uppercase;font-size:clamp(42px,5.7vw,88px);line-height:1.04;letter-spacing:-.055em;font-stretch:125%;font-weight:200}.lt,.hv{display:block}.hv{font-weight:800}.servicio:nth-child(2) .hv{color:var(--acento)}.servicio p{font-size:clamp(16px,1.4vw,21px);line-height:1.65;font-stretch:100%;max-width:32ch;align-self:end;margin:0 0 .25em;color:var(--grafito)}
[data-anim] .sw{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em .1em;margin:0 -.02em -.1em}[data-anim] .sc{display:inline-block;--cp:clamp(0,calc((var(--p,0) * (var(--n,1) + 8) - var(--i,0)) / 8),1);transform:translateY(calc((1 - var(--cp))*108%)) rotate(calc((1 - var(--cp))*6deg))}
.contacto{padding:18vh 7vw 14vh;scroll-margin-top:90px}.contacto h2{font-size:clamp(42px,6.5vw,100px);line-height:1.05;max-width:15ch;font-weight:800;letter-spacing:-.055em;text-transform:uppercase;margin:0 0 40px}.contacto>p{color:var(--grafito);font-size:18px;line-height:1.6}.contacto__links{display:flex;flex-wrap:wrap;gap:26px 50px;margin:65px 0 30px}.contacto__links a{font-size:clamp(16px,2.3vw,32px);border-bottom:1px solid var(--linea);padding-bottom:12px;overflow-wrap:anywhere}.contacto__links a[href]:hover{border-color:var(--acento)}a[aria-disabled]{color:var(--grafito);cursor:default}.contacto .nota{font:11px/1.8 'JetBrains Mono',monospace;max-width:60ch}footer{margin:0 7vw;padding:30px 0;border-top:1px solid var(--linea);display:flex;align-items:center;justify-content:space-between;font:11px 'JetBrains Mono',monospace;color:var(--grafito)}footer img{display:block}#oops{position:fixed;z-index:20;bottom:16px;left:16px;right:16px;padding:16px;background:var(--texto);color:var(--fondo);font-size:14px}
@media(max-width:700px){.nav{height:48px;padding:12px}.nav img{height:26px}.hero{height:1000vh}.hero__pista{right:6vw;bottom:40px}#carga{left:6vw;bottom:72px}.servicio{grid-template-columns:1fr;gap:32px;min-height:78vh;padding:15vh 7vw}.servicio h2{font-size:clamp(35px,9.7vw,65px)}.servicio p{font-size:17px;max-width:30ch}.contacto{padding:15vh 7vw 10vh}.contacto h2{font-size:12vw}.contacto__links{flex-direction:column;align-items:flex-start;margin-top:45px}}
@media(prefers-reduced-motion:reduce){[data-anim] .sc{transform:none}.hero{height:130vh}.hero__pista{display:none}}

/* Inicio vectorial: coordenadas medidas en el cuadro fuente de 1920 × 1080. */
html.cargando{overflow:hidden}html.cargando body{overscroll-behavior:none}
.nav,.hero__pista{visibility:hidden;transition:opacity .45s;opacity:0}
.nav{transition:opacity .45s,background-color .45s,color .45s,backdrop-filter .45s}
.intro-lista .nav{visibility:visible;opacity:1}.intro-lista .hero__pista{visibility:visible;opacity:var(--pista-opacity,1)}
#carga{display:none}
#intro{position:absolute;inset:0;z-index:2;background:var(--fondo);pointer-events:none;display:grid;place-items:center}
#introFrame{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0}
/* El video (con su logo) recién se descubre cuando el logo SVG terminó de armarse: nunca dos logos a la vez. */
.logo-armado #intro{background:transparent}
#introLogo{display:block;width:100%;height:100%;overflow:visible;visibility:hidden}
/* Oculto hasta que main.js lo ubica: antes se veía un instante a 1920 px en la esquina. */.intro-ubicado #introLogo{visibility:visible}html:not(.intro-anima) .intro-symbol{transition:none}
.intro-symbol{transform-origin:255px 506px;transform:translate(705px,34px) scale(var(--loader-scale,1));transition:transform .9s cubic-bezier(.76,0,.18,1)}
.intro-stroke{fill-opacity:1;stroke:none}
.intro-orange{transform:none}
.intro-sweep{pointer-events:none}
.sweep-listo .intro-sweep{display:none}
.despues-hero .nav{background:rgb(255 255 255 / .7);color:var(--tinta);backdrop-filter:blur(10px)}
.armado .intro-symbol{transform:translate(0,0) scale(1)}
.intro-separator{opacity:0;transform-origin:410px 506px;transform:scaleY(0);transition:transform .6s .6s cubic-bezier(.76,0,.18,1),opacity .3s .6s}
.armado .intro-separator{opacity:1;transform:scaleY(1)}
.intro-letter{transform:translateY(85px);transition:transform .65s cubic-bezier(.22,1,.36,1);transition-delay:calc(.75s + var(--letra,0)*35ms)}
.armado .intro-letter{transform:translateY(0)}
.letter-0{--letra:0}
.letter-1{--letra:1}
.letter-2{--letra:2}
.letter-3{--letra:3}
.letter-4{--letra:4}
.letter-5{--letra:5}
.letter-6{--letra:6}
.letter-7{--letra:7}
.letter-8{--letra:8}
.letter-9{--letra:9}
.letter-10{--letra:10}
@media(prefers-reduced-motion:reduce){.intro-symbol,.intro-letter,.intro-separator,.intro-stroke{transition:none}}



/* La caja coincide con la imagen: la mascara funde los bordes reales, incluso en contain. */
:is(#heroVideo,.cuadro-retenido){-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--borde,7%),#000 calc(100% - var(--borde,7%)),transparent),linear-gradient(to bottom,transparent,#000 var(--borde,7%),#000 calc(100% - var(--borde,7%)),transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 var(--borde,7%),#000 calc(100% - var(--borde,7%)),transparent),linear-gradient(to bottom,transparent,#000 var(--borde,7%),#000 calc(100% - var(--borde,7%)),transparent);mask-composite:intersect}

:is(#heroVideo,.cuadro-retenido).sin-mascara{-webkit-mask-image:none;mask-image:none}
@media(prefers-reduced-motion:reduce){.intro-sweep{display:none}}

/* Cargador estilo GTA VI: mientras carga, la S es solo un contorno fino y apagado (sin relleno)
   y la luz recorre ese contorno (máscara #sweepMask con el mismo trazo). Al terminar se rellena. */
.intro-stroke,.intro-orange{transition:fill .25s ease,stroke .25s ease}
#intro:not(.relleno) :is(.intro-stroke,.intro-orange){fill:transparent;stroke:#3b3936;stroke-width:1.4px;vector-effect:non-scaling-stroke}
.relleno .intro-stroke{fill:#F2F0EB;stroke:#F2F0EB}.relleno .intro-orange{fill:#FF5A1F;stroke:#FF5A1F}

/* Salida clara independiente del SVG, latch y fundido de entrada. */
.hero__sticky::after{content:"";position:absolute;inset:0;pointer-events:none;background:#FFFFFF;opacity:calc(var(--cierre,0) * var(--claro,1))}
#inicio{position:relative;display:block}
.nav .logo-oscuro{position:absolute;inset:0;opacity:0;transition:opacity .45s}
#logo{transition:opacity .45s}
.despues-hero #logo{opacity:0}.despues-hero .logo-oscuro{opacity:1}
#servicios,.contacto,footer{color-scheme:light;background:var(--papel)}

/* Vertical: la caja JS interpola contain/cover; conserva la mascara de bordes. */
.video-vertical :is(#heroVideo,.cuadro-retenido){object-fit:contain}
.video-vertical .nav{top:env(safe-area-inset-top,0px)}
#intro.armado-final .intro-symbol{transition:none;transform:translate(0,0) scale(1)}
#intro.armado-final .intro-letter{transition:none;transform:translateY(0)}
#intro.armado-final .intro-separator{transition:none;transform:scaleY(1);opacity:1}

.cuadro-retenido{pointer-events:none}.cuadro-retenido[hidden]{display:none}

/* Textos sobre el video (datos.js → textosVideo; motion en main.js → RECETAS). */
.textos-video{position:absolute;inset:0;z-index:3;pointer-events:none}
.tv{position:absolute;--m:4.5vw;left:var(--m);bottom:13vh;max-width:min(62vw,900px);color:var(--texto);visibility:hidden;text-shadow:0 2px 28px rgb(0 0 0 / .3);perspective:1000px}
.tv--oscuro{color:var(--tinta);text-shadow:none}
.tv__flota{animation:tvFlota 7s ease-in-out infinite;transform-style:preserve-3d}
@keyframes tvFlota{0%,100%{translate:0 0}50%{translate:0 -5px}}
.tv__cuerpo{position:relative;width:fit-content;transform-origin:left center;will-change:transform,filter,opacity}
.tv__linea{margin:0;text-transform:uppercase;font-weight:800;font-size:clamp(34px,4.4vw,76px);line-height:1.02;letter-spacing:-.05em;font-stretch:125%}
.tv__linea .lt,.tv__linea .hv{display:block;width:fit-content;position:relative}
.tv__linea .lt{font-weight:200}
.tv--acento .hv{color:var(--acento)}
.tv--grande{max-width:none}.tv--grande .tv__linea{font-size:clamp(40px,5vw,96px)}
.tv .w{display:inline-block;white-space:nowrap}
.tv .c{display:inline-block;text-align:center;will-change:transform,filter,opacity}
.tv .c--ruido{color:var(--tinta)}
/* Etiqueta en mono que se tipea, con cursor que titila. */
.tv__tag{display:flex;align-items:center;gap:7px;min-height:14px;margin-bottom:16px;font:500 12px/1 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:rgb(242 240 235 / .85);opacity:0}
.tv__tag::before{content:"";width:6px;height:6px;background:var(--acento);flex:none}
.tv--oscuro .tv__tag{color:var(--tinta)}
.tv__cursor{width:.62em;height:1.15em;background:currentColor;animation:tvCursor 1s infinite}
@keyframes tvCursor{0%,49%{opacity:1}50%,100%{opacity:0}}
/* Formas de cada receta. */
.tvf{position:absolute;pointer-events:none}
.tvf--sub{left:.02em;right:.06em;bottom:-.06em;height:.075em;background:var(--acento);transform:scaleX(0);transform-origin:left}
.tvf--punto{right:-.34em;bottom:-.1em;width:.17em;height:.17em;background:var(--acento);transform:scale(0)}
.tvb{position:absolute;top:-.2em;bottom:-.16em;width:.3em;border:3px solid var(--acento);opacity:0}
.tvb--izq{left:-.5em;border-right:0}.tvb--der{right:-.5em;border-left:0}
.tv--r-profundidad .tv__cuerpo{transform-origin:center}
.tv--r-tarjeta3d .tv__linea .lt{margin-bottom:.12em}
.tvf-sel{position:absolute;inset:-.04em -.22em -.06em -.22em;padding:.04em .22em .06em;background:#F2F0EB;color:#0B0B0B;white-space:nowrap;text-shadow:none;clip-path:inset(0 100% 0 0)}
.tvf--capsula{inset:-.26em -.5em -.22em;color:var(--tinta);opacity:0;z-index:-1}.tv--r-decodificar .tv__linea{padding-top:.36em}.tvf-relleno{position:absolute;inset:1.5px;border-radius:999px;background:var(--tinta);clip-path:circle(0 at 50% 50%)}
.tvf svg{display:block;width:100%;height:100%;overflow:visible}
.tvf path{fill:none;stroke:currentColor;stroke-width:2.4px;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
@media(max-width:700px){.tv{--m:6vw;right:var(--m);bottom:15vh;max-width:none}.tv__linea{font-size:clamp(30px,9.4vw,52px)}.tv--grande .tv__linea{font-size:clamp(26px,7.8vw,54px)}.tv__tag{font-size:10.5px;margin-bottom:12px}}
/* Lugar de cada texto según la escena (datos.js: lugar en compu, lugarV en celu). */
html:not(.video-vertical) .tv--h-centro,.video-vertical .tv--v-centro{left:var(--m);right:var(--m);max-width:none;bottom:auto;top:56%;translate:0 -50%;text-align:center}
html:not(.video-vertical) .tv--h-arriba-izq,.video-vertical .tv--v-arriba-izq{bottom:auto;top:15vh}
html:not(.video-vertical) .tv--h-abajo-der,.video-vertical .tv--v-abajo-der{left:auto;right:var(--m);text-align:right}
html:not(.video-vertical) .tv--h-arriba-der,.video-vertical .tv--v-arriba-der{left:auto;right:var(--m);bottom:auto;top:12vh;text-align:right}
.video-vertical .tv--v-abajo-der,.video-vertical .tv--v-arriba-der{left:var(--m)}
/* Con ancho justo (para que las formas abracen el texto), el centrado y la derecha van por margen. */
html:not(.video-vertical) .tv--h-centro :is(.tv__cuerpo,.lt,.hv),.video-vertical .tv--v-centro :is(.tv__cuerpo,.lt,.hv){margin-inline:auto}
html:not(.video-vertical) .tv--h-centro .tv__tag,.video-vertical .tv--v-centro .tv__tag{justify-content:center}
html:not(.video-vertical) :is(.tv--h-abajo-der,.tv--h-arriba-der) :is(.tv__cuerpo,.lt,.hv),.video-vertical :is(.tv--v-abajo-der,.tv--v-arriba-der) :is(.tv__cuerpo,.lt,.hv){margin-left:auto}
html:not(.video-vertical) :is(.tv--h-abajo-der,.tv--h-arriba-der) .tv__tag,.video-vertical :is(.tv--v-abajo-der,.tv--v-arriba-der) .tv__tag{justify-content:flex-end}
html:not(.video-vertical) :is(.tv--h-abajo-der,.tv--h-arriba-der) .tv__cuerpo,.video-vertical :is(.tv--v-abajo-der,.tv--v-arriba-der) .tv__cuerpo{transform-origin:right center}
/* Manito que hace clic y onda del clic (receta decodificar). */
.tv-mano{position:absolute;left:0;top:0;opacity:0;z-index:2;filter:drop-shadow(0 6px 10px rgb(0 0 0 / .25))}.tv-mano svg{display:block;width:100%;height:100%;overflow:visible}.tv-mano path{fill:#F2F0EB;stroke:#0B0B0B;stroke-width:1.3;stroke-linejoin:round}
.tv-onda{position:absolute;left:0;top:0;border:2px solid var(--acento);border-radius:50%;opacity:0;z-index:1}
@media(max-width:700px){.nav__links{gap:13px}.nav__links a{font-size:11px;letter-spacing:.02em}}
/* Secciones que todavía no tienen contenido (Trabajos, Ofertas). */
.pronto{padding:10vh 7vw 14vh;border-bottom:1px solid var(--linea);scroll-margin-top:60px}
.pronto__tag{display:flex;align-items:center;gap:8px;margin:0 0 26px;font:500 12px/1 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--grafito)}
.pronto__tag::before{content:"";width:6px;height:6px;background:var(--acento)}
.pronto h2{margin:0 0 30px;font-size:clamp(42px,6.5vw,100px);line-height:1.04;letter-spacing:-.055em;text-transform:uppercase;font-weight:200}

/* Página Play (play.html): oscura, con la misma barra. */
.pagina-play,.pagina-play body{background:#0B0B0B;color:var(--texto)}
.pagina-play .nav{visibility:visible;opacity:1}
.play{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:18vh 7vw 12vh}
.play .pronto__tag{color:rgb(242 240 235 / .7)}
.play h1{margin:0 0 30px;font-size:clamp(46px,8vw,128px);line-height:1;letter-spacing:-.055em;text-transform:uppercase;font-weight:200;font-stretch:125%}
.play h1 span{font-weight:800;color:var(--acento)}
.play p{max-width:34ch;font-size:clamp(16px,1.4vw,20px);line-height:1.6;color:rgb(242 240 235 / .75);margin:0 0 40px}
.play__volver{font:12px 'JetBrains Mono',monospace;letter-spacing:.04em;border-bottom:1px solid rgb(242 240 235 / .3);padding-bottom:8px;align-self:flex-start}
.play__volver:hover{border-color:var(--acento)}
/* Juego "Cortá todo" (play.js): canvas a pantalla completa, HUD y paneles encima. */
.pagina-play{scrollbar-gutter:auto}.pagina-play body{overflow:hidden;overscroll-behavior:none}
.juego{position:fixed;inset:0;background:#1c1a18 url(assets/play-fondo.jpg) center/cover no-repeat}
@media(orientation:portrait){.juego{background-image:url(assets/play-fondo-vertical.jpg)}}
#escena{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
#juego{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;user-select:none;-webkit-user-select:none;cursor:crosshair}
.juego__panel{position:absolute;inset:0;background:linear-gradient(90deg,rgb(11 11 11 / .78),rgb(11 11 11 / .35));z-index:2}
.juego__panel h1 span{font-variant-numeric:tabular-nums}
.juego__boton{align-self:flex-start;padding:16px 30px 15px;background:none;border:1px solid rgb(242 240 235 / .5);border-radius:999px;color:var(--texto);font:500 12px/1 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:background-color .3s,border-color .3s,color .3s}
.juego__boton:hover,.juego__boton:focus-visible{background:var(--acento);border-color:var(--acento);color:var(--tinta);outline:none}
.juego__acciones{display:flex;align-items:center;gap:34px;flex-wrap:wrap}.juego__acciones .play__volver{align-self:auto}
.juego__hud{position:absolute;left:7vw;right:7vw;top:calc(84px + env(safe-area-inset-top,0px));display:flex;align-items:center;gap:18px;pointer-events:none;z-index:1}
.juego__puntos{margin:0;font-weight:800;font-size:clamp(34px,5vw,64px);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.juego__vidas{display:flex;gap:7px}.juego__vidas i{width:9px;height:9px;background:var(--acento);transition:opacity .3s,transform .3s}.juego__vidas i.perdida{opacity:.18;transform:scale(.7)}
.juego__record{margin:0 0 0 auto;font:500 11px/1 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:rgb(242 240 235 / .55)}
@media(max-width:700px){.juego__hud{top:calc(66px + env(safe-area-inset-top,0px))}}
/* Trabajos: tarjetas dinámicas (main.js: entrada al aparecer + parallax; hover en CSS). */
.pronto h2 .lt,.pronto h2 .hv{display:block}.pronto h2 .lt{font-weight:200}.pronto h2 .hv{font-weight:800}
.tarjetas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:56px;perspective:1200px}
.tarjeta{perspective:1000px;--curva:cubic-bezier(.16,1,.3,1);--d:calc(var(--i,0) * .12s);opacity:0;transform:translate3d(0,120px,0);transition:transform 1.3s var(--curva) var(--d),opacity .9s ease-out var(--d)}
.tarjeta.entro{opacity:1;transform:none}
.tarjeta__marco{position:relative;aspect-ratio:7/10;color:var(--texto);transform-style:preserve-3d;transform-origin:center;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .7s var(--curva)}
.tarjeta.entro:hover .tarjeta__marco{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1.03);transition:transform .35s var(--curva)}
.tarjeta__media{position:absolute;inset:0;overflow:hidden;border-radius:6px;background:#0B0B0B;transition:box-shadow .7s var(--curva)}.tarjeta.entro:hover .tarjeta__media{box-shadow:0 40px 70px -28px rgb(0 0 0 / .55)}
.tarjeta__media img{display:block;width:100%;height:118%;object-fit:cover;transform:scale(1.18);transition:transform 1.8s var(--curva) var(--d)}
.tarjeta.entro .tarjeta__media img{transform:scale(1.02)}
.tarjeta.entro:hover .tarjeta__media img{transform:scale(1.08);transition:transform .9s var(--curva)}
.tarjeta__media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgb(11 11 11 / .9) 0%,rgb(11 11 11 / .4) 42%,transparent 68%)}
.tarjeta__info{position:absolute;left:0;right:0;bottom:0;padding:clamp(18px,2vw,28px);container-type:inline-size;transform:translateZ(0);transition:transform .7s var(--curva)}.tarjeta.entro:hover .tarjeta__info{transform:translateZ(70px)}
.tarjeta__tag{display:flex;align-items:center;gap:8px;margin:0 0 14px;font:500 11px/1 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:rgb(242 240 235 / .8)}
.tarjeta__tag::before{content:"";width:6px;height:6px;background:var(--acento)}
.tarjeta h3{margin:0 0 12px;text-transform:uppercase;font-size:clamp(18px,8.4cqi,40px);line-height:1.02;letter-spacing:-.05em;font-stretch:125%}
.tarjeta h3 .lt{display:block;font-weight:200;white-space:nowrap}.tarjeta h3 .hv{display:block;font-weight:800;white-space:nowrap}
.tarjeta h3 .w{display:inline-block}
.tarjeta:nth-child(2) h3 .hv{color:var(--acento)}
.tarjeta__texto{margin:0;padding-bottom:16px;font-size:14px;line-height:1.55;color:rgb(242 240 235 / .78);max-width:34ch}
/* Partes de adentro: suben detrás de la tarjeta, de a una (--j). */
.tarjeta :is(.tarjeta__tag,h3 .w,.tarjeta__vermas){opacity:0;transform:translate3d(0,.7em,0);transition:transform 1s var(--curva) calc(var(--d) + .35s + var(--j,0) * .06s),opacity .7s ease-out calc(var(--d) + .35s + var(--j,0) * .06s)}
.tarjeta.entro :is(.tarjeta__tag,h3 .w,.tarjeta__vermas){opacity:1;transform:none}
.tarjeta__linea{position:absolute;left:0;bottom:0;width:100%;height:3px;border-radius:0 0 6px 6px;background:var(--acento);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--curva)}
.tarjeta.entro:hover .tarjeta__linea{transform:scaleX(1)}
@media(max-width:900px){.tarjetas{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}
@media(prefers-reduced-motion:reduce){.tarjeta,.tarjeta :is(.tarjeta__tag,h3 .w,.tarjeta__vermas),.tarjeta__media img{opacity:1;transform:none;transition:none}}
/* Títulos de sección: letras que suben solas al aparecer (main.js → titulos). */
.titulo-anim[data-anim] .sc{transform:translate3d(0,112%,0) rotate(6deg);transition:transform .95s cubic-bezier(.16,1,.3,1) calc(var(--i,0) * 22ms)}
.titulo-anim.entro[data-anim] .sc{transform:none}
@media(prefers-reduced-motion:reduce){.titulo-anim[data-anim] .sc{transform:none;transition:none}}
/* Trabajos se superpone con el final en blanco del video: el título entra apenas queda el fondo blanco. */
#trabajos{position:relative;z-index:5;margin-top:-24vh}
/* Ver más: despliega el texto de la tarjeta (alto animado con grid 0fr → 1fr). */
.tarjeta__desplegable{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s cubic-bezier(.16,1,.3,1)}
.tarjeta__desplegable>div{overflow:hidden}
.tarjeta.abierta .tarjeta__desplegable{grid-template-rows:1fr}
.tarjeta__desplegable .tarjeta__texto{opacity:0;transform:translate3d(0,10px,0);transition:opacity .4s ease-out,transform .6s cubic-bezier(.16,1,.3,1)}
.tarjeta.abierta .tarjeta__desplegable .tarjeta__texto{opacity:1;transform:none;transition-delay:.12s}
.tarjeta__vermas{display:inline-flex;align-items:center;gap:10px;margin:0;padding:0 0 7px;background:none;border:0;border-bottom:1px solid rgb(242 240 235 / .35);color:var(--texto);font:500 11px/1 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:border-color .3s}
.tarjeta__vermas::after{content:"+";color:var(--acento);font-size:14px;line-height:0}
.tarjeta.abierta .tarjeta__vermas::after{content:"\2212"}
.tarjeta__vermas:hover{border-color:var(--acento)}
.tarjeta__vermas:focus-visible{outline:2px solid var(--acento);outline-offset:6px}
.tarjeta__acciones{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.tarjeta .tarjeta__vermas.tarjeta__ir{text-decoration:none}
.tarjeta .tarjeta__vermas.tarjeta__ir::after{content:"\2197";font-size:13px}
/* Botón sol / luna: muestra el ícono del modo al que se pasa. */
.tema{display:grid;place-items:center;width:30px;height:30px;margin:-6px -6px -6px 2px;padding:0;background:none;border:0;color:inherit;cursor:pointer;border-radius:50%}
.tema svg{grid-area:1/1;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .4s}
.tema__luna{fill:currentColor!important;stroke:none!important}
.tema__sol{opacity:0;transform:rotate(-90deg) scale(.5)}
.tema-noche .tema__sol{opacity:1;transform:none}.tema-noche .tema__luna{opacity:0;transform:rotate(90deg) scale(.5)}
.tema:hover{color:var(--acento)}.tema:focus-visible{outline:2px solid var(--acento);outline-offset:3px}
/* Modo noche activo (solo después del video): paleta oscura con fundido. */
html.noche-activa{--papel:#0B0B0B!important;--tinta:#F2F0EB!important;--linea:#2A2928!important;--grafito:#9C9991!important;color-scheme:dark}
body,.contacto,footer,.pronto,.nav,.contacto__links a,footer{transition:background-color .9s ease,color .9s ease,border-color .9s ease}
.noche-activa.despues-hero .nav{background:rgb(11 11 11 / .7)}
.noche-activa.despues-hero #logo{opacity:1}.noche-activa.despues-hero .logo-oscuro{opacity:0}
.noche-activa footer img{filter:invert(1)}
.noche-activa .tarjeta__media{box-shadow:0 0 0 1px rgb(242 240 235 / .08)}
/* Modo noche: lente negro de borde duro que se cierra desde los bordes, atado al scroll (--iris-r, main.js) en lugar del fundido a blanco del final del video. */
.velo-noche{position:absolute;inset:0;z-index:4;background:#0B0B0B;pointer-events:none;opacity:calc(1 - var(--claro,1));--borde-lente:calc(var(--iris-r,135%) - .6%);-webkit-mask-image:radial-gradient(circle farthest-corner at 50% 50%,transparent var(--borde-lente),#000 var(--iris-r,135%));mask-image:radial-gradient(circle farthest-corner at 50% 50%,transparent var(--borde-lente),#000 var(--iris-r,135%))}
/* --claro (1 claro, 0 noche) se anima: al cambiar de modo, el final del video y la página se funden juntos. */
@property --claro{syntax:"<number>";inherits:true;initial-value:1}
html{--claro:1;transition:--claro .9s ease}
html.noche-activa{--claro:0}
@media(prefers-reduced-motion:reduce){body,.contacto,footer,.pronto,.nav{transition:none}}