/* ============================================================
   McSpot · sistema de diseño
   Colores de marca de siempre. Estructura y ritmo nuevos:
   página a sangre con márgenes fluidos, rejilla de 12, filetes
   de 1px como separación y tipografía de display grande.
   ============================================================ */

/* El atributo hidden tiene que ganar SIEMPRE. Sin esto, cualquier clase con
   display (.post lleva display:flex) lo anula sin dar ningún error: el elemento
   sigue a la vista y parece que el JavaScript no funciona. Fue lo que dejó
   muerto el filtro de categorías del blog, y antes la pantalla del panel. */
[hidden]{ display:none !important; }

:root{
  color-scheme: light;

  /* --- marca (sin cambios) --- */
  --bg:        #FFFFFF;
  --bg-soft:   #F6F7FA;
  --ink:       #0A0D14;
  --ink-2:     #3D4453;
  --ink-3:     #79808F;
  --line:      #E4E7EE;
  /* Para rejillas que tienen que leerse como rejilla: tablas del blog. */
  --line-2:    #C9CEDB;
  --bg-soft2:  #EEF0F5;
  --line-soft: #EFF1F6;

  --blue:      #2E56F5;
  --blue-2:    #1E40D8;
  --blue-soft: #EDF1FE;
  --navy-a:    #0B1424;
  --navy-b:    #163468;

  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* --- layout ---
     La página va a sangre con margen fluido: así se llena en portátil
     en vez de quedarse en una columna estrecha en medio. El tope alto
     es solo para pantallas enormes. */
  --mx:   clamp(20px, 5vw, 104px);
  --maxw: 1720px;
  --nav:  74px;

  --gap:  clamp(12px, 1.6vw, 28px);
  --sec:  clamp(72px, 8.4vw, 148px);
  --sec-s:clamp(52px, 5.6vw, 92px);

  --ease: cubic-bezier(.16,1,.3,1);
  --ease2:cubic-bezier(.7,0,.2,1);

  --r-btn:  11px;
  --r-in:   10px;
  --r-card: 14px;
  --r-pill: 999px;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.58; font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; }
::selection{ background:var(--blue); color:#fff; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:6px; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--mx); }
.sec{ padding-block:var(--sec); }
.sec--s{ padding-block:var(--sec-s); }
.sec--top{ border-top:1px solid var(--line); }
/* primera sección de la página cuando no hay cabecera: deja sitio a la nav fija */
.sec--nav{ padding-top:var(--nav); }
.sec--bot{ border-bottom:1px solid var(--line); }
.soft{ background:var(--bg-soft); }

/* rejilla de 12 con carril fijo a la izquierda */
.eg{ display:grid; grid-template-columns:repeat(12,1fr); column-gap:var(--gap); }
.eg > .rail{ grid-column:1 / 5; align-self:start; position:sticky; top:calc(var(--nav) + 28px); }
.eg > .col{ grid-column:6 / 13; }
.eg > .col--wide{ grid-column:5 / 13; }
.eg > .full{ grid-column:1 / -1; }

/* ---------- tipografía ---------- */
h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-0.035em; text-wrap:balance; line-height:1.0; }
h1{ font-size:clamp(2.6rem, 5.6vw, 5.4rem); line-height:0.94; letter-spacing:-0.042em; }
h2{ font-size:clamp(2rem, 3.9vw, 3.5rem); line-height:0.98; letter-spacing:-0.038em; }
h3{ font-size:1.28rem; line-height:1.25; letter-spacing:-0.024em; }
h4{ font-size:1.06rem; line-height:1.3; letter-spacing:-0.02em; }
p{ margin:0; }
em{ font-style:normal; color:var(--blue); }

.lead{ font-size:clamp(1.08rem, 1.32vw, 1.34rem); line-height:1.5; color:var(--ink-2); letter-spacing:-0.014em; max-width:56ch; }
.body{ color:var(--ink-2); max-width:62ch; }
.small{ font-size:0.92rem; color:var(--ink-3); }
.note{ font-size:0.94rem; color:#5F6778; line-height:1.55; max-width:76ch; }
.hl{ color:var(--blue); }

/* utilidades de ritmo: evitan estilos sueltos dentro del HTML */
.mt  { margin-top:clamp(38px,4.4vw,68px); }
.mt-s{ margin-top:clamp(22px,2.4vw,34px); }
.mt-l{ margin-top:clamp(48px,5.6vw,88px); }
.end { align-self:end; }
.cta-row{ display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center; }

/* índice numérico de sección: es numeración, no un titulillo */
.ix{
  font-weight:600; font-size:clamp(2.4rem,4vw,4rem);
  line-height:0.8; letter-spacing:-0.05em; color:var(--line);
  display:block; margin-bottom:18px;
}
.ix--blue{ color:var(--blue); }

/* revelados */
.rv{ opacity:0; transform:translateY(18px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.rv.is-in{ opacity:1; transform:none; }
.ln{ display:block; overflow:hidden; }
.ln > span{ display:block; transform:translateY(105%); transition:transform .95s var(--ease); }
.ln.is-in > span{ transform:none; }

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
  padding:14px 22px; border-radius:var(--r-btn);
  background:var(--blue); color:#fff; border:1px solid var(--blue);
  font-size:0.97rem; font-weight:500; letter-spacing:-0.012em; cursor:pointer;
  transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.btn:hover{ background:var(--blue-2); border-color:var(--blue-2); }
.btn:active{ transform:translateY(1px); }
.btn__arrow{ display:inline-block; transition:transform .4s var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(4px); }
.btn--sm{ padding:10px 16px; font-size:0.92rem; }
.btn--lg{ padding:17px 28px; font-size:1.02rem; }
.btn--full{ width:100%; justify-content:center; }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ background:transparent; color:var(--blue); border-color:var(--blue); }
.btn--light{ background:#fff; color:var(--navy-a); border-color:#fff; }
.btn--light:hover{ background:var(--blue); border-color:var(--blue); color:#fff; }
.btn--onnavy{ background:transparent; color:#fff; border-color:rgba(255,255,255,.36); }
.btn--onnavy:hover{ background:#fff; color:var(--navy-a); border-color:#fff; }

/* enlace con filete */
.lnk{
  display:inline-flex; align-items:center; gap:9px; font-weight:500; font-size:1rem;
  color:var(--ink); padding-bottom:5px; position:relative; letter-spacing:-0.015em;
}
.lnk::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--ink); transition:background .3s ease;
}
.lnk:hover{ color:var(--blue); }
.lnk:hover::after{ background:var(--blue); }
.lnk span{ transition:transform .4s var(--ease); }
.lnk:hover span{ transform:translateX(4px); }
.lnk--light{ color:#fff; }
.lnk--light::after{ background:rgba(255,255,255,.4); }
.lnk--light:hover{ color:#fff; }
.lnk--light:hover::after{ background:#fff; }

/* ---------- nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:70;
  background:rgba(255,255,255,.86); backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background .3s ease, transform .45s var(--ease);
}
.nav.is-stuck{ border-bottom-color:var(--line); }
.nav.is-over{ background:transparent; backdrop-filter:none; border-bottom-color:transparent; }
.nav.is-over .nav__links > a,
.nav.is-over .nav__svc > button{ color:#fff; }
/* El logo ya no se invierte con un filtro: el símbolo lleva color propio y
   brightness(0) se lo comería. Sobre fondo oscuro se cambia el fichero. */
.nav.is-over .brand img{ content:url("img/logo-claro.svg"); }
.nav.is-over .nav__cta{ background:transparent; color:#fff; border-color:rgba(255,255,255,.45); }
.nav.is-over .nav__cta:hover{ background:#fff; color:var(--navy-a); border-color:#fff; }
.nav.is-over .nav__toggle{ color:#fff; }
.nav.is-open{ background:#fff; backdrop-filter:none; }
.nav.is-open .nav__toggle{ color:var(--ink); }
.nav.is-open .brand img{ content:url("img/logo.svg"); }   /* menú móvil: fondo blanco */

.nav__in{ display:flex; align-items:center; justify-content:space-between; gap:22px; height:var(--nav); }
.brand{ display:flex; align-items:center; flex:none; }
.brand img{ height:25px; width:auto; }

.nav__links{ display:flex; align-items:center; gap:clamp(18px,2.1vw,32px); margin-left:auto; margin-right:clamp(18px,2.4vw,38px); }
.nav__links .nav__cta{ display:none; }   /* solo aparece dentro del cajón móvil */
.nav__links > a,
.nav__svc > button{
  font-size:0.95rem; font-weight:450; color:var(--ink-2); letter-spacing:-0.012em;
  background:none; border:0; padding:0; cursor:pointer; position:relative;
  transition:color .25s ease;
}
.nav__links > a::after,
.nav__svc > button::after{
  content:""; position:absolute; left:0; bottom:-5px; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav__links > a:hover,
.nav__svc > button:hover{ color:var(--ink); }
.nav.is-over .nav__links > a:hover,
.nav.is-over .nav__svc > button:hover{ color:#fff; }
.nav__links > a:hover::after,
.nav__svc > button:hover::after,
.nav__links > a.is-here::after{ transform:scaleX(1); transform-origin:left; }

/* desplegable de servicios */
.nav__svc{ position:relative; }
.nav__svc > button{ display:inline-flex; align-items:center; gap:7px; }
.nav__svc > button i{
  width:7px; height:7px; display:block; flex:none;
  border-right:1.4px solid currentColor; border-bottom:1.4px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px); transition:transform .35s var(--ease);
}
.nav__svc.is-open > button i{ transform:rotate(-135deg) translate(-2px,-2px); }
.mega{
  position:absolute; top:calc(100% + 20px); left:50%; transform:translateX(-50%) translateY(-8px);
  width:min(660px, calc(100vw - var(--mx) * 2));
  background:#fff; border:1px solid var(--line); border-radius:var(--r-card);
  box-shadow:0 34px 80px -40px rgba(10,13,20,.4);
  padding:10px; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s var(--ease), transform .38s var(--ease), visibility .3s;
}
.nav__svc.is-open .mega{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%); }
.mega{ width:min(400px, calc(100vw - var(--mx) * 2)); }
.mega__i{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 18px; border-radius:10px; transition:background .28s var(--ease);
}
.mega__i:hover{ background:var(--bg-soft); }
.mega__n{ font-family:var(--mono); font-size:0.76rem; color:var(--blue); padding-top:3px; }
.mega__i h4{ color:var(--ink); }
.mega__i p{ grid-column:2 / 4; font-size:0.92rem; color:var(--ink-3); line-height:1.45; }
.mega__go{ color:var(--ink-3); transition:transform .35s var(--ease), color .3s ease; }
.mega__i:hover .mega__go{ color:var(--blue); transform:translateX(4px); }
.mega__foot{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-top:6px; padding:14px 18px; border-top:1px solid var(--line);
  font-size:0.92rem; color:var(--ink-3);
}
.mega__foot a{ color:var(--blue); font-weight:500; }

.nav__toggle{
  display:none; width:44px; height:44px; margin-right:-10px;
  align-items:center; justify-content:center;
  background:none; border:0; padding:0; cursor:pointer; color:var(--ink);
}
.nav__toggle i{ display:block; width:22px; height:1.5px; background:currentColor; position:relative; transition:background .2s ease; }
.nav__toggle i::before, .nav__toggle i::after{
  content:""; position:absolute; left:0; width:22px; height:1.5px; background:currentColor;
  transition:transform .35s var(--ease), top .35s var(--ease);
}
.nav__toggle i::before{ top:-7px; }
.nav__toggle i::after{ top:7px; }
.nav.is-open .nav__toggle i{ background:transparent; }
.nav.is-open .nav__toggle i::before{ top:0; transform:rotate(45deg); }
.nav.is-open .nav__toggle i::after{ top:0; transform:rotate(-45deg); }

/* ---------- entrada de la web ----------
   Aparece en cada carga de página: al pulsar un enlace interno la cortina
   sube desde abajo (is-under → is-back), se navega, y en la página nueva
   se retira hacia arriba (is-out). Así cada cambio de sección tiene el
   mismo corte con el logo. */
.load{
  position:fixed; inset:0; z-index:999; background:var(--navy-a);
  display:grid; place-items:center;
  transition:transform .85s var(--ease2), opacity .6s ease .2s;
}
.load::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(70% 90% at 50% 50%, rgba(46,86,245,.28), transparent 65%);
}
.load__in{ position:relative; z-index:1; display:grid; justify-items:center; gap:24px; }
.load__mk{ overflow:hidden; }
.load__mk img{
  height:clamp(30px,3.4vw,44px); width:auto; content:url("img/logo-claro.svg");
  transform:translateY(105%); animation:logoSube .9s var(--ease) .1s forwards;
}
@keyframes logoSube{ to{ transform:none; } }
.load__bar{ display:block; width:clamp(120px,14vw,190px); height:1px; background:rgba(255,255,255,.22); overflow:hidden; }
.load__bar i{ display:block; height:100%; width:0; background:#fff; animation:barra 1.15s var(--ease) .18s forwards; }
@keyframes barra{ to{ width:100%; } }
.load.is-out{ transform:translateY(-101%); pointer-events:none; }
/* salida hacia la página siguiente: la dejamos debajo sin transición y la subimos */
.load.is-under{ transform:translateY(101%); transition:none; }
.load.is-back{ transform:none; transition:transform .5s var(--ease2); }
html[data-load="off"] .load{ display:none; }
html:not([data-load="off"]) body{ overflow:hidden; }
html:not([data-load="off"]) .hero__in > *,
html:not([data-load="off"]) .phead__in > *{ visibility:hidden; }
html.load-done body{ overflow:visible; }
html.load-done .hero__in > *,
html.load-done .phead__in > *{ visibility:visible; }
@media (prefers-reduced-motion:reduce){
  .load{ display:none; }
  html:not([data-load="off"]) body{ overflow:visible; }
  html:not([data-load="off"]) .hero__in > *,
  html:not([data-load="off"]) .phead__in > *{ visibility:visible; }
}

/* ---------- banner ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:flex-end; overflow:hidden; background:var(--navy-a);
}
.hero__media{ position:absolute; inset:-4% 0; z-index:0; }
.hero__media canvas,
.hero__vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero__vid{ opacity:0; transition:opacity 1.1s ease; }
.hero__vid.is-on{ opacity:1; }
.hero__vid.is-off{ display:none; }
.hero__veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(11,20,36,.74) 0%, rgba(11,20,36,.2) 32%, rgba(11,20,36,.6) 74%, rgba(11,20,36,.92) 100%),
    radial-gradient(120% 80% at 78% 20%, rgba(46,86,245,.24), transparent 62%);
}
/* El titular vive en el tercio alto: antes el .hero__top lo empujaba hasta
   el fondo con margin-bottom:auto y quedaba descolgado. Ahora el hueco
   elástico está debajo, entre el H1 y el pie del banner. */
.hero__in{ position:relative; z-index:2; padding-bottom:clamp(64px,9vh,120px); padding-top:calc(var(--nav) + clamp(28px,5vh,64px)); flex:1; display:flex; flex-direction:column; }
.hero__top{ margin-bottom:clamp(20px,4vh,52px); }
.hero h1{ color:#fff; max-width:15ch; }
.hero h1 em{ color:#8FA8FF; }
.hero__foot{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(24px,3vw,64px);
  align-items:end; margin-top:auto;
  padding-top:clamp(22px,2.6vh,32px); border-top:1px solid rgba(255,255,255,.22);
}
.hero__lead{ font-size:clamp(1.02rem,1.22vw,1.22rem); line-height:1.5; color:rgba(255,255,255,.78); max-width:52ch; letter-spacing:-0.012em; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-end; }
.hero__meta{
  position:absolute; z-index:2; left:var(--mx); right:var(--mx); bottom:0;
  display:flex; justify-content:space-between; align-items:center; gap:18px;
  padding-bottom:16px; font-family:var(--mono); font-size:0.7rem; letter-spacing:0.09em;
  text-transform:uppercase; color:rgba(255,255,255,.5);
}
.hero__scroll{ display:inline-flex; align-items:center; gap:9px; }
.hero__scroll::after{
  content:""; width:1px; height:18px; background:rgba(255,255,255,.5);
  animation:drop 2s var(--ease2) infinite;
}
@keyframes drop{
  0%{ transform:scaleY(0); transform-origin:top; }
  45%{ transform:scaleY(1); transform-origin:top; }
  55%{ transform:scaleY(1); transform-origin:bottom; }
  100%{ transform:scaleY(0); transform-origin:bottom; }
}

/* cabecera de página interior */
.phead{
  position:relative; background:var(--navy-a); color:#fff; overflow:hidden;
  padding-top:calc(var(--nav) + clamp(56px,7vw,110px)); padding-bottom:clamp(52px,6vw,96px);
}
.phead canvas{ position:absolute; inset:0; width:100%; height:100%; }
.phead__veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,20,36,.84), rgba(11,20,36,.5) 55%, rgba(11,20,36,.94));
}
.phead__in{ position:relative; z-index:2; }
.phead h1{ color:#fff; max-width:15ch; }
.phead .lead{ color:rgba(255,255,255,.78); margin-top:clamp(22px,2.6vw,32px); }
.phead__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(28px,3.2vw,40px); }
.back{
  display:inline-flex; align-items:center; gap:8px; font-size:0.92rem;
  color:rgba(255,255,255,.6); margin-bottom:clamp(22px,2.6vw,34px); transition:color .25s ease;
}
.back:hover{ color:#fff; }
.dark .back{ color:rgba(255,255,255,.6); }
.dark .back:hover{ color:#fff; }
.phead--light{ background:var(--bg-soft); color:var(--ink); border-bottom:1px solid var(--line); }
.phead--light .phead__veil{ display:none; }
.phead--light h1{ color:var(--ink); }
.phead--light .lead{ color:var(--ink-2); }
.phead--light .back{ color:var(--ink-3); }
.phead--light .back:hover{ color:var(--ink); }

/* ---------- bloques oscuros ---------- */
.dark{ position:relative; background:var(--navy-a); color:#fff; overflow:hidden; }
.dark::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(90% 120% at 12% 0%, rgba(46,86,245,.26), transparent 58%),
    radial-gradient(70% 90% at 92% 100%, rgba(22,52,104,.6), transparent 60%);
}
.dark::after{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.13) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 0%, #000, transparent 72%);
  mask-image:radial-gradient(120% 100% at 50% 0%, #000, transparent 72%);
}
.dark > *{ position:relative; z-index:1; }
.dark .lead, .dark .body{ color:rgba(255,255,255,.74); }
.dark .note{ color:rgba(255,255,255,.5); }
.dark .ix{ color:rgba(255,255,255,.22); }
.dark h1, .dark h2, .dark h3, .dark h4{ color:#fff; }
.dark em{ color:#8FA8FF; }

.statement{
  font-size:clamp(1.9rem,3.7vw,3.4rem); font-weight:600;
  letter-spacing:-0.038em; line-height:1.02; max-width:19ch;
}
.statement--sm{ font-size:clamp(1.5rem,2.6vw,2.4rem); max-width:26ch; line-height:1.1; }
.h-sm{ font-size:clamp(1.44rem,2.1vw,2.05rem); }

/* cabecera de sección a dos columnas: el titular a la izquierda y el
   párrafo a la derecha. Aprovecha el ancho de la página en vez de
   apilarlo todo en el centro. */
.cab{
  display:grid; grid-template-columns:1.06fr 0.94fr;
  gap:clamp(20px,3.4vw,72px); align-items:end;
}
.cab h2, .cab .statement{ max-width:17ch; }
.cab--ancha h2, .cab--ancha .statement{ max-width:22ch; }
.cab .lead, .cab .body{ max-width:52ch; padding-bottom:4px; }
.cab--solo{ grid-template-columns:1fr; }
.cab--solo h2, .cab--solo .statement{ max-width:24ch; }
/* Las dos columnas van alineadas por abajo, que es lo que queda bien cuando el
   título y el texto miden parecido. Cuando el texto es bastante más largo, el
   título se hunde: para esos casos, alineación por arriba. */
.cab--arriba{ align-items:start; }
.cab--arriba .lead, .cab--arriba .body{ padding-bottom:0; }

/* cabecera centrada: se conserva para el blog, la FAQ y los legales */
.cab-c{ text-align:center; }
.cab-c h2, .cab-c .statement, .cab-c h1{ max-width:none; }
.cab-c .lead, .cab-c .body, .cab-c .note{ margin-inline:auto; max-width:62ch; }
/* cabecera centrada y sin bajada: el titular no se estira a todo el ancho */
.cab--solo.cab-c h2, .cab--solo.cab-c .statement{ max-width:24ch; margin-inline:auto; }
.cta-c{ display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center; }

@media (max-width:900px){
  .cab{ grid-template-columns:1fr; align-items:start; gap:20px; }
  .cab h2, .cab .statement, .cab--ancha h2{ max-width:20ch; }
}

/* ---------- tarjetas ---------- */
.cards{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; }
.cards--2{ grid-template-columns:repeat(2,1fr); }
.cards--3{ grid-template-columns:repeat(3,1fr); }
.cards--4{ grid-template-columns:repeat(4,1fr); }
.card{
  position:relative; background:var(--bg); padding:clamp(26px,2.5vw,38px);
  display:flex; flex-direction:column; gap:12px; transition:background .35s var(--ease);
}
.card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--blue);
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease);
}
.card:hover{ background:var(--bg-soft); }
.card:hover::before{ transform:scaleX(1); }
.card p{ color:var(--ink-2); font-size:0.99rem; }
.card__n{ font-family:var(--mono); font-size:0.76rem; color:var(--blue); letter-spacing:0.06em; }
.dark .cards{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.16); }
.dark .card{ background:transparent; }
.dark .card:hover{ background:rgba(255,255,255,.05); }
.dark .card p{ color:rgba(255,255,255,.72); }

.ico{
  display:inline-flex; width:38px; height:38px; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:10px; color:var(--blue); margin-bottom:4px; flex:none;
}
.ico svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.dark .ico{ border-color:rgba(255,255,255,.22); color:#8FA8FF; }

/* ---------- bloques de servicio ---------- */
.svcs{ border-top:1px solid var(--line); }
.svc{
  display:grid; grid-template-columns:repeat(12,1fr); column-gap:var(--gap);
  padding-block:clamp(34px,4vw,60px); border-bottom:1px solid var(--line);
  position:relative; transition:background .4s var(--ease);
}
.svc:hover{ background:var(--bg-soft); }
.svc__n{
  grid-column:1 / 3; font-weight:600; font-size:clamp(1.9rem,3vw,3rem);
  line-height:.85; letter-spacing:-0.05em; color:var(--line);
  transition:color .4s var(--ease);
}
.svc:hover .svc__n{ color:var(--blue); }
.svc__k{ grid-column:3 / 7; }
.svc__k h3{ font-size:clamp(1.5rem,2.2vw,2rem); letter-spacing:-0.034em; line-height:1.06; }
.svc__tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; }
.svc__tags span{
  font-size:0.8rem; color:var(--ink-3); border:1px solid var(--line);
  border-radius:var(--r-pill); padding:5px 11px; background:var(--bg);
}
.svc__b{ grid-column:8 / 12; color:var(--ink-2); }
.svc__b p + p{ margin-top:14px; }
.svc__go{
  grid-column:12 / 13; justify-self:end; align-self:start;
  width:46px; height:46px; border-radius:50%; border:1px solid var(--line);
  display:grid; place-items:center; color:var(--ink-3); flex:none;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.svc:hover .svc__go{ background:var(--blue); border-color:var(--blue); color:#fff; transform:translateX(3px); }

/* ---------- fases ---------- */
.fases{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border-block:1px solid var(--line); }
.fase{ background:var(--bg); padding:clamp(26px,2.4vw,36px) clamp(20px,1.8vw,30px); display:flex; flex-direction:column; gap:14px; transition:background .35s var(--ease); }
.fase:hover{ background:var(--bg-soft); }
.fase__n{ font-weight:600; font-size:clamp(1.9rem,2.6vw,2.6rem); line-height:.85; letter-spacing:-0.05em; color:var(--blue); }
.fase ul{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.fase li{ font-size:0.95rem; color:var(--ink-2); line-height:1.5; }
.fase li b{ display:block; font-weight:500; color:var(--ink); font-size:0.78rem; margin-bottom:3px; }
.fase p{ font-size:0.95rem; color:var(--ink-2); line-height:1.55; }

/* ---------- razones ---------- */
.reasons{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.16); border-radius:var(--r-card); overflow:hidden; }
.reason{ padding:clamp(28px,2.6vw,42px); display:flex; flex-direction:column; gap:12px; transition:background .35s var(--ease); }
.reason:hover{ background:rgba(255,255,255,.05); }
.reason__r{ font-family:var(--mono); font-size:0.86rem; color:#8FA8FF; letter-spacing:0.14em; }
.reason p{ color:rgba(255,255,255,.72); font-size:0.99rem; }

/* ---------- muro de clientes ---------- */
.wall{ overflow:hidden; position:relative; }
.wall::before, .wall::after{
  content:""; position:absolute; top:0; bottom:0; width:clamp(40px,9vw,150px); z-index:2; pointer-events:none;
}
.wall::before{ left:0; background:linear-gradient(90deg, var(--bg), transparent); }
.wall::after{ right:0; background:linear-gradient(270deg, var(--bg), transparent); }
.soft .wall::before{ background:linear-gradient(90deg, var(--bg-soft), transparent); }
.soft .wall::after{ background:linear-gradient(270deg, var(--bg-soft), transparent); }
.wall__row{ overflow:hidden; }
.wall__row + .wall__row{ margin-top:clamp(14px,1.6vw,26px); }
.wall__track{ display:flex; width:max-content; }
.wall__g{ display:flex; align-items:center; gap:clamp(28px,3.4vw,58px); padding-right:clamp(28px,3.4vw,58px); }
.wall__g img{
  height:clamp(28px,2.7vw,40px); width:auto; max-width:150px; object-fit:contain;
  filter:grayscale(1); opacity:.5; transition:filter .4s ease, opacity .4s ease;
}
.wall__g img:hover{ filter:none; opacity:1; }
.wall__row--a .wall__track{ animation:slideA 62s linear infinite; }
.wall__row--b .wall__track{ animation:slideB 74s linear infinite; }
@keyframes slideA{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }
@keyframes slideB{ from{ transform:translate3d(-50%,0,0); } to{ transform:translate3d(0,0,0); } }

/* ---------- cifras ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; }
.stat{ background:var(--bg); padding:clamp(24px,2.3vw,34px); }
.stat b{ display:block; font-size:clamp(2rem,3vw,2.9rem); font-weight:600; letter-spacing:-0.045em; line-height:1; color:var(--ink); }
.stat span{ display:block; margin-top:10px; font-size:0.93rem; color:var(--ink-3); line-height:1.45; }
.soft .stat{ background:var(--bg-soft); }
.dark .stats{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.16); }
.dark .stat{ background:transparent; }
.dark .stat b{ color:#fff; }
.dark .stat span{ color:rgba(255,255,255,.6); }

/* ---------- cuadro de mando ----------
   Cuatro en línea. Se lee título, número y explicación: el número engancha,
   pero antes hay que saber de qué habla. */
.cmando{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.4vw,22px); }
/* Fondo propio en vez de fiarlo todo a un borde de 1 px: sobre blanco, el
   borde derecho de las tarjetas de la derecha casi no se veía. */
.cmando__c{
  display:flex; flex-direction:column;
  background:var(--bg-soft); border:1px solid var(--line);
  border-radius:var(--r-card); padding:clamp(22px,2.1vw,30px);
  transition:border-color .35s var(--ease), transform .35s var(--ease), background .35s var(--ease);
}
.cmando__c:hover{ border-color:var(--blue); background:var(--bg); transform:translateY(-3px); }
.cmando__ico{ width:24px; height:24px; color:var(--ink-3); margin-bottom:18px; }
.cmando__ico svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.cmando__c:hover .cmando__ico{ color:var(--blue); }
/* altura mínima en el título para que los cuatro números queden a la misma
   línea aunque un título ocupe dos renglones */
.cmando__c h3{ font-size:clamp(0.98rem,1.15vw,1.1rem); line-height:1.3; min-height:2.6em; }
.cmando__n{
  display:block; margin-top:14px; font-size:clamp(1.9rem,2.9vw,2.7rem); font-weight:600;
  letter-spacing:-0.05em; line-height:1; color:var(--blue); font-variant-numeric:tabular-nums;
}
.cmando__c p{ margin-top:12px; color:var(--ink-2); font-size:0.92rem; line-height:1.5; }
.soft .cmando__c{ background:var(--bg); }
.dark .cmando__c{ background:transparent; border-color:rgba(255,255,255,.16); }
.dark .cmando__c h3{ color:#fff; }
.dark .cmando__c p{ color:rgba(255,255,255,.66); }
@media (max-width:1100px){
  .cmando{ grid-template-columns:repeat(2,1fr); }
  .cmando__c h3{ min-height:0; }
}
@media (max-width:620px){
  .cmando{ grid-template-columns:1fr; }
}

/* ---------- filas ---------- */
.rows{ border-top:1px solid var(--line); }
.row{
  display:grid; grid-template-columns:56px 1fr 1.25fr; align-items:start; gap:16px;
  padding-block:clamp(20px,1.9vw,28px); border-bottom:1px solid var(--line);
  transition:padding-left .4s var(--ease), background .35s var(--ease);
}
.row:hover{ padding-left:12px; background:var(--bg-soft); }
.row__n{ font-family:var(--mono); font-size:0.8rem; color:var(--blue); padding-top:5px; }
.row h4{ color:var(--ink); }
.row p{ color:var(--ink-2); font-size:0.98rem; }
.dark .rows{ border-top-color:rgba(255,255,255,.16); }
.dark .row{ border-bottom-color:rgba(255,255,255,.16); }
.dark .row:hover{ background:rgba(255,255,255,.05); }
.dark .row h4{ color:#fff; }
.dark .row p{ color:rgba(255,255,255,.7); }
.dark .row__n{ color:#8FA8FF; }

/* ---------- catálogo de agentes ---------- */
.agents{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; }
.agent{ background:var(--bg); padding:clamp(26px,2.4vw,38px); display:flex; flex-direction:column; }
.agent__h{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.agent__h .ico{ margin-bottom:0; }
.agent__n{ font-family:var(--mono); font-size:0.78rem; color:var(--blue); letter-spacing:0.06em; }
.agent__tag{ font-size:0.74rem; color:var(--ink-3); border:1px solid var(--line); border-radius:var(--r-pill); padding:3px 10px; }
.agent h3{ margin-top:16px; }
.agent__p{ margin-top:12px; color:var(--ink-2); font-size:0.99rem; }
.agent__d{ border-top:1px solid var(--line); margin-top:18px; padding-top:18px; display:grid; gap:18px; }
.agent__d h5{ margin:0 0 8px; font-size:0.8rem; font-weight:500; color:var(--ink); }
.agent__d p, .agent__d li{ font-size:0.94rem; color:var(--ink-2); line-height:1.5; }
.agent__d ul{ margin:0; padding:0; list-style:none; display:grid; gap:7px; }
.agent__d ul li{ display:grid; grid-template-columns:14px 1fr; gap:9px; }
.agent__d ul li::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--blue); margin-top:8px; }
.agent__cta{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:auto; padding-top:24px; }
.agent details{ margin-top:16px; }
.agent summary{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:9px;
  font-size:0.94rem; font-weight:500; color:var(--ink-3); transition:color .25s ease;
}
.agent summary::-webkit-details-marker{ display:none; }
.agent summary:hover{ color:var(--blue); }
.agent summary i{
  width:7px; height:7px; flex:none;
  border-right:1.4px solid currentColor; border-bottom:1.4px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px); transition:transform .35s var(--ease);
}
.agent details[open] summary i{ transform:rotate(-135deg) translate(-2px,-2px); }
.agent--wide{ grid-column:1 / -1; }
.agent--soft{ background:var(--bg-soft); }

/* ---------- blog ---------- */
.posts{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,2.4vw,40px); }
.post{ display:flex; flex-direction:column; gap:14px; }
.post__img{ aspect-ratio:16/10; border-radius:var(--r-card); overflow:hidden; background:var(--bg-soft); border:1px solid var(--line); }
.post__img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.post:hover .post__img img{ transform:scale(1.04); }
.post__m{ font-family:var(--mono); font-size:0.74rem; letter-spacing:0.06em; color:var(--ink-3); text-transform:uppercase; }
.post h3{ transition:color .25s ease; }
.post:hover h3{ color:var(--blue); }
.post p{ color:var(--ink-2); font-size:0.97rem; }
.post--empty{ grid-column:1 / -1; padding:clamp(40px,5vw,72px); border:1px dashed var(--line); border-radius:var(--r-card); text-align:center; color:var(--ink-3); }

/* filtros del listado: las entradas ya están en el HTML, esto solo esconde las
   que no tocan. Sin filtro elegido se ven todas, así que sirve sin JavaScript. */
.filtros{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(26px,3vw,38px); }
.filtro{
  font:inherit; font-size:0.9rem; color:var(--ink-2); border:1px solid var(--line);
  background:var(--bg); border-radius:var(--r-pill); padding:8px 15px; cursor:pointer;
  transition:border-color .3s ease, color .3s ease, background .3s ease;
}
.filtro:hover{ border-color:var(--blue); color:var(--blue); }
.filtro.is-on{ background:var(--navy-a); border-color:var(--navy-a); color:#fff; }

/* El artículo va en una sola columna centrada. Antes la portada iba en un raíl
   lateral fijo y el texto en la mitad derecha: la página se leía descentrada y
   la foto quedaba arrinconada. */
.post__cuerpo{ max-width:74ch; margin-inline:auto; }
.post__cuerpo .article{ max-width:none; }
/* el tope de 15ch es para los titulares de sección; un título de artículo
   necesita respirar más */
.phead .post__cuerpo h1{ max-width:24ch; }

/* índice del artículo: enlaces que saltan de verdad a cada apartado */
.toc{
  margin:0 0 clamp(30px,3.4vw,48px); padding:clamp(20px,2.2vw,28px);
  background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--r-card);
}
.toc__k{ font-family:var(--mono); font-size:0.74rem; letter-spacing:0.06em; color:var(--ink-3); text-transform:uppercase; }
.toc ol{ margin:14px 0 0; padding-left:20px; color:var(--ink-2); }
.toc li{ margin-top:7px; line-height:1.5; }
.toc a{ color:var(--ink-2); transition:color .25s ease; }
.toc a:hover{ color:var(--blue); text-decoration:underline; text-underline-offset:3px; }
/* que el título no se quede debajo del menú fijo al saltar */
.article h2{ scroll-margin-top:calc(var(--nav) + 20px); }

.post__hero{ margin:0 0 clamp(30px,3.4vw,48px); border-radius:var(--r-card); overflow:hidden; border:1px solid var(--line); background:var(--bg-soft); }
.post__hero img{ width:100%; height:auto; }

.article{ max-width:70ch; }
.article h2{ font-size:clamp(1.6rem,2.6vw,2.2rem); margin-top:clamp(38px,4vw,58px); }
.article h3{ font-size:1.24rem; margin-top:clamp(28px,3vw,40px); }
.article p{ margin-top:18px; color:var(--ink-2); font-size:1.06rem; line-height:1.68; }
.article ul, .article ol{ margin-top:18px; padding-left:20px; color:var(--ink-2); }
.article li{ margin-top:8px; line-height:1.6; }
.article img{ margin-top:28px; border-radius:var(--r-card); border:1px solid var(--line); }
.article blockquote{
  margin:32px 0 0; padding:4px 0 4px 22px; border-left:2px solid var(--blue);
  font-size:1.14rem; color:var(--ink); letter-spacing:-0.018em;
}
.article a{ color:var(--blue); text-decoration:underline; text-underline-offset:3px; }

/* ---------- FAQ ---------- */
.faq__idx{ display:flex; flex-wrap:wrap; gap:8px; margin-top:clamp(26px,3vw,38px); }
.faq__idx a{
  font-size:0.9rem; color:var(--ink-2); border:1px solid var(--line); background:var(--bg);
  border-radius:var(--r-pill); padding:8px 15px; transition:border-color .3s ease, color .3s ease, background .3s ease;
}
.faq__idx a:hover{ border-color:var(--blue); color:var(--blue); }
.phead .faq__idx a{ color:rgba(255,255,255,.8); border-color:rgba(255,255,255,.24); background:transparent; }
.phead .faq__idx a:hover{ color:var(--navy-a); background:#fff; border-color:#fff; }

.faqset{
  display:grid; grid-template-columns:repeat(12,1fr); column-gap:var(--gap);
  padding-block:clamp(38px,4vw,64px); border-top:1px solid var(--line);
}
.faqset__k{ grid-column:1 / 5; align-self:start; position:sticky; top:calc(var(--nav) + 28px); }
.faqset__k h2{ font-size:clamp(1.5rem,2.2vw,2rem); max-width:15ch; }
/* Los bloques se pliegan: con 61 preguntas, verlas todas de golpe abruma.
   Se abre el que interese y el resto se queda recogido. */
.faqset__b{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:none; border:0; padding:0; cursor:pointer; color:inherit;
  font:inherit; font-size:inherit; letter-spacing:inherit; transition:color .25s ease;
}
.faqset__b:hover{ color:var(--blue); }
.faqset__b i{
  flex:none; width:11px; height:11px; margin-top:2px; border-right:2px solid currentColor;
  border-bottom:2px solid currentColor; transform:rotate(45deg);
  transition:transform .3s var(--ease); opacity:.55;
}
.faqset__b[aria-expanded="false"] i{ transform:rotate(-45deg); }
.faqset__b:hover i{ opacity:1; }
.faqset__l[hidden]{ display:none; }
.faqset__k span{ display:block; margin-bottom:12px; font-family:var(--mono); font-size:0.76rem; color:var(--blue); }
.faqset__l{ grid-column:6 / 13; }
.faq__q{
  width:100%; text-align:left; background:none; border:0; border-top:1px solid var(--line);
  padding:20px 40px 20px 0; cursor:pointer; position:relative; color:var(--ink);
  font-size:1.04rem; font-weight:500; letter-spacing:-0.018em; line-height:1.4;
  transition:color .25s ease;
}
.faqset__l > .faq__i:first-child .faq__q{ border-top:0; }
.faq__q:hover{ color:var(--blue); }
.faq__q::after, .faq__q::before{
  content:""; position:absolute; right:6px; top:50%; background:currentColor;
  transition:transform .4s var(--ease), opacity .3s ease;
}
.faq__q::after{ width:13px; height:1.4px; margin-top:-0.7px; }
.faq__q::before{ width:1.4px; height:13px; margin-top:-6.5px; right:11.8px; }
.faq__i.is-open .faq__q::before{ transform:rotate(90deg); opacity:0; }
.faq__i.is-open .faq__q{ color:var(--blue); }
.faq__a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease); }
.faq__i.is-open .faq__a{ grid-template-rows:1fr; }
.faq__a > div{ overflow:hidden; }
.faq__a p{ padding:0 0 24px; max-width:66ch; color:var(--ink-2); }

/* ---------- páginas legales ---------- */
.doc{ max-width:74ch; padding-block:clamp(48px,6vw,86px); }
.doc h2{ font-size:clamp(1.5rem,2.6vw,2.1rem); margin-top:52px; margin-bottom:18px; }
.doc h2:first-of-type{ margin-top:0; }
.doc h3{ font-size:1.12rem; margin-top:30px; margin-bottom:10px; }
.doc p, .doc li{ color:var(--ink-2); margin-bottom:15px; }
.doc ul{ padding-left:20px; }
.doc a{ color:var(--blue); text-decoration:underline; text-underline-offset:3px; }
.doc table{ width:100%; border-collapse:collapse; margin:22px 0; font-size:0.95rem; }
.doc th, .doc td{ border:1px solid var(--line); padding:12px 14px; text-align:left; vertical-align:top; }
.doc th{ background:var(--bg-soft); font-weight:600; }
.doc__meta{ font-family:var(--mono); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:36px; }
.doc__scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:22px 0; }
.doc__scroll table{ margin:0; min-width:520px; }
.fill{
  background:#FFF6D6; border-bottom:1.5px solid #E8C55A; padding:1px 7px;
  font-family:var(--mono); font-size:0.82em; color:#7A5B00; border-radius:4px;
  overflow-wrap:anywhere;
}
.aviso{
  border:1px solid #E8C55A; background:#FFFBEE; padding:20px 22px; margin-bottom:40px;
  font-size:0.95rem; color:#6B5200; border-radius:var(--r-card);
}
.aviso b{ color:#4A3800; }

/* ---------- planes ---------- */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; }
.plan{ background:var(--bg); padding:clamp(26px,2.4vw,38px); display:flex; flex-direction:column; }
.plan--on{ background:var(--bg-soft); }
.plan__k{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.plan__k h3{ font-size:1.24rem; }
.plan__tag{ font-size:0.74rem; color:var(--blue); border:1px solid var(--blue); border-radius:var(--r-pill); padding:3px 10px; white-space:nowrap; }
.plan__p{ margin-top:18px; font-size:clamp(2rem,2.8vw,2.7rem); font-weight:600; letter-spacing:-0.045em; line-height:1; }
.plan__p small{ display:block; margin-top:8px; font-size:0.84rem; font-weight:400; letter-spacing:0; color:var(--ink-3); }
/* Altura fija: si cada descripción ocupa las líneas que le apetece, la raya que
   separa el listado queda a distinta altura en cada columna y las tres tarjetas
   se ven descuadradas. */
.plan__d{ margin-top:16px; color:var(--ink-2); font-size:0.97rem; min-height:7.8em; }
.plan ul{ list-style:none; margin:22px 0 0; padding:20px 0 0; border-top:1px solid var(--line); display:grid; gap:10px; }
.plan li{ display:grid; grid-template-columns:14px 1fr; gap:10px; font-size:0.95rem; color:var(--ink-2); line-height:1.45; }
.plan li::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--blue); margin-top:8px; }
.plan .btn{ margin-top:24px; }
.plan__go{ margin-top:auto; padding-top:24px; }

/* ---------- puente y hermanas ---------- */
.bridge{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px;
  padding:clamp(28px,3vw,44px); border:1px solid var(--line); border-radius:var(--r-card);
  background:var(--bg-soft);
}
.bridge h3{ max-width:36ch; font-size:clamp(1.14rem,1.7vw,1.44rem); font-weight:500; line-height:1.34; }
.soft .bridge{ background:var(--bg); }

.sibs{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; }
.sib{ background:var(--bg); padding:clamp(24px,2.3vw,34px); display:flex; align-items:center; justify-content:space-between; gap:18px; transition:background .35s var(--ease); }
.sib:hover{ background:var(--bg-soft); }
.sib h3{ font-size:1.2rem; }
.sib p{ margin-top:6px; font-size:0.94rem; color:var(--ink-3); }
.sib span{ color:var(--ink-3); flex:none; transition:transform .35s var(--ease), color .3s ease; }
.sib:hover span{ color:var(--blue); transform:translateX(4px); }

/* ---------- formulario ---------- */
.contact{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(34px,4.4vw,86px); align-items:start; }
.contact__steps{ list-style:none; margin:clamp(28px,3.2vw,42px) 0 0; padding:0; }
.contact__steps li{ display:grid; grid-template-columns:42px 1fr; gap:14px; padding:18px 0; border-top:1px solid rgba(255,255,255,.15); }
.contact__steps span{ font-family:var(--mono); font-size:0.8rem; color:#8FA8FF; padding-top:3px; }
.contact__steps b{ font-weight:500; font-size:1.02rem; }
.contact__steps p{ margin-top:5px; font-size:0.95rem; color:rgba(255,255,255,.66); line-height:1.5; }
.contact__alt{ margin-top:24px; font-size:0.95rem; color:rgba(255,255,255,.66); }
.contact__alt a{ color:#fff; text-decoration:underline; text-underline-offset:3px; }

.form__wrap{ background:#fff; border-radius:var(--r-card); padding:clamp(26px,2.7vw,40px); color:var(--ink); }
.form{ display:grid; gap:16px; }
.form__row--2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:block; }
.field__k{ display:block; font-size:0.85rem; font-weight:500; color:var(--ink-2); margin-bottom:7px; }
.field__k i{ font-style:normal; color:var(--ink-3); font-weight:400; }
.field input, .field textarea, .field select{
  width:100%; font:inherit; font-size:0.99rem; color:var(--ink); background:var(--bg);
  border:1px solid var(--line); border-radius:var(--r-in); padding:12px 14px;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.field input::placeholder, .field textarea::placeholder{ color:var(--ink-3); }
.field input:focus, .field textarea:focus, .field select:focus{
  outline:0; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft);
}
.field textarea{ resize:vertical; min-height:92px; }
.field .is-bad, .field input.is-bad, .field textarea.is-bad{ border-color:#D93B3B; }

/* selector propio: el <select> nativo sigue en el DOM para el envío */
.sel{ position:relative; }
.sel select{ position:absolute; opacity:0; pointer-events:none; width:1px; height:1px; padding:0; border:0; }
.sel__b{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-in);
  padding:12px 14px; font-size:0.99rem; color:var(--ink-3); text-align:left; cursor:pointer;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.sel__b.has-val{ color:var(--ink); }
.sel.is-open .sel__b, .sel__b:focus-visible{ outline:0; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft); }
.sel__b.is-bad{ border-color:#D93B3B; }
.sel__b i{
  width:7px; height:7px; flex:none; border-right:1.5px solid var(--ink-3); border-bottom:1.5px solid var(--ink-3);
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .35s var(--ease);
}
.sel.is-open .sel__b i{ transform:rotate(-135deg) translate(-3px,-3px); border-color:var(--blue); }
.sel__list{
  position:absolute; z-index:20; top:calc(100% + 8px); left:0; right:0;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-in);
  box-shadow:0 26px 60px -28px rgba(10,13,20,.42); padding:6px; margin:0; list-style:none;
  max-height:262px; overflow-y:auto;
  opacity:0; visibility:hidden; transform:translateY(-6px) scale(.99);
  transition:opacity .24s var(--ease), transform .3s var(--ease), visibility .24s;
}
.sel.is-open .sel__list{ opacity:1; visibility:visible; transform:none; }
.sel__list li{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 12px; border-radius:8px; font-size:0.97rem; color:var(--ink-2); cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.sel__list li:hover, .sel__list li.is-hi{ background:var(--bg-soft); color:var(--ink); }
.sel__list li[aria-selected="true"]{ color:var(--blue); font-weight:500; }
.sel__list li[aria-selected="true"]::after{
  content:""; width:13px; height:7px; flex:none;
  border-left:1.6px solid var(--blue); border-bottom:1.6px solid var(--blue);
  transform:rotate(-45deg) translate(1px,-2px);
}

.check{ display:grid; grid-template-columns:19px 1fr; gap:12px; align-items:start; cursor:pointer; font-size:0.9rem; color:var(--ink-2); line-height:1.45; }
.check input{ width:19px; height:19px; margin:2px 0 0; accent-color:var(--blue); }
.check a{ color:var(--blue); text-decoration:underline; text-underline-offset:3px; }
.form__msg{ font-size:0.92rem; color:var(--ink-3); min-height:1.2em; }
.form__msg.is-bad{ color:#D93B3B; }
.form__legal{ font-size:0.84rem; color:var(--ink-3); line-height:1.5; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form__ok{ text-align:center; padding:clamp(30px,4vw,54px) 0; }
.form__tick{ display:inline-flex; width:52px; height:52px; border-radius:50%; background:var(--blue-soft); color:var(--blue); align-items:center; justify-content:center; margin-bottom:18px; }
.form__tick svg{ width:26px; height:26px; }
.form__ok p{ margin-top:10px; color:var(--ink-2); font-size:0.99rem; max-width:40ch; margin-inline:auto; }

/* ---------- pie ---------- */
.foot{ background:var(--navy-a); color:#fff; position:relative; overflow:hidden; }
.foot::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(80% 120% at 8% 0%, rgba(46,86,245,.22), transparent 60%);
}
.foot__in{ position:relative; z-index:1; padding-block:clamp(48px,5.4vw,86px) 26px; }
.foot__top{
  display:grid; grid-template-columns:1.3fr repeat(3, minmax(0,0.9fr)); gap:clamp(26px,3vw,52px);
  padding-bottom:clamp(38px,4vw,60px); border-bottom:1px solid rgba(255,255,255,.16);
}
.foot__brand img{ height:26px; width:auto; content:url("img/logo-claro.svg"); }
.foot__claim{ margin-top:20px; font-size:1.02rem; color:rgba(255,255,255,.72); max-width:32ch; line-height:1.5; letter-spacing:-0.014em; }
.foot__cta{ margin-top:24px; }
.foot__col h4{ font-size:0.8rem; font-weight:500; color:rgba(255,255,255,.45); letter-spacing:0.06em; text-transform:uppercase; margin-bottom:14px; }
.foot__col a, .foot__col button{
  display:block; padding:6px 0; font-size:0.98rem; color:rgba(255,255,255,.78);
  background:none; border:0; cursor:pointer; text-align:left; font-family:inherit;
  transition:color .25s ease, transform .3s var(--ease);
}
.foot__col a:hover, .foot__col button:hover{ color:#fff; transform:translateX(3px); }
.foot__bot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px;
  padding-top:22px; font-size:0.88rem; color:rgba(255,255,255,.45);
}

/* ---------- cookies ---------- */
.ck{
  position:fixed; z-index:90; left:clamp(16px,2vw,26px); bottom:clamp(16px,2vw,26px);
  width:min(420px, calc(100vw - 32px));
  background:var(--navy-a); color:#fff; border-radius:var(--r-card);
  padding:26px 26px 24px; box-shadow:0 30px 70px -30px rgba(0,0,0,.7);
  opacity:0; transform:translateY(14px); transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.ck.is-in{ opacity:1; transform:none; }
.ck__t{ font-size:1.1rem; font-weight:600; letter-spacing:-0.025em; }
.ck__p{ margin-top:10px; font-size:0.9rem; line-height:1.5; color:rgba(255,255,255,.72); }
.ck__p a{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.ck__btns{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:20px; }
.ck .btn{ background:#fff; color:var(--navy-a); border-color:#fff; }
.ck .btn:hover{ background:var(--blue); color:#fff; border-color:var(--blue); }
.ck .btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
.ck .btn--ghost:hover{ background:#fff; color:var(--navy-a); border-color:#fff; }
.ck__cfg{
  background:none; border:0; padding:6px 2px; cursor:pointer; margin-left:4px;
  font-family:inherit; font-size:0.86rem; color:rgba(255,255,255,.7);
  text-decoration:underline; text-underline-offset:3px; transition:color .3s ease;
}
.ck__cfg:hover{ color:#fff; }
.ckp{ position:fixed; inset:0; z-index:95; display:grid; place-items:center; padding:clamp(16px,2vw,26px); }
.ckp__bg{ position:absolute; inset:0; background:rgba(10,13,20,.62); backdrop-filter:blur(3px); opacity:0; transition:opacity .35s ease; }
.ckp.is-in .ckp__bg{ opacity:1; }
.ckp__box{
  position:relative; width:min(620px,100%); max-height:calc(100vh - 52px); overflow-y:auto;
  background:#fff; color:var(--ink); border-radius:var(--r-card); padding:clamp(28px,3.4vw,42px);
  box-shadow:0 40px 100px -40px rgba(0,0,0,.6);
  opacity:0; transform:translateY(16px) scale(.98); transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.ckp.is-in .ckp__box{ opacity:1; transform:none; }
.ckp__box h2{ font-size:clamp(1.5rem,2.6vw,2rem); padding-right:36px; }
.ckp__lead{ margin-top:12px; color:var(--ink-2); font-size:0.97rem; line-height:1.5; }
.ckp__x{
  position:absolute; top:16px; right:16px; width:38px; height:38px; border-radius:var(--r-pill);
  border:1px solid var(--line); background:#fff; cursor:pointer; color:var(--ink-3);
  font-size:1.5rem; line-height:1; transition:color .3s ease, border-color .3s ease;
}
.ckp__x:hover{ color:var(--ink); border-color:var(--ink); }
.ckp__list{ margin-top:26px; border-top:1px solid var(--line); }
.ckc{ padding:20px 0; border-bottom:1px solid var(--line); }
.ckc__h{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.ckc h3{ font-size:1.04rem; }
.ckc p{ margin-top:8px; font-size:0.9rem; color:var(--ink-2); line-height:1.5; max-width:52ch; }
.ckc__fija{ font-family:var(--mono); font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap; }
.ckc__sw{ position:relative; flex:none; cursor:pointer; }
.ckc__sw em{ position:absolute; left:-9999px; }
.ckc__sw input{ position:absolute; opacity:0; width:46px; height:26px; margin:0; cursor:pointer; }
.ckc__sw span{ display:block; width:46px; height:26px; border-radius:var(--r-pill); background:var(--line); transition:background .3s var(--ease); }
.ckc__sw span::after{
  content:""; position:absolute; top:4px; left:4px; width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .3s var(--ease);
}
.ckc__sw input:checked ~ span{ background:var(--blue); }
.ckc__sw input:checked ~ span::after{ transform:translateX(20px); }
.ckc__sw input:focus-visible ~ span{ outline:2px solid var(--blue); outline-offset:3px; }
.ckp__btns{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }

/* ---------- lista de entregables dentro de una tarjeta ---------- */
.card ul, .kit ul{ list-style:none; margin:6px 0 0; padding:0; display:grid; gap:9px; }
.card li, .kit li{
  display:grid; grid-template-columns:13px 1fr; gap:10px;
  font-size:0.96rem; color:var(--ink-2); line-height:1.5;
}
.card li::before, .kit li::before{
  content:""; width:5px; height:5px; border-radius:50%; background:var(--blue); margin-top:8px;
}
.dark .card li{ color:rgba(255,255,255,.72); }
.dark .card li::before{ background:#8FA8FF; }

/* ---------- panel de rentabilidad (viene de la web de captación) ---------- */
.panel{
  border:1px solid var(--line); border-radius:var(--r-card); background:#fff;
  box-shadow:0 1px 2px rgba(10,13,20,.05), 0 40px 80px -40px rgba(10,13,20,.45);
  overflow:hidden;
}
.panel__bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 22px; border-bottom:1px solid var(--line-soft); background:var(--bg-soft); }
.panel__title{ display:flex; align-items:center; gap:10px; font-size:0.9rem; font-weight:500; }
.panel__title .dot{ width:8px; height:8px; border-radius:50%; background:var(--blue); flex:none; }
.panel__tag{ font-family:var(--mono); font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-3); }
.panel__foot{ padding:13px 22px; border-top:1px solid var(--line-soft); background:var(--bg-soft); font-size:0.78rem; color:var(--ink-3); }
.kpis{ display:grid; grid-template-columns:repeat(4,1fr); }
.kpi{ padding:26px 22px; border-right:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
.kpi:nth-child(4){ border-right:0; }
.kpi__k{ font-family:var(--mono); font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-3); }
.kpi__v{ font-size:clamp(1.6rem,2.4vw,2rem); font-weight:600; letter-spacing:-0.04em; margin-top:9px; font-variant-numeric:tabular-nums; }
.kpi__d{ font-size:0.82rem; color:#22B07D; margin-top:3px; font-variant-numeric:tabular-nums; }
.kpi__d--blue{ color:var(--blue); }
.chart{ padding:26px 22px 22px; }
.chart__head{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:18px; }
.chart__head h4{ font-size:0.96rem; font-weight:500; letter-spacing:-0.015em; }
.chart__x{ display:flex; gap:10px; margin-top:10px; }
.chart__x span{ flex:1; text-align:center; font-family:var(--mono); font-size:0.62rem; color:var(--ink-3); letter-spacing:0.06em; }
.bars{ display:flex; align-items:flex-end; gap:10px; height:120px; }
.bar{ flex:1; background:var(--blue-soft); border-radius:3px 3px 0 0; position:relative; height:100%; }
.bar i{
  position:absolute; inset:auto 0 0 0; display:block; height:0;
  background:var(--blue); border-radius:3px 3px 0 0; transition:height 1.1s var(--ease);
}

/* ---------- dos columnas enfrentadas ---------- */
.compare{ display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; }
.compare__col{ padding:clamp(28px,3.2vw,46px); }
.compare__col:first-child{ border-right:1px solid var(--line); }
.compare__col--on{ background:var(--blue-soft); }
.compare__k{
  font-family:var(--mono); font-size:0.72rem; font-weight:500; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--blue); display:block;
}
.compare__col--off .compare__k{ color:var(--ink-3); }
.compare ul{ list-style:none; margin:22px 0 0; padding:0; }
.compare li{ padding:15px 0; border-bottom:1px solid rgba(10,13,20,.08); font-size:1.06rem; letter-spacing:-0.018em; line-height:1.4; }
.compare li:last-child{ border-bottom:0; }
.compare__col--off li{ color:var(--ink-3); }
.compare__col--on li{ color:var(--ink); font-weight:500; }

/* ---------- casos con cifra ---------- */
/* ---------- caso desarrollado ----------
   Hermano de .case, pero apaisado: a la izquierda quién es y el número,
   a la derecha el relato en tres pasos. Se usa cuando el caso necesita
   contarse entero y no cabe en cuatro viñetas. */
.studies{ display:grid; gap:clamp(20px,2.4vw,32px); }
.study{
  display:grid; grid-template-columns:0.74fr 1.26fr; gap:clamp(26px,3.6vw,64px);
  border:1px solid var(--line); border-radius:var(--r-card); background:#fff;
  padding:clamp(28px,3.2vw,48px);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.study:hover{ transform:translateY(-5px); box-shadow:0 30px 60px -34px rgba(10,13,20,.34); }
.study__a{ display:flex; flex-direction:column; }
.study__h{ display:flex; align-items:center; gap:16px; }
.study__logo{
  height:42px; width:auto; max-width:120px; object-fit:contain; flex:none;
  filter:grayscale(1); opacity:.66; transition:filter .4s ease, opacity .4s ease;
}
.study:hover .study__logo{ filter:none; opacity:1; }
.study__name{ font-size:1.44rem; font-weight:600; letter-spacing:-0.03em; }
.study__kind{ font-size:0.92rem; color:var(--ink-3); margin-top:5px; }
.study__fig{ margin-top:auto; padding-top:clamp(26px,3vw,40px); }
.study__fig b{
  display:block; font-size:clamp(2.6rem,4.8vw,3.9rem); font-weight:600;
  letter-spacing:-0.045em; color:var(--blue); line-height:1; font-variant-numeric:tabular-nums;
}
.study__fig span{ display:block; margin-top:12px; font-size:1rem; color:var(--ink-2); max-width:16ch; line-height:1.3; }
.study__b{ display:grid; gap:clamp(20px,2.2vw,28px); align-content:center; }
.study__b h4{
  font-family:var(--mono); font-size:0.68rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--ink-3); font-weight:500; margin-bottom:9px;
}
.study__b p{ font-size:1rem; color:var(--ink-2); line-height:1.62; }

/* La captura cruza las dos columnas: es la prueba de que existe, así que va
   entera y sin recortar. Los datos de cliente van difuminados en el origen. */
.study__shot{ grid-column:1 / -1; margin:clamp(26px,3vw,40px) 0 0; }
.study__shot img{
  display:block; width:100%; height:auto; border-radius:10px;
  border:1px solid var(--line); background:var(--bg-soft);
}
.study__shot figcaption{
  margin-top:14px; font-size:0.9rem; color:var(--ink-3); line-height:1.45; max-width:70ch;
}

.cases{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,2.4vw,32px); }
.case{
  border:1px solid var(--line); border-radius:var(--r-card); background:#fff;
  padding:clamp(28px,3vw,44px); display:flex; flex-direction:column;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.case:hover{ transform:translateY(-5px); box-shadow:0 30px 60px -34px rgba(10,13,20,.34); }
.case__h{ display:flex; align-items:center; gap:16px; }
.case__logo{ height:42px; width:auto; max-width:120px; object-fit:contain; flex:none; filter:grayscale(1); opacity:.66; transition:filter .4s ease, opacity .4s ease; }
.case:hover .case__logo{ filter:none; opacity:1; }
.case__name{ font-size:1.44rem; font-weight:600; letter-spacing:-0.03em; }
.case__kind{ font-size:0.92rem; color:var(--ink-3); margin-top:5px; }
.case__fig{ display:flex; align-items:baseline; gap:14px; margin:28px 0 0; padding-top:26px; border-top:1px solid var(--line); }
.case__fig b{ font-size:clamp(2.4rem,4.4vw,3.6rem); font-weight:600; letter-spacing:-0.045em; color:var(--blue); line-height:1; font-variant-numeric:tabular-nums; }
.case__fig span{ font-size:1rem; color:var(--ink-2); max-width:14ch; line-height:1.3; }
.case ul{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:12px; }
.case li{ font-size:0.99rem; color:var(--ink-2); padding-left:20px; position:relative; line-height:1.45; }
.case li::before{ content:""; position:absolute; left:0; top:9px; width:6px; height:6px; background:var(--blue); transform:rotate(45deg); }

/* ---------- calendario de arranque ---------- */
.tl{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,2.6vw,40px); }
.tl__f{ padding-top:22px; border-top:2px solid var(--blue); }
.dark .tl__f{ border-top-color:#8FA8FF; }
.tl__k{
  font-family:var(--mono); font-size:0.7rem; font-weight:500; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--blue); display:block;
}
.dark .tl__k{ color:#8FA8FF; }
.tl__f h4{ margin-top:11px; font-size:1.14rem; }
.tl__f ul{ list-style:none; margin:24px 0 0; padding:0; display:grid; gap:18px; }
.tl__f li{ font-size:0.95rem; color:var(--ink-2); line-height:1.45; }
.dark .tl__f li{ color:rgba(255,255,255,.74); }
.tl__f li b{
  display:block; margin-bottom:5px; font-weight:500;
  font-family:var(--mono); font-size:0.66rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--ink-3);
}
.dark .tl__f li b{ color:rgba(255,255,255,.5); }

/* ---------- marquesina de partners ---------- */
.mq{ border-block:1px solid var(--line); overflow:hidden; padding-block:26px; }
.mq__track{ display:flex; width:max-content; animation:mq 34s linear infinite; }
.mq:hover .mq__track{ animation-play-state:paused; }
.mq__g{ display:flex; align-items:center; gap:clamp(48px,6vw,86px); padding-right:clamp(48px,6vw,86px); }
.mq__g img{ height:30px; width:auto; flex:none; filter:grayscale(1); opacity:.5; transition:filter .4s ease, opacity .4s ease; }
.mq__g img:hover{ filter:none; opacity:1; }
@keyframes mq{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }

/* ---------- opiniones con logo ---------- */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; }
.quote{ background:var(--bg); padding:clamp(26px,2.5vw,38px); display:flex; flex-direction:column; gap:20px; transition:background .35s var(--ease); }
.quote:hover{ background:var(--bg-soft); }
.soft .quote{ background:var(--bg-soft); }
.soft .quote:hover{ background:var(--bg); }
.quote p{ color:var(--ink-2); font-size:0.99rem; line-height:1.55; }
.quote__who{ margin-top:auto; padding-top:20px; border-top:1px solid var(--line); display:flex; align-items:center; gap:14px; }
.quote__logo{ height:26px; width:auto; max-width:112px; object-fit:contain; flex:none; filter:grayscale(1); opacity:.62; transition:filter .4s ease, opacity .4s ease; }
.quote:hover .quote__logo{ filter:none; opacity:1; }
.quote__n{ font-size:0.88rem; color:var(--ink-3); line-height:1.35; }
.quote__n b{ display:block; font-weight:500; color:var(--ink); font-size:0.94rem; }
/* cierra la rejilla cuando el número de opiniones no llena la última fila */
.quote--cta{ background:var(--blue-soft); gap:12px; }
.soft .quote--cta{ background:var(--blue-soft); }
.quote--cta:hover, .soft .quote--cta:hover{ background:var(--blue-soft); }
.quote--cta .quote__who{ border-top:0; padding-top:4px; }

/* ---------- canal de YouTube ---------- */
.yt{ display:grid; grid-template-columns:0.92fr 1.08fr; gap:clamp(28px,4.4vw,72px); align-items:center; }
.yt__card{
  position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:var(--r-card);
  background:linear-gradient(125deg,#0E1B33 0%,#0F2244 55%,#0B1424 100%);
  display:grid; place-items:center; border:1px solid rgba(255,255,255,.09);
  box-shadow:0 34px 70px -38px rgba(10,13,20,.5);
}
.yt__card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.86; }
.yt__play{
  position:relative; z-index:2; width:clamp(64px,6vw,86px); aspect-ratio:1; border-radius:50%;
  background:#fff; display:grid; place-items:center;
  transition:transform .5s var(--ease), background .35s ease;
}
.yt__card:hover .yt__play{ transform:scale(1.09); background:var(--blue); }
.yt__play svg{ width:24px; height:24px; margin-left:5px; color:#0B1424; transition:color .35s ease; }
.yt__card:hover .yt__play svg{ color:#fff; }
.yt__tag{
  position:absolute; z-index:2; left:20px; bottom:18px;
  font-family:var(--mono); font-size:0.68rem; letter-spacing:0.14em;
  text-transform:uppercase; color:rgba(255,255,255,.72);
}

/* ---------- cifra suelta junto a un titular ---------- */
.cifra{ display:flex; align-items:baseline; gap:14px; }
.cifra b{ font-size:clamp(2.4rem,4.4vw,3.6rem); font-weight:600; letter-spacing:-0.045em; color:var(--blue); line-height:1; font-variant-numeric:tabular-nums; }
.cifra span{ font-size:1.02rem; color:var(--ink-2); max-width:22ch; line-height:1.35; }

/* ============================================================
   adaptaciones
   ============================================================ */
@media (max-width:1180px){
  .eg > .rail{ grid-column:1 / 6; position:static; }
  .eg > .col, .eg > .col--wide{ grid-column:7 / 13; }
  .faqset__k{ grid-column:1 / 6; position:static; }
  .faqset__l{ grid-column:7 / 13; }
  .svc__k{ grid-column:3 / 8; }
  .svc__b{ grid-column:8 / 12; }
  .fases{ grid-template-columns:repeat(2,1fr); }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .cards--4{ grid-template-columns:repeat(2,1fr); }
  .posts{ grid-template-columns:repeat(2,1fr); }
  .foot__top{ grid-template-columns:1fr 1fr 1fr; }
  .foot__brand{ grid-column:1 / -1; }
  .kpis{ grid-template-columns:repeat(2,1fr); }
  .kpi:nth-child(2){ border-right:0; }
  .quotes{ grid-template-columns:repeat(2,1fr); }
  .tl{ grid-template-columns:repeat(2,1fr); row-gap:clamp(30px,4vw,48px); }
}

@media (max-width:1000px){
  :root{ --nav:66px; }
  .nav__links{ display:none; }
  .nav__toggle{ display:flex; }
  .nav > .wrap > .nav__cta{ display:none; }

  .nav.is-open{ height:100dvh; overflow-y:auto; }
  .nav.is-open .nav__links{
    display:block; position:absolute; top:var(--nav); left:0; right:0;
    background:#fff; padding:8px var(--mx) 34px; margin:0; border-top:1px solid var(--line);
  }
  .nav.is-open .nav__links > a,
  .nav.is-open .nav__svc > button{
    display:flex; width:100%; padding:18px 0; font-size:1.3rem; font-weight:500;
    color:var(--ink); border-bottom:1px solid var(--line); letter-spacing:-0.028em;
  }
  .nav.is-open .nav__links > a::after, .nav.is-open .nav__svc > button::after{ display:none; }
  .nav.is-open .nav__svc > button{ justify-content:space-between; }
  .nav.is-open .mega{
    position:static; transform:none; width:100%; box-shadow:none; border:0;
    border-bottom:1px solid var(--line); border-radius:0; padding:0 0 12px;
    display:none; opacity:1; visibility:visible; pointer-events:auto;
  }
  .nav.is-open .nav__svc.is-open .mega{ display:block; }
  .nav.is-open .mega__i{ padding:14px 0; }
  .nav.is-open .mega__foot{ padding:14px 0 0; }
  .nav.is-open .nav__links .nav__cta{ display:inline-flex; margin-top:26px; width:100%; justify-content:center; }

  .hero__foot{ grid-template-columns:1fr; align-items:start; gap:22px; }
  .hero__cta{ justify-content:flex-start; }
  .contact{ grid-template-columns:1fr; }
  .cards--3{ grid-template-columns:repeat(2,1fr); }
  .reasons{ grid-template-columns:1fr; }
  .svc{ grid-template-columns:repeat(6,1fr); row-gap:16px; }
  .svc__n{ grid-column:1 / 2; }
  .svc__k{ grid-column:2 / 6; }
  .svc__b{ grid-column:2 / 7; }
  .svc__go{ grid-column:6 / 7; grid-row:1; }
  .agents{ grid-template-columns:1fr; }
  .row{ grid-template-columns:44px 1fr; }
  .row p{ grid-column:2 / 3; }
  .cases{ grid-template-columns:1fr; }
  .study{ grid-template-columns:1fr; }
  .study__fig{ margin-top:26px; }
  /* Tres columnas de precio no caben: apiladas, y sin la altura fija de la
     descripción, que solo servía para alinearlas cuando iban en fila. */
  .plans{ grid-template-columns:1fr; }
  .plan__d{ min-height:0; }
}

@media (max-width:760px){
  body{ font-size:16px; }
  :root{ --sec:clamp(58px,11vw,84px); --sec-s:clamp(42px,8vw,62px); }
  .eg > .rail, .eg > .col, .eg > .col--wide, .faqset__k, .faqset__l{ grid-column:1 / -1; }
  .eg > .col, .eg > .col--wide{ margin-top:26px; }
  .faqset__l{ margin-top:24px; }
  .cards--2, .cards--3, .cards--4{ grid-template-columns:1fr; }
  .fases{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr; }
  .posts{ grid-template-columns:1fr; }
  .sibs{ grid-template-columns:1fr; }
  .form__row--2{ grid-template-columns:1fr; }
  .hero h1{ max-width:none; }
  .hero__meta{ font-size:0.62rem; }
  .hero__meta span:first-child{ display:none; }
  .bridge{ flex-direction:column; align-items:flex-start; }
  .svc{ grid-template-columns:1fr auto; }
  .svc__n{ grid-column:1 / 2; font-size:1.5rem; }
  .svc__k, .svc__b{ grid-column:1 / 3; }
  .svc__go{ grid-column:2 / 3; grid-row:1; width:40px; height:40px; }
  .foot__top{ grid-template-columns:1fr 1fr; }
  .wall__g img{ height:26px; }
  .kpis{ grid-template-columns:1fr; }
  .kpi{ border-right:0; }
  .compare{ grid-template-columns:1fr; }
  .compare__col:first-child{ border-right:0; border-bottom:1px solid var(--line); }
  .quotes{ grid-template-columns:1fr; }
  .cifra{ flex-direction:column; gap:8px; }
  .tl{ grid-template-columns:1fr; }
  .yt{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .rv{ opacity:1; transform:none; }
  .ln > span{ transform:none; }
}

/* Tablas dentro de un artículo del blog. El envoltorio hace que en móvil la
   tabla se desplace sola en vez de romper el ancho de la página. No se
   reutiliza .doc porque arrastra max-width y padding de las páginas legales.

   Los bordes van con --line-2 y no con --line: #E4E7EE sobre blanco es tan
   tenue que a tamaño de pantalla la tabla se leía como dos columnas de texto
   suelto, sin rejilla. Con la cabecera marcada y las filas alternas se lee como
   una tabla de un vistazo, que es para lo que está puesta. */
.post__tabla{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:26px 0;
              border:1px solid var(--line-2); border-radius:var(--r-card); }
.post__tabla table{ width:100%; min-width:420px; border-collapse:collapse; font-size:0.95rem; }
.post__tabla th, .post__tabla td{ padding:13px 16px; text-align:left; vertical-align:top;
                                  border-bottom:1px solid var(--line-2); }
.post__tabla th{ background:var(--bg-soft2); font-weight:650; color:var(--ink);
                 border-bottom:2px solid var(--line-2); white-space:nowrap; }
.post__tabla tbody tr:nth-child(even){ background:var(--bg-soft); }
.post__tabla tbody tr:last-child th, .post__tabla tbody tr:last-child td{ border-bottom:0; }
/* La primera columna es la etiqueta de la fila: se lee antes si va marcada. */
.post__tabla tbody td:first-child{ font-weight:600; color:var(--ink); }
@media (max-width:600px){
  .post__tabla table{ font-size:0.9rem; }
  .post__tabla th, .post__tabla td{ padding:11px 12px; }
  .post__tabla th{ white-space:normal; }
}