/* ==========================================================================
   PROMOCIÓN DE LA SALUD Y PREVENCIÓN · tema "plato saludable y vida sana"
   Solo CSS/SVG. Se carga únicamente en salud-promocion-prevencion.html
   ========================================================================== */

body.promo { --ac:#1E9E63; --ac2:#6FD08C; --ac-osc:#07301F; --ac-suave:#E8F8EF; }

/* ---------- Portada ---------- */
body.promo .ln-hero.gs {
    overflow: hidden;
    background:
        radial-gradient(700px 480px at 86% 16%, rgba(111,208,140,.45), transparent 70%),
        radial-gradient(520px 400px at 6% 92%, rgba(245,166,35,.22), transparent 70%),
        linear-gradient(165deg, #07301F 0%, #0F5C3A 55%, #1E9E63 100%);
}
body.promo .ln-hero.gs::before {
    width: 400px; height: 400px; left: -90px; top: 20px;
    background: radial-gradient(circle at 35% 35%, rgba(190,255,214,.22), transparent 68%);
}
body.promo .ln-hero.gs::after {
    width: 280px; height: 280px; right: 20%; bottom: -60px;
    background: radial-gradient(circle at 40% 40%, rgba(255,225,160,.2), transparent 70%);
}

/* Frutas flotando */
.pr-fruta {
    position: absolute; z-index: 1; pointer-events: none;
    display: grid; place-items: center;
    width: 54px; height: 54px; border-radius: 50%;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.28);
    box-shadow: 0 10px 24px rgba(4,40,24,.3);
    animation: prFlota 8s ease-in-out infinite;
}
.pr-fruta span { font-size: 1.65rem; line-height: 1; }
@keyframes prFlota {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50%      { transform: translateY(-16px) rotate(6deg); }
}

body.promo .gs-medalla::before {
    content: ""; position: absolute; inset: 10%; border-radius: 50%;
    background: radial-gradient(circle at 45% 40%, rgba(200,255,215,.35), transparent 70%);
}

/* ---------- Sección del plato ---------- */
body.promo .pr-pausa { background: linear-gradient(180deg, #F7FCF9, #EBF7F0); }
.pr-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 1.6rem; align-items: stretch; margin-top: 2.2rem; }
.pr-card {
    background: #fff; border: 2px solid #DFF1E6; border-radius: 26px; padding: 1.6rem;
    box-shadow: 0 14px 32px rgba(7,48,31,.08);
}
.pr-card h3 { margin: 0 0 .3rem; font: 800 1.15rem 'Poppins','Inter',sans-serif; color: #07301F; }
.pr-card > p { margin: 0 0 .8rem; color: #5A6E63; font-size: .94rem; }

.pr-plato { display: grid; place-items: center; }
.pr-plato svg { width: 100%; max-width: 330px; height: auto; display: block; filter: drop-shadow(0 16px 26px rgba(7,48,31,.16)); }
.pr-plato svg g { transition: opacity .3s ease, transform .3s ease; transform-origin: 100px 100px; cursor: pointer; }
.pr-plato.dim svg g:not(.on) { opacity: .32; }
.pr-plato svg g.on { transform: scale(1.04); }

.pr-leyenda { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; margin-top: .9rem; }
.pr-chip {
    border: 2px solid #DFF1E6; background: #F5FBF7; color: #24523B; cursor: pointer;
    font: 700 .86rem 'Inter',sans-serif; padding: .45rem .8rem; border-radius: 999px;
    transition: background .2s, border-color .2s, transform .2s;
}
.pr-chip:hover { transform: translateY(-2px); background: #EAF8EF; }
.pr-chip[aria-pressed="true"] { background: #fff; border-color: var(--ac); box-shadow: 0 6px 14px rgba(30,158,99,.18); }
.pr-chip i { font-style: normal; margin-right: .3rem; }

.pr-tip {
    margin-top: 1rem; padding: .9rem 1rem; border-radius: 14px; min-height: 62px;
    background: #F1FAF4; border-left: 5px solid var(--ac);
    color: #3D5A4A; font-size: .92rem; line-height: 1.55;
}
.pr-tip strong { color: var(--ac); }

/* Vasos de agua */
.pr-vasos { display: flex; gap: .45rem; justify-content: center; margin: .6rem 0 1rem; }
.pr-vaso {
    position: relative; width: 30px; height: 46px; overflow: hidden; cursor: pointer;
    border: 2px solid #C6E6D4; border-radius: 4px 4px 11px 11px; background: #fff;
    transition: transform .2s, border-color .2s;
}
.pr-vaso:hover { transform: translateY(-3px); border-color: var(--ac2); }
.pr-vaso::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0;
    background: linear-gradient(#A6E3F7, #3FA9DC);
    transition: height .35s ease;
}
.pr-vaso.on { border-color: #3FA9DC; }
.pr-vaso.on::after { height: 100%; }
.pr-agua-msg { text-align: center; font-size: .92rem; color: #3D5A4A; min-height: 44px; line-height: 1.5; }
.pr-card .juv-btn.sec { display: block; margin: 0 auto; }
body.promo .juv-btn.sec { border-color: #C6E6D4; color: #1E7A4F; }

/* ---------- Qué trabajamos ---------- */
.pr-temas { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: 1.1rem; margin-top: 2rem; }
.pr-tema {
    background: #fff; border: 2px solid #E4F3EA; border-radius: 20px; padding: 1.3rem 1.2rem;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pr-tema:hover { transform: translateY(-4px); border-color: var(--ac2); box-shadow: 0 14px 28px rgba(7,48,31,.12); }
.pr-tema .i {
    display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: .7rem;
    font-size: 1.5rem; border-radius: 14px; background: #EAF8EF;
}
.pr-tema h3 { margin: 0 0 .35rem; font: 800 1.02rem 'Poppins','Inter',sans-serif; color: #123A28; }
.pr-tema p { margin: 0; font-size: .9rem; line-height: 1.55; color: #5A6E63; }

/* ---------- Mito o verdad ---------- */
body.promo .pr-quiz-sec { background: linear-gradient(180deg, #fff, #F4FBF7); }
.pr-quiz { max-width: 780px; margin: 2rem auto 0; }
.pr-item {
    background: #fff; border: 2px solid #E4F3EA; border-radius: 18px;
    padding: 1.1rem 1.2rem; margin-bottom: .8rem;
    transition: border-color .25s, background .25s;
}
.pr-item.ok { border-color: #6FD08C; background: #F4FCF7; }
.pr-item.no { border-color: #F0B9A9; background: #FFF7F4; }
.pr-preg { margin: 0; font-weight: 700; color: #173D2B; font-size: .98rem; }
.pr-botones { display: flex; gap: .5rem; margin-top: .7rem; }
.pr-btn {
    border: 2px solid #DFF1E6; background: #F5FBF7; color: #24523B; cursor: pointer;
    font: 700 .84rem 'Inter',sans-serif; padding: .42rem .9rem; border-radius: 10px;
    transition: background .2s, border-color .2s;
}
.pr-btn:hover:not(:disabled) { background: #EAF8EF; border-color: var(--ac2); }
.pr-btn:disabled { cursor: default; opacity: .55; }
.pr-item.ok .pr-btn.elegido { background: #1E9E63; border-color: #1E9E63; color: #fff; opacity: 1; }
.pr-item.no .pr-btn.elegido { background: #E0715A; border-color: #E0715A; color: #fff; opacity: 1; }
.pr-fb { display: none; margin: .7rem 0 0; font-size: .9rem; line-height: 1.55; color: #4A5F54; }
.pr-item.respondido .pr-fb { display: block; }
.pr-fb strong { color: inherit; }
.pr-marcador { text-align: center; margin-top: 1.2rem; font-weight: 700; color: #173D2B; }

/* ---------- Ajustes ---------- */
body.promo .ln-linea { border-top-color: var(--ac); }
body.promo .ln-linea li::before, body.promo .ln-paso::before { background: var(--ac); }
body.promo .ln-titulo::after { background: linear-gradient(90deg, var(--ac2), var(--ac)); }
body.promo .ln-cta { background: linear-gradient(150deg, #07301F, #1E9E63 70%, #6FD08C 140%); }
body.promo .ln-destacado { background: linear-gradient(150deg, #07301F, #1E9E63); }
body.promo .dx-marquee { background: linear-gradient(90deg, #07301F, #1E9E63 50%, #07301F); }

@media (max-width: 900px) {
    .pr-grid { grid-template-columns: 1fr; }
    .pr-fruta { width: 44px; height: 44px; }
    .pr-fruta span { font-size: 1.3rem; }
    .pr-vaso { width: 26px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
    .pr-fruta { animation: none; }
}