/*  

  -------------------------------------------

  -----      CSS for the font used      -----

  -------------------------------------------

   /* Mis códigos*/ 

   

#about {

    margin-top: 100px;
        margin-bottom: 100px;

}



.cv {

    margin-bottom: 50px;

}

  .lista-moderna {

    list-style-type: none; /* Quitamos los puntos por defecto */

    padding: 10px;

    

    /* NUEVOS AJUSTES PARA LIMITAR Y CENTRAR */

    max-width: 400px;      /* Define el ancho máximo que deseas (ej. 400px) */

    margin: 0 auto;        /* Centra la lista horizontalmente en la pantalla */

  }



  .lista-moderna li {

    background-color: #262626;  /* Fondo suave */

    color: #f0f4f8;             /* Color de texto */

    margin: 8px 10px;              /* Separación entre elementos */

    padding: 12px;              /* Espacio interno */

    border-radius: 6px;         /* Bordes redondeados */

    border-left: 5px solid #ea580c; /* Barra lateral de color */

    text-align: center;       

  }





 .capa-btn {

     background: #ea580c;

 }

 

.capa-texto {

    background: rgba(0, 0, 0, 0.3);

    padding: 20px 25px;

    /*margin-top: 20px;*/

    border-radius: 10px;

    color: #fff;

    width: 100%;height: 100%;

    box-sizing: border-box;

}

/* medidas texto propio*/















/*FORMULARIO CONTACTO*/

/* Estilos generales de la sección de contacto */

/* Estilos generales de la sección en modo oscuro */

.contact-section.dark-theme {

  padding: 60px 20px;

  background-color: black; /* Fondo general de la sección (cámbialo si tu web usa otro tono) */

 /* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;*/

 

  display: flex;

  justify-content: center;

}



.contact-container {

  max-width: 600px;

  width: 100%;

  background: #171717;/*Fondo de la tarjeta del formulario (un gris más claro que el fondo general) */

  background: #171717;

  padding: 40px;

  border-radius: 12px;

  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);

  border: 1px solid #2a2a2a; /* Borde sutil para dar profundidad */

}



.contact-container h2 {

  font-size: 2rem;

  color: #ffffff; /* Texto principal blanco */

  margin-bottom: 10px;

  text-align: center;

}



.contact-container p {

  color: #a0a0a0; /* Texto secundario gris claro para buena legibilidad */

  text-align: center;

  margin-bottom: 30px;

  font-size: 1rem;

}



/* Estructura de los campos */

.contact-form {

  display: flex;

  flex-direction: column;

  gap: 20px;

}



.form-group {

  display: flex;

  flex-direction: column;

  gap: 8px;

}



.form-group label {

  font-size: 0.9rem;

  font-weight: 600;

  color: #e0e0e0; /* Etiquetas claras */

}



.form-group input,

.form-group textarea {

  padding: 12px 16px;

  background-color: #2a2a2a; /* Fondo oscuro para los inputs */

  border: 1px solid #3a3a3a; /* Borde intermedio */

  border-radius: 8px;

  font-size: 1rem;

  color: #ffffff; /* Texto que escribe el usuario en blanco */

  transition: border-color 0.3s ease, box-shadow 0.3s ease;

  outline: none;

}



/* Estilo para los placeholders (texto de ejemplo interno) */

.form-group input::placeholder,

.form-group textarea::placeholder {

  color: #666666; 

}



/* Efecto focus eléctrico al hacer clic/escribir */

.form-group input:focus,

.form-group textarea:focus {

  border-color: #8c3507; /* Color de acento azul neón/eléctrico */

  box-shadow: 0 0 0 4px rgba(0, 118, 255, 0.25);

  background-color: #222222; /* Se oscurece un poco más al hacer foco */

}



/* Estilos del botón de envío */



 

.btn-submit {

    padding: 14px;

    background-color: #ea580c;

    /* El botón resalta con tu color de acento */

    color: #ffffff;

    border: none;

    border-radius: 8px;

    font-size: 1rem;

    font-weight: 600;

    cursor: pointer;

    transition: background-color 0.3s ease, transform 0.1s ease, box-shadow 0.3s ease;

    margin-top: 10px;

}

/* Responsivo para móviles */

@media (max-width: 480px) {

  .contact-container {

    padding: 24px 16px;

  }

  .contact-container h2 {

    font-size: 1.6rem;

  }

}



.recaptcha-group {

  display: flex;

  justify-content: center;

  margin: 10px 0;

}





/*FIN FORMULARIO CONTACTO */







   /*FIN Mis códigos ------------------------------------------

   */ 

   

   

   

   



@import url('./font/inter.css');



body {

    

    font-family: 'Inter var', sans-serif;

    font-feature-settings: "cv02","cv03","cv04","cv11";

}









/*  

  ------------------------------------------- 

  -----      CSS for the preloader      -----

  -------------------------------------------

*/



.loader-wrapper {

    position: fixed !important;

    top: 0 !important;

    left: 0 !important;

    bottom: 0 !important;

    right: 0 !important;

    background-color: rgba(var(--bs-body-bg-rgb), 1) !important;

    display:flex;

    justify-content: center !important;

    align-items: center !important;

    z-index: 2000 !important;

}



.mi-text-md {

  font-size: 0.935rem;

  line-height: 1.35rem;

}





/*  

  -------------------------------------------------------------------------------- 

  -----      CSS for the default styles for both directions RTL and LTR      -----

  --------------------------------------------------------------------------------

*/



.left-to-right {

    display: none !important;

}

.right-to-left {

    display: none !important;

}

[dir="ltr"] .left-to-right {

    display: inline !important;

}

[dir="rtl"] .right-to-left {

    display: inline !important;

}



[dir="rtl"] .rtl-flip {

    transform: scaleX(-1) !important;

}



[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {

    transform: scaleX(-1);

}







/*  

  -------------------------------------------  

  -----      CSS for the AOS's RTL      -----

  -------------------------------------------

*/



[dir="rtl"] [data-aos=fade-left] {

    transform: translate3d(-100px, 0, 0);

}

[dir="rtl"] [data-aos=fade-right] {

    transform: translate3d(100px, 0, 0); 

}



[dir="rtl"] [data-aos=fade-up-left] {

    transform: translate3d(-100px, 100px, 0); 

}

[dir="rtl"] [data-aos=fade-up-right] {

    transform: translate3d(100px, 100px, 0); 

}



[dir="rtl"] [data-aos=fade-down-left] {

    transform: translate3d(-100px,-100px,0); 

}

[dir="rtl"] [data-aos=fade-down-right] {

    transform: translate3d(100px, -100px, 0); 

}



[dir="rtl"] [data-aos=flip-right] {

    transform: perspective(2500px) rotateY(-100deg);

}

[dir="rtl"] [data-aos=flip-left] {

    transform: perspective(2500px) rotateY(100deg);

}

[dir="rtl"] [data-aos=flip-right].aos-animate {

    transform: perspective(2500px) rotateY(0);

}

[dir="rtl"] [data-aos=flip-left].aos-animate {

    transform: perspective(2500px) rotateY(0);

}



[dir="rtl"] [data-aos=slide-left] {

    transform: translate3d(-100%,0,0);

}

[dir="rtl"] [data-aos=slide-right] {

    transform: translate3d(100%,0,0);

}



[dir="rtl"] [data-aos=zoom-in-right] {

    transform: translate3d(100px,0,0) scale(.6);

}

[dir="rtl"] [data-aos=zoom-in-left] {

    transform: translate3d(-100px,0,0) scale(.6);

}



[dir="rtl"] [data-aos=zoom-out-right] {

    transform: translate3d(100px,0,0) scale(1.2);

}

[dir="rtl"] [data-aos=zoom-out-left] {

    transform: translate3d(-100px,0,0) scale(1.2);

}













/*  

  ------------------------------------------------

  -----      CSS for the top navigation      -----

  ------------------------------------------------

*/



.navigation {

    z-index: 1030;

}









/*  

  ----------------------------------------------------  

  -----      CSS for the button back to top      -----

  ----------------------------------------------------

*/



.btn-back-to-top {

    position: fixed;

    bottom: 20px;

    display: none;

    z-index: 10;

}



[dir="ltr"] .btn-back-to-top {

    right: 20px;

}



[dir="rtl"] .btn-back-to-top {

    left: 20px;

}



/* Oculta la insignia flotante de reCAPTCHA en todo el sitio web 

esta clase debe estar al final del  style.css*/

.grecaptcha-badge { 

  visibility: hidden !important; 

}

/* Estilos para el texto de atribución de reCAPTCHA del formulario de contacto  */

.recaptcha-terms {

  font-size: 0.60rem!important;

  color: #666666; /* Un gris oscuro discreto */

  background: black;

    border: none;

  border-radius: 8px;

  padding: 10px;

  text-align: center!important;

 /* margin-top: 15px!important;*/

  line-height: 1.4!important;

}



.recaptcha-terms a {

  color: #888888;

  text-decoration: underline;

  transition: color 0.2s ease;

}



.recaptcha-terms a:hover {

  color: #ea580c; /* Cambia al color de tu botón al pasar el cursor */

}