:root {
    --oce-bg: #f6f2e9;
    --oce-paper: #fffdf8;
    --oce-green: #143f37;
    --oce-green-2: #205b50;
    --oce-orange: #ff7424;
    --oce-orange-2: #ef5f12;
    --oce-ink: #17352f;
    --oce-muted: #64726d;
    --oce-line: #ddd6c8;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--oce-bg);
    color: var(--oce-ink);

    font-family:
        "Segoe UI",
        "Trebuchet MS",
        Arial,
        sans-serif;

    line-height: 1.55;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}

.oce-shell {
    width: min(
        1180px,
        calc(100% - 40px)
    );

    margin: 0 auto;
}


/* HEADER */

.oce-header {
    position: sticky;
    top: 0;
    z-index: 20;

    background:
        rgba(246, 242, 233, .94);

    backdrop-filter:
        blur(14px);

    border-bottom:
        1px solid
        rgba(20, 63, 55, .08);
}

.oce-nav {
    min-height: 78px;

    display: grid;

    grid-template-columns:
        220px
        1fr
        auto;

    gap: 30px;

    align-items: center;
}

.oce-brand {
    display: flex;
    align-items: center;
    width: 178px;
    height: 58px;
}

.oce-brand img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
}

.oce-menu {
    display: flex;

    justify-content: center;

    gap: 28px;

    font-size: 14px;

    font-weight: 650;
}

.oce-menu a {
    position: relative;
    padding: 8px 0;
}

.oce-menu a::after {
    content: "";

    position: absolute;

    left: 0;
    right: 100%;
    bottom: 1px;

    height: 2px;

    background:
        var(--oce-orange);

    transition:
        right .22s ease;
}

.oce-menu a:hover::after {
    right: 0;
}


/* BOTÓN HEADER */

.oce-top-action {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding:
        10px
        16px;

    border:
        1px solid
        rgba(255, 116, 36, .55);

    border-radius:
        999px;

    color:
        var(--oce-orange-2);

    font-weight:
        750;

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.oce-top-action:hover {
    transform:
        translateY(-2px);

    background:
        #fff8f2;

    box-shadow:
        0 8px 22px
        rgba(255, 116, 36, .12);
}


/* HERO */

.oce-hero {
    padding:
        62px 0
        42px;
}

.oce-hero-grid {
    display: grid;

    grid-template-columns:
        1.04fr
        .96fr;

    gap: 46px;

    align-items: stretch;
}

.oce-hero-copy {
    padding:
        38px 0
        24px;
}

.oce-kicker {
    color:
        var(--oce-orange-2);

    font-size:
        12px;

    font-weight:
        850;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;
}

.oce-hero h1,
.oce-section h2 {

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    color:
        var(--oce-green);

    letter-spacing:
        -.035em;
}

.oce-hero h1 {
    margin:
        12px 0
        22px;

    max-width:
        710px;

    font-size:
        clamp(
            48px,
            6.2vw,
            78px
        );

    line-height:
        .96;

    font-weight:
        700;
}

.oce-hero h1 span {
    display: block;
}

.oce-lead {
    max-width:
        690px;

    margin: 0;

    color:
        #4e625c;

    font-size:
        clamp(
            18px,
            2vw,
            21px
        );
}


/* CTA PRINCIPAL */

.oce-hero-actions {
    display: flex;

    align-items: center;

    gap: 22px;

    margin-top:
        30px;
}

.oce-report-button {
    position: relative;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        13px;

    min-height:
        58px;

    padding:
        0 23px
        0 17px;

    overflow:
        hidden;

    border-radius:
        999px;

    color:
        white;

    background:
        linear-gradient(
            135deg,
            #ff8c36 0%,
            var(--oce-orange) 50%,
            var(--oce-orange-2) 100%
        );

    box-shadow:
        0 16px 30px
        rgba(239, 95, 18, .22),
        inset 0 1px
        rgba(255,255,255,.35);

    font-size:
        17px;

    font-weight:
        800;

    transition:
        transform .22s ease,
        box-shadow .22s ease;
}

.oce-report-button::before {
    content: "";

    position:
        absolute;

    inset:
        0 auto 0 -40%;

    width:
        28%;

    transform:
        skewX(-18deg);

    background:
        rgba(255,255,255,.20);

    transition:
        left .42s ease;
}

.oce-report-button:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 20px 38px
        rgba(239,95,18,.28);
}

.oce-report-button:hover::before {
    left:
        120%;
}

.oce-report-icon {
    display:
        grid;

    place-items:
        center;

    width:
        32px;

    height:
        32px;

    border:
        1px solid
        rgba(255,255,255,.44);

    border-radius:
        50%;

    font-family:
        Georgia,
        serif;

    font-size:
        19px;
}

.oce-report-arrow {
    margin-left:
        6px;

    font-size:
        21px;

    transition:
        transform .22s ease;
}

.oce-report-button:hover
.oce-report-arrow {

    transform:
        translateX(4px);
}

.oce-text-link {
    display:
        inline-flex;

    gap:
        8px;

    align-items:
        center;

    color:
        var(--oce-green);

    font-weight:
        750;
}


/* VALORES */

.oce-values {
    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        18px;

    margin-top:
        38px;

    padding-top:
        24px;

    border-top:
        1px solid
        var(--oce-line);
}

.oce-values strong,
.oce-values span {
    display: block;
}

.oce-values strong {
    margin-bottom:
        3px;

    font-family:
        Georgia,
        serif;

    font-size:
        16px;
}

.oce-values span {
    color:
        var(--oce-muted);

    font-size:
        12px;

    line-height:
        1.4;
}


/* VISUAL HERO */

.oce-hero-visual {
    position:
        relative;

    min-height:
        510px;

    overflow:
        hidden;

    border-radius:
        38% 0
        36% 10%;

    background:
        linear-gradient(
            180deg,
            #b8d0dc 0 35%,
            #d8cfb3 35% 58%,
            #aa825e 58% 100%
        );

    box-shadow:
        0 18px 45px
        rgba(20,63,55,.10);
}

.oce-sun {
    position:
        absolute;

    top:
        56px;

    right:
        72px;

    width:
        72px;

    height:
        72px;

    border-radius:
        50%;

    background:
        rgba(255,164,78,.88);
}

.oce-mountain {
    position:
        absolute;

    left:
        -10%;

    width:
        120%;

    clip-path:
        polygon(
            0 100%,
            16% 58%,
            31% 75%,
            47% 30%,
            61% 61%,
            76% 39%,
            100% 100%
        );
}

.oce-mountain-one {
    bottom:
        150px;

    height:
        285px;

    background:
        #6f776f;
}

.oce-mountain-two {
    bottom:
        105px;

    height:
        235px;

    background:
        #857564;
}

.oce-desert {
    position:
        absolute;

    inset:
        auto -8%
        -15% -8%;

    height:
        48%;

    border-radius:
        50% 50%
        0 0;

    background:
        radial-gradient(
            ellipse at
            50% 20%,
            #c29b72,
            #947050 66%
        );
}

.oce-visual-card {
    position:
        absolute;

    left:
        28px;

    bottom:
        28px;

    width:
        230px;

    padding:
        18px;

    border-radius:
        22px;

    background:
        rgba(
            255,
            253,
            248,
            .88
        );

    backdrop-filter:
        blur(12px);
}

.oce-visual-card img {
    width:
        70px;

    height:
        70px;

    margin-bottom:
        8px;
}

.oce-visual-card p {
    margin: 0;

    font-family:
        Georgia,
        serif;

    font-size:
        19px;

    line-height:
        1.18;
}

.oce-visual-card strong {
    display:
        block;

    color:
        var(--oce-orange-2);

    font-style:
        italic;
}


/* CATEGORÍAS */

.oce-section {
    padding:
        64px 0;
}

.oce-section-heading {
    display:
        grid;

    grid-template-columns:
        1fr
        minmax(
            260px,
            480px
        );

    gap:
        30px;

    align-items:
        end;

    margin-bottom:
        28px;
}

.oce-section h2 {
    margin:
        7px 0 0;

    font-size:
        clamp(
            34px,
            4vw,
            52px
        );

    line-height:
        1;
}

.oce-section-heading > p {
    margin:
        0;

    color:
        var(--oce-muted);
}

.oce-category-grid {
    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        22px;
}

.oce-category-card {
    display:
        grid;

    grid-template-columns:
        .78fr
        1.22fr;

    min-height:
        300px;

    overflow:
        hidden;

    border:
        1px solid
        var(--oce-line);

    border-radius:
        22px;

    background:
        var(--oce-paper);

    box-shadow:
        0 8px 26px
        rgba(20,63,55,.06);

    transition:
        transform .22s ease,
        box-shadow .22s ease;
}

.oce-category-card:hover {
    transform:
        translateY(-4px);

    box-shadow:
        0 18px 42px
        rgba(20,63,55,.11);
}

.oce-category-art {
    display:
        grid;

    place-items:
        center;

    font-family:
        Georgia,
        serif;

    font-size:
        82px;
}

.oce-category-patrimonio
.oce-category-art {

    color:
        #573b28;

    background:
        linear-gradient(
            145deg,
            #e8cfaa,
            #b88258
        );
}

.oce-category-ambiente
.oce-category-art {

    color:
        #174b3f;

    background:
        linear-gradient(
            145deg,
            #dce4bc,
            #70926f
        );
}

.oce-category-copy {
    padding:
        30px 28px
        24px;
}

.oce-category-copy h3 {
    margin:
        0 0 9px;

    font-family:
        Georgia,
        serif;

    font-size:
        29px;
}

.oce-category-copy p {
    margin:
        0 0 24px;

    color:
        var(--oce-muted);
}

.oce-card-link {
    color:
        var(--oce-green);

    font-weight:
        800;
}

.oce-coming {
    padding:
        28px 0
        52px;

    text-align:
        center;

    color:
        var(--oce-muted);

    font-size:
        13px;
}


/* RESPONSIVE */

@media (
    max-width: 960px
) {

    .oce-menu {
        display:
            none;
    }

    .oce-hero-grid,
    .oce-category-grid {

        grid-template-columns:
            1fr;
    }

    .oce-hero-visual {
        min-height:
            420px;

        border-radius:
            28px;
    }

    .oce-values {
        grid-template-columns:
            1fr;
    }

    .oce-section-heading {
        grid-template-columns:
            1fr;
    }
}


@media (
    max-width: 680px
) {

    .oce-shell {
        width:
            min(
                calc(100% - 24px),
                1180px
            );
    }

    .oce-nav {
        min-height:
            68px;

        grid-template-columns:
            1fr auto;
    }

    .oce-brand {
        width:
            138px;

        height:
            48px;
    }

    .oce-brand img {
        width:
            100%;

        height:
            100%;
    }

    .oce-hero {
        padding-top:
            34px;
    }

    .oce-hero h1 {
        font-size:
            clamp(
                42px,
                14vw,
                62px
            );
    }

    .oce-hero-actions {
        align-items:
            stretch;

        flex-direction:
            column;
    }

    .oce-report-button {
        width:
            100%;

        justify-content:
            center;
    }

    .oce-text-link {
        justify-content:
            center;
    }

    .oce-hero-visual {
        min-height:
            360px;
    }

    .oce-category-card {
        grid-template-columns:
            1fr;
    }

    .oce-category-art {
        min-height:
            150px;
    }
}


/* =========================================================
   AGRADECEMOS A
   ========================================================= */

.oce-supporters {
    position: relative;

    padding:
        58px 0
        66px;

    overflow:
        hidden;

    background:
        linear-gradient(
            180deg,
            #f2ede1 0%,
            #eee7d8 100%
        );
}

.oce-supporters::before,
.oce-supporters::after {
    content: "";

    position:
        absolute;

    bottom:
        -70px;

    width:
        420px;

    height:
        180px;

    opacity:
        .10;

    border-radius:
        50% 50% 0 0;

    background:
        var(--oce-green);
}

.oce-supporters::before {
    left:
        -130px;

    transform:
        rotate(12deg);
}

.oce-supporters::after {
    right:
        -140px;

    transform:
        rotate(-12deg);
}

.oce-supporters-heading {
    position:
        relative;

    z-index:
        2;

    text-align:
        center;

    margin-bottom:
        28px;
}

.oce-supporters-heading h2 {
    margin:
        8px 0
        10px;

    color:
        var(--oce-green);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            30px,
            3.2vw,
            44px
        );

    line-height:
        1.05;

    letter-spacing:
        -.025em;
}

.oce-supporters-heading p {
    max-width:
        580px;

    margin:
        0 auto;

    color:
        var(--oce-muted);

    font-size:
        14px;
}

.oce-supporters-grid {
    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap:
        18px;
}

.oce-supporter-card {
    min-height:
        102px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        14px;

    padding:
        22px;

    border:
        1px solid
        rgba(20,63,55,.10);

    border-radius:
        18px;

    background:
        rgba(
            255,
            253,
            248,
            .72
        );

    color:
        #8c958f;

    box-shadow:
        0 8px 28px
        rgba(20,63,55,.05);

    transition:
        transform .22s ease,
        background .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

.oce-supporter-card:hover {
    transform:
        translateY(-4px);

    background:
        var(--oce-paper);

    border-color:
        rgba(20,63,55,.20);

    box-shadow:
        0 16px 34px
        rgba(20,63,55,.09);
}

.oce-supporter-symbol {
    display:
        grid;

    place-items:
        center;

    width:
        42px;

    height:
        42px;

    flex:
        0 0
        42px;

    border-radius:
        50%;

    background:
        rgba(20,63,55,.06);

    color:
        rgba(20,63,55,.45);

    font-size:
        24px;
}

.oce-supporter-placeholder {
    font-size:
        14px;

    font-weight:
        650;
}


@media (
    max-width: 900px
) {

    .oce-supporters-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (
    max-width: 540px
) {

    .oce-supporters {
        padding:
            56px 0
            62px;
    }

    .oce-supporters-grid {
        grid-template-columns:
            1fr;
    }

    .oce-supporter-card {
        min-height:
            92px;
    }

}


/* PRUEBA TIPOGRAFICA OCE — LORA + MONTSERRAT */

body {
    font-family:
        "Montserrat",
        Arial,
        sans-serif;
}

h1,
h2,
h3,
.oce-hero h1,
.oce-supporters-heading h2 {
    font-family:
        "Lora",
        Georgia,
        serif;
    font-optical-sizing:
        auto;
    font-weight:
        700;
}

.oce-kicker,
nav,
button,
.oce-nav,
.oce-header,
.oce-supporter-placeholder {
    font-family:
        "Montserrat",
        Arial,
        sans-serif;
}

.oce-handwritten,
.handwritten {
    font-family:
        "Caveat",
        cursive;
}


/* DETALLES HERO APROBADOS */


/* Trazo naranja bajo "vivo" */

.oce-live-word {
    position: relative;
    display: inline-block;
    font-style: normal;
}

.oce-live-word::after {
    content: "";

    position: absolute;

    left: -3%;
    bottom: -7px;

    width: 108%;
    height: 10px;

    border-top:
        4px solid
        var(--oce-orange);

    border-radius:
        50%;

    transform:
        rotate(-3deg);

    pointer-events:
        none;
}


/* Megáfono CTA */

.oce-report-megaphone {
    display: grid;

    place-items: center;

    width: 30px;
    height: 30px;

    flex:
        0 0 30px;
}

.oce-report-megaphone svg {
    width: 27px;
    height: 27px;

    fill: none;

    stroke:
        currentColor;

    stroke-width:
        1.7;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


/* Valores del hero */

.oce-value-item {
    display: grid;

    grid-template-columns:
        42px 1fr;

    align-items:
        center;

    gap:
        12px;
}

.oce-value-icon {
    display: grid;

    place-items:
        center;

    width: 42px;
    height: 42px;

    color:
        var(--oce-green);
}

.oce-value-icon svg {
    width: 34px;
    height: 34px;

    fill: none;

    stroke:
        currentColor;

    stroke-width:
        1.6;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}

.oce-value-copy strong {
    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size:
        13px;

    line-height:
        1.25;

    font-weight:
        700;
}

.oce-value-copy span {
    margin-top:
        4px;
}


@media (max-width: 700px) {

    .oce-values {
        grid-template-columns:
            1fr;

        gap:
            18px;
    }

}


/* =========================================================
   HERO FOTOGRAFICO OCE
   ========================================================= */

.oce-hero-visual {
    position: relative;

    min-height: 510px;

    overflow: hidden;

    isolation: isolate;

    border-radius:
        38% 0
        24% 13%;

    background:
        #d7d0b7;

    box-shadow:
        0 18px 45px
        rgba(20,63,55,.10);
}


/* Fotografía */

.oce-hero-photo {
    position: absolute;

    inset: 0;

    z-index: 1;

    background-position:
        center center;

    background-repeat:
        no-repeat;

    background-size:
        cover;

    transition:
        transform .6s ease;
}

.oce-hero-visual.has-photo:hover
.oce-hero-photo {
    transform:
        scale(1.015);
}


/* Fondo temporal hasta instalar foto */

.oce-hero-visual.is-placeholder
.oce-hero-photo {
    background:
        linear-gradient(
            145deg,
            #b8d0dc 0%,
            #91b4c6 42%,
            #c6b58d 43%,
            #a87952 100%
        );
}


/*
 * Gran curva crema que invade la fotografía.
 * Esta es la pieza que conserva el recorte
 * orgánico aprobado en la maqueta.
 */

.oce-hero-organic-cut {
    position: absolute;

    z-index: 2;

    top: -12%;

    left: -31%;

    width: 54%;

    height: 126%;

    border-radius: 50%;

    background:
        var(
            --oce-paper,
            #f7f3e9
        );

    transform:
        rotate(-7deg);

    pointer-events: none;
}


/*
 * Segunda curva inferior para evitar
 * aspecto de fotografía rectangular.
 */

.oce-hero-visual::after {
    content: "";

    position: absolute;

    z-index: 2;

    left: -4%;

    bottom: -29%;

    width: 112%;

    height: 39%;

    border-radius:
        50% 50%
        0 0;

    background:
        var(
            --oce-paper,
            #f7f3e9
        );

    transform:
        rotate(2deg);

    pointer-events: none;
}


/* Rayos naranjos */

.oce-hero-rays {
    position: absolute;

    z-index: 4;

    top: 54px;

    right: 28px;

    width: 92px;

    height: 90px;

    pointer-events: none;
}

.oce-hero-rays span {
    position: absolute;

    display: block;

    width: 48px;

    height: 7px;

    border-radius: 999px;

    background:
        var(--oce-orange);

    transform-origin:
        right center;
}

.oce-hero-rays span:nth-child(1) {
    top: 8px;

    right: 12px;

    transform:
        rotate(-72deg);
}

.oce-hero-rays span:nth-child(2) {
    top: 35px;

    right: 0;

    transform:
        rotate(-42deg);
}

.oce-hero-rays span:nth-child(3) {
    top: 65px;

    right: -4px;

    transform:
        rotate(-15deg);
}


/* Tarjeta flotante */

.oce-visual-card {
    z-index: 5;

    left: 32px;

    bottom: 34px;

    width: 238px;

    padding:
        18px 20px;

    border-radius:
        22px;

    background:
        rgba(
            255,
            253,
            248,
            .92
        );

    box-shadow:
        0 18px 38px
        rgba(20,63,55,.14);

    backdrop-filter:
        blur(8px);
}

.oce-visual-card p {
    font-family:
        "Lora",
        Georgia,
        serif;
}

.oce-visual-card strong {
    display: block;

    color:
        var(--oce-orange);

    font-family:
        "Caveat",
        cursive;

    font-size:
        25px;

    line-height:
        1;
}


/* Tablet */

@media (max-width: 960px) {

    .oce-hero-visual {
        min-height:
            470px;

        border-radius:
            30% 0
            22% 12%;
    }

    .oce-hero-organic-cut {
        left:
            -27%;

        width:
            48%;
    }

}


/* Móvil */

@media (max-width: 680px) {

    .oce-hero-visual {
        min-height:
            410px;

        border-radius:
            28px;
    }

    .oce-hero-organic-cut {
        display:
            none;
    }

    .oce-hero-visual::after {
        bottom:
            -33%;

        height:
            42%;
    }

    .oce-hero-rays {
        top:
            36px;

        right:
            16px;

        transform:
            scale(.75);
    }

    .oce-visual-card {
        left:
            18px;

        bottom:
            22px;

        width:
            220px;
    }

}


/* =========================================================
   RECORTE ORGANICO HERO V2 — SVG
   ========================================================= */

.oce-hero-visual {
    min-height:
        560px;

    overflow:
        visible;

    border-radius:
        0;

    background:
        transparent;

    box-shadow:
        none;
}


/* Anula el recorte experimental anterior */

.oce-hero-organic-cut {
    display:
        none !important;
}

.oce-hero-visual::after {
    display:
        none !important;
}


/* SVG fotográfico */

.oce-hero-photo-stage {
    position:
        absolute;

    inset:
        0;

    z-index:
        1;
}

.oce-hero-photo-svg {
    display:
        block;

    width:
        100%;

    height:
        100%;

    overflow:
        visible;

    filter:
        drop-shadow(
            0 18px 28px
            rgba(20,63,55,.08)
        );
}


/* Tarjeta sobre el recorte */

.oce-visual-card {
    left:
        65px;

    bottom:
        44px;
}


/* Rayos sobre fotografía */

.oce-hero-rays {
    z-index:
        6;

    top:
        72px;

    right:
        24px;
}


@media (max-width: 960px) {

    .oce-hero-visual {
        min-height:
            500px;
    }

}


@media (max-width: 680px) {

    .oce-hero-visual {
        min-height:
            400px;

        overflow:
            hidden;

        border-radius:
            28px;
    }

    .oce-visual-card {
        left:
            18px;

        bottom:
            20px;
    }

}


/* MASCARA REAL HERO OCE */

.oce-hero-photo-stage {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.oce-hero-photo-shape {
    width: 100%;
    height: 100%;

    background:
        linear-gradient(
            145deg,
            #a9c7d7,
            #c6b58d 48%,
            #a87952
        );

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    -webkit-mask-image:
        url("../img/hero-mask-alpha.png");

    mask-image:
        url("../img/hero-mask-alpha.png");

    -webkit-mask-position: center;
    mask-position: center;

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.oce-hero-visual {
    overflow: visible;
    background: transparent;
    box-shadow: none;
}



/* =========================================================
   AJUSTE FINO HERO 2026-10-02
   ========================================================= */

/* Quitar líneas/rayos naranjos sobre la fotografía */

.oce-hero-rays {
    display: none !important;
}


/* Tarjeta más integrada y menos rígida */

.oce-visual-card {
    left: 34px;
    bottom: 34px;

    width: 248px;

    padding:
        20px 22px
        19px;

    border:
        1px solid
        rgba(255,255,255,.38);

    border-radius:
        30px 24px
        34px 26px;

    background:
        rgba(
            250,
            247,
            238,
            .82
        );

    box-shadow:
        0 14px 36px
        rgba(20,63,55,.10);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}

.oce-visual-card img {
    width: 58px;
    height: 58px;

    margin-bottom:
        7px;

    opacity:
        .90;
}

.oce-visual-card p {
    margin: 0;

    font-family:
        "Lora",
        Georgia,
        serif;

    font-size:
        18px;

    line-height:
        1.18;

    color:
        var(--oce-green);
}

.oce-visual-card strong {
    display: block;

    margin-top:
        3px;

    color:
        var(--oce-orange);

    font-family:
        "Caveat",
        cursive;

    font-size:
        25px;

    font-style:
        normal;

    font-weight:
        600;

    line-height:
        1;
}



/* =========================================================
   HERO COMPACTO Y PLACA EDITORIAL 2026-10-02
   ========================================================= */

/* Título + bajada más unidos */

.oce-hero h1 {
    margin-bottom: 14px;
}

.oce-lead {
    line-height: 1.38;
    margin-top: 0;
    margin-bottom: 0;
}


/* CTA más cerca del texto */

.oce-hero-actions {
    margin-top: 22px;
}


/* Valores más compactos */

.oce-values {
    margin-top: 28px;
    padding-top: 20px;
}


/* Ocultar las descripciones pequeñas.
   Quedan solamente ícono + título. */

.oce-value-copy > span {
    display: none;
}

.oce-value-item {
    align-items: center;
    grid-template-columns: 38px 1fr;
    gap: 12px;
}

.oce-value-icon {
    width: 32px;
    height: 32px;
}

.oce-value-copy strong {
    display: block;
    line-height: 1.18;
}


/* =========================================================
   PLACA EDITORIAL SOBRE LA FOTOGRAFÍA
   ========================================================= */

.oce-visual-card {
    left: 30px;
    bottom: 30px;

    width: 225px;

    padding:
        21px 22px
        20px;

    border: 0;

    border-radius:
        34px 27px
        38px 25px;

    background:
        rgba(
            250,
            247,
            238,
            .76
        );

    box-shadow:
        0 20px 50px
        rgba(20,63,55,.09),
        inset 0 1px 0
        rgba(255,255,255,.65);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    overflow: hidden;
}


/* Luz suave que rompe el aspecto de caja */

.oce-visual-card::before {
    content: "";

    position: absolute;

    width: 115px;
    height: 115px;

    top: -58px;
    right: -38px;

    border-radius: 50%;

    background:
        rgba(
            255,
            255,
            255,
            .32
        );

    pointer-events: none;
}


/* Pequeño gesto editorial inferior */

.oce-visual-card::after {
    content: "";

    position: absolute;

    left: 22px;
    bottom: 12px;

    width: 52px;
    height: 2px;

    border-radius: 999px;

    background:
        rgba(
            235,
            101,
            37,
            .42
        );

    transform: rotate(-3deg);

    pointer-events: none;
}


.oce-visual-card img {
    position: relative;
    z-index: 1;

    width: 54px;
    height: 54px;

    margin-bottom: 9px;

    opacity: .94;
}


.oce-visual-card p {
    position: relative;
    z-index: 1;

    margin: 0;

    color:
        var(--oce-green);

    font-family:
        "Lora",
        Georgia,
        serif;

    font-size: 18px;

    line-height: 1.16;
}


.oce-visual-card strong {
    display: block;

    margin-top: 4px;

    color:
        var(--oce-orange);

    font-family:
        "Caveat",
        cursive;

    font-size: 25px;

    font-style: normal;

    font-weight: 600;

    line-height: .95;
}


/* Móvil */

@media (max-width: 680px) {

    .oce-hero h1 {
        margin-bottom: 12px;
    }

    .oce-lead {
        line-height: 1.34;
    }

    .oce-hero-actions {
        margin-top: 18px;
    }

    .oce-values {
        margin-top: 22px;
        padding-top: 17px;
    }

    .oce-visual-card {
        left: 18px;
        bottom: 18px;

        width: 205px;

        padding:
            18px 19px
            18px;
    }

}


/* =========================================================
   AJUSTE VISUAL HERO V3 — 2026-10-02
   ========================================================= */


/* 1. BAJADA MÁS COMPACTA */

.oce-hero .oce-lead {
    max-width: 610px;

    margin:
        8px 0 0;

    font-size:
        20px;

    line-height:
        1.22 !important;

    letter-spacing:
        -.01em;
}

.oce-hero .oce-hero-actions {
    margin-top:
        20px !important;
}


/* 2. VALORES: ICONO Y TEXTO PERFECTAMENTE ALINEADOS */

.oce-hero .oce-values {
    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        26px;

    margin-top:
        26px;

    padding-top:
        20px;
}

.oce-hero .oce-value-item {
    display:
        grid;

    grid-template-columns:
        34px minmax(0, 1fr);

    align-items:
        center;

    column-gap:
        12px;

    min-width:
        0;
}

.oce-hero .oce-value-icon {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        34px;

    height:
        34px;

    margin:
        0;
}

.oce-hero .oce-value-icon svg {
    display:
        block;

    width:
        30px;

    height:
        30px;
}

.oce-hero .oce-value-copy {
    display:
        flex;

    align-items:
        center;

    min-height:
        34px;
}

.oce-hero .oce-value-copy strong {
    margin:
        0;

    font-size:
        14px;

    line-height:
        1.08;

    font-weight:
        700;
}


/* 3. PLACA EDITORIAL ORGÁNICA */

.oce-hero .oce-visual-card {
    left:
        26px !important;

    bottom:
        26px !important;

    width:
        226px !important;

    padding:
        24px 23px
        25px !important;

    border:
        0 !important;

    border-radius:
        38% 23% 34% 27%
        /
        27% 33% 25% 38% !important;

    background:
        rgba(
            249,
            246,
            237,
            .90
        ) !important;

    box-shadow:
        0 22px 55px
        rgba(20,63,55,.11) !important;

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);

    transform:
        rotate(-1deg);

    overflow:
        visible;
}


/* eliminar adornos anteriores de la tarjeta */

.oce-hero .oce-visual-card::before {
    content:
        none !important;
}

.oce-hero .oce-visual-card::after {
    content:
        "";

    position:
        absolute;

    left:
        27px;

    bottom:
        17px;

    width:
        48px;

    height:
        2px;

    border-radius:
        999px;

    background:
        rgba(
            239,
            103,
            42,
            .48
        );

    transform:
        rotate(-4deg);
}


/* contenido de la placa */

.oce-hero .oce-visual-card img {
    width:
        52px !important;

    height:
        52px !important;

    margin:
        0 0 10px !important;
}

.oce-hero .oce-visual-card p {
    margin:
        0 !important;

    font-family:
        "Lora",
        Georgia,
        serif;

    font-size:
        18px !important;

    line-height:
        1.08 !important;
}

.oce-hero .oce-visual-card strong {
    display:
        block;

    margin-top:
        5px !important;

    font-family:
        "Caveat",
        cursive;

    font-size:
        25px !important;

    line-height:
        .95 !important;

    font-weight:
        600;

    color:
        var(--oce-orange);
}


/* móvil */

@media (max-width: 680px) {

    .oce-hero .oce-lead {
        font-size:
            18px;

        line-height:
            1.20 !important;
    }

    .oce-hero .oce-values {
        grid-template-columns:
            1fr;

        gap:
            14px;
    }

    .oce-hero .oce-visual-card {
        width:
            205px !important;
    }

}


/* =========================================================
   AJUSTE HERO V4 — PLACA Y FONDOS
   2026-10-02
   ========================================================= */


/* HERO: fondo un poco más claro para acercarlo al tono de la máscara */

.oce-hero {
    background:
        #f7f3eb;
}


/* SIGUIENTE SECCIÓN: blanca, como el demo */

#categorias {
    background:
        #ffffff;

    border-top:
        1px solid #efe9df;
}


/* PLACA EDITORIAL SOBRE LA FOTO */

.oce-hero .oce-visual-card {
    position:
        absolute;

    left:
        34px !important;

    bottom:
        30px !important;

    width:
        248px !important;

    padding:
        22px 24px 20px !important;

    border:
        0 !important;

    border-radius:
        34px 42px 36px 46px /
        28px 34px 42px 30px !important;

    background:
        rgba(250, 246, 238, .96) !important;

    box-shadow:
        0 20px 48px rgba(20, 63, 55, .10) !important;

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    transform:
        rotate(-1.4deg);
}


/* nube/soporte suave detrás para que no parezca “etiqueta pegada” */

.oce-hero .oce-visual-card::before {
    content:
        "";

    position:
        absolute;

    inset:
        -12px -14px -14px -10px;

    border-radius:
        43% 57% 46% 54% /
        38% 42% 58% 62%;

    background:
        rgba(255, 250, 243, .72);

    box-shadow:
        0 8px 20px rgba(20, 63, 55, .05);

    z-index:
        -1;
}


/* quitar adornos rígidos anteriores */

.oce-hero .oce-visual-card::after {
    content:
        "";

    position:
        absolute;

    left:
        26px;

    bottom:
        14px;

    width:
        54px;

    height:
        2px;

    border-radius:
        999px;

    background:
        rgba(239, 103, 42, .42);

    transform:
        rotate(-5deg);
}


/* contenido interno de la placa */

.oce-hero .oce-visual-card img {
    width:
        54px !important;

    height:
        54px !important;

    margin:
        0 0 10px !important;
}

.oce-hero .oce-visual-card p {
    margin:
        0 !important;

    font-family:
        "Lora",
        Georgia,
        serif;

    font-size:
        17px !important;

    line-height:
        1.08 !important;

    color:
        #36544d;
}

.oce-hero .oce-visual-card strong {
    display:
        block;

    margin-top:
        5px !important;

    font-family:
        "Caveat",
        cursive;

    font-size:
        23px !important;

    line-height:
        .95 !important;

    font-weight:
        700;

    color:
        var(--oce-orange);
}


/* móvil */

@media (max-width: 680px) {
    .oce-hero .oce-visual-card {
        width:
            218px !important;

        left:
            20px !important;

        bottom:
            20px !important;
    }
}



/* =========================================================
   PLACA HERO V5 — RECORTE EDITORIAL ORGÁNICO
   2026-10-02
   ========================================================= */

.oce-hero .oce-visual-card {
    left:
        30px !important;

    bottom:
        26px !important;

    width:
        235px !important;

    padding:
        24px 27px
        25px !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    backdrop-filter:
        none !important;

    -webkit-backdrop-filter:
        none !important;

    transform:
        none !important;

    overflow:
        visible !important;

    isolation:
        isolate;
}


/* Forma orgánica real detrás del contenido */

.oce-hero .oce-visual-card::before {
    content:
        "" !important;

    position:
        absolute;

    z-index:
        -1;

    inset:
        -10px -14px -12px -12px;

    background:
        rgba(
            250,
            247,
            239,
            .95
        );

    border-radius:
        52% 48% 43% 57%
        /
        46% 38% 62% 54%;

    transform:
        rotate(-2deg);

    box-shadow:
        0 18px 35px
        rgba(20,63,55,.08);
}


/* Segunda capa suave: rompe aún más el aspecto de caja */

.oce-hero .oce-visual-card::after {
    content:
        "" !important;

    position:
        absolute;

    z-index:
        -2;

    left:
        -19px;

    right:
        8px;

    top:
        10px;

    bottom:
        -17px;

    background:
        rgba(
            255,
            252,
            245,
            .58
        );

    border-radius:
        44% 56% 61% 39%
        /
        55% 45% 55% 45%;

    transform:
        rotate(2.5deg);

    filter:
        blur(.3px);
}


/* Logo más pequeño y editorial */

.oce-hero .oce-visual-card img {
    position:
        relative;

    z-index:
        2;

    width:
        46px !important;

    height:
        46px !important;

    margin:
        0 0 10px 2px !important;
}


/* Texto principal */

.oce-hero .oce-visual-card p {
    position:
        relative;

    z-index:
        2;

    margin:
        0 !important;

    font-family:
        "Lora",
        Georgia,
        serif;

    font-size:
        17px !important;

    line-height:
        1.05 !important;

    color:
        #294c43 !important;

    letter-spacing:
        -.015em;
}


/* Frase manuscrita */

.oce-hero .oce-visual-card strong {
    display:
        block;

    margin-top:
        5px !important;

    font-family:
        "Caveat",
        cursive;

    font-size:
        25px !important;

    line-height:
        .90 !important;

    font-weight:
        600 !important;

    color:
        var(--oce-orange) !important;

    transform:
        rotate(-1deg);

    transform-origin:
        left center;
}


/* pequeño subrayado manuscrito */

.oce-hero .oce-visual-card strong::after {
    content:
        "";

    display:
        block;

    width:
        50px;

    height:
        2px;

    margin-top:
        7px;

    margin-left:
        3px;

    border-radius:
        999px;

    background:
        rgba(
            239,
            103,
            42,
            .50
        );

    transform:
        rotate(-4deg);
}


@media (max-width: 680px) {

    .oce-hero .oce-visual-card {
        width:
            205px !important;

        left:
            18px !important;

        bottom:
            18px !important;
    }

}


/* =========================================================
   AJUSTE TONO HERO 2026-10-02
   ========================================================= */

.oce-hero {
    background:
        #f5f0e8 !important;
}


/* =========================================================
   HERO BADGE FINAL PROPUESTO 2026-10-02
   ========================================================= */

.oce-hero-visual {
    position: relative;
}


/* Etiqueta sobre imagen */

.hero-badge {
    position: absolute;

    left: -30px;

    bottom: 30px;

    z-index: 5;

    padding:
        14px 22px
        10px;

    background:
        #ffffff;

    border-radius:
        16px;

    box-shadow:
        0 10px 30px
        rgba(30,77,59,.18);

    transform:
        rotate(-2deg);
}


.handwritten {
    margin: 0;

    font-family:
        "Caveat",
        cursive;

    font-size:
        1.5rem;

    font-weight:
        600;

    line-height:
        1.15;

    color:
        #1e4d3b;
}


.badge-scribble {
    display: block;

    width:
        110px;

    height:
        12px;

    margin-top:
        2px;
}


@media (max-width: 860px) {

    .hero-badge {
        left:
            8px;

        bottom:
            14px;
    }

    .handwritten {
        font-size:
            1.2rem;
    }

}


/* =========================================================
   HERO BADGE V2 — TEXTO DIRECTO SOBRE EL BORDE
   2026-10-02
   ========================================================= */

.hero-badge {
    position: absolute;

    left: -70px !important;
    bottom: 60px !important;

    background: transparent !important;

    box-shadow: none !important;

    border-radius: 0 !important;

    padding: 0 !important;

    transform: rotate(-1.5deg) !important;

    z-index: 5 !important;

    pointer-events: none;
}


.handwritten {
    margin: 0 !important;

    font-family:
        "Caveat",
        cursive !important;

    font-size:
        1.7rem !important;

    font-weight:
        600 !important;

    color:
        #1e4d3b !important;

    line-height:
        1.1 !important;

    text-shadow:
        0 1px 0
        rgba(255,255,255,.6);
}


.badge-scribble {
    display: block;

    width:
        120px !important;

    height:
        12px !important;

    margin-top:
        4px !important;

    margin-left:
        8px !important;

    transform:
        rotate(-1deg);
}


@media (max-width: 860px) {

    .hero-badge {
        left:
            10px !important;

        bottom:
            18px !important;
    }

    .handwritten {
        font-size:
            1.25rem !important;
    }

    .badge-scribble {
        width:
            90px !important;
    }

}


/* =========================================================
   HERO BADGE V3 — AJUSTE DE POSICION
   2026-10-02
   ========================================================= */

.hero-badge {
    left: -18px !important;
    bottom: 60px !important;
}


/* =========================================================
   SELLO HERO TEMPORAL 2026-10-02
   Reemplaza visualmente la etiqueta manuscrita actual
   por una imagen/sello, sin tocar el HTML.
   ========================================================= */

.oce-hero-visual {
    position: relative;
}

.oce-hero-badge,
.hero-badge {
    position: absolute;
    left: 44px;
    bottom: 42px;
    width: 230px;
    height: 150px;
    padding: 0;
    background: transparent url("https://ojoconesto.org/wp-content/uploads/2026/10/Sello-de-aventura-Nuestro-territorio.png") no-repeat center center;
    background-size: contain;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    z-index: 4;
    pointer-events: none;
}

/* Oculta el contenido anterior de la etiqueta */
.oce-hero-badge > *,
.hero-badge > * {
    display: none !important;
}

/* Ajuste móvil */
@media (max-width: 860px) {
    .oce-hero-badge,
    .hero-badge {
        left: 18px;
        bottom: 18px;
        width: 170px;
        height: 112px;
    }
}



/* =========================================================
   SELLO HERO IMAGEN REAL 2026-10-02
   ========================================================= */

.hero-badge {
    position: absolute !important;

    left: 26px !important;
    bottom: 34px !important;

    width: 185px !important;
    height: auto !important;

    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    transform: rotate(-2deg) !important;

    z-index: 6 !important;

    pointer-events: none;
}

.hero-badge .hero-seal {
    display: block !important;

    width: 100% !important;
    height: auto !important;

    max-width: none !important;

    opacity: .96;
}

@media (max-width: 860px) {

    .hero-badge {
        left: 16px !important;
        bottom: 18px !important;
        width: 145px !important;
    }

}


/* =========================================================
   AJUSTE SELLO + CIERRE HERO 2026-10-02
   ========================================================= */


/* SELLO:
   usamos la transparencia del PNG como máscara
   y aplicamos exactamente el verde de la web */

.hero-badge {
    position: absolute;
}

.hero-badge .hero-seal {
    opacity: 0 !important;
}

.hero-badge::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        var(--oce-green);

    -webkit-mask-image:
        url("https://ojoconesto.org/wp-content/uploads/2026/10/Sello-de-aventura-Nuestro-territorio.png");

    mask-image:
        url("https://ojoconesto.org/wp-content/uploads/2026/10/Sello-de-aventura-Nuestro-territorio.png");

    -webkit-mask-repeat:
        no-repeat;

    mask-repeat:
        no-repeat;

    -webkit-mask-position:
        center;

    mask-position:
        center;

    -webkit-mask-size:
        contain;

    mask-size:
        contain;
}


/* ELIMINAR ESPACIO INFERIOR:
   la imagen debe terminar junto con la sección */

.oce-hero {
    padding-bottom:
        0 !important;
}

.oce-hero-grid {
    margin-bottom:
        0 !important;

    padding-bottom:
        0 !important;
}

.oce-hero-visual {
    margin-bottom:
        0 !important;
}




/* =========================================================
   PRUEBA SELLO RECTANGULAR NARANJA 2026-10-02
   ========================================================= */

.hero-badge {
    left: 24px !important;
    bottom: 30px !important;

    width: 230px !important;
    height: 120px !important;

    transform: rotate(-2deg) !important;
}

.hero-badge::before {
    background:
        var(--oce-orange) !important;

    -webkit-mask-image:
        url("https://ojoconesto.org/wp-content/uploads/2026/10/Brujula-en-Nuestro-Territorio.png") !important;

    mask-image:
        url("https://ojoconesto.org/wp-content/uploads/2026/10/Brujula-en-Nuestro-Territorio.png") !important;

    -webkit-mask-repeat:
        no-repeat !important;

    mask-repeat:
        no-repeat !important;

    -webkit-mask-position:
        center !important;

    mask-position:
        center !important;

    -webkit-mask-size:
        contain !important;

    mask-size:
        contain !important;
}



/* =========================================================
   CIERRE SUPERIOR HERO 2026-10-02
   ========================================================= */

.oce-hero {
    padding-top:
        18px !important;
}

.oce-hero-grid {
    margin-top:
        0 !important;

    padding-top:
        0 !important;
}


/* AJUSTE FINAL SUPERIOR HERO 2026-10-02 */

.oce-hero {
    padding-top: 8px !important;
}



/* =========================================================
   CATEGORIAS DEMO V2 2026-10-04
   ========================================================= */

#categorias {
    position: relative;

    padding:
        58px 0 64px !important;

    background:
        linear-gradient(
            180deg,
            #fffaf5 0%,
            #fffdfb 20%,
            #ffffff 48%,
            #ffffff 100%
        ) !important;

    border-top:
        0 !important;
}


/* Cabecera */

#categorias .oce-section-heading {
    grid-template-columns:
        1fr
        minmax(280px, 430px);

    align-items:
        end;

    margin-bottom:
        26px;

    gap:
        54px;
}

#categorias .oce-kicker {
    color:
        var(--oce-orange);

    font-size:
        13px;

    font-weight:
        700;

    letter-spacing:
        .11em;

    text-transform:
        uppercase;
}

#categorias h2 {
    margin-top:
        6px;

    font-family:
        "Lora",
        Georgia,
        serif;

    font-size:
        clamp(38px, 4vw, 52px);

    line-height:
        .98;

    letter-spacing:
        -.035em;

    color:
        var(--oce-green);
}

#categorias .oce-section-heading > p {
    max-width:
        390px;

    margin:
        0 0 3px;

    font-size:
        16px;

    line-height:
        1.35;

    color:
        #63716d;
}


/* Tarjetas */

#categorias .oce-category-grid {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        20px;
}

#categorias .oce-category-card {
    grid-template-columns:
        46% 54%;

    min-height:
        244px;

    overflow:
        hidden;

    border:
        1px solid
        #e9e3da;

    border-radius:
        18px;

    background:
        #fffdfa;

    box-shadow:
        0 10px 28px
        rgba(41,76,67,.065);
}


/* Área preparada para las fotografías */

#categorias .oce-category-art {
    position:
        relative;

    min-height:
        244px;

    overflow:
        hidden;

    font-size:
        0;

    background-size:
        cover;

    background-position:
        center;

    background-repeat:
        no-repeat;
}


/* Temporal mientras incorporamos las fotos reales */

#categorias .oce-category-patrimonio
.oce-category-art {
    background:
        linear-gradient(
            145deg,
            #ead3b3,
            #c79668
        );
}

#categorias .oce-category-ambiente
.oce-category-art {
    background:
        linear-gradient(
            145deg,
            #dce7c6,
            #87a17b
        );
}


/*
 * Borde blanco tipo pincel/recorte.
 * Queda preparado para cuando coloquemos las fotos.
 */

#categorias .oce-category-art::after {
    content: "";

    position:
        absolute;

    top:
        -4%;

    right:
        -22px;

    width:
        50px;

    height:
        108%;

    background:
        #fffdfa;

    border-radius:
        48% 42% 52% 46%;

    transform:
        rotate(2deg);

    box-shadow:
        -8px 0 12px
        rgba(255,255,255,.55);
}


/* Contenido */

#categorias .oce-category-copy {
    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        25px 26px
        23px 24px;
}

#categorias .oce-category-title-row {
    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    margin-bottom:
        12px;
}

#categorias .oce-category-title-icon {
    display:
        grid;

    place-items:
        center;

    flex:
        0 0 48px;

    width:
        48px;

    height:
        48px;

    border-radius:
        50%;

    background:
        #f1f0df;

    color:
        var(--oce-green);
}

#categorias .oce-category-title-icon svg {
    width:
        27px;

    height:
        27px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}

#categorias .oce-category-copy h3 {
    margin:
        0;

    font-family:
        "Lora",
        Georgia,
        serif;

    font-size:
        26px;

    line-height:
        1;

    letter-spacing:
        -.025em;

    color:
        var(--oce-green);
}

#categorias .oce-category-copy p {
    margin:
        0 0 18px;

    font-size:
        14px;

    line-height:
        1.42;

    color:
        #596964;
}


/* Botón pill delineado */

#categorias .oce-card-link {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        space-between;

    align-self:
        stretch;

    gap:
        14px;

    min-height:
        42px;

    margin-top:
        auto;

    padding:
        0 16px;

    border:
        1.5px solid
        #3d7b6f;

    border-radius:
        999px;

    color:
        var(--oce-green);

    background:
        rgba(255,255,255,.55);

    font-size:
        13px;

    font-weight:
        700;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

#categorias .oce-category-card:hover
.oce-card-link {
    background:
        var(--oce-green);

    color:
        #fff;
}


/* Responsive */

@media (max-width: 960px) {

    #categorias .oce-section-heading,
    #categorias .oce-category-grid {
        grid-template-columns:
            1fr;
    }

    #categorias .oce-section-heading {
        gap:
            16px;
    }

    #categorias .oce-section-heading > p {
        max-width:
            620px;
    }

}

@media (max-width: 680px) {

    #categorias {
        padding:
            46px 0 52px !important;
    }

    #categorias .oce-category-card {
        grid-template-columns:
            1fr;

        min-height:
            0;
    }

    #categorias .oce-category-art {
        min-height:
            190px;
    }

    #categorias .oce-category-art::after {
        display:
            none;
    }

}


/* =========================================================
   FOTO MEDIOAMBIENTE 2026-10-04
   ========================================================= */

#categorias .oce-category-ambiente .oce-category-art {
    background:
        url("https://ojoconesto.org/wp-content/uploads/2026/10/medio-ambiente.png")
        center center / cover
        no-repeat !important;
}


/* Mantener CTA de Medioambiente en una sola línea */

#categorias .oce-category-ambiente .oce-card-link {
    white-space:
        nowrap;

    font-size:
        12px;
}



/* =========================================================
   BORDE PINCEL MEDIOAMBIENTE 2026-10-04
   ========================================================= */

#categorias .oce-category-art {
    position: relative;
    overflow: hidden;
}

#categorias .oce-category-ambiente .oce-category-art::before {
    content: "";

    position: absolute;
    top: 0;
    right: 58px;

    width: 34px;
    height: 100%;

    background:
        linear-gradient(
            to right,
            rgba(247,243,235,0) 0%,
            rgba(247,243,235,.30) 40%,
            rgba(247,243,235,.62) 100%
        );

    filter: blur(8px);
    pointer-events: none;
    z-index: 2;
}

#categorias .oce-category-ambiente .oce-category-art::after {
    content: "";

    position: absolute;
    top: -2%;
    right: -1px;

    width: 124px;
    height: 104%;

    background:
        var(--oce-paper);

    clip-path:
        polygon(
            38% 0%,
            72% 4%,
            56% 9%,
            82% 14%,
            49% 19%,
            78% 24%,
            52% 29%,
            84% 35%,
            58% 40%,
            79% 46%,
            54% 52%,
            86% 58%,
            60% 63%,
            80% 69%,
            57% 75%,
            84% 81%,
            55% 86%,
            78% 92%,
            42% 100%,
            100% 100%,
            100% 0%
        );

    pointer-events: none;
    z-index: 3;
}



/* =========================================================
   REVERTIR BORDE DENTADO MEDIOAMBIENTE 2026-10-04
   ========================================================= */

#categorias .oce-category-ambiente .oce-category-art::before,
#categorias .oce-category-ambiente .oce-category-art::after {
    content: none !important;
    display: none !important;
}



/* =========================================================


/* =========================================================
   AJUSTE PNG MEDIOAMBIENTE 2026-10-04
   LISO A LA IZQUIERDA + BROCHA A LA DERECHA
   ========================================================= */

#categorias .oce-category-ambiente .oce-category-art {
    background-image:
        url("https://ojoconesto.org/wp-content/uploads/2026/10/medio-ambiente.png") !important;

    background-repeat:
        no-repeat !important;

    background-position:
        -120px center !important;

    background-size:
        auto 100% !important;

    background-color:
        #fffdfa !important;
}

#categorias .oce-category-ambiente .oce-category-art::before,
#categorias .oce-category-ambiente .oce-category-art::after {
    content:
        none !important;

    display:
        none !important;
}



/* =========================================================
   MEDIOAMBIENTE — IMAGEN PRIORITARIA 2026-10-04
   ========================================================= */

/* Más espacio para la imagen, menos para el texto */

#categorias .oce-category-ambiente {
    grid-template-columns:
        56% 44% !important;
}


/* Mostrar la PNG completa y aprovechar su transparencia */

#categorias .oce-category-ambiente .oce-category-art {
    background-image:
        url("https://ojoconesto.org/wp-content/uploads/2026/10/medio-ambiente.png") !important;

    background-repeat:
        no-repeat !important;

    background-position:
        left center !important;

    background-size:
        contain !important;

    background-color:
        transparent !important;
}


/* Texto un poco más compacto */

#categorias .oce-category-ambiente .oce-category-copy {
    padding:
        24px 22px
        22px 12px !important;
}

#categorias .oce-category-ambiente .oce-category-title-row {
    gap:
        10px;
}

#categorias .oce-category-ambiente .oce-category-copy h3 {
    font-size:
        24px;
}

#categorias .oce-category-ambiente .oce-category-copy p {
    font-size:
        13px;

    line-height:
        1.38;
}


/* Botón adaptado al espacio restante */

#categorias .oce-category-ambiente .oce-card-link {
    padding:
        0 14px;

    font-size:
        11.5px;

    white-space:
        nowrap;
}



/* =========================================================
   MEDIOAMBIENTE PLANO + CAPA ONDULADA 2026-10-04
   ========================================================= */


/* La sección queda preparada para recibir una capa de fondo */

#categorias {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}


/* Capa suave, amplia y ondulada detrás del contenido */

#categorias::before {
    content: "";

    position: absolute;
    z-index: 0;

    left: -8%;
    bottom: -42%;

    width: 116%;
    height: 88%;

    background:
        rgba(242, 236, 226, .52);

    border-radius:
        48% 52% 0 0
        /
        24% 20% 0 0;

    transform:
        rotate(-1.2deg);

    pointer-events: none;
}


/* Segunda curva muy tenue para evitar aspecto geométrico */

#categorias::after {
    content: "";

    position: absolute;
    z-index: 0;

    left: 38%;
    bottom: -54%;

    width: 78%;
    height: 76%;

    background:
        rgba(247, 243, 235, .58);

    border-radius:
        58% 42% 0 0
        /
        26% 22% 0 0;

    transform:
        rotate(2deg);

    pointer-events: none;
}


/* El contenido queda sobre las curvas */

#categorias > .oce-shell {
    position: relative;
    z-index: 1;
}


/* =========================================================
   SOLO MEDIOAMBIENTE:
   quitar sensación de tarjeta
   ========================================================= */

#categorias .oce-category-ambiente {
    border:
        0 !important;

    border-radius:
        0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    overflow:
        visible !important;

    min-height:
        280px;
}


/* La imagen conserva su PNG completo */

#categorias .oce-category-ambiente .oce-category-art {
    min-height:
        280px;

    background-image:
        url("https://ojoconesto.org/wp-content/uploads/2026/10/medio-ambiente.png") !important;

    background-repeat:
        no-repeat !important;

    background-position:
        left center !important;

    background-size:
        contain !important;

    background-color:
        transparent !important;
}


/* Texto también plano, sin caja */

#categorias .oce-category-ambiente .oce-category-copy {
    padding:
        24px 10px
        22px 14px !important;

    background:
        transparent !important;
}


/* Botón mantiene su forma,
   pero queda más ligero visualmente */

#categorias .oce-category-ambiente .oce-card-link {
    background:
        rgba(255,255,255,.42);

    box-shadow:
        none;
}



/* =========================================================
   PATRIMONIO — MISMO TRATAMIENTO QUE MEDIOAMBIENTE
   2026-10-04
   ========================================================= */

#categorias .oce-category-patrimonio {
    grid-template-columns:
        56% 44% !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    overflow:
        visible !important;

    min-height:
        280px;
}


#categorias .oce-category-patrimonio .oce-category-art {
    min-height:
        280px;

    background-image:
        url("https://ojoconesto.org/wp-content/uploads/2026/10/patrimonio.png") !important;

    background-repeat:
        no-repeat !important;

    background-position:
        left center !important;

    background-size:
        contain !important;

    background-color:
        transparent !important;
}


/* eliminar recortes CSS antiguos */

#categorias .oce-category-patrimonio .oce-category-art::before,
#categorias .oce-category-patrimonio .oce-category-art::after {
    content:
        none !important;

    display:
        none !important;
}


/* texto adaptado al espacio disponible */

#categorias .oce-category-patrimonio .oce-category-copy {
    padding:
        24px 10px
        22px 14px !important;

    background:
        transparent !important;
}


#categorias .oce-category-patrimonio .oce-category-title-row {
    gap:
        10px;
}


#categorias .oce-category-patrimonio .oce-category-copy h3 {
    font-size:
        24px;
}


#categorias .oce-category-patrimonio .oce-category-copy p {
    font-size:
        13px;

    line-height:
        1.38;
}


#categorias .oce-category-patrimonio .oce-card-link {
    padding:
        0 14px;

    font-size:
        11.5px;

    white-space:
        nowrap;

    background:
        rgba(255,255,255,.42);

    box-shadow:
        none;
}



/* =========================================================
   COMO FUNCIONA OCE 2026-10-04
   ========================================================= */

.oce-how {
    position: relative;

    padding:
        68px 0 76px;

    background:
        #f5f0e8;

    overflow:
        hidden;
}


/* Encabezado */

.oce-how-heading {
    max-width:
        680px;

    margin-bottom:
        42px;
}

.oce-how-heading .oce-kicker {
    color:
        var(--oce-orange);

    text-transform:
        uppercase;

    letter-spacing:
        .11em;

    font-size:
        13px;

    font-weight:
        700;
}

.oce-how-heading h2 {
    margin:
        7px 0 12px;

    font-family:
        "Lora",
        Georgia,
        serif;

    font-size:
        clamp(38px, 4vw, 52px);

    line-height:
        .98;

    letter-spacing:
        -.035em;

    color:
        var(--oce-green);
}

.oce-how-heading p {
    max-width:
        540px;

    margin:
        0;

    color:
        #63716d;

    font-size:
        16px;

    line-height:
        1.4;
}


/* Pasos */

.oce-how-steps {
    position: relative;

    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        42px;
}


/* línea suave que conecta el proceso */

.oce-how-steps::before {
    content: "";

    position:
        absolute;

    top:
        39px;

    left:
        9%;

    right:
        9%;

    height:
        1px;

    background:
        rgba(31, 87, 72, .18);
}


.oce-how-step {
    position:
        relative;

    z-index:
        1;
}


.oce-how-number {
    display:
        block;

    margin-bottom:
        12px;

    color:
        var(--oce-orange);

    font-family:
        "Montserrat",
        sans-serif;

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        .12em;
}


.oce-how-icon {
    display:
        grid;

    place-items:
        center;

    width:
        58px;

    height:
        58px;

    margin-bottom:
        18px;

    border-radius:
        50%;

    background:
        #fffdf8;

    color:
        var(--oce-green);

    box-shadow:
        0 8px 24px
        rgba(20,63,55,.07);
}


.oce-how-icon svg {
    width:
        28px;

    height:
        28px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.7;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.oce-how-step h3 {
    margin:
        0 0 9px;

    font-family:
        "Lora",
        Georgia,
        serif;

    font-size:
        25px;

    line-height:
        1.05;

    color:
        var(--oce-green);
}


.oce-how-step p {
    max-width:
        290px;

    margin:
        0;

    color:
        #61706b;

    font-size:
        14px;

    line-height:
        1.45;
}


/* móvil */

@media (max-width: 760px) {

    .oce-how {
        padding:
            52px 0 58px;
    }

    .oce-how-steps {
        grid-template-columns:
            1fr;

        gap:
            32px;
    }

    .oce-how-steps::before {
        display:
            none;
    }

    .oce-how-heading {
        margin-bottom:
            34px;
    }

}


/* =========================================================
   COMO FUNCIONA — AJUSTE FINAL V2 2026-10-04
   ========================================================= */

/*
 * Igualar visualmente el tono con la zona inferior
 * de la sección anterior.
 */

.oce-how {
    background:
        #f7f4ed !important;

    padding:
        58px 0 66px;
}


/* Eliminar línea de conexión */

.oce-how-steps::before {
    display:
        none !important;
}


/* Íconos en el mismo lenguaje de categorías */

.oce-how-icon {
    width:
        48px;

    height:
        48px;

    margin-bottom:
        16px;

    border-radius:
        50%;

    background:
        #f1f0df;

    color:
        var(--oce-green);

    box-shadow:
        none;
}

.oce-how-icon svg {
    width:
        25px;

    height:
        25px;

    stroke-width:
        1.8;
}


/* Números más discretos */

.oce-how-number {
    margin-bottom:
        9px;

    color:
        var(--oce-orange);

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        .11em;
}


/* Un poco más de aire entre los tres pasos */

.oce-how-steps {
    gap:
        54px;
}


/* Títulos consistentes con la sección anterior */

.oce-how-step h3 {
    font-size:
        23px;

    line-height:
        1.05;
}


/* Texto algo más compacto */

.oce-how-step p {
    font-size:
        13px;

    line-height:
        1.42;
}


/* Cabecera más compacta */

.oce-how-heading {
    margin-bottom:
        34px;
}



/* =========================================================
   COMO FUNCIONA — COMPACTAR Y REORDENAR 2026-10-04
   ========================================================= */

.oce-how {
    padding-top:
        28px !important;

    padding-bottom:
        58px !important;
}

/* menos aire entre categorías y esta sección */
.oce-how-heading {
    margin-bottom:
        24px !important;
}

/* cada columna pasa a grid */
.oce-how-step {
    display:
        grid !important;

    grid-template-columns:
        44px 1fr;

    grid-template-areas:
        "number number"
        "icon title"
        ". copy";

    column-gap:
        14px;

    row-gap:
        8px;

    align-items:
        start;
}

/* números más grandes y centrados */
.oce-how-number {
    grid-area:
        number;

    display:
        block !important;

    text-align:
        center;

    justify-self:
        center;

    margin:
        0 0 16px !important;

    font-size:
        18px !important;

    line-height:
        1;

    letter-spacing:
        .12em;

    font-weight:
        800;
}

/* icono al costado izquierdo del título */
.oce-how-icon {
    grid-area:
        icon;

    margin:
        0 !important;

    align-self:
        start;

    justify-self:
        start;

    width:
        42px !important;

    height:
        42px !important;
}

.oce-how-step h3 {
    grid-area:
        title;

    margin:
        2px 0 0 !important;

    align-self:
        center;
}

.oce-how-step p {
    grid-area:
        copy;

    margin:
        0 !important;
}

/* un poco menos de separación horizontal general */
.oce-how-steps {
    gap:
        34px !important;
}

/* móvil */
@media (max-width: 860px) {

    .oce-how {
        padding-top:
            22px !important;
    }

    .oce-how-step {
        grid-template-columns:
            40px 1fr;
    }

    .oce-how-number {
        font-size:
            16px !important;
    }
}



/* =========================================================
   COMO FUNCIONA — NUMEROS Y ALINEACION V4
   2026-10-04
   ========================================================= */

.oce-how-step {
    grid-template-rows:
        auto 48px auto !important;
}


/* números limpios, más grandes y centrados */

.oce-how-number {
    justify-self:
        center !important;

    width:
        100%;

    margin:
        0 0 14px !important;

    text-align:
        center !important;

    font-size:
        24px !important;

    line-height:
        1 !important;

    letter-spacing:
        0 !important;

    font-weight:
        700 !important;
}


/* icono + título ocupan exactamente la misma fila */

.oce-how-icon {
    align-self:
        center !important;

    justify-self:
        start !important;
}

.oce-how-step h3 {
    align-self:
        center !important;

    margin:
        0 !important;

    line-height:
        1.05 !important;
}


/* descripción empieza siempre a la misma altura */

.oce-how-step p {
    align-self:
        start !important;
}



/* =========================================================
   COMO FUNCIONA — UNIDAD COMPACTA V5
   2026-10-04
   ========================================================= */

.oce-how-step {
    display: grid !important;

    grid-template-columns:
        48px minmax(0, 1fr);

    grid-template-areas:
        "number number"
        "icon title"
        "icon copy";

    grid-template-rows:
        auto auto auto !important;

    column-gap:
        12px !important;

    row-gap:
        5px !important;

    align-items:
        start !important;
}


/* número centrado arriba */

.oce-how-number {
    grid-area:
        number;

    margin:
        0 0 14px !important;

    text-align:
        center !important;

    justify-self:
        stretch !important;
}


/* icono junto al bloque de contenido */

.oce-how-icon {
    grid-area:
        icon;

    width:
        48px !important;

    height:
        48px !important;

    margin:
        0 !important;

    align-self:
        start !important;

    justify-self:
        start !important;
}


/* título pegado al icono */

.oce-how-step h3 {
    grid-area:
        title;

    margin:
        1px 0 2px !important;

    align-self:
        start !important;

    line-height:
        1.05 !important;
}


/* párrafo inmediatamente debajo del título */

.oce-how-step p {
    grid-area:
        copy;

    margin:
        0 !important;

    max-width:
        290px;

    align-self:
        start !important;
}



/* =========================================================
   COMO FUNCIONA — ALINEACION CORREGIDA V6
   2026-10-04
   ========================================================= */

.oce-how-step {
    display: grid !important;

    grid-template-columns:
        48px minmax(0, 1fr);

    grid-template-areas:
        "number number"
        "icon title"
        "copy copy";

    grid-template-rows:
        auto auto auto !important;

    column-gap:
        12px !important;

    row-gap:
        8px !important;

    width:
        100%;

    max-width:
        320px;

    justify-self:
        center;

    align-items:
        center !important;
}


/* número centrado respecto de toda la columna */

.oce-how-number {
    grid-area:
        number;

    width:
        100%;

    margin:
        0 0 14px !important;

    text-align:
        center !important;

    justify-self:
        stretch !important;
}


/* icono y título forman una sola fila */

.oce-how-icon {
    grid-area:
        icon;

    width:
        48px !important;

    height:
        48px !important;

    margin:
        0 !important;

    align-self:
        center !important;

    justify-self:
        start !important;
}


.oce-how-step h3 {
    grid-area:
        title;

    margin:
        0 !important;

    align-self:
        center !important;
}


/* párrafo vuelve a la línea izquierda del icono */

.oce-how-step p {
    grid-area:
        copy;

    width:
        100%;

    max-width:
        none !important;

    margin:
        0 !important;

    align-self:
        start !important;
}



/* =========================================================
   CATEGORIAS — FONDO TIPO CERROS SUAVES 2026-10-04
   ========================================================= */

/*
 * Sustituye el gran arco por varias lomas amplias.
 * Mantiene el mismo tono suave actual.
 */

#categorias::before {
    content: "" !important;

    position: absolute !important;

    z-index: 0 !important;

    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;
    height: 48% !important;

    border-radius: 0 !important;

    transform: none !important;

    background:
        radial-gradient(
            ellipse 42% 78% at 5% 108%,
            rgba(242,236,226,.62) 0%,
            rgba(242,236,226,.62) 68%,
            transparent 69%
        ),

        radial-gradient(
            ellipse 36% 70% at 34% 112%,
            rgba(242,236,226,.56) 0%,
            rgba(242,236,226,.56) 68%,
            transparent 69%
        ),

        radial-gradient(
            ellipse 44% 82% at 68% 108%,
            rgba(242,236,226,.60) 0%,
            rgba(242,236,226,.60) 68%,
            transparent 69%
        ),

        radial-gradient(
            ellipse 34% 68% at 98% 112%,
            rgba(242,236,226,.54) 0%,
            rgba(242,236,226,.54) 68%,
            transparent 69%
        ) !important;

    pointer-events: none !important;
}


/*
 * Segunda capa muy tenue para dar profundidad,
 * con cumbres desfasadas.
 */

#categorias::after {
    content: "" !important;

    position: absolute !important;

    z-index: 0 !important;

    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;
    height: 36% !important;

    border-radius: 0 !important;

    transform: none !important;

    background:
        radial-gradient(
            ellipse 30% 72% at 20% 118%,
            rgba(247,243,235,.72) 0%,
            rgba(247,243,235,.72) 68%,
            transparent 69%
        ),

        radial-gradient(
            ellipse 40% 78% at 52% 116%,
            rgba(247,243,235,.66) 0%,
            rgba(247,243,235,.66) 68%,
            transparent 69%
        ),

        radial-gradient(
            ellipse 34% 72% at 84% 118%,
            rgba(247,243,235,.70) 0%,
            rgba(247,243,235,.70) 68%,
            transparent 69%
        ) !important;

    pointer-events: none !important;
}


#categorias > .oce-shell {
    position: relative;
    z-index: 1;
}



/* =========================================================
   TRANSICION CATEGORIAS -> COMO FUNCIONA V2
   2026-10-04
   ========================================================= */


/* Quitar completamente las capas anteriores que oscurecían */

#categorias::before,
#categorias::after {
    content: none !important;
    display: none !important;
}


/*
 * La sección "Cómo funciona" es la que sube
 * sobre la sección anterior.
 */

.oce-how {
    position: relative;
    z-index: 2;

    overflow: visible !important;

    background:
        #f7f4ed !important;
}


/*
 * Loma principal.
 * Grande, amplia y claramente dominante.
 */

.oce-how::before {
    content: "";

    position: absolute;

    z-index: -1;

    top: -92px;
    left: -8%;

    width: 78%;
    height: 130px;

    background:
        #f7f4ed;

    border-radius:
        50% 50% 0 0
        /
        100% 100% 0 0;

    transform:
        rotate(-1deg);

    pointer-events: none;
}


/*
 * Segunda curva, más baja y suave,
 * para evitar una sola media luna perfecta.
 */

.oce-how::after {
    content: "";

    position: absolute;

    z-index: -1;

    top: -54px;
    right: -10%;

    width: 58%;
    height: 92px;

    background:
        #f7f4ed;

    border-radius:
        50% 50% 0 0
        /
        100% 100% 0 0;

    transform:
        rotate(1.5deg);

    pointer-events: none;
}


/* asegurar que el contenido quede arriba de las curvas */

.oce-how > .oce-shell {
    position: relative;
    z-index: 1;
}



/* =========================================================
   CIERRE MVP CATEGORIAS + COMO FUNCIONA
   2026-10-04
   ========================================================= */


/* ---------------------------------------------------------
   CATEGORÍAS
   Sin curvas ni capas decorativas entre secciones
   --------------------------------------------------------- */

#categorias {
    overflow: visible !important;
}

#categorias::before,
#categorias::after {
    content: none !important;
    display: none !important;
}


/* Patrimonio y Medioambiente:
   composición plana, sin movimiento al hover */

#categorias .oce-category-card {
    transition: none !important;
}

#categorias .oce-category-card:hover {
    transform: none !important;
    box-shadow: none !important;
}


/* Los botones conservan su comportamiento actual */

#categorias .oce-card-link {
    transition:
        background .2s ease,
        color .2s ease !important;
}


/* ---------------------------------------------------------
   CÓMO FUNCIONA
   Borde superior completamente recto
   --------------------------------------------------------- */

.oce-how {
    overflow: hidden !important;

    background:
        #f7f4ed !important;
}

.oce-how::before,
.oce-how::after {
    content: none !important;
    display: none !important;
}


/* evitar cualquier solapamiento hacia la sección anterior */

.oce-how {
    margin-top: 0 !important;
}



/* =========================================================
   AGRADECEMOS A — PAISAJE MVP 2026-10-04
   ========================================================= */

.oce-supporters {
    position: relative;

    padding:
        62px 0
        72px !important;

    background:
        linear-gradient(
            rgba(247,243,235,.58),
            rgba(247,243,235,.58)
        ),
        url("https://ojoconesto.org/wp-content/uploads/2026/10/Valle-Andino-entre-la-Niebla.png")
        center bottom / cover
        no-repeat !important;
}


/* Quitar las formas verdes antiguas */

.oce-supporters::before,
.oce-supporters::after {
    content:
        none !important;

    display:
        none !important;
}


/* Mantener título y banners por encima del paisaje */

.oce-supporters > .oce-shell {
    position:
        relative;

    z-index:
        1;
}


/* Banners más sutiles sobre el paisaje */

.oce-supporter-card {
    background:
        rgba(255,253,248,.78) !important;

    border:
        1px solid
        rgba(255,255,255,.55) !important;

    box-shadow:
        0 8px 24px
        rgba(20,63,55,.05) !important;

    backdrop-filter:
        blur(5px);

    -webkit-backdrop-filter:
        blur(5px);
}


/* Móvil: conservar zona central del paisaje */

@media (max-width: 680px) {

    .oce-supporters {
        background-position:
            center bottom !important;

        padding:
            50px 0
            58px !important;
    }

}



/* =========================================================
   AGRADECEMOS — ALTURA Y POSICION PAISAJE 2026-10-04
   ========================================================= */

.oce-supporters {
    padding:
        70px 0
        118px !important;

    background:
        linear-gradient(
            rgba(247,243,235,.58),
            rgba(247,243,235,.58)
        ),
        url("https://ojoconesto.org/wp-content/uploads/2026/10/Valle-Andino-entre-la-Niebla.png")
        center 42px / cover
        no-repeat !important;
}



/* =========================================================
   AGRADECEMOS — REENCUADRE PAISAJE 2026-10-04
   ========================================================= */

.oce-supporters {
    background:
        linear-gradient(
            rgba(247,243,235,.58),
            rgba(247,243,235,.58)
        ),
        url("https://ojoconesto.org/wp-content/uploads/2026/10/Valle-Andino-entre-la-Niebla.png")
        center 8px / cover
        no-repeat !important,
        linear-gradient(
            180deg,
            #f4f0e7 0%,
            #f0ebdf 100%
        ) !important;
}



/* =========================================================
   FOOTER OCE MVP 2026-10-04
   ========================================================= */

.oce-footer {
    position:
        relative;

    background:
        #123f37;

    color:
        rgba(255,255,255,.78);

    padding:
        34px 0;

    overflow:
        hidden;
}


/* detalle topográfico muy sutil */

.oce-footer::after {
    content: "";

    position:
        absolute;

    right:
        -40px;

    bottom:
        -80px;

    width:
        470px;

    height:
        220px;

    border:
        1px solid
        rgba(255,255,255,.035);

    border-radius:
        48% 52% 46% 54%;

    box-shadow:
        0 0 0 24px rgba(255,255,255,.018),
        0 0 0 48px rgba(255,255,255,.012),
        0 0 0 72px rgba(255,255,255,.008);

    transform:
        rotate(-8deg);

    pointer-events:
        none;
}


.oce-footer-grid {
    position:
        relative;

    z-index:
        1;

    display:
        grid;

    grid-template-columns:
        180px
        minmax(300px,1fr)
        auto;

    gap:
        34px;

    align-items:
        center;
}


/* logo blanco */

.oce-footer-brand {
    padding-right:
        30px;

    border-right:
        1px solid
        rgba(255,255,255,.34);
}

.oce-footer-brand img {
    display:
        block;

    width:
        160px;

    height:
        auto;

    filter:
        brightness(0)
        invert(1);

    opacity:
        .96;
}


/* propiedad institucional */

.oce-footer-owner {
    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

    font-size:
        12px;

    line-height:
        1.35;
}

.oce-footer-owner span {
    color:
        rgba(255,255,255,.62);
}

.oce-footer-owner strong {
    color:
        #ffffff;

    font-weight:
        600;
}


/* navegación */

.oce-footer-nav {
    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    flex-wrap:
        wrap;

    gap:
        18px;
}

.oce-footer-nav a {
    color:
        rgba(255,255,255,.72);

    font-size:
        11px;

    font-weight:
        500;

    text-decoration:
        none;

    transition:
        color .2s ease;
}

.oce-footer-nav a:hover {
    color:
        #ffffff;
}


/* RESPONSIVE */

@media (max-width: 900px) {

    .oce-footer-grid {
        grid-template-columns:
            1fr;

        gap:
            24px;
    }

    .oce-footer-brand {
        padding-right:
            0;

        padding-bottom:
            20px;

        border-right:
            0;

        border-bottom:
            1px solid
            rgba(255,255,255,.20);
    }

    .oce-footer-nav {
        justify-content:
            flex-start;
    }

}


@media (max-width: 560px) {

    .oce-footer {
        padding:
            30px 0;
    }

    .oce-footer-brand img {
        width:
            145px;
    }

    .oce-footer-nav {
        gap:
            14px 18px;
    }

}


.oce-supporter-card--prza {
    gap: 12px;
}

.oce-supporter-logo {
    display: block;
    width: 74px;
    max-width: 74px;
    height: auto;
    object-fit: contain;
    flex: 0 0 auto;
}

.oce-supporter-card--prza .oce-supporter-placeholder {
    color: var(--oce-green);
    font-weight: 700;
}


/* =========================================================
   REPORTES CIUDADANOS — PORTADA DINÁMICA
   ========================================================= */

.oce-public-reports {
    padding: 76px 0 82px;
    background: #ffffff;
}

.oce-public-reports-heading {
    display: grid;
    grid-template-columns:
        minmax(0,1fr)
        minmax(280px,420px);
    gap: 44px;
    align-items: end;
    margin-bottom: 38px;
}

.oce-public-reports-heading h2 {
    margin: 7px 0 0;
    max-width: 690px;
    color: var(--oce-green);
    font-family: "Lora", Georgia, serif;
    font-size: clamp(34px,4vw,54px);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -.035em;
}

.oce-public-reports-heading > p {
    margin: 0;
    color: #66706b;
    font-size: 15px;
    line-height: 1.65;
}

.oce-public-reports-grid {
    display: grid;
    grid-template-columns:
        repeat(4,minmax(0,1fr));
    gap: 18px;
}

.oce-public-report-card {
    min-width: 0;
    overflow: hidden;
    background: #fbfaf6;
    border: 1px solid #e7e2d9;
    border-radius: 18px;
}

.oce-public-report-image {
    display: block;
    height: 184px;
    overflow: hidden;
    background: #e7e4dc;
    text-decoration: none;
}

.oce-public-report-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.oce-public-report-image-empty {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: rgba(18,63,55,.25);
    font-size: 38px;
}

.oce-public-report-content {
    display: flex;
    flex-direction: column;
    min-height: 244px;
    padding: 20px;
}

.oce-public-report-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 9px;
    align-items: center;
    margin-bottom: 12px;
}

.oce-public-report-category {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(216,104,27,.11);
    color: #b95613;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.oce-public-report-location {
    color: #7a827f;
    font-size: 11px;
    line-height: 1.3;
}

.oce-public-report-card h3 {
    margin: 0 0 10px;
    color: var(--oce-green);
    font-family: "Lora", Georgia, serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
}

.oce-public-report-card h3 a {
    color: inherit;
    text-decoration: none;
}

.oce-public-report-card p {
    margin: 0 0 18px;
    color: #66706b;
    font-size: 13px;
    line-height: 1.55;
}

.oce-public-report-link {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    margin-top: auto;
    color: var(--oce-green);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.oce-public-report-link span {
    color: var(--oce-orange);
}

.oce-public-report-card--placeholder {
    border-style: dashed;
    background: #faf9f5;
    opacity: .72;
}

.oce-public-report-placeholder-art {
    display: flex;
    height: 184px;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(
            135deg,
            #f3f0e8,
            #ece8de
        );
}

.oce-public-report-placeholder-art span {
    display: flex;
    width: 58px;
    height: 58px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(18,63,55,.12);
    border-radius: 50%;
    background: rgba(255,255,255,.55);
    filter: grayscale(1);
    opacity: .5;
}

.oce-public-report-placeholder-label {
    margin-bottom: 12px;
    color: #9a7f68;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

@media (max-width: 1050px) {

    .oce-public-reports-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}

@media (max-width: 720px) {

    .oce-public-reports {
        padding:
            58px 0 64px;
    }

    .oce-public-reports-heading {
        grid-template-columns:
            1fr;
        gap: 18px;
        margin-bottom: 28px;
    }

    .oce-public-reports-heading > p {
        max-width: 520px;
    }

    .oce-public-reports-grid {
        grid-template-columns:
            1fr;
    }

    .oce-public-report-image,
    .oce-public-report-placeholder-art {
        height: 220px;
    }

    .oce-public-report-content {
        min-height: 0;
    }

}

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

.oce-nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    flex: 0 0 auto;
}

.oce-account-action,
.oce-top-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition:
        color .2s ease,
        border-color .2s ease,
        background .2s ease;
}

.oce-account-action {
    border: 1px solid rgba(18,63,55,.18);
    color: var(--oce-green);
    background: transparent;
}

.oce-account-action:hover {
    border-color: rgba(18,63,55,.35);
    background: rgba(18,63,55,.05);
    color: var(--oce-green);
}

.oce-top-action {
    min-width: 132px;
}

@media (max-width: 900px) {

    .oce-nav-actions {
        gap: 8px;
    }

    .oce-account-action,
    .oce-top-action {
        min-height: 40px;
        padding: 0 14px;
        font-size: 11px;
    }

}

@media (max-width: 720px) {

    .oce-nav-actions {
        width: 100%;
        justify-content: flex-end;
        margin-top: 10px;
    }

    .oce-account-action,
    .oce-top-action {
        min-height: 38px;
        padding: 0 12px;
    }

}

/* =========================================================
   CATEGORÍAS — CIERRE RESPONSIVE MÓVIL
   2026-10-05
   ========================================================= */

@media (max-width: 680px) {

    #categorias {
        overflow: hidden !important;
        padding:
            50px 0
            58px !important;
    }

    #categorias .oce-section-heading {
        display: grid !important;
        grid-template-columns:
            minmax(0, 1fr) !important;
        gap: 16px !important;
        margin-bottom:
            30px !important;
    }

    #categorias .oce-section-heading > * {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    #categorias .oce-section-heading > p {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    #categorias .oce-category-grid {
        display: grid !important;
        grid-template-columns:
            minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 38px !important;
    }

    #categorias .oce-category-card,
    #categorias .oce-category-patrimonio,
    #categorias .oce-category-ambiente {
        display: grid !important;
        grid-template-columns:
            minmax(0, 1fr) !important;
        grid-template-rows:
            auto auto !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;
    }

    #categorias .oce-category-art,
    #categorias .oce-category-patrimonio .oce-category-art,
    #categorias .oce-category-ambiente .oce-category-art {
        position: relative !important;

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 230px !important;

        margin: 0 auto 12px !important;

        transform: none !important;

        background-position:
            center center !important;

        background-size:
            contain !important;

        background-repeat:
            no-repeat !important;
    }

    #categorias .oce-category-art::before,
    #categorias .oce-category-art::after,
    #categorias .oce-category-patrimonio .oce-category-art::before,
    #categorias .oce-category-patrimonio .oce-category-art::after,
    #categorias .oce-category-ambiente .oce-category-art::before,
    #categorias .oce-category-ambiente .oce-category-art::after {
        max-width: 100% !important;
        transform: none !important;
    }

    #categorias .oce-category-copy,
    #categorias .oce-category-patrimonio .oce-category-copy,
    #categorias .oce-category-ambiente .oce-category-copy {
        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding:
            4px 4px
            0 !important;

        transform: none !important;
    }

    #categorias .oce-category-title-row,
    #categorias .oce-category-patrimonio .oce-category-title-row,
    #categorias .oce-category-ambiente .oce-category-title-row {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 0 10px !important;

        transform: none !important;
    }

    #categorias .oce-category-copy h3,
    #categorias .oce-category-copy p {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        transform: none !important;
    }

    #categorias .oce-category-copy h3 {
        font-size:
            25px !important;
        line-height:
            1.12 !important;
    }

    #categorias .oce-category-copy p {
        margin-bottom:
            18px !important;

        font-size:
            14px !important;
        line-height:
            1.55 !important;
    }

    #categorias .oce-card-link,
    #categorias .oce-category-patrimonio .oce-card-link,
    #categorias .oce-category-ambiente .oce-card-link {
        display: inline-flex !important;

        width: auto !important;
        max-width: 100% !important;

        margin:
            0 !important;

        transform:
            none !important;
    }

}


/* =====================================================
   OCE ACTUALIDAD V1
   ===================================================== */

.oce-news-section {
    padding: 84px 0;
    background: #f5f4ef;
}

.oce-news-heading {
    max-width: 720px;
    margin-bottom: 36px;
}

.oce-news-heading h2 {
    margin: 12px 0 14px;
    color: #123d36;
    font-size: clamp(30px, 4vw, 43px);
    line-height: 1.15;
}

.oce-news-heading p {
    margin: 0;
    color: #56615b;
    font-size: 17px;
    line-height: 1.65;
}

.oce-news-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.oce-news-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #e1ddd5;
    border-radius: 15px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

.oce-news-card:hover,
.oce-news-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(18, 61, 54, .12);
}

.oce-news-card-image {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #e7e8e2;
}

.oce-news-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.oce-news-card-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 23px;
}

.oce-news-card-meta {
    margin-bottom: 11px;
    color: #b65d20;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.oce-news-card h3 {
    margin: 0 0 14px;
    color: #123d36;
    font-size: 21px;
    line-height: 1.35;
}

.oce-news-card p {
    margin: 0 0 20px;
    color: #56615b;
    font-size: 15px;
    line-height: 1.6;
}

.oce-news-card-more {
    margin-top: auto;
    color: #123d36;
    font-size: 14px;
    font-weight: 800;
}

@media (max-width: 900px) {
    .oce-news-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .oce-news-section {
        padding: 56px 0;
    }

    .oce-news-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .oce-news-card-content {
        padding: 20px;
    }
}