/* ============================================================
   MAGNES FACTORY — nueva web. Sistema de diseño SUIZO / GROTESCO.
   Blanco roto + negro + un único rojo. General Sans (display/UI) +
   Switzer (cuerpo). Rejilla estricta, mucho aire, foto grande limpia.
   Referencia: Instrument, Work & Co, Pentagram. Sin adornos AI.
   ============================================================ */
:root{
  --paper:#f6f5f2; --paper-2:#eceae3; --card:#ffffff; --wash:#f0efe9;
  --ink:#111110; --ink-2:#2b2a27;
  --red:#ff2d2d; --red-ink:#e01f1f; --wa:#25d366; --wa-d:#1da851;
  --muted:#6b6a63; --muted-2:#9d9a90;
  --line:rgba(17,17,16,.16); --line-2:rgba(17,17,16,.09);
  --line-inv:rgba(246,245,242,.18);
  --sans:'General Sans','Helvetica Neue','Segoe UI',Arial,sans-serif;
  --text:'Switzer','Helvetica Neue','Segoe UI',Arial,sans-serif;
  --wrap:1320px; --gut:clamp(20px,5vw,72px);
  --r:5px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--text);font-size:17.5px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img,svg,video{display:block;max-width:100%}
ul{list-style:none}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.hide{display:none!important}

/* ---------- tipografía ---------- */
.display{font-family:var(--sans);font-weight:600;line-height:.98;letter-spacing:-.03em;
  font-size:clamp(2.7rem,7.4vw,6rem)}
.h-xl{font-family:var(--sans);font-weight:600;line-height:1.0;letter-spacing:-.025em;
  font-size:clamp(2.1rem,5.4vw,4.3rem)}
.h-lg{font-family:var(--sans);font-weight:600;line-height:1.04;letter-spacing:-.02em;
  font-size:clamp(1.7rem,3.6vw,2.9rem)}
.h-md{font-family:var(--sans);font-weight:600;line-height:1.1;letter-spacing:-.015em;font-size:clamp(1.3rem,2.4vw,1.85rem)}
.acc{color:var(--red)}
.lead{font-family:var(--text);font-size:clamp(1.12rem,1.8vw,1.4rem);line-height:1.46;color:var(--ink-2);font-weight:400;max-width:40ch}
.lead-wide{max-width:62ch}
.small{font-size:.9rem;color:var(--muted)}
strong{font-weight:600}

/* etiqueta (sustituye a los kickers 01· con mono — más limpio) */
.label{display:inline-flex;align-items:center;gap:.7em;font-family:var(--sans);font-weight:500;
  text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:var(--muted)}
.label::before{content:"";width:22px;height:2px;background:var(--red);display:inline-block}
.label--plain::before{display:none}
.sec--ink .label{color:var(--muted-2)}

/* número índice grande (elemento de diseño, no kicker) */
.index{font-family:var(--sans);font-weight:600;font-size:.8rem;color:var(--red);letter-spacing:.02em}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;gap:.65em;font-family:var(--sans);font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;font-size:.76rem;padding:1.02em 1.7em;border-radius:var(--r);
  border:1.5px solid var(--ink);transition:.3s var(--ease);white-space:nowrap;cursor:pointer;background:none;color:var(--ink)}
.btn .arw{transition:transform .3s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
.btn--fill{background:var(--ink);color:var(--paper)}
.btn--fill:hover{background:var(--red);border-color:var(--red);color:#fff}
.btn--red{background:var(--red);border-color:var(--red);color:#fff}
.btn--red:hover{background:var(--ink);border-color:var(--ink)}
.btn--line:hover{background:var(--ink);color:var(--paper)}
.btn--inv{border-color:rgba(246,245,242,.4);color:var(--paper)}
.btn--inv:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn--wa{background:var(--wa);border-color:var(--wa);color:#fff}
.btn--wa:hover{background:var(--wa-d);border-color:var(--wa-d);color:#fff}
.btn svg{width:1.18em;height:1.18em;flex:none}
.alink{display:inline-flex;align-items:center;gap:.5em;font-family:var(--sans);font-weight:600;
  text-transform:uppercase;letter-spacing:.07em;font-size:.74rem;padding-bottom:3px;
  border-bottom:1.5px solid var(--ink);transition:.25s}
.alink:hover{color:var(--red);border-color:var(--red)}
.alink:hover .arw{transform:translateX(3px)}
.arw{display:inline-block;transition:transform .3s var(--ease)}

/* ---------- media / fotos ---------- */
.media{position:relative;overflow:hidden;border-radius:20px;background:var(--paper-2);display:block}
.media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
a.media:hover img,.mediahover:hover .media img{transform:scale(1.045)}
.media--ultra{aspect-ratio:21/9}
.media--wide{aspect-ratio:16/9}
.media--3x2{aspect-ratio:3/2}
.media--4x3{aspect-ratio:4/3}
.media--4x5{aspect-ratio:4/5}
.media--sq{aspect-ratio:1/1}
.media--fill{height:100%;min-height:clamp(360px,52vh,560px)}
@media(max-width:900px){.media{border-radius:16px}.media--fill{min-height:340px}}
figure{margin:0}
figcaption{font-family:var(--sans);font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-top:12px}

/* ---------- header ---------- */
.mast{position:fixed;top:0;left:0;right:0;z-index:60;transition:.4s var(--ease)}
.mast__in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px var(--gut);transition:.35s var(--ease)}
.mast.stuck{background:rgba(246,245,242,.86);backdrop-filter:blur(16px);border-bottom:1px solid var(--line-2)}
.mast.stuck .mast__in{padding-top:13px;padding-bottom:13px}
.brand{display:flex;align-items:center;gap:11px}
.brand__logo{height:46px;width:auto;display:block;transition:height .35s var(--ease)}
.mast.stuck .brand__logo{height:39px}
@media(max-width:560px){.brand__logo{height:40px}}
.brand .mk{width:13px;height:13px;background:var(--red);border-radius:2px;flex:none}
.foot__logo{height:38px;width:auto;display:block}
.nav{display:flex;align-items:center;gap:30px}
.nav>a,.nav__has>a{font-family:var(--sans);font-size:.9rem;font-weight:500;color:var(--ink);position:relative;padding:6px 0}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--red);transition:right .3s var(--ease)}
.nav>a:hover::after,.nav__has>a:hover::after,.nav a[aria-current]::after{right:0}
.nav__has{position:relative}
.drop{position:absolute;top:calc(100% + 16px);left:-18px;min-width:290px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);padding:8px;box-shadow:0 30px 70px -34px rgba(17,17,16,.4);
  opacity:0;visibility:hidden;transform:translateY(8px);transition:.28s var(--ease)}
.nav__has:hover .drop{opacity:1;visibility:visible;transform:none}
.drop a{display:flex;align-items:center;gap:13px;padding:11px 13px;border-radius:4px;font-family:var(--sans);font-size:.92rem;font-weight:500;transition:.2s}
.drop a::after{display:none}
.drop a:hover{background:var(--wash)}
.drop a .di{font-family:var(--sans);font-size:.72rem;color:var(--red);width:20px;font-weight:600}
.mast__right{display:flex;align-items:center;gap:20px}
.lang{display:flex;gap:1px;font-family:var(--sans);text-transform:uppercase;font-size:.72rem;letter-spacing:.06em;font-weight:600}
.lang a{padding:4px 6px;color:var(--muted-2);border-radius:3px}
.lang a.on{color:var(--ink)}
.burger{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:var(--r);background:none;position:relative;cursor:pointer}
.burger span{position:absolute;left:11px;right:11px;height:1.7px;background:var(--ink);transition:.3s}
.burger span:nth-child(1){top:16px}.burger span:nth-child(2){bottom:16px}

/* nav móvil */
.mnav{position:fixed;inset:0;z-index:70;background:var(--ink);color:var(--paper);padding:24px var(--gut);
  transform:translateY(-100%);transition:.5s var(--ease);display:flex;flex-direction:column;overflow-y:auto}
.mnav.open{transform:none}
.mnav__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:36px}
.mnav__top .brand{color:var(--paper)}
.mnav__x{width:42px;height:42px;border:1px solid var(--line-inv);border-radius:var(--r);background:none;color:var(--paper);font-size:1.1rem;cursor:pointer}
.mnav a.ml{display:block;font-family:var(--sans);font-size:2rem;font-weight:600;letter-spacing:-.02em;padding:13px 0;border-bottom:1px solid var(--line-inv)}
.mnav .mgroup{font-family:var(--sans);text-transform:uppercase;font-size:.72rem;letter-spacing:.14em;color:var(--muted-2);margin:26px 0 4px;font-weight:600}
.mnav .msub{display:block;font-family:var(--sans);font-size:1.05rem;font-weight:500;padding:9px 0;color:rgba(246,245,242,.85)}
.mnav__foot{margin-top:auto;padding-top:28px;display:flex;justify-content:space-between;align-items:center;gap:16px}

/* ---------- hero ---------- */
.hero{padding:clamp(122px,18vh,190px) 0 clamp(30px,5vh,60px)}
.hero__head{max-width:none}
/* migas de pan */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-family:var(--sans);font-size:.8rem;font-weight:500;color:var(--muted)}
.crumb a{color:var(--muted);transition:color .2s}
.crumb a:hover{color:var(--ink)}
.crumb i{font-style:normal;color:var(--muted-2);opacity:.55}
.crumb span{color:var(--ink);font-weight:600}
.hero h1{margin:0}
.hero__meta{display:flex;flex-wrap:wrap;gap:26px 46px;align-items:end;margin-top:clamp(26px,4vh,40px);max-width:none}
.hero__note{max-width:42ch;margin:0}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero__img{margin-top:clamp(34px,6vh,68px)}
/* foto del equipo destacada con bloque rojo desplazado */
.hero__team{max-width:1160px;margin:clamp(34px,6vh,66px) auto 0}
.framed{position:relative}
.framed::before{content:"";position:absolute;inset:0;background:var(--red);border-radius:20px;transform:translate(16px,16px)}
.framed>.media{position:relative;box-shadow:0 30px 70px -40px rgba(17,17,16,.5)}
.framed:hover .media img{transform:scale(1.04)}
.media--team{aspect-ratio:4/3}
.team-cap{margin-top:28px;text-align:center;font-family:var(--sans);text-transform:uppercase;letter-spacing:.13em;font-size:.72rem;color:var(--muted);font-weight:500}
.team-cap::before{content:"";display:inline-block;width:22px;height:2px;background:var(--red);vertical-align:middle;margin-right:12px}
@media(max-width:560px){.framed::before{transform:translate(10px,10px)}}
/* animaciones de entrada del hero (al cargar) */
@keyframes riseIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes riseBlurIn{from{opacity:0;transform:translateY(32px);filter:blur(10px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes photoUnveil{from{opacity:.15;transform:scale(1.07);clip-path:inset(0 100% 0 0 round 20px)}to{opacity:1;transform:scale(1);clip-path:inset(0 0 0 0 round 20px)}}
@keyframes blockSlide{from{opacity:0;transform:translate(-10px,-10px)}to{opacity:1;transform:translate(16px,16px)}}
.anim-rise{animation:riseIn .8s var(--ease) both}
.hero-anim{animation:riseBlurIn 1.05s var(--ease) both}
.hero-photo{position:relative}
.hero-photo .media{animation:photoUnveil 1.1s var(--ease) .12s both}
.hero-photo .framed::before{animation:blockSlide .9s var(--ease) .66s both}
@media(max-width:560px){.hero-photo .framed::before{animation:blockSlide .9s var(--ease) .66s both}}

/* franja de ciudades */
.tickerwrap{position:relative;margin-top:clamp(34px,6vh,72px)}
.ticker{border-block:1px solid var(--line);overflow:hidden;padding:16px 0;background:var(--paper)}
.ticker__row{display:flex;gap:0;white-space:nowrap;width:max-content;animation:tick 42s linear infinite}
.ticker__row .tk{font-family:var(--sans);text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;font-weight:500;color:var(--ink);display:inline-flex;align-items:center}
.ticker__row .tk::after{content:"/";color:var(--red);margin:0 34px;font-weight:400}
.ticker__row .tk__t{display:inline-block;transform-origin:50% 100%;transition:color .3s,transform .35s cubic-bezier(.34,1.4,.5,1)}
.ticker__row .tk__t.mag-on{color:var(--red);transform:translateY(-5px) scale(1.18);text-shadow:0 5px 18px rgba(255,45,45,.4)}
@keyframes tick{to{transform:translateX(-50%)}}
/* imán que salta de ciudad en ciudad con arrastre magnético */
.tmag{position:absolute;left:0;top:-38px;z-index:4;pointer-events:none;will-change:transform}
.tmag__hop{display:block;width:38px;height:38px;margin-left:-19px;transform-origin:50% 100%}
.tmag__hop svg{width:38px;height:38px;display:block;filter:drop-shadow(0 7px 11px rgba(255,45,45,.4))}
.tmag__hop.hop{animation:tmaghop .55s cubic-bezier(.3,.85,.35,1)}
@keyframes tmaghop{0%{transform:translateY(0) scaleY(1)}26%{transform:translateY(-24px) scaleY(1.09)}55%{transform:translateY(0) scaleY(.88)}78%{transform:translateY(-5px) scaleY(1.03)}100%{transform:translateY(0) scaleY(1)}}
@media(prefers-reduced-motion:reduce){.tmag{display:none}}

/* ---------- secciones ---------- */
.sec{padding:clamp(66px,11vh,132px) 0}
.sec--tight{padding:clamp(40px,6vh,72px) 0}
.sec--ink{background:var(--ink);color:var(--paper)}
.sec--ink .lead{color:rgba(246,245,242,.72)}
.sec--flat{background:var(--paper-2)}
.sec__head{display:grid;grid-template-columns:1fr;gap:18px;margin-bottom:clamp(38px,6vh,66px);max-width:60ch}
.sec__head.wide{max-width:none}
.rule{height:1px;background:var(--line);border:0;margin:0}
.sec--ink .rule{background:var(--line-inv)}

/* ---------- lista de servicios ---------- */
.svcs{border-top:1px solid var(--ink)}
.svc{display:grid;grid-template-columns:58px 1.15fr 1.5fr auto;gap:30px;align-items:baseline;
  padding:32px 0;border-bottom:1px solid var(--line);transition:.35s var(--ease);position:relative}
.svc:hover{padding-left:16px}
.svc__n{font-family:var(--sans);font-size:.82rem;font-weight:600;color:var(--red)}
.svc__t{font-family:var(--sans);font-size:clamp(1.5rem,2.8vw,2.15rem);font-weight:600;letter-spacing:-.02em;line-height:1.04}
.svc__d{color:var(--muted);max-width:46ch;font-size:1rem}
.svc__go{align-self:center;justify-self:end}
.svc__arw{width:50px;height:50px;border:1.5px solid var(--line);border-radius:50%;display:grid;place-items:center;transition:.35s var(--ease)}
.svc:hover .svc__arw{background:var(--red);border-color:var(--red);color:#fff;transform:rotate(-45deg)}
.svc--star .svc__t::after{content:"★";color:var(--red);font-size:.52em;vertical-align:super;margin-left:.35em}

/* ---------- tarjetas ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.cardx{background:var(--card);padding:clamp(26px,3vw,38px);display:flex;flex-direction:column;gap:12px;min-height:220px;transition:.3s}
.cardx:hover{background:var(--wash)}
.cardx__n{font-family:var(--sans);font-size:.74rem;font-weight:600;color:var(--red)}
.cardx h3{font-family:var(--sans);font-weight:600;font-size:1.28rem;letter-spacing:-.015em;line-height:1.1;transition:color .2s}
.cardx:hover h3{color:var(--red)}

/* rejilla "lo que hacemos" (páginas de servicio) */
.caps{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,3.5vw,50px) clamp(38px,5vw,72px)}
.cap{border-top:2px solid var(--ink);padding-top:18px}
.cap__n{font-family:var(--sans);font-weight:600;color:var(--red);font-size:.8rem}
.cap h3{font-family:var(--sans);font-weight:600;font-size:clamp(1.2rem,1.9vw,1.55rem);letter-spacing:-.015em;line-height:1.1;margin:8px 0 12px}
.cap p{color:var(--ink-2);font-size:1rem;line-height:1.55}
.cap strong{font-weight:600;color:var(--ink)}
@media(max-width:760px){.caps{grid-template-columns:1fr;gap:30px}}
/* imagen contenida de cabecera de subpágina (con sombra) */
.subimg .media{box-shadow:0 34px 74px -46px rgba(17,17,16,.5)}
.cardx p{color:var(--muted);font-size:.97rem;margin-top:auto}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--line);border-block:1px solid var(--line)}
.stat{background:var(--paper);padding:clamp(26px,3.4vw,44px) clamp(26px,2.4vw,38px)}
.stat:first-child{padding-left:0}
.sec--flat .stat{background:var(--paper-2)}
.stat b{font-family:var(--sans);font-weight:600;font-size:clamp(2.7rem,5.4vw,4.4rem);line-height:1;letter-spacing:-.04em;display:block}
.stat .k{font-family:var(--sans);text-transform:uppercase;font-size:.74rem;letter-spacing:.08em;color:var(--muted);margin-top:14px;font-weight:500}

/* ---------- proceso / pasos (banda negra) ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;background:var(--line-inv);border:1px solid var(--line-inv);border-radius:var(--r);overflow:hidden}
.step{background:var(--ink);padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;gap:12px;min-height:210px}
.step__n{font-family:var(--sans);color:var(--red);font-size:.82rem;font-weight:600}
.step h3{font-family:var(--sans);font-weight:600;font-size:1.2rem;letter-spacing:-.01em}
.step p{color:rgba(246,245,242,.66);font-size:.94rem;margin-top:auto}

/* ---------- dolores (lista suiza, sin comillas) ---------- */
.pains{border-top:1px solid var(--ink)}
.pain{display:grid;grid-template-columns:58px 1fr auto;gap:26px;align-items:baseline;padding:26px 0;border-bottom:1px solid var(--line);transition:.3s}
.pain:hover{background:var(--wash);padding-inline:14px}
.pain__n{font-family:var(--sans);font-weight:600;font-size:.82rem;color:var(--red)}
.pain__t{font-family:var(--sans);font-weight:500;font-size:clamp(1.15rem,2vw,1.55rem);letter-spacing:-.015em;line-height:1.2}
.pain__fix{color:var(--muted);font-size:.95rem;max-width:40ch;justify-self:end;text-align:right}

/* ---------- CTA ---------- */
.cta{background:var(--ink);color:var(--paper);border-radius:var(--r);padding:clamp(40px,7vw,88px);
  display:grid;grid-template-columns:1.35fr 1fr;gap:40px;align-items:end;position:relative;overflow:hidden}
.cta__mark{position:absolute;right:-40px;bottom:-70px;font-family:var(--sans);font-weight:600;font-size:22rem;line-height:.7;color:rgba(255,45,45,.14);pointer-events:none;letter-spacing:-.05em}
.cta h2{position:relative}
.cta .label{color:rgba(246,245,242,.6)}
.cta .lead{color:rgba(246,245,242,.74)}

/* ---------- prosa servicio ---------- */
.prose{max-width:min(760px,100%)}
.prose>*+*{margin-top:1.1em}
.prose .lead-in{font-family:var(--text);font-size:clamp(1.18rem,2vw,1.45rem);line-height:1.44;color:var(--ink);font-weight:400}
.prose h2{font-family:var(--sans);font-weight:600;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.08;letter-spacing:-.02em;margin-top:1.7em}
.prose h3{font-family:var(--sans);font-weight:600;font-size:clamp(1.25rem,2.2vw,1.55rem);letter-spacing:-.01em;margin-top:1.4em}
.prose p{color:var(--ink-2)}
.prose strong{font-weight:600;color:var(--ink)}
.prose a:not(.btn){color:var(--ink);border-bottom:1.5px solid var(--red);padding-bottom:1px;transition:.2s}
/* los botones dentro del texto conservan su propio relleno y borde: la regla de enlaces
   les dejaba padding-bottom:1px y el texto parecía cortado por abajo */
.prose a.btn{padding:1.02em 1.7em;border:1.5px solid var(--ink);transition:.3s var(--ease)}
.prose a:not(.btn):hover{background:var(--red);color:#fff}
.prose ul li{position:relative;padding-left:28px;margin-top:.55em;color:var(--ink-2)}
.prose ul li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:2px;background:var(--red)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;align-items:baseline;
  padding:26px 0;font-family:var(--sans);font-size:clamp(1.15rem,2vw,1.45rem);font-weight:600;letter-spacing:-.015em;transition:.2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pl{color:var(--red);flex:none;transition:.3s;font-weight:400;font-size:1.4rem;line-height:1}
.faq details[open] summary .pl{transform:rotate(45deg)}
.faq summary:hover{color:var(--red)}
.faq__a{padding:0 0 28px;max-width:72ch}
.faq__a p{color:var(--muted)}

/* ---------- blog ---------- */
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;min-height:220px}
.post{background:var(--card);padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;gap:13px;transition:.3s}
.post:hover{background:var(--wash)}
.post .pm{font-family:var(--sans);font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--red);font-weight:600}
.post h3{font-family:var(--sans);font-weight:600;font-size:1.3rem;letter-spacing:-.015em;line-height:1.12}
.post .px{color:var(--muted);font-size:.95rem}
.post .pmore{margin-top:auto;font-family:var(--sans);font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;font-weight:600}
.blog-empty{grid-column:1/-1;background:var(--card);padding:clamp(48px,7vw,88px);text-align:center;display:flex;flex-direction:column;gap:16px;align-items:center}
.pager{display:flex;justify-content:center;gap:8px;margin-top:40px}
.pager button{font-family:var(--sans);font-size:.82rem;font-weight:600;width:46px;height:46px;border:1px solid var(--line);border-radius:var(--r);background:none;cursor:pointer;transition:.2s}
.pager button:hover:not(:disabled){background:var(--wash)}
.pager button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pager button:disabled{opacity:.35;cursor:not-allowed}

/* ---------- formulario ---------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
.field label{font-family:var(--sans);text-transform:uppercase;font-size:.7rem;letter-spacing:.1em;color:var(--muted);font-weight:500}
.field input,.field textarea,.field select{font-family:var(--text);font-size:1rem;padding:14px 16px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--card);color:var(--ink);transition:.2s;width:100%}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--ink);outline:none}
.field textarea{resize:vertical;min-height:140px}

/* ---------- rejilla texto|foto ---------- */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(30px,5vw,74px);align-items:center}
.split--rev>*:first-child{order:2}
.hero-split{grid-template-columns:1.08fr .92fr}
@media(max-width:900px){.split,.split--rev,.hero-split{grid-template-columns:1fr;gap:32px}.split--rev>*:first-child{order:0}}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:var(--paper);padding:clamp(58px,9vh,104px) 0 38px}
.foot__top{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:40px;padding-bottom:54px;border-bottom:1px solid var(--line-inv)}
.foot__brand{font-family:var(--sans);font-size:1.7rem;font-weight:600;line-height:1;letter-spacing:-.02em;text-transform:uppercase;display:flex;align-items:center;gap:11px}
.foot__brand .mk{width:15px;height:15px;background:var(--red);border-radius:2px}
.foot__col h5{font-family:var(--sans);text-transform:uppercase;font-size:.7rem;letter-spacing:.12em;color:var(--muted-2);margin-bottom:15px;font-weight:600}
.foot__col a{display:block;color:rgba(246,245,242,.74);padding:6px 0;font-size:.94rem;transition:.2s}
.foot__col a:hover{color:var(--paper);padding-left:5px}
.foot__bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:24px;font-family:var(--sans);text-transform:uppercase;font-size:.7rem;letter-spacing:.06em;color:rgba(246,245,242,.5);font-weight:500}
.foot__bottom a{color:inherit}
.foot__where{margin-top:24px;display:flex;flex-direction:column;gap:9px}
.foot__addr{color:rgba(246,245,242,.72);font-size:.92rem;line-height:1.45;transition:color .2s;font-style:normal}
.foot__addr:hover{color:var(--paper)}
.foot__tel{font-family:var(--sans);font-weight:600;font-size:1.18rem;color:var(--paper);width:fit-content;transition:color .2s}
.foot__tel:hover{color:var(--wa)}
.foot .btn--wa{margin-top:22px}

/* botón flotante WhatsApp (sticky, super llamativo) */
.wafab{position:fixed;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,32px);z-index:55;display:inline-flex;align-items:center;
  height:62px;padding:0 24px 0 19px;background:var(--wa);color:#fff;border-radius:100px;text-decoration:none;
  box-shadow:0 16px 40px -10px rgba(37,211,102,.6),0 8px 18px rgba(0,0,0,.22);
  transition:transform .3s var(--ease),background .3s;animation:wapulse 2.4s ease-out infinite}
.wafab svg{width:32px;height:32px;flex:none}
.wafab__label{font-family:var(--sans);font-weight:600;font-size:.98rem;margin-left:11px;white-space:nowrap}
.wafab:hover{transform:translateY(-3px) scale(1.03);background:var(--wa-d)}
@keyframes wapulse{
  0%{box-shadow:0 16px 40px -10px rgba(37,211,102,.6),0 8px 18px rgba(0,0,0,.22),0 0 0 0 rgba(37,211,102,.5)}
  70%{box-shadow:0 16px 40px -10px rgba(37,211,102,.6),0 8px 18px rgba(0,0,0,.22),0 0 0 22px rgba(37,211,102,0)}
  100%{box-shadow:0 16px 40px -10px rgba(37,211,102,.6),0 8px 18px rgba(0,0,0,.22),0 0 0 0 rgba(37,211,102,0)}}
@media(max-width:560px){.wafab{height:58px;padding:0;width:58px;justify-content:center}.wafab__label{display:none}}

/* ---------- pantalla de carga (una vez por sesión) ---------- */
.pre{display:none}
html.pre-on{overflow:hidden}
html.pre-on .pre{display:block;position:fixed;inset:0;z-index:200;color:var(--paper)}
/* franjas que suben al terminar (easing expo, largo y suave) */
.pre__slabs{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr)}
.pre__slabs i{background:var(--ink);transform:translateY(0);will-change:transform;
  box-shadow:0 0 0 1px var(--ink);
  transition:transform 1.15s cubic-bezier(.16,1,.3,1)}
.pre__glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 62%,rgba(255,45,45,.20),transparent 62%)}
.pre__grid{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(246,245,242,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(246,245,242,.05) 1px,transparent 1px);
  background-size:90px 90px}
/* el bloque claim+contador va PEGADO ABAJO (margin-top:auto) para no chocar con el logo central */
.pre__in{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-start;
  padding:clamp(24px,5vw,60px);transition:opacity .34s ease}
.pre__mid{margin-top:auto}
.pre__brand{display:flex;align-items:center;gap:12px}
.pre__dot{width:14px;height:14px;background:var(--red);border-radius:2px;flex:none}
/* logo GRANDE: ocupa por flex el hueco libre → nunca puede solaparse con el texto */
.pre__logo{flex:1;min-height:0;display:grid;place-items:center;pointer-events:none;
  transition:opacity .5s ease,transform .8s cubic-bezier(.16,1,.3,1)}
.pre__logoW{position:relative;display:inline-block;max-width:100%;max-height:100%}
.pre__logo img{position:relative;z-index:2;height:clamp(96px,17vw,250px);max-width:78vw;max-height:100%;width:auto;
  object-fit:contain;display:block;animation:logoRise 1.05s cubic-bezier(.16,1,.3,1) .1s both}
@keyframes logoRise{
  0%{clip-path:inset(105% 0 0 0);transform:translateY(30px)}
  100%{clip-path:inset(0 0 0 0);transform:none}}
.pre__city{font-family:var(--sans);font-weight:500;text-transform:uppercase;letter-spacing:.22em;
  font-size:clamp(.72rem,1.5vw,.86rem);color:var(--red)}
.pre__mid{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 40px;flex-wrap:wrap;
  margin-bottom:clamp(34px,6vh,72px)}   /* aire respecto a la barra */
.pre__word{font-family:var(--sans);font-weight:600;letter-spacing:-.03em;line-height:.94;
  font-size:clamp(2.2rem,6.4vw,5rem);max-width:14ch}
.pre__num{font-family:var(--sans);font-weight:600;letter-spacing:-.045em;line-height:.78;
  font-size:clamp(5.6rem,22vw,17rem);font-variant-numeric:tabular-nums}
.pre__num b{font-size:.26em;font-weight:600;margin-left:.12em;color:var(--red);vertical-align:.30em}
/* barra gruesa y bien redondeada */
.pre__bar{height:clamp(12px,1.5vw,18px);background:rgba(246,245,242,.14);overflow:hidden;border-radius:99px}
.pre__bar i{display:block;height:100%;width:0;background:var(--red);border-radius:99px;
  transition:width .18s linear;box-shadow:0 0 20px rgba(255,45,45,.6)}
/* ---- entrada suave del contenido ---- */
@keyframes preIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
html.pre-on .pre__brand{animation:preIn .6s cubic-bezier(.16,1,.3,1) both}
html.pre-on .pre__word{animation:preIn .7s cubic-bezier(.16,1,.3,1) .08s both}
html.pre-on .pre__num{animation:preIn .7s cubic-bezier(.16,1,.3,1) .14s both}
html.pre-on .pre__bar{animation:preIn .6s cubic-bezier(.16,1,.3,1) .2s both}

/* ---- fase 1: el 100% se asienta (latido del número + destello de la barra) ---- */
.pre__num{transition:transform .5s cubic-bezier(.34,1.4,.5,1),opacity .5s ease,filter .5s ease}
.pre--fill .pre__num{transform:scale(1.06)}
.pre--fill .pre__bar i{box-shadow:0 0 34px 6px rgba(255,45,45,.8)}
/* al llegar a 100 el logo da un pulso */
.pre--fill .pre__logo img{animation:logoPop .5s cubic-bezier(.34,1.5,.5,1) both}
@keyframes logoPop{0%{transform:scale(1)}45%{transform:scale(1.09)}100%{transform:scale(1)}}

/* ---- fase 2: el contenido se va escalonado hacia arriba ----
   OJO: la animación de entrada usa fill-mode "both", así que hay que ANULARLA
   (animation:none) o su fotograma final pisa el opacity/transform de salida. */
.pre__brand,.pre__word,.pre__num,.pre__bar{transition:transform .72s cubic-bezier(.16,1,.3,1),opacity .5s ease}
html.pre-on .pre--lift .pre__brand,html.pre-on .pre--lift .pre__word,
html.pre-on .pre--lift .pre__num,html.pre-on .pre--lift .pre__bar{animation:none}
html.pre-on .pre--lift .pre__bar{opacity:0;transform:translateY(-14px)}
html.pre-on .pre--lift .pre__num{opacity:0;transform:translateY(-40px) scale(.97);transition-delay:.05s}
html.pre-on .pre--lift .pre__word{opacity:0;transform:translateY(-40px);transition-delay:.11s}
html.pre-on .pre--lift .pre__brand{opacity:0;transform:translateY(-26px);transition-delay:.17s}
html.pre-on .pre--lift .pre__glow{opacity:0;transition:opacity .6s ease}
/* el logo se va con un empuje hacia arriba (y se anulan sus animaciones) */
html.pre-on .pre--lift .pre__logo{opacity:0;transform:translateY(-46px) scale(1.06)}
html.pre-on .pre--lift .pre__logo img{animation:none}
html.pre-on .pre--lift .pre__logo i{animation:none;opacity:0}
/* red de seguridad: cuando suben las franjas, el contenido ya no debe verse */
html.pre-on .pre--out .pre__in{opacity:0;transition:opacity .28s ease}

/* ---- fase 3: las franjas suben escalonadas ---- */
html.pre-on .pre--out .pre__slabs i{transform:translateY(-101%)}
html.pre-on .pre--out .pre__slabs i:nth-child(2){transition-delay:.09s}
html.pre-on .pre--out .pre__slabs i:nth-child(3){transition-delay:.18s}
html.pre-on .pre--out .pre__slabs i:nth-child(4){transition-delay:.27s}
/* mientras carga, las animaciones del hero esperan */
html.pre-on .hero-anim,html.pre-on .anim-rise,html.pre-on .hero-photo .media,html.pre-on .hero-photo .framed::before{animation-play-state:paused}
/* al empezar a subir el telón, el hero ya se anima detrás */
html.pre-on.pre-go .hero-anim,html.pre-on.pre-go .anim-rise,html.pre-on.pre-go .hero-photo .media,html.pre-on.pre-go .hero-photo .framed::before{animation-play-state:running}
@media(prefers-reduced-motion:reduce){html.pre-on{overflow:auto}html.pre-on .pre{display:none}}

/* ---------- reveal ---------- */
.rv{transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rv{opacity:0;transform:translateY(20px);will-change:opacity,transform}
.rv.in,.js .rv.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .svc{grid-template-columns:46px 1fr auto;gap:22px}
  .svc__d{display:none}
  .pain{grid-template-columns:46px 1fr;gap:20px}
  .pain__fix{display:none}
  .foot__top{grid-template-columns:1fr 1fr}
  .foot__brand{grid-column:1/-1}
  .cta{grid-template-columns:1fr;gap:28px}
}
@media(max-width:820px){
  .nav,.mast__right .btn{display:none}
  .burger{display:block}
  .form{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  body{font-size:16.5px}
  .svc{grid-template-columns:1fr auto;gap:12px}
  .svc__n{grid-row:1}
  .pain{grid-template-columns:1fr;gap:8px}
  .foot__top{grid-template-columns:1fr}
  .hero__meta{gap:20px 30px}
  .cards{grid-template-columns:1fr}
}
/* ---------- planes de precios ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.5vw,22px);align-items:stretch}
.plan{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:clamp(24px,2.4vw,34px);position:relative;transition:.3s var(--ease)}
.plan:hover{transform:translateY(-4px);box-shadow:0 34px 70px -46px rgba(17,17,16,.5)}
.plan--best{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.plan__flag{position:absolute;top:0;right:clamp(18px,2vw,28px);transform:translateY(-50%);
  background:var(--red);color:#fff;font-family:var(--sans);font-size:.66rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.13em;padding:7px 13px;border-radius:99px;white-space:nowrap}
.plan__name{font-family:var(--sans);font-weight:600;font-size:clamp(1.22rem,1.7vw,1.5rem);letter-spacing:-.022em;line-height:1.1}
.plan__tag{font-size:.93rem;color:var(--muted);margin-top:8px;line-height:1.4}
.plan--best .plan__tag{color:var(--muted-2)}
.plan__price{margin-top:clamp(18px,2.2vh,26px);padding:clamp(16px,2vh,22px) 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.plan--best .plan__price{border-color:var(--line-inv)}
.plan__price b{font-family:var(--sans);font-weight:600;font-size:clamp(2.3rem,3.4vw,3rem);letter-spacing:-.035em;line-height:1}
.plan__price span{font-family:var(--sans);font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.plan--best .plan__price span{color:var(--muted-2)}
.plan__feat{list-style:none;display:flex;flex-direction:column;gap:13px;margin:clamp(20px,2.4vh,28px) 0 clamp(24px,3vh,34px);padding:0}
.plan__feat li{position:relative;padding-left:25px;font-size:.97rem;line-height:1.42;color:var(--ink-2)}
.plan--best .plan__feat li,.sec--ink .plan__feat li{color:rgba(246,245,242,.84)}
.plan__feat li::before{content:"";position:absolute;left:0;top:.46em;width:9px;height:9px;background:var(--red);border-radius:2px}
.plan__cta{margin-top:auto}
.plan__cta .btn{width:100%;justify-content:center}

/* tarjetas horizontales de entrada (landing / web) */
.eplans{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.5vw,22px);
  margin-bottom:clamp(16px,1.8vw,24px)}
.eplan{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(18px,2vw,32px);align-items:center;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:clamp(22px,2.2vw,30px);transition:.3s var(--ease)}
.eplan:hover{transform:translateY(-4px);box-shadow:0 30px 64px -46px rgba(17,17,16,.5)}
.eplan__price{margin-top:14px;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.eplan__price b{font-family:var(--sans);font-weight:600;font-size:clamp(1.9rem,2.6vw,2.4rem);letter-spacing:-.035em;line-height:1}
.eplan__price span{font-family:var(--sans);font-size:.74rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.eplan__r{display:flex;flex-direction:column;gap:16px;align-items:flex-start;
  border-left:1px solid var(--line);padding-left:clamp(18px,2vw,30px)}
.eplan__r .plan__feat{margin:0;gap:10px}
.eplan__r .plan__feat li{font-size:.93rem}
.eplan__r .btn{padding:11px 18px;font-size:.82rem}
@media(max-width:1000px){.eplans{grid-template-columns:1fr;gap:20px}}
@media(max-width:640px){.eplan{grid-template-columns:1fr;gap:20px}
  .eplan__r{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:20px;align-self:stretch}
  .eplan__r .btn{width:100%;justify-content:center}}

/* tarjeta de servicios a consultar */
.plan-extra{margin-top:clamp(16px,1.8vw,24px);background:var(--wash);border:1px solid var(--line);
  border-radius:var(--r);padding:clamp(26px,2.8vw,40px);display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(22px,3vw,50px);align-items:center}
.plan-extra h3{font-family:var(--sans);font-weight:600;font-size:clamp(1.3rem,2.1vw,1.8rem);letter-spacing:-.022em;line-height:1.14}
.plan-extra p{color:var(--muted);font-size:.98rem;line-height:1.5;margin-top:12px;max-width:44ch}
.plan-extra__list{display:flex;flex-wrap:wrap;gap:10px}
.plan-extra__list a{border:1px solid var(--line);background:var(--card);border-radius:99px;
  padding:9px 15px;font-family:var(--sans);font-size:.88rem;font-weight:500;transition:.25s var(--ease)}
.plan-extra__list a:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.plans-foot{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:clamp(24px,3vh,36px)}
.plans-note{font-size:.88rem;color:var(--muted)}
@media(max-width:1000px){.plans{grid-template-columns:1fr;gap:38px}
  .plan__flag{right:auto;left:clamp(18px,2vw,28px)}
  .plan-extra{grid-template-columns:1fr;gap:24px}}
/* ═════════ Nuestro equipo: foto + modelo 3D ═════════ */
.mbs{display:flex;flex-direction:column;gap:clamp(56px,8vh,110px)}
/* el header es fijo: sin esto, al saltar a #ivan la ficha queda debajo de la barra */
.mb{scroll-margin-top:clamp(88px,11vh,128px)}
html{scroll-behavior:smooth}
.mb{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(26px,4vw,64px);align-items:center}
.mb__media{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.4vw,20px);align-items:stretch}
.mb__foto{margin:0;border-radius:var(--r);overflow:hidden;background:var(--paper-2);position:relative}
.mb__foto img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:3/4}
.mb__txt{align-self:center}
.mb__n{font-family:var(--sans);font-weight:600;font-size:.78rem;color:var(--red);letter-spacing:.06em}
.mb__name{font-family:var(--sans);font-weight:600;letter-spacing:-.03em;line-height:1.02;
  font-size:clamp(1.9rem,3.1vw,2.8rem);margin-top:10px}
.mb__rol{font-family:var(--sans);font-size:.76rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.13em;color:var(--muted);margin-top:12px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.mb__txt p:not(.mb__rol){color:var(--ink-2);font-size:1.02rem;line-height:1.6;margin-top:16px}

/* visor 3D */
.m3d{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:3/4;
  background:radial-gradient(120% 85% at 50% 8%,#22242b 0%,#131418 62%,#0e0f12 100%);
  border:1px solid rgba(246,245,242,.10)}
.m3d__v{width:100%;height:100%;--poster-color:transparent;cursor:grab;display:block}
.m3d__v:active{cursor:grabbing}
.m3d__tag{position:absolute;top:12px;left:12px;z-index:3;pointer-events:none;
  font-family:var(--sans);font-size:.62rem;font-weight:700;letter-spacing:.13em;line-height:1;
  padding:5px 8px;border-radius:4px;background:var(--red);color:#fff}
.m3d__hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:3;
  font-family:var(--sans);font-size:.66rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(246,245,242,.62);white-space:nowrap;pointer-events:none;
  opacity:0;transition:opacity .5s .4s}
.m3d.is-ready .m3d__hint{opacity:1}
.m3d.is-ready .m3d__hint{animation:hintFade 5.5s 1.6s forwards}
@keyframes hintFade{to{opacity:0}}

/* animación mientras carga: anillo de progreso + rejilla que respira */
.m3d__load{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:18px;z-index:2;background:inherit;transition:opacity .55s var(--ease)}
.m3d__load::before{content:"";position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(246,245,242,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(246,245,242,.055) 1px,transparent 1px);
  background-size:34px 34px;animation:m3dGrid 7s linear infinite}
@keyframes m3dGrid{to{background-position:34px 34px,34px 34px}}
.m3d__load::after{content:"";position:absolute;left:0;right:0;height:34%;
  background:linear-gradient(180deg,transparent,rgba(255,45,45,.14),transparent);
  animation:m3dScan 2.4s cubic-bezier(.5,0,.5,1) infinite}
@keyframes m3dScan{0%{top:-34%}100%{top:100%}}
.m3d__ring{position:relative;width:clamp(76px,26%,104px);aspect-ratio:1}
.m3d__ring svg{width:100%;height:100%;transform:rotate(-90deg);display:block}
.m3d__trk{fill:none;stroke:rgba(246,245,242,.13);stroke-width:5}
.m3d__arc{fill:none;stroke:var(--red);stroke-width:5;stroke-linecap:round;
  stroke-dasharray:326.7;stroke-dashoffset:326.7;transition:stroke-dashoffset .35s var(--ease);
  filter:drop-shadow(0 0 7px rgba(255,45,45,.55))}
.m3d__pc{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--sans);font-weight:600;font-size:1.28rem;color:var(--paper);letter-spacing:-.02em}
.m3d__pc b{font-weight:500;font-size:.62em;opacity:.6}
.m3d__txt{position:relative;font-family:var(--sans);font-size:.68rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(246,245,242,.5)}
.m3d.is-ready .m3d__load{opacity:0;pointer-events:none}
/* si el visor 3D no puede cargar, la ficha se queda solo con la foto */
.m3d--off{display:none}
.mb__media:has(.m3d--off){grid-template-columns:1fr}

@media(max-width:980px){
  .mb{grid-template-columns:1fr;gap:26px}
  .mb__txt{order:-1}
}
@media(max-width:520px){
  .mb__media{grid-template-columns:1fr;gap:14px}
}
@media(prefers-reduced-motion:reduce){
  .m3d__load::before,.m3d__load::after{animation:none}
  .m3d.is-ready .m3d__hint{animation:none;opacity:1}
}
/* tarjetas de equipo del inicio */
.tcards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px)}
.tcard{display:block;transition:.3s var(--ease);
  -webkit-user-select:none;user-select:none;-webkit-user-drag:none;-webkit-tap-highlight-color:transparent}
.tcard *{-webkit-user-drag:none}
.tcard:hover{transform:translateY(-5px)}
.tcard .m3d--sm{aspect-ratio:4/5}
/* en el inicio el 3D es decorativo: no captura ratón ni rueda, así el scroll y el
   zoom del navegador son los de la página y la tarjeta entera funciona como enlace */
.tcard .m3d__v{pointer-events:none;cursor:inherit}
.tcard .m3d{cursor:pointer}
.tcard__n{font-family:var(--sans);font-weight:600;letter-spacing:-.025em;line-height:1.05;
  font-size:clamp(1.15rem,1.7vw,1.45rem);margin-top:16px;transition:color .2s}
.tcard:hover .tcard__n{color:var(--red)}
.tcard__r{font-family:var(--sans);font-size:.72rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.13em;color:var(--muted);margin-top:7px}
.m3d--sm .m3d__ring{width:clamp(58px,22%,80px)}
.m3d--sm .m3d__pc{font-size:1.02rem}
.m3d--sm .m3d__txt{display:none}
@media(max-width:820px){.tcards{grid-template-columns:1fr;gap:30px}}
/* ═════════ Artículo del blog ═════════ */
.post-hero{padding-bottom:clamp(14px,2vh,26px)}
.post-head{max-width:min(860px,100%)}
.post-cat{display:inline-block;font-family:var(--sans);font-size:.68rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;color:#fff;background:var(--red);
  padding:6px 11px;border-radius:4px;margin-top:18px}
.post-meta{display:flex;align-items:center;gap:14px;margin-top:20px;
  font-family:var(--sans);font-size:.8rem;color:var(--muted)}
.post-meta i{width:4px;height:4px;border-radius:50%;background:var(--muted-2);display:block}
.post-body{max-width:min(780px,100%)}
.post-body .lead-in{margin-bottom:.4em}
.post-body h2{scroll-margin-top:110px}
.pfig{margin:clamp(30px,4vh,46px) 0}
.pfig img{display:block;width:100%;height:auto;border-radius:var(--r);background:var(--paper-2)}

/* bloque de contacto por WhatsApp dentro del texto */
.wablk{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(16px,2.4vw,32px);
  align-items:center;margin:clamp(30px,4vh,46px) 0;padding:clamp(22px,2.6vw,32px);
  border-radius:var(--r);background:var(--ink);color:var(--paper);position:relative;overflow:hidden}
.wablk::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 130% at 92% 0%,rgba(37,211,102,.22),transparent 58%)}
.wablk__t{font-family:var(--sans);font-weight:600;letter-spacing:-.022em;line-height:1.14;
  font-size:clamp(1.15rem,2vw,1.5rem);position:relative}
.wablk__s{font-size:.93rem;color:rgba(246,245,242,.62);margin-top:8px;position:relative}
.wablk__b{display:flex;gap:10px;flex-wrap:wrap;position:relative}
.wablk__b .btn--fill{background:transparent;color:var(--paper);border-color:rgba(246,245,242,.4)}
.wablk__b .btn--fill:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
@media(max-width:760px){
  .wablk{grid-template-columns:1fr;gap:18px}
  .wablk__b .btn{width:100%;justify-content:center}
}
/* ── artículo: dos columnas, índice y ficha del autor ── */
.post-layout{display:grid;grid-template-columns:minmax(0,1fr) clamp(230px,21vw,290px);
  gap:clamp(28px,4vw,66px);align-items:start}
.post-layout .post-body{max-width:none}
.post-side{position:sticky;top:clamp(88px,11vh,118px);display:flex;flex-direction:column;
  gap:clamp(20px,2.4vh,28px)}
.acard{border-top:2px solid var(--ink);padding-top:16px}
.acard__k{font-family:var(--sans);font-size:.66rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;color:var(--muted)}
.acard__in{display:grid;grid-template-columns:66px 1fr;gap:14px;align-items:center;margin-top:14px}
.acard__in img{width:66px;height:88px;object-fit:cover;border-radius:4px;background:var(--paper-2)}
.acard__in b{display:block;font-family:var(--sans);font-weight:600;font-size:1rem;letter-spacing:-.015em}
.acard__in i{display:block;font-style:normal;font-size:.8rem;color:var(--muted);margin-top:3px;line-height:1.3}
.acard__go{display:block;font-family:var(--sans);font-size:.74rem;font-weight:600;color:var(--red);margin-top:7px}
.toc{border-top:1px solid var(--line);padding-top:16px}
.toc__k{font-family:var(--sans);font-size:.66rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;color:var(--muted)}
.toc ol{list-style:none;counter-reset:t;margin-top:12px;padding:0}
.toc li{counter-increment:t;margin-top:9px}
.toc a{display:flex;gap:9px;font-size:.88rem;line-height:1.32;color:var(--ink-2);transition:color .2s}
.toc a::before{content:counter(t,decimal-leading-zero);font-family:var(--sans);font-size:.7rem;
  font-weight:600;color:var(--red);flex:none;padding-top:.15em}
.toc a:hover{color:var(--red)}
.side-cta .btn{width:100%;justify-content:center}
.post-by{font-weight:600;color:var(--ink-2)}
@media(max-width:1000px){
  .post-layout{grid-template-columns:1fr;gap:34px}
  .post-side{position:static;flex-direction:row;flex-wrap:wrap;gap:26px}
  .acard,.toc{flex:1 1 260px}
  .side-cta{flex:1 1 100%}
}

/* ── el bloque oscuro de WhatsApp: .prose p ganaba en especificidad y dejaba el texto negro ── */
.prose .wablk p,.prose .wablk__t,.prose .wablk__s,.wablk p{color:rgba(246,245,242,.72)}
.prose .wablk__t,.wablk__t{color:var(--paper)}
.prose .wablk a{color:var(--paper)}
.prose .wablk a.btn--wa{border-color:var(--wa)}
.prose .wablk a.btn--fill{border-color:rgba(246,245,242,.4)}
.prose .wablk a:hover{background:none}
.prose .wablk .btn--wa{color:#fff}

/* ── tarjetas del blog con imagen ── */
.post .pimg{display:block;overflow:hidden;border-radius:var(--r);background:var(--paper-2);margin-bottom:16px}
.post .pimg img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  transition:transform .5s var(--ease)}
.post:hover .pimg img{transform:scale(1.04)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv,.js .rv{opacity:1!important;transform:none!important}}
/* campo trampa para bots + aviso del formulario */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.fmsg{margin-top:16px;padding:12px 16px;border-radius:var(--r);font-size:.94rem;line-height:1.45}
.fmsg--ok{background:rgba(18,161,80,.12);color:#0f7a3d;border:1px solid rgba(18,161,80,.3)}
.fmsg--bad{background:rgba(255,45,45,.1);color:#c31616;border:1px solid rgba(255,45,45,.28)}
.g-recaptcha{margin-top:4px}


/* ================= popup de la oferta de migración a HTML ================= */
/* El diálogo vive fuera del flujo de la página: se abre sobre ella, atrapa el
   foco mientras está abierto y se cierra con Esc, con la X o pulsando fuera. */
.pop{position:fixed;inset:0;z-index:9999;display:none;place-items:center;
  padding:clamp(12px,3vw,32px);overscroll-behavior:contain}
.pop[open],.pop.is-open{display:grid}
.pop__velo{position:absolute;inset:0;background:rgba(10,10,10,.72);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;transition:opacity .35s var(--ease)}
.pop.is-in .pop__velo{opacity:1}

.pop__caja:focus{outline:none}
.pop__caja{position:relative;width:min(100%,980px);max-height:min(94vh,880px);
  overflow:auto;-webkit-overflow-scrolling:touch;background:var(--ink);color:var(--paper);
  border-radius:calc(var(--r) * 2);box-shadow:0 40px 100px rgba(0,0,0,.5);
  display:grid;grid-template-columns:1fr 1fr;
  opacity:0;transform:translateY(18px) scale(.985);
  transition:opacity .4s var(--ease),transform .4s var(--ease)}
.pop.is-in .pop__caja{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .pop__velo,.pop__caja{transition:none}
  .pop__caja{transform:none}
}

.pop__x{position:absolute;top:12px;right:12px;z-index:3;width:38px;height:38px;
  display:grid;place-items:center;border-radius:50%;border:1px solid var(--line-inv);
  background:rgba(17,17,16,.55);color:var(--paper);cursor:pointer;
  font-size:20px;line-height:1;transition:.25s var(--ease)}
.pop__x:hover{background:var(--red);border-color:var(--red);color:#fff;transform:rotate(90deg)}

/* --- lado izquierdo: el gancho --- */
.pop__pitch{padding:clamp(26px,3.2vw,42px);display:flex;flex-direction:column;gap:16px;
  justify-content:center}
.pop__pitch .label{margin-bottom:2px}
.pop__tit{font-family:var(--sans);font-weight:600;line-height:1.02;letter-spacing:-.028em;
  font-size:clamp(1.75rem,3.1vw,2.5rem)}
.pop__desde{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.pop__chip{font-family:var(--sans);font-weight:500;font-size:.68rem;text-transform:uppercase;
  letter-spacing:.07em;padding:.45em .75em;border:1px solid var(--line-inv);border-radius:var(--r);
  color:rgba(246,245,242,.76)}
.pop__chip--dest{background:var(--red);border-color:var(--red);color:#fff}
.pop__flecha{color:var(--red);font-size:1rem;line-height:1}
.pop__precio{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:14px 0;border-block:1px solid var(--line-inv)}
.pop__precio b{font-family:var(--sans);font-weight:600;line-height:.9;letter-spacing:-.04em;
  font-size:clamp(2.8rem,5vw,3.9rem)}
.pop__precio i{font-style:normal;font-family:var(--sans);font-weight:500;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.09em;color:var(--muted-2)}
.pop__txt{font-size:1rem;line-height:1.5;color:rgba(246,245,242,.76)}
.pop__feat{list-style:none;display:flex;flex-direction:column;gap:9px;margin:0;padding:0}
.pop__feat li{position:relative;padding-left:20px;font-size:.93rem;line-height:1.4;
  color:rgba(246,245,242,.84)}
.pop__feat li::before{content:"";position:absolute;left:0;top:.44em;width:8px;height:8px;
  background:var(--red);border-radius:2px}
.pop__cond{border-left:2px solid var(--red);padding:1px 0 1px 13px;
  font-size:.84rem;line-height:1.45;color:rgba(246,245,242,.66)}
.pop__cond a{border-bottom:1px solid rgba(246,245,242,.35)}
.pop__cond a:hover{border-bottom-color:var(--red);color:#fff}

/* --- lado derecho: el formulario --- */
.pop__panel{--pop-px:clamp(24px,3vw,38px);--pop-py:clamp(24px,3vw,38px);
  background:var(--card);color:var(--ink);padding:var(--pop-py) var(--pop-px) 0;
  display:flex;flex-direction:column;justify-content:center;gap:4px}
.pop__panel .form{min-width:0}
.pop__panel h3{font-family:var(--sans);font-weight:600;letter-spacing:-.015em;
  font-size:clamp(1.2rem,2vw,1.5rem);line-height:1.12}
.pop__panel .small{display:block;margin-bottom:16px}
.pop__panel .form{gap:13px}
.pop__panel .field label{font-size:.66rem}
.pop__panel .field input,.pop__panel .field textarea{padding:11px 13px;font-size:.97rem}
.pop__panel .field textarea{min-height:78px}
/* La barra de botones va a sangre: ocupa todo el ancho del panel y se pega al
   canto de abajo. Sin el margen negativo se quedaba flotando sobre el relleno
   del panel y por debajo se veía el formulario mientras se hacía scroll. El
   min-width:0 es lo que permite que la fila se parta en vez de desbordarse:
   sin él, el ancho mínimo de los dos botones ensanchaba la columna y el botón
   de WhatsApp se salía de la caja. */
.pop__acciones{grid-column:1/-1;min-width:0;display:flex;flex-wrap:wrap;gap:10px;
  align-items:center;margin:6px calc(var(--pop-px) * -1) 0;
  padding:12px var(--pop-px) max(14px,calc(var(--pop-py) * .45));background:var(--card)}
/* Dentro del diálogo los botones pueden partir su propio texto: con el
   nowrap de .btn el ancho mínimo de la fila ensanchaba la columna del grid
   y el botón de WhatsApp acababa fuera de la caja. */
.pop__acciones .btn{flex:1 1 auto;min-width:0;justify-content:center;
  padding:.92em 1.3em;white-space:normal}
.pop__o{font-family:var(--sans);font-weight:500;font-size:.68rem;text-transform:uppercase;
  letter-spacing:.11em;color:var(--muted);flex:0 0 auto}
.pop__legal{grid-column:1/-1;font-size:.74rem;line-height:1.45;color:var(--muted);margin-top:2px}
.pop__legal a{border-bottom:1px solid var(--line)}
.pop__hp{position:absolute!important;left:-9999px!important;top:-9999px!important;
  width:1px;height:1px;overflow:hidden}
.pop .g-recaptcha{grid-column:1/-1;transform:scale(.85);transform-origin:0 0;height:67px}
/* El hueco del captcha: el widget de Google mide 304 px fijos y no se puede
   encoger, así que su ancho mínimo ensanchaba la columna del grid y arrastraba
   a TODO el formulario fuera de la caja (por eso el botón de WhatsApp se salía).
   Con min-width:0 la columna vuelve a su sitio y del tamaño ya se encarga la
   escala de arriba. */
.pop [data-mf-captcha]{grid-column:1/-1;min-width:0;overflow:hidden}
.pop .mf-form-msg{grid-column:1/-1}

/* mientras el diálogo está abierto la página de detrás no se mueve */
body.pop-abierto{overflow:hidden}

@media(max-width:860px){
  /* En móvil el gancho se comprime: si ocupa toda la pantalla, el formulario
     queda tan abajo que nadie llega. Se deja el titular, el precio y dos
     motivos; el resto sobra en un espacio tan pequeño. */
  .pop__caja{grid-template-columns:1fr}
  .pop__pitch{padding:22px 22px 16px;gap:11px}
  .pop__tit{font-size:clamp(1.45rem,6vw,1.9rem)}
  .pop__txt{display:none}
  .pop__feat{gap:7px}
  .pop__feat li:nth-child(n+3){display:none}
  .pop__feat li{font-size:.88rem}
  .pop__precio{padding:11px 0}
  .pop__precio b{font-size:2.4rem}
  .pop__cond{font-size:.78rem}
  .pop__chip{font-size:.63rem;padding:.4em .65em}
  .pop__panel{--pop-px:22px;--pop-py:20px;padding:20px 22px 0}
  .pop__panel .small{margin-bottom:12px}
  /* La barra de botones se queda pegada abajo mientras se hace scroll dentro
     del diálogo. En una pantalla de móvil el gancho y el formulario no caben a
     la vez, y sin esto "Quiero la oferta" quedaba siempre por debajo del corte. */
  .pop__acciones{flex-direction:column;align-items:stretch;gap:9px;
    position:sticky;bottom:0;z-index:2;background:var(--card);
    margin:6px calc(var(--pop-px) * -1) 0;
    padding:10px var(--pop-px) 14px;box-shadow:0 -14px 16px -6px var(--card)}
  .pop__o{align-self:center}
  .pop__legal{padding-bottom:2px}
}
@media(max-width:420px){
  .pop{padding:0}
  .pop__caja{max-height:100vh;border-radius:0;width:100%}
}

/* --- pantallas BAJAS: el portátil normal tiene ~620-730 px de alto útil y con
   el diseño de arriba los botones de enviar quedaban por debajo del corte. Se
   comprime todo hasta que "Quiero la oferta" y WhatsApp entran en pantalla. --- */
@media(max-height:820px){
  .pop__pitch{padding:22px 26px;gap:10px}
  .pop__tit{font-size:clamp(1.35rem,2.3vw,1.85rem)}
  .pop__precio{padding:9px 0}
  .pop__precio b{font-size:clamp(2.1rem,3.4vw,2.7rem)}
  .pop__txt{font-size:.9rem;line-height:1.42}
  .pop__feat{gap:6px}
  .pop__feat li{font-size:.86rem;line-height:1.34}
  .pop__cond{font-size:.78rem;line-height:1.38}
  .pop__panel{--pop-px:26px;--pop-py:20px;padding:20px 26px 0;gap:2px}
  .pop__panel h3{font-size:clamp(1.05rem,1.7vw,1.3rem)}
  .pop__panel .small{margin-bottom:9px;font-size:.84rem}
  .pop__panel .form{gap:9px}
  .pop__panel .field{gap:5px}
  .pop__panel .field input,.pop__panel .field textarea{padding:9px 12px;font-size:.92rem}
  .pop__panel .field textarea{min-height:52px}
  .pop .g-recaptcha,.pop [data-mf-captcha]{transform:scale(.78);height:60px}
  .pop__acciones .btn{padding:.8em 1.1em;font-size:.72rem}
  .pop__legal{font-size:.7rem;line-height:1.35}
}
@media(max-height:680px){
  /* aquí ya no cabe el discurso entero: se queda el titular, el precio y dos
     motivos, que es lo que hace falta para entender la oferta */
  .pop__pitch{padding:18px 24px;gap:8px}
  .pop__txt{display:none}
  .pop__feat li:nth-child(n+3){display:none}
  .pop__cond{font-size:.74rem;line-height:1.34}
  .pop__panel{--pop-px:24px;--pop-py:16px;padding:16px 24px 0}
  .pop__panel .field textarea{min-height:44px}
  .pop__panel .form{gap:7px}
  .pop .g-recaptcha,.pop [data-mf-captcha]{transform:scale(.72);height:55px}
  .pop__legal{display:none}
}

/* ── Popup Kit Digital: grupos, selects y casillas ────────────────── */
.pop__grupo{grid-column:1/-1;margin:10px 0 -4px;font-family:var(--sans);font-weight:600;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  display:flex;align-items:center;gap:9px}
.pop__grupo::before{content:"";width:7px;height:7px;background:var(--brand,#ff2d2d);flex:0 0 auto}
.pop__grupo:first-of-type{margin-top:2px}
.pop__panel .field select{
  width:100%;padding:11px 13px;font:inherit;font-size:.97rem;color:var(--ink);
  background:var(--paper,#fff);border:1px solid var(--line);border-radius:10px;
  appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
    linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 17px) calc(50% + 1px),calc(100% - 12px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px;
}
.pop__panel .field select:focus{outline:none;border-color:var(--brand,#ff2d2d);
  box-shadow:0 0 0 3px rgba(255,45,45,.14)}
.pop__chks{display:flex;flex-wrap:wrap;gap:7px}
.pop__chk{position:relative;display:inline-flex}
.pop__chk input{position:absolute;opacity:0;width:0;height:0}
.pop__chk span{
  display:inline-block;padding:7px 12px;border:1px solid var(--line);border-radius:999px;
  font-size:.83rem;line-height:1.2;color:var(--ink-2,#5c564d);cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.pop__chk span:hover{border-color:var(--brand,#ff2d2d);color:var(--ink)}
.pop__chk input:checked + span{background:var(--brand,#ff2d2d);border-color:var(--brand,#ff2d2d);color:#fff}
.pop__chk input:focus-visible + span{outline:2px solid var(--brand,#ff2d2d);outline-offset:2px}
@media (max-width:560px){
  .pop__chk span{font-size:.79rem;padding:6px 10px}
  .pop__grupo{margin:8px 0 -6px}
}

/* El formulario del Kit Digital es mucho más largo que la oferta anterior: en
   un portátil de 625 px el botón de enviar se quedaba fuera de la caja. Cada
   columna scrollea por su cuenta y la barra de botones se queda pegada abajo,
   igual que ya hacía en móvil. */
@media(min-width:861px){
  /* la fila del grid tiene que poder encogerse: sin minmax(0,1fr) y min-height:0
     las columnas crecen con el contenido y la caja las recorta sin más */
  .pop__caja{overflow:hidden;grid-template-rows:minmax(0,1fr)}
  .pop__pitch,.pop__panel{min-height:0}
  .pop__pitch{overflow-y:auto}
  .pop__panel{overflow-y:auto;justify-content:flex-start}
  .pop__acciones{position:sticky;bottom:0;z-index:2;background:var(--card);
    margin:6px calc(var(--pop-px) * -1) 0;
    padding:11px var(--pop-px) 14px;box-shadow:0 -14px 16px -6px var(--card)}
}
@media(max-height:680px){
  /* aquí el aviso legal vuelve: está encima del botón, no ocupa sitio útil */
  .pop__legal{display:block;font-size:.68rem;line-height:1.3}
}

/* ---- /kitdigital: la landing del formulario del Kit Digital ---- */
.kitpanel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,3.4vw,42px)}
#solicitud{scroll-margin-top:96px}
.kitform__acciones{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.kitreqs{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:12px;padding:0}
.kitreqs li{position:relative;padding-left:24px;line-height:1.55}
.kitreqs li::before{content:"";position:absolute;left:0;top:.42em;width:9px;height:9px;background:var(--red)}
@media(max-width:560px){.kitpanel{padding:20px 16px}}