/* Fuente y colores base */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  color: white;
  background-image: url('https://sjuanrio.tecnm.mx/images/2025/SEPTIEMBRE/c1/PRESENCIAL.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  text-align: center;
}

/* ENCABEZADO */
header {
  padding: 20px;
}
.logos-header img {
  max-height: 70px;
  margin: 0 15px;
}
h1 {
  font-size: 1.5em;
  margin: 15px 0;
}

/* Animaciones de texto */
.titulo-header.typing.heartbeat {
  overflow: hidden;
  
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: .15em;
  display: inline-block;
  animation:
    typing 2.5s steps(12, end),
    blink-caret .75s step-end infinite,
    heartbeat 1s infinite;
}


@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  10% { transform: scale(1.1);}
  20% { transform: scale(1.2);}
  30% { transform: scale(1.1);}
  40% { transform: scale(1.2);}
  50% { transform: scale(1.1);}
  60%, 90% { transform: scale(1);}
}






/* LOGO CENTRAL */
.institute-logo img {
  max-width: 180px;
  margin: 20px 0;
}

/* BOTÓN DE REGISTRO */
.register-btn {
  display: inline-block;
  background-color: #1DA1F2;
  padding: 15px 30px;
  border-radius: 12px;
  font-size: 1.2em;
  text-decoration: none;
  color: white;
  font-weight: bold;
}
.register-btn span {
  font-size: 0.9em;
  font-weight: normal;
}

/* CARRERAS */
.careers {
  margin: 30px 0;
}
.career-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Desktop */
  gap: 15px;
  padding: 0 20px;
  max-width: 800px;
  margin: 0 auto;
}
/* En móviles (máx 600px), 2 columnas */
@media (max-width: 600px) {
  .career-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.career-card {
  border-radius: 15px;
  padding: 20px;
  font-weight: bold;
  color: white;
  min-height: 180px;        /* Altura mínima para todos los cuadros */
  height: 180px;            /* Altura fija, puedes ajustar el número */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;  /* Centra verticalmente el contenido */
  box-sizing: border-box;   /* Incluye el padding en el height */
  transition: transform 0.2s;
}
.career-card img {
  margin-bottom: 10px;
  flex-shrink: 0;
}
.career-card:hover {
  transform: scale(1.07) rotate(-2deg);
  box-shadow: 0 6px 30px rgba(0,0,0,0.25);
  cursor: pointer;
}
.career-card:active {
  animation: bounce 0.30s;
}

@keyframes bounce {
  0%   { transform: scale(1.07) rotate(-2deg); }
  50%  { transform: scale(0.96) rotate(1deg); }
  80%  { transform: scale(1.1) rotate(-2deg);}
  100% { transform: scale(1.07) rotate(-2deg);}
}
.career-card:hover {
  background: linear-gradient(135deg, #fff2 0%, #0002 100%), inherit;
  box-shadow: 0 12px 40px rgba(0,0,0,0.30);
}
.itic { background: #00AEEF; }
.isic { background: #9048d3; }
.igem { background: #00EE7B; }
.ielm { background: #EE7B00; }
.ielc { background: #ecc900; }
.iind { background: #EE00EE; }

/* REDES SOCIALES */
footer {
  margin-top: 30px;
  padding: 20px;
}
.social-icons {
  margin: 15px 0;
}
.social-icons img {
  width: 35px;
  margin: 0 8px;
}
.web {
  margin-top: 10px;
  font-weight: bold;
}

.social-icons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
  margin: 20px 0;
}

.icon {
  width: 55px;
  height: 55px;
  display: inline-block;
  border-radius: 50%;
  background-color: white; /* círculo blanco */
  position: relative;
}

/* El logo en negro dentro del círculo */
.icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 55%;
  height: 55%;
  transform: translate(-50%, -50%);
  background-color: black;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

/* Íconos individuales */
.facebook::before { 
  mask-image: url('https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/facebook.svg'); 
  -webkit-mask-image: url('https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/facebook.svg'); 
}
.instagram::before { 
  mask-image: url('https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/instagram.svg'); 
  -webkit-mask-image: url('https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/instagram.svg'); 
}
.threads::before { 
  mask-image: url('https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/threads.svg'); 
  -webkit-mask-image: url('https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/threads.svg'); 
}
.tiktok::before { 
  mask-image: url('https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/tiktok.svg'); 
  -webkit-mask-image: url('https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/tiktok.svg'); 
}
.youtube::before { 
  mask-image: url('https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/youtube.svg'); 
  -webkit-mask-image: url('https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/youtube.svg'); 
}
.linkedin::before { 
  mask-image: url('https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/linkedin.svg'); 
  -webkit-mask-image: url('https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/linkedin.svg'); 
}
.x::before { 
  mask-image: url('https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/x.svg'); 
  -webkit-mask-image: url('https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/x.svg'); 
}




@media (max-width: 600px) {
  .career-card {
    transition: transform 0.18s, box-shadow 0.18s;
    /* Puedes aumentar el padding si quieres que se vean más grandes en móvil */
  }
  .career-card:active {
    transform: scale(0.96);
    box-shadow: 0 2px 30px rgba(0,0,0,0.20);
  }
}
@media (max-width: 600px) {
  .career-card:active {
    box-shadow: 0 0 30px 10px rgba(255,255,255,0.14);
    /* Puedes agregar un filtro para brillo extra */
    filter: brightness(1.08);
  }
}
@media (max-width: 600px) {
  .career-card:active {
    animation: bounceMobile 0.28s;
  }
}

@keyframes bounceMobile {
  0% { transform: scale(1); }
  50% { transform: scale(0.92); }
  70% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
@media (max-width: 600px) {
  .career-card:active img {
    transform: rotate(15deg) scale(1.12);
    transition: transform 0.25s;
  }
  .career-card:active p {
    color: #fff;
    text-shadow: 0 0 10px #000;
    transition: color 0.18s, text-shadow 0.18s;
  }
}
@media (max-width: 600px) {
  .career-card:active {
    background: radial-gradient(circle at 50% 50%, #fff3 40%, transparent 80%), inherit;
  }
}

/* Ripple effect covering the whole viewport */
.ripple-effect {
  position: fixed;
  left: 0; top: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  border-radius: 0;
  background: radial-gradient(circle at var(--x,50vw) var(--y,50vh), #fff8 0%, #fff0 70%);
  animation: ripple-grow 0.7s forwards;
  z-index: 9999;
}

@keyframes ripple-grow {
  0%   { opacity: 0.8; transform: scale(0);}
  60%  { opacity: 0.5; transform: scale(1);}
  100% { opacity: 0;   transform: scale(2);}
}

/* Puedes personalizar el color de la onda cambiando #fff8 por otro rgba o color */

.ripple-card {
  cursor: pointer;
  position: relative;
  /* Si quieres que el ripple salga del centro de la tarjeta, puedes usar overflow: hidden; pero aquí lo hacemos global */
}