/* =========================================================
   OKLYCOSMETICS — FONDO GLOBAL V2 REAL
   SOLO FONDO.
   Reemplaza el V1 anterior por una imagen real de fondo floral/bokeh.
   No modifica contenido, textos, logos, imágenes de producto,
   carrusel, tipografías, posiciones ni tamaños.
   ========================================================= */

/* Fondo real continuo */
html,
body{
  background-color:#fff7f4 !important;
}

body{
  background-image:url("images/okly-background-global.webp") !important;
  background-repeat:repeat-y !important;
  background-position:center top !important;
  background-size:100% auto !important;
  background-attachment:scroll !important;
}

/* Mantener header legible */
.site-header{
  background:rgba(255,251,248,.96) !important;
}

/* Hero/carrusel: NO se toca */
.hero.hero-reel,
.hero-reel-stage{
  background:transparent !important;
}

/* Eliminar los fondos antiguos de V5.x en las secciones.
   El contenido, tarjetas y distribución permanecen intactos. */
#lineas,
.tinted,
.why,
.displays,
.lead-section{
  background:transparent !important;
}

/* Quitar únicamente decoraciones de fondo anteriores */
#lineas::before,
#lineas::after,
.tinted::before,
.tinted::after,
.why::before,
.why::after,
.displays::before,
.displays::after,
.lead-section::before,
.lead-section::after{
  content:none !important;
  display:none !important;
  background:none !important;
}

/* La franja de beneficios conserva una capa blanca translúcida
   para lectura, dejando ver el nuevo fondo por debajo. */
.benefits{
  background:rgba(255,255,255,.88) !important;
}

/* No modificar las superficies de contenido */
.product-card,
.business-card,
.why-grid article,
.display-grid figure,
.lead-form{
  /* deliberadamente sin reglas: se conservan exactamente como están */
}

/* Móvil: mismo fondo, ajustado para que las flores queden en bordes */
@media(max-width:700px){
  body{
    background-image:url("images/okly-background-global.webp") !important;
    background-repeat:repeat-y !important;
    background-position:center top !important;
    background-size:auto 720px !important;
    background-attachment:scroll !important;
  }

  #lineas,
  .tinted,
  .why,
  .displays,
  .lead-section{
    background:transparent !important;
  }
}