/* === Forzar ancho total en banners y secciones principales === */
section, .banner, .hero, .page-section {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 0 !important;
}
h1, h2, h3, .titulo, .page-content h1 strong, .page-content h1 span {
  text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.35), 0 0 12px rgba(0, 0, 0, 0.2);
  font-weight: 600;
}
/* Sombra elegante para todos los títulos principales */
h1, h2, .page-content h1, .page-content h2 {
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.35), 0 0 10px rgba(0, 0, 0, 0.25);
  font-weight: 600;
  letter-spacing: -0.5px;
}
h1, h2 { font-size: 2.2em; letter-spacing: -0.5px; }
section, .page-section { margin-bottom: 60px; }
.page-content { background: rgba(255,255,255,0.9); }
.hero-text {
  background: rgba(0,0,0,0.35);
  padding: 12px 20px;
  border-radius: 8px;
  color: #fff;
}
.hero-text h1 {
  text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
}
.hero .btn {
  background-color: #6b8f3e;
  color: #fff;
  border-radius: 8px;
}
section {
  margin-top: 60px;
  margin-bottom: 60px;
}
body {
  background: url('URL_FONDO_VERANO') center/cover no-repeat fixed;
}
section {
  background: rgba(255,255,255,0.9);
  border-radius: 8px;
}
/* === 1) HERO: overlay oscuro + texto legible + CTA visible === */

/* Quita el test si lo tenés */
body { outline: none !important; }

/* Intenta encontrar el hero principal (varias opciones) */
section:first-of-type,
.hero:first-of-type,
.banner:first-of-type {
  position: relative !important;
}

/* Overlay semitransparente sobre el hero */
section:first-of-type::before,
.hero:first-of-type::before,
.banner:first-of-type::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.28); /* subí a .35 si el fondo es claro */
  z-index: 1;
}

/* Asegurar que el texto quede por encima del overlay */
section:first-of-type *:where(h1,h2,h3,p,a,button),
.hero:first-of-type *:where(h1,h2,h3,p,a,button),
.banner:first-of-type *:where(h1,h2,h3,p,a,button) {
  position: relative;
  z-index: 2;
  text-shadow: 2px 2px 8px rgba(0,0,0,.55);
}

/* Estilo para botones dentro del hero */
section:first-of-type a.button,
section:first-of-type .btn,
.hero:first-of-type a.button,
.hero:first-of-type .btn,
.banner:first-of-type a.button,
.banner:first-of-type .btn {
  background: #6b8f3e !important; /* Verde Overarg (hover más claro) */
  color: #fff !important;
  border-radius: 10px !important;
  padding: 12px 20px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.18) !important;
}
section:first-of-type a.button:hover,
section:first-of-type .btn:hover { filter: brightness(1.08); }
/* --- HERO ajustado: sin oscurecer la página, solo mejora legibilidad --- */

/* Quitamos el overlay global oscuro */
section:first-of-type::before,
.hero:first-of-type::before,
.banner:first-of-type::before {
  background: none !important;
}

/* Caja elegante solo en botones tipo "Agregar al carrito" */
button, .btn, .add-to-cart, a.button {
  background: #6b8f3e !important; /* Verde Militar Overarg */
  color: #fff !important;
  border-radius: 10px !important;
  padding: 12px 20px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18) !important;
  font-weight: 600;
  transition: transform .2s ease, box-shadow .2s ease;
}
button:hover, .btn:hover, .add-to-cart:hover, a.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.22);
}

/* === 2) Espaciado y aire entre secciones === */

/* Aplica margen vertical general */
section, .page-section, .dv-section, .content-block {
  margin-top: 60px !important;
  margin-bottom: 60px !important;
}

/* Asegura que haya espacio interno (padding) dentro de cada bloque */
section > .content, .page-section > .content, .dv-section > .content {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

/* Evita que las imágenes queden pegadas entre sí */
img {
  margin-bottom: 15px !important;
  display: block;
}

/* Ajusta títulos para que no queden demasiado cerca del texto */
h1, h2, h3 {
  margin-bottom: 15px !important;
}
/* === Fondo visible en toda la página === */

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* Imagen de fondo fija y visible */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("URL_DE_TU_IMAGEN") center/cover no-repeat;
  filter: brightness(1.05) saturate(110%);
  opacity: 1;
}

/* Aumenta transparencia de las cajas de contenido para que el fondo se vea más */
.page-content, .container, .content, section, .dv-page-body {
  background: rgba(255,255,255,0.85) !important; /* Podés bajar a 0.75 si querés más fondo */
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}
/* === Fondo degradado y sutil en toda la página === */

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(243, 222, 188, 0.4), rgba(160, 205, 229, 0.4)),
    url("URL_DE_TU_IMAGEN") center/cover no-repeat;
  filter: brightness(1.08) saturate(115%) blur(6px);
  opacity: 1;
  transform: scale(1.05);
}

.page-content, .container, .content, section, .dv-page-body {
  background: rgba(255,255,255,0.78) !important;
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.08);
}