/* ==========================================================================
   Vaui Design — sistema visual "expediente técnico"
   HTML + CSS puros. Sin frameworks, sin build. Se sube tal cual por FTP.
   Referencia: Especificación del sitio de Vaui Design, v1 (agosto 2026).
   ========================================================================== */

:root {
  /* Tema único oscuro — identidad "Agentic UX" (Vaui Design System).
     Paleta canónica: Dark Navy #0B0F34, Pure Dark #050017, Electric Violet
     #601EBD, Violet Light #813DE0, Celeste #159CFD, Sky #82CBFF. */
  color-scheme: dark;

  --papel: #050017;                          /* fondo base */
  --tinta: #FAFAFA;                          /* texto principal */
  --tinta-60: rgba(255, 255, 255, 0.62);     /* texto secundario */
  --regla: rgba(255, 255, 255, 0.13);        /* líneas, bordes, separadores */
  --marca: #82CBFF;                          /* acento legible sobre navy */
  --marca-claro: #B3DEFF;                    /* estado hover */
  --correccion: #F06A6A;                     /* rojo de revisión: SOLO fallas */
  --verificado: #2DD4A7;                     /* verde: SOLO lo que sí se promete */
  --papel-elevado: rgba(255, 255, 255, 0.04);/* superficies sobre el fondo */
  --invertido-texto: #FAFAFA;

  /* Identidad · escala fija ------------------------------------------ */
  --violeta: #601EBD;      /* Electric Violet: acción y acento */
  --violeta-luz: #813DE0;
  --marino: #0B0F34;       /* Dark Navy: la base */
  --cian: #159CFD;         /* Celeste: enfoque y feedback */
  --sky: #82CBFF;

  /* Bloque invertido (§04): panel de vidrio con halo violeta. */
  --invertido-fondo: rgba(255, 255, 255, 0.03);
  --invertido-halo: radial-gradient(115% 85% at 100% 0%, rgba(96, 30, 189, 0.55) 0%, transparent 62%);
  /* El avance de lectura va de lo roto a lo arreglado: violeta a celeste. */
  --gradiente-avance: linear-gradient(90deg, #813DE0 0%, #159CFD 100%);
  --haz: none;

  /* Vidrio: tarjeta y anillo de 1px, el gesto firma del sistema. */
  --vidrio: rgba(255, 255, 255, 0.03);
  --anillo: inset 0 0 0 1px rgba(255, 255, 255, 0.10);

  /* Tipografía -------------------------------------------------------
     Alumni Sans para titulares (condensada de identidad), Outfit para
     prosa y rótulos. La mono queda para lo medible: mediciones y precios. */
  --titular: "Alumni Sans", "Outfit", system-ui, sans-serif;
  --display: "Outfit", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Métrica del documento -------------------------------------------- */
  --columna: 720px;        /* ancho de la columna de contenido */
  --margen-doc: 168px;     /* columna izquierda de numeración: cabe §NN + rótulo en dos líneas */
  --canal: 48px;           /* separación entre margen y contenido */
  --gutter: 24px;
  --seccion: 80px;         /* espaciado vertical entre secciones */
  --radio: 14px;
  --transicion: 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 900px) {
  :root {
    --gutter: 32px;
    --seccion: 128px;
  }
}

/* ---------- Reset ---------- */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  letter-spacing: 0.02em;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--display);
  font-size: 1.0625rem;   /* 17px */
  line-height: 1.65;
  overflow-x: clip;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a { color: inherit; }

/* El violeta es secundario: aparece al seleccionar texto y en el halo del
   botón. Nada más. Si empieza a repetirse, deja de ser acento. */
::selection {
  background: color-mix(in srgb, var(--violeta) 28%, transparent);
}

svg { display: block; }

/* ---------- Tipografía ---------- */

h1, h2, h3, h4,
.faq-item summary {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  line-height: 1.05;
}

h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.1;
}

h3 {
  font-size: clamp(1.1875rem, 2.5vw, 1.5rem);
  line-height: 1.25;
  font-weight: 600;
}

/* Prosa y datos comparten el tracking del cuerpo. Los rótulos no: conservan
   el 0.02em abierto que declara cada uno. */
p, li,
figcaption,
address,
.boton-precio { letter-spacing: -0.01em; }

p { text-wrap: pretty; }

/* Prosa: nunca más de 68 caracteres por línea. La columna mide 720px, que a
   17px da unos 85 caracteres, así que la prosa se cierra por dentro y deja la
   columna completa para el redline, las rejillas y las capturas. La unidad ch
   mide el glifo «0», más ancho que la media de minúsculas, de modo que 50ch
   equivale a unos 66 caracteres reales. */
main :is(p, li):not(.etiqueta):not(.mono):not(.precio-destacado) {
  max-width: 50ch;
}

/* Cifras tabulares en todo dato medible: precios, mediciones y numeración
   alinean en columna y no bailan al cambiar de valor. */
.mono,
.etiqueta,
.precio-destacado,
.alcance-precio,
.anotacion-medicion,
.anotacion-num,
.paso-num,
.marca,
.boton-precio {
  font-variant-numeric: tabular-nums;
}

.grande {
  font-size: clamp(1.125rem, 2vw, 1.25rem);
  line-height: 1.6;
  letter-spacing: -0.02em;
}

/* Rótulo que encabeza un bloque. Es <h3> por jerarquía del documento, pero
   se lee como rótulo: peso regular y cuerpo pequeño, no de titular. */
.mono {
  font-family: var(--display);
  font-size: 1rem;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--marca);
}

/* ---------- Foco visible en todo lo interactivo ---------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 3px;
  border-radius: var(--radio);
}

.salto-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--marca);
  color: var(--papel);
  padding: 0.875rem 1.25rem;
  font-family: var(--display);
  font-size: 1rem;
  text-decoration: none;
}

.salto-contenido:focus { left: 0; }

.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   Rejilla de documento
   Columna de contenido de 720px con margen izquierdo de 120px que sostiene
   la numeración de sección. En móvil el margen colapsa y la etiqueta sube.
   ========================================================================== */

.doc {
  width: 100%;
  max-width: var(--columna);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

@media (min-width: 1040px) {
  .doc {
    max-width: calc(var(--margen-doc) + var(--canal) + var(--columna));
    display: grid;
    grid-template-columns: var(--margen-doc) var(--columna);
    column-gap: var(--canal);
  }

  /* Todo el contenido cruza las dos columnas, igual que el hero. La retícula
     se conserva porque define el ancho y la posición del documento, pero ya
     no corre el contenido a la derecha: si el §NN se quedara con su columna
     propia, el hero y la banda —que no numeran— quedarían 216px a la
     izquierda de todo lo demás. */
  .doc > * { grid-column: 1 / -1; }

  /* La referencia y el rótulo fluyen en una línea, como en el hero y como en
     pantallas angostas. */
  .doc > .etiqueta {
    grid-row: 1;
    margin-top: 0;
  }
}

.doc > * + * { margin-top: 1.25rem; }
.doc > .etiqueta + h2 { margin-top: 0.75rem; }
.doc > h2 + p { margin-top: 1.5rem; }

.seccion {
  padding-block: var(--seccion);
  border-top: 1px solid var(--regla);
}

.seccion > * + * { margin-top: 1.25rem; }
.seccion > .etiqueta + h2 { margin-top: 0.75rem; }
.seccion > h2 + p { margin-top: 1.5rem; }

/* Los rótulos de sección usan Outfit Medium, mayúsculas y tracking abierto:
   lee como la anotación al margen de un documento y se distingue de la mono,
   que queda reservada para lo medible. */
.etiqueta {
  font-family: var(--display);
  font-size: 1rem;
  line-height: 1.2;
  font-weight: 200;
  letter-spacing: 0.02em;
  color: var(--tinta-60);
}

/* En móvil la referencia y el rótulo van seguidos, separados por aire. */
.etiqueta-ref {
  margin-right: 0.7em;
}

/* Bloque invertido (§04). Sangra a todo el ancho de la ventana. */
.invertido {
  position: relative;
  background-color: var(--invertido-fondo);
  background-image: var(--invertido-halo);
  color: var(--invertido-texto);
  border-top: none;
}

/* El haz de luz que parte el bloque: la marca en una línea. */
.invertido::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: var(--haz);
}

.invertido h2,
.invertido h3 { color: var(--invertido-texto); }

.invertido .etiqueta { color: color-mix(in srgb, var(--invertido-texto) 65%, transparent); }

/* ==========================================================================
   Encabezado
   ========================================================================== */

.progreso-lectura {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: var(--gradiente-avance);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 70;
}

@media (prefers-reduced-motion: no-preference) {
  .progreso-lectura { transition: transform 100ms linear; }
}

.encabezado {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--papel);
  border-bottom: 1px solid var(--regla);
}

/* ==========================================================================
   Iconografía · Heroicons v2 (MIT, heroicons.com)
   Los trazados van en línea: sin dependencias, sin peticiones extra y
   heredando color con currentColor. Los marcadores de lista y el del FAQ
   usan mask-image para seguir siendo CSS puro sin tocar cada <li>.
   ========================================================================== */

.icono {
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Icono dentro de texto: alinea con la línea base y deja aire a la palabra. */
.enlace-secundario .icono,
.proyecto-enlace .icono {
  display: inline-block;
  vertical-align: -0.125em;
  margin-left: 0.4em;
}

.encabezado-fila {
  max-width: calc(var(--margen-doc) + var(--canal) + var(--columna));
  margin-inline: auto;
  padding: 0.75rem var(--gutter);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.marca-logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.marca-logo svg {
  width: auto;
  height: 1.5rem;
}

/* ==========================================================================
   Botones y enlaces de acción
   ========================================================================== */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0 1.5rem;
  /* Vidrio tintado: el cian y el violeta son de identidad y no cambian con el
     tema, así que el mismo tinte sirve sobre papel y sobre tinta. Lo que sí
     voltea es el texto y el borde, que salen de --marca. El color va aparte
     de la imagen porque un degradado no interpola en :hover y un color sí:
     así el paso a hover se anima en vez de saltar. */
  background-color: color-mix(in srgb, var(--cian) 17%, transparent);
  background-image: linear-gradient(160deg, color-mix(in srgb, var(--violeta) 13%, transparent) 0%, transparent 100%);
  color: var(--marca);
  border: 1px solid color-mix(in srgb, var(--marca) 35%, transparent);
  border-radius: var(--radio);
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transicion), border-color var(--transicion), color var(--transicion);
}

/* El hover sube las tres cosas a la vez: relleno, borde y texto. Subir solo
   el relleno no se nota, porque el borde tenue es lo que ancla la lectura. */
.boton:hover {
  background-color: color-mix(in srgb, var(--cian) 44%, transparent);
  background-image: linear-gradient(160deg, color-mix(in srgb, var(--violeta) 26%, transparent) 0%, transparent 100%);
  color: var(--marca-claro);
  border-color: color-mix(in srgb, var(--marca) 90%, transparent);
}

.boton[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.boton-precio {
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 400;
  opacity: 0.85;
}

.enlace-secundario {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 400;
  color: var(--tinta-60);
  text-decoration: none;
  border-bottom: 1px solid var(--regla);
  transition: color var(--transicion), border-color var(--transicion);
}

.enlace-secundario:hover {
  color: var(--tinta);
  border-bottom-color: var(--tinta);
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
}

/* ==========================================================================
   §01 · Hero
   ========================================================================== */

.hero {
  padding-block: clamp(3.5rem, 9vw, 7rem) var(--seccion);
  border-top: none;
}

.hero h1 { margin-top: 0.75rem; }

.hero .grande {
  margin-top: 1.75rem;
  max-width: 52ch;
}

.hero .acciones { margin-top: 2.5rem; }

.restriccion {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--regla);
  font-family: var(--display);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--tinta-60);
  max-width: 52ch;
}

/* ==========================================================================
   Listas del documento
   ========================================================================== */

.lista-reglas {
  list-style: none;
  margin-top: 2rem;
  border-top: 1px solid var(--regla);
}

.lista-reglas li {
  padding-block: 1.125rem;
  border-bottom: 1px solid var(--regla);
}

.invertido .lista-reglas,
.invertido .lista-reglas li { border-color: color-mix(in srgb, var(--invertido-texto) 22%, transparent); }

/* Listas marcadas: rojo para lo que no se promete, verde para lo que sí. */
.lista-marcada {
  list-style: none;
  margin-top: 1rem;
  display: grid;
  gap: 0.75rem;
}

.lista-marcada li {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 0.75rem;
  align-items: baseline;
}

.lista-marcada li::before {
  font-family: var(--mono);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.65;
}

.no-prometemos li::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  background: var(--correccion);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2.2' stroke='%23000'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 18 18 6M6 6l12 12'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2.2' stroke='%23000'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 18 18 6M6 6l12 12'/%3E%3C/svg%3E") no-repeat center / contain;
}

.si-prometemos li::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  background: var(--verificado);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2.2' stroke='%23000'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m4.5 12.75 6 6 9-13.5'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2.2' stroke='%23000'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m4.5 12.75 6 6 9-13.5'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* §08 · Admisión. Marcadores neutros: el rojo queda reservado para §03 y §06,
   que es lo que le da fuerza. Aquí no hay una falla, hay un criterio. */
.lista-admision li::before {
  content: "—";
  color: var(--tinta-60);
}

.lista-admision.excluye li::before { content: "·"; }

.bloque-promesa + .bloque-promesa { margin-top: 2.5rem; }

.bloque-promesa > .mono { color: var(--tinta-60); }

/* Lista simple con viñeta de regla */
.lista-simple {
  list-style: none;
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
}

.lista-simple li {
  padding-left: 1.25rem;
  position: relative;
}

.lista-simple li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 8px;
  height: 1px;
  background: var(--tinta-60);
}

.invertido .lista-simple li::before { background: color-mix(in srgb, var(--invertido-texto) 60%, transparent); }

/* ==========================================================================
   §03 · Redline — el elemento firma
   ========================================================================== */

.redline {
  margin-top: 2.5rem;
}

.redline-lienzo {
  position: relative;
  border: 1px solid var(--regla);
  border-radius: var(--radio);
  background: var(--regla);
  overflow: hidden;
}

.redline-lienzo img {
  width: 100%;
  height: auto;
}

.redline-pie {
  margin-top: 0.75rem;
  font-family: var(--display);
  font-size: 0.9375rem;
  color: var(--tinta-60);
}

/* Marcas numeradas. Son <button> reales, navegables por teclado. */
.marca {
  position: absolute;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;   /* centra sobre la coordenada */
  border-radius: 50%;
  border: 2px solid var(--correccion);
  background: var(--papel-elevado);
  color: var(--correccion);
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color var(--transicion), color var(--transicion),
    transform var(--transicion);
}

/* El área táctil llega a 44px sin agrandar el círculo visible. */
.marca::after {
  content: "";
  position: absolute;
  inset: -5px;
}

.marca:hover,
.marca[aria-expanded="true"] {
  background: var(--correccion);
  color: var(--papel);
}

.redline-anotaciones {
  margin-top: 1.5rem;
  display: grid;
  gap: 1rem;
}

.anotacion {
  border: 1px solid var(--regla);
  border-radius: var(--radio);
  padding: 1.125rem 1.25rem;
  background: var(--papel-elevado);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--tinta) 4%, transparent);
}

.anotacion-titulo {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  font-family: var(--display);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--correccion);
}

.anotacion-num {
  flex: 0 0 auto;
  font-size: 0.75rem;
}

.anotacion-medicion {
  margin-top: 0.5rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--tinta-60);
}

.anotacion-consecuencia { margin-top: 0.625rem; }

/* Con JS el componente se vuelve interactivo: una anotación a la vez.
   Sin JS todas quedan visibles como lista legible. */
html.js .anotacion[hidden] { display: none; }

.redline-cierre {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--regla);
  font-weight: 500;
}

/* ==========================================================================
   §05 · Diagnóstico
   ========================================================================== */

.precio-destacado {
  font-family: var(--mono);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 500;
  line-height: 1;
  margin-top: 1.5rem;
}

.capas {
  margin-top: 2.5rem;
  display: grid;
  gap: 2rem;
}

@media (min-width: 700px) {
  .capas { grid-template-columns: repeat(2, 1fr); gap: 2rem 2.5rem; }
}

.capa > p { margin-top: 0.5rem; max-width: 40ch; }

.nota-credito {
  margin-top: 2rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--regla);
  border-radius: var(--radio);
  font-size: 1rem;
  color: var(--tinta-60);
}

.capturas-informe {
  margin-top: 2.5rem;
  display: grid;
  gap: 1rem;
}

@media (min-width: 700px) {
  .capturas-informe { grid-template-columns: repeat(2, 1fr); }
}

.capturas-informe img {
  width: 100%;
  border: 1px solid var(--regla);
  border-radius: var(--radio);
}

.capturas-informe figcaption {
  margin-top: 0.5rem;
  font-family: var(--display);
  font-size: 0.9375rem;
  color: var(--tinta-60);
}

/* ==========================================================================
   §07 · Rediseño — dos alcances
   ========================================================================== */

.alcances {
  margin-top: 2.5rem;
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 800px) {
  .alcances { grid-template-columns: repeat(2, 1fr); gap: 3rem; }
}

.alcance {
  border-top: 1px solid var(--tinta);
  padding-top: 1.25rem;
}

.alcance-encabezado {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.alcance-precio {
  font-family: var(--mono);
  font-size: 1.25rem;
  font-weight: 500;
  white-space: nowrap;
}

.alcance .lista-simple { margin-top: 1.25rem; }

.alcance-heredado {
  margin-top: 1.25rem;
  font-style: italic;
  color: var(--tinta-60);
}

/* ==========================================================================
   §09 · Trabajo entregado
   ========================================================================== */

/* ==========================================================================
   Banda de logos · cierra el hero, sin numerar
   ========================================================================== */

.banda-logos {
  padding-block: 2.5rem 3rem;
  border-top: 1px solid var(--regla);
}

.banda-rotulo {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--tinta-60);
}

/* Desfile de logos. El bucle es continuo porque la pista lleva la lista dos
   veces y la animación recorre exactamente la mitad: al llegar al -50% la
   segunda copia está donde arrancó la primera y el salto no se ve. La copia
   duplicada va con aria-hidden para que no se lea dos veces.

   Los logos se esperan monocromos sobre fondo transparente: se tiñen con
   filter, así no hace falta una versión por tema. */
.desfile {
  margin-top: 2rem;
  overflow: hidden;
  /* Difumina los bordes para que los logos entren y salgan sin cortarse. */
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.desfile-filas {
  display: grid;
  gap: 0.75rem;
}

/* La duración va con la longitud, no al ojo: son unos 63px por segundo en las
   dos filas. Como no tienen la misma cantidad de logos, cada una trae su
   --desfile-dur escrita en el HTML; con una duración común la fila más corta
   correría más lento y se notaría. */
.desfile-pista {
  --desfile-hueco: 1.25rem;
  --desfile-dur: 38s;
  display: flex;
  align-items: center;
  gap: var(--desfile-hueco);
  width: max-content;
  list-style: none;
  animation: desfilar var(--desfile-dur) linear infinite;
}

/* La segunda fila corre al revés con la misma animación: reproducirla en
   reverso mantiene la geometría, así que el empalme calculado sigue valiendo
   y no hace falta un segundo juego de fotogramas. */
.desfile-pista--inverso { animation-direction: reverse; }

/* Detener al pasar el puntero o al tabular adentro: si un logo es enlace,
   perseguirlo en movimiento es imposible. */
/* Sin recuadro ni borde: los logos se apoyan directamente sobre el papel.
   Cada archivo ya viene recortado a su dibujo y escalado por área de tinta,
   así que todos ocupan el mismo lienzo y pesan lo mismo a la vista, sin que
   uno cuadrado se vea diminuto al lado de uno alargado. */
.desfile-pista li {
  flex: none;
  width: 130px;
  height: 48px;
  display: grid;
  place-items: center;
}

/* brightness(0) aplasta cualquier color a negro y respeta la transparencia;
   invert(1) lo vuelve blanco para el fondo navy. Una sola silueta sirve sin
   pedirle a nadie la versión monocroma de su marca. */
.desfile-pista img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.62;
}

/* El -50% pelado no sirve: la separación entre logos es uniforme, así que la
   mitad de la pista cae a mitad de camino del hueco que une las dos copias.
   Hay que descontar ese medio hueco para que el logo 7 aterrice exactamente
   donde arrancó el 1. Si cambias --desfile-hueco, esto se ajusta solo. */
@keyframes desfilar {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - var(--desfile-hueco) / 2)); }
}

/* Sin movimiento: la pista deja de correr y se acomoda en varias líneas. */
@media (prefers-reduced-motion: reduce) {
  .desfile-pista {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    gap: 2rem;
  }
  .desfile { mask-image: none; }
}

/* Comparador antes/después. La de después va abajo completa y la de antes
   se recorta encima: así solo hay que mover un borde y no dos capas.
   --corte lo escribe el JavaScript desde el <input type="range">; el 50% de
   aquí es el valor con el que se pinta antes de que el JS corra, y el que
   queda para siempre si no hay JS. */
.comparador {
  --corte: 50%;
  position: relative;
  aspect-ratio: 1200 / 750;
  border: 1px solid var(--regla);
  border-radius: var(--radio);
  overflow: hidden;
  margin-bottom: 1.25rem;
}

.comparador img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Arrastrar la imagen pisa el arrastre del control. */
  user-select: none;
  -webkit-user-drag: none;
}

.comparador-antes { clip-path: inset(0 calc(100% - var(--corte)) 0 0); }

.comparador-linea {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--corte);
  width: 2px;
  background: var(--cian);
  transform: translateX(-1px);
}

/* El tirador es decorativo: quien manda es el input, que está encima. */
.comparador-linea::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  transform: translate(-50%, -50%);
  border: 2px solid var(--cian);
  border-radius: 50%;
  background: var(--papel);
}

.comparador-rotulo {
  position: absolute;
  bottom: 0.75rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radio);
  background: color-mix(in srgb, var(--marino) 72%, transparent);
  color: #E6F1F0;
}

.comparador-rotulo-antes    { left: 0.75rem; }
.comparador-rotulo-despues  { right: 0.75rem; }

/* El control ocupa toda la caja y va invisible: el arrastre, el teclado y el
   anuncio del lector de pantalla los pone el navegador. Sin JS no sirve de
   nada, así que solo aparece cuando hay JS. */
.comparador-control {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: ew-resize;
  display: none;
}

.js .comparador-control { display: block; }

/* El contorno de foco va en el contenedor: un elemento con opacity 0 tampoco
   dibuja su outline, así que ponerlo en el input no se vería. */
.comparador:has(.comparador-control:focus-visible) {
  outline: 2px solid var(--marca);
  outline-offset: 3px;
}

.rejilla-proyectos {
  margin-top: 2.5rem;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--regla);
}

.proyecto {
  display: grid;
  gap: 0.25rem;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--regla);
}

@media (min-width: 700px) {
  .proyecto {
    grid-template-columns: 1fr auto;
    align-items: baseline;
    column-gap: 2rem;
  }
  .proyecto-alcance { grid-column: 1; }
  .proyecto-enlace { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
}

.proyecto h3 { font-size: 1.25rem; }

.proyecto-sector {
  font-family: var(--display);
  font-size: 0.9375rem;
  color: var(--tinta-60);
}

.proyecto-alcance {
  color: var(--tinta-60);
  max-width: 52ch;
}

.proyecto-enlace {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--display);
  font-size: 0.9375rem;
  text-decoration: none;
  border-bottom: 1px solid var(--regla);
  transition: border-color var(--transicion);
}

.proyecto-enlace:hover { border-bottom-color: var(--tinta); }

/* ==========================================================================
   §10 · Proceso
   ========================================================================== */

/* Los cuatro pasos son un proceso paralelo de leer, no una lista larga:
   van en rejilla. Una columna en móvil, dos en tableta, cuatro en escritorio. */
.pasos {
  margin-top: 2.5rem;
  list-style: none;
  counter-reset: paso;
  display: grid;
  gap: 1rem;
}

@media (min-width: 700px) {
  .pasos { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
}

@media (min-width: 1040px) {
  .pasos { grid-template-columns: repeat(4, 1fr); }
}

.paso {
  padding-block: 1.75rem;
  display: grid;
  gap: 0.5rem;
  align-content: start;
}

.paso-num {
  font-family: var(--display);
  font-size: 1rem;
  color: var(--tinta-60);
}

.paso-plazo {
  font-family: var(--display);
  font-size: 0.9375rem;
  color: var(--tinta-60);
}

/* ==========================================================================
   §12 · Preguntas frecuentes
   ========================================================================== */

.faq {
  margin-top: 2rem;
  border-top: 1px solid var(--regla);
}

.faq-item {
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--regla);
}

.faq-item summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  max-width: 60ch;
  font-family: var(--display);
  font-size: clamp(1.1875rem, 2.5vw, 1.5rem);
  line-height: 1.25;
  font-weight: 400;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "";
  flex: 0 0 auto;
  width: 1.1em;
  height: 1.1em;
  background: var(--tinta-60);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.6' stroke='%23000'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 4.5v15m7.5-7.5h-15'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.6' stroke='%23000'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 4.5v15m7.5-7.5h-15'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform var(--transicion);
}

.faq-item[open] summary::after { transform: rotate(45deg); }

.faq-item p {
  margin-top: 0.625rem;
  max-width: 54ch;
  color: var(--tinta-60);
}

/* ==========================================================================
   §13 · Formulario
   ========================================================================== */

.formulario {
  margin-top: 2.5rem;
  max-width: 34rem;
  display: grid;
  gap: 1.5rem;
}

.campo {
  display: grid;
  gap: 0.4rem;
}

.campo label {
  font-family: var(--display);
  font-size: 0.9375rem;
  font-weight: 200;
}

/* Marcador de campo obligatorio: neutro. El rojo solo señala fallas reales,
   y un campo por llenar todavía no es una falla. */
.campo-obligatorio {
  color: var(--tinta-60);
  margin-left: 0.15em;
}

.campo input,
.campo textarea {
  font-family: var(--display);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--papel-elevado);
  border: 1px solid var(--regla);
  border-radius: var(--radio);
  padding: 0.75rem 0.875rem;
  min-height: 48px;
  width: 100%;
  transition: border-color var(--transicion);
}

.campo textarea {
  min-height: 7rem;
  resize: vertical;
}

.campo input:hover,
.campo textarea:hover { border-color: var(--tinta-60); }

.campo input:focus,
.campo textarea:focus {
  border-color: var(--marca);
  outline: 2px solid var(--marca);
  outline-offset: 1px;
}

.campo-ayuda {
  font-size: 0.9375rem;
  color: var(--tinta-60);
}

/* Error específico bajo cada campo, en rojo de corrección. */
.campo-error {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--correccion);
  min-height: 1rem;
}

.campo[data-invalido="true"] input,
.campo[data-invalido="true"] textarea {
  border-color: var(--correccion);
}

.campo-consentimiento {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
}

.campo-consentimiento input {
  width: 20px;
  height: 20px;
  min-height: 0;
  margin-top: 0.3rem;
  accent-color: var(--marca);
}

.campo-consentimiento label {
  font-family: var(--display);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
}

.campo-consentimiento .campo-error { grid-column: 1 / -1; }

/* Honeypot: invisible para personas, visible para robots. */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-estado {
  border: 1px solid var(--correccion);
  border-radius: var(--radio);
  padding: 1rem 1.25rem;
  color: var(--correccion);
  font-size: 1rem;
}

.form-estado a { color: inherit; }

[hidden] { display: none !important; }

/* ==========================================================================
   Pie
   ========================================================================== */

.pie {
  border-top: 1px solid var(--regla);
  padding-block: 3.5rem;
  font-size: 0.9375rem;
  color: var(--tinta-60);
}

.pie-marca {
  display: inline-flex;
  color: var(--tinta);
}

.pie-marca svg {
  width: auto;
  height: 1.5rem;
}

.pie-registro {
  margin-top: 0.75rem;
  font-family: var(--display);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--tinta-60);
}

.pie-contacto {
  margin-top: 1.5rem;
  font-style: normal;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.pie-contacto a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  border-bottom: 1px solid var(--regla);
  transition: border-color var(--transicion), color var(--transicion);
}

.pie-contacto a:hover {
  color: var(--tinta);
  border-bottom-color: var(--tinta);
}

.pie-navegacion {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--regla);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-family: var(--display);
  font-size: 0.9375rem;
}

.pie-navegacion a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  transition: color var(--transicion);
}

.pie-navegacion a:hover { color: var(--tinta); }

/* ==========================================================================
   Consentimiento de cookies (requerido si se activa GA4)
   ========================================================================== */

.consentimiento {
  position: fixed;
  left: var(--gutter);
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: 60;
  max-width: 34rem;
  margin-inline: auto;
  background: var(--papel-elevado);
  border: 1px solid var(--tinta);
  border-radius: var(--radio);
  padding: 1.25rem;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--tinta) 12%, transparent);
}

.consentimiento p { font-size: 0.9375rem; }

.consentimiento-acciones {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.boton-menor {
  min-height: 44px;
  padding: 0 1.125rem;
  font-size: 0.9375rem;
}

/* Sin tinte, solo borde: el primario ya es vidrio tintado y si el fantasma
   también llevara tinte los dos botones del banner se leerían iguales. */
.boton-fantasma {
  background: transparent;
  color: var(--tinta);
  border-color: var(--regla);
}

.boton-fantasma:hover {
  background: transparent;
  color: var(--tinta);
  border-color: var(--tinta);
}

/* ==========================================================================
   Páginas de utilidad (/gracias, /privacidad)
   ========================================================================== */

.pagina-utilidad {
  padding-block: clamp(3.5rem, 9vw, 6rem) var(--seccion);
  border-top: none;
}

.pagina-utilidad h1 { margin-top: 0.75rem; }
.pagina-utilidad h2 { margin-top: 2.5rem; }
.pagina-utilidad h3 { margin-top: 2rem; }
.pagina-utilidad p { margin-top: 1rem; }
.pagina-utilidad .lista-simple { margin-top: 1rem; }

/* El círculo ya viene dentro del icono (check-circle), no se dibuja aparte. */
.confirmacion-marca {
  color: var(--verificado);
  font-size: 44px;
  line-height: 0;
}

/* ==========================================================================
   Movimiento — mínimo y deliberado
   ========================================================================== */

/* El contenido nunca depende de la animación para ser visible: nace visible y
   la entrada solo se le suma cuando el observador la anuncia. Si el JS no
   corre, o el navegador está en segundo plano (donde IntersectionObserver no
   entrega entradas), la página se lee completa igual. */
@media (prefers-reduced-motion: no-preference) {
  html.js .revelar.visible {
    animation: entrar 400ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

}

/* Nota deliberada: aquí cabría `animation-timeline: view()`, que resuelve la
   entrada sin JavaScript. Se probó y se descartó: con `fill-mode: both` deja
   el contenido en opacidad 0 mientras el elemento está fuera del rango, y si
   la línea de tiempo no avanza (pestaña en segundo plano, renderizadores sin
   scroll real) la sección no se muestra nunca. Es la misma falla que este
   sitio denuncia en §03, así que se mantiene la versión que nace visible. */

@keyframes entrar {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Las capturas del redline y de los informes son documentos claros. Sobre el
   fondo navy se atenúan un poco para no deslumbrar, sin alterar lo que muestran. */
.redline-lienzo img,
.capturas-informe img {
  filter: brightness(0.86) contrast(1.04);
}

/* ==========================================================================
   Transiciones entre rutas
   El sitio son cuatro documentos HTML, no una aplicación de una sola página.
   Las transiciones de vista entre documentos dan continuidad al navegar sin
   añadir router ni JavaScript. Donde no hay soporte, la navegación es la
   normal de siempre.
   ========================================================================== */

@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: salir 120ms cubic-bezier(0.4, 0, 1, 1) both;
  }

  ::view-transition-new(root) {
    animation: entrar-ruta 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  /* El encabezado persiste entre rutas: no parpadea con el resto. */
  .encabezado { view-transition-name: encabezado; }
}

@keyframes salir {
  to { opacity: 0; }
}

@keyframes entrar-ruta {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* ==========================================================================
   Tema "Agentic UX" — capa de identidad sobre el documento
   Paleta y gestos del Vaui Design System: orbes glow, vidrio, violeta de
   acción, celeste de enfoque, titulares en Alumni Sans.
   ========================================================================== */

/* Fondo: navy profundo con orbes glow en capa fija detrás del contenido.
   No usar background-attachment: fixed — rompe el compositing. */
body { background: var(--papel); }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(900px 700px at 88% -5%, rgba(42, 62, 132, 0.55), transparent 65%),
    radial-gradient(800px 750px at 0% 38%, rgba(96, 30, 189, 0.38), transparent 65%),
    radial-gradient(760px 650px at 75% 100%, rgba(21, 156, 253, 0.14), transparent 65%),
    linear-gradient(180deg, #0B0F34 0%, #050017 100%);
}

/* Titulares en Alumni Sans. Las preguntas del FAQ no: son texto que se lee
   de corrido, no rótulos, y van en Outfit. */
h1, h2 {
  font-family: var(--titular);
  letter-spacing: 0.01em;
  font-weight: 600;
}

h1 { font-size: clamp(2.75rem, 6.5vw, 4.75rem); }

h3 { font-family: var(--titular); font-size: clamp(1.35rem, 2.5vw, 1.7rem); letter-spacing: 0.02em; }

/* Etiquetas de sección en celeste. */
.etiqueta { color: var(--cian); }

/* Header translúcido con blur. */
.encabezado {
  background: rgba(11, 15, 52, 0.65);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* Botón principal: violeta sólido con glow. */
.boton {
  background-color: var(--violeta);
  background-image: none;
  color: #fff;
  border: none;
  font-weight: 500;
  box-shadow: 0 10px 30px rgba(96, 30, 189, 0.45);
}

.boton:hover {
  background-color: var(--violeta-luz);
  background-image: none;
  color: #fff;
}

.boton-fantasma {
  background: var(--vidrio);
  box-shadow: var(--anillo);
  color: var(--tinta);
}

/* Tarjetas de vidrio: anotaciones, capas, alcances, pasos, notas.
   El FAQ queda fuera: es una lista de lectura, y once paneles de vidrio
   seguidos pesan más de lo que ordenan. Conserva su regla de 1px. */
.anotacion,
.nota-credito,
.bloque-promesa,
.paso {
  background: var(--vidrio);
  border: none;
  box-shadow: var(--anillo);
  border-radius: 20px;
}

.bloque-promesa,
.paso { padding: 1.5rem 1.75rem; }

.alcance {
  border-top: none;
  background: var(--vidrio);
  box-shadow: var(--anillo);
  border-radius: 24px;
  padding: 1.75rem 2rem;
}

.capa {
  background: var(--vidrio);
  box-shadow: var(--anillo);
  border-radius: 20px;
  padding: 1.5rem 1.75rem;
}

/* Sección invertida (§04): panel de vidrio con halo violeta. */
.invertido {
  border-radius: 24px;
  box-shadow: var(--anillo);
}

/* Precios en violeta claro. */
.precio-destacado,
.alcance-precio { color: var(--violeta-luz); }

/* Formulario: campos translúcidos, foco celeste. */
.campo input,
.campo textarea {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--regla);
}

.campo input:focus,
.campo textarea:focus {
  border-color: var(--cian);
  outline: 2px solid rgba(21, 156, 253, 0.55);
}

.campo-consentimiento input { accent-color: var(--violeta-luz); }

/* Marcas del redline en violeta con glow. El rojo queda para la marca activa. */
.marca {
  background: var(--violeta-luz);
  box-shadow: 0 0 0 4px rgba(129, 61, 224, 0.28), 0 6px 18px rgba(96, 30, 189, 0.5);
}

.anotacion-titulo { color: var(--sky); }

/* Capturas sobre vidrio. */
.redline-lienzo,
.capturas-informe img { border-radius: 16px; }

/* Aviso de cookies: esquina inferior derecha, superficie sólida — un panel
   flotante no puede ser vidrio al 4% o el contenido de abajo se lee a través. */
.consentimiento {
  left: auto;
  right: var(--gutter);
  bottom: var(--gutter);
  margin-inline: 0;
  background: #12173F;
  border: none;
  box-shadow: var(--anillo), 0 18px 50px rgba(0, 0, 0, 0.55);
  border-radius: 20px;
}

/* ==========================================================================
   Botón de tema + modo claro
   El tema se resuelve antes de pintar con data-tema en <html> (script del
   <head>): sin JavaScript el sitio queda en oscuro, que es la marca.
   El primario sigue siendo el violeta en los dos modos.
   ========================================================================== */

.tema-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  background: var(--vidrio);
  border: none;
  box-shadow: var(--anillo);
  border-radius: 12px;
  color: var(--tinta-60);
  cursor: pointer;
  transition: color var(--transicion);
}

.tema-boton:hover { color: var(--tinta); }

.tema-boton svg {
  width: 18px;
  height: 18px;
}

/* El icono anuncia el destino: sol para pasar a claro, luna para volver. */
.tema-icono-sol { display: none; }
:root[data-tema="oscuro"] .tema-icono-sol  { display: block; }
:root[data-tema="oscuro"] .tema-icono-luna { display: none; }

:root[data-tema="claro"] {
  color-scheme: light;

  --papel: #FAFAFA;
  --papel-elevado: #FFFFFF;
  --tinta: #10142B;
  --tinta-60: rgba(16, 20, 43, 0.64);
  --regla: rgba(11, 15, 52, 0.14);
  --marca: #601EBD;
  --marca-claro: #813DE0;
  --correccion: #C4392E;
  --verificado: #1E7A5A;
  --cian: #0A6FC2;
  --sky: #0A6FC2;

  --invertido-fondo: rgba(96, 30, 189, 0.05);
  --invertido-halo: radial-gradient(115% 85% at 100% 0%, rgba(96, 30, 189, 0.16) 0%, transparent 62%);

  --vidrio: rgba(11, 15, 52, 0.035);
  --anillo: inset 0 0 0 1px rgba(11, 15, 52, 0.10);
}

:root[data-tema="claro"] body::before {
  background:
    radial-gradient(900px 700px at 88% -5%, rgba(42, 62, 132, 0.10), transparent 65%),
    radial-gradient(800px 750px at 0% 38%, rgba(96, 30, 189, 0.08), transparent 65%),
    radial-gradient(760px 650px at 75% 100%, rgba(21, 156, 253, 0.06), transparent 65%),
    linear-gradient(180deg, #FAFAFA 0%, #F3F2FA 100%);
}

:root[data-tema="claro"] .encabezado {
  background: rgba(250, 250, 250, 0.72);
}

/* Logos y capturas: sobre papel claro las siluetas van en negro y las
   capturas no necesitan atenuarse. */
:root[data-tema="claro"] .desfile-pista img {
  filter: brightness(0);
  opacity: 0.55;
}

:root[data-tema="claro"] .redline-lienzo img,
:root[data-tema="claro"] .capturas-informe img { filter: none; }

:root[data-tema="claro"] .campo input,
:root[data-tema="claro"] .campo textarea {
  background: var(--papel-elevado);
}

:root[data-tema="claro"] .consentimiento {
  background: #FFFFFF;
  box-shadow: var(--anillo), 0 18px 50px rgba(11, 15, 52, 0.18);
}