/* ================================================================
   APPLE POLISH — capa de diseño y animación estilo Apple para HEKA
   ----------------------------------------------------------------
   Capa ADITIVA: no modifica heka.css / global.css / critical.css.
   Se apoya en los tokens ya definidos en :root (--azul, --negro,
   --blanco, --gris, --borde, --font-title, --font-body, --ease)
   y sólo refina materiales, tipografía, foco/accesibilidad y
   micro-interacciones siguiendo las Apple Human Interface Guidelines.
   Cargar DESPUÉS de global.css / heka.css.
   ================================================================ */

:root{
  /* Curva "spring" suave para feedback de presión (Apple-like) */
  --apl-ease-spring: cubic-bezier(.34,1.56,.64,1);
  /* La curva --ease del sitio (cubic-bezier(.16,1,.3,1)) ya es un
     ease-out expo tipo Apple: la reutilizamos como base. */
  --apl-ease: var(--ease, cubic-bezier(.16,1,.3,1));

  --apl-glass-blur: blur(22px) saturate(180%);
  --apl-shadow-sm: 0 1px 2px rgba(8,8,8,.06), 0 2px 8px rgba(8,8,8,.05);
  --apl-shadow-md: 0 8px 24px rgba(8,8,8,.10), 0 2px 8px rgba(8,8,8,.06);
  --apl-shadow-lg: 0 24px 60px rgba(8,8,8,.16), 0 6px 20px rgba(8,8,8,.10);
  --apl-focus: var(--azul, #258dd6);
}

/* ----------------------------------------------------------------
   1. Base: tipografía, selección de texto, scrollbar, foco
   ---------------------------------------------------------------- */
html{
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

::selection{
  background: var(--apl-focus);
  color: #fff;
}

/* Accesibilidad — foco visible consistente (WCAG / HIG Accessibility).
   El sitio ya suprime el outline por defecto en algunos elementos;
   esta regla restaura un indicador de foco claro sólo para
   navegación por teclado, sin afectar el estado :hover con mouse. */
:focus-visible{
  outline: 2px solid var(--apl-focus) !important;
  outline-offset: 3px !important;
  border-radius: 2px;
}
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible{
  outline: 2px solid var(--apl-focus) !important;
  outline-offset: 3px !important;
}

/* Scrollbar fino, estilo desktop Apple */
@media (min-width: 901px){
  ::-webkit-scrollbar{ width: 10px; height: 10px; }
  ::-webkit-scrollbar-track{ background: transparent; }
  ::-webkit-scrollbar-thumb{
    background: rgba(8,8,8,.22);
    border-radius: 999px;
    border: 2px solid var(--blanco, #fff);
  }
  ::-webkit-scrollbar-thumb:hover{ background: rgba(8,8,8,.4); }
  html{ scrollbar-color: rgba(8,8,8,.25) transparent; scrollbar-width: thin; }
}

/* ----------------------------------------------------------------
   2. Materiales — vidrio esmerilado más rico en la navegación
   ---------------------------------------------------------------- */
nav{
  transition: padding .4s var(--apl-ease),
              box-shadow .4s ease,
              backdrop-filter .4s ease;
}
/* :not(:has(.mk-nav)) — esta regla es de antes del rediseño con
   .mk-nav (menú nuevo); el sitio sigue agregando la clase .scrolled
   al hacer scroll, y como #mainNav sigue siendo un <nav>, sin este
   filtro le mete un blur + una línea de brillo a TODO el ancho del
   nav (incluso vacío/compacto), aunque visualmente ya no haya nada
   ahí — se veía como una línea/mancha rara cruzando la pantalla. */
nav.scrolled:not(:has(.mk-nav)){
  backdrop-filter: var(--apl-glass-blur);
  -webkit-backdrop-filter: var(--apl-glass-blur);
  box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 24px 48px -24px rgba(0,0,0,.6);
}
.footer-bot{
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}

/* ----------------------------------------------------------------
   3. Botones — feedback de presión tipo Apple (spring + sheen)
   ---------------------------------------------------------------- */
.btn-prim, .btn-sec, .form-submit, .pb-cta, .cta,
.mk-cta, .heka-sp-li-btn{
  position: relative;
  overflow: hidden;
  transition: transform .32s var(--apl-ease-spring),
              box-shadow .3s var(--apl-ease),
              opacity .3s ease,
              background .3s ease,
              border-color .3s ease,
              color .3s ease;
  will-change: transform;
}
.btn-prim:hover, .form-submit:hover, .pb-cta:hover{
  transform: translateY(-2px);
  box-shadow: var(--apl-shadow-md);
}
.btn-prim:active, .btn-sec:active, .form-submit:active, .pb-cta:active{
  transform: scale(.96);
  box-shadow: var(--apl-shadow-sm);
}

/* Barrido de brillo sutil al pasar el cursor (glass sheen) */
.btn-prim::after, .pb-cta::after, .form-submit::after{
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none;
}
.btn-prim:hover::after, .pb-cta:hover::after, .form-submit:hover::after{
  opacity: 1;
  animation: apl-sheen .9s var(--apl-ease);
}
@keyframes apl-sheen{
  from{ left: -60%; }
  to{ left: 130%; }
}

/* ----------------------------------------------------------------
   4. Tarjetas — elevación y escala suave (perspectiva 3D vía JS,
      aquí sólo la transición base para que el tilt sea fluido)
   ---------------------------------------------------------------- */
.practice-card, .serv-card, .pillar, .stat, .testi, .news-card,
.heka-sp-card, .svc-photo-card, .svc-text-card{
  transition: transform .5s var(--apl-ease),
              box-shadow .45s var(--apl-ease),
              background .4s ease, color .4s ease, border-color .4s ease;
  transform-style: preserve-3d;
  will-change: transform;
}
.practice-card:hover{
  transform: translateY(-6px);
}
.heka-sp-card:hover{
  transform: translateY(-4px);
}

/* Imágenes dentro de tarjetas: zoom suave con la misma curva */
.practice-card-img, .nc-img, .cob-img img, .spc-bg{
  transition: transform .7s var(--apl-ease), filter .7s ease;
}

/* ----------------------------------------------------------------
   5. Hero — respiración cinematográfica (Ken Burns) sutil
   ---------------------------------------------------------------- */
.hc-slide{
  animation: apl-kenburns 16s ease-in-out infinite alternate;
}
@keyframes apl-kenburns{
  from{ transform: scale(1); }
  to{ transform: scale(1.07); }
}

/* ----------------------------------------------------------------
   6. Cursor personalizado — crecimiento sobre elementos interactivos.
   ---------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine){
  /* Implementación original del sitio (recuperada de main.js): el punto
     de 8px sólo escala x7 al pasar sobre un link/botón, sin tocar
     fondo, borde ni mix-blend-mode — el invert de "difference" (ya
     definido en global.css) se mantiene y es lo que le da el efecto. */
  #cursor.apl-grow{
    transform: translate(-50%,-50%) scale(7);
  }
}

/* ----------------------------------------------------------------
   7. Contador de estadísticas — sólo transición de color/opacidad,
      el conteo numérico lo anima apple-polish.js
   ---------------------------------------------------------------- */
.stat-num{
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------
   8. Accesibilidad — Reduce Motion
   HIG Motion: "When Reduce Motion is active, reduce automatic and
   repetitive animations... replace x/y/z transitions with fades."
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-delay: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: .001ms !important;
    scroll-behavior: auto !important;
  }
  .hc-slide{ animation: none !important; transform: none !important; }
  #cursor{ display: none !important; }
  .practice-card:hover, .heka-sp-card:hover,
  .btn-prim:hover, .pb-cta:hover, .form-submit:hover{
    transform: none !important;
  }
}

/* ----------------------------------------------------------------
   9. Utilidad de aparición (opcional, para nuevas secciones)
   ---------------------------------------------------------------- */
.apl-reveal{
  opacity: 0;
  transform: translateY(28px);
  filter: blur(6px);
  transition: opacity .9s var(--apl-ease), transform .9s var(--apl-ease), filter .9s var(--apl-ease);
}
.apl-reveal.apl-active{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ----------------------------------------------------------------
   10. GLASS UPGRADE — tarjetas y grillas convertidas en paneles
   de vidrio flotante (index / contacto / sobre-heka / trabaja).
   Sustituye el patrón plano "grid con línea de 2px" por tarjetas
   translúcidas + fondo ambiental de color desenfocado.
   ---------------------------------------------------------------- */

/* Secciones claras: de blanco plano a lienzo suave para que el
   vidrio tenga algo de color que refractar */
#firma,#equipo{
  background:linear-gradient(180deg,#fbfcfe 0%,#eef3f9 100%);
  position:relative;
  overflow:hidden;
}

/* Pilares (La Firma) */
.pillars{
  gap:22px;
  background:transparent;
  position:relative;
  z-index:0;
}
.pillars::before{
  content:'';
  position:absolute;
  inset:-90px -8%;
  z-index:-1;
  background:
    radial-gradient(circle at 15% 20%, rgba(37,141,214,.32) 0%, transparent 58%),
    radial-gradient(circle at 85% 85%, rgba(255,170,110,.24) 0%, transparent 58%);
  filter:blur(45px);
  pointer-events:none;
}
.pillar{
  background:rgba(255,255,255,.5);
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  border:1px solid rgba(255,255,255,.85);
  border-radius:26px;
  box-shadow:0 24px 50px -22px rgba(20,30,45,.22), inset 0 1px 0 rgba(255,255,255,.9);
}
.pillar:hover{
  background:rgba(10,12,16,.68);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12);
}

/* Estadísticas */
.stats{
  gap:16px;
  background:transparent;
  position:relative;
  z-index:0;
}
.stats::before{
  content:'';
  position:absolute;
  inset:-40px -6%;
  z-index:-1;
  background:radial-gradient(circle at 50% 0%, rgba(37,141,214,.3) 0%, transparent 62%);
  filter:blur(50px);
  pointer-events:none;
}
.stat{
  background:rgba(255,255,255,.45);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.65);
  border-radius:22px;
  box-shadow:0 20px 44px -24px rgba(20,30,45,.24), inset 0 1px 0 rgba(255,255,255,.75);
}
.stat:hover{background:rgba(10,12,16,.68);border-color:rgba(255,255,255,.14)}

/* Testimonios */
.testi-grid{
  gap:18px;
  background:transparent;
  position:relative;
  z-index:0;
}
.testi-grid::before{
  content:'';
  position:absolute;
  inset:-60px -8%;
  z-index:-1;
  background:
    radial-gradient(circle at 20% 30%, rgba(37,141,214,.4) 0%, transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(160,120,255,.3) 0%, transparent 55%);
  filter:blur(50px);
  pointer-events:none;
}
/* Vidrio oscuro real (la sección ya es negra): dejamos que el blob
   de color de abajo se vea a través del blur, en vez de un card
   blanco translúcido que sobre fondo negro sale gris sucio. */
.testi{
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(28px) saturate(200%);
  -webkit-backdrop-filter:blur(28px) saturate(200%);
  border:1px solid rgba(255,255,255,.16);
  border-radius:26px;
  box-shadow:0 26px 60px -26px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.14);
}
.testi p{color:rgba(255,255,255,.85)}
.testi cite{color:var(--azul)}
.testi::before{opacity:.18}
.testi:hover{
  background:rgba(255,255,255,.11);
  border-color:rgba(37,141,214,.45);
  box-shadow:0 32px 70px -22px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.2);
}
.testi:hover p{color:#fff}

/* Equipo (home) — filas compactas, sutiles: sólo para identificar
   rápido a los socios (nombre, cargo, áreas), no una vitrina grande.
   El detalle fotográfico grande queda para la página /equipo. */
.equipo-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 18px;
  align-items:start;
  position:relative;
  z-index:0;
}
@media(max-width:700px){
  .equipo-list{grid-template-columns:1fr}
}
.equipo-list::before{
  content:'';
  position:absolute;
  inset:-30px -6%;
  z-index:-1;
  background:radial-gradient(circle at 15% 20%, rgba(37,141,214,.14) 0%, transparent 55%);
  filter:blur(50px);
  pointer-events:none;
}
.eq-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  text-decoration:none;
  color:inherit;
  padding:12px 20px;
  border-radius:16px;
  background:rgba(255,255,255,.45);
  backdrop-filter:blur(16px) saturate(170%);
  -webkit-backdrop-filter:blur(16px) saturate(170%);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 8px 20px -18px rgba(20,30,45,.3);
  transition:transform .3s cubic-bezier(.16,1,.3,1), background .3s ease,
             border-color .3s ease, box-shadow .3s ease;
}
.eq-row:hover{
  transform:translateX(4px);
  background:rgba(255,255,255,.7);
  border-color:rgba(37,141,214,.3);
  box-shadow:0 10px 24px -16px rgba(20,30,45,.32);
}
.eq-row-left{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}
.eq-avatar{
  width:46px;
  height:46px;
  border-radius:50%;
  object-fit:cover;
  object-position:top center;
  flex-shrink:0;
  filter:grayscale(1);
  transition:filter .4s ease;
}
.eq-row:hover .eq-avatar{filter:grayscale(0)}
.eq-row-info{
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:0;
}
.eq-row-name{
  font-family:var(--font-title);
  font-weight:700;
  font-size:.92rem;
  color:var(--negro);
  transition:color .3s ease;
}
.eq-row:hover .eq-row-name{color:var(--azul)}
.eq-row-area{
  font-size:.66rem;
  letter-spacing:.3px;
  color:rgba(8,8,8,.48);
  font-weight:400;
}
.eq-row-tag{
  flex-shrink:0;
  font-size:.52rem;
  letter-spacing:2.2px;
  font-weight:700;
  text-transform:uppercase;
  color:var(--azul);
  border:1px solid rgba(37,141,214,.3);
  border-radius:999px;
  padding:4px 11px;
  background:rgba(37,141,214,.06);
}
@media(max-width:560px){
  .eq-row{padding:10px 14px;flex-wrap:wrap}
  .eq-avatar{width:38px;height:38px}
  .eq-row-name{font-size:.85rem}
}

/* Noticias en grilla (cuando aplica) */
.news-grid{
  gap:18px;
  background:transparent;
  position:relative;
  z-index:0;
}
.news-grid::before{
  content:'';
  position:absolute;
  inset:-50px -6%;
  z-index:-1;
  background:radial-gradient(circle at 30% 20%, rgba(37,141,214,.14) 0%, transparent 55%);
  filter:blur(50px);
  pointer-events:none;
}
.news-card{
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.7);
  border-radius:22px;
  box-shadow:0 20px 44px -24px rgba(20,30,45,.22);
}
.news-card:hover{
  background:rgba(10,12,16,.72);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-color:rgba(255,255,255,.14);
}

/* Chips flotantes ya traslúcidos: se redondean para unificar el lenguaje */
.practice-badge,.news-chip{
  border-radius:18px;
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
}

/* Formulario de contacto: de líneas a campos de vidrio */
.form-inp{
  border:1px solid rgba(0,0,0,.1) !important;
  border-radius:14px !important;
  padding:14px 16px !important;
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:.3s;
}
.form-inp:focus{
  border-color:var(--azul) !important;
  background:rgba(255,255,255,.92);
  box-shadow:0 0 0 4px rgba(37,141,214,.12);
}
.form-group label{margin-bottom:8px}
/* El reset global pone todos los márgenes en 0, así que el título
   quedaba pegado directo al primer campo del formulario. */
.ct-right h3{margin-bottom:24px}

/* Barra de filtros de monitor-noticias.html: vidrio oscuro (la página
   es de tema oscuro, así que va vidrio esmerilado oscuro, no blanco
   como en servicios/equipo). */
.ml-bar{
  background:rgba(8,11,17,.94) !important;
  backdrop-filter:blur(10px) saturate(160%) !important;
  -webkit-backdrop-filter:blur(10px) saturate(160%) !important;
  border-bottom:1px solid rgba(255,255,255,.09) !important;
  top:122px !important;
  transition:top .35s cubic-bezier(.16,1,.3,1);
}
@media(max-width:900px){
  .ml-bar{top:100px !important}
}
body.nav-compact .ml-bar{
  top:0 !important;
}
@media(min-width:901px){
  body.nav-compact .ml-bar-inner{
    padding-right:150px !important;
  }
}

/* Barra de filtros del equipo (equipo.html): vidrio más profundo */
.hk-bar{
  background:rgba(255,255,255,.94) !important;
  backdrop-filter:blur(10px) saturate(160%) !important;
  -webkit-backdrop-filter:blur(10px) saturate(160%) !important;
  border-bottom:1px solid rgba(255,255,255,.5) !important;
  top:122px !important;
  transition:top .35s cubic-bezier(.16,1,.3,1);
}
@media(max-width:900px){
  .hk-bar{top:100px !important}
}
/* Con el nav compacto (sólo botón MENÚ), la barra sube a pegarse al
   borde superior real de la ventana (top:0), no sólo a la altura del
   botón: el botón vive dentro de un envoltorio con margen transparente
   (14px) por encima suyo, y si la barra sólo llegara hasta la altura
   del botón, ese margen seguiría dejando ver una franja oscura del
   contenido de fondo por encima de la barra. */
body.nav-compact .hk-bar{
  top:0 !important;
}
/* El botón MENÚ compacto es position:fixed y flota por encima de la
   barra (mismo "top"): sin este espacio reservado a la derecha, tapa
   el conteo "N personas" en pantallas donde .hk-bar-inner llega hasta
   el borde. */
@media(min-width:901px){
  body.nav-compact .hk-bar-inner{
    padding-right:150px !important;
  }
}

/* 07 / Noticias & Blog — el panel completo pasa a vidrio flotante
   (antes era un degradado plano opaco). */
#noticias{position:relative}
#noticias::before{
  content:'';
  position:absolute;
  inset:20px -6% auto -6%;
  height:420px;
  z-index:-1;
  background:radial-gradient(circle at 30% 40%, rgba(37,141,214,.22) 0%, transparent 60%);
  filter:blur(60px);
  pointer-events:none;
}
.news-showcase{
  background:rgba(255,255,255,.5) !important;
  backdrop-filter:blur(26px) saturate(180%);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  border:1px solid rgba(255,255,255,.7) !important;
  border-radius:28px;
  box-shadow:0 28px 60px -30px rgba(20,30,45,.3);
}

/* 08 / Contacto — de dos bloques opacos a dos paneles de vidrio
   flotando sobre un lienzo oscuro ambiental. */
#contacto{
  position:relative;
  overflow:hidden;
  background:linear-gradient(160deg,#050608 0%,#0b1220 55%,#070c14 100%);
}
#contacto::before{
  content:'';
  position:absolute;
  inset:-10%;
  z-index:0;
  background:
    radial-gradient(circle at 12% 20%, rgba(37,141,214,.55) 0%, transparent 42%),
    radial-gradient(circle at 88% 80%, rgba(160,120,255,.4) 0%, transparent 42%);
  filter:blur(40px);
  pointer-events:none;
}
.contacto-split{
  gap:24px !important;
  position:relative;
  z-index:1;
}
.ct-left,.ct-right{
  border-radius:28px;
  padding:64px 48px !important;
  position:relative;
  overflow:hidden;
}
.ct-left{
  background:rgba(15,20,30,.55) !important;
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 30px 60px -30px rgba(0,0,0,.6);
}
.ct-left::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:radial-gradient(circle at 20% 15%, rgba(37,141,214,.5) 0%, transparent 55%);
  pointer-events:none;
}
.ct-right{
  background:rgba(255,255,255,.96) !important;
  backdrop-filter:blur(16px) saturate(105%);
  -webkit-backdrop-filter:blur(16px) saturate(105%);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.95);
}
.ct-right::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:radial-gradient(circle at 85% 10%, rgba(160,120,255,.16) 0%, transparent 55%);
  pointer-events:none;
}
@media(max-width:1000px){
  .ct-left,.ct-right{padding:48px 32px !important}
}
@media(max-width:640px){
  #contacto{padding:56px 5% !important}
  .ct-left,.ct-right{padding:40px 24px !important;border-radius:22px}
}

/* servicios.html — Áreas de Práctica: mismo lenguaje de vidrio que
   el resto del sitio, aplicado a la barra de filtros y a la grilla
   "Por sector" (las tarjetas con foto de arriba se quedan como están,
   son fotografía a página completa, no piden vidrio). */
.ap-bar{
  background:rgba(255,255,255,.94) !important;
  backdrop-filter:blur(10px) saturate(160%) !important;
  -webkit-backdrop-filter:blur(10px) saturate(160%) !important;
  border-bottom:1px solid rgba(255,255,255,.5) !important;
  top:122px !important;
  transition:top .35s cubic-bezier(.16,1,.3,1);
}
@media(max-width:900px){
  .ap-bar{top:100px !important}
}
/* Con el nav compacto (sólo botón MENÚ), la barra sube a pegarse al
   borde superior real de la ventana (top:0), no sólo a la altura del
   botón: el botón vive dentro de un envoltorio con margen transparente
   (14px) por encima suyo, y si la barra sólo llegara hasta la altura
   del botón, ese margen seguiría dejando ver una franja oscura del
   contenido de fondo por encima de la barra. */
body.nav-compact .ap-bar{
  top:0 !important;
}
/* El botón MENÚ compacto es position:fixed y flota por encima de la
   barra (mismo "top"): sin este espacio reservado a la derecha, tapa
   el conteo "17 áreas" en pantallas donde .ap-bar-inner llega hasta
   el borde. */
@media(min-width:901px){
  body.nav-compact .ap-bar-inner{
    padding-right:150px !important;
  }
}
.ap-pill{
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.ap-search input{
  background:rgba(255,255,255,.6) !important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
/* Aire entre el final de la grilla y la sección "Por sector": antes
   .ap-main terminaba en padding-bottom:0 y la última tarjeta (ahora
   más ancha/pesada por la tarjeta de cierre) quedaba pegada al inicio
   de la siguiente sección. */
.ap-main{padding-bottom:64px !important}

/* La grilla "dense" de #apGrid puede dejar el último ítem solo con un
   hueco en blanco a su derecha (depende del ancho de viewport, no
   siempre calza). Si queda último y solo, que ocupe todo el ancho
   en vez de verse cortado. */
#apGrid>.ap-card:last-child:not(.ap-feat):not(.ap-wide){
  grid-column:1/-1;
}
@media(max-width:640px){
  #apGrid>.ap-card:last-child{grid-column:auto}
}

/* Las tarjetas tenían una sombra bastante ancha (34px de blur) que,
   justo debajo de la barra de filtros ya sólida, se veía como un
   desvanecido sucio hacia blanco en vez de un corte limpio. La
   suavizamos y acortamos, y la grilla queda con fondo blanco sólido
   detrás (sin nada ambiguo en el espacio entre tarjetas). */
#apGrid{background:var(--blanco,#fff)}
.ap-card{
  box-shadow:0 6px 16px -10px rgba(8,8,8,.35) !important;
}
.ap-sectors{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,#fbfcfe 0%,#eef3f9 100%);
}
.ap-sectors::before{
  content:'';
  position:absolute;
  inset:-10% -6% auto -6%;
  height:600px;
  z-index:0;
  background:
    radial-gradient(circle at 15% 20%, rgba(37,141,214,.3) 0%, transparent 55%),
    radial-gradient(circle at 85% 60%, rgba(255,170,110,.2) 0%, transparent 55%);
  filter:blur(50px);
  pointer-events:none;
}
.ap-sectors>*{position:relative;z-index:1}
.ap-sector{
  background:rgba(255,255,255,.55) !important;
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  border:1px solid rgba(255,255,255,.7) !important;
  border-radius:22px;
  box-shadow:0 20px 44px -26px rgba(20,30,45,.22);
}
.ap-sector:hover{
  background:rgba(255,255,255,.8) !important;
  box-shadow:0 26px 52px -24px rgba(20,30,45,.3);
}
.ap-tag{backdrop-filter:blur(6px)}

@media(max-width:1000px){
  .pillars{grid-template-columns:1fr}
}
@media(prefers-reduced-transparency:reduce){
  .pillar,.stat,.testi,.eq-row,.news-card,.form-inp,.news-showcase,.ct-left,.ct-right,.ap-sector{
    background:var(--blanco);backdrop-filter:none;
  }
}

/* ══════════════════════════════════════════════════════
   PERFILES DE ÁREA (perfilAreas/*.html) — índice lateral
   convertido en tarjeta de vidrio flotante. El contenido
   editorial (servicios, equipo, FAQ) se deja en blanco limpio,
   sin vidrio, para no restarle legibilidad al texto.
   ══════════════════════════════════════════════════════ */
.a-side-nav{
  background:rgba(255,255,255,.55) !important;
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.7);
  border-radius:20px;
  padding:34px 22px !important;
  box-shadow:0 24px 54px -32px rgba(20,30,45,.25);
}
.a-side-nav__cta{
  border-top-color:rgba(20,30,45,.1) !important;
}

/* Fotos de equipo: las fuentes son de cuerpo entero con mucho fondo
   claro alrededor, así que dentro del marco (4/5) se ve casi todo
   espacio vacío. Acercamos el encuadre para que la persona llene la
   tarjeta en vez de flotar chiquita en medio de una caja gris. */
.a-team-media img{
  transform:scale(1.14);
  object-position:center 22%;
  filter:none !important;
}
a.a-team-row:hover .a-team-media img{
  transform:scale(1.17) !important;
}
/* Tarjeta de nombre: de bloque azul plano a vidrio oscuro, que
   combina mejor con la foto a color (feedback: "el gris con la
   tarjeta azul no se ve bien"). */
.a-team-media-panel{
  background:rgba(8,10,14,.6) !important;
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 14px 30px -18px rgba(0,0,0,.5) !important;
}
.a-team-media-role{
  color:var(--azul) !important;
  opacity:1 !important;
}
@media(max-width:900px){
  .a-side-nav{
    background:transparent !important;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    border:none;
    box-shadow:none;
    padding:36px 0 0 !important;
  }
}
@media(prefers-reduced-transparency:reduce){
  .a-side-nav{background:var(--blanco) !important;backdrop-filter:none}
}

/* ══════════════════════════════════════════════════════
   PERFILES DE PERSONA (perfilesSocios/*.html,
   perfilAosciados/*.html) — la barra de pestañas (#pfTabbar)
   es una barra sticky más, igual que .ap-bar/.hk-bar/.ml-bar:
   mismo mecanismo de nav compacto (ver apple-polish.js). */
#pfTabbar{
  background:rgba(255,255,255,.86) !important;
  backdrop-filter:blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter:blur(16px) saturate(180%) !important;
  border-bottom:1px solid rgba(255,255,255,.6) !important;
  top:122px !important;
  transition:top .35s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
}
@media(max-width:900px){
  #pfTabbar{top:100px !important}
}
body.nav-compact #pfTabbar{
  top:0 !important;
}
@media(min-width:901px){
  body.nav-compact #pfTabbar{
    padding-right:calc(6% + 150px) !important;
  }
}