*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f2f5f9;color:#172033}
a{color:#004080;text-decoration:none} a:hover{text-decoration:underline}
.topbar{background:#004080;color:#fff;padding:14px 4%;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.marca{font-weight:800;font-size:25px;white-space:nowrap}.marca a{color:#fff}.marca span{font-size:14px;font-weight:400;margin-left:5px}
.buscador{display:flex;flex:1;min-width:230px;max-width:650px}.buscador input{flex:1;padding:11px;border:0;border-radius:7px 0 0 7px}.buscador button{border:0;border-radius:0 7px 7px 0;padding:0 18px;background:#fff;color:#004080}
nav{display:flex;gap:14px;flex-wrap:wrap}nav a{color:#fff}
.contenedor{width:min(1180px,94%);margin:30px auto}
.hero{background:linear-gradient(135deg,#004080,#0878c9);color:#fff;padding:80px 5%;text-align:center}.hero h1{font-size:52px;margin:0 0 15px}.hero p{font-size:20px}.hero-botones{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.boton,button{display:inline-block;background:#004080;color:#fff;border:0;border-radius:7px;padding:12px 18px;cursor:pointer;font-size:15px}.hero .boton{background:#fff;color:#004080}.boton.secundario{background:transparent;color:#fff;border:1px solid #fff}
.titulo-seccion,.titulo-pagina{display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap;margin:28px 0 15px}
.grid-videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.tarjeta-video,.caja,.perfil{background:#fff;border-radius:12px;box-shadow:0 3px 16px rgba(0,0,0,.07);overflow:hidden}
.video-media{display:block;background:#000;aspect-ratio:16/9}.video-media img,.video-media video{width:100%;height:100%;object-fit:cover}.sin-miniatura{height:100%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:30px;font-weight:bold}
.video-info{padding:15px}.video-info h3{margin:0 0 8px;font-size:18px}.video-info p{color:#657080;font-size:14px}.usuario{font-size:14px}.estadisticas{font-size:13px;color:#7b8491}
.grid-categorias{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:15px}.grid-categorias a{background:#fff;padding:25px;border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.06);font-weight:bold}
.caja{padding:25px}.formulario{max-width:760px;margin:auto}.formulario form,.acceso form{display:grid;gap:10px}label{font-weight:bold;margin-top:5px}input,textarea,select{width:100%;padding:12px;border:1px solid #ccd2da;border-radius:7px;font-size:16px}textarea{resize:vertical}
#mensaje{margin-top:15px;padding:10px}.cargando{padding:25px;text-align:center;color:#657080}
.video-detalle .reproductor{background:#000}.video-detalle .reproductor video{display:block;width:100%;max-height:720px}.video-detalle h1{padding:0 20px}.autor-video,.acciones-video,.video-descripcion{padding:12px 20px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}.video-descripcion{display:block}.avatar{width:42px;height:42px;border-radius:50%;object-fit:cover}.avatar-grande{width:110px;height:110px;display:block;margin:-55px 0 10px;background:#004080;color:#fff;font-size:50px;text-align:center;padding-top:25px;border:5px solid #fff}
.comentario{border-top:1px solid #e5e8ec;padding:15px 0}.comentario p{margin:7px 0}.comentario small{color:#78818d}
.perfil{overflow:hidden}.portada{height:230px;background:#004080}.portada img{width:100%;height:100%;object-fit:cover}.perfil-contenido{padding:0 25px 25px}.perfil-estadisticas{display:flex;gap:25px;flex-wrap:wrap;margin:20px 0}
.pantalla-acceso{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}.acceso{width:min(520px,100%)}.marca-centro{text-align:center;font-size:38px;font-weight:bold;color:#004080;margin-bottom:20px}.marca-centro span{font-size:16px;font-weight:normal}
footer{margin-top:60px;background:#00315f;color:#fff;text-align:center;padding:30px}footer a{color:#fff;margin:0 8px}
.filtros{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
@media(max-width:700px){.topbar{align-items:flex-start}.hero{padding:55px 20px}.hero h1{font-size:38px}.buscador{order:3;flex-basis:100%}nav{width:100%;justify-content:center}.contenedor{margin:18px auto}.grid-videos{grid-template-columns:1fr}}