/* ============================================================================
   Watuy.Web — identidad develpoint: azul noche, magenta manda, cyan informa,
   verde confirma. Tipografia Nunito (marca) + Nunito Sans (texto).
   ============================================================================ */
:root {
    --noche: #0E1526; --noche2: #0A0F1C; --panel: #141D33; --linea: #22304F;
    --magenta: #FF2D96; --cian: #35E0FF; --verde: #3BE596;
    --tinta: #F4F7FF; --tenue: #8FA0BD;
}

* { box-sizing: border-box; }
body {
    margin: 0; background: var(--noche2); color: var(--tinta);
    font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 16px; line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
.contenedor { max-width: 1040px; margin: 0 auto; padding: 0 28px; }
.fila { display: flex; align-items: center; justify-content: space-between; }

/* --- Cabecera --------------------------------------------------------------- */
.cabecera {
    border-bottom: 1px solid var(--linea);
    background: linear-gradient(90deg, #35E0FF, #FF1F8F) top/100% 3px no-repeat, var(--noche2);
    padding: 17px 0 14px;
}
.marca { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--tinta); }
.palabra { font-family: Nunito, sans-serif; font-weight: 900; font-size: 25px; letter-spacing: -.02em; }
.palabra i, .pie b i { font-style: normal; color: var(--magenta); }
.lema { font-family: Nunito, sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .26em; color: var(--tenue); }

/* --- Heroe ------------------------------------------------------------------ */
.heroe {
    position: relative; overflow: hidden; padding: 92px 0 84px;
    background: radial-gradient(900px 420px at 80% -10%, #1A2547 0%, transparent 60%), var(--noche2);
}
.quipu { position: absolute; top: 0; right: 0; height: 100%; width: 42%; opacity: .5; pointer-events: none; }
.heroe h1 {
    font-family: Nunito, sans-serif; font-weight: 900; font-size: clamp(34px, 5vw, 52px);
    line-height: 1.12; margin: 0 0 18px; max-width: 15ch; text-wrap: balance;
}
.bajada { color: var(--tenue); max-width: 52ch; font-size: 17px; margin: 0 0 26px; }
.acciones { display: flex; gap: 14px; align-items: center; }

.chip {
    display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600;
    border: 1px solid var(--linea); border-radius: 22px; padding: 8px 16px; color: var(--tenue);
    background: var(--panel);
}
.chip .punto { width: 9px; height: 9px; border-radius: 50%; background: var(--tenue); }
.chip.vivo { color: var(--verde); border-color: #1E4A36; }
.chip.vivo .punto { background: var(--verde); box-shadow: 0 0 10px var(--verde); }
.chip.caido { color: #FF7A8C; border-color: #55232B; }
.chip.caido .punto { background: #FF7A8C; }

/* --- Botones ---------------------------------------------------------------- */
.boton-magenta {
    display: inline-block; background: var(--magenta); color: #fff; text-decoration: none;
    font-family: Nunito, sans-serif; font-weight: 800; font-size: 15px;
    padding: 12px 26px; border-radius: 10px; box-shadow: 0 6px 24px rgba(255, 45, 150, .35);
    transition: transform .12s ease, box-shadow .12s ease;
}
.boton-magenta:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(255, 45, 150, .45); }
.boton-borde {
    display: inline-block; color: var(--tinta); text-decoration: none;
    font-family: Nunito, sans-serif; font-weight: 700; font-size: 15px;
    padding: 11px 24px; border-radius: 10px; border: 1px solid var(--linea);
}
.boton-borde:hover { background: var(--panel); }
.boton-whatsapp {
    display: inline-flex; align-items: center; gap: 9px;
    background: #25D366; color: #06301A; text-decoration: none;
    font-family: Nunito, sans-serif; font-weight: 800; font-size: 15px;
    padding: 12px 22px; border-radius: 10px;
    transition: transform .12s ease, box-shadow .12s ease;
}
.boton-whatsapp:hover { transform: translateY(-1px); box-shadow: 0 8px 26px rgba(37, 211, 102, .35); }

/* --- Bloques de contenido --------------------------------------------------- */
.bloque { border-top: 1px solid var(--linea); padding: 68px 0 72px; }
.bloque.alterno { background: #0C1220; }
.ojal {
    font-family: Nunito, sans-serif; font-weight: 800; font-size: 12px;
    letter-spacing: .24em; text-transform: uppercase; color: var(--cian); margin-bottom: 12px;
}
.bloque h2, .cierre h2 {
    font-family: Nunito, sans-serif; font-weight: 900; font-size: clamp(26px, 3.4vw, 36px);
    margin: 0 0 16px; text-wrap: balance;
}
.parrafo { color: var(--tenue); max-width: 68ch; font-size: 16.5px; }
.parrafo strong, .paso p strong { color: var(--tinta); }
.contenedor.angosto { max-width: 780px; }

.rejilla.tres { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-top: 28px; }
.rejilla.cuatro { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-top: 28px; }

.dolor {
    background: var(--panel); border: 1px solid var(--linea); border-radius: 14px;
    padding: 18px 20px; color: var(--tenue); font-size: 14.5px; display: flex; gap: 12px;
}
.dolor span { font-size: 20px; flex: none; }
.parrafo.solucion {
    margin-top: 28px; border-left: 3px solid var(--verde);
    padding: 6px 0 6px 18px; color: var(--tinta); font-size: 16px;
}
.parrafo.solucion strong { color: var(--verde); }

/* La palabra Watuy en texto corrido: siempre con el "uy" magenta. */
.wt { font-family: Nunito, sans-serif; font-weight: 800; color: var(--tinta); }
.wt i { font-style: normal; color: var(--magenta); }

.pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; margin-top: 30px; }
.paso { background: var(--panel); border: 1px solid var(--linea); border-radius: 16px; padding: 24px 22px; }
.paso .num {
    font-family: Nunito, sans-serif; font-weight: 900; font-size: 15px; color: #fff;
    width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #35E0FF, #FF1F8F); margin-bottom: 14px;
}
.paso h3 { font-family: Nunito, sans-serif; font-weight: 800; font-size: 16.5px; margin: 0 0 6px; }
.paso p { color: var(--tenue); font-size: 14px; margin: 0; }

.carta { background: var(--panel); border: 1px solid var(--linea); border-radius: 14px; padding: 20px; }
.carta h4 { font-family: Nunito, sans-serif; font-weight: 800; font-size: 15px; margin: 0 0 6px; }
.carta p { color: var(--tenue); font-size: 13.5px; margin: 0; }
.carta code { font-family: Consolas, monospace; color: var(--cian); font-size: 12.5px; }

.perfil { border-left: 3px solid var(--magenta); padding: 4px 0 4px 20px; }
.perfil:nth-child(2) { border-color: var(--cian); }
.perfil:nth-child(3) { border-color: var(--verde); }
.perfil h3 { font-family: Nunito, sans-serif; font-weight: 800; font-size: 17px; margin: 0 0 6px; }
.perfil p { color: var(--tenue); font-size: 14.5px; margin: 0; }

.historia { background: radial-gradient(700px 300px at 50% 0%, #1A2547 0%, transparent 65%), var(--noche2); }

/* --- Cierre ------------------------------------------------------------------ */
.cierre { border-top: 1px solid var(--linea); padding: 76px 0 84px; }
.centro { text-align: center; }
.centro-t { margin: 0 auto 26px; }
.centro-a { justify-content: center; }
.mini { color: #5B6B8C; font-size: 13.5px; margin-top: 30px; }
.mini b { font-family: Nunito, sans-serif; font-weight: 900; color: var(--tinta); }
.mini b i { font-style: normal; color: #ff2bbd; }

/* --- Las piezas ------------------------------------------------------------- */
.piezas { border-top: 1px solid var(--linea); padding: 56px 0 72px; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.pieza { background: var(--panel); border: 1px solid var(--linea); border-radius: 16px; padding: 24px 22px; }
.pieza h3 {
    font-family: Nunito, sans-serif; font-weight: 800; font-size: 17px; margin: 0 0 8px;
    display: flex; align-items: center; gap: 10px;
}
.pieza p { color: var(--tenue); font-size: 14.5px; margin: .4em 0 0; }
.pieza .nota { font-size: 13px; color: #5B6B8C; }
.pieza code { font-family: Consolas, monospace; color: var(--cian); font-size: 13px; }
.nodo { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.nodo.cian { background: var(--cian); } .nodo.verde { background: var(--verde); } .nodo.magenta { background: var(--magenta); }

/* --- Pie -------------------------------------------------------------------- */
.pie { border-top: 1px solid var(--linea); padding: 26px 0 30px; color: #5B6B8C; font-size: 13.5px; }
.pie b { font-family: Nunito, sans-serif; font-weight: 900; color: var(--tinta); }
.pie b i { font-style: normal; color: #ff2bbd; }   /* el magenta oficial develpoint */
.dp { display: inline-flex; align-items: center; gap: 9px; }
.dp-x { width: 21px; height: 21px; }