/* ==========================================================================
   Agro Panasur — efectos (22-oct-2026). Ver efectos.php para apagarlos.
   Todo cuelga de una clase agp-fx-* en el body: sin ella, la web queda como antes.
   ========================================================================== */

/* ---------- 01 · portales que se abren al bajar ----------
   efectos.js pone --agp-ins (recorte), --agp-zoom (vídeo) y --agp-txt (texto) según el scroll. */
.agp-fx-portales.agp-fx-listo .agp-portal{
  clip-path:inset(var(--agp-ins,0%) calc(var(--agp-ins,0%) * .7) round calc(var(--agp-ins,0%) * 2.6));
  will-change:clip-path}
.agp-fx-portales.agp-fx-listo .agp-portal .elementor-background-video-container{
  transform:scale(var(--agp-zoom,1));transform-origin:50% 50%;will-change:transform}
.agp-fx-portales.agp-fx-listo .agp-portal > .e-con,
.agp-fx-portales.agp-fx-listo .agp-portal > .elementor-element{
  opacity:var(--agp-txt,1);transform:translateY(calc((1 - var(--agp-txt,1)) * 26px))}

/* ---------- 02 · aros que se dibujan ----------
   Los iconos de aro son PNG de la diseñadora: se revelan con un barrido circular en el sentido del aro. */
@property --agp-a{syntax:'<angle>';inherits:false;initial-value:360deg}
.agp-fx-aros.agp-fx-listo img.agp-aro{
  -webkit-mask-image:conic-gradient(from 0deg,transparent calc(360deg - var(--agp-a)),#000 0);
          mask-image:conic-gradient(from 0deg,transparent calc(360deg - var(--agp-a)),#000 0);
  --agp-a:0deg}
.agp-fx-aros.agp-fx-listo img.agp-aro.agp-dibujado{animation:agpAro 1.25s cubic-bezier(.65,0,.35,1) forwards;animation-delay:var(--agp-d,0s)}
@keyframes agpAro{0%{--agp-a:0deg;transform:scale(.94)}80%{transform:scale(1.02)}100%{--agp-a:360deg;transform:none}}

/* neón de la barra de familias de la tienda: late al pasar el ratón, con el color de cada familia */
.agp-fx-aros .agp-cat[data-cat="bioestimulantes"]{--agp-tono:#F2C230}
.agp-fx-aros .agp-cat[data-cat="correctores"]{--agp-tono:#5FD3D0}
.agp-fx-aros .agp-cat[data-cat="enraizamiento"]{--agp-tono:#E8735C}
.agp-fx-aros .agp-cat[data-cat="nutricion"]{--agp-tono:#A8D93C}
.agp-fx-aros .agp-cat[data-cat="proteccion"]{--agp-tono:#4FA8F5}
.agp-fx-aros .agp-cat[data-cat="desinfeccion"]{--agp-tono:#C77DF0}
.agp-fx-aros .agp-cat .agp-cat-fig{transition:opacity .25s,filter .25s,transform .35s cubic-bezier(.2,.8,.2,1)}
.agp-fx-aros .agp-cat:hover .agp-cat-fig,.agp-fx-aros .agp-cat.on .agp-cat-fig{animation:agpNeon 1.8s ease-in-out infinite}
.agp-fx-aros .agp-cat b{transition:color .3s}
.agp-fx-aros .agp-cat:hover b{color:var(--agp-tono,#fff)}
/* los PNG de neón traen el fondo negro: nada de drop-shadow (dibujaría un cuadrado), solo latido de brillo */
@keyframes agpNeon{0%,100%{filter:brightness(1.2) saturate(1.15);transform:scale(1)}50%{filter:brightness(1.7) saturate(1.4);transform:scale(1.045)}}

/* ---------- 03 · menú móvil a pantalla completa ---------- */
.agp-burger{display:none}
#agp-mmenu{display:none}
@media (max-width:1024px){
  .agp-fx-menu .agp-nav .agp-menu{display:none!important}
  .agp-fx-menu .agp-burger{display:block;position:relative;width:44px;height:44px;margin-left:auto;padding:0!important;border:0!important;
    background:transparent!important;cursor:pointer;z-index:2;box-shadow:none!important;border-radius:0!important}
  .agp-burger i{position:absolute;left:11px;width:22px;height:2px;border-radius:2px;background:var(--agp-navy);
    transition:transform .45s cubic-bezier(.7,0,.3,1),opacity .25s,top .45s cubic-bezier(.7,0,.3,1),width .45s,left .45s,background .3s}
  .agp-burger i:nth-child(1){top:15px}.agp-burger i:nth-child(2){top:21px;width:15px;left:18px}.agp-burger i:nth-child(3){top:27px}
  .agp-nav.agp-over:not(.agp-stuck) .agp-burger i{background:#fff;box-shadow:0 1px 8px rgba(18,23,42,.35)}
  .agp-menu-abierto .agp-burger i{background:#fff!important;box-shadow:none!important}
  .agp-menu-abierto .agp-burger i:nth-child(1){top:21px;transform:rotate(45deg)}
  .agp-menu-abierto .agp-burger i:nth-child(2){opacity:0;transform:translateX(10px)}
  .agp-menu-abierto .agp-burger i:nth-child(3){top:21px;transform:rotate(-45deg)}

  /* con el menú abierto la barra se funde con el azul */
  .agp-menu-abierto .agp-nav{background:transparent!important;border-bottom-color:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .agp-menu-abierto .agp-nav .agp-logo-navy{display:none!important}
  .agp-menu-abierto .agp-nav .agp-logo-blanco{display:block!important}

  .agp-fx-menu #agp-mmenu{display:flex;position:fixed;inset:0;z-index:999;flex-direction:column;padding:110px 26px max(28px,env(safe-area-inset-bottom));
    background:#001F52 url(../../../uploads/2026/10/agp-textura-plastico-navy.jpg) center/cover;overflow-y:auto;
    clip-path:circle(0 at var(--agp-cx,calc(100% - 46px)) var(--agp-cy,42px));visibility:hidden;
    transition:clip-path .7s cubic-bezier(.7,0,.2,1),visibility 0s .7s}
  .agp-menu-abierto #agp-mmenu{clip-path:circle(150% at var(--agp-cx,calc(100% - 46px)) var(--agp-cy,42px));visibility:visible;
    transition:clip-path .7s cubic-bezier(.7,0,.2,1),visibility 0s}
  #agp-mmenu nav a{display:flex;align-items:center;gap:16px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.1);
    color:#fff!important;text-decoration:none!important;opacity:0;transform:translateY(18px);transition:opacity .35s,transform .5s cubic-bezier(.2,.8,.2,1)}
  .agp-menu-abierto #agp-mmenu nav a{opacity:1;transform:none;transition-delay:calc(.25s + var(--i) * .06s)}
  #agp-mmenu nav span{flex:1;font:600 25px/1.2 'Poppins',sans-serif;letter-spacing:-.02em}
  #agp-mmenu nav a.on span{color:var(--agp-verde-l)}
  #agp-mmenu nav em{width:46px;height:46px;flex:none;border-radius:50%;background:#0d3a72 center/cover;border:2px solid rgba(255,255,255,.18)}
  #agp-mmenu nav em.sin{background:rgba(255,255,255,.08)}
  #agp-mmenu svg{width:18px;height:18px;fill:none;stroke:var(--agp-verde-l);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
  .agp-mmenu-abajo{margin-top:auto;padding-top:26px;opacity:0;transform:translateY(14px);transition:opacity .4s,transform .5s}
  .agp-menu-abierto .agp-mmenu-abajo{opacity:1;transform:none;transition-delay:.65s}
  .agp-mmenu-cta{display:flex;align-items:center;justify-content:center;gap:10px;padding:16px;border-radius:40px;background:var(--agp-verde);
    color:var(--agp-navy)!important;font:600 15px 'Poppins',sans-serif;text-decoration:none!important}
  .agp-mmenu-cta svg{stroke:var(--agp-navy)!important}
  .agp-mmenu-datos{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:16px}
  .agp-mmenu-datos a{color:rgba(255,255,255,.72)!important;font:400 13px 'Poppins',sans-serif;text-decoration:none!important}
  body.agp-menu-abierto{overflow:hidden}
  /* la cabecera vive dentro de #masthead (z-index 99 del tema): se sube para quedar sobre el menú */
  .agp-fx-menu #masthead{z-index:1000}
}

/* ---------- 04 · barra fija «Habla con un técnico» (solo móvil) ---------- */
.agp-barra{display:none}
@media (max-width:767px){
  .agp-fx-barra .agp-barra{display:grid;grid-template-columns:auto 1fr;gap:8px;position:fixed;z-index:150;left:12px;right:12px;
    bottom:max(12px,env(safe-area-inset-bottom));padding:7px;border-radius:40px;background:rgba(255,255,255,.94);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 10px 30px rgba(10,20,50,.2);
    transform:translateY(160%);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
  .agp-fx-barra .agp-barra.ver{transform:none}
  .agp-menu-abierto .agp-barra{transform:translateY(160%)!important}
  .agp-barra a{display:flex;align-items:center;justify-content:center;gap:8px;height:48px;border-radius:30px;text-decoration:none!important;
    font:600 14px 'Poppins',sans-serif}
  .agp-barra-tel{width:48px;background:var(--agp-navy);color:#fff!important}
  .agp-barra-tec{background:var(--agp-verde);color:var(--agp-navy)!important}
  .agp-barra svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
}

/* ---------- 05 · envases con relieve (tienda) ---------- */
@media (hover:hover) and (pointer:fine){
  .agp-fx-envases .agp-card-p-img{position:relative}
  .agp-fx-envases .agp-card-p-img::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
    background:radial-gradient(circle at var(--agp-mx,50%) var(--agp-my,30%),rgba(255,255,255,.55),transparent 45%)}
  .agp-fx-envases .agp-card-p:hover .agp-card-p-img::after{opacity:1}
  .agp-fx-envases .agp-card-p .agp-card-p-img img{
    transform:perspective(800px) translateY(var(--agp-ty,0px)) rotateY(var(--agp-ry,0deg)) rotateX(var(--agp-rx,0deg));
    backface-visibility:hidden;transition:transform .45s cubic-bezier(.2,.8,.2,1),filter .45s}
  .agp-fx-envases .agp-card-p:hover .agp-card-p-img img{--agp-ty:-10px;filter:drop-shadow(0 16px 14px rgba(31,36,56,.16))}
}

/* quien pide menos movimiento: sin animaciones ni recortes */
@media (prefers-reduced-motion:reduce){
  .agp-fx-listo .agp-portal{clip-path:none!important}
  .agp-fx-listo .agp-portal > *{opacity:1!important;transform:none!important}
  .agp-fx-listo img.agp-aro{-webkit-mask-image:none!important;mask-image:none!important;animation:none!important}
  .agp-cat .agp-cat-fig{animation:none!important}
  #agp-mmenu,#agp-mmenu *,.agp-burger i,.agp-barra{transition:none!important}
}