/* ══════════════════════════════════════════════════════════════
   SEBASTIAN LEIVA DJ — PREMIUM STYLESHEET  v2.0
   Optimizado para iPhone (iOS 17+) y escritorio.
   Organización: Variables → Reset → Base → Layout →
                 Secciones → Componentes → Modales → Media Queries
   ══════════════════════════════════════════════════════════════ */

/* ── 1. VARIABLES ─────────────────────────────────────────── */
:root {
    /* Paleta dorada */
    --gold:       #d4af37;
    --gold-light: #e8c95a;
    --gold-dim:   rgba(212,175,55,0.4);
    --gold-glow:  rgba(212,175,55,0.15);

    /* Superficies oscuras */
    --dark:       #080808;
    --surface:    rgba(14,14,14,0.96);
    --glass-bg:   rgba(8,8,8,0.92);

    /* Bordes */
    --border:       rgba(212,175,55,0.25);
    --border-hover: rgba(212,175,55,0.6);
    --border-subtle:rgba(255,255,255,0.05);

    /* Texto */
    --text-muted: #666;
    --text-dim:   #999;

    /* Safe areas (iPhone notch / Dynamic Island) */
    --safe-top:    env(safe-area-inset-top,    0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left:   env(safe-area-inset-left,   0px);
    --safe-right:  env(safe-area-inset-right,  0px);

    /* Tokens de diseño */
    --radius:     6px;
    --transition: 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
    --transition-fast: 0.2s ease;
    --header-h:   70px;
}

/* ── 2. RESET ──────────────────────────────────────────────── */
*, *::before, *::after {
    margin: 0; padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.visually-hidden {
    position:absolute; width:1px; height:1px; padding:0;
    margin:-1px; overflow:hidden; clip:rect(0,0,0,0);
    white-space:nowrap; border:0;
}

/* ── 3. BASE ───────────────────────────────────────────────── */
html, body {
    width:100%; height:100%;
    background: var(--dark); color:#fff;
    font-family:'Montserrat', sans-serif;
    overflow:hidden;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
}

/* ── 4. HERO FONDO ─────────────────────────────────────────── */
#hero-bg-container {
    position:fixed; inset:0;
    z-index:0; overflow:hidden;
}
.hero-slide {
    position:absolute; inset:0;
    background-size:contain;
    background-position:center center;
    background-repeat:no-repeat;
    opacity:0; transition:opacity 2.5s ease;
}
.hero-slide.active { opacity:1; }

/* Difuminado a izquierda y derecha */
.hero-slide::before {
    content:'';
    position:absolute;
    top:0; left:0; bottom:0;
    width:clamp(20px, 12vw, 100px);
    background:linear-gradient(to right, rgba(0,0,0,0.8), transparent);
    z-index:1;
    pointer-events:none;
}

.hero-slide::after {
    content:'';
    position:absolute;
    top:0; right:0; bottom:0;
    width:clamp(20px, 12vw, 100px);
    background:linear-gradient(to left, rgba(0,0,0,0.8), transparent);
    z-index:1;
    pointer-events:none;
}

.vignette {
    position:absolute; inset:0;
    background:
        radial-gradient(ellipse at center, transparent 20%, rgba(0,0,0,0.5) 70%, #000 100%),
        linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, transparent 30%, transparent 60%, rgba(0,0,0,0.8) 100%);
}
.hero-grain {
    position:absolute; 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");
    opacity:.35; pointer-events:none;
}

/* ── 5. HEADER ─────────────────────────────────────────────── */
.main-header {
    position:fixed; top:0; width:100%;
    height:calc(var(--header-h) + var(--safe-top));
    padding:var(--safe-top) 22px 0;
    display:flex; align-items:center; justify-content:space-between;
    z-index:2000;
    background:linear-gradient(to bottom, rgba(0,0,0,0.6), transparent);
}
.header-logo { display:flex; align-items:center; cursor:pointer; }
.sl-logo { width:44px; height:30px; }
.header-center { flex:1; text-align:center; }
.header-tagline {
    font-size:0.6rem; letter-spacing:4px;
    text-transform:uppercase; color:rgba(255,255,255,0.7); font-weight:300;
}

/* Botón hamburguesa */
.menu-btn {
    width:28px; height:16px;
    display:flex; flex-direction:column; justify-content:space-between;
    cursor:pointer; background:none; border:none; padding:0;
}
.menu-btn span {
    width:100%; height:1px;
    background:rgba(255,255,255,0.9);
    transition:var(--transition); display:block;
}
.menu-btn.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.menu-btn.open span:nth-child(2) { opacity:0; }
.menu-btn.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* ── 6. SIDE MENU ──────────────────────────────────────────── */
.glass-menu {
    position:fixed; top:0; right:-100%; width:72%; max-width:300px; height:100%;
    background:var(--glass-bg);
    backdrop-filter:blur(30px) saturate(120%);
    -webkit-backdrop-filter:blur(30px) saturate(120%);
    border-left:1px solid var(--border);
    z-index:1500;
    transition:right 0.5s cubic-bezier(0.77,0,0.18,1);
    display:flex; flex-direction:column; justify-content:center;
    padding:calc(var(--safe-top) + 80px) 40px var(--safe-bottom);
}
.glass-menu.open { right:0; }

.menu-close {
    position:absolute; top:calc(var(--safe-top) + 22px); right:22px;
    background:none; border:none; color:var(--text-dim);
    font-size:1.6rem; cursor:pointer; line-height:1; transition:color var(--transition-fast);
}
.menu-close:hover { color:var(--gold); }

.menu-overlay {
    position:fixed; inset:0;
    background:rgba(0,0,0,0.6); backdrop-filter:blur(2px);
    z-index:1400;
    opacity:0; pointer-events:none; transition:opacity 0.4s;
}
.menu-overlay.show { opacity:1; pointer-events:all; }

.menu-links { display:flex; flex-direction:column; gap:22px; flex:1; justify-content:center; }
.menu-links a {
    color:rgba(255,255,255,0.75); text-decoration:none;
    font-size:0.75rem; letter-spacing:3px;
    text-transform:uppercase; font-weight:300;
    transition:color var(--transition-fast), letter-spacing var(--transition-fast);
    padding:4px 0;
}
.menu-links a:hover { color:#fff; letter-spacing:4px; }
.menu-links a.menu-cta {
    color:var(--gold); border:1px solid var(--gold);
    padding:10px 16px; text-align:center; margin-top:10px;
    transition:background var(--transition-fast);
}
.menu-links a.menu-cta:hover { background:var(--gold-glow); }

.menu-social { display:flex; gap:20px; padding-bottom:30px; margin-top:30px; }
.menu-social a { color:var(--text-dim); font-size:1.1rem; text-decoration:none; transition:color var(--transition-fast); }
.menu-social a:hover { color:var(--gold); }

/* ── 7. VIEWPORT Y VIEWS ───────────────────────────────────── */
.viewport { position:relative; width:100%; height:100%; z-index:10; }

.view {
    position:absolute; inset:0;
    opacity:0; pointer-events:none;
    transition:opacity 0.5s ease;
    overflow-y:auto; overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    display:flex; flex-direction:column; align-items:center;
    scrollbar-width:none;
}
.view::-webkit-scrollbar { display:none; }

/* Vista activa (no home): fondo sólido en móvil, blur en escritorio */
.view.active:not(#section-home) {
    opacity:1; pointer-events:all;
    background:rgba(0,0,0,0.75);
    backdrop-filter:blur(20px) saturate(80%) brightness(0.6);
    -webkit-backdrop-filter:blur(20px) saturate(80%) brightness(0.6);
}
#section-home.active { opacity:1; pointer-events:all; }

/* ── 8. HOME ───────────────────────────────────────────────── */
.home-info {
    margin:auto; text-align:center;
    padding:calc(var(--safe-top) + 28vh) 30px calc(var(--safe-bottom) + 60px);
    display:flex; flex-direction:column; align-items:center;
    animation:fadeInUp 1.2s ease both;
}

.home-preTitle {
    font-size:0.65rem; letter-spacing:3px;
    color:var(--gold); font-weight:400; margin-bottom:16px;
    text-shadow:
        0 0 2px  rgba(0,0,0,0.95),
        0 0 5px  rgba(0,0,0,0.85),
        0 0 10px rgba(0,0,0,0.65),
        0 2px 6px rgba(0,0,0,0.9);
}

.home-preTitle .letter-anim {
    display:inline-block;
    opacity:0;
    transform:translateY(10px);
    animation:letterRise 0.6s ease forwards;
    will-change:transform, opacity;
}

@keyframes letterRise {
    to { opacity:1; transform:translateY(0); }
}

.main-tag {
    font-family:'Oswald', sans-serif;
    font-size:clamp(2.4rem, 6.5vw, 2.8rem);
    font-weight:300; line-height:1.05;
    text-transform:uppercase; margin-bottom:16px;
    text-shadow:0 2px 30px rgba(0,0,0,0.8);
    display:block; width:100%; text-align:center;
    white-space:nowrap; letter-spacing:4px; text-indent:4px;
}
.main-tag-underline {
    width:180px; height:3px;
    background:linear-gradient(to right, transparent, var(--gold), transparent);
    margin:0 auto 24px; opacity:.8;
}

/* CTA buttons home */
.home-cta-group {
    display:flex; gap:12px; flex-wrap:wrap;
    justify-content:center; margin-bottom:36px;
}
.btn-ghost {
    background:transparent; border:1px solid rgba(255,255,255,0.25);
    color:rgba(255,255,255,0.75); padding:14px 24px;
    font-size:0.68rem; letter-spacing:3px; cursor:pointer;
    text-transform:uppercase; font-family:'Montserrat', sans-serif;
    font-weight:300; border-radius:0; min-height:48px;
    display:inline-flex; align-items:center; justify-content:center;
    transition:border-color var(--transition-fast), color var(--transition-fast);
}
.btn-ghost:hover { border-color:rgba(255,255,255,0.6); color:#fff; }

/* Nav rápida Home (iconos) */
.home-quick-nav {
    display:grid; grid-template-columns:repeat(3, 1fr);
    gap:10px; width:100%; max-width:320px;
    margin-top:4px;
}
.home-quick-nav button {
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.1);
    color:rgba(255,255,255,0.6); cursor:pointer;
    padding:12px 6px;
    display:flex; flex-direction:column; align-items:center; gap:6px;
    border-radius:var(--radius); transition:background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
    min-height:60px;
}
.home-quick-nav button:hover, .home-quick-nav button:active {
    background:var(--gold-glow); border-color:var(--border); color:var(--gold);
}
.home-quick-nav button i { font-size:1rem; }
.home-quick-nav button span {
    font-size:0.5rem; letter-spacing:1.5px;
    text-transform:uppercase; font-weight:400;
}

/* ── 9. BACK NAV ───────────────────────────────────────────── */
.back-nav {
    padding:calc(var(--safe-top) + 85px) 22px 16px;
    color:var(--gold); font-size:0.65rem; letter-spacing:2px;
    cursor:pointer; text-transform:uppercase;
    position:relative; z-index:2100;
    align-self:flex-start; font-weight:400;
    transition:opacity var(--transition-fast);
    -webkit-user-select:none; user-select:none;
    min-height:44px; display:flex; align-items:flex-end;
}

/* Ajuste de logo */
.logo-header {
    width: 100vw;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px 0;
}
.section-logo-epic {
    width: 100%;
    height: auto;
    display: block;
}
.section-logo-epic {
    width: 60%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.section-logo-sld_1 {
    width: 70%;
    max-width: auto;
    height: auto;
    margin: 0 auto;
    display: block;
}
.section-logo-sld_2 {
    width: 60%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.back-nav:active { opacity:.6; }

/* ── 10. VIEW BODY ─────────────────────────────────────────── */
.view-body {
    width:100%; max-width:480px;
    padding:0 22px calc(var(--safe-bottom) + 80px);
    text-align:center;
}

/* ── 11. TIPOGRAFÍA ────────────────────────────────────────── */
.section-title {
    font-family:'Oswald', sans-serif;
    font-size:0.75rem; letter-spacing:6px;
    text-transform:uppercase; font-weight:300;
    margin-bottom:10px; position:relative; display:inline-block;
}
.section-title::after {
    content:''; display:block;
    width:30px; height:1px;
    background:var(--gold); margin:10px auto 0; opacity:.6;
}
.gold { color:var(--gold); }
.thin { font-weight:200; }

.section-lead {
    font-family:'Oswald', sans-serif;
    font-size:1.55rem; font-weight:180;
    letter-spacing:2px; line-height:1.25;
    margin:20px 0 16px; text-transform:uppercase;
}
.section-lead_subtitle {
    font-family:'Oswald', sans-serif;
    font-size:0.80rem; font-weight:200;
    letter-spacing:2px; line-height:1.25;
    margin:20px 0 16px; text-transform:uppercase;
}
.section-subtitle {
    font-size:0.75rem; color:var(--text-dim);
    letter-spacing:1px; margin-bottom:28px; font-weight:300;
    line-height:1.6;
}
.section-body {
    font-size:0.75rem; color:rgba(255,255,255,0.65);
    line-height:1.8; font-weight:300; margin-bottom:32px; letter-spacing:0.5px;
}

/* ── 12. BOTONES ───────────────────────────────────────────── */
.btn-gold-outline {
    background:transparent; border:1px solid var(--gold);
    color:var(--gold); padding:14px 28px;
    font-size:0.68rem; letter-spacing:3px; cursor:pointer;
    text-transform:uppercase; font-family:'Montserrat', sans-serif; font-weight:400;
    transition:background var(--transition-fast), color var(--transition-fast);
    border-radius:0; min-height:48px;
    display:inline-flex; align-items:center; justify-content:center;
}
.btn-gold-outline:hover  { background:var(--gold-glow); }
.btn-gold-outline:active { background:rgba(212,175,55,0.15); }

.btn-gold-solid {
    background:var(--gold); border:1px solid var(--gold); color:#000;
    padding:15px 28px; font-size:0.68rem; letter-spacing:3px; cursor:pointer;
    text-transform:uppercase; font-family:'Montserrat', sans-serif; font-weight:600;
    width:100%; min-height:50px; border-radius:0; margin-top:8px;
    transition:opacity var(--transition-fast);
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.btn-gold-solid:active { opacity:.85; }

/* ── 13. ABOUT ─────────────────────────────────────────────── */
.about-img-wrap { width:100%; max-width:280px; margin:0 auto 20px; }
.about-photo {
    width:100%;
    filter:grayscale(20%) contrast(1.05);
    object-fit:cover;
    -webkit-mask-image:radial-gradient(circle, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 80%);
    mask-image:radial-gradient(circle, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 80%);
}
.stats-row {
    display:flex; justify-content:space-around; margin:30px 0;
    padding:24px 0;
    border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.stat-item { text-align:center; }
.stat-num  { display:block; font-family:'Cormorant Garamond', serif; font-size:2rem; font-weight:300; color:var(--gold); line-height:1; }
.stat-label { font-size:0.55rem; letter-spacing:2px; color:var(--text-dim); font-weight:300; text-transform:uppercase; margin-top:6px; display:block; line-height:1.4; }

/* Tags de géneros musicales */
.about-genres { margin:24px 0; }
.genres-label { font-size:0.6rem; letter-spacing:3px; color:var(--gold); text-transform:uppercase; margin-bottom:12px; }
.genres-tags {
    display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
}
.genres-tags span {
    background:rgba(212,175,55,0.08); border:1px solid var(--border);
    color:rgba(255,255,255,0.7); font-size:0.58rem;
    letter-spacing:1.5px; text-transform:uppercase;
    padding:6px 12px; border-radius:20px; font-weight:300;
    transition:background var(--transition-fast), border-color var(--transition-fast);
}
.genres-tags span:hover { background:var(--gold-glow); border-color:var(--border-hover); color:#fff; }

.about-energy { margin-top:24px; display:flex; flex-direction:column; align-items:center; gap:6px; }
.energy-symbol { font-size:2rem; color:var(--gold); opacity:.7; }
.energy-label { font-size:0.6rem; letter-spacing:4px; color:var(--text-dim); text-transform:uppercase; }

/* ── 14. AGENDA ────────────────────────────────────────────── */
#agenda-container { width:100%; max-width:440px; margin:0 auto 20px; }
.loading-text { color:var(--text-dim); font-size:0.75rem; letter-spacing:2px; padding:40px 0; text-align:center; }
.agenda-month-block { background:rgba(12,12,12,0.96); margin-bottom:16px; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.month-title { background:rgba(212,175,55,0.12); padding:11px; color:var(--gold); font-size:0.65rem; letter-spacing:3px; text-align:center; text-transform:uppercase; font-weight:400; }
.date-row { display:flex; justify-content:space-between; align-items:center; padding:13px 18px; border-bottom:1px solid var(--border-subtle); min-height:50px; }
.date-row:last-child { border-bottom:none; }
.date-info { display:flex; align-items:baseline; gap:8px; }
.day-num  { color:#fff; font-weight:600; font-size:1.05rem; }
.day-name { font-size:0.65rem; color:#777; text-transform:uppercase; letter-spacing:1px; font-weight:300; }
.status-tag { color:var(--gold); font-size:0.62rem; font-weight:600; text-transform:uppercase; letter-spacing:1.5px; }
.status-tag.status-disponible { color:#4caf50; }

/* ── 15. VIDEOS ────────────────────────────────────────────── */
.vid-container { width:100%; max-width:480px; margin:0 auto 28px; }
.vid-container iframe { width:100%; aspect-ratio:16/9; border-radius:var(--radius); border:1px solid var(--border); display:block; }
.vid-caption { font-size:0.65rem; color:var(--text-dim); margin-top:8px; font-style:italic; letter-spacing:1px; text-align:left; }

.yt-facade {
    position:relative; width:100%; aspect-ratio:16/9;
    cursor:pointer; display:block;
    border-radius:var(--radius); overflow:hidden;
    border:1px solid var(--border);
}
.yt-facade img { width:100%; height:100%; object-fit:cover; display:block; transition:filter 0.3s; }
.yt-facade:hover img, .yt-facade:focus img { filter:brightness(0.75); }
.yt-play-btn {
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:56px; height:56px; border-radius:50%;
    background:rgba(0,0,0,0.72); border:2px solid rgba(255,255,255,0.7);
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:1.2rem; pointer-events:none;
    transition:background 0.2s, border-color 0.2s;
}
.yt-facade:hover .yt-play-btn { background:rgba(212,175,55,0.85); border-color:var(--gold); }
.section-logo { max-width:120px; height:auto; margin:0 auto 24px; display:block; }

/* ── 16. GALERÍA ───────────────────────────────────────────── */
.gallery-grid {
    width:100%; display:grid;
    grid-template-columns:1fr 1fr; gap:8px; padding-bottom:20px;
}
.gallery-grid .gallery-img:first-child { grid-column:1 / -1; }
.gallery-img {
    width:100%; height:auto; border-radius:var(--radius);
    border:1px solid var(--border); object-fit:cover; aspect-ratio:4/3;
    cursor:pointer; display:block;
    transition:transform 0.3s ease, filter 0.3s ease;
}
.gallery-img:first-child { aspect-ratio:16/9; }
.gallery-img:hover { transform:scale(1.02); filter:contrast(1.1); }

/* ── 17. EPIC FEATURES ─────────────────────────────────────── */
.features-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:28px 0; }
.feature-item {
    background:rgba(20,20,20,0.8); border:1px solid var(--border);
    border-radius:var(--radius); padding:20px 12px;
    display:flex; flex-direction:column; align-items:center; gap:10px;
    transition:border-color var(--transition-fast), background var(--transition-fast);
}
.feature-item:hover { border-color:var(--border-hover); background:var(--gold-glow); }
.feature-icon  { color:var(--gold); font-size:1.3rem; }
.feature-title { font-size:0.6rem; letter-spacing:2px; font-weight:400; color:rgba(255,255,255,0.75); text-transform:uppercase; text-align:center; }

/* ── 18. DJ SET ────────────────────────────────────────────── */
.djset-features { display:flex; flex-direction:column; gap:0; margin:24px 0; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.djset-feature { display:flex; align-items:center; gap:16px; padding:15px 20px; border-bottom:1px solid var(--border-subtle); text-align:left; min-height:56px; }
.djset-feature:last-child { border-bottom:none; }
.djset-icon    { color:var(--gold); font-size:0.8rem; flex-shrink:0; }
.djset-feature strong { display:block; font-size:0.65rem; letter-spacing:2px; font-weight:600; text-transform:uppercase; }
.djset-feature p { font-size:0.62rem; color:var(--text-dim); letter-spacing:1px; margin-top:2px; font-weight:300; }

.mixcloud-label { font-size:0.65rem; letter-spacing:4px; color:var(--gold); margin:28px 0 16px; font-weight:300; text-transform:uppercase; }
.mixcloud-stack { display:flex; flex-direction:column; gap:10px; }

.mc-track-card { display:flex; align-items:center; gap:14px; background:rgba(14,14,14,0.9); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; cursor:pointer; transition:border-color 0.25s, background 0.25s; min-height:60px; }
.mc-track-card:hover, .mc-track-card:active { border-color:var(--gold); background:var(--gold-glow); }
.mc-track-play { width:36px; height:36px; border-radius:50%; border:1px solid var(--gold); display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:0.75rem; flex-shrink:0; transition:background 0.2s; }
.mc-track-card:hover .mc-track-play { background:rgba(212,175,55,0.15); }
.mc-track-info { flex:1; text-align:left; min-width:0; }
.mc-track-title { display:block; font-size:0.68rem; letter-spacing:2px; color:#fff; font-weight:500; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mc-track-sub  { display:block; font-size:0.58rem; letter-spacing:1px; color:var(--text-dim); font-weight:300; margin-top:3px; }
.mc-track-logo { color:var(--text-muted); font-size:1.1rem; flex-shrink:0; }

/* ── 19. TESTIMONIOS ───────────────────────────────────────── */
.testimonios-slider { position:relative; overflow:hidden; margin:20px 0; }
.testimonio-slide {
    display:none; flex-direction:column; align-items:center; padding:28px 24px;
    background:rgba(14,14,14,0.96); border:1px solid var(--border);
    border-radius:var(--radius); animation:fadeIn 0.5s ease;
}
.testimonio-slide.active { display:flex; }

.testimonio-stars { color:var(--gold); font-size:0.75rem; letter-spacing:3px; margin-bottom:12px; }
.testimonio-quote-mark { font-family:'Cormorant Garamond', serif; font-size:4rem; color:var(--gold); opacity:.5; line-height:.5; margin-bottom:16px; }
.testimonio-text { font-family:'Cormorant Garamond', serif; font-size:1.1rem; font-weight:400; line-height:1.7; color:rgba(255,255,255,0.85); font-style:italic; text-align:center; quotes:none; }
.testimonio-author { margin-top:20px; font-size:0.65rem; letter-spacing:3px; color:var(--gold); text-transform:uppercase; font-style:normal; font-weight:600; display:block; text-align:center; }
.testimonio-author span { color:var(--text-dim); font-weight:300; display:block; margin-top:3px; }

.slider-dots { display:flex; justify-content:center; gap:8px; margin-top:20px; }
.dot { width:6px; height:6px; border-radius:50%; background:var(--text-muted); border:none; cursor:pointer; transition:background 0.3s, width 0.3s; padding:0; min-width:6px; }
.dot.active { background:var(--gold); width:20px; border-radius:3px; }

/* Rating resumen */
.rating-summary { display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:28px; padding:20px; background:rgba(212,175,55,0.05); border:1px solid var(--border); border-radius:var(--radius); }
.rating-num { font-family:'Cormorant Garamond', serif; font-size:3rem; font-weight:300; color:var(--gold); line-height:1; }
.rating-stars { color:var(--gold); font-size:0.9rem; letter-spacing:4px; }
.rating-label { font-size:0.62rem; letter-spacing:2px; color:var(--text-dim); text-transform:uppercase; }

/* ── 20. FORMULARIO DE CONTACTO ────────────────────────────── */
.contact-form { text-align:left; margin:24px 0; display:flex; flex-direction:column; gap:10px; }
.form-field { display:flex; flex-direction:column; }
.form-field input,
.form-field select,
.form-field textarea {
    background:rgba(20,20,20,0.9); border:1px solid var(--border);
    border-bottom-color:var(--gold-dim); color:#fff;
    padding:14px 16px; font-size:0.75rem;
    font-family:'Montserrat', sans-serif; font-weight:300;
    letter-spacing:2px; text-transform:uppercase;
    outline:none; border-radius:0; width:100%; min-height:48px;
    -webkit-appearance:none; appearance:none;
    transition:border-color var(--transition-fast);
}
.form-field input::placeholder,
.form-field textarea::placeholder { color:var(--text-muted); font-size:0.65rem; letter-spacing:2px; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color:var(--gold); background:rgba(25,25,25,0.95); }
.form-field select option { background:#111; }
.form-field textarea { resize:none; min-height:80px; }

.contact-data { margin:24px 0; display:flex; flex-direction:column; gap:0; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.contact-line { display:flex; align-items:center; gap:14px; padding:15px 18px; border-bottom:1px solid var(--border-subtle); text-decoration:none; color:rgba(255,255,255,0.7); font-size:0.65rem; letter-spacing:2px; font-weight:300; text-transform:uppercase; min-height:50px; transition:color var(--transition-fast); }
.contact-line:last-child { border-bottom:none; }
.contact-line i { color:var(--gold); font-size:0.9rem; width:16px; text-align:center; }
.contact-line:hover { color:#fff; }

.social-links { display:flex; justify-content:center; gap:24px; margin-top:24px; padding-bottom:10px; }
.social-links a { color:var(--text-dim)!important; font-size:1.3rem; text-decoration:none; transition:color var(--transition-fast), transform var(--transition-fast); display:flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; }
.social-links a:hover { color:var(--gold)!important; transform:scale(1.1); }

/* ── 21. SOCIAL OVERLAY (burbujas de comentarios) ──────────── */
#social-overlay,
#social-overlay-epic { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:100; }
.comment-bubble { position:absolute; background:rgba(8,8,8,0.88); border:1px solid var(--gold); padding:9px 14px; border-radius:20px; font-size:0.6rem; color:#fff; white-space:nowrap; box-shadow:0 4px 20px rgba(0,0,0,0.6); font-weight:300; letter-spacing:0.5px; }

/* ── 22. REPRODUCTOR MIXCLOUD FLOTANTE ─────────────────────── */
#floating-player {
    position:fixed; bottom:0; left:0; right:0; z-index:4000;
    transform:translateY(110%);
    transition:transform 0.45s cubic-bezier(0.25,0.46,0.45,0.94);
    will-change:transform;
}
#floating-player.visible { transform:translateY(0); }

.fp-iframe-wrap { width:100%; height:60px; overflow:hidden; display:block; background:#000; border-top:1px solid var(--border); }
.fp-bar { background:rgba(6,6,6,0.97); border-top:1px solid var(--border); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); padding:0 16px calc(var(--safe-bottom) + 4px); display:flex; align-items:center; gap:10px; min-height:68px; }
.fp-thumb { width:42px; height:42px; border-radius:4px; background:var(--gold-glow); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--gold); font-size:1rem; }
.fp-info { flex:1; min-width:0; }
.fp-title { font-size:0.68rem; letter-spacing:2px; color:#fff; font-weight:500; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fp-sub { font-size:0.58rem; letter-spacing:1px; color:var(--text-dim); font-weight:300; margin-top:3px; }

/* Ecualizador animado */
.fp-wave { display:flex; align-items:center; gap:2px; height:20px; }
.fp-wave span { display:block; width:2px; border-radius:2px; background:var(--gold); opacity:.7; animation:wave 1.2s ease-in-out infinite; }
.fp-wave span:nth-child(1) { height:6px;  animation-delay:0s; }
.fp-wave span:nth-child(2) { height:14px; animation-delay:.15s; }
.fp-wave span:nth-child(3) { height:10px; animation-delay:.3s; }
.fp-wave span:nth-child(4) { height:18px; animation-delay:.45s; }
.fp-wave span:nth-child(5) { height:8px;  animation-delay:.6s; }
.fp-wave.paused span { animation-play-state:paused; height:4px!important; opacity:.35; }

.fp-close { background:none; border:none; color:var(--text-dim); font-size:1.2rem; cursor:pointer; padding:8px; min-width:36px; min-height:36px; display:flex; align-items:center; justify-content:center; transition:color var(--transition-fast); flex-shrink:0; border-radius:50%; }
.fp-close:hover { color:var(--gold); }

/* ── 23. LIGHTBOX ──────────────────────────────────────────── */
.lightbox {
    position:fixed; inset:0;
    background:rgba(10,10,10,0.96);
    backdrop-filter:blur(8px);
    z-index:9999;
    display:flex; justify-content:center; align-items:center;
    opacity:0; pointer-events:none; transition:opacity 0.4s ease;
}
.lightbox.active { opacity:1; pointer-events:auto; }
.lightbox-content { max-width:85%; max-height:80%; display:flex; justify-content:center; align-items:center; }
.lightbox-content img { max-width:100%; max-height:100%; object-fit:contain; border-radius:4px; box-shadow:0 20px 50px rgba(0,0,0,0.5); transform:scale(.95); transition:transform 0.4s ease; }
.lightbox.active .lightbox-content img { transform:scale(1); }
.lightbox-close, .lightbox-arrow { position:absolute; background:none; border:none; color:rgba(255,255,255,0.4); font-size:1.5rem; cursor:pointer; transition:color 0.3s, transform 0.3s; z-index:10000; }
.lightbox-close:hover, .lightbox-arrow:hover { color:var(--gold); }
.lightbox-arrow { top:50%; transform:translateY(-50%); padding:20px; }
.lightbox-arrow.prev { left:2%; }
.lightbox-arrow.next { right:2%; }
.lightbox-arrow:active { transform:translateY(-50%) scale(.9); }
.lightbox-close { top:4%; right:4%; font-size:2.5rem; font-weight:300; }

/* ── 24. WHATSAPP FLOTANTE ─────────────────────────────────── */
.floating-wsp {
    position:fixed; bottom:calc(28px + var(--safe-bottom)); right:22px;
    width:52px; height:52px; background:#25d366; color:#fff!important;
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:1.5rem; z-index:3000;
    opacity:0; pointer-events:none;
    transition:opacity 0.4s, transform 0.3s; text-decoration:none;
    box-shadow:0 4px 16px rgba(37,211,102,0.4);
}
.floating-wsp.show { opacity:1; pointer-events:all; }
.floating-wsp:active { transform:scale(.93); }

iframe[src*="mixcloud"] { border:1px solid var(--border); border-radius:var(--radius); display:block; }

/* ── 25. ANIMACIONES ───────────────────────────────────────── */
@keyframes fadeInUp {
    from { opacity:0; transform:translateY(30px); }
    to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeIn {
    from { opacity:0; }
    to   { opacity:1; }
}
@keyframes wave {
    0%, 100% { transform:scaleY(1); }
    50%       { transform:scaleY(1.8); }
}

/* ══════════════════════════════════════════════════════════════
   MEDIA QUERIES
   ══════════════════════════════════════════════════════════════ */

/* Móvil — elimina blur pesado */
@media (max-width:768px) {
    .view.active:not(#section-home) {
        background:rgba(10,10,10,0.97);
        backdrop-filter:none!important;
        -webkit-backdrop-filter:none!important;
    }
}

/* iPhone 430px y menores */
@media (max-width:430px) {
    .home-info       { padding-left:10px!important; padding-right:10px!important; }
    .main-tag        { font-size:7.2vw!important; letter-spacing:3px!important; text-indent:3px!important; }
    .section-lead    { font-size:1.35rem; }
    .glass-menu      { width:78%; }
    .features-grid   { gap:10px; }
    .gallery-grid    { gap:6px; }
    .view-body       { padding-left:18px; padding-right:18px; }
    .home-quick-nav  { max-width:280px; }
}

/* Safe area support */
@supports (padding-top: env(safe-area-inset-top)) {
    .main-header { padding-top:max(var(--safe-top), 14px); }
}

/* Reducción de movimiento */
@media (prefers-reduced-motion:reduce) {
    *, *::before, *::after { transition-duration:.01ms!important; animation-duration:.01ms!important; }
    .hero-slide { transition:none; }
}

/* Landscape en móvil */
@media (max-height:450px) and (orientation:landscape) {
    .home-info { padding-top:calc(var(--safe-top) + 60px); }
    .main-tag  { font-size:2rem; }
    .glass-menu { width:55%; }
}