/* ==========================================================
   MÓDULO FIESTAS PATRIAS — AT Design Studio
   Archivo temporal. Bórralo (junto con patrias.js y las líneas
   <!-- EDITAR: PATRIAS --> en index.html) después del 16 de sept.
   ========================================================== */

/* Push the navbar down by the ribbon's height */
#navbar {
  top: 30px;
}
@media (max-width: 480px) {
  #navbar {
    top: 24px;
  }
}

/* ---- Banderines colgando bajo el navbar (ondulan individualmente) ---- */
.patrias-banderines{
  position:absolute;
  top:100%;
  left:0; width:100%;
  height:60px;
  z-index:-1; /* debajo del contenido del navbar, colgando por FUERA de él */
  overflow:visible; /* cada banderín ondula desde su propio eje, sin salirse de forma brusca */
  pointer-events:none;
}
.banderines-cuerda{
  position:absolute;
  top:6px; left:0;
  display:flex;
  width:max-content;
}
.bandera{
  width:30px; height:40px;
  margin:0 3px;
  flex-shrink:0;
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  box-shadow:0 3px 8px rgba(0,0,0,.3);
  transform-origin:top center; /* cada banderín ondula desde su propio asta, no toda la cuerda junta */
  will-change:transform;
}
.bandera--verde{background:linear-gradient(180deg,#146b3a,#0d4f2b)}
.bandera--blanco{background:linear-gradient(180deg,#ffffff,#e8e8e0)}
.bandera--rojo{background:linear-gradient(180deg,#ce1126,#9c0d1c)}

@media (max-width:600px){
  .patrias-banderines{height:40px}
  .banderines-cuerda{top:4px}
  .bandera{width:20px;height:28px;margin:0 2px}
}

/* ---- Franja superior con el mensaje — arriba de TODO, empuja al navbar hacia abajo ---- */
.patrias-ribbon{
  position:fixed;
  top:0; left:0; width:100%;
  height:30px;
  z-index:1001; /* por encima del navbar (1000): nunca queda tapado ni se cruza con los links */
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:rgba(10,10,10,0.94);
  backdrop-filter:blur(10px);
  border-bottom:2px solid;
  border-image:linear-gradient(90deg,#1a7a43,#ffffff,#d4152e) 1;
  font-family:'Syne',sans-serif; font-weight:700;
  font-size:12.5px; letter-spacing:.6px;
  color:#f5f5f0;
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}
@media (max-width:480px){
  .patrias-ribbon{height:24px; font-size:10.5px; letter-spacing:.3px}
}