/* ── Variables ── */
:root {
    --gold: #d4af37;
    --gold-dark: #b8860b;
    --copper: #977a5a;
    --dark: #0a0806;
    --dark2: #120f0a;
    --cream: #f9e3ba;
    --white: #EEEDEB;
    --text-muted: rgba(238, 237, 235, 0.62);
}
* { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth }
body {
    font-family:'Cinzel',serif; background:var(--dark);
    color:var(--white); overflow-x:hidden; min-height:100vh
}
body::before {
    content:''; position:fixed; inset:0;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events:none; z-index:1000; opacity:0.4
}
.bg-scene {
    position:fixed; inset:0;
    background:url("../img/fondo atardecer 4k.jpeg") center/cover no-repeat; z-index:0
}
.bg-scene::before {
    content:''; position:absolute; inset:0;
    background:linear-gradient(160deg,rgba(10,8,6,.95) 0%,rgba(10,8,6,.62) 40%,rgba(151,122,90,.12) 70%,rgba(10,8,6,.97) 100%)
}
.bg-scene::after {
    content:''; position:absolute; inset:0;
    background-image:radial-gradient(circle at 15% 25%,rgba(212,175,55,.06) 0%,transparent 50%),radial-gradient(circle at 85% 75%,rgba(151,122,90,.08) 0%,transparent 50%)
}
.encabezado {
    position:fixed; top:0; left:0; right:0; z-index:500;
    padding:0 5%; height:72px;
    display:flex; align-items:center; justify-content:space-between;
    background:rgba(10,8,6,.72); backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid rgba(212,175,55,.1)
}
.logo { width:150px; height:60px; object-fit:contain; filter:drop-shadow(0 0 10px rgba(212,175,55,.25)) }
nav ul { list-style:none; display:flex; gap:6px; align-items:center }
nav ul li a {
    color:var(--white); text-decoration:none;
    font-family:'DM Sans',sans-serif; font-size:.72rem;
    letter-spacing:.08em; padding:6px 14px;
    border-radius:30px; transition:all .35s; position:relative
}
nav ul li a::after {
    content:''; position:absolute; bottom:2px; left:50%;
    transform:translateX(-50%); width:0; height:1px;
    background:var(--gold); transition:width .3s
}
nav ul li a:hover { color:var(--gold) }
nav ul li a:hover::after { width:60% }
.hero {
    position:relative; z-index:1; min-height:100vh;
    display:flex; flex-direction:column; align-items:center;
    justify-content:center; text-align:center; padding:100px 5% 60px
}
.hero-label {
    display:flex; align-items:center; gap:12px;
    font-family:'DM Sans',sans-serif; font-size:.68rem;
    letter-spacing:.2em; color:var(--gold); text-transform:uppercase; margin-bottom:24px
}
.hero-label span { width:40px; height:1px; background:var(--gold) }
.hero h1 { font-size:3.8rem; font-weight:600; color:var(--cream); margin-bottom:16px; text-shadow:0 0 40px rgba(212,175,55,.15) }
.hero p {
    font-family:'DM Sans',sans-serif; font-weight:300;
    font-size:1.05rem; color:var(--white); max-width:580px; line-height:1.7;
    margin-bottom:32px; opacity:.8
}
.hero-cta {
    display:inline-flex; align-items:center; gap:8px;
    padding:14px 36px; background:linear-gradient(135deg,var(--gold),var(--gold-dark));
    border:none; border-radius:50px; color:var(--dark);
    font-family:'Cinzel',serif; font-size:.8rem; font-weight:600;
    letter-spacing:.12em; cursor:pointer; text-decoration:none;
    transition:all .4s
}
.hero-cta:hover { transform:translateY(-3px); box-shadow:0 12px 35px rgba(212,175,55,.35) }
.hero-cta i { font-size:1.1rem; transition:transform .3s }
.hero-cta:hover i { transform:translateX(4px) }
.hero-indicator {
    position:absolute; bottom:40px; left:50%; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:8px;
    font-family:'DM Sans',sans-serif; font-size:.65rem; letter-spacing:.15em;
    color:rgba(238,237,235,.4); animation:bounceDown 2s infinite
}
@keyframes bounceDown { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(8px)} }
.hero-indicator span { width:1px; height:30px; background:linear-gradient(to bottom,var(--gold),transparent) }
.contenido {
    position:relative; z-index:1; padding:80px 5% 60px;
    background:linear-gradient(to bottom,rgba(10,8,6,.3) 0%,var(--dark2) 30%,var(--dark) 100%)
}
.seccion-titulo {
    text-align:center; margin-bottom:48px
}
.seccion-titulo h2 {
    font-size:1.6rem; font-weight:600; color:var(--cream); margin-bottom:8px
}
.seccion-titulo p {
    font-family:'DM Sans',sans-serif; color:var(--text-muted); font-size:.9rem
}
.linea-decorativa {
    width:60px; height:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent);
    margin:12px auto 0
}
.grid-sitios {
    display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
    gap:24px; max-width:1200px; margin:0 auto
}
.tarjeta-sitio {
    background:rgba(255,255,255,.02); border:1px solid rgba(212,175,55,.1);
    border-radius:16px; overflow:hidden; transition:all .4s; cursor:pointer
}
.tarjeta-sitio:hover {
    transform:translateY(-6px);
    border-color:rgba(212,175,55,.3);
    box-shadow:0 12px 40px rgba(0,0,0,.4),0 0 30px rgba(212,175,55,.05)
}
.tarjeta-img { width:100%; height:200px; object-fit:cover }
.tarjeta-body { padding:20px }
.tarjeta-body h3 { font-size:1.05rem; color:var(--cream); margin-bottom:6px }
.tarjeta-body p { font-family:'DM Sans',sans-serif; font-size:.82rem; color:var(--text-muted); line-height:1.6; margin-bottom:12px }
.tarjeta-body .tag {
    display:inline-block; padding:4px 12px; background:rgba(212,175,55,.08);
    border:1px solid rgba(212,175,55,.15); border-radius:30px;
    font-family:'DM Sans',sans-serif; font-size:.68rem; color:var(--gold); letter-spacing:.05em
}
footer {
    position:relative; z-index:1; background:var(--dark);
    border-top:1px solid rgba(212,175,55,.08); padding:48px 5% 24px;
    font-family:'DM Sans',sans-serif
}
.footer-contenido {
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:32px; max-width:1200px; margin:0 auto 36px
}
.footer-col h3 { font-family:'Cinzel',serif; color:var(--gold); font-size:.78rem; letter-spacing:.12em; margin-bottom:12px }
.footer-col p, .footer-col a {
    color:var(--white); font-size:.82rem; line-height:2;
    text-decoration:none; display:block; transition:color .3s
}
.footer-col a:hover { color:var(--gold) }
.footer-copy {
    text-align:center; border-top:1px solid rgba(212,175,55,.08);
    padding-top:16px; color:rgba(238,237,235,.5); font-size:.72rem
}
@media(max-width:768px){
    .hero h1{font-size:2.2rem}
    .hero p{font-size:.9rem}
    .grid-sitios{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
    .hero{padding:80px 5% 50px;min-height:auto}
    .tarjeta-img{height:160px}
    .tarjeta-body{padding:16px}
    .tarjeta-body h3{font-size:.95rem}
    .seccion-titulo h2{font-size:1.3rem}
    .contenido{padding:50px 4% 40px}
    footer{padding:36px 4% 20px}
    .footer-contenido{flex-direction:column;gap:24px}
}
@media(max-width:480px){
    .hero h1{font-size:1.6rem}
    .hero{padding:70px 5% 40px}
    .hero p{font-size:.82rem;margin-bottom:24px}
    .hero-cta{padding:12px 24px;font-size:.75rem}
    .grid-sitios{grid-template-columns:1fr;gap:16px}
    .contenido{padding:30px 4%}
    .seccion-titulo{margin-bottom:28px}
}
@media(max-width:360px){
    .hero h1{font-size:1.3rem}
    .hero-label{font-size:.6rem;gap:8px}
    .hero-label span{width:24px}
}
/* ── Reusable utilities ── */
.empty-state{text-align:center;padding:60px 20px}
.empty-state .empty-icon{font-size:3rem;margin-bottom:16px;opacity:.5}
.empty-state h3{color:var(--cream);font-size:1.1rem;margin-bottom:8px}
.empty-state p{font-family:'DM Sans',sans-serif;color:var(--text-muted);font-size:.85rem}

/* ── Animations ── */
.fade-up{animation:fadeUp .5s cubic-bezier(.16,1,.3,1) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.fade-in{animation:fadeIn .5s ease both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.tarjeta-sitio{animation:fadeUp .5s cubic-bezier(.16,1,.3,1) both}
.tarjeta-sitio:nth-child(1){animation-delay:0s}
.tarjeta-sitio:nth-child(2){animation-delay:.08s}
.tarjeta-sitio:nth-child(3){animation-delay:.16s}
.tarjeta-sitio:nth-child(4){animation-delay:.24s}
.tarjeta-sitio:nth-child(5){animation-delay:.32s}
.tarjeta-sitio:nth-child(6){animation-delay:.4s}
.tarjeta-sitio:nth-child(7){animation-delay:.48s}
.tarjeta-sitio:nth-child(8){animation-delay:.56s}