@font-face{font-family:'Montserrat';font-style:italic;font-weight:300 900;font-display:swap;src:url('../fonts/montserrat-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Montserrat';font-style:italic;font-weight:300 900;font-display:swap;src:url('../fonts/montserrat-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:300 900;font-display:swap;src:url('../fonts/montserrat-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:300 900;font-display:swap;src:url('../fonts/montserrat-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Layout: base gris limpia, columna centrada de 1200px; las formas de crayón aparecen solo en el hero, cortadas en los bordes de algunas secciones y en contacto. */
:root{
  --bg:#e5e5e5;
  --bg-2:#EEEDEB;
  --fg:#131313;
  --fg-2:#5A5A5A;
  --line:rgba(19,19,19,.16);
  --accent:#3F7F8C;
  --accent-ink:#FFFFFF;
  --band:#3F7F8C;
  --band-fg:#F2F7F7;
  --band-line:rgba(242,247,247,.22);
  --field:#F4F4F3;
  --font:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:max(clamp(16px,5vw,64px),env(safe-area-inset-left,0px));
  --gutter-r:max(clamp(16px,5vw,64px),env(safe-area-inset-right,0px));
  --ease:cubic-bezier(.22,1,.36,1);
  --grad:linear-gradient(90deg,#E0387E,#934D91 50%,#3F7F8C);
}
/* Un solo tema: fondo #e5e5e5 siempre, también con el sistema en modo oscuro. */
:root,:root[data-theme="dark"]{color-scheme:light}

html{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:17px;line-height:1.6;overflow-x:clip;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
a{color:inherit}
h1,h2,h3,p{margin:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}

.wrap{max-width:1200px;margin-inline:auto;padding-left:var(--gutter);padding-right:var(--gutter-r);box-sizing:content-box}
.section{position:relative;padding-block:clamp(88px,11vw,160px);overflow-x:clip;scroll-margin-top:64px}
.sec-head{display:flex;flex-direction:column;gap:12px;margin-bottom:clamp(36px,5vw,56px)}
.sec-title{font-size:clamp(28px,4.2vw,54px);font-weight:700;text-transform:uppercase;letter-spacing:.04em;line-height:1.05;text-wrap:balance}
.sec-sub{color:var(--fg-2);font-size:clamp(16px,1.4vw,19px)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 26px;border-radius:999px;border:1.5px solid var(--accent);font:600 13px/1 var(--font);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:transform .3s var(--ease),background .3s,color .3s}
.btn:hover{transform:translateY(-2px)}
.btn--solid{background:var(--accent);color:var(--accent-ink)}
.btn--ghost{background:transparent;color:var(--accent)}
.btn--ghost:hover{background:var(--accent);color:var(--accent-ink)}
.link{color:var(--accent);font-weight:600;text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:2px}

/* Header */
.header{position:fixed;inset:0 0 auto;z-index:50;padding-top:env(safe-area-inset-top,0px);transition:background .4s,backdrop-filter .4s,box-shadow .4s}
.header.is-scrolled{background:color-mix(in srgb,var(--bg) 78%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.header-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px;max-width:1360px;margin-inline:auto;padding-left:var(--gutter);padding-right:var(--gutter-r);box-sizing:content-box}
.logo{font-weight:700;font-size:15px;letter-spacing:.02em;text-decoration:none;white-space:nowrap}
.nav{display:flex;align-items:center;gap:30px}
.nav a{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--fg)}
.nav a:not(.btn):hover{color:var(--accent)}
.nav .btn{padding:11px 18px;font-size:11px}
.burger{display:none;width:44px;height:44px;border:0;background:none;color:var(--fg);cursor:pointer;padding:0}
.burger svg{width:28px;height:28px}
.menu{position:fixed;inset:0;z-index:70;background:var(--bg);display:flex;flex-direction:column;justify-content:center;gap:22px;padding:calc(env(safe-area-inset-top,0px) + 80px) var(--gutter-r) 40px var(--gutter);overflow:hidden}
.menu a{font-size:34px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;text-decoration:none}
.menu .btn{align-self:flex-start;margin-top:12px}
.menu-close{position:absolute;top:calc(env(safe-area-inset-top,0px) + 14px);right:var(--gutter-r);width:44px;height:44px;border:0;background:none;color:var(--fg);font-size:30px;cursor:pointer}
.menu[hidden]{display:none}
.menu-shape{position:absolute;right:-50px;bottom:-40px;width:150px;pointer-events:none}
@media (max-width:860px){.nav{display:none}.burger{display:block}}

/* Hero */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;overflow:clip;padding:120px var(--gutter-r) 110px var(--gutter);box-sizing:border-box}
.hero-shapes{position:absolute;inset:0;z-index:1;pointer-events:none}
.hshape{position:absolute;left:var(--x);top:var(--y);width:var(--w)}
.hshape svg{display:block;width:100%;height:auto;overflow:visible}
.hero-center{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;max-width:760px}
.hero-title{display:flex;flex-direction:column;align-items:center;gap:clamp(14px,1.6vw,24px);font-weight:700}
.word{position:relative;display:block;font-size:clamp(80px,13.2vw,250px);line-height:.95;letter-spacing:-.035em;padding-bottom:.06em}
.word .letters{position:relative;z-index:1}
.scribble{position:absolute;left:-12%;width:132%;top:52%;transform:translateY(-50%);z-index:0;overflow:visible;pointer-events:none}
.hero-name{font-size:clamp(13px,1.15vw,17px);font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--accent);padding-left:.34em}
.hero-claim{margin-top:clamp(26px,3vw,40px);font-size:clamp(19px,1.7vw,26px);font-weight:600;line-height:1.3;text-wrap:balance}
.hero-lead{margin-top:14px;max-width:500px;color:var(--fg-2);font-size:clamp(15px,1.1vw,17px)}
.hero-cta{margin-top:clamp(32px,3.4vw,48px);display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
@media (max-width:700px){
  .hshape{left:var(--xm);top:var(--ym);width:var(--wm)}
  .hshape[data-m="0"]{display:none}
  .hero{min-height:auto;padding-top:24svh;padding-bottom:17svh;place-items:start center}
  .word{font-size:23vw}
  .hero-lead{font-size:15px}
}

/* Edge shapes */
.edge{position:absolute;z-index:0;width:var(--s);top:var(--t);pointer-events:none}
.edge--left{left:calc(var(--s) * -.48)}
.edge--right{right:calc(var(--s) * -.48)}
.edge svg{display:block;width:100%;height:auto;overflow:visible}
@media (max-width:700px){.edge[data-m="0"]{display:none}.edge{width:var(--sm,var(--s))}.edge--left{left:calc(var(--sm,var(--s)) * -.5)}.edge--right{right:calc(var(--sm,var(--s)) * -.5)}}
.section>.wrap{position:relative;z-index:1}

/* Sobre mí */
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,6vw,88px);align-items:center}
.about-photo{border-radius:50%;overflow:hidden;aspect-ratio:1;max-width:440px;width:100%;background:var(--bg-2);justify-self:center}
.about-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;transform:scale(1.3);transform-origin:50% 38%;display:block}
.about-text{display:flex;flex-direction:column;gap:24px;min-width:0}
.about-text p{font-size:clamp(17px,1.35vw,20px);font-weight:400;line-height:1.65;max-width:62ch}
/* la foto queda siempre al lado del texto: en pantallas angostas solo se achica */
@media (max-width:800px){.about{grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:28px;align-items:center}.about-text{gap:16px}}
@media (max-width:560px){.about{grid-template-columns:minmax(0,34%) minmax(0,1fr);gap:18px;align-items:start}.about-text p{font-size:15px;line-height:1.55}}

/* Herramientas: carrusel de derecha a izquierda con blur en los laterales */
.tools-marquee{position:relative;overflow:hidden;padding-block:14px}
.tools-marquee::before,.tools-marquee::after{content:"";position:absolute;top:0;bottom:0;width:clamp(64px,14vw,220px);z-index:2;pointer-events:none;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.tools-marquee::before{left:0;background:linear-gradient(90deg,var(--bg) 10%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 35%,transparent);mask-image:linear-gradient(90deg,#000 35%,transparent)}
.tools-marquee::after{right:0;background:linear-gradient(270deg,var(--bg) 10%,transparent);-webkit-mask-image:linear-gradient(270deg,#000 35%,transparent);mask-image:linear-gradient(270deg,#000 35%,transparent)}
.tools-track{display:flex;width:max-content;animation:marq 34s linear infinite}
.tools-marquee:hover .tools-track{animation-play-state:paused}
.tools-marquee.is-draggable{cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.tools-marquee.is-drag{cursor:grabbing}
.tools{display:flex;gap:clamp(16px,2.2vw,32px);list-style:none;margin:0;padding:0 clamp(8px,1.1vw,16px)}
.tool{display:flex;flex-direction:column;align-items:center;gap:10px;flex:none;width:clamp(88px,8.5vw,124px)}
@media (prefers-reduced-motion:reduce){.tools-track{animation:none;width:auto;justify-content:center}.tools[aria-hidden]{display:none}.tools{flex-wrap:wrap;justify-content:center;row-gap:20px}.tools-marquee::before,.tools-marquee::after{display:none}}
.tool-mark{width:100%;aspect-ratio:1;border-radius:22%;border:1.5px solid var(--line);display:grid;place-items:center;font-weight:700;font-size:clamp(17px,1.9vw,26px);letter-spacing:-.01em;color:var(--fg-2);transition:background .35s,color .35s,border-color .35s,transform .35s var(--ease)}
.tool:hover .tool-mark{background:var(--tb);color:var(--tf);border-color:transparent;transform:translateY(-4px)}
.cl-logo{display:block;width:84%;max-height:62%;height:auto}
/* clientes: logos sueltos, sin recuadro; el nombre aparece solo al pasar el mouse sobre el logo */
#clients-track .tool-mark,#clients-track .tool:hover .tool-mark{border-color:transparent;background:none}
#clients-track .tool:hover .tool-mark{color:var(--fg)}
@media (hover:hover){
  #clients-track .tool-name{opacity:0;transform:translateY(-4px);transition:opacity .25s ease,transform .25s ease}
  #clients-track .tool:hover .tool-name{opacity:1;transform:none}
}
.tool-name{font-size:12px;color:var(--fg-2);text-align:center;line-height:1.3}

/* Herramientas: caja de selección punteada con manijas y grilla de íconos */
.tbox{--ti:#42A6B4;position:relative;max-width:860px;margin-inline:auto;padding:clamp(22px,3.4vw,44px) clamp(14px,3.4vw,48px)}
.tb-frame{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;background:linear-gradient(90deg,var(--fg) 55%,transparent 0) top left/18px 1.5px repeat-x,linear-gradient(90deg,var(--fg) 55%,transparent 0) bottom left/18px 1.5px repeat-x,linear-gradient(180deg,var(--fg) 55%,transparent 0) top left/1.5px 18px repeat-y,linear-gradient(180deg,var(--fg) 55%,transparent 0) top right/1.5px 18px repeat-y}
.tb-cursor{position:absolute;left:100%;top:100%;width:22px;height:22px;margin:-3px 0 0 -3px;opacity:0;overflow:visible}
.tb-h{--hs:clamp(10px,1vw,13px);position:absolute;z-index:1;width:var(--hs);height:var(--hs);margin:calc(var(--hs) / -2) 0 0 calc(var(--hs) / -2);background:var(--fg)}
.tgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,2vw,26px) clamp(10px,2vw,26px)}
.tcell{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.ticon{width:clamp(52px,6.5vw,92px);height:auto;display:block;transition:transform .35s var(--ease)}
.tcell:hover .ticon{transform:translateY(-4px)}
.tname{font-size:clamp(12px,1.1vw,15px);font-weight:500;color:#3a3a3a;line-height:1.2}
@media (max-width:520px){.tgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Trabajos */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:36px}
.chip{border:1.5px solid var(--line);background:transparent;color:var(--fg);border-radius:999px;padding:10px 18px;font:600 12px/1 var(--font);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)}
@media (max-width:960px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.grid{grid-template-columns:1fr}}
.card{display:flex;flex-direction:column;gap:14px;text-decoration:none;color:inherit}
.card[hidden]{display:none}
.cover{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/3;max-width:100%}
.cover-art{position:absolute;inset:0;background:var(--tint);color:#131313;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(18px,2vw,26px);transition:transform .8s var(--ease)}
.cover-art .ct{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.cover-art .cn{font-size:clamp(28px,3vw,42px);font-weight:700;line-height:.98;letter-spacing:-.025em;text-wrap:balance}
.cover-cta{position:absolute;right:16px;top:16px;background:#131313;color:#F2F2F2;border-radius:999px;padding:10px 16px;font-size:12px;font-weight:600;letter-spacing:.06em;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s var(--ease)}
.card:hover .cover-art,.card:focus-visible .cover-art{transform:scale(1.05)}
.card:hover .cover-cta,.card:focus-visible .cover-cta{opacity:1;transform:none}
/* nombre y categoría del trabajo: aparecen al pasar el mouse (en pantallas táctiles quedan visibles) */
.cover-info{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:clamp(18px,2vw,26px);color:#fff;background:linear-gradient(to top,rgba(19,19,19,.72),rgba(19,19,19,0) 65%);opacity:0;transition:opacity .4s ease;pointer-events:none}
.ci-cat{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.85;transform:translateY(8px);transition:transform .45s var(--ease)}
.ci-name{font-size:clamp(24px,2.6vw,36px);font-weight:700;line-height:1;letter-spacing:-.02em;text-wrap:balance;transform:translateY(10px);transition:transform .45s var(--ease)}
.card:hover .cover-info,.card:focus-visible .cover-info{opacity:1}
.card:hover .ci-cat,.card:hover .ci-name,.card:focus-visible .ci-cat,.card:focus-visible .ci-name{transform:none}
@media (hover:none){.cover-info{opacity:1}.ci-cat,.ci-name{transform:none}}
.card-meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.card-meta h3{font-size:17px;font-weight:600;line-height:1.3}
.card-meta span{font-size:13px;color:var(--fg-2);text-align:right}
.more-works{margin-top:40px;display:flex;justify-content:center}
.more-works[hidden]{display:none}
.more-works:not([hidden])+.more{margin-top:20px}
/* trabajos: primero se ven 6 (dos filas completas en compu) o 4 (tablet y celular); el resto se despliega con el botón */
@media (max-width:700px){.grid.is-collapsed .card:nth-child(n+5){display:none}}
.more{margin-top:48px;display:flex;justify-content:center}

/* Servicios */
.band{background:var(--band);color:var(--band-fg)}
.band .sec-sub{color:var(--band-fg);opacity:.8}
.svcs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;list-style:none;margin:0;padding:0;border-top:1px solid var(--band-line)}
.svc{display:flex;flex-direction:column;gap:14px;padding:32px 28px 36px 0;border-bottom:1px solid var(--band-line)}
.svc svg{width:46px;height:46px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.svc h3{font-size:18px;font-weight:600}
.svc p{font-size:15px;line-height:1.55;opacity:.82;max-width:30ch}
@media (max-width:960px){.svcs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.svcs{grid-template-columns:1fr}.svc{padding-right:0}}

/* Clientes */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-track{display:flex;width:max-content;animation:marq 48s linear infinite}
.marquee ul{display:flex;gap:clamp(36px,5vw,72px);list-style:none;margin:0;padding:0 clamp(18px,2.5vw,36px)}
.marquee li{font-size:clamp(22px,2.8vw,38px);font-weight:700;letter-spacing:-.01em;color:var(--fg-2);opacity:.55;white-space:nowrap;transition:color .3s,opacity .3s}
.marquee li:hover{color:var(--accent);opacity:1}
@keyframes marq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track,.lf-band .marquee-track{animation:none;flex-wrap:wrap;width:auto}.marquee ul[aria-hidden]{display:none}.marquee ul{flex-wrap:wrap;row-gap:12px}}

/* ¿Qué hago? (ref. video): título centrado con máquina de escribir y píldoras de servicios alrededor, sólidas con grano y sombra */
.qh{position:relative;max-width:1600px;margin-inline:auto;margin-top:clamp(-90px,-6vw,-24px);height:clamp(460px,56vw,860px);display:grid;place-items:center;padding-left:var(--gutter);padding-right:var(--gutter-r)}
.qh-title{position:relative;z-index:1;font-size:clamp(48px,7.4vw,150px);font-weight:700;line-height:1;text-align:center}
.qh-title.tw-title{text-transform:uppercase;letter-spacing:-.01em}
.qh-title .tw-live{text-align:left;white-space:nowrap}
.qh-pills{list-style:none;margin:0;padding:0;position:absolute;inset:0;z-index:2;pointer-events:none}
.qh-pill{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);pointer-events:auto}
.qh-float{display:block}
.glass{position:relative;display:inline-block;overflow:hidden;white-space:nowrap;border-radius:999px;padding:.5em 1.05em .56em;font-size:clamp(13px,1.9vw,34px);font-weight:500;line-height:1;color:#fff;background:var(--c);box-shadow:0 6px 14px -6px rgba(19,19,19,.28),0 2px 4px -2px rgba(19,19,19,.18)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px;opacity:.22;mix-blend-mode:overlay;pointer-events:none}
.glass span{position:relative;z-index:1}
@media (max-width:700px){
  .qh{height:auto;margin-top:0;display:flex;flex-direction:column;align-items:center;gap:28px;padding-block:24px}
  .qh-pills{position:static;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;pointer-events:auto}
  .qh-pill{position:static;transform:none}
  .glass{font-size:15px}
}

/* Títulos con máquina de escribir (ref. video): cada letra entra con otro peso o itálica y se asienta; el cursor cambia de forma */
.tw-title{position:relative}
.tw-inline{display:inline-block}
.tw-inline .tw-live{text-align:left;white-space:nowrap}
.sec-title.tw-title,.contact-title.tw-title{text-transform:none;letter-spacing:-.015em}
.tw-on .tw-ghost{visibility:hidden}
.tw-live{position:absolute;inset:0;pointer-events:none}
.tw-title:not(.tw-on) .tw-live{display:none}
.tw-ch.s0{font-weight:300;font-style:italic}
.tw-ch.s1{font-weight:900}
.tw-ch.s2{font-weight:800;font-style:italic}
.tw-ch.s3{font-weight:400;font-style:italic}
.tw-ch.s4{font-weight:900;font-style:italic}
.tw-ch.s5{font-weight:300}
.tw-acc{color:var(--accent)}
.tw-cur{display:inline-block;width:.07em;height:.78em;margin-left:.05em;background:var(--accent);transform:translateY(.05em)}
.tw-cur.block{width:.36em}
.tw-cur.slash{width:auto;height:auto;margin-left:.02em;background:none;transform:none;color:var(--accent);font-weight:800;font-style:italic}
.tw-cur.slash::before{content:"/"}
.tw-cur.blink{animation:twBlink .8s steps(1) infinite}
@keyframes twBlink{50%{opacity:0}}

/* Separador */
.sep{position:relative;height:clamp(90px,10vw,150px);overflow-x:clip}
.sep svg{position:absolute;left:-2%;top:0;width:70%;height:100%;overflow:visible}
@media (max-width:700px){.sep{display:none}}

/* Contacto */
.contact-title{font-size:clamp(40px,7.4vw,108px);font-weight:700;text-transform:uppercase;line-height:.95;letter-spacing:-.01em;text-wrap:balance}
.contact-sub{margin-top:18px;font-size:clamp(18px,1.6vw,22px);color:var(--fg-2)}
.contact{margin-top:clamp(40px,5vw,64px)}
.cinfo{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:32px clamp(28px,4vw,56px);align-items:start;min-width:0}
.clabel{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-2);margin-bottom:8px}
.email-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.email{font-size:clamp(18px,1.8vw,24px);font-weight:600;word-break:break-all;user-select:all}
.copy{border:1.5px solid var(--line);background:none;color:var(--fg);border-radius:999px;padding:8px 14px;font:600 11px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.copy:hover{border-color:var(--accent);color:var(--accent)}
.socials{display:flex;flex-wrap:nowrap;gap:12px;list-style:none;margin:0;padding:0}
.socials a{display:grid;place-items:center;width:52px;height:52px;border:1.5px solid var(--line);border-radius:50%;text-decoration:none;transition:border-color .3s,color .3s,background .3s,transform .3s var(--ease)}
.socials a:hover{border-color:var(--accent);background:var(--accent);color:var(--accent-ink);transform:translateY(-3px)}
.socials svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.form{display:flex;flex-direction:column;gap:16px;min-width:0}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2)}
.field input,.field textarea{font:400 16px/1.5 var(--font);color:var(--fg);background:var(--field);border:1.5px solid var(--line);border-radius:16px;padding:14px 16px;outline:none;transition:border-color .3s,box-shadow .3s}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}
.form-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.form-note{font-size:14px;color:var(--fg-2);min-height:1.4em}
.form-note.err{color:#C2334D}

.footer{border-top:1px solid var(--line);padding-block:28px}
.footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;font-size:13px;color:var(--fg-2)}
.footer a{color:var(--fg);font-weight:600;text-decoration:none}

.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--fg);color:var(--bg);padding:12px 20px;border-radius:999px;font-size:14px;font-weight:500;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s var(--ease);z-index:80}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* Proyecto */
.p-cover{position:relative;display:flex;align-items:flex-start;background:var(--bg);color:var(--fg);overflow:clip;padding-top:clamp(100px,10vw,136px);padding-bottom:clamp(32px,4vw,56px)}
.p-cover .wrap{width:100%;position:relative;z-index:1}
.p-tags{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.p-name{margin-top:14px;font-size:clamp(48px,9vw,140px);font-weight:700;line-height:.92;letter-spacing:-.035em;text-wrap:balance}
.p-line{margin-top:20px;font-size:clamp(17px,1.6vw,22px);max-width:none}
.ficha{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:28px 36px;margin:0;padding-bottom:clamp(40px,5vw,64px);border-bottom:1px solid var(--line)}
.ficha div{min-width:0}
.ficha dt{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-2);margin-bottom:8px}
.ficha dd{margin:0;font-size:16px;line-height:1.5}
.p-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,72px);padding-block:clamp(48px,6vw,88px)}
@media (max-width:760px){.p-cols{grid-template-columns:1fr}}
.p-cols h2{font-size:clamp(22px,2.2vw,30px);font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:16px}
.p-cols p{font-size:17px;line-height:1.65;max-width:56ch}
.todo{border:1.5px dashed var(--line);border-radius:16px;padding:16px 18px;color:var(--fg-2);font-size:15px}
.p-about{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,5vw,72px);padding-bottom:clamp(40px,5vw,72px)}
.p-about h2{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.p-about p{font-size:clamp(16px,1.2vw,18px);line-height:1.65;max-width:60ch}
@media (max-width:760px){.p-about{grid-template-columns:1fr}}
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,28px)}
.gallery figure{margin:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.gallery figure.wide{grid-column:1/-1}
.ph{border-radius:20px;background:var(--bg-2);border:1.5px dashed var(--line);display:grid;place-items:center;color:var(--fg-2);font-size:14px;aspect-ratio:4/3;max-width:100%}
.wide .ph{aspect-ratio:16/8}
@media (max-width:600px){.gallery{grid-template-columns:1fr}.wide .ph{aspect-ratio:4/3}}
.cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.gallery img{display:block;width:100%;height:auto;border-radius:20px}
.gallery .tall img{max-width:360px;margin-inline:auto;border-radius:12px}
.gallery .tall figcaption,.gallery .mid figcaption{text-align:center}
.gallery .stack{grid-column:1/-1;width:100%;max-width:900px;margin-inline:auto;border-radius:20px;overflow:hidden;display:flex;flex-direction:column}
.gallery .stack img{border-radius:0;max-width:none}
.gallery .stack-pair{display:flex}
.gallery .stack-pair img{flex-shrink:1;flex-basis:0;width:0;min-width:0;height:auto}
.gallery .stack-video{background:#0d0d27;display:flex;justify-content:center}
.gallery .stack-video video{display:block;width:100%;max-width:min(506px,100%);height:auto}
.gallery .stack-video.is-wide video{max-width:100%}
.gallery .mid img{max-width:820px;margin-inline:auto}
.gallery figcaption{font-size:13px;color:var(--fg-2)}
.p-nav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding-block:40px;border-top:1px solid var(--line);margin-top:clamp(48px,6vw,88px)}
.p-nav a{text-decoration:none;font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.p-nav a:hover{color:var(--accent)}
.p-close{text-align:center;display:flex;flex-direction:column;align-items:center;gap:24px}
.p-close h2{font-size:clamp(30px,4.6vw,64px);font-weight:700;text-transform:uppercase;line-height:1;text-wrap:balance}

/* ===== Celular: ajustes solo para pantallas angostas (el diseño de escritorio no cambia) ===== */
@media (max-width:700px){
  /* inicio: la palabra con aire a los costados y las formas de abajo por debajo de los botones */
  .word{font-size:21vw}
  .hero{padding-bottom:clamp(150px,40vw,180px)}
  /* secciones con menos espacio vacío entre sí */
  .section{padding-block:64px}
  /* formas de los bordes: solo donde no tapan contenido */
  #sobre-mi .edge,#herramientas .edge,.p-cover .edge{display:none}
  #servicios .edge{top:-100px}
  #clientes{padding-bottom:24px}
  #contacto .edge--right{top:auto;bottom:24px}
  /* trabajos: la etiqueta de categoría entra en una o dos líneas */
  .ci-cat{font-size:10px;letter-spacing:.1em;line-height:1.5}
  .ci-name{font-size:24px}
  /* sin hover en el celular: nombre y categoría de cada trabajo y nombre de cada cliente siempre visibles */
  .cover-info{opacity:1}
  .ci-cat,.ci-name{transform:none}
  #clients-track .tool-name{opacity:1;transform:none}
  /* clientes: logos más grandes */
  #clients-track .tool{width:112px}
  /* contacto */
  .contact-title{font-size:clamp(34px,10.5vw,46px)}
  .email{font-size:17px}
  /* páginas de trabajo */
  .p-name{font-size:clamp(40px,12vw,56px)}
  .p-tags{font-size:11px;line-height:1.6}
  .p-line{font-size:17px}
  .p-close h2{font-size:clamp(26px,8vw,34px)}
  .p-nav{flex-direction:column;align-items:center;text-align:center;gap:18px}
}
@media (max-width:560px){
  /* sobre mí: foto y título en una fila, el texto debajo a todo el ancho */
  .about{grid-template-columns:minmax(0,38%) minmax(0,1fr);column-gap:18px;row-gap:22px;align-items:center}
  .about-photo{grid-column:1;grid-row:1}
  .about-text{display:contents}
  .about-text .sec-title{grid-column:2;grid-row:1}
  .about-text p{grid-column:1/-1;max-width:none;font-size:16px;line-height:1.65}
}

/* Estados previos a la animación (se quitan si el script no carga) */
.pre [data-reveal],.pre [data-intro],.pre .hero .hshape,.pre .word .ch,.pre .scribble{opacity:0}