/* ==========================================================================
   Innovacode Latam — hoja de estilos de la landing
   --------------------------------------------------------------------------
   Reglas de la casa, por si alguien la toca despues:

   1. SIN dependencias: nada de Tailwind, Bootstrap ni reset de terceros.
      Un @import a un CDN en una landing de marketing es una peticion extra
      que el cliente paga en segundos de carga.
   2. SIN fuentes web: solo la pila del sistema (ver --fuente). No hay
      @font-face, asi que no hay bloqueo de render ni FOUT que resolver.
   3. UN solo color de acento (--acento). Todo lo demas es tinta, gris y aire.
      Es software para manejar el dinero de una empresa: sobriedad, no fiesta.
   4. Los colores viven en custom properties: cambiar la marca es cambiar
      tres variables, no recorrer el archivo.
   5. El sitio debe verse bien SIN JavaScript. El unico extra de JS es el
      menu de movil; con JS desactivado el menu se muestra como lista.

   Orden del archivo: variables, base, utilidades, componentes (cabecera,
   hero, secciones, tarjetas, destacado, razones, servicios, contacto, pie),
   y al final los media queries y las preferencias del usuario.
   ========================================================================== */

/* ============================ 1. VARIABLES ============================== */
:root {
  /* Paleta. Contraste MEDIDO sobre blanco (#fff), ratio calculado:
     --tinta  #0f2338  15.9:1  AAA
     --texto  #33475e   9.5:1  AAA
     --acento #1a56db   6.2:1  AA en texto normal (y AAA en negrita)
     --suave  #5b6f85   5.2:1  AA  (4.9:1 sobre --fondo-suave: sigue pasando AA)
     --ejemplo #67768a  4.6:1  AA, el mínimo aceptado para el texto de ejemplo
     Todos los textos de la pagina pasan AA como mínimo. Si alguien aclara un
     gris "para que se vea mas limpio", que vuelva a medirlo. */
  --tinta: #0f2338;
  --texto: #33475e;
  --suave: #5b6f85;
  --acento: #1a56db;
  --acento-oscuro: #143fa6;
  --acento-tenue: #eef3ff;
  --acento-borde: #c7d7fb;   /* borde de las cajas con tinte de acento */
  --fondo: #ffffff;
  --fondo-suave: #f6f8fb;
  --borde: #e2e8f0;
  --borde-fuerte: #cbd5e1;
  /* Color del texto de ejemplo dentro de los campos (placeholder). No se usa
     --suave para no confundir el ejemplo con un valor ya escrito, pero tiene
     que cumplir contraste igual: #8a99ab daba 2.91:1 y NO pasaba AA. */
  --ejemplo: #67768a;

  /* Paleta del pie (fondo oscuro). El texto B9C6D4 sobre #0f2338 da 9.2:1. */
  --pie-texto: #b9c6d4;
  --pie-blanco: #ffffff;
  --pie-borde: rgba(255, 255, 255, .2);
  --pie-fondo-marca: rgba(255, 255, 255, .1);

  /* NOTA: aqui vivian los colores ambar del aviso de borrador y de las marcas
     de dato faltante. Se eliminaron junto con esos bloques: la pagina no lleva
     huecos visibles (ver el criterio de datos en index.html). */

  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
            Arial, "Noto Sans", sans-serif;

  /* Escala tipografica fluida: un solo tamano que se adapta, sin media queries. */
  --paso-1: clamp(1.5rem, 1.15rem + 1.4vw, 2.1rem);
  --paso-2: clamp(1.9rem, 1.35rem + 2.2vw, 2.9rem);

  --radio: 12px;
  --radio-chico: 8px;
  --ancho-contenedor: 1120px;
  --ancho-lectura: 68ch;          /* limite de linea: se lee de corrido */
  --sombra: 0 1px 2px rgba(15, 35, 56, .06), 0 8px 24px rgba(15, 35, 56, .06);
  --transicion: 180ms ease;

  --alto-cabecera: 68px;
}

/* ============================== 2. BASE ================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* El encabezado es fijo: sin esto, la ancla deja el titulo debajo de el. */
  scroll-padding-top: calc(var(--alto-cabecera) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--texto);
  background: var(--fondo);
  /* Evita el scroll horizontal por un hijo que se desborde en movil.
     Se usa `clip` y NO `hidden`: `overflow-x: hidden` convierte el body en
     contenedor de scroll y eso ROMPE el `position: sticky` del encabezado.
     `clip` recorta sin crear contenedor de scroll. */
  overflow-x: clip;
}

h1, h2, h3 { color: var(--tinta); line-height: 1.2; margin: 0 0 .6em; }
h1 { font-size: var(--paso-2); letter-spacing: -.02em; }
h2 { font-size: var(--paso-1); letter-spacing: -.015em; }
h3 { font-size: 1.075rem; line-height: 1.35; }
p  { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Foco visible SIEMPRE (accesibilidad de teclado). No se quita nunca. */
:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
  border-radius: 4px;
}

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

/* Primer tabulador: aparece solo cuando recibe foco. */
.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: .7rem 1.1rem;
  background: var(--acento);
  color: #fff;
  border-radius: 0 0 var(--radio-chico) 0;
  font-weight: 600;
}
.saltar:focus { left: 0; }

/* Lista de redes sociales, lista para cuando existan (hoy no hay ninguna, y la
   fila se omite entera en vez de dejarla vacia). Se usa en el contacto y en el
   pie: mismas reglas, dos tamanos distintos. */
.redes { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.redes--pie { margin-top: .5rem; }
.redes--pie a { color: var(--pie-texto); }
.redes--pie a:hover { color: var(--pie-blanco); }

/* ============================= 4. BOTONES =============================== */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;             /* objetivo tactil comodo en celular */
  padding: .75rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--radio-chico);
  font: inherit;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--transicion), border-color var(--transicion),
              color var(--transicion);
}
.boton:hover { text-decoration: none; }

.boton--primario { background: var(--acento); color: #fff; }
.boton--primario:hover { background: var(--acento-oscuro); }

.boton--secundario {
  background: transparent;
  color: var(--tinta);
  border-color: var(--borde-fuerte);
}
.boton--secundario:hover { border-color: var(--tinta); background: var(--fondo-suave); }

/* ============================ 5. CABECERA =============================== */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--borde);
  transition: box-shadow var(--transicion);
}
/* Clase que pone el JS al bajar: solo una sombra, nada llamativo. */
.cabecera--con-sombra { box-shadow: 0 2px 12px rgba(15, 35, 56, .07); }

.cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--alto-cabecera);
}

/* --- Logotipo tipografico: texto + CSS, cero imagenes --- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--tinta);
  font-weight: 700;
  letter-spacing: -.02em;
}
.logo:hover { text-decoration: none; }

.logo__marca {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radio-chico);
  background: var(--tinta);
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .01em;
}
.logo__texto { font-size: 1.06rem; }
.logo__sufijo {
  margin-left: .3em;
  padding-left: .45em;
  border-left: 1px solid var(--borde-fuerte);
  color: var(--suave);
  font-weight: 500;
}

/* --- Menu --- */
.menu__lista {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
.menu__lista a {
  color: var(--texto);
  font-size: .95rem;
  font-weight: 500;
}
.menu__lista a:hover { color: var(--acento); text-decoration: none; }

.menu__cta {
  padding: .5rem 1.1rem;
  border: 1px solid var(--acento);
  border-radius: var(--radio-chico);
  color: var(--acento) !important;
}
.menu__cta:hover { background: var(--acento); color: #fff !important; }

/* --- Navegacion de respaldo, solo visible sin JavaScript ---
   El menu de movil lo abre el JS. Si el navegador no ejecuta JS, el panel
   nunca se abriria: por eso el HTML trae un <noscript> con esta lista.
   El elemento <noscript> solo se pinta cuando JS esta desactivado. */
.menu-respaldo {
  background: var(--fondo-suave);
  border-bottom: 1px solid var(--borde);
}
.menu-respaldo ul {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  width: min(100% - 2.5rem, var(--ancho-contenedor));
  margin-inline: auto;
  padding: .85rem 0;
  font-size: .95rem;
}

/* --- Boton hamburguesa: oculto en escritorio --- */
.menu-boton {
  display: none;
  width: 46px;
  height: 46px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-chico);
  cursor: pointer;
}
/* Las tres barras salen de un solo span con ::before/::after (menos HTML). */
.menu-boton__barras,
.menu-boton__barras::before,
.menu-boton__barras::after {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--tinta);
  transition: transform var(--transicion), opacity var(--transicion);
}
.menu-boton__barras { position: relative; margin: 0 auto; }
.menu-boton__barras::before,
.menu-boton__barras::after { content: ""; position: absolute; left: 0; }
.menu-boton__barras::before { top: -6px; }
.menu-boton__barras::after  { top: 6px; }

/* Estado abierto: la barra del medio se va y las otras dos forman la X. */
.menu-boton[aria-expanded="true"] .menu-boton__barras { background: transparent; }
.menu-boton[aria-expanded="true"] .menu-boton__barras::before { transform: translateY(6px) rotate(45deg); }
.menu-boton[aria-expanded="true"] .menu-boton__barras::after  { transform: translateY(-6px) rotate(-45deg); }

/* ============================== 6. HERO ================================= */
.hero {
  padding: clamp(3rem, 7vw, 6rem) 0 clamp(2.5rem, 5vw, 4.5rem);
  /* Degradado muy suave: separa el hero del resto sin usar una imagen. */
  background: linear-gradient(180deg, var(--fondo-suave) 0%, var(--fondo) 100%);
  border-bottom: 1px solid var(--borde);
}
.hero__interior { max-width: 62rem; }

.hero__antetitulo {
  margin: 0 0 1rem;
  color: var(--acento);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hero__titulo { max-width: 20ch; margin-bottom: .5em; }
.hero__subtitulo {
  max-width: var(--ancho-lectura);
  font-size: clamp(1.05rem, 1rem + .35vw, 1.2rem);
  color: var(--texto);
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin: 2rem 0 2.5rem;
}

/* Los cuatro hechos del hero, con guion de acento. */
.hero__hechos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: .6rem 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--borde);
  font-size: .95rem;
}
.hero__hechos li { position: relative; padding-left: 1.35rem; }
.hero__hechos li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .6em;
  width: .6rem;
  height: 2px;
  background: var(--acento);
}

/* ============================ 7. SECCIONES ============================== */
.seccion { padding: clamp(3rem, 6vw, 5.5rem) 0; }
.seccion--alterna { background: var(--fondo-suave); border-block: 1px solid var(--borde); }

.seccion__cabecera { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.seccion__etiqueta {
  margin: 0 0 .5rem;
  color: var(--acento);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.seccion__titulo { margin-bottom: .4em; }
.seccion__entrada { font-size: 1.06rem; }

/* =========================== 8. REJILLAS/TARJETAS ======================= */
/*
  NOTA SOBRE `minmax(min(Xrem, 100%), 1fr)` — el `min()` NO es decorativo:
  con `minmax(17.5rem, 1fr)` a secas, la pista minima son 280px fijos. En un
  telefono de 320px de ancho el contenedor mide 280px (100% - 2.5rem de
  margen), asi que la pista pedia 280px DENTRO de una caja de 280px menos el
  hueco del gap: la rejilla se desbordaba y aparecia scroll horizontal.
  Medido con un arnes a 320px: scrollWidth 340 vs clientWidth 320.
  `min(Xrem, 100%)` hace que la pista nunca pida mas de lo que hay.
  Por eso el mismo patron se repite en TODAS las rejillas de este archivo.
*/
.rejilla {
  display: grid;
  gap: 1.25rem;
  /* auto-fit + minmax: la rejilla se reacomoda sola, sin breakpoints. */
  grid-template-columns: repeat(auto-fit, minmax(min(17.5rem, 100%), 1fr));
}

.tarjeta {
  padding: 1.5rem;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.tarjeta:hover { border-color: var(--borde-fuerte); box-shadow: var(--sombra); }
.tarjeta__titulo { margin-bottom: .5rem; }
.tarjeta p:last-child { margin-bottom: 0; }

/* ================== 9. BLOQUE DESTACADO: DIAN CHECK ===================== */
.destacado {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.75rem, 4vw, 3rem);
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--acento);   /* la marca visual del diferenciador */
  border-radius: var(--radio);
}
.destacado__etiqueta {
  margin: 0 0 .5rem;
  color: var(--acento);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.destacado__titulo { max-width: 34ch; }
.destacado > p { max-width: var(--ancho-lectura); }

.destacado__problema {
  padding: 1rem 1.25rem;
  background: var(--fondo-suave);
  border-radius: var(--radio-chico);
  color: var(--tinta);
}

/* Las tres cajas del cruce (la DIAN reporta / la empresa tiene / faltan). */
.cruce {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 1rem;
  margin: 1.75rem 0 1.25rem;
}
.cruce__caja {
  padding: 1.15rem;
  background: var(--fondo-suave);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
}
.cruce__caja--alerta {
  background: var(--acento-tenue);
  border-color: var(--acento-borde);
}
.cruce__rotulo {
  margin: 0 0 .35rem;
  color: var(--tinta);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.cruce__texto { margin: 0; font-size: .95rem; }

.destacado__nota {
  margin: 0;
  color: var(--suave);
  font-size: .95rem;
}

/* ============================= 10. RAZONES ============================== */
.razones {
  display: grid;
  gap: 1.5rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}
.razon {
  padding-top: 1.25rem;
  border-top: 2px solid var(--borde-fuerte);
}
.razon__titulo { margin-bottom: .35rem; font-size: 1.05rem; }
.razon p:last-child { margin-bottom: 0; }

/* ============================ 11. SERVICIOS ============================= */
.servicios {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
}
.servicio {
  padding: 1.5rem;
  background: var(--fondo-suave);
  border-radius: var(--radio);
  border: 1px solid var(--borde);
}
.servicio__titulo { margin-bottom: .4rem; }
.servicio p:last-child { margin-bottom: 0; }

/* ============ 11b. BANDA DE ENLACE CRUZADO AL OTRO SITIO ================ */
/*
  Los dos sitios son la misma empresa con dos enfoques. Quien cae en el que no
  le corresponde tiene que poder saltar al otro de inmediato, y eso es una
  banda visible a todo lo ancho, no un enlace perdido en el pie.
  Se usa el tinte de acento, el mismo de las cajas destacadas: llama sin gritar.
  El mismo bloque esta en las dos hojas de estilo (este sitio y el regional).
*/
.cruce-sitio {
  padding: 1.5rem 0;
  background: var(--acento-tenue);
  border-block: 1px solid var(--acento-borde);
}
.cruce-sitio p {
  margin: 0;
  max-width: var(--ancho-lectura);
  color: var(--tinta);
  font-size: .98rem;
}
/* El dominio en si puede ser largo: que no empuje el ancho de la pagina. */
.cruce-sitio a { font-weight: 600; overflow-wrap: anywhere; }

/* ============================ 12. CONTACTO ============================== */
.contacto {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: start;
}

.contacto__formulario {
  /* `min-width: 0` en un hijo de grid: sin esto, un hijo con contenido ancho
     (el textarea, por ejemplo) impone su ancho mínimo y desborda la columna. */
  min-width: 0;
}

.formulario {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.campo { display: flex; flex-direction: column; gap: .4rem; }
.campo--ancho { grid-column: 1 / -1; }

.campo label { color: var(--tinta); font-size: .9rem; font-weight: 600; }
.campo__opcional { color: var(--suave); font-weight: 400; }

.campo input,
.campo textarea {
  width: 100%;
  padding: .7rem .85rem;
  font: inherit;
  color: var(--tinta);
  background: var(--fondo);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-chico);
}
.campo textarea { resize: vertical; min-height: 7rem; }
.campo input::placeholder,
.campo textarea::placeholder { color: var(--ejemplo); }
/* El foco cambia borde Y anillo: no depende solo del color. */
.campo input:focus,
.campo textarea:focus { border-color: var(--acento); }
/* Marca nativa de campo invalido, respetando la validacion del navegador. */
.campo input:user-invalid,
.campo textarea:user-invalid { border-color: #b42318; }

.formulario__aviso {
  margin: .9rem 0 0;
  min-height: 1.25rem;      /* reserva el alto: el layout no salta al aparecer */
  font-size: .92rem;
  color: var(--suave);
}
.formulario__aviso--ok { color: #14532d; }   /* verde oscuro: contraste AA */

/* Vía alterna por correo, debajo del botón. Es un enlace real, no un adorno:
   funciona hoy, mientras el formulario no esté conectado a ningún servicio. */
.formulario__correo {
  margin: .9rem 0 0;
  font-size: .92rem;
  color: var(--suave);
}
.formulario__correo a { font-weight: 600; word-break: break-word; }

/* --- Columna de datos de contacto --- */
.contacto__datos {
  padding: 1.75rem;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.contacto__subtitulo { margin-bottom: 1rem; }

.datos { margin: 0; }
.datos dt {
  margin-top: 1rem;
  color: var(--suave);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.datos dt:first-child { margin-top: 0; }
.datos dd { margin: .3rem 0 0; }
/* El correo es un enlace real (mailto): mismo color de acento que el resto. */
.datos dd a { font-weight: 600; word-break: break-word; }

.contacto__nota {
  margin: 1.5rem 0 0;
  padding-top: 1.15rem;
  border-top: 1px solid var(--borde);
  color: var(--suave);
  font-size: .9rem;
}

/* ============================== 13. PIE ================================= */
.pie {
  padding: 2.5rem 0;
  background: var(--tinta);
  color: var(--pie-texto);
  font-size: .92rem;
}
.pie__interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
}
.pie__marca { display: inline-flex; align-items: center; gap: .6rem; font-weight: 700; color: var(--pie-blanco); }
/* En el pie el monograma se invierte para no perder el contraste. */
.pie .logo__marca { background: var(--pie-fondo-marca); border: 1px solid var(--pie-borde); }
.pie .logo__texto { color: var(--pie-blanco); }
.pie .logo__sufijo { border-color: var(--pie-borde); color: var(--pie-texto); }

.pie__nav ul { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.pie__nav a { color: var(--pie-texto); }
.pie__nav a:hover { color: var(--pie-blanco); }

/* Pie legal: razon social · ciudad, correo y copyright, en tres lineas. */
.pie__legal { text-align: right; }
.pie__legal p { margin: 0 0 .3rem; }
.pie__legal p:last-child { margin-bottom: 0; }
.pie__razon { color: var(--pie-blanco); }
.pie__razon strong { letter-spacing: .02em; }
/* El correo se aclara respecto al texto del pie para que se lea como enlace
   (el color de acento no contrasta bien sobre el fondo oscuro). */
.pie__correo a { color: var(--pie-blanco); text-decoration: underline; text-underline-offset: 2px; }
/* Enlace al otro sitio. Subrayado y en blanco como el correo: son las dos
   salidas utiles del pie. */
.pie__cruce a { color: var(--pie-blanco); text-decoration: underline; text-underline-offset: 2px; }

/* ================== 14. MOVIL Y TABLETA (<= 860px) ====================== */
@media (max-width: 860px) {

  /* El menu pasa a panel desplegable. */
  .menu-boton { display: block; }

  .menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: none;                       /* cerrado por defecto */
    background: var(--fondo);
    border-bottom: 1px solid var(--borde);
    box-shadow: var(--sombra);
  }
  .menu--abierto { display: block; }

  .menu__lista {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem 0 1rem;
    width: min(100% - 2.5rem, var(--ancho-contenedor));
    margin-inline: auto;
  }
  .menu__lista li { border-bottom: 1px solid var(--borde); }
  .menu__lista li:last-child { border-bottom: 0; }

  /* En movil cada enlace es una fila de 48px: facil de tocar. */
  .menu__lista a {
    display: block;
    padding: .85rem 0;
    font-size: 1rem;
  }
  .menu__cta {
    margin-top: .75rem;
    padding: .75rem 1rem;
    text-align: center;
  }

  .contacto { grid-template-columns: 1fr; }
  .formulario { grid-template-columns: 1fr; }
  .pie__interior { flex-direction: column; align-items: flex-start; }
  .pie__legal { text-align: left; }
}

/* Pantallas muy angostas: el titular no puede quedar en una palabra por linea. */
@media (max-width: 420px) {
  .hero__titulo { max-width: none; }
  .hero__acciones .boton { width: 100%; }   /* botones a lo ancho, apilados */
}

/* ================= 15. PREFERENCIAS DEL USUARIO ========================= */

/* Quien pidio menos movimiento en su sistema operativo, no recibe animaciones.
   Es una preferencia de accesibilidad, no un detalle estetico. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* Impresion: sin menu, sin botones, sin fondos oscuros que gasten toner. */
@media print {
  .cabecera, .menu, .menu-boton, .saltar, .hero__acciones, .formulario { display: none !important; }
  .pie { background: none; color: #000; }
  a { color: #000; text-decoration: underline; }
}