/* impacto.css — «El impacto de nuestras clases» (3-oct-2026). Ver impacto.js. */
:root{
  --imp-fondo:#04162d; --imp-fondo-2:#0a2547; --imp-texto:#ffffff; --imp-suave:#d6e2f2;
  --imp-rojo:#c8102e; --imp-rojo-hover:#a50d26; --imp-azul:#5cb8ff; --imp-foco:#ffd34d;
  --imp-tarjeta:#ffffff; --imp-tinta:#102438; --imp-gris:#526174; --imp-linea:#d8e1e9; --imp-papel:#f4f7fa;
}
#impacto{scroll-margin-top:84px}
#impacto .imp-caja{background:var(--imp-papel);border:1px solid var(--imp-linea);border-radius:22px;padding:clamp(20px,4vw,48px);margin:32px 0 48px;box-sizing:border-box;overflow:hidden;color:var(--imp-tinta)}
#impacto .imp-cabeza{max-width:860px}
#impacto .imp-eyebrow{color:var(--imp-gris);margin:0 0 10px}
#impacto h2{color:var(--imp-tinta)!important;font-size:clamp(28px,4.2vw,44px);line-height:1.08;margin:0 0 12px;overflow-wrap:break-word}
#impacto .imp-lema{font-size:clamp(19px,2.2vw,23px);font-weight:800;line-height:1.35;margin:0 0 8px;color:var(--imp-tinta)}
#impacto .imp-intro{font-size:17px;line-height:1.6;margin:0;color:#33475c}
#impacto h3{color:var(--imp-tinta)!important;font-size:clamp(21px,2.4vw,26px);line-height:1.2;margin:0 0 6px}
#impacto ul{list-style:none;margin:0;padding:0}
#impacto .imp-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Comunidad (banda oscura con los colores de la portada) */
#impacto .imp-comunidad{background:linear-gradient(160deg,var(--imp-fondo) 0%,var(--imp-fondo-2) 100%);color:var(--imp-texto);border-radius:18px;padding:clamp(18px,3vw,32px);margin:28px 0}
#impacto .imp-total{margin:0 0 18px;font-size:clamp(18px,2.2vw,22px);line-height:1.3;color:var(--imp-suave)}
#impacto .imp-total strong{display:block;color:#fff;font-size:clamp(34px,5.4vw,56px);line-height:1.05;font-weight:900;letter-spacing:-.01em}
#impacto .imp-redes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
#impacto .imp-red-enlace{display:flex;flex-direction:column;gap:2px;height:100%;box-sizing:border-box;min-height:44px;padding:16px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);color:#fff!important;text-decoration:none}
#impacto .imp-red-enlace:hover{background:rgba(255,255,255,.13)}
#impacto .imp-red-nombre{font-weight:800;font-size:15px;color:#fff}
#impacto .imp-red-cuenta{font-size:14px;color:var(--imp-suave);overflow-wrap:anywhere}
#impacto .imp-red-cifra{font-size:28px;line-height:1.15;font-weight:900;color:#fff;margin-top:8px}
#impacto .imp-red-tipo{font-size:14px;color:var(--imp-suave)}
#impacto .imp-red-ver{margin-top:10px;font-size:14px;font-weight:800;color:var(--imp-foco);text-decoration:underline;text-underline-offset:3px}
#impacto .imp-comunidad .imp-nota{color:var(--imp-suave);margin:16px 0 0}
#impacto .imp-nota{font-size:14px;line-height:1.55;color:var(--imp-gris);margin:14px 0 0}

/* Videos */
#impacto .imp-videos>p:first-of-type{margin:0 0 16px;color:#33475c;font-size:16px;line-height:1.55}
#impacto .imp-video-lista{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
#impacto .imp-video{display:flex;flex-direction:column;background:var(--imp-tarjeta);border:1px solid var(--imp-linea);border-radius:16px;padding:18px;min-width:0}
#impacto .imp-video h4{font-size:18px;line-height:1.3;margin:6px 0 8px;color:var(--imp-tinta)}
#impacto .imp-video p{margin:0}
#impacto .imp-video-red{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--imp-gris)}
#impacto .imp-video-idioma{font-size:13px;color:var(--imp-gris);line-height:1.45;margin-bottom:8px!important}
#impacto .imp-video-vistas{font-size:15px;color:#33475c}
#impacto .imp-video-vistas strong{font-size:24px;color:var(--imp-tinta);font-weight:900}
#impacto .imp-video-fecha{font-size:13px;color:var(--imp-gris);margin-bottom:14px!important}
#impacto .imp-boton{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:10px;background:var(--imp-rojo);color:#fff!important;font-weight:800;text-decoration:none;text-align:center}
#impacto .imp-boton:hover{background:var(--imp-rojo-hover)}

/* Testimonios (solo si hay comentarios públicos verificados) */
#impacto .imp-testimonios{margin-top:28px}
#impacto .imp-test-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:12px}
#impacto .imp-test{background:var(--imp-tarjeta);border:1px solid var(--imp-linea);border-left:4px solid var(--imp-rojo);border-radius:14px;padding:16px}
#impacto .imp-test blockquote{margin:0}
#impacto .imp-test blockquote p{margin:0;font-size:17px;line-height:1.55;color:var(--imp-tinta)}
#impacto .imp-test-trad{font-size:15px;color:#33475c;margin:10px 0 0}
#impacto .imp-test-trad span{font-weight:800}
#impacto .imp-test-fuente{font-size:14px;color:var(--imp-gris);margin:10px 0 0}
#impacto .imp-test-enlace{color:#174a80;font-weight:700}

/* Cierre y botones */
#impacto .imp-educativo{font-size:14px;color:var(--imp-gris);margin:24px 0 0}
#impacto .imp-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
#impacto .imp-cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;border-radius:12px;font-weight:800;text-decoration:none;text-align:center}
#impacto .imp-cta-1{background:var(--imp-fondo);color:#fff!important}
#impacto .imp-cta-2{background:#fff;color:var(--imp-tinta)!important;border:2px solid var(--imp-tinta)}
#impacto a:focus-visible{outline:3px solid #3159ff;outline-offset:3px}
#impacto .imp-comunidad a:focus-visible{outline-color:var(--imp-foco)}

@media(max-width:1100px){
  #impacto .imp-redes,#impacto .imp-video-lista{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  #impacto .imp-caja{border-radius:16px;margin:24px 0 40px}
  #impacto .imp-redes{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  #impacto .imp-red-enlace{padding:12px}
  #impacto .imp-red-cifra{font-size:22px}
  #impacto .imp-video-lista{grid-template-columns:1fr}
  #impacto .imp-ctas{flex-direction:column}
  #impacto .imp-cta{width:100%;box-sizing:border-box}
}
