/* ---------- Tipografía: Inter alojada en el propio sitio (variable, pesos 400–700; licencia OFL en assets/fonts) ---------- */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens · identidad corporativa de Galatea Tándem (ver DESIGN.md) ---------- */
:root {
  --red: #E61420;        /* rojo principal: CTA, destacados y acentos */
  --red-dark: #C90012;   /* rojo oscuro: hover */
  --graphite: #464646;

  --paper: #FFFFFF;      /* fondo de página */
  --surface: #F5F5F5;    /* fondo suave: paneles, etiquetas y huecos */
  --ink: #1F1F1F;        /* texto principal */
  --ink-2: #666666;      /* texto secundario */
  --line: #E0E0E0;
  --line-strong: #8A8A8A;
  --accent: var(--red);
  --accent-hover: var(--red-dark);
  --accent-ink: #FFFFFF;
  --block: var(--graphite);  /* bloques de pregunta y de memoria */
  --block-ink: #FFFFFF;
  --band: #090909;       /* fondo oscuro */
  --band-ink: #FFFFFF;
  --band-ink-2: #B0B0B0;
  --band-line: #2C2C2C;
  --hatch: #E6E6E6;
  --focus: #1F1F1F;
  --danger: #C90012;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --step--1: 0.875rem;
  --step-0: 1.125rem;
  --step-1: 1.35rem;
  --step-2: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);
  --step-3: clamp(2rem, 1.4rem + 2.6vw, 3rem);
  --step-4: clamp(2.4rem, 1.4rem + 4.2vw, 4.5rem);

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: clamp(4.5rem, 3rem + 6vw, 8rem);
  --wrap: 75rem;
  --measure: 66ch;
  --radius: 8px;         /* botones, campos y cajas pequeñas */
  --radius-card: 12px;   /* paneles */
  --radius-chip: 6px;    /* etiquetas */
  --header-h: 4.25rem;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dot: #D2D2D2;        /* retícula de puntos del tablero */

  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #090909;
    --surface: #161616;
    --ink: #F5F5F5;
    --ink-2: #ABABAB;
    --line: #262626;
    --line-strong: #707070;
    --band: #161616;
    --band-ink: #F5F5F5;
    --band-ink-2: #ABABAB;
    --band-line: #2E2E2E;
    --hatch: #1E1E1E;
    --focus: #FFFFFF;
    --danger: #FF6B72;
    --dot: #2E2E2E;
  }
}
:root[data-theme="dark"] {
  --paper: #090909;
  --surface: #161616;
  --ink: #F5F5F5;
  --ink-2: #ABABAB;
  --line: #262626;
  --line-strong: #707070;
  --band: #161616;
  --band-ink: #F5F5F5;
  --band-ink-2: #ABABAB;
  --band-line: #2E2E2E;
  --hatch: #1E1E1E;
  --focus: #FFFFFF;
  --danger: #FF6B72;
  --dot: #2E2E2E;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-padding-top: calc(env(safe-area-inset-top, 0px) + var(--header-h) + 1rem);
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
img, svg { max-width: 100%; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
h1, h2, h3, h4, .h2, .h3 {
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
h3, h4 { line-height: 1.2; font-weight: 600; }
.h2, .h3 { font-weight: 700; }
strong, b { font-weight: 600; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; }
button, a, [role="button"], [role="tab"] {
  touch-action: manipulation;
}
button, [role="tab"], .btn { -webkit-user-select: none; user-select: none; }

.wrap { width: min(100% - 2.5rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px), var(--wrap)); margin-inline: auto; }
.section { padding-block: var(--space-6); }
.section + .section { border-top: 1px solid var(--line); }
/* Sección sobre fondo suave: da ritmo sin recurrir a tarjetas */
.section-soft { background: var(--surface); }
.section-soft, .section-soft + .section, .section-soft + .closing { border-top: 0; }
.measure { max-width: var(--measure); }
.lead { font-size: var(--step-1); line-height: 1.5; color: var(--ink); }
.muted { color: var(--ink-2); }
.stack > * + * { margin-top: var(--space-2); }
.stack-lg > * + * { margin-top: var(--space-3); }

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 0.75rem 1rem; border-radius: var(--radius);
}
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + 0.75rem); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem; padding: 0.75rem 1.4rem;
  border-radius: var(--radius); border: 2px solid transparent;
  font-weight: 500; font-size: 1rem; letter-spacing: 0.005em;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.btn:active { transform: scale(0.97); }
.btn[disabled] { opacity: 0.35; cursor: default; transform: none; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--accent-hover); }
  .btn-secondary:not([disabled]):hover { background: var(--ink); color: var(--paper); }
}

/* ---------- Cabecera ---------- */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.header-row { display: flex; align-items: center; gap: var(--space-3); min-height: var(--header-h); }

/* Marca: símbolo GTe + nombre, tomando como referencia el logo horizontal.
   Son PNG recortados de los originales (assets/brand/originales) hasta tener los SVG maestros. */
.brand { display: inline-flex; align-items: center; gap: 0.7rem; flex: none; margin-right: auto; text-decoration: none; }
.brand picture, .brand-name { display: block; line-height: 0; }
.brand img { display: block; width: auto; max-width: none; }
.brand-mark { height: 3rem; }
.brand-name img { height: 1.05rem; }
@media (max-width: 29.99rem) { .site-header .brand-name { display: none; } }

.nav-list { display: none; list-style: none; gap: var(--space-3); }
.nav-list a {
  text-decoration: none; font-size: 0.975rem; font-weight: 500; color: var(--ink-2);
  padding-block: 0.4rem; border-bottom: 2px solid transparent;
}
.nav-list a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
@media (hover: hover) and (pointer: fine) { .nav-list a:hover { color: var(--ink); } }
.header-cta { min-height: 2.6rem; padding: 0.5rem 1.1rem; }
.menu-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: transparent; cursor: pointer;
}
.menu-toggle { transition: transform 160ms var(--ease-out); }
.menu-toggle svg { width: 1.25rem; height: 1.25rem; overflow: visible; }
.menu-toggle line { stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; transform-box: fill-box; transform-origin: center; transition: transform 200ms var(--ease-in-out), opacity 120ms ease; }
.menu-toggle[aria-expanded="true"] line:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] line:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] line:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
/* Se despliega bajo la cabecera, sin empujar la página. Sale más rápido de lo que entra. */
.mobile-nav {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--paper); border-bottom: 1px solid var(--line);
  max-height: calc(100svh - var(--header-h) - env(safe-area-inset-top, 0px)); overflow-y: auto; overscroll-behavior: contain;
  visibility: hidden; clip-path: inset(0 0 100% 0);
  transition: clip-path 160ms var(--ease-out), visibility 0s linear 160ms;
}
.mobile-nav.is-open { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path 240ms var(--ease-out), visibility 0s; }
.mobile-nav.no-anim { transition: none; }
.mobile-nav ul { list-style: none; width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; padding-block: var(--space-1) var(--space-3); }
.mobile-nav li:last-child a { border-bottom: 0; }
/* Sin JavaScript el botón no puede abrir nada: el menú queda a la vista */
html:not(.js) .mobile-nav { position: static; visibility: visible; clip-path: none; max-height: none; border-bottom: 0; border-top: 1px solid var(--line); }
html:not(.js) .menu-toggle { display: none; }
.mobile-nav a { display: block; padding: 0.85rem 0; text-decoration: none; font-size: 1.15rem; font-weight: 500; border-bottom: 1px solid var(--line); }
.mobile-nav a[aria-current="page"] { font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }
@media (min-width: 64rem) {
  .nav-list { display: flex; }
  .menu-toggle, .mobile-nav { display: none !important; }
}

/* ---------- Hero ---------- */
.hero { padding-block: var(--space-5); }
.hero-grid { display: grid; gap: var(--space-5); align-items: center; }
.hero h1 { font-size: var(--step-4); letter-spacing: -0.022em; max-width: 14ch; }
.hero-copy > * + * { margin-top: var(--space-3); }
.hero .lead { max-width: 40ch; }
.hero .sub { color: var(--ink-2); max-width: 52ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; padding-top: var(--space-1); }
@media (min-width: 62rem) { .hero-grid { grid-template-columns: 1.08fr 1fr; gap: var(--space-5); } }

.links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.links line { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }

/* ---------- Si te vas un mes ---------- */
.split { display: grid; gap: var(--space-4); }
@media (min-width: 62rem) { .split { grid-template-columns: 5fr 7fr; gap: var(--space-5); } }
.h2 { font-size: var(--step-3); }
.h3 { font-size: var(--step-2); }
.question-list { list-style: none; border-top: 1px solid var(--line); }
.question-list li {
  padding: 0.85rem 0 0.85rem 1.75rem; border-bottom: 1px solid var(--line); position: relative;
}
.question-list li::before {
  content: ""; position: absolute; left: 0.2rem; top: 1.45rem; width: 0.7rem; height: 0.7rem;
  border: 1.5px solid var(--ink); border-radius: 50%; background: var(--paper);
}
.pull {
  font-size: var(--step-2); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em;
  max-width: 28ch; text-wrap: balance;
}
.mark { color: var(--accent); }
.invisible-system { margin-top: var(--space-6); display: grid; gap: var(--space-4); }
@media (min-width: 62rem) { .invisible-system { grid-template-columns: 5fr 7fr; gap: var(--space-5); } }
.inline-list { color: var(--ink-2); }

/* ---------- Autodiagnóstico ---------- */
.diag {
  margin-top: var(--space-4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: clamp(1.25rem, 1rem + 2vw, 2.5rem);
}
.diag-progress { display: flex; align-items: center; gap: 1rem; font-size: var(--step--1); color: var(--ink-2); }
.diag-bar { flex: 1; height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }
.diag-bar span { display: block; height: 100%; width: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left center; transition: transform 240ms var(--ease-out); }
.diag-body { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
.diag-q { font-size: var(--step-2); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; max-width: 30ch; text-wrap: balance; }
@media (min-width: 62rem) { .diag-body { grid-template-columns: 5fr 6fr; gap: var(--space-5); align-items: start; } }
.diag-options { display: grid; gap: 0.6rem; max-width: 36rem; }
.diag-option {
  text-align: left; min-height: 3.25rem; padding: 0.8rem 1rem;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius); background: var(--paper);
  cursor: pointer; font-size: 1.05rem; line-height: 1.35;
  transition: border-color 140ms, background-color 140ms, transform 120ms var(--ease-out);
}
.diag-option:active { transform: scale(0.99); }
.diag-option[aria-pressed="true"] { border-color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, var(--paper)); }
@media (hover: hover) and (pointer: fine) { .diag-option:hover { border-color: var(--ink); } }
.diag-nav { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-3); gap: 1rem; }
.link-btn {
  background: none; border: 0; padding: 0.5rem 0; cursor: pointer; color: var(--ink-2);
  text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; font-size: 1rem;
}
.link-btn[disabled] { visibility: hidden; }
.diag-result h3 { font-size: var(--step-2); }
.areas { list-style: none; margin-top: var(--space-3); border-top: 1px solid var(--line); counter-reset: area; }
.areas li { padding: 1rem 0 1rem 2.6rem; border-bottom: 1px solid var(--line); position: relative; counter-increment: area; }
.areas li::before {
  content: counter(area); position: absolute; left: 0; top: 1rem;
  width: 1.8rem; height: 1.8rem; display: grid; place-items: center;
  background: var(--block); color: var(--block-ink); font-weight: 600; border-radius: 50%; font-size: 0.95rem;
}
.areas strong { display: block; font-size: 1.1rem; }
.noscript-list { margin-top: var(--space-3); padding-left: 1.2rem; }

/* ---------- Herramientas ---------- */
.tools { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block: var(--space-3); list-style: none; }
.tools li {
  border: 1px solid var(--line); border-radius: var(--radius-chip); padding: 0.3rem 0.85rem;
  font-size: 0.95rem; background: var(--surface);
}
.symptoms { color: var(--ink-2); }

/* ---------- Viaje de un encargo ---------- */
.journey { margin-top: var(--space-4); }
.rail-wrap { position: relative; }
.rail {
  position: relative; display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x proximity;
  padding: 0.25rem 0 1rem; list-style: none; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
  overscroll-behavior-x: contain;
}
.rail li { flex: 0 0 auto; scroll-snap-align: start; position: relative; }
.rail li + li::before {
  content: ""; position: absolute; left: 0; top: 1.05rem;
  width: 100%; transform: translate(-50%, -50%); height: 1.5px; background: var(--line-strong); z-index: 0;
  transition: background-color 200ms ease;
}
.rail li.reached::before { background: var(--ink); }
.stage {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 0.45rem;
  width: 6.6rem; padding: 0.5rem 0.25rem; background: none; border: 0; cursor: pointer;
  font-size: 0.9rem; line-height: 1.2; color: var(--ink-2);
}
.stage .dot {
  width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--paper);
  transition: transform 160ms var(--ease-out), background-color 160ms;
}
.stage[aria-selected="true"] { color: var(--ink); font-weight: 600; }
.stage[aria-selected="true"] .dot { background: var(--accent); transform: scale(1.35); }
.stage.visited .dot { background: var(--ink); }
.stage[aria-selected="true"].visited .dot { background: var(--accent); }
@media (hover: hover) and (pointer: fine) { .stage:hover { color: var(--ink); } }
.rail-wrap::after { content: none; }
@media (min-width: 75rem) {
  .rail { overflow: visible; }
  .rail li { flex: 1 1 0; min-width: 0; }
  .stage { width: 100%; }
}
.stage-panel {
  display: grid; gap: var(--space-3);
  border-top: 2px solid var(--ink); padding-top: var(--space-3); margin-top: 0.25rem;
}
@media (min-width: 52rem) { .stage-panel { grid-template-columns: 1fr 1.4fr; gap: var(--space-5); } }
.stage-panel h3 { font-size: var(--step-2); }
.stage-panel h4 { font-size: 1rem; font-weight: 600; letter-spacing: 0; margin-bottom: 0.5rem; }
.friction { list-style: none; }
.friction li { padding: 0.65rem 0 0.65rem 1.5rem; border-bottom: 1px solid var(--line); position: relative; }
.friction li::before { content: ""; position: absolute; left: 0; top: 1.2rem; width: 0.8rem; height: 2px; background: var(--ink); }
.stage-nav { display: flex; gap: 0.75rem; margin-top: var(--space-3); }
.stage-nav .btn { min-height: 2.75rem; padding: 0.5rem 1rem; }
.example-note { font-size: var(--step--1); color: var(--ink-2); margin-top: var(--space-2); }
.motto { margin-top: var(--space-5); }
.motto p:first-child { color: var(--ink-2); }

/* ---------- Método ---------- */
.steps { list-style: none; margin-top: var(--space-4); display: grid; border-top: 1px solid var(--line); }
.steps li {
  display: grid; grid-template-columns: 3.2rem 1fr; gap: 0.25rem 1rem;
  padding-block: var(--space-3); border-bottom: 1px solid var(--line);
}
.steps .n { font-weight: 700; font-size: 1.6rem; line-height: 1; padding-top: 0.15rem; }
.steps h3 { font-size: var(--step-1); }
.steps p { grid-column: 2; color: var(--ink-2); max-width: 60ch; }
@media (min-width: 62rem) {
  .steps li { grid-template-columns: 4.5rem 16rem 1fr; align-items: baseline; }
  .steps p { grid-column: 3; }
}
.rule {
  margin-top: var(--space-6); display: grid; gap: var(--space-3);
  border-left: 0; padding: clamp(1.5rem, 1rem + 3vw, 3rem);
  background: var(--block); color: var(--block-ink); border-radius: var(--radius-card);
}
.rule .h2 { max-width: 20ch; }
@media (min-width: 62rem) { .rule { grid-template-columns: 1fr 1fr; column-gap: var(--space-5); } .rule .h2 { grid-row: span 2; } }
.rule p { max-width: 60ch; }

/* ---------- Qué contratas ---------- */
.offer { display: grid; gap: 0; margin-top: var(--space-4); border-top: 2px solid var(--ink); }
.offer article { padding-block: var(--space-3); border-bottom: 1px solid var(--line); display: grid; gap: 0.5rem; align-content: start; }
@media (min-width: 62rem) {
  .offer { grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
  .offer article { border-bottom: 0; padding: var(--space-3) var(--space-3) var(--space-4) 0; }
  .offer article + article { border-left: 1px solid var(--line); padding-left: var(--space-3); }
}
.offer .stage-label { font-weight: 700; font-size: 1.4rem; }
.offer h3 { font-size: var(--step-1); }
.offer p { color: var(--ink-2); }
.next-steps { margin-top: var(--space-5); display: grid; gap: var(--space-3); }
@media (min-width: 62rem) { .next-steps { grid-template-columns: 5fr 7fr; gap: var(--space-5); } }
.next-steps ol { margin: 0; padding: 0; list-style: none; counter-reset: ns; }
.next-steps li { counter-increment: ns; padding: 0.9rem 0 0.9rem 2.6rem; position: relative; border-bottom: 1px solid var(--line); }
.next-steps li::before {
  content: counter(ns); position: absolute; left: 0; top: 0.85rem; width: 1.8rem; height: 1.8rem;
  border: 1.5px solid var(--ink); border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 0.95rem;
}

/* ---------- Banda del sistema (IA local) ---------- */
.band { background: var(--band); color: var(--band-ink); }
.band .muted, .band .lead-2 { color: var(--band-ink-2); }
.band .section + .section, .band.section + .section { border-top: 0; }
.band ::selection { background: var(--accent); color: var(--accent-ink); }
.band .btn-secondary { color: var(--band-ink); border-color: var(--band-ink); }
@media (hover: hover) and (pointer: fine) { .band .btn-secondary:hover { background: var(--band-ink); color: var(--band); } }
.memory { display: grid; gap: var(--space-4); }
@media (min-width: 62rem) { .memory { grid-template-columns: 5fr 7fr; gap: var(--space-5); } }
.teaches { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin-top: var(--space-3); }
.teaches li { border: 1px solid var(--band-line); padding: 0.3rem 0.8rem; border-radius: var(--radius-chip); font-size: 0.95rem; color: var(--band-ink); }
.band-divider { border: 0; border-top: 1px solid var(--band-line); margin-block: var(--space-6); }
.local { display: grid; gap: var(--space-4); }
@media (min-width: 62rem) { .local { grid-template-columns: 5fr 7fr; gap: var(--space-5); align-items: start; } }
.statement {
  font-size: var(--step-4); letter-spacing: -0.022em; font-weight: 700; line-height: 1.08; max-width: 12ch;
}

/* Diagrama C: todo dentro del perímetro del cliente */
.perimeter-diagram { display: grid; gap: 1rem; }
@media (min-width: 40rem) { .perimeter-diagram { grid-template-columns: 1fr auto; align-items: center; } }
.perimeter {
  border: 3px solid var(--accent); border-radius: var(--radius-card); padding: 1.1rem; position: relative;
}
.perimeter-label {
  position: absolute; top: -0.85rem; left: 1rem; background: var(--band); padding: 0 0.5rem;
  color: var(--band-ink); font-weight: 600; font-size: 1rem;
}
.devices { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.4rem; }
.devices span { border: 1px solid var(--band-line); padding: 0.35rem 0.75rem; border-radius: var(--radius); font-size: 0.95rem; }
.flow-down { display: flex; align-items: center; gap: 0.6rem; color: var(--band-ink-2); font-size: 0.9rem; padding: 0.5rem 0 0.5rem 0.9rem; }
.flow-down svg { width: 0.9rem; height: 1.6rem; flex: none; }
.server { border: 1.5px solid var(--band-ink); border-radius: var(--radius); padding: 0.9rem; }
.server h3 { font-size: 1rem; margin-bottom: 0.65rem; letter-spacing: 0; }
.server ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.server li { background: color-mix(in srgb, var(--band-ink) 9%, transparent); border-radius: var(--radius-chip); padding: 0.55rem 0.7rem; font-size: 0.95rem; line-height: 1.3; }
.outside { display: grid; justify-items: center; gap: 0.4rem; text-align: center; color: var(--band-ink-2); font-size: 0.9rem; }
.outside .ext { border: 1.5px dashed var(--band-line); padding: 0.6rem 0.8rem; border-radius: var(--radius); max-width: 11rem; line-height: 1.3; }
.outside .blocked { display: flex; align-items: center; gap: 0.35rem; color: var(--band-ink); font-weight: 500; }
.outside .blocked svg { width: 1.3rem; height: 1.3rem; }
.diagram-caption { margin-top: 1rem; font-weight: 600; color: var(--band-ink); }

.ai-can { display: grid; gap: var(--space-4); }
@media (min-width: 62rem) { .ai-can { grid-template-columns: 5fr 7fr; gap: var(--space-5); } }
.check-list { list-style: none; columns: 1; column-gap: var(--space-4); }
@media (min-width: 40rem) { .check-list { columns: 2; } }
.check-list li { break-inside: avoid; padding: 0.55rem 0 0.55rem 1.6rem; position: relative; border-bottom: 1px solid var(--line); }
.band .check-list li { border-bottom-color: var(--band-line); }
.check-list li::before {
  content: ""; position: absolute; left: 0.1rem; top: 1.05rem; width: 0.7rem; height: 0.4rem;
  border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg);
}
.band .check-list li::before { border-color: var(--accent); }
.decide { margin-top: var(--space-4); font-size: var(--step-1); font-weight: 600; max-width: 40ch; }

.brujula { display: grid; gap: var(--space-4); }
@media (min-width: 62rem) { .brujula { grid-template-columns: 5fr 7fr; gap: var(--space-5); } }
.attention { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--band-line); }
@media (min-width: 40rem) { .attention { grid-template-columns: 1fr 1fr; column-gap: var(--space-4); } }
.attention li { padding: 0.75rem 0; border-bottom: 1px solid var(--band-line); display: flex; gap: 0.75rem; align-items: baseline; }
.attention li span { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--accent); flex: none; transform: translateY(-0.1rem); }

/* ---------- Para quién ---------- */
.sectors { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; margin-block: var(--space-3); }
.sectors li { font-weight: 600; }

/* ---------- Equipo ---------- */
.team { display: grid; gap: var(--space-3) var(--space-4); margin-top: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.person { display: grid; grid-template-columns: 5.5rem 1fr; column-gap: 1rem; row-gap: 0.25rem; align-content: start; }
.portrait {
  grid-row: 1 / span 2; aspect-ratio: 1; border: 1px dashed var(--line-strong); border-radius: var(--radius-card);
  background-color: var(--surface);
  display: grid; place-items: center;
}
.portrait span { font-size: 0.75rem; font-weight: 500; color: var(--ink-2); }
.person strong { font-size: 1.1rem; align-self: end; }
.person p { color: var(--ink-2); font-size: 1rem; }

/* ---------- Cierre ---------- */
.closing { padding-block: var(--space-6); border-top: 1px solid var(--line); }
.closing h2 { font-size: var(--step-4); letter-spacing: -0.022em; max-width: 13ch; }
.no-needs { list-style: none; margin-top: var(--space-4); display: grid; gap: 0.5rem; }
.no-needs li { font-size: var(--step-1); padding-left: 1.6rem; position: relative; }
.no-needs li::before { content: ""; position: absolute; left: 0; top: 0.8rem; width: 0.9rem; height: 2px; background: var(--ink); }
.closing-grid { display: grid; gap: var(--space-4); }
@media (min-width: 62rem) { .closing-grid { grid-template-columns: 1.1fr 1fr; gap: var(--space-5); align-items: end; } }
.closing .final-cta { min-height: 3.5rem; font-size: 1.1rem; padding-inline: 1.6rem; }
.support { margin-top: var(--space-2); color: var(--ink-2); font-size: 1rem; }

/* ---------- Pie ---------- */
.site-footer { background: var(--band); color: var(--band-ink); padding-block: var(--space-5) calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); }
.footer-grid { display: grid; gap: var(--space-3); }
@media (min-width: 52rem) { .footer-grid { grid-template-columns: 1.4fr 1fr; align-items: end; } }
.brand-footer { align-items: center; gap: 1rem; margin-right: 0; }
.brand-footer .brand-mark { height: 4.25rem; }
.brand-footer .brand-text { display: grid; gap: 0.55rem; }
.brand-footer .brand-name img { height: 1.3rem; }
/* Lema corporativo: acompaña al logotipo, como en el logo horizontal */
.lema {
  display: flex; align-items: center; gap: 0.6em; white-space: nowrap;
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1; color: var(--band-ink-2);
}
.lema i { width: 0.34em; height: 0.34em; border-radius: 50%; background: var(--accent); flex: none; }
@media (max-width: 30rem) {
  .brand-footer { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem 0.9rem; }
  .brand-footer .brand-text { display: contents; }
  .brand-footer .brand-mark { height: 3.5rem; }
  .lema { grid-column: 1 / -1; grid-row: 2; letter-spacing: 0.12em; }
}
.site-footer p { color: var(--band-ink-2); }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; list-style: none; }
.footer-links a { color: var(--band-ink); text-decoration: none; padding-block: 0.4rem; display: inline-block; }
@media (hover: hover) and (pointer: fine) { .footer-links a:hover { text-decoration: underline; } }
.band :focus-visible, .site-footer :focus-visible { outline-color: #FFFFFF; }


/* =====================================================================
   Páginas interiores (Cómo trabajamos, IA local y Sistema, Quiénes somos, Contacto)
   ===================================================================== */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.pending-note {
  font-size: var(--step--1); color: var(--ink-2); line-height: 1.4;
  border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 0.55rem 0.75rem;
}
.btn-lg { min-height: 3.5rem; font-size: 1.1rem; padding-inline: 1.6rem; }
.cta-block { margin-top: var(--space-4); }
.statement.wide { max-width: 19ch; }
.cols-2 { display: grid; }
@media (min-width: 40rem) { .cols-2 { grid-template-columns: 1fr 1fr; column-gap: var(--space-4); } }

/* Enlace a otra página del sitio */
.arrow-link {
  display: inline-flex; align-items: center; gap: 0.5rem; padding-block: 0.6rem;
  font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 0.3em;
}
.arrow-link svg { width: 1.1rem; height: 1.1rem; flex: none; transition: transform 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .arrow-link:hover svg { transform: translateX(3px); } }
.more { margin-top: var(--space-3); }

/* Flecha entre los pasos del método (dibujada: la subfamilia latina de Google Fonts no trae U+2192) */
.step-word { white-space: nowrap; }
.arr { display: inline-block; width: 0.62em; height: 0.62em; margin-inline: 0.08em; vertical-align: 0.02em; }

/* ---------- Cabecera de página ---------- */
.page-hero { padding-block: var(--space-5); }
.page-hero-grid { display: grid; gap: var(--space-4); }
.page-hero-grid > * { min-width: 0; }
/* Mínimo algo menor que --step-4: «diagnosticamos» debe caber entero en un móvil de 360 px */
.page-hero h1 { font-size: clamp(2.05rem, 1.1rem + 4.6vw, 4.5rem); letter-spacing: -0.022em; max-width: 17ch; }
.hero-second {
  margin-top: var(--space-3);
  font-size: var(--step-2); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em;
  max-width: 26ch; text-wrap: balance;
}
@media (min-width: 75rem) { .page-hero-grid { grid-template-columns: 7fr 5fr; gap: var(--space-5); align-items: end; } }
.page-hero + .section { border-top: 1px solid var(--line); }

/* ---------- Filas de texto ---------- */
.rows { list-style: none; border-top: 1px solid var(--line); }
.rows li { padding: 0.8rem 0; border-bottom: 1px solid var(--line); }
.band .rows, .band .rows li { border-color: var(--band-line); }
.band .lead { color: var(--band-ink); }

/* ---------- Vida de un encargo, versión estática (gráfico A) ---------- */
.chain {
  list-style: none; counter-reset: chain; margin-top: var(--space-4);
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(6, auto); grid-auto-columns: 1fr; column-gap: var(--space-3);
}
.chain li {
  counter-increment: chain; position: relative;
  display: flex; align-items: center; gap: 0.75rem; padding-block: 0.6rem;
  font-weight: 500; line-height: 1.2;
}
.chain li::before {
  content: counter(chain); position: relative; z-index: 1; flex: none;
  width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink);
  font-size: 0.9rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.chain li::after { content: ""; position: absolute; left: calc(1rem - 0.75px); top: 50%; width: 1.5px; height: 100%; background: var(--ink); }
.chain li:nth-child(6n)::after { content: none; }
@media (min-width: 40rem) {
  .chain { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: repeat(6, 1fr); column-gap: 0; row-gap: var(--space-3); }
  .chain li { flex-direction: column; text-align: center; gap: 0.5rem; padding: 0 0.25rem; font-size: 1rem; }
  .chain li::after { left: 50%; top: 1rem; width: 100%; height: 1.5px; transform: translateY(-50%); }
}
@media (min-width: 75rem) {
  .chain { grid-template-columns: repeat(12, 1fr); }
  .chain li:nth-child(6n)::after { content: ""; }
  .chain li:last-child::after { content: none; }
}
.map-find { margin-top: var(--space-5); }

/* ---------- Bloque de pregunta ---------- */
.rule.tight { margin-top: var(--space-4); }
.rule .impact { list-style: none; display: grid; border-top: 1px solid color-mix(in srgb, var(--block-ink) 35%, transparent); }
.rule .impact li { padding: 0.55rem 0; border-bottom: 1px solid color-mix(in srgb, var(--block-ink) 35%, transparent); font-weight: 500; }
@media (min-width: 40rem) { .rule .impact { grid-template-columns: 1fr 1fr; column-gap: var(--space-4); } }
.rule.rule-stack { display: block; }
.rule.rule-stack > * + * { margin-top: var(--space-3); }
.rule.rule-stack .h2 { font-size: var(--step-2); line-height: 1.3; max-width: 36ch; }

/* ---------- La prueba del lunes ---------- */
.monday { display: grid; gap: var(--space-4); }
@media (min-width: 62rem) { .monday { grid-template-columns: 7fr 5fr; gap: var(--space-5); align-items: end; } }

/* ---------- Dos columnas de igual peso ---------- */
.duo { display: grid; gap: var(--space-5); }
@media (min-width: 52rem) { .duo { grid-template-columns: 1fr 1fr; } }
.tool-rows { display: grid; gap: 0.5rem; }
.tool-rows .tools { margin: 0; }

/* ---------- El encargo como eje ---------- */
.hub-layout { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
@media (min-width: 75rem) { .hub-layout { grid-template-columns: minmax(0, 46rem) 1fr; gap: var(--space-5); align-items: center; } }
.hub { margin: 0; }
.hub-core {
  display: inline-block; background: var(--accent); color: var(--accent-ink);
  border: 0; border-radius: var(--radius); padding: 0.5rem 1.1rem;
  font-weight: 700; font-size: var(--step-1); line-height: 1.2;
}
.hub-spokes { display: none; }
.hub-items {
  list-style: none; position: relative; margin-top: 1.25rem; border-top: 1.5px solid var(--ink);
  display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-3);
}
.hub-items::before { content: ""; position: absolute; left: 1.5rem; top: -1.25rem; width: 1.5px; height: 1.25rem; background: var(--ink); }
.hub-items li { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.hub-items li::before { content: ""; flex: none; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink); }
@media (min-width: 52rem) {
  .hub { position: relative; height: 25rem; max-width: 46rem; }
  .hub-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; }
  .hub-spokes { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
  .hub-spokes line { stroke: var(--ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
  .hub-items { display: block; position: static; margin: 0; border: 0; }
  .hub-items::before, .hub-items li::before { content: none; }
  .hub-items li {
    position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); z-index: 1;
    padding: 0.3rem 0.85rem; border: 1px solid var(--line-strong); border-radius: var(--radius-chip);
    background: var(--surface); white-space: nowrap; font-size: 1rem;
  }
}

/* ---------- Memoria empresarial (gráfico B) ---------- */
.memory-diagram { margin: var(--space-5) 0 0; }
.md-jobs { list-style: none; }
.md-job { position: relative; padding: 0.2rem 0 1.4rem 1.6rem; border-left: 1.5px solid var(--ink); margin-left: 0.5rem; }
.md-job::before {
  content: ""; position: absolute; left: -0.45rem; top: 0.55rem; width: 0.8rem; height: 0.8rem;
  border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink);
}
.md-job strong { display: block; font-size: 1.1rem; }
.md-job ul, .md-store ul { list-style: none; display: flex; flex-wrap: wrap; }
.md-job ul { gap: 0.4rem; margin-top: 0.5rem; }
.md-job ul li { border: 1px solid var(--line-strong); border-radius: var(--radius-chip); padding: 0.2rem 0.7rem; font-size: 0.95rem; background: var(--surface); }
.md-store {
  background: var(--block); color: var(--block-ink); border-radius: var(--radius-card);
  padding: 1rem 1.25rem;
}
.md-store strong { display: block; font-size: var(--step-1); font-weight: 700; line-height: 1.2; }
.md-store ul { gap: 0.15rem 1.1rem; margin-top: 0.4rem; font-weight: 500; }
.memory-diagram figcaption { margin-top: 0.9rem; font-size: var(--step--1); color: var(--ink-2); max-width: var(--measure); }
@media (min-width: 40rem) {
  .md-jobs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
  .md-job {
    margin: 0 0 2.25rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface);
  }
  .md-job::before {
    left: calc(50% - 0.75px); top: 100%; width: 1.5px; height: 2.25rem; border: 0; border-radius: 0; background: var(--ink);
  }
  .md-job ul li { background: var(--paper); }
}
.after-diagram { margin-top: var(--space-5); }

/* ---------- IA local: los datos entran y se quedan (animación 9.3) ---------- */
.flow-down { position: relative; }
.packet {
  position: absolute; left: 1.05rem; top: 0.45rem; width: 0.6rem; height: 0.6rem; border-radius: 50%;
  background: var(--accent); opacity: 0; pointer-events: none;
}
.perimeter-diagram.is-in .packet { animation: packet 1.1s var(--ease-out) 3; }
.perimeter-diagram.is-in .server li { animation: at-work 0.9s ease-out; }
.perimeter-diagram.is-in .server li:nth-child(1) { animation-delay: 1.1s; }
.perimeter-diagram.is-in .server li:nth-child(2) { animation-delay: 1.6s; }
.perimeter-diagram.is-in .server li:nth-child(3) { animation-delay: 2.1s; }
.perimeter-diagram.is-in .server li:nth-child(4) { animation-delay: 2.6s; }
@keyframes packet {
  0% { transform: translateY(0); opacity: 0; }
  15%, 80% { opacity: 1; }
  100% { transform: translateY(1.55rem); opacity: 0; }
}
@keyframes at-work { 30% { background: var(--accent); color: var(--accent-ink); } }

/* ---------- Principios ---------- */
.principles { list-style: none; margin-top: var(--space-4); border-top: 2px solid var(--ink); }
.principles li { padding: 0.9rem 0; border-bottom: 1px solid var(--line); font-size: var(--step-1); line-height: 1.35; font-weight: 500; }
@media (min-width: 52rem) { .principles { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-5); } }

/* ---------- Cierre con titular largo ---------- */
.closing h2.long { font-size: var(--step-3); letter-spacing: -0.02em; max-width: 24ch; }

/* ---------- Contacto ---------- */
.page-hero + .section.contact { border-top: 0; padding-top: 0; }
.contact-grid { display: grid; gap: var(--space-4); }
@media (min-width: 62rem) {
  .contact-grid { grid-template-columns: 5fr 7fr; grid-template-rows: auto 1fr; column-gap: var(--space-5); align-items: start; }
  .contact-grid .form-panel { grid-column: 2; grid-row: 1 / span 2; }
  .contact-grid .contact-details { grid-column: 1; }
}
.form-panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: clamp(1.25rem, 1rem + 2vw, 2.5rem);
  scroll-margin-top: calc(env(safe-area-inset-top, 0px) + var(--header-h) + 1rem);
}
.form { display: grid; gap: var(--space-3); }
.form-intro { color: var(--ink-2); }
.field, .field-group { display: grid; gap: 0.4rem; align-content: end; }
.field-row { display: grid; gap: var(--space-3); }
@media (min-width: 40rem) { .field-row { grid-template-columns: 1fr 1fr; } }
.field label { font-weight: 500; font-size: 1rem; line-height: 1.3; }
.hint { font-size: var(--step--1); color: var(--ink-2); }
.input {
  width: 100%; min-height: 3.25rem; padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius);
  background: var(--paper); color: var(--ink); caret-color: var(--ink);
  font: inherit; line-height: 1.4;
  transition: border-color 140ms;
}
textarea.input { min-height: 8.5rem; resize: vertical; }
.input:focus-visible { outline-offset: 2px; border-color: var(--ink); }
.input[aria-invalid="true"] { border-color: var(--danger); border-width: 2px; }
@media (hover: hover) and (pointer: fine) { .input:hover { border-color: var(--ink); } }
.field-error { color: var(--danger); font-size: 0.95rem; font-weight: 500; line-height: 1.35; }
.form[hidden], .field-error[hidden], .form-status[hidden], .form-success[hidden] { display: none !important; }
.form-actions { display: grid; gap: var(--space-2); justify-items: start; }
.form-status { border: 1.5px solid var(--line-strong); border-radius: var(--radius); padding: 0.75rem 0.9rem; font-size: 1rem; line-height: 1.4; }
.form-status.is-error { border-color: var(--danger); color: var(--danger); font-weight: 500; }
.form-status.is-pending { border-style: dashed; background: var(--surface); }
.form-success:focus { outline: none; }
.contact-details dl { margin: var(--space-2) 0 0; border-top: 1px solid var(--line); }
.contact-details dl > div { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
.contact-details dt { font-weight: 500; }
.contact-details dd { margin: 0; color: var(--ink-2); }

/* ---------- Ajustes de la Home en la versión multipágina ---------- */
.diag-after { margin-top: var(--space-4); }
.section-soft .diag { background: var(--paper); }
.section-soft .diag-option { background: var(--surface); }
.section-soft .diag-option[aria-pressed="true"] { background: color-mix(in srgb, var(--ink) 12%, var(--surface)); }
.offer-close { margin-top: var(--space-4); max-width: 34ch; }

/* =====================================================================
   Movimiento
   Tesis: la información se conecta. Las líneas se trazan y los nodos se
   encienden cuando el diagrama entra en pantalla, una sola vez. El resto
   del movimiento solo confirma acciones (pulsar, cambiar de etapa, abrir
   el menú). Nada se repite en bucle y nada entra "porque sí".
   El contenido es visible sin JavaScript: los estados ocultos dependen
   de la clase .js que se añade en el <head>.
   ===================================================================== */

/* ---------- Transición entre páginas (fundido; la cabecera no parpadea) ---------- */
@view-transition { navigation: auto; }
/* Al cambiar de página, la que se va sube y se desvanece; la nueva entra desde abajo. La cabecera no se mueve. */
@keyframes page-out { to { opacity: 0; transform: translateY(-2.5rem); } }
@keyframes page-in { from { opacity: 0; transform: translateY(3.5rem); } }
::view-transition-old(root) { animation: page-out 240ms ease both; }
::view-transition-new(root) { animation: page-in 520ms var(--ease-out) 140ms both; }
/* Navegadores sin transición nativa entre páginas: mismo efecto sobre el contenido */
.no-vt main, .no-vt .site-footer { animation: page-in 520ms var(--ease-out) both; }
.no-vt.is-leaving main, .no-vt.is-leaving .site-footer { animation: page-out 220ms ease both; }
.site-header { view-transition-name: site-header; }

/* ---------- Frase destacada: pasa a rojo al llegar a ella ---------- */
.js .mark { color: inherit; transition: color 600ms ease 200ms; }
.js .mark.is-in { color: var(--accent); }

/* ---------- Hero: la línea del encargo recorre la empresa ---------- */
@keyframes draw-line { from { transform: scale(0); } }
@keyframes pop-in { from { opacity: 0; transform: scale(0.85); } }
.links line { transform-origin: var(--o); }

/* ---------- Vida de un encargo (estática): la cadena se construye etapa a etapa ---------- */
.chain li { transition: opacity 240ms ease calc(var(--i, 0) * 55ms); }
.chain li::after { transform: scaleY(1); transform-origin: center top; transition: transform 320ms var(--ease-out) calc(var(--i, 0) * 55ms + 80ms); }
@media (min-width: 40rem) { .chain li::after { transform: translateY(-50%) scaleX(1); transform-origin: left center; } }
.js .chain:not(.is-in) li { opacity: 0; }

/* ---------- El encargo como eje: los radios salen del centro ---------- */
.hub-items li { transition: opacity 240ms ease calc(var(--i, 0) * 30ms); }
.js .hub:not(.is-in) .hub-items li { opacity: 0; }
@media (min-width: 52rem) {
  .hub-spokes line { transform-origin: 50px 50px; transition: transform 380ms var(--ease-out) calc(var(--i, 0) * 40ms); }
  .hub-items li { transform: translate(-50%, -50%) scale(1); transition: opacity 240ms ease calc(var(--i, 0) * 40ms + 220ms), transform 240ms var(--ease-out) calc(var(--i, 0) * 40ms + 220ms); }
}

/* ---------- Memoria empresarial: cada encargo desemboca en la memoria ---------- */
.md-job:nth-child(2) { --i: 1; }
.md-job:nth-child(3) { --i: 2; }
.md-store { transition: opacity 320ms ease 480ms, transform 320ms var(--ease-out) 480ms; }
.js .memory-diagram:not(.is-in) .md-store { opacity: 0; }
@media (min-width: 40rem) {
  .md-job::before { transform-origin: center top; transition: transform 300ms var(--ease-out) calc(var(--i, 0) * 90ms + 120ms); }
}

/* Los estados con desplazamiento o trazado solo existen si el visitante no ha pedido reducir el movimiento */
@media (prefers-reduced-motion: no-preference) {
  .js .chain:not(.is-in) li::after { transform: scaleY(0); }
  .js .memory-diagram:not(.is-in) .md-store { transform: translateY(8px); }
  @media (min-width: 40rem) {
    .js .chain:not(.is-in) li::after { transform: translateY(-50%) scaleX(0); }
    .js .memory-diagram:not(.is-in) .md-job::before { transform: scaleY(0); }
  }
  @media (min-width: 52rem) {
    .js .hub:not(.is-in) .hub-spokes line { transform: scale(0); }
    .js .hub:not(.is-in) .hub-items li { transform: translate(-50%, -50%) scale(0.95); }
  }
}

/* ---------- Respuesta al toque: sin resaltado del navegador, cada control responde al pulsar ---------- */
.menu-toggle:active { transform: scale(0.97); }
.mobile-nav a:active { background: var(--surface); }
.stage:active .dot { transform: scale(0.9); }
.arrow-link:active, .footer-links a:active, .link-btn:active, .nav-list a:active, .brand:active { opacity: 0.65; }
a.btn, .arrow-link, .brand { -webkit-touch-callout: none; }

/* ---------- Movimiento reducido: sin trazados ni desplazamientos; quedan los fundidos ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; transition-delay: 0s !important; }
  .btn, .diag-option, .menu-toggle, .stage .dot, .arrow-link svg, .menu-toggle line, .diag-bar span, .mobile-nav { transition-duration: 0.01ms !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  .no-vt main, .no-vt .site-footer { animation: none !important; }
}

/* Sobre fondo suave, etiquetas y marcadores pasan a blanco para no fundirse con el fondo */
.section-soft .tools li, .section-soft .chain li::before, .section-soft .question-list li::before { background: var(--paper); }

/* =====================================================================
   Pictogramas y gráficos de apoyo
   El motivo del hero (pictograma en círculo, línea, punto rojo) se repite
   en las secciones para que cada idea tenga su imagen, sin fotos de banco.
   ===================================================================== */
.pic {
  display: inline-grid; place-items: center; flex: none; width: 3.25rem; aspect-ratio: 1; border-radius: 50%;
  border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink);
}
.pic svg { width: 54%; height: 54%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Un mes fuera: treinta días y lo que ocurre en ellos sin que nadie lo vea */
.month { max-width: 20rem; padding-top: var(--space-2); }
.month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.4rem; }
.month-grid i { aspect-ratio: 1; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); position: relative; }
.month-grid .ev::after {
  content: ""; position: absolute; inset: 27%; border-radius: 50%; background: var(--accent);
  transition: opacity 240ms ease calc(var(--i) * 120ms + 150ms), transform 240ms var(--ease-out) calc(var(--i) * 120ms + 150ms);
}
.js .month:not(.is-in) .ev::after { opacity: 0; }

/* Dónde vive hoy el conocimiento: disperso hasta que una línea lo une */
.sources {
  grid-column: 1 / -1; list-style: none; position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem 0.5rem;
}
.sources li {
  position: relative; z-index: 1; display: grid; justify-items: center; gap: 0.5rem; text-align: center;
  font-size: 0.9rem; font-weight: 500; line-height: 1.25;
  transition: opacity 320ms ease calc(var(--i) * 70ms);
}
.js .sources:not(.is-in) li { opacity: 0.35; }
@media (min-width: 52rem) {
  .sources { grid-template-columns: repeat(7, 1fr); }
  .sources::before {
    content: ""; position: absolute; left: 7.14%; right: 7.14%; top: 1.625rem; height: 1.5px; background: var(--ink);
    transform-origin: left center; transition: transform 800ms var(--ease-out) 250ms;
  }
}

/* Método: cada paso con su pictograma */
.steps li { grid-template-columns: 3.25rem 1fr; align-items: center; }
.steps .pic { grid-row: span 2; align-self: start; }
.steps .n { font-size: 0.85rem; font-weight: 600; color: var(--ink-2); padding: 0; margin-right: 0.5rem; font-variant-numeric: tabular-nums; }
@media (min-width: 62rem) {
  .steps li { grid-template-columns: 4.5rem 16rem 1fr; align-items: center; }
  .steps .pic { grid-row: auto; align-self: center; }
}

/* Sectores */
.sectors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1rem; }
.sectors li { display: flex; align-items: center; gap: 0.75rem; margin: 0; padding: 0; border: 0; font-size: 1.05rem; line-height: 1.25; }
@media (min-width: 40rem) { .sectors { grid-template-columns: repeat(3, 1fr); } }
/* En móvil, pictograma sobre rótulo: caben dos por fila sin apretar */
@media (max-width: 29.99rem) { .sectors li { flex-direction: column; text-align: center; gap: 0.45rem; font-size: 0.95rem; } }

/* Brújula: la aguja busca el norte al llegar a la sección */
.compass { display: block; width: 6.5rem; height: 6.5rem; }
.compass .c-ring { fill: none; stroke: currentColor; stroke-width: 1.5; }
.compass .c-ticks line { stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; opacity: 0.55; }
.compass .n-north { fill: var(--accent); }
.compass .n-south { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.compass .c-hub { fill: currentColor; }
.compass .needle { transform-origin: 60px 60px; transform: rotate(32deg); transition: transform 1100ms var(--ease-out) 200ms; }

@media (prefers-reduced-motion: no-preference) {
  .js .month:not(.is-in) .ev::after { transform: scale(0.85); }
  .js .compass:not(.is-in) .needle { transform: rotate(-75deg); }
  @media (min-width: 52rem) { .js .sources:not(.is-in)::before { transform: scaleX(0); } }
}

/* =====================================================================
   Una pantalla por sección (Home)
   En pantallas de escritorio cada bloque ocupa exactamente el alto visible
   y el scroll encaja de bloque en bloque. En móvil y en ventanas bajas el
   contenido fluye de forma normal: forzarlo obligaría a recortar texto.
   ===================================================================== */
.screen-nav { display: none; }

@media (min-width: 62rem) and (min-height: 40rem) {
  html:has(.screen) { scroll-snap-type: y proximity; scroll-padding-top: calc(env(safe-area-inset-top, 0px) + var(--header-h)); }
  .screen {
    min-height: calc(100svh - var(--header-h) - env(safe-area-inset-top, 0px));
    display: grid; grid-template-columns: minmax(0, 1fr); align-content: center;
    padding-block: clamp(1.5rem, 5vh, 4rem);
    scroll-snap-align: start;
  }
  html:has(.screen) .site-footer { scroll-snap-align: end; }
  .screen .invisible-system, .screen .journey, .screen .rule, .screen .next-steps, .screen .motto { margin-top: 0; }
  .band .screen + .screen { border-top: 1px solid var(--band-line); }

  /* Bloques que necesitan apretarse para caber en una pantalla */
  .screen .steps { margin-top: var(--space-3); }
  .screen .steps li { padding-block: clamp(0.7rem, 1.9vh, 1.25rem); }
  .screen .sources { margin-top: var(--space-3); }
  .screen .stage-panel { min-height: 11.5rem; align-content: start; }
  .diag-layout {
    display: grid; grid-template-columns: 5fr 7fr; grid-template-rows: auto 1fr; column-gap: var(--space-5);
    grid-template-areas: "intro panel" "after panel"; align-items: start;
  }
  .diag-layout > .stack-lg { grid-area: intro; }
  .diag-layout > .diag { grid-area: panel; margin-top: 0; }
  .diag-layout > .diag-after { grid-area: after; }
  .diag-layout .diag-body { grid-template-columns: 1fr; gap: var(--space-3); min-height: 19rem; align-content: start; }
  /* Los titulares grandes ceden con el alto de la ventana para que la pantalla quepa entera */
  .screen.hero h1, .screen .statement, .screen.closing h2 { font-size: clamp(2.4rem, min(1.4rem + 4.2vw, 7.6vh), 4.5rem); }
  .screen .h2 { font-size: clamp(1.9rem, min(1.4rem + 2.6vw, 5.4vh), 3rem); }
  .screen.hero { padding-block: clamp(1rem, 3vh, 3rem); }
  .screen .hero-copy > * + * { margin-top: clamp(1rem, 2.6vh, 1.5rem); }
  .screen .question-list li { padding-block: clamp(0.5rem, 1.4vh, 0.85rem); }
  .screen .question-list li::before { top: calc(clamp(0.5rem, 1.4vh, 0.85rem) + 0.6rem); }
  .screen .month { max-width: 16rem; }

  /* Método: titular a la izquierda, los cinco pasos a la derecha */
  .method-layout { display: grid; grid-template-columns: 4fr 8fr; column-gap: var(--space-5); align-items: center; }
  .method-layout .steps { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  .method-layout .more { grid-column: 1; align-self: start; }
  .method-layout h2 { align-self: end; }
  .method-layout .steps li { grid-template-columns: 3.25rem 1fr; align-items: start; column-gap: 1rem; row-gap: 0.15rem; padding-block: clamp(0.6rem, 1.5vh, 1rem); }
  .method-layout .steps .pic { grid-row: 1 / span 2; align-self: center; }
  .method-layout .steps p { grid-column: 2; font-size: clamp(0.9rem, 1.9vh, 1rem); line-height: 1.5; max-width: none; }
  .method-layout .steps h3 { font-size: 1.15rem; }

  /* Qué contratas e IA local, algo más compactos */
  .screen .offer { margin-top: var(--space-3); }
  .screen .offer article { padding-bottom: var(--space-3); }
  .screen .offer p { font-size: 1rem; }
  .screen .offer-close { margin-top: var(--space-3); }
  .screen .local .measure { font-size: 1rem; }
  .screen .local > * + *, .screen .local .stack-lg > * + * { margin-top: clamp(0.9rem, 2vh, 1.5rem); }
  .screen .local > * + * { margin-top: 0; }
  .screen .perimeter { padding: 0.9rem; }
  .screen .diagram-caption { margin-top: 0.5rem; }

  /* Índice lateral de pantallas */
  .screen-nav {
    display: flex; flex-direction: column; gap: 0.15rem;
    position: fixed; z-index: 40; right: max(0.6rem, env(safe-area-inset-right, 0px)); top: calc(50% + var(--header-h) / 2); transform: translateY(-50%);
    list-style: none;
  }
  .screen-nav a { position: relative; display: grid; place-items: center; width: 1.75rem; height: 1.2rem; }
  .screen-nav a::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: #8A8A8A; transition: transform 160ms var(--ease-out), background-color 160ms ease; }
  .screen-nav a[aria-current="true"]::before { background: var(--accent); transform: scale(1.5); }
  .screen-nav span {
    position: absolute; right: 100%; top: 50%; transform: translateY(-50%); white-space: nowrap; pointer-events: none;
    padding: 0.25rem 0.6rem; border-radius: var(--radius-chip); background: var(--ink); color: var(--paper);
    font-size: 0.8rem; font-weight: 500; line-height: 1.3; opacity: 0; transition: opacity 120ms ease;
  }
  .screen-nav a:focus-visible span { opacity: 1; }
  @media (hover: hover) and (pointer: fine) {
    .screen-nav a:hover::before { background: var(--accent); }
    .screen-nav a:hover span { opacity: 1; }
  }
}
/* Con alto suficiente, el encaje es estricto: nunca queda media sección a la vista */
@media (min-width: 62rem) and (min-height: 50rem) {
  html:has(.screen) { scroll-snap-type: y mandatory; }
}
/* Monitores muy anchos: todo crece un poco para no quedar pequeño en el centro */
@media (min-width: 110rem) {
  :root { --wrap: 82rem; }
  html { font-size: 112.5%; }
}

/* =====================================================================
   Desplegable de Inicio, panel «Hablemos» y paso entre pantallas
   ===================================================================== */

/* ---------- Desplegable con los apartados de Inicio ---------- */
.has-menu { position: relative; display: flex; align-items: center; gap: 0.1rem; }
.submenu-toggle {
  display: grid; place-items: center; width: 1.6rem; height: 1.9rem; padding: 0;
  background: none; border: 0; border-radius: var(--radius-chip); color: var(--ink-2); cursor: pointer;
}
.submenu-toggle svg { width: 0.75rem; height: 0.75rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms var(--ease-out); }
.submenu {
  position: absolute; left: -0.9rem; top: calc(100% + 0.55rem); z-index: 60; list-style: none;
  width: 31rem; columns: 2; column-gap: 0.4rem; padding: 0.6rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card);
  box-shadow: 0 14px 34px -16px rgb(0 0 0 / 0.28);
  visibility: hidden; opacity: 0; transform: translateY(-4px) scale(0.98); transform-origin: 2rem top;
  transition: opacity 140ms ease, transform 140ms var(--ease-out), visibility 0s linear 140ms;
}
/* Puente invisible para que el ratón pueda bajar del enlace al panel sin que se cierre */
.submenu::before { content: ""; position: absolute; left: 0; right: 0; top: -0.7rem; height: 0.7rem; }
.submenu li { break-inside: avoid; }
.nav-list .submenu a {
  display: block; padding: 0.42rem 0.65rem; border: 0; border-radius: var(--radius-chip);
  font-size: 0.925rem; font-weight: 400; color: var(--ink);
}
.has-menu.is-open .submenu { visibility: visible; opacity: 1; transform: none; transition: opacity 180ms ease, transform 180ms var(--ease-out), visibility 0s; }
.has-menu.is-open .submenu-toggle svg { transform: rotate(180deg); }
.nav-list .submenu a:active { background: var(--surface); }
@media (hover: hover) and (pointer: fine) {
  .has-menu:hover .submenu { visibility: visible; opacity: 1; transform: none; transition: opacity 180ms ease, transform 180ms var(--ease-out), visibility 0s; }
  .has-menu:hover .submenu-toggle svg { transform: rotate(180deg); }
  .nav-list .submenu a:hover { background: var(--surface); }
  .submenu-toggle:hover { color: var(--ink); }
}
/* En el menú móvil, los apartados van en un bloque plegable */
.mobile-sub summary { padding: 0.85rem 0; font-size: 1rem; font-weight: 500; color: var(--ink-2); cursor: pointer; border-bottom: 1px solid var(--line); }
.mobile-sub ul { width: auto; margin: 0; padding: 0 0 0 1rem; }
.mobile-sub a { font-size: 1rem; font-weight: 400; padding: 0.7rem 0; }

/* ---------- Panel «Hablemos»: contacto rápido sin salir de la página ---------- */
.talk {
  width: min(100% - 2rem, 31rem); max-height: min(100dvh - 2rem, 46rem); overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(1.25rem, 4vw, 2rem); border: 1px solid var(--line); border-radius: 16px;
  background: var(--paper); color: var(--ink);
}
.talk::backdrop { background: rgb(9 9 9 / 0.55); }
/* Entrada del panel: site.js añade .is-shown un fotograma después de abrirlo (ver el comentario allí) */
.talk { opacity: 0; transform: translateY(10px) scale(0.97); }
.talk::backdrop { opacity: 0; }
.talk.is-shown { opacity: 1; transform: none; transition: opacity 240ms ease, transform 300ms var(--ease-out); }
.talk.is-shown::backdrop { opacity: 1; transition: opacity 240ms ease; }
.talk.is-shown.no-anim, .talk.is-shown.no-anim::backdrop { transition: none; }
@media (prefers-reduced-motion: reduce) { .talk.is-shown, .talk.is-shown::backdrop { transition: none; } }
@keyframes talk-in { from { opacity: 0; transform: translateY(8px) scale(0.97); } }
@keyframes talk-fade { from { opacity: 0; } }
.talk-head { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.talk h2 { font-size: var(--step-2); }
.talk-close {
  flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin: -0.5rem -0.5rem 0 0;
  background: none; border: 0; border-radius: var(--radius); cursor: pointer; color: var(--ink-2);
  transition: transform 160ms var(--ease-out);
}
.talk-close:active { transform: scale(0.97); }
.talk-close svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.talk .form { margin-top: var(--space-3); gap: var(--space-2); }
.talk .form-intro { margin-top: 0.5rem; }
.talk textarea.input { min-height: 5.5rem; }
.talk-more { font-size: 0.95rem; color: var(--ink-2); }

/* ---------- Paso entre pantallas: el contenido de cada pantalla entra con suavidad ---------- */
@media (min-width: 62rem) and (min-height: 40rem) and (prefers-reduced-motion: no-preference) {
  .js .screen:not(.hero):not(.page-hero) > .wrap { transition: opacity 600ms ease, transform 700ms var(--ease-out); }
  .js .screen:not(.hero):not(.page-hero):not(.is-in) > .wrap { opacity: 0; transform: translateY(1.25rem); }
}
@media (min-width: 62rem) and (min-height: 40rem) {
  .screen .memory-diagram, .screen .map-find { margin-top: 0; }
}

/* =====================================================================
   Profundidad y color
   Pantallas con fondo propio (negro, grafito, rojo de marca), tarjetas con
   borde y sombra, y un menú y un panel de contacto más trabajados.
   Todo con la paleta corporativa: rojo, grafito, blanco y negro.
   ===================================================================== */
:root {
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.05), 0 12px 28px -14px rgb(0 0 0 / 0.22);
  --shadow-2: 0 2px 6px rgb(0 0 0 / 0.06), 0 30px 60px -24px rgb(0 0 0 / 0.38);
  --radius-card: 14px;
}

/* ---------- Pantallas con color: las variables cambian y todo lo de dentro se adapta ---------- */
/* .band entra aquí para que todo lo que se meta en una banda negra herede colores de fondo oscuro */
.band, .screen-dark, .screen-graphite, .closing {
  --paper: #090909; --surface: #161616; --ink: #FFFFFF; --ink-2: #B8B8B8; --line: #2C2C2C; --line-strong: #6E6E6E;
  --hatch: #1E1E1E; --dot: #2E2E2E; --focus: #FFFFFF; --shadow-1: none;
  background: var(--paper); color: var(--ink);
}
.screen-graphite { --paper: #1F1F1F; --surface: #2B2B2B; --line: #3A3A3A; }
.screen-red {
  --paper: var(--red); --surface: rgb(255 255 255 / 0.14); --ink: #FFFFFF; --ink-2: #FFFFFF; --line: rgb(255 255 255 / 0.4); --line-strong: rgb(255 255 255 / 0.7);
  --accent: #FFFFFF; --accent-ink: var(--red); --accent-hover: #F5F5F5; --focus: #FFFFFF; --shadow-1: none;
  background: var(--red); color: #FFFFFF;
}
.screen-dark, .screen-graphite, .screen-red, .closing,
.screen-dark + .section, .screen-graphite + .section, .screen-red + .section, .section + .closing { border-top: 0; }
.screen-red .h2 { font-size: var(--step-4); letter-spacing: -0.022em; line-height: 1.05; }
.screen-red .motto p:first-child { font-size: var(--step-2); font-weight: 600; }
.screen-red .motto .muted { font-size: var(--step-1); max-width: 46ch; }
/* Resplandores: un toque de rojo en el hero, en Brújula y en el cierre */
.screen.hero, .page-hero.screen {
  background:
    radial-gradient(52rem 30rem at 90% 6%, rgb(230 20 32 / 0.09), transparent 62%),
    radial-gradient(42rem 26rem at 0% 100%, rgb(70 70 70 / 0.08), transparent 60%),
    var(--paper);
}
.closing, .band .glow {
  background: radial-gradient(50rem 30rem at 88% 0%, rgb(230 20 32 / 0.26), transparent 62%), #090909;
}
.closing .muted, .closing .support { color: var(--ink-2); }
.closing + .site-footer { border-top: 1px solid #2C2C2C; }

/* ---------- Tarjetas: borde, radio y sombra ---------- */
.diag, .form-panel { box-shadow: var(--shadow-1); }
.pic { box-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 8px 16px -10px rgb(0 0 0 / 0.3); }
.steps .pic, .sectors .pic { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.tools li, .hub-items li { box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); }
.rule { border-radius: 18px; box-shadow: var(--shadow-2); }
.md-store { box-shadow: var(--shadow-2); }
.md-job { box-shadow: var(--shadow-1); }

.question-list, .next-steps ol, .rows {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: 0.2rem 1.25rem; box-shadow: var(--shadow-1);
}
.question-list li:last-child, .next-steps li:last-child, .rows li:last-child { border-bottom: 0; }
.question-list li::before { border-color: var(--accent); border-width: 2px; }
.next-steps li::before { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.band .rows { background: transparent; }

.stage-panel {
  border: 1px solid var(--line); border-top: 1px solid var(--line); border-radius: var(--radius-card);
  background: var(--paper); padding: 1.5rem; margin-top: 0.75rem; box-shadow: var(--shadow-1);
}
.offer { border-top: 0; gap: 1rem; }
.offer article, .offer article + article {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: 1.4rem 1.5rem 1.6rem; box-shadow: var(--shadow-1);
}
.offer .stage-label {
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); font-size: 1.1rem; font-weight: 700;
}
@media (min-width: 62rem) { .offer { border-bottom: 0; } }
.sectors li {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: 0.8rem 0.9rem; box-shadow: var(--shadow-1);
}
.person { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 1rem; box-shadow: var(--shadow-1); }
.method-layout .steps, .steps {
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 0.3rem 1.4rem; box-shadow: var(--shadow-1);
}
.steps li:last-child { border-bottom: 0; }
.principles { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 0.3rem 1.4rem; box-shadow: var(--shadow-1); }
.contact-details dl { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 0.2rem 1.25rem; box-shadow: var(--shadow-1); }
.contact-details dl > div:last-child { border-bottom: 0; }
.contact-details dt { color: var(--accent); }

/* ---------- Menú de Inicio: panel ancho por grupos ---------- */
.header-row { position: relative; }
.has-menu { position: static; }
.submenu {
  left: 0; right: 0; top: 100%; width: auto; columns: auto; padding: 0; overflow: hidden;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-radius: 0 0 18px 18px; border-top: 3px solid var(--accent); box-shadow: var(--shadow-2);
  transform-origin: 20% top;
}
.submenu::before { top: -1.6rem; height: 1.6rem; }
.submenu-group { padding: 1.15rem 0.9rem 1.1rem; }
.submenu-group + .submenu-group { border-left: 1px solid var(--line); }
.submenu-title {
  display: flex; align-items: center; gap: 0.5rem; margin: 0 0.65rem 0.5rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2);
}
.submenu-title::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--accent); }
.submenu ul { list-style: none; }
.nav-list .submenu a { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0.65rem; font-size: 0.95rem; font-weight: 500; }
.nav-list .submenu a svg { width: 0.9rem; height: 0.9rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: translateX(-4px); transition: opacity 140ms ease, transform 160ms var(--ease-out); }
.submenu-foot {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.85rem 1.5rem; background: var(--surface); border-top: 1px solid var(--line); font-size: 0.95rem; color: var(--ink-2);
}
.submenu-foot .btn { min-height: 2.5rem; padding: 0.45rem 1.1rem; }
@media (hover: hover) and (pointer: fine) {
  .nav-list .submenu a:hover { background: var(--surface); color: var(--accent); }
  .nav-list .submenu a:hover svg { opacity: 1; transform: none; }
}

/* ---------- Panel «Hablemos» en dos partes ---------- */
.talk { width: min(100% - 2rem, 56rem); padding: 0; border: 0; border-radius: 20px; box-shadow: var(--shadow-2); }
.talk[open] { display: grid; }
.talk-side {
  position: relative; padding: clamp(1.5rem, 4vw, 2.25rem); color: #FFFFFF;
  background: radial-gradient(34rem 22rem at 110% -10%, rgb(230 20 32 / 0.42), transparent 62%), #090909;
  display: grid; gap: 1.25rem; align-content: start;
}
.talk-side img { height: 3.5rem; width: auto; }
.talk-side h2 { font-size: var(--step-2); color: #FFFFFF; }
.talk-side .talk-lead { font-size: 1.1rem; color: #D6D6D6; }
.talk-points { list-style: none; display: grid; gap: 0.7rem; }
.talk-points li { position: relative; padding-left: 1.9rem; line-height: 1.4; }
.talk-points li::before {
  content: ""; position: absolute; left: 0; top: 0.15rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--red);
}
.talk-points li::after {
  content: ""; position: absolute; left: 0.36rem; top: 0.52rem; width: 0.5rem; height: 0.26rem;
  border-left: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; transform: rotate(-45deg);
}
.talk-main { position: relative; padding: clamp(1.5rem, 4vw, 2.25rem); background: var(--paper); }
.talk-main .talk-close { position: absolute; right: 0.6rem; top: 0.6rem; margin: 0; }
.talk-main .form-intro { margin: 0; padding-right: 2.5rem; }
.talk .form { margin-top: var(--space-2); }
@media (min-width: 48rem) { .talk[open] { grid-template-columns: 5fr 7fr; } .talk-side { align-content: center; } }
@media (max-width: 47.99rem) { .talk-points { display: none; } .talk-side { gap: 0.6rem; } .talk-side img { height: 2.75rem; } }

/* Modo oscuro del sistema: las sombras no aportan sobre negro */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --shadow-1: 0 0 0 1px rgb(255 255 255 / 0.04); --shadow-2: 0 30px 60px -24px rgb(0 0 0 / 0.8); }
  .screen-red { --surface: rgb(255 255 255 / 0.14); }
}

.has-menu.is-dismissed .submenu { visibility: hidden; opacity: 0; }

.section-soft .month-grid i { background: var(--paper); }

/* =====================================================================
   Pantallas con más contenido visual: flujos con flechas, textura técnica,
   contador de pantalla y flecha de avance. Sin pantallas rojas enteras.
   ===================================================================== */
:root { --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M13 5l7 7-7 7'/%3E%3C/svg%3E"); }

/* Textura de puntos, como una hoja técnica */
.screen-dark, .screen-graphite { background-image: radial-gradient(circle at 1px 1px, rgb(255 255 255 / 0.08) 1px, transparent 1.4px); background-size: 22px 22px; }
.section-soft { background-image: radial-gradient(circle at 1px 1px, rgb(0 0 0 / 0.07) 1px, transparent 1.4px); background-size: 22px 22px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .section-soft { background-image: radial-gradient(circle at 1px 1px, rgb(255 255 255 / 0.06) 1px, transparent 1.4px); } }

/* Flujo horizontal con flechas */
.flow { list-style: none; display: grid; gap: 0.75rem; margin-top: var(--space-4); }
.flow li {
  position: relative; display: flex; align-items: center; min-height: 3.4rem; padding: 0.7rem 1rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface);
  font-weight: 500; line-height: 1.25;
  transition: opacity 300ms ease calc(var(--i, 0) * 90ms), transform 400ms var(--ease-out) calc(var(--i, 0) * 90ms);
}
.flow li.is-key { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.js .flow:not(.is-in) li { opacity: 0; }
@media (min-width: 62rem) {
  .flow { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2.4rem; }
  .flow li + li::before {
    content: ""; position: absolute; left: -2.05rem; top: 50%; width: 1.7rem; height: 1.7rem; transform: translateY(-50%);
    background: var(--accent); -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat;
  }
}
@media (prefers-reduced-motion: no-preference) { .js .flow:not(.is-in) li { transform: translateX(-12px); } }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--space-3); }
.tags li { padding: 0.3rem 0.8rem; border: 1px solid var(--line); border-radius: var(--radius-chip); font-size: 0.95rem; color: var(--ink-2); }

/* Causas → oportunidad */
.friction-layout { display: grid; gap: var(--space-4); align-items: center; }
.causes { display: grid; gap: 1rem; align-items: center; }
.causes ul { list-style: none; display: grid; gap: 0.6rem; }
.causes li { padding: 0.7rem 1rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); font-weight: 500; line-height: 1.3; }
.big-arrow { display: block; width: 3rem; height: 3rem; margin-inline: auto; background: var(--accent); -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; transform: rotate(90deg); }
.outcome {
  padding: 1.1rem 1.25rem; border: 2px solid var(--accent); border-radius: var(--radius-card);
  font-size: var(--step-1); font-weight: 600; line-height: 1.25; text-align: center;
}
.to-memory { display: grid; gap: 0.6rem; max-width: 22rem; }
.to-memory .big-arrow { width: 2.2rem; height: 2.2rem; }
@media (min-width: 62rem) {
  .friction-layout { grid-template-columns: 5fr 7fr; gap: var(--space-5); }
  .causes { grid-template-columns: 1fr auto 0.85fr; }
  .causes .big-arrow { transform: none; }
}

/* Etapas en fila con flecha entre una y otra */
@media (min-width: 62rem) {
  .offer { gap: 2.6rem; }
  .offer article { position: relative; }
  .offer article + article::before, .next-steps li + li::after {
    content: ""; position: absolute; left: -2.2rem; top: 50%; width: 1.8rem; height: 1.8rem; transform: translateY(-50%);
    background: var(--accent); -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat;
  }
  .next-steps { grid-template-columns: 1fr; }
  .next-steps ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.6rem; padding: 0; background: none; border: 0; box-shadow: none; }
  .next-steps li, .next-steps li:last-child {
    padding: 4rem 1.4rem 1.4rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-1);
  }
  .next-steps li::before { left: 1.4rem; top: 1.3rem; }
}

/* Contador de pantalla y flecha de avance */
.screen-count, .screen-next { display: none; }
@media (min-width: 62rem) and (min-height: 40rem) {
  .screen { position: relative; }
  .screen-count {
    display: flex; align-items: baseline; gap: 0.35rem; position: absolute; left: max(1.25rem, calc((100% - var(--wrap)) / 2)); bottom: 1.1rem;
    font-size: 0.8rem; letter-spacing: 0.06em; color: var(--ink-2); font-variant-numeric: tabular-nums;
  }
  .screen-count b { font-weight: 600; color: var(--ink); }
  .screen-count span { margin-left: 0.6rem; padding-left: 0.75rem; border-left: 1px solid var(--line-strong); letter-spacing: 0; }
  .screen-next {
    display: grid; place-items: center; position: absolute; left: 50%; bottom: 0.8rem; width: 2.6rem; height: 2.6rem; margin-left: -1.3rem;
    border: 1px solid var(--line-strong); border-radius: 50%; color: var(--ink); background: var(--paper);
    transition: transform 160ms var(--ease-out), border-color 160ms ease, color 160ms ease;
  }
  .screen-next svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .screen-next:active { transform: scale(0.95); }
  .band .screen-count { color: var(--band-ink-2); }
  .band .screen-count b { color: var(--band-ink); }
  .band .screen-next { background: var(--band); color: var(--band-ink); border-color: var(--band-ink-2); }
  @media (hover: hover) and (pointer: fine) { .screen-next:hover { transform: translateY(3px); border-color: var(--accent); color: var(--accent); } }
  .screen { padding-bottom: clamp(3.4rem, 7vh, 4.5rem); }
}

@media (min-width: 62rem) and (min-height: 40rem) { #si-te-vas .stack-lg > * + * { margin-top: clamp(0.8rem, 2vh, 1.5rem); } }

.friction-layout .h2 { font-size: var(--step-4); letter-spacing: -0.022em; line-height: 1.05; }
.friction-layout .motto p:first-child { font-size: var(--step-1); }

/* =====================================================================
   Pantallas interiores con más contenido visual
   ===================================================================== */
.hero-aside { display: grid; gap: var(--space-3); align-content: end; }
.hero-symbol img { display: block; height: clamp(8rem, 22vh, 13rem); width: auto; }
.rows-pic li { display: flex; align-items: center; gap: 1rem; }
.rows-pic .pic { width: 2.75rem; }
.tags-lg { margin-top: var(--space-4); }
.tags-lg li { padding: 0.5rem 1rem; font-size: 1rem; font-weight: 500; color: var(--ink); background: var(--surface); border-color: var(--line-strong); }
.big-arrow.down { transform: rotate(90deg); margin: var(--space-2) 0 var(--space-2) 2rem; }
.to-memory .big-arrow.down { margin: 0 auto; }
.flow-3 { margin-top: var(--space-3); }

/* Lo que se cree y lo que ocurre */
.gap-figure { margin: var(--space-3) 0 0; display: grid; gap: 1rem; padding: 1.25rem 1.4rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-1); }
.gap-figure span { display: block; font-size: 0.85rem; font-weight: 500; color: var(--ink-2); margin-bottom: 0.4rem; }
.gap-figure svg { display: block; width: 100%; height: auto; overflow: visible; }
.gap-figure path { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.gap-figure circle { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.gap-figure .is-real path { stroke: var(--accent); }
.gap-figure .is-real circle { stroke: var(--accent); }

/* Tipos de encargo */
.kinds { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-top: var(--space-4); }
.kinds li { display: flex; align-items: center; gap: 0.75rem; padding: 0.8rem 0.9rem; border: 1px solid var(--line-strong); border-radius: var(--radius-card); background: var(--surface); font-weight: 500; line-height: 1.25; }
.kinds .pic { background: var(--ink); border-color: var(--ink); color: var(--paper); }
@media (min-width: 62rem) { .kinds { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Por qué Galatea, por qué Tándem */
.name-fig { margin: var(--space-3) 0 0; max-width: 20rem; }
.name-fig svg { display: block; width: 100%; height: auto; }
.name-fig circle { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.name-fig .dash { stroke-dasharray: 4 4; }
.name-fig .solid { fill: var(--accent); stroke: var(--accent); }
.name-fig .ring { stroke: var(--accent); stroke-width: 2; }
.name-fig .arr { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.name-fig figcaption { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.5rem; font-size: 0.85rem; font-weight: 500; color: var(--ink-2); }

/* Tres pasos en una columna estrecha */
@media (min-width: 62rem) {
  .flow-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hub.hub-sm { height: 19rem; max-width: 30rem; }
  /* Herramientas sueltas, sin nada que las una */
  .screen .tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
  .screen .tools li { display: grid; place-items: center; min-height: 3.4rem; padding: 0.6rem 0.8rem; border-style: dashed; border-color: var(--line-strong); border-radius: var(--radius); text-align: center; font-weight: 500; line-height: 1.25; background: var(--paper); }
}

/* Ajustes de la revisión de pantallas vacías */
.closing .no-needs li::before { background: var(--accent); }
.criteria .impact { margin-top: 0.75rem; }
.flow-4 { margin-top: var(--space-4); grid-column: 1 / -1; }
.kinds li { min-width: 0; }
@media (max-width: 61.99rem) { .kinds li { flex-direction: column; text-align: center; gap: 0.45rem; font-size: 0.95rem; } .kinds li:last-child { grid-column: 1 / -1; } }
@media (min-width: 62rem) {
  .flow-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .screen .map-find { margin-top: var(--space-4); }
  .screen .chain + .map-find .question-list li { padding-block: 0.55rem; }
}

.split > .kinds, .split > .flow { grid-column: 1 / -1; }
@media (min-width: 62rem) and (min-height: 40rem) { .screen .lead + .memory-diagram { margin-top: var(--space-4); } }

/* =====================================================================
   Formularios: campos obligatorios, desplegables y elección de medio
   ===================================================================== */
.req { color: var(--accent); font-weight: 600; }
.hint .req { margin-left: 0.15rem; }
.input::placeholder { color: var(--ink-2); opacity: 0.75; }
select.input {
  appearance: none; -webkit-appearance: none; padding-right: 2.6rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23808080' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 0.85rem;
}
select.input:invalid, select.input option[value=""] { color: var(--ink-2); }
.field[hidden] { display: none; }
.via-choice { border: 0; margin: 0; padding: 0; min-width: 0; }
.via-choice legend { padding: 0; margin-bottom: 0.4rem; font-weight: 500; font-size: 1rem; line-height: 1.3; }
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem; padding: 0.3rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.segmented label { position: relative; display: block; cursor: pointer; }
.segmented input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.segmented span {
  display: grid; place-items: center; min-height: 2.6rem; border-radius: 6px; font-weight: 500; color: var(--ink-2);
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.segmented input:checked + span { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 0 0 1px var(--line-strong); }
.segmented input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.segmented label:active span { transform: scale(0.98); }

/* Panel «Hablemos»: más ancho y más compacto, para que quepa entero sin desplazarse */
.talk { width: min(100% - 2rem, 64rem); max-height: calc(100dvh - 2rem); }
.talk-main { padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3.4vw, 2.25rem); }
.talk .form { gap: 0.85rem; margin-top: 0.85rem; }
.talk .input { min-height: 2.9rem; padding: 0.55rem 0.8rem; }
.talk textarea.input { min-height: 4.4rem; }
.talk .segmented span { min-height: 2.2rem; }
.talk .btn-lg { min-height: 3rem; }
.talk-row { display: grid; gap: 0.85rem; }
@media (min-width: 40rem) { .talk-row { grid-template-columns: 1fr 1fr; } }
@media (min-width: 48rem) { .talk[open] { grid-template-columns: 4fr 7fr; } }

/* En móvil el panel se reduce a lo esencial para caber en una pantalla */
@media (max-width: 47.99rem) {
  .talk { width: calc(100% - 1rem); max-width: none; max-height: calc(100dvh - 1rem); }
  .talk-side { grid-template-columns: auto 1fr; align-items: center; gap: 0.75rem; padding: 0.9rem 3.2rem 0.9rem 1rem; }
  .talk-side img { height: 2.4rem; }
  .talk-side h2 { font-size: 1.2rem; }
  .talk-side .talk-lead, .talk-main .form-intro { display: none; }
  .talk-main { padding: 0.9rem 1rem 1rem; }
  .talk-main .talk-close { top: -3.35rem; right: 0.35rem; color: #FFFFFF; }
  .talk .form { margin-top: 0; gap: 0.7rem; }
  .talk textarea.input { min-height: 3.2rem; }
  .talk-more { font-size: 0.85rem; }
}

/* Índice lateral con los nombres siempre a la vista (pantallas anchas). El contenido se
   estrecha lo justo para dejarle sitio; por debajo de 1440 px no hay hueco sin apretar el
   contenido, y quedan los puntos con el nombre al pasar el ratón. */
@media (min-width: 90rem) and (min-height: 40rem) {
  html:has(.screen) .wrap { width: min(100% - 2.5rem, var(--wrap), 100vw - 22rem); }
  .screen-nav { gap: 0; right: max(0.9rem, env(safe-area-inset-right, 0px)); }
  .screen-nav a { display: flex; flex-direction: row-reverse; align-items: center; justify-content: flex-start; gap: 0.55rem; width: auto; height: 1.4rem; text-decoration: none; }
  .screen-nav a::before { flex: none; }
  .screen-nav span {
    position: static; transform: none; opacity: 1; padding: 0; background: none; border-radius: 0;
    font-size: 0.72rem; font-weight: 500; line-height: 1; color: #6E6E6E; transition: color 160ms ease;
  }
  .screen-nav a[aria-current="true"] span { color: #1F1F1F; font-weight: 600; }
  .screen-nav.on-dark span { color: #A8A8A8; }
  .screen-nav.on-dark a[aria-current="true"] span { color: #FFFFFF; }
  @media (hover: hover) and (pointer: fine) { .screen-nav a:hover span { color: var(--red); } }
}
@media (min-width: 90rem) and (min-height: 40rem) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .screen-nav span { color: #A8A8A8; }
  :root:not([data-theme="light"]) .screen-nav a[aria-current="true"] span { color: #FFFFFF; }
}

/* Ventanas de poco alto: menos aire arriba y abajo para que la pantalla quepa */
@media (min-width: 62rem) and (min-height: 40rem) and (max-height: 56rem) {
  .screen { padding-top: 1.25rem; padding-bottom: 3rem; }
  .screen-count { bottom: 0.7rem; }
  .screen-next { bottom: 0.45rem; width: 2.3rem; height: 2.3rem; margin-left: -1.15rem; }
}

/* Panel «Hablemos» con más aire cuando la ventana tiene alto de sobra */
@media (min-width: 48rem) and (min-height: 50rem) {
  .talk-main { padding: 2.5rem 2.5rem 2.25rem; }
  .talk-side { padding: 2.5rem; gap: 1.5rem; }
  .talk-side img { height: 4rem; }
  .talk-points { gap: 0.9rem; }
  .talk .form { gap: 1.25rem; margin-top: 1.25rem; }
  .talk-row { gap: 1.1rem; }
  .talk .input { min-height: 3.25rem; padding: 0.7rem 0.9rem; }
  .talk textarea.input { min-height: 6.5rem; }
  .talk .segmented span { min-height: 2.6rem; }
  .talk .btn-lg { min-height: 3.5rem; }
}

/* =====================================================================
   Párrafos justificados y cabeceras con simetría
   ===================================================================== */
/* Los párrafos de lectura anchos van justificados, con guiones automáticos. site.js marca con .is-wide
   los que miden al menos 30 veces su cuerpo de letra (unos 60 caracteres por línea): por debajo de eso,
   y en móvil, el justificado abre huecos entre palabras y el texto se queda alineado a la izquierda. */
@media (min-width: 40rem) {
  main p.is-wide:not(.pull):not(.statement):not(.hero-second):not(.h2):not(.h3):not(.outcome):not(.hub-core):not(.hint):not(.field-error):not(.form-status):not(.pending-note):not(.submenu-title):not(.more):not(.cta-block):not(.decide):not(.diagram-caption):not(.screen-count):not(.support):not(.talk-lead):not(.form-intro) {
    text-align: justify; hyphens: auto; -webkit-hyphens: auto; text-wrap: wrap;
  }
}
/* En las cabeceras de página, titular y texto se centran uno respecto al otro */
@media (min-width: 75rem) { .page-hero-grid { align-items: center; } }
.hero-aside { align-content: center; }

/* Cabecera centrada (Quiénes somos): emblema entre dos líneas, titular y texto en el eje */
.hero-center { display: grid; justify-items: center; gap: clamp(1.25rem, 3.2vh, 2.25rem); text-align: center; }
.hero-emblem { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.25rem); width: min(100%, 46rem); }
.hero-emblem::before, .hero-emblem::after { content: ""; flex: 1; height: 1.5px; background: var(--line-strong); }
.hero-emblem picture { flex: none; line-height: 0; }
.hero-emblem img { display: block; height: clamp(6.5rem, 17vh, 10.5rem); width: auto; }
.page-hero .hero-center h1 { max-width: 20ch; text-wrap: balance; }
main .hero-center p.lead { max-width: 60ch; text-align: justify; text-align-last: center; hyphens: auto; -webkit-hyphens: auto; }
@media (max-width: 39.99rem) { main .hero-center p.lead { text-align: center; } }

/* En oscuro el rojo no alcanza el contraste de texto normal: los rótulos de contacto van en tinta */
.contact-details dt { color: var(--ink); }

/* En móvil los flujos se apilan: la flecha entre un paso y el siguiente apunta hacia abajo */
@media (max-width: 61.99rem) {
  .flow, .offer { gap: 2rem; }
  .offer article { position: relative; }
  .flow li + li::before, .offer article + article::before {
    content: ""; position: absolute; left: 1.1rem; top: -1.7rem; width: 1.4rem; height: 1.4rem; transform: rotate(90deg);
    background: var(--accent); -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat;
  }
}

/* =====================================================================
   Contacto: titular, texto y formulario caben en la primera pantalla
   ===================================================================== */
.contact-top { border-top: 0; padding-block: clamp(1.25rem, 3.5vh, 3rem); }
.contact-top h1 { font-size: clamp(2rem, 1.1rem + 2.3vw, 3.1rem); letter-spacing: -0.02em; line-height: 1.08; max-width: 16ch; }
.contact-top .hero-second { margin-top: 0; font-size: var(--step-1); }
.contact-intro > * + * { margin-top: clamp(0.8rem, 2vh, 1.4rem); }
.contact-top .pull { font-size: var(--step-1); }
.contact-top .form { gap: 0.85rem; }
.contact-top .form-panel { padding: clamp(1.1rem, 2.6vh, 1.75rem) clamp(1.1rem, 2.4vw, 1.9rem); }
.contact-top .field-row { gap: 0.9rem; }
.contact-top .input { min-height: 2.9rem; padding: 0.5rem 0.8rem; }
.contact-top textarea.input { min-height: 4.6rem; }
.contact-top .form-intro, .contact-top .pending-note { font-size: 0.9rem; }
.contact-top .contact-details h2 { font-size: var(--step-1); }
.contact-top .contact-details dl > div { padding: 0.5rem 0; }
@media (min-width: 40rem) {
  .contact-top .form-actions { grid-template-columns: auto 1fr; align-items: center; column-gap: 1.25rem; }
  .contact-top .form-actions .support { margin: 0; font-size: 0.9rem; }
}
@media (min-width: 62rem) {
  .contact-top { min-height: calc(100svh - var(--header-h)); display: grid; align-content: center; grid-template-columns: minmax(0, 1fr); }
  .contact-top .contact-grid { grid-template-columns: 5fr 7fr; align-items: center; row-gap: clamp(1rem, 2.4vh, 2rem); }
}

/* Contacto en ventanas de poco alto: todo se aprieta un poco con el alto disponible */
@media (min-width: 62rem) {
  .contact-top { padding-block: clamp(0.6rem, 2.4vh, 3rem); }
  .contact-top h1 { font-size: clamp(1.7rem, min(1.1rem + 2.3vw, 5.6vh), 3.1rem); }
  .contact-top .form { gap: clamp(0.5rem, 1.3vh, 0.85rem); }
  .contact-top .form-panel { padding-block: clamp(0.8rem, 2.2vh, 1.75rem); }
  .contact-top .input { min-height: clamp(2.5rem, 5.2vh, 2.9rem); }
  .contact-top textarea.input { min-height: clamp(3.4rem, 8vh, 4.6rem); }
  .contact-intro > * + * { margin-top: clamp(0.5rem, 1.6vh, 1.4rem); }
  .contact-top .contact-grid { row-gap: clamp(0.6rem, 1.8vh, 2rem); }
  .contact-top .lead { font-size: clamp(1.05rem, 2.4vh, 1.35rem); }
}
/* Contacto en móvil: el formulario sube justo detrás del titular y la entradilla */
@media (max-width: 61.99rem) {
  .contact-intro { display: contents; }
  .contact-intro > * { margin-top: 0; order: 5; }
  .contact-intro > h1 { order: 1; }
  .contact-intro > .hero-second { order: 2; }
  .contact-intro > .lead { order: 3; }
  .contact-top .form-panel { order: 4; }
  .contact-top .contact-details { order: 6; }
  .contact-top .contact-grid { gap: 1rem; }
}

/* Contacto: las dos columnas ocupan el mismo alto. A la izquierda el texto se reparte
   en tres grupos (titular, explicación, cierre) y los datos quedan abajo; a la derecha
   el campo de mensaje crece para que el formulario empiece y acabe a la misma altura. */
@media (min-width: 62rem) {
  .contact-top { --pad: clamp(0.6rem, max(2.4vh, 10vh - 4rem), 3.5rem); padding-block: var(--pad); }
  .contact-top .contact-grid {
    min-height: min(100svh - var(--header-h) - 2 * var(--pad), 52rem);
    grid-template-rows: 1fr auto; align-items: stretch;
  }
  .contact-intro { display: flex; flex-direction: column; }
  .contact-intro > .hero-second { margin-top: clamp(0.3rem, 1.1vh, 0.75rem); }
  .contact-intro > .lead, .contact-intro > .pull { margin-top: auto; padding-top: clamp(0.6rem, 2vh, 1.75rem); }
  .contact-intro > .pull { margin-bottom: auto; }
  .contact-top .form-panel { display: flex; flex-direction: column; }
  .contact-top .form { display: flex; flex-direction: column; flex: 1; }
  .contact-top .form > .field-grow { flex: 1; grid-template-rows: auto 1fr; }
}

/* Contacto en ventanas bajas (portátiles de 720–768 px de alto): se aprieta lo justo para que formulario y datos entren sin scroll */
@media (min-width: 62rem) and (max-height: 49rem) {
  .contact-top { --pad: 0.5rem; }
  .contact-top h1 { font-size: clamp(1.7rem, min(1.1rem + 2.3vw, 5vh), 3.1rem); }
  .contact-intro > * + * { margin-top: 0.5rem; }
  .contact-top .contact-grid { row-gap: 0.6rem; }
  .contact-top .form { gap: 0.5rem; }
  .contact-intro > .hero-second { margin-top: 0.2rem; }
  .contact-intro > .lead, .contact-intro > .pull { padding-top: 0.3rem; }
}
/* Ventana baja y además estrecha: el texto ocupa más alto que la ventana, así que el formulario no se estira con él */
@media (min-width: 62rem) and (max-width: 75rem) and (max-height: 49rem) {
  .contact-top .form-panel { align-self: start; }
}

/* =====================================================================
   Correcciones tras la crítica de diseño de la Home (3 oct 2026)
   ===================================================================== */
/* Con el índice lateral rotulado, el contador solo dice el número: el nombre ya está a la derecha */
@media (min-width: 90rem) and (min-height: 40rem) { .screen-count span { display: none; } }
/* En modo oscuro el rojo sobre el fondo del menú no llega a 4,5:1: el texto sigue en tinta y el rojo pasa al subrayado */
@media (hover: hover) and (pointer: fine) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nav-list .submenu a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.25em; }
}

/* ---------- Segunda pasada de la crítica ---------- */
/* Titular centrado frente a su contenido: evita la media columna vacía bajo el titular */
@media (min-width: 62rem) { .v-center { align-items: center; } }

/* Quién está detrás: sin fichas hasta tener datos reales; composición centrada como la cabecera de Quiénes somos */
.hero-center .h2 { max-width: 22ch; text-wrap: balance; }
.hero-center .more { margin-top: 0; }

/* Primer contacto: línea de tiempo en vez de tarjetas, para no repetir la fila de «Qué contratas» */
@media (min-width: 62rem) {
  .next-steps ol { position: relative; column-gap: var(--space-5); }
  .next-steps ol::before { content: ""; position: absolute; left: 0; right: 0.6rem; top: 1.4rem; height: 1.5px; background: var(--line-strong); }
  .next-steps ol::after {
    content: ""; position: absolute; right: -0.2rem; top: 0.75rem; width: 1.3rem; height: 1.3rem;
    background: var(--line-strong); -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat;
  }
  .next-steps li, .next-steps li:last-child { padding: 3.9rem 0 0; background: none; border: 0; border-radius: 0; box-shadow: none; font-size: var(--step-1); line-height: 1.45; }
  .next-steps li::before { left: 0; top: 0.3rem; width: 2.2rem; height: 2.2rem; font-size: 1.05rem; z-index: 1; }
  .next-steps li + li::after { content: none; }
}

/* IA local: manda la frase roja; la tercera baja de tamaño y el contexto acompaña en la columna izquierda */
.local .pull { font-size: var(--step-1); line-height: 1.3; max-width: 34ch; }

/* Texto plegado (Método y, en móvil, etapas del servicio): primera frase visible y el resto bajo «Ver más» */
.fold-rest[hidden] { display: none; }
.fold-toggle {
  display: inline; margin: 0 0 0 0.35rem; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.25em;
}
.fold-toggle:active { opacity: 0.65; }
@media (max-width: 61.99rem) { .fold-toggle { display: block; margin: 0.15rem 0 0; min-height: 2.75rem; touch-action: manipulation; } }
@media (min-width: 62rem) {
  .offer .fold-rest[hidden] { display: inline; }
  .offer .fold-toggle { display: none; }
}

/* Móvil: línea de avance de lectura bajo la cabecera (solo donde el navegador la soporta, sin JavaScript) */
@keyframes read-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 61.99rem) {
  @supports (animation-timeline: scroll()) {
    html:has(.screen) .site-header::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--accent); transform-origin: 0 50%;
      animation: read-progress linear both; animation-timeline: scroll(root block);
    }
  }
}

/* Pie más discreto: texto y enlaces legales en cuerpo pequeño y tono secundario */
.site-footer p, .footer-links { font-size: 0.82rem; line-height: 1.5; }
.footer-links { gap: 0.1rem 1.1rem; }
.footer-links a { color: var(--band-ink-2); padding-block: 0.8rem; }
@media (hover: hover) and (pointer: fine) { .footer-links a:hover { color: var(--band-ink); } }
@media (min-width: 52rem) { .footer-links { justify-content: flex-end; } .footer-links a { padding-block: 0.3rem; } }

/* Menú principal: todos los elementos se componen igual que «Inicio» (que es flex por la flecha),
   para que los cinco rótulos compartan la misma línea base */
.nav-list { align-items: center; }
.nav-list > li { display: flex; align-items: center; }

/* ---------- Revisión de las páginas interiores ---------- */
/* «Buscamos impacto»: el titular quedaba pegado a la tarjeta (0 px) */
.screen .split + .rule { margin-top: var(--space-3); }
/* Recorrido en doce etapas: rótulos algo más pequeños para que «Conformidad» y «Facturación» no se toquen */
@media (min-width: 62rem) { .chain li, .rail .stage { font-size: 0.9rem; } }

/* =====================================================================
   Primera pantalla de la Home: fondo negro con el rojo de la marca, titular
   grande y diagrama «hoy todo pasa por ti → con sistema»
   ===================================================================== */
.screen.hero.screen-dark {
  background:
    radial-gradient(58rem 36rem at 94% -4%, rgb(230 20 32 / 0.34), transparent 62%),
    radial-gradient(40rem 26rem at -6% 104%, rgb(230 20 32 / 0.12), transparent 60%),
    #090909;
}
.hero.screen-dark h1 { letter-spacing: -0.035em; line-height: 1.03; max-width: 16ch; }
.hero.screen-dark .lead { font-size: var(--step-1); line-height: 1.45; max-width: 38ch; }
@media (min-width: 62rem) and (min-height: 40rem) {
  .screen.hero.screen-dark h1 { font-size: clamp(2.4rem, min(1.2rem + 3.9vw, 7.4vh), 4.8rem); }
}

.depend { margin: 0; display: grid; gap: clamp(0.9rem, 2.4vh, 1.5rem); justify-items: center; }
.depend-stage { position: relative; width: min(100%, 32rem, 52vh); min-width: min(100%, 17rem); aspect-ratio: 10 / 9; margin-bottom: 1.4rem; }
.depend-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.depend-lines line { stroke: var(--line-strong); stroke-width: 1.5; vector-effect: non-scaling-stroke; transform-origin: var(--o); }
.depend-lines .to-you { stroke: var(--red); stroke-width: 2; transform: scale(0); transition: transform 360ms var(--ease-out) 120ms; }
.node {
  position: absolute; width: clamp(2.7rem, 5vw, 3.4rem); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; transform: translate(-50%, -50%);
  background: var(--surface); border: 1.5px solid var(--line-strong); color: var(--ink);
}
.node svg { width: 54%; height: 54%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.node b { position: absolute; top: calc(100% + 0.3rem); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 0.8rem; font-weight: 500; color: var(--ink-2); }
.node i {
  position: absolute; right: -0.15rem; top: -0.15rem; width: 0.85rem; height: 0.85rem; border-radius: 50%;
  background: var(--red); border: 2px solid var(--paper);
  transition: opacity 240ms ease calc(var(--k) * 60ms), transform 240ms var(--ease-out) calc(var(--k) * 60ms);
}
.depend-core {
  position: absolute; left: 48%; top: 52%; width: clamp(4.6rem, 10vw, 6.75rem); aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%); display: grid; place-items: center;
  background: var(--red); color: #FFFFFF; font-weight: 700; box-shadow: 0 0 0 0.5rem rgb(230 20 32 / 0.18);
  transition: background-color 320ms ease, color 320ms ease;
}
.depend-core span { grid-area: 1 / 1; transition: opacity 240ms ease; }
.core-you { font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.02em; }
.core-sys { font-size: clamp(0.85rem, 1.6vw, 1rem); opacity: 0; }
.depend-out {
  position: absolute; left: 85%; top: 13%; width: clamp(3.2rem, 6.5vw, 4.25rem); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; background: var(--red); color: #FFFFFF; font-weight: 700; font-size: 1.2rem;
  opacity: 0; transform: translate(-50%, -50%) scale(0.9);
  transition: opacity 280ms ease 260ms, transform 320ms var(--ease-out) 260ms;
}
/* Con sistema: el centro deja de ser el propietario, desaparecen los avisos pendientes y a él le llega una sola línea */
.depend.is-system .depend-core { background: #FFFFFF; color: #090909; box-shadow: 0 0 0 0.5rem rgb(255 255 255 / 0.1); }
.depend.is-system .core-you { opacity: 0; }
.depend.is-system .core-sys { opacity: 1; }
.depend.is-system .node i { opacity: 0; transform: scale(0.6); }
.depend.is-system .depend-out { opacity: 1; transform: translate(-50%, -50%); }
.depend.is-system .to-you { transform: none; }

.depend-switch { display: inline-flex; gap: 0.25rem; padding: 0.25rem; border: 1px solid var(--line-strong); border-radius: calc(var(--radius) + 0.25rem); }
.depend-switch button {
  min-height: 2.75rem; padding: 0 1.1rem; border: 0; border-radius: var(--radius); background: none; color: var(--ink-2);
  font: inherit; font-size: 0.95rem; font-weight: 500; cursor: pointer; touch-action: manipulation;
  transition: background-color 160ms ease, color 160ms ease;
}
.depend-switch button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.depend-switch button:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .depend-switch button[aria-pressed="false"]:hover { color: var(--ink); } }
html:not(.js) .depend-switch { display: none; }
.depend figcaption { min-height: 3.1em; max-width: 34ch; text-align: center; font-size: 1.05rem; line-height: 1.45; font-weight: 500; text-wrap: balance; }
.depend figcaption [hidden] { display: none; }

/* Entrada: las líneas se dibujan hacia el centro y aparecen los avisos pendientes */
.js .depend:not(.is-in) .depend-lines line:not(.to-you), .js .depend:not(.is-in) .node i { opacity: 0; }
.depend.is-in .depend-lines line:not(.to-you) { animation: draw-line 360ms var(--ease-out) var(--d) backwards; }
.depend.is-in .node i { animation: pop-in 240ms var(--ease-out) var(--d) backwards; }
@media (prefers-reduced-motion: reduce) {
  .depend.is-in .depend-lines line, .depend.is-in .node i { animation: none; }
  .depend-lines .to-you, .depend-out, .node i, .depend-core, .depend-core span { transition-duration: 0.01ms; transition-delay: 0s; }
}
/* Ventanas de escritorio estrechas: titular un punto menor para que la primera pantalla quepa entera */
@media (min-width: 62rem) and (max-width: 75rem) and (min-height: 40rem) {
  .screen.hero.screen-dark h1 { font-size: clamp(2.2rem, min(1rem + 3.2vw, 6.4vh), 4rem); }
}

/* =====================================================================
   Quiénes somos · El nombre: el logotipo completo y tres capítulos
   (El mito, Por qué Galatea, Por qué Tándem) en una sola pantalla
   ===================================================================== */
.name-slide { background: #090909; overflow: hidden; }
/* Esta pantalla no usa el fundido general del contenido: aislaría la mezcla del logotipo con el fondo */
/* El selector repite los :not() de la regla general de entrada para tener más peso que ella: con menos peso
   perdía, el contenedor se fundía igualmente y durante ese medio segundo se veían el recuadro del logotipo
   y el velo gris como un disco. */
.js .screen.name-slide:not(.hero):not(.page-hero) > .wrap,
.js .screen.name-slide:not(.hero):not(.page-hero):not(.is-in) > .wrap { opacity: 1; transform: none; transition: none; }
/* El texto sí entra con el fundido de siempre: no contiene al logotipo, así que no afecta a su mezcla */
.js .name-slide .name-body { transition: opacity 600ms ease, transform 700ms var(--ease-out); }
.js .name-slide:not(.is-in) .name-body { opacity: 0; transform: translateY(1.25rem); }
@media (prefers-reduced-motion: reduce) { .js .name-slide .name-body { transition: none; } }
.name-grid { display: grid; gap: var(--space-4); align-items: center; }
.name-logo { position: relative; justify-self: center; width: min(78%, 21rem, 48vh); }
/* Resplandor rojo detrás del logotipo: aparece al entrar en pantalla */
.name-logo::before {
  content: ""; position: absolute; inset: -38% -42%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(230 20 32 / 0.34), rgb(230 20 32 / 0.1) 55%, transparent 72%);
  transition: opacity 900ms ease 150ms;
}
.js .name-logo:not(.is-in)::before { opacity: 0; }
/* El original trae fondo negro y márgenes: se recorta con el contenedor y el negro se funde con el fondo (lighten) */
.name-logo-crop { position: relative; overflow: hidden; aspect-ratio: 946 / 978; }
.name-logo-crop img { display: block; width: 118.6%; max-width: none; height: auto; margin: -18.82% 0 0 -9.94%; mix-blend-mode: lighten; }

.name-tabs { display: flex; flex-wrap: wrap; gap: 0.25rem clamp(1rem, 2.4vw, 2.25rem); border-bottom: 1px solid var(--line); }
.name-tabs button {
  position: relative; min-height: 2.75rem; padding: 0.35rem 0 0.7rem; border: 0; background: none; cursor: pointer; touch-action: manipulation;
  font: inherit; font-weight: 700; font-size: clamp(1.15rem, min(0.9rem + 1vw, 3.2vh), 1.7rem); letter-spacing: -0.015em; color: #8E8E8E;
  transition: color 180ms ease;
}
.name-tabs button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; transition: transform 240ms var(--ease-out); }
.name-tabs button[aria-selected="true"] { color: var(--ink); }
.name-tabs button[aria-selected="true"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .name-tabs button:hover { color: var(--ink); } }
html:not(.js) .name-tabs { display: none; }

.chapters { margin-top: clamp(1rem, 2.8vh, 1.75rem); }
.chapter > * + * { margin-top: clamp(0.7rem, 2vh, 1.25rem); }
.chapter:focus-visible { outline-offset: 0.5rem; }
.js .chapter-title { display: none; }
html:not(.js) .chapter + .chapter { margin-top: var(--space-4); }
.js .chapter:not(.is-active) { display: none; }
.js .name-slide .mark { color: var(--red); }

.myth-story { color: var(--ink-2); font-size: clamp(0.9rem, 1.9vh, 1rem); line-height: 1.55; }
.myth-story p + p { margin-top: 0.75em; }
.myth-story p:first-child::first-line { color: var(--ink); font-weight: 500; }
.myth-moral { max-width: 40ch; font-size: clamp(1.2rem, 3.1vh, 1.75rem); line-height: 1.22; }
.chapter .lead { max-width: 46ch; }
.chapter .name-fig { margin-top: clamp(0.9rem, 2.6vh, 1.75rem); }

@media (min-width: 62rem) {
  /* El logotipo se centra en la franja oscura que queda entre el borde de la ventana y el texto.
     --side es el margen lateral del contenido (la mitad de lo que sobra de la ventana) y --gap la separación
     entre columnas; se desplaza con «left» y no con transform para no aislar la mezcla con el fondo. */
  .name-grid {
    --gap: clamp(2.5rem, 5vw, 5.5rem); --side: calc((100vw - min(100vw - 2.5rem, var(--wrap))) / 2);
    grid-template-columns: minmax(0, 3.2fr) minmax(0, 8.8fr); column-gap: var(--gap);
  }
  .name-logo { width: min(100%, 24rem, 52vh); justify-self: center; left: calc((var(--gap) - var(--side)) / 2); }
  /* Los tres capítulos ocupan el mismo hueco: al cambiar de uno a otro la pantalla no salta */
  .js .chapters { display: grid; }
  .js .chapter, .js .chapter:not(.is-active) { display: block; grid-area: 1 / 1; align-self: center; }
  .js .chapter:not(.is-active) { visibility: hidden; opacity: 0; }
  .js .chapter { transition: opacity 260ms ease; }
  .myth-story { columns: 2; column-gap: clamp(1.5rem, 3vw, 2.5rem); }
  .myth-story p { orphans: 2; widows: 2; }
  /* Justificado a petición del cliente: los bordes rectos separan el texto del logotipo y una columna de otra */
  .myth-story p, .chapter > p:not(.pull) { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
  .myth-story { column-gap: clamp(2rem, 3.4vw, 3.25rem); }
}
@media (prefers-reduced-motion: reduce) { .js .chapter, .name-tabs button::after, .name-logo::before { transition-duration: 0.01ms; transition-delay: 0s; } }
/* En teléfonos las tres pestañas caben en una línea */
@media (max-width: 30rem) { .name-tabs { gap: 0.25rem 0.85rem; } .name-tabs button { font-size: 1rem; letter-spacing: -0.01em; } }
@media (min-width: 90rem) and (min-height: 40rem) {
  .name-grid { --side: calc((100vw - min(100vw - 2.5rem, var(--wrap), 100vw - 22rem)) / 2); }
}

/* =====================================================================
   Selector de modo claro / oscuro (botón creado por site.js)
   ===================================================================== */
.theme-toggle {
  flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0;
  border: 0; border-radius: var(--radius); background: none; color: var(--ink-2); cursor: pointer; touch-action: manipulation;
  transition: color 160ms ease, transform 160ms var(--ease-out);
}
.theme-toggle svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .theme-toggle:hover { color: var(--ink); } }
/* Botón de modo claro / oscuro, con recuadro */
.header-tools { flex: none; display: flex; align-items: center; gap: 0.4rem; }
.theme-toggle { border: 1px solid var(--line-strong); }
@media (hover: hover) and (pointer: fine) { .theme-toggle:hover { border-color: var(--ink); } }
@media (pointer: coarse) { .theme-toggle { width: 2.75rem; height: 2.75rem; } }
/* Cabecera de escritorio a todo el ancho de la ventana (petición del cliente): logotipo a la izquierda del todo,
   menú centrado en la ventana y, a la derecha del todo, Hablemos con los botones de modo e idioma.
   site.js mete el botón Hablemos dentro de .header-tools para que los tres formen un solo grupo.
   Las columnas laterales miden lo mismo (1fr) y eso es lo que centra el menú; si no hay sitio, ceden. */
@media (min-width: 64rem) {
  html .site-header > .wrap { width: auto; margin-inline: clamp(1rem, 1.6vw, 1.75rem); }
  .header-row { display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); column-gap: 1rem; }
  .header-row .brand { justify-self: start; margin-right: 0; }
  .header-row > .header-cta, .header-tools { justify-self: end; }
  .header-tools { gap: 0.45rem; }
  .header-tools .header-cta { margin-right: 0.4rem; }
  /* El panel de apartados de Inicio no se estira con la cabecera: conserva el ancho del contenido, centrado */
  .submenu { left: 50%; right: auto; width: min(100vw - 2.5rem, var(--wrap)); margin-left: calc(min(100vw - 2.5rem, var(--wrap)) / -2); }
}
/* En móvil el orden sigue siendo modo, idioma, Hablemos */
@media (max-width: 63.99rem) { .header-tools .header-cta { order: 3; margin-left: 0.3rem; } }
/* En cabeceras estrechas se aprietan los huecos para que quepa todo */
@media (max-width: 63.99rem) { .header-row { gap: 0.6rem; } .header-tools { gap: 0.3rem; } }
.menu-toggle { flex: none; }
@media (max-width: 23.5rem) {
  .header-row { gap: 0.4rem; }
  .header-cta { padding-inline: 0.8rem; }
}

/* Las reglas que dependían solo de la preferencia del sistema, también para el modo oscuro elegido a mano */
:root[data-theme="dark"] { --shadow-1: 0 0 0 1px rgb(255 255 255 / 0.04); --shadow-2: 0 30px 60px -24px rgb(0 0 0 / 0.8); color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] .section-soft { background-image: radial-gradient(circle at 1px 1px, rgb(255 255 255 / 0.06) 1px, transparent 1.4px); }
@media (min-width: 90rem) and (min-height: 40rem) {
  :root[data-theme="dark"] .screen-nav span { color: #A8A8A8; }
  :root[data-theme="dark"] .screen-nav a[aria-current="true"] span { color: #FFFFFF; }
}
@media (hover: hover) and (pointer: fine) {
  :root[data-theme="dark"] .nav-list .submenu a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.25em; }
}

/* =====================================================================
   Páginas legales, página 404 y avisos de protección de datos
   ===================================================================== */
.legal { padding-block: clamp(2rem, 6vh, 4.5rem) clamp(3rem, 8vh, 6rem); }
.legal-wrap { max-width: 46rem; }
.legal h1 { font-size: var(--step-3); letter-spacing: -0.022em; line-height: 1.1; margin-top: var(--space-3); }
.legal h2 { font-size: var(--step-1); margin-top: var(--space-4); }
.legal h3 { font-size: 1.05rem; margin-top: var(--space-3); }
.legal p, .legal ul, .legal dl, .legal .legal-table { margin-top: 0.9rem; }
.legal p, .legal li { line-height: 1.65; }
.legal ul { padding-left: 1.25rem; }
.legal li + li { margin-top: 0.35rem; }
.legal a { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.legal-date { color: var(--ink-2); font-size: 0.95rem; }
.legal mark { background: none; color: inherit; padding: 0.05em 0.35em; border: 1px dashed var(--line-strong); border-radius: var(--radius-chip); font-size: 0.95em; }
.legal-data { border-top: 1px solid var(--line); }
.legal-data > div { display: grid; gap: 0.15rem 1.25rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
.legal-data dt { font-weight: 600; }
.legal-data dd { margin: 0; }
@media (min-width: 40rem) { .legal-data > div { grid-template-columns: 12rem 1fr; } }
.legal-table { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-card); }
.legal-table table { width: 100%; min-width: 40rem; border-collapse: collapse; font-size: 0.95rem; }
.legal-table th, .legal-table td { padding: 0.65rem 0.85rem; text-align: left; vertical-align: top; }
.legal-table th { font-weight: 600; background: var(--surface); }
.legal-table td { border-top: 1px solid var(--line); }
.legal code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.9em; }

/* 404 */
.e404 { min-height: calc(100svh - var(--header-h)); display: grid; align-content: center; }
.e404-code { font-size: clamp(4.5rem, 14vw, 9rem); font-weight: 700; line-height: 0.9; letter-spacing: -0.04em; color: var(--accent); margin: 0; }
.e404 h1 { margin-top: var(--space-2); }
.e404 .lead { max-width: 40ch; }
.e404 .cta-row { margin-top: var(--space-3); }
.e404-links { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 1.75rem; margin-top: var(--space-4); padding: var(--space-3) 0 0; border-top: 1px solid var(--line); }
.e404 .e404-links a { text-decoration-thickness: 3px; }
.e404 .e404-links li + li { margin-top: 0; }

/* Campo trampa contra envíos automáticos: fuera de la vista y del teclado, pero presente para los robots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Información básica de protección de datos bajo los formularios */
.data-note { font-size: 0.82rem; line-height: 1.45; color: var(--ink-2); }
.data-note a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.2em; }

/* ---------- Ajustes de la auditoría previa al lanzamiento ---------- */
/* Recorrido de doce etapas en teléfonos de 320 px: las dos columnas se reparten el ancho por igual */
.chain { grid-auto-columns: minmax(0, 1fr); }
/* Cabecera en teléfonos de 320 px con pantalla táctil (botones de 44 px) */
@media (max-width: 21.5rem) { .header-row { gap: 0.25rem; } .header-tools { gap: 0.2rem; } .header-cta { padding-inline: 0.55rem; } }
/* El asterisco de campo obligatorio no llegaba a 4,5:1 sobre el panel del formulario */
.req { color: var(--danger); }
.e404 .e404-links { padding-left: 0; }

/* ---------- Cómo trabajamos · «Buscamos dónde»: nueve puntos de fricción en fichas con pictograma ---------- */
.find-layout { display: grid; gap: var(--space-4); align-items: center; }
.find-head .h2 { font-size: var(--step-4); letter-spacing: -0.03em; line-height: 1.02; max-width: 9ch; }
.find-head .big-arrow { margin: var(--space-3) 0 0; width: 3.25rem; height: 3.25rem; }
.find-grid { list-style: none; display: grid; gap: 0.7rem; }
.find-grid li {
  display: flex; align-items: center; gap: 0.9rem; min-height: 4.75rem; padding: 0.8rem 1rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-1);
  font-weight: 500; line-height: 1.3;
  transition: opacity 320ms ease calc(var(--i, 0) * 45ms), transform 420ms var(--ease-out) calc(var(--i, 0) * 45ms);
}
.find-grid .pic { position: relative; flex: none; background: var(--ink); border-color: var(--ink); color: var(--paper); }
/* El punto rojo es el mismo aviso pendiente del diagrama de la primera pantalla de la Home */
.find-grid .pic::after { content: ""; position: absolute; right: -0.15rem; top: -0.15rem; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--red); border: 2px solid var(--paper); }
.js .find-grid:not(.is-in) li { opacity: 0; }
@media (prefers-reduced-motion: no-preference) { .js .find-grid:not(.is-in) li { transform: translateY(0.6rem); } }
@media (min-width: 40rem) { .find-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; } }
@media (min-width: 62rem) {
  .find-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.7rem, 1.8vh, 1.1rem); }
  .find-grid li { min-height: clamp(5rem, 13vh, 7rem); }
}
/* Con ancho de sobra, el titular va a la izquierda con la flecha a su lado, apuntando a las fichas.
   La columna del titular mide lo que mide el titular, para que nunca invada la rejilla. */
@media (min-width: 75rem) {
  .find-layout { grid-template-columns: max-content minmax(0, 1fr); column-gap: clamp(1.5rem, 2.6vw, 3rem); }
  .find-head { display: flex; align-items: center; gap: clamp(1rem, 1.8vw, 1.75rem); }
  .find-head .h2 { font-size: clamp(2rem, 0.6rem + 2.3vw, 3.5rem); max-width: 8.6ch; }
  .find-head .big-arrow { flex: none; margin: 0; transform: none; width: clamp(2.4rem, 3vw, 3.25rem); height: clamp(2.4rem, 3vw, 3.25rem); }
}
/* Entre 992 y 1200 px el titular va arriba, en una línea, y la flecha apunta hacia abajo */
@media (min-width: 62rem) and (max-width: 74.99rem) {
  .find-head { display: flex; align-items: center; gap: 1.25rem; }
  .find-head .h2 { font-size: var(--step-3); max-width: none; }
  .find-head .big-arrow { margin: 0; width: 2.5rem; height: 2.5rem; }
  .find-layout { gap: var(--space-3); }
}

/* Cabeceras de las páginas interiores entre 992 y 1200 px: a dos columnas, para que quepan en una pantalla */
@media (min-width: 62rem) and (max-width: 74.99rem) {
  .page-hero-grid { grid-template-columns: 6fr 5fr; gap: var(--space-4); align-items: center; }
  .page-hero h1 { font-size: clamp(2rem, 0.9rem + 3vw, 3.2rem); }
}

/* Cabecera en escritorios estrechos (1024–1280 px): con los botones de modo e idioma, los rótulos del menú
   se partían en dos líneas. Se aprietan huecos y, por debajo de 1120 px, la marca se queda en el símbolo. */
.nav-list > li > a { white-space: nowrap; }
@media (min-width: 64rem) and (max-width: 79.99rem) {
  .header-row { gap: 1rem; }
  .nav-list { gap: 1rem; }
  .nav-list > li > a { font-size: 0.9rem; }
}
@media (min-width: 64rem) and (max-width: 69.99rem) { .site-header .brand-name { display: none; } }

/* =====================================================================
   Menú de Contacto (lo crea site.js): contacto, temas legales y,
   al pie, correo, teléfono y WhatsApp
   ===================================================================== */
.has-cmenu { position: relative; gap: 0.1rem; }
/* Puente invisible entre el rótulo y el panel, para que el ratón pueda bajar sin que se cierre */
.has-cmenu::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: calc(var(--header-h) / 2); }
.cmenu {
  position: absolute; right: -1.25rem; top: calc(50% + var(--header-h) / 2); z-index: 60; width: min(37rem, 100vw - 2.5rem);
  background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: 0 0 18px 18px; box-shadow: var(--shadow-2);
  visibility: hidden; opacity: 0; transform: translateY(-4px); transform-origin: 80% top;
  transition: opacity 140ms ease, transform 140ms var(--ease-out), visibility 0s linear 140ms;
}
.has-cmenu.is-open .cmenu { visibility: visible; opacity: 1; transform: none; transition: opacity 180ms ease, transform 180ms var(--ease-out), visibility 0s; }
.has-cmenu.is-open .submenu-toggle svg { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) {
  .has-cmenu:hover .cmenu { visibility: visible; opacity: 1; transform: none; transition: opacity 180ms ease, transform 180ms var(--ease-out), visibility 0s; }
  .has-cmenu:hover .submenu-toggle svg { transform: rotate(180deg); }
}
.cmenu-cols { display: grid; grid-template-columns: 1.4fr 1fr; }
.cmenu-group { padding: 1.15rem 0.9rem 1rem; }
.cmenu-group + .cmenu-group { border-left: 1px solid var(--line); }
.nav-list .cmenu a { border: 0; white-space: normal; text-decoration: none; color: var(--ink); font-size: 0.95rem; font-weight: 500; padding: 0; }
.nav-list .cmenu .cmenu-item { display: flex; align-items: center; gap: 0.8rem; padding: 0.6rem 0.65rem; border-radius: var(--radius-chip); }
.cmenu-ico { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--ink); color: var(--paper); }
.cmenu svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cmenu svg.is-fill, .mobile-extra svg.is-fill { fill: currentColor; stroke: none; }
.cmenu-ico svg { width: 1.2rem; height: 1.2rem; }
.cmenu-item b { display: block; font-weight: 600; line-height: 1.3; }
.cmenu-item small { display: block; margin-top: 0.1rem; font-size: 0.82rem; font-weight: 400; line-height: 1.35; color: var(--ink-2); }
.nav-list .cmenu .cmenu-link { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.55rem 0.65rem; border-radius: var(--radius-chip); }
.cmenu-link svg { flex: none; width: 0.95rem; height: 0.95rem; color: var(--accent); opacity: 0; transform: translateX(-4px); transition: opacity 140ms ease, transform 160ms var(--ease-out); }
.nav-list .cmenu a:active { background: var(--surface); }
@media (hover: hover) and (pointer: fine) {
  .nav-list .cmenu .cmenu-item:hover, .nav-list .cmenu .cmenu-link:hover { background: var(--surface); }
  .cmenu-link:hover svg { opacity: 1; transform: none; }
  .nav-list .cmenu a.cmenu-contact:hover span { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.25em; }
}
/* Pie: correo, teléfono y WhatsApp */
.cmenu-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.1rem; padding: 0.8rem 1.2rem 0.8rem 1.55rem; background: var(--surface); border-top: 1px solid var(--line); border-radius: 0 0 17px 17px; }
.cmenu-contact, .nav-list .cmenu .cmenu-contact { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.25rem; font-size: 0.9rem; font-weight: 500; color: var(--ink); text-decoration: none; }
.cmenu-contact svg { flex: none; width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cmenu-contact.is-pending, .nav-list .cmenu .cmenu-contact.is-pending { font-weight: 400; color: var(--ink-2); }
.cmenu-wa, .nav-list .cmenu .cmenu-wa {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.25rem; margin-left: auto; padding: 0 0.9rem 0 0.7rem;
  border-radius: var(--radius); background: var(--ink); color: var(--paper); font-size: 0.9rem; font-weight: 600; text-decoration: none;
}
.cmenu-wa svg { flex: none; width: 1.15rem; height: 1.15rem; }
.cmenu-wa.is-pending, .nav-list .cmenu .cmenu-wa.is-pending { background: none; color: var(--ink-2); border: 1px dashed var(--line-strong); font-weight: 400; }
.cmenu-wa:active { opacity: 0.8; }
@media (prefers-reduced-motion: reduce) { .cmenu, .cmenu-link svg { transition-duration: 0.01ms; transition-delay: 0s; } }

/* Lo mismo al final del menú móvil */
.mobile-extra { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; padding-bottom: var(--space-3); }
.mobile-extra .submenu-title { margin: 0 0 0.25rem; }
.mobile-legal { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin-bottom: 0.9rem; }
.mobile-nav .mobile-legal a { display: inline-block; padding: 0.75rem 0; border: 0; font-size: 1rem; font-weight: 400; color: var(--ink-2); }
.mobile-extra .cmenu-foot { padding: 0.7rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-card); }
.mobile-nav .mobile-extra .cmenu-contact, .mobile-nav .mobile-extra .cmenu-wa { display: inline-flex; padding-block: 0; border-bottom: 0; font-size: 0.95rem; min-height: 2.75rem; }
.mobile-nav .mobile-extra .cmenu-wa { padding-inline: 0.7rem 0.9rem; font-weight: 600; }
.mobile-nav .mobile-extra .cmenu-wa.is-pending { font-weight: 400; }

/* =====================================================================
   Home como explorador (3 oct 2026): primera pantalla,
   panel de temas y cada tema abierto a pantalla completa, uno cada vez
   ===================================================================== */
/* La Home ya no lleva índice lateral: el contenido recupera todo su ancho */
@media (min-width: 90rem) and (min-height: 40rem) { html:has(.explore) :is(main, .site-footer) .wrap { width: min(100% - 2.5rem, var(--wrap)); } }
/* El hueco de la barra de desplazamiento se reserva siempre, para que la cabecera no salte al abrir un tema */
html:has(.explore) { scrollbar-gutter: stable; }

/* --- Brújula de temas: los cuatro puntos son las áreas; la aguja gira hacia la elegida --- */
.explore-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.explore-head { display: grid; gap: 0.4rem; }
.explore-head .h2 { font-size: clamp(2.2rem, 1rem + 2.6vw, 3.4rem); letter-spacing: -0.03em; line-height: 1.05; }
.explore-head .lead { color: var(--ink-2); font-size: 1.05rem; line-height: 1.45; }

.dial { position: relative; width: min(100%, 30rem, 58vh); aspect-ratio: 1; margin: 1.6rem auto 1.9rem; }
.dial-face { position: absolute; left: 22%; top: 22%; width: 56%; height: 56%; overflow: visible; filter: drop-shadow(0 18px 26px rgb(0 0 0 / 0.14)); }
.dial-ring { fill: var(--paper); stroke: var(--ink); stroke-width: 3; }
.dial-inner { fill: none; stroke: var(--line); stroke-width: 1.5; }
.dial-ticks line { stroke: var(--line-strong); stroke-width: 1.4; }
.dial-ticks .maj { stroke: var(--ink); stroke-width: 2.6; }
.dial-needle { transform-origin: 200px 200px; transition: transform 700ms cubic-bezier(0.34, 1.35, 0.64, 1); }
.dial-needle.no-anim { transition: none; }
.dial-needle .n { fill: var(--red); }
.dial-needle .s { fill: var(--ink); }
.dial-hub { fill: var(--paper); stroke: var(--ink); stroke-width: 3; }
/* Símbolo GTe de fondo en la esfera: tenue, debajo de la aguja. Aparece al llegar a la pantalla. */
.dial-logo { opacity: 0.58; transform-origin: 200px 200px; transition: opacity 800ms ease 300ms, transform 900ms var(--ease-out) 300ms; }
.js .dial:not(.is-in) .dial-logo { opacity: 0; transform: scale(0.9); }
.dial-logo.is-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dial-logo.is-light { display: none; }
  :root:not([data-theme="light"]) .dial-logo.is-dark { display: inline; }
}
:root[data-theme="dark"] .dial-logo.is-light { display: none; }
:root[data-theme="dark"] .dial-logo.is-dark { display: inline; }
/* Al llegar a la pantalla la aguja entra girando hasta su sitio */
/* (con GSAP la entrada la hace él: una regla de CSS con transform anularía el giro que GSAP escribe en el atributo del SVG) */
.js .dial:not(.is-in):not(.has-gsap) .dial-needle { transform: rotate(-55deg); }

.dial-tab {
  position: absolute; transform: translate(-50%, -50%); display: block; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer;
  font: inherit; color: var(--ink-2); touch-action: manipulation;
}
.dial-tab.is-n { left: 50%; top: 11%; }
.dial-tab.is-e { left: 89%; top: 50%; }
.dial-tab.is-s { left: 50%; top: 89%; }
.dial-tab.is-w { left: 11%; top: 50%; }
.dial-tab .pic { width: clamp(2.75rem, 7vh, 3.4rem); background: var(--paper); border-color: var(--ink); color: var(--ink); transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms var(--ease-out); }
.dial-label { position: absolute; left: 50%; top: calc(100% + 0.35rem); transform: translateX(-50%); white-space: nowrap; font-size: 0.9rem; font-weight: 500; line-height: 1.2; transition: color 180ms ease; }
.dial-tab.is-n .dial-label { top: auto; bottom: calc(100% + 0.35rem); }
.dial-tab[aria-selected="true"] { color: var(--ink); }
.dial-tab[aria-selected="true"] .pic { background: var(--red); border-color: var(--red); color: #FFFFFF; transform: scale(1.08); }
.dial-tab[aria-selected="true"] .dial-label { font-weight: 600; }
.dial-tab:active .pic { transform: scale(0.97); }
html:not(.js) .dial { display: none; }

/* Área elegida: sus temas, con el titular de cada uno como avance */
.zones { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
.zone { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-1); }
.zone header { display: grid; gap: 0.15rem; padding: clamp(0.8rem, 2.2vh, 1.1rem) 1.2rem clamp(0.7rem, 1.9vh, 1rem); border-bottom: 1px solid var(--line); }
.zone-n { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.1em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.zone h3 { font-size: var(--step-2); letter-spacing: -0.015em; line-height: 1.15; }
.zone header p { font-size: 0.95rem; color: var(--ink-2); }
.zone ul { list-style: none; padding: 0.4rem; }
.zone li a {
  display: flex; align-items: center; gap: 0.7rem; min-height: clamp(2.9rem, 6.4vh, 3.9rem); padding: 0.3rem 0.8rem; border-radius: var(--radius);
  text-decoration: none; color: var(--ink); transition: background-color 140ms ease;
}
.zone-text { display: grid; min-width: 0; }
.zone li b { font-size: 1.05rem; font-weight: 600; line-height: 1.25; }
.zone li small { font-size: 0.86rem; line-height: 1.35; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zone li small:empty { display: none; }
.zone li a::after {
  content: ""; flex: none; width: 1.1rem; height: 1.1rem; margin-left: auto; background: var(--line-strong);
  -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat;
  transition: transform 180ms var(--ease-out), background-color 140ms ease;
}
.zone li a:active { background: var(--surface); }
@media (hover: hover) and (pointer: fine) {
  .zone li a:hover { background: var(--surface); }
  .zone li a:hover::after { background: var(--accent); transform: translateX(3px); }
  .dial-tab:hover { color: var(--ink); }
  /* Al pasar el ratón el punto solo avisa de que se puede pulsar; el área cambia con el clic */
  .dial-tab:not([aria-selected="true"]):hover .pic { border-color: var(--red); color: var(--red); transform: scale(1.05); }
}
.explore-tag { flex: none; padding: 0.1rem 0.45rem; border: 1px solid var(--line-strong); border-radius: var(--radius-chip); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
/* Con JavaScript las cuatro áreas ocupan el mismo hueco y solo se ve la elegida: la pantalla no salta al cambiar */
.js .zone { grid-area: 1 / 1; transition: opacity 220ms ease; }
.js .zone:not(.is-active) { visibility: hidden; opacity: 0; }
.js .zones { gap: 0; }
.explore-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; padding: clamp(0.6rem, 1.8vh, 0.9rem) 1.15rem; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.explore-cta p { font-size: 1.1rem; font-weight: 600; line-height: 1.25; }
.explore-cta .btn { min-height: 2.75rem; padding-block: 0.5rem; }
@media (min-width: 40rem) { html:not(.js) .zones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) {
  .explore-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "dial head" "dial areas" "dial cta"; column-gap: var(--space-5); row-gap: clamp(0.8rem, 2.2vh, 1.4rem); align-items: center; }
  .explore-head { grid-area: head; }
  .dial { grid-area: dial; }
  .zones { grid-area: areas; }
  .explore-cta { grid-area: cta; }
  html:not(.js) .explore-layout { grid-template-columns: 1fr; grid-template-areas: "head" "areas" "cta"; }
}
@media (max-width: 30rem) { .dial-label { font-size: 0.8125rem; } .dial { width: min(84%, 30rem, 58vh); margin-block: 1.9rem 1.6rem; } }
@media (max-width: 22rem) { .dial-label { font-size: 0.72rem; } .dial-tab.is-e { left: 84%; } .dial-tab.is-w { left: 16%; } .dial-tab .pic { width: 2.5rem; } }
/* Escritorios bajos o estrechos: se aprieta lo justo para que la brújula y su lista quepan en una pantalla */
@media (min-width: 62rem) and (max-height: 50rem) { .zone h3 { font-size: var(--step-1); } .explore-head .h2 { font-size: clamp(2rem, 0.9rem + 2.3vw, 3rem); } .dial { margin-block: 1.4rem 1.6rem; } }
@media (prefers-reduced-motion: reduce) { .dial-needle, .dial-logo, .dial-tab .pic, .js .zone { transition-duration: 0.01ms; transition-delay: 0s; } }

/* --- Temas: ocultos hasta que se eligen; el elegido ocupa toda la ventana bajo la cabecera --- */
:where(.topic) { background-color: var(--paper); }
.js .topic:not(.is-active) { display: none; }
html.is-viewing { overflow: hidden; }
.js .topic.is-active {
  position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; top: calc(var(--header-h) + 1px + env(safe-area-inset-top, 0px));
  overflow-y: auto; overscroll-behavior: contain; margin: 0; border-top: 0; padding-bottom: 5.5rem;
}
@media (min-width: 62rem) and (min-height: 40rem) { .js .topic.is-active { padding-bottom: clamp(4.5rem, 9vh, 5.5rem); } }
.topic.is-active:focus { outline: none; }
@keyframes topic-in { from { opacity: 0; transform: translateY(0.75rem); } }
/* Solo se anima el contenido. El fondo del tema aparece de golpe y opaco: si se desvaneciera la sección
   entera, durante la entrada se vería la brújula de detrás (un destello entre un tema y otro). */
@media (prefers-reduced-motion: no-preference) { .js .topic.is-active.is-entering > .wrap { animation: topic-in 260ms var(--ease-out) both; } }

/* Barra del visor: volver a los temas y pasar al anterior o al siguiente */
.viewer-bar {
  position: fixed; z-index: 45; left: 0; right: 0; bottom: max(0.9rem, env(safe-area-inset-bottom, 0px)); margin-inline: auto; width: max-content; max-width: calc(100vw - 1.5rem);
  display: none; align-items: center; gap: 0.25rem; padding: 0.3rem; border-radius: 999px;
  background: #111111; color: #FFFFFF; border: 1px solid rgb(255 255 255 / 0.2); box-shadow: 0 14px 34px -14px rgb(0 0 0 / 0.55);
}
html.is-viewing .viewer-bar { display: flex; }
.viewer-bar button, .viewer-bar a {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-width: 2.75rem; min-height: 2.75rem; padding: 0 0.9rem; border: 0; border-radius: 999px;
  background: none; color: inherit; font: inherit; font-size: 0.92rem; font-weight: 600; text-decoration: none; cursor: pointer; touch-action: manipulation;
  transition: background-color 140ms ease, transform 140ms var(--ease-out);
}
.viewer-bar .viewer-back { background: #FFFFFF; color: #111111; }
.viewer-bar .viewer-step { padding: 0; }
.viewer-bar button:active, .viewer-bar a:active { transform: scale(0.96); }
.viewer-bar svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Ancho fijo: la barra y sus flechas no se mueven aunque el nombre del tema sea más largo o más corto */
.viewer-where { display: inline-flex; align-items: baseline; justify-content: center; gap: 0.55rem; width: 16rem; padding: 0 0.5rem; font-size: 0.9rem; white-space: nowrap; overflow: hidden; }
.viewer-where b { font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.viewer-where span { overflow: hidden; text-overflow: ellipsis; color: rgb(255 255 255 / 0.72); }
.viewer-bar :focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .viewer-bar .viewer-step:hover { background: rgb(255 255 255 / 0.14); }
  .viewer-bar .viewer-back:hover { background: #E9E9E9; }
}
@media (max-width: 30rem) { .viewer-where { width: 5.25rem; } .viewer-where span { display: none; } .viewer-back span { display: none; } .viewer-bar .viewer-back { padding: 0; } }

/* Paso entre temas con transición de vista: la pantalla anterior se queda quieta y opaca debajo y la nueva
   entra encima con un fundido y un desplazamiento corto. La cabecera y la barra de temas no se mueven. */
.viewer-bar { view-transition-name: viewer-bar; }
html[data-vt]::view-transition-old(root) { animation: none; mix-blend-mode: normal; }
html[data-vt]::view-transition-new(root) { animation: vt-topic-in 340ms var(--ease-out) both; mix-blend-mode: normal; }
html[data-vt="next"] { --vt-x: 2.25rem; --vt-y: 0px; }
html[data-vt="prev"] { --vt-x: -2.25rem; --vt-y: 0px; }
html[data-vt="open"] { --vt-x: 0px; --vt-y: 1rem; }
html[data-vt="close"] { --vt-x: 0px; --vt-y: 0px; }
@keyframes vt-topic-in { from { opacity: 0; transform: translate(var(--vt-x, 0px), var(--vt-y, 0px)); } }
html[data-vt]::view-transition-group(viewer-bar) { animation-duration: 200ms; }

/* =====================================================================
   Quiénes somos · El nombre, segunda vuelta (segunda vuelta)
   ===================================================================== */
/* La sección forma su propio grupo de pintado: así la palabra de fondo puede ir detrás del contenido
   sin esconderse tras el fondo, y el logotipo sigue fundiéndose con el negro de la sección. */
.name-slide { isolation: isolate; }

/* El logotipo cobra vida, como la estatua del mito: llega sin color y lo recupera.
   Es un velo gris encima (mezcla «saturation») y no un filtro en la imagen: con filter la imagen deja de
   fundirse con el fondo y se ve su recuadro. Un gris neutro no cambia el negro del fondo (un tono marfil
   con mezcla «color» sí: dejaba un disco visible) y el velo cubre todo el resplandor, así que no tiene borde. */
.name-logo::after {
  content: ""; position: absolute; inset: -38% -42%; border-radius: 50%; pointer-events: none;
  background: #808080; mix-blend-mode: saturation; opacity: 0; transition: opacity 1700ms ease 550ms;
}
.js .name-logo:not(.is-in)::after { opacity: 1; transition: none; }

/* Halo de anillos finos alrededor del logotipo: se abren al llegar */
.name-rings { position: absolute; inset: -24%; width: 148%; height: 148%; overflow: visible; pointer-events: none; }
.name-rings circle {
  fill: none; stroke: rgb(255 255 255 / 0.13); stroke-width: 0.35; vector-effect: non-scaling-stroke; stroke-width: 1px;
  transform-origin: 100px 100px; transition: opacity 900ms ease calc(700ms + var(--i) * 160ms), transform 1300ms var(--ease-out) calc(700ms + var(--i) * 160ms);
}
.name-rings circle:nth-child(2) { stroke: rgb(255 255 255 / 0.09); }
.name-rings circle:nth-child(3) { stroke: rgb(230 20 32 / 0.28); stroke-dasharray: 2 5; }
.js .name-logo:not(.is-in) .name-rings circle { opacity: 0; transform: scale(0.78); }

/* Palabra de fondo en contorno, enorme y muy tenue */
.name-ghost { display: none; }
@media (min-width: 62rem) {
  .name-ghost {
    display: block; position: absolute; z-index: -1; right: -0.04em; bottom: -0.17em; pointer-events: none; user-select: none; white-space: nowrap;
    font-size: clamp(9rem, 21vw, 24rem); font-weight: 700; letter-spacing: -0.045em; line-height: 1; text-transform: uppercase;
    color: transparent; -webkit-text-stroke: 1px rgb(255 255 255 / 0.085);
    transition: opacity 180ms ease;
  }
  .name-ghost.is-changing { opacity: 0; }
}

/* Números romanos en los capítulos y capitular en el relato */
.tab-n { display: inline-block; margin-right: 0.5em; font-size: 0.5em; font-weight: 600; letter-spacing: 0.14em; color: var(--red); vertical-align: 0.55em; }
@media (max-width: 30rem) { .tab-n { display: none; } }
.myth-story p:first-child::first-letter { float: left; margin: 0.06em 0.12em 0 0; font-size: 3.15em; line-height: 0.82; font-weight: 700; color: var(--red); }

@media (prefers-reduced-motion: reduce) { .name-logo::after, .name-rings circle, .name-ghost { transition-duration: 0.01ms; transition-delay: 0s; } }

/* Mariposas rojas que salen volando del logotipo (petición del cliente): pequeñas, translúcidas, una sola vez
   al llegar a la pantalla y durante unos tres segundos. Cada una parte de una mariposa del logotipo.
   Tres movimientos anidados para que la trayectoria sea una curva: avance (.fly), subida (.fly-y) y balanceo (svg);
   las alas se pliegan sobre el cuerpo (.fly-wings). Van en su propia capa, por encima del velo de color. */
.name-flock { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.fly { position: absolute; left: var(--x); top: var(--y); width: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); opacity: 0; color: var(--red); }
.fly-y, .fly svg { display: block; }
.fly svg { width: 100%; height: auto; overflow: visible; fill: currentColor; transform: rotate(var(--rot)); }
.fly-wings { transform-origin: 16px 14px; }
@media (prefers-reduced-motion: no-preference) {
  .js .name-logo.is-in .fly { animation: fly-x var(--t) cubic-bezier(0.25, 0.6, 0.45, 1) calc(1300ms + var(--w)) both; }
  .js .name-logo.is-in .fly-y { animation: fly-y var(--t) cubic-bezier(0.4, 0, 0.75, 0.7) calc(1300ms + var(--w)) both, fly-grow 520ms var(--ease-out) calc(1300ms + var(--w)) both; }
  .js .name-logo.is-in .fly svg { animation: fly-sway 640ms ease-in-out calc(1300ms + var(--w)) 5 alternate; }
  .js .name-logo.is-in .fly-wings { animation: fly-flap 130ms ease-in-out calc(1300ms + var(--w)) 22 alternate; }
}
@keyframes fly-x { 0% { opacity: 0; transform: translateX(0); } 14%, 68% { opacity: var(--o); } 100% { opacity: 0; transform: translateX(var(--dx)); } }
@keyframes fly-y { from { transform: translateY(0); } to { transform: translateY(var(--dy)); } }
/* Crece al despegar con la propiedad scale, aparte del transform, para no atarlo al ritmo de la subida */
@keyframes fly-grow { from { scale: 0.5; } to { scale: 1; } }
@keyframes fly-sway { from { transform: rotate(calc(var(--rot) - 9deg)); } to { transform: rotate(calc(var(--rot) + 9deg)); } }
@keyframes fly-flap { from { transform: scaleX(1); } to { transform: scaleX(0.4); } }

/* =====================================================================
   Arreglos tras la crítica del 4 oct 2026
   ===================================================================== */
/* Franja roja de las tarjetas destacadas: línea interior que no llega a las esquinas redondeadas */
.rule, .principles { position: relative; }
.rule::before, .principles::before {
  content: ""; position: absolute; left: 1.5rem; right: 1.5rem; top: -1px; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent);
}

/* IA local: en escritorio la frase que cierra el bloque baja a la columna del titular, que quedaba vacía.
   El orden del HTML (y por tanto el de móvil y el de lectura) no cambia. */
@media (min-width: 62rem) {
  .split.has-aside { grid-template-rows: auto auto; row-gap: clamp(1.1rem, 3vh, 2rem); align-content: center; }
  .split.has-aside > :first-child { grid-area: 1 / 1; align-self: end; }
  .split.has-aside > :nth-child(2) { grid-area: 1 / 2 / span 2; align-self: center; }
  .split.has-aside > .aside { grid-area: 2 / 1; align-self: start; }
  /* Variante: la lista se queda bajo el titular y la frase destacada ocupa la columna derecha.
     Se usa cuando la frase da por leída la lista («Pero existe una regla»), para no adelantarla. */
  .split.has-aside.aside-right > :nth-child(2) { grid-area: 2 / 1; align-self: start; }
  .split.has-aside.aside-right > .aside { grid-area: 1 / 2 / span 2; align-self: center; }
  .split.has-aside.aside-right .check-list { columns: 1; }
  .split.has-aside.aside-right .check-list li { padding-block: clamp(0.28rem, 1vh, 0.55rem); }
  .split.has-aside.aside-right .check-list li::before { top: calc(clamp(0.28rem, 1vh, 0.55rem) + 0.5rem); }
  .split.has-aside.aside-right .pull { font-size: var(--step-3); max-width: 22ch; }
  /* Tus datos, en casa: texto a la izquierda, diagrama solo a la derecha */
  #datos-en-casa .local { align-items: center; }
  #datos-en-casa .statement { font-size: clamp(2rem, min(1.1rem + 3vw, 6vh), 3.4rem); }
}

/* Cierre de cada página: las mariposas del logotipo y su trayectoria, en la esquina del resplandor */
.closing-flight { display: none; }
@media (min-width: 62rem) {
  .closing-flight {
    display: block; position: absolute; right: clamp(4rem, 9vw, 9rem); top: clamp(1.5rem, 8vh, 4.5rem); width: clamp(9rem, 14vw, 14rem);
    overflow: visible; pointer-events: none; transition: clip-path 1200ms var(--ease-out) 350ms;
  }
  .cf-trail { fill: none; stroke: rgb(255 255 255 / 0.4); stroke-width: 1.2; stroke-dasharray: 3 5; stroke-linecap: round; }
  .cf-b { fill: var(--red); }
  .cf-body { fill: none; stroke: #FFFFFF; stroke-width: 1.2; stroke-linecap: round; }
  .js .closing:not(.is-in) .closing-flight { clip-path: inset(0 100% 0 0); }
  .js .closing.is-in .closing-flight { clip-path: inset(-10% -10% -10% -10%); }
}
@media (prefers-reduced-motion: reduce) { .closing-flight { transition: none; } }

/* Brújula: punto de partida recomendado */
.explore-tag.is-start { border-color: var(--red); background: var(--red); color: #FFFFFF; }

/* Barra de temas: el paso al siguiente es un botón con su nombre (ancho fijo, como el resto de la barra) */
.viewer-bar .viewer-next { width: 12.5rem; padding: 0 0.7rem 0 1.1rem; justify-content: space-between; background: var(--red); color: #FFFFFF; text-align: left; }
.viewer-next-text { display: grid; min-width: 0; line-height: 1.15; }
.viewer-next-text small { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.03em; opacity: 0.88; }
.viewer-next-text b { font-size: 0.9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) and (pointer: fine) { .viewer-bar .viewer-next:hover { background: #C7101B; } }
@media (max-width: 48rem) { .viewer-where { width: 5.25rem; } .viewer-where span { display: none; } .viewer-bar .viewer-next { width: 11rem; } }
@media (max-width: 36rem) { .viewer-back span { display: none; } .viewer-bar .viewer-back { padding: 0; } }
@media (max-width: 30rem) {
  .viewer-bar .viewer-next { width: 7.75rem; padding: 0 0.5rem 0 0.95rem; }
  .viewer-next-text small { font-size: 0.9rem; font-weight: 600; letter-spacing: 0; opacity: 1; }
  .viewer-next-text b { display: none; }
}
@media (max-width: 22rem) { .viewer-bar .viewer-next { width: 6.75rem; } .viewer-where { width: 4.5rem; } }

/* Móvil: el índice de pantallas pasa a ser una barra de secciones bajo la cabecera (site.js lo mete dentro de ella).
   Se desliza con el dedo y marca la sección que se está leyendo. */
@media (max-width: 61.99rem) {
  .screen-nav {
    position: relative; display: flex; gap: 0.3rem; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    padding: 0.3rem 2rem 0.3rem 1.25rem; border-top: 1px solid var(--line); background: var(--paper);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.2rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 2.2rem), transparent);
  }
  .screen-nav::-webkit-scrollbar { display: none; }
  .screen-nav a {
    position: relative; flex: none; display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 0.8rem; border-radius: 999px;
    font-size: 0.875rem; font-weight: 500; line-height: 1; white-space: nowrap; text-decoration: none; color: var(--ink-2); touch-action: manipulation;
    transition: background-color 160ms ease, color 160ms ease;
  }
  .screen-nav a::after { content: ""; position: absolute; inset: -0.3rem 0; }   /* zona de toque de 44 px de alto */
  .screen-nav a[aria-current="true"] { background: var(--ink); color: var(--paper); font-weight: 600; }
  .screen-nav a:active { background: var(--surface); }
  .site-header:has(.menu-toggle[aria-expanded="true"]) .screen-nav { display: none; }
  html.has-secnav { scroll-padding-top: calc(env(safe-area-inset-top, 0px) + var(--header-h) + 3rem); }
}

/* =====================================================================
   Confirmación de envío (formulario de Contacto y panel Hablemos)
   ===================================================================== */
.form-success { display: grid; gap: clamp(0.9rem, 2.4vh, 1.4rem); justify-items: start; align-content: center; }
.done-mark { width: 3.5rem; height: 3.5rem; overflow: visible; }
.done-mark circle { fill: var(--red); transform-origin: 24px 24px; }
.done-mark path { fill: none; stroke: #FFFFFF; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 32; }
.form-success .pull { max-width: 22ch; }
.done-next { font-size: var(--step-1); line-height: 1.4; color: var(--ink-2); max-width: 34ch; }
.done-next b { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.done-next:empty { display: none; }
/* La marca se dibuja una vez al aparecer: confirma que el envío ha salido */
@media (prefers-reduced-motion: no-preference) {
  .form-success:not([hidden]) .done-mark circle { animation: done-pop 340ms var(--ease-out) both; }
  .form-success:not([hidden]) .done-mark path { animation: done-draw 420ms var(--ease-out) 160ms both; }
  .form-success:not([hidden]) > :not(.done-mark) { animation: done-rise 420ms var(--ease-out) 220ms both; }
}
@keyframes done-pop { from { opacity: 0; transform: scale(0.6); } }
@keyframes done-draw { from { stroke-dashoffset: 32; } }
@keyframes done-rise { from { opacity: 0; transform: translateY(8px); } }

/* Panel Hablemos: al confirmar se retira la entradilla y el mensaje ocupa el centro */
.talk-main.is-done { display: grid; align-content: center; }
.talk-main.is-done .form-intro { display: none; }
.talk-main.is-done .form-success { padding-block: clamp(1rem, 5vh, 3rem); }
/* Contacto: el recuadro conserva el hueco del formulario y el mensaje queda centrado en él */
.contact-top .form-panel .form-success { flex: 1; padding-block: clamp(1.5rem, 6vh, 4rem); }
.contact-top .form-success .pull { font-size: var(--step-2); }

/* Datos de contacto: una dirección de correo no se puede partir bien, así que en pantallas estrechas
   el rótulo va encima del dato en lugar de al lado (si no, el correo ensanchaba la página) */
.contact-details dd { min-width: 0; }
.contact-details dd a { overflow-wrap: anywhere; color: var(--ink); text-underline-offset: 0.18em; }
@media (hover: hover) and (pointer: fine) { .contact-details dd a:hover { color: var(--accent); } }
/* Escritorio estrecho: la columna de datos es angosta; rótulo y dato algo más pequeños para que el correo quepa en una línea */
@media (min-width: 62rem) and (max-width: 82rem) {
  .contact-top .contact-details dl > div { grid-template-columns: 4.6rem minmax(0, 1fr); gap: 0.75rem; }
  .contact-top .contact-details dt, .contact-top .contact-details dd { font-size: 0.9rem; }
}
@media (max-width: 30rem) {
  .contact-details dl > div { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
  .contact-details dd { font-size: 1rem; }
}

/* =====================================================================
   Movimiento con GSAP (9 oct 2026). Cada bloque se activa con la clase .has-gsap, que pone el script
   solo si GSAP ha cargado y no está pedido «reducir movimiento». Sin esa clase rige el CSS de siempre.
   Regla general: lo que anima GSAP no puede tener a la vez transición, animación ni transform en CSS.
   ===================================================================== */
/* Brújula: la aguja la gira GSAP */
.dial.has-gsap .dial-needle { transition: none; }

/* Diagrama de la primera pantalla */
.depend.has-gsap .depend-core { box-shadow: none; transform: none; transition: none !important; }
.depend.has-gsap .depend-out { transform: none; transition: none !important; }
.depend.has-gsap .depend-core span, .depend.has-gsap .node i { transition: none !important; animation: none !important; }
.depend.has-gsap .depend-lines line { transform: none !important; transition: none !important; animation: none !important; }
.core-halo {
  position: absolute; left: 48%; top: 52%; width: clamp(4.6rem, 10vw, 6.75rem); aspect-ratio: 1; border-radius: 50%;
  background: rgb(230 20 32 / 0.2); pointer-events: none;
}
/* Avisos que viajan por las líneas: rojos los que piden atención, blancos la información que circula */
.pulse {
  position: absolute; width: 0.62rem; height: 0.62rem; border-radius: 50%; visibility: hidden; pointer-events: none;
  background: var(--red); box-shadow: 0 0 0 3px rgb(230 20 32 / 0.28);
}
.pulse.is-flow { background: #FFFFFF; box-shadow: 0 0 0 3px rgb(255 255 255 / 0.22); }

/* Mariposas del logotipo: el vuelo lo lleva GSAP */
.name-flock.has-gsap .fly, .name-flock.has-gsap .fly-y, .name-flock.has-gsap .fly svg, .name-flock.has-gsap .fly-wings { animation: none !important; }
.name-flock.has-gsap .fly svg { transform: none; }

/* ---------- GSAP, segunda tanda (9 oct 2026) ---------- */
/* Anillo del sistema en el diagrama de la primera pantalla (lo crea home.js; solo se ve en «Con sistema») */
.core-ring {
  position: absolute; left: 48%; top: 52%; width: calc(clamp(4.6rem, 10vw, 6.75rem) * 1.62); aspect-ratio: 1;
  overflow: visible; visibility: hidden; pointer-events: none;
}
.core-ring .orbit { fill: none; stroke: rgb(255 255 255 / 0.36); stroke-width: 0.8; stroke-linecap: round; stroke-dasharray: 1.2 4.2; }
.core-ring .sweep { fill: none; stroke: #FFFFFF; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 15 85; }
.core-ring .tick { fill: rgb(255 255 255 / 0.45); }
.core-ring .ripple { fill: none; stroke: rgb(255 255 255 / 0.8); stroke-width: 0.9; }

/* Cambio de modo claro/oscuro: fundido corto (la regla general de html[data-vt] deja quieta la vista anterior) */
@keyframes vt-fade { from { opacity: 0; } }
html[data-vt="theme"]::view-transition-new(root) { animation: vt-fade 240ms ease both; }

/* IA local · «Tus datos, en casa» */
.perimeter-diagram { position: relative; }
.perimeter-diagram.has-gsap .packet { animation: none !important; }
.perimeter-diagram.has-gsap .server li { animation: none !important; transition: background-color 240ms ease, color 240ms ease; }
.perimeter-diagram.has-gsap .server li.is-lit { background: var(--accent); color: var(--accent-ink); }
.perimeter { transition: box-shadow 220ms ease; }
.perimeter.is-hit { box-shadow: 0 0 0 4px rgb(230 20 32 / 0.4); }
.outside .blocked { transition: color 300ms ease; }
.outside .blocked.is-hit { color: var(--accent); }
.probe {
  position: absolute; left: 0; top: 0; width: 0.62rem; height: 0.62rem; border-radius: 50%; visibility: hidden; pointer-events: none;
  background: var(--accent); box-shadow: 0 0 0 3px rgb(230 20 32 / 0.28);
}

/* IA local · memoria: las palabras del almacén esperan apagadas y se encienden al llegar cada etiqueta */
.memory-diagram { position: relative; }
.memory-diagram.has-gsap .md-store li { opacity: 0.4; transition: opacity 280ms ease; }
.memory-diagram.has-gsap .md-store li.is-fed { opacity: 1; }
.md-ghost {
  position: absolute; left: 0; top: 0; visibility: hidden; pointer-events: none; white-space: nowrap;
  border: 1px solid var(--accent); border-radius: var(--radius-chip); padding: 0.2rem 0.7rem; font-size: 0.95rem; line-height: 1.6;
  background: var(--paper); color: var(--ink); box-shadow: 0 6px 14px -8px rgb(0 0 0 / 0.5);
}

/* Cómo trabajamos · figura de la portada: espera oculta a que motion.js la prepare, para que no se vea
   entera un instante antes de trazarse. Si el script no llegara a ejecutarse, aparece sola a los 3 s. */
@keyframes gap-safety { to { visibility: visible; } }
.js .gap-figure:not(.is-ready) svg { visibility: hidden; animation: gap-safety 0s linear 3s forwards; }
.gap-figure .runner { fill: var(--accent); stroke: none; }

/* =====================================================================
   Pantallas de impacto (9 oct 2026)
   Martín vio «sosas, con poco impacto» las pantallas que eran solo una
   tarjeta de texto. Se rehacen siete: las tres de pregunta (.ask), el
   manifiesto de «Quién está detrás» (.manifesto), los principios (.creed),
   la línea de «Primer contacto» (.next-steps.track) y el cierre de
   «Cómo trabajamos» (.offer-xl). El texto es el mismo; cambia la escala,
   la composición y la entrada.
   ===================================================================== */
@keyframes rise-in { from { opacity: 0; transform: translateY(0.7rem); } }
@keyframes grow-x { from { transform: scaleX(0); } }
@keyframes ask-draw { from { stroke-dashoffset: 1600; } }
@keyframes ask-lit { from { color: #8C8C8C; } }

/* ---------- Pantallas de pregunta: negras y con la pregunta a gran tamaño. Solo la pregunta fundacional (.ask-solo) lleva el
   interrogante gigante que se traza al fondo: en las de dos columnas cruzaba el titular y las fichas, y se quitó. ---------- */
.ask {
  position: relative; overflow: hidden; isolation: isolate;
  background-image:
    radial-gradient(46rem 32rem at 100% 100%, rgb(230 20 32 / 0.24), transparent 64%),
    radial-gradient(circle at 1px 1px, rgb(255 255 255 / 0.08) 1px, transparent 1.4px);
  background-size: auto, 22px 22px;
}
.ask-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ask-mark { position: absolute; right: -7%; top: 4%; height: 62%; width: auto; max-width: none; overflow: visible; }
.ask-mark text {
  font-family: var(--font); font-size: 400px; font-weight: 700;
  fill: none; stroke: var(--red); stroke-width: 1.6; stroke-opacity: 0.3; stroke-dasharray: 1600; stroke-dashoffset: 0;
}
.ask-kicker { display: flex; align-items: center; gap: 0.9rem; font-size: var(--step-0); font-weight: 500; color: var(--ink-2); }
.ask-kicker::before { content: ""; flex: none; width: 2.4rem; height: 2px; background: var(--accent); }
.ask-q { margin: 0; font-size: var(--step-3); font-weight: 700; line-height: 1.06; letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; }
.ask-sign { color: var(--accent); }
.ask-eyebrow { font-size: var(--step-1); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.ask-head .ask-kicker { margin-top: 0.6rem; }
.ask-head .ask-q { margin-top: clamp(1.2rem, 4vh, 2.4rem); }

/* La pregunta fundacional: una sola columna */
.ask-solo .ask-q { margin-top: clamp(1rem, 3vh, 1.75rem); max-width: 28ch; font-size: clamp(1.6rem, 1.05rem + 2.5vw, 2.5rem); line-height: 1.16; letter-spacing: -0.026em; text-wrap: pretty; }
.ask-dim { color: #8C8C8C; }
.ask-k { color: #FFFFFF; }
.ask-answer { display: inline-grid; gap: 0.7rem; margin-top: clamp(1.5rem, 5vh, 3rem); font-size: var(--step-2); line-height: 1.15; letter-spacing: -0.02em; }
.ask-answer strong { font-weight: 700; }
.ask-answer::after { content: ""; height: 4px; border-radius: 2px; background: var(--accent); transform-origin: left center; }

/* Pregunta a la izquierda y respuestas a la derecha */
.ask-grid { display: grid; gap: var(--space-4); }
.ask-lead { font-size: var(--step-1); font-weight: 600; line-height: 1.35; }
.ask-nots { list-style: none; margin-top: 0.9rem; display: grid; gap: 0.5rem; }
.ask-nots li { position: relative; padding-left: 1.9rem; color: var(--ink-2); line-height: 1.4; }
.ask-nots li::before, .ask-nots li::after {
  content: ""; position: absolute; left: 0.15rem; top: 0.7em; width: 1rem; height: 2px; border-radius: 2px; background: var(--accent); transform: rotate(45deg);
}
.ask-nots li::after { transform: rotate(-45deg); }
.ask-when { font-weight: 600; color: var(--ink); }
.ask-nots + .ask-when { margin-top: clamp(1.2rem, 3.6vh, 2.2rem); }
.ask-list { list-style: none; margin-top: 0.85rem; display: grid; gap: 0.55rem; }
.ask-list li {
  position: relative; padding: 0.72rem 0.9rem 0.72rem 2.5rem; border: 1px solid rgb(255 255 255 / 0.16); border-radius: 12px;
  background: rgb(255 255 255 / 0.05); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07); font-weight: 500; line-height: 1.3;
}
.ask-yes li::before {
  content: ""; position: absolute; left: 0.95rem; top: 50%; width: 0.66rem; height: 0.34rem;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: translateY(-75%) rotate(-45deg);
}
.ask-loss li::before { content: ""; position: absolute; left: 0.9rem; top: 50%; width: 0.8rem; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--accent); }
@media (min-width: 34rem) {
  .ask-list { grid-template-columns: 1fr 1fr; }
  .ask-list li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 62rem) {
  .ask-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
  .ask-mark { right: -8%; top: auto; bottom: -17%; height: 122%; }
  .ask-mark text { stroke-opacity: 0.55; }
  .ask:not(.ask-solo) { background-image:
    radial-gradient(46rem 32rem at 0% 100%, rgb(230 20 32 / 0.24), transparent 64%),
    radial-gradient(circle at 1px 1px, rgb(255 255 255 / 0.08) 1px, transparent 1.4px); }
}
@media (min-width: 62rem) and (min-height: 40rem) {
  .screen.ask-solo .ask-q { font-size: clamp(1.9rem, min(1rem + 2.5vw, 5.7vh), 3.3rem); }
  .screen.ask .ask-grid .ask-q { font-size: clamp(2.5rem, min(1.2rem + 3.6vw, 8.6vh), 4.4rem); line-height: 1.02; letter-spacing: -0.04em; max-width: 12ch; }
  .screen.ask .ask-head .ask-q { font-size: clamp(2.8rem, min(1.2rem + 4.4vw, 10vh), 5.4rem); max-width: 9ch; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .ask:not(.is-in) .ask-mark text { stroke-dashoffset: 1600; }
  .js .ask.is-in .ask-mark text { animation: ask-draw 2s cubic-bezier(0.6, 0, 0.2, 1) 0.15s both; }
  .js .ask:not(.is-in) .ask-list li, .js .ask:not(.is-in) .ask-nots li { opacity: 0; }
  .js .ask.is-in .ask-list li, .js .ask.is-in .ask-nots li { animation: rise-in 520ms var(--ease-out) both; animation-delay: calc(320ms + var(--n, 0) * 70ms); }
  .js .ask.is-in .ask-nots li { animation-delay: calc(180ms + var(--n, 0) * 90ms); }
  .js .ask.is-in .ask-nots ~ .ask-list li { animation-delay: calc(560ms + var(--n, 0) * 70ms); }
  /* La pregunta fundacional: las cinco materias se encienden una a una, la pregunta pasa a rojo y llega la respuesta */
  .js .ask-solo:not(.is-in) .ask-k { color: #8C8C8C; }
  .js .ask-solo.is-in .ask-k { animation: ask-lit 520ms ease both; animation-delay: calc(700ms + var(--n, 0) * 260ms); }
  .js .ask-solo .mark { transition-delay: 2.1s; }
  .js .ask-solo:not(.is-in) .ask-answer { opacity: 0; }
  .js .ask-solo.is-in .ask-answer { animation: rise-in 700ms var(--ease-out) 2.6s both; }
  .js .ask-solo.is-in .ask-answer::after { animation: grow-x 900ms var(--ease-out) 3s both; }
}
.ask-k:nth-of-type(2), .ask li:nth-child(2), .creed li:nth-child(2) { --n: 1; }
.ask-k:nth-of-type(3), .ask li:nth-child(3), .creed li:nth-child(3) { --n: 2; }
.ask-k:nth-of-type(4), .ask li:nth-child(4), .creed li:nth-child(4) { --n: 3; }
.ask-k:nth-of-type(5), .ask li:nth-child(5), .creed li:nth-child(5) { --n: 4; }
.ask li:nth-child(6), .creed li:nth-child(6) { --n: 5; }
.ask li:nth-child(7) { --n: 6; }
.ask li:nth-child(8) { --n: 7; }
.ask li:nth-child(9) { --n: 8; }

/* ---------- Manifiesto («Quién está detrás»): la primera frase hueca, la segunda llena y en rojo ---------- */
.manifesto-h { margin: 0; font-size: clamp(2.1rem, 1.1rem + 5vw, 3.8rem); font-weight: 700; line-height: 1.04; letter-spacing: -0.04em; text-wrap: balance; }
.manifesto-h .hollow { color: var(--ink-2); }
@supports ((-webkit-text-stroke: 1px black) and (paint-order: stroke fill)) {
  /* El relleno lleva el color del fondo y se pinta encima del trazo: así no asoman los solapes interiores de la fuente variable */
  .manifesto-h .hollow { color: var(--paper); -webkit-text-stroke: max(2px, 0.035em) var(--ink); paint-order: stroke fill; letter-spacing: 0; }
}
.manifesto-h .mark { display: block; margin-top: 0.12em; }
.manifesto-foot { margin-top: clamp(1.5rem, 5vh, 3.2rem); padding-top: clamp(1.1rem, 3vh, 1.8rem); border-top: 2px solid var(--ink); display: grid; gap: 1rem; }
.manifesto-foot .lead { max-width: 60ch; }
.manifesto-foot .more { margin: 0; }
@media (min-width: 62rem) {
  .manifesto-foot { grid-template-columns: minmax(0, 60ch) auto; justify-content: space-between; align-items: end; column-gap: var(--space-5); }
}
@media (min-width: 62rem) and (min-height: 40rem) {
  .screen .manifesto-h { font-size: clamp(2.8rem, min(1.4rem + 4.6vw, 10.5vh), 5.4rem); }
  .screen .manifesto-h .hollow { letter-spacing: -0.012em; }
}

/* ---------- Forma de pensar: cuatro prioridades a gran tamaño y seis principios en fichas numeradas ---------- */
.creed { display: grid; gap: var(--space-4); }
.creed ol { list-style: none; }
.creed-first { margin-top: var(--space-3); counter-reset: creed; border-top: 2px solid var(--ink); }
.creed-first li { counter-increment: creed; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); align-items: baseline; padding: 0.8rem 0 0.9rem; border-bottom: 1px solid var(--line-strong); }
.creed-first li::before, .creed-rest li::before {
  content: counter(creed, decimal-leading-zero); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; color: var(--accent); font-variant-numeric: tabular-nums;
}
.cr-a { grid-column: 2; font-size: var(--step-2); font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; }
.cr-rest { grid-column: 2; margin-top: 0.15rem; color: var(--ink-2); line-height: 1.35; }
.cr-b { color: var(--ink); font-weight: 600; }
.creed-rest { counter-reset: creed 4; display: grid; gap: 0.9rem; }
.creed-rest li {
  counter-increment: creed; display: grid; gap: 0.55rem; align-content: start;
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 1.1rem 1.25rem 1.3rem; box-shadow: var(--shadow-1);
  font-weight: 500; line-height: 1.38;
}
@media (min-width: 40rem) { .creed-rest { grid-template-columns: 1fr 1fr; } }
@media (min-width: 62rem) {
  .creed { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
}
@media (min-width: 62rem) and (min-height: 40rem) {
  .screen .creed-first { margin-top: clamp(1rem, 3.4vh, 1.75rem); }
  .screen .creed-first li { padding-block: clamp(0.5rem, 1.7vh, 0.9rem); }
  .screen .creed-rest { gap: clamp(0.6rem, 1.8vh, 0.95rem) 0.95rem; }
  .screen .creed-rest li { padding-block: clamp(0.8rem, 2.2vh, 1.15rem) clamp(0.9rem, 2.6vh, 1.35rem); }
}
@media (prefers-reduced-motion: no-preference) {
  .js .screen:not(.is-in) .creed li { opacity: 0; }
  .js .screen.is-in .creed li { animation: rise-in 560ms var(--ease-out) both; animation-delay: calc(200ms + var(--n, 0) * 80ms); }
  .js .screen.is-in .creed-rest li { animation-delay: calc(420ms + var(--n, 0) * 70ms); }
}

/* ---------- Primer contacto: la línea de tiempo, con cifras grandes y un trazo que avanza ---------- */
@media (min-width: 62rem) {
  .next-steps.track { gap: clamp(1.6rem, 5.5vh, 3.2rem); }
  .next-steps.track ol { column-gap: clamp(2rem, 4vw, 4rem); }
  .next-steps.track ol::before { top: 6.1rem; right: 1rem; height: 3px; border-radius: 2px; background: var(--ink); transform-origin: left center; }
  .next-steps.track ol::after { top: calc(6.1rem - 0.8rem + 1.5px); right: -0.25rem; width: 1.6rem; height: 1.6rem; background: var(--ink); }
  .next-steps.track li, .next-steps.track li:last-child { padding: 7.7rem 0 0; }
  .next-steps.track li::before {
    left: -0.04em; top: 0; width: auto; height: auto; display: block; border: 0; border-radius: 0; background: none;
    color: var(--accent); font-size: 5.2rem; font-weight: 700; line-height: 1; letter-spacing: -0.05em; z-index: auto;
  }
  .next-steps.track li + li::after, .next-steps.track li::after {
    content: ""; position: absolute; left: 0; top: calc(6.1rem - 0.5rem + 1.5px); width: 1rem; height: 1rem; border-radius: 50%; transform: none;
    background: var(--accent); -webkit-mask: none; mask: none; box-shadow: 0 0 0 5px var(--surface);
  }
  .next-steps.track li strong { font-weight: 700; }
}
@media (min-width: 62rem) and (prefers-reduced-motion: no-preference) {
  .js .screen:not(.is-in) .next-steps.track li, .js .screen:not(.is-in) .next-steps.track ol::after { opacity: 0; }
  .js .screen:not(.is-in) .next-steps.track ol::before { transform: scaleX(0); }
  .js .screen.is-in .next-steps.track ol::before { animation: grow-x 1.2s cubic-bezier(0.6, 0, 0.2, 1) 0.25s both; }
  .js .screen.is-in .next-steps.track ol::after { animation: rise-in 300ms ease 1.35s both; }
  .js .screen.is-in .next-steps.track li { animation: rise-in 560ms var(--ease-out) both; animation-delay: 0.3s; }
  .js .screen.is-in .next-steps.track li:nth-child(2) { animation-delay: 0.7s; }
  .js .screen.is-in .next-steps.track li:nth-child(3) { animation-delay: 1.1s; }
}

/* ---------- Cierre de «Cómo trabajamos»: etapas con cifra grande y la llamada como cuarta ficha, en rojo ---------- */
.offer-xl article, .offer-xl article + article { border-radius: 18px; }
.offer-xl .stage-label {
  display: block; width: auto; height: auto; border-radius: 0; background: none;
  color: var(--accent); font-size: clamp(3.4rem, 2.6rem + 3vw, 5rem); font-weight: 700; line-height: 0.9; letter-spacing: -0.05em;
}
.offer-xl h3 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.offer-cta {
  display: grid; align-content: space-between; gap: 1.5rem; padding: 1.5rem 1.5rem 1.4rem; border-radius: 18px;
  background: var(--accent); color: #FFFFFF; text-decoration: none; font-size: var(--step-2); font-weight: 700; line-height: 1.08; letter-spacing: -0.03em;
  box-shadow: 0 26px 50px -24px rgb(230 20 32 / 0.7); touch-action: manipulation;
  transition: background-color 160ms ease, transform 160ms var(--ease-out);
}
.offer-cta svg { width: 2.6rem; height: 2.6rem; justify-self: end; transition: transform 200ms var(--ease-out); }
.offer-cta:active { transform: scale(0.98); }
.offer-cta:focus-visible { outline-color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .offer-cta:hover { background: var(--accent-hover); }
  .offer-cta:hover svg { transform: translateX(6px); }
}
@media (min-width: 62rem) {
  .offer.offer-xl { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.05fr); gap: 2.4rem; align-items: stretch; margin-top: clamp(1.4rem, 4.5vh, 2.6rem); }
  .offer-xl article, .offer-xl article + article { grid-template-rows: 1fr auto auto; min-height: clamp(14rem, 44vh, 21rem); padding: 1.5rem 1.5rem 1.6rem; }
  .screen .offer-xl p { font-size: var(--step-0); line-height: 1.45; }
}
@media (min-width: 62rem) and (prefers-reduced-motion: no-preference) {
  .js .screen:not(.is-in) .offer-xl > * { opacity: 0; }
  .js .screen.is-in .offer-xl > * { animation: rise-in 560ms var(--ease-out) both; animation-delay: 0.2s; }
  .js .screen.is-in .offer-xl > :nth-child(2) { animation-delay: 0.32s; }
  .js .screen.is-in .offer-xl > :nth-child(3) { animation-delay: 0.44s; }
  .js .screen.is-in .offer-xl > :nth-child(4) { animation-delay: 0.62s; }
}