/* ============================================================================
   Kinedu Brand 2026 — las secciones de /assessment con el sistema del home de
   kinedu.com: fondo crema, tarjetas blancas de radio 24–32 con borde suave,
   burbujas pastel, etiqueta de sección en píldora azul, cifras a color.
   Fuente: kinedu-landing/styles.css (:root, .sec-tag, .stat-num, .orb,
   .feature-row) y el CTA final de masterclasses.

   Carga DESPUÉS del CSS propio de cada página y solo re-viste: no cambia
   estructura ni copy. Nada de secciones oscuras a todo lo ancho ni fondos
   grises — la casa es luminosa.
   ========================================================================== */
:root {
  --k-soft-blue: #EFF4FB; --k-soft-green: #EDF9EE; --k-soft-pink: #FDF0F5;
  --k-soft-orange: #FFF3D9; --k-soft-purple: #F7F1FB;
  --k-green: #4CD964; --k-orange: #FFC033; --k-pink: #E84D8A;
  --k-shadow-md: 0 6px 20px rgba(0, 0, 0, .06), 0 2px 6px rgba(0, 0, 0, .03);
  --k-shadow-lg: 0 16px 48px rgba(0, 0, 0, .08), 0 4px 12px rgba(0, 0, 0, .03);
  --k-border: rgba(0, 0, 0, .06);
}
body { background: var(--k-cream) !important; font-family: var(--k-font) !important; color: var(--k-ink); }
h1, h2, h3, h4, .content-title, .qtext, .final h2 { font-family: var(--k-font); }

/* ── burbujas pastel de la casa (home de kinedu.com), detrás de todo ──────── */
.k-funnel-bg span { opacity: 1; }
.k-funnel-bg .a { background: var(--k-soft-blue); left: -260px; top: -160px; width: 640px; height: 640px; }
.k-funnel-bg .b { background: var(--k-soft-orange); right: -240px; bottom: -240px; width: 600px; height: 600px; }
.k-funnel-bg .c { background: var(--k-soft-green); left: 7%; top: 14%; width: 76px; height: 76px; }
.k-funnel-bg .d { background: var(--k-soft-pink); right: 9%; top: 30%; width: 110px; height: 110px; }
.k-funnel-bg .e { background: var(--k-soft-purple); left: 12%; bottom: 18%; width: 130px; height: 130px; }
.k-funnel-bg .f { background: var(--k-soft-blue); right: 20%; bottom: 8%; width: 90px; height: 90px; }
@media (max-width: 760px) { .k-funnel-bg .c, .k-funnel-bg .d, .k-funnel-bg .e, .k-funnel-bg .f { display: none; } }

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero { background: transparent !important; border-top: 0 !important; }
@media (min-width: 821px) { .hero-wash { background: linear-gradient(90deg, rgba(251,250,248,1) 0%, rgba(251,250,248,.99) 32%, rgba(251,250,248,.72) 46%, rgba(251,250,248,.1) 66%, rgba(251,250,248,0) 100%); } }
h1, .hero h1 { color: var(--k-ink); }
.lede { color: var(--k-ink-2); }
.button { background: var(--k-blue-action); color: #fff; box-shadow: none; }
.button:hover { background: #0B6FD6; box-shadow: 0 12px 26px -14px rgba(8, 123, 243, .55); }
.microcopy { color: var(--k-ink-3); font-weight: 500; }
.microcopy b { color: var(--k-ink-3); }
.product-preview { border: 1px solid var(--k-border); box-shadow: var(--k-shadow-lg); border-radius: 24px; }

/* ── la tarjeta de pasos: flotante, no pegada al hero ───────────────────── */
.process-wrap { width: min(100% - 48px, 1160px); margin: 0 auto; }
/* solo el hero con foto (index) recibe la tarjeta encimada; en cuidadores y
   escuelas la tarjeta trae su propio título y va debajo del hero */
body:has(.hero-photo) .process-wrap { margin-top: -72px; }
/* cuidadores / escuelas: tres pasos directos — la rejilla 1.45fr/1px/.75fr
   del index metía el paso 2 en una columna de 1px y encimaba los textos */
.process:not(:has(.process-steps)) { grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: start; }
.process:not(:has(.process-steps)) .step p { max-width: 240px; }
.process {
  min-height: 0; padding: 44px 48px; background: #fff; border: 1px solid var(--k-border);
  border-radius: 32px; box-shadow: var(--k-shadow-lg);
}
.divider { width: 1px; height: 150px; background: rgba(0, 0, 0, .08); }
.step p { color: var(--k-ink); }
.step-number { box-shadow: none; }
.proof b { color: var(--k-blue-action); font-weight: 800; }
.proof p { color: var(--k-ink); }
@media (max-width: 1120px) { .process { padding: 32px; } }
@media (max-width: 820px) { body:has(.hero-photo) .process-wrap { margin-top: 24px; } .divider { width: auto; height: 1px; } .process:not(:has(.process-steps)) { grid-template-columns: 1fr; } }

/* ── etiqueta de sección (sec-tag de kinedu.com) y títulos ─────────────── */
.eyebrow, .pricing .eyebrow, .curves .kicker, .qskill, .qres-top {
  display: inline-block; padding: 8px 20px; background: var(--k-soft-blue);
  border: 1px solid rgba(43, 139, 228, .1); border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--k-blue);
}
.qskill, .qres-top { padding: 6px 14px; }
.content-title, .pricing h2, .curves h2 { color: var(--k-ink); font-weight: 800; letter-spacing: -.03em; }
.content-title span { color: var(--k-blue-action); }
.content-copy, .pricing .pricing-lede, .curves .copy { color: var(--k-ink-2); }

/* ── secciones: todas sobre la crema, sin bloques de color a todo lo ancho ─ */
.tryit, .faq-wrap, .result-section, .difference, .trust, .story, .pricing, .final,
.section, .method, .model, .curves, .day-to-day, .boundary, .closing { background: transparent !important; }
.tryit { padding-top: 120px; }

/* tarjetas: radio 24, borde suave, sombra cálida */
.qcard, .price-card, .compare-card, .trust-card, .profile-card, .mockcard, .curve-card,
.method-card, .model-card, .boundary-card, .story-path span {
  background: #fff; border: 1px solid var(--k-border); border-radius: 24px; box-shadow: var(--k-shadow-md);
}
.price-card.featured { border: 2px solid var(--k-blue); box-shadow: 0 8px 32px rgba(43, 139, 228, .18); }
.price-card .cta { border-radius: 999px; }
.price-card .cta.solid { background: var(--k-blue-action); }
.price-card .cta.ghost { border: 2px solid var(--k-border); color: var(--k-ink); }
.qopt { border-radius: 14px; }
.qres-row { border-radius: 14px; background: var(--k-soft-blue); }
.faq-item summary { color: var(--k-ink); }
.faq-item p { color: var(--k-ink-2); }

/* "difference": de azul marino a crema con tarjetas */
.difference { color: var(--k-ink); }
.difference .eyebrow { color: var(--k-blue); }
.difference .content-title { color: var(--k-ink); }
.difference .content-copy { color: var(--k-ink-2); }
.compare-card { color: var(--k-ink); min-height: 0; }
.compare-card small { color: var(--k-ink-3); }
.compare-card p { color: var(--k-ink-2); }
.compare-card.active { background: var(--k-soft-blue); border: 1px solid rgba(43, 139, 228, .18); box-shadow: 0 8px 32px rgba(43, 139, 228, .14); color: var(--k-ink); }
.compare-card.active small { color: var(--k-blue); }
.check-list i { background: rgba(43, 139, 228, .12); color: var(--k-blue); }

/* "trust": de amarillo pleno a crema con tarjetas */
.trust-card { min-height: 0; }
.trust-card.primary { background: var(--k-blue-action); border: 0; color: #fff; }
.trust-card b { color: var(--k-ink); } .trust-card.primary b { color: #fff; }
.trust-card p { color: var(--k-ink-2); } .trust-card.primary p { color: #D7EFFF; }
.trust-link { color: var(--k-blue); border-bottom-color: var(--k-blue); }

/* "story" y tableros: pasteles de la casa */
.story-board { background: var(--k-soft-pink); }
.story-board::before { background: #F9D7E4; }
.profile-board { background: var(--k-soft-blue); }
.safety { background: var(--k-soft-green); border-left-color: var(--k-green); color: #2E6B3A; }
.scale-board { background: var(--k-blue-action); }
.day-card { background: var(--k-soft-orange); }
.day-card small { color: #9A6B00; }
.boundary-card:nth-child(2) { background: var(--k-soft-pink); border-color: #F9D7E4; }

/* "day-to-day" (ciencia): de azul pleno a tarjeta blanca */
.day-to-day { color: var(--k-ink); padding: 40px 0 110px; }
.day-to-day > .content { background: #fff; border: 1px solid var(--k-border); border-radius: 32px; padding: 64px 56px; box-shadow: var(--k-shadow-md); }
.day-to-day .title { color: var(--k-ink); }
.day-to-day .copy { color: var(--k-ink-2); }
@media (max-width: 760px) { .day-to-day > .content { padding: 36px 24px; border-radius: 24px; } }

/* ── CTA final: la tarjeta blanca con burbujas del cierre de masterclasses ── */
.final, .closing { padding: 40px 0 120px !important; text-align: center; }
.final > .content, .closing > .content {
  position: relative; overflow: hidden; width: min(100% - 48px, 1100px); margin: 0 auto;
  padding: 96px 40px; background: #fff; border: 1px solid var(--k-border);
  border-radius: 32px; box-shadow: var(--k-shadow-md);
}
.final > .content::before, .closing > .content::before {
  content: ""; position: absolute; right: -140px; top: -180px; width: 520px; height: 520px;
  border-radius: 50%; background: var(--k-soft-blue); pointer-events: none;
}
.final > .content::after, .closing > .content::after {
  content: ""; position: absolute; left: -160px; bottom: -220px; width: 460px; height: 460px;
  border-radius: 50%; background: var(--k-soft-orange); pointer-events: none;
}
.final > .content > *, .closing > .content > * { position: relative; }
.final h2, .closing h2 { color: var(--k-ink) !important; font-size: clamp(36px, 4.4vw, 58px) !important; letter-spacing: -.03em !important; line-height: 1.08 !important; }
.final p, .closing p { color: var(--k-ink-2) !important; }
.final .button, .closing .button { background: var(--k-blue-action) !important; color: #fff !important; border-radius: 999px; min-height: 60px; font-size: 17px; }
.final .microcopy, .closing .microcopy { color: var(--k-ink-3) !important; }
@media (max-width: 760px) { .final > .content, .closing > .content { padding: 56px 22px; border-radius: 24px; } }

/* ── página de ciencia: fuente y nav viejo ──────────────────────────────── */
.nav, .back { display: none !important; }
.hero-figure b { color: var(--k-blue-action); }