/* 1. ROOT & RESET */
:root {--gold: #D4AF37;--gold-dark: #B89B4D;--gold-light: #E0C56E;--black: #0D0D0D;--charcoal: #1A1A1A;--light: #F5F5F7;--lighter: #FFFFFF;--gray: #A8A8B2;--border-color: #333333;--primary: var(--gold);--primary-dark: var(--gold-dark);--dark: var(--charcoal);--darker: var(--black);--text-light: var(--light);--text-gray: var(--gray);}
* { margin: 0;padding: 0;box-sizing: border-box;}html {scroll-behavior: smooth;}
body {font-family: 'Poppins', sans-serif;color: var(--text-light);line-height: 1.6;background-color: var(--darker);background-image: linear-gradient(to bottom, var(--darker) 0%, var(--dark) 100%);overflow-x: hidden;}
h1, h2, h3, h4, h5, h6 {font-family: 'Montserrat', sans-serif;font-weight: 800;line-height: 1.3;color: var(--lighter);}
.container {width: 100%;max-width: 1200px;margin: 0 auto;padding: 0 20px;}header {background-color: rgba(13, 13, 13, 0.92);backdrop-filter: blur(4px);box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);position: fixed;top: 0;width: 100%;z-index: 1000;border-bottom: 1px solid var(--border-color);}
.header-container {display: flex;justify-content: space-between;align-items: center;padding: 15px 0;}
.logo {font-size: 22px;font-weight: 800;color: var(--primary);text-decoration: none;display: flex;align-items: center;}
.logo-img {width: 32px;height: 32px;background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);border-radius: 8px;margin-right: 10px;display: flex;align-items: center;justify-content: center;color: var(--darker);font-size: 16px;}
.btn {display: inline-block;padding: 14px 32px;background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);color: var(--darker);border-radius: 6px;text-decoration: none;font-weight: 700;text-transform: uppercase;letter-spacing: 1px;font-size: 15px;transition: all 0.3s ease;box-shadow: 0 4px 15px rgba(212, 175, 55, 0.25);}
.btn:hover {transform: translateY(-3px);box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);}
.btn-whatsapp {background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);color: white;box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);}
.btn-whatsapp:hover {box-shadow: 0 8px 25px rgba(37, 211, 102, 0.45);}
.phone-mockup{width:100%;max-width:320px;margin:2rem auto;position:relative;}.opiniones-container{aspect-ratio:9/16;width:100%;background:#000;border-radius:40px;overflow:hidden;position:relative;box-shadow:0 20px 50px rgba(0,0,0,0.6);border:14px solid #111;}.opiniones-container::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:180px;height:30px;background:#000;border-bottom-left-radius:20px;border-bottom-right-radius:20px;z-index:10;}
.opiniones-container::after{content:'';position:absolute;bottom:-12px;left:50%;transform:translateX(-50%);width:120px;height:8px;background:#333;border-radius:10px;z-index:10;}.opiniones-container video{width:100%;height:100%;object-fit:cover;display:block;}
.section-title {text-align: center;margin-bottom: 60px;}
.section-title h2 {font-size: 2.6rem;margin-bottom: 20px;position: relative;display: inline-block;}
.section-title h2:after {content: '';position: absolute;width: 70px;height: 3px;background: linear-gradient(to right, var(--primary), var(--primary-dark));bottom: -12px;left: 50%;transform: translateX(-50%);border-radius: 2px;}
.section-title p {color: var(--text-gray);max-width: 700px;margin: 25px auto 0;font-size: 1.15rem;}
.hero {padding: 180px 0 100px;position: relative;text-align: center;}
.hero h1 {font-size: clamp(2.4rem, 6vw, 3.4rem);margin-bottom: 20px;line-height: 1.2;}
.hero p {font-size: 1.2rem;max-width: 700px;margin: 0 auto 40px;color: var(--text-gray);}
.card-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: 30px;margin-top: 40px;}.card {background: var(--dark);border: 1px solid var(--border-color);border-radius: 14px;padding: 30px;text-align: center;transition: transform 0.3s, box-shadow 0.3s;}
.card:hover {transform: translateY(-8px);box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);}.card-icon {width: 65px;height: 65px;background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);border-radius: 50%;display: flex;align-items: center;justify-content: center;margin: 0 auto 20px;color: var(--darker);font-size: 26px;}
.card h3 {font-size: 1.4rem;margin-bottom: 15px;color: var(--lighter);}.card p {color: var(--text-gray);font-size: 1rem;}.cta {padding: 100px 0;background: linear-gradient(135deg, rgba(21, 21, 21, 0.9) 0%, rgba(26, 26, 26, 0.95) 100%);text-align: center;position: relative;}
.cta h2 {font-size: 2.6rem;margin-bottom: 20px;}.cta p {max-width: 700px;margin: 0 auto 40px;color: var(--text-gray);font-size: 1.2rem;}
footer {background: var(--black);color: var(--text-gray);padding: 60px 0 30px;border-top: 1px solid var(--border-color);}
.footer-bottom {text-align: center;padding-top: 30px;border-top: 1px solid var(--border-color);font-size: 0.9rem;}
.whatsapp-float {position: fixed;bottom: 30px;right: 30px;width: 60px;height: 60px;background: #25D366;color: white;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 24px;box-shadow: 0 4px 20px rgba(37, 211, 102, 0.5);z-index: 999;text-decoration: none;animation: pulse 2s infinite;}
@keyframes pulse {0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }}
@media (max-width: 768px) {.hero h1 { font-size: 2.2rem; }.section-title h2 { font-size: 2.2rem; }.btn { padding: 12px 24px; font-size: 14px; }header .header-container { flex-direction: column; gap: 15px; }}
@media (max-width: 360px) {
    .hero-grid{padding-top:440px;}
    .phone-mockup{max-width:280px;}
}