/* Capa del sitio sobre los tokens de marca (tokens.css). Las pantallas traen sus estilos en línea desde el diseño. */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #ffffff; color: #1a1d23; font-family: 'Barlow', system-ui, sans-serif; }
img, svg { max-width: 100%; }

/* Pantallas con versión de escritorio y de móvil: el servidor manda las dos y aquí se muestra una. */
.hd-v-mob { display: none; }
@media (max-width: 767px) {
  .hd-v-desk { display: none; }
  .hd-v-mob { display: block; }
}

/* Pantallas internas más anchas que la ventana (manual, piezas de redes, admin): desplazamiento horizontal propio. */
.hd-type-admin .hd-v-only, .hd-type-brand .hd-v-only { overflow-x: auto; }

/* Teléfono (por debajo de 768 px).
   1. Pantallas con diseño móvil propio: el marco del lienzo (375 px fijos) pasa a ocupar la pantalla y la barra
      inferior queda fija.
   2. Pantallas sin diseño móvil (handoff 03, "Lo que falta por dibujar"): la cabecera de escritorio se cambia por la
      de Inicio · móvil, los títulos grandes bajan de tamaño, las filas pasan a varias líneas y lo ancho se ajusta.
      Nada se corta: si algo se sale, la prueba de desbordamiento lo detecta. */
.hd-m-chrome { display: none !important; }
@media (max-width: 767px) {
  .hd-v-mob > div[style*="width: 375px"], .hd-v-native > div[style*="width: 375px"] { width: 100% !important; height: auto !important; overflow: visible !important; }
  .hd-v-mob nav[aria-label="Principal"][style*="position: absolute"] { position: fixed !important; z-index: 50; }
  body { padding-bottom: 96px; }

  header.hd-m-chrome { display: flex !important; }
  nav.hd-m-chrome { display: grid !important; }
  .hd-v-only [data-dc-import="Header"] { display: none !important; }

  .hd-v-only [style*="font-size: 40px"], .hd-v-only [style*=" 40px 'Barlow"] { font-size: 30px !important; }
  .hd-v-only [style*="font-size: 44px"], .hd-v-only [style*=" 44px 'Barlow"] { font-size: 32px !important; }
  .hd-v-only [style*="font-size: 46px"], .hd-v-only [style*=" 46px 'Barlow"] { font-size: 32px !important; }
  .hd-v-only [style*="font-size: 48px"], .hd-v-only [style*=" 48px 'Barlow"] { font-size: 34px !important; }
  .hd-v-only [style*="font-size: 54px"], .hd-v-only [style*=" 54px 'Barlow"] { font-size: 38px !important; }
  .hd-v-only [style*="font-size: 56px"], .hd-v-only [style*=" 56px 'Barlow"] { font-size: 38px !important; }
  .hd-v-only [style*="font-size: 64px"], .hd-v-only [style*=" 64px 'Barlow"] { font-size: 40px !important; }
  .hd-v-only [style*="font-size: 66px"], .hd-v-only [style*=" 66px 'Barlow"] { font-size: 40px !important; }
  .hd-v-only [style*="font-size: 72px"], .hd-v-only [style*=" 72px 'Barlow"] { font-size: 42px !important; }
  .hd-v-only [style*="font-size: 74px"], .hd-v-only [style*=" 74px 'Barlow"] { font-size: 42px !important; }
  .hd-v-only [style*="font-size: 76px"], .hd-v-only [style*=" 76px 'Barlow"] { font-size: 42px !important; }
  .hd-v-only [style*="font-size: 86px"], .hd-v-only [style*=" 86px 'Barlow"] { font-size: 46px !important; }
  .hd-v-only [style*="font-size: 88px"], .hd-v-only [style*=" 88px 'Barlow"] { font-size: 46px !important; }
  .hd-v-only [style*="font-size: 92px"], .hd-v-only [style*=" 92px 'Barlow"] { font-size: 46px !important; }
  .hd-v-only [style*="font-size: 96px"], .hd-v-only [style*=" 96px 'Barlow"] { font-size: 48px !important; }
  .hd-v-only [style*="font-size: 110px"], .hd-v-only [style*=" 110px 'Barlow"] { font-size: 52px !important; }
  .hd-v-only [style*="font-size: 260px"], .hd-v-only [style*=" 260px 'Barlow"] { font-size: 120px !important; }
  .hd-v-only [style*="font-size: 380px"], .hd-v-only [style*=" 380px 'Barlow"] { font-size: 150px !important; }
  .hd-v-only [style*="font-size: 420px"], .hd-v-only [style*=" 420px 'Barlow"] { font-size: 160px !important; }
  .hd-v-only [style*="; width: 340px"], .hd-v-only [style^="width: 340px"], .hd-v-only [style*="; width: 360px"], .hd-v-only [style^="width: 360px"], .hd-v-only [style*="; width: 380px"], .hd-v-only [style^="width: 380px"], .hd-v-only [style*="; width: 444px"], .hd-v-only [style^="width: 444px"], .hd-v-only [style*="; width: 460px"], .hd-v-only [style^="width: 460px"], .hd-v-only [style*="; width: 520px"], .hd-v-only [style^="width: 520px"], .hd-v-only [style*="; width: 560px"], .hd-v-only [style^="width: 560px"], .hd-v-only [style*="; width: 620px"], .hd-v-only [style^="width: 620px"], .hd-v-only [style*="; width: 640px"], .hd-v-only [style^="width: 640px"], .hd-v-only [style*="; width: 680px"], .hd-v-only [style^="width: 680px"], .hd-v-only [style*="; width: 720px"], .hd-v-only [style^="width: 720px"], .hd-v-only [style*="; width: 728px"], .hd-v-only [style^="width: 728px"], .hd-v-only [style*="; width: 760px"], .hd-v-only [style^="width: 760px"], .hd-v-only [style*="; width: 820px"], .hd-v-only [style^="width: 820px"], .hd-v-only [style*="; width: 860px"], .hd-v-only [style^="width: 860px"], .hd-v-only [style*="; width: 880px"], .hd-v-only [style^="width: 880px"], .hd-v-only [style*="; width: 900px"], .hd-v-only [style^="width: 900px"], .hd-v-only [style*="; width: 960px"], .hd-v-only [style^="width: 960px"], .hd-v-only [style*="; width: 970px"], .hd-v-only [style^="width: 970px"], .hd-v-only [style*="; width: 1100px"], .hd-v-only [style^="width: 1100px"], .hd-v-only [style*="; width: 1180px"], .hd-v-only [style^="width: 1180px"], .hd-v-only [style*="; width: 1320px"], .hd-v-only [style^="width: 1320px"] { max-width: 100% !important; }
  .hd-v-only [style*="padding: 0 40px"] { padding-left: 16px !important; padding-right: 16px !important; }
  .hd-v-only [style*="display: flex"]:not([class]):not(a) { flex-wrap: wrap; }
  .hd-v-only [style*="grid-template-columns"]:not([role="table"]) { grid-template-columns: 1fr !important; }
  .hd-v-only figure, .hd-v-only figcaption { max-width: 100%; overflow-wrap: anywhere; }
  /* Ningún bloque más ancho que la pantalla; las tablas se desplazan dentro de su caja. La cinta de marcadores
     (.hd-track) y los íconos SVG quedan como están. */
  .hd-v-only *:not(.hd-track):not(.hd-track *):not(table):not(table *):not(svg):not(svg *) { max-width: 100%; min-width: 0; box-sizing: border-box; }
  .hd-v-only table { display: block; overflow-x: auto; max-width: 100%; }
  .hd-v-only figure { width: 100%; }
  .hd-v-only h1, .hd-v-only h2 { overflow-wrap: anywhere; }
}

/* Foco de teclado visible (01-marca-y-sistema.md, sección 11). */
:focus-visible { outline: 2px solid #c2410c; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}