/* ==========================================================================
   MATRIX — matrixexpansion.com
   Tono propio de la marca: noche cálida (#121110) alternada con hueso (#F2EDE7).
   Acento = naranja del logo, SÓLO en botones. El resto del naranja que se ve es
   el propio logo (el cubo) y sus ilustraciones.
   Sistema bloqueado en FASE 3. Ningún valor mágico por debajo de :root, salvo
   las medidas internas de las maquetas (celular, laptop, cartel), que son dibujo.
   ========================================================================== */

/* Tipografías (Fontshare, autoalojadas: MATRIX es la licenciataria; sin recortar, lo
   prohíbe la licencia). Aquí y no en fonts.css: un archivo bloqueante menos. */
@font-face {
  font-family: 'Michroma';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/michroma-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Clash Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/fs-clash-display-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Satoshi';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/fs-satoshi-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Satoshi';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/fs-satoshi-700.woff2') format('woff2');
}

:root{
  /* ---- color: tokens de la sección oscura (la de por defecto) ------------- */
  --bg:#121110;  --bg-2:#1B1917; --ink:#F3EEE8; --ink-mut:#A39A91;
  --line:#2B2825; --accent:#D97757; --accent-ink:#1A0F0A;
  /* sección clara (se aplican con var() en .claro) */
  --c-bg:#F2EDE7; --c-bg-2:#FBF8F5; --c-ink:#171412; --c-mut:#655C54; --c-line:#DDD4C9; --c-accent:#C8643F;
  /* la marca (el cubo): tapa, cara izquierda, cara derecha */
  --m-tapa:#F6DDD0; --m-izq:#D97757; --m-der:#C15F3C;
  color-scheme:dark;

  /* ---- espacio: escala de 8px -------------------------------------------- */
  --s-1:4px;  --s-2:8px;   --s-3:16px;  --s-4:24px;  --s-5:32px;
  --s-6:48px; --s-7:64px;  --s-8:96px;  --s-9:128px; --s-10:192px; --s-11:256px;

  /* ---- tipografía: 5 tamaños (hero y 2xl cuentan como uno), 2 familias ---- */
  --t-xs:   clamp(.75rem,  .72rem + .12vw, .8125rem);
  --t-sm:   clamp(.875rem, .85rem + .15vw, .9375rem);
  --t-base: clamp(1rem,    .96rem + .22vw, 1.1875rem);
  --t-lg:   clamp(1.1875rem, 1.08rem + .5vw, 1.5rem);
  --t-xl:   clamp(1.75rem, 1.3rem + 2vw, 3rem);
  --t-2xl:  clamp(2.25rem, 1.45rem + 3.5vw, 4.75rem);
  --t-hero: clamp(3.125rem, 1.2rem + 5.3vw, 6.75rem);

  --f-display: 'Clash Display', 'Satoshi', system-ui, sans-serif;
  --f-body:    'Satoshi', system-ui, sans-serif;
  --w-display: 600;

  /* ---- movimiento: preciso con peso -------------------------------------- */
  --ease:    cubic-bezier(.16,1,.3,1);
  --ease-ui: cubic-bezier(.4,0,.2,1);
  --dur-in:  .8s;
  --dist-in: 28px;

  /* ---- layout ------------------------------------------------------------ */
  --gutter: clamp(1.25rem, 5vw, 6rem);
  --maxw:   1440px;
  --radius: 14px;           /* un solo lenguaje de radio: tarjetas y botones */
  --sec-y:  clamp(4.5rem, 8vw, 9rem);
  --top-h:  72px;
  --scrim:  rgb(10 9 8/.84);
  --sombra: 0 1px 2px hsl(20 30% 4% / .2), 0 10px 24px hsl(20 30% 4% / .22), 0 36px 72px hsl(20 30% 4% / .28);
}

/* La sección clara: mismos nombres, otros valores. Todo lo que cuelga de los
   tokens cambia solo. */
.claro{
  --bg:var(--c-bg); --bg-2:var(--c-bg-2); --ink:var(--c-ink); --ink-mut:var(--c-mut);
  --line:var(--c-line); --accent:var(--c-accent);
  --sombra: 0 1px 2px hsl(25 30% 20% / .06), 0 10px 24px hsl(25 30% 20% / .08), 0 36px 72px hsl(25 30% 20% / .12);
  background:var(--bg); color:var(--ink); color-scheme:light;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip;
  scroll-padding-top:var(--top-h); }

body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-size:var(--t-base); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
}

img,video,svg{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }
p{ margin:0; max-width:65ch; text-wrap:pretty; }
button{ font:inherit; color:inherit; }
b, strong{ font-family:var(--f-display); font-weight:600; letter-spacing:.005em; }
.panel b, .panel strong{ font-family:var(--f-body); font-weight:700; letter-spacing:0; }
::selection{ background:#F6DDD0; color:#121110; }

h1,h2,h3{
  font-family:var(--f-display); font-weight:var(--w-display); margin:0;
  letter-spacing:-.02em; line-height:.98; text-wrap:balance;
}
h2{ font-size:var(--t-2xl); }
h3{ font-size:var(--t-xl); letter-spacing:-.015em; line-height:1.04; }

.eyebrow{ font-size:var(--t-xs); font-weight:400; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mut); }
/* Detalle de firma de UI: la línea que se ensancha del logo, bajo el antetítulo */
/* la línea sola, sin rótulo encima (20-10-2026: el antetítulo en serie es huella de IA) */
.linea--sola{ display:block; margin-bottom:var(--s-4); }
.linea--sola::after{ margin-top:0; }
.linea::after{ content:""; display:block; width:72px; height:3px; margin-top:var(--s-3);
  background:currentColor; opacity:.55; clip-path:polygon(0 44%, 100% 0, 100% 100%, 0 56%); }
.lead{ font-size:var(--t-lg); line-height:1.45; color:var(--ink-mut); }
.num{ font-variant-numeric:tabular-nums; }
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.sec{ padding-block:var(--sec-y); }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

.skip{ position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--accent); color:var(--accent-ink); padding:var(--s-3) var(--s-4); }
.skip:focus{ left:0; }

:where(a,button,summary,input,select,textarea):focus-visible{
  outline:3px solid var(--accent); outline-offset:3px;
}

/* ---- CTA: el único sitio del acento (regla dura 13) ----------------------- */
.cta{ position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  min-height:52px; padding:var(--s-3) var(--s-5); border:0; border-radius:var(--radius); cursor:pointer;
  background:var(--accent); color:var(--accent-ink); font-family:var(--f-display); font-weight:600; font-size:var(--t-base); line-height:1.2;
  text-decoration:none; transition:transform .22s var(--ease-ui); }
.cta svg{ width:20px; height:20px; flex:none; }
.cta{ isolation:isolate; }
.cta::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  background:color-mix(in srgb, var(--accent) 72%, #fff); transform:translateY(101%);
  transition:transform .55s var(--ease); }
.cta svg{ transition:transform .45s var(--ease); }
.cta:active{ transform:scale(.97); transition-duration:.08s; }
.cta--sm{ min-height:44px; padding:var(--s-2) var(--s-4); font-size:var(--t-sm); }
.cta--sm svg{ width:18px; height:18px; }
@media (hover:hover){ .cta:hover{ transform:translateY(-2px); } .cta:hover::before{ transform:none; }
  .cta:hover svg{ transform:translateX(2px) rotate(-10deg) scale(1.08); } }

.link{ position:relative; display:inline-flex; align-items:center; gap:var(--s-1); min-height:44px;
  text-decoration:none; font-weight:400; }
.link::after{ content:""; position:absolute; left:0; right:0; bottom:9px; height:1px; background:currentColor;
  transform-origin:0 50%; transition:transform .35s var(--ease); }
.link__ico{ width:18px; height:18px; }
@media (hover:hover){ .link:hover::after{ transform:scaleX(.35); } }

.riesgo{ font-size:var(--t-sm); color:var(--ink-mut); margin-top:var(--s-3); }
.acciones{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-3) var(--s-5); margin-top:var(--s-6); }

/* Botón que abre un panel: un anuncio, no una etiqueta */
.opener{ display:inline-flex; align-items:center; gap:var(--s-2); min-height:44px; padding:var(--s-2) var(--s-4);
  border:1px solid var(--line); border-radius:var(--radius); background:color-mix(in srgb, var(--ink) 4%, transparent);
  font-weight:400; font-size:var(--t-sm); cursor:pointer; transition:background .25s var(--ease-ui), border-color .25s var(--ease-ui); }
.opener svg{ width:16px; height:16px; transition:transform .35s var(--ease); }
@media (hover:hover){ .opener:hover{ border-color:color-mix(in srgb, var(--ink) 40%, transparent); }
  .opener:hover svg{ transform:rotate(90deg); } }

/* Lo que se anima en bucle se congela mientras su sección no se ve (main.js) */
.pausa, .pausa *, .pausa *::before, .pausa *::after{ animation-play-state:paused !important; }
.lejos{ content-visibility:auto; contain-intrinsic-size:auto 900px; }

/* ---- cabecera ------------------------------------------------------------- */
.top{ position:fixed; inset:0 0 auto; z-index:100;
  height:calc(var(--top-h) + env(safe-area-inset-top, 0px)); padding-top:env(safe-area-inset-top, 0px);
  background:color-mix(in srgb, #121110 82%, transparent); backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid rgb(255 255 255/.06); color:#F3EEE8;
  transition:transform .45s var(--ease); }
.top.oculta{ transform:translateY(-100%); }
.top__in{ height:100%; display:flex; align-items:center; gap:var(--s-5); }
.brand{ display:flex; align-items:center; gap:var(--s-3); min-height:44px; text-decoration:none; margin-right:auto; }
/* a 34 px el contorno del logo (33 u) quedaba en medio píxel y se veía cortado: aquí va a 72 u */
.brand__cubo{ width:auto; height:34px; --trazo:72; }
.marca{ font-family:'Michroma', var(--f-body); font-size:15px; letter-spacing:.3em; line-height:1; white-space:nowrap; }
.marca__x, .marca__e{ color:var(--m-izq); }
.top--claro .marca__x, .top--claro-inm .marca__x{ color:var(--m-der); }
.nav{ display:flex; gap:var(--s-5); font-size:var(--t-sm); }
.nav a{ text-decoration:none; color:#C9C0B7; transition:color .2s var(--ease-ui); }
.nav a:hover{ color:#F3EEE8; }
@media (max-width:1079px){ .nav{ display:none; } }
@media (max-width:719px){ .top{ background:#121110; backdrop-filter:none; }
  .top .cta--sm{ padding-inline:var(--s-3); } }


/* ==========================================================================
   1 · HERO — la caja de estudio (render de Blender en capas) y la inmersión
   cine.js fija el hero y escribe --inm (0→1); main.js escribe --mx/--my (ratón).
   ========================================================================== */
.hero{ --mx:0; --my:0; position:relative; height:100svh; min-height:560px; overflow:hidden; isolation:isolate;
  /* sin halo de color detrás de la caja: la luz la da el render (16-huellas.md §1) */
  background:radial-gradient(90% 70% at 50% 120%, hsl(18 40% 20% / .35), transparent 70%), var(--bg); }
/* la pista de la inmersión (cine.css): el hero va sticky dentro; nada se mueve en el DOM al cargar */
html.js .inm-pista{ height:calc(100svh + var(--largo, 110) * 1svh); }
html.js .inm-pista > [data-cine="inmersion"]{ position:sticky; top:0; }
@media (prefers-reduced-motion: reduce){ html.js .inm-pista{ height:auto; } html.js .inm-pista > [data-cine="inmersion"]{ position:relative; } }
.hero__fondo{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 50%, transparent 55%, rgb(0 0 0/.55)); }
.hero__caja{ position:absolute; z-index:1; top:50%; right:max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  width:min(46vw, 760px); aspect-ratio:1; translate:0 -50%; pointer-events:none;
  transform-origin:49% 43%;                                   /* la boca de la caja: ahí entra la cámara */
  transform:scale(calc(1 + var(--inm, 0) * var(--inm, 0) * 9)); }
.capa{ position:absolute; inset:0; width:100%; height:100%; }
/* tapa y piezas van recortadas a su contenido (hero.json): se colocan con left/top/width en % */
.capa--tapa, .capa--piezas{ inset:auto; height:auto; }
.capa--caja{ transform:translate(calc(var(--mx) * -10px), calc(var(--my) * -7px)); }
.capa--tapa{ transform:translate(calc(var(--mx) * -26px), calc(var(--my) * -18px - var(--inm, 0) * 60vh)) rotate(calc(var(--inm, 0) * -26deg));
  opacity:clamp(0, 1 - var(--inm, 0) * 1.8, 1); animation:flota 6s ease-in-out infinite; }
.capa--piezas{ transform:translate(calc(var(--mx) * -44px), calc(var(--my) * -30px)) scale(calc(1 + var(--inm, 0) * 1.8));
  opacity:clamp(0, 1 - var(--inm, 0) * 1.5, 1); animation:flota 8s ease-in-out -3s infinite; }
.capa--luz{ background:radial-gradient(circle at 49% 43%, rgb(255 226 204/.95) 0, rgb(255 178 132/.55) 7%, transparent 21%);
  mix-blend-mode:screen; opacity:clamp(0, (var(--inm, 0) - .12) * 2.4, 1); }
@keyframes flota{ 50%{ translate:0 -10px; } }

.hero__txt{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:center;
  padding-top:var(--top-h); opacity:clamp(0, 1 - var(--inm, 0) * 3.2, 1); transform:translateY(calc(var(--inm, 0) * -90px)); }
/* «por WhatsApp.» mide 7,6 em: en el celular la letra se ajusta al ancho para quedarse en 2 líneas */
/* el titular también se ajusta al ALTO: en ventanas bajas (1098×496) el botón quedaba cortado (22-10-2026) */
.hero h1{ font-size:min(var(--t-hero), calc((100vw - 2 * var(--gutter)) / 7), 15svh); line-height:.95; letter-spacing:-.012em; max-width:13ch; }
.hero.inm-dentro .hero__txt{ visibility:hidden; }
.h1__b{ color:var(--m-tapa); }
.exp{ color:var(--m-izq); }
.hero .lead{ margin-top:clamp(var(--s-3), 4svh, var(--s-5)); max-width:30ch; color:#CFC6BD; }
.hero .acciones{ margin-top:clamp(var(--s-4), 5.5svh, var(--s-6)); }
.inm__luz{ position:absolute; inset:0; z-index:4; pointer-events:none;
  background:radial-gradient(80% 80% at 66% 50%, #FFF6EF, #F3EAE1 72%);
  opacity:clamp(0, (var(--inm, 0) - .62) * 3.4, 1); visibility:hidden; }
/* la luz sólo existe ya dentro de la caja: antes no tapa el titular ni sus botones */
.hero.inm-dentro .inm__luz{ visibility:visible; }

@media (max-width:899px){
  .hero__caja{ top:auto; bottom:-7svh; right:50%; translate:50% 0; width:min(96vw, 42svh); }
  .hero__txt{ justify-content:flex-start; padding-top:calc(var(--top-h) + var(--s-5)); }
  .hero h1{ max-width:none; }
}
/* tableta: la caja cierra el margen derecho (el texto ocupa la izquierda; centrada, la página se veía descentrada) */
@media (min-width:720px) and (max-width:899px){
  .hero__caja{ right:var(--gutter); translate:none; width:min(64vw, 46svh); }
}

/* ==========================================================================
   2 · EL MUNDO — el barrio dentro de la caja (mundo.js). Escenario fijo (sticky)
   y escenas que pasan por encima. Sin JS: cada escena se lee y el póster base queda.
   ========================================================================== */
.mundo{ --mundo-bg:#EFE7DD; position:relative; color:#171412;
  --bg:var(--c-bg); --bg-2:var(--c-bg-2); --ink:var(--c-ink); --ink-mut:var(--c-mut); --line:var(--c-line); --accent:var(--c-accent);
  background:radial-gradient(70% 60% at 62% 45%, #F7F1EA, var(--mundo-bg) 70%); color-scheme:light; }
.mundo::before{ content:""; position:absolute; z-index:3; top:0; left:0; right:0; height:120svh; pointer-events:none;
  background:linear-gradient(180deg, #F3EAE1 0%, #F3EAE1 22%, rgb(243 234 225/0) 100%); }
/* El escenario NO lleva margen negativo (se desbordaba 100 % de pantalla sobre la sección
   siguiente): es la primera escena la que sube para pasar por encima de él. */
.mundo__escenario{ position:sticky; top:0; z-index:0; height:100svh; overflow:hidden; }
.mundo__escenario::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgb(239 231 221/.95) 0%, rgb(239 231 221/.86) 38%, rgb(239 231 221/0) 60%); }
.mundo__poster, .mundo__lienzo{ position:absolute; inset:0; width:100%; height:100%; }
.mundo__poster{ object-fit:cover; opacity:0; transition:opacity .9s var(--ease); }
.mundo__poster.on{ opacity:1; }
.mundo__lienzo{ opacity:0; transition:opacity 1.4s var(--ease); }
.mundo--vivo .mundo__lienzo{ opacity:1; }
.mundo--vivo .mundo__poster{ opacity:0; }
html:not(.js) .mundo__poster[data-estacion="6"]{ opacity:1; }

.mundo__escena{ position:relative; z-index:2; min-height:100svh; display:flex; align-items:center;
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); pointer-events:none; }
.mundo__escena:first-of-type{ margin-top:-30svh; }           /* = 70svh por debajo del escenario: la llegada se ve desde arriba */
.mundo__texto{ max-width:34rem; pointer-events:auto; }
/* cada pieza del texto entra por su cuenta, escalonada (titular, frase, botón); al salir, todas a la vez */
.mundo__texto > *{ transition:opacity .8s var(--ease), transform .8s var(--ease); }
.mundo__escena.activa .mundo__texto > :nth-child(2){ transition-delay:.08s; }
.mundo__escena.activa .mundo__texto > :nth-child(3){ transition-delay:.16s; }
html.js .mundo__escena:not(.activa) .mundo__texto > *{ opacity:0; transform:translateY(28px); }
/* 8,4 em: dos líneas como mucho y lejos del objeto 3D de la derecha (medido con la letra real) */
.mundo__texto h2{ font-size:clamp(2.25rem, 1.4rem + 2.6vw, 3.75rem); text-wrap:balance; max-width:8.4em; }
.mundo__texto > p:not(.eyebrow){ margin-top:var(--s-4); font-size:var(--t-lg); line-height:1.45; color:#4A423B; max-width:30ch; }
.mundo__texto .opener{ margin-top:var(--s-5); }
.mundo__lista{ list-style:none; margin:var(--s-4) 0 0; padding:0; display:grid; gap:var(--s-3); max-width:30rem; }
.mundo__lista li{ display:grid; grid-template-columns:8.5rem 1fr; gap:var(--s-3); align-items:baseline;
  padding-top:var(--s-3); border-top:1px solid rgb(23 20 18/.12); }
.mundo__lista b{ font-family:var(--f-display); font-weight:600; font-size:var(--t-lg); color:#171412; }
.mundo__lista span{ color:#4A423B; line-height:1.4; }
@media (min-width:900px){
  .mundo__texto:has(.mundo__lista--grande){ max-width:36rem; }
  .mundo__lista--grande{ max-width:none; gap:var(--s-4); }
  /* nombre y frase en el mismo párrafo: letra grande sin que el bloque crezca hasta el menú de escenas */
  .mundo__lista--grande li{ display:block; font-size:var(--t-lg); line-height:1.35; }
  .mundo__lista--grande b{ margin-right:.35em; }
}
/* en el celular la lista se vuelve una fila de nombres: el detalle está en el panel y el texto no pisa el objeto */
@media (max-width:899px){ .mundo__lista{ display:flex; flex-wrap:wrap; gap:6px; margin-top:var(--s-3); }
  .mundo__lista li{ display:block; padding:6px 12px; border:1px solid rgb(23 20 18/.16); border-radius:99px; background:rgb(255 255 255/.55); }
  .mundo__lista b{ font-family:var(--f-body); font-weight:700; font-size:var(--t-sm); } .mundo__lista span{ display:none; } }
.mundo .eyebrow{ color:#6B625A; }
.mundo .opener{ background:rgb(255 255 255/.55); border-color:#D5CABE; }
.mundo__escena:last-of-type{ min-height:120svh; }

@media (max-width:899px){
  .mundo__escenario::after{ background:linear-gradient(0deg, rgb(239 231 221/.97) 0%, rgb(239 231 221/.75) 30%, rgb(239 231 221/0) 56%); }
  .mundo__escena{ align-items:flex-end; padding-bottom:calc(var(--s-7) + 64px); }
  .mundo__texto h2{ font-size:clamp(2rem, 1.4rem + 3vw, 2.6rem); }
  .mundo__texto > p:not(.eyebrow){ font-size:var(--t-base); }
}

/* ---- pie: el cierre ------------------------------------------------------- */
.pie{ padding-block:var(--sec-y) var(--s-6); background:var(--bg);
  font-size:var(--t-sm); color:var(--ink-mut); }
.pie__in{ display:grid; gap:var(--s-7); }
@media (min-width:900px){
  .pie__in{ grid-template-columns:minmax(0,1fr) auto; column-gap:var(--s-8); }
  .pie__cierre{ align-self:center; }
  .pie__marca{ justify-self:end; align-self:center; }
  .pie__datos, .pie__legal{ grid-column:1 / -1; }
}
/* el logo vertical, como el oficial: el cubo arriba, MATRIX, la raya y el lema (Mateo, 22-10-2026) */
.pie__marca{ display:flex; flex-direction:column; align-items:center; gap:clamp(var(--s-4), 1rem + 1vw, var(--s-5)); color:var(--ink); }
.pie__cubo{ width:auto; height:clamp(120px, 6rem + 5vw, 190px); --trazo:36; flex:none; }
/* como el logo: MATRIX se reparte a lo ancho de la raya y del eslogan; el eslogan marca el ancho */
.pie__letras{ display:grid; gap:clamp(10px, .4rem + .5vw, 16px); width:max-content; }
.pie__nombre{ display:flex; justify-content:space-between; font-family:'Michroma', var(--f-body);
  font-size:clamp(1.75rem, 1.1rem + 2.4vw, 3.25rem); line-height:1; }
.pie__nombre i{ font-style:normal; }
.pie__raya{ height:clamp(4px, .2rem + .25vw, 7px); background:var(--m-izq); clip-path:polygon(0 45%, 100% 0, 100% 100%, 0 55%); }
.pie__eslogan{ font-family:'Michroma', var(--f-body); font-size:clamp(.625rem, .5rem + .45vw, 1rem); letter-spacing:.34em;
  margin-right:-.34em; color:#A39A91; white-space:nowrap; }
.pie__eslogan .marca__e{ color:var(--m-izq); }
@media (max-width:719px){ .pie__marca{ gap:var(--s-4); } .pie__cubo{ height:120px; } .pie__nombre{ font-size:2.25rem; } .pie__eslogan{ font-size:10px; letter-spacing:.24em; margin-right:-.24em; } }
.pie__lema{ margin-top:var(--s-5); font-family:var(--f-display); font-weight:600; font-size:var(--t-hero); line-height:.95;
  letter-spacing:-.012em; color:var(--ink); max-width:14ch; text-wrap:balance; }
.pie__datos{ display:grid; grid-template-columns:repeat(3, auto); justify-content:start; gap:var(--s-5) var(--s-8); margin:0;
  padding-top:var(--s-5); border-top:1px solid var(--line); }
.pie__datos dt{ font-size:var(--t-sm); color:var(--ink-mut); }
.pie__datos dd{ margin:var(--s-1) 0 0; color:var(--ink); }
.pie__datos a{ display:inline-flex; align-items:center; min-height:44px; text-decoration:underline; text-underline-offset:4px; }
.pie__legal{ max-width:none; }
@media (max-width:899px){ .pie__datos{ grid-template-columns:1fr 1fr; } .pie__datos div:first-child{ grid-column:1 / -1; } }


/* ---- reducir movimiento: sólo se apaga lo intrusivo ---------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .capa--tapa, .capa--piezas{ animation:none; }
  html.js .mundo__escena:not(.activa) .mundo__texto > *{ opacity:1; transform:none; }
}

/* ==========================================================================
   7 · ARMA TU SISTEMA
   ========================================================================== */
.arma{ background:var(--bg); }
.arma__in{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:var(--s-8); align-items:center; }
.arma h2{ margin-top:var(--s-4); }
.arma .lead{ margin-top:var(--s-4); max-width:42ch; }
.arma__form{ margin-top:var(--s-6); }
.arma fieldset{ display:flex; flex-wrap:wrap; gap:var(--s-2); margin:0; padding:0; border:0; }
.chip{ position:relative; cursor:pointer; }
.chip input{ position:absolute; width:1px; height:1px; opacity:0; }
.chip span{ display:inline-flex; align-items:center; gap:var(--s-2); min-height:44px; padding:var(--s-2) var(--s-4);
  border:1px solid var(--line); border-radius:99px; font-weight:400; font-size:var(--t-sm);
  transition:background .25s var(--ease-ui), color .25s var(--ease-ui), border-color .25s var(--ease-ui); }
.chip span::before{ content:""; width:14px; height:14px; border-radius:50%; border:1.5px solid currentColor; opacity:.6;
  transition:background .25s, border-color .25s, opacity .25s; }
.chip input:checked + span{ background:#F3EEE8; color:#121110; border-color:#F3EEE8; }
.chip input:checked + span::before{ opacity:1; background:#121110 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 10.5 3.2 3.2L15 7' fill='none' stroke='%23F3EEE8' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/100% no-repeat; border-color:#121110; }
.chip input:focus-visible + span{ outline:3px solid var(--accent); outline-offset:3px; }
@media (hover:hover){ .chip:hover span{ border-color:color-mix(in srgb, var(--ink) 45%, transparent); } }
.campo{ display:grid; gap:var(--s-2); margin-top:var(--s-5); max-width:440px; font-size:var(--t-sm); color:var(--ink-mut); }
.campo small{ font-size:var(--t-xs); }
.campo input{ min-height:52px; padding:0 var(--s-3); border-radius:var(--radius); border:1px solid var(--line);
  background:var(--bg-2); color:var(--ink); font:inherit; font-size:var(--t-base); }
.campo input::placeholder{ color:#A69C93; }   /* 6,3:1 sobre el campo (era 3,8:1) */
.arma__form .cta{ margin-top:var(--s-5); }

.arma__arte{ display:grid; justify-items:center; gap:var(--s-4); }
.pila3{ position:relative; width:min(280px, 64vw); aspect-ratio:1/1.65; }
.pila3__base, .pila3__capa{ position:absolute; left:0; width:100%; aspect-ratio:96/64; background-size:100% 100%; }
.pila3__base{ bottom:-2%; opacity:.9;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 64'%3E%3Cg fill='none' stroke='%233A3531' stroke-width='.8' stroke-dasharray='2 2'%3E%3Cpath d='M48 2 94 24 48 46 2 24Z'/%3E%3C/g%3E%3C/svg%3E"); }
.pila3__capa{ --on:0; bottom:calc(var(--i) * 9.8%); z-index:calc(var(--i) + 1 + var(--on) * 10); }
.pila3__capa::before, .pila3__capa::after{ content:""; position:absolute; inset:0; background-size:100% 100%; }
.pila3__capa::before{ opacity:calc(1 - var(--on));
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 64'%3E%3Cg fill='none' stroke='%234A433D' stroke-width='.9' stroke-dasharray='2.5 2'%3E%3Cpath d='M48 2 94 24 48 46 2 24Z'/%3E%3Cpath d='M2 24v16l46 22 46-22V24M48 46v16'/%3E%3C/g%3E%3C/svg%3E"); }
.pila3__capa::after{ opacity:var(--on); transform:translateY(calc((1 - var(--on)) * -36px)) scale(calc(.94 + var(--on) * .06));
  transition:opacity .45s var(--ease-ui), transform .7s var(--ease);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 64'%3E%3Cpath fill='%23F6DDD0' d='M48 2 94 24 48 46 2 24Z'/%3E%3Cpath fill='%23D97757' d='M2 24 48 46v16L2 40Z'/%3E%3Cpath fill='%23C15F3C' d='M48 46 94 24v16L48 62Z'/%3E%3C/svg%3E"); }
.arma:has(input[value="aparecer en Google Maps"]:checked) .pila3__capa[data-s="aparecer en Google Maps"],
.arma:has(input[value="una página web"]:checked) .pila3__capa[data-s="una página web"],
.arma:has(input[value="un menú digital"]:checked) .pila3__capa[data-s="un menú digital"],
.arma:has(input[value="una web de citas"]:checked) .pila3__capa[data-s="una web de citas"],
.arma:has(input[value="tarjetas NFC con QR"]:checked) .pila3__capa[data-s="tarjetas NFC con QR"],
.arma:has(input[value="una app para mi negocio"]:checked) .pila3__capa[data-s="una app para mi negocio"],
.arma:has(input[value="un agente de IA para mis mensajes"]:checked) .pila3__capa[data-s="un agente de IA para mis mensajes"]{ --on:1; }
.arma__cuenta{ font-size:var(--t-sm); color:var(--ink-mut); }
@media (max-width:719px){ .arma__in{ grid-template-columns:1fr; gap:var(--s-6); }
  .pila3{ width:min(150px, 42vw); } }


/* ---- barra de acción fija en móvil ----------------------------------------- */
.barra-movil{ display:none; }
@media (max-width:719px){
  .barra-movil{ display:flex; gap:var(--s-2); position:fixed; inset:auto 0 0; z-index:90;
    padding:var(--s-2) var(--s-3) calc(var(--s-2) + env(safe-area-inset-bottom));
    background:#121110; border-top:1px solid #2B2825;
    transform:translateY(110%); transition:transform .4s var(--ease); }
  .barra-movil .cta{ flex:1; }
  .barra-movil.on{ transform:none; }
  body{ padding-bottom:72px; }
}

/* ---- movimiento base (lo lee scroll.js) --------------------------------- */
[data-reveal]{ opacity:0; transform:translateY(var(--dist-in)); }
[data-reveal].in{ opacity:1; transform:none;
  transition:opacity var(--dur-in) var(--ease), transform var(--dur-in) var(--ease); }
html:not(.js) [data-reveal]{ opacity:1; transform:none; }
[data-scroll]{ --p:0; --p-eased:0; }

html:not(.js) [data-scroll],
html:not(.js) [data-scroll] *{
  opacity:1 !important; transform:none !important; clip-path:none !important; }

/* ---- capa de profundidad (la activa panel.js; sin JS son secciones) ------ */
html.panels .panel{ position:fixed; inset:0; z-index:150; overflow-y:auto;
  overscroll-behavior:contain; background:rgb(10 9 8/0); backdrop-filter:blur(0);
  transition:background .38s var(--ease-ui), backdrop-filter .38s var(--ease-ui); }
html.panels .panel[hidden]{ display:none; }
html.panels .panel:not(.is-open){ pointer-events:none; }
html.panels .panel.is-open{ background:var(--scrim); backdrop-filter:blur(10px); }
@media (max-width:719px){ html.panels .panel, html.panels .panel.is-open{ backdrop-filter:none; } }
.panel{ padding-block:var(--s-6); border-top:1px solid var(--line); content-visibility:auto; contain-intrinsic-size:auto 1400px; }
html.panels .panel{ padding-block:0; border:0; }
.panel__sheet{ max-width:min(860px,100%); margin-inline:auto; }
html.panels .panel__sheet{ min-height:100%; padding-block:0 var(--s-9); background:var(--bg-2);
  opacity:0; transform:translateY(26px) scale(.985);
  transition:opacity .34s var(--ease-ui), transform .42s var(--ease); }
@media (min-width:880px){ html.panels .panel__sheet{ min-height:calc(100% - var(--s-7)); margin-top:var(--s-7); border-radius:var(--radius) var(--radius) 0 0; } }
html.panels .panel.is-open .panel__sheet{ opacity:1; transform:none; }
.panel__body{ padding-inline:var(--gutter); }
@media (min-width:880px){ .panel__body{ padding-inline:var(--s-8); } }
.panel__body > * + *{ margin-top:var(--s-5); }
.panel__body > p + p{ margin-top:var(--s-3); }
.panel__body h2{ font-size:var(--t-xl); max-width:20ch; }
.panel__body h3{ font-size:var(--t-lg); }
.panel__body .cta{ margin-top:var(--s-6); }
.panel__bar{ display:none; }
html.panels .panel__bar{ display:flex; justify-content:flex-end; position:sticky; top:0; z-index:3;
  padding:var(--s-3) var(--gutter); margin-bottom:var(--s-5);
  background:var(--bg-2); border-bottom:1px solid var(--line); border-radius:inherit; }
.panel__close{ font:inherit; font-size:var(--t-sm); background:none; border:1px solid var(--line); color:inherit;
  min-height:44px; padding-inline:var(--s-4); cursor:pointer; border-radius:var(--radius); }
html.panel-open{ overflow-y:hidden; }

.incluye{ display:grid; gap:var(--s-3); }
.incluye li{ display:grid; grid-template-columns:24px 1fr; gap:var(--s-3); align-items:start; color:var(--ink-mut); }
.incluye svg{ width:22px; height:22px; margin-top:2px; color:var(--m-tapa); }
.incluye b{ color:var(--ink); font-weight:700; }
.panel__foto{ margin-inline:0; }
.panel__foto img{ width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top; border-radius:var(--radius); }
.panel__foto figcaption{ margin-top:var(--s-2); font-size:var(--t-xs); color:var(--ink-mut); }
.panel__dos{ display:flex; justify-content:center; gap:var(--s-4); }
.panel__tel{ margin:0; width:min(240px, 44%); }
.panel__tel img{ width:100%; border-radius:22px; border:6px solid #0E0D0C; }
.disenos{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--s-4) var(--s-3); }
.disenos li{ display:grid; align-content:start; gap:var(--s-1); font-size:var(--t-sm); color:var(--ink-mut); line-height:1.45; }
.disenos img{ margin-bottom:var(--s-2); }
.disenos b{ color:var(--ink); font-size:var(--t-base); }
.disenos img{ width:100%; border-radius:4.5% / 7%; box-shadow:0 10px 24px rgb(0 0 0/.3); }
@media (min-width:640px){ .disenos{ grid-template-columns:repeat(3, minmax(0,1fr)); } }

/* ==========================================================================
   Cine (cine.js) — base de la skill. SIN JS todo se lee entero y en orden.
   ========================================================================== */
html.cine-pendiente [data-cine="titular"]{ visibility:hidden; animation:cine-velo 0s 2.5s forwards; }
@keyframes cine-velo{ to{ visibility:visible; } }

[data-cine="titular-hero"]{ animation:cine-hero 1.25s var(--ease) .08s both; }
@keyframes cine-hero{ from{ opacity:.01; transform:translateY(.45em); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ [data-cine="titular-hero"]{ animation:none; } }

[data-cine="capitulo"]{ position:relative; }
html.cine [data-cine="capitulo"] .cap__pasos{ display:grid; min-height:100svh; align-items:center; }
html.cine [data-cine="capitulo"] [data-paso]{ grid-area:1 / 1; }
[data-paso-img]{ will-change:transform; }
[data-cine="capitulo"] [data-paso] + [data-paso]{ margin-top:var(--s-6); }
html.cine [data-cine="capitulo"] [data-paso] + [data-paso]{ margin-top:0; }

[data-cine="horizontal"]{ position:relative; }
.hz__pista{ display:flex; gap:var(--s-4); overflow-x:auto; overscroll-behavior-x:contain;
  padding-inline:var(--gutter); scrollbar-width:none; cursor:grab; }
.hz__pista::-webkit-scrollbar{ display:none; }
.hz__pista > *{ flex:0 0 min(80vw, 34rem); }
.hz-arrastrando .hz__pista{ cursor:grabbing; user-select:none; }
.hz__pista img{ -webkit-user-drag:none; }
.hz__mandos{ display:flex; align-items:center; gap:var(--s-2); padding:var(--s-4) var(--gutter) 0; }
.hz__avance{ flex:1; height:2px; background:color-mix(in srgb, currentColor 15%, transparent); overflow:hidden; }
.hz__avance span{ display:block; height:100%; background:currentColor; transform-origin:0 50%;
  transform:scaleX(.08); transition:transform .25s var(--ease-ui); }
.hz__flecha{ width:48px; height:48px; border-radius:50%; border:1px solid color-mix(in srgb, currentColor 30%, transparent);
  background:none; color:inherit; font-size:1.1rem; cursor:pointer; transition:opacity .2s var(--ease-ui), transform .2s var(--ease-ui); }
.hz__flecha:hover:not(:disabled){ transform:scale(1.06); }
.hz__flecha:disabled{ opacity:.3; cursor:default; }
.hz-sin-recorrido .hz__mandos{ display:none; }

/* Sin el capítulo fijado (sin JS o con «reducir movimiento»): los pasos van seguidos,
   así que cada maqueta ocupa sólo lo que mide. */
html:not(.cine) .paso__arte{ min-height:0; padding-block:var(--s-5); }
/* ---- inmersión: escena fijada; la web decide qué hace con --inm (0→1) ------ */
[data-cine="inmersion"]{ --inm:0; }

/* ---- capas: la sección que cubre a la anterior, como una hoja encima ------- */
.capa-encima{ position:relative; z-index:2; border-radius:clamp(20px, 3vw, 36px) clamp(20px, 3vw, 36px) 0 0;
  box-shadow:0 -24px 60px rgb(0 0 0/.22); }
.capa__velo{ position:absolute; inset:0; z-index:5; background:#000; opacity:0; pointer-events:none; }
[data-cine="capa"]{ position:relative; will-change:transform; }   /* sin esto, la fluidez caía del 12 al 22 % (medido) */

/* ---- lectura: la palabra apagada nunca baja de 3:1 (texto grande) --------- */
[data-cine="leer"]{ --leer-apagado:color-mix(in srgb, currentColor 58%, var(--bg)); }

/* ---- objeto 3D (tres.js): el lienzo entra encima del respaldo -------------- */
[data-3d]{ position:relative; }
.tres__lienzo{ position:absolute; inset:0; width:100%; height:100%; opacity:0; pointer-events:none;
  transition:opacity .9s var(--ease); }
.tres-listo > .tres__lienzo{ opacity:1; }

/* ---- paneles que crecen desde su botón (panel.js + View Transitions) ------- */
.vt .panel, .vt .panel__sheet{ transition:none !important; }
::view-transition-group(panel-hoja){ animation-duration:.6s; animation-timing-function:cubic-bezier(.16,1,.3,1); }
::view-transition-image-pair(panel-hoja){ border-radius:var(--radius, 14px); overflow:hidden; }
::view-transition-old(panel-hoja){ animation:vt-fuera .22s ease both; }
::view-transition-new(panel-hoja){ height:100%; object-fit:cover; object-position:top; animation:vt-dentro .4s .1s ease both; }
::view-transition-old(root), ::view-transition-new(root){ animation-duration:.45s; }
@keyframes vt-fuera{ to{ opacity:0; } }
@keyframes vt-dentro{ from{ opacity:0; } }


.capa-encima{ box-shadow:0 -30px 70px rgb(0 0 0/.35); }
body{ background:#0B0A09; }

/* la cabecera sobre una sección clara */
.top{ transition:transform .45s var(--ease), background-color .4s var(--ease-ui), color .4s var(--ease-ui), border-color .4s var(--ease-ui); }
.top--claro, .top--claro-inm{ background:color-mix(in srgb, #F3EEE8 84%, transparent); color:#171412; border-bottom-color:rgb(23 20 18/.08); }
.top--claro .nav a, .top--claro-inm .nav a{ color:#5A5149; }
.top--claro .nav a:hover, .top--claro-inm .nav a:hover{ color:#171412; }
@media (max-width:719px){ .top--claro, .top--claro-inm{ background:#F3EEE8; } }

/* el mapa de estaciones del mundo (como el HUD de un juego): fijo a la derecha mientras se recorre */
/* alto 0 y la píldora crece HACIA ARRIBA (flex-end): al acabarse el mundo se va con él y no se monta en la sección siguiente */
.mundo__mapa{ position:sticky; top:calc(100svh - 28px); z-index:3; height:0; display:flex; justify-content:center; align-items:flex-end;
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); pointer-events:none; }
.mundo__mapa ol{ display:flex; gap:var(--s-1); padding:var(--s-1); border-radius:99px; background:rgb(255 255 255/.45); backdrop-filter:blur(8px); pointer-events:auto; }
.mundo__mapa button{ display:flex; align-items:center; gap:var(--s-2); min-height:40px; padding:0 var(--s-3); border:0; border-radius:99px;
  background:none; color:#7A7067; font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase; cursor:pointer;
  transition:color .3s var(--ease-ui), background-color .3s var(--ease-ui); }
.mundo__mapa button::before{ content:""; width:14px; height:2px; background:currentColor; opacity:.5;
  transition:width .4s var(--ease), opacity .3s; }
.mundo__mapa button.on{ color:#171412; background:rgb(255 255 255/.6); }
.mundo__mapa button.on::before{ width:28px; opacity:1; }
@media (hover:hover){ .mundo__mapa button:hover{ color:#171412; } }
@media (max-width:899px){ .mundo__mapa{ display:none; } }


/* ==========================================================================
   4 · EXPERTO — Mateo en capas: la luz del logo detrás, él, las piezas delante.
   Ratón: --mx/--my (main.js). Al bajar: la luz crece y las piezas suben (scroll-driven, sin JS).
   ========================================================================== */
.experto{ --mx:0; --my:0; overflow:clip; }
.experto__in{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(var(--s-5), 5vw, var(--s-8)); align-items:center; }
.experto__foto{ position:relative; aspect-ratio:1; width:100%; max-width:640px; justify-self:center; }
.experto__foto img{ position:absolute; inset:0; width:100%; height:100%; }
.experto__luz{ translate:calc(var(--mx) * 8px) calc(var(--my) * 6px); }
.experto__mateo{ translate:calc(var(--mx) * -14px) calc(var(--my) * -9px); }
/* el fundido de abajo va en el conjunto, no sólo en él: así la luz de detrás nunca asoma por su camiseta */
.experto__foto{ -webkit-mask-image:linear-gradient(#000 78%, transparent 99%); mask-image:linear-gradient(#000 78%, transparent 99%); }
.experto__foto .experto__piezas{ inset:auto; left:8%; top:2%; width:84%; height:auto; opacity:.95;
  translate:calc(var(--mx) * -30px) calc(var(--my) * -20px); animation:flota 8s ease-in-out -2s infinite; }
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .experto__luz{ animation:exp-luz linear both; animation-timeline:view(); animation-range:entry 10% cover 55%; }
    .experto__mateo{ animation:exp-el linear both; animation-timeline:view(); animation-range:entry 10% cover 55%; }
  }
}
@keyframes exp-luz{ from{ transform:scale(.82); opacity:.2; } to{ transform:none; opacity:1; } }
@keyframes exp-el{ from{ transform:translateY(48px) scale(.96); } to{ transform:none; } }
.experto__txt h2{ font-size:var(--t-2xl); max-width:12ch; text-wrap:balance; }
.experto__txt .lead{ margin-top:var(--s-4); max-width:34ch; color:#CFC6BD; }
.saberes{ list-style:none; margin:var(--s-6) 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:var(--s-5) var(--s-6); }
.saberes li{ display:grid; gap:var(--s-1); padding-top:var(--s-3); border-top:1px solid var(--line); }
.saberes b{ font-family:var(--f-display); font-weight:600; font-size:var(--t-lg); color:var(--ink); line-height:1.15; }
.saberes span{ color:var(--ink-mut); font-size:var(--t-sm); line-height:1.45; }
.experto .acciones{ margin-top:var(--s-6); }
@media (max-width:719px){
  .experto__in{ grid-template-columns:1fr; gap:var(--s-5); }
  .experto__foto{ max-width:420px; }
  .saberes{ grid-template-columns:1fr; gap:var(--s-4); }
}

/* ---- paneles: las tres webs, las dos caras de la tarjeta, los usos de la app ---- */
.formas{ display:grid; margin-block:var(--s-5); border-bottom:1px solid var(--line); }
.forma{ display:grid; grid-template-columns:11rem minmax(0,1fr); gap:var(--s-1) var(--s-5); padding-block:var(--s-5); border-top:1px solid var(--line); }
.forma h3{ grid-row:span 2; font-size:var(--t-lg); line-height:1.15; }
.panel__body .forma p{ margin:0; color:var(--ink-mut); }
.panel__body .forma .forma__gancho{ font-family:var(--f-display); font-weight:600; font-size:var(--t-lg); line-height:1.2; color:var(--m-tapa); }
@media (max-width:719px){ .forma{ grid-template-columns:1fr; } .forma h3{ grid-row:auto; font-size:var(--t-base); color:var(--ink-mut); } }
.caras{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3); margin-block:var(--s-5) var(--s-3); }
.caras figure{ margin:0; display:grid; gap:var(--s-2); }
.caras img{ width:100%; height:auto; border-radius:14px; box-shadow:0 10px 24px rgb(0 0 0/.28); }
.caras figcaption{ font-size:var(--t-xs); color:var(--ink-mut); }
.usos{ list-style:none; padding:0; margin:var(--s-3) 0 var(--s-5); display:grid; gap:var(--s-3); }
.usos li{ display:grid; grid-template-columns:13rem 1fr; gap:var(--s-3); padding-top:var(--s-3); border-top:1px solid var(--line); }
.usos b{ color:var(--ink); } .usos span{ color:var(--ink-mut); }
@media (max-width:719px){ .usos li{ grid-template-columns:1fr; gap:2px; } }

/* tableta: dos columnas (foto | texto) pero los saberes en una sola, que la columna es estrecha */
@media (max-width:899px){ .saberes{ grid-template-columns:1fr; gap:var(--s-4); } .experto__txt h2{ font-size:var(--t-xl); } }