/* =========================================================================
   Nidoo Landing Page — estilos específicos
   Requiere nidoo-tokens.css cargado antes.
   ========================================================================= */

html, body { margin: 0; padding: 0; font-family: var(--font-text); color: var(--ink); background: var(--linen); -webkit-font-smoothing: antialiased; }
*, *::before, *::after { box-sizing: border-box; }
img { display: block; max-width: 100%; }

.site {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 32px;
}

/* --- Nav ---------------------------------------------------------------- */
.nidoo-nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(247, 242, 234, 0.86);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border-bottom: 1px solid var(--hairline);
}
.nidoo-nav-inner {
  max-width: 1160px; margin: 0 auto; padding: 18px 32px;
  display: flex; align-items: center; justify-content: space-between;
}
.nidoo-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nidoo-brand svg { width: 28px; height: 28px; }
.nidoo-brand .wm { font-family: var(--font-display); font-weight: 500; font-size: 24px; letter-spacing: -0.02em; color: var(--ink); }
.nidoo-nav-links { display: flex; gap: 28px; align-items: center; font-size: 14px; }
.nidoo-nav-links a { color: var(--muted-ink); text-decoration: none; transition: color var(--dur-quick); }
.nidoo-nav-links a:hover { color: var(--ink); }
.nidoo-nav-links .nidoo-nav-cta { background: var(--ember); color: #FDFAF5; border: 0; padding: 10px 16px; border-radius: 10px; font-family: var(--font-text); font-weight: 500; font-size: 14px; cursor: pointer; transition: background var(--dur-base); text-decoration: none; }
.nidoo-nav-links .nidoo-nav-cta:hover { background: var(--ember-hover); }

/* Mobile nav toggle */
.nidoo-nav-hamburger { display: none; background: none; border: none; padding: 4px; cursor: pointer; color: var(--ink); }
@media (max-width: 640px) {
  .nidoo-nav-links { display: none; }
  .nidoo-nav-hamburger { display: flex; }
  .nidoo-nav-links.open { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--linen); border-bottom: 1px solid var(--hairline); padding: 16px 32px 24px; gap: 16px; z-index: 50; }
}

/* --- Botones ------------------------------------------------------------ */
.btn-primary-lg { background: var(--ember); color: #FDFAF5; border: 0; padding: 16px 24px; border-radius: 12px; font-family: var(--font-text); font-weight: 500; font-size: 16px; cursor: pointer; transition: background var(--dur-base); text-decoration: none; }
.btn-primary-lg:hover { background: var(--ember-hover); }
.btn-quiet { background: transparent; color: var(--ink); border: 0; padding: 16px 12px; font-family: var(--font-text); font-weight: 500; font-size: 15px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: color var(--dur-quick); text-decoration: none; }
.btn-quiet:hover { color: var(--ember); }

/* --- Hero --------------------------------------------------------------- */
.hero { padding: 96px 0 80px; }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-ink); margin: 0 0 18px; }
.hero h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(44px, 7vw, 84px); line-height: 1.02; letter-spacing: -0.025em;
  color: var(--ink); margin: 0 0 24px; max-width: 920px; text-wrap: pretty;
}
.hero .lead { font-size: 19px; line-height: 1.55; color: var(--muted-ink); max-width: 560px; margin: 0 0 36px; }
.hero-cta-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.trust-line { margin-top: 28px; display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted-ink); }
.trust-line svg { width: 14px; height: 14px; stroke: var(--muted-ink); fill: none; flex-shrink: 0; }

.hero-visual { margin-top: 64px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: center; }
.hero-photo {
  aspect-ratio: 5/4; border-radius: 20px; overflow: hidden; position: relative;
  background: url("https://images.unsplash.com/photo-1519689680058-324335c77eba?w=1200&auto=format&fit=crop&q=60") center/cover;
  box-shadow: 0 24px 60px rgba(42,32,26,0.16);
}
.hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(42,32,26,0.5) 100%); }
.hero-photo .cap { position: absolute; bottom: 20px; left: 24px; right: 24px; color: #FDFAF5; z-index: 1; font-family: var(--font-display); font-size: 24px; line-height: 1.15; letter-spacing: -0.015em; font-weight: 400; font-style: italic; }
.hero-preview { background: var(--paper); border: 1px solid var(--hairline); border-radius: 20px; padding: 24px; }
.hp-eb { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-ink); }
.hp-title { font-family: var(--font-display); font-size: 22px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; margin: 6px 0 8px; color: var(--ink); }
.hp-body { font-size: 14px; line-height: 1.55; color: var(--ink); margin: 0 0 14px; }
.hp-meta { font-size: 11px; color: var(--faint-ink); }
.hp-tail { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.hp-tail svg { width: 14px; height: 14px; stroke: var(--dusk); fill: none; flex-shrink: 0; }
.hp-tail .ai-t { font-size: 12px; color: var(--dusk); font-style: italic; }

@media (max-width: 768px) {
  .hero-visual { grid-template-columns: 1fr; }
  .hero-photo { display: none; }
}

/* --- Secciones ---------------------------------------------------------- */
.nidoo-section { padding: 120px 0; border-top: 1px solid var(--hairline); }
.nidoo-section:first-of-type { border-top: none; }
.section-h {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(32px, 4.5vw, 52px); line-height: 1.1; letter-spacing: -0.02em;
  max-width: 720px; text-wrap: pretty; margin: 0;
}
.section-lead { font-size: 17px; line-height: 1.6; color: var(--muted-ink); max-width: 560px; margin: 18px 0 0; }

/* Cómo funciona */
.how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 64px; }
.step { background: var(--paper); border: 1px solid var(--hairline); border-radius: 16px; padding: 32px 28px; }
.step-n { font-family: var(--font-display); font-size: 44px; font-weight: 400; color: var(--ember); line-height: 1; letter-spacing: -0.02em; }
.step h3 { font-family: var(--font-display); font-size: 24px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; margin: 14px 0 8px; color: var(--ink); }
.step p { font-size: 14px; line-height: 1.6; color: var(--muted-ink); margin: 0; }
.step-disclaimer { margin-top: 12px; font-size: 11px; color: var(--muted-ink); opacity: 0.6; font-style: italic; }

@media (max-width: 768px) {
  .how { grid-template-columns: 1fr; }
}

/* Sección emocional (fondo oscuro) */
.emo { background: var(--ink); color: #F7F2EA; padding: 140px 0; }
.emo .section-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(247,242,234,0.55); margin: 0 0 24px; }
.emo h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 6vw, 72px); line-height: 1.05; letter-spacing: -0.025em; max-width: 880px; text-wrap: pretty; margin: 0; }
.emo h2 em { font-style: italic; color: var(--amber); font-weight: 500; }
.emo .lead { font-size: 18px; line-height: 1.6; color: rgba(247, 242, 234, 0.72); max-width: 560px; margin: 24px 0 0; }
.emo .photos { margin-top: 72px; display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 16px; }
.emo .photos div { aspect-ratio: 4/5; border-radius: 16px; background-size: cover; background-position: center; }
@media (max-width: 768px) {
  .emo .photos { grid-template-columns: 1fr 1fr; }
  .emo .photos div:last-child { display: none; }
}

/* Libro */
.book { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; margin-top: 56px; }
.book-cover {
  aspect-ratio: 5/6; border-radius: 6px;
  background: linear-gradient(180deg, rgba(253,250,245,0.05), rgba(26,21,18,0.5)),
              url("https://images.unsplash.com/photo-1515488042361-ee00e0ddd4e4?w=900&auto=format&fit=crop&q=60") center/cover;
  box-shadow: 0 30px 80px rgba(42,32,26,0.22), 0 0 0 1px rgba(42,32,26,0.06);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 36px; color: #FDFAF5;
}
.book-cover .title { font-family: var(--font-display); font-size: 40px; line-height: 1.02; font-weight: 500; letter-spacing: -0.02em; text-wrap: pretty; }
.book-cover .sub { font-size: 13px; opacity: 0.85; margin-top: 10px; letter-spacing: 0.04em; }
.book-copy h2 { font-family: var(--font-display); font-weight: 400; font-size: 44px; line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 16px; color: var(--ink); }
.book-copy p { font-size: 16px; line-height: 1.6; color: var(--muted-ink); margin: 0 0 24px; max-width: 480px; }
@media (max-width: 768px) {
  .book { grid-template-columns: 1fr; gap: 40px; }
  .book-cover { aspect-ratio: 3/2; }
}

/* Privacidad */
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 56px; }
.trust-card { padding: 28px; border-radius: 16px; background: var(--paper); border: 1px solid var(--hairline); }
.trust-card svg { width: 24px; height: 24px; stroke: var(--ember); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.trust-card h3 { font-family: var(--font-display); font-size: 22px; font-weight: 500; letter-spacing: -0.01em; margin: 16px 0 8px; color: var(--ink); }
.trust-card p { font-size: 14px; line-height: 1.6; color: var(--muted-ink); margin: 0; }
@media (max-width: 768px) {
  .trust-grid { grid-template-columns: 1fr; }
}

/* Precios */
.pricing { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 56px; max-width: 860px; }
.price-card { padding: 40px 36px; border-radius: 16px; background: var(--paper); border: 1px solid var(--hairline); }
.price-card.featured { background: var(--ink); color: #F7F2EA; border-color: var(--ink); position: relative; }
.price-card.featured::before { content: "Recomendado"; position: absolute; top: -12px; left: 36px; background: var(--ember); color: #FDFAF5; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; padding: 6px 10px; border-radius: 6px; }
.price-name { font-family: var(--font-display); font-weight: 500; font-size: 24px; letter-spacing: -0.015em; margin: 0 0 4px; }
.price-sub { font-size: 13px; color: var(--muted-ink); margin: 0 0 28px; }
.price-card.featured .price-sub { color: rgba(247,242,234,0.65); }
.price-big { font-family: var(--font-display); font-weight: 400; font-size: 48px; letter-spacing: -0.02em; line-height: 1; }
.price-big sup { font-size: 16px; font-weight: 500; color: var(--muted-ink); margin-right: 4px; vertical-align: super; }
.price-card.featured .price-big sup { color: rgba(247,242,234,0.6); }
.price-big .currency { font-size: 16px; color: rgba(247,242,234,0.6); font-weight: 500; }
.price-per { font-size: 13px; color: var(--muted-ink); margin-top: 6px; }
.price-card.featured .price-per { color: rgba(247,242,234,0.65); }
.price-list { list-style: none; padding: 24px 0 0; margin: 24px 0 0; border-top: 1px solid var(--hairline); }
.price-card.featured .price-list { border-top-color: rgba(247,242,234,0.14); color: #F7F2EA; }
.price-list li { padding: 6px 0; font-size: 14px; display: flex; align-items: center; gap: 10px; }
.price-list li svg { width: 16px; height: 16px; stroke: var(--ember); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.price-btn { margin-top: 28px; display: block; width: 100%; text-align: center; padding: 14px 20px; border-radius: 12px; font-family: var(--font-text); font-weight: 500; font-size: 15px; cursor: pointer; border: 0; background: var(--paper-warm); color: var(--ink); transition: background var(--dur-base); text-decoration: none; }
.price-card.featured .price-btn { background: var(--ember); color: #FDFAF5; }
.price-card.featured .price-btn:hover { background: var(--ember-hover); }
@media (max-width: 640px) {
  .pricing { grid-template-columns: 1fr; }
}

/* CTA final */
.final-cta { text-align: center; padding: 120px 0; }
.final-cta h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(36px, 5.5vw, 64px); line-height: 1.05; letter-spacing: -0.025em; max-width: 740px; margin: 0 auto 28px; text-wrap: pretty; color: var(--ink); }

/* Footer */
.nidoo-footer { padding: 48px 0 72px; font-size: 13px; color: var(--muted-ink); border-top: 1px solid var(--hairline); }
.footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
.footer-brand { display: flex; align-items: center; gap: 8px; }
.footer-brand .wm { font-family: var(--font-display); font-weight: 500; font-size: 18px; color: var(--ink); }
.footer-links a { color: var(--muted-ink); text-decoration: none; margin-left: 24px; transition: color var(--dur-quick); }
.footer-links a:hover { color: var(--ink); }