/*Contactanos*/


    .contacto-section {
      background: url('../img/Fondo contactos alternativo.png') center/cover no-repeat;       
      padding: 4rem 1rem;
    }

    .contacto-card {
      padding: 2.5rem 3rem;
     /* background-color: white;
      border-radius: 1.5rem;
      padding: 2.5rem 3rem;
      box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);*/
    }

  .contact-title {
    font-size: 3.2rem; 
    color: #fff;
  }

  /* Ajuste en móvil */
  @media (max-width: 768px) {
    .contact-title {
      font-size: 2.8rem;   /* más pequeño en tablets y móviles */
    }
  }

    .contact-text {
      font-size: 1.4rem;
      margin-top: 0.5rem;
      color: #fff;
    }
    .contact-button {
      margin-top: 1.5rem; 
      color: #fff;
      border-radius: 50px;
      padding: 0.5rem 0.2rem; 
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      text-decoration: underline;
      font-weight: bold;
      transition: all 0.3s;
      font-size: 1.4rem;

    }

    .contact-button:hover { 
      color: #fff;
    }

/*
    .contact-button {
      margin-top: 1.5rem;
      border: 3px solid #fff;
      color: #fff;
      border-radius: 50px;
      padding: 0.5rem 1.5rem; 
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      text-decoration: none;
      transition: all 0.3s;
    }

    .contact-button:hover {
      background-color: #1d5f90;
      color: #fff;
    }*/


/* Si por alguna razón no puedes tocar el HTML, fuerza por CSS: */
.contacto-card .row { align-items: flex-start !important; }

/* Reduce el espacio superior de los íconos si quieres que queden más pegados */
.social-icons-footer { margin-top: .5rem; }

/* Asegura que la columna central no se expanda rara vez */
.col-md-4.d-flex { gap: .5rem; }



/* Dirección */
.icon-label{
  display:flex;
  align-items:flex-start;
  gap:.5rem;
  color:#fff;
  font-size: 1.2rem;
}
.icon-label i{
  color:#fff;           /* pin azul */
  font-size:1.1rem;
  line-height:1;
  margin-top:.15rem;
}

/* celular */
.contact-phone{
  display:flex;
  align-items:flex-start;
  gap:.5rem;
  color:#fff;
  font-size: 1.2rem;
}
/* Íconos sociales – solo el glifo, sin fondo */
.social-icons-footer{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 8px;
}
.social-icons-footer i{
  font-size:2.6rem;
  line-height:1;
  color:#222;               /* negro/gris */
  background:none !important;
  padding:2 !important;
  width:auto; height:auto; border-radius:0;
  box-shadow:none;
  transition:color .2s ease;
}
 
/* 1) Los <i> heredan el color del enlace padre */
.social-icons-footer i{
  color: currentColor !important;  /* en lugar de #222 */
}

/* 2) Pinta cada enlace por red */
.social-icons-footer a.icon-linkedin  { color:#0a66c2; }  /* LinkedIn */
.social-icons-footer a.icon-facebook  { color:#1877f2; }  /* Facebook */
.social-icons-footer a.icon-instagram { color:#c13584; }  /* Instagram */
.social-icons-footer a.icon-youtube   { color:#ff0000; }  /* YouTube */

/* (opcional) estilo base del enlace/efecto hover */
.social-icons-footer a.si{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; text-decoration:none;
  font-size:1.25rem; line-height:1;
  transition: filter .2s ease, transform .1s ease;
}
.social-icons-footer a.si:hover{
  filter:brightness(1.1);
  transform:translateY(-1px);
}










    .mailto { 
      color: #fff; 
      text-decoration: none;
    }

    .mailto:hover { 
      color: #fff;
    }









    .contacto-datos {
      text-align: right;
      font-size: 0.95rem;
    }

    .contacto-datos i {
      margin-right: 6px;
      color: #1e73be;
    }

    .contacto-datos p {
      margin-bottom: 0.8rem;
      line-height: 1.4;
    }

    @media (max-width: 768px) {
      .contacto-datos {
        text-align: left;
        margin-top: 2rem;
      }

      .text-start-md {
        text-align: start !important;
      }
    }













 







/* ===== Modal fondo + overlay ===== */
.contacto-modal{
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.2);
  color: #e7f2ff;
      background: url('https://www.transparenttextures.com/patterns/stardust.png'), radial-gradient(circle at center, #000c2b, #000924);
}
.contacto-modal::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.55)),
    url("../img/Fondo Contactanos y Formulario de Contacto.jpg") center/cover no-repeat;
  z-index:-1;
}

/* ===== Campos oscuros con borde azul ===== */
:root{ --c-azul:#0368AA; --c-azul2:#5ec2ff; }

.form-dark{
  background: transparent !important;
  color: #eef7ff !important;
  border: 2px solid rgba(94,194,255,.55) !important;
  border-radius: 12px;
  padding: .6rem .9rem;
}
.form-dark::placeholder{ color: rgba(255,255,255,.8); }
.form-dark:focus{
  border-color: var(--c-azul2) !important;
  box-shadow: 0 0 0 .2rem rgba(3,104,170,.25);
  outline: none;
}

/* Select en oscuro */
.form-select.form-dark{
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 16 16'%3e%3cpath d='M3.204 5h9.592L8 10.481z'/%3e%3c/svg%3e");
  color:#eef7ff;
}
/* === Placeholders en gris claro (poner al FINAL de tu CSS) === */
:root{ --plomo-claro: #cfd6dd; } /* el tono que quieras */

.form-control.form-dark::placeholder,
textarea.form-control.form-dark::placeholder{
  color: var(--plomo-claro) !important;
  opacity: 1; /* algunos navegadores bajan la opacidad */
}

/* Compatibilidad */
.form-control.form-dark::-webkit-input-placeholder{ color: var(--plomo-claro) !important; }
.form-control.form-dark::-moz-placeholder{          color: var(--plomo-claro) !important; opacity:1; }
.form-control.form-dark:-moz-placeholder{           color: var(--plomo-claro) !important; opacity:1; }
.form-control.form-dark:-ms-input-placeholder{      color: var(--plomo-claro) !important; }
.form-control.form-dark::-ms-input-placeholder{     color: var(--plomo-claro) !important; }

/* === Select: “Tipo de Consulta” en gris claro hasta que elijan === */
.form-select.form-dark:required:invalid{ color: var(--plomo-claro) !important; }
.form-select.form-dark:not(:required:invalid){ color: #eef7ff !important; } /* color normal tras elegir */
/* Las opciones del desplegable en color oscuro para que se lean bien */
.form-select.form-dark option{ color:#111; }
:root{ --c-azul2:#5ec2ff; } /* por si no estaba definido */

/* más específico por si usas también la clase .btn de Bootstrap */
.btn.btn-send,
.btn-send{
  background: transparent;
  color: #fff;
  border: 2px solid var(--c-azul2) !important;  /* ancho + estilo + color */
  border-radius: 50px;
  padding: .55rem 1.6rem .55rem 1.6rem;
  font-weight: 600;
  letter-spacing: .2px;
  box-shadow: none; /* evita brillos de Bootstrap */
   float: right;
}

.btn-send .arrow{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; margin-left:.65rem;
  border-radius:50%;
  border:2px solid var(--c-azul2);
  line-height:1; font-size:18px;
}

/* no cambiar en hover/focus */
.btn.btn-send:hover,
.btn.btn-send:focus,
.btn-send:hover,
.btn-send:focus{
  background: transparent;
  color:#fff;
  border-color: var(--c-azul2) !important;
  text-decoration: none;
  box-shadow: none;
}


/* Logo */
.logo-bits{ max-width: 280px; }

/* Cierre blanco */
.btn-close-white{ filter: invert(1); }
.title-form-contacto {
  color: #2d8bba;
  text-align: center;
  font-size: 1.4rem; /* base para móvil */
}

@media (min-width: 576px) { /* sm */
  .title-form-contacto {
    font-size: 1.6rem;
  }
}

@media (min-width: 768px) { /* md */
  .title-form-contacto {
    font-size: 1.8rem;
  }
}

@media (min-width: 992px) { /* lg */
  .title-form-contacto {
    font-size: 2rem;
  }
}
 

    #btnTop {
      display: none; /* Oculto por defecto */
      position: fixed;
      bottom: 40px;
      right: 40px;
      z-index: 99;
      border: none;
      outline: none;
      background-color: #0d6efd; /* Azul Bootstrap */
      color: white;
      cursor: pointer;
      padding: 12px 16px;
      border-radius: 50%;
      font-size: 18px;
      box-shadow: 0px 4px 6px rgba(0,0,0,0.2);
      transition: all 0.3s ease;
    }
    #btnTop:hover {
      background-color: #0b5ed7;
    }


.italic-input {
    font-style: italic;
}