:root{
      --red:#f50504;
      --dark:#07070a;
      --ink:#15151b;
      --muted:#686875;
      --soft:#f6f3f1;
      --line:rgba(10,10,15,.12);
      --white:#fff;
      --cream:#fbfaf7;
      --max:1200px;
      --radius:30px;
      --shadow:0 30px 80px rgba(0,0,0,.12);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Helvetica,Arial,sans-serif;
      color:var(--ink);
      background:var(--cream);
      line-height:1.55;
      text-rendering:geometricPrecision;
    }
    a{color:inherit;text-decoration:none}
    .grain:before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      opacity:.04;
      z-index:99;
      background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }

    .nav-wrap{
      position:sticky;top:0;z-index:20;
      background:rgba(251,250,247,.82);
      backdrop-filter:blur(18px);
      border-bottom:1px solid rgba(0,0,0,.08);
    }
    .nav{
      max-width:var(--max);
      margin:auto;
      padding:18px 24px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:20px;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:14px;
      font-weight:850;
      letter-spacing:-.04em;
    }
    .mark{
      width:42px;height:42px;border-radius:14px;
      display:grid;place-items:center;
      background:var(--red);
      color:#fff;
      font-weight:900;
      font-size:22px;
      box-shadow:0 16px 35px rgba(245,5,4,.22);
    }
    .brand span{display:block;line-height:1}
    .brand small{
      display:block;
      color:var(--muted);
      font-size:12px;
      letter-spacing:.04em;
      font-weight:650;
      margin-top:5px;
    }
    .navlinks{display:flex;gap:20px;font-size:14px;color:#4d4d58;align-items:center}
    .navlinks a:hover{color:var(--red)}
    .nav-cta{
      padding:10px 16px;border-radius:999px;
      background:var(--dark);color:#fff!important;
      font-weight:760;
    }

    .hero{
      position:relative;
      overflow:hidden;
      background:
        radial-gradient(circle at 18% 15%, rgba(245,5,4,.18), transparent 30%),
        radial-gradient(circle at 92% 8%, rgba(0,0,0,.12), transparent 26%),
        linear-gradient(135deg,#fff 0%,#f7f4ef 52%,#eee8e1 100%);
    }
    .hero:after{
      content:"";
      position:absolute;
      right:-12vw;top:5vh;
      width:48vw;height:48vw;border-radius:50%;
      border:1px solid rgba(245,5,4,.22);
      box-shadow:inset 0 0 0 80px rgba(245,5,4,.035);
      pointer-events:none;
    }
    .hero-inner{
      max-width:var(--max);
      margin:auto;
      padding:92px 24px 82px;
      display:grid;
      grid-template-columns:1.05fr .95fr;
      gap:54px;
      align-items:center;
      position:relative;
      z-index:1;
    }
    .eyebrow{
      display:inline-flex;align-items:center;gap:10px;
      color:var(--red);
      font-size:12px;font-weight:900;text-transform:uppercase;
      letter-spacing:.16em;
      margin-bottom:22px;
    }
    .eyebrow:before{content:"";width:42px;height:2px;background:var(--red)}
    h1{
      margin:0;
      font-size:clamp(46px,7vw,92px);
      line-height:.92;
      letter-spacing:-.08em;
      color:var(--dark);
      max-width:880px;
    }
    .lead{
      margin:28px 0 0;
      font-size:clamp(19px,2.2vw,25px);
      line-height:1.36;
      color:#33333c;
      max-width:780px;
    }
    .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
    .btn{
      display:inline-flex;align-items:center;justify-content:center;
      padding:13px 18px;border-radius:999px;
      border:1px solid rgba(0,0,0,.14);
      font-weight:800;font-size:14px;
      transition:.2s ease;
    }
    .btn.primary{
      background:var(--red);border-color:var(--red);color:white;
      box-shadow:0 22px 45px rgba(245,5,4,.22);
    }
    .btn:hover{transform:translateY(-2px)}

    .hero-panel{
      position:relative;
      background:rgba(255,255,255,.68);
      border:1px solid rgba(255,255,255,.75);
      backdrop-filter:blur(26px);
      border-radius:38px;
      padding:26px;
      box-shadow:var(--shadow);
    }
    .photo-card{
      min-height:360px;
      border-radius:30px;
      overflow:hidden;
      background:
        linear-gradient(135deg,rgba(245,5,4,.15),transparent),
        linear-gradient(180deg,#15151b,#272731);
      position:relative;
      display:flex;
      align-items:flex-end;
      padding:28px;
      color:#fff;
    }
    .photo-card img{
      position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;
      z-index:0;
    }
    .photo-card:after{
      content:"";
      position:absolute;inset:0;
      background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.72));
      z-index:1;
    }
    .photo-content{position:relative;z-index:2}
    .hanzi{font-size:74px;line-height:.85;font-weight:950;color:var(--red);margin-bottom:18px}
    .photo-content h2{margin:0;font-size:28px;line-height:1.05;letter-spacing:-.04em;color:#fff}
    .photo-content p{margin:12px 0 0;color:rgba(255,255,255,.78)}
    .metrics{
      display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px;
    }
    .metric{
      background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:20px;padding:15px;
    }
    .metric strong{display:block;font-size:22px;letter-spacing:-.05em;color:var(--red)}
    .metric span{font-size:12px;color:var(--muted);font-weight:700}

    section{padding:82px 24px}
    .container{max-width:var(--max);margin:auto}
    .kicker{
      color:var(--red);font-size:12px;font-weight:900;text-transform:uppercase;
      letter-spacing:.16em;margin-bottom:13px;
    }
    h2{
      margin:0 0 18px;
      font-size:clamp(34px,4.5vw,60px);
      line-height:1;
      letter-spacing:-.065em;
      color:var(--dark);
    }
    .section-lead{font-size:19px;color:var(--muted);max-width:840px;margin:0 0 38px}

    .dark{
      background:#08080c;color:#fff;position:relative;overflow:hidden;
    }
    .dark:before{
      content:"";position:absolute;inset:auto -20% -55% auto;
      width:70vw;height:70vw;border-radius:50%;
      background:radial-gradient(circle,rgba(245,5,4,.28),transparent 62%);
    }
    .dark h2{color:#fff}
    .dark .section-lead{color:rgba(255,255,255,.68)}
    .dark .container{position:relative;z-index:1}
    .problem-grid{
      display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:40px;
    }
    .problem-card{
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.055);
      border-radius:28px;
      padding:28px;
    }
    .problem-card b{font-size:22px;letter-spacing:-.03em}
    .problem-card p{margin:10px 0 0;color:rgba(255,255,255,.66)}

    .proof-layout{
      display:grid;grid-template-columns:.9fr 1.1fr;gap:30px;align-items:start;
    }
    .sticky-note{
      position:sticky;top:96px;
      background:var(--dark);
      color:#fff;
      border-radius:34px;
      padding:34px;
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .sticky-note:before{
      content:"";position:absolute;right:-70px;top:-70px;width:180px;height:180px;
      background:var(--red);border-radius:50%;opacity:.78;
    }
    .sticky-note h3{position:relative;margin:0;font-size:34px;line-height:1.04;letter-spacing:-.05em}
    .sticky-note p{position:relative;color:rgba(255,255,255,.72);margin:18px 0 0}
    .proof-grid{
      display:grid;grid-template-columns:1fr 1fr;gap:16px;
    }
    .card{
      background:#fff;border:1px solid var(--line);border-radius:28px;padding:26px;
      box-shadow:0 20px 60px rgba(0,0,0,.045);
      transition:.2s ease;
    }
    .card:hover{transform:translateY(-2px);box-shadow:0 26px 70px rgba(0,0,0,.08)}
    .num{font-size:34px;font-weight:950;color:var(--red);letter-spacing:-.06em;margin-bottom:10px}
    .card h3{margin:0 0 10px;font-size:22px;line-height:1.12;letter-spacing:-.04em}
    .card p{margin:0;color:var(--muted)}

    .modules{background:#fff}
    .module-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .module{
      min-height:340px;
      padding:30px;
      border-radius:34px;
      background:
        linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.92)),
        radial-gradient(circle at 0 0,rgba(245,5,4,.16),transparent 42%);
      border:1px solid var(--line);
      box-shadow:0 22px 70px rgba(0,0,0,.055);
      display:flex;flex-direction:column;justify-content:space-between;
    }
    .module .tag{
      color:var(--red);font-size:12px;font-weight:950;letter-spacing:.14em;text-transform:uppercase;
    }
    .module h3{font-size:30px;line-height:1;letter-spacing:-.055em;margin:26px 0 12px}
    .module p{color:var(--muted);margin:0}
    .module span{margin-top:24px;color:var(--red);font-weight:900}

    .timeline-wrap{
      background:#fff;border:1px solid var(--line);border-radius:38px;
      padding:32px;box-shadow:var(--shadow);
    }
    .timeline{display:grid;gap:0}
    .t-item{
      display:grid;grid-template-columns:120px 1fr;gap:24px;
      padding:22px 0;border-bottom:1px solid rgba(0,0,0,.08);
    }
    .t-item:last-child{border-bottom:0}
    .year{color:var(--red);font-weight:950}
    .t-item p{margin:0;color:var(--muted)}
    .t-item strong{color:var(--dark)}

    .statement{
      background:var(--red);color:#fff;text-align:center;position:relative;overflow:hidden;
    }
    .statement:before,.statement:after{
      content:"";position:absolute;border:1px solid rgba(255,255,255,.22);border-radius:50%;
    }
    .statement:before{width:480px;height:480px;left:-170px;top:-170px}
    .statement:after{width:620px;height:620px;right:-250px;bottom:-280px}
    .statement .container{position:relative;z-index:1}
    .statement h2{color:#fff;max-width:920px;margin:auto}
    .statement p{color:rgba(255,255,255,.84);font-size:20px;max-width:820px;margin:20px auto 0}

    .ideas-grid,.links-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .idea,.link{
      background:#fff;border:1px solid var(--line);border-radius:28px;padding:26px;
      box-shadow:0 18px 52px rgba(0,0,0,.045);
    }
    .idea h3,.link h3{font-size:24px;line-height:1.08;letter-spacing:-.045em;margin:0 0 10px}
    .idea p,.link p{color:var(--muted);margin:0}

    .faq{background:#fff}
    details{border-top:1px solid var(--line);padding:22px 0}
    details:last-child{border-bottom:1px solid var(--line)}
    summary{cursor:pointer;font-size:20px;font-weight:900;letter-spacing:-.03em;list-style:none}
    summary::-webkit-details-marker{display:none}
    details p{color:var(--muted);max-width:890px;margin:12px 0 0}

    .cta-box{
      background:
        radial-gradient(circle at 80% 20%,rgba(245,5,4,.24),transparent 30%),
        #08080c;
      color:#fff;border-radius:40px;padding:48px;
      display:grid;grid-template-columns:1.4fr .6fr;gap:28px;align-items:center;
      box-shadow:var(--shadow);
    }
    .cta-box h2{color:#fff}
    .cta-box p{color:rgba(255,255,255,.7);font-size:18px;margin:0}

    footer{
      padding:38px 24px;background:#08080c;color:rgba(255,255,255,.62);font-size:14px;
    }
    .footer-inner{max-width:var(--max);margin:auto;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}

    @media(max-width:940px){
      .hero-inner,.proof-layout,.cta-box{grid-template-columns:1fr}
      .module-grid,.ideas-grid,.links-grid{grid-template-columns:1fr}
      .navlinks{display:none}
    }
    @media(max-width:680px){
      .hero-inner{padding-top:62px}
      .problem-grid,.proof-grid{grid-template-columns:1fr}
      .metrics{grid-template-columns:1fr}
      .t-item{grid-template-columns:1fr;gap:4px}
      .photo-card{min-height:300px}
    }

    /* Ajustes finos header + hero */

.mark {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-align: center;
  padding-bottom: 2px;
}

.hero-inner {
  padding-top: 38px;
  padding-bottom: 44px;
  min-height: 620px;
}

.photo-card {
  min-height: 430px;
  background-position: center top;
}

.photo-card img {
  object-position: center -75px;
}

.photo-content {
  transform: translateY(28px);
}

.photo-content .hanzi {
  transform: translateY(-18px);
}

.photo-content h2 {
  max-width: 92%;
}