/* Title fonts */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

.playfair {
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=Quattrocento:wght@400;700&display=swap');

.quattrocento {
    font-family: "Quattrocento", serif;
    font-weight: 700;
    font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap');

.fjalla {
    font-family: "Fjalla One", sans-serif;
    font-weight: 400;
    font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=Lustria&display=swap');

.lustria {
    font-family: "Lustria", serif;
    font-weight: 400;
    font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&display=swap');

.cormorant {
    font-family: "Cormorant Garamond", serif;
    font-weight: 400;
    font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');

.oswald {
    font-family: "Oswald", sans-serif;
    font-weight: 400;
    font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&display=swap');

.cinzel {
    font-family: "Cinzel", serif;
    font-weight: 400;
    font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=Sacramento&display=swap');

.sacramento {
    font-family: "Sacramento", cursive;
    font-weight: 400;
    font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,400..900;1,400..900&display=swap');

.fraunces {
    font-family: "Fraunces", serif;
    font-weight: 400;
    font-style: normal;
}



/* Text fonts */
@import url('https://fonts.googleapis.com/css2?family=Quattrocento+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

.quattrocento {
    font-family: "Quattrocento Sans", sans-serif;
    font-weight: 400;
    font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=Fanwood+Text:ital@0;1&display=swap');

.fanwood {
    font-family: "Fanwood Text", serif;
    font-weight: 400;
    font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400..700;1,400..700&display=swap');

.baskerville {
    font-family: "Libre Baskerville", serif;
    font-weight: 400;
    font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

.lato {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=Proza+Libre:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&display=swap');

.proza {
    font-family: "Proza Libre", sans-serif;
    font-weight: 400;
    font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');

.ebgaramond {
    font-family: "EB Garamond", serif;
    font-weight: 400;
    font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=Fauna+One&display=swap');

.fauna {
    font-family: "Fauna One", serif;
    font-weight: 400;
    font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=Alice&display=swap');

.alice {
    font-family: "Alice", serif;
    font-weight: 400;
    font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;1,400&display=swap');

.montserrat {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-style: normal;
}

:root {
    /* Valores por defecto - sobrescritos por la DB via inline style */
    --brand-color: #4e73df;
    --bg-color: #1A191E;
    --font-color: #B0B0B0;
    --main-color: #23a72e;
    --btn-primary: #4e73df;
    --btn-secondary: #323232;
    --btn-hover: #E4112F;
    --btn-primary-font-color: #ffffff;
    --btn-secondary-font-color: #ffffff;
    --btn-hover-font-color: #ffffff;
    /* Font activas (defaults) */
    --font-title: 'Playfair Display', serif;
    --font-title-color: #ffffff;
    --font-text: 'Fanwood Text', serif;
    --font-text-color: #B0B0B0;
    /* Title fonts disponibles */
    --title-playfair: 'Playfair Display', serif;
    --title-quattrocento: 'Quattrocento', serif;
    --title-fjalla: 'Fjalla One', sans-serif;
    --title-lustria: 'Lustria', serif;
    --title-cormorant: 'Cormorant Garamond', serif;
    --title-oswald: 'Oswald', sans-serif;
    --title-cinzel: 'Cinzel', serif;
    --title-sacramento: 'Sacramento', cursive;
    --title-fraunces: 'Fraunces', serif;
    /* Text fonts disponibles */
    --text-fanwood: 'Fanwood Text', serif;
    --text-baskerville: 'Libre Baskerville', serif;
    --text-lato: 'Lato', sans-serif;
    --text-proza: 'Proza Libre', sans-serif;
    --text-ebgaramond: 'EB Garamond', serif;
    --text-fauna: 'Fauna One', serif;
    --text-alice: 'Alice', serif;
    --text-montserrat: 'Montserrat', sans-serif;
}

body {
    color: var(--font-color);
    background-color: var(--bg-color);
    font-family: var(--font-text);
    font-size: 16px;
}

.blog-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 15px 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-title);
    color: var(--font-title-color);
}

p {
    font-family: var(--font-text);
    color: var(--font-color);
}

/* Buttons */
.btn {
    font-size: 15px;
    padding: 10px 25px;
    letter-spacing: 0.1em;
    color: var(--btn-primary-font-color);
    border-radius: 0;
    border: 0;
}

.btn img {
    margin-left: 5px;
    width: 19px;
    position: relative;
}

.btn:hover {
    color: #ffffff;
    background-color: rgba(228, 17, 47, 0.7);
}

.btn:active,
.btn:focus {
    border: 0;
    color: #ffffff;
    background-color: rgba(228, 17, 47, 0.7);
    box-shadow: none;
}

.btn-primary {
    background-color: var(--btn-primary);
}

/* Colores botones, hover, underline, pabinacion*/
.text-primary,
.text-primary-onHover:hover {
    color: var(--main-color) !important;
}

.widget-title {
    border-bottom: 2px solid var(--main-color);
    font-family: var(--font-title);
    color: var(--font-title-color) !important;
}

.card-title,
.card-title-link {
    font-family: var(--font-title);
    color: var(--font-title-color) !important;
}

.post-meta,
.post-meta a {
    font-family: var(--font-text);
    color: var(--font-color) !important;
}

.sidenav .nav-link::after {
    background-color: var(--brand-color);
}

.sidenav .nav-link:hover {
    color: var(--brand-color) !important;
}

.sidenav .nav-link[aria-expanded="true"],
.sidenav .active .nav-link {
    color: var(--btn-hover) !important;
}

.page-item.active .page-link {
    color: #fff;
    background-color: var(--main-color);
    border-color: var(--main-color);
}

.sidenav select {
    border: 1px solid var(--main-color) !important;
}