/* =============================================================================
   ÁREA DE ESPECIALIZACIÓN — SILVER EDITION (NEGRO + PLATA)
   Hoja completa, depurada y COMENTADA (incluye fix de tooltip en chips)
   -----------------------------------------------------------------------------
   - Mantiene Look&Feel plata/negro y animaciones opt-in por data-atributos.
   - Tooltips en #catTabs:
       • Desktop/Tablet -> aparece ARRIBA del botón, ancho fijo y texto justificado.
       • Mobile -> opción “modal” centrada activando data-tip-fixed="1" en el botón.
   - Cards .pro-card: header en 3 líneas (eyebrow, título multi-línea, badge),
     medallón SIEMPRE circular, pequeños fixes de rendimiento y accesibilidad.
   ============================================================================ */

/* ============================================================================
   0) TOKENS + FLAGS
   ============================================================================ */
:root{
  /* Flags informativos (por si los lees en JS) */
  --feat-chips-shine: 0;        /* 0 off (default), 1 on */

  /* Paleta plata/negro */
  --silver-ink: #0a0a0a;
  --silver-50:  rgba(255,255,255,.05);
  --silver-08:  rgba(255,255,255,.08);
  --silver-12:  rgba(255,255,255,.12);
  --silver-15:  rgba(255,255,255,.15);
  --silver-22:  rgba(255,255,255,.22);
  --silver-30:  rgba(255,255,255,.30);
  --silver-35:  rgba(255,255,255,.35);
  --silver-45:  rgba(255,255,255,.45);
  --silver-55:  rgba(255,255,255,.55);
  --silver-60:  rgba(255,255,255,.60);
  --text-plat:  #eaeaea;
  --icon-plat:  #cfcfcf;

  /* Forma y tiempos */
  --r-chip: .9rem;
  --r-card: 16px;
  --t-fast: .15s; --t-med: .25s; --t-slow: .75s;
  --e-base: ease;
  --shadow-elev: 0 8px 24px rgba(0,0,0,.55);

  /* Tooltip chips (unificado) */
  --catTipWidth: 240px;         /* ancho fijo desktop/tablet (reducido) */
  --catTipGutter: 16px;         /* margen lateral seguro en mobile */
  --catTipTopMobile: 22vh;      /* altura del tooltip “modal” en mobile */
}

/* ============================================================================
   0b) HELPERS SAFARI/WEBKIT
   ============================================================================ */
.safari-blur-fix{
  -webkit-backdrop-filter: saturate(120%) blur(12px);
  backdrop-filter: saturate(120%) blur(12px);
  background-color: rgba(10,10,10,.55);
}
.webkit-text-gradient{
  background-clip: text; -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; text-fill-color: transparent;
}

/* ============================================================================
   1) SCOPE (#expertise, #catTabs)
   ============================================================================ */
#expertise { position: relative; z-index: 1; background: #000; color: var(--text-plat); }
#catTabs   { position: relative; z-index: 2; }
#catTabs .cat-chip{
  position: relative;
  overflow: visible;
}

/* ============================================================================
   2) CHIPS / TABS
   ============================================================================ */
#catTabs .cat-chip{
  display: inline-flex; align-items: center; gap: .75rem;
  width: 100%; min-height: 60px; padding: .8rem 1.15rem; box-sizing: border-box;
  border-radius: var(--r-chip);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--silver-22);
  color: var(--text-plat);
  letter-spacing: .2px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 2px 6px rgba(0,0,0,.55);
  position: relative; isolation: isolate;
  transition: border-color var(--t-med) var(--e-base), box-shadow var(--t-med) var(--e-base), background var(--t-med) var(--e-base), transform var(--t-med) var(--e-base);
  cursor: pointer;
}
/* Icono principal y “?” plata animada */
#catTabs .cat-chip > i:first-child,
#catTabs .cat-chip .info-icon{
  width: 26px; height: 26px; flex: 0 0 26px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; margin-top: 1px;
  color: #c0c0c0; /* fallback */
  background: linear-gradient(120deg,#b0b0b0 20%,#e0e0e0 40%,#f8f8f8 50%,#d0d0d0 60%,#b0b0b0 80%);
  background-size: 200% 200%;
  background-clip: text; -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; text-fill-color: transparent;
  animation: shine 3s linear infinite;
  
}
#catTabs .cat-chip .info-btn{
  position: static;
  z-index: 1;
}

#catTabs .cat-chip > span.flex-1{ display:block; line-height:1.25; font-weight:600; }
#catTabs .cat-chip .info-icon{ font-size:18px; opacity:.9; transition: transform var(--t-fast), opacity var(--t-fast), filter var(--t-fast); }
#catTabs .cat-chip .info-icon:hover{ opacity:1; transform: scale(1.08); animation-duration: 1.6s; }
/* Hover/active */
#catTabs .cat-chip:hover{
  border-color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.055);
  box-shadow: 0 10px 28px rgba(0,0,0,.45), 0 0 16px rgba(255,255,255,.18);
  transform: translateY(-1px);
}
#catTabs .cat-chip.is-active{
  border-color: rgba(255,255,255,.62);
  box-shadow: 0 12px 32px rgba(0,0,0,.5), 0 0 18px rgba(255,255,255,.22);
}
@keyframes shine{ 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }
/* Neutraliza colores internos de FA dentro de #catTabs */
#catTabs .cat-chip i[class^="fa-"],
#catTabs .cat-chip i[class*=" fa-"]{ color: var(--icon-plat); opacity:.9; }

/* 2a) DESTELLO (opt-in por data-feat-chips-shine="on") */
#catTabs[data-feat-chips-shine="on"] .cat-chip::before{ content:""; position:absolute; inset:0; clip-path: inset(0 round var(--r-chip)); z-index:-1; }
#catTabs .cat-chip .info-btn::after{
  content: attr(data-tip);

  /* caja / tipografía */
  padding: 12px 14px;
  line-height: 1.45;
  white-space: normal;
  text-align: justify;
  text-align-last: left;

  /* posición relativa a la chip */
  position: absolute;
  left: 12px;                        /* gutter izquierdo dentro de la chip */
  right: 12px;                       /* gutter derecho dentro de la chip */
  bottom: calc(100% + 10px);         /* SIEMPRE ARRIBA del botón */
  width: auto;                       /* = ancho chip - 24px */
  max-width: none;
  transform: none;

  /* estilo visual (mismos colores que traías) */
  color: #fff;
  background: #000;
  border: 1px solid #fff;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0,0,0,.60);

  /* visibilidad (se muestra con hover/focus/aria) */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 10020;
  transition: opacity .18s ease, transform .18s ease;
}
/* Flecha: sale desde el borde superior, alineada hacia la izquierda */
#catTabs .cat-chip .info-btn::before{
  content: "";
  position: absolute;
  left: 28px;                        /* mueve más/menos hacia la izquierda */
  bottom: calc(100% + 4px);
  width: 12px; height: 12px;
  transform: rotate(45deg);
  background: #000;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  opacity: 0;
  visibility: hidden;
  z-index: 10021;
  transition: opacity .18s ease;
}

@media (hover:hover) and (pointer:fine){
  #catTabs[data-feat-chips-shine="on"] .cat-chip:hover::after{ left: 80%; opacity:.9; }
}
/* 2b) Kill switch destello */
#catTabs:not([data-feat-chips-shine="on"]) .cat-chip::after,
#catTabs:not([data-feat-chips-shine="on"]) .cat-chip::before{ content:none; display:none; }

/* ============================================================================
   3) TOOLTIP EN CHIPS (#catTabs) — DESKTOP/TABLET y MÓVIL “MODAL”
   ============================================================================ */

/* Apaga tooltips anteriores basados en .info-icon dentro de #catTabs */
#catTabs .info-icon::before,
#catTabs .info-icon::after{ content:none !important; display:none !important; }

/* Botón de ayuda (el que dispara el tooltip) */
#catTabs .info-btn{
  position: relative; z-index: 10010;
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; flex:0 0 28px;
  color:#fff; background:transparent; border:0; cursor:pointer;
  transition:transform .15s ease, opacity .15s ease; opacity:.95;
}
#catTabs .info-btn i{ font-size:20px; line-height:1; }
#catTabs .info-btn:hover, #catTabs .info-btn:focus-visible{ transform:scale(1.06); opacity:1; outline:none; }

/* Tooltip (desktop/tablet): arriba del botón, ancho fijo reducido y texto justificado */

/* Flecha del tooltip (desktop/tablet) */
#catTabs .info-btn::before{
  content:""; position:absolute; left:50%; bottom: calc(100% + 6px);
  width:12px; height:12px; transform: translateX(-50%) rotate(45deg);
  background:#000; border-right:1px solid #fff; border-bottom:1px solid #fff;
  z-index: 10005; opacity: 0; visibility: hidden; transition: opacity .18s ease;
}
/* Mostrar (hover/focus o aria-expanded=true) */
#catTabs .cat-chip .info-btn:hover::after,
#catTabs .cat-chip .info-btn:focus-visible::after,
#catTabs .cat-chip .info-btn[aria-expanded="true"]::after,
#catTabs .cat-chip .info-btn:hover::before,
#catTabs .cat-chip .info-btn:focus-visible::before,
#catTabs .cat-chip .info-btn[aria-expanded="true"]::before{
  opacity: 1;
  visibility: visible;
}


/* ----- MÓVIL: dos comportamientos ------------------------------------------
   a) “Normal” (sin data-tip-fixed): se desplaza un poco a la izq. para evitar recortes
   b) “Modal” centrado (con data-tip-fixed="1"): se fija al viewport, centrado real,
      sin flecha y con ancho seguro respecto a los bordes
--------------------------------------------------------------------------- */

/* Tablet/Móvil: mismos gutters; no se corta */
@media (max-width: 1024px){
  #catTabs .cat-chip .info-btn::after{ left: 12px; right: 12px; }
  #catTabs .cat-chip .info-btn::before{ left: 28px; }
}

/* MODO “MODAL” opcional en móvil: si el botón trae data-tip-fixed="1" */
@media (max-width: 768px){
  #catTabs .cat-chip .info-btn[data-tip-fixed="1"]::after,
  #catTabs .cat-chip .info-btn[data-tip-fixed="1"]::before{
    position: fixed;
    left: 50vw;
    transform: translateX(-50%);
    z-index: 10050;
  }
  #catTabs .cat-chip .info-btn[data-tip-fixed="1"]::after{
    top: 22vh; bottom: auto;
    width: min(320px, calc(100vw - 32px));   /* seguro a bordes */
    max-width: none;
    opacity: 1; visibility: visible;
    pointer-events: auto;
  }
  #catTabs .cat-chip .info-btn[data-tip-fixed="1"]::before{
    opacity: 0; visibility: hidden;         /* sin flecha en modal */
  }
}

/* Seguridad general: nada recorta overlays */
#catTabs, #catTabs *{ overflow: visible; }

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
  #catTabs .info-btn, #catTabs .info-btn::after, #catTabs .info-btn::before{ transition:none !important; }
}

/* ============================================================================
   4) MEDALLÓN PLATA + CIRCULARIDAD FORZADA
   ============================================================================ */
#expertise .lex-medallion{
  --m-size: 2.5rem;
  width: var(--m-size); height: var(--m-size);
  min-width: var(--m-size); min-height: var(--m-size);
  aspect-ratio: 1 / 1; border-radius: 999px;
  display:grid; place-items:center;
  position:relative; isolation:isolate; background: transparent; border: none; box-shadow:none; color:#f5f5f5;
  --ring-w: 2px; --ring-alpha: .42;
}
#expertise .lex-medallion::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding: var(--ring-w);
  background: conic-gradient(from 0deg, rgba(255,255,255,calc(var(--ring-alpha)*1.10)) 0deg, rgba(230,230,230,var(--ring-alpha)) 45deg, rgba(200,200,200,var(--ring-alpha)) 90deg, rgba(255,255,255,calc(var(--ring-alpha)*.95)) 135deg, rgba(190,190,190,var(--ring-alpha)) 180deg, rgba(255,255,255,calc(var(--ring-alpha)*1.10)) 225deg, rgba(210,210,210,var(--ring-alpha)) 270deg, rgba(255,255,255,calc(var(--ring-alpha)*1.00)) 315deg, rgba(235,235,235,var(--ring-alpha)) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 6px 18px rgba(0,0,0,.35);
  opacity:.98; pointer-events:none;
}
#expertise .lex-medallion::after{
  content:""; position:absolute; inset:-1.5px; border-radius:inherit;
  background: conic-gradient(from 0deg, rgba(255,255,255,0) 0deg, rgba(255,255,255,.85) 16deg, rgba(255,255,255,0) 28deg);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - (var(--ring-w) + 1.5px)), #000 100%);
  mix-blend-mode: screen; filter: blur(.6px); opacity:.55; animation: ringSpin 7.2s linear infinite; pointer-events:none;
}
#expertise .pro-card:hover .lex-medallion::after{ animation-duration: 2.6s; opacity:.85; }
#expertise .lex-medallion > i{ font-size: 1.25rem; text-shadow: 0 1px 0 rgba(0,0,0,.3), 0 8px 16px rgba(0,0,0,.35); }
#expertise .pro-card:hover .lex-medallion{ box-shadow: 0 0 22px rgba(255,255,255,.15); }
@keyframes ringSpin{ to { transform: rotate(360deg); } }

/* RR.HH. (escala manteniendo círculo) */
#expertise [data-cat="rrhh-blindaje"] .lex-head{ display:flex; align-items:center; gap: 1rem; min-height: 56px; }
#expertise [data-cat="rrhh-blindaje"] .lex-medallion{
  --m-size: 3.2rem; width: var(--m-size); height: var(--m-size);
  min-width: var(--m-size); min-height: var(--m-size);
  aspect-ratio: 1 / 1; border-radius: 999px; flex: 0 0 var(--m-size);
}
#expertise [data-cat="rrhh-blindaje"] .lex-medallion::before{ padding: 2px; background: conic-gradient(from 0deg, rgba(255,255,255,.46) 0deg, rgba(225,225,225,.40) 72deg, rgba(255,255,255,.40) 144deg, rgba(200,200,200,.36) 216deg, rgba(255,255,255,.50) 288deg, rgba(240,240,240,.42) 360deg); }
#expertise [data-cat="rrhh-blindaje"] .lex-medallion::after{ inset:-1px; -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 100%); }

/* ============================================================================
   5) ACCESIBILIDAD: REDUCE MOTION
   ============================================================================ */
@media (prefers-reduced-motion: reduce){
  #catTabs .cat-chip, #catTabs .cat-chip::after, #expertise .lex-medallion::after,
  .badge-reco, .crown-glow, .pulse-glow, .pro-card::after, #expertise .pro-card::before{ animation: none !important; transition: none !important; }
  #catTabs .cat-chip:hover{ transform: none !important; }
}

/* ============================================================================
   6) CARDS .pro-card (base + destello + hint + watermark + móvil)
   ============================================================================ */
#expertise .pro-card{
  position: relative; border-radius: var(--r-card);
  background: radial-gradient(120% 90% at 10% 0%, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 40%), var(--silver-ink);
  border: 1px solid rgba(255,255,255,.14); box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, var(--shadow-elev);
  overflow: hidden;
}
#expertise .pro-card .pro-card__inner,
#expertise .pro-card > .min-h-\[200px\],
#expertise .pro-card > .min-h-\[200px\] > .pro-card__inner{ border-radius: inherit; }
#expertise .lex-divider{ height:1px; width:100%; background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.10), rgba(255,255,255,.06)); margin:.5rem 0; border:0; }

/* Destello opt-in */
#expertise[data-feat-card-destello="on"] .pro-card::after{
  content:""; position:absolute; top:0; left:-50%; width:40%; height:100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%);
  transform: skewX(-20deg); opacity:0; pointer-events:none;
}
@media (hover:hover) and (pointer:fine){
  #expertise[data-feat-card-destello="on"] .pro-card:hover::after{ opacity:1; animation: card-destello 1.6s ease-in-out forwards; }
}
@keyframes card-destello{
  0%{ left:-50%; opacity:0; } 15%{ opacity:1; } 50%{ left:120%; opacity:.6; } 85%{ opacity:1; } 100%{ left:-50%; opacity:0; }
}

/* Hint “Ver info…” */
#expertise .pro-card::before{
  content: "Ver info…"; position:absolute; right:10px; bottom:10px;
  padding:.28rem .55rem; font-size:.82rem; line-height:1; color: rgba(234,234,234,.95);
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); border-radius:.5rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12); pointer-events:none; opacity:0; transform: translateY(4px);
}
@media (hover:hover) and (pointer:fine){
  #expertise .pro-card:hover::before, #expertise .pro-card:focus-within::before{ animation: hintPop 1.8s ease-out forwards; }
}
@media (hover:none), (max-width: 640px){ #expertise .pro-card::before{ animation: hintPop 2.2s ease-out forwards; animation-delay:.25s; } }
@keyframes hintPop{ 0%{opacity:0; transform:translateY(6px);} 20%{opacity:.95; transform:translateY(0);} 70%{opacity:.95;} 100%{opacity:0; transform:translateY(2px);} }

/* Watermark opcional */
.card-watermark-outer{ position:absolute; inset:0; border-radius:inherit; background-size:cover; background-position:center; background-repeat:no-repeat; filter:grayscale(100%); opacity:0; transition: opacity var(--t-med) var(--e-base); z-index:1; pointer-events:none; }
.pro-card:hover .card-watermark-outer{ opacity:.30; }

/* Teaser */
#expertise .lex-teaser{
  font-size: 1.05rem; line-height: 1.55; color: #e6e6e6; font-weight: 400; margin-top: .5rem;
  font-family: "Montserrat", sans-serif;
}
@media (min-width: 768px){
  #expertise .lex-teaser{ font-size: 1.15rem; line-height: 1.65; }
}
@media (hover:none), (max-width: 640px){
  #expertise .pro-card .min-h-\[200px\], #expertise .pro-card .max-h-\[200px\]{ min-height:0 !important; max-height:none !important; }
  #expertise .pro-card .group-hover\:max-h-\[1000px\], #expertise .pro-card .group-hover\:max-h-\[1100px\], #expertise .pro-card .group-hover\:max-h-\[1200px\]{ max-height:none !important; }
  #expertise .pro-card .p-6{ padding: 1rem !important; }
}

/* ============================================================================
   7) BADGES (recomendado/destacado) + autoestilo
   ============================================================================ */
.badge-reco{
  --reco-blue: #3b82f6; --reco-blue-200:#93c5fd; --reco-blue-300:#60a5fa;
  display:inline-flex; align-items:center; gap:.45rem; padding:.38rem .62rem; border-radius:.65rem;
  color:#eaf2ff; background: linear-gradient(180deg, rgba(59,130,246,.10), rgba(59,130,246,.06));
  border:1px solid rgba(59,130,246,.65);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 6px 18px rgba(2,6,23,.35), 0 0 12px rgba(59,130,246,.25);
  font-size:.78rem; line-height:1; transition: box-shadow var(--t-med), border-color var(--t-med);
}
.badge-reco:hover{ border-color: rgba(59,130,246,.85); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 10px 26px rgba(2,6,23,.45), 0 0 18px rgba(59,130,246,.35); }
.crown-glow{ display:inline-block; color:#facc15; text-shadow: 0 0 6px rgba(250,204,21,.55), 0 0 12px rgba(250,204,21,.35); animation: crownPulse 2.2s ease-in-out infinite; }
@keyframes crownPulse{ 0%,100%{ text-shadow:0 0 6px rgba(250,204,21,.55),0 0 12px rgba(250,204,21,.35); transform: translateY(0);} 50%{ text-shadow:0 0 12px rgba(250,204,21,.85),0 0 22px rgba(250,204,21,.55); transform: translateY(-.5px);} }

.badge--destacado{
  color:#fff8e6; background: linear-gradient(180deg, rgba(234,179,8,.18), rgba(250,204,21,.10));
  border: 1px solid #3b82f6; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 6px 18px rgba(2,6,23,.35), 0 0 10px rgba(59,130,246,.35);
}
.badge--recomendado{
  color:#eaf2ff; background: linear-gradient(180deg, rgba(37,99,235,.15), rgba(59,130,246,.10));
  border: 1px solid #ffffff; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 6px 18px rgba(2,6,23,.35), 0 0 12px rgba(255,255,255,.25);
}

/* Auto-estilo si no se usan clases explícitas */
span:has(> i.fa-crown), span:has(> i.fa-award){
  position: relative; display:inline-flex; align-items:center; gap:.45rem; padding:.40rem .68rem; border-radius:.7rem;
  font-size:.80rem; line-height:1; overflow:hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 6px 18px rgba(0,0,0,.35);
}
span:has(> i.fa-crown){ color:#fff8e6; background: linear-gradient(180deg, rgba(234,179,8,.18), rgba(250,204,21,.10)); border:1px solid #3b82f6; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 6px 18px rgba(2,6,23,.35), 0 0 10px rgba(59,130,246,.35); }
span:has(> i.fa-crown) > i.fa-crown{ color:#facc15; filter: drop-shadow(0 0 6px rgba(255,255,255,.5)) drop-shadow(0 0 10px rgba(250,204,21,.45)); animation: crownPulse 2.6s ease-in-out infinite; }
span:has(> i.fa-award){ color:#eaf2ff; background: linear-gradient(180deg, rgba(37,99,235,.15), rgba(59,130,246,.10)); border:1px solid #ffffff; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 6px 18px rgba(2,6,23,.35), 0 0 12px rgba(255,255,255,.25); }
span:has(> i.fa-award) > i.fa-award{ color:#60a5fa; filter: drop-shadow(0 0 7px rgba(96,165,250,.65)); animation: badgePulse 2.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){
  span:has(> i.fa-crown) > i.fa-crown, span:has(> i.fa-award) > i.fa-award{ animation: none !important; }
}

/* ============================================================================
   8) LINKS DE CONTACTO (unificados)
   ============================================================================ */
.contact-link{ display:inline-flex; align-items:center; justify-content:center; width:2.25rem; height:2.25rem; border-radius:9999px; transition: transform var(--t-fast), filter var(--t-fast), box-shadow var(--t-fast), opacity var(--t-fast); opacity:.95; outline:none; --glow-color: rgba(255,255,255,.5); }
.contact-link.whatsapp{ color:#25D366; --glow-color: rgba(37,211,102,.55); }
.contact-link.mail{     color:#E8D8B9; --glow-color: rgba(232,216,185,.55); }
.pulse-glow{ animation: glowCycle 2.2s ease-in-out infinite; }
@keyframes glowCycle{ 0%,100%{ filter: drop-shadow(0 0 0 var(--glow-color)); opacity:.92; transform: translateY(0);} 50%{ filter: drop-shadow(0 0 10px var(--glow-color)); opacity:1; transform: translateY(-1px);} }
.contact-link:hover, .contact-link:focus-visible{ animation-duration:1.2s; filter: drop-shadow(0 0 12px var(--glow-color)); transform: translateY(-1px); opacity:1; }
.contact-link:focus-visible{ box-shadow: 0 0 0 2px rgba(255,255,255,.25); }
@media (prefers-reduced-motion: reduce){ .pulse-glow{ animation: none !important; } }

/* ============================================================================
   9) CABECERA DE CARD EN 3 LÍNEAS (eyebrow | TÍTULO MULTILÍNEA | badge)
   ============================================================================ */
#expertise .card-face .flex.items-start.justify-between{
  display: grid !important;
  grid-template-columns: auto 1fr;   /* icono | textos */
  grid-template-rows: auto auto auto;/* eyebrow | título | badge */
  column-gap: .75rem;
  align-items: center !important;
}
/* Bloque icono+títulos ocupa filas 1 y 2 */
#expertise .lex-head{
  display: grid;
  grid-template-columns: auto 1fr;   /* medallón | textos */
  grid-template-rows: auto auto;     /* eyebrow | título */
  gap: .5rem .75rem;
  grid-column: 1 / 3; grid-row: 1 / 3; min-width: 0;
}
/* Medallón fijo a la izquierda */
#expertise .lex-head .lex-medallion{ grid-column: 1; grid-row: 1 / 3; }
/* Eyebrow: 1 línea con elipsis */
#expertise .lex-eyebrow{ grid-column: 2; grid-row: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* Título: PERMITE SALTOS de línea (no se corta) */
#expertise .lex-title{ grid-column: 2; grid-row: 2; white-space: normal; overflow-wrap: anywhere; line-height: 1.22; }
/* Badge baja a la tercera fila */
#expertise .card-face .flex.items-start.justify-between > span.inline-flex,
#expertise .card-face .flex.items-start.justify-between > [role="status"]{
  grid-column: 1 / 3; grid-row: 3; justify-self: start; width: max-content;
}

/* ============================================================================
   10) ORB OFF (rendimiento)
   ============================================================================ */
.pro-card__orb, .pro-card__orb::before, .pro-card__orb::after{ display:none !important; content:none !important; animation:none !important; opacity:0 !important; pointer-events:none !important; }
.pro-card .pro-card__inner::before, .pro-card .pro-card__inner::after{ background:none !important; box-shadow:none !important; animation:none !important; }
.pro-card .pro-card__inner{ background-image:none !important; }

/* ============================================================================
   11) RENDIMIENTO / COMPOSICIÓN
   ============================================================================ */
#expertise [class*="grid"], #expertise [class*="row"]{ overflow: visible; }
#catTabs[data-feat-chips-shine="on"] .cat-chip::after,
#expertise[data-feat-card-destello="on"] .pro-card::after{ will-change: transform, opacity; transform: translateZ(0); }
@supports not (background: conic-gradient(red, blue)){
  .lex-medallion::before{ background:none; box-shadow: 0 0 0 2px rgba(255,255,255,.25) inset, 0 6px 18px rgba(0,0,0,.35); }
}
@supports not (-webkit-background-clip: text){
  #catTabs .cat-chip > i:first-child, #catTabs .cat-chip .info-icon{ background:none; -webkit-text-fill-color: currentColor; color:#c0c0c0; animation: none; }
}

/* ============================================================================
   12) PULSOS GLOBALES (FLAG)
   ============================================================================ */
#expertise[data-feat-pulse="off"] .pulse-glow,
#expertise[data-feat-pulse="off"] .crown-glow,
#expertise[data-feat-pulse="off"] .badge-reco{ animation: none !important; }

/* ============================================================================
   13) TOOLTIP EN TARJETAS (.pro-card) — se mantiene clásico
   ============================================================================ */
#expertise .pro-card .info-icon{
  position: relative; cursor: pointer; opacity: .85;
  transition: transform .15s ease, opacity .15s ease, filter .15s ease;
}
#expertise .pro-card .info-icon:hover, #expertise .pro-card .info-icon:focus{ opacity: 1; transform: translateY(-1px); filter: brightness(1.06); }
#expertise .pro-card .info-icon::after{
  content: attr(data-tip);
  position: absolute; left: 50%; bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(4px);
  padding: 6px 10px; font-size: .75rem; color: #111;
  background: linear-gradient(145deg, rgba(235,235,235,.98), rgba(255,255,255,.98));
  border: 1px solid rgba(255,255,255,.45); border-radius: 8px; box-shadow: 0 10px 26px rgba(0,0,0,.45);
  white-space: nowrap; z-index: 20; pointer-events: none; opacity: 0; visibility: hidden;
  transition: opacity .18s ease, transform .18s ease;
}
#expertise .pro-card .info-icon::before{
  content:""; position:absolute; left:50%; bottom: calc(100% + 3px);
  width:10px; height:10px; transform: translateX(-50%) rotate(45deg);
  background: linear-gradient(145deg, rgba(235,235,235,.98), rgba(255,255,255,.98));
  border-left: 1px solid rgba(255,255,255,.45); border-top: 1px solid rgba(255,255,255,.45);
  z-index: 19; opacity: 0; visibility: hidden; pointer-events:none; transition: opacity .18s ease;
}
#expertise .pro-card .info-icon:hover::after,
#expertise .pro-card .info-icon:focus::after,
#expertise .pro-card .info-icon:hover::before,
#expertise .pro-card .info-icon:focus::before{ opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
@media (max-width: 480px){
  #expertise .pro-card .info-icon::after{ white-space: normal; max-width: 240px; text-align: center; }
}

/* ===== Ajuste fino tooltip chips (forzar a la IZQUIERDA + ancho menor) ===== */
/* Sesgo horizontal (px): positivo = hacia la izquierda del botón */
#catTabs .info-btn{
  --tip-bias-x: 28px;       /* ajusta 24–36 según veas */
}

/* Desktop / tablet: mantener arriba del botón, pero corrido a la IZQUIERDA */
#catTabs .info-btn::after{
  width: 220px;             /* más angosto para evitar recortes */
  transform: translateX(calc(-50% - var(--tip-bias-x))) translateY(4px) !important;
}
#catTabs .info-btn::before{
  transform: translateX(calc(-50% - var(--tip-bias-x))) rotate(45deg) !important;
}

/* Tablet chica y móvil: mismo sesgo, pero con ancho seguro del viewport */
@media (max-width: 1024px){
  #catTabs .info-btn::after{
    width: auto;
    max-width: min(240px, calc(100vw - 32px));
    transform: translateX(calc(-50% - var(--tip-bias-x))) translateY(4px) !important;
  }
  #catTabs .info-btn::before{
    transform: translateX(calc(-50% - var(--tip-bias-x))) rotate(45deg) !important;
  }
}

/* Si usas el modo fijo (data-tip-fixed="1") en móvil, lo dejamos centrado modal */
@media (max-width: 768px){
  #catTabs .info-btn[data-tip-fixed="1"]::after,
  #catTabs .info-btn[data-tip-fixed="1"]::before{
    transform: translateX(-50%) !important;   /* modal centrado */
  }
}

/* === Tooltip de chips del mismo ancho que la chip y pegado a la izquierda === */
/* Variables que inyecta JS desde positionTip(): --chipW (px) y --btnCX (px)   */
/* --btnCX es cuánto debemos “echar a la izquierda” desde el centro del botón  */


/* Flecha: la dejamos sobre el botón (opcional). Si la quieres a 16px del borde
   izquierdo de la chip, descomenta el bloque de abajo. */
#catTabs .info-btn::before{
  left: 50% !important;
  bottom: calc(100% + 4px) !important;
  transform: translateX(0) rotate(45deg) !important;
}

/* — Móvil “modal” centrado si usas data-tip-fixed="1" (sin cambios) — */
@media (max-width: 768px){
  #catTabs .info-btn[data-tip-fixed="1"]::after,
  #catTabs .info-btn[data-tip-fixed="1"]::before{
    position: fixed !important; left: 50vw !important; transform: translateX(-50%) !important;
    z-index: 10050 !important;
  }
}
/* El contenedor (chip) posiciona al tip */
#catTabs .cat-chip{ position: relative; overflow: visible; }

/* Botón normal; sin pseudos ya */
#catTabs .info-btn{ position: relative; z-index: 2; }

/* TIP como div real (desktop/tablet) */
#catTabs .chip-tip{
  position: absolute;
  left: 12px;                 /* gutter interior */
  right: 12px;
  bottom: calc(100% + 10px);  /* arriba del botón */
  width: auto;                /* = ancho de la chip - 24px */
  max-width: none;

  padding: 12px 14px;
  line-height: 1.45;
  color: #fff;
  background: #000;
  border: 1px solid #fff;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0,0,0,.6);
  text-align: justify; text-align-last: left;

  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease;
  z-index: 10020;
}

/* Flecha del tip */
#catTabs .chip-tip::after{
  content: "";
  position: absolute;
  left: 28px;                 /* mueve la flecha a tu gusto */
  bottom: -6px;               /* pegada a la chip */
  width: 12px; height: 12px;
  transform: rotate(45deg);
  background: #000;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

/* Estado visible (lo añade JS) */
#catTabs .chip-tip.is-open{
  opacity: 1; visibility: visible; transform: translateY(0);
}

/* ===== MODO “MODAL” EN MÓVIL (opcional) ===== */
@media (max-width: 768px){
  #catTabs .chip-tip.is-fixed{
    position: fixed;
    left: 50vw; top: 22vh; right: auto; bottom: auto;
    transform: translateX(-50%);
    width: min(320px, calc(100vw - 32px));
    max-width: none;
    border-radius: 10px;
    z-index: 10050;
  }
  /* sin flecha en modal */
  #catTabs .chip-tip.is-fixed::after{ display:none; }
  /* backdrop */
  .tip-backdrop{
    position: fixed; inset: 0; background: rgba(0,0,0,.42); z-index: 10040;
  }
}

/* KILL SWITCH: desactiva cualquier pseudo-tooltip heredado */
#catTabs .info-btn::before,
#catTabs .info-btn::after,
#catTabs .info-icon::before,
#catTabs .info-icon::after,
#expertise .pro-card .info-icon::before,
#expertise .pro-card .info-icon::after{
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  transform: none !important;
}

/* === PANELES ARRIBA DEL GRID: contención y límites === */
#expertise,
#catInfoPanels{
  position: relative;           /* referencia de stacking y scroll */
}

/* El wrapper de paneles respeta el ancho del módulo */
#catInfoPanels{
  max-width: 72rem;             /* ajusta a tu container real */
  margin-inline: auto;
  padding-inline: 0;            /* no ensancha más que el módulo */
  box-sizing: border-box;
}

/* Cada panel no se “sale” ni empuja rarezas */
.cat-panel{
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;             /* evita sangrado de sombras y colas */
  contain: layout paint;        /* aislamiento (mejora el layout) */
}

/* En móviles, limita altura y agrega scroll interno si hay mucho texto */
@media (max-width: 640px){
  .cat-panel{
    max-height: 42vh;           /* 40–50vh va bien */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}

/* Tooltip portalizado: fuera del flujo y sin afectar el layout */
.chip-tip.is-portal {
  position: fixed !important;     /* clave: desligado del contenedor */
  left: 0; top: 0;                /* se recalcula vía JS */
  width: auto; max-width: min(320px, calc(100vw - 32px));
  z-index: 10050;                 /* encima de chips, debajo del navbar si aplica */
  transform: none !important;     /* no heredar transforms del contenedor */
  will-change: left, top;
}

/* backdrop opcional cuando el tip está portalizado (móvil/desktop) */
.tip-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.42);
  z-index: 10040;
  display: none;
}
.tip-backdrop.is-on { display: block; }

/* ===== Tooltip con tamaño controlado + scroll interno ===== */
#catTabs .chip-tip{
  /* caja */
  box-sizing: border-box;
  width: auto;
  max-width: min(320px, calc(100vw - 32px));

  /* 👇 controla el ALTO y activa SCROLL */
  max-height: 40vh;            /* ajusta 35–50vh a tu gusto */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

  /* padding extra para que no tape texto el scrollbar */
  padding-right: 16px;
}

/* En desktop puedes dar un poco más de alto si quieres */
@media (min-width: 1024px){
  #catTabs .chip-tip{ max-height: 52vh; }
}

/* Scrollbar finito (opcional, WebKit) */
#catTabs .chip-tip::-webkit-scrollbar{ width: 8px; }
#catTabs .chip-tip::-webkit-scrollbar-track{ background: rgba(255,255,255,.06); border-radius: 8px; }
#catTabs .chip-tip::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.25); border-radius: 8px; }
#catTabs .chip-tip::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.35); }