@font-face{font-family:Raleway;src:url(../fonts/Raleway-Bold.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:OpenSans;src:url(../fonts/OpenSans-Regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:OpenSans;src:url(../fonts/OpenSans-Semibold.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:OpenSans;src:url(../fonts/OpenSans-Bold.woff2) format('woff2');font-weight:700;font-display:swap}
/* ==========================================================================
   Xtatera — propuesta de rediseño 2026
   Mismo ADN de marca: naranja #ea5131, azul #30517a, Raleway + Open Sans.
   Lo que cambia es el soporte: fondo profundo, aire, motion y jerarquía.
   ========================================================================== */


:root{
  /* marca, sin tocar */
  --naranja:#ea5131;
  --naranja-alto:#ff6a41;
  --azul:#30517a;

  /* soporte nuevo: azules profundos derivados del azul de marca */
  --tinta:#060c16;
  --tinta-2:#0a1322;
  --tinta-3:#0f1d31;
  --borde:#1b2d47;
  --borde-alto:#27405f;

  --texto:#e9eef7;
  --texto-2:#9fb0c8;
  --texto-3:#6f829c;

  --shell:1200px;
  --r:14px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body.xt{
  margin:0;background:var(--tinta);color:var(--texto);
  font:400 17px/1.7 OpenSans,-apple-system,Segoe UI,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.xt img{max-width:100%;display:block}
body.xt a{color:inherit;text-decoration:none}
body.xt h1,body.xt h2,body.xt h3,body.xt h4{font-family:Raleway,sans-serif;font-weight:700;margin:0;line-height:1.06;letter-spacing:-.02em}
body.xt p{margin:0}
/* Los titulos van sin margen (margin:0) para poder componerlos con gap en los
   contenedores. Pero cuando un parrafo sigue al titulo DENTRO de la misma
   columna no hay gap que los separe y se pegan — se notaba poco en escritorio
   y muchisimo en celular. Esta regla cubre esos casos. */
body.xt h1+p,body.xt h2+p,body.xt h3+p,body.xt h1+.lead,body.xt h2+.lead,body.xt h3+.lead{margin-top:clamp(16px,2vw,24px)}
body.xt s{text-decoration-color:var(--naranja);text-decoration-thickness:3px;opacity:.55}

.shell{width:100%;max-width:var(--shell);margin:0 auto;padding:0 28px}

/* ── barra de progreso de scroll ─────────────────────────────────────────── */
.scroll-progress{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:200;
  background:linear-gradient(90deg,var(--naranja),var(--naranja-alto));
  box-shadow:0 0 12px rgba(234,81,49,.7);transition:width .1s linear;
}

/* ── tipografía de sección ───────────────────────────────────────────────── */
.eyebrow{
  font:600 12px/1 OpenSans;letter-spacing:.16em;text-transform:uppercase;
  color:var(--naranja);margin-bottom:20px;display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--naranja);flex:none}
.eyebrow--on-dark{color:var(--naranja-alto)}
.eyebrow--on-dark::before{background:var(--naranja-alto)}

.h2{font-size:clamp(30px,4.4vw,54px)}
.h2--xl{font-size:clamp(36px,6vw,76px)}
.mark{
  background:linear-gradient(180deg,transparent 62%,rgba(234,81,49,.32) 62%);
  color:var(--naranja-alto);
}
.lead{color:var(--texto-2);font-size:17px;margin-bottom:22px}
.lead--lg{font-size:19px;line-height:1.75;color:#c3d0e2}

/* ── botones ─────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 28px;border-radius:100px;border:1px solid transparent;
  background:var(--naranja);color:#fff;
  font:700 14px/1 OpenSans;letter-spacing:.02em;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s;
  will-change:transform;
}
.btn:hover{background:var(--naranja-alto);transform:translateY(-2px);box-shadow:0 12px 30px -8px rgba(234,81,49,.6)}
.btn .arr{width:16px;height:10px;transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn--ghost{background:transparent;border-color:var(--borde-alto);color:var(--texto)}
.btn--ghost:hover{background:rgba(255,255,255,.05);border-color:var(--naranja);box-shadow:none}
.btn--sm{padding:11px 20px;font-size:13px}
.btn--lg{padding:18px 34px;font-size:15px}

/* ── NAV ─────────────────────────────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:150;
  transition:background .3s,backdrop-filter .3s,border-color .3s,padding .3s;
  border-bottom:1px solid transparent;padding:10px 0;
}
.nav.is-stuck{
  background:rgba(6,12,22,.82);backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--borde);padding:2px 0;
}
.nav__in{display:flex;align-items:center;gap:34px;height:64px}
/* El PNG del logo mide 146x38 y no existe version mayor, asi que no conviene
   pasar de ~40px de alto o se empieza a ver suave en pantallas retina.
   Para crecer mas hace falta el logo en SVG o un PNG de mayor resolucion. */
.nav__logo img{height:34px;width:auto;transition:height .3s var(--ease)}
.nav.is-stuck .nav__logo img{height:28px}
.nav__links{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav__link{
  position:relative;display:inline-flex;align-items:center;gap:7px;
  padding:10px 15px;border:0;background:none;cursor:pointer;
  color:var(--texto-2);font:600 14px/1 OpenSans;transition:color .2s;
}
.nav__link:hover{color:var(--texto)}
.nav__link::after{
  content:"";position:absolute;left:15px;right:15px;bottom:4px;height:1.5px;
  background:var(--naranja);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav__link:hover::after{transform:scaleX(1)}
.chev{width:10px;height:6px;transition:transform .25s}
.has-mega:hover .chev{transform:rotate(180deg)}

/* mega menú */
.mega{
  position:absolute;left:0;right:0;top:100%;
  background:rgba(8,16,28,.96);backdrop-filter:blur(20px);
  border-top:1px solid var(--borde);border-bottom:1px solid var(--borde);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
}
.has-mega:hover .mega{opacity:1;visibility:visible;transform:none}
.mega__in{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:44px;padding:36px 28px 40px}
.mega__label{
  font:600 11px/1 OpenSans;letter-spacing:.15em;text-transform:uppercase;
  color:var(--texto-3);margin-bottom:16px;
}
.mega__col a{
  display:block;padding:9px 0;color:var(--texto-2);font-size:15px;
  transition:color .2s,transform .2s var(--ease);
}
.mega__col a:hover{color:var(--naranja-alto);transform:translateX(4px)}
.mega__feat{
  position:relative;padding:14px 16px !important;border-radius:12px;
  border:1px solid var(--borde);margin-bottom:10px;
}
.mega__feat:hover{border-color:var(--naranja);transform:none !important;background:rgba(234,81,49,.06)}
.mega__feat-tag{
  display:inline-block;font:700 10px/1 OpenSans;letter-spacing:.1em;
  color:var(--naranja);border:1px solid var(--naranja);border-radius:4px;
  padding:3px 6px;margin-bottom:8px;
}
.mega__feat b{display:block;color:var(--texto);font:700 15px/1.3 Raleway;margin-bottom:3px}
.mega__feat span:last-child{display:block;color:var(--texto-3);font-size:13px}

/* hamburguesa + drawer */
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.burger span{width:24px;height:2px;background:var(--texto);transition:transform .3s var(--ease),opacity .2s}
.burger.is-on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.is-on span:nth-child(2){opacity:0}
.burger.is-on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.drawer{
  display:none;flex-direction:column;background:rgba(8,16,28,.98);
  border-top:1px solid var(--borde);max-height:0;overflow:hidden;
  transition:max-height .35s var(--ease);
}
.drawer.is-open{max-height:420px}
.drawer a{
  padding:16px 28px;border-bottom:1px solid rgba(27,45,71,.5);
  color:var(--texto-2);font-size:16px;display:flex;justify-content:space-between;
}
.drawer a em{
  font-style:normal;font:700 10px/1.6 OpenSans;letter-spacing:.08em;
  text-transform:uppercase;color:var(--naranja);
}

/* ── HERO ────────────────────────────────────────────────────────────────── */
.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:center;padding:150px 0 40px;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%,#12243c 0%,var(--tinta) 62%);
}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
.hero__glow{
  position:absolute;left:50%;top:-12%;width:min(1000px,110vw);height:620px;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(234,81,49,.2) 0%,transparent 70%);
  filter:blur(24px);
}
.hero__grid{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(48,81,122,.14) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(48,81,122,.14) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(75% 60% at 50% 40%,#000 0%,transparent 100%);
  -webkit-mask-image:radial-gradient(75% 60% at 50% 40%,#000 0%,transparent 100%);
}
.hero__in{position:relative;z-index:2}
.hero__h1{font-size:clamp(42px,8.2vw,104px);margin:0 0 30px;letter-spacing:-.035em}
.hero__h1 .line{display:block;overflow:hidden}
.hero__sub{max-width:600px;color:var(--texto-2);font-size:clamp(16px,1.6vw,20px);margin-bottom:36px}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px}

/* palabra rotatoria */
.rotator{position:relative;display:inline-block;vertical-align:top;color:var(--naranja)}
.rotator__word{
  position:absolute;left:0;top:0;white-space:nowrap;opacity:0;
  transform:translateY(.5em) rotateX(-40deg);transform-origin:50% 0;
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.rotator__word.is-on{position:relative;opacity:1;transform:none}
.rotator__word.is-out{opacity:0;transform:translateY(-.5em) rotateX(40deg)}

/* pie del hero: certificaciones */
.hero__foot{
  position:relative;z-index:2;margin-top:auto;padding-top:44px;
  display:flex;align-items:center;gap:26px;flex-wrap:wrap;
}
.hero__foot-label{
  font:600 11px/1 OpenSans;letter-spacing:.15em;text-transform:uppercase;color:var(--texto-3);
}
/* los logos de certificacion vienen disenados para fondo blanco:
   sobre el fondo oscuro van en placa clara o no se leen */
.creds{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.creds img{
  height:52px;width:auto;padding:8px 12px;background:#fff;border-radius:10px;
  opacity:.82;transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.creds img:hover{opacity:1;transform:translateY(-2px)}
/* AMITI es blanco sobre transparente: sobre placa clara desaparece,
   asi que va directo en el fondo oscuro */
.creds img.creds__claro{background:none;padding:0;height:38px;opacity:.7}
.foot__creds img.creds__claro{background:none;padding:0;height:26px}

.scroll-hint{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  width:24px;height:38px;border:1px solid var(--borde-alto);border-radius:14px;z-index:2;
}
.scroll-hint span{
  position:absolute;left:50%;top:8px;width:3px;height:7px;border-radius:2px;
  background:var(--naranja);transform:translateX(-50%);animation:wheel 1.8s infinite;
}
@keyframes wheel{0%{opacity:0;top:8px}30%{opacity:1}100%{opacity:0;top:22px}}

/* ── secciones genéricas ─────────────────────────────────────────────────── */
.sec{position:relative;padding:clamp(80px,11vw,150px) 0}
.sec__head{max-width:720px;margin-bottom:56px}
.sec__head--center{max-width:none;text-align:center;margin-bottom:44px}
.sec__head--center .eyebrow{justify-content:center}
.sec__desc{color:var(--texto-2);margin-top:18px;font-size:18px}

.split{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(36px,6vw,90px);align-items:start}
.split__l{position:sticky;top:120px}

/* nosotros */
.sec--nosotros{border-top:1px solid var(--borde)}
.pillars{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:1px;background:var(--borde)}
.pillars li{background:var(--tinta);padding:22px 24px;display:grid;gap:5px}
.pillars b{font:700 16px/1.3 Raleway;color:var(--texto)}
.pillars span{color:var(--texto-3);font-size:15px}

/* ── tarjetas de servicio ────────────────────────────────────────────────── */
.sec--servicios{background:linear-gradient(180deg,var(--tinta) 0%,var(--tinta-2) 100%)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}
.card{
  position:relative;display:block;padding:30px 28px 34px;border-radius:var(--r);
  background:var(--tinta-3);border:1px solid var(--borde);overflow:hidden;
  transition:transform .4s var(--ease),border-color .3s,background .3s;
  will-change:transform;
}
.card::before{
  content:"";position:absolute;inset:0;border-radius:var(--r);padding:1px;
  background:linear-gradient(135deg,var(--naranja),transparent 45%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .35s;pointer-events:none;
}
.card:hover{transform:translateY(-6px);background:#132540;border-color:transparent}
.card:hover::before{opacity:1}
/* Banda con el motivo generativo del servicio. Sangra hasta el borde de la
   tarjeta con margenes negativos que compensan el padding (30px 28px). */
.card__motivo{
  position:relative;height:112px;overflow:hidden;
  margin:-30px -28px 24px;
  border-bottom:1px solid var(--borde);
  background:
    radial-gradient(120% 130% at 20% 0%,rgba(48,81,122,.35) 0%,transparent 65%),
    #0b1728;
  transition:background .35s;
}
.card__motivo canvas{display:block;width:100%;height:100%}
.card:hover .card__motivo{
  background:
    radial-gradient(120% 130% at 20% 0%,rgba(234,81,49,.16) 0%,transparent 62%),
    #0d1c31;
}
.card--hero .card__motivo{height:128px}
.card h3{font-size:19px;margin-bottom:10px;line-height:1.25}
.card p{color:var(--texto-3);font-size:15px;line-height:1.6}
.card__tag{
  position:absolute;top:20px;right:20px;
  font:700 10px/1 OpenSans;letter-spacing:.1em;text-transform:uppercase;
  color:var(--naranja);border:1px solid var(--naranja);border-radius:100px;padding:5px 10px;
}
.card--hero{background:linear-gradient(160deg,#16243c 0%,var(--tinta-3) 100%)}
.card__go{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  color:var(--naranja);font:700 13px/1 OpenSans;
}
.card__go .arr{width:16px;height:10px;transition:transform .25s var(--ease)}
.card:hover .card__go .arr{transform:translateX(5px)}

/* ── sección profunda (IA) ───────────────────────────────────────────────── */
.sec--deep{overflow:hidden;background:var(--tinta-2)}
.deep__bg{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 70% at 88% 18%,rgba(234,81,49,.13) 0%,transparent 68%),
             radial-gradient(60% 60% at 8% 88%,rgba(48,81,122,.28) 0%,transparent 70%);
}
.deep{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,6vw,88px);align-items:start}
.caps{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--borde);border-radius:var(--r);overflow:hidden}
.caps li{
  background:rgba(15,29,49,.75);padding:24px 26px;display:grid;gap:6px;
  transition:background .3s,padding-left .3s var(--ease);
}
.caps li:hover{background:#152742;padding-left:34px}
.caps__n{font:700 11px/1 OpenSans;letter-spacing:.12em;color:var(--naranja)}
.caps b{font:700 17px/1.3 Raleway;color:var(--texto)}
.caps span:last-child{color:var(--texto-3);font-size:15px}

/* ── operaciones ─────────────────────────────────────────────────────────── */
.sec--ops{border-top:1px solid var(--borde);border-bottom:1px solid var(--borde)}
.ops__note{color:var(--texto-3);font-size:16px;margin-top:20px;line-height:1.6}
.grid6{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1px;background:var(--borde);margin-top:34px;border-radius:var(--r);overflow:hidden}
.g6{background:var(--tinta);padding:22px 22px 26px;display:grid;gap:5px;transition:background .3s}
.g6:hover{background:var(--tinta-3)}
.g6 b{font:700 15px/1.35 Raleway;color:var(--texto)}
.g6 span{color:var(--texto-3);font-size:14px}

/* ── página de detalle de servicio ───────────────────────────────────────── */
.sv-hero{
  position:relative;overflow:hidden;padding:150px 0 70px;
  background:radial-gradient(110% 90% at 50% 0%,#12243c 0%,var(--tinta) 65%);
  border-bottom:1px solid var(--borde);
}
.sv-hero__in{position:relative;z-index:2}
.sv-hero__h1{font-size:clamp(34px,6.4vw,72px);letter-spacing:-.03em;margin-bottom:20px;max-width:15ch}
.sv-hero__sub{color:var(--texto-2);font-size:clamp(17px,1.8vw,22px);max-width:620px;line-height:1.55}

.miga{display:flex;align-items:center;gap:10px;margin-bottom:30px;font-size:13px;color:var(--texto-3)}
.miga a{color:var(--texto-3);transition:color .2s}
.miga a:hover{color:var(--naranja)}
.miga span{opacity:.4}
.miga em{font-style:normal;color:var(--texto-2)}

.sec--sv{padding-top:clamp(56px,7vw,90px)}
.sec--sv .split{grid-template-columns:.7fr 1.3fr}
.sec--sv .lead:last-of-type{margin-bottom:30px}
/* En el detalle el motivo se muestra en grande: es la firma visual del servicio */
.sv-motivo{
  position:relative;width:100%;aspect-ratio:4/3;min-height:200px;
  border:1px solid var(--borde);border-radius:var(--r);overflow:hidden;
  margin-bottom:30px;
  background:
    radial-gradient(120% 120% at 25% 10%,rgba(48,81,122,.4) 0%,transparent 62%),
    #0b1728;
}
.sv-motivo canvas{display:block;width:100%;height:100%}
.sec--sv .caps{margin-top:14px}

.sec--otros{background:linear-gradient(180deg,var(--tinta) 0%,var(--tinta-2) 100%);border-top:1px solid var(--borde)}
.sec--otros .cards{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}

/* ── industrias / marquee ────────────────────────────────────────────────── */
.marquee{overflow:hidden;padding:14px 0;border-top:1px solid var(--borde);border-bottom:1px solid var(--borde);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee__track{display:flex;align-items:center;gap:34px;width:max-content;animation:slide 32s linear infinite}
.marquee__track span{font:700 clamp(28px,4.6vw,58px)/1 Raleway;color:#20375a;letter-spacing:-.02em;white-space:nowrap;transition:color .3s}
.marquee__track span:hover{color:var(--naranja)}
.marquee__track i{color:var(--naranja);font-size:24px;font-style:normal}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee:hover .marquee__track{animation-play-state:paused}

/* ── CTA ─────────────────────────────────────────────────────────────────── */
.sec--cta{overflow:hidden;text-align:center;background:var(--tinta-2)}
.cta__glow{
  position:absolute;left:50%;bottom:-40%;width:min(1100px,120vw);height:700px;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(234,81,49,.22) 0%,transparent 70%);
  filter:blur(30px);
}
.cta{position:relative}
.cta .eyebrow{justify-content:center}
.cta .lead{max-width:520px;margin:22px auto 34px}
.cta__row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ── footer ──────────────────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--borde);background:var(--tinta);padding:70px 0 0}
.foot__in{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:54px}
.foot__brand img{height:30px;margin-bottom:16px}
.foot__brand p{color:var(--texto-3);font-size:15px;max-width:250px}
.foot__social{display:flex;gap:18px;margin-top:20px}
.foot__social a{color:var(--texto-2);font-size:14px;transition:color .2s}
.foot__social a:hover{color:var(--naranja)}
.foot__col h4{font:700 13px/1 OpenSans;letter-spacing:.12em;text-transform:uppercase;color:var(--texto-3);margin-bottom:18px}
.foot__col a{display:block;padding:7px 0;color:var(--texto-2);font-size:15px;transition:color .2s,transform .2s var(--ease)}
.foot__col a:hover{color:var(--naranja);transform:translateX(3px)}
.foot__legal{
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  border-top:1px solid var(--borde);padding:24px 28px 30px;color:var(--texto-3);font-size:13px;
}
.foot__creds{display:flex;gap:10px;align-items:center}
.foot__creds img{height:38px;padding:6px 9px;background:#fff;border-radius:8px;opacity:.6;transition:opacity .3s}
.foot__creds img:hover{opacity:1}

/* cinta de propuesta */
.ribbon{
  position:fixed;left:0;right:0;bottom:0;z-index:300;
  background:var(--naranja);color:#fff;text-align:center;
  font:600 12px/1.5 OpenSans;letter-spacing:.03em;padding:9px 16px;
}
body{padding-bottom:38px}

/* ── motion: revelado al hacer scroll ───────────────────────────────────── */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* ── responsive ──────────────────────────────────────────────────────────── */
@media(max-width:980px){
  /* OJO con la especificidad: '.sec--sv .split' son 2 clases y le gana a
     '.split' aunque esta regla vaya despues en el archivo. Hay que repetir el
     selector completo o el detalle de servicio NO apila en celular (el texto
     se quedaba en una columna angosta, una palabra por renglon). */
  .split,.deep,
  .sec--sv .split{grid-template-columns:1fr;gap:36px}
  .split__l{position:static}
  .foot__in{grid-template-columns:1fr 1fr;gap:34px}
  .mega__in{grid-template-columns:1fr 1fr;gap:28px}
}
@media(max-width:820px){
  .nav__links{display:none}
  .nav__in .btn--sm{display:none}
  .burger{display:flex;margin-left:auto}
  .drawer{display:flex}
  /* en movil el logo es lo unico que identifica la marca en la barra:
     ahi si vale darle todo el tamano que el archivo aguanta */
  .nav__logo img,
  .nav.is-stuck .nav__logo img{height:40px}
  .nav__in{height:70px}
  .hero{min-height:auto;padding:130px 0 60px}
  .hero__foot{margin-top:44px}
  .scroll-hint{display:none}
  .cards{grid-template-columns:1fr 1fr}

  /* Areas de toque: 44px es el minimo comodo con el pulgar. Va en este corte,
     no en el de 560px, porque una tablet tambien se usa con el dedo. */
  .burger{padding:14px 12px;margin-right:-12px}
  .foot__col a{padding:12px 0}
  .foot__social{gap:8px}
  .foot__social a{padding:12px 10px;margin-left:-10px}
  .miga{font-size:13px;gap:6px}
  .miga a{padding:11px 2px}

  /* mismo criterio de interlineado que en celular: a 34px, 1.06 aprieta */
  body.xt h1,body.xt h2,body.xt h3,body.xt h4{line-height:1.14}
}
@media(max-width:560px){
  body{font-size:16px}

  /* Diez tarjetas a una columna eran diez pantallas de scroll: se perdia la
     composicion de parrilla que tiene en escritorio. A dos columnas vuelve a
     leerse como conjunto y el bloque de servicios pasa de ~3400px a ~1500px.
     La descripcion se va al detalle: en 165px de ancho no se lee bien. */
  .cards{grid-template-columns:1fr 1fr;gap:12px}
  .card{padding:0 0 16px}
  .card__motivo,
  .card--hero .card__motivo{margin:0 0 14px;height:86px;border-radius:var(--r) var(--r) 0 0}
  .card h3{font-size:15px;line-height:1.3;padding:0 14px}
  .card p{display:none}
  .card__go{display:none}
  .foot__in{grid-template-columns:1fr}
  .creds img{height:34px}
  .hero__foot{gap:16px}

  /* ── tipografía en celular ──────────────────────────────────────────────
     Dos problemas que se arreglan aquí:

     1) Los minimos de los clamp eran demasiado altos (el h1 se quedaba
        clavado en 42px aunque la pantalla midiera 390px), asi que solo
        entraban dos palabras por renglon. Ahora el minimo deja escalar.

     2) line-height 1.06 luce en un titular de 90px, pero a 30px deja
        menos de 2px de aire entre lineas: los renglones se encaman.
        En pantalla chica el interlineado tiene que abrir. */
  .shell{padding:0 20px}                       /* +16px de ancho util */

  body.xt h1,body.xt h2,body.xt h3,body.xt h4{line-height:1.16;letter-spacing:-.015em}
  .hero__h1{font-size:clamp(26px,8.05vw,104px);line-height:1.14;letter-spacing:-.025em}
  .h2{font-size:clamp(25px,7.2vw,54px);line-height:1.18}
  .h2--xl{font-size:clamp(29px,8.4vw,76px);line-height:1.13}
  .sv-hero__h1{
    font-size:clamp(27px,7.8vw,72px);line-height:1.16;letter-spacing:-.018em;
    max-width:none;                            /* el 15ch apretaba de mas */
  }
  .sv-hero__sub{font-size:17px;line-height:1.6}
  .hero__sub{line-height:1.65}
  .sec__desc{font-size:16px}
  /* El rotulo es largo y a 12px con .16em de espaciado partia en dos renglones.
     Se corrige aflojando el espaciado y acortando la linea decorativa, NO
     encogiendo la letra: a 10.5px se leia mal. */
  .eyebrow{font-size:11.5px;letter-spacing:.05em;margin-bottom:16px;gap:7px}
  .eyebrow::before{width:16px}
  .lead--lg{font-size:17px;line-height:1.72}

  /* los bloques de dos columnas ya van apilados: que no queden tan juntos */
  .caps li,.g6,.pillars li{padding:18px 18px 20px}
  .card{padding:26px 22px 30px}
  .card__motivo{margin:-26px -22px 20px;height:100px}
  .card--hero .card__motivo{height:110px}

}

/* ── accesibilidad: sin animación si el sistema lo pide ─────────────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .hero__canvas{display:none}
}


/* ==========================================================================
   Paginas internas todavia sin portar.
   Conservan usr.css y su fondo claro. Solo reciben el nav y el pie nuevos.
   El nav no puede ir transparente sobre fondo claro (texto blanco invisible),
   asi que aqui va siempre en su estado opaco.
   ========================================================================== */
body:not(.xt){padding-top:78px}
body:not(.xt) .nav{
  background:rgba(6,12,22,.96);backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--borde);padding:2px 0;
}
body:not(.xt) .nav__logo img{height:30px}
body:not(.xt) .foot{margin-top:60px}
@media(max-width:820px){
  body:not(.xt){padding-top:70px}
}

/* ==========================================================================
   Contenido que viene del CMS
   Los textos de la base traen su propio HTML (h2, p con style inline, tablas).
   Aqui se le da el aspecto del diseno nuevo sin tocar lo que el CMS guarda,
   para que Xtatera siga editando desde el panel como siempre.
   ========================================================================== */
body.xt .xt-cms h2{
  font-size:clamp(22px,2.2vw,28px);line-height:1.25;margin-bottom:14px;
  color:var(--texto);
}
body.xt .xt-cms h2 span{color:var(--naranja-alto)}
body.xt .xt-cms h3{font-size:19px;margin:22px 0 8px}
body.xt .xt-cms p{
  color:var(--texto-2);font-size:17px;line-height:1.7;margin-bottom:16px;
  text-align:left !important;   /* el CMS mete text-align:justify inline */
}
body.xt .xt-cms a{color:var(--naranja-alto);text-decoration:underline}
body.xt .xt-cms img{border-radius:10px;margin:16px 0}
body.xt .xt-cms ul,body.xt .xt-cms ol{color:var(--texto-2);padding-left:22px;margin-bottom:16px}
body.xt .xt-cms li{margin-bottom:7px}
body.xt .xt-cms table{width:100% !important;border-collapse:collapse}
body.xt .xt-cms table td{padding:10px 12px;vertical-align:top;color:var(--texto-2)}

/* ==========================================================================
   Ajustes para las internas todavia sin portar.
   Su tipografia sale de usr.css, con interlineado pensado para escritorio.
   En celular aprieta, asi que aqui se le da aire sin tocar usr.css.
   ========================================================================== */
@media(max-width:820px){
  body:not(.xt) .titulo_principal h1,
  body:not(.xt) .titulo_principal h3,
  body:not(.xt) h2,
  body:not(.xt) h3{line-height:1.2 !important}
}
/* el logo tambien es un enlace: necesita area de toque */
.nav__logo{display:inline-flex;align-items:center;padding:6px 0}
@media(max-width:820px){
  .nav__logo{padding:11px 0}
}

/* ==========================================================================
   Bloques de contenido de las paginas de servicio
   Cada servicio trae de 1 a 4 bloques desde la base. El primero va junto al
   motivo; los demas a todo lo ancho, alternando fondo para separarlos.
   ========================================================================== */
body.xt .sec--sv-bloque{padding:clamp(56px,7vw,96px) 0;border-top:1px solid var(--borde)}
body.xt .sec--sv-alt{background:var(--tinta-2)}
body.xt .xt-cms--ancho{max-width:900px;margin:0 auto}
body.xt .xt-cms--ancho h2{font-size:clamp(26px,3.2vw,40px);margin-bottom:20px}
body.xt .xt-cms--ancho h3{font-size:clamp(20px,2.2vw,26px)}

/* Las tablas del CMS se usan como maquetado: en celular se apilan para que
   no obliguen a hacer scroll horizontal. */
body.xt .xt-cms table{width:100% !important;max-width:100%}
body.xt .xt-cms table img{max-width:100%;height:auto}
@media(max-width:760px){
  body.xt .xt-cms table,
  body.xt .xt-cms tbody,
  body.xt .xt-cms tr,
  body.xt .xt-cms td{display:block;width:100% !important;height:auto !important}
  body.xt .xt-cms td{padding:8px 0 !important}
}
/* el CMS mete anchos y colores en linea que chocan con el fondo oscuro */
body.xt .xt-cms [style*="color"]{color:inherit !important}
body.xt .xt-cms strong{color:var(--texto)}

/* ==========================================================================
   Contacto
   ========================================================================== */
body.xt .split--contacto{grid-template-columns:1fr 1fr;align-items:start}
body.xt .xt-datos{display:grid;gap:1px;background:var(--borde);margin-top:30px;border-radius:var(--r);overflow:hidden}
body.xt .xt-dato{
  display:grid;gap:3px;background:var(--tinta-3);padding:18px 22px;
  transition:background .3s,padding-left .3s var(--ease);
}
body.xt .xt-dato:hover{background:#152742;padding-left:28px}
body.xt .xt-dato span{font:600 11px/1 OpenSans;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3)}
body.xt .xt-dato b{font:700 16px/1.3 Raleway;color:var(--naranja-alto)}

body.xt .xt-form{
  background:var(--tinta-3);border:1px solid var(--borde);border-radius:var(--r);
  padding:clamp(22px,3vw,34px);
}
body.xt .xt-form__t{font-size:22px;margin-bottom:20px}
/* El formulario lo inyecta HubSpot: se le da el aspecto del sitio sin tocar
   su marcado, porque viene de un servicio externo. */
body.xt .xt-form input[type=text],
body.xt .xt-form input[type=email],
body.xt .xt-form input[type=tel],
body.xt .xt-form select,
body.xt .xt-form textarea{
  width:100% !important;background:#0a1728 !important;color:var(--texto) !important;
  border:1px solid var(--borde-alto) !important;border-radius:9px !important;
  padding:12px 14px !important;font:400 15px/1.5 OpenSans !important;margin-bottom:4px;
}
body.xt .xt-form input:focus,body.xt .xt-form textarea:focus,body.xt .xt-form select:focus{
  outline:none !important;border-color:var(--naranja) !important;
}
body.xt .xt-form label{color:var(--texto-2) !important;font:600 13px/1.6 OpenSans !important}
body.xt .xt-form .hs-form-field{margin-bottom:16px}
body.xt .xt-form input[type=submit]{
  background:var(--naranja) !important;color:#fff !important;border:0 !important;
  border-radius:100px !important;padding:15px 30px !important;cursor:pointer;
  font:700 14px/1 OpenSans !important;width:auto !important;
}
body.xt .xt-form input[type=submit]:hover{background:var(--naranja-alto) !important}
body.xt .xt-form .hs-error-msg,body.xt .xt-form .hs-error-msgs{color:#ff8a6a !important;font-size:13px}
body.xt .xt-form a{color:var(--naranja-alto)}

/* las opciones por servicio que llegan desde cada pagina de servicio */
body.xt .xt-opciones h2,body.xt .xt-opciones h3{color:var(--texto)}
body.xt .xt-opciones a{color:var(--naranja-alto)}

@media(max-width:980px){
  body.xt .split--contacto{grid-template-columns:1fr}
}