/* ==================================== */
/* 1. VARIABLES Y RESET BÁSICO */
/* ==================================== */
:root {
    --primary-dark: #0B284B;
    --accent-gold: #DAA520;
    --text-dark: #333333;
    --text-light: #f0f0f0;
    --bg-light: #ffffff;
    --transition: .3s;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Open Sans', sans-serif;
    color: var(--text-dark);
    background-color: var(--bg-light);
    line-height: 1.6;
    padding-top: 0;
}

.container {
    max-width: 1200px;
    margin: auto;
    padding: 0 15px;
}

h1, h2, h3 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    line-height: 1.2;
}

h2 { font-size: 2.5rem; }

.section { padding: 80px 0; }
.text-center { text-align: center; }
.mt-3 { margin-top: 15px; }
.mt-4 { margin-top: 25px; }
.mt-5 { margin-top: 40px; }

/* ==================================== */
/* 2. BARRA SUPERIOR Y NAVEGACIÓN (NO FIJAS) */
/* ==================================== */
#top-contact-bar {
    background-color: var(--primary-dark);
    color: var(--text-light);
    padding: 8px 0;
    font-size: 0.9rem;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1050;
}

.top-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.contact-info i { margin-right: 5px; }

.phone-number {
    color: var(--accent-gold);
    font-weight: 700;
    margin-left: 5px;
}

.social-links a {
    color: var(--text-light);
    margin-left: 15px;
    transition: var(--transition);
}

.social-links a:hover {
    color: var(--accent-gold);
    transform: scale(1.1);
}

/* NAVEGACIÓN PRINCIPAL */
#navbar {
    background-color: var(--bg-light);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    z-index: 1040;
    padding: 15px 0;
}

.nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--primary-dark);
}

.logo-img {
    height: 40px;
}

/* Contenedor de links + botón */
.nav-links-wrapper {
    display: flex;
    align-items: center;
    gap: 15px; /* espacio entre links y botón */
}

.nav-links {
    display: flex;
    gap: 10px;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-dark);
    font-weight: 600;
    padding: 10px 15px;
    transition: var(--transition);
    text-transform: uppercase;
    font-size: 0.95rem;
}

.nav-links a:hover,
.nav-links a.active { color: var(--accent-gold); }

/* ==================================== */
/* 3. BOTONES Y ACENTOS */
/* ==================================== */
.btn-agendar, .btn-consulta {
    padding: 10px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.4s;
    display: inline-block;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.btn-agendar {
    background-color: var(--accent-gold);
    color: var(--primary-dark);
    border: 1px solid var(--accent-gold);
}

.btn-agendar:hover {
    background-color: var(--primary-dark);
    color: var(--text-light);
    border-color: var(--primary-dark);
    box-shadow: 0 5px 15px rgba(0,0,0,.2);
}

.btn-consulta {
    background-color: var(--primary-dark);
    color: var(--text-light);
    border: 1px solid var(--primary-dark);
}

.btn-consulta:hover {
    background-color: var(--accent-gold);
    color: var(--primary-dark);
    border-color: var(--accent-gold);
    transform: translateY(-2px);
}

/* ==================================== */
/* 4. SECCIÓN HERO */
.hero {
    padding: 120px 0 80px;
    background-color: #fcfcfc;
}

.hero h2 {
    font-size: 3.5rem;
    color: var(--primary-dark);
    margin-bottom: 20px;
}

.hero-description {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.2rem;
    color: #555;
}

/* ==================================== */
/* 5. SECCIÓN ACERCA DE MÍ */
.bg-light-gray { background-color: #f7f7f7; }

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.about-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,.1);
}

.about-content h2 { margin-bottom: 10px; font-size: 2rem; }
.about-content .role { font-size: 1.3rem; color: var(--accent-gold); font-weight: 600; margin-bottom: 20px; }
.about-content p { margin-bottom: 15px; color: #555; }
.about-content ul { list-style: none; margin: 20px 0; }
.about-content ul li { padding: 5px 0; font-weight: 600; }
.about-content ul li i { color: var(--accent-gold); margin-right: 10px; font-size: 1.1rem; }

/* ==================================== */
/* 6. SECCIÓN SERVICIOS */
.services-list-wrapper { max-width: 900px; margin: 40px auto; padding: 30px; background-color: #fff; border: 1px solid #ddd; border-radius: 8px; box-shadow:0 5px 15px rgba(0,0,0,.03); }
.services-list-wrapper h3 { text-align:center; color:var(--primary-dark); margin-bottom:25px; }
.services-list-grid { list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:15px 30px; }
.services-list-grid li { font-size:1.05rem; font-weight:600; color:var(--text-dark); }
.services-list-grid li i { color:var(--accent-gold); margin-right:8px; }

.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:50px; }
.service-box { position:relative; overflow:hidden; border-radius:8px; box-shadow:0 5px 20px rgba(0,0,0,.1); text-align:center; transition:.5s; }
.service-box img { width:100%; height:300px; object-fit:cover; display:block; transition:.5s; }
.service-title-overlay { background:rgba(0,0,0,.6); color:#fff; padding:10px 0; position:absolute; bottom:0; left:0; right:0; font-weight:600; font-size:1.1rem; z-index:10; }
.service-box .btn-agendar { position:absolute; bottom:-60px; left:50%; transform:translateX(-50%); z-index:20; opacity:0; transition:.5s; font-size:0.8rem; padding:8px 20px; }
.service-box:hover img { transform:scale(1.1); opacity:0.8; }
.service-box:hover .btn-agendar { bottom:20px; opacity:1; }

/* ==================================== */
/* 7. TESTIMONIOS Y FOOTER */
.testimonial-grid { display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-top:40px; }
.testimonial-card { background:var(--bg-light); border:1px solid #eee; padding:30px; border-radius:8px; box-shadow:0 5px 15px rgba(0,0,0,.05); transition:var(--transition); }
.testimonial-card:hover { box-shadow:0 10px 25px rgba(0,0,0,.15); transform:translateY(-5px); }
.testimonial-card p { font-style:italic; color:#444; margin-bottom:15px; }
.testimonial-card .stars i { color:var(--accent-gold); font-size:1rem; margin-right:2px; }
.testimonial-card h5 { font-weight:600; margin-top:10px; color:var(--primary-dark); }

#footer { background-color: var(--primary-dark); color: var(--text-light); padding-top:60px; }
.footer-grid { display:grid; grid-template-columns:2.5fr 1.5fr 1.5fr 1.5fr; gap:40px; padding-bottom:30px; }
.footer-col h4 { color:var(--accent-gold); margin-bottom:25px; font-weight:700; font-size:1.4rem; }
.footer-col p, .footer-col a { color:var(--text-light); margin-bottom:10px; text-decoration:none; display:block; transition:var(--transition); }
.footer-col a:hover { color:var(--accent-gold); padding-left:5px; }
.footer-col p i { margin-right:10px; }
.social-links-footer a { color:var(--accent-gold); border:1px solid var(--accent-gold); width:40px; height:40px; display:inline-flex; justify-content:center; align-items:center; border-radius:50%; margin-right:10px; margin-top:15px; }
.social-links-footer a:hover { background-color:var(--accent-gold); color:var(--primary-dark); transform:rotate(360deg); }
.copyright { background-color:#081d33; padding:15px 0; font-size:0.9rem; text-align:center; }
.copyright p { margin:0; color:rgba(255,255,255,.7); }
.copyright a { color:rgba(255,255,255,.9); }
.copyright a:hover { color:var(--accent-gold); }

/* ==================================== */
/* 8. BOTÓN FLOTANTE DE WHATSAPP */
.whatsapp-float { position:fixed; bottom:25px; right:25px; width:60px; height:60px; background-color:#25d366; color:white; border-radius:50%; text-align:center; font-size:30px; line-height:60px; z-index:10000; box-shadow:0 4px 8px rgba(0,0,0,.2); transition:.3s; }
.whatsapp-float:hover { transform:scale(1.1); box-shadow:0 6px 12px rgba(0,0,0,.3); }

/* ==================================== */
/* 9. MEDIA QUERIES (RESPONSIVE) */
@media (max-width: 992px) {
    .hero h2 { font-size:2.5rem; }
    .hero { padding:60px 0; }
    .about-grid, .testimonial-grid, .footer-grid { grid-template-columns:1fr; }
    .services-list-grid { grid-template-columns:repeat(2,1fr); }
    .services-grid { grid-template-columns:repeat(2,1fr); gap:20px; }
    .about-image { order:2; }
    .about-content { order:1; }

    /* NAV: links ocultos, botón sigue visible */
    .nav-links { display:none; }
}

@media (max-width: 768px) {
    .section { padding:60px 0; }
    .services-grid { grid-template-columns:1fr; }
    .services-list-grid { grid-template-columns:1fr; }
    #navbar .btn-agendar { padding:8px 15px; font-size:0.8rem; }
    .whatsapp-float { width:50px; height:50px; font-size:25px; line-height:50px; }
}