/* =========================================================
   TIPOGRAFÍA: Inter alojada en el propio sitio (sin Google Fonts)
   Licencia SIL Open Font License 1.1 (assets/fonts/OFL.txt)
   ========================================================= */
@font-face{font-family:'Inter Variable';font-style:normal;font-display:swap;font-weight:100 900;
  src:url(fonts/inter-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter Variable';font-style:normal;font-display:swap;font-weight:100 900;
  src:url(fonts/inter-latin-wght-normal.woff2) format('woff2-variations');
  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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* =========================================================
   VARIABLES DE DISEÑO — colores y medidas en un solo sitio
   ========================================================= */
:root{
  /* PALETA MODO CLARO — B · Corporativo · cobalto (regla 60-30-10)
     60 %: --bg / --soft · 30 %: --ink, --surface, --line, --block · 10 %: --accent */
  color-scheme:light;
  --bg:#F8FAFC;
  --surface:#FFFFFF;
  --soft:#F1F5F9;
  --ink:#0F172A;
  --ink-2:#475569;
  --ink-3:#56657A;
  --line:#E2E8F0;
  --line-strong:#CBD5E1;
  --accent:#2563EB;
  --accent-hover:#1D4ED8;
  --accent-text:#2563EB;
  --accent-soft:#DBEAFE;
  --on-accent:#FFFFFF;
  --ph-ink:#1E40AF;
  --block:#0F172A;
  --block-ink:#FFFFFF;
  --block-ink-2:#CBD5E1;
  --block-line:rgba(255,255,255,.12);
  --block-accent:#60A5FA;
  --tag-bg:#56657A;        /* gris pizarra: menos contraste que el azul marino */
  --tag-ink:#FFFFFF;
  --media-bg:#0F172A;
  --pattern:#FFFFFF;
  --shadow:#0F172A;
  --error:#DC2626;
  --il-paper:#FFFFFF;
  --il-line:#CBD5E1;
  --il-soft:#F1F5F9;
  --il-ink:#0F172A;
  --il-text:#475569;
  --il-accent:#2563EB;
  --il-accent-soft:#DBEAFE;
  --il-core:#0F172A;
  --radius:14px;
  --max:1160px;
  --ease:cubic-bezier(.22,.8,.24,1);
}

/* PALETA MODO OSCURO — se activa con <html data-theme="dark">.
   El cobalto se aclara (#60A5FA) para mantener contraste WCAG ≥ 4.5:1 sobre fondo oscuro. */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0F172A;
  --surface:#1E293B;
  --soft:#0B1120;
  --ink:#E2E8F0;
  --ink-2:#94A3B8;
  --ink-3:#8C9AB0;
  --line:#334155;
  --line-strong:#475569;
  --accent:#60A5FA;
  --accent-hover:#93C5FD;
  --accent-text:#60A5FA;
  --accent-soft:color-mix(in srgb, #60A5FA 16%, #0F172A);
  --on-accent:#0F172A;
  --ph-ink:#93C5FD;
  --block:#1E293B;
  --block-ink:#E2E8F0;
  --block-ink-2:#94A3B8;
  --block-line:#334155;
  --block-accent:#60A5FA;
  --tag-bg:#2B3A50;
  --tag-ink:#E2E8F0;
  --media-bg:#0B1120;
  --pattern:#94A3B8;
  --shadow:#000000;
  --error:#F87171;
  --il-paper:#0F172A;
  --il-line:#334155;
  --il-soft:#1E293B;
  --il-ink:#94A3B8;
  --il-text:#94A3B8;
  --il-accent:#60A5FA;
  --il-accent-soft:color-mix(in srgb, #60A5FA 16%, #0F172A);
  --il-core:#020617;
}

/* =========================================================
   BASE
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Inter Variable","Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.lock{overflow:hidden}
img,svg,video{max-width:100%;display:block}
a{color:inherit}
button{font-family:inherit}
h1,h2,h3{line-height:1.12;letter-spacing:-.02em;margin:0 0 .5em}
h1{font-size:clamp(2.3rem,5.8vw,4rem);font-weight:800}
h2{font-size:clamp(1.7rem,3.6vw,2.5rem);font-weight:750}
h3{font-size:1.2rem;font-weight:700}
p{margin:0 0 1em}
.container{width:100%;max-width:var(--max);margin:0 auto;padding:0 20px}
section{padding:56px 0}   /* espaciado vertical de todas las secciones (móvil) */
.eyebrow{
  display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent-text);margin-bottom:14px;
}
.lead{font-size:1.15rem;color:var(--ink-2);max-width:680px}

/* Marcador de dato pendiente [X] — visible a propósito */
.ph{
  background:var(--accent-soft);color:var(--ph-ink);border:1.5px dashed var(--accent);
  border-radius:5px;padding:0 .35em;font-weight:700;white-space:nowrap;
}

/* Fundido suave al cambiar de idioma */
.fade-swap{transition:opacity .18s ease}
body.switching .fade-swap{opacity:0}

/* =========================================================
   BOTÓN PRINCIPAL (único CTA)
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:var(--on-accent);
  text-decoration:none;font-weight:700;font-size:1rem;padding:15px 26px;border-radius:999px;border:0;cursor:pointer;
  box-shadow:0 6px 18px -8px color-mix(in srgb, var(--accent) 80%, transparent);white-space:nowrap;
  transition:transform .25s var(--ease),background .25s,box-shadow .25s;
}
.btn:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 12px 24px -10px color-mix(in srgb, var(--accent-hover) 90%, transparent)}
.btn .arrow{transition:transform .25s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}
.btn--sm{padding:10px 16px;font-size:.9rem}
.btn--block{display:flex;width:100%;justify-content:center}
.btn .short{display:none}
@media (max-width:440px){.btn--sm .long{display:none}.btn--sm .short{display:inline}}


/* =========================================================
   1. NAVEGACIÓN
   ========================================================= */
.header{
  position:sticky;top:0;z-index:50;background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s;
}
.header.is-scrolled{border-color:var(--line);box-shadow:0 6px 20px -16px color-mix(in srgb, var(--shadow) 40%, transparent)}
.header .container{display:flex;align-items:center;height:68px;gap:14px}
.header-left{display:flex;align-items:center;gap:12px;flex-shrink:0}
.nav{display:none;gap:4px;margin-left:auto}
/* Active section = soft pill (an underline would clash with the reading progress bar) */
.nav a{text-decoration:none;font-size:.93rem;font-weight:550;color:var(--ink-2);padding:6px 12px;border-radius:999px;transition:color .2s,background-color .25s}
.nav a:hover{color:var(--ink);background:var(--soft)}
.nav a.active{color:var(--accent-text);background:var(--accent-soft)}
.btn.is-pop{animation:cta-pop .6s var(--ease)}
@keyframes cta-pop{0%{transform:scale(1)}40%{transform:scale(1.12)}70%{transform:scale(.97)}100%{transform:scale(1)}}
.header-right{display:flex;align-items:center;gap:12px;margin-left:auto;flex-shrink:0}


/* Botón de tema sol / luna */
.theme-toggle{
  width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);
  display:grid;place-items:center;cursor:pointer;padding:0;flex-shrink:0;
  transition:border-color .25s,background .25s,transform .25s var(--ease);
}
.header-left .theme-toggle{margin-right:4px}
@media (min-width:640px){.header-left .theme-toggle{margin-right:10px}}
.theme-toggle:hover{border-color:var(--accent);transform:rotate(-12deg)}
.theme-toggle:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.theme-toggle svg{width:20px;height:20px;overflow:visible}
.theme-toggle .sun-core{transform-box:fill-box;transform-origin:center;transition:transform .7s cubic-bezier(.65,0,.35,1)}
.theme-toggle .moon-bite{transition:transform .7s cubic-bezier(.65,0,.35,1)}
.theme-toggle .sun-rays{transform-box:view-box;transform-origin:12px 12px;transition:transform .7s cubic-bezier(.65,0,.35,1),opacity .45s ease}
[data-theme="dark"] .theme-toggle .sun-core{transform:scale(1.75)}
[data-theme="dark"] .theme-toggle .moon-bite{transform:translate(-6px,4px)}
[data-theme="dark"] .theme-toggle .sun-rays{transform:rotate(-90deg) scale(.4);opacity:0}
/* Entrada: el icono "detecta" el modo del sistema y gira hasta su estado */
.theme-toggle.intro svg{animation:theme-intro .9s var(--ease) both}
@keyframes theme-intro{from{transform:rotate(-200deg) scale(.3);opacity:0}to{transform:none;opacity:1}}
/* Cambio de tema: barrido circular desde el botón (View Transitions) */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
/* Durante el barrido se congelan las demás transiciones de color: así la página nueva
   aparece ya con sus colores finales, sin elementos a medio cambiar (solo se anima el icono) */
html.theme-switching *:not(.theme-toggle *){transition:none!important}
/* Alternativa sin View Transitions: fundido suave de colores */
html.theme-fade, html.theme-fade *{transition:background-color .4s ease,color .4s ease,border-color .4s ease,fill .4s ease,stroke .4s ease!important}

/* Selector de idioma ES | EN */
.lang{display:inline-flex;align-items:center;font-size:.85rem;font-weight:700;color:var(--ink-3)}
.lang button{background:none;border:0;padding:6px 4px;cursor:pointer;color:inherit;font-weight:700;font-size:inherit;position:relative;transition:color .2s}
.lang button::after{content:"";position:absolute;left:4px;right:4px;bottom:2px;height:2px;background:var(--accent);transform:scaleX(0);transition:transform .3s var(--ease)}
.lang button[aria-pressed="true"]{color:var(--ink)}
.lang button[aria-pressed="true"]::after{transform:scaleX(1)}
.lang span{padding:0 2px;color:var(--line)}

/* =========================================================
   2. HERO
   ========================================================= */
.hero{padding:52px 0 60px}
.hero .container{display:grid;gap:44px;align-items:center}
.hero h1 em{font-style:normal;position:relative;white-space:nowrap}
.hero h1 em::after{
  content:"";position:absolute;left:0;right:0;bottom:.06em;height:.14em;background:var(--accent);
  transform:scaleX(0);transform-origin:left;animation:grow 1s .7s var(--ease) forwards;z-index:-1;
}
@keyframes grow{to{transform:scaleX(1)}}
.hero .lead{margin-bottom:18px}
.hero-meta{display:flex;flex-direction:column;gap:6px;font-size:.92rem;color:var(--ink-2);margin-bottom:28px}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}

/* Composición abstracta: cinco áreas conectadas a un núcleo */
.illu{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:14px;box-shadow:0 30px 60px -40px color-mix(in srgb, var(--shadow) 35%, transparent)}
.illu text{font-family:inherit}
/* Ilustración del hero: colores tomados del tema */
.illu [fill="#fff"]{fill:var(--il-paper)}
.illu [fill="#D6D2C6"]{fill:var(--il-line)} .illu [stroke="#D6D2C6"]{stroke:var(--il-line)}
.illu [fill="#F2F0E9"]{fill:var(--il-soft)}
.illu [fill="#FBEBCF"]{fill:var(--il-accent-soft)}
.illu [fill="#0B1F3A"]{fill:var(--il-ink)} .illu [stroke="#0B1F3A"]{stroke:var(--il-ink)}
.illu [fill="#44536B"]{fill:var(--il-text)}
.illu [fill="#E8A33D"]{fill:var(--il-accent)} .illu [stroke="#E8A33D"]{stroke:var(--il-accent)}
.illu .core-box{fill:var(--il-core)}
.illu .core-label{fill:var(--block-accent);font-family:inherit;letter-spacing:.02em}

.sat{transform-box:fill-box;transform-origin:center;animation:float 6s ease-in-out infinite}
.s2{animation-delay:-1.2s}.s3{animation-delay:-2.4s}.s4{animation-delay:-3.6s}.s5{animation-delay:-4.8s}.s6{animation-delay:-2s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.link{stroke-dasharray:5 7;animation:dash 1.6s linear infinite}
@keyframes dash{to{stroke-dashoffset:-24}}
.pulse{transform-box:fill-box;transform-origin:center;animation:pulse 2.6s ease-out infinite}
@keyframes pulse{0%{transform:scale(.7);opacity:.7}100%{transform:scale(1.5);opacity:0}}
.core-sq{transform-box:fill-box;transform-origin:center;animation:turn 12s linear infinite}
@keyframes turn{to{transform:rotate(360deg)}}
.scanv{animation:scanv 2s ease-in-out infinite alternate}
@keyframes scanv{from{transform:translateY(0)}to{transform:translateY(46px)}}
.typing circle{animation:blink 1.2s infinite}
.typing circle:nth-child(2){animation-delay:.2s}.typing circle:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}
.bar{transform-box:fill-box;transform-origin:bottom;animation:bar 3s var(--ease) infinite alternate}
.b2{animation-delay:-.6s}.b3{animation-delay:-1.2s}.b4{animation-delay:-1.8s}
@keyframes bar{from{transform:scaleY(.35)}to{transform:scaleY(1)}}

/* =========================================================
   3. CIFRAS
   ========================================================= */
.stats-sec{padding:0}
.stats{background:var(--block);color:var(--block-ink);border-radius:var(--radius);display:grid;padding:8px 24px}
.stat{padding:22px 4px;border-bottom:1px solid var(--block-line);display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.stat:last-child{border-bottom:0}
.stat-num{font-size:2.4rem;font-weight:800;color:var(--block-accent);line-height:1}
.stat-num .ph{font-size:1.6rem}
.stat-label{color:var(--block-ink-2)}

/* =========================================================
   4. QUÉ HAGO
   ========================================================= */
.services{display:grid;gap:18px;margin-top:36px}
.service{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px;
  transition:transform .35s var(--ease),box-shadow .35s,border-color .35s;
}
.service:hover{transform:translateY(-4px);border-color:var(--line-strong);box-shadow:0 22px 44px -34px color-mix(in srgb, var(--shadow) 50%, transparent)}
.service h3{color:var(--accent-text)}
.service .pb{color:var(--ink-2);margin-bottom:14px}
/* Key phrase: marker-style highlight */
.service .pb strong{color:var(--ink);font-weight:650;background:linear-gradient(transparent 68%,var(--accent-soft) 68%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.service ul{margin:0;padding:12px 0 0;list-style:none;border-top:1px solid var(--line)}
.service li{padding:4px 0 4px 20px;position:relative;font-size:.95rem}
.service li::before{content:"";position:absolute;left:0;top:14px;width:10px;height:2px;background:var(--accent)}

/* =========================================================
   5. TRABAJOS: filtros + grid + panel
   ========================================================= */
.works-sec{background:var(--soft)}
.filters{display:flex;gap:8px;margin:32px 0 26px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.filters::-webkit-scrollbar{display:none}
.filter{
  flex:0 0 auto;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);
  padding:9px 16px;border-radius:999px;font-weight:600;font-size:.92rem;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;transition:background .25s,border-color .25s;
}
.filter:hover{border-color:var(--ink)}
.filter .count{font-size:.75rem;background:var(--soft);border-radius:999px;padding:1px 7px;color:var(--ink-2)}
.filter[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.filter[aria-pressed="true"] .count{background:color-mix(in srgb, var(--on-accent) 12%, transparent);color:var(--on-accent)}

.works{display:grid;gap:20px}
.work{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  cursor:pointer;display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s;
}
.work:hover{transform:translateY(-4px);box-shadow:0 24px 50px -34px color-mix(in srgb, var(--shadow) 50%, transparent)}
.work:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.work.is-hidden{display:none}
.work.pop{animation:popIn .5s var(--ease) both;animation-delay:var(--i,0s)}
@keyframes popIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.empty{text-align:center;color:var(--ink-2);padding:40px 0}

/* Hueco de imagen/vídeo con patrón abstracto por categoría */
.media{aspect-ratio:16/9;background:var(--media-bg);position:relative;display:grid;place-items:center;color:var(--block-ink-2);font-size:.85rem;overflow:hidden}
.media img,.media video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.media::before{content:"";position:absolute;inset:0;opacity:.18;transition:transform .8s var(--ease)}
.work:hover .media::before{transform:scale(1.08)}
.media[data-cat="asistentes"]::before{background:repeating-linear-gradient(0deg,transparent 0 22px,var(--pattern) 22px 24px)}
.media[data-cat="documentos"]::before{background:repeating-linear-gradient(90deg,transparent 0 26px,var(--pattern) 26px 28px),repeating-linear-gradient(0deg,transparent 0 34px,var(--pattern) 34px 36px)}
.media[data-cat="vision"]::before{background:radial-gradient(circle,var(--pattern) 1.5px,transparent 2px) 0 0/18px 18px}
.media[data-cat="apps"]::before{background:repeating-linear-gradient(45deg,transparent 0 16px,var(--pattern) 16px 18px)}
.media[data-cat="datos"]::before{background:repeating-linear-gradient(90deg,transparent 0 10px,var(--pattern) 10px 12px,transparent 12px 30px)}
.media > span{position:relative}
.media .ph{font-size:.8rem}

.work-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.tag{font-size:.62rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:3px 8px;border-radius:999px}
.tag--cat{background:var(--tag-bg);color:var(--tag-ink)}
.works.is-filtered .tag--cat{display:none}
.tag--own{background:var(--soft);color:var(--ink-2)}
.tag--client{background:var(--accent-soft);color:var(--ph-ink)}
.work h3{font-size:1.1rem;margin-bottom:8px}
.work .res{color:var(--ink-2);font-size:.94rem;margin:0 0 10px}
.meta{font-size:.8rem;color:var(--ink-3);margin:0 0 14px}
/* Card footer pinned to the bottom so all cards in a row line up */
.work-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.work .key{margin:0 0 4px;font-size:.88rem;color:var(--ink-2)}
.work .key strong{color:var(--accent-text);font-size:1.05rem;font-weight:800;margin-right:4px}
.meta .ph{font-size:.75rem}
.more{margin-top:auto;font-weight:700;font-size:.9rem;display:inline-flex;gap:6px;align-items:center}
.more i{font-style:normal;transition:transform .25s var(--ease)}
.work:hover .more i{transform:translateX(4px)}


/* Panel desplegable (lateral en escritorio, pantalla completa en móvil) */
.overlay{position:fixed;inset:0;background:color-mix(in srgb, var(--shadow) 45%, transparent);z-index:90;opacity:0;pointer-events:none;transition:opacity .35s ease}
.overlay.open{opacity:1;pointer-events:auto}
.panel{
  position:fixed;top:0;right:0;height:100%;width:min(600px,100%);background:var(--bg);z-index:100;
  transform:translateX(100%);transition:transform .45s var(--ease),visibility 0s .45s;overflow-y:auto;
  box-shadow:-30px 0 60px -30px color-mix(in srgb, var(--shadow) 50%, transparent);visibility:hidden;
}
.panel.open{transform:none;visibility:visible;transition:transform .45s var(--ease)}
.panel-close{
  position:sticky;top:14px;display:block;margin:14px 14px -56px auto;z-index:2;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line);background:var(--surface);cursor:pointer;font-size:1.3rem;line-height:1;color:var(--ink);
  transition:transform .25s var(--ease),background .25s;
}
.panel-close:hover{transform:rotate(90deg);background:var(--accent-soft)}
.panel-inner{padding:26px 26px 40px}
#panel-media:empty + .panel-inner{padding-top:72px}   /* sin imagen: deja sitio al botón de cerrar */
.panel h2{font-size:1.6rem}
.panel h4{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:26px 0 8px}
.panel ul{margin:0;padding:0;list-style:none}
.panel li{padding:5px 0 5px 22px;position:relative}
.panel li::before{content:"";position:absolute;left:0;top:15px;width:10px;height:2px;background:var(--accent)}
.figs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.figs div{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px;font-size:.85rem;color:var(--ink-2)}
.figs strong{display:block;font-size:1.1rem;color:var(--ink);margin-bottom:2px}
.store-btns{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 16px}
.store-btn{display:inline-flex;align-items:center;gap:10px;padding:9px 16px 9px 13px;border-radius:12px;background:var(--ink);color:var(--bg);text-decoration:none;transition:transform .2s var(--ease),opacity .2s}
.store-btn:hover{transform:translateY(-2px);opacity:.9}
.store-btn svg{width:22px;height:22px;fill:currentColor;flex:none}
.store-btn span{display:flex;flex-direction:column;line-height:1.15;font-weight:700;font-size:.98rem}
.store-btn small{font-size:.68rem;font-weight:500;opacity:.8}
.tech{margin-top:28px;padding-top:14px;border-top:1px solid var(--line);font-size:.82rem;color:var(--ink-3)}
.tech b{color:var(--ink-2)}
.panel-links{display:flex;flex-direction:column;gap:12px;align-items:flex-start;margin-top:22px}
.panel-link{font-weight:700;text-decoration:none;border-bottom:2px solid var(--accent)}
.panel.open .panel-inner > *{animation:fadeUp .5s var(--ease) both}
.panel.open .panel-inner > *:nth-child(2){animation-delay:.05s}
.panel.open .panel-inner > *:nth-child(3){animation-delay:.1s}
.panel.open .panel-inner > *:nth-child(n+4){animation-delay:.15s}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* =========================================================
   6. FORMAS DE COLABORAR
   ========================================================= */
.collab{background:var(--block);color:var(--block-ink)}
.collab .eyebrow{color:var(--block-accent)}
.modes{display:grid;gap:18px;margin-top:36px}
.mode{border:1px solid var(--block-line);border-radius:var(--radius);padding:26px;position:relative;overflow:hidden;display:flex;flex-direction:column}
.mode h3{margin-top:8px}
.mode p{color:var(--block-ink-2);margin:0 0 18px}
.mode .price{margin-top:auto;font-weight:700;color:var(--block-accent);font-size:1.05rem}
.price-link{text-decoration:none;align-self:flex-start;display:inline-flex;gap:8px;align-items:center;border-bottom:2px solid currentColor;padding-bottom:2px}
.price-link .arrow{transition:transform .25s var(--ease)}
.price-link:hover .arrow{transform:translateX(4px)}

/* =========================================================
   7. QUIÉN SOY + desplegable técnico
   ========================================================= */
.about-grid{display:grid;gap:36px;align-items:center}
.photo{
  aspect-ratio:1/1;max-width:300px;width:100%;border-radius:20px;border:2px dashed var(--accent);
  background:var(--soft);display:grid;place-items:center;color:var(--ph-ink);font-weight:700;overflow:hidden;
}
.photo img{width:100%;height:100%;object-fit:cover}
/* Con foto: formato vertical, sin borde discontinuo y con un marco sutil */
.photo.has-photo{aspect-ratio:4/5;border:1px solid var(--line);background:var(--surface);box-shadow:0 30px 60px -40px color-mix(in srgb, var(--shadow) 45%, transparent)}
.about-text p{font-size:1.08rem}
.about-links{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:8px}
.about-links a{font-weight:700;text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:2px;transition:color .2s}
.about-links a:hover{color:var(--accent-text)}

.disclosure{
  margin-top:44px;display:inline-flex;align-items:center;gap:10px;background:none;border:1.5px solid var(--line);
  border-radius:999px;padding:10px 18px;font-weight:600;font-size:.92rem;color:var(--ink-2);cursor:pointer;
  transition:border-color .2s,color .2s;
}
.disclosure:hover{border-color:var(--ink);color:var(--ink)}
.chev{width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .35s var(--ease)}
.disclosure[aria-expanded="true"] .chev{transform:rotate(225deg) translate(-2px,-1px)}
.collapse{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.collapse.open{grid-template-rows:1fr}
.collapse > div{overflow:hidden;overflow:clip;min-height:0} /* clip: no crea contenedor de scroll (necesario para el efecto 10) */
.collapse-inner{padding-top:28px;opacity:0;transform:translateY(-8px);transition:opacity .4s ease,transform .5s var(--ease)}
.collapse.open .collapse-inner{opacity:1;transform:none;transition-delay:.12s}
.tech-grid{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.tech-card .ph,.media .ph{white-space:normal}
.tech-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px;transition:border-color .3s,transform .35s var(--ease)}
.tech-card:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.tech-head{display:flex;gap:14px;align-items:center}
.tech-card h4{margin:0 0 2px;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text)}
.tech-card p{margin:0;font-size:.92rem;color:var(--ink-2)}
.tech-card .chips{margin-top:14px}
/* Ilustración de cada bloque */
.tech-icon{flex-shrink:0;width:52px;height:52px;border-radius:12px;background:var(--accent-soft);display:grid;place-items:center}
.tech-icon svg{width:36px;height:36px;overflow:visible}
.tech-icon .ti-line{fill:none;stroke:var(--accent-text);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tech-icon .ti-box{fill:var(--surface);stroke:var(--accent-text);stroke-width:2;stroke-linejoin:round}
.tech-icon .ti-front{fill:var(--accent-soft)}
.tech-icon .ti-node{fill:var(--surface);stroke:var(--accent-text);stroke-width:2}
.tech-icon .ti-hot{fill:var(--accent)}
.tech-icon .ti-dot{fill:var(--accent-text)}
.tech-icon .ti-hot-fill{fill:var(--accent)}
/* Al abrir el desplegable, los iconos aparecen escalonados y se dibujan las líneas */
.tech-icon svg{transform:scale(.6) rotate(-12deg);opacity:0;transition:transform .6s var(--ease),opacity .4s ease;transition-delay:calc(var(--i,0) * 90ms + .15s)}
.collapse.open .tech-icon svg{transform:none;opacity:1}
.tech-icon .ti-line{stroke-dasharray:80;stroke-dashoffset:80;transition:stroke-dashoffset .9s var(--ease);transition-delay:calc(var(--i,0) * 90ms + .3s)}
.collapse.open .tech-icon .ti-line{stroke-dashoffset:0}
.tech-card:hover .tech-icon .ti-hot,.tech-card:hover .tech-icon .ti-hot-fill{animation:ti-pulse 1s ease-in-out infinite alternate}
@keyframes ti-pulse{to{opacity:.4}}
.career{margin-top:28px}
.career h4{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text);margin:0 0 10px}
.career ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
.career li{position:relative;padding:8px 0 8px 22px;display:grid;gap:2px}
.career li::before{content:"";position:absolute;left:-6px;top:16px;width:10px;height:10px;border-radius:50%;background:var(--bg);border:2px solid var(--accent);transition:background .35s,transform .35s var(--ease)}
.career time{font-weight:700;font-size:.85rem;font-variant-numeric:tabular-nums}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chip{font-size:.72rem;font-weight:600;letter-spacing:.01em;padding:3px 9px;border-radius:6px;background:var(--surface);border:1px solid var(--line);color:var(--ink-2);transition:border-color .35s,background .35s,color .35s}
.chip .ph{font-size:.7rem}
.career li.is-open .chip{border-color:var(--accent);background:var(--accent-soft);color:var(--ph-ink)}
.career li > span{color:var(--ink-2);font-size:.95rem;font-weight:500;transition:color .35s,font-weight .35s}
/* Detalle de cada etapa: se abre cuando la etapa pasa por el centro de la pantalla */
.step-detail{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.step-detail > div{overflow:hidden;min-height:0}
.step-detail p{margin:0;padding-top:8px;font-size:.92rem;line-height:1.6;color:var(--ink-3);opacity:0;transform:translateY(-6px);transition:opacity .4s ease,transform .5s var(--ease)}
.career li.is-open .step-detail{grid-template-rows:1fr}
.career li.is-open .step-detail p{opacity:1;transform:none;transition-delay:.1s}
.career li.is-open::before{background:var(--accent);transform:scale(1.2)}
.career li.is-open > span{color:var(--ink);font-weight:600}

/* =========================================================
   8. CONTACTO
   ========================================================= */
.contact{background:var(--soft)}
.contact-head{text-align:center;margin-bottom:32px}
.contact-head h2{margin-bottom:8px}
.contact-head .lead{margin:0 auto}
.contact-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:30px 22px;max-width:680px;margin:0 auto;box-shadow:0 30px 60px -44px color-mix(in srgb, var(--shadow) 40%, transparent)}
.field{margin-bottom:18px}
label{display:block;font-weight:600;font-size:.95rem;margin-bottom:6px}
input,textarea{width:100%;font:inherit;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:10px;padding:13px 14px;transition:border-color .2s,box-shadow .2s}
textarea{min-height:110px;resize:vertical}
input:focus,textarea:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent)}
.field.error input,.field.error textarea{border-color:var(--error)}
.err{color:var(--error);font-size:.85rem;margin-top:4px;display:none}
.field.error .err{display:block}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.btn:disabled{opacity:.7;cursor:wait;transform:none}
.form-status{font-size:.9rem;color:var(--ink-2);margin:12px 0 0}
.form-status:empty{margin:0}
.form-status.is-error{color:var(--error)}
.form-legal{font-size:.78rem;line-height:1.55;color:var(--ink-3);margin:16px 0 0}
.form-legal strong{color:var(--ink-2)}
.form-legal a{color:var(--accent-text)}
.alt{text-align:center;margin-top:22px;color:var(--ink-2)}
.alt a{font-weight:700;color:var(--ink)}
.success{display:none;text-align:center;padding:20px 0}
.success.show{display:block;animation:fadeUp .6s var(--ease)}
.success p{color:var(--ink-2)}
.form-noscript{font-size:.9rem;color:var(--error);margin:0 0 14px}
.check{width:64px;height:64px;margin:0 auto 14px}
.check circle{stroke:var(--accent);stroke-width:3;fill:none;stroke-dasharray:180;stroke-dashoffset:180;animation:draw .7s var(--ease) forwards}
.check path{stroke:var(--ink);stroke-width:4;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:draw .4s .5s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* =========================================================
   9. PIE
   ========================================================= */
footer{padding:28px 0;font-size:.9rem;color:var(--ink-2);border-top:1px solid var(--line)}
footer .container{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;justify-content:space-between}
.foot-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 0}
.foot-links a + a::before{content:"·";margin:0 10px;color:var(--ink-3)}
.foot-links a{text-decoration:none;font-weight:600}
.foot-links a:hover{color:var(--ink)}

/* 404 */
.notfound{min-height:calc(100vh - 90px);min-height:calc(100svh - 90px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:64px 16px}
.notfound h1{margin-bottom:.15em}
.notfound-alt{font-size:clamp(1.2rem,2.6vw,1.6rem);font-weight:700;color:var(--ink-2);margin:0 0 18px}
.notfound .lead{margin:0 auto 28px}

/* =========================================================
   ANIMACIONES DE APARICIÓN AL HACER SCROLL
   .reveal  → el bloque entero aparece
   .stagger → sus hijos aparecen escalonados
   ========================================================= */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}
.js .reveal.is-visible{opacity:1;transform:none}
/* Reveal delays as classes (no inline style: strict CSP) */
.d-06{--d:.06s}.d-08{--d:.08s}.d-10{--d:.1s}.d-12{--d:.12s}.d-16{--d:.16s}.d-18{--d:.18s}.d-20{--d:.2s}.d-26{--d:.26s}
.js .stagger > *{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease),box-shadow .35s,border-color .35s;transition-delay:calc(var(--i,0) * 80ms)}
.js .stagger.is-visible > *{opacity:1;transform:none}
.js .stagger.is-visible > *:hover{transition-delay:0s}
.js .stagger.is-visible > .service:hover{transform:translateY(-4px)}

/* =========================================================
   TABLET / ESCRITORIO
   ========================================================= */
@media (min-width:640px){
  .services{grid-template-columns:repeat(2,1fr)}
  .works{grid-template-columns:repeat(2,1fr)}
  .tech-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:900px){
  section{padding:80px 0}  /* espaciado vertical de todas las secciones (escritorio) */
  .container{padding:0 32px}
  .hero{padding:76px 0 90px}
  .hero .container{grid-template-columns:1.05fr .95fr}
  .stats{grid-template-columns:repeat(3,1fr);padding:10px 12px}
  .stat{border-bottom:0;border-right:1px solid var(--block-line);padding:26px 24px;flex-direction:column;gap:8px}
  .stat:last-child{border-right:0}
  .services{grid-template-columns:repeat(6,1fr)}
  .service{grid-column:span 2}
  .service:nth-child(4),.service:nth-child(5){grid-column:span 3}
  .works{grid-template-columns:repeat(3,1fr)}
  .modes{grid-template-columns:repeat(3,1fr)}
  .about-grid{grid-template-columns:300px 1fr;gap:56px}
  .contact-card{padding:44px}
  .panel-inner{padding:30px 40px 48px}
  .career li{grid-template-columns:170px 1fr;column-gap:16px;row-gap:0}
  .step-detail,.chips{grid-column:2}
}
@media (min-width:1080px){
  .nav{display:flex}
  .header-right{margin-left:28px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero h1 em::after{transform:none}
  .js .reveal,.js .stagger > *{opacity:1;transform:none}
}

/* =========================================================
   ANIMACIONES LIGADAS AL SCROLL (scroll-driven animations)
   Solo en navegadores que las soportan y si el usuario no pide
   reducir movimiento. En el resto se mantienen las animaciones
   de aparición normales. Cada efecto va numerado (1–11) para
   poder quitarlo borrando su bloque.
   ========================================================= */
.progress{display:none}
@supports (animation-timeline: view()){
@media (prefers-reduced-motion:no-preference){

  /* 1. Barra de progreso de lectura bajo la cabecera */
  .progress{
    display:block;position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--accent);
    transform-origin:left;
    animation:sda-grow-x linear both;animation-timeline:scroll(root);
  }

  /* 2. Cabecera que se compacta en los primeros 150 px */
  .header .container{animation:sda-head linear both;animation-timeline:scroll(root);animation-range:0px 150px}
  .header{animation:sda-head-bg linear both;animation-timeline:scroll(root);animation-range:0px 150px}

  /* 3. Hero: texto sube algo más rápido, ilustración baja más lenta y se desvanece */
  .hero{view-timeline:--hero}
  .hero-copy{animation:sda-copy-out linear both;animation-timeline:--hero;animation-range:exit 0% exit 100%}
  .illu{animation:sda-illu-out linear both;animation-timeline:--hero;animation-range:exit 0% exit 100%}
  .illu svg{animation:sda-fade-out linear both;animation-timeline:--hero;animation-range:exit 0% exit 100%}

  /* 4. El núcleo de la ilustración gira según el scroll */
  .core-sq{animation:sda-turn linear both;animation-timeline:scroll(root);animation-range:0px 900px}

  /* 5. Barra de cifras que se despliega al entrar */
  .stats{animation:sda-unfold linear both;animation-timeline:view();animation-range:entry 0% cover 40%}

  /* 6. Tarjetas de "Qué hago" y "Trabajos" ligadas al scroll */
  .service{animation:sda-rise linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
  .work{view-timeline:--card;animation:sda-rise-scale linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  .work.pop{
    animation:popIn .5s var(--ease) both, sda-rise-scale linear both;
    animation-timeline:auto, view();animation-delay:var(--i,0s), 0s;animation-range:normal, entry 0% entry 70%;
  }

  /* 7. Parallax interno en la imagen/patrón de cada trabajo */
  .media::before{inset:-28px 0;animation:sda-parallax linear both;animation-timeline:--card}
  .work .media img,.work .media video{scale:1.14;animation:sda-parallax linear both;animation-timeline:--card}

  /* 8. La sección oscura "Colaborar" se abre a todo el ancho */
  .collab{animation:sda-open linear both;animation-timeline:view();animation-range:entry 0% entry 70%}

  /* 10. La línea de la trayectoria se pinta de ámbar al bajar */
  .career ol{position:relative;view-timeline:--career}
  .career ol::before{
    content:"";position:absolute;left:-2px;top:0;bottom:0;width:2px;background:var(--accent);transform-origin:top;
    animation:sda-grow-y linear both;animation-timeline:--career;animation-range:entry 40% cover 60%;
  }

  /* 11. La tarjeta del formulario sube y gana sombra */
  .contact-card{animation:sda-card-rise linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
}
}
@keyframes sda-grow-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes sda-grow-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes sda-head{to{height:56px}}
@keyframes sda-head-bg{to{background-color:color-mix(in srgb, var(--bg) 97%, transparent)}}
@keyframes sda-copy-out{to{translate:0 -50px;opacity:.25}}
@keyframes sda-illu-out{to{translate:0 70px;scale:.95}}
@keyframes sda-fade-out{to{opacity:.35}}
@keyframes sda-turn{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes sda-unfold{from{clip-path:inset(0 5% round 32px)}to{clip-path:inset(0 0 round 14px)}}
@keyframes sda-rise{from{translate:0 60px;opacity:0}to{translate:0 0;opacity:1}}
@keyframes sda-rise-scale{from{translate:0 70px;scale:.96}to{translate:0 0;scale:1}}
@keyframes sda-parallax{from{translate:0 -22px}to{translate:0 22px}}
@keyframes sda-open{from{clip-path:inset(0 4% round 28px)}to{clip-path:inset(0 0 round 0)}}
@keyframes sda-card-rise{from{translate:0 60px;box-shadow:0 0 0 transparent}to{translate:0 0;box-shadow:0 44px 80px -44px color-mix(in srgb, var(--shadow) 55%, transparent)}}