/* styles.css */
body {
    font-family: 'Outfit', sans-serif;
}
:root { --primary: #fbbf24; --orange: #ff7e00; --beige: #d4c4a8; --dark-bg: #060002; --blue: #3b82f6; }

/* TODO tu CSS completo aquí */
        
        #welcome-screen {
            position:fixed;
            inset: 0;
            z-index: 9999;
            background: linear-gradient(180deg, #212d38 10%, #000d1b 50%, #000d1b 100%); display: flex; flex-direction: column; align-items: center; justify-content: space-between; transition: 0.8s; padding: 10px 15px 120px 15px; overflow-y: auto; overflow-x: hidden; }
        /* =========================
           NUBES ANIMADAS
        ========================= */
        .cloud {
            position: absolute;
            left: -200px;
            background: rgba(200, 210, 220, 0.6);
            border-radius: 50px;
            opacity: 0.08;

            box-shadow:
                30px 10px 0 10px white,
                60px 5px 0 5px white,
                90px 15px 0 8px white;

            animation: cloudMove linear infinite;
        }

        /* MOVIMIENTO */
        @keyframes cloudMove {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(120vw);
            }
        }

        /* PROFUNDIDAD */
        .cloud:nth-child(1) { z-index: 1; }
        .cloud:nth-child(2) { z-index: 2; }
        .cloud:nth-child(3) { z-index: 0; }
        .eco-pin-container { position: relative; display: flex; justify-content: center; align-items: center; margin-top: 50px; z-index: 10; animation: bouncePin 3s ease-in-out infinite; }
        .eco-pin-container img { width: 260px; filter: drop-shadow(0 20px 40px rgba(34,197,94,0.4)); }
        @keyframes bouncePin { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
        .floating-leaf {
            position: absolute;
            width: 75px;
            height: 75px;
            background: #54a32d; border-radius: 50% 50% 50% 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 22px; box-shadow: 0 10px 20px rgba(34, 197, 94, 0.4); animation: leafFloat 4s ease-in-out infinite; }
        .leaf-1 { top: 28%; left: 15%; }
        .leaf-2 { top: 28%; right: 15%; }
        .leaf-3 { top: 45%; left: 8%; }
        .leaf-4 { top: 45%; right: 8%; }
        .leaf-5 { top: 60%; left: 18%; }
        .leaf-6 { top: 60%; right: 18%; }
        @keyframes leafFloat { 0%, 100% { margin-top: 0; } 50% { margin-top: -12px; } }
        
        .floating-leaf img {
            width: 34px;
            height: 34px;
        }
        
        .welcome-content { width: 100%; max-width: 450px; display: flex; flex-direction: column; align-items: center; gap: 15px; z-index: 10; margin-bottom: 20px; }
        .input-box { width: 100%; margin-top: 40px; }
        input { width: 100%; padding: 16px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,0.3); background: rgba(0,0,0,0.5); color: white; text-align: center; font-size: 16px; outline: none; box-sizing: border-box; backdrop-filter: blur(10px); }
        .avatar-selection { display: flex; gap: 20px; justify-content: center; width: 100%; }
        .avatar-frame { width: 110px; height: 110px; border-radius: 20px; background: rgba(255,255,255,0.6); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.3s; box-shadow: 0 15px 35px rgba(0,0,0,0.1); }
        .avatar-frame.active { background: white; transform: scale(1.1); border-color: #54a32d; box-shadow: 0 15px 35px rgba(34, 197, 94, 0.4); }
        .avatar-frame img { width: 85px; height: 85px; object-fit: contain; }
        .btn-start { background: #54a32d; color: white; border: none; padding: 18px; width: 100%; border-radius: 15px; font-weight: 900; font-size: 16px; text-transform: uppercase; cursor: pointer; box-shadow: 0 10px 25px rgba(34, 197, 94, 0.5); transition: 0.3s; }
        .btn-start:active { transform: scale(0.95); }
        .glass-panel { background: rgba(255,255,255,0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.3); }
        .cyber-avatar { filter: drop-shadow(0 0 10px rgba(0, 200, 255, 0.8)) brightness(1.2); }
        #app-header {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            z-index: 8000;
            height: 75px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
            background: #212734;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }

        /* Logo */
        #app-header .logo {
            height: 90px;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 20px;
            filter: drop-shadow(0 10px 15px rgba(0,0,0,0.4));
        }

        /* Badge LIVE */
        #app-header .live-badge {
            font-size: 9px; line-height: 1.1; margin-top: 5px;
            background: red;
            padding: 2px 6px;
            border-radius: 5px;
            margin-left: 10px;
            color: white;
            font-weight: bold;
        }
        
        .avatar-box { position: absolute; bottom: 120px; left: 50%; transform: translateX(-50%); z-index: 2000; pointer-events: none; }
        .bubble { background: white; color: black; padding: 4px 10px; border-radius: 12px; font-weight: 900; font-size: 10px; position: absolute; top: -25px; left: 50%; transform: translateX(-50%); box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
        .avatar-img { width: 75px; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.4)); }

        .ticket { position: absolute; left: 10px; top: 120px; width: 200px; background: #d97760; z-index: 5000; padding: 15px 12px; border-radius: 12px; transform: translateX(-400px); transition: 0.6s; box-shadow: 0 10px 30px rgba(0,0,0,0.4); text-align: center; }
        .ticket.show { transform: translateX(0); }
        .ticket img { width: 100%; border-radius: 8px; border: 3px solid white; margin-bottom: 10px; }
        #qrcode { background: white; padding: 10px; margin: 10px 0; border-radius: 8px; display: flex; justify-content: center; }
        .promo-id { color: white; font-size: 10px; font-weight: 900; opacity: 0.8; margin-bottom: 10px; letter-spacing: 1px; }

        .info-card { position: absolute; top: 130px; left: 50%; transform: translateX(100vw); width: 280px; background: white; z-index: 9000; border-radius: 15px; padding: 15px; transition: 0.6s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 15px 40px rgba(0,0,0,0.3); }
        .info-card.show { transform: translateX(-50%); }
        .gallery-box { width: 100%; height: 180px; border-radius: 10px; overflow: hidden; cursor: pointer; margin-bottom: 10px; }
        .gallery-box img { width: 100%; height: 100%; object-fit: cover; }
        .dots { display: flex; justify-content: center; gap: 6px; padding-bottom: 5px; }
        .dot { width: 6px; height: 6px; background: #cbd5e1; border-radius: 50%; transition: 0.3s; }
        .dot.active { background: var(--orange); transform: scale(1.3); }

        #ad-banner { position: absolute; bottom: 20px; left: 10px; right: 10px; z-index: 4500; background: white; border-radius: 12px; padding: 15px; display: flex; align-items: center; gap: 12px; transform: translateY(250px); transition: 0.6s; box-shadow: 0 15px 45px rgba(0,0,0,0.4); }
        #ad-banner.show { transform: translateY(0); }

        .poi-container { position: relative; width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
        .poi-illustration { width: 100%; height: 100%; object-fit: contain; }
        .cam-badge { position: absolute; top: 0; right: 0; width: 36px; height: 36px; background: #5ca530; border: 2.5px solid white; border-radius: 8px; display: flex; align-items: center; justify-content: center; box-shadow: 0 5px 10px rgba(0,0,0,0.3); z-index: 10; }
        .simple-marker { width: 44px; height: 44px; background: #5ca530; border: 3px solid white; border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
        
        #map { position: absolute; inset: 0; z-index: 1; }
        #joystick { position: absolute; bottom: 120px; right: 25px; width: 80px; height: 80px; background: rgba(255,255,255,0.2); border-radius: 50%; z-index: 6000; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(5px); border: 2px solid white; }
        #stick { width: 40px; height: 40px; background: white; border-radius: 50%; }
        
        /* MEJORA BOTÓN */
        .btn-start {
          transition: all 0.3s ease;
        }

        .btn-start:active {
          transform: scale(0.97);
        }

        /* MEJORA INPUT */
        input {
          transition: 0.3s;
        }

        input:focus {
          box-shadow: 0 0 0 2px #2fb463;
        }

        /* AVATAR SELECCIÓN */
        .avatar.selected {
          border: 3px solid #2fb463;
          box-shadow: 0 0 15px rgba(47,180,99,0.5);
        }
        
        
        .city {
            position: absolute;
            bottom: 0;
            width: 200%; /* más ancho para scroll */
            height: 140px; /* más bajo para móvil */
            background: url('../img/city.png') repeat-x;
            background-size: auto 100%; /* 🔥 CLAVE */
            opacity: 0.25;
            z-index: 2;
            animation: cityMove 60s linear infinite;
        }
        
        .city p{
            position: absolute;
            bottom: 0;
        }

        /* movimiento suave tipo parallax */
        @keyframes cityMove {
            0% { background-position-x: 0; }
            100% { background-position-x: 1000px; }
        }
        
        @media (max-width: 768px) {
            .city {
                height: 110px;
                opacity: 0.2;
            }
        }
        

        .eco-pin-container{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .eco-pin-container img{
            width: 90%;
            margin-top:-10px;
            margin-bottom:10px;
        }

        .main-title{
            color:white;
            font-size:17px;
            font-weight:900;
            text-align:center;
            margin-top:-40px;
        }

        .main-subtitle{
            color:#74c91b;
            font-size:13px;
            text-align:center;
            margin-top:-10px;
        }
        
        .floating-leaf:hover{
            transform: scale(1.15);
            box-shadow: 0 15px 30px rgba(34,197,94,0.6);
        }
        .features{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 15px;
            gap: 20px;
            text-align: center;
        }

        .feature-item{
            flex: 1;
            position: relative;
        }

        .icon-circle{
            width: 48px;
            height: 48px;
            background: #5ca530;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 15px auto;
            box-shadow: 0 10px 25px rgba(34,197,94,0.5);
        }

        .icon-circle i{
            stroke: white !important;
            color: white !important;
            width: 20px;
            height: 20px;
        }
        .icon-circle svg{
            stroke: white !important;
            color: white !important;
        }

        .feature-item h3{
            color: white;
            font-size: 10px; line-height: 1.1;
            font-weight: 800;
            margin-bottom: 8px;
        }

        .feature-item p{
            color: #94a3b8;
            font-size: 9px; line-height: 1.1; margin-top: 5px;
        }
        .progress-bar {
          position: absolute;
          top: 0;
          left: 0;
          height: 4px;
          background: #00ff88;
          width: 100%;
          animation: progress 4s linear forwards;
        }

        @keyframes progress {
          from { width: 100%; }
          to { width: 0%; }
        }
        .close-btn {
          position: absolute;
          top: 10px;
          right: 12px;
          font-size: 20px;
          color: white;
          cursor: pointer;
          z-index: 10;
        }
#ads-start{
    z-index: 999999 !important;
}

#map{
    z-index: 1 !important;
}