/* ===============================
   INNOVA OTEC - UI UPGRADE 2025
   =============================== */

/* -------- Variables -------- */
:root{
  --azul:#0b2b4e;
  --azul-oscuro:#081d36;
  --naranja:#f36f21;
  --naranja-oscuro:#d85b19;
  --gris-claro:#f5f6f8;
  --gris-medio:#e0e3e7;
  --texto:#1e1e1e;
  --blanco:#ffffff;
  --trans:all .3s ease;

  --primary: var(--azul);
  --primary-900: var(--azul-oscuro);
  --accent: var(--naranja);
  --accent-700: var(--naranja-oscuro);
  --bg:#ffffff;
  --bg-alt:#f9fafb;
  --muted:#6b7280;
  --shadow:0 8px 24px rgba(0,0,0,.08);
}

/* -------- Reset / Base -------- */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Poppins","Segoe UI",Arial,sans-serif;
  color:var(--texto);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  scroll-behavior:smooth;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(1120px, 92%); margin-inline:auto}

/* -------- Accesibilidad -------- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0
}
.skip-link{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden
}
.skip-link:focus{
  left:16px;top:16px;width:auto;height:auto;background:#fff;
  padding:.6rem 1rem;border-radius:.5rem;box-shadow:var(--shadow);z-index:1100
}

/* =================================
   HEADER / NAV
================================= */
.site-header{
  position:sticky;top:0;z-index:1000;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(120%) blur(8px);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  height:76px;gap:20px;
}
.brand{display:flex;align-items:center;gap:10px}
.brand-logo{height:48px;width:auto}
.brand-text{font-weight:700;color:var(--primary);letter-spacing:.2px}

.nav-menu{
  display:flex;align-items:center;gap:20px;list-style:none
}
.nav-link{
  position:relative;font-weight:600;color:var(--primary);
  padding:10px 12px;border-radius:.6rem;transition:var(--trans);
}

/* ===============================================
   ✨ TRANSICIÓN PROFESIONAL DEL MENÚ (MEJORADA) 
================================================ */
.nav-link::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:4px;
  height:2px;
  background:var(--accent);
  border-radius:4px;
  opacity:0;
  transform:scaleX(0.4);
  transition:opacity .25s ease, transform .25s ease;
}

.nav-link:hover{
  color:var(--primary);
  background:rgba(11,43,78,.06);
  transition:color .25s ease, background .25s ease;
}

.nav-link:hover::after{
  opacity:1;
  transform:scaleX(1);
}

/* ACTIVO */
.nav-link.active{
  color:var(--primary);
}

.nav-link.active::after{
  opacity:1 !important;
  transform:scaleX(1) !important;
  background:var(--accent);
}

/* =============================================== */

.button-cta{
  background:linear-gradient(90deg,var(--accent),var(--accent-700));
  color:#fff;padding:10px 16px;border-radius:.7rem;font-weight:700;
  box-shadow:0 6px 16px rgba(243,111,33,.35);transition:var(--trans);
  display:inline-block
}
.button-cta:hover{transform:translateY(-2px);filter:brightness(1.05)}

.nav-toggle{
  display:none;position:relative;width:42px;height:42px;border:1px solid rgba(0,0,0,.1);
  border-radius:.7rem;background:#fff
}
.nav-toggle .nav-toggle-bar,
.nav-toggle .nav-toggle-bar::before,
.nav-toggle .nav-toggle-bar::after{
  content:"";position:absolute;left:10px;right:10px;height:2px;background:var(--primary);transition:var(--trans)
}
.nav-toggle .nav-toggle-bar{top:20px}
.nav-toggle .nav-toggle-bar::before{top:-8px}
.nav-toggle .nav-toggle-bar::after{top:8px}
.no-scroll{overflow:hidden}

/* Mobile menu */
@media (max-width: 960px){
  .nav-toggle{display:inline-block}
  .nav-menu{
    position:fixed;inset:76px 0 auto 0;background:#fff;border-top:1px solid rgba(0,0,0,.06);
    flex-direction:column;align-items:stretch;gap:0;padding:8px 16px;max-height:0;overflow:hidden;
    transition:max-height .25s ease
  }
  .nav-menu.is-open{max-height:60vh;overflow:auto}
  .nav-link{padding:14px 12px;border-radius:.6rem}
  .button-cta{margin-top:6px;text-align:center}
}

/* =================================
   TIPOGRAFÍA / UTILIDADES
================================= */
.h1{font-size:44px;font-weight:800;color:var(--primary);line-height:1.15}
.h2{font-size:32px;font-weight:800;color:var(--primary);text-align:center;margin-bottom:10px}
.lead{font-size:18px;color:#444;text-align:center;max-width:760px;margin:0 auto 48px}
.section{padding:88px 0}
.section.alt{background:var(--bg-alt)}

/* =================================
   HERO BASE
================================= */
.hero{
  position:relative;
  min-height:80vh;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  background:var(--primary);
  overflow:hidden;
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(11,43,78,.7) 0%, rgba(11,43,78,.3) 60%, rgba(11,43,78,.1) 100%);
  z-index:1;
}

.hero>.container{
  position:relative;
  z-index:2;
  max-width:900px;
}

.hero h1{
  font-size:52px;
  font-weight:800;
  color:#fff;
  text-shadow:0 3px 8px rgba(0,0,0,.35);
  margin-bottom:18px;
  line-height:1.2;
}

.hero p{
  font-size:20px;
  color:#f3f4f6;
  margin-bottom:28px;
  text-shadow:0 2px 6px rgba(0,0,0,.25);
}

/* =================================
   BOTONES
================================= */
.btn{
  display:inline-block;
  border:2px solid #d0d0d0;
  color:#5f5f5f;
  background:#f4f4f4;
  padding:12px 22px;
  border-radius:.8rem;
  font-weight:700;
  transition:var(--trans);
}

.btn:hover{
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
  box-shadow:0 8px 18px rgba(11,43,78,.2);
}

.btn-prim{
  background:linear-gradient(90deg,var(--accent),var(--accent-700));
  color:#fff;
  border:none;
  padding:12px 26px;
  border-radius:.9rem;
  font-weight:800;
  box-shadow:0 8px 18px rgba(243,111,33,.35);
  transition:var(--trans);
}

.btn-prim:hover{
  transform:translateY(-2px);
  filter:brightness(1.06);
}

/* =================================
   GRIDS / CARDS
================================= */
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:28px}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(460px,1fr));gap:36px}

.card{
  background:#fff;border-radius:18px;box-shadow:var(--shadow);overflow:hidden;transition:var(--trans)
}
.card:hover{transform:translateY(-6px);box-shadow:0 16px 32px rgba(0,0,0,.14)}
.card img{width:100%;height:220px;object-fit:cover}
.card-body{padding:22px}
.card h3{color:var(--primary);font-weight:800;margin-bottom:8px}
.card p{color:#555;font-size:15px}

/* CARRUSEL CURSOS */
.cursos-slider{display:flex;overflow-x:auto;gap:24px;scroll-snap-type:x mandatory;padding-bottom:12px}
.cursos-slider::-webkit-scrollbar{height:8px}
.cursos-slider::-webkit-scrollbar-thumb{background:var(--accent);border-radius:4px}
.cursos-slider article{flex:0 0 320px;scroll-snap-align:start}

/* =================================
   FORMULARIOS / FILTROS
================================= */
.filter-form{
  margin-top:20px;background:var(--gris-claro);padding:20px 24px;border-radius:12px;box-shadow:0 6px 14px rgba(0,0,0,.05)
}
.filter-grid{display:flex;flex-wrap:wrap;align-items:flex-end;gap:18px}
.filter-grid label{font-weight:700;color:var(--primary);display:block;margin-bottom:6px}
.filter-grid select,
.filter-grid input{
  padding:10px 14px;border:1px solid #ccd3dc;border-radius:10px;font-size:15px;transition:var(--trans);width:220px
}
.filter-grid select:focus,
.filter-grid input:focus{
  border-color:var(--accent);outline:0;box-shadow:0 0 0 2px rgba(243,111,33,.2)
}
.filter-btn{align-self:flex-end}

/* CURSO DETALLE */
.curso-info{list-style:none;padding:0;margin:14px 0 18px;color:#555;font-size:15px}
.curso-info li{margin-bottom:6px}
.curso-info strong{color:var(--primary)}

/* =================================
   CERTIFICACIONES
================================= */
.cert-card{padding:34px 24px;border-top:5px solid var(--accent);transition:var(--trans)}
.cert-card:hover{transform:translateY(-6px);box-shadow:0 12px 24px rgba(0,0,0,.1)}
.cert-icon{font-size:44px;color:var(--accent);margin-bottom:14px;transition:var(--trans)}
.cert-card:hover .cert-icon{transform:scale(1.05);color:var(--accent-700)}
.cert-card h3{color:var(--primary);font-size:20px;margin-bottom:10px}
.cert-card p{font-size:15px;color:#444;line-height:1.6}

/* =================================
   BLOQUES TEXTO + IMAGEN
================================= */
.grid-2.align-center{align-items:center}
.text-block{display:flex;flex-direction:column;justify-content:center;padding:0 72px}
.text-block h2{text-align:left;color:var(--primary);margin-bottom:12px}
.text-block .lead{text-align:left;color:#555;margin-bottom:20px;line-height:1.7}
.text-block ul{margin-bottom:24px;padding-left:0;list-style:none}
.text-block ul li{position:relative;padding-left:26px;margin-bottom:10px;font-size:16px;color:#333}
.text-block ul li::before{
  content:"✔";position:absolute;left:0;color:var(--accent);font-weight:800
}
.text-block a.btn-prim{align-self:flex-start;padding:10px 24px;font-size:15px;border-radius:10px}
.image-block img{width:100%;border-radius:14px;box-shadow:0 8px 22px rgba(0,0,0,.12)}

/* =================================
   BANDAS Y CTA
================================= */
.bg-accent{background:var(--primary);color:#fff;text-align:center;padding:84px 0}
.bg-accent h2{color:#fff;font-size:34px;margin-bottom:10px}
.bg-accent p{color:rgba(255,255,255,.92);font-size:17px;max-width:650px;margin:0 auto}
.center-btn{display:flex;justify-content:center;margin-top:26px}

/* =================================
   FOOTER
================================= */
.footer{background:var(--primary);color:#fff;margin-top:90px}
.footer__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:28px;padding:64px 0 18px
}
.footer__logo{height:60px;width:auto;background:#fff;border-radius:10px;padding:6px 10px}
.footer__desc{font-size:15px;color:#d9e3ef;margin-top:14px;line-height:1.7}
.footer__title{color:var(--accent);font-weight:700;margin-bottom:12px}
.footer__links,.footer__contact{list-style:none;padding:0;margin:0}
.footer__links li,.footer__contact li{margin-bottom:8px}
.footer__links a,.footer__contact a{color:#d9e3ef;transition:var(--trans)}
.footer__links a:hover,.footer__contact a:hover{color:var(--accent)}
.footer__social{margin-top:16px}
.footer__social-link{
  display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:50%;background:var(--accent);color:#fff;margin-right:10px;transition:var(--trans)
}
.footer__social-link:hover{background:#fff;color:var(--accent)}
.footer__bottom{
  border-top:1px solid rgba(255,255,255,.1);text-align:center;color:#cfd7e3;
  font-size:14px;padding:18px 0
}

/* =================================
   ANIMACIONES SCROLL
================================= */
[data-animate="fade-up"]{opacity:0;transform:translateY(28px);transition:all .7s ease}
.is-visible{opacity:1;transform:translateY(0)}

/* =================================
   RESPONSIVE
================================= */
@media (max-width: 1100px){
  .text-block{padding:0 32px}
}
@media (max-width: 960px){
  .hero{min-height:auto;padding:110px 0 72px;text-align:center}
  .hero .container{margin:0 auto}
  .hero h1{font-size:38px}
  .hero p{font-size:17px}
  .grid-2{grid-template-columns:1fr}
  .text-block{padding:0 14px;text-align:center}
  .text-block a.btn-prim{align-self:center}
}

/* ================================================
   HERO SLIDER
================================================ */
.hero-slide {
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  animation:heroFade 18s infinite;
}

.hero-slide:nth-child(1){background-image:url('/innova/assets/img/banner4.png'); animation-delay:0s;}
.hero-slide:nth-child(2){background-image:url('/innova/assets/img/grua_horquilla.png'); animation-delay:6s;}
.hero-slide:nth-child(3){background-image:url('/innova/assets/img/banner2.png'); animation-delay:12s;}

@keyframes heroFade{
  0%,100%{opacity:0;}
  10%,30%{opacity:1;}
  40%,90%{opacity:0;}
}

/* =================================
   CONTACTO
================================= */
.contact-form h2,.contact-info h2{
  color:var(--azul);
  margin-bottom:10px;
}

.contact-form p.lead{
  color:#555;
  margin-bottom:25px;
}

.styled-form{
  background:var(--gris-claro);
  padding:30px 35px;
  border-radius:12px;
  box-shadow:0 6px 15px rgba(0,0,0,0.05);
}

.form-row{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
}

.form-group{
  flex:1;
  display:flex;
  flex-direction:column;
}

.form-group label{
  font-weight:600;
  color:var(--azul);
  margin-bottom:5px;
}

.form-group input,
.form-group textarea,
.form-group select{
  padding:12px 14px;
  border:1px solid #ccd3dc;
  border-radius:8px;
  font-size:15px;
  transition:var(--trans);
}

.form-group input:focus,
.form-group textarea:focus{
  border-color:var(--naranja);
  outline:none;
  box-shadow:0 0 0 2px rgba(243,111,33,0.2);
}

.contact-info{
  padding:40px 20px;
}

.contact-list{
  list-style:none;
  padding:0;
  margin:20px 0 25px 0;
}

.contact-list li{
  font-size:16px;
  color:#333;
  margin-bottom:12px;
  display:flex;
  align-items:center;
  gap:10px;
}

.contact-list i{
  color:var(--naranja);
  font-size:18px;
  width:20px;
}

.social-links a{
  display:inline-block;
  background:var(--naranja);
  color:var(--blanco);
  width:36px;
  height:36px;
  line-height:36px;
  text-align:center;
  border-radius:50%;
  margin-right:10px;
  transition:var(--trans);
}

.social-links a:hover{
  background:var(--naranja-oscuro);
  transform:translateY(-3px);
}

@media (max-width:900px){
  .grid-2{grid-template-columns:1fr}
  .contact-info{text-align:center}
  .contact-list li{justify-content:center}
}