.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 64px 0 96px;
    background:
        radial-gradient(900px 520px at 78% 32%, rgba(46, 118, 178, 0.55), transparent 65%),
        linear-gradient(180deg, var(--acero-800) 0%, var(--acero-900) 100%);
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        repeating-linear-gradient(30deg, rgba(140, 200, 245, 0.13) 0 1px, transparent 1px 46px),
        repeating-linear-gradient(150deg, rgba(140, 200, 245, 0.13) 0 1px, transparent 1px 46px);
    -webkit-mask-image: radial-gradient(ellipse 75% 85% at 72% 45%, #000 0%, transparent 72%);
    mask-image: radial-gradient(ellipse 75% 85% at 72% 45%, #000 0%, transparent 72%);
}

.hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 14px;
    background: repeating-linear-gradient(135deg, var(--oro) 0 16px, #0b1826 16px 32px);
    border-top: 2px solid #0b1826;
}

.hero__in {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 56px;
    align-items: center;
}

.hero__copy { display: grid; justify-items: start; gap: 22px; min-width: 0; }

.hero h1 {
    margin: 0;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(2.1rem, 1.2rem + 3.4vw, 3.9rem);
    line-height: 1.04;
    letter-spacing: 0.005em;
    color: #fff;
    text-shadow: 0 3px 0 rgba(4, 12, 22, 0.6);
    text-wrap: balance;
}

.hero__lead { margin: 0; max-width: 60ch; font-size: 1.12rem; line-height: 1.6; color: #d4e5f4; }

.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__cta--center { justify-content: center; }

.facts { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0; padding: 0; list-style: none; }
.facts li { display: inline-flex; align-items: center; gap: 8px; color: var(--cielo-claro); font-weight: 700; font-size: 0.95rem; }
.facts .ic { color: var(--oro); }

.hero__shot { position: relative; margin: 0; padding: 0 0 0 28px; min-width: 0; }

.monitor {
    position: relative;
    padding: 10px;
    border: 2px solid #07131f;
    border-radius: 16px;
    background: linear-gradient(180deg, #46678a, #243f5c);
    box-shadow: 0 0 0 4px var(--oro-hondo), 0 30px 60px rgba(0, 0, 0, 0.6);
    transform: rotate(1.4deg);
}

.monitor img { display: block; width: 100%; height: auto; border-radius: 8px; background: #1b3b2a; }

.hero__steele {
    position: absolute;
    left: -6px;
    bottom: 14px;
    z-index: 2;
    width: clamp(104px, 13vw, 150px);
    height: auto;
    filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.55));
}

.hero__shot figcaption {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    justify-content: flex-end;
    margin: 22px 6px 0 0;
    font-size: 0.85rem;
    color: var(--apagado);
}

.hero__shot figcaption b { color: var(--oro-claro); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.75rem; }

.band { padding: 80px 0; }
.band--paper { background: var(--papel); color: var(--tinta); }
.band--paper .h2 { color: var(--tinta); }
.band--steel { background: linear-gradient(180deg, var(--acero-800), var(--acero-900)); }
.band--steel .h2 { color: #fff; }
.band__lead { margin: 0 0 36px; max-width: 62ch; font-size: 1.08rem; color: var(--tinta-suave); }
.band--steel .band__lead { color: var(--apagado); }

.textlink { color: #0b5489; font-weight: 800; text-underline-offset: 3px; }
.textlink:hover { color: #083a61; }

.story__in { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr); gap: 48px; align-items: center; }
.story__copy p { margin: 0 0 14px; max-width: 62ch; font-size: 1.08rem; }

.story__side {
    display: grid;
    justify-items: center;
    gap: 14px;
    margin: 0;
    padding: 22px 18px 18px;
    border: 2px solid var(--papel-borde);
    border-radius: 16px;
    background: linear-gradient(180deg, #fffaf0, var(--carta));
    box-shadow: 0 4px 0 rgba(120, 85, 30, 0.35);
}

.story__side img { width: clamp(120px, 16vw, 168px); height: auto; filter: drop-shadow(0 8px 8px rgba(40, 25, 5, 0.3)); }
.story__side figcaption { text-align: center; font-size: 0.92rem; color: var(--tinta-suave); }

.start__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }

.start__item {
    position: relative;
    padding: 26px 24px 26px;
    border: 1px solid var(--linea);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
}

.start__n {
    display: block;
    margin-bottom: 10px;
    font-family: var(--f-display);
    font-size: 3rem;
    line-height: 1;
    color: var(--oro);
    text-shadow: 0 3px 0 rgba(4, 12, 22, 0.55);
}

.start__item h3 { margin: 0 0 8px; font-family: var(--f-display); font-size: 1.25rem; line-height: 1.2; color: #fff; }
.start__item p { margin: 0; color: #c8dcee; }
.start__more { margin: 32px 0 0; }

.play__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; counter-reset: step; }

.play__item {
    position: relative;
    display: grid;
    align-content: start;
    gap: 6px;
    padding: 18px 16px 20px;
    border: 2px solid var(--papel-borde);
    border-radius: 16px;
    background: linear-gradient(180deg, #fffaf0, var(--carta));
    box-shadow: 0 4px 0 rgba(120, 85, 30, 0.35);
}

.plot { display: grid; place-items: end center; height: 132px; margin: 0 0 6px; }
.plot img { width: auto; height: auto; max-width: 92%; max-height: 124px; object-fit: contain; filter: drop-shadow(0 8px 6px rgba(40, 25, 5, 0.28)); }

.play__n {
    position: absolute;
    top: 12px;
    left: 12px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 2px solid var(--oro-borde);
    border-radius: 50%;
    background: linear-gradient(180deg, var(--oro-claro), var(--oro));
    color: #3a2300;
    font-family: var(--f-display);
    font-size: 1.05rem;
    line-height: 1;
}

.play__item h3 { margin: 0; font-family: var(--f-display); font-size: 1.12rem; line-height: 1.2; color: var(--tinta); }
.play__item p { margin: 0; font-size: 0.93rem; line-height: 1.5; color: var(--tinta-suave); }

.res__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }

.res__list li {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 16px;
    row-gap: 2px;
    align-items: center;
    padding: 16px 18px;
    border: 1px solid var(--linea);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
}

.res__list img { grid-row: 1 / 3; width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.45)); }
.res__list b { align-self: end; font-family: var(--f-display); font-size: 1.1rem; letter-spacing: 0.02em; color: #fff; text-transform: uppercase; }
.res__list span { align-self: start; font-size: 0.9rem; line-height: 1.45; color: #c1d6e8; }

.isl__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }

.isl__item {
    display: grid;
    align-content: start;
    gap: 6px;
    padding: 16px 16px 20px;
    border: 2px solid var(--papel-borde);
    border-radius: 16px;
    background: linear-gradient(180deg, #fffaf0, var(--carta));
    box-shadow: 0 4px 0 rgba(120, 85, 30, 0.35);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.isl__item:hover { transform: translateY(-4px); box-shadow: 0 8px 0 rgba(120, 85, 30, 0.35); }
.isl__item h3 { margin: 0; font-family: var(--f-display); font-size: 1.1rem; line-height: 1.2; color: var(--tinta); }
.isl__item p { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--tinta-suave); }

.info__in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }

.info__card {
    padding: 30px 30px 26px;
    border: 1px solid var(--linea);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
}

.info__card p { margin: 0 0 12px; color: #cfe1f1; }
.info__card--beta { border-color: rgba(245, 184, 46, 0.5); background: linear-gradient(180deg, rgba(245, 184, 46, 0.14), rgba(245, 184, 46, 0.04)); }
.info__brand { margin-top: 18px !important; padding-top: 14px; border-top: 1px solid var(--linea); font-size: 0.88rem; color: var(--apagado) !important; }

.badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }

.badges li {
    padding: 5px 12px;
    border: 1px solid rgba(245, 184, 46, 0.55);
    border-radius: 999px;
    background: rgba(245, 184, 46, 0.12);
    color: var(--oro-claro);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.final {
    position: relative;
    padding: 72px 0 80px;
    text-align: center;
    background:
        radial-gradient(700px 300px at 50% 0%, rgba(245, 184, 46, 0.18), transparent 70%),
        var(--acero-950);
    border-top: 14px solid transparent;
    border-image: repeating-linear-gradient(135deg, var(--oro) 0 16px, #0b1826 16px 32px) 14;
}

.final .h2 { color: #fff; }
.final p { margin: 0 auto 28px; max-width: 52ch; color: #c8dcee; font-size: 1.1rem; }

@media (max-width: 1100px) {
    .hero__in { gap: 36px; }
    .play__list { display: flex; flex-wrap: wrap; justify-content: center; }
    .play__item { flex: 0 1 calc(33.333% - 12px); min-width: 0; }
    .isl__grid { display: flex; flex-wrap: wrap; justify-content: center; }
    .isl__item { flex: 0 1 calc(33.333% - 12px); min-width: 0; }
}

@media (max-width: 900px) {
    .hero { padding: 40px 0 72px; }
    .hero__in { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .hero__shot { max-width: 620px; padding-left: 20px; }
    .story__in { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .story__side { max-width: 460px; grid-auto-flow: column; justify-content: start; justify-items: start; align-items: center; }
    .story__side img { width: 96px; }
    .start__list { grid-template-columns: minmax(0, 1fr); }
    .res__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .isl__item { flex-basis: calc(50% - 9px); }
    .info__in { grid-template-columns: minmax(0, 1fr); }
    .band { padding: 60px 0; }
}

@media (max-width: 640px) {
    .play__list { display: grid; grid-template-columns: minmax(0, 1fr); }
    .play__item { grid-template-columns: 112px minmax(0, 1fr); column-gap: 14px; padding: 14px; }
    .play__item .plot { grid-row: 1 / 4; height: 96px; margin: 0; align-self: center; }
    .play__item .plot img { max-height: 90px; }
    .play__n { top: 8px; left: 8px; width: 28px; height: 28px; font-size: 0.9rem; }
    .play__item h3, .play__item p { grid-column: 2; }
    .res__list { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 520px) {
    .hero h1 { font-size: 2rem; }
    .hero__lead { font-size: 1.02rem; }
    .hero__cta .btn { width: 100%; }
    .hero__shot { padding-left: 0; }
    .hero__steele { left: -4px; width: 92px; bottom: 36px; }
    .hero__shot figcaption { margin-left: 0; }
    .isl__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
    .isl__item { grid-template-columns: 110px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 12px; }
    .isl__item .plot { grid-row: 1 / 3; height: 88px; margin: 0; }
    .isl__item .plot img { max-height: 84px; }
    .isl__item h3, .isl__item p { grid-column: 2; }
    .story__side { grid-auto-flow: row; justify-items: center; }
    .info__card { padding: 22px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .isl__item, .isl__item:hover { transition: none; transform: none; }
}