/* Estilos del sitio de 369 Consulting.
   Mobile first (RNF02): lo base es para el celular y las media queries con
   min-width agregan lo de las pantallas más grandes.

   Orden: fuentes · tokens · base · utilidades · cabecera y menú · secciones
   apiladas · contenido de la landing · botones · formularios · páginas internas
   · pie · WhatsApp · textos legales · reducir movimiento. */

/* Fuentes alojadas en el propio sitio: cargan más rápido que desde otro servidor
   (RNF03) y no pasan datos de los visitantes a terceros (RNF01). Licencia SIL OFL 1.1.
   Son fuentes "variables": un solo archivo trae todos los grosores del rango
   indicado en font-weight. Subconjunto latino: incluye á, é, ñ, ü, ¿ y ¡.
   font-display: swap muestra el texto enseguida con la fuente del sistema y la
   cambia cuando termina de cargar, en lugar de dejar la página en blanco. */
@font-face {
  font-family: "Inter";
  src: url("/assets/fuentes/inter-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("/assets/fuentes/montserrat-latin.woff2") format("woff2");
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
}

/* Tokens: todos los valores de diseño en un solo lugar.
   Los colores de marca se midieron en el logo. */
:root {
  /* Marca */
  --azul-marca: #012755;        /* fondo del logo */
  --azul-marca-claro: #013368;  /* arcos del logo */
  --azul-marca-oscuro: #011e46;
  --verde-marca: #b9d536;       /* el "6" del logo. Sobre azul: 8,9:1. Sobre blanco: 1,7:1,
                                   así que en fondos claros va solo como detalle, nunca como texto. */
  --verde-marca-claro: #cde35f;

  /* Neutros */
  --color-texto: #14213a;
  --color-texto-suave: #475569;
  --color-fondo: #f5f7fb;
  --color-fondo-alterno: #e7edf6;
  --color-superficie: #ffffff;
  --color-borde-campo: #6b7a90;      /* 4,4:1 sobre blanco: el campo se distingue (RNF08) */
  --color-sobre-oscuro-suave: #c3cfe2;
  --color-error: #b42318;
  --color-whatsapp: #128c7e;

  /* Tipografía: Montserrat (geométrica, como "CONSULTING" del logo) e Inter (muy legible) */
  --fuente-titulos: "Montserrat", system-ui, sans-serif;
  --fuente-texto: "Inter", system-ui, sans-serif;
  --texto-chico: 0.875rem;
  --titulo-1: clamp(2.25rem, 1.5rem + 3.4vw, 4rem);
  --titulo-2: clamp(1.75rem, 1.4rem + 1.8vw, 2.75rem);
  --titulo-3: 1.2rem;

  /* Espacios y formas */
  --ancho-contenido: 68rem;
  --margen-lateral: clamp(1rem, 6vw, 4rem);
  --radio: 0.75rem;
  --radio-lamina: 1.5rem;
  --sombra-lamina: 0 -1rem 2.5rem rgb(1 39 85 / 0.18);
  --sombra-tarjeta: 0 0.5rem 1.5rem rgb(1 39 85 / 0.08);

  /* Alto de la cabecera fija. Valor inicial: main.js lo reemplaza por la medida real. */
  --alto-cabecera: 4rem;
}

/* Base ---------------------------------------------------------------------- */

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

/* Todo scroll automático (saltos del menú, "Saltar al contenido", el foco al navegar con Tab)
   deja libre el alto de la cabecera fija: nada queda escondido debajo de ella (RNF08). */
html {
  scroll-padding-top: var(--alto-cabecera);
}

/* Scroll suave al tocar un enlace del menú, salvo con "reducir movimiento" (RNF08). */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--fuente-texto);
  line-height: 1.6;
  color: var(--color-texto);
  background: var(--color-fondo);
}

h1, h2, h3 {
  margin: 0 0 0.75rem;
  font-family: var(--fuente-titulos);
  line-height: 1.15;
  color: var(--azul-marca);
}

h1 { font-size: var(--titulo-1); font-weight: 800; }
h2 { font-size: var(--titulo-2); font-weight: 800; }
h3 { font-size: var(--titulo-3); font-weight: 700; }

p { margin: 0 0 1rem; }

a {
  color: var(--azul-marca);
  text-underline-offset: 0.2em;
}

/* Foco visible en todo el sitio (RNF08). Sobre fondos azules pasa a verde. */
:focus-visible {
  outline: 3px solid var(--azul-marca-claro);
  outline-offset: 3px;
}

/* Utilidades ------------------------------------------------------------------ */

/* Texto solo para lectores de pantalla: no se ve, pero se lee (RNF08). */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* "Saltar al contenido": escondido arriba hasta que recibe el foco con Tab (RNF08). */
.saltar {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 20;
  padding: 0.5rem 1rem;
  color: #fff;
  background: var(--azul-marca);
  transform: translateY(-200%);
}

.saltar:focus {
  transform: none;
  outline-color: var(--verde-marca);
}

/* B5 · Cabecera fija y menú ------------------------------------------------- */

.cabecera {
  /* Pegada arriba siempre. z-index la deja por encima de las secciones apiladas. */
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4rem;
  padding: 0.5rem var(--margen-lateral);
  color: #fff;
  background: var(--azul-marca);
  border-bottom: 1px solid var(--azul-marca-claro);
}

.cabecera :focus-visible {
  outline-color: var(--verde-marca);
}

/* Marca PROVISORIA hecha con texto (con el "6" en verde, como el logo).
   Se reemplaza por el logo en SVG cuando lo mande el cliente. */
.cabecera__marca {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--fuente-titulos);
  color: #fff;
  text-decoration: none;
}

.marca__numero {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.marca__seis {
  color: var(--verde-marca);
}

.marca__texto {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.menu__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu__lista a {
  padding-block: 0.25rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.menu__lista a:hover {
  border-bottom-color: var(--color-sobre-oscuro-suave);
}

/* Sección actual: la marca main.js con aria-current, que el lector de pantalla también anuncia.
   Se distingue por la línea de abajo, no solo por el color. */
.menu__lista a[aria-current="true"] {
  border-bottom-color: var(--verde-marca);
}

/* El botón solo aparece con JS (clase .js en <html>). Sin JS no funcionaría,
   así que en ese caso la lista queda siempre a la vista. */
.menu__boton {
  display: none;
}

.js .menu__boton {
  display: inline-block;
  padding: 0.5rem 1rem;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 999px;
  cursor: pointer;
}

/* Celular con JS: la lista se pliega y se despliega debajo de la cabecera. */
.js .menu__lista {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem var(--margen-lateral);
  background: var(--azul-marca);
  border-bottom: 1px solid var(--azul-marca-claro);
}

/* El mismo atributo que lee el lector de pantalla decide si la lista se ve. */
.js .menu__boton[aria-expanded="true"] + .menu__lista {
  display: flex;
}

/* Desde 768 px: menú en línea, siempre visible y sin botón. */
@media (min-width: 48rem) {
  .js .menu__boton {
    display: none;
  }

  .js .menu__lista {
    display: flex;
    position: static;
    flex-direction: row;
    gap: 0.25rem 1.5rem;
    padding: 0;
    background: none;
    border: 0;
  }
}

/* B4 · Secciones apiladas ----------------------------------------------------
   Ojo: sticky deja de funcionar si algún contenedor padre tiene overflow: hidden
   o auto. No ponerle overflow a body, main ni a ningún envoltorio de las secciones. */

.seccion {
  /* Ocupa al menos la pantalla menos la cabecera. svh es el alto con la barra del
     navegador del celular visible: así no salta cuando la barra se esconde al bajar. */
  min-height: calc(100svh - var(--alto-cabecera));

  /* Contenido centrado con un ancho máximo y sin envoltorio extra: el relleno
     lateral es el mayor entre el margen normal y lo que sobra a cada costado. */
  padding-block: clamp(3rem, 8vw, 6rem);
  padding-inline: max(var(--margen-lateral), (100% - var(--ancho-contenido)) / 2);

  /* sticky: la sección se queda pegada al llegar arriba, y la siguiente
     (que viene después en el HTML) se pinta encima al subir. */
  position: sticky;

  /* Dónde se pega:
     - si entra en la pantalla, justo debajo de la cabecera;
     - si es más alta, se pega por abajo, para que se lea completa antes
       de que la tape la siguiente.
     --alto lo mide main.js. Sin JS queda sin definir, top se vuelve inválido
     y la sección no se pega: todo se lee normal, sin efecto. */
  top: min(var(--alto-cabecera), calc(100svh - var(--alto)));

  /* Fondo opaco para tapar la de abajo; sombra y esquinas para que se note que sube. */
  background: var(--color-fondo);
  border-radius: var(--radio-lamina) var(--radio-lamina) 0 0;
  box-shadow: var(--sombra-lamina);

  /* B4b · Mientras la tapa la siguiente, se achica un poco. --tapado va de 0 a 1
     y lo calcula main.js. Sin JS vale 0: no hay efecto. */
  transform: scale(calc(1 - 0.05 * var(--tapado, 0)));
  transform-origin: center top;
}

.seccion:nth-of-type(even) {
  background: var(--color-fondo-alterno);
}

/* B4b · Capa azul oscuro sobre la sección: su opacidad crece a medida que la tapan.
   transform y opacity los resuelve la placa de video sin recalcular el diseño de
   la página, por eso el efecto es fluido. */
.seccion::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--azul-marca-oscuro);
  opacity: calc(0.4 * var(--tapado, 0));
  pointer-events: none; /* no bloquea clics ni selección de texto */
}

/* Contenido de la landing ------------------------------------------------------ */

/* Título de sección con la barrita verde de la marca debajo. */
.seccion h2::after {
  content: "";
  display: block;
  width: 3rem;
  height: 0.3rem;
  margin-top: 0.75rem;
  background: var(--verde-marca);
  border-radius: 1rem;
}

/* Líneas de 65 caracteres como máximo: más largas cansan al leer. */
.seccion p {
  max-width: 65ch;
}

/* Inicio: fondo azul como el logo, con dos arcos dibujados con gradientes
   (sin imágenes: no pesan nada). overflow: clip recorta sin romper el sticky. */
.seccion--inicio {
  display: grid;
  align-content: center;
  color: #fff;
  background:
    radial-gradient(circle at 0 0, transparent 0 26vmax, var(--azul-marca-claro) 26.1vmax 33vmax, transparent 33.1vmax),
    radial-gradient(circle at 100% 70%, transparent 0 18vmax, var(--azul-marca-claro) 18.1vmax 23vmax, transparent 23.1vmax),
    var(--azul-marca);
  border-radius: 0;
  box-shadow: none;
  overflow: clip;
}

.seccion--inicio h1 {
  max-width: 16ch;
  color: #fff;
}

.seccion--inicio p {
  font-size: 1.125rem;
  color: var(--color-sobre-oscuro-suave);
}

.seccion--inicio :focus-visible {
  outline-color: var(--verde-marca);
}

/* Antetítulo: el lema del logo, en mayúsculas espaciadas como "CONSULTING". */
.seccion__antetitulo {
  font-family: var(--fuente-titulos);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.seccion--inicio .seccion__antetitulo {
  color: var(--verde-marca);
}

/* Servicios: tarjetas en grilla. min(100%, 16rem) evita que se desborden en pantallas angostas. */
.servicios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1.25rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.servicio {
  padding: 1.5rem;
  background: var(--color-superficie);
  border-top: 4px solid var(--verde-marca);
  border-radius: var(--radio);
  box-shadow: var(--sombra-tarjeta);
}

.servicio__titulo {
  margin-bottom: 0.5rem;
}

.servicio p {
  margin: 0;
}

/* Contacto: formulario y datos en dos columnas desde 960 px. */
.contacto-datos {
  align-self: start;
  margin-top: 2rem;
  padding: 1.5rem;
  font-style: normal;
  background: var(--color-superficie);
  border-left: 4px solid var(--verde-marca);
  border-radius: var(--radio);
  box-shadow: var(--sombra-tarjeta);
}

.contacto-datos p {
  margin: 0 0 0.5rem;
}

@media (min-width: 60rem) {
  .seccion--contacto {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    column-gap: 3rem;
    align-content: start;
  }

  /* El título y la bajada ocupan las dos columnas. */
  .seccion--contacto > :not(.formulario, .formulario__exito, .contacto-datos) {
    grid-column: 1 / -1;
  }

  .contacto-datos {
    margin-top: 0;
  }
}

/* Botones ---------------------------------------------------------------------- */

.boton {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  font-family: var(--fuente-titulos);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  background: var(--azul-marca);
  border: 2px solid var(--azul-marca);
  border-radius: 999px;
  cursor: pointer;
}

.boton:hover {
  background: var(--azul-marca-claro);
  border-color: var(--azul-marca-claro);
}

.boton--secundario {
  color: var(--azul-marca);
  background: transparent;
}

.boton--secundario:hover {
  color: #fff;
}

/* Variantes para fondo azul. Verde con texto azul: 8,9:1. */
.boton--destacado {
  color: var(--azul-marca);
  background: var(--verde-marca);
  border-color: var(--verde-marca);
}

.boton--destacado:hover {
  background: var(--verde-marca-claro);
  border-color: var(--verde-marca-claro);
}

.boton--claro {
  color: #fff;
  background: transparent;
  border-color: #fff;
}

.boton--claro:hover {
  color: var(--azul-marca);
  background: #fff;
  border-color: #fff;
}

.seccion__acciones,
.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* Formularios (RF02, RF03, RF06) -------------------------------------------- */

.formulario {
  display: grid;
  gap: 1.25rem;
  max-width: 40rem;
}

/* Cada campo: etiqueta arriba, control, ayuda y error debajo. */
.formulario__campo {
  display: grid;
  gap: 0.375rem;
}

.formulario label {
  font-weight: 600;
}

/* En una grilla los elementos se estiran a todo el ancho; el botón, no. */
.formulario > .boton {
  justify-self: start;
}

.formulario__campo input:not([type="checkbox"]),
.formulario__campo select,
.formulario__campo textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font: inherit; /* 16 px: en el iPhone evita el zoom automático al tocar el campo */
  color: inherit;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde-campo);
  border-radius: 0.5rem;
}

/* Texto de ejemplo (placeholder): cada navegador usa su propio gris, y en algunos no llega
   al contraste mínimo. Con un color propio queda en 7,6:1 en todos. */
.formulario ::placeholder {
  color: var(--color-texto-suave);
  opacity: 1;
}

/* Casilla de consentimiento: la casilla a la izquierda y el texto al lado. */
.formulario__campo--casilla {
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: 0.6rem;
}

.formulario__campo--casilla input {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.25rem 0 0;
  accent-color: var(--azul-marca);
}

.formulario__campo--casilla label {
  font-weight: 400;
}

.formulario__campo--casilla .formulario__ayuda,
.formulario__campo--casilla .formulario__error {
  grid-column: 1 / -1;
}

.formulario__ayuda {
  margin: 0;
  font-size: var(--texto-chico);
  color: var(--color-texto-suave);
}

/* Error: rojo oscuro (más de 5:1) y además en negrita, para no depender solo del color. */
.formulario__error {
  margin: 0;
  font-size: var(--texto-chico);
  font-weight: 600;
  color: var(--color-error);
}

.formulario [aria-invalid="true"] {
  border-color: var(--color-error);
}

/* Aviso general del envío (sin conexión, límite de envíos). Vacío, no ocupa lugar. */
.formulario__estado {
  margin: 0;
  font-weight: 600;
  color: var(--color-error);
}

.formulario__estado:empty {
  display: none;
}

/* Mientras se envía, el botón queda deshabilitado (evita el doble envío). */
.boton:disabled {
  opacity: 0.7;
  cursor: progress;
}

/* Mensaje de éxito que reemplaza al formulario. */
.formulario__exito {
  align-self: start;
  max-width: 40rem;
  padding: 1.5rem;
  background: var(--color-superficie);
  border-left: 4px solid var(--verde-marca);
  border-radius: var(--radio);
  box-shadow: var(--sombra-tarjeta);
}

.formulario__exito-titulo {
  font-family: var(--fuente-titulos);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--azul-marca);
}

.formulario__exito p:last-child {
  margin-bottom: 0;
}

/* Campo trampa: fuera de la pantalla. No se usa display: none porque
   algunos bots se saltean los campos ocultos así. */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Páginas internas (postulaciones, privacidad, 404) ------------------------- */

.pagina {
  max-width: 44rem;
  margin-inline: auto;
  padding: clamp(2.5rem, 7vw, 5rem) var(--margen-lateral);
}

.pagina h1 {
  font-size: var(--titulo-2);
}

.pagina h1::after {
  content: "";
  display: block;
  width: 3rem;
  height: 0.3rem;
  margin-top: 0.75rem;
  background: var(--verde-marca);
  border-radius: 1rem;
}

/* Pie: redes (RF08), privacidad, copyright y leyendas legales ---------------- */

.pie {
  padding: 3rem max(var(--margen-lateral), (100% - var(--ancho-contenido)) / 2) 6rem; /* abajo deja lugar al botón de WhatsApp */
  color: var(--color-sobre-oscuro-suave);
  background: var(--azul-marca-oscuro);
}

.pie a {
  color: #fff;
}

.pie :focus-visible {
  outline-color: var(--verde-marca);
}

.pie__redes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.pie__redes a {
  font-weight: 600;
}

/* Leyendas de la Ley 25.326: chicas, pero con contraste suficiente (más de 10:1). */
.pie__legal {
  max-width: 60rem;
  margin-top: 1.5rem;
  font-size: 0.75rem;
}

/* B6 · Botón flotante de WhatsApp (RF07) -------------------------------------
   Va con el verde oscuro de WhatsApp y no con el claro: el ícono blanco sobre el
   claro no llega al contraste mínimo de 3:1 que piden los elementos gráficos (RNF08). */
.whatsapp {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 15;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  color: #fff;
  background: var(--color-whatsapp);
  border-radius: 50%;
  box-shadow: 0 0.25rem 1rem rgb(0 0 0 / 0.25);
}

.whatsapp svg {
  width: 1.75rem;
  height: 1.75rem;
}

.whatsapp:focus-visible {
  outline: 3px solid var(--azul-marca);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
  .whatsapp {
    transition: transform 0.2s ease;
  }

  .whatsapp:hover {
    transform: scale(1.08);
  }
}

/* Textos legales (privacidad, RNF01) ----------------------------------------- */

.texto-legal h2 {
  margin-top: 2rem;
  font-size: 1.25rem;
}

/* Aviso de borrador: se saca al publicar la versión final. */
.aviso-borrador {
  padding: 0.75rem 1rem;
  background: #fef3c7;
  border-left: 4px solid #b45309;
}

/* Reducir movimiento (RNF08) --------------------------------------------------
   Quien lo pidió en su sistema ve las secciones una debajo de otra, sin efectos. */
@media (prefers-reduced-motion: reduce) {
  .seccion {
    position: static;
    transform: none;
  }

  .seccion::after {
    display: none;
  }
}