:root {
    --main: #2A5768;
    --main-dark: #1D3E4A;
    --ink: #16221F;
    --paper: #FFFFFF;
    --muted: #5B6764;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  html, body {
    overflow-x: clip;
    max-width: 100%;
  }

  body {
    font-family: 'Inter', -apple-system, sans-serif;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
  }

  /* ---------- Nav ---------- */
  .topbar {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 32px 4vw;
  }

  .nav-links {
    display: flex;
    align-items: center;
    gap: 65px;
  }

  .topbar a {
    color: var(--ink);
    text-decoration: none;
    font-size: 15px;
    font-weight: 550;
    letter-spacing: -0.01em;
    white-space: nowrap;
  }

  .topbar a:hover { color: var(--main); }

  .lang {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
  }

  .lang svg { width: 12px; height: 12px; }

  /* hamburger toggle — hidden until the nav needs to collapse */
  .nav-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 24px;
    height: 34px;
    cursor: pointer;
    flex-shrink: 0;
  }

  .nav-burger span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--ink);
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* ---------- Nav: tablet — tighten spacing ---------- */
  @media (max-width: 1100px) {
    .nav-links { gap: 34px; }
    .topbar a { font-size: 14px; }
  }

  @media (max-width: 920px) {
    .nav-links { gap: 22px; }
    .topbar a { font-size: 13px; }
  }

  /* ---------- Nav: mobile — full-screen overlay ---------- */
  @media (max-width: 820px) {
    .topbar { justify-content: flex-end; padding: 23px 3.2vw;}

    .nav-burger {
      display: flex;
      position: relative;
      z-index: 25;
    }

    .nav-links {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 15;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 6px;
      background: var(--paper);
      padding: 80px 6vw 40px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease;
    }

    .nav-toggle:checked ~ .nav-links {
      opacity: 1;
      pointer-events: auto;
    }

    .nav-links a {
      width: 100%;
      max-width: 340px;
      text-align: center;
      padding: 18px 20px;
      font-size: 18px;
    }

    .nav-links a:hover { color: var(--main); }

    .nav-links .lang { justify-content: center; }
  }

  /* ---------- Hero ---------- */
.hero {
  position: relative;
  width: 100%;
  padding-top: 10px;
  display: grid;
  grid-template-columns: 1fr;
  overflow-x: clip;
}

.hero-photo {
  display: block;
  width: 53%;
  height: auto;
  grid-area: 1 / 1;
  margin-right: 50px;
  justify-self: end;
  align-self: end;
  z-index: 1;
}

.hero-overlay {
  grid-area: 1 / 1;
  z-index: 0;
  display: flex;
  flex-direction: column;
  padding: 0 4vw 0;
}

  .hero-inner {
    max-width: 640px;
    background: linear-gradient(120deg,
      rgba(255,255,255,0.97) 0%,
      rgba(255,255,255,0.94) 45%,
      rgba(255,255,255,0.55) 78%,
      rgba(255,255,255,0) 100%);
    padding: 0px 28px 32px 0;
    margin-left: -4vw;
    padding-left: 4vw;
    border-radius: 0 0 4px 0;
  }

  .badge-row {
    display: flex;
    align-items: flex-start;
    gap: 32px;
  }

  .mark {
    width: 110px;
    height: auto;
    flex-shrink: 0;
    display: none; /* hidden for now */
  }

  h1 {
    color: inherit;   /* heredado del contenedor: el tema de WP lo pisaba */
    font-size: clamp(44px, 4.5vw, 68px);
    line-height: 1.025;
    font-weight: 650;
    letter-spacing: -0.04em;
    padding-top: 30px;
  }

  h1 .accent { color: var(--main); white-space: nowrap; }

  .lede {
    margin-top: 45px;
    max-width: 42ch;
    font-size: 18px;
    line-height: 1.55;
    letter-spacing: -0.01em;
    color: black;
  }

  .cta-row {
    display: flex;
    gap: 14px;
    margin-top: 36px;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 26px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    border-radius: 2px;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .btn svg { width: 15px; height: 15px; flex-shrink: 0; }

  .btn-primary {
    background: var(--main);
    color: var(--paper);
    border: 1px solid var(--main);
  }

  .btn-primary:hover { background: var(--main-dark); border-color: var(--main-dark); }

  .btn-primary svg { width: 15px; height: 15px; }

  .btn-outline {
    background: rgba(255,255,255,0.9);
    border: 1.5px solid var(--main);
    border-color: 1px var(--main); color: var(--main);
  }

  .btn-outline:hover { border-color: var(--main); color: var(--main); }

  /* ---------- Quote chip ---------- */
  .quote {
    position: absolute;
    top: 40px;
    right: 1vw;
    max-width: 260px;
    background: none;
    color: var(--ink);
    padding: 22px 22px 26px;
    text-align: left;
    border-radius: 2px;
  }

  .quote .markchar {
    font-size: clamp(46px, 4vw, 62px);
    line-height: 1;
    font-weight: 800;
    display: block;
    margin-bottom: -16px;
    color: var(--main);
  }

  .quote p {
    font-size: clamp(14px, 1.25vw, 17px);
    line-height: 1.5;
    font-weight: 500;
  }

  .quote .rule {
    width: 30px;
    height: 2px;
    background: var(--ink);
    margin-top: 22px;
    opacity: 0.7;
  }
  .feature-strip {
  background: #f4f4f4;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 260px));
  justify-content: center;
  column-gap: 56px;
  padding:43px 4vw;
}
.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding-left: 28px;
  border-left: 1px solid #cccccc;
}
.feature-item:first-child { border-left: none; padding-left: 0; }
.feature-icon { width: 46px; height: 46px; flex-shrink: 0; color: var(--main); }
.feature-text h3 {
  color: inherit;   /* idem */
  font-size: 15px; font-weight: 700; letter-spacing: 0.03em;
  text-transform: uppercase; line-height: 1.4;
}
.feature-text p { margin-top: 10px; font-size: 15px; line-height: 1.5; color: rgba(0, 0, 0, 0.842); }

.about-award {
  background: var(--main);
  color: #FFFFFF;
  display: grid;
  grid-template-columns: 0.85fr 1.3fr;
  gap: 60px;
  padding: 52px 4vw;
  align-items: center;
}

.about-left { max-width: 420px; }

.about-left .eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}

.about-left .eyebrow::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  background: rgba(255,255,255,0.5);
  margin-top: 14px;
}

.about-left h2 {
  color: inherit;   /* blanco heredado de .about-award */
  margin-top: 24px;
  font-size: clamp(28px, 2.6vw, 38px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.about-left h2 .accent-soft { color: #b5f3ff; }

.about-left p {
  margin-top: 22px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.846);
  max-width: 50ch;
}

.btn-ghost {
  margin-top: 32px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border: 1px solid rgba(255,255,255,0.4);
  color: #FFFFFF;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 2px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.btn-ghost:hover { border-color: #FFFFFF; background: rgba(255,255,255,0.06); }
.btn-ghost svg { width: 14px; height: 14px; }

.about-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-left: 1px solid rgba(255, 255, 255, 0.264);
  padding-left: 60px;
}

.stat-item { padding: 8px 36px 8px 0; }

.stat-item:nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, 0.294); }
.stat-item:nth-child(1), .stat-item:nth-child(2) { border-bottom: 1px solid rgba(255, 255, 255, 0.318); }
.stat-item:nth-child(2), .stat-item:nth-child(4) { padding-left: 36px; padding-right: 0; }

.stat-icon {
  width: 94px;
  height: 94px;
  color: #FFFFFF;
  margin-bottom: -3px;
  margin-left: -18px
}

.stat-item strong {
  color: inherit;   /* blanco heredado de .about-award */
  display: block;
  font-size: 23px;
  font-weight: 700;
}

.stat-item p {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.851);
}

.ranking-section {
  padding: 52px 4vw;
  text-align: center;
  position: relative;
  background-color: #f8f8f8;
}

.ranking-section .eyebrow {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:  rgb(52, 52, 52);
}

.ranking-section .eyebrow::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  background: var(--main);
  margin: 14px auto 0;
}

.ranking-section h2 {
  color: inherit;   /* idem */
  margin-top: 32px;
  font-size: clamp(25px, 2.35vw, 33px);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.ranking-section h2 .accent { color: var(--main); }

.ranking-carousel {
  position: relative;
  margin-top: 35px;
  padding: 0 40px;
}

.rank-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 4px 2px 8px;
}

.rank-track::-webkit-scrollbar { display: none; }

.rank-card {
  flex: 0 0 auto;
  width: 260px;
  scroll-snap-align: start;
  text-align: left;
  background: #FFFFFF;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.rank-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 4;
  overflow: hidden;
  border-radius: 2px;
}

.rank-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rank-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--main);
  color: var(--paper);
  font-size: 14px;
  font-weight: 700;
  border-radius: 2px;
}

.rank-info { padding: 18px 16px 22px;}

.rank-info h3 { font-size: 17px; font-weight: 700; color: inherit; }

.rank-info .score {
  margin-top: 6px;
  font-size: 14px;
  color: var(--muted);
}

.rank-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}

.rank-link svg { width: 13px; height: 13px; }
.rank-link:hover { color: var(--main); }

.rank-arrow {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  z-index: 2;
}

.rank-arrow svg { width: 20px; height: 20px; }
.rank-arrow:hover { color: var(--main); }
.rank-arrow.prev { left: -4px; }
.rank-arrow.next { right: -4px; }

.ranking-section .btn-primary {
  margin-top: 30px;
}

.ranking-note {
  margin-top: 30px;
  font-size: 16px;
  color: var(--muted);
}

.ranking-note a {
  color: var(--main);
  font-weight: 600;
  text-decoration: none;
}

.ranking-note a:hover { text-decoration: underline; }

.news-section {
  padding: 46px 4vw;
  text-align: center;
  background-color: #f8f8f8;
  border-top: 1px solid #7e7e7e5c;
}

.news-section .eyebrow {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(42, 42, 42);
}

.news-section .eyebrow::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  background: var(--main);
  margin: 14px auto 0;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 50px;
  text-align: left;
}

.news-card {
  background: #FFFFFF;
  border: 1px solid #E7E6E1;
  border-radius: 2px;
  overflow: hidden;
}

.news-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.news-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.news-tag {
  position: absolute;
  bottom: 14px;
  left: 14px;
  background: var(--main);
  color: var(--paper);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 2px;
}

.news-body { padding: 22px 22px 26px; }

.news-date { font-size: 13px; color: var(--muted); }

.news-body h3 {
  color: inherit;   /* idem */
  margin-top: 10px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.news-body p {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

.news-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--main);
  text-decoration: none;
}

.news-link svg { width: 13px; height: 13px; }
.news-link:hover { color: var(--main); }

.news-cta { margin-top: 24px; }

.news-cta .btn-outline {
  border-color: var(--main);
  color: var(--main);
}

  /* ---------- Responsive ---------- */
  @media (min-width: 1200px) and (max-width: 1300px) {
    h1 { font-size: clamp(44px, 4.5vw, 96px);padding-top: 20px; line-height: 1.02; }

    .hero-photo { width: 53%; }

    .mark { width: 90px; }

    .btn { padding: 13px 22px; font-size: 13px; }
    .quote {top: 36px;}
  }

   @media  (max-width: 1250px) {
  .feature-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-left: 20px;
  border-left: 1px solid #cccccc;
}

.feature-item:first-child { border-left: none; padding-left: 0; }
.feature-icon { width: 42px; height: 42px; flex-shrink: 0; color: var(--main); }
.stat-icon {
  width: 84px;
  height: 84px;
  color: #FFFFFF;
  margin-bottom: -3px;
  margin-left: -18px
}

  }
  @media (min-width: 1000px) and (max-width: 1100px) {
    body { overflow-x: hidden; }

    h1 { font-size: clamp(38px, 4vw, 46px); padding-top: 20px; line-height: 1.02; }

    .mark { width: 75px; }

    .btn { padding: 12px 20px; font-size: 12.5px; margin-top: 0px;}

    .hero-photo { margin-right: 50px; width: 51%;}

    .lede { font-size: 15px; margin-top: 40px;}

    .quote {top: 26px;}
  }
@media (max-width: 1000px) {
  body { overflow-x: hidden; }

    h1 { font-size: clamp(38px, 4vw, 46px); padding-top: 20px; line-height: 1.02; }

    .mark { width: 75px; }

    .btn { padding: 12px 20px; font-size: 12.5px; margin-top: 0px;}

    .hero-photo { margin-right: 50px; width: 48%;}

    .lede { font-size: 15px; margin-top: 40px;}

    .quote {top: 6px; max-width: 220px;  margin-bottom: 40px;}

    .quote p {
    font-size: clamp(14px, 1.25vw, 17px);}

    .quote .rule {
      font-size: 12px;
      margin-top: 13px;
      color: var(--muted);
    }
      .feature-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-left: 12px;
  border-left: 1px solid #cccccc;
}

.feature-item:first-child { border-left: none; padding-left: 0; }
.feature-icon { width: 38px; height: 38px; flex-shrink: 0; color: var(--main); }
.stat-icon {
  width: 77px;
  height: 77px;
  color: #FFFFFF;
  margin-bottom: -3px;
  margin-left: -18px
}
.about-stats {
  padding-left: 40px;
}
     .hero-inner {
    max-width: 440px;
}}

@media (max-width: 900px) {
  .news-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .ranking-section { padding: 64px 4vw; }
  .rank-arrow { display: none; }
  .rank-card { width: 220px; }
}

@media (max-width: 900px) {
  .about-award { grid-template-columns: 1fr; gap: 40px; padding: 56px 4vw; }
  .about-stats { grid-template-columns: 1fr; border-left: none; padding-left: 0; }
  .stat-item { border-right: none !important; padding: 24px 0 !important; border-bottom: 1px solid rgba(255,255,255,0.14) !important; }
  .stat-item:first-child { padding-top: 0 !important; }
  .stat-item:last-child { border-bottom: none !important; }
  .stat-icon {
  width: 86px;
  height: 86px;
  color: #FFFFFF;
  margin-bottom: -3px;
  margin-left: -10px
}
.stat-item strong {
  display: block;
  font-size: 24px;
  font-weight: 700;
}

.stat-item p {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.851);
}
}
@media (max-width: 900px) {
  .feature-strip { grid-template-columns: 1fr; gap: 28px; margin-top: 0; }
  .feature-item { border-left: none; padding: 20px 0 0; border-top: 1px solid #DDDBD6; }
  .feature-item:first-child { border-top: none; padding-top: 0; }
}

@media (max-width: 900px) {
    .btn { padding: 10px 16px; font-size: 11px; }

    .hero-photo { margin-right: 30px; width: 52%;}
    .lede { font-size: 14px; margin-top: 30px;}
    h1 { font-size: clamp(35px, 3.75vw, 44px); padding-top: 10px; line-height: 1.02; }

    .quote { max-width: 180px; padding: 16px 16px 20px; }

    .quote .markchar { font-size: 34px; margin-bottom: -10px; }

    .quote p { font-size: 12.5px; }
}

@media (max-width: 830px) {
  .hero-photo { margin-right: 30px; width: 50%;}

  h1 { font-size: clamp(32px, 3.7vw, 45px); padding-top: 10px; line-height: 1.02; }
  .hero-inner {
    max-width: 500px;
  }
  .lede { font-size: 13px; margin-top: 30px;}
}

@media (max-width: 800px) {
  .lb-title { display: none; }
  .title-l1 { white-space: nowrap; }
  .ranking-section .btn-primary,
  .news-cta .btn-outline {
    width: auto;
    min-width: min(220px, 74vw);
    padding: 12px 22px;
    font-size: 11px;
  }

  .ranking-section .btn-primary svg,
  .news-cta .btn-outline svg { width: 15px; height: 15px; flex-shrink: 0; }

  h1 { font-size: clamp(30px, 3.5vw, 44px); margin-top: -28px; line-height: 1.07; }

  .btn { padding: 6px 11px; font-size: 9px; margin-top: -5px;}

  .quote { max-width: 160px; padding: 10px 10px 14px; }

  .quote .markchar { font-size: 20px; margin-bottom: -6px; }

  .quote p { font-size: 11px; }
   .quote .rule {
      font-size: 12px;
      margin-top: 10px;
      color: var(--muted);
    }
}

@media (max-width: 700px) {
  .btn { padding: 5px 9px; font-size: 8px; }
  h1 { font-size: clamp(28px, 3.3vw, 41px); padding-top: 0px; line-height: 1.08; }

  .lede { font-size: 12px; margin-top: 24px; }

  .quote { max-width: 150px; padding: 8px 8px 12px; }

  .quote .markchar { font-size: 18px; margin-bottom: -5px; }

  .quote p { font-size: 9.8px; }
  
  .hero-inner {
    max-width: 300px;
  }.quote .rule {
      font-size: 12px;
      margin-top: 8px;
      color: var(--muted);
    }
}

@media (max-width: 650px) {
  .btn { padding: 4px 7px; font-size: 8px; }

  .btn-outline { border-width: 1px; }

  h1 { font-size: clamp(26px, 3.2vw, 37px); }

  .lede { font-size: 12px; margin-top: 20px; }

  .quote { max-width: 130px; padding: 6px 6px 10px; }

  .quote .markchar { font-size: 15px; margin-bottom: -4px; }

  .quote p { font-size: 8.5px; }
}

@media (max-width: 600px) {
  .topbar { padding-right: 25px; }

  .cta-row { flex-direction: column; align-items: flex-start; gap: 8px; }

  .btn { justify-content: center; width: 110px;margin-top: -10px; }

  .cta-row .btn { gap: 3px; }

  .btn-primary svg { width: 18px; height: 12px; }

  .cta-row .btn-primary svg { width: 12px; height: 12px; }

  .btn { padding: 6px 8px; font-size: 7px; border-radius: 0; }

  .ranking-section .btn-primary,
  .news-cta .btn-outline {
    width: auto;
    min-width: min(220px, 74vw);
    padding: 12px 20px;
    font-size: 11px;
  }

  .ranking-section .btn-primary svg,
  .news-cta .btn-outline svg { width: 15px; height: 15px; flex-shrink: 0; }

  h1 { font-size: clamp(24px, 3.1vw, 35px); }

  .lede { font-size: 12px; margin-top: 21px; }

  .quote { max-width: 90px; padding: 5px 5px 8px; }

  .quote .markchar { font-size: 13px; margin-bottom: -3px;margin-left: -20px; }

  .quote p { font-size: 8px; margin-left: -20px;}
   .hero-photo { margin-right: 30px; width: 54%;}
  
}

@media (max-width: 550px) {
  .cta-row { flex-direction: column; align-items: flex-start; gap: 8px; }

  .btn { justify-content: center; width: 110px;margin-top: -10px; }

  .btn-primary svg { width: 13px; height: 7px; }

  .btn { padding: 6px 60px; font-size: 8px; border-radius: 0; }

  h1 { font-size: clamp(26px, 3.2vw, 37px); }

  .lede { font-size: 12px; margin-top: 21px; }

  .quote { max-width: 100px; padding: 5px 5px 8px; margin-top: 70px;}

  .quote .markchar { font-size: 13px; margin-bottom: -3px;margin-left: -20px; }

  .quote p { font-size: 9px; margin-left: -20px;}

   .hero-photo { margin-right: -25px; width: 68%; margin-top: 90px}
  
}
@media (max-width: 500px) {
  .cta-row { flex-direction: column; align-items: flex-start; gap: 8px; }

  .btn { justify-content: center; width: 110px;margin-top: -10px; }

  .btn-primary svg { width: 13px; height: 7px; }

  .btn { padding: 6px 60px; font-size: 8px; border-radius: 0; }

  h1 { font-size: clamp(26px, 3.2vw, 37px); }

  .lede { font-size: 12px; margin-top: 21px; }

  .quote { max-width: 93px; padding: 5px 5px 8px;  z-index: 0; }

  .quote .markchar { font-size: 13px; margin-bottom: -3px;margin-left: -20px; }

  .quote p { font-size: 9px; margin-left: -20px;}

   .hero-photo { margin-right: -25px; width: 78%; margin-top: 150px;}
  
}
@media (max-width: 500px) {
  .cta-row { flex-direction: column; align-items: flex-start; gap: 8px; }

  .btn { justify-content: center; width: 110px;margin-top: -10px; }

  .btn-primary svg { width: 13px; height: 7px; }

  .btn { padding: 6px 60px; font-size: 8px; border-radius: 0; }

  h1 { font-size: clamp(26px, 3.2vw, 37px); }


  .quote { max-width: 130px; padding: 8px 10px 10px; margin-top: 110px; right: 10px; z-index: 2; background: rgba(255,255,255,0.92); border-radius: 4px; }

  .quote .markchar { font-size: 13px; margin-bottom: -3px; margin-left: 0; }

  .quote p { font-size: 9px; margin-left: 0; }

   .hero-photo { margin-right: -25px; width: 78%; margin-top: 150px;}
     .stat-icon {
  width: 66px;
  height: 66px;
  color: #FFFFFF;
  margin-bottom: -3px;
  margin-left: -10px
}
.stat-item strong {
  display: block;
  font-size: 22px;
  font-weight: 700;
}

.stat-item p {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.851);
}
  
}
@media (max-width: 400px) {
  .cta-row { flex-direction: column; align-items: flex-start; gap: 8px; }

  .btn { justify-content: center; width: 110px;margin-top: -10px; }

  .btn-primary svg { width: 13px; height: 7px; }

  .btn { padding: 6px 60px; font-size: 8px; border-radius: 0; }

  h1 { font-size: clamp(26px, 3.2vw, 37px); margin-top: -17px;}


  .quote { max-width: 130px; padding: 8px 10px 10px; margin-top: 135px; right: 10px; z-index: 2; background: rgba(255,255,255,0.92); border-radius: 4px; }

  .quote .markchar { font-size: 13px; margin-bottom: -3px; margin-left: 0; }

  .quote p { font-size: 9px; margin-left: 0; }

   .hero-photo { margin-right: -15px; width: 82%; margin-top: 190px;}
  
}
@media (max-width: 350px) {
  .cta-row { flex-direction: column; align-items: flex-start; gap: 8px; }

  .btn { justify-content: center; width: 110px;margin-top: -10px; }

  .btn-primary svg { width: 13px; height: 7px; }

  .btn { padding: 6px 60px; font-size: 8px; border-radius: 0; }

  h1 { font-size: clamp(26px, 3.2vw, 37px); }


  .quote { max-width: 130px; padding: 8px 10px 10px; margin-top: 145px;  z-index: 2; background: rgba(255,255,255,0.92); border-radius: 4px; }

  .quote .markchar { font-size: 13px; margin-bottom: -3px; margin-left: 0; }

  .quote p { font-size: 9px; margin-left: 0; }

   .hero-photo { margin-right: -25px; width: 90%; margin-top: 210px;}
  
}


/* ------------------------------------------------------------------
   El hero nunca se superpone en teléfonos.

   Hasta 550px el texto y la foto dejan de compartir la misma celda del
   grid: el texto ocupa la fila 1 y la foto la fila 2. Antes la foto se
   separaba con un margin-top fijo (90 / 150 / 190 / 210px), un valor
   calculado a ojo contra el alto que tenía el texto en ese momento;
   cuando el texto crecía una línea más (al pasar a inglés, con otro
   tamaño de fuente, o mientras Inter todavía no cargó) la foto le caía
   encima. Con dos filas eso no puede pasar, mida lo que mida el texto.
   ------------------------------------------------------------------ */
@media (max-width: 550px) {
  .hero { grid-template-rows: auto auto; }

  .hero-overlay { grid-area: 1 / 1; }

  .hero-photo {
    grid-area: 2 / 1;
    width: 100%;
    margin: 0;
    justify-self: stretch;
    align-self: start;
  }

  /* La cita sigue flotando, pero sobre la foto y no sobre el texto. */
  .quote {
    grid-area: 2 / 1;
    position: static;
    margin: 12px 4vw 0 0;
    justify-self: end;
    align-self: start;
    z-index: 2;
  }
}

/* ------------------------------------------------------------------
   Las flechas del carrusel son <button>, y Astra le pone a todo botón
   fondo, color de texto, padding, borde redondeado y sombra. Tus reglas
   .rank-arrow (especificidad 0,1,0) ganaban en estado normal, pero las
   de Astra para :hover (0,1,1) ganaban al pasar el mouse: de ahí el
   rectángulo gris. El chevron además quedaba blanco sobre blanco, por
   eso las flechas no se veían.

   Subir la especificidad con body.ilds-award (0,2,1) las gana en todos
   los estados.
   ------------------------------------------------------------------ */
body.ilds-award .rank-arrow,
body.ilds-award .rank-arrow:hover,
body.ilds-award .rank-arrow:focus,
body.ilds-award .rank-arrow:active {
  background: transparent;
  background-color: transparent;
  background-image: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  text-shadow: none;
  outline: none;
  padding: 0;
  min-width: 0;
  min-height: 0;
  line-height: 1;
  color: var(--ink);
}

body.ilds-award .rank-arrow:hover,
body.ilds-award .rank-arrow:focus {
  color: var(--main);
}

body.ilds-award .rank-arrow svg {
  width: 20px;
  height: 20px;
  color: inherit;
}

/* ------------------------------------------------------------------
   Eyebrow del hero, igual que en la landing del Foro.
   Mismos valores que el .eyebrow de ilds-evento.css, así las dos páginas
   se ven idénticas. Va scopeado a .hero-inner para no tocar los eyebrows
   de las otras secciones, que tienen su propio tamaño y su rayita.
   ------------------------------------------------------------------ */
.hero-inner .eyebrow {
  display: block;
  margin-bottom: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--main);
}

/* La separación entre el eyebrow y el título la da este padding, igual
   que en la landing del Foro. Es un solo número y no cambia por ancho:
   así el espacio se ve igual en desktop y en teléfono.

   El h1 del Award traía padding-top propio (50px en el estilo base y
   otros valores en cada breakpoint) para alinearse con el logo de AGBC.
   Ese padding se sumaba al espacio del eyebrow, y por eso quedaba muy
   separado en pantallas grandes y muy pegado en las chicas, donde el
   breakpoint lo bajaba. Esta regla es más específica (0,2,2) que todas
   ellas, así que manda en todos los anchos.

   El margin-top negativo (-28px desde 800px, -17px desde 400px) también
   se anula acá: subía el título para pegarlo al borde de arriba, y con
   el eyebrow delante se lo comía entero. Por eso a partir de 800px el
   espacio desaparecía de golpe.

   Si querés más o menos aire, tocá solo este 18px. */
.hero-inner .eyebrow + .badge-row h1 {
  padding-top: 18px;
  margin-top: 0;
}

/* ------------------------------------------------------------------
   Astra define a:hover con especificidad 0,1,1 y le gana a tus clases
   de botón, que son 0,1,0. Por eso al pasar el mouse el texto pasaba de
   blanco al gris de los links del tema. Acá se fijan los colores de cada
   botón en todos los estados, respetando el hover que vos definiste.
   ------------------------------------------------------------------ */
body.ilds-award .btn-primary,
body.ilds-award .btn-primary:hover,
body.ilds-award .btn-primary:focus,
body.ilds-award .btn-primary:active { color: var(--paper); }

body.ilds-award .btn-outline,
body.ilds-award .btn-outline:hover,
body.ilds-award .btn-outline:focus,
body.ilds-award .btn-outline:active { color: var(--main); }

body.ilds-award .btn-ghost,
body.ilds-award .btn-ghost:hover,
body.ilds-award .btn-ghost:focus,
body.ilds-award .btn-ghost:active { color: #FFFFFF; }

body.ilds-award .rank-link,
body.ilds-award .rank-link:focus,
body.ilds-award .rank-link:active { color: var(--ink); }
body.ilds-award .rank-link:hover { color: var(--main); }

body.ilds-award .news-link,
body.ilds-award .news-link:hover,
body.ilds-award .news-link:focus,
body.ilds-award .news-link:active { color: var(--main); }

body.ilds-award .ranking-note a,
body.ilds-award .ranking-note a:hover,
body.ilds-award .ranking-note a:focus { color: var(--main); }

body.ilds-award .topbar a,
body.ilds-award .topbar a:active { color: var(--ink); }
body.ilds-award .topbar a:hover,
body.ilds-award .topbar a:focus { color: var(--main); }

/* ------------------------------------------------------------------
   Hasta 800px el hero arranca 20px más arriba, más cerca del nav.
   Ese margen negativo se come parte del padding de abajo del .topbar
   (23px a este ancho), así que no llega a tapar el menú. Si querés
   acercarlo o alejarlo más, tocá solo este número.
   ------------------------------------------------------------------ */
@media (max-width: 800px) {
  .hero { margin-top: -20px; }
}