:root {
  color-scheme: dark;

  --bg:          #0B0A0C;
  --bg-2:        #131117;
  --surface:     #1A171F;
  --surface-2:   #241F2B;
  --line:        #2E2836;
  --line-soft:   #221D29;

  --ink:         #F4F1F6;
  --ink-2:       #C3BACB;
  --ink-3:       #8C819A;

  --brand:       #E8432E;
  --brand-hi:    #FF7A45;
  --brand-deep:  #A82A17;
  --brand-tint:  rgba(232, 67, 46, .13);
  --brand-gradient: linear-gradient(90deg, #FFD400 0%, #F2A71B 22%, #E8552E 45%, #D0202A 62%, #A33B7A 80%, #3B2E86 100%);

  --marca:       #E8432E;
  --marca-deep:  #A82A17;
  --star:        #FFC24A;

  --ok:          #35C77E;

  --f-display: "Bricolage Grotesque", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-body:    "Instrument Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --step--1: clamp(.82rem, .8rem + .1vw, .88rem);
  --step-0:  clamp(1rem, .97rem + .15vw, 1.08rem);
  --step-1:  clamp(1.18rem, 1.1rem + .4vw, 1.4rem);
  --step-2:  clamp(1.45rem, 1.3rem + .75vw, 1.95rem);
  --step-3:  clamp(1.85rem, 1.5rem + 1.5vw, 2.8rem);
  --step-4:  clamp(2.3rem, 1.6rem + 3vw, 4.2rem);

  --sp-1: .35rem;  --sp-2: .7rem;   --sp-3: 1.1rem;
  --sp-4: 1.75rem; --sp-5: 2.75rem; --sp-6: 4.5rem;  --sp-7: 7rem;

  --hdr-alto: 84px;

  --r-sm: 8px;  --r-md: 14px;  --r-lg: 22px;  --r-full: 999px;

  --wrap: 1400px;
  --shadow: 0 18px 50px -24px rgba(0,0,0,.85);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg:        #FBF9FB;
    --bg-2:      #F3EFF4;
    --surface:   #FFFFFF;
    --surface-2: #F6F2F7;
    --line:      #E4DCE8;
    --line-soft: #EEE8F1;
    --ink:       #16121A;
    --ink-2:     #4C4356;
    --ink-3:     #756B80;
    --brand:     #D62E1A;
    --brand-hi:  #E8432E;
    --brand-deep:#8E1D0F;
    --brand-tint: rgba(214, 46, 26, .09);
    --star:      #B07200;
    --shadow: 0 18px 50px -28px rgba(40, 10, 25, .35);
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg:#FBF9FB; --bg-2:#F3EFF4; --surface:#FFFFFF; --surface-2:#F6F2F7;
  --line:#E4DCE8; --line-soft:#EEE8F1;
  --ink:#16121A; --ink-2:#4C4356; --ink-3:#756B80;
  --brand:#D62E1A; --brand-hi:#E8432E; --brand-deep:#8E1D0F;
  --brand-tint:rgba(214,46,26,.09); --star:#B07200;
  --shadow:0 18px 50px -28px rgba(40,10,25,.35);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important;
    animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--f-display); line-height: 1.08;
  margin: 0 0 var(--sp-3); text-wrap: balance; font-weight: 600; }
h1 { font-size: var(--step-4); letter-spacing: -.025em; }
h2 { font-size: var(--step-3); letter-spacing: -.02em; }
h3 { font-size: var(--step-1); letter-spacing: -.01em; }
p  { margin: 0 0 var(--sp-3); max-width: 62ch; }
a  { color: inherit; }
img, svg { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--brand-hi); outline-offset: 3px; border-radius: 4px; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.section { padding-block: var(--sp-7); }

.section--band { background: var(--bg-2); border-block: 1px solid var(--line); }
.section--tight { padding-block: var(--sp-6); }

.eyebrow {
  font-family: var(--f-mono); font-size: var(--step--1);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--brand-hi); margin: 0 0 var(--sp-2);
  display: flex; align-items: center; gap: .55rem;
}
.eyebrow::before { content:""; width: 22px; height: 1px; background: var(--brand-hi); }
.eyebrow--center { justify-content: center; }

.tras-cabecera { margin-top: var(--sp-5); }

.hero__cta--centrado { justify-content: center; }
.proof__logos { padding-bottom: 1.5rem; }
.precios__titulo { margin-bottom: .6rem; }
.precios__lede { margin: 0; }

details p,
blockquote,
blockquote p { max-width: none; }

.trampa { position: absolute; left: -9999px; }
.lede { font-size: var(--step-1); color: var(--ink-2); }
.center { text-align: center; }
.center p, .center .lede { margin-inline: auto; }

p.center, .lede.center { margin-inline: auto; }

.eyebrow--center { max-width: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--f-body); font-size: var(--step-0); font-weight: 600;
  padding: .85rem 1.6rem; border-radius: var(--r-full);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background-color .18s ease,
              border-color .18s ease, box-shadow .18s ease;
  white-space: nowrap;
}

.hdr .btn--primary,
.ftr .btn--primary { background: var(--marca); color: #fff; }
.hdr .btn--primary:hover,
.ftr .btn--primary:hover { background: var(--marca-deep); }

.btn--primary { background: var(--brand); color: var(--brand-ink, #fff);
  box-shadow: 0 10px 28px -12px var(--brand); }
.btn--primary:hover { background: var(--brand-hi); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--brand-hi); color: var(--brand-hi); }
.btn--lg { padding: 1.05rem 2.1rem; font-size: var(--step-1); }
.btn--block { width: 100%; }

.hdr {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background-color .25s ease;
}
.hdr[data-scrolled="true"] { border-bottom-color: var(--line); }
.hdr__in { display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); padding-block: .85rem; }

.logo { display: flex; align-items: center; gap: .55rem; text-decoration: none;
  line-height: 1; }
.logo__img { height: 28px; width: auto; display: block; }

.nav { display: flex; align-items: center; gap: var(--sp-4); }
.nav__list { display: flex; gap: var(--sp-3); }
.nav__list a { text-decoration: none; color: var(--ink-2); font-size: .94rem;
  white-space: nowrap;
  transition: color .18s ease; }
.nav__list a:hover { color: var(--ink); }

.nav__toggle { display: none; background: none; border: 1px solid var(--line);
  border-radius: var(--r-sm); width: 42px; height: 42px; cursor: pointer;
  color: var(--ink); align-items: center; justify-content: center; }
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  content: ""; display: block; width: 17px; height: 2px; background: currentColor;
  border-radius: 2px; transition: transform .22s ease, opacity .18s ease; }
.nav__toggle span::before { transform: translateY(-5.5px); }
.nav__toggle span::after  { transform: translateY(4.5px); }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after  { transform: rotate(-45deg); }

@media (max-width: 1080px) {
  .nav__toggle { display: inline-flex; }
  .nav { position: fixed; inset: 100% 0 auto; flex-direction: column;
    align-items: stretch; gap: 0; background: var(--bg-2);
    border-bottom: 1px solid var(--line); padding: var(--sp-3) 1.25rem var(--sp-4);
    transform: translateY(-130%); transition: transform .3s cubic-bezier(.4,0,.2,1);
    max-height: calc(100dvh - 100%); overflow-y: auto; }
  .nav[data-open="true"] { transform: translateY(0); }
  .nav__list { flex-direction: column; gap: 0; }
  .nav__list a { display: block; padding: .85rem 0; border-bottom: 1px solid var(--line-soft); }
  .nav .btn { margin-top: var(--sp-3); }

  /* Las herramientas se quedan en la barra, no dentro del panel: el
     interruptor de tema y el de moneda tienen que verse sin abrir la
     hamburguesa. El botón «Pedir propuesta» sí se retira —lo cubre la barra
     inferior fija del móvil— porque con él no entraban las cuatro cosas.

     El orden se fija a mano: la hamburguesa va al final, que es donde la
     busca todo el mundo. */
  .hdr__tools { margin-left: auto; gap: .5rem; order: 2; }
  .nav__toggle { order: 3; margin-left: .5rem; }
  .hdr__cta { display: none; }

  /* WhatsApp sale de la barra: ya está en la barra inferior fija del móvil,
     y con cuatro controles arriba no cabía nada sin ahogarse. Quedan los dos
     que Mario pidió ver sin abrir el menú —moneda y tema— más la
     hamburguesa. */
  .hdr__tools .icon-btn--wa { display: none; }

  /* El logotipo no se parte en dos líneas ni cede ancho. */
  .logo { flex: none; }
}

.hdr__tools { display: flex; align-items: center; gap: .4rem; }
.icon-btn { width: 38px; height: 38px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--ink-2); cursor: pointer; display: grid; place-items: center;
  transition: color .2s ease, border-color .2s ease; padding: 0; }
.icon-btn:hover { color: var(--ink); border-color: var(--brand); }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn--wa:hover { color: #25D366; border-color: #25D366; }

.icon-btn .ico-sol { display: none; }
:root[data-theme="light"] .icon-btn .ico-sol,
.icon-btn .ico-luna { display: block; }
:root[data-theme="light"] .icon-btn .ico-luna { display: none; }

.moneda-sel { position: relative; }
.moneda-sel select { appearance: none; font: inherit; font-family: var(--f-mono);
  font-size: .78rem; letter-spacing: .04em; cursor: pointer; color: var(--ink-2);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); height: 38px; padding: 0 1.7rem 0 .7rem; }
.moneda-sel select:hover { color: var(--ink); border-color: var(--brand); }
.moneda-sel::after { content: "\25BE"; position: absolute; right: .55rem; top: 50%;
  transform: translateY(-50%); pointer-events: none; color: var(--ink-3);
  font-size: .7rem; }

/* Estas herramientas vivían dentro del menú desplegable y llevaban una línea
   arriba para separarlas de los enlaces. Ahora viven en la barra: esa línea
   quedaba flotando sobre los botones sin separar nada, y el margen y el
   relleno los empujaban hacia abajo, descuadrados respecto al logotipo. */
@media (max-width: 1080px) {
  .hdr__tools { order: 2; margin-top: 0; padding-top: 0; border-top: 0;
    justify-content: flex-end; }
}

.hero { position: relative; padding-block: 0; overflow: hidden; }
@media (min-width: 941px) { .hero { padding-block: 0; } }

@media (max-width: 600px) { .hero { padding-block: 0; } }
.hero::before {
  content: ""; position: absolute; inset: -30% 30% 40% -20%; z-index: -1;
  background: radial-gradient(closest-side, var(--brand-tint), transparent 70%);
  filter: blur(20px);
}
.hero::after {
  content: ""; position: absolute; inset: 20% -25% -40% 45%; z-index: -1;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--brand) 7%, transparent), transparent 72%);
  filter: blur(28px);
}
.hero__grid { display: grid; gap: var(--sp-6); align-items: center;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
@media (max-width: 1000px) { .hero__grid { grid-template-columns: 1fr; gap: var(--sp-5); } }

/* .hero__titulo son las diapositivas 2 y 3 del carrusel: se ven exactamente
   igual que el h1, pero no lo son. Solo la primera es el encabezado de la
   página; las otras dos son variantes del mismo mensaje. */
.hero h1, .hero .hero__titulo { margin: 0 0 var(--sp-3); }
.hero .hero__titulo { font-family: var(--f-display); font-size: var(--step-4);
  line-height: 1.08; letter-spacing: -.025em; font-weight: 600;
  text-wrap: balance; color: inherit; }
.hero h1 em, .hero .hero__titulo em { font-style: normal; color: var(--brand-hi); }
.hero__lede { font-size: var(--step-1); color: var(--ink-2); max-width: 46ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.hero__note { font-size: var(--step--1); color: var(--ink-3); margin-top: var(--sp-3);
  max-width: 42ch; }
@media (max-width: 700px) { .hero__note { padding-right: 4.5rem; } }
/*
 * Los dos botones del hero, en una sola fila en móvil.
 *
 * A tamaño grande medían 213 y 177 px: 390 más el hueco, contra los 335 que da
 * el `.wrap` a 375 px de pantalla. No cabían, se apilaban, y el hero crecía 144
 * px solo en los botones. Con la letra a 1 rem y el relleno más ceñido bajan a
 * 159 y 129, caben juntos y sobra sitio.
 *
 * Se conserva el `flex-wrap: wrap` del componente: si mañana una landing pone
 * ahí una etiqueta más larga, preferimos que baje de línea a que se salga.
 */
@media (max-width: 700px) {
  .hero__cta { gap: .6rem; }
  .hero__cta .btn--lg { padding: .85rem 1.15rem; font-size: 1rem; }
}

.badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-full); padding: .35rem .9rem .35rem .4rem;
  font-size: var(--step--1); color: var(--ink-2); margin-bottom: var(--sp-4);
}
.badge b { color: var(--ink); font-weight: 600; }
.badge__dot { width: 22px; height: 22px; border-radius: var(--r-full); flex: none;
  background: var(--brand-tint); color: var(--brand-hi); display: grid;
  place-items: center; font-size: .7rem; font-weight: 700; }

.shots { display: grid; grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 74px; gap: .7rem; }
.shot { border-radius: var(--r-md); border: 1px solid var(--line);
  background: var(--surface); overflow: hidden; position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: .7rem .8rem; text-decoration: none;
  transition: border-color .3s ease; }
.shot:hover { border-color: var(--brand); }
.shot::before { content: ""; position: absolute; inset: 0; opacity: .5;
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--brand) 55%, transparent),
    color-mix(in srgb, var(--brand-deep) 30%, transparent) 45%, transparent 78%); }
.shot--b::before { background: linear-gradient(150deg,
    color-mix(in srgb, var(--brand-hi) 42%, transparent),
    color-mix(in srgb, var(--brand-deep) 22%, transparent) 55%, transparent 82%); }
.shot--c::before { background: linear-gradient(200deg,
    color-mix(in srgb, var(--brand-deep) 55%, transparent),
    transparent 72%); }
.shot__name { position: relative; font-family: var(--f-mono); font-size: .74rem;
  letter-spacing: .04em; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.shot__tag { position: relative; font-size: .68rem; color: rgba(255,255,255,.72);
  text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.shot:nth-child(1) { grid-column: span 4; grid-row: span 2; }
.shot:nth-child(2) { grid-column: span 2; grid-row: span 2; }
.shot:nth-child(3) { grid-column: span 2; grid-row: span 2; }
.shot:nth-child(4) { grid-column: span 4; grid-row: span 2; }
@media (max-width: 560px) { .shots { grid-auto-rows: 60px; } }

.browser { border-radius: var(--r-md); border: 1px solid var(--line);
  background: var(--surface); overflow: hidden; display: flex;
  flex-direction: column; box-shadow: var(--shadow); }
.browser__bar { display: flex; align-items: center; gap: .35rem;
  padding: .55rem .7rem; background: var(--surface-2);
  border-bottom: 1px solid var(--line); }
.browser__dot { width: 8px; height: 8px; border-radius: var(--r-full);
  background: var(--line); flex: none; }
.browser__url { flex: 1; height: 14px; border-radius: var(--r-full);
  background: var(--bg); margin-left: .4rem; }
.browser__body { padding: .85rem; display: flex; flex-direction: column;
  gap: .5rem; flex: 1; min-height: 0; }

.sk { border-radius: 5px; background: var(--surface-2); flex: none; }
.sk--hero { height: 34%; min-height: 44px;
  background: linear-gradient(120deg,
    color-mix(in srgb, var(--brand) 42%, transparent),
    color-mix(in srgb, var(--brand-deep) 26%, transparent)); }
.sk--line { height: 7px; }
.sk--line.w80 { width: 80%; } .sk--line.w60 { width: 60%; } .sk--line.w45 { width: 45%; }
.sk--row { display: flex; gap: .45rem; flex: 1; min-height: 22px; }
.sk--row > span { flex: 1; border-radius: 5px; background: var(--surface-2); }
.sk--btn { height: 14px; width: 62px; border-radius: var(--r-full);
  background: var(--brand); opacity: .85; }

.marquee { overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: var(--sp-5); width: max-content;
  animation: desfile 34s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee li { display: flex; align-items: center; }

.cliente { flex: none; height: 48px; opacity: .58;
  background-position: center; background-size: contain; background-repeat: no-repeat;
  transition: opacity .25s ease; }
.cliente:hover { opacity: 1; }

.cliente--citago { width: 163px;
  background-image: url(clientes/citago-oscuro.webp); }
.cliente--explora { width: 110px;
  background-image: url(clientes/explora-oscuro.webp); }
.cliente--travelvip { width: 133px;
  background-image: url(clientes/travelvip-oscuro.webp); }
.cliente--gerico { width: 141px;
  background-image: url(clientes/gerico-oscuro.webp); }
.cliente--paiscircular { width: 190px;
  background-image: url(clientes/paiscircular-oscuro.webp); }
.cliente--lafest { width: 113px;
  background-image: url(clientes/lafest-oscuro.webp); }
.cliente--getalink { width: 181px;
  background-image: url(clientes/getalink-oscuro.webp); }
.cliente--colormusic { width: 86px;
  background-image: url(clientes/colormusic-oscuro.webp); }
.cliente--medicalnnabis { width: 190px;
  background-image: url(clientes/medicalnnabis-oscuro.webp); }
.cliente--noviasvirtuales { width: 189px;
  background-image: url(clientes/noviasvirtuales-oscuro.webp); }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    .cliente--citago { background-image: url(clientes/citago-claro.webp); }
    .cliente--explora { background-image: url(clientes/explora-claro.webp); }
    .cliente--travelvip { background-image: url(clientes/travelvip-claro.webp); }
    .cliente--gerico { background-image: url(clientes/gerico-claro.webp); }
    .cliente--paiscircular { background-image: url(clientes/paiscircular-claro.webp); }
    .cliente--lafest { background-image: url(clientes/lafest-claro.webp); }
    .cliente--getalink { background-image: url(clientes/getalink-claro.webp); }
    .cliente--colormusic { background-image: url(clientes/colormusic-claro.webp); }
    .cliente--medicalnnabis { background-image: url(clientes/medicalnnabis-claro.webp); }
    .cliente--noviasvirtuales { background-image: url(clientes/noviasvirtuales-claro.webp); }
  }
}
:root[data-theme="light"] .cliente--citago { background-image: url(clientes/citago-claro.webp); }
:root[data-theme="light"] .cliente--explora { background-image: url(clientes/explora-claro.webp); }
:root[data-theme="light"] .cliente--travelvip { background-image: url(clientes/travelvip-claro.webp); }
:root[data-theme="light"] .cliente--gerico { background-image: url(clientes/gerico-claro.webp); }
:root[data-theme="light"] .cliente--paiscircular { background-image: url(clientes/paiscircular-claro.webp); }
:root[data-theme="light"] .cliente--lafest { background-image: url(clientes/lafest-claro.webp); }
:root[data-theme="light"] .cliente--getalink { background-image: url(clientes/getalink-claro.webp); }
:root[data-theme="light"] .cliente--colormusic { background-image: url(clientes/colormusic-claro.webp); }
:root[data-theme="light"] .cliente--medicalnnabis { background-image: url(clientes/medicalnnabis-claro.webp); }
:root[data-theme="light"] .cliente--noviasvirtuales { background-image: url(clientes/noviasvirtuales-claro.webp); }
@keyframes desfile { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; flex-wrap: wrap; width: auto;
    justify-content: center; gap: var(--sp-3) var(--sp-4); }
  .marquee__track > [aria-hidden="true"] { display: none; }
}

.work { display: grid; gap: var(--sp-3); grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) { .work { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* En móvil el portafolio deja de apilarse y pasa a carrusel con flechas.
   Ocho tarjetas una debajo de otra medían más de tres mil píxeles: cuatro
   pantallas de scroll para llegar a lo que viene después. En horizontal
   ocupa una tarjeta de alto. La barra de scroll se oculta a propósito: la
   navegación son las flechas, y el arrastre con el dedo sigue estando. */
.work-carr { position: relative; }

/* En escritorio no hay carrusel: la rejilla de cuatro columnas entra entera
   y una flecha sería un botón que no hace nada. */
.work-carr__nav { display: none; gap: var(--sp-2);
  justify-content: center; margin-top: var(--sp-3); }
.work-carr__flecha {
  width: 42px; height: 42px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--r-full);
  background: var(--surface); color: var(--ink); cursor: pointer;
}
.work-carr__flecha:disabled { opacity: .3; cursor: default; }
.work-carr__flecha:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.work-carr__ico { width: 18px; height: 18px; }
/* Si no hay nada que desplazar, el JS marca esta clase y desaparecen. */
.dvg-carr--sin-flechas .work-carr__nav { display: none; }

@media (max-width: 640px) {
  .work {
    grid-template-columns: none;
    grid-auto-flow: column;
    /* Una tarjeta entera por pantalla y se avanza de a una: asomar el borde
       de la siguiente dejaba texto cortado a media palabra. La pista de que
       hay más son las flechas de abajo. */
    grid-auto-columns: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--sp-2);
    scrollbar-width: none;
  }
  .work::-webkit-scrollbar { display: none; }
  .work__item { scroll-snap-align: start; }
  .work-carr:not(.dvg-carr--sin-flechas) .work-carr__nav { display: flex; }
}
.work__item { display: flex; flex-direction: column; gap: var(--sp-3);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--sp-3);
  transition: border-color .25s ease; }
.work__item:hover { border-color: var(--brand); }
.work__item .browser { aspect-ratio: 5 / 3; box-shadow: none; }
.work__meta { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-2); flex-wrap: wrap; }
.work__meta h3 { font-size: var(--step-0); font-weight: 700; margin: 0; }
.work__sector { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--brand-hi); }
.work__item p { font-size: .92rem; color: var(--ink-2); margin: 0; }
.work__item[hidden] { display: none; }
.work__more { display: flex; justify-content: center; margin-top: var(--sp-4); }

.sectores { display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.sector { position: relative; display: flex; flex-direction: column;
  gap: var(--sp-2); text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--sp-4); overflow: hidden;
  transition: border-color .25s ease; }
.sector::before { content: ""; position: absolute; inset: auto -30% -60% 40%;
  height: 140px; border-radius: 50%; opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(closest-side, var(--brand-tint), transparent 70%); }
.sector:hover { border-color: var(--brand); }
.sector:hover::before { opacity: 1; }
.sector__ico { width: 38px; height: 38px; border-radius: 11px; display: grid;
  place-items: center; background: var(--brand-tint); color: var(--brand-hi);
  position: relative; }
.sector__ico svg { width: 19px; height: 19px; }
.sector h3 { font-size: var(--step-0); font-weight: 700; margin: 0; position: relative; }
.sector p { font-size: .92rem; color: var(--ink-2); margin: 0; position: relative; }
.sector__go { font-size: .87rem; color: var(--brand-hi); font-weight: 600;
  margin-top: auto; padding-top: var(--sp-2); position: relative;
  display: inline-flex; align-items: center; gap: .35rem; }
.sector__go::after { content: "\2192"; transition: transform .22s ease; }
.sector:hover .sector__go::after { transform: translateX(4px); }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } }
.stat__n[data-cuenta] { font-variant-numeric: tabular-nums; }

.after { background: var(--bg-2); border-block: 1px solid var(--line); }
.after__grid { display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.after__item { display: flex; gap: var(--sp-3); align-items: flex-start; }
.after__n { font-family: var(--f-mono); font-size: .78rem; color: var(--brand-hi);
  border: 1px solid var(--line); border-radius: var(--r-full);
  width: 30px; height: 30px; display: grid; place-items: center; flex: none; }
.after__item h3 { font-size: var(--step-0); font-weight: 700; margin: 0 0 .25rem; }
.after__item p { font-size: .92rem; color: var(--ink-2); margin: 0; }

.stack { display: flex; flex-wrap: wrap; gap: .5rem; }
.stack li { font-family: var(--f-mono); font-size: .8rem; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: var(--r-full);
  padding: .3rem .8rem; background: var(--surface); }

.hero__slides { display: grid; }
.hero__slide { grid-area: 1 / 1;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .45s cubic-bezier(.2,.7,.3,1),
              transform .45s cubic-bezier(.2,.7,.3,1),
              visibility 0s linear .45s; }
.hero__slide[data-activo="true"] {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .45s cubic-bezier(.2,.7,.3,1),
              transform .45s cubic-bezier(.2,.7,.3,1),
              visibility 0s; }

.hero__puntos { display: flex; gap: .45rem; margin-top: var(--sp-4); }
.hero__puntos button { width: 26px; height: 4px; border-radius: var(--r-full);
  border: none; padding: 0; cursor: pointer; background: var(--line);
  transition: background-color .3s ease, width .3s ease; }
.hero__puntos button:hover { background: var(--ink-3); }
.hero__puntos button[aria-pressed="true"] { background: var(--brand); width: 40px; }

.hero__art { position: relative; align-self: end; display: grid; }
.hero__persona { grid-area: 1 / 1; align-self: end; position: relative; margin: 0;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .5s cubic-bezier(.2,.7,.3,1),
              transform .5s cubic-bezier(.2,.7,.3,1),
              visibility 0s linear .5s; }
.hero__persona[data-activo="true"] {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .5s cubic-bezier(.2,.7,.3,1),
              transform .5s cubic-bezier(.2,.7,.3,1),
              visibility 0s; }

.hero__foto { vertical-align: bottom; }

.hero__persona::before {
  content: ""; position: absolute; z-index: -1; inset: 6% -8% -2% -8%;
  border-radius: 50%; filter: blur(30px);
  background: radial-gradient(58% 52% at 50% 48%,
    color-mix(in srgb, var(--brand) 32%, transparent), transparent 72%);
}
.hero__foto { width: 100%; height: auto; display: block; }

.hero__notas { margin: 0; }
.hero__nota {
  position: absolute; display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .7rem; border-radius: var(--r-full);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--line); box-shadow: var(--shadow);
  font-size: .76rem; font-weight: 500; color: var(--ink); white-space: nowrap;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.hero__nota-ico { width: 14px; height: 14px; flex: none; color: var(--brand-hi); }
.hero__nota:nth-child(1) { top: 14%; right: 0; animation: flota 6s ease-in-out infinite; }
.hero__nota:nth-child(2) { bottom: 16%; left: 0; animation: flota 6s ease-in-out infinite 1.4s; }
@keyframes flota { 50% { transform: translateY(-7px); } }

@media (max-width: 1000px) {

  .hero__persona { max-width: 420px; margin-inline: auto; }
  .hero__nota { font-size: .72rem; padding: .38rem .6rem; }
}
@media (max-width: 600px) {
  .hero__persona { max-width: 320px; }
  .hero__nota:nth-child(1) { top: 10%; right: -4%; }
  .hero__nota:nth-child(2) { bottom: 12%; left: -4%; }
}

.proof { border-block: 1px solid var(--line); background: var(--bg-2); }

.proof__in { display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(4, 1fr);
  padding-block: var(--sp-4); align-items: start; }
@media (max-width: 900px) { .proof__in { grid-template-columns: repeat(2, 1fr); } }
/*
 * Las cuatro cifras se quedan en DOS columnas hasta abajo del todo. Pasaban a
 * una sola por debajo de 460 px y la sección medía 550 px: dos tercios de la
 * pantalla de un móvil para cuatro datos que se leen de una ojeada. En dos
 * columnas caben de sobra —la más larga, "100% remoto", ocupa 121 de los 160
 * px de columna— y la sección baja a menos de la mitad.
 */
@media (max-width: 460px) {
  .proof__in { gap: 1.3rem .9rem; }
  .stat__n   { font-size: 1.3rem; }
  .stat__l   { margin-top: .15rem; }
}
.stat__n { white-space: nowrap; }
.stat__n { font-family: var(--f-display); font-size: var(--step-2);
  font-weight: 700; line-height: 1; color: var(--ink);
  font-variant-numeric: tabular-nums; }
.stat__n span { color: var(--brand-hi); }
.stat__l { font-size: var(--step--1); color: var(--ink-3); margin-top: .3rem; }
.proof__nota { grid-column: 1 / -1; font-size: .85rem; color: var(--ink-3);
  margin: 0; padding-top: var(--sp-3); border-top: 1px solid var(--line-soft);
  width: 100%; }
.brands { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; align-items: center; }
.brands li { font-family: var(--f-mono); font-size: .8rem; letter-spacing: .04em;
  color: var(--ink-3); }

.vs { background: var(--bg-2); border-block: 1px solid var(--line); }

/* Tarjetas, no tabla: la comparación se escanea de un vistazo en vez de
   leerse fila por fila, y en móvil se apilan solas sin scroll horizontal. */
.vs-rejilla { list-style: none; margin: 0; padding: 0; display: grid;
  gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.vs-carta { position: relative; padding: 1.5rem 1.4rem 1.3rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); }
.vs-carta__ico { display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: var(--r-md);
  background: var(--brand-tint); color: var(--brand-hi); margin-bottom: 1rem; }
.vs-carta__ico .ico { width: 21px; height: 21px; }
.vs-carta__que { margin: 0 0 .45rem; font-family: var(--f-mono);
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); }
.vs-carta__bien { margin: 0 0 .7rem; font-size: 1.02rem; font-weight: 600;
  line-height: 1.35; color: var(--ink); }
.vs-carta__bien::before { content: "\2713"; color: var(--ok); font-weight: 700;
  margin-right: .4rem; }
/* Lo que suele pasar va tachado y apagado: es el contraste, no una promesa. */
.vs-carta__mal { margin: 0; padding-top: .7rem; font-size: .84rem;
  color: var(--ink-3); border-top: 1px solid var(--line-soft);
  text-decoration: line-through; text-decoration-color: var(--ink-3);
  text-decoration-thickness: 1px; opacity: .8; }

/*
 * En móvil el icono se pone AL LADO, no encima.
 *
 * Apilado se llevaba una fila entera —42 px de recuadro más 16 de margen— por
 * tarjeta, y son siete: casi 400 px de scroll gastados en siete iconos. Puesto
 * a la izquierda ocupa el mismo alto que el texto que acompaña, que es
 * justamente lo que hace un icono.
 *
 * Rejilla de dos columnas: el icono abarca las filas del epígrafe y de la
 * ventaja; lo que suele pasar cruza las dos columnas por debajo, para que la
 * línea de separación llegue de lado a lado como en escritorio.
 */
@media (max-width: 700px) {
  .vs-rejilla { gap: var(--sp-2); }
  .vs-carta { display: grid; grid-template-columns: auto minmax(0, 1fr);
    gap: 0 .85rem; align-items: start; padding: 1rem 1.1rem .95rem; }
  .vs-carta__ico { grid-row: 1 / 3; width: 34px; height: 34px;
    margin-bottom: 0; }
  .vs-carta__ico .ico { width: 18px; height: 18px; }
  .vs-carta__que  { grid-column: 2; margin-bottom: .25rem; }
  .vs-carta__bien { grid-column: 2; margin-bottom: 0; font-size: .97rem; }
  .vs-carta__mal  { grid-column: 1 / -1; margin-top: .7rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .vs-carta { transition: border-color .2s ease, transform .2s ease; }
  .vs-carta:hover { border-color: var(--brand); transform: translateY(-2px); }
}

.grid { display: grid; gap: var(--sp-3); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

.card { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--sp-4);
  transition: border-color .25s ease; }
.card:hover { border-color: var(--line); }
.card p:last-child { margin-bottom: 0; }

.card h3 { margin-bottom: var(--sp-1); }
.card p { color: var(--ink-2); font-size: .95rem; }

.card__ico { width: 62px; height: 62px; border-radius: 18px; display: grid;
  place-items: center; color: var(--brand-hi); margin-bottom: var(--sp-3);
  background: linear-gradient(145deg, var(--brand-tint),
    color-mix(in srgb, var(--brand) 4%, transparent));
  border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent); }
.card__ico svg { width: 30px; height: 30px; }

.sector__ico { width: 56px; height: 56px; border-radius: 17px; }
.sector__ico svg { width: 27px; height: 27px; }

.pain { border-left: 2px solid var(--brand); padding-left: var(--sp-3); }
.pain__n { font-family: var(--f-mono); font-size: var(--step-2);
  color: var(--brand-hi); font-weight: 400; line-height: 1; }
.pain h3 { margin: var(--sp-2) 0 var(--sp-1); }
.pain p { color: var(--ink-2); font-size: .96rem; margin: 0; }

.steps { counter-reset: paso; display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); }
.step { counter-increment: paso; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--sp-4); position: relative; }
.step::before { content: counter(paso, decimal-leading-zero);
  font-family: var(--f-mono); font-size: .82rem; color: var(--brand-hi);
  display: block; margin-bottom: var(--sp-2); letter-spacing: .08em; }
.step h3 { font-size: var(--step-0); font-weight: 700; margin-bottom: var(--sp-1); }
.step p { font-size: .93rem; color: var(--ink-2); margin: 0; }

.quote { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--sp-4); display: flex;
  flex-direction: column; gap: var(--sp-3); }
.quote__stars { color: var(--star); letter-spacing: .12em; font-size: .9rem; }
.quote blockquote { margin: 0; font-size: 1rem; color: var(--ink); line-height: 1.55; }
.quote__who { display: flex; align-items: center; gap: .75rem; margin-top: auto; }
.avatar { width: 38px; height: 38px; border-radius: var(--r-full); flex: none;
  display: grid; place-items: center; font-family: var(--f-display);
  font-weight: 700; font-size: .9rem; color: #fff;
  background: linear-gradient(140deg, var(--brand), var(--brand-deep)); }
.quote__who b { display: block; font-size: .93rem; }
.quote__who span { font-size: .82rem; color: var(--ink-3); }

.price { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--sp-4); display: flex;
  flex-direction: column; position: relative; }
.price--feat { border-color: var(--brand); background:
  linear-gradient(180deg, var(--brand-tint), transparent 55%), var(--surface); }
.price__flag { position: absolute; top: -11px; left: var(--sp-4);
  background: var(--brand); color: #fff; font-size: .68rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; padding: .25rem .7rem;
  border-radius: var(--r-full); }
.price h3 { font-size: var(--step-0); font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; color: var(--ink-2); margin-bottom: var(--sp-2); }
.price__amt { font-family: var(--f-display); font-size: var(--step-2);
  font-weight: 700; line-height: 1; color: var(--ink); }
.price__per { font-size: var(--step--1); color: var(--ink-3); margin-bottom: var(--sp-3); }
.price ul { display: flex; flex-direction: column; gap: .55rem;
  margin-bottom: var(--sp-4); font-size: .93rem; color: var(--ink-2); }

.price li { position: relative; padding-left: 1.35rem; }
.price li::before { content: "\2713"; position: absolute; left: 0; top: 0;
  color: var(--ok); font-weight: 700; }
.price .btn { margin-top: auto; }

.precios-cab { display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.precios-cab > div { flex: 1 1 320px; }
.monedas { display: inline-flex; padding: 3px; gap: 2px; flex: none;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-full); }
.monedas button { font: inherit; font-family: var(--f-mono); font-size: .78rem;
  letter-spacing: .04em; cursor: pointer; color: var(--ink-3);
  background: none; border: none; border-radius: var(--r-full);
  padding: .4rem .85rem; transition: background-color .2s ease, color .2s ease; }
.monedas button:hover { color: var(--ink); }
.monedas button[aria-pressed="true"] { background: var(--brand); color: #fff;
  font-weight: 600; }
.monedas-nota { font-size: .76rem; color: var(--ink-3); margin: .5rem 0 0;
  text-align: right; }
@media (max-width: 640px) {
  .precios-cab { flex-direction: column; align-items: stretch; }
  .monedas { align-self: flex-start; }
  .monedas-nota { text-align: left; }
}

.faq { display: grid; gap: .6rem; max-width: 780px; margin-inline: auto; }
.faq details { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden; }
.faq summary { cursor: pointer; padding: var(--sp-3) var(--sp-4);
  font-weight: 600; list-style: none; display: flex; justify-content: space-between;
  align-items: center; gap: var(--sp-3); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--f-mono); font-size: 1.3rem;
  color: var(--brand-hi); transition: transform .22s ease; flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { padding: 0 var(--sp-4) var(--sp-3); color: var(--ink-2);
  font-size: .96rem; margin: 0; max-width: none; }

.cta { background: var(--bg-2); border-block: 1px solid var(--line); }
.cta__grid { display: grid; gap: var(--sp-5);
  grid-template-columns: minmax(0,1fr) minmax(0,420px); align-items: start; }
@media (max-width: 880px) { .cta__grid { grid-template-columns: 1fr; } }

.form { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--sp-4); box-shadow: var(--shadow); }
.field { margin-bottom: var(--sp-3); }
.field label { display: block; font-size: var(--step--1); color: var(--ink-2);
  margin-bottom: .35rem; font-weight: 600; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: .97rem; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: .72rem .85rem;
  transition: border-color .18s ease, box-shadow .18s ease; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint); }
.field[data-invalid="true"] input, .field[data-invalid="true"] select {
  border-color: var(--brand-hi); }
.field__err { font-size: .8rem; color: var(--brand-hi); margin-top: .3rem; display: none; }
.field[data-invalid="true"] .field__err { display: block; }
.form__note { font-size: .8rem; color: var(--ink-3); margin: var(--sp-2) 0 0; }
.form__error { background: var(--brand-tint); color: var(--brand-hi);
  border-radius: var(--r-sm); padding: .7rem .9rem; font-size: .88rem;
  margin: var(--sp-3) 0 0; }
.form__ok { display: none; text-align: center; padding: var(--sp-4) 0; }
.form__ok b { display: block; font-family: var(--f-display); font-size: var(--step-1);
  margin-bottom: var(--sp-2); }
.form[data-sent="true"] .form__body { display: none; }
.form[data-sent="true"] .form__ok { display: block; }

.contact-list { display: flex; flex-direction: column; gap: var(--sp-2);
  margin-top: var(--sp-4); }
.contact-list a { display: inline-flex; align-items: center; gap: .6rem;
  text-decoration: none; color: var(--ink-2); font-size: .96rem; }
.contact-list a:hover { color: var(--brand-hi); }
.contact-list svg { width: 17px; height: 17px; flex: none; color: var(--brand-hi); }

.ftr { background: var(--bg-2); border-top: 1px solid var(--line);
  padding-block: var(--sp-6) var(--sp-4); font-size: .92rem; color: var(--ink-2); }

.ftr__cols { display: grid; gap: var(--sp-5);
  grid-template-columns: minmax(220px, 1.3fr) repeat(3, minmax(140px, 1fr));
  padding-bottom: var(--sp-5); }
@media (max-width: 880px) {
  .ftr__cols { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
  .ftr__marca { grid-column: 1 / -1; }
}
@media (max-width: 460px) { .ftr__cols { grid-template-columns: 1fr; } }

.ftr__marca p { margin: var(--sp-3) 0 0; font-size: .9rem; max-width: 34ch; }
.ftr__marca .logo { margin-bottom: 0; }

.ftr h3 { font-family: var(--f-mono); font-size: .82rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-2); font-weight: 600;
  margin: 0 0 var(--sp-3); }
.ftr h3.ftr__h3--segundo { margin-top: var(--sp-5); }
.ftr__lista { display: flex; flex-direction: column; gap: .55rem; }
.ftr__lista a { color: var(--ink-2); text-decoration: none; font-size: .93rem;
  width: fit-content; border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease; }
.ftr__lista a:hover { color: var(--ink); border-bottom-color: var(--brand); }

.ftr__contacto a { display: inline-flex; align-items: center; gap: .5rem; }
.ftr__contacto svg { width: 19px; height: 19px; flex: none; color: var(--brand-hi); }

.ftr__contacto a.ftr__tel,
.ftr__tel { display: inline-flex; align-items: flex-start; gap: .5rem;
  color: var(--ink-2); text-decoration: none; font-size: .93rem;
  border-bottom: 0; }
.ftr__tel svg { width: 21px; height: 21px; margin-top: .12rem; }
a.ftr__tel:hover { border-bottom-color: transparent; }
.ftr__tel-txt { display: grid; gap: .1rem; }
.ftr__tel-txt b { font-weight: 500; }
.ftr__tel-txt span { font-size: .88rem; color: var(--ink-3); }
a.ftr__tel:hover .ftr__tel-txt b { color: var(--ink); }

.ftr__sedes { display: flex; flex-wrap: wrap; gap: .35rem 1.2rem; margin-top: .9rem;
  font-size: .84rem; color: var(--ink-3); }
.ftr__sedes span { display: inline-flex; align-items: center; gap: .4rem; }
.ftr__sedes b { color: var(--ink-2); font-weight: 600; }

.ftr__legal { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  justify-content: space-between; align-items: center;
  padding-top: var(--sp-3); border-top: 1px solid var(--line-soft);
  font-size: .82rem; color: var(--ink-3); margin: 0; }
.ftr__legal nav { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; }
.ftr__legal a { color: var(--ink-3); text-decoration: none; }
.ftr__legal a:hover { color: var(--ink-2); }
/*
 * Pie en móvil: centrado y con menos aire.
 *
 * Traía 72 px de relleno arriba y el contenido alineado a la izquierda, con lo
 * que el bloque quedaba escorado y medía 1.215 px de alto. Centrado se lee como
 * un cierre y no como una columna suelta.
 *
 * El relleno de abajo NO se toca: esos 5,5 rem son el hueco que deja libre la
 * barra flotante de acciones, que va fija sobre el contenido. Sin ellos, la
 * barra tapa el aviso legal.
 */
@media (max-width: 700px) {
  .ftr { padding-top: var(--sp-4); padding-bottom: 5.5rem; text-align: center; }
  .ftr__cols { gap: var(--sp-4); }
  /* El logotipo es flex, así que no lo centra el text-align del contenedor. */
  .ftr .logo { justify-content: center; }
  .ftr__marca p { margin-inline: auto; }
  /*
   * Las sedes pasan a una por línea y como texto corrido, no como cajas flex.
   * Centrado y en fila, la dirección de Chile ocupaba dos renglones y el
   * `align-items: center` dejaba la palabra "Chile" flotando a media altura a
   * la izquierda, separada de su propia dirección. En bloque, el rótulo y la
   * calle vuelven a ser una sola frase que se parte por donde toca.
   */
  .ftr__sedes { flex-direction: column; align-items: center; gap: .3rem; }
  .ftr__sedes span { display: block; }
  .ftr__lista { align-items: center; gap: .45rem; }
  .ftr__contacto a { justify-content: center; }
  .ftr__legal { justify-content: center; text-align: center; }
  .ftr__legal nav { justify-content: center; }
}

.wa { position: fixed; right: 18px; bottom: 18px; z-index: 40;
  width: 54px; height: 54px; border-radius: var(--r-full); display: grid;
  place-items: center; background: #25D366; color: #fff;
  box-shadow: 0 10px 30px -10px rgba(37,211,102,.7);
  transition: transform .2s ease; }
.wa:hover { transform: scale(1.07); }
.wa svg { width: 27px; height: 27px; }

.flotantes { position: fixed; right: 18px; bottom: 18px; z-index: 41;
  display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; }

.flotantes__menu { display: grid; gap: .5rem; justify-items: end; }
.flotantes__menu[hidden] { display: none; }

.flotantes__op { display: inline-flex; align-items: center; gap: .55rem;
  padding: .65rem 1.05rem; border: 1px solid var(--line); border-radius: var(--r-full);
  background: var(--surface); color: var(--ink); text-decoration: none;
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
  box-shadow: 0 12px 30px -14px rgba(0,0,0,.7);
  transition: border-color .18s ease, color .18s ease; }
.flotantes__op:hover { border-color: var(--brand); }
.flotantes__op svg { width: 19px; height: 19px; flex: none; color: var(--brand); }
.flotantes__op--wa svg { color: #25D366; }
.flotantes__op--wa:hover { border-color: #25D366; }

.flotantes__burbuja { width: 54px; height: 54px; border-radius: var(--r-full);
  display: grid; place-items: center; align-self: flex-end;
  background: var(--brand); color: #fff; border: none; cursor: pointer;
  box-shadow: 0 12px 30px -12px var(--brand); }
.flotantes__burbuja svg { width: 23px; height: 23px; grid-area: 1 / 1; }
.flotantes__ico-cerrar { display: none; }
.flotantes__burbuja[aria-expanded="true"] .flotantes__ico-abrir { display: none; }
.flotantes__burbuja[aria-expanded="true"] .flotantes__ico-cerrar { display: block; }
.flotantes__burbuja[hidden] { display: none; }

.chat { position: fixed; right: 18px; bottom: 18px; z-index: 60;
  width: min(380px, calc(100vw - 36px)); height: min(560px, calc(100dvh - 36px));
  display: none; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: 0 30px 70px -24px rgba(0,0,0,.75); }
.chat[data-abierto="true"] { display: flex; animation: subeChat .28s cubic-bezier(.2,.7,.3,1); }
.chat[data-fase="puerta"] { height: auto; }
@keyframes subeChat { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .chat[data-abierto="true"] { animation: none; } }

.chat__cab { display: flex; align-items: center; gap: .7rem;
  padding: .85rem 1rem; border-bottom: 1px solid var(--line);
  background: var(--surface-2); }
.chat__av { width: 34px; height: 34px; border-radius: var(--r-full); flex: none;
  display: grid; place-items: center; color: #fff; font-weight: 700;
  font-family: var(--f-display); font-size: .9rem;
  background: linear-gradient(140deg, var(--brand), var(--brand-deep)); }
.chat__quien { flex: 1; min-width: 0; }
.chat__quien b { display: block; font-size: .95rem; }
.chat__quien span { font-size: .78rem; color: var(--ink-3);
  display: flex; align-items: center; gap: .35rem; }
.chat__quien span::before { content: ""; width: 6px; height: 6px;
  border-radius: 50%; background: var(--ok); }
.chat__cerrar { background: none; border: none; color: var(--ink-3);
  cursor: pointer; font-size: 1.35rem; line-height: 1; padding: .2rem .4rem; }
.chat__cerrar:hover { color: var(--ink); }

.chat__hilo { flex: 1; overflow-y: auto; padding: 1rem;
  display: flex; flex-direction: column; gap: .7rem; }
.msj { max-width: 86%; padding: .65rem .9rem; border-radius: 14px;
  font-size: .93rem; line-height: 1.5; white-space: pre-wrap;
  overflow-wrap: anywhere; }
.msj--bot { background: var(--surface-2); color: var(--ink);
  border-bottom-left-radius: 4px; align-self: flex-start; }
.msj--yo { background: var(--brand); color: #fff;
  border-bottom-right-radius: 4px; align-self: flex-end; }
.msj--error { background: var(--brand-tint); color: var(--brand-hi);
  align-self: stretch; max-width: 100%; font-size: .87rem; }

.chat__puntos { display: inline-flex; gap: 3px; }
.chat__puntos i { width: 5px; height: 5px; border-radius: 50%;
  background: var(--ink-3); animation: latido 1.2s infinite; }
.chat__puntos i:nth-child(2) { animation-delay: .18s; }
.chat__puntos i:nth-child(3) { animation-delay: .36s; }
@keyframes latido { 0%,60%,100% { opacity: .25; } 30% { opacity: 1; } }

.chat[data-fase="puerta"] .chat__hilo,
.chat[data-fase="puerta"] .chat__sug,
.chat[data-fase="puerta"] .chat__pie { display: none; }
.chat[data-fase="chat"] .chat__puerta { display: none; }
.chat__puerta { display: flex; flex-direction: column; gap: .7rem;
  padding: 1.5rem 1.35rem 1.45rem; }
.chat__puerta__intro { font-size: .88rem; color: var(--ink-2);
  margin: 0 0 .25rem; line-height: 1.5; max-width: none; }
.chat__puerta__intro b { display: block; margin-bottom: .3rem; color: var(--ink);
  font-family: var(--f-display); font-size: 1.08rem; line-height: 1.25; }
.chat__puerta__campo { font: inherit; font-size: .93rem; width: 100%;
  padding: .72rem .9rem; border-radius: 12px; background: var(--surface-2);
  border: 1px solid var(--line); color: var(--ink); }
.chat__puerta__campo:focus { outline: none; border-color: var(--brand); }
.chat__puerta__campo[aria-invalid="true"] { border-color: var(--brand-hi); }
.chat__puerta__mal { font-size: .82rem; color: var(--brand-hi); margin: 0;
  max-width: none; }
.chat__puerta__mal[hidden] { display: none; }
.chat__puerta__ok { font: inherit; font-weight: 600; font-size: .93rem;
  cursor: pointer; padding: .78rem 1rem; border: none; border-radius: 12px;
  background: var(--brand); color: #fff; margin-top: .15rem; }
.chat__puerta__ok:hover { filter: brightness(1.07); }
.chat__sug { display: flex; flex-wrap: wrap; gap: .35rem; padding: 0 1rem .6rem; }
.chat__sug[hidden] { display: none; }
.chat__sug button { font: inherit; font-size: .82rem; cursor: pointer;
  background: var(--bg); color: var(--ink-2); border: 1px solid var(--line);
  border-radius: var(--r-full); padding: .35rem .75rem; }
.chat__sug button:hover { border-color: var(--brand); color: var(--brand-hi); }

.chat__pie { border-top: 1px solid var(--line); padding: .7rem;
  display: flex; gap: .5rem; align-items: flex-end; }
.chat__pie textarea { flex: 1; font: inherit; font-size: .93rem; resize: none;
  color: var(--ink); background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: .6rem .7rem; max-height: 120px;
  min-height: 42px; line-height: 1.4; }
.chat__pie textarea:focus { outline: none; border-color: var(--brand); }
.chat__enviar { flex: none; width: 42px; height: 42px; border-radius: var(--r-md);
  border: none; cursor: pointer; background: var(--brand); color: #fff;
  display: grid; place-items: center; }
.chat__enviar:disabled { opacity: .45; cursor: not-allowed; }
.chat__enviar svg { width: 18px; height: 18px; }
@media (max-width: 560px) {
  .chat { right: 8px; bottom: 8px; width: calc(100vw - 16px);
    height: calc(100dvh - 16px); }
  .flotantes { right: 12px; bottom: 12px; gap: .5rem; }
  .flotantes__burbuja { width: 50px; height: 50px; }
}

.zig { display: flex; flex-direction: column; gap: var(--sp-5); }
.zig__fila { display: grid; gap: var(--sp-5); align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.zig__fila:nth-child(even) .zig__visual { order: -1; }

.zig__fila--sola { grid-template-columns: 1fr; }
@media (max-width: 800px) {
  .zig { gap: var(--sp-5); }
  .zig__fila { grid-template-columns: 1fr; gap: var(--sp-3); }
  .zig__fila:nth-child(even) .zig__visual { order: 0; }
}
.zig__num { font-family: var(--f-mono); font-size: .78rem; letter-spacing: .12em;
  color: var(--brand-hi); display: block; margin-bottom: .5rem; }
.zig h3 { font-size: var(--step-1); margin-bottom: var(--sp-1); }
.zig p { color: var(--ink-2); margin-bottom: var(--sp-2); font-size: .95rem; }
.zig__lista { display: flex; flex-wrap: wrap; gap: .4rem; }
.zig__lista li { font-size: .82rem; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-full); padding: .28rem .75rem; }

.zig__acciones {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  margin: var(--sp-4) 0 0;
}
.zig__acciones .btn { padding: .62rem 1.2rem; font-size: var(--step--1); }

.zig__mas {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--brand-hi); font-size: var(--step--1); font-weight: 600;
  text-decoration: none;
}
.zig__mas svg { width: 16px; height: 16px; }
.zig__mas:hover { text-decoration: underline; }
@media (prefers-reduced-motion: no-preference) {
  .zig__mas svg { transition: transform .18s ease; }
  .zig__mas:hover svg { transform: translateX(3px); }
}

img[data-img="suave"] { opacity: 0; }
img[data-img="listo"] { opacity: 1; transition: opacity .55s ease; }

.maq {
  position: relative;
  aspect-ratio: 2 / 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow);

  --ok-maq: var(--ok);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .maq { --ok-maq: #0C7C46; }
}
:root[data-theme="light"] .maq { --ok-maq: #0C7C46; }

.maq__bar { flex: none; display: flex; align-items: center; gap: .3rem;
  padding: .45rem .6rem; background: var(--surface-2);
  border-bottom: 1px solid var(--line); }
.maq__dot { width: 6px; height: 6px; border-radius: var(--r-full);
  background: var(--line); flex: none; }
.maq__url { flex: 1; min-width: 0; height: 15px; margin-left: .3rem;
  display: flex; align-items: center; padding: 0 .45rem;
  border-radius: var(--r-full); background: var(--bg);
  border: 1px solid var(--line-soft);
  font-family: var(--f-mono); font-size: .55rem; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; }
.maq__chip { flex: none; font-family: var(--f-mono); font-size: .5rem;
  letter-spacing: .07em; text-transform: uppercase; color: var(--brand-hi);
  background: var(--brand-tint); border-radius: var(--r-full);
  border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent);
  padding: .1rem .4rem; }
.maq__lienzo { flex: 1; min-height: 0; position: relative;
  display: flex; flex-direction: column; gap: .45rem;
  padding: .65rem; background: var(--bg-2); }
.maq__lienzo--split { flex-direction: row; gap: 0; padding: 0; }

.maq__par { display: inline-grid; }
.maq__par > * { grid-area: 1 / 1; }
@keyframes maqA { 0%,30% { opacity: 1; } 36%,92% { opacity: 0; } 97%,100% { opacity: 1; } }
@keyframes maqB { 0%,30% { opacity: 0; } 36%,92% { opacity: 1; } 97%,100% { opacity: 0; } }
.maq__a { animation: maqA 8s ease-in-out infinite; }
.maq__b { opacity: 0; animation: maqB 8s ease-in-out infinite; }

.maq__antes   { opacity: 0; animation: maqA 8s ease-in-out infinite; }
.maq__despues { animation: maqB 8s ease-in-out infinite; }

.ed__pie .maq__a, .ed__pie .maq__b { animation-delay: .35s; }
.ed__foto::after { animation-delay: .7s; }
.ti__badge .maq__a, .ti__badge .maq__b { animation-delay: .3s; }
.ti__stock .maq__a, .ti__stock .maq__b { animation-delay: .45s; }
.pa__cont .maq__a, .pa__cont .maq__b { animation-delay: .3s; }

@keyframes maqEntra {
  0%,52%   { opacity: 0; transform: translateY(7px); }
  60%,88%  { opacity: 1; transform: none; }
  96%,100% { opacity: 0; transform: translateY(-4px); }
}
.maq__ok { display: inline-flex; align-items: center; gap: .25rem;
  font-size: .58rem; font-weight: 600; color: var(--ok-maq);
  background: var(--surface); border-radius: var(--r-full);
  border: 1px solid color-mix(in srgb, var(--ok-maq) 42%, transparent);
  padding: .16rem .45rem; white-space: nowrap;
  animation: maqEntra 8s ease-in-out infinite; }
.maq__tic { font-weight: 700; line-height: 1; }

.maq[data-vivo="false"] *,
.maq[data-vivo="false"] { animation-play-state: paused; }

.fl__lienzo { flex: 1; min-height: 0; display: grid;
  grid-auto-rows: max-content; align-content: center;
  gap: .6rem; position: relative; }

.fl__flujo { display: flex; align-items: center; gap: .25rem;
  margin: 0; padding: 0; list-style: none; }

.fl__nodo { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
  align-items: center; gap: .35rem; padding: .8rem .2rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); color: var(--ink-3);
  transition: none; }
.fl__nodo b { font-family: var(--f-display); font-size: .58rem;
  font-weight: 600; letter-spacing: .01em; white-space: nowrap; }
.fl__ico { display: grid; place-items: center; width: 26px; height: 26px; }
.fl__ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

@keyframes flNodo {
  0%, 6%   { border-color: var(--line); color: var(--ink-3);
             background: var(--surface); }
  12%, 30% { border-color: var(--brand); color: var(--brand-hi);
             background: var(--brand-tint); }
  38%,100% { border-color: var(--line); color: var(--ink-3);
             background: var(--surface); }
}
.fl__nodo { animation: flNodo 8s ease-in-out infinite; }
.fl__nodo:nth-of-type(1) { animation-delay: 0s; }
.fl__nodo:nth-of-type(2) { animation-delay: .7s; }
.fl__nodo:nth-of-type(3) { animation-delay: 1.4s; }
.fl__nodo:nth-of-type(4) { animation-delay: 2.1s; }

.fl__union { flex: 0 0 16px; position: relative; height: 1px;
  background: repeating-linear-gradient(to right,
    var(--line) 0 3px, transparent 3px 6px); }
.fl__union i { position: absolute; top: -2px; left: 0;
  width: 5px; height: 5px; border-radius: var(--r-full);
  background: var(--brand); opacity: 0; }

@keyframes flPulso {
  0%, 8%   { left: 0; opacity: 0; }
  12%      { left: 0; opacity: 1; }
  26%      { left: calc(100% - 5px); opacity: 1; }
  30%,100% { left: calc(100% - 5px); opacity: 0; }
}
.fl__union i { animation: flPulso 8s ease-in-out infinite; }
.fl__union:nth-of-type(2) i { animation-delay: .35s; }
.fl__union:nth-of-type(4) i { animation-delay: 1.05s; }
.fl__union:nth-of-type(6) i { animation-delay: 1.75s; }

.fl__registro { display: flex; flex-direction: column; gap: .45rem;
  margin: 0; padding: .7rem .6rem; list-style: none;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); }
.fl__registro li { display: flex; gap: .4rem; align-items: baseline;
  font-size: .54rem; color: var(--ink-2); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.fl__hora { flex: none; font-family: var(--f-mono); font-size: .48rem;
  color: var(--ink-3); }

.fl__ok { justify-self: end; }

.ed__tools { flex: none; align-self: flex-start; display: flex; align-items: center;
  gap: .2rem; padding: .22rem .3rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-sm); }
.ed__tool { width: 17px; height: 17px; border-radius: 4px; display: grid;
  place-items: center; color: var(--ink-2); font-family: var(--f-display);
  font-size: .6rem; line-height: 1; }
.ed__ico { width: 10px; height: 10px; }
.ed__sep { width: 1px; height: 11px; background: var(--line); margin: 0 .1rem; }
@keyframes edTool {
  0%,26%   { background: transparent; color: var(--ink-2); }
  33%,88%  { background: var(--brand); color: #fff; }
  95%,100% { background: transparent; color: var(--ink-2); }
}
.maq--editor .ed__tool:first-child { background: var(--brand); color: #fff;
  animation: edTool 8s ease-in-out infinite; }

.ed__bloque { position: relative; flex: 1; min-height: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: .3rem; padding: .55rem .6rem; background: var(--surface);
  border: 1.5px dashed var(--brand); border-radius: var(--r-sm); }

.ed__bloque::before, .ed__bloque::after { content: ""; position: absolute;
  width: 6px; height: 6px; border-radius: 2px; background: var(--brand); }
.ed__bloque::before { top: -3.5px; left: -3.5px; }
.ed__bloque::after { right: -3.5px; bottom: -3.5px; }

.ed__txt { font-family: var(--f-display); font-weight: 600; font-size: .78rem;
  color: var(--ink); white-space: nowrap; }
.ed__txt::after { content: ""; display: inline-block; width: 1.5px; height: .8em;
  margin-left: 2px; vertical-align: -.1em; background: var(--brand);
  animation: edCaret 1.05s steps(1) infinite; }
@keyframes edCaret { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }

.ed__linea { flex: none; height: 5px; border-radius: 3px; background: var(--surface-2); }
.ed__linea--larga { width: 92%; }
.ed__linea--media { width: 76%; }
.ed__linea--corta { width: 54%; }

.ed__fotos { flex: none; display: flex; gap: .35rem; height: 38px; }
.ed__fotos > span { flex: 1; border-radius: 4px;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--ink-3) 34%, transparent),
      color-mix(in srgb, var(--ink-3) 10%, transparent)),
    var(--surface-2); }

.ed__foto { position: relative; overflow: hidden; }
.ed__foto::before, .ed__foto::after { content: ""; position: absolute; inset: 0; }
.ed__foto::before { background: linear-gradient(135deg,
  color-mix(in srgb, var(--brand) 52%, transparent),
  color-mix(in srgb, var(--brand-deep) 34%, transparent)); }
.ed__foto::after { opacity: 0; animation: maqB 8s ease-in-out infinite;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--ok-maq) 58%, transparent),
      color-mix(in srgb, var(--ok-maq) 18%, transparent)),
    var(--surface-2); }

.ed__pie { flex: none; display: flex; align-items: center;
  justify-content: space-between; gap: .5rem; }
.ed__val { font-family: var(--f-mono); font-size: .76rem; font-weight: 600;
  color: var(--brand-hi); white-space: nowrap; }
.ed__boton { flex: none; width: 46px; height: 13px; border-radius: var(--r-full);
  background: var(--brand); }

.ed__guardado { position: absolute; right: .65rem; top: .6rem; }

.ti__top { flex: none; display: flex; align-items: center; gap: .45rem; }
.ti__logo { flex: none; width: 16px; height: 16px; border-radius: 5px;
  background: var(--brand); }
.ti__menu { flex: 1; height: 5px; border-radius: 3px; background: var(--surface-2); }
.ti__carro { position: relative; flex: none; display: grid; place-items: center;
  width: 19px; height: 19px; color: var(--ink-2); }
.ti__ico { width: 14px; height: 14px; }
.ti__badge { position: absolute; top: -4px; right: -5px;
  min-width: 13px; height: 13px; padding: 0 2px; border-radius: var(--r-full);
  background: var(--brand); color: #fff; font-family: var(--f-mono);
  font-size: .5rem; font-weight: 700; line-height: 1;
  display: inline-grid; place-items: center; }

.ti__grid { flex: 1; min-height: 0; display: grid;
  grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.ti__item { position: relative; display: flex; flex-direction: column; gap: .28rem;
  padding: .35rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-sm); }
.ti__foto { flex: 1; min-height: 16px; border-radius: 4px;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--ink-3) 34%, transparent),
      color-mix(in srgb, var(--ink-3) 10%, transparent)),
    var(--surface-2); }
.ti__linea { flex: none; height: 4px; width: 72%; border-radius: 3px;
  background: var(--surface-2); }
.ti__precio { flex: none; font-family: var(--f-mono); font-size: .54rem;
  color: var(--ink-2); }
@keyframes tiSel {
  0%,26%   { border-color: var(--line); }
  33%,90%  { border-color: var(--brand); }
  97%,100% { border-color: var(--line); }
}
.ti__item--add { border-color: var(--brand);
  animation: tiSel 8s ease-in-out infinite; }
@keyframes tiPop {
  0%,26%   { opacity: 0; transform: scale(.3); }
  34%,90%  { opacity: 1; transform: scale(1); }
  97%,100% { opacity: 0; transform: scale(.3); }
}
.ti__mas { position: absolute; top: -6px; right: -6px;
  width: 15px; height: 15px; border-radius: var(--r-full);
  background: var(--brand); color: #fff; font-size: .62rem; font-weight: 700;
  line-height: 1; display: grid; place-items: center;
  animation: tiPop 8s cubic-bezier(.34,1.56,.64,1) infinite; }

.ti__pie { flex: none; display: flex; align-items: center;
  justify-content: space-between; gap: .5rem; }
.ti__stock { display: inline-flex; align-items: center; gap: .28rem;
  font-family: var(--f-mono); font-size: .56rem; color: var(--ink-3); }
.ti__stock b { color: var(--ink); }

.pa__nav { flex: none; width: 33px; display: flex; flex-direction: column;
  align-items: center; gap: .25rem; padding: .45rem 0;
  background: var(--surface); border-right: 1px solid var(--line); }
.pa__logo { flex: none; width: 14px; height: 14px; border-radius: 5px;
  background: var(--brand); margin-bottom: .2rem; }
.pa__link { flex: none; width: 21px; height: 19px; border-radius: 5px;
  display: grid; place-items: center; color: var(--ink-3); }
.pa__link--on { background: var(--brand-tint); color: var(--brand-hi); }
.pa__ico { width: 11px; height: 11px; }
.pa__main { flex: 1; min-width: 0; display: flex; flex-direction: column;
  gap: .35rem; padding: .55rem .65rem; }
.pa__head { display: flex; align-items: baseline;
  justify-content: space-between; gap: .5rem; }
.pa__tit { font-family: var(--f-display); font-weight: 600; font-size: .7rem;
  color: var(--ink); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.pa__cont { font-family: var(--f-mono); font-size: .72rem; font-weight: 600;
  color: var(--brand-hi); }
.pa__sem { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px;
  font-family: var(--f-mono); font-size: .46rem; color: var(--ink-3);
  text-align: center; }
.pa__grid { flex: 1; min-height: 0; display: grid; gap: 3px;
  grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr; }
.pa__grid i { border-radius: 3px; background: var(--surface-2); }
.pa__grid i.on { background: color-mix(in srgb, var(--brand) 28%, transparent); }
.pa__grid i.nuevo { background: var(--brand);
  animation: tiPop 8s cubic-bezier(.34,1.56,.64,1) infinite; }
.pa__fila { flex: none; display: flex; align-items: center; gap: .3rem;
  padding: .25rem .4rem; font-size: .56rem; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line);
  border-left: 2px solid var(--brand); border-radius: 5px;
  white-space: nowrap; overflow: hidden; }
.pa__punto { flex: none; width: 5px; height: 5px; border-radius: 50%;
  background: var(--ok-maq); }

.se__cabeza { flex: none; display: flex; align-items: center;
  justify-content: space-between; gap: .5rem; }
.se__t { display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--f-display); font-weight: 600; font-size: .7rem;
  color: var(--ink); }
.se__ico { width: 12px; height: 12px; color: var(--brand-hi); }
.se__chip { font-size: .55rem; font-weight: 600; white-space: nowrap;
  border-radius: var(--r-full); padding: .12rem .45rem; }
.se__chip--mal { color: var(--brand-hi); background: var(--brand-tint);
  border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent); }
.se__chip--bien { color: var(--ok-maq);
  background: color-mix(in srgb, var(--ok-maq) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok-maq) 42%, transparent); }

.se__lista { position: relative; flex: 1; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: .3rem; }
.se__lista li { display: flex; align-items: center; gap: .35rem;
  padding: .36rem .4rem; border-radius: 5px; font-size: .57rem;
  color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); }
@keyframes sePunto {
  0%,30%   { background: var(--brand); }
  40%,100% { background: var(--ok-maq); }
}
.se__punto { flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok-maq); animation: sePunto 8s ease-in-out infinite; }
.se__punto--media { animation-delay: .12s; }
.se__punto--baja  { animation-delay: .24s; }
.se__lista li:nth-child(4) .se__punto { animation-delay: .36s; }
.se__que { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.se__est { flex: none; justify-items: end; }
.se__nivel { font-family: var(--f-mono); font-size: .52rem; white-space: nowrap;
  color: var(--brand-hi); }
.se__hecho { font-size: .52rem; font-weight: 600; white-space: nowrap;
  color: var(--ok-maq); }

@keyframes seEscaneo {
  0%       { top: 0; opacity: 0; }
  5%       { opacity: .9; }
  28%      { top: 100%; opacity: .9; }
  34%,100% { top: 100%; opacity: 0; }
}
.se__lista::after { content: ""; position: absolute; left: 0; right: 0; top: 100%;
  height: 1px; opacity: 0; animation: seEscaneo 8s ease-in-out infinite;
  background: linear-gradient(90deg, transparent, var(--brand), transparent); }

@keyframes seChip {
  0%,36%   { color: var(--ink-3); background: transparent; border-color: var(--line); }
  46%,100% { color: var(--ok-maq);
             background: color-mix(in srgb, var(--ok-maq) 12%, transparent);
             border-color: color-mix(in srgb, var(--ok-maq) 38%, transparent); }
}
.se__chips { flex: none; display: flex; gap: .3rem; }
.se__chips span { flex: 1; text-align: center; font-family: var(--f-mono);
  font-size: .5rem; padding: .18rem .2rem; border-radius: var(--r-full);
  color: var(--ok-maq); background: color-mix(in srgb, var(--ok-maq) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok-maq) 38%, transparent);
  animation: seChip 8s ease-in-out infinite; }
.se__chips span:nth-child(2) { animation-delay: .1s; }
.se__chips span:nth-child(3) { animation-delay: .2s; }
.se__chips span:nth-child(4) { animation-delay: .3s; }

.es__cabeza { flex: none; display: flex; align-items: center;
  justify-content: space-between; gap: .5rem; }
.es__vivo { display: inline-flex; align-items: center; gap: .35rem;
  font-size: .64rem; font-weight: 600; color: var(--ink); }
.es__vivo i { flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok-maq); animation: esLatido 2.4s ease-out infinite; }
@keyframes esLatido {
  0%       { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok-maq) 55%, transparent); }
  70%,100% { box-shadow: 0 0 0 6px transparent; }
}
.es__pct { font-family: var(--f-mono); font-size: .64rem; color: var(--ok-maq); }
.es__barras { flex: none; display: flex; align-items: flex-end; gap: 2px; height: 26px; }
.es__barras i { flex: 1; height: 100%; border-radius: 2px; transform-origin: bottom;
  background: color-mix(in srgb, var(--ok-maq) 45%, transparent); }

.es__barras i.aviso { height: 60%;
  background: color-mix(in srgb, var(--ink-3) 55%, transparent); }
.es__barras i.nueva { animation: esNueva 8s ease-out infinite; }
@keyframes esNueva {
  0%,34%   { transform: scaleY(0); opacity: 0; }
  44%,100% { transform: scaleY(1); opacity: 1; }
}
.es__pie { flex: none; font-family: var(--f-mono); font-size: .5rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.es__lista { flex: 1; min-height: 0; display: flex; flex-direction: column;
  justify-content: center; gap: .32rem; }
.es__lista li { display: flex; align-items: center; gap: .32rem;
  font-size: .58rem; color: var(--ink-2); }
.es__lista .maq__tic { color: var(--ok-maq); }
.es__nueva { position: absolute; right: .65rem; bottom: .65rem; }

.ve__cabeza { flex: none; display: flex; align-items: baseline;
  justify-content: space-between; gap: .5rem; }
.ve__t { font-family: var(--f-display); font-weight: 600; font-size: .7rem;
  color: var(--ink); }
.ve__estado { font-size: .55rem; font-weight: 600; white-space: nowrap;
  border-radius: var(--r-full); padding: .12rem .45rem; }
.ve__estado--mal { color: var(--brand-hi); background: var(--brand-tint);
  border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent); }
.ve__estado--bien { color: var(--ok-maq);
  background: color-mix(in srgb, var(--ok-maq) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok-maq) 42%, transparent); }
.ve__cuerpo { flex: 1; min-height: 0; display: flex; align-items: center; gap: .8rem; }
.ve__medidor { position: relative; flex: none; width: 78px; height: 78px;
  display: grid; place-items: center; }
.ve__medidor svg { position: absolute; inset: 0; width: 100%; height: 100%;
  transform: rotate(-90deg); }
.ve__pista { stroke: var(--surface-2); stroke-width: 9; }
.ve__arco { stroke: var(--ok-maq); stroke-width: 9; stroke-linecap: round;
  stroke-dasharray: 251.3; stroke-dashoffset: 10;
  animation: veArco 8s ease-in-out infinite; }
@keyframes veArco {
  0%,30%   { stroke-dashoffset: 146; stroke: var(--brand); }
  42%,92%  { stroke-dashoffset: 10;  stroke: var(--ok-maq); }
  99%,100% { stroke-dashoffset: 146; stroke: var(--brand); }
}
.ve__num { position: relative; z-index: 1; font-family: var(--f-mono);
  font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.ve__metricas { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .45rem; }
.ve__m { display: grid; grid-template-columns: 1fr auto; gap: .15rem .5rem;
  align-items: baseline; }
.ve__k { font-size: .56rem; color: var(--ink-3); }
.ve__v { justify-self: end; font-family: var(--f-mono); font-size: .6rem;
  font-weight: 600; color: var(--ink); }
.ve__bar { grid-column: 1 / -1; height: 4px; border-radius: 3px;
  background: var(--surface-2); overflow: hidden; }
.ve__bar i { display: block; height: 100%; width: 22%; border-radius: 3px;
  background: var(--ok-maq); animation: veBar 8s ease-in-out infinite; }
@keyframes veBar {
  0%,30%   { width: 88%; background: var(--brand); }
  42%,92%  { width: 22%; background: var(--ok-maq); }
  99%,100% { width: 88%; background: var(--brand); }
}
.ve__m:nth-child(2) .ve__bar i { animation-delay: .12s; }
.ve__m:nth-child(3) .ve__bar i { animation-delay: .24s; }

@media (max-width: 800px) {
  .maq__lienzo { padding: .55rem; }
  .ve__medidor { width: 66px; height: 66px; }
  .ve__num { font-size: .9rem; }
}

.linea { position: relative; display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(4, 1fr); counter-reset: hito; }
.linea::before { content: ""; position: absolute; left: 0; right: 0; top: 19px;
  height: 2px; background: linear-gradient(90deg,
    var(--brand) 0%, var(--brand) 75%, var(--line) 100%); }
.hito { counter-increment: hito; position: relative; padding-top: 52px; }
.hito::before { content: counter(hito); position: absolute; top: 0; left: 0;
  width: 40px; height: 40px; border-radius: var(--r-full);
  display: grid; place-items: center; font-family: var(--f-mono);
  font-size: .95rem; font-weight: 600; color: #fff; background: var(--brand);
  border: 4px solid var(--bg); box-sizing: content-box; margin-left: -4px; }
.hito h3 { font-size: var(--step-0); font-weight: 700; margin-bottom: .3rem; }
.hito p { font-size: .9rem; color: var(--ink-2); margin: 0; }
@media (max-width: 780px) {
  .linea { grid-template-columns: 1fr; gap: var(--sp-4); }
  .linea::before { left: 19px; right: auto; top: 0; bottom: 0; width: 2px;
    height: auto; background: linear-gradient(180deg,
      var(--brand) 0%, var(--brand) 82%, var(--line) 100%); }
  .hito { padding: 0 0 0 66px; min-height: 48px; }
  .hito::before { top: 0; }
}

.citas { display: grid; gap: var(--sp-3);
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: stretch; }
@media (max-width: 860px) { .citas { grid-template-columns: 1fr; } }
.citas__secundarias { display: grid; gap: var(--sp-3); align-content: stretch; }
.cita-grande { background: var(--surface); border: 1px solid var(--brand);
  border-radius: var(--r-lg); padding: var(--sp-5); display: flex;
  flex-direction: column; gap: var(--sp-3);
  background-image: linear-gradient(160deg, var(--brand-tint), transparent 55%); }
.cita-grande blockquote { font-family: var(--f-display); font-weight: 600;
  font-size: var(--step-2); line-height: 1.25; margin: 0; text-wrap: balance; }
.cita-grande .quote__stars { font-size: 1.05rem; }
.cita-grande .avatar { width: 46px; height: 46px; font-size: 1rem; }
/*
 * El testimonio destacado, a escala de móvil.
 *
 * La cita se pinta con la tipografía de titulares a `--step-2`. En escritorio,
 * a lo ancho de una columna, son tres o cuatro renglones. En un móvil de 375 px
 * el mismo texto se partía en doce y la tarjeta medía 592 px —una pantalla
 * entera para un solo testimonio—, con 44 px de relleno por lado comiéndose el
 * ancho útil. Sigue siendo la cita más grande de la sección, pero ya no es una
 * portada.
 */
@media (max-width: 700px) {
  .cita-grande { padding: var(--sp-3); gap: var(--sp-2); }
  .cita-grande blockquote { font-size: 1.12rem; line-height: 1.4; }
  .cita-grande .avatar { width: 38px; height: 38px; font-size: .9rem; }
  .quote { padding: var(--sp-3); gap: var(--sp-2); }
}

.equipo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3); margin-top: var(--sp-5); }
.equipo__ficha { display: grid; gap: .4rem var(--sp-4);
  grid-template-columns: clamp(96px, 12vw, 150px) minmax(0, 1fr);
  grid-template-areas: "foto nombre" "foto cuerpo";
  padding: var(--sp-3); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg); }
.equipo__foto   { grid-area: foto;   align-self: center; }

.equipo__nombre { grid-area: nombre; align-self: end; min-width: 0; }
.equipo__cuerpo { grid-area: cuerpo; align-self: start; min-width: 0; }
.equipo__foto { position: relative; overflow: hidden; aspect-ratio: 4 / 5;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-2); }
.equipo__foto img, .equipo__video { object-position: center 20%; }
.equipo__foto img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.equipo__ficha:hover .equipo__foto img { transform: scale(1.03); }

.equipo__video { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; pointer-events: none;
  transition: opacity .4s ease; }
.equipo__ficha:hover .equipo__video[data-listo="true"],
.equipo__ficha:focus-within .equipo__video[data-listo="true"] { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .equipo__video { display: none; }
}
.equipo__ficha h3 { margin: 0 0 .1rem; font-size: var(--step-1); }
.equipo__rol { font-family: var(--f-mono); font-size: .78rem; letter-spacing: .03em;
  color: var(--brand-hi); margin: 0 0 var(--sp-2); }
.equipo__bio { font-size: .95rem; color: var(--ink-2); margin-bottom: var(--sp-2); }
.equipo__saberes { display: flex; flex-wrap: wrap; gap: .4rem; }
.equipo__saberes li { font-size: .8rem; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-full); padding: .26rem .7rem; }

@media (max-width: 900px) {
  .equipo { grid-template-columns: 1fr; }
  .equipo__ficha { grid-template-columns: clamp(112px, 20vw, 180px) minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .equipo__ficha { grid-template-columns: 76px minmax(0, 1fr);
    grid-template-areas: "foto nombre" "cuerpo cuerpo";
    gap: var(--sp-2) var(--sp-3); }
  .equipo__foto { aspect-ratio: 1 / 1; border-radius: var(--r-full); }
  .equipo__nombre { align-self: center; }
}

.tecnologias { margin-top: var(--sp-5); padding-top: var(--sp-4);
  border-top: 1px solid var(--line); }
.tecnologias__t { font-family: var(--f-mono); font-size: var(--step--1);
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 var(--sp-3); }
.tecnologias__lista { margin: 0; display: grid; gap: var(--sp-3) var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.tecnologias__lista > div { display: flex; flex-direction: column; gap: .55rem; }
.tecnologias dt { font-size: .82rem; font-weight: 600; color: var(--ink); }
.tecnologias dd { margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.tecnologias dd span { font-size: .8rem; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-full); padding: .26rem .7rem; }

/* En móvil las cuatro columnas se apilan y la lista se estiraba casi una
   pantalla entera para algo que es contexto, no argumento de venta.
   Se aprieta: fichas más chicas, menos aire entre grupos. */
@media (max-width: 640px) {
  .tecnologias { margin-top: var(--sp-4); padding-top: var(--sp-3); }
  .tecnologias__lista { gap: var(--sp-3) var(--sp-3); }
  .tecnologias__lista > div { gap: .4rem; }
  .tecnologias dt { font-size: .78rem; }
  .tecnologias dd { gap: .3rem; }
  .tecnologias dd span { font-size: .72rem; padding: .18rem .55rem; }
}

.check { display: grid; gap: 0; max-width: 760px; }
.check li { display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--line-soft); }
.check li:last-child { border-bottom: none; }
.check__ok { width: 26px; height: 26px; border-radius: var(--r-full); flex: none;
  display: grid; place-items: center; background: var(--good-soft, var(--brand-tint));
  color: var(--ok); font-size: .8rem; font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); }
.check b { display: block; font-size: var(--step-0); margin-bottom: .15rem; }
.check span.txt { font-size: .92rem; color: var(--ink-2); }

.avatar img { width: 100%; height: 100%; border-radius: inherit;
  object-fit: cover; display: block; }

.marquee img { height: 26px; width: auto; object-fit: contain;
  filter: grayscale(1) brightness(1.7); opacity: .6;
  transition: filter .25s ease, opacity .25s ease; }
.marquee li:hover img { filter: none; opacity: 1; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .marquee img { filter: grayscale(1) brightness(.35); }
}

.captura { display: block; border-radius: var(--r-md);
  border: 1px solid var(--line); overflow: hidden; aspect-ratio: 5 / 3;
  background: var(--surface-2); }
.captura img { width: 100%; height: 100%; object-fit: cover;
  object-position: top center; display: block;
  transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.work__item:hover .captura img { transform: scale(1.03); }
.work__url { display: inline-block; margin-top: .6rem; font-family: var(--f-mono);
  font-size: .76rem; color: var(--ink-3); text-decoration: none;
  border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease; }
.work__url:hover { color: var(--brand-hi); border-bottom-color: var(--brand-hi); }
.work__url::after { content: "\A0\2197"; }

[data-revisar] { position: relative; }
body[data-modo-revision="true"] [data-revisar] {
  background: rgba(255, 194, 74, .18);
  outline: 1px dashed rgba(255, 194, 74, .75);
  outline-offset: 2px; border-radius: 3px;
}
body[data-modo-revision="true"] [data-revisar]::after {
  content: attr(data-revisar);
  position: absolute; left: 0; top: -1.35rem; z-index: 30;
  font-family: var(--f-mono); font-size: .62rem; letter-spacing: .04em;
  background: #FFC24A; color: #221A00; padding: .1rem .4rem;
  border-radius: 3px; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .15s ease;
}
body[data-modo-revision="true"] [data-revisar]:hover::after { opacity: 1; }

.revision-btn { position: fixed; left: 16px; bottom: 16px; z-index: 70;
  font: inherit; font-size: .8rem; font-family: var(--f-mono); cursor: pointer;
  background: var(--surface-2); color: var(--ink-3);
  border: 1px solid var(--line); border-radius: var(--r-full);
  padding: .45rem .9rem; opacity: .55; transition: opacity .2s ease; }
.revision-btn:hover { opacity: 1; }

@media (max-width: 700px) {
  .revision-btn { left: 10px; bottom: 10px; font-size: .68rem;
    padding: .3rem .6rem; opacity: .35; }
}
.revision-btn[aria-pressed="true"] { background: #FFC24A; color: #221A00;
  border-color: #FFC24A; opacity: 1; font-weight: 600; }

.stack-marco { position: relative; }
.stack { display: flex; flex-wrap: nowrap; gap: .55rem; align-items: center;
  justify-content: center;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; padding: 2px 0 .6rem;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.stack::-webkit-scrollbar { height: 4px; }
.stack::-webkit-scrollbar-track { background: transparent; }
.stack::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }

.stack { justify-content: safe center; }
.stack li { flex: none; scroll-snap-align: start;
  display: grid; place-items: center; height: 64px;
  min-width: 64px; padding: 0 .9rem;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color .2s ease; }
.stack li:hover { border-color: var(--brand); }

.stack-marco::before, .stack-marco::after {
  content: ""; position: absolute; top: 0; bottom: .6rem; width: 36px;
  pointer-events: none; z-index: 2; opacity: 0; transition: opacity .25s ease; }
.stack-marco::before { left: 0;
  background: linear-gradient(90deg, var(--bg-2), transparent); }
.stack-marco::after { right: 0;
  background: linear-gradient(270deg, var(--bg-2), transparent); }
.stack-marco[data-izq="true"]::before,
.stack-marco[data-der="true"]::after { opacity: 1; }

.stack li img {
  display: block; object-fit: contain;

  filter: brightness(0) invert(1);
  opacity: .72; transition: opacity .2s ease;
}
.stack li:hover img { opacity: 1; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .stack li img { filter: brightness(0); opacity: .55; }
}
:root[data-theme="light"] .stack li img { filter: brightness(0); opacity: .55; }

.stack img { width: 28px; height: 28px; }

.stack li[data-l="wordpress"]    img { width: 26px; height: 26px; }
.stack li[data-l="javascript"]   img { width: 26px; height: 26px; }
.stack li[data-l="react"]        img { width: 28px; height: 28px; }
.stack li[data-l="mercadopago"]  img { width: 31px; height: 31px; }
.stack li[data-l="stripe"]       img { width: 31px; height: 31px; }
.stack li[data-l="mysql"]        img { width: 32px; height: 32px; }
.stack li[data-l="php"]          img { width: 36px; height: 36px; }
.stack li[data-l="woocommerce"]  img { width: 58px; height: 58px; }

.stack li:not(:has(img)) { font-family: var(--f-mono); font-size: .8rem;
  color: var(--ink-3); }

.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.work__dato { display: inline-flex; align-items: baseline; gap: .4rem;
  margin-top: .6rem; font-family: var(--f-mono); font-size: .8rem;
  color: var(--brand-hi); }
.work__dato b { font-size: 1.05rem; font-weight: 700; }

[data-js="on"] .reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1);
}
[data-js="on"] .reveal[data-shown="true"] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-js="on"] .reveal { opacity: 1; transform: none; }
}

.oculto { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--brand);
  color: #fff; padding: .6rem 1rem; border-radius: var(--r-sm); }

.entradas { display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.entrada { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  transition: border-color .25s ease; }
.entrada:hover { border-color: var(--brand); }
.entrada__enlace { display: flex; flex-direction: column; height: 100%;
  text-decoration: none; color: inherit; }
.entrada .captura { border: none; border-radius: 0; }
.entrada__cuerpo { padding: var(--sp-4); display: flex; flex-direction: column;
  gap: .5rem; flex: 1; }
.entrada__cuerpo h2 { font-size: var(--step-1); margin: 0; }
.entrada__cuerpo p { font-size: .93rem; color: var(--ink-2); margin: 0; }
.entrada__meta { display: flex; flex-wrap: wrap; gap: .45rem;
  font-family: var(--f-mono); font-size: .74rem; color: var(--ink-3); margin: 0; }
.entrada__meta a { color: var(--brand-hi); text-decoration: none; }
.entrada__mas { margin-top: auto; padding-top: .6rem; font-size: .88rem;
  font-weight: 600; color: var(--brand-hi); }
.entrada__mas::after { content: "\A0\2192"; }

.paginacion { margin-top: var(--sp-5); }
.paginacion ul { display: flex; flex-wrap: wrap; gap: .4rem;
  justify-content: center; list-style: none; padding: 0; }
.paginacion a, .paginacion span { display: grid; place-items: center;
  min-width: 40px; height: 40px; padding: 0 .7rem; border-radius: var(--r-sm);
  border: 1px solid var(--line); color: var(--ink-2); text-decoration: none;
  font-family: var(--f-mono); font-size: .85rem; }
.paginacion a:hover { border-color: var(--brand); color: var(--ink); }
.paginacion .current { background: var(--brand); border-color: var(--brand); color: #fff; }

.vacio { text-align: center; padding-block: var(--sp-5); }
.vacio .lede { margin-inline: auto; }

.articulo { padding-block: var(--sp-6); }

.articulo .wrap { max-width: 1080px; }
.articulo__grid { display: grid; align-items: start; gap: var(--sp-5);
  grid-template-columns: minmax(0, 1fr) 264px; }
.articulo__principal { min-width: 0; }
@media (max-width: 940px) {
  .articulo .wrap { max-width: 760px; }
  .articulo__grid { grid-template-columns: 1fr; }
}

.articulo__lado { position: sticky; top: 88px; }
@media (max-width: 940px) { .articulo__lado { position: static; } }
.lado__caja { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--sp-3); }
.lado__lista { display: flex; flex-direction: column; gap: .2rem; margin-top: var(--sp-2); }
.lado__lista a { display: flex; gap: .6rem; align-items: flex-start;
  padding: .55rem .4rem; border-radius: var(--r-sm); text-decoration: none;
  transition: background-color .2s ease; }
.lado__lista a:hover { background: var(--surface-2); }
.lado__mini { flex: none; width: 56px; aspect-ratio: 5 / 3; overflow: hidden;
  border-radius: 6px; background: var(--surface-2); }
.lado__mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lado__texto { min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.lado__texto b { font-size: .85rem; font-weight: 600; line-height: 1.35;
  color: var(--ink); }
.lado__texto time { font-family: var(--f-mono); font-size: .68rem; color: var(--ink-3); }
.articulo__cab { margin-bottom: var(--sp-5); }
.articulo__cab h1 { font-size: var(--step-3); margin: var(--sp-2) 0 var(--sp-3); }
.articulo__portada { margin-bottom: var(--sp-5); }
.articulo__cuerpo { font-size: 1.06rem; line-height: 1.75; color: var(--ink-2); }

.articulo__cuerpo p, .articulo__cuerpo li { max-width: none; }
.articulo__cuerpo > * + * { margin-top: var(--sp-3); }
.articulo__cuerpo h2 { font-size: var(--step-2); color: var(--ink);
  margin-top: var(--sp-5); }
.articulo__cuerpo h3 { font-size: var(--step-1); color: var(--ink);
  margin-top: var(--sp-4); }
.articulo__cuerpo a { color: var(--brand-hi); }
.articulo__cuerpo ul, .articulo__cuerpo ol { padding-left: 1.3rem; }
.articulo__cuerpo li { margin-bottom: .4rem; list-style: disc; }
.articulo__cuerpo ol li { list-style: decimal; }
.articulo__cuerpo blockquote { border-left: 3px solid var(--brand);
  padding-left: var(--sp-3); color: var(--ink); font-size: 1.1rem; margin-left: 0; }
.articulo__cuerpo img { border-radius: var(--r-md); }

.articulo__intermedia { margin: var(--sp-5) 0; }
.articulo__intermedia img { width: 100%; height: auto; display: block;
  border: 1px solid var(--line); }
.articulo__intermedia figcaption,
.articulo__portada figcaption { margin-top: .7rem; font-size: .86rem;
  line-height: 1.5; color: var(--ink-3); text-align: center; }

.articulo__portada .captura { display: block; }
.articulo__cuerpo code { font-family: var(--f-mono); font-size: .88em;
  background: var(--surface-2); padding: .12em .38em; border-radius: 4px; }
.articulo__cuerpo pre { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--sp-3); overflow-x: auto; }

.articulo__pie { margin-top: var(--sp-6); }
.articulo__cta { background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--brand); border-radius: var(--r-lg);
  padding: var(--sp-4); }
.articulo__cta h2 { font-size: var(--step-1); margin: 0 0 .4rem; }
.articulo__cta p { color: var(--ink-2); margin: 0 0 var(--sp-3); }
.articulo__nav { display: grid; gap: .7rem; margin-top: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.articulo__nav a { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--sp-3); text-decoration: none;
  color: var(--ink-2); display: flex; flex-direction: column; gap: .3rem; }
.articulo__nav a:hover { border-color: var(--brand); }
.articulo__nav span { font-family: var(--f-mono); font-size: .72rem; color: var(--ink-3); }
.articulo__nav b { color: var(--ink); font-size: .95rem; font-weight: 600; }
.articulo__nav .der { text-align: right; }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .8rem .4rem .6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--step--1);
  line-height: 1.2;
}
.chip__ico {
  width: 15px;
  height: 15px;
  color: var(--brand);
  flex: 0 0 auto;
}

.feats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: var(--sp-5);
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  overflow: hidden;
}

@media (min-width: 620px)  { .feats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .feats { grid-template-columns: repeat(3, 1fr); } }

.feat {
  background: var(--bg);
  padding: var(--sp-4);

}
.feat__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: var(--sp-3);
  border-radius: 10px;
  background: var(--brand-tint);
  color: var(--brand);
}
.feat__ico .ico { width: 20px; height: 20px; }
.feat h3 {
  margin: 0 0 .4rem;
  font-size: var(--step-0);
  line-height: 1.3;
}
.feat p {
  margin: 0;
  color: var(--ink-3);
  font-size: var(--step--1);
  line-height: 1.55;
}
@media (hover: hover) {
  .feat { transition: background .18s ease; }
  .feat:hover { background: var(--bg-2); }
}

.feats__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  color: var(--ink-3);
  font-size: var(--step--1);
}

.wins {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}
.win {
  padding-top: var(--sp-3);
  border-top: 2px solid var(--brand);
}
.win h3 {
  margin: 0 0 .3rem;
  font-size: var(--step-1);
  line-height: 1.2;
}
.win p {
  margin: 0;
  color: var(--ink-3);
  font-size: var(--step--1);
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  .feat { transition: none; }
}

.tabbar { display: none; }

@media (max-width: 720px) {
  :root { --hdr-alto: 70px; }

  .tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: flex;

    justify-content: space-around;
    align-items: center;
    gap: .25rem;
    padding: .3rem .4rem calc(.3rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
  }

  .tabbar a,
  .tabbar button {
    appearance: none;
    background: none;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    color: var(--ink);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .tabbar a:active, .tabbar button:active { background: var(--surface-2); }
  .tabbar a:focus-visible,
  .tabbar button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
  .tabbar__ico { width: 23px; height: 23px; }

  .tabbar a.tabbar__wa { color: #25D366; }
  .tabbar button.tabbar__ia { color: var(--brand); }
  .tabbar a.tabbar__cta {
    background: var(--brand);
    color: #fff;
  }
  .tabbar a.tabbar__cta:active { background: var(--brand-deep); }

  .flotantes { display: none; }

  body { padding-bottom: 62px; }

  .chat[data-abierto="true"] {

    top: calc(var(--hdr-alto) + 8px);
    bottom: 66px;
    height: auto;
  }
}

@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .tabbar { backdrop-filter: none; background: var(--bg); }
}

.chat__borrar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
}
.chat__borrar svg { width: 16px; height: 16px; }
.chat__borrar:hover { color: var(--ink); background: var(--surface-2); }
.chat__borrar:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.chat__borrar[hidden] { display: none; }

.chat__borrar + .chat__cerrar { margin-left: 0; }

.nh { position: relative; overflow: hidden; padding-block: var(--sp-6) var(--sp-7); }
@media (min-width: 941px) { .nh { padding-block: var(--sp-7) var(--sp-7); } }

.nh::before {
  content: "";
  position: absolute;
  top: 3rem; bottom: 5rem; left: 42%; right: -12%;
  background: var(--bg-2);
  border-radius: 26px;
  z-index: 0;
}
@media (max-width: 1000px) { .nh::before { display: none; } }

.nh__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
  align-items: center;
  gap: var(--sp-6);
}
@media (max-width: 1000px) {
  .nh__grid { grid-template-columns: 1fr; gap: var(--sp-5); }
}

.nh h1 { margin: var(--sp-3) 0 0; }
.nh h1 em { display: block; font-style: normal; color: var(--brand-hi); }
.nh__bajada { max-width: 46ch; margin-top: var(--sp-3); color: var(--ink-2);
  font-size: var(--step-1); }
.nh__acciones { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }

.sellos {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  margin: var(--sp-4) 0 0; padding: 0; list-style: none;
}
.sellos li {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--ink-3); font-size: var(--step--1);
}
.sellos__ico { width: 15px; height: 15px; color: var(--brand); flex: 0 0 auto; }

.nh__maqueta { position: relative; }

.marco {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;

  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.marco__barra {
  display: flex; align-items: center; gap: .35rem;
  padding: .55rem .8rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.marco__barra i {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--line); flex: 0 0 auto;
}
.marco__barra b {
  margin-left: .6rem; font-family: var(--f-mono); font-weight: 400;
  font-size: .68rem; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.marco img { display: block; width: 100%; height: auto; }

.movil {
  position: absolute;
  right: -34px;
  bottom: -56px;
  width: 152px;
  margin: 0;
  padding: 6px;
  background: #0d0b10;
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .55);
  overflow: hidden;
}
.movil img {
  display: block;
  width: 100%;

  height: 300px;
  object-fit: cover;
  object-position: top center;
  border-radius: 18px;
}

@media (max-width: 1000px) {
  .movil { position: static; width: 160px; margin: var(--sp-4) auto 0; }
}
@media (max-width: 520px) { .movil { display: none; } }

.benef {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: var(--sp-5);
  padding: var(--sp-5);
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 20px;
}
@media (max-width: 900px) { .benef { grid-template-columns: 1fr; padding: var(--sp-4); } }
.benef__intro h2 { margin: 0 0 var(--sp-3); font-size: var(--step-2); }
.benef__intro p { margin: 0 0 var(--sp-4); color: var(--ink-3); }
.benef__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
@media (max-width: 520px) { .benef__grid { grid-template-columns: 1fr; } }
.benef__item {
  padding: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
}
.benef__item span { display: block; margin-bottom: .6rem; color: var(--brand); }
.benef__item .ico { width: 22px; height: 22px; }
.benef__item h3 { margin: 0 0 .25rem; font-size: var(--step-0); }
.benef__item p { margin: 0; color: var(--ink-3); font-size: var(--step--1); line-height: 1.5; }

.plan {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  gap: var(--sp-4);
  margin-top: var(--sp-5);
  align-items: start;
}
@media (max-width: 900px) { .plan { grid-template-columns: 1fr; } }

.plan__extra {
  padding: var(--sp-5);
  background: var(--brand-tint);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
}
.plan__extra h3 { margin: 0 0 var(--sp-4); font-size: var(--step-1); line-height: 1.35; }
.plan__extra ul { margin: 0; padding: 0; list-style: none; }
.plan__extra li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: .2rem .8rem;
  padding-top: var(--sp-3);
}
.plan__extra li:first-child { padding-top: 0; }
.plan__extra li .ico { width: 22px; height: 22px; color: var(--brand); }
.plan__extra li b { align-self: center; font-size: var(--step-0); }
.plan__extra li span { grid-column: 2; color: var(--ink-3);
  font-size: var(--step--1); line-height: 1.5; }

.plan__precio {
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  text-align: center;
}
.plan__precio h3 { margin: 0; font-size: var(--step-1); }
.plan__lista {
  display: grid; justify-items: start; width: max-content; max-width: 100%;
  gap: .55rem; margin: var(--sp-4) auto 0; padding: 0;
  list-style: none; text-align: left;
}
.plan__lista li {
  display: flex; align-items: flex-start; gap: .6rem;
  font-size: var(--step--1); color: var(--ink-2);
}
.plan__lista .ico { width: 16px; height: 16px; margin-top: .18rem;
  color: var(--brand); flex: 0 0 auto; }

.plan__rotulo { margin: var(--sp-5) 0 0; color: var(--ink-3); font-size: var(--step--1); }
.plan__monto {
  margin: .1rem 0 0;
  font-family: var(--f-display);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.1;
}
.plan__nota { margin: var(--sp-3) 0 0; color: var(--ink-3);
  font-size: var(--step--1); line-height: 1.5; }
.plan__cta { margin-top: var(--sp-4); width: 100%; justify-content: center; }
.faqs { display: grid; gap: .7rem; max-width: 900px; margin: var(--sp-5) auto 0; }
.faqs__item {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
}
.faqs__item summary {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--step-0); font-weight: 600; line-height: 1.4;
  cursor: pointer; list-style: none;
}
.faqs__item summary::-webkit-details-marker { display: none; }
.faqs__item summary svg {
  width: 18px; height: 18px; margin-left: auto; flex: 0 0 auto;
  color: var(--brand); transition: transform .2s ease;
}
.faqs__item[open] summary svg { transform: rotate(180deg); }
.faqs__item p {
  max-width: 78ch; margin: 0;
  padding: 0 var(--sp-4) var(--sp-4);
  color: var(--ink-3); font-size: var(--step--1); line-height: 1.65;
}
.faqs__item summary:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

.btn--wa {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line);
}
.btn--wa svg { color: #25D366; }
.btn--wa:hover { background: var(--surface-2); border-color: var(--ink-3); }

@media (prefers-reduced-motion: reduce) {
  .faqs__item summary svg { transition: none; }
}

.chat__salida {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin: .6rem 0 .2rem;
  padding: .7rem 1rem;
  border-radius: 12px;
  background: #25D366;
  color: #05291a;
  font-weight: 700;
  font-size: var(--step--1);
  text-decoration: none;
}
.chat__salida svg { width: 18px; height: 18px; flex: 0 0 auto; }
.chat__salida:hover { background: #1fb857; }
.chat__salida:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.dvg-carr { position: relative; min-width: 0; }

.dvg-carr--doble { grid-column: span 2; }

.dvg-carr > .dvg-carr__via {
  display: flex;
  gap: var(--sp-3);

  margin: -14px -3px 0;
  padding: 14px 3px .4rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.dvg-carr > .dvg-carr__via::-webkit-scrollbar { display: none; }

.dvg-carr > .dvg-carr__via > * {
  flex: 0 0 calc(50% - var(--sp-3) / 2);
  scroll-snap-align: start;
}

.dvg-carr > .dvg-carr__via--tres > * {
  flex: 0 0 calc(33.333% - var(--sp-3) * 2 / 3);
}
@media (max-width: 1000px) {
  .dvg-carr > .dvg-carr__via--tres > * { flex-basis: calc(50% - var(--sp-3) / 2); }
}
@media (max-width: 767px) {
  .dvg-carr > .dvg-carr__via > *,
  .dvg-carr > .dvg-carr__via--tres > * { flex-basis: 100%; }
}

.dvg-carr__puntos { display: flex; justify-content: center; gap: .5rem; margin-top: var(--sp-3); }
.dvg-carr__puntos[hidden] { display: none; }
.dvg-carr__puntos button {
  width: 9px; height: 9px; padding: 0;
  border: 0; border-radius: var(--r-full);
  background: var(--line);
  cursor: pointer;
}
.dvg-carr__puntos button[aria-current="true"] { width: 24px; background: var(--brand); }
.dvg-carr__puntos button:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .dvg-carr__puntos button { transition: width .2s ease, background .2s ease; }
}

/* =========================================================================
   Comparativa de planes (dvg-comp)
   Reemplaza las tarjetas apiladas por una tabla estilo ElevenLabs/OpenRouter:
   columnas por plan, filas por característica, separadores finos, columna
   destacada teñida. Oscuro por defecto; --bg/--surface/--line ya cambian
   solos con el interruptor de tema, así que este bloque no repite esa lógica.
   ========================================================================= */
.dvg-comp { margin-top: var(--sp-4); }
.dvg-comp__scroll { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
@media (max-width: 760px) { .dvg-comp__scroll { overflow-x: auto; } }
.dvg-comp__tabla { width: 100%; border-collapse: collapse; min-width: 560px; }

.dvg-comp__tabla thead th {
  position: relative;
  background: var(--bg-2); text-align: left; vertical-align: top;
  padding: 1.4rem 1.2rem 1.1rem; border-bottom: 1px solid var(--line);
  font-weight: 400;
}
.dvg-comp__tabla thead th:first-child { width: 26%; }
.dvg-comp__col--elegido { background: var(--brand-tint); }

.dvg-comp__badge {
  position: absolute; top: 0; left: 50%; translate: -50% -50%; z-index: 1;
  white-space: nowrap; font-family: var(--f-mono); font-size: .68rem;
  letter-spacing: .05em; text-transform: uppercase; color: var(--brand-hi);
  background: var(--bg-2); border: 1px solid color-mix(in srgb, var(--brand) 42%, transparent);
  padding: .2rem .6rem; border-radius: var(--r-full);
}
.dvg-comp__nombre { display: block; font-family: var(--f-display); font-weight: 700; font-size: var(--step-1); color: var(--ink); }
.dvg-comp__precio {
  display: block; font-family: var(--f-mono); font-size: var(--step-2); font-weight: 500;
  font-variant-numeric: tabular-nums; margin-top: .5rem; color: var(--ink);
}
.dvg-comp__periodo { display: block; font-size: var(--step--1); color: var(--ink-3); margin-top: .15rem; }
.dvg-comp__cta { margin-top: .9rem; width: 100%; }

.dvg-comp__tabla tbody th {
  text-align: left; font-weight: 400; font-size: var(--step--1); color: var(--ink-2);
  padding: .85rem 1.2rem; border-bottom: 1px solid var(--line-soft); white-space: normal;
}
.dvg-comp__tabla tbody td {
  padding: .85rem 1.2rem; border-bottom: 1px solid var(--line-soft); text-align: left;
}
.dvg-comp__tabla tbody tr:last-child th,
.dvg-comp__tabla tbody tr:last-child td { border-bottom: none; }
.dvg-comp__tabla tbody tr:hover th,
.dvg-comp__tabla tbody tr:hover td:not(.dvg-comp__col--elegido) { background: var(--bg-2); }

.dvg-comp__si { width: 19px; height: 19px; color: var(--ok); flex: none; }
.dvg-comp__no { width: 19px; height: 19px; color: var(--brand-hi); flex: none; opacity: .75; }

/* Mobile: la tabla ancha es ilegible en un teléfono, así que se cambia por
   una tarjeta por plan, apilada, con solo lo que ese plan incluye. */
.dvg-comp__cartas { display: none; }
@media (max-width: 720px) {
  .dvg-comp__scroll { display: none; }
  .dvg-comp__cartas { display: grid; gap: var(--sp-3); }
  .dvg-comp__carta {
    border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
    padding: 1.4rem 1.2rem;
  }
  .dvg-comp__carta.dvg-comp__col--elegido { background: var(--brand-tint); border-color: var(--brand-tint); }
  .dvg-comp__carta .dvg-comp__cta { margin-top: 1rem; }
  .dvg-comp__lista { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .65rem; }
  .dvg-comp__lista li { display: flex; gap: .55rem; align-items: flex-start; font-size: var(--step--1); color: var(--ink-2); }
}

.precios-tabs__tira { display: flex; gap: .3rem; margin-bottom: var(--sp-4);
  padding-bottom: 2px; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--line); }
.precios-tabs__tira::-webkit-scrollbar { display: none; }
.precios-tabs__tab { flex: none; font: inherit; font-size: var(--step--1);
  font-weight: 600; cursor: pointer; white-space: nowrap; color: var(--ink-3);
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: .6rem .9rem; margin-bottom: -3px;
  display: inline-flex; align-items: center; gap: .45rem;
  transition: color .2s ease, border-color .2s ease; }
.precios-tabs__ico { width: 17px; height: 17px; flex: none; opacity: .75; }
.precios-tabs__tab[aria-selected="true"] .precios-tabs__ico { opacity: 1; }
.precios-tabs__tab:hover { color: var(--ink); }
.precios-tabs__tab[aria-selected="true"] { color: var(--brand);
  border-bottom-color: var(--brand); }
.precios-tabs__tab:focus-visible { outline: 2px solid var(--brand);
  outline-offset: -2px; border-radius: var(--r-sm); }

.precios-tabs__titulo { font-size: var(--step-1); color: var(--brand);
  margin-bottom: var(--sp-3); }
/* `max-width: none` no es un adorno: esto es un <p>, y los párrafos del sitio
   llevan un ancho máximo tipográfico (unos 713 px) para que las líneas de
   texto no se hagan interminables. Ese tope también aplicaba aquí, así que el
   botón se centraba dentro de esos 713 px pegados a la izquierda y quedaba
   343 px corrido respecto a la página. `width: 100%` no bastaba: contra un
   max-width, gana el max-width. */
.precios-tabs__pie { margin: var(--sp-4) 0 0; width: 100%; max-width: none;
  display: flex; justify-content: center; }
.precios-tabs__pie a { display: inline-flex; align-items: center; gap: .5rem; }

/* Una tabla ancha no puede empujar la página entera: sin esto, el documento
   scrollea en horizontal y todo lo que va debajo —el CTA incluido— aparece
   corrido respecto a la ventana. */
.precios-tabs__panel { max-width: 100%; }

/* En móvil las pestañas se quedan solo con el icono. Con siete servicios, los
   nombres completos no caben y la tira obligaba a arrastrar de lado; el nombre
   sigue en aria-label y en title, así que no se pierde para nadie. */
@media (max-width: 640px) {
  .precios-tabs__txt { position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%);
    white-space: nowrap; border: 0; }
  /* Padding justo para que entren los siete servicios sin arrastrar de lado:
     con 1rem se pasaba de largo por trece píxeles. */
  .precios-tabs__tab { padding: .6rem .55rem; }
  .precios-tabs__ico { width: 22px; height: 22px; opacity: .85; }
  .precios-tabs__tira { justify-content: space-between; gap: 0; }
}
.precios-tabs__flecha { width: 16px; height: 16px; flex: none;
  transition: transform .15s ease; }
.precios-tabs__pie a:hover .precios-tabs__flecha { transform: translateX(3px); }

.precios-tabs__panel + .precios-tabs__panel { margin-top: var(--sp-5); }

[data-js="on"] .precios-tabs__panel[data-oculto] { display: none; }
[data-js="on"] .precios-tabs__titulo { display: none; }
[data-js="on"] .precios-tabs__panel + .precios-tabs__panel { margin-top: 0; }
html:not([data-js="on"]) .precios-tabs__tira { display: none; }

.dvg-comp__col--elegido .dvg-comp__cta { position: relative; border-color: transparent; }
.dvg-comp__col--elegido .dvg-comp__cta::before {
  content: ""; position: absolute; inset: -2px; padding: 2px;
  border-radius: var(--r-full);
  background: conic-gradient(from var(--dvg-giro), transparent 0deg, transparent 250deg, var(--brand-deep) 305deg, var(--brand) 340deg, var(--brand-hi) 355deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: dvg-girar-borde 4.5s linear infinite;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .dvg-comp__col--elegido .dvg-comp__cta::before { animation: none; }
}
@media (max-width: 720px) {
  .dvg-comp__carta.dvg-comp__col--elegido { position: relative; border-color: transparent; }
  .dvg-comp__carta.dvg-comp__col--elegido::before {
    content: ""; position: absolute; inset: -1px; padding: 1px;
    border-radius: inherit;
    background: conic-gradient(from var(--dvg-giro), transparent 0deg, transparent 250deg, var(--brand-deep) 305deg, var(--brand) 340deg, var(--brand-hi) 355deg, transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: dvg-girar-borde 4.5s linear infinite;
    pointer-events: none;
  }
}

@property --dvg-giro {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.dvg-borde-vivo {
  position: relative;
  border: 1px solid transparent;
}

.dvg-borde-vivo::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(from var(--dvg-giro), transparent 0deg, transparent 250deg, var(--brand-deep) 305deg, var(--brand) 340deg, var(--brand-hi) 355deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: dvg-girar-borde 4.5s linear infinite;
  pointer-events: none;
}

@keyframes dvg-girar-borde {
  to { --dvg-giro: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .dvg-borde-vivo::before { animation: none; }
}