@import url('https://fonts.googleapis.com/css2?family=Encode+Sans:wght@100..900&family=Oswald:wght@200..700&family=Passion+One:wght@400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&display=swap');

/* ============================================================================
   SAFETY NET — prevent any single wide element from forcing horizontal
   scroll on the whole page (percentage widths break once this happens)
   ============================================================================ */

html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

.page,
.item.resource {
    background-color: #f7fbf3 !important;
}

/* ============================================================================
   ADMIN / USER BAR (only visible to logged-in editors, not public visitors)
   ============================================================================ */

#user-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

#user-bar .site-links,
#user-bar .user-links {
    display: flex !important;
    flex-wrap: wrap !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

#user-bar .site-links span,
#user-bar .user-links span,
#user-bar .site-links a,
#user-bar .user-links a {
    white-space: normal !important;
    word-break: break-word !important;
}

@media screen and (max-width: 480px) {
    #user-bar {
        font-size: 0.8rem !important;
    }
}

/* #user-bar {

    display: none !important;
} */

/* ============================================================================
   GLOBAL STYLES / TOP BAR
   ============================================================================ */

.sub-menu.wide.sticky-container,
.nav.sub-menu.wide.sticky-container,
.site-title,
.top-bar-left,
.breadcrumbs,
.site-page-pagination {
    display: none !important;
}

.top-bar {
    display: flex !important;
    width: 80% !important;
    max-width: 80% !important;
    margin: 0 auto !important;
    background-color: #303D32;
    padding-left: 2% !important;
    padding-right: 2% !important;
}

#responsive-menu.top-bar-right {
    display: flex !important;
    width: 100% !important;
    align-items: center !important;
    margin-left: 0 !important;
}

/* Left tab menu: don't grow to fill space */
#responsive-menu.top-bar-right .dropdown.menu {
    align-items: center !important;
    flex: 0 1 auto !important;
    background-color: #303D32 !important;
}

/* Search box: pushed to the far right */
#responsive-menu.top-bar-right .search {
    align-items: center !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
}

.top-bar .dropdown-toggle {
    color: #ffffff !important;
}

.top-bar .dropdown-toggle:hover,
.is-submenu-item .is-dropdown-submenu-item .nav-nav-header:hover {
    color: #00BF63 !important;
}

.top-bar .input-group-button .button {
    background-color: #303D32 !important;
    height: 40px !important;
}

header .search .input-group-field {
    height: 40px !important;
}

.vertical.menu.accordion-menu .dropdown.active.is-accordion-submenu-parent.has-submenu-toggle a {
    background-color: #303D32 !important;
    color: #ffffff !important;
}

.vertical.menu.accordion-menu .dropdown.is-accordion-submenu-parent.has-submenu-toggle a {
    color: #303D32 !important;
}

.search .input-group-button .button {
    background-color: #00BF63 !important;
}

#content {
    max-width: 80% !important;
    width: 80% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    min-height: 100vh !important;
    background-color: #ffffff !important;
}

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

.title {
    color: #303D32;
    font-family: "Cinzel", serif;
    font-weight: 500;
    font-size: 2.5rem;
}

.site-title img {
    max-height: 100px !important;
    width: auto !important;
}

.dropdown.is-dropdown-submenu-parent.opens-left {
    background-color: #303D32 !important;
}

.dropdown.is-dropdown-submenu-parent.opens-left a {
    font-family: "Encode Sans", sans-serif !important;
    font-weight: 400 !important;
    font-size: 1rem !important;
}

.dropdown.active.is-dropdown-submenu-parent.opens-left > a.dropdown-toggle {
    background-color: #303D32 !important;
    color: #ffffff !important;
}

.dropdown.active.is-dropdown-submenu-parent.opens-left > a.dropdown-toggle:hover {
    color: #00BF63 !important;
}

.dropdown.is-dropdown-submenu-parent > a.dropdown-toggle::after,
.dropdown.active.is-dropdown-submenu-parent > a.dropdown-toggle::after {
    border-top-color: #ffffff !important;
}

.top-bar-right .active a {
    background-color: #303D32 !important;
}

.nav-header {
    font-family: "Encode Sans", sans-serif !important;
    font-weight: 400 !important;
    font-size: 1rem !important;
    color: #ffffff !important;
    background-color: #303D32;
}

.nav-header:hover {
    color: #00BF63 !important;
    background-color: #303D32;
}

/* ============================================================================
   HOME PAGE LAYOUT
   ============================================================================ */

.site-page-section {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    min-height: auto !important;
    padding: 0 !important;
}

/* Remove Omeka's intermediate wrapper */
#blocks {
    display: contents !important;
}

#content .page-body,
.item_carousel {
    margin: 0 auto !important;
}

.page-body,
.preview-block {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    width: 100% !important;
    background-color: #ffffff !important;
    padding: 40px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* ============================================================================
   LOGO
   ============================================================================ */

.container-banner {
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin-bottom: 0px !important;
}

.logo-humamed {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    margin-top: 10px !important;
    margin-bottom: 3em !important;
}

.logo-humamed img {
    display: block !important;
    height: auto !important;
    max-width: 100% !important;
}

/* ============================================================================
   VISUAL ELEMENTS
   ============================================================================ */

.linea_divisora {
    width: 100%;
    height: 10px;
    border-bottom: 10px solid #303D32;
    margin-bottom: 3em !important;
}

/* ============================================================================
   TYPOGRAPHY
   ============================================================================ */

h2 {
    font-family: "Cinzel", serif;
    font-weight: 500;
    font-size: 2.5rem;
    color: #303D32;
    margin-top: 15px;
    margin-bottom: 15px;
    justify-content: center !important;
    text-align: center !important;
}

.page-body p {
    font-family: "Encode Sans", sans-serif !important;
    font-weight: 300;
    font-size: 1rem;
    color: #000;
    margin-bottom: 20px;
    justify-content: justify !important;
    text-align: justify !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    max-width: 100% !important;
}

.container-bienvenida,
.texto-bienvenida, .texto {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ============================================================================
   ABOUT THE PROJECT PAGE
   ============================================================================ */

.proyecto #content .sobre_el_proyecto {
    font-family: "Cinzel", serif;
    font-weight: 500;
    font-size: 3rem;
    color: #303D32;
    margin-top: 20px;
    margin-bottom: 20px;
    justify-content: center !important;
    text-align: center !important;
    padding: 20px !important;
}

.proyecto .contenedor_about {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
}

.colecciones #content .vertical.menu {
    display: none;
}

.cita p {
    margin-top: 20px !important;
    font-style: italic !important;
    font-size: medium !important;
    text-align: right !important;
}

.texto_coordinadores {
    margin-bottom: 20px !important;
}

.equipo,
.coordinadoras {
    display: flex;
    
    gap: 2rem;
    padding-bottom: 20px;
}

.equipo{
    flex-direction: row;
}

.coordinadoras{
    flex-direction: row;
}

.participante {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1 1 350px;
    align-items: center;
    height: 400px;
    background-color: #dee5e1;
    border-radius: 20px;
}

.participante img {
    margin-top: 40px;
    width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
}

.info p {
    margin-left: 10px;
    text-align: center !important;
    line-height: 1.5;
    white-space: normal;
}

.info p strong {
    font-size: 1.2rem !important;
}



/* ============================================================================
   COLLECTIONS
   ============================================================================ */

.preview-block {
    margin-bottom: 50px !important;
    width: 80% !important;
    max-width: 80% !important;
    justify-content: center !important;
    align-self: center !important;
}

.preview ul {
    display: flex !important;
    flex-direction: row !important;
}

.preview ul li {
    margin: 2% !important;
}

/* ============================================================================
   IMAGE CAROUSEL
   ============================================================================ */

.carousel {
    margin: 0 auto;
    padding: 20px 0;
    max-width: calc(100% - 100px);
    overflow: hidden;
    display: flex;
    border: 2px solid #303D32;
    border-radius: 10px;
    background-color: #dee5e1;
    margin-bottom: 20px;
    height: auto;
    scroll-marker-group: after;
}

.carousel > * {
    flex: 0 0 100%;
}

.carousel:hover .group {
    animation-play-state: paused;
}

.item {
    width: 100%;
    height: auto;
    display: block;
    justify-content: center;
    align-items: center;
    object-fit: scale-down;
}

.item img {
    width: 100%;
    max-height: 300px;
    object-fit: scale-down;
    display: block;
}

.item img:hover {
    transform: scale(1.05);
}

.group {
    display: flex;
    gap: 20px;
    padding-right: 20px;
    will-change: transform;
    animation: scrolling 15s linear infinite;
}

@keyframes scrolling {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

.go-to {
    margin-left: 50px;
}

.go-to:hover {
    text-decoration: underline !important;
}



/* ============================================================================
   Documentacion
   ============================================================================ */
.page.documentacion ul li{
    font-family: "Encode Sans", sans-serif !important;
    font-weight: 300;
    font-size: 1rem;
    color: #000;
    
}

/* ============================================================================
   COLLECTIONS PREVIEW GRID
   ============================================================================ */

.collection-preview-wrapper {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2rem;
    margin: 2rem auto;
}

.preview-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.2s ease;
}

.preview-item:hover {
    transform: scale(1.05);
}

.preview-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    border-radius: 6px;
}

.preview-item h3 {
    margin-top: 1rem;
    font-size: 1.2rem;
    font-weight: 600;
    color: #0229c3;
}

.preview-item a {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}

/* ============================================================================
   ITEM RESOURCE — BANNER & LE (h2)
   ============================================================================ */

/* The banner image — an aspect-ratio box that scales with its own width,
   so it always keeps its 3:1 shape instead of relying on a fixed px height
   anywhere. */
.item.resource #content h2::before {
    content: "";
    display: block;
    width: 95%;
    aspect-ratio: 3 / 1;
    background-image: url("https://scholar-omeka.uprm.edu/files/asset/149b4b5b3099f4de2e86327bedd2cb142145c630.png") !important;
    background-size: 100% auto !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    margin: 0 auto !important;
    
}

/* The original h2 text is never shown — the visible title always comes from
   the ::after content below (plain, or overridden per item-set further
   down), so this span is hidden everywhere under .item.resource. */
.item.resource #content h2 span {
    display: none !important;
}

.item.resource .resource-title h2 {
    margin-bottom: 0 !important;
}

/* Per-collection title text */
#content:has(a[href*="item_set_id=505"]) h2::after {
    content: "CARTELES EN COLECCIÓN" !important;
}

#content:has(a[href*="item_set_id=542"]) h2::after {
    content: "PELÍCULAS EN COLECCIÓN" !important;
}

#content:has(a[href*="item_set_id=541"]) h2::after {
    content: "OBRAS DE ARTES EN COLECCIÓN" !important;
}

#content:has(a[href*="item_set_id=540"]) h2::after {
    content: "FOTOS EN COLECCIÓN" !important;
}

#content:has(a[href*="item_set_id=980"]) h2::after {
    content: "TEXTOS LITERARIOS EN COLECCIÓN" !important;
}

#content:has(a[href*="item_set_id=537"]) h2::after {
    content: "PODCASTS EN COLECCIÓN" !important;
}

#content:has(a[href*="item_set_id=781"]) h2::after {
    content: "MUSEOS EN COLECCIÓN" !important;
}

/* #content:has(input[value="material didáctico"]) h2::after {
    content: "Material Didáctico" !important;
} */

#content:has(input[value="Malaria"]) h2::after {
    content: "Malaria" !important;
}

#content:has(input[value="Tuberculosis"]) h2::after {
    content: "Tuberculosis" !important;
}

#content:has(input[value="Bilharzia"]) h2::after {
    content: "Bilharzia" !important;
}

#content:has(input[value="Uncinariasis"]) h2::after {
    content: "Uncinariasis" !important;
}

#content:has(input[value="Cólera"]) h2::after {
    content: "Cólera" !important;
}


.item.resource #content h2::after {
    width: 95% !important;

    /* Reveal text */
    text-indent: 0 !important;
    display: block !important;
    text-align: center !important; /* change to left/right if preferred */

    /* Typography & aesthetics — clamp() keeps the title from overwhelming
       narrow/mobile widths instead of staying a flat 3rem everywhere */
    font-family: "Cinzel", serif !important;
    font-size: clamp(1.75rem, 5vw, 2.5rem) !important;
    border-top: 10px solid #303D32 !important;
    margin: 0 auto !important;
    padding-top: 3rem !important; /* space between line and title text */
}

.item.resource #content h2 {
    padding: 0 !important;
    margin-top: 0 !important;
}

.item.resource.show #content {
    padding-top: 0 !important;
}

.item.resource #content .item-set-items {
    width: 100% !important;
    margin: 0 !important;
}

.item.resource #content .resources.resource-grid,
.item.resource #content .browse-controls.closed,
.browse-controls {
    width: 95% !important;
    margin: 0 auto !important;
}

.browse-controls {
    margin-top: 20px !important;
}

.item.resource .browse-controls.closed {
    margin-bottom: 10px !important;
}

.item.resource .filter .filter-label,
.item.resource button,
.next.button,
.previous.button {
    background-color: #00BF63 !important;
}

/* ============================================================================
   ITEM RESOURCE — "ITEM" LABEL (h3)
   ============================================================================ */

.item.resource.browse #content h3 {
    display: none !important;
}

.item.resource.show #content h3 {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 1;
    margin: 0 auto !important;
    padding: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
    text-indent: -9999px !important;

    background: none !important;
    background-image: url("https://scholar-omeka.uprm.edu/files/asset/149b4b5b3099f4de2e86327bedd2cb142145c630.png") !important;
    background-size: 100% auto !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* ============================================================================
   ITEM RESOURCE — SHOW PAGE LAYOUT
   ============================================================================ */

.item.resource.show #content .resource-title,
.item.resource.show #content .grid-x {
    width: 95% !important;
    justify-content: center !important;
    margin: 0 auto !important;
}

.item.resource.show #content .grid-x {
    border-top: 10px solid #303D32;
    margin-top: 1em !important;
}

.item.resource.show #content {
    background-color: #ffffff !important;
    padding: 10px !important;
}

.resource.show #resource-values {
    margin-right: 1em !important;
}

/* ============================================================================
   ITEM RESOURCE — METADATA & RESOURCE GRID LIST
   ============================================================================ */

.page.carteles_coleccion #content h2 span {
    font-size: 4rem !important;
}

.item.resource .metadata,
.page.carteles_coleccion .metadata {
    display: none !important;
}

.item.resource .resources.resource-grid {
    display: block !important;
    margin-bottom: 20px !important;
}

.item.resource .resources.resource-grid li {
    border-bottom: 1px solid #ddd !important;
}

.item.resource .resources.resource-grid .item.resource,
.page.carteles_coleccion .resources.resource-grid .item.resource {
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    justify-content: flex-start !important;
    background-color: #ffffff !important;
}

.item.resource .resources.resource-grid .item.resource .resource-image,
.page.carteles_coleccion .resources.resource-grid .item.resource .resource-image {
    width: 100% !important;
    flex: 0 0 15% !important;
    margin-right: 20px !important;
}

.item.resource .resources.resource-grid .resource-meta,
.page.carteles_coleccion .resources.resource-grid .resource-meta {
    display: flex !important;
    flex-direction: column !important;
    width: auto !important;
}

.item.resource .resources.resource-grid .resource-meta h4,
.page.carteles_coleccion .resources.resource-grid .resource-meta h4 {
    align-self: flex-start !important;
    margin-right: 0 !important;
    margin-bottom: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
}

/* Title hover — underline text */
.item.resource .resources.resource-grid .resource-meta h4 a:hover,
.page.carteles_coleccion .resources.resource-grid .resource-meta h4 a:hover {
    text-decoration: underline !important;
}

.item.resource .resources.resource-grid .resource-meta h4 a,
.page.carteles_coleccion .resources.resource-grid .resource-meta h4 a {
    flex: 1 1 auto !important;
    font-size: 1.3rem !important;
    font-family: "Cinzel", serif !important;
    font-weight: 500 !important;
}

.item.resource .resources.resource-grid .resource-meta .description.full,
.page.carteles_coleccion .resources.resource-grid .resource-meta .description.full {
    flex: 1 1 auto !important;
    width: 100% !important;
    font-family: "Encode Sans", sans-serif !important;
}

.item.resource.show #content .media-embeds .media-render:has(img):has(~ .media-render iframe) {
    display: none !important;
}

#resource-values.stack > dl:first-of-type > div.property:first-child dt {
    display: none !important;
}

/* Estiliza el valor del título — solo del primer dl */
#resource-values.stack > dl:first-of-type > div.property:first-child .values .value {
    font-family: "Cinzel", serif !important;
    font-size: 2.5rem !important;
    font-weight: 500 !important;
    color: #303D32 !important;
}

.item.resource.show #content .media-embeds .media-render iframe {
    height: 60vh !important;
    min-height: 300px !important;
}

.item.resource.show #content .media-embeds .media-render iframe a {
    display: none !important;
}

/* ============================================================================
   MATERIAL DIDÁCTICO
   ============================================================================ */

.contenedor-material {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    margin: 0 auto !important;
    gap: 20px !important;
}

.left-view {
    flex: 0 1 75% !important;
    margin-right: 20px !important;
}

.right-view {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 1 25%;
    margin-left: 0;
}

/* Force the sidebar to actually fill its column, instead of shrinking to
   fit its content — this is what was keeping the buttons narrow and
   centered instead of stretching edge-to-edge. */
.right-view aside {
    width: 100%;
}

.right-view .sub-menu-item,
.right-view .sub-menu-item-active {
    list-style-type: none;
    font-family: "Encode Sans", sans-serif !important;
    font-weight: 300 !important;
    font-size: 1.2rem !important;
    margin-bottom: 20px !important;
}

.right-view .sub-menu-item-active {
    background-color: #c4c7c0 !important;

}

.right-view aside ul li.sub-menu-item-active {
    display: block;
    box-sizing: border-box;
    padding: 0.75rem 1rem 0.75rem 1.5rem; /* matches the anchor's padding exactly */
    color: #303D32 !important; /* dark text so it reads against the light grey */
}

.right-view aside h4 {
    font-family: "Cinzel", serif !important;
    font-weight: 500 !important;
    font-size: 2rem !important;
    color: #ffffff !important;
    margin-bottom: 20px !important;
    margin-top: 1em !important;
    justify-content: center !important;
    text-align: center !important;
}

.right-view aside ul {
    margin-left: 0 !important;
    margin-bottom: 0 !important;
    width: 100%;
}

/* Button-style rows: square corners, full width */
.right-view aside ul li {
    width: 100%;
    box-sizing: border-box;
    background-color: #303D32 !important;
    border-radius: 0 !important;
    transition: background-color 0.2s ease;
}

.right-view aside ul li:hover {
    background-color: #00BF63 !important;
}

.right-view aside ul li a {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem 1rem 0.75rem 1.5rem; /* extra left padding — the gap you asked for between text and box edge */
    color: #ffffff !important;
    cursor: pointer;
}

.search-filters {
    display: none !important;
}

/* ============================================================================
   ADVANCED SEARCH
   ============================================================================ */

.items.search #content {
    width: 70% !important;
}

.items.search .add-value.button,
.items.search #by-datetime-label,
.items.search #by-has-media-label,
.items.search #by-media-type-label,
.items.search #advanced-search #page-actions input,
.items.search .o-icon-delete.remove-value.button {
    background-color: #00BF63 !important;
}



/*==============================================================================
   Timeline
   ============================================================================ */

/* .timeline{
    height: 800px !important;
    width: 100% !important;
} */



/* ============================================================================
   RESPONSIVE — consolidated media queries (ordered widest to narrowest)
   ============================================================================ */

/* Tablets / medium screens (≤ 1024px) — Foundation's dropdown submenus are
   built as absolutely-positioned flyouts for wide desktop screens. Since the
   desktop menu is forced to show at every width (see #responsive-menu above),
   we need the submenu panel to lay out inline instead of floating over the
   page content once the screen gets narrower than that. */
@media screen and (max-width: 1024px) {
    #responsive-menu .is-dropdown-submenu {
        position: static !important;
        width: 100% !important;
        box-shadow: none !important;
    }

    /* Stack the top-level items vertically so an open submenu pushes
       the rest of the menu down, instead of the other items just sitting
       beside it at the top */
    #responsive-menu .dropdown.menu {
        flex-direction: column !important;
        width: 100% !important;
    }

    #responsive-menu .dropdown.menu > li {
        width: 100% !important;
    }

    /* Indent submenu links slightly so the hierarchy still reads clearly
       now that they're inline instead of a floating flyout */
    #responsive-menu .is-dropdown-submenu .nav-header {
        padding-left: 2rem !important;
    }

    /* Search bar: stretch the form and its input to fill the full width
       of the search container instead of sitting narrower than it */
    #responsive-menu .search #search-form {
        display: flex !important;
        width: 100% !important;
        margin: 0 !important;
    }

    #responsive-menu .search .input-group-field {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
    }

    #responsive-menu .search .input-group-button {
        flex: 0 0 auto !important;
    }
}

/* Collections preview grid (≤ 900px) */
@media screen and (max-width: 900px) {
    .collection-preview-wrapper {
        grid-template-columns: repeat(3, 1fr);
    }

    .preview-item img {
        width: 100%;
        max-height: 200px;
    }

    .preview-item h3 {
        font-size: 1rem;
    }
}

/* Tablets / medium screens (≤ 820px) */
@media screen and (max-width: 820px) {
    /* Top bar: stop clamping to 80% width — that's a desktop-only layout choice */
    .top-bar {
        width: 100% !important;
    }

    /* Stack the menu and the search box instead of laying them out in a row,
       which is what was pushing the search box into the middle of the menu */
    #responsive-menu.top-bar-right {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    #responsive-menu.top-bar-right .dropdown.menu {
        flex: 1 1 auto !important;
        width: 100% !important;
    }

    #responsive-menu.top-bar-right .search {
        margin-left: 0 !important;
        width: 100% !important;
    }

    #content .page-body {
        width: 100% !important;
        max-width: 100% !important;
        background-color: #ffffff !important;
    }

    .page-body,
    .preview-block {
        padding: 20px !important;
    }

    .linea_divisora {
        height: 7px;
        border-bottom: 7px solid #303D32;
        margin-bottom: 20px !important;
    }

    h2 {
        font-size: 2.5rem;
    }

    .page-body p {
        font-size: 1.15rem !important;
    }
}

/* Small screens / phones (≤ 480px) */
@media screen and (max-width: 480px) {
    .site-title img {
        max-height: 60px !important;
        width: auto !important;
    }

    .title {
        font-size: 1.8rem;
    }

    .page-body,
    .preview-block {
        padding: 10px !important;
    }

    .linea_divisora {
        height: 5px;
        border-bottom: 5px solid #303D32;
    }

    h2 {
        font-size: 2rem;
    }

    .page-body p {
        font-size: 1rem !important;
        text-align: left !important;
    }
}