/* Identidad visual de la app; la composición responsive vive en styles.css.
   Colores base: src/theme/colors.ts. Fondos: assets/FONDOS/. */
:root {
  --navy: #102a56;
  --navy-deep: #0b1830;
  --blue: #4a8dff;
  --sky: #4a8dff;
  --cream: #fffdf8;
  --ink: #182b4d;
  --muted: #6b7a99;
  --line: #e7edf7;
  --lavender: #f1ecff;
  --mint: #e8faf5;
  --coral: #fff0eb;
}
body {
  background: var(--cream);
  color: var(--ink);
}
.button {
  border-radius: 16px;
}
.button-light {
  background: linear-gradient(135deg, #3273d6, #3b6cd7);
  color: #fff;
  box-shadow: 0 8px 26px #4a8dff30;
}
.button-light:hover {
  background: linear-gradient(135deg, #2d6bcc, #315ec7);
  box-shadow: 0 12px 32px #4a8dff40;
}
.button-outline {
  border-color: #c8daf7;
  background: #ffffff80;
  color: #2f68b9;
}
.button-outline:hover {
  background: #e8f1ff;
}
.section-light h2 em {
  color: #4d82cb;
}
.section-light .eyebrow {
  color: #56729f;
}

/* Portada: fondo nuevo con la misma luz y materiales de la app. */
.dark-opening {
  background: url("/assets/bg-hero.webp") center bottom / cover no-repeat
    #fffdf8;
}
.dark-opening::before {
  display: none;
}
.menu-toggle {
  border-color: #d1dff3;
  background: #ffffffb3;
  border-radius: 12px;
}
.menu-toggle span {
  background: #315e9a;
}
.hero-eyebrow {
  color: #5a7198;
}
.sparkle {
  color: #729ce0;
}
.hero-description {
  color: #596c8d;
}
.availability,
.availability strong {
  color: #536988;
}
.orbit {
  border-color: #7bade329;
}
.orbit-two {
  border-color: #a4afe32e;
}
.phone {
  background: linear-gradient(
    115deg,
    #f5f9ff,
    #a7c4e8 26%,
    #d6e5fa 75%,
    #ffffff
  );
  border-color: #fff;
  box-shadow:
    18px 28px 55px #5d7da533,
    0 0 65px #a8d8ff45;
}
.phone::after {
  background: #acc6e8;
}
.phone-app {
  background:
    linear-gradient(#ffffffd9, #fffdf8d9),
    url("/assets/bg-home.webp") center / cover;
  color: #102a56;
}
.hero-nana {
  filter: drop-shadow(0 18px 16px #6087bc25);
}
.floating-note {
  background: #ffffffed;
  border-color: #fff;
  box-shadow: 0 12px 30px #729edb24;
  border-radius: 17px;
}
.floating-note strong {
  color: #254973;
}
.floating-note div > span {
  color: #587293;
}
.note-voice {
  background: #faffffed;
  border-color: #d7eef0;
}
.lavender {
  background: #f1ecff;
  color: #8062c5;
}
.mint {
  background: #e8faf5;
  color: #31866d;
}
.note-wave {
  color: #60b8c3;
}
.scene-caption {
  color: #4e6588;
}
.scene-star {
  color: #98bae9;
}
.star-two {
  color: #edbb8b;
}
.hero-bottom {
  border-top-color: #abc6e247;
  color: #405a80;
}
.hero-bottom > span {
  color: #536c90;
}
.hero-bottom > span > strong {
  color: #425e8a;
}
.hero-bottom .icon {
  color: #5a87cd;
}
.scroll-cue {
  border-color: #b8cfee;
  background: #ffffff80;
}

/* Las categorías conservan los códigos de color de la aplicación. */
.feature-grid {
  border: 0;
  border-radius: 0;
  overflow: visible;
  gap: 18px;
}
.feature-card {
  border: 1px solid #e5edf9;
  background: linear-gradient(150deg, #fff, var(--category-soft));
  border-radius: 23px;
  box-shadow: 0 8px 26px #5674a707;
}
.feature-card:hover {
  background: linear-gradient(150deg, #fff 5%, var(--category-hover));
}
.feature-card:nth-child(1),
.feature-card:nth-child(7) {
  --category-soft: #eaf3ff;
  --category-hover: #ddebff;
  --category-ink: #486eb4;
}
.feature-card:nth-child(2) {
  --category-soft: #f1ecff;
  --category-hover: #e6ddfc;
  --category-ink: #7b61a8;
}
.feature-card:nth-child(3),
.feature-card:nth-child(6) {
  --category-soft: #fff0eb;
  --category-hover: #ffe6df;
  --category-ink: #a2685a;
}
.feature-card:nth-child(4),
.feature-card:nth-child(5) {
  --category-soft: #e8faf5;
  --category-hover: #d5f2e9;
  --category-ink: #367b70;
}
.feature-card:nth-child(8) {
  --category-soft: #fff8e5;
  --category-hover: #fff0c8;
  --category-ink: #917343;
}
.feature-number,
.feature-tag {
  color: var(--category-ink);
}
.feature-card p {
  color: #62738f;
}
.feature-footnote {
  color: #617794;
}
.feature-footnote strong {
  color: #4d688f;
}

/* Nana: lavanda y luz azul del fondo de conversación. */
.nana-section {
  background:
    linear-gradient(100deg, #eaf3ffdb, #f7f2ffcf),
    url("/assets/bg-chat.webp") center 45% / cover;
  border-block: 1px solid #e9eafa;
}
.nana-story .eyebrow {
  color: #69639c;
}
.nana-story > p:not(.eyebrow) {
  color: #5f6c90;
}
.nana-character > img {
  filter: drop-shadow(0 9px 20px #8f92bc26);
}
.nana-halo {
  background: radial-gradient(#d3dcffb3, transparent 70%);
}
.character-note {
  color: #6b7298;
}
.character-note em {
  color: #796baa;
}
.demo-card {
  background: #ffffffeb;
  border-color: #fff;
  box-shadow: 0 20px 50px #8d9acd26;
  border-radius: 26px;
}
.demo-top .icon {
  color: #9477d1;
}
.demo-label {
  color: #726493;
  border-color: #e3d9f6;
  background: #f7f3ff;
}
.demo-tabs button {
  border-color: #dce4f5;
  color: #64749a;
  border-radius: 11px;
}
.demo-tabs button[aria-selected="true"] {
  background: #3c72d0;
  color: #fff;
  border-color: #3c72d0;
}
.demo-tabs button:hover {
  border-color: #93b5ec;
}
.demo-quote {
  background: linear-gradient(120deg, #edf5ff, #f5efff);
  border-radius: 16px;
}
.demo-quote .eyebrow {
  color: #6a77a0;
}
.waveform i {
  background: #9992dd;
}
.waveform i:nth-child(2n) {
  background: #9ec5f5;
}
.response-check {
  background: #e8faf5;
  color: #288066;
}
.demo-response .eyebrow {
  color: #4a8577;
}
.response-details span {
  background: #edf4ff;
  color: #56749b;
}
.demo-disclaimer {
  color: #6e7c97;
}
.nana-extras {
  border-top-color: #c5d2ec80;
}
.nana-extras > div {
  color: #647595;
}
.nana-extras .icon {
  color: #829cdb;
}
.nana-extras strong {
  color: #3c5686;
}

.week-card {
  background: linear-gradient(130deg, #fff, #f3f8ff);
  border-color: #e2eafa;
  box-shadow: 0 18px 42px #8093c516;
  border-radius: 23px;
}
.week-icon {
  background: #edf5ff;
  border-color: #dae8fb;
  color: #648dc8;
}
.sleep-chart > div > span {
  background: linear-gradient(to top, #b8a1ee, #e7dcff);
  border-color: #c7b7ef;
}
.sleep-chart > div:last-child > span {
  background: linear-gradient(to top, #718edd, #b9ceff);
  border-color: #b0c4f3;
}
.week-note {
  background: #eaf7f4;
}
.pdf-card {
  border-color: #e4eafa;
  box-shadow: 0 15px 30px #7c98c617;
  border-radius: 16px;
}
.pdf-icon {
  background: #fff0eb;
  color: #b27b69;
}

/* Familia utiliza su propio fondo nocturno original de la app. */
.plans-section {
  background:
    radial-gradient(ellipse at 88% 0%, #f1ecffb3, transparent 60%),
    linear-gradient(135deg, #fff9f4, #f2f6ff 70%);
}
.centered h2 em {
  color: #657bb6;
}
.plan-card {
  background: #ffffffcf;
  border-color: #e4eafa;
  border-radius: 23px;
  box-shadow: 0 12px 36px #7081b410;
}
.family-plan {
  background:
    linear-gradient(165deg, #17244f63, #333d7950),
    url("/assets/bg-family.webp") center 58% / cover,
    #243160;
  color: #f5f5ff;
  border-color: #b9b9e6;
  box-shadow: 0 18px 45px #6e70b230;
}
.family-plan .plan-top .eyebrow {
  color: #cfcef0;
}
.family-plan .plan-chip {
  color: #e2ddff;
  border-color: #b8b2e959;
  background: #c4c0ff14;
}
.family-plan > p {
  color: #e0def6;
  border-color: #bfc0e547;
}
.family-plan .check-list {
  color: #eeebff;
}
.family-plan > small,
.family-price span {
  color: #e0dcf5;
}
.family-plan .button-light {
  background: linear-gradient(135deg, #fff, #e5efff);
  color: #315c9c;
  box-shadow: 0 7px 24px #19244620;
}
.family-plan .button-light:hover {
  background: #fff;
}
.payment-shield {
  border-color: #d5e6ee;
  background: #e8faf580;
  color: #5a8b8d;
  border-radius: 15px;
}
.payment-intro h3 span {
  color: #497ab5;
}

@media (max-width: 800px) {
  .dark-opening {
    background:
      linear-gradient(#fffdf800 40%, #fffdf81a),
      url("/assets/bg-home.webp") center / cover;
  }
  .feature-grid {
    gap: 14px;
  }
  .nana-section {
    background:
      linear-gradient(#eef4ffcc, #f7f2ffbd),
      url("/assets/bg-chat.webp") center / cover;
  }
}
@media (max-width: 480px) {
  .feature-grid {
    gap: 12px;
  }
  .feature-card {
    border-radius: 18px;
  }
  .floating-note {
    border-radius: 13px;
  }
  .hero-eyebrow {
    font-size: 0.5rem;
  }
  .hero-nana {
    filter: drop-shadow(0 12px 12px #6087bc2b);
  }
}