/* Fuentes autoalojadas. Newsreader: variable solo en el eje opsz (6–72), peso fijo 400, subconjunto
   latin (fontTools instancer + subset, ~60 KB cada una). Inter: subconjunto latin de Google Fonts,
   variable 400–600. Antes se cargaban desde fonts.googleapis.com: dos conexiones extra y un CSS
   bloqueante en cada visita. */
@font-face{ font-family:'Newsreader'; font-style:normal; font-weight:300 500; font-display:swap; src:url("fonts/newsreader.woff2") format("woff2"); }
@font-face{ font-family:'Newsreader'; font-style:italic; font-weight:300 500; font-display:swap; src:url("fonts/newsreader-italic.woff2") format("woff2"); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400 600; font-display:swap; src:url("fonts/inter.woff2") format("woff2"); }
  :root{
    /* ground + surfaces */
    --ground:#faf9f5; --surface:#f0eee6; --surface-2:#e8e6dc; --white:#fff;
    /* ink */
    --ink:#141413; --body-ink:#3d3d3a; --muted:#6f6e69;
    --line:rgba(20,20,19,.1); --line-strong:rgba(20,20,19,.2);
    /* Claude accent + supporting tones (use sparingly) */
    --accent:#d97757; --accent-ink:#b85c3c; --accent-soft:#f3e3da;
    --kraft:#d4a27f; --manilla:#ebdbbc; --cactus:#629a90; --sky:#6a9bcc; --olive:#788c5d;
    /* type + rhythm */
    --serif:'Newsreader',Georgia,'Times New Roman',serif;
    --sans:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
    --section-y:clamp(6rem,12vw,10rem);
    --gutter:clamp(1.25rem,6vw,6rem);
    --heading:clamp(2.4rem,4.4vw,3.8rem);
    --body:clamp(1rem,.92rem + .25vw,1.1rem);
    --radius:16px; --radius-sm:10px; --pill:999px;
    --ease:cubic-bezier(.22,.61,.36,1);
    /* legacy aliases (old section rules still reference these; agents replace them) */
    --canvas:var(--ground); --canvas-soft:var(--surface); --paper:var(--surface); --paper-pure:#fff;
    --dark-text:var(--ink); --dark-body:var(--body-ink); --dark-quiet:var(--muted);
    --dark-line:var(--line); --dark-surface:rgba(20,20,19,.03); --light-line:var(--line);
    --accent-dark:var(--accent-ink); --accent-light:var(--accent); --bad:#b85c3c; --highlight:var(--manilla);
  }
  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; background:var(--canvas); }
  ::selection{ background:var(--manilla); color:var(--ink); }
  body{
    font-family:var(--sans);
    background:var(--canvas);
    color:var(--dark-text);
    font-size:var(--body);
    line-height:1.55;
    font-weight:400;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  main{ max-width:none; margin:0; padding:0; overflow:clip; }

  /* ---------- type ---------- */
  h1,h2,h3{ overflow-wrap:break-word; }
  h1,h2,h3{ font-family:var(--serif); font-weight:400; }
  h1{ max-width:14ch; font-size:clamp(2.75rem,5.8vw,5.2rem); line-height:1.04; letter-spacing:-.02em; text-wrap:balance; font-variation-settings:'opsz' 72; }
  h2{ max-width:20ch; font-size:var(--heading); line-height:1.08; letter-spacing:-.015em; margin-bottom:clamp(2rem,4vw,3.5rem); text-wrap:balance; font-variation-settings:'opsz' 72; }
  h3{ font-size:clamp(1.25rem,1.6vw,1.5rem); line-height:1.2; letter-spacing:-.01em; margin-bottom:8px; font-variation-settings:'opsz' 36; }
  p{ margin-bottom:18px; }
  p:last-child{ margin-bottom:0; }
  strong{ font-weight:500; }
  ul{ list-style:none; }
  a{ color:inherit; }

  .eyebrow{
    display:block; font-size:.69rem; font-weight:500; line-height:1.2; letter-spacing:.18em;
    text-transform:uppercase; color:var(--muted); margin-bottom:22px;
  }

  /* ---------- sections ---------- */
  section.block{
    position:relative; padding:var(--section-y) var(--gutter); border-top:1px solid var(--line);
    background:var(--ground); color:var(--ink); isolation:isolate;
  }
  section.block > div{ width:min(100%,1120px); margin-inline:auto; }
  section.block:first-of-type{ border-top:none; }

  /* ---------- hero ---------- */
  .hl{ background:var(--highlight); color:var(--ink); padding:1px 5px; border-radius:0; -webkit-box-decoration-break:clone; box-decoration-break:clone; }

  /* ---------- lists ---------- */
  ul.checks{ grid-area:checks; display:grid; gap:0; border-top:1px solid var(--dark-line); }
  ul.checks li{ position:relative; padding:14px 0 14px 34px; border-bottom:1px solid var(--dark-line); color:var(--dark-body); }
  ul.checks li::before{
    content:"✓"; position:absolute; left:0; top:16px;
    width:20px; height:20px; border-radius:0;
    display:flex; align-items:center; justify-content:center;
    background:rgba(101,215,168,.08); border:1px solid rgba(101,215,168,.42);
    color:var(--accent-light); font-size:.7rem; font-weight:600; line-height:1;
  }
  .under-cta{ font-size:.76rem; color:var(--dark-quiet); margin-top:14px; letter-spacing:.02em; }
  .under-cta.hero-note{ text-align:center; margin-top:12px; }

  /* ---------- CTA ---------- */
  .cta{
    display:inline-flex; min-height:48px; align-items:center; justify-content:center; gap:10px;
    background:var(--ink); color:var(--ground); border:1px solid var(--ink); text-decoration:none;
    font-family:var(--sans); font-weight:500; font-size:.95rem; line-height:1.2; letter-spacing:0;
    padding:14px 26px; border-radius:var(--pill); transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s var(--ease);
  }
  .cta:hover{ background:#2b2b29; }
  /* insignia de Skool dentro de los CTAs de "Únete a la comunidad" */
  .skool-mark{
    display:inline-block; width:max(1.2em,16px); height:max(1.2em,16px); flex:none;
    margin:0 .5em 0 0; border-radius:.3em; vertical-align:-.28em;
  }
  .cta-offer .cta-label .skool-mark{ margin-right:.45em; }
  .cta.cta-quiet{ background:transparent; color:var(--ink); border-color:var(--line-strong); }
  .cta.cta-quiet:hover{ background:var(--surface); }
  .cta-offer{ flex-wrap:wrap; text-align:center; padding:14px 28px; }
  .cta-offer .cta-label{ display:block; line-height:1.35; text-wrap:balance; }
  .cta-offer .cta-pricing{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; font-size:.85rem; line-height:1.35; opacity:.7; }
  .cta-offer .final-price{ font-weight:500; }


  .center{ text-align:center; }
  .mt{ margin-top:30px; }

  .social-proof{
    display:flex; align-items:center; justify-content:flex-start; gap:8px 22px; flex-wrap:wrap;
    grid-area:proof; margin:0 0 0; padding:17px 0; border-top:1px solid var(--dark-line); border-bottom:1px solid var(--dark-line);
    color:var(--dark-body); font-size:.78rem; font-weight:400; letter-spacing:.02em; text-decoration:none; cursor:pointer;
  }
  .social-proof strong{ color:var(--accent-light); }
  .social-proof .stars{ color:#f2c65d; letter-spacing:.08em; }
  .social-proof .more-link{ color:var(--accent-light); font-weight:500; }
  .social-proof:hover .more-link{ color:var(--dark-text); }
  button:focus-visible, a:focus-visible, summary:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }

  /* ---------- motion ---------- */
  @keyframes grain{
    0%{ transform:translate(0); }
    20%{ transform:translate(-3%,2%); }
    40%{ transform:translate(4%,-2%); }
    60%{ transform:translate(-2%,-3%); }
    80%{ transform:translate(3%,3%); }
    100%{ transform:translate(0); }
  }
  @keyframes hero-in{
    from{ opacity:0; transform:translateY(28px); }
    to{ opacity:1; transform:translateY(0); }
  }
  @media (min-width:1025px){
    /*
      Desktop composition contract: center section frames and headings, but keep
      reading-heavy content left-aligned inside those centered containers.
      Mobile intentionally keeps its independent left-aligned flow below.
      See ../design.md for the responsive section matrix and QA requirements.
    */

    section.block:not(.hero):not(.foot-block) > div > .eyebrow{
      text-align:center;
    }
    section.block:not(.hero):not(.foot-block) > div > h2{
      margin-inline:auto; text-align:center;
    }



  }
  @media (max-width:1024px){
    :root{ --gutter:clamp(1.5rem,5vw,3.5rem); }
  }

  @media (max-width:640px){
    body{ font-size:16px; }
    :root{ --section-y:5rem; --gutter:1.25rem; }
    section.block{ padding:var(--section-y) var(--gutter); }
    h1{ font-size:clamp(2.75rem,13vw,3.5rem); line-height:.96; }
    h2{ font-size:clamp(2.15rem,10vw,2.8rem); margin-bottom:2.5rem; }
    h3{ font-size:1.16rem; }
    section.block:not(.hero):not(.foot-block) > div > .eyebrow{
      text-align:center;
    }
    section.block:not(.hero):not(.foot-block) > div > h2{
      margin-inline:auto; text-align:center;
    }
    .cta{ display:flex; width:100%; text-align:center; font-size:.72rem; padding:15px 16px; }
    .cta-offer{ width:100%; padding:14px 18px 12px; }
    .cta-offer .cta-label{ font-size:.78rem; }
    .social-proof{
      justify-content:center; text-align:center; gap:6px 14px; margin:0; padding:16px 0;
      border-radius:0; background:transparent; font-size:.75rem;
    }
  }
  @media (prefers-reduced-motion:reduce){
    html{ scroll-behavior:auto; }
    *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition:none !important; }
  }

  /* ================= SECTION: hero (neural scene) ================= */
  /* Top bar + hero rules live in assets/sections/hero.css (loaded after this file). */
  /* ================= END SECTION: hero ================= */