:root {
    --light-green: #edf5f1;
    --light-brown-opacity: rgba(245, 240, 237, 0.6);
    --light-pink: #b2d6ce;
    --dark-green: #4ba18f;
    --super-dark-green: #163730;
    --pastel-brown: #ede6e6;
    --pastel-pink: #e4d8dd;
    --pastel-green: #d7e2df;
    --gray: #46504e;
    --bg-footer: #305045;
    --gris-bg-error: #353535;
    --gris-texto-error: #6b6b6b;
    --rosa-check-gin: #ca0065;
    --verde-check-gin: #70C1A9;
}

input {
    color: var(--super-dark-green);
    height: 2.8rem;
    border-bottom: 2px solid var(--super-dark-green);
    border-top: none;
    border-left: none;
    border-right: none;
    outline: none;
    transition: 0.4s;
    font-weight: 500;
    background-color: transparent;
}

input:focus {
    border-bottom: 2px solid var(--super-dark-green);
    border-top: none;
    border-left: none;
    border-right: none;
    outline: none;
    background-color: var(--light-pink);
    border-radius: .5rem;
}

input:hover {
    background-color: var(--light-pink);
}

textarea {
    border: 2px solid var(--super-dark-green); /* Puedes personalizar el grosor y el color del borde */
    outline: none; /* Esto elimina el contorno al enfocar el textarea */
  }

::selection {
    background: var(--pastel-pink);
    color: var(--super-dark-green);
}

body {
    background-color: white;
    font-family: 'Montserrat', sans-serif;
    margin-top: 72px
}

.header-contacto {
    background-image: url(/img/Header-contacto.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 7rem;
    padding-bottom: 7rem;
}

.header-contacto h1 {
    color: white;
    font-weight: 600;
    font-size: 3rem;
}

.whatsapp-contacto h2 {
    font-size: 3rem;
}

.linea-divisora {
    border: none;
    height: 2px;
    background-color: white;
    width: 100%; 
}

.infra {
    margin-top: 6rem;
    margin-bottom: 2rem;
}

.header-contacto span {
    color: white;
    font-weight: 600;
}

.ckeckgin {
    color: white;
    text-align: justify;
    background-color: var(--super-dark-green);
    background-image: url(/img/Icono-whatsapp-bg.svg);
    background-repeat: no-repeat;
    background-position: center center;
    overflow: hidden;
    border-radius: 0.7rem;
}

.ckeckgin h2{
    color: var(--verde-check-gin);
    font-size: clamp(1rem, 5vw, 2.5rem);
}

.ckeckgin strong{
    color: var(--rosa-check-gin);
}

.borde {
    border: 2px solid red;
}

.boton-grande {
    color: var(--super-dark-green);
    background-color: var(--light-pink);
    border: 2px solid var(--light-pink);
    border-radius: .5rem;
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    transition: .5s;
    display: block;
}

.boton-grande:hover {
    color: var(--light-brown);
    background-color: var(--super-dark-green);
    font-weight: 700;
}

.boton-contenedor:hover #iconoWhatsapp {
    filter: invert(100%) brightness(500%);
}

.formulario {
    color: var(--bg-footer);
    font-weight: 600;
    background-color: white;
    border: 1px solid var(--super-dark-green);
    background-image: url(/img/HyM.svg);
    background-repeat: no-repeat;
    overflow: hidden;
    background-size: 500px;
    background-position: center center;
}

.boton-enviar {
    color: var(--pastel-green);
    font-size: 1.2rem;
    font-weight: 600;
    height: 5rem;
    background-color: var(--super-dark-green);
    border: 2px solid var(--super-dark-green);
    border-radius: .5rem;
    transition: 0.7s;
}

.boton-enviar:hover {
    color: var(--super-dark-green);
    background-color: transparent;
}

.infra h3 {
    color: var(--super-dark-green);
    font-weight: 600;
}

.infra li {
    color: var(--super-dark-green);
    margin-bottom: 10px;
}

.error-message {
    font-size: 0.9rem;
    color: red;
    display: none;
}

.boton-invalido {
    background-color: var(--gris-bg-error);
    color: var(--gris-texto-error);
    cursor: not-allowed;
}

.boton-invalido:hover {
    background-color: var(--gris-bg-error);
    color: var(--gris-texto-error);
}
 

.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
  background-color: var(--bg-footer)
}

.dropdown-menu .dropdown-item:hover {
    color: white;
  background-color: var(--dark-green) 
}

.caracteristicas h2 {
    font-size: 1.1rem;
}