/* 1. ROOT & RESET */
:root{--blue:#007BFF;--blue-dark:#0056b3;--blue-light:#cce5ff;--gold:#D4AF37;--gold-dark:#B89B4D;--gold-light:#E0C56E;--black:#0D0D0D;--charcoal:#1A1A1A;--light:#F5F5F7;--lighter:#FFFFFF;--gray:#A8A8B2;--border-color:#333333;--primary:var(--blue);--primary-dark:var(--blue-dark);--primary-light:var(--blue-light);--accent:var(--gold);--accent-dark:var(--gold-dark);--accent-light:var(--gold-light);--dark:var(--charcoal);--darker:var(--black);--text-dark:var(--charcoal);--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-dark);line-height:1.6;background-color:var(--lighter);overflow-x:hidden;}
h1,h2,h3,h4,h5,h6{font-family:'Montserrat',sans-serif;font-weight:800;line-height:1.3;color:var(--dark);}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 20px;}
header{background-color:rgba(255,255,255,0.95);backdrop-filter:blur(10px);box-shadow:0 2px 20px rgba(0,0,0,0.1);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;border-radius:8px;margin-right:10px;display:flex;align-items:center;justify-content:center;color:var(--lighter);font-size:16px;}
.btn{display:inline-block;padding:14px 32px;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:var(--lighter);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(0,123,255,0.25);}
.btn:hover{transform:translateY(-3px);box-shadow:0 8px 25px rgba(0,123,255,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);}.section-title {text-align: center;margin-bottom: 60px;}.section-title h2 {font-size: 2.6rem;margin-bottom: 20px;position: relative;display: inline-block;color: var(--primary);}
.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;background: linear-gradient(135deg, var(--primary-light) 0%, var(--lighter) 100%);position: relative;text-align: center;}
.hero h1 {font-size: clamp(2.4rem, 6vw, 3.4rem);margin-bottom: 20px;line-height: 1.2;color: var(--dark);}
.hero p {font-size: 1.2rem;max-width: 700px;margin: 0 auto 40px;color: var(--text-gray);}
.precio-container {background: rgba(255, 255, 255, 0.9);backdrop-filter: blur(10px);border: 1px solid var(--border-color);padding: 20px;border-radius: 12px;display: inline-block;margin-top: 25px;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);}
.precio-descuento {font-size: 2rem;font-weight: 800;color: var(--primary);}
.reserva-nota {font-size: 0.95rem;color: var(--text-gray);margin-top: 10px;}
.card-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: 30px;margin-top: 40px;}
.card {background: var(--lighter);border: 1px solid var(--border-color);border-radius: 14px;padding: 30px;text-align: center;transition: transform 0.3s, box-shadow 0.3s;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);}
.card:hover {transform: translateY(-8px);box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);}
.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(--lighter);font-size: 26px;}
.card h3 {font-size: 1.4rem;margin-bottom: 15px;color: var(--dark);}
.card p {color: var(--text-gray);font-size: 1rem;}
.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;}
.cta {padding: 100px 0;background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);text-align: center;position: relative;color: white;}
.cta h2 {font-size: 2.6rem;margin-bottom: 20px;}.cta p {max-width: 700px;margin: 0 auto 40px;color: rgba(255, 255, 255, 0.9);font-size: 1.2rem;}
footer {background: var(--dark);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;}
.antes-despues-container {display: flex;gap: 10px;margin-bottom: 15px;}
/* 6. CAROUSEL STYLES (VERSIÓN IMÁGENES APILADAS) */.carousel-wrapper{position:relative;width:100%;max-width:1100px;margin:0 auto;padding:0 40px}.carousel-viewport{overflow:hidden;width:100%}.recomendaciones-carousel{display:flex;gap:30px;transition:transform .5s ease;padding-bottom:20px}.carousel-btn{position:absolute;top:40%;transform:translateY(-50%);background:rgba(255,255,255,.9);color:var(--dark);border:1px solid var(--border-color);border-radius:50%;width:44px;height:44px;cursor:pointer;z-index:10;transition:all .3s ease;box-shadow:0 2px 10px rgba(0,0,0,.1)}.carousel-btn:hover{background:var(--primary);color:white;border-color:var(--primary)}.carousel-btn:disabled{opacity:.3;cursor:not-allowed}.carousel-btn.prev{left:0}.carousel-btn.next{right:0}.recomendacion-card{display:flex;flex-direction:column;box-shadow:0 5px 15px rgba(0,0,0,.05);border-radius:12px;overflow:hidden;border:1px solid var(--border-color);background:var(--lighter);flex:0 0 100%;max-width:100%}.antes-despues-container-stacked{display:flex;flex-direction:column;gap:4px;background-color:#000}.recomendacion-card .imagen-wrapper{position:relative;height:auto;width:100%}.recomendacion-card .recomendacion-img{width:100%;height:auto;object-fit:cover;display:block}.recomendacion-card .etiqueta-img{position:absolute;top:10px;left:10px;background:rgba(0,0,0,.6);color:#fff;padding:4px 8px;border-radius:4px;font-size:.75rem;font-weight:700}.recomendacion-card .contenido-texto{padding:20px;text-align:center}.recomendacion-card p{font-size:1rem;color:var(--text-dark);margin-bottom:10px}.recomendacion-card strong{display:block;font-size:.9rem;color:var(--primary)}@media (max-width:768px){.carousel-wrapper{padding:0}.carousel-btn{display:none}.recomendaciones-carousel{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-left:20px;padding-right:20px;gap:15px}.recomendacion-card{scroll-snap-align:center;flex-basis:85%}}@media (min-width:769px){.recomendacion-card{flex-basis:calc(50% - 15px)}}@media (min-width:1024px){.recomendacion-card{flex-basis:calc(33.333% - 20px)}}
.imagen-wrapper {position: relative;width: 75%;}
.imagen-wrapper img{display:block;width:100%;height:auto}
.recomendacion-img {width: 100%;height: auto; display: block; border-radius: 8px;}
.etiqueta-img {position: absolute; top: 8px; left: 8px; background-color: rgba(0, 0, 0, 0.6); color: white; padding: 4px 8px;border-radius: 4px; font-size: 12px;font-weight: bold;}
@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); }}
/* 11. RESPONSIVE */
@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; }}
/* Hero layout optimizado */
.hero-container {display: grid;grid-template-columns: 1fr 1fr;gap: 40px;align-items: center;max-width: 1200px;margin: 0 auto;  padding: 0 20px;}.hero-content {text-align: left;}.hero-content .social-proof {margin-bottom: 20px;}.hero-content h1 {font-size: clamp(2.2rem, 4.5vw, 3.2rem);line-height: 1.2;margin-bottom: 20px;}.hero-content p {font-size: 1.25rem;margin-bottom: 30px;color: var(--text-gray);}.hero-image {display: flex;justify-content: center;align-items: center;}.hero-image img {max-width: 100%;height: auto;border-radius: 12px;box-shadow: 0 10px 30px rgba(0,0,0,0.1);width: auto;max-height: 450px;object-fit: contain;}
        /* Móvil: imagen arriba, texto centrado  */
@media (max-width: 768px) {.hero-container {grid-template-columns: 1fr;text-align: center;gap: 30px;}.hero-content {text-align: center;}.hero-content h1 {font-size: 2.2rem;}.hero-image img {max-height: 320px;}}