<style>
        /* 1. OCULTACIÓN DE ELEMENTOS EXTERNOS */
        .joinchat, .joinchat--right, [class*="whatsapp-button"], [id*="whatsapp-floating"] { display: none !important; }
        
        /* 2. CONFIGURACIÓN BASE */
        body { margin: 0; padding: 0; background-color: #000; touch-action: manipulation; }
        #bravatta-calc-container { font-family: 'Segoe UI', Arial, sans-serif !important; width: 100% !important; max-width: 100% !important; margin: 0 auto; background-color: #000 !important; color: #ffffff !important; position: relative; padding-bottom: 30px; }
        
        /* 3. LOGOTIPO */
        .header-logo { width: 100%; padding: 10px 10px 0 10px; box-sizing: border-box; text-align: center; }
        .header-logo img { width: 100%; height: auto; display: block; margin: 0 auto; }
        
        /* 4. HERO HEADER */
        .hero-header { position: relative; width: 100%; height: 90px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
        .img-calculadora { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('https://bravatta.com/lib_content/uploads/2026/01/calculadora.jpg') no-repeat center center; background-size: cover; z-index: 1; animation: pulseHero 8s infinite alternate ease-in-out; }
        @keyframes pulseHero { 0% { transform: scale(1); filter: brightness(1); } 100% { transform: scale(1.1); filter: brightness(1.3); } }
        
        /* 5. AVISO 18 AÑOS */
        #aviso-18-rojo { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 0, 0, 0.9); color: #fff; padding: 10px 20px; text-align: center; font-weight: bold; font-size: 11px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 200 !important; opacity: 0; transition: opacity 0.3s ease; }
        .close-aviso-text { position: absolute; bottom: 5px; right: 8px; font-size: 10px; color: #fff; font-weight: bold; text-transform: uppercase; }
        
        /* 6. GRID SYSTEM */
        .calc-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px; padding: 0 10px; margin-bottom: 8px; }
        .section-label { grid-column: span 2; font-size: 11px; font-weight: bold; color: #ffffff; margin: 8px 0 4px 0; text-transform: uppercase; text-align: center; letter-spacing: 1px; }
        
        /* 7. ESTILO DE INPUTS */
        .input-box { display: flex; flex-direction: column; }
        .input-box.full-width { grid-column: span 2; }
        .input-box label, .row-label span { font-size: 11px !important; margin-bottom: 2px; color: #ffffff !important; font-weight: bold !important; text-transform: uppercase; }
        .input-box input, .input-box select, .input-box textarea { background: #2a2a2a !important; border: 1px solid #444 !important; border-radius: 6px; padding: 0 8px !important; height: 34px !important; color: #ffffff !important; font-size: 16px !important; box-sizing: border-box; width: 100%; outline: none !important; color-scheme: dark !important; }
        .input-box textarea { height: 60px !important; padding: 8px !important; resize: none; }
        ::placeholder { color: white !important; opacity: 1; }
        
        /* 8. VALIDACIÓN VISUAL */
        .input-error { border: 3px solid #ff0000 !important; animation: blink-error 0.6s step-end infinite; }
        @keyframes blink-error { 0%, 100% { border-color: #ff0000; box-shadow: 0 0 10px #ff0000; } 50% { border-color: #ffffff; box-shadow: 0 0 20px #ffffff; } }
        
        /* 9. BOTONES DE SALA */
        .sala-btn { border: 2px solid #25D366; border-radius: 10px; padding: 5px !important; text-align: center; cursor: pointer; background: #1b3022; transition: 0.2s; color: #fff !important; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 75px; box-sizing: border-box; }
        .sala-btn h4 { margin: 0; font-size: 17px; font-weight: 800; text-shadow: 2px 2px 3px rgba(0,0,0,0.8); line-height: 1.1; }
        .sala-btn span { display: block; margin-top: 4px; font-size: 11px; color: #25D366 !important; font-weight: bold; }
        .sala-btn.active { background: rgba(37, 211, 102, 0.4) !important; border-color: #25D366 !important; }
        
        /* 10. BOTONES DE VIDEO Y ENVÍO */
        .btn-vid { border: 2px solid #25D366 !important; border-radius: 6px; padding: 4px; text-align: center; background: rgba(37, 211, 102, 0.2) !important; text-decoration: none !important; color: #fff !important; display: flex; align-items: center; justify-content: center; font-weight: bold; gap: 4px; font-size: 9px; height: 34px; width: 115px; flex-shrink: 0; }
        #btn-enviar { border: 2px solid #25D366 !important; border-radius: 10px; background: rgba(37, 211, 102, 0.2) !important; color: #fff !important; width: 100%; height: 46px; font-size: 16px; font-weight: bold; cursor: pointer; margin-top: 10px; gap: 8px; display: flex; align-items: center; justify-content: center; }
        #btn-enviar.error { background: #ff0000 !important; border-color: #ff0000 !important; }

        /* 11. EXTRAS */
        .extras-container { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 6px; padding: 0 10px 10px 10px; }
        .extra-card { position: relative; display: flex; align-items: center; font-size: 10px; background: #222; padding: 8px; border-radius: 6px; border: 1px solid #333; cursor: pointer; color: #fff; }
        .badge-free { position: absolute; right: 3px; top: 3px; background: rgba(37, 211, 102, 0.2) !important; color: white !important; font-size: 9px; padding: 2px 4px; border-radius: 3px; font-weight: bold; border: 1px solid #25D366 !important; display: none; }
        
        /* 12. TOTAL Y VERSIÓN */
        .footer-total { background: transparent; padding: 20px 10px; text-align: center; }
        #f-total { font-size: 52px; font-weight: 900; color: #ffffff; }
        .version-tag { position: absolute; bottom: 8px; right: 10px; font-size: 8px; color: #666; }
    </style>