/* =========================================================
   XilioSoft — sistema visual
   Blanco y negro de alto contraste. El movimiento es
   estructural: revela jerarquía, no decora.
   ========================================================= */

:root{
  --paper:#FFFFFF;
  --ink:#0B0B0B;
  --ink-soft:#171717;
  --g700:#3A3A3A;
  --g500:#6E6E6E;
  --g400:#9A9A9A;
  --g200:#E4E4E4;
  --g100:#F3F3F3;

  --line:1px solid var(--g200);
  --line-strong:2px solid var(--ink);
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-out:cubic-bezier(.22,.61,.36,1);

  --gut:clamp(20px,5vw,64px);
  --maxw:1240px;
  --sec:clamp(64px,9vw,128px);

  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body.xs{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* Transiciones nativas entre páginas. Los navegadores que no
   la soportan simplemente navegan como siempre. */
@view-transition{ navigation:auto; }
@media (prefers-reduced-motion:reduce){ @view-transition{ navigation:none; } }

::selection{background:var(--ink);color:var(--paper)}

/* ---------------- layout ---------------- */
.xs-shell{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.xs-section{padding-block:var(--sec);position:relative}
.xs-section--flush{padding-block:0}
.xs-dark,.is-style-xs-dark{background:var(--ink);color:var(--paper)}
.xs-dark h1,.xs-dark h2,.xs-dark h3,.is-style-xs-dark h2{color:var(--paper)}
.xs-tint{background:var(--g100)}

.xs-grid{display:grid;gap:clamp(20px,3vw,40px)}
.xs-grid--2{grid-template-columns:repeat(2,1fr)}
.xs-grid--3{grid-template-columns:repeat(3,1fr)}
.xs-grid--4{grid-template-columns:repeat(4,1fr)}
.xs-split{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(28px,5vw,72px);align-items:end}

/* ---------------- tipografía ---------------- */
.xs-eyebrow,.is-style-xs-eyebrow{
  font-size:.6875rem;letter-spacing:.22em;text-transform:uppercase;
  font-weight:500;color:var(--g400);margin:0 0 1.25rem;
  display:flex;align-items:center;gap:.75rem;
}
.xs-eyebrow::before{content:"";width:22px;height:1px;background:currentColor;flex:none}
.xs-dark .xs-eyebrow{color:var(--g400)}

.xs-display{
  font-size:clamp(2.25rem,4.7vw,4.05rem);
  line-height:1.0;letter-spacing:-.042em;font-weight:700;margin:0;
  text-wrap:balance;
}
.xs-h2{font-size:clamp(1.9rem,4vw,3.1rem);line-height:1.06;letter-spacing:-.035em;font-weight:700;margin:0;text-wrap:balance}
.xs-h3{font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.25;letter-spacing:-.02em;font-weight:700;margin:0}
.xs-lead{font-size:clamp(1.0625rem,1.5vw,1.25rem);line-height:1.62;color:var(--g700);font-weight:300;max-width:62ch;margin:0}
.xs-dark .xs-lead{color:#B9B9B9}
.xs-body{font-size:.9375rem;line-height:1.62;color:var(--g500);font-weight:300;margin:0}
.xs-dark .xs-body{color:#A8A8A8}
.xs-mono{font-family:var(--mono);font-size:.75rem;letter-spacing:.04em;color:var(--g400)}

/* ---------------- reglas y marcos ---------------- */
.xs-rule{height:1px;background:var(--g200);border:0;margin:0}
.xs-rule--strong{height:2px;background:var(--ink)}
.xs-dark .xs-rule{background:#2A2A2A}
.xs-dark .xs-rule--strong{background:var(--paper)}

/* Línea que se dibuja al entrar en pantalla. */
.xs-rule[data-draw]{transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease)}
.xs-rule[data-draw].is-in{transform:scaleX(1)}

/* ---------------- botones ---------------- */
.xs-btn{
  --b:var(--ink); --f:var(--paper);
  position:relative;display:inline-flex;align-items:center;gap:.6rem;
  background:var(--b);color:var(--f);
  font-size:.8125rem;font-weight:500;letter-spacing:.03em;
  padding:1rem 1.75rem;border:1.5px solid var(--b);text-decoration:none;
  overflow:hidden;isolation:isolate;cursor:pointer;
  transition:color .45s var(--ease),border-color .45s var(--ease);
}
.xs-btn::after{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--f);
  transform:translateY(101%);transition:transform .5s var(--ease);
}
.xs-btn:hover{color:var(--b)}
.xs-btn:hover::after{transform:translateY(0)}
.xs-btn .xs-arrow{transition:transform .45s var(--ease)}
.xs-btn:hover .xs-arrow{transform:translateX(4px)}

.xs-btn--ghost,.is-style-xs-ghost .wp-block-button__link{
  background:transparent;color:var(--ink);border-color:var(--ink);
}
.xs-btn--ghost::after{background:var(--ink)}
.xs-btn--ghost:hover{color:var(--paper)}
.xs-dark .xs-btn{--b:var(--paper);--f:var(--ink)}
.xs-dark .xs-btn--ghost{background:transparent;color:var(--paper);border-color:var(--paper)}
.xs-dark .xs-btn--ghost::after{background:var(--paper)}
.xs-dark .xs-btn--ghost:hover{color:var(--ink)}

.xs-link{
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;color:inherit;
  font-size:.875rem;font-weight:500;padding-bottom:2px;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1.5px;background-repeat:no-repeat;background-position:left 100%;
  transition:background-size .5s var(--ease);
}
.xs-link:hover{background-size:100% 1.5px}
.xs-link .xs-arrow{transition:transform .4s var(--ease)}
.xs-link:hover .xs-arrow{transform:translateX(4px)}

/* ---------------- barra de progreso de lectura ---------------- */
.xs-progress{
  position:fixed;inset-block-start:0;inset-inline:0;height:2px;z-index:120;
  background:var(--ink);transform-origin:0 50%;transform:scaleX(0);
  will-change:transform;
}

/* ---------------- cabecera ---------------- */
.xs-header{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease),background .4s var(--ease);
}
.xs-header.is-stuck{border-bottom-color:var(--g200)}
.xs-header__in{display:flex;align-items:center;justify-content:space-between;gap:2rem;
  padding-block:clamp(14px,1.6vw,20px);transition:padding .4s var(--ease)}
.xs-header.is-stuck .xs-header__in{padding-block:11px}
.xs-logo{font-size:1.15rem;font-weight:700;letter-spacing:-.045em;text-decoration:none;color:var(--ink);white-space:nowrap}
.xs-logo span{color:var(--g400);font-weight:300}
.xs-nav{display:flex;align-items:center;gap:clamp(16px,2.2vw,32px)}
.xs-nav a{
  font-size:.875rem;font-weight:400;color:var(--g700);text-decoration:none;position:relative;padding-block:4px;
}
.xs-nav a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1.5px;background:var(--ink);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease);
}
.xs-nav a:hover{color:var(--ink)}
.xs-nav a:hover::after{transform:scaleX(1);transform-origin:left}
.xs-burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.xs-burger span{display:block;width:22px;height:1.5px;background:var(--ink);transition:transform .4s var(--ease),opacity .3s}
.xs-burger span+span{margin-top:6px}

/* ---------------- hero ---------------- */
.xs-hero{padding-block:clamp(56px,8.5vw,112px) clamp(44px,6vw,80px);position:relative;overflow:hidden}
.xs-hero__grid{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(90deg,var(--g200) 1px,transparent 1px);
  background-size:calc(100% / 6) 100%;
  opacity:0;transition:opacity 1.6s var(--ease);
  mask-image:linear-gradient(to bottom,#000 0%,transparent 92%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,transparent 92%);
}
body.is-ready .xs-hero__grid{opacity:.65}
.xs-hero__in{position:relative;z-index:1}

/* Revelado por líneas: cada línea sube desde su propia máscara. */
.xs-reveal-line{display:block;overflow:hidden}
.xs-reveal-line>span{
  display:block;transform:translateY(105%);
  transition:transform 1s var(--ease);
}
body.is-ready .xs-reveal-line>span{transform:translateY(0)}
body.is-ready .xs-reveal-line:nth-child(2)>span{transition-delay:.08s}
body.is-ready .xs-reveal-line:nth-child(3)>span{transition-delay:.16s}
body.is-ready .xs-reveal-line:nth-child(4)>span{transition-delay:.24s}

.xs-hero__aside{display:flex;flex-direction:column;gap:1.75rem}
.xs-hero__cta{display:flex;gap:.75rem;flex-wrap:wrap}

/* ---------------- métricas / contadores ---------------- */
.xs-metrics{border-top:var(--line-strong);display:grid;grid-template-columns:repeat(4,1fr)}
.xs-metric{padding:clamp(20px,2.5vw,32px) clamp(16px,2vw,28px) clamp(20px,2.5vw,32px) 0;border-right:var(--line)}
.xs-metric:last-child{border-right:0}
.xs-metric__n{font-size:clamp(1.6rem,3.2vw,2.4rem);font-weight:700;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.xs-metric__l{font-size:.75rem;color:var(--g500);margin-top:.6rem;line-height:1.45}
.xs-dark .xs-metrics{border-top-color:var(--paper)}
.xs-dark .xs-metric{border-right-color:#2A2A2A}
.xs-dark .xs-metric__l{color:var(--g400)}

/* ---------------- marquesina de clientes ---------------- */
.xs-marquee{border-block:var(--line);padding-block:1.15rem;overflow:hidden;position:relative}
.xs-marquee::before,.xs-marquee::after{
  content:"";position:absolute;top:0;bottom:0;width:12%;z-index:2;pointer-events:none;
}
.xs-marquee::before{left:0;background:linear-gradient(90deg,var(--paper),transparent)}
.xs-marquee::after{right:0;background:linear-gradient(270deg,var(--paper),transparent)}
.xs-marquee__track{display:flex;width:max-content;gap:clamp(32px,5vw,72px);
  animation:xs-slide 38s linear infinite;will-change:transform}
.xs-marquee:hover .xs-marquee__track{animation-play-state:paused}
.xs-marquee__item{font-size:.8125rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--g400);white-space:nowrap;transition:color .3s}
.xs-marquee__item:hover{color:var(--ink)}
@keyframes xs-slide{to{transform:translateX(-50%)}}

/* ---------------- encabezado de sección ---------------- */
.xs-sechead{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:end;margin-bottom:clamp(28px,4vw,52px)}
.xs-sechead__sub{max-width:52ch;margin-top:1rem}

/* ---------------- filas de servicio ---------------- */
.xs-rows{border-top:var(--line-strong)}
.xs-row{
  display:grid;grid-template-columns:64px 1.05fr 1.35fr auto;gap:clamp(14px,2.5vw,32px);
  align-items:start;padding-block:clamp(20px,2.6vw,30px);
  border-bottom:var(--line);text-decoration:none;color:inherit;position:relative;
  transition:padding-inline .5s var(--ease);
}
.xs-row::before{
  content:"";position:absolute;inset:0;background:var(--g100);z-index:-1;
  transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease);
}
.xs-row:hover{padding-inline:clamp(10px,1.6vw,22px)}
.xs-row:hover::before{transform:scaleY(1);transform-origin:top}
.xs-row__n{font-family:var(--mono);font-size:.75rem;color:var(--g400);padding-top:.35rem}
.xs-row__t{font-size:clamp(1.15rem,1.9vw,1.5rem);font-weight:700;letter-spacing:-.025em;line-height:1.2}
.xs-row__d{font-size:.9375rem;color:var(--g500);line-height:1.6}
.xs-row__go{align-self:center;font-size:1.1rem;color:var(--g400);transition:transform .5s var(--ease),color .3s}
.xs-row:hover .xs-row__go{transform:translateX(6px);color:var(--ink)}

/* ---------------- tarjetas de producto ---------------- */
.xs-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,28px)}
.xs-card{
  border:1.5px solid var(--ink);padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;
  gap:1rem;position:relative;overflow:hidden;text-decoration:none;color:inherit;isolation:isolate;
  transition:color .5s var(--ease);
}
.xs-card::after{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
  transform:translateY(101%);transition:transform .6s var(--ease);
}
.xs-card:hover{color:var(--paper)}
.xs-card:hover::after{transform:translateY(0)}
.xs-card:hover .xs-card__tag{background:var(--paper);color:var(--ink)}
.xs-card:hover .xs-body,.xs-card:hover .xs-mono{color:#B9B9B9}
.xs-card__tag{
  align-self:flex-start;font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;
  background:var(--ink);color:var(--paper);padding:.3rem .6rem;transition:background .5s var(--ease),color .5s var(--ease);
}
.xs-card__t{font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:700;letter-spacing:-.03em;line-height:1.1}
.xs-card__list{list-style:none;margin:.25rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.xs-card__list li{font-size:.75rem;border:1px solid currentColor;padding:.25rem .6rem;opacity:.65}

/* ---------------- proceso ---------------- */
.xs-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:var(--line-strong)}
.xs-step{padding:clamp(22px,3vw,36px) clamp(18px,2.4vw,32px) 0 0;border-right:var(--line)}
.xs-step:last-child{border-right:0}
.xs-step__n{font-family:var(--mono);font-size:.75rem;color:var(--g400);margin-bottom:.9rem}
.xs-dark .xs-step{border-right-color:#2A2A2A}
.xs-dark .xs-steps{border-top-color:var(--paper)}

/* ---------------- casos ---------------- */
.xs-cases{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.xs-case{border:var(--line);text-decoration:none;color:inherit;display:block;overflow:hidden;transition:border-color .4s}
.xs-case:hover{border-color:var(--ink)}
.xs-case__media{aspect-ratio:4/3;background:var(--g100);position:relative;overflow:hidden}
.xs-case__media::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,#EDEDED 0 10px,#F8F8F8 10px 20px);
  transition:transform .8s var(--ease);
}
.xs-case:hover .xs-case__media::after{transform:scale(1.06)}
.xs-case__b{padding:1.1rem 1.25rem 1.35rem}
.xs-case__t{font-size:1rem;font-weight:700;letter-spacing:-.02em}
.xs-case__d{font-size:.8125rem;color:var(--g500);margin-top:.25rem}

/* ---------------- cita ---------------- */
.xs-quote{font-size:clamp(1.4rem,3vw,2.2rem);line-height:1.28;letter-spacing:-.028em;font-weight:500;max-width:24ch;margin:0}
.xs-quote__a{font-size:.8125rem;color:var(--g400);margin-top:1.25rem;letter-spacing:.04em}

/* ---------------- cierre ---------------- */
.xs-cta{text-align:center}
.xs-cta .xs-h2{margin-inline:auto;max-width:18ch}
.xs-cta .xs-lead{margin-inline:auto;margin-top:1.25rem;text-align:center}
.xs-cta__acts{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;margin-top:2.25rem}

/* ---------------- pie ---------------- */
.xs-footer{background:var(--ink);color:var(--g400);padding-block:clamp(48px,6vw,80px) clamp(24px,3vw,36px)}
.xs-footer a{color:var(--g400);text-decoration:none;transition:color .3s}
.xs-footer a:hover{color:var(--paper)}
.xs-footer__top{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:clamp(24px,4vw,48px)}
.xs-footer__t{font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:#5E5E5E;margin-bottom:1rem}
.xs-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem;font-size:.875rem}
.xs-footer__bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-top:clamp(36px,5vw,64px);padding-top:1.5rem;border-top:1px solid #262626;font-size:.75rem}
.xs-footer .xs-logo{color:var(--paper);font-size:1.4rem}

/* =========================================================
   Puentes con los bloques del núcleo de WordPress
   Para que lo que se edita en el editor se vea igual que
   lo que se diseñó aquí.
   ========================================================= */
.wp-block-group{margin-block:0}

/* Botones nativos con la apariencia de .xs-btn */
.wp-block-buttons{display:flex;gap:.75rem;flex-wrap:wrap;margin:0}
.wp-block-button__link{
  --b:var(--ink); --f:var(--paper);
  position:relative;display:inline-flex;align-items:center;gap:.6rem;
  background:var(--b);color:var(--f);border:1.5px solid var(--b);border-radius:0;
  font-size:.8125rem;font-weight:500;letter-spacing:.03em;padding:1rem 1.75rem;
  text-decoration:none;overflow:hidden;isolation:isolate;
  transition:color .45s var(--ease),border-color .45s var(--ease);
}
.wp-block-button__link::after{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--f);
  transform:translateY(101%);transition:transform .5s var(--ease);
}
.wp-block-button__link:hover{color:var(--b)}
.wp-block-button__link:hover::after{transform:translateY(0)}
.is-style-xs-ghost .wp-block-button__link{background:transparent;color:var(--ink);border-color:var(--ink)}
.is-style-xs-ghost .wp-block-button__link::after{background:var(--ink)}
.is-style-xs-ghost .wp-block-button__link:hover{color:var(--paper)}
.xs-dark .wp-block-button__link{--b:var(--paper);--f:var(--ink)}
.xs-dark .is-style-xs-ghost .wp-block-button__link{background:transparent;color:var(--paper);border-color:var(--paper)}
.xs-dark .is-style-xs-ghost .wp-block-button__link::after{background:var(--paper)}
.xs-dark .is-style-xs-ghost .wp-block-button__link:hover{color:var(--ink)}

/* Navegación nativa con el subrayado de la casa */
.wp-block-navigation{gap:clamp(16px,2.2vw,32px)}
.wp-block-navigation .wp-block-navigation-item__content{
  font-size:.875rem;font-weight:400;color:var(--g700);text-decoration:none;
  position:relative;padding-block:4px;
}
.wp-block-navigation .wp-block-navigation-item__content::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1.5px;background:var(--ink);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease);
}
.wp-block-navigation .wp-block-navigation-item__content:hover{color:var(--ink)}
.wp-block-navigation .wp-block-navigation-item__content:hover::after{transform:scaleX(1);transform-origin:left}
.wp-block-navigation .wp-block-navigation__submenu-container{
  border:1px solid var(--g200);background:var(--paper);padding:.35rem 0;box-shadow:0 18px 40px -24px rgba(0,0,0,.35);
}

/* Título del sitio y logo */
.wp-block-site-title{font-size:1.15rem;font-weight:700;letter-spacing:-.045em;margin:0}
.wp-block-site-title a{text-decoration:none;color:var(--ink)}
.wp-block-site-logo img{height:34px;width:auto}

/* Contenido editorial de páginas y entradas */
.xs-prose{max-width:74ch;margin-inline:auto}
.xs-prose h2{margin-top:2.5em;margin-bottom:.6em}
.xs-prose h3{margin-top:2em;margin-bottom:.5em}
.xs-prose p{margin-block:0 1.15em;color:var(--g700);font-size:1.0625rem;line-height:1.7}
.xs-prose ul,.xs-prose ol{color:var(--g700);padding-left:1.2em;margin-block:0 1.15em}
.xs-prose li{margin-bottom:.5em}
.xs-prose img{width:100%;height:auto}
.xs-prose blockquote{border-left:2px solid var(--ink);padding-left:1.25rem;margin-inline:0;font-size:1.15rem}

/* Listado de entradas */
.xs-postcard{border-top:var(--line);padding-block:clamp(20px,2.6vw,32px)}
.xs-postcard .wp-block-post-title{font-size:clamp(1.15rem,2vw,1.6rem);letter-spacing:-.025em;margin:.35rem 0 .5rem}
.xs-postcard .wp-block-post-title a{text-decoration:none}
.xs-postcard .wp-block-post-excerpt__excerpt{color:var(--g500);font-size:.9375rem}

/* =========================================================
   Revelado al hacer scroll
   Con soporte nativo donde exista; con IntersectionObserver
   en el resto. Nunca deja contenido invisible si falla el JS.
   ========================================================= */
[data-anim]{opacity:1}

.js [data-anim]{opacity:0;transform:translateY(22px);
  transition:opacity .85s var(--ease-out),transform .85s var(--ease)}
.js [data-anim].is-in{opacity:1;transform:none}
.js [data-anim][data-delay="1"]{transition-delay:.07s}
.js [data-anim][data-delay="2"]{transition-delay:.14s}
.js [data-anim][data-delay="3"]{transition-delay:.21s}
.js [data-anim][data-delay="4"]{transition-delay:.28s}
.js [data-anim][data-delay="5"]{transition-delay:.35s}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .js.xs-native [data-anim]{
      opacity:1;transform:none;transition:none;
      animation:xs-rise linear both;
      animation-timeline:view();
      animation-range:entry 5% cover 26%;
    }
  }
}
@keyframes xs-rise{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:none}
}

@media (prefers-reduced-motion:reduce){
  .js [data-anim]{opacity:1;transform:none;transition:none}
  .xs-marquee__track{animation:none}
  .xs-reveal-line>span{transform:none}
  .xs-hero__grid{opacity:.65;transition:none}
  .xs-rule[data-draw]{transform:none}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* =========================================================
   Adaptación a pantallas pequeñas
   ========================================================= */
@media (max-width:1024px){
  .xs-cases,.xs-steps,.xs-grid--4{grid-template-columns:repeat(2,1fr)}
  .xs-metrics{grid-template-columns:repeat(2,1fr)}
  .xs-metric:nth-child(2){border-right:0}
  .xs-metric:nth-child(-n+2){border-bottom:var(--line)}
  .xs-footer__top{grid-template-columns:1fr 1fr}
}

@media (max-width:860px){
  /* Sin backdrop-filter aquí: crea un bloque contenedor y rompe el menú fijo. */
  .xs-header{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--paper)}
  .xs-nav{
    position:fixed;inset:0;background:var(--paper);flex-direction:column;
    justify-content:center;gap:1.5rem;transform:translateY(-100%);
    transition:transform .55s var(--ease);z-index:99;
  }
  .xs-nav.is-open{transform:translateY(0)}
  .xs-nav a{font-size:1.5rem;font-weight:500}
  .xs-burger{display:block;position:relative;z-index:101}
  .xs-burger.is-open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .xs-burger.is-open span:nth-child(2){opacity:0}
  .xs-burger.is-open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
  .xs-header .xs-header__cta{display:none}

  .xs-split,.xs-cards,.xs-grid--2,.xs-grid--3,.xs-cases,.xs-steps,.xs-grid--4{grid-template-columns:1fr}
  .xs-sechead{grid-template-columns:1fr}
  .xs-step{border-right:0;border-bottom:var(--line);padding-right:0;padding-bottom:24px}
  .xs-step:last-child{border-bottom:0}
  .xs-row{grid-template-columns:40px 1fr;row-gap:.5rem}
  .xs-row__d{grid-column:2}
  .xs-row__go{display:none}
  .xs-footer__top{grid-template-columns:1fr}
  .xs-hero__grid{background-size:calc(100% / 3) 100%}
}

@media (max-width:520px){
  .xs-metrics{grid-template-columns:1fr}
  .xs-metric{border-right:0;border-bottom:var(--line)}
  .xs-metric:last-child{border-bottom:0}
}

/* ---------------- accesibilidad ---------------- */
:where(a,button,input,textarea,summary):focus-visible{
  outline:2px solid var(--ink);outline-offset:3px;border-radius:1px;
}
.xs-dark :where(a,button):focus-visible{outline-color:var(--paper)}
.xs-skip{
  position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);
  padding:.75rem 1.25rem;z-index:200;font-size:.875rem;
}
.xs-skip:focus{left:0}


/* =========================================================
   PÁGINAS INTERNAS · componentes
   ========================================================= */

/* ---- encabezado de página ---- */
.xs-pagehero{padding-block:clamp(52px,7vw,96px) clamp(32px,4vw,56px);border-bottom:var(--line)}
.xs-pagehero__in{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,72px);align-items:end}
.xs-pagehero h1{font-size:clamp(2.1rem,4.4vw,3.7rem);line-height:1.02;letter-spacing:-.04em;font-weight:700;margin:0;text-wrap:balance}
.xs-pagehero .xs-lead{margin-top:0}
.xs-pagehero__meta{display:flex;gap:clamp(18px,3vw,40px);flex-wrap:wrap;margin-top:clamp(24px,3vw,40px);
  padding-top:clamp(18px,2.4vw,26px);border-top:var(--line)}
.xs-pagehero__meta div{min-width:110px}
.xs-pagehero__meta .k{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--g400);font-weight:500}
.xs-pagehero__meta .v{font-size:.9375rem;font-weight:500;margin-top:.35rem}

/* ---- media: imagen o video ---- */
.xs-media{position:relative;overflow:hidden;background:var(--g100);display:block;margin:0}
.xs-media img,.xs-media video{display:block;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.04);transition:filter .7s var(--ease),transform 1s var(--ease)}
.xs-media--color img,.xs-media--color video{filter:none}
.xs-media:hover img,.xs-media:hover video{transform:scale(1.03)}
.xs-media--16x9{aspect-ratio:16/9}
.xs-media--4x3{aspect-ratio:4/3}
.xs-media--1x1{aspect-ratio:1/1}
.xs-media--21x9{aspect-ratio:21/9}
.xs-media__cap{font-size:.8125rem;color:var(--g500);margin-top:.75rem;line-height:1.5}
.xs-media__cap b{color:var(--ink);font-weight:600}

/* Marco de navegador para capturas de producto */
.xs-frame{border:1.5px solid var(--ink);background:var(--paper);overflow:hidden}
.xs-frame__bar{background:var(--ink);padding:.55rem .8rem;display:flex;align-items:center;gap:.4rem}
.xs-frame__dot{width:7px;height:7px;border-radius:50%;background:#5A5A5A;flex:none}
.xs-frame__url{flex:1;margin-left:.5rem;background:#1E1E1E;color:#9A9A9A;font-family:var(--mono);
  font-size:.625rem;padding:.2rem .6rem;border-radius:2px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.xs-frame .xs-media{aspect-ratio:16/10}

/* Marco de teléfono para capturas de app */
.xs-phone{border:1.5px solid var(--ink);border-radius:22px;padding:8px;background:var(--paper);max-width:280px;margin-inline:auto}
.xs-phone .xs-media{aspect-ratio:9/19.5;border-radius:15px}
.xs-phone .xs-media img,.xs-phone .xs-media video{filter:none}

/* Video en bucle: se reproduce solo cuando está a la vista */
.xs-video{position:relative}
.xs-video video{width:100%;display:block}
.xs-video__badge{position:absolute;left:12px;bottom:12px;z-index:2;background:rgba(11,11,11,.82);
  color:#fff;font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;padding:.3rem .6rem;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.xs-video__ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--g100);color:var(--g400);font-family:var(--mono);font-size:.75rem;text-align:center;padding:1rem}

/* Marcador para cuando aún no hay material real */
.xs-slot{border:1.5px dashed var(--g300);background:
  repeating-linear-gradient(45deg,#FAFAFA 0 10px,#F2F2F2 10px 20px);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:1.5rem}
.xs-slot span{font-family:var(--mono);font-size:.6875rem;color:var(--g400);line-height:1.6;max-width:34ch}
.xs-dark .xs-slot{border-color:#333;background:repeating-linear-gradient(45deg,#131313 0 10px,#0F0F0F 10px 20px)}
.xs-dark .xs-slot span{color:#6A6A6A}

/* ---- rejilla de prestaciones ---- */
.xs-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:var(--line-strong)}
.xs-feat{padding:clamp(20px,2.6vw,30px) clamp(18px,2.2vw,30px) clamp(20px,2.6vw,30px) 0;
  border-right:var(--line);border-bottom:var(--line)}
.xs-feat:nth-child(3n){border-right:0}
.xs-feat__n{font-family:var(--mono);font-size:.6875rem;color:var(--g400);margin-bottom:.7rem}
.xs-feat h3{font-size:1rem;font-weight:700;letter-spacing:-.02em;line-height:1.3;margin:0 0 .45rem}
.xs-dark .xs-feats{border-top-color:var(--paper)}
.xs-dark .xs-feat{border-right-color:#2A2A2A;border-bottom-color:#2A2A2A}

/* ---- tabla de especificaciones ---- */
.xs-spec{width:100%;border-collapse:collapse}
.xs-spec th{text-align:left;font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--g400);font-weight:500;padding:0 1.5rem .8rem 0;border-bottom:var(--line-strong)}
.xs-spec td{padding:.95rem 1.5rem .95rem 0;border-bottom:var(--line);font-size:.9375rem;
  color:var(--g500);vertical-align:top;line-height:1.55;font-weight:300}
.xs-spec td:first-child{font-weight:600;color:var(--ink);width:34%}
.xs-spec tr:last-child td{border-bottom:0}
.xs-dark .xs-spec td{border-bottom-color:#2A2A2A;color:#A8A8A8}
.xs-dark .xs-spec td:first-child{color:var(--paper)}
.xs-dark .xs-spec th{border-bottom-color:var(--paper)}

/* ---- acordeón de preguntas ---- */
.xs-faq{border-top:var(--line-strong)}
.xs-faq details{border-bottom:var(--line)}
.xs-faq summary{
  list-style:none;cursor:pointer;padding:clamp(16px,2.2vw,24px) 2.5rem clamp(16px,2.2vw,24px) 0;
  font-size:clamp(1rem,1.5vw,1.15rem);font-weight:600;letter-spacing:-.015em;position:relative;
}
.xs-faq summary::-webkit-details-marker{display:none}
.xs-faq summary::after{
  content:"";position:absolute;right:4px;top:50%;width:12px;height:1.5px;background:var(--ink);
  transition:transform .4s var(--ease);
}
.xs-faq summary::before{
  content:"";position:absolute;right:4px;top:50%;width:12px;height:1.5px;background:var(--ink);
  transform:rotate(90deg);transition:transform .4s var(--ease);
}
.xs-faq details[open] summary::before{transform:rotate(0deg)}
.xs-faq .xs-faq__a{padding:0 3rem clamp(18px,2.4vw,26px) 0;color:var(--g500);font-size:.9375rem;line-height:1.65;max-width:78ch}

/* ---- bloque de precio ---- */
.xs-price{border:1.5px solid var(--ink);padding:clamp(24px,3.2vw,44px);display:grid;
  grid-template-columns:.9fr 1.1fr;gap:clamp(24px,4vw,56px);align-items:start}
.xs-price__n{font-size:clamp(2.6rem,6vw,4.2rem);font-weight:700;letter-spacing:-.045em;line-height:1}
.xs-price__n sup{font-size:.42em;vertical-align:super;font-weight:500;margin-right:.05em}
.xs-price__sub{font-size:.9375rem;color:var(--g500);margin-top:.6rem}
.xs-price__list{list-style:none;margin:0;padding:0}
.xs-price__list li{font-size:.9375rem;color:var(--g500);padding:.7rem 0 .7rem 1.6rem;position:relative;border-bottom:var(--line)}
.xs-price__list li:last-child{border-bottom:0}
.xs-price__list li::before{content:"";position:absolute;left:0;top:1.25rem;width:8px;height:8px;background:var(--ink)}
.xs-price__list li b{color:var(--ink);font-weight:600}

/* ---- muro de logos ---- */
.xs-logos{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border:var(--line)}
.xs-logos div{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;
  border-right:var(--line);border-bottom:var(--line);padding:1.25rem}
.xs-logos div:nth-child(5n){border-right:0}
.xs-logos img{max-width:100%;max-height:44px;width:auto;filter:grayscale(1);opacity:.55;transition:opacity .4s,filter .4s}
.xs-logos div:hover img{opacity:1;filter:grayscale(0)}

/* ---- rejilla de proyectos ---- */
.xs-work{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,40px)}
.xs-work--3{grid-template-columns:repeat(3,1fr)}
.xs-workitem{text-decoration:none;color:inherit;display:block}
.xs-workitem .xs-media{aspect-ratio:16/10;border:var(--line)}
.xs-workitem__b{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  margin-top:1rem;padding-top:.85rem;border-top:1.5px solid var(--ink)}
.xs-workitem__t{font-size:1.15rem;font-weight:700;letter-spacing:-.025em}
.xs-workitem__d{font-size:.875rem;color:var(--g500);margin-top:.3rem}
.xs-workitem__tag{font-family:var(--mono);font-size:.6875rem;color:var(--g400);white-space:nowrap}

/* ---- lista con dos columnas de texto ---- */
.xs-two{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,4vw,64px)}

@media (max-width:1024px){
  .xs-feats{grid-template-columns:repeat(2,1fr)}
  .xs-feat:nth-child(3n){border-right:var(--line)}
  .xs-feat:nth-child(2n){border-right:0}
  .xs-logos{grid-template-columns:repeat(3,1fr)}
  .xs-logos div:nth-child(5n){border-right:var(--line)}
  .xs-logos div:nth-child(3n){border-right:0}
  .xs-work--3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .xs-pagehero__in,.xs-feats,.xs-price,.xs-work,.xs-work--3,.xs-two{grid-template-columns:1fr}
  .xs-feat{border-right:0!important}
  .xs-logos{grid-template-columns:repeat(2,1fr)}
  .xs-logos div:nth-child(3n){border-right:var(--line)}
  .xs-logos div:nth-child(2n){border-right:0}
  .xs-spec td:first-child{width:42%}
}

/* =========================================================
   Medios cargados desde el panel
   ========================================================= */
.xs-logo--img{display:flex;align-items:center;line-height:0}
.xs-logo-img{height:clamp(26px,3.2vw,34px);width:auto;display:block;max-width:220px;object-fit:contain}
.xs-header.is-stuck .xs-logo-img{height:26px}

.xs-marquee__item--img{display:flex;align-items:center;height:34px}
.xs-marquee__item--img img{max-height:30px;width:auto;max-width:150px;object-fit:contain;
  filter:grayscale(1);opacity:.55;transition:opacity .35s var(--ease),filter .35s var(--ease)}
.xs-marquee__item--img:hover img{opacity:1;filter:grayscale(0)}

.xs-logos img{max-width:100%;max-height:44px;width:auto;filter:grayscale(1);opacity:.55;
  transition:opacity .4s,filter .4s}
.xs-logos div:hover img{opacity:1;filter:grayscale(0)}

.xs-workitem .xs-media img{width:100%;height:100%;object-fit:cover}