/* ==========================================================================
   Innovacode Latam — hoja de estilos de la landing  ·  SITIO DE LATINOAMERICA
   Sirve: innovacode-latam.com      Gemelo: innovacode-latam/css/estilos.css
   --------------------------------------------------------------------------
   Es el mismo sistema de diseno del sitio de Colombia (misma marca, misma
   paleta, misma cabecera, mismos botones), pero es un archivo aparte y
   autocontenido:
   cada carpeta se despliega sola y no hay que copiar nada "en conjunto".

   QUE TIENE ESTE ARCHIVO Y NO EL DE COLOMBIA:
     .aviso-honesto      la declaracion de que las reglas fiscales de otros
                         paises NO estan resueltas (ver #medida en el HTML)
     .cruce-sitio        la banda que lleva al sitio de Colombia
     .cruce__caja--acento
     .lista-hechos--ancha
     .seccion__cierre / .seccion__acciones
   QUE NO TIENE (no se usa en estas paginas): .destacado y .cruce__caja--alerta
   (el bloque destacado de DIAN CHECK es del sitio de Colombia).

   SI SE CAMBIA ALGO DEL SISTEMA COMUN (paleta, tipografia, botones, cabecera,
   tarjetas, contacto, pie), HAY QUE CAMBIARLO EN LOS DOS ARCHIVOS. Lo que es
   propio de cada sitio —los textos y las secciones— va en el HTML, no aqui.
   --------------------------------------------------------------------------
   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, aviso honesto, 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;
}

/* Lista de hechos con guion de acento. Se usa en el hero y, mas abajo, en la
   seccion de ingenieria probada (por eso NO se llama hero__hechos: nombra lo
   que es, no donde esta). */
.lista-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;
}
.lista-hechos li { position: relative; padding-left: 1.35rem; }
.lista-hechos--ancha {
  /* Mismo componente, columnas mas anchas: aqui los items son frases completas. */
  grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr));
}

.lista-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. AVISO HONESTO ============================ */
/* La declaracion de #medida: el sistema NO cumple las reglas fiscales de otros
   paises. Va con tinte suave y filete de acento porque es una explicacion, no
   una alarma; pero con el mismo peso visual que el resto del contenido, para
   que nadie la lea como letra pequena. */
.aviso-honesto {
  max-width: var(--ancho-lectura);
  margin: 0 0 1.75rem;
  padding: 1.25rem 1.5rem;
  background: var(--fondo-suave);
  border-left: 4px solid var(--acento);
  border-radius: var(--radio-chico);
  color: var(--tinta);
  font-size: 1.03rem;
}
.aviso-honesto:last-child { margin-bottom: 0; }

/* Dos cajas enfrentadas: "se usa tal cual" / "se construye a la medida".
   Mismo patron visual en las dos (fondo suave y borde), y solo la segunda lleva
   el tinte de acento, porque es la que explica que hay trabajo por hacer. */
.comparativa {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 1rem;
  margin: 0 0 1.75rem;
}
.comparativa__caja {
  padding: 1.15rem;
  background: var(--fondo-suave);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
}
.comparativa__caja--acento {
  background: var(--acento-tenue);
  border-color: var(--acento-borde);
}
.comparativa__rotulo {
  margin: 0 0 .35rem;
  color: var(--tinta);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.comparativa__texto { margin: 0; font-size: .95rem; }

/* Cierre de seccion: parrafo que remata despues de una rejilla o una lista. */
.seccion__cierre {
  max-width: var(--ancho-lectura);
  margin: 2rem 0 0;
  font-size: 1.02rem;
}

/* Fila de botones al final de una seccion. */
.seccion__acciones { margin: 1.5rem 0 0; }

/* ============================= 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.
*/
.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. Va 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; }
}