/* ============================================================
   APOLO IAGENCY — tokens
   Paleta del design system: oro sobre tinta teal.
   ============================================================ */
:root{
  --ink:#0A0F12;
  --ink-2:#10161A;
  --ink-3:#171F23;
  --paper:#FAF8F5;
  --paper-2:#EDE8E0;
  --gold:#DBB057;
  --gold-d:#B8913F;
  --teal:#4E8A86;
  --mut:#7C878C;        /* muted sobre tinta */
  --mut-l:#6B665E;      /* muted sobre papel */
  --line:rgba(250,248,245,.14);
  --line-d:rgba(10,15,18,.20);
  --font:"Archivo","Helvetica Neue",Arial,sans-serif;
  --lockup:"Archivo Black","Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --pad:clamp(20px,4vw,72px);
  --ease:cubic-bezier(.83,0,.17,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--ink);color:var(--paper);
  font-family:var(--font);font-weight:400;font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
body.-lock{overflow:hidden}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}
::selection{background:var(--gold);color:var(--ink)}

/* ---------- primitivas ---------- */
.section{padding-left:var(--pad);padding-right:var(--pad)}
.lbl{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-family:var(--mono)}
.lbl::before{content:"■";color:var(--gold);margin-right:10px;font-size:9px;vertical-align:1px}
.lbl.-plain::before{content:none}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.g{color:var(--gold)}
.t{color:var(--teal)}
.line{display:block;overflow:hidden}
.line>span{display:block;will-change:transform}
.display{font-family:var(--lockup);font-weight:400;text-transform:uppercase;letter-spacing:-.03em;line-height:.95}

/* ---------- grano ---------- */
.noise{
  position:fixed;inset:-60%;z-index:70;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  animation:noise 6s steps(8) infinite;
}
@keyframes noise{
  0%{transform:translate(0,0)}10%{transform:translate(-3%,-4%)}20%{transform:translate(-6%,2%)}
  30%{transform:translate(4%,-3%)}40%{transform:translate(-2%,6%)}50%{transform:translate(-5%,3%)}
  60%{transform:translate(5%,0)}70%{transform:translate(0,4%)}80%{transform:translate(-4%,-2%)}
  90%{transform:translate(3%,5%)}100%{transform:translate(0,0)}
}

/* ---------- loader ---------- */
.loader{
  position:fixed;inset:0;z-index:200;background:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
}
.loader__lock{font-family:var(--lockup);font-size:clamp(34px,7vw,86px);letter-spacing:-.04em;text-transform:uppercase;line-height:1}
.loader__lock i{font-style:normal;color:var(--gold)}
.loader__pct{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--mut)}
.loader__bar{width:min(280px,60vw);height:1px;background:var(--line);overflow:hidden}
.loader__bar i{display:block;height:100%;width:0;background:var(--gold)}

/* ---------- header ---------- */
.head{
  position:fixed;top:0;left:0;right:0;z-index:120;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--pad);mix-blend-mode:difference;
}
.head__logo{font-family:var(--lockup);font-size:19px;letter-spacing:-.03em;text-transform:uppercase;line-height:1}
.head__logo i{font-style:normal;color:var(--gold);transition:color .4s var(--ease)}
.head__logo:hover i{color:var(--paper)}
.head__nav{display:flex;gap:clamp(16px,2.4vw,34px);align-items:center}
.head__nav a{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);white-space:nowrap;transition:color .3s}
.head__nav a:hover{color:var(--gold)}
.head__cta{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:999px;padding:9px 16px;transition:.4s var(--ease);
}
.head__cta:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
/* seis enlaces + idioma + CTA no entran por debajo de ~1080px: se ocultan
   antes de que empiecen a pisarse con el logo */
@media(max-width:1080px){.head__nav a{display:none}}

/* ---------- hero ---------- */
.hero{
  min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:4vh;position:relative;overflow:hidden;
}
.hero__glow{
  position:absolute;top:-30vh;right:-10vw;width:70vw;height:70vw;pointer-events:none;
  background:radial-gradient(circle,rgba(219,176,87,.13) 0%,rgba(78,138,134,.07) 42%,transparent 68%);
  filter:blur(10px);
}
.hero__meta{
  display:flex;justify-content:space-between;gap:20px;color:var(--mut);
  padding-top:110px;margin-bottom:auto;position:relative;
}
.hero__h1{
  position:relative;margin-top:5vh;font-family:var(--lockup);font-weight:400;
  text-transform:uppercase;letter-spacing:-.045em;line-height:.9;
  font-size:clamp(34px,10vw,166px);
}
.hero__h1 .ln2{padding-left:clamp(20px,9vw,200px)}
/* las líneas del hero son flex para que las fotos se acomoden entre las palabras */
.hero__h1 .line>span{display:inline-flex;align-items:center;gap:.14em;flex-wrap:wrap}
.chip{
  display:inline-block;flex:none;height:.7em;width:1.6em;border-radius:999px;
  overflow:hidden;position:relative;vertical-align:middle;background:var(--ink-2);
  transform-origin:left center;
}
.chip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(max-width:560px){
  .chip{width:1.32em;height:.58em}
  .hero__h1 .ln3{padding-left:8px}
}
.hero__h1 .ln3{padding-left:clamp(16px,3vw,70px)}
.hero__h1 em{font-style:normal;color:var(--gold)}
.hero__row{
  position:relative;display:flex;justify-content:space-between;align-items:flex-end;
  gap:24px;margin-top:4.5vh;
}
.hero__blurb{max-width:42ch;color:var(--mut);font-size:clamp(14px,1.1vw,17px)}
.hero__blurb b{color:var(--paper);font-weight:600}
.hero__scroll{
  display:flex;align-items:center;gap:12px;color:var(--mut);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;flex:none;
}
.hero__scroll .sq{width:8px;height:8px;border-radius:50%;background:var(--gold);animation:blink 1.6s steps(2) infinite}
@keyframes blink{50%{opacity:.15}}
@media(max-width:760px){
  .hero__row{flex-direction:column;align-items:flex-start}
  .hero__meta{font-size:11px;flex-direction:column;gap:6px}
}

/* ---------- manifiesto ---------- */
.mani{
  padding-top:clamp(70px,12vh,150px);padding-bottom:clamp(70px,12vh,150px);
  border-top:1px solid var(--line);
}
.mani p{
  margin-top:24px;font-family:var(--lockup);letter-spacing:-.028em;line-height:1.08;
  font-size:clamp(28px,4.4vw,72px);max-width:22ch;text-transform:uppercase;
}
.mani p .w{opacity:.14;display:inline-block;transition:opacity .3s}
.mani p .w.-g{color:var(--gold)}

/* ---------- casos: columnas en contra-scroll ---------- */
.work{position:relative}
.work__head{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;color:var(--mut);
  padding:clamp(70px,11vh,140px) var(--pad) clamp(24px,4vh,44px);
}
.wshow{position:relative;background:var(--ink)}
.wcol{overflow:hidden}
.wtrack{will-change:transform}
.wcell{height:auto;padding:0 0 12px}
.wpanel{
  position:relative;border:1px solid var(--line);overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(22px,3vw,40px);min-height:min(62svh,520px);
}
/* ---------- la foto de cada pilar ----------
   Las tres fotos están recortadas y graduadas con el mismo acabado
   cálido (img/pilar-*.webp). Encima va un velo en capas: oscurece arriba
   y donde cae la palabra grande, bastante más abajo, donde están las
   etiquetas, y funde el borde derecho con la columna de texto. */
.wpanel.-f-auto{--foto:url(img/pilar-automatizaciones.webp);--foco:60% 58%;--sube-m:30vw}
.wpanel.-f-cont{--foto:url(img/pilar-contenido.webp);--foco:6% 50%;--sube-m:2vw}
.wpanel.-f-mkt{--foto:url(img/pilar-marketing.webp);--foco:70% 50%;--sube-m:0vw}
.wpanel.-visual{
  background:
    radial-gradient(ellipse 90% 70% at 15% 8%,rgba(219,176,87,.22),transparent 70%),
    linear-gradient(180deg,rgba(10,15,18,.52) 0%,rgba(10,15,18,.10) 22%,rgba(10,15,18,.18) 48%,rgba(10,15,18,.30) 70%,rgba(10,15,18,.86) 100%),
    linear-gradient(90deg,transparent 62%,rgba(10,15,18,.45) 100%),
    var(--foto,none) var(--foco,50% 50%)/cover no-repeat,
    var(--ink-2);
}
/* con el velo más liviano, una sombra muy suave sostiene la palabra grande */
@media(min-width:900px){ body.-gsap .wcol.-l .wpanel__mark{text-shadow:0 2px 40px rgba(10,15,18,.35)} }
.wpanel__idx{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--gold)}
.wpanel__mark{
  font-family:var(--lockup);text-transform:uppercase;letter-spacing:-.04em;line-height:.92;
}
.wpanel__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.wpanel__tags i{
  font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:999px;padding:6px 12px;color:var(--mut);
}
.wpanel__copy{color:var(--mut);max-width:44ch;font-size:15px;margin-top:14px}
.wpanel__stats{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;margin-top:22px}
.wpanel__stats div{border-top:1px solid var(--line);padding-top:12px}
.wpanel__stats b{display:block;white-space:nowrap;font-family:var(--lockup);font-size:clamp(26px,3.2vw,44px);line-height:1;letter-spacing:-.03em}
.wpanel__stats small{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.wpanel__cta{
  display:inline-flex;align-items:center;gap:10px;margin-top:24px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
}
.wpanel__cta span{transition:transform .45s var(--ease)}
.wpanel:hover .wpanel__cta span{transform:translate(4px,-4px)}
.wshow__count{
  position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:5;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--mut);
  background:rgba(10,15,18,.8);border:1px solid var(--line);border-radius:999px;padding:8px 16px;
  backdrop-filter:blur(6px);display:none;
}
.wshow__count b{color:var(--gold);font-weight:500}
.work__all{display:flex;justify-content:center;padding:clamp(40px,7vh,80px) var(--pad)}

/* escritorio con GSAP: split pinneado en contra-scroll */
@media(min-width:900px){
  body.-gsap .wshow{height:100svh;overflow:hidden;display:block}
  body.-gsap .wcol{position:absolute;top:0;height:100%;width:calc(50% + 1px)}
  body.-gsap .wcol.-l{left:0}
  body.-gsap .wcol.-r{left:calc(50% - 1px)}
  body.-gsap .wcell{height:100svh;padding:0}
  body.-gsap .wpanel{height:100%;min-height:0;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
  body.-gsap .wcol.-r .wpanel{justify-content:center}
  body.-gsap .wcol.-r .wpanel__idx{position:absolute;top:clamp(22px,3vw,40px);left:clamp(22px,3vw,40px)}
  body.-gsap .wcol.-r .wpanel__copy{max-width:46ch}
  body.-gsap .wshow__count{display:block}
  body:not(.-gsap) .wshow{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 var(--pad)}
}
@media(max-width:899px){
  /* en móvil una sola columna: el panel de texto lleva el tratamiento visual */
  .wshow{display:block;padding:0 var(--pad)}
  .wcol.-l{display:none}
  .wcol.-r .wtrack{display:flex;flex-direction:column-reverse;gap:12px}
  .wcol.-r .wpanel{background:linear-gradient(150deg,rgba(219,176,87,.10),transparent 62%),var(--ink-2)}
  .wpanel{min-height:0;justify-content:flex-start;gap:18px}
}
.wpanel__tags.-mob{display:none}
@media(max-width:899px){.wpanel__tags.-mob{display:flex}}

.btnBig{
  display:inline-flex;align-items:center;gap:14px;position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:999px;padding:16px 30px;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  transition:.5s var(--ease);
}
.btnBig b{font-weight:500;position:relative;z-index:2;transition:color .45s var(--ease)}
.btnBig::before{
  content:"";position:absolute;inset:0;background:var(--gold);
  transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease);
}
.btnBig:hover::before{transform:scaleY(1)}
.btnBig:hover{border-color:var(--gold)}
.btnBig:hover b{color:var(--ink)}
.btnBig.-ink{border-color:var(--line-d);color:var(--ink)}
.btnBig.-ink::before{background:var(--ink)}
.btnBig.-ink:hover{border-color:var(--ink)}
.btnBig.-ink:hover b{color:var(--paper)}

/* ---------- transición de píxeles entre bloques de color ---------- */
.pxt{display:grid;width:100%;height:clamp(140px,24vh,260px);overflow:hidden}
.pxt i{opacity:0;will-change:opacity}
.pxt.-toPaper{background:var(--ink)}
.pxt.-toPaper i{background:var(--paper);box-shadow:0 0 0 1px var(--paper)}
.pxt.-toInk{background:var(--paper-2)}
.pxt.-toInk i{background:var(--ink);box-shadow:0 0 0 1px var(--ink)}
@media(max-width:760px){.pxt{height:clamp(90px,16vh,150px)}}

/* ---------- nosotros ---------- */
.about{
  background:var(--paper);color:var(--ink);
  padding-top:clamp(70px,11vh,140px);padding-bottom:clamp(80px,13vh,160px);
}
.about .lbl{color:var(--mut-l)}
.about .lbl::before{color:var(--gold-d)}
.about__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,5vw,90px);margin-top:26px;
}
.about__left h2{
  font-family:var(--lockup);text-transform:uppercase;letter-spacing:-.035em;line-height:.95;
  font-size:clamp(34px,5.2vw,84px);
}
.about__left h2 em{font-style:normal;color:var(--gold-d)}
.about__badge{
  margin-top:26px;display:inline-flex;align-items:center;gap:10px;
  border:1px solid var(--line-d);border-radius:999px;padding:9px 16px;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut-l);
}
.about__badge i{width:8px;height:8px;border-radius:50%;background:var(--teal);animation:blink 1.6s steps(2) infinite}
.about__right p{color:#3C3A35}
.about__right p b{color:var(--ink);font-weight:600}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:clamp(36px,6vh,64px)}
.stats div{border-top:2px solid var(--ink);padding-top:14px}
.stats b{display:block;font-family:var(--lockup);letter-spacing:-.035em;font-size:clamp(34px,4.6vw,70px);line-height:1}
.stats small{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut-l);display:block;margin-top:6px}
@media(max-width:820px){
  .about__grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
}

/* ---------- qué hacemos (acordeón) ---------- */
.services{
  background:var(--paper-2);color:var(--ink);
  padding-top:clamp(70px,11vh,140px);padding-bottom:clamp(70px,11vh,140px);
}
.services .lbl{color:var(--mut-l)}
.services .lbl::before{color:var(--gold-d)}
.services__intro{
  font-family:var(--lockup);text-transform:uppercase;letter-spacing:-.035em;line-height:.98;
  font-size:clamp(32px,5vw,80px);margin:22px 0 clamp(36px,6vh,64px);max-width:17ch;
}
.srv{border-top:2px solid var(--ink)}
.srv:last-of-type{border-bottom:2px solid var(--ink)}
.srv__head{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;
  gap:clamp(14px,3vw,40px);width:100%;padding:clamp(18px,2.8vh,30px) 0;text-align:left;
}
.srv__idx{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--gold-d)}
.srv__name{
  font-family:var(--lockup);text-transform:uppercase;letter-spacing:-.03em;line-height:1;
  font-size:clamp(22px,4.2vw,60px);transition:transform .45s var(--ease);
}
.srv:hover .srv__name{transform:translateX(clamp(8px,1.6vw,22px))}
.srv__count{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut-l)}
.srv__plus{width:34px;height:34px;position:relative;flex:none}
.srv__plus::before,.srv__plus::after{
  content:"";position:absolute;background:var(--ink);left:50%;top:50%;transition:transform .45s var(--ease);
}
.srv__plus::before{width:18px;height:2px;transform:translate(-50%,-50%)}
.srv__plus::after{width:2px;height:18px;transform:translate(-50%,-50%)}
.srv.-open .srv__plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.srv__body{height:0;overflow:hidden}
.srv__inner{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(20px,4vw,70px);padding:6px 0 clamp(24px,4vh,40px);
}
.srv__inner p{color:#3C3A35;max-width:54ch;font-size:clamp(14px,1.15vw,17px)}
.srv__chips{display:flex;flex-wrap:wrap;gap:8px;align-content:start}
.srv__chips span{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--line-d);border-radius:999px;padding:7px 13px;color:var(--mut-l);
}
@media(max-width:760px){.srv__inner{grid-template-columns:1fr}.srv__count{display:none}}

/* ---------- marquesina ---------- */
.mq{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(14px,2.4vh,24px) 0}
.mq+.mq{border-top:0}
.mq__in{display:flex;gap:clamp(28px,4vw,60px);white-space:nowrap;width:max-content;animation:mq 26s linear infinite;will-change:transform}
.mq.-rev .mq__in{animation-direction:reverse;animation-duration:32s}
.mq b{font-family:var(--lockup);text-transform:uppercase;letter-spacing:-.025em;line-height:1;font-size:clamp(24px,3.4vw,54px);font-weight:400}
.mq b.-ghost{color:#1B2226}
.mq b.-gold{color:var(--gold)}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- proceso ---------- */
.proc{padding-top:clamp(70px,11vh,140px);padding-bottom:clamp(70px,11vh,140px)}
.proc__head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding-bottom:22px;color:var(--mut)}
.prow{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.1fr) auto;
  gap:clamp(14px,2.5vw,32px);align-items:center;
  padding:clamp(18px,2.6vh,30px) clamp(4px,1vw,16px);border-top:1px solid var(--line);overflow:hidden;
}
.prow:last-of-type{border-bottom:1px solid var(--line)}
.prow::before{
  content:"";position:absolute;inset:0;background:var(--gold);
  transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease);
}
.prow:hover::before{transform:scaleY(1);transform-origin:top}
.prow>*{position:relative;z-index:2;transition:color .4s var(--ease)}
.prow__idx{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--gold)}
.prow__name{font-family:var(--lockup);text-transform:uppercase;letter-spacing:-.03em;line-height:1;font-size:clamp(20px,2.9vw,42px)}
.prow__for{color:var(--mut);font-size:14px;max-width:46ch}
.prow__dot{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--mut);text-transform:uppercase}
.prow:hover .prow__idx,.prow:hover .prow__name,.prow:hover .prow__for,.prow:hover .prow__dot{color:var(--ink)}
@media(max-width:820px){
  .prow{grid-template-columns:auto minmax(0,1fr) auto}
  .prow__for{display:none}
}

/* ---------- diagnóstico (formulario) ---------- */
.diag{
  padding-top:clamp(70px,11vh,140px);padding-bottom:clamp(70px,11vh,140px);
  border-top:1px solid var(--line);
}
.diag__head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;color:var(--mut)}
.diag__title{
  font-family:var(--lockup);text-transform:uppercase;letter-spacing:-.035em;line-height:.95;
  font-size:clamp(32px,5.2vw,84px);margin:22px 0 0;
}
.diag__title em{font-style:normal;color:var(--gold)}
.diag__intro{color:var(--mut);max-width:52ch;margin-top:20px;font-size:clamp(14px,1.1vw,17px)}
.diag__intro b{color:var(--paper);font-weight:600}

.diag__form{margin-top:clamp(36px,6vh,64px);max-width:940px}

/* ---------- preguntas frecuentes ---------- */
.faqs{padding-top:clamp(70px,11vh,140px);padding-bottom:clamp(60px,9vh,110px)}
.faqs__title{
  font-family:var(--lockup);text-transform:uppercase;letter-spacing:-.035em;line-height:.95;
  font-size:clamp(28px,4.6vw,72px);margin:22px 0 0;
}
.faqs__title em{font-style:normal;color:var(--gold)}
.faq{margin-top:clamp(28px,5vh,52px);border-top:1px solid var(--line)}
.faq__item{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px clamp(14px,3vw,38px);
  padding:clamp(20px,3vh,30px) 0;border-bottom:1px solid var(--line);
}
.faq__n{font-size:12px;color:var(--gold);padding-top:5px}
.faq__q{margin:0;font-size:clamp(17px,1.7vw,22px);font-weight:650;line-height:1.25;letter-spacing:-.01em;color:var(--paper)}
.faq__a{grid-column:2;margin:10px 0 0;max-width:66ch;color:var(--mut);font-size:clamp(14px,1.05vw,16.5px);line-height:1.62}
@media(max-width:620px){
  .faq__item{grid-template-columns:1fr}
  .faq__a{grid-column:1}
}

/* el bloque del especialista, alineado a la izquierda bajo el texto */
.auhero__ig.-start{justify-self:start;margin-top:clamp(18px,3vh,28px)}

/* ---------- texto legal (privacidad) ---------- */
.legal{margin-top:clamp(26px,4vh,42px);max-width:70ch;color:var(--mut);font-size:clamp(14px,1.05vw,16.5px);line-height:1.62}
.legal h2{font-family:var(--font);font-weight:600;color:var(--paper);letter-spacing:-.01em;
  font-size:clamp(17px,1.5vw,21px);margin:clamp(26px,4vh,38px) 0 10px}
.legal p{margin:0 0 12px}
.legal b{color:var(--paper);font-weight:600}
.legal a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(219,176,87,.35)}
.legal a:hover{border-bottom-color:var(--gold)}
.legal ul{margin:0 0 14px;padding-left:18px}
.legal li{margin-bottom:7px}
.legal li::marker{color:var(--gold-d)}
.legal__pie{margin-top:clamp(28px,4vh,42px);padding-top:18px;border-top:1px solid var(--line);color:var(--paper)}

/* progreso */
.prog{margin-bottom:clamp(30px,5vh,52px)}
.prog__meta{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:12px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);
}
.prog__meta b{color:var(--paper);font-weight:500}
.prog__meta .num{color:var(--gold)}
.prog__bar{height:2px;background:var(--line);overflow:hidden}
.prog__bar i{display:block;height:100%;width:20%;background:var(--gold);transition:width .6s var(--ease)}
.prog__steps{display:flex;gap:clamp(10px,2vw,26px);flex-wrap:wrap;margin-top:14px}
.prog__steps span{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#7C878C;
  transition:color .4s var(--ease);
}
.prog__steps span.-done{color:var(--mut)}
.prog__steps span.-on{color:var(--gold)}

/* pasos */
.fstep{display:none}
.fstep.-active{display:block}
.fstep__head{margin-bottom:clamp(24px,4vh,40px)}
.fstep__head h2{
  font-family:var(--lockup);text-transform:uppercase;letter-spacing:-.03em;line-height:1;
  font-size:clamp(24px,3.6vw,48px);
}
.fstep__head p{color:var(--mut);margin-top:10px;max-width:48ch;font-size:15px}

.fgroup{display:none}
.fgroup.-active{display:block}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,28px)}
@media(max-width:700px){.fgrid{grid-template-columns:1fr}}

.fld+.fld,.fgrid+.fld,.fld+.fgrid,.fgrid+.fgrid{margin-top:clamp(22px,3.4vh,34px)}
.fgrid .fld+.fld{margin-top:0}
.flbl{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mut);margin-bottom:12px;line-height:1.5;
}
.flbl i{font-style:normal;color:var(--gold)}
.finp{
  width:100%;background:var(--ink-2);border:1px solid var(--line);color:var(--paper);
  padding:14px 16px;font:inherit;font-size:15px;border-radius:2px;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.finp:focus{outline:none;border-color:var(--gold);background:var(--ink-3)}
.finp::placeholder{color:#596367}
textarea.finp{min-height:110px;resize:vertical;display:block}
.fld.-err .finp{border-color:#C4553D}
.ferr{
  display:none;margin-top:8px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:#D9836D;
}
.fld.-err .ferr{display:block}

/* opciones */
.opts{display:grid;gap:10px}
.opts.-stack{grid-template-columns:1fr}
.opts.-c2{grid-template-columns:repeat(2,1fr)}
.opts.-c3{grid-template-columns:repeat(3,1fr)}
.opts.-c4{grid-template-columns:repeat(4,1fr)}
.opts.-c5{grid-template-columns:repeat(5,1fr)}
@media(max-width:760px){
  .opts.-c3,.opts.-c4,.opts.-c5{grid-template-columns:1fr 1fr}
}
@media(max-width:460px){
  .opts.-c2,.opts.-c3,.opts.-c4,.opts.-c5{grid-template-columns:1fr}
}
.opt{
  display:flex;gap:12px;align-items:flex-start;text-align:left;width:100%;
  border:1px solid var(--line);background:var(--ink-2);color:var(--paper);
  padding:14px 16px;border-radius:2px;transition:.35s var(--ease);
}
.opt:hover{border-color:rgba(219,176,87,.45);background:var(--ink-3)}
.opt.-on{border-color:var(--gold);background:rgba(219,176,87,.10)}
.opt__mark{
  width:16px;height:16px;flex:none;margin-top:3px;position:relative;
  border:1px solid var(--mut);border-radius:50%;transition:.3s var(--ease);
}
.opts.-check .opt__mark{border-radius:2px}
.opt.-on .opt__mark{border-color:var(--gold);background:var(--gold)}
.opt.-on .opt__mark::after{
  content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:50%;
  background:var(--ink);transform:translate(-50%,-50%);
}
.opts.-check .opt.-on .opt__mark::after{
  width:8px;height:4px;border-radius:0;background:none;
  border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);
  transform:translate(-50%,-70%) rotate(-45deg);
}
.opt__txt{min-width:0}
.opt__txt b{display:block;font-weight:600;font-size:14.5px;line-height:1.35}
.opt__txt small{display:block;color:var(--mut);font-size:12.5px;margin-top:5px;line-height:1.45}
.opts.-tight .opt{justify-content:center;text-align:center;padding:14px 10px}
.opts.-tight .opt__mark{display:none}
.opts.-tight .opt__txt b{font-size:13.5px}
.fld.-err .opt{border-color:rgba(196,85,61,.45)}
.fld.-err .opt.-on{border-color:var(--gold)}

/* navegación */
.diag__nav{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:clamp(30px,5vh,52px);padding-top:26px;border-top:1px solid var(--line);
}
.diag__count{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--mut)}
.diag__count b{color:var(--gold);font-weight:500}
.btnBig[disabled]{opacity:.3;pointer-events:none}
.btnBig .spin{
  width:13px;height:13px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;
  display:inline-block;animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:520px){
  .diag__nav{justify-content:center}
  .diag__count{order:-1;width:100%;text-align:center}
}

/* estado final */
.diag__done{display:none;padding:clamp(40px,8vh,90px) 0;max-width:720px}
.diag__done.-on{display:block}
.diag__done h2{
  font-family:var(--lockup);text-transform:uppercase;letter-spacing:-.035em;line-height:.98;
  font-size:clamp(30px,4.6vw,68px);margin:20px 0 22px;
}
.diag__done h2 em{font-style:normal;color:var(--gold)}
.diag__done p{color:var(--mut);font-size:clamp(15px,1.15vw,17px);max-width:52ch}
.diag__done p+p{margin-top:14px}
.diag__done p b{color:var(--paper);font-weight:600}
.diag__done .box{
  margin-top:28px;border:1px solid var(--line);border-left:2px solid var(--gold);
  padding:22px 24px;background:var(--ink-2);
}
.diag__done .box small{
  display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);margin-bottom:10px;
}

/* aviso flotante */
.toast{
  position:fixed;left:50%;bottom:24px;z-index:150;max-width:min(92vw,420px);
  background:var(--ink-2);border:1px solid var(--line);border-left:2px solid var(--gold);
  padding:14px 20px;transform:translate(-50%,180%);transition:transform .5s var(--ease);
}
.toast.-on{transform:translate(-50%,0)}
.toast.-bad{border-left-color:#C4553D}
.toast b{display:block;font-size:14px;font-weight:600}
.toast small{display:block;color:var(--mut);font-size:12.5px;margin-top:5px;line-height:1.45}

/* ---------- pie / contacto ---------- */

.foot{position:relative;overflow:hidden;padding-top:clamp(70px,12vh,150px);padding-bottom:24px;border-top:1px solid var(--line)}
.foot__cta{display:block;text-align:center}
.foot__cta .lbl{color:var(--mut)}
.roll{
  display:block;overflow:hidden;margin-top:16px;font-family:var(--lockup);
  text-transform:uppercase;letter-spacing:-.045em;line-height:1;
  font-size:clamp(56px,15vw,240px);height:1em;
}
.roll__in{display:block;transition:transform .55s var(--ease)}
.foot__cta:hover .roll__in{transform:translateY(-1em)}
.roll__a,.roll__b{display:block;height:1em;line-height:1}
.roll__b{color:var(--gold)}
.foot__mail{
  display:block;text-align:center;margin-top:26px;font-size:clamp(15px,1.7vw,20px);
  font-weight:500;letter-spacing:.03em;color:var(--mut);position:relative;z-index:2;
}
.foot__mail b{color:var(--paper);font-weight:600;position:relative}
.foot__mail b::after{
  content:"";position:absolute;left:0;bottom:-4px;height:1px;width:100%;background:var(--gold);
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease);
}
.foot__mail:hover b::after{transform:scaleX(1);transform-origin:left}
.foot__mail:hover b{color:var(--gold)}
.foot__meta{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:clamp(56px,10vh,120px)}
.foot__meta .grp small{
  display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mut);margin-bottom:14px;
}
.foot__meta .grp a{display:block;padding:5px 0;font-size:14px;color:var(--paper);transition:color .3s}
.foot__meta .grp a:hover{color:var(--gold)}
.toTop{
  justify-self:end;align-self:end;width:56px;height:56px;border-radius:50%;
  border:1px solid var(--line);display:grid;place-items:center;transition:.45s var(--ease);
}
.toTop:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.foot__lock{
  margin-top:clamp(40px,7vh,80px);font-family:var(--lockup);text-align:center;
  font-size:clamp(52px,15.5vw,230px);line-height:.85;letter-spacing:-.05em;
  text-transform:uppercase;color:#131A1E;user-select:none;
}
.foot__lock i{font-style:normal;color:#1E2A28}
.foot__bar{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:22px;margin-top:22px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);
}
.foot__bar a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.foot__bar a:hover{color:var(--gold);border-bottom-color:var(--gold)}

@media(max-width:760px){
  .foot__meta{grid-template-columns:1fr 1fr}
  .toTop{grid-column:span 2;justify-self:start}
}

/* ---------- reveals ---------- */
/* título que no se ve pero sí leen Google y los lectores de pantalla.
   Lo usan las secciones que en pantalla arrancan con una etiqueta chica
   (Servicios, Proceso) y que sin esto no tendrían encabezado propio. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.rv{opacity:0;transform:translateY(26px)}
body.-nojs .rv{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .mq__in{animation:none}
  .rv{opacity:1!important;transform:none!important}
  .noise{animation:none}
}

/* ---------- CTA de diagnóstico (portada) ---------- */
.cta{
  padding-top:clamp(70px,11vh,140px);padding-bottom:clamp(70px,11vh,140px);
  border-top:1px solid var(--line);
}
.cta__head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;color:var(--mut)}
.cta__grid{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(28px,5vw,80px);align-items:start;margin-top:26px;
}
.cta__title{
  font-family:var(--lockup);text-transform:uppercase;letter-spacing:-.035em;line-height:.95;
  font-size:clamp(32px,5.2vw,84px);
}
.cta__title em{font-style:normal;color:var(--gold)}
.cta__copy{color:var(--mut);max-width:52ch;margin-top:20px;font-size:clamp(14px,1.1vw,17px)}
.cta__copy b{color:var(--paper);font-weight:600}
.cta__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,4vh,40px)}
.cta__list{list-style:none;display:grid;gap:2px;margin-top:8px}
.cta__list li{
  display:flex;gap:14px;align-items:baseline;border-top:1px solid var(--line);
  padding:15px 0;font-size:14.5px;
}
.cta__list li:last-child{border-bottom:1px solid var(--line)}
.cta__list .num{font-size:11px;letter-spacing:.14em;color:var(--gold)}
@media(max-width:860px){.cta__grid{grid-template-columns:1fr}}

/* ---------- selector de idioma ---------- */
.head__right{display:flex;align-items:center;gap:clamp(10px,1.6vw,18px)}
.lang{
  display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:11px;
  letter-spacing:.12em;border:1px solid var(--line);border-radius:999px;padding:9px 14px;
  transition:border-color .4s var(--ease);
}
.lang:hover{border-color:var(--gold)}
.lang span{transition:color .3s var(--ease)}
.lang .-off{color:var(--mut)}
.lang .-on{color:var(--paper)}
.lang .sep{color:var(--mut)}

.foot__agenda{display:flex;justify-content:center;margin-top:26px}

/* ---------- agenda ---------- */
.fsec+.fsec{
  margin-top:clamp(38px,6vh,68px);padding-top:clamp(30px,5vh,54px);
  border-top:1px solid var(--line);
}
/* el selector nativo de fecha tiene que ser oscuro como el resto */
.finp[type=date]{color-scheme:dark;font-family:var(--mono);font-size:14px;letter-spacing:.04em}
.finp[type=date]::-webkit-calendar-picker-indicator{filter:invert(1) sepia(1) saturate(4) hue-rotate(5deg);cursor:pointer;opacity:.8}
.finp[type=date]::-webkit-calendar-picker-indicator:hover{opacity:1}
.fnota a,
.ferr a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.fnota{
  margin-top:22px;color:var(--mut);font-size:12.5px;line-height:1.55;max-width:60ch;
}
.opts.-c3{grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.opts.-c3{grid-template-columns:1fr}}
#agendaResumen{white-space:pre-line;font-family:var(--mono);font-size:13px;letter-spacing:.03em;color:var(--paper)}

/* ---------- servicios: los nombres son largos, el titular baja de cuerpo ---------- */
.wpanel__mark{font-size:clamp(26px,3.2vw,50px);hyphens:auto}
.work__nota{
  padding:0 var(--pad) clamp(20px,3vh,32px);color:var(--mut);
  font-size:clamp(14px,1.05vw,16px);max-width:60ch;
}
.work__nota b{color:var(--paper);font-weight:600}

/* ---------- nosotros: retrato, chapa y texto revelado ---------- */
.about__fotoWrap{position:relative;margin-top:clamp(26px,5vh,48px);max-width:440px}
.about__foto{
  aspect-ratio:4/5;overflow:hidden;position:relative;background:var(--paper-2);
}
.about__foto img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.12);              /* margen para el paralaje */
  filter:grayscale(1) contrast(1.08);
  transition:filter .5s steps(4);
  will-change:transform;
}
.about__fotoWrap:hover img{filter:grayscale(0) contrast(1)}
.about__foto figcaption{
  position:absolute;left:14px;bottom:12px;z-index:2;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper);mix-blend-mode:difference;
}
.chapa{position:absolute;right:-30px;top:-30px;width:112px;height:112px;z-index:3;pointer-events:none}
.chapa svg{width:100%;height:100%;animation:girar 16s linear infinite}
.chapa circle.bg{fill:var(--gold)}
.chapa text{
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;fill:var(--ink);
}
@keyframes girar{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.chapa svg{animation:none}}
@media(max-width:560px){.chapa{width:88px;height:88px;right:-14px;top:-22px}}

/* el texto se enciende a medida que se lee */
.about__right p{
  font-size:clamp(16px,1.45vw,21px);
  line-height:1.5;
  max-width:46ch;
}
.about__right p+p{margin-top:1.1em}
.about__right p .w{display:inline-block;opacity:.18}
.about__right p b .w{opacity:.18}

/* ---------- nosotros: reparto de las dos columnas ----------
   La foto ocupa toda la columna izquierda, de arriba abajo; a la derecha van,
   sobre una misma línea vertical, el título, el texto y los datos. Así la foto
   arranca a la altura del título y termina a la altura de los datos, sin
   depender de cuánto mida el texto: la foto no tiene alto propio, se estira a
   lo que mida la columna derecha (con un mínimo) y se recorta con object-fit.
   Acotado a escritorio: suelto pisaría al @media de 820px de más arriba. */
@media(min-width:821px){
  .about__grid{
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    grid-template-rows:auto 1fr;
    column-gap:clamp(48px,6vw,110px);row-gap:0;align-items:stretch;
  }
  .about__fotoWrap{grid-column:1;grid-row:1 / 3;margin-top:0;max-width:none;min-height:560px}
  .about__foto{position:absolute;inset:0;aspect-ratio:auto}
  .about__foto img{object-position:42% 45%}
  .about__left{grid-column:2;grid-row:1}
  .about__right{grid-column:2;grid-row:2;display:flex;flex-direction:column;padding-top:clamp(28px,4vh,44px)}
  .about__right .stats{margin-top:auto;padding-top:clamp(36px,5vh,56px)}
}
/* los datos: una fila de tres, al pie de la columna */
.about__right .stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(16px,2vw,32px)}
.about__right .stats div{border-top:2px solid var(--ink);padding:16px 0 0}
.about__right .stats b{font-size:clamp(34px,3.6vw,56px)}
.about__right .stats small{margin-top:10px;max-width:22ch;line-height:1.5}
@media(max-width:820px){
  /* en una columna: título, foto, texto y datos */
  .about__grid{display:flex;flex-direction:column;gap:clamp(28px,5vh,44px)}
  .about__left{order:1}
  .about__fotoWrap{order:2;margin-top:0}
  .about__right{order:3}
  .about__right .stats{margin-top:clamp(34px,5vh,56px)}
}
@media(max-width:560px){
  .about__right .stats{grid-template-columns:1fr;gap:0}
  .about__right .stats div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:14px 0}
  .about__right .stats small{margin-top:0;text-align:right;max-width:18ch}
}

/* ---------- servicios: la palabra grande cruza todo el ancho ----------
   Cada mitad lleva la misma palabra a 100vw, corrida para que las dos
   coincidan cuando los paneles del mismo pilar quedan enfrentados. Al
   scrollear, las columnas se cruzan y la palabra se parte por el medio:
   ese desgarro es el efecto, no un error.
   Va en Archivo condensada (eje de ancho al 62%) en vez de Archivo Black:
   entra mucho más texto por línea al mismo cuerpo. */
@media(min-width:900px){
  body.-gsap .wpanel{position:relative;overflow:hidden}
  body.-gsap .wpanel__mark{
    position:absolute;top:34%;left:0;width:100vw;
    font-family:var(--font);font-weight:700;font-stretch:62%;
    letter-spacing:-.02em;line-height:.86;white-space:nowrap;
    padding-left:var(--pad);pointer-events:none;
  }
  body.-gsap .wcol.-r .wpanel__mark{left:calc(-100% + 1px)}
  body.-gsap .wcol.-r .wpanel>div{margin-top:auto}
  body.-gsap .wcol.-l .wpanel__tags{position:relative;z-index:2}
}

/* ==========================================================
   FLUJO — el recorrido del dato, de fondo en el manifiesto
   Entra el desorden por la izquierda, pasa por las plataformas
   que integramos, y sale convertido en tiempo. Se desplaza en X
   con el scroll; el texto del manifiesto va encima.
   ========================================================== */
.mani{position:relative;overflow:hidden}
.mani > .lbl,.mani > p{position:relative;z-index:2}
.flow{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.62;
  /* trama de puntos, quieta mientras el contenido se mueve */
  background-image:radial-gradient(rgba(250,248,245,.10) 1px,transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
/* velo para que el manifiesto siga siendo legible encima */
.mani::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  /* fuerte donde va el texto, casi transparente del lado libre */
  background:linear-gradient(90deg,rgba(10,15,18,.94) 0%,rgba(10,15,18,.88) 28%,rgba(10,15,18,.34) 56%,rgba(10,15,18,.04) 100%);
}
.flow__track{
  position:absolute;top:50%;left:0;transform:translateY(-50%);
  display:flex;align-items:center;gap:clamp(28px,4vw,64px);
  width:max-content;padding:0 6vw;will-change:transform;
}
.flow__stage{display:flex;flex-direction:column;gap:10px;position:relative}
.flow__stage.-motor{gap:14px}
.flow__tag{
  font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin-bottom:2px;
}
/* conector punteado entre etapas */
.flow__link{
  flex:none;width:clamp(46px,6vw,110px);height:1px;position:relative;
  background:repeating-linear-gradient(90deg,rgba(219,176,87,.55) 0 6px,transparent 6px 12px);
}
.flow__link::before,.flow__link::after{
  content:"";position:absolute;top:50%;width:5px;height:5px;border-radius:50%;
  background:var(--gold);transform:translateY(-50%);
}
.flow__link::before{left:-2px}
.flow__link::after{right:-2px}

/* la marca abre y cierra el recorrido */
.flow__stage.-marca{align-items:center;gap:14px}
.flow__lock{
  font-family:var(--lockup);font-size:clamp(26px,3vw,46px);letter-spacing:-.03em;
  text-transform:uppercase;line-height:1;color:var(--paper);
  border:1px solid var(--line);border-radius:26px;padding:26px 30px;
  background:rgba(23,31,35,.6);
}
.flow__lock i{font-style:normal;color:var(--gold)}
.flow__cierre{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
}

/* tarjetas */
.fcard{
  min-width:clamp(150px,15vw,230px);
  border:1px solid var(--line);border-radius:4px;padding:12px 14px;
  background:rgba(16,22,26,.72);
}
.fcard b{
  display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mut);font-weight:500;
}
.fcard i{display:block;height:5px;border-radius:3px;background:rgba(250,248,245,.09);margin-top:7px}
.fcard i:nth-child(3){width:62%}
.fcard.-on{border-color:rgba(219,176,87,.5)}
.fcard.-on b{color:var(--gold)}
.fcard.-on i{background:rgba(219,176,87,.22)}

/* plataformas que integramos */
.ftools{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.ftool{
  width:clamp(42px,4.4vw,58px);aspect-ratio:1;
  border:1px solid var(--line);border-radius:12px;
  background:rgba(16,22,26,.72);
  display:grid;place-items:center;position:relative;
}
.ftool::after{
  content:"";width:52%;height:52%;background:var(--paper);
  -webkit-mask:var(--ico) center/contain no-repeat;
          mask:var(--ico) center/contain no-repeat;
}
.ftool.-alt{border-color:rgba(219,176,87,.5)}
.ftool.-alt::after{background:var(--gold)}
.ftool[data-i="whatsapp"]{--ico:url(img/icons/whatsapp.svg)}
.ftool[data-i="instagram"]{--ico:url(img/icons/instagram.svg)}
.ftool[data-i="messenger"]{--ico:url(img/icons/messenger.svg)}
.ftool[data-i="facebook"]{--ico:url(img/icons/facebook.svg)}
.ftool[data-i="telegram"]{--ico:url(img/icons/telegram.svg)}
.ftool[data-i="googlecalendar"]{--ico:url(img/icons/googlecalendar.svg)}
.ftool[data-i="reportes"]{--ico:url(img/icons/reportes.svg)}

@media(max-width:860px){
  .flow{opacity:.4}
  .mani::before{background:linear-gradient(90deg,rgba(10,15,18,.94) 0%,rgba(10,15,18,.82) 60%,rgba(10,15,18,.55) 100%)}
}
@media(prefers-reduced-motion:reduce){.flow{opacity:.18}}

/* ---------- selector de país ---------- */
select.finp{
  color-scheme:dark;appearance:none;cursor:pointer;
  padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23DBB057' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:12px 8px;
}
select.finp:invalid,select.finp option[value=""]{color:#596367}
select.finp option{background:var(--ink-2);color:var(--paper)}

/* campo libre que aparece al elegir "Otra ciudad" */
.finp.-otra{margin-top:10px}
select.finp:disabled{opacity:.5;cursor:not-allowed;background-image:none}

/* ---------- teléfono con código de país ---------- */
.ftel{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:8px}
.ftel select.finp{padding-right:32px;background-position:right 11px center;max-width:112px;letter-spacing:.04em}
@media(max-width:520px){
  .ftel{grid-template-columns:1fr}
  .ftel select.finp{max-width:none}
}

/* ============================================================
   AUTOMATIZACIONES — página del pilar 01
   Todo con prefijo .au para que no toque nada del resto del sitio.
   ============================================================ */

/* el dorado que barre: sirve para cualquier <em> de esta página */
.auhero__title em,
.aublock__title em,
.autl__title em,
.aucta__title em{
  font-style:normal;
  background:linear-gradient(100deg,var(--gold-d) 0%,#F3D593 30%,var(--gold) 55%,var(--gold-d) 100%);
  background-size:240% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:aushine 8s linear infinite;
}
@keyframes aushine{from{background-position:0 0}to{background-position:240% 0}}
@media(prefers-reduced-motion:reduce){
  .auhero__title em,.aublock__title em,.autl__title em,.aucta__title em{
    animation:none;background:none;-webkit-text-fill-color:var(--gold);color:var(--gold)
  }
}

/* ---------- portada ---------- */
.auhero{
  position:relative;overflow:hidden;
  padding-top:clamp(120px,17vh,190px);padding-bottom:clamp(56px,9vh,110px);
}
.auhero::before{
  content:"";position:absolute;top:-34vh;right:-14vw;width:74vw;height:74vw;pointer-events:none;
  background:radial-gradient(circle,rgba(219,176,87,.15) 0%,rgba(78,138,134,.07) 44%,transparent 70%);
  filter:blur(10px);
}
.auhero>*{position:relative;z-index:2}
.auhero__meta{display:flex;justify-content:space-between;gap:20px;color:var(--mut)}
.auhero__title{
  margin-top:clamp(22px,4vh,44px);
  font-size:clamp(30px,8.4vw,142px);letter-spacing:-.035em;
}
.auhero__row{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:clamp(20px,4vw,60px);align-items:end;
  margin-top:clamp(28px,5vh,56px);
}
.auhero__lead{color:var(--mut);max-width:60ch;font-size:clamp(14px,1.15vw,18px);line-height:1.62}
.auhero__lead b{color:var(--gold);font-weight:600}
.auhero__ig{
  justify-self:end;display:inline-flex;flex-direction:column;gap:6px;align-items:flex-start;
  border:1px solid var(--line);border-radius:2px;padding:14px 18px;
  transition:border-color .4s var(--ease),background .4s var(--ease);
}
.auhero__ig i{font-style:normal;font-family:var(--mono);font-size:13px;letter-spacing:.02em}
.auhero__ig span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.auhero__ig:hover{border-color:var(--gold);background:rgba(219,176,87,.06)}

/* ---------- la frase ---------- */
.auquote{
  padding-top:clamp(64px,11vh,140px);padding-bottom:clamp(64px,11vh,140px);
  border-top:1px solid var(--line);
}
.auquote p{
  margin-top:24px;font-family:var(--lockup);text-transform:uppercase;
  letter-spacing:-.028em;line-height:1.1;
  font-size:clamp(24px,4vw,64px);max-width:24ch;
}
.auquote p b{font-weight:400;color:var(--gold)}

/* ---------- bloques de lista ---------- */
.aublock{padding-top:clamp(60px,10vh,120px);padding-bottom:clamp(60px,10vh,120px);border-top:1px solid var(--line)}
.aublock.-alt{background:var(--ink-2)}
.aublock__head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;color:var(--mut)}
.aublock__title{
  font-family:var(--lockup);text-transform:uppercase;letter-spacing:-.035em;line-height:.98;
  font-size:clamp(28px,4.6vw,72px);margin:20px 0 0;
}
.aublock__intro{color:var(--mut);max-width:56ch;margin-top:18px;font-size:clamp(14px,1.1vw,17px);line-height:1.62}
.aublock__intro b{color:var(--paper);font-weight:600}

.augrid{
  list-style:none;margin-top:clamp(30px,5vh,54px);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
}
.auitem{
  position:relative;overflow:hidden;background:var(--ink);
  padding:clamp(20px,2.6vw,30px);display:flex;gap:clamp(14px,1.8vw,22px);align-items:flex-start;
}
.aublock.-alt .auitem{background:var(--ink-2)}
.auitem::before{
  content:"";position:absolute;inset:0;background:var(--gold);
  transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease);
}
.auitem:hover::before{transform:scaleY(1);transform-origin:top}
.auitem>*{position:relative;z-index:2;transition:color .4s var(--ease)}
.auitem__n{font-size:11px;letter-spacing:.16em;color:var(--gold);padding-top:4px;flex:none}
.auitem p{font-size:clamp(14px,1.05vw,16px);line-height:1.55;color:var(--paper)}
.auitem p b{color:var(--gold);font-weight:600;transition:color .4s var(--ease)}
.auitem:hover .auitem__n,.auitem:hover p,.auitem:hover p b{color:var(--ink)}

/* ---------- datos ---------- */
.audatos{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(24px,4vw,64px);align-items:start;margin-top:clamp(30px,5vh,54px);
}
.audatos__list{list-style:none}
.audatos__list{--li-y:clamp(14px,2vh,20px)}
.audatos__list li{
  display:block;position:relative;
  padding:var(--li-y) 0 var(--li-y) 24px;border-top:1px solid var(--line);
  font-size:clamp(14px,1.05vw,16.5px);line-height:1.55;color:var(--mut);
}
.audatos__list li:last-child{border-bottom:1px solid var(--line)}
.audatos__list li i{
  position:absolute;left:0;top:calc(var(--li-y) + .5em);
  width:7px;height:7px;background:var(--gold);
  transform:rotate(45deg);transition:transform .4s var(--ease);
}
.audatos__list li:hover i{transform:rotate(45deg) scale(1.6)}
.audatos__list li b{color:var(--paper);font-weight:600}
.audatos__note{
  position:sticky;top:110px;border:1px solid var(--line);border-left:2px solid var(--gold);
  padding:clamp(20px,2.4vw,28px);background:rgba(10,15,18,.5);
}
.audatos__note .lbl{color:var(--gold)}
.audatos__note p{margin-top:12px;color:var(--mut);font-size:clamp(14px,1.05vw,16px);line-height:1.6}
.audatos__note p b{color:var(--paper);font-weight:600}

/* ---------- cronograma ---------- */
.autl{
  padding-top:clamp(64px,11vh,140px);padding-bottom:clamp(64px,11vh,140px);
  border-top:1px solid var(--line);position:relative;
}
.autl__head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;color:var(--mut)}
.autl__title{
  font-family:var(--lockup);text-transform:uppercase;letter-spacing:-.035em;line-height:.98;
  font-size:clamp(30px,5.4vw,86px);margin:20px 0 0;
}
.autl__body{
  display:grid;grid-template-columns:clamp(120px,13vw,190px) minmax(0,1fr);
  gap:clamp(24px,4vw,72px);margin-top:clamp(34px,6vh,66px);
}

/* columna fija: semana en curso + barra de avance */
.autl__side{position:sticky;top:120px;align-self:start;display:flex;flex-direction:column;gap:10px}
.autl__sideLbl,.autl__sideTot{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
.autl__sideNum{
  font-size:clamp(52px,7vw,104px);line-height:.86;color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.autl__rail{position:relative;width:100%;height:2px;background:var(--line);margin-top:6px;overflow:hidden}
.autl__fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--gold);box-shadow:0 0 14px rgba(219,176,87,.6)}

/* las semanas */
.autl__pasos{list-style:none}
.aupaso{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,2.6vw,38px);
  align-items:start;padding:clamp(24px,4vh,44px) 0;border-top:1px solid var(--line);
}
.aupaso:last-child{border-bottom:1px solid var(--line)}
.aupaso__n{
  font-size:clamp(34px,4.6vw,72px);line-height:.82;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1px rgba(250,248,245,.28);
  transition:color .5s var(--ease),-webkit-text-stroke-color .5s var(--ease);
}
.aupaso.-on .aupaso__n{color:var(--gold);-webkit-text-stroke-color:var(--gold)}
.aupaso__lbl{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);display:block}
.aupaso__box h3{
  font-family:var(--lockup);text-transform:uppercase;letter-spacing:-.028em;line-height:1;
  font-size:clamp(19px,2.5vw,38px);margin:10px 0 0;
}
.aupaso__box p{margin-top:12px;color:var(--mut);font-size:clamp(14px,1.05vw,16.5px);line-height:1.6;max-width:58ch}
.aupaso__box p b{color:var(--paper);font-weight:600}

/* ---------- cierre ---------- */
.aucta{
  padding-top:clamp(64px,11vh,140px);padding-bottom:clamp(70px,12vh,150px);
  border-top:1px solid var(--line);
}
.aucta__title{
  font-family:var(--lockup);text-transform:uppercase;letter-spacing:-.035em;line-height:.98;
  font-size:clamp(28px,4.8vw,76px);margin:20px 0 0;
}
.aucta__lead{color:var(--mut);max-width:52ch;margin-top:20px;font-size:clamp(14px,1.1vw,17px);line-height:1.62}
.aucta__btns{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,2.4vw,34px);margin-top:clamp(28px,4.5vh,48px)}
.aucta__alt{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);
  border-bottom:1px solid var(--line);padding-bottom:4px;transition:color .4s var(--ease),border-color .4s var(--ease);
}
.aucta__alt:hover{color:var(--gold);border-color:var(--gold)}

/* ---------- reportes ---------- */
.aurep{padding-top:clamp(60px,10vh,120px);padding-bottom:clamp(60px,10vh,120px);border-top:1px solid var(--line)}
.aurep__grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(30px,5vh,54px);
}
.aurep__card{background:var(--ink);padding:clamp(20px,2.4vw,30px);transition:background .4s var(--ease)}
.aurep__card:hover{background:var(--ink-3)}
.aurep__n{font-size:11px;letter-spacing:.16em;color:var(--gold)}
.aurep__card h3{
  font-family:var(--lockup);text-transform:uppercase;letter-spacing:-.025em;line-height:1.02;
  font-size:clamp(17px,1.7vw,24px);margin:14px 0 0;
}
.aurep__card p{margin-top:12px;color:var(--mut);font-size:14px;line-height:1.58}
.aurep__card p b{color:var(--paper);font-weight:600}

/* ---------- automatizaciones: pantallas chicas ---------- */
@media(max-width:1080px){
  .aurep__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:820px){
  .auhero__row{grid-template-columns:minmax(0,1fr);align-items:start}
  .auhero__ig{justify-self:start}
  .augrid{grid-template-columns:minmax(0,1fr)}
  .audatos{grid-template-columns:minmax(0,1fr)}
  .audatos__note{position:static}
  .autl__body{grid-template-columns:minmax(0,1fr);gap:18px}
  /* en móvil la columna fija se acuesta arriba de la lista */
  .autl__side{
    position:sticky;top:0;z-index:6;
    flex-direction:row;align-items:center;gap:12px;
    background:var(--ink);padding:62px 0 12px;border-bottom:1px solid var(--line);
  }
  .autl__sideNum{font-size:34px;line-height:1}
  .autl__rail{flex:1;margin-top:0}
  .aupaso{grid-template-columns:minmax(0,1fr);gap:8px}
  .aupaso__n{display:none}
}
@media(max-width:560px){
  .aurep__grid{grid-template-columns:minmax(0,1fr)}
  .auquote p{max-width:none}
  .aucta__btns{flex-direction:column;align-items:stretch}
  .aucta__alt{text-align:center}
}
@media(prefers-reduced-motion:reduce){
  .autl__fill{transition:none}
}

/* ---------- fase 2: acompañamiento ---------- */
.aufase{padding-top:clamp(60px,10vh,120px);padding-bottom:clamp(60px,10vh,120px);border-top:1px solid var(--line);background:var(--ink-2)}
.aufreq{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(30px,5vh,54px);
}
.aufreq__card{background:var(--ink-2);padding:clamp(22px,2.6vw,32px);transition:background .4s var(--ease)}
.aufreq__card:hover{background:var(--ink-3)}
.aufreq__area{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);display:block}
.aufreq__ritmo{
  display:block;margin-top:12px;color:var(--gold);
  font-size:clamp(19px,2vw,30px);letter-spacing:-.025em;line-height:1.02;
}
.aufreq__card p{margin-top:14px;color:var(--mut);font-size:14px;line-height:1.6}
.aufase__cierre{
  margin-top:clamp(26px,4vh,44px);border:1px solid var(--line);border-left:2px solid var(--gold);
  padding:clamp(22px,2.6vw,32px);max-width:78ch;
}
.aufase__cierre .lbl{color:var(--gold)}
.aufase__cierre p{margin-top:12px;color:var(--mut);font-size:clamp(14px,1.1vw,17px);line-height:1.62}
.aufase__cierre p b{color:var(--gold);font-weight:600}

/* la grilla de reportes pasó de 4 a 5 tarjetas: 3 arriba, y abajo una ancha + una */
.aurep__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.aurep__card:nth-child(4){grid-column:span 2}

@media(max-width:1080px){
  .aufreq{grid-template-columns:minmax(0,1fr)}
  .aurep__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* con 5 tarjetas en 2 columnas la ancha pasa a ser la última, si no queda un hueco */
  .aurep__card:nth-child(4){grid-column:auto}
  .aurep__card:nth-child(5){grid-column:span 2}
}
@media(max-width:560px){
  .aurep__grid{grid-template-columns:minmax(0,1fr)}
  .aurep__card:nth-child(5){grid-column:auto}
}

/* ============================================================
   Cronograma y fase 2 sobre papel
   Las dos secciones viven dentro de la franja clara, entre las
   dos transiciones de píxeles, igual que Nosotros en la portada.
   El oro pasa a --gold-d: el claro no tiene contraste sobre papel.
   ============================================================ */

/* la franja de entrada arranca del tono de la sección de datos, no del ink puro */
.aublock.-alt + .pxt.-toPaper{background:var(--ink-2)}

.autl{background:var(--paper);color:var(--ink);border-top:0}
.aufase{background:var(--paper-2);color:var(--ink);border-top:0}
/* después de la franja de píxeles no hace falta otra línea */
.aurep{border-top:0}

.autl .lbl::before,.aufase .lbl::before{color:var(--gold-d)}
.autl__head,.aufase .aublock__head{color:var(--mut-l)}

/* el degradé de los titulares, en su versión oscura */
.autl__title em,
.aufase .aublock__title em{
  background-image:linear-gradient(100deg,var(--gold-d) 0%,#E8C273 30%,var(--gold-d) 62%,#9C7A33 100%);
  background-size:240% 100%;
  -webkit-background-clip:text;background-clip:text;
}
@media(prefers-reduced-motion:reduce){
  .autl__title em,.aufase .aublock__title em{-webkit-text-fill-color:var(--gold-d);color:var(--gold-d)}
}

/* columna fija del cronograma */
.autl__sideLbl,.autl__sideTot{color:var(--mut-l)}
.autl__sideNum{color:var(--gold-d)}
.autl__rail{background:var(--line-d)}
.autl__fill{background:var(--gold-d);box-shadow:0 0 14px rgba(184,145,63,.45)}

/* las semanas */
.aupaso{border-top:1px solid var(--line-d)}
.aupaso:last-child{border-bottom:1px solid var(--line-d)}
.aupaso__n{-webkit-text-stroke-color:rgba(10,15,18,.24)}
.aupaso.-on .aupaso__n{color:var(--gold-d);-webkit-text-stroke-color:var(--gold-d)}
.aupaso__lbl{color:var(--gold-d)}
.aupaso__box p{color:var(--mut-l)}
.aupaso__box p b{color:var(--ink)}

/* fase 2 */
.aufase .aublock__intro{color:var(--mut-l)}
.aufase .aublock__intro b{color:var(--ink)}
.aufreq{background:var(--line-d);border-color:var(--line-d)}
.aufreq__card{background:var(--paper-2)}
.aufreq__card:hover{background:var(--paper)}
.aufreq__area{color:var(--mut-l)}
.aufreq__ritmo{color:var(--gold-d)}
.aufreq__card p{color:var(--mut-l)}
.aufase__cierre{border-color:var(--line-d);border-left-color:var(--gold-d);background:rgba(250,248,245,.55)}
.aufase__cierre .lbl{color:var(--gold-d)}
.aufase__cierre p{color:var(--mut-l)}
.aufase__cierre p b{color:var(--gold-d)}

@media(max-width:820px){
  /* la barra fija del cronograma en móvil también es de papel */
  .autl__side{background:var(--paper);border-bottom-color:var(--line-d)}
}

/* ---------- ajustes compartidos por las dos páginas de pilar ---------- */
/* La franja de píxeles ya separa: la sección que le sigue no lleva línea. */
.pxt + section{border-top-width:0}

/* auto-fit: la fase 2 de automatizaciones trae tres tarjetas y la de
   contenido dos; con auto-fit las dos grillas llenan el ancho igual. */
.aufreq{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}

/* ============================================================
   Marketing — piezas propias del pilar 03
   ============================================================ */

/* resumen del hero: reemplaza a la ficha de Instagram de los otros pilares */
.auhero__resumen{
  justify-self:end;border:1px solid var(--line);border-left:2px solid var(--gold);
  padding:18px 22px;max-width:36ch;
}
.auhero__resumen .lbl{color:var(--gold)}
.auhero__resumen ul{list-style:none;margin-top:12px}
.auhero__resumen li{
  font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--mut);
  padding:5px 0 5px 16px;position:relative;
}
.auhero__resumen li::before{
  content:"";position:absolute;left:0;top:.95em;width:6px;height:1px;background:var(--gold);
}
.auhero__resumen li b{color:var(--paper);font-weight:500}

/* sub-lista dentro de un paso del cronograma */
.aupaso__lista{list-style:none;margin-top:18px;display:grid;gap:10px}
.aupaso__lista li{
  position:relative;padding-left:20px;
  font-size:clamp(13.5px,1vw,15.5px);line-height:1.55;color:var(--mut);
}
.aupaso__lista li::before{
  content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
  background:var(--gold);transform:rotate(45deg);
}
.aupaso__lista li b{color:var(--paper);font-weight:600}

/* la tríada de campañas de la semana 3 */
.aukfc{
  list-style:none;margin-top:20px;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
}
.aukfc li{background:var(--ink);padding:18px}
.aukfc__pct{
  display:block;font-family:var(--lockup);font-weight:400;letter-spacing:-.02em;
  font-size:clamp(22px,2.4vw,34px);line-height:1;color:var(--gold);
}
.aukfc__tipo{
  display:block;margin-top:8px;font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--paper);
}
.aukfc p{margin-top:10px;font-size:13px;line-height:1.5;color:var(--mut)}

/* dentro de la franja de papel todo se invierte */
.autl .aupaso__lista li{color:var(--mut-l)}
.autl .aupaso__lista li b{color:var(--ink)}
.autl .aupaso__lista li::before{background:var(--gold-d)}
.autl .aukfc{background:var(--line-d);border-color:var(--line-d)}
.autl .aukfc li{background:var(--paper)}
.autl .aukfc__pct{color:var(--gold-d)}
.autl .aukfc__tipo{color:var(--ink)}
.autl .aukfc p{color:var(--mut-l)}

@media(max-width:820px){
  .auhero__resumen{justify-self:start;max-width:none}
  .aukfc{grid-template-columns:minmax(0,1fr)}
}

/* ---------- servicios en el celular: la foto va en la tarjeta de texto ----------
   La columna de imagen no existe por debajo de 900 px, así que cada tarjeta
   lleva su foto arriba, en una franja. La foto va anclada arriba y subida
   --sube-m para que en la franja quede lo importante (la tablet, el celular,
   las caras). El velo está medido en vw, como la foto, así se cierra del todo
   antes de que la foto termine y no se ve el borde. */
@media(max-width:899px){
  .wcol.-r .wpanel.-f-auto,.wcol.-r .wpanel.-f-cont,.wcol.-r .wpanel.-f-mkt{
    padding-top:max(170px,44vw);
    background:
      linear-gradient(180deg,rgba(10,15,18,.05) 0,rgba(10,15,18,.30) 24vw,rgba(16,22,26,.90) 42vw,var(--ink-2) 54vw),
      radial-gradient(ellipse 90% 40% at 20% 0,rgba(219,176,87,.20),transparent 70%),
      var(--foto) no-repeat,
      var(--ink-2);
    background-size:auto,auto,100% auto,auto;
    background-position:0 0,0 0,50% calc(0px - var(--sube-m,0vw)),0 0;
  }
}

/* ---------- servicios: el botón al plan, sobre la foto ----------
   Antes era un enlace chico al pie de la columna de texto y quedaba tapado
   por el contador "01 / 03". Ahora va sobre la foto, justo debajo de la
   palabra grande —su altura real la calcula app.js en --alto-palabra—, en
   dorado y con un pulso suave, para que sea lo primero que se vea después
   del título. Solo existe en escritorio con GSAP, que es donde está la foto. */
.wpanel__plan{display:none}
@media(min-width:900px){
  body.-gsap .wpanel__plan{
    position:absolute;z-index:3;left:var(--pad);
    top:calc(34% + var(--alto-palabra,26vh) + clamp(22px,4vh,44px));
    display:inline-flex;align-items:center;gap:16px;
    padding:10px 10px 10px 26px;border-radius:999px;
    background:var(--gold);color:var(--ink);
    font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
    box-shadow:0 14px 44px rgba(10,15,18,.55),0 0 0 1px rgba(250,248,245,.18) inset;
    transition:transform .45s var(--ease),background .45s var(--ease);
  }
  body.-gsap .wpanel__plan i{
    font-style:normal;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
    background:var(--ink);color:var(--gold);font-size:16px;transition:transform .45s var(--ease);
  }
  body.-gsap .wpanel__plan::after{
    content:"";position:absolute;inset:-1px;border-radius:inherit;border:1px solid var(--gold);
    opacity:0;pointer-events:none;animation:planPulso 3.2s var(--ease) 1.2s infinite;
  }
  body.-gsap .wpanel__plan:hover{background:var(--paper);transform:translateY(-2px)}
  body.-gsap .wpanel__plan:hover i{transform:translateX(3px)}
  /* el enlace de la columna de texto sobra: el botón lo reemplaza */
  body.-gsap .wcol.-r .wpanel__cta{display:none}
}
@keyframes planPulso{0%{opacity:.9;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.1,1.45)}}
@media(prefers-reduced-motion:reduce){body.-gsap .wpanel__plan::after{animation:none}}

/* en el celular no hay foto al costado: el enlace de la tarjeta toma el
   mismo peso, como botón dorado */
@media(max-width:899px){
  .wcol.-r .wpanel__cta{
    align-self:flex-start;margin-top:26px;padding:10px 10px 10px 22px;gap:14px;border-radius:999px;
    background:var(--gold);color:var(--ink);font-weight:600;
  }
  .wcol.-r .wpanel__cta span{
    display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
    background:var(--ink);color:var(--gold);
  }
}