/* ============================================================
   ACTIVA GESTIÓN — Design tokens
   ============================================================ */
:root{
  /* brand */
  --c-magenta: #E5267B;
  --c-magenta-soft: #FF4E9E;
  --c-cyan: #22C8DD;
  --c-cyan-soft: #6EE6F1;
  --c-ink: #0A0B1A;
  --c-ink-2: #11142A;
  --c-ink-3: #1B1F3A;
  --c-paper: #F6F5F1;
  --c-paper-2: #ECEAE2;
  --c-line: rgba(255,255,255,.08);
  --c-line-d: rgba(10,11,26,.10);
  --c-text-d: #0A0B1A;
  --c-text-d-soft: #4A4D63;
  --c-text-l: #F6F5F1;
  --c-text-l-soft: rgba(246,245,241,.66);

  --grad-brand: linear-gradient(120deg, var(--c-magenta) 0%, #B23A9E 45%, var(--c-cyan) 100%);
  --grad-brand-soft: linear-gradient(120deg, rgba(229,38,123,.18), rgba(34,200,221,.18));

  --f-display: 'Sora', system-ui, sans-serif;
  --f-body: 'Inter', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 36px;
  --max-w: 1440px;
  --pad-x: clamp(20px, 4vw, 64px);

  --e-out: cubic-bezier(.22,.7,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.55;
  color:var(--c-text-d);
  background:var(--c-paper, #F6F5F1);
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}
input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--c-magenta);color:#fff}

/* Layout helpers */
.wrap{max-width:var(--max-w);margin:0 auto;padding-inline:var(--pad-x)}

/* ── Elimina márgenes entre bloques de sección (evita franjas del fondo beige) ── */
.wp-block-group > *,
.is-layout-flow > *,
main > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ── Constrained layout: alinear con Bootstrap .container ──
   Solo se restringe el CONTENIDO INTERIOR, nunca el bloque mismo.
   Los breakpoints responsive los maneja Bootstrap por su cuenta. ── */
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: var(--wp--style--global--content-size, 1320px);
  padding-inline: calc(var(--bs-gutter-x, 1.5rem) * .5);
  margin-inline: auto;
}
.eyebrow{
  font-family:var(--f-mono);
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--c-magenta);
  display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:24px;height:1px;background:currentColor;opacity:.7}
.eyebrow.on-dark{color:var(--c-magenta)}

h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;letter-spacing:-.02em;line-height:1.05}
h1{font-size:clamp(40px, 6.8vw, 96px); font-weight:600; letter-spacing:-.035em; line-height:1.02}
h2{font-size:clamp(32px, 4.2vw, 60px); letter-spacing:-.028em; line-height:1.05}
h3{font-size:clamp(22px, 1.8vw, 28px); letter-spacing:-.018em; line-height:1.15}
h4{font-size:clamp(18px, 1.3vw, 20px); letter-spacing:-.012em}
p{text-wrap:pretty}

.section{padding-block:clamp(80px, 12vh, 160px); position:relative}
.section--dark{background:var(--c-paper-2); color:var(--c-ink)}
.section--dark .eyebrow{color:var(--c-magenta)}
.section-head{max-width:780px;margin-bottom:64px}
.section-head p{font-size:clamp(17px,1.3vw,20px); color:var(--c-text-d-soft); margin-top:20px}
.section--dark .section-head p{color:var(--c-text-d-soft)}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px; border-radius:999px;
  font-weight:500; font-size:15px; letter-spacing:-.005em;
  transition:transform .35s var(--e-out), background .35s var(--e-out), color .35s var(--e-out), box-shadow .35s var(--e-out), border-color .35s var(--e-out);
  position:relative; will-change:transform;
  border:1px solid transparent;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn .arrow{
  width:18px;height:18px;border-radius:999px;
  display:grid;place-items:center;
  background:rgba(10,11,26,.12);
  transition:transform .35s var(--e-out), background .35s var(--e-out), color .35s var(--e-out);
}
.btn:hover .arrow{transform:translateX(3px)}
/* Single-tone CTA: sólo para <a> y <button> del diseño de referencia.
   Los botones WordPress (.wp-block-button) reciben el color en el <a> interior (ver bloque WordPress buttons). */
a.btn--primary, a.btn--brand,
button.btn--primary, button.btn--brand{background:var(--c-cyan); color:#fff; box-shadow:0 12px 28px -12px rgba(34,200,221,.55)}
a.btn--primary .arrow, a.btn--brand .arrow,
button.btn--primary .arrow, button.btn--brand .arrow{background:rgba(255,255,255,.22);color:#fff}
a.btn--primary:hover, a.btn--brand:hover,
button.btn--primary:hover, button.btn--brand:hover{background:var(--c-magenta); color:#fff; box-shadow:0 16px 38px -14px rgba(229,38,123,.45)}
a.btn--primary:hover .arrow, a.btn--brand:hover .arrow,
button.btn--primary:hover .arrow, button.btn--brand:hover .arrow{background:rgba(255,255,255,.26);color:#fff}
a.btn--ghost, button.btn--ghost{background:transparent;color:var(--c-ink);border-color:rgba(10,11,26,.22)}
a.btn--ghost .arrow, button.btn--ghost .arrow{background:rgba(10,11,26,.10)}
a.btn--ghost:hover, button.btn--ghost:hover{background:var(--c-magenta);border-color:var(--c-magenta);color:#fff}
a.btn--ghost:hover .arrow, button.btn--ghost:hover .arrow{background:rgba(255,255,255,.26);color:#fff}
.btn--sm{padding:10px 16px;font-size:13px}

/* ============================================================
   Navbar
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:18px var(--pad-x);
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  transition: padding .4s var(--e-out), background .4s var(--e-out), backdrop-filter .4s var(--e-out), box-shadow .4s var(--e-out);
}
.nav.is-scrolled{
  padding-block:12px;
  background:rgba(246,245,241,.85);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  box-shadow:0 8px 30px -22px rgba(10,11,26,.35);
}
.nav.on-dark{color:#fff}
.nav.on-dark.is-scrolled{background:rgba(10,11,26,.7);color:#fff}
.nav-logo{display:flex;align-items:center;gap:0;font-family:var(--f-display);font-weight:700;font-size:18px;letter-spacing:-.02em}
.nav-logo img{height:92px;width:auto;display:block;transition:height .35s var(--e-out)}
.nav.is-scrolled .nav-logo img{height:64px}
.footer .nav-logo img{height:80px}
@media (max-width:560px){.nav-logo img{height:64px}.nav.is-scrolled .nav-logo img{height:50px}}
.nav-links{display:flex;align-items:center;gap:6px}
.nav-links a{
  padding:10px 14px; border-radius:999px;
  font-size:14px; font-weight:500;
  transition:background .25s var(--e-out), color .25s var(--e-out);
  position:relative;
}
.nav-links a:hover{background:rgba(10,11,26,.06)}
.nav.on-dark .nav-links a:hover{background:rgba(255,255,255,.08)}
/* Active page indicator */
.nav-links a.is-active{color:var(--c-magenta)}
.nav.on-dark .nav-links a.is-active{color:var(--c-cyan-soft)}
.nav-links a.is-active::after{
  content:"";position:absolute;left:50%;bottom:2px;width:5px;height:5px;border-radius:99px;
  background:currentColor;transform:translateX(-50%);
}

.nav-cta{display:flex;align-items:center;gap:10px}
.nav-burger{display:none; width:42px;height:42px;border-radius:12px;background:transparent;align-items:center;justify-content:center}
.nav-burger span{display:block;width:20px;height:1.5px;background:currentColor;position:relative;transition:transform .3s var(--e-out)}
.nav-burger span::before,
.nav-burger span::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .3s var(--e-out), top .3s var(--e-out)}
.nav-burger span::before{top:-6px}
.nav-burger span::after{top:6px}
.nav-burger.is-open span{background:transparent}
.nav-burger.is-open span::before{top:0;transform:rotate(45deg)}
.nav-burger.is-open span::after{top:0;transform:rotate(-45deg)}

@media (max-width: 980px){
  .nav-links, .nav-cta .desktop-only{display:none}
  .nav-burger{display:inline-flex}
}

/* Mobile sheet */
.mobile-sheet{
  position:fixed; inset:0; z-index:99;
  background:var(--c-paper);
  color:var(--c-ink);
  padding:96px var(--pad-x) 40px;
  display:flex; flex-direction:column; gap:6px;
  transform:translateY(-101%);
  transition:transform .5s var(--e-out);
  overflow-y:auto;
}
.mobile-sheet.is-open{transform:translateY(0)}
.mobile-sheet a{
  font-family:var(--f-display); font-size:34px; font-weight:500;
  padding:12px 0; border-bottom:1px solid var(--c-line-d);
  display:flex; align-items:center; justify-content:space-between;
}
.mobile-sheet a span{font-family:var(--f-mono);font-size:11px;opacity:.4;letter-spacing:.16em}
.mobile-sheet a.is-active{color:var(--c-magenta)}
.mobile-sheet .btn{margin-top:24px;align-self:flex-start}

/* ===== Desktop Servicios dropdown ===== */
.nav-dd{position:relative;display:flex}
.nav-dd-trigger{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.nav-dd .chev{width:12px;height:12px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--e-out);opacity:.7}
.nav-dd:hover .chev,.nav-dd:focus-within .chev{transform:rotate(180deg)}
.nav-dd-menu{
  position:absolute;top:100%;left:50%;
  transform:translateX(-50%) translateY(10px);
  background:#fff;border:1px solid var(--c-line-d);border-radius:20px;
  box-shadow:0 30px 60px -24px rgba(10,11,26,.28);
  padding:10px;min-width:300px;display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;transition:opacity .3s var(--e-out),transform .3s var(--e-out);
  z-index:120;
}
.nav-dd-menu::before{content:"";position:absolute;top:-14px;left:0;right:0;height:16px}
.nav-dd:hover .nav-dd-menu,.nav-dd:focus-within .nav-dd-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(6px)}
.nav-dd-menu a{
  padding:12px 14px;border-radius:13px;font-size:14.5px;font-weight:500;
  display:flex;flex-direction:column;gap:3px;white-space:nowrap;color:var(--c-ink);
  transition:background .25s var(--e-out);
}
.nav-dd-menu a small{font-family:var(--f-body);font-weight:400;font-size:12.5px;color:var(--c-text-d-soft);letter-spacing:0;text-transform:none}
.nav-dd-menu a:hover{background:rgba(34,200,221,.10)}
.nav-dd-menu a.is-active{color:var(--c-magenta)}
.nav-dd-menu a.all{
  border-top:1px solid var(--c-line-d);border-radius:0 0 12px 12px;margin-top:6px;padding-top:14px;
  color:var(--c-magenta);font-family:var(--f-mono);font-size:12px;letter-spacing:.04em;flex-direction:row;align-items:center;gap:8px;
}

/* ===== Mobile sheet accordion ===== */
.sheet-acc{
  width:100%;font-family:var(--f-display);font-size:34px;font-weight:500;
  padding:12px 0;border-bottom:1px solid var(--c-line-d);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  color:var(--c-ink);text-align:left;
}
.sheet-acc .lead{display:flex;align-items:center;gap:14px}
.sheet-acc .lead span{font-family:var(--f-mono);font-size:11px;opacity:.4;letter-spacing:.16em}
.sheet-acc .chev{width:22px;height:22px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--e-out);opacity:.6}
.sheet-acc.is-open .chev{transform:rotate(180deg)}
.sheet-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--e-out)}
.sheet-sub.is-open{grid-template-rows:1fr}
.sheet-sub-inner{overflow:hidden;display:flex;flex-direction:column}
.sheet-sub a{font-family:var(--f-display);font-size:20px;font-weight:500;padding:11px 0 11px 28px;border-bottom:1px solid var(--c-line-d);opacity:.85}
.sheet-sub a.is-active{color:var(--c-magenta);opacity:1}

/* ============================================================
   HERO (home)
   ============================================================ */
.hero{
  position:relative; overflow:hidden;
  background:var(--c-paper); color:var(--c-ink);
  min-height:100vh;
  padding:140px var(--pad-x) 80px;
  display:flex; align-items:center;
  isolation:isolate;
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(60% 50% at 12% 0%, rgba(229,38,123,.12), transparent 60%),
    radial-gradient(60% 60% at 92% 100%, rgba(34,200,221,.14), transparent 60%),
    var(--c-paper);
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background-image:
    linear-gradient(rgba(10,11,26,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,11,26,.04) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(80% 60% at 50% 50%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(80% 60% at 50% 50%, #000 30%, transparent 80%);
  opacity:.7;
}
.hero-inner{
  display:grid; grid-template-columns: 1.05fr .95fr; gap:64px; align-items:center;
  max-width:var(--max-w); margin:0 auto; width:100%;
}
@media (max-width:980px){
  .hero-inner{grid-template-columns:1fr; gap:48px}
  .hero{min-height:auto; padding-top:120px}
}
.hero-meta{
  display:flex;flex-wrap:wrap;gap:20px;margin-bottom:28px;
  font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--c-text-d-soft);
}
.hero-meta span{display:inline-flex;align-items:center;gap:8px}
.hero-meta .dot{width:6px;height:6px;border-radius:99px;background:var(--c-cyan)}
.hero-meta .dot.m{background:var(--c-magenta)}

.hero h1{font-weight:500}
.hero h1 .accent{
  background:var(--grad-brand);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-style:italic; font-weight:300;
  display:inline-block;
  padding-right:.12em;
  margin-right:-.06em;
}
.hero-sub{
  font-size:clamp(17px, 1.4vw, 21px); color:var(--c-text-d-soft);
  max-width:560px; margin-top:28px; line-height:1.55;
}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}

.hero-stats{
  display:grid; grid-template-columns:repeat(3,1fr);
  margin-top:64px; padding-top:32px;
  border-top:1px solid var(--c-line-d);
  gap:24px;
}
.hero-stats .stat .num{font-family:var(--f-display);font-size:clamp(28px,2.6vw,40px);font-weight:600;letter-spacing:-.02em}
.hero-stats .stat .num .grad{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-stats .stat .lbl{font-size:13px;color:var(--c-text-d-soft);margin-top:6px;line-height:1.4}

/* Hero visual */
.hero-visual{
  position:relative; aspect-ratio: 1/1.02;
  min-height:480px;
}
@media (max-width:980px){.hero-visual{min-height:520px}}

/* Make the orbit variant overflow its column for extra presence */
.hero-visual[data-variant="orbit"]{overflow:visible;z-index:2}

/* ---- Variant switch: cards (original) vs orbit (alternative) ---- */
.hv-variant{position:absolute;inset:0}
.hero-visual[data-variant="cards"] .hv-variant--orbit{display:none}
.hero-visual[data-variant="orbit"] .hv-variant--cards{display:none}

/* ============================================================
   HERO VISUAL · ALT — "Oportunidades en vivo" orbit
   ============================================================ */
.orbit-badge{
  position:absolute; top:2%; left:50%; transform:translateX(-50%); z-index:5;
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;border-radius:99px;
  background:#fff;border:1px solid var(--c-line-d);
  box-shadow:0 14px 30px -16px rgba(10,11,26,.25);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--c-text-d);
}
.orbit-badge .blink{width:7px;height:7px;border-radius:99px;background:var(--c-magenta);animation:blink 1.6s ease-in-out infinite}

.orbit{position:absolute;inset:0;display:grid;place-items:center;overflow:visible}
.orbit-stage{position:relative;width:min(620px,128%);aspect-ratio:1}

/* concentric guide rings + expanding pulses */
.oring{position:absolute;border-radius:50%;border:1px dashed rgba(10,11,26,.12)}
.oring.r1{inset:4%}
.oring.r2{inset:22%}
.opulse{position:absolute;inset:38%;border-radius:50%;border:1.5px solid var(--c-cyan);opacity:0;animation:orbitPulse 3.2s ease-out infinite}
.opulse.d2{animation-delay:1.6s;border-color:var(--c-magenta)}
@keyframes orbitPulse{0%{transform:scale(.6);opacity:.55}100%{transform:scale(2.1);opacity:0}}

/* rotating ring carrying satellites */
.orbit-spin{position:absolute;inset:4%;animation:orbitSpin 30s linear infinite}
@keyframes orbitSpin{to{transform:rotate(360deg)}}
.osat{position:absolute;transform:translate(-50%,-50%)}
.osat .bub{
  display:grid;place-items:center;
  width:72px;height:72px;border-radius:50%;
  font-family:var(--f-display);font-weight:600;font-size:24px;color:#fff;
  box-shadow:0 16px 36px -12px rgba(10,11,26,.42);
  animation:orbitSpin 30s linear infinite reverse;  /* keep upright */
  position:relative;
}
.osat .bub::after{
  content:attr(data-tag);
  position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);
  font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--c-text-d-soft);white-space:nowrap;
  background:rgba(255,255,255,.85);padding:3px 7px;border-radius:99px;
  opacity:0;transition:opacity .3s var(--e-out);
}
.osat .bub:hover::after{opacity:1}
.osat.s1 .bub{background:linear-gradient(140deg,#E5267B,#B23A9E)}
.osat.s2 .bub{background:linear-gradient(140deg,#22C8DD,#2BA7C9)}
.osat.s3 .bub{background:linear-gradient(140deg,#B23A9E,#22C8DD)}
.osat.s4 .bub{background:linear-gradient(140deg,#E5267B,#22C8DD)}
.osat.s5 .bub{background:linear-gradient(140deg,#2BA7C9,#E5267B)}

/* central core */
.orbit-core{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:4;
  width:38%;aspect-ratio:1;border-radius:50%;
  background:#fff;border:1px solid var(--c-line-d);
  box-shadow:0 30px 60px -24px rgba(10,11,26,.3);
  display:grid;place-items:center;text-align:center;padding:6%;
}
.orbit-core .oc-ico{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:var(--grad-brand);margin:0 auto 10px;
}
.orbit-core .oc-ico svg{width:22px;height:22px;stroke:#fff;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.orbit-core .oc-num{
  font-family:var(--f-display);font-weight:600;font-size:clamp(36px,4.4vw,52px);letter-spacing:-.02em;line-height:1;
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.orbit-core .oc-lbl{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--c-text-d-soft);margin-top:7px;line-height:1.3}

/* incoming-call chip that slides in periodically */
.orbit-chip{
  position:absolute;left:-2%;bottom:14%;z-index:5;
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:14px;
  background:#fff;border:1px solid var(--c-line-d);
  box-shadow:0 18px 40px -18px rgba(10,11,26,.3);
  animation:chipCycle 6s ease-in-out infinite;
}
.orbit-chip .ico{width:30px;height:30px;border-radius:50%;background:rgba(34,200,221,.16);display:grid;place-items:center}
.orbit-chip .ico svg{width:15px;height:15px;stroke:var(--c-cyan);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.orbit-chip .tx{font-size:12px;line-height:1.25}
.orbit-chip .tx b{font-family:var(--f-display);font-weight:600;font-size:13px;display:block}
.orbit-chip .tx span{color:var(--c-text-d-soft);font-size:11px}
@keyframes chipCycle{
  0%,100%{opacity:0;transform:translateY(14px) scale(.96)}
  10%,55%{opacity:1;transform:translateY(0) scale(1)}
  65%{opacity:0;transform:translateY(-10px) scale(.98)}
}
@media (max-width:980px){.orbit-chip{bottom:6%}}

.hv-card{
  position:absolute; border-radius:var(--r-lg);
  background:#fff;
  border:1px solid var(--c-line-d);
  padding:18px;
  box-shadow:0 30px 60px -28px rgba(10,11,26,.22);
}
.hv-incall{
  top:6%; left:0; width:62%;
  display:flex;align-items:center;gap:14px;
  animation:float1 9s ease-in-out infinite;
}
.hv-incall .avatar{
  width:46px;height:46px;border-radius:99px;
  background:var(--grad-brand);
  display:grid;place-items:center;color:#fff;font-weight:700;font-family:var(--f-display);
  position:relative;
}
.hv-incall .avatar::after{
  content:"";position:absolute;inset:-6px;border-radius:99px;border:1.5px solid var(--c-magenta);opacity:0;
  animation:ring 2.4s ease-out infinite;
}
.hv-incall .meta{flex:1;min-width:0}
.hv-incall .name{font-family:var(--f-display);font-weight:500;font-size:15px}
.hv-incall .role{font-size:12px;color:var(--c-text-d-soft);margin-top:2px}
.hv-incall .pill{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(34,200,221,.16);color:#0E8294;
  padding:5px 9px;border-radius:99px;
}

.hv-wave{
  top:32%; left:8%; width:78%;
  padding:22px;
  animation:float2 11s ease-in-out infinite;
}
.hv-wave .title{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--c-text-d-soft);margin-bottom:14px}
.wave-bars{display:flex;align-items:center;gap:5px;height:64px}
.wave-bars span{
  flex:1;border-radius:99px;background:linear-gradient(180deg, var(--c-cyan), var(--c-magenta));
  height:30%; transform-origin:center;
  animation:wave 1.4s ease-in-out infinite;
}
.wave-bars span:nth-child(odd){animation-duration:1.7s}
.wave-bars span:nth-child(3n){animation-duration:1.1s}
.wave-bars span:nth-child(5n){background:linear-gradient(180deg, var(--c-magenta), var(--c-cyan))}

.hv-agenda{
  bottom:8%; right:0; width:72%;
  animation:float3 13s ease-in-out infinite;
}
.hv-agenda .ttl{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.hv-agenda .ttl h5{font-family:var(--f-display);font-size:14px;font-weight:500}
.hv-agenda .ttl small{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;color:var(--c-text-d-soft);text-transform:uppercase}
.hv-agenda .row{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--c-line-d)}
.hv-agenda .time{font-family:var(--f-mono);font-size:11px;color:#0E8294;width:50px}
.hv-agenda .what{font-size:13px;flex:1}
.hv-agenda .tag{font-family:var(--f-mono);font-size:10px;padding:3px 8px;border-radius:99px;background:rgba(229,38,123,.15);color:var(--c-magenta-soft)}

.hv-badge{
  position:absolute;
  top:-18px; right:-10px;
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:99px;
  background:var(--grad-brand);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;font-weight:500;
  transform:rotate(2deg);
}
.hv-badge .blink{width:6px;height:6px;border-radius:99px;background:#fff;animation:blink 1.6s ease-in-out infinite}

.hv-lines{position:absolute;inset:0;pointer-events:none}
.hv-lines path{stroke:url(#hvgrad);stroke-width:1;fill:none;stroke-dasharray:3 6;opacity:.35;
  animation:dash 10s linear infinite;
}

@keyframes float1{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes float2{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
@keyframes float3{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes wave{0%,100%{height:30%}50%{height:90%}}
@keyframes ring{0%{opacity:.7;transform:scale(.85)}100%{opacity:0;transform:scale(1.4)}}
@keyframes blink{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes dash{to{stroke-dashoffset:-100}}

/* ============================================================
   PAGE HERO (subpages)
   ============================================================ */
.page-hero{
  position:relative; overflow:hidden;
  background:var(--c-paper); color:var(--c-ink);
  padding:160px var(--pad-x) 100px;
  isolation:isolate;
}
.page-hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(50% 60% at 8% 0%, rgba(229,38,123,.12), transparent 60%),
    radial-gradient(60% 60% at 96% 100%, rgba(34,200,221,.14), transparent 60%),
    var(--c-paper);
}
.page-hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background-image:
    linear-gradient(rgba(10,11,26,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,11,26,.04) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(80% 60% at 50% 50%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(80% 60% at 50% 50%, #000 30%, transparent 80%);
  opacity:.65;
}
.page-hero .wrap{position:relative}
.crumbs{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--c-text-d-soft);
  margin-bottom:36px;display:flex;gap:10px;align-items:center;
}
.crumbs a:hover{color:var(--c-magenta)}
.crumbs .sep{opacity:.4}
.crumbs .cur{color:var(--c-magenta)}

.page-hero h1{
  font-size:clamp(36px, 4.8vw, 68px);
  font-weight:500;
  max-width:980px;
  line-height:1.02;
}
.page-hero h1 .accent{
  background:var(--grad-brand);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-style:italic; font-weight:300;
  display:inline-block; padding-right:.12em; margin-right:-.06em;
}
.page-hero .sub{
  font-size:clamp(17px, 1.4vw, 20px); color:var(--c-text-d-soft);
  max-width:640px; margin-top:28px; line-height:1.55;
}
.page-hero .meta{
  margin-top:40px;
  display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:48px;
  padding-top:24px;border-top:1px solid var(--c-line-d);
}
@media (max-width:680px){
  .page-hero{padding:130px var(--pad-x) 70px}
  .page-hero .meta{grid-template-columns:1fr;gap:18px}
}
.page-hero .meta .k{font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--c-text-d-soft)}
.page-hero .meta .v{font-family:var(--f-display);font-weight:500;font-size:17px;margin-top:6px}

/* Marquee */
.marquee{
  background:var(--c-paper-2); color:var(--c-text-d-soft);
  padding:24px 0;
  border-block:1px solid var(--c-line-d);
  overflow:hidden;
  position:relative;
}
.marquee-track{
  display:flex;gap:64px;align-items:center;
  animation: marquee 38s linear infinite;
  white-space:nowrap;
  font-family:var(--f-display);font-size:clamp(20px,2vw,28px);font-weight:300;letter-spacing:-.02em;
}
.marquee-track .dot{width:8px;height:8px;border-radius:99px;background:var(--c-magenta);display:inline-block}
.marquee-track .dot.c{background:var(--c-cyan)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ============================================================
   Value cards (¿En qué te ayudamos?)
   ============================================================ */
.value-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:24px}
/* !important necesario: el bloque valor-grid fija grid-template-columns inline (perRow),
   que gana a cualquier regla de media query sin !important */
@media (max-width:980px){.value-grid{grid-template-columns:repeat(2, 1fr) !important; gap:20px !important}}
@media (max-width:600px){.value-grid{grid-template-columns:1fr !important}}
.value-card{
  background:#fff; border:1px solid var(--c-line-d); border-radius:var(--r-xl);
  padding:36px; position:relative; overflow:hidden;
  transition:transform .5s var(--e-out), box-shadow .5s var(--e-out), border-color .5s var(--e-out);
}
.value-card:hover{transform:translateY(-6px); box-shadow:0 30px 60px -30px rgba(10,11,26,.18); border-color:transparent}
.value-card .num{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;
  color:var(--c-text-d-soft); margin-bottom:48px; display:block;
}
.value-card .ico{
  width:64px;height:64px;border-radius:50%;
  display:grid;place-items:center;
  overflow:visible;
  background:linear-gradient(135deg, rgba(229,38,123,.12), rgba(34,200,221,.12));
  margin-bottom:24px;
}
.value-card .ico svg{width:34px;height:34px;stroke:var(--c-magenta);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.value-card .ico svg .fill{fill:var(--c-magenta);stroke:none}
.value-card h3{margin-bottom:14px}
.value-card p{color:var(--c-text-d-soft);font-size:15.5px;line-height:1.6}
.value-card::after{
  content:"";position:absolute;inset:auto -40% -40% auto;width:280px;height:280px;border-radius:999px;
  background:var(--grad-brand-soft); filter:blur(40px); opacity:0;
  transition:opacity .5s var(--e-out);
}
.value-card:hover::after{opacity:1}

/* ============================================================
   Servicios resumen (3 cols)
   ============================================================ */
.svc3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:980px){.svc3{grid-template-columns:1fr !important}}
@media (max-width:980px){.svc3{column-gap:0}}
.svc-card{
  display:block; color:inherit;
  border-radius:var(--r-xl); padding:36px;
  border:1px solid var(--c-line-d);
  background:#fff;
  position:relative; overflow:hidden;
  transition: transform .5s var(--e-out), border-color .5s var(--e-out), box-shadow .5s var(--e-out);
}
.svc-card:hover{transform:translateY(-6px); border-color:transparent; box-shadow:0 30px 60px -30px rgba(10,11,26,.18)}
.svc-card .tag{
  display:inline-block;font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--c-magenta); margin-bottom:32px;
}
.svc-card h3{margin-bottom:14px}
.svc-card p{color:var(--c-text-d-soft);font-size:15.5px}
.svc-card .svc-ico{
  width:72px;height:72px;border-radius:50%;
  display:grid;place-items:center;
  overflow:visible;
  background:linear-gradient(135deg, rgba(34,200,221,.14), rgba(229,38,123,.10));
  margin-bottom:24px;
  transition:transform .45s var(--e-out);
}
.svc-card:hover .svc-ico{transform:translateY(-2px) scale(1.04)}
.svc-card .svc-ico svg{width:38px;height:38px;stroke:var(--c-magenta);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.svc-card .corner{
  position:absolute;top:24px;right:24px;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--c-line-d);
  display:grid;place-items:center;
  transition:background .4s var(--e-out), border-color .4s var(--e-out), transform .4s var(--e-out);
}
.svc-card:hover .corner{background:var(--c-cyan);border-color:transparent;transform:rotate(-45deg)}
.svc-card .corner svg{width:14px;height:14px;stroke:var(--c-ink);stroke-width:1.5;fill:none;stroke-linecap:round;transition:transform .4s var(--e-out)}
.svc-card:hover .corner svg{transform:rotate(45deg)}

/* ============================================================
   Human-First
   ============================================================ */
.human{background:var(--c-paper); position:relative; overflow:hidden}
.human-head{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:end;margin-bottom:60px}
@media (max-width:900px){.human-head{grid-template-columns:1fr;gap:24px;align-items:start}}
.human-head h2{max-width:780px}
.human-head .lead{font-size:17px;color:var(--c-text-d-soft);max-width:480px}

.compare{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:stretch}
@media (max-width:900px){.compare{grid-template-columns:1fr;gap:18px}}
.compare-card{
  border-radius:var(--r-xl);padding:36px;
  border:1px solid var(--c-line-d);
  background:#fff;
}
.compare-card.cold{background:linear-gradient(180deg, #ECEAE2 0%, #E2DFD5 100%); color:var(--c-text-d-soft)}
.compare-card.warm{background:linear-gradient(180deg, rgba(34,200,221,.10), rgba(229,38,123,.06)); color:var(--c-ink); border-color:rgba(34,200,221,.35); position:relative; overflow:hidden}
.compare-card.warm::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 50% at 80% 0%, rgba(34,200,221,.18), transparent 60%);
  pointer-events:none;
}
.compare-card h4{margin-bottom:24px;display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:500;font-size:18px}
.compare-card h4 .chip{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  padding:4px 10px;border-radius:99px;background:rgba(10,11,26,.1);color:var(--c-text-d-soft);font-weight:500;
}
.compare-card.warm h4 .chip{background:var(--c-ink);color:#fff}
.compare-card ul{list-style:none;display:grid;gap:14px}
.compare-card li{display:flex;gap:12px;font-size:15px;line-height:1.5}
.compare-card li .mk{width:18px;height:18px;border-radius:99px;display:grid;place-items:center;flex-shrink:0;margin-top:2px}
.compare-card.cold li .mk{background:rgba(10,11,26,.1);color:var(--c-text-d-soft)}
.compare-card.cold li .mk svg{width:10px;height:10px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round}
.compare-card.warm li .mk{background:var(--c-cyan);color:var(--c-ink)}
.compare-card.warm li .mk svg{width:10px;height:10px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round}

.compare-vs{display:grid;place-items:center;font-family:var(--f-display);font-weight:600;font-size:14px;letter-spacing:.04em;color:var(--c-text-d-soft)}
.compare-vs span{
  width:48px;height:48px;border-radius:99px;display:grid;place-items:center;
  background:#fff;border:1px solid var(--c-line-d);
  position:relative;
}
.compare-vs span::before,
.compare-vs span::after{content:"";position:absolute;width:24px;height:1px;background:var(--c-line-d)}
.compare-vs span::before{left:-24px}
.compare-vs span::after{right:-24px}
@media (max-width:900px){.compare-vs span::before,.compare-vs span::after{display:none}}

.human-quote{
  margin-top:clamp(56px,8vw,96px);
  padding:clamp(110px,17vw,220px) var(--pad-x);
  position:relative; overflow:hidden;
  background-image:
    linear-gradient(90deg, rgba(10,11,26,.74) 0%, rgba(10,11,26,.48) 52%, rgba(10,11,26,.30) 100%),
    url("fondo-activa.png");
  background-size:cover;
  background-position:center;
  border:0;
}
.hq-inner{
  position:relative; z-index:1;
  max-width:var(--max-w); margin-inline:auto;
  display:grid; grid-template-columns:auto 1fr; gap:32px; align-items:center;
}
@media (max-width:780px){.hq-inner{grid-template-columns:1fr; gap:12px}}
.human-quote .mark{
  font-family:var(--f-display); font-size:clamp(80px,8vw,140px); line-height:.8; font-weight:600;
  color:#fff;
  align-self:start;
}
.human-quote blockquote{
  font-family:var(--f-display);
  font-size:clamp(28px,3.8vw,54px);
  font-weight:500; letter-spacing:-.025em; line-height:1.08;
  color:#fff;
  max-width:880px;
  text-wrap:balance;
  text-shadow:0 2px 30px rgba(0,0,0,.25);
}
.human-quote cite{
  display:block; margin-top:22px;
  font-family:var(--f-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.72); font-style:normal;
}

/* ============================================================
   Servicios detallados
   ============================================================ */
.svc-block{
  display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;
  padding-block:60px;
  border-top:1px solid var(--c-line-d);
}
@media (max-width:900px){.svc-block{grid-template-columns:1fr;gap:32px}}
.svc-block .left{position:sticky;top:120px;align-self:start}
.svc-block .label{font-family:var(--f-mono);font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--c-magenta);margin-bottom:18px;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.svc-block .label .num{padding:4px 10px;border-radius:6px;background:rgba(229,38,123,.1)}
.svc-block h3{font-size:clamp(26px,2.4vw,38px);margin-bottom:18px;font-weight:500}
.svc-block .desc{color:var(--c-text-d-soft);font-size:16.5px;max-width:480px}
.svc-block .right ul{list-style:none;display:grid;gap:2px}
.svc-block .right li{
  display:grid;grid-template-columns:auto 1fr;gap:18px;
  padding:18px 0; border-bottom:1px solid var(--c-line-d);
  align-items:start;
  transition:padding-left .3s var(--e-out);
}
.svc-block .right li:hover{padding-left:8px}
.svc-block .right li .ix{font-family:var(--f-mono);font-size:11px;color:var(--c-text-d-soft);letter-spacing:.1em; margin-top:3px}
.svc-block .right li .text{font-size:15.5px;line-height:1.5}

/* ============================================================
   Telemarketing internacional
   ============================================================ */
.intl{background:var(--c-paper);color:var(--c-ink);overflow:hidden}
.intl-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:60px;align-items:center}
@media (max-width:900px){.intl-grid{grid-template-columns:1fr;gap:48px}}
.intl-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:36px}
.intl-list .country{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;border-radius:14px;
  border:1px solid var(--c-line-d);
  transition:background .3s var(--e-out), border-color .3s var(--e-out), transform .3s var(--e-out);
}
.intl-list .country:hover{background:rgba(34,200,221,.06);border-color:rgba(34,200,221,.35);transform:translateX(4px)}
.intl-list .country .flag{width:10px;height:10px;border-radius:99px;background:var(--c-cyan);box-shadow:0 0 14px var(--c-cyan)}
.intl-list .country:nth-child(2n) .flag{background:var(--c-magenta);box-shadow:0 0 14px var(--c-magenta)}
.intl-list .country .name{font-family:var(--f-display);font-weight:500;font-size:16px;flex:1}
.intl-list .country .meta{font-family:var(--f-mono);font-size:11px;color:var(--c-text-d-soft);letter-spacing:.1em}

.intl-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}

.network{position:relative; aspect-ratio: 1/1; max-width:560px; margin:0 auto; width:100%}
.network svg{width:100%;height:100%}
.network .node{
  position:absolute; width:44px;height:44px;border-radius:99px;
  background:#fff; border:1px solid var(--c-line-d);
  display:grid;place-items:center; font-family:var(--f-mono); font-size:10px; letter-spacing:.06em;
  color:var(--c-ink);
  box-shadow:0 10px 24px -14px rgba(10,11,26,.3);
  transform:translate(-50%,-50%);
  transition: background .4s var(--e-out), transform .4s var(--e-out), color .4s var(--e-out);
}
.network .node.hub{
  width:84px;height:84px;background:var(--grad-brand);border-color:transparent;
  font-family:var(--f-display);font-weight:600;font-size:13px;letter-spacing:.02em;
  box-shadow:0 0 0 8px rgba(229,38,123,.1), 0 0 60px rgba(229,38,123,.5);
}
.network .node:not(.hub):hover{background:var(--c-cyan);color:var(--c-ink);transform:translate(-50%,-50%) scale(1.1)}
.network .pulse{
  position:absolute;inset:0;border-radius:99px;border:1.5px solid var(--c-magenta);
  animation:pulse 2.6s ease-out infinite;
}
@keyframes pulse{0%{transform:scale(.5);opacity:.7}100%{transform:scale(2.6);opacity:0}}

/* ============================================================
   Nosotros
   ============================================================ */
.about{background:var(--c-paper)}
.about-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:80px;align-items:start}
@media (max-width:900px){.about-grid{grid-template-columns:1fr;gap:48px}}
.about-grid h2{margin-bottom:24px}
.about-grid p{color:var(--c-text-d-soft);font-size:16.5px;margin-bottom:16px}
.about-side{
  background:#fff;border-radius:var(--r-xl);padding:36px;border:1px solid var(--c-line-d);
  position:sticky;top:120px;
}
.about-side h4{margin-bottom:14px;display:flex;align-items:center;gap:10px}
.about-side h4 .dot{width:8px;height:8px;border-radius:99px;background:var(--c-magenta)}
.about-side p{font-size:15px;color:var(--c-text-d-soft);margin-bottom:24px}
.about-side .meta-row{display:flex;justify-content:space-between;padding:12px 0;border-top:1px solid var(--c-line-d);font-family:var(--f-mono);font-size:12px;letter-spacing:.06em}
.about-side .meta-row .k{color:var(--c-text-d-soft);text-transform:uppercase}

.about-numbers{
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  margin-top:80px;padding:48px;border-radius:var(--r-xl);background:#fff;border:1px solid var(--c-line-d);
}
@media (max-width:780px){.about-numbers{grid-template-columns:repeat(2,1fr);padding:32px}}
.about-numbers .item .num{font-family:var(--f-display);font-size:clamp(36px,4vw,56px);font-weight:600;letter-spacing:-.03em;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.about-numbers .item .lbl{font-size:13px;color:var(--c-text-d-soft);margin-top:8px;line-height:1.4}

/* ============================================================
   Proceso timeline
   ============================================================ */
.proc{position:relative}
/* grid-template-columns NO se fija aquí: lo controla blocks/proceso/src/style.css
   vía var(--proc-cols), que ya trae sus propios breakpoints (768px/480px).
   Si se fijara aquí también, esta regla (cargada después) ganaría siempre por
   orden de cascada y los breakpoints del bloque dejarían de tener efecto. */
.proc-grid{display:grid;gap:24px;margin-top:24px;position:relative}
.proc-line{
  position:absolute; top:34px; left:0; right:0; height:1px;
  background:linear-gradient(90deg, var(--c-magenta), var(--c-cyan));
  opacity:.2;
}
@media (max-width:900px){.proc-line{display:none}}

.proc-step{
  position:relative; padding:80px 18px 28px;
  border-radius:var(--r-lg);
  cursor:default;
  transition:background .5s var(--e-out), transform .5s var(--e-out);
  isolation:isolate;
}
.proc-step::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:
    radial-gradient(70% 70% at 50% 0%, rgba(229,38,123,.10), transparent 60%),
    radial-gradient(70% 70% at 50% 100%, rgba(34,200,221,.08), transparent 60%);
  opacity:0; transition:opacity .5s var(--e-out); z-index:-1;
}
.proc-step:hover{transform:translateY(-4px)}
.proc-step:hover::before{opacity:1}

.proc-step .dot{
  position:absolute; top:24px; left:18px;
  width:20px;height:20px;border-radius:99px;
  background:var(--c-paper);
  border:1.5px solid var(--c-ink);
  display:grid;place-items:center;
  z-index:2;
  transition: transform .45s var(--e-out), border-color .45s var(--e-out), box-shadow .45s var(--e-out), background .45s var(--e-out);
}
.proc-step .dot::before{
  content:""; width:8px; height:8px; border-radius:99px;
  background:var(--grad-brand);
  transition: width .45s var(--e-out), height .45s var(--e-out);
}
/* halo ring (appears on hover, pulses) */
.proc-step .dot::after{
  content:""; position:absolute; inset:-6px; border-radius:99px;
  border:1.5px solid var(--c-magenta);
  opacity:0; transform:scale(.6);
  transition: opacity .35s var(--e-out), transform .35s var(--e-out);
  pointer-events:none;
}
.proc-step:hover .dot{
  transform:scale(1.25);
  border-color:var(--c-magenta);
  background:#fff;
  box-shadow:
    0 0 0 6px rgba(229,38,123,.10),
    0 8px 22px -6px rgba(229,38,123,.45);
}
.proc-step:hover .dot::before{width:10px;height:10px}
.proc-step:hover .dot::after{
  opacity:1; transform:scale(1);
  animation: procPulse 2s ease-out infinite;
}
@keyframes procPulse{
  0%   {opacity:.7; transform:scale(.6)}
  100% {opacity:0;  transform:scale(2.6)}
}

.proc-step .num{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;color:var(--c-text-d-soft);
  text-transform:uppercase;margin-bottom:18px;
  display:inline-flex;align-items:center;gap:10px;
  transition: color .35s var(--e-out), letter-spacing .35s var(--e-out);
}
.proc-step .num::before{
  content:""; width:0; height:1px; background:currentColor;
  transition: width .45s var(--e-out);
}
.proc-step:hover .num{
  color:var(--c-magenta);
  letter-spacing:.22em;
}
.proc-step:hover .num::before{width:18px}

.proc-step h3{
  font-size:22px;margin-bottom:12px;font-weight:500;
  transition: color .35s var(--e-out), transform .45s var(--e-out);
}
.proc-step:hover h3{
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.proc-step p{
  color:var(--c-text-d-soft);font-size:15px;line-height:1.55;
  transition: color .35s var(--e-out);
}
.proc-step:hover p{color:var(--c-text-d)}

/* Timeline line dims slightly when any step is hovered */
.proc-grid:hover .proc-line{opacity:.15}

/* ============================================================
   Testimonios
   ============================================================ */
.testi{background:var(--c-paper-2);color:var(--c-ink)}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:900px){.testi-grid{grid-template-columns:1fr}}
.testi-card{
  border-radius:var(--r-xl);padding:32px;
  background:#fff;
  border:1px solid var(--c-line-d);
  display:flex;flex-direction:column;gap:24px;
  transition:transform .5s var(--e-out), border-color .5s var(--e-out), box-shadow .5s var(--e-out);
}
.testi-card:hover{transform:translateY(-6px);border-color:transparent;box-shadow:0 30px 60px -30px rgba(10,11,26,.18)}
.testi-card .quote{font-family:var(--f-display);font-size:18px;font-weight:400;line-height:1.45;letter-spacing:-.01em;flex:1}
.testi-card .who{display:flex;align-items:center;gap:12px;padding-top:20px;border-top:1px solid var(--c-line-d)}
.testi-card .who .ava{width:40px;height:40px;border-radius:99px;background:var(--grad-brand);display:grid;place-items:center;font-weight:600;font-family:var(--f-display);color:#fff;font-size:14px}
.testi-card .who .name{font-family:var(--f-display);font-weight:500;font-size:14px}
.testi-card .who .role{font-size:12px;color:var(--c-text-d-soft);margin-top:2px}
.testi-card .stars{display:flex;gap:2px;color:var(--c-magenta-soft)}
.testi-card .stars svg{width:14px;height:14px;fill:currentColor}

/* ============================================================
   CTA pre-footer
   ============================================================ */
.precta{position:relative;overflow:hidden}
.precta .box{
  background:var(--c-paper-2);color:var(--c-ink);border-radius:var(--r-xl);
  padding:80px 56px;
  display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;
  position:relative;overflow:hidden;
  border:1px solid var(--c-line-d);
}
@media (max-width:900px){.precta .box{grid-template-columns:1fr;padding:48px 28px}}
.precta .box::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(50% 70% at 0% 100%, rgba(229,38,123,.12), transparent 60%),
    radial-gradient(50% 60% at 100% 0%, rgba(34,200,221,.16), transparent 60%);
}
.precta .box > *{position:relative;z-index:1}
.precta h2{font-weight:500}
.precta p{color:var(--c-text-d-soft);margin-top:18px;max-width:520px;font-size:17px}
.precta .ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.precta .phone-card{
  background:#fff;
  border:1px solid var(--c-line-d);
  border-radius:var(--r-lg);padding:28px;
  box-shadow:0 20px 50px -30px rgba(10,11,26,.2);
}
.precta .phone-card .k{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--c-text-d-soft)}
.precta .phone-card a{
  display:block;
  font-family:var(--f-display);font-size:clamp(28px,3vw,40px);font-weight:500;letter-spacing:-.02em;margin-top:10px;
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.precta .phone-card .h{display:flex;align-items:center;gap:8px;margin-top:18px;padding-top:18px;border-top:1px solid var(--c-line-d);font-size:13px;color:var(--c-text-d-soft)}
.precta .phone-card .h .live{width:8px;height:8px;border-radius:99px;background:#3DDC97;box-shadow:0 0 12px #3DDC97;animation:blink 2s ease-in-out infinite}

/* ----- Bare CTA (no container) + animated call graphic ----- */
.precta{overflow:hidden}
.precta-bare{
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;
}
@media (max-width:900px){.precta-bare{grid-template-columns:1fr;gap:48px}}
.precta-copy h2{font-weight:500}
.precta-copy p{color:var(--c-text-d-soft);margin-top:18px;max-width:520px;font-size:17px}
.precta-copy .ctas,.precta-copy .wp-block-buttons{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}

/* Big creative call graphic */
.call-graphic{
  position:relative;
  justify-self:center;
  display:grid;place-items:center;
  width:min(460px,94%);aspect-ratio:1;
  color:var(--c-ink);
  isolation:isolate;
  text-decoration:none;
}

/* animated background blobs */
.call-graphic .cg-bg{position:absolute;inset:-8%;z-index:-1;pointer-events:none}
.call-graphic .cg-blob{
  position:absolute;border-radius:50%;filter:blur(2px);opacity:.5;
  background:radial-gradient(circle at 30% 30%, rgba(34,200,221,.5), rgba(34,200,221,0) 70%);
  animation:cgFloat 9s ease-in-out infinite;
}
.call-graphic .cg-blob.b1{width:46%;height:46%;top:2%;left:-4%;animation-delay:0s}
.call-graphic .cg-blob.b2{width:40%;height:40%;bottom:0%;right:-2%;
  background:radial-gradient(circle at 30% 30%, rgba(229,38,123,.5), rgba(229,38,123,0) 70%);animation-delay:-3s}
.call-graphic .cg-blob.b3{width:30%;height:30%;bottom:6%;left:14%;
  background:radial-gradient(circle at 30% 30%, rgba(178,58,158,.45), rgba(178,58,158,0) 70%);animation-delay:-6s}
@keyframes cgFloat{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(8%,-6%) scale(1.08)}
  66%{transform:translate(-6%,5%) scale(.95)}
}

/* concentric dashed guide rings, slowly rotating */
.call-graphic .cg-orbit{
  position:absolute;border-radius:50%;border:1.5px dashed rgba(10,11,26,.14);
}
.call-graphic .cg-orbit.o1{inset:6%;animation:orbitSpin 26s linear infinite}
.call-graphic .cg-orbit.o2{inset:20%;animation:orbitSpin 20s linear infinite reverse}

/* expanding sonar rings */
.call-graphic .cg-rings{position:absolute;inset:0;display:grid;place-items:center}
.call-graphic .cg-ring{
  position:absolute;width:38%;height:38%;border-radius:50%;
  border:2px solid var(--c-cyan);
  opacity:0;transform:scale(.5);
  animation:cgRing 3.2s ease-out infinite;
}
.call-graphic .cg-ring:nth-child(2){animation-delay:.8s;border-color:var(--c-magenta)}
.call-graphic .cg-ring:nth-child(3){animation-delay:1.6s}
.call-graphic .cg-ring:nth-child(4){animation-delay:2.4s;border-color:var(--c-magenta)}
@keyframes cgRing{
  0%{opacity:.6;transform:scale(.42)}
  100%{opacity:0;transform:scale(1.5)}
}

/* orbiting contact dots riding the rings */
.call-graphic .cg-sat{position:absolute;inset:6%;animation:orbitSpin 14s linear infinite}
.call-graphic .cg-sat span{
  position:absolute;top:-7px;left:50%;transform:translateX(-50%);
  width:14px;height:14px;border-radius:50%;background:var(--c-cyan);
  box-shadow:0 0 14px var(--c-cyan);
}
.call-graphic .cg-sat.t2{inset:20%;animation-duration:10s;animation-direction:reverse}
.call-graphic .cg-sat.t2 span{background:var(--c-magenta);box-shadow:0 0 14px var(--c-magenta);width:11px;height:11px}

/* round central icon disc */
.call-graphic .cg-disc{
  position:relative;z-index:2;
  width:34%;aspect-ratio:1;border-radius:50%;
  background:var(--grad-brand);
  display:grid;place-items:center;
  box-shadow:0 24px 50px -16px rgba(229,38,123,.55), inset 0 2px 8px rgba(255,255,255,.25);
  animation:cgShake 3.2s ease-in-out infinite;
}
.call-graphic .cg-disc svg{width:42%;height:42%;stroke:#fff;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
@keyframes cgShake{
  0%,70%,100%{transform:rotate(0)}
  74%{transform:rotate(-13deg)}
  78%{transform:rotate(11deg)}
  82%{transform:rotate(-8deg)}
  86%{transform:rotate(5deg)}
  90%{transform:rotate(0)}
}

/* floating number pill */
.call-graphic .cg-info{
  position:absolute;z-index:3;bottom:4%;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:3px;
  background:rgba(255,255,255,.86);backdrop-filter:blur(8px);
  border:1px solid var(--c-line-d);
  padding:14px 26px;border-radius:18px;
  box-shadow:0 22px 50px -24px rgba(10,11,26,.4);
  white-space:nowrap;
}
.call-graphic .cg-k{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-text-d-soft);
  display:inline-flex;align-items:center;gap:7px;
}
.call-graphic .cg-k .live{width:7px;height:7px;border-radius:99px;background:#3DDC97;box-shadow:0 0 12px #3DDC97;animation:blink 2s ease-in-out infinite}
.call-graphic .cg-num{
  font-family:var(--f-display);font-weight:600;font-size:clamp(24px,2.8vw,34px);letter-spacing:-.02em;line-height:1.05;
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;
  transition:opacity .3s var(--e-out);
}
.call-graphic:hover .cg-num{opacity:.82}
.call-graphic .cg-h{font-size:11.5px;color:var(--c-text-d-soft)}

/* ============================================================
   Contacto
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;gap:40px}}
.contact-info h2{margin-bottom:20px}
.contact-info > p{color:var(--c-text-d-soft);margin-bottom:40px;font-size:17px}
.contact-info .info-list{display:grid;gap:18px;margin-bottom:32px}
.contact-info .info-item{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:18px 0;border-top:1px solid var(--c-line-d)}
.contact-info .info-item:last-child{border-bottom:1px solid var(--c-line-d)}
.contact-info .info-item .ico{width:36px;height:36px;border-radius:50%;background:rgba(229,38,123,.08);display:grid;place-items:center;color:var(--c-magenta)}
.contact-info .info-item .ico svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.contact-info .info-item .k{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-text-d-soft)}
.contact-info .info-item .v{font-family:var(--f-display);font-weight:500;font-size:17px;margin-top:4px}
.contact-info .info-item .v a:hover{color:var(--c-magenta)}

.contact-form{
  background:#fff;border:1px solid var(--c-line-d);border-radius:var(--r-xl);
  padding:40px;
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
@media (max-width:600px){.form-row{grid-template-columns:1fr}}
.form-field{display:flex;flex-direction:column;gap:6px}
.form-field label{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--c-text-d-soft)}
.form-field label .req{color:var(--c-magenta)}
.form-field input,
.form-field textarea,
.form-field select{
  background:transparent; border:0; border-bottom:1px solid var(--c-line-d);
  padding:10px 0; font-size:16px; color:var(--c-text-d);
  transition:border-color .25s var(--e-out);
  width:100%;
}
.form-field input:focus,
.form-field textarea:focus{outline:none;border-bottom-color:var(--c-magenta)}
.form-field textarea{resize:vertical;min-height:80px}
.form-check{display:flex;align-items:flex-start;gap:12px;margin:24px 0;font-size:13.5px;color:var(--c-text-d-soft)}
.form-check input{margin-top:3px;accent-color:var(--c-magenta);width:16px;height:16px}
.form-check a{text-decoration:underline;text-underline-offset:3px}
.form-submit{display:flex;justify-content:flex-end}
.form-success{
  display:none;padding:20px;border-radius:14px;
  background:linear-gradient(135deg, rgba(34,200,221,.12), rgba(229,38,123,.08));
  border:1px solid rgba(34,200,221,.3);
  color:var(--c-ink);font-size:15px; margin-top:18px;
  align-items:center;gap:14px;
}
.form-success.is-on{display:flex}
.form-success .ck{width:32px;height:32px;border-radius:99px;background:var(--c-cyan);display:grid;place-items:center;flex-shrink:0}
.form-success .ck svg{width:14px;height:14px;stroke:var(--c-ink);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}

.form-error{color:var(--c-magenta);font-size:12px;display:none;margin-top:4px}
.form-field.is-error input,
.form-field.is-error textarea{border-bottom-color:var(--c-magenta)}
.form-field.is-error .form-error{display:block}

/* Map placeholder for contact page */
.map-card{
  margin-top:48px;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--c-line-d);
  background:var(--c-paper-2);
  aspect-ratio: 16/7;
  position:relative;
  display:grid;place-items:center;
  font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-text-d-soft);
  background-image:
    repeating-linear-gradient(0deg, rgba(10,11,26,.04) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(10,11,26,.04) 0 1px, transparent 1px 40px);
}
.map-card .pin{
  width:20px;height:20px;border-radius:99px;background:var(--grad-brand);
  position:relative;margin-bottom:14px;justify-self:center;
  box-shadow:0 0 0 6px rgba(229,38,123,.15);
}
.map-card .pin::after{
  content:"";position:absolute;inset:-4px;border-radius:99px;border:1.5px solid var(--c-magenta);
  animation:pulse 2.6s ease-out infinite;
}

/* ============================================================
   Footer
   ============================================================ */
.footer{background:var(--c-paper-2);color:var(--c-ink);padding-block:80px 40px;border-top:1px solid var(--c-line-d)}
.footer-grid{display:grid;grid-template-columns:1.4fr .8fr .8fr .8fr;gap:48px;margin-bottom:64px}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;gap:40px}}
@media (max-width:600px){.footer-grid{grid-template-columns:1fr}}
.footer-desc{color:var(--c-text-d-soft);font-size:14.5px;line-height:1.55;margin-top:18px;max-width:340px}
.footer-col h5{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--c-text-d-soft);margin-bottom:18px;font-weight:500}
.footer-col a{display:block;padding:6px 0;color:var(--c-ink);font-size:14.5px;opacity:.8;transition:opacity .25s var(--e-out),padding-left .25s var(--e-out),color .25s var(--e-out)}
.footer-col a:hover{opacity:1;padding-left:6px;color:var(--c-magenta)}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
  padding-top:32px;border-top:1px solid var(--c-line-d);
  font-size:12.5px;color:var(--c-text-d-soft);
  font-family:var(--f-mono);letter-spacing:.06em;
}
.footer-bottom .legal{display:flex;flex-wrap:wrap;gap:24px}

/* ============================================================
   BLOG
   ============================================================ */
/* Category filter chips */
.blog-filter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:56px}
.blog-filter .chip{
  font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;
  padding:9px 16px;border-radius:999px;
  border:1px solid var(--c-line-d);
  color:var(--c-text-d-soft);
  transition:background .3s var(--e-out), color .3s var(--e-out), border-color .3s var(--e-out), transform .3s var(--e-out);
  cursor:pointer;
}
.blog-filter .chip:hover{transform:translateY(-2px);border-color:rgba(10,11,26,.25)}
.blog-filter .chip.is-active{background:var(--c-ink);color:#fff;border-color:transparent}

/* Featured article */
.blog-feature{
  display:grid;grid-template-columns:1.15fr .85fr;gap:0;
  border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--c-line-d);background:#fff;
  margin-bottom:56px;
  transition:box-shadow .5s var(--e-out), transform .5s var(--e-out);
}
.blog-feature:hover{box-shadow:0 40px 80px -40px rgba(10,11,26,.25);transform:translateY(-4px)}
@media (max-width:860px){.blog-feature{grid-template-columns:1fr}}
.blog-feature .thumb{position:relative;min-height:360px}
.blog-feature .body{padding:48px;display:flex;flex-direction:column;justify-content:center}
@media (max-width:600px){.blog-feature .body{padding:32px}}
.blog-feature .body h3{font-size:clamp(26px,2.6vw,38px);font-weight:500;line-height:1.1;margin:18px 0 16px}
.blog-feature .body p{color:var(--c-text-d-soft);font-size:16px;line-height:1.6;margin-bottom:28px}

/* Striped image placeholder (drop real images later) */
.thumb-ph{
  position:absolute;inset:0;
  background:
    repeating-linear-gradient(135deg, rgba(10,11,26,.05) 0 2px, transparent 2px 12px),
    linear-gradient(135deg, rgba(229,38,123,.10), rgba(34,200,221,.10));
  display:grid;place-items:center;
  overflow:hidden;
}
.thumb-ph::after{
  content:attr(data-label);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--c-text-d-soft);
  background:rgba(246,245,241,.7);backdrop-filter:blur(3px);
  padding:6px 12px;border-radius:99px;
}

/* Date badge */
.blog-date{
  position:absolute;top:18px;left:18px;z-index:2;
  background:var(--c-ink);color:#fff;border-radius:14px;
  padding:10px 14px;text-align:center;line-height:1;
  font-family:var(--f-display);
}
.blog-date .d{font-size:22px;font-weight:600;display:block}
.blog-date .m{font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;opacity:.7;margin-top:4px;display:block}

.blog-cat{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--c-magenta);display:inline-flex;align-items:center;gap:8px;
}
.blog-cat::before{content:"";width:18px;height:1px;background:currentColor;opacity:.7}

.blog-readmore{
  font-family:var(--f-display);font-weight:500;font-size:15px;
  display:inline-flex;align-items:center;gap:10px;align-self:flex-start;
  color:var(--c-ink);
}
.blog-readmore .arrow{
  width:18px;height:18px;border-radius:99px;display:grid;place-items:center;
  background:rgba(10,11,26,.06);transition:transform .35s var(--e-out), background .35s var(--e-out), color .35s var(--e-out);
}
.blog-feature:hover .blog-readmore .arrow,
.blog-card:hover .blog-readmore .arrow{transform:translateX(4px);background:var(--grad-brand);color:#fff}

/* Article grid */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:980px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.blog-grid{grid-template-columns:1fr}}
.blog-card{
  background:#fff;border:1px solid var(--c-line-d);border-radius:var(--r-xl);overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .5s var(--e-out), box-shadow .5s var(--e-out), border-color .5s var(--e-out);
}
.blog-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(10,11,26,.2);border-color:transparent}
.blog-card .thumb{position:relative;aspect-ratio:16/10}
.blog-card .body{padding:28px;display:flex;flex-direction:column;gap:14px;flex:1}
.blog-card .body h3{font-size:20px;font-weight:500;line-height:1.2;letter-spacing:-.01em}
.blog-card .body p{color:var(--c-text-d-soft);font-size:14.5px;line-height:1.55;flex:1}
.blog-card .blog-readmore{font-size:14px;margin-top:4px}

/* Pagination */
.blog-pager{display:flex;justify-content:center;gap:8px;margin-top:64px}
.blog-pager a{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  font-family:var(--f-mono);font-size:14px;
  border:1px solid var(--c-line-d);color:var(--c-text-d-soft);
  transition:background .3s var(--e-out), color .3s var(--e-out), border-color .3s var(--e-out);
}
.blog-pager a:hover{border-color:rgba(10,11,26,.25)}
.blog-pager a.is-active{background:var(--c-ink);color:#fff;border-color:transparent}
.blog-pager a.nav-arrow{width:auto;padding:0 18px;gap:8px}

/* Newsletter */
.newsletter{
  margin-top:0;
  background:var(--c-paper-2);color:var(--c-ink);border-radius:var(--r-xl);
  padding:64px 56px;position:relative;overflow:hidden;
  display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;
  border:1px solid var(--c-line-d);
}
@media (max-width:780px){.newsletter{grid-template-columns:1fr;padding:40px 28px;gap:28px}}
.newsletter::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(50% 70% at 0% 0%, rgba(229,38,123,.10), transparent 60%),
    radial-gradient(50% 70% at 100% 100%, rgba(34,200,221,.14), transparent 60%);
}
.newsletter > *{position:relative;z-index:1}
.newsletter h2{font-weight:500;font-size:clamp(26px,2.6vw,38px)}
.newsletter p{color:var(--c-text-d-soft);margin-top:14px;max-width:420px;font-size:16px}
.newsletter-form{display:flex;gap:10px;flex-wrap:wrap;min-width:min(420px,100%)}
.newsletter-form input{
  flex:1;min-width:200px;
  background:#fff;border:1px solid var(--c-line-d);
  border-radius:999px;padding:14px 20px;color:var(--c-ink);font-size:15px;
  transition:border-color .3s var(--e-out);
}
.newsletter-form input::placeholder{color:var(--c-text-d-soft)}
.newsletter-form input:focus{outline:none;border-color:var(--c-cyan)}
.newsletter-note{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:var(--c-text-d-soft);
  margin-top:16px;display:none;
}
.newsletter-note.is-on{display:block;color:#0E8294}

/* ============================================================
   Featured value card (¿En qué te ayudamos?)
   ============================================================ */
.section-head--center{margin-inline:auto;text-align:center;max-width:920px}
.section-head--center .eyebrow::before{display:none}
.section-head--center .eyebrow{display:inline-block}

.value-feature{
  display:grid;grid-template-columns:1fr .8fr;gap:40px;align-items:center;
  background:#fff;border:1px solid var(--c-line-d);border-radius:var(--r-xl);
  padding:56px;margin-bottom:24px;position:relative;overflow:hidden;
  box-shadow:0 30px 60px -38px rgba(10,11,26,.2);
}
@media (max-width:860px){.value-feature{grid-template-columns:1fr;padding:36px 28px;gap:8px}}
.value-feature .vf-num{
  position:absolute;top:30px;left:56px;
  font-family:var(--f-display);font-weight:700;font-size:104px;line-height:1;
  color:rgba(10,11,26,.05);letter-spacing:-.04em;pointer-events:none;
}
@media (max-width:860px){.value-feature .vf-num{left:28px;top:24px;font-size:78px}}
.vf-copy{position:relative;padding-top:68px}
@media (max-width:860px){.vf-copy{padding-top:54px}}
.vf-copy .tag{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--c-magenta);display:block;margin-bottom:16px}
.vf-copy h3{font-size:clamp(26px,2.6vw,37px);font-weight:600;margin-bottom:16px;letter-spacing:-.014em;line-height:1.05}
.vf-copy p{color:var(--c-text-d-soft);font-size:16.5px;line-height:1.6;max-width:440px}

.vf-visual{position:relative;align-self:stretch;min-height:320px;display:grid;place-items:center}
.vf-disc{
  position:relative;width:min(340px,90%);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(120% 120% at 50% 18%, var(--c-magenta-soft), var(--c-magenta) 55%, #B23A9E 100%);
  overflow:hidden;box-shadow:0 34px 64px -22px rgba(229,38,123,.5);
  display:flex;align-items:flex-end;justify-content:center;
}
.vf-disc img{width:104%;max-width:none;object-fit:contain;object-position:bottom;display:block;filter:drop-shadow(0 12px 26px rgba(0,0,0,.22))}
.vf-clock{
  position:absolute;left:4%;bottom:12%;z-index:2;
  width:66px;height:66px;border-radius:50%;
  background:#fff;border:1px solid var(--c-line-d);
  display:grid;place-items:center;
  box-shadow:0 18px 40px -16px rgba(10,11,26,.4);
}
.vf-clock svg{width:30px;height:30px;stroke:var(--c-magenta);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}

.value-grid--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){.value-grid--3{grid-template-columns:1fr}}

/* ============================================================
   Services illustration
   ============================================================ */
.svc-illu{position:relative;display:grid;place-items:center;margin-bottom:52px}
.svc-illu::before{
  content:"";position:absolute;width:58%;height:86%;border-radius:50%;
  background:var(--grad-brand-soft);filter:blur(64px);opacity:.8;z-index:0;
}
.svc-illu img{position:relative;z-index:1;width:min(500px,82%);height:auto}

/* ============================================================
   Somos parte de tu equipo (banner foto)
   ============================================================ */
.team-banner{
  position:relative;overflow:hidden;background:var(--c-paper);
  min-height:580px;display:flex;align-items:center;isolation:isolate;
  padding-block:80px;
}
.team-banner-media{position:absolute;inset:0;z-index:-2}
.team-banner-media img{width:100%;height:100%;object-fit:cover;object-position:center right}
.team-banner::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg, var(--c-paper) 26%, rgba(246,245,241,.72) 48%, rgba(246,245,241,0) 76%);
}
.team-banner-inner{position:relative;width:100%}
.team-logo img{height:84px;width:auto}
.team-eyebrow{font-family:var(--f-display);font-weight:400;font-size:clamp(20px,2.2vw,30px);color:var(--c-text-d);margin-top:26px;letter-spacing:-.02em}
.team-title{font-size:clamp(40px,6vw,76px);font-weight:600;letter-spacing:-.03em;line-height:1.0;margin-top:4px}
.team-title .accent{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.team-banner--inset{margin-top:clamp(56px,8vw,96px)}
.team-cite{display:block;margin-top:22px;font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--c-text-d-soft);font-style:normal}
@media (max-width:780px){
  .team-banner{min-height:520px}
  .team-banner::before{background:linear-gradient(180deg, rgba(246,245,241,.94) 38%, rgba(246,245,241,.55) 68%, rgba(246,245,241,.15))}
  .team-banner-media img{object-position:center}
}

/* ============================================================
   Reveal animations
   ============================================================ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--e-out),transform .9s var(--e-out)}
.reveal.is-in{opacity:1;transform:none}
.reveal-stagger > *{opacity:0;transform:translateY(24px);transition:opacity .8s var(--e-out),transform .8s var(--e-out)}
.reveal-stagger.is-in > *{opacity:1;transform:none}
.reveal-stagger.is-in > *:nth-child(1){transition-delay:.05s}
.reveal-stagger.is-in > *:nth-child(2){transition-delay:.15s}
.reveal-stagger.is-in > *:nth-child(3){transition-delay:.25s}
.reveal-stagger.is-in > *:nth-child(4){transition-delay:.35s}
.reveal-stagger.is-in > *:nth-child(5){transition-delay:.45s}
.reveal-stagger.is-in > *:nth-child(6){transition-delay:.55s}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
  .reveal,.reveal-stagger > *{opacity:1;transform:none}
}

/* ============================================================
   Header FSE — ag-header
   ============================================================ */
.ag-header{
  position:fixed!important;top:0;left:0;right:0;z-index:1000;
  padding:14px var(--pad-x);
  background:rgba(246,245,241,.96);
  backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  display:grid!important;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  transition:padding .4s var(--e-out),background .4s var(--e-out),box-shadow .4s var(--e-out);
}
.ag-header.is-scrolled{
  padding-block:10px;
  background:rgba(246,245,241,.92);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  box-shadow:0 8px 30px -22px rgba(10,11,26,.3);
}
.ag-header__logo,.wp-block-site-logo.ag-header__logo{max-width:none!important}
.ag-header__logo img{height:90px!important;width:auto!important;transition:height .35s var(--e-out)}
.ag-header.is-scrolled .ag-header__logo img{height:60px!important}
.ag-header__cta{display:flex;align-items:center;justify-self:end}

/* Nav links (WordPress navigation block) */
.ag-header__nav .wp-block-navigation__container{display:flex;align-items:center;gap:4px;list-style:none;padding:0;margin:0}
.ag-header__nav .wp-block-navigation-item__content{
  padding:9px 14px;border-radius:999px;
  font-size:14px;font-weight:500;color:var(--c-ink);
  transition:background .25s var(--e-out),color .25s var(--e-out);
  display:flex;align-items:center;gap:6px;
}
.ag-header__nav .wp-block-navigation-item__content:hover{background:rgba(10,11,26,.06)}
.ag-header__nav .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content,
.ag-header__nav .wp-block-navigation-item.current-page-ancestor .wp-block-navigation-item__content{color:var(--c-magenta)}

/* Selector de idioma (GTranslate) — barra de escritorio (se sobreescribe en el drawer móvil) */
.ag-header__nav .gtranslate_wrapper{
  display:flex!important;align-items:center!important;
  gap:4px!important;margin-left:40px!important;
}
.ag-header__nav .gtranslate_wrapper a.glink{
  padding-left:5px!important;padding-right:5px!important;
}

/* WP 6.4+ renders .has-child (not .wp-block-navigation-item--has-child).
   ::after bridges the hover gap between the nav link and the submenu without
   adding height to the flex item (which would shift the label upward). */
.ag-header__nav .has-child::after{
  content:'';position:absolute;bottom:-10px;left:0;right:0;height:10px;
}

/* Submenu container — visual overrides only.
   WP's own CSS controls opacity/visibility/width/height via :hover and aria-expanded.
   NEVER set pointer-events:none here — WP's hover rule does not restore pointer-events:auto,
   so it would permanently block clicks even when the submenu is visible. */
.ag-header__nav .wp-block-navigation__submenu-container{
  background:#fff!important;
  border:1px solid rgba(10,11,26,.08)!important;
  border-radius:20px!important;
  box-shadow:0 30px 60px -24px rgba(10,11,26,.28)!important;
  padding:10px!important;
  min-width:280px!important;
  gap:2px!important;
  z-index:200!important;
}
.ag-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
  padding:11px 14px!important;border-radius:12px!important;
  font-size:14px!important;font-weight:500!important;
  display:flex!important;align-items:center!important;gap:12px!important;
  white-space:nowrap!important;color:var(--c-ink)!important;
  transition:background .2s!important;
}
.ag-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover{
  background:rgba(34,200,221,.1)!important;color:var(--c-ink)!important;
}

/* Submenu service icons — circular cyan background matching reference design */
.nav-svc-sec .wp-block-navigation-item__content::before,
.nav-svc-tel .wp-block-navigation-item__content::before,
.nav-svc-dom .wp-block-navigation-item__content::before{
  content:'';width:36px;height:36px;flex-shrink:0;
  background-color:#EDF9FB;border-radius:50%;
  background-repeat:no-repeat;background-position:center;
  background-size:20px 20px;
  display:inline-block;
}
.nav-svc-sec .wp-block-navigation-item__content::before{
  background-image:url('../img/secretariado-new.svg');
}
.nav-svc-tel .wp-block-navigation-item__content::before{
  background-image:url('../img/telemarketing-new.svg');
}
.nav-svc-dom .wp-block-navigation-item__content::before{
  background-image:url('../img/RGPD-new.svg');
}

/* Chevron toggle icon */
.ag-header__nav .wp-block-navigation__submenu-icon{
  display:flex;align-items:center;opacity:.55;
}
.ag-header__nav .wp-block-navigation__submenu-icon svg{width:10px;height:10px;stroke:currentColor;stroke-width:2;fill:none}

/* ── WordPress block-button wrapper fix ──
   display:contents elimina la caja visual del div wrapper.
   Los hijos (<a>) quedan como items directos del flex padre.
   TODO el estilo visual va al <a> interior (.wp-block-button__link). */
.wp-block-button.btn,
.wp-block-button.btn--brand,
.wp-block-button.btn--primary,
.wp-block-button.btn--ghost{
  background:none!important;
  box-shadow:none!important;
  border:none!important;
  padding:0!important;
}
/* Estilos base de botón en el <a> interior */
.wp-block-button.btn .wp-block-button__link,
.wp-block-button.btn--brand .wp-block-button__link,
.wp-block-button.btn--primary .wp-block-button__link,
.wp-block-button.btn--ghost .wp-block-button__link{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px;border-radius:999px;
  font-weight:500;font-size:15px;letter-spacing:-.005em;
  border:1px solid transparent;
  transition:transform .35s var(--e-out),background-color .35s var(--e-out),color .35s var(--e-out),box-shadow .35s var(--e-out),border-color .35s var(--e-out);
  white-space:nowrap;will-change:transform;
}
/* Brand: color en el <a>, no en el wrapper div */
.wp-block-button.btn--brand .wp-block-button__link,
.wp-block-button.btn--primary .wp-block-button__link{
  background-color:var(--c-cyan);
  color:#fff;
  box-shadow:0 12px 28px -12px rgba(34,200,221,.55);
}
.wp-block-button.btn--brand .wp-block-button__link:hover,
.wp-block-button.btn--primary .wp-block-button__link:hover{
  background-color:var(--c-magenta)!important;
  color:#fff!important;
  box-shadow:0 16px 38px -14px rgba(229,38,123,.45);
  transform:translateY(-2px);
}
/* Ghost */
.wp-block-button.btn--ghost .wp-block-button__link{
  background-color:transparent;
  color:var(--c-ink);
  border-color:rgba(10,11,26,.22);
  box-shadow:none;
}
.wp-block-button.btn--ghost .wp-block-button__link:hover{
  background-color:var(--c-magenta)!important;
  border-color:var(--c-magenta)!important;
  color:#fff!important;
  transform:translateY(-2px);
}
/* Variante pequeña */
.wp-block-button.btn--sm .wp-block-button__link{
  padding:9px 18px;font-size:13px;
}

/* ── Equipo Banner (core/cover) ─────────────────────────────────────── */
.ag-equipo-banner-cover.wp-block-cover {
  background-position: right center;
  background-color: #fff;
}
/* White gradient overlay left→right (replicates original design) */
.ag-equipo-banner-cover.wp-block-cover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #fff 35%, rgba(255,255,255,0) 70%);
  z-index: 1;
  pointer-events: none;
}
/* Override core/cover default white text */
.ag-equipo-banner-cover.wp-block-cover,
.ag-equipo-banner-cover.wp-block-cover .wp-block-heading {
  color: #0A0B1A;
}
.ag-equipo-banner-cover .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1320px;
  padding-left: var(--pad-x, 24px);
  padding-right: var(--pad-x, 24px);
  margin-left: auto;
  margin-right: auto;
}
/* "tu equipo." gradient accent inside cover headings */
.ag-equipo-banner-cover .wp-block-heading .accent {
  background: var(--grad-brand, linear-gradient(120deg, #E5267B 0%, #B23A9E 45%, #22C8DD 100%));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.ag-equipo-banner__cite {
  display: block;
  margin-top: 22px !important;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #6B6E88;
  font-style: normal;
}
.ag-equipo-banner-cover .wp-block-columns.container {
  align-items: center;
}
.ag-equipo-banner-cover .ag-equipo-banner__logo-block {
  margin-bottom: 16px !important;
}
.ag-equipo-banner-cover .ag-equipo-banner__logo-block img {
  height: 150px;
  width: auto;
  display: block;
}
.ag-equipo-banner__line1 {
  font-family: 'Sora', sans-serif;
  font-size: clamp(20px, 2.5vw, 30px);
  font-weight: 400;
  color: #0A0B1A;
  margin: 0 0 8px !important;
  line-height: 1.35;
  letter-spacing: -0.02em;
}
.ag-equipo-banner__line2 {
  font-family: 'Sora', sans-serif;
  font-size: clamp(30px, 5vw, 66px);
  font-weight: 700;
  color: #0A0B1A;
  margin: 0 !important;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
@media (max-width: 768px) {
  .ag-equipo-banner-cover.wp-block-cover::before {
    background: rgba(255,255,255,.88);
  }
}

/* ── Footer FSE — ag-footer ─────────────────────────────────────────── */
.ag-footer {
  background: #fff;
  color: var(--c-ink);
  border-top: 1px solid rgba(10,11,26,.1);
  padding: 64px 0 0;
}

/* 4-column grid override (WP columns uses flex, we force grid) */
.ag-footer__grid.wp-block-columns {
  display: grid !important;
  grid-template-columns: 1.4fr .8fr .8fr .8fr;
  gap: 48px;
  padding-bottom: 56px;
  flex-wrap: unset !important;
}
.ag-footer__grid .wp-block-column {
  width: auto !important;
  flex-basis: auto !important;
  min-width: 0;
}

/* Brand column */
.ag-footer__logo img {
  height: 120px !important;
  width: auto !important;
  display: block;
}
.ag-footer__desc {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 22px;
  color: #4A4D63;
  margin-top: 22px !important;
  max-width: 340px;
}

/* Column title (h5 headings) */
.ag-footer__col-title {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: .16em;
  color: #0A0B1A !important;
  text-transform: uppercase;
  margin: 0 0 18px !important;
  font-weight: 500;
}

/* Navigation menu in footer — vertical list */
.ag-footer__nav .wp-block-navigation__container {
  display: flex !important;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.ag-footer__nav .wp-block-navigation-item__content {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #4A4D63;
  padding: 0 !important;
  display: block;
  opacity: .85;
  transition: color .2s ease, padding-left .2s ease, opacity .2s ease;
}
.ag-footer__nav .wp-block-navigation-item__content:hover {
  color: #E5267B;
  padding-left: 6px !important;
  opacity: 1;
}

/* Contact / Horario text lists */
.ag-footer__info-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ag-footer__info-list p {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #4A4D63;
  margin: 0 !important;
  line-height: 20px;
}
.ag-footer__info-list a {
  color: #4A4D63;
  text-decoration: none;
  transition: color .2s ease;
}
.ag-footer__info-list a:hover { color: #E5267B; }
.ag-footer__cta-link {
  color: #22C8DD !important;
  font-weight: 500;
}
.ag-footer__cta-link:hover { color: #E5267B !important; }

/* Bottom bar */
.ag-footer__bottom.wp-block-group {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  border-top: 1px solid rgba(10,11,26,.1);
  padding: 24px 0 30px;
}
.ag-footer__copyright {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .04em;
  color: #4A4D63;
  margin: 0 !important;
}
/* Legal nav in bottom bar */
.ag-footer__legal-nav .wp-block-navigation__container {
  display: flex !important;
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.ag-footer__legal-nav .wp-block-navigation-item__content {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .04em;
  color: #4A4D63;
  padding: 0 !important;
  transition: color .2s ease;
}
.ag-footer__legal-nav .wp-block-navigation-item__content:hover { color: #E5267B; }

/* Responsive */
@media (max-width: 900px) {
  .ag-footer__grid.wp-block-columns {
    grid-template-columns: 1fr 1fr !important;
    gap: 40px;
  }
}
@media (max-width: 768px) {
  /* Footer bottom: columna centrada + nav legal encima, copyright debajo */
  .ag-footer__bottom.wp-block-group {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 12px !important;
  }
  .ag-footer__legal-nav { order: 1 !important; }
  .ag-footer__copyright { order: 2 !important; }
}
@media (max-width: 600px) {
  .ag-footer__grid.wp-block-columns {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   BLOG ARCHIVE
   ============================================================ */

.ag-blog-archive { background: var(--c-paper); }
.ag-blog-inner { padding-top: 80px; padding-bottom: 100px; }

/* ── Category filter ── */
.ag-blog-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 96px !important;
}
.ag-blog-filter .chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: .08em;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(10,11,26,.10);
  background: #fff;
  color: var(--c-ink);
  text-decoration: none;
  transition: background .3s, color .3s, border-color .3s, transform .3s;
}
.ag-blog-filter .chip:hover {
  transform: translateY(-2px);
  border-color: rgba(10,11,26,.25);
}
.ag-blog-filter .chip.is-active {
  background: var(--c-ink);
  color: #fff;
  border-color: transparent;
}

/* ── Grid: CSS Grid nativo (elimina conflictos de flex-width) ── */
ul.wp-block-post-template.ag-posts-row {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.ag-posts-row > .wp-block-post {
  display: flex;
  min-width: 0;
}
/* !important necesario: la regla base usa "ul.wp-block-post-template.ag-posts-row"
   (más específica que ".ag-posts-row" a secas), así que sin !important estas
   media queries pierden siempre frente a la base */
@media (max-width: 991px) { .ag-posts-row { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 767px) { .ag-posts-row { grid-template-columns: 1fr !important; } }

/* ── Thumbnail: 16:10 on ALL grid cards ── */
.ag-posts-row > .wp-block-post .ag-post-thumb {
  aspect-ratio: 16 / 10;
}
.ag-posts-row > .wp-block-post .ag-post-thumb .wp-block-post-featured-image {
  aspect-ratio: unset;
  height: 100%;
  min-height: unset;
}

/* ── Featured post (first-child = full width, 2-col card) ──
   Only on main blog page, NOT on category archives (.ag-blog-archive--cat) ── */
.ag-blog-archive:not(.ag-blog-archive--cat):not(.ag-blog-archive--paged) .ag-posts-row > .wp-block-post:first-child {
  grid-column: 1 / -1;
  margin-bottom: 8px;
}
.ag-blog-archive:not(.ag-blog-archive--cat):not(.ag-blog-archive--paged) .ag-posts-row > .wp-block-post:first-child .ag-post-card {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  border-radius: 36px;
  flex-direction: unset;
}
.ag-blog-archive:not(.ag-blog-archive--cat):not(.ag-blog-archive--paged) .ag-posts-row > .wp-block-post:first-child .ag-post-thumb {
  min-height: 360px;
  aspect-ratio: unset;
}
.ag-blog-archive:not(.ag-blog-archive--cat):not(.ag-blog-archive--paged) .ag-posts-row > .wp-block-post:first-child .ag-post-thumb .wp-block-post-featured-image {
  aspect-ratio: unset;
  height: 100%;
  min-height: 360px;
}
.ag-blog-archive:not(.ag-blog-archive--cat):not(.ag-blog-archive--paged) .ag-posts-row > .wp-block-post:first-child .ag-post-thumb .wp-block-post-featured-image a {
  display: block;
  height: 100%;
}
.ag-blog-archive:not(.ag-blog-archive--cat):not(.ag-blog-archive--paged) .ag-posts-row > .wp-block-post:first-child .ag-post-thumb .wp-block-post-featured-image img {
  height: 100%;
  object-fit: cover;
}
.ag-blog-archive:not(.ag-blog-archive--cat):not(.ag-blog-archive--paged) .ag-posts-row > .wp-block-post:first-child .ag-post-body {
  padding: 48px;
  justify-content: center;
  gap: 18px;
}
.ag-blog-archive:not(.ag-blog-archive--cat):not(.ag-blog-archive--paged) .ag-posts-row > .wp-block-post:first-child .ag-post-card .wp-block-post-title {
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: 500;
  line-height: 1.1;
}
.ag-blog-archive:not(.ag-blog-archive--cat):not(.ag-blog-archive--paged) .ag-posts-row > .wp-block-post:first-child .ag-post-card .wp-block-post-excerpt p {
  font-size: 16px;
  line-height: 1.6;
}
.ag-blog-archive:not(.ag-blog-archive--cat):not(.ag-blog-archive--paged) .ag-posts-row > .wp-block-post:first-child .ag-date-badge {
  background: var(--c-ink);
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: none;
}
.ag-blog-archive:not(.ag-blog-archive--cat):not(.ag-blog-archive--paged) .ag-posts-row > .wp-block-post:first-child .ag-date-badge .ag-date-day time {
  color: #fff;
  font-size: 22px;
  font-weight: 600;
}
.ag-blog-archive:not(.ag-blog-archive--cat):not(.ag-blog-archive--paged) .ag-posts-row > .wp-block-post:first-child .ag-date-badge .ag-date-month time {
  color: rgba(255,255,255,.7);
}
@media (max-width: 860px) {
  .ag-blog-archive:not(.ag-blog-archive--cat):not(.ag-blog-archive--paged) .ag-posts-row > .wp-block-post:first-child .ag-post-card { grid-template-columns: 1fr; }
  .ag-blog-archive:not(.ag-blog-archive--cat):not(.ag-blog-archive--paged) .ag-posts-row > .wp-block-post:first-child .ag-post-thumb { min-height: 260px; }
  .ag-blog-archive:not(.ag-blog-archive--cat):not(.ag-blog-archive--paged) .ag-posts-row > .wp-block-post:first-child .ag-post-thumb .wp-block-post-featured-image { min-height: 260px; }
  .ag-blog-archive:not(.ag-blog-archive--cat):not(.ag-blog-archive--paged) .ag-posts-row > .wp-block-post:first-child .ag-post-body { padding: 32px; }
}
@media (max-width: 600px) {
  .ag-blog-archive:not(.ag-blog-archive--cat):not(.ag-blog-archive--paged) .ag-posts-row > .wp-block-post:first-child .ag-post-body { padding: 28px; }
}

/* ── Card ── */
.ag-post-card {
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(10, 11, 26, .08);
  display: flex;
  flex-direction: column;
  width: 100%;
  transition: transform .5s, box-shadow .5s, border-color .5s;
}
.ag-post-card:hover {
  box-shadow: 0 30px 60px -30px rgba(10, 11, 26, .2);
  transform: translateY(-6px);
  border-color: transparent;
}

/* ── Thumbnail ── */
.ag-post-thumb {
  position: relative;
  background:
    repeating-linear-gradient(135deg, rgba(10,11,26,.05) 0 2px, transparent 2px 12px),
    var(--c-paper-2);
  overflow: hidden;
  flex-shrink: 0;
}
.ag-post-thumb .wp-block-post-featured-image {
  margin: 0;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  min-height: 180px;
}
.ag-post-thumb .wp-block-post-featured-image a,
.ag-post-thumb .wp-block-post-featured-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Date badge (wp:group wrapping two post-date blocks) ── */
.ag-date-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  background: #fff;
  border-radius: 12px;
  padding: 8px 12px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(10,11,26,.14);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  line-height: 1;
}
.ag-date-badge .wp-block-post-date { margin: 0; }
.ag-date-badge .wp-block-post-date time { display: block; }
.ag-date-badge .ag-date-day time {
  font-size: 18px;
  font-weight: 600;
  color: var(--c-ink);
}
.ag-date-badge .ag-date-month time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #6B6E88;
}

/* ── Card body ── */
.ag-post-body {
  padding: 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 14px;
}

/* ── Category label ── */
.ag-post-cat {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-magenta);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ag-post-cat::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
  opacity: .7;
  flex-shrink: 0;
}
.ag-post-cat a { color: inherit; text-decoration: none; }
.ag-post-cat a:hover { text-decoration: underline; }

/* ── Post title ── */
.ag-post-card .wp-block-post-title {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--c-ink);
  margin: 0;
}
.ag-post-card .wp-block-post-title a { color: inherit; text-decoration: none; }
.ag-post-card .wp-block-post-title a:hover { color: var(--c-cyan); }

/* ── Excerpt ── */
.ag-post-card .wp-block-post-excerpt {
  font-size: 14.5px;
  line-height: 1.55;
  color: #4A4D63;
  margin: 0;
  flex: 1;
}
.ag-post-card .wp-block-post-excerpt p { margin: 0; }
.ag-post-card .wp-block-post-excerpt__more-link,
.ag-post-card .wp-block-post-excerpt__more-text { display: none; }

/* ── Read more ── */
.ag-readmore {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-ink);
  text-decoration: none;
  margin-top: 4px;
}

/* ── Pagination ── */
.ag-blog-pager {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 64px;
}
.ag-blog-pager .wp-block-query-pagination-previous,
.ag-blog-pager .wp-block-query-pagination-next {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  border: 1px solid rgba(10,11,26,.10);
  background: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: #4A4D63;
  text-decoration: none;
  transition: border-color .3s;
}
.ag-blog-pager .wp-block-query-pagination-previous:hover,
.ag-blog-pager .wp-block-query-pagination-next:hover { border-color: rgba(10,11,26,.25); }
.ag-blog-pager .wp-block-query-pagination-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.ag-blog-pager .page-numbers {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(10,11,26,.10);
  background: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 500;
  color: #4A4D63;
  text-decoration: none;
  transition: border-color .3s, background .3s, color .3s;
}
.ag-blog-pager .page-numbers:hover { border-color: rgba(10,11,26,.25); }
.ag-blog-pager .page-numbers.current {
  background: var(--c-ink);
  border-color: transparent;
  color: #fff;
}
.ag-blog-pager .page-numbers.dots {
  border: none;
  background: transparent;
  pointer-events: none;
}

/* ============================================================
   PÁGINAS LEGALES (template page-legal)
   ============================================================ */

.ag-legal-page { background: #fff; }

.ag-legal-inner {
  padding-top: 120px;
  padding-bottom: 100px;
  max-width: 780px;
}

.ag-legal-title {
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.05;
  color: var(--c-ink);
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(10,11,26,.10);
}

/* Prose styles inside legal pages */
.ag-legal-inner .entry-content h2,
.ag-legal-inner .wp-block-post-content h2 {
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 600;
  margin-top: 48px;
  margin-bottom: 16px;
  color: var(--c-ink);
}
.ag-legal-inner .entry-content h3,
.ag-legal-inner .wp-block-post-content h3 {
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 600;
  margin-top: 32px;
  margin-bottom: 12px;
  color: var(--c-ink);
}
.ag-legal-inner .entry-content p,
.ag-legal-inner .wp-block-post-content p {
  font-size: 15px;
  line-height: 1.7;
  color: #4A4D63;
  margin-bottom: 16px;
}
.ag-legal-inner .entry-content ul,
.ag-legal-inner .entry-content ol,
.ag-legal-inner .wp-block-post-content ul,
.ag-legal-inner .wp-block-post-content ol {
  padding-left: 20px;
  margin-bottom: 16px;
  color: #4A4D63;
  font-size: 15px;
  line-height: 1.7;
}
.ag-legal-inner .entry-content a,
.ag-legal-inner .wp-block-post-content a {
  color: var(--c-cyan);
  text-decoration: underline;
}
.ag-legal-inner .entry-content a:hover,
.ag-legal-inner .wp-block-post-content a:hover {
  color: var(--c-magenta);
}

/* ============================================================
   Single post — ag-single-post
   ============================================================ */
.ag-single-hero {
  background: var(--c-paper, #F6F5F1);
  padding: 140px 0 64px;
  border-bottom: 1px solid rgba(10,11,26,.08);
}
.ag-single-hero__inner { max-width: 720px; }
.ag-single-cat .wp-block-post-terms__separator { display: none; }
.ag-single-cat a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-magenta);
  text-decoration: none;
}
.ag-single-cat a:hover { color: var(--c-cyan); }
.ag-single-title {
  color: var(--c-ink);
  font-size: clamp(28px, 4.5vw, 52px);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.08;
  margin-top: 16px;
  margin-bottom: 0;
}
.ag-single-meta {
  color: var(--c-light, #6B6E88);
  font-size: 13px;
  margin-top: 24px;
}
.ag-single-featured-img {
  border-radius: 16px;
  overflow: hidden;
  margin-top: 40px;
  max-height: 480px;
}
.ag-single-featured-img img {
  width: 100%;
  height: 480px;
  object-fit: cover;
}
.ag-single-content-wrap { }
.ag-single-body {
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 0 48px;
}
.ag-single-body p {
  font-size: 17px;
  line-height: 1.78;
  color: var(--c-mid, #4A4D63);
  margin-bottom: 22px;
}
.ag-single-body h2 {
  font-family: 'Sora', sans-serif;
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 600;
  letter-spacing: -.025em;
  color: var(--c-ink);
  margin: 52px 0 16px;
}
.ag-single-body h3 {
  font-family: 'Sora', sans-serif;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 600;
  color: var(--c-ink);
  margin: 40px 0 12px;
}
.ag-single-body ul,
.ag-single-body ol {
  padding-left: 22px;
  margin-bottom: 22px;
}
.ag-single-body li {
  font-size: 17px;
  line-height: 1.7;
  color: var(--c-mid, #4A4D63);
  margin-bottom: 10px;
}
.ag-single-body strong { color: var(--c-ink); }
.ag-single-body a { color: var(--c-cyan); }
.ag-single-body a:hover { color: var(--c-magenta); }
.ag-single-body blockquote,
.ag-single-body .wp-block-quote {
  border-left: 3px solid var(--c-cyan);
  margin: 40px 0;
  padding: 22px 28px;
  background: rgba(34,200,221,.05);
  border-radius: 0 14px 14px 0;
}
.ag-single-body blockquote p,
.ag-single-body .wp-block-quote p {
  color: var(--c-ink);
  font-size: 18px;
  font-style: italic;
  margin: 0;
  line-height: 1.65;
}
.ag-single-back {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 0 80px;
  border-top: 1px solid rgba(10,11,26,.1);
}
.ag-single-back a {
  font-size: 14px;
  font-weight: 500;
  color: var(--c-ink);
  text-decoration: none;
  transition: color .2s;
}
.ag-single-back a:hover { color: var(--c-cyan); }


/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE — MÓVIL & TABLET
   Estas reglas se aplican SOLO en resoluciones ≤ 991 px (y subpuntos).
   No modifican nada de las pantallas de escritorio.
   ════════════════════════════════════════════════════════════════════ */

/* ━━━ 1. HEADER — layout 2 columnas (logo | hamburguesa) ━━━━━━━━━━ */
@media (max-width: 991px) {
  .ag-header {
    grid-template-columns: 1fr auto !important;
    padding: 10px 20px !important;
    gap: 12px !important;
  }
  .ag-header__logo img { height: 72px !important; }
  .ag-header.is-scrolled .ag-header__logo img { height: 52px !important; }

  /* Ocultar botón CTA del header */
  .ag-header__cta { display: none !important; }

  /* Ocultar lista de nav de escritorio */
  .ag-header__nav > .wp-block-navigation__container {
    display: none !important;
  }
}

/* ━━━ 2. BOTÓN HAMBURGUESA ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.ag-header__nav .wp-block-navigation__responsive-container-open {
  display: none;
}

@media (max-width: 991px) {
  .ag-header__nav .wp-block-navigation__responsive-container-open {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent !important;
    border: none;
    cursor: pointer;
    padding: 0;
    color: #0A0B1A;
    flex-shrink: 0;
  }
  .ag-header__nav .wp-block-navigation__responsive-container-open:focus { outline: none; }
  .ag-header__nav .wp-block-navigation__responsive-container-open svg {
    width: 24px;
    height: 24px;
    display: block;
  }
  /* WP hamburger usa paths con fill — NO usar fill:none */
  .ag-header__nav .wp-block-navigation__responsive-container-open path {
    fill: currentColor !important;
    stroke: none !important;
  }
}

/* ━━━ 3. DRAWER — slide desde la derecha (.is-menu-open añade WP) ━━ */

@keyframes ag-drawer-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

@media (max-width: 991px) {
  .ag-header__nav .wp-block-navigation__responsive-container.is-menu-open {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: min(320px, 88vw) !important;
    height: 100dvh !important;
    background: #fff !important;
    z-index: 100001 !important;
    overflow: hidden !important;
    /* display:block elimina el contexto flex del contenedor —
       evita que WP herede align-items:flex-end de items-justified-right */
    display: block !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border-left: 3px solid transparent !important;
    border-image: linear-gradient(180deg,#E5267B 0%,#B23A9E 55%,#22C8DD 100%) 1 !important;
    box-shadow:
      -9999px 0 0 9999px rgba(10,11,26,.48),
      -8px 0 40px rgba(10,11,26,.14) !important;
    animation: ag-drawer-in .34s cubic-bezier(.4,0,.2,1) both;
    /* Neutralizar variables de layout que WP hereda de items-justified-right */
    --navigation-layout-justify: flex-start;
    --navigation-layout-align: stretch;
    --navigation-layout-direction: column;
    --navigation-layout-wrap: nowrap;
    --navigation-layout-justification-setting: stretch;
  }
}

/* ━━━ 4. INTERIOR DEL DRAWER ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 991px) {

  /* position:absolute;inset:0 llena el drawer independientemente
     de su display — inmune al layout que WP imponga en el contenedor */
  .ag-header__nav .wp-block-navigation__responsive-close {
    position: absolute !important;
    inset: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* .responsive-dialog ocupa todo lo que quede bajo la barra */
  .ag-header__nav .wp-block-navigation__responsive-dialog {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /* Barra superior con botón × */
  .ag-header__nav .wp-block-navigation__responsive-container-close {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: 64px !important;
    min-height: 64px !important;
    padding: 0 16px 0 24px !important;
    flex-shrink: 0 !important;
    background: #fff !important;
    border: none !important;
    border-bottom: 1px solid rgba(10,11,26,.08) !important;
    cursor: pointer !important;
    border-radius: 0 !important;
    color: #0A0B1A !important;
    box-sizing: border-box !important;
  }
  /* Texto de marca a la izquierda del × */
  .ag-header__nav .wp-block-navigation__responsive-container-close::before {
    content: "Menú";
    font-family: "Sora", sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(10,11,26,.38);
  }
  .ag-header__nav .wp-block-navigation__responsive-container-close:focus { outline: none !important; }
  .ag-header__nav .wp-block-navigation__responsive-container-close svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    flex-shrink: 0 !important;
  }
  .ag-header__nav .wp-block-navigation__responsive-container-close path {
    fill: currentColor !important;
    stroke: none !important;
  }

  /* Área de scroll: flex-column + align-items:stretch evita que el
     --navigation-layout-justification-setting:flex-end de WP desplace los items */
  .ag-header__nav .wp-block-navigation__responsive-container-content {
    flex: 1 1 0% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    padding: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Lista de nav */
  .ag-header__nav .wp-block-navigation__responsive-container-content
    .wp-block-navigation__container {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    list-style: none !important;
    padding: 8px 0 64px !important;
    margin: 0 !important;
    gap: 0 !important;
    flex-shrink: 0 !important;
  }

  /* Reset <li> */
  .ag-header__nav .wp-block-navigation__responsive-container-content
    .wp-block-navigation-item {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: none !important;
  }

  /* Enlace de nivel 1 */
  .ag-header__nav .wp-block-navigation__responsive-container-content
    .wp-block-navigation__container > .wp-block-navigation-item
    > .wp-block-navigation-item__content {
    display: block !important;
    font-family: "Sora", sans-serif !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    letter-spacing: -.022em !important;
    line-height: 1.2 !important;
    color: #0A0B1A !important;
    text-decoration: none !important;
    padding: 18px 24px !important;
    border-bottom: 1px solid rgba(10,11,26,.07) !important;
    border-radius: 0 !important;
    background: transparent !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    min-width: 0 !important;
    transition: color .15s, background .15s !important;
  }
  .ag-header__nav .wp-block-navigation__responsive-container-content
    .wp-block-navigation__container > .wp-block-navigation-item
    > .wp-block-navigation-item__content:hover {
    color: #E5267B !important;
    background: rgba(229,38,123,.04) !important;
  }

  /* Página activa */
  .ag-header__nav .wp-block-navigation__responsive-container-content
    .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
  .ag-header__nav .wp-block-navigation__responsive-container-content
    .wp-block-navigation-item.current-page-ancestor > .wp-block-navigation-item__content {
    color: #E5267B !important;
  }

  /* Submenú — inline, visible, sin dropdown */
  .ag-header__nav .wp-block-navigation__submenu-container {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    background: rgba(10,11,26,.028) !important;
    padding: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0 !important;
    pointer-events: all !important;
  }

  /* Enlace de submenú */
  .ag-header__nav .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content {
    display: block !important;
    font-family: "Inter", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #5A5D72 !important;
    text-decoration: none !important;
    padding: 14px 24px 14px 40px !important;
    border-bottom: 1px solid rgba(10,11,26,.05) !important;
    border-radius: 0 !important;
    background: transparent !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    min-width: 0 !important;
    transition: color .15s, background .15s !important;
  }
  .ag-header__nav .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content:hover {
    color: #E5267B !important;
    background: rgba(229,38,123,.04) !important;
  }

  /* Quitar chevron y pseudo-elementos innecesarios */
  .ag-header__nav .wp-block-navigation__submenu-icon { display: none !important; }
  .ag-header__nav .has-child::after { display: none !important; }
  .ag-header__nav .nav-svc-sec .wp-block-navigation-item__content::before,
  .ag-header__nav .nav-svc-tel .wp-block-navigation-item__content::before,
  .ag-header__nav .nav-svc-dom .wp-block-navigation-item__content::before { display: none !important; }

  /* Selector de idioma (GTranslate) — espaciado dentro del drawer */
  .ag-header__nav .wp-block-navigation__responsive-container-content .gtranslate_wrapper {
    margin: 50px !important;
  }
}

/* ━━━ 5. PADDING DE SECCIONES EN MÓVIL ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 768px) {
  .ag-solution-stack    { padding: 60px 0 !important; }
  .ag-diferenciador     { padding: 60px 0 !important; }
  .ag-proceso           { padding: 60px 0 !important; }
  .ag-contacto-section  { padding: 60px 0 72px !important; }
  .ag-nosotros          { padding: 60px 0 !important; }

  /* Stack cards: desactivar sticky en móvil */
  .ag-stack-card  { position: static !important; top: auto !important; }
  .ag-stack-cards { gap: 20px !important; }
}

/* ━━━ 6. STICKY ELEMENTS — desactivar en pantallas pequeñas ━━━━━━━ */
@media (max-width: 900px) {
  /* Nosotros aside */
  .ag-nosotros-aside     { position: static !important; top: auto !important; }
  .ag-nosotros-aside-col { align-self: auto !important; }

  /* Servicios left panel */
  .svc-block .left { position: static !important; top: auto !important; }
}

/* ━━━ 7. MAPA — altura menor en móvil ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 768px) {
  .ag-map-card  { height: 260px !important; margin-top: 28px !important; }
  .ag-map-label { font-size: 10px; white-space: nowrap; overflow: hidden; max-width: 90%; }
}

/* ━━━ 8. FORMULARIO DE CONTACTO ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 576px) {
  .ag-contacto-form { padding: 28px 20px !important; }
}

/* ━━━ 9. PAGE HERO — ajustes en móvil ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 768px) {
  .ag-page-hero { padding: 100px 0 56px !important; }
  .ag-page-hero__kicker { font-size: 10px; }
  .ag-page-hero__title  { font-size: clamp(28px, 8vw, 40px) !important; }
}

/* ━━━ 10. FOOTER ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 600px) {
  .ag-footer { padding: 48px 0 0 !important; }
  .ag-footer__grid.wp-block-columns { padding-bottom: 32px !important; }
  .ag-footer__logo img { height: 80px !important; }
  .ag-footer__legal-nav .wp-block-navigation__container {
    flex-wrap: wrap !important;
    gap: 12px 20px !important;
  }
}

/* ━━━ 11. HERO HOME — ajustes texto en móvil pequeño ━━━━━━━━━━━━━━ */
@media (max-width: 480px) {
  .ag-hero { padding: 100px 0 48px !important; }
  .ag-nosotros-numbers { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ━━━ 12. BLOG FILTER — espaciado inferior + responsive ━━━━━━━━━━━ */
@media (max-width: 991px) {
  .ag-blog-filter { margin-bottom: 80px !important; gap: 8px; }
  .ag-blog-inner  { padding-top: 60px; padding-bottom: 72px; }
}
@media (max-width: 576px) {
  .ag-blog-filter { margin-bottom: 72px !important; }
  .ag-blog-filter .chip { font-size: 11px; padding: 8px 14px; }
}

/* ━━━ 13. BLOG CARDS — ajustes en móvil ━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 767px) {
  /* Grid: 1 columna ya definido arriba, aquí ajustamos la card */
  .ag-post-body { padding: 22px !important; gap: 10px !important; }
  .ag-post-card .wp-block-post-title { font-size: 18px !important; }
  .ag-post-card .wp-block-post-excerpt { font-size: 14px !important; }

  /* Featured card: colapsa a 1 columna */
  .ag-blog-archive:not(.ag-blog-archive--cat):not(.ag-blog-archive--paged)
    .ag-posts-row > .wp-block-post:first-child .ag-post-card {
    grid-template-columns: 1fr !important;
  }
  .ag-blog-archive:not(.ag-blog-archive--cat):not(.ag-blog-archive--paged)
    .ag-posts-row > .wp-block-post:first-child .ag-post-thumb {
    min-height: 220px !important;
  }
  .ag-blog-archive:not(.ag-blog-archive--cat):not(.ag-blog-archive--paged)
    .ag-posts-row > .wp-block-post:first-child .ag-post-body {
    padding: 28px !important;
  }
}

/* ━━━ 14. PAGINACIÓN DEL BLOG — espaciado superior ━━━━━━━━━━━━━━━ */
.ag-blog-pager { margin-top: 80px !important; }
@media (max-width: 576px) {
  .ag-blog-pager { margin-top: 56px !important; flex-wrap: wrap; gap: 6px; }
  .ag-blog-pager .page-numbers { width: 40px !important; height: 40px !important; }
}

/* ━━━ 15. BLOG GRID — especificidad alta para sobrescribir ul.selector ━ */
@media (max-width: 991px) {
  ul.wp-block-post-template.ag-posts-row { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 767px) {
  ul.wp-block-post-template.ag-posts-row { grid-template-columns: 1fr !important; }
}

/* ━━━ 16. CALL GRAPHIC — más pequeño en móvil ━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 900px) {
  .call-graphic { width: 200px !important; height: 200px !important; }
  .call-graphic .cg-center-card { width: 140px !important; padding: 16px 12px !important; }
}
@media (max-width: 576px) {
  .call-graphic { width: 160px !important; height: 160px !important; }
  .precta-bare { gap: 24px !important; }
}

/* ━━━ 17. PRECTA — responsive ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 900px) {
  /* Sin min-width:0 la celda grid crece con el contenido y desborda .wrap */
  .ag-precta .precta-copy {
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  /* Título: tamaño contenido en pantallas pequeñas */
  .ag-precta .precta-copy h1,
  .ag-precta .precta-copy h2,
  .ag-precta .precta-copy h3 {
    font-size: clamp(22px, 6vw, 36px) !important;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  /* Espacio encima de botones */
  .ag-precta .wp-block-buttons,
  .ag-precta .precta-copy .wp-block-buttons {
    margin-top: 40px !important;
  }
  /* Botones: el block CSS fuerza nowrap — revertir para que puedan ir a 2a línea */
  .ag-precta .wp-block-buttons {
    flex-wrap: wrap !important;
  }
}

/* ━━━ 18. ÁREAS RESUMEN — iconos a la izquierda + espaciado en responsive ━ */
@media (max-width: 980px) {
  /* Espaciado inferior entre cards apiladas */
  .svc3 { gap: 16px 0 !important; }
  .svc-card { margin-bottom: 8px !important; }

  /* Icono: alineado a la izquierda (asegurar que no centra) */
  .svc-card .svc-ico {
    margin-left: 0 !important;
    margin-right: auto !important;
  }
}

/* ━━━ 19. DIFERENCIADOR — texto 100% ancho en responsive ━━━━━━━━━━━ */
@media (max-width: 900px) {
  .ag-diferenciador__title {
    max-width: 100% !important;
    font-size: clamp(28px, 7vw, 48px) !important;
  }
  .ag-diferenciador__intro {
    max-width: 100% !important;
  }
}