@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');


:root{
	--naranja: #db8920;
	--azul:#1d3356;
	--azulete:#89b6e6;
}

body{
  display: block;
  position: center;
    font-family: 'Open Sans', sans-serif;
    font-weight: 500;
    color: var(--azul);
    background-color: #FFF;
  
  height: 100vh;
  font-size: 16px;
  background-image: url(../images/fondo.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: top center;
}

label{
    color:var(--azul);
}

h1{
    color:var(--azul);
    font-size: 1.5rem;;
}

select{
    font-size: 1rem;
}


.cuadro {
  height: auto;
  width: auto;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(4px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
  padding: 30px 30px 30px 30px;
  overflow: hidden;
  max-width: 500px;
  
}



select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100% !important;
    margin-top: 5px;
    border: none;
    border: solid 1px #CCC !important;
    border-radius: 0 !important;
    font-size: 1rem !important;
    background-color: #FFF;

    /* flecha */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center; /* a la derecha y centrada verticalmente */
    background-size: 1rem; /* tamaño de la flecha */
    padding-right: 2rem;   /* espacio para que el texto no se solape con la flecha */
}
.mdl, .circles, .circle {
  position: absolute;   /* o fixed si lo quieres pegado a la ventana */
  z-index: 0;
  pointer-events: none; /* que no tape formularios */
}
.circles { z-index: 0; } 

#formulario,
#formulario .container,
#formulario .row,
.cuadro,
.form,
.logo-draw {
  position: relative;
  z-index: 2;           /* por delante del fondo */
}

.mdl{
  position: fixed;          /* ocupa toda la ventana */
  inset: 0;
  z-index: 0;               /* por detrás del contenido */
  pointer-events: none;     /* no bloquea clics */
  display: grid;
  place-items: center;      /* centro absoluto del contenedor */
}

/* Contenedor responsive de las figuras */
.circles{
  position: relative;
  /* ancho fluido con límites (móvil → desktop) */
  width: clamp(280px, 60vw, 600px);
  /* altura calculada automáticamente manteniendo proporción */
  aspect-ratio: 16 / 10;    /* ajusta si quieres más alto/bajo */
  margin-top: 300px;
}

/* Base común para cada círculo */
.circle{
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(120deg, var(--naranja), var(--naranja));
  /* animación ya existente */
  animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92);
  animation-iteration-count: infinite;
  animation-name: float;
  animation-duration: 6s;
  animation-direction: alternate;
  opacity: 0.85;
}

/* Círculo grande: medidas y posiciones relativas al contenedor */
.circle-1{
  width: 62%;               /* relativo al ancho de .circles */
  aspect-ratio: 1;          /* círculo perfecto */
  top: 8%;
  left: -8%;
  animation-delay: 3.5s;
}

/* Círculo pequeño */
.circle-2{
  width: 48%;
  aspect-ratio: 1;
  bottom: 4%;
  right: -12%;
  animation-delay: 2s;
}

/* Opcional: microajustes por breakpoint */
@media (max-width: 576px){
  .circles{ width: clamp(240px, 85vw, 560px); aspect-ratio: 16/12; }
  .circle-1{ width: 68%; left: -12%; top: 4%; }
  .circle-2{ width: 52%; right: -16%; bottom: 0; }
}
@media (min-width: 1200px){
  .circles{ width: clamp(800px, 50vw, 1100px); aspect-ratio: 16/9; }
}


.circle-1 {
 
  opacity: 0.8;
  animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92);
  animation-iteration-count: infinite;
  animation-name: float;
  -webkit-animation-name: float;
  animation-duration: 6s;
  -webkit-animation-duration: 6s;
  -webkit-animation-delay: 3.5s;
  animation-delay: 3.5s;
  animation-direction: alternate;
  
}

.circle-2 {

  opacity: 0.8;
  animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92);
  animation-iteration-count: infinite;
  animation-name: float;
  -webkit-animation-name: float;
  animation-duration: 6s;
  -webkit-animation-duration: 6s;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  animation-direction: alternate;
}


.btnAmarillo {
    text-decoration: none;
    display: inline-block;
    background-color:var(--azul);
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 25px;
    padding-right: 25px;
    margin-top: 15px;
    text-align: center;
    color: #FFF;
    border:0;
}

.btnAmarillo:hover {

    background-color:var(--naranja);

}

.form-control, select {
    -webkit-appearance: none;
    -moz-appearance: none; 
    appearance: none;
    width: 100% !important;
    margin-top: 5px;
    border: none;
    background-color: transparent;
    border: solid 1px #CCC !important;
    border-radius: 0 !important;
    margin: 0;
    background-color: #FFF;
}

.oculto{
  display: none;
} 

.error{
  color: red;
  font-size: 0.8rem;
  background-color: #f8d7da;
  color:#58151d;
  border: 1px solid #f1aeb5;
  border-radius: 0.2rem;
  padding: 5px;
  margin-top: 5px;
}

/* Oculta visualmente el honeypot sin display:none */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}