/* Portada · Herramientas gratis (Calculadora LOPD-IA e Interruptómetro) con protagonismo */
.w6-herr { padding: 110px 0; overflow: hidden; background: radial-gradient(80% 90% at 20% 0%, #1B3D63 0%, var(--tinta-3) 60%); }
.w6-luz { position: absolute; width: 640px; height: 640px; right: -160px; bottom: -220px; background: radial-gradient(circle, rgba(77,141,255,.22), transparent 65%); pointer-events: none; }
.w6-cab { display: grid; gap: 14px; max-width: 760px; margin-bottom: 44px; }
.w6-cab h2 span { color: #8DB6FF; }
.w6-rej { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.w6-t { position: relative; display: grid; gap: 14px; align-content: start; padding: 28px; border-radius: 22px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); text-decoration: none; color: #D5DFE8; transition: transform .3s var(--ease), border-color .3s, background .3s, box-shadow .3s; }
.w6-t:hover { transform: translateY(-6px); border-color: rgba(141,182,255,.6); background: rgba(77,141,255,.08); box-shadow: 0 30px 70px rgba(0,0,0,.35); }
.w6-t h3 { color: #fff; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; }
.w6-t p { font-size: 16px; line-height: 25px; color: #AFC0CF; }
.w6-t .btn { justify-self: start; }
.w6-tag { justify-self: start; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; background: rgba(180,35,54,.18); color: #FF9AA8; animation: w6-late 2s ease-in-out infinite; }
.w6-tag-fuga { background: rgba(198,138,0,.2); color: #FFD27A; }
@keyframes w6-late { 50% { opacity: .55; } }

.w6-viz { background: #fff; border-radius: 16px; padding: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: center; min-height: 190px; }
/* Semáforo de riesgo */
.w6-gauge { width: 100%; max-width: 220px; }
.w6-gauge path { fill: none; stroke-width: 16; stroke-linecap: round; }
.g-fondo { stroke: #E7ECF1; } .g-v { stroke: #2E9E6A; } .g-a { stroke: #E3A21A; } .g-r { stroke: #D23A4E; }
.g-aguja { transform-origin: 100px 100px; animation: w6-aguja 5s var(--ease) infinite; }
.g-aguja line { stroke: var(--tinta); stroke-width: 5; stroke-linecap: round; }
.g-aguja circle { fill: var(--tinta); }
@keyframes w6-aguja { 0% { transform: rotate(-80deg); } 35% { transform: rotate(48deg); } 45% { transform: rotate(32deg); } 55%, 85% { transform: rotate(40deg); } 100% { transform: rotate(-80deg); } }
.w6-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.w6-checks li { font-size: 13.5px; font-weight: 600; color: var(--tinta); display: flex; align-items: center; gap: 8px; }
.w6-checks li::before { content: "✓"; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: var(--linea); color: transparent; animation: w6-check 5s infinite; }
.w6-checks li:nth-child(2)::before { animation-delay: .5s; } .w6-checks li:nth-child(3)::before { animation-delay: 1s; } .w6-checks li:nth-child(4)::before { animation-delay: 1.5s; }
@keyframes w6-check { 0%, 10% { background: var(--linea); color: transparent; } 20%, 85% { background: var(--azul); color: #fff; } 100% { background: var(--linea); color: transparent; } }
/* Contador de fuga */
.w6-contador { display: grid; gap: 4px; position: relative; }
.w6-contador small { font-size: 12px; color: var(--sec); }
.w6-contador b { font-size: clamp(36px, 4vw, 48px); line-height: 1; font-weight: 700; color: var(--err); font-variant-numeric: tabular-nums; }
.w6-gotas { display: flex; gap: 6px; margin-top: 8px; }
.w6-gotas span { width: 9px; height: 9px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--err); opacity: .3; animation: w6-gota 1.4s infinite; }
.w6-gotas span:nth-child(2) { animation-delay: .25s; } .w6-gotas span:nth-child(3) { animation-delay: .5s; }
@keyframes w6-gota { 50% { opacity: 1; transform: rotate(-45deg) translate(3px, 3px); } }
.w6-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.w6-pasos li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--tinta); }
.w6-pasos b { width: 22px; height: 22px; border-radius: 50%; background: var(--azul-suave); color: var(--azul); display: grid; place-items: center; font-size: 12px; }

@media (max-width: 900px) { .w6-rej { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .w6-herr { padding: 72px 0; }
  .w6-t { padding: 20px; }
  .w6-viz { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .w6-checks li, .w6-pasos li { justify-content: flex-start; }
}