body {
    font-family: 'Montserrat', sans-serif;
    line-height: 1.6;
    background: #000026;
    color: #f4f4f4;
}

.bloques {
      width: 100%;
      height: 90%;
      border-bottom: 1px solid rgba(212, 175, 55, 0.2);           
    }

    .portada{
      height: 90%;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }

    #portada-imagen{
      width: 40%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .bloques:last-of-type {
      border-bottom: none;
    }

    h2 {
      color: #DAA520;
      font-size: 20px;
      margin-top: 0;
    }

    p {
      color: #ccc;
      font-size: 16px;
    }

    ul {
      list-style: none;
      padding: 0;
    }

    ul li {
      background: #333333;
      margin-bottom: 1dvh;
      padding: 1.5dvh 1vw;
      border-left: 5px solid #D4AF37;
      border-radius: 8px;
      color: #f4f4f4;
      font-size: 16px;
    }

    ul li strong {
      color: #DAA520;
    }

    footer {
      text-align: center;
      background: #000026;
      color: #D4AF37;
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 10%;

      border-top: 2px solid #D4AF37;
      z-index: 1000;
      display: grid;
      place-items: center;
    }

    footer p {
      width: 90%;
      margin: 0 auto;
    }
 
  .main-content {
    padding: 2dvh 2vw;
    margin-top: 15dvh;
    margin-bottom: 12dvh;
    background: #000026;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 2dvh;
    overflow-y: auto;
}

/* Estilos para la barra de scroll */
.main-content::-webkit-scrollbar {
    width: 10px;
}

.main-content::-webkit-scrollbar-track {
    background: #000026; /* Fondo oscuro */
    border-radius: 5px;
}

.main-content::-webkit-scrollbar-thumb {
    background: #D4AF37; /* Color dorado */
    border-radius: 5px;
}

.main-content::-webkit-scrollbar-thumb:hover {
    background: #DAA520; /* Dorado más claro al pasar el ratón */
}
 
  
 

    .portada-contenido {
      width: 70%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
    }

     .portada-contenido *{
        width: 70%;
      }
      
    .portada-contenido h1 {
      font-size: 50px;
      color: #DAA520;
      animation: entradaTitulo 1.8s ease forwards, textFloat 4s ease-in-out infinite;
      opacity: 0;
    }

    @keyframes textFloat {
      0% { transform: translateY(0px); }
      50% { transform: translateY(-5px); }
      100% { transform: translateY(0px); }
    }

    @keyframes backgroundPan {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    @keyframes floatAnimation {
      0% { transform: translateY(0px); }
      50% { transform: translateY(-20px); }
      100% { transform: translateY(0px); }
    }

    .portada p {
      font-size: 16px;
      animation: entradaTexto 2s ease forwards, textFloat 4s ease-in-out infinite;
    }

    #boton-usar {
      background-color: #DAA520;
      color: #000025;
      border: none;
      font-weight: bold;
      text-decoration: none;
      border-radius: 6px;
      text-align: center;
      width: 50%;
      transition: all 0.3s ease;
      animation: entradaBoton 2.2s ease forwards, pulsoBoton 3s infinite;
      padding: 12px 24px;
      cursor: pointer;
    }

    .boton:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(218, 165, 32, 0.5);
      background-color: #ffc300;
      color: #000010;
    }

    #portada-imagen {
      width: 40%;
      height: 100%;
      display: grid;
      place-items: center;
    }

    #casco {
      aspect-ratio: 1/1;
      object-fit: contain;
      animation: entradaCasco 5s ease forwards, glowCasco 1s infinite, floatAnimation 3s ease-in-out infinite;
      display: block;
      opacity: 0;
     width: 80%; 
     height: auto;
     max-height: 100%;
    }  

    .mision-vision {
      width: 100%;
      height: 50%;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
    }

    .mision-vision > div {
      background: #00002581;
      width: 40%;
      height: 100%;
      box-shadow: 0px 0px 10px 1px #00BFFF;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      align-items: center;
      animation: divsLong 2s ease forwards;
      border-radius: 10px;
    }

    .mision-vision h1 {
      color: #DAA520;
      font-size: 25px;
    }

    .mision-vision .iconos {
      width: clamp(48px, 6vw, 72px);
      aspect-ratio: 1/1;
    }

    .mision-vision svg {
      width: 100%;
      height: auto;
      margin-bottom: 12px;
      align-self: center;
      display: block;
      fill: #DAA520;
      stroke: #DAA520;
    }

    .mision-vision p {
      font-size: 16px;
      line-height: 1;
      width: 80%;
    }

    /* SECCIÓN VALORES MODIFICADA CON GRID ADAPTABLE */
    .bloque-valores {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: white;
      font-family: 'Segoe UI', sans-serif;  
      box-sizing: border-box;
      height: auto;
    }

    .bloque-valores h1 {
      font-size: 25px;
      color: #DAA520;
      text-align: center;
      display: grid;
      place-items: center;
    }

    .caja-valores {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      width: 100%;
      margin: 0 auto;
      height: auto;
    }

    .valores:hover {
      transform: translateY(-6px);
    }

    .valores  {
      border-radius: 10px;
      aspect-ratio: 1/1;
      background-color: #ffffff00;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      backdrop-filter: blur(2px);
      border-radius: 14px;
      box-shadow: 0 10px 10px #058eff6b;
      border: 1px solid #ffffff2d;
      box-sizing: border-box;
    }

    .valores h2 {
      font-size: 20px;
      color: #DAA520;
    }

    .valores p {
      font-size: 16px;
      color: white;
    }

    .valores .icono-valor {
      width: 50px;
      height: 50px;
      fill: #DAA520;
      stroke: #DAA520;
      filter: drop-shadow(0 0 6px #DAA520);
    }

    /* 🔁 Animaciones */
    @keyframes entradaTitulo {
      0% { transform: translateY(20px); opacity: 0; }
      100% { transform: translateY(0); opacity: 1; }
    }

    @keyframes entradaTexto {
      0% { transform: translateY(20px); opacity: 0; }
      100% { transform: translateY(0); opacity: 1; }
    }

    @keyframes entradaBoton {
      0% { transform: translateY(20px); opacity: 0; }
      100% { transform: translateY(0); opacity: 1; }
    }

    @keyframes pulsoBoton {
      0%   { box-shadow: 0 0 0 rgba(218, 165, 32, 0); }
      50%  { box-shadow: 0 0 12px rgba(218, 165, 32, 0.4); }
      100% { box-shadow: 0 0 0 rgba(218, 165, 32, 0); }
    }

    @keyframes entradaCasco {
      0% { transform: scale(0.95); opacity: 0; }
      100% { transform: scale(1); opacity: 1; }
    }

    @keyframes glowCasco {
      0%, 100% { filter: brightness(1); }
      50%      { filter: brightness(1.2); }
    }
    
    @keyframes divsLong {
      0% { scale: 0.5;}
      100% { scale: 1; }
    }

    
    @media (max-width: 768px) {
      p, ul li {
        font-size: 16px;
      }

   .portada{
      justify-content: space-around;
      display: flex;
      align-items: center;
      flex-direction: column;
    }
      .portada-contenido {
        width: 90%;
        order: 2;
        align-items: center;
        height: 60%;
        justify-content: space-evenly;
        text-align: center;
      }

       .portada-contenido *{
      width: 100%;
     }    
      #boton-usar{
        width: 60%;
        padding: 10px
      }
     
      #portada-imagen {
        height: 40%;
        width: 80%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: end;
        order: 1;
      }
      #casco{
        height: 90%;
      }

      .portada-contenido h1 {
        font-size: 25px;
      }

      .portada-contenido p {
        font-size: 16px;
      }

      .mision-vision {
        flex-direction: column;
        justify-content: space-evenly;
        height: 100%;
      }

      .mision-vision > div {
        width: 90%;
      }

      .bloque-mision {
        height: 40% !important;
      }

      .bloque-vision {
        height: 40% !important;
      }

    }