/* ============================================================================
   Decálogo de unidades a gas natural · NATGAS
   Identidad conforme al Brand Book NATGAS: fondos claros, y el logotipo en su
   versión en negativo sobre la banda azul. Archivos oficiales, sin recrear.
   Todo par texto/fondo está verificado a WCAG 2.1 AA.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700&display=swap');

:root {
  /* --- Colores tomados del archivo oficial del logotipo --- */
  --azul:   #007BBE;
  --verde:  #00B33A;

  /* --- Derivados accesibles ----------------------------------------------
     Los de marca no llegan a 4.5:1 como texto ni como fondo de texto blanco:
       azul  sobre blanco  4.59  (justo; se oscurece para texto corrido)
       verde sobre blanco  2.80  (nunca como texto)
     Estos oscurecidos conservan el matiz y sí pasan. */
  --azul-txt:  #00618F;
  --azul-btn:  #00699F;
  --verde-txt: #00752B;
  --verde-btn: #00832F;

  /* --- Azules de superficie --------------------------------------------
     El azul de marca es demasiado claro para texto blanco encima (4.59).
     Este oscurecido mantiene el matiz y da 6.61:1 con blanco. */
  --azul-fondo: #00619A;
  --azul-fondo-2: #004E7C;

  /* --- Superficies y tinta --- */
  --bg:        #FFFFFF;
  --gris:      #F4F6F8;
  --gris-2:    #E9EEF2;
  --ink:       #10202B;
  --ink-2:     #46545F;
  --ink-3:     #63707B;
  --line:      #DFE5EA;
  --line-2:    #C4CDD5;

  --aviso-bg:  #FCF3E2;
  --aviso-br:  #B37700;
  --diesel:    #7A6A55;

  --s-1: 4px;  --s-2: 8px;  --s-3: 16px; --s-4: 24px;
  --s-5: 32px; --s-6: 48px; --s-7: 72px; --s-8: 104px;
  --wrap: 1120px;
  --r: 6px;

  --sans:    'Inter', ui-sans-serif, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Poppins', 'Inter', ui-sans-serif, -apple-system, sans-serif;

  --t: 160ms;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--display); line-height: 1.15; letter-spacing: -.03em; margin: 0; font-weight: 600; }
p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }

.wrap { width: min(var(--wrap), 100% - var(--s-5)); margin-inline: auto; }

.skip {
  position: absolute; left: var(--s-3); top: -100px; z-index: 100;
  background: var(--azul-btn); color: #fff;
  padding: var(--s-2) var(--s-3); border-radius: var(--r);
  text-decoration: none; font-weight: 600;
}
.skip:focus { top: var(--s-3); }

:where(a, button, input, summary):focus-visible {
  outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 3px;
}

/* ---------------------------------------------------------------------------
   Cabecera
   ------------------------------------------------------------------------ */

.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: var(--azul-fondo);
}
.cabecera-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); height: 76px;
}
/* Versión en negativo del logotipo directamente sobre el azul: es el uso que el
   brand book llama "alto contraste con NATGAS completamente blanco". Ya no hace
   falta la placa clara que compensaba el logotipo de color. */
.marca { display: inline-flex; align-items: center; gap: var(--s-3); line-height: 0; text-decoration: none; }
.marca img { width: auto; height: 34px; }
/* El nombre del sitio, separado del logotipo por un filete: NATGAS es la marca,
   esto es la iniciativa. */
.marca-sitio {
  padding-left: var(--s-3);
  border-left: 1px solid rgba(255, 255, 255, .32);
  font-size: .78rem; font-weight: 600; line-height: 1.25;
  letter-spacing: .01em; color: #D3E6F3;
  white-space: nowrap;
}
@media (max-width: 860px) { .marca-sitio { display: none; } }

.nav { display: flex; gap: var(--s-1); }
.nav a {
  font-size: .9rem; font-weight: 500; text-decoration: none; color: #D3E6F3;
  padding: 8px 12px; border-radius: var(--r);
  transition: color var(--t) var(--ease), background var(--t) var(--ease);
}
.nav a:hover { color: #fff; background: rgba(255, 255, 255, .14); }
/* Tres secciones ya no caben junto al logotipo a este ancho: la cabecera pasa a
   dos filas y deja de estar pegada arriba. Pegada, esas dos filas se comerían
   110 px de pantalla durante todo el scroll. */
@media (max-width: 620px) {
  .cabecera { position: static; }
  .cabecera-in {
    flex-direction: column; align-items: stretch;
    height: auto; gap: var(--s-2); padding: var(--s-3) 0;
  }
  .marca { align-self: flex-start; }
  .marca img { height: 27px; }
  .nav { justify-content: space-between; gap: var(--s-2); }
  .nav a {
    padding: 11px 8px; font-size: .84rem;
    white-space: nowrap;   /* que se estreche la fila, no que parta las etiquetas */
  }
}
/* En pantallas de 320 px las tres etiquetas solo caben en una línea si bajan
   de cuerpo; el alto mínimo mantiene el objetivo táctil en 44 px. */
@media (max-width: 380px) {
  .nav a { padding: 6px; font-size: .8rem; min-height: 44px; display: grid; place-items: center; }
}

/* ---------------------------------------------------------------------------
   Portada — continúa la banda azul de la cabecera
   ------------------------------------------------------------------------ */

.portada {
  padding: var(--s-8) 0;
  background: var(--azul-fondo);
  color: #fff;
}

.kicker {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: #9BF0B5; margin-bottom: var(--s-4);
}
.kicker::before { content: ''; width: 24px; height: 3px; background: var(--verde); border-radius: 2px; }

/* La portada se reparte entre el copy y el recorte del tracto. */
.portada-in {
  display: grid; align-items: center; gap: var(--s-6);
  grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
}
.portada-txt { min-width: 0; }
.portada-foto { margin: 0; min-width: 0; }
.portada-foto img { width: 100%; height: auto; }

@media (max-width: 940px) {
  .portada-in { grid-template-columns: 1fr; gap: var(--s-5); }
  .portada-foto { max-width: 460px; }
}

.portada h1 {
  font-size: clamp(2.5rem, 5.6vw, 4.4rem);
  font-weight: 700; line-height: 1.05; letter-spacing: -.035em;
  max-width: 15ch; color: #fff;
}
/* Única línea de apoyo del titular: sube de tamaño respecto a un párrafo
   corriente porque ya no hay entradilla debajo. */
.portada-sub {
  margin-top: var(--s-4); max-width: 34ch;
  font-size: clamp(1.08rem, 1.6vw, 1.32rem); line-height: 1.45;
  color: #D3E6F3;
}

/* ---------------------------------------------------------------------------
   Secciones
   ------------------------------------------------------------------------ */

.seccion { padding: var(--s-6) 0 var(--s-8); }
.seccion--gris { background: var(--gris); border-top: 1px solid var(--line); }
.seccion-cab { max-width: 60ch; margin-bottom: var(--s-5); }
.seccion-cab h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; }
.seccion-cab p { margin-top: var(--s-3); color: var(--ink-2); }

/* ---------------------------------------------------------------------------
   Suma tu unidad — dos públicos, dos caminos
   ------------------------------------------------------------------------
   Cada carta lleva su propio filete de color arriba: azul para las marcas,
   verde para los transportistas. El verde solo pinta el filete y el texto en
   su versión oscurecida; como color de texto plano no llega a 4.5:1.        */

/* El `min()` es lo que evita que la columna de 320 px desborde una pantalla
   más estrecha que eso: por debajo manda el 100 %. */
.suma-rejilla {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}
.suma-carta {
  display: grid; gap: var(--s-3); align-content: start;
  background: var(--bg); border: 1px solid var(--line);
  border-top: 3px solid var(--azul); border-radius: 10px;
  padding: var(--s-5);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.suma-carta:hover { box-shadow: 0 12px 32px -20px rgba(0, 60, 100, .45); }
.suma-carta--verde { border-top-color: var(--verde); }

.suma-k {
  font-size: .72rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--azul-txt);
}
.suma-carta--verde .suma-k { color: var(--verde-txt); }
.suma-carta h3 { font-size: 1.4rem; font-weight: 700; }
.suma-carta > p:not(.suma-k) { font-size: .95rem; color: var(--ink-2); max-width: 50ch; }

.btn-linea {
  justify-self: start; margin-top: var(--s-1);
  background: var(--bg); color: var(--azul-txt); border-color: var(--line-2);
}
.btn-linea:hover { background: #F0F7FC; border-color: var(--azul); }
.btn-linea svg { width: 15px; height: 15px; }
.btn-linea--verde { color: var(--verde-txt); }
.btn-linea--verde:hover { background: #EFFAF2; border-color: var(--verde); }

/* ---------------------------------------------------------------------------
   Unidad
   ------------------------------------------------------------------------
   La foto manda: es lo primero y ocupa el ancho completo de la tarjeta.     */

.rejilla { display: grid; gap: var(--s-5); }
@media (min-width: 1000px) { .rejilla { grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)); } }

.unidad {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.unidad:hover { border-color: var(--line-2); box-shadow: 0 12px 32px -20px rgba(0, 60, 100, .45); }

/* Marco fijo 2:1 y encuadre por unidad. Las fotos vienen con el vehículo a
   distinta altura dentro del cuadro; sin esto, las líneas de suelo no casan
   entre tarjetas. El desplazamiento de cada una está medido, en `encuadre`. */
.unidad-foto {
  position: relative; margin: 0;
  aspect-ratio: 2 / 1;
  background: var(--gris); border-bottom: 1px solid var(--line);
}
.unidad-foto img { width: 100%; height: 100%; object-fit: cover; }

.unidad-cuerpo { padding: var(--s-5); display: grid; gap: var(--s-4); }

.unidad-marca {
  font-size: .72rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--azul-txt);
}
.unidad-cab h2 { font-size: 1.7rem; font-weight: 700; margin-top: 4px; }
.unidad-tipo { font-size: .9rem; color: var(--ink-3); margin-top: 3px; }
.unidad-resumen { font-size: .95rem; color: var(--ink-2); }

/* --- Las cuatro cifras que deciden --- */
.clave-bloque { padding: var(--s-4) 0; border-block: 1px solid var(--line); }
.clave {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3); margin: 0;
}
.clave dt { font-size: .68rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.clave dd {
  margin: 3px 0 0; font-family: var(--display); font-weight: 700;
  font-size: 1.35rem; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.clave dd span { display: block; font-family: var(--sans); font-size: .68rem; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
@media (max-width: 560px) { .clave { grid-template-columns: repeat(2, 1fr); gap: var(--s-4) var(--s-3); } }

/* --- Resumen técnico: una línea por dato --- */
.resumen-tec { margin: 0; display: grid; gap: 0; }
.resumen-tec > div {
  display: grid; grid-template-columns: 120px 1fr; gap: var(--s-3);
  padding: 8px 0; border-bottom: 1px solid var(--line);
  font-size: .875rem;
}
.resumen-tec > div:last-child { border-bottom: 0; }
.resumen-tec dt { color: var(--ink-3); }
.resumen-tec dd { margin: 0; font-weight: 500; }
@media (max-width: 460px) { .resumen-tec > div { grid-template-columns: 1fr; gap: 0; } }

/* --- Descarga: es la acción principal de todo el sitio --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font: inherit; font-size: .92rem; font-weight: 600;
  padding: 12px 20px; min-height: 48px; cursor: pointer;
  border-radius: var(--r); border: 1px solid transparent;
  text-decoration: none;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; }

.btn-descarga { background: var(--verde-btn); color: #fff; width: 100%; }
.btn-descarga:hover { background: #006925; }
.btn-meta { font-weight: 500; font-size: .8rem; opacity: .82; }

/* --- Quién vende la unidad: sale del sitio de cada uno, no de nosotros --- */
.vendedor {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  /* Recorta el hueco del grid: la descarga y el vendedor son un mismo bloque
     de acciones, y deben leerse juntos y aparte de la tabla de datos. */
  margin-top: -10px;
  padding: var(--s-3) var(--s-4);
  background: var(--gris); border: 1px solid var(--line); border-radius: var(--r);
  text-decoration: none; color: var(--ink);
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.vendedor:hover { background: var(--gris-2); border-color: var(--line-2); }
.vendedor-txt { display: grid; min-width: 0; }
.vendedor-k {
  font-size: .68rem; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3);
}
.vendedor b { font-size: .98rem; font-weight: 600; margin-top: 2px; }
.vendedor small { font-size: .78rem; color: var(--ink-3); line-height: 1.45; }
.vendedor svg { width: 16px; height: 16px; flex: none; color: var(--azul-txt); }

.btn-sec {
  background: var(--bg); color: var(--ink-2); border-color: var(--line-2);
  font-weight: 500; font-size: .86rem; min-height: 40px; padding: 8px 16px;
  justify-self: start;
}
.btn-sec:hover { color: var(--ink); border-color: var(--ink-3); }

/* --- Video de la unidad --- */
.btn-video {
  position: absolute; left: var(--s-3); bottom: var(--s-3);
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer;
  padding: 9px 16px; min-height: 40px; border-radius: 999px;
  background: rgba(6, 30, 48, .82); color: #fff;
  border: 1px solid rgba(255, 255, 255, .3);
  backdrop-filter: blur(6px);
  transition: background var(--t) var(--ease);
}
.btn-video:hover { background: rgba(6, 30, 48, .95); }
.btn-video svg { width: 13px; height: 13px; }

.dlg-video {
  width: min(1000px, calc(100vw - var(--s-4)));
  padding: 0; border: 0; border-radius: 10px;
  background: #06202F; color: #fff;
  box-shadow: 0 24px 70px -20px rgba(0, 20, 40, .6);
}
.dlg-video::backdrop { background: rgba(4, 22, 36, .72); backdrop-filter: blur(3px); }
.dlg-video-cab {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
}
.dlg-video-cab h2 { font-size: 1rem; font-weight: 600; color: #fff; }
.dlg-video-cerrar {
  width: 36px; height: 36px; flex: none; display: grid; place-items: center;
  background: transparent; color: #BEDCEE; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .28); border-radius: var(--r);
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.dlg-video-cerrar:hover { color: #fff; border-color: rgba(255, 255, 255, .6); }
.dlg-video-cerrar svg { width: 16px; height: 16px; }
.dlg-video-marco { aspect-ratio: 16 / 9; background: #000; }
.dlg-video-marco iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Alternativa cuando la página se abre como archivo local y YouTube no deja
   reproducir dentro del iframe. */
.video-enlace {
  position: relative; display: block; width: 100%; height: 100%;
  text-decoration: none; color: #fff; overflow: hidden;
}
.video-enlace img { width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.video-enlace-cap {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: var(--s-4);
}
.video-enlace-cap svg { width: 34px; height: 34px; }
.video-enlace-cap b { font-family: var(--display); font-size: 1.15rem; font-weight: 700; }
.video-enlace-cap small { font-size: .8rem; color: #C9E6F5; max-width: 46ch; line-height: 1.5; }
.video-enlace:hover img { opacity: .5; }

/* ---------------------------------------------------------------------------
   Calculadora
   ------------------------------------------------------------------------ */

.calc { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 320px) minmax(0, 1fr); align-items: start; }
@media (max-width: 880px) { .calc { grid-template-columns: 1fr; } }

.calc-entradas {
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  padding: var(--s-4); display: grid; gap: var(--s-4);
}
.grupo { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.grupo legend {
  padding: 0; margin-bottom: var(--s-1);
  font-size: .68rem; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: var(--azul-txt);
}
.campo label { display: block; font-size: .84rem; font-weight: 600; margin-bottom: 5px; }
.campo-input {
  display: flex; align-items: center;
  background: var(--gris); border: 1px solid var(--line-2); border-radius: var(--r);
  transition: border-color var(--t) var(--ease);
}
.campo-input:focus-within { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(0, 123, 190, .16); }
.campo-input input {
  flex: 1; min-width: 0; min-height: 44px;
  font: inherit; font-size: 1.02rem; font-weight: 600; font-variant-numeric: tabular-nums;
  padding: 8px 4px 8px 12px; background: transparent; color: var(--ink); border: 0;
}
.campo-input input:focus { outline: none; }
.campo-input input::-webkit-outer-spin-button,
.campo-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.campo-input input[type='number'] { -moz-appearance: textfield; }
.prefijo, .sufijo { font-size: .82rem; color: var(--ink-3); font-weight: 500; padding: 0 12px; white-space: nowrap; }
.prefijo { padding-right: 0; }
.ayuda { font-size: .75rem; color: var(--ink-3); margin-top: 4px; }

.calc-salida { display: grid; gap: var(--s-3); }

.barra { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: var(--s-4); }
.barra-cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); }
.barra-cab span { font-size: .88rem; color: var(--ink-2); font-weight: 500; }
.barra-cab b { font-family: var(--display); font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.barra-cab b small { font-size: .5em; font-weight: 600; color: var(--ink-3); }
.barra-riel { height: 10px; background: var(--gris-2); border-radius: 999px; overflow: hidden; }
.barra-relleno { height: 100%; border-radius: 999px; transition: width 260ms var(--ease); }
.barra--diesel .barra-relleno { background: var(--diesel); }
.barra--diesel .barra-cab b { color: var(--ink-2); }
.barra--gnc .barra-relleno { background: var(--verde); }
.barra--gnc .barra-cab b { color: var(--verde-txt); }
.barra-pie { margin-top: var(--s-2); font-size: .8rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.resultado {
  background: var(--azul-fondo); color: #fff;
  border-radius: 10px; padding: var(--s-5);
}
.resultado-k { font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #BEDCEE; }
.resultado-v {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.6rem, 7vw, 3.6rem); letter-spacing: -.04em; line-height: 1.05;
  margin-top: var(--s-2); font-variant-numeric: tabular-nums;
}
.resultado-n { margin-top: var(--s-1); font-size: 1rem; font-weight: 600; color: #9BF0B5; }

.plazos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.plazos > div {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 10px; padding: var(--s-4);
}
.plazos b {
  display: block; font-family: var(--display); font-size: 1.6rem; font-weight: 700;
  letter-spacing: -.03em; color: var(--verde-txt); font-variant-numeric: tabular-nums;
}
.plazos span { display: block; font-size: .84rem; color: var(--ink-3); margin-top: 2px; }
@media (max-width: 420px) { .plazos { grid-template-columns: 1fr; } }

.alianza {
  background: #E8F7EC; border: 1px solid rgba(0, 179, 58, .32);
  border-radius: 10px; padding: var(--s-4);
}
.alianza p { font-size: .9rem; color: var(--ink-2); line-height: 1.6; }
.alianza b { color: var(--verde-txt); }

.fuente {
  margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line-2);
  font-size: .82rem; color: var(--ink-3); line-height: 1.6; max-width: 78ch;
}
.fuente b { color: var(--ink-2); }
.fuente a { color: var(--azul-txt); }

/* ---------------------------------------------------------------------------
   Cierre
   ------------------------------------------------------------------------
   Botón blanco sobre la banda azul: el verde de marca con texto blanco se
   queda en 2.80:1, así que aquí no sirve.                                   */

.cta { background: var(--azul-fondo); color: #fff; padding: var(--s-7) 0; }
.cta-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); flex-wrap: wrap;
}
.cta h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 700; color: #fff; }
.cta p { margin-top: var(--s-3); max-width: 52ch; color: #D3E6F3; font-size: .98rem; }

.btn-cta {
  flex: none;
  background: #fff; color: var(--azul-fondo);
  font-size: .98rem; font-weight: 700;
  padding: 14px 26px; min-height: 52px;
}
.btn-cta:hover { background: #E4F1F8; }
.btn-cta svg { width: 16px; height: 16px; }
@media (max-width: 700px) { .btn-cta { width: 100%; } }

/* ---------------------------------------------------------------------------
   Pie
   ------------------------------------------------------------------------ */

/* Va justo tras el cierre, que también es azul: la línea evita que se lean
   como un solo bloque. */
.pie {
  background: var(--azul-fondo-2); color: #D3E6F3; padding: var(--s-7) 0;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.pie-in { display: grid; gap: var(--s-5); grid-template-columns: auto minmax(0, 1fr); align-items: start; }
@media (max-width: 700px) { .pie-in { grid-template-columns: 1fr; } }
.pie-logo { width: auto; height: 30px; }
.pie-nota { font-size: .9rem; max-width: 62ch; }
.pie-legal { margin-top: var(--s-4); font-size: .78rem; color: #C9E6F5; max-width: 62ch; }

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