:root {
    --gold:#e5ad3c;

    --gold2:#f2c861;

    --cream:#f4efe7;

    --black:#050505;

    --muted:rgba(244,239,231,.66);

    --line:rgba(255,255,255,.11);

    --max:1380px;
}

* {
    box-sizing:border-box;
}

html {
    scroll-behavior:smooth;

    background:var(--black);
}

body {
    margin:0;

    background:var(--black);

    color:var(--cream);

    font-family:Arial,Helvetica,sans-serif;

    overflow-x:hidden;
}

a {
    color:inherit;
}

img {
    max-width:100%;
}

.section-shell {
    width:min(var(--max),88vw);

    margin:auto;
}

.section-dark {
    background:#050505;

    position:relative;
}

/* =========================================
   HEADER / NAVEGACIÓN
   ========================================= */
.site-header {
    position:fixed;

    z-index:100;

    top:0;

    left:0;

    right:0;

    height:82px;

    padding:0 38px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    background:linear-gradient(180deg,rgba(0,0,0,.75),transparent);

    transition:.35s;
}

.site-header.scrolled {
    height:68px;

    background:rgba(4,4,4,.92);

    backdrop-filter:blur(16px);

    border-bottom:1px solid rgba(255,255,255,.08);
}

.brand {
    text-decoration:none;

    display:flex;

    flex-direction:column;

    line-height:1;
}

.brand-name {
    font-family:Georgia,serif;

    font-size:23px;

    letter-spacing:2px;

    color:#f2cf79;

    font-weight:700;
}

.brand-sub {
    font-size:7px;

    letter-spacing:4px;

    margin-top:6px;

    color:rgba(255,255,255,.6);
}

.main-nav {
    display:flex;

    gap:30px;

    align-items:center;

    margin-left:auto;

    margin-right:30px;
}

.nav-link {
    position:relative;

    text-decoration:none;

    color:rgba(255,255,255,.78);

    font-size:10px;

    letter-spacing:2.1px;
}

.nav-link:after {
    content:"";

    position:absolute;

    left:0;

    bottom:-10px;

    width:0;

    height:1px;

    background:var(--gold2);

    transition:.25s;
}

.nav-link:hover,.nav-link.active {
    color:#fff;
}

.nav-link.active:after,.nav-link:hover:after {
    width:100%;
}

.language-switch {
    display:flex;

    gap:7px;

    align-items:center;

    font-size:9px;

    letter-spacing:1.5px;

    color:rgba(255,255,255,.42);
}

.lang {
    border:0;

    background:none;

    color:inherit;

    padding:4px;

    cursor:pointer;

    font-size:9px;

    letter-spacing:1.5px;
}

.lang.active {
    color:var(--gold2);
}

.menu-toggle {
    display:none;

    border:0;

    background:none;

    width:42px;

    height:42px;

    padding:8px;
}

.menu-toggle span {
    display:block;

    height:1px;

    background:#fff;

    margin:6px 0;

    transition:.25s;
}

/* =========================================
   HERO PRINCIPAL
   ========================================= */
.hero {
    position:relative;

    min-height:100svh;

    overflow:hidden;

    background:#050505;
}

.hero-shade {
    position:absolute;

    inset:0;

    background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.04) 48%,rgba(0,0,0,.55)),radial-gradient(circle at 50% 45%,transparent 34%,rgba(0,0,0,.3) 100%);
}

.hero-bottom-fade {
    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:27%;

    background:linear-gradient(transparent,#050505);
}

.hero-media {
    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;
}

.hero-media img {
    width:100%;

    height:100%;

    object-fit:contain;

    display:block;
}

.notes-layer {
    position:absolute;

    inset:0;

    z-index:5;

    overflow:hidden;

    pointer-events:none;
}

.note {
    position:absolute;

    top:-10vh;

    font-family:Georgia,serif;

    font-weight:700;

    line-height:1;

    filter:drop-shadow(0 0 6px currentColor);

    will-change:transform,opacity;
}

.note.green {
    color:#2be56c;
}

.note.yellow {
    color:#ffd22e;
}

.note.red {
    color:#ff3d3d;
}

.hero-ui {
    position:absolute;

    z-index:8;

    bottom:72px;

    left:0;

    right:0;

    display:flex;

    flex-direction:column;

    align-items:center;
}

.hero-location {
    font-size:11px;

    letter-spacing:5px;

    margin-bottom:20px;

    color:rgba(255,255,255,.92);
}

.hero-cta,.outline-cta {
    display:inline-flex;

    gap:18px;

    align-items:center;

    text-decoration:none;

    border:1px solid rgba(255,215,125,.78);

    border-radius:999px;

    padding:14px 25px;

    background:rgba(0,0,0,.25);

    backdrop-filter:blur(9px);

    font-size:10px;

    letter-spacing:2.8px;

    transition:.3s;
}

.hero-cta:hover,.outline-cta:hover {
    background:rgba(0,0,0,.6);

    transform:translateY(-2px);
}

.hero-cta span,.outline-cta span {
    color:var(--gold2);
}

.hero-side-note {
    position:absolute;

    z-index:7;

    right:25px;

    top:50%;

    writing-mode:vertical-rl;

    transform:translateY(-50%);

    font-size:9px;

    letter-spacing:5px;

    color:rgba(255,255,255,.7);
}

.hero-scroll {
    position:absolute;

    z-index:8;

    bottom:33px;

    left:40px;

    display:flex;

    gap:11px;

    align-items:center;

    color:rgba(255,255,255,.7);

    font-size:8px;

    letter-spacing:3px;
}

.hero-scroll i {
    display:block;

    width:45px;

    height:1px;

    background:rgba(255,255,255,.4);
}

.sound-control {
    position:absolute;

    z-index:10;

    right:34px;

    bottom:28px;

    border:1px solid rgba(255,211,106,.45);

    border-radius:999px;

    background:rgba(0,0,0,.3);

    color:#fff;

    padding:10px 14px;

    font-size:9px;

    letter-spacing:2px;

    cursor:pointer;

    backdrop-filter:blur(9px);
}

.sound-icon {
    color:var(--gold2);

    font-size:15px;

    margin-right:7px;
}

/* =========================================
   MANIFIESTO
   ========================================= */
.manifesto {
    padding:150px 0 120px;
}

.manifesto-grid {
    display:grid;

    grid-template-columns:1.05fr .95fr;

    gap:100px;

    align-items:center;
}

.eyebrow {
    font-size:10px;

    letter-spacing:4px;

    color:var(--gold2);

    font-weight:700;
}

.eyebrow span {
    margin-right:12px;

    color:rgba(255,255,255,.38);
}

.gold-line {
    width:72px;

    height:1px;

    background:var(--gold2);

    margin:25px 0;
}

.micro-title {
    font-size:10px;

    letter-spacing:5px;

    color:rgba(255,255,255,.48);

    margin:0 0 25px;
}

.manifesto-copy h1 {
    font-family:Georgia,serif;

    font-size:clamp(56px,5.7vw,88px);

    font-weight:400;

    line-height:.96;

    margin:0 0 34px;

    letter-spacing:-2px;
}

.manifesto-copy h1 em {
    font-style:normal;

    color:var(--gold2);
}

.lead {
    font-size:21px;

    line-height:1.65;

    color:#f3eee7;

    max-width:760px;
}

.copy {
    font-size:15px;

    line-height:1.8;

    color:var(--muted);

    max-width:690px;
}

.text-link {
    display:inline-flex;

    gap:20px;

    margin-top:28px;

    text-decoration:none;

    font-size:10px;

    letter-spacing:2.6px;

    color:#fff;
}

.text-link span {
    color:var(--gold2);
}

.manifesto-brand {
    min-height:470px;

    border:1px solid rgba(255,255,255,.09);

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    padding:55px;

    background:radial-gradient(circle at 50% 40%,rgba(211,154,37,.12),transparent 45%),#080808;
}

.manifesto-brand img {
    width:min(560px,90%);

    filter:drop-shadow(0 25px 35px rgba(0,0,0,.6));
}

.brand-rule {
    height:1px;

    width:110px;

    background:var(--gold2);

    margin:28px 0;
}

.manifesto-brand p {
    font-size:9px;

    letter-spacing:4px;

    color:rgba(255,255,255,.55);
}

.manifesto-brand b {
    color:var(--gold2);

    font-weight:400;

    margin:0 8px;
}

.territories {
    margin-top:120px;

    padding-top:70px;

    border-top:1px solid var(--line);

    display:grid;

    grid-template-columns:.7fr 1.3fr;

    gap:90px;
}

.territory-title h2 {
    font-family:Georgia,serif;

    font-weight:400;

    font-size:clamp(48px,4.6vw,70px);

    line-height:.98;

    margin:18px 0;
}

.territory-title h2 em {
    font-style:normal;

    color:var(--gold2);
}

.territory-grid {
    display:grid;

    grid-template-columns:1fr 1fr;

    border-top:1px solid rgba(255,255,255,.1);
}

.territory-grid article {
    padding:34px 24px 38px;

    border-bottom:1px solid rgba(255,255,255,.1);
}

.territory-grid article:nth-child(odd) {
    border-right:1px solid rgba(255,255,255,.1);
}

.territory-grid span {
    font-size:10px;

    color:var(--gold2);

    letter-spacing:3px;
}

.territory-grid h3 {
    font-size:16px;

    letter-spacing:4px;

    margin:13px 0 9px;
}

.territory-grid p {
    font-size:14px;

    line-height:1.65;

    color:var(--muted);

    margin:0;
}

/* =========================================
   EXPERIENCIA
   ========================================= */
.experience {
    padding:150px 0;
}

.section-heading {
    max-width:850px;

    margin-bottom:70px;
}

.section-heading h2 {
    font-family:Georgia,serif;

    font-weight:400;

    font-size:clamp(62px,7vw,112px);

    line-height:.88;

    margin:20px 0 30px;
}

.section-heading h2 em {
    font-style:normal;

    color:var(--gold2);
}

.section-heading p {
    font-size:18px;

    line-height:1.75;

    color:var(--muted);

    max-width:680px;
}

.experience-grid {
    display:grid;

    grid-template-columns:1.35fr 1fr 1fr;

    grid-template-rows:340px 340px;

    gap:15px;
}

.experience-card {
    position:relative;

    overflow:hidden;

    min-height:280px;

    border:1px solid rgba(255,255,255,.1);

    background:#0b0b0b;
}

.experience-card.card-main {
    grid-row:1/3;
}

.card-image,.food-image {
    position:absolute;

    inset:0;

    background-position:center;

    background-size:cover;

    transition:transform .8s ease;
}

.card-music {
    background-image:url('../hero/baqora-2027-hero.webp');
}

.card-culture {
    background-image:url('../images/barranquilla-generated.webp');

    background-position:center 62%;
}

.card-city {
    background-image:url('../images/barranquilla-generated.webp');

    background-position:center 42%;
}

.food-image {
    background:linear-gradient(135deg,#2a1b0c,#0c0a08);
}

.experience-card:hover .card-image,.experience-card:hover .food-image {
    transform:scale(1.04);
}

.card-overlay {
    position:absolute;

    inset:0;

    background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.88));
}

.card-content {
    position:absolute;

    left:28px;

    right:28px;

    bottom:27px;
}

.card-content span {
    font-size:9px;

    letter-spacing:3px;

    color:var(--gold2);
}

.card-content h3 {
    font-size:25px;

    letter-spacing:4px;

    margin:9px 0;
}

.card-content p {
    font-size:13px;

    color:rgba(255,255,255,.72);

    margin:0;

    line-height:1.55;
}

.food-card {
    background:radial-gradient(circle at 72% 25%,rgba(242,200,97,.15),transparent 30%),#0b0907;
}

.food-quote {
    position:absolute;

    left:30px;

    right:30px;

    top:35px;

    font-family:Georgia,serif;

    font-size:26px;

    line-height:1.15;

    color:#f3e6c8;

    z-index:3;
}

.flag-row {
    position:absolute;

    z-index:3;

    left:30px;

    top:132px;

    display:flex;

    gap:7px;

    flex-wrap:wrap;

    max-width:280px;
}

.flag-row span {
    font-size:20px;

    filter:saturate(.85);
}

/* =========================================
   BARRANQUILLA
   ========================================= */
.barranquilla {
    position:relative;

    min-height:100svh;

    display:flex;

    align-items:center;

    overflow:hidden;
}

.city-image {
    position:absolute;

    inset:0;

    background:url('../images/barranquilla-generated.webp') center/cover no-repeat;

    transform:scale(1.02);
}

.city-overlay {
    position:absolute;

    inset:0;

    background:linear-gradient(90deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.6) 42%,rgba(0,0,0,.15) 100%),linear-gradient(0deg,rgba(0,0,0,.62),transparent 50%);
}

.city-watermark {
    position:absolute;

    z-index:1;

    right:-2vw;

    bottom:-2vw;

    font-family:Georgia,serif;

    font-size:clamp(90px,17vw,250px);

    font-weight:700;

    letter-spacing:-8px;

    color:rgba(255,255,255,.075);

    white-space:nowrap;
}

.city-content {
    position:relative;

    z-index:3;

    padding:190px 0;

    width:min(var(--max),88vw);
}

.city-content h2 {
    font-family:Georgia,serif;

    font-size:clamp(74px,10vw,155px);

    line-height:.83;

    font-weight:400;

    letter-spacing:-4px;

    margin:25px 0;
}

.city-content h2 em {
    font-style:normal;

    color:var(--gold2);
}

.city-content p {
    font-size:27px;

    color:#fff;

    max-width:700px;
}

.city-divider {
    height:1px;

    width:130px;

    background:var(--gold2);

    margin:38px 0;
}

.city-tags {
    display:flex;

    gap:14px;

    flex-wrap:wrap;
}

.city-tags span {
    font-size:10px;

    letter-spacing:3px;

    border:1px solid rgba(255,255,255,.3);

    padding:11px 14px;

    background:rgba(0,0,0,.25);

    backdrop-filter:blur(6px);
}

.city-caption {
    position:absolute;

    right:38px;

    bottom:35px;

    z-index:4;

    font-size:10px;

    letter-spacing:4px;

    color:rgba(255,255,255,.72);
}

/* =========================================
   RAÍCES
   ========================================= */
.roots {
    padding:150px 0;

    background:#080706;
}

.roots-grid {
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:110px;

    align-items:center;
}

.roots-photo {
    min-height:520px;

    border:1px solid rgba(255,255,255,.1);

    padding:45px;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    background:linear-gradient(140deg,rgba(242,200,97,.08),transparent 45%),url('../images/barranquilla-generated2.webp') center/cover;

    position:relative;

    overflow:hidden;
}

.roots-photo:after {
    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.86));
}

.roots-number,.roots-big,.roots-line,.roots-small {
    position:relative;

    z-index:2;
}

.roots-number {
    font-size:11px;

    color:var(--gold2);

    letter-spacing:4px;

    margin-bottom:auto;
}

.roots-big {
    font-family:Georgia,serif;

    font-size:clamp(54px,6vw,94px);

    line-height:.84;

    letter-spacing:-3px;
}

.roots-big em {
    font-style:normal;

    color:var(--gold2);
}

.roots-line {
    width:110px;

    height:1px;

    background:var(--gold2);

    margin:28px 0 16px;
}

.roots-small {
    font-size:9px;

    letter-spacing:4px;

    color:rgba(255,255,255,.6);
}

.roots-copy h2 {
    font-family:Georgia,serif;

    font-size:clamp(64px,7vw,110px);

    line-height:.87;

    font-weight:400;

    margin:22px 0 30px;
}

.roots-copy h2 em {
    font-style:normal;

    color:var(--gold2);
}

/* =========================================
   AÑO / EDICIÓN
   ========================================= */
.year {
    position:relative;

    min-height:94svh;

    display:grid;

    place-items:center;

    overflow:hidden;

    background:#030303;
}

.year-backdrop {
    position:absolute;

    inset:-5%;

    background:url('../hero/baqora-2027-hero.webp') center/cover no-repeat;

    filter:blur(2px) saturate(.75);

    opacity:.32;

    transform:scale(1.06);
}

.year:after {
    content:"";

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.5);
}

.year-content {
    position:relative;

    z-index:2;

    text-align:center;
}

.year-number {
    font-family:Georgia,serif;

    font-size:clamp(150px,25vw,390px);

    line-height:.8;

    color:#f0cf7b;

    letter-spacing:-12px;

    margin:35px 0;
}

.year-place {
    font-size:13px;

    letter-spacing:7px;
}

.year-content p {
    font-size:18px;

    color:rgba(255,255,255,.75);

    margin:24px 0 35px;
}

/* =========================================
   CONTACTO
   ========================================= */
.contact {
    padding:145px 0 130px;
}

.contact-inner {
    text-align:center;
}

.contact-logo {
    width:min(520px,80vw);

    margin:55px auto 28px;

    filter:drop-shadow(0 20px 35px rgba(0,0,0,.6));
}

.contact-inner h2 {
    font-family:Georgia,serif;

    font-size:clamp(38px,5vw,70px);

    font-weight:400;

    margin:15px 0;
}

.contact-inner p {
    font-size:16px;

    color:var(--muted);

    max-width:650px;

    margin:0 auto;

    line-height:1.8;
}

.contact-rule {
    height:1px;

    background:var(--gold2);

    width:120px;

    margin:40px auto 25px;
}

.contact-place {
    font-size:11px;

    letter-spacing:5px;

    color:rgba(255,255,255,.62);
}

/* =========================================
   FOOTER
   ========================================= */
.site-footer {
    position:relative;

    z-index:10;

    background:#020202;

    border-top:1px solid rgba(242,200,97,.32);

    min-height:110px;

    padding:34px 42px;

    display:grid;

    grid-template-columns:1fr auto auto auto;

    align-items:center;

    gap:40px;

    color:rgba(255,255,255,.62);

    font-size:10px;

    letter-spacing:2.4px;
}

.site-footer strong {
    display:block;

    color:#f0cf7b;

    font-family:Georgia,serif;

    font-size:20px;

    letter-spacing:3px;
}

.site-footer div:first-child span {
    display:block;

    font-size:7px;

    letter-spacing:4px;

    margin-top:5px;

    color:rgba(255,255,255,.4);
}

.reveal {
    opacity:0;

    transform:translateY(35px);

    transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1);
}

.reveal.visible {
    opacity:1;

    transform:none;
}

/* =========================================
   RESPONSIVE — TABLET
   ========================================= */
@media(max-width:1000px) {
    .site-header {
        padding:0 22px;

        height:72px;
    }

    .main-nav {
        position:fixed;

        left:0;

        right:0;

        top:72px;

        display:flex;

        flex-direction:column;

        align-items:flex-start;

        gap:0;

        padding:15px 22px 24px;

        background:rgba(3,3,3,.97);

        backdrop-filter:blur(18px);

        transform:translateY(-120%);

        opacity:0;

        transition:.35s;

        border-bottom:1px solid rgba(255,255,255,.08);

        margin:0;
    }

    .main-nav.open {
        transform:none;

        opacity:1;
    }

    .nav-link {
        width:100%;

        padding:16px 0;
    }

    .language-switch {
        margin-left:auto;

        margin-right:15px;
    }

    .menu-toggle {
        display:block;
    }

    .menu-toggle.active span:nth-child(1) {
        transform:translateY(7px) rotate(45deg);
    }

    .menu-toggle.active span:nth-child(2) {
        opacity:0;
    }

    .menu-toggle.active span:nth-child(3) {
        transform:translateY(-7px) rotate(-45deg);
    }

    .manifesto-grid,.territories,.roots-grid {
        grid-template-columns:1fr;

        gap:65px;
    }

    .manifesto-brand {
        min-height:400px;
    }

    .territories {
        margin-top:90px;
    }

    .experience-grid {
        grid-template-columns:1fr 1fr;

        grid-template-rows:390px 300px 300px;
    }

    .experience-card.card-main {
        grid-row:1/2;

        grid-column:1/3;
    }

    .barranquilla {
        min-height:90svh;
    }

    .city-content {
        padding:150px 0;
    }

    .roots-photo {
        min-height:420px;
    }
}

/* =========================================
   RESPONSIVE — MÓVIL
   ========================================= */
@media(max-width:650px) {
    .brand-name {
        font-size:18px;
    }

    .brand-sub {
        font-size:6px;
    }

    .main-nav {
        top:64px;
    }

    .language-switch {
        font-size:8px;
    }

    .lang {
        font-size:8px;
    }

    .hero-location {
        font-size:9px;

        letter-spacing:3px;

        text-align:center;
    }

    .hero-ui {
        bottom:68px;
    }

    .hero-side-note,.hero-scroll {
        display:none;
    }

    .sound-control {
        right:16px;

        bottom:18px;
    }

    .manifesto {
        padding:110px 0 90px;
    }

    .section-shell {
        width:88vw;
    }

    .manifesto-copy h1 {
        font-size:48px;
    }

    .lead {
        font-size:18px;
    }

    .copy {
        font-size:14px;
    }

    .manifesto-brand {
        min-height:320px;

        padding:35px;
    }

    .manifesto-brand p {
        font-size:7px;

        letter-spacing:2px;

        text-align:center;
    }

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

    .territory-grid article:nth-child(odd) {
        border-right:0;
    }

    .territories {
        gap:35px;
    }

    .experience {
        padding:110px 0;
    }

    .section-heading h2 {
        font-size:62px;
    }

    .experience-grid {
        grid-template-columns:1fr;

        grid-template-rows:390px 270px 270px 320px;
    }

    .experience-card.card-main {
        grid-row:auto;

        grid-column:auto;
    }

    .food-quote {
        font-size:24px;
    }

    .flag-row {
        top:125px;
    }

    .city-content {
        padding:140px 0;
    }

    .city-content h2 {
        font-size:68px;

        letter-spacing:-2px;
    }

    .city-content p {
        font-size:20px;
    }

    .city-watermark {
        font-size:24vw;

        right:-5vw;
    }

    .city-caption {
        right:20px;

        font-size:8px;
    }

    .roots {
        padding:105px 0;
    }

    .roots-grid {
        gap:55px;
    }

    .roots-photo {
        min-height:390px;

        padding:28px;
    }

    .roots-big {
        font-size:58px;
    }

    .year-number {
        font-size:34vw;

        letter-spacing:-4px;
    }

    .year-place {
        font-size:9px;

        letter-spacing:4px;
    }

    .contact {
        padding:105px 0 90px;
    }

    .contact-place {
        font-size:8px;

        letter-spacing:3px;
    }

    .site-footer {
        grid-template-columns:1fr 1fr;

        gap:22px;

        padding:30px 22px;

        font-size:9px;

        line-height:1.5;
    }

    .site-footer strong {
        font-size:18px;
    }
}
/* =========================================================
   EXPERIENCE
   ========================================================= */

.experience {

    padding: 150px 0;

}



/* =========================================================
   EXPERIENCE HEADER
   ========================================================= */

.section-heading {

    max-width: 850px;

    margin-bottom: 70px;

}


.section-heading h2 {

    font-family: Georgia, serif;

    font-weight: 400;

    font-size: clamp(62px, 7vw, 112px);

    line-height: 0.88;

    margin: 20px 0 30px;

}


.section-heading h2 em {

    font-style: normal;

    color: var(--gold2);

}


.section-heading p {

    font-size: 18px;

    line-height: 1.75;

    color: var(--muted);

    max-width: 680px;

}



/* =========================================================
   EXPERIENCE GRID
   ========================================================= */

.experience-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    grid-template-rows:
        340px
        340px;

    gap: 15px;

    transition:
        grid-template-columns 0.9s cubic-bezier(.2,.7,.2,1),
        grid-template-rows 0.9s cubic-bezier(.2,.7,.2,1);

}



/* =========================================================
   TARJETAS
   ========================================================= */

.experience-card {

    position: relative;

    overflow: hidden;

    min-height: 280px;

    border: 1px solid rgba(255,255,255,.10);

    background: #0b0b0b;

    cursor: pointer;

    outline: none;

}



/* =========================================================
   POSICIÓN MÚSICA ABIERTA
   ========================================================= */

.experience-active-music .card-music {

    grid-area:
        1 / 1 / 3 / 3;

}


.experience-active-music .card-culture {

    grid-area:
        1 / 3 / 2 / 4;

}


.experience-active-music .card-city {

    grid-area:
        1 / 4 / 2 / 5;

}


.experience-active-music .food-card {

    grid-area:
        2 / 3 / 3 / 5;

}



/* =========================================================
   POSICIÓN CULTURA ABIERTA
   ========================================================= */

.experience-active-culture .card-music {

    grid-area:
        1 / 1 / 2 / 2;

}


.experience-active-culture .card-culture {

    grid-area:
        1 / 2 / 3 / 4;

}


.experience-active-culture .card-city {

    grid-area:
        1 / 4 / 2 / 5;

}


.experience-active-culture .food-card {

    grid-area:
        2 / 4 / 3 / 5;

}



/* =========================================================
   POSICIÓN CIUDAD ABIERTA
   ========================================================= */

.experience-active-city .card-music {

    grid-area:
        1 / 1 / 2 / 2;

}


.experience-active-city .card-culture {

    grid-area:
        1 / 2 / 2 / 3;

}


.experience-active-city .card-city {

    grid-area:
        1 / 3 / 3 / 5;

}


.experience-active-city .food-card {

    grid-area:
        2 / 1 / 3 / 3;

}



/* =========================================================
   POSICIÓN GASTRONOMÍA ABIERTA
   ========================================================= */

.experience-active-food .card-music {

    grid-area:
        1 / 1 / 2 / 2;

}


.experience-active-food .card-food {

    grid-area:
        1 / 2 / 3 / 4;

}


.experience-active-food .card-culture {

    grid-area:
        1 / 4 / 3 / 5;

}


.experience-active-food .card-city {

    grid-area:
        2 / 1 / 3 / 2;

}



/* =========================================================
   IMÁGENES
   ========================================================= */

.card-image {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    display: block;

    transform:
        scale(1);

    transition:
        transform 1s cubic-bezier(.2,.7,.2,1);

}



/* =========================================================
   ZOOM DE IMAGEN
   ========================================================= */

.experience-card:hover .card-image {

    transform:
        scale(1.045);

}


.experience-card.is-active .card-image {

    transform:
        scale(1.02);

}



/* =========================================================
   OVERLAY
   ========================================================= */

.card-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.05),
            rgba(0,0,0,.88)
        );

    pointer-events: none;

}



/* =========================================================
   CONTENIDO
   ========================================================= */

.card-content {

    position: absolute;

    left: 28px;

    right: 28px;

    bottom: 27px;

    z-index: 3;

}


.card-content span {

    font-size: 9px;

    letter-spacing: 3px;

    color: var(--gold2);

}


.card-content h3 {

    font-size: 25px;

    letter-spacing: 4px;

    margin: 9px 0;

}


.card-content p {

    font-size: 13px;

    color: rgba(255,255,255,.72);

    margin: 0;

    line-height: 1.55;

}



/* =========================================================
   TARJETA GASTRONOMÍA
   ========================================================= */

.food-card {

    background:
        #0b0907;

}



/* =========================================================
   FRASE GASTRONOMÍA
   ========================================================= */

.food-quote {

    position: absolute;

    left: 30px;

    right: 30px;

    top: 35px;

    z-index: 3;

    font-family: Georgia, serif;

    font-size: 26px;

    line-height: 1.15;

    color: #f3e6c8;

}



/* =========================================================
   BANDERAS
   ========================================================= */

.flag-row {

    position: absolute;

    z-index: 3;

    left: 30px;

    top: 132px;

    display: flex;

    gap: 7px;

    flex-wrap: wrap;

    max-width: 280px;

}


.flag-row span {

    font-size: 20px;

    filter:
        saturate(.85);

}



/* =========================================================
   TARJETA ACTIVA
   ========================================================= */

.experience-card.is-active {

    border-color:
        rgba(242,200,97,.30);

}



/* =========================================================
   ACCESIBILIDAD
   ========================================================= */

.experience-card:focus-visible {

    outline:
        2px solid var(--gold2);

    outline-offset:
        3px;

}



/* =========================================================
   TRANSICIÓN DEL CONTENIDO
   ========================================================= */

.experience-card .card-content {

    transform:
        translateY(0);

    transition:
        transform .7s cubic-bezier(.2,.7,.2,1);

}


.experience-card:hover .card-content {

    transform:
        translateY(-4px);

}



/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .experience-grid {

        grid-template-columns:
            repeat(2, 1fr);

        grid-template-rows:
            390px
            300px
            300px;

    }


    .experience-card {

        grid-area:
            auto !important;

    }


    .experience-grid {

        display: grid;

    }


    .card-music {

        grid-column:
            1 / 3;

        grid-row:
            1 / 2;

    }


    .card-culture {

        grid-column:
            1 / 2;

        grid-row:
            2 / 3;

    }


    .card-city {

        grid-column:
            2 / 3;

        grid-row:
            2 / 3;

    }


    .food-card {

        grid-column:
            1 / 3;

        grid-row:
            3 / 4;

    }

}



/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 650px) {

    .experience {

        padding:
            110px 0;

    }


    .section-heading h2 {

        font-size:
            62px;

    }


    .experience-grid {

        display:
            flex;

        flex-direction:
            column;

        gap:
            12px;

    }


    .experience-card {

        min-height:
            270px;

        height:
            270px;

        flex:
            none;

        transition:
            height .8s cubic-bezier(.2,.7,.2,1);

    }


    .experience-card.is-active {

        height:
            390px;

    }


    .experience-card .card-image {

        transform:
            scale(1);

    }


    .experience-card.is-active .card-image {

        transform:
            scale(1.02);

    }


    .food-quote {

        font-size:
            24px;

    }


    .flag-row {

        top:
            125px;

    }

}
/* =========================================================
   BOTÓN SUBIR
   ========================================================= */

.back-to-top {

    position: fixed;

    right: 30px;

    bottom: 30px;

    z-index: 100;

    width: 54px;

    height: 54px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 2px;

    border: 1px solid rgba(242, 200, 97, .55);

    border-radius: 50%;

    background: rgba(5, 5, 5, .78);

    color: #ffffff;

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    cursor: pointer;

    opacity: 0;

    visibility: hidden;

    transform: translateY(20px);

    transition:
        opacity .35s ease,
        visibility .35s ease,
        transform .35s ease,
        background .35s ease;

}


.back-to-top span {

    font-size: 20px;

    line-height: 1;

    color: var(--gold2);

}


.back-to-top small {

    font-size: 6px;

    letter-spacing: 2px;

    line-height: 1;

    color: rgba(255,255,255,.75);

}



/* =========================================================
   BOTÓN VISIBLE
   ========================================================= */

.back-to-top.show {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}



/* =========================================================
   HOVER
   ========================================================= */

.back-to-top:hover {

    background: rgba(20, 20, 20, .95);

    border-color: var(--gold2);

    transform: translateY(-4px);

}



/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 650px) {

    .back-to-top {

        right: 18px;

        bottom: 18px;

        width: 48px;

        height: 48px;

    }


    .back-to-top span {

        font-size: 18px;

    }


    .back-to-top small {

        font-size: 5px;

    }

}
/* ==========================================================
   CUATRO TERRITORIOS
   COMPOSICIÓN PRINCIPAL
========================================================== */

.territories {

    position: relative;

    display: grid;

    grid-template-columns:
        minmax(340px, 0.85fr)
        minmax(600px, 1.65fr);

    column-gap: 70px;

    align-items: stretch;

    margin-top: 100px;

    padding-bottom: 120px;

}


/* ==========================================================
   ESCENARIO VISUAL
========================================================== */

.territory-stage {

    position: relative;

    min-width: 0;

    min-height: 600px;

    overflow: hidden;

    background: #050505;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.10
        );

    isolation: isolate;

}


.territory-image-wrap {

    position: absolute;

    inset: 0;

    z-index: 0;

    overflow: hidden;

}


.territory-image {

    position: absolute;

    inset: 0;

    display: block;

    width: 100%;

    height: 100%;

    max-width: none;

    object-fit: cover;

    object-position: center center;

    opacity: 1;

    visibility: visible;

    transform: scale(1.03);

    animation:
        territoryHeroBreath
        12s
        ease-in-out
        infinite
        alternate;

}


.territory-dark-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.18) 0%,
            rgba(0, 0, 0, 0.18) 28%,
            rgba(0, 0, 0, 0.72) 100%
        );

}


.territory-vignette {

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 50% 45%,
            transparent 30%,
            rgba(0, 0, 0, 0.62) 100%
        );

}


.territory-light-wave {

    position: absolute;

    left: -15%;

    bottom: 24%;

    z-index: 3;

    width: 130%;

    height: 2px;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(242, 200, 97, 0.05) 12%,
            rgba(242, 200, 97, 0.70) 42%,
            rgba(255, 255, 255, 0.90) 50%,
            rgba(242, 200, 97, 0.70) 58%,
            rgba(242, 200, 97, 0.05) 88%,
            transparent 100%
        );

    filter:
        blur(1px)
        drop-shadow(
            0 0 12px
            rgba(242, 200, 97, 0.55)
        );

    opacity: 0.65;

    transform:
        rotate(
            -8deg
        );

    animation:
        territoryWave
        5s
        ease-in-out
        infinite;

}


.territory-audio-pulse {

    position: absolute;

    left: 50%;

    top: 48%;

    z-index: 2;

    width: 260px;

    height: 260px;

    pointer-events: none;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(242, 200, 97, 0.14) 0%,
            rgba(242, 200, 97, 0.04) 34%,
            transparent 70%
        );

    transform:
        translate(
            -50%,
            -50%
        );

    animation:
        territoryPulse
        4s
        ease-in-out
        infinite;

}


.territory-stage-content {

    position: absolute;

    inset: 0;

    z-index: 5;

    display: flex;

    align-items: flex-end;

    padding: 58px;

}


.territory-title {

    position: relative;

    z-index: 5;

    width: 100%;

    max-width: 620px;

}


.territory-title .eyebrow {

    margin-bottom: 22px;

    color:
        rgba(
            255,
            255,
            255,
            0.62
        );

}


.territory-title h2 {

    margin: 0;

    padding: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            56px,
            5.8vw,
            88px
        );

    font-weight: 400;

    line-height: 0.90;

    letter-spacing: -0.045em;

    color: #f4efe7;

}


.territory-title h2 .territory-title-line {

    color: #f4efe7;

}


.territory-title h2 em {

    display: inline;

    margin: 0;

    padding: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: inherit;

    font-weight: 400;

    font-style: normal;

    line-height: inherit;

    letter-spacing: inherit;

    color: var(--gold2);

}


/* ==========================================================
   GRID DE TERRITORIOS
========================================================== */

.territory-grid {

    position: relative;

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    grid-template-rows:
        repeat(
            2,
            minmax(
                300px,
                1fr
            )
        );

    gap: 1px;

    min-width: 0;

    min-height: 600px;

    background:
        rgba(
            255,
            255,
            255,
            0.12
        );

}


/* ==========================================================
   TARJETA
========================================================== */

.territory-item {

    position: relative;

    display: block;

    min-width: 0;

    min-height: 300px;

    overflow: hidden;

    background: #050505;

    cursor: pointer;

    opacity: 0.68;

    isolation: isolate;

    transition:
        opacity 0.65s ease;

}


.territory-card-image {

    position: absolute;

    inset: 0;

    z-index: 0;

    display: block;

    width: 100%;

    height: 100%;

    overflow: hidden;

    background: #101010;

}


.territory-card-image img {

    position: absolute;

    inset: -3%;

    display: block;

    width: 106%;

    height: 106%;

    max-width: none;

    object-fit: cover;

    object-position: center center;

    opacity: 1;

    visibility: visible;

    z-index: 0;

    transform: scale(1.01);

    will-change:
        transform;

    transition:
        transform
        8s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


.territory-card-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.02) 0%,
            rgba(0, 0, 0, 0.10) 35%,
            rgba(0, 0, 0, 0.78) 100%
        );

}


.territory-card-content {

    position: absolute;

    left: 28px;

    right: 28px;

    bottom: 27px;

    z-index: 5;

}


.territory-number {

    display: block;

    margin-bottom: 13px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 4px;

    color: var(--gold2);

}


.territory-item h3 {

    margin: 0 0 8px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 17px;

    font-weight: 700;

    line-height: 1.15;

    letter-spacing: 4px;

    color: #ffffff;

}


.territory-item p {

    margin: 0;

    max-width: 310px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;

    line-height: 1.65;

    color:
        rgba(
            255,
            255,
            255,
            0.82
        );

}


/* ==========================================================
   EFECTOS DE LA TARJETA ACTIVA
========================================================== */

.territory-item::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    opacity: 0;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(
                242,
                200,
                97,
                0.12
            ) 0%,
            transparent 62%
        );

    transition:
        opacity 0.8s ease;

}


.territory-item.is-active {

    opacity: 1;

}


.territory-item.is-active::before {

    opacity: 1;

}


.territory-item.is-active
.territory-card-image img {

    transform: scale(1.055);

    animation:
        territoryImageBreath
        8s
        ease-in-out
        infinite
        alternate;

}


.territory-item::after {

    content: "";

    position: absolute;

    left: 28px;

    right: 28px;

    bottom: 0;

    z-index: 6;

    height: 2px;

    background: transparent;

    transition:
        background 0.6s ease,
        box-shadow 0.6s ease;

}


.territory-item.is-active::after {

    background: var(--gold2);

    box-shadow:
        0 0 18px
        rgba(
            242,
            200,
            97,
            0.55
        );

}


.territory-item:hover {

    opacity: 1;

}


.territory-item:hover
.territory-card-image img {

    transform:
        scale(1.085)
        translate3d(
            0,
            -0.5%,
            0
        );

}


@keyframes territoryImageBreath {

    0% {

        transform:
            scale(1.055)
            translate3d(
                0,
                0,
                0
            );

    }

    100% {

        transform:
            scale(1.095)
            translate3d(
                0.6%,
                -0.5%,
                0
            );

    }

}


@keyframes territoryHeroBreath {

    0% {

        transform: scale(1.03);

    }

    100% {

        transform: scale(1.08);

    }

}


@keyframes territoryWave {

    0% {

        transform:
            translateX(
                -7%
            )
            rotate(
                -8deg
            );

        opacity: 0.25;

    }

    50% {

        transform:
            translateX(
                4%
            )
            rotate(
                -8deg
            );

        opacity: 0.75;

    }

    100% {

        transform:
            translateX(
                12%
            )
            rotate(
                -8deg
            );

        opacity: 0.25;

    }

}


@keyframes territoryPulse {

    0% {

        transform:
            translate(
                -50%,
                -50%
            )
            scale(0.82);

        opacity: 0.35;

    }

    50% {

        transform:
            translate(
                -50%,
                -50%
            )
            scale(1.12);

        opacity: 0.75;

    }

    100% {

        transform:
            translate(
                -50%,
                -50%
            )
            scale(0.82);

        opacity: 0.35;

    }

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (
    max-width: 1100px
) {

    .territories {

        grid-template-columns:
            minmax(280px, 0.75fr)
            minmax(480px, 1.25fr);

        column-gap: 40px;

    }

    .territory-stage {

        min-height: 560px;

    }

    .territory-grid {

        min-height: 560px;

    }

}


@media (
    max-width: 850px
) {

    .territories {

        grid-template-columns: 1fr;

        row-gap: 45px;

    }

    .territory-stage {

        min-height: 520px;

    }

    .territory-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

        min-height: 560px;

    }

}


@media (
    max-width: 650px
) {

    .territories {

        margin-top: 70px;

        padding-bottom: 80px;

        row-gap: 35px;

    }

    .territory-stage {

        min-height: 520px;

    }

    .territory-stage-content {

        padding: 32px;

    }

    .territory-title h2 {

        max-width: 350px;

        font-size:
            clamp(
                52px,
                13vw,
                70px
            );

        line-height: 0.92;

        letter-spacing: -0.035em;

    }

    .territory-grid {

        grid-template-columns: 1fr;

        grid-template-rows: none;

        min-height: auto;

    }

    .territory-item {

        min-height: 330px;

    }

    .territory-card-content {

        left: 24px;

        right: 24px;

        bottom: 24px;

    }

    .territory-item h3 {

        font-size: 16px;

        letter-spacing: 3.5px;

    }

    .territory-item p {

        max-width: 280px;

        font-size: 12px;

    }

    .territory-item::after {

        left: 24px;

        right: 24px;

    }

}


@media (
    prefers-reduced-motion: reduce
) {

    .territory-image {

        animation: none;

        transform: scale(1.03);

    }

    .territory-light-wave {

        animation: none;

    }

    .territory-audio-pulse {

        animation: none;

    }

    .territory-item.is-active
    .territory-card-image img {

        animation: none;

        transform: scale(1.05);

    }

}

/* ===== MODAL BAQORA: CENTRADO Y RESPONSIVE ===== */

.baqora-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;
    box-sizing: border-box;

    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(5px);

    opacity: 1;
    visibility: visible;
    transition: opacity .3s ease, visibility .3s ease;
}

.baqora-modal.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.baqora-modal-content {
    position: relative;

    width: min(100%, 1050px);
    max-height: calc(100vh - 40px);

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
    background: #050505;
    border: 1px solid rgba(225, 177, 70, .6);
    box-shadow: 0 20px 80px rgba(0, 0, 0, .65);
}

.baqora-modal-link {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-height: calc(100vh - 42px);
    cursor: pointer;
}

.baqora-modal-image {
    display: block;

    width: 100%;
    height: auto;
    max-height: calc(100vh - 42px);

    object-fit: contain;
    object-position: center;

    margin: 0;
}

.baqora-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    padding: 0;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 50%;

    color: #fff;
    background: rgba(0, 0, 0, .7);

    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.baqora-modal-close:hover {
    color: #f3c75e;
    border-color: #f3c75e;
}

/* Pantallas pequeñas */
@media (max-width: 600px) {
    .baqora-modal {
        padding: 10px;
    }

    .baqora-modal-content,
    .baqora-modal-link {
        width: 100%;
        max-height: calc(100vh - 20px);
    }

    .baqora-modal-image {
        max-height: calc(100vh - 20px);
    }

    .baqora-modal-close {
        width: 34px;
        height: 34px;
        top: 8px;
        right: 8px;
    }
}

/* =========================================================
   BAQORA WELCOME MODAL — CORRECCIÓN RESPONSIVE
   ========================================================= */
.baqora-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, .88);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .3s ease, visibility .3s ease;
}

.baqora-modal.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.baqora-modal-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 1050px);
    max-height: calc(100dvh - 40px);
    margin: auto;
    overflow: hidden;
    background: #050505;
    border: 1px solid rgba(225, 177, 70, .6);
    box-shadow: 0 20px 80px rgba(0, 0, 0, .65);
}

.baqora-modal-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-height: calc(100dvh - 42px);
    line-height: 0;
    cursor: pointer;
}

.baqora-modal-image {
    display: block;
    width: 100%;
    height: auto;
    max-height: calc(100dvh - 42px);
    object-fit: contain;
    object-position: center;
    margin: 0;
}

.baqora-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 50%;
    color: #fff;
    background: rgba(0, 0, 0, .72);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.baqora-modal-close:hover,
.baqora-modal-close:focus-visible {
    color: #f3c75e;
    border-color: #f3c75e;
}

body.baqora-modal-open {
    overflow: hidden;
}

@supports not (height: 100dvh) {
    .baqora-modal-content {
        max-height: calc(100vh - 40px);
    }
    .baqora-modal-link,
    .baqora-modal-image {
        max-height: calc(100vh - 42px);
    }
}

@media (max-width: 600px) {
    .baqora-modal {
        padding: 10px;
    }

    .baqora-modal-content {
        width: 100%;
        max-height: calc(100dvh - 20px);
    }

    .baqora-modal-link,
    .baqora-modal-image {
        max-height: calc(100dvh - 22px);
    }

    .baqora-modal-close {
        width: 34px;
        height: 34px;
        top: 8px;
        right: 8px;
        font-size: 24px;
    }
}