:root{
  --black:#0f0f10;
  --ink:#171719;
  --gray-900:#222225;
  --gray-700:#505057;
  --gray-500:#77777f;
  --gray-200:#e8e8ea;
  --gray-100:#f5f5f4;
  --white:#ffffff;
  --gold:#d7bb45;
  --gold-soft:rgba(215,187,69,.18);
  --radius:26px;
  --shadow:0 22px 70px rgba(0,0,0,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--white);color:var(--ink);line-height:1.55;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
.site-shell{overflow:hidden}
.topbar{position:fixed;z-index:50;top:0;left:0;width:100%;height:82px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.78);backdrop-filter:blur(18px);border-bottom:1px solid rgba(0,0,0,.06);transition:height .25s ease,box-shadow .25s ease}
.topbar.scrolled{height:68px;box-shadow:0 14px 35px rgba(0,0,0,.07)}
.brand{display:flex;align-items:center;gap:12px;font-weight:750;letter-spacing:-.03em}
.brand-mark{width:38px;height:38px;border:1px solid var(--gray-200);border-radius:50%;display:grid;place-items:center;font-size:.76rem;background:linear-gradient(135deg,var(--black),#373737);color:var(--gold)}
.nav{display:flex;gap:24px;color:var(--gray-700);font-size:.92rem}
.nav a{position:relative}.nav a:after{content:"";position:absolute;left:0;bottom:-7px;width:0;height:2px;background:var(--gold);transition:width .25s ease}.nav a:hover:after{width:100%}
.logo{height:44px;width:auto;object-fit:contain}
.hero{min-height:100vh;padding:160px 5vw 90px;display:flex;align-items:center;position:relative;background:radial-gradient(circle at 78% 16%,var(--gold-soft),transparent 28%),linear-gradient(180deg,#fff,#fafafa)}
.hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(15,15,16,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(15,15,16,.035) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.55),transparent 80%);pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) 420px;gap:80px;align-items:center;width:100%;max-width:1180px;margin:auto}
.eyebrow,.section-label{font-size:.77rem;text-transform:uppercase;letter-spacing:.18em;color:var(--gray-500);font-weight:800;margin-bottom:18px}.section-label:before{content:"";display:inline-block;width:28px;height:2px;background:var(--gold);vertical-align:middle;margin-right:10px}.gold{color:var(--gold)}
h1{font-size:clamp(3.6rem,9vw,8.8rem);letter-spacing:-.09em;line-height:.86;font-weight:820;margin-bottom:28px}.slogan{font-size:clamp(1.35rem,2.6vw,2.2rem);letter-spacing:-.045em;line-height:1.12;font-weight:720;max-width:850px;margin-bottom:22px}.lead{font-size:1.08rem;color:var(--gray-700);max-width:720px;margin-bottom:34px}.hero-actions{display:flex;gap:14px;flex-wrap:wrap}.button{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:14px 22px;font-weight:750;font-size:.92rem;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}.button:hover{transform:translateY(-2px)}.primary{background:var(--black);color:var(--white);box-shadow:0 14px 34px rgba(0,0,0,.16)}.primary:after{content:"";width:7px;height:7px;background:var(--gold);border-radius:50%;margin-left:12px}.ghost{border:1px solid var(--gray-200);background:rgba(255,255,255,.75)}
.hero-card {
  position: absolute;
  right: 5%;
  top: 150px;
  width: 250px;   /* antes estaba muy grande */
  background: #f5f5f5;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* para pantallas pequeñas */
@media (max-width: 900px) {
  .hero-card {
    position: relative;
    right: auto;
    top: auto;
    margin-top: 40px;
    width: 100%;
  }
}
.section{padding:115px 5vw}.section-inner{max-width:1180px;margin:auto}.narrow{max-width:790px}.center{text-align:center}.problem h2,.section h2{font-size:clamp(2.1rem,4vw,4.3rem);letter-spacing:-.06em;line-height:1.03;font-weight:790;margin-bottom:28px}.section p{font-size:1.05rem;color:var(--gray-700);margin-bottom:18px}.emphasis{font-weight:650;color:var(--ink)!important;border-left:3px solid var(--gold);padding-left:20px;margin-top:28px}.light{background:var(--gray-100)}.split{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:start}.top{align-items:start}.copy-block{max-width:650px}.route-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:42px}.route-grid article{min-height:210px;border:1px solid var(--gray-200);border-radius:22px;padding:24px;background:var(--white);transition:transform .25s ease,border .25s ease,box-shadow .25s ease}.route-grid article:hover{transform:translateY(-5px);border-color:rgba(215,187,69,.65);box-shadow:var(--shadow)}.route-grid span{font-size:.78rem;color:var(--gold);font-weight:800;letter-spacing:.12em}.route-grid h3{font-size:1.25rem;margin:14px 0 10px;letter-spacing:-.03em}.route-grid p{font-size:.94rem;margin:0}.dark{background:var(--black);color:var(--white)}.dark p{color:#c7c7cb}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}.feature-grid div{border-top:1px solid rgba(215,187,69,.45);padding-top:24px}.feature-grid h3{font-size:1.18rem;line-height:1.2;margin-bottom:14px;letter-spacing:-.035em}.video-panel{border:1px solid var(--gray-200);border-radius:var(--radius);padding:18px;background:var(--white);box-shadow:var(--shadow)}.video-frame{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#111}.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.video-list{display:grid;gap:10px;margin-top:14px}.video-item{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:15px;background:var(--gray-100);color:var(--gray-700);font-weight:650}.video-item span{color:var(--gold);font-weight:850}.video-item.active{background:var(--black);color:var(--white)}.resource-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.resource-card{min-height:170px;border:1px solid var(--gray-200);background:var(--white);border-radius:22px;padding:24px;display:flex;flex-direction:column;justify-content:space-between;transition:transform .25s ease,border .25s ease}.resource-card:hover{transform:translateY(-4px);border-color:rgba(215,187,69,.8)}.resource-card span{font-size:.75rem;text-transform:uppercase;letter-spacing:.16em;color:var(--gold);font-weight:850}.resource-card strong{font-size:1.05rem;line-height:1.25;letter-spacing:-.03em}.resource-card small{color:var(--gray-500)}.muted-card{opacity:.78}.cta{background:linear-gradient(180deg,#fff,#f7f7f7)}.cta h2{font-size:clamp(1.8rem,3.2vw,3.3rem)}.contact-lines{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin-top:32px;color:var(--gray-700);font-weight:650}.footer{border-top:1px solid var(--gray-200);padding:30px 5vw;color:var(--gray-500);font-size:.86rem;display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;background:#fff}.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:none}
@media(max-width:980px){.nav{display:none}.hero-grid,.split{grid-template-columns:1fr;gap:42px}.hero-card{max-width:560px}.route-grid{grid-template-columns:repeat(2,1fr)}.feature-grid,.resource-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.topbar{height:72px;padding:0 22px}.logo{display:none}.brand span:last-child{display:none}.hero{padding:130px 22px 80px}.section{padding:84px 22px}.route-grid,.feature-grid,.resource-grid{grid-template-columns:1fr}.route-grid article{min-height:auto}.footer{display:block}.footer p+p{margin-top:12px}h1{letter-spacing:-.075em}.slogan{font-size:1.35rem}}

.video-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.video-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: #111;
}

.video-frame iframe {
  width: 100%;
  height: 100%;
  display: block;
}

.video-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.video-item {
  padding: 10px 14px;
  background: #f3f3f3;
  border-radius: 10px;
  font-size: 0.9rem;
  color: #333;
  text-decoration: none;
}

.video-item.active {
  background: #000;
  color: #fff;
}

.video-item span:first-child {
  margin-right: 8px;
  font-weight: 700;
  color: #d6b83f;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand-name {
  font-weight: 600; /* como ya lo tienes */
}

.brand-version {
  font-size: 12px;       /* 👈 ya visible */
  color: #666;           /* 👈 gris medio (no oculto) */
  font-weight: 400;      /* 👈 sin negrita */
  margin-top: 2px;
}

@media (max-width: 768px) {
  body {
    overflow-x: hidden;
  }

  .hero {
    padding: 70px 0 40px;
    overflow: hidden;
  }

  .hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    width: 100%;
  }

  .hero-copy {
    width: 100%;
    max-width: 100%;
  }

  .hero h1 {
    font-size: clamp(3rem, 16vw, 4.2rem);
    line-height: 0.95;
    word-break: normal;
    overflow-wrap: normal;
  }

  .slogan {
    font-size: clamp(1.35rem, 7vw, 2rem);
    line-height: 1.15;
    max-width: 100%;
  }

  .lead {
    font-size: 1.05rem;
    max-width: 100%;
  }

  .hero-actions {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: stretch;
  }

  .hero-actions .button {
    width: 100%;
    justify-content: center;
  }

  .hero-card {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .hero .hero-copy h1 {
    font-size: 2.5rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
}