/* ===== hidroponia.online — tema moderno/tech (verde oscuro + lima neón + cian) ===== */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#071710; --bg2:#0b2318; --panel:#0f2a1e; --panel2:#12321f;
  --lime:#a3e635; --lime-d:#84cc16; --cyan:#22d3ee; --ink:#eafff2;
  --txt:#b8d6c6; --mut:#7fa892; --line:#1d3d2c; --r:16px;
  --glow:0 0 40px rgba(163,230,53,.25);
}
html{scroll-behavior:smooth}
body{font-family:"Segoe UI",system-ui,Roboto,Arial,sans-serif;color:var(--txt);
  background:var(--bg);line-height:1.65;overflow-x:hidden}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
h1,h2,h3{color:var(--ink);line-height:1.14;font-weight:800;letter-spacing:-.4px}
h2{font-size:clamp(1.6rem,3.6vw,2.35rem);text-align:center}
section{padding:66px 0}
.lime{color:var(--lime)}
a{color:inherit;text-decoration:none}
.eyebrow{display:inline-block;color:var(--lime);font-weight:800;letter-spacing:2px;text-transform:uppercase;font-size:.74rem;margin-bottom:8px}
.tagline{display:inline-block;color:var(--cyan);font-weight:700;letter-spacing:1px;font-size:.8rem;
  border:1px solid rgba(34,211,238,.4);border-radius:999px;padding:6px 14px;margin-bottom:18px;background:rgba(34,211,238,.06)}

/* Botones */
.btn{display:inline-flex;align-items:center;gap:.45em;justify-content:center;text-align:center;font-weight:800;border-radius:10px;
  padding:14px 26px;transition:.18s;cursor:pointer;border:0}
.btn-lime{background:var(--lime);color:#0a2010;box-shadow:var(--glow)}
.btn-lime:hover{background:var(--lime-d);transform:translateY(-2px)}
/* Secundario SÓLIDO (los transparentes se perdían y no invitaban a hacer clic) */
.btn-outline{background:#f4fff8;color:#0a2010;border:0;box-shadow:0 8px 22px rgba(0,0,0,.35)}
.btn-outline:hover{background:#fff;transform:translateY(-2px)}
.btn-sm{padding:9px 16px;font-size:.9rem;border-radius:8px}
.btn-lg{padding:16px 30px;font-size:1.05rem}.btn-xl{padding:19px 42px;font-size:1.18rem}

/* Nav */
.nav{position:sticky;top:0;z-index:40;background:rgba(7,23,16,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;padding:12px 20px}
.brand{font-weight:900;color:var(--ink);letter-spacing:.5px}.brand span{color:var(--lime);font-weight:700}

/* Hero */
.hero{position:relative;padding:52px 0 58px;overflow:hidden;
  background:radial-gradient(700px 340px at 50% -10%,rgba(34,211,238,.14),transparent 70%),linear-gradient(180deg,#0a2016,var(--bg))}
.glow{position:absolute;width:520px;height:520px;border-radius:50%;left:50%;top:-120px;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(163,230,53,.18),transparent 65%);filter:blur(20px);pointer-events:none}
/* Hero CENTRADO: la imagen va arriba y en medio, igual en PC y móvil */
.hero-in{position:relative;max-width:820px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.hero h1{font-size:clamp(2.1rem,5.4vw,3.4rem)}
.hero-copy{display:flex;flex-direction:column;align-items:center}
.hero-copy .tagline{margin-bottom:14px}
.lead{font-size:1.12rem;margin:16px auto 24px;color:#c3ddce;max-width:38em}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.metrics{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.hero-art{order:-1;position:relative;display:flex;justify-content:center;align-items:center;margin-bottom:22px}
.hero-book{width:min(340px,74vw);height:auto;filter:drop-shadow(0 26px 52px rgba(0,0,0,.6));animation:floaty 5s ease-in-out infinite}
.hero-tag{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);background:var(--lime);color:#0a2010;
  font-weight:800;font-size:.8rem;padding:8px 16px;border-radius:999px;box-shadow:var(--glow);white-space:nowrap;
  animation:tagPulse 2.1s ease-in-out infinite}
@keyframes tagPulse{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.06)}}

/* Botón ámbar que llama la atención */
.btn-amber{background:linear-gradient(180deg,#fbbf24,#f59e0b);color:#3b2500}
.btn-amber:hover{background:linear-gradient(180deg,#fcc433,#d97706)}
@keyframes ctaPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.055)}}
@keyframes ctaRing{0%{box-shadow:0 0 0 0 rgba(245,158,11,.6)}70%{box-shadow:0 0 0 14px rgba(245,158,11,0)}100%{box-shadow:0 0 0 0 rgba(245,158,11,0)}}
.btn-attn{animation:ctaPulse 2.1s ease-in-out infinite,ctaRing 2.1s ease-in-out infinite}
.btn-attn:hover{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.btn-attn,.hero-tag{animation:none}}

/* Variantes de landing (?v=) */
[data-vonly]{display:none}
html[data-v="a"] [data-vonly~="a"],html[data-v="b"] [data-vonly~="b"],html[data-v="c"] [data-vonly~="c"]{display:block}

/* Reproductor de testimonios */
.vbox{position:relative;border-radius:18px;overflow:hidden;background:#071710;border:1px solid var(--line)}
.vbox video{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#071710}
.vplay{position:absolute;inset:0;width:100%;border:0;cursor:pointer;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;color:#fff;font-weight:800;font-family:inherit;font-size:.95rem;
  background:linear-gradient(180deg,rgba(7,23,16,.15),rgba(7,23,16,.6));transition:.2s}
.vplay:hover{background:linear-gradient(180deg,rgba(7,23,16,.05),rgba(7,23,16,.45))}
.vplay-ico{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:var(--lime);color:#0a2010;
  font-size:1.5rem;padding-left:5px;box-shadow:var(--glow);animation:ctaPulse 2.1s ease-in-out infinite}
.vplay-txt{text-shadow:0 2px 8px rgba(0,0,0,.6)}
.vbox.is-playing .vplay{opacity:0;pointer-events:none}
.vtesti{background:var(--bg2);text-align:center}
.vsolo{max-width:620px;margin:26px auto 0}
.vsolo .vbox{border-radius:22px;box-shadow:0 22px 50px rgba(0,0,0,.5)}
.vsolo .vbox video{aspect-ratio:16/9}

/* Banner clicable */
.bannersec{background:var(--bg);padding:44px 0}
.bannerlink{position:relative;display:block;max-width:900px;margin:0 auto;border-radius:20px;overflow:hidden;
  cursor:pointer;box-shadow:0 20px 48px rgba(0,0,0,.5);transition:.22s}
.bannerlink:hover{transform:translateY(-4px)}
.bannerlink img{display:block;width:100%;height:auto}
.banner-cta{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);background:linear-gradient(180deg,#fbbf24,#f59e0b);
  color:#3b2500;font-weight:800;padding:14px 26px;border-radius:999px;white-space:nowrap;box-shadow:0 10px 28px rgba(0,0,0,.45)}
@keyframes bannerPulse{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.05)}}
.banner-cta.btn-attn{animation:bannerPulse 2.1s ease-in-out infinite}
@media(max-width:560px){.banner-cta{font-size:.85rem;padding:11px 18px;bottom:12px}}
.metrics div{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 22px;min-width:96px}
.metrics b{display:block;font-size:1.7rem;color:var(--lime);font-weight:900}
.metrics span{font-size:.8rem;color:var(--mut);text-transform:uppercase;letter-spacing:1px}

/* Features */
.feat{background:var(--bg2)}
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:28px}
/* Tarjetas con FOTO de fondo + texto legible encima e icono propio centrado */
.fcard{position:relative;isolation:isolate;overflow:hidden;border:1px solid var(--line);border-radius:var(--r);
  padding:30px 22px;text-align:center;transition:.2s;background:var(--panel)}
.fcard::before{content:"";position:absolute;inset:0;z-index:-2;background-image:var(--bg);
  background-size:cover;background-position:center;opacity:.62;transition:.3s}
.fcard::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(7,23,16,.42),rgba(7,23,16,.88))}
.fcard:hover{border-color:var(--lime);transform:translateY(-4px)}
.fcard:hover::before{opacity:.8;transform:scale(1.05)}
.fcard h3,.fcard p{text-shadow:0 2px 10px rgba(0,0,0,.75)}
.ficon{display:grid;place-items:center;width:62px;height:62px;margin:0 auto 14px;border-radius:50%;
  color:var(--lime);background:rgba(163,230,53,.13);border:1px solid rgba(163,230,53,.45);
  box-shadow:0 0 22px rgba(163,230,53,.18)}
.ficon svg{width:30px;height:30px}
.fcard h3{font-size:1.12rem;margin:0 0 8px}
.fcard p{color:#cfe6d8;font-size:.94rem}

/* Flow */
.flow{background:var(--bg)}
.flow-in{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
.flow-list{list-style:none;counter-reset:s;display:grid;gap:16px;margin:16px 0 24px}
.flow-list li{counter-increment:s;position:relative;padding-left:48px;color:#c3ddce}
.flow-list li:before{content:counter(s);position:absolute;left:0;top:-2px;width:32px;height:32px;border-radius:8px;
  background:linear-gradient(160deg,var(--lime),var(--lime-d));color:#0a2010;font-weight:900;display:grid;place-items:center}
.flow-list b{color:var(--ink)}
.flow-visual{display:flex;justify-content:center}
.tower{position:relative;width:min(240px,64vw);aspect-ratio:3/4;border-radius:20px;padding:24px;
  background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);
  display:grid;grid-template-columns:1fr 1fr;gap:14px;place-items:center;font-size:2.4rem;box-shadow:var(--glow)}
.tower .drop{position:absolute;inset:0;border-radius:20px;
  background:linear-gradient(180deg,transparent,rgba(34,211,238,.08));pointer-events:none}

/* Gallery */
.gallery{background:var(--bg)}
.gsub{text-align:center;color:var(--mut);margin-top:4px}
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.gal-grid img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;border:1px solid var(--line)}

/* Guide */
.guide{background:var(--bg2)}
.guide-in{display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:center}
.guide-art{display:flex;justify-content:center}
.book-cover{width:100%;max-width:360px;height:auto;animation:floaty 5s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.gbook{width:min(250px,62vw);aspect-ratio:3/4;border-radius:12px;padding:26px;text-align:center;color:#eafff2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(155deg,#22d3ee22,#0f2a1e 30%,#071710);border:1px solid var(--line);
  box-shadow:var(--glow);transform:rotate(-3deg)}
.gbook{position:relative}
.gbook span{font-size:2.8rem}.gbook b{font-size:1.25rem;letter-spacing:.5px;color:var(--lime)}.gbook small{color:var(--mut)}
.gbook-photo{position:absolute;left:-22px;bottom:-22px;width:122px;height:122px;object-fit:cover;border-radius:50%;border:5px solid var(--bg2);box-shadow:var(--glow)}
.glist{list-style:none;display:grid;gap:9px;margin:14px 0 22px}
.glist li{color:#c3ddce}
.guide-txt p{color:#a9cbba}

/* Voices */
.voices{background:var(--bg)}
.v-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px}
.v{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.stars{color:var(--lime);letter-spacing:2px;margin-bottom:8px}
.v p{font-style:italic;color:#cbe8d8}.v span{display:block;margin-top:10px;font-weight:700;color:var(--cyan)}

/* Final */
.cta-final{text-align:center;background:radial-gradient(600px 300px at 50% 0,rgba(163,230,53,.14),transparent 70%),var(--bg2)}
.cf-in{max-width:640px;margin:0 auto}
.cta-final p{margin:8px 0 22px;color:#bcd}
.or{margin-top:16px;font-size:.94rem;color:var(--mut)}.or a{color:var(--lime);text-decoration:underline;cursor:pointer}

/* Footer */
.foot{background:#050f0a;color:#6f9382;text-align:center;padding:40px 0 118px;border-top:1px solid var(--line)}
.mini{font-size:.8rem;opacity:.8;margin-top:6px}

/* Sticky */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  gap:14px;background:rgba(5,15,10,.96);border-top:1px solid var(--line);color:#fff;padding:12px 18px;transform:translateY(120%);transition:.28s}
.sticky-cta.is-visible{transform:translateY(0)}.sticky-cta span{font-weight:600;font-size:.92rem}

@media(max-width:860px){
  section{padding:48px 0}
  .hero{padding-top:20px}
  .hero-in{gap:4px}
  .hero-book{width:min(285px,70vw)}
  .hero .cta-row,.hero .metrics{justify-content:center}
  .hero-copy .tagline{margin-bottom:12px}
  .lead{margin-inline:auto}
  .flow-in,.guide-in{grid-template-columns:1fr;text-align:center}
  .flow-visual,.guide-art{order:-1}
  .flow-list{text-align:left;max-width:460px;margin-inline:auto}
  .feat-grid{grid-template-columns:1fr 1fr}
  .v-grid{grid-template-columns:1fr}
  .guide-txt,.flow-txt{text-align:left}
  .sticky-cta span{display:none}.sticky-cta{justify-content:center}
}
@media(max-width:640px){.gal-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.feat-grid{grid-template-columns:1fr}}