/* ============================================================================
   GridYX · web v3 · styles.css · rediseño 15/10/2026
   Dirección: «El lugar lo lleva» (Taste Skill, place-carries-it): la planta real es el argumento; la web se aparta.
   Base: assets/gridyx.tokens.css (tokens de marca por tema) + assets/gridyx.motion.css, enlazados antes de este archivo.
   Reglas de la casa (Taste Skill), con las excepciones de marca declaradas en NOTAS.md:
   · una sola familia (Geist); cinco tamaños: pequeño 14 · cuerpo 16–17 · entradilla 20–24 · título 28–56 · portada 34–112
   · sin etiquetas pequeñas en mayúsculas, sin numeración 01/02/03, sin monoespaciada, sin líneas finas, sin cajas con borde
     (salvo campos de formulario), sin sombras en reposo, sin degradados (único velo neutro bajo texto sobre metraje)
   · el morado de marca solo en el botón primario, el foco, el símbolo y el punto final de los titulares (decisión de Yago)
   · superficies por escalón de tono (fondo → superficie), nunca por línea; radio 8 solo en controles; medios a canto vivo
   ========================================================================== */

/* ---------- Fuente autoalojada (una sola familia) ---------- */
@font-face {
  font-family: "Geist";
  src: url("fonts/geist-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Roles de color (derivados de los tokens de marca; se redefinen por tema) ---------- */
:root, [data-gx-theme="dark"] {
  --bg: var(--gx-bg);
  --surface: var(--gx-surface-card);
  --surface-2: var(--gx-surface-elevated);
  --ink: var(--gx-text-primary);
  --muted: var(--gx-text-secondary);
  --accent: var(--gx-brand-primary);
  --accent-ink: var(--gx-on-accent);
  --accent-hover: color-mix(in srgb, var(--gx-brand-primary) 85%, var(--gx-text-primary));
  --accent-pressed: color-mix(in srgb, var(--gx-brand-primary) 75%, var(--gx-text-primary));
  --field-bg: var(--gx-surface-card);
  --field-border: var(--gx-border-control);
  --soft: color-mix(in srgb, var(--gx-text-primary) 10%, transparent);
}
[data-gx-theme="light"] {
  --bg: var(--gx-bg);
  --surface: var(--gx-surface-card);
  --surface-2: var(--gx-surface-elevated);
  --ink: var(--gx-text-primary);
  --muted: var(--gx-text-secondary);
  --accent: var(--gx-brand-primary);
  --accent-ink: var(--gx-on-accent);
  --accent-hover: color-mix(in srgb, var(--gx-brand-primary) 85%, var(--gx-text-dark));
  --accent-pressed: color-mix(in srgb, var(--gx-brand-primary) 75%, var(--gx-text-dark));
  --field-bg: var(--gx-surface-card);
  --field-border: var(--gx-border-control);
  --soft: color-mix(in srgb, var(--gx-text-primary) 8%, transparent);
}

/* ---------- Medidas, escala y movimiento ---------- */
:root {
  --vh: 100svh;                                  /* alto del viewport; scripts/shot-full.mjs lo fija en píxeles para capturar */
  --margin: clamp(16px, 2.2vw, 32px);
  --gutter: clamp(12px, 1.4vw, 24px);
  --max: 1760px;
  --header: 64px;
  --sec: clamp(148px, 5rem + 6vw, 200px);       /* entre secciones: claramente mayor que cualquier hueco interno (148–200) */
  --sec-in: clamp(40px, 2rem + 3vw, 88px);      /* dentro de una sección */
  --gap: clamp(24px, 1rem + 1.5vw, 40px);

  --step-small: 0.875rem;                                    /* 14 */
  --step-body: clamp(1rem, 0.94rem + 0.3vw, 1.0625rem);      /* 16–17 */
  --step-lead: clamp(1.25rem, 1.05rem + 0.8vw, 1.5rem);      /* 20–24 */
  --step-head: clamp(1.75rem, 0.9rem + 3vw, 3.5rem);         /* 28–56 */
  --step-display: clamp(2.125rem, 0.6rem + 6.6vw, 7rem);     /* 34–112 */

  --radius: 8px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.76, 0, .24, 1);
  --ease-soft: cubic-bezier(.33, 1, .68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-reveal: 800ms;
}

@media (max-width: 639px) {
  :root { --sec: 112px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-padding-top: calc(var(--header) + 16px);
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--gx-font-sans);
  font-size: var(--step-body);
  line-height: 1.5;
  overflow-x: clip;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.nav-open body { overflow: hidden; }
h1, h2, h3, h4, p, figure, dl, dd { margin: 0; }
p { text-wrap: pretty; max-width: 62ch; }
h1, h2, h3 { hyphens: none; }
a { color: inherit; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: not-allowed; }
[hidden] { display: none !important; }
main:focus { outline: none; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--gx-focus-ring); outline-offset: 3px; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Márgenes ajustados y una sola retícula; el texto corrido limita su medida, no la página */
.container { width: auto; max-width: var(--max); margin-inline: auto; padding-inline: var(--margin); }
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }

/* ---------- Tipografía: cinco tamaños ---------- */
.display {
  font-size: var(--step-display);
  line-height: 0.95;
  letter-spacing: -0.035em;
  font-weight: 700;
  text-wrap: balance;
  max-width: 16ch;
  margin-left: -0.04em;
}
.title {
  font-size: var(--step-head);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 700;
  text-wrap: balance;
  max-width: 20ch;
  margin-left: -0.03em;
}
.h3, .paso h3, .hito h3, .rol h3, .cap h3, .tec__item h3, .descarga__name, .faq__q, .legal__item h2 {
  font-size: var(--step-lead);
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: 600;
  text-wrap: balance;
}
.lead {
  font-size: var(--step-lead);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-top: 24px;
  max-width: 40ch;
}
.small { font-size: var(--step-small); line-height: 1.45; }
.secondary { color: var(--muted); }
.datum { font-variant-numeric: tabular-nums; font-weight: 500; }
/* Punto final de marca (decisión de Yago, 07/10/2026): solo en portada, títulos y claim del pie */
.web-dot { color: var(--accent); }
/* Grafía única GridYX */
.marca { text-transform: none; }
.sec-head .title { margin-top: 0; }
.sec-head .lead { margin-top: 24px; }
.sec-head__nota { margin-top: 20px; color: var(--muted); max-width: 48ch; font-size: var(--step-body); line-height: 1.5; }
.sec-head__rol { margin-top: 20px; }

/* Índice de la página (lista de títulos de sección que es la propia navegación) */
.jumps {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
}
@media (max-width: 639px) { .jumps { margin-top: 20px; } .jumps a { min-height: 40px; } }
.jumps a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.2em;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--t-hover) ease;
}
@media (hover: hover) and (pointer: fine) { .jumps a:hover { text-decoration-color: currentColor; } }

/* ---------- Iconos (trazo 1,9) ---------- */
.icon {
  width: var(--gx-icon-md);
  height: var(--gx-icon-md);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--gx-icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.icon--sm { width: var(--gx-icon-sm); height: var(--gx-icon-sm); }
/* Flecha decorativa de los enlaces: la palabra ya lo dice */
.link__arrow { display: none; }

/* ---------- Símbolo con entrada orbital (marca) ---------- */
.gx-mark { width: 32px; height: 32px; }
.gx-mark circle { fill: var(--accent); transform-box: fill-box; transform-origin: center; }
.orbit .gx-mark--animate .gx-mark__core,
html:not(.js) .gx-mark--animate .gx-mark__core { animation: gx-orbit-core var(--motion-brand) var(--ease-out) both; }
.orbit .gx-mark--animate .gx-mark__sat,
html:not(.js) .gx-mark--animate .gx-mark__sat {
  animation: gx-orbit-sat var(--motion-brand) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}
@keyframes gx-orbit-core { from { transform: scale(0.9); } to { transform: scale(1); } }
@keyframes gx-orbit-sat { from { transform: scale(0.6); } to { transform: scale(1); } }

/* ---------- Skip link ---------- */
.skip {
  position: absolute;
  top: 8px; left: 16px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* ---------- Cabecera: barra sencilla sobre la página; toma el fondo al desplazarse ---------- */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: transparent;
  transition: background-color var(--t-ui) ease;
}
.header.is-scrolled, html:not(.js) .header { background: var(--bg); }
html:not(.js) .header { position: sticky; }
.header__inner {
  min-height: var(--header);
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.js .header__inner { flex-wrap: nowrap; }
.lockup { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; color: var(--ink); flex: none; }
.lockup__word { height: 28px; width: auto; }
.header__meta { display: none; margin-left: 8px; color: var(--muted); font-size: var(--step-small); line-height: 1.3; }
@media (min-width: 1280px) { .header__meta { display: block; } }
/* Sobre el metraje de las páginas oscuras la barra aún no tiene fondo: todo su texto en blanco */
html[data-gx-theme="dark"] .js .header:not(.is-scrolled) .header__meta, .js .header:not(.is-scrolled) .header__meta { color: inherit; opacity: 0.85; }
.header__actions { margin-left: auto; display: flex; align-items: center; gap: 12px; flex: none; }
.btn--header { min-height: 40px; padding: 0 16px; }
.btn__short { display: none; }
@media (max-width: 767px) { .btn__long { display: none; } .btn__short { display: inline; } .btn--header { min-height: 44px; } }
.menu-btn {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius);
  color: var(--ink);
}
.menu-btn .icon--close { display: none; }
.menu-btn[aria-expanded="true"] .icon--menu { display: none; }
.menu-btn[aria-expanded="true"] .icon--close { display: block; }
html:not(.js) .menu-btn { display: none !important; }
@media (min-width: 768px) { .menu-btn { display: none !important; } }

.nav { margin-left: auto; }
.nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 32px; }
.nav__link {
  display: inline-flex; align-items: center;
  min-height: 40px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.22em;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--t-hover) ease;
}
@media (hover: hover) and (pointer: fine) { .nav__link:hover { text-decoration-color: currentColor; } }
.nav__link[aria-current] { text-decoration-color: currentColor; }
.nav__num { display: none; }
@media (max-width: 767px) {
  html:not(.js) .nav { order: 10; flex-basis: 100%; margin: 0; overflow-x: auto; padding-bottom: 8px; }
  html:not(.js) .nav__list { gap: 20px; white-space: nowrap; }
  .js .nav {
    position: fixed;
    top: var(--header); right: 0; bottom: 0; left: 0;
    z-index: 40;
    margin: 0;
    padding: 32px var(--margin) 40px;
    background: var(--bg);
    overflow: auto;
    visibility: hidden;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out), visibility 0s var(--t-ui);
  }
  .js .nav.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out), visibility 0s; }
  .js .nav__list { flex-direction: column; gap: 8px; }
  .js .nav__link { font-size: var(--step-head); line-height: 1.1; letter-spacing: -0.02em; font-weight: 700; padding: 12px 0; width: 100%; text-decoration-color: transparent; }
  .js .nav__link[aria-current] { color: var(--muted); }
}

/* ---------- Botones: una forma (radio 8), un relleno; la segunda acción es un enlace de texto ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--radius);
  border: 0;
  font-weight: 600;
  font-size: var(--step-body);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease;
}
@media (max-width: 767px) { .btn { min-height: 52px; } }
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn--primary { background: var(--accent); color: var(--accent-ink); }
@media (hover: hover) and (pointer: fine) { .btn--primary:hover { background: var(--accent-hover); } }
.btn--primary:active:not(:disabled) { background: var(--accent-pressed); }
.btn--secondary { background: var(--soft); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .btn--secondary:hover { background: color-mix(in srgb, var(--ink) 18%, transparent); } }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--gx-disabled-bg); color: var(--gx-disabled-fg); pointer-events: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; }
/* Junto al botón primario, la segunda acción va como texto subrayado */
.btn-row .btn--secondary {
  background: none;
  padding: 0;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--muted);
  transition: text-decoration-color var(--t-hover) ease;
}
@media (hover: hover) and (pointer: fine) { .btn-row .btn--secondary:hover { background: none; text-decoration-color: currentColor; } }
@media (max-width: 767px) { .btn-row > .btn--primary { width: 100%; } }

.link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--muted);
  transition: text-decoration-color var(--t-hover) ease;
}
@media (max-width: 767px) { .link { min-height: 44px; } }
@media (hover: hover) and (pointer: fine) { .link:hover { text-decoration-color: currentColor; } }

/* ---------- Chips reales de la aplicación (solo dentro de [data-ui]: leyenda del plano y filas de estados) ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  border-radius: var(--gx-radius-pill);
  font-size: var(--step-small); font-weight: 500; line-height: 1;
  white-space: nowrap;
}
.chip--sync-pending { color: var(--gx-sync-pending); background: var(--gx-contrast-sync-pending); }
.chip--sync-signed  { color: var(--gx-sync-signed);  background: var(--gx-contrast-sync-signed); }
.chip--sync-error   { color: var(--gx-sync-error);   background: var(--gx-contrast-sync-error); }
.chip--status-pending     { color: var(--gx-status-pending);     background: var(--gx-contrast-status-pending); }
.chip--status-in-progress { color: var(--gx-status-in-progress); background: var(--gx-contrast-status-in-progress); }
.chip--status-validate    { color: var(--gx-status-validate);    background: var(--gx-contrast-status-validate); }
.chip--status-closed      { color: var(--gx-status-closed);      background: var(--gx-contrast-status-closed); }
.chip--status-rejected    { color: var(--gx-status-rejected);    background: var(--gx-contrast-status-rejected); }
.chip--priority-high   { color: var(--gx-priority-high);   background: var(--gx-contrast-priority-high); }
.chip--priority-medium { color: var(--gx-priority-medium); background: var(--gx-contrast-priority-medium); }
.chip--priority-low    { color: var(--gx-priority-low);    background: var(--gx-contrast-priority-low); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
/* Rol (técnico / supervisor): texto en el color del rol, sin píldora */
.chip--tech, .chip--supervisor {
  height: auto; padding: 0; background: none; border-radius: 0;
  font-size: var(--step-body); font-weight: 600;
}
.chip--tech { color: var(--gx-tech-primary); }
.chip--supervisor { color: var(--gx-supervisor-primary); }

/* ---------- Pasos: párrafos con frase de arranque en negrita (sin numerales, sin líneas) ---------- */
.pasos { list-style: none; margin: var(--gap) 0 0; padding: 0; display: grid; gap: 20px; max-width: 52ch; }
.paso h3 { display: inline; font-size: inherit; line-height: inherit; letter-spacing: 0; font-weight: 700; }
.paso p { display: inline; color: var(--ink); }
.paso h3::after { content: " "; }
.paso__num, .principio__num, .cap__num, .hito__num:not(.hito__num--error), .faq__num, .legal__num, .descarga__num, .jumps__num, .footer__num { display: none; }

.leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 28px; color: var(--muted); }

/* ---------- Secciones: separadas por espacio o por cambio de campo, nunca por línea ---------- */
.section { padding-top: var(--sec); background: var(--bg); color: var(--ink); }
.section:last-of-type, .section[data-gx-theme], .section.cta { padding-bottom: var(--sec); }
.section[data-gx-theme] + .section { padding-top: var(--sec); }
[data-gx-theme] { background: var(--bg); color: var(--ink); }

/* ---------- Figura de metraje (vídeo sobre póster): a canto vivo, con su ficha debajo ---------- */
.media { position: relative; background: var(--surface); }
.media__view { position: relative; overflow: hidden; background: var(--surface); aspect-ratio: var(--ratio, auto); }
.media__poster, .media__poster img, .media__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}
.media__video { opacity: 0; transition: opacity 600ms var(--ease-soft); }
.media__video.is-ready { opacity: 1; }
.media .only-video { display: none; }
.media.has-video .only-video { display: inline; }
.media.has-video .only-still { display: none; }
.media--framed { display: flex; flex-direction: column; background: none; }
.media--framed .media__view { flex: 1 1 auto; min-height: 0; }

/* Sin fichas de texto sobre imágenes ni capturas (decisión de Yago, 16/10/2026): solo quedan los controles
   «Pausar metraje» (.media__ctrl) y «Ampliar» (.figura-app__ctrl) */
.media__ctrl { display: flex; justify-content: flex-end; margin-top: 12px; }
.figura-app__ctrl { display: flex; justify-content: flex-end; margin-top: 8px; }
.media__pause, .figura-app__zoom {
  display: none;
  align-items: center; gap: 6px;
  min-height: 32px;
  padding: 0;
  color: var(--ink);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--muted);
  transition: text-decoration-color var(--t-hover) ease;
}
@media (hover: hover) and (pointer: fine) { .media__pause:hover, .figura-app__zoom:hover { text-decoration-color: currentColor; } }
.media__pause .icon--play { display: none; }
.media__pause[aria-pressed="true"] .icon--pause { display: none; }
.media__pause[aria-pressed="true"] .icon--play { display: block; }
@media (prefers-reduced-motion: no-preference) { .js .media__pause { display: inline-flex; } }
.media:has(video[data-failed]) .media__pause { display: none; }
.js .figura-app__zoom { display: inline-flex; }

/* ---------- Figura de aplicación (captura real): sin marco; la captura sobre un escalón de superficie ---------- */
.figura-app { display: flex; flex-direction: column; }
/* En móvil, la ficha de una captura que cruza el borde de otra imagen va encima de la captura (nunca sobre el metraje) */
@media (max-width: 639px) {
  .trabajo__media .figura-app .figura-app__bar, .plano__mobile .figura-app__bar { order: -1; margin: 0 0 8px; justify-content: flex-end; text-align: right; }
}
.figura-app__img { position: relative; background: var(--surface); overflow: hidden; }
.figura-app__img img { width: 100%; height: auto; }
.figura-app--desktop .figura-app__img, .figura-app--crop .figura-app__img { aspect-ratio: var(--ratio, 16 / 10); }
.figura-app--desktop .figura-app__img img, .figura-app--crop .figura-app__img img {
  position: absolute; inset: 0; height: 100%;
  object-fit: cover; object-position: var(--pos, 50% 50%);
}
.figura-app--zoom .figura-app__img img { top: -25%; left: -12.5%; right: auto; bottom: auto; width: 125%; height: 125%; max-width: none; }

/* ---------- Entradas: cada parte llega en orden de lectura, una vez (clase .rv puesta por app.js) ---------- */
.rv .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out);
  transition-delay: var(--rd, 0ms);
}
.rv figure.reveal, .rv .figura-app.reveal { transform: translateY(0) scale(1.03); transform-origin: center bottom; }
.rv .reveal.is-in { opacity: 1; transform: none; }

/* ============================================================================
   PORTADA: metraje a sangre a pantalla completa; el titular al pie, como un título de película
   ========================================================================== */
.hero, .phead {
  position: relative;
  min-height: var(--vh);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  background: var(--bg);
  color: var(--ink);
  overflow: hidden;
}
.media--hero, .media--phead { position: absolute; inset: 0; background: var(--surface); }
.media--hero .media__view, .media--phead .media__view { position: absolute; inset: 0; }
/* Velo neutro solo bajo la zona de texto (la única pendiente permitida: un velo bajo texto sobre metraje) */
.media--hero::after, .media--phead::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 0.66) 0%, rgb(0 0 0 / 0.3) 38%, rgb(0 0 0 / 0) 68%); /* taste-skill-ignore: velo neutro bajo el titular */
  pointer-events: none;
}
.hero__placa, .phead__inner {
  position: relative;
  z-index: 2;
  grid-row: 2;
  width: auto; max-width: none; margin: 0;
  padding: 0 var(--margin) clamp(24px, 2rem + 2vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px var(--gutter);
  align-items: end;
}
.phead__placa { background: none; padding: 0; border-radius: 0; }
.hero__content, .phead__content { max-width: none; }
.hero .display, .phead .display { max-width: 24ch; }
.hero .lead, .phead .lead { margin-top: 24px; max-width: 44ch; }
.hero__ctas { margin-top: 32px; }
.phead .sec-head__nota { color: var(--ink); opacity: 0.85; }
.hero .display, .phead .display { color: #fff; }
.hero .lead, .phead .lead, .phead .jumps a, .hero .btn--secondary, .phead .sec-head__nota { color: #fff; }
.hero .btn-row .btn--secondary, .hero .jumps a, .phead .jumps a { text-decoration-color: rgb(255 255 255 / 0.5); }
/* Control «Pausar metraje»: arriba a la derecha bajo la barra en móvil; abajo a la derecha en escritorio */
.hero .media__ctrl, .phead .media__ctrl {
  position: absolute;
  z-index: 2;
  margin: 0;
  top: calc(var(--header) + 8px);
  right: var(--margin);
}
.hero .media__pause, .phead .media__pause { color: #fff; text-decoration-color: rgb(255 255 255 / 0.5); }
@media (min-width: 1024px) {
  .hero .media__ctrl, .phead .media__ctrl { top: auto; bottom: clamp(24px, 2rem + 2vw, 56px); }
}
/* La página de producto cita el nombre de cada sección en el pie de la portada */
.phead .jumps { margin-top: 28px; }

/* Movimiento de firma: el metraje se abre desde el borde superior mientras el fotograma se asienta;
   después, titular, entradilla y acción llegan en orden. Sin JS o con reduced-motion, el estado final. */
@media (prefers-reduced-motion: no-preference) {
  .js .media--hero, .js .media--phead { animation: web-shutter 1100ms var(--ease-in-out) both; }
  .js .media--hero .media__poster img, .js .media--phead .media__poster img { animation: web-settle 1500ms var(--ease-soft) both; }
  .js .hero__content > *, .js .phead__content > * {
    opacity: 0;
    transform: translateY(18px);
    animation: web-rise var(--t-reveal) var(--ease-out) forwards;
    animation-delay: calc(var(--i, 0) * 90ms + 420ms);
  }
  .js .hero__content > :nth-child(2), .js .phead__content > :nth-child(2) { --i: 1; }
  .js .hero__content > :nth-child(3), .js .phead__content > :nth-child(3) { --i: 2; }
  .js .hero__content > :nth-child(4), .js .phead__content > :nth-child(4) { --i: 3; }
  .js .hero__content > :nth-child(5), .js .phead__content > :nth-child(5) { --i: 4; }
  .js .page-head__content > * { opacity: 0; transform: translateY(18px); animation: web-rise var(--t-reveal) var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 90ms + 120ms); }
  .js .page-head__content > :nth-child(2) { --i: 1; }
  .js .page-head__content > :nth-child(3) { --i: 2; }
  .js .page-head__content > :nth-child(4) { --i: 3; }
}
@keyframes web-shutter { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes web-settle { from { transform: scale(1.12); } to { transform: none; } }
@keyframes web-rise { to { opacity: 1; transform: none; } }

/* ============================================================================
   SECCIONES DE LA HOME
   ========================================================================== */

/* Qué es GridYX: todo cuelga de un mismo eje (columna 5); las columnas 1–4 quedan vacías */
.que-es__grid { display: grid; gap: var(--sec-in) var(--gutter); }
.roles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); }
.rol { display: grid; gap: 12px; align-content: start; }
.rol .chip { justify-self: start; }
.rol p { color: var(--ink); max-width: 48ch; }
@media (min-width: 640px) and (max-width: 1023px) { .roles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .que-es__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .que-es__grid > .sec-head { grid-column: 5 / 13; }
  .roles { grid-column: 5 / 13; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap) var(--gutter); }
}

/* Principios: lista a escala de cartel (nombre grande a la izquierda, frase a la derecha) + figura al margen */
.principios { padding-top: var(--sec); }
.principios__grid { display: grid; gap: var(--sec-in) var(--gutter); align-items: start; }
.principios__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); }
.principio { display: grid; gap: 8px var(--gutter); align-items: first baseline; }
.principio h3 { font-size: var(--step-head); line-height: 1.02; letter-spacing: -0.03em; font-weight: 700; margin-left: -0.03em; }
.principio p { color: var(--ink); max-width: 40ch; }
.principios__fig .media__view { --ratio: 4 / 5; }
/* Por debajo de 1024 la figura no ocupa todo el ancho: 62 % alineada a la derecha (fotografías a tamaños desiguales) */
.principios__fig { width: 62%; margin-left: auto; }
@media (min-width: 640px) { .principio { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); } }
@media (min-width: 1024px) {
  .principios__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .principios__list { grid-column: 1 / 10; }
  .principios__fig { grid-column: 10 / 13; width: auto; margin-left: 0; }
}

/* El trabajo: columna de lectura en el eje (col 5) y, debajo, el metraje «día» a sangre con la captura del móvil encima */
.trabajo__grid { display: grid; gap: var(--sec-in) var(--gutter); }
.trabajo__text { min-width: 0; }
.trabajo__link { margin-top: 0; }
.trabajo__media { position: relative; margin-inline: calc(-1 * var(--margin)); display: flex; flex-direction: column; }
.trabajo__media .media__view { --ratio: 3 / 4; }
.trabajo__media .media__bar { padding-inline: var(--margin); }
.trabajo__media .figura-app { order: -1; width: min(300px, 58vw); margin: 0 var(--margin) -36% auto; position: relative; z-index: 2; }
@media (min-width: 640px) {
  .trabajo__media { display: block; }
  .trabajo__media .media__view { --ratio: 4 / 3; }
  .trabajo__media .figura-app { order: 0; position: absolute; right: 8%; top: 8%; width: 200px; margin: 0; }
  .trabajo__media .media__bar { padding-right: calc(8% + 200px + var(--gutter)); }
}
@media (min-width: 1024px) {
  .trabajo__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .trabajo__text { grid-column: 5 / 12; }
  .trabajo__media { grid-column: 1 / 13; }
  .trabajo__link { grid-column: 5 / 12; }
  .trabajo__media .media__view { --ratio: 21 / 9; }
  .trabajo__media .figura-app { width: 300px; right: 10%; top: 8%; }
  .trabajo__media .media__bar { padding-right: calc(10% + 300px + var(--gutter)); }
}

/* Sin cobertura (home): un descanso de texto en el eje */
.cobertura-breve__link { margin-top: 28px; }
@media (min-width: 1024px) {
  .cobertura-breve__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); }
  .cobertura-breve__grid > div { grid-column: 5 / 12; }
}

/* La planta: el plano del supervisor a todo el ancho y el mapa del técnico, más pequeño, solapado abajo a la derecha */
.plano__figs { position: relative; margin-top: var(--sec-in); display: flex; flex-direction: column; }
.plano__big { --ratio: 4 / 3; --pos: 21% 50%; }
.plano__mobile { order: -1; width: min(240px, 52vw); margin: 0 0 -28% auto; position: relative; z-index: 2; }
.plano__foot { margin-top: 32px; }
@media (min-width: 640px) {
  .plano__figs { display: block; }
  .plano__big { --ratio: 16 / 9; }
  .plano__mobile { order: 0; width: 220px; margin: -18% var(--gutter) 0 auto; }
}
@media (min-width: 1024px) {
  .plano__figs { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: end; }
  .plano__big { grid-column: 1 / 13; grid-row: 1; }
  .plano__mobile { grid-column: 10 / 13; grid-row: 1; width: 240px; margin: 0 0 -96px auto; justify-self: end; }
  .plano__foot { margin-top: 128px; }
}

/* Supervisión (campo claro, la oficina): texto en columnas 1–5, captura en 6–13 sangrando por la derecha */
.supervision__grid { display: grid; gap: var(--sec-in) var(--gutter); }
.supervision__fig { --ratio: 4 / 3; --pos: 0 0; }
.supervision__link { margin-top: 32px; }
@media (min-width: 640px) { .supervision__fig { --ratio: 16 / 10; } }
@media (min-width: 1024px) {
  .supervision__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
  .supervision__text { grid-column: 1 / 6; }
  .supervision__fig { grid-column: 6 / 13; --ratio: 4 / 3; margin-right: calc(-1 * var(--margin)); }
}

/* Cierre / acceso: banda de texto sobre un escalón de superficie; la fotografía final vive en el pie */
.cta { background: var(--surface); padding-block: var(--sec); }
.cta__grid { display: grid; gap: var(--gap) var(--gutter); }
.cta__ctas { margin-top: 32px; }
@media (min-width: 1024px) {
  .cta__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .cta__text { grid-column: 1 / 9; }
}

/* Hitos de sincronización (sin-cobertura.html): cuatro columnas con la etiqueta real de la aplicación */
.hitos { list-style: none; margin: var(--sec-in) 0 0; padding: 0; display: grid; gap: var(--gap) var(--gutter); }
.hito { display: grid; gap: 12px; align-content: start; }
.hito .chip { justify-self: start; }
.hito p { color: var(--ink); }
.hito__num--error { display: block; font-weight: 700; color: var(--gx-sync-error); text-transform: none; letter-spacing: 0; }
.cobertura__nota { margin-top: var(--gap); color: var(--muted); max-width: 52ch; font-size: var(--step-body); line-height: 1.5; }
@media (min-width: 640px) { .hitos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .hitos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ============================================================================
   PIE: el nombre a todo el ancho sobre la última fotografía (o sobre un campo oscuro en las páginas claras)
   ========================================================================== */
.footer {
  position: relative;
  min-height: var(--vh);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--gx-bg);
  color: #fff;
  overflow: hidden;
}
.footer--plain { min-height: calc(var(--vh) * 0.72); }
.footer__media { position: absolute; inset: 0; margin: 0; background: var(--surface); }
.footer__media .media__view { position: absolute; inset: 0; filter: brightness(0.6); }
.footer__top, .footer__mid, .footer__bottom { position: relative; z-index: 2; }
.footer__top {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;
  gap: 32px 48px;
  padding: calc(var(--header) + 16px) var(--margin) 0;
}
.footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 28px; }
.footer__list a, .footer__legal a {
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.2em;
  text-decoration-color: rgb(255 255 255 / 0.5);
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  transition: text-decoration-color var(--t-hover) ease;
}
@media (hover: hover) and (pointer: fine) { .footer__list a:hover, .footer__legal a:hover { text-decoration-color: currentColor; } }
.footer__legal { display: grid; gap: 2px; font-size: var(--step-body); line-height: 1.5; }
.footer__legal p { max-width: none; }
.footer__mid { align-self: center; padding: var(--gap) var(--margin); display: grid; gap: 16px; }
.footer__claim { font-size: var(--step-lead); line-height: 1.3; font-weight: 600; max-width: 30ch; }
.footer__lines { display: grid; gap: 4px; font-size: var(--step-small); line-height: 1.45; color: rgb(255 255 255 / 0.85); max-width: 52ch; }
.footer__bottom { padding: 0 var(--margin) 28px; display: grid; gap: 16px; }
.footer__word { width: 100%; height: auto; display: block; }
.footer__line { font-size: var(--step-small); color: rgb(255 255 255 / 0.85); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.footer__line p { max-width: none; }
.footer__line a { color: #fff; }
.footer__brand { display: none; }
@media (min-width: 768px) {
  .footer__list a, .footer__legal a { min-height: 32px; }
  .footer__mid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
}

/* ---------- Diálogo «Ampliar» ---------- */
.dialog {
  border: 0; padding: 0; margin: auto;
  background: var(--bg); color: var(--ink);
  width: min(100vw - 24px, 1200px);
  max-height: calc(var(--vh) - 24px);
  overflow: hidden;
}
.dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 20px; background: var(--surface); }
.dialog__head p { font-weight: 500; }
.dialog__body { overflow: auto; max-height: calc(var(--vh) - 24px - 68px); background: var(--surface); overscroll-behavior: contain; }
.dialog__body:focus-visible { outline-offset: -3px; }
.dialog__body img { width: 1440px; max-width: none; height: auto; }

/* ============================================================================
   FORMULARIO Y PREGUNTAS (markup de acceso.html)
   ========================================================================== */
.js .no-js-only { display: none !important; }
html:not(.js) .js-only { display: none !important; }
.card { background: none; border: 0; padding: 0; border-radius: 0; }
.form { display: grid; gap: 24px; }
.form.card { background: var(--surface); padding: 28px 20px; }
@media (min-width: 768px) { .form.card { padding: 40px; } }
.form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 24px; }
.form legend { padding: 0; font-weight: 500; margin-bottom: 8px; }
.form__row { display: grid; gap: 24px; }
@media (min-width: 1024px) { .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); } }
.field { display: grid; gap: 8px; align-content: start; min-width: 0; }
.field__label, .form label { display: block; font-size: var(--step-small); line-height: 1.4; font-weight: 500; color: var(--ink); }
.field__optional, .field__opt { font-weight: 400; color: var(--muted); }
.field__help { color: var(--muted); max-width: 40em; margin: 0; }
.field__error { display: flex; align-items: flex-start; gap: 6px; margin: 0; color: var(--gx-priority-high); max-width: 40em; }
.field__error .icon { margin-top: 1px; }
/* Campos: rellenos y con su borde (los campos de formulario sí llevan línea); 52 en campo, 44 en escritorio */
.form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
.form select, .form textarea, .input, .field__input, .select select {
  display: block; width: 100%; min-width: 0;
  min-height: 52px;
  padding: 0 14px; margin: 0;
  background: var(--field-bg);
  color: var(--ink);
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  font-size: var(--step-body);
  line-height: 1.5;
  transition: border-color var(--t-hover) ease;
}
@media (min-width: 768px) {
  .form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
  .form select, .input, .field__input, .select select { min-height: 44px; }
}
.form textarea, textarea.input, .field__input--area { height: auto; min-height: 160px; padding: 12px 14px; resize: vertical; }
.form :is(input, select, textarea)::placeholder, .input::placeholder { color: var(--muted); opacity: 1; }
.form :is(input, select, textarea):hover:not(:disabled):not(:focus-visible), .input:hover:not(:disabled):not(:focus-visible) { border-color: var(--ink); }
.form :is(input, select, textarea):focus-visible, .input:focus-visible { border-color: var(--gx-focus-ring); }
.form :is(input, select, textarea)[aria-invalid="true"], .input[aria-invalid="true"] { border-color: var(--gx-priority-high); }
.form :is(input, select, textarea):disabled, .input:disabled { background: var(--gx-disabled-bg); color: var(--gx-disabled-fg); border-color: transparent; cursor: not-allowed; }
.form :is(input, textarea)[readonly], .input[readonly] { background: var(--surface-2); border-color: transparent; }
.form :is(input, select, textarea):-webkit-autofill, .input:-webkit-autofill { -webkit-text-fill-color: var(--ink); box-shadow: 0 0 0 1000px var(--field-bg) inset; caret-color: var(--ink); } /* taste-skill-ignore: relleno del autocompletado, no una sombra */
.select, .field__select { position: relative; display: block; }
.select select, .field__select select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; }
.select > .icon, .field__select > .icon { position: absolute; right: 12px; top: 50%; translate: 0 -50%; pointer-events: none; color: var(--muted); }
:is(.select, .field__select) select:disabled + .icon { color: var(--gx-disabled-fg); }
.form select option { background: var(--surface); color: var(--ink); }
.form input[type="checkbox"], .form input[type="radio"] { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); flex: none; }
.field--check { display: flex; align-items: flex-start; gap: 12px; }
.field--check label { font-weight: 400; font-size: var(--step-body); }
.form__aviso, .form__privacy { color: var(--muted); max-width: 48ch; margin: 0; }
.form__actions { margin-top: 0; }
.form__actions .btn[aria-busy="true"], .btn.is-busy { pointer-events: none; }
.form__status { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-weight: 500; color: var(--muted); max-width: 40em; }
.form__status:empty { display: none; }
.form__status.is-ok { color: var(--gx-sync-signed); }
.form__status.is-error { color: var(--gx-priority-high); }
.form__status .icon { margin-top: 1px; }
.form__result { display: grid; gap: 16px; padding-top: 8px; }
.form__result .btn-row:empty { display: none; }
.form__texto, .form textarea.form__texto, .field__input[readonly] { font-size: var(--step-small); line-height: 1.5; min-height: 200px; }
.form__mail { color: var(--muted); }
.form__mail a { color: var(--ink); }
@media (max-width: 767px) { .form .btn-row > .btn { width: 100%; } }

/* Preguntas: lista abierta separada por espacio */
.faq { margin-top: var(--gap); display: grid; gap: var(--gap); }
.faq__item { display: grid; gap: 12px; }
.faq__q { display: flex; align-items: baseline; gap: 16px; color: var(--ink); }
.faq__a { color: var(--ink); max-width: 52ch; }

/* ---------- Página secundaria (cabecera simple) ---------- */
.page-head { padding: calc(var(--header) + var(--sec-in)) 0 var(--sec-in); }

/* ---------- Aviso legal: apartados separados por espacio; título a la izquierda, texto a la derecha ---------- */
.legal { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sec-in); }
.legal__item { display: grid; gap: 12px var(--gutter); }
.legal__text { display: grid; gap: 12px; color: var(--ink); max-width: 56ch; }
.legal__text a { color: var(--ink); text-underline-offset: 0.2em; text-decoration-thickness: 0.07em; }
.legal__foot { margin-top: var(--sec-in); max-width: 52ch; font-size: var(--step-body); line-height: 1.5; }
@media (min-width: 1024px) {
  .legal__item { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .legal__item h2 { grid-column: 1 / 5; }
  .legal__text { grid-column: 5 / 12; }
}

/* ============================================================================
   PANTALLA «ACCESO ANTICIPADO» (acceso-anticipado.html): el héroe de la home con la descripción, la acción y la contraseña
   ========================================================================== */
.gate .hero__content { max-width: 920px; }
.gate .header__meta { display: none; }
.gate .hero .lead { max-width: 52ch; }
.gate__form { margin-top: 32px; gap: 12px; max-width: 560px; }
.gate__form-title { color: #fff; font-weight: 500; }
.gate__row { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.gate__row .field__input { flex: 1 1 220px; min-width: 0; }
.gate__row .btn { flex: 0 0 auto; }
/* Dentro de la fila la segunda acción es un botón relleno sobre superficie (no un enlace): va junto al campo */
.gate .btn-row .btn--secondary, .gate__enter { background: var(--surface); color: var(--ink); padding: 0 20px; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .gate__enter:hover { background: var(--surface-2); } }
.gate__error { margin: 0; color: var(--gx-priority-high); font-weight: 600; max-width: 48ch; }
.gate .hero__ctas { margin-top: 28px; }
.gate .hero .media__ficha { max-width: 28%; }
.gate__foot { padding: 20px 0 24px; background: var(--bg); color: var(--muted); font-size: var(--step-small); line-height: 1.45; }
.gate__foot-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.gate__foot p { max-width: none; }
.gate__foot a { color: var(--ink); text-decoration-thickness: 0.07em; text-underline-offset: 0.2em; }
@media (max-width: 767px) {
  .gate .btn-row .btn--primary { width: 100%; }
  .gate__row .btn { flex: 1 1 100%; min-height: 52px; }
  .gate .hero .media__ficha { max-width: none; }
}

/* ---------- Impresión ---------- */
@media print {
  .media__video, .menu-btn, .media__pause, .figura-app__zoom, .skip { display: none !important; }
  .header { position: static; }
  .hero, .phead { min-height: 0; display: block; }
  .media--hero, .media--phead { position: static; }
  .media--hero .media__view, .media--phead .media__view { position: relative; height: 50vh; }
  .hero .display, .phead .display, .hero .lead, .phead .lead { color: inherit; }
  .section { padding-block: 32px; }
  .rv .reveal { opacity: 1; transform: none; }
  .footer { min-height: 0; }
  .footer__media { display: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75rem; }
}