/* =========================================================================
   DJHONES GROWTH — carta de ventas + asesor IA
   Identidad: azul noche, blanco y cian del logo. Tipografía Jost.
   ========================================================================= */
:root{
  --navy:#0a1020; --navy-2:#111a2e; --navy-3:#18233b;
  --cyan:#4cc3ef; --cyan-2:#8adaf6; --cyan-ink:#0b6f93;
  --white:#ffffff; --mist:#f3f6fb; --line:#dde4ee; --line-dark:rgba(255,255,255,.12);
  --text:#0f1728; --muted:#5b667a; --muted-dark:#a3b0c6;
  --wa:#1fa855;
  --font:"Jost", "Helvetica Neue", Arial, system-ui, sans-serif;
  --container:1200px; --gutter:clamp(16px, 4vw, 40px); --header-h:72px;
  --ease:cubic-bezier(.2,.7,.2,1); --radius:14px;
  --shadow:0 30px 70px -35px rgba(10,16,32,.55);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ margin:0; font-family:var(--font); font-weight:400; font-size:17px; line-height:1.65; color:var(--text); background:var(--white); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
h1,h2,h3{ margin:0; font-weight:500; line-height:1.08; letter-spacing:-.02em; }
p{ margin:0; }
:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(72px, 10vw, 130px); }
.section--mist{ background:var(--mist); }
.section--dark{ background:var(--navy); color:var(--white); }
.section--dark .muted,.section--dark .lead{ color:var(--muted-dark); }
.center{ text-align:center; }
.eyebrow{ display:inline-flex; align-items:center; gap:10px; font-size:12.5px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--cyan-ink); }
.eyebrow::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--cyan); box-shadow:0 0 0 4px rgba(76,195,239,.18); }
.section--dark .eyebrow,.hero .eyebrow,.g-pagehero .eyebrow{ color:var(--cyan-2); }
.h1{ font-size:clamp(40px, 6.2vw, 78px); font-weight:500; }
.h2{ font-size:clamp(32px, 4.4vw, 54px); }
.h2 span,.h1 span{ color:var(--cyan); }
.section:not(.section--dark) .h2 span{ color:var(--cyan-ink); }
.lead{ font-size:clamp(17px, 1.5vw, 20px); color:var(--muted); font-weight:300; max-width:62ch; }
.center .lead{ margin-inline:auto; }
.muted{ color:var(--muted); }
.section-head{ display:grid; gap:16px; margin-bottom:clamp(40px, 6vw, 64px); }
.section-head.center{ justify-items:center; }

/* Botones */
.btn{ --bg:var(--cyan); --fg:var(--navy); --bd:var(--cyan);
  display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:54px; padding:0 28px;
  background:var(--bg); color:var(--fg); border:1px solid var(--bd); border-radius:999px;
  font-size:15px; font-weight:500; letter-spacing:.01em; white-space:nowrap;
  transition:transform .3s var(--ease), background .3s, color .3s, box-shadow .3s; }
.btn:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -14px rgba(76,195,239,.8); }
.btn--ghost{ --bg:transparent; --fg:var(--white); --bd:rgba(255,255,255,.35); }
.btn--ghost:hover{ --bg:var(--white); --fg:var(--navy); box-shadow:none; }
.btn--dark{ --bg:var(--navy); --fg:var(--white); --bd:var(--navy); }
.btn--dark:hover{ box-shadow:0 14px 30px -14px rgba(10,16,32,.7); }
.btn--wa{ --bg:var(--wa); --fg:#fff; --bd:var(--wa); }
.btn--wa:hover{ box-shadow:0 14px 30px -14px rgba(31,168,85,.8); }
.btn svg{ width:20px; height:20px; flex:none; }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; }
.center .btn-row{ justify-content:center; }

/* Header */
.g-header{ position:fixed; inset:0 0 auto; z-index:50; height:var(--header-h); color:var(--white); transition:background .35s, box-shadow .35s; }
.g-header.is-solid{ background:rgba(10,16,32,.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 1px 0 var(--line-dark); }
.g-header .container{ height:100%; display:flex; align-items:center; gap:28px; }
.g-logo{ width:170px; flex:none; }
.g-nav{ margin-left:auto; display:flex; gap:28px; font-size:14.5px; color:rgba(255,255,255,.82); }
.g-nav a:hover{ color:var(--white); }
.g-header .btn{ min-height:44px; padding:0 20px; font-size:14px; }
@media (max-width:900px){ .g-nav{ display:none; } .g-header .btn{ margin-left:auto; } .g-logo{ width:140px; } }

/* Hero */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; color:var(--white); background:var(--navy); overflow:hidden; isolation:isolate; }
.hero__bg{ position:absolute; inset:0; z-index:-2; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:70% center; }
.hero::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(10,16,32,.96) 0%, rgba(10,16,32,.8) 42%, rgba(10,16,32,.25) 80%), linear-gradient(0deg, rgba(10,16,32,.9), transparent 40%); }
.hero__inner{ padding-block:calc(var(--header-h) + 50px) 80px; display:grid; grid-template-columns:minmax(0, 1fr); gap:26px; max-width:720px; min-width:0; }
.hero .lead{ color:rgba(255,255,255,.78); }
.hero__price{ display:inline-flex; align-items:baseline; gap:12px; padding:12px 18px; border:1px solid var(--line-dark); border-radius:12px; background:rgba(255,255,255,.04); max-width:100%; justify-self:start; flex-wrap:wrap; }
.hero__price strong{ font-size:28px; font-weight:500; color:var(--cyan); }
.hero__price span{ font-size:14px; color:var(--muted-dark); }
.hero__trust{ display:flex; flex-wrap:wrap; gap:10px 24px; font-size:13.5px; color:var(--muted-dark); }
.hero__trust span::before{ content:"★ "; color:var(--cyan); }
@media (max-width:760px){ .hero::before{ background:linear-gradient(0deg, rgba(10,16,32,.97) 30%, rgba(10,16,32,.7) 70%, rgba(10,16,32,.4)); } .hero{ align-items:flex-end; } }

/* Marquesina de marcas */
.brands{ background:var(--navy-2); color:var(--muted-dark); padding:22px 0; overflow:hidden; border-top:1px solid var(--line-dark); }
.brands__label{ text-align:center; font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; margin-bottom:12px; }
.brands__track{ display:flex; gap:56px; width:max-content; animation:marquee 30s linear infinite; font-size:18px; color:rgba(255,255,255,.7); white-space:nowrap; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* Dolor */
.pains{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; }
.pain{ display:flex; gap:16px; padding:24px; border:1px solid var(--line); border-radius:var(--radius); background:var(--white); }
.pain__x{ flex:none; width:34px; height:34px; border-radius:50%; background:#fde8e5; color:#b23a26; display:grid; place-items:center; font-weight:500; }
.pain p{ color:var(--muted); }
.pain strong{ display:block; color:var(--text); font-weight:500; margin-bottom:4px; }
@media (max-width:760px){ .pains{ grid-template-columns:1fr; } }

/* Oferta */
.offer{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px, 6vw, 80px); align-items:center; }
.offer__media img{ border-radius:20px; box-shadow:var(--shadow); aspect-ratio:9/11; object-fit:cover; width:100%; }
.offer__card{ display:grid; gap:22px; }
.checks{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.checks li{ display:flex; gap:14px; align-items:flex-start; }
.checks li::before{ content:"✓"; flex:none; width:26px; height:26px; border-radius:50%; background:rgba(76,195,239,.16); color:var(--cyan-ink); display:grid; place-items:center; font-size:14px; font-weight:600; margin-top:2px; }
.section--dark .checks li::before{ color:var(--cyan); }
.price-box{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; padding:22px 24px; border-radius:var(--radius); background:var(--navy); color:var(--white); }
.price-box strong{ font-size:40px; font-weight:500; line-height:1; color:var(--cyan); }
.price-box p{ color:var(--muted-dark); font-size:14.5px; max-width:30ch; }
@media (max-width:900px){ .offer{ grid-template-columns:1fr; } }

/* Servicios */
.services{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; }
.service{ display:grid; gap:12px; align-content:start; padding:28px; border-radius:var(--radius); background:var(--navy-2); border:1px solid var(--line-dark); transition:transform .35s var(--ease), border-color .35s; }
.service:hover{ transform:translateY(-4px); border-color:rgba(76,195,239,.5); }
.service h3{ font-size:22px; }
.service p{ color:var(--muted-dark); font-size:15.5px; }
.service__from{ margin-top:6px; font-size:14px; color:var(--cyan-2); }
@media (max-width:980px){ .services{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){ .services{ grid-template-columns:1fr; } }

/* Proceso */
.steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px; counter-reset:s; }
.steps li{ padding:28px 24px; border-radius:var(--radius); background:var(--white); border:1px solid var(--line); display:grid; gap:10px; align-content:start; }
.steps li::before{ counter-increment:s; content:"0" counter(s); font-size:40px; font-weight:300; color:var(--cyan-ink); line-height:1; }
.steps h3{ font-size:20px; }
.steps p{ color:var(--muted); font-size:15px; }
@media (max-width:900px){ .steps{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .steps{ grid-template-columns:1fr; } }

/* Respaldo */
.awards{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; max-width:860px; margin-inline:auto; }
.award{ padding:30px; border-radius:var(--radius); border:1px solid var(--line-dark); background:var(--navy-2); display:grid; gap:6px; text-align:center; }
.award strong{ font-size:22px; font-weight:500; }
.award span{ color:var(--muted-dark); font-size:14.5px; }
@media (max-width:640px){ .awards{ grid-template-columns:1fr; } }

/* Bloque del asesor */
.advisor-cta{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(30px, 5vw, 70px); align-items:center; }
.advisor-preview{ border-radius:20px; background:var(--white); border:1px solid var(--line); box-shadow:var(--shadow); padding:22px; display:grid; gap:12px; }
.advisor-preview .bubble{ max-width:85%; padding:12px 16px; border-radius:16px; font-size:15px; }
.advisor-preview .bubble--bot{ background:var(--mist); border-bottom-left-radius:4px; }
.advisor-preview .bubble--me{ justify-self:end; background:var(--navy); color:var(--white); border-bottom-right-radius:4px; }
@media (max-width:900px){ .advisor-cta{ grid-template-columns:1fr; } }

/* FAQ */
.faq{ max-width:860px; margin-inline:auto; display:grid; gap:12px; }
.faq details{ border:1px solid var(--line); border-radius:var(--radius); background:var(--white); padding:0 22px; }
.faq summary{ list-style:none; cursor:pointer; padding:20px 0; font-size:18px; font-weight:500; display:flex; justify-content:space-between; gap:16px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-size:24px; line-height:1; color:var(--cyan-ink); transition:transform .3s; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ padding-bottom:20px; color:var(--muted); }

/* CTA final */
.final{ text-align:center; display:grid; gap:22px; justify-items:center; }

/* Footer */
.g-footer{ background:var(--navy); color:var(--muted-dark); padding:60px 0 30px; font-size:14.5px; }
.g-footer__grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:32px; padding-bottom:36px; border-bottom:1px solid var(--line-dark); }
.g-footer h4{ color:var(--white); font-size:13px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; margin:0 0 14px; }
.g-footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.g-footer a:hover{ color:var(--white); }
.g-footer__bottom{ padding-top:22px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; font-size:13px; }
@media (max-width:760px){ .g-footer__grid{ grid-template-columns:1fr; } }

/* Animación */
.js .reveal{ opacity:0; transform:translateY(24px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .js .reveal{ opacity:1; transform:none; } .brands__track{ animation:none; } html{ scroll-behavior:auto; } }

/* =========================================================================
   CHAT DEL ASESOR IA
   ========================================================================= */
.chat-fab{ position:fixed; right:clamp(14px, 3vw, 26px); bottom:clamp(14px, 3vw, 26px); z-index:60;
  display:flex; align-items:center; gap:10px; padding:0 20px 0 14px; height:58px; border-radius:999px; border:0;
  background:var(--cyan); color:var(--navy); font-weight:500; box-shadow:0 18px 40px -16px rgba(10,16,32,.6); transition:transform .3s var(--ease); }
.chat-fab:hover{ transform:translateY(-3px); }
.chat-fab__dot{ width:34px; height:34px; border-radius:50%; background:var(--navy); color:var(--cyan); display:grid; place-items:center; position:relative; }
.chat-fab__dot::after{ content:""; position:absolute; right:-1px; top:-1px; width:10px; height:10px; border-radius:50%; background:#22c55e; border:2px solid var(--cyan); }
.chat-fab svg{ width:18px; height:18px; }
.chat-open .chat-fab{ display:none; }

.chat{ position:fixed; right:clamp(0px, 2vw, 24px); bottom:clamp(0px, 2vw, 24px); z-index:70; width:min(420px, 100vw); height:min(680px, 100svh);
  display:flex; flex-direction:column; background:var(--white); border-radius:20px; box-shadow:0 30px 80px -20px rgba(10,16,32,.55); overflow:hidden;
  transform:translateY(24px) scale(.98); opacity:0; visibility:hidden; transition:all .35s var(--ease); }
.chat-open .chat{ transform:none; opacity:1; visibility:visible; }
@media (max-width:520px){ .chat{ right:0; bottom:0; width:100vw; height:100svh; border-radius:0; } }
.chat__head{ display:flex; align-items:center; gap:12px; padding:16px 18px; background:var(--navy); color:var(--white); }
.chat__avatar{ width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg, var(--cyan), #2a7fb0); display:grid; place-items:center; color:var(--navy); font-weight:600; flex:none; }
.chat__title{ display:grid; line-height:1.25; }
.chat__title strong{ font-weight:500; }
.chat__title span{ font-size:12.5px; color:var(--muted-dark); }
.chat__title span::before{ content:"● "; color:#22c55e; }
.chat__close{ margin-left:auto; width:38px; height:38px; border:0; background:rgba(255,255,255,.08); color:var(--white); border-radius:50%; font-size:22px; line-height:1; }
.chat__log{ flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:10px; background:var(--mist); }
.msg{ max-width:86%; padding:11px 15px; border-radius:16px; font-size:15px; line-height:1.5; white-space:pre-wrap; word-wrap:break-word; }
.msg a{ color:var(--cyan-ink); text-decoration:underline; word-break:break-all; }
.msg--bot{ align-self:flex-start; background:var(--white); border:1px solid var(--line); border-bottom-left-radius:4px; }
.msg--me{ align-self:flex-end; background:var(--navy); color:var(--white); border-bottom-right-radius:4px; }
.msg--me a{ color:var(--cyan-2); }
.msg--typing{ display:flex; gap:5px; align-items:center; }
.msg--typing i{ width:7px; height:7px; border-radius:50%; background:var(--muted-dark); animation:typing 1.2s infinite; }
.msg--typing i:nth-child(2){ animation-delay:.15s; } .msg--typing i:nth-child(3){ animation-delay:.3s; }
@keyframes typing{ 0%,60%,100%{ opacity:.3; transform:none; } 30%{ opacity:1; transform:translateY(-3px); } }
.chat__booking{ align-self:stretch; background:var(--navy); color:var(--white); border-radius:16px; padding:18px; display:grid; gap:10px; }
.chat__booking strong{ font-size:18px; font-weight:500; }
.chat__booking span{ color:var(--muted-dark); font-size:14px; }
.chat__booking .btn{ min-height:46px; font-size:14.5px; }
.chat__quick{ display:flex; flex-wrap:wrap; gap:8px; padding:0 18px 10px; background:var(--mist); }
.chat__quick button{ border:1px solid var(--line); background:var(--white); border-radius:999px; padding:8px 14px; font-size:13.5px; color:var(--text); }
.chat__quick button:hover{ border-color:var(--cyan-ink); color:var(--cyan-ink); }
.chat__form{ display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); background:var(--white); }
.chat__form textarea{ flex:1; resize:none; overflow-y:hidden; border:1px solid var(--line); border-radius:14px; padding:12px 14px; font:inherit; font-size:15px; max-height:120px; }
.chat__form textarea:focus{ outline:none; border-color:var(--cyan-ink); }
.chat__send{ width:48px; height:48px; flex:none; align-self:flex-end; border:0; border-radius:50%; background:var(--cyan); color:var(--navy); display:grid; place-items:center; }
.chat__send:disabled{ opacity:.5; }
.chat__send svg{ width:20px; height:20px; }
.chat__legal{ font-size:11.5px; color:var(--muted); text-align:center; padding:0 12px 10px; background:var(--white); }
.chat__legal a{ text-decoration:underline; }
@media (max-width:520px){
  .hero .btn-row .btn{ flex:1 1 100%; }
  .hero__price strong{ font-size:24px; }
  .eyebrow{ letter-spacing:.14em; font-size:11.5px; }
}

/* ===== Páginas internas (servicios, blog, sobre Andrés) ===== */
.g-pagehero{ position:relative; color:var(--white); background:var(--navy); padding:calc(var(--header-h) + clamp(56px, 8vw, 110px)) 0 clamp(60px, 8vw, 100px); overflow:hidden; isolation:isolate; }
.g-pagehero::before{ content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(1000px 500px at 85% 0%, rgba(76,195,239,.22), transparent 60%), linear-gradient(180deg, var(--navy), var(--navy-2)); }
.g-pagehero .h1{ font-size:clamp(38px, 5.4vw, 66px); max-width:20ch; }
.g-pagehero .lead{ color:rgba(255,255,255,.8); margin-top:18px; }
.g-pagehero .btn-row{ margin-top:30px; }
.g-pagehero .eyebrow{ margin-bottom:14px; }
.g-crumbs{ font-size:13.5px; color:var(--muted-dark); margin-bottom:22px; display:flex; flex-wrap:wrap; gap:6px; }
.g-crumbs a{ text-decoration:underline; text-underline-offset:3px; }
.g-grid2{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(28px, 5vw, 70px); align-items:start; }
.g-card{ border:1px solid var(--line); border-radius:var(--radius); padding:28px; background:var(--white); display:grid; gap:12px; align-content:start; }
.g-card h3{ font-size:22px; }
.g-card p{ color:var(--muted); font-size:15.5px; }
.g-cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:18px; }
a.g-card:hover{ border-color:var(--cyan); transform:translateY(-3px); }
a.g-card{ transition:transform .25s var(--ease), border-color .25s; }
.g-card__tag{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan-ink); font-weight:500; }
.g-table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); }
.g-table{ width:100%; border-collapse:collapse; font-size:15.5px; background:var(--white); }
.g-table th,.g-table td{ text-align:left; padding:14px 16px; border-bottom:1px solid var(--line); vertical-align:top; }
.g-table th{ background:var(--mist); font-weight:500; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.g-table tr:last-child td{ border-bottom:0; }
.g-table .is-us td{ background:rgba(76,195,239,.09); font-weight:500; }
.g-article{ padding-top:calc(var(--header-h) + clamp(40px, 6vw, 80px)); }
.g-article .container{ max-width:820px; }
.g-article h1{ font-size:clamp(34px, 4.6vw, 54px); line-height:1.08; margin:10px 0 16px; }
.g-article__meta{ color:var(--muted); font-size:14px; margin-bottom:34px; }
.g-article__body{ display:grid; gap:20px; font-size:18px; line-height:1.75; }
.g-article__body h2{ font-size:clamp(26px, 3vw, 34px); margin-top:24px; }
.g-article__body h3{ font-size:22px; margin-top:6px; }
.g-article__body ul,.g-article__body ol{ display:grid; gap:8px; padding-left:22px; margin:0; }
.g-article__body a{ color:var(--cyan-ink); text-decoration:underline; text-underline-offset:3px; }
.g-article .g-crumbs{ color:var(--muted); }
.g-box{ background:var(--mist); border-left:4px solid var(--cyan); border-radius:0 var(--radius) var(--radius) 0; padding:22px 24px; display:grid; gap:12px; }
.g-src{ font-size:13.5px; color:var(--muted); border-top:1px solid var(--line); padding-top:18px; }
.g-author{ display:flex; gap:16px; align-items:center; border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; margin-top:20px; }
.g-author strong{ display:block; }
.g-author span{ color:var(--muted); font-size:14.5px; }
@media (max-width:860px){ .g-grid2{ grid-template-columns:1fr; } .g-nav{ display:none; } }