/* =========================
   BIG Consulting — Base
   ========================= */

:root{
  --c-ice: #BBD7D6;
  --c-teal: #749D99;
  --c-gold: #C6A06E;
  --c-navy: #182235;
  --c-ink: #1A1A12;
  --c-slate: #333F42;
  --c-steel: #6C8289;

  --wrap: 1200px;
  --pad: 18px;

  --hdr-h: 84px;
  --hdr-h-scrolled: 70px;

  --radius-btn: 15px;

  --radius-lg: 18px;

  --glass: rgba(255,255,255,.08);
  --glass-2: rgba(255,255,255,.12);
  --stroke: rgba(255,255,255,.35);
  --stroke-2: rgba(255,255,255,.22);

  --text: rgba(255,255,255,.86);
  --text-dim: rgba(255,255,255,.62);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  overflow-x:hidden;
}



a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.gradText{
  background: linear-gradient(
    90deg,
    #ffffff 0%,
    #BBD7D6 61%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent; /* ✅ Safari/iOS */
}


/* =========================
   Global Arrow (↗)
   ========================= */
:root{
  --ui-arrow-size: 18px;
  --ui-arrow-stroke: 2.2;
}

/* Link/botón que contiene la flecha */
.uiArrow{
  width: calc(var(--ui-arrow-size) + 10px);
  height: calc(var(--ui-arrow-size) + 10px);
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: inherit;
  text-decoration: none;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}

.uiArrow svg{
  width: var(--ui-arrow-size);
  height: var(--ui-arrow-size);
  display: block;
}

.uiArrow path{
  stroke: currentColor;
  stroke-width: var(--ui-arrow-stroke);
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* opcional hover sutil (sin cambiar tu paleta) */
@media (hover:hover){
  .uiArrow:hover{ transform: translateY(-1px); }
}

/* =========================
   UI Arrow (global)
   ========================= */
.uiArrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
}

.uiArrow svg{
  width:18px;
  height:18px;
}

.uiArrow path{
  fill:none;
  stroke: currentColor;
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ===== Arrow colors (ONLY THESE TWO) ===== */
.uiArrow--white{
  color:#fff;
}

.uiArrow--ink{
  color: rgba(20,28,30,.92);
}



/* =========================
   Header
   ========================= */
.siteHeader{
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
  height: var(--hdr-h);
  display:flex;
  align-items:center;
  transition: height .25s ease, background .25s ease, backdrop-filter .25s ease;
  background: transparent;
}

.siteHeader.is-scrolled{
  height: var(--hdr-h-scrolled);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
}

.siteHeader__inner{
  width: min(var(--wrap), calc(100% - (var(--pad) * 2)));
  margin:0 auto;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap: 18px;
}

/* Nav izquierda */
.navLeft{
  display:flex;
  gap: 22px;
  align-items:center;
  justify-content:flex-start;
  min-width: 0;
}

.navLeft__link{
  font-size: 14px;
  letter-spacing: .2px;
  color: rgba(255,255,255,.78);
  padding: 10px 0;
  position:relative;
  transition: color .2s ease;
  white-space:nowrap;
}

.navLeft__link:hover{ color: rgba(255,255,255,.92); }
.navLeft__link.is-active{ color: rgba(255,255,255,.92); }

/* Logo centrado */
.brand{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 6px 0;
}

.brand__logo{
  height: 42px;
  width:auto;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.35));
}

/* Derecha */
.navRight{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap: 14px;
}

/* =========================================
   HEADER · más ancho (más aire entre nav y logo)
   ========================================= */

/* HEADER wrap: ancho ideal en notebook, tope fijo en desktop grande */
.siteHeader__inner{
  width: min(var(--hdr-wrap, 1280px), calc(100% - (var(--pad) * 2)));
}

/* Notebooks / desktop chico: más ancho */
@media (min-width: 992px){
  :root{ --hdr-wrap: 1360px; }
}

/* Desktop grande: que NO siga creciendo, lo “clavamos” */
@media (min-width: 1280px){
  :root{ --hdr-wrap: 1320px; } /* acá fijás el tope real en grandes */
}

/* Ultra-wide: mantiene el mismo tope */
@media (min-width: 1600px){
  :root{ --hdr-wrap: 1320px; }
}



/* =========================
   Botones (tal como mock)
   ========================= */
/* =========================
   Botones (WHITE EMPHASIS · premium)
   - Blanco más brillante
   - Highlight interno + sheen
   - Halo frío muy sutil
   ========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 46px;
  min-width: 178px;
  padding: 0 22px;
  border-radius: var(--radius-btn);
  font-size: 14px;
  letter-spacing: .2px;
  user-select:none;

  position: relative;
  overflow: hidden;
  transform: translateZ(0);

  transition:
    transform .18s ease,
    box-shadow .22s ease,
    background .22s ease,
    border-color .22s ease,
    color .22s ease,
    filter .22s ease;
}

/* Sheen más visible (pero elegante) */
.btn::after{
  content:"";
  position:absolute;
  inset:-3px;
  background: linear-gradient(
    115deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.22) 22%,
    rgba(255,255,255,0) 44%
  );
  transform: translateX(-130%);
  transition: transform .65s ease;
  pointer-events:none;
}

.btn:hover::after{
  transform: translateX(130%);
}

.btn--header{
  height: 44px;
  min-width: 178px;
}

/* ===== SOLID ===== */
.btn--solid{
  background: rgba(255,255,255,.92);
  color: rgba(20,28,30,.92);
  border: 1px solid rgba(255,255,255,.26);
  box-shadow:
    0 14px 30px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.55); /* highlight superior */
}

/* ===== GHOST ===== */
.btn--ghost{
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.40);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.18);
}

/* ===== HOVER GENERAL ===== */
.btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.08);
}

/* ===== HOVER SOLID (WHITE POP) ===== */
.btn--solid:hover{
  background: #ffffff; /* blanco puro */
  color: rgba(18,26,28,.95);

  box-shadow:
    0 22px 60px rgba(0,0,0,.48),      /* profundidad */
    0 0 0 1px rgba(255,255,255,.45), /* borde limpio */
    0 0 22px rgba(187,215,214,.22);  /* halo frío MUY controlado */

  border-color: rgba(255,255,255,.65);
}

/* ===== HOVER GHOST ===== */
.btn--ghost:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.65);

  box-shadow:
    0 20px 56px rgba(0,0,0,.46),
    inset 0 1px 0 rgba(255,255,255,.28);
}

/* ===== FOCUS (premium, no agresivo) ===== */
.btn:focus-visible{
  outline: none;
  box-shadow:
    0 18px 52px rgba(0,0,0,.42),
    0 0 0 2px rgba(255,255,255,.55),
    0 0 0 6px rgba(187,215,214,.16);
}


/* =========================
   Burger + Mobile menu
   ========================= */
.burger{
  width: 46px; height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  display:none;
  align-items:center;
  justify-content:center;
  gap: 5px;
  flex-direction:column;
  cursor:pointer;
}
.burger span{
  width: 20px;
  height: 2px;
  background: rgba(255,255,255,.85);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.burger.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobileMenu{
  width: min(var(--wrap), calc(100% - (var(--pad) * 2)));
  margin: 10px auto 0;
  border-radius: 16px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  overflow:hidden;
}
.mobileMenu__nav{
  display:grid;
  gap: 8px;
  padding: 14px;
}
.mobileMenu__nav a{
  padding: 12px 10px;
  border-radius: 12px;
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}
.btn--mobile{ min-width: 100%; }

/* =========================
   Hero (full screen)
   ========================= */
.hero{
  position: relative;
  min-height: 100vh;
  padding-top: var(--hdr-h);
  display: flex;
  align-items: center;
  justify-content: center;

  /* ✅ evita cualquier overflow lateral */
  overflow: clip;
  background: #000;
  isolation: isolate;
}
@supports not (overflow: clip){
  .hero{ overflow: hidden; }
}

/* =========================
   HERO · PARTICLE WAVE (overlay)
   - NO toca .hero__bg
   - Partículas pequeñas + onda
========================= */

/* aseguramos que el overlay quede arriba del bg */
.hero{ isolation:isolate; }
.hero__bg{ z-index: 0; }

/* capa de partículas */
.hero::after{
  content:"";
  position:absolute;
  inset:-10%;
  z-index: 1;
  pointer-events:none;

  /* “polvo” (micro puntos) */
  background-image:
    radial-gradient(1.2px 1.2px at 10% 20%, rgba(255,255,255,.22) 50%, transparent 52%),
    radial-gradient(1.0px 1.0px at 22% 62%, rgba(255,255,255,.16) 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 38% 34%, rgba(255,255,255,.20) 50%, transparent 52%),
    radial-gradient(1.1px 1.1px at 56% 72%, rgba(255,255,255,.14) 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 68% 28%, rgba(255,255,255,.18) 50%, transparent 52%),
    radial-gradient(1.0px 1.0px at 82% 58%, rgba(255,255,255,.12) 50%, transparent 52%),

    radial-gradient(1.2px 1.2px at 14% 78%, rgba(120,235,220,.16) 50%, transparent 52%),
    radial-gradient(1.0px 1.0px at 44% 18%, rgba(120,235,220,.12) 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 74% 84%, rgba(120,235,220,.14) 50%, transparent 52%);

  /* repetimos patrón para llenar */
  background-size: 420px 420px;
  background-repeat: repeat;

  /* look */
  opacity: .9;
  filter: blur(.15px);
  mix-blend-mode: screen;

  /* máscara para que quede “en zona” (onda) */
  -webkit-mask-image: radial-gradient(ellipse at 55% 55%,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 45%,
    rgba(0,0,0,.55) 62%,
    rgba(0,0,0,0) 78%);
  mask-image: radial-gradient(ellipse at 55% 55%,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 45%,
    rgba(0,0,0,.55) 62%,
    rgba(0,0,0,0) 78%);

  /* animación onda */
  animation: heroParticleWave 14s ease-in-out infinite;
}

/* movimiento tipo “ola”: no es solo translate lineal */
@keyframes heroParticleWave{
  0%{
    transform: translate3d(-1.2%, -0.6%, 0) rotate(-0.6deg);
    opacity: .72;
  }
  35%{
    transform: translate3d(0.8%, -1.0%, 0) rotate(0.4deg);
    opacity: .9;
  }
  70%{
    transform: translate3d(1.4%, 0.9%, 0) rotate(0.8deg);
    opacity: .78;
  }
  100%{
    transform: translate3d(-1.2%, -0.6%, 0) rotate(-0.6deg);
    opacity: .72;
  }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero::after{ animation:none; opacity:.55; }
}


/* =========================
   Hero BG · DRIFT (visible)
   (reemplaza el anterior)
========================= */
.hero__bg{
  position: absolute;
  inset: 0;                 /* ✅ NO agranda el layout */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 32% 58%;

  opacity: .92;
  filter: contrast(1.05) saturate(1.02);

  /* ✅ drift controlado (sin romper) */
  --bg-tx: 18px;            /* amplitud X */
  --bg-ty: 14px;            /* amplitud Y */
  --bg-rot: .9deg;          /* rotación sutil */
  --bg-scale: 1.08;         /* zoom base */

  transform-origin: 32% 62%;
  transform: translate3d(0,0,0) scale(var(--bg-scale));
  will-change: transform;

  animation: heroBgDrift 16s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}

@keyframes heroBgDrift{
  0%{
    transform: translate3d(calc(var(--bg-tx) * -1), calc(var(--bg-ty) * -1), 0)
               rotate(calc(var(--bg-rot) * -1))
               scale(var(--bg-scale));
  }
  50%{
    transform: translate3d(var(--bg-tx), var(--bg-ty), 0)
               rotate(var(--bg-rot))
               scale(calc(var(--bg-scale) + .01));
  }
  100%{
    transform: translate3d(calc(var(--bg-tx) * -1), calc(var(--bg-ty) * -1), 0)
               rotate(calc(var(--bg-rot) * -1))
               scale(var(--bg-scale));
  }
}

/* Si el usuario prefiere menos movimiento */
@media (prefers-reduced-motion: reduce){
  .hero__bg{
    animation: none;
    transform: scale(1.06);
  }
}




/* Contenido centrado */
.hero__content{
  position:relative;
  z-index:2;
  width: min(980px, calc(100% - (var(--pad) * 2)));
  text-align:center;
  padding: 0px 0 96px;

}

.hero__kicker{
  margin: 0 0 14px;
  font-size: 16px;
  letter-spacing: 4.2px;
  text-transform: none;
  color: rgba(255,255,255,.70);
}

.hero__title{
  margin: 0 0 18px;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-size: clamp(40px, 4.2vw, 60px);
}

.hero__lead{
  margin: 0 auto 28px;
  max-width: 820px;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(255,255,255,.54);
}

.hero__cta{
  display:flex;
  gap: 16px;
  justify-content:center;
  align-items:center;
}

/* =========================
   HERO STATS (centrado en columna + texto alineado)
   - Cada stat queda centrado respecto a los divisores
   - El texto queda alineado a la izquierda dentro del stat
   ========================= */
.hero__stats{
  position:absolute;
  left: 50%;
  bottom: 92px;
  transform: translateX(-50%);
  z-index: 3;

  width: min(1060px, calc(100% - (var(--pad) * 2)));
  margin: 0 auto;

  display:grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr 1px 1fr;
  align-items:end;

  padding: 0 34px;
  color: rgba(255,255,255,.72);
}

/* Bloques (los 4 stats) */
.hero__stats .stat:not(.stat--divider){
  /* el bloque se centra dentro de su celda */
  justify-self: center;


  /* separa del divisor aunque el bloque sea centrado */
  padding: 0 18px;

  display:flex;
  flex-direction:column;
  gap: 0px;

  /* texto como el diseño (no centrado) */
  align-items:flex-start;
  text-align:left;
}

/* Separadores (barras) */
.hero__stats .stat--divider{
  width: 1px;
  height: 56px;
  background: rgba(255,255,255,.22);
  justify-self: center;
  align-self: end;
  margin-bottom: 2px;
}

/* Tipografía */
.stat__value{
  font-size: 35px;
  line-height: 1;
  color: rgba(255,255,255,.88);
  letter-spacing: .2px;
}

.stat__label{
  font-size: 14px;
  color: rgba(255,255,255,.60);
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 980px){
  .hero__stats{
    width: min(980px, calc(100% - (var(--pad) * 2)));
    padding: 0 18px;
  }

  .hero__stats .stat:not(.stat--divider){
    width: clamp(180px, 22vw, 230px);
    padding: 0 14px;
  }
}

@media (max-width: 720px){
  .hero__stats{
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;

    width: min(620px, calc(100% - (var(--pad) * 2)));
    margin: 26px auto 0;

    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;

    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.22);
    backdrop-filter: blur(10px);
  }

  .hero__stats .stat--divider{ display:none; }

  .hero__stats .stat:not(.stat--divider){
    width: auto;
    padding: 10px 10px;
  }
}


/* =========================
   CAPABILITIES + MARKET INTEGRATOR (Figma) — FINAL LIMPIO
   - 2 cards superiores más altas (como diseño)
   - SIN card derecha abajo (mid)
   - Mega con altura natural (no estirada)
   - Responsive: tablet (<=980) y mobile (<=720)
   ========================= */

.caps{
  background:#ffffff;
  color:#0b0b0c;
  padding: clamp(56px, 6vw, 88px) 0 clamp(44px, 5vw, 70px);
  padding-bottom: 15px;

  /* ✅ altura top como diseño */
  --caps-top-h: clamp(320px, 30vw, 460px);
}

.caps__wrap{
  width: min(1200px, calc(100% - 36px));
  margin: 0 auto;
}

/* ===== GRID FINAL ===== */
.caps__grid{
  display:grid;
  grid-template-columns: 0.78fr 1.22fr;
  grid-template-rows: var(--caps-top-h) auto; /* ✅ mega no se estira */
  gap: 16px;
}

/* ===== Base card ===== */
.capCard{
  position:relative;
  border-radius: 20px;
  overflow:hidden;
  background:#0b1220;
  box-shadow: 0 24px 70px rgba(0,0,0,.14);
  border: none;
}

.capCard__bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(1100px 520px at 28% 82%, rgba(187,215,214,.85), rgba(255,255,255,0) 58%),
    linear-gradient(135deg, rgba(24,34,53,.92), rgba(24,34,53,.72));
  filter: saturate(1.05);
  z-index:0;
}

.capCard__bg.is-teal{
  background:
    radial-gradient(820px 420px at 78% 20%, rgba(187,215,214,.75), rgba(255,255,255,0) 60%),
    linear-gradient(135deg, rgba(116,157,153,.86), rgba(24,34,53,.86));
}

.capCard__bg.is-mega{
  background:
    radial-gradient(1200px 520px at 24% 85%, rgba(187,215,214,.80), rgba(255,255,255,0) 60%),
    linear-gradient(135deg, rgba(24,34,53,.95), rgba(24,34,53,.78));
}

/* ===== Placement FINAL (sin mid) ===== */
.capCard--tall{
  grid-column: 1;
  grid-row: 1;
  min-height: var(--caps-top-h);
}

.capCard--wide{
  grid-column: 2;
  grid-row: 1;
  min-height: var(--caps-top-h);
}

.capCard--mega{
  grid-column: 1 / -1;
  grid-row: 2;
  height: auto;
  min-height: 0;
  padding-bottom: 12px;
  display:flex;
  flex-direction:column;
}

/* ===== Left tall ===== */
.capCard__title{
  position:relative;
  z-index:1;
  margin: 22px 22px 0;
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.02em;
  font-size: 40px;

  background: linear-gradient(90deg, #ffffff 0%, #BBD7D6 61%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* circle icon */
.capCard__iconBtn{
  position:absolute;
  left: 22px;
  top: 210px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.92);
  color: rgba(20,28,30,.9);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  z-index:2;
  cursor:pointer;
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
}

/* bottom area */
.capCard__bottom{
  position:absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  z-index:2;
}

/* Avatars */
.capCard__avatars{ display:flex; align-items:center; }

.ava{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28);
  overflow:hidden;
  background: #FFF;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  margin-right: -6px;
}

.ava img{
  width:100%;
  filter: saturate(1.02) contrast(1.02);
}

/* Partners button */
.capCard__partnersBtn{
  min-width: 178px;
  height: 46px;
  padding: 0 22px;
  border-radius: var(--radius-btn);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.30);
  backdrop-filter: blur(10px);
}

/* ===== Right wide card ===== */
.capCard__titleLg{
  position:relative;
  z-index:1;
  margin: 26px 26px 10px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.04;
  font-size: clamp(34px, 4.2vw, 56px);
  color: rgba(255,255,255,.92);
}

.capCard__para{
  position:relative;
  z-index:1;
  margin: 0 26px 0;
  max-width: 640px;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,.74);
}

/* CTA button */
.capCard__cta{
  position:absolute;
  right: 18px;
  bottom: 18px;
  z-index:2;
}

/* ===== Mega card ===== */
.capCard__megaHead{
  position:relative;
  z-index:1;
  padding: 18px 22px 12px;
}

.capCard__megaTitle{
  margin:0;
  font-weight: 400;
  font-size: 18px;
  color: rgba(255,255,255,.88);
}

.capCard__chips{
  position:relative;
  z-index:1;
  padding: 0 22px 10px;
  display:flex;
  gap: 14px;
  flex-wrap: nowrap;
  overflow: visible;
}

.chip{
  flex: 1 1 0;
  min-width: 210px;
  padding: 18px 0 18px 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.90);
  font-size: 14px;
  line-height: 1.25;
  display:flex;
  justify-content:space-between;
  gap: 12px;
  align-items:flex-start;
}

.capCard__megaCta{
  position: static;
  align-self: flex-end;
  margin: 10px 22px 18px auto;
}

/* =========================
   Tablet (<=980px)
   - 2 columnas (más balanceado)
   ========================= */
@media (max-width: 980px){
  .caps__grid{
    grid-template-columns: 0.92fr 1.08fr;
    grid-template-rows: var(--caps-top-h) auto;
    gap: 14px;
  }
}

/* =========================
   Mobile (<=720px)
   - stack limpio
   - chips con scroll horizontal
   ========================= */
@media (max-width: 720px){
  .caps__wrap{ width: min(1200px, calc(100% - 22px)); }

  .caps__grid{
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 12px;
  }

  .capCard--tall{ min-height: 380px; }
  .capCard--wide{ min-height: 360px; }
  .capCard--mega{ min-height: 0; }

  .capCard__title{
    font-size: clamp(30px, 8vw, 40px);
    margin: 18px 18px 0;
  }
  .capCard__iconBtn{ top: 200px; left: 18px; }

  .capCard__bottom{ left: 16px; right: 16px; bottom: 14px; }
  .capCard__partnersBtn{ min-width: 160px; height: 44px; padding: 0 18px; }

  .capCard__titleLg{ margin: 20px 18px 10px; }
  .capCard__para{ margin: 0 18px 0; font-size: 14px; line-height: 1.65; }

  .capCard__chips{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 18px 10px;
    gap: 12px;
  }
  .chip{ min-width: 220px; }

  .capCard__megaCta{ margin: 10px 18px 16px auto; }
}



/* =========================
   MARKET INTEGRATOR
   ========================= */
.market{
  margin-top: 28px;
  margin-bottom: 35px;
  background: #fff;

  /* full width real */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Header mantiene el ancho del sitio */
.market__head{
  width: min(1200px, calc(100% - 36px));
  margin: 0 auto;
  padding-top: 6px;
}

.market__kicker{
  margin: 0 0 10px;
  font-size: 12px;
  color: rgba(0,0,0,.45);
}

.market__title{
  margin: 0 0 18px;
  font-weight: 400;
  font-size: 28px;
  color: rgba(0,0,0,.78);
  display:flex;
  align-items:center;
  gap: 12px;
}

.market__bar{
  width: 2px;
  height: 30px;
  background: rgba(0,0,0,.28);
  border-radius: 99px;
}

/* =========================
   MARKET INTEGRATOR — Gallery
   Autoscroll + draggable (sin flechas)
   ========================= */
.gallery{
  --g-gap: 1px;     /* ✅ MÁS juntas */
  --g-pad: 5px;    /* ✅ menos padding lateral */
  --g-radius: 18px;

  position: relative;
  overflow: hidden;
  padding: 6px 0 8px; /* ✅ menos aire arriba/abajo */
}

.gallery__track{
  display:flex;
  gap: var(--g-gap);            /* ✅ gap mínimo real */
  overflow-x: auto;
  padding: 8px var(--g-pad) 10px; /* ✅ menos “aire” abajo */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;

  touch-action: pan-y;
}
.gallery__track::-webkit-scrollbar{ display:none; }
.gallery.is-dragging .gallery__track{ cursor: grabbing; }

.shot{
  width: 20vw;
  max-width: 360px;
  min-width: 260px;
}


.shot img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  border-radius: 15px;

  /* ✅ micro “zoom” para que se sientan pegadas visualmente */
  transform: scale(1.13);
}

/* Responsive */
@media (max-width: 1100px){
  .shot{ width: 21.5vw; }  /* 4–5 visibles */
}

@media (max-width: 900px){
  .shot{ width: 29vw; }    /* 3 visibles */
}

@media (max-width: 720px){
  .gallery{
    --g-pad: 10px;
    --g-gap: 6px;           /* ✅ un pelín más para dedo (mejor UX) */
    overflow: visible;      /* ✅ no recorta el scroll */
    padding: 6px 0 10px;
  }

  .gallery__track{
    padding: 8px var(--g-pad) 12px;

    /* ✅ scroll nativo suave */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--g-pad);
    gap: var(--g-gap);

    /* ✅ IMPORTANTÍSIMO: en mobile no “drag custom” */
    cursor: auto;
    touch-action: pan-x;    /* antes pan-y */
    -webkit-overflow-scrolling: auto; /* ✅ evita “sticky” en iOS */
  }

  .shot{
    flex: 0 0 auto;
    width: 78vw;            /* un toque más grande y estable */
    min-width: 0;           /* ✅ evita cálculos raros */
    max-width: none;
    aspect-ratio: 4 / 3;
    scroll-snap-align: start;
  }

  .shot img{
    transform: none;        /* ✅ saca GPU stutter en mobile */
    border-radius: 16px;
  }
}


@media (min-width: 1600px){
  .shot{ width: 300px; }
}

/* ✅ Fix: que el drag funcione también arriba de las imágenes */
.gallery__track,
.gallery__track *{
  -webkit-user-select: none;
  user-select: none;
}

.gallery__track img{
  -webkit-user-drag: none;
  pointer-events: none;
}

/* =========================
   MARKET/GALLERY — MOBILE FIX
   (no toca desktop)
========================= */
@media (max-width: 720px){

  /* ✅ Evita overflow lateral de layout (si tu .market usa 100vw en desktop) */
  .market{
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  /* ✅ IMPORTANTE: NO visible (visible genera overflow de página) */
  .gallery{
    overflow: hidden;
  }

  .gallery__track{
    width: 100%;
    overflow-x: auto;

    /* ✅ iOS smooth (inercia) */
    -webkit-overflow-scrolling: touch;

    /* ✅ swipe horizontal real */
    touch-action: pan-x;

    /* ✅ evita “rebote” que empuja la página */
    overscroll-behavior-x: contain;

    /* ✅ snap más suave (no mandatory) */
    scroll-snap-type: x proximity;
  }

  .shot{
    flex: 0 0 auto;
    width: 78vw;
    min-width: 78vw; /* ✅ evita que colapse */
    max-width: none;
    scroll-snap-align: start;
  }

  /* ✅ saca micro-stutter */
  .shot img{
    transform: none;
  }
}

/* =========================
   MARKET INTEGRATOR — Mobile polish + swipe hint
   (pegar AL FINAL del CSS)
========================= */
@media (max-width: 720px){

  /* 1) Evitar el full-bleed 100vw en mobile (ya lo tenías, lo dejamos) */
  .market{
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  /* 2) Gallery: que NO rompa layout y sea swipe-friendly */
  .gallery{
    position: relative;
    overflow: hidden;                 /* ✅ corta los hints sin overflow */
    padding: 8px 0 14px;              /* un poquito más de aire */
  }

  .gallery__track{
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;

    touch-action: pan-x;
    overscroll-behavior-x: contain;

    /* ✅ “se siente centrado” */
    scroll-snap-type: x proximity;
    scroll-padding-left: var(--g-pad, 10px);
    scroll-padding-right: var(--g-pad, 10px);

    /* ✅ evita “saltos” por gaps/padding */
    padding: 10px var(--g-pad, 10px) 12px;
  }

  /* 3) Cards: estabilidad + centrado visual */
  .shot{
    flex: 0 0 auto;
    width: 84vw;                      /* un poco más estable que 78vw */
    min-width: 84vw;
    max-width: 540px;
    aspect-ratio: 4 / 3;
    scroll-snap-align: center;        /* ✅ centra el item al hacer swipe */
  }

  .shot img{
    width: 100%;
    height: 100%;
    object-fit: cover;

    /* ✅ CLAVE: centrado real del recorte */
    object-position: 50% 50%;

    border-radius: 16px;
    transform: none;
    display: block;
  }

  /* 4) Swipe hint: flechas (izq/der) + fade edges */
  .gallery::before,
  .gallery::after{
    content:"";
    position:absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    pointer-events: none;
    opacity: .95;
  }

  /* Flecha izquierda */
  .gallery::before{
    left: 10px;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: rgba(11,18,32,.55);
    border: 1px solid rgba(255,255,255,.22);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* icono flecha usando mask (sin assets) */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M15.5 19.5L8 12l7.5-7.5 1.4 1.4L10.8 12l6.1 6.1z'/%3E%3C/svg%3E") center/18px 18px no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M15.5 19.5L8 12l7.5-7.5 1.4 1.4L10.8 12l6.1 6.1z'/%3E%3C/svg%3E") center/18px 18px no-repeat;
    background-color: rgba(255,255,255,.9);
  }

  /* Flecha derecha */
  .gallery::after{
    right: 10px;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: rgba(11,18,32,.55);
    border: 1px solid rgba(255,255,255,.22);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8.5 19.5L7.1 18.1 13.2 12 7.1 5.9 8.5 4.5 16 12z'/%3E%3C/svg%3E") center/18px 18px no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8.5 19.5L7.1 18.1 13.2 12 7.1 5.9 8.5 4.5 16 12z'/%3E%3C/svg%3E") center/18px 18px no-repeat;
    background-color: rgba(255,255,255,.9);
  }

  /* 5) Fade edges (para indicar scroll) */
  .gallery{
    -webkit-mask-image: linear-gradient(90deg,
      transparent 0%,
      #000 10%,
      #000 90%,
      transparent 100%);
            mask-image: linear-gradient(90deg,
      transparent 0%,
      #000 10%,
      #000 90%,
      transparent 100%);
  }

  /* 6) (Opcional) si querés que las flechas desaparezcan tras un poco de tiempo */
  .gallery::before,
  .gallery::after{
    animation: galleryHintFade 2.4s ease forwards;
    animation-delay: .8s;
  }
  @keyframes galleryHintFade{
    to{ opacity: 0; transform: translateY(-50%) scale(.98); }
  }
}

/* Reduced motion: no fades */
@media (prefers-reduced-motion: reduce){
  .gallery::before,
  .gallery::after{
    animation: none !important;
    opacity: .9;
  }
}



/* ===============================
   MOTTO + VIDEO (Light section)
   - FIX: evita “aplastado” antes de play (aspect-ratio reservado)
   - FIX: z-index modal + close siempre clickeable
   =============================== */

/* Section */
.mottoVideo{
  position: relative;
  padding: clamp(46px, 6vw, 84px) 0 clamp(34px, 4.5vw, 60px);
  background: #ffffff;
  color: #0b0b0c;
}

.mottoVideo__wrap{
  width: min(1080px, calc(100% - 36px));
  margin: 0 auto;
  text-align: center;
}

.mottoVideo__eyebrow{
  margin: 0 0 10px;
  font-size: 14px;
  letter-spacing: .10em;
  text-transform: none;
  color: rgba(11,11,12,.65);
}

.mottoVideo__title{
  margin: 0 0 10px;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-size: clamp(34px, 4.2vw, 56px);

  background: linear-gradient(90deg, #0C1013 0%, #749D99 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.mottoVideo__lead{
  margin: 0 auto;
  max-width: 760px;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.55;
  color: rgba(11,11,12,.78);
}

/* Media */
.mottoVideo__media{
  margin-top: clamp(26px, 3.5vw, 42px);
}

/* (Opcional legacy placeholder si lo seguís usando en algún lado) */
.mottoVideo__videoPlaceholder{
  width: min(920px, 100%);
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  border-radius: 18px;
  background: #d9d9d9;
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: 0 22px 55px rgba(11,14,19,.08);
}

.mottoVideo__videoPlaceholder span{
  font-size: clamp(34px, 5vw, 72px);
  letter-spacing: .12em;
  color: rgba(0,0,0,.80);
  font-weight: 400;
}

/* ===============================
   MOTTO VIDEO · Shell + Video + Play
   - ✅ Reserva altura SIEMPRE (no aplastado)
================================ */
.mottoVideo__videoShell{
  position: relative;
  width: min(920px, 100%);
  margin: 0 auto;

  /* clave */
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;

  background: #000;
  box-shadow: 0 22px 55px rgba(11,14,19,.08);
}

/* el video rellena el shell */
.mottoVideo__video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
}

/* Play overlay (glass, corporate) */
.mottoVideo__play{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width: 74px;
  height: 74px;
  border-radius: 999px;
  display:grid;
  place-items:center;

  z-index: 3; /* ✅ encima del video */

  border: 1px solid rgba(255,255,255,.35);
  background: rgba(12,16,19,.30);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow:
    0 18px 45px rgba(11,14,19,.28),
    inset 0 1px 0 rgba(255,255,255,.20);

  cursor:pointer;
  transition: transform .18s ease, filter .18s ease, background .18s ease, opacity .18s ease;
}

.mottoVideo__play svg{
  width: 28px;
  height: 28px;
  transform: translateX(1px);
  fill: #fff;
  opacity: .95;
}

.mottoVideo__play:hover{
  transform: translate(-50%,-50%) scale(1.05);
  filter: brightness(1.06);
}

/* Ocultar overlay mientras reproduce (desktop inline) */
.mottoVideo__videoShell.is-playing .mottoVideo__play{
  opacity: 0;
  pointer-events:none;
}

/* ===============================
   VIDEO MODAL · Fullscreen (Mobile open)
================================ */
.videoModal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.videoModal.is-open{ display:block; }

.videoModal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.72);
  z-index: 0;
}

.videoModal__panel{
  position:absolute;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
  z-index: 1;
}

.videoModal__frame{
  width: min(980px, 100%);
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow:hidden;
  background:#000;
  box-shadow: 0 26px 70px rgba(0,0,0,.45);
}

.videoModal__video{
  width: 100%;
  height: 100%;
  display:block;
}

.videoModal__close{
  position:absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(12,16,19,.35);
  color:#fff;
  font-size: 26px;
  line-height: 1;
  display:grid;
  place-items:center;
  cursor:pointer;

  z-index: 2; /* ✅ siempre arriba */

  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}

/* Responsive */
@media (max-width: 640px){
  .mottoVideo__wrap{ width: min(1080px, calc(100% - 28px)); }
  .mottoVideo__videoPlaceholder{ border-radius: 16px; }
  .mottoVideo__videoShell{ border-radius: 16px; }
}

/* Mobile: modal full real */
@media (max-width: 720px){
  .videoModal__panel{ padding: 0; }
  .videoModal__frame{
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
  }
  .videoModal__close{
    top: 12px;
    right: 12px;
  }
}

.mottoVideo__videoShell{
  background:
    radial-gradient(120% 90% at 50% 100%, rgba(116,157,153,.14), transparent 60%),
    #000;
}




/* ===============================
   LOGO STRIP — sin overflow (mobile safe)
=============================== */
.logoStrip{
  position: relative;
  padding: clamp(22px, 2.6vw, 34px) 0;
  background: transparent;

  /* ✅ clave: que la sección nunca empuje el body */
  overflow: hidden;
  width: 100%;
}

.logoStrip__inner{
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto;
  position: relative;

  /* ✅ evita que max-content del track genere scroll del contenedor */
  overflow: hidden;
}

/* Track marquee */
.logoStrip__track{
  display: inline-flex;          /* ✅ más predecible que flex + max-content */
  align-items: center;
  gap: clamp(26px, 3.2vw, 44px);

  /* ✅ no uses max-content en mobile; el overflow lo maneja el wrapper */
  will-change: transform;
  transform: translate3d(0,0,0);
}

/* Logo item */
.logoStrip__item{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0;

  /* ✅ evita que un item “se pase” por rounding */
  min-width: 0;
}

.logoStrip__item img{
  height: 75px;
  width: auto;
  display: block;
  opacity: 1;
  filter: none !important;

  /* ✅ previene overflow por imagen gigante accidental */
  max-width: 160px;
  height: 75px;
  object-fit: contain;
}

/* Hover ultra sutil */
.logoStrip__item:hover img{
  transform: translateZ(0) scale(1.02);
}

/* Mobile tuning */
@media (max-width: 680px){
  .logoStrip{ padding: 18px 0; }
  .logoStrip__inner{ width: min(1180px, calc(100% - 26px)); }

  .logoStrip__track{
    gap: 22px;                   /* ✅ gaps grandes = más ancho */
  }

  .logoStrip__item img{
    height: 45px;
    max-width: 120px;            /* ✅ importante para logos largos */
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .logoStrip__inner::before,
  .logoStrip__inner::after{
    display: none;
  }
}



/* =========================
   OUR SERVICES (REDESIGN)
   ========================= */
.tVision--services{
  position: relative;
  overflow: hidden;
  padding: clamp(70px, 7vw, 110px) 0 clamp(78px, 8vw, 120px);
  background: #000;
  color: rgba(255,255,255,.88);
}

/* Background */
.tVision--services .tVision__bg{
  position: absolute;
  inset: -2%;
  width: 104%;
  height: 104%;
  object-fit: cover;
  object-position: 56% 46%;
  filter: contrast(1.05) saturate(1.02);
  transform: scale(1.02);
  z-index: 0;
}
.tVision--services .tVision__overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(900px 520px at 18% 20%, rgba(80,140,140,.35), transparent 60%),
    radial-gradient(820px 560px at 82% 56%, rgba(40,180,190,.22), transparent 62%),
    linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.72));
}

/* Wrap + Head */
.tVision--services .tVision__wrap{
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto;
}
.tVision--services .tVision__head{
  text-align: center;
  max-width: 980px;
  margin: 0 auto 34px;
}
.tVision--services .tVision__kicker{
  margin: 0 0 12px;
  font-size: 15px;
  color: rgba(255,255,255,.75);
}
.tVision--services .tVision__title{
  margin: 0;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.08;
  font-size: clamp(34px, 4vw, 56px);
  background: linear-gradient(90deg,#ffffff 0%,#BBD7D6 61%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* =========================
   Card base
   ========================= */
.tVision--services .tvCard{
  position: relative;
  border-radius: 22px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(14px);
  box-shadow:
    0 26px 70px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.10);
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
}
.tVision--services .tvCard:hover{
  transform: translateY(-6px);
  background: rgba(255,255,255,.11);
  border-color: rgba(187,215,214,.38);
  box-shadow:
    0 34px 92px rgba(0,0,0,.46),
    0 0 0 8px rgba(187,215,214,.06);
}

/* =========================
   Top 2 big cards
   ========================= */
.tVision--services .tVision__top{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 26px;
}
.tVision--services .tvCard--hero{
  min-height: clamp(150px, 16vw, 210px);
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 26px 22px 22px;
}
.tVision--services .tvCard__icon--hero{
  width: 40px;
  height: 40px;
  margin: 0 0 16px;
  opacity: .92;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.25));
}
.tVision--services .tvCard__heroTitle{
  margin: 0;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.12;
  color: rgba(255,255,255,.86);
}

/* =========================
   Stacked grid (DESKTOP)
   - left: 3 filas iguales
   - right: 2 filas iguales (rellena alto total)
   ========================= */
.tVision--services .tVision__stackGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 18px;
  align-items: stretch;
}

/* IMPORTANT: que sean grids (gap funciona) */
.tVision--services .tVision__col--left{
  display:grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 18px;
  height: 100%;
}

.tVision--services .tVision__col--right{
  display:grid;
  grid-template-rows: repeat(2, 1fr);
  gap: 18px;
  height: 100%;
}

/* cards mini: estiran dentro del grid */
.tVision--services .tvCard--mini{
  min-height: 0;
  height: 100%;
  padding: 24px 26px;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.tVision--services .tvCard__h{
  margin: 0 0 12px;
  font-weight: 400;
  font-size: 22px;
  color: rgba(255,255,255,.88);
}
.tVision--services .tvCard__pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.18);
  font-size: 12px;
  color: rgba(255,255,255,.70);
  max-width: 100%;
}

/* CTA */
.tVision--services .tVision__ctaRow{
  display:flex;
  justify-content:center;
  margin-top: 22px;
}
.tVision--services .tVision__cta{ min-width: 180px; }

/* =========================
   Responsive (MOBILE ORDER)
   - primero columna izquierda completa
   - luego columna derecha completa
   ========================= */
@media (max-width: 980px){
  /* top cards a 1 columna */
  .tVision--services .tVision__top{
    grid-template-columns: 1fr;
  }

  /* stack por columnas */
  .tVision--services .tVision__stackGrid{
    display:flex;
    flex-direction: column;
    gap: 18px;
  }

  /* orden por columnas */
  .tVision--services .tVision__col--left{ order: 1; }
  .tVision--services .tVision__col--right{ order: 2; }

  /* columnas: vuelven a flex vertical interno */
  .tVision--services .tVision__col--left,
  .tVision--services .tVision__col--right{
    display:flex;
    flex-direction: column;
    gap: 18px;
    height: auto;
  }

  .tVision--services .tvCard--mini{
    height:auto;
    min-height: 120px;
  }
}

@media (max-width: 640px){
  .tVision--services .tVision__wrap{
    width: min(1180px, calc(100% - 22px));
  }
  .tVision--services .tvCard__pill{
    white-space: normal;
  }
}




/* =========================
   INSIGHTS SECTION
   ========================= */
.insights{
  background:#ffffff;
  color:#1a1a1a;
  padding: clamp(78px, 7.5vw, 120px) 0 clamp(86px, 8vw, 130px);
}

.insights__wrap{
  width: min(1200px, calc(100% - 36px));
  margin: 0 auto;
}

/* Header */
.insights__head{
  text-align:center;
  max-width: 760px;
  margin: 0 auto 64px;
}

.insights__title{
  font-weight:400;
  font-size: clamp(36px, 4vw, 54px);
  line-height:1.1;
  margin:0 0 16px;
  background: linear-gradient(
    90deg,
    #0C1013 0%,
    #749D99 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent; /* Safari */
}

.insights__title span{
  color:#6C8289;
}

.insights__lead{
  font-size:16px;
  line-height:1.7;
  color:#6a6a6a;
  margin:0 0 32px;
}

/* CTA button (mismo tamaño, estética nueva) */
.btn--insights{
  background: linear-gradient(90deg, #0b0f12 0%, #5f7f7c 100%);
  color:#fff;
  border: none;
  box-shadow: 0 14px 34px rgba(0,0,0,.18);
  position: relative;
  overflow:hidden;
}

/* Hover tech/pro */
.btn--insights:hover{
  transform: translateY(-1px);
  box-shadow:
    0 22px 52px rgba(0,0,0,.22),
    0 0 0 6px rgba(187,215,214,.18);
}

/* shimmer sutil */
.btn--insights::after{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(
    110deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.22) 40%,
    rgba(255,255,255,0) 70%
  );
  transform: translateX(-120%);
  transition: transform .55s ease;
  pointer-events:none;
}

.btn--insights:hover::after{
  transform: translateX(120%);
}

/* Grid */
.insights__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(22px, 3vw, 40px);
}

/* Card (ahora es "caja") */
.insightCard{
  position:relative;
  background:#ffffff;
  border-radius: 18px;
  overflow:hidden; /* ✅ la imagen queda EXACTA dentro */
  box-shadow: 0 18px 48px rgba(0,0,0,.08);
  border: 1px solid rgba(0,0,0,.06);
  transition: transform .22s ease, box-shadow .22s ease;
}

.insightCard:hover{
  transform: translateY(-4px);
  box-shadow: 0 26px 70px rgba(0,0,0,.12);
}

/* Date */
.insightCard__date{
  position:absolute;
  top: 16px;
  left: 16px;
  z-index:2;
  font-size:12px;
  color: rgba(255,255,255,.92);
  background: rgba(0,0,0,.36);
  border: 1px solid rgba(255,255,255,.18);
  padding: 10px 12px;
  border-radius: 15px;
  backdrop-filter: blur(10px);
}

/* Media */
.insightCard__media{
  margin:0; /* ✅ full width */
  width:100%;
}

.insightCard__media img{
  width:100%;
  height: auto;
  aspect-ratio: 4 / 3;        /* mantiene proporción parecida */
  object-fit: cover;          /* ✅ cubre bien aunque sea png */
  display:block;
  transform: scale(1.001);
  transition: transform .45s ease;
}

.insightCard:hover .insightCard__media img{
  transform: scale(1.04);
}

/* Body */
.insightCard__body{
  position:relative;
  padding: 18px 18px 20px;
}

/* Title */
.insightCard__title{
  font-size:22px;
  line-height:1.25;
  font-weight:400;
  margin: 6px 48px 10px 0;
  color:#111;
}

/* Arrow */
.insightCard__arrow{
  position:absolute;
  top: 18px;
  right: 18px;
  width:32px;
  height:32px;
  border-radius:10px;
  background:#749D99;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  transition: transform .2s ease, background .2s ease;
}

.insightCard__arrow:hover{
  transform: translateY(-2px);
  background:#333F42;
}

/* Read More (igual a Explore) */
.insightCard__btn{
  margin: 12px 0 16px;
  width: 100%;
  max-width: 260px;   /* en el diseño se ve más contenido */
}

/* Text */
.insightCard__excerpt{
  font-size:14px;
  line-height:1.7;
  color:#555;
  margin: 0 0 16px;
}

.insightCard__author{
  font-size:11px;
  color:#777;
  font-style:italic;
  margin:0;
}

/* Responsive */
@media (max-width: 980px){
  .insights__grid{ grid-template-columns: 1fr; }
  .insightCard__btn{ max-width: 300px; }
}



/* =========================
   TESTIMONIALS (Coverflow)
   Background: hero-bg.png
   ========================= */
.tstm{
  position: relative;
  padding: clamp(78px, 7.5vw, 120px) 0 clamp(86px, 8vw, 130px);
  overflow: hidden;
  background: #070a0b;
  color: rgba(255,255,255,.86);
}

.tstm__bg{
  position:absolute;
  inset:-2%;
  width:104%;
  height:104%;
  object-fit: cover;
  object-position: 32% 58%;
  filter: contrast(1.05) saturate(1.02);
  opacity: .95;
  transform: scale(1.02);
}

.tstm__overlay{
  position:absolute;
  inset:0;
  z-index:1;
}

.tstm__wrap{
  position: relative;
  z-index:2;
  width: min(var(--wrap), calc(100% - (var(--pad) * 2)));
  margin: 0 auto;
}

.tstm__head{
  text-align:center;
  max-width: 860px;
  margin: 0 auto 44px;
}

.tstm__kicker{
  margin:0 0 10px;
  font-size: 16px;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,.70);
}

.tstm__title{
  margin: 0 0 12px;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-size: clamp(36px, 4vw, 54px);
  background: linear-gradient(
    90deg,
    #ffffff 0%,
    #BBD7D6 61%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent; /* ✅ Safari/iOS */
}

.tstm__sub{
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(255,255,255,.55);
}

/* Viewport: no tocar overflow (coverflow necesita visible) */
.tstm__viewport{
  position: relative;
  height: 360px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow: visible;
}

/* Slider container sin padding artificial */
.tstm__slider{
  position: relative;
  margin-top: 42px;
}

/* Track */
.tstm__track{
  position: relative;
  width: min(1120px, 100%);
  height: 360px;
}

/* Nav arrows */
.tstm__nav{
  display: none;
}

.tstm__nav:hover{
  transform: translateY(-50%) scale(1.03);
  border-color: rgba(187,215,214,.55);
  box-shadow: 0 18px 52px rgba(0,0,0,.45), 0 0 0 6px rgba(187,215,214,.10);
}

/* ✅ flechas “afuera” del área de cards gracias al padding-inline del slider */
.tstm__nav--prev{ left: var(--navGap); }
.tstm__nav--next{ right: var(--navGap); }


/* Cards (glass + hover similar a las que ya venís usando) */
.tCard{
  position:absolute;
  top: 50%;
  left: 50%;
  width: 520px;
  max-width: calc(100% - 32px);
  height: 300px;
  transform: translate(-50%, -50%);
  border-radius: 18px;
  padding: 28px 30px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
  backdrop-filter: blur(12px);
  transition: transform .55s ease, opacity .55s ease, filter .55s ease;
  opacity: 0;
  filter: blur(0px);
  will-change: transform, opacity;
}

/* Hover igual estilo glass/pro */
.tCard:hover{
  border-color: rgba(187,215,214,.55);
  box-shadow: 0 28px 90px rgba(0,0,0,.62), 0 0 0 6px rgba(187,215,214,.10);
  transform: translate(-50%,-50%) scale(1.02);
}

/* Layout inside card */
.tCard__top{
  display:flex;
  align-items:flex-start;
  gap: 16px;
  margin-bottom: 16px;
}

.tCard__avatar{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  flex: 0 0 auto;
}

.tCard__name{
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,.92);
}

.tCard__role{
  margin:0;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255,255,255,.55);
}

.tCard__stars{
  margin-left:auto;
  font-size: 16px;
  letter-spacing: 2px;
  color: rgba(255,255,255,.82);
  opacity: .95;
}

.tCard__quote{
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(255,255,255,.58);
}

/* ===== Coverflow states (set by JS) ===== */
.tCard.is-center{
  opacity: 1;
  transform: translate(-50%,-50%) scale(1.07);
  z-index: 3;
}
.tCard.is-left{
  opacity: .70;
  transform: translate(calc(-50% - 420px), -50%) scale(.92);
  z-index: 2;
}
.tCard.is-right{
  opacity: .70;
  transform: translate(calc(-50% + 420px), -50%) scale(.92);
  z-index: 2;
}
.tCard.is-far{
  opacity: 0;
  transform: translate(-50%,-50%) scale(.85);
  z-index: 1;
  pointer-events:none;
}

/* Responsive */
@media (max-width: 980px){
  .tstm__viewport{ height: 380px; }
  .tstm__track{ height: 380px; }
  .tCard{ width: 560px; height: 320px; }

  .tCard.is-left{ transform: translate(calc(-50% - 320px), -50%) scale(.92); }
  .tCard.is-right{ transform: translate(calc(-50% + 320px), -50%) scale(.92); }
}

@media (max-width: 720px){
  .tstm__nav{ display:none; }
  .tstm__viewport{ height: 380px; }
  .tCard{ width: calc(100% - 24px); height: auto; min-height: 280px; padding: 22px; }
  .tCard.is-left,
  .tCard.is-right{
    opacity: 0;
    pointer-events:none;
  }
  .tCard.is-center{
    transform: translate(-50%,-50%) scale(1);
  }
}

/* =========================
   TESTIMONIALS · NAV ON HOVER
========================= */

/* Slider container sin padding artificial */
.tstm__slider{
  position: relative;
  margin-top: 42px;

  /* ✅ espacio lateral para que las flechas queden “afuera” */
  --navGap: -72px;   /* antes -14px */
  --navSize: 44px;    /* tamaño del botón */
}

/* Nav arrows (antes: display:none) */
.tstm__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  width: var(--navSize);
  height: var(--navSize);
  border-radius: 14px;

  display: grid;
  place-items: center;

  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.90);

  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);

  box-shadow: 0 18px 52px rgba(0,0,0,.45);
  cursor: pointer;

  /* ✅ estado oculto por defecto */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity .20s ease,
    transform .20s ease,
    border-color .20s ease,
    background .20s ease,
    box-shadow .20s ease;
}

/* Posicion afuera del track */
.tstm__nav--prev{ left: var(--navGap); }
.tstm__nav--next{ right: var(--navGap); }

/* Hover */
.tstm__nav:hover{
  transform: translateY(-50%) translateY(-1px);
  border-color: rgba(187,215,214,.55);
  background: rgba(255,255,255,.14);
  box-shadow:
    0 22px 60px rgba(0,0,0,.55),
    0 0 0 6px rgba(187,215,214,.10);
}

/* ✅ Mostrar flechas cuando el usuario “descubre” la zona */
@media (hover:hover) and (pointer:fine){
  .tstm__slider:hover .tstm__nav,
  .tstm__track:hover + .tstm__nav,
  .tstm__viewport:hover ~ .tstm__nav{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Alternativa robusta (la que funciona seguro por estructura): */
  .tstm__slider:hover .tstm__nav{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/* Mobile: no flechas */
@media (max-width: 720px){
  .tstm__nav{ display:none; }
}



/* =========================
   WEBINARS (Home - última sección)
   - Sin flechas (drag + click)
   - Más separación entre cards (variable --wfShift)
   ========================= */

.webinars{
  background:#fff;
  color:#111;
  padding: clamp(72px, 8vw, 120px) 0;
  overflow:hidden;
}

.webinars__wrap{
  width: min(1200px, calc(100% - 36px));
  margin: 0 auto;
}

.webinars__head{
  text-align:center;
  max-width: 860px;
  margin: 0 auto 44px;
}

/* H2 más parecido al mock: liviano, grande, tracking suave */
.webinars__title{
  margin: 0 0 22px;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-size: clamp(34px, 4.1vw, 56px);
  color:#0c0f10;
  background: linear-gradient(
    90deg,
    #0C1013 0%,
    #749D99 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent; /* Safari */
}

.webinars__title span{
  color: #6C8289; /* teal/gris del diseño */
}

.webinars__cta{
  display:inline-flex;
}

/* Botón estilo “Explore …” (mantiene tamaño global .btn) */
.btn--insights{
  background: linear-gradient(90deg, #0b0f12 0%, #7ea8a3 100%);
  color:#fff;
  border: none;
  box-shadow: 0 14px 34px rgba(0,0,0,.18);
}
.btn--insights:hover{
  transform: translateY(-1px);
  box-shadow:
    0 22px 48px rgba(0,0,0,.22),
    0 0 0 6px rgba(187,215,214,.22);
}

/* ========== Coverflow wrapper ========== */
.webinarsFlow{
  position:relative;
  margin-top: 34px;
}

/* ✅ NO flechas (las ocultamos por completo) */
.webinarsFlow__nav{
  display:none !important;
}

/* stage */
.webinarsFlow__stage{
  position: relative;
  height: 380px;

  /* UX drag */
  user-select: none;
  cursor: grab;
}
.webinarsFlow.is-dragging .webinarsFlow__stage{
  cursor: grabbing;
}

/* ========== Cards ========== */
.webinarCard{
  position:absolute;
  top: 50%;
  left: 50%;

  width: min(640px, 88vw);
  height: 330px;

  border-radius: 18px;
  overflow:hidden;

  /* Fondo: hero recortado arriba */
  background-image: url("../assets/img/hero-bg.png");
  background-repeat: no-repeat;
  background-size: 175%;
  background-position: var(--bgx, 52%) var(--bgy, 8%);

  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 26px 70px rgba(0,0,0,.22);
  isolation:isolate;

  transition:
    transform .55s cubic-bezier(.2,.9,.2,1),
    filter .55s cubic-bezier(.2,.9,.2,1),
    opacity .55s cubic-bezier(.2,.9,.2,1),
    box-shadow .25s ease,
    border-color .25s ease;

  /* ✅ para click lateral */
  cursor: pointer;
  pointer-events:auto;
}

/* Overlay para legibilidad como en el mock */
.webinarCard::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(900px 420px at 50% 40%,
    rgba(0,0,0,.18) 0%,
    rgba(0,0,0,.58) 68%,
    rgba(0,0,0,.68) 100%);
  z-index:0;
}

/* Glass edge suave */
.webinarCard::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  z-index: 1;
  pointer-events:none;
}

/* Logo top-right (como diseño) */
.webinarCard__logo{
  position:absolute;
  top: 18px;
  right: 18px;
  width: 150px;
  opacity: .9;
  z-index: 3;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.35));
}

/* Contenido */
.webinarCard__inner{
  position:relative;
  z-index:2;
  height:100%;
  padding: 44px 44px 34px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  color: rgba(255,255,255,.90);
}

/* Meta arriba (más chico, tracking, como diseño) */
.webinarCard__metaBlock{
  margin-top: 18px;
}
.webinarCard__meta{
  margin:0;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
}
.webinarCard__meta-2{
  margin:0;
  font-size: 18px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: white;
}

/* Título grande */
.webinarCard__title{
  margin: 22px 0 0;
  font-weight: 400;
  font-size: clamp(22px, 2.35vw, 36px);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,.92);
}

/* Subrayado fino “AtmosDot;” */
.webinarCard__u{
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* =========================
   COVERFLOW STATES
   ✅ Más separación: variable
   ========================= */
.webinarsFlow{
  --wfShift: 620px; /* ✅ AUMENTÁ esto para más separación (ej: 660/700) */
  --wfScaleSide: .88;
}

.webinarCard.is-active{
  transform: translate(-50%, -50%) scale(1);
  opacity:1;
  filter: saturate(1.02) contrast(1.03);
  z-index:3;
  cursor: default;
  cursor: pointer;
}

.webinarCard.is-left{
  transform: translate(calc(-50% - var(--wfShift)), -50%) scale(var(--wfScaleSide));
  opacity:.92;
  filter: saturate(.95) contrast(.98);
  z-index:2;
  pointer-events: auto;
}

.webinarCard.is-right{
  transform: translate(calc(-50% + var(--wfShift)), -50%) scale(var(--wfScaleSide));
  opacity:.92;
  filter: saturate(.95) contrast(.98);
  z-index:2;
  pointer-events: auto;
}

/* Hover */
.webinarCard:hover{
  box-shadow:
    0 34px 90px rgba(0,0,0,.30),
    0 0 0 8px rgba(187,215,214,.12);
  border-color: rgba(187,215,214,.28);
}

.webinarCard.is-active:hover{
  transform: translate(-50%, -50%) scale(1.01);
}
.webinarCard.is-left:hover{
  transform: translate(calc(-50% - var(--wfShift)), -50%) scale(calc(var(--wfScaleSide) + .02));
}
.webinarCard.is-right:hover{
  transform: translate(calc(-50% + var(--wfShift)), -50%) scale(calc(var(--wfScaleSide) + .02));
}

/* Responsive */
@media (max-width: 980px){
  .webinarsFlow__stage{ height: 360px; }
  .webinarCard{ height: 310px; width: min(620px, 92vw); }

  .webinarsFlow{ --wfShift: 460px; }
}

@media (max-width: 720px){
  .webinarsFlow__stage{ height: 330px; }

  /* Mobile: solo card activa */
  .webinarCard.is-left,
  .webinarCard.is-right{
    opacity:0;
    pointer-events:none;
    transform: translate(-50%, -50%) scale(.92);
  }

  .webinarCard__inner{
    padding: 34px 28px 28px;
  }
}


/* =========================
   CTA FINAL — PLANETA TAMAÑO CORRECTO
   ========================= */

.ctaFinal{
  position: relative;
  overflow: hidden;
  background: #050707;
  color: rgba(255,255,255,.88);
}

/* ======================
   PLANETA (más chico + más abajo)
   ====================== */
.ctaFinal__bg{
  position:absolute;
  left:50%;
  top:70%;                 /* ✅ más abajo (antes 58%) */
  transform: translate(-50%,-50%);
  width: 85%;              /* ✅ más chico (antes 120%) */
  height: 85%;
  max-width: 1200px;       /* ✅ evita que explote en pantallas grandes */
  max-height: 1200px;

  object-fit: cover;
  object-position: center;
  z-index:0;
  pointer-events:none;

  filter: contrast(1.06) saturate(1.08);
}


/* ======================
   MÁSCARA CONTROLADA
   ====================== */
.ctaFinal::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(to bottom,
      #050707 0%,
      rgba(5,7,7,.96) 26%,
      rgba(5,7,7,.55) 48%,
      rgba(5,7,7,.45) 58%,
      rgba(5,7,7,.75) 78%,
      #050707 100%);
}

/* ======================
   LAYOUT
   ====================== */
.ctaFinal__inner{
  position:relative;
  z-index:2;
  width: min(var(--wrap), calc(100% - (var(--pad) * 2)));
  margin: 0 auto;

  display:grid;
  grid-template-rows:
    auto
    1fr
    auto;

  min-height: clamp(600px, 80vh, 740px);
  padding: clamp(76px, 10vh, 120px) 0 28px;

  text-align:center;
}

/* ======================
   TOP — NEGRO LIMPIO
   ====================== */
.ctaFinal__top{
  align-self: start;
  margin-bottom: clamp(24px, 4vh, 40px); /* ✅ menos separación */
  transform: translateY(-28px);          /* ✅ sube el texto */
}


.ctaFinal__pill{
  display:inline-flex;
  padding: 10px 18px;
  border-radius: 15px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.38);
  backdrop-filter: blur(10px);
  font-size: 13px;
  color: rgba(255,255,255,.9);
  margin-bottom: 20px;
}

.ctaFinal__title{
  margin:0;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.08;
  font-size: clamp(44px, 4.2vw, 45px);
  max-width: 980px;
  margin-inline:auto;
  text-shadow: 0 18px 60px rgba(0,0,0,.65);
}

.ctaFinal__line{ display:block; }
.ctaFinal__line.is-dim{
  color: rgba(187,215,214,.8);
}

/* ======================
   BOTTOM — OK
   ====================== */
.ctaFinal__bottom{
  align-self:end;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 16px;
}

.ctaFinal__btn{
  min-width: 230px;
  height: 46px;
}

.ctaFinal__lead{
  margin:0;
  max-width: 920px;
  font-size: 14px;
  line-height: 1.8;
  color: rgba(255,255,255,.78);
  text-shadow: 0 18px 60px rgba(0,0,0,.65);
}

/* ======================
   MOBILE
   ====================== */
@media (max-width: 720px){
  .ctaFinal__top{
    transform: translateY(-16px);
  }

  .ctaFinal__bg{
    width: 80%;
    height: 80%;
    top: 60%;
  }

  .ctaFinal__inner{
    min-height: clamp(540px, 76vh, 680px);
    padding: 60px 0 22px;
  }

  .ctaFinal__title{
    font-size: clamp(36px, 7.6vw, 52px);
  }

  .ctaFinal__lead{
    font-size: 13px;
  }
}


/* =========================
   CTA FINAL — Halo circular con pulso (FINAL)
   ========================= */
.ctaFinal::after{
  content:"";
  position:absolute;
  left:50%;
  top:58%;
  transform: translate(-50%,-50%) scale(1);
  z-index: 2;
  pointer-events:none;

  /* ⭕ círculo perfecto */
  width: 600px;
  height: 450px;
  border-radius: 50%;

  background:
    radial-gradient(circle at center,
      rgba(140, 210, 245, .55) 0%,
      rgba(120, 200, 240, .38) 32%,
      rgba(90, 180, 230, .22) 48%,
      rgba(60, 150, 210, .14) 60%,
      rgba(60, 150, 210, 0) 78%),
    radial-gradient(circle at center,
      rgba(120, 235, 220, .22) 0%,
      rgba(110, 220, 210, .14) 36%,
      rgba(110, 220, 210, 0) 70%);

  mix-blend-mode: screen;

  /* brillo controlado */
  opacity: .7;
  filter: blur(13px) brightness(.95);

  will-change: transform, opacity;
  animation: haloPulse 6.5s ease-in-out infinite;
}

/* Pulso elegante (no invasivo) */
@keyframes haloPulse{
  0%,100%{
    transform: translate(-50%,-50%) scale(1);
    opacity: .62;
  }
  50%{
    transform: translate(-50%,-50%) scale(1.08);
    opacity: .78;
  }
}

/* Mobile */
@media (max-width: 720px){
  .ctaFinal::after{
    width: 520px;
    height: 520px;
    filter: blur(11px) brightness(.95);
    opacity: .6;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .ctaFinal::after{
    animation: none;
  }
}



/* =========================
   CTA FINAL — Starfield orbital (localizado)
   ========================= */
.ctaFinal__stars{
  position:absolute;
  left:50%;
  top:58%;
  transform: translate(-50%,-50%);
  z-index: 2;
  pointer-events:none;

  width: 760px;     /* ⬅️ área controlada */
  height: 520px;
  overflow: hidden;

  mask-image: radial-gradient(circle at center,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 48%,
    rgba(0,0,0,.75) 62%,
    rgba(0,0,0,.25) 72%,
    rgba(0,0,0,0) 82%);
}


/* Estrellas cercanas */
.ctaFinal__stars::before{
  content:"";
  position:absolute;
  inset:0;

  background-image:
    radial-gradient(2px 2px at 28% 42%, rgba(255,255,255,.9) 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 62% 36%, rgba(255,255,255,.75) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 48% 64%, rgba(255,255,255,.7) 50%, transparent 51%);

  background-size: 220px 220px;
  animation: starsOrbitFast 150s linear infinite;
  opacity: .85;
}

/* Estrellas lejanas */
.ctaFinal__stars::after{
  content:"";
  position:absolute;
  inset:0;

  background-image:
    radial-gradient(1.2px 1.2px at 34% 58%, rgba(255,255,255,.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 68% 52%, rgba(255,255,255,.35) 50%, transparent 51%);

  background-size: 320px 320px;
  animation: starsOrbitSlow 380s linear infinite;
  opacity: .55;
}

@keyframes starsOrbitFast{
  from{ transform: rotate(0deg) translateX(0); }
  to{ transform: rotate(360deg) translateX(0); }
}

@keyframes starsOrbitSlow{
  from{ transform: rotate(0deg) translateX(0); }
  to{ transform: rotate(-360deg) translateX(0); }
}

@media (max-width: 720px){
  .ctaFinal__stars{
    width: 520px;
    height: 380px;
  }

  .ctaFinal__stars::before{ opacity:.6; }
  .ctaFinal__stars::after{ opacity:.4; }
}




/* =========================
   FOOTER REAL
   ========================= */
.siteFooter{
  background:#050707;
  color: rgba(255,255,255,.82);
  padding: 48px 0 32px;
}

.siteFooter__inner{
  width: min(var(--wrap), calc(100% - (var(--pad) * 2)));
  margin: 0 auto;
}

.siteFooter__brand{
  display:flex;
  justify-content:center;
  margin-bottom:22px;
}
.siteFooter__brand img{
  height:36px;
}

.siteFooter__navRow{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  margin-bottom:26px;
}

.siteFooter__nav{
  display:flex;
  gap:22px;
  font-size:14px;
}
.siteFooter__nav a{
  color: rgba(255,255,255,.78);
}
.siteFooter__nav a:hover{
  color:#fff;
}

.siteFooter__contactBtn{
  position:absolute;
  right:0;
  height:44px;
  min-width:180px;
}

.siteFooter__bottom{
  padding-top:18px;
  padding-bottom:18px;
  border-top:1px solid rgba(255,255,255,.18);
  border-bottom: 1px solid rgba(255,255,255,.18);;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  font-size:13px;
}

.siteFooter__meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.siteFooter__social{
  display:flex;
  gap:12px;
  align-items:center;
}

/* Bottom */
.siteFooter__bottom{
  padding-top: 18px; /* ✅ como pediste */
  border-top: 1px solid rgba(255,255,255,.18);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
}

/* Social */
.siteFooter__social{
  display:flex;
  align-items:center;
  gap: 14px;
}

.siteFooter__socialLabel{
  font-size: 13px;       /* ✅ grande como captura */
  font-weight: 400;
  letter-spacing: .01em;
  color: rgba(255,255,255,.92);
  margin-right: 8px;
}

/* Icon buttons */
.siteFooter__icon{
  width: 25px;
  height: 25px;
  border-radius: 2px;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.92); /* ✅ blanco como captura */
  color: #0b0f12;

  box-shadow: 0 14px 34px rgba(0,0,0,.28);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.siteFooter__icon:hover{
  transform: translateY(-1px);
  background: #fff;
  box-shadow: 0 18px 44px rgba(0,0,0,.34);
}



/* =========================================================
   MOBILE FIX PACK — BIG Consulting (reemplaza fixes previos)
   - NO toca desktop (solo @media)
   - Menu mobile centrado (modal) + overlay
   - Hero: stats abajo (no rompen)
   - Caps: botones no tapan, layout correcto
   - Core capabilities: chips ordenados en mobile
   - Footer: CTA no tapa, centrado
   ========================================================= */

@media (max-width: 820px){

  /* -------------------------
     HEADER (burger a la derecha)
     ------------------------- */
  .navLeft{ display:none; }

  .burger{ display:flex; }

  .siteHeader__inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 14px;
  }

  .brand{
    justify-content:flex-start;
    padding: 8px 0;
  }

  .navRight{
    width:auto;
    justify-content:flex-end;
    gap: 10px;
  }

  .btn--header{ display:none; } /* opcional: ocultar Contact del header en mobile */
}


/* -------------------------
   MOBILE MENU — modal centrado + overlay
   ------------------------- */
@media (max-width: 820px){

  /* Overlay que oscurece toda la pantalla */
  .mobileMenu{
    position: fixed;
    inset: 0;
    width: auto;
    margin: 0;
    border-radius: 0;
    background: rgba(0,0,0,.55);
    border: 0;
    backdrop-filter: blur(10px);
    display: none;             /* controlado por clase .is-open */
    align-items: center;
    justify-content: center;
    padding: 22px;
    z-index: 60;
  }

  .mobileMenu.is-open{ display:flex; }

  /* Panel centrado */
  .mobileMenu__nav{
    width: min(420px, 92vw);
    background: rgba(10,12,14,.78);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 18px;
    padding: 16px;
    gap: 10px;
    box-shadow: 0 30px 90px rgba(0,0,0,.55);
  }

  .mobileMenu__nav a{
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    color: rgba(255,255,255,.86);
    padding: 12px 12px;
    border-radius: 14px;
    text-align:center;
  }

  .btn--mobile{
    min-width: 100%;
  }
}


/* -------------------------
   HERO — stats abajo (NO absoluto)
   ------------------------- */
@media (max-width: 820px){

  .hero{
    min-height: auto; /* evita que el bloque “se rompa” */
    padding-top: var(--hdr-h);
    padding-bottom: 45px;
    align-items:flex-start;
  }

  .hero__content{
    padding: 26px 0 18px;
  }

  /* stats: sacarlos del overlay */
  .hero__stats{
    display: none;
  }


  .stat__value{ font-size: 20px; }
  .stat__label{ font-size: 13px; }
}


/* -------------------------
   CAPS — evitar botones encima / ajustar alturas
   ------------------------- */
@media (max-width: 980px){

  .caps__wrap{
    width: min(1200px, calc(100% - 28px));
  }

  .caps__grid{
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .capCard{
    min-height: 260px;
  }

  /* TALL (GEO & Market…) */
  .capCard--tall{
    min-height: 240px;
    padding-bottom: 88px; /* reserva para zona de botones/avatars */
  }

  .capCard__title{
    font-size: clamp(34px, 9vw, 44px);
    margin: 18px 18px 0;
  }

  /* mover el iconBtn para que no tape el título */
  .capCard__iconBtn{
    left: 18px;
    top: auto;
    bottom: 18px;
  }

  .capCard__bottom{
    left: 18px;
    right: 18px;
    bottom: 18px;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .capCard__avatars{
    order: 1;
    justify-content:end;
    width: 100%;
  }

  .capCard__partnersBtn{
    order: 2;
    width: 100%;
    min-width: 100%;
    justify-content:center;
  }

  /* WIDE (About Us texto) — botón no debe tapar */
  .capCard--wide{
    min-height: 320px;
    display:flex;
    flex-direction:column;
  }

  .capCard__para{
    margin: 18px 18px 0;
    max-width: none;
    padding-right: 0;
  }

  .capCard__cta{
    position: static;
    margin: 16px 18px 18px;
    width: calc(100% - 36px);
    align-self: center;
  }

  /* MID (título + texto) */
  .capCard__titleSm{
    margin: 18px 18px 10px;
  }
  .capCard__paraSm{
    margin: 0 18px 18px;
  }

  /* MEGA (Our core capabilities) */
  .capCard--mega{
    min-height: auto;
    padding-bottom: 22px;
  }

  .capCard__chips{
    padding: 0 18px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    overflow: visible;
    flex-wrap: initial;
  }

  .chip{
    min-width: 0;
    width: 100%;
    font-size: 13px;
    padding: 14px 14px;
    border-radius: 16px;
  }

  .capCard__megaCta{
    position: static;
    margin: 14px 18px 18px;
    width: calc(100% - 36px);
  }
}


/* -------------------------
   FOOTER — Contact Us no tapa / centrado
   ------------------------- */
@media (max-width: 980px){

  .siteFooter__navRow{
    display:flex;
    flex-direction:column;
    gap: 14px;
    align-items:center;
    justify-content:center;
    margin-bottom: 18px;
  }

  .siteFooter__nav{
    flex-wrap: wrap;
    justify-content:center;
    gap: 14px 16px;
    text-align:center;
  }

  /* el botón deja de ser absolute */
  .siteFooter__contactBtn{
    position: static !important;
    right: auto !important;
    min-width: 230px;
    height: 46px;
  }

  .siteFooter__bottom{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap: 14px;
  }

  .siteFooter__meta{
    justify-content:center;
  }

  .siteFooter__social{
    justify-content:center;
  }
}

@media (max-width: 980px){
  .siteFooter__bottom{
    flex-direction: column;
    align-items: center;
  }
  .siteFooter__social{
    align-self: center;
  }
}


/* ===== MOBILE MENU (FORCE) ===== */
@media (max-width: 820px){
  .mobileMenu{
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;                 /* cerrado */
    align-items: center;
    justify-content: center;
    padding: 22px;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(10px);
  }

  /* IMPORTANTE: si el div tiene atributo hidden, el browser fuerza display:none.
     Por eso, cuando abrimos, lo removemos desde JS. Igual dejamos esto por seguridad. */
  .mobileMenu[hidden]{ display:none !important; }

  .mobileMenu.is-open{
    display: flex !important;      /* abierto */
  }

  .mobileMenu__nav{
    width: min(420px, 92vw);
    background: rgba(10,12,14,.78);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 18px;
    padding: 16px;
    display: grid;
    gap: 10px;
    box-shadow: 0 30px 90px rgba(0,0,0,.55);
  }

  .mobileMenu__nav a{
    padding: 12px 12px;
    border-radius: 14px;
    text-align:center;
  }
}

/* =========================================================
   TABLET FIX PACK — BIG Consulting (HOME)
   Target: iPad / tablets
   - evita que los @media 980px se comporten como “mobile”
   - mantiene estética desktop, pero más compacta
========================================================= */

/* -------------------------
   TABLET (general)
   768–1180: iPad portrait/landscape + tablets grandes
------------------------- */
@media (min-width: 768px) and (max-width: 1180px){

  /* ====== Layout paddings ====== */
  :root{
    --pad: 16px; /* un toque menos aire */
  }

  /* -------------------------
     HEADER (tablet = nav visible pero compacta)
     - NO usar burger salvo tablet chica
  ------------------------- */
  .siteHeader__inner{
    width: min(1040px, calc(100% - (var(--pad) * 2)));
    gap: 14px;
  }

  .navLeft{
    gap: 16px;
  }

  .navLeft__link{
    font-size: 13px;
    padding: 8px 0;
  }

  .brand__logo{
    height: 38px;
  }

  .btn--header{
    min-width: 160px;
    height: 42px;
    padding: 0 18px;
    font-size: 13px;
  }

  /* Burger OFF en tablet grande (lo prendemos en tablet chica abajo) */
  .burger{ display: none; }
  .mobileMenu{ display: none !important; }

  /* -------------------------
     HERO (tablet)
     - tipografías un poco más controladas
     - stats en 2x2 (tipo tu modo 720, pero tablet)
  ------------------------- */
  .hero{
    padding-top: var(--hdr-h);
    min-height: 92vh;  /* tablet suele “comer” viewport con barras */
  }

  .hero__content{
    width: min(880px, calc(100% - (var(--pad) * 2)));
    padding: 0 0 64px;
  }

  .hero__title{
    font-size: clamp(34px, 4vw, 52px);
  }

  .hero__lead{
    font-size: 14px;
    line-height: 1.75;
    max-width: 720px;
  }

  /* Stats: forzamos layout tablet (2x2) */
  .hero__stats{
    display: none;
  }

  .hero__stats .stat--divider{ display:none; }

  .hero__stats .stat:not(.stat--divider){
    width: auto;
    padding: 10px 10px;
    justify-self: stretch;
    align-items: flex-start;
  }

  .stat__value{ font-size: 26px; }
  .stat__label{ font-size: 13px; }

  /* -------------------------
     MOTTO
  ------------------------- */
  .mottoVideo__wrap{
    width: min(980px, calc(100% - 36px));
  }

  .mottoVideo__title{
    font-size: clamp(32px, 3.8vw, 48px);
  }

  /* -------------------------
     CAPS (tablet)
     - mantenemos 2 columnas
     - ajustamos posiciones que en iPad pueden taparse
  ------------------------- */
  .caps__wrap{
    width: min(1040px, calc(100% - 32px));
  }

  .caps__grid{
    grid-template-columns: 0.95fr 1.05fr;
    gap: 14px;
  }

  /* Tall */
  .capCard__title{
    font-size: 36px;
    margin: 20px 20px 0;
  }

  .capCard__iconBtn{
    left: 18px;
    top: 190px; /* un toque más arriba en tablet */
  }

  .capCard__bottom{
    left: 16px;
    right: 16px;
    bottom: 14px;
  }

  .ava{
    width: 34px;
    height: 34px;
  }

  /* Wide */
  .capCard__titleLg{
    margin: 22px 22px 10px;
    font-size: clamp(30px, 3.8vw, 44px);
  }

  .capCard__para{
    margin: 0 22px 0;
    max-width: none;
    font-size: 14px;
    line-height: 1.65;
  }

  .capCard__cta{
    right: 16px;
    bottom: 16px;
  }

  /* Mega chips: en tablet a veces no entran → scroll suave */
  .capCard__chips{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 18px 10px;
  }
  .capCard__chips::-webkit-scrollbar{ display:none; }
  .chip{
    min-width: 240px;
  }

  /* -------------------------
     MARKET gallery (tablet)
  ------------------------- */
  .market__head{
    width: min(1040px, calc(100% - 32px));
  }

  .shot{
    width: 26vw;
    min-width: 240px;
    max-width: 340px;
  }

  /* -------------------------
     OUR SERVICES (tVision)
     - en tablet mantenemos 2 cols, solo compactamos
  ------------------------- */
  .tVision--services .tVision__wrap{
    width: min(1040px, calc(100% - 32px));
  }

  .tVision--services .tVision__top{
    gap: 18px;
  }

  .tVision--services .tvCard--hero{
    padding: 22px 18px 18px;
    min-height: clamp(140px, 15vw, 190px);
  }

  .tVision--services .tVision__stackGrid{
    gap: 18px;
  }

  .tVision--services .tVision__col--left,
  .tVision--services .tVision__col--right{
    gap: 16px;
  }

  .tVision--services .tvCard--mini{
    padding: 22px 18px;
  }

  .tVision--services .tvCard__h{
    font-size: 20px;
  }

  /* -------------------------
     INSIGHTS (tablet = 2 columnas)
     - pisa tu @media 980px que lo baja a 1
  ------------------------- */
  .insights__wrap{
    width: min(1040px, calc(100% - 32px));
  }

  .insights__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }

  .insightCard__title{
    font-size: 20px;
  }

  /* -------------------------
     TESTIMONIALS (tablet)
     - reduce “shift” para que no corte
  ------------------------- */
  .tstm__track{
    width: min(920px, 100%);
  }

  .tCard{
    width: 520px;
    height: 310px;
  }

  .tCard.is-left{ transform: translate(calc(-50% - 290px), -50%) scale(.92); }
  .tCard.is-right{ transform: translate(calc(-50% + 290px), -50%) scale(.92); }

  /* -------------------------
     WEBINARS (tablet)
     - reduce shift y tamaños
  ------------------------- */
  .webinars__wrap{
    width: min(1040px, calc(100% - 32px));
  }

  .webinarsFlow{
    --wfShift: 430px;
    --wfScaleSide: .90;
  }

  .webinarCard{
    width: min(600px, 82vw);
    height: 310px;
  }

  .webinarCard__inner{
    padding: 40px 34px 30px;
  }

  /* -------------------------
     CTA FINAL (tablet)
  ------------------------- */
  .ctaFinal__inner{
    width: min(1040px, calc(100% - 32px));
    min-height: clamp(560px, 72vh, 700px);
  }

  .ctaFinal__bg{
    width: 92%;
    height: 92%;
    top: 68%;
  }

  /* -------------------------
     FOOTER (tablet)
     - no absolute button, layout más limpio
  ------------------------- */
  .siteFooter__inner{
    width: min(1040px, calc(100% - 32px));
  }

  .siteFooter__contactBtn{
    position: static !important;
    min-width: 220px;
    height: 46px;
    margin-left: 16px;
  }

  .siteFooter__navRow{
    justify-content: space-between;
    align-items: center;
  }
}

/* -------------------------
   TABLET SMALL (portrait iPad / 768–900)
   - acá sí conviene burger + menu
------------------------- */
@media (min-width: 768px) and (max-width: 900px){

  /* Header pasa a burger para no apretar nav */
  .navLeft{ display:none; }
  .burger{ display:flex; }

  .siteHeader__inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
    width: min(920px, calc(100% - (var(--pad) * 2)));
  }

  .btn--header{ display:none; }

  /* Mobile menu modal (reusa tu comportamiento) */
  .mobileMenu{
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 22px;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(10px);
  }

  .mobileMenu[hidden]{ display:none !important; }
  .mobileMenu.is-open{ display:flex !important; }

  .mobileMenu__nav{
    width: min(420px, 92vw);
    background: rgba(10,12,14,.78);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 18px;
    padding: 16px;
    display: grid;
    gap: 10px;
    box-shadow: 0 30px 90px rgba(0,0,0,.55);
  }

  .mobileMenu__nav a{
    padding: 12px 12px;
    border-radius: 14px;
    text-align:center;
  }

  /* Caps en tablet chica: stack (evita colisiones) */
  .caps__grid{
    display:flex;
    flex-direction:column;
    gap: 14px;
  }

  /* Insights: 1 columna en tablet chica (más cómodo) */
  .insights__grid{
    grid-template-columns: 1fr;
  }
}

/* -------------------------
   iPad landscape específico (opcional)
   - mejora el hero bg + spacing
------------------------- */
@media (min-width: 1024px) and (max-width: 1180px) and (orientation: landscape){
  .hero__bg{
    object-position: 34% 58%;
    --bg-tx: 14px;
    --bg-ty: 10px;
    --bg-scale: 1.07;
  }
}



/* ====================================================================================================
   SERVICES PAGE
   ==================================================================================================== */
.servicesPage{
  padding-top: var(--hdr-h);
  background:#070a0b;
}

/* =========================
   SERVICES HERO (FULL VIEWPORT)
   ========================= */
.servicesPage{ padding-top: 0; } /* importante: hero ocupa viewport, header ya es fixed */

/* =========================
   SERVICES HERO — FIX full-bleed (evita corte derecho)
   ========================= */

.servicesHero{
  position: relative;

  /* ✅ fuerza ancho de viewport aunque esté dentro de un wrapper */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  min-height: 100svh;
  height: 100vh;
  overflow: hidden;

  color: rgba(255,255,255,.88);
  display: grid;
  align-items: center;
  padding-top: var(--hdr-h);
}

/* BG */
.servicesHero__bg{
  position: absolute;
  left: 50%;
  top: 50%;

  /* ✅ cubre siempre sin depender del ancho del contenedor */
  width: 110vw;
  height: 110vh;
  transform: translate(-50%, -50%);

  object-fit: cover;
  object-position: 60% 45%;
  z-index: 0;
  pointer-events: none;
}


.servicesHero__overlay{
  position:absolute;
  inset:0;
  z-index:1;
}

.servicesHero__wrap{
  position: relative;
  z-index:2;
  width: min(var(--wrap), calc(100% - (var(--pad) * 2)));
  margin: 0 auto;
  padding: 40px 0 56px;
}

.servicesHero__content{
  max-width: 580px;
}

.servicesHero__title{
  margin: 0 0 14px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.08;
  font-size: clamp(36px, 4.2vw, 60px);
  background: linear-gradient(
    90deg,
    #ffffff 0%,
    #BBD7D6 61%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent; /* ✅ Safari/iOS */
}

.servicesHero__dim{
  color: rgba(187,215,214,.78);
}

.servicesHero__lead{
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255,255,255,.58);
  max-width: 520px;
}


/* =========================
   SERVICES · BLOCKS (Services Page)
   Scoped: no rompe otras secciones
   ========================= */
.svcBlocks{
  position: relative;
  padding: clamp(54px, 6vw, 96px) 0;
  color: rgba(255,255,255,.88);
}

.svcBlocks__wrap{
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

/* =========================
   GROUP WRAP (glass grande)
   ========================= */
.svcGroup{
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 28px;

  border-radius: 28px;
  padding: 26px;

  /* glass como tu sistema */
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(14px);

  box-shadow:
    0 26px 70px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.10);

  overflow: hidden;
  position: relative;
}

/* glow/gradient interno suave (como la referencia) */
.svcGroup::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 520px at 22% 40%, rgba(40,180,190,.18), transparent 60%),
    radial-gradient(860px 520px at 88% 60%, rgba(187,215,214,.10), transparent 62%);
  opacity: .9;
}

/* Asegura que el contenido quede arriba del overlay */
.svcGroup > *{ position: relative; z-index: 1; }

/* =========================
   LEFT TITLE COLUMN
   ========================= */
.svcGroup__titleCol{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;   /* ✅ centrado vertical como en el diseño */
  gap: 14px;
  padding-left: 6px;
}

.svcGroup__icon{
  width: 55px;
  height: 55px;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.35));
}

.svcGroup__title{
  margin: 0;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.12;
  font-size: clamp(28px, 3.0vw, 25px);
  color: rgba(255,255,255,.92);
  text-align: center;
}

/* =========================
   RIGHT COLUMN · ROWS
   ========================= */
.svcGroup__rows{
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* row card interna */
.svcRow{
  border-radius: 22px;
  padding: 22px 22px;

  background: rgba(0,0,0,.26);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);

  box-shadow:
    0 18px 50px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.06);

  display: grid;
  grid-template-columns: 360px 1fr; /* ✅ col izq más ancha, como en la referencia */
  gap: 22px;
  align-items: center;
}

/* left/right inside row */
.svcRow__left{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.svcRow__h{
  margin: 0;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,.90);
}

/* pill */
.svcPill{
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.74);
  font-size: 12px;
  line-height: 1.1;
  max-width: 100%;
}

/* divider vertical + text */
.svcRow__right{
  border-left: 1px solid rgba(255,255,255,.16);
  padding-left: 22px;
}

.svcRow__right p{
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,.74);
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 1020px){
  .svcGroup{
    grid-template-columns: 260px 1fr;
    gap: 20px;
  }
  .svcRow{
    grid-template-columns: 320px 1fr;
  }
}

@media (max-width: 860px){
  /* Grupo pasa a 1 columna: primero título, luego rows */
  .svcGroup{
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 22px;
  }

  .svcGroup__titleCol{
    justify-content: flex-start;
    padding-left: 0;
  }

  /* Row: texto debajo (como pediste) */
  .svcRow{
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px;
  }

  .svcRow__right{
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid rgba(255,255,255,.14); /* ✅ divisor horizontal en mobile */
    padding-top: 14px;
  }

  .svcRow__h{ font-size: 20px; }
  .svcRow__right p{ font-size: 14px; }
}

@media (max-width: 640px){
  .svcBlocks__wrap{
    width: min(1180px, calc(100% - 22px));
  }
  .svcPill{
    white-space: normal;
    line-height: 1.35;
    text-align: center;
  }
}

/* =========================================================
   TABLET FIX PACK — SERVICES (B.I.G Consulting)
   Pegar AL FINAL del CSS
   Objetivo:
   - iPad/tablets: mantener layout pro (2 columnas) sin que colapse a “mobile”
   - Evitar filas con columnas demasiado rígidas (360px) que desbordan o aprietan
   - Hero full-height OK + contenido con mejor lectura
========================================================= */

/* -------------------------
   SERVICES · TABLET LARGE
   768–1180 (iPad portrait/landscape + tablets grandes)
------------------------- */
@media (min-width: 768px) and (max-width: 1180px){

  /* ===== HERO ===== */
  .servicesHero{
    min-height: 92vh; /* mejor que 100vh en iPad por barras */
    height: auto;
    padding-top: var(--hdr-h);
  }

  .servicesHero__bg{
    width: 112vw;
    height: 112vh;
    object-position: 62% 46%;
  }

  .servicesHero__wrap{
    width: min(1040px, calc(100% - 32px));
    padding: 34px 0 44px;
  }

  .servicesHero__content{ max-width: 640px; }

  .servicesHero__title{
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.06;
    margin-bottom: 12px;
  }

  .servicesHero__lead{
    font-size: 14px;
    line-height: 1.75;
    max-width: 560px;
    margin-bottom: 18px;
  }

  /* ===== BLOCKS WRAP ===== */
  .svcBlocks{
    padding: clamp(46px, 5vw, 76px) 0;
  }

  .svcBlocks__wrap{
    width: min(1040px, calc(100% - 32px));
    gap: 22px;
  }

  /* ===== GROUP: 2 columnas pero más balanceado ===== */
  .svcGroup{
    grid-template-columns: 220px 1fr; /* antes 240, más “aire” a rows */
    gap: 22px;
    padding: 22px;
    border-radius: 26px;
  }

  /* title col: centrado y limpio */
  .svcGroup__titleCol{
    gap: 12px;
  }

  .svcGroup__icon{
    width: 52px;
    height: 52px;
  }

  .svcGroup__title{
    font-size: clamp(20px, 2.2vw, 26px); /* tu clamp original tenía valores invertidos */
    line-height: 1.12;
  }

  /* ===== ROW: evitar columnas rígidas =====
     - col izquierda: auto-fit con min razonable
     - col derecha: flexible
  */
  .svcRow{
    padding: 20px;
    border-radius: 20px;
    grid-template-columns: minmax(260px, 340px) 1fr; /* ✅ clave tablet */
    gap: 18px;
    align-items: center;
  }

  .svcRow__left{
    align-items: flex-start; /* en tablet se lee mejor alineado */
    text-align: left;
  }

  .svcRow__h{
    font-size: 20px;
  }

  .svcPill{
    font-size: 12px;
    line-height: 1.25;
    white-space: normal; /* evita pill “larga” que empuja */
    max-width: 320px;
  }

  .svcRow__right{
    padding-left: 18px;
  }

  .svcRow__right p{
    font-size: 14px;
    line-height: 1.7;
  }
}

/* -------------------------
   SERVICES · TABLET SMALL (portrait iPad / 768–900)
   - acá conviene:
     Group sigue 2 cols, pero Row baja a 1 col
     (mantiene estética pro sin apretar)
------------------------- */
@media (min-width: 768px) and (max-width: 900px){

  /* groups aún pueden quedar 2 cols, pero con col izquierda más chica */
  .svcGroup{
    grid-template-columns: 200px 1fr;
    gap: 18px;
    padding: 20px;
  }

  /* rows a 1 col para que respire */
  .svcRow{
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px;
  }

  .svcRow__left{
    align-items: center;
    text-align: center;
  }

  .svcPill{
    max-width: 100%;
    text-align: center;
  }

  .svcRow__right{
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid rgba(255,255,255,.14);
    padding-top: 14px;
  }
}

/* -------------------------
   iPad landscape específico (opcional)
------------------------- */
@media (min-width: 1024px) and (max-width: 1180px) and (orientation: landscape){
  .servicesHero__bg{
    object-position: 64% 44%;
  }
}




/* =========================
   ABOUT HERO (FULL VIEWPORT)
   ========================= */
.aboutPage{ padding-top:0; } /* si tu body/page wrapper ya existe, ok */

.aboutHero{
  position: relative;
  min-height: 100svh;
  height: 100vh;
  overflow: hidden;
  color: rgba(255,255,255,.88);
  display: grid;
  align-items: center;

  /* deja espacio para el header fixed (si tu home lo usa igual) */
  padding-top: var(--hdr-h, 76px);
}

.aboutHero__bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* evita “corte” raro según viewport */
  object-position: 68% 45%;
  transform: scale(1.02);
  z-index: 0;
}

/* “wash” sutil para legibilidad (no cambia tu estética) */
.aboutHero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(1200px 620px at 18% 38%, rgba(0,0,0,.55), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.18) 38%, rgba(0,0,0,.35));
  pointer-events:none;
}

.aboutHero__inner{
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 18px;
}

.aboutHero__card{
  width: min(740px, 92vw);
  padding: 40px 70px 40px;
  border-radius: 18px;
  background: rgba(14,18,20,.40);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 22px 60px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
}

.aboutHero__pill{
  margin: 0 0 12px;
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 10px;
  color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  font-size: 12px;
  letter-spacing: .2px;
}

/* ✅ Tipografía / grosor alineado al estándar del sitio */
.aboutHero__title{
  margin: 0 0 12px;
  letter-spacing: -0.03em;
  line-height: 1.12;
  font-size: clamp(30px, 3.2vw, 52px);
  color: rgba(255,255,255,.92);
  font-weight: 400;
  font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.aboutHero__titleDim{
  color: rgba(255,255,255,.58);
}

.aboutHero__text{
  margin: 0 0 16px;
  color: rgba(255,255,255,.74);
  font-size: 13.5px;
  line-height: 1.75;
  max-width: 500px;
}

.aboutHero__actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* =========================
   Mobile
   ========================= */
@media (max-width: 820px){
  .aboutHero{
    align-items: start;
    padding-top: calc(var(--hdr-h, 76px) + 18px);
    height: auto;
    min-height: auto;
    padding-bottom: 55px;
  }

  .aboutHero__bg{
    object-position: 62% 38%;
  }

  .aboutHero__card{
    width: min(560px, 92vw);
    padding: 18px 16px 16px;
    border-radius: 16px;
  }
}


/* =========================================
   ABOUT · BLOQUE 1 (FINAL)
========================================= */

/* =========================================
   ABOUT · GRID BASE (COMPARTIDA)
========================================= */

.about-grid{
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) 1px minmax(0, 1.35fr);
  column-gap: clamp(28px, 3.2vw, 44px);
  align-items: start;
}


.about-block--intro{
  background:#ffffff;
  padding: clamp(64px, 7vw, 104px) 0;
  padding-bottom: 35px;
}

.about-wrap{
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

/* -------- GRID PRINCIPAL -------- */
.about-grid--text{
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) 1px minmax(0, 1.35fr);
  column-gap: clamp(28px, 3.2vw, 44px);
  align-items: start;
}

/* -------- COLUMNA IZQUIERDA -------- */
.about-col--left{
  max-width: 420px;
}

/* eyebrow */
.about-eyebrow{
  display: block;
  margin-bottom: 14px;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 500;
  color: rgba(17,24,39,.60);
}

/* título principal */
.about-title{
  margin: 0 0 18px 0;
  font-size: clamp(34px, 3.3vw, 40px);
  line-height: 1.12;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: rgba(19, 77, 86, .70);
  background: linear-gradient(
    90deg,
    #0C1013 0%,
    #749D99 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent; /* Safari */
}

/* párrafo lead */
.about-lead{
  margin: 0;
  max-width: 360px;
  font-size: 14px;
  line-height: 1.75;
  font-weight: 400;
  color: rgba(17,24,39,.62);
}

/* -------- DIVISOR -------- */
.about-divider{
  width: 1px;
  background: rgba(17,24,39,.18);
  align-self: stretch;
}

/* -------- COLUMNA DERECHA -------- */
.about-col--right{
  max-width: 560px;
  padding-top: 6px; /* alineación óptica */
}

/* grupos de texto */
.about-text-group{
  margin: 0 0 18px 0;
}

.about-text-group h4{
  margin: 0 0 6px 0;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(17,24,39,.78);
}

.about-text-group p{
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(17,24,39,.58);
}

/* nota final */
.about-note{
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.6;
  font-style: normal;
  color: rgba(17,24,39,.55);
}

/* =========================================
   RESPONSIVE
========================================= */

/* tablet */
@media (max-width: 1024px){
  .about-grid--text{
    column-gap: 32px;
  }
}

/* mobile */
@media (max-width: 860px){
  .about-grid--text{
    grid-template-columns: 1fr;
    row-gap: 32px;
  }

  .about-divider{
    display: none;
  }

  .about-col--left,
  .about-col--right{
    max-width: none;
  }

  .about-title{
    font-size: 32px;
  }

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


/* =========================================
   ABOUT · BLOQUE 2 (IMAGEN / TEXTO)
========================================= */

.about-block--founder{
  background:#ffffff;
}

/* MISMA grilla base que el Bloque 1 */
.about-grid--media{
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.35fr);
  column-gap: clamp(56px, 6vw, 96px);
  align-items: center;
}

/* -------- IMAGEN (col izquierda exacta) -------- */
.about-media{
  margin: 0;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: #f3f4f6;
  box-shadow: 0 18px 55px rgba(17,24,39,.10);
}

.about-media img{
  width: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* -------- TEXTO (col derecha) -------- */
.about-copy{
  max-width: 560px;
  padding-top: 6px; /* alineación óptica */
}

.about-name{
  margin: 0 0 6px 0;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: rgba(17,24,39,.82);
}

.about-role{
  margin: 0 0 18px 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(17,24,39,.58);
}

.about-body p{
  margin: 0 0 14px 0;
  font-size: 13px;
  line-height: 1.75;
  color: rgba(17,24,39,.58);
}

.about-body p:last-child{
  margin-bottom: 0;
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 860px){
  .about-grid--media{
    grid-template-columns: 1fr;
    row-gap: 28px;
    align-items: start;
  }

  .about-copy{
    max-width: none;
  }

  .about-media{
    border-radius: 14px;
  }
}


/* =========================================
   ABOUT · BLOQUE 3 (TEXTO + DIVISOR + IMAGEN)
========================================= */

.about-block--quote{
  background:#ffffff;
  padding: clamp(64px, 7vw, 104px) 0;
  padding-top: 35px;
}

/* MISMA grilla base que Bloque 1 */
.about-grid--quote{
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) 1px minmax(0, 1.35fr);
  column-gap: clamp(28px, 3.2vw, 44px);
  align-items: start;
}

/* Col izquierda */
.about-quote{
  max-width: 460px;
}

/* Quote grande */
.about-quote__text{
  margin: 0 0 18px 0;
  font-size: 20px;
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: rgba(17,24,39,.82);
}

/* Texto debajo */
.about-quote__body p{
  margin: 0 0 14px 0;
  font-size: 13px;
  line-height: 1.75;
  color: rgba(17,24,39,.58);
}

.about-quote__body p:last-child{
  margin-bottom: 0;
}

/* Divisor visible (igual a Bloque 1) */
.about-block--quote .about-divider{
  width: 1px;
  background: rgba(17,24,39,.18);
  align-self: stretch;
}

/* Imagen derecha */
.about-photo{
  margin: 0;
  width: 90%;
  border-radius: 16px;
  overflow: hidden;
  background: #f3f4f6;
  box-shadow: 0 18px 55px rgba(17,24,39,.10);
  display: none;
}

.about-photo img{
  width: 100%;
  display: block;
  aspect-ratio: 16 / 10; /* similar a la foto horizontal de tu captura */
  object-fit: cover;
  object-position: center;
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 860px){
  .about-grid--quote{
    grid-template-columns: 1fr;
    row-gap: 28px;
  }

  .about-block--quote .about-divider{
    display: none;
  }

  .about-quote{
    max-width: none;
  }

  .about-quote__text{
    font-size: 18px;
  }

  .about-photo{
    border-radius: 14px;
  }
}


/* =========================
   TEAM MEMBERS (About)
========================= */
.team{
  position: relative;
  padding: clamp(46px, 6vw, 86px) 0;
  padding-top: 0px;
}

.team__wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 18px;
}

.team__head{
  display:flex;
  align-items:center;
  gap: 12px;
  margin-bottom: 18px;
}

.team__kicker{
  width: 2px;
  height: 22px;
  background: rgba(255,255,255,.28);
  border-radius: 2px;
}

.team__title{
  margin: 0 0 18px;
  font-weight: 400;
  font-size: 28px;
  color: rgba(0,0,0,.78);
  display:flex;
  align-items:center;
  gap: 12px;
}

/* 6 en desktop */
.team__grid{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.member{
  background: rgba(255,255,255,.06);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.16);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
  min-width: 0;
}

.member:hover{
  transform: translateY(-4px);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
}

.member__media{
  position: relative;
  overflow: hidden;
}

.member__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

.member__body{
  padding: 12px 12px 14px;
  backdrop-filter: blur(10px) saturate(140%);
}

.member__name{
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #184957;
}

.member__role{
  margin: 0 0 8px;
  font-size: 11px;
  line-height: 1.25;
  color: #184957;
  min-height: 28px; /* ayuda a alinear alturas */
}

.member__meta{
  margin: 0;
  font-size: 11px;
  color: #184957;
}

/* Notebooks: si se empieza a apretar, bajamos a 3 por fila */
@media (max-width: 1100px){
  .team__grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Mobile: 2 en 2 */
@media (max-width: 640px){
  .team__head{ margin-bottom: 14px; }
  .team__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .member__body{ padding: 10px 10px 12px; }
  .member__name{ font-size: 12.5px; }
  .member__role{ font-size: 10.8px; min-height: 26px; }
  .member__meta{ font-size: 10.8px; }
}


/* =========================================================
   ABOUT — TABLET COMPACT FIX
   iPad / tablets (768px–1180px)
   - Reduce tamaños visuales
   - Agrega márgenes laterales
   - Mantiene layout y jerarquía
========================================================= */
@media (min-width: 768px) and (max-width: 1180px){

  /* =========================
     HERO
  ========================= */
  .aboutHero{
    min-height: auto;
    height: auto;
    padding-top: calc(var(--hdr-h, 76px) + 24px);
    padding-bottom: 48px;
    align-items: flex-start;
  }

  .aboutHero__inner{
    max-width: 960px;              /* ⬅️ más aire lateral */
    padding: 0 24px;
  }

  .aboutHero__card{
    width: 100%;
    padding: 26px 28px;
  }

  .aboutHero__title{
    font-size: clamp(26px, 3vw, 40px);  /* ⬇️ antes muy grande */
    line-height: 1.08;
    margin-bottom: 10px;
  }

  .aboutHero__text{
    font-size: 13px;
    line-height: 1.65;
    max-width: 520px;
  }

  /* =========================
     BLOQUE 1 · OUR MOTTO
  ========================= */
  .about-block--intro{
    padding: 56px 0 32px;
  }

  .about-wrap{
    max-width: 960px;          /* ⬅️ margen lateral */
    padding: 0 24px;
  }

  .about-grid--text{
    column-gap: 26px;
  }

  .about-eyebrow{
    font-size: 13px;
    margin-bottom: 10px;
  }

  .about-title{
    font-size: clamp(26px, 2.8vw, 34px);
    margin-bottom: 14px;
  }

  .about-lead{
    font-size: 13px;
    line-height: 1.65;
  }

  .about-text-group{
    margin-bottom: 14px;
  }

  .about-text-group h4{
    font-size: 11px;
    margin-bottom: 4px;
  }

  .about-text-group p{
    font-size: 12.8px;
    line-height: 1.6;
  }

  /* =========================
     BLOQUE 2 · FOUNDER
  ========================= */
  .about-block--founder{
    padding: 48px 0;
  }

  .about-grid--media{
    column-gap: 32px;
  }

  .about-name{
    font-size: 20px;
  }

  .about-role{
    font-size: 13px;
    margin-bottom: 14px;
  }

  .about-body p{
    font-size: 12.8px;
    line-height: 1.65;
  }

  /* =========================
     BLOQUE 3 · QUOTE
  ========================= */
  .about-block--quote{
    padding: 48px 0;
  }

  .about-quote__text{
    font-size: 18px;
    line-height: 1.5;
  }

  .about-photo{
    width: 100%; /* evita imagen gigante visualmente */
  }

  /* =========================
     TEAM
  ========================= */
  .team{
    padding: 48px 0 64px;
  }

  .team__wrap{
    max-width: 960px;
    padding: 0 24px;
  }

  .team__title{
    font-size: 24px;
  }

  .team__grid{
    gap: 10px;
  }
}




/* =========================================
   HERO · PARTNERS
========================================= */

.hero--partners{
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #000;
}

/* imagen de fondo */
.hero--partners .hero-bg{
  position: absolute;
  inset: 0;
  background-image: url("../assets/img/background-partners.png");
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  z-index: 0;
}

/* overlay oscuro + degradado lateral */
.hero--partners .hero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.85) 0%,
      rgba(0,0,0,.70) 35%,
      rgba(0,0,0,.25) 60%,
      rgba(0,0,0,.05) 100%
    );
}

/* contenedor */
.hero--partners .hero-wrap{
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(96px, 10vw, 140px) 24px;
}

/* contenido */
.hero--partners .hero-content{
  max-width: 560px;
}

/* título */
.hero--partners .hero-title{
  margin: 0 0 24px 0;
  font-size: clamp(36px, 4vw, 54px);
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -0.02em;
  background: linear-gradient(
    90deg,
    #ffffff 0%,
    #BBD7D6 61%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent; /* ✅ Safari/iOS */
}

/* pill */
.hero--partners .hero-pill{
  display: inline-block;
  margin-bottom: 24px;
  padding: 6px 14px;
  font-size: 13px;
  line-height: 1.2;
  border-radius: 10px;
  color: #ffffff;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
}

/* texto */
.hero--partners .hero-text{
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255,255,255,.78);
  max-width: 520px;
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 860px){

  .hero--partners .hero-wrap{
    padding-top: 15px;
  }

  .hero--partners .hero-content{
    max-width: none;
  }

  .hero--partners .hero-title{
    font-size: 36px;
  }
}


/* =========================================
   PARTNERS · GRID DE 11 CARDS
========================================= */

.partners-grid{
  padding: clamp(64px, 7vw, 104px) 0;
  background: #ffffff;
}

.partners-wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* 3 columnas como el mock */
.pgrid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

/* card */
.pcard{
  background: #ffffff;
  border-radius: 18px;
  padding: 18px 18px 20px;
  box-shadow: 0 18px 55px rgba(17,24,39,.08);
  border: 1px solid rgba(17,24,39,.06);
  min-height: 270px;
  display: flex;
  flex-direction: column;
}

/* bloque logo */
.pcard__logo{
  background: #f5f6f7;
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pcard__logo img{
  max-width: 240px;
  width: 100%;
  height: 75px;
  object-fit: contain;
  display: block;
}

/* texto */
.pcard__body{
  padding: 14px 4px 0;
  flex: 1;
}

.pcard__body p{
  font-size: 14px;
    line-height: 1.7;
    color: #555;
    margin: 0 0 16px;
}

.pcard__body p:last-child{
  margin-bottom: 0;
}

/* botón EXISTENTE: solo posición */
.pcard .btn.btn--insights{
  margin-top: 16px;
  align-self: center;
}

/* industria */
.pcard__industry{
  margin-bottom: 8px;
  padding: 0 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #6b7280; /* gris profesional */
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1100px){
  .pgrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px){
  .pgrid{ grid-template-columns: 1fr; }
  .pcard{ min-height: auto; }
}




/* =========================
   HERO · WEBINAR (SIN PREVIEW)
========================= */

.heroWebinar{
  position: relative;
  min-height: 100vh;
  background: #000;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center; /* ✅ */
  padding-top: 84px;
  z-index: 10;
}

.heroWebinar__bg{
  position: absolute;
  inset: 0;
  background: url("../assets/img/background-webinar.png") center / cover no-repeat;
  z-index: 0;
  pointer-events: none;
}

.heroWebinar__bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 600px at 72% 62%, rgba(130,220,230,.28), rgba(0,0,0,0) 60%),
    radial-gradient(900px 520px at 86% 76%, rgba(60,180,200,.22), rgba(0,0,0,0) 62%),
    linear-gradient(90deg,
      rgba(0,0,0,.85) 0%,
      rgba(0,0,0,.70) 38%,
      rgba(0,0,0,.25) 68%,
      rgba(0,0,0,.05) 100%
    );
}

.heroWebinar__wrap{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;

  /* ⬆️ SUBIMOS EL CONTENIDO */
  padding-top: clamp(40px, 6vw, 70px);
  padding-left: 24px;
  padding-right: 24px;

  /* ⬇️ mantenemos espacio para preview */
padding-bottom: clamp(200px, 18vw, 280px);


  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}



/* === TÍTULO (tal cual pediste) === */
.heroWebinar__title{
  margin: 0 0 18px;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-size: clamp(40px, 4.2vw, 60px);
  font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: rgba(255,255,255,.92);
  background: linear-gradient(
    90deg,
    #ffffff 0%,
    #BBD7D6 61%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent; /* ✅ Safari/iOS */
}

.heroWebinar__title span{
  color: rgba(255,255,255,.68);
}

/* Bajada */
.heroWebinar__lead{
  margin: 0 0 28px;
  max-width: 760px;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255,255,255,.68);
  font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* CTA */
.heroWebinar__cta{
  margin-top: 6px;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 900px){
  .heroWebinar{
    padding-top: 74px;
  }

  .heroWebinar__wrap{
    text-align: center;
  }

  .heroWebinar__lead{
    margin-left: auto;
    margin-right: auto;
  }
}



/* =========================
   WEBINARS LIST · GRID ✅ (SUBIDO)
========================= */

.webinarsList{
  background:#fff;
  padding-top: clamp(190px, 18vw, 260px); /* ✅ antes 260–360 (muy abajo) */
  padding-bottom: clamp(70px, 7vw, 110px);
  z-index: 1;
  position: relative;
  overflow: visible;
}



.webinarsList__wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.webinarsList__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(44px, 4.6vw, 78px) clamp(34px, 4vw, 86px);
  justify-items: center;
  align-items: start;
}

.webinarItem{
  width: 100%;
  max-width: 560px;
}

/* fecha */
.webinarItem__date{
  margin: 0 0 14px 0;
  font-size: 12px;
  line-height: 1.2;
  color: rgba(17,24,39,.55);
  font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* =========================
   CARD LIST · IDENTICA LOOK
========================= */
.webinarItemCard{
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: #050607;
  box-shadow: 0 18px 55px rgba(17,24,39,.14);
  transform: translateZ(0);
  text-decoration: none;
}

/* poster real */
.webinarItemCard__poster{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .95;
  transform: scale(1.02);
}

/* overlay para look del home */
.webinarItemCard::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 420px at 30% 35%, rgba(0,0,0,.08), rgba(0,0,0,.62) 66%),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.55));
  pointer-events:none;
}

/* logo */
.webinarItemCard__logo{
  position: absolute;
  top: 16px;
  right: 16px;
  height: 22px;
  width: auto;
  z-index: 2;
  opacity: .92;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.45));
}

/* contenido */
.webinarItemCard__inner{
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 18px;
  z-index: 2;
  color: rgba(255,255,255,.92);
  font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.webinarItemCard__meta{
  margin: 0 0 2px 0;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
}

.webinarItemCard__meta-2{
  margin: 0 0 14px 0;
  font-size: 20px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(255,255,255,.86);
}

.webinarItemCard__title{
  margin: 0;
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -0.01em;
  font-size: clamp(22px, 2vw, 34px);
  color: rgba(255,255,255,.92);
  text-shadow: 0 16px 32px rgba(0,0,0,.45);
}

.webinarItemCard__u{
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}

/* hover */
.webinarItemCard:hover{
  box-shadow:
    0 34px 90px rgba(0,0,0,.22),
    0 0 0 8px rgba(187,215,214,.10);
}

/* textos del item */
.webinarItem__title{
  margin: 16px 0 16px 0;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.01em;
  font-size: 18px;
  color: rgba(17,24,39,.88);
  font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.webinarItem__cta{
  margin: 0 0 14px 0;
}

.webinarItem__desc{
  margin: 0;
  font-size: 12px;
  line-height: 1.75;
  color: rgba(17,24,39,.60);
  font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

@media (max-width: 980px){
  .webinarsList__grid{
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .webinarItem{
    max-width: none;
  }
}



/* =========================
   HERO · PREVIEW 3 CARDS  ✅ (MÁS ARRIBA)
========================= */


/* Preview cruzando el borde inferior del hero */
.heroWebinar__preview{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  transform: translateY(38%); /* ✅ antes 50% -> baja demasiado */
  z-index: 20;

  pointer-events: auto;
}

.heroWebinar__flow{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  pointer-events: auto;
}

/* stage */
.heroWebinar__flow .webinarsFlow__stage{
  position: relative;
  min-height: 420px;
  z-index: 6;
}

/* Mobile */
@media (max-width: 720px){
  .heroWebinar__wrap{
    padding-top: 45px;
    padding-bottom: 140px; /* ✅ acompaña el nuevo cálculo */
  }
  .heroWebinar__flow .webinarsFlow__stage{
    min-height: 360px;
  }
  .heroWebinar__preview{
    display: none;
  }
  .webinarsList{
    padding-top: 65px;
  }

}

.heroWebinar__preview .webinarsFlow__stage{ cursor: grab; }
.heroWebinar__preview .webinarsFlow__stage:active{ cursor: grabbing; }
.heroWebinar__preview .webinarCard{
  user-select: none;
  -webkit-user-drag: none;
}

.heroWebinar::before,
.heroWebinar::after{
  pointer-events: none;
}



/* =========================
   INSIGHTS HERO
========================= */

.insightsHero{
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: clamp(120px, 12vh, 160px) 0 80px;
  overflow: hidden;
}

/* Fondo */
.insightsHero__bg{
  position: absolute;
  inset: 0;
  background: url("../assets/img/background-webinar.png") center / cover no-repeat;
  z-index: 0;
}

/* Oscurecido general (MISMA lógica que Webinar) */
.insightsHero__overlay{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      1200px 700px at 60% 55%,
      rgba(0,0,0,.15),
      rgba(0,0,0,.65) 60%,
      rgba(0,0,0,.85) 100%
    );
  z-index: 1;
}

/* Contenido */
.insightsHero__wrap{
  position: relative;
  z-index: 2;
  width: 100%;
}

.insightsHero__content{
  max-width: 920px;
  margin: 0 auto;

  /* ✅ SUBIMOS TODO EL HERO */
  padding: 0 20px 0;
  transform: translateY(-40px);

  text-align: center;
}


/* Eyebrow */
.insightsHero__eyebrow{
  display: block;
  margin-bottom: 14px;
  font-size: 20px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
}

/* ===== TÍTULO · EXACTO AL QUE DEFINISTE ===== */
.insightsHero__title{
  margin: 0 0 18px;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-size: clamp(40px, 4.2vw, 60px);
  font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: rgba(255,255,255,.92);
  background: linear-gradient(
    90deg,
    #ffffff 0%,
    #BBD7D6 61%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent; /* ✅ Safari/iOS */
  padding-bottom: 10px;
}

/* Bajada */
.insightsHero__lead{
  max-width: 760px;
  margin: 0 auto 34px;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.6;
  color: rgba(255,255,255,.7);
}

/* CTA */
.insightsHero__cta{
  display: flex;
  justify-content: center;
}


/* =========================
   INSIGHTS · GRID (SCOPED)
   Evita pisar el insightCard del Home
========================= */

#insights-list.insightsGrid{
  background:#fff;
  padding: clamp(34px, 4.5vw, 56px) 0 clamp(64px, 7vw, 96px);
  font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#0b0b0c;
  padding-top: clamp(180px, 18vw, 240px);
}

#insights-list .insightsGrid__wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 18px;
}

#insights-list .insightsGrid__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  column-gap: clamp(22px, 2.6vw, 34px);
  row-gap: clamp(42px, 5vw, 64px); /* ⬅ más aire entre filas */
}


#insights-list .btn--insights{
  box-shadow: none;
}

/* Card (solo dentro de Insights page) */
#insights-list .insightCard{
  padding-top: 6px;
  border: none;
  border-radius: 0px;
  background-color: transparent;
  box-shadow: none;
  transition: none;
}

#insights-list .insightCard__meta{
  margin-bottom: 10px;
  font-size: 12px;
  color: rgba(11,11,12,.55);
}

#insights-list .insightCard__media{
  display:block;
  border-radius:14px;
  overflow:hidden;
  background: rgba(11,14,19,.06);
}

#insights-list .insightCard__media img{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

#insights-list .insightCard__title{
  margin: 14px 0 10px;
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.02em;
  font-size: 25px;
  color:#0b0b0c;
  font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  padding-top: 3px;
  padding-bottom: 3px;
}

#insights-list .insightCard__title a{
  color:inherit;
  text-decoration:none;
}

#insights-list .insightCard__actions{
  display:flex;
  align-items:center;
  gap:12px;
  margin: 10px 0 12px;
}

/* Arrow (solo acá) */
#insights-list .insightCard__arrow{
  width:34px;
  height:34px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  background: rgba(38,97,97,.10);
  border: 1px solid rgba(38,97,97,.20);

  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

#insights-list .insightCard__arrow svg{
  width:18px;
  height:18px;
  fill:none;
  stroke: rgba(38,97,97,.95);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  color: #fff;
}

#insights-list .insightCard__arrow:hover{
  transform: translateY(-1px);
  background: rgba(38,97,97,.14);
  border-color: rgba(38,97,97,.28);
}

/* Excerpt clamp */
#insights-list .insightCard__excerpt{
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(11,11,12,.62);

  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

#insights-list .insightCard__author{
  margin:0;
  font-size:11px;
  color: rgba(11,11,12,.55);
}

#insights-list .insightCard__author strong{ font-weight:600; }

/* Pagination */
/*
#insights-list .insightsGrid__pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin-top: clamp(32px, 4vw, 52px);
}

#insights-list .pg{
  font-size:12px;
  text-decoration:none;
  color: rgba(11,11,12,.70);
  padding: 6px 8px;
  border-radius:999px;
  transition: background .18s ease, color .18s ease;
}

#insights-list .pg:hover{
  background: rgba(11,14,19,.06);
  color: rgba(11,11,12,.86);
}

#insights-list .pg.is-active{
  background: rgba(38,97,97,.14);
  color: rgba(11,11,12,.88);
}

@media (max-width: 860px){
  #insights-list .insightsGrid__grid{ grid-template-columns: 1fr; }
  #insights-list .insightCard__title{ font-size:17px; padding-bottom: 5px; }
  .insightsHero{
    height: auto;
    min-height: auto;
    padding-bottom: 45px;
  }
} */

#insights-list .insightCard__title{ position: relative; padding-right: 56px; }
#insights-list .insightCard__arrow{
  position:absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  width:32px; height:32px;
  border-radius:10px;
  background:#749D99;
  display:flex; align-items:center; justify-content:center;
  transition: transform .2s ease, background .2s ease;
}
#insights-list .insightCard__arrow:hover{ transform: translateY(-50%) translateY(-1px); background:#6a918d; }
#insights-list .insightCard__arrow svg{ width:18px; height:18px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }


/* =========================
   INSIGHTS PREVIEW (overlay) ✅ (SUBIDO)
========================= */

.insightsHero{
  position: relative;
  overflow: visible;

  /* ✅ menos espacio: las cards quedan más “al medio” */
  padding-bottom: clamp(140px, 14vh, 200px); /* antes 180–260 */
}

.insightsPreview{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  transform: translateY(38%); /* ✅ antes 50% */
  z-index: 10;
  pointer-events: none;

  --pv-gap: 22px;
}

.insightsPreview__wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 18px;
  pointer-events: auto;
}

.insightsPreview__rail{
  position: relative;
  height: clamp(180px, 18vw, 240px);
}

/* Card base */
.insightPrevCard{
  position: absolute;
  top: 0;
  width: 34.5%;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 22px 60px rgba(0,0,0,.35);
  transform-origin: center;
  transition: transform .28s ease, filter .28s ease, opacity .28s ease;
}

.insightPrevCard__link{
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: #fff;
}

.insightPrevCard__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
}

.insightPrevCard__glass{
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 35%;
  background: linear-gradient(to top, rgba(15,17,20,.70), rgba(15,17,20,.18));
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(8px);
}

.insightPrevCard__content{
  position: absolute;
  left: 18px;
  right: 62px;
  bottom: 18px;
}

.insightPrevCard__title{
  margin: 0;
  font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.12;
  font-size: clamp(16px, 1.6vw, 20px);
  color: rgba(255,255,255,.92);
  text-shadow: 0 10px 24px rgba(0,0,0,.35);
}

.insightPrevCard__arrow{
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #749D99;
  display: flex;
  align-items: center;
  justify-content: center;
}

.insightPrevCard__arrow svg{
  width: 18px;
  height: 18px;
  fill: none;
  stroke: rgba(15,17,20,.85);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Posiciones */
.insightPrevCard.is-left{
  left: 0;
  transform: translateX(calc(-1 * var(--pv-gap))) scale(.92);
  filter: saturate(.95);
  cursor: pointer;
}
.insightPrevCard.is-active{
  left: 50%;
  transform: translateX(-50%) scale(1);
  z-index: 3;
  opacity: 1;
  filter: none;
}
.insightPrevCard.is-right{
  left: calc(100% - 34.5%);
  transform: translateX(var(--pv-gap)) scale(.92);
  filter: saturate(.95);
  cursor: pointer;
}

/* Hover laterales */
.insightPrevCard.is-left:hover{ transform: translateX(calc(-1 * var(--pv-gap))) scale(.95); }
.insightPrevCard.is-right:hover{ transform: translateX(var(--pv-gap)) scale(.95); }

/* ✅ el contenido de abajo arranca más arriba */
.insightsGrid{
  padding-top: 110px; /* antes 150 */
}

/* Responsive */
@media (max-width: 980px){
  .insightsPreview{ --pv-gap: 16px; }
  .insightPrevCard{ width: 41%; }
  .insightPrevCard.is-right{ left: calc(100% - 41%); }
}

@media (max-width: 760px){
  .insightsPreview{ display:none; } /* ✅ como decidió el diseñador */
  .insightsGrid{ padding-top: 55px !important; }
}

.insightCard__author-link{
  color: inherit;
  text-decoration: none;
}

.insightCard__author-link:hover{
  text-decoration: underline; /* opcional */
}



/* =========================
   INSIGHT · SINGLE (SECTION)
   Replica del adjunto
========================= */

.insSingle{
  background: #fff;
  font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #0b0b0c;
  padding-top: 75px;
  
}

.insSingle,
.insSingle *{ box-sizing: border-box; }

.insSingle__wrap{
  max-width: 980px;
  margin: 0 auto;
  padding: 92px 20px 50px;
}

/* Back */
.insSingle__back{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-size: 12px;
  color: rgba(11,11,12,.65);
  margin-bottom: 34px;
}

.insSingle__backDot{
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #2b3b3a; /* pequeño círculo oscuro como el adjunto */
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

.insSingle__back:hover{
  color: rgba(11,11,12,.85);
}

/* Header text */
.insSingle__head{
  max-width: 860px;
}

.insSingle__title{
  margin: 0 0 18px;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-size: clamp(40px, 4.2vw, 50px);
  color: rgba(11,11,12,.92);
}

.insSingle__intro{
  margin: 0 0 14px;
  max-width: 690px;            /* como el adjunto: intro más angosto */
  font-size: 15px;
  line-height: 1.8;
  color: rgba(11,11,12,.62);
}

.insSingle__date{
  display: inline-block;
  margin-top: 6px;
  font-size: 10px;
  font-style: italic;
  font-weight: 600;
  color: rgba(11,11,12,.85);
}

/* Media */
.insSingle__media{
  margin: 54px 0 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.insSingle__media img{
  width: min(100%, 640px);     /* imagen centrada y con ancho editorial */
  height: auto;
  display: block;
  border-radius: 0;            /* en el adjunto se ve “cuadrada” */
}

/* Text blocks */
.insSingle__text{
  max-width: 720px;            /* bloque de texto centrado, como el adjunto */
  margin: 38px auto 0;
  padding-left: 24px;          /* línea vertical a la izquierda */
  border-left: 2px solid rgba(116,157,153,.35);
}

.insSingle__text p{
  margin: 0 0 16px;
  font-size: 13px;             /* el adjunto se ve muy “editorial” y chico */
  line-height: 2.05;
  color: rgba(11,11,12,.60);
}

.insSingle__text p:last-child{
  margin-bottom: 0;
}

/* Second image spacing mirrors screenshot rhythm */
.insSingle__media + .insSingle__text{
  margin-top: 36px;
}

/* Author */
.insSingle__author{
  max-width: 720px;
  margin: 34px auto 0;
  font-size: 10px;
  color: rgba(11,11,12,.55);
}

.insSingle__author strong{
  font-weight: 700;
}

.backToInsights{
  margin-bottom: 28px;
  display: inline-flex;
}


/* Responsive */
@media (max-width: 720px){
  .insSingle__wrap{
    padding: 72px 18px 35px;
  }

  .insSingle__intro{
    max-width: 100%;
  }

  .insSingle__media img{
    width: 100%;
  }

  .insSingle__text{
    padding-left: 18px;
  }

  .insSingle__text p,
  .insSingle__author{
    font-size: 12px; /* legible en mobile */
    line-height: 1.8;
  }
}

/* =========================
   BACK TO INSIGHTS · unified arrow
========================= */

.uiBack{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-size: 13px;
  color: rgba(11,11,12,.65);
}

.uiBack__arrow{
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #2b3b3a;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease, background .2s ease;
}

.uiBack__arrow svg{
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.uiBack:hover .uiBack__arrow{
  transform: translateX(-2px);
  background: #1f2d2b;
}

.uiBack:hover{
  color: rgba(11,11,12,.85);
}


/* =========================
   PAGINATION · FINAL FIX
========================= */

.relInsights__pagination{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin-top: 46px;
  font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* =========================
   BASE LINK RESET
========================= */

.relPg{
  display: inline-flex;
  align-items: center;
  gap: 12px;

  font-size: 12px;
  text-decoration: none;
  color: rgba(11,11,12,.7);

  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  height: auto !important;

  transition: color .18s ease;
}

.relPg:hover{
  color: rgba(11,11,12,.9);
}

/* =========================
   PREV / NEXT (TEXT + ICON)
   ⛔ NO BACKGROUND
========================= */

.relPg--nav{
  background: none !important;
}

/* Texto */
.relPg__text{
  white-space: nowrap;
  line-height: 1;
}

/* =========================
   ARROW CIRCLE (ONLY)
========================= */

.relPg__arrow{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #2b3b3a;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  transition: transform .2s ease, background .2s ease;
}

.relPg__arrow svg{
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Hover motion */
.relPg--prev:hover .relPg__arrow{
  transform: translateX(-2px);
  background: #1f2d2b;
}

.relPg--next:hover .relPg__arrow{
  transform: translateX(2px);
  background: #1f2d2b;
}

/* =========================
   PAGE NUMBERS
========================= */

.relPg--num{
  width: 44px;
  height: 44px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 14px;
  color: rgba(11,11,12,.7);
  transition: background .18s ease, color .18s ease;
}

.relPg--num:hover{
  background: rgba(11,11,12,.06);
  color: rgba(11,11,12,.9);
}

.relPg--num.is-active{
  background: rgba(116,157,153,.18);
  color: rgba(11,11,12,.9);
}

/* =========================
   PAGINATION · ACTIVE NUMBER
   (override definitivo)
========================= */

.relPg--num.is-active{
  background: rgba(116,157,153,.18);
  color: rgba(11,11,12,.9);
}



/* =========================
   RELATED INSIGHTS (replica)
========================= */

.relInsights{
  background: #fff;
  font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #0b0b0c;
}

.relInsights,
.relInsights *{ box-sizing: border-box; }

.relInsights__wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 70px 20px 90px;
}

.relInsights__title{
  margin: 0 0 22px;
  font-weight: 400;
  letter-spacing: -0.02em;
  font-size: 20px;
  color: rgba(11,11,12,.85);
}

/* Grid */
.relInsights__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 42px;
  row-gap: 56px;
}

/* Card */
.relCard{
  position: relative;
  padding-top: 14px;
}

/* top separator line like the screenshot */
.relCard__topLine{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background: rgba(11,11,12,.25);
}

.relCard__date{
  font-size: 12px;
  color: rgba(11,11,12,.65);
  margin: 10px 0 14px;
}

/* Media */
.relCard__media{
  display: block;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(11,11,12,.06);
  box-shadow: 0 16px 46px rgba(11,14,19,.10);
}

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

/* Title */
.relCard__h3{
  margin: 18px 0 12px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.14;
  font-size: 24px;
  color: rgba(11,11,12,.9);
  padding-bottom: 4px;
}

.relCard__h3 a{
  color: inherit;
  text-decoration: none;
}

/* Actions row */
.relCard__actions{
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
  justify-content: space-between;
}

/* Arrow */
.relCard__arrow{
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #749D99;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: transform .2s ease, background .2s ease;
}

.relCard__arrow svg{
  width: 18px;
  height: 18px;
  fill: none;
  stroke: rgba(255,255,255,.95);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: white;
}

.relCard__arrow:hover{
  transform: translateY(-1px);
  background: #6a918d;
}

/* Excerpt */
.relCard__excerpt{
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(11,11,12,.62);

  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

/* Author */
.relCard__author{
  margin: 0;
  font-size: 11px;
  color: rgba(11,11,12,.55);
}

.relCard__author strong{ font-weight: 700; }

/* No partir "B.I.G Consulting" aunque el renglón se corte */
.relCard__author{
  white-space: normal;
}

.relCard__author{
  overflow-wrap: anywhere; /* el resto puede cortar */
}

.relCard__author{
  /* opcional: si tenías clamp/overflow en algún lado, lo “desbloquea” */
  overflow: visible;
  text-overflow: unset;
}

.relCard__author{
  /* esto mantiene el string exacto sin partirse */
  word-break: normal;
}

.relCard__author{
  /* la magia: el texto exacto no se parte */
  hyphens: none;
}

/* y acá forzamos que ese token no se rompa */
.relCard__author{
  font-variant-ligatures: none;
}

/* =========================
   INSIGHT · SHARE (LinkedIn)
   - Usa tu sistema .btn + variante .btn--gradient (on white)
========================= */

/* Layout del bloque share */
.insSingle__share{
  margin-top: clamp(56px, 7vw, 84px);
  padding-top: 28px;

  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  gap: 18px;

  border-top: 1px solid rgba(0,0,0,.08);
}

.insSingle__shareLabel{
  font-size: 14px;
  color: rgba(0,0,0,.55);
  letter-spacing: .02em;
}

/* Ajustes mínimos del botón dentro del share (icon + separación) */
.insSingle__shareBtn{
  gap: 10px; /* por si tu .btn no define gap global */
}

.insSingle__shareBtn svg{
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* =========================
   BOTÓN · GRADIENT (on white)
   - Agregar esta variante a tu sistema .btn
   - Se usa así: class="btn btn--gradient insSingle__shareBtn"
========================= */

.btn--gradient{
  background: linear-gradient(90deg, #0b0f12 0%, #7ea8a3 100%);
  color: #ffffff;
  border: none;

  box-shadow: 0 14px 34px rgba(0, 0, 0, .18);
}

.btn--gradient:hover{
  /* mantiene el gradiente + comportamiento premium */
  background: linear-gradient(90deg, #0b0f12 0%, #7ea8a3 100%);
  color: #ffffff;

  transform: translateY(-1px);
  filter: brightness(1.08);

  box-shadow:
    0 22px 48px rgba(0, 0, 0, .22),
    0 0 0 6px rgba(187, 215, 214, .22);
}

.btn--gradient:focus-visible{
  outline: none;
  box-shadow:
    0 18px 52px rgba(0,0,0,.42),
    0 0 0 2px rgba(255,255,255,.55),
    0 0 0 6px rgba(187,215,214,.22);
}

/* Mobile stack */
@media (max-width: 640px){
  .insSingle__share{
    flex-direction: column;
    gap: 14px;
  }
}





/* Pagination */
.relInsights__pagination{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0px;
  margin-top: 46px;
  user-select: none;
}

.relPg{
  font-size: 12px;
  text-decoration: none;
  color: rgba(11,11,12,.75);
  padding: 6px 8px;
  border-radius: 999px;
  transition: background .18s ease, color .18s ease;
}

.relPg:hover{
  background: rgba(11,11,12,.06);
  color: rgba(11,11,12,.9);
}

.relPg.is-active{
  background: rgba(116,157,153,.18);
  color: rgba(11,11,12,.9);
}

.relPg--prev,
.relPg--next{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
}

.relPg--prev span,
.relPg--next span{
  color: #000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Responsive */
@media (max-width: 1024px){
  .relInsights__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 34px;
  }
}

@media (max-width: 640px){
  .relInsights__wrap{ padding: 60px 18px 80px; }

  .relInsights__grid{
    grid-template-columns: 1fr;
    row-gap: 44px;
  }

  .relCard__h3{ font-size: 22px; }
}

.page-insights .siteHeader,
.page-insight-single .siteHeader{
  background: linear-gradient(
    90deg,
    rgba(12,25,28,.85),
    rgba(20,40,44,.85)
  );
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.insSingle__sub{
  max-width: 720px;
  margin: 42px auto 0;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 15px;
  color: rgba(11,11,12,.82);
}

.insSingle__caption{
  width: min(100%, 640px);
  margin: 10px auto 0;
  font-size: 11px;
  line-height: 1.6;
  color: rgba(11,11,12,.55);
  font-style: italic;
}

.insSingle__quote{
  max-width: 720px;
  margin: 30px auto 0;
  padding: 18px 18px 18px 24px;
  border-left: 3px solid rgba(116,157,153,.55);
  background: rgba(11,14,19,.03);
}

.insSingle__quote p{
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.9;
  color: rgba(11,11,12,.72);
}

.insSingle__quote cite{
  display: block;
  font-size: 11px;
  color: rgba(11,11,12,.55);
}

/* =========================
   INSIGHT · LISTS (bullets)
========================= */

.insSingle__list{
  margin: 18px 0 0;
  padding-left: 22px;
  list-style: none;
}

.insSingle__list li{
  position: relative;
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.9;
  color: rgba(11,11,12,.62);
}

/* Bullet custom (sutil, editorial) */
.insSingle__list li::before{
  content: "";
  position: absolute;
  left: -18px;
  top: 0.75em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #749D99; /* tu verde BIG */
  opacity: .85;
}

/* =========================
   INSIGHT · COMPANY LIST
========================= */

.insSingle__list--companies{
  margin: 20px 0 0;
  padding-left: 22px;
  list-style: none;
}

.insSingle__list--companies li{
  position: relative;
  margin-bottom: 26px;
}

/* Bullet editorial */
.insSingle__list--companies li::before{
  content: "";
  position: absolute;
  left: -18px;
  top: 0.85em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #749D99;
}

/* Company name */
.insSingle__company{
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.insSingle__company a{
  color: rgba(11,11,12,.85);
  text-decoration: none;
}

.insSingle__company a:hover{
  text-decoration: underline;
}

/* Description */
.insSingle__list--companies p{
  margin: 0;
  font-size: 13px;
  line-height: 1.9;
  color: rgba(11,11,12,.62);
}

/* =====================================================
   INSIGHTS · TITLE LINE CLAMP (GLOBAL)
   - Limita títulos largos a 3 líneas
   - Home · Preview · Related
   ===================================================== */

/* HOME · Insights grid */
.insightCard__title{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* soporte real */
  line-clamp: 3;         /* spec futura */
  overflow: hidden;
}

/* PREVIEW · Insights coverflow */
.insightPrevCard__title{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

/* RELATED · Insight single */
.relCard__h3{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

/* Fallback ultra seguro (browsers muy viejos) */
@supports not (-webkit-line-clamp: 3){
  .insightCard__title,
  .insightPrevCard__title,
  .relCard__h3{
    max-height: calc(1.25em * 3);
    overflow: hidden;
  }
}


/* =========================
   CONTACT · HERO (FINAL)
========================= */

.contactHero{
  min-height: 100vh;
  background:
    radial-gradient(900px 520px at 20% 30%, rgba(120,170,180,.18), transparent 60%),
    url("../assets/img/background-2.png") center / cover no-repeat;
  display:flex;
  align-items:center;
  position:relative;
}

.contactHero__wrap{
  position:relative;
  z-index:2;
  max-width:1180px;
  margin:0 auto;
  padding:120px 20px;
}

/* =========================
   CARD (base)
========================= */

.contactCard{
  position:relative;
  overflow:hidden;
  border-radius:28px;

  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:80px;

  padding:45px 45px;
  padding-bottom:96px;

  background: linear-gradient(180deg, rgba(7,9,11,.92), rgba(7,9,11,.78));
  border:1px solid rgba(255,255,255,.11);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  box-shadow: 0 40px 120px rgba(0,0,0,.55);
  align-items:center;
  isolation:isolate;
}

/* contenido arriba del bg */
.contactCard__left,
.contactCard__right,
.contactCard__locations{
  position:relative;
  z-index:3;
}

/* =========================
   BACKGROUND FX
========================= */

.contactCard__bg{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:1;
  transform: translateZ(0);
}

/* =========================================================
   CONTROL RÁPIDO (ajustes sin romper nada)
   - más al medio: subí --fx-x (ej: 26%)
   - más a la izquierda: bajá --fx-x (ej: 22%)
   - más chico: bajá --planet (ej: 600px)
========================================================= */
.contactCard{
  --fx-x: 26%;         /* ✅ “centro” del planeta en la mitad izquierda */
  --fx-y: 45%;
  --planet: 780px;     /* tamaño planeta */
  --haloW: 400px;      /* halo tamaño (ancho) */
  --haloH: 400px;      /* halo tamaño (alto) */
}

/* orb suave detrás */
.contactCard__bg::before{
  content:"";
  position:absolute;
  inset:-180px;
  background:
    radial-gradient(980px 620px at 34% 58%, rgba(116,157,153,.22), transparent 64%),
    radial-gradient(860px 540px at 44% 70%, rgba(187,215,214,.16), transparent 66%),
    radial-gradient(980px 620px at 24% 46%, rgba(40,120,120,.10), transparent 70%);
  filter: blur(20px);
  opacity:.95;
}

/* =========================
   STARS (misma idea que CTA FINAL, localizadas)
========================= */
.contactCard__bg .planetFx__stars{
  position:absolute;
  left: var(--fx-x);
  top:  var(--fx-y);
  transform: translate(-50%,-50%);
  z-index:2;                 /* ✅ arriba del orb */
  width: 760px;
  height: 520px;
  overflow:hidden;
  pointer-events:none;
  opacity: 1;

  mask-image: radial-gradient(circle at center,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 48%,
    rgba(0,0,0,.75) 62%,
    rgba(0,0,0,.25) 72%,
    rgba(0,0,0,0) 82%);
}

/* estrellas cercanas */
.contactCard__bg .planetFx__stars::before{
  content:"";
  position:absolute;
  inset:0;

  background-image:
    radial-gradient(2px 2px at 28% 42%, rgba(255,255,255,.9) 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 62% 36%, rgba(255,255,255,.75) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 48% 64%, rgba(255,255,255,.7) 50%, transparent 51%);

  background-size: 220px 220px;
  animation: starsOrbitFast 150s linear infinite;
  opacity: .55;              /* ✅ más sutil dentro de la card */
}

/* estrellas lejanas */
.contactCard__bg .planetFx__stars::after{
  content:"";
  position:absolute;
  inset:0;

  background-image:
    radial-gradient(1.2px 1.2px at 34% 58%, rgba(255,255,255,.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 68% 52%, rgba(255,255,255,.35) 50%, transparent 51%);

  background-size: 320px 320px;
  animation: starsOrbitSlow 380s linear infinite;
  opacity: .35;
}

/* =========================
   HALO (igual a CTA FINAL)
========================= */

.contactCard__bg .planetFx__halo{
  position:absolute;
  left: var(--fx-x);
  top:  var(--fx-y);
  transform: translate(-50%,-50%) scale(1);

  z-index:2;
  pointer-events:none;

  width: var(--haloW);
  height: var(--haloH);
  border-radius: 50%;

  background:
    radial-gradient(circle at center,
      rgba(140, 210, 245, .55) 0%,
      rgba(120, 200, 240, .38) 32%,
      rgba(90, 180, 230, .22) 48%,
      rgba(60, 150, 210, .14) 60%,
      rgba(60, 150, 210, 0) 78%),
    radial-gradient(circle at center,
      rgba(120, 235, 220, .22) 0%,
      rgba(110, 220, 210, .14) 36%,
      rgba(110, 220, 210, 0) 70%);

  mix-blend-mode: screen;
  opacity: .70;
  filter: blur(13px) brightness(.95);

  will-change: transform, opacity;
  animation: haloPulse 6.5s ease-in-out infinite;
}

/* =========================
   PLANET (centrado mitad izquierda)
========================= */

.contactCard__bg .planetFx__planet{
  position:absolute;
  left: var(--fx-x);
  top:  var(--fx-y);
  transform: translate(-50%, -34%);

  width: var(--planet);
  height: var(--planet);

  z-index:1;                 /* ✅ debajo de halo/stars */
  opacity: .88;
  filter: contrast(1.06) saturate(1.08);
}

.contactCard__bg .planetFx__planet img{
  width:100%;
  height:100%;
  object-fit: contain;
  display:block;
}

/* =========================
   OVERLAY CARD
   - oscurece solo derecha (NO mata halo/stars)
========================= */

.contactCard::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;                 /* ✅ debajo del contenido, arriba del bg */
  pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.10) 46%,
      rgba(0,0,0,.42) 70%,
      rgba(0,0,0,.68) 100%
    ),
    radial-gradient(1200px 820px at 50% 40%,
      rgba(0,0,0,0) 30%,
      rgba(0,0,0,.54) 100%
    );
}

/* =========================
   LEFT (subir un toque)
========================= */

.contactCard__left{
  align-self:start;
  padding-top: 6px;
}

.contactCard__title{
  margin: -10px 0 18px;
  font-weight:400;
  line-height:1.08;
  letter-spacing:-0.02em;
  font-size:clamp(35px,4vw,50px);
  font-family:"Open Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color: rgba(255,255,255,.92);
}

.contactCard__subtitle{
  margin: -4px 0 42px;
  font-size:15px;
  color: rgba(255,255,255,.65);
}

/* =========================
   RIGHT (panel sutil como diseño)
========================= */
.contactCard__right{
  border-radius: 18px;
  padding: 10px;
}

/* =========================
   FORM
========================= */

.contactForm{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.contactForm input,
.contactForm select,
.contactForm textarea{
  width:100%;
  background: rgba(0,0,0,.10);
  border:1px solid rgba(255,255,255,.28);
  border-radius:10px;
  color:#fff;
  font-size:13px;
  font-family:inherit;
}

.contactForm input,
.contactForm select{
  height:46px;
  padding:0 14px;
}

.contactForm textarea{
  padding:12px 14px;
  min-height:84px;
  line-height:1.5;
  resize:none;
}

.contactForm input::placeholder,
.contactForm textarea::placeholder{
  color: rgba(255,255,255,.50);
}

.contactForm select{
  color: rgba(255,255,255,.65);
}

.contactForm input:focus,
.contactForm select:focus,
.contactForm textarea:focus{
  outline:none;
  border-color: rgba(255,255,255,.60);
  background: rgba(0,0,0,.14);
}

.contactForm__submit{
  margin-top:18px;
  height:46px;
  font-size:12px;
  letter-spacing:.12em;
  cursor:pointer;
}

/* Select arrow + options */
.contactForm select{
  background-color: rgba(0,0,0,.18);
  color:#fff;

  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;

  background-image:
    linear-gradient(45deg, transparent 50%, #fff 50%),
    linear-gradient(135deg, #fff 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 19px,
    calc(100% - 12px) 19px;
  background-size: 6px 6px, 6px 6px;
  background-repeat:no-repeat;
}

.contactForm select option{
  background:#0b0f12;
  color:#fff;
}

.contactForm select option[value=""]{
  color: rgba(255,255,255,.55);
}

/* =========================
   LOCATIONS
========================= */

.contactCard__locations{
  position:absolute;
  left:0; right:0;
  bottom:36px;

  display:flex;
  justify-content:center;
  align-items:center;
  gap:26px;

  font-size:14px;
  color: rgba(255,255,255,.70);
}

.contactCard__locations span{
  position:relative;
  padding-right:18px;
}

.contactCard__locations span:not(:last-child)::after{
  content:"|";
  position:absolute;
  right:0;
  color: rgba(255,255,255,.28);
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 980px){
  .contactCard{
    grid-template-columns: 1fr;
    gap:60px;
    padding:56px 44px;
    padding-bottom:96px;

    --fx-x: 36%;
    --planet: 600px;
    --haloW: 560px;
    --haloH: 520px;
  }

  .contactCard__bg .planetFx__stars{
    width: 620px;
    height: 440px;
  }
}

@media (max-width: 640px){
  .contactHero__wrap{ padding:100px 16px; }

  .contactCard{
    padding:44px 28px;
    padding-bottom:96px;

    --fx-x: 42%;
    --planet: 520px;
    --haloW: 520px;
    --haloH: 520px;
  }

  .contactCard__title{ font-size:32px; }

  .contactCard__locations{
    flex-wrap:wrap;
    gap:14px;
    bottom:30px;
  }

  .contactCard__right{ padding:10px; }

  .contactCard__bg .planetFx__stars{
    width: 520px;
    height: 380px;
  }

  .contactCard__bg .planetFx__stars::before{ opacity:.45; }
  .contactCard__bg .planetFx__stars::after{ opacity:.28; }
}

/* =========================
   ANIMATIONS (igual CTA)
========================= */

@keyframes haloPulse{
  0%,100%{
    transform: translate(-50%,-50%) scale(1);
    opacity: .62;
  }
  50%{
    transform: translate(-50%,-50%) scale(1.08);
    opacity: .78;
  }
}

@keyframes starsOrbitFast{
  from{ transform: rotate(0deg) translateX(0); }
  to{ transform: rotate(360deg) translateX(0); }
}

@keyframes starsOrbitSlow{
  from{ transform: rotate(0deg) translateX(0); }
  to{ transform: rotate(-360deg) translateX(0); }
}

@media (prefers-reduced-motion: reduce){
  .contactCard__bg .planetFx__stars::before,
  .contactCard__bg .planetFx__stars::after,
  .contactCard__bg .planetFx__halo{
    animation:none !important;
  }
}

@media (max-width: 640px){
  .contactHero__wrap{ padding:100px 16px; padding-bottom: 45px; }

  .contactCard{
    grid-template-columns: 1fr;
    gap: 22px;                 /* ✅ más compacto */
    padding: 44px 22px;
    padding-bottom: 96px;

    /* ✅ planeta centrado y ARRIBA del form */
    --fx-x: 50%;               /* centrado */
    --fx-y: 30%;               /* más arriba (antes 50%) */

    --planet: 520px;
    --haloW: 520px;
    --haloH: 520px;
  }

  /* ✅ el planeta “arriba”, no bajado */
  .contactCard__bg .planetFx__planet{
    transform: translate(-50%, -50%); /* antes -34% lo bajaba */
    opacity: .90;
  }

  /* halo acompaña */
  .contactCard__bg .planetFx__halo{
    opacity: .62;             /* un poco más suave en mobile */
  }

  /* stars: más chicas para que no ensucien */
  .contactCard__bg .planetFx__stars{
    width: 520px;
    height: 380px;
  }
  .contactCard__bg .planetFx__stars::before{ opacity:.45; }
  .contactCard__bg .planetFx__stars::after{ opacity:.28; }

  /* ✅ el overlay NO debe oscurecer tanto arriba (sino mata el planeta) */
  .contactCard::after{
    background:
      linear-gradient(180deg,
        rgba(0,0,0,.12) 0%,
        rgba(0,0,0,.18) 36%,
        rgba(0,0,0,.58) 100%
      ),
      radial-gradient(900px 700px at 50% 20%,
        rgba(0,0,0,0) 30%,
        rgba(0,0,0,.52) 100%
      );
  }

  /* Form más abajo, pero sin tocar HTML: solo separo visualmente */
  .contactCard__right{
    margin-top: 200px;
  }

  .contactCard__title{ font-size:32px; }

  .contactCard__locations{
    flex-wrap:wrap;
    gap:14px;
    bottom:30px;
  }
}


/* =========================================================
   CONTACT — iPad FIX ONLY
   768px–1180px
   - Card más chica
   - Menos padding
   - Más margen lateral
   - Tipos más contenidos
========================================================= */
@media (min-width: 768px) and (max-width: 1180px){

  /* HERO */
  .contactHero{
    min-height: auto;
    padding-top: calc(var(--hdr-h, 76px) + 24px);
    padding-bottom: 48px;
    align-items: flex-start;
  }

  .contactHero__wrap{
    max-width: 960px;     /* ✅ margen lateral real */
    padding: 80px 24px;
  }

  /* CARD */
  .contactCard{
    gap: 48px;            /* ⬇️ antes 80 */
    padding: 36px 36px;
    padding-bottom: 80px;

    --planet: 640px;      /* ⬇️ planeta más chico */
    --haloW: 340px;
    --haloH: 340px;
    --fx-x: 28%;
    --fx-y: 46%;
  }

  /* LEFT */
  .contactCard__title{
    font-size: clamp(28px, 3.2vw, 40px);
    line-height: 1.08;
    margin-bottom: 14px;
  }

  .contactCard__subtitle{
    font-size: 14px;
    margin-bottom: 28px;
  }

  /* RIGHT / FORM */
  .contactForm{
    gap: 14px;
  }

  .contactForm input,
  .contactForm select{
    height: 42px;
    font-size: 12.5px;
  }

  .contactForm textarea{
    min-height: 72px;
    font-size: 12.5px;
  }

  .contactForm__submit{
    height: 42px;
    font-size: 11px;
    margin-top: 14px;
  }

  /* LOCATIONS */
  .contactCard__locations{
    bottom: 28px;
    font-size: 13px;
    gap: 20px;
  }
}

/* =========================================================
   CONTACT — iPad FIX v2 (override)
   - Card más ANCHA
   - Hero full viewport (no se corta arriba)
   - Sin tocar HTML
   768px–1180px
========================================================= */
@media (min-width: 768px) and (max-width: 1180px){

  /* HERO: que NO se recorte arriba */
  .contactHero{
    min-height: 100svh;
    height: 100vh;
    padding-top: var(--hdr-h, 76px);
    padding-bottom: 40px;
    align-items: center;          /* ✅ vuelve al centro */
    background-position: center;  /* ✅ evita “corte” óptico */
  }

  .contactHero__wrap{
    max-width: 1120px;            /* ✅ más ancho en iPad */
    width: 100%;
    padding: 96px 28px;           /* ✅ aire lateral real */
  }

  /* CARD: más grande/ancha */
  .contactCard{
    width: min(980px, 100%);      /* ✅ card más ancha */
    margin: 0 auto;

    grid-template-columns: 1.12fr .88fr;
    gap: 64px;

    padding: 48px 52px;
    padding-bottom: 96px;

    /* planeta/halo un toque más a la izquierda para no tapar inputs */
    --fx-x: 24%;
    --fx-y: 46%;
    --planet: 760px;
    --haloW: 420px;
    --haloH: 420px;
  }

  /* Stars un poco más grandes para acompañar card ancha */
  .contactCard__bg .planetFx__stars{
    width: 780px;
    height: 520px;
  }

  /* Tipos: un poco más grandes para que no se vea “chico” */
  .contactCard__title{
    font-size: clamp(34px, 3.4vw, 46px);
    margin: -10px 0 16px;
  }
  .contactCard__subtitle{
    font-size: 14.5px;
    margin: -4px 0 38px;
  }

  /* Form: respira mejor en iPad */
  .contactForm{ gap: 16px; }

  .contactForm input,
  .contactForm select{
    height: 46px;
    font-size: 13px;
  }

  .contactForm textarea{
    min-height: 86px;
    font-size: 13px;
  }

  .contactForm__submit{
    height: 46px;
    margin-top: 16px;
  }

  /* Locations: un poco más abajo y centradas */
  .contactCard__locations{
    bottom: 34px;
    gap: 24px;
    font-size: 13.5px;
  }
}



/* =========================
   FLOATING WHATSAPP · B.I.G (REFINED)
========================= */
.waFloat{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.waFloat__wrap{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ===== LABEL (hidden by default) ===== */
.waFloat__label{
  padding: 8px 12px;
  border-radius: 12px;

  background:
    linear-gradient(
      135deg,
      rgba(12,16,19,.85),
      rgba(12,16,19,.65)
    );
  border: 1px solid rgba(255,255,255,.18);

  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);

  color: #ffffff;
  font-size: 11px;
  letter-spacing: .02em;
  white-space: nowrap;

  box-shadow: 0 14px 36px rgba(0,0,0,.32);

  opacity: 0;
  transform: translateX(6px);
  pointer-events: none;

  transition:
    opacity .25s ease,
    transform .25s ease;
}

/* ===== BUTTON (smaller) ===== */
.waFloat__btn{
  width: 46px;
  height: 46px;
  border-radius: 14px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.16),
      rgba(255,255,255,.06)
    ),
    linear-gradient(135deg, #0b0f12 0%, #5f7f7c 100%);

  border: 1px solid rgba(255,255,255,.22);

  box-shadow:
    0 14px 36px rgba(11,14,19,.30),
    inset 0 0 0 1px rgba(255,255,255,.08);

  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);

  display: grid;
  place-items: center;
  cursor: pointer;
  text-decoration: none;

  transition:
    transform .22s ease,
    box-shadow .22s ease;
}

.waFloat__btn:hover{
  transform: translateY(-2px);
  box-shadow:
    0 22px 56px rgba(11,14,19,.38),
    0 0 0 5px rgba(116,157,153,.22);
}

/* Icon */
.waFloat__icon{
  width: 22px;
  height: 22px;
  fill: #ffffff;
  display: block;
}

/* ===== SHOW LABEL ON HOVER (desktop) ===== */
@media (hover: hover) and (pointer: fine){
  .waFloat__wrap:hover .waFloat__label{
    opacity: .95;
    transform: translateX(0);
  }
}

/* Mobile: hide label always */
@media (max-width: 760px){
  .waFloat{
    right: 12px;
    bottom: 12px;
  }

  .waFloat__label{
    display: none;
  }
}


/* =========================================
   INSIGHT SINGLE · WP Blocks Fix
   - Images: no stretch, same look as main media
   - YouTube embeds: responsive 16:9, no distortion
   ========================================= */

/* 1) IMÁGENES DENTRO DEL CONTENIDO (WP) */
.page-insight-single .insSingle__text .wp-block-image,
.page-insight-single .insSingle__text figure{
  margin: 24px 0;
}

.page-insight-single .insSingle__text .wp-block-image img,
.page-insight-single .insSingle__text figure img{
  display:block;
  width:100% !important;
  height:auto !important;          /* ✅ clave: evita estiramiento */
  max-width:100%;
  object-fit:contain !important;   /* ✅ si había cover global, lo pisa */
}

/* caption WP */
.page-insight-single .insSingle__text figcaption{
  margin-top:8px;
  font-size:13px;
  opacity:.75;
}

/* 2) YOUTUBE EMBED (WP) — 16:9 real, sin deformar */
.page-insight-single .insSingle__text .wp-block-embed{
  margin: 26px 0;
}

.page-insight-single .insSingle__text .wp-block-embed__wrapper{
  position:relative;
  padding-top:56.25%;      /* 16:9 */
  height:0;
  overflow:hidden;
  border-radius:18px;
}

/* El iframe se “pega” al wrapper */
.page-insight-single .insSingle__text .wp-block-embed__wrapper iframe{
  position:absolute;
  top:0; left:0;
  width:100% !important;
  height:100% !important;
  border:0;
  display:block;
}

/* (Opcional) si WP mete <video> o <embed> */
.page-insight-single .insSingle__text .wp-block-embed__wrapper video,
.page-insight-single .insSingle__text .wp-block-embed__wrapper embed,
.page-insight-single .insSingle__text .wp-block-embed__wrapper object{
  position:absolute;
  top:0; left:0;
  width:100% !important;
  height:100% !important;
}

/* =========================
   INSIGHT · SINGLE (SECTION)
   - Layout + Gutenberg styling (editorial)
========================= */

.insSingle{
  background:#fff;
  font-family:"Open Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:#0b0b0c;
  padding-top:75px;
}
.insSingle,
.insSingle *{ box-sizing:border-box; }

.insSingle__wrap{
  max-width:980px;
  margin:0 auto;
  padding:92px 20px 50px;
}

/* Back */
.backToInsights{
  margin-bottom:28px;
  display:inline-flex;
}
.insSingle__back{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  font-size:12px;
  color:rgba(11,11,12,.65);
  margin-bottom:34px;
}
.insSingle__backDot{
  width:14px;
  height:14px;
  border-radius:999px;
  background:#2b3b3a;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.insSingle__back:hover{ color:rgba(11,11,12,.85); }

/* Header text */
.insSingle__head{ max-width:860px; }
.insSingle__title{
  margin:0 0 18px;
  font-weight:400;
  line-height:1.08;
  letter-spacing:-0.02em;
  font-size:clamp(40px,4.2vw,50px);
  color:rgba(11,11,12,.92);
}
.insSingle__intro{
  margin:0 0 14px;
  max-width:690px;
  font-size:15px;
  line-height:1.8;
  color:rgba(11,11,12,.62);
}
.insSingle__date{
  display:inline-block;
  margin-top:6px;
  font-size:10px;
  font-style:italic;
  font-weight:600;
  color:rgba(11,11,12,.85);
}

/* Featured Media (la primera imagen del post/featured) */
.insSingle__media{
  margin:54px 0 0;
  display:flex;
  justify-content:center;
  flex-direction:column;
  align-items:center;
}
.insSingle__media img{
  width:min(100%,640px);
  height:auto;
  display:block;
  border-radius:0;
}

/* =========================================================
   GUTENBERG BODY
   - Todo lo que venga dentro del contenido WP
   - Mantiene tu look: columna editorial + línea vertical
========================================================= */

/* Contenedor del body:
   soporta 3 variantes (por si tu JS/HTML usa otra):
   1) .insSingle__body (recomendado)
   2) [data-w-body] (tu hook)
   3) .entry-content (típico WP)
*/
.insSingle__body,
.insSingle [data-w-body],
.insSingle .entry-content{
  max-width:720px;
  margin:38px auto 0;
  padding-left:24px;
  border-left:2px solid rgba(116,157,153,.35);
}

/* Espaciado “ritmo editorial” entre bloques */
.insSingle__body > *:first-child,
.insSingle [data-w-body] > *:first-child,
.insSingle .entry-content > *:first-child{
  margin-top:0;
}
.insSingle__body > * + *,
.insSingle [data-w-body] > * + *,
.insSingle .entry-content > * + *{
  margin-top:16px;
}

/* Párrafos */
.insSingle__body p,
.insSingle [data-w-body] p,
.insSingle .entry-content p{
  margin:0;
  font-size:13px;
  line-height:2.05;
  color:rgba(11,11,12,.60);
}

/* Headings dentro del contenido (subtítulos) */
.insSingle__body h2,
.insSingle [data-w-body] h2,
.insSingle .entry-content h2{
  margin:28px 0 10px;
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.15;
  font-size:clamp(22px,2.2vw,30px);
  color:rgba(11,11,12,.92);
}
.insSingle__body h3,
.insSingle [data-w-body] h3,
.insSingle .entry-content h3{
  margin:22px 0 10px;
  font-weight:700;
  letter-spacing:-0.015em;
  line-height:1.18;
  font-size:clamp(18px,1.7vw,22px);
  color:rgba(11,11,12,.92);
}

/* Listas (bullets / numbering) */
.insSingle__body ul,
.insSingle [data-w-body] ul,
.insSingle .entry-content ul,
.insSingle__body ol,
.insSingle [data-w-body] ol,
.insSingle .entry-content ol{
  margin:0;
  padding-left:22px; /* sangría prolija */
}
.insSingle__body li,
.insSingle [data-w-body] li,
.insSingle .entry-content li{
  font-size:13px;
  line-height:2.0;
  color:rgba(11,11,12,.60);
}
.insSingle__body li + li,
.insSingle [data-w-body] li + li,
.insSingle .entry-content li + li{
  margin-top:6px;
}

/* Negritas / links */
.insSingle__body strong,
.insSingle [data-w-body] strong,
.insSingle .entry-content strong{
  font-weight:700;
  color:rgba(11,11,12,.78);
}
.insSingle__body a,
.insSingle [data-w-body] a,
.insSingle .entry-content a{
  color:rgba(11,11,12,.80);
  text-underline-offset:3px;
}

/* =========================================================
   Imágenes dentro del contenido WP
   - Corrige distorsión y hace que se vean como la “de arriba”
========================================================= */

/* Bloques de imagen de Gutenberg */
.insSingle__body figure.wp-block-image,
.insSingle [data-w-body] figure.wp-block-image,
.insSingle .entry-content figure.wp-block-image{
  margin:28px 0;                 /* aire como editorial */
  padding:0;
  border-left:0;                 /* importante: evita doble línea */
}

/* Imagen en sí */
.insSingle__body figure.wp-block-image img,
.insSingle [data-w-body] figure.wp-block-image img,
.insSingle .entry-content figure.wp-block-image img{
  width:100%;
  max-width:640px;               /* igual que tu “featured” */
  height:auto !important;
  display:block;
  margin:0 auto;
  border-radius:0;
  object-fit:contain;            /* evita “aplastado” */
}

/* Captions */
.insSingle__body figcaption,
.insSingle [data-w-body] figcaption,
.insSingle .entry-content figcaption{
  margin-top:10px;
  font-size:11px;
  line-height:1.6;
  color:rgba(11,11,12,.48);
  text-align:center;
}

/* Si el editor mete <img> suelta sin figure */
.insSingle__body img,
.insSingle [data-w-body] img,
.insSingle .entry-content img{
  max-width:100%;
  height:auto !important;
}

/* =========================================================
   YouTube / Embeds dentro del contenido
   - Mismo ancho visual que la imagen (640px)
   - No se deforma
========================================================= */

.insSingle__body figure.wp-block-embed,
.insSingle [data-w-body] figure.wp-block-embed,
.insSingle .entry-content figure.wp-block-embed{
  margin:28px 0;
  border-left:0;
  padding:0;
}

/* Wrapper responsive (Gutenberg usa wp-block-embed__wrapper) */
.insSingle__body .wp-block-embed__wrapper,
.insSingle [data-w-body] .wp-block-embed__wrapper,
.insSingle .entry-content .wp-block-embed__wrapper{
  width:100%;
  max-width:640px;
  margin:0 auto;
  aspect-ratio:16/9;
  position:relative;
  overflow:hidden;
  background:#0b0b0c; /* evita “flash” blanco */
}

/* El iframe adentro */
.insSingle__body .wp-block-embed__wrapper iframe,
.insSingle [data-w-body] .wp-block-embed__wrapper iframe,
.insSingle .entry-content .wp-block-embed__wrapper iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* También por si WP mete iframe directo */
.insSingle__body iframe,
.insSingle [data-w-body] iframe,
.insSingle .entry-content iframe{
  width:100%;
  max-width:640px;
  display:block;
  margin:0 auto;
  border:0;
}

/* Quote (si lo usan) */
.insSingle__body blockquote,
.insSingle [data-w-body] blockquote,
.insSingle .entry-content blockquote{
  margin:22px 0;
  padding:14px 16px;
  border-left:3px solid rgba(116,157,153,.45);
  background:rgba(116,157,153,.06);
  color:rgba(11,11,12,.70);
}
.insSingle__body blockquote p,
.insSingle [data-w-body] blockquote p,
.insSingle .entry-content blockquote p{
  font-size:13px;
  line-height:1.9;
  color:rgba(11,11,12,.70);
}

/* Author */
.insSingle__author{
  max-width:720px;
  margin:34px auto 0;
  font-size:10px;
  color:rgba(11,11,12,.55);
}
.insSingle__author strong{ font-weight:700; }

/* Responsive */
@media (max-width:720px){
  .insSingle__wrap{ padding:72px 18px 35px; }
  .insSingle__intro{ max-width:100%; }

  .insSingle__media img{ width:100%; }

  .insSingle__body,
  .insSingle [data-w-body],
  .insSingle .entry-content{
    padding-left:18px;
  }

  .insSingle__body p,
  .insSingle [data-w-body] p,
  .insSingle .entry-content p,
  .insSingle__author{
    font-size:12px;
    line-height:1.8;
  }
}

/* =========================================================
   INSIGHT SINGLE · GUTENBERG MAPPING
   - Convierte bloques WP a tu estética editorial
   - Scope: solo dentro de .insSingle [data-w-body]
========================================================= */

/* 1) SUBTÍTULOS (Heading block) → look .insSingle__sub */
.page-insight-single #insight-content h2,
.page-insight-single #insight-content .wp-block-heading:is(h2){
  margin: 42px 0 18px;  /* 👈 aumentamos el bottom */
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(11,11,12,.82);
}

.page-insight-single .insSingle [data-w-body] h3,
.page-insight-single .insSingle [data-w-body] .wp-block-heading:is(h3){
  max-width: 720px;
  margin: 28px auto 0;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(11,11,12,.82);
}


/* 2) CAPTIONS (figcaption) → look .insSingle__caption */
.page-insight-single .insSingle [data-w-body] figcaption{
  width: min(100%, 640px);
  margin: 10px auto 0;
  font-size: 11px;
  line-height: 1.6;
  color: rgba(11,11,12,.55);
  font-style: italic;
  text-align: center;
}


/* 3) QUOTES (Quote block) → look .insSingle__quote */
.page-insight-single .insSingle [data-w-body] blockquote{
  max-width: 720px;
  margin: 30px auto 0;
  padding: 18px 18px 18px 24px;
  border-left: 3px solid rgba(116,157,153,.55);
  background: rgba(11,14,19,.03);
}

.page-insight-single .insSingle [data-w-body] blockquote p{
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.9;
  color: rgba(11,11,12,.72);
}

/* Gutenberg a veces mete <cite> o <footer> */
.page-insight-single .insSingle [data-w-body] blockquote cite,
.page-insight-single .insSingle [data-w-body] blockquote footer{
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: rgba(11,11,12,.55);
}


/* 4) LISTAS (List block) → bullets editoriales con dot verde */
.page-insight-single .insSingle [data-w-body] ul,
.page-insight-single .insSingle [data-w-body] ol{
  max-width: 720px;
  margin: 18px auto 0;
  padding-left: 22px;
}

.page-insight-single .insSingle [data-w-body] ul{
  list-style: none; /* ✅ reemplazamos bullet nativo */
}

.page-insight-single .insSingle [data-w-body] ul li{
  position: relative;
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.9;
  color: rgba(11,11,12,.62);
}

/* Bullet custom (sutil, editorial) */
.page-insight-single .insSingle [data-w-body] ul li::before{
  content: "";
  position: absolute;
  left: -18px;
  top: 0.75em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #749D99;
  opacity: .85;
}

/* Para listas numeradas, mantenemos números */
.page-insight-single .insSingle [data-w-body] ol{
  list-style: decimal;
}

.page-insight-single .insSingle [data-w-body] ol li{
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.9;
  color: rgba(11,11,12,.62);
}


/* 5) (Opcional) “Company list” estilo (si lo armas con ul + bold + salto de línea) */
.page-insight-single .insSingle [data-w-body] ul.is-style-companies li{
  margin-bottom: 26px;
}

.page-insight-single .insSingle [data-w-body] ul.is-style-companies li strong{
  display: block;
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(11,11,12,.85);
}

/* =========================
   INSIGHT · BLOCKQUOTE (Editorial)
========================= */

.page-insight-single #insight-content blockquote{
  margin: 30px 0;
  padding: 22px 24px;
  border-left: 3px solid rgba(116,157,153,.55);
  background: rgba(11,14,19,.04);
}

.page-insight-single #insight-content blockquote p{
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.9;
  color: rgba(11,11,12,.75);
}

.page-insight-single #insight-content blockquote cite{
  display: block;
  font-size: 12px;
  font-style: italic;
  color: rgba(11,11,12,.55);
}

/* =========================================================
   CMS PAGINATION — HARD OVERRIDE (no JS changes)
   Works with current markup:
   <nav class="relInsights__pagination" data-cms-pagination="...">
     <a class="relPg relPg--prev">Previous</a>
     <a class="relPg is-active">1</a>
     <a class="relPg">2</a>
     <a class="relPg relPg--next">Next</a>
   </nav>
========================================================= */

nav.relInsights__pagination[data-cms-pagination]{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap: 18px !important;
  margin-top: 46px !important;
  font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}

/* Base link reset (mata estilos viejos) */
nav.relInsights__pagination[data-cms-pagination] .relPg{
  display:inline-flex !important;
  align-items:center !important;
  gap: 12px !important;

  font-size: 12px !important;
  line-height: 1 !important;
  text-decoration:none !important;

  color: rgba(11,11,12,.7) !important;
  background: none !important;

  padding: 0 !important;
  border-radius: 0 !important;
  height: auto !important;

  box-shadow: none !important;
  transition: color .18s ease !important;
}

nav.relInsights__pagination[data-cms-pagination] .relPg:hover{
  color: rgba(11,11,12,.9) !important;
}

/* =========================
   PREV / NEXT (circle arrow + text)
========================= */

nav.relInsights__pagination[data-cms-pagination] .relPg--prev,
nav.relInsights__pagination[data-cms-pagination] .relPg--next{
  white-space: nowrap !important;
}

/* Circle */
nav.relInsights__pagination[data-cms-pagination] .relPg--prev::before,
nav.relInsights__pagination[data-cms-pagination] .relPg--next::after{
  content:"" !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 999px !important;
  background: #2b3b3a !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  box-shadow: 0 18px 40px rgba(0,0,0,.18) !important;
  transition: transform .2s ease, background .2s ease !important;
}

/* Arrow glyph inside circle */
nav.relInsights__pagination[data-cms-pagination] .relPg--prev::before{
  content:"‹" !important;
  color:#fff !important;
  font-size: 20px !important;
  transform: translateY(-1px) !important;
}

nav.relInsights__pagination[data-cms-pagination] .relPg--next::after{
  content:"›" !important;
  color:#fff !important;
  font-size: 20px !important;
  transform: translateY(-1px) !important;
}

/* Hover motion */
nav.relInsights__pagination[data-cms-pagination] .relPg--prev:hover::before{
  background:#1f2d2b !important;
  transform: translateX(-2px) translateY(-1px) !important;
}

nav.relInsights__pagination[data-cms-pagination] .relPg--next:hover::after{
  background:#1f2d2b !important;
  transform: translateX(2px) translateY(-1px) !important;
}

/* =========================
   PAGE NUMBERS (any relPg that is NOT prev/next)
========================= */

nav.relInsights__pagination[data-cms-pagination] .relPg:not(.relPg--prev):not(.relPg--next){
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  font-size: 14px !important;
  color: rgba(11,11,12,.7) !important;
  transition: background .18s ease, color .18s ease !important;
}

nav.relInsights__pagination[data-cms-pagination] .relPg:not(.relPg--prev):not(.relPg--next):hover{
  background: rgba(11,11,12,.06) !important;
  color: rgba(11,11,12,.9) !important;
}

nav.relInsights__pagination[data-cms-pagination] .relPg.is-active{
  background: rgba(116,157,153,.18) !important;
  color: rgba(11,11,12,.9) !important;
}

/* Mobile */
@media (max-width: 640px){
  nav.relInsights__pagination[data-cms-pagination]{
    gap: 6px !important;
    flex-wrap: wrap !important;
  }
}

nav.relInsights__pagination[data-cms-pagination]{
  margin-bottom: clamp(60px, 6vw, 90px) !important;
}