/* Web Comercial — Fase 1. Tokens reutilizados de marca/contrato.json y del
   candidato T3 (producto-online/candidato/estilos.css, leído READ-ONLY, no
   modificado). La dirección comercial agrega más aire y una escala
   tipográfica más grande en el hero — no es una copia de la interfaz de la
   app (resolvia-design §23). */
:root{
  color-scheme: light dark;
  --bg:#faf7f2; --bg2:#f1ece3; --card:#ffffff;
  --tx:#241f1a; --tx2:#5f574d; --tx3:#6f685d;
  --ln:#ddd4c6; --ln2:#cdc2b0;
  --ac:#2f7a3c; --ac-tx:#ffffff; --ac-suave:#e9f1ea;
  --al:#8a2f2f; --al-suave:#f7e9e9;
  --warn:#8a5a1c; --warn-suave:#f6efe3;
  --r:10px; --r-lg:16px; --r-pill:999px;
  --ancho:1120px; --ancho-lectura:700px;
  --sombra:0 1px 2px rgba(36,31,26,.06);
  --sombra2:0 8px 28px rgba(36,31,26,.10);
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:16px;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#14181d; --bg2:#0f1216; --card:#1c2127;
  --tx:#f2efe9; --tx2:#b5aea4; --tx3:#8b8479;
  --ln:#2e353d; --ln2:#3b444e;
  --ac:#5CD76B; --ac-tx:#0b1a0e; --ac-suave:#16261a;
  --al:#e0685c; --al-suave:#2c1a19;
  --warn:#d9a441; --warn-suave:#2a2114;
  --sombra:0 1px 2px rgba(0,0,0,.5);
  --sombra2:0 10px 34px rgba(0,0,0,.45);
}}
/* Fase 2 — base oscura como identidad comercial (no sólo prefers-color-scheme):
   las páginas de "experiencia" (home, offline, venta, biblioteca) llevan
   class="oscuro" en <body> (no en <html>: el sitio real exige
   `<html lang="es">` limpio, sin atributos extra, para toda página que
   integra) y quedan oscuras sin depender del SO. Las variables custom en
   body cascadean igual a todos los descendientes — cubre toda la página
   visible. Las fichas y artículos de lectura/impresión se quedan con el
   tema claro — ahí lo que importa es la legibilidad de un procedimiento,
   no la ambientación. */
body.oscuro{
  --bg:#14181d; --bg2:#0f1216; --card:#1c2127;
  --tx:#f2efe9; --tx2:#b5aea4; --tx3:#8b8479;
  --ln:#2e353d; --ln2:#3b444e;
  --ac:#5CD76B; --ac-tx:#0b1a0e; --ac-suave:#16261a;
  --al:#e0685c; --al-suave:#2c1a19;
  --warn:#d9a441; --warn-suave:#2a2114;
  --sombra:0 1px 2px rgba(0,0,0,.5);
  --sombra2:0 10px 34px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto} *{animation-duration:.001ms !important;transition-duration:.001ms !important;}}
body{margin:0; font-family:var(--fuente); background:var(--bg); color:var(--tx); line-height:1.55; -webkit-font-smoothing:antialiased;}
p, li, a, button, span, summary{line-height:1.55;}
h1,h2,h3{font-weight:800; letter-spacing:-.01em; line-height:1.35; margin:0 0 .4em;}
h1{font-size:clamp(1.9rem, 4vw, 2.6rem)}
h2{font-size:1.8rem}
h3{font-size:1.2rem}
section h2{margin-bottom:.6em}
p{margin:0 0 1em}
a{color:var(--ac)}
a:focus-visible, button:focus-visible, input:focus-visible{outline:3px solid var(--ac); outline-offset:2px;}
img,svg{max-width:100%}
.sr-solo{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

/* ── cabecera ────────────────────────────────────────────────────────── */
.cabecera{border-bottom:1px solid var(--ln); position:sticky; top:0; background:var(--bg); z-index:20;}
.cabecera-fila{max-width:var(--ancho); margin:0 auto; padding:.9em 1.25em; display:flex; align-items:center; gap:1.5em; flex-wrap:wrap;}
.marca{font-weight:800; font-size:1.25rem; text-decoration:none; color:var(--tx); margin-right:auto; letter-spacing:-.01em; min-height:44px; display:inline-flex; align-items:center;}
.marca span{color:var(--ac)}
.nav-principal ul{list-style:none; display:flex; gap:1.6em; margin:0; padding:0; flex-wrap:wrap;}
.nav-principal a{text-decoration:none; color:var(--tx2); font-weight:600; padding:.5em .1em; min-height:44px; display:inline-flex; align-items:center;}
.nav-principal a[aria-current="page"]{color:var(--tx); border-bottom:2px solid var(--ac);}
.cta-nav{background:transparent; color:var(--ac); border:1.5px solid var(--ac); padding:.55em 1.05em; border-radius:var(--r-pill); font-weight:700; text-decoration:none; white-space:nowrap;}
@media (max-width:720px){
  .nav-principal ul{gap:1em; font-size:.92rem}
  .cta-nav{padding:.55em .9em; font-size:.85rem}
}
@media (max-width:560px){
  .nav-item-secundario{display:none}
}

/* ── layout ──────────────────────────────────────────────────────────── */
.contenedor{max-width:var(--ancho); margin:0 auto; padding:0 1.25em;}
.lectura{max-width:var(--ancho-lectura); margin:0 auto; padding:0 1.25em;}
section{padding:4.5em 0;}
section.apretada{padding:2.5em 0;}
.eyebrow{display:none} /* antipatrón explícito de la skill — no se usa */

/* ── hero ────────────────────────────────────────────────────────────── */
.hero{padding:5em 0 4em; background:linear-gradient(180deg, var(--bg2), var(--bg) 60%);}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:3em; align-items:center;}
.hero h1{font-size:clamp(2.1rem, 4.4vw, 3.4rem);}
.hero .promesa{font-size:1.2rem; line-height:1.6; color:var(--tx2); max-width:44ch;}
.hero-ctas{display:flex; gap:1em; flex-wrap:wrap; margin-top:1.6em;}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr; gap:2.2em;} .hero{padding:3em 0 2.5em;} }
/* En landings sin hero-grid (offline/venta) el primer tramo del pliegue
   mobile es texto corto — se puede apretar más sin perder aire, y así el
   argumento central (la comparación con/sin conexión) asoma sin scroll. */
@media (max-width:600px){
  .hero:not(:has(.hero-grid)){padding-top:1.8em}
  .hero .hero-ctas{margin-top:1.1em}
  .hero + section.apretada{padding-top:1.6em}
}

.boton{display:inline-flex; align-items:center; justify-content:center; gap:.5em; min-height:48px; padding:.85em 1.5em; border-radius:var(--r-pill); font-weight:700; text-decoration:none; border:1px solid transparent; cursor:pointer; font-size:1rem;}
.boton-primario{background:var(--ac); color:var(--ac-tx);}
.boton-secundario{background:transparent; color:var(--tx); border-color:var(--ln2);}

/* ── tarjetas ────────────────────────────────────────────────────────── */
.tarjeta{background:var(--card); border:1px solid var(--ln); border-radius:var(--r-lg); padding:1.6em; box-shadow:var(--sombra);}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4em;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:1.4em;}
@media (max-width:860px){ .grid-3{grid-template-columns:1fr 1fr} }
@media (max-width:620px){ .grid-3, .grid-2{grid-template-columns:1fr} }

.chip{display:inline-block; font-size:.72rem; font-weight:700; padding:.3em .8em; border-radius:var(--r-pill); background:var(--ac-suave); color:var(--ac); text-transform:none; white-space:nowrap;}

.lista-inline{display:flex; flex-wrap:wrap; gap:.5em 1.4em; list-style:none; padding:0; margin:0; font-size:.88rem; font-weight:700;}
.lista-inline li{position:relative; padding-left:1.1em;}
.lista-inline li::before{content:"✓"; position:absolute; left:0; color:var(--ac); font-weight:800;}
.chip-desarrollo{background:var(--warn-suave); color:var(--warn);}

.tarjeta-imagen{padding:0; overflow:hidden;}
.tarjeta-imagen .miniatura{aspect-ratio:16/10; overflow:hidden;}
.tarjeta-imagen .miniatura img{width:100%; height:100%; object-fit:cover; display:block;}
.tarjeta-imagen .cuerpo{padding:1.3em 1.4em 1.5em;}
.tarjeta-sin-imagen{padding:1.6em}

/* ── progresión temporal ─────────────────────────────────────────────── */
.progresion-visual{border:1px solid var(--ln); border-radius:var(--r-lg); background:var(--card); box-shadow:var(--sombra);}
.progresion-visual svg, .progresion-visual img{display:block; width:100%; height:auto;}
/* Bajo ~740px el diagrama achicaría el texto propio del SVG (15-16px a escala
   natural) por debajo del piso legible de 11px. En vez de encogerlo, se
   preserva su tamaño natural y el contenedor scrollea horizontal — mismo
   material real, texto legible. */
@media (max-width:740px){
  .progresion-visual{overflow-x:auto; -webkit-overflow-scrolling:touch;}
  .progresion-visual svg, .progresion-visual img{width:auto; min-width:680px;}
  .progresion-visual-pista{display:block; text-align:center; font-size:.82rem; color:var(--tx3); margin:.6em 0 0;}
}
@media (min-width:741px){ .progresion-visual-pista{display:none} }

/* ── comparación online/offline ─────────────────────────────────────── */
.comparacion{display:grid; grid-template-columns:1fr 1fr; gap:1.4em;}
@media (max-width:700px){ .comparacion{grid-template-columns:1fr} }
.col-online{border:1px solid var(--ln); border-radius:var(--r-lg); padding:1.8em; background:var(--card);}
.col-offline{border:2px solid var(--ac); border-radius:var(--r-lg); padding:1.8em; background:var(--ac-suave);}
.col-offline h3, .col-online h3{margin-bottom:.3em}
.col-online ul, .col-offline ul{padding-left:1.2em; margin:.8em 0 0;}
.col-online li, .col-offline li{margin:.4em 0;}

/* ── FAQ ─────────────────────────────────────────────────────────────── */
details.faq{border-bottom:1px solid var(--ln); padding:1.1em 0;}
details.faq summary{cursor:pointer; font-weight:700; font-size:1.05rem; list-style:none; display:flex; justify-content:space-between; gap:1em; min-height:44px; align-items:center;}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+"; font-size:1.4rem; color:var(--tx3); flex:0 0 auto;}
details.faq[open] summary::after{content:"–";}
details.faq p{margin-top:.7em; color:var(--tx2)}

/* ── pie ─────────────────────────────────────────────────────────────── */
footer.pie{border-top:1px solid var(--ln); padding:2.5em 0; margin-top:3em;}
footer.pie .legal{font-size:.82rem; color:var(--tx3); max-width:62ch; line-height:1.6;}
footer.pie a{color:var(--tx2)}

/* ── banda de puente (fichas/artículos → resto del sistema) ────────── */
.puente{background:var(--ac); color:var(--ac-tx); border-radius:var(--r-lg); padding:1.6em; text-align:center; margin:2.5em 0;}
.puente a{color:var(--ac-tx); font-weight:700; text-decoration:underline;}

/* ── disponible / en desarrollo ─────────────────────────────────────── */
.estado-lista li{display:flex; align-items:flex-start; gap:.6em; margin:.5em 0;}
.estado-punto{flex:0 0 auto; width:1.4em; text-align:center;}

/* ── hero con foto (Fase 2) ──────────────────────────────────────────── */
.hero-foto{position:relative; padding:6em 0 5em; overflow:hidden; color:#f2efe9;}
.hero-foto::before{content:""; position:absolute; inset:0; background-size:cover; background-position:center; z-index:0;}
.hero-foto::after{content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(10,12,10,.99) 0%, rgba(10,12,10,.9) 42%, rgba(10,12,10,.4) 75%, rgba(10,12,10,.18) 100%); z-index:1;}
.hero-foto .contenedor{position:relative; z-index:2;}
.hero-foto h1{color:#fff}
.hero-foto .promesa{color:#d8d4cb}
.hero-foto .hero-ctas .boton-secundario{background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.5);}
.hero-foto .precio-teaser{color:#d8d4cb}
@media (max-width:900px){ .hero-foto{padding:4em 0 3em;} .hero-foto::after{background:linear-gradient(180deg, rgba(10,12,10,.55) 0%, rgba(10,12,10,.86) 62%, rgba(10,12,10,.95) 100%);} }

/* ── línea de tiempo (reemplaza el bloque radial sobre fondo blanco) ─── */
.linea-tiempo{display:flex; gap:0; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:1.8em 0 1.2em; scroll-snap-type:x proximity;}
.linea-tiempo::-webkit-scrollbar{height:6px}
.linea-tiempo::-webkit-scrollbar-thumb{background:var(--ln2); border-radius:99px}
.etapa{flex:0 0 auto; width:180px; scroll-snap-align:start; position:relative; padding:.6em 1.2em .6em 0;}
.etapa:not(:last-child)::after{content:""; position:absolute; top:1.9em; right:0; width:1.2em; height:2px; background:var(--ln2);}
.etapa-punto{width:2.6em; height:2.6em; border-radius:99px; background:var(--card); border:2px solid var(--ln2); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.85rem; color:var(--tx2); margin-bottom:.8em; transition:none;}
.etapa.actual{background:var(--ac-suave); border-radius:var(--r-lg); margin-left:-.8em; padding-left:.8em;}
.etapa.actual::after{background:var(--ac)}
.etapa.actual .etapa-punto{width:3em; height:3em; background:var(--ac); border-color:var(--ac); color:var(--ac-tx); box-shadow:0 0 0 4px var(--ac-suave);}
.etapa.actual h3{color:var(--ac)}
.etapa-final .etapa-punto{border-color:var(--ac); color:var(--ac); background:transparent;}
.etapa h3{font-size:.95rem; font-weight:800; margin:0 0 .3em; color:var(--tx)}
.etapa p{font-size:.85rem; color:var(--tx2); margin:0; line-height:1.5}
@media (max-width:640px){ .etapa{width:150px} }

/* ── "¿Qué está pasando?" (Fase 2.1) ────────────────────────────────────
   Íconos recortados de una imagen generada (sin su texto incrustado, ver
   assets/nuevas/procesar.mjs) + labels reales en HTML, uno por situación
   que de verdad existe hoy en producto-online/candidato/situaciones/. */
.grid-situaciones{display:grid; grid-template-columns:repeat(6,1fr); gap:.8em; margin-top:1.3em;}
.situacion{display:flex; flex-direction:column; align-items:center; gap:.55em; text-decoration:none; color:var(--tx); background:var(--card); border:1px solid var(--ln); border-radius:var(--r-lg); padding:1em .6em; text-align:center;}
.situacion:hover, .situacion:focus-visible{border-color:var(--ac);}
.situacion img{width:100%; max-width:60px; aspect-ratio:1/1; object-fit:cover; border-radius:var(--r); background:var(--bg2);}
.situacion span{font-size:.8rem; font-weight:700; line-height:1.25;}
@media (max-width:700px){ .grid-situaciones{grid-template-columns:repeat(3,1fr)} }

/* ── paneles de imagen temática (recortes reales, sin decorar por decorar) */
.panel-imagen{border-radius:var(--r-lg); overflow:hidden; position:relative; box-shadow:var(--sombra);}
.panel-imagen picture{display:block; width:100%; height:100%;}
.panel-imagen img{display:block; width:100%; height:100%; object-fit:cover;}
.franja-capacidades{display:grid; grid-template-columns:repeat(6,1fr); gap:2px; border-radius:var(--r-lg); overflow:hidden; margin:1.6em 0;}
.franja-capacidades .panel-imagen{aspect-ratio:9/14; border-radius:0;}
.franja-capacidades .panel-imagen span{position:absolute; left:0; right:0; bottom:0; padding:.6em .5em; background:linear-gradient(0deg, rgba(0,0,0,.75), transparent); color:#fff; font-size:.72rem; font-weight:700; text-align:center;}
@media (max-width:700px){ .franja-capacidades{grid-template-columns:repeat(3,1fr)} }

/* ── aclaración discreta (venta: el producto es digital) ─────────────── */
.aviso-discreto{display:flex; align-items:flex-start; gap:.6em; font-size:.82rem; color:var(--tx3); margin-top:.8em; max-width:46ch;}
.aviso-discreto svg{flex:0 0 auto; margin-top:.15em}

/* ── precio (Fase 3, oferta definitiva) ───────────────────────────────
   Un único bloque de precio, jerarquía clara: oferta → monto → precio
   regular previsto → qué incluye → CTA. Reutiliza --ac/--ac-suave, sin
   colores nuevos. El CTA queda listo para apuntar al checkout real
   (ver comentario "CHECKOUT" en venta.html) — hoy manda a un formulario
   de interés porque el pago todavía no está validado de punta a punta. */
.tarjeta-precio{background:var(--card); border:2px solid var(--ac); border-radius:var(--r-lg); padding:2.2em 1.8em; box-shadow:var(--sombra2); text-align:center;}
.chip-oferta{background:var(--ac); color:var(--ac-tx); font-weight:800;}
.precio-monto{display:flex; align-items:baseline; justify-content:center; gap:.35em; margin:.7em 0 .15em;}
.precio-numero{font-size:clamp(2.4rem, 7vw, 3.2rem); font-weight:800; letter-spacing:-.02em; color:var(--tx);}
.precio-moneda{font-size:1rem; font-weight:700; color:var(--tx3);}
.precio-regular{color:var(--tx3); font-size:.92rem; margin:0 0 1.3em;}
.precio-regular s{text-decoration:none; border-top:1.5px solid var(--tx3);}
.precio-features{list-style:none; padding:0; margin:0 0 1.6em; display:inline-flex; flex-direction:column; gap:.55em; text-align:left;}
.precio-features li{display:flex; align-items:flex-start; gap:.6em; font-weight:600; font-size:.95rem;}
.precio-features li::before{content:"✓"; color:var(--ac); font-weight:800; flex:0 0 auto;}
.boton-grande{min-height:54px; padding:1em 2em; font-size:1.05rem; width:100%; max-width:360px;}
/* teaser liviano de precio fuera de la tarjeta completa (hero, offline.html) */
.precio-teaser{display:inline-flex; align-items:center; gap:.55em; font-size:.92rem; font-weight:700; color:var(--tx2); margin-top:1em;}
.precio-teaser .chip-oferta{font-size:.72rem; padding:.3em .7em;}