/* ==========================================================================
   BENÍTEZ IGLESIAS — Hoja de estilos del sitio institucional
   Tipografía oficial: Arial (Regular / Italic / Bold / Bold Italic)
   Colores oficiales: Pantone 293C (#003DA6), Pantone 429C (#A4A9AD),
   Azul complementario (#0074BC)
   ========================================================================== */

/* Transiciones nativas de navegación entre páginas (Versión 2.0, sitio
   multipágina). Sin librerías: API del navegador. Donde no hay soporte,
   la navegación es instantánea — nunca se rompe nada. Respeta
   prefers-reduced-motion automáticamente (el navegador desactiva la
   transición cuando el sistema lo pide). */
@view-transition{ navigation: auto; }
@media (prefers-reduced-motion: reduce){
  @view-transition{ navigation: none; }
}

:root{
  /* ---- Paleta oficial (Manual de Identidad Corporativa) ---- */
  --azul-293:      #003DA6;   /* Pantone 293C — color institucional principal */
  --azul-293-700:  #002E80;   /* variante oscura, para fondos y contraste AA */
  --azul-293-900:  #001A4D;   /* navy profundo, para el hero y el pie */
  --gris-429:      #A4A9AD;   /* Pantone 429C — color institucional secundario */
  --azul-comp:     #0074BC;   /* azul complementario — uso decorativo y detalles */

  /* ---- Neutros editoriales (soporte, no forman parte del manual) ---- */
  --tinta:         #14181F;   /* casi-negro para texto largo, evita el "exceso de azul" */
  --tinta-suave:   #4A505B;
  --gris-linea:    #DCDFE3;
  --gris-fondo:    #F5F6F7;
  --crema:         #FAF9F6;
  --blanco:        #FFFFFF;

  /* ---- Tipografía oficial ---- */
  --f-base: Arial, "Helvetica Neue", Helvetica, "Liberation Sans", sans-serif;

  /* ---- Escala tipográfica fluida ---- */
  --fs-hero:   clamp(2.5rem, 4.4vw, 4.35rem);
  --fs-h1:     clamp(2.1rem, 3.6vw, 3.4rem);
  --fs-h2:     clamp(1.6rem, 2.4vw, 2.3rem);
  --fs-h3:     clamp(1.15rem, 1.4vw, 1.4rem);
  --fs-lead:   clamp(1.05rem, 1.6vw, 1.3rem);
  --fs-body:   1rem;
  --fs-small:  0.875rem;
  --fs-eyebrow: 0.78rem;

  /* ---- Ritmo / espaciado ---- */
  --seccion-py: clamp(4.5rem, 9vw, 8.5rem);
  --contenedor-px: clamp(1.5rem, 5vw, 4rem);
  --max-w: 1360px;
  --max-w-texto: 720px;

  --dur: 700ms;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------------------------------------------------------------------- */
/* Reset base                                                             */
/* ---------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
body{
  margin: 0;
  font-family: var(--f-base);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--tinta);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,p,figure{ margin: 0; }
button{ font-family: inherit; cursor: pointer; }
svg{ display:block; }

.contenedor{
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--contenedor-px);
}

/* Compensa el encabezado fijo al navegar por anclas (nav, pie, skip-link) */
main section[id],
#contenido{
  scroll-margin-top: 104px;
}
@media (max-width: 900px){
  main section[id],
  #contenido{ scroll-margin-top: 84px; }
}

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:1rem; top:-4rem;
  background:var(--azul-293); color:#fff; padding:.75rem 1.25rem;
  z-index:200; transition: top .2s ease; border-radius: 2px;
}
.skip-link:focus{ top:1rem; }

:focus-visible{
  outline: 2px solid var(--azul-comp);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------- */
/* Utilidades tipográficas editoriales                                    */
/* ---------------------------------------------------------------------- */
.eyebrow{
  display:flex; align-items:center; gap:.75rem;
  font-size: var(--fs-eyebrow);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--azul-293);
}
.eyebrow::before{
  content:"";
  width: 28px; height: 2px;
  background: var(--azul-comp);
  flex: none;
}
.eyebrow--claro{ color: rgba(255,255,255,.86); }
.eyebrow--claro::before{ background: rgba(255,255,255,.55); }

.lead{
  font-size: var(--fs-lead);
  color: var(--tinta-suave);
  max-width: var(--max-w-texto);
  line-height: 1.55;
}

.frase-marca{
  font-style: italic;
  font-weight: 700;
}

.boton{
  display:inline-flex; align-items:center; gap:.65rem;
  font-weight:700; font-size: .95rem;
  padding: .95rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 2px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform .3s var(--ease);
  white-space: nowrap;
}
.boton svg{ width:16px; height:16px; transition: transform .35s var(--ease); }
.boton:hover svg{ transform: translateX(5px); }
.boton:hover{ transform: translateY(-1px); }

.boton--primario{
  background: var(--azul-293);
  color:#fff;
}
.boton--primario:hover{ background: var(--azul-293-700); }

.boton--claro{
  background: #fff;
  color: var(--azul-293);
}
.boton--claro:hover{ background: rgba(255,255,255,.88); }

.boton--fantasma{
  border-color: rgba(255,255,255,.4);
  color: #fff;
}
.boton--fantasma:hover{ border-color:#fff; background: rgba(255,255,255,.08); }

.enlace-flecha{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:700; font-size:.92rem; color: var(--azul-293);
  border-bottom: 1px solid rgba(0,61,166,.28);
  padding-bottom: .15rem;
  transition: border-color .3s var(--ease), gap .3s var(--ease), color .3s var(--ease);
}
.enlace-flecha svg{ width:14px; height:14px; transition: transform .3s var(--ease); }
.enlace-flecha:hover{ border-color: var(--azul-293); gap:.75rem; }
.enlace-flecha:hover svg{ transform: translateX(3px); }
/* Dentro del Hero, este enlace es el CTA secundario: se aligera su
   peso visual (color, grosor y tamaño) para que "Contáctenos" quede
   como la acción claramente predominante. */
.enlace-flecha--claro{
  color: rgba(255,255,255,.75);
  border-color: rgba(255,255,255,.32);
  font-weight:600;
  font-size:.88rem;
}
.enlace-flecha--claro:hover{ color:#fff; border-color: rgba(255,255,255,.75); }

/* ---------------------------------------------------------------------- */
/* Header                                                                  */
/* ---------------------------------------------------------------------- */
.encabezado{
  position: fixed; inset: 0 0 auto 0;
  z-index: 100;
  padding-block: 1.35rem;
  transition: padding var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform .45s var(--ease);
  background: transparent;
}
.encabezado__fila{
  display:flex; align-items:center; justify-content:space-between; gap: 2rem;
}
.encabezado__logo{ display:flex; align-items:center; }
.encabezado__logo img{ height: 46px; width:auto; transition: opacity .35s ease; }
.encabezado__logo .logo-oscuro{ display:block; }
.encabezado__logo .logo-claro{ display:none; }
/* Inicio: el logotipo se traslada al Hero (ver .hero__marca-logo). Este
   bloque se conserva únicamente como espaciador invisible, para que la
   navegación y las acciones mantengan la misma posición ya establecida
   en el resto del sitio. */
.encabezado__logo--fantasma{ visibility:hidden; }

.encabezado__nav{
  display:flex; align-items:center; gap: clamp(1rem, 2vw, 2.1rem);
}
.encabezado__nav a:not(.boton){
  font-size: .88rem; font-weight:700; color: var(--tinta);
  position:relative; padding-block:.3rem;
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.encabezado__nav a:not(.boton)::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background: currentColor; transition: right .35s var(--ease);
}
.encabezado__nav a:not(.boton):hover::after{ right:0; }
.encabezado__cta--nav{ display:none; }
.encabezado__enlace--movil{ display:none; }

.encabezado__acciones{ display:flex; align-items:center; gap:1.25rem; }
.encabezado__cta{ padding: .7rem 1.35rem; font-size:.86rem; }

/* ---- Selector de idioma ---- */
.encabezado__idiomas{
  display:flex; align-items:center; gap:.5rem;
  font-size:.82rem; font-weight:700; letter-spacing:.03em;
}
.encabezado__idiomas span{ color: rgba(20,24,31,.3); }
.encabezado__idiomas a{ color: rgba(20,24,31,.55); transition: color var(--dur) var(--ease); }
.encabezado__idiomas a:hover,
.encabezado__idiomas a[aria-current="true"]{ color: var(--tinta); }
.encabezado__idiomas--nav{ display:none; }

.encabezado--sobre-claro .encabezado__nav a,
.encabezado--sobre-claro{ color: var(--tinta); }

/* Estado "compacto": fondo sólido al hacer scroll */
.encabezado.is-compacto{
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(20,24,31,.08);
  padding-block: .85rem;
}
/* El logo y el texto del encabezado se mantienen en tono oscuro tanto
   al inicio (sobre el campo claro / fotografía muy poco velada del
   Hero) como en el estado compacto — ya no se necesita una variante
   clara del logo, porque el Hero dejó de tener un fondo oscuro detrás
   del encabezado. */
.encabezado__cta.boton--fantasma{
  border-color: rgba(20,24,31,.25); color: var(--tinta);
}
.encabezado__cta.boton--fantasma:hover{
  border-color: var(--tinta); background: rgba(20,24,31,.05);
}

.encabezado.is-oculto{ transform: translateY(-108%); }

.menu-toggle{
  display:none; flex-direction:column; gap:5px;
  align-items:center; justify-content:center;
  width:44px; height:44px;
  background:none; border:0; padding:.5rem; z-index:110;
}
.menu-toggle span{ width:24px; height:2px; background: var(--tinta); transition: all .3s ease; }
/* Cuando el panel del menú móvil está abierto (fondo azul oscuro a
   pantalla completa), el icono necesita volver a ser claro — el botón
   se mantiene por encima del panel (z-index) precisamente para poder
   cerrarlo. */
.encabezado__nav.is-abierto ~ .encabezado__acciones .menu-toggle span{ background:#fff; }
.menu-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ---------------------------------------------------------------------- */
/* HERO                                                                    */
/* ---------------------------------------------------------------------- */
.hero{
  position: relative;
  overflow:hidden;
  background: var(--crema); /* respaldo si la imagen no carga */
}
/* Fotografía a sangre total: ocupa todo el hero, de borde a borde y de
   arriba abajo (no un panel contenido a un lado). El contenido de texto
   se superpone sobre ella en la mitad izquierda, con un velo de
   legibilidad — una sola composición fotográfica continua, no dos
   campos separados. object-position está calibrado para la fotografía
   actual (dos profesionales, relación de aspecto ≈2.4:1) de modo que
   ambas personas queden completas en pantalla. Si se reemplaza la foto
   por otra de proporción distinta, revisar este valor. */
.hero__campo-foto{
  position:absolute; inset:0; z-index:0;
  overflow:hidden;
}
/* Envoltura interior, ligeramente sobredimensionada (30px de margen en
   vertical) para alojar el desplazamiento de `data-parallax` sin que
   se llegue a revelar un borde del contenedor — el parallax mueve esta
   capa, nunca el propio panel a sangre. */
.hero__campo-foto-mueve{
  position:absolute; top:-30px; left:0; right:0; bottom:-30px;
}
.hero__campo-foto-mueve img{
  width:100%; height:100%; object-fit:cover; object-position: 60% 40%;
  display:block;
}
/* Velo de legibilidad, muy corto: solo el extremo izquierdo recibe un
   tinte claro, con una transición rápida — a partir de ~30% del ancho
   la fotografía ya se ve completamente natural, con su color y
   contraste normales, mucho antes de llegar a la mujer. No es un
   fondo ni un panel, es un recurso de legibilidad puntual para las
   primeras palabras del titular. La franja superior, para que el
   encabezado —transparente al inicio— se mantenga legible al pasar
   sobre la fotografía, es igual de discreta. */
.hero__velo{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(250,249,246,.68) 0%, rgba(250,249,246,.42) 14%, rgba(250,249,246,.26) 28%, rgba(250,249,246,0) 48%),
    linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 9%);
}

.hero__grid{
  position:relative; z-index:1;
  display:flex;
  min-height: 100svh;
}

.hero__campo-texto{
  position:relative;
  display:flex; flex-direction:column; justify-content:center;
  color: var(--tinta);
  padding: clamp(7.5rem,11vw,9.5rem) clamp(2.5rem,5vw,4.5rem) clamp(3.5rem,7vw,5rem) var(--contenedor-px);
}

.hero__contenido{ max-width: 520px; margin-top: -3.25rem; }
/* Identidad de la firma dentro del propio Hero (el encabezado, en
   Inicio, queda sin logotipo — ver .encabezado__logo--fantasma): el
   isotipo oficial "BI" (el mismo archivo ya usado en La Firma, sin
   redibujar) junto al nombre y la leyenda de la firma, como una sola
   unidad de marca, tipografiada en el mismo azul institucional que el
   resto del sitio para asegurar nitidez y contraste a cualquier
   tamaño (a diferencia del logotipo plano, que no reescala con
   nitidez ni permite ajustar color). En escritorio vive arriba, a la
   misma altura que la navegación del encabezado (fuera del bloque de
   texto centrado, que ya no la incluye), en la misma línea visual del
   header — nunca una segunda fila. Compartir esa línea con la
   navegación exige un tamaño compacto (el tamaño grande original,
   pensado para vivir junto al titular, chocaba con los enlaces); en
   móvil recupera su tamaño original — ver el bloque responsive. */
.hero__marca{
  position:absolute; z-index:2;
  /* La referencia vertical (--marca-top) la calcula main.js a partir del
     centro real de la fila del encabezado (.encabezado__fila), para que
     quede exactamente alineada con "Inicio" y el resto de la navegación
     sin depender de un valor fijo adivinado. 45px queda como respaldo
     únicamente por si JS no llega a ejecutarse. */
  top: var(--marca-top, 45px); left: var(--contenedor-px);
  transform: translateY(-50%);
  display:flex; align-items:center; gap: .8rem;
}
.hero__marca-bi{
  height: clamp(32px, 3vw, 40px);
  width:auto; flex-shrink:0;
}
.hero__marca-texto{
  padding-left: .8rem;
  border-left: 1px solid var(--gris-linea);
}
.hero__marca-nombre{
  font-size: clamp(.95rem, 1.3vw, 1.1rem);
  font-weight:700; letter-spacing:.015em; white-space:nowrap;
  text-transform: uppercase;
  color: var(--azul-293);
  margin-bottom: .15rem;
}
.hero__marca-sub{
  font-size: clamp(.62rem, .7vw, .72rem);
  font-weight:600;
  color: var(--tinta-suave);
  letter-spacing:.02em;
}
.hero h1{
  font-size: clamp(2.1rem, 3.6vw, 4rem);
  font-weight:700;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--azul-293-900);
  margin-bottom: 1.7rem;
}
.hero h1 em{
  font-style: italic; font-weight:700; color: var(--azul-293-900);
  display:block;
}
.hero__desc{
  font-size: var(--fs-lead);
  color: var(--tinta);
  text-shadow:
    0 0 2px rgba(250,249,246,.9),
    0 0 6px rgba(250,249,246,.9),
    0 0 6px rgba(250,249,246,.9),
    0 0 14px rgba(250,249,246,.75),
    0 0 14px rgba(250,249,246,.75);
  max-width: 480px;
  margin-bottom: 2.4rem;
}
.hero__acciones{ display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; }

.hero__scroll{
  position:absolute; left: var(--contenedor-px); bottom: 2.3rem; z-index:2;
  display:flex; align-items:center; gap:.75rem;
  color: var(--tinta-suave); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
}
.hero__scroll .linea{
  width:1px; height:34px; background: var(--gris-linea); position:relative; overflow:hidden;
}
.hero__scroll .linea::after{
  content:""; position:absolute; left:0; top:-100%; width:100%; height:100%;
  background: var(--azul-293); animation: baja 2.2s ease-in-out infinite;
}
@keyframes baja{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }

/* ---------------------------------------------------------------------- */
/* Transición editorial                                                   */
/* ---------------------------------------------------------------------- */
.transicion{
  padding-block: clamp(5.5rem, 11vw, 9.5rem);
  background: var(--crema);
  border-bottom: 1px solid var(--gris-linea);
  text-align:center;
}
.transicion__grid{
  max-width: 850px;
  margin-inline:auto;
}
.transicion h2{
  font-size: clamp(1.9rem, 3.6vw, 3.1rem);
  font-weight:700; line-height:1.32; letter-spacing:-.01em; color: var(--azul-293-900);
}

/* ---------------------------------------------------------------------- */
/* Secciones genéricas                                                    */
/* ---------------------------------------------------------------------- */
section{ position:relative; }
.seccion{ padding-block: var(--seccion-py); }
.seccion--gris{ background: var(--gris-fondo); }
.seccion__cabecera{
  display:flex; justify-content:space-between; align-items:flex-end; gap:2rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  flex-wrap:wrap;
}
.seccion__titulo{
  font-size: var(--fs-h1); font-weight:700; color: var(--azul-293-900);
  line-height:1.15; letter-spacing:-.01em; max-width: 640px; margin-top: .9rem;
}
.seccion__titulo--ancho{ max-width: 820px; }

/* ---------------------------------------------------------------------- */
/* Servicios                                                               */
/* ---------------------------------------------------------------------- */
.servicios__lista{ border-top: 1px solid var(--gris-linea); }
.servicio{
  display:grid;
  grid-template-columns: 90px 1.1fr 1.4fr auto;
  gap: 1.75rem;
  align-items:center;
  padding-block: 2.1rem;
  border-bottom: 1px solid var(--gris-linea);
  transition: background .4s ease;
}
.servicio:hover{ background: rgba(0,61,166,.03); }
.servicio__num{
  font-size: 1.05rem; font-weight:700; color: #6B7075; /* AA sobre blanco (≈4.6:1), más oscuro que el gris 429C solo para texto pequeño */
  font-variant-numeric: tabular-nums;
}
.servicio__titulo{
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  font-weight:700; color: var(--azul-293-900);
}
.servicio__desc{ color: var(--tinta-suave); max-width: 460px; font-size: .98rem; }
.servicio__ir{
  width:42px; height:42px; border-radius:50%;
  border:1px solid var(--gris-linea);
  display:flex; align-items:center; justify-content:center;
  transition: all .35s var(--ease);
  flex: none;
}
.servicio__ir svg{ width:16px; height:16px; transition: transform .35s var(--ease); }
.servicio:hover .servicio__ir{ background: var(--azul-293); border-color: var(--azul-293); }
.servicio:hover .servicio__ir svg{ stroke:#fff; transform: rotate(45deg); }

/* ---- Servicio expandible (Consultoría → áreas internas) ---- */
.servicio--expandible{ display:block; padding-block:0; }
.servicio__disparador{
  display:grid;
  grid-template-columns: 90px 1.1fr 1.4fr auto;
  gap: 1.75rem;
  align-items:center;
  width:100%;
  padding-block: 2.1rem;
  background:none; border:0; text-align:left;
  font-family: inherit;
}
.servicio__disparador .servicio__titulo,
.servicio__disparador .servicio__desc{ display:block; }
.servicio__ir--expandir svg{ transition: transform .4s var(--ease); }
.servicio__disparador[aria-expanded="true"] .servicio__ir--expandir{
  background: var(--azul-293); border-color: var(--azul-293);
}
.servicio__disparador[aria-expanded="true"] .servicio__ir--expandir svg{
  stroke:#fff; transform: rotate(180deg);
}

/* Se muestra/oculta con el atributo `hidden` (accesible y robusto incluso
   sin CSS); la aparición se acompaña de una transición discreta de opacidad. */
.servicio__detalle{
  animation: servicio-detalle-in .45s var(--ease);
}
@keyframes servicio-detalle-in{
  from{ opacity:0; transform: translateY(-6px); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .servicio__detalle{ animation:none; }
}
.servicio__detalle-malla{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
  padding: .5rem 0 2.6rem;
}
.servicio__area h4{
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:700; color: var(--azul-293); margin-bottom:.9rem;
}
.servicio__area ul{ display:flex; flex-direction:column; gap:.55rem; }
.servicio__area li{
  font-size:.9rem; color: var(--tinta-suave); padding-left:1.1rem; position:relative;
}
.servicio__area li::before{
  content:""; position:absolute; left:0; top:.55em; width:5px; height:5px; background: var(--azul-comp);
}

/* ---------------------------------------------------------------------- */
/* Nuestro enfoque (metodología)                                          */
/* ---------------------------------------------------------------------- */
.enfoque__intro{ display:flex; justify-content:space-between; gap:3rem; flex-wrap:wrap; align-items:flex-start; margin-bottom: clamp(3rem,6vw,5rem); }
.enfoque__ruta{
  position:relative;
  display:grid; grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
}
.enfoque__linea{
  position:absolute; top: 3.3rem; left:0; right:0; height:1px;
  background: var(--gris-linea); z-index:0;
}
.enfoque__linea-progreso{
  position:absolute; top:0; left:0; height:100%; width:0%;
  background: var(--azul-293);
  transition: width 1.4s var(--ease);
}
.enfoque__paso{ position:relative; z-index:1; padding-top: 4.4rem; }
/* Numeración tipográfica en vez de icono/círculo: refuerza la lectura
   editorial y la progresión (01→04) sin sensación de "tarjeta". */
.enfoque__marcador{
  position:absolute; top:0; left:0;
  display:block;
  font-size: clamp(1.9rem, 2.6vw, 2.35rem);
  font-weight:700; line-height:1;
  font-variant-numeric: tabular-nums;
  color: var(--gris-429);
  transition: color .5s var(--ease);
}
.enfoque__paso::after{
  content:"";
  position:absolute; top: 3.3rem; left:0; width:1px; height:.7rem;
  background: var(--gris-linea);
}
.enfoque__paso.en-vista .enfoque__marcador{ color: var(--azul-293); }
.enfoque__paso.en-vista::after{ background: var(--azul-293); }
.enfoque__paso h3{ font-size: 1.05rem; font-weight:700; color: var(--azul-293-900); margin-bottom:.7rem; margin-top: 1.1rem; }
.enfoque__paso p{ font-size: .92rem; color: var(--tinta-suave); }

/* ---------------------------------------------------------------------- */
/* Sectores                                                                */
/* ---------------------------------------------------------------------- */
.sectores{ background: var(--azul-293-900); color:#fff; }
.sectores .seccion__titulo{ color:#fff; }
.sectores__lead{ color: rgba(255,255,255,.72); max-width: var(--max-w-texto); }
/* Índice editorial (al estilo "Industries" de firmas grandes): lista
   tipográfica en columnas, sin tarjetas ni iconos — solo jerarquía,
   numeración discreta, líneas finas y mucho espacio en blanco, con
   una interacción de acento sutil al pasar el cursor. */
.sectores__malla{
  columns: 2 300px;
  column-gap: clamp(3rem, 6vw, 5.5rem);
  border-top: 1px solid rgba(255,255,255,.14);
  margin-top: clamp(1rem, 3vw, 2rem);
}
.sectores__item{
  break-inside: avoid;
  display:flex; align-items:baseline; gap:1.4rem;
  padding: 1.7rem .2rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
  font-size: 1.04rem; font-weight:500; letter-spacing:.005em;
  position:relative; overflow:hidden; outline:none;
  background: rgba(0,116,188,0);
  transition: padding-left .45s var(--ease), border-color .45s var(--ease),
              color .3s var(--ease), background-color .5s var(--ease), opacity .5s var(--ease);
}
/* Foco editorial: al interactuar con un sector, los demás se atenúan
   ligeramente — la respuesta es del índice completo, no solo de la
   fila, sin convertir nada en tarjeta. */
.sectores__malla:has(.sectores__item:hover) .sectores__item:not(:hover),
.sectores__malla:has(.sectores__item:focus-visible) .sectores__item:not(:focus-visible){
  opacity: .5;
}
.sectores__item::before{
  content:"";
  position:absolute; left:-1.4rem; top:0; bottom:0; width:1px;
  background: var(--azul-comp);
  transform: scaleY(0); transform-origin:center;
  transition: transform .45s var(--ease);
}
.sectores__item::after{
  content: attr(data-n);
  position:absolute; right:.4rem; top:50%;
  font-size: 4.6rem; font-weight:700; line-height:1;
  color:#fff; opacity:0; letter-spacing:0;
  transform: translateY(-50%) translateX(12px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  pointer-events:none; font-variant-numeric: tabular-nums;
}
.sectores__item:hover,
.sectores__item:focus-visible{
  padding-left: 1.1rem; border-color: rgba(255,255,255,.32); color: #fff;
  background: rgba(0,116,188,.12); opacity:1;
}
.sectores__item:hover::before,
.sectores__item:focus-visible::before{ transform: scaleY(1); }
.sectores__item:hover::after,
.sectores__item:focus-visible::after{ opacity:.07; transform: translateY(-50%) translateX(0); }
.sectores__item:hover .sectores__flecha,
.sectores__item:focus-visible .sectores__flecha{ opacity:1; transform: translateX(0); }
.sectores__item .n{
  font-size:.72rem; color: rgba(255,255,255,.4); font-weight:500; letter-spacing:.05em;
  font-variant-numeric: tabular-nums; transition: color .4s var(--ease);
}
.sectores__item:hover .n, .sectores__item:focus-visible .n{ color: var(--azul-comp); }
.sectores__nombre{
  position:relative; z-index:1; display:inline-block;
  transform-origin:left center; transition: transform .45s var(--ease);
}
.sectores__item:hover .sectores__nombre,
.sectores__item:focus-visible .sectores__nombre{ transform: scale(1.035); }
.sectores__flecha{
  width:16px; height:16px; margin-left:auto; flex-shrink:0; position:relative; z-index:1;
  opacity:0; transform: translateX(-6px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
@media (hover:none){
  .sectores__item::after{ display:none; }
  .sectores__item .n{ color: var(--azul-comp); }
  .sectores__flecha{ display:none; }
  .sectores__malla:has(.sectores__item:hover) .sectores__item:not(:hover){ opacity:1; }
  .sectores__item:hover .sectores__nombre{ transform:none; }
  .sectores__item:active{ background: rgba(0,116,188,.16); border-color: rgba(255,255,255,.32); }
}

/* ---------------------------------------------------------------------- */
/* Perspectivas                                                            */
/* ---------------------------------------------------------------------- */
.perspectivas__grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem,6vw,6rem);
  align-items:start;
}
.perspectivas__titulo{
  font-size: var(--fs-h1); font-weight:700; color: var(--azul-293-900); line-height:1.2; letter-spacing:-.01em;
}
.perspectivas__panel{
  border-top: 1px solid var(--gris-linea);
  padding-top: 2.2rem;
  display:flex; flex-direction:column; gap:1.6rem;
}
/* Líneas editoriales — los temas del párrafo aprobado ("auditoría,
   finanzas, impuestos, NIIF, riesgos, control, tecnología e IA")
   presentados como índice de cobertura, no como titulares inventados. */
.perspectivas__lineas{
  display:grid; grid-template-columns: repeat(2, 1fr);
  border-top:1px solid var(--gris-linea);
  margin-top: 1.6rem;
}
.perspectivas__linea{
  display:flex; align-items:baseline; gap:1.1rem;
  padding: 1.35rem .2rem;
  border-bottom:1px solid var(--gris-linea);
  font-size:1.05rem; font-weight:700; color: var(--azul-293-900);
  transition: color .35s var(--ease), padding-left .35s var(--ease);
}
.perspectivas__linea:nth-child(odd){ border-right:1px solid var(--gris-linea); padding-right:1.6rem; }
.perspectivas__linea:hover{ color: var(--azul-293); padding-left: .55rem; }
.perspectivas__linea .n{
  font-size:.72rem; font-weight:500; color: var(--gris-429);
  font-variant-numeric: tabular-nums; letter-spacing:.05em;
}
/* Marca de cierre editorial — recurso de marca compartido entre páginas:
   eco silencioso del guion que abre cada "eyebrow", repetido al final
   de un índice como punto final visual. Sin texto: la composición
   cierra la sección, no una explicación. */
.marca-cierre{
  width: 28px; height: 2px; background: var(--gris-linea);
  margin: 2.4rem 0 0 auto;
}
.marca-cierre--claro{ background: rgba(255,255,255,.32); }
@media (max-width:640px){
  .perspectivas__lineas{ grid-template-columns:1fr; }
  .perspectivas__linea:nth-child(odd){ border-right:none; padding-right:.2rem; }
}

/* ---------------------------------------------------------------------- */
/* La firma                                                                */
/* ---------------------------------------------------------------------- */
.firma__intro{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem,6vw,6rem); margin-bottom: clamp(3.5rem,7vw,6rem); }
.firma__marca{
  font-size: clamp(1.5rem,2.4vw,2rem); font-weight:700; color: var(--azul-293-900); line-height:1.3;
}
.firma__marca span{ display:block; font-size: .95rem; font-weight:400; color: var(--tinta-suave); margin-top:.5rem; }
.firma__quienes{ font-size: var(--fs-lead); color: var(--tinta); font-style:italic; line-height:1.5; }

.firma__mv{
  display:grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(2.5rem,5vw,5rem);
  padding-top: clamp(2.5rem,5vw,3.5rem);
  border-top: 1px solid var(--gris-linea);
}
.firma__bloque h3{
  font-size: var(--fs-eyebrow); letter-spacing:.14em; text-transform:uppercase;
  font-weight:700; color: var(--azul-293); margin-bottom:1.2rem;
}
.firma__bloque p{
  color: var(--tinta-suave); font-size:.98rem; line-height:1.7;
  text-align: justify; text-align-last: left; hyphens: auto;
}

/* Objetivos: estructura numerada editorial, independiente de Misión/Visión */
.firma__objetivos{
  margin-top: clamp(3rem,6vw,4.5rem);
  padding-top: clamp(2.5rem,5vw,3.5rem);
  border-top: 1px solid var(--gris-linea);
}
.firma__objetivos > h3{
  font-size: var(--fs-eyebrow); letter-spacing:.14em; text-transform:uppercase;
  font-weight:700; color: var(--azul-293); margin-bottom: clamp(1.8rem,3.5vw,2.6rem);
}
.firma__objetivos-lista{
  display:grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.8rem,3.5vw,3rem) clamp(2.5rem,5vw,5rem);
}
.firma__objetivos-lista li{
  display:flex; gap:1.25rem; align-items:flex-start;
}
.firma__objetivos-lista .n{
  font-size: 1.05rem; font-weight:700; color: var(--azul-comp);
  font-variant-numeric: tabular-nums; line-height:1.7;
}
.firma__objetivos-lista p{ color: var(--tinta-suave); font-size:.96rem; line-height:1.7; }

/* ---------------------------------------------------------------------- */
/* Liderazgo                                                               */
/* ---------------------------------------------------------------------- */
.liderazgo{
  margin-top: clamp(3.5rem,7vw,6rem);
  display:grid; grid-template-columns: 340px 1fr; gap: clamp(2.5rem,6vw,5rem);
  align-items:start;
}
.liderazgo__foto{
  aspect-ratio: 4/5; border-radius:2px; overflow:hidden;
  background: linear-gradient(160deg, var(--gris-fondo), var(--gris-linea));
  display:flex; align-items:center; justify-content:center; text-align:center;
  position:relative;
}
.liderazgo__foto .marcador{
  color: var(--tinta-suave); font-size:.82rem; padding: 2rem; line-height:1.6;
}
.liderazgo__foto img{ width:100%; height:100%; object-fit:cover; }
.liderazgo__nombre{ font-size: 1.5rem; font-weight:700; color: var(--azul-293-900); }
.liderazgo__cargo{ font-size:.92rem; font-weight:700; color: var(--azul-293); margin-top:.35rem; margin-bottom:1.6rem; }
.liderazgo__cita{ font-size: 1.15rem; font-style: italic; color: var(--tinta); line-height:1.55; max-width: 560px; margin-bottom:1.6rem; }
.liderazgo__bio{ color: var(--tinta-suave); font-size:.94rem; max-width: 560px; margin-bottom:1.6rem; }

/* ---------------------------------------------------------------------- */
/* Experiencia estratégica                                                 */
/* ---------------------------------------------------------------------- */
/* "La Firma" (con Liderazgo) y "Experiencia estratégica" comparten el
   mismo fondo gris institucional y se presentan como un solo capítulo:
   se acorta el espacio entre ambas y se reemplaza por una línea fina,
   en vez del espaciado completo que separa al resto de secciones. */
#firma{ padding-bottom: clamp(2.25rem, 4.5vw, 3.75rem); }
.estrategico{
  background: var(--gris-fondo);
  padding-top: clamp(2.25rem, 4.5vw, 3.75rem);
  border-top: 1px solid var(--gris-linea);
}
.estrategico__grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--gris-linea); border: 1px solid var(--gris-linea);
}
.estrategico__item{
  background:#fff; padding: clamp(2rem,3vw,2.6rem);
  display:flex; flex-direction:column; gap:1.4rem;
  transition: background .4s ease;
}
.estrategico__item:hover{ background: var(--crema); }
.estrategico__item .marco{
  width:44px; height:44px; border:1px solid var(--azul-293); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color: var(--azul-293); font-weight:700;
}
.estrategico__item h3{ font-size:1.05rem; font-weight:700; color: var(--azul-293-900); line-height:1.35; }
.estrategico__item p{ color: var(--tinta-suave); font-size:.92rem; }

/* ---------------------------------------------------------------------- */
/* Contacto / Hablemos                                                     */
/* ---------------------------------------------------------------------- */
.contacto{
  background: linear-gradient(155deg, var(--azul-293-900), var(--azul-293) 130%);
  color:#fff;
}
.contacto__fila{
  display:flex; justify-content:space-between; align-items:center; gap: 2.5rem; flex-wrap:wrap;
}
.contacto h2{ font-size: var(--fs-h1); font-weight:700; }
.contacto__desc{ color: rgba(255,255,255,.78); font-size: var(--fs-lead); max-width: 420px; }
.contacto__izq{ display:flex; flex-direction:column; gap: 1.2rem; }
.contacto__datos{ display:flex; flex-direction:column; gap:.7rem; margin-top:.3rem; }
.contacto__direccion{ color: rgba(255,255,255,.72); font-size:.95rem; line-height:1.6; max-width: 360px; }
.contacto__telefonos{ display:flex; flex-direction:column; gap:.4rem; }
.contacto__telefonos a{ color:#fff; font-weight:700; font-size:.95rem; width:fit-content; transition: opacity .3s ease; }
.contacto__telefonos a:hover{ opacity:.75; text-decoration:underline; text-underline-offset:.2em; }

/* ---------------------------------------------------------------------- */
/* Pie de página                                                           */
/* ---------------------------------------------------------------------- */
/* Tono ligeramente más oscuro y neutro que el azul del bloque de Contacto
   inmediatamente superior: evita que ambos se perciban como una única masa
   azul al final de la página (uso excesivo del azul). */
.pie{ background: #0A1730; color: rgba(255,255,255,.75); padding-block: 3.5rem 2.2rem; }
.pie__top{ display:flex; justify-content:space-between; gap:2.5rem; flex-wrap:wrap; padding-bottom: 2.6rem; border-bottom: 1px solid rgba(255,255,255,.14); margin-bottom: 1.8rem; }
.pie__marca img{ height:30px; margin-bottom: 1rem; }
.pie__marca p{ font-size:.85rem; max-width: 280px; color: rgba(255,255,255,.55); }
.pie__cols{ display:flex; gap: clamp(2.5rem,6vw,6rem); flex-wrap:wrap; }
.pie__col h4{ font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color: rgba(255,255,255,.45); margin-bottom:1.1rem; font-weight:700; }
.pie__col ul{ display:flex; flex-direction:column; gap:.75rem; }
.pie__col a{ font-size:.9rem; transition: color .3s ease; }
.pie__col a:hover{ color:#fff; }
.pie__texto{ font-size:.9rem; line-height:1.55; color: rgba(255,255,255,.55); display:block; max-width: 230px; }
.pie__bottom{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.8rem; color: rgba(255,255,255,.45); }

/* ---------------------------------------------------------------------- */
/* Animaciones de aparición                                                */
/* ---------------------------------------------------------------------- */
/* Patrón "progressive enhancement": el contenido es visible por defecto.
   Solo se oculta para animar si el JS confirma soporte (clase .js-listo
   añadida en <head> antes del render). Así, si el script no carga, nada
   queda invisible. */
.js-listo [data-reveal]{
  opacity:0; transform: translateY(20px) scale(.986);
  transition: opacity .8s var(--ease), transform 1.05s var(--ease);
}
.js-listo [data-reveal].en-vista{ opacity:1; transform:none; }
/* Paneles/imágenes: entrada algo más lenta, sensación de mayor
   profundidad sin volverse el protagonista del movimiento. */
.js-listo [data-reveal].cabecera-pagina__panel{
  transition: opacity 1.1s var(--ease), transform 1.3s var(--ease);
}
[data-reveal-grupo] > *{ transition-delay: calc(var(--i, 0) * 90ms); }

/* ---------------------------------------------------------------------- */
/* Responsive                                                              */
/* ---------------------------------------------------------------------- */
@media (max-width: 1080px){
  .servicio,
  .servicio__disparador{ grid-template-columns: 60px 1fr auto; }
  .servicio__desc{ grid-column: 2 / 3; max-width:none; }
  .servicio__detalle-malla{ grid-template-columns: repeat(2, 1fr); }
  .firma__mv{ grid-template-columns: 1fr; gap: clamp(2rem,5vw,3rem); }
  .firma__objetivos-lista{ grid-template-columns: 1fr; }
  .estrategico__grid{ grid-template-columns: 1fr; }
  .liderazgo{ grid-template-columns: 260px 1fr; }
}

@media (max-width: 900px){
  .encabezado__nav{
    position:fixed; inset:0; z-index:105;
    background: var(--azul-293-900);
    flex-direction:column; justify-content:center; align-items:flex-start;
    padding: 6rem clamp(1.5rem,8vw,4rem);
    gap: 1.6rem;
    transform: translateX(100%);
    transition: transform .5s var(--ease);
  }
  .encabezado__nav.is-abierto{ transform: translateX(0); }
  .encabezado__nav a:not(.boton){ font-size:1.4rem; color:#fff; }
  .encabezado__nav a:not(.boton)::after{ display:none; }
  .encabezado__cta--nav{ display:inline-flex; margin-top:1rem; }
  .encabezado__enlace--movil{ display:block; }
  .menu-toggle{ display:flex; }
  .encabezado__acciones .encabezado__cta:not(.encabezado__cta--nav){ display:none; }
  .encabezado__acciones > .encabezado__idiomas{ display:none; }
  /* El selector de idioma dentro del menú móvil vive sobre el fondo
     azul oscuro del panel a pantalla completa, así que necesita el
     mismo tratamiento claro que tenía antes (independiente del tono
     oscuro que ahora usa el encabezado sobre el Hero). */
  .encabezado__idiomas--nav{ display:flex; order:-1; margin-bottom:.5rem; }
  .encabezado__idiomas--nav span{ color: rgba(255,255,255,.35); }
  .encabezado__idiomas--nav a{ color: rgba(255,255,255,.6); }
  .encabezado__idiomas--nav a:hover,
  .encabezado__idiomas--nav a[aria-current="true"]{ color:#fff; }

  /* Debajo de 900px el hero pasa a ser una composición propia (no una
     reducción de la de escritorio): una franja fotográfica panorámica
     en la parte superior —con el mismo velo muy ligero, sin oscurecer
     la imagen— y el campo de texto a continuación, apilado, sobre el
     mismo fondo crema. El recorte panorámico evita dejar fuera a
     alguna de las dos personas de la fotografía. El panel fotográfico
     ya aparece primero en el propio HTML, así que no hace falta
     reordenar nada por CSS. */
  .hero__grid{
    min-height:0;
  }
  .hero__campo-foto{
    position:relative; inset:auto; z-index:0;
    aspect-ratio: 16 / 10;
    margin-top: 5.25rem; /* despeja el encabezado fijo */
  }
  .hero__campo-foto-mueve img{ object-position: 55% 38%; }
  /* Debajo de los 900px la marca vuelve a su posición original: en el
     flujo normal, justo debajo de la fotografía apilada y antes del
     titular (igual que antes de este ajuste, que es exclusivo de
     escritorio). */
  .hero__marca{
    position:static; transform:none; z-index:auto;
    gap: 1.3rem;
    margin: clamp(2.25rem,6vw,3rem) 0 0;
    padding: 0 var(--contenedor-px);
  }
  /* Tamaño original de la marca (sin el recorte necesario para
     compartir línea con la navegación en escritorio, que aquí no
     aplica: en móvil el encabezado no comparte fila con la marca). */
  .hero__marca-bi{ height: clamp(56px, 6.2vw, 78px); }
  .hero__marca-texto{ padding-left: 1.3rem; }
  .hero__marca-nombre{ font-size: clamp(1.5rem, 2.5vw, 1.95rem); margin-bottom: .3rem; }
  .hero__marca-sub{ font-size: clamp(.86rem, 1.15vw, 1rem); }
  /* La composición apilada no tiene un lado "izquierdo": la misma idea
     de atmósfera azul se adapta en vertical — un azul muy suave justo
     donde el campo de texto se encuentra con la fotografía (su borde
     superior), disolviéndose hacia el crema según baja. */
  .hero__campo-texto{
    padding: clamp(1.9rem,3.6vw,2.5rem) var(--contenedor-px) clamp(2.5rem,7vw,3.5rem);
    background: linear-gradient(180deg, rgba(0,61,166,.08) 0%, var(--crema) 22%);
  }
  .hero__contenido{ margin-top: 0; }
  .hero__velo{
    background: linear-gradient(0deg, rgba(0,26,77,.14) 0%, rgba(0,61,166,.06) 11%, rgba(0,61,166,0) 26%);
  }
  /* El indicador "Desplácese" está pensado para el hero a pantalla
     completa del escritorio; en el layout apilado de abajo de 900px
     el contenido ya fluye de forma natural y el indicador solo
     estorbaría junto a los botones. */
  .hero__scroll{ display:none; }

  .enfoque__intro{ flex-direction:column; }
  .enfoque__ruta{ grid-template-columns: 1fr; gap: 2.3rem; }
  .enfoque__linea{ display:none; }
  .perspectivas__grid{ grid-template-columns:1fr; }
  .firma__intro{ grid-template-columns:1fr; }
  .liderazgo{ grid-template-columns:1fr; }
  .liderazgo__foto{ max-width: 320px; }
  .contacto__fila{ flex-direction:column; align-items:flex-start; }
}

@media (max-width: 600px){
  .servicio,
  .servicio__disparador{ grid-template-columns: 1fr auto; row-gap:.6rem; }
  .servicio__num{ display:none; }
  .servicio__desc{ grid-column: 1/2; }
  .servicio__detalle-malla{ grid-template-columns: 1fr; gap: 1.6rem; }
  .sectores__malla{ columns: 1; }
  .sectores__item{ font-size:.98rem; }
  .sectores__item:hover{ padding-left:.1rem; }
  .sectores__item::before{ display:none; }
  .pie__top{ flex-direction:column; gap:2.2rem; }
}

/* ==========================================================================
   VERSIÓN 2.0 — Sitio multipágina
   Todo lo siguiente se apoya en los mismos tokens de marca y el mismo
   sistema de aparición progresiva ya definidos arriba. No se introduce
   ninguna tipografía, color ni componente ajeno al manual de marca.
   ========================================================================== */

/* Enlace activo en la navegación principal (ahora páginas reales, no
   anclas): usa aria-current="page", el valor correcto de ARIA para
   "esta es la página en la que estás" dentro de un conjunto de enlaces. */
.encabezado__nav a[aria-current="page"]:not(.boton){ color: var(--azul-293); }
.encabezado__nav a[aria-current="page"]:not(.boton)::after{ right:0; background: var(--azul-293); }
@media (max-width:900px){
  .encabezado__nav a[aria-current="page"]:not(.boton){ color:#fff; text-decoration: underline; text-underline-offset:.3em; text-decoration-color: var(--azul-comp); }
}

/* Breadcrumb discreto en páginas interiores: vuelve a Inicio sin depender
   solo del logo. */
.migas{
  position:relative; z-index:2;
  padding-top: clamp(6.5rem, 11vw, 8.5rem);
}
.migas__enlace{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.82rem; font-weight:700; color: var(--tinta-suave);
  transition: color var(--dur) var(--ease), gap .3s var(--ease);
}
.migas__enlace svg{ width:14px; height:14px; transform: rotate(180deg); }
.migas__enlace:hover{ color: var(--azul-293); gap:.8rem; }
.migas--claro .migas__enlace{ color: rgba(255,255,255,.7); }
.migas--claro .migas__enlace:hover{ color:#fff; }

/* --------------------------------------------------------------------
   Cabecera de página interior (Servicios / Sectores / Perspectivas /
   La Firma / Contacto). Un mismo componente, con variantes de fondo,
   para que cada página tenga entrada propia sin ser una plantilla
   repetida: el texto y el panel visual cambian de composición según
   la página (ver variantes .cabecera-pagina--* más abajo).
   -------------------------------------------------------------------- */
.cabecera-pagina{
  position:relative; overflow:hidden;
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
}
.cabecera-pagina__grid{
  display:grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.85fr);
  gap: clamp(2.5rem,6vw,5rem);
  align-items:end;
  padding-top: clamp(2.5rem, 5vw, 4rem);
}
.cabecera-pagina__num{
  font-size:.78rem; font-weight:700; color: var(--gris-429);
  font-variant-numeric: tabular-nums; letter-spacing:.08em;
  margin-bottom: 1rem; display:block;
}
.cabecera-pagina h1{
  font-size: var(--fs-h1); font-weight:700; line-height:1.12; letter-spacing:-.01em;
  color: var(--azul-293-900);
}
.cabecera-pagina__intro{
  margin-top: 1.4rem; font-size: var(--fs-lead); color: var(--tinta-suave);
  max-width: 46ch; line-height:1.6;
}
.cabecera-pagina--oscura h1{ color:#fff; }
.cabecera-pagina--oscura .cabecera-pagina__intro{ color: rgba(255,255,255,.74); }
.cabecera-pagina--oscura .cabecera-pagina__num{ color: rgba(255,255,255,.4); }
.cabecera-pagina--oscura{ background: var(--azul-293-900); color:#fff; }
.cabecera-pagina--gris{ background: var(--gris-fondo); }

/* Panel visual junto al título: composición editorial abstracta propia
   por página (líneas, retícula, degradado de marca) — nunca fotografía
   de stock genérica. Es un elemento SVG inline, así que escala con
   nitidez perfecta en cualquier resolución. */
.cabecera-pagina__panel{
  position:relative; aspect-ratio: 4/3; border-radius:2px; overflow:hidden;
}
.cabecera-pagina__panel svg{ width:100%; height:100%; display:block; }

/* --------------------------------------------------------------------
   Servicios — navegación lateral fija + bloques por categoría
   -------------------------------------------------------------------- */
.servicios-cuerpo{
  display:grid; grid-template-columns: 220px 1fr;
  gap: clamp(3rem,6vw,5rem);
  padding-top: clamp(1.6rem,3vw,2.6rem);
  padding-bottom: clamp(3rem,6vw,5rem);
}
.servicios-nav{ position:sticky; top: 7.5rem; align-self:start; display:flex; flex-direction:column; gap:.2rem; }
.servicios-nav a{
  font-size:.86rem; font-weight:700; color: var(--tinta-suave);
  padding:.6rem 0 .6rem 1rem; border-left:2px solid var(--gris-linea);
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.servicios-nav a:hover{ color: var(--tinta); }
.servicios-nav a.en-vista{ color: var(--azul-293); border-color: var(--azul-293); }

.categoria-servicio{ scroll-margin-top: 7.5rem; padding-block: clamp(2.5rem,5vw,4rem); border-bottom:1px solid var(--gris-linea); }
.categoria-servicio:first-child{ padding-top:0; }
.categoria-servicio:last-child{ border-bottom:none; padding-bottom:0; }
.categoria-servicio__cabecera{ display:flex; align-items:baseline; gap:1.3rem; margin-bottom:1.4rem; flex-wrap:wrap; }
.categoria-servicio__num{ font-size:1rem; font-weight:700; color:#6B7075; font-variant-numeric:tabular-nums; }
.categoria-servicio h2{ font-size: clamp(1.4rem,2.2vw,1.9rem); font-weight:700; color: var(--azul-293-900); }
.categoria-servicio__desc{ color: var(--tinta-suave); max-width:60ch; margin-bottom:1.6rem; font-size:1rem; line-height:1.65; }
.categoria-servicio__malla{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 1.8rem 2.4rem; }
.categoria-servicio__malla--simple{ grid-template-columns: 1fr; max-width:60ch; }
.categoria-servicio__area h3{
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:700; color: var(--azul-293); margin-bottom:.9rem;
}
.categoria-servicio__area ul{ display:flex; flex-direction:column; gap:.55rem; }
.categoria-servicio__area li{ font-size:.94rem; color: var(--tinta-suave); padding-left:1.1rem; position:relative; line-height:1.5; }
.categoria-servicio__area li::before{ content:""; position:absolute; left:0; top:.6em; width:5px; height:5px; background: var(--azul-comp); }

/* --------------------------------------------------------------------
   Home — tarjetas de entrada a cada página interior
   -------------------------------------------------------------------- */
.entradas__cabecera{ margin-bottom: clamp(2rem,4vw,3rem); }
.entradas{ display:grid; grid-template-columns: repeat(2, 1fr); gap:1px; background: var(--gris-linea); border:1px solid var(--gris-linea); }
.entradas--tres{ grid-template-columns: repeat(3,1fr); }
.entrada{
  background:#fff; padding: clamp(1.8rem,3vw,2.4rem);
  display:flex; flex-direction:column; gap:1rem;
  transition: background .4s ease;
}
.entrada:hover{ background: var(--crema); }
.entrada__num{ font-size:.85rem; font-weight:700; color:#6B7075; font-variant-numeric:tabular-nums; }
.entrada h3{ font-size:1.2rem; font-weight:700; color: var(--azul-293-900); }
.entrada p{ color: var(--tinta-suave); font-size:.92rem; line-height:1.6; flex:1; }
.entrada__ir{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:700; font-size:.86rem; color: var(--azul-293);
  transition: gap .3s var(--ease);
}
.entrada__ir svg{ width:14px; height:14px; transition: transform .3s var(--ease); }
.entrada:hover .entrada__ir{ gap:.8rem; }
.entrada:hover .entrada__ir svg{ transform: translateX(3px); }

/* Home → resumen de Servicios (variante compacta de .servicio, sin el
   detalle de sub-áreas ni el acordeón: ese contenido vive en /servicios/) */
.servicios-resumen{ border-top:1px solid var(--gris-linea); }
.servicios-resumen__item{
  display:grid; grid-template-columns: 60px 1fr auto; gap:1.5rem; align-items:center;
  padding-block: 1.7rem; border-bottom:1px solid var(--gris-linea);
  transition: background .4s ease;
}
.servicios-resumen__item:hover{ background: rgba(0,61,166,.03); }
.servicios-resumen__item .n{ font-size:1rem; font-weight:700; color:#6B7075; font-variant-numeric:tabular-nums; }
.servicios-resumen__item h3{ font-size:1.1rem; font-weight:700; color: var(--azul-293-900); }
.servicios-resumen__item p{ color: var(--tinta-suave); font-size:.92rem; margin-top:.2rem; }

/* Home → resumen de Sectores (subconjunto curado + enlace a la lista completa) */
.sectores-resumen{ display:flex; flex-wrap:wrap; gap:.7rem; }
.sectores-resumen .pastilla-sector{
  font-size:.92rem; font-weight:500; color:#fff;
  padding:.65rem 1.15rem; border:1px solid rgba(255,255,255,.22); border-radius:20px;
}
.sectores-resumen__mas{
  font-size:.92rem; font-weight:700; color: rgba(255,255,255,.7);
  padding:.65rem .3rem;
}

/* Home → entrada a La Firma, SIN fotografía de Carlos: solo marca + cita.
   La fotografía de Liderazgo vive exclusivamente en /la-firma/. */
.firma-entrada{
  display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem,6vw,5rem); align-items:center;
}
.firma-entrada__marca{ font-size: clamp(1.4rem,2.2vw,1.9rem); font-weight:700; color: var(--azul-293-900); line-height:1.3; }
.firma-entrada__marca span{ display:block; font-size:.9rem; font-weight:400; color: var(--tinta-suave); margin-top:.5rem; }
.firma-entrada__cita{ font-size: var(--fs-lead); font-style:italic; color: var(--tinta); line-height:1.55; margin-top:1.3rem; }

/* Home → franja de cierre hacia Contacto (compacta, no repite todos los datos) */
.contacto-franja{ text-align:left; }
.contacto-franja h2{ font-size: var(--fs-h1); font-weight:700; max-width:16ch; }

/* --------------------------------------------------------------------
   La Firma — cabecera institucional sin fotografía personal; Liderazgo
   con más presencia como página propia.
   -------------------------------------------------------------------- */
.liderazgo--pagina{ grid-template-columns: 380px 1fr; margin-top:0; }
.liderazgo--pagina .liderazgo__foto{ aspect-ratio: 4/5; }
@media (max-width:1080px){ .liderazgo--pagina{ grid-template-columns: 300px 1fr; } }
@media (max-width:900px){ .liderazgo--pagina{ grid-template-columns: 1fr; } .liderazgo--pagina .liderazgo__foto{ max-width:340px; } }

/* --------------------------------------------------------------------
   Contacto — formulario
   -------------------------------------------------------------------- */
.contacto-pagina{ padding-block: clamp(3rem,6vw,5rem); }
.contacto-pagina__grid{ display:grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2.5rem,6vw,5rem); }
.form-contacto{ display:flex; flex-direction:column; gap:1.5rem; }
.campo{ display:flex; flex-direction:column; gap:.6rem; }
.campo label{
  font-size:.76rem; font-weight:700; color: rgba(255,255,255,.68);
  text-transform:uppercase; letter-spacing:.08em;
}
.campo input, .campo textarea{
  font-family:inherit; font-size:1rem; color:#fff;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.24); border-radius:3px;
  padding:.95rem 1.05rem;
  transition: border-color .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
.campo input::placeholder, .campo textarea::placeholder{ color: rgba(255,255,255,.32); }
.campo input:hover, .campo textarea:hover{ border-color: rgba(255,255,255,.4); }
.campo input:focus, .campo textarea:focus{
  outline:none; border-color: var(--azul-comp); background: rgba(255,255,255,.1);
  box-shadow: 0 0 0 3px rgba(0,116,188,.22);
}
.campo textarea{ resize:vertical; min-height:140px; }
.form-contacto__fila{ display:grid; grid-template-columns:1fr 1fr; gap:1.3rem; }
.campo--trampa{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); margin:-1px; }
.form-contacto__estado{
  font-size:.88rem; color: rgba(255,255,255,.68); min-height:1.2em;
}
.form-contacto__estado[data-estado="enviando"]{ color: rgba(255,255,255,.68); }
.form-contacto__estado[data-estado="enviado"]{ color:#fff; font-weight:700; }
.form-contacto__estado[data-estado="error"]{ color:#ffb4a8; font-weight:700; }
.campo input:invalid[data-tocado="true"], .campo textarea:invalid[data-tocado="true"]{
  border-color:#ffb4a8;
}
.boton[disabled]{ opacity:.6; cursor:default; }
@media (max-width:900px){
  .contacto-pagina__grid{ grid-template-columns:1fr; }
  .form-contacto__fila{ grid-template-columns:1fr; }
}

/* --------------------------------------------------------------------
   Responsive — cabeceras de página interior y servicios
   -------------------------------------------------------------------- */
@media (max-width:1080px){
  .categoria-servicio__malla{ grid-template-columns:1fr; }
}
@media (max-width:900px){
  .cabecera-pagina__grid{ grid-template-columns:1fr; }
  .cabecera-pagina__panel{ aspect-ratio: 16/9; order:-1; }
  .servicios-cuerpo{ grid-template-columns:1fr; }
  .servicios-nav{
    position:static; flex-direction:row; flex-wrap:wrap; gap:.6rem;
    padding-bottom: 1.5rem; margin-bottom: 1rem; border-bottom:1px solid var(--gris-linea);
  }
  .servicios-nav a{ border-left:none; border-bottom:2px solid var(--gris-linea); padding:.4rem .1rem; }
  .servicios-nav a.en-vista{ border-color: var(--azul-293); }
  .entradas, .entradas--tres{ grid-template-columns:1fr; }
  .firma-entrada{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .categoria-servicio__cabecera{ flex-direction:column; align-items:flex-start; gap:.5rem; }
}

/* --------------------------------------------------------------------
   Parallax muy moderado (opt-in vía data-parallax, aplicado por JS solo
   cuando IntersectionObserver existe y no hay prefers-reduced-motion).
   -------------------------------------------------------------------- */
[data-parallax]{ will-change: transform; }

/* --------------------------------------------------------------------
   Perspectivas — cabecera editorial de foto plena "El nuevo mindset
   del auditor". Dirección aprobada por el cliente a partir de un
   mockup de referencia (guía de composición, no plantilla literal):
   fotografía real del profesional a sangre hasta el borde derecho del
   viewport, titular a dos tonos (azul institucional + azul marino),
   la etiqueta "El nuevo mindset del auditor" ya en la propia columna
   de texto. Sobre la fotografía quedan solo dos acentos editoriales
   muy discretos —una pequeña leyenda horizontal de palabras clave, y
   una cuña de azul marino mínima en la esquina— para que la persona y
   el titular sigan siendo los dos protagonistas de la composición.
   Ejecución real en HTML/CSS (no una imagen plana de fondo). Exclusiva
   de esta página: usa clases propias (.perspectivas-hero /
   .perspectivas-foto*), no .cabecera-pagina__grid ni
   .cabecera-pagina__panel, así que no afecta la cabecera de Servicios,
   Sectores, La Firma ni Contacto. Reutiliza el sistema existente de
   aparición progresiva y parallax (data-reveal / data-parallax) sin
   JS adicional. */
.cabecera-pagina--fotografica{ padding-bottom:0; }
.perspectivas-hero{
  display:grid;
  grid-template-columns: minmax(0,.98fr) minmax(0,1.22fr);
  align-items:stretch;
  min-height: clamp(560px, 56vw, 760px);
}
.perspectivas-hero__texto{
  display:flex; flex-direction:column; justify-content:center;
  gap: 1.4rem;
  padding: clamp(2.5rem,5vw,4rem) clamp(2.5rem,4vw,4rem) clamp(2.5rem,5vw,4rem) var(--contenedor-px);
}
.perspectivas-hero__texto .cabecera-pagina__intro{ margin-top:0; }
/* El titular es el segundo protagonista de la composición (después de
   la fotografía): mayor jerarquía que el h1 compartido del resto de
   páginas interiores, y más aire alrededor. */
.perspectivas-hero__texto h1{
  font-size: clamp(2.15rem, 3.7vw, 3.5rem);
  margin: .25rem 0;
}
.perspectivas-hero__acento{ color: var(--azul-293); }
.perspectivas-hero__kicker{
  margin:0; padding-top:.6rem;
  font-size:.76rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  line-height:1.5; color: var(--tinta-suave);
}
.perspectivas-foto__regla{
  display:block; width:30px; height:2px; margin-bottom:.7rem;
  background: var(--azul-comp);
}

/* Panel fotográfico: a sangre hasta el borde derecho del navegador
   (la sección vive fuera de .contenedor para lograrlo sin necesidad
   de márgenes negativos). Columna ampliada y sin velo por delante:
   la persona pensando ocupa el máximo protagonismo posible. */
.perspectivas-hero__foto{ position:relative; overflow:hidden; }
.perspectivas-foto__marco{ position:absolute; inset:0; }
.perspectivas-foto__img{
  width:100%; height:100%; object-fit:cover; object-position: 58% 20%;
  display:block;
}

/* Leyenda editorial mínima: una sola línea, muy pequeña y de peso
   ligero, apoyada en una esquina despejada de la fotografía (lejos del
   rostro) — un detalle tipográfico, no una lista con presencia propia. */
.perspectivas-hero__pilares{
  position:absolute; top: clamp(20px,2.6vw,30px); right: clamp(24px,3.4vw,40px);
  z-index:2; margin:0; padding:0;
  display:flex; flex-direction:row; align-items:center; gap:.5rem;
}
.perspectivas-hero__pilares li{
  font-size:.62rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color: rgba(0,26,77,.5);
}
.perspectivas-hero__pilares li + li{ position:relative; padding-left:.6rem; }
.perspectivas-hero__pilares li + li::before{
  content:""; position:absolute; left:0; top:.15em; bottom:.15em; width:1px;
  background: rgba(0,26,77,.22);
}

/* Cuña de azul marino: un trazo pequeño en la esquina, integrado con
   el borde de la fotografía en vez de un bloque gráfico independiente. */
.perspectivas-hero__cuna{
  position:absolute; right:0; bottom:0; z-index:1;
  width: clamp(64px,9vw,96px); height: clamp(64px,9vw,96px);
  clip-path: polygon(100% 100%, 100% 30%, 30% 100%);
  background: linear-gradient(215deg, rgba(0,26,77,.82), rgba(0,26,77,.5));
}

/* Tablet / móvil: composición adaptada, no una reducción literal de
   la de escritorio — la fotografía pasa a la parte superior a todo lo
   ancho, la persona conserva protagonismo con su propio encuadre, y
   los dos acentos editoriales se retiran: añaden ruido en un panel
   angosto sin aportar jerarquía real ahí. */
@media (max-width:900px){
  .perspectivas-hero{ grid-template-columns:1fr; min-height:0; }
  .perspectivas-hero__foto{ aspect-ratio: 1/1; order:-1; }
  .perspectivas-foto__img{ object-position: 56% 10%; }
  .perspectivas-hero__pilares, .perspectivas-hero__cuna{ display:none; }
  .perspectivas-hero__texto{ padding: clamp(2rem,5vw,2.6rem) var(--contenedor-px); }
}
/* Teléfono: un recorte menos alto que en tablet — así el titular ya
   es visible dentro de la primera pantalla, sin depender de que la
   persona haga scroll para que aparezca (mismo umbral de aparición
   progresiva que usa el resto del sitio). */
@media (max-width:600px){
  .perspectivas-hero__foto{ aspect-ratio: 4/3; }
  .perspectivas-foto__img{ object-position: 70% 15%; }
}

/* --------------------------------------------------------------------
   La Firma — monograma BI en el centro del panel de círculos
   concéntricos. Símbolo oficial existente (isotype-blue.png), sin
   redibujar. Animación de "respiración" muy sutil y lenta; fija con
   prefers-reduced-motion (regla explícita: la regla global del sitio
   solo acorta la duración, y aquí el fotograma final no es el tamaño
   normal, así que se fuerza el estado en reposo).
   -------------------------------------------------------------------- */
.firma-panel{ position:relative; }
.firma-panel__bi{
  position:absolute; top:50%; left:50%;
  width:17%; height:auto;
  transform: translate(-50%,-50%) scale(.86);
  animation: bi-respirar 6s cubic-bezier(.45,0,.2,1) infinite;
}
@keyframes bi-respirar{
  0%{ transform: translate(-50%,-50%) scale(.86); }
  22%{ transform: translate(-50%,-50%) scale(1); }
  50%{ transform: translate(-50%,-50%) scale(1); }
  78%{ transform: translate(-50%,-50%) scale(.86); }
  100%{ transform: translate(-50%,-50%) scale(.86); }
}
@media (prefers-reduced-motion: reduce){
  .firma-panel__bi{ animation:none; transform: translate(-50%,-50%) scale(1); }
}