@import 
url('https://fonts.googleapis.com/css2?family=Aldrich&family=Fira+Mono:wght@400;500;700&family=Fira+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Inclusive+Sans:ital,wght@0,300..700;1,300..700&family=Major+Mono+Display&family=Monofett&family=Nova+Round&family=PT+Sans+Caption:wght@400;700&family=Sansation:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Share+Tech&family=Share+Tech+Mono&family=Share:ital,wght@0,400;0,700;1,400;1,700&family=Varela+Round&family=Varta:wght@300..700&family=Ysabeau+SC:wght@1..1000&family=Zilla+Slab+Highlight:wght@400;700&display=swap');

@font-face {
    font-family:'OCR-A Regular';
    font-weight: normal;
    font-style: normal;
    src: url("/assets/fonts/OCR-A\ Regular.otf") format("opentype");
}

@font-face {
    font-family:'OCR-B';
    font-weight: normal;
    font-style: normal;
    src: url("/assets/fonts/OCR-B.otf") format("opentype");
}

/* COLORES

    #64428b violeta, #462e62, #231731, #261936
    #364179 azul
    #d241a0 magenta
    #2eab36 verde, #7ebf33, #ccd571, #83c735
    #133c63 azul
    #d6cc41fa, amarillo
    #c82626, rojo
    rgba(225,225,225, .1);
    rgba(255, 255, 255, 0.773);
    #2a1e3f, negro violaceo

*/

/*ICONOS 

LINKEDIN <i class="fa-brands fa-linkedin"></i>
MAIL     <i class="fa-solid fa-envelope"></i>
EXCEL    <i class="fa-solid fa-file-excel"></i>
HTML5:   <i class="fa-brands fa-html5"></i>
CSS:     <i class="fa-brands fa-css3-alt"></i>
JIRA:    <i class="fa-brands fa-jira"></i>
JS:      <i class="fa-brands fa-square-js"></i>
GITHUB:  <i class="fa-brands fa-github"></i>
PYTHON:  <i class="fa-brands fa-python"></i>
CYPRESS: <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" id="Cypress--Streamline-Simple-Icons" width="24" height="24">
         <path d="M11.998.0195c-.8642 0-1.6816.1101-2.1445.1934v.002C4.1731 1.2283 0 6.1368 0 12.0018c0 1.1265.1573 2.2328.4648 3.3028.0387.1453.0915.2993.1368.4473 1.607 4.865 6.2245 8.226 11.3925 8.2285.0651 0 .2518-.0003.502-.0118.8564-.0353 1.6228-.5734 1.9512-1.369l.4736-1.1544L20.4258 8.043H18.621l-2.3164 5.871-2.334-5.871h-1.9082l3.2734 8.0117c-.8115 1.9702-1.6252 3.9395-2.4355 5.9101-.0808.1945-.2655.3284-.4727.336-.144.005-.285.0098-.4316.0098-4.5848 0-8.6672-3.0695-9.9277-7.4649a10.3058 10.3058 0 0 1-.3985-2.8437c0-5.0887 3.6521-9.3404 8.6035-10.164.2214-.037.8885-.1446 1.7246-.1446 4.4166 0 8.269 2.732 9.7305 6.8476.0558.144.0977.293.1465.4395.299.9746.4531 1.9887.4531 3.0215 0 4.5696-2.9413 8.5326-7.3164 9.8613l.4863 1.5996c5.085-1.546 8.4995-6.1518 8.502-11.459 0-1.5491-.2983-2.8706-.6504-3.8926-.0432-.1212-.0873-.2422-.1309-.3633h-.002C21.4577 3.0954 17.0444.0195 11.998.0195ZM8.4336 7.8906c-1.1999 0-2.1747.3852-2.9805 1.1758-.8007.7856-1.205 1.7736-1.205 2.9356 0 1.1544.4068 2.1368 1.205 2.9199.8058.7906 1.7806 1.1738 2.9805 1.1738 1.705 0 3.1556-.955 3.7871-2.4883l.0332-.082-1.6289-.5547c-.168.4563-.7552 1.4883-2.1914 1.4883-.6745 0-1.2437-.2344-1.6934-.6992-.4572-.4699-.6875-1.0632-.6875-1.7578 0-.6998.2253-1.2809.6875-1.7735.4522-.4648 1.019-.7012 1.6934-.7012 1.438 0 2.0238 1.0815 2.1934 1.4883l1.627-.5527-.0333-.084c-.629-1.5358-2.082-2.4883-3.7871-2.4883Z" />
         </svg>
SELENIUM:<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" id="Selenium--Streamline-Simple-Icons" width="24" height="24">
         <title>Selenium</title>
         <path d="m23.174 3.468 -7.416 8.322a0.228 0.228 0 0 1 -0.33 0l-3.786 -3.9a0.228 0.228 0 0 1 0 -0.282L12.872 6a0.228 0.228 0 0 1 0.366 0l2.106 2.346a0.228 0.228 0 0 0 0.342 0l5.94 -8.094A0.162 0.162 0 0 0 21.5 0H0.716a0.174 0.174 0 0 0 -0.174 0.174v23.652A0.174 0.174 0 0 0 0.716 24h22.566a0.174 0.174 0 0 0 0.174 -0.174V3.6a0.162 0.162 0 0 0 -0.282 -0.132zM6.932 21.366a5.706 5.706 0 0 1 -4.05 -1.44 0.222 0.222 0 0 1 0 -0.288l0.882 -1.236a0.222 0.222 0 0 1 0.33 -0.036 4.338 4.338 0 0 0 2.964 1.158c1.158 0 1.722 -0.534 1.722 -1.098 0 -1.752 -5.7 -0.552 -5.7 -4.278 0 -1.65 1.428 -3 3.756 -3a5.568 5.568 0 0 1 3.708 1.242 0.222 0.222 0 0 1 0 0.3l-0.906 1.2a0.222 0.222 0 0 1 -0.318 0.036 4.29 4.29 0 0 0 -2.706 -0.936c-0.906 0 -1.41 0.402 -1.41 0.996 0 1.572 5.688 0.522 5.688 4.2 0.006 1.812 -1.284 3.18 -3.96 3.18zm12.438 -3.432a0.192 0.192 0 0 1 -0.192 0.192h-5.202a0.06 0.06 0 0 0 -0.06 0.066 1.986 1.986 0 0 0 2.106 1.638 3.264 3.264 0 0 0 1.8 -0.6 0.192 0.192 0 0 1 0.276 0.042l0.636 0.93a0.198 0.198 0 0 1 -0.042 0.264 4.71 4.71 0 0 1 -2.892 0.9 3.726 3.726 0 0 1 -3.93 -3.87 3.744 3.744 0 0 1 3.81 -3.852c2.196 0 3.684 1.644 3.684 4.05zm-3.684 -2.748a1.758 1.758 0 0 0 -1.8 1.56 0.06 0.06 0 0 0 0.06 0.066h3.492a0.06 0.06 0 0 0 0.06 -0.066 1.698 1.698 0 0 0 -1.812 -1.56Z"</path>
         </svg>

*/

* {
    margin: 0;
    padding: 0;
    /* CLAVE: Asegura que el padding y el border se incluyan dentro del ancho del elemento */
    box-sizing: border-box; 
}

/*Background*/
body {
    
    min-height: 100vh;
    overflow-x: hidden;
    margin: 0;
    padding: 0;    
}

html, body {
    width: 100%; /* El ancho total debe ser 100% */
    margin: 0;
    padding: 0;
}

/* 1: Sección Header */

#header {
    /* Flexbox para alinear logo y menúToggle */
    display: flex;
    position: fixed;
    align-items: center;
    justify-content: flex-start; /* Logo a la izquierda, Menú a la derecha */
    background-color: #2a1e3f;
    padding: 15px 40px 15px 5px;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 1050; /* Alto z-index para que esté encima de todo */
    transform: translateY(-100%); 
    transition: transform 0.3s ease-in-out;
    
}

.logo-container {
    display: flex; /* Convierte los hijos (img y h1) en elementos flexibles */
    align-items: center; /* ALINEA VERTICALMENTE al centro (Centra la imagen con el texto) */
    gap: none ; /* Espacio entre el GIF y el texto  */
    
}

.logo-container h1 {
    font-family: OCR-B;
    font-size: clamp(1.25rem, 2.5vw, 1.8rem);
    letter-spacing: 6px;
    color: #dadada;
    margin: 0;
    
}

.logo-img {
    height: auto; /* Mantiene la proporción del GIF */
    width: 120px; /* Tamaño */
    
}

/* 2: Sección Menu */

/* Hamburguesa y desplegable */

.menuToggle {
    display: flex;
    align-items: center;
    width: auto;
    height: 30px;
    position: fixed;
    top: 30px;
    right: 40px;
    gap: 3px;
    cursor: pointer;
    z-index: 1100; 
    color: inherit;
    text-decoration: none; /* Sin subrayado */
    font-family: 'OCR-A Regular';
    font-size: none;

}


#menu {
    position: fixed; /* Moverlo fuera de la pantalla (Off-Canvas) */
    top: 0;/* Inicia oculto a la derecha */
    right: -320px; 
    width: 200px; /* Ancho del menú (debe ser menor que 100%) */
    height: 100vh;
    background:  none;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5); /* Sombra para resaltar */
    padding-top: 120px; 
    text-align: center; /* Texto a la izquierda dentro del menú */
    z-index: 1099;
    transition: right 0.3s ease-in-out;    /* Transición para el deslizamiento suave */
    -webkit-backdrop-filter: blur(5px); 
    backdrop-filter: blur(5px);
    
}

.icon-lines {
    display: block; 
    position: relative; /* Relative para Flexbox */
    width: 30px;
    left: 0;
    margin-right: 2px;
    transition: all 0.3s ease-in-out;
    margin-left: auto;
    background: #ccd571; /* Le da color y actúa como línea central */
    height: 4px; /* Le da la altura de línea */
    transition: all 0.3s ease-in-out;
    
      
}

/* Lineas Horizontales Menu Toggle */

.icon-lines::before,
.icon-lines::after {
    content: "";
    position: absolute; 
    width: 30px;
    height: 4px;
    background: #ccd571; 
    left: 0; 
    transition: all 0.3s ease-in-out; 

}


.icon-lines::before { top: -8px; }
.icon-lines::after { top: 8px; }

/* Clases para JS (transición a X y visibilidad) */

#menu.visible {
    right: 0; /* Lo desliza hacia la pantalla */
    
}

/* Comportamiento al hacer clic (transición a X) */

/* Línea central: Desaparece cuando el menú está abierto */
.menuToggle.active .icon-lines {
/* El elemento .icon-lines es la línea central en este punto */
    background: transparent; 
}

/* Línea superior: Se mueve al centro y gira 45 grados */
.menuToggle.active .icon-lines::before {
    top: 0; /* Mueve la línea superior al centro */
    transform: rotate(45deg); /* Gira para formar parte de la X */
}

/* Línea inferior: Se mueve al centro y gira -45 grados */
.menuToggle.active .icon-lines::after {
    top: 0; /* Mueve la línea inferior al centro */
    transform: rotate(-45deg); /* Gira en dirección opuesta */
}

/* Ocultar el texto "MENÚ" cuando la "X" está visible */
.menuToggle.active .menu-text {
    visibility: hidden;
    opacity: 0;
    width: 0; /* Asegura que no ocupe espacio y se oculte con una transición suave */
    transition: all 0.3s ease-in-out;
}

/* Atributos titulo y elementos del menu*/

.menu-text {
    color: #ccd571; 
    font-size: 1.34rem;
    font-weight: bold;
    margin-left: 5px;
   
}

#menu li a {
    color: #000000;
    text-decoration: none;
    font-family: 'OCR-A Regular';
    font-size: x-large;
    transition: color 0.3s ease;
}

ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}

#menu li a:hover {
    color: #ccd571;
}

#header.scrolled-header {
    
    transform: translateY(0); /* Lo desliza a su posición visible (top: 0) */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);     /* Añade la sombra para que se note que está flotando */

}


/* 3: Sección reservada para caja de bienvenida y scroll down */

    .text-container {
    min-height: 80vh;
    margin: 0;
    padding: 60px 0; /* Padding interno para que el texto no se pegue a los bordes */
    width: 100%;  /* Asegura que ocupe todo el ancho disponible */
    box-sizing: border-box; /* Asegura que el padding NO AÑADA ancho extra */
    /*background-image: url(/assets/images/background-violet.jpg);*/
    background-size: cover;
    background-position: center center;
    position: relative;
    display: grid;
    place-items: center;
    min-height: 100vh; /* Ocupa toda la altura de la ventana */
    background: radial-gradient(circle at 100% 25%, #3a3170, #314175, #6f5297, #554186);
    /*background: radial-gradient(circle at 80% 40%, #63418b, #514283, #304177,);*/
	background-size: 180% 180%;
	animation: wave-animation 30s ease-in-out infinite alternate;
}

.nombre-destacado h1{
    font-family: 'OCR-B', monospace;
    font-size: clamp(2.5rem, 5.5vw, 7.188rem);
    font-weight: 900; /* Texto en negrita */
    letter-spacing: normal; /* Espaciado sutil entre letras (opcional) */
    color: rgba(225,225,225, .1);
    text-align: center;
    margin-top: 17%;
    margin: 0 auto 20px auto; /* Elimina márgenes extra y añade espacio abajo */
    text-transform: uppercase;
    /*border: solid 2px;
    border-radius: 5px;*/
}

 /* KEYFRAMES */

@keyframes gradient-animation {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@keyframes wave-animation {
    0% {
        background-position: 0% 0%; /* Posición inicial del fondo */
    }
    50% {
        background-position: 300% 80%; /* Desplaza el fondo en diagonal */
    }
    100% {
        background-position: 0% 0%; /* Vuelve a la posición inicial */
    }
}

@keyframes animate {

    0%{
      background-position: left 0px top 10px;
    }
    40%{
      background-position: left 800px top 10px;
  }}

 /* Atributos Animación 
    background-image: url("");
    background-repeat: repeat-x;
    background-position: bottom;
    background-size: cover;
    -webkit-background-clip: text;
    background-clip: text;
    animation: animate 5s linear infinite;
*/

.scroll-down-btn {
    /* Posicionamiento en el centro inferior de .text-container */
    position: absolute;
    bottom: 20px; /* Separación del borde inferior */
    left: 50%;
    transform: translateX(-50%); /* Centra el botón horizontalmente */
    
    /* Estilos de Apariencia */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 50px; /* Tamaño del círculo */
    height: 50px;
    border-radius: 50%; /* Lo hace circular */
    background-color: rgba(255, 255, 255, 0.2); /* Fondo semitransparente */
    color: #ffffff;
    text-decoration: none;
    font-size: 1.5rem;
    transition: background-color 0.3s, transform 0.3s;
    z-index: 10; /* Para que esté sobre el contenido */
}

.scroll-down-btn:hover {
    background-color: rgba(255, 255, 255, 0.4); /* Más brillante al pasar el ratón */
    transform: translateX(-50%) scale(1.1);
}

  /*  4: Sección Biografia   */

/* Background en común */

#biografia, #proyectos {
    background-image: url(/assets/images/background-violet3.jpg);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    width: 100%;
    background-color: #172a3a;
    padding: 60px 0;
    padding-top: 90px;

}

/* Tipografía */

.linea-divisoria {
    display: flex; /* Flexbox para alinear la línea/símbolo */
    align-items: center; /* Centra verticalmente la imagen con las líneas */
    justify-content: center; /* Centra el divisor horizontalmente */
    width: 300px; /* Define ancho total para el divisor */
    margin: 0 auto; /* Centra el divisor en el centro de la tarjeta/página */
    width: 60%;
    margin: 0 auto 30px auto;
}

.linea-divisoria .simbolo-divisor {
    width: 60px; /* Tamaño icono central */
    height: 60px;
    margin: 0 10px; /* Espacio horizontal para separar la imagen de las líneas */
    display: block;
}

/* Lineas izquierda y derecha */

.linea-divisoria::before {
    content: ''; /* Obligatorio para pseudo-elementos */
    flex-grow: 1; /* Ocupa todo el espacio disponible a la izquierda */
    height: 1px;
    background-color: currentColor; /* Usa el color del texto del contenedor */
    opacity: 0.5; /* Hace la línea un poco más sutil */
}

.linea-divisoria::after {
    content: '';
    flex-grow: 1; /* Ocupa todo el espacio disponible a la derecha */
    height: 1px;
    background-color: currentColor;
    opacity: 0.5;
}

.linea-divisoria::before,
.linea-divisoria::after {
    content: ''; 
    flex-grow: 1; 
    height: 2px;
    background-color: #d4de75;
    opacity: 1; /* Establecido en sólido */
    border-radius: 2px;
}

#biografia h2 {
  font-family: "Share Tech Mono", sans-serif;
  font-size: 3.125rem;
  font-weight: 700;
  font-style: normal;
  text-align: center;
  color:rgba(255, 255, 255, 0.773);
  line-height:1.5em;
  padding-bottom:45px;
  letter-spacing: 2px;
  margin-bottom: -50px;
  
}

.acerca-de--mi-contenido {
    padding: 0 20px;
}

#texto-about h2 {
  font-family: "Inclusive Sans", sans-serif;
  font-weight: 500;
  font-style: normal;
  color: rgb(241, 241, 241);
  text-align: left;
  max-width: 500px;
  margin: 0 50px;
}

#texto-about h3 {
  font-family: "Inclusive Sans", sans-serif;
  font-size: 1.40rem;
  font-weight: 400;
  font-style: normal;
  color: rgb(255, 255, 255);
  padding: 15px;
  padding-left: 60px;
  padding-right: 60px;
  text-align: justify;
  line-height: 1.5em;
  
}

    /*  5: Proyectos    */

/* Tipografía */
#encabezado-proyectos{
  font-family: "Share Tech Mono", sans-serif;
  font-size: 3.125rem;
  font-weight: 700;
  font-style: normal;
  text-align: center;
  color:rgba(255, 255, 255, 0.773);

}

/* Contenedores y Alineación */

.contenedor-proyectos {
    max-width: 1200px; /* ✅ Limita el ancho del contenido */
    margin: 0 auto;   /* ✅ Centra el contenido */
    padding: 20px 10px;  /* ✅ Añade padding lateral para que el contenido no toque los bordes */
    overflow-x: hidden;
}

#proyectos {
    text-align: center; /* Centra el título H2 */
    padding: 60px 0;
    padding-top: 95px;
    
}

  .cards-grid {
    display: flex; 
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap; 
    gap: 15px; 
    margin-top: 40px;
    max-width: 100%;
    margin: 40px auto 0 auto;

  }

/* Estilo Individual de la tarjeta */

  .card {
    width: 90%; /* Fija un ancho adaptable y permite que el contenido interno lo use */
    max-width: 350px;
    height: 450px;
    background-color: #231731;
    border-radius: 8px; /* Bordes redondeados sutiles en las esquinas */
    box-shadow: 0 4px 8px #462e62; /* Sombra suave */
    overflow: hidden; /* Evita que parte de la imagen se salga de los bordes redondeados */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Desplazamiento sutil */
    display: flex;
    flex-direction: column;
}

.contenedor-card-img {
    height: 160px; 
    width: 100%;
    
}

.card-img {
    width: 100%; /* Define una altura fija o usa 'auto' para mantener la proporción */
    height: 100%; 
    object-fit: contain; /* Asegura que la imagen cubra el área sin deformarse */
    /*display: block;*/
    /*z-index: 1;*/
    position: relative;
    /*margin: 0 auto;*/
}

.card-body {
    padding: 15px; /* Espacio interno alrededor del texto */
    position: relative;
    z-index: 10;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.card-title {
    font-size: 1.5rem;
    color: #ccd571;
    margin-top: 0;
    margin-bottom: 10px;
    font-family: "Varta", sans-serif;
}

.card-text {
    font-size: 1.22rem;
    color: #e7e7e7; /* Color de texto más suave */
    margin-bottom: 20px; /* Espacio antes del botón */
    font-family: "Varta", sans-serif;
    font-weight: 400;
}

.icons-title {
  font-family: "Share Tech Mono", monospace;
  font-weight: 450;
  font-style: normal;
  text-transform: uppercase;
  color: #ffffff;
  text-align: left;
  margin-bottom: 15px;
  font-size: 1rem;
}

.card-icons {
  display: flex;
  flex-direction: row;
  list-style: none;
  padding-left: 0;
  gap: 15px;
}

.card-icons li {
    font-size: 1.875rem;
    color:#7b51ad;
}

.project-link i {
    font-size: 3rem; 
    color: #ffffff;
}

.card-body .project-link { 
    position: absolute;
    bottom: 10px; 
    right: 10px;
    z-index: 9999; /* Siempre arriba */
    display: block; /* Asegura que el área sea reconocida */
    text-decoration: none; /* Elimina el subrayado si lo hay */
}

#hrbtn-horizontal {
    border: none; /* Resetear el estilo por defecto del navegador */
    height: 1px; /*  Grosor de la línea */
    background-color: #462e62;
    width: 80%; /* Hace que la línea sea más corta que el ancho total del contenedor */
    margin: 15px auto; /* Centra la línea horizontalmente y añade margen vertical */
    border-radius: 5px;
    margin-top: auto; 
}

/*Efecto al pasar el cursor*/
.card:hover {
    transform: translateY(-5px); 
    box-shadow: 0 8px 16px #000000;
}

.icons-container svg path {
    fill:#7b51ad;
    transition: fill 0.1s ease;
}

.icons-container svg path:hover {
    fill: #ccd571;
}


/*    6: Contacto & Redes  */

#contacto {
    background-color: #000000; 
    padding: 60px 20px; /* Relleno para que no se vea pegado a los bordes */
    background-image: url(/assets/images/background-violet8.jpg);
    width: 100%;
    
    
}

/* Estilo formulario Contacto */

.contact-form {
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
    width: 100%; /* Ocupa el 100% del ancho limitado por .form-wrapper */
    padding: 20px; 
    background-color: #231731;
    border-radius: 8px; 
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1); /* Sombra sutil */
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  
  font-family: "Varta";
  font-size: 1rem;
  color: #ffffff;
  width: 100%; /* Hace que los campos de texto ocupen el 100% del ancho del formulario. */
  padding: 10px;  /* Añade espacio dentro de los campos */
  border-radius: 4px;
  box-sizing: border-box; /* Evita que el padding no cause desbordamiento horizontal. */
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.contact-form textarea {
  height: 150px;
  resize: vertical; /* Permite al usuario ajustar la altura, pero no el ancho */
}

/* Estilo campos de entrada */

.contact-form-input {
    width: 100%; 
    padding: 12px; /* Un poco más de padding para campos más grandes */
    border: 1px solid #462e62; 
    border-radius: 4px;
    box-sizing: border-box; 
    font-size: 1rem;
    background-color: #231731;
    color: #ffffff;;
    position: relative;
    
}

.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form textarea:focus {
    
border-color:#ccd571; /* Resaltar el Borde */
box-shadow: 0 0 5px #ccd571; /* Resplandor interior */

}

/* Estilo del botón "Enviar" */

.form-submit-btn {
    background-color: #00000077;
    color: #ffffff;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.1rem;
    transition: background-color 0.3s;
}

.form-submit-btn:hover {
    color: #000000;
    background-color: #ccd571;
}

#contacto {
    /* ✅ Asegúrate de que el padding horizontal es seguro (20px) */
    padding: 60px 20px; 
    width: 100%;
}

.contacto-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centra el grupo Formulario+Iconos */
    align-items: flex-start; /* Alinea los elementos en la parte superior */
    max-width: 1100px; /* Limita el ancho total del área de Contacto y lo centra */
    margin: 0 auto; 
    row-gap: 30px;
    column-gap: 0;
}

.contacto-redes  {
    width: 100%; /* Ancho fijo para la columna de iconos (ajusta si es necesario) */
    text-align: center; /* Alinea el título y los iconos a la derecha dentro de su columna */
    padding-top: 0;
    max-width: 400px;
}

.contacto-mail {
    width: 100%; /* Ancho fijo para la columna de iconos (ajusta si es necesario) */
    text-align: center; /* Alinea el título y los iconos a la derecha dentro de su columna */
    padding-top: 0;
    max-width: 400px;
    
}

/* Tipografia */

.contacto-redes h1 {
    font-family: "Share Tech Mono", sans-serif;
    font-size: 1.563rem;
    font-weight: bold; /* 'bold' para que resalte */
    color: rgba(255, 255, 255, 0.773);
    margin-bottom: 30px;
    text-align: center;
    margin-top: 0;
    
}

.contacto-mail h1 {
    font-family: "Share Tech Mono", sans-serif;
    font-size: 1.563rem;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.773);
    margin-bottom: 30px; 
    text-align: center; /* Titulo alineado sobre el formulario */
    margin-top: 0;
    
}

/* Estilo Iconos */

.social-icons {
    /* La columna se alineará automáticamente a la derecha del formulario por Flexbox */
    display: flex;
    flex-direction: column; /* Iconos verticales (row horizontales) */
    gap: 50px; /* Espacio entre los iconos */
    padding-top: 0px;
    align-items: center;
    margin-top: 65px;
}

.social-icons a {
    color: #231731; 
    font-size: 3.125rem; /* Iconos grandes */
    transition: color 0.3s ease;
}

.social-icons a:hover {
    color: #ccd571; /* Color de acento al pasar el mouse */
}

/*  7: Sección Footer   */

footer {
    background-color: #261936; 
    color: #ffffff; 
    text-align: center; /* Centra todo el contenido (texto y enlaces) */
    padding: 20px 0; /* Relleno vertical */
    border-top: 3px solid #462e62; /* Línea de color de acento en la parte superior */
}

footer p {
    margin-bottom: 15px; /* Espacio debajo del texto de copyright */
    font-size: 0.6rem;
    font-family: OCR-B, 'monotype';
}
.social-links {
    display: flex;
    justify-content: center; 
    gap: 20px;
}

.social-icon {
    /* Define el tamaño del área del icono */
    font-size: 1.5rem; 
    color: #cccccc; /* Color por defecto del icono */
    text-decoration: none; /* Asegura que no haya subrayado */
    transition: color 0.3s;
}

/* Efectos al pasar el cursor (Hover) */
.social-icon.linkedin:hover {
    color: #0077b5; /* Azul de LinkedIn */
}

.social-icon.github:hover {
    color: #ffffff; /* Blanco de GitHub */
}

.social-icon.mail:hover {
    color: #13001f; /* Color de acento de tu web */
}

/* Media Query Escritorio */

/* Texto Container */

@media (min-width: 797px) {
    .logo-container h1 {
        font-size: 1.8rem; /* Tamaño para pantallas medianas */
    }
}

/* Aplicar letter-spacing solo en pantallas grandes */
@media (min-width: 1024px) {
    .nombre-destacado h1 {
        letter-spacing: 6px; 
    }
}

@media (min-width: 900px) {
    
    /* 1. Limitar el ancho del grid para forzar la envoltura y centrarlo */
    .cards-grid {
        max-width: 650px;
        margin-left: auto;
        margin-right: auto;
    }

    /* 2. Definir el ancho para las dos columnas */
    .card {
        /* Usar calc() para asegurar que dos tarjetas y el gap caben */
        width: calc(50% - 15px); /* (30px/2 = 15px) */
    }
}

@media (min-width: 900px) { /* Breakpoint layout */
    
    .contacto-wrapper {
        flex-wrap: nowrap; /* Vuelve a ponerlos uno al lado del otro */
        column-gap: 80px; 
        margin-left: 325px;
        margin-right: auto;
    }

    .contacto-redes {
        width: 250px; /* Restaurar ancho fijo */
        text-align: right; /* Restaurar alineación a la derecha */
    }

    .contacto-mail {
        width: 400px; /* Restaurar ancho fijo */
    }
}