/* ==========================================================================
   SMAPS · Salud Mental y Apoyo Psicosocial
   Tema "emociones y terapia": burbujas, latido, respiración y selector de ánimo.
   Solo CSS/SVG, sin imágenes.
   ========================================================================== */

body.smaps { --ac:#6D3FA8; --ac2:#C39BEE; --ac-osc:#2A1140; --ac-suave:#F3ECFB; }

/* ---------- Portada ---------- */
body.smaps .ln-hero.gs {
    overflow: hidden;
    background:
        radial-gradient(760px 520px at 84% 18%, rgba(195,155,238,.5), transparent 70%),
        radial-gradient(560px 420px at 8% 88%, rgba(240,160,190,.32), transparent 70%),
        radial-gradient(420px 320px at 55% 108%, rgba(130,220,200,.28), transparent 70%),
        linear-gradient(165deg, #2A1140 0%, #4B2472 55%, #6D3FA8 100%);
}
body.smaps .ln-hero.gs::before {
    width: 380px; height: 380px; left: -70px; top: 30px;
    background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.22), transparent 68%);
}
body.smaps .ln-hero.gs::after {
    width: 260px; height: 260px; right: 22%; bottom: -40px;
    background: radial-gradient(circle at 40% 40%, rgba(250,190,215,.25), transparent 70%);
}

/* Emociones flotando */
.sm-emoji {
    position: absolute; z-index: 1; pointer-events: none;
    display: grid; place-items: center;
    width: 56px; height: 56px; border-radius: 50%;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.3);
    box-shadow: 0 10px 26px rgba(30,10,50,.28);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    animation: smFlota 9s ease-in-out infinite;
}
.sm-emoji span { font-size: 1.7rem; line-height: 1; }
@keyframes smFlota {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50%      { transform: translateY(-18px) rotate(5deg); }
}

/* Medalla: corazón con latido */
body.smaps .gs-medalla::before {
    content: ""; position: absolute; inset: 12%; border-radius: 50%;
    background: radial-gradient(circle at 50% 55%, rgba(255,190,215,.45), transparent 68%);
    animation: smLate 2.6s ease-in-out infinite;
}
@keyframes smLate {
    0%, 100% { transform: scale(1); opacity: .8; }
    18%      { transform: scale(1.12); opacity: 1; }
    36%      { transform: scale(1); opacity: .8; }
}
body.smaps .gs-medalla span { position: relative; z-index: 2; }

/* ---------- Separador: latido ---------- */
.sm-pulso { display: grid; place-items: center; height: 54px; margin: -14px 0 -20px; }
.sm-pulso svg { width: min(520px, 70%); height: 44px; overflow: visible; }
.sm-pulso path {
    fill: none; stroke: var(--ac2); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 260; stroke-dashoffset: 260;
    animation: smPulso 3.4s linear infinite;
}
@keyframes smPulso { to { stroke-dashoffset: -260; } }

/* ---------- Sección de pausa emocional ---------- */
body.smaps .sm-pausa { background: linear-gradient(180deg, #FBF7FF, #F4ECFB); }

.sm-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 2rem; align-items: stretch; margin-top: 2.4rem; }
.sm-panel {
    background: #fff; border: 2px solid #EADFF8; border-radius: 26px; padding: 1.8rem;
    box-shadow: 0 14px 34px rgba(70,30,110,.08);
}
.sm-panel h3 { margin: 0 0 .4rem; font: 800 1.15rem 'Poppins','Inter',sans-serif; color: #2A1140; }
.sm-panel p { margin: 0 0 1rem; color: #6B5B7A; font-size: .95rem; }

.sm-emociones { display: flex; flex-wrap: wrap; gap: .6rem; }
.sm-emo {
    display: flex; align-items: center; gap: .45rem;
    padding: .55rem .9rem .55rem .65rem; border-radius: 999px; cursor: pointer;
    font: 700 .92rem 'Inter',sans-serif; color: #4A3A5C;
    background: #F7F2FD; border: 2px solid transparent;
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.sm-emo span { font-size: 1.25rem; line-height: 1; }
.sm-emo:hover { transform: translateY(-2px); background: #F1E7FC; }
.sm-emo[aria-pressed="true"] { background: #fff; border-color: var(--ac); box-shadow: 0 6px 16px rgba(109,63,168,.18); }

.sm-respuesta {
    margin: 1.2rem 0 0; padding: 1rem 1.1rem; border-radius: 16px;
    background: #F7F2FD; border-left: 5px solid var(--ac2);
    color: #4A3A5C; font-size: .95rem; line-height: 1.6; min-height: 64px;
}
.sm-respuesta strong { color: var(--ac); }

/* Respiración */
.sm-respira { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.sm-anillo {
    position: relative; display: grid; place-items: center;
    width: 190px; height: 190px; margin: .4rem 0 1rem; border-radius: 50%;
    background: radial-gradient(circle at 50% 45%, rgba(150,96,214,.95), rgba(109,63,168,.55) 72%);
    box-shadow: 0 16px 34px rgba(70,30,110,.25);
    animation: smRespira 14s ease-in-out infinite;
}
.sm-anillo::before, .sm-anillo::after {
    content: ""; position: absolute; inset: -14px; border-radius: 50%;
    border: 1px solid rgba(109,63,168,.25);
    animation: smOnda 14s ease-out infinite;
}
.sm-anillo::after { inset: -30px; animation-delay: 1.2s; }
.sm-anillo b { font: 800 1.05rem 'Poppins','Inter',sans-serif; color: #fff; letter-spacing: .02em; }
@keyframes smRespira {
    0%, 100% { transform: scale(.86); }
    28%      { transform: scale(1.1); }
    50%      { transform: scale(1.1); }
    78%      { transform: scale(.86); }
}
@keyframes smOnda {
    0%   { transform: scale(.9); opacity: .7; }
    60%  { transform: scale(1.18); opacity: 0; }
    100% { transform: scale(1.18); opacity: 0; }
}
.sm-respira small { color: #6B5B7A; font-size: .88rem; line-height: 1.5; }

/* ---------- Tarjetas suaves ---------- */
body.smaps .ln-linea {
    border: 2px solid #EFE6FA; border-top: 8px solid var(--ac);
    border-radius: 24px; background: linear-gradient(180deg, #fff, #FBF7FF);
    box-shadow: 0 12px 28px rgba(70,30,110,.08);
}
body.smaps .ln-linea:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(70,30,110,.16); }
body.smaps .ln-linea-num { color: #E4D6F7; }
body.smaps .ln-linea-icono { border-radius: 18px; }
body.smaps .ln-linea li::before { background: var(--ac2); }

/* ---------- Consejos que giran ---------- */
body.smaps .r3-frente { background: linear-gradient(150deg, #6D3FA8, #3A1A5C); }
body.smaps .r3-dorso { border-color: #D9C4F2; }

/* ---------- Reto ---------- */
body.smaps .reto-panel { background: linear-gradient(#FBF7FF, #F2E9FB); border-color: #E2D2F5; }
body.smaps .reto-lista label { border-color: #EADFF8; }
body.smaps .reto-lista label:hover { background: #F8F2FE; }

/* ---------- Cierre ---------- */
body.smaps .ln-cta { background: linear-gradient(150deg, #2A1140, #6D3FA8 65%, #C39BEE 140%); }
body.smaps .ln-destacado { background: linear-gradient(150deg, #2A1140, #6D3FA8); }
body.smaps .ln-titulo::after { background: linear-gradient(90deg, var(--ac2), var(--ac)); }
body.smaps .dx-marquee { background: linear-gradient(90deg, #2A1140, #6D3FA8 50%, #2A1140); }

@media (max-width: 900px) {
    .sm-grid { grid-template-columns: 1fr; }
    .sm-anillo { width: 160px; height: 160px; }
    .sm-emoji { width: 44px; height: 44px; }
    .sm-emoji span { font-size: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
    .sm-emoji, .sm-anillo, .sm-anillo::before, .sm-anillo::after,
    body.smaps .gs-medalla::before, .sm-pulso path { animation: none; }
    .sm-pulso path { stroke-dashoffset: 0; }
}