/* =============================================================
   immersive.css — "Grow room de noche"
   Hero por fases del cultivo, ticker, "monta tu grow" (scroll anclado)
   y cabeceras de categoría con foto y luz LED.
   El color de la fase (--ph) se anima porque está registrado con @property.
   ============================================================= */
@property --ph { syntax: '<color>'; inherits: true; initial-value: #FF5FD2; }

:root {
  --gr-night: #060A07;
  --gr-ink:   #0C130E;
  --gr-text:  #EAF2EC;
  --gr-muted: #B4C3B9;
  --gr-line:  rgba(255,255,255,.14);
  --gr-ease:  cubic-bezier(.22,.8,.24,1);
}

/* ── Piezas comunes ─────────────────────────────────────────── */
.gr-kicker { display:inline-flex; align-items:center; gap:.6rem; margin:0 0 1.1rem; font-family:var(--font-mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(234,242,236,.82); }
.gr-kicker__dot { width:8px; height:8px; border-radius:50%; background:var(--ph,#5BF08F); box-shadow:0 0 0 4px color-mix(in srgb, var(--ph,#5BF08F) 22%, transparent), 0 0 18px var(--ph,#5BF08F); animation:grPulse 2.4s ease-in-out infinite; }
@keyframes grPulse { 50% { box-shadow:0 0 0 8px color-mix(in srgb, var(--ph,#5BF08F) 0%, transparent), 0 0 26px var(--ph,#5BF08F); } }

.gr-btn { display:inline-flex; align-items:center; justify-content:center; gap:.55rem; min-height:54px; padding:.95rem 1.6rem; border-radius:999px; font-family:var(--font-display); font-weight:700; font-size:1.02rem; letter-spacing:-.01em; text-decoration:none; transition:transform .25s var(--gr-ease), box-shadow .25s, background .25s; }
.gr-btn:hover { transform:translateY(-2px); }
.gr-btn:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.gr-btn--glow { background:var(--ph); color:#06100A; box-shadow:0 0 0 1px color-mix(in srgb, var(--ph) 70%, #fff), 0 14px 44px -10px var(--ph), inset 0 1px 0 rgba(255,255,255,.5); }
.gr-btn--glow:hover { box-shadow:0 0 0 1px #fff, 0 18px 60px -8px var(--ph), inset 0 1px 0 rgba(255,255,255,.6); }
.gr-btn--glass { background:rgba(255,255,255,.07); color:#fff; border:1px solid rgba(255,255,255,.26); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.gr-btn--glass:hover { background:rgba(255,255,255,.14); }

/* ── HERO ───────────────────────────────────────────────────── */
.gr-hero { position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; justify-content:center;
  min-height:max(680px, calc(100svh - 158px)); padding:clamp(3.5rem,7vh,5.5rem) 0 1.4rem;
  background:var(--gr-night); color:var(--gr-text); transition:--ph 1.1s ease; }
.gr-hero__stage { position:absolute; inset:0; z-index:-1; }
/* Fotos de fase: la activa se abre en círculo desde la lámpara sobre la anterior. */
.gr-hero__bg { position:absolute; inset:0; z-index:0; visibility:hidden; clip-path:circle(0% at 64% 0%); }
.gr-hero__bg.is-prev { visibility:visible; z-index:1; clip-path:circle(160% at 64% 0%); }
.gr-hero__bg.is-on { visibility:visible; z-index:2; clip-path:circle(160% at 64% 0%); transition:clip-path 1.5s cubic-bezier(.65,0,.2,1); }
.gr-hero__bg picture { position:absolute; inset:-4% -4% -10%; max-width:none; animation:grKen 24s ease-in-out infinite alternate; }
.gr-hero__bg img { width:100%; height:100%; max-width:none; object-fit:cover; transform:translate3d(0, calc(var(--sp,0) * 90px), 0) scale(calc(1.04 + var(--sp,0) * .08)); }
@keyframes grKen { from { transform:scale(1) translate3d(0,0,0); } to { transform:scale(1.08) translate3d(-1.2%, -1%, 0); } }
/* entrada: la foto llega desenfocada y oscura y "se enciende" con el LED */
.js .gr-hero:not(.is-ready) .gr-hero__bg.is-on img { filter:blur(14px) brightness(.35); transform:scale(1.14); }
.gr-hero.is-ready .gr-hero__bg.is-on img { transition:filter 1.6s ease .45s, transform 2.2s cubic-bezier(.2,.7,.2,1) .3s; }
/* lectura: oscurece el lado del texto y la base */
.gr-hero__stage::after { content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(6,10,7,.9) 0%, rgba(6,10,7,.62) 34%, rgba(6,10,7,.12) 64%, rgba(6,10,7,.3) 100%),
    linear-gradient(0deg, rgba(6,10,7,.96) 0%, rgba(6,10,7,0) 38%),
    linear-gradient(180deg, rgba(6,10,7,.7) 0%, rgba(6,10,7,0) 22%); }
/* cono de luz desde la barra LED */
.gr-hero__beam { position:absolute; inset:0; z-index:4; pointer-events:none; mix-blend-mode:screen; opacity:0; transition:opacity 1.2s ease .75s;
  background:radial-gradient(ellipse 38% 85% at 64% -6%, color-mix(in srgb, var(--ph) 42%, transparent) 0%, color-mix(in srgb, var(--ph) 10%, transparent) 55%, transparent 78%); }
.gr-hero.is-ready .gr-hero__beam { opacity:.75; }
/* rayos de luz: abanico cónico que respira despacio */
.gr-hero__rays { position:absolute; z-index:4; pointer-events:none; left:64%; top:-4%; width:150vmax; height:150vmax; transform:translateX(-50%); transform-origin:50% 0;
  background:repeating-conic-gradient(from 160deg at 50% 0%, transparent 0deg, color-mix(in srgb, var(--ph) 16%, transparent) 1.2deg, transparent 3deg, transparent 6deg);
  -webkit-mask-image:radial-gradient(ellipse 30% 45% at 50% 0%, #000 0%, transparent 100%); mask-image:radial-gradient(ellipse 30% 45% at 50% 0%, #000 0%, transparent 100%);
  mix-blend-mode:screen; opacity:0; transition:opacity 1.6s ease 1s; animation:grRays 14s ease-in-out infinite alternate; }
.gr-hero.is-ready .gr-hero__rays { opacity:.7; }
@keyframes grRays { from { transform:translateX(-50%) rotate(-3deg); } to { transform:translateX(-50%) rotate(3deg); } }
.gr-hero__dust { position:absolute; inset:0; z-index:5; pointer-events:none; opacity:0; transition:opacity 2s ease 1.2s; }
.gr-hero.is-ready .gr-hero__dust { opacity:1; }
/* barra LED: se enciende (de centro a extremos, con parpadeo) y parpadea al cambiar de fase */
.gr-hero__led { position:absolute; z-index:6; top:18px; left:46%; width:36%; height:10px; border-radius:6px; background:#141917; border:1px solid rgba(255,255,255,.12); box-shadow:0 6px 18px rgba(0,0,0,.6); }
.gr-hero__led::before, .gr-hero__led::after { content:""; position:absolute; bottom:100%; width:1px; height:40px; background:rgba(255,255,255,.18); }
.gr-hero__led::before { left:12%; } .gr-hero__led::after { right:12%; }
.gr-hero__led span { position:absolute; inset:2px 6px; border-radius:3px; background:repeating-linear-gradient(90deg, #fff 0 3px, var(--ph) 3px 9px, transparent 9px 13px);
  box-shadow:0 0 14px 2px var(--ph), 0 0 70px 18px color-mix(in srgb, var(--ph) 45%, transparent); }
.js .gr-hero:not(.is-ready) .gr-hero__led span { transform:scaleX(0); opacity:0; }
.gr-hero.is-ready .gr-hero__led span { animation:grPowerOn .9s cubic-bezier(.2,.8,.2,1) .15s forwards, grFlick 7s steps(1) 2s infinite; }
.gr-hero.is-ready .gr-hero__led.is-switch span { animation:grSwitch .55s steps(1) forwards; transform:scaleX(1); opacity:1; }
@keyframes grPowerOn { 0% { transform:scaleX(0); opacity:0; } 40% { transform:scaleX(1); opacity:.4; } 50% { opacity:1; } 58% { opacity:.2; } 66% { opacity:1; } 74% { opacity:.5; } 100% { transform:scaleX(1); opacity:1; } }
@keyframes grSwitch { 0% { opacity:1; } 20% { opacity:.15; } 35% { opacity:1; } 50% { opacity:.3; } 100% { opacity:1; } }
@keyframes grFlick { 0%,100% { transform:scaleX(1); opacity:1; } 42% { transform:scaleX(1); opacity:.86; } 43% { transform:scaleX(1); opacity:1; } }
.gr-hero__grain { position:absolute; inset:0; z-index:6; pointer-events:none; opacity:.09; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* contenido: al bajar, sube y se desvanece antes que la foto (parallax ligado al scroll) */
.gr-hero__grid { position:relative; z-index:3; display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:clamp(2rem,5vw,5rem); align-items:center;
  transform:translate3d(0, calc(var(--sp,0) * -70px), 0); opacity:calc(1 - var(--sp,0) * 1.2); }
.gr-hero__title { margin:0 0 1.2rem; font-family:var(--font-display); font-weight:800; font-size:clamp(2.5rem,5vw,4.7rem); line-height:1; letter-spacing:-.045em; color:#fff; text-wrap:balance; max-width:13ch; }
.gr-hero__title em { font-style:normal; }
/* degradado del acento: sobre el em si no se trocea; palabra a palabra cuando el JS lo trocea */
.gr-hero__title em, .gr-hero__title em .gr-w > span { color:transparent; -webkit-background-clip:text; background-clip:text;
  background-image:linear-gradient(100deg, #fff 0%, color-mix(in srgb, var(--ph) 70%, #fff) 45%, var(--ph) 100%); }
.gr-hero__title em:has(.gr-w) { background-image:none; color:#fff; }
.gr-w { display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.1em; margin-bottom:-.1em; }
.gr-w > span { display:inline-block; transform:translateY(108%); }
.gr-hero.is-ready .gr-w > span { transform:none; transition:transform 1s cubic-bezier(.2,.85,.2,1) calc(.55s + var(--wi,0) * 70ms); }
/* resto del copy y del panel: entran escalonados */
.js .gr-hero .gr-kicker, .js .gr-hero .gr-hero__facts li, .js .gr-hud, .js .gr-phases__tab { opacity:0; }
.gr-hero.is-ready .gr-kicker { animation:grUp .8s var(--gr-ease) .35s both; }
.gr-hero__phasecopy.is-on { animation:grUp .7s var(--gr-ease) both; }
.js .gr-hero:not(.is-ready) .gr-hero__phasecopy.is-on { opacity:0; animation:none; }
.gr-hero.is-ready:not(.is-live) .gr-hero__phasecopy[data-phase="0"].is-on { animation-delay:1.05s; }
.gr-hero.is-ready .gr-hero__facts li { animation:grUp .7s var(--gr-ease) both; animation-delay:calc(1.25s + var(--fi,0) * 90ms); }
.gr-hero.is-ready .gr-hud { animation:grHud 1.1s cubic-bezier(.2,.8,.2,1) .8s both; }
.gr-hero.is-ready .gr-phases__tab { animation:grUp .7s var(--gr-ease) both; animation-delay:calc(1.35s + var(--ti,0) * 90ms); }
@keyframes grHud { from { opacity:0; transform:translate3d(40px, 10px, 0) scale(.97); filter:blur(10px); } to { opacity:1; transform:none; filter:none; } }
@keyframes grUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
.gr-hero__lead { margin:0 0 1.8rem; max-width:50ch; font-size:clamp(1.05rem,1.35vw,1.22rem); line-height:1.6; color:#CFDCD3; }
.gr-hero__cta { display:flex; flex-wrap:wrap; gap:.8rem; }
.gr-hero__facts { display:flex; flex-wrap:wrap; gap:0; margin:1.8rem 0 0; padding:0; list-style:none; }
.gr-hero__facts li { display:flex; flex-direction:column; padding:0 1.4rem; border-left:1px solid var(--gr-line); }
.gr-hero__facts li:first-child { padding-left:0; border-left:0; }
.gr-hero__facts strong { font-family:var(--font-display); font-size:1.15rem; color:#fff; letter-spacing:-.01em; }
.gr-hero__facts span { font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gr-muted); }

/* panel de datos (HUD) */
.gr-hud { position:relative; padding:1.2rem 1.25rem 1rem; border-radius:24px; color:var(--gr-text);
  background:linear-gradient(160deg, rgba(16,26,20,.74), rgba(6,10,7,.62));
  border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(18px) saturate(1.25); -webkit-backdrop-filter:blur(18px) saturate(1.25);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.09), 0 0 0 1px color-mix(in srgb, var(--ph) 22%, transparent), 0 0 80px -30px var(--ph);
  transition:box-shadow 1s ease; }
.gr-hud::before, .gr-hud::after { content:""; position:absolute; width:22px; height:22px; border:2px solid var(--ph); pointer-events:none; }
.gr-hud::before { top:-1px; left:-1px; border-right:0; border-bottom:0; border-top-left-radius:24px; }
.gr-hud::after { right:-1px; bottom:-1px; border-left:0; border-top:0; border-bottom-right-radius:24px; }
.gr-hud__bar { display:flex; justify-content:space-between; gap:1rem; padding-bottom:.8rem; margin-bottom:1rem; border-bottom:1px dashed rgba(255,255,255,.16); font-family:var(--font-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(234,242,236,.66); }
.gr-hud__bar b { color:var(--ph); font-weight:500; }
.gr-hud__panel.is-on { animation:grUp .6s var(--gr-ease) both; }
.gr-hud__head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.gr-hud__name { font-family:var(--font-display); font-size:clamp(1.6rem,2.4vw,2.1rem); font-weight:800; letter-spacing:-.03em; color:#fff; }
.gr-hud__days { font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ph); white-space:nowrap; }
.gr-hud__read { display:grid; grid-template-columns:1fr 1fr; gap:.9rem 1.2rem; margin:0 0 1.1rem; }
.gr-hud__read div { min-width:0; }
.gr-hud__read dt { font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gr-muted); }
.gr-hud__read dd { margin:.1rem 0 .4rem; font-family:var(--font-display); font-size:1.15rem; font-weight:700; color:#fff; }
.gr-meter { display:block; height:4px; border-radius:4px; background:rgba(255,255,255,.1); overflow:hidden; }
.gr-meter i { display:block; height:100%; width:var(--v); border-radius:inherit; background:linear-gradient(90deg, color-mix(in srgb, var(--ph) 35%, transparent), var(--ph)); box-shadow:0 0 12px var(--ph); transform-origin:left; animation:grBar 1.1s var(--gr-ease) both; }
@keyframes grBar { from { transform:scaleX(0); } }
.gr-hud__prods { display:grid; gap:.35rem; margin:0; padding:.9rem 0 0; list-style:none; border-top:1px solid rgba(255,255,255,.1); }
.gr-hud__prods a { display:grid; grid-template-columns:52px minmax(0,1fr); gap:.8rem; align-items:center; padding:.4rem; border-radius:14px; color:#fff; text-decoration:none; transition:background .2s, transform .2s; }
.gr-hud__prods a:hover, .gr-hud__prods a:focus-visible { background:rgba(255,255,255,.07); transform:translateX(3px); }
.gr-hud__img { width:52px; height:52px; border-radius:12px; background:#fff; display:grid; place-items:center; overflow:hidden; }
.gr-hud__img img { width:46px; height:46px; object-fit:contain; }
.gr-hud__pt { display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.gr-hud__pt small { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gr-muted); }
.gr-hud__pt b { font-size:.92rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gr-hud__pt em { font-style:normal; font-weight:700; font-size:.88rem; color:var(--ph); }

/* selector de fases */
.gr-phases { position:relative; z-index:3; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(.6rem,2vw,1.6rem); margin-top:clamp(1.8rem,4.5vh,3rem); }
.gr-phases__tab { position:relative; display:flex; align-items:baseline; gap:.75rem; padding:1rem 0 .2rem; border:0; border-top:1px solid rgba(255,255,255,.2); background:none; color:rgba(234,242,236,.6); font:inherit; text-align:left; cursor:pointer; transition:color .3s; }
.gr-phases__tab:hover { color:#fff; }
.gr-phases__tab:focus-visible { outline:2px solid var(--c); outline-offset:4px; border-radius:4px; }
.gr-phases__n { font-family:var(--font-mono); font-size:.78rem; transition:color .3s; }
.gr-phases__t { display:flex; flex-direction:column; font-family:var(--font-display); font-weight:700; font-size:1.12rem; letter-spacing:-.01em; line-height:1.2; }
.gr-phases__t small { font-family:var(--font-mono); font-weight:500; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; opacity:.75; margin-top:.2rem; }
.gr-phases__p { position:absolute; left:0; right:0; top:-1px; height:2px; overflow:hidden; }
.gr-phases__p i { display:block; height:100%; width:100%; background:var(--c); box-shadow:0 0 12px var(--c); transform:scaleX(0); transform-origin:left; }
.gr-phases__tab.is-on { color:#fff; }
.gr-phases__tab.is-on .gr-phases__n { color:var(--c); }
.gr-phases__tab.is-on .gr-phases__p i { animation:grProg 9s linear forwards; }
.gr-hero.is-paused .gr-phases__tab.is-on .gr-phases__p i { animation-play-state:paused; }
@keyframes grProg { to { transform:scaleX(1); } }

/* ticker */
.gr-ticker { overflow:hidden; background:var(--gr-night); border-block:1px solid rgba(255,255,255,.08); padding:1rem 0; }
.gr-ticker__track { display:flex; width:max-content; animation:grMarquee 46s linear infinite; }
.gr-ticker span { transform:skewX(var(--skew,0deg)); transition:transform .4s ease; }
.gr-ticker span { display:inline-flex; align-items:center; gap:2rem; padding-right:2rem; font-family:var(--font-display); font-weight:800; font-size:clamp(1.3rem,2.4vw,2rem); letter-spacing:-.02em; text-transform:uppercase; color:transparent; -webkit-text-stroke:1px rgba(234,242,236,.42); white-space:nowrap; }
.gr-ticker span::after { content:""; width:10px; height:10px; border-radius:50%; background:#5BF08F; box-shadow:0 0 14px #5BF08F; }
.gr-ticker span:nth-child(3n+2)::after { background:#FF5FD2; box-shadow:0 0 14px #FF5FD2; }
.gr-ticker span:nth-child(3n)::after { background:#FFB547; box-shadow:0 0 14px #FFB547; }
@keyframes grMarquee { to { transform:translateX(-50%); } }

/* ── MONTA TU GROW (scroll anclado) ─────────────────────────── */
[data-l="tent"] { --lc:#D5E0DA; } [data-l="led"] { --lc:#FF7BE0; } [data-l="air"] { --lc:#7CD4FF; }
[data-l="pot"]  { --lc:#E2A66B; } [data-l="feed"] { --lc:#FFB547; } [data-l="seed"] { --lc:#5BF08F; }
.gr-build { position:relative; color:var(--gr-text); padding:clamp(4rem,9vw,7.5rem) 0 clamp(3rem,6vw,5rem);
  background:radial-gradient(900px 600px at 18% 8%, #12201a 0%, transparent 70%), radial-gradient(700px 500px at 90% 90%, #1a1022 0%, transparent 70%), var(--gr-night); }
.gr-build__grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,6vw,6rem); }
.gr-build__stage { position:sticky; top:calc(var(--gh-h, 110px) + 1.5rem); height:min(76vh, 680px); display:grid; place-items:center; }
.gr-build__intro h2 { margin:0 0 1rem; font-family:var(--font-display); font-weight:800; font-size:clamp(2.2rem,4.4vw,3.8rem); line-height:1; letter-spacing:-.04em; color:#fff; }
.gr-build__intro p { color:var(--gr-muted); max-width:46ch; font-size:1.1rem; }
.gr-build__intro { padding-bottom:4rem; }
.gr-step { min-height:64vh; display:flex; flex-direction:column; justify-content:center; opacity:.28; transform:translateY(16px); transition:opacity .6s var(--gr-ease), transform .6s var(--gr-ease); }
.gr-step.is-on { opacity:1; transform:none; }
.gr-step__n { font-family:var(--font-display); font-weight:800; font-size:clamp(3.5rem,7vw,6rem); line-height:.9; letter-spacing:-.05em; color:transparent; -webkit-text-stroke:1.5px var(--lc); opacity:.9; }
.gr-step__k { margin:.6rem 0 .3rem; font-family:var(--font-mono); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--lc); }
.gr-step h3 { margin:0 0 .8rem; font-family:var(--font-display); font-weight:800; font-size:clamp(1.8rem,3.2vw,2.7rem); line-height:1.05; letter-spacing:-.035em; color:#fff; }
.gr-step p { margin:0 0 1.4rem; max-width:44ch; color:#C3D1C8; font-size:1.08rem; }
.gr-step__go { align-self:flex-start; display:inline-flex; gap:.45rem; align-items:center; padding:.7rem 1.2rem; border-radius:999px; border:1px solid color-mix(in srgb, var(--lc) 55%, transparent); color:#fff; text-decoration:none; font-weight:600; transition:background .25s, box-shadow .25s; }
.gr-step__go b { color:var(--lc); font-family:var(--font-display); }
.gr-step__go:hover, .gr-step__go:focus-visible { background:color-mix(in srgb, var(--lc) 16%, transparent); box-shadow:0 0 30px -6px var(--lc); }

/* el armario dibujado */
.gr-tent { position:relative; width:min(100%, 430px); aspect-ratio:3/4; max-height:100%; }
.gr-tent [data-l] { opacity:.1; filter:grayscale(1); transition:opacity .8s var(--gr-ease), filter .8s, transform 1.1s var(--gr-ease), box-shadow .8s; }
.gr-tent .is-lit { opacity:1; filter:none; }
.gr-tent__frame { position:absolute; inset:4% 6% 3%; border-radius:12px; border:3px solid #48544e;
  background:repeating-linear-gradient(112deg, rgba(255,255,255,.05) 0 2px, transparent 2px 10px),
             linear-gradient(90deg, #1b2320 0%, #3a4540 18%, #1a201d 50%, #3a4540 82%, #1b2320 100%);
  box-shadow:inset 0 0 60px rgba(0,0,0,.7), 0 30px 80px -20px rgba(0,0,0,.8); }
.gr-tent__frame.is-lit { opacity:.95; }
.gr-tent__led { position:absolute; top:12%; left:20%; right:20%; height:20px; border-radius:5px; background:#141816; border:1px solid #59645e; z-index:3; }
.gr-tent__led::before, .gr-tent__led::after { content:""; position:absolute; bottom:100%; width:1px; height:34px; background:#59645e; }
.gr-tent__led::before { left:10%; } .gr-tent__led::after { right:10%; }
.gr-tent__led i { position:absolute; inset:4px 6px; border-radius:3px; background:repeating-linear-gradient(90deg, #fff 0 3px, #FF5FD2 3px 8px, #ff3b5c 8px 11px, transparent 11px 14px); }
.gr-tent__led.is-lit i { box-shadow:0 0 16px 3px #FF7BE0, 0 0 70px 16px rgba(255,95,210,.45); }
.gr-tent__cone { position:absolute; top:13%; left:9%; right:9%; bottom:5%; z-index:1; clip-path:polygon(28% 0, 72% 0, 100% 100%, 0 100%);
  background:linear-gradient(180deg, rgba(255,110,220,.42) 0%, rgba(255,110,220,.08) 70%, transparent 100%); mix-blend-mode:screen; }
.gr-tent__fan { position:absolute; top:22%; right:12%; width:20%; aspect-ratio:1; border-radius:50%; z-index:3; border:3px solid #6a7671; background:radial-gradient(circle, #59645e 0 16%, #161b19 17%); }
.gr-tent__fan i { position:absolute; inset:10%; border-radius:50%; background:conic-gradient(#9aa6a0 0 26deg, transparent 26deg 120deg, #9aa6a0 120deg 146deg, transparent 146deg 240deg, #9aa6a0 240deg 266deg, transparent 266deg); }
.gr-tent__fan.is-lit { box-shadow:0 0 30px -4px #7CD4FF; }
.gr-tent__fan.is-lit i { animation:grSpin .9s linear infinite; }
@keyframes grSpin { to { transform:rotate(360deg); } }
.gr-tent__duct { position:absolute; top:0; right:18%; width:8%; height:23%; z-index:2; border-radius:6px; background:repeating-linear-gradient(0deg, #8a958f 0 3px, #56615b 3px 7px); }
.gr-tent__pot { position:absolute; bottom:6%; left:50%; width:34%; height:15%; z-index:4; transform:translateX(-50%); clip-path:polygon(0 0, 100% 0, 88% 100%, 12% 100%);
  background:linear-gradient(180deg, #4a3322 0 12%, #121212 12%), linear-gradient(90deg, #111 0%, #2c2c2c 40%, #111 100%); }
.gr-tent__pot.is-lit { box-shadow:0 0 40px -6px #E2A66B; }
.gr-tent__plant { position:absolute; bottom:20%; left:50%; width:60%; z-index:3; color:#3FCB6A; transform:translateX(-50%) scale(.18); transform-origin:50% 100%; }
.gr-tent__plant svg { width:100%; height:auto; overflow:visible; }
.gr-tent__plant.is-lit { transform:translateX(-50%) scale(1); filter:drop-shadow(0 0 24px rgba(91,240,143,.45)); }
.gr-tent__bottles { position:absolute; bottom:6%; left:13%; z-index:4; display:flex; align-items:flex-end; gap:5px; }
.gr-tent__bottles i { width:16px; border-radius:5px 5px 3px 3px; background:#3E9A52; }
.gr-tent__bottles i:nth-child(1) { height:44px; } .gr-tent__bottles i:nth-child(2) { height:58px; background:#E3A33B; } .gr-tent__bottles i:nth-child(3) { height:36px; background:#C0563C; }
.gr-tent__bottles.is-lit { filter:drop-shadow(0 0 14px rgba(255,181,71,.55)); }
.gr-tent__hud { position:absolute; left:0; right:0; bottom:-3.4rem; text-align:center; }
.gr-tent__hud b { display:none; padding:.45rem 1rem; border-radius:999px; border:1px solid var(--lc); color:var(--lc); font-family:var(--font-mono); font-weight:500; font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; background:rgba(6,10,7,.7); box-shadow:0 0 30px -8px var(--lc); }
.gr-tent__hud b.is-cur { display:inline-block; animation:grUp .5s var(--gr-ease) both; }
.gr-tent .is-cur:not(b) { opacity:1; filter:none; }

/* ── CABECERAS DE CATEGORÍA ─────────────────────────────────── */
.cat-hero__photo { position:absolute; inset:0; z-index:0; pointer-events:none; }
.cat-hero__photo picture, .cat-hero__photo img { width:100%; height:100%; max-width:none; object-fit:cover; }
.cat-hero__photo img { opacity:.78; transform:scale(1.06); animation:grKen 26s ease-in-out infinite alternate; }
.cat-hero__photo::after { content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(6,10,7,.95) 0%, rgba(6,10,7,.78) 38%, rgba(6,10,7,.3) 70%, rgba(6,10,7,.5) 100%), linear-gradient(0deg, rgba(6,10,7,.85), transparent 40%); }
.cat-hero--photo { background:var(--gr-night); }
.cat-hero--photo::before { z-index:0; background:radial-gradient(circle, color-mix(in srgb, var(--cc, #5BF08F) 34%, transparent), transparent 66%); mix-blend-mode:screen; }
.cat-hero__led { position:absolute; z-index:1; top:14px; right:14%; width:30%; height:8px; border-radius:5px; background:repeating-linear-gradient(90deg, #fff 0 3px, var(--cc,#5BF08F) 3px 9px, transparent 9px 13px); box-shadow:0 0 14px 2px var(--cc,#5BF08F), 0 0 80px 20px color-mix(in srgb, var(--cc,#5BF08F) 35%, transparent); }
.cat-hero--photo .cat-hero__text .eyebrow { color:var(--cc, #5BF08F); }

/* ── Tienda y cierre ─────────────────────────────────────────── */
.gr-store { position:relative; isolation:isolate; overflow:hidden; padding:clamp(4rem,9vw,7rem) 0; background:var(--gr-night); color:var(--gr-text); }
.gr-store__bg { position:absolute; inset:0; z-index:-1; }
.gr-store__bg picture, .gr-store__bg img { width:100%; height:100%; max-width:none; object-fit:cover; }
.gr-store__bg img { opacity:.32; filter:saturate(.6) contrast(1.1); }
.gr-store__bg::after { content:""; position:absolute; inset:0; background:radial-gradient(700px 420px at 85% 10%, rgba(91,240,143,.18), transparent 70%), linear-gradient(90deg, rgba(6,10,7,.95) 0%, rgba(6,10,7,.7) 55%, rgba(6,10,7,.85) 100%); }
.gr-store__grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,5vw,5rem); align-items:center; }
.gr-store h2 { margin:0 0 1rem; font-family:var(--font-display); font-weight:800; font-size:clamp(2.1rem,4vw,3.4rem); line-height:1.02; letter-spacing:-.04em; color:#fff; }
.gr-store__copy > p { color:#C3D1C8; font-size:1.1rem; max-width:48ch; }
.gr-store__facts { margin:1.6rem 0 0; }
.gr-store__data { display:grid; gap:.9rem; margin:1.6rem 0 2rem; padding:1.1rem 1.2rem; border:1px solid var(--gr-line); border-radius:18px; background:rgba(255,255,255,.04); }
.gr-store__data dt { font-family:var(--font-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:#5BF08F; }
.gr-store__data dd { margin:.15rem 0 0; color:#fff; font-weight:600; }
.gr-store__mosaic { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.gr-store__mosaic picture:last-child { grid-column:1 / -1; }
.gr-store__mosaic img { width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; border-radius:18px; border:1px solid rgba(255,255,255,.12); box-shadow:0 30px 60px -30px rgba(0,0,0,.8); transition:transform .5s var(--gr-ease); }
.gr-store__mosaic picture:last-child img { aspect-ratio:16/7; }
.gr-store__mosaic img:hover { transform:scale(1.02); }
.gr-final { position:relative; overflow:hidden; background:radial-gradient(600px 300px at 15% 0%, rgba(91,240,143,.22), transparent 70%), radial-gradient(500px 300px at 95% 100%, rgba(255,95,210,.16), transparent 70%), #0A110C; border-top:1px solid rgba(255,255,255,.08); }
.gr-final h2 { font-family:var(--font-display); font-weight:800; letter-spacing:-.03em; }
.gr-final p { color:#C3D1C8; }

/* ── Cabecera oscura (grow room) ────────────────────────────── */
.gh { background:rgba(6,10,7,.9); border-bottom-color:rgba(255,255,255,.08); }
.gh.is-scrolled { box-shadow:0 10px 30px rgba(0,0,0,.45); }
.gh__logo .logo { color:#fff; --logo-leaf:#5BF08F; --logo-accent:#FFB547; }
.gh__burger, .gh__cart, .gh__search { color:#EAF2EC; }
.gh__burger:hover, .gh__search:hover { background:rgba(255,255,255,.08); }
@media (min-width: 1024px) {
  .gh__search { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:#B4C3B9; }
  .gh__search:hover { background:rgba(255,255,255,.1); border-color:#5BF08F; }
  .gh__kbd { background:transparent; border-color:rgba(255,255,255,.2); color:#B4C3B9; }
  .gh__cart { background:#5BF08F; color:#06100A; box-shadow:0 0 30px -8px #5BF08F; }
  .gh__cart:hover { background:#7DF5A8; }
  .gh__cart .header-cart__count { background:#06100A; color:#5BF08F; }
  .gh__nav { border-top-color:rgba(255,255,255,.08); }
  .gfam__link, .gfam__plain { color:#EAF2EC; }
  .gfam__link .ico { color:rgba(234,242,236,.5); }
  .gfam__link:hover, .gfam__plain:hover, .gfam.is-open .gfam__link { color:#5BF08F; border-bottom-color:#5BF08F; }
  .gfam.is-open .gfam__link .ico { color:#5BF08F; }
}

/* grupos del mega-menú */
.mega__list .mega__grp { grid-column:1 / -1; margin:14px 12px 2px; padding-bottom:6px; border-bottom:1px solid var(--c-border); font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--c-primary-d); }
.mega__list .mega__grp:first-child { margin-top:0; }
.mnav__grp { padding:14px 16px 4px; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--c-primary-d); }


/* ── Revelados escalonados (los activa immersive.js) ───────── */
.gr-rv { opacity:0; transform:translate3d(0, 28px, 0); transition:opacity .9s var(--gr-ease), transform .9s var(--gr-ease); transition-delay:calc(var(--rv-i,0) * 80ms); }
.gr-rv.is-in { opacity:1; transform:none; }
.catalog-card.gr-rv, .authority-card.gr-rv, .post-card.gr-rv { transform:translate3d(0, 34px, 0) scale(.98); }
.catalog-card.gr-rv.is-in, .authority-card.gr-rv.is-in, .post-card.gr-rv.is-in { transform:none; }
/* tras revelarse, el hover vuelve a mandar (sin retraso) */
.catalog-card.is-in, .authority-card.is-in, .post-card.is-in { transition-delay:0s; }

/* ── Tarjetas: elevación, brillo de borde y zoom de foto ────── */
.catalog-card { transition:transform .45s var(--gr-ease), box-shadow .45s var(--gr-ease), border-color .45s; }
.catalog-card:hover { transform:translateY(-6px); box-shadow:0 28px 60px -24px rgba(6,40,18,.35), 0 0 0 1px rgba(91,240,143,.55); border-color:transparent; }
.catalog-card__visual img { transition:transform .8s var(--gr-ease); }
.catalog-card:hover .catalog-card__visual img { transform:scale(1.07); }
.authority-card { transition:transform .45s var(--gr-ease), box-shadow .45s var(--gr-ease); }
.authority-card:hover { transform:translateY(-6px); box-shadow:0 30px 60px -28px rgba(6,40,18,.4); }

/* ── Armario: el extractor "sopla" cuando está encendido ───── */
.gr-tent__fan::after { content:""; position:absolute; right:110%; top:50%; width:90%; height:2px; border-radius:2px; opacity:0;
  background:linear-gradient(90deg, transparent, rgba(124,212,255,.8)); box-shadow:0 -10px 0 rgba(124,212,255,.5), 0 10px 0 rgba(124,212,255,.5); }
.gr-tent__fan.is-lit::after { animation:grAir 1.4s linear infinite; }
@keyframes grAir { 0% { opacity:0; transform:translateX(30%); } 30% { opacity:1; } 100% { opacity:0; transform:translateX(-60%); } }
.gr-tent__led.is-cur i { animation:grSwitch .7s steps(1) 1; }

/* ── Guías (blog) en orden de cultivo ──────────────────────── */
.gr-guides { position:relative; padding:clamp(4rem,8vw,6.5rem) 0; color:var(--gr-text);
  background:radial-gradient(800px 400px at 85% 0%, rgba(255,95,210,.12), transparent 70%), radial-gradient(700px 400px at 0% 100%, rgba(91,240,143,.1), transparent 70%), var(--gr-night); }
.gr-guides__head { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; margin-bottom:2.4rem; }
.gr-guides__head h2 { margin:0 0 .6rem; font-family:var(--font-display); font-weight:800; font-size:clamp(2rem,3.8vw,3.2rem); line-height:1.02; letter-spacing:-.04em; color:#fff; }
.gr-guides__head p { margin:0; color:var(--gr-muted); max-width:52ch; }
.gr-guides__grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1rem; }
.gr-guide { position:relative; display:flex; flex-direction:column; min-height:420px; border-radius:22px; overflow:hidden; text-decoration:none; color:#fff; isolation:isolate;
  border:1px solid rgba(255,255,255,.1); background:#0c130e; transition:transform .5s var(--gr-ease), border-color .5s, box-shadow .5s; }
.gr-guide__media { position:absolute; inset:0; z-index:-1; }
.gr-guide__media picture, .gr-guide__media img { width:100%; height:100%; max-width:none; object-fit:cover; }
.gr-guide__media img { transform:scale(1.04); transition:transform 1.2s var(--gr-ease), filter .6s; filter:saturate(.85) brightness(.75); }
.gr-guide__media::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,10,7,.1) 0%, rgba(6,10,7,.55) 45%, rgba(6,10,7,.96) 100%); }
.gr-guide__body { margin-top:auto; display:flex; flex-direction:column; gap:.6rem; padding:1.3rem 1.3rem 1.4rem; }
.gr-guide__meta { font-family:var(--font-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gc); }
.gr-guide__meta b { font-weight:500; margin-right:.4rem; opacity:.7; }
.gr-guide h3 { margin:0; font-family:var(--font-display); font-weight:800; font-size:1.25rem; line-height:1.15; letter-spacing:-.02em; color:#fff; }
.gr-guide__ex { color:#C3D1C8; font-size:.92rem; line-height:1.5; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.gr-guide__go { font-weight:700; font-size:.95rem; color:#fff; }
.gr-guide__go span { display:inline-block; transition:transform .3s var(--gr-ease); }
.gr-guide:hover, .gr-guide:focus-visible { transform:translateY(-6px); border-color:color-mix(in srgb, var(--gc) 60%, transparent); box-shadow:0 30px 70px -30px color-mix(in srgb, var(--gc) 60%, transparent); }
.gr-guide:hover .gr-guide__media img { transform:scale(1.1); filter:saturate(1.05) brightness(.85); }
.gr-guide:hover .gr-guide__go span { transform:translateX(5px); }
.gr-guide:focus-visible { outline:2px solid var(--gc); outline-offset:3px; }
@media (max-width: 1100px) { .gr-guides__grid { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px) { .gr-guides__grid { grid-template-columns:1fr; } .gr-guide { min-height:340px; } }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 960px) {
  .gr-hero { min-height:0; padding-top:3.2rem; }
  .gr-hero__grid { grid-template-columns:1fr; gap:2rem; }
  .gr-hero__title { max-width:15ch; }
  .gr-hero__stage::after { background:linear-gradient(180deg, rgba(6,10,7,.55) 0%, rgba(6,10,7,.82) 45%, rgba(6,10,7,.97) 100%); }
  .gr-hero__led { left:30%; width:60%; }
  .gr-build__grid, .gr-store__grid { grid-template-columns:1fr; gap:0; }
  .gr-store__mosaic { margin-top:2.5rem; }
  .gr-build__stage { top:var(--header-h, 64px); z-index:2; height:42vh; padding:.8rem 0 3.4rem; background:var(--gr-night); box-shadow:0 18px 24px -6px var(--gr-night); }
  .gr-build__intro { order:-1; padding-bottom:2rem; }
  .gr-tent { height:100%; width:auto; }
  .gr-tent__hud { bottom:-2.8rem; }
  .gr-step { min-height:58vh; }
  .gr-build { background:var(--gr-night); }
  .gr-tent__bottles { left:9%; transform:scale(.62); transform-origin:left bottom; }
}
@media (max-width: 600px) {
  .gr-hero__facts li { padding:0 .9rem; }
  .gr-phases { gap:.5rem; }
  .gr-phases__tab { flex-direction:column; gap:.15rem; padding-top:.8rem; }
  .gr-phases__t { font-size:.86rem; }
  .gr-phases__t small { display:none; }
  .gr-hud__read { gap:.7rem 1rem; }
  .gr-btn { width:100%; }
}
@media (prefers-reduced-motion: reduce) {
  .gr-hero__bg picture, .cat-hero__photo img, .gr-ticker__track, .gr-hero__led span, .gr-kicker__dot, .gr-tent__fan.is-lit i, .gr-hero__rays, .gr-tent__fan.is-lit::after { animation:none !important; }
  .gr-phases__tab.is-on .gr-phases__p i { animation:none; transform:scaleX(1); }
  .gr-step { opacity:1; transform:none; }
  .js .gr-hero .gr-kicker, .js .gr-hero .gr-hero__facts li, .js .gr-hud, .js .gr-phases__tab, .gr-hero__phasecopy.is-on { opacity:1 !important; animation:none !important; }
  .js .gr-hero:not(.is-ready) .gr-hero__bg.is-on img { filter:none; transform:none; }
  .gr-hero__led span { transform:scaleX(1) !important; opacity:1 !important; }
  .gr-hero__bg.is-on { transition:none; }
  .gr-hero__grid { transform:none; opacity:1; }
}