/* Paleta común de DATUM.
   Oscuro por defecto —es la identidad de la marca— y una versión clara derivada
   para quien mira el celular al sol en terreno, que es buena parte del público.
   Los nombres son los mismos en los dos temas, así que las páginas nunca
   escriben un color a mano. */
:root{
  --fondo:#0B0B0D;          /* negro de la marca */
  --fondo-2:#111215;        /* franjas y secciones alternas */
  --panel:#15161A;          /* tarjetas */
  --panel-2:#1B1D22;        /* campos de formulario */
  --linea:#2A2B30;
  --linea-2:#333539;
  --texto:#FFFFFF;
  --tenue:#9A9EA6;          /* 6,9:1 sobre el fondo */
  --acento:#EF570F;         /* naranja DATUM: 5,4:1 sobre el fondo */
  --acento-fondo:#EF570F;   /* relleno de botones, con texto casi negro */
  --acento-vivo:#FF6A22;
  --sobre-acento:#0B0B0D;   /* 5,4:1 sobre el naranja */
  --cyan:#F58A57;           /* etiquetas y rótulos: 7,8:1 */
  --verde:#4CC17E;
  --rojo:#F0553F;
  --sombra:none;
  --sombra-alta:0 22px 52px -26px rgba(0,0,0,.9);
  --escena:#0B0B0D;         /* el visor 3D va oscuro en ambos temas */

  /* Familias. Barlow para titulares, Plex Sans para leer, Plex Mono para todo
     lo que sea un número medido. */
  --display:'Barlow','Arial Narrow',Arial,sans-serif;
  --sans:'IBM Plex Sans','Segoe UI',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
  color-scheme: dark;
}

:root[data-tema="claro"]{
  --fondo:#FFFFFF;
  --fondo-2:#F5F5F7;
  --panel:#FFFFFF;
  --panel-2:#EDEEF1;
  --linea:#DFE1E5;
  --linea-2:#CBCED4;
  --texto:#0B0B0D;
  --tenue:#55585F;          /* 6,9:1 sobre blanco */
  --acento:#C4430A;         /* naranja apagado para texto: 5,1:1 */
  --acento-fondo:#EF570F;   /* el botón conserva el naranja vivo */
  --acento-vivo:#A93807;
  --sobre-acento:#0B0B0D;
  --cyan:#B03C08;
  --verde:#1E7A4A;
  --rojo:#B3301E;
  --sombra:0 1px 2px rgba(11,11,13,.06), 0 8px 20px -12px rgba(11,11,13,.16);
  --sombra-alta:0 6px 16px rgba(11,11,13,.10), 0 22px 44px -24px rgba(11,11,13,.24);
  --escena:#0B0B0D;
  color-scheme: light;
}

/* ---------- botón para cambiar de tema ---------- */
.cambia-tema{
  display:inline-grid;place-items:center;width:38px;height:38px;flex:0 0 auto;
  border:1px solid var(--linea);background:transparent;color:var(--texto);
  cursor:pointer;font-size:15px;line-height:1;transition:.15s;border-radius:3px;
}
.cambia-tema:hover{border-color:var(--acento);color:var(--acento)}
.cambia-tema .sol{display:none}
.cambia-tema .luna{display:inline}
:root[data-tema="claro"] .cambia-tema .luna{display:none}
:root[data-tema="claro"] .cambia-tema .sol{display:inline}

/* ---------- el logotipo ---------- */
/* El isotipo y la palabra vienen en blanco, para el fondo oscuro. En tema claro
   se cambia por la variante en tinta. Se resuelve con dos imágenes y no con un
   filtro, para que el naranja de la marca no se altere. */
.marca-datum{display:inline-flex;align-items:center;gap:11px;line-height:1}
.marca-datum__iso{width:34px;height:34px;object-fit:contain;flex:none}
.marca-datum__txt{display:flex;flex-direction:column;gap:3px}
.marca-datum__wm{height:17px;width:auto;display:block}
.marca-datum__tag{
  font-family:var(--mono);font-size:8px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--tenue);white-space:nowrap;
}
.marca-datum .claro{display:none}
:root[data-tema="claro"] .marca-datum .oscuro{display:none}
:root[data-tema="claro"] .marca-datum .claro{display:block}
@media(max-width:420px){
  .marca-datum__iso{width:30px;height:30px}
  .marca-datum__wm{height:15px}
  .marca-datum__tag{font-size:7px;letter-spacing:.13em}
}

/* ---------- contacto flotante ---------- */
/* El único enlace a WhatsApp vivía al final de una página de 17.000 px. En el
   celular, que es de donde llega casi todo el tráfico, el contacto tiene que
   estar siempre a un pulgar de distancia. */
.wsp-flota{
  position:fixed; right:16px; bottom:16px; z-index:70;
  display:inline-flex; align-items:center; gap:9px;
  min-height:52px; padding:0 18px 0 15px; border-radius:999px;
  background:#25D366; color:#0A2E17; font-weight:700; font-size:14.5px;
  letter-spacing:.01em; text-decoration:none; border:0;
  box-shadow:0 6px 22px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.18);
  transition:transform .18s, box-shadow .18s;
}
.wsp-flota:hover{transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.34)}
.wsp-flota svg{width:22px;height:22px;flex:none;fill:currentColor}
.wsp-flota .txt{white-space:nowrap}
@media (max-width:520px){
  .wsp-flota{right:12px; bottom:12px; padding:0 16px 0 13px}
  .wsp-flota .txt{display:none}
  .wsp-flota{padding:0; width:54px; height:54px; justify-content:center; border-radius:50%}
}
@media print{ .wsp-flota{display:none} }