/* ============================================================================
   GridYX · web v2 · styles.css
   Sistema compartido de la web (index · producto · acceso).
   Base: assets/gridyx.tokens.css (59 tokens por tema) + assets/gridyx.motion.css,
   enlazados ANTES de este archivo desde el <head> (sin @import: cadena crítica más corta).
   Reglas: sin hex nuevos (solo tokens y color-mix de tokens), Geist 400/500/600/700,
   radio 8 controles / 12 tarjetas / 16 paneles, módulo 4, ritmo 8, secciones 64/96/128,
   interlíneas en múltiplos de 4 px, duraciones 120/200/320/600 con las tres curvas del sistema.
   ========================================================================== */

/* ---------- Fuentes autoalojadas ---------- */
@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;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/geist-mono-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;
}

/* ---------- Alias web (derivados de tokens; se redefinen por tema) ---------- */
:root, [data-gx-theme="dark"] {
  --web-hairline: color-mix(in srgb, var(--gx-text-primary) 10%, transparent);
  --web-placa: var(--gx-bg);
  /* Fondo de las figuras mientras carga la imagen: misma superficie que la tarjeta (sin destello claro) */
  --web-surface-media: var(--gx-surface-card);
  --web-cta-hover: color-mix(in srgb, var(--gx-brand-primary) 85%, var(--gx-text-primary));
  --web-cta-pressed: color-mix(in srgb, var(--gx-brand-primary) 75%, var(--gx-text-primary));
  --web-outline-over-media: color-mix(in srgb, var(--gx-bg) 80%, transparent);
  --web-field-bg: var(--gx-bg);
}
[data-gx-theme="light"] {
  --web-hairline: color-mix(in srgb, var(--gx-text-primary) 10%, transparent);
  --web-placa: var(--gx-bg);
  --web-surface-media: var(--gx-media-placeholder);
  --web-cta-hover: color-mix(in srgb, var(--gx-brand-primary) 85%, var(--gx-text-dark));
  --web-cta-pressed: color-mix(in srgb, var(--gx-brand-primary) 75%, var(--gx-text-dark));
  --web-outline-over-media: color-mix(in srgb, var(--gx-bg) 80%, transparent);
  --web-field-bg: var(--gx-surface-card);
}

/* ---------- Retícula, ritmo y escala tipográfica ----------
   Siete niveles de texto (display · title · h3 · lead · body · small · eyebrow/caption/data mono).
   Interlíneas en rem múltiplos de 4 px para que todo caiga sobre la retícula de 8.
   Los numerales (01/02/03) son siempre mono 14/20: ningún tamaño fuera de la escala. */
:root {
  --web-max: 1280px;
  --web-margin: 16px;
  --web-gutter: 16px;
  --web-cols: 4;
  --web-header: 64px;
  --web-section: 64px;

  --web-display-size: 2.75rem;  /* 44 */
  --web-display-lh: 3rem;       /* 48 */
  --web-display-ls: -0.025em;
  --web-title-size: 2rem;       /* 32 */
  --web-title-lh: 2.25rem;      /* 36 */
  --web-title-ls: -0.02em;
  --web-h3-size: 1.25rem;       /* 20 */
  --web-h3-lh: 1.75rem;         /* 28 */
  --web-h3-ls: 0;
  --web-lead-size: 1.125rem;    /* 18 */
  --web-lead-lh: 1.75rem;       /* 28 */
  --web-eyebrow-size: 0.75rem;  /* 12 */
}
@media (min-width: 640px) {
  :root { --web-margin: 24px; --web-cols: 8; }
}
@media (min-width: 768px) {
  :root {
    --web-section: 96px;
    --web-display-size: 4rem;   /* 64 */
    --web-display-lh: 4rem;     /* 64 */
    --web-display-ls: -0.03em;
    --web-title-size: 2.5rem;   /* 40 */
    --web-title-lh: 2.75rem;    /* 44 */
    --web-h3-size: 1.5rem;      /* 24 */
    --web-h3-lh: 2rem;          /* 32 */
    --web-h3-ls: -0.01em;
  }
}
@media (min-width: 1024px) {
  :root {
    --web-margin: 32px;
    --web-gutter: 24px;
    --web-cols: 12;
    --web-display-size: 5rem;   /* 80 */
    --web-display-lh: 5rem;     /* 80 */
    --web-title-size: 3rem;     /* 48 */
    --web-title-lh: 3.25rem;    /* 52 */
    --web-title-ls: -0.03em;
    --web-lead-size: 1.25rem;   /* 20 */
    --web-lead-lh: 1.75rem;     /* 28 */
    --web-eyebrow-size: 0.875rem; /* 14 */
  }
}
@media (min-width: 1440px) {
  :root {
    --web-section: 128px;
    --web-display-size: 6rem;   /* 96 */
    --web-display-lh: 6rem;     /* 96 */
    --web-title-size: 3.5rem;   /* 56 */
    --web-title-lh: 3.75rem;    /* 60 */
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-padding-top: calc(var(--web-header) + 16px);
  -webkit-text-size-adjust: 100%;
  background: var(--gx-bg);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--gx-bg);
  color: var(--gx-text-primary);
  font-family: var(--gx-font-sans);
  font-size: 1rem;
  line-height: 1.5;
  overflow-x: clip;
  -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; }
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(--gx-selection-bg); color: var(--gx-selection-fg); }
:focus-visible {
  outline: var(--gx-focus-width) solid var(--gx-focus-ring);
  outline-offset: var(--gx-focus-offset);
}
/* Solo para tecnologías de apoyo (encabezado de sección sin presencia visual) */
.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;
}

.container {
  width: min(var(--web-max), calc(100% - var(--web-margin) * 2));
  margin-inline: auto;
}
.grid {
  display: grid;
  grid-template-columns: repeat(var(--web-cols), minmax(0, 1fr));
  gap: var(--web-gutter);
}

/* ---------- Tipografía ---------- */
.eyebrow {
  font-family: var(--gx-font-mono);
  font-size: var(--web-eyebrow-size);
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--gx-brand-ink);
  margin: 0 0 16px;
  font-variant-numeric: tabular-nums;
}
/* Grafía única GridYX: el nombre nunca se convierte a mayúsculas dentro de eyebrows o fichas */
.marca { text-transform: none; }
.display {
  font-size: var(--web-display-size);
  line-height: var(--web-display-lh);
  letter-spacing: var(--web-display-ls);
  font-weight: 700;
  max-width: 12ch;
  text-wrap: balance;
}
.title {
  font-size: var(--web-title-size);
  line-height: var(--web-title-lh);
  letter-spacing: var(--web-title-ls);
  font-weight: 700;
  max-width: 18ch;
  text-wrap: balance;
}
.h3, .paso h3, .hito h3, .principio h3, .rol h3 {
  font-size: var(--web-h3-size);
  line-height: var(--web-h3-lh);
  letter-spacing: var(--web-h3-ls);
  font-weight: 600;
}
.lead {
  font-size: var(--web-lead-size);
  line-height: var(--web-lead-lh);
  color: var(--gx-text-secondary);
  margin-top: 24px;
  max-width: 34em;
}
.body { max-width: 40em; }
.secondary { color: var(--gx-text-secondary); }
.small { font-size: 0.875rem; line-height: 1.25rem; }
.caption {
  font-family: var(--gx-font-mono);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.data {
  font-family: var(--gx-font-mono);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
/* Numeral de lista (pasos, principios, capacidades, hitos, FAQ): mono 14/20 en morado de marca */
.num {
  font-family: var(--gx-font-mono);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--gx-brand-ink);
  font-variant-numeric: tabular-nums;
}
/* Punto final de marca: solo en display y title (y en el claim del pie); nunca en h3 */
.web-dot { color: var(--gx-brand-primary); }

/* Cabecera de sección: eyebrow + title + lead (+ nota .small o chip de rol a 16 px) */
.sec-head .title { margin-top: 0; }
.sec-head .lead { margin-top: 24px; }
.sec-head__nota { margin-top: 16px; color: var(--gx-text-secondary); max-width: 44em; }
.sec-head__rol { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }

/* Enlaces de salto dentro de una cabecera de página («01 Técnico · 02 Supervisor …») */
.jumps {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
}
.jumps a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--gx-text-primary);
  text-decoration: none;
}
@media (max-width: 639px) {
  /* Cuatro saltos en 2×2 (tres en 2+1): reparto regular en lugar de un último enlace huérfano */
  .jumps { display: grid; grid-template-columns: repeat(2, max-content); }
}
@media (min-width: 768px) { .jumps a { min-height: 40px; } }
.jumps a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--gx-brand-ink);
}
.jumps__num { color: var(--gx-brand-ink); }

/* ---------- Iconos (Lucide inline, 24 / 18, 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); }

/* ---------- Símbolo con entrada orbital ---------- */
.gx-mark { width: 32px; height: 32px; }
.gx-mark circle {
  fill: var(--gx-brand-primary);
  transform-box: fill-box;
  transform-origin: center;
}
/* Sin JS no hay sessionStorage: la entrada se repite en cada navegación (documentado en NOTAS §3) */
.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: 8px 12px;
  border-radius: var(--gx-radius-control);
  background: var(--gx-brand-primary);
  color: var(--gx-on-accent);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* ---------- Cabecera ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--gx-bg);
  border-bottom: 1px solid var(--web-hairline);
  transition: border-color var(--motion-standard) var(--ease-out);
}
.js .header:not(.is-scrolled) { border-bottom-color: transparent; }
.header__inner {
  min-height: var(--web-header);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.js .header__inner { flex-wrap: nowrap; }
/* Lockup: símbolo inline (D = 32) + wordmark neutro; gap 8 = 0,25 D; aire ≥ 0,5 D garantizado por la barra de 64 */
.lockup {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  text-decoration: none;
  color: var(--gx-text-primary);
  flex: none;
}
.lockup__word { height: 28px; width: auto; }
.header__meta {
  display: none;
  margin-left: 16px;
  color: var(--gx-text-secondary);
  padding-left: 16px;
  border-left: 1px solid var(--web-hairline);
}
@media (min-width: 1280px) { .header__meta { display: block; } }
.header__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}
.btn--header { height: 40px; }
.btn__short { display: none; }
@media (max-width: 767px) {
  .btn__long { display: none; }
  .btn__short { display: inline; }
}
.menu-btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--gx-radius-control);
  color: var(--gx-text-primary);
}
.menu-btn .icon--close { display: none; }
.menu-btn[aria-expanded="true"] .icon--menu { display: none; }
.menu-btn[aria-expanded="true"] .icon--close { display: block; }
/* El botón de menú existe en el HTML desde el primer fotograma (sin salto de maquetación); sin JS se oculta por CSS */
html:not(.js) .menu-btn { display: none !important; }
@media (min-width: 768px) { .menu-btn { display: none !important; } }

/* Navegación */
.nav { margin-left: auto; }
.nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 32px; }
.nav__link {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-height: 40px;
  font-weight: 500;
  color: var(--gx-text-primary);
  text-decoration: none;
  padding: 8px 0;
}
.nav__num {
  font-family: var(--gx-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gx-brand-ink);
  font-variant-numeric: tabular-nums;
}
.nav__link[aria-current] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  text-decoration-color: var(--gx-brand-ink);
}
@media (max-width: 767px) {
  /* Sin JS: la navegación se muestra como fila bajo la barra */
  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; }
  /* Con JS: panel a pantalla completa */
  .js .nav {
    position: fixed;
    top: var(--web-header);
    right: 0; bottom: 0; left: 0;
    z-index: 40;
    margin: 0;
    padding: 24px var(--web-margin) 40px;
    background: var(--gx-bg);
    overflow: auto;
    visibility: hidden;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--motion-standard) var(--ease-in-out),
                transform var(--motion-standard) var(--ease-in-out),
                visibility 0s var(--motion-standard);
  }
  .js .nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity var(--motion-view) var(--ease-swift),
                transform var(--motion-view) var(--ease-swift),
                visibility 0s;
  }
  .js .nav__list { flex-direction: column; gap: 0; }
  .js .nav__link {
    font-size: 1.5rem;
    font-weight: 600;
    padding: 16px 0;
    border-bottom: 1px solid var(--web-hairline);
    width: 100%;
  }
  .js .nav__num { font-size: 0.875rem; }
}

/* ---------- Botones (52 px en campo / 40 px en escritorio; ninguna otra altura) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--gx-control-field);
  padding: 0 16px;
  border-radius: var(--gx-radius-control);
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--motion-micro) var(--ease-out),
              border-color var(--motion-micro) var(--ease-out),
              color var(--motion-micro) var(--ease-out),
              transform var(--motion-micro) var(--ease-out);
}
@media (min-width: 768px) { .btn { height: var(--gx-control-desktop); } }
.btn:active:not(:disabled) { transform: scale(var(--gx-motion-scale-press, 0.985)); }
.btn--primary {
  background: var(--gx-brand-primary);
  border-color: var(--gx-brand-primary);
  color: var(--gx-on-accent);
}
.btn--primary:hover { background: var(--web-cta-hover); border-color: var(--web-cta-hover); }
.btn--primary:active:not(:disabled) { background: var(--web-cta-pressed); border-color: var(--web-cta-pressed); }
.btn--secondary {
  background: transparent;
  border-color: var(--gx-border-control);
  color: var(--gx-text-primary);
}
.btn--secondary:hover { border-color: var(--gx-text-primary); }
.btn--on-media { background: var(--web-outline-over-media); }
.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--gx-disabled-bg);
  border-color: transparent;
  color: var(--gx-disabled-fg);
  pointer-events: none;
}
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
@media (max-width: 767px) {
  .btn-row > .btn { flex: 1 1 auto; }
}

/* Enlace de texto (objetivo táctil 44 px en campo) */
.link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: var(--gx-text-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--gx-border-control);
  transition: text-decoration-color var(--motion-micro) var(--ease-out);
}
@media (max-width: 767px) { .link { min-height: 44px; } }
.link:hover { text-decoration-color: var(--gx-brand-ink); }
.link__arrow { font-family: var(--gx-font-mono); font-weight: 500; }

/* ---------- Tarjetas, chips, pasos ---------- */
.card {
  background: var(--gx-surface-card);
  border: 1px solid var(--gx-border);
  border-radius: var(--gx-radius-card);
  padding: 24px;
}
.card--panel { border-radius: var(--gx-radius-panel); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--gx-radius-pill);
  font-size: 0.875rem;
  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--priority-good   { color: var(--gx-priority-good);   background: var(--gx-contrast-priority-good); }
.chip--tech       { color: var(--gx-tech-primary);       background: var(--gx-contrast-tech); }
.chip--supervisor { color: var(--gx-supervisor-primary); background: var(--gx-contrast-supervisor); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* Pasos: hairline superior + numeral mono pequeño + h3 + texto (sin tarjeta ni icono) */
.pasos {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  gap: 24px;
}
.paso {
  padding-top: 16px;
  border-top: 1px solid var(--web-hairline);
  display: grid;
  gap: 8px;
  align-content: start;
}
.paso__num { margin-bottom: 4px; }
.paso p { color: var(--gx-text-secondary); max-width: 40em; }

/* Leyenda de prioridad: los mismos chips del sistema (etiqueta + icono + color) */
.leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 24px; color: var(--gx-text-secondary); }

/* ---------- Secciones ---------- */
.section { padding-block: var(--web-section); background: var(--gx-bg); color: var(--gx-text-primary); }
.section + .section { border-top: 1px solid var(--web-hairline); }
.section--flush { padding-top: 0; }
/* Cambio de tema por sección: el atributo reasigna los 59 tokens; el fondo lo pinta la propia sección */
[data-gx-theme] { background: var(--gx-bg); color: var(--gx-text-primary); }

/* ---------- Figura de metraje (vídeo / poster) ---------- */
.media {
  position: relative;
  background: var(--web-surface-media);
}
.media__view {
  position: relative;
  overflow: hidden;
  background: var(--web-surface-media);
  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 var(--motion-view) var(--ease-out);
}
.media__video.is-ready { opacity: 1; }
/* Rótulo honesto: «Fotograma de metraje real» mientras se ve el poster; «Metraje real» solo con el vídeo cargado */
.media .only-video { display: none; }
.media.has-video .only-video { display: inline; }
.media.has-video .only-still { display: none; }
.media__ficha {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 16px;
  background: var(--web-placa);
  color: var(--gx-text-primary);
  border-radius: var(--gx-radius-control);
  padding: 8px 12px;
}
/* Control «Pausar metraje» dentro de la ficha (solo escritorio, con JS y sin reduced-motion); reserva su sitio por CSS */
.media__pause {
  display: none;
  align-items: center;
  gap: 6px;
  height: 32px;
  margin-block: -6px;
  padding: 0 4px;
  color: var(--gx-text-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--gx-border-control);
}
.media__pause:hover { text-decoration-color: var(--gx-brand-ink); }
.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 (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .js .media__pause { display: inline-flex; }
}

/* Encuadrado en retícula: marco + barra de ficha interna de 48 px */
.media--framed {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--gx-border);
  border-radius: var(--gx-radius-panel);
  overflow: hidden;
  background: var(--gx-surface-card);
}
.media--framed .media__view { flex: 1 1 auto; min-height: 0; }

/* Barra de ficha (metraje, fotografía, ilustración, aplicación): una sola altura y un solo componente.
   Cada fragmento va en su propio <span> dentro de un grupo; el separador lo pone el CSS, así que cada
   fragmento salta entero y nunca se recorta texto. */
.media__bar, .figura-app__bar {
  flex: none;
  min-height: 48px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 8px 16px;
  background: var(--gx-surface-card);
  color: var(--gx-text-secondary);
  border-top: 1px solid var(--web-hairline);
}
.bar__g {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
}
.bar__g > span { white-space: normal; min-width: 0; }
/* El separador lo lleva el fragmento ANTERIOR (::after): al partir línea viaja con su palabra y nunca abre la línea siguiente */
.bar__g > span:not(:last-child)::after { content: "·"; margin-left: 8px; }
/* Los dos rótulos alternativos del metraje (solo uno visible) cierran siempre el grupo: sin separador propio */
.bar__g > span.only-still::after, .bar__g > span.only-video::after { content: none; } /* misma especificidad (0,2,2) que la regla anterior, y después de ella */
.bar__g--end { margin-left: auto; }

/* ---------- Figura de aplicación (captura real + barra de honestidad) ---------- */
.figura-app {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--gx-border);
  border-radius: var(--gx-radius-panel);
  overflow: hidden;
  background: var(--gx-surface-card);
}
.figura-app__img { position: relative; background: var(--gx-bg); }
.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%);
}
/* Recorte ampliado (×1,25) para que el plano llene la figura sin el cromo lateral de la app */
.figura-app--zoom .figura-app__img img {
  top: -25%; left: -12.5%; right: auto; bottom: auto;
  width: 125%; height: 125%;
  max-width: none; /* la regla base img { max-width: 100% } limitaba el recorte y dejaba una franja vacía a la derecha */
}
/* «Ampliar»: enlace de texto mono en la barra; existe desde el primer fotograma (sin salto), solo con JS.
   Altura visual 32 dentro de la barra de 48 y objetivo táctil de 44 por márgenes negativos. */
.figura-app__zoom {
  display: none;
  align-items: center;
  gap: 6px;
  height: 44px;
  margin-block: -6px;
  padding: 0 4px;
  color: var(--gx-text-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--gx-border-control);
  transition: text-decoration-color var(--motion-micro) var(--ease-out);
}
.js .figura-app__zoom { display: inline-flex; }
.figura-app__zoom:hover { text-decoration-color: var(--gx-brand-ink); }

/* ---------- Revelado (solo con JS + IntersectionObserver + sin reduced-motion) ----------
   La clase .rv la pone app.js justo antes de observar: sin app.js todo es visible.
   Lo que ya está en pantalla al cargar recibe .is-in en el mismo instante (nunca se oculta). */
.rv .reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--motion-view) var(--ease-out),
              transform var(--motion-view) var(--ease-out);
  transition-delay: var(--rd, 0ms);
}
.rv .reveal.is-in { opacity: 1; transform: none; }
/* Entrada de la placa de portada: @keyframes CSS (320 ms, fill both) que no depende de app.js ni del observador */
@keyframes web-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .js .hero__content, .js .phead__content, .js .page-head__content { animation: web-in var(--motion-view) var(--ease-out) both; }
}

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

/* ---------- Hero: metraje a sangre detrás, placa opaca en flujo (crece con su contenido) ---------- */
.hero { position: relative; background: var(--gx-bg); }
.hero__placa {
  position: relative;
  z-index: 2;
  background: var(--web-placa);
  padding: 32px 16px 40px;
}
.hero__ctas { margin-top: 32px; }
@media (max-width: 767px) {
  .media--hero .media__view { height: 56svh; min-height: 320px; max-height: 560px; }
  .media--hero .media__ficha { position: static; margin: 12px var(--web-margin) 0; }
  .media--hero { background: var(--gx-bg); }
}
@media (min-width: 768px) {
  .hero {
    display: grid;
    align-items: end;
    min-height: min(calc(100svh - var(--web-header)), 900px);
  }
  .media--hero { position: absolute; inset: 0; }
  .media--hero .media__view { position: absolute; inset: 0; }
  .media--hero .media__ficha { top: 24px; right: 24px; }
  .hero__placa {
    margin: 24px;
    border-radius: var(--gx-radius-panel);
    padding: 32px;
  }
}
@media (min-width: 1024px) {
  /* Placa y ficha alineadas al contenedor de 1280 (a partir de 1344 px el margen crece con el viewport, como .cobertura__placa):
     la portada y la primera sección comparten eje. La ficha se queda arriba a todas las anchuras: abajo, con «Pausar metraje»
     (517 px) y la placa de 880, no cabe entre 1280 y 1500 px ni, alineada al contenedor, a 1920. */
  .media--hero .media__ficha { top: 32px; right: max(var(--web-margin), calc((100% - var(--web-max)) / 2)); }
  .hero__placa {
    margin: 32px;
    margin-left: max(32px, calc((100% - var(--web-max)) / 2));
    justify-self: start;
    max-width: 736px;
    padding: 40px 48px;
  }
}
@media (min-width: 1280px) {
  .hero__placa { max-width: 880px; }
}

/* ---------- Cabecera de página con fotograma fijo + placa opaca (producto.html, sin-cobertura.html) ---------- */
.phead {
  position: relative;
  background: var(--gx-bg);
}
.media--phead .media__view { height: 36svh; min-height: 240px; max-height: 420px; }
.media--phead .media__ficha { position: static; margin: 12px var(--web-margin) 0; }
.phead__inner { position: relative; z-index: 2; }
.phead__placa {
  background: var(--web-placa);
  padding: 32px 0 0;
}
.phead__placa .display { max-width: 13ch; }
.phead__num { color: var(--gx-brand-ink); }
@media (min-width: 768px) {
  /* Mínimo en px (no en svh): la cabecera no crece en pantallas muy altas ni en capturas de página completa */
  .phead {
    min-height: 480px;
    display: flex;
    align-items: flex-end;
    padding: 128px 0 24px;
  }
  .media--phead { position: absolute; inset: 0; }
  .media--phead .media__view { position: absolute; inset: 0; height: auto; max-height: none; min-height: 0; }
  .media--phead .media__ficha { position: absolute; top: 24px; right: 24px; margin: 0; }
  .phead__placa {
    border-radius: var(--gx-radius-panel);
    padding: 32px;
  }
}
@media (min-width: 1024px) {
  .phead { min-height: 560px; padding: 160px 0 32px; }
  /* La ficha sigue el borde del contenedor (como la placa, que ya va dentro de .container) */
  .media--phead .media__ficha { top: 32px; right: max(var(--web-margin), calc((100% - var(--web-max)) / 2)); }
  .phead__placa { max-width: 736px; padding: 40px 48px; }
}
@media (min-width: 1280px) {
  .phead__placa { max-width: 880px; }
}
@media (min-width: 1440px) {
  /* El titular entra en tres líneas con el nivel de display de 80 px (nivel de la propia escala) */
  .phead__placa .display { font-size: 5rem; line-height: 5rem; }
}

/* ---------- Qué es GridYX (home): explicación breve en col 1–6 + los dos roles en col 7–13 ---------- */
.que-es__grid { display: grid; gap: 40px; }
.roles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 32px var(--web-gutter);
}
.rol {
  padding-top: 24px;
  border-top: 1px solid var(--web-hairline);
  display: grid;
  gap: 12px;
  align-content: start;
}
.rol .chip { justify-self: start; }
.rol h3 { margin-top: 4px; }
.rol p { color: var(--gx-text-secondary); max-width: 40em; }
@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)); gap: var(--web-gutter); align-items: start; }
  .que-es__grid > .sec-head { grid-column: 1 / 7; }
  .roles { grid-column: 7 / 13; }
}

/* ---------- Principios: fila tipográfica con hairlines (col 1–9) + figura secundaria (col 10–13) ---------- */
.principios { padding-block: 64px; }
.principios__grid { display: grid; gap: 40px; }
.principios__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 32px var(--web-gutter);
}
.principio {
  padding-top: 16px;
  border-top: 1px solid var(--web-hairline);
  display: grid;
  gap: 8px;
  align-content: start;
}
.principio__num { margin-bottom: 4px; }
.principio h3 { text-wrap: balance; }
.principio p { color: var(--gx-text-secondary); max-width: 40em; }
.principios__fig { max-width: 480px; }
.principios__fig .media__view { --ratio: 16 / 9; }
@media (min-width: 640px) {
  .principios__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .principio h3 { min-height: 2lh; }
}
@media (min-width: 1024px) {
  .principios__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--web-gutter); align-items: start; }
  .principios__list { grid-column: 1 / 10; }
  .principios__fig { grid-column: 10 / 13; max-width: none; }
  .principios__fig .media__view { --ratio: 4 / 5; }
}

/* ---------- Trabajo: texto + banda de metraje + captura solapada ---------- */
.trabajo__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.trabajo__text, .trabajo__media { min-width: 0; }
.trabajo__media { position: relative; }
.trabajo__media .figura-app { width: 280px; margin: 24px auto 0; }
.trabajo__media .media__view { --ratio: 16 / 9; }
.trabajo__link { margin-top: 32px; }
@media (min-width: 640px) and (max-width: 1023px) {
  .trabajo__media { padding-bottom: 40px; }
  .trabajo__media .media__view { --ratio: 4 / 3; }
  .trabajo__media .figura-app {
    position: absolute;
    left: 24px;
    bottom: 0;
    width: 220px;
    margin: 0;
    z-index: 2;
  }
  /* la captura solapa la esquina inferior izquierda: la barra deja sitio a su derecha y puede partir línea */
  .trabajo__media .media__bar { padding-left: min(264px, 40%); justify-content: flex-start; }
}
@media (min-width: 1024px) {
  .trabajo__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--web-gutter);
    align-items: center;
  }
  .trabajo__text { grid-column: 1 / 7; }
  .trabajo__media { grid-column: 7 / 13; height: 824px; }
  .trabajo__media .media {
    position: absolute;
    top: 0; bottom: 0; right: 0;
    left: calc((100% - 5 * var(--web-gutter)) / 6 + var(--web-gutter));
  }
  .trabajo__media .media__view { --ratio: auto; aspect-ratio: auto; }
  .trabajo__media .figura-app {
    position: absolute;
    left: 0;
    top: 24px;
    width: 280px;
    margin: 0;
    z-index: 2;
  }
}
@media (min-width: 1280px) {
  .trabajo__text { grid-column: 1 / 6; }
  .trabajo__media { grid-column: 6 / 13; }
  .trabajo__media .media { left: calc((100% - 6 * var(--web-gutter)) / 7 + var(--web-gutter)); }
  .trabajo__media .figura-app { width: 320px; }
}

/* ---------- Sin cobertura (home): sección breve de texto con enlace a sin-cobertura.html ---------- */
.cobertura-breve__link { margin-top: 32px; }
@media (min-width: 1024px) {
  .cobertura-breve__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--web-gutter); }
  .cobertura-breve__grid > div { grid-column: 1 / 8; }
}

/* ---------- Hitos de sincronización (sin-cobertura.html): línea de tiempo con hairline continua y marca de color por hito;
   «Si falla» es la rama en rojo ---------- */
.hitos {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: grid;
  row-gap: 32px;
  column-gap: 0;
  position: relative;
  z-index: 2;
}
.hito {
  position: relative;
  padding: 24px var(--web-gutter) 0 0;
  border-top: 1px solid var(--web-hairline);
  display: grid;
  gap: 12px;
  align-content: start;
}
.hito::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 40px;
  height: 1px;
  background: var(--gx-brand-primary);
}
.hito--error::before { background: var(--gx-sync-error); }
.hito__num { text-transform: uppercase; }
.hito__num--error { color: var(--gx-sync-error); }
.hito .chip { justify-self: start; }
.hito h3 { margin-top: 4px; }
.hito p { color: var(--gx-text-secondary); }
.cobertura__nota { margin-top: 40px; color: var(--gx-text-secondary); max-width: 44em; }
@media (min-width: 640px) {
  .hitos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .hitos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Plano ---------- */
.plano__figs { display: grid; gap: var(--web-gutter); margin-top: 48px; align-items: end; }
.plano__big { --ratio: 4 / 3; --pos: 21% 50%; }
.plano__mobile { width: 260px; margin-inline: auto; }
@media (min-width: 640px) {
  .plano__figs { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .plano__big { grid-column: 1 / 9; }
  .plano__mobile { grid-column: 1 / 4; width: 220px; margin: 0; }
}
@media (min-width: 1024px) {
  .plano__figs { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .plano__big { grid-column: 1 / 10; }
  .plano__mobile { grid-column: 10 / 13; width: 240px; justify-self: end; }
}
.plano__foot { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; }

/* ---------- Supervisión (tema claro): texto y pasos en col 1–5, captura recortada en col 6–13 ---------- */
.supervision__grid { display: grid; gap: 40px; }
.supervision__fig { --ratio: 4 / 3; --pos: 0 0; }
.supervision__text .pasos { margin-top: 40px; }
.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)); gap: var(--web-gutter); align-items: end; }
  .supervision__text { grid-column: 1 / 6; }
  .supervision__fig { grid-column: 6 / 13; --ratio: 4 / 3; }
}

/* ---------- Cierre / acceso ---------- */
.cta__grid { display: grid; gap: 40px; }
.cta__ctas { margin-top: 32px; }
.cta__media .media__view { --ratio: 16 / 9; }
@media (min-width: 1024px) {
  .cta__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--web-gutter); align-items: center; }
  .cta__text { grid-column: 1 / 7; }
  .cta__media { grid-column: 7 / 13; }
  .cta__media .media__view { --ratio: 4 / 3; }
}
@media (min-width: 1280px) {
  .cta__text { grid-column: 1 / 6; }
  .cta__media { grid-column: 6 / 13; }
}

/* ---------- Pie: una fila a 12 columnas (lockup · navegación numerada · legal) + ficha de honestidad ---------- */
.footer {
  border-top: 1px solid var(--web-hairline);
  padding: 48px 0 32px;
}
.footer__grid { display: grid; gap: 32px; align-items: start; }
.footer__claim { margin-top: 32px; font-weight: 600; }
.footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 24px; }
.footer__list a {
  color: var(--gx-text-secondary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}
.footer__list a:hover { color: var(--gx-text-primary); }
.footer__num { color: var(--gx-brand-ink); }
.footer__legal { display: grid; gap: 8px; color: var(--gx-text-secondary); }
.footer__legal a { color: inherit; display: inline-flex; align-items: center; min-height: 44px; }
.footer__lines {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--web-hairline);
  display: grid;
  gap: 8px;
  color: var(--gx-text-secondary);
  max-width: 44em;
}
@media (min-width: 768px) {
  .footer__legal a { min-height: 0; }
  .footer__list a { min-height: 40px; }
}
@media (min-width: 1024px) {
  .footer__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--web-gutter); }
  .footer__brand { grid-column: 1 / 4; }
  .footer__nav { grid-column: 4 / 9; }
  .footer__legal { grid-column: 9 / 13; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Diálogo «Ampliar» (capturas a tamaño natural; velo y fundido del sistema vía .gx-motion-dialog) ---------- */
.dialog {
  border: 0;
  padding: 0;
  margin: auto;
  background: var(--gx-bg);
  color: var(--gx-text-primary);
  border-radius: var(--gx-radius-panel);
  width: min(100vw - 24px, 1200px);
  max-height: calc(100svh - 24px);
  overflow: hidden;
}
.dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 8px 8px 16px;
  border-bottom: 1px solid var(--web-hairline);
}
.dialog__body { overflow: auto; max-height: calc(100svh - 24px - 64px); background: var(--gx-surface-card); }
.dialog__body:focus-visible { outline-offset: -3px; }
.dialog__body img { width: 1440px; max-width: none; height: auto; }

/* ============================================================================
   FORMULARIO Y FAQ (sistema compartido; markup de acceso.html)
   ========================================================================== */

/* ---------- Formulario ---------- */
.js .no-js-only { display: none !important; }
html:not(.js) .js-only { display: none !important; }

.form { display: grid; gap: 24px; }
.form.card { padding: 24px; }
/* En tema claro la tarjeta del formulario toma el fondo de página y los campos quedan blancos (lámina 06) */
[data-gx-theme="light"] .form.card { background: var(--gx-bg); }
@media (min-width: 768px) { .form.card { padding: 32px; } }
@media (min-width: 1024px) { .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(--web-gutter); }
}

.field { display: grid; gap: 8px; align-content: start; min-width: 0; }
.field__label, .form label {
  display: block;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--gx-text-primary);
}
.field__optional, .field__opt { font-weight: 400; color: var(--gx-text-secondary); }
.field__help { color: var(--gx-text-secondary); 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; }

/* Controles: 52 px en campo (<768) / 40 px en escritorio, radio 8, borde --gx-border-control (≥3:1) */
.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;
  height: var(--gx-control-field);
  padding: 0 12px;
  margin: 0;
  background: var(--web-field-bg);
  color: var(--gx-text-primary);
  border: var(--gx-border-width) solid var(--gx-border-control);
  border-radius: var(--gx-radius-control);
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color var(--motion-micro) var(--ease-out);
}
@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 { height: var(--gx-control-desktop); }
}
.form textarea, textarea.input, .field__input--area {
  height: auto;
  min-height: 160px;
  padding: 12px;
  resize: vertical;
}
.form :is(input, select, textarea)::placeholder, .input::placeholder { color: var(--gx-text-secondary); opacity: 1; }
.form :is(input, select, textarea):hover:not(:disabled):not(:focus-visible),
.input:hover:not(:disabled):not(:focus-visible) { border-color: var(--gx-text-primary); }
/* Foco: borde morado + anillo global (:focus-visible de Base) */
.form :is(input, select, textarea):focus-visible, .input:focus-visible { border-color: var(--gx-focus-ring); }
/* Error: el borde cambia de color, pero quien informa es .field__error (texto + icono) */
.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(--gx-surface-card); border-color: var(--gx-border); }
/* Autorrelleno del navegador sin salirse de la paleta */
.form :is(input, select, textarea):-webkit-autofill, .input:-webkit-autofill {
  -webkit-text-fill-color: var(--gx-text-primary);
  box-shadow: 0 0 0 1000px var(--web-field-bg) inset;
  caret-color: var(--gx-text-primary);
}
/* Select con chevron Lucide del sprite (ningún icono propio); sin envoltorio conserva la flecha nativa */
.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(--gx-text-secondary);
}
:is(.select, .field__select) select:disabled + .icon { color: var(--gx-disabled-fg); }
.form select option { background: var(--gx-surface-card); color: var(--gx-text-primary); }
.form input[type="checkbox"], .form input[type="radio"] {
  width: 20px; height: 20px; margin: 0; accent-color: var(--gx-brand-primary); flex: none;
}
.field--check { display: flex; align-items: flex-start; gap: 12px; }
.field--check label { font-weight: 400; font-size: 1rem; }

.form__aviso, .form__privacy { color: var(--gx-text-secondary); max-width: 40em; margin: 0; }
.form__actions { margin-top: 0; }
.form__actions .btn[aria-busy="true"], .btn.is-busy { pointer-events: none; }
/* Mensajes de estado: aria-live, sin animación; nunca dependen solo del color */
.form__status {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-weight: 500;
  color: var(--gx-text-secondary);
  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: 24px;
  border-top: 1px solid var(--web-hairline);
}
.form__result .btn-row:empty { display: none; }
.form__texto, .form textarea.form__texto, .field__input[readonly] {
  font-family: var(--gx-font-mono);
  font-size: 0.875rem;
  line-height: 1.5;
  min-height: 200px;
}
.form__mail { color: var(--gx-text-secondary); }
.form__mail a { color: var(--gx-text-primary); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.form__mail a:hover { text-decoration-color: var(--gx-brand-ink); }
@media (max-width: 767px) {
  .form .btn-row > .btn { width: 100%; }
}

/* ---------- Preguntas: lista abierta con hairlines (sin acordeón ni chevrón) ---------- */
.faq { margin-top: 40px; border-top: 1px solid var(--web-hairline); }
.faq__item {
  display: grid;
  gap: 12px;
  padding: 24px 0;
  border-bottom: 1px solid var(--web-hairline);
}
.faq__q {
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-size: var(--web-h3-size);
  line-height: var(--web-h3-lh);
  letter-spacing: var(--web-h3-ls);
  font-weight: 600;
  color: var(--gx-text-primary);
  text-wrap: balance;
}
.faq__num { flex: none; letter-spacing: 0; }
.faq__a { color: var(--gx-text-secondary); max-width: 40em; }
@media (min-width: 640px) {
  .faq__a { padding-left: calc(2ch + 16px); }
}

/* ---------- Página secundaria (cabecera simple) ---------- */
.page-head { padding-block: var(--web-section); }
.page-head + .section { border-top: 1px solid var(--web-hairline); }

/* ---------- Aviso legal: apartados con hairline (numeral · título · texto) ---------- */
.legal { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--web-hairline); }
.legal__item {
  display: grid;
  gap: 12px;
  padding: 24px 0;
  border-bottom: 1px solid var(--web-hairline);
}
.legal__item h2 { text-wrap: balance; }
.legal__text { display: grid; gap: 12px; color: var(--gx-text-secondary); max-width: 40em; }
.legal__text a { color: var(--gx-text-primary); text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: var(--gx-border-control); }
.legal__text a:hover { text-decoration-color: var(--gx-brand-ink); }
.legal__text .data { color: var(--gx-text-primary); }
.legal__foot { margin-top: 24px; max-width: 44em; }
@media (min-width: 768px) {
  .legal__item { grid-template-columns: 3ch minmax(0, 1fr); column-gap: 16px; }
  .legal__item h2 { grid-column: 2; }
  .legal__text { grid-column: 2; }
}
@media (min-width: 1024px) {
  .legal__item { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px var(--web-gutter); padding: 32px 0; }
  .legal__num { grid-column: 1 / 2; padding-top: 4px; }
  .legal__item h2 { grid-column: 2 / 6; grid-row: 1; }
  .legal__text { grid-column: 6 / 12; grid-row: 1; }
}

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