:root{
    --black:#050509;
    --midnight:#0b0d1f;
    --indigo:#13152c;
    --indigo-2:#181b38;
    --violet:#241b3f;
    --violet-2:#2c2049;
    --gold:#cda86a;
    --gold-bright:#e6c88a;
    --gold-dim:#8a7248;
    --text:#f2f1f6;
    --text-dim:#aaa9c2;
    --text-faint:#75738f;
    --hairline:rgba(205,168,106,0.18);
    --radius-s:2px;
    --radius-m:6px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--black);
    color:var(--text);
    font-family:'Inter',sans-serif;
    font-weight:400;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  .stage{
    max-width:430px;
    margin:0 auto;
    position:relative;
    background:var(--black);
    min-height:100vh;
  }
  @media (min-width:431px){
    .stage{ box-shadow:0 0 80px rgba(0,0,0,0.6); }
  }
  img{display:block; max-width:100%;}
  .eyebrow{
    font-family:'Fraunces',serif;
    font-size:11px;
    letter-spacing:0.32em;
    color:var(--gold);
    font-weight:400;
    display:flex;
    align-items:center;
    gap:8px;
  }
  .eyebrow svg{width:13px;height:13px;flex-shrink:0;}
  h1,h2,h3{
    font-family:'Fraunces',serif;
    font-weight:500;
    line-height:1.08;
    letter-spacing:-0.01em;
  }
  p{ color:var(--text-dim); line-height:1.6; font-size:14.5px; font-weight:300; }
  .script{ font-family:'Caveat',cursive; color:var(--gold-bright); }
  a{ color:inherit; text-decoration:none; }
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:15px 26px;
    border-radius:999px;
    font-family:'Inter',sans-serif;
    font-size:12.5px;
    font-weight:600;
    letter-spacing:0.08em;
    text-transform:uppercase;
    cursor:pointer;
    border:none;
    transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
  }
  .btn-gold{
    background:linear-gradient(135deg,var(--gold-bright),var(--gold) 60%, var(--gold-dim));
    color:#1a1408;
    box-shadow:0 8px 24px -8px rgba(205,168,106,0.55);
  }
  .btn-gold:active{ transform:scale(0.97); }
  .btn-outline{
    background:transparent;
    color:var(--text);
    border:1px solid var(--hairline);
    padding:13px 22px;
  }
  .section{ padding:64px 22px; position:relative; }
  .section-tight{ padding:48px 22px; }
  .hl-title{ font-size:26px; margin-bottom:12px; }
  .divider{
    width:34px; height:1px;
    background:var(--gold);
    opacity:0.7;
    margin:16px 0;
  }
  .accent{ color:var(--gold-bright); }

  /* ===== HERO ===== */
  .hero{
    position:relative;
    min-height:640px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:44px 22px 40px;
    overflow:hidden;
    background:
      radial-gradient(120% 90% at 78% 8%, rgba(230,201,138,0.16), transparent 55%),
      radial-gradient(90% 70% at 15% 0%, rgba(90,60,150,0.35), transparent 60%),
      linear-gradient(185deg, #100c22 0%, #0c0e22 35%, #090a1a 65%, #050509 100%);
  }
  .hero-mountains{
    position:absolute; left:0; right:0; bottom:0; width:100%; opacity:0.55; z-index:1;
  }
  .hero-glow{
    position:absolute; top:-60px; right:-60px; width:260px; height:260px; border-radius:50%;
    background:radial-gradient(circle, rgba(230,201,138,0.28), transparent 70%);
    filter:blur(10px);
  }
  .hero-photo{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    object-position:78% 30%; z-index:0;
  }
  .hero-photo-scrim{
    position:absolute; inset:0; z-index:2;
    background:
      linear-gradient(185deg, rgba(9,10,26,0.55) 0%, rgba(9,10,26,0.35) 30%, rgba(6,6,12,0.55) 62%, rgba(5,5,9,0.96) 92%),
      linear-gradient(100deg, rgba(6,6,12,0.92) 0%, rgba(6,6,12,0.55) 34%, rgba(6,6,12,0.05) 60%);
  }
  .hero-top{ position:relative; z-index:3; }
  .hero-logo-badge{
    display:flex; align-items:center; gap:9px; margin-bottom:26px;
  }
  .hero-logo-badge img{ width:30px; height:30px; border-radius:50%; }
  .hero-logo-badge span{
    font-family:'Fraunces',serif; font-size:12px; letter-spacing:0.3em; color:var(--gold-bright);
  }
  .hero-body{ position:relative; z-index:3; }
  .hero-kicker{
    font-family:'Inter',sans-serif; font-size:12px; letter-spacing:0.28em; color:var(--text-dim); text-transform:uppercase; margin-bottom:6px;
  }
  .hero-title{
    font-size:52px;
    background:linear-gradient(160deg,#f3e3bc, var(--gold-bright) 45%, var(--gold) 80%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    line-height:0.95;
    margin-bottom:18px;
    font-weight:600;
  }
  .hero-sub{ font-size:16px; color:var(--text); font-weight:400; font-family:'Fraunces',serif; margin-bottom:10px; }
  .hero-desc{ max-width:290px; margin-bottom:26px; }
  .hero-note{
    position:absolute; top:22px; right:10px; font-size:19px; transform:rotate(-6deg); z-index:4;
  }
  .hero-features{
    display:flex; gap:18px; margin-bottom:30px;
  }
  .hero-feature{ flex:1; text-align:left; }
  .hero-feature svg{ width:20px; height:20px; color:var(--gold); margin-bottom:9px; }
  .hero-feature span{ display:block; font-size:10.5px; letter-spacing:0.03em; color:var(--text-dim); line-height:1.35; }
  .hero-caption{ margin-top:14px; font-size:12px; color:var(--text-faint); font-style:italic; }

  /* ===== PRODUCT STRIP ===== */
  .product-strip{
    background:linear-gradient(150deg, var(--indigo) 0%, var(--violet) 100%);
    border-top:1px solid var(--hairline);
    border-bottom:1px solid var(--hairline);
    padding:30px 22px;
    display:flex; align-items:center; gap:18px;
  }
  .product-strip img{ width:78px; border-radius:4px; box-shadow:0 14px 30px -10px rgba(0,0,0,0.6); }
  .product-strip-text .eyebrow{ margin-bottom:6px; }
  .product-strip-text h3{ font-size:17px; margin-bottom:5px; }
  .product-strip-text p{ font-size:12.5px; margin-bottom:0; }

  /* ===== EXPLORE ===== */
  .explore-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:6px; }
  .progress-label{ font-size:11px; color:var(--text-faint); text-align:right; }
  .progress-bar{ width:70px; height:2px; background:var(--hairline); border-radius:2px; margin-top:6px; overflow:hidden; }
  .progress-bar i{ display:block; width:0%; height:100%; background:var(--gold); }
  .explore-scroll{
    display:flex; gap:13px; overflow-x:auto; margin:22px -22px 0; padding:4px 22px 10px;
    scroll-snap-type:x mandatory;
    -ms-overflow-style:none; scrollbar-width:none;
  }
  .explore-scroll::-webkit-scrollbar{ display:none; }
  .explore-card{
    scroll-snap-align:start;
    min-width:132px; width:132px; height:178px;
    border-radius:10px; position:relative; overflow:hidden;
    flex-shrink:0; cursor:pointer;
    border:1px solid var(--hairline);
    display:flex; flex-direction:column; justify-content:flex-end;
    padding:14px 12px;
  }
  .explore-card::before{
    content:''; position:absolute; inset:0; opacity:0.9;
  }
  .explore-card .ic{ position:relative; z-index:2; width:26px; height:26px; color:var(--gold-bright); margin-bottom:10px; }
  .explore-card strong{
    position:relative; z-index:2; display:block; font-family:'Fraunces',serif; font-size:13px; font-weight:500; line-height:1.2; margin-bottom:4px;
  }
  .explore-card span{
    position:relative; z-index:2; display:block; font-size:10px; color:var(--text-dim); line-height:1.3; margin-bottom:10px;
  }
  .explore-arrow{
    position:relative; z-index:2; width:24px; height:24px; border-radius:50%; border:1px solid var(--gold-dim);
    display:flex; align-items:center; justify-content:center;
  }
  .explore-arrow svg{ width:11px; height:11px; color:var(--gold); }
  .card-1::before{ background:radial-gradient(120% 100% at 20% 0%, #2b3a6b, #0d1024 75%); }
  .card-2::before{ background:radial-gradient(120% 100% at 80% 0%, #3a2a52, #100c22 75%); }
  .card-3::before{ background:radial-gradient(120% 100% at 30% 100%, #4a2540, #12081c 75%); }
  .card-4::before{ background:radial-gradient(120% 100% at 70% 0%, #23325a, #0b0e1f 75%); }
  .card-5::before{ background:radial-gradient(120% 100% at 50% 100%, #302456, #0c0a1e 75%); }
  .explore-card img.card-photo{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1;
  }
  .explore-card .card-scrim{
    position:absolute; inset:0; z-index:1;
    background:linear-gradient(190deg, rgba(8,8,18,0.15) 0%, rgba(8,8,18,0.55) 55%, rgba(6,6,12,0.92) 100%);
  }

  /* photo banner used for cerebro / bienestar human-context images */
  .photo-banner{
    position:relative; width:100%; height:190px; border-radius:10px; overflow:hidden;
    border:1px solid var(--hairline); margin:20px 0 4px;
  }
  .photo-banner img{ width:100%; height:100%; object-fit:cover; }
  .photo-banner .pb-scrim{
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(9,10,26,0.05) 40%, rgba(6,6,12,0.75) 100%),
               linear-gradient(90deg, rgba(6,6,12,0.55) 0%, rgba(6,6,12,0) 45%);
  }
  .photo-banner .pb-label{
    position:absolute; left:14px; bottom:12px; z-index:2;
    font-family:'Fraunces',serif; font-style:italic; font-size:12.5px; color:var(--text);
  }

  /* ===== GENERIC SECTION BACKGROUNDS ===== */
  .bg-midnight{ background:var(--midnight); }
  .bg-indigo{ background:linear-gradient(160deg,var(--indigo),var(--indigo-2)); }
  .bg-violet{ background:linear-gradient(165deg,var(--violet),var(--violet-2)); }
  .bg-black{ background:var(--black); }

  /* ===== BRAIN SECTION ===== */
  .brain-wrap{ text-align:center; margin-bottom:30px; position:relative; }
  .brain-glow{
    width:220px; height:220px; margin:0 auto; position:relative;
  }
  .brain-stat{ font-size:30px; margin-bottom:14px; }
  .mini-card-list{ display:flex; flex-direction:column; gap:10px; margin-top:26px; }
  .mini-card{
    display:flex; align-items:center; gap:13px;
    background:rgba(255,255,255,0.03);
    border:1px solid var(--hairline);
    border-radius:8px;
    padding:14px 14px;
  }
  .mini-card .ic-wrap{
    width:36px; height:36px; border-radius:50%; background:rgba(205,168,106,0.12);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .mini-card .ic-wrap svg{ width:17px; height:17px; color:var(--gold); }
  .mini-card-text{ flex:1; }
  .mini-card-text strong{ display:block; font-size:13px; font-weight:600; color:var(--gold-bright); margin-bottom:2px; }
  .mini-card-text span{ font-size:11.5px; color:var(--text-dim); line-height:1.35; }
  .mini-card .go{ width:22px; height:22px; flex-shrink:0; color:var(--text-faint); }

  /* ===== HORIZONTAL PHOTO CARDS (rutinas / recetas) ===== */
  .hcard-scroll{
    display:flex; gap:13px; overflow-x:auto; margin:24px -22px 0; padding:4px 22px 6px;
    scroll-snap-type:x mandatory; -ms-overflow-style:none; scrollbar-width:none;
  }
  .hcard-scroll::-webkit-scrollbar{ display:none; }
  .hcard{
    scroll-snap-align:start; min-width:158px; width:158px; flex-shrink:0;
  }
  .hcard-img{
    width:100%; height:150px; border-radius:8px; margin-bottom:10px; position:relative; overflow:hidden;
    border:1px solid var(--hairline);
  }
  .hcard-img.r1{ background:radial-gradient(120% 100% at 30% 20%, #3a4a7a, #0e1128 80%); }
  .hcard-img.r2{ background:radial-gradient(120% 100% at 70% 20%, #4a3563, #100c22 80%); }
  .hcard-img.r3{ background:radial-gradient(120% 100% at 40% 80%, #2f5245, #0b1b16 80%); }
  .hcard-img.f1{ background:radial-gradient(110% 100% at 50% 10%, #5a2e55, #140a1e 80%); }
  .hcard-img.f2{ background:radial-gradient(110% 100% at 50% 10%, #6b4a2c, #1a1108 80%); }
  .hcard-img.f3{ background:radial-gradient(110% 100% at 50% 10%, #354d63, #0b141d 80%); }
  .hcard-img svg{ position:absolute; inset:0; margin:auto; width:46%; height:46%; color:rgba(230,201,138,0.55); }
  .hcard h4{ font-family:'Fraunces',serif; font-size:14.5px; font-weight:500; margin-bottom:3px; }
  .hcard p{ font-size:11.5px; margin-bottom:0; }

  /* ===== TIP GRID (enfoque / bienestar) ===== */
  .tip-grid{ display:flex; flex-direction:column; gap:11px; margin-top:24px; }
  .tip-row{
    display:flex; align-items:flex-start; gap:14px;
    padding:16px 0; border-bottom:1px solid var(--hairline);
  }
  .tip-row:last-child{ border-bottom:none; }
  .tip-row .ic-wrap{
    width:38px; height:38px; border-radius:50%; border:1px solid var(--gold-dim);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .tip-row .ic-wrap svg{ width:17px; height:17px; color:var(--gold-bright); }
  .tip-row h4{ font-family:'Fraunces',serif; font-size:14.5px; font-weight:500; margin-bottom:3px; }
  .tip-row p{ font-size:12.5px; margin-bottom:0; }

  /* ===== INSIGHTS / VIDEO CARDS ===== */
  .video-card{
    scroll-snap-align:start; min-width:172px; width:172px; flex-shrink:0;
  }
  .video-thumb{
    width:100%; height:130px; border-radius:8px; position:relative; overflow:hidden; margin-bottom:10px;
    border:1px solid var(--hairline);
    display:flex; align-items:center; justify-content:center;
  }
  .video-thumb.v1{ background:radial-gradient(120% 100% at 50% 20%, #2b3a6b, #0a0c1c 85%); }
  .video-thumb.v2{ background:radial-gradient(120% 100% at 50% 80%, #3a2a52, #0d0a1c 85%); }
  .video-thumb.v3{ background:radial-gradient(120% 100% at 50% 20%, #2f4a3a, #0a1712 85%); }
  .play-btn{
    width:34px; height:34px; border-radius:50%; background:rgba(5,5,9,0.55);
    border:1px solid var(--gold); display:flex; align-items:center; justify-content:center; z-index:2;
    backdrop-filter:blur(2px);
  }
  .play-btn svg{ width:12px; height:12px; color:var(--gold-bright); margin-left:2px; }
  .video-time{
    position:absolute; bottom:8px; left:8px; font-size:10px; background:rgba(5,5,9,0.6);
    padding:2px 7px; border-radius:10px; color:var(--text); z-index:2;
  }
  .video-card h4{ font-family:'Fraunces',serif; font-size:13.5px; font-weight:500; line-height:1.3; }

  /* ===== COMUNIDAD ===== */
  .quote-card{
    background:linear-gradient(155deg, rgba(205,168,106,0.08), rgba(205,168,106,0.02));
    border:1px solid var(--hairline);
    border-radius:10px; padding:26px 22px; margin-top:26px; position:relative;
  }
  .quote-mark{ font-family:'Fraunces',serif; font-size:38px; color:var(--gold); line-height:0.5; margin-bottom:10px; display:block; }
  .quote-card p.quote-text{ color:var(--text); font-size:14.5px; font-family:'Fraunces',serif; font-style:italic; line-height:1.55; margin-bottom:16px; }
  .quote-author{ display:flex; align-items:center; justify-content:space-between; }
  .quote-author strong{ display:block; font-size:12.5px; font-weight:600; }
  .quote-author span{ font-size:11px; color:var(--text-faint); }
  .quote-go{
    width:30px; height:30px; border-radius:50%; background:var(--gold);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .quote-go svg{ width:12px; height:12px; color:#1a1408; }
  .dots{ display:flex; gap:6px; margin-top:16px; justify-content:center; }
  .dots i{ width:5px; height:5px; border-radius:50%; background:var(--hairline); display:block; }
  .dots i.on{ background:var(--gold); width:14px; border-radius:3px; }

  /* ===== SUPPORT ===== */
  .support-list{ display:flex; flex-direction:column; gap:0; margin-top:24px; }
  .support-item{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:17px 4px; border-bottom:1px solid var(--hairline);
  }
  .support-item:last-child{ border-bottom:none; }
  .support-item-left{ display:flex; align-items:center; gap:14px; }
  .support-item .ic-wrap{
    width:36px; height:36px; border-radius:9px; background:rgba(205,168,106,0.1);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .support-item .ic-wrap svg{ width:16px; height:16px; color:var(--gold); }
  .support-item strong{ display:block; font-size:13.5px; font-weight:500; margin-bottom:2px; font-family:'Fraunces',serif; }
  .support-item span{ font-size:11.5px; color:var(--text-faint); }
  .support-item svg.chev{ width:14px; height:14px; color:var(--text-faint); flex-shrink:0; }
  .support-banner{
    margin-top:26px; padding:20px; border-radius:10px;
    background:radial-gradient(140% 100% at 20% 0%, rgba(205,168,106,0.14), transparent 60%), var(--indigo);
    border:1px solid var(--hairline);
    display:flex; align-items:center; gap:14px;
  }
  .support-banner img{ width:44px; height:44px; border-radius:50%; flex-shrink:0; }
  .support-banner p{ font-size:12.5px; margin-bottom:0; color:var(--text); }

  /* ===== FOOTER ===== */
  .badges{
    display:grid; grid-template-columns:1fr 1fr; gap:16px 10px;
    padding:36px 22px; background:var(--midnight); border-top:1px solid var(--hairline);
  }
  .badge{ display:flex; align-items:center; gap:9px; }
  .badge svg{ width:18px; height:18px; color:var(--gold); flex-shrink:0; }
  .badge span{ font-size:10.5px; color:var(--text-dim); line-height:1.25; }
  .footer{
    background:var(--black); padding:44px 22px 50px; text-align:center;
    border-top:1px solid var(--hairline);
  }
  .footer img{ width:56px; margin:0 auto 14px; }
  .footer .fname{ font-family:'Fraunces',serif; letter-spacing:0.3em; font-size:15px; color:var(--gold-bright); margin-bottom:6px; }
  .footer .ftag{ font-size:10px; letter-spacing:0.18em; color:var(--text-faint); text-transform:uppercase; margin-bottom:20px; }
  .footer .script{ font-size:20px; }

  ::selection{ background:var(--gold); color:#1a1408; }
  :focus-visible{ outline:2px solid var(--gold-bright); outline-offset:2px; }