/* Landing Nauta — colores y tipografía desde nauta-tokens.css (compartido con las apps).
   Estilo de Kinenauta Lab: hero claro, botones píldora, tarjetas con línea y sombra suave. */

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

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

body {
  margin: 0;
  font-family: var(--nt-font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--nt-text);
  background: var(--nt-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--nt-brand-ink); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--nt-focus) 55%, transparent); outline-offset: 2px; }

.contenedor { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: 16px; top: -60px; z-index: 10; background: #fff; padding: 8px 14px; border-radius: 8px; }
.saltar:focus { top: 12px; }

h2 { font-size: 26px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 800; margin: 0 0 8px; }
.seccion-bajada { margin: 0 0 24px; color: var(--nt-text-2); }

/* ── Botones ─────────────────────────────────────────── */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border-radius: var(--nt-radius-pill);
  border: 1px solid transparent;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  text-align: center;
  transition: transform 120ms var(--nt-ease), box-shadow var(--nt-dur), background var(--nt-dur);
}
.boton:active { transform: scale(0.98); }
.boton-cta { background: var(--nt-brand); color: #fff; }
.boton-cta:hover { background: var(--nt-brand-ink); }
.boton-wsp { background: var(--nt-surface); color: var(--nt-success); border-color: color-mix(in srgb, var(--nt-success) 35%, transparent); }
.boton-wsp:hover { background: var(--nt-success-bg); }
/* Pago en dólares (Whop) para quien compra desde fuera de Chile; en /pt/ es el botón principal. */
.boton-intl { background: var(--nt-surface); color: var(--nt-brand-ink); border-color: var(--nt-brand-line); }
.boton-intl:hover { background: var(--nt-brand-soft); border-color: var(--nt-brand); }

/* ── Hero claro (como el Lab: superficie blanca, línea inferior, logo en tinta) ── */
.hero {
  position: relative;
  background:
    radial-gradient(ellipse 60% 80% at 100% 0%, var(--nt-brand-soft), transparent 70%),
    var(--nt-surface);
  color: var(--nt-text);
  padding: 0 0 48px;
  border-bottom: 1px solid var(--nt-border);
  overflow: hidden;
}
.hero .contenedor { position: relative; }
.barra-hero { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; margin: 0 0 32px; border-bottom: 1px solid var(--nt-border); }
.barra-hero .marca { margin: 0; }
/* Selector de idioma = .seg del Lab */
.idiomas { display: flex; gap: 2px; padding: 3px; border-radius: var(--nt-radius-pill); background: var(--nt-surface-2); }
.idiomas a { padding: 5px 12px; border-radius: var(--nt-radius-pill); font-size: 12.5px; font-weight: 700; color: var(--nt-text-2); text-decoration: none; }
.idiomas a:hover { color: var(--nt-text); }
.idiomas a[aria-current="page"] { background: var(--nt-surface); color: var(--nt-text); box-shadow: 0 1px 3px rgba(13, 27, 36, 0.1); }
.sugerir-idioma { margin: -18px 0 18px; font-size: 14px; }
.sugerir-idioma a { color: var(--nt-brand-ink); font-weight: 700; }
/* Vuelta desde Whop (?compra=whop): el acceso llega por correo. */
.aviso-compra { margin: 0 0 22px; padding: 12px 16px; border-radius: var(--nt-radius); background: var(--nt-success-bg); border: 1px solid color-mix(in srgb, var(--nt-success) 35%, transparent); color: var(--nt-text); font-size: 15px; line-height: 1.5; }
.aviso-compra a { color: var(--nt-success); font-weight: 700; }
.aviso-idioma { margin: 10px 0 0; font-size: 14px; color: var(--nt-text-2); }
.marca { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; font-weight: 800; font-size: 15px; letter-spacing: -0.01em; color: var(--nt-text); }
.marca img { width: 32px; height: 32px; border-radius: 9px; }
/* = .eyebrow del Lab */
.para-quien {
  display: inline-block;
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nt-brand-ink);
}
.hero h1 { margin: 0 0 16px; font-size: 30px; line-height: 1.12; letter-spacing: -0.03em; font-weight: 800; max-width: 780px; }
.bajada { margin: 0 0 26px; font-size: 17px; color: var(--nt-text-2); max-width: 640px; }
.bajada strong { color: var(--nt-text); }

/* ── Momentos ─────────────────────────────────────────── */
.momentos { display: grid; gap: 14px; margin-top: 32px; position: relative; }
.momento {
  background: var(--nt-surface);
  border: 1px solid var(--nt-border);
  border-radius: var(--nt-radius-lg);
  padding: 20px;
  box-shadow: var(--nt-shadow);
}
/* = .tag del Lab */
.momento-etiqueta { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nt-brand-ink); background: var(--nt-brand-soft); border-radius: 6px; padding: 3px 8px; }
.momento h3 { margin: 10px 0 6px; font-size: 18px; font-weight: 700; }
.momento p { margin: 0; color: var(--nt-text-2); font-size: 15px; }

/* ── Productos ────────────────────────────────────────── */
.productos { padding-top: 48px; }
.lanzamiento {
  display: inline-block;
  margin: -8px 0 20px;
  padding: 5px 14px;
  border-radius: var(--nt-radius-pill);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--nt-warning);
  background: var(--nt-warning-bg);
  border: 1px solid color-mix(in srgb, var(--nt-warning) 30%, transparent);
}
.lanzamiento[hidden] { display: none; }
.cupon-aplicado { color: var(--nt-success); background: var(--nt-success-bg); border-color: color-mix(in srgb, var(--nt-success) 30%, transparent); }
.precio s { font-size: 17px; font-weight: 600; color: var(--nt-text-3); margin-right: 6px; }
.tarjetas { display: grid; gap: 16px; align-items: start; }
.tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--nt-surface);
  border: 1px solid var(--nt-border);
  border-radius: var(--nt-radius-lg);
  padding: 22px 20px;
  box-shadow: var(--nt-shadow);
  transition: transform 220ms var(--nt-ease), box-shadow 220ms var(--nt-ease), border-color 220ms var(--nt-ease);
}
/* Al pasar el mouse (o navegar con teclado) la tarjeta se levanta: indica que es elegible. */
@media (hover: hover) {
  .tarjeta:hover { transform: translateY(-4px); box-shadow: var(--nt-shadow-lg); border-color: var(--nt-brand); }
  .tarjeta-destacada:hover { box-shadow: var(--nt-shadow-lg); border-color: var(--nt-brand); }
}
.tarjeta:focus-within { box-shadow: var(--nt-shadow-lg); }
@media (prefers-reduced-motion: reduce) {
  .tarjeta, .tarjeta:hover { transition: none; transform: none; }
}
.tarjeta-destacada {
  border: 2px solid var(--nt-brand); /* = .price-card del Lab */
  box-shadow: var(--nt-shadow-md);
}
.insignia {
  align-self: flex-start;
  margin-bottom: 10px;
  padding: 3px 11px;
  border-radius: var(--nt-radius-pill);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--nt-accent-strong); /* coral: etiqueta destacada, como .btn-accent del Lab */
}
.tarjeta h3 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.tarjeta-sub { margin: 2px 0 0; color: var(--nt-text-2); font-size: 14.5px; }
.precio { margin: 14px 0 0; font-size: 32px; font-weight: 800; letter-spacing: -0.03em; color: var(--nt-text); min-height: 0; }
.precio:empty { display: none; }
.precio span { font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--nt-text-3); }
.precio .usd { display: block; margin-top: 2px; font-weight: 500; }
.ahorro { margin: 4px 0 0; font-size: 13.5px; font-weight: 700; color: var(--nt-success); }
.bullets { list-style: none; margin: 16px 0 20px; padding: 0; }
.bullets li { position: relative; padding: 6px 0 6px 26px; font-size: 14.5px; line-height: 1.5; color: var(--nt-text-2); }
.bullets li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 12px;
  width: 11px;
  height: 6px;
  border-left: 2.5px solid var(--nt-brand);
  border-bottom: 2.5px solid var(--nt-brand);
  transform: rotate(-45deg);
}
.acciones { display: grid; gap: 10px; margin-top: auto; }

.post-pago {
  margin-top: 20px;
  padding: 18px 20px;
  border-radius: var(--nt-radius-lg);
  background: var(--nt-brand-soft);
  border: 1px solid var(--nt-brand-line);
}
.post-pago h3 { margin: 0 0 4px; font-size: 16px; }
.post-pago p { margin: 0; color: var(--nt-text-2); font-size: 15px; }
.post-pago a { font-weight: 700; }
.post-pago p + p { margin-top: 8px; }

/* ── Capturas ─────────────────────────────────────────── */
.capturas { padding-top: 56px; }
figure { margin: 0; }
figure img { border-radius: var(--nt-radius); box-shadow: var(--nt-shadow-lg); background: var(--nt-surface); }
figcaption { margin-top: 10px; font-size: 14px; color: var(--nt-text-2); }
.captura-ancha { margin-bottom: 20px; }
.fila-capturas { display: grid; gap: 20px; }
.fila-capturas figure:first-child { max-width: 300px; }
.fila-telefonos {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 72%;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
  -webkit-overflow-scrolling: touch;
}
.fila-telefonos figure { scroll-snap-align: start; }

/* ── Preguntas ────────────────────────────────────────── */
.preguntas { padding-top: 56px; }
.preguntas details {
  background: var(--nt-surface);
  border: 1px solid var(--nt-border);
  border-radius: var(--nt-radius);
  padding: 0 18px;
  margin-bottom: 10px;
}
.preguntas summary { min-height: 52px; display: flex; align-items: center; font-weight: 700; cursor: pointer; }
.preguntas details p { margin: 0 0 16px; color: var(--nt-text-2); }

/* ── Pie ──────────────────────────────────────────────── */
.pie {
  max-width: 1120px;
  margin: 56px auto 0;
  padding: 20px 16px 32px;
  border-top: 1px solid var(--nt-border);
  text-align: center;
  font-size: 13px;
  color: var(--nt-text-3);
}
.pie p { margin: 0; }
.pie-marca { margin-top: 4px !important; font-weight: 700; color: var(--nt-text-2); }
.pie a { font-weight: 700; text-decoration: none; }

/* ── Escritorio ───────────────────────────────────────── */
@media (min-width: 760px) {
  .hero { padding: 0 0 72px; }
  .barra-hero { margin-bottom: 56px; }
  .hero h1 { font-size: 48px; }
  h2 { font-size: 32px; }
  .momentos { grid-template-columns: 1fr 1fr; }
  .fila-capturas { grid-template-columns: 300px 1fr; align-items: start; }
  .fila-telefonos { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; }
}
@media (min-width: 1000px) {
  .tarjetas { grid-template-columns: 1.08fr 1fr 1fr; }
}

/* Demo gratis del simulador */
.acciones-hero { display: flex; flex-wrap: wrap; gap: 10px; }
/* = .btn-ghost del Lab */
.boton-demo { background: var(--nt-surface); color: var(--nt-text); border-color: var(--nt-border); }
.boton-demo:hover { background: var(--nt-surface-2); }
.boton-secundario { background: var(--nt-brand-soft); color: var(--nt-brand-ink); border-color: var(--nt-brand-line); }
.boton-secundario:hover { border-color: var(--nt-brand); }
@media (max-width: 480px) { .acciones-hero .boton { flex: 1 1 100%; } }