/* ========================================= */
/* 1. VARIABLES Y CONFIGURACIÓN GENERAL      */
/* ========================================= */
:root {
    --azul-noche: #152C39;       
    --rojo-coral: #FF6B6B;       
    --rojo-oscuro: #EE5253;
    --verde-tracking: #20b140;
    --verde-tracking-hover: #1a8f34;
    --blanco-puro: #FFFFFF;
    --blanco-hielo: #F4F7F9;
    --texto-principal: #2D3436;
    --texto-secundario: #636E72;
    --font-titulos: 'Baloo 2', cursive;
    --font-cuerpo: 'Poppins', sans-serif;
    --sombra-card: 0 10px 30px rgba(0, 0, 0, 0.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--font-cuerpo);
    background-color: var(--blanco-hielo);
    color: var(--texto-principal);
    line-height: 1.6;
    overflow-x: hidden;
    width: 100%;
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.hidden { display: none !important; }

/* ========================================= */
/* 2. BOTONES & NIEVE                        */
/* ========================================= */
.btn {
    display: inline-block; padding: 12px 30px; border-radius: 50px;
    text-decoration: none; font-weight: 700; font-size: 0.95rem;
    transition: all 0.3s ease; border: none; cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); text-align: center; color: var(--blanco-puro);
}
.btn-primary { background-color: var(--rojo-coral); }
.btn-primary:hover { background-color: var(--rojo-oscuro); transform: translateY(-2px); }
.btn-green { background-color: var(--verde-tracking); }
.btn-green:hover { background-color: var(--verde-tracking-hover); transform: translateY(-2px); }
.btn-secondary { background-color: transparent; border: 2px solid var(--blanco-puro); }
.btn-secondary:hover { background-color: var(--blanco-puro); color: var(--azul-noche); transform: translateY(-2px); }

/* Animación Pulse */
.btn-pulse { animation: pulse-red 2s infinite; }
@keyframes pulse-red { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }

#global-snow-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; }
.snowflake { position: absolute; top: -10px; background: white; border-radius: 50%; opacity: 0.8; animation: snowfall linear infinite; }
@keyframes snowfall { 0% { transform: translateY(-10vh); opacity: 1; } 100% { transform: translateY(110vh); opacity: 0; } }

/* ========================================= */
/* 3. NAVEGACIÓN                             */
/* ========================================= */
.main-nav { position: absolute; top: 0; left: 0; width: 100%; background: transparent; z-index: 1000; padding-top: 25px; }
.nav-container { display: flex; justify-content: flex-end; align-items: center; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.nav-logo { display: none; } 
.nav-links { list-style: none; display: flex; gap: 30px; }
.nav-links a { text-decoration: none; color: var(--blanco-puro); font-weight: 600; font-size: 1rem; opacity: 0.9; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.nav-links a:hover { opacity: 1; text-decoration: underline; }

.hamburger { display: none; cursor: pointer; z-index: 1001; }
.bar { display: block; width: 25px; height: 3px; margin: 5px auto; background-color: var(--blanco-puro); transition: all 0.3s ease-in-out; }
.hamburger.active .bar:nth-child(2) { opacity: 0; }
.hamburger.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ========================================= */
/* 4. HERO SECTION (HOME)                    */
/* ========================================= */
.hero-banner {
    /* CACHÉ BUSTING: ?v=FORCE_UPDATE fuerza la carga de la imagen nueva */
    background: url('../assets/hero_banner.jpg?v=FORCE_UPDATE') no-repeat center center;
    background-size: cover; position: relative; min-height: 650px;
    display: flex; align-items: center; justify-content: flex-start;
    border-bottom-left-radius: 50% 40px; border-bottom-right-radius: 50% 40px; overflow: hidden;
}
.hero-content { position: relative; z-index: 2; max-width: 900px; margin-left: 13%; margin-top: -100px; display: flex; flex-direction: column; align-items: flex-start; }
.hero-logo { max-width: 250px; height: auto; margin-bottom: -10px; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3)); }
.hero-content h1 { font-family: var(--font-titulos); font-size: 3rem; line-height: 1.1; margin-bottom: 10px; color: var(--blanco-puro); text-shadow: 0 4px 15px rgba(0,0,0,0.5); }
.hero-content p { font-size: 1rem; color: var(--blanco-puro); margin-bottom: 40px; font-weight: 500; text-shadow: 0 2px 8px rgba(0,0,0,0.6); max-width: 110%; }
.hero-buttons { display: flex; justify-content: flex-start; gap: 15px; width: 100%; }

/* MINI HERO (Para Tracking y FAQ) */
.mini-hero { 
    background: url('../assets/hero_banner.jpg?v=FORCE_UPDATE') no-repeat center center;
    background-size: cover; height: 350px; display: flex; align-items: center; justify-content: center;
    text-align: center; color: var(--blanco-puro); border-bottom-left-radius: 50% 30px; border-bottom-right-radius: 50% 30px; margin-top: -1px;
    position: relative;
}
.mini-hero-overlay {
    position: absolute; top:0; left:0; width:100%; height:100%;
    background: rgba(21, 44, 57, 0.6); /* Capa oscura para leer texto */
    z-index: 1;
}
.mini-hero-content { position: relative; z-index: 2; padding: 0 20px;}
.mini-hero-content h1 { font-family: var(--font-titulos); font-size: 3rem; text-shadow: 0 4px 10px rgba(0,0,0,0.4); margin-bottom: 10px;}
.mini-hero-content p { font-size: 1.1rem; max-width: 600px; margin: 0 auto; opacity: 0.9; }

/* ========================================= */
/* 5. SECCIONES COMUNES (Títulos)            */
/* ========================================= */
.full-page-section { min-height: 60vh; padding: 60px 0; }
.section-title {
    font-family: var(--font-titulos); color: var(--azul-noche); font-size: 2.5rem;
    text-align: center; margin-bottom: 15px; display: inline-block; width: 100%;
    text-transform: uppercase; letter-spacing: 1px;
}
.magic-star::before, .magic-star::after {
    content: '✦'; color: #FFD700; font-size: 1.5rem; vertical-align: middle; display: inline-block;
    animation: twinkle 2s infinite ease-in-out;
}
.magic-star::before { margin-right: 15px; transform: translateY(-5px); }
.magic-star::after { margin-left: 15px; transform: translateY(-5px); animation-delay: 1s; }
@keyframes twinkle { 0%, 100% { opacity: 0.5; transform: scale(0.8) translateY(-5px); } 50% { opacity: 1; transform: scale(1.2) translateY(-5px) rotate(15deg); } }

/* ========================================= */
/* 6. ESTILOS DE TRACKING / RADAR            */
/* ========================================= */
.tracking-section-bg { background: var(--blanco-hielo); }
.tracking-panel { 
    background: var(--blanco-puro); 
    border-radius: 30px; 
    box-shadow: 0 20px 60px rgba(0,0,0,0.08); 
    padding: 50px; 
    max-width: 800px; width: 100%;
    text-align: center;
}

.input-group-tracking {
    display: flex;
    background: #F0F4F8;
    border-radius: 50px;
    padding: 5px;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.03);
    border: 2px solid #E6EBF1;
    transition: border-color 0.3s;
    margin-bottom: 10px;
}
.input-group-tracking:focus-within { border-color: var(--rojo-coral); background: #fff; }
.input-group-tracking input {
    border: none; background: transparent; padding: 15px 25px;
    font-size: 1.1rem; flex-grow: 1; color: var(--azul-noche); font-weight: 600;
}
.input-group-tracking input:focus { outline: none; }
.input-group-tracking button {
    border-radius: 50px; padding: 12px 30px; font-size: 0.9rem;
    text-transform: uppercase; letter-spacing: 1px; margin: 2px;
}

/* MARCO POLAROID */
.polaroid-frame { 
    background: #fff; 
    padding: 15px 15px 50px 15px; 
    box-shadow: 0 15px 40px rgba(0,0,0,0.15); 
    transform: rotate(-1deg);
    border-radius: 5px;
    position: relative; 
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid #eee;
    margin-top: 40px;
    overflow: hidden;
}
.polaroid-frame:hover { transform: rotate(0deg) scale(1.01); }

.polaroid-frame img {
    width: 100%; height: auto; min-height: 400px;
    object-fit: cover; display: block;
    background: #152C39; filter: contrast(1.1) saturate(1.1);
    border-radius: 3px;
}

/* BADGE EN VIVO */
.live-badge {
    position: absolute; top: 25px; left: 25px;
    background: rgba(220, 20, 60, 0.9);
    color: white; padding: 6px 12px;
    font-weight: 800; font-size: 0.8rem; border-radius: 4px;
    backdrop-filter: blur(4px); display: flex; align-items: center; gap: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4); z-index: 20;
    border: 1px solid rgba(255,255,255,0.3); letter-spacing: 1px;
}
.blink-dot {
    width: 10px; height: 10px; background: #fff; border-radius: 50%;
    box-shadow: 0 0 5px #fff; animation: blink 1s infinite;
}
@keyframes blink { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); } }

/* POPUP MÁGICO (Estilo Desktop por defecto) */
.popup-card {
    position: absolute; bottom: 20px; left: 20px; width: 300px;
    background: rgba(21, 44, 57, 0.95);
    color: #fff; backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 215, 0, 0.3); border-left: 4px solid var(--rojo-coral);
    border-radius: 12px; padding: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5); z-index: 30;
    opacity: 0; transform: translateY(20px); transition: all 0.5s ease;
    text-align: left !important;
}
.popup-card.show { opacity: 1; transform: translateY(0); display: block !important; }
.popup-header h3 { 
    color: #FFD700; font-family: var(--font-titulos); font-size: 1rem; margin: 0 0 8px 0;
    text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 5px;
}
.popup-body p { font-size: 0.9rem; color: #E0E6ED; line-height: 1.5; margin: 10px 0 15px 0; }
.popup-footer button {
    width: 100%; padding: 8px; font-size: 0.8rem; font-weight: 700; border-radius: 6px;
    background: var(--rojo-coral); color: #fff; border: none; cursor: pointer; transition: background 0.3s;
}
.popup-footer button:hover { background: var(--rojo-oscuro); }

.washi-tape {
    position: absolute; top: -15px; left: 50%; transform: translateX(-50%) rotate(2deg);
    width: 120px; height: 35px; background-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2); backdrop-filter: blur(2px); z-index: 5;
}

/* ========================================= */
/* 7. ESTILOS FORMULARIO & RESTO             */
/* ========================================= */
.order-section { background-color: var(--blanco-hielo); padding: 80px 0; }
.order-form { background: var(--blanco-puro); padding: 50px; border-radius: 25px; box-shadow: var(--sombra-card); max-width: 800px; margin: 0 auto; }
.form-group { margin-bottom: 15px; }
.form-group label { color: var(--azul-noche); font-weight: 600; margin-bottom: 8px; display: block; }
.form-group input, .form-group select { width: 100%; padding: 14px; border-radius: 12px; border: 2px solid #EEF2F7; background: #FAFBFC; transition: all 0.3s; }
.form-group input:focus { border-color: var(--rojo-coral); background: #fff; outline: none; }
.price-display-container { background: #EEF2F7; border-radius: 50px; padding: 15px 40px; text-align: center; width: fit-content; margin: 30px auto; display: flex; align-items: center; justify-content: center; gap: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.price-title { font-size: 0.9rem; color: var(--texto-secundario); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.total-price-text { color: var(--rojo-coral); font-family: var(--font-titulos); font-size: 2.5rem; font-weight: 800; line-height: 1; text-shadow: 2px 2px 0px rgba(0,0,0,0.05); }

/* CORRECCIÓN 2: RADIO BUTTONS ROJOS */
.quantity-selector {
    display: flex;
    gap: 15px;
    justify-content: center;
}
input[type="radio"] {
    accent-color: var(--rojo-coral); /* Cambia el color azul a Rojo Coral */
    transform: scale(1.2);
    margin-right: 5px;
    cursor: pointer;
}

/* Resto de estilos (Ritual, Bento, FAQ, Footer...) Se mantienen igual */
.ritual-section { padding: 40px 0; background: var(--blanco-hielo); position: relative; overflow: hidden; }
.section-subtitle { text-align: center; color: var(--texto-secundario); font-size: 1.1rem; margin-bottom: 50px; }
.ritual-container { max-width: 1000px; margin: 0 auto; position: relative; padding: 20px; }
.ritual-container::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background-image: linear-gradient(to bottom, var(--rojo-coral) 50%, transparent 50%); background-size: 2px 20px; transform: translateX(-50%); opacity: 0.3; z-index: 0; }
.ritual-step { display: flex; justify-content: space-between; align-items: center; margin-bottom: 80px; position: relative; z-index: 1; }
.ritual-content, .ritual-visual { width: 45%; }
.ritual-content { background: var(--blanco-puro); padding: 40px; border-radius: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.05); transition: transform 0.3s ease; border-bottom: 4px solid transparent; }
.ritual-step:hover .ritual-content { transform: translateY(-5px); border-bottom: 4px solid var(--rojo-coral); }
.step-number { font-family: var(--font-titulos); font-size: 6rem; color: var(--rojo-coral); line-height: 1; position: absolute; top: -30px; left: 10px; z-index: 0; opacity: 1; }
.ritual-content h3 { font-family: var(--font-titulos); color: var(--azul-noche); font-size: 1.5rem; margin-bottom: 15px; position: relative; z-index: 1; }
.ritual-content p { color: var(--texto-secundario); font-size: 1rem; position: relative; z-index: 1; }
.ritual-visual { display: flex; justify-content: center; align-items: center; }
.ritual-visual img { max-width: 80%; height: auto; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.15)); transition: transform 0.5s ease; }
.ritual-step:hover .ritual-visual img { transform: scale(1.05) rotate(2deg); }
.step-marker { position: absolute; left: 50%; transform: translateX(-50%); width: 35px; height: 35px; background: var(--rojo-coral); border: 5px solid var(--blanco-puro); border-radius: 50%; box-shadow: 0 0 0 5px rgba(255, 107, 107, 0.2); z-index: 2; }
.ritual-step:nth-child(even) { flex-direction: row-reverse; }
.ritual-step:nth-child(odd) .ritual-content { text-align: right; }
.ritual-step:nth-child(even) .ritual-content { text-align: left; }
.ritual-step:nth-child(odd) .step-number { right: 20px; left: auto; }
.what-it-includes { background-color: var(--blanco-puro); padding: 80px 0; }
.kit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; max-width: 1000px; margin: 0 auto; position: relative; }
.grid-group-title { grid-column: span 2; text-align: center; font-family: var(--font-titulos); color: var(--rojo-coral); font-size: 1.2rem; margin-top: 20px; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; }
.kit-card { background: var(--blanco-puro); border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.08); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); display: flex; flex-direction: column; height: 450px; border: 1px solid rgba(0,0,0,0.05); }
.kit-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.15); }
.card-image-wrapper { height: 72%; width: 100%; overflow: hidden; position: relative; }
.kit-card-img { height: 100%; width: 100%; object-fit: cover; transition: transform 0.8s ease; }
.kit-card:hover .kit-card-img { transform: scale(1.1); }
.card-content { height: 28%; padding: 15px 20px; display: flex; flex-direction: column; justify-content: center; background: #fff; position: relative; z-index: 2; }
.card-content h4 { font-family: var(--font-titulos); color: var(--azul-noche); font-size: 1.1rem; margin-bottom: 5px; line-height: 1.2; }
.card-content p { font-size: 0.85rem; color: var(--texto-secundario); line-height: 1.4; margin: 0; }
.price-floating { position: absolute; top: 25%; left: 43%; transform: translate(-50%, -50%); width: 140px; height: 140px; background: var(--rojo-coral); border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; color: white; box-shadow: 0 10px 30px rgba(255, 107, 107, 0.4); z-index: 10; animation: pulse-red 3s infinite; border: 4px solid var(--blanco-puro); }
.price-floating .currency { font-size: 1.2rem; font-weight: 600; }
.price-floating .amount { font-family: var(--font-titulos); font-size: 3.5rem; line-height: 0.9; }
.price-floating .label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; margin-top: 5px;}
.accordion-container { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 1000px; margin: 0 auto; }
.accordion-item { background: var(--blanco-puro); border-radius: 15px; box-shadow: 0 5px 20px rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.03); overflow: hidden; height: fit-content; transition: transform 0.2s; }
.accordion-item:hover { transform: translateY(-3px); }
.accordion-header { width: 100%; text-align: left; background: none; border: none; padding: 20px; cursor: pointer; font-size: 1rem; font-weight: 700; color: var(--azul-noche); display: flex; justify-content: space-between; align-items: center; transition: background 0.3s ease; border-left: 4px solid transparent; }
.accordion-header.active { background: #FFF5F5; color: var(--rojo-coral); border-left: 4px solid var(--rojo-coral); }
.accordion-header::after { content: '+'; font-size: 1.5rem; font-weight: 400; line-height: 1; color: var(--rojo-coral); transition: transform 0.3s ease; margin-left: 15px; }
.accordion-header.active::after { transform: rotate(45deg); color: var(--rojo-oscuro); }
.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; background: var(--blanco-puro); }
.accordion-content > div { padding: 0 20px 20px 20px; color: var(--texto-secundario); font-size: 0.95rem; line-height: 1.6; }
.main-footer { background: var(--azul-noche); color: var(--blanco-puro); padding: 50px 0 15px 0; font-size: 0.9rem; border-top: 4px solid var(--rojo-coral); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; align-items: start; margin-bottom: 20px; }
.footer-logo-img { max-width: 120px; height: auto; display: block; margin-bottom: 0; }
.brand-desc { color: #BDC3C7; font-size: 0.8rem; line-height: 1.4; max-width: 350px;}
.footer-col h4 { color: var(--rojo-coral); font-family: var(--font-titulos); font-size: 1rem; margin-bottom: 12px; letter-spacing: 0.5px; text-transform: uppercase; }
.footer-menu { list-style: none; padding: 0; }
.footer-menu li { margin-bottom: 6px; }
.footer-menu a { color: #BDC3C7; text-decoration: none; font-size: 0.85rem; transition: color 0.3s ease; }
.footer-menu a:hover { color: var(--blanco-puro); text-decoration: underline; }
.social-icons { display: flex; gap: 15px; }
.social-icons img { width: 24px; height: 24px; transition: transform 0.3s; filter: brightness(0) invert(1); animation: pulse-red 2s infinite; }
.social-icons a:hover img { transform: scale(1.1); }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.15); padding-top: 15px; margin-top: 10px; text-align: center; }
.footer-bottom p { font-size: 0.75rem; color: #7f8c8d; margin: 0; }

/* ========================================= */
/* 9. RESPONSIVE (MÓVIL)                     */
/* ========================================= */
@media (max-width: 768px) {
    .hamburger { display: block; }
    .nav-links { position: fixed; right: -100%; top: 0; flex-direction: column; background-color: var(--azul-noche); width: 80%; height: 100vh; align-items: center; justify-content: center; transition: 0.3s; box-shadow: -5px 0 15px rgba(0,0,0,0.2); }
    .nav-links.active { right: 0; }
    .hero-banner { background-position: center bottom; text-align: center; justify-content: center; min-height: 700px; }
    .hero-content { margin-left: 0; align-items: center; padding: 0 20px; width: 100%; margin-top: 0; }
    .hero-content h1 { font-size: 2.2rem; }
    .hero-buttons { flex-direction: column; width: 100%; gap: 20px; }
    .btn { width: 100%; display: block; }
    .ritual-container::before { left: 20px; }
    .ritual-step { flex-direction: column !important; margin-bottom: 50px; align-items: flex-start; padding-left: 50px; }
    .step-marker { left: 20px; }
    .ritual-content, .ritual-visual { width: 100%; }
    .ritual-visual { margin-bottom: 20px; order: -1; }
    .ritual-content { text-align: left !important; padding: 25px; }
    .step-number { left: 20px !important; right: auto !important; }
    .accordion-container { grid-template-columns: 1fr; }
    .kit-grid { grid-template-columns: 1fr; gap: 20px; }
    .grid-group-title { grid-column: span 1; text-align: left; margin-top: 30px; }
    .price-floating { position: relative; top: auto; left: auto; transform: none; margin: 30px auto; }
    .kit-card { height: 400px; }
    .order-form { padding: 25px 20px; }
    .section-title { font-size: 2rem; }
    .price-display-container { flex-direction: column; gap: 5px; padding: 15px 30px; }
    .footer-grid { grid-template-columns: 1fr; text-align: center; gap: 25px; }
    .footer-logo-img, .brand-desc, .social-icons { margin: 0 auto 10px auto; justify-content: center; }

    /* CORRECCIÓN 1: TRACKING MÓVIL FULL SCREEN */
    .tracking-panel {
        padding: 20px 0px; /* Sin padding lateral para ganar todo el ancho */
        background: transparent; /* Fondo transparente en móvil para que parezca app */
        box-shadow: none;
    }
    
    .input-group-tracking { 
        flex-direction: column; gap: 10px; padding: 10px; 
        background: #fff; margin: 0 10px 10px 10px; /* Margen solo aquí */
        border-radius: 15px;
    }

    .polaroid-frame { 
        padding: 5px; 
        width: 100%;
        margin-top: 10px;
        transform: none; /* Quitamos rotación */
        border-radius: 0; /* Bordes rectos para full screen effect */
        border: none;
        box-shadow: none;
    }
    
    /* MAPA GIGANTE EN MÓVIL */
    .polaroid-frame img {
        height: auto;
        min-height: 70vh; /* Ocupa 70% de la altura de la pantalla */
        border-radius: 10px;
    }

    /* POPUP HORIZONTAL COMPACTO */
    .popup-card { 
        width: 94%; /* Casi todo el ancho */
        left: 3%;
        bottom: 10px;
        padding: 10px 15px;
        background: rgba(21, 44, 57, 0.95);
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-radius: 12px;
    }
    
    /* Header (Titulo) e info en una linea si cabe, o compactos */
    .popup-header h3 {
        font-size: 0.85rem; 
        margin-bottom: 2px;
        border-bottom: none;
        color: var(--rojo-coral);
    }
    
    .popup-body p {
        font-size: 0.8rem; /* Texto pequeño */
        margin: 2px 0 5px 0;
        line-height: 1.2;
    }
    
    /* Botón más pequeño */
    .popup-footer button {
        padding: 5px;
        font-size: 0.75rem;
        margin-top: 5px;
    }

    /* Badge más pequeño */
    .live-badge { 
        top: 15px; left: 15px; 
        padding: 4px 10px; font-size: 0.7rem; 
    }

    /* CORRECCIÓN 2: RADIO BUTTONS VERTICALES EN MÓVIL */
    .quantity-selector {
        flex-direction: column; /* Columna */
        align-items: flex-start; /* Alineado a la izquierda */
        padding-left: 20px; /* Un poco de margen */
        gap: 15px;
        margin-top: 15px;
    }
    
    .quantity-selector label {
        width: 100%;
        display: flex;
        align-items: center;
        font-size: 1.1rem;
        color: var(--azul-noche);
    }
}