:root{
--ink:#07070A; --panel:#0D0D11; --panel2:#131318; --paper:#F4F2ED;
--fg:#F3F2EF; --dim:#8C8C95; --line:rgba(255,255,255,.11);
--accent:#FF3B1F;
--stone:#E9E8E4; --graphite:#17171E; --oxblood:#5C1A10;
/* hero claro: el blanco sale de la propia foto (#FBFBFB), asi no se ve el recuadro */
--hero-bg:#FBFBFB; --hero-ink:#14141A; --hero-dim:#5A5A66;
--grid-line:rgba(20,20,26,.075); --grid-node:255,59,31;
--wrap:1360px; --pad:clamp(20px,5vw,72px);
--disp:'Archivo',system-ui,sans-serif; --body:'Inter Tight',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
h1,h2,h3,h4{font-family:var(--disp);font-weight:800;letter-spacing:-.045em;line-height:.92;margin:0}
h1{font-size:clamp(3rem,9.5vw,8.6rem)}
h2{font-size:clamp(2.3rem,6vw,5.2rem)}
h3{font-size:clamp(1.6rem,3.2vw,2.7rem);letter-spacing:-.035em}
h4{font-size:clamp(1.12rem,1.9vw,1.45rem);letter-spacing:-.03em;font-weight:700}
p{margin:0}
.lede{font-size:clamp(1.03rem,1.45vw,1.28rem);line-height:1.5;color:#C9C9D1;font-weight:300}
.eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:22px;color:var(--dim)}
.eyebrow s{display:block;flex:0 0 auto;width:30px;height:1px;background:var(--accent);text-decoration:none}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* ---------- NAV ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:60;padding:15px var(--pad);display:flex;align-items:center;justify-content:space-between;gap:22px;transition:background .35s,backdrop-filter .35s,border-color .35s;border-bottom:1px solid transparent}
.nav.stuck{background:rgba(7,7,10,.84);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
/* arriba de todo la barra flota sobre el hero claro: hay que invertirla */
.nav:not(.stuck) .logo{color:var(--hero-ink)}
.nav:not(.stuck) .navlinks a{color:var(--hero-dim)}
.nav:not(.stuck) .navlinks a:hover{color:var(--hero-ink)}
.nav:not(.stuck) .lang{color:#9A9AA4}
.nav:not(.stuck) .lang-btn{color:var(--hero-dim)}
.nav:not(.stuck) .lang-btn:hover{color:var(--hero-ink)}
.nav:not(.stuck) .lang-btn.is-active{color:var(--accent)}
.nav:not(.stuck) .navcta{border-color:rgba(20,20,26,.28);color:var(--hero-ink)}
.nav:not(.stuck) .navcta:hover{background:var(--hero-ink);color:#FBFBFB;border-color:var(--hero-ink)}
.nav:not(.stuck) .burger span{background:var(--hero-ink)}
.logo{font-family:var(--disp);font-weight:800;letter-spacing:-.05em;font-size:19px;display:flex;align-items:center;gap:10px;white-space:nowrap}
.logo i{width:9px;height:9px;background:var(--accent);border-radius:1px;display:block;font-style:normal;flex:0 0 auto}
.navlinks{display:flex;gap:28px}
.navlinks a{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#B4B4BD;transition:color .2s}
.navlinks a:hover{color:var(--fg)}
.nav-right{display:flex;align-items:center;gap:16px}
.lang{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:#5E5E68}
.lang-btn{padding:2px 1px;color:#8C8C95;transition:color .2s}
.lang-btn:hover{color:var(--fg)}
.lang-btn.is-active{color:var(--accent)}
.navcta{border:1px solid var(--line);border-radius:100px;padding:9px 20px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;transition:.25s;white-space:nowrap}
.navcta:hover{background:var(--fg);color:var(--ink);border-color:var(--fg)}
.burger{display:none;width:34px;height:34px;position:relative}
.burger span{position:absolute;left:7px;right:7px;height:1.5px;background:var(--fg);transition:.3s}
.burger span:nth-child(1){top:13px}
.burger span:nth-child(2){top:20px}
.burger[aria-expanded="true"] span:nth-child(1){top:16.5px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){top:16.5px;transform:rotate(-45deg)}
.mobilenav{position:fixed;top:0;left:0;right:0;z-index:55;background:rgba(7,7,10,.97);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);padding:80px var(--pad) 30px;display:grid;gap:4px;transform:translateY(-102%);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.mobilenav.open{transform:none}
.mobilenav a{font-family:var(--disp);font-weight:700;font-size:1.6rem;letter-spacing:-.04em;padding-block:9px;border-bottom:1px solid var(--line)}
@media(max-width:1040px){.navlinks{display:none}.burger{display:block}.navcta{display:none}}
/* ---------- HERO ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;position:relative;overflow:hidden;background:var(--hero-bg);color:var(--hero-ink)}
.hero-canvas{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block}
.hero-glow{position:absolute;inset:0;z-index:1;pointer-events:none;background:
radial-gradient(60% 48% at 18% 26%,rgba(255,59,31,.07),transparent 70%),
radial-gradient(52% 44% at 84% 18%,rgba(90,110,255,.06),transparent 72%),
linear-gradient(180deg,var(--hero-bg) 0%,transparent 22%)}
/* texto y foto comparten la misma celda: el hero mide un viewport, no dos */
.hero-inner{position:relative;z-index:2;flex:1;width:100%;display:flex;flex-direction:column;justify-content:center;padding-block:96px 0}
.hero .eyebrow{font-size:13px;letter-spacing:.14em;margin-bottom:20px;color:var(--hero-dim)}
.hero .eyebrow s{width:44px}
.hero h1{letter-spacing:-.03em;max-width:none;margin:0;color:var(--hero-ink)}
.hero h1 em{font-style:normal;color:var(--accent)}
/* la frase se abre a los costados y la foto queda en el medio */
.hero-claim{display:flex;justify-content:space-between;align-items:center;gap:clamp(16px,3vw,48px);
width:100%;margin:0;position:relative;z-index:3;font-size:clamp(24px,2.7vw,40px);line-height:1.1}
.claim-l,.claim-r{max-width:clamp(180px,20vw,290px)}
.claim-r{text-align:right;color:var(--accent)}
.hero .ctas{position:absolute;left:var(--pad);bottom:clamp(36px,7vh,84px);margin:0;z-index:3}
/* botones invertidos: sobre claro, el solido es tinta */
.hero .btn-solid{background:var(--hero-ink);color:#FBFBFB}
.hero .btn-solid:hover{background:var(--accent);color:#fff}
.hero .btn-ghost{border-color:rgba(20,20,26,.28);color:var(--hero-ink)}
.hero .btn-ghost:hover{border-color:var(--hero-ink);background:rgba(20,20,26,.05)}
/* la foto centrada, apoyada en el filo inferior del hero */
.hero-photo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;z-index:1;pointer-events:auto;
width:min(56vw,820px,calc((100svh - 210px) * 1638 / 927))}
.hero-photo picture,.hero-photo img{display:block;width:100%;height:auto}
/* El lienzo del efecto se monta sobre la foto y la reemplaza cuando esta listo.
Se apoya en el position:absolute de .hero-photo de arriba -- OJO: no agregar
aqui otra regla .hero-photo con position, porque pisa ese absolute y tira
la foto al flujo (el transform sigue aplicando y la sube media altura). */
.hero-photo-fx{position:absolute;inset:0;display:block;pointer-events:none}
.hero-photo.fx-on picture{opacity:0}
.ctas{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:100px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;transition:.28s;white-space:nowrap}
.btn-solid{background:var(--fg);color:var(--ink)}
.btn-solid:hover{background:var(--accent);color:#fff}
.btn-ghost{border:1px solid rgba(255,255,255,.28);color:var(--fg)}
.btn-ghost:hover{border-color:var(--fg);background:rgba(255,255,255,.07)}
@media(max-width:900px){
/* en angosto no hay lugar a los costados: la foto pasa al flujo (va primero
en el HTML) y la frase queda debajo. El bloque foto + texto se centra en
lo que queda debajo de la barra fija (~64px), nunca detras de ella. */
.hero{justify-content:center;padding:84px 0 40px}
.hero-inner{flex:0 0 auto;justify-content:flex-start;padding-block:28px 0}
.hero-claim{flex-direction:column;align-items:flex-start;gap:2px;font-size:clamp(28px,7vw,40px)}
.claim-l,.claim-r{max-width:none}
.claim-r{text-align:left}
/* relative (no static): el lienzo del efecto (.hero-photo-fx, absolute) se
ancla a la figura; con static se anclaba al hero y la foto se dibujaba
arriba de todo, detras del header */
.hero-photo{position:relative;left:auto;top:auto;transform:none;width:min(560px,100%);margin:0 auto}
.hero .ctas{position:static;margin-top:28px}
}
/* filmstrip */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;position:relative;z-index:2;background:rgba(7,7,10,.55)}
.strip-track{display:flex;width:max-content;animation:slide 52s linear infinite}
/* cada pieza es un enlace al caso correspondiente mas abajo */
.strip-item{display:block;margin:0;width:clamp(178px,19vw,290px);aspect-ratio:16/10;border-right:1px solid var(--line);position:relative;overflow:hidden;flex:0 0 auto}
.strip img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.6);transition:filter .5s,transform .8s}
.strip-item:hover img,.strip-item:focus-visible img{filter:none;transform:scale(1.05)}
.strip-cap{position:absolute;left:12px;bottom:10px;right:12px;font-size:9.5px;color:#E8E8EC;text-shadow:0 1px 6px rgba(0,0,0,.9);transition:color .3s}
.strip-item:hover .strip-cap{color:#fff}
/* flechita que aparece al pasar por encima, para que se lea como enlace */
.strip-item::after{content:"↗";position:absolute;top:10px;right:12px;font-family:var(--mono);font-size:12px;color:#fff;
opacity:0;transform:translate(-4px,4px);transition:.3s;text-shadow:0 1px 6px rgba(0,0,0,.9)}
.strip-item:hover::after,.strip-item:focus-visible::after{opacity:1;transform:none}
@keyframes slide{to{transform:translateX(-50%)}}
.strip:hover .strip-track{animation-play-state:paused}
/* ---------- SECTIONS ---------- */
.sec{padding-block:clamp(84px,10vw,160px);position:relative}
.sec-panel{background:var(--panel);border-block:1px solid var(--line)}
/* ===== Ritmo de color =====================================================
El negro manda, pero cada tanto se corta para que la lectura respire:
hero claro · SERVICIOS lienzo claro · PROCESO negro · SKILLS claro · marquee ROJO · portfolio negro
· Otter papel · modos GRAFITO · sobre mí negro · lo que me mueve OXBLOOD
· cómo funciono negro · contacto negro
========================================================================= */
/* -- claro (gris piedra) -- */
.sec-light{background:var(--stone);color:#14141A;border-block:1px solid rgba(20,20,26,.12)}
.sec-light .lede{color:#4E4E59}
.sec-light .eyebrow{color:#6F6F7B}
.sec-light .skills{background:rgba(20,20,26,.14);border-color:rgba(20,20,26,.14)}
.sec-light .skill{background:var(--stone)}
.sec-light .skill:hover{background:#E1E0DB}
.sec-light .skill h4{color:#14141A}
.sec-light .skill p{color:#54545F}
/* -- grafito -- */
.sec-graphite{background:var(--graphite);border-block:1px solid var(--line)}
.sec-graphite .modes{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.13)}
.sec-graphite .mode{background:var(--graphite)}
.sec-graphite .mode:hover{background:#1F1F27}
/* -- oxblood (rojo profundo) -- */
.sec-oxblood{background:var(--oxblood);color:#F7EDE9;border-block:1px solid rgba(255,255,255,.14)}
.sec-oxblood .lede{color:#E9D3CC}
.sec-oxblood .eyebrow{color:#D8B4AA}
.sec-oxblood .eyebrow s{background:#F7EDE9}
.sec-oxblood .note-body{border-top-color:rgba(255,255,255,.22)}
.sec-oxblood .note-body .lede:first-child{color:#FBF3F0}
.sec-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(44px,6vw,80px)}
@media(max-width:900px){.sec-head{grid-template-columns:1fr}}
/* copy largo, escrito con parrafos separados por linea en blanco (\n\n real
en i18n.js): pre-line respeta esos saltos sin tener que pasar el campo a
data-i18n-html ni embeber
en el contenido. */
.mp{white-space:pre-line}
/* ---------- SERVICIOS: lienzo claro con la orbita ----------
Mismo blanco y tinta que el hero; la reticula de puntos lo diferencia de la
reticula de lineas de arriba. Por defecto (sin JS, o pantallas angostas)
las burbujas van en grilla; main.js le pone .is-orbit al contenedor cuando
hay ancho y las ubica alrededor de la foto. */
.svc{background-color:var(--hero-bg);color:var(--hero-ink);
background-image:radial-gradient(rgba(20,20,26,.13) 1px,transparent 1.4px);background-size:22px 22px;
border-block:1px solid rgba(20,20,26,.08)}
.svc .lede{color:#4E4E59}
.svc .eyebrow{color:#6F6F7B}
.orbit{--core:clamp(132px,14vw,184px);position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.orbit-lines{display:none}
.orbit-core{position:relative;grid-column:1/-1;justify-self:center;display:grid;justify-items:center;gap:14px;margin-bottom:22px;z-index:2}
/* pulso que sale de la foto, como una onda */
.orbit-core::before{content:"";position:absolute;left:50%;top:0;width:var(--core);height:var(--core);margin-left:calc(var(--core) / -2);
border-radius:50%;border:1px solid rgba(255,59,31,.5);animation:corePulse 3.4s cubic-bezier(.2,.7,.2,1) infinite;pointer-events:none}
@keyframes corePulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.6);opacity:0}}
/* pictograma central: la plumilla de la herramienta pluma, misma familia de
trazo que los iconos de los servicios, sobre un disco de tinta */
.core-mark{display:grid;place-items:center;width:var(--core);aspect-ratio:1;border-radius:50%;background:var(--hero-ink);color:#FBFBFB;
box-shadow:0 0 0 8px var(--hero-bg),0 0 0 9px rgba(255,59,31,.4),0 30px 60px -26px rgba(20,20,26,.5)}
.core-mark svg{width:46%;height:46%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.core-mark .core-dot{stroke:var(--accent);fill:var(--accent)}
/* "Hagamos…" se completa con el servicio que esta bajo el cursor (main.js) */
.core-tag{max-width:min(260px,80vw);text-align:center;line-height:1.45;background:var(--hero-ink);color:#FBFBFB;border-radius:100px;padding:7px 16px;font-size:10.5px;transition:background .25s}
.core-tag.is-live{background:var(--accent)}
.bub{display:block;text-align:left;color:var(--hero-ink);-webkit-tap-highlight-color:transparent;z-index:1}
.bub-in{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid rgba(20,20,26,.12);border-radius:100px;
padding:10px 22px 10px 10px;box-shadow:0 16px 36px -24px rgba(20,20,26,.5);
transition:background .3s,color .3s,border-color .3s,box-shadow .3s}
.bub-ico{flex:0 0 auto;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(255,59,31,.09);color:var(--accent);transition:background .3s,color .3s}
.bub-ico svg,.svc-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bub-txt{display:grid;gap:4px;min-width:0}
.bub-n{font-size:9.5px;letter-spacing:.14em;color:var(--accent)}
.bub-t{font-family:var(--disp);font-weight:700;letter-spacing:-.025em;font-size:15px;line-height:1.12}
.bub:hover .bub-in,.bub:focus-visible .bub-in,.bub.is-on .bub-in{background:var(--hero-ink);color:#FBFBFB;border-color:var(--hero-ink);box-shadow:0 24px 46px -22px rgba(20,20,26,.6)}
.bub:hover .bub-ico,.bub:focus-visible .bub-ico,.bub.is-on .bub-ico{background:var(--accent);color:#fff}
.bub:focus-visible{outline:none}
.bub:focus-visible .bub-in{outline:2px solid var(--accent);outline-offset:3px}
.orbit.is-orbit{display:block;height:var(--oh,640px)}
.orbit.is-orbit .orbit-lines{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
/* la foto (no la foto + etiqueta) queda justo en el centro de la orbita */
.orbit.is-orbit .orbit-core{position:absolute;left:50%;top:50%;margin:0;transform:translate(-50%,calc(var(--core) / -2))}
.orbit.is-orbit .bub{position:absolute;left:0;top:0;width:var(--bw,248px);transform:translate(var(--x,0),var(--y,0)) translate(-50%,-50%)}.orbit-ring{fill:none;stroke:rgba(20,20,26,.16);stroke-width:1;stroke-dasharray:2 7}
.orbit-line{stroke:rgba(20,20,26,.34);stroke-width:1.1;stroke-dasharray:4 5;animation:orbitFlow 2.6s linear infinite}
.orbit-line.on{stroke:var(--accent);stroke-width:1.5;animation-duration:.8s}
@keyframes orbitFlow{to{stroke-dashoffset:-18}}
.orbit-hint{margin-top:28px;text-align:center;color:#8A8A95}
/* en la grilla, si la cantidad de servicios es impar el ultimo ocupa el ancho
(antes de las burbujas van el svg y el centro: burbuja N = hijo N+2) */
.orbit:not(.is-orbit) .bub:last-child:nth-child(odd){grid-column:1/-1}
@media(max-width:600px){
.bub-in{flex-direction:column;align-items:flex-start;gap:12px;border-radius:18px;padding:14px;height:100%}
.bub-t{font-size:14px}
}
@media(prefers-reduced-motion:reduce){.orbit-line{animation:none}.orbit-core::before{animation:none;opacity:0}}
/* ---------- TARJETA DE SERVICIO ----------
Panel oscuro del sitio (mismo fondo, linea y radio que el visor de
capturas), con los campos de vidrio del formulario de contacto. Se abre
creciendo desde la burbuja que se toco (transform-origin lo pone main.js). */
.svc-modal{position:fixed;inset:0;z-index:210;display:none;align-items:center;justify-content:center;padding:clamp(12px,3vw,40px);
background:rgba(7,7,10,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity .3s}
.svc-modal.on{display:flex}
.svc-modal.in{opacity:1}
.svc-card{position:relative;width:min(600px,100%);max-height:calc(100svh - 24px);display:flex;flex-direction:column;overflow:hidden;
background:var(--panel);color:var(--fg);border:1px solid var(--line);border-radius:6px;box-shadow:0 50px 120px -30px rgba(0,0,0,.75);
transform:scale(.5);opacity:0;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .3s}
.svc-modal.in .svc-card{transform:none;opacity:1}
.svc-card::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:var(--accent);z-index:2}
.svc-close{position:absolute;top:16px;right:16px;z-index:3;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
background:rgba(7,7,10,.5);color:var(--fg);font-size:22px;line-height:1;display:grid;place-items:center;transition:.2s}
.svc-close:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.svc-view{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;padding:clamp(24px,3.2vw,38px)}
.svc-view[hidden]{display:none}
.svc-top{display:flex;align-items:center;gap:14px;margin-bottom:22px;padding-right:44px}
.svc-ico{flex:0 0 auto;width:46px;height:46px;border-radius:50%;background:rgba(255,59,31,.13);color:var(--accent);display:grid;place-items:center}
.svc-num{color:var(--dim)}
.svc-num b{color:var(--accent);font-weight:500}
.svc-card h3{font-size:clamp(1.6rem,3vw,2.3rem);line-height:.98;margin-bottom:18px;padding-right:24px}
.svc-body{flex:1 1 auto;min-height:0;overflow:auto;padding:0 6px 22px 0;margin-right:-6px;
-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 26px),transparent)}
.svc-body p{color:#B9B9C2;font-size:15px;line-height:1.62;font-weight:300}
.svc-tools{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;padding:4px 0 20px}
.svc-tools[hidden]{display:none}
.svc-tools-label{color:var(--dim);font-size:10px}
.svc-tools .chip{color:#C9C9D1;border-color:rgba(255,255,255,.2)}
.svc-actions{display:flex;align-items:center;gap:18px 22px;flex-wrap:wrap;padding-top:22px;border-top:1px solid var(--line)}
.svc-wa{color:#9A9AA4;font-size:10.5px;padding-bottom:3px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.svc-wa:hover{color:var(--fg);border-bottom-color:var(--accent)}
.svc-form{overflow:auto}
.svc-back{align-self:flex-start;color:var(--dim);font-size:10px;margin-bottom:22px;transition:color .2s}
.svc-back:hover{color:var(--fg)}
.svc-form .eyebrow{margin-bottom:14px}
.svc-form h3{font-size:clamp(1.35rem,2.4vw,1.8rem);margin-bottom:8px}
.svc-form h3:focus{outline:none}
.svc-sub{color:#9E9EA8;font-size:14px;font-weight:300;margin-bottom:24px}
.svc-q{border:0;margin:0 0 20px;padding:0;min-width:0}
.svc-q legend{color:var(--dim);font-size:10px;padding:0;margin-bottom:10px}
.picks{display:flex;flex-wrap:wrap;gap:8px}
.pick{position:relative;cursor:pointer}
.pick input{position:absolute;opacity:0;pointer-events:none}
.pick span{display:block;border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:9px 15px;font-size:13.5px;line-height:1.2;color:#C9C9D1;transition:background .2s,color .2s,border-color .2s}
.pick:hover span{border-color:rgba(255,255,255,.45);color:var(--fg)}
.pick input:checked+span{background:var(--fg);color:var(--ink);border-color:var(--fg)}
.pick input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.svc-form .campo-par{margin-top:6px}
/* cada canal muestra solo lo que necesita */
.svc-form[data-via="wa"] .svc-solo-mail,.svc-form[data-via="mail"] .svc-solo-wa{display:none}
.svc-form .form-pie{margin-top:6px}
.svc-form button[disabled]{opacity:.55;cursor:default}
.svc-form .form-estado a{color:var(--fg);border-bottom:1px solid var(--accent)}
.svc-done{align-items:flex-start;justify-content:center;padding-block:clamp(44px,7vw,72px)}
.svc-done-mark{position:relative;width:48px;height:48px;border-radius:50%;background:var(--accent);margin-bottom:24px}
.svc-done-mark::after{content:"";position:absolute;left:18px;top:12px;width:10px;height:19px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.svc-done h3{margin-bottom:10px}
.svc-done p{color:#B9B9C2;font-weight:300}
body.svc-open{overflow:hidden}
/* en el celular la tarjeta sube desde abajo, como una hoja */
@media(max-width:640px){
.svc-modal{padding:0;align-items:flex-end}
.svc-card{width:100%;max-height:92svh;border-radius:14px 14px 0 0}
}
/* ---------- PROCESO ---------- */
.steps{list-style:none;margin:0;padding:0;position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(18px,2.4vw,34px)}
.steps::before{content:"";position:absolute;left:0;right:0;top:33px;height:1px;background:linear-gradient(90deg,var(--accent),var(--line) 30%)}
.step-n{position:relative;z-index:1;display:grid;place-items:center;width:66px;height:66px;border-radius:50%;border:1px solid var(--line);background:var(--ink);
color:var(--accent);font-size:12px;margin-bottom:26px;transition:background .3s,color .3s,border-color .3s}
.step:hover .step-n{background:var(--accent);border-color:var(--accent);color:#fff}
.step h4{margin-bottom:12px}
.step p{color:#A5A5AF;font-size:14.5px;line-height:1.55;font-weight:300}
.proc-cta{margin-top:clamp(48px,6vw,84px);padding-top:32px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px 32px;flex-wrap:wrap}
.proc-cta p{font-family:var(--disp);font-weight:700;letter-spacing:-.03em;font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1.1}
@media(max-width:980px){
.steps{grid-template-columns:1fr;gap:0}
.steps::before{left:33px;right:auto;top:0;bottom:0;width:1px;height:auto;background:linear-gradient(180deg,var(--accent),var(--line) 30%)}
.step{display:grid;grid-template-columns:66px minmax(0,1fr);column-gap:22px;padding-bottom:30px}
.step-n{grid-row:1 / span 2;margin:0}
.step h4{grid-column:2;margin:12px 0 8px}
.step p{grid-column:2}
}
/* ---------- OFICIO / SKILLS ---------- */
/* 9 oficios: a 3 columnas cierran en 3x3 */
.skills{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.skill{background:var(--panel);padding:clamp(22px,2.4vw,32px);transition:background .4s}
.skill:hover{background:var(--panel2)}
.skill-n{display:block;color:var(--accent);margin-bottom:18px;font-size:10.5px}
.skill h4{margin-bottom:10px}
.skill p{font-size:14px;line-height:1.55;color:#A0A0AA;font-weight:300}
/* con 12 skills la grilla de 3 columnas cierra exacta (4 filas), no hace
falta que la ultima ocupe el ancho completo como cuando eran 10. Si el
conteo vuelve a no ser multiplo de 3, revisar si hace falta ese ajuste. */
@media(max-width:1040px){.skills{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.skills{grid-template-columns:1fr}}
/* ---------- MARQUEE ---------- */
.mq{border-block:1px solid var(--line);overflow:hidden;padding-block:22px}
.mq-red{background:var(--accent);border-block-color:rgba(10,10,12,.25)}
.mq-red .mq-track span{color:rgba(10,10,12,.42)}
.mq-red .mq-track span:nth-child(3n){color:rgba(10,10,12,.74)}
.mq-red .mq-track span i{color:rgba(10,10,12,.5)}
.mq-track{display:flex;width:max-content;animation:slide 38s linear infinite}
.mq-track span{font-family:var(--disp);font-weight:700;font-size:clamp(1.35rem,2.9vw,2.3rem);letter-spacing:-.035em;padding-inline:26px;color:#26262E;white-space:nowrap}
.mq-track span:nth-child(3n){color:#4E4E58}
.mq-track span i{font-style:normal;color:var(--accent);font-size:.55em;vertical-align:middle;margin-left:26px}
/* ---------- TRABAJO ---------- */
.case{scroll-margin-top:92px;border-top:1px solid var(--line);padding-block:clamp(38px,5.5vw,68px);display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(28px,5vw,68px);align-items:center}
.case:nth-of-type(even) .case-visual{order:2}
/* columna visual: el badge va arriba, fuera del marco */
.case-visual{display:grid;gap:12px;align-content:start;min-width:0}
.case-visual .case-tag{position:static;background:none;backdrop-filter:none;border:0;border-radius:0;padding:0;color:var(--accent);display:flex;align-items:center;gap:10px;font-size:10.5px}
.case-visual .case-tag::before{content:"";display:block;width:22px;height:1px;background:var(--accent);flex:0 0 auto}
.case-media{position:relative;overflow:hidden;border-radius:3px;background:var(--panel2);aspect-ratio:16/10;display:grid;grid-template-columns:1fr;gap:8px}
/* imagen simple (casos sin visor) */
.case-media>img{width:100%;height:100%;object-fit:cover;object-position:top center;border-radius:3px;transition:transform 1.1s cubic-bezier(.2,.7,.2,1),filter .6s;filter:grayscale(.5) contrast(1.03)}
.case:hover .case-media>img{transform:scale(1.045);filter:none}
.case-tag{position:absolute;top:14px;left:14px;z-index:4;background:rgba(7,7,10,.74);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:100px;padding:6px 14px;pointer-events:none}
/* ---- visor de capturas: scroll interno + slider ---- */
.case-media.is-split{grid-template-columns:minmax(0,1fr) minmax(0,.4fr)}
.shot{position:relative;overflow:hidden;border-radius:3px;background:var(--panel2);min-width:0;cursor:pointer}
.shot-stage{position:absolute;inset:0}
.shot-slide{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .45s ease;background:var(--panel2)}
.shot-slide.is-on{opacity:1;pointer-events:auto}
.shot-slide>img{width:100%;height:100%;object-fit:cover;object-position:center}
/* la diapositiva scrolleable muestra la captura entera de arriba a abajo */
.shot-slide[data-scroll]{overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
.shot-slide[data-scroll]>img{height:auto;object-fit:fill}
/* console-os.jpg es una captura panoramica (2.2:1) mucho mas ancha que el
marco 16/10 del slider: con "cover" el recorte le comia contenido real
de los dos costados por igual. Con "contain" se ve entera, con el propio
fondo del panel (--panel2) haciendo de banda arriba/abajo -- no rompe. */
.shot-slide[data-fit="contain"]>img{object-fit:contain}
.shot-slide[data-scroll]::-webkit-scrollbar{width:6px}
.shot-slide[data-scroll]::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:6px}
.shot-slide[data-scroll]::-webkit-scrollbar-track{background:transparent}
.shot-hint{position:absolute;right:12px;top:14px;z-index:3;background:rgba(7,7,10,.8);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:100px;padding:6px 14px;color:#D6D6DE;pointer-events:none;transition:opacity .35s;font-size:9.5px}
.shot-hint[hidden]{display:none}
/* chip "Ampliar": aparece al pasar el mouse, avisa que se puede agrandar */
.shot-expand{position:absolute;left:12px;top:14px;z-index:3;background:rgba(7,7,10,.8);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:100px;padding:6px 14px;color:#D6D6DE;pointer-events:none;opacity:0;transition:opacity .25s;font-size:9.5px}
.case-media:hover .shot-expand{opacity:1}
/* ---- modal: el mismo .shot se traslada aca adentro, mucho mas grande ---- */
.shot-modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
background:rgba(5,5,8,.92);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:clamp(16px,4vw,56px)}
.shot-modal.on{display:flex}
.shot-modal-inner{position:relative;width:100%;height:100%;max-width:1440px;border-radius:6px;overflow:hidden;
box-shadow:0 50px 120px -30px rgba(0,0,0,.7)}
/* .shot deja de ser el hijo de grid de .case-media y pasa a llenar el modal entero */
.shot-modal-inner .shot{position:absolute;inset:0;cursor:default}
.shot-modal-inner .shot-expand{display:none}
/* fijo respecto a toda la ventana (no al recuadro interno): asi siempre
queda dentro de la pantalla, sin importar cuanto padding le quede
arriba al modal segun el tamaño de viewport */
.shot-modal-close{position:fixed;top:clamp(12px,2vw,24px);right:clamp(12px,2vw,24px);z-index:210;
width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:rgba(7,7,10,.7);
backdrop-filter:blur(8px);color:var(--fg);font-size:24px;line-height:1;display:grid;place-items:center;
cursor:pointer;transition:.2s}
.shot-modal-close:hover{background:var(--accent);border-color:var(--accent);color:#fff}
body.shot-modal-open{overflow:hidden}
@media(max-width:640px){
.shot-modal{padding:0}
.shot-modal-inner{border-radius:0}
.shot-modal-close{top:14px;right:14px}
}
.shot-ui{position:absolute;right:12px;bottom:12px;z-index:3;display:flex;align-items:center;gap:8px}
.shot-arrow{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:rgba(7,7,10,.78);backdrop-filter:blur(8px);color:#D6D6DE;display:grid;place-items:center;font-size:13px;line-height:1;transition:.25s}
.shot-arrow:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.shot-dots{display:flex;gap:6px}
.shot-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.28);transition:.25s;padding:0}
.shot-dot.is-on{background:var(--accent);transform:scale(1.25)}
.shot-label{position:absolute;left:14px;bottom:14px;z-index:3;background:rgba(7,7,10,.78);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:100px;padding:6px 13px;color:#D6D6DE;font-size:9.5px;pointer-events:none}
.phone{margin:0;overflow:hidden;border-radius:3px;background:var(--panel2);min-width:0}
.phone img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.case:hover .phone img{transform:scale(1.04)}
@media(max-width:520px){.case-media.is-split{grid-template-columns:1fr;aspect-ratio:4/5}.phone{display:none}}
.case-idx{color:#55555F;margin-bottom:14px;display:block;font-size:11px}
.case h3{margin-bottom:12px}
.case-role{color:var(--accent);margin-bottom:20px;font-size:10.5px}
.case-body{display:grid;gap:13px;max-width:58ch;margin-bottom:24px}
.case-body p{font-size:15px;line-height:1.62;color:#A8A8B2;font-weight:300}
.case-body b{color:#EDEDF1;font-weight:500}
.case-note{font-size:13px!important;color:#6E6E79!important;border-left:2px solid var(--line);padding-left:12px;margin-bottom:22px!important}
/* lista de submódulos, para casos que son un sistema y no una pieza */
.case-mods{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:0;border-top:1px solid var(--line);max-width:58ch}
.case-mods li{display:grid;gap:5px;padding-block:14px;border-bottom:1px solid var(--line)}
.case-mods b{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:500}
.case-mods span{font-size:14px;line-height:1.58;color:#9C9CA6;font-weight:300}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;border:1px solid var(--line);border-radius:100px;padding:6px 12px;color:#8E8E98}
@media(max-width:920px){.case{grid-template-columns:1fr}.case:nth-of-type(even) .case-visual{order:0}}
/* ---------- PAPER / OTTER ---------- */
#marca,#servicios,#skills,#trabajo,#sobre,#contacto{scroll-margin-top:92px}
.paper{background:var(--paper);color:#14141A}
.paper .lede{color:#4A4A55}
.paper .eyebrow{color:#7A7A86}
.paper-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.6vw,22px)}
.paper-grid figure{margin:0;overflow:hidden;background:#fff;border:1px solid rgba(0,0,0,.09)}
.paper-grid img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.paper-grid figure:hover img{transform:scale(1.04)}
.pg-a{grid-column:span 7;aspect-ratio:4/3}
.pg-b{grid-column:span 5;aspect-ratio:3/4}
.pg-c{grid-column:span 5;aspect-ratio:4/3}
.pg-d{grid-column:span 7;aspect-ratio:16/10}
/* ---- encabezado centrado: volanta, logo, lede ---- */
#marca{overflow:hidden}
.ot-header{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:clamp(40px,6vw,64px)}
/* la volanta queda alineada a la izquierda, como en el resto de secciones
del sitio -- el logo y el lede de abajo son los que van centrados */
.ot-header .eyebrow{align-self:stretch;text-align:left}
.ot-logo-hero{display:block;width:auto;height:clamp(168px,19.8vw,289px);margin:0 0 clamp(24px,3.4vw,40px)}
.ot-header .lede{max-width:54ch;margin:0 auto}
/* ---- gif de sabores, centrado y sin marco, apoyado sobre el beige ---- */
.ot-flavors-hero{margin:0 0 clamp(48px,6.5vw,80px);text-align:center}
.ot-flavors-hero picture{display:block;width:min(700px,100%);margin-inline:auto}
.ot-flavors-hero picture img{display:block;width:100%;height:auto}
.ot-flavors-hero figcaption{padding:14px 2px 0;font-size:9.5px;color:#6C6C77;text-align:center}
/* ---- copy de desarrollo de producto ---- */
.ot-copy{max-width:68ch;margin:0 auto clamp(56px,7vw,88px)}
.ot-copy b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:16px;font-weight:500}
.ot-copy p{font-size:15.5px;line-height:1.75;color:#3A3A44;font-weight:300}
/* ---- moodboard: trio de fotos, cañamo+medalla / enlatar / canning ---- */
.ot-board{--ot-row2:3/4;display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1.4vw,20px);position:relative;z-index:2}
.ot-board figure{margin:0;background:#fff;border:1px solid rgba(0,0,0,.10);overflow:hidden;position:relative}
.ot-board img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.ot-board figure:hover img{transform:scale(1.04)}
/* la lata premiada, con la medalla montada encima */
.ot-canamo{grid-column:span 4;aspect-ratio:var(--ot-row2);background:none!important;border:0!important;overflow:visible!important}
.ot-clip{display:block;height:100%;overflow:hidden;background:#fff;border:1px solid rgba(0,0,0,.10)}
.ot-board .ot-medal{position:absolute;top:-5%;right:-8%;width:34%!important;height:auto!important;object-fit:contain!important;
filter:drop-shadow(0 10px 24px rgba(20,16,10,.35));z-index:3;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.ot-canamo:hover .ot-medal{transform:rotate(-5deg) scale(1.06)}
/* la tira de tres: misma proporcion, arrancan y terminan a la misma altura */
.ot-enlatar,.ot-canning{grid-column:span 4;aspect-ratio:var(--ot-row2)}
@media(max-width:620px){
.ot-canamo,.ot-enlatar,.ot-canning{grid-column:span 12}
.ot-canamo{aspect-ratio:4/5}
}
.paper-note{border-top:1px solid rgba(0,0,0,.14);margin-top:36px;padding-top:26px;display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.paper-note p{font-size:14.5px;line-height:1.6;color:#4E4E59;font-weight:300}
.paper-note b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#14141A;margin-bottom:9px;font-weight:500}
@media(max-width:860px){.pg-a,.pg-b,.pg-c,.pg-d{grid-column:span 12;aspect-ratio:4/3}.paper-note{grid-template-columns:1fr}}
/* ---------- MODOS ---------- */
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.mode{background:var(--ink);padding:clamp(26px,3.2vw,42px);transition:background .4s}
.mode:hover{background:var(--panel2)}
.mode>span{color:var(--accent);font-size:11px}
.mode h4{margin:18px 0 10px}
.mode p{font-size:14.5px;line-height:1.62;color:#A0A0AA;font-weight:300}
/* la linea situacional ("Cuando...") va antes del parrafo de detalle, mas
clara y con mas peso, para que el lector se reconozca ahi primero */
.mode p.mode-sit{color:var(--fg);font-weight:500;line-height:1.45;margin-bottom:12px}
@media(max-width:860px){.modes{grid-template-columns:1fr}}
/* ---------- SOBRE ---------- */
.about{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1fr);gap:clamp(30px,5vw,78px);align-items:center}
.about-media{position:relative;overflow:hidden}
.about-media img{width:100%;aspect-ratio:3/4;object-fit:cover;filter:grayscale(1) contrast(1.06) brightness(.92)}
.about-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(7,7,10,.5))}
.about-copy h2{font-size:clamp(1.7rem,3.4vw,2.7rem);margin-bottom:18px}
.about-copy .lede{font-size:clamp(.92rem,1.05vw,1.02rem);line-height:1.55}
.about-copy .lede+.lede{margin-top:14px}
@media(max-width:860px){.about{grid-template-columns:1fr}}
/* ---------- LO QUE ME MUEVE ---------- */
.note-inner{max-width:74ch;margin-inline:auto}
.note h2{font-size:clamp(1.9rem,4.2vw,3.6rem);margin-bottom:34px;max-width:20ch}
.note-body{display:grid;gap:18px;padding-top:28px;border-top:1px solid var(--line)}
.note-body .lede{max-width:68ch}
.note-body .lede:first-child{color:#DCDCE3}
/* ---------- CÓMO FUNCIONO (desplegable) ---------- */
.wired-box{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.wired-head{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;padding-block:clamp(26px,3vw,40px);transition:opacity .25s}
.wired-head::-webkit-details-marker{display:none}
.wired-head:hover{opacity:.82}
.wired-head .eyebrow{margin-bottom:18px}
.wired-head h2{font-size:clamp(1.8rem,3.8vw,3.2rem);margin-bottom:14px}
.wired-head .lede{display:block;max-width:52ch}
/* el signo + que se convierte en − al abrir */
.wired-toggle{position:relative;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;flex:0 0 auto;transition:.3s}
.wired-toggle i{position:absolute;top:50%;left:50%;width:15px;height:1.5px;background:var(--fg);transform:translate(-50%,-50%);transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .25s}
.wired-toggle i:last-child{transform:translate(-50%,-50%) rotate(90deg)}
.wired-head:hover .wired-toggle{border-color:var(--accent)}
.wired-head:hover .wired-toggle i{background:var(--accent)}
details[open] .wired-toggle i:last-child{transform:translate(-50%,-50%) rotate(0deg);opacity:0}
.wired-body{padding-bottom:clamp(30px,4vw,56px);animation:wiredIn .5s cubic-bezier(.2,.7,.2,1)}
@keyframes wiredIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.wired-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.54fr);gap:clamp(28px,5vw,64px);align-items:start}
.wired-copy{max-width:66ch;display:grid;gap:16px}
.wired-copy h3{font-size:clamp(1.25rem,2.1vw,1.7rem);margin-top:26px;color:var(--fg)}
.wired-copy p{font-size:15px;line-height:1.68;color:#A5A5AF;font-weight:300}
.wired-copy .lede{color:#C9C9D1}
.wired-mark{color:#EDEDF1!important;font-weight:400!important;border-left:2px solid var(--accent);padding-left:14px}
.wired-q{list-style:none;margin:2px 0;padding:0;display:grid;gap:7px}
.wired-q li{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:#B9B9C3;padding-left:18px;position:relative}
.wired-q li::before{content:"›";position:absolute;left:0;color:var(--accent)}
.wired-chart{margin:0;position:sticky;top:96px;display:grid;gap:14px;justify-items:center}
.wired-chart img{width:100%;max-width:480px;height:auto}
.wired-chart figcaption{color:#6E6E79;font-size:9.5px;text-align:center;max-width:34ch;line-height:1.6}
.wired-short{padding-top:clamp(22px,2.6vw,32px);display:grid;gap:14px}
.wired-short p{color:var(--dim)}
@media(max-width:900px){
.wired-grid{grid-template-columns:1fr}
.wired-chart{position:static;order:-1;justify-items:start}
.wired-chart figcaption{text-align:left}
.wired-toggle{width:38px;height:38px}
}
/* ---------- CONTACTO ---------- */
/* contacto: gris de la paleta y la misma reticula viva del hero. Los colores
se definen aca (no en :root) porque el fondo es oscuro y la reticula los lee
de su propia seccion. */
.contact{--grid-line:rgba(255,255,255,.06);--grid-node:255,59,31;
background:var(--graphite);position:relative;overflow:hidden;
border-top:1px solid var(--line);padding-block:clamp(78px,9vw,140px)}
.contact > .wrap{position:relative;z-index:2}
.sec-canvas{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block}
.contact h2{max-width:16ch;margin-bottom:32px}
/* dos columnas: a la izquierda el contacto directo, a la derecha el formulario */
.contact-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(36px,5vw,80px);align-items:start}
.contact-intro h2{margin-bottom:30px}
.contact-list{display:grid;gap:10px;margin-top:26px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:#B0B0BA}
.contact-list a{border-bottom:1px solid transparent;transition:.25s;justify-self:start}
.contact-list a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.contact-list span{justify-self:start;color:#6E6E79}
/* ---------- FORMULARIO ----------
Vidrio esmerilado, no blanco solido: el blanco opaco rompia demasiado
contra el gris de la seccion (y peor viniendo de la bordeaux de arriba).
Con blur la reticula de atras queda como una textura difusa, ilegible
como lineas -- sigue sin distraer, pero la tarjeta se integra al bloque
en vez de cortar como un rectangulo pegado encima. */
.form{border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:clamp(22px,2.6vw,32px);
background:rgba(244,242,237,.16);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);
box-shadow:0 24px 60px -28px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.3);color:var(--fg)}
/* sin backdrop-filter (navegadores viejos) el fondo pasa a solido, del tono de la seccion */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.form{background:#1D1D24}
}
.form .eyebrow{margin-bottom:20px}
.campo{display:grid;gap:6px;margin-bottom:14px}
.campo label{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
/* Asunto+Nombre y Email+Telefono van de a pares: el formulario aprovecha
el ancho de su columna en vez de apilar cinco campos sueltos uno abajo
del otro, que era lo que lo hacia tan largo. */
.campo-par{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* los campos son vidrio de verdad, tan transparentes como el panel que los
contiene -- un vidrio dentro de otro vidrio, no una caja opaca pegada
encima. Se aclaran un poco al enfocar, lo justo para poder leer lo que
se esta tipeando sin romper el efecto. */
.campo input,.campo textarea{width:100%;font-family:var(--body);font-size:15px;line-height:1.5;color:var(--fg);
background:rgba(244,242,237,.09);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
border:1px solid rgba(255,255,255,.24);border-radius:5px;
padding:11px 13px;transition:border-color .2s,background .2s}
.campo input::placeholder,.campo textarea::placeholder{color:rgba(243,242,239,.4)}
.campo textarea{resize:vertical;min-height:80px;line-height:1.6}
.campo input:hover,.campo textarea:hover{background:rgba(244,242,237,.15);border-color:rgba(255,255,255,.36)}
.campo input:focus,.campo textarea:focus{outline:none;border-color:var(--accent);background:rgba(244,242,237,.19);color:var(--fg)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.campo input,.campo textarea{background:#26262E;color:var(--fg)}
.campo input:focus,.campo textarea:focus{background:#2C2C35}
}
.campo-mensaje textarea{min-height:96px;font-size:15.5px}
.campo-error{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);min-height:0}
.campo-pie{display:flex;justify-content:space-between;gap:12px}
.campo-contador{font-size:10px;letter-spacing:.08em;color:var(--dim);flex:0 0 auto}
.campo-contador.cerca{color:var(--accent)}
.campo.mal input,.campo.mal textarea{border-color:var(--accent)}
/* la trampa antispam se saca de la vista sin usar display:none, que algunos bots detectan */
.campo-trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-pie{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
/* sobre vidrio oscuro los botones vuelven a los colores por defecto del sitio
(claro sobre oscuro), los mismos que usa el resto de la seccion */
.form button[disabled]{opacity:.55;cursor:default}
.form-estado{margin-top:14px;font-size:13.5px;line-height:1.55;color:#B0B0BA;font-weight:300}
.form-estado.ok{color:#8FD19E}
.form-estado.mal{color:var(--accent)}
@media(max-width:900px){
.contact-grid{grid-template-columns:1fr;gap:44px}
}
@media(max-width:560px){
.campo-par{grid-template-columns:1fr}
}
.foot{border-top:1px solid var(--line);padding-top:24px;margin-top:64px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;color:#5A5A64}
.foot-linkedin{display:inline-flex;align-items:center;gap:7px;color:#5A5A64;transition:color .2s}
.foot-linkedin svg{width:15px;height:15px;fill:currentColor;flex:0 0 auto}
.foot-linkedin:hover{color:var(--accent)}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr}.contact-list{text-align:left}.contact-list a,.contact-list span{justify-self:start}}
/* ---------- REVEAL ---------- */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.js .rv.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.js .rv{opacity:1;transform:none}
.strip-track,.mq-track{animation:none}
}