:root {
      --bg: #0d0d0f;
      --bg-soft: #151518;
      --panel: #1c1c20;
      --panel-2: #232329;
      --text: #f7f4ec;
      --muted: #b9b5ab;
      --gold: #c9a85a;
      --gold-soft: #e3ce91;
      --line: rgba(255,255,255,.11);
      --willy: #b88b42;
      --londium: #9a633b;
      --doc: #198eea;
      --doc-soft: #57c8ff;
      --success: #7fd19a;
      --max: 1180px;
      --radius: 22px;
      --shadow: 0 24px 70px rgba(0,0,0,.32);
    }

    * { box-sizing: border-box; }

    html {
      scroll-behavior: smooth;
      background: var(--bg);
    }

    body {
      margin: 0;
      color: var(--text);
      background:
        radial-gradient(circle at 15% 8%, rgba(201,168,90,.14), transparent 32%),
        radial-gradient(circle at 90% 16%, rgba(25,142,234,.12), transparent 30%),
        var(--bg);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1.6;
    }

    img { max-width: 100%; }
    a { color: inherit; }

    .skip-link {
      position: absolute;
      left: -9999px;
      top: 8px;
      z-index: 9999;
      padding: 10px 14px;
      background: #fff;
      color: #111;
      border-radius: 8px;
    }

    .skip-link:focus { left: 8px; }

    .container {
      width: min(calc(100% - 36px), var(--max));
      margin-inline: auto;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 100;
      backdrop-filter: blur(16px);
      background: rgba(13,13,15,.84);
      border-bottom: 1px solid var(--line);
    }

    .nav {
      min-height: 74px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .brand img {
      display: block;
      width: 148px;
      height: auto;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 26px;
      font-size: .86rem;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .nav-links a {
      text-decoration: none;
      color: #e8e4da;
      transition: color .2s ease;
    }

    .nav-links a:hover,
    .nav-links a:focus-visible {
      color: var(--gold-soft);
    }

    .nav-cta {
      padding: 10px 15px;
      border: 1px solid rgba(201,168,90,.65);
      border-radius: 999px;
    }

    .menu-button {
      display: none;
      border: 1px solid var(--line);
      background: var(--panel);
      color: var(--text);
      border-radius: 12px;
      padding: 10px 13px;
      font: inherit;
      font-weight: 800;
      cursor: pointer;
    }

    .hero {
      position: relative;
      overflow: hidden;
      min-height: 720px;
      display: grid;
      align-items: center;
      border-bottom: 1px solid var(--line);
    }

    .hero::before,
    .hero::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
    }

    .hero::before {
      width: 610px;
      height: 610px;
      right: -180px;
      top: 60px;
      border: 1px solid rgba(87,200,255,.22);
      box-shadow:
        0 0 0 38px rgba(87,200,255,.025),
        0 0 0 76px rgba(87,200,255,.02),
        inset 0 0 80px rgba(25,142,234,.06);
    }

    .hero::after {
      width: 420px;
      height: 420px;
      left: -210px;
      bottom: -170px;
      border: 1px solid rgba(201,168,90,.2);
      box-shadow: 0 0 0 42px rgba(201,168,90,.025);
    }

    .hero-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1.12fr .88fr;
      gap: 70px;
      align-items: center;
      padding: 92px 0 86px;
    }

    .eyebrow {
      display: inline-flex;
      gap: 9px;
      align-items: center;
      margin-bottom: 20px;
      color: var(--gold-soft);
      font-size: .78rem;
      font-weight: 900;
      letter-spacing: .18em;
      text-transform: uppercase;
    }

    .eyebrow::before {
      content: "";
      width: 34px;
      height: 1px;
      background: var(--gold);
    }

    h1, h2, h3, p { margin-top: 0; }

    h1 {
      margin-bottom: 22px;
      max-width: 820px;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(3.5rem, 7vw, 6.8rem);
      line-height: .95;
      letter-spacing: -.055em;
      font-weight: 800;
    }

    .hero-highlight {
      display: block;
      color: var(--gold-soft);
    }

    .hero-copy {
      max-width: 680px;
      margin-bottom: 30px;
      color: #d0cbc0;
      font-size: clamp(1.05rem, 1.7vw, 1.28rem);
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 13px;
    }

    .button {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      min-height: 48px;
      padding: 13px 20px;
      border-radius: 999px;
      border: 1px solid transparent;
      text-decoration: none;
      font-size: .86rem;
      font-weight: 900;
      letter-spacing: .05em;
      text-transform: uppercase;
      transition: transform .18s ease, border-color .18s ease, background .18s ease;
    }

    .button:hover,
    .button:focus-visible {
      transform: translateY(-2px);
    }

    .button-primary {
      color: #17130c;
      background: linear-gradient(135deg, var(--gold-soft), var(--gold));
    }

    .button-secondary {
      color: var(--text);
      background: rgba(255,255,255,.035);
      border-color: rgba(255,255,255,.18);
    }

    .hero-mark {
      position: relative;
      min-height: 470px;
      display: grid;
      place-items: center;
    }

    .hero-logo-shell {
      position: relative;
      width: min(100%, 450px);
      aspect-ratio: 1 / 1;
      display: grid;
      place-items: center;
      padding: 70px;
      border: 1px solid rgba(255,255,255,.13);
      border-radius: 50%;
      background:
        radial-gradient(circle, rgba(255,255,255,.08), transparent 52%),
        rgba(255,255,255,.025);
      box-shadow: var(--shadow);
    }

    .hero-logo-shell::before,
    .hero-logo-shell::after {
      content: "";
      position: absolute;
      inset: 8%;
      border-radius: 50%;
      border: 1px dashed rgba(201,168,90,.27);
    }

    .hero-logo-shell::after {
      inset: 19%;
      border-style: solid;
      border-color: rgba(87,200,255,.14);
    }

    .hero-logo-shell img {
      position: relative;
      z-index: 2;
      width: 270px;
      height: auto;
      filter: drop-shadow(0 16px 34px rgba(0,0,0,.3));
    }

    .metric-strip {
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: rgba(255,255,255,.025);
    }

    .metrics {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
    }

    .metric {
      padding: 23px 18px;
      text-align: center;
      border-right: 1px solid var(--line);
    }

    .metric:last-child { border-right: 0; }

    .metric strong {
      display: block;
      margin-bottom: 2px;
      font-family: Georgia, serif;
      font-size: 1.7rem;
      color: var(--gold-soft);
    }

    .metric span {
      color: var(--muted);
      font-size: .79rem;
      font-weight: 800;
      letter-spacing: .07em;
      text-transform: uppercase;
    }

    .section {
      padding: 105px 0;
    }

    .section-soft {
      background: linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,.008));
      border-top: 1px solid rgba(255,255,255,.04);
      border-bottom: 1px solid rgba(255,255,255,.04);
    }

    .section-head {
      max-width: 780px;
      margin: 0 auto 46px;
      text-align: center;
    }

    .section-kicker {
      margin-bottom: 11px;
      color: var(--gold-soft);
      font-size: .75rem;
      font-weight: 900;
      letter-spacing: .17em;
      text-transform: uppercase;
    }

    .section-title {
      margin-bottom: 16px;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(2.25rem, 4.8vw, 4.1rem);
      line-height: 1.03;
      letter-spacing: -.04em;
    }

    .section-intro {
      margin-bottom: 0;
      color: var(--muted);
      font-size: 1.05rem;
    }

    .rooms-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    }

    .room-card {
      position: relative;
      overflow: hidden;
      min-height: 560px;
      display: flex;
      flex-direction: column;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--panel);
      box-shadow: 0 18px 46px rgba(0,0,0,.2);
    }

    .room-card::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 5px;
      background: var(--accent);
    }

    .room-card.willy { --accent: var(--willy); }
    .room-card.londium { --accent: var(--londium); }
    .room-card.doc { --accent: linear-gradient(90deg, var(--doc), var(--doc-soft)); }

    .room-visual {
      min-height: 218px;
      display: grid;
      place-items: center;
      padding: 40px 34px 28px;
      background:
        radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--accent) 25%, transparent), transparent 60%),
        #161619;
      border-bottom: 1px solid var(--line);
    }

    .room-card.doc .room-visual {
      background:
        radial-gradient(circle at 50% 35%, rgba(25,142,234,.25), transparent 62%),
        #0d1622;
    }

    .room-visual img {
      width: 80%;
      max-height: 125px;
      object-fit: contain;
      filter: drop-shadow(0 14px 25px rgba(0,0,0,.3));
    }

    .room-body {
      display: flex;
      flex: 1;
      flex-direction: column;
      padding: 27px;
    }

    .room-labels {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 18px;
    }

    .tag {
      display: inline-flex;
      align-items: center;
      min-height: 27px;
      padding: 5px 10px;
      border: 1px solid rgba(255,255,255,.13);
      border-radius: 999px;
      color: #d9d5ca;
      background: rgba(255,255,255,.035);
      font-size: .7rem;
      font-weight: 850;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .tag-live {
      color: #cbf2d8;
      border-color: rgba(127,209,154,.35);
      background: rgba(127,209,154,.08);
    }

    .tag-soon {
      color: #b9e9ff;
      border-color: rgba(87,200,255,.38);
      background: rgba(87,200,255,.09);
    }

    .room-title {
      margin-bottom: 9px;
      font-family: Georgia, serif;
      font-size: 1.72rem;
      line-height: 1.1;
    }

    .room-copy {
      margin-bottom: 22px;
      color: var(--muted);
      font-size: .96rem;
    }

    .room-data {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 24px;
    }

    .room-data div {
      padding: 10px 12px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: rgba(255,255,255,.025);
    }

    .room-data strong {
      display: block;
      color: #fff;
      font-size: .78rem;
    }

    .room-data span {
      color: var(--muted);
      font-size: .78rem;
    }

    .room-actions {
      display: grid;
      grid-template-columns: 1fr;
      gap: 9px;
      margin-top: auto;
    }

    .room-actions .button {
      width: 100%;
      border-radius: 12px;
    }

    .room-card .button-primary {
      background: var(--accent);
      color: #111;
    }

    .room-card.doc .button-primary {
      color: #fff;
      background: linear-gradient(135deg, var(--doc), #0b63bf);
    }

    .values-grid {
      display: grid;
      grid-template-columns: .88fr 1.12fr;
      gap: 55px;
      align-items: center;
    }

    .values-copy .section-title {
      margin-bottom: 22px;
    }

    .values-copy p {
      color: var(--muted);
      font-size: 1.05rem;
    }

    .values-list {
      display: grid;
      gap: 14px;
    }

    .value-card {
      display: grid;
      grid-template-columns: 54px 1fr;
      gap: 16px;
      align-items: center;
      padding: 19px;
      border: 1px solid var(--line);
      border-radius: 17px;
      background: var(--panel);
    }

    .value-number {
      width: 54px;
      height: 54px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(201,168,90,.42);
      border-radius: 50%;
      color: var(--gold-soft);
      font-family: Georgia, serif;
      font-size: 1.25rem;
    }

    .value-card h3 {
      margin-bottom: 3px;
      font-size: 1rem;
    }

    .value-card p {
      margin-bottom: 0;
      color: var(--muted);
      font-size: .9rem;
    }

    .creators-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }

    .creator-card {
      position: relative;
      overflow: hidden;
      min-height: 320px;
      padding: 30px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background:
        linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
        var(--panel);
      box-shadow: var(--shadow);
    }

    .creator-card::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 5px;
      background: var(--creator-accent);
    }

    .creator-card.willy-team {
      --creator-accent: linear-gradient(90deg, var(--willy), var(--doc));
    }

    .creator-card.londium-team {
      --creator-accent: linear-gradient(90deg, var(--londium), var(--gold-soft));
    }

    .creator-kicker {
      margin-bottom: 12px;
      color: var(--gold-soft);
      font-size: .73rem;
      font-weight: 900;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .creator-card h3 {
      margin-bottom: 14px;
      font-family: Georgia, serif;
      font-size: 2rem;
      line-height: 1.05;
    }

    .creator-names {
      margin-bottom: 16px;
      color: #ffffff;
      font-size: 1.05rem;
      font-weight: 850;
    }

    .creator-card p {
      margin-bottom: 0;
      color: var(--muted);
    }

    .creator-projects {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 21px;
    }

    .creator-projects span {
      display: inline-flex;
      padding: 6px 10px;
      border: 1px solid rgba(255,255,255,.13);
      border-radius: 999px;
      background: rgba(255,255,255,.035);
      color: #e4dfd4;
      font-size: .72rem;
      font-weight: 850;
      letter-spacing: .05em;
      text-transform: uppercase;
    }

    .awards-section {
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at 50% 0%, rgba(201,168,90,.12), transparent 38%),
        #111114;
    }

    .awards-summary {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      max-width: 760px;
      margin: -12px auto 40px;
      border: 1px solid var(--line);
      border-radius: 16px;
      overflow: hidden;
      background: rgba(255,255,255,.025);
    }

    .awards-summary div {
      padding: 17px 12px;
      text-align: center;
      border-right: 1px solid var(--line);
    }

    .awards-summary div:last-child { border-right: 0; }

    .awards-summary strong {
      display: block;
      color: var(--gold-soft);
      font-family: Georgia, serif;
      font-size: 1.65rem;
    }

    .awards-summary span {
      color: var(--muted);
      font-size: .72rem;
      font-weight: 850;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .featured-awards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      margin-bottom: 30px;
    }

    .featured-award {
      display: grid;
      grid-template-columns: 170px 1fr;
      gap: 24px;
      min-height: 310px;
      padding: 26px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.018));
      box-shadow: var(--shadow);
    }

    .featured-award-media {
      display: grid;
      place-items: center;
      padding: 18px;
      border-radius: 17px;
      background: rgba(255,255,255,.045);
      border: 1px solid var(--line);
    }

    .featured-award-media img {
      width: 100%;
      max-height: 190px;
      object-fit: contain;
    }

    .featured-award h3 {
      margin-bottom: 6px;
      font-family: Georgia, serif;
      font-size: 1.8rem;
    }

    .featured-award .lead-award {
      margin-bottom: 16px;
      color: var(--gold-soft);
      font-weight: 900;
      line-height: 1.35;
    }

    .award-list {
      display: grid;
      gap: 8px;
      margin: 0;
      padding: 0;
      list-style: none;
      color: #dad6cb;
      font-size: .9rem;
    }

    .award-list li {
      position: relative;
      padding-left: 17px;
    }

    .award-list li::before {
      content: "•";
      position: absolute;
      left: 0;
      color: var(--gold);
    }

    .all-awards {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255,255,255,.02);
      overflow: hidden;
    }

    .all-awards > summary {
      cursor: pointer;
      list-style: none;
      padding: 22px 25px;
      text-align: center;
      color: var(--text);
      font-size: .88rem;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
      background: rgba(201,168,90,.08);
    }

    .all-awards > summary::-webkit-details-marker { display: none; }

    .all-awards > summary::after {
      content: "＋";
      margin-left: 12px;
      color: var(--gold-soft);
    }

    .all-awards[open] > summary::after { content: "−"; }

    .awards-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      padding: 20px;
      border-top: 1px solid var(--line);
    }

    .award-card {
      min-height: 250px;
      display: flex;
      flex-direction: column;
      padding: 17px;
      border: 1px solid var(--line);
      border-radius: 15px;
      background: var(--panel);
      text-align: center;
    }

    .award-card img {
      width: 100%;
      height: 126px;
      object-fit: contain;
      margin-bottom: 13px;
    }

    .award-room {
      color: var(--gold-soft);
      font-size: .72rem;
      font-weight: 900;
      letter-spacing: .09em;
      text-transform: uppercase;
    }

    .award-title {
      margin: 8px 0 4px;
      font-weight: 850;
      line-height: 1.35;
    }

    .award-year {
      margin-top: auto;
      color: var(--muted);
      font-size: .78rem;
    }

    .faq-grid {
      display: grid;
      grid-template-columns: .75fr 1.25fr;
      gap: 50px;
      align-items: start;
    }

    .faq-intro {
      position: sticky;
      top: 110px;
    }

    .faq-intro p {
      color: var(--muted);
    }

    .faq-list {
      display: grid;
      gap: 12px;
    }

    .faq-list details {
      border: 1px solid var(--line);
      border-radius: 15px;
      background: var(--panel);
      overflow: hidden;
    }

    .faq-list summary {
      cursor: pointer;
      list-style: none;
      position: relative;
      padding: 19px 52px 19px 20px;
      font-weight: 850;
    }

    .faq-list summary::-webkit-details-marker { display: none; }

    .faq-list summary::after {
      content: "＋";
      position: absolute;
      right: 20px;
      color: var(--gold-soft);
      font-size: 1.2rem;
    }

    .faq-list details[open] summary::after { content: "−"; }

    .faq-list details p {
      margin: 0;
      padding: 0 20px 20px;
      color: var(--muted);
    }

    .cta-banner {
      padding: 70px 0;
      background:
        linear-gradient(120deg, rgba(201,168,90,.18), rgba(25,142,234,.14)),
        var(--panel);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .cta-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 32px;
    }

    .cta-inner h2 {
      margin-bottom: 7px;
      font-family: Georgia, serif;
      font-size: clamp(2rem, 4vw, 3.4rem);
      line-height: 1;
    }

    .cta-inner p {
      margin-bottom: 0;
      color: #d3cec2;
    }

    .site-footer {
      padding: 55px 0 28px;
      background: #09090b;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.25fr repeat(3, .75fr);
      gap: 38px;
      padding-bottom: 36px;
      border-bottom: 1px solid var(--line);
    }

    .footer-brand img {
      width: 160px;
      margin-bottom: 16px;
    }

    .footer-brand p {
      max-width: 360px;
      color: var(--muted);
      font-size: .9rem;
    }

    .footer-col h3 {
      margin-bottom: 13px;
      color: var(--gold-soft);
      font-size: .78rem;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .footer-col a {
      display: block;
      margin: 8px 0;
      color: var(--muted);
      text-decoration: none;
      font-size: .9rem;
    }

    .footer-col a:hover,
    .footer-col a:focus-visible { color: #fff; }

    .footer-bottom {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      padding-top: 23px;
      color: #7f7c75;
      font-size: .78rem;
    }

    @media (max-width: 980px) {
      .hero { min-height: auto; }
      .hero-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 74px 0 70px;
        text-align: center;
      }
      .hero-copy { margin-inline: auto; }
      .hero-actions { justify-content: center; }
      .hero-mark { min-height: 360px; }
      .hero-logo-shell { width: 360px; padding: 58px; }

      .rooms-grid { grid-template-columns: 1fr 1fr; }
      .room-card.doc { grid-column: 1 / -1; }
      .room-card.doc .room-body { max-width: 640px; margin-inline: auto; width: 100%; }

      .values-grid,
      .faq-grid { grid-template-columns: 1fr; }

      .creators-grid { grid-template-columns: 1fr; }

      .faq-intro { position: static; }

      .featured-award {
        grid-template-columns: 135px 1fr;
        gap: 18px;
      }

      .awards-grid { grid-template-columns: repeat(2, 1fr); }

      .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; }
      .footer-col:last-child { grid-column: 2 / -1; }
    }

    @media (max-width: 760px) {
      .nav { min-height: 66px; }
      .brand img { width: 125px; }
      .menu-button { display: inline-flex; }
      .nav-links {
        display: none;
        position: absolute;
        left: 18px;
        right: 18px;
        top: 72px;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: #151518;
        box-shadow: var(--shadow);
      }
      .nav-links.open { display: flex; }
      .nav-links a {
        padding: 13px;
        border-bottom: 1px solid rgba(255,255,255,.07);
      }
      .nav-links a:last-child { border-bottom: 0; }
      .nav-cta { border: 0; border-radius: 0; }

      h1 { font-size: clamp(3rem, 16vw, 5.2rem); }
      .hero-grid { padding-top: 60px; }
      .hero-mark { min-height: 300px; }
      .hero-logo-shell { width: min(92vw, 320px); padding: 48px; }

      .metrics { grid-template-columns: 1fr 1fr; }
      .metric:nth-child(2) { border-right: 0; }
      .metric:nth-child(-n+2) { border-bottom: 1px solid var(--line); }

      .section { padding: 76px 0; }
      .rooms-grid { grid-template-columns: 1fr; }
      .room-card.doc { grid-column: auto; }
      .room-card { min-height: 0; }

      .values-grid { gap: 34px; }

      .featured-awards { grid-template-columns: 1fr; }
      .featured-award {
        grid-template-columns: 120px 1fr;
        min-height: 0;
        padding: 20px;
      }

      .awards-summary { grid-template-columns: 1fr; }
      .awards-summary div {
        border-right: 0;
        border-bottom: 1px solid var(--line);
      }
      .awards-summary div:last-child { border-bottom: 0; }

      .awards-grid { grid-template-columns: 1fr; }

      .cta-inner {
        flex-direction: column;
        text-align: center;
      }

      .footer-grid { grid-template-columns: 1fr 1fr; }
      .footer-brand { grid-column: 1 / -1; }
      .footer-col:last-child { grid-column: auto; }
    }

    @media (max-width: 520px) {
      .container { width: min(calc(100% - 24px), var(--max)); }
      .hero-actions { flex-direction: column; }
      .hero-actions .button { width: 100%; }

      .room-data { grid-template-columns: 1fr; }

      .featured-award {
        grid-template-columns: 1fr;
        text-align: center;
      }
      .featured-award-media {
        max-width: 210px;
        margin-inline: auto;
      }
      .award-list { text-align: left; }

      .footer-grid { grid-template-columns: 1fr; }
      .footer-brand,
      .footer-col:last-child { grid-column: auto; }
      .footer-bottom {
        flex-direction: column;
        text-align: center;
      }
    }


/* ================================================================
   SAGA 2.1 · FANTASÍA, AVENTURA Y MUNDOS INMERSIVOS
   Conserva la estructura y todos los textos del HTML actual.
   ================================================================ */

:root {
  --bg: #090a0d;
  --bg-soft: #111217;
  --panel: #17191f;
  --panel-2: #20232a;
  --text: #f8f4e9;
  --muted: #bbb5a9;
  --gold: #c89d4b;
  --gold-soft: #f0d99d;
  --willy: #c78e3d;
  --londium: #9f6841;
  --doc: #167fd8;
  --doc-soft: #6ddcff;
  --line: rgba(255,255,255,.105);
  --radius: 18px;
  --shadow: 0 28px 80px rgba(0,0,0,.46);
  --font-fantasy: "Cinzel", Georgia, serif;
  --font-interface: "Barlow Condensed", Arial, sans-serif;
  --font-body: "Manrope", Arial, sans-serif;
}

body {
  position: relative;
  isolation: isolate;
  font-family: var(--font-body);
  background:
    radial-gradient(circle at 8% 6%, rgba(196,139,51,.12), transparent 23%),
    radial-gradient(circle at 52% 12%, rgba(123,81,43,.08), transparent 25%),
    radial-gradient(circle at 94% 8%, rgba(22,127,216,.14), transparent 24%),
    linear-gradient(180deg,#090a0d 0%,#0d0f13 42%,#090a0d 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .24;
  background:
    radial-gradient(circle, rgba(240,217,157,.55) 0 1px, transparent 1.5px) 0 0 / 94px 94px,
    radial-gradient(circle, rgba(109,220,255,.34) 0 1px, transparent 1.5px) 42px 32px / 126px 126px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(255,255,255,.012), transparent 22%, rgba(255,255,255,.01) 45%, transparent 68%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 4px);
  opacity: .45;
}

.site-header {
  background: rgba(8,9,12,.88);
  box-shadow: 0 10px 35px rgba(0,0,0,.18);
}

.nav-links,
.button,
.metric span,
.tag,
.section-kicker,
.creator-kicker,
.award-room,
.awards-summary span,
.footer-col h3 {
  font-family: var(--font-interface);
}

h1,
.section-title,
.room-title,
.creator-card h3,
.featured-award h3,
.cta-inner h2,
.metric strong,
.awards-summary strong {
  font-family: var(--font-fantasy);
  letter-spacing: -.025em;
}

h1 {
  font-size: clamp(3.45rem, 6.8vw, 6.7rem);
  line-height: .94;
}

.section-title {
  font-size: clamp(2.35rem, 4.5vw, 4.25rem);
  line-height: 1.02;
}

/* HERO: tres universos sugeridos sin encerrar el logo en una caja */
.hero-fantasy {
  min-height: 750px;
  background:
    radial-gradient(ellipse at 17% 76%, rgba(186,119,44,.13), transparent 37%),
    radial-gradient(ellipse at 51% 18%, rgba(121,76,40,.10), transparent 31%),
    radial-gradient(ellipse at 88% 32%, rgba(27,130,219,.16), transparent 34%),
    linear-gradient(180deg, rgba(9,10,13,.30), rgba(9,10,13,.93));
}

.hero-fantasy::before {
  width: 760px;
  height: 760px;
  right: -260px;
  top: -80px;
  border: 0;
  background:
    repeating-radial-gradient(circle at center, rgba(109,220,255,.12) 0 1px, transparent 2px 48px),
    radial-gradient(circle, rgba(22,127,216,.16), transparent 67%);
  box-shadow: none;
}

.hero-fantasy::after {
  width: 640px;
  height: 640px;
  left: -280px;
  bottom: -250px;
  border: 0;
  background:
    repeating-radial-gradient(circle at center, rgba(200,157,75,.13) 0 1px, transparent 2px 58px),
    radial-gradient(circle, rgba(196,139,51,.14), transparent 68%);
  box-shadow: none;
}

.fantasy-orbit {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(.1px);
  opacity: .43;
}

.fantasy-orbit-pirate {
  left: -160px;
  top: 140px;
  width: 420px;
  height: 420px;
  background:
    conic-gradient(from 15deg, transparent 0 11%, rgba(200,157,75,.18) 12% 13%, transparent 14% 24%, rgba(200,157,75,.12) 25% 26%, transparent 27%),
    radial-gradient(circle, transparent 0 43%, rgba(200,157,75,.19) 44% 45%, transparent 46% 58%, rgba(200,157,75,.11) 59% 60%, transparent 61%);
  transform: rotate(-16deg);
}

.fantasy-orbit-steampunk {
  left: 47%;
  top: 84px;
  width: 300px;
  height: 300px;
  background:
    repeating-conic-gradient(from 0deg, rgba(143,92,49,.11) 0 7deg, transparent 7deg 18deg),
    radial-gradient(circle, transparent 0 43%, rgba(224,187,114,.12) 44% 46%, transparent 47%);
  mask: radial-gradient(circle, transparent 0 30%, #000 31% 68%, transparent 69%);
}

.fantasy-orbit-retro {
  right: -100px;
  bottom: 62px;
  width: 390px;
  height: 390px;
  border: 1px solid rgba(109,220,255,.16);
  box-shadow: 0 0 0 38px rgba(109,220,255,.018), 0 0 0 76px rgba(109,220,255,.012);
  background: repeating-linear-gradient(90deg, transparent 0 30px, rgba(109,220,255,.06) 31px, transparent 32px);
}

.hero-logo-shell {
  width: min(100%, 480px);
  aspect-ratio: auto;
  min-height: 340px;
  padding: 30px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.hero-logo-shell::before,
.hero-logo-shell::after {
  display: none;
}

.hero-logo-shell img {
  width: min(100%, 390px);
  filter:
    drop-shadow(0 24px 35px rgba(0,0,0,.55))
    drop-shadow(0 0 28px rgba(200,157,75,.13));
}

/* Banda de métricas: más narrativa y menos corporativa */
.metric-strip {
  background:
    linear-gradient(90deg, rgba(196,139,51,.045), rgba(119,75,41,.035), rgba(22,127,216,.05)),
    rgba(255,255,255,.018);
}

.metric strong {
  color: var(--gold-soft);
  text-shadow: 0 0 22px rgba(200,157,75,.16);
}

/* Las tres salas mantienen exactamente el mismo tamaño */
.rooms-grid {
  align-items: stretch;
}

.room-card {
  min-height: 590px;
  border-radius: var(--radius);
  box-shadow: 0 22px 60px rgba(0,0,0,.28);
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

.room-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow);
  border-color: rgba(255,255,255,.19);
}

.room-visual {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.room-visual::before,
.room-visual::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.room-card.willy .room-visual {
  background:
    radial-gradient(circle at 50% 38%, rgba(212,150,54,.20), transparent 51%),
    linear-gradient(160deg,#221912,#101114 70%);
}

.room-card.willy .room-visual::before {
  inset: -30%;
  background:
    conic-gradient(from 15deg, transparent 0 12%, rgba(228,188,106,.12) 13% 14%, transparent 15% 27%, rgba(228,188,106,.08) 28% 29%, transparent 30%),
    repeating-radial-gradient(circle at center, transparent 0 42px, rgba(228,188,106,.075) 43px, transparent 44px 75px);
  transform: rotate(-12deg);
}

.room-card.willy .room-visual::after {
  left: -5%;right:-5%;bottom:-28px;height:80px;
  background: radial-gradient(ellipse, rgba(129,92,52,.23), transparent 68%);
  filter: blur(12px);
}

.room-card.londium .room-visual {
  background:
    radial-gradient(circle at 50% 38%, rgba(151,101,62,.23), transparent 52%),
    linear-gradient(160deg,#201713,#101114 72%);
}

.room-card.londium .room-visual::before {
  width:300px;height:300px;right:-70px;top:-80px;border-radius:50%;
  background: repeating-conic-gradient(from 0deg, rgba(224,187,114,.12) 0 8deg, transparent 8deg 20deg);
  mask: radial-gradient(circle, transparent 0 38%, #000 39% 64%, transparent 65%);
}

.room-card.londium .room-visual::after {
  width:190px;height:190px;left:-48px;bottom:-58px;border-radius:50%;
  border:1px solid rgba(224,187,114,.15);
  box-shadow:0 0 0 22px rgba(224,187,114,.025),0 0 0 45px rgba(224,187,114,.015);
}

.room-card.doc .room-visual {
  background:
    radial-gradient(circle at 50% 35%, rgba(25,142,234,.27), transparent 54%),
    linear-gradient(160deg,#081a2a,#0c1016 74%);
}

.room-card.doc .room-visual::before {
  inset:0;
  background:
    linear-gradient(rgba(109,220,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(109,220,255,.055) 1px, transparent 1px);
  background-size:42px 42px;
  transform:perspective(350px) rotateX(58deg) scale(1.45) translateY(26%);
  transform-origin:center bottom;
}

.room-card.doc .room-visual::after {
  width:270px;height:270px;right:-95px;top:-115px;border-radius:50%;
  border:1px solid rgba(109,220,255,.17);
  box-shadow:0 0 0 28px rgba(109,220,255,.02),0 0 0 58px rgba(109,220,255,.014);
}

.room-visual img {
  position: relative;
  z-index: 2;
}

/* Filosofía SAGA: neblina de cuento y metal */
#saga {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 30%, rgba(200,157,75,.10), transparent 30%),
    radial-gradient(circle at 82% 68%, rgba(25,142,234,.08), transparent 32%),
    linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.006));
}

#saga::before {
  content:"";
  position:absolute;
  inset:-30% -10%;
  pointer-events:none;
  background: repeating-radial-gradient(ellipse at center, transparent 0 66px, rgba(240,217,157,.035) 67px, transparent 68px 118px);
  transform: rotate(-7deg);
}

.value-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.012)), var(--panel);
}

.value-card::after {
  content:"";
  position:absolute;
  right:-45px;bottom:-55px;width:120px;height:120px;border-radius:50%;
  background:rgba(200,157,75,.07);filter:blur(28px);
}

/* Creadores con atmósferas distintas */
.creator-card.willy-team {
  background:
    radial-gradient(circle at 7% 100%, rgba(196,139,51,.13), transparent 32%),
    radial-gradient(circle at 100% 0, rgba(22,127,216,.10), transparent 29%),
    linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.012)),var(--panel);
}

.creator-card.londium-team {
  background:
    radial-gradient(circle at 100% 0, rgba(159,104,65,.15), transparent 32%),
    linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.012)),var(--panel);
}

/* Premios: vitrina más mágica */
.awards-section {
  background:
    radial-gradient(circle at 50% 0, rgba(200,157,75,.15), transparent 34%),
    radial-gradient(circle at 90% 30%, rgba(25,142,234,.06), transparent 27%),
    #0f1014;
}

.awards-section::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(circle, rgba(240,217,157,.35) 0 1px, transparent 1.5px) 0 0/86px 86px;
  opacity:.20;
}

.featured-award,
.award-card,
.all-awards {
  backdrop-filter: blur(3px);
}

.featured-award-media {
  background:
    radial-gradient(circle, rgba(240,217,157,.07), transparent 67%),
    rgba(255,255,255,.025);
}

/* FAQ y CTA con profundidad */
#preguntas {
  position: relative;
  background:
    radial-gradient(circle at 85% 10%, rgba(22,127,216,.07), transparent 30%),
    radial-gradient(circle at 10% 80%, rgba(196,139,51,.06), transparent 32%);
}

.cta-banner {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 50%, rgba(196,139,51,.18), transparent 34%),
    radial-gradient(circle at 88% 50%, rgba(22,127,216,.17), transparent 35%),
    linear-gradient(120deg, rgba(139,88,45,.10), rgba(25,142,234,.08)),
    var(--panel);
}

.cta-banner::before {
  content:"";
  position:absolute;
  left:47%;top:-170px;width:360px;height:360px;border-radius:50%;
  background: repeating-conic-gradient(from 0deg, rgba(240,217,157,.07) 0 5deg, transparent 5deg 18deg);
  mask: radial-gradient(circle, transparent 0 40%, #000 41% 63%, transparent 64%);
  opacity:.55;
}

.site-footer {
  background:
    radial-gradient(circle at 10% 0, rgba(196,139,51,.07), transparent 28%),
    radial-gradient(circle at 90% 0, rgba(22,127,216,.065), transparent 28%),
    #07080a;
}

/* Animación suave */
.reveal {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.visible { opacity: 1; transform: none; }

@media (max-width: 980px) {
  .fantasy-orbit-steampunk { left: 38%; top: 32%; }
  .hero-logo-shell { min-height: 270px; }
}

@media (max-width: 760px) {
  .hero-fantasy { min-height: auto; }
  .fantasy-orbit { opacity: .25; }
  .fantasy-orbit-steampunk { display:none; }
  .hero-logo-shell { width:min(92vw,350px);min-height:220px;padding:18px; }
  .hero-logo-shell img { width:min(100%,320px); }
  .rooms-grid { grid-template-columns: 1fr; }
  .room-card.doc { grid-column:auto; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1; transform:none; transition:none; }
}


/* ===== SAGA 2.2 · Fondos cinematográficos y fantasía ===== */
body {
  font-family: 'Manrope', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #09090b;
}

.nav-links,
.button,
.menu-button,
.section-kicker,
.tag,
.metric strong,
.metric span,
.value-number,
.creator-kicker,
summary,
.footer-col h3,
.nav-cta,
.eyebrow {
  font-family: 'Barlow Condensed', sans-serif;
}

h1,
.section-title,
.room-title,
.featured-award h3,
.footer-brand strong {
  font-family: 'Cinzel', Georgia, serif;
}

.fantasy-orbit,
.hero::before,
.hero::after,
.hero-logo-shell::before,
.hero-logo-shell::after {
  display: none !important;
}

.hero.hero-fantasy {
  min-height: 760px;
  background:
    linear-gradient(90deg, rgba(7,8,11,.78) 0%, rgba(8,9,12,.58) 28%, rgba(7,9,12,.50) 52%, rgba(7,9,12,.68) 72%, rgba(7,8,11,.84) 100%),
    linear-gradient(180deg, rgba(5,6,8,.22) 0%, rgba(5,6,8,.42) 100%),
    url('../img/Fondos/fondo-hero-saga.jpg') center center / cover no-repeat;
}

.hero-grid {
  padding: 104px 0 92px;
}

.hero-copy {
  color: rgba(244,238,225,.88);
  max-width: 640px;
}

.hero-logo-shell {
  width: min(100%, 430px);
  min-height: 330px;
  background: rgba(7,8,10,.20);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 28px;
  backdrop-filter: blur(8px);
  box-shadow: 0 24px 90px rgba(0,0,0,.36);
}

.metric-strip {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(14,14,18,.96), rgba(12,12,16,.92));
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.metric-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(201,168,90,.08), rgba(201,168,90,0) 38%, rgba(25,142,234,.10) 100%),
    url('../img/Fondos/fondo-salas-saga.jpg') center center / cover no-repeat;
  opacity: .28;
}

.metric-strip .container { position: relative; z-index: 1; }

.section,
.site-footer,
.cta-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.section > .container,
.site-footer > .container,
.cta-banner > .container {
  position: relative;
  z-index: 1;
}

#salas::before,
#saga::before,
#creadores::before,
.awards-section::before,
#preguntas::before,
.cta-banner::before,
.site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 0;
  transform: scale(1.03);
}

#salas::before {
  background-image:
    linear-gradient(180deg, rgba(9,10,14,.88), rgba(9,10,14,.70) 26%, rgba(9,10,14,.78) 100%),
    linear-gradient(90deg, rgba(9,10,14,.72), rgba(9,10,14,.18) 48%, rgba(9,10,14,.72)),
    url('../img/Fondos/fondo-salas-saga.jpg');
}

#saga::before,
#creadores::before {
  background-image:
    linear-gradient(180deg, rgba(10,10,14,.92), rgba(10,10,14,.78) 28%, rgba(10,10,14,.90) 100%),
    linear-gradient(90deg, rgba(10,10,14,.76), rgba(10,10,14,.28) 45%, rgba(10,10,14,.76)),
    url('../img/Fondos/fondo-saga-universos.jpg');
}

.awards-section::before,
#preguntas::before,
.cta-banner::before,
.site-footer::before {
  background-image:
    linear-gradient(180deg, rgba(8,9,12,.94), rgba(8,9,12,.82) 32%, rgba(8,9,12,.95) 100%),
    linear-gradient(90deg, rgba(8,9,12,.80), rgba(8,9,12,.24) 50%, rgba(8,9,12,.80)),
    url('../img/Fondos/fondo-premios-saga.jpg');
}

#preguntas::before { opacity: .92; }
.cta-banner::before { opacity: .88; }
.site-footer::before { opacity: .82; }

.section-soft {
  background: transparent !important;
}

.room-card,
.value-card,
.creator-card,
.featured-award,
.award-card,
.question-card,
.footer-brand,
.footer-col,
.cta-banner .cta-wrap,
.all-awards,
.awards-summary {
  background: linear-gradient(180deg, rgba(20,20,26,.76), rgba(15,15,20,.86)) !important;
  border-color: rgba(255,255,255,.10) !important;
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 60px rgba(0,0,0,.28);
}

.room-card::before,
.creator-card::before,
.featured-award::before {
  opacity: .75;
}

.section-title,
.room-title,
.featured-award h3,
.footer-brand strong {
  letter-spacing: -.02em;
}

.section-intro,
.values-copy p,
.creator-card p,
.room-copy,
.award-list,
.question-card p,
.footer-col a,
.footer-brand p,
.hero-copy {
  text-shadow: 0 1px 0 rgba(0,0,0,.16);
}

@media (max-width: 900px) {
  .hero.hero-fantasy {
    min-height: 680px;
    background-position: 58% center;
  }

  .hero-logo-shell {
    min-height: 250px;
    width: min(100%, 320px);
  }
}

@media (max-width: 640px) {
  .hero.hero-fantasy {
    min-height: 640px;
    background:
      linear-gradient(180deg, rgba(7,8,11,.68) 0%, rgba(7,8,11,.76) 42%, rgba(7,8,11,.90) 100%),
      url('../img/Fondos/fondo-hero-saga.jpg') 56% center / cover no-repeat;
  }

  #salas::before,
  #saga::before,
  #creadores::before,
  .awards-section::before,
  #preguntas::before,
  .cta-banner::before,
  .site-footer::before {
    transform: none;
  }
}


/* ================================================================
   SAGA 2.4 · Integración final de fondos cinematográficos
   ================================================================ */

/* Logo principal libre, sin cuadrícula, marco ni tarjeta */
.hero-logo-shell {
  width: min(100%, 470px) !important;
  min-height: 330px !important;
  padding: 24px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.hero-logo-shell::before,
.hero-logo-shell::after {
  display: none !important;
}

.hero-logo-shell img {
  width: min(100%, 340px) !important;
  filter:
    drop-shadow(0 22px 34px rgba(0,0,0,.62))
    drop-shadow(0 0 26px rgba(207,170,94,.12));
}

/* HERO: caverna-taller, más espectacular pero legible */
.hero.hero-fantasy {
  min-height: 760px;
  background:
    linear-gradient(
      90deg,
      rgba(4,5,7,.91) 0%,
      rgba(5,6,8,.78) 30%,
      rgba(5,6,8,.42) 58%,
      rgba(5,6,8,.36) 72%,
      rgba(5,6,8,.64) 100%
    ),
    linear-gradient(
      180deg,
      rgba(4,5,7,.23) 0%,
      rgba(4,5,7,.22) 54%,
      rgba(4,5,7,.88) 100%
    ),
    url("../img/Fondos/fondo-hero-saga.jpg") center 54% / cover no-repeat !important;
}

.hero-grid {
  min-height: 760px;
  padding: 112px 0 98px !important;
}

.hero h1,
.hero-copy,
.hero-actions,
.eyebrow {
  text-shadow: 0 3px 18px rgba(0,0,0,.58);
}

/* Franja de datos como transición oscura entre escenarios */
.metric-strip {
  background:
    linear-gradient(90deg, rgba(9,10,13,.94), rgba(12,12,16,.86), rgba(9,10,13,.94)) !important;
}

.metric-strip::before {
  opacity: .17 !important;
  filter: saturate(.8) contrast(1.06);
}

/* EXPERIENCIAS: taller náutico realista */
#salas {
  background: #0a0b0e;
}

#salas::before {
  background-image:
    linear-gradient(
      180deg,
      rgba(7,8,11,.93) 0%,
      rgba(7,8,11,.72) 19%,
      rgba(7,8,11,.64) 50%,
      rgba(7,8,11,.88) 100%
    ),
    linear-gradient(
      90deg,
      rgba(7,8,11,.66),
      rgba(7,8,11,.26) 46%,
      rgba(7,8,11,.68)
    ),
    url("../img/Fondos/fondo-salas-saga.jpg") !important;
  background-position: center 52% !important;
}

/* Las tarjetas dejan ver el ambiente sin perder legibilidad */
#salas .room-card {
  background:
    linear-gradient(180deg, rgba(24,24,29,.76), rgba(15,16,20,.91)) !important;
  border-color: rgba(255,255,255,.13) !important;
  backdrop-filter: blur(13px) saturate(.9);
}

#salas .room-visual {
  background:
    linear-gradient(180deg, rgba(12,13,17,.54), rgba(12,13,17,.82)) !important;
}

/* QUÉ REPRESENTA SAGA: fondo sobrio, fotográfico, con espacio para texto */
#saga {
  background: #0b0c0f;
}

#saga::before {
  background-image:
    linear-gradient(
      90deg,
      rgba(8,9,12,.93) 0%,
      rgba(8,9,12,.69) 41%,
      rgba(8,9,12,.71) 64%,
      rgba(8,9,12,.93) 100%
    ),
    linear-gradient(
      180deg,
      rgba(8,9,12,.91),
      rgba(8,9,12,.68) 45%,
      rgba(8,9,12,.91)
    ),
    url("../img/Fondos/fondo-saga-universos.jpg") !important;
  background-position: center center !important;
}

/* CREADORES: mismo universo visual, distinto encuadre */
#creadores {
  background: #0a0b0e;
}

#creadores::before {
  background-image:
    linear-gradient(
      90deg,
      rgba(8,9,12,.91),
      rgba(8,9,12,.68) 35%,
      rgba(8,9,12,.70) 66%,
      rgba(8,9,12,.92)
    ),
    linear-gradient(
      180deg,
      rgba(8,9,12,.92),
      rgba(8,9,12,.61) 45%,
      rgba(8,9,12,.92)
    ),
    url("../img/Fondos/fondo-saga-universos.jpg") !important;
  background-position: center 74% !important;
}

/* PREMIOS: taller industrial cartográfico */
.awards-section {
  background: #090a0d !important;
}

.awards-section::before {
  background-image:
    linear-gradient(
      180deg,
      rgba(7,8,11,.94),
      rgba(7,8,11,.70) 25%,
      rgba(7,8,11,.76) 70%,
      rgba(7,8,11,.95)
    ),
    linear-gradient(
      90deg,
      rgba(7,8,11,.79),
      rgba(7,8,11,.30) 50%,
      rgba(7,8,11,.80)
    ),
    url("../img/Fondos/fondo-premios-saga.jpg") !important;
  background-position: center center !important;
}

.awards-section .featured-award,
.awards-section .award-card,
.awards-section .awards-summary,
.awards-section .all-awards {
  background:
    linear-gradient(180deg, rgba(22,22,27,.78), rgba(13,14,18,.92)) !important;
  backdrop-filter: blur(13px);
}

/* FAQ: ambiente oscuro calmado, sin competir con el contenido */
#preguntas {
  background: #090a0c;
}

#preguntas::before {
  background-image:
    linear-gradient(
      90deg,
      rgba(7,8,10,.95),
      rgba(7,8,10,.76) 34%,
      rgba(7,8,10,.78) 68%,
      rgba(7,8,10,.96)
    ),
    linear-gradient(
      180deg,
      rgba(7,8,10,.94),
      rgba(7,8,10,.70) 44%,
      rgba(7,8,10,.94)
    ),
    url("../img/Fondos/fondo-saga-universos.jpg") !important;
  background-position: center 38% !important;
}

#preguntas .faq-list details {
  background:
    linear-gradient(180deg, rgba(21,21,26,.80), rgba(14,15,19,.92)) !important;
  backdrop-filter: blur(12px);
}

/* CTA y footer como cierre visual del universo */
.cta-banner::before {
  background-image:
    linear-gradient(
      90deg,
      rgba(6,7,9,.94),
      rgba(6,7,9,.67) 42%,
      rgba(6,7,9,.70) 63%,
      rgba(6,7,9,.94)
    ),
    linear-gradient(180deg, rgba(6,7,9,.90), rgba(6,7,9,.82)),
    url("../img/Fondos/fondo-hero-saga.jpg") !important;
  background-position: center 76% !important;
}

.site-footer::before {
  background-image:
    linear-gradient(180deg, rgba(4,5,7,.96), rgba(4,5,7,.92)),
    url("../img/Fondos/fondo-premios-saga.jpg") !important;
  background-position: center 80% !important;
}

/* Cristal oscuro común para los bloques situados sobre imágenes */
.value-card,
.creator-card,
.featured-award,
.award-card,
.awards-summary,
.all-awards,
.faq-list details {
  border-color: rgba(255,255,255,.11) !important;
  box-shadow:
    0 24px 70px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.025);
}

/* Evita que las imágenes parezcan repetidas como un patrón */
#salas::before,
#saga::before,
#creadores::before,
.awards-section::before,
#preguntas::before,
.cta-banner::before,
.site-footer::before {
  filter: saturate(.82) contrast(1.05);
}

/* Versión móvil: encuadres específicos */
@media (max-width: 980px) {
  .hero.hero-fantasy {
    background-position: 59% center !important;
  }

  .hero-grid {
    min-height: auto;
    padding: 86px 0 78px !important;
  }

  .hero-logo-shell {
    min-height: 230px !important;
    width: min(100%, 340px) !important;
  }

  #salas::before {
    background-position: 61% center !important;
  }

  #saga::before,
  #creadores::before,
  #preguntas::before {
    background-position: 38% center !important;
  }
}

@media (max-width: 640px) {
  .hero.hero-fantasy {
    min-height: 680px;
    background:
      linear-gradient(
        180deg,
        rgba(5,6,8,.72) 0%,
        rgba(5,6,8,.72) 33%,
        rgba(5,6,8,.90) 100%
      ),
      url("../img/Fondos/fondo-hero-saga.jpg") 61% center / cover no-repeat !important;
  }

  .hero-logo-shell {
    min-height: 190px !important;
  }

  .hero-logo-shell img {
    width: min(100%, 275px) !important;
  }

  #salas::before,
  #saga::before,
  #creadores::before,
  .awards-section::before,
  #preguntas::before,
  .cta-banner::before,
  .site-footer::before {
    transform: none !important;
  }
}


/* ================================================================
   SAGA 2.5 · Logos de salas sin fondos decorativos
   y encuadres móviles corregidos
   ================================================================ */

/*
 * Los tres logotipos dejan de tener fondos temáticos individuales.
 * Ahora aparecen flotando sobre la propia tarjeta, con el mismo
 * tratamiento para Willy, Londium y El Garaje de DOC.
 */
#salas .room-visual,
#salas .room-card.willy .room-visual,
#salas .room-card.londium .room-visual,
#salas .room-card.doc .room-visual {
  min-height: 205px;
  padding: 38px 30px 28px;
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,.075);
  overflow: visible;
  isolation: auto;
}

#salas .room-visual::before,
#salas .room-visual::after,
#salas .room-card.willy .room-visual::before,
#salas .room-card.willy .room-visual::after,
#salas .room-card.londium .room-visual::before,
#salas .room-card.londium .room-visual::after,
#salas .room-card.doc .room-visual::before,
#salas .room-card.doc .room-visual::after {
  display: none !important;
  content: none !important;
}

#salas .room-visual img {
  width: min(84%, 275px);
  max-height: 132px;
  object-fit: contain;
  margin-inline: auto;
  filter:
    drop-shadow(0 16px 24px rgba(0,0,0,.48))
    drop-shadow(0 0 14px rgba(255,255,255,.035));
}

/* Mantener las tarjetas equilibradas después de eliminar los fondos */
#salas .room-card {
  min-height: 570px;
}

#salas .room-card.doc .room-visual img {
  width: min(88%, 300px);
  max-height: 142px;
}

/*
 * Encuadres móviles:
 * en pantallas estrechas se centra la parte útil de cada fotografía
 * en lugar de desplazarla excesivamente hacia un lateral.
 */
@media (max-width: 980px) {
  .hero.hero-fantasy {
    background-position: 52% center !important;
  }

  #salas::before {
    background-position: 53% center !important;
  }

  #saga::before {
    background-position: 50% center !important;
  }

  #creadores::before {
    background-position: 50% center !important;
  }

  .awards-section::before {
    background-position: 51% center !important;
  }

  #preguntas::before {
    background-position: 50% center !important;
  }

  .cta-banner::before,
  .site-footer::before {
    background-position: 50% center !important;
  }
}

@media (max-width: 760px) {
  .hero.hero-fantasy {
    background:
      linear-gradient(
        180deg,
        rgba(5,6,8,.69) 0%,
        rgba(5,6,8,.70) 34%,
        rgba(5,6,8,.91) 100%
      ),
      url("../img/Fondos/fondo-hero-saga.jpg") 52% center / cover no-repeat !important;
  }

  #salas::before {
    background-position: 54% center !important;
  }

  #saga::before,
  #creadores::before,
  #preguntas::before {
    background-position: center center !important;
  }

  .awards-section::before {
    background-position: 52% center !important;
  }

  .cta-banner::before,
  .site-footer::before {
    background-position: center center !important;
  }

  #salas .room-visual,
  #salas .room-card.willy .room-visual,
  #salas .room-card.londium .room-visual,
  #salas .room-card.doc .room-visual {
    min-height: 180px;
    padding: 30px 22px 22px;
  }

  #salas .room-visual img {
    width: min(82%, 260px);
    max-height: 118px;
  }

  #salas .room-card.doc .room-visual img {
    width: min(86%, 280px);
    max-height: 128px;
  }
}

@media (max-width: 520px) {
  .hero.hero-fantasy {
    background-position: 50% center !important;
  }

  #salas::before {
    background-position: 50% center !important;
  }

  .awards-section::before {
    background-position: 50% center !important;
  }

  #salas .room-visual,
  #salas .room-card.willy .room-visual,
  #salas .room-card.londium .room-visual,
  #salas .room-card.doc .room-visual {
    min-height: 165px;
    padding: 26px 18px 20px;
  }

  #salas .room-visual img,
  #salas .room-card.doc .room-visual img {
    width: min(86%, 250px);
    max-height: 112px;
  }
}


/* ================================================================
   SAGA 2.6 · Fondo de la llamada final
   La sección "¿Qué historia vivirás primero?" utiliza ahora
   fondo-salas-saga.jpg.
   ================================================================ */

.cta-banner::before {
  background-image:
    linear-gradient(
      90deg,
      rgba(6,7,9,.94),
      rgba(6,7,9,.67) 42%,
      rgba(6,7,9,.70) 63%,
      rgba(6,7,9,.94)
    ),
    linear-gradient(
      180deg,
      rgba(6,7,9,.90),
      rgba(6,7,9,.82)
    ),
    url("../img/Fondos/fondo-salas-saga.jpg") !important;
  background-position: center 58% !important;
}

@media (max-width: 980px) {
  .cta-banner::before {
    background-position: 52% center !important;
  }
}

@media (max-width: 640px) {
  .cta-banner::before {
    background-position: center center !important;
  }
}


/* ================================================================
   SAGA 2.7 · Corrección de fondos
   ================================================================ */

/*
 * Esta franja queda completamente limpia:
 * 3 Experiencias SAGA / 2 Salas premiadas /
 * 15+ Reconocimientos / Top 7 Mundial 2025
 */
.metric-strip {
  background: #0b0c0f !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
  border-bottom: 1px solid rgba(255,255,255,.09) !important;
}

.metric-strip::before,
.metric-strip::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

/*
 * La sección que comienza con:
 * Las experiencias / Elige cuál quieres vivir primero
 * queda también sin fotografía de fondo.
 */
#salas {
  background: #0a0b0e !important;
}

#salas::before,
#salas::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

/*
 * El fondo fondo-salas-saga.jpg se mantiene únicamente
 * en la sección final:
 * ¿Qué historia vivirás primero?
 */
.cta-banner {
  background: #08090c !important;
}

.cta-banner::before {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background-image:
    linear-gradient(
      90deg,
      rgba(6,7,9,.94),
      rgba(6,7,9,.64) 42%,
      rgba(6,7,9,.68) 63%,
      rgba(6,7,9,.94)
    ),
    linear-gradient(
      180deg,
      rgba(6,7,9,.84),
      rgba(6,7,9,.78)
    ),
    url("../img/Fondos/fondo-salas-saga.jpg") !important;
  background-position: center 58% !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
  transform: none !important;
  filter: saturate(.86) contrast(1.04) !important;
}

.cta-banner > .container {
  position: relative !important;
  z-index: 1 !important;
}

@media (max-width: 980px) {
  .cta-banner::before {
    background-position: 52% center !important;
  }
}

@media (max-width: 640px) {
  .cta-banner::before {
    background-position: center center !important;
  }
}