body {
  font-family: Arial, sans-serif;
  background-color: var(--claro2);
  margin: 0;
  padding: 0;
}

/* Contenedor principal */
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}

/* Separa formulario de navbar fijo */
#form-section {
  margin-top: clamp(56px, 7vw, 104px);
}

body.page-contactos {
  padding-top: clamp(12px, 2vw, 28px);
}

/* Unifica fondo del formulario para evitar "cuadro" gris bajo reCAPTCHA */
#form-section .card.bg-light,
#form-section .card-body.bg-light {
  background-color: #fff !important;
}

/* Contenedor de la imagen */
.image-container {
  position: relative;
  width: 100%; /* Ajusta el ancho según el diseño */
  height: 100%;
  overflow: hidden; /* Asegura que la imagen no se desborde del contenedor */
  margin-right: 20px; /* Espacio entre la imagen y el formulario */
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Asegura que la imagen cubra todo el contenedor */
  border-radius: 0.5rem; /* Bordes redondeados si es necesario */
}

.caption {
  position: absolute;
  bottom: 5%;
  left: 5%;
  color: var(--claro);
  background-color: rgba(0, 0, 0, 0.5); /* Fondo oscuro semi-transparente para el texto */
  padding: 10px;
  border-radius: 8px;
  width: 90%; /* Ajusta el ancho máximo del texto */
}

.caption h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  margin-left: 10px;
}

.caption .btn {
  margin-right: 0.5rem;
  padding: 10px 20px;
  font-size: 1rem;
  border-radius: 5px;
  transition: background-color 0.3s ease;
  margin-left: 10px;
}

.caption .btn-outline-light {
  border-color: var(--primario2);
  color: var(--primario2);
}

.caption .btn-outline-light:hover {
  background-color: var(--primario2);
}

.caption .btn-primary {
  background-color: var(--primario);
  border-color: var(--primario);
}

.caption .btn-primary:hover {
  background-color: var(--primario2);
}

/* Formulario */
.form-container {
  width: 50%; /* Ajusta el ancho según el diseño */
}

.form-control {
  border: 1px solid var(--gris-claro);
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 15px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-control:focus {
  border-color: var(--primario);
  box-shadow: 0 0 0 0.2rem rgba(0, 188, 212, 0.25);
}

.btn-send {
  background-color: var(--bs-info, #0dcaf0);
  border-color: var(--bs-info, #0dcaf0);
  padding: 15px;
  font-size: 1rem;
  color: #000;
  border-radius: 5px;
  transition: background-color 0.3s ease;
  width: 304px;
  max-width: 100%;
  height: 78px;
}

.btn-send:hover {
  background-color: #31d2f2;
  border-color: #25cff2;
  color: #000;
}

iframe {
  display: block;
  margin-top: -100;
  width: 100%;
  height: 200px;
}

form {
  display: flex;
  flex-direction: column;
}

form .controls {
  margin-bottom: 0;
}

form .row {
  margin-bottom: 15px;
}

/* Evita "bloques" de color por márgenes negativos de .row en Bootstrap */
#form-section .card .row {
  margin-left: 0;
  margin-right: 0;
}

form .form-group {
  margin-bottom: 15px;
}

form .form-group label {
  display: block;
  margin-bottom: 5px;
  color: var(--oscuro);
  font-weight: bold;
}

form .form-group input,
form .form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--gris-claro);
  border-radius: 4px;
}

form .form-group textarea {
  resize: vertical;
}

form .g-recaptcha {
  margin-bottom: 15px;
}

/* Evita halo/sombra visual alrededor del widget reCAPTCHA */
form .g-recaptcha,
form .g-recaptcha > div,
form .g-recaptcha iframe {
  box-shadow: none !important;
  filter: none !important;
}

/* Responsividad */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }

  .image-container {
    width: 100%;
    margin-right: 0;
  }

  .form-container {
    width: 100%;
  }
}

/* Estilo general para el div de respuesta */
#respuesta {
  margin-top: 20px;
  padding: 15px;
  border-radius: 5px;
  text-align: center;
  font-size: 1.1em;
  font-weight: bold;
}

/* Estilo para mensajes de éxito */
#respuesta.success {
  color: #28a745; 
  background-color: #d4edda; 
  border: 1px solid #c3e6cb;
}

/* Estilo para mensajes de error */
#respuesta.error {
  color: #dc3545; 
  background-color: #f8d7da; 
  border: 1px solid #f5c6cb; 
}