/* Automatitzut · web v2 2026-10 · por fuera y por dentro, en negro (estilo "Loopstack") */
@font-face{font-family:'Playfair Display';src:url(/assets/fonts/playfair-display.woff2) format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'Playfair Display';src:url(/assets/fonts/playfair-display-italic.woff2) format('woff2');font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:'Funnel Display';src:url(/assets/fonts/funnel-display.woff2) format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:'Funnel Sans';src:url(/assets/fonts/funnel-sans.woff2) format('woff2');font-weight:400 600;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url(/assets/fonts/jetbrains-mono.woff2) format('woff2');font-weight:400 500;font-display:swap}

:root{
  color-scheme:dark;
  --bg:#000; --card:#0d0e10; --card-2:#16181b;
  --fg:#fff; --fg-2:rgba(255,255,255,.76); --fg-3:rgba(255,255,255,.56);
  --line:rgba(255,255,255,.13); --line-2:rgba(255,255,255,.2); --border:rgba(255,255,255,.18);
  --teal:#14a7b0; --pink:#e23a6c; --gold:#ffb341; --steel:#8f979e; --steel-1:#d3d6d9;
  /* acento: el rosa central del degradado del isotipo */
  --accent:#e23a6c; --accent-rgb:226,58,108;
  --serif:'Playfair Display', Georgia, serif;
  --display:'Funnel Display', system-ui, sans-serif;
  --sans:'Funnel Sans', system-ui, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;
  --gutter:clamp(20px, 4vw, 56px);
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --reveal:cubic-bezier(.05,.9,.1,1);
  --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15m-6-6 6 6-6 6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scrollbar-color:#333 var(--bg)}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip}
::selection{background:#fff;color:#000}
a{color:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid #fff;outline-offset:3px}
.wrap{padding-inline:var(--gutter)}
.skip{position:absolute;left:-9999px;top:8px;z-index:200;background:#fff;color:#000;padding:10px 16px;border-radius:999px;text-decoration:none}
.skip:focus{left:8px}

/* ---------- intro: el isotipo se junta, aparece el nombre y la página se abre (~3 s) ---------- */
.intro{display:none}
html.is-intro .intro{display:block;position:fixed;inset:0;z-index:100;pointer-events:none;animation:intro-gone 0s 3.15s forwards}
.intro i{position:absolute;top:0;bottom:0;width:50%;background:var(--bg)}
.intro i:first-of-type{left:0;z-index:1;box-shadow:1px 0 0 var(--bg);animation:intro-l 1.2s 1.85s cubic-bezier(.7,0,.2,1) forwards}
.intro i:last-of-type{right:0;animation:intro-r 1.2s 1.85s cubic-bezier(.7,0,.2,1) forwards}
.intro svg{position:absolute;top:50%;width:96px;height:110px;margin-top:-75px}
.intro i:first-of-type svg{right:-48px;animation:intro-a 1.1s .15s var(--ease) both}
.intro i:last-of-type svg{left:-48px;animation:intro-b 1.1s .15s var(--ease) both}
.intro b{position:absolute;z-index:2;left:0;right:0;top:50%;margin-top:52px;text-align:center;font-family:var(--display);font-weight:600;font-size:26px;letter-spacing:-.03em;color:#fff;animation:intro-word 1.05s .85s var(--ease) both}
@keyframes intro-a{from{opacity:0;transform:translate(-64px,-40px)}}
@keyframes intro-b{from{opacity:0;transform:translate(64px,40px)}}
@keyframes intro-word{0%{opacity:0;transform:translateY(8px)}35%,70%{opacity:1;transform:none}100%{opacity:0}}
@keyframes intro-l{to{transform:translateX(-101%)}}
@keyframes intro-r{to{transform:translateX(101%)}}
@keyframes intro-gone{to{visibility:hidden}}
html.is-intro elevenlabs-convai{visibility:hidden}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:32px;height:68px;border-bottom:1px solid transparent;transition:background-color .4s ease,border-color .4s ease}
.nav.solid{background:rgba(0,0,0,.72);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);border-bottom-color:rgba(255,255,255,.07)}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:600;font-size:23px;letter-spacing:-.03em;text-decoration:none}
.mark{width:28px;height:32px;flex:none}
.brand .mark{margin-top:-2px}
.nav ul{display:flex;gap:28px;list-style:none;margin-left:auto;font-size:15px;letter-spacing:.02em;transition:opacity .4s ease}
/* en la portada los enlaces ya están en la fila del medio: la cabecera los muestra al bajar */
.has-stage .nav:not(.solid) ul{opacity:0;pointer-events:none}
.nav ul a{text-decoration:none;color:var(--fg-2);transition:color .3s ease} .nav ul a:hover{color:#fff}
.langs{display:flex;gap:2px;font-size:13px;font-weight:600;letter-spacing:.04em}
.langs a{text-decoration:none;color:var(--fg-3);padding:10px 7px;border-radius:6px;transition:color .3s ease}
.langs a:hover{color:#fff}
.langs a[aria-current]{color:#fff;background:rgba(255,255,255,.08)}
.langs abbr{text-decoration:none}

/* ---------- botón píldora con punto "en línea" ---------- */
.btn{display:inline-flex;align-items:center;gap:.8rem;min-height:44px;font-family:var(--sans);font-weight:500;font-size:15px;letter-spacing:.02em;color:#fff;background:#000;border:1px solid var(--border);padding:11px 22px;border-radius:9999px;text-decoration:none;cursor:pointer;box-shadow:0 4px 25px rgba(0,0,0,.4);transition:background-color .3s var(--ease-out),color .3s var(--ease-out),border-color .3s var(--ease-out),transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.btn:hover{background:#fff;color:#000;border-color:#fff;transform:translateY(-2px);box-shadow:0 6px 30px rgba(0,0,0,.3)}
.btn:active{transform:translateY(0) scale(.98)}
.btn.big{font-size:1.1rem;padding:1.2rem 2.4rem;gap:.9rem}
.dot{position:relative;display:inline-block;flex:none;width:10px;height:10px;border-radius:50%;background:linear-gradient(160deg,var(--teal),var(--pink) 55%,var(--gold));animation:pulse-glow 2s infinite ease-in-out}
.dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;background:rgba(var(--accent-rgb),.45);animation:wave-expand 2s infinite ease-in-out}
@keyframes pulse-glow{
  0%,100%{opacity:.5;transform:scale(.85);box-shadow:0 0 4px rgba(var(--accent-rgb),.3)}
  50%{opacity:1;transform:scale(1.1);box-shadow:0 0 12px rgba(var(--accent-rgb),.9)}
}
@keyframes wave-expand{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.3);opacity:0}}
.arr{display:inline-block;width:1.05em;height:1.05em;flex:none;background:currentColor;-webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat}
.ask .arr{transition:transform .2s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.ask a:hover .arr{transform:translateX(3px)}}

/* ---------- aparición: palabras desde abajo y letras desde la izquierda, saliendo del desenfoque ---------- */
.wr{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .06em .15em;margin:0 -.06em -.15em}
.wi{display:inline-block}
.reveal .wi{opacity:0;transform:translateY(105%);filter:blur(20px)}
.reveal.in .wi{animation:word-up 1.3s var(--reveal) forwards;animation-delay:var(--d,0s)}
@keyframes word-up{0%{opacity:0;transform:translateY(105%);filter:blur(20px)}30%{opacity:1}100%{opacity:1;transform:none;filter:blur(0)}}
.lw{display:inline-block;overflow:hidden;vertical-align:bottom}
.li{display:inline-block}
.wordmark.split-ready .li{opacity:0;transform:translateX(-105%);filter:blur(20px)}
.wordmark.in .li{animation:letter-in 1.2s var(--reveal) forwards;animation-delay:var(--d,0s)}
@keyframes letter-in{0%{opacity:0;transform:translateX(-105%);filter:blur(20px)}25%{opacity:1}100%{opacity:1;transform:none;filter:blur(0)}}

/* ---------- hero: una sola pantalla como la referencia: titular arriba, visual que sale del negro, pie flotando y el logo gigante abajo ---------- */
.stage{position:relative;height:100svh;min-height:640px;max-height:1200px;margin-top:-68px;overflow:hidden;background:var(--bg)}
/* el visual: la esfera partida (Content | Systems) que sale del negro, en vídeo en bucle como la flor de la referencia */
.visual{position:absolute;z-index:0;left:0;right:0;bottom:0;height:90%;overflow:hidden;animation:fade 2s .1s ease both}
html.is-intro .visual{animation-delay:2.4s}
@keyframes fade{from{opacity:0}}
/* el isotipo en escultura: arriba queda justo bajo el botón (36 % de la altura) y su base se esconde bajo el nombre gigante */
.visual{--w:125svh;--st:40svh;height:100%}
.visual::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 30% at 50% 66%,rgba(108,52,190,.30),transparent 72%)}
/* la imagen ya es negra por arriba: se ajusta al ancho, apoyada abajo, y la esfera queda bajo el botón */
.visual img,.visual video{position:absolute;left:50%;bottom:calc(100% - var(--st) - var(--w) * .4404);display:block;width:var(--w);max-width:none;height:calc(var(--w) * .5655);margin-left:calc(var(--w) / -2);object-fit:cover;
  -webkit-mask:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent),linear-gradient(#000 82%,transparent);-webkit-mask-composite:source-in;
  mask:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent),linear-gradient(#000 82%,transparent);mask-composite:intersect}
/* negro por arriba (funde con el titular) y por abajo (la portada termina en negro puro y la siguiente sección empieza sin corte) */
.visual::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(90% 45% at 50% 0%,#000 25%,rgba(0,0,0,.5) 60%,transparent 90%),
  linear-gradient(#000 0%,rgba(0,0,0,.6) 12%,transparent 34%,transparent 74%,#000 97%)}
.hero-top{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:calc(68px + 6vh)}
.headline{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,3.3vw,3.4rem);line-height:1.15;letter-spacing:-.015em;text-shadow:0 4px 30px rgba(0,0,0,.5);text-wrap:balance}
.hero-top .btn{margin-top:clamp(20px,3.6vh,36px);font-size:1.05rem;padding:1.15rem 2.3rem;gap:.9rem;animation:rise 1s .75s var(--reveal) both}
html.is-intro .hero-top .btn{animation-delay:3.1s}
@keyframes rise{from{opacity:0;transform:translateY(14px);filter:blur(8px)}}
.hero-foot{position:absolute;z-index:3;left:20px;right:20px;top:50%;transform:translateY(-50%);animation:fade 1.4s 1s ease both}
html.is-intro .hero-foot{animation-delay:3.3s}
.hero-foot{text-shadow:0 1px 12px rgba(0,0,0,.65),0 0 2px rgba(0,0,0,.4)}
/* franja esmerilada: donde la fila cruza la esfera, la imagen se desenfoca y oscurece un poco para que el texto se lea */
.hero-foot .foot-title span{color:rgba(255,255,255,.75)}
.hero-foot .copy{color:rgba(255,255,255,.6)}
.hero-foot .socials a{color:rgba(255,255,255,.75)}
.foot-title .half-mark{width:.42em;height:.84em;margin:0 .35em 0 0;vertical-align:-.06em}
.foot-top p:last-child .half-mark{margin:0 0 0 .35em}
.stage .wordmark{position:absolute;z-index:3;left:0;right:0;bottom:20px;margin:0;padding:0 20px;text-shadow:0 6px 40px rgba(0,0,0,.35)}

/* ---------- secciones ---------- */
main section[id]{scroll-margin-top:68px}
section.block{padding-block:clamp(80px,12vh,140px);border-top:1px solid var(--line)}
.head{display:grid;gap:20px;margin-bottom:clamp(40px,6vh,64px)}
.head h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,5vw,5.4rem);line-height:1.04;letter-spacing:-.015em;text-wrap:balance}
.head h2 > span:not(.wr){color:var(--fg-3)}
.head h2 em{font-style:italic;white-space:nowrap}
.head h2 .half-mark{width:.4em;height:.8em;margin-right:.2em;vertical-align:-.02em}
.head p{font-size:clamp(18px,1.6vw,24px);line-height:1.45;color:var(--fg-2);max-width:58ch;text-wrap:pretty}

.reels{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:min(800px,calc((100svh - 200px) * 1.69 + 32px))}
.reel{position:relative;aspect-ratio:9/16;background:var(--card);color:#fff;overflow:hidden;border-radius:12px;outline:1px solid var(--line);outline-offset:-1px}
.reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;cursor:pointer;border-radius:inherit}
.reel::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 65%,rgba(0,0,0,.7));pointer-events:none;border-radius:inherit}
.reel.photo{background:#f3f3f1}
.reel.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel.photo::after{display:block;background:linear-gradient(transparent 70%,rgba(0,0,0,.08))}
.reel.photo figcaption{color:#141619}
.reel.photo figcaption small{color:#4a4d52}
.reel.made{overflow:visible}
.reel .arrow{position:absolute;z-index:4;left:-30px;top:50%;width:44px;height:44px;margin-top:-22px;border-radius:50%;background:#fff;color:#000;display:grid;place-items:center;font-size:20px;box-shadow:0 0 0 4px var(--bg)}
.paused-mark{position:absolute;z-index:2;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border);color:#fff;display:grid;place-items:center;opacity:0;transform:scale(.9);transition:opacity .2s ease,transform .2s var(--ease-out);pointer-events:none}
.paused-mark .play{display:grid}
.paused-mark svg{width:22px;height:22px;margin-left:3px}
.reel[data-paused] .paused-mark{opacity:1;transform:none}
.reel figcaption{position:absolute;z-index:2;left:18px;right:64px;bottom:16px;display:grid;gap:2px;font-family:var(--serif);font-size:22px;letter-spacing:-.01em;line-height:1.1}
.reel figcaption small{font-family:var(--sans);font-size:13px;letter-spacing:.01em;color:rgba(255,255,255,.75)}
.sound{position:absolute;z-index:3;right:12px;bottom:12px;width:44px;height:44px;border:1px solid var(--border);border-radius:50%;background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background-color .3s var(--ease-out),color .3s var(--ease-out),transform .16s var(--ease-out)}
.sound:hover{background:#fff;color:#000}
.sound:active{transform:scale(.95)}
.sound svg{width:20px;height:20px}
.sound .on,.sound[aria-pressed="true"] .off{display:none}
.sound[aria-pressed="true"] .on{display:block}
.reel.photo .sound{display:none}
.showcase{display:block}
@media (min-width:1200px){
  .showcase{display:grid;grid-template-columns:minmax(0,800px) minmax(240px,1fr);gap:clamp(32px,4vw,64px);align-items:end}
  .showcase .services{grid-template-columns:1fr;margin-top:0;border-top:0;border-image:none}
  .showcase .services div{padding:20px 0;border-top:1px solid var(--line)}
  .showcase .services div:first-child{border-top:2px solid;border-image:linear-gradient(90deg,var(--teal),var(--pink),var(--gold)) 1}
}
.services{display:grid;grid-template-columns:repeat(4,1fr);margin-top:56px;border-top:2px solid;border-image:linear-gradient(90deg,var(--teal),var(--pink),var(--gold)) 1}
.services div{padding:22px 24px 0 0}
.services b{display:block;font-family:var(--serif);font-weight:400;font-size:24px;letter-spacing:-.01em;line-height:1.15}
.services span{display:block;margin-top:6px;color:var(--fg-2);font-size:15px;max-width:28ch}

.inside{display:grid;grid-template-columns:5fr 7fr;gap:clamp(24px,4vw,56px);align-items:start}
/* casos: tarjetas cortas (sector, título y resultado), sin el "antes" tachado: menos letra */
.cases{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.case{display:flex;flex-direction:column;gap:10px;padding:22px 24px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.03)}
.case .sec{font-size:13px;color:var(--fg-3);letter-spacing:.03em}
.case b{font-family:var(--serif);font-weight:400;font-size:clamp(22px,1.9vw,28px);letter-spacing:-.01em;line-height:1.1;color:#fff}
.case .after{margin-top:auto;color:var(--fg-2)}
.case .after::before{content:"";display:inline-block;width:.9em;height:.9em;margin-right:.45em;vertical-align:-.08em;background:var(--accent);-webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat}
.ask{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:40px;font-family:var(--serif);font-size:clamp(20px,2vw,28px);letter-spacing:-.01em}
.ask span:first-child{color:var(--fg-3)}
.ask a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;border-bottom:1px solid #fff;padding-bottom:2px;transition:opacity .3s ease}
.ask a:hover{opacity:.75}
.cases-note{margin-top:18px;font-size:14px;color:var(--fg-3)}

.steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-2)}
.step{padding:28px 32px 0 0}
.step + .step{padding-left:32px;border-left:1px solid var(--line)}
.step i{font-style:normal;font-family:var(--mono);font-size:13px;display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid var(--border);color:var(--fg-2)}
.step b{display:block;margin-top:40px;font-family:var(--serif);font-weight:400;font-size:clamp(30px,2.8vw,42px);letter-spacing:-.015em;line-height:1.05}
.step span{display:block;margin-top:12px;color:var(--fg-2);max-width:32ch}

/* ---------- Content y Systems: fondos con la luz de cada mitad del isotipo ---------- */

/* ---------- Content y Systems como paneles: flotan sobre el negro pero con sus límites claros ---------- */
/* sin marco: cada sección ocupa una pantalla y su barra superior (con la línea fina) marca el corte */
section.panel{position:relative;overflow:hidden;margin:0;padding-block:clamp(28px,4.5vh,52px) clamp(36px,5.5vh,64px);border:0}
section.panel{background:#000}
.sec-index{display:flex;align-items:center;justify-content:space-between;gap:16px 32px;padding-bottom:14px;margin-bottom:clamp(8px,2vh,24px);border-bottom:1px solid var(--line-2)}
.sec-index > p{display:flex;align-items:center;gap:14px;flex:none;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.sec-index > p span{font-family:var(--mono);letter-spacing:0;color:var(--fg-2)}

/* ---------- apertura: titular a la izquierda e imagen a la derecha, en una sola fila ---------- */
.opener{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:center;gap:clamp(24px,4vw,64px);margin-bottom:clamp(24px,4vh,48px)}
.opener .head{order:1;margin:0}
/* la imagen entera, sin difuminar: su fondo es negro puro como el del panel, así el motivo flota sin bordes */
.sec-visual{order:2;display:flex;justify-content:center;pointer-events:none}
.sec-visual img{display:block;width:auto;max-width:100%;height:auto;max-height:min(440px,52svh)}
.opener .head h2{font-size:clamp(3rem,6vw,6.4rem);line-height:1}
.opener .head h2 .half-mark{width:.36em;height:.72em;margin-right:.16em;vertical-align:.02em}
.opener .head p{font-size:clamp(17px,1.4vw,22px);color:var(--fg-2);line-height:1.35;white-space:nowrap}

/* ---------- Systems: el registro en vivo como consola ---------- */
.inside-log{position:relative;min-width:0}
.log{display:flex;flex-direction:column;padding:20px 24px 8px;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 30px 60px -30px rgba(0,0,0,.9)}
.log header{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--fg-3);padding-bottom:12px}
.log header b{display:inline-flex;align-items:center;gap:12px;color:#fff;font-weight:500}
.log header .dot{width:8px;height:8px}
.log ol{list-style:none;height:372px;overflow:hidden}
.row{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:baseline;padding:13px 0;border-top:1px solid var(--line);font-size:15.5px;animation:drop .45s var(--ease-out) both}
.row time{font-family:var(--mono);font-size:12px;color:var(--fg-3)}
.row .t{min-width:0}
.row .t b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .t span{display:block;color:var(--fg-3);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st{transition:background-color .25s ease,color .25s ease;font-size:12px;font-weight:600;white-space:nowrap;padding:3px 10px;border-radius:999px;background:#fff;color:#000}
.st.busy{background:rgba(255,255,255,.08);color:var(--fg-2)}
@keyframes drop{from{opacity:0;transform:translateY(-12px)}}

/* ---------- Cómo trabajamos en claro (papel de la marca) para respirar entre tanto negro ---------- */
section.light{background:#f6f5f1;color:#141619;border-top:0}
section.light .head p,section.light .step span{color:#4a4d52}
section.light .steps{border-top-color:#141619}
section.light .step + .step{border-left-color:#d7d6d0}
section.light .step i{border-color:#141619;color:#141619}
section.light ::selection{background:#141619;color:#fff}
section.light :focus-visible{outline-color:#141619}

/* ---------- contacto ---------- */
/* isotipo vivo: las dos medias lunas se deslizan hasta cerrar un círculo (por fuera y por dentro, uno solo) y vuelven al logo */
.contact-mark{position:relative;isolation:isolate;width:clamp(110px,11vw,170px);aspect-ratio:28/32;margin-bottom:clamp(24px,4vh,40px)}
.contact-mark::before{content:"";position:absolute;inset:-60%;z-index:-1;border-radius:50%;filter:blur(36px);opacity:.55;
  background:radial-gradient(40% 45% at 38% 45%,rgba(20,167,176,.8),transparent 70%),radial-gradient(35% 40% at 40% 62%,rgba(226,58,108,.6),transparent 70%),radial-gradient(40% 45% at 64% 58%,rgba(143,151,158,.55),transparent 70%);
  animation:glow 7s ease-in-out infinite}
.contact-mark svg{display:block;width:100%;height:100%;overflow:visible}
.contact-mark .m-l{animation:join-l 7s cubic-bezier(.65,0,.35,1) infinite}
.contact-mark .m-r{animation:join-r 7s cubic-bezier(.65,0,.35,1) infinite}
@keyframes join-l{0%,28%{transform:none}46%,72%{transform:translateY(4px)}90%,100%{transform:none}}
@keyframes join-r{0%,28%{transform:none}46%,72%{transform:translateY(-4px)}90%,100%{transform:none}}
@keyframes glow{0%,28%,100%{opacity:.45;transform:scale(1)}46%,72%{opacity:.8;transform:scale(1.12)}}
.contact{border-top:1px solid var(--line);padding-block:clamp(64px,10vh,112px);background:radial-gradient(50% 60% at 0% 100%,rgba(20,167,176,.10),transparent 70%),var(--bg)}
.contact-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.contact-grid{align-items:center}
.contact-grid > div{grid-column:1/7}
.contact h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,4.4vw,4.4rem);line-height:1.04;letter-spacing:-.015em;text-wrap:balance}
.contact .mail{display:inline-block;margin-top:32px;font-size:clamp(20px,1.8vw,26px);letter-spacing:.01em;text-decoration:none;border-bottom:1px solid #fff;padding-bottom:4px;transition:opacity .3s ease}
.contact .mail:hover{opacity:.75}
.contact form{grid-column:8/13;display:grid;gap:22px}
.contact label{display:grid;gap:8px;font-size:14px;color:var(--fg-2);letter-spacing:.02em}
.contact input,.contact textarea{font:inherit;font-size:17px;color:#fff;background:transparent;border:0;border-bottom:1px solid var(--line-2);padding:8px 0;border-radius:0;transition:border-color .3s ease}
.contact input:focus,.contact textarea:focus{outline:0;border-bottom-color:#fff}
.contact textarea{min-height:96px;resize:vertical}
.contact ::placeholder{color:var(--fg-3)}
.contact fieldset{border:0;display:grid;gap:10px}
.contact legend{font-size:14px;color:var(--fg-2);letter-spacing:.02em;margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips label{display:inline-flex;font-size:15px;color:#fff;border:1px solid var(--border);border-radius:999px;padding:9px 16px;cursor:pointer;transition:border-color .3s,background-color .3s,color .3s}
.chips label:hover{border-color:#fff}
.chips input:checked + label{background:#fff;color:#000;border-color:#fff}
.chips input:focus-visible + label{outline:2px solid #fff;outline-offset:3px}
.send{justify-self:start}
.legal-note{font-size:13px;color:var(--fg-3)}
.legal-note a{color:#fff}

/* ---------- filas de pie (portada y final de página) ---------- */
footer.site{padding:56px 20px 40px;border-top:1px solid var(--line)}
.foot-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:0 5px}
.foot-title{font-family:var(--display);font-size:clamp(1.1rem,1.45vw,1.4rem);letter-spacing:-.015em}
.foot hr,.hero-foot hr{border:0;height:1px;background:var(--line-2);margin:1.6rem 0}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:0 5px}
.socials{display:flex;gap:1.25rem;align-items:center;flex:1}
.socials a{display:inline-flex;color:rgba(255,255,255,.55);transition:color .3s var(--ease-out),transform .3s var(--ease-out)}
.socials a:hover{color:#fff;transform:translateY(-2px)}
.socials svg{width:20px;height:20px}
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 2.8rem;flex:2}
.foot-links span{display:contents}
/* en la portada los enlaces rodean la escultura: dos a cada lado y el hueco en el centro */
.hero-foot .foot-links{min-width:0;display:grid;grid-template-columns:1fr calc(2 * var(--hole,150px) + 40px) 1fr;align-items:center}
/* la línea de la portada se abre donde está la escultura para no cortarla */
.hero-foot hr{-webkit-mask:linear-gradient(90deg,#000 calc(50% - var(--hole,150px) - 40px),transparent calc(50% - var(--hole,150px)),transparent calc(50% + var(--hole,150px)),#000 calc(50% + var(--hole,150px) + 40px));mask:linear-gradient(90deg,#000 calc(50% - var(--hole,150px) - 40px),transparent calc(50% - var(--hole,150px)),transparent calc(50% + var(--hole,150px)),#000 calc(50% + var(--hole,150px) + 40px))}
.hero-foot .foot-links span{display:flex;gap:2.8rem}
.hero-foot .foot-links span:first-child{justify-content:flex-end}
.hero-foot .foot-links span:last-child{grid-column:3}
@media (max-width:1200px){.hero-foot .copy{visibility:hidden}}
.foot-links a{white-space:nowrap;font-size:.95rem;letter-spacing:.03em;text-decoration:none;transition:opacity .3s ease,transform .3s ease}
.foot-links a:hover{opacity:.75;transform:translateY(-1px)}
.foot-links a[aria-current]{opacity:.6}
.copy{flex:1;white-space:nowrap;text-align:right;font-size:.95rem;letter-spacing:.02em;color:var(--fg-3)}
/* el logo (isotipo + nombre) a lo ancho, como en la cabecera pero gigante */
.wordmark{display:flex;align-items:center;justify-content:center;gap:.48em;font-family:var(--display);font-weight:600;font-size:13vw;letter-spacing:-.03em;line-height:1;color:#fff;text-decoration:none;white-space:nowrap;opacity:.95}
.wm-mark{display:inline-flex;overflow:hidden}
.wordmark .mark{width:1.22em;height:1.39em}
.wm-text{display:inline-block}


/* ---------- efecto cristal: botones, baldosas, registro, casos y formulario (la cabecera se queda como barra) ---------- */
body{--glass:rgba(255,255,255,.06);--glass-2:rgba(255,255,255,.1);--glass-edge:rgba(255,255,255,.16);--glass-hi:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(255,255,255,.04)}
/* botones píldora */
.btn{background:var(--glass);border-color:var(--glass-edge);-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);box-shadow:var(--glass-hi),0 8px 30px rgba(0,0,0,.35)}
.btn:hover{background:rgba(255,255,255,.92);color:#000;border-color:#fff}
/* luces de color detrás de las piezas de cristal: sin algo detrás, el cristal sobre negro no se ve */
.paside .services,.inside-log,.contact form{position:relative;isolation:isolate}
.paside .services::before,.inside-log::before,.contact form::before{content:"";position:absolute;z-index:-1;inset:-12% -8%;pointer-events:none;filter:blur(50px);opacity:.75}
.paside .services::before{background:radial-gradient(40% 55% at 25% 40%,rgba(20,167,176,.55),transparent 70%),radial-gradient(40% 55% at 75% 60%,rgba(226,58,108,.5),transparent 70%)}
.inside-log::before{background:radial-gradient(45% 40% at 30% 30%,rgba(20,167,176,.45),transparent 70%),radial-gradient(45% 45% at 70% 75%,rgba(143,151,158,.45),transparent 70%)}
.contact form::before{background:radial-gradient(40% 40% at 20% 20%,rgba(20,167,176,.45),transparent 70%),radial-gradient(35% 40% at 85% 45%,rgba(226,58,108,.38),transparent 70%),radial-gradient(40% 40% at 50% 95%,rgba(255,179,65,.3),transparent 70%)}
/* Content: servicios como baldosas de cristal */
.paside .services{gap:10px;border-top:0;border-image:none}
.paside .services div{padding:14px 16px;border-radius:16px;border:1px solid var(--glass-edge);background:var(--glass);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);box-shadow:var(--glass-hi)}
/* Systems: registro en vivo como panel de cristal; casos como cápsulas */
.log{background:rgba(255,255,255,.05);border-color:var(--glass-edge);-webkit-backdrop-filter:blur(26px) saturate(1.5);backdrop-filter:blur(26px) saturate(1.5);box-shadow:var(--glass-hi),0 30px 60px -30px rgba(0,0,0,.9)}
.log .row{border-top-color:rgba(255,255,255,.1)}
.tags li{background:var(--glass);border-color:var(--glass-edge);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--glass-hi)}
/* contacto: el formulario dentro de una tarjeta de cristal */
.contact form{padding:clamp(22px,3vw,36px);border-radius:24px;border:1px solid var(--glass-edge);background:rgba(255,255,255,.045);-webkit-backdrop-filter:blur(26px) saturate(1.5);backdrop-filter:blur(26px) saturate(1.5);box-shadow:var(--glass-hi),0 30px 80px -40px rgba(0,0,0,.9)}
.chips label{background:var(--glass);border-color:var(--glass-edge);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.chips input:checked + label{background:#fff;color:#000;border-color:#fff}

/* ---------- páginas legales ---------- */
main.legal{padding-block:clamp(56px,9vh,104px)}
main.legal .wrap{max-width:calc(760px + 2 * var(--gutter));margin-inline:auto}
main.legal h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,5vw,3.8rem);line-height:1.04;letter-spacing:-.015em;text-wrap:balance}
main.legal .updated{margin-top:12px;color:var(--fg-3);font-size:15px}
main.legal h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,2.6vw,2.1rem);letter-spacing:-.01em;line-height:1.15;margin-top:56px;padding-top:20px;border-top:1px solid var(--line)}
main.legal h3{font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-.015em;margin-top:28px}
main.legal p,main.legal ul,main.legal ol{margin-top:14px;max-width:70ch;color:rgba(255,255,255,.82)}
main.legal ul,main.legal ol{padding-left:1.2em}
main.legal li{margin-top:6px}
main.legal a{text-underline-offset:3px}
main.legal .toc,main.legal .note{margin-top:36px;padding:20px 24px;background:var(--card-2);border:1px solid var(--line);border-radius:12px}
main.legal .note{margin-top:20px}
main.legal .toc ol,main.legal .toc ul{margin-top:8px}
main.legal .note p{margin-top:0}

/* ---------- Content y Systems: dos columnas que llenan el panel (izquierda: titular y muestra; derecha: imagen y resumen) ---------- */
.pmain .head{margin-bottom:clamp(16px,2.6vh,28px)}
.pmain .head h2{font-size:clamp(2.6rem,4.8vw,5.2rem);line-height:1}
.pmain .head h2 .half-mark{width:.36em;height:.72em;margin-right:.16em;vertical-align:.02em}
.pmain .head p{font-size:clamp(17px,1.4vw,22px);color:var(--fg-2);line-height:1.35}
.paside .services{grid-template-columns:1fr 1fr;margin-top:0}
.paside .services b{font-size:clamp(18px,1.4vw,22px)}
.paside .services span{font-size:14px}
/* casos reales: siempre en una sola línea, en la barra superior de Systems */
.tags{display:flex;align-items:center;gap:14px;min-width:0}
.tags p{flex:none;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.tags ul{list-style:none;display:flex;flex-wrap:nowrap;gap:8px;min-width:0}
.tags li{flex:none;white-space:nowrap;font-size:clamp(12.5px,1vw,14.5px);padding:.5em 1.1em;border:1px solid var(--border);border-radius:999px;color:#fff;background:rgba(255,255,255,.03)}
@media (min-width:901px){
  section.panel.fit{--pg:clamp(10px,2vh,24px);display:flex;flex-direction:column;height:calc(100svh - 68px - 2 * var(--pg));min-height:600px;max-height:1000px;margin-block:var(--pg);padding-block:clamp(18px,3vh,32px) clamp(20px,3.4vh,36px);scroll-margin-top:calc(68px + var(--pg))}
  .fit .sec-index{flex:none;padding-bottom:12px;margin-bottom:0}
  .pgrid{flex:1 1 0;min-height:0;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,72px);margin-top:clamp(16px,3vh,32px)}
  .pmain,.paside{display:flex;flex-direction:column;min-height:0}
  .pmain .head{flex:none}
  /* los tres reels caben siempre en su columna: el alto lo limita el espacio libre o el ancho, lo que llegue antes */
  .pmain .reels{flex:1 1 0;min-height:0;display:flex;align-items:center;gap:14px;max-width:none;container-type:size}
  #fuera .pgrid{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
  .pmain .reel{flex:none;height:min(100cqh,calc((100cqw - 28px) / 3 * 16 / 9));width:auto;aspect-ratio:9/16}
  .pmain .inside-log{flex:1 1 0;min-height:0}
  .pmain .inside-log .log{height:100%}
  .pmain .inside-log .log ol{flex:1 1 0;height:auto;min-height:0}
  .pmain .ask{flex:none;margin-top:clamp(12px,2.2vh,24px);font-size:clamp(18px,1.5vw,22px)}
  .paside{gap:clamp(14px,2.4vh,28px)}
  .paside .sec-visual{order:0;flex:1 1 0;min-height:0}
  .paside .sec-visual img{width:100%;height:100%;max-height:none;object-fit:contain}
  .paside .services{flex:none}
}
@media (min-width:901px) and (max-height:760px){
  .pmain .head h2{font-size:clamp(2.3rem,4vw,4rem)}
  .pmain .head p{font-size:17px}
  .paside .services span{display:none}
}

/* ---------- móvil ---------- */
@media (max-width:900px){
  .nav{gap:16px}
  .nav ul{display:none} .langs{margin-left:auto}
  .stage{min-height:600px}
  .headline{font-size:clamp(2rem,8.5vw,3rem)}
  .hero-top .btn{font-size:1rem;padding:1rem 1.8rem}
  .visual img,.visual video{-webkit-mask:none;mask:none}
  .pgrid{display:flex;flex-direction:column;margin-top:20px}
  .pmain,.paside{display:contents}
  .pmain .head{order:1}
  .paside .sec-visual{order:2}
  .pmain .reels,.pmain .inside-log{order:3}
  .paside .services{order:4;margin-top:28px}
  .sec-index{flex-direction:column;align-items:flex-start;gap:14px}
  .tags{width:100%;flex-direction:column;align-items:flex-start;gap:10px}
  .tags ul{width:calc(100% + var(--gutter));overflow-x:auto;scrollbar-width:none;padding-right:var(--gutter)}
  .tags ul::-webkit-scrollbar{display:none}
  .pmain .ask{order:5}
  .opener{display:block}
  .sec-visual{margin-bottom:8px}
  .sec-visual img{max-height:320px}
  .opener .head{max-width:none}
  .opener .head p{white-space:normal}
  .hero-foot{top:50%}
  .hero-foot .foot-top{flex-direction:row;align-items:flex-start}
  .hero-foot .foot-title{font-size:15px}
  .hero-foot .foot-title span{display:none}
  .hero-foot hr{margin:1rem 0}
  .hero-foot .foot-bottom{display:none}
  .hero-foot .foot-links{order:0;display:flex;justify-content:center;gap:.5rem 1.2rem}
  .hero-foot .foot-links span{display:contents}
  .hero-foot .foot-links a{font-size:14px}
  .inside-log .log ol{height:248px}
  .head,.contact-grid{grid-template-columns:1fr}
  .contact-grid > div,.contact form{grid-column:auto}
  .reels{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scrollbar-width:none}
  .reels::-webkit-scrollbar{display:none}
  .reel{flex:0 0 72vw;scroll-snap-align:start}
  .services{grid-template-columns:1fr 1fr;row-gap:28px}
  .inside{grid-template-columns:1fr}
  .cases{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .step + .step{padding-left:0;border-left:0;border-top:1px solid var(--line);margin-top:28px}
  .step b{margin-top:16px}
  .foot-top{flex-direction:column;align-items:flex-start;gap:6px}
  .foot-bottom{flex-wrap:wrap}
  .foot-links{order:-1;flex:1 1 100%;justify-content:flex-start;gap:.6rem 1.6rem}
  .copy{flex:none}
}
@media (max-width:520px){ .nav > .btn{display:none} }
/* en móvil las luces de detrás del cristal no sobresalen del bloque (Safari antiguo no recorta con overflow-x:clip) */
@media (max-width:900px){ .paside .services::before,.inside-log::before,.contact form::before{inset:0} }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal .wi,.wordmark .li{opacity:1!important;transform:none!important;filter:none!important}
}