/* ==========================================================================
   WASH · Agua, Saneamiento e Higiene — tema "tuberías y agua"
   Se carga solo en salud-wash-agua-saneamiento.html, después de linea-gs.css.
   Todo es CSS/SVG: no usa imágenes.
   ========================================================================== */

body.wa { --ac:#0E7FB8; --ac2:#38C6F4; --ac-osc:#022B3F; --ac-suave:#E4F6FD; }

/* ---------- Portada: agua profunda ---------- */
body.wa .ln-hero.gs {
    overflow: hidden;
    background:
        radial-gradient(760px 500px at 82% 18%, rgba(56,198,244,.42), transparent 70%),
        radial-gradient(620px 440px at 10% 92%, rgba(14,127,184,.75), transparent 70%),
        linear-gradient(168deg, #022B3F 0%, #054E6C 52%, #0E7FB8 100%);
}
body.wa .ln-hero.gs::before {
    width: 420px; height: 420px; left: -90px; top: 40px;
    background: radial-gradient(circle at 35% 35%, rgba(120,225,255,.32), transparent 68%);
}
body.wa .ln-hero.gs::after {
    width: 300px; height: 300px; right: 16%; bottom: -50px;
    background: radial-gradient(circle at 40% 40%, rgba(160,240,255,.25), transparent 70%);
}

/* Medalla = medidor de agua */
body.wa .gs-medalla { overflow: hidden; }
body.wa .gs-medalla::before {
    content: ""; position: absolute; left: -10%; right: -10%; bottom: 0; height: 46%;
    background: linear-gradient(180deg, rgba(90,215,255,.55), rgba(10,110,160,.85));
    border-radius: 45% 45% 0 0 / 22% 22% 0 0;
    animation: waNivel 7s ease-in-out infinite;
}
body.wa .gs-medalla span { position: relative; z-index: 2; }
@keyframes waNivel { 50% { height: 52%; } }

/* Olas */
.wa-olas { position: absolute; left: 0; right: 0; bottom: 40px; height: 130px; overflow: hidden; pointer-events: none; z-index: 1; }
.wa-olas svg { position: absolute; bottom: 0; left: 0; width: 200%; height: 110px; animation: waFluye 20s linear infinite; }
.wa-olas svg:nth-child(2) { height: 78px; animation-duration: 28s; animation-direction: reverse; }
@keyframes waFluye { to { transform: translateX(-50%); } }

/* Burbujas */
.wa-b {
    position: absolute; bottom: -30px; z-index: 1; pointer-events: none; border-radius: 50%;
    background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.95), rgba(190,240,255,.18) 62%, transparent 70%);
    border: 1px solid rgba(255,255,255,.4);
    animation: waSube linear infinite;
}
@keyframes waSube {
    0%   { transform: translateY(0) scale(.6); opacity: 0; }
    18%  { opacity: .9; }
    100% { transform: translateY(-520px) scale(1.15); opacity: 0; }
}

/* ---------- Tubería entre secciones ---------- */
.wa-tubo { position: relative; width: 100%; height: 46px; margin: -10px auto -26px; max-width: 1160px; padding: 0 1.5rem; z-index: 3; }
.wa-tubo i {
    position: absolute; left: 1.5rem; right: 1.5rem; top: 17px; height: 12px; border-radius: 8px;
    background: linear-gradient(#f0faff, #c8e8f7 46%, #94cde5 54%, #dcf3fc);
    box-shadow: inset 0 -3px 0 rgba(6,60,90,.1), 0 8px 16px rgba(6,60,90,.14);
}
.wa-tubo i::before, .wa-tubo i::after {
    content: ""; position: absolute; top: -4px; width: 12px; height: 20px; border-radius: 3px;
    background: linear-gradient(#c6e7f6, #8ec9e2);
}
.wa-tubo i::before { left: -6px; } .wa-tubo i::after { right: -6px; }
.wa-tubo::after {
    content: ""; position: absolute; left: 50%; top: 44px; width: 9px; height: 12px; margin-left: -4.5px;
    border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
    background: linear-gradient(#8fe4ff, #0E7FB8);
    animation: waGotea 3.6s ease-in infinite;
}
@keyframes waGotea {
    0%, 55% { opacity: 0; transform: translateY(-8px) scale(.6); }
    65%     { opacity: 1; }
    100%    { opacity: 0; transform: translateY(26px) scale(1); }
}
.wa-tubo b {
    position: absolute; left: 50%; top: 0; width: 46px; height: 46px; margin-left: -23px; border-radius: 50%;
    background: repeating-conic-gradient(#6fb8d6 0 9deg, #f2fbff 9deg 40deg);
    box-shadow: 0 8px 16px rgba(6,60,90,.22), inset 0 0 0 7px #eaf7fd, inset 0 0 0 9px #9fd3ea;
    animation: waGira 16s linear infinite;
}
@keyframes waGira { to { transform: rotate(360deg); } }

/* ---------- Tarjetas como tramos de tubería ---------- */
body.wa .ln-linea {
    border: 2px solid #d5ecf7;
    border-top: 8px solid var(--ac);
    box-shadow: 0 10px 26px rgba(6,60,90,.09);
}
body.wa .ln-linea:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(6,60,90,.18); }
body.wa .ln-linea-num { color: #c6e6f5; }
body.wa .ln-linea li::before { background: var(--ac2); }
body.wa .ln-titulo::after { background: linear-gradient(90deg, var(--ac2), var(--ac)); }

/* ---------- Pasos unidos por una tubería ---------- */
@media (min-width: 860px) {
    body.wa .ln-pasos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
    body.wa .ln-paso { padding: 2.4rem 1rem 1.4rem; }
}
body.wa .ln-pasos { position: relative; }
body.wa .ln-pasos::before {
    content: ""; position: absolute; left: 5%; right: 5%; top: -3px; height: 8px; border-radius: 6px;
    background: linear-gradient(#e8f7fe, #a9d6ea);
    box-shadow: 0 3px 6px rgba(6,60,90,.08);
    z-index: 0;
}
body.wa .ln-paso { z-index: 1; border: 2px solid #e2f2fa; }
body.wa .ln-paso::before { box-shadow: 0 8px 18px rgba(6,60,90,.25), 0 0 0 5px #fff; }

/* ---------- Reto: tanque de agua ---------- */
body.wa .reto-panel { background: linear-gradient(#f8fdff, #e8f6fd); border-color: #cfeeff; }
body.wa .reto-lista label { border-color: #dceff8; }
body.wa .reto-lista label:hover { background: #f1faff; }

/* ---------- Cierre bajo el agua ---------- */
body.wa .ln-cta { position: relative; overflow: hidden; }
body.wa .ln-cta::before {
    content: ""; position: absolute; inset: auto -10% -60px; height: 130px;
    background: radial-gradient(60% 100% at 50% 100%, rgba(120,225,255,.35), transparent 70%);
    pointer-events: none;
}

/* ---------- Detalles ---------- */
body.wa .ln-destacado { background: linear-gradient(150deg, #022B3F, #0E7FB8); }
body.wa .ln-destacado::after { background: rgba(120,225,255,.18); }
body.wa .dx-marquee { background: linear-gradient(90deg, #022B3F, #0E7FB8 50%, #022B3F); }

@media (max-width: 900px) {
    .wa-olas { height: 96px; bottom: 34px; }
    body.wa .ln-pasos::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .wa-b, .wa-olas svg, .wa-tubo b, body.wa .gs-medalla::before { animation: none !important; }
}