/* Portada pública de NanIA: Resúmenes arriba con una muestra del producto, cómo funciona y Video como segunda app.
   Colores, letra y medidas vienen de /nania.css. */

* { box-sizing: border-box; }
body { padding: env(safe-area-inset-top, 0) var(--e-4) calc(var(--e-8) + env(safe-area-inset-bottom, 0)); }
h1, h2, p, ul, ol { margin: 0; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.barra, main, .pie { max-width: var(--ancho-pagina); margin-inline: auto; }
.barra { padding-block: var(--e-5) var(--e-4); }
.marca { display: inline-flex; align-items: center; gap: var(--e-2); font: 800 var(--marca)/1 var(--font-marca); letter-spacing: -0.02em; }
.marca span { color: var(--accent); margin-left: calc(-1 * var(--e-2)); }
.cabecita { width: 1.1em; height: 1.3em; flex: none; }

/* piezas comunes (también las usa sin-acceso.html) */
.kicker { font-size: var(--t-chico); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.bajada { color: var(--muted); max-width: 34em; text-wrap: pretty; }
.entrar {
  display: inline-flex; align-items: center; gap: var(--e-2); min-height: 48px; padding: 0 var(--e-6);
  border-radius: var(--r); background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent);
  font-weight: 700; text-decoration: none; box-shadow: var(--sombra-1);
  transition: transform var(--dur) var(--curva), box-shadow var(--dur) var(--curva);
}
.entrar:hover { transform: translateY(-1px); box-shadow: var(--sombra-2); }
.entrar:active { transform: translateY(0); box-shadow: none; }
.entrar .ico { transition: transform var(--dur) var(--curva); }
.entrar:hover .ico { transform: translateX(3px); }
.entrar.secundario { background: var(--surface); color: var(--accent); box-shadow: none; }
.entrar.secundario:hover { background: var(--accent-soft); }
.acceso { font-size: var(--t-chico); color: var(--muted); }
[data-tiene="si"] .acceso { color: var(--accent); font-weight: 600; }

/* --- Resúmenes: texto a la izquierda, muestra del producto a la derecha --- */
.hero {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--e-12); align-items: center;
  padding-block: var(--e-8) var(--e-12);
}
.hero-texto { display: grid; gap: var(--e-5); justify-items: start; }
.hero h1 { font-size: clamp(2.5rem, 7vw, 4.25rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.035em; }
.hero .bajada { font-size: var(--t-base); color: var(--fg); max-width: 30em; }
.hero-accion { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-4); }

.rasgos {
  list-style: none; padding: var(--e-5) 0 0; margin-top: var(--e-1); border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4) var(--e-6); width: 100%;
}
.rasgos li { display: flex; gap: var(--e-3); align-items: flex-start; font-size: var(--t-sec); color: var(--muted); line-height: 1.4; }
.rasgos b { color: var(--fg); font-weight: 700; }
.rasgos .ico {
  width: 32px; height: 32px; padding: 6px; border-radius: var(--r-chico);
  background: var(--accent-soft); color: var(--accent);
}

/* la muestra: una tarjeta de repaso atrás y una pregunta de quiz adelante, sobre un fondo lila */
.vitrina {
  position: relative; min-height: 500px; border-radius: var(--r-grande); overflow: hidden;
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
    var(--accent-soft);
}
.muestra {
  position: absolute; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-grande);
  box-shadow: var(--sombra-2); padding: var(--e-5); display: grid; gap: var(--e-3);
}
.muestra-meta { display: flex; justify-content: space-between; gap: var(--e-3); font-size: var(--t-chico); color: var(--muted); }
.muestra-tarjeta { top: var(--e-6); left: var(--e-6); width: 60%; transform: rotate(-4deg); min-height: 200px; align-content: start; }
.muestra-termino { font: 800 var(--t-sub)/1.15 var(--font-titulo); letter-spacing: -0.01em; }
.muestra-def { font-size: var(--t-sec); color: var(--muted); line-height: 1.4; }
.muestra-quiz { right: var(--e-6); bottom: var(--e-6); width: 72%; }
.muestra-barra { height: 6px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.muestra-barra i { display: block; width: 50%; height: 100%; background: var(--ok); border-radius: inherit; }
.muestra-pregunta { font: 700 var(--t-base)/1.3 var(--font-titulo); letter-spacing: -0.01em; }
.muestra-opciones { list-style: none; padding: 0; display: grid; gap: var(--e-2); }
.muestra-opciones li {
  display: flex; justify-content: space-between; align-items: center; gap: var(--e-2);
  padding: var(--e-2) var(--e-3); border: 1px solid var(--line); border-radius: var(--r); font-size: var(--t-sec);
}
.muestra-opciones .bien { border-color: var(--ok); background: var(--ok-soft); color: var(--fg); font-weight: 600; }
.muestra-opciones .bien .ico { color: var(--ok); width: 18px; height: 18px; stroke-width: 2.25; }
.muestra-explica { font-size: var(--t-chico); line-height: 1.4; padding: var(--e-2) var(--e-3); border-radius: var(--r); background: var(--accent-soft); }
.muestra-chip {
  position: absolute; top: var(--e-6); right: var(--e-6); display: inline-flex; align-items: center; gap: var(--e-2);
  padding: var(--e-2) var(--e-3); border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--sombra-2);
  font-size: var(--t-chico); font-weight: 700; color: var(--ok);
}
.muestra-chip .ico { width: 16px; height: 16px; }

/* entrada: una sola vez al cargar; la respuesta correcta se marca después, como si alguien la tocara */
@media (prefers-reduced-motion: no-preference) {
  .muestra-tarjeta { animation: entrar-tarjeta 0.7s var(--curva) 0.1s both; }
  .muestra-quiz { animation: entrar-abajo 0.7s var(--curva) 0.25s both; }
  .muestra-chip { animation: entrar-chip 0.5s var(--curva) 1.5s both; }
  .muestra-opciones .bien { animation: marcar 0.4s var(--curva) 1.1s both; }
  .muestra-explica { animation: entrar-abajo 0.4s var(--curva) 1.3s both; }
  .muestra-barra i { animation: avanzar 0.6s var(--curva) 1.3s both; }
}
@keyframes entrar-tarjeta { from { opacity: 0; transform: rotate(-8deg) translate(-16px, 16px); } }
@keyframes entrar-abajo { from { opacity: 0; transform: translateY(24px); } }
@keyframes entrar-chip { from { opacity: 0; transform: scale(0.8); } }
@keyframes marcar { from { border-color: var(--line); background: var(--surface); font-weight: 400; } }
@keyframes avanzar { from { width: 37.5%; } }

/* --- cómo funciona --- */
.pasos { padding-block: var(--e-12); border-top: 1px solid var(--line); display: grid; gap: var(--e-6); }
.pasos h2, .otra-app h2 { font-size: var(--t-titulo); font-weight: 800; letter-spacing: -0.02em; }
.pasos ol { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-4); counter-reset: paso; }
.pasos li {
  counter-increment: paso; display: grid; gap: var(--e-2); align-content: start;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-grande); box-shadow: var(--sombra-1);
  padding: var(--e-6);
}
.pasos li::before {
  content: counter(paso); display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: var(--e-2);
  border-radius: 50%; background: var(--accent-soft); color: var(--accent); font: 800 var(--t-sec)/1 var(--font-titulo);
}
.pasos b { font: 700 var(--t-base)/1.3 var(--font-titulo); }
.pasos span { color: var(--muted); font-size: var(--t-sec); line-height: 1.45; }

/* --- la otra app --- */
.otra-app {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-6);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-grande); box-shadow: var(--sombra-1);
  padding: var(--e-8);
}
.otra-app > div:first-child { display: grid; gap: var(--e-2); }
.otra-app h2 { font-size: var(--t-sub); }
.otra-app-accion { display: grid; gap: var(--e-2); justify-items: start; }

/* --- pedir un link --- */
.pedir {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--e-10); align-items: start;
  margin-top: var(--e-12); padding-top: var(--e-12); border-top: 1px solid var(--line); scroll-margin-top: var(--e-6);
}
.pedir-texto { display: grid; gap: var(--e-3); }
.pedir h2 { font-size: var(--t-titulo); font-weight: 800; letter-spacing: -0.02em; }
.pedir-nota { font-size: var(--t-chico); color: var(--muted); }
.pedir-form {
  display: grid; gap: var(--e-4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-grande); box-shadow: var(--sombra-1);
  padding: var(--e-6);
}
.pedir-form label { display: grid; gap: var(--e-1); font-size: var(--t-sec); font-weight: 600; }
.pedir-form input, .pedir-form select, .pedir-form textarea {
  font: inherit; font-size: var(--t-base); font-weight: 400; color: var(--fg); min-width: 0; min-height: 44px;
  padding: var(--e-2) var(--e-3); border: 1px solid var(--line-fuerte); border-radius: var(--r); background-color: var(--surface-2);
}
.pedir-form textarea { resize: vertical; min-height: 88px; line-height: var(--lh); }
.pedir-form ::placeholder { color: var(--muted); opacity: 0.8; }
.opcional { font-weight: 400; color: var(--muted); }
.pedir-form button { justify-self: start; cursor: pointer; font: inherit; font-weight: 700; }
.pedir-form button:disabled { opacity: 0.6; cursor: progress; transform: none; }
.pedir-estado { font-size: var(--t-sec); font-weight: 600; }
.pedir-estado:empty { display: none; }
.pedir-estado.error { color: var(--bad); }
.pedir-estado.ok { color: var(--ok); }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.acceso a { color: var(--accent); font-weight: 600; text-decoration: none; }
.acceso a:hover { text-decoration: underline; }

/* --- pie --- */
.pie {
  margin-top: var(--e-12); padding-top: var(--e-8); border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--e-6);
  color: var(--muted); font-size: var(--t-sec);
}
.pie > div { display: grid; gap: var(--e-2); }
.pie-frase { color: var(--fg); font: 600 var(--t-base)/1.4 var(--font-titulo); max-width: 30em; text-wrap: pretty; }
.pie-accion { justify-items: start; }
.pie-donar {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--e-5);
  border-radius: var(--r-pill); border: 1px solid var(--accent); color: var(--accent); font-weight: 700; text-decoration: none;
  transition: background-color var(--dur) var(--curva);
}
.pie-donar:hover { background: var(--accent-soft); }

/* --- celular --- */
@media (max-width: 860px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: var(--e-8); padding-block: var(--e-4) var(--e-10); }
  .pasos ol { grid-template-columns: minmax(0, 1fr); gap: var(--e-3); }
  .pedir { grid-template-columns: minmax(0, 1fr); gap: var(--e-6); }
  .pasos li { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--e-4); row-gap: var(--e-1); padding: var(--e-5); }
  .pasos li::before { grid-row: span 2; margin-bottom: 0; }
}
@media (max-width: 520px) {
  .rasgos { grid-template-columns: minmax(0, 1fr); }
  .vitrina { min-height: 470px; }
  .muestra-tarjeta { left: var(--e-4); top: var(--e-6); width: 78%; }
  .muestra-quiz { right: var(--e-4); bottom: var(--e-4); width: calc(100% - var(--e-8)); padding: var(--e-4); }
  .muestra-chip { top: var(--e-4); right: var(--e-4); }
  .otra-app { padding: var(--e-6); }
  .pedir-form { padding: var(--e-5); }
}

/* sin acceso */
.barra:has(+ .aviso) { max-width: 560px; }
.aviso { max-width: 560px; margin: var(--e-2) auto 0; }
.app {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-grande); box-shadow: var(--sombra-1);
  padding: var(--e-6); display: flex; flex-direction: column; gap: var(--e-4);
}
.app h2 { font-size: var(--t-sub); font-weight: 800; letter-spacing: -0.02em; }
.app .entrar { align-self: flex-start; }
.aviso .bajada a { color: var(--accent); font-weight: 600; }
.aviso code { font-size: 0.95em; background: var(--accent-soft); padding: 1px 6px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }