/*
 * Appyn theme — Header & Footer redesign layer
 * Loaded after style.min.css so it can safely override the parts of the
 * header and footer requested for the redesign, without editing the
 * original stylesheet. Nothing here changes theme functionality —
 * only presentation of #header and #footer.
 */

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

/* White header with a soft premium shadow instead of the teal underline.
   "html body #header" is used (same specificity family as the theme's own
   overrides) so this keeps winning even when the optional dark-mode
   toggle or accent-color settings are active. */
html body #header {
    background: #ffffff;
    border-bottom: 0;
    box-shadow: 0 2px 12px rgba(20, 22, 30, 0.07);
}

#header .container {
    flex-wrap: nowrap;
}

#header .logo {
    flex: 0 0 auto;
}

/* Center nav column */
#header .header-nav-wrap {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
}

#header .header-nav-wrap nav {
    margin-left: 0;
    flex: none;
    max-width: 100%;
}

/* Right-hand search column */
#header .header-search-wrap {
    flex: 0 0 auto;
    margin-left: 20px;
}

/* Dark, legible nav text on the new white background */
#header nav a {
    color: #23262f;
}

#header nav .menu > li.menu-item-has-children > a::after {
    color: #23262f;
}

#header nav .menu-open {
    color: #23262f;
}

#header nav ul li.current-menu-item a {
    color: #fff;
}

/* =============================================================
   HEADER — "App Search" box
   ============================================================= */

#header .searchBox {
    margin: 0;
    max-width: 300px;
    width: 300px;
}

#header .searchBox form {
    display: flex;
    align-items: center;
    overflow: visible;
    background: #f2f3f6;
    border: 1px solid #e3e5eb;
    border-radius: 999px;
    padding: 0 4px 0 16px;
    transition: border-color .2s, box-shadow .2s;
}

#header .searchBox form:focus-within {
    border-color: #1bbc9b;
    box-shadow: 0 0 0 3px rgba(27, 188, 155, .15);
}

#header .searchBox .sb_search[type="text"] {
    float: none;
    background: transparent;
    border: 0;
    height: 40px;
    padding: 0;
    margin-right: 0;
    font-size: 14px;
    color: #23262f;
    flex: 1 1 auto;
    min-width: 0;
}

#header .searchBox .sb_search[type="text"]::placeholder {
    color: #8a8f9c;
}

#header .searchBox .sb_submit[type="submit"] {
    float: none;
    width: 32px;
    min-width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 50%;
    font-size: 13px;
    margin-left: 6px;
    flex: none;
}

#header .searchBox form.wait::after {
    right: 44px;
}

#header .searchBox ul {
    top: 48px;
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(20, 22, 30, .18);
    overflow: hidden;
}

/* =============================================================
   HEADER — responsive
   ============================================================= */

@media (max-width: 900px) {
    #header .header-nav-wrap {
        flex: 0 0 auto;
        margin-left: auto;
    }

    #header .header-search-wrap {
        margin-left: 12px;
    }

    #header .searchBox {
        width: 200px;
        max-width: 200px;
    }
}

@media (max-width: 768px) {
    #header .header-search-wrap {
        margin-left: 10px;
    }
}

@media (max-width: 650px) {
    #header .searchBox {
        width: 150px;
        max-width: 150px;
    }

    #header .searchBox form {
        padding-left: 12px;
    }

    #header .searchBox .sb_search[type="text"] {
        font-size: 13px;
    }
}

@media (max-width: 500px) {
    #header .searchBox {
        width: 118px;
        max-width: 118px;
    }

    #header .searchBox form {
        padding-left: 10px;
    }
}

@media (max-width: 380px) {
    #header .searchBox {
        width: 96px;
        max-width: 96px;
    }

    #header .header-search-wrap {
        margin-left: 6px;
    }
}

/* =============================================================
   FOOTER — MODYOLO style
   White area with two link columns (icon + bold heading, inline
   links), a centred row of round social buttons between two thin
   rules, and a dark copyright bar at the very bottom.
   "html body #footer" outranks the theme's base #footer rules.
   ============================================================= */

html body #footer {
    clear: both;
    background: #ffffff;
    color: #212529;
    border-top: 0;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

html body #footer .footer-main {
    padding: 25px 0 24px;
}

html body #footer .footer-wrap {
    width: auto;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 44px;
    box-sizing: border-box;
}

/* Two columns */
html body #footer .footer-cols {
    display: flex;
    flex-wrap: wrap;
}

html body #footer .footer-col {
    flex: 0 0 50%;
    max-width: 50%;
    min-width: 0;
    box-sizing: border-box;
}

html body #footer .footer-col-2 {
    padding-left: 8px;
}

html body #footer h2.footer-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    padding: 0;
    border: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    color: #212529;
}

html body #footer h2.footer-title i {
    font-size: 18px;
    width: 19px;
    text-align: center;
    color: #212529;
}

/* Inline links, indented under the heading text */
html body #footer .footer-col ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0 0 0 36px;
    list-style: none;
}

html body #footer .footer-col ul li {
    margin: 0 24px 4px 0;
    padding: 0;
    list-style: none;
}

html body #footer .footer-col ul li a {
    display: inline-block;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-decoration: none;
    transition: color .15s;
}

html body #footer .footer-col ul li a:hover {
    color: #0d6efd;
}

/* Social row: rule — round buttons — rule */
html body #footer .footer-social-row {
    display: flex;
    align-items: center;
    margin-top: 19px;
}

html body #footer .footer-line {
    flex: 1 1 auto;
    height: 1px;
    background: #dee2e6;
}

html body #footer .footer-social-row .social {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    margin: 0 12px;
    padding: 0;
    list-style: none;
}

html body #footer .footer-social-row .social li {
    margin: 0 4px;
    padding: 0;
    list-style: none;
}

html body #footer .footer-social-row .social li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f1f1f6;
    color: #212529;
    font-size: 18px;
    line-height: 1;
    text-decoration: none;
    transition: background .2s, color .2s;
}

html body #footer .footer-social-row .social li a:hover {
    background: #e2e2ec;
    color: #000;
}

/* Dark copyright bar */
html body #footer .footer-copyright {
    padding: 16px 12px;
    background: #343a40;
    text-align: center;
}

html body #footer .footer-copyright .copy {
    float: none;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    font-style: italic;
    line-height: 1.4;
    color: #ffffff;
}

html body #footer .footer-copyright .copy a,
html body #footer .footer-copyright .copy p {
    color: #ffffff;
    font-weight: inherit;
    font-style: inherit;
    margin: 0;
}

html body #footer .footer-copyright .copy ul {
    display: block;
    margin: 0;
    padding: 0;
}

html body #footer .footer-copyright .copy ul li {
    display: inline-block;
    margin: 0 8px;
}

html body #footer .footer-copyright .copy ul li:not(:first-child)::before {
    content: none;
}

/* =============================================================
   FOOTER — responsive
   ============================================================= */

@media (max-width: 767px) {
    html body #footer .footer-wrap {
        padding: 0 20px;
    }

    html body #footer .footer-col {
        flex: 0 0 100%;
        max-width: 100%;
    }

    html body #footer .footer-col-2 {
        padding-left: 0;
        margin-top: 18px;
    }

    html body #footer .footer-social-row {
        margin-top: 22px;
    }

    html body #footer .footer-social-row .social {
        flex-wrap: wrap;
        justify-content: center;
        margin: 0 10px;
    }

    html body #footer .footer-line {
        flex: 1 1 12px;
        min-width: 12px;
    }
}

@media (max-width: 480px) {
    html body #footer h2.footer-title {
        font-size: 18px;
    }

    html body #footer .footer-col ul {
        padding-left: 29px;
    }

    html body #footer .footer-col ul li {
        margin-right: 18px;
    }

    html body #footer .footer-social-row .social li a {
        width: 38px;
        height: 38px;
        font-size: 17px;
    }
}

/* =============================================================
   SINGLE APP — combined hero card (icon + title, spec rows,
   full-width download button)
   Scoped away from .box-download and .box-versions so those
   views keep their original layouts.
   ============================================================= */

.app-s .box:not(.box-download):not(.box-versions) {
    display: flex;
    flex-direction: column;
}

/* Unwind the original float / negative-margin two-column grid */
.app-s .box:not(.box-download):not(.box-versions) .app-spe.s2 {
    float: none;
    width: 100%;
    padding-left: 0;
    margin-left: 0;
    order: 1;
}

.app-s .box:not(.box-download):not(.box-versions) .app-icb.s1 {
    float: none;
    width: 100%;
    margin: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    order: 4;
}

.app-s .box:not(.box-download):not(.box-versions) .app-desc-block {
    order: 2;
}

.app-s .box:not(.box-download):not(.box-versions) .app-data-block,
.app-s .box:not(.box-download):not(.box-versions) .app-info-block {
    order: 3;
}

.app-s .box:not(.box-download):not(.box-versions) .box-social {
    order: 5;
}

/* ---- Header row: icon left, title right ---- */

.app-s .box:not(.box-download):not(.box-versions) #breadcrumbs {
    float: none;
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
    opacity: .75;
}

.app-s .box:not(.box-download):not(.box-versions) #breadcrumbs li {
    float: none;
}

.app-s .box:not(.box-download):not(.box-versions) .app-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 12px;
}

.app-s .box:not(.box-download):not(.box-versions) .app-head-icon {
    flex: 0 0 auto;
    width: 84px;
}

.app-s .box:not(.box-download):not(.box-versions) .app-head-icon .bloque-imagen {
    width: 84px;
    border-radius: 14px;
    overflow: hidden;
}

.app-s .box:not(.box-download):not(.box-versions) .app-head-icon .image-single {
    border-radius: 14px;
}

.app-s .box:not(.box-download):not(.box-versions) .app-head-text {
    flex: 1 1 auto;
    min-width: 0;
}

.app-s .box:not(.box-download):not(.box-versions) h1.main-box-title {
    display: block;
    margin: 0;
    font-size: 23px;
    line-height: 31px;
    letter-spacing: -.2px;
}

.app-s .box:not(.box-download):not(.box-versions) .app-spe .version {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    font-style: italic;
    font-weight: 400;
    color: #8b93a1;
}

.app-s .box:not(.box-download):not(.box-versions) .s2 .meta-cats {
    display: block;
    margin: 14px 0 0;
}

/* ---- Short description ---- */

.app-s .box:not(.box-download):not(.box-versions) .app-desc-block {
    margin-top: 14px;
}

.app-s .box:not(.box-download):not(.box-versions) .app-desc-block .descripcion {
    text-align: left;
    margin: 0;
    font-size: 15px;
    line-height: 25px;
    opacity: .85;
}

/* ---- Spec rows (Style 2 = table) ---- */

.app-s .box:not(.box-download):not(.box-versions) .app-info-block {
    margin-top: 18px;
}

.app-s .box:not(.box-download):not(.box-versions) .app-info-block .table {
    border-collapse: collapse;
    width: 100%;
}

.app-s .box:not(.box-download):not(.box-versions) .app-info-block .table td {
    border: 0;
    padding: 13px 16px;
    vertical-align: middle;
    font-size: 14px;
    background: transparent;
}

.app-s .box:not(.box-download):not(.box-versions) .app-info-block .table tr {
    background: transparent;
}

.app-s .box:not(.box-download):not(.box-versions) .app-info-block .table tr:nth-child(odd) td {
    background: rgba(125, 135, 150, .09);
}

.app-s .box:not(.box-download):not(.box-versions) .app-info-block .table td:first-child {
    width: 42%;
    font-weight: 600;
    white-space: nowrap;
}

.app-s .box:not(.box-download):not(.box-versions) .app-info-block .table td b {
    font-weight: 600;
}

/* ---- Spec rows (Style 1 = div grid) rendered in the same skin ---- */

.app-s .box:not(.box-download):not(.box-versions) .app-data-block {
    margin-top: 18px;
}

.app-s .box:not(.box-download):not(.box-versions) .box-data-app {
    display: block;
}

.app-s .box:not(.box-download):not(.box-versions) .data-app {
    display: block;
    width: 100%;
    max-width: none;
    padding-right: 0;
    margin-bottom: 0;
}

.app-s .box:not(.box-download):not(.box-versions) .data-app .da-s {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 13px 16px;
    font-size: 14px;
}

.app-s .box:not(.box-download):not(.box-versions) .data-app .da-s:nth-child(odd) {
    background: rgba(125, 135, 150, .09);
}

.app-s .box:not(.box-download):not(.box-versions) .data-app .da-s br {
    display: none;
}

.app-s .box:not(.box-download):not(.box-versions) .data-app .da-s b {
    width: 42%;
    flex: 0 0 auto;
    font-weight: 600;
}

/* Row icons (added to both styles server-side) */
.app-s .box:not(.box-download):not(.box-versions) .da-ico {
    color: #e8174a;
    width: 20px;
    margin-right: 10px;
    flex: 0 0 auto;
    font-size: 15px;
    text-align: center;
}

/* ---- Rating ---- */

.app-s .box:not(.box-download):not(.box-versions) .app-icb.s1 .box-rating {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px 12px;
    margin: 18px 0 0;
    text-align: left;
}

.app-s .box:not(.box-download):not(.box-versions) .box-rating .rating,
.app-s .box:not(.box-download):not(.box-versions) .box-rating .ratings-click .rating-click.active,
.app-s .box:not(.box-download):not(.box-versions) .rating .stars {
    mask-size: 18px;
    -webkit-mask-size: 18px;
}

.app-s .box:not(.box-download):not(.box-versions) .app-icb.s1 .rating {
    width: 90px;
    height: 18px;
    margin: 0;
}

.app-s .box:not(.box-download):not(.box-versions) .app-icb.s1 .rating .stars {
    height: 18px;
}

.app-s .box:not(.box-download):not(.box-versions) .app-icb.s1 .box-rating .ratings-click {
    width: 90px;
    height: 18px;
}

.app-s .box:not(.box-download):not(.box-versions) .app-icb.s1 .box-rating .ratings-click .rating-click {
    width: 18px;
    height: 18px;
}

.app-s .box:not(.box-download):not(.box-versions) .app-icb.s1 .rating-average {
    font-size: 14px;
}

.app-s .box:not(.box-download):not(.box-versions) .app-icb.s1 .rating-average b {
    font-size: 20px;
}

.app-s .box:not(.box-download):not(.box-versions) .app-icb.s1 .rating-text {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    opacity: .7;
}

/* ---- Full-width download button ---- */

.app-s .box:not(.box-download):not(.box-versions) .app-icb.s1 .buttond {
    width: 100%;
    max-width: none;
    margin: 16px 0 0;
    padding: 0 24px;
    min-height: 52px;
    border-radius: 6px;
    font-size: 16px;
    letter-spacing: .2px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    overflow: visible;
    transition: filter .18s ease, transform .18s ease;
}

.app-s .box:not(.box-download):not(.box-versions) .app-icb.s1 .buttond:hover {
    filter: brightness(1.07);
    transform: translateY(-1px);
}

/* Neutralise the original absolutely-positioned icon block */
.app-s .box:not(.box-download):not(.box-versions) .app-icb.s1 .buttond i {
    position: static;
    background: none;
    border: 0;
    width: auto;
    height: auto;
    line-height: 1;
    padding: 0;
    font-size: 18px;
    display: inline-flex;
}

/* Secondary actions sit a step below the primary download button */
.app-s .box:not(.box-download):not(.box-versions) .app-icb.s1 .buttond.danv,
.app-s .box:not(.box-download):not(.box-versions) .app-icb.s1 .buttond.t,
.app-s .box:not(.box-download):not(.box-versions) .app-icb.s1 .buttond.wa,
.app-s .box:not(.box-download):not(.box-versions) .app-icb.s1 .buttond.yt {
    min-height: 46px;
    font-size: 14px;
    margin-top: 10px;
}

.app-s .box:not(.box-download):not(.box-versions) .app-icb.s1 .link-report {
    margin-top: 14px;
    font-size: 12px;
    opacity: .65;
    text-align: center;
}

.app-s .box:not(.box-download):not(.box-versions) .app-icb.s1 .link-report:hover {
    opacity: 1;
}

/* ---- Social share row ---- */

.app-s .box:not(.box-download):not(.box-versions) .app-spe.s2.box-social {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(125, 135, 150, .18);
}

.app-s .box:not(.box-download):not(.box-versions) .botones_sociales {
    justify-content: flex-start;
    overflow: visible;
    margin: 0;
    gap: 10px;
    padding-top: 0;
}

.app-s .box:not(.box-download):not(.box-versions) .botones_sociales li {
    width: auto;
    margin: 0;
    padding: 0;
}

.app-s .box:not(.box-download):not(.box-versions) .botones_sociales a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 18px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    transition: transform .18s ease, filter .18s ease;
}

.app-s .box:not(.box-download):not(.box-versions) .botones_sociales a:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
}

.app-s .box:not(.box-download):not(.box-versions) .botones_sociales li i {
    margin: 0;
    padding: 0;
    top: 0;
    width: auto;
    font-size: 15px;
}

/* =============================================================
   SINGLE APP hero — responsive
   ============================================================= */

@media (max-width: 768px) {
    .app-s .box:not(.box-download):not(.box-versions) h1.main-box-title {
        font-size: 20px;
        line-height: 28px;
    }
}

@media (max-width: 500px) {
    .app-s .box:not(.box-download):not(.box-versions) .app-head {
        gap: 12px;
    }

    .app-s .box:not(.box-download):not(.box-versions) .app-head-icon,
    .app-s .box:not(.box-download):not(.box-versions) .app-head-icon .bloque-imagen {
        width: 54px;
    }

    .app-s .box:not(.box-download):not(.box-versions) h1.main-box-title {
        font-size: 18px;
        line-height: 25px;
    }

    .app-s .box:not(.box-download):not(.box-versions) .app-info-block .table td,
    .app-s .box:not(.box-download):not(.box-versions) .data-app .da-s {
        padding: 11px 12px;
        font-size: 13px;
    }

    .app-s .box:not(.box-download):not(.box-versions) .app-info-block .table td:first-child,
    .app-s .box:not(.box-download):not(.box-versions) .data-app .da-s b {
        width: 46%;
    }

    .app-s .box:not(.box-download):not(.box-versions) .app-icb.s1 .buttond {
        min-height: 50px;
        font-size: 15px;
    }

    .app-s .box:not(.box-download):not(.box-versions) .app-desc-block .descripcion {
        font-size: 14px;
        line-height: 24px;
    }

    /* Compact icon-only share buttons on small screens */
    .app-s .box:not(.box-download):not(.box-versions) .botones_sociales {
        gap: 8px;
    }

    .app-s .box:not(.box-download):not(.box-versions) .botones_sociales a {
        font-size: 0;
        width: 42px;
        min-height: 42px;
        padding: 0;
        gap: 0;
        border-radius: 6px;
    }

    .app-s .box:not(.box-download):not(.box-versions) .botones_sociales li i {
        font-size: 16px;
    }
}

/* Put the download button straight after the spec rows, with the
   rating and report link below it (as in the reference layout). */
.app-s .box:not(.box-download):not(.box-versions) .app-icb.s1 .buttond {
    order: 1;
}

.app-s .box:not(.box-download):not(.box-versions) .app-icb.s1 .box-rating {
    order: 2;
    justify-content: center;
    margin-top: 16px;
}

.app-s .box:not(.box-download):not(.box-versions) .app-icb.s1 .link-report {
    order: 3;
}


/* =============================================================
   HEADER — orange pill nav + light hairline border (v2 redesign)
   Matches the reference header: white bar, thin light-grey bottom
   border (no shadow), "Home" as a solid orange pill, "Apps"/"Games"
   as plain dark links, and a light-grey rounded search field with
   a rounded-square orange submit button.
   Appended after the earlier header rules so it wins ties on equal
   specificity, without touching anything outside #header.
   ============================================================= */

html body #header {
    border-bottom: 1px solid #ececec;
    box-shadow: 0 14px 34px rgba(20, 22, 30, .22);
}

#header nav a {
    color: #1d222d;
    font-weight: 400;
    padding: 0 20px;
    line-height: 38px;
}

/* Hover indicator — orange gradient pill (grows in from 0 to 100% width
   via the theme's own li:hover rule, we just recolor + shape it) */
#header nav .menu > li > a::before {
    background: linear-gradient(135deg, rgba(255, 133, 52, .22), rgba(255, 102, 0, .16)) !important;
    border-radius: 999px;
}

#header nav .menu > li:hover > a {
    color: #ff6600;
}

/* Active page only — exact current-menu-item match. Kept as a solid
   gradient pill so it reads clearly as "you are here". */
#header nav ul li.current-menu-item a,
#header nav ul li.current-menu-item a:hover {
    background: linear-gradient(135deg, #ff8534, #ff6600) !important;
    color: #fff !important;
    font-weight: 600;
    border-radius: 999px;
    box-shadow: 0 6px 14px rgba(255, 102, 0, .35);
}

#header nav .menu > li.current-menu-item > a::before {
    display: none;
}

#header nav .menu > li.current-menu-item:hover > a {
    color: #fff;
}

/* Safety net: WordPress can mark a menu item as an "ancestor" or
   "parent" (current-menu-parent / current-menu-ancestor / current_page_parent
   / current_page_ancestor) whenever the page being viewed is nested under
   the page that item links to — e.g. Home was pointed at a page that other
   pages sit underneath. Those classes are intentionally NOT styled orange
   here, and this rule explicitly strips any inherited styling from them so
   the pill only ever lights up on the exact page you're on. Once the Home
   menu link is repointed at the real homepage URL in Appearance → Menus,
   this becomes a pure safety net rather than an active fix. */
#header nav ul li.current-menu-parent > a,
#header nav ul li.current-menu-ancestor > a,
#header nav ul li.current_page_parent > a,
#header nav ul li.current_page_ancestor > a {
    background: transparent !important;
    color: #1d222d !important;
    font-weight: 400 !important;
    box-shadow: none !important;
}

#header nav .menu > li.menu-item-has-children > a::after {
    color: #1d222d;
}

#header nav .menu-open {
    color: #1d222d;
}

/* Search field: light grey pill + inset rounded-square orange button */
#header .searchBox form {
    background: #f5f7fa;
    border-color: #ebedf2;
}

#header .searchBox .sb_search[type="text"] {
    color: #1d222d;
}

#header .searchBox .sb_submit[type="submit"] {
    background: #ff6600 !important;
    color: #fff;
    border-radius: 12px;
}

#header .searchBox .sb_submit[type="submit"]:hover {
    background: #e65c00;
}

/* =============================================================
   HEADER — light/dark toggle back in its original spot inside
   the nav menu (moved back per feedback — it was displaying
   awkwardly below the search box outside the nav)
   ============================================================= */

@media (max-width: 900px) {
    #header nav a {
        color: #000;
    }
}

/* =============================================================
   HOME — "Top rated apps" podium (replaces the old px-carousel
   for this one section with a static 3-place ranked layout:
   #2 left, #1 centre/elevated with a crown, #3 right).
   Scoped entirely to .section-top-rated so nothing else on the
   site (search results, related apps, etc. still using .bav2 /
   .bloque-imagen) is affected.
   ============================================================= */

.section-top-rated .title-section {
    justify-content: center;
    text-align: center;
    border-bottom: 0;
    margin: 0 0 4px;
    padding-bottom: 4px;
    font-size: 17px;
    font-weight: 700;
    color: #14161c;
    gap: 14px;
}

.section-top-rated .title-section::before,
.section-top-rated .title-section::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, rgba(126, 200, 242, 0), #7ec8f2);
}

.section-top-rated .title-section::after {
    background: linear-gradient(90deg, #7ec8f2, rgba(126, 200, 242, 0));
}

.toprated-podium {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 34px;
    padding: 26px 10px 6px;
    flex-wrap: wrap;
}

.toprated-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 108px;
    text-align: center;
    position: relative;
}

.toprated-item[data-rank="1"] {
    order: 3;
}

.toprated-item[data-rank="2"] {
    order: 2;
}

.toprated-item[data-rank="3"] {
    order: 4;
}

.toprated-item[data-rank="4"] {
    order: 1;
}

.toprated-item[data-rank="5"] {
    order: 5;
}

.toprated-crown {
    height: 22px;
    line-height: 22px;
    margin-bottom: 2px;
    color: #f6c000;
    font-size: 19px;
}

.toprated-avatar {
    position: relative;
    display: block;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    box-sizing: border-box;
    margin-bottom: 12px;
    box-shadow: 0 0 0 3px #16d9a6;
}

.toprated-item[data-rank="1"] .toprated-avatar {
    width: 92px;
    height: 92px;
    box-shadow: 0 0 0 3px #f6c000;
}

.toprated-item[data-rank="3"] .toprated-avatar {
    box-shadow: 0 0 0 3px #e336d6;
}

.toprated-avatar .bloque-imagen {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    float: none;
    margin: 0;
}

.toprated-avatar .bloque-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.toprated-avatar .bloque-status {
    display: none;
}

.toprated-badge {
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    line-height: 18px;
    border-radius: 50%;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    border: 2px solid #fff;
    background: #16d9a6;
}

.toprated-item[data-rank="1"] .toprated-badge {
    background: #f6c000;
}

.toprated-item[data-rank="3"] .toprated-badge {
    background: #e336d6;
}

.toprated-title {
    display: block;
    max-width: 108px;
    font-size: 13px;
    font-weight: 600;
    color: #23262f;
    white-space: nowrap;
    overflow: hidden;
}

/* Hover animation for the Top Rated cards: lift + scale the avatar,
   match the glow to that rank's accent colour, and tint the title.
   Wrapped in (hover: hover) so it only fires for an actual mouse
   cursor and never gets "stuck on" from a tap on touchscreens. */
@media (hover: hover) and (pointer: fine) {
    .toprated-item {
        transition: transform 0.25s ease;
    }

    .toprated-item:hover {
        transform: translateY(-6px);
    }

    .toprated-avatar {
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .toprated-item:hover .toprated-avatar {
        transform: scale(1.08);
        box-shadow: 0 0 0 3px #16d9a6, 0 10px 18px rgba(22, 217, 166, 0.35);
    }

    .toprated-item[data-rank="1"]:hover .toprated-avatar {
        box-shadow: 0 0 0 3px #f6c000, 0 10px 20px rgba(246, 192, 0, 0.4);
    }

    .toprated-item[data-rank="3"]:hover .toprated-avatar {
        box-shadow: 0 0 0 3px #e336d6, 0 10px 18px rgba(227, 54, 214, 0.35);
    }

    .toprated-crown {
        transition: transform 0.25s ease;
    }

    .toprated-item[data-rank="1"]:hover .toprated-crown {
        transform: translateY(-3px) rotate(-8deg);
    }

    .toprated-title {
        transition: color 0.2s ease;
    }

    .toprated-item:hover .toprated-title {
        color: #0f9c7d;
    }

    .toprated-item[data-rank="1"]:hover .toprated-title {
        color: #c98a00;
    }

    .toprated-item[data-rank="3"]:hover .toprated-title {
        color: #c92bbd;
    }
}

/* Graceful fallback for fewer than 3 rated apps (e.g. a new site that
   hasn't published a 3rd rated app yet). With only 1–2 items, the
   "elevate #1 in the centre with a bigger crowned circle" treatment
   just looks lopsided, so we drop the reordering and size boost and
   show them plainly, side by side, in rating order instead. Once a
   3rd app is published this rule no longer matches and the full
   podium automatically comes back. */
.toprated-podium:has(.toprated-item:nth-child(2):last-child) .toprated-item,
.toprated-podium:has(.toprated-item:only-child) .toprated-item {
    order: initial;
}

.toprated-podium:has(.toprated-item:nth-child(2):last-child) .toprated-item[data-rank="1"] .toprated-avatar,
.toprated-podium:has(.toprated-item:only-child) .toprated-item[data-rank="1"] .toprated-avatar {
    width: 70px;
    height: 70px;
}

@media (max-width: 500px) {
    /* Mobile-only layout: crown app centred on its own row, then the
       remaining four apps stacked as two centred pairs beneath it
       (2nd/3rd, then 4th/5th). Ranking order, desktop layout, cards
       and styling are untouched — this only changes how the same
       five items are positioned on small screens. Uses CSS Grid so
       the row breaks are explicit instead of relying on wrapping. */
    .toprated-podium {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        justify-items: center;
        align-items: start;
        gap: 18px 12px;
    }

    .toprated-item[data-rank="1"] {
        order: 1;
        grid-column: 1 / -1;
    }

    .toprated-item[data-rank="2"] {
        order: 2;
    }

    .toprated-item[data-rank="3"] {
        order: 3;
    }

    .toprated-item[data-rank="4"] {
        order: 4;
    }

    .toprated-item[data-rank="5"] {
        order: 5;
    }

    /* Fewer than 3 rated apps: fall back to a single centred row
       (matches the existing side-by-side fallback) instead of
       forcing the crown app onto its own full-width row. */
    .toprated-podium:has(.toprated-item:nth-child(2):last-child) .toprated-item[data-rank="1"],
    .toprated-podium:has(.toprated-item:only-child) .toprated-item[data-rank="1"] {
        grid-column: auto;
    }

    .toprated-item {
        width: 88px;
    }

    .toprated-avatar {
        width: 58px;
        height: 58px;
    }

    .toprated-item[data-rank="1"] .toprated-avatar {
        width: 76px;
        height: 76px;
    }

    .toprated-title {
        max-width: 88px;
        font-size: 12px;
    }
}

/* =============================================================
   HOME — "Latest Apps" section redesign (Games Mod - Latest).
   Scoped entirely to .section-latest-apps / .la-card so nothing
   else on the site (search results, related apps, mod-apps
   section, single app pages) which still use .bav1 / .bav2 is
   affected. Uses its own template-parts/loop/app-latest.php.

   Title + "View More" button and the app grid all sit inside one
   flat white bordered box (#fff, 1px solid #dee2e6, 8px radius) to
   match the reference design; individual cards are plain white
   boxes with the same 1px border colour, no drop shadow, arranged
   in a 3-column grid with a 16px gap.
   ============================================================= */

.section-latest-apps .latest-apps-box {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 18px;
}

.section-latest-apps .latest-apps-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 18px;
    padding: 0;
    border-bottom: 0;
}

.section-latest-apps .latest-apps-topbar .title-section {
    margin: 0;
    padding: 0;
    border-bottom: 0;
    font-size: 21px;
    font-weight: 700;
    color: #1c1e26;
}

.latest-apps-viewmore {
    display: inline-flex;
    align-items: center;
    flex: none;
    background: #ff6600 !important;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    padding: 11px 20px;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 6px 14px rgba(255, 102, 0, .4);
    transition: box-shadow .2s ease, transform .2s ease, background .2s ease;
}

.latest-apps-viewmore:hover {
    background: #e65c00 !important;
    color: #fff;
    box-shadow: 0 8px 18px rgba(255, 102, 0, .5);
    transform: translateY(-1px);
}

.latest-apps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

/* Card is a single centered flex row: icon — title/meta — download.
   The download button now sits inline (vertically centered) instead
   of being absolutely pinned to the bottom, so the card no longer
   needs extra reserved bottom padding just to fit it — height now
   tracks the icon/content instead of leaving dead space underneath. */
.la-card {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 14px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 14px;
    overflow: hidden;
    transition: border-color .2s ease;
}

/* New / Updated corner ribbon — sits flush on the card's own top-right
   corner (top:0; right:0;) with the SAME border-radius as the card
   (6px) on that corner, so it fits the corner seamlessly with no
   original border line or gap showing behind it. The card's
   overflow:hidden guarantees no stray corner ever pokes out. */
.la-badge {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px 5px 12px;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
    border-radius: 0 6px 0 14px;
    z-index: 2;
}

.la-badge i {
    font-size: 9px;
}

.la-badge-new {
    background: #0e9f4d;
}

.la-badge-update {
    background: #ff6600;
}

/* Fallback colour for any custom status key beyond New/Updated
   (e.g. a "Latest" status added via the add_value_app_status
   filter), so its label always stays legible. */
.la-badge:not(.la-badge-new):not(.la-badge-update) {
    background: #2563eb;
}

/* Download button — small circular button, now an inline flex item
   at the end of the card row (vertically centered next to the icon
   and text) instead of an absolutely-positioned overlay. Colour still
   matches the badge status. */
.la-download {
    flex: none;
    align-self: flex-end;
    margin-left: auto;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 12px;
    z-index: 2;
    transition: filter .2s ease;
}

.la-download:hover {
    filter: brightness(.94);
}

.la-download-new {
    background: #e5f5ea;
    color: #0e9f4d;
}

.la-download-update {
    background: #ffece0;
    color: #ff6600;
}

.la-card:hover {
    border-color: #ff6600 !important;
}

.la-card-icon {
    display: block;
    flex: none;
    width: 72px;
    height: 72px;
    border-radius: 10px;
    overflow: hidden;
    background: #eef0f5;
}

.section-latest-apps .la-card-icon .bloque-imagen.w75 {
    float: none;
    margin: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.section-latest-apps .la-card-icon .bloque-imagen.w75 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

.section-latest-apps .la-card-icon .bloque-status {
    display: none;
}

.la-card-body {
    flex: 1;
    min-width: 0;
}

.la-card-title {
    display: block;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #1c1e26;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 7px;
}

.la-card-title:hover {
    color: #eb144c;
}

.la-meta,
.la-mod {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 12.5px;
    color: #6b6f7d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.la-meta {
    margin-bottom: 4px;
}

.la-meta i,
.la-mod i {
    flex: none;
    width: 14px;
    font-size: 11px;
    color: #9a9dab;
    text-align: center;
}

@media (max-width: 900px) {
    .latest-apps-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .section-latest-apps .latest-apps-box {
        padding: 14px;
    }

    .section-latest-apps .latest-apps-topbar {
        margin: 0 0 14px;
    }

    .section-latest-apps .latest-apps-topbar .title-section {
        font-size: 18px;
    }

    .latest-apps-viewmore {
        padding: 9px 16px;
        font-size: 12.5px;
    }

    .latest-apps-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .la-card {
        gap: 10px;
        padding: 10px;
    }

    .la-card-icon {
        width: 58px;
        height: 58px;
    }

    .la-card-title {
        font-size: 14px;
    }

    .la-badge {
        padding: 4px 8px 4px 10px;
        font-size: 10px;
    }

    .la-download {
        width: 24px;
        height: 24px;
        font-size: 11px;
    }
}

/* =============================================================
   RELATED APPS / DEVELOPER APPS — same card design as Latest Apps.
   Both boxes (func_caja_apps_relacionadas / func_caja_apps_desarrollador
   in includes/template-actions.php) render inside <div class="box rlat">
   <div class="baps">...</div></div> and now use template-parts/loop/
   app-related.php, which outputs the same .la-card markup as the home
   "Latest Apps" section. The card rules above (.la-card, .la-badge,
   .la-download, .la-card-body, .la-card-title, .la-meta, .la-mod) are
   bare/unscoped so they already apply here unchanged; this block only
   adds the grid for .rlat .baps (replacing the old 5-per-row / mobile
   horizontal-scroll layout) and the icon image sizing that the Latest
   Apps block scoped to .section-latest-apps, plus a spot for the star
   rating row this card keeps that the home version doesn't have. The
   old .rlat .bav1 rules are left in place but are no longer matched. */
.rlat .baps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 0;
    flex-wrap: initial;
}

.rlat .la-card-icon .bloque-imagen.w75 {
    float: none;
    margin: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.rlat .la-card-icon .bloque-imagen.w75 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

.rlat .la-card-icon .bloque-status {
    display: none;
}

.rlat .la-card-body .box-rating {
    margin-top: 6px;
}

.rlat .la-card-body .rating {
    float: none;
}

@media (max-width: 900px) {
    .rlat .baps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .rlat .baps {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        white-space: normal;
        overflow-y: visible;
        padding-left: 0;
    }

    .rlat .la-card {
        gap: 10px;
        padding: 10px;
    }

    .rlat .la-card-icon {
        width: 58px;
        height: 58px;
    }

    .rlat .la-card-title {
        font-size: 14px;
    }

    .rlat .la-badge {
        padding: 4px 8px 4px 10px;
        font-size: 10px;
    }

    .rlat .la-download {
        width: 24px;
        height: 24px;
        font-size: 11px;
    }
}


/* =============================================================
   HEADER — mobile & tablet layout (v4)
   - Phones (<=767px): the search field collapses into a single round
     icon; tapping it drops a full-width search bar under the header.
   - <=900px: nav becomes a real flex row so the light/dark switch and
     the burger stop relying on floats, which collapsed the nav to zero
     height and left both controls overlapping the search box.
   - The slide-in drawer clears the fixed header and gets a
     tap-to-close backdrop.
   ============================================================= */

/* Icon-only search trigger (hidden on desktop / tablet) */
#header .header-search-toggle {
    display: none;
    -webkit-appearance: none;
    appearance: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    min-width: 38px;
    padding: 0;
    margin: 0;
    font-size: 15px;
    line-height: 1;
    color: #23262f;
    background: #f2f3f6;
    border: 1px solid #e3e5eb;
    border-radius: 50%;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
}

#header .header-search-toggle:hover,
#header .header-search-toggle[aria-expanded="true"] {
    background: #1bbc9b;
    border-color: #1bbc9b;
    color: #fff;
}

/* Backdrop for the slide-in drawer (injected by header-mobile.js) */
.menu-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(15, 17, 23, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, visibility .2s;
    z-index: 9990;
}

body.toggle-nav .menu-backdrop {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 900px) {

    #header .container {
        flex-wrap: nowrap;
    }

    #header .logo {
        order: 1;
        margin-right: auto;
    }

    #header .header-search-wrap {
        order: 2;
        display: flex;
        align-items: center;
        margin-left: 0;
    }

    #header .header-nav-wrap {
        order: 3;
        flex: 0 0 auto;
        margin-left: 8px;
    }

    /* nav as a flex row: [light/dark switch][burger] */
    #header .header-nav-wrap nav {
        display: flex;
        align-items: center;
        gap: 6px;
        float: none;
        margin: 0;
        min-height: 40px;
    }

    #header nav ul.menu {
        display: none;
    }

    #header nav .menu-open {
        display: flex;
        order: 2;
        float: none;
        align-items: center;
        justify-content: center;
        width: 40px;
        min-width: 40px;
        height: 40px;
        padding: 0;
        margin: 0;
        font-size: 21px;
        line-height: 1;
        border-radius: 50%;
        color: #23262f;
    }

    #header nav .menu-open:active {
        background: rgba(20, 22, 30, .07);
    }

    /* Light/dark switch — float removed, knob geometry corrected */
    #header nav #button_light_dark {
        order: 1;
        float: none;
        flex: 0 0 auto;
        width: 46px;
        min-width: 46px;
        height: 30px;
        padding: 0;
        margin: 0;
        font-size: 14px;
        position: relative;
    }

    #header nav #button_light_dark .bld_ {
        width: 46px;
        height: 12px;
        left: 0;
        top: 50%;
    }

    #header nav #button_light_dark i {
        width: 28px;
        height: 28px;
        line-height: 28px;
        font-size: 13px;
        top: 1px;
        left: 0;
    }

    #header nav #button_light_dark.active i {
        transform: translate(18px, 0);
    }

    /* Drawer: start below the fixed header, sit above the page */
    #menu-mobile {
        padding-top: 60px;
        z-index: 9998;
        box-sizing: border-box;
        width: 78%;
        max-width: 340px;
    }
}

/* Tablet (768–900px): keep a real, if slimmer, search field */
@media (min-width: 768px) and (max-width: 900px) {
    #header .searchBox {
        width: 190px;
        max-width: 190px;
    }

    #header .searchBox form {
        padding-left: 14px;
    }
}

/* Phones (<=767px): search collapses to an icon + drop-down panel.
   The open state lives on <body> so nothing in the header's own
   stacking/overflow context can swallow the panel. */
@media (max-width: 767px) {

    #header .header-search-toggle {
        display: flex;
    }

    html body #header #header-search-panel {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        box-sizing: border-box;
        padding: 10px 12px;
        background: #fff;
        border-top: 1px solid #eceef3;
        box-shadow: 0 10px 24px rgba(20, 22, 30, .14);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: opacity .18s, transform .18s, visibility .18s;
        z-index: 20;
    }

    html body.header-search-open #header #header-search-panel {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    html body #header #header-search-panel .searchBox {
        width: 100%;
        max-width: none;
        margin: 0;
    }

    html body #header #header-search-panel .searchBox form {
        padding: 0 4px 0 16px;
    }

    html body #header #header-search-panel .searchBox .sb_search[type="text"] {
        height: 42px;
        font-size: 15px;
        width: auto;
    }

    html body #header #header-search-panel .searchBox .sb_submit[type="submit"] {
        width: 34px;
        min-width: 34px;
        height: 34px;
        line-height: 34px;
    }

    html body #header #header-search-panel .searchBox ul {
        top: 52px;
        left: 0;
        right: 0;
        width: 100%;
        border-radius: 0 0 12px 12px;
    }

    html body #header #header-search-panel .searchBox form.wait::after {
        right: 46px;
    }
}

@media (max-width: 380px) {
    #header .header-nav-wrap {
        margin-left: 4px;
    }

    #header .header-search-toggle {
        width: 36px;
        min-width: 36px;
        height: 36px;
    }

    #header nav .menu-open {
        width: 38px;
        min-width: 38px;
        height: 38px;
        padding: 0;
        font-size: 20px;
    }

    #header nav #button_light_dark {
        width: 42px;
        min-width: 42px;
    }

    #header nav #button_light_dark .bld_ {
        width: 42px;
    }

    #header nav #button_light_dark.active i {
        transform: translate(14px, 0);
    }
}

/* =============================================================
   DARK MODE — header & footer
   The redesign layer pins the header and footer to white using
   "html body #header" / "html body #footer", which outranks the
   theme's own dark-theme stylesheet (plain "#header, #footer").
   That is why flipping the switch appeared to do nothing. These
   rules add the class (.theme-dark, set on <body> both server-side
   from the cookie and client-side by the toggle) so the dark
   variant wins cleanly without weakening the light-mode rules.
   ============================================================= */

html body.theme-dark #header {
    background: #13161d;
    border-bottom: 0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}

html body.theme-dark #header nav a,
html body.theme-dark #header nav .menu-open,
html body.theme-dark #header nav .menu > li.menu-item-has-children > a::after {
    color: #e9ecf2;
}

html body.theme-dark #header nav ul li.current-menu-item a {
    color: #fff;
}

html body.theme-dark #header .searchBox form {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .14);
}

html body.theme-dark #header .searchBox .sb_search[type="text"] {
    color: #e9ecf2;
}

html body.theme-dark #header .searchBox .sb_search[type="text"]::placeholder {
    color: #8b93a5;
}

html body.theme-dark #header .header-search-toggle {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .16);
    color: #e9ecf2;
}

html body.theme-dark #header .header-search-toggle:hover,
html body.theme-dark #header .header-search-toggle[aria-expanded="true"] {
    background: #1bbc9b;
    border-color: #1bbc9b;
    color: #fff;
}

html body.theme-dark #header #header-search-panel {
    background: #13161d;
    border-top-color: rgba(255, 255, 255, .08);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .5);
}

html body.theme-dark #header nav .menu-open:active {
    background: rgba(255, 255, 255, .1);
}

/* ---- footer ---- */
html body.theme-dark #footer {
    background: #13161d;
    color: #e9ecf2;
}

html body.theme-dark #footer h2.footer-title,
html body.theme-dark #footer h2.footer-title i {
    color: #f2f4f8;
}

html body.theme-dark #footer .footer-col ul li a {
    color: #c3c9d6;
}

html body.theme-dark #footer .footer-col ul li a:hover {
    color: #ff8534;
}

html body.theme-dark #footer .footer-line {
    background: #2a3040;
}

html body.theme-dark #footer .footer-social-row .social li a {
    background: #2a3040;
    color: #e9ecf2;
}

html body.theme-dark #footer .footer-social-row .social li a:hover {
    background: #3a4256;
    color: #fff;
}

html body.theme-dark #footer .footer-copyright {
    background: #0b0d12;
}

/* =============================================================
   WHITE PAGE BACKGROUND
   Full white background on the homepage and every internal page
   (single app, archive, category, search, blog, pages, 404).
   Safety net in case any template or plugin re-applies a grey.
   ============================================================= */
html,
html body,
html body .wrapper-inside,
html body #main-site {
    background: #fff !important;
}

/* =============================================================
   INTERNAL PAGES — bordered, elevated containers
   Single app/post pages, archives, categories, search, blog, pages.
   Excludes the homepage (body.home). With the page background now
   white, the old faint "2px 2px 2px #e3e3e3" shadow no longer
   separates the boxes, so each container gets a thin border plus
   a soft shadow. Dark-mode header/footer rules are unaffected.
   ============================================================= */
html body:not(.home) .app-p .box,
html body:not(.home) .app-s .box,
html body:not(.home) .widget,
html body:not(.home) .section.blog,
html body:not(.home) .bloque-blog,
html body:not(.home) .single-product .product {
    background: #fff;
    border: 1px solid #dfe4ec;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(16, 24, 40, .05), 0 6px 18px rgba(16, 24, 40, .08);
}

@media (max-width: 767px) {
    html body:not(.home) .app-p .box,
    html body:not(.home) .app-s .box,
    html body:not(.home) .widget,
    html body:not(.home) .section.blog {
        border-radius: 6px;
        box-shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 4px 12px rgba(16, 24, 40, .07);
    }
}