/* ============================================================
   TIPOGRAFÍAS PROPIAS
   Las tres familias se sirven desde este mismo dominio. El sitio
   no tiene un solo tercero: nadie fuera de amdata ve la IP de un
   visitante. Es la única forma honesta de sostener lo que dice la
   Política de Cookies.

   Redaction 35 · SIL Open Font License — assets/fonts/REDACTION-LICENSE.txt
   Inter Tight · IBM Plex Mono · SIL Open Font License
   ============================================================ */
@font-face {
  font-family: "Inter Tight"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("fonts/inter-tight-300-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Tight"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/inter-tight-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Tight"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/inter-tight-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Tight"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/inter-tight-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Tight"; font-style: italic; font-weight: 500; font-display: swap;
  src: url("fonts/inter-tight-500-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Tight"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/inter-tight-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/ibm-plex-mono-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/ibm-plex-mono-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/ibm-plex-mono-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Redaction 35"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/redaction-35-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Redaction 35"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/redaction-35-400-italic.woff2") format("woff2");
}

/* ============================================================
   amdata.pro — sistema de estilos del sitio
   Deriva del Brandbook amdata · Edición 2026.
   Paleta de 4 valores · radio gobernado · píldora prohibida.

   Edición 2026 · revisión UX/UI:
   · ritmo vertical propio para las páginas internas (.sub era
     una clase huérfana: se usaba en 9 páginas y no existía aquí)
   · estados de cursor en tarjetas y listas, solo de color
   · cabecera que se comprime, submenú de servicios, índice de
     bloques del Inicio y aparición de bloques al entrar en pantalla
   · pop-up de 4 campos, con transición y sin salto de foco
   ============================================================ */

:root {
  color-scheme: light;

  /* Paleta oficial */
  --azul:   #2508FF;
  --negro:  #000000;
  --gris:   #EDEDED;
  --blanco: #FFFFFF;

  /* Neutros de apoyo — contraste verificado sobre blanco */
  --muted: #55575E;   /* 7,2:1 */
  --label: #63656D;   /* 5,8:1 */
  --off:   #9A9CA3;   /* 2,7:1 — solo deshabilitado, nunca informativo */

  --line:     rgba(0,0,0,.13);
  --line-2:   rgba(0,0,0,.07);
  --line-str: rgba(0,0,0,.24);

  /* Superficies de estado — variación de color, nunca de sombra */
  --hover-blanco: #F7F7F8;
  --hover-gris:   #E3E3E4;

  /* Forma — el radio nunca supera un tercio de la altura */
  --radio-0:   0px;
  --radio-xs:  4px;
  --radio-s:   8px;
  --radio:    12px;
  --radio-l:  16px;
  --filete:    1px;
  --acento:    3px;
  --chaflan:  12px;

  /* Alturas de componente */
  --h-l: 56px;
  --h-m: 48px;
  --h-s: 38px;

  /* Espaciado 8pt */
  --s1: 8px;  --s2: 16px; --s3: 24px;
  --s4: 40px; --s5: 64px; --s6: 96px; --s7: 128px;

  --tr-label: .14em;
  --tr-mono:  .10em;

  --fs-cap: 12px;
  --fs-fine: 13px;
  --fs-sm: 14px;
  --fs-base: 16px;

  --nav-h: 76px;
  --nav-h-min: 60px;

  /* Marco fijo — passe-partout de la marca.
     --vsq mezcla ancho y alto para que el marco no engorde en pantallas
     anchas y bajas. Para cambiarlo de azul a negro basta --marco-color. */
  --vsq:   calc(.5vw + .5vh);
  --marco: clamp(10px, calc(2 * var(--vsq)), 30px);
  /* Negro, no azul: con la sección 05 en azul pleno, un marco también
     azul gasta dos veces el mismo recurso. El azul queda libre para lo
     que la marca le tiene reservado — acción y dato. */
  --marco-color: var(--negro);
  --nav-off: calc(var(--nav-h) + var(--marco));
  --curva: cubic-bezier(.22,.61,.36,1);

  --sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --editorial: "Redaction 35", "Redaction", "Iowan Old Style", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-off) + 24px); }

body {
  margin: 0;
  background: var(--blanco);
  color: var(--negro);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; }
a:hover { color: var(--azul); }
::selection { background: var(--azul); color: var(--blanco); }

:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--negro); color: var(--blanco); padding: 12px 18px;
  font-size: var(--fs-sm); border-radius: var(--radio-s);
}
.saltar:focus { left: calc(16px + var(--marco)); top: calc(16px + var(--marco)); color: var(--blanco); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Estructura ---------- */
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding-inline: clamp(20px, 5vw, 56px); }

.seccion { padding-block: clamp(72px, 9vw, 128px); border-top: var(--filete) solid var(--line); }
.seccion--gris { background: var(--gris); border-top: 0; }
.seccion--azul { background: var(--azul); border-top: 0; color: var(--blanco); }

.sec-head { max-width: 62ch; margin-bottom: clamp(36px, 5vw, 56px); }
.sec-idx {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: var(--fs-cap); letter-spacing: var(--tr-mono);
  color: var(--label); text-transform: uppercase; margin-bottom: 18px;
}
.sec-idx b { color: var(--azul); font-weight: 400; }
.sec-idx i { font-style: normal; width: 28px; height: var(--filete); background: var(--line-str); display: inline-block; }

.sec-title {
  font-size: clamp(30px, 4.6vw, 50px); font-weight: 500;
  letter-spacing: -.025em; line-height: 1.05; margin: 0 0 16px; text-wrap: balance;
}
.sec-intro { font-size: clamp(16px, 1.9vw, 19px); color: var(--muted); max-width: 56ch; margin: 0; line-height: 1.55; }

.nota {
  position: relative;
  margin: clamp(32px,4vw,48px) 0 0; padding-left: 16px;
  font-size: var(--fs-sm); color: var(--muted); max-width: 72ch; line-height: 1.65;
}
/* El filete se dibuja de arriba abajo al entrar en pantalla: es entrada, no
   estado. La clase .nota--anim la pone el script, igual que .rv: sin JS el
   filete se ve entero y nada queda escondido. */
.nota::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--azul); transform: scaleY(1); transform-origin: top center;
  transition: transform .9s var(--curva);
}
.nota--anim::before        { transform: scaleY(0); }
.nota--anim.is-on::before  { transform: scaleY(1); }
.nota strong { color: var(--negro); font-weight: 500; }
.seccion--gris .nota { color: #4C4E55; }

.lead {
  font-size: clamp(16px, 1.9vw, 19px); color: var(--muted);
  line-height: 1.65; max-width: 62ch; margin: 0;
}
.lead strong { color: var(--negro); font-weight: 500; }

.oneline {
  font-size: clamp(24px, 3.6vw, 38px); font-weight: 500;
  letter-spacing: -.025em; line-height: 1.15; margin: 0; text-wrap: pretty;
}
.oneline span { color: var(--azul); }

.wm { font-family: var(--editorial); font-weight: 400; letter-spacing: -.01em; }
.wm i { font-style: italic; color: var(--azul); }
.mono { font-family: var(--mono); }

/* ============================================================
   BOTONES — tres niveles del brandbook
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--sans); font-size: 15px; font-weight: 500; line-height: 1;
  height: var(--h-m); padding: 0 24px;
  border: 0; border-radius: var(--radio); background: none; color: inherit;
  text-decoration: none; cursor: pointer; white-space: nowrap; -webkit-appearance: none;
  transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.btn .ar { display: inline-block; transition: transform .16s ease; }
.btn--l { height: var(--h-l); padding: 0 32px; font-size: 16px; }
.btn--s { height: var(--h-s); padding: 0 16px; font-size: var(--fs-sm); border-radius: var(--radio-s); }
.btn--ancho { width: 100%; }

.btn--bloque { background: var(--azul); color: var(--blanco); }
.btn--bloque:hover { background: var(--negro); color: var(--blanco); }
.btn--bloque:active { background: #1B06BF; }

.btn--muesca {
  background: var(--azul); color: var(--blanco); padding-right: 30px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--chaflan)), calc(100% - var(--chaflan)) 100%, 0 100%);
}
.btn--muesca:hover { background: var(--negro); color: var(--blanco); }

.btn--contorno { color: var(--negro); box-shadow: inset 0 0 0 var(--filete) var(--negro); }
.btn--contorno:hover { background: var(--negro); color: var(--blanco); }

/* B-05 · secundario señalizado — barra azul de 3 px, sin relleno */
.btn--barra {
  color: var(--negro); justify-content: flex-start;
  box-shadow: inset 0 0 0 var(--filete) var(--line-str), inset var(--acento) 0 0 var(--azul);
  padding-left: 22px;
}
.btn--barra:hover { background: var(--gris); color: var(--negro); }

.btn--flecha { padding: 0; height: auto; color: var(--negro); border-radius: var(--radio-0); }
.btn--flecha:hover { color: var(--azul); }
.btn--flecha:hover .ar { transform: translateX(5px); }

.btn--subrayado { padding: 0 0 5px; height: auto; color: var(--negro); border-radius: var(--radio-0); box-shadow: inset 0 -1px 0 var(--negro); }
.btn--subrayado:hover { color: var(--azul); box-shadow: inset 0 -2px 0 var(--azul); }

.btn--mono {
  font-family: var(--mono); font-size: var(--fs-cap); font-weight: 400;
  letter-spacing: var(--tr-mono); text-transform: uppercase;
  height: var(--h-s); padding: 0 15px; border-radius: var(--radio-s);
  color: var(--negro); background: var(--blanco);
  box-shadow: inset 0 0 0 var(--filete) var(--line-str);
}
.btn--mono:hover { background: var(--negro); color: var(--blanco); box-shadow: inset 0 0 0 var(--filete) var(--negro); }

.btn[disabled] { background: var(--gris); color: var(--off); box-shadow: none; cursor: not-allowed; }

.acciones { display: flex; flex-wrap: wrap; gap: 18px 24px; align-items: center; }
@media (max-width: 520px) {
  .acciones { gap: 14px 18px; }
  .acciones > .btn--bloque:first-child, .acciones > .btn--contorno:first-child { width: 100%; }
}

/* ============================================================
   CABECERA — se comprime al bajar y lleva el avance real de lectura
   ============================================================ */
.nav {
  position: fixed; inset-inline: var(--marco); top: var(--marco); z-index: 60; height: var(--nav-h);
  display: flex; align-items: center;
  background: transparent; border-bottom: var(--filete) solid transparent;
  transition: height .22s var(--curva), background-color .2s ease, border-color .2s ease;
}
.nav.is-fijo { background: rgba(255,255,255,.94); backdrop-filter: blur(10px); border-bottom-color: var(--line); }
.nav.is-comprimido { height: var(--nav-h-min); }
.nav__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; }
.nav__wm {
  font-size: 26px; line-height: 1; text-decoration: none;
  display: inline-flex; align-items: center; flex: none;
  transition: font-size .22s var(--curva);
}
.nav.is-comprimido .nav__wm { font-size: 21px; }
.nav__wm:hover { color: inherit; }

/* Avance de lectura — dato verdadero, no ornamento */
.nav__avance {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: var(--azul); opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.nav.is-fijo .nav__avance { opacity: 1; }

.nav__links { display: none; gap: 4px; align-items: center; }
.nav__links > a, .nav__grupo > a, .nav__grupo > button {
  display: inline-flex; align-items: center; gap: 8px;
  height: var(--h-s); padding: 0 12px; border: 0; background: none;
  font-family: var(--sans); font-size: var(--fs-sm); font-weight: 400;
  color: var(--negro); text-decoration: none; cursor: pointer;
  border-radius: var(--radio-s); white-space: nowrap;
  transition: background-color .16s ease, color .16s ease;
}
.nav__links > a:hover, .nav__grupo > a:hover, .nav__grupo > button:hover { color: var(--azul); background: rgba(0,0,0,.04); }
.nav__links > a[aria-current], .nav__grupo > a[aria-current] { color: var(--negro); box-shadow: inset 0 -1px 0 var(--negro); border-radius: 0; }
.nav__cta { display: none; }

/* Submenú de servicios */
.nav__grupo { position: relative; display: inline-flex; }
.nav__grupo > a .cv, .nav__grupo > button .cv {
  width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px); transition: transform .2s var(--curva);
}
.nav__grupo.is-abierto > a, .nav__grupo.is-abierto > button { color: var(--azul); background: rgba(0,0,0,.04); }
.nav__grupo.is-abierto > a .cv, .nav__grupo.is-abierto > button .cv { transform: rotate(-135deg) translateY(-2px); }
.nav__panel {
  position: absolute; top: calc(100% + 10px); left: -12px; z-index: 5;
  width: min(440px, calc(100vw - 48px));
  background: var(--blanco); border-radius: var(--radio);
  /* Contorno, no sombra. El box-shadow no ocupa espacio, así que el
     panel no desplaza nada al aparecer, y un contorno de 2 px lo
     separa de la página sin la sombra proyectada que §16 prohíbe. */
  box-shadow: inset 0 0 0 2px var(--negro);
  padding: 8px; opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s var(--curva), visibility .18s;
}
.nav__grupo.is-abierto .nav__panel { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__panel a {
  display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: baseline;
  padding: 12px; border-radius: var(--radio-s); text-decoration: none; color: var(--negro);
  transition: background-color .16s ease;
}
.nav__panel a:hover { background: var(--gris); color: var(--negro); }
.nav__panel .n { font-family: var(--mono); font-size: 11px; letter-spacing: var(--tr-mono); color: var(--azul); }
.nav__panel .t { display: block; font-size: 15px; font-weight: 500; letter-spacing: -.01em; }
.nav__panel .d { display: block; font-size: var(--fs-fine); color: var(--muted); line-height: 1.45; margin-top: 3px; }
.nav__panel .pie-panel {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 4px; padding: 12px; border-top: var(--filete) solid var(--line);
  font-family: var(--mono); font-size: 11px; letter-spacing: var(--tr-mono);
  text-transform: uppercase; color: var(--label); text-decoration: none;
}
.nav__panel .pie-panel:hover { color: var(--azul); background: none; }

.hamb {
  width: 44px; height: 44px; display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px;
  background: none; border: 0; cursor: pointer; border-radius: var(--radio-s);
}
.hamb span { display: block; width: 22px; height: 2px; background: var(--negro); transition: transform .22s var(--curva), opacity .16s ease; }
.hamb[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamb[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamb[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Menú móvil ---------- */
.menu {
  position: fixed; inset: var(--marco); z-index: 55; background: var(--blanco);
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: calc(var(--nav-h) + 16px) clamp(20px,6vw,56px) 32px;
  overflow-y: auto;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.menu.is-abierto { opacity: 1; pointer-events: auto; }
.menu__l {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-size: clamp(26px,6.4vw,36px); font-weight: 500; letter-spacing: -.025em;
  text-decoration: none; padding: 16px 0; border-bottom: var(--filete) solid var(--line);
  background: none; border-left: 0; border-right: 0; border-top: 0;
  font-family: var(--sans); color: var(--negro); text-align: left; width: 100%; cursor: pointer;
}
.menu__l .cv {
  width: 10px; height: 10px; flex: none;
  border-right: 2px solid var(--azul); border-bottom: 2px solid var(--azul);
  transform: rotate(45deg); transition: transform .2s var(--curva);
}
.menu__grupo.is-abierto .menu__l .cv { transform: rotate(-135deg); }
.menu__sub {
  display: grid; grid-template-rows: 0fr; overflow: hidden;
  transition: grid-template-rows .26s var(--curva);
}
.menu__grupo.is-abierto .menu__sub { grid-template-rows: 1fr; }
.menu__sub > div { min-height: 0; }
.menu__sub a {
  display: block; padding: 13px 0 13px 18px; font-size: 16px; color: var(--muted);
  text-decoration: none; border-bottom: var(--filete) solid var(--line-2);
  box-shadow: inset 2px 0 0 var(--line);
}
.menu__sub a:hover { color: var(--azul); box-shadow: inset 2px 0 0 var(--azul); }
.menu__pie { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.menu__directo {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  font-family: var(--mono); font-size: var(--fs-cap); letter-spacing: var(--tr-mono);
  color: var(--label);
}
.menu__directo a { color: var(--negro); text-decoration: none; box-shadow: inset 0 -1px 0 var(--line-str); }
.menu__directo a:hover { color: var(--azul); box-shadow: inset 0 -2px 0 var(--azul); }

@media (min-width: 940px) {
  .nav__links, .nav__cta { display: inline-flex; }
  .hamb { display: none; }
  .menu { display: none; }
}

/* ============================================================
   APARICIÓN DE BLOQUES — entrada, no estado
   ============================================================ */
.rv { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s var(--curva); }
.rv.is-dentro { opacity: 1; transform: none; }

/* ============================================================
   PORTADA
   ============================================================ */
.hero { position: relative; display: flex; flex-direction: column; }
.hero__video {
  position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--gris); order: 2; pointer-events: none;
}
.hero__video video { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }
.hero__scrim { display: none; }

.hero__in {
  position: relative; z-index: 2; order: 1;
  padding-top: calc(var(--nav-off) + clamp(28px,6vw,56px));
  padding-bottom: clamp(40px,6vw,64px);
}
.hero__col { max-width: 640px; }

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px;
  font-family: var(--mono); font-size: var(--fs-cap); letter-spacing: var(--tr-mono);
  text-transform: uppercase; color: var(--label);
}
.hero__eyebrow i { font-style: normal; width: 8px; height: 8px; background: var(--azul); display: inline-block; border-radius: var(--radio-0); }

.hero__h1 {
  font-size: clamp(34px, 6.2vw, 68px); font-weight: 500;
  letter-spacing: -.032em; line-height: 1.04; margin: 0 0 24px;
  display: grid;
}
/* La copia oculta reserva la altura final: la escritura no mueve la maqueta */
.hero__h1 > .linea, .hero__h1 > .reserva { grid-area: 1 / 1; }
.hero__h1 > .reserva { visibility: hidden; pointer-events: none; }
.caret {
  display: inline-block; width: .05em; min-width: 2px; height: .88em;
  background: var(--azul); margin-left: .06em; vertical-align: -.08em;
  animation: caret-blink 1.06s steps(1) infinite;
}
.caret.is-typing { animation: none; opacity: 1; }
.caret.is-off { display: none; }
@keyframes caret-blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }

.hero__sub { font-size: clamp(16px, 2vw, 20px); color: var(--muted); max-width: 46ch; margin: 0 0 24px; line-height: 1.55; }

/* --------------------------------------------------------------
   PÍLDORAS DE SERVICIO — PORTADA MAINFRAME
   Única excepción de forma sancionada. Elemento de portada, no
   componente de interfaz: NO son enlaces, NO reciben foco y NO
   tienen estado de hover, para que nadie las confunda con un
   control. Ninguna otra pieza del sitio puede usar este radio.
   Fuera de .hero__fam, la píldora sigue prohibida.
   -------------------------------------------------------------- */
.hero__fam {
  display: flex; flex-wrap: wrap; gap: 8px;
  list-style: none; margin: 0 0 32px; padding: 0;
  cursor: default;
}
.hero__fam li {
  border-radius: 999px;                      /* excepción sancionada */
  border: var(--filete) solid var(--line);
  background: transparent;
  padding: 7px 15px 8px;
  font-family: var(--mono); font-size: var(--fs-cap);
  letter-spacing: var(--tr-mono); text-transform: uppercase;
  color: var(--muted); line-height: 1; white-space: nowrap;
}
.hero__fam li::before {
  content: ""; display: inline-block;
  width: 4px; height: 4px; border-radius: 999px;
  background: var(--azul); margin-right: 8px; vertical-align: 1px;
}
@media (max-width: 420px) {
  .hero__fam li { padding: 6px 12px 7px; }
  .hero__fam li::before { margin-right: 6px; }
}

.hero__trust {
  margin: 32px 0 0; padding-left: 14px; border-left: 2px solid var(--azul);
  font-family: var(--mono); font-size: var(--fs-fine); color: var(--negro);
  max-width: 56ch; line-height: 1.7;
}
.hero__pie {
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
  margin-top: clamp(32px,5vw,48px); padding-top: 18px; border-top: var(--filete) solid var(--line);
  font-family: var(--mono); font-size: var(--fs-cap); color: var(--label); letter-spacing: var(--tr-mono);
}
.hero__pie span { display: inline-flex; align-items: center; gap: 8px; }
.hero__pie b { color: var(--negro); font-weight: 400; }
.hero__pie .solo-escritorio { display: none; }
@media (min-width: 1024px) { .hero__pie .solo-escritorio { display: inline-flex; } }

@media (min-width: 1024px) {
  .hero { min-height: 100svh; display: block; }
  .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; order: 0; background: transparent; }
  .hero__video video { object-position: right bottom; }
  .hero__scrim {
    display: block; position: absolute; inset: 0; z-index: 1;
    background:
      linear-gradient(97deg, #fff 0%, #fff 40%, rgba(255,255,255,.94) 52%, rgba(255,255,255,.55) 66%, rgba(255,255,255,0) 82%),
      linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 22%);
  }
  .hero__in {
    min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
    padding-top: var(--nav-h); padding-bottom: 32px;
  }
}

/* ============================================================
   RESALTADO AZUL (I-02 del brandbook)
   ============================================================ */
.hl { position: relative; display: inline-block; white-space: nowrap; }
.hl__top {
  position: absolute; left: -.16em; top: -.05em; width: 100%; box-sizing: content-box;
  padding: .05em .16em; border-radius: var(--radio-xs);
  background: var(--azul); color: var(--blanco); pointer-events: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .52s var(--curva);
}
.hl.is-on .hl__top { clip-path: inset(0 0 0 0); }
/* La copia resaltada hereda el blanco aunque lleve <strong> dentro */
.hl__top strong, .hl__top b, .hl__top em { color: inherit; }

/* Variante lenta — para textos de cierre, donde el barrido acompaña la lectura */
/* El resaltado se sale .16em por la derecha: se le devuelve el espacio
   para que no se coma la separación con la palabra siguiente. */
.hl--lento { white-space: normal; margin-right: .2em; }
.hl--lento .hl__top { transition-duration: 1.15s; }

/* ============================================================
   PALABRA CLAVE — subrayado, nunca color de texto
   ============================================================ */
.kw {
  font-weight: 500; color: var(--negro);
  text-decoration: underline; text-decoration-color: var(--azul);
  text-decoration-thickness: 2px; text-underline-offset: 3px;
  text-decoration-skip-ink: auto;
  transition: text-decoration-color .16s ease;
}

/* ============================================================
   REJILLA DE MÓDULOS — filete compartido, ángulo recto
   Estado de cursor: solo color, 160 ms. Sin desplazamiento,
   sin escala y sin sombra, como fija el brandbook §16.
   ============================================================ */
.rejilla { display: grid; gap: var(--filete); background: var(--line); border: var(--filete) solid var(--line); }
.rejilla > * { background: var(--blanco); transition: background-color .16s ease; }
.seccion--gris .rejilla { background: rgba(0,0,0,.16); border-color: rgba(0,0,0,.16); }
.seccion--gris .rejilla > * { background: var(--gris); }
.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(min(300px,100%), 1fr)); }
.rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(min(280px,100%), 1fr)); }
.rejilla--4 { grid-template-columns: repeat(auto-fit, minmax(min(260px,100%), 1fr)); }

/* Problemas */
.prob { padding: clamp(22px,2.6vw,30px); display: flex; flex-direction: column; gap: 12px; }
.prob b { font-family: var(--mono); font-size: clamp(15px,1.8vw,18px); color: var(--azul); font-weight: 600; letter-spacing: .06em; line-height: 1; transition: color .16s ease; }
.prob p { margin: 0; font-size: clamp(15px,1.7vw,17px); line-height: 1.5; }
.rejilla > .prob:hover { background: var(--hover-blanco); }
.seccion--gris .rejilla > .prob:hover { background: var(--hover-gris); }
.rejilla > .prob:hover b { color: var(--negro); }

/* Servicios */
.svc { padding: clamp(24px,3vw,34px); display: flex; flex-direction: column; gap: 14px; min-height: 100%; }
.svc__n { font-family: var(--mono); font-size: var(--fs-cap); color: var(--azul); letter-spacing: var(--tr-mono); }
.svc__t { font-size: clamp(20px,2.2vw,23px); font-weight: 500; letter-spacing: -.015em; line-height: 1.15; }
.svc__d { margin: 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; }
.svc__lista { margin: auto 0 0; padding: 16px 0 0; border-top: var(--filete) solid var(--line-2); list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.svc__lista li {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: var(--tr-mono); text-transform: uppercase;
  color: var(--label); padding: 5px 9px; border-radius: var(--radio-s);
  box-shadow: inset 0 0 0 var(--filete) var(--line);
}

/* Método */
.paso { padding: clamp(24px,3vw,34px); display: flex; flex-direction: column; gap: 12px; border-top: 2px solid var(--negro); }
.paso.is-clave { border-top-color: var(--azul); }
.paso__n { font-family: var(--mono); font-size: var(--fs-cap); color: var(--label); letter-spacing: var(--tr-mono); }
.paso.is-clave .paso__n { color: var(--azul); }
.paso__t { font-size: clamp(21px,2.4vw,26px); font-weight: 500; letter-spacing: -.02em; }
.paso__d { margin: 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; }
.paso__rec { margin: auto 0 0; padding-top: 16px; border-top: var(--filete) solid var(--line-2); }
.paso__rec span { display: block; font-size: 11px; font-weight: 500; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--label); margin-bottom: 5px; }
.paso__rec p { margin: 0; font-size: var(--fs-fine); color: var(--negro); line-height: 1.5; }

/* Compromisos */
.comp { padding: clamp(22px,2.6vw,30px); display: flex; flex-direction: column; gap: 10px; }
.comp b { font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.comp p { margin: 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; }
.rejilla > .comp:hover { background: var(--hover-blanco); }
.seccion--gris .rejilla > .comp:hover { background: var(--hover-gris); }

/* Filtro sí / no */
.filtro { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px,100%),1fr)); gap: clamp(28px,4vw,56px); }
.filtro__col h3 {
  margin: 0 0 20px; padding-bottom: 14px; border-bottom: var(--filete) solid var(--line-str);
  font-size: var(--fs-cap); font-weight: 500; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--label);
}
.filtro__col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.filtro__col li { font-size: clamp(15px,1.7vw,16px); line-height: 1.55; padding-left: 22px; position: relative; }
.filtro__col li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 10px; height: var(--filete); background: var(--azul);
}
.filtro--no li { color: var(--muted); }
.filtro--no li::before { background: var(--line-str); }

/* Cierre */
.cierre { text-align: left; }
.cierre__h { font-size: clamp(32px, 6vw, 62px); font-weight: 500; letter-spacing: -.03em; line-height: 1.02; margin: 0 0 24px; max-width: 16ch; text-wrap: balance; }
.cierre__p { font-size: clamp(16px,1.9vw,19px); color: var(--muted); max-width: 48ch; margin: 0 0 36px; line-height: 1.55; }
.canales { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 36px; padding-top: 24px; border-top: var(--filete) solid var(--line-str); font-family: var(--mono); font-size: var(--fs-fine); color: var(--muted); }
.canales a { color: var(--negro); text-decoration: none; box-shadow: inset 0 -1px 0 var(--line-str); }
.canales a:hover { color: var(--azul); box-shadow: inset 0 -2px 0 var(--azul); }

/* Cierre de página interna — mismo cierre, sin estilo suelto en el HTML */
.cierre--pag {
  margin-top: clamp(56px,7vw,88px); padding-top: clamp(40px,5vw,56px);
  border-top: var(--filete) solid var(--negro);
}
.cierre--pag .cierre__h { font-size: clamp(28px,4.4vw,44px); max-width: 22ch; }

/* ============================================================
   PIE — la marca en grande
   ============================================================ */
.pie { background: var(--gris); padding-top: clamp(56px,7vw,88px); }
.pie .wrap { container-type: inline-size; }
/* El tamaño sale del ancho del contenedor, no de la ventana: la palabra
   ocupa siempre la misma fracción del ancho disponible. */
.pie__marca {
  font-size: 35.4cqi; line-height: .78; letter-spacing: -.035em;
  padding-bottom: clamp(16px,2vw,28px); user-select: none;
}
.pie__cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px,100%),1fr));
  gap: clamp(24px,3vw,40px);
  padding-top: clamp(32px,4vw,44px); border-top: var(--filete) solid rgba(0,0,0,.2);
}
.pie__cols h4 { margin: 0 0 14px; font-size: 11px; font-weight: 500; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--label); }
.pie__cols ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.pie__cols a, .pie__cols span { font-size: var(--fs-sm); color: #4C4E55; text-decoration: none; }
.pie__cols a { transition: color .16s ease; }
.pie__cols a:hover { color: var(--azul); }
.pie__legal {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: clamp(40px,5vw,64px); padding: 20px 0 28px; border-top: var(--filete) solid rgba(0,0,0,.2);
  font-family: var(--mono); font-size: 11px; color: var(--label); letter-spacing: .04em;
}

/* ============================================================
   POP-UP DE CONTACTO — cuatro campos y consentimiento
   ============================================================ */
.modal {
  position: fixed; inset: 0; z-index: 90; display: none;
  align-items: flex-start; justify-content: center;
  padding: clamp(12px,4vw,40px); overflow-y: auto;
  background: rgba(0,0,0,.55);
  opacity: 0; transition: opacity .2s ease;
}
.modal.is-abierto { display: flex; }
.modal.is-visible { opacity: 1; }
.modal__caja {
  position: relative; width: 100%; max-width: 660px; background: var(--blanco);
  border-radius: var(--radio-l); padding: clamp(24px,4vw,40px);
  margin: auto; box-shadow: inset 0 0 0 var(--filete) var(--line-str);
  transform: translateY(-10px); transition: transform .24s var(--curva);
}
.modal.is-visible .modal__caja { transform: none; }
.modal__x {
  position: absolute; top: 12px; right: 12px; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer; border-radius: var(--radio-s);
  font-size: 24px; line-height: 1; color: var(--muted);
  transition: background-color .16s ease, color .16s ease;
}
.modal__x:hover { background: var(--gris); color: var(--negro); }
.modal__eyebrow { font-family: var(--mono); font-size: var(--fs-cap); letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--azul); margin: 0; }
.modal__t { font-size: clamp(24px,3.2vw,32px); font-weight: 500; letter-spacing: -.025em; line-height: 1.1; margin: 12px 0 10px; padding-right: 40px; }
.modal__p { font-size: var(--fs-sm); color: var(--muted); margin: 0 0 20px; line-height: 1.6; max-width: 52ch; }

/* Hechos del primer contacto — cada línea es un dato declarado */
.modal__hechos {
  display: flex; flex-wrap: wrap; gap: 8px 0;
  margin: 0 0 26px; padding: 0; list-style: none;
  border-top: var(--filete) solid var(--line); border-bottom: var(--filete) solid var(--line);
}
.modal__hechos li {
  flex: 1 1 150px; padding: 14px 16px 14px 0;
  font-family: var(--mono); font-size: 11px; letter-spacing: var(--tr-mono);
  text-transform: uppercase; color: var(--label); line-height: 1.5;
}
.modal__hechos li b { display: block; color: var(--negro); font-weight: 500; font-size: var(--fs-cap); margin-bottom: 4px; }

.campos { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 560px) { .campos { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.campo { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.campo--ancho { grid-column: 1 / -1; }
.campo label { font-size: var(--fs-cap); font-weight: 500; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--label); }
.campo label span { color: var(--azul); }
.campo__opt { color: var(--label) !important; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: var(--fs-fine); }
.campo input, .campo textarea, .campo select {
  font-family: var(--sans); font-size: 15px; color: var(--negro);
  height: var(--h-m); padding: 0 14px; background: var(--blanco);
  border: 0; border-radius: var(--radio); box-shadow: inset 0 0 0 var(--filete) var(--line-str); width: 100%;
  transition: box-shadow .16s ease;
}

/* Selector de país — la flecha se dibuja en el propio fondo, sin
   imagen ni icono: es un ángulo, no un adorno. */
.campo select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-right: 38px;
  background-image:
    linear-gradient(45deg,  transparent 50%, var(--negro) 50%, var(--negro) calc(50% + 1.5px), transparent calc(50% + 1.5px)),
    linear-gradient(135deg, transparent calc(50% - 1.5px), var(--negro) calc(50% - 1.5px), var(--negro) 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

/* Teléfono con prefijo. El prefijo es texto real, no un adorno: un
   lector de pantalla lo anuncia antes del campo. */
.campo__tel { display: flex; align-items: stretch; min-width: 0; }
.campo__pref {
  display: inline-flex; align-items: center; flex: none;
  height: var(--h-m); padding: 0 12px;
  font-family: var(--mono); font-size: var(--fs-sm); color: var(--label);
  background: var(--gris); border-radius: var(--radio) 0 0 var(--radio);
  box-shadow: inset 0 0 0 var(--filete) var(--line-str);
  text-box: cap alphabetic;
}
.campo__tel input { border-radius: 0 var(--radio) var(--radio) 0; }

/* Campo trampa: fuera de pantalla y fuera del recorrido de teclado.
   No se oculta con display:none porque hay bots que lo detectan. */
.trampa {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0; pointer-events: none;
}
.campo textarea { height: auto; min-height: 116px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--off); }
.campo input:hover, .campo textarea:hover, .campo select:hover { box-shadow: inset 0 0 0 var(--filete) var(--negro); }
.campo input:focus, .campo textarea:focus, .campo select:focus { outline: none; box-shadow: inset 0 0 0 2px var(--azul); }
.campo.is-error input, .campo.is-error textarea, .campo.is-error select { box-shadow: inset 0 0 0 2px #B4261A; }
.campo.is-error .campo__pref { box-shadow: inset 0 0 0 2px #B4261A; }
.campo .err { font-size: var(--fs-fine); color: #B4261A; display: none; }
.campo.is-error .err { display: block; }
.campo .pista { font-size: var(--fs-fine); color: var(--muted); }

.consent { grid-column: 1 / -1; display: flex; gap: 12px; align-items: flex-start; margin-top: 4px; }
.consent input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--azul); border-radius: var(--radio-xs); }
.consent label { font-size: var(--fs-fine); color: var(--muted); line-height: 1.55; letter-spacing: 0; text-transform: none; font-weight: 400; }
.consent a { color: var(--negro); box-shadow: inset 0 -1px 0 var(--line-str); text-decoration: none; }
.consent a:hover { color: var(--azul); box-shadow: inset 0 -2px 0 var(--azul); }
.consent.is-error label { color: #B4261A; }

.modal__pie { margin-top: 26px; padding-top: 22px; border-top: var(--filete) solid var(--line); display: flex; flex-direction: column; gap: 18px; }
.modal__directo { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; font-family: var(--mono); font-size: var(--fs-cap); color: var(--muted); }
.modal__directo a { color: var(--negro); text-decoration: none; box-shadow: inset 0 -1px 0 var(--line-str); }
.modal__directo a:hover { color: var(--azul); box-shadow: inset 0 -2px 0 var(--azul); }

.modal__ok { display: none; text-align: left; }
.modal.is-ok .modal__form { display: none; }
.modal.is-ok .modal__ok { display: block; }
.modal__ok .tick { width: 48px; height: 48px; display: grid; place-items: center; background: var(--azul); color: var(--blanco); border-radius: var(--radio); margin-bottom: 20px; }
.modal__ok h3 { font-size: 24px; font-weight: 500; letter-spacing: -.02em; margin: 0 0 12px; }
.modal__ok p { font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; margin: 0 0 22px; max-width: 44ch; }

/* Marcador de dato pendiente — visible a propósito */
.pendiente {
  font-family: var(--mono); font-size: .92em; color: #8A5A00;
  background: #FFF6E0; padding: 1px 7px; border-radius: var(--radio-xs);
  box-shadow: inset 0 0 0 1px #E6C77A; overflow-wrap: anywhere;
}

/* ============================================================
   PÁGINAS LEGALES — índice fijo al costado en escritorio
   ============================================================ */
.legal { padding-top: calc(var(--nav-h) + clamp(36px,6vw,72px)); padding-bottom: clamp(64px,8vw,110px); }
.legal__head { max-width: 70ch; padding-bottom: clamp(28px,4vw,40px); border-bottom: var(--filete) solid var(--negro); margin-bottom: clamp(32px,4vw,48px); }
.legal__h1 { font-size: clamp(30px,4.6vw,48px); font-weight: 500; letter-spacing: -.028em; line-height: 1.04; margin: 14px 0 16px; }
.legal__meta { display: flex; flex-wrap: wrap; gap: 8px 24px; font-family: var(--mono); font-size: var(--fs-cap); color: var(--label); letter-spacing: var(--tr-mono); }
.legal__cuerpo { max-width: 72ch; min-width: 0; }
.legal__cuerpo h2 {
  font-size: clamp(19px,2.2vw,23px); font-weight: 500; letter-spacing: -.015em;
  margin: clamp(40px,5vw,56px) 0 14px; padding-top: 20px; border-top: var(--filete) solid var(--line);
  scroll-margin-top: calc(var(--nav-off) + 24px);
}
.legal__cuerpo h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal__cuerpo h3 { font-size: 16px; font-weight: 500; margin: 26px 0 8px; }
.legal__cuerpo p { font-size: 15px; line-height: 1.7; color: #33353B; margin: 0 0 14px; }
.legal__cuerpo ul, .legal__cuerpo ol { margin: 0 0 16px; padding-left: 20px; }
.legal__cuerpo li { font-size: 15px; line-height: 1.7; color: #33353B; margin-bottom: 8px; }
.legal__cuerpo a { color: var(--negro); box-shadow: inset 0 -1px 0 var(--line-str); text-decoration: none; }
.legal__cuerpo a:hover { color: var(--azul); box-shadow: inset 0 -2px 0 var(--azul); }
.legal__cuerpo strong { font-weight: 500; color: var(--negro); }
.legal__tabla { width: 100%; border-collapse: collapse; margin: 8px 0 20px; font-size: var(--fs-sm); }
.legal__tabla th { text-align: left; font-size: var(--fs-cap); font-weight: 500; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--label); padding: 0 16px 10px 0; border-bottom: var(--filete) solid var(--negro); }
.legal__tabla td { overflow-wrap: anywhere; padding: 12px 16px 12px 0; border-bottom: var(--filete) solid var(--line-2); vertical-align: top; line-height: 1.6; color: #33353B; }
.legal__wrap-tabla { overflow-x: auto; }

.legal__indice { margin-bottom: clamp(32px,4vw,48px); min-width: 0; }
.legal__indice ol { margin: 0; padding: 0; list-style: none; counter-reset: li; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px,100%),1fr)); gap: 0 clamp(20px,3vw,40px); border-top: var(--filete) solid var(--line-str); }
.legal__indice li { counter-increment: li; border-bottom: var(--filete) solid var(--line); }
.legal__indice a { display: flex; gap: 10px; padding: 13px 4px; font-size: var(--fs-sm); text-decoration: none; box-shadow: none; transition: color .16s ease; }
.legal__indice a::before { content: counter(li, decimal-leading-zero); font-family: var(--mono); font-size: var(--fs-cap); color: var(--azul); flex: none; }
.legal__indice a:hover { color: var(--azul); box-shadow: none; }
.legal__indice h2 {
  margin: 0 0 14px; font-size: 11px; font-weight: 500;
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--label);
}

@media (min-width: 1024px) {
  .legal__doc { display: grid; grid-template-columns: minmax(0,1fr) 268px; gap: clamp(40px,5vw,80px); align-items: start; }
  .legal__cuerpo { grid-column: 1; grid-row: 1; }
  .legal__indice {
    grid-column: 2; grid-row: 1; margin-bottom: 0;
    position: sticky; top: calc(var(--nav-off) + 24px);
    max-height: calc(100svh - var(--nav-h) - 56px); overflow-y: auto;
  }
  .legal__indice ol { grid-template-columns: 1fr; border-top-color: var(--negro); }
  .legal__indice a { padding: 11px 2px; font-size: var(--fs-fine); color: var(--muted); }
  .legal__indice a.is-actual { color: var(--negro); }
  .legal__indice li:has(a.is-actual) { box-shadow: inset 2px 0 0 var(--azul); }
  .legal__indice a.is-actual::before { color: var(--negro); }
}

/* ============================================================
   EDICIÓN 2026 — bloques nuevos del Inicio y páginas internas
   ============================================================ */

/* ---------- Migas ---------- */
.migas { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-family: var(--mono); font-size: var(--fs-cap); color: var(--label); letter-spacing: var(--tr-mono); margin-bottom: 18px; }
.migas a { color: var(--muted); text-decoration: none; transition: color .16s ease; }
.migas a:hover { color: var(--azul); }
.migas span[aria-current] { color: var(--negro); }

/* ---------- Cabecera de página interna ---------- */
.pag { padding-top: calc(var(--nav-h) + clamp(32px,5vw,64px)); padding-bottom: clamp(64px,8vw,110px); counter-reset: sub; }
.pag__head { max-width: 62ch; padding-bottom: clamp(32px,4vw,48px); border-bottom: var(--filete) solid var(--negro); margin-bottom: clamp(36px,5vw,56px); }
.pag__h1 { font-size: clamp(30px,5vw,54px); font-weight: 500; letter-spacing: -.03em; line-height: 1.04; margin: 14px 0 18px; text-wrap: balance; }
.pag__sub { font-size: clamp(16px,2vw,20px); color: var(--muted); line-height: 1.55; margin: 0 0 28px; max-width: 52ch; }
.pag__head .acciones:last-child { margin-bottom: 0; }

/* ---------- Encabezado de sección interna ----------
   Antes era una clase inexistente y las nueve páginas internas
   quedaban sin ritmo vertical: los títulos de sección salían como
   texto corrido de 16 px. Ahora es el segundo nivel real de la
   jerarquía, numerado con el orden verdadero de la página.
   -------------------------------------------------------------- */
.sub {
  display: flex; align-items: baseline; gap: clamp(12px,1.6vw,20px);
  counter-increment: sub;
  margin: clamp(56px,7vw,96px) 0 clamp(24px,3vw,36px);
  padding-top: clamp(20px,2.6vw,28px);
  border-top: var(--filete) solid var(--line-str);
  font-size: clamp(22px,2.9vw,32px); font-weight: 500;
  letter-spacing: -.022em; line-height: 1.12;
  text-wrap: balance; scroll-margin-top: calc(var(--nav-off) + 24px);
}
.sub::before {
  content: counter(sub, decimal-leading-zero);
  font-family: var(--mono); font-size: var(--fs-cap); font-weight: 400;
  letter-spacing: var(--tr-mono); color: var(--azul);
  flex: none; padding-top: .45em;
}
.pag__head + .sub { margin-top: 0; padding-top: 0; border-top: 0; }
h2.sub, h3.sub { margin-bottom: clamp(24px,3vw,36px); }

/* ---------- Bloque 4 · Evidencia ---------- */
.ev { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px,100%),1fr)); gap: var(--filete);
  background: var(--line); border: var(--filete) solid var(--line); }
.ev > * { background: var(--blanco); padding: clamp(22px,2.6vw,30px); }
.seccion--gris .ev { background: rgba(0,0,0,.16); border-color: rgba(0,0,0,.16); }
.seccion--gris .ev > * { background: var(--gris); }
.ev__linea { display: flex; gap: 12px; align-items: baseline; padding: 11px 0; border-bottom: var(--filete) solid var(--line-2); }
.ev__linea:last-child { border-bottom: 0; padding-bottom: 0; }
.ev__linea b { font-size: 11px; font-weight: 500; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--label); flex: none; width: 96px; }
.ev__linea.is-clave b { color: var(--azul); }
.ev__linea span { font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }
.ev__t { font-size: 19px; font-weight: 500; letter-spacing: -.01em; margin: 0 0 16px; }
.ev__vacio { display: flex; flex-direction: column; gap: 14px; }
.ev__vacio p { margin: 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; }
.ev__vacio p b { color: var(--negro); font-weight: 500; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.lbl { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px;
  letter-spacing: var(--tr-mono); text-transform: uppercase; padding: 7px 10px; border-radius: var(--radio-s); line-height: 1; }
.lbl--real { background: var(--negro); color: var(--blanco); }
.lbl--propio { background: var(--blanco); color: var(--negro); box-shadow: inset 0 0 0 var(--filete) var(--negro); }
.lbl--demo { background: var(--blanco); color: var(--muted); box-shadow: inset 0 0 0 var(--filete) var(--line-str); }

/* ---------- Bloque 7 · Post-entrega ---------- */
.entrega { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px,100%),1fr)); gap: clamp(24px,3vw,40px); }
.entrega__i { border-top: 2px solid var(--negro); padding-top: 16px; transition: border-color .16s ease; }
.entrega__i.is-opcional { border-top-color: var(--line-str); }
.entrega__i b { display: block; font-size: 18px; font-weight: 500; letter-spacing: -.01em; margin-bottom: 8px; }
.entrega__i p { margin: 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; }
.entrega__i:hover { border-top-color: var(--azul); }
.entrega__i a { color: var(--negro); }
.entrega__i a:hover { color: var(--azul); }

/* ---------- Bloque 8 · Personas ---------- */
.persona { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap;
  padding: clamp(22px,2.6vw,28px); box-shadow: inset 0 0 0 var(--filete) var(--line-str); border-radius: var(--radio); background: var(--blanco); }
.seccion--gris .persona { background: var(--blanco); }
.persona__foto { width: 72px; height: 72px; flex: none; border-radius: var(--radio); background: var(--gris);
  display: grid; place-items: center; font-family: var(--mono); font-size: 10px; color: var(--label); text-align: center; padding: 6px; }
.persona__d { flex: 1 1 240px; min-width: 0; }
.persona__d b { display: block; font-size: 17px; font-weight: 500; }
.persona__d span { display: block; font-size: var(--fs-sm); color: var(--muted); margin-top: 3px; }
.persona__d p { margin: 12px 0 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; }

/* ---------- Señales / listas de servicio ---------- */
.senales { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px,100%),1fr)); gap: 0 clamp(24px,3vw,48px); border-top: var(--filete) solid var(--line-str); }
.senales li { border-bottom: var(--filete) solid var(--line); padding: 16px 12px 16px 0; font-size: clamp(15px,1.7vw,17px); line-height: 1.5; display: flex; gap: 12px; transition: background-color .16s ease; }
.senales li::before { content: "—"; color: var(--azul); flex: none; font-family: var(--mono); transition: color .16s ease; }
.senales li:hover { background: var(--hover-blanco); }
.senales li:hover::before { color: var(--negro); }

/* ---------- Capa técnica plegada ---------- */
.tecnica { margin-top: clamp(32px,4vw,48px); border-top: var(--filete) solid var(--line-str); }
.tecnica summary { list-style: none; cursor: pointer; padding: 18px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-family: var(--mono); font-size: var(--fs-cap); letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--label);
  transition: color .16s ease; }
.tecnica summary::-webkit-details-marker { display: none; }
.tecnica summary:hover { color: var(--negro); }
.tecnica summary .mas { font-size: 18px; line-height: 1; color: var(--azul); transition: transform .2s var(--curva); }
.tecnica[open] summary .mas { transform: rotate(45deg); }
.tecnica__c { padding: 0 0 24px; font-size: var(--fs-sm); color: var(--muted); line-height: 1.7; max-width: 68ch; }
.tecnica__c b { color: var(--negro); font-weight: 500; }

/* ---------- Tabla de dos columnas para «qué recibes» ---------- */
.tbl-wrap { overflow-x: auto; }
.recibes { width: 100%; border-collapse: collapse; min-width: 480px; }
.recibes td { padding: 18px 20px 18px 0; border-bottom: var(--filete) solid var(--line); vertical-align: top; font-size: var(--fs-sm); line-height: 1.6; color: var(--muted); transition: color .16s ease; }
.recibes tr:first-child td { border-top: var(--filete) solid var(--negro); }
.recibes td:first-child { width: 34%; color: var(--negro); font-weight: 500; font-size: 16px; }
.recibes tr:hover td { color: var(--negro); }

/* ---------- Aviso de riesgo ---------- */
.riesgo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px,100%),1fr)); gap: var(--filete); background: var(--line); border: var(--filete) solid var(--line); }
.riesgo > div { background: var(--blanco); padding: clamp(22px,2.6vw,30px); transition: background-color .16s ease; }
.riesgo > div:hover { background: var(--hover-blanco); }
.seccion--gris .riesgo { background: rgba(0,0,0,.16); border-color: rgba(0,0,0,.16); }
.seccion--gris .riesgo > div { background: var(--gris); }
.riesgo b { display: block; font-size: 17px; font-weight: 500; letter-spacing: -.01em; margin-bottom: 10px; }
.riesgo p { margin: 0 0 10px; font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; }
.riesgo p:last-child { margin-bottom: 0; }
.riesgo .cita { margin-top: 14px; padding-left: 12px; border-left: 2px solid var(--azul); font-size: var(--fs-sm); color: var(--negro); line-height: 1.5; }

/* ---------- Temas editoriales ---------- */
.temas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px,100%),1fr)); gap: var(--filete); background: var(--line); border: var(--filete) solid var(--line); }
.temas > article { background: var(--blanco); padding: clamp(22px,2.6vw,30px); display: flex; flex-direction: column; gap: 12px; transition: background-color .16s ease; }
.temas > article:hover { background: var(--hover-blanco); }
.temas b { font-size: 18px; font-weight: 500; letter-spacing: -.01em; }
.temas ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.temas li { font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; padding-left: 14px; position: relative; }
.temas li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: var(--filete); background: var(--line-str); transition: background-color .16s ease; }
.temas > article:hover li::before { background: var(--azul); }

/* ---------- Firma de marca en el pie ---------- */
.pie__firma { margin-top: clamp(28px,4vw,40px); padding-top: 24px; border-top: var(--filete) solid rgba(0,0,0,.2);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: baseline; }
.pie__firma .fr { font-family: var(--editorial); font-size: clamp(22px,3vw,30px); letter-spacing: -.01em; color: var(--negro); }
.pie__firma .fr i { font-style: italic; color: var(--azul); }
.pie__firma .po { font-family: var(--mono); font-size: var(--fs-cap); color: var(--label); letter-spacing: var(--tr-mono); text-transform: uppercase; }

/* ---------- Índice de servicios en la portada de Servicios ---------- */
.svc-lista { display: grid; gap: var(--filete); background: var(--line); border: var(--filete) solid var(--line); }
.svc-lista > a { background: var(--blanco); padding: clamp(24px,3vw,36px); text-decoration: none; color: inherit;
  display: grid; grid-template-columns: 56px 1fr auto; gap: 20px; align-items: start; transition: background-color .16s ease; }
.svc-lista > a:hover { background: var(--gris); color: inherit; }
.svc-lista .n { font-family: var(--mono); font-size: var(--fs-cap); color: var(--azul); letter-spacing: var(--tr-mono); padding-top: 6px; }
.svc-lista .t { display: block; font-size: clamp(20px,2.4vw,26px); font-weight: 500; letter-spacing: -.02em; line-height: 1.15; }
.svc-lista .d { display: block; margin: 10px 0 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; max-width: 56ch; }
.svc-lista .ar { font-size: 20px; color: var(--azul); padding-top: 4px; transition: transform .16s ease; }
.svc-lista > a:hover .ar { transform: translateX(5px); }
@media (max-width: 640px) { .svc-lista > a { grid-template-columns: 1fr; gap: 10px; } .svc-lista .ar { display: none; } }

/* ---------- Canal directo — mismo peso visual que el formulario ---------- */
.canal { display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
  border-top: 2px solid var(--negro); padding-top: 16px; transition: border-color .16s ease; }
.canal:hover { border-top-color: var(--azul); }
.canal.is-declarado { border-top-color: var(--line-str); }
.canal b { font-size: 18px; font-weight: 500; letter-spacing: -.01em; }
.canal p { margin: 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; }
.canal .btn { margin-top: 4px; }

/* ============================================================
   RECORTE DE CAJA TIPOGRÁFICA (benchmark §3.4)
   `text-box: cap alphabetic` quita el espacio muerto que la
   fuente reserva sobre las mayúsculas y bajo la línea base, de
   modo que la caja coincide con las letras que se ven. Es lo que
   permite alinear una etiqueta mono con un filete sin corregir a
   ojo con márgenes.

   Chrome/Edge 133+ y Safari 18.4+. Firefox todavía no: degrada
   solo, se ve como antes. Por eso las compensaciones a ojo solo
   se retiran dentro de @supports — donde no hay recorte, siguen
   haciendo falta.
   ============================================================ */
.pie__marca,
.svc-lista .n, .svc-lista .t,
.prob b, .svc__n, .paso__n,
.modal__eyebrow, .pie__firma .po { text-box: cap alphabetic; }

@supports (text-box: cap alphabetic) {
  /* Con el recorte, los tres elementos de la fila de servicios
     apoyan en la misma altura de mayúscula: sobran los píxeles
     que los empujaban hacia abajo. */
  .svc-lista .n  { padding-top: 0; }
  .svc-lista .ar { padding-top: 0; }
  /* El logotipo del pie ya no necesita que .78 haga de recorte. */
  .pie__marca    { line-height: .82; }
}

/* ============================================================
   HERRAMIENTAS — logotipo y nombre, en escala de grises
   Las marcas son rutas SVG en línea: ni un archivo, ni una
   petición, ni un tercero. Se pintan con currentColor, así que el
   estado de cursor es solo color, como fija §16.
   ============================================================ */
.herr {
  list-style: none; margin: 0; padding: var(--filete);
  display: grid; gap: var(--filete);
  grid-template-columns: repeat(auto-fill, minmax(min(158px,100%), 1fr));
}
/* El filete lo dibuja cada celda con un anillo que no ocupa espacio:
   los anillos se solapan en el hueco y se leen como una sola línea.
   Con un fondo de rejilla, la última fila incompleta dejaba un vacío
   gris; así no queda nada donde no hay celda. */
.herr__i {
  background: var(--blanco);
  box-shadow: 0 0 0 var(--filete) var(--line);
  padding: 20px clamp(14px,1.6vw,20px) 18px;
  display: flex; flex-direction: column; gap: 12px;
  transition: background-color .16s ease;
}
.herr__i:hover { background: var(--hover-blanco); }

.herr__logo {
  width: 26px; height: 26px; flex: none;
  color: var(--off); fill: currentColor;
  transition: color .16s ease;
}
.herr__i:hover .herr__logo { color: var(--negro); }

/* Hueco de la marca que no se puede redistribuir: la muesca del
   sistema, no una inicial inventada. El nombre identifica. */
.herr__logo--vacio {
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 var(--filete) var(--line-str);
}
.herr__logo--vacio::before {
  content: ""; width: 9px; height: 9px;
  background: currentColor; display: block;
}

.herr__n {
  font-size: 15px; font-weight: 500; letter-spacing: -.01em;
  color: var(--negro); line-height: 1.2;
}
.herr__f {
  font-family: var(--mono); font-size: 11px; letter-spacing: var(--tr-mono);
  text-transform: uppercase; color: var(--label);
  text-box: cap alphabetic; margin-top: auto; padding-top: 4px;
}
.herr__i:hover .herr__f { color: var(--negro); }

/* ============================================================
   CALCULADORA DEL COSTO DEL TRABAJO MANUAL
   Ángulo recto, filete compartido y cifras en monoespaciada: la
   mono aquí es DATO, no etiqueta, y por eso va grande. Sin color
   de alarma, sin flechas hacia arriba, sin porcentajes inventados.
   ============================================================ */
.calc {
  margin-top: clamp(40px, 5vw, 56px);
  border: var(--filete) solid var(--line-str);
  border-radius: var(--radio-0);
  background: var(--blanco);
}
.seccion--gris .calc { border-color: rgba(0,0,0,.22); }
.calc__head { padding: clamp(24px,3vw,34px) clamp(24px,3vw,34px) 0; max-width: 64ch; }
.calc__eyebrow {
  font-family: var(--mono); font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--azul);
  margin: 0 0 12px; text-box: cap alphabetic;
}
.calc__t { font-size: clamp(22px,2.8vw,30px); font-weight: 500; letter-spacing: -.02em; line-height: 1.15; margin: 0 0 12px; }
.calc__p { margin: 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; }

.calc__campos {
  display: grid; gap: var(--filete); background: var(--line);
  border-block: var(--filete) solid var(--line);
  margin-top: clamp(24px,3vw,32px);
  grid-template-columns: repeat(auto-fit, minmax(min(240px,100%), 1fr));
}
.calc__campo {
  background: var(--blanco); padding: 18px clamp(20px,2.4vw,28px) 20px;
  display: flex; flex-direction: column; gap: 8px;
  transition: background-color .16s ease;
}
.calc__campo:focus-within { background: var(--hover-blanco); }
.calc__campo > span {
  font-size: var(--fs-fine); font-weight: 500; letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--label);
}
.calc__campo input {
  font-family: var(--mono); font-size: clamp(20px,2.4vw,26px); font-weight: 500; color: var(--negro);
  border: 0; background: transparent; padding: 0; width: 100%;
  border-bottom: 2px solid var(--line-str); border-radius: var(--radio-0);
  transition: border-color .16s ease;
  text-box: cap alphabetic;
}
.calc__campo input:hover  { border-bottom-color: var(--negro); }
.calc__campo input:focus  { outline: none; border-bottom-color: var(--azul); }

.calc__salida {
  display: grid; gap: var(--filete); background: var(--line);
  grid-template-columns: repeat(auto-fit, minmax(min(240px,100%), 1fr));
  border-bottom: var(--filete) solid var(--line);
}
.calc__dato { background: var(--blanco); padding: clamp(20px,2.6vw,28px) clamp(20px,2.4vw,28px); }
.calc__dato b {
  display: block; font-family: var(--mono); font-weight: 600;
  font-size: clamp(30px,5vw,52px); letter-spacing: -.02em; line-height: 1;
  color: var(--negro); text-box: cap alphabetic;
  font-variant-numeric: tabular-nums;
}
.calc__dato--clave b { color: var(--azul); }
.calc__dato span { display: block; margin-top: 10px; font-size: var(--fs-sm); color: var(--muted); }

.calc__formula {
  margin: 0; padding: 18px clamp(24px,3vw,34px);
  font-size: var(--fs-fine); color: var(--muted); line-height: 1.65;
  border-bottom: var(--filete) solid var(--line);
}
.calc__formula b { color: var(--negro); font-weight: 500; }

.calc__acciones {
  padding: clamp(20px,2.6vw,26px) clamp(24px,3vw,34px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
}
.calc__nota { font-size: var(--fs-fine); color: var(--muted); }

@media (max-width: 560px) {
  .calc__campos, .calc__salida { grid-template-columns: 1fr; }
}

/* ============================================================
   ÁREA PULSABLE
   El texto no cambia de tamaño; lo que crece es la superficie que
   recoge el dedo. Medido antes: 14-18 px de alto en pie, miga y
   botones de subrayado. La referencia cómoda en táctil es 44 px y
   el mínimo exigible 24 px.
   ============================================================ */
.pie__cols a, .pie__cols span { display: inline-block; padding-block: 5px; }
.pie__cols ul { gap: 2px; }
.miga a { display: inline-block; padding-block: 4px; }
.btn--subrayado { padding: 6px 0 9px; }
.modal__directo a, .canales a, .menu__directo a { display: inline-block; padding-block: 5px; }
.btn--flecha { min-height: 28px; padding-block: 6px; }
.legal__indice a { padding-block: 14px; }

/* ============================================================
   MARCO FIJO — passe-partout de la marca (benchmark §3.1)
   Seis líneas, sin JavaScript, ángulo recto y un solo color.
   El contenido pasa por dentro; el marco no captura el cursor.
   Va por encima de la cabecera y del pop-up, y por debajo del
   enlace de salto, que tiene que ser siempre alcanzable.
   ============================================================ */
body { padding: var(--marco); }

.marco {
  position: fixed; inset: 0; z-index: 95; pointer-events: none;
  border: var(--marco) solid var(--marco-color);
}

/* ============================================================
   PIE QUE SE REVELA (benchmark §3.2)
   El pie queda fijo al fondo y el contenido, con un margen
   inferior igual a su altura, se despega al final y lo descubre.
   No hay listener de scroll.

   Por defecto el pie es un pie normal: la clase .pie-revela la
   pone el script, igual que .rv y .nota--anim. Sin JavaScript no
   se solapa nada. El script también lo desactiva cuando el pie
   no cabe en pantalla o el ancho es de móvil.
   ============================================================ */
body.pie-revela main {
  position: relative; z-index: 2;
  background: var(--blanco);
  margin-bottom: var(--pie-h, 0px);
}
body.pie-revela .pie {
  position: fixed; inset: auto var(--marco) var(--marco); z-index: 1;
}

/* ============================================================
   SECCIÓN AZUL — un solo bloque de la página, nunca dos
   Fondo #2508FF, texto blanco y palabra clave subrayada en
   negro: la paleta oscura de la marca sobre el azul de la marca.
   Blanco sobre azul = 8,2:1. El subrayado negro es decoración
   de énfasis, no portador de información.
   ============================================================ */
.seccion--azul .sec-idx        { color: rgba(255,255,255,.74); }
.seccion--azul .sec-idx b      { color: var(--blanco); font-weight: 600; }
.seccion--azul .sec-idx i      { background: rgba(255,255,255,.48); }
.seccion--azul .sec-title      { color: var(--blanco); }
.seccion--azul .sec-intro      { color: rgba(255,255,255,.88); }

.seccion--azul .rejilla        { background: rgba(255,255,255,.30); border-color: rgba(255,255,255,.30); }
.seccion--azul .rejilla > *    { background: var(--azul); }
.seccion--azul .prob b         { color: var(--blanco); }
.seccion--azul .prob p         { color: var(--blanco); }

/* Estado de casilla: se invierte entera. Fondo blanco y letra azul.
   La palabra clave pasa a subrayado azul, porque sobre blanco el
   subrayado blanco desaparecería. Sigue siendo solo color, 160 ms. */
.seccion--azul .rejilla > .prob:hover     { background: var(--blanco); }
.seccion--azul .rejilla > .prob:hover b,
.seccion--azul .rejilla > .prob:hover p   { color: var(--azul); }
.seccion--azul .rejilla > .prob:hover .kw { color: var(--azul); text-decoration-color: var(--azul); }

/* Los filetes van de blanco velado a blanco pleno, como los canales:
   del estado débil al fuerte. En esta sección no queda ningún negro. */
.seccion--azul .entrega__i         { border-top-color: rgba(255,255,255,.62); }
.seccion--azul .entrega__i b       { color: var(--blanco); font-weight: 600; }
.seccion--azul .entrega__i p       { color: rgba(255,255,255,.88); }
.seccion--azul .entrega__i:hover   { border-top-color: var(--blanco); }
.seccion--azul .entrega__i a       { color: var(--blanco); box-shadow: inset 0 -1px 0 rgba(255,255,255,.55); }
.seccion--azul .entrega__i a:hover { color: var(--blanco); box-shadow: inset 0 -2px 0 var(--blanco); }

.seccion--azul .nota           { color: rgba(255,255,255,.88); }
.seccion--azul .nota::before   { background: var(--blanco); }
.seccion--azul .nota strong    { color: var(--blanco); font-weight: 600; }

.seccion--azul .kw             { color: var(--blanco); text-decoration-color: var(--blanco); }
.seccion--azul .hl__top        { background: var(--blanco); color: var(--azul); }

.seccion--azul .btn--contorno  { color: var(--blanco); border-color: var(--blanco); }
.seccion--azul .btn--contorno:hover { background: var(--blanco); color: var(--azul); }

/* El índice lateral pasa por encima de la sección: sobre azul se invierte */

/* ============================================================
   MOVIMIENTO REDUCIDO E IMPRESIÓN
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
  .hl__top { clip-path: inset(0 0 0 0) !important; }
  .nota::before { transform: scaleY(1) !important; transition: none !important; }
  .caret { display: none !important; }
  .rv { opacity: 1 !important; transform: none !important; }
  .modal { opacity: 1 !important; }
  .modal__caja { transform: none !important; }
}

@media print {
  .nav, .menu, .modal, .hero__video, .hero__scrim, .saltar, .marco { display: none !important; }
  body { padding: 0 !important; }
  body.pie-revela main { margin-bottom: 0 !important; }
  body.pie-revela .pie { position: static !important; }
  body { color: #000; }
  .seccion { padding-block: 14mm; break-inside: avoid; }
  .pie__marca { font-size: 60pt; }
  .rv { opacity: 1 !important; transform: none !important; }
  .sub { break-after: avoid; }
  .legal__doc { display: block !important; }
  .legal__indice { position: static !important; max-height: none !important; }
  a { text-decoration: none; box-shadow: none; }
}