* {margin:0; padding:0; box-sizing:border-box; font-family:Arial,sans-serif;}
    body {
      background: linear-gradient(to bottom, #0b2545, #1e3a5f);
      color: white;
      overflow-x: hidden;
    }
    header {
      background: rgba(11,37,69,0.95);
      position: fixed;
      width: 100%;
      top: 0;
      z-index: 1000;
      box-shadow: 0 2px 10px rgba(0,0,0,0.4);
    }
    nav {
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding: 15px 30px;
    }
    .logo {font-size:1.5rem; font-weight:bold; color:#22d3ee;}
    .nav-links {
      display:flex;
      list-style:none;
      gap:20px;
    }
    .nav-links a {
      color:white;
      text-decoration:none;
      transition:0.3s;
    }
    .nav-links a:hover {color:#22d3ee;}
    .menu-toggle {
      display:none;
      font-size:2rem;
      cursor:pointer;
    }

    .carousel {
      margin-top:80px;
      position: relative;
      width:100%;
      overflow:hidden;
    }
    .carousel-track {
      display:flex;
      transition: transform 0.5s ease-in-out;
    }
    .carousel-slide {
      min-width:100%;
    }
    .carousel-slide img {
      width:100%;
      height:70vh;
      object-fit:cover;
    }

    .carousel-slide img {
  width:100%;
  height:70vh;
  object-fit:cover;
  cursor:pointer;
}

.carousel-btn {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(0,0,0,0.4);
  color:white;
  border:none;
  padding:15px;
  cursor:pointer;
  font-size:2rem;
  z-index:10;
  border-radius:50%;
  transition:0.3s;
}

.carousel-btn:hover {
  background:rgba(34,211,238,0.8);
}

.prev {
  left:20px;
}

.next {
  right:20px;
}

.carousel-indicators {
  position:absolute;
  bottom:20px;
  width:100%;
  display:flex;
  justify-content:center;
  gap:10px;
  z-index:10;
}

.indicator {
  width:14px;
  height:14px;
  border-radius:50%;
  background:rgba(255,255,255,0.5);
  cursor:pointer;
  transition:0.3s;
}

.indicator.active {
  background:#22d3ee;
  transform:scale(1.2);
}

    .section-container {
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap:30px;
      padding:60px 20px;
    }
    .info-box {
      background: rgba(255,255,255,0.08);
      padding:25px;
      border-radius:20px;
      text-align:center;
      box-shadow: 0 8px 25px rgba(0,0,0,0.3);
      backdrop-filter: blur(8px);
    }
    .info-box h2 {color:#22d3ee; margin-bottom:15px;}
    .info-box button {
      margin-top:15px;
      padding:12px 20px;
      border:none;
      border-radius:30px;
      background:#22d3ee;
      color:#0b2545;
      font-weight:bold;
      cursor:pointer;
      transition:0.3s;
    }
    .info-box button:hover {background:#67e8f9;}

    .boton {
      margin-top:15px;
      padding:12px 20px;
      border:none;
      border-radius:30px;
      background:#22d3ee;
      color:#0b2545;
      font-weight:bold;
      cursor:pointer;
      transition:0.3s;
    }

    .parallax {
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      min-height: 400px;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      padding:20px;
    }
    .parallax-text {
      background: rgba(0,0,0,0.5);
      padding:20px;
      border-radius:15px;
      max-width:700px;
    }

    footer {
      background:#081b33;
      text-align:center;
      padding:25px;
      color:#22d3ee;
      font-size:1rem;
    }

    .modal {
      display:none;
      position:fixed;
      z-index:2000;
      left:0; top:0;
      width:100%; height:100%;
      background: rgba(0,0,0,0.8);
      justify-content:center;
      align-items:center;
    }
    .modal-content {
      background:#102f52;
      padding:30px;
      border-radius:15px;
      width:90%;
      max-width:600px;
      position:relative;
    }
    .close {
      position:absolute;
      top:15px;
      right:20px;
      font-size:2rem;
      cursor:pointer;
      color:#22d3ee;
    }


        table {
            width: 90%;
            margin: auto;
            border-collapse: collapse;
            box-shadow: 0 4px 10px rgba(0,0,0,0.15);
            background-color: white;
            color:black;
        }

        th {
            background-color: #2c6e91;
            color: white;
            padding: 15px;
            font-size: 18px;
        }

        td {
            padding: 12px;
            border: 1px solid #ddd;
            text-align: center;
        }

        tr:nth-child(even) {
            background-color: #f2f9fc;
        }

        tr:hover {
            background-color: #d9eef7;
        }

        .total {
            font-weight: bold;
            background-color: #2c6e91;
            color: black;
        }
    </style>


    @media(max-width:768px){
      .nav-links {
        display:none;
        flex-direction:column;
        position:absolute;
        top:70px;
        right:0;
        width:100%;
        background:#0b2545;
        padding:20px;
      }
      .nav-links.active {display:flex;}
      .menu-toggle {display:block;}
      .carousel-slide img {height:50vh;}
      .parallax {background-attachment: scroll;}
    }