/* ─────────────────────────────────────────────────────────────
   Patrón Listo · Sitio público (landing + blog)
   CSS plano, sin build ni JavaScript: estas páginas son HTML
   estático servido tal cual para que Google las lea sin ejecutar
   nada. La aplicación (React/Tailwind) vive aparte, en /app/.
   Paleta y tipografías replican tailwind.config.js.
   ───────────────────────────────────────────────────────────── */

:root {
  --azul: #003366;
  --azul-900: #00203f;
  --azul-700: #0a4a8a;
  --azul-100: #e1eaf4;
  --azul-50: #f0f5fb;
  --oro: #c8a45c;
  --oro-300: #e4cf9e;
  --tinta: #0b1b2b;
  --texto: #1e293b;
  --suave: #55657a;
  --claro: #f6f8fb;
  --linea: #e6ebf2;
  --verde: #198754;
  --verde-50: #eff9f3;
  --ancho: 1120px;
  --radio: 16px;
  --sombra: 0 1px 2px rgba(16, 26, 46, .05), 0 18px 40px -22px rgba(16, 26, 46, .28);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: #fff;
  color: var(--texto);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: Fraunces, Georgia, serif;
  color: var(--tinta);
  letter-spacing: -.03em;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}

a { color: var(--azul-700); text-decoration-color: rgba(10, 74, 138, .3); text-underline-offset: 3px; }
a:hover { color: var(--azul); }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; border-radius: 4px; }

img { max-width: 100%; height: auto; }

.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: 20px; }

/* Enlace de salto para lectores de pantalla y teclado */
.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--azul); color: #fff; padding: 10px 16px; border-radius: 0 0 10px 0;
}
.saltar:focus { left: 0; }

/* ── Barra superior ── */
.barra {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--linea);
}
.barra > .contenedor {
  display: flex; align-items: center; gap: 20px;
  min-height: 66px; flex-wrap: wrap;
}
.marca {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: Fraunces, Georgia, serif; font-weight: 700; font-size: 1.28rem;
  letter-spacing: -.03em; color: var(--tinta); text-decoration: none;
}
.marca svg { width: 26px; height: 26px; color: var(--azul); flex: none; }
.nav { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.nav a {
  padding: 7px 12px; border-radius: 10px; font-size: .95rem; font-weight: 500;
  color: var(--texto); text-decoration: none;
}
.nav a:hover { background: var(--azul-50); color: var(--azul); }

/* ── Botones ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 12px; font-weight: 600; font-size: 1rem;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform .12s ease, filter .12s ease, background .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn-azul {
  background: linear-gradient(135deg, #00203f 0%, #003366 45%, #0a4a8a 100%);
  color: #fff; box-shadow: 0 0 0 1px rgba(0, 51, 102, .06), 0 16px 34px -18px rgba(0, 51, 102, .55);
}
.btn-azul:hover { filter: brightness(1.12); color: #fff; }
.btn-linea { border-color: var(--linea); background: #fff; color: var(--tinta); }
.btn-linea:hover { border-color: var(--azul-100); background: var(--azul-50); color: var(--azul); }
.btn-sm { padding: 8px 16px; font-size: .93rem; border-radius: 10px; }

/* ── Bloques ── */
.seccion { padding: 76px 0; }
.seccion-clara { background: var(--claro); border-block: 1px solid var(--linea); }
.eyebrow {
  font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--azul-700); margin: 0 0 12px;
}
.titulo-seccion { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
.lead { font-size: 1.12rem; color: var(--suave); max-width: 62ch; }

/* ── Portada ── */
.hero { padding: 72px 0 64px; background:
  radial-gradient(1100px 520px at 88% -10%, rgba(10, 74, 138, .10), transparent 58%),
  radial-gradient(820px 460px at -5% 108%, rgba(200, 164, 92, .12), transparent 52%); }
.hero h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); }
.hero .lead { margin: 20px 0 0; font-size: 1.18rem; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.nota-hero { margin: 18px 0 0; font-size: .9rem; color: var(--suave); }

.confianza {
  display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 40px 0 0;
  padding: 0; list-style: none; font-size: .93rem; color: var(--suave);
}
.confianza li { display: flex; align-items: center; gap: 8px; }
.confianza svg { width: 17px; height: 17px; color: var(--verde); flex: none; }

/* ── Rejillas de tarjetas ── */
.rejilla { display: grid; gap: 20px; margin-top: 40px; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
.tarjeta {
  background: #fff; border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 26px; box-shadow: var(--sombra);
}
.tarjeta h3 { font-size: 1.16rem; margin-bottom: 9px; }
.tarjeta p { margin: 0; color: var(--suave); font-size: .98rem; }
.icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px; margin-bottom: 15px;
  background: var(--azul-50); color: var(--azul); border: 1px solid var(--azul-100);
}
.icono svg { width: 21px; height: 21px; }

/* ── Pasos numerados ── */
.pasos { counter-reset: paso; display: grid; gap: 22px; margin-top: 40px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); list-style: none; padding: 0; }
.pasos li { counter-increment: paso; position: relative; padding-left: 56px; }
.pasos li::before {
  content: counter(paso); position: absolute; left: 0; top: -2px;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--azul); color: #fff;
  font-family: Fraunces, Georgia, serif; font-weight: 700; font-size: 1.06rem;
}
.pasos h3 { font-size: 1.08rem; margin-bottom: 5px; }
.pasos p { margin: 0; color: var(--suave); font-size: .97rem; }

/* ── Preguntas frecuentes ── */
.faq { margin-top: 34px; max-width: 78ch; }
.faq details {
  border: 1px solid var(--linea); border-radius: 13px; background: #fff;
  padding: 4px 20px; margin-bottom: 12px;
}
.faq details[open] { border-color: var(--azul-100); box-shadow: var(--sombra); }
.faq summary {
  cursor: pointer; padding: 15px 0; font-weight: 600; color: var(--tinta);
  font-size: 1.02rem; list-style: none; display: flex; justify-content: space-between; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--azul-700); font-weight: 400; font-size: 1.5rem; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0 0 16px; color: var(--suave); }

/* ── Llamado final ── */
.cta {
  background: linear-gradient(135deg, #00203f 0%, #003366 45%, #0a4a8a 100%);
  color: #fff; border-radius: 22px; padding: 52px 34px; text-align: center; margin: 0 0 76px;
}
.cta h2 { color: #fff; font-size: clamp(1.6rem, 3.4vw, 2.2rem); }
.cta p { color: rgba(255, 255, 255, .78); max-width: 56ch; margin: 16px auto 0; }
.cta .btn-oro { background: var(--oro); color: #241a06; margin-top: 26px; }
.cta .btn-oro:hover { background: var(--oro-300); color: #241a06; }

/* ── Blog ── */
.lista-notas { display: grid; gap: 20px; margin-top: 38px; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); padding: 0; list-style: none; }
.nota {
  display: flex; flex-direction: column; gap: 10px;
  background: #fff; border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 26px; box-shadow: var(--sombra); text-decoration: none; color: inherit;
}
.nota:hover { border-color: var(--azul-100); transform: translateY(-2px); transition: .15s; }
.nota h2, .nota h3 { font-size: 1.2rem; }
.nota p { margin: 0; color: var(--suave); font-size: .97rem; }
.etiqueta {
  align-self: flex-start; font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--azul-700); background: var(--azul-50);
  border: 1px solid var(--azul-100); border-radius: 999px; padding: 4px 11px;
}

/* ── Artículo ── */
.articulo { padding: 44px 0 60px; }
.articulo .contenedor { max-width: 760px; }
.migas { font-size: .88rem; color: var(--suave); margin: 0 0 22px; }
.migas a { text-decoration: none; }
.articulo h1 { font-size: clamp(1.9rem, 4.4vw, 2.7rem); }
.meta { margin: 16px 0 0; font-size: .89rem; color: var(--suave); }
.entradilla { font-size: 1.13rem; color: var(--suave); margin: 22px 0 0; }

.prosa { margin-top: 38px; }
.prosa h2 { font-size: 1.55rem; margin: 46px 0 14px; padding-top: 6px; }
.prosa h3 { font-size: 1.19rem; margin: 32px 0 10px; }
.prosa p { margin: 0 0 18px; }
.prosa ul, .prosa ol { margin: 0 0 20px; padding-left: 24px; }
.prosa li { margin-bottom: 9px; }
.prosa strong { color: var(--tinta); }
.prosa blockquote {
  margin: 26px 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--oro);
  color: var(--suave); font-style: italic;
}
.prosa table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: .95rem; }
.prosa th, .prosa td { border: 1px solid var(--linea); padding: 10px 13px; text-align: left; vertical-align: top; }
.prosa th { background: var(--azul-50); color: var(--tinta); font-weight: 600; }
.tabla-scroll { overflow-x: auto; margin: 0 0 24px; }

.aviso {
  background: var(--azul-50); border: 1px solid var(--azul-100);
  border-radius: 13px; padding: 18px 22px; margin: 34px 0;
  font-size: .95rem; color: var(--suave);
}
.aviso strong { color: var(--tinta); }

.caja-cta {
  background: var(--verde-50); border: 1px solid #cfe9db; border-radius: var(--radio);
  padding: 26px; margin: 40px 0;
}
.caja-cta h2, .caja-cta h3 { font-size: 1.18rem; margin-bottom: 8px; }
.caja-cta p { margin: 0 0 18px; color: var(--suave); font-size: .98rem; }

/* ── Pie ── */
.pie { background: var(--tinta); color: rgba(255, 255, 255, .62); padding: 52px 0 34px; font-size: .93rem; }
.pie a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.pie a:hover { color: #fff; text-decoration: underline; }
.pie h2, .pie h3 { color: #fff; font-size: .96rem; font-family: Inter, sans-serif; letter-spacing: 0; margin-bottom: 12px; }
.pie-rejilla { display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin-bottom: 8px; }
.pie .marca { color: #fff; }
.pie .marca svg { color: var(--oro); }
.pie-legal {
  margin-top: 38px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between; font-size: .86rem;
}

@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .seccion { padding: 56px 0; }
  .hero { padding: 48px 0; }
  .nav a { padding: 6px 9px; font-size: .9rem; }
  .cta { padding: 40px 22px; border-radius: 18px; }
}

/* ─────────────────────────────────────────────────────────────
   Revelado al entrar en pantalla · SIN JavaScript.
   animation-timeline: view() liga la animación al scroll desde el
   propio CSS. Va dentro de @supports a propósito: donde no existe
   (Safari, Firefox) no pasa nada y el contenido se ve normal. Esa
   es la única variante aceptable en una página cuyo trabajo es
   que Google la lea: nunca ocultar contenido esperando un script.
   ───────────────────────────────────────────────────────────── */
@keyframes plr-entrar { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .revelar > * {
      animation: plr-entrar .55s cubic-bezier(.23, 1, .32, 1) both;
      animation-timeline: view();
      animation-range: entry 0% cover 20%;
    }
    /* Escalonado dentro de una rejilla: la segunda tarjeta entra un pelo después. */
    .revelar > *:nth-child(2) { animation-range: entry 4% cover 24%; }
    .revelar > *:nth-child(3) { animation-range: entry 8% cover 28%; }
    .revelar > *:nth-child(4) { animation-range: entry 12% cover 32%; }
  }
}

/* La barra se despega del contenido solo cuando ya hiciste scroll. */
.barra { transition: box-shadow .2s ease, background-color .2s ease; }
.barra.pegada { box-shadow: 0 1px 0 var(--linea), 0 10px 30px -18px rgba(16, 26, 46, .25); }

/* ── Las tres puertas de entrada: app, herramientas, guías ── */
.puertas { display: grid; gap: 20px; margin-top: 42px; grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); }
.puerta {
  display: flex; flex-direction: column; gap: 12px;
  border-radius: 20px; padding: 30px 28px; text-decoration: none; color: inherit;
  border: 1px solid var(--linea); background: #fff; box-shadow: var(--sombra);
}
.puerta h3 { font-size: 1.28rem; }
.puerta p { margin: 0; color: var(--suave); font-size: .98rem; flex: 1; }
.puerta .flecha { font-weight: 600; font-size: .95rem; color: var(--azul-700); }
.puerta-principal {
  background: linear-gradient(135deg, #00203f 0%, #003366 48%, #0a4a8a 100%);
  border-color: transparent; color: #fff;
}
.puerta-principal h3, .puerta-principal .rotulo { color: #fff; }
.puerta-principal p { color: rgba(255, 255, 255, .78); }
.puerta-principal .flecha { color: var(--oro-300); }
.rotulo {
  align-self: flex-start; font-size: .68rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--azul-700);
}
@media (hover: hover) and (pointer: fine) {
  .puerta { transition: transform .2s cubic-bezier(.23, 1, .32, 1), box-shadow .2s ease; }
  .puerta:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(16,26,46,.05), 0 26px 48px -24px rgba(16,26,46,.32); }
  .nota { transition: transform .2s cubic-bezier(.23, 1, .32, 1), border-color .2s ease; }
}

/* ── Precios en tarjetas (la tabla se leía como una hoja de cálculo) ── */
.planes { display: grid; gap: 18px; margin-top: 40px; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }
.plan {
  position: relative; background: #fff; border: 1px solid var(--linea);
  border-radius: 18px; padding: 26px 22px; box-shadow: var(--sombra);
}
.plan-destacado { border: 2px solid var(--azul); box-shadow: 0 2px 4px rgba(16,26,46,.05), 0 24px 48px -22px rgba(0,51,102,.4); }
.plan-insignia {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--azul); color: #fff; font-size: .66rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px;
}
.plan h3 { font-size: 1.16rem; }
.plan .quien { font-size: .84rem; color: var(--suave); margin: 4px 0 0; }
.plan .precio { font-family: Fraunces, Georgia, serif; font-weight: 700; font-size: 2rem; letter-spacing: -.03em; color: var(--tinta); margin: 16px 0 0; }
.plan .precio small { font-family: Inter, sans-serif; font-size: .8rem; font-weight: 500; color: var(--suave); letter-spacing: 0; }
.plan .anual { margin: 6px 0 0; font-size: .82rem; color: var(--suave); }
.plan .anual strong { color: var(--tinta); }
.plan .ahorro { color: var(--verde); font-weight: 600; }

/* Movimiento reducido: nada se desplaza ni se revela; todo llega ya visible.
   Va al final a propósito, para ganar por orden en la cascada. */
@media (prefers-reduced-motion: reduce) {
  .revelar > * { animation: none; opacity: 1; transform: none; }
  .puerta:hover, .nota:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Capa moderna: producto a la vista, enlaces con forma y ritmo
   editorial. Lo que hacía que esto pareciera plantilla era que no
   había NADA que mirar: solo cajas con texto.
   ═══════════════════════════════════════════════════════════════ */

/* ── Enlaces con forma: subrayado que crece, flecha que avanza ── */
.enlace {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; color: var(--azul-700); text-decoration: none;
  background-image: linear-gradient(var(--azul-700), var(--azul-700));
  background-size: 0% 2px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .3s cubic-bezier(.23, 1, .32, 1);
}
.enlace:hover { background-size: 100% 2px; }
.flecha {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 600; font-size: .95rem; margin-top: auto;
}
.flecha::after {
  content: "→"; transition: transform .25s cubic-bezier(.23, 1, .32, 1);
  font-size: 1.05em; line-height: 1;
}
@media (hover: hover) and (pointer: fine) {
  .puerta:hover .flecha::after, a:hover > .flecha::after { transform: translateX(5px); }
}

/* ── Portada a dos columnas: texto a la izquierda, producto a la derecha ── */
.hero-doble {
  display: grid; gap: 48px; align-items: center;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
}
@media (max-width: 900px) { .hero-doble { grid-template-columns: 1fr; gap: 36px; } }

.insignia {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--linea); border-radius: 999px;
  padding: 6px 14px 6px 8px; font-size: .84rem; font-weight: 500; color: var(--suave);
  box-shadow: 0 1px 2px rgba(16, 26, 46, .04);
}
.insignia b { color: var(--tinta); font-weight: 600; }
.punto-vivo {
  width: 7px; height: 7px; border-radius: 50%; background: var(--verde); flex: none;
  box-shadow: 0 0 0 3px rgba(25, 135, 84, .16);
}

/* ── Marco de producto: el mockup se ve como una app, no como un dibujo ── */
.marco {
  position: relative; border-radius: 18px; overflow: hidden;
  background: #fff; border: 1px solid var(--linea);
  box-shadow: 0 2px 6px rgba(16, 26, 46, .06), 0 40px 80px -32px rgba(0, 51, 102, .42);
}
.marco svg { display: block; width: 100%; height: auto; }
.marco::after { /* brillo de cristal en la esquina */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(150deg, rgba(255, 255, 255, .5), transparent 42%);
}
.marco-flotante { position: relative; }
.marco-flotante::before { /* resplandor de marca detrás del marco */
  content: ""; position: absolute; inset: 12% -6% -10% 8%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(10, 74, 138, .22), transparent 72%);
  filter: blur(28px);
}
.pie-marco { margin: 14px 0 0; font-size: .86rem; color: var(--suave); text-align: center; }

/* ── Fichas de capacidad: sustituyen párrafos por hechos escaneables ── */
.fichas { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; }
.fichas li {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 1px solid var(--linea); border-radius: 10px;
  padding: 7px 12px; font-size: .87rem; color: var(--texto);
}
.fichas svg { width: 15px; height: 15px; color: var(--azul-700); flex: none; }

/* ── Bento: cajas de distinto tamaño, que es lo que rompe el aire de plantilla ── */
.bento { display: grid; gap: 16px; margin-top: 42px; grid-template-columns: repeat(6, 1fr); }
.bento > * {
  grid-column: span 2; background: #fff; border: 1px solid var(--linea);
  border-radius: 18px; padding: 26px; box-shadow: var(--sombra);
}
.bento .ancha { grid-column: span 4; }
.bento .completa { grid-column: span 6; }
.bento .oscura {
  background: linear-gradient(135deg, #00203f 0%, #003366 52%, #0a4a8a 100%);
  border-color: transparent; color: #fff;
}
.bento .oscura h3 { color: #fff; }
.bento .oscura p { color: rgba(255, 255, 255, .76); }
.bento h3 { font-size: 1.12rem; margin-bottom: 8px; }
.bento p { margin: 0; color: var(--suave); font-size: .96rem; }
.bento .cifra {
  font-family: Fraunces, Georgia, serif; font-weight: 700; letter-spacing: -.03em;
  font-size: 2.1rem; color: var(--azul); line-height: 1; margin-bottom: 6px;
}
.bento .oscura .cifra { color: var(--oro-300); }
@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento > *, .bento .ancha, .bento .completa { grid-column: span 2; }
}
@media (hover: hover) and (pointer: fine) {
  .bento > * { transition: transform .2s cubic-bezier(.23, 1, .32, 1), box-shadow .2s ease; }
  .bento > *:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(16,26,46,.05), 0 28px 52px -24px rgba(16,26,46,.34); }
}

/* ── Flujo del proceso de firma: numerado, con línea que los une ── */
.flujo { display: grid; gap: 0; margin-top: 44px; grid-template-columns: repeat(4, 1fr); counter-reset: fase; }
.flujo > li { counter-increment: fase; position: relative; padding: 0 18px 0 0; list-style: none; }
.flujo > li::before {
  content: counter(fase); display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%; margin-bottom: 14px;
  background: #fff; border: 2px solid var(--azul); color: var(--azul);
  font-family: Fraunces, Georgia, serif; font-weight: 700; font-size: .95rem;
}
.flujo > li::after { /* la línea que conecta con el siguiente paso */
  content: ""; position: absolute; top: 17px; left: 40px; right: 12px; height: 2px;
  background: linear-gradient(90deg, var(--azul-100), var(--linea));
}
.flujo > li:last-child::after { display: none; }
.flujo h3 { font-size: 1.02rem; margin-bottom: 5px; }
.flujo p { margin: 0; color: var(--suave); font-size: .92rem; }
@media (max-width: 820px) {
  .flujo { grid-template-columns: 1fr; gap: 26px; }
  .flujo > li { padding: 0 0 0 50px; }
  .flujo > li::before { position: absolute; left: 0; top: 0; margin: 0; }
  .flujo > li::after { top: 38px; left: 16px; right: auto; bottom: -26px; width: 2px; height: auto;
    background: linear-gradient(180deg, var(--azul-100), var(--linea)); }
}

/* ── Cita editorial: rompe el ritmo de tarjetas ── */
.remate {
  margin: 0; padding: 40px 0 0; max-width: 24ch;
  font-family: Fraunces, Georgia, serif; font-size: clamp(1.5rem, 3vw, 2.05rem);
  font-weight: 600; letter-spacing: -.03em; line-height: 1.2; color: var(--tinta);
}
.remate span { color: var(--azul-700); }


/* ═══════════════════════════════════════════════════════════════
   Movimiento ligado al scroll · sin una línea de JavaScript
   Todo va dentro de @supports: donde no exista, la página se
   comporta como una página normal. Nada se oculta esperando nada.
   ═══════════════════════════════════════════════════════════════ */

/* Los anclajes ya no quedan escondidos debajo de la barra pegada.
   Era un fallo real: al pulsar "Precios" el título se metía bajo la barra. */
[id] { scroll-margin-top: 88px; }


/* ── Las dos animaciones ligadas al scroll ──
   Estaban REFERENCIADAS abajo pero nunca definidas, así que el navegador
   descartaba ambas y ninguna de las dos ocurría: ni el producto se alzaba ni
   la línea se dibujaba. Aquí quedan definidas.

   Van de un estado inicial al natural, y las mueve el scroll (no el reloj):
   con animation-timeline: view() el progreso es la posición del elemento en
   la pantalla, así que el gesto se siente ligado a la mano de quien lee. */
@keyframes plr-alzar {
  from { transform: translateY(26px) scale(.972); opacity: .55; }
  to   { transform: none; opacity: 1; }
}
@keyframes plr-trazo {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
/* Los diagramas se descubren de izquierda a derecha, en el mismo sentido en
   que apuntan sus flechas: se leen como si se dibujaran solos. */
@keyframes plr-dibujar {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* El producto se alza al entrar: el gesto que hace que se sienta una app y no una imagen. */
    .marco-flotante .marco {
      animation-name: plr-alzar;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 8% cover 42%;
    }
    /* La línea que une los pasos se dibuja conforme avanzas. */
    .flujo > li::after {
      transform-origin: 0 50%;
      animation-name: plr-trazo;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 25% cover 45%;
    }
    /* Cada diagrama se traza al entrar. Va sobre el SVG y no sobre sus trazos
       uno por uno: con longitudes de ruta tan distintas, animar cada trazo
       daría un ritmo desparejo, y este barrido respeta el sentido de lectura. */
    .esquema svg {
      animation-name: plr-dibujar;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 18% cover 40%;
    }
    /* Un pelo más de recorrido en el revelado, y que termine antes: se siente más fluido. */
    .revelar > * { animation-range: entry 0% cover 24%; }
  }
}

/* ── El antes y el después: el momento que le faltaba a la historia ── */
.contraste { display: grid; gap: 18px; margin-top: 44px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.lado { border-radius: 20px; padding: 30px 28px; border: 1px solid var(--linea); background: #fff; box-shadow: var(--sombra); }
.lado-mal { background: #fdf4f5; border-color: #f2dade; }
.lado-bien { background: linear-gradient(135deg, #00203f 0%, #003366 55%, #0a4a8a 100%); border-color: transparent; }
.lado h3 { font-size: 1.14rem; margin-bottom: 4px; }
.lado-bien h3 { color: #fff; }
.lado .cuando { margin: 0 0 18px; font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #b02a37; }
.lado-bien .cuando { color: var(--oro-300); }
.lado ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.lado li { display: flex; gap: 11px; align-items: flex-start; font-size: .97rem; color: var(--suave); line-height: 1.5; }
.lado-bien li { color: rgba(255, 255, 255, .84); }
.lado li b { color: var(--tinta); font-weight: 600; }
.lado-bien li b { color: #fff; }
.senal { flex: none; width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; margin-top: 2px; }
.senal svg { width: 12px; height: 12px; stroke-width: 3; }
.lado-mal .senal { background: #f6dee1; color: #8f2029; }
.lado-bien .senal { background: rgba(228, 207, 158, .18); color: var(--oro-300); }
.veredicto { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid rgba(0, 0, 0, .07); font-weight: 600; color: var(--tinta); }
.lado-bien .veredicto { border-top-color: rgba(255, 255, 255, .16); color: #fff; }


/* ═══════════════════════════════════════════════════════════════
   Desplazamiento suave · Lenis (lenis.min.js, autoalojado)
   Sustituye al scroll-snap que hubo aqui: el snap 'proximity'
   frenaba y jalaba la rueda entre secciones —esa era la sensacion
   de scroll trabado— y ademas es incompatible con Lenis. Lenis da
   la inercia fluida en rueda; en tactil no interviene (nativo).
   Si el script no carga, la pagina se desplaza como siempre.
   ═══════════════════════════════════════════════════════════════ */
html { scroll-padding-top: 88px; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ── Revelado de respaldo (Safari y Firefox) ──
   Donde no existe animation-timeline, un IntersectionObserver pone
   .visto al entrar en pantalla. La clase revela-js la agrega SOLO el
   script y SOLO en esos navegadores: sin JavaScript nada se oculta,
   que es la regla de esta pagina. */
@media (prefers-reduced-motion: no-preference) {
  html.revela-js .revelar > *,
  html.revela-js main > section .eyebrow,
  html.revela-js main > section > .contenedor > h2 {
    opacity: 0; transform: translateY(26px) scale(.988);
    transition: opacity .6s cubic-bezier(.23, 1, .32, 1), transform .6s cubic-bezier(.23, 1, .32, 1);
  }
  html.revela-js .revelar > :nth-child(2) { transition-delay: .07s; }
  html.revela-js .revelar > :nth-child(3) { transition-delay: .14s; }
  html.revela-js .revelar > :nth-child(4) { transition-delay: .21s; }
  html.revela-js .visto { opacity: 1 !important; transform: none !important; }

  /* Los diagramas también se trazan en Safari y Firefox. Aquí el barrido no lo
     mueve el scroll sino el tiempo, porque sin animation-timeline no hay forma
     de ligarlo al avance; la curva es la misma del resto del sitio. */
  html.revela-js .esquema svg {
    clip-path: inset(0 100% 0 0);
    transition: clip-path .9s cubic-bezier(.23, 1, .32, 1);
  }
  html.revela-js .esquema.visto svg { clip-path: inset(0 0 0 0); }
}

/* Entrada mas presente: antes apenas se notaba. Sube mas, entra desde
   un pelo mas chico y aterriza con la misma curva del resto del sitio. */
@keyframes plr-entrar {
  from { opacity: 0; transform: translateY(26px) scale(.988); }
  to   { opacity: 1; transform: none; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* El titulillo y el titulo de cada seccion entran antes que sus tarjetas:
       primero entiendes de que va, luego llega el detalle. */
    main > section .eyebrow,
    main > section > .contenedor > h2 {
      animation-name: plr-entrar;
      animation-duration: auto;
      animation-timing-function: cubic-bezier(.23, 1, .32, 1);
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 5% cover 18%;
    }
    .revelar > * { animation-range: entry 8% cover 30%; }
  }
}


/* ── Las tres herramientas gratuitas ──
   Antes eran una tarjeta oscura y dos blancas, lo que sugeria que una
   importaba mas. Son tres cosas distintas y gratuitas: cada una lleva su
   color y todas pesan igual. */
.puerta { position: relative; padding-top: 34px; }
.puerta::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
  border-radius: 20px 20px 0 0; background: var(--tono, var(--azul));
}
.tono-azul  { --tono: #0a4a8a; }
.tono-oro   { --tono: #c8a45c; }
.tono-verde { --tono: #198754; }
.puerta .rotulo { color: var(--tono); }
.puerta .flecha { color: var(--tono); }
.puerta .problema {
  font-family: Fraunces, Georgia, serif; font-size: 1.24rem; font-weight: 600;
  letter-spacing: -.03em; line-height: 1.2; color: var(--tinta); margin: 0 0 10px;
}
.gratis {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tono); background: color-mix(in srgb, var(--tono) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--tono) 26%, transparent);
  border-radius: 999px; padding: 4px 11px; margin-bottom: 4px;
}
@supports not (color: color-mix(in srgb, red 10%, transparent)) {
  .gratis { background: var(--azul-50); border-color: var(--azul-100); }
}


/* ── Acciones de la barra ──
   .nav a (0,2,0) le ganaba a .btn-azul (0,1,0) y el texto del boton se
   pintaba oscuro sobre fondo oscuro: invisible. Se iguala la especificidad. */
.nav a.btn { color: #fff; }
.nav a.btn:hover { color: #fff; }
.nav a.btn-linea, .nav a.btn-linea:hover { color: var(--tinta); }

/* Iniciar sesion es la accion secundaria: se lee como enlace, no compite
   con el boton de registro. */
.nav a.acceso {
  color: var(--azul-700); font-weight: 600;
}
.nav a.acceso:hover { background: var(--azul-50); color: var(--azul); }

/* En pantallas chicas la barra se apretaba: las acciones bajan a su renglon. */
@media (max-width: 720px) {
  .barra > .contenedor { min-height: 0; padding-block: 10px; }
  .nav { width: 100%; margin-left: 0; justify-content: flex-start; gap: 4px; }
  .nav a.btn { margin-left: auto; }
}

/* El hover generico de la barra (.nav a:hover) le ponia fondo claro tambien al
   boton, y como su texto es blanco quedaba blanco sobre blanco: el boton se
   veia vacio. Se le devuelve su propio fondo al pasar el cursor. */
.nav a.btn-azul:hover {
  background: linear-gradient(135deg, #00203f 0%, #003366 45%, #0a4a8a 100%);
  filter: brightness(1.12);
  color: #fff;
}
.nav a.btn-linea:hover { background: var(--azul-50); color: var(--tinta); }


/* Rotulo del modulo dentro del bento: azul sobre blanco, oro sobre la oscura. */
.bento .rotulo { display: block; margin-bottom: 8px; color: var(--azul-700); }
.bento .oscura .rotulo { color: var(--oro-300); }
.bento h3 { font-size: 1.1rem; }
.bento .ancha h3 { font-size: 1.34rem; }


/* ── Esquemas de los modulos ──
   Diagramas, no iconos: cada uno muestra el mecanismo. Heredan el color del
   contenedor con currentColor, asi que la misma pieza sirve en la tarjeta
   blanca y en la oscura sin duplicar el SVG. */
.esquema { margin: 16px 0 14px; color: var(--azul-700); }
.esquema svg {
  display: block; width: 100%; max-width: 300px; height: auto;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.esquema .ll { fill: currentColor; stroke: none; opacity: .38; }
.esquema .fl { opacity: .55; }
.esquema .ok { stroke: var(--verde); stroke-width: 2.2; }
.esquema .alerta { fill: var(--oro); stroke: none; }
.esquema .alerta-l { fill: var(--oro); stroke: none; opacity: .5; }
.esquema .hueco { fill: currentColor; stroke: none; opacity: .12; }
.esquema .pista { opacity: .2; }
.esquema .aro { stroke: var(--verde); stroke-width: 4; }
.esquema .llena { fill: currentColor; stroke: none; opacity: .3; }
.esquema .fund { fill: var(--oro); stroke: none; }
.oscura .esquema { color: var(--oro-300); }
.oscura .esquema .ok, .oscura .esquema .aro { stroke: #7ee0ac; }
.bento p { font-size: .93rem; }


/* ── Barra de lectura ──
   La mueve --avance, que el script actualiza en cada scroll. Se hizo asi tras
   comprobar en un banco de pruebas que animation-timeline se adjunta pero deja
   la linea de tiempo inactiva en algunos motores: una barra de progreso que
   solo funciona en ciertos navegadores no es una barra de progreso.
   Si el script no corre, se queda en escala 0 y no se ve: nada se rompe. */
.progreso {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; pointer-events: none;
}
.progreso i {
  display: block; height: 100%; width: 100%;
  transform: scaleX(var(--avance, 0)); transform-origin: 0 50%;
  background: linear-gradient(90deg, #003366, #0a4a8a 55%, #c8a45c);
}
@media (prefers-reduced-motion: reduce) { .progreso { display: none; } }


/* ── Vista previa del demo dentro de la tarjeta ──
   Antes esto era un enlace de texto metido dentro del enlace de la tarjeta:
   HTML invalido (un <a> dentro de otro <a>), y el navegador lo expulsaba fuera
   de la caja rompiendo la rejilla. Ahora la tarjeta es un <div> con dos
   acciones separadas, y el demo se ofrece con una miniatura de la pantalla:
   se entiende que hay algo que mirar antes de hacer clic. */
.vistazo {
  display: flex; align-items: center; gap: 13px; margin-top: 16px;
  padding: 10px; border-radius: 13px; text-decoration: none;
  background: var(--azul-50); border: 1px solid var(--azul-100);
}
.vistazo-lienzo {
  flex: none; width: 96px; border-radius: 7px; overflow: hidden; line-height: 0;
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .45);
}
.vistazo-lienzo svg { width: 100%; height: auto; display: block; }
.vistazo-texto { font-size: .84rem; line-height: 1.35; color: var(--suave); }
.vistazo-texto strong {
  display: block; color: var(--azul-700); font-size: .95rem; margin-bottom: 3px;
}
.vistazo-texto strong::after { content: " →"; color: var(--azul-700); transition: transform .2s; display: inline-block; }
@media (hover: hover) and (pointer: fine) {
  .vistazo { transition: background .18s ease, border-color .18s ease; }
  .vistazo:hover { background: #fff; border-color: var(--azul-700); }
  .vistazo:hover .vistazo-texto strong::after { content: " →"; }
}
/* La tarjeta ya no es un enlace: su boton principal manda solo. */
.puerta .btn { width: 100%; }


/* ── Banner de cookies ──
   Sus estilos YA NO viven aqui: los inyecta consentimiento.js, porque el
   mismo banner se pinta tambien dentro de la aplicacion (/app/, /demo), que
   no carga esta hoja. Una sola definicion para los dos lados. */