/* Juturu (cuerpos): Medium 500 cuerpo, Semibold 600 acentos, Bold 700 acentos 2.
   Georgia (títulos) es fuente del sistema: no se embebe el TTF por licencia. */
@font-face { font-family:"Juturu"; src:url("./assets/fonts/Juturu-Medium.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Juturu"; src:url("./assets/fonts/Juturu-Semibold.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Juturu"; src:url("./assets/fonts/Juturu-Bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }

/* Marca: #090a0a títulos/fondo oscuro/texto · #757275 títulos claros, textura sobre oscuro
   · #cecdce textura sobre claro · #f2f2f1 fondos claros, texto sobre negro.
   --sc-ink-soft (#5f5c5f) es un tono derivado de #757275 SOLO para texto pequeño: #757275
   sobre #f2f2f1 da 4.25:1, válido para títulos grandes pero no para cuerpo. */
:root{
  --sc-gutter:clamp(1.25rem,5.7vw,7rem); /* boceto: margen izquierdo 109px a 1920 */
  --brand-black:#090a0a; --brand-grey:#757275; --brand-silver:#cecdce; --brand-paper:#f2f2f1;
  --sc-canvas:var(--brand-paper); --sc-surface:var(--brand-paper);
  --sc-ink:var(--brand-black);    --sc-ink-soft:#5f5c5f;
  --sc-accent:var(--brand-grey);  --sc-accent-ink:var(--brand-paper);
  --title-soft:var(--brand-grey);
  --sc-font-display:Georgia,"Georgia Pro","Times New Roman",serif;
  --sc-font-text:"Juturu","Helvetica Neue",Arial,sans-serif;
  --sc-ease-out: cubic-bezier(.16,1,.3,1);
  --sc-shadow-color: 300 2% 30%;
}
.ch--light{
  --sc-canvas:var(--brand-paper); --sc-surface:var(--brand-paper); --sc-ink:var(--brand-black);
  --sc-ink-soft:#5f5c5f; --sc-accent:var(--brand-grey); --sc-accent-ink:var(--brand-paper);
  background:var(--sc-canvas); color:var(--sc-ink);
}
.ch--dark{
  --sc-canvas:var(--brand-black); --sc-surface:var(--brand-black); --sc-ink:var(--brand-paper);
  --sc-ink-soft:var(--brand-silver); --sc-accent:var(--brand-silver); --sc-accent-ink:var(--brand-black);
  --sc-shadow-color: 220 10% 2%;
  background:var(--sc-canvas); color:var(--sc-ink);
}
body { font-weight:500; }
p { letter-spacing:.01em; line-height:1.65; } /* Juturu Medium (cuerpo del brief): tracking y interlínea para leer sin esfuerzo */
h1,h2,h3,p,blockquote,figure { margin:0; }
h1,h2,h3 { font-family:var(--sc-font-display); font-weight:400; text-wrap:balance; }
h2 { font-size:clamp(2.6rem,6.6vw,8.5rem); line-height:1.06; letter-spacing:-.025em; }
h3 { font-size:clamp(1.8rem,3vw,3.2rem); line-height:1.1; }
p { text-wrap:pretty; max-width:62ch; }
a { text-decoration:none; color:inherit; }
button { cursor:pointer; font:inherit; color:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button:disabled { opacity:.45; cursor:not-allowed; }
[hidden] { display:none !important; }
:where(button,a) { transition:transform 160ms var(--sc-ease-out),opacity 150ms ease; }
:where(button,a):active { transform:scale(.97); }
:where(a,button,input,textarea,[tabindex="0"]):focus-visible { outline:2px solid var(--sc-ink); outline-offset:5px; }
.ch { position:relative; }
.ch[data-sc-act="flow"] { padding:var(--sc-section) var(--sc-gutter); }
.hero-kicker { font-size:clamp(.95rem,1.3vw,1.5rem); letter-spacing:.2em; text-transform:uppercase; }

/* ---- header: banda clara, oscura sobre Contacto; línea + punto que avanzan ---- */
.site-header { position:fixed; inset:0 0 auto; z-index:80; display:flex; align-items:center; gap:var(--sc-6); height:88px; padding:0 var(--sc-gutter); background:var(--brand-paper); color:var(--brand-black); transition:background-color 240ms var(--sc-ease-out),color 240ms var(--sc-ease-out),transform 420ms var(--sc-ease-out),opacity 300ms var(--sc-ease-out); }
.brand { position:relative; width:236px; flex-shrink:0; display:block; }
.brand img { display:block; width:100%; height:auto; margin-left:-5%; /* el PNG trae 5 % transparente: la "a" visible queda exactamente en la línea del gutter */ transition:opacity 200ms var(--sc-ease-out); }
.desktop-nav { display:flex; gap:clamp(48px,7vw,110px); margin-inline:auto; padding-right:180px; font-size:.8rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; }
.desktop-nav a { color:#5f5c5f; padding:12px 0; transition:color 200ms var(--sc-ease-out),opacity 150ms ease,transform 160ms var(--sc-ease-out); }
.desktop-nav a[aria-current] { color:var(--brand-black); font-weight:700; }
.nav-track { position:absolute; left:0; right:0; bottom:14px; height:8px; pointer-events:none; }
.nav-track__line { position:absolute; left:0; top:3.5px; width:100%; height:1px; background:var(--brand-silver); transform-origin:0 50%; transform:scaleX(0); }
.nav-track__dot { position:absolute; left:0; top:0; width:8px; height:8px; border-radius:50%; background:var(--brand-silver); }
/* Sobre Contacto (fondo negro) el header se oscurece: network.js pone .is-dark en el borde de #contacto. */
.site-header.is-dark { background:var(--brand-black); color:var(--brand-paper); }
.site-header.is-dark .brand img { filter:invert(1); }
.site-header.is-dark .desktop-nav a { color:#9a979a; }
.site-header.is-dark .desktop-nav a[aria-current] { color:var(--brand-paper); }
.site-header.is-dark .nav-track__line { background:var(--brand-paper); }
.site-header.is-dark :focus-visible { outline-color:var(--brand-paper); }
.menu-toggle { display:none; align-items:center; gap:12px; margin-left:auto; border:0; background:none; padding:12px 0; font-size:.75rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; }
.menu-lines i { display:block; width:20px; height:1px; background:currentColor; margin:5px 0; transition:transform 200ms var(--sc-ease-out); }
[aria-expanded="true"] .menu-lines i:first-child { transform:translateY(3px) rotate(45deg); }
[aria-expanded="true"] .menu-lines i:last-child { transform:translateY(-3px) rotate(-45deg); }
.mobile-menu { position:fixed; inset:0; z-index:70; background:var(--brand-paper); color:var(--brand-black); padding:128px var(--sc-gutter) 32px; opacity:0; transform:translateY(-8px); transition:opacity 160ms var(--sc-ease-out),transform 160ms var(--sc-ease-out); }
.mobile-menu.is-open { opacity:1; transform:none; transition-duration:240ms; }
.mobile-menu a { display:block; padding:10px 0; font-size:1.1rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; opacity:0; transform:translateY(-8px); transition:opacity 120ms var(--sc-ease-out),transform 120ms var(--sc-ease-out); }
.mobile-menu.is-open a { opacity:1; transform:none; transition-duration:200ms; transition-delay:calc(var(--i) * 40ms); }
body.menu-open { overflow:hidden; }
.skip-link { position:absolute; top:100px; left:var(--sc-gutter); z-index:90; background:var(--brand-paper); color:var(--brand-black); padding:12px; transform:translateX(-200%); }
.skip-link:focus { transform:none; }

/* ---- hero: entra al cargar como los títulos de las secciones (fundido + leve subida, luego quieto) ---- */
html { scrollbar-gutter:stable; }
.hero-stage .sc-copy { max-width:none; bottom:12%; }
.hero-kicker { margin-bottom:28px; color:var(--sc-ink-soft); }
.hero-title { font-weight:400; font-size:clamp(3rem,8.7vw,11rem); line-height:1.04; letter-spacing:-.02em; }
.hero-line { display:block; width:fit-content; color:var(--brand-black); }
.hero-line--soft { color:var(--title-soft); }
.hero-line--ink { font-style:italic; margin-left:1.35em; padding-right:.08em; }
/* Boceto: el subtítulo arranca en ~52% del ancho, a la derecha bajo "en realidades". */
.hero-sub { margin:clamp(20px,3vh,40px) 0 0 calc(52vw - var(--sc-gutter)); font-size:clamp(1.15rem,1.45vw,1.75rem); font-weight:600; }
.hero-in { animation:hero-in 1100ms var(--sc-ease-out) both; }
.hero-kicker.hero-in { animation-delay:150ms; }
.hero-title .hero-in:nth-child(1) { animation-delay:300ms; }
.hero-title .hero-in:nth-child(2) { animation-delay:440ms; }
.hero-title .hero-in:nth-child(3) { animation-delay:580ms; }
.hero-sub.hero-in { animation-delay:800ms; }
@keyframes hero-in { from { opacity:0; transform:translate3d(0,2.4vh,0); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { @keyframes hero-in { from { opacity:0; } to { opacity:1; } } }

/* ---- títulos partidos gris / negro (Quiénes somos, Qué hacemos) ---- */
.split-title { font-size:clamp(2.6rem,5.8vw,7.5rem); line-height:1.02; }
.split-title__soft { color:var(--title-soft); }
/* Red de nodos y fondo: network.js inserta tres SVG fijos (red clara, red oscura, ramas) y el
   negro de Contacto bajo <main>. Las secciones no pintan fondo propio para dejarlos ver. */
body { background:var(--brand-paper); }
main { position:relative; z-index:1; background:transparent; }
.net, .net-dark-bg { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; }
.net-dark-bg { background:var(--brand-black); clip-path:inset(100% 0 0 0); }
.net--branches { z-index:2; } /* por encima de <main>: los puntos de las ramas quedan sobre el borde de los campos */
.net { overflow:visible; }
.net--light { --net-line:#cecdce; --net-node:#c4c3c4; --net-pulse:#8f8c8f; }
.net--dark { --net-line:#3a393a; --net-node:#757275; --net-pulse:#cecdce; clip-path:inset(100% 0 0 0); }
.net .lw-layer[data-depth] { opacity:1; filter:none; stroke:var(--net-line); stroke-width:1; }
.net .lw-layer :is(circle,rect) { fill:var(--net-node); }
.net .lw-layer .lw-pulse { stroke:var(--net-pulse); stroke-width:1.2; opacity:.8; }
.net-stars path { fill:var(--net-node); stroke:none; animation:net-twinkle 3.6s ease-in-out var(--tw, 0s) infinite; }
@keyframes net-twinkle { 0%,100% { opacity:.35; } 50% { opacity:1; } }
.branch { --b-line:#cecdce; --b-node:#a9a6a9; --b-pulse:#757275; }
.branch.is-dark { --b-line:#575557; --b-node:#cecdce; --b-pulse:#f2f2f1; }
.branch__line, .branch__pulse { fill:none; stroke-linecap:round; }
.branch__line { stroke:var(--b-line); stroke-width:1; }
.branch__pulse { stroke:var(--b-pulse); stroke-width:1.3; }
.branch__joint { fill:var(--b-line); }
.branch__dot { fill:var(--b-node); transition:fill 300ms var(--sc-ease-out); }
.branch__dot.is-lit { fill:var(--b-pulse); }
.branch__halo { fill:var(--b-pulse); opacity:0; }
@media (prefers-reduced-motion:reduce) { .net-stars path { animation:none; opacity:.7; } }
@media (max-width:768px) { .net--light, .net--dark { opacity:.45; } }
main > .ch { background:transparent; } /* un solo fondo continuo: sin cortes entre secciones */

/* ---- Nosotros ---- */
.about-stage { display:flex; flex-direction:column; justify-content:center; gap:clamp(16px,3vh,36px); padding:112px var(--sc-gutter) 24px; isolation:isolate; }
.about-stage > * { position:relative; z-index:1; }
/* Una sola línea vertical (la "a" del logo = --sc-gutter): la foto arranca ahí y termina donde el boceto (32.7% del ancho); "Universo Colaborativo Creativo" va como
   subtítulo y los párrafos se corren hacia la derecha, más abajo; los logos se alinean con los párrafos. */
.about-grid { display:grid; grid-template-columns:calc(32.7vw - var(--sc-gutter)) minmax(0,1fr); column-gap:3.1vw; align-items:start; }
.about-photo img { display:block; width:100%; height:auto; filter:grayscale(1); } /* sin recorte: la foto oficial completa */
.about-copy { padding-top:0; } /* el borde superior de la foto y la cap-height del lede quedan en la misma línea */
.lede { font-family:var(--sc-font-text); font-weight:600; font-size:clamp(1.25rem,1.55vw,1.85rem); line-height:1.3; margin:-.3em 0 clamp(22px,4.6vh,52px); }
#nosotros .readmore { max-width:33vw; margin-left:2.6vw; }
#nosotros .readmore__body p { font-size:clamp(.98rem,1.02vw,1.2rem); line-height:1.58; }
.readmore { max-width:56ch; }
.readmore__body p { font-size:clamp(1.05rem,1.15vw,1.35rem); line-height:1.6; }
.readmore__body p + p, .readmore__extra p { margin-top:14px; }
.firm-strip { display:flex; align-items:center; gap:clamp(28px,3.4vw,60px); list-style:none; margin:0 0 0 calc(32.7vw + 3.1vw + 2.6vw - var(--sc-gutter)); padding:0; }
.firm-strip li { flex-shrink:0; }
.firm { display:block; height:clamp(26px,3.6vh,38px); width:auto; }
.firm--mpds { height:clamp(34px,4.8vh,50px); }
.firm--dicta { height:clamp(21px,2.9vh,30px); }
/* Escritorio con movimiento: el texto se revela con el scroll en tandas apiladas en la misma celda
   (nosotros: párrafos 1-2 y luego 3-5; servicios: tres tandas). La textura queda fija. */
@media (min-width:769px) and (prefers-reduced-motion:no-preference) {
  html:not(.is-flow) :is(#nosotros .readmore__body, #servicios .reveal-stack) { display:grid; }
  html:not(.is-flow) :is(#nosotros .readmore__body > *, #servicios .reveal-stack > *) { grid-area:1/1; }
  html:not(.is-flow) :is(#nosotros .readmore__extra p:first-child, #servicios .reveal-batch p:first-child) { margin-top:0; }
}
/* Teléfono en horizontal (flow con la retícula de escritorio): header más bajo y separación entre tandas. */
@media (max-height:500px) and (max-width:950px) and (orientation:landscape) {
  .site-header { height:64px; }
  .nav-track { bottom:8px; }
  .ch[data-sc-act="flow"] { padding-top:96px; }
  /* El hero de 390px de alto: título a escala del alto para que no se meta bajo el header. */
  .hero-stage .sc-copy { bottom:7vh; }
  .hero-kicker { margin-bottom:12px; font-size:.8rem; }
  .hero-title { font-size:clamp(2.2rem,13vh,3.6rem); }
  .hero-sub { margin-top:12px; }
}
.reveal-batch p + p { margin-top:14px; }
.reveal-stack { max-width:min(60ch, 31vw); }
.reveal-stack p { font-size:clamp(1rem,1.08vw,1.25rem); line-height:1.6; }

/* ---- Servicios: vertical, texto a la izquierda y lista de servicios con nodos a la derecha ---- */
.capabilities-stage { display:flex; align-items:center; }
.rail { display:grid; grid-template-columns:calc(46.5vw - var(--sc-gutter)) minmax(0,1fr); align-items:center; gap:2vw; /* boceto: línea de servicios al 48.5% del ancho */ width:100%; padding:110px var(--sc-gutter) 60px; position:relative; z-index:2; }
.rail__lead { min-width:0; }
.rail__lead .split-title { margin-bottom:32px; }
.cap-list { position:relative; display:flex; flex-direction:column; gap:clamp(22px,4vh,40px); padding-left:clamp(24px,2.5vw,48px); }
/* Línea de tiempo: se dibuja hacia abajo con el progreso del acto (--sc-p de scrollcraft) y cada
   servicio entra cuando la línea lo alcanza (cues 0.01 / 0.07 / 0.13 / 0.19: los 4 servicios están antes de que termine la primera tanda de texto). */
.cap-list::before { content:""; position:absolute; left:0; top:0; bottom:0; width:1px; background:var(--brand-silver); transform-origin:50% 0; transform:scaleY(clamp(0, calc((var(--sc-p, 1) - .02) * 4), 1)); }
/* Flow (móvil, horizontal): sin --sc-p; script.js pone --line-p con el scroll (sin él, la línea va completa). */
.is-flow .cap-list::before { transform:scaleY(var(--line-p, 1)); }
.is-flow .rail { align-items:start; } /* horizontal: los servicios junto al título, no centrados en un texto largo */
.capability { position:relative; }
.capability::before { content:""; position:absolute; left:calc(clamp(24px,2.5vw,48px) * -1 - 4.5px); top:.55em; width:8px; height:8px; border-radius:50%; background:var(--brand-grey); }
.capability h3 { display:flex; flex-direction:column; gap:6px; opacity:var(--dim, 1); }
.capability h3 b { font-family:var(--sc-font-text); font-weight:700; font-size:clamp(1.3rem,1.75vw,2rem); width:fit-content; line-height:1.1; text-transform:uppercase; letter-spacing:-.01em; }
.capability h3 span { width:fit-content; font-size:clamp(1.15rem,1.45vw,1.75rem); color:var(--sc-ink); }

/* ---- Contacto (fondo oscuro) ---- */
.contact-stage { isolation:isolate; }
#contacto { overflow-x:clip; } /* clip (no hidden): no rompe el sticky; corta las líneas de los campos en flow */
.contact-stage > * { position:relative; z-index:1; }
.contact-grid { display:grid; grid-template-columns:calc(42vw - var(--sc-gutter)) minmax(0,1fr); gap:4vw; align-items:start; } /* boceto: columna derecha al 46% */
.contact-side { max-width:27vw; } /* los campos terminan ~1.5 retículas antes de la red: sin círculos debajo del campo */
.contact-lead h2 { font-size:clamp(3rem,6.5vw,8.5rem); line-height:1; margin-bottom:28px; }
.contact-invite { font:italic clamp(1.25rem,1.8vw,1.75rem)/1.35 var(--sc-font-display); max-width:22ch; }
.contact-copy { font-size:clamp(1.05rem,1.15vw,1.35rem); line-height:1.6; max-width:52ch; }
.contact-ask { font:italic clamp(1.2rem,1.6vw,1.8rem)/1.3 var(--sc-font-display); margin:24px 0 16px; }
.contact-form { max-width:100%; }
.field { position:relative; display:block; margin-bottom:12px; }
.field span { position:absolute; left:20px; top:50%; transform:translateY(-50%); font-size:.74rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--sc-ink-soft); pointer-events:none; }
.field input { display:block; width:100%; height:44px; padding:0 18px 0 176px; border:1px solid var(--brand-grey); border-radius:999px; background:transparent; color:var(--sc-ink); font:500 1rem var(--sc-font-text); caret-color:var(--sc-ink); transition:border-color 160ms var(--sc-ease-out); }
.field input:focus-visible { outline:2px solid var(--sc-ink); outline-offset:3px; border-color:var(--sc-ink); }
/* Cada campo termina en un nodo de rama conectado a la red (network.js). */
.contact-form button { display:inline-flex; align-items:center; gap:10px; min-height:44px; margin-top:4px; padding:0 28px; border:1px solid var(--sc-ink); border-radius:999px; background:var(--sc-ink); color:var(--sc-canvas); font:600 .85rem var(--sc-font-text); letter-spacing:.2em; text-transform:uppercase; cursor:pointer; transition:background-color 160ms var(--sc-ease-out),color 160ms var(--sc-ease-out); }
.contact-form button:hover { background:transparent; color:var(--sc-ink); }
.form-status { font-size:.9rem; margin-top:12px; min-height:1.6em; color:var(--sc-ink-soft); }
.site-footer { font-size:.95rem; }
.contact-lines { display:flex; flex-wrap:wrap; gap:8px 40px; max-width:none; padding-bottom:20px; border-bottom:1px solid var(--brand-grey); }
.contact-lines a { border-bottom:1px solid transparent; }
.offices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; list-style:none; margin:20px 0 0; padding:0; max-width:900px; }
.offices li { display:flex; flex-direction:column; line-height:1.45; color:var(--sc-ink-soft); }
.offices b { color:var(--sc-ink); font-weight:700; }
.copyright { margin-top:20px; font-size:.8rem; color:var(--sc-ink-soft); }
@media (min-width:769px) {
  .contact-stage { display:flex; flex-direction:column; justify-content:center; gap:clamp(24px,4vh,48px); padding:112px var(--sc-gutter) 28px; }
}
@media (hover:hover) and (pointer:fine) {
  a:hover { opacity:.75; }
  .contact-lines a:hover { opacity:1; border-color:currentColor; }
  .field input:hover { border-color:var(--sc-ink); }
}
@media (max-width:899px) {
  .desktop-nav { display:none; }
  .menu-toggle { display:flex; }
  .brand { width:150px; }
}
@media (max-width:768px) {
  .site-header { height:76px; }
  .brand { width:128px; }
  .nav-track { bottom:10px; }
  /* Teléfono: el hero va en flow (script.js) y mide lo que su texto, sin la pantalla vacía bajo el header. */
  #inicio[data-sc-act="flow"] { padding:128px var(--sc-gutter) 0; }
  #inicio[data-sc-act="flow"] .sc-copy { position:relative; inset:auto; max-width:none; }
  .hero-title { font-size:clamp(2.7rem,13vw,4.4rem); }
  .hero-line--ink { margin-left:.9em; }
  .hero-kicker { font-size:.85rem; }
  .hero-sub { margin-left:0; font-size:1rem; text-align:right; }
  /* #nosotros y #contacto pasan a flow (script.js) */
  #nosotros { padding-top:112px; }
  .about-stage { padding:0; gap:28px; }
  .about-grid { grid-template-columns:1fr; gap:28px; margin-left:0; }
  #nosotros .readmore { max-width:none; margin-left:0; }
  .reveal-stack { max-width:none; }
  .contact-side { max-width:none; }
  .about-copy { padding-right:0; }
  .about-photo img { max-height:none; }
  .firm-strip { flex-wrap:wrap; justify-content:flex-start; gap:28px 36px; margin:0; width:100%; }
  .firm { height:30px; } .firm--mpds { height:44px; } .firm--dicta { height:26px; }
  #servicios { padding:112px var(--sc-gutter) 56px; }
  .rail { grid-template-columns:1fr; gap:40px; padding:0; }
  .cap-list { margin-left:6px; }
  .rail__lead .split-title { margin-bottom:20px; }
  .contact-grid { grid-template-columns:1fr; gap:36px; }
  .site-footer { margin-top:48px; }
  .offices { grid-template-columns:1fr; gap:18px; }
  .field input { padding-left:164px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .mobile-menu,.mobile-menu a,.menu-lines i,:where(button,a):active { transform:none !important; }
  .mobile-menu,.mobile-menu a { transition-property:opacity; transition-duration:220ms; }
}

/* === livewire === */
/* Profundidad por capas. El parallax lo pone scrollcraft via data-sc-parallax
   (style.transform inline en el <g.lw-layer>), por eso la escala vive en el
   wrapper .lw-scale que livewire.js inserta. */
svg[data-livewire] { overflow:visible; }
.lw-layer { fill:none; stroke:var(--sc-accent); stroke-linecap:round; }
.lw-layer :is(circle,rect) { fill:var(--sc-accent); stroke:none; opacity:.55; will-change:opacity; }
.lw-layer .lw-glow { opacity:0; pointer-events:none; }
.lw-layer .lw-pulse { stroke:color-mix(in oklab, var(--sc-accent) 70%, var(--sc-ink)); stroke-width:1.2; opacity:.7; will-change:stroke-dashoffset; }
.lw-scale { transform-box:view-box; transform-origin:50% 50%; }
.lw-layer[data-depth="far"]  { opacity:.16; stroke-width:.6; filter:blur(2.5px); }
.lw-layer[data-depth="far"] > .lw-scale { transform:scale(1.22); }
.lw-layer[data-depth="mid"]  { opacity:.34; stroke-width:1; }
.lw-layer[data-depth="near"] { opacity:.50; stroke-width:1.4; }
/* === /livewire === */

/* En flow la sección ya aporta el gutter: los stages no lo repiten (misma retícula que el header). */
.ch[data-sc-act="flow"] :is(.about-stage,.rail,.contact-stage) { padding-left:0; padding-right:0; }
/* Flow: separación entre tandas de texto (en pin comparten celda y no llevan margen). */
[data-sc-act="flow"] .reveal-batch + .reveal-batch { margin-top:14px; }
/* Tablet horizontal (769-1100px, sigue en pin): Quiénes somos arranca bajo el header y los logos caben. */
@media (min-width:769px) and (max-width:1100px) {
  .about-stage { justify-content:flex-start; }
  #nosotros .readmore__body p { font-size:.9rem; line-height:1.5; }
  .firm-strip { flex-wrap:wrap; gap:14px 22px; }
  .firm { height:24px; } .firm--mpds { height:32px; } .firm--dicta { height:19px; }
}

/* Profundidad en el texto (taste.md, Depth): sombra con desfase y desenfoque, teñida del fondo,
   no un halo neón. Titulares y subtítulos llevan una capa de contacto y otra difusa; el cuerpo, un
   velo apenas perceptible. Sobre el negro de Contacto la sombra se invierte a luz tenue. */
.hero-title, .split-title, .lede, .capability h3 b, .contact-lead h2 {
  text-shadow: 0 1px 1px rgba(9,10,10,.10), 0 8px 22px rgba(117,114,117,.20);
}
.hero-line--ink, .split-title { text-shadow: 0 1px 1px rgba(9,10,10,.12), 0 10px 26px rgba(117,114,117,.24); }
.hero-sub, .capability h3 span, .readmore__body p, .reveal-stack p, .contact-invite { text-shadow: 0 2px 10px rgba(117,114,117,.12); }
.ch--dark :is(h2, h3, p, .contact-invite, .contact-copy, .contact-ask) { text-shadow: 0 1px 1px rgba(0,0,0,.5), 0 8px 24px rgba(242,242,241,.13); }
.ch--dark :is(.contact-copy, .contact-invite, .contact-ask) { text-shadow: 0 2px 12px rgba(242,242,241,.08); }
@media (prefers-reduced-motion:reduce) { .hero-title, .split-title, .lede, .capability h3 b, .contact-lead h2 { text-shadow:0 6px 18px rgba(117,114,117,.16); } }