/* Abejas de la Jarra — responsive + cross-browser styles (2026-01)
   Goals:
   - No fixed section heights (prevents content being cut on mobile)
   - Valid layout in Safari/iOS (avoid absolute-positioned main content)
   - Responsive nav, images, videos, and map
*/

/* -------- Base reset -------- */
html{
  height:100%;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

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

body{
  margin:0;
  font-family:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:#fff;
  line-height:1.55;
  background:#000; /* only visible during image loading */
}

img,video,iframe{max-width:100%;height:auto;}

/* Ensure media wrappers don't introduce overflow in some browsers */
picture{display:block;max-width:100%;}

a{color:inherit;}

/* -------- Navigation -------- */
.nav{
  background:rgba(250,246,236,0.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.nav ul{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:0.5rem 1.25rem;
  list-style:none;
  padding:0.75rem 1rem;
  margin:0;
}

.nav ul li{margin:0;}

.nav ul li a{
  text-decoration:none;
  color:#2c4d17;
  font-weight:700;
  font-size:clamp(0.95rem,2.4vw,1.05rem);
  padding:0.25rem 0.15rem;
  border-radius:8px;
}

.nav ul li a:hover,
.nav ul li a:focus-visible{
  text-decoration:underline;
  outline:none;
}

/* Current page/language indicator */
.nav ul li a[aria-current="page"]{
  text-decoration:underline;
}

/* -------- Background blocks -------- */
.bloque{
  position:relative;
  text-align:center;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  /* Let sections grow with their content (no fixed heights) */
  padding:clamp(3rem,6vw,5rem) 1rem;
}

.bloque--header{
  min-height:220px;
  padding-top:clamp(3.5rem,7vw,5rem);
  padding-bottom:2.5rem;
}

.bloque--header-video{
  overflow:hidden;
}

.bloque--header-video .texto-superpuesto{
  z-index:2;
}

.video-bg{
  position:absolute;
  inset:0;
  z-index:0;
  opacity:1;
}

.video-bg::after{
  content:"";
  position:absolute;
  inset:0;
  /* Lighter overlay so the video doesn't look too dark */
  background:linear-gradient(
    180deg,
    rgba(0,0,0,0.14),
    rgba(0,0,0,0.06) 45%,
    rgba(0,0,0,0.18)
  );
}

.video-bg iframe{
  position:absolute;
  top:50%;
  left:50%;
  width:100vw;
  height:56.25vw;
  min-width:177.77vh;
  min-height:100%;
  transform:translate(-50%, -50%);
  border:0;
  pointer-events:none;
}

.video-bg video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:none;
  border:0;
  pointer-events:none;
  /* Brighten the footage slightly for better legibility */
  filter:brightness(1.34) contrast(1.07) saturate(1.08);
}

@media (prefers-reduced-motion: reduce){
  .video-bg{display:none;}
}


.bloque--hero{
  /*
    Hero block:
    - Center the overlay card so the section doesn't feel "empty"
    - Avoid very tall backgrounds on mobile
    - Use iOS Safari-friendly viewport units
  */
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:90vh;
  min-height:90svh;
}

/* On small screens, avoid overly tall hero sections */
@media (max-width:720px){
  .bloque--hero{
    min-height:0;
    padding:2.75rem 1rem;
  }
}

/* -------- Overlay card -------- */
.texto-superpuesto{
  position:relative; /* in flow: avoids cut-off on mobile */
  /*
    Use percentage + max-width instead of vw/min().
    This prevents nested children (e.g., .proyecto-item) from becoming wider
    than the overlay card due to viewport-based widths.
  */
  width:100%;
  max-width:920px;
  margin:0 auto;
  /* Lighter card so it doesn't feel "too dark" */
  background-color:rgba(0,0,0,0.24);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding:clamp(1rem,2.8vw,1.75rem);
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.16);
  animation:slideIn 1s ease-out;
}

.texto-superpuesto h1,
.texto-superpuesto h2,
.texto-superpuesto h3,
.texto-superpuesto p{
  text-shadow:0 10px 26px rgba(0,0,0,0.28), 0 2px 10px rgba(0,0,0,0.35);
}

.logo-mdj{
  display:block;
  width:min(140px, 42vw);
  height:auto;
  margin:0 auto 0.75rem;
}

.texto-superpuesto h1,
.texto-superpuesto h2,
.texto-superpuesto h3{
  margin:0 0 0.6rem;
  line-height:1.2;
}

.texto-superpuesto p{margin:0.75rem 0 0;}
.lead{
  margin-top:0.35rem;
  font-size:clamp(1.02rem,2.6vw,1.15rem);
  opacity:0.95;
}


/* -------- Projects -------- */
.proyecto-item{
  /*
    Keep items constrained by the parent overlay. Setting a viewport-based
    width here can overflow the padded card on mobile.
  */
  margin:2rem 0;
  width:100%;
  text-align:left;
  animation:fadeInUp 0.8s ease-out;
}

.proyecto-item h3{
  text-align:center;
  margin:0 0 0.75rem;
}

.proyecto-item img,
.proyecto-item video{
  display:block;
  width:100%;
  border-radius:14px;
}

.proyecto-item video{background:#000;}

/* -------- “Cómo participar” grid -------- */
.participar-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.25rem;
  margin-top:1.25rem;
  text-align:left;
}

.participar-item{
  padding:0.75rem 0;
  border-top:1px solid rgba(255,255,255,0.18);
}

.participar-item:first-child{
  border-top:none;
}

.participar-item h3{margin:0 0 0.5rem;}

.participar-item p{margin:0.35rem 0 0;}

/* -------- Map -------- */
.google-map{
  /* Constrain to the parent overlay width */
  width:100%;
  height:min(60vh,420px);
  border:0;
  border-radius:14px;
  display:block;
  margin:1rem 0 0;
}

.footer-note{margin-top:1.25rem;opacity:0.9;}

/* -------- Animations -------- */
@keyframes slideIn{
  from{transform:translateY(22px);opacity:0;}
  to{transform:translateY(0);opacity:1;}
}

@keyframes fadeInUp{
  from{transform:translateY(16px);opacity:0;}
  to{transform:translateY(0);opacity:1;}
}

/* -------- Small screens -------- */
@media (max-width:720px){
  .participar-grid{grid-template-columns:1fr;}

  /* Reduce the hero height on mobile so the background doesn't look stretched/empty */
  .bloque--hero{
    min-height:0;
    padding:2.75rem 1rem;
  }
}

@media (max-width:420px){
  .nav ul{gap:0.35rem 0.9rem;}
}

/* -------- Call-to-action buttons -------- */
.cta{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:0.75rem;
  margin-top:1.1rem;
}

.btn{
  display:inline-block;
  text-decoration:none;
  font-weight:800;
  letter-spacing:0.2px;
  border-radius:999px;
  padding:0.7rem 1.05rem;
  background:rgba(250,246,236,0.92);
  color:#2c4d17;
  box-shadow:0 6px 16px rgba(0,0,0,0.28);
}

.btn:hover,
.btn:focus-visible{
  text-decoration:underline;
  outline:none;
}

.btn--ghost{
  background:rgba(0,0,0,0.35);
  border:1px solid rgba(255,255,255,0.35);
  color:#fff;
}

/* -------- Feature cards -------- */
.features-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.25rem;
  margin-top:1.25rem;
  text-align:left;
}

.feature{
  padding:1rem;
  border:1px solid rgba(255,255,255,0.18);
  border-radius:14px;
  background:rgba(0,0,0,0.12);
}

.feature h3{margin:0 0 0.5rem;}
.feature p{margin:0;}

/* -------- Stats -------- */
.stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0.9rem;
  margin-top:1.25rem;
}

.stat{
  border:1px solid rgba(255,255,255,0.18);
  border-radius:14px;
  padding:0.9rem 0.8rem;
  text-align:center;
  background:rgba(0,0,0,0.12);
}

.stat strong{
  display:block;
  font-size:clamp(1.2rem,5vw,1.8rem);
  line-height:1;
}

.stat span{display:block;opacity:0.95;margin-top:0.35rem;}

/* -------- Small screens -------- */
@media (max-width:720px){
  .features-grid{grid-template-columns:1fr;}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));}
}