@font-face {
  font-family: "ComfortaaLight";
  src: url("Fuente/comfortaa/Comfortaa-Light.ttf");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "ComfortaaBold";
  src: url("Fuente/comfortaa/Comfortaa-Bold.ttf");
  font-weight: bold;
  font-style: normal;
}

:root {
  /* Colores de la paleta */
  --primary-dark: #04268C; /* Azul oscuro para fondos */
  --primary-light: #138EEB; /* Azul claro para acentos */
  --secondary-light: #2FD1C4; /* Verde azulado para detalles destacados */
  --accent: #1B51F2; /* Azul medio para hover */
  --complementary: #0A4DA6; /* Azul intermedio para bordes y sombras */
  --white-color: #fff;
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: "ComfortaaLight", sans-serif;
  background-color: var(--white-color); /* Fondo blanco */
}

/* Contenedor del carrusel */
.carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Indicadores */
.carousel-indicators {
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 40px;
  width: 100%;
  z-index: 10;
}

.carousel-indicators .dot {
  width: 18px;
  height: 18px;
  margin: 0 10px;
  border-radius: 50%;
  background-color: var(--white-color); /* Fondo blanco */
  transition: transform 0.3s ease, box-shadow 0.5s ease;
  box-shadow: 0 0 8px var(--primary-light); /* Sombra basada en azul claro */
  cursor: pointer;
}

.carousel-indicators .active {
  background-color: var(--primary-light); /* Verde azulado para el indicador activo */
  box-shadow: 0 0 15px rgba(58, 47, 209, 0.8), /* Sombra basada en #2FD1C4 */
    0 0 15px rgba(19, 142, 235, 0.6), /* Sombra secundaria basada en #138EEB */
    0 0 15px rgba(28, 10, 166, 0.4); /* Sombra terciaria basada en #0A4DA6 */
}

/* Elementos del carrusel */
.carousel-inner {
  display: flex;
  transition: transform 0.6s ease-in-out;
}

.carousel-item {
  min-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.carousel-item img {
  width: 100%;
  height: auto;
  transition: transform 0.8s cubic-bezier(0.5, 0.05, 0.1, 0.3);
}

/* Flechas de navegación */
.carousel-control {
  transition: transform 0.4s ease;
  position: absolute;
  top: 35%;
  font-size: 4rem;
  color: var(--white-color);
  padding: 4%;
  z-index: 5;
}

.carousel-control-prev {
  left: 2%;
  height: 10%;
  outline: none;
  cursor: pointer;
  user-select: none;
}

.carousel-control-next {
  right: 2%;
  height: 10%;
  outline: none;
  cursor: pointer;
  user-select: none;
}

.carousel-control-prev:focus,
.carousel-control-next:focus {
  outline: none;
}

.carousel-control-prev:active,
.carousel-control-next:active {
  transform: none;
}

/* --- CAMBIOS PRINCIPALES EN ROMBO (IMAGEN) --- */
.Rombo {
  position: absolute;
  max-width: 50%;    /* AÚN MÁS GRANDE */
  height: auto;
  object-fit: cover;
  left: 5%;          /* AJUSTADO AÚN MÁS A LA IZQUIERDA */
  top: 17%;
}

/* --- EL TEXTO SE MANTIENE EN SU POSICIÓN ORIGINAL --- */
.Nombre {
  position: absolute;
  top: 30%;
  left: 50%; /* VUELVE A SU POSICIÓN ORIGINAL */
  font-size: 180%;
  font-family: 'comfortaa';
  color: #FFFFFF;
  font-weight: normal;
}
.Apellido {
  position: absolute;
  top: 27%;
  left: 50%; /* VUELVE A SU POSICIÓN ORIGINAL */
  font-size: 216%;
  font-family: 'comfortaa';
  color: #FFFFFF;
  font-weight: bold;
}

.bloque {
  position: absolute;
  max-width: 30%;
  height: 25%;
  top: 60%;
  left: 50%; /* VUELVE A SU POSICIÓN ORIGINAL */
}

/* Responsive */
@media (max-width: 2560px) {
  .Rombo {
    max-width: 50%;    /* AÚN MÁS GRANDE */
    left: 5%;          /* AJUSTADO AÚN MÁS A LA IZQUIERDA */
  }

  .bandera1 {
    position: absolute;
    max-width: 9%;
    height: auto;
    left: 6%;
    top: 70%;
  }
  .Nombre {
    top: 19%;
    left: 50%; /* VUELVE A SU POSICIÓN ORIGINAL */
    font-size: 550%;
    text-shadow: 0 0 4px rgba(19, 142, 235, 0.5); /* Sombreado basado en #138EEB */
      margin: 10px auto 0 auto;
  }
  .Apellido {
    top: 29.4%;
    left: 50%; /* VUELVE A SU POSICIÓN ORIGINAL */
    font-size: 660%;
    text-shadow: 0 0 4px rgba(19, 142, 235, 0.5); /* Sombreado basado en #138EEB */
     margin: 10px auto 0 auto;
  }

  .bloque {
    max-width: 25%;
    height: 12.5%;
    top: 70%;
    left: 50%; /* VUELVE A SU POSICIÓN ORIGINAL */
  }
}

@media (max-width: 1491px) {
  .Rombo {
    max-width: 45%; /* Más grande que el original, pero ajustado para esta resolución */
    left: 8%;       /* Ajustado */
  }

  .bandera1 {
    position: absolute;
    max-width: 8%;
    height: auto;
    left: 6%;
    top: 70%;
  }
  .Nombre {
    top: 15%;
    left: 53%; /* VUELVE A SU POSICIÓN ORIGINAL */
    font-size: 450%;
    text-shadow: 0 0 4px rgba(19, 142, 235, 0.5); /* Sombreado basado en #138EEB */
      margin: 10px auto 0 auto;
  }
  .Apellido {
    top: 25%;
    left: 53%; /* VUELVE A SU POSICIÓN ORIGINAL */
    font-size: 540%;
    text-shadow: 0 0 4px rgba(19, 142, 235, 0.5); /* Sombreado basado en #138EEB */
      margin: 10px auto 0 auto;
  }

  .bloque {
    max-width: 30%;
    height: 20%;
    top: 65%;
    left: 53%; /* VUELVE A SU POSICIÓN ORIGINAL */
  }
}

@media (max-width: 1440px) {
  .Rombo {
    max-width: 45%; /* Más grande que el original, ajustado */
    left: 8%;       /* Ajustado */
  }

  .bandera1 {
    position: absolute;
    max-width: 8%;
    height: auto;
    left: 6%;
    top: 70%;
  }
  .Nombre {
    top: 15%;
    left: 50%; /* VUELVE A SU POSICIÓN ORIGINAL */
    font-size: 400%;
    text-shadow: 0 0 4px rgba(19, 142, 235, 0.5); /* Sombreado basado en #138EEB */
      margin: 10px auto 0 auto;
  }
  .Apellido {
    top: 25%;
    left: 50%; /* VUELVE A SU POSICIÓN ORIGINAL */
    font-size: 480%;
    text-shadow: 0 0 4px rgba(19, 142, 235, 0.5); /* Sombreado basado en #138EEB */
  margin: 10px auto 0 auto;
  }

  .bloque {
    max-width: 30%;
    height: 20%;
    top: 65%;
    left: 50%; /* VUELVE A SU POSICIÓN ORIGINAL */
  }
}

@media (max-width: 1293px) {
  .Rombo {
    max-width: 40%; /* Más grande que el original, ajustado */
    left: 10%;      /* Ajustado */
  }

  .bandera1 {
    position: absolute;
    max-width: 8%;
    height: auto;
    left: 6%;
    top: 70%;
  }
  .Nombre {
    top: 20%;
    left: 53%; /* VUELVE A SU POSICIÓN ORIGINAL */
    font-size: 300%;
    text-shadow: 0 0 4px rgba(19, 142, 235, 0.5); /* Sombreado basado en #138EEB */
      margin: 10px auto 0 auto;
  }
  .Apellido {
    top: 30%;
    left: 53%; /* VUELVE A SU POSICIÓN ORIGINAL */
    font-size: 360%;
    text-shadow: 0 0 4px rgba(19, 142, 235, 0.5); /* Sombreado basado en #138EEB */
      margin: 10px auto 0 auto;
  }

  .bloque {
    max-width: 20%;
    height: 50%;
    top: 68%;
    left: 53%; /* VUELVE A SU POSICIÓN ORIGINAL */
  }
}

@media (max-width: 1024px) {
  .carousel-indicators .dot {
    width: 7px;
    height: 7px;
    margin: 0 15px;
    border-radius: 50%;
    border: 1px solid var(--complementary); /* Borde con azul intermedio */
    background-color: var(--white-color); /* Fondo blanco */
    box-shadow: 0 0 8px var(--primary-light); /* Sombra basada en azul claro */
  }
  .carousel-indicators .active {
    background-color: var(--secondary-light); /* Verde azulado */
    box-shadow: 0 0 15px rgba(47, 209, 196, 0.8), /* Sombra basada en #2FD1C4 */
      0 0 15px rgba(19, 142, 235, 0.6), /* Sombra secundaria basada en #138EEB */
      0 0 15px rgba(10, 77, 166, 0.4); /* Sombra terciaria basada en #0A4DA6 */
  }

  .Rombo {
    max-width: 40%; /* Más grande que el original, ajustado */
    left: 15%;      /* Ajustado */
    top: 20%;
  }

  .bandera1 {
    position: absolute;
    max-width: 7%;
    height: auto;
    left: 6%;
    top: 70%;
  }
  .Nombre {
    top: 13%;
    left: 50%; /* VUELVE A SU POSICIÓN ORIGINAL */
    font-size: 270%;
    text-shadow: 0 0 4px rgba(19, 142, 235, 0.5); /* Sombreado basado en #138EEB */
      margin: 10px auto 0 auto;
  }
  .Apellido {
    top: 23%;
    left: 50%; /* VUELVE A SU POSICIÓN ORIGINAL */
    font-size: 320%;
    text-shadow: 0 0 4px rgba(19, 142, 235, 0.5); /* Sombreado basado en #138EEB */
      margin: 10px auto 0 auto;
  }

  .bloque {
    max-width: 20%;
    height: 50%;
    top: 70%;
    left: 50%; /* VUELVE A SU POSICIÓN ORIGINAL */
  }
}

@media (max-width: 815px) {
  .carousel-indicators .dot {
    width: 7px;
    height: 7px;
    margin: 0 10px;
    border-radius: 50%;
    border: 1px solid var(--complementary); /* Borde con azul intermedio */
    background-color: var(--white-color); /* Fondo blanco */
    box-shadow: 0 0 8px var(--primary-light); /* Sombra basada en azul claro */
  }
  .carousel-indicators {
    bottom: 15px;
  }
  .carousel-indicators .active {
    background-color: var(--secondary-light); /* Verde azulado */
    box-shadow: 0 0 15px rgba(47, 209, 196, 0.8), /* Sombra basada en #2FD1C4 */
      0 0 15px rgba(19, 142, 235, 0.6), /* Sombra secundaria basada en #138EEB */
      0 0 15px rgba(10, 77, 166, 0.4); /* Sombra terciaria basada en #0A4DA6 */
  }

  .Rombo {
    max-width: 45%; /* Más grande que el original, ajustado */
    left: 15%;      /* Ajustado */
    top: 20%;
  }

  .bandera1 {
    position: absolute;
    max-width: 7%;
    height: auto;
    left: 6%;
    top: 70%;
  }
  .Nombre {
    top: 19%;
    left: 50%; /* VUELVE A SU POSICIÓN ORIGINAL */
    font-size: 200%;
    text-shadow: 0 0 4px rgba(19, 142, 235, 0.5); /* Sombreado basado en #138EEB */
      margin: 10px auto 0 auto;
  }
  .Apellido {
    top: 29%;
    left: 50%; /* VUELVE A SU POSICIÓN ORIGINAL */
    font-size: 240%;
    text-shadow: 0 0 4px rgba(19, 142, 235, 0.5); /* Sombreado basado en #138EEB */
      margin: 10px auto 0 auto;
  }

  .bloque {
    max-width: 20%;
    height: 50%;
    top: 67%;
    left: 50%; /* VUELVE A SU POSICIÓN ORIGINAL */
  }
}

@media (max-width: 768px) {
  .carousel-indicators .dot {
    width: 5px;
    height: 5px;
    margin: 0 10px;
    border-radius: 50%;
    border: 1px solid var(--complementary); /* Borde con azul intermedio */
    background-color: var(--white-color); /* Fondo blanco */
    box-shadow: 0 0 8px var(--primary-light); /* Sombra basada en azul claro */
  }
  .carousel-indicators {
    bottom: 13px;
  }
  .carousel-indicators .active {
    background-color: var(--secondary-light); /* Verde azulado */
    box-shadow: 0 0 15px rgba(47, 209, 196, 0.8), /* Sombra basada en #2FD1C4 */
      0 0 15px rgba(19, 142, 235, 0.6), /* Sombra secundaria basada en #138EEB */
      0 0 15px rgba(10, 77, 166, 0.4); /* Sombra terciaria basada en #0A4DA6 */
  }

  .Rombo {
    max-width: 45%; /* Más grande que el original, ajustado */
    left: 15%;      /* Ajustado */
    top: 20%;
  }

  .bandera1 {
    position: absolute;
    max-width: 7%;
    height: auto;
    left: 6%;
    top: 70%;
  }
  .Nombre {
    top: 12%;
    left: 50%; /* VUELVE A SU POSICIÓN ORIGINAL */
    font-size: 200%;
    text-shadow: 0 0 4px rgba(19, 142, 235, 0.5); /* Sombreado basado en #138EEB */
      margin: 10px auto 0 auto;
  }
  .Apellido {
    top: 22%;
    left: 50%; /* VUELVE A SU POSICIÓN ORIGINAL */
    font-size: 240%;
    text-shadow: 0 0 4px rgba(19, 142, 235, 0.5); /* Sombreado basado en #138EEB */
       margin: 10px auto 0 auto;
  }

  .bloque {
    max-width: 20%;
    height: 50%;
    top: 67%;
    left: 50%; /* VUELVE A SU POSICIÓN ORIGINAL */
  }
}

@media (max-width: 542px) {
  .carousel-indicators .dot {
    width: 5px;
    height: 5px;
    margin: 0 7px;
    border-radius: 50%;
    border: 1px solid var(--complementary); /* Borde con azul intermedio */
    background-color: var(--white-color); /* Fondo blanco */
    box-shadow: 0 0 8px var(--primary-light); /* Sombra basada en azul claro */
  }
  .carousel-indicators {
    bottom: 9px;
  }
  .carousel-indicators .active {
    background-color: var(--secondary-light); /* Verde azulado */
    box-shadow: 0 0 15px rgba(47, 209, 196, 0.8), /* Sombra basada en #2FD1C4 */
      0 0 15px rgba(19, 142, 235, 0.6), /* Sombra secundaria basada en #138EEB */
      0 0 15px rgba(10, 77, 166, 0.4); /* Sombra terciaria basada en #0A4DA6 */
  }

  .carousel-control {
    top: 30%;
    font-size: 2rem;
  }

  .Rombo {
    max-width: 40%; /* Más grande que el original, ajustado */
    left: 13%;      /* Ajustado */
    top: 20%;
  }

  .bandera1 {
    position: absolute;
    max-width: 7%;
    height: auto;
    left: 6%;
    top: 70%;
  }
  .Nombre {
    top: 15%;
    left: 45%; /* VUELVE A SU POSICIÓN ORIGINAL */
    font-size: 150%;
    text-shadow: 0 0 4px rgba(19, 142, 235, 0.5); /* Sombreado basado en #138EEB */
      margin: 10px auto 0 auto;
  }
  .Apellido {
    top: 25%;
    left: 45%; /* VUELVE A SU POSICIÓN ORIGINAL */
    font-size: 180%;
    text-shadow: 0 0 4px rgba(19, 142, 235, 0.5); /* Sombreado basado en #138EEB */
      margin: 10px auto 0 auto;
  }

  .bloque {
    max-width: 25%;
    height: 50%;
    top: 67%;
    left: 45%; /* VUELVE A SU POSICIÓN ORIGINAL */
  }
}

@media (max-width: 425px) {
  .carousel-indicators .dot {
    width: 5px;
    height: 5px;
    margin: 0 7px;
    border-radius: 50%;
    border: 1px solid var(--complementary); /* Borde con azul intermedio */
    background-color: var(--white-color); /* Fondo blanco */
    box-shadow: 0 0 8px var(--primary-light); /* Sombra basada en azul claro */
  }
  .carousel-indicators {
    bottom: 7px;
  }
  .carousel-indicators .active {
    background-color: var(--secondary-light); /* Verde azulado */
    box-shadow: 0 0 15px rgba(47, 209, 196, 0.8), /* Sombra basada en #2FD1C4 */
      0 0 15px rgba(19, 142, 235, 0.6), /* Sombra secundaria basada en #138EEB */
      0 0 15px rgba(10, 77, 166, 0.4); /* Sombra terciaria basada en #0A4DA6 */
  }

  .carousel-control {
    top: 30%;
    font-size: 2rem;
  }

.Rombo {
  max-width: 55%;    /* AÚN MÁS GRANDE para móvil */
  left: 5%;          /* AJUSTADO AÚN MÁS A LA IZQUIERDA */
}


  .bandera1 {
    position: absolute;
    max-width: 7%;
    height: auto;
    left: 6%;
    top: 70%;
  }
  .Nombre {
    top: 18%;
    left: 45%; /* VUELVE A SU POSICIÓN ORIGINAL */
    font-size: 100%;
    text-shadow: 0 0 4px rgba(19, 142, 235, 0.5); /* Sombreado basado en #138EEB */
      margin: 10px auto 0 auto;
  }
  .Apellido {
    top: 28%;
    left: 45%; /* VUELVE A SU POSICIÓN ORIGINAL */
    font-size: 120%;
    text-shadow: 0 0 4px rgba(19, 142, 235, 0.5); /* Sombreado basado en #138EEB */
     margin: 10px auto 0 auto;
  }

  .bloque {
    max-width: 25%;
    height: 50%;
    top: 64%;
    left: 45%; /* VUELVE A SU POSICIÓN ORIGINAL */
  }
}

@media (max-width: 375px) {
  .carousel-indicators .dot {
    width: 4px;
    height: 4px;
    margin: 0 7px;
    border-radius: 50%;
    border: 1px solid var(--complementary); /* Borde con azul intermedio */
    background-color: var(--white-color); /* Fondo blanco */
    box-shadow: 0 0 8px var(--primary-light); /* Sombra basada en azul claro */
  }
  .carousel-indicators {
    bottom: 7px;
  }
  .carousel-indicators .active {
    background-color: var(--secondary-light); /* Verde azulado */
    box-shadow: 0 0 15px rgba(47, 209, 196, 0.8), /* Sombra basada en #2FD1C4 */
      0 0 15px rgba(19, 142, 235, 0.6), /* Sombra secundaria basada en #138EEB */
      0 0 15px rgba(10, 77, 166, 0.4); /* Sombra terciaria basada en #0A4DA6 */
  }

  .carousel-control {
    top: 30%;
    font-size: 2rem;
  }

  .Rombo {
    max-width: 40%; /* Más grande que el original, ajustado */
    left: 15%;      /* Ajustado */
    top: 25%;
  }

  .bandera1 {
    position: absolute;
    max-width: 7%;
    height: auto;
    left: 6%;
    top: 70%;
  }
  .Nombre {
    top: 15%;
    left: 45%; /* VUELVE A SU POSICIÓN ORIGINAL */
    font-size: 90%;
    text-shadow: 0 0 4px rgba(19, 142, 235, 0.5); /* Sombreado basado en #138EEB */
      margin: 10px auto 0 auto;
  }
  .Apellido {
    top: 25%;
    left: 45%; /* VUELVE A SU POSICIÓN ORIGINAL */
    font-size: 110%;
    text-shadow: 0 0 4px rgba(19, 142, 235, 0.5); /* Sombreado basado en #138EEB */
  margin: 10px auto 0 auto;
  }

  .bloque {
    max-width: 25%;
    height: 50%;
    top: 64%;
    left: 45%; /* VUELVE A SU POSICIÓN ORIGINAL */
  }
}

@media (max-width: 320px) {
  .carousel-indicators .dot {
    width: 4px;
    height: 4px;
    margin: 0 5px;
    border-radius: 50%;
    border: 1px solid var(--complementary); /* Borde con azul intermedio */
    background-color: var(--white-color); /* Fondo blanco */
    box-shadow: 0 0 8px var(--primary-light); /* Sombra basada en azul claro */
  }
  .carousel-indicators {
    bottom: 5px;
  }
  .carousel-indicators .active {
    background-color: var(--secondary-light); /* Verde azulado */
    box-shadow: 0 0 15px rgba(47, 209, 196, 0.8), /* Sombra basada en #2FD1C4 */
      0 0 15px rgba(19, 142, 235, 0.6), /* Sombra secundaria basada en #138EEB */
      0 0 15px rgba(10, 77, 166, 0.4); /* Sombra terciaria basada en #0A4DA6 */
  }

  .carousel-control {
    top: 30%;
    font-size: 2rem;
  }

  .Rombo {
    max-width: 40%; /* Más grande que el original, ajustado */
    left: 15%;      /* Ajustado */
    top: 25%;
  }

  .bandera1 {
    position: absolute;
    max-width: 7%;
    height: auto;
    left: 6%;
    top: 70%;
  }
  .Nombre {
    top: 15%;
    left: 45%; /* VUELVE A SU POSICIÓN ORIGINAL */
    font-size: 87%;
    text-shadow: 0 0 4px rgba(19, 142, 235, 0.5); /* Sombreado basado en #138EEB */
      margin: 10px auto 0 auto;
  }
  .Apellido {
    top: 25%;
    left: 45%; /* VUELVE A SU POSICIÓN ORIGINAL */
    font-size: 100%;
    text-shadow: 0 0 4px rgba(19, 142, 235, 0.5); /* Sombreado basado en #138EEB */
  margin: 10px auto 0 auto;
  }

  .bloque {
    max-width: 25%;
    height: 50%;
    top: 64%;
    left: 45%; /* VUELVE A SU POSICIÓN ORIGINAL */
  }
}

/* ==================== BOTÓN FLOTANTE: "Inscribirme" (Línea 720 aprox.) ==================== */
.boton-inscribirme-flotante
{
  position: fixed;
  bottom: 25px;
  right: 25px;
  z-index: 1001;
  background-color: #2429bf;
  color: white;
  padding: 15px 30px;
  border-radius: 50px;
  text-decoration: none;
  font-size: 1.1rem;
  box-shadow: 0 4px 10px rgba(117, 144, 181, 0.4);
  animation: brinco 1.5s infinite;
  transition: trasform 0.3s ease;
}
@keyframes brinco {
  0%, 20%, 50%, 80%, 100%
  {
    transform: translateY(0);
  }
  40%{
    transform: translateY(-20px);
  }
  60%{
    transform: translateY(-10px);
  }
}

.boton-inscribirme-flotante:hover 
{
  background-color: #24FFC5;
  transform: translateY(-5px);
}