/* ================= RESET ================= */

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

/* ================= BASE ================= */

body{
    font-family:'Plus Jakarta Sans', sans-serif;
    color:#222820;
    background:#ffffff;
    overflow-x:hidden;
    line-height:1.6;
}

/* ================= HEADER ================= */

.header {
    position: fixed; /* Esto lo deja anclado a la pantalla */
    top: 0;
    left: 0;
    width: 100%;
    padding: 15px 0;
    background-color: white; /* Importante poner fondo para que no se transparente el contenido al bajar */
    z-index: 2000; /* Asegura que esté por encima de todo */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* Sombra sutil para dar profundidad al bajar */
    transition: all 0.3s ease;
}

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

.home-group{
    display:flex;
    align-items:center;
    gap:15px;
}

.deco-circle{
    width:40px;
    height:40px;
    border:2px solid #ACBFA9;
    border-radius:50%;
}

.home-pill{
    text-decoration:none;
    font-size:14px;
    letter-spacing:6px;
    color:#ACBFA9;
    padding:11px 30px;
    border:2px solid #ACBFA9;
    border-radius:40px;
    text-transform:uppercase;
    font-weight:600;
    transition:.3s;
}

.home-pill:hover{
    background:#ACBFA9;
    color:white;
}

.nav{
    display:flex;
    gap:12px;
}

.nav a{
    text-decoration:none;
    color:#222820;
    padding:10px 26px;
    border:2px solid #ACBFA9;
    border-radius:35px;
    font-size:14px;
    font-weight:500;
    transition:.3s;
}

.nav a:hover{
    background:#ACBFA9;
    color:white;
}

/* ================= BRANDING ================= */

.branding-area {
    margin: 90px 0 10px 0;
    padding: 20px 0;
    /* ALTO FIJO DE LA SECCIÓN: Ajusta este valor a tu gusto */
    height: 350px;
    overflow: hidden; /* Evita que el contenido se salga si es muy grande */
    display: flex;
    align-items: center;
}

.main-logo {
    max-width: 100%;  /* No permite que la imagen sea más ancha que su padre */
    height: auto;     /* Mantiene la proporción (aspect ratio) al escalar */
    display: block;
}

/* HERO TEXTO */

.welcome-message {
    text-align: right;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* CAMBIO DE 28vh A PIXELES FIJOS */
    height: 250px;
}

.welcome-title {
    font-size: 38px;
    color: #ACBFA9;
    line-height: 1.1;
    font-weight: 700;
    margin-top: 25px;
    text-align: left;
    /* Evitamos que el texto empuje la caja hacia abajo */
    max-height: 100px;
}

.deco-dots-group {
    display: flex;
    align-items: center; /* Centra todos verticalmente entre sí */
    gap: 20px;           /* Espacio uniforme entre los puntos */
    margin-bottom: 30px;
}

/* El óvalo claro de la izquierda */
.dot-pill {
    width: 85px;
    height: 50px;
    background-color: #F1F4F0; /* Crema muy claro */
    border-radius: 50px;
}

/* El círculo del medio */
.dot-md {
    width: 45px;
    height: 45px;
    background-color: #ACBFA9; /* Verde medio */
    border-radius: 50%;
    margin-left: 0; /* Eliminamos el margen manual anterior */
}

/* El óvalo verde de la derecha */
.dot-lg {
    width: 90px;
    height: 60px;
    background-color: #ACBFA9; /* Mismo verde que el círculo */
    border-radius: 50px;
    margin-left: auto; /* Esto empuja el último punto a la derecha si el contenedor es ancho */
}

/* ================= DOCTOR ================= */

.doctor-visor{
    background:#ACBFA9;
    padding: 0;
}

.visor-container{
    display:grid;
    grid-template-columns:40% 60%;
    height:600px;
}

.swiper{
    width:100%;
    height:100%;
}

.hero-bg-image{
    width:100%;
    height:100%;
    background-size:contain;
    background-repeat: no-repeat;
    background-position:center top;
}

.visor-text{
    display:flex;
    align-items:center;
    padding:0 10%;
    color:white;
}

.text-inner{
    padding: 0 6rem 0 5rem;
}

.doctor-title{
    font-size:65px;
    line-height:1;
    font-weight:700;
    margin-bottom:28px;
}

.doctor-description{
    font-size: 21px;
    line-height: 1.3;
    text-align: justify;
}

/* ================= PROPUESTA DE VALOR ================= */

.value-section{
    padding:140px 0;
    background:#ACBFA9;
    text-align:center;
}

.icon-value-movile{
    display: none;
}

.value-container{
    max-width:1200px;
}

.value-title{
    font-size:60px;
    line-height:1;
    font-weight:700;
    color:white;
    margin-bottom:30px;
}

.value-text{
    font-size:30px;
    line-height:1.6;
    color:white;
    margin-bottom:30px;
}

.value-button{
    display:inline-block;
    padding:16px 40px;
    border:2px solid white;
    border-radius:40px;
    text-decoration:none;
    color:white;
    font-weight:600;
    transition:.3s;
}

.value-icon {
    width: 100%;
    object-fit: contain;
    max-width: 100%;
    height: 200px;
    display: block;
}

.value-button:hover{
    background:white;
    color:#ACBFA9;
}

/* ================= SWIPER FLUIDO ================= */
.swiper-visor {
    height: 60vh; /* altura relativa a pantalla */
    min-height: 400px; /* altura mínima */
}



/* Asegura que la imagen llene el contenedor */
.hero-bg-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}



/* =================  Dental Estetic Center ================= */

.dental-center-section{
    padding: 6rem 0 6rem 0;
}

.cta-text-left{
    height: 30vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.welcome-message-left{
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: normal;
}

.text-dental{
    font-size: 26px;
    line-height: 1;
    text-align: justify;
    color: #7f7f7f;
}

.cta-box{
    background-color: #222820;
    margin: 0 5rem 0 5rem;
    border-radius: 40px !important;
    padding: 20px 50px 20px 50px;
}

.cta-box h1{
    font-weight: bold;
}

.cta-button{
    color: #222820;
    font-weight: bold;
    border-radius: 40px;
    border: 2px solid #ffffff;
    background: #FFFFFF;
    width: 100%;
    font-size: 30px;
    text-align: left;
}

.cta-button:hover{
    background:#ACBFA9;
    color:white;
}

/* ================= SERVICIOS ODONTOLÓGICOS PREMIUM ================= */
.services-section {
    background-color: #f4f4f4;
    padding: 6rem 0 6rem 0;
}

.services-section-movile{
    display: none;
}

.col-service1{
    display: flex;
    align-items: center;
}

.services-title{
    color: #acbfa9;
    font-size: 50px;
    font-weight: bold;
}

    /* Listas */
.service-card ul {
    color: #acbfa9;
    margin: 3rem 0 2rem 0;
    padding-left: 1.2rem;
}

.service-card-col1{
    background-color: #ecf0ec;
    border-radius: 20px;
}

/* Títulos */
.service-card h5 {
    font-weight: 700;
    font-size: 40px;
    text-align: left;
}

/* Botón columna 1 */
.service-card .btn {
    transition: 0.3s;
}

.service-card img{
    border-radius: 20px;
    width: 100%;
    height: 100%;          /* Ocupa toda la altura del contenedor */
    object-fit: cover;     /* Cubre todo el espacio sin deformarse */
    object-position: center center; /* Centrado */
    transition: transform 0.5s ease;
}

.service-card:hover img {
    transform: scale(1.1); /* Aumenta el tamaño un 10% */
}

/* Asegura que las columnas 2,3,4 tengan la misma altura */
.service-card.w-100.h-100 {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    border-radius: 20px;
}


.d-flex{
    padding: 2px 10px 0 10px;
    margin: 0;
}

.img-service{
    height: 40vh!important;
}

.service-card p{
    width: 100%;
    text-align: left;
    padding: 15px 0 0 30px;
    font-size: 25px;
    font-weight: 500;
}

/* ================= SECCIÓN OTRAS ESPECIALIDADES ================= */
/* 1. Reset y Base para asegurar igualdad */

.title-specialities{
    font-size: 40px;
    font-weight: 400 !important;
    color: #a9bca6 !important;
}

.service-card-specialties,
.img-carousel-container {
    height: 370px; /* ALTURA FIJA PARA TODOS */
    border-radius: 30px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.card-icon-custom-container{
    display: flex;
    justify-content: space-between;
}

.card-icon-custom-container img{
    width: 150px;
    margin: -25px 0 -35px 0;
}

/* 2. Estilo de las Tarjetas */
.service-card-specialties {
    background: #ffffff;
    border: 1px solid #a8bba4;
    padding: 2.5rem;
}

.service-card-specialties:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.1) !important;
}

/* 3. Ajuste de la Imagen (Crucial) */
.img-carousel-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Recorta la imagen para llenar el contenedor sin deformar */
    object-position: center top; /* Enfoca la parte superior (cara del doctor) */
    display: block;
}

/* 4. Tipografía y Listas */
.service-card-specialties h5 {
    font-weight: 700;
    font-size: 1.4rem;
    margin-top: 1rem;
    color: #333;
}

.service-card-specialties ul {
    margin-top: 1rem;
}

.service-card-specialties ul li {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.4;
}

/* 5. Tarjeta Verde */
.service-card-specialties.card-green {
    background-color: #a8bba4;
    border: none;
}
.card-green h5, .card-green ul li, .card-green .card-icon i {
    color: #ffffff;
}

/* 6. Iconos e inferior */
.card-icon {
    font-size: 2rem;
    color: #333;
}

.card-footer-icons {
    margin-top: auto; /* Empuja los iconos al final */
    display: flex;
    gap: 15px;
    font-size: 2rem;
    color: #cbd5c0;
}

.card-footer-icons img{
    width: 100px;
    margin: -30px 0 0 -33px;
}

/* 7. Dots del Carousel */
.carousel-dots {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}
.carousel-dots span {
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
}
.carousel-dots span.active {
    background: #ffffff;
    width: 25px;
    border-radius: 10px;
}

/* Altura fija compartida para tarjetas y el slider */
.service-card-specialties {
    height: 370px;
    border-radius: 30px;
    position: relative;
    overflow: hidden;
}

.mySwiper {
    position: relative;
    overflow: hidden;
}

/* Estilos de las tarjetas (igual que antes) */
/* Estilos de las tarjetas (igual que antes) */
.service-card-specialties {
    background: #ffffff;
    border: 1px solid #a8bba4;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
}

/* Ajuste de imágenes dentro de Swiper */
.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

/* Personalización de los puntos (bullets) de Swiper */
.swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.6) !important;
    opacity: 1;
}

.swiper-pagination-bullet-active {
    background: #ffffff !important;
    width: 25px !important;
    border-radius: 10px !important;
}

/* Reutilización de estilos previos */
.service-card-specialties.card-green { background-color: #a8bba4; border: none; }
.card-green h5, .card-green ul li, .card-green .card-icon i { color: #fff; }
.card-footer-icons { margin-top: auto; display: flex; gap: 15px; font-size: 2rem; color: #cbd5c0; }


.swiper-pagination-bullet{
    width: 20px!important;
    height: 20px !important;
    border-radius: 50px !important;
}

/* ================= Paquetes y Planes Especiales ================= */
/* --- Estilos Generales de la Sección --- */
.section-title-plans {
    color: #a8bba4;
    font-weight: 400;
    font-size: 50px;
}

/* --- Tarjeta Base --- */
.plan-card {
    background: #fff;
    border: 3px solid #a8bba4;
    border-radius: 20px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* --- Header con la "Pill" negra --- */
.plan-header-pill {
    padding: 2.5rem 1rem;
    text-align: center;
}

.badge-pill-black {
    background-color: #212529;
    color: white;
    padding: 0.8rem 2.5rem;
    border-radius: 50px;
    font-size: 2.5rem;
    font-weight: 700;
}

/* --- Caja de Título (Verde o con bordes) --- */
.plan-title-box {
    padding: 1.5rem;
    text-align: center;
}

.bg-green-light {
    background-color: #a8bba4;
}

.bg-green-light h3 {
    color: #fff;
    margin: 0;
    font-weight: bold;
    font-size: 35px;
}

.border-y-green {
    border-top: 1px solid #a8bba4;
    border-bottom: 1px solid #a8bba4;
}

.text-green-title {
    color: #a8bba4;
    margin: 0;
    font-weight: bold;
    font-size: 35px;
}



/* --- Cuerpo y Lista --- */
.plan-body {
    padding: 2rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.plan-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.plan-features li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 0;
    color: #a8bba4;
    font-size: 1.1rem;
}

.plan-features li i {
    color: #4caf50; /* Color del check verde */
    font-size: 1.4rem;
}

/* --- Botón Cotizar --- */
.btn-cotizar {
    background-color: #a8bba4;
    color: white;
    border-radius: 50px;
    padding: 0.9rem 2.6rem;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    border: none;
}

.btn-cotizar:hover {
    background-color: #8d9e8a;
    color: white;
    transform: scale(1.05);
}


/* ================= Visítanos en el 12 de Octubre ================= */
/* Fondo gris claro para el contenedor principal */
.bg-light-custom, .contact-section {
    background-color: #f4f4f4;
}

/* Contenedor del Mapa */
.map-container iframe {
    display: block;
}

.text-green-title {
    color: #a8bba4;
    line-height: 1.1;
    font-size: 35px;
    font-weight: bold;
}

.text-green-title-contact {
    color: #a8bba4;
    line-height: 1.1;
    font-size: 70px;
    font-weight: bold;
}


/* Contenedor del Mapa */
.map-container img {
    width: 100%;
    height: 350px;
    object-fit: cover;
}

/* --- Estilos para las Burbujas Orgánicas (Blobs / Amebas Triangulares) --- */
.social-link {
    width: 60px;  /* Aumentado un poco para que la forma se aprecie mejor */
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-radius 0.3s ease;
    border: none;
    text-decoration: none;
    position: relative;
    overflow: hidden; /* Mantiene el gradiente dentro de la forma */

    /* --- ESTA ES LA CLAVE: Forma de Ameba Triangular --- */
    /* Explicación: esquinas horizontales / esquinas verticales */
    /* (top-left top-right bottom-right bottom-left) */
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;

    /* Sombra suave idéntica a la referencia */
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

/* --- Gradientes y Colores Exactos de la Referencia --- */

/* Facebook (Gradiente Azul) */
.social-link.fb {
    background: linear-gradient(135deg, #1877F2 0%, #0044cc 100%);
}

/* Instagram (Gradiente Complejo Radial/Lineal) */
.social-link.ig {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

/* TikTok (Negro Azulado con efecto de brillo opcional) */
.social-link.tk {
    background: linear-gradient(135deg, #121212 0%, #010101 100%);
}

/* WhatsApp (Verde Neón Brillante) */
.social-link.wa {
    background: linear-gradient(135deg, #25D366 0%, #1da851 100%);
}

/* --- Ajuste de los SVG internos (Logos Blancos) --- */
.social-link svg {
    width: 28px;  /* Ajusta el tamaño del logo blanco */
    height: 28px;
    fill: #ffffff; /* Asegura que el logo sea blanco */
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.1)); /* Pequeño relieve al logo */
}

/* --- Efecto Hover con deformación orgánica --- */
.social-link:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 15px 30px rgba(0,0,0,0.25) !important;

    /* La forma cambia ligeramente al pasar el mouse */
    border-radius: 40% 60% 70% 30% / 40% 70% 30% 60%;
}

.contact-title-desktop{
    display: block;
}

.contact-title-movile {
    display: none;
}

/* Estilo del Formulario */
.contact-form .form-control {
    border: none;
    padding: 1rem;
    background-color: white;
}

.contact-form .form-control:focus {
    background-color: #fff;
    border-left: 4px solid #a8bba4;
}

.btn-cotizar-lg {
    background-color: #a8bba4;
    color: white;
    border-radius: 50px;
    padding: 0.8rem 3rem;
    border: none;
}

.btn-cotizar-lg:hover {
    background-color: #8d9e8a;
    color: white;
    box-shadow: 0 4px 15px rgba(168, 187, 164, 0.4);
}

.social-icons-box-desktop{
    display: block;
}

.social-icons-box-movile{
    display: none!important;
}

/* ================= CONTACT FORM ================= */

/* Efecto al hacer clic en el input */
.contact-form .form-control:focus {
    background-color: #fff;
    border-color: #ACBFA9; /* Verde de la marca */
    box-shadow: 0 5px 15px rgba(172, 191, 169, 0.2);
    outline: none;
}

/* Placeholder */
.contact-form .form-control::placeholder {
    color: #999;
}

/* Botón Cotiza Ahora (Gigante y Ovalado) */
.btn-cotizar-lg {
    background-color: #ACBFA9;
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 18px 40px;
    font-size: 20px;
    font-weight: 700;
    width: 100%; /* Ocupa todo el ancho en móvil */
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.btn-cotizar-lg:hover {
    background-color: #9ab097;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

/* Mensajes de Error */
.error-message {
    color: #dc3545;
    font-size: 13px;
    margin-left: 15px;
    display: none; /* Se activa con JS */
}

/* Mensaje de éxito/envío */
.form-message {
    margin-top: 20px;
    font-weight: 600;
    color: #ACBFA9;
    text-align: center;
}

/* Ajuste para el textarea */
#procedimiento {
    border-radius: 25px;
    resize: none;
}

/* ================= Payment Methods ================= */
/* Contenedor principal: oculta lo que sale de la pantalla */
.marquee {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    display: flex;
}

.payment-methods-desktop{
    display: block;
}

.payment-methods-movile{
    display: none;
}

/* El contenido que se anima */
.marquee-content {
    display: flex;
    width: max-content;
    animation: scrolling 20s linear infinite; /* 20s controla la velocidad */
}

/* Grupos de logos */
.logo-group {
    display: flex;
    align-items: center;
    gap: 4rem; /* Espacio entre logos */
    padding: 0 2rem;
}

.logo-group img {
    height: 40px; /* Ajusta según el tamaño de tus imágenes */
    width: auto;
    filter: grayscale(0); /* Puedes ponerlo en 100% y que cambie a 0 al hover */
    transition: transform 0.3s ease;
}

.logo-group img:hover {
    transform: scale(1.1);
}

/* Definición de la animación infinita */
@keyframes scrolling {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%); /* Se mueve exactamente la mitad */
    }
}

/* Pausar al pasar el mouse (opcional, muy profesional) */
.marquee:hover .marquee-content {
    animation-play-state: paused;
}

/* ================= FOOTER ================= */
.footer-custom {
    position: relative;
    width: 100%;
    height: 600px; /* Altura máxima para ondas imponentes */
    background-color: #fff;
    margin-top: 4rem;
    overflow: hidden;
}

.waves-container {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Superposición perfecta de capas */
.wave-bg, .wave-front {
    position: absolute;
    bottom: -2px; /* Evita fugas de color */
    left: 0;
    width: 100%;
    height: 100%;
}

.wave-bg { z-index: 1; }
.wave-front { z-index: 2; }

/* Posicionamiento del logo sobre la colina derecha */
.footer-branding {
    position: absolute;
    right: 8%;    /* Un poco más hacia el borde derecho */
    bottom: 12%;   /* Elevado sobre la base de la onda */
    z-index: 3;
    text-align: center;
    color: #fff;
}

.footer-logo-img {
    width: 400px; /* Logo más grande para equilibrar la altura */
    height: auto;
    display: block;
    margin: 0 auto 8px;
}

.footer-brand-name {
    font-size: 0.85rem;
    letter-spacing: 4px;
    font-weight: 300;
    margin: 0;
    text-transform: uppercase;
    opacity: 0.9;
}

/* --- Estilo del Botón (Fiel a la imagen) --- */
.navbar-toggler-custom {
    width: 60px;
    height: 60px;
    background: transparent;
    border: 3px solid #ACBFA9;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.toggler-line {
    width: 45px;
    height: 4px;
    background-color: #ACBFA9;
    border-radius: 2px;
}

/* --- Menú Mobile (La "Cortina") --- */
.nav-mobile {
    position: fixed; /* Cambiado de absolute a fixed */
    top: 100px; /* Debe coincidir con el alto del header */
    left: 0;
    width: 100%;
    background-color: white;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-radius: 15px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    z-index: 1000;

    /* Estado inicial: Oculto */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

/* Clase que activa el JavaScript */
.nav-mobile.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-mobile a {
    text-decoration: none;
    color: #ACBFA9;
    font-weight: 600;
    font-size: 1.1rem;
    padding: 5px 10px;
    transition: background 0.2s;
}

.nav-mobile a:hover {
    background-color: #f1f4f0;
    border-radius: 8px;
}

.header-movile{
    display: none;
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 767px) {

    .container{
        max-width: 700px;
    }

    .text-green-title { font-size: 2rem; }
    .map-container img { height: 250px; }

    .badge-pill-black { font-size: 2.6rem; }

    .service-card-specialties,
    .img-carousel-container {
        height: auto; /* En móvil dejamos que el contenido mande */
        min-height: 350px;
        justify-content: center;
    }
    .img-carousel-container {
        height: 350px; /* Altura controlada para la imagen en móvil */
    }
    .service-card-specialties, .mySwiperSpecialities { height: 370px; }

    .swiper-visor {
        height: 40vh; /* menor altura en móviles */
    }

    .doctor-visor .col-lg-7.d-flex {
        align-items: flex-start;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .doctor-visor .col-lg-7.d-flex {
        align-items: flex-start; /* en móviles, queda al inicio para que no quede flotando */
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .header-bottom{
        flex-direction:column;
        align-items:flex-start;
        gap:30px;
    }

    .main-logo{
        height:170px;
    }

    .welcome-title{
        font-size:32px;
    }

    .visor-container{
        grid-template-columns:1fr;
        height:auto;
    }

    .hero-bg-image{
        height:420px;
    }

    .visor-text{
        padding:60px 8%;
    }

    .value-text{
        font-size:22px;
    }

    .header{
        display: none;
    }

    .header-movile{
        display: block;
        position: fixed;
        width: 100%;
        background: #FFF;
        top: 0;
        z-index: 999999;
    }

    .main-logo{
        display: none;
    }

    .main-logo-movile{
        width: 200px;
    }

    .welcome-title{
        text-align: center;
    }

    .text-inner{
        padding: 0 2.5rem 0 2.5rem;
    }

    .doctor-title{
        text-align: center;
        font-size: 35px;
        line-height: 1.3;
    }

    .doctor-description{
        text-align: center;
        margin-bottom: 3rem;
    }

    .dental-center-section {
        padding: 4rem 0 4rem 0;
    }

    .text-dental{
        font-size: 21px;
        text-align: center;
        padding: 0 0 20px 0;
    }

    .social-icons-box-desktop{
        display: none;
    }

    .social-icons-box-movile{
        justify-content: center;
        align-items: center;
    }

    .welcome-message-left{
        display: none;
    }

    .card-footer-icons{
        display: none;
    }

    .card-icon-custom-container img{
        display: none;
    }

    .cta-text-left{
        height: 16vh;
    }

    .cta-box{
        margin: 0 1rem 0 1rem;
        border-radius: 10px !important;
        padding: 20px 30px 20px 30px;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .cta-button{
        margin: 0 10px 0 10px;
        font-size: 21px;
        text-align: center;
    }

    .value-title{
        font-size: 35px;
        line-height: 1.3;
    }

    .icon-value{
        display: none;
    }

    .icon-value-movile{
        width: 100%;
        display: flex;
        justify-content: space-between; /* Espacio entre ítems */
        align-items: center;
    }

    .services-section{
        display: none;
    }

    /* ================= SERVICES MOBILE RESPONSIVE ================= */

    .services-section-movile {
        display: block;
        padding: 40px 0;
        background-color: #fff;
    }

    .services-title {
        color: #acbfa9;
        font-size: 35px;
        font-weight: bold;
        line-height: 1.3;
    }

    /* Contenedor principal de la tarjeta */
    .container-service-card {
        background: #fff;
        margin-bottom: 30px;
    }

    /* Flexbox para poner imagen a la izquierda y texto a la derecha */
    .container-service-card .d-flex {
        display: flex !important;
        gap: 20px;
    }

    /* Imagen con el redondeado orgánico del diseño */
    .container-service-card-img {
        flex: 0 0 50%; /* Ocupa la mitad del ancho */
    }

    .img-service {
        width: 100%;
        height: 350px; /* Alto fijo para mantener la proporción de la imagen */
        object-fit: cover;
        border-radius: 40px; /* Redondeado pronunciado como en la foto */
    }

    /* Contenedor de descripción */
    .container-service-card-description {
        flex: 1;
        text-align: left;
        padding-top: 10px;
    }

    .container-service-card-description p {
        font-size: 24px;
        font-weight: 700;
        color: #000;
        line-height: 1.2;
        margin-bottom: 15px;
    }

    /* Lista de servicios */
    .container-service-card-description ul {
        list-style: none;
        padding-left: 0 !important;
    }

    .container-service-card-description ul li {
        position: relative;
        padding-left: 15px;
        font-size: 16px;
        color: #333;
    }

    /* El punto de la lista */
    .container-service-card-description ul li::before {
        content: "•";
        color: #000;
        font-weight: bold;
        position: absolute;
        left: 0;
    }

    /* Botón Agenda Hoy (Estilo Ovalado Verde) */
    .btn-cotizar {
        background-color: #ACBFA9 !important; /* Verde del diseño */
        color: #fff !important;
        border: none;
        border-radius: 50px; /* Forma de píldora/ovalado */
        padding: 12px 30px;
        font-size: 22px;
        font-weight: 700;
        display: inline-block;
        transition: transform 0.3s ease;
        text-decoration: none;
    }

    .btn-cotizar:hover {
        transform: scale(1.05);
        background-color: #9ab097 !important;
    }

    .container-service-card-description p {
        font-size: 20px;
    }
    .img-service {
        height: 280px;
    }
    .btn-cotizar {
        font-size: 18px;
        padding: 10px 20px;
    }

    .payment-methods-desktop{
        display: none;
    }

    .payment-methods-movile{
        display: block;
    }

    .contact-title-desktop{
        display: none;
    }

    .contact-title-movile {
        display: block;
        font-size: 35px;
        line-height: 1.3;
        text-align: center;
    }

    .map-container{
        height: 450px;
    }

    .footer-custom {
        height: 550px;
    }

    .footer-branding {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        right: 0;
    }

    .value-icon {
        height: 100px;
        margin-bottom: 20px;
    }

    .title-specialities {
        font-size: 35px;
        font-weight: bold!important;
        line-height: 1.3;
    }

    .section-title-plans{
        font-size: 35px;
        font-weight: bold!important;
        line-height: 1.3;
    }

    .footer-brand-name { font-size: 0.65rem; letter-spacing: 2px; }


}

/* ==========================================================================
   TABLET RESPONSIVE (768px - 1024px)
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1024px) {

    /* --- Header & Navigation --- */
    .nav a {
        padding: 8px 15px;
        font-size: 13px;
    }
    .home-pill {
        padding: 8px 20px;
        font-size: 13px;
    }

    /* --- Branding Area --- */
    .branding-area {
        height: auto;
        padding: 40px 0;
    }
    .welcome-title {
        font-size: 30px;
        max-height: none;
    }
    .main-logo {
        max-width: 90%;
    }

    /* --- Doctor Section --- */
    .doctor-title {
        font-size: 45px;
        text-align: center;
    }
    .doctor-description {
        font-size: 18px;
    }
    .text-inner {
        padding: 2rem 3rem;
    }
    .hero-bg-image {
        height: 500px; /* Ajuste de altura para que la foto no se vea cortada */
    }

    /* --- Dental Estetic Center (CTA) --- */
    .text-dental {
        font-size: 20px;
    }
    .cta-box {
        margin: 0;
        padding: 30px;
    }
    .cta-box h1 {
        font-size: 28px;
    }
    .cta-button {
        font-size: 22px;
    }

    /* --- Value Proposition --- */
    .value-title {
        font-size: 45px;
    }
    .value-text {
        font-size: 22px;
    }
    .value-icon {
        height: 120px;
        margin-bottom: 20px;
    }

    /* --- Services Section --- */
    /* En tablet, 4 columnas quedan muy delgadas, pasamos a 2x2 */
    .services-section .row > div {
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom: 20px;
    }
    .services-title {
        font-size: 40px;
    }
    .img-service {
        height: 30vh !important;
    }
    .service-card h5 {
        font-size: 30px;
    }

    /* --- Specialties Section --- */
    /* Reorganizamos la rejilla de especialidades */
    #specialties .row > div {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .service-card-specialties,
    .img-carousel-container {
        height: 400px;
        justify-content: center;/* Un poco más de altura para el texto en tablet */
    }
    .card-footer-icons{
        display: none;
    }
    .card-footer-icons img {
        width: 80px;
    }
    .card-icon-custom-container img{
        display: none;
    }
    /* --- Plans Section --- */
    /* 3 columnas en tablet suelen apretar el texto, mejor 100% o 50% */
    #plans .row > div {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 30px; /* Espacio entre tarjetas */
    }
    /* Si hay un tercer plan, que ocupe el ancho completo para no dejar huecos */
    #plans .row > div:last-child {
        flex: 0 0 100%;
        max-width: 100%;
        margin-top: 20px;
    }
    .plan-card{
        height: auto; /* Permite que la tarjeta crezca según el contenido */
        max-width: 600px; /* Opcional: Centra la tarjeta si no quieres que sea tan ancha */
        margin: 0 auto;
    }
    .badge-pill-black {
        font-size: 2.2rem; /* Tamaño intermedio para tablet */
        padding: 0.6rem 2rem;
    }
    .text-green-title,
    .bg-green-light h3 {
        font-size: 32px;
    }
    .plan-features li {
        font-size: 1.3rem; /* Mejora la legibilidad al tener más espacio */
        padding: 1.2rem 0;
    }

    /* --- Contact Section --- */
    .text-green-title-contact {
        font-size: 50px;
    }
    .contact-form {
        margin-top: 30px;
    }

    /* --- Footer --- */
    .footer-custom {
        height: 500px;
    }
    .footer-logo-img {
        width: 300px;
    }
    .footer-branding {
        right: 5%;
        bottom: 15%;
    }

    /* Aseguramos que los iconos sociales se vean bien en el flujo de tablet */
    .social-icons-box-desktop {
        display: flex !important;
        justify-content: center;
        margin-bottom: 2rem;
    }
    .swiper-visor{
        height: auto;
    }
    .cta-text-left{
        height: auto;
    }
}