/* ===================== FOOTER ===================== */
.footer {
  background: #0a0a0a;
  color: #fff;
  padding: 10px 0;
}

.footer__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

/* Menú lateral izquierdo */
.footer__menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer__menu li {
  margin: 6px 0;
}
.footer__menu a {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .6px;
  transition: opacity .2s ease;
}
.footer__menu a:hover {
  opacity: .7;
}

/* Huevito al centro */
.footer__egg {
  flex: 0 0 auto;
  text-align: center;
}
.footer__egg img {
  width: 120px;
  height: auto;
  transition: transform .3s ease;
  cursor: pointer;
}
.footer__egg img:hover {
  transform: scale(1.08) rotate(-3deg);
}

/* Contacto a la derecha */
.footer__contact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}
.footer__contact a {
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: opacity .2s ease;
}
.footer__contact a:hover {
  opacity: .8;
}

/* Responsive */
@media (max-width: 800px) {
  .footer__row {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .footer__menu ul {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .footer__contact {
    align-items: center;
    text-align: center;
  }
}

.footer__egg img {
  width: 200px;   /* antes 120px → más grande */
  height: auto;
  transition: transform .3s ease;
  cursor: pointer;
}
.footer__egg img:hover {
  transform: scale(1.1) rotate(-3deg);
}

/* ========== Footer: mobile layout limpio (≤ 800px) ========== */
@media (max-width: 800px){

  /* 1) Ocultar el menú de enlaces en mobile */
  .footer__menu{ display:none; }

  /* 2) Fila en una sola línea: huevo a la izquierda / redes a la derecha */
  .footer__row{
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    text-align: left;
  }

  /* 3) Huevo a la izquierda (un poco más chico para mobile) */
  .footer__egg{ order: 1; }
  .footer__egg img{
    width: 140px;  /* antes 200px en desktop */
    height: auto;
  }

  /* 4) Redes a la derecha en una fila, sin textos visibles */
  .footer__contact{
    order: 2;
    display: flex;
    flex-direction: row;     /* íconos uno al lado del otro */
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    width: auto;
    text-align: right;
  }

  /* Ocultar el texto de los <a> sin tocar el SVG  */
  .footer__contact a{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0;            /* esconde el texto del enlace */
    width: 36px;             /* botón/área táctil cómoda */
    height: 36px;
    padding: 0;
  }
  .footer__contact a svg{
    width: 26px;
    height: 26px;
  }

  /* Efecto hover sutil (siempre visible con dedo no pasa nada) */
  .footer__contact a:hover{ opacity: .9; }
}

/* Opcional: un pelín más compacto en pantallas muy angostas */
@media (max-width: 390px){
  .footer__egg img{ width: 120px; }
  .footer__contact a{ width: 32px; height: 32px; }
  .footer__contact a svg{ width: 22px; height: 22px; }
}