/* Fondo Coyotepec suave: paisaje, coyote y superficies institucionales */
html,
html body,
html body[class],
html body[class].tp-master,
html body[class].tp-portal-unified {
  background-color: #f4eee6 !important;
  background-image:
    linear-gradient(135deg, rgba(255,253,249,.36), rgba(247,239,231,.32)),
    url('../img/bg_fondo-coyotepec-difuminado-v2.png') !important;
  background-size: auto, 720px auto !important;
  background-repeat: no-repeat, repeat !important;
  background-position: center top, center top !important;
  background-attachment: fixed, fixed !important;
}

/* El encabezado deja de ser blanco puro y comparte la huella visual */
#navigationmenu,
header#navigationmenu,
.navigationmenulight {
  background-color: rgba(248,241,234,.97) !important;
  background-image:
    linear-gradient(rgba(248,241,234,.92), rgba(248,241,234,.92)),
    url('../img/bg_fondo-coyotepec-difuminado-v2.png') !important;
  background-size: auto, 760px auto !important;
  background-repeat: no-repeat, repeat !important;
  border-bottom: 2px solid rgba(184,146,71,.55) !important;
  box-shadow: 0 8px 24px rgba(76,7,29,.08) !important;
}

#navigationmenu #nav,
#nav.sf-menu {
  background: rgba(251,246,240,.88) !important;
  border-top: 1px solid rgba(184,146,71,.18) !important;
  border-bottom: 1px solid rgba(76,7,29,.08) !important;
}

/* Los grid_12 se convierten en superficies suaves, sin alterar medidas */
.grid_12:not(.gridnavigation) {
  box-sizing: border-box !important;
  background-color: rgba(255,253,249,.82) !important;
  background-image:
    linear-gradient(rgba(255,253,249,.88), rgba(255,253,249,.88)),
    url('../img/bg_fondo-coyotepec-difuminado-v2.png') !important;
  background-size: auto, 760px auto !important;
  background-repeat: no-repeat, repeat !important;
  background-position: center, center top !important;
  border: 1px solid rgba(184,146,71,.22) !important;
  border-radius: 24px !important;
  box-shadow: 0 16px 38px rgba(76,7,29,.08) !important;
  backdrop-filter: blur(2px);
}

.tinynav,
select.tinynav {
  background-color: rgba(255,252,248,.96) !important;
  border: 1px solid rgba(76,7,29,.22) !important;
  color: #4c071d !important;
  box-shadow: 0 8px 20px rgba(76,7,29,.08) !important;
}

@media (max-width: 700px) {
  html,
  html body,
  html body[class],
  html body[class].tp-master,
  html body[class].tp-portal-unified {
    background-size: auto, 520px auto !important;
    background-attachment: scroll, scroll !important;
  }

  #navigationmenu,
  header#navigationmenu,
  .navigationmenulight {
    background-size: auto, 560px auto !important;
  }

  .grid_12:not(.gridnavigation) {
    border-radius: 18px !important;
    background-size: auto, 560px auto !important;
  }
}