/* =====================================================
   ABEL DENTAL - Estilos Web Pública
   Paleta: Teal (#009B8D) + Naranja (#E8A020) del logo
   ===================================================== */
:root {
    --primary:        #0d3833;   /* Verde oscuro para títulos */
    --primary-light:  #1a5c52;
    --accent:         #009B8D;   /* Teal principal (logo) */
    --accent-hover:   #007A6E;
    --accent-orange:  #E8A020;   /* Naranja/dorado (logo) */
    --accent-orange-h:#c98a10;
    --text-main:      #2d3748;
    --text-muted:     #64748b;
    --bg-main:        #ffffff;
    --bg-light:       #f0faf9;   /* Teal muy suave */
    --bg-steel:       #e2e8f0;
    --white:          #ffffff;
    --border-radius:  12px;
    --transition:     all 0.3s ease;
    --shadow-sm:      0 4px 6px -1px rgba(0,0,0,0.05);
    --shadow-md:      0 10px 15px -3px rgba(0,0,0,0.08);
    --shadow-lg:      0 20px 25px -5px rgba(0,0,0,0.1);
}

/* Base */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body { font-family:'Inter',sans-serif; color:var(--text-main); background:var(--bg-main); line-height:1.6; overflow-x:hidden; }
h1,h2,h3,h4,h5,h6,.logo { font-family:'Outfit',sans-serif; color:var(--primary); }
a { text-decoration:none; color:var(--accent); transition:var(--transition); }
ul { list-style:none; }
img { max-width:100%; height:auto; display:block; }

.container { width:100%; max-width:1200px; margin:0 auto; padding:0 20px; }
.section { padding:80px 0; }
.section-subtitle { display:block; color:var(--accent-orange); font-weight:600; text-transform:uppercase; letter-spacing:1px; font-size:0.9rem; margin-bottom:10px; }
.section-header { margin-bottom:50px; }
.section-header h2 { font-size:2.5rem; margin-bottom:15px; }
.text-center { text-align:center; }
.bg-light { background-color:var(--bg-light); }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 24px; border-radius:50px; font-weight:600; font-size:1rem; cursor:pointer; transition:var(--transition); border:2px solid transparent; }
.btn-large { padding:16px 32px; font-size:1.1rem; }
.btn-primary { background:var(--accent); color:var(--white); }
.btn-primary:hover { background:var(--accent-hover); color:var(--white); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-orange { background:var(--accent-orange); color:var(--white); }
.btn-orange:hover { background:var(--accent-orange-h); color:var(--white); transform:translateY(-2px); }
.btn-outline { background:transparent; border-color:var(--primary); color:var(--primary); }
.btn-outline:hover { background:var(--primary); color:var(--white); transform:translateY(-2px); }
.btn-block { width:100%; }

/* Navbar */
#header { position:fixed; top:0; left:0; width:100%; background:rgba(255,255,255,0.96); backdrop-filter:blur(10px); z-index:1000; transition:var(--transition); border-bottom:1px solid rgba(0,0,0,0.05); }
#header.scrolled { box-shadow:var(--shadow-sm); }
.navbar { display:flex; justify-content:space-between; align-items:center; height:80px; transition:var(--transition); }
#header.scrolled .navbar { height:70px; }

.logo { display:flex; align-items:center; gap:10px; }
.logo img { height:50px; width:auto; }
.logo-text { font-size:1.3rem; font-weight:700; color:var(--primary); }

.nav-links { display:flex; gap:28px; align-items:center; }
.nav-links a { color:var(--primary); font-weight:500; position:relative; font-size:0.95rem; }
.nav-links a:not(.btn-nav-login)::after { content:''; position:absolute; bottom:-5px; left:0; width:0; height:2px; background:var(--accent); transition:var(--transition); }
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }

/* Botón login en navbar */
.btn-nav-login { background:var(--accent-orange); color:var(--white) !important; padding:9px 20px; border-radius:50px; font-weight:600; font-size:0.9rem; transition:var(--transition); display:inline-flex; align-items:center; gap:7px; }
.btn-nav-login:hover { background:var(--accent-orange-h); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.btn-nav-login::after { display:none !important; }

.menu-toggle { display:none; font-size:1.5rem; cursor:pointer; color:var(--primary); background:none; border:none; }

/* WhatsApp flotante */
.floating-wpp { 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:30px; box-shadow:var(--shadow-lg); z-index:1000; transition:var(--transition); }
.floating-wpp:hover { transform:scale(1.1); color:white; }

/* Hero */
.hero { min-height:100vh; padding-top:80px; display:flex; align-items:center; background:linear-gradient(135deg, rgba(13,56,51,0.07) 0%, rgba(255,255,255,0.95) 60%), url('https://images.unsplash.com/photo-1606811841689-23dfddce3e95?auto=format&fit=crop&w=1920&q=80') center/cover no-repeat; }
.hero-content { max-width:800px; }
.hero h1 { font-size:3.5rem; line-height:1.1; margin-bottom:20px; font-weight:800; }
.hero h1 span { color:var(--accent); }
.hero h1 em { color:var(--accent-orange); font-style:normal; }
.hero p { font-size:1.2rem; color:var(--text-muted); margin-bottom:40px; max-width:600px; }
.hero-buttons { display:flex; gap:20px; margin-bottom:50px; flex-wrap:wrap; }
.hero-stats { display:flex; gap:40px; padding-top:30px; border-top:1px solid var(--bg-steel); flex-wrap:wrap; }
.stat { display:flex; align-items:center; gap:10px; }
.stat-number { font-size:2.5rem; font-weight:700; font-family:'Outfit',sans-serif; color:var(--primary); }
.stat-text { font-size:0.9rem; color:var(--text-muted); line-height:1.2; }

/* About */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.about-image { position:relative; border-radius:var(--border-radius); overflow:visible; }
.about-image img { border-radius:var(--border-radius); box-shadow:var(--shadow-lg); }
.experience-badge { position:absolute; bottom:-20px; right:-20px; background:var(--primary); color:var(--white); padding:20px 30px; border-radius:var(--border-radius); display:flex; align-items:center; gap:15px; box-shadow:var(--shadow-lg); }
.experience-badge i { font-size:2.5rem; color:var(--accent-orange); }
.experience-badge strong { display:block; font-size:1.5rem; font-family:'Outfit',sans-serif; }
.experience-badge span { font-size:0.9rem; opacity:0.9; }
.about-text h2 { font-size:2.2rem; margin-bottom:20px; }
.about-text p { margin-bottom:20px; color:var(--text-muted); }
.about-features { margin-top:30px; }
.about-features li { display:flex; align-items:center; gap:10px; margin-bottom:15px; font-weight:500; color:var(--primary); }
.about-features i { color:var(--accent-orange); font-size:1.2rem; }

/* Services */
.services-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:30px; }
.service-card { background:var(--white); padding:40px 30px; border-radius:var(--border-radius); box-shadow:var(--shadow-sm); transition:var(--transition); border-bottom:3px solid transparent; }
.service-card:hover { transform:translateY(-10px); box-shadow:var(--shadow-lg); border-bottom-color:var(--accent-orange); }
.service-icon { width:70px; height:70px; background:var(--bg-light); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:30px; color:var(--accent); margin-bottom:20px; transition:var(--transition); }
.service-card:hover .service-icon { background:var(--accent); color:var(--white); }
.service-card h3 { margin-bottom:15px; font-size:1.3rem; }
.service-card p { color:var(--text-muted); }

/* Gallery */
.gallery-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.gallery-item { border-radius:var(--border-radius); overflow:hidden; }
.gallery-item img { width:100%; height:300px; object-fit:cover; transition:transform 0.5s ease; }
.gallery-item:hover img { transform:scale(1.05); }

/* Testimonials */
.testimonials-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:30px; }
.testimonial-card { background:var(--white); padding:40px; border-radius:var(--border-radius); box-shadow:var(--shadow-sm); display:flex; flex-direction:column; }
.stars { color:var(--accent-orange); margin-bottom:20px; font-size:1.1rem; }
.testimonial-card p { color:var(--text-muted); font-style:italic; margin-bottom:30px; flex-grow:1; }
.patient { display:flex; align-items:center; gap:15px; margin-top:auto; }
.patient-avatar { width:50px; height:50px; background:var(--primary); color:var(--white); border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.2rem; font-family:'Outfit',sans-serif; }
.patient-info h4 { margin:0; font-size:1.1rem; }
.patient-info span { font-size:0.85rem; color:var(--text-muted); }

/* CTA */
.cta-section { background:linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%); padding:80px 0; color:var(--white); }
.cta-section h2 { color:var(--white); margin-bottom:20px; font-size:2.5rem; }
.cta-section p { font-size:1.2rem; margin-bottom:40px; opacity:0.9; }
.cta-btn { background:var(--accent-orange); color:var(--white); }
.cta-btn:hover { background:var(--accent-orange-h); color:var(--white); }

/* Contact */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:50px; margin-bottom:50px; }
.contact-info { display:flex; flex-direction:column; gap:20px; }
.info-card { display:flex; gap:20px; padding:20px; background:var(--bg-light); border-radius:var(--border-radius); align-items:flex-start; }
.info-icon { width:50px; height:50px; background:var(--white); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--accent); font-size:1.5rem; flex-shrink:0; }
.info-card h4 { margin-bottom:5px; }
.info-card p, .info-card span, .info-card a { color:var(--text-muted); font-size:0.95rem; }
.wpp-link { display:inline-flex; align-items:center; gap:5px; color:#25D366 !important; font-weight:500; margin-top:5px; }
.contact-form { background:var(--white); padding:40px; border-radius:var(--border-radius); box-shadow:var(--shadow-md); }
.contact-form h3 { margin-bottom:25px; font-size:1.5rem; }
.form-group { margin-bottom:20px; }
.form-group label { display:block; margin-bottom:8px; font-weight:500; color:var(--primary); }
.form-group input, .form-group select, .form-group textarea { width:100%; padding:12px 15px; border:1px solid var(--bg-steel); border-radius:8px; font-family:inherit; font-size:1rem; transition:var(--transition); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,155,141,0.1); }
.map-container { border-radius:var(--border-radius); overflow:hidden; box-shadow:var(--shadow-sm); }

/* Feedback formulario de contacto */
.form-feedback { padding:14px 18px; border-radius:10px; margin-bottom:20px; font-size:0.95rem; display:flex; align-items:center; gap:10px; }
.form-feedback.success { background:#dcfce7; color:#166534; border-left:4px solid #16a34a; }
.form-feedback.error   { background:#fee2e2; color:#991b1b; border-left:4px solid #dc2626; }

/* Footer */
footer { background:var(--primary); color:rgba(255,255,255,0.8); padding-top:80px; }
.footer-content { display:grid; grid-template-columns:2fr 1fr 1fr; gap:50px; margin-bottom:50px; }
.footer-logo { color:var(--white); margin-bottom:20px; display:flex; align-items:center; gap:10px; }
.footer-logo img { height:45px; filter:brightness(0) invert(1); }
.footer-col p { margin-bottom:20px; max-width:350px; }
.social-links { display:flex; gap:15px; }
.social-links a { display:flex; align-items:center; justify-content:center; width:40px; height:40px; background:rgba(255,255,255,0.1); color:var(--white); border-radius:50%; transition:var(--transition); }
.social-links a:hover { background:var(--accent-orange); }
.footer-col h4 { color:var(--white); margin-bottom:25px; font-size:1.2rem; }
.footer-col ul li { margin-bottom:12px; }
.footer-col ul a { color:rgba(255,255,255,0.8); transition:var(--transition); }
.footer-col ul a:hover { color:var(--accent-orange); padding-left:5px; }
.footer-bottom { background:rgba(0,0,0,0.2); padding:20px 0; text-align:center; font-size:0.9rem; }

/* Animations */
.animate-up { opacity:0; transform:translateY(30px); transition:opacity 0.8s ease, transform 0.8s ease; }
.animate-fade { opacity:0; transition:opacity 1s ease; }
.in-view { opacity:1; transform:translateY(0); }

/* Responsive */
@media (max-width:992px) {
    .hero h1 { font-size:2.8rem; }
    .about-grid { grid-template-columns:1fr; gap:40px; }
    .experience-badge { right:20px; }
    .gallery-grid { grid-template-columns:1fr; }
    .contact-grid { grid-template-columns:1fr; }
    .footer-content { grid-template-columns:1fr 1fr; }
}

@media (max-width:768px) {
    .menu-toggle { display:block; }
    .nav-links { position:absolute; top:80px; left:-100%; width:100%; background:var(--white); flex-direction:column; align-items:center; padding:30px 0; box-shadow:var(--shadow-md); transition:var(--transition); gap:16px; }
    .nav-links.active { left:0; }
    .hero { padding-top:100px; text-align:center; }
    .hero h1 { font-size:2.2rem; }
    .hero p { margin:0 auto 30px; }
    .hero-buttons { flex-direction:column; align-items:center; }
    .hero-stats { justify-content:center; }
    .section { padding:50px 0; }
    .section-header h2 { font-size:2rem; }
    .footer-content { grid-template-columns:1fr; }
}