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


:root{
	--naranja: #CCC;
	--azul:#077600;
	--azulete:#89b6e6;
}

body{
  display: block;
  position: center;
    font-family: 'Montserrat', 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;

}

body {
  /* color sólido de respaldo */
  background: #085e2d;
  /* degradado */
  background: linear-gradient(135deg, #085e2d 0%, #67a121 100%);
  min-height: 100vh;
  background-attachment: fixed; /* opcional: efecto suave al hacer scroll */
}

/* (Opcional) como utilidad para cualquier bloque/section */
.bg-campoastur {
  background: #085e2d;
  background: linear-gradient(135deg, #085e2d 0%, #67a121 100%);
}

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, 1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
  padding: 30px 30px 30px 30px;
  overflow: hidden;
  max-width: 800px;
  
}



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);
    color: #000;

}

.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;}


/* Propiedad animable para suavidad */
@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.cuadro{
  max-width: 800px;
  padding: 30px;
  background-color: #FFF;
  width: 800px;
}
/* Borde brillante animado para .cuadro */
._cuadro{
  /* tus valores originales + variables del efecto */
  --b: 3px;              /* grosor del borde */
  --r: 20px;             /* mismo radio que ya usas */
  --speed: 6s;           /* velocidad del giro */

  position: relative;
  width: auto;
  height: auto;
  max-width: 800px;
  padding: 30px;
  border-radius: var(--r);
  /* ¡importante! el borde físico va transparente para que se vea el degradado */
  border: var(--b) solid transparent;

  /* fondo interior + pintura del borde */
  background:
    linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)) padding-box,     /* interior translúcido */
    conic-gradient(from var(--angle),
      /* Colores “Campoastur”: verde + amarillo + blanco; cámbialos si quieres */
      #A7D500, #FFC400, #FFFFFF, #A7D500
    ) border-box;                                                                  /* anillo del borde */

  /* lo que ya tenías */
  backdrop-filter: blur(4px);
  box-shadow: 0 0 80px rgba(0,0,0,0.25);
  overflow: hidden;

  /* animación del ángulo */
  animation: giro var(--speed) linear infinite;
}

/* Brillito suave opcional alrededor */
.cuadro{
  box-shadow:
    0 0 .6rem rgba(255, 196, 0, .25),
    0 0 1.2rem rgba(167, 213, 0, .2),
    0 0 80px rgba(0,0,0,.25);
}

@keyframes giro { to { --angle: 1turn; } }

/* Accesibilidad: sin animar si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce){
  .cuadro{ animation: none; }
}

.bordeRojo { border-color: #dc3545 !important; }
  .error { display:none; color:#dc3545; font-size:.875rem; margin-top:.25rem; }