/* ==========================================================================
   NOVAÍN Consultores — hoja de estilos única
   --------------------------------------------------------------------------
   Este es el ÚNICO archivo de estilos de la web. Si cambias algo aquí,
   cambia en todas las páginas a la vez.

   Si solo quieres cambiar textos, NO toques este archivo: los textos están
   en los archivos .html.

   No se usan fuentes de Google ni de ningún servidor externo, a propósito:
   así la web no envía datos a terceros y no necesita aviso de cookies.
   ========================================================================== */



/* --------------------------------------------------------------------------
   0. TIPOGRAFÍAS
   Están alojadas en la carpeta "fonts" de esta misma web, no se cargan desde
   Google ni desde ningún servidor externo. Son libres (licencia SIL OFL 1.1).
   Space Grotesk para titulares, IBM Plex Sans para el texto.
   Ver fonts/LEEME.txt.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* --------------------------------------------------------------------------
   1. COLORES Y MEDIDAS
   Los colores están tomados del logo. Si algún día cambia la identidad
   visual, basta con cambiar los valores de aquí abajo.
   -------------------------------------------------------------------------- */
:root {
  --gris-marca:   #666666;   /* gris del logotipo */
  --verde:        #339933;   /* verde del logotipo */
  --verde-oscuro: #006E00;   /* verde de la gota */

  --tinta:        #24272a;   /* color del texto normal */
  --gris-fondo:   #33383c;   /* fondo de los bloques oscuros */
  --gris-pie:     #24272a;   /* fondo del pie */
  --tinta-suave:  #55595e;   /* texto secundario */
  --fondo:        #ffffff;
  --fondo-suave:  #f4f6f3;   /* fondo de bloques destacados */
  --linea:        #dfe3dd;   /* líneas y separadores */

  --titulares:    "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --texto:        "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;

  /* UN SOLO SISTEMA DE ANCHOS. Todo el contenido se alinea con estas dos
     medidas: nada debe llevar un ancho propio distinto. */
  /* DOS ANCHOS, Y SOLO DOS:
     --ancho       = cabecera, pie, bloques de color y rejillas
     --ancho-texto = cualquier párrafo de texto corrido
     Ningún elemento debe llevar una medida propia distinta de estas dos. */
  --ancho:        68rem;
  --ancho-texto:  46rem;
}


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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

p { margin: 0 0 1.1em; max-width: var(--ancho-texto); }

a { color: var(--verde-oscuro); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--verde); }

/* El foco tiene que verse: hay gente que navega con teclado. */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: 3px;
}

img { max-width: 100%; height: auto; }

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 1.5rem;
}


/* --------------------------------------------------------------------------
   3. TIPOGRAFÍA
   El detalle propio de esta web son los rótulos en mayúsculas con las letras
   separadas, igual que el logotipo, y una línea verde corta encima.
   -------------------------------------------------------------------------- */
h1 {
  font-family: var(--titulares);
  font-size: clamp(2.1rem, 4.4vw, 3.3rem);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.018em;
  margin: 0 0 1.2rem;
}

h2 {
  font-family: var(--titulares);
  font-size: 1.4rem;
  line-height: 1.3;
  font-weight: 600;
  margin: 3rem 0 1rem;
}

h3 {
  font-family: var(--titulares);
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 2.2rem 0 0.5rem;
}

/* Rótulo pequeño en mayúsculas (el "eyebrow" sobre los títulos) */
.rotulo {
  display: block;
  font-family: var(--titulares);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gris-marca);
  margin: 0 0 1.7rem;
}
.rotulo::before {
  content: "";
  display: block;
  width: 3.5rem;
  height: 4px;
  background: var(--verde);
  margin-bottom: 1rem;
}

/* Frase de entrada, algo mayor que el texto normal */
.entradilla {
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--tinta);
  max-width: var(--ancho-texto);
  margin-bottom: 1.4rem;
}


/* --------------------------------------------------------------------------
   4. CABECERA Y MENÚ
   -------------------------------------------------------------------------- */
/* Franja verde fina en el borde superior de todas las páginas */
.barra-superior {
  height: 6px;
  background: linear-gradient(90deg, var(--verde-oscuro) 0%, var(--verde) 100%);
}

.cabecera {
  border-bottom: 1px solid var(--linea);
  padding: 1.4rem 0;
}
.cabecera .contenedor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
/* ZONA EDITABLE: tamaño del logo en la cabecera.
   230px en escritorio; el tamaño de móvil está más abajo, en el bloque
   @media (max-width: 40rem), y se deja en 150px. */
.logo img { display: block; width: 230px; }

.menu {
  font-family: var(--titulares);
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  font-size: 0.9375rem;
}
.menu a {
  color: var(--tinta-suave);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.menu a:hover { color: var(--tinta); border-bottom-color: var(--linea); }
/* La página en la que estás aparece marcada en verde */
.menu a[aria-current="page"] { color: var(--tinta); border-bottom-color: var(--verde); }



/* --------------------------------------------------------------------------
   REJILLA DE DOS COLUMNAS  (el patrón de toda la web)
   Izquierda: el rótulo o el título. Derecha: el texto.
   En móvil se apila. No hace falta tocar nada de aquí.
   -------------------------------------------------------------------------- */
.doble {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem 0;
}
.doble > * { min-width: 0; }
/* Dentro de la rejilla los párrafos no llevan medida propia:
   los limita la columna. */
.doble p, .doble .entradilla { max-width: var(--ancho-texto); }
.doble ul { max-width: var(--ancho-texto); }

/* Una sola columna: el rótulo o el título arriba, el texto debajo. */
.doble > .izquierda { margin-bottom: 1.1rem; }
.doble > .izquierda .rotulo,
.doble > .izquierda h2 { margin-top: 0; margin-bottom: 0; }
.doble > .derecha > *:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   5. SECCIONES
   -------------------------------------------------------------------------- */
/* PORTADA A DOS COLUMNAS
   En pantalla ancha, el titular va a la izquierda y el texto a la derecha,
   así se ocupa todo el ancho y no queda un hueco vacío al lado.
   En móvil se apila, primero el titular y debajo el texto. */
.portada { padding: 4.5rem 0 3.5rem; }
.portada-doble h1 { margin-bottom: 1.2rem; }

.seccion { padding: 3.2rem 0; border-top: 1px solid var(--linea); }
.seccion:first-of-type { border-top: 0; }

.bloque-suave {
  background: var(--fondo-suave);
  padding: 3.2rem 0;
}

/* Bloque oscuro: da presencia al gris de la marca.
   Se usa en "Qué hacemos" de la portada. */
.bloque-oscuro {
  background: var(--gris-fondo);
  color: #f2f4f2;
  padding: 3.8rem 0;
  position: relative;
  overflow: hidden;
}

/* Retícula técnica de fondo, como el papel milimetrado de un plano.
   Se dibuja con líneas del propio CSS: no es una imagen.
   Para quitarla, borra este bloque .bloque-oscuro::before. */
.bloque-oscuro::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(to right,  rgba(255,255,255,.055) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.055) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(to right,  rgba(255,255,255,.10)  0 1px, transparent 1px 160px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.10)  0 1px, transparent 1px 160px);
}
.bloque-oscuro .contenedor { position: relative; z-index: 1; }
.bloque-oscuro .rotulo {
  color: #ffffff;
  font-size: 1.15rem;
  letter-spacing: 0.14em;
  margin-bottom: 2rem;
}
.bloque-oscuro .rotulo::before { background: var(--verde); width: 4.5rem; height: 4px; }
.bloque-oscuro h2 { color: #ffffff; margin-top: 0; }
.bloque-oscuro a { color: #a9e2a9; }

/* Lista de tareas / servicios con marca verde delante */
.lista-marcada {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: var(--ancho-texto);
}
.lista-marcada li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.7rem;
}
.lista-marcada li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.5rem;
  height: 2px;
  background: var(--verde);
}

/* Lista grande: la de "Qué hacemos". Más cuerpo de letra y dos columnas
   en pantallas anchas, para que tenga presencia. */
.lista-grande {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.lista-grande {
  counter-reset: paso;
}
.lista-grande li {
  position: relative;
  padding-left: 4.6rem;
  font-size: 1.1875rem;
  line-height: 1.4;
  border-top: 1px solid rgba(255,255,255,.16);
  padding-top: 1.3rem;
  padding-bottom: .3rem;
  counter-increment: paso;
}
/* El número no es decoración: la lista es el orden real en que ocurre
   el trabajo, del planteamiento al recurso. Grande a propósito: es lo
   primero que se lee de cada línea. */
.lista-grande li::before {
  content: counter(paso, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.1rem;
  font-family: var(--titulares);
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1;
  color: var(--verde);
  letter-spacing: -0.01em;
}

/* Índice de servicios de la portada.
   Es una lista con filetes, no una rejilla de tarjetas: cada servicio ocupa
   una línea con su nombre a la izquierda y la descripción a la derecha. */
.indice { margin-top: 1rem; border-top: 1px solid var(--linea); }
.indice > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.25rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--linea);
}
/* En pantalla ancha, las dos columnas coinciden exactamente con el reparto
   de la portada: mismo eje, misma separación. */

.indice h3 {
  margin: 0;
  font-size: 1.0625rem;
  color: var(--tinta);
}
.indice p {
  margin: 0;
  color: var(--tinta-suave);
  font-size: 0.98rem;
  max-width: none;
}
.indice > div:hover h3 { color: var(--verde-oscuro); }


/* Servicio en la página de Servicios */
.servicio {
  border-top: 1px solid var(--linea);
  padding-top: 1.8rem;
  margin-top: 2.6rem;
}
.servicio h2 { margin-top: 0; font-size: 1.25rem; }

/* LOS SERVICIOS NO VAN A DOS COLUMNAS DE REJILLA.
   Un título corto a la izquierda y un párrafo largo a la derecha dejaba
   media página vacía. Aquí el título va encima y el texto ocupa todo el
   ancho, alineado con los mismos márgenes que el resto de la página.
   Para que las líneas no queden interminables, el texto se reparte en dos
   columnas de lectura con la misma separación que el resto de la web. */
.servicio .izquierda { margin-bottom: 0.7rem; }

/* Ficha de persona (página de Equipo)
   Foto a la izquierda, texto a la derecha. En móvil se apila.
   Mientras no haya fotos, se ve un recuadro gris de reserva. */
.ficha {
  border-top: 1px solid var(--linea);
  padding-top: 1.6rem;
  margin-top: 2.4rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem 2.5rem;
}
.ficha h3 { margin-top: 0; margin-bottom: 0.15rem; font-size: 1.1875rem; }
.ficha .cargo {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--verde-oscuro);
  margin-bottom: 0.8rem;
}
.ficha p { margin-bottom: 0.9rem; max-width: var(--ancho-texto); }
.ficha p:last-of-type { margin-bottom: 0; }

/* Foto: cuadro fijo, siempre del mismo tamaño para las cuatro */
.ficha .foto { width: 11rem; }
.ficha .foto img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--fondo-suave);
  filter: grayscale(100%);
}
/* Recuadro de reserva mientras no hay foto. Cuando se pongan las cuatro
   fotos, este bloque .sin-foto puede borrarse del CSS. */
.ficha .sin-foto {
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--fondo-suave);
  border: 1px dashed var(--linea);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris-marca);
}

@media (min-width: 44rem) {
  .ficha { grid-template-columns: 11rem minmax(0, 1fr); }
}


/* Enlace a LinkedIn dentro de una ficha normal */
.ficha .enlace-li {
  display: inline-block;
  margin-top: 0.9rem;
  font-size: 0.9rem;
}

/* Datos de contacto */
.datos { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.datos li { margin-bottom: 0.6rem; }
.datos .etiqueta {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris-marca);
}
.datos a, .datos strong { font-size: 1.125rem; font-weight: 500; }

/* Enlace de "ver más" */
.enlace-mas {
  display: inline-block;
  margin-top: 1.4rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid var(--verde);
  padding-bottom: 1px;
  color: var(--tinta);
}
.enlace-mas:hover { color: var(--verde-oscuro); }



/* --------------------------------------------------------------------------
   REJILLA ANCHA DE DOS COLUMNAS
   Solo para contenido que llena las dos columnas: listas y los bloques
   de color. Nunca para un título corto contra un párrafo largo.
   -------------------------------------------------------------------------- */
@media (min-width: 58rem) {
  /* grid-auto-flow: column hace que la lista baje por la primera columna
     (01 a 04) y siga en la segunda (05 a 07), en vez de ir en zigzag.
     grid-template-rows fija cuántos elementos caben en cada columna: con 8
     puntos son 4 y 4. Si añades o quitas un punto, ajusta ese número a la
     mitad del total, redondeando hacia arriba. */
  .lista-grande {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
    gap: 0 4rem;
  }
  .indice > div {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 4rem;
    align-items: baseline;
  }
  /* En el bloque oscuro de consorcios los dos párrafos van uno en cada
     columna, a todo el ancho. */
  .bloque-sangre .derecha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 4rem;
    align-items: start;
  }
  .bloque-sangre .derecha p { max-width: none; margin-bottom: 0; }
}


/* --------------------------------------------------------------------------
   CIFRAS
   Dos datos con el número a cuerpo grande. Solo se usan en el bloque oscuro
   de Grandes consorcios. Van pocos y grandes a propósito: en cuanto se
   ponen cinco o seis, dejan de tener fuerza.
   -------------------------------------------------------------------------- */
.cifras {
  list-style: none;
  padding: 0;
  margin: 2.2rem 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem 4rem;
}
.cifras li {
  border-top: 1px solid rgba(255,255,255,.22);
  padding-top: 1rem;
}
.cifras .numero {
  display: block;
  font-family: var(--titulares);
  font-size: 3.4rem;
  font-weight: 600;
  line-height: 1;
  color: var(--verde);
  letter-spacing: -0.02em;
  margin-bottom: 0.4rem;
}
.cifras .detalle {
  display: block;
  font-size: 1.0625rem;
  line-height: 1.4;
  color: #e6eae6;
  max-width: 22rem;
}

@media (min-width: 58rem) {
  .cifras { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   6. PÁGINAS LEGALES
   Texto más estrecho y más pequeño, que es mucho contenido seguido.
   -------------------------------------------------------------------------- */
.legal { padding: 3.5rem 0 4rem; max-width: var(--ancho-texto); }
.legal h2 { font-size: 1.125rem; margin-top: 2.4rem; }
.legal p, .legal li { font-size: 1rem; }
.legal ul { padding-left: 1.2rem; }
.legal li { margin-bottom: 0.4rem; }


/* Bloque a sangre completa: rompe el ancho de columna y toca los dos
   bordes de la pantalla. Se usa una sola vez, en "Grandes consorcios",
   para que tenga fuerza y no se banalice repitiéndolo. */
.bloque-sangre {
  background: var(--gris-fondo);
  color: #f2f4f2;
  padding: 4.2rem 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  position: relative;
  overflow: hidden;
}
.bloque-sangre .rotulo {
  color: #ffffff;
  font-size: 1.15rem;
  letter-spacing: 0.14em;
  margin-bottom: 1.6rem;
}
.bloque-sangre .rotulo::before { background: var(--verde); width: 4.5rem; height: 4px; }
.bloque-sangre p { font-size: 1.0625rem; line-height: 1.6; }
.bloque-sangre::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(to right,  rgba(255,255,255,.05) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.05) 0 1px, transparent 1px 32px);
}
.bloque-sangre .contenedor { position: relative; z-index: 1; }

@media (max-width: 40rem) {
  .bloque-sangre { padding: 3rem 0; }
}

/* --------------------------------------------------------------------------
   7. PIE
   -------------------------------------------------------------------------- */
.pie {
  background: var(--gris-pie);
  color: #c9cfc9;
  border-top: 4px solid var(--verde);
  margin-top: 0;
  padding: 2.8rem 0 3rem;
  font-size: 0.9375rem;
}
.pie p { max-width: none; margin-bottom: 0.5rem; }
.pie strong { color: #ffffff; }
.pie a { color: #dfe4df; }
.pie a:hover { color: #a9e2a9; }
.pie-legal { font-size: 0.875rem; margin-top: 1rem; }



/* --------------------------------------------------------------------------
   9. MARCA DE AGUA DEL LOGOTIPO
   El arco y la gota del logotipo, redibujados como dibujo vectorial dentro
   del propio archivo (no es una imagen aparte, no hay nada que subir).
   Solo se usa en la portada, grande y muy tenue. Para quitarla, borra este
   apartado completo.
   -------------------------------------------------------------------------- */
.portada { position: relative; overflow: hidden; }
.portada::before {
  content: "";
  position: absolute;
  right: -8rem;
  top: -6rem;
  width: 26rem;
  height: 26rem;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%3E%3Cpath%20d%3D%22M135%2039.4%20A70%2070%200%201%201%2065%2039.4%22%20fill%3D%22none%22%20stroke%3D%22rgba%28102%2C102%2C102%2C0.10%29%22%20stroke-width%3D%2217%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M100%2018%20C130%2058%20146%2086%20146%20106%20A46%2046%200%201%201%2054%20106%20C54%2086%2070%2058%20100%2018%20Z%22%20fill%3D%22rgba%2851%2C153%2C51%2C0.09%29%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  pointer-events: none;
}
.portada .contenedor { position: relative; z-index: 1; }

/* En pantallas estrechas la marca de agua estorba: se oculta. */
@media (max-width: 60rem) {
  .portada::before { display: none; }
}

/* --------------------------------------------------------------------------
   8. MÓVIL
   -------------------------------------------------------------------------- */
@media (max-width: 40rem) {
  body { font-size: 1rem; }
  .logo img { width: 150px; }
  .menu { gap: 1.1rem; font-size: 0.875rem; width: 100%; }
  .portada { padding: 2.8rem 0 2.4rem; }
  .seccion, .bloque-suave { padding: 2.4rem 0; }
  .bloque-oscuro { padding: 2.6rem 0; }
  .lista-grande li { font-size: 1.0625rem; }
}


/* --------------------------------------------------------------------------
   10. MODO OSCURO
   Se activa solo si el visitante tiene su móvil u ordenador configurado en
   modo oscuro. No hay botón: lo decide su sistema.
   Solo se cambian los colores; el resto del diseño es el mismo.
   Para desactivarlo, borra este apartado completo.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --tinta:        #e6eae6;   /* texto */
    --tinta-suave:  #a6ada7;   /* texto secundario */
    --fondo:        #191c1e;   /* fondo de la página */
    --fondo-suave:  #202426;   /* bloques destacados */
    --linea:        #2f3437;   /* separadores */
    --gris-fondo:   #23282b;   /* bloque oscuro */
    --gris-pie:     #101315;   /* pie */
    --verde-oscuro: #6ecb6e;   /* los enlaces en verde oscuro no se leerían */
  }

  /* El logotipo es gris oscuro y sobre fondo negro pierde contraste:
     se aclara un poco. */
  .logo img { filter: brightness(1.45); }

  /* Las líneas de la retícula técnica, más tenues sobre fondo oscuro */
  .bloque-oscuro::before { opacity: .6; }
}

/* Respeta a quien tiene desactivadas las animaciones en su sistema */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}