/* Matrícula de Vida · prototipo v2 "Cielo nocturno"
   Sistema: Material 3 (formas, easing, duraciones y capas de estado tomados de material-web/tokens v0_192)
   adaptado a un esquema oscuro tonal con el carmín del logo como único acento vivo.
   Los tokens de :root se mapean a theme.json (palette, typography, spacing, shadow). */
:root {
  color-scheme: dark;
  /* Superficies tonales (M3: surface, surface-container-*) */
  --surface: #070814;
  --s-lowest: #05060e;
  --s-low: #0c0e1d;
  --s-cont: #111428;
  --s-high: #191d36;
  --s-highest: #232846;
  --on: #e9edf9;
  --on-var: #a8b1cc;
  --outline: #5b6486;
  --outline-var: #272d4c;
  --accent: #adc6ff;          /* M3 primary, tono 80 del azul de la web original (#0067FF): texto y foco */
  --crimson: #e52127;         /* rojo del logo oficial: partículas y señales, nunca texto pequeño */
  --warm: #eef2ff;            /* botón principal (M3 filled, invertido) */
  --on-warm: #0a0f24;

  /* Forma (M3 shape scale) */
  --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 28px; --r-full: 9999px;
  /* Movimiento (M3 motion tokens) */
  --ease: cubic-bezier(.2, 0, 0, 1);
  --ease-dec: cubic-bezier(.05, .7, .1, 1);
  --ease-acc: cubic-bezier(.3, 0, .8, .15);
  --spring: linear(0, .009, .035 2.1%, .141 4.4%, .281 6.7%, .723 12.9%, .938 16.7%, 1.017 19.4%, 1.077 22.4%, 1.121 25.7%, 1.149 29.2%, 1.159 33.1%, 1.154 36.2%, 1.129 42.7%, 1.054 54.4%, 1.012 62.5%, .995 70.6%, .999 85%, 1);
  /* Estado (M3 state layers) */
  --st-hover: .08; --st-focus: .12; --st-press: .12;

  --f-display: "Libre Caslon Display", "Times New Roman", serif;
  --f-sans: "Geist", system-ui, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, monospace;
  --rail: 0px;
  --m: 24px;                  /* margen lateral */
}
@media (min-width: 900px) { :root { --m: 5vw; } }
@media (min-width: 1200px) { :root { --rail: 168px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-color: var(--outline) var(--surface); }
body { margin: 0; background: var(--surface); color: var(--on); font: 400 1.0625rem/1.65 var(--f-sans); letter-spacing: .005em; overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
::selection { background: var(--crimson); color: #fff; }
input, textarea { caret-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-xs); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }

/* ── Fondo vivo ── */
#universe { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
main { position: relative; }
.app-bar, footer, .rail { position: relative; z-index: 1; }
.wrap { position: relative; z-index: 2; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 100; }
.logo-live { position: fixed; left: 0; top: 0; z-index: 3; max-width: none; height: auto; opacity: 0; pointer-events: none; will-change: transform, opacity; }

/* ── Escala tipográfica (M3 typescale) ── */
.display, h1 { font: 400 clamp(3rem, 8.4vw, 6rem)/1.02 var(--f-display); letter-spacing: -.025em; margin: 0; text-wrap: balance; }
.headline, h2 { font: 400 clamp(2.25rem, 5vw, 3.75rem)/1.06 var(--f-display); letter-spacing: -.02em; margin: 0; text-wrap: balance; }
.title, h3 { font: 500 1.375rem/1.3 var(--f-sans); letter-spacing: 0; margin: 0; }
.body-l { font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); line-height: 1.6; color: var(--on-var); max-width: 54ch; }
p { margin: 0 0 1rem; text-wrap: pretty; }
.label { font: 500 .875rem/1.25 var(--f-sans); letter-spacing: .01em; }
.mono { font: 400 .75rem/1.4 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
.muted { color: var(--on-var); }

/* ── Estructura ── */
.wrap { padding-inline: calc(var(--m) + var(--rail)) var(--m); max-width: 1680px; margin-inline: auto; }
section { position: relative; padding-block: clamp(5rem, 11vw, 9rem); }
.grid { display: grid; gap: clamp(2rem, 4vw, 4rem); }
@media (min-width: 960px) { .grid.g-5-7 { grid-template-columns: 5fr 7fr; } .grid.g-6-6 { grid-template-columns: 1fr 1fr; } .grid.g-7-5 { grid-template-columns: 7fr 5fr; } }
.surface { background: rgba(17, 20, 40, .74); -webkit-backdrop-filter: blur(20px) saturate(1.1); backdrop-filter: blur(20px) saturate(1.1); border: 1px solid var(--outline-var); border-radius: var(--r-xl); padding: clamp(1.5rem, 3vw, 2.5rem); }
.rule { border: 0; border-top: 1px solid var(--outline-var); margin: 0; }
.pend { display: inline-flex; font: 400 .6875rem/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--on-var); border: 1px dashed var(--outline); border-radius: var(--r-xs); padding: .3rem .45rem; vertical-align: middle; }

/* ── Botones (M3: filled · tonal · outlined · text) con capa de estado ── */
.btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 52px; padding: 0 1.6rem; border-radius: var(--r-full); border: 1px solid transparent; font: 500 .9375rem/1 var(--f-sans); letter-spacing: .01em; text-decoration: none; cursor: pointer; background: none; color: inherit; transition: transform 500ms var(--spring), box-shadow 200ms var(--ease); overflow: hidden; }
.btn::after { content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0; transition: opacity 150ms var(--ease); z-index: -1; }
.btn:hover::after { opacity: var(--st-hover); }
.btn:focus-visible::after { opacity: var(--st-focus); }
.btn:active::after { opacity: var(--st-press); }
.btn:active { transform: scale(.97); transition-duration: 100ms; }
.btn svg { width: 18px; height: 18px; flex: none; transition: transform 400ms var(--ease-dec); }
.btn:hover svg.arrow { transform: translateX(4px); }
.btn--filled { background: var(--warm); color: var(--on-warm); }
.btn--tonal { background: var(--s-highest); color: var(--on); }
.btn--outlined { border-color: var(--outline); color: var(--on); }
.btn--text { padding: 0 .9rem; min-height: 44px; color: var(--accent); }
.btn[disabled] { opacity: .38; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.icon-btn { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-full); border: 0; background: none; color: var(--on); cursor: pointer; }
.icon-btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: 0; transition: opacity 150ms; }
.icon-btn:hover::after { opacity: var(--st-hover); } .icon-btn:focus-visible::after { opacity: var(--st-focus); }
.icon-btn svg { width: 22px; height: 22px; position: relative; z-index: 1; }

/* ── Barra superior ── */
.app-bar { position: sticky; top: 0; z-index: 40; transition: background-color 400ms var(--ease), border-color 400ms; border-bottom: 1px solid transparent; }
.app-bar.scrolled { background: rgba(7, 8, 20, .78); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-color: var(--outline-var); }
.app-bar .in { display: flex; align-items: center; gap: .5rem; height: 72px; padding-inline: var(--m); max-width: 1680px; margin-inline: auto; }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; font: 500 1.0625rem/1 var(--f-sans); letter-spacing: .01em; }
.brand img { width: auto; height: 46px; object-fit: contain; filter: brightness(1.18) saturate(1.05); }
.nav { display: none; align-items: center; gap: .25rem; }
.nav a:not(.btn) { position: relative; padding: .7rem 1rem; border-radius: var(--r-full); text-decoration: none; font: 500 .9375rem/1 var(--f-sans); color: var(--on-var); transition: color 200ms; }
.nav a:not(.btn):hover, .nav a[aria-current] { color: var(--on); }
.nav a[aria-current]::before { content: ""; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--accent); }
.nav .btn { min-height: 44px; margin-left: .75rem; }
.menu-toggle { display: inline-grid; }
@media (min-width: 960px) { .nav { display: flex; } .menu-toggle { display: none; } }
.menu { position: fixed; inset: 0; z-index: 39; background: var(--s-lowest); padding: 96px var(--m) 2rem; display: flex; flex-direction: column; justify-content: center; gap: .25rem; clip-path: circle(0 at calc(100% - 44px) 36px); visibility: hidden; transition: clip-path 600ms var(--ease), visibility 0s 600ms; }
.menu.open { clip-path: circle(150vmax at calc(100% - 44px) 36px); visibility: visible; transition: clip-path 600ms var(--ease), visibility 0s; }
.menu a { font: 400 clamp(2.4rem, 11vw, 3.6rem)/1.15 var(--f-display); text-decoration: none; padding: .25rem 0; }
.menu .btn { margin-top: 1.5rem; align-self: flex-start; font: 500 .9375rem var(--f-sans); }

/* ── Raíl lateral (índice de la página; sustituye a la línea de ruta de la v1) ── */
.rail { display: none; }
@media (min-width: 1200px) {
  .rail { display: block; position: fixed; left: max(28px, calc((100vw - 1680px) / 2 + 28px)); top: 50%; transform: translateY(-50%); z-index: 20; }
  .rail ol { list-style: none; margin: 0; padding: 0 0 0 18px; display: grid; gap: 1.1rem; position: relative; }
  .rail ol::before, .rail .fill { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: var(--outline-var); }
  .rail .fill { background: var(--accent); transform-origin: top; transform: scaleY(var(--p, 0)); transition: transform 120ms linear; }
  .rail a { display: block; position: relative; text-decoration: none; font: 400 .75rem/1.2 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--outline); transition: color 300ms, transform 500ms var(--ease-dec); }
  .rail a:hover { color: var(--on-var); }
  .rail a[aria-current="true"] { color: var(--on); transform: translateX(6px); }
  .rail a[aria-current="true"]::before { content: ""; position: absolute; left: -22px; top: 50%; width: 9px; height: 9px; margin-top: -4px; border-radius: 50%; background: var(--crimson); box-shadow: 0 0 0 4px rgba(229, 33, 39, .25); }
}
.progress { position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: 2px; transform-origin: left; transform: scaleX(var(--p, 0)); background: var(--accent); }
@media (min-width: 1200px) { .progress { display: none; } }

/* ── Hero ── */
.hero { min-height: calc(100svh - 72px); padding-block: clamp(2rem, 6vh, 5rem) 3rem; display: flex; align-items: center; }
.hero .grid { width: 100%; align-items: center; }
.hero h1 .ln { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.hero h1 .ln > span { display: block; }
.js .hero h1 .ln > span { animation: sube 1.1s var(--ease-dec) both; animation-delay: calc(.35s + var(--i) * .12s); }
@keyframes sube { from { transform: translateY(108%); } }
.hero .body-l { margin-top: 1.75rem; }
.byline { display: flex; align-items: center; gap: .85rem; margin-top: 2.5rem; color: var(--on-var); font-size: .9375rem; }
.byline img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; border: 1px solid var(--outline-var); }
.byline b { display: block; color: var(--on); font-weight: 500; }
.slot { min-height: 340px; }
@media (min-width: 960px) { .hero .slot { min-height: 70vh; } }
@media (max-width: 959px) { .hero { align-items: flex-start; } .hero .slot { order: -1; min-height: 46vh; } .hero .grid { gap: 0; } }

/* ── Frase (texto que se ilumina con el scroll) ── */
.statement { padding-block: clamp(6rem, 16vw, 14rem); }
.statement blockquote { margin: 0; }
.statement .headline { font-size: clamp(2.4rem, 5.4vw, 4.75rem); max-width: 22ch; }
.js .scrub .w { opacity: var(--o, .2); transition: opacity 200ms linear; }
.statement cite { display: flex; align-items: center; gap: .8rem; margin-top: 2.5rem; font-style: normal; color: var(--on-var); }
.statement cite::before { content: ""; width: 48px; height: 1px; background: var(--outline); }

/* ── Terapias (pestañas M3 verticales) ── */
.areas { display: grid; gap: 1.25rem; }
.tabs { display: grid; gap: 1.5rem; }
@media (min-width: 760px) { .tabs { grid-template-columns: 17rem 1fr; gap: 2.5rem; } }
.tablist { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * clamp(1.5rem, 3vw, 2.5rem)); padding: 0 clamp(1.5rem, 3vw, 2.5rem); position: relative; }
@media (min-width: 760px) { .tablist { flex-direction: column; margin: 0; padding: 0; overflow: visible; } }
.tab { position: relative; flex: none; text-align: left; border: 0; background: none; color: var(--on-var); font: 500 .9375rem/1.3 var(--f-sans); padding: .9rem 1.1rem; min-height: 52px; border-radius: var(--r-lg); cursor: pointer; transition: color 250ms; display: flex; align-items: center; }
.tab::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: 0; transition: opacity 150ms; }
.tab:hover::after { opacity: var(--st-hover); }
.tab[aria-selected="true"] { color: var(--on); background: var(--s-highest); }
.tab[aria-selected="true"]::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 22px; margin-top: -11px; border-radius: 2px; background: var(--accent); }
@media (max-width: 759px) { .tab { white-space: nowrap; } .tab[aria-selected="true"]::before { left: 50%; top: auto; bottom: 0; width: 22px; height: 3px; margin: 0 0 0 -11px; } }
.tabpanel { min-height: 14rem; animation: panel 600ms var(--ease-dec) both; }
.tabpanel[hidden] { display: none; }
@keyframes panel { from { opacity: 0; transform: translateY(14px); } }
.tabpanel h3 { font: 400 clamp(1.75rem, 3vw, 2.4rem)/1.1 var(--f-display); letter-spacing: -.015em; margin-bottom: 1rem; }
.tabpanel p { color: var(--on-var); max-width: 46ch; }

/* ── Dock de herramientas (dock magnético del repositorio de motions) ── */
.dock { display: block; max-width: 36rem; padding: .6rem; border-radius: var(--r-xl); background: rgba(17, 20, 40, .74); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid var(--outline-var); margin-top: 2.5rem; }
.dock li { list-style: none; --k: 1; }
.dock .tool { display: flex; align-items: center; gap: .55rem; white-space: nowrap; padding: 0 .9rem 0 .8rem; min-height: 48px; border-radius: var(--r-full); background: var(--s-high); font: 500 .9375rem/1 var(--f-sans); transform: scale(var(--k)); transform-origin: 50% 80%; transition: transform 350ms var(--spring); }
.dock .tool svg { width: 22px; height: 22px; stroke: var(--accent); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.dock ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: 0; padding: 0; }

/* ── Guías: pila con resorte ── */
.stack { position: relative; min-height: clamp(360px, 46vw, 560px); display: grid; place-items: center; }
.stack img { position: absolute; width: min(42%, 270px); filter: drop-shadow(0 28px 30px rgba(0, 0, 0, .55)); transition: transform 900ms var(--spring), opacity 400ms; }
.stack img:nth-child(1) { transform: translate(-62%, 6%) rotate(-9deg) scale(.88); }
.stack img:nth-child(2) { transform: translate(62%, 6%) rotate(9deg) scale(.88); }
.stack img:nth-child(3) { z-index: 2; transform: translateY(-3%) scale(1); }
.js .stack:not(.in) img:nth-child(1), .js .stack:not(.in) img:nth-child(2) { transform: translate(0, 10%) rotate(0) scale(.8); opacity: 0; }
.js .stack:not(.in) img:nth-child(3) { transform: translateY(12%) scale(.92); opacity: 0; }
.stack:hover img:nth-child(1) { transform: translate(-78%, 4%) rotate(-12deg) scale(.9); }
.stack:hover img:nth-child(2) { transform: translate(78%, 4%) rotate(12deg) scale(.9); }
.stack:hover img:nth-child(3) { transform: translateY(-7%) scale(1.03); }
.lista { list-style: none; margin: 2.5rem 0 0; padding: 0; border-top: 1px solid var(--outline-var); }
.lista li { border-bottom: 1px solid var(--outline-var); }
.lista a { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 1.25rem; align-items: center; padding: 1.4rem .5rem; text-decoration: none; transition: padding 400ms var(--ease-dec); }
.lista a::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0; transition: opacity 200ms; border-radius: var(--r-md); }
.lista a:hover::before { opacity: var(--st-hover); } .lista a:hover { padding-inline: 1rem; }
.lista h3 { font: 400 1.75rem/1.15 var(--f-display); letter-spacing: -.01em; }
.lista p { margin: .35rem 0 0; color: var(--on-var); font-size: .9375rem; max-width: 52ch; }
.lista svg { width: 24px; height: 24px; color: var(--on-var); }

/* ── Raúl ── */
.media { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 5; background: var(--s-high); }
.media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; filter: saturate(.88) contrast(1.02); }
.js .media { clip-path: inset(0 0 100% 0 round var(--r-xl)); transition: clip-path 1.3s var(--ease); }
.js .media.in { clip-path: inset(0 0 0 0 round var(--r-xl)); }
.js .media img { transform: scale(1.18); transition: transform 1.8s var(--ease-dec); }
.js .media.in img { transform: scale(1); }
.hitos { list-style: none; margin: 2rem 0; padding: 0; display: grid; gap: 0; position: relative; }
.hitos li { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; padding: 1.1rem 0; border-top: 1px solid var(--outline-var); }
.hitos b { font: 400 2rem/1 var(--f-display); color: var(--accent); }
.hitos p { margin: 0; color: var(--on-var); }

/* Botón → reproductor (tile 01 del repositorio de motions) */
.player { position: relative; display: block; width: fit-content; max-width: 100%; height: 52px; border-radius: 26px; background: var(--warm); color: var(--on-warm); overflow: hidden; transition: width 700ms var(--ease), height 700ms var(--ease), border-radius 700ms var(--ease), background-color 500ms; margin-top: 1.5rem; }
.player .p-btn { position: absolute; inset: 0; display: flex; align-items: center; gap: .6rem; padding: 0 1.6rem; border: 0; background: none; color: inherit; font: 500 .9375rem/1 var(--f-sans); cursor: pointer; white-space: nowrap; transition: opacity 250ms; }
.player .p-btn svg { width: 18px; height: 18px; }
.player .p-body { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 400ms 250ms; background: #000 center/cover; }
.player .p-body img { width: 100%; height: 100%; object-fit: cover; opacity: .75; }
.player .p-play { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px; border-radius: 50%; border: 0; background: var(--warm); color: var(--on-warm); display: grid; place-items: center; cursor: pointer; transition: transform 500ms var(--spring); }
.player .p-play:hover { transform: scale(1.08); } .player .p-play svg { width: 28px; height: 28px; margin-left: 3px; }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player .p-note { position: absolute; left: 1rem; bottom: .8rem; color: #fff; font: 400 .75rem var(--f-mono); letter-spacing: .04em; text-shadow: 0 1px 6px #000; }
.player.open { border-radius: var(--r-xl); background: #000; }
.player.open .p-btn { opacity: 0; pointer-events: none; }
.player.open .p-body { opacity: 1; pointer-events: auto; }

/* ── Testimonios ── */
.cita-grande { font: 400 clamp(1.9rem, 4.2vw, 3.4rem)/1.15 var(--f-display); letter-spacing: -.015em; margin: 0; max-width: 26ch; text-wrap: balance; }
.firma { display: block; margin-top: 1.5rem; font: 400 .75rem/1.5 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--on-var); font-style: normal; }
.firma b { color: var(--on); font-weight: 500; }
.citas { display: grid; gap: 0; margin-top: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--outline-var); }
@media (min-width: 900px) { .citas { grid-template-columns: repeat(3, 1fr); } .citas figure + figure { border-left: 1px solid var(--outline-var); } .citas figure { padding: 2.5rem 2rem 0; } .citas figure:first-child { padding-left: 0; } }
.citas figure { margin: 0; padding: 2rem 0 0; }
.citas blockquote { margin: 0; font: 400 1.25rem/1.45 var(--f-sans); color: var(--on); }

/* ── Cierre / formulario (campos M3 outlined con etiqueta flotante) ── */
.cierre .slot { min-height: 340px; }
@media (min-width: 960px) { .cierre .slot { min-height: 52vh; margin-top: 1rem; } }
.form { display: grid; gap: 1.1rem; }
.field { position: relative; }
.field input, .field textarea { width: 100%; font: 400 1rem/1.5 var(--f-sans); color: var(--on); background: transparent; border: 1px solid var(--outline); border-radius: var(--r-xs); padding: 1.1rem 1rem; min-height: 56px; transition: border-color 200ms, box-shadow 200ms; }
.field textarea { min-height: 150px; resize: vertical; }
.field label { position: absolute; left: .75rem; top: 1.05rem; padding: 0 .3rem; color: var(--on-var); pointer-events: none; transform-origin: left; transition: transform 250ms var(--ease), color 250ms, background-color 250ms; background: transparent; }
.field input::placeholder, .field textarea::placeholder { color: transparent; }
.field input:hover, .field textarea:hover { border-color: var(--on-var); }
.field input:focus, .field textarea:focus { outline: 0; border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.field input:focus + label, .field textarea:focus + label, .field input:not(:placeholder-shown) + label, .field textarea:not(:placeholder-shown) + label { transform: translateY(-1.55rem) scale(.78); background: var(--s-cont); color: var(--accent); }
.field input:not(:focus):not(:placeholder-shown) + label, .field textarea:not(:focus):not(:placeholder-shown) + label { color: var(--on-var); }
.help { font-size: .8125rem; color: var(--on-var); margin: 0; }
.ok { margin: 0; padding: 1rem 1.2rem; border-radius: var(--r-lg); background: var(--s-highest); border: 1px solid var(--outline-var); }
.ok[hidden] { display: none; }

/* ── Pie ── */
footer { background: var(--s-lowest); border-top: 1px solid var(--outline-var); padding-block: 4rem 6rem; }
footer .cols { display: grid; gap: 2.5rem; }
@media (min-width: 800px) { footer .cols { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
footer h2 { font: 500 .75rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--on-var); margin: 0 0 1rem; }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
footer a { text-decoration: none; } footer a:hover { text-decoration: underline; }
footer .big { font: 400 2rem/1.1 var(--f-display); margin: 0 0 .5rem; }
footer .legal { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--outline-var); color: var(--on-var); font-size: .875rem; max-width: 80ch; }

/* ── Barra móvil ── */
.dock-mobile { position: fixed; z-index: 45; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); display: flex; gap: .5rem; padding: .5rem; border-radius: var(--r-full); background: rgba(25, 29, 54, .82); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid var(--outline-var); }
.dock-mobile .btn { flex: 1; }
@media (min-width: 960px) { .dock-mobile { display: none; } }

/* ── Entradas (visibles por defecto; solo se ocultan con JS activo) ── */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 800ms var(--ease-dec), transform 800ms var(--ease-dec); transition-delay: calc(var(--i, 0) * 90ms); }
.js .reveal.in { opacity: 1; transform: none; }

/* ── Páginas interiores ── */
.page-head { padding-block: clamp(4rem, 9vw, 8rem) clamp(2rem, 5vw, 4rem); }
.crumbs { margin-bottom: 1.5rem; }
.crumbs a { color: var(--on-var); }
.ficha-img { display: grid; place-items: center; min-height: 440px; }
.ficha-img img { width: min(70%, 380px); filter: drop-shadow(0 30px 34px rgba(0, 0, 0, .6)); }
.aviso { border: 1px solid var(--outline-var); border-radius: var(--r-lg); padding: 1rem 1.25rem; font-size: .9375rem; color: var(--on-var); max-width: 60ch; }

body.inner { --rail: 0px; }
section { position: relative; }
.cierre { padding-bottom: clamp(5rem, 10vw, 8rem); }

/* ═════ v3 ═════ */
.btn--xl { min-height: 64px; padding: 0 2.6rem; font-size: 1.0625rem; }

/* ── Hero: retrato que se disuelve en puntos, palabra que se descifra ── */
.hero { padding: 0; min-height: calc(100svh - 72px); display: block; overflow-x: clip; }
.hero .wrap { min-height: calc(100svh - 72px); display: grid; align-items: center; }
.hero-copy { padding-block: clamp(2rem, 9vh, 6rem); max-width: 46rem; }
@media (min-width: 960px) { .hero-copy { max-width: 46vw; } .hero .body-l { max-width: 40ch; } }
.hero h1 { font-size: clamp(3.1rem, 7.6vw, 6rem); }
.portrait { position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; width: min(60vw, 900px); pointer-events: none; }
.portrait img { position: absolute; right: 0; bottom: 0; height: 100%; width: auto; max-width: none; }
.matricula { position: absolute; left: 4%; bottom: 22%; display: inline-flex; align-items: stretch; background: #fff; color: #111; border: 2px solid #111; border-radius: 8px; overflow: hidden; font: 700 .8125rem/1 var(--f-sans); letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.matricula i { background: #003399; color: #fff; font: 700 .55rem var(--f-sans); letter-spacing: 0; padding: .5rem .4rem; display: grid; place-items: end center; font-style: normal; }
.matricula b { padding: .65rem .9rem; font-weight: 700; }
@supports (animation-timeline: scroll()) { @media (prefers-reduced-motion: no-preference) {
  .portrait { animation: se-va linear both; animation-timeline: scroll(root); animation-range: 0 75vh; }
  @keyframes se-va { to { opacity: 0; transform: translateY(-4vh) scale(1.05); filter: blur(8px); } }
} }
@media (max-width: 959px) {
  .hero .wrap { display: block; min-height: 0; }
  .portrait { position: relative; width: 100%; height: min(78vw, 56svh); margin-top: -.5rem; }
  .portrait img { width: auto; height: 100%; right: 0; left: auto; }
  .hero-copy { margin-top: -5.5rem; padding-top: 0; position: relative; }
  .matricula { left: 5%; bottom: 20%; }
}
.mw { position: relative; display: inline-block; color: transparent; -webkit-text-stroke: 1.5px var(--on); }
.mw::after { content: attr(data-t); position: absolute; left: 0; top: 0; color: var(--on); -webkit-text-stroke: 0; clip-path: inset(0 100% 0 0); animation: rellena 1.7s var(--ease) 1s forwards; }
@keyframes rellena { to { clip-path: inset(0 -2% 0 0); } }
html:not(.js) .mw { color: var(--on); -webkit-text-stroke: 0; }
.proof { display: inline-flex; align-items: center; gap: .9rem; margin-top: 2.25rem; text-decoration: none; color: var(--on-var); font-size: .9375rem; line-height: 1.35; }
.proof:hover { color: var(--on); }
.avs { display: flex; }
.avs img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; margin-left: -12px; border: 2px solid var(--surface); }
.avs img:first-child { margin-left: 0; }

/* ── Voces ── */
.voces h2 { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.vtabs { display: grid; gap: 1.5rem; }
@media (min-width: 960px) { .vtabs { grid-template-columns: 22rem 1fr; gap: 2.5rem; align-items: start; } }
.voz-list { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; }
@media (min-width: 960px) { .voz-list { flex-direction: column; overflow: visible; gap: .25rem; } }
.voz-tab { position: relative; flex: none; display: flex; align-items: center; gap: .9rem; padding: .7rem 1.1rem .7rem .7rem; border: 0; border-radius: var(--r-full); background: none; color: var(--on-var); text-align: left; cursor: pointer; font: 400 .875rem/1.3 var(--f-sans); transition: color 250ms, background-color 250ms; }
.voz-tab::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: 0; transition: opacity 150ms; }
.voz-tab:hover::after { opacity: var(--st-hover); }
.voz-tab img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; filter: grayscale(.7) brightness(.85); transition: filter 400ms; }
.voz-tab b { display: block; font-weight: 500; font-size: .9375rem; color: inherit; }
.voz-tab small { color: var(--on-var); font-size: .8125rem; }
.voz-tab[aria-selected="true"] { background: var(--s-highest); color: var(--on); }
.voz-tab[aria-selected="true"] img { filter: none; }
@media (max-width: 959px) { .voz-tab span small { display: none; } }
.voz-stage { padding: clamp(1.25rem, 3vw, 2.5rem); }
.voz-panel { display: grid; gap: 2rem; align-items: center; animation: panel 700ms var(--ease-dec) both; }
.voz-panel[hidden] { display: none; }
@media (min-width: 760px) { .voz-panel { grid-template-columns: minmax(0, 15rem) 1fr; gap: 3rem; } }
.voz-foto { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-xl); }
@media (max-width: 759px) { .voz-foto { max-height: 280px; } }
.voz-panel .cita-grande { font-size: clamp(1.6rem, 2.9vw, 2.5rem); max-width: 24ch; }
.voz-panel .btn { margin-top: 1.5rem; }
.dialog { width: min(40rem, calc(100vw - 2rem)); max-height: min(86svh, 46rem); padding: 0; border: 1px solid var(--outline-var); border-radius: var(--r-xl); background: var(--s-high); color: var(--on); overflow: hidden; }
.dialog[open] { display: flex; flex-direction: column; animation: panel 450ms var(--ease-dec) both; }
.dialog::backdrop { background: rgba(5, 6, 14, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.dlg-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1.5rem 1.5rem 1rem 2rem; border-bottom: 1px solid var(--outline-var); }
.dlg-head h3 { font: 400 1.75rem/1.15 var(--f-display); }
.dlg-body { padding: 1.5rem 2rem 2rem; overflow-y: auto; color: var(--on-var); }
.dlg-body p { color: var(--on); max-width: 56ch; }

/* ── Cierre: el logo se forma con las partículas ── */
.cierre { text-align: center; padding-block: clamp(3rem, 6vw, 5rem) clamp(6rem, 11vw, 9rem); }
.cierre .wrap { display: grid; justify-items: center; }
.cierre .slot { width: min(100%, 760px); aspect-ratio: 2.247; min-height: 0; margin-bottom: clamp(1.5rem, 4vw, 3rem); }
.cierre h2 { max-width: 20ch; }
.cierre .body-l { max-width: 52ch; }
.cierre .help { max-width: 60ch; }

/* ── Formulario conversacional (pestaña aparte) ── */
body.formpage { min-height: 100svh; overflow-x: hidden; }
.fprog { position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: 3px; background: var(--outline-var); }
.fprog i { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform 600ms var(--ease); }
.fp-top { position: fixed; z-index: 50; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: .25rem; padding: 14px 20px; }
.fp-top .brand { margin-right: auto; }
.fp { position: relative; z-index: 2; min-height: 100svh; display: grid; align-items: center; padding: 6rem var(--m) 6rem; }
.fp form { width: min(100%, 46rem); margin-inline: auto; }
.step { animation: paso 700ms var(--ease-dec) both; }
.step[hidden] { display: none; }
@keyframes paso { from { opacity: 0; transform: translateY(36px); } }
.step.back { animation-name: paso-b; }
@keyframes paso-b { from { opacity: 0; transform: translateY(-36px); } }
.q { font: 400 clamp(2.1rem, 5.4vw, 3.9rem)/1.08 var(--f-display); letter-spacing: -.02em; margin: 0 0 2rem; text-wrap: balance; }
.line input, .line textarea { width: 100%; background: transparent; border: 0; border-bottom: 2px solid var(--outline); color: var(--on); font: 400 clamp(1.4rem, 3.2vw, 2rem)/1.3 var(--f-sans); padding: .6rem 0; outline: 0; border-radius: 0; resize: none; transition: border-color 250ms; caret-color: var(--accent); }
.line input:focus, .line textarea:focus { border-color: var(--accent); }
.line input::placeholder, .line textarea::placeholder { color: var(--outline); }
.opts { display: grid; gap: .6rem; max-width: 34rem; }
.opt { position: relative; display: flex; align-items: center; gap: 1rem; padding: .85rem 1rem; border: 1px solid var(--outline); border-radius: var(--r-md); cursor: pointer; background: rgba(17, 20, 40, .6); transition: background-color 200ms, border-color 200ms, transform 400ms var(--spring); }
.opt:hover { background: var(--s-high); }
.opt input { position: absolute; opacity: 0; }
.opt .key { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--outline); font: 500 .8125rem var(--f-mono); color: var(--on-var); flex: none; }
.opt:has(input:checked) { border-color: var(--accent); background: var(--s-highest); transform: scale(1.015); }
.opt:has(input:checked) .key { background: var(--accent); color: var(--surface); border-color: var(--accent); }
.opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.opt.check { max-width: 40rem; }
.actions { display: flex; align-items: center; gap: 1.25rem; margin-top: 2.25rem; flex-wrap: wrap; }
.hint { color: var(--on-var); font-size: .875rem; }
kbd { font: 500 .75rem var(--f-mono); border: 1px solid var(--outline); border-radius: 4px; padding: .1rem .35rem; }
.error { margin: 1rem 0 0; color: #ffb4ab; font-size: .9375rem; }
.error[hidden] { display: none; }
.fp-nav { position: fixed; z-index: 50; right: 20px; bottom: 20px; display: flex; align-items: center; gap: .5rem; background: rgba(25, 29, 54, .82); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--outline-var); border-radius: var(--r-full); padding: .25rem .9rem .25rem .25rem; }
.fp-nav .icon-btn:disabled { opacity: .35; cursor: default; }
.step.done .q { font-size: clamp(2.4rem, 6vw, 4.4rem); }
body.formpage .step.done { margin-top: clamp(6rem, 22vh, 14rem); }

/* ═════ v4: arquitectura ampliada ═════ */
.hide-m { display: none; } @media (min-width: 1240px) { .hide-m { display: block; } }
.nav { gap: .1rem; }
.nav > a, .dd > a { position: relative; display: inline-flex; align-items: center; gap: .3rem; padding: .7rem .8rem; border-radius: var(--r-full); text-decoration: none; font: 500 .9375rem/1 var(--f-sans); color: var(--on-var); transition: color 200ms; white-space: nowrap; }
.nav > a:hover, .dd > a:hover, .nav a[aria-current], .dd:focus-within > a { color: var(--on); }
.nav a[aria-current]::before { content: ""; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--accent); }
.dd { position: relative; } .chev { width: 14px; height: 14px; transition: transform 300ms var(--ease); } .dd:hover .chev, .dd:focus-within .chev { transform: rotate(180deg); }
.dd-menu { position: absolute; left: 0; top: 100%; min-width: 15rem; padding: .5rem; background: rgba(17, 20, 40, .94); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid var(--outline-var); border-radius: var(--r-lg); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 250ms var(--ease), transform 350ms var(--ease-dec), visibility 0s 250ms; }
.dd:hover .dd-menu, .dd:focus-within .dd-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.dd-menu a { display: block; padding: .75rem 1rem; border-radius: var(--r-md); text-decoration: none; font-size: .9375rem; color: var(--on); position: relative; }
.dd-menu a:hover { background: var(--s-highest); }
.dd-menu a:last-child:not(:first-child) { color: var(--accent); }
.tools { display: flex; margin-left: .25rem; }
.tip { position: relative; } .tip::before { content: attr(data-tip); position: absolute; top: calc(100% + 6px); right: 0; white-space: nowrap; background: var(--s-highest); color: var(--on); font-size: .75rem; padding: .35rem .6rem; border-radius: var(--r-sm); opacity: 0; transform: translateY(-4px); transition: opacity 200ms, transform 300ms var(--ease); pointer-events: none; z-index: 5; }
.tip:hover::before, .tip:focus-visible::before { opacity: 1; transform: none; }
.cart .count { position: absolute; right: 4px; top: 4px; z-index: 2; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--outline); color: var(--on); font: 500 .6875rem/16px var(--f-mono); text-align: center; }
.tools .icon-btn { opacity: .75; }
@media (max-width: 959px) { .tools { display: none; } }
.menu { overflow-y: auto; justify-content: flex-start; padding-top: 100px; }
.menu a { font-size: clamp(2rem, 9vw, 3rem); } .menu a.sub { font: 400 1.25rem/1.4 var(--f-sans); padding-left: 1rem; color: var(--on-var); }
.sub-h { font: 400 clamp(1.6rem, 3vw, 2.2rem)/1.1 var(--f-display); margin: clamp(3rem, 6vw, 5rem) 0 1.25rem; }

/* filas de servicios (editorial, no tarjetas) */
.srows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--outline-var); }
.srow { border-bottom: 1px solid var(--outline-var); }
.srow a { position: relative; display: grid; grid-template-columns: 1fr; gap: 1.25rem; padding: 1.5rem .5rem; text-decoration: none; align-items: center; transition: padding 450ms var(--ease-dec); }
@media (min-width: 760px) { .srow a { grid-template-columns: 220px 1fr auto; gap: 2.5rem; } }
.srow a::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0; transition: opacity 200ms; border-radius: var(--r-lg); }
.srow a:hover::before { opacity: var(--st-hover); } .srow a:hover { padding-inline: 1.25rem; }
.srow-img { display: block; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; background: var(--s-cont); }
.srow-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-dec); } .srow a:hover .srow-img img { transform: scale(1.06); }
.srow-t h3 { font: 400 clamp(1.7rem, 3vw, 2.4rem)/1.1 var(--f-display); letter-spacing: -.015em; } .srow-t p { margin: .6rem 0 0; color: var(--on-var); max-width: 52ch; }
.srow-go { display: inline-flex; align-items: center; gap: .4rem; color: var(--accent); font-weight: 500; white-space: nowrap; } .srow-go svg { width: 20px; height: 20px; }
.trio { display: grid; gap: 1.5rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 900px) { .trio { grid-template-columns: repeat(3, 1fr); gap: 2rem; } .trio .tr:nth-child(2) { margin-top: 3rem; } .trio .tr:nth-child(3) { margin-top: 1.5rem; } }
.tr { position: relative; display: block; text-decoration: none; }
.tr-img { display: block; aspect-ratio: 4 / 3; border-radius: var(--r-xl); overflow: hidden; margin-bottom: 1.25rem; } .tr-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-dec); } .tr:hover .tr-img img { transform: scale(1.05); }
.tr h3 { font: 400 clamp(1.8rem, 2.6vw, 2.2rem)/1.1 var(--f-display); } .tr p { color: var(--on-var); margin: .5rem 0 .75rem; } .tr-go { color: var(--accent); font-weight: 500; display: inline-flex; gap: .4rem; align-items: center; } .tr-go svg { width: 20px; height: 20px; }
.covers img { width: min(34%, 240px); border-radius: 6px; } .covers img:nth-child(1) { transform: translate(-70%, 6%) rotate(-8deg) scale(.9); } .covers img:nth-child(2) { transform: translate(70%, 6%) rotate(8deg) scale(.9); }
.covers:hover img:nth-child(1) { transform: translate(-86%, 4%) rotate(-11deg) scale(.92); } .covers:hover img:nth-child(2) { transform: translate(86%, 4%) rotate(11deg) scale(.92); }
.stack.covers { min-height: clamp(380px, 46vw, 560px); }
.stack.covers img { filter: drop-shadow(0 30px 34px rgba(0, 0, 0, .6)); }

/* mini calculadora y selectores */
.selects { display: grid; grid-template-columns: 1fr 1.6fr 1.1fr; gap: .75rem; }
.sel { position: relative; display: block; } .sel span { position: absolute; left: .85rem; top: -.55rem; padding: 0 .35rem; font-size: .75rem; color: var(--accent); background: var(--s-cont); z-index: 1; }
.sel select { width: 100%; appearance: none; min-height: 56px; padding: 0 2.25rem 0 1rem; color: var(--on); background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8b1cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .7rem center / 18px; border: 1px solid var(--outline); border-radius: var(--r-xs); font: 400 1rem var(--f-sans); transition: border-color 200ms; cursor: pointer; }
.sel select:hover { border-color: var(--on-var); } .sel select:focus { outline: 0; border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } .sel option { background: var(--s-high); color: var(--on); }
.calc-form { margin-top: 2.5rem; max-width: 40rem; display: grid; gap: 1.25rem; } .calc-form .btn { justify-self: start; }
.res-head { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: end; justify-content: space-between; margin-bottom: 1.5rem; }
.rtablist { display: flex; gap: .25rem; overflow-x: auto; margin-bottom: 1rem; scrollbar-width: none; } .rtablist .tab { white-space: nowrap; }
.rpanel[hidden] { display: none; } .rpanel { animation: panel 600ms var(--ease-dec) both; }
.map-wrap { display: grid; gap: 2rem; align-items: center; } @media (min-width: 900px) { .map-wrap { grid-template-columns: minmax(0, 36rem) 1fr; gap: 3rem; } }
#map { width: 100%; height: auto; overflow: visible; }
#map .ring { fill: none; stroke: var(--outline); stroke-width: 1; } #map .axis { stroke: var(--outline-var); stroke-width: 1.2; } #map .sq { fill: none; stroke: var(--outline); stroke-width: 1.2; }
#map .node { cursor: pointer; outline: none; } #map .node circle { fill: var(--surface); stroke: var(--on-var); stroke-width: 1.5; transition: stroke 200ms, fill 200ms; } #map .node text { fill: var(--on); font-family: var(--f-display); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
#map .node.main circle { stroke: var(--on); stroke-width: 2; } #map .node.core circle { fill: var(--crimson); stroke: var(--crimson); } #map .node.core text { fill: #fff; }
#map .node:hover circle, #map .node:focus-visible circle, #map .node.on circle { stroke: var(--accent); fill: var(--s-highest); } #map .node.core:hover circle { fill: #ff3b41; }
#map .lab { fill: var(--on-var); font: 400 11px var(--f-mono); letter-spacing: .08em; text-anchor: middle; pointer-events: none; }
.js #map .node { opacity: 0; animation: aparece .7s var(--ease-dec) forwards; animation-delay: calc(var(--d) * 45ms); } @keyframes aparece { from { opacity: 0; transform: scale(.6); transform-box: fill-box; transform-origin: center; } to { opacity: 1; } }
.legend { align-self: start; } .legend .title { font: 400 1.9rem/1.15 var(--f-display); letter-spacing: -.01em; margin-bottom: .75rem; }
.tscroll { overflow-x: auto; } .body-t { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .body-t th { font: 500 .75rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--on-var); text-align: left; padding: .6rem 1rem; } .body-t td { padding: .9rem 1rem; border-top: 1px solid var(--outline-var); font: 400 1.5rem var(--f-display); } .body-t td:first-child { font: 400 .9375rem var(--f-sans); color: var(--on-var); } .body-t tr.tot td { color: var(--accent); border-top: 1px solid var(--outline); }
.stages { display: grid; gap: 1.5rem; } @media (min-width: 800px) { .stages { grid-template-columns: repeat(3, 1fr); gap: 0; } .stage + .stage { border-left: 1px solid var(--outline-var); padding-left: 2rem; } .stage { padding-right: 1.5rem; } }
.stage h3 { font: 400 1.5rem var(--f-display); margin-bottom: 1rem; } .stage .big { font: 400 clamp(3.5rem, 7vw, 5.5rem)/1 var(--f-display); color: var(--accent); } .stage dl { margin: 1rem 0 0; display: grid; gap: .4rem; } .stage dl div { display: flex; justify-content: space-between; border-top: 1px solid var(--outline-var); padding-top: .4rem; color: var(--on-var); } .stage dd { margin: 0; color: var(--on); font-variant-numeric: tabular-nums; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.chip { min-height: 40px; padding: 0 1rem; border: 1px solid var(--outline); border-radius: var(--r-sm); background: none; color: var(--on); font: 500 .875rem var(--f-sans); cursor: pointer; transition: background-color 200ms; position: relative; }
.chip:hover { background: var(--s-high); } .chip[aria-pressed="true"] { background: var(--s-highest); border-color: var(--accent); color: var(--accent); }
.chips .num { font: 400 1.4rem var(--f-display); padding: .4rem 1rem; border: 1px solid var(--outline); border-radius: var(--r-md); } .chips .num small { display: block; font: 400 .6875rem var(--f-mono); color: var(--on-var); letter-spacing: .06em; text-transform: uppercase; }
.upsell { margin-top: 1.5rem; display: grid; gap: 1rem; justify-items: start; }
.mini-calc .selects { max-width: 34rem; }
@media print { body { background: #fff; color: #111; } #universe, .logo-live, .app-bar, .rail, footer, .dock-mobile, .calc-form, .calc-head, .upsell, .how, .cierre, #print, .btn, .rtablist, .progress { display: none !important; } #resultado { display: block !important; } .rpanel[hidden] { display: block !important; } .surface { background: #fff; border: 1px solid #ccc; color: #111; } #map text, #map .node text { fill: #111; } #map .node circle { fill: #fff; stroke: #333; } * { color: #111 !important; } }

/* servicios, cursos, escuela, reinserción */
.svc-hero { padding-block: clamp(3rem, 7vw, 6rem) clamp(3rem, 7vw, 5rem); }
.art-frame { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--outline-var); } .art-frame img { width: 100%; height: 100%; object-fit: cover; }
.facts { display: grid; grid-template-columns: repeat(3, auto); gap: 1.5rem 2.5rem; margin: 2rem 0 0; justify-content: start; } .facts div { border-top: 1px solid var(--outline); padding-top: .6rem; } .facts dt { font: 400 .75rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--on-var); } .facts dd { margin: .4rem 0 0; } @media (max-width: 560px) { .facts { grid-template-columns: 1fr 1fr; } }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; } .steps li { display: grid; grid-template-columns: 3.5rem 1fr; gap: 1rem; padding: 1.5rem 0; border-top: 1px solid var(--outline-var); } .steps b { font: 400 2.4rem/1 var(--f-display); color: var(--accent); } .steps h3 { font: 400 1.6rem var(--f-display); margin-bottom: .4rem; } .steps p { margin: 0; color: var(--on-var); }
.faq { border-top: 1px solid var(--outline-var); } .faq details { border-bottom: 1px solid var(--outline-var); } .faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 1rem; min-height: 68px; padding: .75rem 0; font: 500 1.0625rem/1.3 var(--f-sans); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; margin-left: auto; font: 300 1.75rem/1 var(--f-sans); color: var(--accent); transition: transform 350ms var(--ease); } .faq details[open] summary::after { transform: rotate(45deg); } .faq summary:hover { color: var(--accent); } .faq p { color: var(--on-var); padding-bottom: 1.25rem; max-width: 56ch; } .faq .n { font: 400 .8125rem var(--f-mono); color: var(--accent); }
.relprod { display: grid; grid-template-columns: 110px 1fr; gap: 1.5rem; align-items: center; margin-top: 3rem; max-width: 40rem; } .relprod img { border-radius: 4px; box-shadow: 0 16px 30px rgba(0, 0, 0, .5); } .relprod h3 { font: 400 1.7rem var(--f-display); }
.phase { display: flex; align-items: center; gap: 1.25rem; } .phase-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--crimson); box-shadow: 0 0 0 6px rgba(229, 33, 39, .22); animation: latido 2.4s var(--ease) infinite; } @keyframes latido { 50% { box-shadow: 0 0 0 12px rgba(229, 33, 39, 0); } }

/* tienda */
.shop-bar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: 2rem; } .shop-bar .chips { margin: 0; }
.pgrid { display: grid; gap: 2.5rem 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.pc[hidden] { display: none; } .pc-img { display: grid; place-items: center; border-radius: var(--r-xl); overflow: hidden; background: var(--s-cont); border: 1px solid var(--outline-var); aspect-ratio: 4 / 5; padding: 1.5rem; }
.pc-img.cov img { width: 62%; border-radius: 4px; box-shadow: 0 24px 40px rgba(0, 0, 0, .6); transition: transform 700ms var(--spring); } .pc:hover .pc-img.cov img { transform: translateY(-8px) rotate(-1.5deg); }
.pc-img.land { padding: 0; } .pc-img.land img { width: 100%; height: 100%; object-fit: cover; }
.pc-b { padding-top: 1rem; } .pc h3 { font: 400 1.5rem/1.15 var(--f-display); } .pc h3 a { text-decoration: none; } .pc .btn { margin-top: 1rem; min-height: 44px; }
.cover-big { width: min(80%, 460px); border-radius: 6px; box-shadow: 0 40px 70px rgba(0, 0, 0, .6); }
.cart-line { display: grid; grid-template-columns: 90px 1fr auto; gap: 1.25rem; align-items: center; } .cart-line img { border-radius: 4px; } .qty { display: flex; align-items: center; gap: .25rem; } .qty .icon-btn { border: 1px solid var(--outline); width: 36px; height: 36px; }
.sum { margin: 1rem 0 1.5rem; display: grid; gap: .6rem; } .sum div { display: flex; justify-content: space-between; border-top: 1px solid var(--outline-var); padding-top: .6rem; } .sum dd { margin: 0; }
.srow-img, .tr-img, .pc-img.land { border: 1px solid var(--outline-var); }