:root {
    /* Brand core */
    --raw-primary-950: #071827;
    --raw-primary-900: #0b2742;
    --raw-primary-850: #0e3f74;
    --raw-primary-800: #0f5fa5;
    --raw-primary-700: #0f79c2;
    --raw-primary-650: #1498db;
    --raw-primary-600: #17b7c9;
    --raw-primary-500: #22c7d6;
    --raw-primary-400: #66dced;
    --raw-primary-300: #a7edf7;

    /* Accent / water */
    --raw-water-700: #0f79c2;
    --raw-water-600: #1498db;
    --raw-water-500: #22c7d6;
    --raw-water-400: #66dced;
    --raw-water-300: #a7edf7;

    /* Environmental support */
    --raw-mint-500: #29b37a;
    --raw-mint-400: #51c694;
    --raw-mint-300: #bfeeda;

    /* Soft neutrals */
    --raw-bg: #f2f9fc;
    --raw-bg-soft: #f6fbfe;
    --raw-bg-mist: #fbfeff;
    --raw-surface: rgba(255, 255, 255, 0.74);
    --raw-surface-strong: rgba(255, 255, 255, 0.9);
    --raw-surface-solid: #ffffff;
    --raw-surface-dark: rgba(8, 30, 53, 0.82);

    --raw-border: rgba(15, 121, 194, 0.12);
    --raw-border-strong: rgba(15, 121, 194, 0.18);
    --raw-line: rgba(15, 121, 194, 0.08);

    --raw-title: #213455;
    --raw-title-strong: #162744;
    --raw-text: #526987;
    --raw-text-soft: #7890aa;
    --raw-white: #ffffff;

    /* Shadows */
    --shadow-xs: 0 8px 22px rgba(10, 57, 98, 0.05);
    --shadow-sm: 0 14px 34px rgba(10, 57, 98, 0.08);
    --shadow-md: 0 24px 56px rgba(10, 57, 98, 0.12);
    --shadow-lg: 0 32px 88px rgba(10, 57, 98, 0.16);
    --shadow-glow: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 18px 56px rgba(20, 152, 219, 0.16);

    /* Radius */
    --radius-xs: 10px;
    --radius-sm: 14px;
    --radius-md: 18px;
    --radius-lg: 26px;
    --radius-xl: 34px;
    --radius-pill: 999px;

    /* Layout */
    --container-reading: 860px;
    --section-space: clamp(72px, 8vw, 120px);
    --header-offset: 92px;

    /* Motion */
    --ease-standard: cubic-bezier(.22, .61, .36, 1);
    --ease-smooth: cubic-bezier(.16, 1, .3, 1);
    --tr-fast: 180ms var(--ease-standard);
    --tr-med: 320ms var(--ease-standard);
    --tr-slow: 520ms var(--ease-smooth);

    /* Blur */
    --blur-sm: blur(10px);
    --blur-md: blur(18px);
    --blur-lg: blur(24px);
}

/* =========================
     Reset / base
     ========================= */
html {
    scroll-behavior: smooth;
}

body {
    color: var(--raw-text);
    background:
        radial-gradient(circle at top left, rgba(102, 220, 237, 0.18), transparent 32%),
        radial-gradient(circle at right 18%, rgba(34, 199, 214, 0.10), transparent 24%),
        linear-gradient(180deg, #f5fbfe 0%, #f3f9fc 34%, #f8fcfe 100%);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

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

a,
button,
input,
textarea,
select {
    transition:
        color var(--tr-fast),
        background-color var(--tr-fast),
        border-color var(--tr-fast),
        box-shadow var(--tr-med),
        transform var(--tr-med),
        opacity var(--tr-fast);
}

a {
    text-decoration: none;
}

section {
    position: relative;
    scroll-margin-top: var(--header-offset);
}

hr,
.causes-divider {
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(15, 121, 194, .14), transparent);
    margin: 1rem 0 1.15rem;
}

/* =========================
     Typography
     ========================= */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--raw-title-strong);
    letter-spacing: -0.032em;
    line-height: 1.04;
    margin: 0 0 .65em;
}

p {
    margin: 0 0 1rem;
    color: var(--raw-text);
}

.raw-kicker,
.promo-primary__eyebrow,
.tickets-kicker {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 36px;
    padding: .46rem .95rem;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .10);
    backdrop-filter: var(--blur-sm);
    -webkit-backdrop-filter: var(--blur-sm);
    color: rgba(255, 255, 255, .94);
    font-size: .84rem;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.raw-section .raw-kicker {
    background: rgba(20, 152, 219, 0.08);
    color: var(--raw-primary-800);
    border: 1px solid rgba(20, 152, 219, 0.14);
}

.raw-title {
    font-size: clamp(2rem, 3.8vw, 4.2rem);
    line-height: .98;
    max-width: 16ch;
    color: var(--raw-title);
}

.raw-subtitle {
    font-size: clamp(1rem, 1.15vw, 1.14rem);
    line-height: 1.8;
    max-width: 72ch;
    color: var(--raw-text);
}

.raw-section-head {
    margin-bottom: clamp(30px, 5vw, 54px);
}

.raw-section-head .raw-subtitle {
    margin-top: .9rem;
}

/* =========================
     Section shells
     ========================= */
.raw-section {
    padding: var(--section-space) 0;
}

.raw-section--light {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .74) 0%, rgba(255, 255, 255, .58) 100%);
}

.raw-section--soft {
    background:
        radial-gradient(circle at top left, rgba(102, 220, 237, .12), transparent 34%),
        linear-gradient(180deg, rgba(244, 250, 253, .96), rgba(242, 249, 252, .82));
}

/* =========================
     Buttons
     ========================= */
.raw-btn,
.btn-outline-primary {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    min-height: 54px;
    padding: 0 1.4rem;
    border-radius: var(--radius-pill);
    font-weight: 800;
    font-size: .98rem;
    border: 1px solid transparent;
    white-space: nowrap;
    overflow: hidden;
    box-shadow: none;
}

.raw-btn::before,
.btn-outline-primary::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .18), rgba(255, 255, 255, 0));
    transform: translateX(-120%);
    transition: transform .75s var(--ease-smooth);
    z-index: -1;
}

.raw-btn:hover::before,
.btn-outline-primary:hover::before {
    transform: translateX(120%);
}

.raw-btn:hover,
.btn-outline-primary:hover {
    transform: translateY(-2px);
}

.raw-btn--primary {
    background: linear-gradient(135deg, var(--raw-primary-800), var(--raw-primary-500));
    color: var(--raw-white);
    border-color: rgba(255, 255, 255, .12);
    box-shadow: 0 16px 34px rgba(15, 121, 194, 0.18);
}

.raw-btn--primary:hover {
    color: var(--raw-white);
    box-shadow: 0 20px 42px rgba(15, 121, 194, 0.24);
}

.raw-btn--ghost {
    background: rgba(255, 255, 255, .08);
    color: var(--raw-white);
    border-color: rgba(255, 255, 255, .18);
    backdrop-filter: var(--blur-sm);
    -webkit-backdrop-filter: var(--blur-sm);
}

.raw-btn--ghost:hover {
    color: var(--raw-white);
    background: rgba(255, 255, 255, .14);
}

.raw-btn--outline,
.btn-outline-primary {
    background: rgba(255, 255, 255, .86);
    color: var(--raw-primary-800);
    border-color: rgba(15, 121, 194, .14);
    backdrop-filter: var(--blur-sm);
    -webkit-backdrop-filter: var(--blur-sm);
    box-shadow: var(--shadow-xs);
}

.raw-btn--outline:hover,
.btn-outline-primary:hover {
    color: var(--raw-primary-800);
    background: rgba(255, 255, 255, .96);
    box-shadow: var(--shadow-sm);
}

.raw-btn:focus-visible,
.btn-outline-primary:focus-visible,
.subscribe-form__input:focus-visible,
.subscribe-form__submit:focus-visible,
.campaign-search__input:focus-visible,
.raw-tag:focus-visible,
.raw-social-links a:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 4px rgba(34, 199, 214, .18),
        0 0 0 1px rgba(15, 121, 194, .16);
}

/* =========================
     Hero
     ========================= */
.promo-primary {
    position: relative;
    padding: clamp(118px, 14vw, 172px) 0 clamp(58px, 8vw, 92px);
    overflow: hidden;
    color: var(--raw-white);
    text-align: center;
    background:
        radial-gradient(circle at top left, rgba(102, 220, 237, .18), transparent 28%),
        radial-gradient(circle at 80% 18%, rgba(34, 199, 214, .12), transparent 24%),
        linear-gradient(135deg, rgba(7, 24, 39, .86), rgba(11, 39, 66, .76) 50%, rgba(15, 121, 194, .44) 100%);
}

.promo-primary::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(6, 17, 30, .10) 0%, rgba(7, 24, 39, .28) 100%),
        radial-gradient(circle at center, rgba(255, 255, 255, .04), transparent 54%);
    z-index: 1;
}

.promo-primary::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -180px;
    width: min(1200px, 92vw);
    height: 360px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(102, 220, 237, .16), rgba(102, 220, 237, 0) 70%);
    filter: blur(20px);
    z-index: 1;
    pointer-events: none;
}

.promo-primary .img--bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    opacity: .30;
    transform: scale(1.04);
    filter: saturate(1.02) contrast(.94);
    z-index: 0;
}

.promo-primary .container {
    position: relative;
    z-index: 2;
}

.promo-primary__content {
    max-width: 1180px;
    margin: 0 auto;
}

.promo-primary__eyebrow {
    margin-bottom: 1.2rem;
}

.promo-primary__title {
    font-size: clamp(2.45rem, 5.6vw, 5.15rem);
    font-weight: 800;
    line-height: .96;
    max-width: 12.3ch;
    margin: 0 auto .95rem;
    color: var(--raw-white);
    text-wrap: balance;
    text-shadow: 0 10px 30px rgba(0, 0, 0, .14);
}

.promo-primary__subtitle {
    max-width: min(70ch, 92%);
    margin: 0 auto;
    font-size: clamp(1rem, 1.35vw, 1.22rem);
    line-height: 1.82;
    color: rgba(244, 250, 255, .9);
    text-wrap: pretty;
}

.promo-primary__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .95rem;
    flex-wrap: wrap;
    margin-top: 1.8rem;
}

.promo-primary__widgets {
    margin-top: clamp(30px, 5vw, 52px);
}

.raw-widget {
    position: relative;
    height: 100%;
    padding: 1.15rem 1rem 1rem;
    text-align: left;
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .08));
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: var(--shadow-glow);
    backdrop-filter: var(--blur-md);
    -webkit-backdrop-filter: var(--blur-md);
    overflow: hidden;
    transition:
        transform var(--tr-med),
        box-shadow var(--tr-med),
        border-color var(--tr-med),
        background var(--tr-med);
}

.raw-widget::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
}

.raw-widget:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 255, 255, .24);
    background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .10));
}

.raw-widget__label {
    display: inline-block;
    margin-bottom: .4rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(220, 239, 247, .8);
}

.raw-widget__value {
    display: block;
    margin-bottom: .45rem;
    font-size: clamp(1rem, 1.2vw, 1.18rem);
    line-height: 1.35;
    font-weight: 800;
    color: var(--raw-white);
}

.raw-widget__meta {
    margin: 0;
    font-size: .95rem;
    line-height: 1.65;
    color: rgba(232, 242, 248, .88);
}

/* =========================
     Shared shells
     ========================= */
.cco-card,
.causes-item,
.tickets-step,
.raw-cta-box,
.subscribe__shell,
.raw-social-box,
.campaign-toolbar {
    position: relative;
    border-radius: var(--radius-lg);
    border: 1px solid var(--raw-border);
    background: linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .72));
    backdrop-filter: var(--blur-sm);
    -webkit-backdrop-filter: var(--blur-sm);
    box-shadow: var(--shadow-sm);
}

.cco-card,
.causes-item,
.tickets-step {
    transition:
        transform var(--tr-med),
        box-shadow var(--tr-med),
        border-color var(--tr-med),
        background var(--tr-med);
}

.cco-card:hover,
.causes-item:hover,
.tickets-step:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-md);
    border-color: rgba(15, 121, 194, .18);
}

/* =========================
     Cómo funciona
     ========================= */
.cco-card {
    height: 100%;
    padding: 1.65rem 1.5rem 1.45rem;
    overflow: hidden;
}

.cco-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 1px;
    background: linear-gradient(90deg, rgba(20, 152, 219, 0), rgba(20, 152, 219, .45), rgba(20, 152, 219, 0));
}

.cco-icon-wrap {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    margin-bottom: 1rem;
    border-radius: 18px;
    background:
        radial-gradient(circle at top left, rgba(167, 237, 247, 0.6), rgba(34, 199, 214, .14)),
        rgba(255, 255, 255, .8);
    border: 1px solid rgba(20, 152, 219, .16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}

.cco-icon {
    font-size: 1.65rem;
    color: var(--raw-primary-700);
    margin: 0;
}

.cco-title {
    font-size: clamp(1.28rem, 1.5vw, 1.55rem);
    line-height: 1.08;
    margin-bottom: .75rem;
    color: var(--raw-title-strong);
}

.cco-copy {
    margin: 0;
    color: var(--raw-text);
    line-height: 1.82;
    font-size: 1rem;
}

/* =========================
     Tickets section
     ========================= */
.tickets-shell {
    position: relative;
    overflow: hidden;
    padding: clamp(28px, 4vw, 40px);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at top left, rgba(167, 237, 247, .34), transparent 28%),
        radial-gradient(circle at right center, rgba(102, 220, 237, .18), transparent 22%),
        linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(246, 251, 254, .86));
    border: 1px solid rgba(20, 152, 219, .10);
    box-shadow: var(--shadow-md);
}

.tickets-shell::before {
    content: "";
    position: absolute;
    inset: auto -8% -24% auto;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(102, 220, 237, .20), rgba(102, 220, 237, 0) 72%);
    filter: blur(16px);
    pointer-events: none;
}

.tickets-copy {
    max-width: 34rem;
}

.tickets-kicker {
    background: rgba(20, 152, 219, .10);
    color: var(--raw-primary-800);
    border: 1px solid rgba(20, 152, 219, .14);
}

.tickets-title {
    font-size: clamp(2rem, 4vw, 4rem);
    line-height: .98;
    color: var(--raw-title);
    max-width: 11ch;
    margin-top: 1rem;
    margin-bottom: .9rem;
}

.tickets-subtitle {
    font-size: 1.04rem;
    line-height: 1.82;
    color: var(--raw-text);
    margin: 0;
}

.tickets-steps {
    position: relative;
}

.tickets-steps::before {
    content: "";
    position: absolute;
    top: 36px;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg, rgba(20, 152, 219, .06), rgba(102, 220, 237, .4), rgba(20, 152, 219, .06));
    z-index: 0;
}

.tickets-step {
    height: 100%;
    padding: 1.45rem 1.2rem 1.25rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(252, 254, 255, .88));
    z-index: 1;
}

.tickets-step__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 30px;
    padding: 0 .75rem;
    margin-bottom: .8rem;
    border-radius: var(--radius-pill);
    background: rgba(167, 237, 247, .65);
    border: 1px solid rgba(20, 152, 219, .14);
    color: var(--raw-primary-800);
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .05em;
}

.tickets-step__icon {
    display: block;
    margin-bottom: .8rem;
    font-size: 1.35rem;
    color: var(--raw-primary-700);
}

.tickets-step__title {
    font-size: clamp(1.25rem, 1.5vw, 1.7rem);
    line-height: 1.05;
    margin-bottom: .6rem;
}

.tickets-step__text {
    margin: 0;
    color: var(--raw-text);
    line-height: 1.78;
    font-size: .98rem;
}

/* =========================
     Campaigns grid
     ========================= */
.projects-grid {
    margin-top: 6px;
}

.causes-item {
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(251, 253, 255, .88));
}

.causes-item__img {
    position: relative;
    aspect-ratio: 16 / 10;
    min-height: 240px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(15, 95, 165, .10), rgba(102, 220, 237, .16));
}

.causes-item__img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7, 24, 39, .02) 0%, rgba(7, 24, 39, 0) 30%, rgba(7, 24, 39, .14) 100%);
    pointer-events: none;
}

.causes-item__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.001);
    transition: transform var(--tr-slow), filter var(--tr-med);
}

.causes-item:hover .causes-item__img img {
    transform: scale(1.04);
    filter: saturate(1.03) contrast(1.02);
}

.causes-item__badge,
.causes-item__status {
    max-width: calc(50% - 24px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.causes-item__badge {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: .45rem .95rem;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, rgba(102, 220, 237, .96), rgba(34, 199, 214, .92));
    color: var(--raw-white);
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .02em;
    box-shadow: 0 10px 30px rgba(15, 95, 165, .14);
    backdrop-filter: var(--blur-sm);
    -webkit-backdrop-filter: var(--blur-sm);
}

.causes-item__status {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: .42rem .9rem;
    border-radius: var(--radius-pill);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    backdrop-filter: var(--blur-sm);
    -webkit-backdrop-filter: var(--blur-sm);
    box-shadow: 0 10px 30px rgba(15, 95, 165, .12);
}

.causes-item__status--activa {
    background: rgba(81, 198, 148, .18);
    color: #1f7b59;
    border: 1px solid rgba(81, 198, 148, .24);
}

.causes-item__status--en-ejecución,
.causes-item__status--en-ejecucion {
    background: rgba(20, 152, 219, .16);
    color: #0f5fa5;
    border: 1px solid rgba(20, 152, 219, .24);
}

.causes-item__status--próximo-cierre,
.causes-item__status--proximo-cierre {
    background: rgba(34, 199, 214, .14);
    color: #0e76bc;
    border: 1px solid rgba(34, 199, 214, .20);
}

.causes-item__status--finalizada {
    background: rgba(33, 52, 85, .14);
    color: #41506d;
    border: 1px solid rgba(33, 52, 85, .18);
}

.causes-item__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.45rem 1.4rem 1.5rem;
}

.causes-item__title {
    margin-bottom: .9rem;
}

.causes-item__title a {
    color: var(--raw-title-strong);
    font-size: clamp(1.22rem, 1.4vw, 1.5rem);
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -0.03em;
    word-break: break-word;
}

.causes-item__title a:hover {
    color: var(--raw-primary-800);
}

.causes-meta {
    display: grid;
    gap: .55rem;
    margin-bottom: .2rem;
}

.causes-meta__row {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    color: var(--raw-text);
    line-height: 1.55;
    font-size: .98rem;
}

.causes-meta__row i {
    margin-top: .16rem;
    color: var(--raw-primary-650);
    width: 16px;
    text-align: center;
    flex: 0 0 16px;
}

.causes-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
    margin-bottom: 1rem;
}

.causes-stat {
    padding: .9rem .95rem;
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgba(247, 252, 255, .98), rgba(240, 248, 252, .92));
    border: 1px solid rgba(15, 121, 194, .08);
}

.causes-stat__label {
    display: block;
    font-size: .76rem;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--raw-text-soft);
    margin-bottom: .42rem;
}

.causes-stat__value {
    display: block;
    color: var(--raw-title);
    font-size: 1rem;
    line-height: 1.35;
    font-weight: 800;
}

.causes-progress {
    margin-top: auto;
    padding: 1rem 1rem 1rem;
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgba(250, 253, 255, .98), rgba(241, 248, 252, .88));
    border: 1px solid rgba(15, 121, 194, .08);
}

.causes-progress__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .7rem;
    font-size: .94rem;
    font-weight: 800;
    color: var(--raw-title);
}

.causes-progress__track {
    position: relative;
    height: 9px;
    border-radius: var(--radius-pill);
    overflow: hidden;
    background: rgba(15, 121, 194, .10);
}

.causes-progress__fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--raw-primary-650), var(--raw-primary-500));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}

.causes-progress__caption {
    margin-top: .7rem;
    font-size: .84rem;
    line-height: 1.55;
    color: var(--raw-text-soft);
}

.causes-item__footer {
    margin-top: 1rem;
}

.causes-item__button {
    width: 100%;
    min-height: 52px;
}

/* =========================
     CTA box
     ========================= */
.raw-cta-box {
    overflow: hidden;
    padding: clamp(24px, 4vw, 36px);
    background:
        radial-gradient(circle at top left, rgba(102, 220, 237, .12), transparent 34%),
        radial-gradient(circle at right center, rgba(34, 199, 214, .10), transparent 26%),
        linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(250, 253, 255, .82));
}

.raw-cta-title {
    font-size: clamp(1.75rem, 3vw, 3rem);
    line-height: 1.02;
    max-width: 18ch;
    margin-bottom: .75rem;
    color: var(--raw-title);
}

.raw-cta-text {
    max-width: 72ch;
    line-height: 1.8;
    color: var(--raw-text);
    margin-bottom: 1.2rem;
}

.raw-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
}

/* =========================
     Social / tags
     ========================= */
.raw-social-bar {
    margin-top: 1.2rem;
}

.raw-social-box {
    padding: 1rem 1.1rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, .80), rgba(255, 255, 255, .64));
}

.raw-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}

.raw-tag {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 .95rem;
    border-radius: var(--radius-pill);
    background: rgba(20, 152, 219, .08);
    border: 1px solid rgba(20, 152, 219, .12);
    color: var(--raw-primary-800);
    font-size: .9rem;
    font-weight: 700;
}

.raw-tag:hover {
    background: rgba(20, 152, 219, .14);
    color: var(--raw-primary-800);
    transform: translateY(-1px);
}

.raw-social-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .7rem;
}

.raw-social-links a {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(15, 121, 194, .08);
    color: var(--raw-primary-800);
    box-shadow: var(--shadow-xs);
}

.raw-social-links a:hover {
    transform: translateY(-2px);
    background: var(--raw-primary-800);
    color: var(--raw-white);
    box-shadow: var(--shadow-sm);
}

/* =========================
     Subscribe
     ========================= */
.subscribe {
    position: relative;
    padding: clamp(72px, 8vw, 112px) 0;
    background:
        radial-gradient(circle at top left, rgba(102, 220, 237, .16), transparent 28%),
        radial-gradient(circle at 80% 20%, rgba(34, 199, 214, .12), transparent 22%),
        linear-gradient(135deg, rgba(11, 39, 66, .98) 0%, rgba(15, 95, 165, .96) 56%, rgba(20, 152, 219, .92) 100%);
    overflow: hidden;
}

.subscribe::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, 0)),
        radial-gradient(circle at center, rgba(255, 255, 255, .05), transparent 54%);
    pointer-events: none;
}

.subscribe__shell {
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: clamp(24px, 4vw, 38px);
    border-color: rgba(255, 255, 255, .14);
    background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .08));
    box-shadow: 0 26px 70px rgba(7, 24, 39, .18);
    backdrop-filter: var(--blur-md);
    -webkit-backdrop-filter: var(--blur-md);
}

.subscribe__shell::after {
    content: "";
    position: absolute;
    top: -60px;
    right: -40px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(167, 237, 247, .24), rgba(167, 237, 247, 0) 70%);
    filter: blur(8px);
    pointer-events: none;
}

.subscribe__content {
    margin-bottom: 1.35rem;
}

.subscribe__title {
    color: var(--raw-white);
    font-size: clamp(2rem, 4vw, 4rem);
    line-height: .98;
    max-width: 12ch;
    margin-bottom: .85rem;
}

.subscribe__text {
    max-width: 68ch;
    margin: 0;
    color: rgba(237, 247, 251, .9);
    line-height: 1.8;
    font-size: 1.02rem;
}

.subscribe-form {
    display: flex;
    align-items: center;
    gap: .9rem;
    width: 100%;
}

.subscribe-form__input {
    flex: 1;
    min-height: 58px;
    padding: 0 1.1rem 0 1.15rem;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .18);
    color: var(--raw-white);
    backdrop-filter: var(--blur-sm);
    -webkit-backdrop-filter: var(--blur-sm);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}

.subscribe-form__input::placeholder {
    color: rgba(235, 245, 250, .74);
}

.subscribe-form__input:focus {
    border-color: rgba(167, 237, 247, .5);
    background: rgba(255, 255, 255, .22);
}

.subscribe-form__submit {
    min-width: 172px;
    min-height: 58px;
    padding: 0 1.4rem;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(239, 250, 252, .92));
    color: var(--raw-primary-850);
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 14px 30px rgba(7, 24, 39, .14);
}

.subscribe-form__submit:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(245, 252, 253, .96));
}

/* =========================
     Search / toolbar
     ========================= */
.raw-section-head--campaigns {
    margin-bottom: 1.4rem;
}

.campaign-toolbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.6rem;
    padding: 1rem 1rem 1.05rem;
}

.campaign-search {
    flex: 1 1 580px;
}

.campaign-search__label {
    display: block;
    margin-bottom: .55rem;
    font-size: .84rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--raw-primary-800);
}

.campaign-search__field {
    position: relative;
}

.campaign-search__field>i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--raw-primary-650);
    font-size: .95rem;
    pointer-events: none;
}

.campaign-search__input {
    width: 100%;
    min-height: 56px;
    padding: 0 3.2rem 0 2.9rem;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(15, 121, 194, .12);
    background: rgba(255, 255, 255, .94);
    color: var(--raw-title);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}

.campaign-search__input::placeholder {
    color: var(--raw-text-soft);
}

.campaign-search__input:focus {
    outline: none;
    border-color: rgba(20, 152, 219, .30);
    box-shadow:
        0 0 0 4px rgba(34, 199, 214, .10),
        inset 0 1px 0 rgba(255, 255, 255, .8);
}

.campaign-search__clear {
    position: absolute;
    top: 50%;
    right: .5rem;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--raw-primary-800);
    cursor: pointer;
    opacity: .78;
}

.campaign-search__clear:hover {
    background: rgba(20, 152, 219, .10);
    opacity: 1;
}

.campaign-toolbar__meta {
    flex: 0 0 auto;
}

.campaign-results {
    min-height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    padding: 0 1.15rem;
    border-radius: var(--radius-pill);
    background: rgba(167, 237, 247, .42);
    border: 1px solid rgba(20, 152, 219, .12);
    color: var(--raw-primary-800);
    font-weight: 700;
    white-space: nowrap;
}

.campaign-results strong {
    margin: 0 .16rem;
    color: var(--raw-title-strong);
    font-weight: 800;
}

.campaign-col {
    transition: opacity .25s ease, transform .25s ease;
}

.campaign-col.is-hidden {
    display: none !important;
}

.campaign-empty-state {
    margin-top: .5rem;
}

/* =========================
     Utility
     ========================= */
.text-justify,
.justificarTextos {
    text-wrap: pretty;
}

.container {
    position: relative;
    z-index: 1;
}

/* =========================
     Entrance helpers
     ========================= */
.raw-reveal {
    opacity: 0;
    transform: translateY(18px);
    animation: rawReveal .9s var(--ease-smooth) forwards;
}

.raw-reveal--2 {
    animation-delay: .08s;
}

.raw-reveal--3 {
    animation-delay: .16s;
}

.raw-reveal--4 {
    animation-delay: .24s;
}

@keyframes rawReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes rawFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

@keyframes rawPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(34, 199, 214, 0);
    }

    50% {
        box-shadow: 0 0 0 10px rgba(34, 199, 214, 0);
    }
}

/* =========================
     Theme interference patch
     Prudente: no toca lógica, solo evita invasión visual
     ========================= */
.promo-primary,
#como-funciona,
#proyectos-red {
    z-index: 1;
}

.promo-primary+.raw-section,
.raw-section+.raw-section {
    position: relative;
}

/* =========================
     Large desktop
     ========================= */
@media (min-width: 1400px) {
    .promo-primary__subtitle {
        max-width: 68ch;
    }

    .cco-card,
    .tickets-step {
        padding: 1.7rem 1.55rem;
    }

    .causes-item__body {
        padding: 1.5rem 1.45rem 1.55rem;
    }
}

/* =========================
     Laptop / tablet landscape
     ========================= */
@media (max-width: 1199.98px) {
    .promo-primary {
        padding-top: 132px;
    }

    .promo-primary__title {
        max-width: 13.2ch;
    }

    .raw-title,
    .tickets-title,
    .subscribe__title {
        max-width: 14ch;
    }

    .tickets-steps::before {
        left: 10%;
        right: 10%;
    }
}

/* =========================
     Tablet
     ========================= */
@media (max-width: 991.98px) {
    :root {
        --section-space: clamp(64px, 7vw, 92px);
        --header-offset: 84px;
    }

    .promo-primary {
        padding-top: 118px;
        text-align: left;
    }

    .promo-primary__content {
        max-width: 100%;
    }

    .promo-primary__title,
    .promo-primary__subtitle {
        margin-left: 0;
        margin-right: 0;
    }

    .promo-primary__title {
        max-width: 13ch;
    }

    .promo-primary__subtitle {
        max-width: 60ch;
    }

    .promo-primary__actions {
        justify-content: flex-start;
    }

    .raw-widget {
        min-height: 100%;
    }

    .raw-title {
        max-width: 15ch;
    }

    .tickets-title {
        max-width: 14ch;
    }

    .tickets-steps {
        margin-top: 1.3rem;
    }

    .tickets-steps::before {
        display: none;
    }

    .raw-social-links {
        justify-content: flex-start;
    }

    .subscribe__title {
        max-width: 15ch;
    }

    .campaign-toolbar {
        align-items: stretch;
    }

    .campaign-toolbar__meta {
        width: 100%;
    }

    .campaign-results {
        width: 100%;
    }
}

/* =========================
     Mobile
     ========================= */
@media (max-width: 767.98px) {
    body {
        background:
            radial-gradient(circle at top, rgba(102, 220, 237, 0.16), transparent 26%),
            linear-gradient(180deg, #f6fbfe 0%, #f3f9fc 45%, #f8fcfe 100%);
    }

    .promo-primary {
        padding: 104px 0 54px;
    }

    .promo-primary .img--bg {
        opacity: .28;
        object-position: center;
    }

    .promo-primary__eyebrow {
        margin-bottom: 1rem;
    }

    .promo-primary__title {
        max-width: 100%;
        font-size: clamp(2.15rem, 10vw, 3.2rem);
        line-height: 1.02;
    }

    .promo-primary__subtitle {
        max-width: 100%;
        font-size: 1rem;
        line-height: 1.78;
    }

    .promo-primary__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .promo-primary__actions .raw-btn {
        width: 100%;
    }

    .raw-title {
        max-width: 100%;
        font-size: clamp(1.9rem, 9vw, 2.9rem);
    }

    .raw-subtitle {
        max-width: 100%;
        line-height: 1.75;
    }

    .cco-card {
        padding: 1.35rem 1.2rem 1.2rem;
    }

    .cco-icon-wrap {
        width: 56px;
        height: 56px;
        border-radius: 16px;
    }

    .tickets-shell {
        padding: 20px;
        border-radius: 24px;
    }

    .tickets-title {
        max-width: 100%;
        font-size: clamp(1.85rem, 9vw, 2.85rem);
    }

    .tickets-step {
        padding: 1.15rem 1rem 1rem;
    }

    .causes-item__img {
        min-height: 210px;
    }

    .causes-item__body {
        padding: 1.15rem 1.1rem 1.2rem;
    }

    .causes-stats {
        grid-template-columns: 1fr;
        gap: .7rem;
    }

    .raw-cta-box {
        padding: 22px 18px;
    }

    .raw-cta-title {
        max-width: 100%;
        font-size: clamp(1.7rem, 8vw, 2.4rem);
    }

    .raw-cta-actions {
        flex-direction: column;
    }

    .raw-cta-actions .raw-btn {
        width: 100%;
    }

    .raw-social-box {
        padding: .95rem;
    }

    .raw-tags {
        gap: .55rem;
    }

    .raw-tag {
        font-size: .86rem;
    }

    .subscribe {
        padding: 64px 0;
    }

    .subscribe__shell {
        padding: 20px 18px;
        border-radius: 24px;
    }

    .subscribe__title {
        max-width: 100%;
        font-size: clamp(1.9rem, 9vw, 3rem);
    }

    .subscribe-form {
        flex-direction: column;
        align-items: stretch;
    }

    .subscribe-form__submit {
        width: 100%;
        min-width: 0;
    }

    .campaign-toolbar {
        padding: .95rem;
        border-radius: 20px;
    }

    .campaign-search {
        flex-basis: 100%;
    }

    .campaign-search__input {
        min-height: 54px;
    }

    .campaign-results {
        min-height: 50px;
        white-space: normal;
        text-align: center;
        line-height: 1.4;
    }

    .causes-item__badge,
    .causes-item__status {
        max-width: calc(50% - 18px);
    }

    .causes-item__status {
        top: 14px;
        right: 14px;
        font-size: .7rem;
        padding: .36rem .75rem;
    }

    .causes-item__badge {
        top: 14px;
        left: 14px;
        font-size: .74rem;
        padding: .4rem .8rem;
    }
}

/* =========================
     Small mobile
     ========================= */
@media (max-width: 479.98px) {
    .promo-primary {
        padding-top: 96px;
    }

    .promo-primary__eyebrow,
    .raw-kicker,
    .tickets-kicker {
        font-size: .74rem;
        padding: .42rem .72rem;
    }

    .raw-widget {
        padding: 1rem .9rem .9rem;
    }

    .raw-widget__value {
        font-size: 1rem;
    }

    .causes-item__img {
        min-height: 190px;
    }

    .causes-item__badge,
    .causes-item__status {
        max-width: calc(50% - 16px);
    }

    .causes-meta__row {
        font-size: .94rem;
    }

    .subscribe-form__input,
    .subscribe-form__submit,
    .raw-btn,
    .btn-outline-primary {
        min-height: 52px;
    }
}

/* =========================
     Motion accessibility
     ========================= */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation: none !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }

    .causes-item:hover,
    .cco-card:hover,
    .tickets-step:hover,
    .raw-widget:hover,
    .raw-btn:hover,
    .btn-outline-primary:hover,
    .raw-social-links a:hover {
        transform: none !important;
    }
}