/* Estilos Exclusivos para la Página de Contacto Odontológico */
.contacto-odontologico {
    max-width: 1000px;
    margin: 0 auto;
    background: #ffffff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    line-height: 1.6;
}
.contacto-odontologico h1 {
    text-align: center;
    color: #0c4a60;
    font-size: 2.2rem;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.contacto-odontologico .subtitle {
    text-align: center;
    color: #718096;
    font-size: 1.2rem;
    margin-bottom: 40px;
    font-weight: 600;
}
.contacto-odontologico .ubicaciones-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-bottom: 40px;
}
.contacto-odontologico .card-consultorio {
    background: #f8fafc;
    border-top: 5px solid #00a896;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    text-align: center;
}
.contacto-odontologico .card-consultorio h3 {
    color: #0c4a60;
    font-size: 1.4rem;
    margin-bottom: 15px;
}
.contacto-odontologico .card-consultorio p {
    color: #4a5568;
    font-size: 1.1rem;
    margin-bottom: 5px;
}
.contacto-odontologico .central-turnos {
    background: #eef2f7;
    border: 1px solid #cbd5e1;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
}
.contacto-odontologico .central-turnos h2 {
    color: #0c4a60;
    font-size: 1.5rem;
    margin-bottom: 10px;
}
.contacto-odontologico .central-turnos .aclaracion {
    color: #64748b;
    font-size: 0.95rem;
    margin-bottom: 25px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.contacto-odontologico .botones-contacto {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 400px;
    margin: 0 auto;
}
.contacto-odontologico .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
    border-radius: 8px;
    transition: transform 0.2s, background-color 0.2s;
    color: #fff;
}
.contacto-odontologico .btn:hover {
    transform: translateY(-2px);
}
.contacto-odontologico .btn-telefono {
    background-color: #0284c7;
}
.contacto-odontologico .btn-telefono:hover {
    background-color: #0369a1;
}
.contacto-odontologico .btn-whatsapp {
    background-color: #25d366;
}
.contacto-odontologico .btn-whatsapp:hover {
    background-color: #21b858;
}
.contacto-odontologico .btn span {
    margin-left: 10px;
}

/* Ajuste automático para celulares */
@media (max-width: 768px) {
    .contacto-odontologico .ubicaciones-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .contacto-odontologico h1 {
        font-size: 1.8rem;
    }
}

/* =========================================================================
   ESTILOS GLOBAL / BLOQUE 1: HERO SECTION
   ========================================================================= */

.hero-section {
    background: linear-gradient(135deg, #d4e4ee 0%, #ffffff 100%)[cite: 2];
    min-height: 85vh;
}

/* Etiqueta flotante superior */
.hero-badge-premium {
    background-color: #acc0d8[cite: 2];
    color: #1e2d3d;
    font-weight: 600;
    letter-spacing: 1px;
}

/* Título principal */
.hero-title {
    color: #1e2d3d;
    line-height: 1.2;
}

/* Icono de verificación */
.hero-icon-check {
    color: #acc0d8[cite: 2];
}

/* Botón principal de conversión */
.btn-hero-primary {
    background-color: #1e2d3d;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.btn-hero-primary:hover {
    background-color: #16222e;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Botón secundario */
.btn-hero-secondary {
    border-radius: 8px;
    transition: all 0.3s ease;
}

.btn-hero-secondary:hover {
    transform: translateY(-2px);
}

/* Círculo difuminado decorativo detrás de la foto */
.hero-bg-blur {
    width: 105%;
    height: 105%;
    background-color: #acc0d8[cite: 2];
    opacity: 0.3;
    z-index: 1;
    filter: blur(15px);
}

/* Foto del profesional */
.hero-img-professional {
    z-index: 2;
    max-height: 500px;
    width: 100%;
    object-fit: cover;
}

<!-- =========================================================================
     BLOQUE: ACERCA DE NUESTRO CONSULTORIO
     ========================================================================= -->
<section class="about-section py-5">
    <div class="container py-4">
        <div class="row align-items-center g-5">
            
            <!-- Columna de Texto -->
            <div class="col-lg-6">
                <div class="about-content">
                    <!-- Etiqueta de Categoría (Estilo de la página) -->
                    <span class="badge text-uppercase mb-3 px-3 py-2 about-badge">
                        Trayectoria &amp; Compromiso
                    </span>
                    
                    <!-- Título Principal de la sección -->
                    <h2 class="display-5 fw-bold mb-4 about-title">
                        Nuestro Consultorio Dental
                    </h2>
                    
                    <!-- Párrafo Descriptivo -->
                    <p class="lead text-muted mb-4 about-text">
                        En nuestro consultorio dental, nos especializamos en brindar tratamientos de alta calidad en <strong>odontología</strong> y <strong>armonización orofacial</strong>. Nuestro equipo de profesionales está plenamente comprometido con la salud, la armonía y el bienestar integral de nuestros pacientes.
                    </p>
                    
                    <!-- Pequeño detalle de valor añadido (opcional, sumado para dar estatus) -->
                    <div class="pt-2">
                        <a href="#turnos-contacto" class="btn btn-about-primary fw-bold px-4 py-3 shadow-sm">
                            Conocé a Nuestro Equipo
                        </a>
                    </div>
                </div>
            </div>
            
            <!-- Columna de Imagen con Marcos Estilizados -->
            <div class="col-lg-6">
                <div class="position-relative about-img-wrapper">
                    <!-- Decoración geométrica sutil de fondo -->
                    <div class="position-absolute top-50 start-50 translate-middle rounded-4 about-img-bg"></div>
                    
                    <!-- Imagen de Pexels -->
                    <img src="https://images.pexels.com/photos/33881127/pexels-photo-33881127.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=650&amp;w=940" 
                         alt="Instalaciones de Nuestro Consultorio Dental - Dental Full Face" 
                         class="img-fluid rounded-4 shadow-lg position-relative about-img">
                </div>
            </div>

        </div>
    </div>
</section>