/* FUENTES DE USO */

@font-face {
    font-family: 'ItalianaWeb';
    src: url('../fonts/Italiana-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MontserratWeb';
    src: url('../fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'MontserratWeb';
    src: url('../fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

* {
    font-family: 'MontserratWeb';
}

p {
    font-size: 1.1em;
}

.titulo-dorado {
    color: #B8AE80;
    font-size: 2em;
    margin-bottom: 0px;
}

.colm-40 {
    width: 100% !important;
}

.colm-60 {
    width: 100% !important;
}

.text-padding-10 {
    padding: 5% 10%;
}

/* PANTALLA COMPLETA */
@media (min-width: 768px) {
    p {
        font-size: 1.36em;
    }

    .titulo-dorado {
        font-size: 2.5em;
    }

    .contenedor-colm {
        display: flex;
        width: 100%;
    }

    .colm-40 {
        flex: 0 0 auto;
        width: 40% !important;
        float: left;
    }

    .colm-60 {
        flex: 0 0 auto;
        width: 60% !important;
        float: left;
    }

    .text-padding-10 {
        padding: 0% 10%;
    }
}

.text-titulo {
    font-size: 4.2rem;
}

.text-title {
    font-size: 3rem;
}



.bg-gris {
    background: #D7D2CB;
}

.bg-negro {
    background: #000000;
}

.bg-negro-06 {
    background: #060606;
}

.bg-dorado {
    background-color: #B8AE80;
}

.text-white {
    color: #fff !important;
}

.text-decoration {
    text-decoration: none !important;
    color: #fff !important;
}

.text-decoration-dorado {
    text-decoration: none !important;
    color: #B8AE80 !important;
}

.text-decoration-negro {
    text-decoration: none !important;
    color: #000000 !important;
}

body {
    background-color: #f9f9f9;
}

.text-italiana {
    font-family: 'ItalianaWeb' !important;
}

.navbar {
    background-color: #000000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 20px 0px;
}

.navbar a.nav-link {
    color: #fff;
    font-weight: 500;
}

.navbar a.nav-link:hover {
    color: #33ccc5;
}

.hero {
    background-image: url('../img/portada.png?V=14');
    /* Reemplaza con tu imagen */
    background-size: cover;
    background-position: center;
    color: white;
    padding: 270px 0;
    text-align: center;

}

/* Para pantallas pequeñas (móviles) */
@media (max-width: 768px) {
    .hero {
        background-image: url('../img/portada-movil.png?V=1') !important;
    }
}

.hero h1 {
    font-size: 3rem;
    font-weight: bold;
}

.hero .btn {
    margin-top: 20px;
}

.doctor-img {
    max-width: 100%;
    border-radius: 8px;
}

.procedimientos img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.testimonios {
    background-color: #f2f2f2;
    padding: 40px 0;
}

footer {
    background-color: #000;
    color: white;
    padding: 40px 0;
    text-align: center;
}

footer .btn {
    margin-top: 20px;
}

/* Para evitar que el navbar tape el contenido */
body {
    padding-top: 70px;
}

.video-container {
    position: relative;
    width: 100%;
    height: 100vh;
    /* Puedes ajustar esto */
    overflow: hidden;
}

.video-container video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: 100%;
    height: auto;
    z-index: 1;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

.video-container .contenido {
    position: relative;
    z-index: 2;
    color: white;
    text-align: center;
    padding: 200px 0px;
}

/* Ocultar por defecto */
#video-pc,
#video-movil {
    display: none;
}

/* Mostrar en pantallas grandes (PC) */
@media (min-width: 768px) {
    #video-pc {
        display: block;
    }
}

/* Mostrar en móviles */
@media (max-width: 767.98px) {
    #video-movil {
        display: block;
    }

    .paddin0 {
        padding: 0px !important;
        margin: 0px !important;
    }
}

.carousel-container {
    position: relative;
}

.carousel-control-prev,
.carousel-control-next {
    width: auto;
    height: 100%;
    top: 0;
    bottom: 0;
    z-index: 2;
}

.carousel-control-prev {
    left: -60px;
    /* Ajusta según tu diseño */
}

.carousel-control-next {
    right: -60px;
    /* Ajusta según tu diseño */
}

.carousel-inner .row {
    display: flex;
}

.card {
    height: 100%;
}

@media (max-width: 768px) {

    .carousel-control-prev,
    .carousel-control-next {
        display: none;
        /* Opcional: ocultar flechas en móvil */
    }
}


.zoom-section img {
    opacity: 0;
    transform: scale(1);
    transition: transform 0.6s ease, opacity 0.6s ease;
}

.zoom-section img.zoom-anim {
    opacity: 1;
    animation: zoomInOut 1s ease forwards;
}

@keyframes zoomInOut {
    0% {
        transform: scale(1);
        opacity: 0;
    }

    50% {
        transform: scale(1.05);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}


.texto-mas-negrita {
    font-weight: 800;
    /* más grueso que bold */
}

/* PANTALLA COMPLETA */
@media (min-width: 768px) {
    .logo-barra {
        content: url("../img/logo.png");
        height: 60px !important;
    }
}

.text-dorado {
    color: #B8AE80;
}

.hr-dorado {
    color: #B8AE80 !important;
    height: 2px !important;
    opacity: 1 !important;
    width: 100%;
}

.hr-blanca {
    color: #ffffff !important;
    height: 2px !important;
    opacity: 1 !important;
    width: 100%;
}

.text-dorado {
    color: #B8AE80;
}

.top-10 {
    top: 10%;
}

.top-15 {
    top: 15%;
}

.top-20 {
    top: 20%;
}

.top-25 {
    top: 25%;
}

.margin-titulo {
    padding: 10px 0px;
}

.toggle-icon::before {
    content: "+";
    font-weight: bold;
    font-size: 20px;
}

.collapsed .toggle-icon::before {
    content: "+";
}

.toggle-button:not(.collapsed) .toggle-icon::before {
    content: "−";
}

.start-60 {
    left: 60% !important;
}

.start-65 {
    left: 65% !important;
}

.start-70 {
    left: 70% !important;
}

.start-75 {
    left: 75% !important;
}


/* 1. ELIMINAR TODAS LAS LÍNEAS (BORDES) */
.accordion-item {
    border: none !important;
    /* Quita los bordes de cada ítem */
    background-color: transparent !important;
}

/* IMPORTANTE: Esto quita la línea inferior que queda entre ítems */
.accordion-item:not(:last-child) {
    border-bottom: none !important;
}

/* 2. CONFIGURAR EL BOTÓN PARA USAR FLEXBOX Y MOVER EL ÍCONO A LA DERECHA */
.accordion-button {
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;

    /* CLAVE para mover el ícono: convierte el botón en un contenedor Flex */
    display: flex;
    /* Mueve el contenido y el ícono a los extremos opuestos */
    justify-content: space-between;
    /* Alinea el contenido y el ícono verticalmente */
    align-items: center;
    /* Quita el relleno izquierdo si lo habías puesto antes */
    padding-left: 1.25rem;
}

/* 3. REEMPLAZAR EL ÍCONO DE FLECHA Y POSICIONARLO */

/* Oculta la flecha SVG de Bootstrap */
.accordion-button::after {
    display: none;
}

/* Crea el ícono + / - */
.accordion-button::before {
    /* Mantenemos vacío el ::before y usamos un nuevo pseudo-elemento 
       o ajustamos el orden en el HTML si es posible, 
       pero por convención, haremos que ::before actúe como ícono para no depender del HTML. 
       Para que el texto esté a la izquierda y el ícono a la derecha,
       el contenido del botón es el título, y el ::before es el ícono. 
    */
    order: 1;
    /* Esto asegura que el pseudo-elemento (el ícono) vaya a la derecha en Flexbox */
    content: '+';
    /* Ícono de "+" cuando está cerrado */
    font-size: 1.5rem;
    margin-right: 0;
    /* Quita el margen derecho */
    margin-left: 1rem;
    /* Añade margen izquierdo para separarlo del texto */
    flex-shrink: 0;
    /* Evita que el ícono se encoja */
}

/* Cambia el ícono de "+" a "-" cuando el acordeón está abierto */
.accordion-button:not(.collapsed)::before {
    content: '–';
    /* Ícono de "-" cuando está abierto */
}

/* 1. Evita que el título quede azul o con sombras al ser seleccionado/activo */
.accordion-button:focus {
    /* Elimina el borde de enfoque azul o el resplandor */
    box-shadow: none !important;
    /* Elimina cualquier otro contorno que pueda aparecer */
    outline: 0 !important;
}

/* 2. Opcional: Asegura que el color del texto siempre sea el deseado (Ej: negro) */
/* Si tu texto ya tiene un color, no necesitas esta regla, pero es buena práctica */
.accordion-button {
    color: #9e956f !important;
    /* Reemplaza #333333 con el color de tu letra (ej: white) */
}

/* 3. Asegura el color del texto cuando está abierto (no colapsado) */
.accordion-button:not(.collapsed) {
    color: #B8AE80 !important;
    /* Mismo color de letra cuando está abierto */
}