/* ---------------------------
   LEGALES - TÍTULOS Y PUNTOS
---------------------------- */
.contenido-legal h1 {
  text-align: center;
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 2rem;
}

.legal-punto {
  font-size: 1.18em;
  font-weight: 600;
  display: inline;
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1.1;
}
/* ---------------------------
   IMPORTAR FUENTE
---------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');

/* ---------------------------
   CONFIGURACIÓN GLOBAL
---------------------------- */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Open Sans', Arial, sans-serif;
  color: #222;
  background-image: url("img/imagen de fondo.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Todo el alto de la ventana */
}

main {
  flex: 1; /* Ocupa todo el espacio entre header y footer */
}

/* ---------------------------
   NAVBAR
---------------------------- */
.navbar {
  background: rgba(255,255,255,0.2);
  padding: 1rem 2rem;
  backdrop-filter: blur(5px);
}

.navbar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.logo { 
  height: 50px; 
  width: auto; 
  cursor: pointer; 
}

.menu a {
  color: #222;
  text-decoration: none;
  margin-left: 2rem;
  font-weight: 600;
  font-size: 1rem;
  position: relative;
  transition: color 0.3s;
}

.menu a:hover { color: #0C3C61; }

.menu a.activo::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  height: 2px;
  width: 100%;
  background-color: #0C3C61;
}

/* ---------------------------
   CONTENIDO
---------------------------- */
.contenido {
  text-align: center;
  padding: 3rem 2rem 1.2rem 2rem;
  max-width: 700px;
  margin: 3rem auto 2.5rem auto;
  color: #111; /* Color de texto negro para index.html */
  background: rgba(255,255,255,0.7); /* Fondo blanco semitransparente */
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.10);
}

h1 { font-size: 3rem; margin-bottom: 0.5rem; font-weight: 700; color: inherit; }
h2 { font-size: 1.8rem; margin: 0.5rem 0 1.5rem; font-weight: 400; color: inherit; }
p { font-size: 1.2rem; margin-bottom: 2rem; font-weight: 400; color: inherit; }

/* ---------------------------
   LOGOS DE TIENDAS
---------------------------- */
.store-buttons {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
}

/* Follow / social section under store buttons */
.follow-section {
  text-align: center;
  margin-top: 2.5rem; /* más espacio entre los botones y la sección "Mantente al tanto" */
}
.follow-section .follow-title {
  /* usar el mismo estilo que el h2 */
  font-size: 1.8rem;
  margin: 0.5rem 0 1.125rem; /* reducido ~25% respecto a 1.5rem */
  font-weight: 400;
  color: inherit;
}
/* Pastilla de Instagram (logo left + caption + isologo right) */
.insta-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px; /* un poco menos de separación para compensar el logo grande */
  /* Top/Right/Bottom/Left -> reduzco el padding izquierdo para equilibrar visualmente */
  padding: 0.30rem 0.9rem 0.30rem 0rem;
  border-radius: 12px; /* aumentado un poco el radio */
  background: linear-gradient(45deg, #f58529 0%, #dd2a7b 30%, #8134af 60%, #515bd4 100%);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
.insta-pill { text-decoration: none; color: inherit; }
.insta-pill:hover { transform: translateY(-2px); }

.pill-left .pill-left-img {
  height: 96px; /* logo mucho más grande */
  width: auto;
  display: block;
}

.pill-right { display: flex; flex-direction: column; align-items: center; }
.pill-caption {
  color: #fff;
  font-size: 1.4rem; /* más grande */
  font-weight: 400; /* no en negrita */
  margin-bottom: 8px;
  line-height: 1;
  text-align: center; /* centra el texto sobre el isologo */
}
.pill-isologo-link { display: inline-block; text-decoration: none; }
.pill-isologo-img {
  height: 48px; /* larger isologo under the caption */
  width: auto;
  display: block;
}

.store-logo {
  height: 80px;
  width: auto;
  cursor: pointer;
  border-radius: 16px;
  transition: all 0.3s ease;
  box-shadow: 8px 8px 20px rgba(0,0,0,0.15), -8px -8px 20px rgba(255,255,255,0.8);
}

.store-logo:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: inset 4px 4px 10px rgba(0,0,0,0.1), inset -4px -4px 10px rgba(255,255,255,0.6);
  filter: brightness(1.05);
}

/* Toast temporal (mensaje emergente) */
.toast {
  position: fixed;
  left: 50%;
  top: 45%; /* un poco más arriba */
  /* inicio ligeramente arriba y escalado para animar entrada */
  transform: translate(-50%, -60%) scale(0.96);
  background: rgba(0,0,0,0.88);
  color: #fff;
  padding: 0.9rem 1.4rem; /* más grande */
  border-radius: 12px;
  font-size: 1.3rem; /* más grande */
  min-width: 260px;
  max-width: 90%;
  text-align: center;
  box-shadow: 0 8px 26px rgba(0,0,0,0.32);
  opacity: 0;
  transition: opacity 220ms cubic-bezier(.22,.9,.35,1), transform 220ms cubic-bezier(.22,.9,.35,1);
  z-index: 9999;
  pointer-events: none;
  will-change: opacity, transform;
}
.toast.show { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }

/* ---------------------------
   LEGALES
---------------------------- */
.contenido-legal {
  max-width: 800px;
  margin: 3rem auto;
  padding: 2rem 1.5rem;
  color: #222;
  background-color: rgba(255,255,255,0.95);
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  line-height: 1.6;
  font-weight: 400;
}

/* ---------------------------
   FOOTER
---------------------------- */
.footer {
  text-align: center;
  padding: 2rem 1rem;
  font-size: 0.9rem;
  color: #555;
  background-color: rgba(255,255,255,0.9);
  flex-shrink: 0; /* No dejar que el footer se reduzca */
}

.footer a {
  color: #222;
  text-decoration: none;
  margin: 0 0.5rem;
  transition: color 0.3s;
  font-weight: 600;
}

.footer a:hover {
  color: #0C3C61; /* HOVER EN AZUL OSCURO */
}

/* ---------------------------
   RESPONSIVE
---------------------------- */
@media (max-width: 600px) {
  .navbar-container { 
    flex-direction: column; 
    align-items: center; 
    text-align: center; 
  }
  .menu { 
    margin-top: 1rem; 
    display: flex; 
    flex-direction: column; 
    gap: 0.5rem; 
  }
  .menu a { margin: 0; }
  .contenido { padding: 1.5rem; margin-top: 2rem; }
  h1 { font-size: 2rem; }
  h2 { font-size: 1.3rem; }
  p { font-size: 1rem; }
  .store-buttons { flex-direction: column; align-items: center; gap: 1rem; }
  .store-logo { height: 60px; }
  .contenido-legal { padding: 1.5rem 1rem; margin: 2rem 1rem; }
  .footer { padding: 1.5rem 1rem; font-size: 0.85rem; }

  /* Pill adjustments for small screens */
  .insta-pill { gap: 8px; padding: 0.22rem 0.45rem 0.22rem 0.25rem; }
  .pill-left .pill-left-img { height: 48px; }
  .pill-isologo-img { height: 40px; }
  /* Toast responsive: slightly smaller on small screens */
  .toast { font-size: 1.05rem; padding: 0.6rem 0.9rem; min-width: 180px; }
}