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

/* 2) VARIABLES GLOBALES */
:root {
  --footer-bg-color: #0d315e;
  --footer-text-color: #ffffff;
  --footer-heading-size: 1.25rem;
  --footer-text-size: 0.95rem;
  --footer-gap: 1rem;
  --footer-padding-vertical: 2rem; 
  --footer-padding-horizontal: 1rem; 
  --footer-max-width: 1200px;
  --pie-roja-grosor: 4px;
  --pie-roja-color: #e30613;
}

/* 3) CONTENEDOR GENERAL DEL PIE */
.pie {
  background-color: var(--footer-bg-color);
  color: var(--footer-text-color);
  margin-top: 6rem; 
  font-family: Arial, sans-serif;
  padding: 0,
           var(--footer-padding-horizontal),
           var(--footer-padding-vertical),
           var(--footer-padding-horizontal);
}

/* 3.1) LÍNEA ROJA SUPERIOR: ahora queda pegada al top del footer */
.pie__borde-rojo {
  width: 100%;
  height: var(--pie-roja-grosor);
  background-color: var(--pie-roja-color);
  margin-bottom: 40px;
}

/* 4) CONTENEDOR FLEX DE COLUMNAS */
.pie__container {
  max-width: var(--footer-max-width);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 0;
}

/* 5) CADA COLUMNA */
.pie__column {
  flex: 1 1 250px; 
  display: flex;
  flex-direction: column;
  gap: var(--footer-gap);
}

/* 5.1) TITULARES */
.pie__titulo {
  font-size: var(--footer-heading-size);
  font-weight: bold;
  margin-bottom: var(--footer-gap);
}

/* 5.2) LISTAS */
.pie__lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--footer-gap);
}

.pie__item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.pie__icono {
  font-size: 1.3rem;
  flex-shrink: 0;
  margin-top: 0.1rem; 
  color: var(--footer-text-color);
}

.pie__texto {
  font-size: var(--footer-text-size);
  line-height: 1.5;
  color: var(--footer-text-color);
}

/* 5.3) ENLACES (Nosotros) */
.pie__link {
  font-size: var(--footer-text-size);
  color: var(--footer-text-color);
  text-decoration: none;
  transition: color 0.2s ease;
}

.pie__link:hover {
  color: #e30613; /* color de hover contrastante */
}

/* 5.4) “Línea Gratuita” en negrita */
.pie__linea {
  font-weight: bold;
}

/* 6) ÍCONOS DE REDES SOCIALES */
.pie__social-icons {
  margin-top: var(--footer-gap);
  display: flex;
  gap: 0.75rem;
}

/* 6.1) BOTONES DE REDES SOCIALES: mismos estilos que .menu__social-icons */
.pie__social-link {
  display: inline-flex;
  width: 40px;
  height: 40px;
  background-color: #0d315e; 
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.pie__social-link:hover {
  background-color: #e30613; 
  transform: scale(1.1);
}

/* Asegurar que los SVGs vayan en blanco */
.pie__social-link svg {
  width: 20px;
  height: 20px;
  fill: #fff;
  transition: fill 0.2s ease;
}

.pie__social-link:hover svg {
  fill: #fff;
}

/* 7) COLUMNA DE IMAGEN DERECHO */
.pie__imagen {
  /* elimina el flex-basis fijo de 600px */
  flex: 1 1 auto;
  display: flex;
  justify-content: center; 
  align-items: flex-start; 
  padding-top: var(--footer-gap); 
}

/* ————— Aumentar tamaño del logo ————— */
.pie__img-derecha {
  width: 480px;   
  height: 250px;   
  object-fit: contain;
  border-radius: 8px;
  margin-left: 30%;
}

/* 8) COPYRIGHT */
.pie__copyright {
    display: block;
    margin: 2rem auto 0;       
    text-align: center;
    font-size: 0.9rem;
    color: var(--footer-text-color);
    text-decoration: none;     
    cursor: pointer;           
  }
  /* 5.2.1) Dirección activa (según región detectada) */
.pie__texto--activo {
  color:yellow;
  font-weight: 700;
}
.pie__icono--activo {
  color: yellow
  ;
}

  

/* --------------------  RESPONSIVE  -------------------- */
@media (max-width: 992px) {
  .pie__container {
    gap: 1.5rem;
  }
  .pie__column {
    flex: 1 1 calc(50% - 1.5rem);
  }
  /* Que la imagen baje por debajo de las demás columnas */
  .pie__imagen {
    flex: 1 1 100%;
    margin-top: 1rem;
    justify-content: center; 
  }
}

/* 10) En pantallas pequeñas (< 576px), todo en 1 columna */
@media (max-width: 576px) {
  .pie__container {
    flex-direction: column;
    gap: 1rem;
  }
  .pie__column {
    flex: 1 1 100%;
    margin-left: 10px;
    align-items: center;
}
.pie__imagen {
  margin-top: 1rem;
  justify-content: center;
}
.pie__img-derecha {
  width: 200px;
  margin-left: 0%;
}
}
/* ——— Responsive 600px–800px: centrar todo el contenido ——— */
@media screen and (min-width: 600px) and (max-width: 800px) {
  /* Contenedor principal en columna y centrado */
  .pie__container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
  }

  /* Cada columna ocupa el 100% y está centrada */
  .pie__column {
    flex: 1 1 100%;
    margin: 0 auto;
    align-items: center;
  }

  /* La imagen debajo y centrada */
  .pie__imagen {
    flex: 1 1 100%;
    margin-top: 1.5rem;
    justify-content: center;
  }
  .pie__img-derecha {
    width: 280px;      /* ajusta ancho si quieres */
    margin: 0 auto;
  }

  /* Titulares y texto centrados */
  .pie__titulo,
  .pie__texto,
  .pie__link {
    text-align: center;
  }

  /* Redes sociales centradas */
  .pie__social-icons {
    justify-content: center;
    margin-top: 1rem;
  }
}