/* ==============================
   Global Pattern (BODY)
   ============================== */

:root{
  --texmex-base: #fdfaf5;
  --texmex-opacity: 0.10; /* 0.08–0.12 recomendado */
  --texmex-size: 80px;

  /* Tinte turquesa de secciones */
  --overlay-teal: rgba(59,133,142,0.82);

  /* Líneas EXTRA para que en turquesa se vean fuertes */
  --overlay-line-light: rgba(255,255,255,0.14);
  --overlay-line-dark: rgba(0,0,0,0.06);
  --overlay-line-width: 2px; /* 2–3px */
}

body{
  background-color: var(--texmex-base);
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(59,133,142,var(--texmex-opacity)) 0px,
      rgba(59,133,142,var(--texmex-opacity)) 2px,
      transparent 2px,
      transparent var(--texmex-size)
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(201,92,58,var(--texmex-opacity)) 0px,
      rgba(201,92,58,var(--texmex-opacity)) 2px,
      transparent 2px,
      transparent var(--texmex-size)
    );

  /* Esto ayuda a que el patrón “no se despegue” entre secciones */
  background-attachment: fixed;
}

/* ==============================
   Section Overlay System
   (tinte + líneas arriba)
   ============================== */

.section-overlay{
  position: relative;
  background: transparent !important;
}

/* 1) Tinte turquesa (debajo) */
.section-overlay::before{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay-teal);
  z-index: 0;
}

/* 2) Líneas extra (encima del tinte) para recuperar contraste */
.section-overlay::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background-image:
    repeating-linear-gradient(
      45deg,
      var(--overlay-line-light) 0px,
      var(--overlay-line-light) var(--overlay-line-width),
      transparent var(--overlay-line-width),
      transparent var(--texmex-size)
    ),
    repeating-linear-gradient(
      -45deg,
      var(--overlay-line-dark) 0px,
      var(--overlay-line-dark) var(--overlay-line-width),
      transparent var(--overlay-line-width),
      transparent var(--texmex-size)
    );

  /* Para que las líneas coincidan con el patrón fijo del body */
  background-attachment: fixed;

  z-index: 1;
}

/* Contenido arriba de todo */
.section-overlay > *{
  position: relative;
  z-index: 2;
}