:root{
  --green-950:#052e1a;
  --green-900:#064e2f;
  --green-800:#086b3e;
  --green-700:#0f8f4f;
  --green-600:#16a35b;
  --green-500:#22c55e;
  --green-100:#dcfce7;
  --green-50:#f0fdf4;
  --gold:#c57a0a;
  --ink:#0f172a;
  --muted:#64748b;
  --line:#dbe7de;
  --white:#ffffff;
  --soft:#f7fbf8;
  --shadow:0 18px 50px rgba(5,46,26,.14);
  --radius:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:linear-gradient(180deg,#f7fbf8 0%,#fff 48%,#f3fbf5 100%)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1160px,calc(100% - 36px));margin:0 auto}
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);backdrop-filter:blur(18px);border-bottom:1px solid rgba(8,107,62,.11)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;font-weight:900;color:var(--green-900);letter-spacing:-.03em}
.brand img{width:48px;height:48px;border-radius:14px;box-shadow:0 10px 22px rgba(8,107,62,.18)}
.brand span{font-size:1.35rem}.nav-links{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.nav-links a{padding:10px 13px;border-radius:999px;color:#1f3b2a;font-weight:700;font-size:.95rem}.nav-links a:hover{background:var(--green-50)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:none;border-radius:999px;padding:13px 18px;font-weight:900;cursor:pointer;transition:.18s ease;line-height:1;white-space:nowrap}.btn-primary{background:linear-gradient(135deg,var(--green-700),var(--green-500));color:white;box-shadow:0 12px 30px rgba(22,163,91,.24)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 36px rgba(22,163,91,.3)}.btn-soft{background:var(--green-50);color:var(--green-900);border:1px solid #b7e6c8}.btn-dark{background:var(--green-950);color:white}.btn-outline{background:#fff;border:1px solid var(--line);color:var(--green-900)}
.hero{padding:72px 0 40px;position:relative;overflow:hidden}.hero:before{content:"";position:absolute;right:-140px;top:-220px;width:520px;height:520px;background:radial-gradient(circle,var(--green-100),transparent 68%);z-index:-1}.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:44px;align-items:center}.eyebrow{display:inline-flex;align-items:center;gap:8px;border:1px solid #bde9cb;background:#fff;border-radius:999px;padding:8px 12px;color:var(--green-800);font-weight:900;font-size:.9rem}.dot{width:9px;height:9px;border-radius:50%;background:var(--green-500);box-shadow:0 0 0 6px rgba(34,197,94,.15)}h1{font-size:clamp(2.45rem,6vw,5.15rem);line-height:.95;margin:20px 0 18px;letter-spacing:-.07em;color:var(--green-950)}h1 strong{color:var(--green-600)}.lead{font-size:clamp(1.05rem,2.2vw,1.32rem);line-height:1.65;color:#3f5b4a;margin:0 0 26px;max-width:690px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.hero-card{position:relative;border-radius:32px;background:linear-gradient(145deg,#fff,#eaffef);padding:14px;border:1px solid rgba(8,107,62,.12);box-shadow:var(--shadow)}.hero-card img{border-radius:24px;max-height:640px;object-fit:cover;width:100%}.floating{position:absolute;left:12px;bottom:22px;background:rgba(255,255,255,.92);backdrop-filter:blur(16px);border:1px solid rgba(8,107,62,.12);border-radius:22px;padding:14px 16px;box-shadow:0 16px 38px rgba(5,46,26,.16);display:flex;align-items:center;gap:12px}.floating b{display:block;color:var(--green-900)}.floating span{color:var(--muted);font-size:.9rem}.mini-icon{width:44px;height:44px;border-radius:14px;background:var(--green-50);display:grid;place-items:center;color:var(--green-700);font-size:1.25rem;font-weight:900}
.stats-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:34px 0 0}.stat{background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:0 10px 28px rgba(15,23,42,.04)}.stat b{display:block;font-size:1.5rem;color:var(--green-800)}.stat span{color:var(--muted);font-weight:700;font-size:.92rem}
.section{padding:76px 0}.section-head{max-width:760px;margin:0 auto 34px;text-align:center}.section-head h2{font-size:clamp(2rem,4vw,3.1rem);letter-spacing:-.05em;line-height:1.05;margin:0 0 12px;color:var(--green-950)}.section-head p{color:#486454;line-height:1.65;font-size:1.08rem;margin:0}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:0 14px 34px rgba(15,23,42,.05)}.card .icon{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;background:var(--green-50);color:var(--green-700);font-size:1.45rem;margin-bottom:16px}.card h3{margin:0 0 10px;font-size:1.25rem;color:var(--green-950)}.card p{margin:0;color:#526b5c;line-height:1.55}.locked{position:relative;overflow:hidden}.locked:after{content:"Premium";position:absolute;right:18px;top:18px;background:#fff7ed;color:#9a5700;border:1px solid #fed7aa;border-radius:999px;padding:7px 10px;font-weight:900;font-size:.8rem}
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:24px;align-items:center}.panel{border-radius:30px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);padding:28px}.screen{background:linear-gradient(180deg,#fff,#f4fff7);border:1px solid #d7eadc;border-radius:28px;padding:18px}.screen-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.avatar{width:46px;height:46px;border-radius:50%;background:var(--green-800);color:#fff;display:grid;place-items:center;font-weight:900}.pill{background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 12px;color:var(--green-900);font-weight:900}.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.metric{border-radius:18px;background:#fff;border:1px solid var(--line);padding:14px}.metric:first-child{background:linear-gradient(135deg,var(--green-900),var(--green-600));color:#fff}.metric small{display:block;text-transform:uppercase;letter-spacing:.08em;font-weight:900;opacity:.75}.metric b{display:block;font-size:1.55rem;margin-top:10px}.blur-lock{filter:blur(2px);opacity:.45}.lock-box{
  margin-top:14px;
  border-radius:20px;
  background:#fff7ed;
  border:1px dashed #f59e0b;
  padding:16px;
  color:#7c3b00;
  font-weight:800;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:96px;
  line-height:1.45;
}
.plan{background:linear-gradient(135deg,var(--green-950),var(--green-800));color:#fff;border-radius:32px;padding:34px;box-shadow:0 24px 60px rgba(5,46,26,.24)}.price{font-size:3.4rem;line-height:1;font-weight:1000;letter-spacing:-.06em}.price span{font-size:1rem;opacity:.75}.plan ul{list-style:none;padding:0;margin:24px 0;display:grid;gap:12px}.plan li{display:flex;gap:10px;align-items:flex-start;color:#ecfdf5}.check{width:22px;height:22px;border-radius:50%;background:rgba(34,197,94,.22);display:grid;place-items:center;flex:0 0 auto;color:#86efac;font-weight:900}
.cta{padding:70px 0}.cta-box{border-radius:34px;background:linear-gradient(135deg,#fff,#eaffef);border:1px solid var(--line);padding:36px;display:flex;align-items:center;justify-content:space-between;gap:24px;box-shadow:var(--shadow)}.cta-box h2{margin:0;font-size:clamp(1.8rem,4vw,3rem);letter-spacing:-.05em;color:var(--green-950)}.cta-box p{margin:10px 0 0;color:#486454;line-height:1.55}.footer{padding:32px 0 44px;border-top:1px solid var(--line);color:#5c7464}.footer-inner{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}.footer a{font-weight:800;color:var(--green-800)}
.login-page{min-height:100vh;display:grid;place-items:center;padding:36px;background:radial-gradient(circle at 80% 10%,#c7f8d9 0,transparent 34%),linear-gradient(180deg,#f7fbf8,#fff)}.login-shell{width:min(1080px,100%);display:grid;grid-template-columns:.92fr 1.08fr;gap:20px;align-items:stretch}.login-card,.dashboard-card{background:#fff;border:1px solid var(--line);border-radius:30px;padding:30px;box-shadow:var(--shadow)}.login-card .brand{margin-bottom:18px}.form-group{margin-bottom:14px}.form-group label{display:block;font-weight:900;color:var(--green-950);margin-bottom:7px}.input{width:100%;border:1px solid #cfe2d4;border-radius:16px;padding:14px 15px;font:inherit}.input:focus{outline:3px solid rgba(22,163,91,.18);border-color:var(--green-600)}.hint{color:var(--muted);font-size:.92rem;line-height:1.45}.hidden{display:none!important}.dashboard-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px}.dashboard-head h2{margin:0;color:var(--green-950);letter-spacing:-.04em}.premium-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.premium-item{padding:16px;border-radius:18px;border:1px solid var(--line);background:linear-gradient(180deg,#fff,#fbfffc)}.premium-item b{color:var(--green-950)}.premium-item p{color:var(--muted);margin:8px 0 0;line-height:1.45}.paywall{margin-top:18px;background:#fff7ed;border:1px solid #fed7aa;border-radius:22px;padding:18px;display:flex;align-items:center;justify-content:space-between;gap:16px}.paywall b{color:#7c3b00}.paywall span{display:block;color:#9a5700;margin-top:4px}
@media (max-width:900px){.hero-grid,.split,.login-shell{grid-template-columns:1fr}.cards{grid-template-columns:1fr 1fr}.stats-strip{grid-template-columns:1fr 1fr}.nav-links a:not(.btn){display:none}.cta-box{display:block}.cta-box .hero-actions{margin-top:20px}.login-page{padding:18px}.hero{padding-top:44px}}
@media (max-width:580px){.cards,.stats-strip,.metric-grid,.premium-grid{grid-template-columns:1fr}.container{width:min(100% - 24px,1160px)}.brand span{font-size:1.1rem}.hero-actions .btn{width:100%}.card,.panel,.plan,.cta-box,.login-card,.dashboard-card{border-radius:22px;padding:22px}.floating{position:static;margin-top:14px}.hero-card img{max-height:none}.footer-inner{display:block}.footer-inner div+div{margin-top:12px}}
.footer-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  text-align: right;
}

.footer-links a {
  color: inherit;
  text-decoration: none;
  opacity: 0.85;
}

.footer-links a:hover {
  opacity: 1;
  text-decoration: underline;
}

.footer-login {
  background: #ffffff;
  border-top: 1px solid rgba(15, 80, 45, 0.10);
}

@media (max-width: 760px) {
  .footer-inner {
    gap: 16px;
    text-align: center;
  }

  .footer-links {
    justify-content: center;
    text-align: center;
  }
}

.social-inline {
  margin-top: 14px;
}

.social-inline a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #0b4d32;
  text-decoration: none;
  font-weight: 600;
}

.social-inline a:hover {
  opacity: .85;
}

.hero-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 26px;
}

.mini-feature {
  background: #ffffff;
  border: 1px solid #dbe7df;
  border-radius: 22px;
  padding: 22px;
  min-height: 120px;
  box-sizing: border-box;
}

.mini-feature b {
  display: block;
  font-size: 18px;
  line-height: 1.2;
  color: #083b28;
  margin-bottom: 8px;
}

.mini-feature span {
  display: block;
  font-size: 15px;
  line-height: 1.5;
  color: #4b5b52;
}

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

.social-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.social-buttons a {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: #0b4d32;
  border: 1px solid rgba(11, 77, 50, 0.18);
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(8, 61, 40, 0.08);
  transition: transform .18s ease, background .18s ease, color .18s ease;
}

.social-buttons a:hover {
  transform: translateY(-2px);
  background: #16a34a;
  color: #ffffff;
}

/* =====================================================
   ALINEACIÓN CORRECTA: FAMILIA
===================================================== */

#familia .familia-clean {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  grid-template-areas:
    "familia-titulo familia-titulo"
    "familia-panel familia-tarjetas";
  column-gap: 24px;
  row-gap: 24px;
  align-items: start;
}

#familia .familia-left {
  grid-area: familia-panel;
  padding-top: 0;
  align-self: start;
}

#familia .familia-right {
  display: contents;
}

#familia .familia-right .section-head {
  grid-area: familia-titulo;
  width: 100%;
  max-width: 820px;
  margin: 0 auto 8px;
  text-align: center;
}

#familia .familia-right .section-head h2,
#familia .familia-right .section-head p {
  margin-left: auto;
  margin-right: auto;
}

#familia .familia-cards {
  grid-area: familia-tarjetas;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-self: start;
}

#familia .panel {
  width: 100%;
  margin-top: 0 !important;
  transform: none !important;
}


/* =====================================================
   ALINEACIÓN CORRECTA: REPORTES
===================================================== */

#reportes .split {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  grid-template-areas:
    "reportes-titulo reportes-titulo"
    "reportes-plan reportes-tarjetas";
  column-gap: 24px;
  row-gap: 24px;
  align-items: start;
}

#reportes .plan {
  grid-area: reportes-plan;
  align-self: start;
  margin: 0;
}

#reportes .split > div:last-child {
  display: contents;
}

#reportes .section-head {
  grid-area: reportes-titulo;
  width: 100%;
  max-width: 820px;
  margin: 0 auto 8px !important;
  text-align: center !important;
}

#reportes .cards {
  grid-area: reportes-tarjetas;
  align-self: start;
}


/* =====================================================
   VISTA MÓVIL
===================================================== */

@media (max-width: 760px) {
  #familia .familia-clean {
    grid-template-columns: 1fr;
    grid-template-areas:
      "familia-titulo"
      "familia-panel"
      "familia-tarjetas";
  }

  #familia .familia-cards {
    grid-template-columns: 1fr;
  }

  #reportes .split {
    grid-template-columns: 1fr;
    grid-template-areas:
      "reportes-titulo"
      "reportes-plan"
      "reportes-tarjetas";
  }
}

/* =====================================================
   ASISTENTE DE AYUDA - FLUJO FAMILIAR
===================================================== */

.family-help {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 120;
  font-family: inherit;
}

/* BOTÓN CIRCULAR */

.family-help__launcher {
  width: 60px;
  height: 60px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(145deg, #0f8f4f, #05603a);
  color: #ffffff;
  box-shadow:
    0 18px 38px rgba(5, 96, 58, 0.28),
    0 0 0 6px rgba(22, 163, 91, 0.08);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.family-help__launcher:hover {
  transform: translateY(-3px);
  box-shadow:
    0 22px 42px rgba(5, 96, 58, 0.34),
    0 0 0 7px rgba(22, 163, 91, 0.1);
}

.family-help__launcher:focus-visible {
  outline: 3px solid rgba(34, 197, 94, 0.35);
  outline-offset: 4px;
}

.family-help__launcher-image {
  width: 38px;
  height: 38px;
  object-fit: cover;
  border-radius: 12px;
}

.family-help__launcher-close {
  display: none;
  font-size: 31px;
  font-weight: 300;
  line-height: 1;
}

.family-help.is-open .family-help__launcher-image {
  display: none;
}

.family-help.is-open .family-help__launcher-close {
  display: block;
}

/* VENTANA */

.family-help__panel {
  position: absolute;
  right: 0;
  bottom: 76px;
  width: min(390px, calc(100vw - 28px));
  height: min(590px, calc(100vh - 120px));
  background: #ffffff;
  border: 1px solid rgba(8, 107, 62, 0.16);
  border-radius: 26px;
  box-shadow: 0 28px 70px rgba(5, 46, 26, 0.24);
  overflow: hidden;
  display: flex;
  flex-direction: column;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(18px) scale(0.97);
  transform-origin: right bottom;

  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s ease;
}

.family-help.is-open .family-help__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* ENCABEZADO */

.family-help__header {
  flex: 0 0 auto;
  padding: 17px 18px;
  background: linear-gradient(135deg, #064e2f, #0f8f4f);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.family-help__identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.family-help__avatar {
  width: 43px;
  height: 43px;
  flex: 0 0 auto;
  border-radius: 14px;
  background: #ffffff;
  padding: 4px;
  object-fit: cover;
}

.family-help__identity-text {
  min-width: 0;
}

.family-help__identity-text strong {
  display: block;
  margin: 0 0 3px;
  font-size: 16px;
  line-height: 1.2;
}

.family-help__status {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
}

.family-help__status::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #6ee7a1;
  box-shadow: 0 0 0 4px rgba(110, 231, 161, 0.14);
}

.family-help__close {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s ease;
}

.family-help__close:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* CONVERSACIÓN */

.family-help__messages {
  flex: 1 1 auto;
  min-height: 0;
  padding: 18px;
  background:
    radial-gradient(
      circle at 100% 0,
      rgba(220, 252, 231, 0.7),
      transparent 32%
    ),
    #f8fcf9;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #b9d8c4 transparent;
}

.family-help__message {
  width: fit-content;
  max-width: 88%;
  margin-bottom: 12px;
  padding: 11px 13px;
  border-radius: 17px;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.family-help__message--bot {
  margin-right: auto;
  background: #ffffff;
  color: #244332;
  border: 1px solid #dbe9df;
  border-bottom-left-radius: 6px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

.family-help__message--user {
  margin-left: auto;
  background: #087746;
  color: #ffffff;
  border-bottom-right-radius: 6px;
}

.family-help__message strong {
  color: inherit;
}

/* PREGUNTAS RÁPIDAS */

.family-help__quick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 4px 0 14px;
}

.family-help__quick-button {
  min-height: 42px;
  padding: 9px 10px;
  border: 1px solid #cde5d5;
  border-radius: 13px;
  background: #ffffff;
  color: #075c37;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    transform 0.18s ease;
}

.family-help__quick-button:hover {
  transform: translateY(-1px);
  background: #effbf3;
  border-color: #8ed0a5;
}

/* ZONA DE ESCRITURA */

.family-help__composer {
  flex: 0 0 auto;
  padding: 12px;
  background: #ffffff;
  border-top: 1px solid #e0ebe3;
}

.family-help__form {
  display: flex;
  align-items: center;
  gap: 8px;
}

.family-help__input {
  min-width: 0;
  flex: 1 1 auto;
  height: 44px;
  padding: 0 14px;
  border: 1px solid #cfe2d4;
  border-radius: 999px;
  background: #f9fcfa;
  color: #153a27;
  font: inherit;
  font-size: 14px;
}

.family-help__input::placeholder {
  color: #7b9184;
}

.family-help__input:focus {
  outline: 3px solid rgba(22, 163, 91, 0.13);
  border-color: #59b979;
  background: #ffffff;
}

.family-help__send {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #087746;
  color: #ffffff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition:
    background 0.18s ease,
    transform 0.18s ease;
}

.family-help__send:hover {
  background: #055d37;
  transform: translateY(-1px);
}

.family-help__send svg {
  width: 19px;
  height: 19px;
}

.family-help__note {
  margin: 8px 4px 0;
  color: #75877c;
  font-size: 10px;
  line-height: 1.35;
  text-align: center;
}

/* TELÉFONOS */

@media (max-width: 580px) {
  .family-help {
    right: 14px;
    bottom: 14px;
  }

  .family-help__launcher {
    width: 56px;
    height: 56px;
  }

  .family-help__panel {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 82px;
    width: auto;
    height: min(610px, calc(100dvh - 104px));
    border-radius: 23px;
    transform-origin: center bottom;
  }

  .family-help__quick {
    grid-template-columns: 1fr;
  }
}