/* ===================== FONDO GLOBAL — productos.html ===================== */

/* Para que body tenga altura real (contenido) y #fondo pueda estirarse hasta el final */
html {
    height: 100%;
}
body {
    border: none;
    position: relative;   /* contexto de posicionamiento para #fondo */
    min-height: 100%;     /* body crece con el contenido */
}

#fondo,
.fondo-global {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.fondo__estatico{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
/*contenedor top_naranja*/
.top_naranja{
position: relative;
width: 100%;

display: flex;
}
/* picture wrapper de ondas_naranja: debe ser absolute igual que el img interno */
.pic-ondas,
.ondas_naranja {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
    pointer-events: none;
}

/* picture wrapper de atras_naranja: ocupa el espacio y empuja el contenedor */
.pic-atras,
.atras_naranja {
    position: relative;
    width: 100%;
    height: auto;
    display: block;
    z-index: 1;
}

/* resto de imágenes estáticas — picture wrapper + img */
.pic-azul, .parte_azul,
.pic-footer, .footer_verde {
    width: 100%;
    height: auto;
    display: block;
}
/* =======================================================
   2. FONDO ANIMADO (Capa Trasera del Fondo)
   ======================================================= */
.fondo__animado{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.lineas_topograficas{
  position: fixed;
  top: 0;
  left: 0;
    width: 100%;
  height: 100vh;
  object-fit: cover;

}
.fondo_circulos {
  position: fixed; /* Mantiene los círculos fijos en pantalla */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 3; /* Por encima del fondo__estatico que tiene z-index: 2 */
  pointer-events: none;
}

/* Base individual para las esferas */
.fondo_circulos .bg-circle {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  pointer-events: none;
  /* La posición será administrada de forma fluida por JS */
}

/* Tamaños y colores base de 5 círculos únicos antes del remapeo de JS */
.fondo_circulos .circle-1 {
    width: 400px; height: 400px;
background: linear-gradient(135deg, #ffffff 0%, #ffcc00 30%, #ff8c00 70%, #d2691e 100%);
  box-shadow: 15px 25px 30px rgba(255, 166, 0, 0.6);
}
.fondo_circulos .circle-2 {
    width: 250px; height: 250px;
      background: linear-gradient(135deg, #ffffff 0%, #ff8da1 30%, #ff2a5f 70%, #d10034 100%);
  box-shadow: 15px 25px 30px rgba(255, 141, 161, 0.6);
}
.fondo_circulos .circle-3 {
    width: 350px; height: 350px;
  background: linear-gradient(135deg, #ffffff 0%, #a1c4fd 30%, #6aa5ff 70%, #2f7ef2 100%);
  box-shadow: 15px 25px 30px rgba(161, 196, 253, 0.6);
}
.fondo_circulos .circle-4 {
    width: 180px; height: 180px;
  background: linear-gradient(135deg, #ffffff 0%, #d1ff8d 30%, #9dcb45 70%, #6a9900 100%);
  box-shadow: 15px 25px 30px rgba(209, 255, 141, 0.6);
}
.fondo_circulos .circle-5 {
    width: 280px; height: 280px;
  background: linear-gradient(135deg, #ffffff 0%, #ffd6a7 30%, #ffa046 70%, #f87d29 100%);
  box-shadow: 15px 25px 30px rgba(255, 160, 70, 0.6);
}