/*
 * Mi Factura RD — sitio público.
 *
 * MISMA IDENTIDAD QUE EL PRODUCTO, tokens incluidos: grafito #101a2b, naranja
 * #e85400, lienzo cálido #fdfbf8. Quien pulsa «Comenzar» tiene que llegar a una
 * aplicación que se parece a lo que acaba de ver.
 *
 * TIPOGRAFÍA DEL SISTEMA, no de un CDN. La aplicación empaqueta Sora e IBM Plex
 * con `next/font`; aquí traerlas significaría o pedirlas a Google Fonts —una
 * petición a un tercero en la misma página donde se promete que no hay
 * seguimiento de terceros— o servir cuatro ficheros de fuente para una página
 * de marketing. Ninguna de las dos compensa: la identidad la llevan el color,
 * el ritmo y el logotipo, que sí son idénticos.
 *
 * SIN JAVASCRIPT. Todo lo interactivo de esta página —el acordeón de preguntas—
 * se hace con `<details>`, que funciona sin scripts y ya es accesible.
 */

:root {
  --graphite: #101a2b;
  --graphite-soft: #33415c;
  --ink: #202c42;
  --ink-muted: #55607a;
  --ink-subtle: #706c61;
  --orange: #e85400;
  --orange-bright: #ff6a1a;
  --orange-deep: #c93f00;
  --orange-darkest: #a33200;
  --canvas: #fdfbf8;
  --surface: #ffffff;
  --surface-muted: #f4f1ec;
  --line: #e5e0d8;
  --line-strong: #c8c2b6;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgba(16, 26, 43, .05), 0 4px 14px rgba(16, 26, 43, .04);
  --shadow-md: 0 16px 36px rgba(16, 26, 43, .12);
  --shadow-lg: 0 30px 70px rgba(16, 26, 43, .18);
  --sans: "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --measure: 1160px;
}

* { 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;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; line-height: 1.15; letter-spacing: -0.025em; color: var(--graphite); }
p { margin: 0; }
a { color: var(--orange-deep); }
img, svg { max-width: 100%; }

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

.wrap { width: 100%; max-width: var(--measure); margin: 0 auto; padding: 0 24px; }

.skip {
  position: absolute; left: -999px; top: 12px; z-index: 100;
  background: var(--orange); color: #fff; padding: 10px 16px; border-radius: 8px;
  text-decoration: none; font-weight: 600;
}
.skip:focus { left: 12px; }

/* --- Cabecera -------------------------------------------------------------- */
.top {
  position: sticky; top: 0; z-index: 40;
  background: rgba(253, 251, 248, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.top .wrap { display: flex; align-items: center; gap: 20px; min-height: 72px; }
.top nav { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.top nav a { color: var(--ink-muted); text-decoration: none; font-weight: 500; font-size: .9375rem; padding: 8px 12px; border-radius: 8px; }
.top nav a:hover { color: var(--graphite); background: var(--surface-muted); }

.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 12px; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--orange-bright), var(--orange-deep));
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 1.35rem;
  box-shadow: var(--shadow-sm);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-weight: 700; color: var(--graphite); font-size: 1.0625rem; letter-spacing: -0.02em; }
.brand-name em { font-style: normal; color: var(--orange-deep); }
.brand-tag { font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-subtle); font-weight: 600; }

/* --- Botones --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border-radius: var(--radius-full);
  font: inherit; font-weight: 600; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
}
/* Naranja OSCURO con texto blanco: el naranja de marca sobre blanco da 3.68:1 y
   no llega al 4.5:1 de AA. El mismo criterio que en la aplicación. */
.btn-primary { background: linear-gradient(135deg, var(--orange-deep), var(--orange-darkest)); color: #fff; box-shadow: var(--shadow-md); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.btn-ghost { background: var(--surface); color: var(--graphite); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--surface-muted); }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: .9375rem; }

/* --- Portada --------------------------------------------------------------- */
.hero { padding: 72px 0 32px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px;
  padding: 7px 14px; border-radius: var(--radius-full);
  background: var(--surface); border: 1px solid var(--line);
  font-size: .8125rem; font-weight: 600; color: var(--ink-muted);
}
.eyebrow b { color: var(--orange-deep); }
.hero h1 { font-size: clamp(2.25rem, 1.4rem + 3vw, 3.75rem); font-weight: 800; }
.hero h1 span { color: var(--orange-deep); }
.hero-sub { margin-top: 20px; font-size: 1.1875rem; color: var(--ink-muted); max-width: 34em; }
.hero-cta { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero-note { margin-top: 16px; font-size: .875rem; color: var(--ink-subtle); }

/* --- Maqueta de la aplicación ---------------------------------------------- */
/* Es la pantalla real del producto, redibujada en HTML: las mismas tarjetas, el
   mismo gráfico, la misma barra lateral. Las cifras son de ejemplo y se dicen
   así en la nota de debajo — una captura con números que nadie puede comprobar
   vende algo que no existe. */
.shot {
  border-radius: var(--radius-lg); overflow: hidden; background: var(--surface);
  box-shadow: var(--shadow-lg); border: 1px solid var(--line);
}
.shot-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: var(--surface-muted); border-bottom: 1px solid var(--line); }
.shot-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--line-strong); }
.shot-url { margin-left: 10px; font-size: .75rem; color: var(--ink-subtle); background: var(--surface); border-radius: var(--radius-full); padding: 4px 12px; }
.shot-body { display: grid; grid-template-columns: 150px minmax(0, 1fr); min-height: 340px; }
.shot-side { background: var(--graphite); padding: 16px 12px; display: flex; flex-direction: column; gap: 6px; }
.shot-side b { color: #fff; font-size: .8125rem; margin-bottom: 8px; }
.shot-side span { color: rgba(255, 255, 255, .62); font-size: .75rem; padding: 7px 10px; border-radius: 8px; }
.shot-side .on { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 3px 0 0 var(--orange-bright); }
.shot-main { padding: 18px; display: grid; gap: 14px; align-content: start; }
/* La tarjeta principal ocupa la fila entera. Con tres columnas iguales, en la
   maqueta le quedaban unos 140 px y «RD$641,500» se recortaba: un importe
   cortado en la propia imagen del producto es la peor primera impresión
   posible. Además refleja la jerarquía real de la pantalla. */
.shot-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.shot-kpi.hero-card { grid-column: 1 / -1; }
.shot-kpi { border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: var(--surface); min-width: 0; }
.shot-kpi small { display: block; font-size: .6875rem; color: var(--ink-subtle); }
.shot-kpi strong { display: block; font-size: 1.0625rem; letter-spacing: -0.02em; color: var(--graphite); white-space: nowrap; }
.shot-kpi.hero-card { background: linear-gradient(135deg, var(--orange-deep), var(--orange-darkest)); border-color: transparent; }
.shot-kpi.hero-card small, .shot-kpi.hero-card strong { color: #fff; }
.shot-chart { border: 1px solid var(--line); border-radius: 10px; padding: 14px; }
.shot-chart p { font-size: .75rem; color: var(--ink-subtle); margin-bottom: 10px; }
.shot-bars { display: flex; align-items: flex-end; gap: 6px; height: 118px; }
.shot-bars i {
  flex: 1; border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--orange-bright), var(--orange));
}
.shot-caption { margin-top: 14px; font-size: .8125rem; color: var(--ink-subtle); text-align: center; }

/* --- Secciones ------------------------------------------------------------- */
section { padding: 72px 0; }
.section-head { max-width: 42em; margin-bottom: 44px; }
.section-head h2 { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); font-weight: 700; }
.section-head p { margin-top: 14px; color: var(--ink-muted); font-size: 1.0625rem; }

.band { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.card {
  background: var(--canvas); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; display: grid; gap: 10px; align-content: start;
}
.band .card { background: var(--canvas); }
.card-icon {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--surface-muted); color: var(--orange-deep); margin-bottom: 6px;
}
.card h3 { font-size: 1.125rem; font-weight: 700; }
.card p { color: var(--ink-muted); font-size: .9375rem; }

.steps { counter-reset: paso; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; }
.step { display: grid; gap: 10px; align-content: start; }
.step::before {
  counter-increment: paso; content: counter(paso);
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700;
  background: linear-gradient(135deg, var(--orange-deep), var(--orange-darkest)); color: #fff;
}
.step h3 { font-size: 1.0625rem; font-weight: 700; }
.step p { color: var(--ink-muted); font-size: .9375rem; }

/* --- Preguntas ------------------------------------------------------------- */
.faq { display: grid; gap: 12px; max-width: 52em; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.faq summary {
  cursor: pointer; padding: 20px 24px; font-weight: 600; color: var(--graphite);
  list-style: none; display: flex; align-items: center; gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-left: auto; font-size: 1.5rem; color: var(--orange-deep); line-height: 1; font-weight: 400; }
.faq details[open] summary::after { content: "−"; }
.faq p { padding: 0 24px 22px; color: var(--ink-muted); }

/* --- Llamada final --------------------------------------------------------- */
.final { background: var(--graphite); color: #fff; text-align: center; }
.final h2 { color: #fff; font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); }
.final p { margin: 16px auto 0; color: rgba(255, 255, 255, .82); max-width: 40em; }
.final .hero-cta { justify-content: center; margin-top: 32px; }
.final .btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .38); }
.final .btn-ghost:hover { background: rgba(255, 255, 255, .1); }

/* --- Pie ------------------------------------------------------------------- */
footer { background: var(--surface); border-top: 1px solid var(--line); padding: 56px 0 40px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 40px; }
.foot-grid h4 { margin: 0 0 12px; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-subtle); }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot-grid a { color: var(--ink-muted); text-decoration: none; font-size: .9375rem; }
.foot-grid a:hover { color: var(--orange-deep); text-decoration: underline; }
.foot-about { color: var(--ink-muted); font-size: .9375rem; margin-top: 14px; max-width: 32em; }
.foot-legal { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); font-size: .8125rem; color: var(--ink-subtle); display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; }

/* --- Páginas de texto (legal, contacto) ------------------------------------ */
.doc { padding: 56px 0 80px; }
.doc-inner { max-width: 46em; }
.doc h1 { font-size: clamp(1.875rem, 1.3rem + 2vw, 2.75rem); font-weight: 800; }
.doc .updated { margin-top: 12px; color: var(--ink-subtle); font-size: .875rem; }
.doc h2 { margin-top: 44px; font-size: 1.375rem; font-weight: 700; }
.doc h3 { margin-top: 28px; font-size: 1.0625rem; font-weight: 700; }
.doc p, .doc li { color: var(--ink-muted); }
.doc p { margin-top: 14px; }
.doc ul { margin-top: 14px; padding-left: 22px; display: grid; gap: 8px; }
.doc .callout {
  margin-top: 28px; padding: 18px 22px; border-radius: var(--radius);
  background: #fff8f2; color: #8a5200; border: 1px solid rgba(138, 82, 0, .22); font-size: .9375rem;
}
.doc dl { margin-top: 20px; display: grid; gap: 4px 20px; grid-template-columns: max-content minmax(0, 1fr); }
.doc dt { font-weight: 600; color: var(--graphite); }
.doc dd { margin: 0; color: var(--ink-muted); }

@media (max-width: 900px) {
  .hero { padding: 48px 0 16px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .doc dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .doc dd { margin-bottom: 12px; }
}
@media (max-width: 767px) {
  section { padding: 56px 0; }
  /* En móvil la cabecera deja de ser fija. Con los botones en su propia fila
     ocupa unos 140 px —casi un tercio de la pantalla de un teléfono— y encima
     tapa el contenido al saltar a un ancla. Los dos botones vuelven a aparecer
     al final de la página, así que no se pierde ninguna salida. */
  .top { position: static; backdrop-filter: none; }
  .top .wrap { min-height: 64px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
  .top nav { width: 100%; margin-left: 0; justify-content: space-between; }
  /* Los enlaces de sección no caben junto a los botones en un móvil, y son
     atajos a contenido que está más abajo en la misma página: se ocultan, no se
     apilan. Nada queda inaccesible — solo hay que seguir bajando. */
  .top nav .navlink { display: none; }
  .hero-cta .btn { width: 100%; }
  .shot-body { grid-template-columns: minmax(0, 1fr); }
  .shot-side { flex-direction: row; overflow: hidden; gap: 4px; padding: 10px; }
  .shot-side b { display: none; }
  .shot-kpis { grid-template-columns: minmax(0, 1fr); }
}

/* ===========================================================================
   R21 — PROFUNDIDAD Y RITMO
   Lo que faltaba no era color: era relieve. Una portada plana sobre lienzo
   plano se lee como una plantilla. Aquí se añade un fondo con textura muy
   suave, una maqueta que parece un objeto y respuesta al puntero en todo lo
   que se puede pulsar. Nada de esto añade una petición de red: son degradados
   y transformaciones.
   =========================================================================== */

:root {
  --ease: cubic-bezier(.22, .72, .28, 1);
  --hairline: rgba(16, 26, 43, .09);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Dos manchas de luz muy tenues y una rejilla casi invisible. La rejilla es lo
   que impide que el blanco se lea como «página sin terminar»: da escala sin
   pedir atención. */
body {
  background:
    radial-gradient(760px 460px at 88% -60px, rgba(255, 106, 26, .10), transparent 65%),
    radial-gradient(620px 420px at 4% 8%, rgba(16, 26, 43, .05), transparent 62%),
    linear-gradient(180deg, #fffdfa, var(--canvas) 420px);
  background-attachment: fixed;
}
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(720px 380px at 50% 20%, #000, transparent 78%);
  opacity: .5;
}
.hero { position: relative; }

.eyebrow { box-shadow: 0 1px 2px rgba(16, 26, 43, .05); }
.hero h1 { letter-spacing: -.04em; }

/* La maqueta deja de ser una captura pegada: se inclina un grado, se apoya en
   una sombra larga y se ilumina por detrás. Es el objeto que se está vendiendo,
   así que tiene que parecer un objeto. */
.shot {
  transform: perspective(1600px) rotateY(-1.4deg) rotateX(1deg) translateZ(0);
  transition: transform var(--slow, 260ms) var(--ease), box-shadow 260ms var(--ease);
  will-change: transform;
}
.shot:hover { transform: perspective(1600px) rotateY(0deg) rotateX(0deg); box-shadow: 0 40px 90px -30px rgba(16, 26, 43, .32); }
.shot-bars i { transition: filter 200ms var(--ease); }
.shot:hover .shot-bars i:last-child { filter: brightness(1.08); }

/* Tira de hechos. Son CIERTOS y verificables en el propio producto: el formato
   que implementa, que la firma ocurre en servidor, que el consumo de e-NCF
   queda en un libro que solo avanza y que una cuenta lleva varias empresas.
   Ni un número de clientes ni un porcentaje de disponibilidad inventado. */
.facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  margin-top: 64px; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--line);
}
.facts div { padding: 22px 24px; background: var(--surface); }
.facts dt { font-size: .75rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-subtle); font-weight: 700; }
.facts dd { margin: 6px 0 0; font-size: 1.0625rem; font-weight: 700; color: var(--graphite); letter-spacing: -.02em; }

/* Tarjetas y pasos con respuesta al puntero. */
.card { transition: transform 160ms var(--ease), box-shadow 160ms var(--ease), border-color 160ms var(--ease); }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.card-icon { transition: transform 160ms var(--ease), background 160ms var(--ease); }
.card:hover .card-icon { transform: scale(1.06); background: rgba(255, 106, 26, .12); }
.step::before { transition: transform 160ms var(--ease), box-shadow 160ms var(--ease); box-shadow: 0 4px 12px -4px rgba(169, 50, 0, .5); }
.step:hover::before { transform: translateY(-2px) scale(1.05); }

.faq details { transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease); }
.faq details[open] { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.faq summary { transition: color 160ms var(--ease); }

/* La llamada final deja de ser un rectángulo grafito: lleva la misma luz de
   marca que la portada, para que la página cierre por donde abrió. */
.final { position: relative; overflow: hidden; }
.final::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(520px 300px at 50% 120%, rgba(255, 106, 26, .28), transparent 68%),
    radial-gradient(420px 260px at 12% -30%, rgba(255, 255, 255, .06), transparent 70%);
}
.final .wrap { position: relative; }

@media (max-width: 900px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shot { transform: none; }
  .shot:hover { transform: none; }
}
@media (max-width: 520px) {
  .facts { grid-template-columns: minmax(0, 1fr); }
}

/* --- R21b — la cabecera no se parte -----------------------------------------
   A 800 px los tres enlaces de sección más los dos botones no caben junto a la
   marca: la barra se partía en dos filas y «Comenzar» quedaba cortado por el
   borde inferior de la cabecera, medio tapado. Los enlaces de sección son
   atajos a contenido que está más abajo en la misma página, así que se retiran
   antes que los botones, que son la salida real. */
@media (max-width: 1024px) {
  .top nav .navlink { display: none; }
}
.top .wrap { row-gap: 10px; padding-block: 10px; }
.brand-tag { white-space: nowrap; }

/* ===========================================================================
   R22 — LA PORTADA, EN OSCURO
   ===========================================================================
   La portada era clara sobre clara: correcta y tímida. Un producto que vende
   control sobre el dinero no abre en beige. Ahora la primera pantalla es una
   pieza oscura con luz de marca —el mismo marco que la aplicación usa por
   dentro—, y la maqueta del producto flota encima iluminada. El resto de la
   página sigue en claro: el contraste entre la portada y lo que viene después
   es lo que da ritmo a la lectura.
   =========================================================================== */

.hero {
  position: relative;
  margin: 0 0 72px;
  padding: 84px 0 96px;
  background:
    radial-gradient(820px 420px at 84% -10%, rgba(255, 106, 26, .30), transparent 62%),
    radial-gradient(620px 380px at 6% 108%, rgba(255, 106, 26, .14), transparent 66%),
    linear-gradient(165deg, #131e30 0%, #0b1220 58%, #080d18 100%);
  color: #fff;
}
/* La rejilla se mantiene, ahora en blanco muy tenue: sigue dando escala y ya no
   compite con el texto claro. */
.hero::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  mask-image: radial-gradient(820px 420px at 46% 24%, #000, transparent 76%);
  opacity: 1;
}
.hero h1 { color: #fff; }
.hero h1 span { color: var(--orange-bright); }
.hero-sub { color: rgba(255, 255, 255, .72); }
.hero-note { color: rgba(255, 255, 255, .5); }
.eyebrow {
  background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .13);
  color: rgba(255, 255, 255, .78); box-shadow: none;
}
.eyebrow b { color: var(--orange-bright); }
/* En oscuro el naranja de marca SÍ es legible —sobre #0b1220 da 5.9:1— así que
   aquí el botón principal puede llevarlo saturado, que es lo que lo hace
   brillar contra el fondo. */
.hero .btn-primary { background: linear-gradient(135deg, var(--orange-bright), var(--orange)); }
.hero .btn-ghost { background: rgba(255, 255, 255, .07); color: #fff; border-color: rgba(255, 255, 255, .18); }
.hero .btn-ghost:hover { background: rgba(255, 255, 255, .13); }

/* La maqueta flota: sombra larga y un halo cálido detrás. */
.shot { border-color: rgba(255, 255, 255, .1); box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .05); }
.shot:hover { box-shadow: 0 60px 120px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .09); }
.shot-caption { color: rgba(255, 255, 255, .45); }

/* La tira de hechos, dentro del bloque oscuro y sin caja: se lee como el
   zócalo de la portada, no como cuatro tarjetas más. */
.facts { margin-top: 72px; border: 0; background: rgba(255, 255, 255, .1); border-radius: 18px; }
.facts div { background: transparent; }
.facts dt { color: rgba(255, 255, 255, .5); }
.facts dd { color: #fff; }

/* La sección que sigue recupera el claro y arranca sin borde superior: el corte
   de color ya marca la separación. */
#que-hace { border-top: 0; }

@media (max-width: 900px) {
  .hero { padding: 56px 0 64px; margin-bottom: 48px; }
  .facts { margin-top: 48px; }
}

/* La cabecera deja de ser translúcida. Sobre la portada oscura, el
   `backdrop-filter` mezclaba el fondo negro por debajo del botón principal y su
   texto blanco se veía apagado, casi ilegible. Un color sólido compone igual
   sobre cualquier cosa que pase por debajo. */
.top { background: var(--canvas); backdrop-filter: none; }

/* DEFECTO REAL, y llevaba ahí desde el principio: `.top nav a` fija el color de
   los enlaces de sección, y su especificidad (0,2,1) gana a la de `.btn-primary`
   (0,1,0). Resultado: el botón «Comenzar» de la cabecera —la llamada a la
   acción principal del sitio— pintaba su texto en gris azulado sobre naranja en
   vez de en blanco. Se declaran los dos botones explícitamente. */
.top nav a.btn-primary { color: #fff; }
.top nav a.btn-ghost { color: var(--graphite); }
.top nav a.btn-primary:hover, .top nav a.btn-ghost:hover { background: initial; }
.top nav a.btn-primary:hover { background: linear-gradient(135deg, var(--orange-darkest), var(--orange-deep)); }
.top nav a.btn-ghost:hover { background: var(--surface-muted); }

/* ============================================================================
   L5 — DISEÑO 3.0
   ============================================================================
   La portada ya contaba bien el producto; lo que le faltaba era RITMO. Todas
   las secciones pesaban lo mismo, así que ninguna destacaba y la página se leía
   como una lista. Aquí se establece una jerarquía: la tira de datos remata el
   hero en vez de flotar suelta, las secciones respiran distinto según su papel,
   y el cierre deja de ser un párrafo más para convertirse en una llamada.
   ============================================================================ */

/* La tira de datos remata el hero: mismo fondo oscuro, filete de separación. */
.hero .facts {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.hero .facts dt {
  font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
  opacity: .62;
}
.hero .facts dd { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }

/* Ritmo: una sección con fondo pesa más que una sin él, y por eso se alternan
   en vez de repetirse. */
section { padding-block: clamp(4rem, 8vw, 7rem); }
.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head h2 {
  font-size: clamp(1.875rem, 1.1rem + 2.6vw, 2.75rem);
  line-height: 1.1; letter-spacing: -.03em;
}
.section-head p { font-size: 1.0625rem; line-height: 1.65; }

/* Las tarjetas dejan de ser rectángulos inertes: reaccionan al puntero, y el
   filete superior en naranja las ata a la marca sin pintarlas de naranja. */
.card, .step {
  position: relative;
  transition: transform .18s cubic-bezier(.2, .7, .3, 1), box-shadow .18s cubic-bezier(.2, .7, .3, 1);
}
.card::after, .step::after {
  content: ''; position: absolute; inset: 0 auto auto 0;
  width: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--orange), var(--orange-deep));
  transition: width .24s cubic-bezier(.2, .7, .3, 1);
}
.card:hover, .step:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -26px rgba(15, 23, 42, .45);
}
.card:hover::after, .step:hover::after { width: 44px; }

/* Preguntas: una lista de respuestas se lee mejor con filetes que con cajas. */
.faq details {
  border-radius: 14px;
  transition: background .18s ease;
}
.faq details[open] { background: var(--surface-muted, #f6f4f1); }
.faq summary { cursor: pointer; font-weight: 600; letter-spacing: -.01em; }
.faq summary::marker { color: var(--orange-deep); }

/* El cierre es una llamada, no un párrafo más. */
.final {
  color: #fff;
  background:
    radial-gradient(680px 300px at 50% -10%, rgba(255, 255, 255, .1), transparent 70%),
    linear-gradient(140deg, var(--orange-deep) 0%, var(--orange-darkest) 60%, #6f2200 100%);
}
.final h2 { font-size: clamp(2rem, 1.2rem + 2.8vw, 3rem); letter-spacing: -.03em; }
.final p { color: rgba(255, 255, 255, .82); font-size: 1.0625rem; max-width: 40rem; margin-inline: auto; }
.final .btn-primary { background: #fff; color: var(--orange-darkest); border-color: #fff; }
.final .btn-primary:hover { background: #fff; color: var(--orange-darkest); transform: translateY(-1px); }
.final .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .45); }
.final .btn-ghost:hover { background: rgba(255, 255, 255, .12); }

/* El foco se ve, en toda la portada y con el color de la marca. */
:where(a, button, summary, input, textarea):focus-visible {
  outline: 2px solid var(--orange-deep);
  outline-offset: 3px;
  border-radius: 6px;
}
.hero :where(a, button):focus-visible { outline-color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .card, .step, .final .btn-primary { transition: none; }
  .card:hover, .step:hover, .final .btn-primary:hover { transform: none; }
}

/* La barra superior era translucida al 88 %, y con el cierre sobre fondo de
   marca el titular blanco se veia PASAR POR DEBAJO como un fantasma. El vidrio
   se conserva —sigue habiendo desenfoque— pero ya no deja leer lo que hay
   detras. Y las secciones ancladas reservan la altura de la barra, para que un
   enlace del menu no deje su titular medio tapado. */
.top { background: rgba(253, 251, 248, .97); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); }
section[id] { scroll-margin-top: 88px; }

/* La maqueta del hero reproduce LA CINTA de la aplicacion: una sola pieza con
   la cifra principal sobre fondo de marca y las de apoyo debajo, separadas por
   filetes. Ensenar una pantalla que ya no existe convierte la portada en una
   promesa que no se cumple al entrar. */
.shot-ledger { border-radius: 12px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px rgba(15,23,42,.08); }
.shot-ledger-hero { padding: 14px 16px 12px; color: #fff; background: linear-gradient(140deg, var(--orange-deep) 0%, var(--orange-darkest) 62%, #7d2700 100%); }
.shot-ledger-hero small { display: block; font-size: 9px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; opacity: .74; }
.shot-ledger-hero strong { display: block; margin-top: 2px; font-size: 24px; font-weight: 600; letter-spacing: -.03em; }
.shot-ledger-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shot-ledger-row > div { padding: 10px 12px; border-left: 1px solid rgba(15,23,42,.08); }
.shot-ledger-row > div:first-child { border-left: 0; }
.shot-ledger-row small { display: block; font-size: 8.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.shot-ledger-row b { display: block; margin-top: 1px; font-size: 13px; font-weight: 600; letter-spacing: -.02em; color: var(--graphite); }