@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
}

:root{
    --color_text-primary: #024CAA;
    --color_text-secundary: #024CAA; /* 101E2C #073854*/
    --color_text-tertiary: #192655;
    --main_color-primary: #192655;
    --main_color-secundary: write; /* FAFBFE */
    --background-color: #D8C4B6;
    --lowText_font_size: 16px;
    --text_size_title: 40px;
    --text_title_card: 24px;
    --text_title_cardv2: 20px;
    --text_paragraph: 16px;
    --box_shadow-primary: 0px 6px 50px -20px #213555;
}

header{
    width: 100%;
    height: 100px;
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    background-color: #fff; /* Asegura que el fondo del header sea visible */
}

.container__header{
    max-width: 1200px;
    height: 100%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 20px;
}

.logo{
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
}

.logo img{
    width: 70px;
    max-width: 200px; /* Establece un tamaño máximo */
    height: auto;
}

.menu{
    display: flex;
    align-items: center;
}

.menu nav{
    margin: 0px 20px;
}

.menu nav ul{
    display: flex;
}

.menu nav ul li{
    list-style: none;
    margin: 20px 16px;
}

.menu nav ul li a{
    color: var(--color_text-secundary); /*Variable*/
    font-size: var(--lowText_font_size); /*Variable*/
    position: relative;
}

.menu nav ul li a:hover{
    color: var(--color_text-primary); /*Variable*/
}

.btn__quote{
    display: block;
    padding: 8px 40px;
    border: 2px solid var(--main_color-primary); /*Variable*/
    border-radius: 8px;
    font-weight: 500;
    margin: 0px 20px;
    transition: all 300ms;
}

.btn__quote:hover{
    color: white;
    background: var(--main_color-primary); /*Variable*/
}

/* texto */

body{
    background: fff;
}

.wrapper{
    margin: 110px auto 0 auto; /* Ajusta el valor según te convenga */
    width: 72%;
}

.imgs img{
    max-width: 320px;
    float: left;
    border: 3px solid #fff;
    border-radius: 10px;
    margin-right: 70px;
    top: 150px;
}

.imgs2 img{
    max-width: 320px;
    float: right;
    border: 3px solid #fff;
    border-radius: 10px;
    margin-left: 70px;
    top: 150px;
}

.imgs3 img{
    max-width: 320px;
    float: left;
    border: 3px solid #fff;
    border-radius: 10px;
    margin-right: 70px;
    margin-top: -100px;
}

.text-box{
    color: #192655;
}

.text-box h2{
    font-size: 42px;
    color: #024CAA;
    top: 190px;
}

.text-box p{
    font-size: 16px;
    top: 150px;
    text-align: justify;
}

.text-box ol {
    list-style-type: decimal;    /* otras opciones: square, circle, etc. */
    margin-left: 40px;        /* separa la lista del borde izquierdo */
    text-align: justify;
  }
  

      /* tabla */
      h1 {
        text-align: center;
        margin-top: 20px;
        margin-bottom: 20px;
        font-size: 24px;
        text-transform: uppercase;
      }
  
      /* Tabla */
      table {
        border-collapse: collapse;
        margin: 0 auto;       /* Centra la tabla */
        width: 80%;           /* Ajusta el ancho a tu gusto */
      }
  
      thead {
        background-color: #024CAA; /* Color de fondo para la cabecera */
      }

      thead TH {
        color: #FFF; /* Color de fondo para la cabecera */
      }

      tbody h4{
        color: #024CAA; /* Color de fondo para la cabecera */
      }
  
      th, td {
        border: 1px solid #fff; /* Borde blanco */
        padding: 10px;
        vertical-align: top;    /* Para que el texto se alinee arriba */
        text-align: left;       /* Ajusta alineación si lo prefieres centrado */
      }
  
      th {
        font-weight: bold;
        text-transform: uppercase;
        width: 25%;             /* Cada columna ocupa el 25% */
      }

      a {
        color: #192655;
    }

    /* boton de flecha */

    .btn__text {
        display: inline-block; /* Cambia a inline-block para ajustar solo al contenido */
        padding: 0; /* Elimina los espacios internos */
        margin: 0; /* Elimina los márgenes */
        background: none; /* Sin fondo */
        border: none; /* Sin borde */
        color: var(--main_color-primary); /* Mantén el color de la flecha */
        font-size: 30px; /* Tamaño ajustado para la flecha */
        cursor: pointer; /* Conserva el puntero de clic */
        transition: color 300ms; /* Transición para el color al pasar el mouse */
    }
    
    .btn__text {
        position: absolute;
        top: 130px; /* Ajusta este valor para moverlo más arriba */
        left: 220px; /* Ajusta este valor para moverlo más a la izquierda */
    }

    .btn__text:hover {
        color: var(--main_color-secondary); /* Cambia de color al pasar el mouse */
    }

    /* marco del menu */
    
    .container__header.scrolled {
        background-color: rgb(255, 255, 255); /* Fondo completamente blanco */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Opcional: agrega sombra */
        z-index: 1000; /* Asegura que esté por encima del contenido */
        transition: all 0.3s ease; /* Transición suave */
    }
    
     /* ===== media queries para contenido responsivo en pantallas pequeñas ==== */

   /* === Media Queries === */

/* Tablets (pantallas medianas) */
@media screen and (max-width: 768px) {
    .wrapper {
        width: 90%;
    }

    .text-box h2 {
        font-size: 1.8rem;
    }

    .text-box h1 {
        font-size: 1.2rem;
    }

    .text-box p {
        font-size: 0.9rem;
    }

    .imgs img, .imgs2 img, .imgs3 img {
        max-width: 90%;
        margin: 10px auto;
    }

    table {
        font-size: 0.8rem;
        width: 100%;
    }

    th, td {
        padding: 8px;
    }
}

/* Móviles (pantallas pequeñas) tablas */
@media screen and (max-width: 480px) {
    .wrapper {
        width: 95%;
        padding: 0 10px;
    }

    .text-box h2 {
        font-size: 1.5rem;
    }

    .text-box h1 {
        font-size: 1rem;
    }

    .text-box p {
        font-size: 0.8rem;
    }

    .imgs img, .imgs2 img, .imgs3 img {
        max-width: 100%;
        margin: 10px auto;
    }

    table {
        font-size: 0.7rem;
    }

    th, td {
        font-size: 0.7rem;
        padding: 5px;
    }
}
   

/* ========= Estilos para pantallas pequeñas menu ======== */

/* Estilos del menú original (para pantallas grandes) */
.menu {
    display: flex;
    align-items: center;
  }
  
  .menu nav ul {
    display: flex;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  .menu nav ul li {
    margin: 0;
  }
  
  .menu nav ul li a {
    color: var(--color_text-secundary);
    font-size: var(--lowText_font_size);
    text-decoration: none;
  }
  
  .menu nav ul li a:hover {
    color: var(--color_text-primary);
  }
  
  /* Menú hamburguesa oculto en pantallas grandes */
  .burger-toggle {
    display: none;
  }
  
  /* Estilos para pantallas pequeñas */
  @media (max-width: 768px) {
    /* Ocultar menú original */
    .menu {
        display: none;
    }
  
    /* Mostrar botón del menú hamburguesa */
    .burger-toggle {
        display: block;
        cursor: pointer;
        font-size: 24px;
        color: var(--color_text-secundary);
        z-index: 101;
    }
  
    /* Estilos del menú hamburguesa */
    .menu-hamburguesa {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: right 0.3s ease;
        z-index: 100;
        padding: 20px;
    }
  
    .menu-hamburguesa.active {
        right: 0;
    }
  
    .menu-hamburguesa nav ul {
        list-style: none;
        text-align: center;
        padding: 0;
        margin: 0;
        width: 100%;
    }
  
    .menu-hamburguesa nav ul li {
        margin: 20px 0;
    }
  
    .menu-hamburguesa nav ul li a {
        color: #024CAA;
        font-size: 20px;
        font-weight: 500;
        text-decoration: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
        gap: 8px; /* Un pequeño espacio entre texto y flecha */
    }
  
       /* 2) Color para las flechas (íconos <i>) dentro del enlace */
  .menu-hamburguesa nav ul li a i {
    color: #192655; /* Color que quieres para los íconos */
    font-size: 30px; /* ¡Aumenta aquí lo que necesites: 20px, 24px, 32px, etc.! */
  }
  
    .menu-hamburguesa nav ul li a:hover {
        color: #024CAA;
    }
  
    /* Botón "Get Started" */
  
    .get-started {
        margin-top: 20px;
        background: #024CAA;
        color: #fff;
        padding: 10px 20px;
        font-size: 16px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        text-transform: uppercase;
    }
  
    .get-started:hover {
        background: #024CAA;
    }
  
    /* Redes sociales al final */
    .social-links {
        margin-top: 40px;
        display: flex;
        gap: 20px;
        font-size: 14px;
        color: #192655;
    }
  
    .social-links a {
        text-decoration: none;
        color: #192655;
    }
  
    .social-links a:hover {
        color: #192655;
    }
  
    /* Botón de cerrar el menú hamburguesa */
    .close-menu {
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 24px;
        cursor: pointer;
        color: #024CAA;
    }
  }
  
  /* Menú hamburguesa oculto inicialmente */
  .menu-hamburguesa {
    display: none; /* Oculto por defecto */
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background: #fff;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: right 0.3s ease;
    z-index: 100;
    padding: 20px;
  }
  
  .menu-hamburguesa.active {
    right: 0; /* Muestra el menú hamburguesa */
  }
  
  /* Reglas para pantallas pequeñas */
  @media (max-width: 768px) {
    .menu {
        display: none; /* Oculta el menú original */
    }
  
    .burger-menu {
        display: block; /* Muestra el botón del menú hamburguesa */
        cursor: pointer;
        font-size: 24px;
        color: #024CAA;
        z-index: 101;
    }
  
    .menu-hamburguesa {
        display: flex; /* Muestra el menú hamburguesa en pantallas pequeñas */
    }
  }
  
  .burger-toggle i {
    color: #024CAA;
    font-size: 30px !important; /* Ajusta el tamaño que prefieras */
    margin-top: -2px;
  }

  /* ========= tabla responsiva =========== */

  .table-responsive {
    width: 100%;         /* Ocupa todo el ancho disponible */
    overflow-x: auto;    /* Barra de desplazamiento horizontal si se desborda */
    margin: 0 auto;      /* Centra el contenedor (opcional) */
  }
  
  /* Ajustes generales de la tabla */
  .table-responsive table {
    min-width: 600px;   /* Un ancho mínimo para que no se colapse demasiado */
    border-collapse: collapse;
    width: auto;
  }
  
  /* Celdas */
  .table-responsive table th, 
  .table-responsive table td {
    padding: 8px;       /* Ajusta el padding */
    /* ... el resto de tus reglas de color, bordes, etc. */
  }
  
  /* En pantallas pequeñas, reducimos fuente aún más */
  @media (max-width: 768px) {
    .table-responsive table {
      font-size: 0.8rem;
      min-width: 400px;
    }
  }
  
  @media (max-width: 480px) {
    .table-responsive table {
      font-size: 0.7rem;  
      min-width: 400px;  
    }
  }
  
  /* colores de los a */

  #color-dorado{
    color: #024CAA;
    font-weight: bold;
  }

   /* colores de los a del burguer menu */

 #color-azul{
    color: #192655;
    font-weight: bold;
  }

  /* color del boton de registrar */

  .btn__text{
    width: 150px;
    padding: 10px 20px;
    text-align: center;
    font-weight: 500;
    background: var(--main_color-primary) !important;
    color: white;
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 300ms;
    font-size: 20px;
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente (si necesario) */
    margin-top: 500px; /* Espacio adicional con el texto anterior */
}

.text__cover {
    display: flex; /* Para centrar contenido */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente si el contenido crece */
    position: absolute; /* Se posiciona relativo al contenedor padre */
    bottom: 20px; /* Se sitúa 20px arriba del borde inferior */
    left: 50%; /* Centrado horizontal */
    transform: translateX(-50%); /* Ajuste para el centro */
}

.btn__text:hover {
    background: #024CAA; /* O el color que desees para el hover */
    color: white;
}

@media screen and (max-width: 768px) {
    .text__cover {
        position: relative; /* Cambia a relativo si absoluto no funciona bien en pantallas pequeñas */
        bottom: 0;
        margin-top: -600px; /* Espaciado adicional si necesario */

    }
}

table td:nth-child(5) h4 {
    white-space: nowrap;
  }