/* ===========================================================================
   TOKENS DE MARCA — CARLOS GONZÁLEZ (landing)
   Editorial / Swiss. Base blanco puro + negro. Acento azul. Ámbar = el momento.
   =========================================================================== */
:root{
  --ink:#0a0a0a; --ink-soft:#3a3a3a; --ink-mute:#8a8a8a; --ink-faint:#cfcfcf;
  --paper:#fff; --on-dark:#fafafa;
  --blue:#1a4dff; --blue-soft:#7da4ff; --blue-glow:#9fb3ff;
  --amber:#ffb020; --amber-deep:#e89500;
  /* --amber-ink: ámbar para TEXTO pequeño sobre blanco. #e89500 sólo llega a 2,4:1 de
     contraste y no es legible a tamaños pequeños; este llega a 5:1 (WCAG AA). */
  --amber-ink:#9c6200;
  --amber-hd:#c47500;   /* ámbar para titulares y numerales display sobre blanco: 3.56:1, pasa AA-large */
  /* trazo de rotulador de las respuestas destacadas */
  --mark:rgba(26,77,255,.20); --mark-glyph:rgba(26,77,255,.26);
  /* --num: color de los numerales display (01, 02...). Un solo sitio para
     que azul y ámbar se comporten igual y no se desincronicen. */
  --num:var(--blue);
  --rule:rgba(0,0,0,.10); --rule-strong:rgba(0,0,0,.30);
  --rule-dark:rgba(255,255,255,.16); --rule-dark-strong:rgba(255,255,255,.5);
  --glow:radial-gradient(circle, rgba(80,140,255,.45) 0%, rgba(60,110,230,.18) 35%, rgba(40,90,200,0) 70%);
  --font-sans:"Inter",-apple-system,system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow-btn:0 12px 32px -10px rgba(0,0,0,.35);
  --inner:1140px; --pad-x:clamp(1.3rem,5vw,4.5rem);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-sans);background:var(--paper);color:var(--ink);
  -webkit-font-smoothing:antialiased;line-height:1.6;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* Tratamientos de imagen de marca */
.cg-duo{filter:url(#cg-duo) brightness(1.16) saturate(1.05)}  /* duotono azul · destacar/SEO */
.cg-bw{filter:grayscale(1) contrast(1.05)}                    /* blanco y negro · por defecto/IA */
.cg-flip{transform:scaleX(-1)}                                /* voltea el retrato: que mire hacia el texto */

/* ===== Tipografía base ===== */
.eyebrow{font-size:clamp(.62rem,.8vw,.74rem);font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--blue);display:inline-flex;align-items:center;gap:.7em}
.s-ink .eyebrow{color:var(--blue-soft)}
.title{font-weight:200;line-height:1.04;letter-spacing:-.01em;font-size:clamp(2rem,5vw,3.6rem)}
.title em{font-style:normal;color:var(--blue)}
.s-ink .title{color:var(--on-dark)} .s-ink .title em{color:var(--blue-soft)}
.title b{font-weight:500}
.lede{font-size:clamp(1rem,1.4vw,1.2rem);font-weight:300;line-height:1.6;color:var(--ink-soft);max-width:56ch}
.s-ink .lede{color:var(--ink-faint)}
.lede strong{color:var(--ink);font-weight:600} .s-ink .lede strong{color:#fff}
.rule{height:1px;background:var(--rule);border:0;width:64px}
.s-ink .rule{background:var(--rule-dark)}
.mono{font-family:var(--font-mono)}

/* ===== Botones ===== */
.btn{display:inline-flex;align-items:center;gap:.6em;background:var(--ink);color:#fff;border:none;
  padding:15px 26px;font-family:var(--font-sans);font-size:.72rem;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;cursor:pointer;box-shadow:var(--shadow-btn);transition:transform .2s var(--ease),background .2s var(--ease)}
.btn:hover{background:#000;transform:translateY(-2px)}
.btn--blue{background:var(--blue)} .btn--blue:hover{background:#143fd6}
.btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--ink);box-shadow:none}
.btn--ghost:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}
.btn--white{background:#fff;color:var(--ink);box-shadow:none}
.btn--white:hover{background:#e7e7e7;color:var(--ink);transform:translateY(-2px)}
/* Fantasma legible sobre cualquier fondo oscuro */
.s-ink .btn--ghost,.cta .btn--ghost,.result .btn--ghost,.why .btn--ghost{color:#fff;border-color:rgba(255,255,255,.6)}
.s-ink .btn--ghost:hover,.cta .btn--ghost:hover,.result .btn--ghost:hover,.why .btn--ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn svg{width:14px;height:14px}

/* ===== Layout ===== */
.wrap{max-width:var(--inner);margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x)}
.s-ink{background:var(--ink);color:var(--on-dark);--num:var(--blue-soft)}
.s-blue{background:var(--blue);color:#fff}
section{padding:clamp(3.5rem,8vh,7rem) 0;position:relative;overflow:hidden}
.sec-head{max-width:60ch;margin-bottom:clamp(2rem,5vh,3.5rem)}
.sec-head .eyebrow{margin-bottom:1.1rem}
.sec-head .title{margin-bottom:1.1rem}
.glow{position:absolute;pointer-events:none;border-radius:50%;background:var(--glow);mix-blend-mode:screen;z-index:0;
  animation:breathe 9s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.72;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}

/* ===== NAV ===== */
.nav{position:sticky;top:0;z-index:70;background:var(--paper);
  border-bottom:1px solid var(--rule);color:var(--ink)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:.9rem var(--pad-x);max-width:var(--inner);margin:0 auto}
.nav__brand{display:flex;align-items:center;gap:.7rem;padding:.45rem 0;font-size:.74rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase}
.nav__brand img{height:34px;width:auto;max-width:240px;object-fit:contain}
@media(max-width:560px){.nav__brand img{height:28px}}
.nav__links{display:flex;gap:1.6rem;align-items:center}
.nav__links a{font-size:.74rem;font-weight:400;letter-spacing:.1em;color:var(--ink-soft);transition:color .2s}
.nav__links a:hover,.nav__links a.is-active{color:var(--ink)}
.nav__cta{padding:10px 18px;font-size:.64rem}
.nav__links a.btn--blue,.nav__links a.btn--blue:hover{color:#fff}
/* dropdown de Servicios */
.nav__item{position:relative;display:flex;align-items:center}
.nav__item > a{display:inline-flex;align-items:center;gap:.45em}
.nav__item > a svg{width:11px;height:11px;transition:transform .25s var(--ease)}
.nav__item:hover > a svg,.nav__item:focus-within > a svg{transform:rotate(180deg)}
.nav__drop{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);padding-top:1.15rem;
  opacity:0;visibility:hidden;transition:opacity .22s var(--ease),transform .22s var(--ease),visibility 0s .22s;z-index:60}
.nav__item:hover .nav__drop,.nav__item:focus-within .nav__drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);transition-delay:0s}
.nav__drop-in{width:340px;background:var(--paper);border:1px solid var(--rule);box-shadow:0 28px 60px -20px rgba(0,0,0,.28);padding:.5rem}
.nav__drop-item{display:block;padding:.85rem .95rem;transition:background .18s var(--ease)}
.nav__drop-item:hover{background:rgba(26,77,255,.05)}
.nav__drop-item b{display:flex;align-items:center;gap:.55em;font-size:.88rem;font-weight:600;color:var(--ink);letter-spacing:0;text-transform:none}
.nav__drop-item b i{font-family:var(--font-mono);font-style:normal;font-size:.62rem;color:var(--blue)}
.nav__drop-item--ia b i{color:var(--amber-deep)}
.nav__drop-item--ia:hover{background:rgba(255,176,32,.07)}
.nav__drop-item span{display:block;margin-top:.2rem;font-size:.76rem;line-height:1.45;color:var(--ink-mute);letter-spacing:0;text-transform:none;font-weight:400}
/* desplegable estrecho, para las categorías del blog */
.nav__drop--sm .nav__drop-in{width:290px}
/* enlace que sale de la web: la flecha lo anuncia antes de pulsar */
.nav__ext{display:inline-flex;align-items:center;gap:.45em}
.nav__ext svg{width:10px;height:10px;transition:transform .22s var(--ease)}
.nav__ext:hover svg{transform:translate(2px,-2px)}
.nav__ext:hover{color:var(--amber-ink)}
.nav__drop-all{display:flex;align-items:center;justify-content:space-between;margin:.4rem .3rem .3rem;padding:.7rem .65rem .35rem;border-top:1px solid var(--rule);
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.nav__drop-all:hover{color:#143fd6}
/* En móvil la barra se queda en logo + hamburguesa. El CTA no se duplica:
   vive dentro del menú, donde tiene todo el ancho. */
@media(max-width:860px){.nav__links{display:none}}

/* ===== MENÚ MÓVIL ===== */
.nav__burger{display:none;position:relative;width:44px;height:44px;flex:none;
  padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.nav__burger i{position:absolute;left:11px;width:22px;height:1.5px;background:var(--ink);border-radius:2px;
  transition:transform .34s var(--ease),opacity .2s var(--ease)}
.nav__burger i:nth-child(1){top:18px}
.nav__burger i:nth-child(2){top:25px}
.nav__burger[aria-expanded="true"] i:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.nav__burger[aria-expanded="true"] i:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}
.nav__burger:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media(max-width:860px){.nav__burger{display:block}}


.mnav{position:fixed;left:0;right:0;bottom:0;top:var(--nav-h,60px);z-index:65;
  background:var(--ink);color:var(--on-dark);overflow-y:auto;-webkit-overflow-scrolling:touch;
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s}
.mnav.is-open{opacity:1;visibility:visible}
.mnav__in{min-height:100%;display:flex;flex-direction:column;
  padding:clamp(1.6rem,5vw,2.4rem) clamp(1.3rem,5vw,2rem) clamp(1.6rem,5vh,2.4rem)}
.mnav__links{display:flex;flex-direction:column}
/* cada fila entra con un pequeño retardo en cascada: es vertical, no horizontal */
.mnav__row{opacity:0;transform:translateY(14px);transition:opacity .42s var(--ease),transform .42s var(--ease)}
.mnav.is-open .mnav__row{opacity:1;transform:none;transition-delay:calc(var(--i,0) * .045s + .06s)}
.mnav__a{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem 0;border-bottom:1px solid var(--rule-dark);
  font-size:clamp(1.45rem,6.4vw,1.9rem);font-weight:300;letter-spacing:-.015em;color:#fff}
.mnav__a:hover,.mnav__a:focus-visible{color:var(--blue-soft)}
.mnav__a i{font-family:var(--font-mono);font-style:normal;font-size:.6rem;letter-spacing:.12em;
  color:var(--ink-mute);flex:none}
/* subnivel de servicios, con los mismos numerales que el desplegable de escritorio */
.mnav__sub{display:flex;flex-direction:column;gap:.1rem;padding:.7rem 0 .95rem;border-bottom:1px solid var(--rule-dark)}
.mnav__sa{display:flex;align-items:baseline;gap:.7em;padding:.42rem 0;font-size:.95rem;color:var(--ink-faint)}
.mnav__sa:hover,.mnav__sa:focus-visible{color:#fff}
.mnav__sa em{font-family:var(--font-mono);font-style:normal;font-size:.62rem;color:var(--blue-soft);flex:none}
.mnav__sa--ia em{color:var(--amber)}
.mnav__foot{margin-top:auto;padding-top:clamp(1.8rem,5vh,2.6rem)}
.mnav__foot .btn{width:100%;justify-content:center;font-size:.78rem;padding:1.15em 1.4em}
.mnav__note{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-mute);margin-top:.9rem;text-align:center}
.mnav__meta{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;justify-content:center;margin-top:1.5rem}
.mnav__meta a{display:inline-block;padding:.5rem .2rem;font-size:.82rem;color:var(--ink-faint);border-bottom:1px solid transparent}
.mnav__meta a:hover{color:#fff;border-bottom-color:currentColor}
body.mnav-abierto{overflow:hidden}
@media(min-width:861px){.mnav{display:none}}
@media(prefers-reduced-motion:reduce){
  .mnav,.mnav__row,.nav__burger i{transition:none}
  .mnav.is-open .mnav__row{transition-delay:0s}
}


/* ===== HERO ===== */
.hero{background:var(--paper);color:var(--ink);min-height:calc(100vh - 58px);display:flex;align-items:center;
  position:relative;overflow:hidden;padding:0;border-bottom:1px solid var(--rule)}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,3rem);align-items:center;width:100%;
  max-width:var(--inner);margin:0 auto;padding:clamp(2.5rem,6vh,4rem) var(--pad-x)}
.hero__copy{position:relative;z-index:3}
.hero__copy .eyebrow{margin-bottom:1.5rem}
.hero__title{font-weight:200;font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.02;letter-spacing:-.02em;color:var(--ink)}
.hero__title em{font-style:normal;color:var(--blue)}
.hero__lede{margin-top:1.6rem;font-size:clamp(1rem,1.45vw,1.25rem);font-weight:300;line-height:1.6;color:var(--ink-soft);max-width:50ch}
.hero__lede strong{color:var(--ink);font-weight:600}
.hero__cta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.2rem}
.hero__meta{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;margin-top:2.4rem;font-family:var(--font-mono);
  font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)}
.hero__meta b{color:var(--blue);font-weight:500}
.hero__rea{margin-top:1.1rem;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);display:flex;align-items:center;gap:.7em}
.hero__rea::before{content:"";width:16px;height:1px;background:var(--ink-mute);flex:none}
.hero__scroll{position:absolute;left:50%;bottom:1.6rem;transform:translateX(-50%);z-index:3;color:var(--ink-mute);animation:scrolldown 2s ease-in-out infinite}
.hero__scroll svg{display:block;width:26px;height:26px}
@keyframes scrolldown{0%,100%{transform:translateX(-50%) translateY(0);opacity:.45}50%{transform:translateX(-50%) translateY(7px);opacity:1}}
@media(prefers-reduced-motion:reduce){.hero__scroll{animation:none}}
.hero__media{position:relative;z-index:2;justify-self:end;width:100%;max-width:420px;height:clamp(440px,72vh,620px)}
.hero__media img{position:relative;z-index:2;width:100%;height:100%;object-fit:cover;object-position:center 14%}
.hero__media::before{content:"";position:absolute;z-index:1;left:-16px;top:-16px;width:52%;height:52%;border-top:2px solid var(--blue);border-left:2px solid var(--blue)}
.hero__media::after{content:"";position:absolute;z-index:1;right:-16px;bottom:-16px;width:52%;height:52%;border-bottom:2px solid var(--blue);border-right:2px solid var(--blue)}
.hero__tag{position:absolute;left:10px;top:10px;z-index:5;font-family:var(--font-mono);font-size:.58rem;
  letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(10,10,10,.5);padding:3px 7px}
.hero__media-meta{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:center;gap:.4em 1em;padding:.6rem .8rem;background:rgba(10,10,10,.72);
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.hero__media-meta span{display:inline-flex;align-items:center;gap:.4em}
.hero__media-meta span:not(:last-child)::after{content:"·";margin-left:1em;opacity:.45;color:#fff}
.hero__media-meta b{color:var(--blue-glow);font-weight:600}
.hero__media-meta .stars{color:var(--amber);font-weight:600;letter-spacing:.04em}
@media(max-width:860px){
  .hero__grid{grid-template-columns:1fr}
  .hero__media{max-width:280px;height:360px;order:-1;margin:0 auto 1rem;justify-self:center}
  .hero__media img{object-position:center 12%}
  .hero__scroll{display:none}
}

/* ===== TRUST STRIP ===== */
.trust{background:var(--ink);border-top:1px solid var(--rule-dark);color:var(--ink-faint)}
.trust__in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem 2rem;padding:1.4rem var(--pad-x);
  max-width:var(--inner);margin:0 auto;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}
.trust__in span{display:flex;align-items:center;gap:.5em}
.trust__in b{color:#fff;font-weight:500}
.trust__in .dot{width:5px;height:5px;background:var(--blue-soft);border-radius:50%}

/* ===== PROBLEMA ===== */
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem);margin-top:1rem}
/* 4 dolores en fila: gap más apretado para no comerse el ancho de texto */
.pain-grid--4{grid-template-columns:repeat(4,1fr);gap:clamp(.8rem,1.3vw,1.1rem)}
/* por debajo de 1080px cuatro columnas dejan las tarjetas ilegibles → 2x2 */
@media(max-width:1080px){.pain-grid--4{grid-template-columns:repeat(2,1fr)}}
/* Sin tarjeta: los recuadros idénticos en rejilla son la respuesta perezosa.
   El acento se muda del filete de color al numeral, que es la alternativa
   ("leading numbers") que el propio brand book propone. */
.pain{position:relative;border:0;background:none;border-top:1px solid var(--rule);
  padding:clamp(1.05rem,1.6vw,1.4rem) 0 0 clamp(2.9rem,4.4vw,3.8rem);
  display:flex;flex-direction:column;gap:.45rem}
.pain-grid--4 .pain{padding:clamp(1.05rem,1.6vw,1.4rem) 0 0 clamp(2.9rem,4.4vw,3.8rem)}
.pain__n{position:absolute;left:0;top:clamp(.6rem,1.1vw,.9rem);
  font-family:var(--font-sans);font-weight:200;font-size:clamp(1.7rem,2.6vw,2.25rem);
  line-height:1;letter-spacing:-.03em;color:var(--num)}
/* Nada de desfases verticales: en cualquier disposición horizontal los items
   van alineados y a la misma altura. La cascada la marcan los numerales y los
   filetes superiores, no un escalonado. */
.pain-grid>.pain{margin-top:0}
.pain__t{font-size:1rem;font-weight:600}
.pain__d{font-size:.92rem;color:var(--ink-soft);line-height:1.55}
.s-ink .pain{border-top-color:var(--rule-dark)}
.s-ink .pain__t{color:#fff}
.s-ink .pain__d{color:var(--ink-faint)}
/* variante IA en ámbar, igual que .svc-row--ia / .kaso--ia / .post__ov--ia */
/* el numeral necesita ámbar legible sobre blanco (3.56:1) y el vivo sobre oscuro (10.8:1) */
.pain--ia{border-top-color:var(--amber-deep);--num:var(--amber-hd)}
.s-ink .pain--ia{border-top-color:var(--amber);--num:var(--amber)}
.s-ink .pain--ia .pain__d strong{color:var(--amber)}

/* ===== SERVICIOS · índice editorial ===== */
.svc-list{border-top:1px solid var(--ink)}
.svc-row{display:grid;grid-template-columns:auto minmax(0,1.05fr) minmax(0,1.3fr) auto;gap:clamp(1rem,3vw,2.6rem);
  align-items:start;padding:clamp(1.5rem,2.8vh,2.1rem) clamp(.5rem,1.4vw,1.1rem);border-bottom:1px solid var(--rule);
  position:relative;transition:background .25s var(--ease)}
.svc-row:hover{background:rgba(26,77,255,.04)}
.svc-row__n{font-family:var(--font-mono);font-size:.82rem;font-weight:500;color:var(--blue);padding-top:.55em}
.svc-row__head{display:flex;flex-direction:column;gap:.75rem}
.svc-row__name{font-weight:200;font-size:clamp(1.3rem,2.1vw,1.9rem);letter-spacing:-.015em;line-height:1.05;color:var(--ink)}
.svc-row__tags{display:flex;flex-wrap:wrap;gap:.4rem}
.svc-row__tags span{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute);border:1px solid var(--rule);padding:.4em .6em}
.svc-row__d{font-size:.98rem;line-height:1.6;color:var(--ink-soft);padding-top:.5em;max-width:46ch}
.svc-row__d strong{color:var(--ink);font-weight:600}
.svc-row__arr{align-self:center;justify-self:end;font-size:1.25rem;color:var(--blue);opacity:0;transform:translateX(-8px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.svc-row:hover .svc-row__arr{opacity:1;transform:none}
.svc-row--core .svc-row__name{color:var(--blue)}
.svc-row--ia .svc-row__name{color:var(--amber-hd)}
.svc-row--ia .svc-row__n,.svc-row--ia .svc-row__arr{color:var(--amber-ink)}
.svc-row--ia:hover{background:rgba(255,176,32,.06)}
@media(max-width:760px){
  .svc-row{grid-template-columns:auto 1fr;gap:.3rem 1rem;padding-left:0;padding-right:0}
  .svc-row__head{grid-column:2}
  .svc-row__d{grid-column:2;padding-top:.3rem}
  .svc-row__arr{display:none}
  .pain-grid{grid-template-columns:1fr}
}

/* ===== DIFERENCIADORES ===== */
.why{background:var(--ink);color:var(--on-dark)}
.diff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--rule-dark);margin-top:1rem}
.diff{padding:clamp(1.3rem,2.2vw,1.9rem);border-right:1px solid var(--rule-dark);border-bottom:1px solid var(--rule-dark)}
.diff:nth-child(3n){border-right:none}
.diff:nth-last-child(-n+3){border-bottom:none}
.diff__n{font-weight:200;font-size:2rem;color:var(--num);line-height:1;letter-spacing:-.02em}
.diff__t{font-size:1rem;font-weight:600;color:#fff;margin:.7rem 0 .5rem}
.diff__d{font-size:.88rem;color:var(--ink-faint);line-height:1.55}
.diff__d strong{color:#fff;font-weight:600}
@media(max-width:780px){.diff-grid{grid-template-columns:1fr}.diff{border-right:none}.diff:nth-last-child(-n+3):not(:last-child){border-bottom:1px solid var(--rule-dark)}}

/* ===== PROCESO · timeline ===== */
.ptl{position:relative;margin-top:1.6rem;padding-right:18px}
.ptl__rail{position:absolute;top:11px;left:0;right:0;height:2px;z-index:1}
.ptl__rail.reveal{opacity:1!important;transform:none!important}
.ptl__rail i{display:block;height:100%;width:100%;background:var(--rule);transform:scaleX(0);transform-origin:left;transition:transform 1.15s cubic-bezier(.16,1,.3,1) .1s}
.ptl__rail.reveal.in i{transform:scaleX(1)}
.ptl__rail::after{content:"";position:absolute;right:-2px;top:50%;width:7px;height:7px;border-top:2px solid var(--rule);border-right:2px solid var(--rule);transform:translateY(-50%) rotate(45deg)}
.ptl__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,3vw,2.6rem)}
.ptl__step{position:relative;padding-top:42px}
.ptl__node{position:absolute;top:5px;left:0;width:14px;height:14px;border-radius:50%;background:var(--paper);border:2px solid var(--blue);z-index:2}
.ptl__step:last-child .ptl__node{background:var(--blue)}
.ptl__n{display:block;font-weight:200;font-size:clamp(1.9rem,2.8vw,2.7rem);line-height:1;letter-spacing:-.02em;color:var(--num)}
.ptl__t{font-size:clamp(1.05rem,1.5vw,1.35rem);font-weight:500;letter-spacing:-.005em;margin:.55rem 0;color:var(--ink)}
.ptl__d{font-size:.92rem;line-height:1.55;color:var(--ink-soft);max-width:32ch}
/* El timeline nació para secciones claras: sobre fondo oscuro el título salía
   en var(--ink), es decir negro sobre negro, y el raíl tampoco se veía. */
.s-ink .ptl__t{color:#fff}
.s-ink .ptl__d{color:var(--ink-faint)}
.s-ink .ptl__d strong{color:#fff}
.s-ink .ptl__rail i,.s-ink .ptl__rail::after{background:var(--rule-dark)}
.s-ink .ptl__rail::after{background:none;border-top-color:var(--rule-dark-strong);border-right-color:var(--rule-dark-strong)}
.s-ink .ptl__node{background:var(--ink);border-color:var(--num)}
.s-ink .ptl__step:last-child .ptl__node{background:var(--num)}
@media(max-width:760px){
  .ptl{padding-right:0}
  .ptl__rail{display:none}
  .ptl__grid{grid-template-columns:1fr;gap:0;border-left:1px solid var(--rule);margin-left:6px}
  .ptl__step{padding:0 0 1.9rem 1.7rem}
  .ptl__step:last-child{padding-bottom:0}
  .ptl__node{top:3px;left:-7px}
}

/* ===== RESULTADO (dark · acento del tema) ===== */
.result{background:var(--ink);color:var(--on-dark);--num:var(--blue-soft)}
.ia-theme .result{--num:var(--amber)}
.result__grid{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.5rem,5vw,4rem);align-items:center}
.result__stat{font-weight:200;font-size:clamp(3.5rem,9vw,6.5rem);line-height:.9;letter-spacing:-.03em;color:var(--num)}
.result__stat span{font-size:.4em;color:var(--num)}
.result__cap{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin-top:.8rem}
.result__txt{font-size:clamp(1.05rem,1.6vw,1.35rem);font-weight:300;line-height:1.55;color:var(--ink-faint);
  border-left:2px solid var(--num);padding-left:clamp(1rem,1.6vw,1.5rem);max-width:46ch}
.result__txt strong{color:#fff;font-weight:600}
.result .glow{width:46vw;height:46vw;max-width:560px;max-height:560px;top:-18vh;left:-8vw}
@media(max-width:680px){.result__grid{grid-template-columns:1fr;gap:1.5rem}}

/* ===== TESTIMONIO ===== */
.quote{max-width:50ch}
.quote__q{font-weight:200;font-size:clamp(1.4rem,3vw,2.1rem);line-height:1.35;letter-spacing:-.01em}
.quote__q em{font-style:normal;color:var(--blue)}
.quote__a{margin-top:1.3rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)}

/* ===== CTA FINAL ===== */
.cta{background:var(--ink);color:var(--on-dark);text-align:center}
.cta .wrap{display:flex;flex-direction:column;align-items:center}
.cta__title{font-weight:200;font-size:clamp(2rem,5vw,3.4rem);line-height:1.05;color:#fff;max-width:18ch}
.cta__title em{font-style:normal;color:var(--blue-soft)}
.cta__sub{margin-top:1.2rem;font-size:1.05rem;font-weight:300;color:var(--ink-faint);max-width:48ch}
.cta__row{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:2.2rem}
.cta .glow{width:54vw;height:54vw;max-width:680px;max-height:680px;bottom:-30vh;right:-6vw}

/* ===== FOOTER ===== */
.foot{background:var(--ink);color:var(--ink-faint);border-top:1px solid var(--rule-dark)}
.foot__in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.5rem;padding:2.4rem var(--pad-x);max-width:var(--inner);margin:0 auto}
.foot__brand{display:flex;align-items:center;gap:.7rem;font-size:.74rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#fff}
.foot__brand img{width:28px;height:28px}
.foot__col{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;line-height:1.9}
.foot__col a:hover{color:var(--blue-soft)}
@media(max-width:760px){.foot__col a,.foot__col span{display:inline-block;padding:.38rem 0}
  .foot__col br{display:none}
  .foot__col{display:flex;flex-direction:column;align-items:flex-start}}
.foot__legal{width:100%;border-top:1px solid var(--rule-dark);padding:1.1rem var(--pad-x);max-width:var(--inner);margin:0 auto;
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem}

/* ===== EMPRESAS / LOGOS ===== */
.logos{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:clamp(.8rem,2vw,1.8rem);
  overflow-x:auto;scrollbar-width:none;padding:.4rem 0}
.logos::-webkit-scrollbar{display:none}
.logos__logo{height:clamp(64px,7.5vw,96px);width:auto;max-width:150px;flex:0 0 auto;object-fit:contain;
  filter:grayscale(1) contrast(1.05);opacity:.72;transition:opacity .25s var(--ease)}
.logos__logo:hover{opacity:1}
.logos__item{font-family:var(--font-mono);font-size:clamp(.95rem,1.7vw,1.3rem);font-weight:500;letter-spacing:.02em;
  color:var(--ink-mute);opacity:.7;text-transform:uppercase;transition:opacity .2s,color .2s}
.logos__item:hover{opacity:1;color:var(--ink)}
.ph-note{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}

/* ===== TESTIMONIOS · carrusel ===== */
.tst-carousel{position:relative}
.tst-track{display:flex;align-items:flex-start;gap:clamp(1rem,2vw,1.6rem);overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding:.4rem .4rem 1.7rem;margin:-.4rem -.4rem 0}
.tst-track::-webkit-scrollbar{display:none}
.tst-track:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.tst{flex:0 0 clamp(280px,42%,400px);min-height:230px;scroll-snap-align:start;
  border:1px solid var(--rule);padding:clamp(1.4rem,2.4vw,2rem);margin:0;
  display:flex;flex-direction:column;gap:1.4rem;background:var(--paper);
  transition:border-color .25s var(--ease),transform .35s var(--ease)}
.tst:hover{border-color:var(--blue);transform:translateY(-3px)}
/* cita larga: se ensancha en lugar de estirarse, así el carrusel no se descuadra */
.tst--wide{flex:0 0 clamp(280px,84%,760px)}
.tst--wide .tst__q{font-size:1rem}
.tst__q{font-size:1.05rem;line-height:1.5;color:var(--ink);font-weight:300;margin:0}
.tst__q em{font-style:normal;color:var(--blue);font-weight:400}
/* En móvil una cita de 123 palabras deja la tarjeta en 767 px y descuadra el carrusel.
   Se recorta visualmente a 9 líneas con un botón para desplegarla: el texto está entero,
   sólo se pide un toque. De 701 px hacia arriba se ve completa sin interacción. */
.tst__more{display:none}
@media(max-width:700px){
  .tst__q{display:-webkit-box;-webkit-line-clamp:9;-webkit-box-orient:vertical;overflow:hidden}
  .tst.is-open .tst__q{display:block;-webkit-line-clamp:unset}
  .tst__more{display:inline-flex;align-items:center;gap:.4em;align-self:flex-start;
    margin-top:-1.2rem;padding:.6rem 0;min-height:38px;border:0;background:none;cursor:pointer;
    font-family:var(--font-mono);font-size:.64rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
    color:var(--blue);border-bottom:1px solid transparent}
  .tst__more:hover{border-bottom-color:currentColor}
}
.tst__by{display:flex;align-items:center;gap:.85rem;margin-top:auto}
.tst__av{width:50px;height:50px;border-radius:50%;object-fit:cover;flex:none}
.tst__av--ph{display:flex;align-items:center;justify-content:center;background:var(--ink);color:#fff;
  font-family:var(--font-mono);font-size:.82rem;font-weight:500;letter-spacing:.03em}
.tst__meta{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-mute);line-height:1.6}
.tst__meta b{color:var(--ink);font-weight:600;display:block}
.tst-nav{display:flex;align-items:center;gap:1.5rem;margin-top:.4rem}
.tst-progress{flex:1;max-width:240px;height:2px;background:var(--rule);position:relative;overflow:hidden}
.tst-progress i{position:absolute;inset:0;background:var(--blue);transform-origin:left;transform:scaleX(.15);transition:transform .3s var(--ease)}
.tst-btns{display:flex;gap:.6rem;margin-left:auto}
.tst-btn{width:46px;height:46px;border:1px solid var(--rule-strong);background:transparent;color:var(--ink);
  border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.tst-btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.tst-btn:disabled{opacity:.28;cursor:default}
.tst-btn:disabled:hover{background:transparent;color:var(--ink);border-color:var(--rule-strong)}
.tst-btn svg{width:16px;height:16px}
@media(prefers-reduced-motion:reduce){.tst-track{scroll-behavior:auto}}
@media(max-width:780px){.tst{flex:0 0 86%}}

/* ===== CARDS DE CONTENIDO (blog + linkedin) ===== */
.post-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.8rem,1.6vw,1.3rem)}
.post{border:1px solid var(--rule);display:flex;flex-direction:column;overflow:hidden;
  background:var(--paper);transition:border-color .25s var(--ease),transform .35s var(--ease)}
.post:hover{border-color:var(--blue);transform:translateY(-3px)}
.post__thumb{position:relative;height:160px;overflow:hidden;border-bottom:1px solid var(--rule)}
.post__thumb img{width:100%;height:100%;object-fit:cover}
.post__thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(8,9,14,.72) 0%,rgba(8,9,14,.05) 55%,transparent 100%)}
.post__ov{position:absolute;left:14px;bottom:11px;z-index:2;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.post__ov--ia{color:var(--amber)}                 /* IA sobre B&N · ámbar contrasta */
.post__ov--seo{color:#fff}                        /* SEO sobre duotono azul · texto BLANCO (nunca azul sobre azul) */
.post__excerpt{font-size:.85rem;line-height:1.55;color:var(--ink-soft)}
.s-ink .post__excerpt{color:var(--ink-faint)}
.post__body{padding:clamp(1.1rem,1.9vw,1.4rem);display:flex;flex-direction:column;gap:.7rem;flex:1;min-height:168px}
.post__tag{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.post__t{font-size:1rem;font-weight:600;line-height:1.3;color:var(--ink)}
.post__lnk{margin-top:auto;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.s-ink .post{border-color:var(--rule-dark);background:transparent}
.s-ink .post:hover{border-color:var(--blue-soft)}
.s-ink .post__thumb{border-bottom-color:var(--rule-dark)}
.s-ink .post__t{color:#fff}
.s-ink .post__tag,.s-ink .post__lnk{color:var(--blue-soft)}
@media(max-width:980px){.post-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.post-grid{grid-template-columns:1fr}}

/* ===== CASOS DE ÉXITO · bento editorial con imagen ===== */
.casos-bento{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(.8rem,1.5vw,1.3rem)}
.kaso{position:relative;overflow:hidden;border:1px solid var(--rule);display:flex;flex-direction:column;justify-content:flex-end;
  min-height:248px;color:#fff;transition:transform .4s var(--ease),border-color .25s var(--ease)}
.kaso:hover{transform:translateY(-3px);border-color:var(--blue)}
.kaso__img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.kaso:hover .kaso__img{transform:scale(1.04)}
/* imagen siempre en B&N neutro y más oscura: el color (azul SEO / ámbar IA) lo aporta el texto */
.kaso__img{filter:grayscale(1) contrast(1.05) brightness(.84)}
.kaso::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(7,8,12,.97) 0%,rgba(7,8,12,.9) 30%,rgba(7,8,12,.64) 52%,rgba(7,8,12,.32) 76%,rgba(7,8,12,.1) 100%)}
.kaso__body{position:relative;z-index:2;padding:clamp(1.3rem,2.2vw,1.9rem);display:flex;flex-direction:column;gap:.45rem;
  text-shadow:0 1px 14px rgba(5,6,10,.55)}
.kaso__metric{font-weight:200;font-size:clamp(2rem,3.4vw,3rem);line-height:1;letter-spacing:-.02em;color:#fff}
.kaso--feature .kaso__metric{font-size:clamp(2.6rem,5vw,4rem)}
.kaso__cap{font-family:var(--font-mono);font-size:.62rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-glow)}
.kaso__txt{font-size:.92rem;line-height:1.5;color:rgba(255,255,255,.85);max-width:46ch;margin-top:.25rem}
.kaso__txt strong{color:#fff;font-weight:600}
.kaso__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1rem;margin-top:.7rem;padding-top:.9rem;border-top:1px solid rgba(255,255,255,.2)}
.kaso__logo{font-family:var(--font-mono);font-size:.9rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:#fff}
/* Chip blanco para el logo del cliente (sustituye al texto .kaso__logo cuando haya archivo) */
.kaso__chip{display:inline-flex;align-items:center;justify-content:center;background:#fff;border-radius:10px;
  padding:.6rem .9rem;box-shadow:0 8px 24px -6px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.5);text-shadow:none;
  transition:box-shadow .32s var(--ease)}
/* el logo es lo que identifica el caso: tamaño normalizado por área de tinta (--h/--w por logo,
   calculados como h=sqrt(A/ratio)) para que todos pesen lo mismo aunque cambie la proporción */
.kaso__chip img{display:block;max-width:none;object-fit:contain;
  width:calc(var(--w,100) * 1px * var(--chip-k,1));height:calc(var(--h,26) * 1px * var(--chip-k,1));
  filter:grayscale(1) contrast(1.06);transition:filter .34s var(--ease)}
/* al pasar por encima, el logo se enciende a color */
.kaso:hover .kaso__chip img,.kaso:focus-visible .kaso__chip img{filter:none}
.kaso:hover .kaso__chip,.kaso:focus-visible .kaso__chip{box-shadow:0 12px 30px -6px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.85)}
@media(max-width:600px){.kaso__chip{--chip-k:.86;padding:.5rem .75rem}}
@media(prefers-reduced-motion:reduce){.kaso__chip,.kaso__chip img{transition:none}}
/* Placeholder de texto dentro del chip (recordatorio: sustituir por el logo real) */
.kaso__chip--ph{font-family:var(--font-mono);font-size:.7rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.kaso--a .kaso__chip--ph{font-size:.8rem}
.kaso__lnk{font-family:var(--font-mono);font-size:.64rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-glow);white-space:nowrap}
.kaso--ia .kaso__cap,.kaso--ia .kaso__lnk{color:var(--amber)}
.kaso--ia:hover{border-color:var(--amber)}
/* ===== CASOS · página madre: filtro por sector + listado ===== */
.casos-filtro{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;margin-bottom:clamp(1.6rem,3.5vh,2.4rem)}
.filtro__chip{font-family:var(--font-mono);font-size:.68rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  padding:.66em 1.1em;border:1px solid var(--rule-strong);background:transparent;color:var(--ink-soft);
  border-radius:999px;cursor:pointer;transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease)}
.filtro__chip:hover{border-color:var(--ink);color:var(--ink)}
.filtro__chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.filtro__chip i{font-style:normal;opacity:.55;margin-left:.55em}
@media(max-width:600px){.filtro__chip{padding:.85em 1.15em}}
.casos-count{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);margin-left:auto}
@media(max-width:620px){.casos-count{margin-left:0;width:100%}}

.casos-lista{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.8rem,1.5vw,1.3rem)}
.casos-lista .kaso{min-height:clamp(278px,29vw,336px)}
/* la primera tarjeta visible manda: se recalcula al filtrar, así el grid nunca deja huecos */
.casos-lista .kaso.is-lead{grid-column:1 / -1;min-height:clamp(340px,37vw,432px)}
.casos-lista .kaso.is-lead .kaso__metric{font-size:clamp(2.6rem,5vw,4rem)}
.casos-lista .kaso[hidden]{display:none}
@media(max-width:760px){.casos-lista{grid-template-columns:1fr}
  .casos-lista .kaso.is-lead{min-height:clamp(280px,58vw,352px)}}
/* etiqueta de sector sobre la imagen: explica por qué la tarjeta ha entrado en el filtro */
.kaso__tag{position:absolute;z-index:2;top:clamp(.85rem,1.6vw,1.15rem);left:clamp(.85rem,1.6vw,1.15rem);
  font-family:var(--font-mono);font-size:.6rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  padding:.45em .85em;border-radius:999px;color:#fff;background:rgba(8,9,12,.66);
  border:1px solid rgba(255,255,255,.26);text-shadow:none}
/* caso sin ficha publicada todavía: no es un enlace, así que no se comporta como tal */
.kaso--soon{cursor:default}
.kaso--soon:hover{transform:none;border-color:var(--rule)}
.kaso--soon:hover .kaso__img{transform:none}
.kaso--soon .kaso__lnk{color:rgba(255,255,255,.55)}

/* spans del bento (12 col) */
.kaso--a{grid-column:span 7;grid-row:span 2;min-height:432px}
.kaso--b{grid-column:span 5}
.kaso--c{grid-column:span 5}
.kaso--d{grid-column:span 6}
.kaso--e{grid-column:span 6}
@media(max-width:900px){
  .casos-bento{grid-template-columns:repeat(2,1fr)}
  .kaso--a{grid-column:1 / -1;grid-row:auto;min-height:320px}
  .kaso--b,.kaso--c,.kaso--d,.kaso--e{grid-column:span 1}
}
@media(max-width:560px){
  .casos-bento{grid-template-columns:1fr}
  .kaso,.kaso--a,.kaso--b,.kaso--c,.kaso--d,.kaso--e{grid-column:1 / -1;grid-row:auto;min-height:258px}
}

/* ===== LOCAL SEVILLA ===== */
.local-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.5rem,4vw,3rem);align-items:stretch}
.zonas{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem}
.zona{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--rule);padding:.5em .8em;color:var(--ink-soft)}
.nap{border:1px solid var(--rule);border-top:2px solid var(--blue);padding:clamp(1.3rem,2.4vw,1.8rem);display:flex;flex-direction:column;gap:.9rem;background:var(--paper)}
.nap__row{display:flex;gap:.8rem;align-items:flex-start;font-size:.92rem;color:var(--ink-soft);line-height:1.5}
.nap__row b{color:var(--ink);font-weight:600}
.nap__k{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);min-width:56px;padding-top:.25em;flex:none}
@media(max-width:780px){.local-grid{grid-template-columns:1fr}}

/* ===== AGENCIA VS CONSULTOR ===== */
.vs2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2vw,1.6rem)}
.vs2__col{border:1px solid var(--rule);padding:clamp(1.4rem,2.4vw,2rem);display:flex;flex-direction:column;gap:1rem;background:var(--paper)}
.vs2__col--good{border-top:2px solid var(--blue)}
.vs2__h{font-size:1.05rem;font-weight:600;letter-spacing:.02em}
.vs2__col--bad .vs2__h{color:var(--ink-mute)}
.vs2__col--good .vs2__h{color:var(--blue)}
.vs2__list{list-style:none;display:flex;flex-direction:column;gap:.6rem}
.vs2__list li{position:relative;padding-left:1.5em;font-size:.93rem;line-height:1.5;color:var(--ink-soft)}
.vs2__col--bad li::before{content:"✕";position:absolute;left:0;color:var(--ink-mute);font-weight:700}
.vs2__col--good li::before{content:"✓";position:absolute;left:0;color:var(--blue);font-weight:700}
/* columna de IA: ámbar en el borde, el título y las marcas. Se usa --amber-ink
   porque el check es texto pequeño y necesita 4.5:1 sobre blanco */
.vs2__col--ia{border-top-color:var(--amber)}
.vs2__col--ia .vs2__h{color:var(--amber-ink)}
.vs2__col--ia li::before{color:var(--amber-ink)}
@media(max-width:680px){.vs2{grid-template-columns:1fr}}

/* ===== SECTORES ===== */
.sectores{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--rule)}
.sector{padding:clamp(1rem,1.8vw,1.3rem);border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);font-size:.95rem;font-weight:500;color:var(--ink);display:flex;align-items:center;gap:.6em}
.sector::before{content:"";width:.55em;height:.55em;background:var(--blue);flex:none}
.sector:nth-child(4n){border-right:none}
.sector:nth-last-child(-n+4){border-bottom:none}
@media(max-width:780px){.sectores{grid-template-columns:1fr 1fr}.sector:nth-child(4n){border-right:1px solid var(--rule)}.sector:nth-child(2n){border-right:none}}

/* ===== SOBRE MÍ ===== */
.about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(1.5rem,4vw,3.2rem);align-items:center}
.about__photo{position:relative;height:clamp(320px,46vh,440px);overflow:hidden;border:1px solid var(--rule)}
.s-ink .about__photo{border-color:var(--rule-dark)}
.about__photo img{width:100%;height:100%;object-fit:cover;object-position:center 12%}
.about__certs{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.3rem}
.about__cert{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--rule-strong);padding:.45em .75em;color:var(--ink-soft)}
.s-ink .about__cert{border-color:var(--rule-dark-strong);color:var(--ink-faint)}
@media(max-width:780px){.about-grid{grid-template-columns:1fr}.about__photo{height:340px}}

/* ===== FAQ ===== */
.faq{border-top:1px solid var(--rule)}
.faq__item{border-bottom:1px solid var(--rule)}
.faq__q{font-size:1.05rem;font-weight:600;color:var(--ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1.2rem 0}
.faq__q::-webkit-details-marker{display:none}
.faq__q::after{content:"+";color:var(--blue);font-weight:300;font-size:1.5em;line-height:1;transition:transform .25s var(--ease)}
.faq__item[open] .faq__q::after{transform:rotate(45deg)}
.faq__a{font-size:.95rem;line-height:1.6;color:var(--ink-soft);max-width:78ch;padding:0 0 1.3rem}
.faq__a strong{color:var(--ink);font-weight:600}

/* ===== PÁGINA SOBRE MÍ · CV + listas ===== */
.about-lead{max-width:62ch}
.about-lead p{font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.7;color:var(--ink-soft);margin-bottom:1.1rem}
.about-lead p strong{color:var(--ink);font-weight:600}
.s-ink .about-lead p{color:var(--ink-faint)}
.s-ink .about-lead p strong{color:#fff}
/* hero Sobre mí sin foto: título grande + columna de datos */
.about-hero__title{font-weight:200;font-size:clamp(2.4rem,5.5vw,4.2rem);line-height:1.02;letter-spacing:-.02em;color:var(--ink);margin:1.1rem 0 0}
.about-hero__title em{font-style:normal;color:var(--blue)}
.about-hero__grid{display:grid;grid-template-columns:1.5fr .8fr;gap:clamp(2rem,5vw,4.5rem);align-items:start;margin-top:clamp(2rem,5vh,3.4rem)}
.about-hero__facts{border-top:2px solid var(--ink);margin:0}
.about-hero__fact{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;padding:.85rem 0;border-bottom:1px solid var(--rule)}
.about-hero__fact dt{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute)}
.about-hero__fact dd{margin:0;font-family:var(--font-mono);font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--blue);font-weight:600}
@media(max-width:780px){.about-hero__grid{grid-template-columns:1fr;gap:2rem}}
.cv{border-top:1px solid var(--rule)}
.s-ink .cv{border-top-color:var(--rule-dark)}
.cv__item{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.7fr);gap:clamp(1rem,3vw,2.6rem);
  padding:clamp(1.4rem,2.6vh,2rem) 0;border-bottom:1px solid var(--rule);align-items:start}
.s-ink .cv__item{border-bottom-color:var(--rule-dark)}
.cv__role{font-size:clamp(1.1rem,1.7vw,1.45rem);font-weight:500;letter-spacing:-.01em;color:var(--ink);line-height:1.2}
.s-ink .cv__role{color:#fff}
.cv__org{display:block;margin-top:.45rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.s-ink .cv__org{color:var(--blue-soft)}
.cv__d{font-size:.97rem;line-height:1.6;color:var(--ink-soft)}
.s-ink .cv__d{color:var(--ink-faint)}
.cv__d strong{color:var(--ink);font-weight:600}.s-ink .cv__d strong{color:#fff}
.cv__d + .cv__d{margin-top:.9rem}
@media(max-width:680px){.cv__item{grid-template-columns:1fr;gap:.55rem}}
/* lista de enlaces (medios, artículos) */
.mlist{border-top:1px solid var(--rule)}
.mitem{display:flex;gap:1rem 1.4rem;justify-content:space-between;align-items:baseline;flex-wrap:wrap;
  padding:1.1rem 0;border-bottom:1px solid var(--rule);transition:padding-left .25s var(--ease)}
a.mitem:hover{padding-left:.5rem}
.mitem__t{font-size:1.02rem;color:var(--ink);font-weight:500;max-width:64ch;line-height:1.4}
a.mitem:hover .mitem__t{color:var(--blue)}
.mitem__src{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);white-space:nowrap}
.s-ink .mlist{border-top-color:var(--rule-dark)}
.s-ink .mitem{border-bottom-color:var(--rule-dark)}
.s-ink .mitem__t{color:#fff}
.s-ink .mitem__src{color:var(--blue-soft)}
.s-ink a.mitem:hover .mitem__t{color:var(--blue-soft)}

/* ===== CARRUSEL LINKEDIN (home) ===== */
.li-carousel{position:relative;margin-top:clamp(1.5rem,4vh,2.5rem)}
.li-track{display:flex;gap:clamp(1rem,2vw,1.5rem);overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;padding:.3rem .3rem 1.4rem}
.li-track::-webkit-scrollbar{display:none}
.li-post{flex:0 0 clamp(300px,33%,440px);display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--rule-dark);overflow:hidden}
.li-post__stats{display:flex;gap:1.4rem;padding:.85rem 1.1rem;border-bottom:1px solid var(--rule);font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute)}
.li-post__stats b{color:var(--blue);font-weight:600}
.li-post iframe{width:100%;height:600px;border:0;display:block;background:#fff}
.li-nav{display:flex;align-items:center;justify-content:flex-end;gap:.6rem;margin:0 0 1.2rem}
.li-btn{width:46px;height:46px;border:1px solid var(--rule-dark-strong);background:transparent;color:#fff;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.li-btn:hover{background:#fff;color:var(--ink);border-color:#fff}
.li-btn:disabled{opacity:.3;cursor:default}
.li-btn:disabled:hover{background:transparent;color:#fff}
.li-btn svg{width:16px;height:16px}

/* ===== PÁGINAS DE SERVICIO ===== */
/* hero negro con flash azul + numeral firma */
.svc-hero{background:var(--ink);color:var(--on-dark);position:relative;overflow:hidden;padding:clamp(3.5rem,9vh,6.5rem) 0}
.svc-hero__num{position:absolute;right:clamp(-50px,1vw,40px);top:50%;transform:translateY(-50%);
  font-family:var(--font-mono);font-weight:500;font-size:clamp(210px,27vw,400px);line-height:1;letter-spacing:-.06em;
  color:rgba(125,164,255,.07);pointer-events:none;user-select:none}
.svc-hero--ia .svc-hero__num{color:rgba(255,176,32,.08)}
.svc-hero .bcrumb{color:var(--ink-mute)}
.svc-hero .bcrumb a:hover{color:var(--blue-soft)}
.svc-hero__title{font-weight:200;font-size:clamp(2.2rem,5vw,3.9rem);line-height:1.05;letter-spacing:-.02em;color:#fff;max-width:21ch;position:relative;z-index:1}
.svc-hero__title em{font-style:normal;color:var(--blue-soft)}
.svc-hero--ia .svc-hero__title em{color:var(--amber)}
.svc-hero .lede{color:var(--ink-faint);position:relative;z-index:1}
.svc-hero .lede strong{color:#fff}
.svc-hero .hero__rea{color:var(--ink-mute)}
.svc-hero .eyebrow{color:var(--blue-soft)}
.svc-hero--ia .eyebrow{color:var(--amber)}
/* sub-nav sticky de anclas */
.subnav{position:sticky;top:var(--nav-h,60px);z-index:45;background:rgba(255,255,255,.93);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.subnav__in{max-width:var(--inner);margin:0 auto;padding:0 var(--pad-x);display:flex;gap:clamp(1.1rem,2.5vw,2rem);overflow-x:auto;scrollbar-width:none}
.subnav__in::-webkit-scrollbar{display:none}
.subnav a{font-family:var(--font-mono);font-size:.63rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);
  padding:1rem 0 .85rem;border-bottom:2px solid transparent;white-space:nowrap;transition:color .2s var(--ease),border-color .2s var(--ease)}
.subnav a:hover{color:var(--ink)}
.subnav a.is-active{color:var(--blue);border-bottom-color:var(--blue)}
/* que el ancla no aterrice debajo de las dos barras pegadas */
[id]{scroll-margin-top:calc(var(--nav-h,60px) + var(--subnav-h,48px) + 1.2rem)}
/* bloque espejo (el problema en palabras del cliente) */
.mirror{border-top:2px solid var(--ink);max-width:64ch}
.mirror__row{display:grid;grid-template-columns:auto 1fr;gap:clamp(1rem,3vw,2.2rem);align-items:baseline;padding:clamp(1.4rem,3vh,2rem) 0;border-bottom:1px solid var(--rule)}
.mirror__n{font-family:var(--font-mono);font-size:.78rem;color:var(--ink-faint)}
.mirror__q{font-weight:200;font-size:clamp(1.4rem,3vw,2.3rem);line-height:1.25;letter-spacing:-.015em;color:var(--ink)}
.mirror__q strong{font-weight:600}
.mirror__ans{padding:clamp(1.4rem,3vh,2rem) 0 0;font-size:clamp(1.15rem,1.8vw,1.45rem);font-weight:500;color:var(--blue)}
/* checklist editorial de auditoría */
.audit-list{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(2.4rem,5vw,4.5rem);border-top:2px solid var(--ink)}
.audit-item{display:grid;grid-template-columns:auto 1fr;gap:clamp(.9rem,2vw,1.4rem);padding:clamp(1.2rem,2.4vh,1.7rem) 0;border-bottom:1px solid var(--rule)}
.audit-item__n{font-family:var(--font-mono);font-size:.8rem;font-weight:500;color:var(--blue);padding-top:.35em}
.audit-item b{display:block;font-size:1.05rem;font-weight:600;color:var(--ink);margin-bottom:.35rem}
.audit-item p{font-size:.92rem;line-height:1.6;color:var(--ink-soft)}
.audit-item--ia .audit-item__n{color:var(--amber-ink)}
@media(max-width:760px){.audit-list{grid-template-columns:1fr}}
/* tarjetas de precio */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem);margin-top:1.4rem}
@media(max-width:860px){.price-grid{grid-template-columns:1fr}}
.price{border:1px solid var(--rule);border-top:2px solid var(--blue);padding:clamp(1.5rem,2.4vw,2.1rem);
  display:flex;flex-direction:column;gap:.9rem;background:var(--paper)}
.price--hi{border-top-color:var(--amber);background:var(--ink);color:var(--on-dark);border-color:var(--rule-dark)}
.price__t{font-size:1.05rem;font-weight:600;color:var(--ink)}
.price--hi .price__t{color:#fff}
.price__n{font-weight:200;font-size:clamp(2rem,3.2vw,2.6rem);line-height:1;letter-spacing:-.02em;color:var(--blue)}
.price--hi .price__n{color:var(--amber)}
.price__n small{font-size:.42em;font-weight:400;color:var(--ink-mute);letter-spacing:0}
.price--hi .price__n small{color:var(--ink-faint)}
.price__list{list-style:none;display:flex;flex-direction:column;gap:.5rem;flex:1}
.price__list li{position:relative;padding-left:1.4em;font-size:.9rem;line-height:1.5;color:var(--ink-soft)}
.price--hi .price__list li{color:var(--ink-faint)}
.price__list li::before{content:"✓";position:absolute;left:0;color:var(--blue);font-weight:700}
.price--hi .price__list li::before{color:var(--amber)}
.price .btn{justify-content:center}
/* definiciones citables (GEO/AEO/LLMO, ¿qué es...?) */
.def{border-left:none;border:1px solid var(--rule);padding:clamp(1.2rem,2vw,1.6rem);background:var(--paper)}
.def__k{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);display:block;margin-bottom:.5rem}
.def__t{font-size:1.05rem;font-weight:600;color:var(--ink);margin-bottom:.4rem}
.def__d{font-size:.93rem;line-height:1.6;color:var(--ink-soft)}
.def-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2vw,1.4rem)}
@media(max-width:680px){.def-grid{grid-template-columns:1fr}}
/* bloque respuesta directa (extraíble por AI Overviews) */
/* ===== RESPUESTA DESTACADA =====
   Sin contenedor. Nada de recuadro, relleno plano ni barra lateral de color:
   la jerarquía es puramente tipográfica (2º cuerpo más grande de la página,
   entre el H2 y el texto corrido) y el destacado es un trazo de rotulador
   sobre la frase que de verdad importa, que se dibuja al entrar en pantalla. */
.answer{position:relative;max-width:42ch;margin-top:clamp(1.5rem,3vh,2.3rem);
  padding-left:clamp(2.2rem,4.6vw,3.6rem);
  font-size:clamp(1.22rem,2.1vw,1.6rem);font-weight:300;line-height:1.38;
  letter-spacing:-.017em;color:var(--ink);font-style:italic;text-wrap:pretty}
/* comilla latina de apertura en la esquina: mismo recurso que el numeral
   gigante translúcido de los heroes de servicio, a escala de bloque.
   El "/ ''" es alt text vacío: decorativa, los lectores de pantalla la ignoran */
.answer::before{content:"«" / "";position:absolute;left:0;top:-.1em;
  font-size:clamp(2.7rem,5.2vw,3.9rem);line-height:.78;font-weight:400;
  color:var(--mark-glyph);pointer-events:none;user-select:none}
.answer strong{font-weight:400}
/* el trazo: banda a la altura de la x, recortada antes de los descendentes,
   y con box-decoration-break para que sobreviva al salto de línea */
.answer mark{color:inherit;font-weight:500;padding:0 .16em;margin:0 -.16em;
  background-color:transparent;
  background-image:linear-gradient(180deg,transparent 50%,var(--mark) 50%,var(--mark) 94%,transparent 94%);
  background-repeat:no-repeat;background-size:0 100%;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  transition:background-size 1.15s cubic-bezier(.16,1,.3,1) .28s}
.answer.in mark,.answer:not(.reveal) mark{background-size:100% 100%}
@media(prefers-reduced-motion:reduce){
  .answer mark{background-size:100% 100%;transition:none}
}
/* chips de herramientas / plataformas */
.tool-chips{display:flex;flex-wrap:wrap;gap:.6rem}
.tool-chip{display:inline-flex;align-items:center;gap:.5em;border:1px solid var(--rule-strong);padding:.6em 1em;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}

/* ===== BANNER CTA bajo servicios ===== */
.svc-cta{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(1.6rem,4vw,3.5rem);
  background:var(--blue);color:#fff;padding:clamp(2.2rem,4.5vw,3.4rem) clamp(1.8rem,4vw,3.4rem);
  margin-top:clamp(2rem,5vh,3.2rem);position:relative;overflow:hidden}
.svc-cta::before{content:"?";position:absolute;right:clamp(-30px,2vw,40px);top:50%;transform:translateY(-50%) rotate(8deg);
  font-weight:800;font-size:clamp(220px,30vw,420px);line-height:1;color:rgba(255,255,255,.09);pointer-events:none;user-select:none}
.svc-cta::after{content:"";position:absolute;left:-140px;bottom:-180px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 70%);pointer-events:none}
.svc-cta__k{display:block;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.75);margin-bottom:.9rem}
.svc-cta__t{font-weight:200;font-size:clamp(1.5rem,2.9vw,2.3rem);line-height:1.2;letter-spacing:-.015em;color:#fff;max-width:24ch}
.svc-cta__t strong{font-weight:600}
.svc-cta__act{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:.8rem}
.svc-cta__act .btn{padding:18px 32px;font-size:.78rem}
.svc-cta__act .btn svg{transition:transform .25s var(--ease)}
.svc-cta__act .btn:hover svg{transform:translateX(4px)}
.svc-cta__note{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.75)}
@media(max-width:760px){.svc-cta{grid-template-columns:1fr}.svc-cta::before{font-size:260px;right:-60px;top:auto;bottom:-80px;transform:rotate(8deg)}}

/* ===== CLICANDSEO · herramienta propia ===== */
.cseo-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media(max-width:860px){.cseo-grid{grid-template-columns:1fr}}
.cs-wordmark{font-size:clamp(2rem,4.2vw,3.2rem);letter-spacing:-.03em;color:#fff;line-height:1;display:inline-block}
.cs-wordmark b{font-weight:800}
.cs-wordmark .and{font-weight:400;opacity:.5}
.cs-wordmark .dot{font-weight:800;color:#D8F9B8}
.cseo-free{display:inline-flex;align-items:center;gap:.6em;margin-top:1.6rem;border:1px solid rgba(216,249,184,.5);
  padding:.7em 1em;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#D8F9B8}
.cseo-free::before{content:"";width:.55em;height:.55em;background:#D8F9B8;border-radius:50%;flex:none}
.ia-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.8rem,1.6vw,1.2rem)}
.ia-chip{background:#fff;border-radius:10px;padding:clamp(1rem,1.8vw,1.4rem) 1rem;display:flex;align-items:center;justify-content:center;
  transition:transform .3s var(--ease)}
.ia-chip:hover{transform:translateY(-3px)}
.ia-chip img{height:clamp(28px,3vw,38px);width:auto;max-width:100%;object-fit:contain}
@media(max-width:480px){.ia-grid{grid-template-columns:1fr 1fr}.ia-chip img{height:24px}}

/* ===== FORMULARIO DE CONTACTO ===== */
.cform{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.cform .full{grid-column:1 / -1}
.cform label{display:flex;flex-direction:column;gap:.45rem;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)}
.cform input,.cform textarea,.cform select{font-family:var(--font-sans);font-size:1rem;color:var(--ink);background:var(--paper);
  border:1px solid var(--rule-strong);padding:.85em 1em;border-radius:0;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.cform input:focus,.cform textarea:focus,.cform select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,77,255,.12)}
.cform textarea{min-height:150px;resize:vertical}
.cform .check{flex-direction:row;align-items:flex-start;gap:.7rem;text-transform:none;letter-spacing:0;font-family:var(--font-sans);font-size:.85rem;color:var(--ink-soft);line-height:1.5}
.cform .check input{width:17px;height:17px;margin-top:2px;flex:none;accent-color:var(--blue)}
.cform .check a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.cform button{justify-content:center}
.cform button[disabled]{opacity:.55;cursor:wait;transform:none}
.form-msg{grid-column:1 / -1;padding:1rem 1.2rem;font-size:.95rem;line-height:1.5;display:none}
.form-msg.ok{display:block;background:rgba(26,77,255,.07);border:1px solid var(--blue);color:var(--ink)}
.form-msg.err{display:block;background:rgba(220,60,60,.06);border:1px solid #c0392b;color:#8e2c20}
.hp-field{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
@media(max-width:680px){.cform{grid-template-columns:1fr}}
/* layout página contacto */
.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}

/* ===== MOTION ===== */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease) var(--d,0ms),transform .7s var(--ease) var(--d,0ms)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;transition:none}
  .glow{animation:none}html{scroll-behavior:auto}}

/* ===== BLOG · índice por categorías ===== */
.blog-cat + .blog-cat{margin-top:clamp(2.6rem,6vh,4.5rem)}
.blog-cat__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-bottom:2px solid var(--ink);padding-bottom:.9rem;margin-bottom:1.8rem}
.blog-cat__head h2{font-weight:200;font-size:clamp(1.6rem,2.8vw,2.3rem);letter-spacing:-.015em;color:var(--ink)}
.blog-cat__head h2 em{font-style:normal;color:var(--blue)}
.blog-cat__count{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)}
/* chips de categoría (filtro/navegación) */
.cat-chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
.cat-chip{display:inline-flex;align-items:center;gap:.55em;border:1px solid var(--rule-strong);padding:.55em .95em;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.cat-chip:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.cat-chip b{color:var(--blue);font-weight:600}
.cat-chip:hover b{color:var(--blue-soft)}
.cat-chip--solid{background:var(--ink);color:#fff;border-color:var(--ink)}
.cat-chip--solid:hover{background:#000;border-color:#000}
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem)}
.related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.6rem);margin-top:clamp(1.5rem,4vh,2.5rem)}
@media(max-width:1000px){.related-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.related-grid{grid-template-columns:1fr}}
@media(max-width:900px){.bgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.bgrid{grid-template-columns:1fr}}
.bpost{display:flex;flex-direction:column;border:1px solid var(--rule);background:var(--paper);overflow:hidden;
  transition:border-color .25s var(--ease),transform .35s var(--ease)}
.bpost:hover{border-color:var(--blue);transform:translateY(-3px)}
.bpost__thumb{aspect-ratio:16/9;overflow:hidden;border-bottom:1px solid var(--rule)}
.bpost__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.bpost:hover .bpost__thumb img{transform:scale(1.04)}
.bpost__body{padding:clamp(1.1rem,1.8vw,1.5rem);display:flex;flex-direction:column;gap:.6rem;flex:1}
.bpost__cat{align-self:flex-start;display:inline-flex;border:1px solid var(--rule-strong);padding:.34em .7em;
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.bpost__cat:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.bpost__t{font-size:1.06rem;font-weight:600;line-height:1.32;color:var(--ink);transition:color .2s var(--ease)}
.bpost__t:hover{color:var(--blue)}
.bpost__x{font-size:.9rem;line-height:1.55;color:var(--ink-soft)}
.bpost__more{margin-top:auto;padding-top:.4rem;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.bpost__more:hover{color:var(--blue-soft)}

/* ===== ARTÍCULO ===== */
.bcrumb{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:1.4rem;display:flex;gap:.5em;flex-wrap:wrap}
.bcrumb a:hover{color:var(--blue)}
/* en móvil las migas, el índice y los enlaces cortos necesitan altura para el dedo:
   WCAG 2.5.8 pide 24x24 CSS px mínimo */
@media(max-width:760px){
  .bcrumb{gap:.35em .6em;align-items:center}
  .bcrumb a{display:inline-block;padding:.32rem 0;min-width:24px}
  .toc a{padding:.34rem 0}
  .bpost__more{padding-top:.6rem;padding-bottom:.35rem}
  .bpost__cat{min-height:26px}
  .bpost__t{padding:.15rem 0}
  .foot__col a{min-width:24px}
}
.article__cat{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:1rem}
.article__title em{font-style:normal;color:var(--num)}
.article__title{font-weight:200;font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.06;letter-spacing:-.02em;color:var(--ink);max-width:22ch}
.article__meta{margin-top:1.1rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute);line-height:1.9}
.article__meta a{color:var(--blue);border-bottom:1px solid transparent;transition:border-color .2s var(--ease)}
.article__meta a:hover{border-bottom-color:var(--blue)}
.article__cover{margin:clamp(1.8rem,4vh,2.8rem) 0 0;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--rule)}
.article__cover img{width:100%;height:100%;object-fit:cover}
/* contenedor ancho para artículos */
.wrap--article{max-width:1480px}
/* la sección de contenido es <section> (overflow:hidden global) -> romper para que el sticky funcione */
section.wrap--article{overflow:visible}
/* hero del artículo: texto izquierda, imagen derecha */
.article-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,4vw,3.5rem);align-items:center;padding:clamp(1.5rem,4vh,3rem) 0 clamp(1rem,3vh,2rem)}
.article-hero__img{margin:0;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--rule)}
.article-hero__img img{width:100%;height:100%;object-fit:cover}
.article-hero .article__title{max-width:18ch}
/* ===== PAGINADOR ===== */
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem;
  margin-top:clamp(2.4rem,6vh,3.6rem);padding-top:clamp(1.6rem,4vh,2.4rem);border-top:1px solid var(--rule)}
.pager__n{display:flex;gap:.35rem;align-items:center}
.pager__p,.pager__b{font-family:var(--font-mono);font-size:.68rem;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:.6em 1em;border:1px solid var(--rule-strong);color:var(--ink-soft);
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.pager__p:hover,.pager__b:hover{border-color:var(--ink);color:var(--ink)}
.pager__p.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.pager__b.is-off{opacity:.35;pointer-events:none}
.pager a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media(max-width:520px){.pager{gap:.4rem}.pager__b{flex:1 1 100%;order:9}.pager__b[rel="prev"]{order:8}}

/* ===== CONSENTIMIENTO DE COOKIES ===== */
/* Los embeds de LinkedIn y YouTube llevan data-emb-src en vez de src: el navegador
   no los pide y por tanto no se instala ninguna cookie hasta que hay consentimiento. */
.emb3p{border:0;width:100%;height:100%;display:block}
.emb3p:not([src]){display:none}
.emb-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.9rem;padding:1.4rem;text-align:center;background:var(--paper);border:1px dashed var(--rule-strong)}
.s-ink .emb-ph,.emb-ph--dark{background:#141418;border-color:var(--rule-dark)}
.emb-ph__t{font-size:.86rem;line-height:1.5;color:var(--ink-mute);max-width:34ch}
.s-ink .emb-ph__t{color:var(--ink-faint)}
.emb-ph__b{font-family:var(--font-mono);font-size:.66rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  padding:.85em 1.3em;border:1px solid var(--ink);background:var(--ink);color:#fff;cursor:pointer;
  transition:opacity .2s var(--ease)}
.emb-ph__b:hover{opacity:.82}
.s-ink .emb-ph__b{background:#fff;color:var(--ink);border-color:#fff}
.emb-wrap{position:relative}

.ck{position:fixed;left:50%;transform:translateX(-50%) translateY(120%);bottom:clamp(.8rem,2.5vw,1.4rem);
  z-index:90;width:min(680px,calc(100vw - 1.6rem));background:var(--ink);color:var(--on-dark);
  border:1px solid var(--rule-dark);box-shadow:0 30px 70px -20px rgba(0,0,0,.6);
  padding:clamp(1.2rem,3vw,1.7rem);transition:transform .45s var(--ease)}
.ck.is-on{transform:translateX(-50%) translateY(0)}
.ck__t{font-size:1.02rem;font-weight:600;color:#fff;margin-bottom:.5rem}
.ck__d{font-size:.86rem;line-height:1.6;color:var(--ink-faint)}
.ck__d a{color:var(--blue-soft);border-bottom:1px solid currentColor}
.ck__acc{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.1rem}
/* aceptar y rechazar con el mismo peso visual: lo exige la guía de la AEPD */
.ck__b{flex:1 1 auto;min-width:140px;font-family:var(--font-mono);font-size:.68rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;padding:1em 1.2em;cursor:pointer;border:1px solid #fff;
  transition:opacity .2s var(--ease)}
.ck__b:hover{opacity:.85}
.ck__b--si{background:#fff;color:var(--ink)}
.ck__b--no{background:transparent;color:#fff}
.ck__b:focus-visible{outline:2px solid var(--blue-soft);outline-offset:2px}
@media(max-width:520px){.ck__b{flex:1 1 100%}}
@media(prefers-reduced-motion:reduce){.ck{transition:none}}

/* ===== VOLVER ARRIBA · anillo de progreso · solo en artículos del blog ===== */
.totop{position:fixed;z-index:60;right:clamp(.9rem,2.4vw,1.5rem);bottom:clamp(.9rem,2.4vw,1.5rem);
  width:47px;height:47px;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s}
.totop.is-on{opacity:1;visibility:visible;transform:none}
.totop.is-on:hover{transform:translateY(-2px)}
.totop svg{display:block;filter:drop-shadow(0 4px 14px rgba(10,10,12,.16))}
.totop__bg{fill:#fff;stroke:var(--rule-strong);stroke-width:1}
.totop__track{fill:none;stroke:var(--rule)}
.totop__bar{fill:none;stroke:var(--num);transition:stroke-dashoffset .12s linear}
.totop__arrow{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.totop:hover .totop__bg{stroke:var(--ink)}
.totop:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:50%}
@media(prefers-reduced-motion:reduce){.totop,.totop__bar{transition:none}}
.article-scroll{display:flex;justify-content:center;padding:.4rem 0 1.8rem;color:var(--ink-mute)}
.article-scroll svg{width:26px;height:26px;animation:bob 2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(6px);opacity:1}}
@media(prefers-reduced-motion:reduce){.article-scroll svg{animation:none}}
@media(max-width:860px){.article-hero{grid-template-columns:1fr;gap:1.5rem}.article-hero__img{order:-1;aspect-ratio:16/9}}
.article__layout{display:grid;grid-template-columns:200px minmax(0,1fr) 280px;gap:clamp(1.6rem,3vw,3.4rem);align-items:start;margin-top:clamp(2rem,5vh,3.5rem)}
.article__toc{grid-column:1;position:sticky;top:84px}
.article__main{grid-column:2;min-width:0}
.article__cta{grid-column:3;position:sticky;top:84px}
@media(max-width:1080px){
  .article__layout{grid-template-columns:1fr}
  .article__toc,.article__main,.article__cta{grid-column:1;position:static}
  .article__cta{max-width:460px}
}
/* ToC */
.toc{border-top:2px solid var(--ink);padding-top:1rem}
.toc__h{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:.9rem}
.toc ol{list-style:none;counter-reset:toc;display:flex;flex-direction:column;gap:.5rem}
.toc li{counter-increment:toc}
.toc a{display:flex;gap:.7em;font-size:.85rem;line-height:1.4;color:var(--ink-soft);transition:color .2s}
.toc a::before{content:counter(toc,decimal-leading-zero);font-family:var(--font-mono);font-size:.68rem;color:var(--ink-faint);flex:none}
.toc a:hover,.toc a.is-active{color:var(--num)}
.toc a.is-active::before{color:var(--num)}
/* CTA sticky */
.cta-card{border:1px solid var(--rule);background:var(--ink);color:var(--on-dark);padding:clamp(1.4rem,2vw,1.8rem)}
.cta-card h3{font-weight:400;font-size:1.15rem;line-height:1.32;color:#fff;margin-bottom:.6rem}
.cta-card p{font-size:.9rem;line-height:1.55;color:var(--ink-faint);margin-bottom:1.2rem}
.cta-card .btn{width:100%;justify-content:center}

/* ===== PROSE · cuerpo del artículo ===== */
/* Una cadena sin espacios (un regex, una URL larga, código) no debe generar
   scroll horizontal: parte la palabra antes que romper el layout. */
body{overflow-wrap:break-word}
.prose code,.prose kbd,.prose pre{overflow-wrap:anywhere}
.prose{max-width:none;color:var(--ink-soft);font-size:1.05rem;line-height:1.75}
.prose > * + *{margin-top:1.2rem}
.prose h2{font-weight:700;font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.2;letter-spacing:-.015em;color:var(--ink);margin-top:2.6rem;scroll-margin-top:84px}
.prose h3{font-weight:600;font-size:clamp(1.15rem,1.8vw,1.4rem);color:var(--ink);margin-top:2rem;scroll-margin-top:84px}
.prose h4{font-weight:600;font-size:1.05rem;color:var(--ink);margin-top:1.6rem}
.prose h2 + *,.prose h3 + *,.prose h4 + *{margin-top:1rem}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--blue);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.prose a:hover{text-decoration-thickness:2px}
.prose ul,.prose ol{padding-left:1.4em;display:flex;flex-direction:column;gap:.5rem}
.prose li{line-height:1.65}
.prose li::marker{color:var(--blue)}
.prose blockquote{padding-left:1.3rem;font-size:1.12rem;line-height:1.6;color:var(--ink);font-style:italic}
.prose img{width:100%;height:auto;border:1px solid var(--rule);margin:1.8rem 0}
.prose figure{margin:1.8rem 0}
.prose figcaption{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-mute);margin-top:.6rem;text-align:center}
.prose code{font-family:var(--font-mono);font-size:.86em;background:rgba(0,0,0,.055);padding:.15em .4em;border-radius:3px;color:var(--ink)}
.prose pre{background:var(--ink);color:var(--on-dark);padding:1.2rem 1.3rem;overflow-x:auto;font-family:var(--font-mono);font-size:.85rem;line-height:1.6;border-radius:4px}
.prose pre code{background:none;padding:0;color:inherit;font-size:1em}
.prose table{width:100%;border-collapse:collapse;font-size:.92rem;display:block;overflow-x:auto}
.prose th,.prose td{border:1px solid var(--rule);padding:.6em .8em;text-align:left;vertical-align:top}
.prose th{background:rgba(0,0,0,.03);font-weight:600;color:var(--ink)}
/* embeds (vídeo YouTube / LinkedIn) */
.prose .embed{position:relative;aspect-ratio:16/9;margin:1.9rem 0;background:var(--ink);border:1px solid var(--rule)}
.prose .embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.prose iframe{max-width:100%;margin:1.9rem 0;border:1px solid var(--rule)}

/* ===== CASO DE ÉXITO ===== */
.case-hero__media{margin:0;aspect-ratio:16/10;border:1px solid var(--rule);background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.case-hero__media img{width:100%;height:100%;object-fit:contain}
.case-meta{display:flex;flex-wrap:wrap;gap:.7rem 2.2rem;margin-top:1.6rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-mute)}
.case-meta div b{display:block;color:var(--ink);font-weight:600;font-size:.86rem;letter-spacing:0;text-transform:none;margin-top:.15rem}
.kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,2.6rem);margin-top:clamp(1.6rem,4vh,2.6rem)}
.kpi{border-top:2px solid var(--num);padding-top:1.2rem}
.kpi__n{font-weight:200;font-size:clamp(2.4rem,5vw,3.6rem);line-height:1;letter-spacing:-.02em;color:var(--num)}
/* cuando el KPI es una palabra y no una cifra, el tamaño de titular se come el bloque */
.kpi__n--txt{font-size:clamp(1.45rem,2.4vw,1.9rem);font-weight:300}
.kpi__n .kpi__old{font-size:.5em;color:var(--ink-mute);text-decoration:line-through;font-weight:300;margin-right:.35em;vertical-align:middle}
.kpi__l{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;font-weight:500;margin:.8rem 0 .6rem}
.kpi__d{font-size:.92rem;line-height:1.55;color:var(--ink-faint)}
@media(max-width:760px){.kpi-grid{grid-template-columns:1fr;gap:1.6rem}}
.kpi-grid--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.kpi-grid--4{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.kpi-grid--4{grid-template-columns:1fr}}
.case-fig{margin:clamp(1.8rem,4vh,2.6rem) 0 0;border:1px solid var(--rule-dark)}
.case-fig img{width:100%;display:block}
.case-fig figcaption{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);padding:.7rem 1rem;border-top:1px solid var(--rule-dark)}
/* sólo para lectores de pantalla */
.u-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* enlace a la web del cliente */
.ext-link{display:inline-flex;align-items:center;gap:.45em;margin-top:1rem;
  font-family:var(--font-mono);font-size:.68rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blue);border-bottom:1px solid transparent;transition:border-color .2s var(--ease),color .2s var(--ease)}
.ext-link:hover{border-bottom-color:currentColor}
.ext-link svg{width:12px;height:12px}
.s-ink .ext-link{color:var(--blue-soft)}
.ia-theme .ext-link{color:var(--amber-ink)}
.ia-theme .s-ink .ext-link{color:var(--amber)}
.case-client{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(1.5rem,4vw,3rem);align-items:center}
.case-client__logo{border:1px solid var(--rule);padding:clamp(1.6rem,3vw,2.6rem);display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--paper)}
.case-client__logo img{max-width:100%;max-height:84px;width:auto;object-fit:contain}
@media(max-width:680px){.case-client{grid-template-columns:1fr}}
.reto-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2vw,1.6rem);margin-top:1.4rem}
/* columnas desiguales y derecha descolgada: composición, no retícula.
   :has() lo acota a las rejillas que llevan .reto, no a las que reusan .pain */
.reto-grid:has(.reto){grid-template-columns:1.12fr .88fr;
  column-gap:clamp(2.2rem,5.5vw,5.4rem);row-gap:clamp(2.4rem,4.4vw,3.8rem)}
.reto{position:relative;border:0;background:none;border-top:1px solid var(--rule);
  padding:clamp(1.1rem,1.7vw,1.45rem) 0 0 clamp(3.1rem,5vw,4.3rem);
  display:flex;flex-direction:column;gap:.5rem}
.reto__n{position:absolute;left:0;top:clamp(.7rem,1.3vw,1rem);
  font-family:var(--font-sans);font-weight:200;font-size:clamp(1.85rem,2.9vw,2.5rem);
  line-height:1;letter-spacing:-.03em;color:var(--num)}
@media(max-width:760px){
  .reto-grid:has(.reto){grid-template-columns:1fr;row-gap:2.2rem}
}
.reto__t{font-size:1.12rem;font-weight:600;color:var(--ink);line-height:1.25}
.reto__d{font-size:.95rem;line-height:1.6;color:var(--ink-soft)}
@media(max-width:680px){.reto-grid{grid-template-columns:1fr}}
.case-results{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.4rem);align-items:center;margin-top:clamp(1.6rem,4vh,2.6rem)}
.case-results .kpi-grid{grid-template-columns:1fr;gap:1.6rem;margin-top:0}
.case-results .case-fig{margin:0}
.case-solucion{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(2rem,4vw,3.4rem);align-items:center}
.case-solucion .sec-head{margin-bottom:0}
.case-solucion .embed{margin:0}
@media(max-width:860px){.case-results,.case-solucion{grid-template-columns:1fr}}
/* carrusel de imágenes del hero de caso */
.hcar__view{position:relative}
.hcar__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
.hcar__track::-webkit-scrollbar{display:none}
.hcar__slide{flex:0 0 100%;scroll-snap-align:center;margin:0;aspect-ratio:16/10;border:1px solid var(--rule);background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hcar__slide img{width:100%;height:100%;object-fit:contain;cursor:zoom-in}
.hcar__nav{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1rem}
.hcar__dots{display:flex;align-items:center;gap:.5rem}
.hcar__arrow{width:38px;height:38px;border:1px solid var(--rule-strong);background:transparent;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);flex:none;transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.hcar__arrow:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.hcar__arrow svg{width:15px;height:15px}
.hcar__dot{width:8px;height:8px;border-radius:50%;border:1px solid var(--rule-strong);background:transparent;cursor:pointer;padding:0;transition:background .2s,border-color .2s,transform .2s}
.hcar__dot.is-active{background:var(--blue);border-color:var(--blue);transform:scale(1.2)}
/* lightbox (ampliar imagen) */
.lbox{position:fixed;inset:0;z-index:1000;background:rgba(8,9,14,.93);display:none;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem);cursor:zoom-out}
.lbox.is-open{display:flex}
.lbox img{max-width:100%;max-height:90vh;object-fit:contain;border:1px solid var(--rule-dark);background:#fff}
.lbox__close{position:absolute;top:1.1rem;right:1.3rem;width:44px;height:44px;border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.1rem;line-height:1}
.lbox__close:hover{background:rgba(255,255,255,.12)}

/* ── Hub de servicios: índice de la colección ─────────────── */
.svc-hero__stack{position:absolute;right:clamp(.5rem,5vw,5.5rem);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-end;font-family:var(--font-mono);font-weight:500;font-size:clamp(84px,13vw,158px);line-height:.94;letter-spacing:-.06em;color:rgba(125,164,255,.07);pointer-events:none;user-select:none}
.svc-hero__stack span:last-child{color:rgba(255,176,32,.08)}
.idx{border-top:2px solid var(--ink)}
.idx-row{display:grid;grid-template-columns:clamp(60px,8vw,110px) minmax(0,1fr) auto;gap:clamp(1rem,3vw,2.5rem);align-items:center;padding:clamp(1.9rem,5vh,3.2rem) 0;border-bottom:1px solid var(--rule);text-decoration:none;color:var(--ink)}
.idx-row__n{font-family:var(--font-mono);font-size:clamp(1.5rem,3vw,2.4rem);line-height:1;color:var(--blue);align-self:start;padding-top:.4rem}
.idx-row__role{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute)}
.idx-row__t{font-size:clamp(1.5rem,3.2vw,2.5rem);font-weight:200;letter-spacing:-.02em;line-height:1.1;margin:.5rem 0 .6rem;transition:color .3s var(--ease)}
.idx-row__d{color:var(--ink-soft);font-size:1.02rem;line-height:1.65;max-width:62ch}
.idx-row__meta{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.05rem}
.idx-row__meta span{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.05em;color:var(--ink-mute);border:1px solid var(--rule);padding:.32rem .65rem;border-radius:100px;white-space:nowrap}
.idx-row__fit{margin-top:1rem;font-size:.93rem;color:var(--ink-mute)}
.idx-row__fit b{color:var(--blue);font-weight:600}
.idx-row__arr{font-size:clamp(1.5rem,2.6vw,2.2rem);color:var(--ink-faint);transition:transform .35s var(--ease),color .35s var(--ease)}
.idx-row:hover .idx-row__t,.idx-row:focus-visible .idx-row__t{color:var(--blue)}
.idx-row:hover .idx-row__arr{transform:translateX(10px);color:var(--ink)}
.idx-row--ia .idx-row__n,.idx-row--ia .idx-row__fit b{color:var(--amber-deep)}
.idx-row--ia:hover .idx-row__t,.idx-row--ia:focus-visible .idx-row__t{color:var(--amber-deep)}
@media(max-width:720px){
  .idx-row{grid-template-columns:minmax(0,1fr) auto;row-gap:1rem}
  .idx-row__n{grid-row:1;grid-column:1;padding-top:0}
  .idx-row__arr{grid-row:1;grid-column:2}
  .idx-row__body{grid-column:1/-1}
}

/* ── Hub: tarjetas de servicio ─────────────── */
.svc-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem);margin-top:1rem}
.svc-card{position:relative;display:flex;flex-direction:column;border:1px solid var(--rule-strong);background:#fff;padding:clamp(1.6rem,3vw,2.2rem);text-decoration:none;color:var(--ink);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.svc-card__n{font-weight:200;font-size:clamp(2.4rem,4vw,3.4rem);line-height:1;letter-spacing:-.02em;color:var(--blue)}
.svc-card__role{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);margin-top:1.2rem;display:block}
.svc-card__t{font-size:clamp(1.3rem,2vw,1.65rem);font-weight:600;letter-spacing:-.015em;line-height:1.12;margin:.55rem 0 .7rem}
.svc-card__d{color:var(--ink-soft);font-size:.98rem;line-height:1.6}
.svc-card__meta{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.1rem}
.svc-card__meta span{font-family:var(--font-mono);font-size:.68rem;color:var(--ink-mute);border:1px solid var(--rule);padding:.28rem .55rem;border-radius:100px;white-space:nowrap}
.svc-card__fit{margin-top:1.05rem;font-size:.9rem;color:var(--ink-mute);line-height:1.55}
.svc-card__fit b{color:var(--blue);font-weight:600}
.svc-card__go{margin-top:auto;padding-top:1.5rem;font-family:var(--font-mono);font-size:.78rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;gap:.5rem}
.svc-card__go i{font-style:normal;transition:transform .35s var(--ease)}
.svc-card:hover,.svc-card:focus-visible{transform:translateY(-5px);border-color:var(--ink);box-shadow:0 24px 48px -28px rgba(0,0,0,.28)}
.svc-card:hover .svc-card__go i{transform:translateX(6px)}
.svc-card--ia{background:var(--ink);border-color:var(--ink);color:var(--on-dark)}
.svc-card--ia .svc-card__n{color:var(--amber)}
.svc-card--ia .svc-card__t{color:#fff}
.svc-card--ia .svc-card__d{color:var(--ink-faint)}
.svc-card--ia .svc-card__meta span{border-color:var(--rule-dark);color:var(--ink-faint)}
.svc-card--ia .svc-card__fit{color:var(--ink-faint)}
.svc-card--ia .svc-card__fit b{color:var(--amber)}
.svc-card--ia .svc-card__go{color:#fff}
.svc-card--ia:hover,.svc-card--ia:focus-visible{border-color:var(--amber);box-shadow:0 26px 52px -26px rgba(0,0,0,.55)}
@media(prefers-reduced-motion:reduce){.svc-card,.svc-card__go i{transition:none}}
@media(max-width:900px){.svc-cards{grid-template-columns:1fr}}

/* ── Hub: tarjetas secundarias ─────────────── */
.svc-cards--minor{grid-template-columns:repeat(4,1fr)}
.svc-card--sm{padding:clamp(1.3rem,2vw,1.7rem)}
.svc-card--sm .svc-card__n{font-size:1.8rem;}
.svc-card--sm .svc-card__t{font-size:1.12rem;margin:.45rem 0 .55rem}
.svc-card--sm .svc-card__d{font-size:.9rem;line-height:1.55}
.svc-card--sm .svc-card__go{font-size:.7rem;padding-top:1.2rem}
@media(max-width:1000px){.svc-cards--minor{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.svc-cards--minor{grid-template-columns:1fr}}

/* ── Hub: tarjeta ancha (cierre del grid de 7) ── */
.svc-card--wide{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(1.2rem,3vw,2.5rem);align-items:center}
.svc-card--wide .svc-card__role{margin-top:0}
.svc-card--wide .svc-card__go{margin-top:0;padding-top:0;align-self:end}
.svc-card--wide .svc-card__d{max-width:66ch}
@media(max-width:900px){.svc-card--wide{display:flex;flex-direction:column;align-items:flex-start}.svc-card--wide .svc-card__go{align-self:auto;padding-top:1.2rem}}

/* ── Hub: grid de 8 (3+3+2) ── */
.svc-cards{grid-template-columns:repeat(6,1fr)}
.svc-card{grid-column:span 2}
.svc-card--half{grid-column:span 3}
@media(max-width:900px){.svc-cards{grid-template-columns:1fr}.svc-card,.svc-card--half{grid-column:auto}}

/* ===================================================================
   TEMA IA · ámbar
   En las páginas de IA/GEO el acento es ámbar; el azul queda reservado
   al SEO clásico. Se activa con class="ia-theme" en el <main>, así el
   header y el footer siguen siendo idénticos en todo el sitio.
   Excepción deliberada: el bloque .vs2 de "GEO vs SEO", donde la columna
   de SEO se queda azul a propósito y la de GEO se pinta desde el HTML.
   =================================================================== */
.ia-theme{--glow:radial-gradient(circle, rgba(255,176,32,.40) 0%, rgba(230,150,20,.15) 35%, rgba(200,120,0,0) 70%)}
/* acentos grandes (displays) → ámbar vivo; texto pequeño → ámbar legible */
.ia-theme .title em{color:var(--num)}
.ia-theme .s-ink .title em,.ia-theme .cta__title em{color:var(--amber)}
.ia-theme .eyebrow{color:var(--amber-ink)}
.ia-theme .s-ink .eyebrow,.ia-theme .cta .eyebrow,.ia-theme .svc-hero .eyebrow{color:var(--amber)}
.ia-theme{--mark:rgba(255,176,32,.38); --mark-glyph:rgba(255,176,32,.62); --num:var(--amber-hd)}
.ia-theme .s-ink{--num:var(--amber)}
.ia-theme .def__k,.ia-theme .faq__q::after{color:var(--amber-ink)}
.ia-theme .subnav a.is-active{color:var(--amber-ink);border-bottom-color:var(--amber)}
.ia-theme .s-ink .pain{border-top-color:var(--rule-dark)}
.ia-theme .tool-chip{border-color:var(--amber);color:var(--amber-ink)}
/* CTA ámbar: sobre ámbar el texto va en tinta — en blanco no se leería (1,8:1) */
.ia-theme .btn--blue{background:var(--amber);color:var(--ink)}
.ia-theme .btn--blue:hover{background:#ffc352;color:var(--ink)}

/* ===================================================================
   MURO DE LOGOS · sección bañada en el azul de marca
   Los logos van en blanco: los PNG ya vienen recortados a blanco y el
   filtro deja en blanco también los SVG, así que una sola regla sirve
   para todos los formatos. Flex con wrap centrado para que la última
   fila quede centrada con cualquier número de logos.
   =================================================================== */
.wall{background:var(--blue);color:#fff}
.wall .eyebrow{color:rgba(255,255,255,.6)}
.wall .title{color:#fff;text-align:center}
.wall .title em{color:#fff;font-style:normal;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.wall__lede{max-width:56ch;margin:1.2rem auto 0;text-align:center;
  font-size:clamp(1rem,1.35vw,1.12rem);line-height:1.6;color:rgba(255,255,255,.82)}
.wall__head{text-align:center}
/* el font-size del contenedor es la escala: cada logo lleva su --h y --w en la
   marca, calculados para que TODOS ocupen la misma área óptica.
   La escala llega a ~1 en pantallas de escritorio normales; con .85vw se
   quedaba al 53% y por eso los logos se veían pequeños. */
/* La escala va atada al CONTENEDOR (cqw), no al viewport: el .wrap se detiene
   en 1140px, así que con vw los logos seguían creciendo, la fila de 6 dejaba de
   caber y el último logo quedaba colgado en una línea propia. */
.wall{padding:clamp(4.2rem,10vh,8rem) 0}
.wall .wrap{container-type:inline-size}
.wall__grid{font-size:clamp(.7rem,1.5cqw,1rem);margin-top:clamp(3.2rem,7vh,5.2rem);
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  column-gap:clamp(1.9rem,3.9cqw,2.8rem);row-gap:clamp(18px,2.5cqw,26px)}
/* saltos de línea: así el agrupado por filas se decide en CSS y puede cambiar
   entre escritorio (6/4/3) y móvil (4/3/3/3) sin duplicar el marcado */
.wall__br{flex:0 0 100%;height:0;margin:0;display:none}
.wall__br--todos{display:block}
@media(min-width:761px){.wall__br--esc{display:block}}
/* En ESCRITORIO las pistas y los sets desaparecen del layout con display:contents,
   así los 15 logos son hijos directos del flex y los saltos siguen mandando (6/5/4).
   Los clones del carrusel solo existen en móvil. */
@media(min-width:761px){
  .wall__mq,.wall__set{display:contents}
  .wall__set[aria-hidden="true"]{display:none}
}
/* En MÓVIL se convierte en dos carruseles: al no tener que caber, los logos
   pueden ser bastante más grandes que en una rejilla. */
@media(max-width:760px){
  .wall__br{display:none}
  .wall__grid{display:block;font-size:11.4px}
  .wall__mq{display:flex;overflow:hidden;width:100%;
    mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .wall__mq+.wall__mq{margin-top:22px}
  .wall__set{display:flex;align-items:center;flex:0 0 auto;
    gap:34px;padding-right:34px;   /* el padding iguala el hueco al empalmar el bucle */
    animation:wall-mq 34s linear infinite}
  /* duraciones distintas y sentidos alternos: si coincidieran, las tres pistas
     se moverían como un bloque y se notaría la repetición */
  .wall__mq:nth-of-type(2) .wall__set{animation-direction:reverse;animation-duration:42s}
  .wall__mq:nth-of-type(3) .wall__set{animation-duration:31s}
  @keyframes wall-mq{from{transform:translateX(0)}to{transform:translateX(-100%)}}
}
/* Sin movimiento: se detiene y se puede arrastrar a mano */
@media(prefers-reduced-motion:reduce){
  .wall__set{animation:none}
  .wall__mq{overflow-x:auto;scrollbar-width:none}
  .wall__mq::-webkit-scrollbar{display:none}
}
/* Peso óptico, no altura fija: acotando ALTO y ANCHO, los logos cuadrados
   crecen y los muy alargados se frenan. Con altura fija Grupo Planeta ocupaba
   191px de ancho y Delfín 40px: casi 5x de diferencia de área. */
.wall__logo{width:calc(var(--w,110) * 1em / 16);height:calc(var(--h,44) * 1em / 16);max-width:none;
  object-fit:contain;filter:brightness(0) invert(1);opacity:.88;transition:opacity .25s var(--ease)}
.wall__logo:hover{opacity:1}
@media(hover:none){.wall__logo{opacity:.92}}