@charset "utf-8";
/* CSS Document */

/* =========================================================
   CONTENIDO DE PÁGINAS INTERNAS
   ========================================================= */

.contenido {

    width: 80%;

    margin: 100px auto 50px;

    padding: 30px;

    border: 1px solid #cccccc;

    border-radius: 8px;
}


/* =========================================================
   IMAGEN DE ENCABEZADO
   ========================================================= */

.imagen-encabezado {

    width: 100%;

    margin-bottom: 30px;

}


.imagen-encabezado img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
}


/* =========================================================
   TÍTULO PRINCIPAL
   ========================================================= */

.contenido h1 {

    margin-bottom: 30px;

    color: #e57373;

}


/* =========================================================
   PROCEDIMIENTOS
   ========================================================= */

.contenido-principal {

    display: flex;

    flex-direction: column;

    gap: 40px;

}


/* =========================================================
   BLOQUE PROCEDIMIENTO
   ========================================================= */

.procedimiento {

    display: grid;

    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);

    align-items: center;

    gap: 40px;

}


/* =========================================================
   TEXTO
   ========================================================= */

.procedimiento .texto {

    width: 100%;

    line-height: 1.6;

}


.procedimiento .texto h2 {

    color: rgb(0, 127, 153);

    margin-bottom: 15px;

}


.procedimiento .texto p {

    margin-bottom: 15px;

}


/* =========================================================
   ENLACE
   ========================================================= */

.procedimiento .texto a {

    color: rgb(0, 127, 153);

    font-weight: bold;

}


/* =========================================================
   IMAGEN
   ========================================================= */

.procedimiento .imagen {

    width: 100%;

}


.procedimiento .imagen img {

    width: 100%;

    height: auto;

    display: block;

}


/* =========================================================
   RESPONSIVE
   SOLO CONTENIDO
   ========================================================= */

@media (max-width: 768px) {

    /* =====================================================
       CONTENIDO
       ===================================================== */

    .contenido {

        width: 90%;

        margin-top: 220px;

        padding: 20px;

    }


    /* =====================================================
       IMAGEN DE ENCABEZADO
       ===================================================== */

    .imagen-encabezado {

        width: 100%;

        margin-bottom: 20px;

    }


       .imagen-encabezado img {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }


    /* =====================================================
       PROCEDIMIENTOS
       ===================================================== */

    .contenido-principal {

        gap: 30px;

    }


    .procedimiento {

        grid-template-columns: 1fr;

        gap: 20px;

    }


    .procedimiento .texto,
    .procedimiento .imagen {

        width: 100%;

    }


    .procedimiento .texto h2 {

        margin-bottom: 10px;

    }

}


/* =========================================================
   AGENDA Y TELÉFONO
   Debajo de la imagen de encabezado
   ========================================================= */

.agenda-procedimientos {
    width: 100%;
    text-align: center;
    margin-top: 20px;
}

.agenda-procedimientos .btn-agenda {
    display: table;
    margin: 0 auto;
    padding: 12px 24px;
    background-color: #c9a227;
    color: #ffffff;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: opacity 0.3s ease;
}

.agenda-procedimientos .btn-agenda:hover {
    opacity: 0.85;
}

.agenda-procedimientos .telefono-agenda {
    display: block;
    margin-top: 10px;
    text-align: center;
}