```css
/* =========================================================
   CONFIGURACIÓN GENERAL
========================================================= */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    color: #263238;
    line-height: 1.5;

    /*
    ---------------------------------------------------------
    FONDO PARA PC
    ---------------------------------------------------------
    */
    background-image: url("../img/fondo-mediacion.png");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;

    min-height: 100vh;
}


/* =========================================================
   CAPA SUAVE SOBRE EL FONDO
========================================================= */

body::before {
    content: "";
    position: fixed;
    inset: 0;

    background: rgba(255, 255, 255, 0.72);

    z-index: -1;
}


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

.contenedor {
    width: min(1100px, 92%);
    margin: 40px auto;
}


/* =========================================================
   ENCABEZADO
========================================================= */

.encabezado {
    text-align: center;
    margin-bottom: 30px;
}

.encabezado h1 {
    font-size: 34px;
    margin-bottom: 8px;
}

.encabezado p {
    color: #68747c;
    font-size: 16px;
}


/* =========================================================
   PESTAÑAS
========================================================= */

.pestanas {
    display: flex;
    gap: 8px;
    margin-bottom: 30px;

    border-bottom: 1px solid rgba(217, 222, 226, 0.8);

    overflow-x: auto;
}

.pestanas a {
    display: block;

    padding: 13px 20px;

    text-decoration: none;

    color: #46545c;

    background: rgba(255, 255, 255, 0.88);

    border-radius: 8px 8px 0 0;

    white-space: nowrap;

    transition: 0.2s ease;

    backdrop-filter: blur(6px);
}

.pestanas a:hover {
    background: rgba(233, 238, 241, 0.95);
}


/* =========================================================
   PESTAÑA ACTIVA
========================================================= */

.pestanas a.activa {
    background: #066771;
    color: #ffffff;
}


/* =========================================================
   EVENTOS
========================================================= */

.evento {
    display: none;

    background: rgba(255, 255, 255, 0.94);

    border-radius: 14px;

    padding: 28px;

    margin-bottom: 35px;

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.08);

    scroll-margin-top: 25px;

    backdrop-filter: blur(8px);
}


/* Evento seleccionado */

.evento.visible {
    display: block;
}


.evento h2 {
    font-size: 23px;

    margin-bottom: 20px;

    color: #263238;
}


/* =========================================================
   LISTADO
========================================================= */

.lista {
    width: 100%;
}

.fila {
    display: grid;

    grid-template-columns: 1fr 160px;

    align-items: center;

    border-bottom: 1px solid #e8ecef;

    padding: 14px 10px;

    gap: 20px;
}

.encabezado-lista {
    font-weight: bold;

    background: #f4f6f8;

    border-radius: 6px;
}

.nombre {
    word-break: break-word;
}

.accion a {
    display: inline-block;

    padding: 8px 16px;

    background: #066771;

    color: #ffffff;

    text-decoration: none;

    border-radius: 6px;

    transition: 0.2s ease;
}

.accion a:hover {
    opacity: 0.85;
}


/* =========================================================
   SIN RESULTADOS
========================================================= */

.sin-resultados {
    padding: 25px 10px;

    text-align: center;

    color: #7a858c;
}


/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media (max-width: 900px) {

    body {
        background-attachment: scroll;
    }

    .contenedor {
        width: 94%;
        margin: 30px auto;
    }

}


/* =========================================================
   RESPONSIVE - CELULAR
========================================================= */

@media (max-width: 700px) {

    body {

        /*
        -----------------------------------------------------
        FONDO ESPECÍFICO PARA MÓVILES
        -----------------------------------------------------
        */

        background-image: url("../img/fondo-mobil.png");

        background-size: cover;

        background-position: center top;

        background-attachment: scroll;

    }


    body::before {

        background: rgba(255, 255, 255, 0.78);

    }


    .contenedor {

        width: 94%;

        margin: 25px auto;

    }


    .encabezado h1 {

        font-size: 28px;

    }


    .encabezado p {

        font-size: 15px;

    }


    .pestanas {

        gap: 5px;

        margin-bottom: 20px;

    }


    .pestanas a {

        padding: 11px 15px;

        font-size: 14px;

    }


    .evento {

        padding: 18px;

        border-radius: 12px;

    }


    .evento h2 {

        font-size: 20px;

    }


    .fila {

        grid-template-columns: 1fr;

        gap: 8px;

    }


    .encabezado-lista {

        display: none;

    }


    .accion a {

        width: 100%;

        text-align: center;

    }

}
```