:root {
  --capturam-azul-pizarra: #596074;
  --capturam-verde-agua: #91b5b4;
  --capturam-azul-profundo: #102d3a;
  --capturam-azul-profundo-claro: #1e3c4b;
  --capturam-blanco-calido: #f3f6f4;
  --capturam-blanco: #ffffff;

  --radio: 10px;
  --sombra-suave: 0 2px 10px rgba(16, 45, 58, 0.07);
  --sombra-media: 0 14px 28px rgba(16, 45, 58, 0.12);
  --transicion: 200ms ease;
}

html {
  height: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  color: var(--capturam-azul-profundo);
  background-color: var(--capturam-blanco);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

main {
  flex: 1 0 auto;
}

h1,
h2,
h3 {
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.15;
}

h1 {
  font-size: clamp(2.3rem, 4.3vw, 3.4rem);
}

@media (min-width: 1365px) {
  /* Igual que siempre hasta 1365px (pantalla de referencia, mismo valor
     exacto que arriba en ese punto); a partir de ahí crece con la pantalla
     en vez de quedarse fijo para siempre. */
  h1 {
    font-size: clamp(3.4rem, 1rem + 2.81vw, 5.625rem);
  }
}

.section-title {
  text-align: center;
  margin-bottom: 3rem;
}

h2 {
  /* Igual que siempre hasta 1365px; a partir de ahí crece con la pantalla
     en vez de quedarse fijo para siempre (como le pasaba a h1 antes). */
  font-size: clamp(1.5rem, 0.525rem + 1.73vw, 3.3rem);
  margin-bottom: 1.5rem;
}

p {
  text-align: justify;
}

.lead {
  color: var(--capturam-azul-pizarra);
  max-width: 640px;
  /* Igual que siempre hasta 1365px (pantalla de referencia); a partir de
     ahí crece un poco con la pantalla. */
  font-size: clamp(1.25rem, 0.329rem + 1.08vw, 2.125rem);
}

.lead strong {
  font-weight: 700;
  color: var(--capturam-azul-profundo);
}

.lead-ancho {
  max-width: none;
}

/* Enlaces de texto dentro del contenido (no afecta a botones ni a tarjetas envueltas en <a>) */
main a:not(.btn):not(.text-reset) {
  color: var(--capturam-azul-profundo);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--capturam-verde-agua);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color var(--transicion), text-decoration-color var(--transicion);
}

main a:not(.btn):not(.text-reset):hover {
  color: var(--capturam-azul-pizarra);
  text-decoration-color: var(--capturam-azul-profundo);
}

/* Navegación */
.navbar {
  background-color: var(--capturam-azul-profundo-claro) !important;
  padding-top: 0;
  padding-bottom: 0;
}

.navbar-brand {
  padding-top: 0;
  padding-bottom: 0;
}

.navbar-brand img {
  /* Igual que siempre hasta 1365px (pantalla de referencia); a partir de
     ahí crece con la pantalla en vez de quedarse fijo. */
  height: clamp(124px, 32.94px + 6.67vw, 193px);
}

@media (max-width: 991.98px) {
  .navbar-brand img {
    height: 100px;
  }

  .hero {
    min-height: calc(100vh - 100px);
  }
}

@media (max-width: 575.98px) {
  .navbar-brand img {
    height: 76px;
  }

  .hero {
    min-height: calc(100vh - 76px);
  }
}

.navbar-toggler {
  flex-shrink: 0;
}

.nav-link {
  position: relative;
  color: var(--capturam-blanco-calido) !important;
  font-weight: 600;
  padding-bottom: 4px !important;
  font-size: clamp(1rem, 0.262rem + 0.865vw, 1.55rem);
  opacity: 0.85;
  transition: opacity var(--transicion), color var(--transicion);
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: var(--capturam-verde-agua);
  transition: width var(--transicion);
}

.nav-link:hover,
.nav-link.active {
  color: var(--capturam-verde-agua) !important;
  opacity: 1;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

.navbar .btn-capturam {
  background-color: var(--capturam-verde-agua);
  color: var(--capturam-azul-profundo);
  font-size: clamp(1rem, 0.262rem + 0.865vw, 1.55rem);
}

.navbar .btn-capturam:hover {
  background-color: var(--capturam-blanco);
  color: var(--capturam-azul-profundo);
}

@media (max-width: 1199.98px) {
  .navbar-nav .btn-capturam {
    margin-bottom: 20px;
  }
}

.navbar-toggler {
  border-color: rgba(243, 246, 244, 0.35) !important;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(243, 246, 244, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Desplegable de Servicios */
.navbar .dropdown-toggle::after {
  display: none;
}

.navbar .dropdown {
  /* Extiende el área "hover" hasta el menú para que no se cierre al
     cruzar el hueco entre el enlace y la tarjeta desplegable. */
  padding-bottom: 14px;
  margin-bottom: -14px;
}

.navbar .dropdown-menu {
  display: block;
  position: absolute;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
  pointer-events: none;
  background-color: var(--capturam-blanco);
  border: none;
  border-radius: 14px;
  box-shadow: 0 20px 45px rgba(16, 45, 58, 0.22);
  padding: 10px;
  margin-top: 14px;
  min-width: 320px;
}

.navbar .dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

@media (hover: hover) {
  .navbar .dropdown:hover > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
}

.navbar .dropdown-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--capturam-azul-profundo);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: normal;
  transition: background-color var(--transicion), padding-left var(--transicion);
}

.navbar .dropdown-item::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--capturam-verde-agua);
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  background-color: var(--capturam-blanco-calido);
  color: var(--capturam-azul-profundo);
  padding-left: 20px;
}

/* Que el salto a un ancla no quede tapado por el navbar fijo */
[id] {
  scroll-margin-top: 140px;
}

/* Hero */
.hero {
  min-height: calc(100vh - clamp(124px, 32.94px + 6.67vw, 193px));
  display: flex;
  align-items: center;
  padding: 100px 0;
  position: relative;
  overflow: hidden;
  color: var(--capturam-blanco);
}

.hero-imagen {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-imagen::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      var(--capturam-azul-profundo-claro) 0,
      var(--capturam-azul-profundo-claro) 18px,
      rgba(16, 45, 58, 0.55) 60px,
      rgba(16, 45, 58, 0.4) 95px,
      rgba(16, 45, 58, 0.26) 140px,
      rgba(16, 45, 58, 0.12) 190px,
      rgba(16, 45, 58, 0) 235px
    ),
    linear-gradient(115deg, rgba(16, 45, 58, 0.55) 0%, rgba(16, 45, 58, 0.48) 20%, rgba(16, 45, 58, 0.38) 45%, rgba(16, 45, 58, 0.28) 70%, rgba(16, 45, 58, 0.2) 100%);
}

.hero .container-fluid {
  position: relative;
  z-index: 1;
}

.hero-container {
  /* Margen izquierdo generoso (como el de antes, con el .container de
     Bootstrap) que sigue creciendo un poco en pantallas grandes; el derecho
     se queda pequeño para que el texto tenga sitio de sobra al agrandarse. */
  padding-left: clamp(24px, 15vw, 340px);
  padding-right: clamp(24px, 4vw, 100px);
}

@media (max-width: 767.98px) {
  .hero-container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .hero-cta .btn-capturam-outline {
    padding: 0.5em 1.1em;
    font-size: 0.85rem;
  }
}

.hero h1 {
  /* Ancho relativo a su propio tamaño de letra: crecen siempre pegados,
     así al agrandarse no salta a más líneas. Sin tramos ni saltos: una sola
     fórmula continua, igual que siempre hasta 1365px de ancho (pantalla de
     referencia), y a partir de ahí crece con la pantalla. */
  max-width: 19.4em;
  margin-bottom: 1.25rem;
  color: var(--capturam-blanco);
  font-size: clamp(2rem, 1.174rem + 2.023vw, 6.25rem);
}

.hero .lead {
  max-width: 41.7em;
  margin-bottom: 2rem;
  color: rgba(243, 246, 244, 0.92);
  font-size: clamp(1.05rem, 0.693rem + 0.77vw, 2.625rem);
}

.hero .eyebrow {
  display: inline-block;
  color: var(--capturam-verde-agua);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: clamp(0.8rem, 0.675rem + 0.167vw, 1rem);
  font-weight: 700;
  margin-bottom: 1rem;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.hero-cta .btn-capturam-outline {
  /* Igual que siempre hasta ~1200px; a partir de ahí crece con la pantalla,
     igual que el título y el párrafo del hero. */
  font-size: clamp(1rem, 0.6875rem + 0.417vw, 1.625rem);
}

/* Botones */
.btn-capturam,
.btn-capturam-outline {
  font-weight: 600;
  padding: 0.625em 1.5em;
  border-radius: 6px;
  transition: transform var(--transicion), box-shadow var(--transicion), background-color var(--transicion), color var(--transicion);
}

.btn-capturam {
  background-color: var(--capturam-azul-profundo);
  color: var(--capturam-blanco);
  border: none;
  box-shadow: var(--sombra-suave);
}

.btn-capturam:hover {
  background-color: var(--capturam-azul-pizarra);
  color: var(--capturam-blanco);
  transform: translateY(-2px);
  box-shadow: var(--sombra-media);
}

.btn-capturam-outline {
  background-color: transparent;
  color: var(--capturam-azul-profundo);
  border: 1px solid var(--capturam-azul-profundo);
}

.btn-capturam-outline:hover {
  background-color: var(--capturam-azul-profundo);
  color: var(--capturam-blanco);
  transform: translateY(-2px);
}

.hero .btn-capturam-outline {
  color: var(--capturam-blanco);
  border-color: var(--capturam-blanco);
}

.hero .btn-capturam-outline:hover {
  background-color: var(--capturam-blanco);
  color: var(--capturam-azul-profundo);
}

section {
  padding: 72px 0;
}

/* Filas de servicio (foto + texto alternados) */
.servicio-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.servicio-fila--invertida {
  flex-direction: row-reverse;
}

.servicio-fila-foto,
.servicio-fila-texto {
  flex: 1 1 480px;
}

.servicio-fila-foto {
  /* La foto se posiciona en absoluto (ver la regla siguiente) para que
     nunca influya en la altura de la fila: esa la decide solo el texto.
     Así la foto rellena siempre exactamente esa altura, sin huecos ni
     estirones raros, tenga el texto pocas líneas (Inicio) o muchas
     (Servicios/Sectores, con Alcance + Resultado). */
  position: relative;
  min-height: 320px;
  overflow: hidden;
}

.servicio-fila-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.servicio-fila-texto {
  /* El margen lateral crece con la pantalla, pero con un tope (antes crecía
     sin límite y en pantallas grandes dejaba un hueco enorme). */
  padding: 56px clamp(24px, 6vw, 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Escala base compartida: el título y el párrafo se definen como múltiplos
     de este valor (ver más abajo), así que crecen siempre EN LA MISMA
     proporción entre sí, para cualquier ancho de pantalla, sin excepciones. */
  font-size: clamp(1rem, 0.75rem + 0.333vw, 1.65rem);
}

.servicio-numero {
  color: var(--capturam-verde-agua);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
}

.servicio-fila-texto .servicio-numero {
  /* Relativo a la misma escala que el título y el párrafo de la fila, para
     que no se quede pequeño y suelto en pantallas grandes. */
  font-size: 1em;
  margin-bottom: 0.5em;
}

.servicio-fila-texto .resultado-servicio span {
  /* Mismo tamaño que el texto del recuadro (antes era un tamaño fijo
     pequeño que se quedaba diminuto en pantallas grandes). */
  font-size: 1em;
}

.servicio-fila-texto h2,
.servicio-fila-texto h3 {
  color: var(--capturam-azul-profundo);
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 1.6em;
  margin-bottom: 1rem;
  max-width: clamp(560px, 398px + 16.3vw, 1050px);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.servicio-fila-texto p {
  color: var(--capturam-azul-pizarra);
  font-size: 1.25em;
  max-width: clamp(560px, 398px + 16.3vw, 1050px);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.bg-suave {
  background-color: var(--capturam-blanco-calido);
}

.inicio-sectores {
  /* Misma idea que en "Ingeniería y desarrollo con visión integral": una
     escala compartida de la que título, texto y tarjetas son múltiplos, así
     crecen todos a la vez y en proporción en pantallas grandes. También la
     usa "Últimas publicaciones", para que ambos títulos queden igual. */
  font-size: clamp(1rem, 0.7rem + 0.5vw, 1.65rem);
}

.inicio-sectores h2 {
  font-size: 1.5em;
}

.inicio-sectores .sectores-intro {
  font-size: 1.1em;
  max-width: none;
}

.inicio-sectores .card-sector h3 {
  font-size: 1.15em;
}

.inicio-sectores .card-sector-body p {
  font-size: 1em;
}

.cta-final {
  font-size: clamp(1rem, 0.75rem + 0.333vw, 1.65rem);
  text-align: center;
}

.cta-final h2 {
  font-size: 1.5em;
  max-width: clamp(560px, 398px + 16.3vw, 1050px);
  margin-left: auto;
  margin-right: auto;
}

.cta-final .lead {
  font-size: 1.1em;
  max-width: clamp(540px, 380px + 15.6vw, 1000px);
  margin-left: auto;
  margin-right: auto;
}

.col-formulario {
  max-width: 640px;
  margin: 0 auto;
}

.form-mensaje {
  margin-bottom: 20px;
  padding: 12px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
}

.form-mensaje--exito {
  background-color: rgba(145, 181, 180, 0.18);
  color: var(--capturam-azul-profundo);
  border: 1px solid var(--capturam-verde-agua);
}

.form-mensaje--error {
  background-color: #fdecea;
  color: #7a2e2e;
  border: 1px solid #e3a5a0;
}

.campo-oculto {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.contacto-directo {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(16, 45, 58, 0.12);
}

.contacto-directo h2 {
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--capturam-azul-pizarra);
  margin-bottom: 16px;
}

.contacto-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.contacto-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  background-color: var(--capturam-blanco-calido);
  border: 1px solid rgba(16, 45, 58, 0.15);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--capturam-azul-profundo);
  transition: border-color var(--transicion), background-color var(--transicion), transform var(--transicion);
}

.contacto-chip svg {
  flex-shrink: 0;
  color: var(--capturam-verde-agua);
}

a.contacto-chip {
  text-decoration: none;
}

a.contacto-chip:hover {
  border-color: var(--capturam-verde-agua);
  background-color: rgba(145, 181, 180, 0.14);
  transform: translateY(-2px);
}

.contacto-chip--pendiente {
  opacity: 0.6;
  border-style: dashed;
}

.texto-legal {
  max-width: 1100px;
}

.texto-legal p {
  text-align: justify;
}

.justificado {
  text-align: justify;
}

/* Página de error (404, etc.). El <main> normal no es flex, así que su
   único hijo no crece para llenar el hueco que deja el "flex:1 0 auto" de
   <main> en pantallas muy altas — sin esto, el bloque se queda pegado
   arriba con un hueco en blanco debajo, en vez de centrado de verdad. */
main:has(.pagina-error) {
  display: flex;
  flex-direction: column;
}

.pagina-error {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 0 auto;
}

.pagina-error-codigo {
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(4rem, 12vw, 8rem);
  line-height: 1;
  color: var(--capturam-verde-agua);
  margin-bottom: 0.5rem;
}

.pagina-error .section-title {
  margin-bottom: 1rem;
}

.pagina-error .lead {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
  text-align: center;
}

.pagina-error-acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

/* Tarjetas */
.card-servicio,
.card-sector {
  border: 1px solid #e2e5ea;
  border-radius: var(--radio);
  height: 100%;
  background-color: var(--capturam-blanco);
  overflow: hidden;
  transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}

.card-servicio {
  padding: 28px;
}

body .card-servicio:hover,
body .card-sector:hover {
  transform: scale(1.012);
  box-shadow: var(--sombra-media);
  border-color: var(--capturam-verde-agua);
  position: relative;
  z-index: 1;
}

.card-servicio h3,
.card-sector h3 {
  color: var(--capturam-azul-profundo);
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

.card-servicio p,
.card-sector p {
  text-align: left;
}

/* Miniatura de las tarjetas de publicaciones: vista previa modesta en la
   lista, la versión grande se ve en el visor (abajo) al hacer clic. */
.tarjeta-publicacion {
  display: flex;
  flex-direction: column;
}

.tarjeta-publicacion .card-sector-img {
  aspect-ratio: 16 / 9;
  /* Siempre crece para llenar el hueco que deje el cuerpo (haya texto o
     no) — el cuerpo ocupa solo lo que necesita y la vista previa se queda
     con el resto, en vez de quedarse pequeña con un hueco en blanco
     debajo. */
  flex: 1 1 auto;
  min-height: 100px;
}

/* A diferencia del resto de fotos de la web (encuadradas a propósito para
   su hueco), las que sube el CEO para una publicación pueden venir en
   cualquier proporción — con "cover" (la regla de ".card-sector-img" de
   más abajo) una foto vertical se recortaba igual que le pasaba a los PDF
   verticales. Aquí se ve la foto entera siempre, sin recortar, encima de
   un fondo con la misma foto recortada y difuminada — así una foto muy
   vertical u horizontal respecto a la caja no deja barras en blanco (igual
   que la portada de un álbum en Spotify). */
.vista-previa-imagen {
  position: relative;
  overflow: hidden;
}

.vista-previa-imagen-fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(18px) brightness(0.85);
  /* El difuminado emborrona también hacia fuera del propio borde de la
     imagen; escalarla un poco de más evita que se note ese borde nítido
     asomando por los lados. */
  transform: scale(1.15);
}

.vista-previa-imagen-principal {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
}

/* Versión compacta: solo para el aperitivo de "Últimas publicaciones" en
   Inicio (tres tarjetas pequeñas que invitan a ver la página completa,
   sin competir en tamaño con el resto de la portada). En Publicaciones se
   usa el tamaño normal de arriba. Igual que siempre hasta 1920px; a partir
   de ahí crece un poco (antes se quedaba fija para siempre). */
.publicaciones-compactas {
  font-size: clamp(1rem, 0.52rem + 0.4vw, 1.5rem);
}

.tarjeta-publicacion-compacta .card-sector-body {
  padding: 12px 16px 16px;
}

.tarjeta-publicacion-compacta .card-sector-body h3 {
  font-size: 0.95em;
  margin-bottom: 0.3rem;
}

.tarjeta-publicacion-compacta .card-sector-body .servicio-numero {
  font-size: 0.7em;
}

.tarjeta-publicacion-compacta .card-sector-body p {
  font-size: 0.85em;
}

.tarjeta-publicacion-compacta .card-sector-body .btn {
  font-size: 0.8em;
  padding: 0.5em 1.1em;
}

.tarjeta-publicacion .card-sector-body {
  display: flex;
  flex-direction: column;
  /* Compacto: ocupa solo lo que su contenido necesita — la vista previa de
     arriba es quien crece para llenar el resto de la tarjeta. */
  flex: 0 0 auto;
}

/* Vista previa de un PDF: mientras se genera la miniatura real de la
   primera página (o si algo falla, p. ej. el CDN de pdf.js bloqueado), se
   ve este recuadro con icono de documento — misma proporción que la
   miniatura de imagen para que ambos tipos de tarjeta se vean igual de
   cuidados. */
.vista-previa-pdf {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(135deg, var(--capturam-azul-profundo), var(--capturam-azul-pizarra));
  color: var(--capturam-blanco);
  overflow: hidden;
}

.vista-previa-pdf span {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* La miniatura real (canvas de PDF.js) tapa el icono en cuanto termina de
   renderizarse. */
.vista-previa-pdf-canvas {
  position: absolute;
  inset: 0;
}

/* Texto de la publicación: justificado (a diferencia del resto de tarjetas
   de la web) y con estilo propio para negrita y enlaces, ya que el CEO
   puede escribir **negrita** y [texto](url) al crear la publicación. */
.tarjeta-publicacion p {
  text-align: justify;
}

.tarjeta-publicacion p strong {
  color: var(--capturam-azul-profundo);
}

.tarjeta-publicacion p a {
  color: var(--capturam-verde-agua);
  font-weight: 600;
  text-decoration: underline;
}

.tarjeta-publicacion p a:hover {
  color: var(--capturam-azul-profundo);
}


/* Toda la tarjeta es clicable (abre el visor), salvo enlaces/botones. */
.tarjeta-publicacion-clicable {
  cursor: pointer;
}

/* Visor a pantalla completa de una publicación (imagen o PDF), con una "X"
   para cerrar — se crea con JS (publicaciones.js) la primera vez que se
   abre una publicación. */
.visor-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(11, 43, 60, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}

/* El atributo "hidden" del navegador tiene menos prioridad que cualquier
   regla CSS normal — sin esto, "display:flex" de arriba gana siempre y el
   visor se queda visible (vacío) aunque JS lo marque como oculto. */
.visor-overlay[hidden] {
  display: none;
}

.visor-cerrar {
  position: fixed;
  top: 16px;
  right: 20px;
  z-index: 2001;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--capturam-blanco);
  color: var(--capturam-azul-profundo);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--sombra-media);
}

.visor-cerrar:hover {
  background: var(--capturam-verde-agua);
  color: var(--capturam-blanco);
}

.visor-contenido {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.visor-contenido img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
}

.visor-contenido iframe {
  /* Antes tenía un tope fijo de 900px, así que en pantallas grandes se veía
     diminuto en medio de un hueco enorme. Ahora ocupa todo el alto
     disponible y bastante más ancho, sin pasarse del hueco disponible en
     pantallas estrechas/móvil (max-width cubre ese caso). */
  height: 100%;
  width: min(92vw, 1800px);
  max-width: 100%;
  border: none;
  border-radius: 4px;
  background: var(--capturam-blanco);
}

/* Visor de texto completo de una publicación: mismo fondo oscurecido, "X"
   y z-index que el visor de PDF/imagen de arriba — cuál de los dos se ve
   por delante lo decide el orden en el DOM (el que se acaba de abrir se
   mueve al final, ver "traerAlFrente" en publicaciones.js), no el z-index.
   La tarjeta va centrada con scroll propio en vez de ocupar toda la
   pantalla — es texto, no un documento a pantalla completa. */
.visor-texto-contenido {
  background: var(--capturam-blanco);
  border-radius: var(--radio);
  width: 100%;
  max-width: 700px;
  max-height: 100%;
  overflow-y: auto;
  padding: 40px;
  box-shadow: var(--sombra-media);
}

.visor-texto-contenido h3 {
  color: var(--capturam-azul-profundo);
  margin: 0.3rem 0 1.2rem;
}

.visor-texto-cuerpo {
  text-align: justify;
}

.visor-texto-cuerpo strong {
  color: var(--capturam-azul-profundo);
}

.visor-texto-cuerpo a {
  color: var(--capturam-verde-agua);
  font-weight: 600;
  text-decoration: underline;
}

.visor-texto-cuerpo a:hover {
  color: var(--capturam-azul-profundo);
}

.visor-texto-boton-media {
  display: block;
  margin-top: 1.8rem;
}

/* Botón para abrir el texto completo desde encima del PDF/imagen (esquina
   opuesta a la "X" de cerrar, para no chocar con ella). */
.visor-boton-texto {
  position: fixed;
  left: 20px;
  bottom: 24px;
  z-index: 2001;
  border: none;
  border-radius: 999px;
  background: var(--capturam-blanco);
  color: var(--capturam-azul-profundo);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 10px 20px;
  cursor: pointer;
  box-shadow: var(--sombra-media);
}

.visor-boton-texto:hover {
  background: var(--capturam-verde-agua);
  color: var(--capturam-blanco);
}

/* Botón "ver más" de las publicaciones con texto largo: abre el visor de
   texto completo de arriba (estilo LinkedIn: se trunca en la tarjeta y se
   lee entero en el visor, sin recargar ni navegar). */
.enlace-ver-mas {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--capturam-verde-agua);
  font-weight: 600;
  font-size: inherit;
  font-family: inherit;
  cursor: pointer;
}

.enlace-ver-mas:hover {
  text-decoration: underline;
}

/* Proyectos y Publicaciones se habían quedado sin la "escala compartida"
   que ya tiene el resto de tarjetas de la web (Sectores, Empresa...): el
   título y el texto se quedaban con el tamaño fijo de siempre mientras el
   resto de la página crecía en pantallas grandes. Igual que siempre hasta
   1920px (cualquier portátil u ordenador normal, no solo la pantalla de
   referencia de 1365px), a partir de ahí crecen todos juntos y en
   proporción — solo en monitores realmente muy anchos. */
.proyectos-grid,
.publicaciones-grid {
  font-size: clamp(1rem, 0.52rem + 0.4vw, 1.8rem);
}

.proyectos-grid .card-sector h3,
.publicaciones-grid .tarjeta-publicacion h3 {
  font-size: 1.15em;
}

.proyectos-grid .card-sector-body p,
.publicaciones-grid .tarjeta-publicacion p {
  font-size: 1em;
}

.proyectos-grid .servicio-numero,
.publicaciones-grid .servicio-numero {
  font-size: 0.9em;
}

.card-sector-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}

.card-sector-body {
  padding: 20px 24px 24px;
}

/* Principios de trabajo (Empresa), Modelo de negocio y párrafos sueltos de
   Cómo trabajamos: igual que siempre hasta 1365px (misma proporción
   título/texto/número que antes); a partir de ahí crece de forma moderada
   con la pantalla. */
.principios-trabajo,
.modelo-negocio,
.como-trabajamos-main {
  font-size: clamp(1rem, 0.232rem + 0.9vw, 2.2rem);
}

.principios-trabajo .card-servicio h3,
.modelo-negocio .card-sector h3 {
  font-size: 1.15em;
}

.principios-trabajo .card-servicio p,
.modelo-negocio .card-sector-body p {
  font-size: 1em;
}

.principios-trabajo .servicio-numero,
.modelo-negocio .servicio-numero {
  font-size: 0.9em;
}

/* Foto de sección (Empresa, Cómo trabajamos) */
.foto-seccion {
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra-suave);
  margin: 32px 0 8px;
}

.foto-seccion img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* Foto a ancho completo (divisor entre secciones, p. ej. Proyectos) */
.foto-ancha {
  width: 100%;
  max-height: 420px;
  overflow: hidden;
}

.foto-ancha img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}

/* Footer */
footer.site-footer {
  flex-shrink: 0;
  background-color: var(--capturam-azul-profundo-claro);
  color: var(--capturam-blanco-calido);
  padding: 24px 0 20px;
  font-size: 0.9rem;
}

footer.site-footer a {
  color: var(--capturam-blanco-calido);
  text-decoration: none;
  border-bottom: 1px solid rgba(243, 246, 244, 0.4);
  transition: border-color var(--transicion);
}

footer.site-footer a:hover {
  border-color: var(--capturam-blanco-calido);
}

.footer-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(243, 246, 244, 0.15);
}

.footer-logo {
  /* Igual que siempre hasta 1365px; a partir de ahí crece con la pantalla. */
  height: clamp(210px, 55.1px + 11.35vw, 326px);
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.25));
}

.footer-contacto h3 {
  color: var(--capturam-verde-agua);
  font-size: clamp(0.85rem, 0.223rem + 0.735vw, 1.32rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.footer-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.footer-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.64em 1.28em;
  border-radius: 999px;
  background-color: rgba(243, 246, 244, 0.06);
  border: 1px solid rgba(243, 246, 244, 0.2);
  font-size: clamp(0.88rem, 0.232rem + 0.76vw, 1.365rem);
  font-weight: 500;
  color: var(--capturam-blanco-calido);
  transition: border-color var(--transicion), background-color var(--transicion), transform var(--transicion);
}

.footer-chip svg {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  color: var(--capturam-verde-agua);
}

footer.site-footer a.footer-chip {
  text-decoration: none;
  border-bottom: 1px solid rgba(243, 246, 244, 0.2);
}

footer.site-footer a.footer-chip:hover {
  border-color: var(--capturam-verde-agua);
  background-color: rgba(145, 181, 180, 0.14);
  transform: translateY(-2px);
}

.footer-chip--pendiente {
  opacity: 0.6;
  border-style: dashed;
}

.footer-bottom {
  font-size: clamp(0.85rem, 0.223rem + 0.735vw, 1.32rem);
  color: rgba(243, 246, 244, 0.75);
}

@media (max-width: 767.98px) {
  .footer-bottom {
    align-items: center;
    text-align: center;
  }
}

.table-proyectos th {
  background-color: var(--capturam-blanco-calido);
  color: var(--capturam-azul-profundo);
  font-weight: 600;
}

/* Línea de tiempo */
.timeline {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  position: relative;
  /* Igual que siempre hasta 1365px; a partir de ahí título, texto y número
     crecen juntos (son múltiplos de esta misma escala). */
  font-size: clamp(1rem, 0.232rem + 0.9vw, 2.2rem);
}

.timeline-item {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-bottom: 32px;
  position: relative;
}

/* Tramo inferior: del centro del número (real, no aproximado) hasta el
   siguiente paso, atravesando el padding-bottom de 32px. Se ancla en las
   dimensiones reales de cada fila, así que no depende de que la foto sea
   más alta que el texto (evita que el palo se salga en móvil, donde el
   texto puede ocupar más que la foto). */
.timeline-item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 1.125em;
  top: calc(50% - 16px);
  bottom: 0;
  width: 2px;
  background: linear-gradient(var(--capturam-verde-agua), var(--capturam-azul-pizarra));
}

/* Tramo superior: desde el inicio de la fila hasta el centro de su propio
   número. */
.timeline-item:not(:first-child)::after {
  content: "";
  position: absolute;
  left: 1.125em;
  top: 0;
  height: calc(50% - 16px);
  width: 2px;
  background: linear-gradient(var(--capturam-verde-agua), var(--capturam-azul-pizarra));
}

/* El último paso no tiene padding-bottom, así que su centro real está
   exactamente al 50%, no al 50% - 16px. */
.timeline-item:not(:first-child):last-child::after {
  height: 50%;
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-numero {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25em;
  height: 2.25em;
  border-radius: 50%;
  background-color: var(--capturam-azul-profundo);
  color: var(--capturam-blanco);
  font-weight: 700;
  box-shadow: var(--sombra-suave);
}

.timeline-item > div {
  flex: 1;
  background-color: var(--capturam-blanco);
  border: 1px solid #e2e5ea;
  border-radius: var(--radio);
  padding: 18px 24px;
  transition: box-shadow var(--transicion), border-color var(--transicion);
}

.timeline-item:hover > div {
  box-shadow: var(--sombra-suave);
  border-color: var(--capturam-verde-agua);
}

.timeline-item h3 {
  color: var(--capturam-azul-profundo);
  font-size: 1.1em;
  margin-bottom: 4px;
}

.timeline-item p {
  margin-bottom: 0;
  color: var(--capturam-azul-pizarra);
  font-size: 1em;
  /* Sin justificar: la columna de texto es estrecha (comparte fila con
     la foto), y justificar ahí deja huecos muy grandes entre palabras,
     sobre todo en móvil. */
  text-align: left;
}

/* Fotito dentro de cada paso de la línea de tiempo */
.timeline-contenido {
  display: flex;
  align-items: center;
  gap: 18px;
}

.timeline-foto {
  /* Más grande que antes (72px), y sigue creciendo en pantallas grandes en
     vez de quedarse fija. */
  width: clamp(100px, 26.3px + 5.4vw, 190px);
  height: clamp(100px, 26.3px + 5.4vw, 190px);
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.resultado-destacado {
  border-left: 3px solid var(--capturam-verde-agua);
  background-color: var(--capturam-blanco-calido);
  border-radius: 0 var(--radio) var(--radio) 0;
  padding: 16px 20px;
  margin-top: 8px;
  font-weight: 600;
}

.placeholder-note {
  background-color: #fff8e6;
  border: 1px dashed #e7bf6a;
  border-radius: 6px;
  padding: 12px 16px;
  font-size: 0.9rem;
  color: #6b4c11;
}

/* Aparición suave al hacer scroll */
.revelar {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.revelar.visible {
  opacity: 1;
  transform: translateY(0);
}

.resultado-servicio {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid #e2e5ea;
  color: var(--capturam-azul-profundo);
}

.resultado-servicio span {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--capturam-verde-agua);
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .revelar {
    opacity: 1;
    transform: none;
    transition: none;
  }

  
}