/* ==========================================================================
   Doisol — Reset, elements, layout primitives
   ========================================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Red estructural contra el desplazamiento horizontal en móvil. Ningún
     elemento del sitio se sale —está medido—, pero la insignia de reCAPTCHA
     es de Google, va en `position: fixed` a `right: -186px` y no se puede
     reposicionar sin romper su script.

     `clip` y NO `hidden` a propósito: `hidden` convierte la raíz en contenedor
     de scroll y eso rompe los `position: sticky` del índice de momentos y de
     la intro de preguntas frecuentes. `clip` recorta sin crear el contenedor. */
  overflow-x: clip;
}

body {
  font-family: var(--fuente-texto);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--tinta);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* El atributo `hidden` lo hace funcionar la hoja del navegador con
   `display: none`, asi que CUALQUIER regla de autor que fije `display` sobre
   ese elemento lo desactiva en silencio. Ya paso tres veces en este sitio:
   `.formulario__aviso`, `.doris-panel` y las dos piezas del chat de Doris.
   Con `!important` el atributo vuelve a ser fiable en todo el sitio y deja de
   hacer falta parchearlo componente por componente. */
[hidden] { display: none !important; }

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
select,
textarea {
  font: inherit;
  color: inherit;
}

h1, h2, h3, h4 {
  font-family: var(--fuente-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); letter-spacing: -0.015em; }

p { text-wrap: pretty; }

a { color: inherit; }

ul, ol { list-style: none; padding: 0; }

/* Keyboard focus stays visible everywhere. */
:focus-visible {
  outline: 3px solid var(--linea);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.superficie-color :focus-visible,
.pie :focus-visible {
  outline-color: var(--blanco);
}

.salta-al-contenido {
  position: absolute;
  left: var(--s-4);
  top: var(--s-4);
  z-index: var(--z-modal);
  padding: var(--s-3) var(--s-5);
  background: var(--blanco);
  color: var(--azul-oscuro);
  font-weight: 700;
  border-radius: var(--r-md);
  transform: translateY(-200%);
  transition: transform var(--dur-rapida) var(--ease-out);
}

.salta-al-contenido:focus { transform: translateY(0); }

/* --- Layout primitives --------------------------------------------------- */

.contenedor {
  width: min(100% - 2.5rem, var(--ancho));
  margin-inline: auto;
}

@media (min-width: 48rem) {
  .contenedor { width: min(100% - 5rem, var(--ancho)); }
}

.seccion { padding-block: var(--s-9); }
.seccion-amplia { padding-block: var(--s-10); }

/* Cuando la sección termina en un bloque a sangre —las dos puertas de la
   bifurcación— el relleno inferior deja una franja huérfana entre ese bloque
   y la sección siguiente. */
.seccion--a-sangre { padding-bottom: 0; }

/* Reading surfaces: light. Conversion surfaces: full colour, white CTA.
   This alternation is the page rhythm, not decoration — a white button only
   exists on a saturated surface. */
.superficie-clara { background: var(--blanco); }
.superficie-tenue { background: var(--superficie); }

.superficie-color {
  background: var(--linea);
  color: var(--blanco);
}

.superficie-profunda {
  background: var(--linea-profunda);
  color: var(--blanco);
}

/* En la línea de Gestión Humana `--linea` y `--linea-profunda` son el MISMO
   morado: la paleta no tiene un morado oscuro y no se inventa uno. Eso hace
   que dos secciones saturadas seguidas se lean como un único bloque sin
   costura. Se separan con una regla dura, igual que las dos puertas de la
   bifurcación. Nunca con un degradado entre líneas: lo prohíbe el manual
   de arquitectura de productos.

   No aplica a Nómina, donde las dos superficies ya son azules distintos. */
[data-linea='talento'] .superficie-color + .superficie-profunda,
[data-linea='talento'] .superficie-profunda + .superficie-color,
[data-linea='talento'] .superficie-color + .superficie-color,
[data-linea='talento'] .superficie-profunda + .superficie-profunda {
  border-top: 2px solid rgba(255, 255, 255, 0.28);
}

.superficie-color h1,
.superficie-color h2,
.superficie-color h3,
.superficie-profunda h1,
.superficie-profunda h2,
.superficie-profunda h3 { color: var(--blanco); }

/* Light type on dark reads lighter; give it room. */
.superficie-color p,
.superficie-profunda p { line-height: 1.68; }

.medida { max-width: var(--ancho-texto); }

.entradilla {
  font-size: var(--t-md);
  line-height: 1.45;
  color: var(--tinta-suave);
  max-width: 54ch;
}

.superficie-color .entradilla,
.superficie-profunda .entradilla { color: rgba(255, 255, 255, 0.86); }

.encabezado-seccion { margin-bottom: var(--s-7); }
.encabezado-seccion > * + * { margin-top: var(--s-4); }

/* --- Motion -------------------------------------------------------------- */

/* Reveals enhance an already-visible default: content is never gated behind
   a class, so it still renders if the observer never fires. */
.revelar {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-lenta) var(--ease-out-quint),
              transform var(--dur-lenta) var(--ease-out-quint);
}

.js .revelar:not(.es-visible) {
  opacity: 0;
  transform: translateY(18px);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .js .revelar:not(.es-visible) {
    opacity: 1;
    transform: none;
  }
}