/* ============================================================
   GREENERY 420 · BANNER "Bienvenido al nuevo bienestar"
   Estilos del componente global [greenery_banner_bienestar].
   Vivían en greenery-storefront.css (home); se mueven aquí para que el
   shortcode sea autosuficiente en cualquier página. Los encola el propio
   shortcode (inc/shortcodes/greenery-banner-bienestar.php).
   Depende de tokens.css (variables --gy-*).
   ============================================================ */

/* ---- Formas (frase editorial con imagen al hover) ---- */
.gy-formas{transition:background var(--gy-dur-base) var(--gy-ease);overflow:visible;}
.gy-formas .gy-wrap{padding:130px var(--gy-pad-x,clamp(20px,4vw,48px)) 72px;}
.gy-formas h2{font-size:clamp(2rem,4vw,3rem);margin:12px 0 24px;}
.gy-formas .gy-phrase{font-family:var(--gy-font-display);font-size:clamp(1.4rem,1.1rem + 1.6vw,2rem);line-height:1.5;color:var(--gy-tinta);}
.gy-formas .cw{position:relative;display:inline-block;cursor:default;}
.gy-formas .cw i{font-style:italic;color:var(--gy-morado-oscuro);}
/* ITEM 11: foto de producto en hover SIN marco/fondo blanco. object-fit:contain sobre
   fondo transparente y sin padding; la profundidad la da un drop-shadow (no box-shadow,
   que dibujaría un rectángulo sobre el PNG transparente). */
/* max-width:none es OBLIGATORIO: el <img> vive dentro de un .cw estrecho (una palabra),
   así que cualquier max-width:100% heredado (.greenery-home img) lo encogería al ancho
   de la palabra. */
.gy-formas .cw img{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%) scale(.6);width:170px;height:170px;max-width:none;z-index:5;
  object-fit:contain;background:transparent;padding:0;border-radius:0;opacity:0;pointer-events:none;
  transition:all var(--gy-dur-base) var(--gy-ease);filter:drop-shadow(0 14px 22px rgba(40,38,34,.28));}
.gy-formas .cw:hover img{opacity:1;transform:translateX(-50%) scale(1);}

/* Fuera de la home no hay .greenery-home img{max-width:100%} ni box-sizing global:
   los fijamos aquí para que el banner se vea igual en cualquier plantilla. */
.gy-formas,.gy-formas *{box-sizing:border-box;}
.gy-formas .gy-wrap{max-width:var(--gy-wide);margin:0 auto;}

/* Móvil: el banner es una frase larga; menos aire vertical para no comerse el scroll. */
@media(max-width:768px){
  .gy-formas .gy-wrap{padding-top:64px;padding-bottom:48px;}
  .gy-formas .cw img{width:120px;height:120px;}
}