html {
  --fontTitle: "Montserrat", sans-serif;
  --fontText: "Nunito Sans", sans-serif;
  --bgColor: #fff9f2;
  --primaryColor: #ffd275;
  --secondaryColor: #5dc1b9;
  --bottonColor: #ff8360;

  /* Permite que body pueda ocupar 100% de la ventana */
  height: 100%;
}

/* BODY configurado como contenedor flex vertical */
body {
  height: 100%;
  min-height: 100vh;   /* asegura altura mínima igual a la ventana */
  margin: 0;
  padding: 0;

  background: linear-gradient(to bottom right, #F7EFEF, #d1f5f2);

  display: flex;              /* activa comportamiento flexible */
  flex-direction: column;     /* coloca header, contenido y footer en columna */
}

/* Contenedor del header cargado dinámicamente */
#site-header {
  flex-shrink: 0;     /* evita que el header cambie de tamaño en flex */
}

/* Área principal del contenido */
main,
.contacto {
  flex: 1 0 auto;     /* ocupa el espacio disponible y empuja al footer hacia abajo */
}

/* Contenedor donde se inyecta el footer */
#site-footer {
  flex-shrink: 0;     /* evita que el footer se estire */
  margin-top: auto;   /* posiciona el footer al final del área visible cuando hay poco contenido */
}

/* =============================
   ESTILOS PROPIOS DEL FOOTER
============================= */

/* Footer superior */
footer.footer {
    width: 100%;
    background-color: #fff;
    box-shadow: 0 -2px 2px rgba(0,0,0,0.15); /* sombra superior */
}

/* Contenedor principal del footer */
.footer-container {
    display: flex;
    justify-content: space-between; /* distribuye los elementos en los extremos */
    align-items: center;            /* centra verticalmente */
    padding: 10px 8%;
    font-family: var(--fontTitle);
}

/* Logo y texto PEACH */
.footer .logo-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.2rem;
    font-weight: 600;
    color: #000 !important;
}

/* Colores del logo al pasar el cursor */
.footer .logo-link:hover {
    color: var(--secondaryColor) !important;
}

/* Enlaces dentro del footer */
.footer a {
    color: #000 !important;
}

.footer a:hover {
    color: var(--secondaryColor) !important;
}

/* Iconos del footer */
.footer i {
    font-size: 1.5rem;
    margin-left: 8px;
    color: #000 !important;
}

.footer i:hover {
    color: var(--secondaryColor) !important;
}

/* Barra inferior */
.footer-bottom {
    background-color: #e5e5e5;
    text-align: center;
    padding: 10px 0;
    font-family: var(--fontText);
    font-size: 0.9rem;
    border-top: 1px solid #dcdcdc;
}

/* =============================
   RESPONSIVIDAD
============================= */

@media (max-width: 462px) {
  .footer-container {
    justify-content: center;   /* centra elementos */
    flex-wrap: wrap;           /* permite múltiple línea */
    gap: 10px;
    text-align: center;
  }

  .footer-icons {
    display: flex;
    justify-content: center;
    gap: 10px;
  }
}

@media (max-width: 340px) {
  .footer-container {
    flex-direction: column;   /* elementos en bloque */
    gap: 10px;
  }
}