/* ==================================================
   MATUONLINE - STYLE GLOBAL
   Frutiger Aero + web 2000
================================================== */


/* =========================
   BASE
========================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 25px 10px;

    background-image: url("images/fondo.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    font-family: Tahoma, Arial, sans-serif;
    color: #2d4651;
}


/* =========================
   PAGINA
========================= */

.pagina {
    width: 960px;
    max-width: 100%;

    margin: auto;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.97),
            rgba(244,252,255,0.96)
        );

    border: 1px solid #4c9ec5;

    border-radius: 8px;

    overflow: hidden;

    box-shadow:
        0 0 0 2px rgba(255,255,255,0.75),
        0 7px 22px rgba(0,75,125,0.30),
        inset 0 1px 0 rgba(255,255,255,0.95);
}


/* =========================
   HEADER
========================= */

.header {
    position: relative;

    padding: 22px 25px 20px;

    color: white;

    background:
        radial-gradient(
            circle at 18% 0%,
            rgba(255,255,255,0.42),
            transparent 30%
        ),
        linear-gradient(
            to bottom,
            #b8f6ff 0%,
            #77ddf6 18%,
            #41bce9 43%,
            #1687ce 51%,
            #35a9df 78%,
            #59c4ea 100%
        );

    border-bottom: 1px solid #116b9e;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.95),
        inset 0 -1px 0 rgba(0,74,120,0.25);

    overflow: hidden;
}

.header::before {
    content: "";

    position: absolute;

    left: 15px;
    right: 15px;
    top: 5px;

    height: 9px;

    border-radius: 999px;

    background:
        linear-gradient(
            to right,
            rgba(255,255,255,0),
            rgba(255,255,255,0.72),
            rgba(255,255,255,0)
        );

    opacity: 0.9;
}

.header::after {
    content: "";

    position: absolute;

    width: 190px;
    height: 190px;

    right: -50px;
    top: -95px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,0.26),
            rgba(255,255,255,0.04) 62%,
            transparent 72%
        );

    pointer-events: none;
}

.titulo {
    position: relative;

    z-index: 1;

    font-family: Arial, sans-serif;

    font-size: 34px;

    font-weight: bold;

    text-shadow:
        1px 1px 0 #0b5c8e,
        2px 2px 3px rgba(0,62,100,0.35),
        0 0 5px rgba(255,255,255,0.45);

    margin-bottom: 3px;
}

.subtitulo {
    position: relative;

    z-index: 1;

    font-size: 13px;

    color: #effdff;

    text-shadow:
        1px 1px 1px rgba(0,80,120,0.45);
}

.cita {
    position: absolute;

    z-index: 1;

    right: 25px;
    top: 25px;

    width: 330px;

    font-family: Georgia, serif;

    font-size: 12px;

    font-style: italic;

    line-height: 1.4;

    text-align: right;

    color: #f8feff;

    text-shadow:
        1px 1px 2px #15547a;
}


/* =========================
   MENU
========================= */

.menu {
    display: flex;

    flex-wrap: wrap;

    gap: 5px;

    padding: 8px;

    background:
        linear-gradient(
            to bottom,
            #f9ffff 0%,
            #dcf5f9 48%,
            #bce6ef 100%
        );

    border-bottom: 1px solid #75aebe;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.95);
}

.menu a {
    display: block;

    position: relative;

    overflow: hidden;

    padding: 6px 13px;

    color: #135b75;

    text-decoration: none;

    font-size: 12px;

    font-weight: bold;

    border-radius: 7px;

    background:
        linear-gradient(
            to bottom,
            #ffffff 0%,
            #f4ffff 28%,
            #d5f4f8 48%,
            #aee2ec 53%,
            #93d2e3 100%
        );

    border: 1px solid #6ea9bd;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,1),
        inset 0 -1px 0 rgba(40,120,155,0.15),
        0 1px 2px rgba(0,90,135,0.15);

    transition:
        transform 0.12s ease,
        box-shadow 0.12s ease,
        border-color 0.12s ease;
}

.menu a::before {
    content: "";

    position: absolute;

    left: 4px;
    right: 4px;
    top: 2px;

    height: 42%;

    border-radius: 5px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.72),
            rgba(255,255,255,0.10)
        );

    pointer-events: none;
}

.menu a:hover {
    color: #316d08;

    transform: translateY(-1px);

    background:
        linear-gradient(
            to bottom,
            #ffffff 0%,
            #f7ffe9 25%,
            #e0ffbd 47%,
            #b8ea79 53%,
            #91d54f 100%
        );

    border-color: #72aa4d;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,1),
        0 2px 4px rgba(70,135,35,0.18);
}


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

.contenido {
    padding: 15px;

    background:
        linear-gradient(
            to bottom,
            rgba(235,249,253,0.94),
            rgba(246,253,255,0.95)
        );
}


/* =========================
   PANELES
========================= */

.panel {
    margin-bottom: 15px;

    border: 1px solid #8bb8c7;

    border-radius: 6px;

    overflow: hidden;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.98),
            rgba(237,248,251,0.98)
        );

    box-shadow:
        inset 0 1px 0 #ffffff,
        0 2px 5px rgba(30,110,150,0.14);
}

.panel-titulo {
    position: relative;

    overflow: hidden;

    padding: 6px 9px;

    font-family: Arial, Tahoma, sans-serif;

    font-size: 13px;

    font-weight: bold;

    color: white;

    text-shadow:
        1px 1px 1px #176080,
        0 0 2px rgba(255,255,255,0.25);

    background:
        linear-gradient(
            to bottom,
            #a5efff 0%,
            #5bcbee 32%,
            #229fd5 48%,
            #147db8 52%,
            #33a8da 100%
        );

    border-bottom: 1px solid #116f9d;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.85);
}

.panel-titulo::after {
    content: "";

    position: absolute;

    left: 5px;
    right: 5px;
    top: 2px;

    height: 35%;

    border-radius: 8px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.45),
            rgba(255,255,255,0)
        );

    pointer-events: none;
}


/* =========================
   LINKS GENERALES
========================= */

a {
    color: #1376a7;
}

a:hover {
    color: #4d931c;
}


/* =========================
   SELECCION
========================= */

::selection {
    background: #bdf47c;
    color: #214b0d;
}


/* =========================
   SCROLLBAR
========================= */

::-webkit-scrollbar {
    width: 13px;
}

::-webkit-scrollbar-track {
    background:
        linear-gradient(
            to right,
            #e7f8fb,
            #c9edf4
        );
}

::-webkit-scrollbar-thumb {
    background:
        linear-gradient(
            to bottom,
            #8de5f6,
            #2da8dc
        );

    border: 2px solid #d9f8ff;

    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(
            to bottom,
            #b4f48a,
            #69c646
        );
}


/* =========================
   FOOTER
========================= */

.footer {
    padding: 10px;

    text-align: center;

    font-size: 10px;

    color: #477083;

    background:
        linear-gradient(
            to bottom,
            #effcff 0%,
            #d5f0f5 50%,
            #bbe5ee 100%
        );

    border-top: 1px solid #92bac8;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.9);
}


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

@media (max-width: 700px) {

    body {
        padding: 10px 5px;

        background-size: cover;

        background-position: center center;

        background-attachment: scroll;
    }

    .pagina {
        border-radius: 5px;
    }

    .cita {
        position: static;

        width: auto;

        margin-top: 12px;

        text-align: left;
    }

    .menu {
        gap: 4px;
    }

    .menu a {
        padding: 6px 10px;
    }

}