*{margin:0;padding:0;box-sizing:border-box;}
body{background:#f0f2f8;font-family:Arial,sans-serif;padding-top:210px;}

/* ── HEADER ── */
header{
  position:fixed;
  top:0;left:0;right:0;
  background:#fff;
  box-shadow:0 4px 18px rgba(0,0,0,.13);
  z-index:1000;
}

/* FILA 1: barra superior delgada */
.topbar{
  display:flex;
  align-items:center;
  gap:16px;
  padding:5px 20px;
  border-bottom:1px solid #e8e8e8;
  background:#fff;
}
.topbar-brand{
  font-size:14px;
  font-weight:900;
  color:#111;
  white-space:nowrap;
}
.topbar-slogan{
  font-size:13px;
  color:#444;
}

/* FILA 2: logo + tagline grande + botón */
.header-main{
  display:flex;
  align-items:center;
  padding:10px 20px;
  gap:16px;
  border-bottom:1px solid #e8e8e8;
}
.logo-area{flex-shrink:0;}
.header-tagline{
  flex:1;
  font-size:32px;
  font-weight:900;
  color:#111;
  letter-spacing:.5px;
  line-height:1.1;
}
.btn-demo{
  background:#ff0000;
  color:#fff;
  padding:12px 22px;
  border-radius:6px;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  transition:background .2s, box-shadow .2s, transform .15s;
  box-shadow:0 4px 16px rgba(255,0,0,.45), 0 2px 8px rgba(0,0,0,.22);
}
.btn-demo:hover{
  background:#cc0000;
  box-shadow:0 6px 24px rgba(255,0,0,.60), 0 3px 12px rgba(0,0,0,.28);
  transform:translateY(-1px);
}

/* FILA 3: menú barra blanca */
.menu{
  display:flex;
  align-items:stretch;
  background:#ffffff;
  border-top:1px solid #e8e8e8;
  padding:0 20px;
  gap:0;
}
.menu a{
  cursor:pointer;
  font-size:14px;
  font-weight:700;
  color:#111;
  text-decoration:none;
  padding:11px 18px;
  position:relative;
  transition:color .18s, background .18s;
  white-space:nowrap;
  letter-spacing:.3px;
  text-shadow:none;
}
.menu a::after{
  content:'';
  position:absolute;
  bottom:0;left:0;right:0;
  height:3px;
  background:#1a56ff;
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .22s;
  border-radius:2px 2px 0 0;
}
.menu a:hover,
.menu a.active{
  color:#1a56ff;
  background:rgba(26,86,255,.06);
}
.menu a:hover::after,
.menu a.active::after{
  transform:scaleX(1);
}

/* Iconos sociales en header */
.header-social{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}
.hsoc{
  width:34px;height:34px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;
  transition:opacity .2s, transform .18s;
}
.hsoc:hover{opacity:.85;transform:scale(1.1);}
.hsoc-fb{background:#1877f2;}
.hsoc-ig{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%);}

/* Grupo de botones header */
.header-btns{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}

/* Botón Usuarios */
.btn-usuarios{
  background:#1a56ff;
  color:#fff;
  padding:12px 18px;
  border-radius:6px;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  transition:background .2s, box-shadow .2s, transform .15s;
  box-shadow:0 4px 14px rgba(26,86,255,.35), 0 2px 6px rgba(0,0,0,.18);
}
.btn-usuarios:hover{
  background:#0d44d6;
  box-shadow:0 6px 20px rgba(26,86,255,.5), 0 3px 10px rgba(0,0,0,.22);
  transform:translateY(-1px);
}

/* Ícono del menú hamburguesa */
.menu-icon{
  display:inline-flex;
  align-items:center;
  margin-right:6px;
  pointer-events:none;
  vertical-align:middle;
}
.menu-icon svg{
  display:block;
}

/* ── STATUS BAR ── */
.statusBar{
  position:fixed;
  top:152px;
  left:0;right:0;
  height:44px;
  background:linear-gradient(to right,#0a1f6e,#1a56ff,#4f8aff);
  display:flex;
  align-items:center;
  overflow:hidden;
  z-index:999;
}

/* Marquee por defecto */
.marquee-wrap{
  display:flex;
  align-items:center;
  width:100%;
  overflow:hidden;
  position:absolute;
  inset:0;
  transition:opacity .3s;
}
.marquee-text{
  display:inline-block;
  white-space:nowrap;
  font-size:16px;
  font-style:italic;
  font-weight:700;
  color:#fff;
  padding-left:100%;
  animation:marquee 18s linear infinite;
}
@keyframes marquee{
  0%  {transform:translateX(0);}
  100%{transform:translateX(-50%);}
}

/* Texto ítem al hacer hover */
.item-text{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  padding-left:24px;
  font-size:16px;
  font-style:italic;
  font-weight:700;
  color:#fff;
  opacity:0;
  transform:translateX(-16px);
  transition:opacity .25s, transform .25s;
  pointer-events:none;
}
.item-text.show{
  opacity:1;
  transform:translateX(0);
}

/* Cuando hay hover: ocultar marquee */
.statusBar.hovered .marquee-wrap{opacity:0;}

/* ── CAROUSEL ── */
.carousel{
  position:relative;
  margin:32px 40px 48px;  /* ancho full con márgenes laterales */
}
.carousel-viewport{
  overflow:hidden;
  border-radius:14px;
  box-shadow:0 6px 28px rgba(0,0,0,.13);
}
.carousel-track{
  display:flex;
  transition:transform .45s cubic-bezier(.4,0,.2,1);
}
.slide{
  flex:0 0 100%;
  height:40vh;             /* 40% de la altura del monitor = flexible */
  min-height:300px;        /* mínimo en pantallas muy pequeñas */
  max-height:550px;        /* máximo en monitores muy grandes/curvos */
  position:relative;
  overflow:hidden;
}
.slide-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transition:transform .6s ease;
}
.slide:hover .slide-bg{transform:scale(1.04);}

/* ── FONDOS DE SLIDES ──
   Si tienes imagen: url('../images/slideX.jpg') va primero.
   El gradiente actúa como fallback si la imagen no carga.
*/
.s1{
  background-image:url('../images/slide1.jpg');
  background-color:#0d0d45; /* fallback color */
}
.s2{
  background-image:url('../images/slide2.jpg');
  background-color:#1a3a1a;
}
.s3{
  background-image:url('../images/slide3.jpg');
  background-color:#001040;
}


.slide-content{
  position:absolute;
  bottom:0;left:0;right:0;
  padding:28px 36px;
  background:linear-gradient(transparent,rgba(0,0,0,.65));
  color:#fff;
}
.slide-content h2{
  font-size:32px;
  font-weight:900;
  margin-bottom:8px;
  text-shadow:1px 1px 6px rgba(0,0,0,.5);
}
.slide-content p{
  font-size:15px;
  opacity:.9;
}

/* Botones prev/next */
.c-prev,.c-next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(0,0,0,.42);
  color:#fff;
  border:none;
  font-size:38px;
  line-height:1;
  width:36px;height:46px;
  border-radius:8px;
  cursor:pointer;
  z-index:10;
  transition:background .2s;
  display:flex;align-items:center;justify-content:center;
}
.c-prev:hover,.c-next:hover{background:rgba(26,86,255,.75);}
.c-prev{left:30px;}
.c-next{right:30px;}

/* Dots */
.c-dots{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:14px;
}
.c-dot{
  width:11px;height:11px;
  border-radius:50%;
  background:#b0b8d0;
  cursor:pointer;
  border:none;
  transition:background .2s, transform .2s;
}
.c-dot.active{
  background:#1a56ff;
  transform:scale(1.35);
}

/* ── VIDEOS ── */
.videos{
  margin:0 40px 60px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
}
.video-card{
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 4px 20px rgba(0,0,0,.10);
}
.video-label{
  padding:12px 18px;
  font-weight:700;
  font-size:15px;
  color:#1a1a1a;
  border-bottom:1px solid #eef0f5;
}
.video-frame{
  position:relative;
  padding-bottom:56.25%;
  height:0;
  background:#000;
}
.video-frame iframe{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  display:block;
}

/* ── FOOTER rojo YouTube degradado ── */
footer{
  background:linear-gradient(to right,#8b0000,#cc0000,#ff0000);
  color:#fff;
  margin-top:20px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1.4fr;
  gap:0;
  padding:52px 0 36px;
  border-bottom:2px solid rgba(255,255,255,.35);
  /* divisores blancos entre columnas via column-rule no funciona en grid, usamos box-shadow en cada col */
}

/* Separadores blancos entre columnas */
.footer-col{
  padding:0 40px;
  border-right:1px solid rgba(255,255,255,.35);
}
.footer-col:last-child{border-right:none;}

/* Col 1: logo + descripción + social */
.footer-logo{
  font-size:22px;
  font-weight:900;
  color:#fff;
  margin-bottom:14px;
  letter-spacing:1px;
  text-transform:uppercase;
}
.footer-col > p{
  font-size:15px;
  font-weight:600;
  color:#fff;
  line-height:1.7;
  margin-bottom:18px;
}
.footer-social{display:flex;gap:10px;margin-top:4px;}
.fsoc{
  width:34px;height:34px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;
  transition:opacity .2s, transform .2s;
}
.fsoc:hover{opacity:.8;transform:scale(1.1);}
.fsoc.twitter{background:#1da1f2;}
.fsoc.facebook{background:#1877f2;}
.fsoc.youtube{background:#900;}

/* Cols 2-3: listas de links */
.footer-col h3{
  font-size:16px;
  font-weight:900;
  color:#fff;
  margin-bottom:18px;
  text-transform:uppercase;
  letter-spacing:1.2px;
  border-bottom:2px solid rgba(255,255,255,.4);
  padding-bottom:8px;
}
.footer-col ul{list-style:none;}
.footer-col ul li{margin-bottom:12px;}
.footer-col ul li a{
  font-size:15px;
  font-weight:700;
  color:#fff;
  text-decoration:none;
  transition:opacity .18s;
}
.footer-col ul li a:hover{opacity:.75;}

/* Col 4: contacto */
.contact-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:14px;
  font-size:15px;
  font-weight:700;
  color:#fff;
  line-height:1.5;
}
.cicon{font-size:16px;flex-shrink:0;margin-top:2px;}

/* Barra inferior negra de contraste */
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 40px;
  font-size:13px;
  font-weight:700;
  color:#fff;
  background:#000;
}
.footer-tagline{
  font-style:italic;
  font-weight:700;
  color:rgba(255,255,255,.75);
}

@media(max-width:860px){
  body{padding-top:120px;}
  .header-inner{flex-wrap:wrap;height:auto;padding:10px 16px;}
  .menu{flex-wrap:wrap;gap:2px;}
  .menu a{font-size:13px;padding:5px 8px;}
  .videos{grid-template-columns:1fr;}
  .carousel{width:100%;max-width:400px;} /* responsivo en móvil */
  .slide{height:220px;}
  .slide-content h2{font-size:22px;}
  .footer-grid{grid-template-columns:1fr;}
}