:root {
  /* Colores */
  --color-morado: #1a052d; /* Morado oscuro */
  --color-verde: #6cf3ce; /* Verde */
  --color-fucsia: #ff4361; /* Fucsia*/
  --color-gris-claro: #f5f5f5; /* Gris claro */



  /* Tipografías */
  --fuente-montserrat: "Montserrat", sans-serif;
  --fuente-krona: "Krona One", sans-serif;
}

* {
  box-sizing: border-box;
  text-decoration: none;
}

html {
  font-size: 62.5%; /* 1rem = 10px */
}

body {
  font-size: 1.6rem; /* 1.6rem = 16px */
  margin: 0;
  padding: 0;
}

/* fondo fijo */

@keyframes hero-gradient-animation {
  0% {
    --x-0: 98%;
    --c-0: hsla(92, 0%, 100%, 0.86);
    --y-0: 98%;
    --s-start-0: 2%;
    --s-end-0: 78.72573401919361%;
  }

  100% {
    --x-0: 2%;
    --c-0: hsla(321, 0%, 100%, 0.86);
    --y-0: 98%;
    --s-start-0: 2%;
    --s-end-0: 78.72573401919361%;
  }
}

@property --x-0 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 98%;
}

@property --c-0 {
  syntax: "<color>";
  inherits: false;
  initial-value: hsla(92, 0%, 100%, 0.86);
}

@property --y-0 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 98%;
}

@property --s-start-0 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 2%;
}

@property --s-end-0 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 78.72573401919361%;
}

@property --y-1 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 91%;
}

@property --s-start-1 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 2%;
}

@property --s-end-1 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 78.72573401919361%;
}

@property --c-1 {
  syntax: "<color>";
  inherits: false;
  initial-value: hsla(321, 100%, 13%, 0.42);
}

@property --x-1 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 98%;
}

@property --c-2 {
  syntax: "<color>";
  inherits: false;
  initial-value: hsla(218, 41%, 29%, 0.42);
}

@property --s-start-2 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 2%;
}

@property --s-end-2 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 61.288600779667334%;
}

@property --x-2 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 16%;
}

@property --y-2 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 87%;
}

@property --y-3 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 79%;
}

@property --s-start-3 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 2%;
}

@property --s-end-3 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 61.288600779667334%;
}

@property --x-3 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 52%;
}

@property --c-3 {
  syntax: "<color>";
  inherits: false;
  initial-value: hsla(289, 35%, 25%, 0.42);
}

.fondo-fijo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -10;
  background-size: cover; /* Asegura que el fondo cubra toda la pantalla */
  background-attachment: fixed; /* Mantiene el fondo fijo al hacer scroll */

  --x-0: 98%;
  --c-0: hsla(92, 0%, 100%, 0.86);
  --y-0: 98%;
  --y-1: 91%;
  --c-1: hsla(321, 100%, 13%, 0.42);
  --x-1: 98%;
  --c-2: hsla(218, 41%, 29%, 0.42);
  --x-2: 16%;
  --y-2: 87%;
  --y-3: 79%;
  --x-3: 52%;
  --c-3: hsla(289, 35%, 25%, 0.42);
  background-color: hsla(271.50000000000006, 80%, 9%, 1);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1922 1922' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"),
    radial-gradient(
      circle at var(--x-0) var(--y-0),
      var(--c-0) var(--s-start-0),
      transparent var(--s-end-0)
    ),
    radial-gradient(
      circle at var(--x-1) var(--y-1),
      var(--c-1) var(--s-start-1),
      transparent var(--s-end-1)
    ),
    radial-gradient(
      circle at var(--x-2) var(--y-2),
      var(--c-2) var(--s-start-2),
      transparent var(--s-end-2)
    ),
    radial-gradient(
      circle at var(--x-3) var(--y-3),
      var(--c-3) var(--s-start-3),
      transparent var(--s-end-3)
    );
  animation: hero-gradient-animation 5s linear infinite alternate;
  background-blend-mode: overlay, overlay, normal, normal, normal;
}

@media screen and (min-width: 370px) and (max-width: 760px) {
  .fondo-fijo {
    background-attachment: scroll;
  }
}

/* Fin fondo fijo */

/* Estilo para la barra de desplazamiento en todo el sitio */
::-webkit-scrollbar {
  width: 10px; /* Ancho de la barra de scroll vertical */
}

/* Estilo para la pista de la barra de desplazamiento */
::-webkit-scrollbar-track {
  background: #1a052d; /* Color de fondo de la pista */
}

/* Estilo para el "dedo" (thumb) de la barra de desplazamiento */
::-webkit-scrollbar-thumb {
  background-color: #ff4361; /* Color del thumb */
  border-radius: 10px; /* Bordes redondeados del thumb */
  border: 1px solid #ff4361; /* Borde alrededor del thumb */
}

/* Estilo para el thumb cuando se pasa el cursor por encima */
::-webkit-scrollbar-thumb:hover {
  background-color: #6cf3ce; /* Color del thumb al pasar el mouse */
  border: 1px solid #6cf3ce;
}

/* Responsive monitor 27pulg menu header */
@media screen and (min-width: 1920px) {
  .header {
    padding: 3rem 14rem;
  }
}

/* Fin del header y menú */

/* ESTILO ALERTA ERROR */
.alerta-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  border-radius: 5px;
  margin: 20px auto;
  width: 90%; /* Ancho de la alerta */
  border: 1px solid rgba(241, 6, 6, 0.81); /* Borde de la alerta */
  background-color: rgba(220, 17, 1, 0.16); /* Fondo de la alerta */
  box-shadow: 0px 0px 2px #ff0303; /* Sombra para darle profundidad */
  color: #ff0303; /* Color del texto */
  transition: 0.5s;
  cursor: pointer;
  z-index: 9999;
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.alerta-error:hover {
  background-color: rgba(220, 17, 1, 0.33);
  transition: 0.5s;
}

.alerta-error::before {
  content: "";
  position: absolute;
  top: 50%; /* Centra la línea verticalmente */
  left: 0px; /* Posición de la línea a la izquierda */
  transform: translateY(-50%); /* Ajusta la línea para que esté centrada */
  width: 3px; /* Ancho de la línea */
  height: 25px; /* Altura de la línea */
  background-color: #ff0303; /* Color de la línea */
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-right: 1px solid #ff0303; /* Borde derecho para separarla del contenido */
}

.mensaje-error {
  flex: 1;
  margin-left: 10px;
  color: #ff0303; /* Color del mensaje */
  font-family: var(--poppins);
  font-size: 1.6rem;
  font-weight: 500;
}

.cerrar-error {
  cursor: pointer;
  background: none; /* Sin fondo */
  border: none; /* Sin borde */
  font-size: 20px;
  color: #ff0303; /* Color del icono */
  -webkit-animation: parpadear 2s infinite both;
  animation: parpadear 2s infinite both;
  padding: 0; /* Sin padding */
}

.cerrar-error:hover {
  color: #ff2e2e; /* Color al pasar el mouse */
}

.cerrar-error:focus {
  outline: none; /* Sin borde al recibir foco */
}

@-webkit-keyframes parpadear {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}

@keyframes parpadear {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}

/* ESTILOS ALERTA DE EXITO DE ENVIO */
.alerta-exito {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  border-radius: 5px;
  margin: 20px auto;
  width: 90%; /* Ancho de la alerta */
  position: relative;
  border: 1px solid rgba(36, 241, 6, 0.46); /* Borde de la alerta */
  background-color: rgba(
    7,
    149,
    66,
    0.12156862745098039
  ); /* Fondo de la alerta */
  box-shadow: 0px 0px 2px #259c08; /* Sombra para darle profundidad */
  color: #0ad406; /* Color del texto */
  transition: 0.5s;
  cursor: pointer;
  z-index: 9999;
  position: fixed;
  top: 20px; /* Ajusta este valor según sea necesario */
  left: 50%;
  transform: translateX(-50%);
}

.alerta-exito:hover {
  background-color: rgba(7, 149, 66, 0.35);
  transition: 0.5s;
}

.alerta-exito::before {
  content: "";
  position: absolute;
  top: 50%; /* Centra la línea verticalmente */
  left: 0px; /* Posición de la línea a la izquierda */
  transform: translateY(-50%); /* Ajusta la línea para que esté centrada */
  width: 3px; /* Ancho de la línea */
  height: 25px; /* Altura de la línea */
  background-color: #25ff0b; /* Color de la línea */
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-right: 1px solid #25ff0b; /* Borde derecho para separarla del contenido */
}

.mensaje-exito {
  flex: 1;
  margin-left: 10px;
  color: #25ff0b; /* Color del mensaje */
  font-family: var(--poppins);
  font-size: 1.6rem;
  font-weight: 500;
}

.cerrar-exito {
  cursor: pointer;
  background: none; /* Sin fondo */
  border: none; /* Sin borde */
  font-size: 20px;
  color: #25ff0b; /* Color del icono */
  -webkit-animation: parpadear 2s infinite both;
  animation: parpadear 2s infinite both;
  padding: 0; /* Sin padding */
}

.cerrar-exito:hover {
  color: #25ff0b; /* Color al pasar el mouse */
}

.cerrar-exito:focus {
  outline: none; /* Sin borde al recibir foco */
}

@-webkit-keyframes parpadear {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}

@keyframes parpadear {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}

/* FIN ESTILOS ALERTA */


.seccion-formulario {
 display: grid;
 grid-template-columns: 1fr 1fr;
 padding: 2rem 6rem;
 gap: 5rem;
}

.titulo-formulario h2 {
  font-family: var(--fuente-krona);
  font-weight: 700;
  font-size: 4rem;
  text-align: left;
  background: linear-gradient(
    to right,
    #6cf3ce,
    #6cf3ce,
    #ff4361,
    #ff4361,
    #ff4361,
    #ff4361,
    #ff4361,
    #ff4361
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 5rem 0 2rem 0;
}

.titulo-formulario p {
  font-family: var(--fuente-montserrat);
  font-weight: 400;
  font-size: 1.6rem;
  margin-top: 1rem;
  line-height: 1.6;
  color: var(--color-gris-claro)
}

/* Modulo derecho rrss y boton de trabajemos juntos */

.contenedor-rrss-btn {
  display: flex;
  margin-top: 3rem;
}

.modulo-rrss-btn {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding: 1rem 1.1rem;
  border-radius: 3rem;
  position: relative;

  /* Fondo con efecto de vidrio */
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.modulo-rrss-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 3rem;
  padding: 2px; /* Ancho del borde degradado */
  background: linear-gradient(to right, #6cf3ce, #6cf3ce, #ff4361, #ff4361);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  z-index: -1;
}

.modulo-rrss-btn > * {
  position: relative;
  z-index: 1;
}

.iconos-sociales {
  display: flex;
  gap: 2.5rem;
  font-family: var(--fuente-montserrat);
  margin: 0;
  padding: 0;
}

.iconos-sociales .icon {
  position: relative;
  z-index: 0;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.iconos-sociales .icon i {
  font-size: 2rem;
  color: var(--color-gris-claro);
}

.iconos-sociales .icon::after {
  content: "";
  position: absolute;
  display: inline-block;
  height: 100%;
  width: 100%;
  background-color: transparent;
  z-index: -1;
  border-radius: 50%;
  top: 100%;
}

.iconos-sociales .icon:hover::after {
  animation: bg-pos 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) 1 both;
  animation-timing-function: ease-in-out;
}

.iconos-sociales .icon:hover {
  color: #fff;
  overflow: unset;
  transition: color 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  animation: overflow-toggle 0.7s;
}

.iconos-sociales .icon a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; /* Asegura que cubra el ícono */
  height: 100%;
  color: inherit; /* Hereda el color del contenedor */
  text-decoration: none; /* Quita el subrayado */
}

.iconos-sociales .icon a:hover {
  color: inherit; /* Mantiene el color actual al hacer hover */
}



.iconos-sociales .tooltip {
  position: absolute;
  top: 0;
  font-family: var(--fuente-montserrat);
  font-weight: 500;
  font-size: 15px;
  background: #fff;
  color: #fff;
  padding: 5px 8px;
  border-radius: 5px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.iconos-sociales .tooltip::before {
  position: absolute;
  content: "";
  height: 8px;
  width: 8px;
  background: #fff;
  bottom: -3px;
  left: 50%;
  transform: translate(-50%) rotate(45deg);
  transition: all 0.3s 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.iconos-sociales .icon:hover .tooltip {
  top: -45px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.iconos-sociales .icon:hover span,
.iconos-sociales .icon:hover .tooltip {
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
}

.iconos-sociales .facebook::after {
  background-color: #1877f2;
}

.iconos-sociales .tiktok::after {
  background-color: #000000; /* Color negro típico de TikTok */
}

.iconos-sociales .instagram::after {
  background-color: #e4405f;
}

.iconos-sociales .whatsapp::after {
  background-color: #075e54;
}


.iconos-sociales .facebook:hover .tooltip,
.iconos-sociales .facebook:hover .tooltip::before {
  background: #1877f2;
  color: #fff;
}

.iconos-sociales .tiktok:hover .tooltip,
.iconos-sociales .tiktok:hover .tooltip::before {
  background: #000000;
  color: #fff;
}

.iconos-sociales .instagram:hover .tooltip,
.iconos-sociales .instagram:hover .tooltip::before {
  background: #e4405f;
  color: #fff;
}

.iconos-sociales .whatsapp:hover .tooltip,
.iconos-sociales .whatsapp:hover .tooltip::before {
  background: #075E54;
  color: #fff;
}


@keyframes bg-pos {
  0% {
      top: 100%;
  }
  100% {
      top: 0;
  }
}

@keyframes overflow-toggle {
  0% {
      overflow: hidden;
  }
  100% {
      overflow: visible;
  }
}




/* Responsive de Hablemos izquierdo*/

/* Media queries para pantallas pequeñas */
@media (max-width: 768px) {
 
}

/* Responsive Celular Seccion2 */
@media (max-width: 445px) {
  .seccion-formulario {
    display: grid;
    grid-template-columns: 1fr;
    padding: 0 2rem 0 2rem;
    margin-top: 14rem;
  }
  
  .titulo-formulario h2 {
    font-family: var(--fuente-krona);
    font-weight: 700;
    font-size: 4rem;
    text-align: left;
    background: linear-gradient(
      to right,
      #6cf3ce,
      #6cf3ce,
      #ff4361,
      #ff4361,
      #ff4361
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin: 5rem 0 2rem 0;
  }
  

  .titulo-formulario p {
    font-size: 1.8rem;
    margin: 1rem 0 3rem 0;
    line-height: 1.6;
  }

  .titulo-formulario br {
    display: none;
  }

  .iconos-sociales {
    gap: 3rem;
  }
  
  .iconos-sociales .icon {
    border-radius: 50%;
    width: 50px;
    height: 50px;
  }
  

  .iconos-sociales .icon i {
    font-size: 2.7rem;
  }
  
  

}



/* Responsive monitor 27p menu Seccion2 */
@media screen and (min-width: 1920px) {

  .seccion-formulario {
    padding: 0 14rem 0 14rem;/* arriba, derecha, abajo, izquierda */
  }
}




/* Contenedor general del formulario */
form {
  margin: 2rem 0;
  padding: 3rem 0;
  font-family: var(--fuente-montserrat);
}

.group-formulario {
  position: relative;
  margin-bottom: 3.5rem;
}

.group-formulario label {
  position: absolute;
  top: 5px;
  left: 0;
  color: var(--color-gris-claro);
  pointer-events: none;
  transition: all 0.2s ease;
  font-family: var(--fuente-montserrat);
  font-size: 1.5rem;
  font-weight: 600;
}

label[for="numero_telefono"] {
  position: static;
  color: var(--color-gris-claro);
  font-family: var(--fuente-montserrat);
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
  display: block;
}

label[for="servicio_interes"] {
  position: static;
  color: var(--color-gris-claro);
  font-family: var(--fuente-montserrat);
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
  display: block;
}

#servicio_interes {
  appearance: none; /* Elimina el estilo predeterminado del navegador */
  background-color: transparent;
  color: white;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.327);
  padding: 10px;
  padding-left: 0.5rem;
  font-family: var(--fuente-montserrat);
  font-size: 1.5rem;
  font-weight: 500;
  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="white" d="M0 0l2 2 2-2z"/></svg>');
  background-repeat: no-repeat;
  background-position: calc(100% - 1.5rem) center;
  background-size: 10px;
  cursor: pointer;
}

#servicio_interes:focus {
  outline: none;
}

#servicio_interes option {
  background-color: var(--color-gris-claro);
  color: var(--color-morado);
  font-size: 1.6rem;
  font-family: var(--fuente-montserrat);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

/* Campos de entrada */
form input[type="text"],
form input[type="email"],
form input[type="tel"],
form textarea,
form select {
  padding-top: 10px;
  padding-bottom: 9px;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.327);
  outline: none;
  width: 100%;
  background-color: transparent;
  color: white;
  box-shadow: none;
  resize: none;
  caret-color: var(--color-gris-claro);
  font-family: var(--fuente-montserrat);
  font-size: 1.5rem;
  font-weight: 500;
}

form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="tel"]:focus,
form textarea:focus {
  background-color: transparent;
  color: white;
  box-shadow: none;
  caret-color: var(--color-gris-claro);
}

form input[type="text"]:focus + label,
form input[type="email"]:focus + label,
form textarea:focus + label,
form input[type="text"]:not(:placeholder-shown) + label,
form input[type="email"]:not(:placeholder-shown) + label,
form textarea:not(:placeholder-shown) + label {
  top: -1.5rem;
  left: 0;
  font-size: 1.5rem;
  color: var(--color-gris-claro);
  opacity: 1;
  visibility: visible;
}

/* .group-formulario input::placeholder, 
.group-formulario textarea::placeholder {
  opacity: 0;
}*/

/* Botón de envío */

form button[type="submit"] {
  display: inline-block;
  padding: 0.9rem 2.5rem;
  font-family: var(--fuente-montserrat);
  font-size: 1.6rem;
  font-weight: 500;
  color: #1a052d;
  background: linear-gradient(
    to right,
    #6cf3ce,
    #6cf3ce,
    #ff4361,
    #ff4361
  );
  border-radius: 2rem;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease;
  border: none;
  cursor: pointer;
}

form button[type="submit"]:hover {
  background: linear-gradient(45deg, #ff4361, #ff4361, #6cf3ce, #6cf3ce);
}

.group-lateral {
  display: flex;
  flex-wrap: wrap; /* Si en pantallas pequeñas quieres que se bajen */
  gap: 5rem; /* Ajusta el espacio entre campos según gustes */
  align-items: flex-end; /* Ajusta verticalmente si es necesario */
}

/* Ajustes opcionales para que mantengan el mismo alto */
.group-lateral .group-formulario {
  flex: 1;
  min-width: 250px; /* Ajusta según tu diseño */
}

/* Flecha en estado normal */
.iti__arrow {
  border-left: var(--iti-triangle-border) solid transparent;
  border-right: var(--iti-triangle-border) solid transparent;
  border-top: var(--iti-arrow-height) solid var(--color-gris-claro) !important;
}

/* Flecha cuando está activa (hacia arriba) */
.iti__arrow--up {
  border-bottom: var(--iti-arrow-height) solid var(--color-gris-claro) !important;
  border-top: none;
}

/*numero de indicativo */
.iti__selected-dial-code {
  color: var(--color-gris-claro); /* Cambia este color */
  font-family: "Montserrat", sans-serif; /* Cambia la tipografía */
  font-size: 1.5rem; /* Tamaño de fuente */
  font-weight: 500; /* Estilo de fuente */
}

/* Número de Ejemplo (Placeholder) */
.iti input.iti__tel-input::placeholder {
  color: #ffffffb5; /* Cambia el color del texto de ejemplo */
  font-family: var(--fuente-montserrat); /* Cambia la tipografía */
  font-size: 1.5rem; /* Tamaño de fuente */
}



/* Estilo para el buscador (input) */
.iti__search-input {
  font-family: 'Montserrat', sans-serif; /* Tipografía personalizada */
  font-size: 14px; /* Tamaño de fuente */
  color: #ffffff; /* Color del texto que se escribe */
  background-color: #1a052d; /* Color de fondo del input */
  border: 1px solid #6cf3ce; /* Borde personalizado */
  border-radius: 5px; /* Bordes redondeados */
  padding: 8px; /* Espaciado interno */
}

/* Placeholder del buscador */
.iti__search-input::placeholder {
  font-family: 'Montserrat', sans-serif; /* Tipografía personalizada */
  font-size: 14px; /* Tamaño de fuente */
  color: #999999; /* Color del placeholder */
  opacity: 0.7; /* Transparencia del placeholder */
}

/* Estilo al enfocar el input */
.iti__search-input:focus {
  outline: none; /* Quitar el borde por defecto */
  box-shadow: 0 0 5px rgba(255, 67, 97, 0.5); /* Sombra al enfocar */
  color: var(--color-morado) !important; /* Asegurar el color del texto */
}

/* Estilo del texto escrito en el input */
.iti__search-input {
  caret-color: var(--color-morado) !important; /* Color del cursor de texto */
}



/* Responsive de Hablemos derecho*/

/* Media queries para pantallas pequeñas */
@media (max-width: 768px) {
 
}

/* Responsive Celular Seccion2 */
@media (max-width: 445px) {
  form {
    margin: 0;
    margin-top: 5rem;
    padding: 1rem;
  }
  
  .group-formulario {
    position: relative;
    margin-bottom: 6rem;
  }
  

  .group-formulario label {
    top: 1px;
    font-size: 1.9rem;
    font-weight: 600;
  }
  
  label[for="numero_telefono"] {
    font-family: var(--fuente-montserrat);
    font-size: 1.9rem;
    font-weight: 600;
  }
  
  label[for="servicio_interes"] {
    font-family: var(--fuente-montserrat);
    font-size: 1.9rem;
    font-weight: 600;
  }
  
  #servicio_interes {
    font-size: 1.9rem;
  }

  #servicio_interes option {
    font-size: 1.6rem;
  }

.group-lateral {
  gap: 0rem; /* Ajusta el espacio entre campos según gustes */
}

form button[type="submit"] {
  font-size: 2rem;
  padding: 0.9rem 3.5rem;
}

/*numero de indicativo */
.iti__selected-dial-code {
  color: var(--color-gris-claro); /* Cambia este color */
  font-family: "Montserrat", sans-serif; /* Cambia la tipografía */
  font-size: 1.6rem; /* Tamaño de fuente */
  font-weight: 500; /* Estilo de fuente */
}


/* Número de Ejemplo (Placeholder) */
.iti input.iti__tel-input::placeholder {
  color: #ffffffb5; /* Cambia el color del texto de ejemplo */
  font-family: var(--fuente-montserrat); /* Cambia la tipografía */
  font-size: 1.6rem; /* Tamaño de fuente */
}



}



/* Responsive monitor 27p menu Seccion2 */
@media screen and (min-width: 1920px) {

  form {
    margin: 2rem 0;
    padding: 3rem 0;
  }
}







.footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 20rem 0 0 0;
  height: auto;
  text-align: center;
}

.contenedor-footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem; /* Espacio entre las líneas */
}

.texto-footer {
  font-family: var(--fuente-krona);
  font-size: 5rem;
  color: var(--color-gris-claro);
}

.texto-footer-descripcion {
  font-family: var(--fuente-krona);
  font-size: 5rem;
  color: var(--color-gris-claro);
  margin-bottom: 20rem;
}

.palabra-dinamica {
  display: inline-block;
  font-family: var(--fuente-krona);
  font-weight: 700;
  font-size: 5.5rem;
  background: linear-gradient(
      to right,
      #6cf3ce,
      #6cf3ce,
      #6cf3ce,
      #ff4361,
      #ff4361,
      #ff4361
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
  overflow: hidden;
  border-right: 4px solid #ff4361;
  animation: cursor 0.7s steps(1) infinite;
}

@keyframes cursor {
  50% {
      border-color: transparent;
  }
}

/* .parrafo-footer { 
  font-family: var(--fuente-montserrat);
  font-size: 1.7rem;
  font-weight: 400;
  color: var(--color-gris-claro);
  margin-top: 2rem;
  margin-bottom: 3rem;
}*/


/* Ajustes específicos para el botón en el footer */

.divider-footer {
    border: none;
    height: 1px; /* Grosor de la línea */
    width: calc(100% - 12rem); /* Resta 6rem de cada lado */
    margin: 0 auto; /* Centra la línea horizontalmente */
    background: linear-gradient(to right, #6cf3ce, #6cf3ce, #ff4361, #ff4361); /* Degradado */
    opacity: 1; /* Mantén el degradado visible */
}


.politicas {
    display: flex; /* Usa flexbox para distribuir los elementos */
    justify-content: space-between; /* Coloca los elementos en extremos opuestos */
    align-items: center; /* Centra verticalmente */
    width: 100%; /* Asegúrate de ocupar todo el ancho */
    padding: 0 6rem; /* Espaciado interno en los bordes */
    color: var(--color-gris-claro);
    font-family: var(--fuente-montserrat);
    font-size: 1.3rem;
    font-weight: 300;
    color: var(--color-gris-claro);
  
}

.politicas-izquierda {
    text-align: left;
    margin: 2rem 0;
}


.politicas-derecha {
    text-align: right;
    margin: 2rem 0;
}


@media (max-width: 445px) {

  .footer {
    margin-top: 15rem;
    overflow-x: hidden;
  }

  .texto-footer {
    font-family: var(--fuente-krona);
    font-size: 2.1rem;
    color: var(--color-gris-claro);
  }

  .palabra-dinamica {
    font-size: 2.1rem ;
  }

  .texto-footer-descripcion {
    font-family: var(--fuente-krona);
    font-size: 2.1rem;
    color: var(--color-gris-claro);
  }

  .divider-footer {
    width: calc(100% - 4rem)
  }

  .politicas {
    display: flex;
    flex-direction: column;
    padding: 0 2rem;
  }

  .politicas-izquierda {
    text-align: center;
    margin: 0;
    order: 2;
    padding-bottom: 2rem;
  }
  
  .politicas-derecha {
    text-align: center;
    margin: 0;
    order: 1;
    padding-top: 2rem;
    padding-bottom: 1rem;
  }
  
  
  
}

/* Responsive monitor 27p menu Seccion1 */
@media screen and (min-width: 1920px) {

  .footer-btn {
    font-size: 2rem;
    margin-bottom: 25rem;
    padding: 1rem 2rem;
}

  .divider-footer {
    border: none;
    height: 1px; /* Grosor de la línea */
    width: calc(100% - 28rem); /* Resta 6rem de cada lado */
    margin: 0 auto; /* Centra la línea horizontalmente */
    background: linear-gradient(to right, #6cf3ce, #6cf3ce, #ff4361, #ff4361); /* Degradado */
    opacity: 1; /* Mantén el degradado visible */
}

.politicas {
  padding: 0 14rem 0 14rem;/* arriba, derecha, abajo, izquierda */
}

  
}