:root{
      --amarillo:#ffff00;      /* barra superior */
      --azul-footer:#213447;   /* footer elegante */
      --texto:#222;
    }
    body{font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;color:var(--texto)}
    /* NAV */
    .navbar{
      background: var(--amarillo);
      padding: .65rem 0;
      box-shadow: 0 2px 12px rgba(0,0,0,.06);
    }
    .navbar-brand img{height:70px; width:auto}
    .navbar-nav .nav-link{
      font-weight:600; color:#111; padding: .45rem .9rem; border-radius:.5rem; 
    }
    .navbar-nav .nav-link.active,
    .navbar-nav .nav-link:hover{ background:#213447; color:#fff !important; }
    .navbar-toggler{border:0}
    .navbar-toggler:focus{box-shadow:none}

    /* HERO SLIDER */
    .hero{
      position:relative; height:72vh; min-height:420px; overflow:hidden;
      background:#111;
    }
    .hero .slide{
      position:absolute; inset:0; background-size:cover; background-position:center;
      opacity:0; transform:scale(1.04); transition:opacity .8s ease, transform 1.2s ease;
    }
    .hero .slide.active{ opacity:1; transform:scale(1); }
    .hero::after{
      content:""; position:absolute; inset:auto 0 0 0; height:140px;
      background:linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,0));
      pointer-events:none;
    }

    /* Controles */
    .hero .ctrl{
      position:absolute; top:50%; transform:translateY(-50%);
      width:44px; height:44px; display:grid; place-items:center;
      border-radius:50%; background:rgba(0,0,0,.45); color:#fff;
      border:1px solid rgba(255,255,255,.35);
      cursor:pointer; z-index:5; transition:all .2s;
    }
    .hero .ctrl:hover{background:rgba(0,0,0,.7)}
    .hero .prev{left:18px}
    .hero .next{right:18px}

    /* Dots */
    .dots{
      position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
      display:flex; gap:10px; z-index:6;
    }
    .dot{
      width:10px; height:10px; border-radius:999px; border:2px solid #fff;
      background:transparent; opacity:.7; cursor:pointer; transition:all .2s;
    }
    .dot.active{background:#fff; opacity:1}

    /* Secciones demo */
    section{padding:60px 0}
    .section-muted{background:#f7f8fb}

    /* FOOTER LINDO */
    footer{
      background: var(--azul-footer); color:#dbe5ef;
    }
    .footer-top{padding:28px 0 18px}
    .footer-brand{
      display:flex; align-items:center; gap:12px; color:#dbe5ef; text-decoration:none;
    }
    .footer-sep{
      height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
    }
    .footer-bottom{padding:18px 0 28px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px}
    .credit img{max-width:110px; height:auto; filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))}
    .social a{color:#dbe5ef; margin-right:14px;}
    .social a:hover{color:#fff}
.navbar-nav .nav-item {
  margin: 0 6px; 
}
.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: transparent;
  opacity: .7;
  cursor: pointer;
  transition: all .2s;
  box-sizing: border-box; /* asegura que el borde entre dentro del tamaño */
}