/* =====================================================
   CUIDEM EL PLANETA
   ===================================================== */

/* HERO */
.cu-hero { padding-top: calc(var(--header-h) + 1rem); padding-bottom: 0; }
.cu-hero-panel { text-align: center; padding: 2.5rem 2rem; }

/* ==================== 5R ANIMADES ==================== */
.five-r-hero {
    --five-r-size: 240px;
    position: relative;
    width: var(--five-r-size);
    height: var(--five-r-size);
    margin: 0 auto 1.5rem;
}

.five-r-ring {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    animation: five-r-spin 26s linear infinite;
    transform-origin: center center;
}

.five-r-moebius-wrap {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.five-r-moebius {
    width: 55%;
    object-fit: contain;
    animation: five-r-bounce 3.5s ease-in-out infinite;
}

@keyframes five-r-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes five-r-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}
.cu-hero-title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 900; color: var(--verde);
    margin-bottom: .5rem;
}
.cu-hero-sub {
    font-size: clamp(1.1rem, 2.5vw, 1.3rem);
    color: var(--muted); line-height: 1.7;
}

/* SECTION TITLES */
.cu-section-title {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 900; color: var(--verde);
    text-align: center; margin-bottom: .35rem;
}
.cu-section-sub {
    font-size: 1.1rem; color: var(--muted);
    text-align: center; margin-bottom: 2rem;
    max-width: 500px; margin-left: auto; margin-right: auto;
}

/* ==================== LES 5R ==================== */
.cu-5r { padding: 2rem 0; }

.cu-5r-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
}

.cu-5r-card {
    border-radius: 32px;
    padding: 2rem 1.5rem 1.75rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}

.cu-5r-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
}

.cu-5r-face {
    width: 72px;
    height: 72px;
    object-fit: contain;
    margin: 0 auto .5rem;
    transition: transform .25s ease;
}

.cu-5r-card:hover .cu-5r-face {
    transform: scale(1.08);
}

.cu-5r-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255,255,255,.9);
    font-size: .95rem; font-weight: 900;
    margin-bottom: .5rem;
}

.cu-5r-card h3 {
    font-size: 1.5rem; font-weight: 900;
    color: var(--white); margin-bottom: .5rem;
}

.cu-5r-card p {
    font-size: 1.05rem; color: rgba(255,255,255,.92);
    line-height: 1.6; margin-bottom: .6rem;
}

.cu-5r-example {
    display: block;
    font-size: .9rem; font-weight: 600;
    color: rgba(255,255,255,.7);
    font-style: italic; line-height: 1.5;
}

/* Colors per R */
.cu-5r-1 { background: #e53935; } .cu-5r-1 .cu-5r-num { color: #e53935; }
.cu-5r-2 { background: #FF9800; } .cu-5r-2 .cu-5r-num { color: #FF9800; }
.cu-5r-3 { background: #4DA3FF; } .cu-5r-3 .cu-5r-num { color: #4DA3FF; }
.cu-5r-4 { background: #8B5A2B; } .cu-5r-4 .cu-5r-num { color: #8B5A2B; }
.cu-5r-5 { background: #94bf20; } .cu-5r-5 .cu-5r-num { color: #94bf20; }

/* ==================== CONSELLS ==================== */
.cu-consells { padding: 1rem 0; }
.cu-consells-panel { padding: 2.5rem 2rem; }

.cu-consells-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.cu-consell {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; gap: .5rem;
    padding: 1.5rem 1.25rem;
    background: var(--bg); border-radius: var(--r-lg);
    aspect-ratio: 1;
    justify-content: center;
}

.cu-consell-icon { font-size: 2.2rem; line-height: 1; }
.cu-consell strong { font-size: 1.05rem; color: var(--text); display: block; }
.cu-consell p { font-size: .85rem; color: var(--muted); line-height: 1.45; }

/* ==================== REPTE ==================== */
.cu-repte { padding: 1rem 0; }

.cu-repte-panel {
    display: flex; align-items: center; gap: 2rem;
    padding: 2.5rem;
    background: var(--verde); color: var(--white);
    border-radius: var(--r-lg);
}

.cu-repte-char {
    width: 100px; height: 100px; object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,.2));
}

.cu-repte-content { flex: 1; }

.cu-repte-badge {
    display: inline-block;
    background: rgba(255,255,255,.2);
    font-size: .75rem; font-weight: 800;
    padding: .25rem .7rem; border-radius: var(--r-full);
    margin-bottom: .5rem;
}

.cu-repte-title {
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    font-weight: 900; margin-bottom: .5rem;
}

.cu-repte-text {
    font-size: 1.15rem; line-height: 1.6;
    margin-bottom: 1rem; opacity: .95;
}

.cu-repte-panel .btn-ghost {
    background: rgba(255,255,255,.15);
    color: var(--white);
    border-color: rgba(255,255,255,.3);
}
.cu-repte-panel .btn-ghost:hover {
    background: rgba(255,255,255,.3);
    border-color: rgba(255,255,255,.5);
}

/* ==================== CTA FINAL ==================== */
.cu-cta { padding: 1rem 0 2rem; }
.cu-cta-panel { text-align: center; padding: 2.5rem 2rem; }
.cu-cta-title { font-size: 1.6rem; font-weight: 900; color: var(--verde); margin-bottom: .35rem; }
.cu-cta-sub { font-size: 1.05rem; color: var(--muted); margin-bottom: 1.5rem; }
.cu-cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ==================== RESPONSIVE ==================== */
@media (max-width: 900px) {
    .cu-5r-grid { grid-template-columns: repeat(3, 1fr); }
    .cu-consells-grid { grid-template-columns: repeat(2, 1fr); }
    .cu-repte-panel { flex-direction: column; text-align: center; }
    .cu-repte-char { margin: 0 auto; }
}

@media (max-width: 600px) {
    .cu-5r-grid { grid-template-columns: 1fr; max-width: 320px; margin: 0 auto; }
    .cu-5r-card { padding: 1.25rem 1rem; }
    .cu-consells-grid { grid-template-columns: repeat(2, 1fr); }
    .cu-consell { aspect-ratio: auto; padding: 1rem 0.75rem; }
    .cu-cta-actions { flex-direction: column; align-items: stretch; }
}