@font-face {
    font-family: "metropolis";
    src: url("../fonts/Metropolis-Medium.otf") format("opentype");
}

@font-face {
    font-family: "days";
    src: url("../fonts/days.ttf") format("opentype");
}

body {
    background-color: #dedede;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-family: 'metropolis', sans-serif;
}

.we-container {
    width: 96%;
    min-height: 70vh;
    margin-left: 2%;
    margin-right: 2%;
    margin-top: 2%;
    margin-bottom: 2%;
    border-radius: 40px;
}

.margin-content {
    padding-top: 3%;
    padding-right: 4%;
    padding-left: 4%;
}

.blue-l {
    color: #374cb5;
}

.black {
    color: black;
}

.text-title {
   font-weight: bold;
   font-size: 1.5rem;
}

.title-treat {
    font-size: 2rem;
    font-family: 'days', sans-serif;
}


/* El row debe tener posición relativa para que el hijo se base en él */
.row {
    position: relative;
    display: flex;
}

/* La columna que contiene la imagen debe ser relativa y medir lo mismo que la del acordeón */
.col-md-5 {
    position: relative;
    display: flex;
    flex-direction: column;
}

.extra-content {
    overflow: hidden;
    opacity: 0;
    height: 0;
    /* Usamos la misma duración y curva que Bootstrap para ir sincronizados */
    transition: height 0.35s ease,
    opacity 0.35s ease;
    will-change: height, opacity; 
}

.extra-content.mostrar {
    opacity: 1;
}

.contenedor-img-accord {
    width: 100%;
    height: 100%;
}

.img-accordion {
    width: 100%;
    height: 100%; 
    object-fit: cover;
    border-radius: 15px;
}

.mindu-btn-menu {
    background-color: #374cb5;
    border-radius: 20px;
    color: white;
    width: 120px;
}

.mindu-btn-menu:hover {
    background-color: #6588c8;
    color: white;
}

.back-btn {
    background-color: #374cb5;
    color: white;
    font-weight: bold;
    padding: 10px;
    border-radius: 40px;
}

.back-btn:hover {
    background-color: black;
    border: 1px solid white;
    color: white;
}