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

/* =========================================================
   PÁGINAS INDIVIDUALES DE PROCEDIMIENTOS
   CSS COMÚN PARA TODOS LOS PROCEDIMIENTOS
   ========================================================= */


/* =========================================================
   CONTENEDOR GENERAL
   ========================================================= */

.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;
}


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

.contenido-principal {
    display: flex;
    flex-direction: column;
    gap: 40px;
}


/* =========================================================
   BLOQUE DE CONTENIDO
   ========================================================= */

.procedimiento {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 40px;
}

.procedimiento .texto {
    width: 100%;
    line-height: 1.6;
}

.procedimiento .texto h2 {
    color: rgb(0, 127, 153);
    margin-bottom: 15px;
}

.procedimiento .texto h3 {
    color: rgb(0, 127, 153);
    margin-bottom: 15px;
}

.procedimiento .texto p {
    margin-bottom: 15px;
}

.procedimiento .texto ul {
    margin: 10px 0 20px;
    padding-left: 25px;
}

.procedimiento .texto li {
    margin-bottom: 8px;
}

/* =========================================================
   COLUMNA DERECHA RESERVADA
   Mantiene el bloque 50% texto / 50% imágenes
   aunque no exista una imagen.
   ========================================================= */

.procedimiento::after {
    content: "";
    display: block;
    width: 100%;
}


/* =========================================================
   ENLACES
   ========================================================= */

.procedimiento .texto a {
    color: rgb(0, 127, 153);
    font-weight: bold;
}


/* =========================================================
   PRESENTACIÓN CON IMÁGENES
   TEXTO A LA IZQUIERDA / IMÁGENES A LA DERECHA
   ========================================================= */

.procedimiento-presentacion {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: center;
    gap: 40px;
}

.procedimiento-texto {
    width: 100%;
    line-height: 1.6;
}


/* =========================================================
   COLUMNA DE IMÁGENES
   DIVISIÓN VERTICAL SUTIL
   ========================================================= */

.procedimiento-imagenes {
    width: 100%;
    padding-left: 30px;
    border-left: 1px solid #e2e2e2;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.procedimiento-imagen {
    width: 100%;
}

.procedimiento-imagen img {
    width: 100%;
    height: auto;
    display: block;
}


/* =========================================================
   FRASE DESTACADA
   ========================================================= */

.frase-procedimiento {
    color: rgb(0, 127, 153);
    font-weight: bold;
    font-style: italic;
    text-align: center;
    margin-top: 10px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@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;
    }


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

    .contenido-principal {
        gap: 30px;
    }


    /* =====================================================
       PRESENTACIÓN
       ===================================================== */

    .procedimiento-presentacion {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .procedimiento {
        grid-template-columns: 1fr;
        gap: 20px;
    }


    .procedimiento-texto {
        width: 100%;
    }


    /* =====================================================
       IMÁGENES
       ===================================================== */

    .procedimiento-imagenes {
        width: 100%;
        padding-left: 0;
        padding-top: 25px;
        border-left: none;
        border-top: 1px solid #e2e2e2;
        gap: 20px;
    }

    .procedimiento-imagen {
        width: 100%;
    }

    .procedimiento-imagen img {
        width: 100%;
        height: auto;
    }


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

    .procedimiento .texto h2 {
        margin-bottom: 10px;
    }

}

/* =========================================================
   AGENDA Y TELÉFONO EN PROCEDIMIENTOS
   Debajo de la imagen de presentación
   ========================================================= */

.agenda-procedimiento {
    text-align: center;
    margin-top: 20px;
}

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

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

.telefono-agenda {
    display: block;
    margin-top: 10px;
    text-align: center;
    color: rgb(0, 127, 153);
    text-decoration: none;
    font-weight: 600;
}

.telefono-agenda:hover {
    text-decoration: underline;
}


/* =========================================================
   RESPONSIVE — AGENDA
   ========================================================= */

@media (max-width: 768px) {

    .agenda-procedimiento {
        margin-top: 15px;
    }

    .btn-agenda {
        margin: 15px auto 0;
        padding: 11px 20px;
    }

    .telefono-agenda {
        margin-top: 8px;
    }

}