/* ==========================================================================
   jeremasih.com v3, "Un solo hilo"
   Movimiento: js/movimiento.js.
   Color: SOLO los 8 hex del manual; todo lo demás es rgba() de esos colores.
   ========================================================================== */
:root{
  --negro:#000000; --noche:#16003e; --violeta:#a124ff; --agua:#00ffde;
  --tinta:#eaf6f5; --tinta-2:#9fb4b2; --tinta-3:#7c908e; --blanco:#ffffff;
  --linea:rgba(255,255,255,.12); --linea-2:rgba(255,255,255,.07);
  --vidrio:rgba(255,255,255,.045); --vidrio-borde:rgba(255,255,255,.12);
  --brillo-borde:inset 0 1px 0 rgba(255,255,255,.18);
  --sombra-1:0 14px 34px -18px rgba(0,0,0,.75);
  --sombra-violeta:0 40px 90px -40px rgba(161,36,255,.5);

  --f-sans:'Geist',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-serif:'Instrument Serif',Georgia,serif;
  --f-mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --t-display:clamp(2.75rem,1.9rem + 4.2vw,5.25rem);   /* 46 px en 390, 84 en 1440: a 96 el botón del hero caía bajo el pliegue de 900 */
  --t-h2:clamp(2.05rem,1.3rem + 3.2vw,4.25rem);
  --t-frase:clamp(1.75rem,1rem + 3.4vw,4rem);
  --t-h3:clamp(1.375rem,1.2rem + .6vw,1.75rem);
  --t-lead:clamp(1.1875rem,1.1rem + .35vw,1.3125rem);
  --t-body:1.0625rem;
  --t-small:.9375rem;
  --t-label:.8125rem;   /* 13 px */

  --s-9:120px;
  --r-pill:999px; --r-xl:28px; --r-lg:22px; --r-md:16px;
  --e-out:cubic-bezier(.16,1,.3,1); --e-io:cubic-bezier(.65,0,.35,1);
  --nav-h:64px; --ancho:1180px; --pad:clamp(20px,4vw,40px);
}
*{ box-sizing:border-box; }
html{ background:var(--negro); color-scheme:dark; -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--nav-h) + 24px); }
html,body{ margin:0; }
body{ min-height:100vh; min-height:100svh; color:var(--tinta); font-family:var(--f-sans); font-size:var(--t-body);
  line-height:1.65; font-weight:400; overflow-x:hidden; overflow-x:clip; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent; }
a{ color:inherit; }
button, summary, input, select, textarea{ font-family:inherit; }   /* el botón de menú heredaba Arial */
img{ display:block; max-width:100%; }
.serif{ font-family:var(--f-serif); font-style:italic; font-weight:400; letter-spacing:-.01em; }
.label{ font-family:var(--f-mono); font-size:var(--t-label); font-weight:400; letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-2); line-height:1.4; }
.sr{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
:focus-visible{ outline:2px solid var(--agua); outline-offset:3px; border-radius:8px; }
.skip{ position:absolute; left:16px; top:-80px; z-index:300; background:var(--tinta); color:var(--negro); padding:12px 16px; border-radius:10px; font-weight:600; }
.skip:focus{ top:16px; }

/* ===== el hilo: fondo fijo ===== */
#hilo{ position:fixed; left:0; top:0; width:100vw; height:100vh; height:100lvh; z-index:0; display:block; pointer-events:none;
  transition:opacity .2s ease; }
.hilo-css{ position:fixed; left:0; top:0; width:100vw; height:100vh; height:100lvh; z-index:0; pointer-events:none; display:none; overflow:hidden;
  background:linear-gradient(180deg,var(--negro) 45%,rgba(22,0,62,.55)); }
.hilo-css i{ position:absolute; left:-20vmax; top:-20vmax; width:90vmax; height:90vmax; border-radius:50%; opacity:0;
  transition:transform 1.2s var(--e-out), opacity 1.2s var(--e-out); will-change:transform,opacity; }
.hilo-css .v{ background:radial-gradient(circle,rgba(161,36,255,.42),rgba(161,36,255,0) 62%); }
.hilo-css .a{ background:radial-gradient(circle,rgba(0,255,222,.22),rgba(0,255,222,0) 62%); }
.hilo-css .n{ background:radial-gradient(circle,rgba(22,0,62,.9),rgba(22,0,62,0) 65%); }
body.modo-css #hilo{ display:none; } body.modo-css .hilo-css{ display:block; }
body[data-estado="hero"] .hilo-css .v{ opacity:1; transform:translate(40vw,-10vh); }
body[data-estado="hero"] .hilo-css .a{ opacity:.8; transform:translate(65vw,20vh); }
body[data-estado="quien"] .hilo-css .v{ opacity:.7; transform:translate(-20vw,40vh); }
body[data-estado="quien"] .hilo-css .n{ opacity:1; transform:translate(20vw,10vh); }
body[data-estado="negocios"] .hilo-css .a{ opacity:1; transform:translate(30vw,30vh); }
body[data-estado="negocios"] .hilo-css .v{ opacity:.8; transform:translate(-30vw,0); }
body[data-estado="creativo"] .hilo-css .v{ opacity:.9; transform:translate(10vw,50vh); }
body[data-estado="cierre"] .hilo-css .a{ opacity:.4; transform:translate(10vw,70vh); }
body[data-estado="equipo"] .hilo-css .v{ opacity:.7; transform:translate(-25vw,30vh); }
body[data-estado="equipo"] .hilo-css .a{ opacity:.6; transform:translate(35vw,20vh); }
/* hebras del respaldo: tres líneas que derivan solas (translate, 18 s y 13 s) y giran según la sección (rotate) */
.hilo-css::before, .hilo-css::after{ content:""; position:absolute; left:50%; top:50%; width:220vmax; height:44vmax; margin:-22vmax 0 0 -110vmax;
  pointer-events:none; rotate:-18deg; transition:rotate 1.4s var(--e-out), opacity 1.2s ease;
  background:repeating-linear-gradient(180deg,rgba(161,36,255,0) 0 22px,rgba(161,36,255,.45) 24px,rgba(234,246,245,.75) 25px,rgba(0,255,222,.45) 26px,rgba(0,255,222,0) 28px 40px);
  -webkit-mask-image:linear-gradient(180deg,transparent 36%,#000000 46%,#000000 54%,transparent 64%); mask-image:linear-gradient(180deg,transparent 36%,#000000 46%,#000000 54%,transparent 64%);
  animation:deriva 18s ease-in-out infinite; }
.hilo-css::after{ filter:blur(12px); opacity:.8; animation-duration:13s; animation-direction:reverse; }
@keyframes deriva{ 0%,100%{ translate:0 -3vh; } 50%{ translate:-8vw 3vh; } }
body[data-estado="quien"] .hilo-css::before, body[data-estado="quien"] .hilo-css::after{ rotate:-9deg; }
body[data-estado="equipo"] .hilo-css::before, body[data-estado="equipo"] .hilo-css::after{ rotate:-5deg; }
body[data-estado="negocios"] .hilo-css::before, body[data-estado="negocios"] .hilo-css::after{ rotate:0deg; }
body[data-estado="creativo"] .hilo-css::before, body[data-estado="creativo"] .hilo-css::after{ rotate:-90deg; }
body[data-estado="cierre"] .hilo-css::before, body[data-estado="cierre"] .hilo-css::after{ rotate:0deg; opacity:.35; }
@media (max-aspect-ratio:1/1){
  .hilo-css::before, .hilo-css::after{ rotate:-64deg; }
  body[data-estado="quien"] .hilo-css::before, body[data-estado="quien"] .hilo-css::after{ rotate:-76deg; }
  body[data-estado="equipo"] .hilo-css::before, body[data-estado="equipo"] .hilo-css::after,
  body[data-estado="negocios"] .hilo-css::before, body[data-estado="negocios"] .hilo-css::after,
  body[data-estado="creativo"] .hilo-css::before, body[data-estado="creativo"] .hilo-css::after{ rotate:-90deg; }
}

.page{ position:relative; z-index:1; overflow-x:clip; }  /* clip, no hidden: hidden rompería los sticky */
body.solo-fondo .page, body.solo-fondo .nav{ visibility:hidden; }
.wrap{ max-width:var(--ancho); margin:0 auto; padding:0 var(--pad); }

/* ===== nav: isla de vidrio ===== */
.nav{ position:fixed; z-index:100; top:12px; top:max(12px,env(safe-area-inset-top)); left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:4px; padding:6px; border-radius:var(--r-pill);
  background:rgba(0,0,0,.55); border:1px solid var(--vidrio-borde);
  -webkit-backdrop-filter:blur(20px) saturate(170%); backdrop-filter:blur(20px) saturate(170%);
  box-shadow:var(--brillo-borde), var(--sombra-1); width:max-content; max-width:calc(100vw - 24px); }
.nav .marca{ display:flex; align-items:center; gap:10px; min-height:44px; padding:4px 12px 4px 4px; text-decoration:none; font-weight:600; letter-spacing:-.01em; border-radius:var(--r-pill); }
.nav .marca img{ width:42px; height:42px; border-radius:50%; object-fit:contain; padding:2px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.22); transition:transform .35s var(--e-out), box-shadow .35s ease; }
@media (hover:hover) and (pointer:fine){ .nav .marca:hover img{ transform:scale(1.07) rotate(-4deg); box-shadow:0 0 0 2px var(--violeta), 0 0 18px -2px rgba(161,36,255,.7); } }
.nav .link{ font-size:.9375rem; font-weight:500; text-decoration:none; color:var(--tinta-2); padding:0 14px; min-height:44px;
  display:inline-flex; align-items:center; border-radius:var(--r-pill); transition:color .2s ease, background-color .2s ease; }
.nav .link:hover{ color:var(--tinta); background:rgba(255,255,255,.05); }
.nav .link.on{ color:var(--tinta); background:rgba(255,255,255,.08); }
.nav .menu{ display:none; width:44px; height:44px; flex:0 0 44px; border-radius:50%; border:1px solid var(--vidrio-borde); background:var(--vidrio);
  color:var(--tinta); align-items:center; justify-content:center; cursor:pointer; padding:0; }
.nav .menu svg path{ transition:transform .3s var(--e-out); transform-origin:12px 12px; }
.nav .menu[aria-expanded="true"] .l1{ transform:translateY(4px) rotate(45deg); }
.nav .menu[aria-expanded="true"] .l2{ transform:translateY(-4px) rotate(-45deg); }
.nav .progreso{ position:absolute; left:22px; right:22px; bottom:-1px; height:2px; border-radius:2px; overflow:hidden; pointer-events:none; }
.nav .progreso i{ display:block; height:100%; width:100%; transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg,var(--violeta),var(--agua)); }
.nav .derecha{ display:flex; align-items:center; gap:6px; }
@media (max-width:860px){
  .nav{ left:12px; right:12px; transform:none; width:auto; max-width:none; justify-content:space-between; }
  .nav .link{ display:none; }
  .nav .menu{ display:inline-flex; }
  .nav .marca span{ display:none; }
  .nav .marca{ padding:4px; }
}
.hoja{ position:fixed; inset:0; z-index:99; display:none; padding:calc(var(--nav-h) + 48px) var(--pad) 40px;
  background:rgba(0,0,0,.86); -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px); overflow-y:auto; }
.hoja.abierta{ display:block; animation:hoja .35s var(--e-out) both; }
@keyframes hoja{ from{ opacity:0; } }
.hoja a.item{ display:flex; align-items:center; justify-content:space-between; font-size:2rem; font-weight:600; letter-spacing:-.03em; text-decoration:none;
  padding:14px 0; min-height:64px; border-bottom:1px solid var(--linea-2); }
.hoja a.item .label{ letter-spacing:.1em; }
.hoja .cta{ margin-top:32px; }

/* ===== botones pill ===== */
.btn{ position:relative; isolation:isolate; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px;
  padding:0 22px; border-radius:var(--r-pill); font-family:var(--f-sans); font-size:1rem; font-weight:600; letter-spacing:-.005em;
  text-decoration:none; white-space:nowrap; cursor:pointer; transition:transform .35s var(--e-out), box-shadow .35s ease, background-color .25s ease; }
.btn:active{ transform:scale(.97); }
.btn .flecha{ display:inline-block; transition:transform .35s var(--e-out); }
.btn:hover .flecha{ transform:translate(3px,-3px); }
.btn-1{ background:var(--violeta); color:var(--blanco); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 14px 34px -14px rgba(161,36,255,.9); }
.btn-1:hover{ box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 18px 44px -12px rgba(161,36,255,1); }
.btn-1::after{ content:""; position:absolute; inset:0; z-index:-1; transform:translateX(-120%);
  background:linear-gradient(100deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.35) 50%,rgba(255,255,255,0) 70%); }
.btn-1.in::after{ animation:destello 1.4s var(--e-out) .5s 1 both; }
@keyframes destello{ to{ transform:translateX(120%); } }
.btn-2{ color:var(--tinta); background:var(--vidrio); border:1px solid var(--vidrio-borde);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:var(--brillo-borde); }
.btn-2:hover{ background:rgba(255,255,255,.08); }
.btn-nav{ min-height:44px; padding:0 16px; font-size:.9375rem; }
.ctas{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }

/* ===== revelado ===== */
.rv{ opacity:0; transform:translate3d(0,24px,0); transition:opacity .8s var(--e-out), transform .9s var(--e-out); transition-delay:calc(var(--d,0) * 70ms); }
.rv.in{ opacity:1; transform:none; }

/* ===== velo de legibilidad ===== */
.velo{ position:relative; }
.velo::before{ content:""; position:absolute; inset:-56px -72px; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side,rgba(0,0,0,.88),rgba(0,0,0,.82) 62%,rgba(0,0,0,0)); }

/* ===== 0. hero ===== */
.hero{ position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center; padding:calc(var(--nav-h) + 48px) 0 72px; }
.hero > .wrap{ width:100%; }
.hero-grid > *{ min-width:0; }
.hero-grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:56px; align-items:center; }
.hero-salida{ will-change:transform,opacity; }
.hero-salida.velo{ isolation:isolate; }
.pill{ display:inline-flex; align-items:center; gap:10px; padding:5px 16px 5px 5px; border-radius:var(--r-pill);
  border:1px solid var(--vidrio-borde); background:var(--vidrio); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  font-size:var(--t-small); color:var(--tinta-2); margin-bottom:28px; line-height:1.3; }
.pill img{ width:38px; height:38px; border-radius:50%; object-fit:contain; padding:2px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.22); }
.pill b{ color:var(--tinta); font-weight:600; }
.pill .sep{ width:3px; height:3px; border-radius:50%; background:var(--violeta); }
h1.titular{ font-size:var(--t-display); font-weight:600; letter-spacing:-.045em; line-height:.98; margin:0 0 26px; text-wrap:balance; }
h1.titular .w{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.1em; margin-bottom:-.1em; padding-right:.04em; margin-right:-.04em; }
h1.titular .wi{ display:inline-block; transform:translate3d(0,108%,0); animation:sube 1s var(--e-out) both; animation-delay:calc(120ms + var(--i) * 70ms); }
h1.titular em .wi{ background:linear-gradient(90deg,var(--tinta) 0 40%,var(--agua) 50%,var(--tinta) 60% 100%); background-size:300% 100%;
  background-position:100% 0; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  animation:sube 1s var(--e-out) both, barrido 1.6s var(--e-io) both; animation-delay:calc(120ms + var(--i) * 70ms), calc(700ms + var(--i) * 70ms); }
h1.titular em{ font-size:1.06em; letter-spacing:-.02em; }
/* no partir "Una / misma persona." (mide 7,17 em): sin corte donde entra; en dos columnas, en su línea y a 0,84 em */
@media (min-width:600px){ h1.titular em{ display:inline-block; white-space:nowrap; } }
@media (min-width:961px){ h1.titular em{ display:block; font-size:.84em; } }
@keyframes sube{ to{ transform:none; } }
@keyframes barrido{ from{ background-position:100% 0; } to{ background-position:0 0; } }
.hero .bajada{ font-size:var(--t-lead); color:var(--tinta-2); line-height:1.6; max-width:46ch; margin:0 0 32px; }
.hero .bajada strong{ color:var(--tinta); font-weight:600; }

/* tarjeta de vidrio con flujo */
.flujo{ position:relative; border-radius:var(--r-lg); padding:22px; border:1px solid var(--vidrio-borde);
  background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  -webkit-backdrop-filter:blur(22px) saturate(150%); backdrop-filter:blur(22px) saturate(150%);
  box-shadow:var(--brillo-borde), var(--sombra-violeta); will-change:transform; }
.flujo-top{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px; }
.flujo-top .vivo{ color:var(--agua); white-space:nowrap; }
.flujo-top .vivo i{ display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--agua); margin-right:8px; vertical-align:1px;
  box-shadow:0 0 10px 1px rgba(0,255,222,.7); animation:late 2.4s ease-in-out infinite; }
@keyframes late{ 50%{ opacity:.35; } }
.riel{ position:relative; display:grid; gap:10px; padding-left:28px; }
.riel::before{ content:""; position:absolute; z-index:0; left:10px; top:var(--t,28px); bottom:var(--b,28px); width:1px; transform-origin:50% 0;
  background:linear-gradient(var(--violeta),var(--agua)); animation:dibuja 1.2s var(--e-out) .6s both; }
.riel::after{ content:""; position:absolute; z-index:0; left:9.5px; top:var(--t,28px); bottom:var(--b,28px); width:2px; border-radius:2px; transform-origin:50% 0; transform:scaleY(0); opacity:0;
  background:linear-gradient(var(--violeta),var(--agua)); box-shadow:0 0 8px 1px rgba(0,255,222,.55); pointer-events:none; }
@keyframes dibuja{ from{ transform:scaleY(0); } }
.riel .paquete{ position:absolute; left:6px; top:0; width:9px; height:9px; border-radius:50%; background:var(--agua);
  box-shadow:0 0 14px 3px rgba(0,255,222,.75); opacity:0; z-index:2; pointer-events:none; will-change:transform,opacity; }
.nodo{ position:relative; z-index:1; display:flex; align-items:center; gap:12px; border-radius:14px; padding:10px 14px; min-height:56px;
  border:1px solid var(--vidrio-borde); background:rgba(0,0,0,.5); text-decoration:none; transition:border-color .25s ease, transform .35s var(--e-out); }
.nodo:hover{ border-color:rgba(0,255,222,.45); transform:translateX(3px); }
.nodo::before{ content:""; position:absolute; left:-24px; top:50%; width:11px; height:11px; margin-top:-5.5px; border-radius:50%;
  background:var(--negro); border:2px solid var(--violeta); }
.nodo img{ width:32px; height:32px; border-radius:8px; object-fit:contain; flex-shrink:0; }
.nodo > span:not(.ir){ min-width:0; }
.nodo b{ font-weight:600; font-size:1rem; display:block; line-height:1.25; }
.nodo small{ display:block; font-family:var(--f-mono); font-size:.8125rem; color:var(--tinta-2); letter-spacing:.02em; overflow-wrap:break-word; }
.nodo .ir{ margin-left:auto; color:var(--tinta-3); transition:color .25s ease, transform .35s var(--e-out); }
.nodo:hover .ir{ color:var(--agua); transform:translate(2px,-2px); }
.flujo-pie{ margin-top:16px; padding-top:14px; border-top:1px solid var(--linea); display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.flujo-pie a{ color:var(--agua); text-decoration:none; font-weight:600; font-size:1rem; min-height:44px; display:inline-flex; align-items:center; }
.flujo .nodo{ opacity:0; transform:translateX(-10px); animation:entra .8s var(--e-out) both; animation-delay:calc(800ms + var(--i) * 110ms); }
@keyframes entra{ to{ opacity:1; transform:none; } }

/* ===== franja cinética ===== */
.franja{ position:relative; padding:44px 0; overflow:hidden; border-block:1px solid var(--linea-2);
  background:linear-gradient(90deg,rgba(0,0,0,.6),rgba(0,0,0,.25) 50%,rgba(0,0,0,.6)); }
.franja .fila{ display:flex; width:max-content; white-space:nowrap; font-size:clamp(2.5rem,1.4rem + 5vw,6rem); font-weight:600; letter-spacing:-.04em;
  line-height:1.1; will-change:transform; }
.franja .fila span{ padding-right:.45em; }
.franja .fila .hueca{ color:transparent; -webkit-text-stroke:1px rgba(234,246,245,.5); }
.franja .fila .punto{ color:var(--violeta); }
.franja .fila + .fila{ margin-top:6px; }
@media (max-width:860px){   /* la palabra entra más entera y la hueca se lee */
  .franja .fila{ font-size:clamp(2.125rem,1.2rem + 4.2vw,5rem); }
  .franja .fila .hueca{ -webkit-text-stroke:1.5px rgba(234,246,245,.7); }
}

/* ===== secciones ===== */
.sec{ position:relative; padding:var(--s-9) 0; }
.kicker{ display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.kicker i{ width:28px; height:1px; background:linear-gradient(90deg,var(--violeta),var(--agua)); }
h2{ font-size:var(--t-h2); font-weight:600; letter-spacing:-.04em; line-height:1.02; margin:0 0 24px; text-wrap:balance; }
h2 .serif{ font-size:1.06em; letter-spacing:-.02em; }
.lead{ font-size:var(--t-lead); color:var(--tinta-2); line-height:1.6; max-width:58ch; margin:0 0 18px; }
.lead strong{ color:var(--tinta); font-weight:600; }
.texto{ color:var(--tinta-2); max-width:62ch; margin:0 0 16px; }
.texto strong{ color:var(--tinta); font-weight:600; }

/* ===== 1. quién soy ===== */
.quien-grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:64px; align-items:start; }
.retrato{ position:sticky; top:calc(var(--nav-h) + 40px); }
.retrato-marco{ position:relative; aspect-ratio:4/3; border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--vidrio-borde);
  background:var(--negro); box-shadow:var(--brillo-borde), var(--sombra-violeta); will-change:transform; }
.retrato-marco img{ width:100%; height:100%; object-fit:cover; object-position:46% 30%; transform:scale(1.14); will-change:transform;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 40%,#000000 55%,rgba(0,0,0,0) 100%); mask-image:radial-gradient(120% 100% at 50% 40%,#000000 55%,rgba(0,0,0,0) 100%); }
.retrato-marco::after{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:linear-gradient(115deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.12) 48%,rgba(255,255,255,0) 60%); background-size:250% 100%;
  background-position:calc(100% - var(--brillo,0) * 100%) 0; }
.retrato-pie{ position:absolute; left:16px; bottom:16px; display:inline-flex; gap:10px; align-items:center; padding:8px 14px;
  border-radius:var(--r-pill); background:rgba(0,0,0,.6); border:1px solid var(--vidrio-borde); color:var(--tinta); will-change:transform; }
.retrato-pie i{ width:7px; height:7px; border-radius:50%; background:var(--agua); }
.oficios{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:32px 0; }
.oficio{ border-radius:var(--r-md); padding:18px; border:1px solid var(--vidrio-borde); background:rgba(0,0,0,.42);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); box-shadow:var(--brillo-borde); }
.oficio h3{ font-size:1.125rem; font-weight:600; letter-spacing:-.02em; margin:8px 0 6px; line-height:1.25; }
.oficio p{ font-size:var(--t-small); color:var(--tinta-2); margin:0; line-height:1.55; }
details.manifiesto{ margin:28px 0 24px; }
details.manifiesto summary{ list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:0 20px;
  border-radius:var(--r-pill); border:1px solid var(--vidrio-borde); background:var(--vidrio); font-weight:600; }
details.manifiesto summary::-webkit-details-marker{ display:none; }
details.manifiesto summary svg{ transition:transform .35s var(--e-out); }
details.manifiesto[open] summary{ border-color:rgba(161,36,255,.5); background:rgba(161,36,255,.14); margin-bottom:24px; }
details.manifiesto[open] summary svg{ transform:rotate(180deg); }
.manifiesto-cuerpo p{ font-family:var(--f-serif); font-style:italic; font-size:clamp(1.375rem,1.2rem + .8vw,1.875rem); line-height:1.5;
  color:var(--tinta-2); margin:0 0 18px; max-width:40ch; letter-spacing:-.005em; }
.manifiesto-cuerpo b{ color:var(--tinta); font-weight:400; }
.redes{ display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.redes a{ min-height:44px; display:inline-flex; align-items:center; padding:0 16px; border-radius:var(--r-pill); border:1px solid var(--linea);
  background:rgba(0,0,0,.35); text-decoration:none; font-size:var(--t-small); color:var(--tinta-2); transition:color .2s ease, border-color .2s ease; }
.redes a:hover{ color:var(--tinta); border-color:var(--tinta-3); }
.redes-titulo{ margin-top:36px; }

/* ===== 2. JM Business ===== */
.neg-grid{ display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:64px; align-items:start; }
.neg-fijo{ position:sticky; top:calc(var(--nav-h) + 48px); }
.frase{ font-size:var(--t-frase); font-weight:500; letter-spacing:-.035em; line-height:1.08; margin:0 0 24px; text-wrap:balance; }
.frase .pw{ opacity:.16; transition:opacity .3s linear; }
.frase .pw.on{ opacity:1; }
.frase .serif{ font-size:1.06em; letter-spacing:-.02em; }
.frase em .pw.on{ color:var(--agua); text-shadow:0 0 28px rgba(0,255,222,.35); transition:opacity .3s linear, color .6s ease .2s; }
.mazo{ position:relative; display:grid; gap:18px; padding-bottom:12vh; }
/* carta: cabecera de 44 px que queda a la vista al taparse; arriba la zona visual
   (glifo con máscara + logo grande con halo tomado del propio logo); abajo el cuerpo con su fondo.
   Fondo opaco: con alfa .985 se transparentaba el texto de la carta de abajo. */
.ucard{ --rel:0; --tapa:0; position:sticky; top:calc(var(--nav-h) + 24px + var(--i) * 44px);
  height:clamp(340px,58svh,480px); border-radius:var(--r-xl); overflow:hidden; isolation:isolate; text-decoration:none; color:inherit;
  display:flex; flex-direction:column; border:1px solid var(--vidrio-borde); background:linear-gradient(165deg,#16003e,#000000 78%);
  box-shadow:var(--brillo-borde), 0 -20px 60px -30px rgba(0,0,0,.9);
  transform:translate3d(0,0,0) scale(calc(1 - var(--tapa) * .07)); transform-origin:50% 0; will-change:transform; }
.ucard::after{ content:""; position:absolute; inset:0; z-index:5; pointer-events:none; background:rgba(0,0,0,calc(var(--tapa) * .5)); }
.ucard .cabecera{ position:absolute; z-index:6; left:0; right:0; top:0; height:44px; display:flex; align-items:center; gap:10px; padding:0 20px;
  font-family:var(--f-mono); font-size:.8125rem; letter-spacing:.08em; text-transform:uppercase; color:var(--tinta); white-space:nowrap; overflow:hidden;
  border-bottom:1px solid var(--linea-2); background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0)); }
.ucard .cabecera b{ font-weight:500; color:var(--agua); }
.ucard .visual{ position:relative; z-index:1; flex:1 1 auto; min-height:120px; margin-top:44px; overflow:hidden; }
.ucard .glifo{ position:absolute; z-index:0; left:-2%; top:4%; font-size:clamp(5.5rem,4rem + 7vw,10rem); font-weight:800; letter-spacing:-.06em;
  line-height:.8; color:transparent; -webkit-text-stroke:1px rgba(234,246,245,.2); white-space:nowrap; pointer-events:none;
  /* sangra a propósito hacia la derecha (se funde detrás del logo) y hacia abajo; no se corta en seco */
  -webkit-mask-image:linear-gradient(180deg,#000000 30%,transparent 92%), linear-gradient(90deg,#000000 45%,transparent 88%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,#000000 30%,transparent 92%), linear-gradient(90deg,#000000 45%,transparent 88%); mask-composite:intersect;
  transform:translate3d(0,calc(var(--rel) * -90px - var(--tapa) * 40px),0); }
.ucard .luz{ position:absolute; z-index:1; inset:-30px 0; pointer-events:none;
  background:radial-gradient(60% 60% at 85% 20%,rgba(161,36,255,.38),rgba(161,36,255,0) 70%), radial-gradient(40% 50% at 10% 100%,rgba(0,255,222,.12),rgba(0,255,222,0) 70%);
  -webkit-mask-image:linear-gradient(180deg,#000000 45%,transparent 88%); mask-image:linear-gradient(180deg,#000000 45%,transparent 88%);
  transform:translate3d(0,calc(var(--rel) * -24px),0); }
.ucard .logo, .ucard .halo{ position:absolute; z-index:2; right:28px; bottom:18px; width:96px; height:96px; border-radius:22px; padding:12px; object-fit:contain;
  transform:translate3d(0,calc(var(--rel) * -36px),0) rotate(calc(var(--rel) * -4deg)); }
.ucard .logo{ z-index:3; background:rgba(0,0,0,.55); border:1px solid var(--vidrio-borde); box-shadow:var(--brillo-borde), 0 18px 40px -18px rgba(0,0,0,.9); }
.ucard .halo{ padding:0; filter:blur(26px) saturate(1.5); opacity:.7; scale:1.5; }
.ucard .cuerpo{ position:relative; z-index:3; flex:0 0 auto; padding:6px 28px 26px; transform:translate3d(0,calc(var(--rel) * 12px),0);
  background:linear-gradient(0deg,rgba(0,0,0,.6),rgba(0,0,0,.35) 70%,rgba(0,0,0,0)); }
.ucard .num{ display:block; font-family:var(--f-mono); font-size:var(--t-label); letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-2); }
.ucard h3{ font-size:var(--t-h3); font-weight:600; letter-spacing:-.03em; margin:8px 0 6px; line-height:1.1; }
.ucard p{ color:var(--tinta-2); margin:0 0 16px; max-width:34ch; }
.ucard .ir{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; border-radius:var(--r-pill);
  border:1px solid rgba(0,255,222,.35); background:rgba(0,255,222,.06); font-family:var(--f-mono); font-size:.9375rem; color:var(--agua);
  transition:background-color .25s ease, border-color .25s ease; }
.ucard:hover .ir{ background:rgba(0,255,222,.14); border-color:rgba(0,255,222,.6); }
.ucard .reflejo{ position:absolute; z-index:4; inset:0; pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.09) 50%,rgba(255,255,255,0) 60%); background-size:260% 100%;
  background-position:calc(100% - (var(--rel) + 1) * 50%) 0; }
.ucard:hover{ border-color:rgba(0,255,222,.35); }
.ucard.entrada{ background:linear-gradient(150deg,#a124ff,#16003e 70%); border-color:rgba(161,36,255,.55); }
.ucard.entrada .cabecera{ color:var(--blanco); }
.ucard.entrada .cabecera b{ color:var(--blanco); }
.ucard.entrada .cuerpo{ background:none; }
.ucard.entrada h3{ font-size:var(--t-h2); letter-spacing:-.04em; line-height:1.02; }
.ucard.entrada .num{ color:var(--blanco); }
.ucard.entrada p{ color:var(--tinta); }
.ucard.entrada .ir{ min-height:48px; padding:0 22px; background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.35);
  color:var(--blanco); font-family:var(--f-sans); font-weight:600; font-size:1.0625rem; }
.ucard.entrada .glifo{ -webkit-text-stroke:1px rgba(255,255,255,.26); font-size:clamp(8rem,6rem + 8vw,13rem); }

/* ===== 3. creativo ===== */
.creativo-grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:56px; align-items:center; }
.creativo-grid > *{ min-width:0; }

/* ===== galería de tarjetas (componente: Creativo y Un súper equipo; el comportamiento está en js/galeria.js) =====
   Cada tarjeta es una pieza de vidrio oscuro 4:5 con el mismo marco que las demás cartas del sitio: borde de vidrio, brillo de borde,
   velo para el rótulo, una luz violeta en la esquina y el reflejo diagonal que cruza con el movimiento. La foto nunca queda suelta.
   Variables por galería: --ancho-t (ancho de tarjeta), --amp (paralaje interno), --zoom. Por tarjeta: --px/--py (encuadre), --origen. */
.galeria{ --asomo:76px; --ancho-t:min(calc(100cqw - 2 * (var(--asomo) + 14px)),420px); --amp:4%; --zoom:1.08; container-type:inline-size; position:relative; min-width:0; }
@supports not (width:1cqw){ .galeria{ --ancho-t:300px; } }
.gal-pista{ position:relative; list-style:none; margin:0; padding:8px calc((100cqw - var(--ancho-t)) / 2) 12px; display:flex; gap:14px; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.3) transparent;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000000 7%,#000000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000000 7%,#000000 93%,transparent); }   /* las tarjetas vecinas se funden en el borde */
.galeria.js .gal-pista{ scrollbar-width:none; }
@media (hover:hover) and (pointer:fine){ .galeria.js .gal-pista{ cursor:grab; } }
.gal-pista.arrastra{ scroll-snap-type:none; cursor:grabbing; user-select:none; }
.gal-pista.arrastra .gal-enlace{ pointer-events:none; }
.gal-pista.libre{ scroll-snap-type:none; }   /* mientras el arrastre termina su recorrido suave */
.galeria.js .gal-pista::-webkit-scrollbar{ display:none; }
.gal-pista:focus-visible{ outline:2px solid var(--agua); outline-offset:-2px; border-radius:var(--r-lg); }
.gal-tarjeta{ --gd:0; --ga:0; position:relative; flex:0 0 var(--ancho-t); aspect-ratio:4/5; scroll-snap-align:center; scroll-snap-stop:always;
  border-radius:var(--r-lg); overflow:hidden; isolation:isolate; background:#000000; border:1px solid var(--vidrio-borde);
  box-shadow:var(--brillo-borde), var(--sombra-1); transform:scale(calc(1 - var(--ga) * .06)); opacity:calc(1 - var(--ga) * .5); transform-origin:50% 55%; }
.gal-tarjeta:has(:focus-visible){ border-color:rgba(0,255,222,.55); }
.gal-medio{ position:absolute; inset:0; z-index:0; overflow:hidden; background:#000000; }
.gal-medio img, .gal-medio video{ position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:var(--px,50%) var(--py,50%);
  transform:translate3d(calc(var(--gd) * var(--amp) * -1),0,0) scale(var(--zoom)); transform-origin:var(--origen,50% 50%); }
.gal-medio img.rota{ font-size:0; color:transparent; }
/* la foto con la guitarra se encuadra con zoom desde arriba a la derecha (sin laptop ni mesa) y se aplaca su saturación */
.gal-tarjeta.musica .gal-medio img{ filter:saturate(.58) brightness(.9); }
.gal-tarjeta.musica::after{ background:radial-gradient(75% 45% at 100% 0%,rgba(161,36,255,.3),rgba(161,36,255,0) 70%), radial-gradient(85% 55% at 0% 100%,rgba(0,0,0,.92),rgba(0,0,0,.6) 55%,rgba(0,0,0,0) 85%), radial-gradient(120% 90% at 50% 40%,rgba(0,0,0,0) 55%,rgba(0,0,0,.42)), linear-gradient(0deg,rgba(0,0,0,.86),rgba(0,0,0,.45) 26%,rgba(0,0,0,0) 56%); }
/* foto sin aire lateral en la fuente (la cabeza de Jere toca un borde y el pelo del nene el otro): se muestra un poco más chica, con aire, sobre su propio resplandor desenfocado */
.gal-tarjeta.encaja .gal-medio .ambiente{ --zoom:1.3; filter:blur(22px) saturate(1.1) brightness(.9); }
.gal-tarjeta.encaja .gal-medio .foto{ inset:4%; width:92%; height:92%; transform:none; border-radius:10px;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0),#000000 3%,#000000 97%,rgba(0,0,0,0)), linear-gradient(180deg,rgba(0,0,0,0),#000000 3%,#000000 97%,rgba(0,0,0,0)); -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,rgba(0,0,0,0),#000000 3%,#000000 97%,rgba(0,0,0,0)), linear-gradient(180deg,rgba(0,0,0,0),#000000 3%,#000000 97%,rgba(0,0,0,0)); mask-composite:intersect; }
.gal-medio video{ opacity:0; transition:opacity .5s ease; }
.gal-medio video.on{ opacity:1; }
/* velo: luz violeta en la esquina, viñeta y fondo oscuro para el rótulo */
.gal-tarjeta::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:inherit;
  background:radial-gradient(75% 45% at 100% 0%,rgba(161,36,255,.3),rgba(161,36,255,0) 70%), radial-gradient(120% 90% at 50% 40%,rgba(0,0,0,0) 55%,rgba(0,0,0,.42)), linear-gradient(0deg,rgba(0,0,0,.86),rgba(0,0,0,.45) 26%,rgba(0,0,0,0) 56%); }
/* reflejo diagonal: cruza la tarjeta mientras se desliza (el mismo gesto de las cartas del mazo) */
.gal-tarjeta::before{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit;
  background:linear-gradient(115deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.09) 50%,rgba(255,255,255,0) 60%); background-size:260% 100%;
  background-position:calc(50% + var(--gd) * 50%) 0; }
.gal-enlace{ position:absolute; inset:0; display:block; color:inherit; text-decoration:none; border-radius:inherit; }
.gal-enlace:focus-visible{ outline:2px solid var(--agua); outline-offset:-4px; border-radius:var(--r-lg); }
  background:rgba(0,0,0,.78); border:1px solid var(--vidrio-borde); box-shadow:var(--brillo-borde); }
.gal-tarjeta:has(.gal-enlace):hover{ border-color:rgba(0,255,222,.35); }
/* videos: solo paralaje (un movimiento encima de otro marea); fotos: su propia animacion kb */
.gal-tarjeta.video{ --zoom:1.04; --amp:3%; }
.equipo .gal-tarjeta.video{ --amp:2.5%; }
/* dibujo sobre fondo blanco: marco oscuro con paspartu, para que no encandile en el sitio oscuro */
.gal-tarjeta.marco .gal-medio{ background:linear-gradient(165deg,#16003e,#000000 78%); }
.gal-tarjeta.marco .gal-medio img, .gal-tarjeta.marco .gal-medio video{ inset:7%; width:86%; height:86%; border-radius:10px; transform:none; filter:brightness(.93); box-shadow:0 14px 40px -12px rgba(0,0,0,.8); }
.gal-rev-nota{ position:absolute; z-index:6; left:10px; right:10px; top:10px; padding:5px 10px; border-radius:var(--r-pill); font-size:.75rem; font-weight:600; text-align:center; color:var(--blanco); background:rgba(161,36,255,.85); }
/* ----- tarjetas sin texto: cada una es un boton invisible que abre la vista ampliada ----- */
.gal-abrir{ position:absolute; inset:0; z-index:4; width:100%; height:100%; padding:0; border:0; background:none; cursor:pointer; border-radius:inherit; color:inherit; }
.gal-abrir:focus-visible{ outline:2px solid var(--agua); outline-offset:-4px; }
.galeria:not(.js) .gal-abrir{ display:none; }
/* ----- movimiento propio de cada foto (lento, solo mientras se ve): destino y duracion por tarjeta con --kbx, --kby, --kbs, --kbt ----- */
@keyframes kb{ from{ scale:1; translate:0 0; } to{ scale:var(--kbs,1.1); translate:var(--kbx,-2%) var(--kby,-1%); } }
.gal-tarjeta:not(.video) .gal-medio img:not(.ambiente){ animation:kb var(--kbt,20s) ease-in-out infinite alternate; animation-play-state:paused; }
.gal-tarjeta:not(.video).en-vista .gal-medio img:not(.ambiente){ animation-play-state:running; }
.gal-tarjeta.encaja .gal-medio .foto{ animation-name:kb; }
/* ----- vista ampliada ----- */
html.modal-abierto{ overflow:hidden; }
.gal-modal{ width:100vw; max-width:100vw; height:100vh; height:100dvh; max-height:100dvh; margin:0; padding:0; border:0; color:var(--tinta); background:rgba(0,0,0,.93);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); overflow:hidden; }
.gal-modal::backdrop{ background:rgba(0,0,0,.7); }
.gal-modal[open]{ display:grid; place-items:center; animation:modal-entra .35s var(--e-out) both; }
@keyframes modal-entra{ from{ opacity:0; } }
.gm-medio{ position:absolute; inset:0; display:grid; place-items:center; padding:max(56px,env(safe-area-inset-top)) 0 max(76px,env(safe-area-inset-bottom)); }
.gm-pieza{ display:block; max-width:100%; max-height:calc(var(--mh,100dvh) - 140px); width:auto; height:auto; object-fit:contain; background:#000000; }
.gm-btn{ position:relative; display:inline-grid; place-items:center; min-width:44px; height:44px; padding:0 10px; border-radius:var(--r-pill); cursor:pointer; color:var(--tinta);
  background:rgba(0,0,0,.6); border:1px solid var(--vidrio-borde); box-shadow:var(--brillo-borde); font:inherit; font-size:.9375rem; gap:8px; grid-auto-flow:column; }
.gm-btn:hover{ background:rgba(255,255,255,.1); }
.gm-cerrar{ position:absolute; z-index:3; top:max(12px,env(safe-area-inset-top)); right:12px; }
.gm-barra{ position:absolute; z-index:3; left:12px; right:12px; bottom:max(14px,env(safe-area-inset-bottom)); display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; }
.gal-modal:not(.es-video) .gm-btn:not(.gm-cerrar), .gal-modal:not(.es-video) .gm-vol{ display:none; }
.gal-modal:not(.con-audio) .gm-sonido, .gal-modal:not(.con-audio) .gm-vol{ display:none; }
.gm-vol{ width:96px; accent-color:var(--agua); }
.gm-activar{ display:none; font-weight:600; }
.gm-sonido.pide{ border-color:rgba(0,255,222,.6); color:var(--agua); }
.gm-sonido.pide .gm-activar{ display:inline; }
.gm-origen{ display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 14px; border-radius:var(--r-pill); color:var(--tinta-2); text-decoration:none; font-family:var(--f-mono); font-size:.8125rem; letter-spacing:.06em; background:rgba(0,0,0,.45); border:1px solid var(--linea); }
.gm-origen:hover{ color:var(--agua); border-color:rgba(0,255,222,.4); }
.gm-origen[hidden]{ display:none; }
@media (min-width:861px){
  .gal-modal{ --mh:min(92vh,980px); width:min(92vw,1100px); max-width:92vw; height:min(92vh,980px); max-height:92vh; margin:auto; border-radius:var(--r-xl); border:1px solid var(--vidrio-borde); box-shadow:var(--sombra-violeta); }
}
/* marco de luz de la ventana ampliada: punto con brillo + estela, violeta a agua, una vuelta cada 7 s (js/galeria.js arma el SVG) */
.gm-marco{ position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; overflow:visible; }
.gm-marco rect{ fill:none; }
.gm-borde{ stroke:rgba(161,36,255,.4); stroke-width:1; }
.gm-haz{ filter:drop-shadow(0 0 5px rgba(0,255,222,.55)); }
.gm-estela{ stroke-width:3; stroke-linecap:round; animation:gm-giro 7s linear infinite; }
.gm-estela.v{ stroke:#a124ff; }
.gm-estela.a{ stroke:#00ffde; }
.gm-punto{ stroke:#eaf6f5; stroke-width:8; stroke-linecap:round; animation:gm-giro 7s linear infinite; filter:drop-shadow(0 0 6px rgba(0,255,222,.95)); }
@keyframes gm-giro{ from{ stroke-dashoffset:var(--L,0px); } to{ stroke-dashoffset:calc(var(--L,0px) - 1000px); } }
@media (prefers-reduced-motion:reduce){ .gm-haz{ display:none; } .gm-borde{ stroke:rgba(161,36,255,.35); } }
body.quieto .gm-haz{ display:none; }
@media (max-width:860px){ .gal-modal{ border-radius:0; } }
/* ----- modo revision: solo la vista previa (la publicacion pone la meta galeria-revision en "on") ----- */
.gal-rev{ position:absolute; z-index:6; left:10px; right:10px; bottom:10px; display:flex; gap:8px; justify-content:center; }
.gal-rev-btn{ min-height:34px; padding:0 14px; border-radius:var(--r-pill); font:inherit; font-size:.8125rem; font-weight:600; cursor:pointer; color:var(--tinta); background:rgba(0,0,0,.82); border:1px solid var(--vidrio-borde); }
.gal-rev-btn[data-decision="aprobar"][aria-pressed="true"]{ background:var(--agua); color:#000000; border-color:var(--agua); }
.gal-rev-btn[data-decision="descartar"][aria-pressed="true"]{ background:var(--violeta); color:var(--blanco); border-color:var(--violeta); }
.gal-rev[data-estado="error"]::after{ content:"No se guardó"; position:absolute; bottom:40px; font-size:.8125rem; color:var(--blanco); background:rgba(0,0,0,.8); padding:4px 10px; border-radius:var(--r-pill); }

/* ===== 3b. un súper equipo (entre Creativo y Contacto) ===== */
/* el saludo de Jere y Samuel, de a poco: cada paso (--t, en segundos) aparece cuando la sección entra; con movimiento reducido ya está entero */
.saludo{ margin:26px 0 0; font-family:var(--f-serif); font-style:italic; font-size:clamp(1.5rem,1.2rem + 1.2vw,2.125rem); line-height:1.5; color:var(--tinta); max-width:22em; }
.saludo .lin{ display:block; }
.saludo .t{ display:inline-block; opacity:0; transform:translate3d(0,10px,0); transition:opacity .8s var(--e-out), transform .9s var(--e-out); transition-delay:calc(var(--t) * 1s); }
.saludo.in .t{ opacity:1; transform:none; }
.saludo .lin{ display:block; width:fit-content; }
.saludo .fin{ color:var(--agua); text-shadow:0 0 28px rgba(0,255,222,.35); }
.equipo{ min-height:80vh; min-height:80svh; display:flex; align-items:center; }
.equipo > .wrap{ width:100%; }
.equipo-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:40px; align-items:center; }
.equipo-grid > *{ min-width:0; }
.kicker.doble i{ height:5px; background:none; border-top:1px solid var(--violeta); border-bottom:1px solid var(--agua); }   /* dos hebras */
.equipo .galeria{ --amp:2.5%; --zoom:1.05; }
@media (min-width:961px){ .equipo-grid{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:56px; } }   /* mismas columnas que Creativo: el eje de la tarjeta activa coincide */
/* una sección sin aprobar (data-aprobado="false") no se ve en ningún lado; solo en la vista previa local ?vista=borrador */
[data-aprobado="false"]{ display:none !important; }
html.vista-borrador [data-aprobado="false"]{ display:block !important; outline:1px dashed rgba(0,255,222,.35); outline-offset:-12px; }

/* ===== 4. cierre ===== */
.cierre{ text-align:center; padding:var(--s-9) 0 calc(var(--s-9) * 1.4); }
.cierre .wrap{ max-width:760px; }
.cierre h2{ max-width:16ch; margin-inline:auto; }
.cierre .ctas{ justify-content:center; margin-top:32px; }
.kicker.centro{ justify-content:center; }
footer{ position:relative; padding:28px 0 28px; padding-bottom:calc(28px + env(safe-area-inset-bottom)); border-top:1px solid var(--linea-2); background:rgba(0,0,0,.6); }
footer .fila{ display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; color:var(--tinta-3); font-size:var(--t-small); }
footer a{ text-decoration:none; color:var(--tinta-2); min-height:44px; display:inline-flex; align-items:center; }
footer a:hover{ color:var(--tinta); }

/* ===== tablet y celular ===== */
@media (max-width:960px){
  .hero-grid{ grid-template-columns:minmax(0,1fr); gap:64px; }   /* 1fr no baja de su contenido: a 390 px la columna medía 374 */
  .quien-grid{ grid-template-columns:1fr; gap:40px; }
  .retrato{ position:relative; top:auto; }
  .neg-grid{ grid-template-columns:1fr; gap:40px; }
  .neg-fijo{ position:relative; top:auto; }
  .creativo-grid{ grid-template-columns:1fr; gap:32px; }
}
@media (max-width:860px){
  .sec{ padding:80px 0; }
  #creativo{ padding-bottom:40px; }          /* sin hueco negro antes del cierre */
  .cierre{ padding-top:56px; }
  .frase .pw{ opacity:.38; }
  .ucard{ height:auto; min-height:300px; }    /* carta de ~350 px en vez de 480 */
  .ucard .visual{ flex:0 0 auto; height:116px; min-height:0; }
  .ucard .glifo{ font-size:5.5rem; top:8px; }
  .ucard .logo, .ucard .halo{ width:88px; height:88px; right:20px; bottom:12px; border-radius:20px; padding:10px; }
  .ucard .halo{ padding:0; }
  .ucard .cuerpo{ padding:4px 20px 20px; }
  .ucard p{ margin-bottom:14px; }
  .ucard.entrada .visual{ height:96px; }
  .equipo{ min-height:70vh; min-height:70svh; }
  .galeria{ --asomo:40px; }
  .oficio p{ font-size:var(--t-body); }
  .redes a{ font-size:1rem; }
  /* refuerzo lateral del velo: en celular las hebras corren pegadas al margen, donde el velo elíptico ya se apaga */
  .sec .lead::before, .sec .texto::before{ content:""; position:absolute; inset:-32px -20px; z-index:-1; pointer-events:none;
    background:linear-gradient(90deg,rgba(0,0,0,.8),rgba(0,0,0,0) 30%,rgba(0,0,0,0) 70%,rgba(0,0,0,.8));
    -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,1) 32px,rgba(0,0,0,1) calc(100% - 32px),rgba(0,0,0,0));
    mask-image:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,1) 32px,rgba(0,0,0,1) calc(100% - 32px),rgba(0,0,0,0)); }
  .sec .lead, .sec .texto{ position:relative; isolation:isolate; }
}
@media (max-width:700px){ .oficios{ grid-template-columns:1fr; } .velo::before{ inset:-48px -40px; } }
@media (max-width:420px){
  .hero{ padding-top:calc(var(--nav-h) + 36px); }
  .flujo{ padding:18px 16px; }
  .riel{ padding-left:24px; }
  .nodo{ padding:10px 12px; gap:10px; }
  .nodo small{ letter-spacing:0; }
  .pill{ margin-bottom:22px; }
  .ctas .btn{ flex:1 1 auto; }
}

@media (max-width:360px){   /* 320 a 360 px: la pastilla en un renglón y la dirección de cada marca entera */


  .pill{ font-size:.8125rem; gap:8px; padding-right:12px; white-space:nowrap; }
  .nodo .ir{ display:none; }
  .nodo{ padding:10px; }
}

/* ===== movimiento reducido ===== */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-delay:0ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; }
  .rv{ opacity:1; transform:none; transition:none; }
  .nav .marca:hover img{ transform:none; }
  h1.titular .wi{ transform:none; }
  .riel .paquete, .riel::after{ display:none; }
  .ucard{ transform:none !important; }
  .ucard::after{ background:transparent; }
  .ucard .glifo, .ucard .logo, .ucard .halo, .ucard .cuerpo, .ucard .luz, .retrato-marco, .retrato-marco img, .flujo, .franja .fila, .hero-salida, .galeria, .gal-tarjeta, .gal-medio img, .gal-medio video{ transform:none !important; }
  .gal-tarjeta{ opacity:1 !important; }
  .saludo .t{ opacity:1; transform:none; transition:none; }
  .hero-salida{ opacity:1 !important; }
  .frase .pw{ opacity:1; }
}
/* lo mismo con ?fondo=quieto, para verificar sin cambiar la preferencia del sistema */
body.quieto .rv{ opacity:1; transform:none; transition:none; }
body.quieto h1.titular .wi{ transform:none; animation:none; }
body.quieto h1.titular em .wi{ background-position:0 0; }
body.quieto .riel .paquete, body.quieto .riel::after{ display:none; }
body.quieto .flujo .nodo, body.quieto .riel::before{ animation:none; opacity:1; transform:none; }
body.quieto .ucard, body.quieto .ucard .glifo, body.quieto .ucard .logo, body.quieto .ucard .halo, body.quieto body.quieto .ucard .cuerpo, body.quieto .ucard .luz,
body.quieto .retrato-marco, body.quieto .retrato-marco img, body.quieto .flujo, body.quieto .franja .fila, body.quieto .hero-salida,
body.quieto .galeria, body.quieto .gal-tarjeta, body.quieto .gal-medio img, body.quieto .gal-medio video{ transform:none !important; }
body.quieto .gal-tarjeta{ opacity:1 !important; }
body.quieto .ucard::after{ background:transparent; }
body.quieto .hero-salida{ opacity:1 !important; }
body.quieto .frase .pw{ opacity:1; }
body.quieto .saludo .t{ opacity:1; transform:none; transition:none; }
body.quieto .gal-tarjeta .gal-medio img{ animation:none !important; }

/* tarjeta pendiente de confirmar: oculta salvo en el modo revisión (sin JS tampoco se ve) */
.gal-tarjeta[data-pendiente]{display:none}
html.gal-revision .gal-tarjeta[data-pendiente]{display:block}