/* ==================================
   RESET BÁSICO Y VARIABLES
   ================================== */
:root{
--bg: #121212;
--primary: #81b8b2; /* Color principal (Verde Azulado) */
--accent: #9ee2d9; /* Color de acento */
--card: #171717; /* Fondo de tarjetas */
--dark-grey: #242424; /* Gris oscuro para bordes y detalles */
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
margin: 0;
font-family: 'Nunito', sans-serif; 
background-color: var(--bg);
color: #fff;
scroll-behavior: smooth;
text-align: center;
}

a {
text-decoration: none;
color: white;
}

/* ----------------------------------
   ESTILOS DEL NAVBAR 
   ---------------------------------- */
header.navbar {
position: fixed; top: 0; left: 0; width: 100%; 
background: rgba(18,18,18,0.95);
display: flex; justify-content: space-between; align-items: center;
height: 85px; padding: 5px 5%; 
box-shadow: 0 2px 5px rgba(0,0,0,0.5);
box-sizing: border-box;
z-index: 1000;
}
.navbar .logo { 
font-weight: bold; font-size: 1.4em; color: var(--primary); cursor: pointer;
}
.navbar .logo a {
color: inherit; 
text-decoration: none; 
transition: opacity 0.3s;
}
.navbar nav { 
display: flex; justify-content: flex-end; align-items: center;
}
.navbar nav ul { 
display: flex; list-style: none; margin: 0; padding: 0; gap: 15px; 
justify-content: flex-end; align-items: center;
}
.navbar nav ul li a { 
display: inline-block; color: white; font-weight: 500; padding: 8px 12px; 
transition: color 0.3s, transform 0.3s; cursor: pointer;
}
.navbar nav ul li a:hover { 
color: var(--primary); transform: scale(1.05); 
}
.navbar nav ul li a.active { 
color: var(--primary); font-weight: 700; border-bottom: 2px solid var(--primary); 
}

/* Hamburger icon */
.hamburger { 
display: none; flex-direction: column; cursor: pointer; z-index: 1001; gap: 4px;
}
.hamburger div { 
width: 28px; height: 3px; background-color: white; margin: 4px 0; transition: 0.4s; 
}


/* ----------------------------------
   ESTILOS DE LA SECCIÓN DE CONTACTO
   ---------------------------------- */
.main-content {
padding-top: 150px; /* Más espacio superior ya que es la única sección */
padding-bottom: 80px;
padding-left: 5%;
padding-right: 5%;
max-width: 1400px;
margin: 0 auto;
text-align: center;
}
.page-title {
 font-family: 'Nunito', sans-serif;
 font-size: 3em;
 color: var(--accent);
 margin-bottom: 10px;
}
.contact-subtitle {
 font-size: 1.1em;
 color: #ccc;
 margin-bottom: 80px;
 font-weight: 500;
}

/* Diseño de la cuadrícula de tarjetas */
.contact-grid {
 /* 💡 ACTUALIZADO: Para soportar 5 o 6 tarjetas, el minmax debe ser más pequeño o usar 5 columnas */
    /* Lo ajusté para que quepan 5 tarjetas en una fila si la pantalla es lo suficientemente grande,
       o 3 en pantallas medianas, volviendo a 2 y 1 en móvil. */
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
 gap: 30px;
 max-width: 1200px;
 margin: 0 auto;
}

/* Estilo de la tarjeta individual (Enlace) */
.contact-card {
 background-color: var(--card); /* Fondo oscuro */
 padding: 30px;
 border-radius: 12px;
 text-align: center;
 transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 align-items: center;
 text-decoration: none;
 color: white; 
 border: 1px solid transparent;
}

/* Efecto Hover: Resaltado principal */
.contact-card:hover {
 transform: translateY(-8px);
 box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
 border-color: var(--primary);
 background-color: #202020;
}

/* Ícono (Tanto Material Symbols como Font Awesome) */
.contact-icon {
 font-size: 48px;
 color: var(--primary);
 margin-bottom: 15px;
 transition: color 0.3s;
}

/* 💡 NUEVO: Colores de Hover específicos para LinkedIn y Behance */
.contact-card.linkedin:hover .contact-icon {
    color: #0A66C2; /* Color de marca LinkedIn */
}
.contact-card.behance:hover .contact-icon {
    color: #053EFF; /* Color de marca Behance */
}

/* Título de la tarjeta */
.card-title {
 font-size: 1.5em;
 margin-bottom: 5px;
 color: white;
}

/* Detalle (Username/Número) */
.card-detail {
 color: #ccc;
 font-size: 1em;
 font-weight: 700;
 letter-spacing: 0.5px;
 margin-bottom: 20px;
}

/* Texto de acción (Flecha) */
.action-text {
 font-size: 0.9em;
 color: var(--accent);
 font-weight: 700;
 border-bottom: 2px solid transparent;
 transition: border-bottom 0.3s;
}
.contact-card:hover .action-text {
 border-bottom: 2px solid var(--accent);
}

/* ----------------------------------
   ESTILOS RESPONSIVE (Móvil)
   ---------------------------------- */
@media (max-width: 768px) { 
/* Muestra el botón hamburguesa */
.hamburger { display: flex; }

.navbar nav ul {
flex-direction: column;
align-items: center; 
max-height: 0;
overflow: hidden;
background-color: #1c1c1c; 
width: 100%;
position: absolute;
top: 85px; 
left: 0;
padding: 0;
margin: 0;
transition: max-height 0.5s ease-out;
z-index: 999;
gap: 0; 
}

/* Estado Abierto (Añadido por JavaScript) */
.navbar nav ul.show {
max-height: 600px; 
padding-top: 10px; 
padding-bottom: 10px; 
}

.navbar nav ul li {
width: 100%; 
text-align: center; 
padding: 0;
}

.navbar nav ul li a {
display: block;
width: 100%;
padding: 10px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
padding-left: 5%;
padding-right: 5%;
}

.navbar nav ul li:last-child a {
border-bottom: none; 
}

/* Contenido General */
.main-content { padding-top: 90px; }
.page-title { font-size: 2em;}
 .contact-subtitle { margin-bottom: 50px;}

/* Ajustes de Contacto en móvil */
 .contact-grid { 
        /* 💡 AJUSTE PARA MOVER A 2 COLUMNAS EN TABLET Y 1 EN TELÉFONO */
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); 
    }

    /* Forzar 1 columna en pantallas muy pequeñas */
    @media (max-width: 480px) {
        .contact-grid {
            grid-template-columns: 1fr;
        }
    }
}