/* particles-hero.css — hero de partículas sin Slider Revolution */

.ph-hero {
  position: relative;
  width: 100%;
  /* El slider original medía 1240x868; conservamos esa proporción
     con un piso y un techo para que no se desborde en pantallas raras. */
  height: clamp(480px, 70vw, 868px);
  overflow: hidden;
  background-color: #fbfbf9;
}

/* Fondo: capa aparte para poder aplicarle el pan/zoom lento
   sin arrastrar el canvas ni el logo. */
.ph-hero__bg {
  position: absolute;
  inset: 0;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  transform-origin: center center;
  will-change: transform;
  animation: ph-panzoom 30s ease-in-out infinite alternate;
}

@keyframes ph-panzoom {
  from { transform: scale(1) translateY(0); }
  to   { transform: scale(1.3) translateY(-4%); }
}

.ph-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* El canvas no intercepta el cursor: el listener vive en .ph-hero,
     así las capas de texto de encima tampoco cortan el efecto. */
  pointer-events: none;
}

/* Capas de contenido (logo, claim). Centradas sobre el canvas. */
.ph-hero__layers {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.ph-hero__logo {
  width: min(85%, 1221px);
  height: auto;
  display: block;
}

.ph-hero__claim {
  width: min(55%, 790px);
  height: auto;
  display: block;
  margin-top: -1.5%;
}

@media (max-width: 782px) {
  .ph-hero { height: clamp(420px, 95vw, 720px); }
  .ph-hero__logo { width: 90%; }
  .ph-hero__claim { width: 62%; }
}

@media (prefers-reduced-motion: reduce) {
  .ph-hero__bg { animation: none; }
}

/* --- Variante "aguadas": reemplaza la foto de fondo por manchas de
   acuarela hechas en CSS, en los colores de marca. Mantiene lo orgánico
   del sitio sin arrastrar la red de nodos ya dibujada en la imagen. --- */
.ph-hero--aguadas {
  background-color: #fdfcf8;
}

.ph-hero--aguadas .ph-hero__bg {
  animation: none;
  background-image:
    radial-gradient(38% 46% at 14% 26%, rgba(37, 142, 164, .20), transparent 68%),
    radial-gradient(34% 42% at 86% 20%, rgba(240, 88, 32, .17), transparent 66%),
    radial-gradient(42% 50% at 22% 82%, rgba(240, 88, 32, .13), transparent 70%),
    radial-gradient(36% 44% at 78% 78%, rgba(18, 166, 124, .15), transparent 68%),
    radial-gradient(30% 34% at 52% 48%, rgba(37, 142, 164, .10), transparent 72%);
  filter: blur(6px);
}

/* Variante "limpia": sin fondo, solo la malla de nodos. */
.ph-hero--limpia { background-color: #fdfcf8; }
.ph-hero--limpia .ph-hero__bg { display: none; }

/* Variante "acuarela real": usa otro_background.png del material de marca,
   cuyas manchas son fuertes pero cuya red dibujada son curvas sueltas,
   no una malla triangulada. Deja el protagonismo a los nodos vivos. */
.ph-hero--acuarela { background-color: #fdfcfb; }

.ph-hero--acuarela .ph-hero__bg {
  /* Pan/zoom más corto que el original: la imagen es de 1536px de ancho
     y un 130% de zoom la dejaría blanda en pantallas grandes. */
  animation-duration: 40s;
}

@keyframes ph-panzoom-corto {
  from { transform: scale(1.02) translateY(0); }
  to   { transform: scale(1.12) translateY(-2%); }
}

.ph-hero--acuarela .ph-hero__bg { animation-name: ph-panzoom-corto; }

/* --- Sangrado completo ---
   El hero vive dentro de una columna de WPBakery (1200px), así que para
   llevarlo de borde a borde hay que sacarlo con márgenes negativos.
   Se usan las variables que el tema ya mide en runtime en vez de 100vw:
   100vw incluye el ancho de la barra de scroll y mete scroll horizontal.
   Si las variables no existen, el hero simplemente se queda en su columna. */
.ph-hero--full {
  margin-left: calc(-1 * var(--ens-frame-left, 0px));
  margin-right: calc(-1 * var(--ens-frame-right, 0px));
  width: auto;
}