/* La escena del afiche se encuadra por CSS para dejar fuera sus rótulos. */
.gitana-stage {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #19080d;
}

.gitana-stage::before {
    position: absolute;
    z-index: -1;
    inset: 0 0 0 32%;
    content: "";
    background: url("portada.webp") center 56% / auto 245% no-repeat;
}

.gitana-stage::after {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: "";
    background: linear-gradient(90deg, #19080d 26%, #19080d 35%, #19080ded 42%, #19080d00 75%);
}

.gitana .gitana-header { border-bottom-color: #d8b66a55; }
.gitana-header > a:last-child { text-underline-offset: .35em; text-decoration-color: var(--gold); }
.gitana .gitana-hero { display: block; padding-block: clamp(44px, 6vw, 88px); }
.gitana-hero-copy { max-width: 530px; }
.gitana .gitana-hero h1 { font-size: clamp(56px, 7.5vw, 112px); line-height: .9; }
.gitana .gitana-hero h1 span { display: block; }
.gitana-ornament { display: flex; align-items: center; gap: 14px; max-width: 380px; margin-bottom: 18px; color: var(--gold); }
.gitana-ornament::before, .gitana-ornament::after { flex: 1; height: 1px; content: ""; background: currentColor; }
.gitana-hero-facts { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.gitana-hero-facts > * { padding: 8px 13px; border: 1px solid #d8b66a80; background: #19080d; color: #f5ebdd; }
.gitana-hero-copy .button { border-radius: 6px; font-size: 17px; }
.gitana-hero-note { color: #e8d8c6; }

.gitana .gitana-paper {
    background: #f7efe2;
    color: #301322;
    color-scheme: light;
}
.gitana-paper .eyebrow, .gitana-paper .gitana-programa summary span { color: #815716; }
.gitana-paper .gitana-programa details { border-color: #a878363f; }
.gitana .gitana-band { background: transparent; border-color: #a878363f; text-align: center; }
.gitana-band-title { margin-bottom: 32px; }
.gitana-band-title::after { display: block; width: min(220px, 50%); margin: 22px auto 0; height: 1px; background: #ad7e31; content: ""; }
.gitana-grid > div + div { border-inline-start: 1px solid #a8783666; padding-inline-start: 24px; }

@media (max-width: 860px) {
    .gitana-stage::before { inset: 0 0 auto; height: 420px; }
    .gitana-stage::after { background: linear-gradient(180deg, #19080d99, #19080d15 16%, #19080d 400px); }
    .gitana .gitana-hero { padding-top: 188px; }
}

@media (max-width: 760px) {
    .gitana-grid > div + div { border-inline-start: 0; border-block-start: 1px solid #a8783644; padding: 24px 0 0; }
}
