/* =========================================================
   Landing de campaña /sistema — ronda 3 (5-oct-2026)

   Forma de Criver (firma/campanas/meta-ads/referencias/criver-landing/): fondo claro, UNA
   columna centrada, poco texto, visual. Sin fondos animados (la seda en video de la ronda 2 no
   está aprobada). La temperatura la ponen el índigo del logo en tintes suaves, los íconos de
   línea y las tarjetas; el registro verbal sigue siendo el de brand.md.

   styles.css sigue cargado por el formulario (campos, calendario) y el aviso de cookies, que es
   código probado de punta a punta. Todo lo demás vive acá con prefijo `lp-`.
   ========================================================= */

.sistema {
  --ink:        #16213E;
  --ink-soft:   #4B5563;
  --ink-muted:  #8A93A6;
  --brand:      #443EDE;
  --brand-dark: #3630B8;
  --brand-tint: #EEEDFB;
  --brand-soft: #F5F4FE;
  --steel:      #3A5A8C;
  --hairline:   #E4E7F0;
  --mist:       #F7F8FB;
  --paper:      #FFFFFF;

  --col: 640px;
  --lp-section-y: clamp(3.5rem, 8vw, 5.5rem);
  --radius-card: 16px;
  --shadow-card: 0 1px 2px rgba(22,33,62,.04), 0 12px 30px -14px rgba(22,33,62,.16);
  --shadow-form: 0 2px 6px rgba(22,33,62,.05), 0 28px 60px -24px rgba(68,62,222,.32);
  --ease: cubic-bezier(.16,1,.3,1);

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

.sistema [hidden] { display: none !important; }

/* Variante de oferta: solo se ve el bloque de la variante activa (la fija el <head>). */
[data-offer="a"] [data-only="b"],
[data-offer="b"] [data-only="a"] { display: none !important; }

/* ---------- Base ---------- */
.lp-col { max-width: var(--col); margin-inline: auto; padding-inline: 20px; text-align: center; }
.lp-section { padding-block: var(--lp-section-y); }
.lp-section--mist { background: var(--mist); }

.lp-h2 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.4rem);
  line-height: 1.15; letter-spacing: -.015em;
  margin: 0; color: var(--ink); text-wrap: balance;
}
.lp-h2 em, .lp-hero__title em { font-style: italic; color: var(--brand); }
.lp-sub { margin: .8rem auto 0; font-size: 1.05rem; line-height: 1.55; color: var(--ink-soft); max-width: 32rem; }
.lp-note { margin: 1.5rem auto 0; padding-inline: 20px; max-width: var(--col); font-size: .78rem; line-height: 1.5; color: var(--ink-muted); text-align: center; }

.lp-icon svg, .lp-time__dot svg {
  width: 100%; height: 100%;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.lp-icon {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 11px;
  border-radius: 12px; background: var(--brand-tint); color: var(--brand);
}

/* ---------- Botón ---------- */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .95rem 1.7rem; border-radius: 12px;
  background: var(--brand); color: #fff; font-weight: 600; font-size: 1rem;
  text-decoration: none; box-shadow: 0 10px 24px -10px rgba(68,62,222,.6);
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.lp-btn:hover { background: var(--brand-dark); transform: translateY(-1px); }
.lp-btn--lg { padding: 1.05rem 2.2rem; font-size: 1.05rem; }

/* ---------- Barra: solo el logo, centrado, sin salidas ---------- */
.lp-bar { display: flex; justify-content: space-between; align-items: center; max-width: 1040px; margin: 0 auto; padding: 1.4rem 20px .4rem; }
.lp-bar__brand img { display: block; height: 30px; width: auto; }
.lp-bar__channel { display: block; flex: none; width: 30px; height: 30px; }

/* ---------- Héroe ---------- */
.lp-hero {
  padding: clamp(1.25rem, 4vw, 2.5rem) 0 clamp(3rem, 7vw, 4.5rem);
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(68,62,222,.10), transparent 70%),
    var(--paper);
}
.lp-pill {
  display: inline-block; margin: 0;
  padding: .45rem 1rem; border-radius: 999px;
  background: var(--brand-tint); color: var(--brand);
  font-size: .82rem; font-weight: 600; line-height: 1.4; max-width: 30rem; text-wrap: balance;
}
.lp-hero__title {
  font-family: var(--serif); font-weight: 500; color: var(--ink);
  font-size: clamp(2.1rem, 1.5rem + 2.8vw, 3.2rem); line-height: 1.08; letter-spacing: -.02em;
  margin: 1.1rem 0 0; text-wrap: balance;
}
.lp-hero__lead { margin: 1rem auto 0; font-size: 1.08rem; line-height: 1.55; color: var(--ink-soft); max-width: 30rem; }

/* La tarjeta del formulario: blanca, con sombra, "Paso N de 6" arriba (Criver §2.3). */
.sistema .lp-hero .form-card {
  margin: 1.75rem 0 0; text-align: left;
  border: 1px solid var(--hairline); border-radius: 18px;
  box-shadow: var(--shadow-form); background: var(--paper); color: var(--ink);
}
.lp-progress { margin-bottom: 1.25rem; }
.lp-progress__top {
  display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; flex-wrap: wrap;
  font-size: .8rem; color: var(--ink-muted);
}
.lp-progress__top strong { font-weight: 600; color: var(--brand); }
.lp-progress__track { margin-top: .55rem; height: 6px; border-radius: 999px; background: var(--brand-tint); overflow: hidden; }
.lp-progress__track span { display: block; height: 100%; width: 16.66%; border-radius: inherit; background: var(--brand); transition: width .4s var(--ease); }

.lp-proof { display: inline-flex; align-items: center; gap: .7rem; margin-top: 1.25rem; text-align: left; }
.lp-proof { gap: .9rem; }
.lp-proof img { width: 76px; height: 76px; flex: none; }
.lp-proof p { margin: 0; font-size: .86rem; line-height: 1.4; color: var(--ink-soft); }
.lp-proof strong { color: var(--ink); font-weight: 600; }

/* ---------- La puerta: opciones de un toque ---------- */
.sis-options { display: grid; gap: .65rem; margin-top: .5rem; }
.sis-option { position: relative; display: block; cursor: pointer; }
.sis-option input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.sis-option span {
  display: flex; align-items: center; gap: .8rem;
  padding: 1rem 1.1rem; border: 1.5px solid var(--hairline); border-radius: 12px;
  font-weight: 500; color: var(--ink); background: #fff;
  transition: border-color .15s ease, background-color .15s ease;
}
.sis-option span::before {
  content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #C3C8D6;
}
.sis-option:hover span { border-color: var(--brand); }
.sis-option input:checked + span { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.sis-option input:checked + span::before { border-color: var(--brand); box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 9px var(--brand); }
.sis-option input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
[data-error-group] { display: block; font-size: .8rem; color: #C0392B; margin-top: .35rem; min-height: 1rem; }
.sis-exit-done { margin-top: 1.25rem; font-weight: 500; color: var(--brand); }

/* ---------- El problema: cuatro frases que entran una tras otra ---------- */
.lp-pains { list-style: none; margin: 1.75rem auto 0; padding: 0; display: grid; gap: .7rem; max-width: 30rem; text-align: left; }
.lp-pains li {
  display: flex; align-items: center; gap: .9rem;
  padding: .95rem 1.1rem; border-radius: 14px;
  background: var(--paper); border: 1px solid var(--hairline); box-shadow: var(--shadow-card);
  font-size: 1.02rem; font-weight: 500; line-height: 1.4; color: var(--ink);
}
.lp-pains__mark {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px;
  background: var(--brand-tint); color: var(--brand); font-family: var(--serif); font-size: 1.15rem; font-weight: 500;
}
.js-reveal .lp-pains li { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js-reveal .lp-pains.is-in li { opacity: 1; transform: none; }
.js-reveal .lp-pains.is-in li:nth-child(2) { transition-delay: .12s; }
.js-reveal .lp-pains.is-in li:nth-child(3) { transition-delay: .24s; }
.js-reveal .lp-pains.is-in li:nth-child(4) { transition-delay: .36s; }

/* ---------- El piloto: línea de tiempo que se ilumina con el scroll ----------
   sistema.js fija --p (0 a 1) según cuánto de la línea pasó por el centro de la pantalla, y
   marca .is-lit en cada hito que la luz ya alcanzó. Sin JS, todo queda encendido. */
.lp-time { position: relative; margin: 2.25rem 0 0; text-align: left; --p: 1; }
.lp-time ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.lp-time__rail { position: absolute; left: 21px; top: 22px; bottom: 22px; width: 3px; border-radius: 3px; background: var(--hairline); overflow: hidden; }
.lp-time__fill {
  position: absolute; inset: 0 0 auto; height: calc(var(--p) * 100%);
  background: linear-gradient(180deg, var(--brand), #7C77F0);
  box-shadow: 0 0 12px rgba(68,62,222,.55);
}
.lp-time li { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 1rem; align-items: start; }
.lp-time__dot {
  position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; padding: 11px;
  border-radius: 50%; background: var(--brand); color: #fff; border: 2px solid var(--brand);
  box-shadow: 0 0 0 5px var(--mist);
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}
.lp-time__body {
  background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius-card); padding: 1rem 1.15rem;
  box-shadow: var(--shadow-card);
  transition: opacity .45s var(--ease), transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.lp-time li.is-lit .lp-time__dot { box-shadow: 0 0 0 5px var(--mist), 0 0 0 9px rgba(68,62,222,.16); transform: scale(1.06); }
/* Con JS (.is-live), lo que la luz todavía no alcanza queda apagado. */
.lp-time.is-live li:not(.is-lit) .lp-time__dot { background: var(--paper); color: var(--ink-muted); border-color: var(--hairline); }
.lp-time.is-live li:not(.is-lit) .lp-time__body { opacity: .5; transform: translateX(6px); box-shadow: none; }
.lp-time__when {
  display: inline-block; font-family: var(--mono); font-size: .7rem; letter-spacing: .06em;
  color: var(--brand); background: var(--brand-tint); padding: .22rem .55rem; border-radius: 6px;
}
.lp-time h3 { margin: .5rem 0 0; font-family: var(--sans); font-size: 1.04rem; font-weight: 600; color: var(--ink); }
.lp-time p { margin: .3rem 0 0; font-size: .94rem; line-height: 1.5; color: var(--ink-soft); }
/* El hito de la garantía resalta cuando se enciende. */
.lp-time:not(.is-live) .lp-time__key .lp-time__body, .lp-time__key.is-lit .lp-time__body { background: var(--brand); border-color: var(--brand); box-shadow: 0 16px 34px -14px rgba(68,62,222,.6); }
.lp-time:not(.is-live) .lp-time__key .lp-time__when, .lp-time__key.is-lit .lp-time__when { background: rgba(255,255,255,.18); color: #fff; }
.lp-time:not(.is-live) .lp-time__key :is(h3, p), .lp-time__key.is-lit :is(h3, p) { color: #fff; }

/* ---------- La garantía ---------- */
.lp-guarantee {
  position: relative; padding: clamp(2rem, 5vw, 2.75rem) clamp(1.4rem, 4vw, 2.5rem);
  border-radius: 22px; background: var(--brand-soft); border: 1px solid rgba(68,62,222,.22);
}
.lp-guarantee__seal {
  display: grid; place-items: center; width: 64px; height: 64px; padding: 15px; margin: 0 auto;
  border-radius: 50%; background: var(--brand); color: #fff; box-shadow: 0 14px 30px -12px rgba(68,62,222,.7);
}
.lp-guarantee__seal svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lp-guarantee__tag { margin: 1rem 0 0; font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); }
.lp-guarantee__title { margin: .7rem 0 0; font-family: var(--serif); font-weight: 500; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); line-height: 1.18; letter-spacing: -.012em; color: var(--ink); text-wrap: balance; }
.lp-guarantee__title em { font-style: italic; color: var(--brand); }
.lp-guarantee__sub { margin: 1rem auto 0; max-width: 28rem; font-size: .95rem; line-height: 1.55; color: var(--ink-soft); }
.js-reveal .lp-guarantee.is-in .lp-guarantee__seal { animation: lp-seal .8s var(--ease) both; }
@keyframes lp-seal { from { transform: scale(.6) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Resultados: tarjetas con la cifra arriba (Criver §2.6) ---------- */
.lp-cases {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem;
  max-width: 1040px; margin: 2rem auto 0; padding-inline: 20px;
}
.lp-case {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper); border: 1px solid var(--hairline); border-radius: 18px; box-shadow: var(--shadow-card);
}
.lp-case__fig {
  padding: 1.5rem 1.4rem 1.3rem; color: #fff; text-align: left;
  background: linear-gradient(135deg, var(--brand) 0%, var(--steel) 100%);
}
.lp-case__fig strong { display: block; font-family: var(--serif); font-weight: 500; font-size: 2.9rem; line-height: 1; letter-spacing: -.02em; }
.lp-case__fig span { display: block; margin-top: .45rem; font-size: .86rem; color: #DCDAFB; }
.lp-case__body { display: flex; flex-direction: column; flex: 1; padding: 1.3rem 1.4rem 1.4rem; text-align: left; }
.lp-case__logo { height: 26px; width: auto; max-width: 120px; object-fit: contain; object-position: left; filter: grayscale(1) brightness(.35); margin-bottom: 1rem; }
.lp-case blockquote { margin: 0; flex: 1; font-size: .93rem; line-height: 1.55; color: var(--ink-soft); }
.lp-case__by { margin: 1rem 0 0; font-size: .84rem; font-weight: 600; color: var(--ink); }

/* ---------- Es para ti si ---------- */
.lp-fit { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: .9rem; text-align: left; }
.lp-fit li {
  position: relative; padding: 1rem 1.15rem 1rem 3.4rem;
  background: var(--paper); border: 1px solid var(--hairline); border-radius: 14px;
  font-size: 1rem; line-height: 1.5; color: var(--ink-soft);
}
/* La casilla (::before) y el tick (::after) van separados para que el tick pueda entrar solo. */
.lp-fit li::before, .lp-fit li::after {
  content: ""; position: absolute; left: 1.05rem; top: 1rem; width: 1.5rem; height: 1.5rem; border-radius: 7px;
}
.lp-fit li::before { background: var(--brand); border: 1.5px solid var(--brand); box-sizing: border-box; }
.lp-fit li::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 75% no-repeat;
}
.lp-fit strong { color: var(--ink); font-weight: 600; }
/* Con JS, las casillas parten vacías y se marcan una a una cuando la lista entra en pantalla
   (misma lógica de .lp-pains y de la línea de tiempo). Sin JS, todo queda marcado. */
.js-reveal .lp-fit li { transition: border-color .4s var(--ease); }
.js-reveal .lp-fit li::before { background: var(--paper); border-color: var(--hairline); transition: background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease); }
.js-reveal .lp-fit li::after { opacity: 0; transform: scale(.4); transition: opacity .3s var(--ease), transform .45s cubic-bezier(.34,1.56,.64,1); }
.js-reveal .lp-fit.is-in li { border-color: rgba(68,62,222,.28); }
.js-reveal .lp-fit.is-in li::before { background: var(--brand); border-color: var(--brand); box-shadow: 0 0 0 4px rgba(68,62,222,.14); }
.js-reveal .lp-fit.is-in li::after { opacity: 1; transform: none; }
.js-reveal .lp-fit.is-in li:nth-child(1), .js-reveal .lp-fit.is-in li:nth-child(1)::before, .js-reveal .lp-fit.is-in li:nth-child(1)::after { transition-delay: .35s; }
.js-reveal .lp-fit.is-in li:nth-child(2), .js-reveal .lp-fit.is-in li:nth-child(2)::before, .js-reveal .lp-fit.is-in li:nth-child(2)::after { transition-delay: .8s; }
.js-reveal .lp-fit.is-in li:nth-child(3), .js-reveal .lp-fit.is-in li:nth-child(3)::before, .js-reveal .lp-fit.is-in li:nth-child(3)::after { transition-delay: 1.25s; }
.js-reveal .lp-fit.is-in li:nth-child(4), .js-reveal .lp-fit.is-in li:nth-child(4)::before, .js-reveal .lp-fit.is-in li:nth-child(4)::after { transition-delay: 1.7s; }

/* ---------- Preguntas ---------- */
.lp-faq { margin-top: 1.75rem; display: grid; gap: .6rem; text-align: left; }
.lp-faq details { background: var(--paper); border: 1px solid var(--hairline); border-radius: 14px; padding: 1rem 1.2rem; }
.lp-faq details[open] { border-color: rgba(68,62,222,.3); box-shadow: var(--shadow-card); }
.lp-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-weight: 600; font-size: .98rem; color: var(--ink); }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after {
  content: "+"; flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--brand-tint); color: var(--brand); font-weight: 500; font-size: 1.05rem;
}
.lp-faq details[open] summary::after { content: "–"; background: var(--brand); color: #fff; }
.lp-faq details p { margin: .75rem 0 0; font-size: .94rem; line-height: 1.6; color: var(--ink-soft); }

/* ---------- Cierre ---------- */
.lp-close {
  padding-block: clamp(3.5rem, 8vw, 5rem);
  background: radial-gradient(ellipse 70% 80% at 50% 100%, rgba(68,62,222,.12), transparent 70%), var(--paper);
}
.lp-close .lp-sub { margin-bottom: 1.6rem; }

.lp-footer {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem;
  padding: 1.5rem 20px 2rem; border-top: 1px solid var(--hairline);
  font-size: .8rem; color: var(--ink-muted);
}
.lp-footer a { color: var(--ink-soft); }

/* ---------- Aparición al hacer scroll (sutil; nada se mueve solo) ---------- */
/* Solo se esconde si sistema.js cargó (pone .js-reveal en <html>): sin JS, todo se ve. */
.js-reveal [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  /* Resultados: carrusel con scroll-snap, como el de Criver. */
  .lp-cases {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px;
    padding-bottom: .75rem; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .lp-cases::-webkit-scrollbar { display: none; }
  .lp-case { scroll-snap-align: start; }
}
@media (max-width: 560px) {
  .lp-bar { padding-top: 1.1rem; }
  .lp-bar__brand img { height: 26px; }
  .lp-bar__channel { width: 26px; height: 26px; }
  .lp-pill { font-size: .76rem; padding: .45rem .9rem; border-radius: 14px; }
  .lp-hero__title { font-size: 2.05rem; }
  .lp-hero__lead { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
  .lp-time__dot, .lp-time__body { transition: none; }
  .js-reveal .lp-pains li { opacity: 1; transform: none; transition: none; }
  .js-reveal .lp-fit li, .js-reveal .lp-fit li::before, .js-reveal .lp-fit li::after { transition: none; }
  .js-reveal .lp-guarantee.is-in .lp-guarantee__seal { animation: none; }
  .lp-btn, .lp-progress__track span { transition: none; }
}
.sis-options--compact { gap: .45rem; }
.sis-options--compact .sis-option span { padding: .7rem 1rem; font-size: .94rem; }

/* ---------- Prueba en el paso de contacto (27-oct-2026) ----------
   Donde más se cae el embudo: logos, un testimonio corto y Google Partner, sin empujar los campos. */
.step-proof { margin: .25rem 0 1.1rem; padding: .9rem 1rem; border-radius: 12px; background: var(--brand-soft); border: 1px solid var(--brand-tint); text-align: left; }
.step-proof__logos { display: flex; align-items: center; gap: 1.1rem; margin-bottom: .55rem; }
.step-proof__logos img { height: 20px; width: auto; max-width: 96px; object-fit: contain; filter: grayscale(1) brightness(.35); opacity: .8; }
.step-proof blockquote { margin: 0; font-family: "Newsreader", Georgia, serif; font-size: 1.05rem; line-height: 1.35; color: var(--ink); }
.step-proof figcaption { margin-top: .35rem; font-size: .78rem; color: var(--ink-muted); }
.step-proof figcaption strong { color: var(--ink-soft); font-weight: 600; }

/* ---------- Lo que una agencia no te muestra (27-oct-2026) ---------- */
.lp-vs { margin-top: 1.75rem; border-radius: var(--radius-card); overflow: hidden; background: var(--paper); border: 1px solid var(--hairline); box-shadow: var(--shadow-card); text-align: left; }
.lp-vs__head, .lp-vs__row { display: grid; grid-template-columns: 1fr 1fr; }
.lp-vs__head span { padding: .7rem 1rem; font-family: "IBM Plex Mono", monospace; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.lp-vs__head span:last-child { background: var(--brand); color: #fff; }
.lp-vs__row span { padding: .85rem 1rem; border-top: 1px solid var(--hairline); font-size: .9rem; line-height: 1.45; color: var(--ink-muted); }
.lp-vs__row span:last-child { background: var(--brand-soft); color: var(--ink); font-weight: 500; }
.lp-shots { margin: 2rem 0 0 calc(50% - min(440px, 50vw - 16px)); width: min(880px, calc(100vw - 32px)); display: grid; gap: 1.75rem; }
.lp-shot { margin: 0; }
.lp-shot--cifras { max-width: 640px; margin: 0 auto; }
.lp-shot img { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: var(--shadow-card); background: #F7F8FB; }
.lp-shot figcaption, .lp-weekly figcaption { margin-top: .7rem; font-size: .85rem; color: var(--ink-soft); text-align: center; }
.lp-weekly { margin: 0; }
.lp-weekly__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.lp-weekly img { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: var(--shadow-card); background: #fff; }
.lp-weekly figcaption { margin-top: .7rem; font-size: .85rem; color: var(--ink-soft); text-align: center; }
@media (max-width: 560px) {
  .lp-weekly__row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: .75rem; padding-bottom: .5rem; }
  .lp-weekly img { flex: 0 0 78%; width: 78%; min-width: 0; scroll-snap-align: start; }
}
/* 27-oct-2026 (Gabriel): una x en lo habitual, un check y el logo en Magnia, y títulos sobre las capturas. */
.lp-vs__logo { display: block; height: 14px; width: auto; }
.lp-vs__row span { display: flex; gap: .65rem; align-items: flex-start; }
.lp-vs__row span::before { flex: 0 0 1.2rem; height: 1.2rem; margin-top: .1rem; border-radius: 50%; display: grid; place-items: center; font-size: .68rem; font-weight: 700; line-height: 1; }
.lp-vs__row span:first-child::before { content: "\2715"; background: #ECEEF3; color: #8B91A0; }
.lp-vs__row span:last-child::before { content: "\2713"; background: var(--brand); color: #fff; }
.lp-shots__title { margin: 1rem 0 -.75rem; text-align: center; font-family: "Newsreader", Georgia, serif; font-weight: 400; font-size: clamp(1.35rem, 3.2vw, 1.75rem); line-height: 1.2; color: var(--ink); }
.lp-shots__title em { font-style: italic; color: var(--brand); }

/* Cuadrícula índigo de fondo (27-oct-2026, Gabriel: la de las landings de los SaaS, sutil). Se desvanece hacia
   los bordes; en el encabezado se ve un poco más que en el resto de las secciones. */
.hm-hero, .lp-hero, .lp-section, .lp-close { position: relative; isolation: isolate; }
.hm-hero::before, .lp-hero::before, .lp-section::before, .lp-close::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(68,62,222,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(68,62,222,.045) 1px, transparent 1px);
  background-size: 44px 44px; background-position: center top;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 80%);
          mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 80%);
}
.hm-hero::before, .lp-hero::before {
  background-image: linear-gradient(rgba(68,62,222,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(68,62,222,.07) 1px, transparent 1px);
}