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

body { 
    background-color: #FFFFFF; 
    max-width: 1500px;
    margin: 0 auto;
    padding: 0;
    animation: aparecer 1s ease;
} 

@keyframes aparecer {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.inicio {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.inicio img {
    width: 100%;
    height: 750px;
    display: block;
}

.infoGeneral {
    display: flex;
    align-items: center;
    gap: 2rem;
    background-color: #f5f0e8;
    border: 4px solid #8b6914;
    padding: 2rem;
    color: #4a3800;
}

.infoInicial {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 1rem;
}

.infoInicial h1{
    font-family: "Playfair Display", serif;
    font-size: 55px;
    text-align: center;
    font-weight: 900;
    margin: 15px;
    color: #4a3800;
}

.infoInicial h2{ 
    font-family: "Playfair Display", serif; 
    font-size: 30px; 
    font-weight: 700; 
    margin: 10px; 
    color: #8b6914; 
    align-items: center; 
    display: flex; 
    text-align: center; }

.infoInicial h2::before,
.infoInicial h2::after {
    content: '';
    flex: 1;
    height: 1.5px;
    background: #c8a84b;
}

.infoInicial p {
    font-family: "Source Sans 3", sans-serif;
    color: #4a3800;
    padding: 10px 20px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.7;
    margin: 5px;
    text-align: justify;
}

.carrusel {
    width: 400px;
    height: 500px;
    overflow: hidden;
    border-radius: 30px;
    border: 3px solid #c8a84b;
    flex-shrink: 0;
}

.fotoInicioDra {
    display: flex;
    height: 100%;
    transition: transform 0.6s ease-in-out;
}

.fotoInicioDra img,
.fotoInicioDra video {
    width: 500px;
    height: 600px;
    object-fit: cover;
    display: block;
}

.servicios{
    margin-top: 0;
    gap: 2rem;
    border: 4px solid #8b6914;
    background: #f5f0e8;
}

.servicios h2 {
    font-family: "Playfair Display", serif;
    font-size: 35px;
    font-weight: 900;
    display: flex;
    align-items: center;
    text-align: center;
    gap: 1rem;
    margin-top: 5px;
    margin-bottom: 10px;
    padding: 15px;
}

.servicios h2::before,
.servicios h2::after {
    content: '';
    flex: 1;
    height: 1.5px;
    background: #8b6914;
}

.servicios p{
    font-family: "Source Sans 3", sans-serif;
    margin-top: 10px;
    padding: 2rem;
    font-weight: 600;
    line-height: 1.7;
    color: #4a3800;
}

.servicios img { 
    object-fit: cover;
    display: block;
}

.ResTap {
    flex-shrink: 0;
}

.ResTap img {
    width: 400px;
    height: 300px;
    border: 3px solid #c8a84b;
    border-radius: 20px;
    margin-top: 10px;
    object-fit: cover;
    display: block;
}

.restauraciones_tapones,
.blanqueamiento,
.coronasDentales,
.profilaxisDental,
.extraccionDental,
.radiografias,
.protesisRemovible,
.protesisTotal,
.protesisFija,
.sellantesFosas_Fisuras {
    display: flex;
    flex-direction: column;
    padding: 10px;
    margin: 10px;
}

.restauraciones_tapones{
    margin-top: 10px;
}

.restauraciones_tapones h2,
.coronasDentales h2,
.extraccionDental h2,
.protesisRemovible h2,
.protesisFija h2{
    background-color: #ffffff;
    color: #4a3800;
    border-radius: 80px;
    padding: 10px 20px;
    display: flex;
    letter-spacing: 1px;
    border: 2px solid #8b6914;
}

.restauraciones_tapones p,
.coronasDentales p,
.extraccionDental p,
.protesisRemovible p,
.protesisFija p {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    color: #4a3800;
    font-size: 17px;
    text-align: justify;
    line-height: 1.7;
    padding: 10px 20px;
}

.blanqueamiento h2,
.profilaxisDental h2,
.radiografias h2,
.protesisTotal h2,
.sellantesFosas_Fisuras h2{
    color: #4a3800;
    background-color: #ffffff;
    border-radius: 80px;
    padding: 10px 20px;
    display: flex;
    letter-spacing: 1px;
    border: 2px solid #8b6914;
}

.blanqueamiento p,
.profilaxisDental p,
.radiografias p,
.protesisTotal p,
.sellantesFosas_Fisuras p{
    flex: 1;
    font-weight: 600;
    color: #4a3800;
    font-size: 17px;
    text-align: justify;
    line-height: 1.7;
    border-radius: 30px;
    padding: 10px 20px;
}

.contenido {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 15px;
    overflow: hidden;
}

.pie {
    background-color: #513807;
}

.pie p{
    font-family: "Playfair Display", serif;
    font-size: 15px;
    font-weight: 500;
    align-items: center;
    padding: 10px;
    color:#edd6a7;
    text-align: center;
}

.carrusel-servicio {
    width: 400px;
    height: 300px;
    overflow: hidden;
    border-radius: 20px;
    border: 3px solid #c8a84b;
    position: relative;
}

.carrusel-servicio .slides {
    display: flex;
    height: 100%;
    will-change: transform;
}

.carrusel-servicio .slides img {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    object-fit: cover;
    display: block;
}

.carrusel-servicio .slides {
    align-items: stretch;
}

/* ========================= TABLET (≤768px) ========================= */
@media (max-width: 768px) {

    .inicio img {
        height: 400px;
    }

    .infoGeneral {
        flex-direction: column;
        padding: 1.5rem;
    }

    .infoInicial h1 { font-size: 38px; }
    .infoInicial h2 { font-size: 22px; }
    .infoInicial p  { font-size: 16px; }

    .carrusel {
        width: 100%;
        height: 600px;
    }

    .fotoInicioDra img,
    .fotoInicioDra video {
        width: 100%;
        min-width: 100%;
        height: 600px;
    }

    .contenido {
        flex-direction: column;
        align-items: center;
    }

    .ResTap img {
        width: 100%;
        height: 500px;
        border-radius: 12px;
    }

    .carrusel-servicio {
        width: 100%;
        height: 500px;
        border-radius: 12px;
    }

    .restauraciones_tapones,
    .blanqueamiento,
    .coronasDentales,
    .profilaxisDental,
    .extraccionDental,
    .radiografias,
    .protesisRemovible,
    .protesisTotal,
    .protesisFija,
    .sellantesFosas_Fisuras {
        margin: 6px;
        padding: 8px;
    }
}

/* ========================= MÓVIL (≤480px) ========================= */
@media (max-width: 480px) {

    .inicio img {
        height: 220px;
    }

    .infoGeneral {
        padding: 1rem;
        gap: 1rem;
    }

    .infoInicial h1 { font-size: 26px; margin: 8px; }
    .infoInicial h2 { font-size: 17px; margin: 6px; }
    .infoInicial p  { font-size: 14px; padding: 8px 12px; text-align: left; }

    .carrusel {
        width: 100%;
        height: 400px;
        border-radius: 16px;
    }

    .fotoInicioDra img,
    .fotoInicioDra video {
        width: 100%;
        min-width: 100%;
        height: 400px;
    }

    .servicios h2 { font-size: 22px; padding: 10px; }
    .servicios p  { padding: 1rem; font-size: 14px; text-align: left; }

    .ResTap img {
        width: 100%;
        height: 300px;
        border-radius: 12px;
    }

    .carrusel-servicio {
        width: 100%;
        height: 300px;
        border-radius: 12px;
    }

    .restauraciones_tapones h2,
    .coronasDentales h2,
    .extraccionDental h2,
    .protesisRemovible h2,
    .protesisFija h2,
    .blanqueamiento h2,
    .profilaxisDental h2,
    .radiografias h2,
    .protesisTotal h2,
    .sellantesFosas_Fisuras h2 {
        font-size: 18px;
        border-radius: 40px;
        padding: 8px 14px;
    }

    .restauraciones_tapones p,
    .coronasDentales p,
    .extraccionDental p,
    .protesisRemovible p,
    .protesisFija p,
    .blanqueamiento p,
    .profilaxisDental p,
    .radiografias p,
    .protesisTotal p,
    .sellantesFosas_Fisuras p {
        font-size: 14px;
        padding: 8px 12px;
        text-align: left;
    }
}