/* ============================================================
   TEXTURAS NATURALES AMAZÓNICAS — textures.css
   Aplica texturas orgánicas a las secciones del sitio
   ============================================================ */

/* ── Textura de papel orgánico (Quiénes Somos, Junta) ───── */
#quienes,
#junta {
  position: relative;
  background-color: var(--crema);
  background-image:
    url('../img/tex_papel.png'),
    linear-gradient(160deg, #F8F5EE 60%, #EEF7F0 100%);
  background-blend-mode: multiply;
  background-size: 420px, cover;
  background-repeat: repeat, no-repeat;
}

/* ── Textura de hojas (Participar) ─────────────────────── */
#participar {
  position: relative;
  background-image:
    url('../img/tex_hojas.png'),
    linear-gradient(135deg, var(--verde-dark) 0%, var(--azul-deep) 100%);
  background-blend-mode: soft-light;
  background-size: 360px, cover;
  background-repeat: repeat, no-repeat;
}

/* ── Textura de agua (Objetivo Social) ──────────────────── */
#objetivo {
  position: relative;
  background-image:
    url('../img/tex_agua.png'),
    linear-gradient(160deg, var(--azul-deep) 0%, var(--negro) 100%);
  background-blend-mode: soft-light;
  background-size: 500px, cover;
  background-repeat: repeat, no-repeat;
}

/* ── Textura hojas sutiles (Transparencia) ──────────────── */
#transparencia {
  background-image:
    url('../img/tex_hojas.png'),
    linear-gradient(180deg, #EEF5F1 0%, #F0EDE6 100%);
  background-blend-mode: luminosity;
  background-size: 300px, cover;
  background-repeat: repeat, no-repeat;
}

/* ── Textura papel sobre blanco (Noticias) ──────────────── */
#noticias {
  background-image:
    url('../img/tex_papel.png'),
    linear-gradient(180deg, #ffffff 0%, #F8F5EE 100%);
  background-blend-mode: multiply;
  background-size: 380px, cover;
  background-repeat: repeat, no-repeat;
}

/* ── Textura sutil en contacto ──────────────────────────── */
#contacto {
  background-image:
    url('../img/tex_papel.png'),
    linear-gradient(160deg, #fff 50%, #EEF5F1 100%);
  background-blend-mode: multiply;
  background-size: 350px, cover;
  background-repeat: repeat, no-repeat;
}

/* ══════════════════════════════════════════════════════════
   DIVISORES ORGÁNICOS SVG entre secciones
   ══════════════════════════════════════════════════════════ */

/* Clase base para divisores */
.wave-divider {
  display: block;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  margin: 0;
}
.wave-divider svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ══════════════════════════════════════════════════════════
   GRAIN / RUIDO CSS (capa superpuesta sin imagen)
   da sensación de papel impreso natural
   ══════════════════════════════════════════════════════════ */
#quienes::after,
#junta::after,
#transparencia::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* Filtro SVG turbulence como ruido de papel */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.022'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px;
}
/* Todo el contenido debe quedar por encima de la capa de ruido */
#quienes > *,
#junta > *,
#transparencia > * {
  position: relative;
  z-index: 1;
}

/* ══════════════════════════════════════════════════════════
   BORDES ORGÁNICOS — micro-detalles de selva
   ══════════════════════════════════════════════════════════ */
.trans-card,
.noticia-card,
.asociado-card,
.miembro-card {
  /* Borde levemente textured con box-shadow cálida */
  box-shadow:
    0 2px 12px rgba(0,0,0,.07),
    inset 0 1px 0 rgba(255,255,255,.7);
}

/* ── Acento de hoja en section-title ──────────────────── */
.section-title::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--verde);
  border-radius: 50%;
  margin-right: .5rem;
  vertical-align: middle;
  animation: parpadeo 3s ease-in-out infinite;
}
@keyframes parpadeo {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(1.6); }
}

/* ── Fondo footer con textura ─────────────────────────── */
footer {
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #1C2C1F 0%, #0d1a10 100%);
  background-repeat: repeat, no-repeat;
  background-size: 180px, cover;
}

/* ── Imagen hero con overlay textura corteza ──────────── */
.hero-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.35' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 256px;
  pointer-events: none;
}