/* =========================================================
   DROMUX HOME V2
   Se carga únicamente en index.html, después de styles.css.
   ========================================================= */

.home-v2 {
  --hv2-bg: #050816;
  --hv2-surface: #0b1122;
  --hv2-surface-2: #10182d;
  --hv2-text: #f7f9ff;
  --hv2-muted: #aab5cf;
  --hv2-line: rgba(255,255,255,.10);
  --hv2-line-strong: rgba(255,255,255,.16);
  --hv2-blue: #8db7ff;
  --hv2-cyan: #65e6cb;
  --hv2-container: min(1320px, calc(100% - 40px));
  background:
    radial-gradient(circle at 15% 0%, rgba(92, 139, 255, .12), transparent 26%),
    #050816;
}

.home-v2 .container { width: var(--hv2-container); }
.home-v2 main { overflow: hidden; }
.home-v2 .navbar-container { width: var(--hv2-container); }
.home-v2 .navbar { background: rgba(5, 8, 22, .70); }
.home-v2 .navbar.scrolled { background: rgba(5, 8, 22, .94); }
.home-v2 .nav-cta { min-height: 48px; padding: 0 20px; border-radius: 14px; }
.home-v2 .nav-menu { background: transparent; border-color: transparent; }
.home-v2 .nav-link { font-size: .91rem; }

.home-v2 .btn { min-height: 56px; border-radius: 16px; }
.home-v2 .btn svg { width: 18px; height: 18px; }
.home-v2 .btn-primary { box-shadow: 0 18px 44px rgba(38, 67, 122, .32); }
.home-v2 .btn-secondary { backdrop-filter: blur(10px); }
.home-v2 .section-kicker { min-height: 34px; font-size: .72rem; padding: 0 14px; }

.hv2-section { position: relative; padding: 118px 0; }

/* HERO */
.hv2-hero {
  position: relative;
  min-height: calc(100vh - 88px);
  padding: 82px 0 42px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hv2-grid-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px);
  background-size: 74px 74px;
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.72) 60%, transparent 100%);
}
.hv2-glow { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events:none; }
.hv2-glow-a { width: 520px; height: 520px; left: -220px; top: 4%; background: rgba(76, 117, 255, .18); }
.hv2-glow-b { width: 440px; height: 440px; right: -180px; top: 20%; background: rgba(57, 224, 193, .10); }
.hv2-hero-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: .88fr 1.12fr; gap: 58px; align-items: center;
}
.hv2-eyebrow { display: inline-flex; align-items:center; gap:10px; color:#c7d3ea; font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.13em; }
.hv2-eyebrow span { width:28px; height:1px; background:linear-gradient(90deg,var(--hv2-blue),var(--hv2-cyan)); }
.hv2-hero h1 { margin:18px 0 24px; max-width:700px; font-size:clamp(3.6rem,6.2vw,6.15rem); line-height:.88; letter-spacing:-.065em; font-weight:700; text-wrap:balance; }
.hv2-hero h1 em { display:block; color:var(--hv2-blue); font-style:normal; }
.hv2-lead { max-width:680px; margin:0; color:var(--hv2-muted); font-size:clamp(1.05rem,1.5vw,1.22rem); line-height:1.78; }
.hv2-lead strong { color:#eaf0ff; font-weight:650; }
.hv2-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.hv2-mini-proof { display:flex; flex-wrap:wrap; gap:12px 18px; margin-top:26px; color:#8f9bb7; font-size:.86rem; }
.hv2-mini-proof span { display:inline-flex; align-items:center; gap:7px; }
.hv2-mini-proof svg { width:15px; height:15px; color:var(--hv2-cyan); }
.hv2-hero-product { position:relative; padding:18px 8px 28px; }
.hv2-browser { position:relative; overflow:hidden; border-radius:24px; border:1px solid rgba(255,255,255,.13); background:#0b1020; box-shadow:0 42px 100px rgba(0,0,0,.48), 0 0 0 1px rgba(115,159,255,.04); transform:perspective(1500px) rotateY(-2deg) rotateX(1deg); }
.hv2-browser::after { content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 70px rgba(5,8,22,.18); }
.hv2-browser-top { height:44px; display:grid; grid-template-columns:90px 1fr 90px; align-items:center; border-bottom:1px solid var(--hv2-line); background:#0a1020; }
.hv2-browser-dots { display:flex; gap:6px; padding-left:16px; }
.hv2-browser-dots span { width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.18); }
.hv2-browser-url { justify-self:center; display:flex; align-items:center; gap:6px; width:min(330px,85%); padding:7px 14px; border-radius:9px; background:rgba(255,255,255,.045); color:#76829f; font-size:.70rem; }
.hv2-browser-url svg { width:11px;height:11px; }
.hv2-browser img { width:100%; aspect-ratio:1087/810; object-fit:cover; object-position:top center; }
.hv2-float-card { position:absolute; z-index:3; display:flex; align-items:center; gap:11px; min-width:190px; padding:13px 15px; border:1px solid rgba(255,255,255,.12); border-radius:15px; background:rgba(11,17,34,.86); box-shadow:0 18px 42px rgba(0,0,0,.35); backdrop-filter:blur(16px); }
.hv2-float-card > svg { flex:0 0 auto; width:20px;height:20px;color:var(--hv2-blue); }
.hv2-float-card div { display:flex;flex-direction:column;gap:2px; }
.hv2-float-card strong { font-size:.82rem; }
.hv2-float-card span { color:#8d99b4;font-size:.68rem; }
.hv2-float-stock { left:-24px; bottom:2px; }
.hv2-float-finance { right:-22px; top:14%; }
.hv2-trust-row { position:relative;z-index:2; display:grid;grid-template-columns:repeat(7,1fr); margin-top:62px; border-top:1px solid var(--hv2-line);border-bottom:1px solid var(--hv2-line); }
.hv2-trust-row span { padding:16px 10px; color:#78849e; text-align:center; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; border-right:1px solid var(--hv2-line); }
.hv2-trust-row span:last-child { border-right:0; }

/* HEADINGS */
.hv2-split-head { display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end;margin-bottom:44px; }
.hv2-split-head h2,.hv2-center-head h2,.hv2-product-copy h2,.hv2-seo-layout h2 { margin:16px 0 0; font-size:clamp(2.35rem,4vw,4.45rem); line-height:.99; letter-spacing:-.052em; text-wrap:balance; }
.hv2-split-head > p { margin:0;color:var(--hv2-muted);line-height:1.85;font-size:1.03rem; }
.hv2-center-head { max-width:880px;margin:0 auto 52px;text-align:center; }
.hv2-center-head p { max-width:760px;margin:20px auto 0;color:var(--hv2-muted);font-size:1.02rem;line-height:1.8; }

/* PROBLEM */
.hv2-problem { background:linear-gradient(180deg,rgba(255,255,255,.018),transparent);border-top:1px solid rgba(255,255,255,.05); }
.hv2-problem-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:14px; }
.hv2-problem-card { padding:28px;min-height:270px;border:1px solid var(--hv2-line);border-radius:22px;background:linear-gradient(150deg,rgba(255,255,255,.045),rgba(255,255,255,.018));transition:.3s ease; }
.hv2-problem-card:hover { transform:translateY(-5px);border-color:rgba(141,183,255,.28);background:linear-gradient(150deg,rgba(141,183,255,.08),rgba(255,255,255,.018)); }
.hv2-icon,.hv2-module-icon { width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:rgba(141,183,255,.09);border:1px solid rgba(141,183,255,.16);color:var(--hv2-blue); }
.hv2-icon svg,.hv2-module-icon svg { width:21px;height:21px; }
.hv2-problem-card h3 { margin:44px 0 10px;font-size:1.22rem;letter-spacing:-.02em; }
.hv2-problem-card p { margin:0;color:var(--hv2-muted);line-height:1.72;font-size:.92rem; }

/* MODULES */
.hv2-platform { background:radial-gradient(circle at 50% 25%,rgba(86,126,255,.09),transparent 34%); }
.hv2-module-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:14px; }
.hv2-module { position:relative;min-height:330px;padding:28px;display:flex;flex-direction:column;text-decoration:none;border:1px solid var(--hv2-line);border-radius:24px;background:#091022;overflow:hidden;transition:.3s ease; }
.hv2-module:hover { transform:translateY(-5px);border-color:rgba(141,183,255,.29);box-shadow:0 24px 60px rgba(0,0,0,.2); }
.hv2-module-featured { grid-column:span 2;display:grid;grid-template-columns:.8fr 1.2fr;padding:0;min-height:390px; }
.hv2-module-copy { padding:34px;display:flex;flex-direction:column; }
.hv2-module-shot { min-width:0;display:flex;align-items:flex-end;padding:34px 0 0;overflow:hidden; }
.hv2-module-shot img { width:112%;max-width:none;height:86%;object-fit:cover;object-position:top left;border:1px solid var(--hv2-line);border-right:0;border-bottom:0;border-radius:20px 0 0 0;box-shadow:-18px -18px 55px rgba(0,0,0,.28); }
.hv2-tag { display:block;margin:24px 0 8px;color:#74819e;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.13em; }
.hv2-module h3 { margin:0 0 11px;font-size:1.55rem;letter-spacing:-.035em; }
.hv2-module p { margin:0;color:var(--hv2-muted);line-height:1.72;font-size:.93rem; }
.hv2-link { display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:28px;color:#cdd9f4;font-size:.83rem;font-weight:700; }
.hv2-link svg { width:15px;height:15px; }

/* REAL PRODUCT */
.hv2-real-product { border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05);background:rgba(255,255,255,.012); }
.hv2-product-layout { display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:center; }
.hv2-image-frame { position:relative;border:1px solid var(--hv2-line-strong);border-radius:26px;overflow:hidden;background:#091020;box-shadow:0 35px 80px rgba(0,0,0,.38); }
.hv2-image-frame::before { content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 80px rgba(5,8,22,.12);z-index:1; }
.hv2-image-frame img { width:100%; }
.hv2-product-copy > p { margin:22px 0 0;color:var(--hv2-muted);line-height:1.82;font-size:1.02rem; }
.hv2-check-list { display:grid;gap:17px;margin:28px 0; }
.hv2-check-list > div { display:flex;gap:12px;color:#aeb9d2;line-height:1.58;font-size:.92rem; }
.hv2-check-list svg { flex:0 0 auto;width:19px;height:19px;margin-top:2px;color:var(--hv2-cyan); }
.hv2-check-list strong { color:#eef3ff; }

/* WEB */
.hv2-web-grid { display:grid;grid-template-columns:1fr 1fr;gap:18px; }
.hv2-web-card { text-decoration:none;border:1px solid var(--hv2-line);border-radius:24px;overflow:hidden;background:#091022;transition:.3s ease; }
.hv2-web-card:hover { transform:translateY(-5px);border-color:rgba(141,183,255,.28); }
.hv2-web-shot { aspect-ratio:1.72;overflow:hidden;border-bottom:1px solid var(--hv2-line);background:#0b1020; }
.hv2-web-shot img { width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .55s ease; }
.hv2-web-card:hover img { transform:scale(1.02); }
.hv2-web-card > div:last-child { display:grid;grid-template-columns:1fr auto;gap:5px 20px;padding:22px 24px;align-items:center; }
.hv2-web-card > div:last-child span { grid-column:1;color:#7f8ba5;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;font-weight:700; }
.hv2-web-card > div:last-child strong { font-size:1rem; }
.hv2-web-card > div:last-child svg { grid-column:2;grid-row:1/3;width:19px;height:19px;color:var(--hv2-blue); }
.hv2-inline-cta { display:flex;justify-content:center;margin-top:30px; }

/* STEPS */
.hv2-how { background:linear-gradient(180deg,rgba(255,255,255,.012),rgba(255,255,255,.025)); }
.hv2-steps { display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--hv2-line);border-bottom:1px solid var(--hv2-line); }
.hv2-steps article { display:grid;grid-template-columns:auto 1fr;gap:18px;padding:34px 30px;border-right:1px solid var(--hv2-line); }
.hv2-steps article:last-child { border-right:0; }
.hv2-steps article > span { color:var(--hv2-blue);font-size:.75rem;font-weight:700;letter-spacing:.1em; }
.hv2-steps h3 { margin:0 0 8px;font-size:1.12rem; }
.hv2-steps p { margin:0;color:var(--hv2-muted);line-height:1.68;font-size:.88rem; }

/* SEO COPY */
.hv2-seo-copy { background:radial-gradient(circle at 12% 50%,rgba(101,230,203,.06),transparent 30%); }
.hv2-seo-layout { display:grid;grid-template-columns:.9fr 1.1fr;gap:90px; }
.hv2-seo-text { columns:1; }
.hv2-seo-text p { margin:0 0 20px;color:var(--hv2-muted);line-height:1.88;font-size:1rem; }
.hv2-seo-text strong { color:#eaf0ff;font-weight:650; }

/* FAQ */
.hv2-faq { border-top:1px solid rgba(255,255,255,.05); }
.hv2-faq-list { max-width:920px; }
.hv2-faq-list details { border-bottom:1px solid var(--hv2-line); }
.hv2-faq-list summary { list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 4px;color:#eaf0ff;font-size:1rem;font-weight:700; }
.hv2-faq-list summary::-webkit-details-marker { display:none; }
.hv2-faq-list summary svg { flex:0 0 auto;width:18px;height:18px;color:#71809e;transition:transform .25s ease; }
.hv2-faq-list details[open] summary svg { transform:rotate(45deg); }
.hv2-faq-list details p { margin:0;padding:0 54px 24px 4px;color:var(--hv2-muted);line-height:1.78;font-size:.92rem; }

/* FINAL */
.hv2-final { padding:40px 0 120px; }
.hv2-final-card { position:relative;overflow:hidden;display:grid;grid-template-columns:1.25fr .75fr;gap:50px;align-items:center;padding:58px;border:1px solid rgba(141,183,255,.18);border-radius:30px;background:linear-gradient(135deg,rgba(33,53,96,.58),rgba(10,16,33,.92));box-shadow:0 34px 80px rgba(0,0,0,.24); }
.hv2-final-glow { position:absolute;width:460px;height:460px;right:-180px;top:-210px;border-radius:50%;background:rgba(92,138,255,.18);filter:blur(40px); }
.hv2-final-copy,.hv2-final-actions { position:relative;z-index:2; }
.hv2-final h2 { margin:15px 0 14px;max-width:800px;font-size:clamp(2.15rem,3.6vw,3.8rem);line-height:1;letter-spacing:-.05em; }
.hv2-final p { margin:0;max-width:720px;color:#aeb9d2;line-height:1.75; }
.hv2-final-actions { display:flex;flex-direction:column;align-items:stretch;gap:15px; }
.hv2-final-link { display:inline-flex;justify-content:center;align-items:center;gap:7px;color:#c8d4ed;text-decoration:none;font-weight:700;font-size:.9rem; }
.hv2-final-link svg { width:16px;height:16px; }

/* FOOTER OVERRIDES */
.home-v2 .footer-shell { grid-template-columns:1.35fr .8fr 1fr .65fr;align-items:start; }
.hv2-footer-logo { width:150px;height:auto;margin-bottom:18px; }
.hv2-footer-links { display:flex;flex-direction:column;gap:10px; }
.hv2-footer-links a { color:var(--hv2-muted);font-size:.88rem;text-decoration:none;transition:color .2s ease; }
.hv2-footer-links a:hover { color:#fff; }
.home-v2 .whatsapp-fab__button { font-size:30px;color:#fff; }

/* REVEAL */
.home-v2 .reveal { opacity:0;transform:translateY(24px);transition:opacity .72s ease,transform .72s ease; }
.home-v2 .reveal.visible { opacity:1;transform:none; }
.hv2-hero-copy.reveal,.hv2-hero-product.reveal { opacity:1;transform:none;animation:hv2HeroIn .72s both; }
.hv2-hero-product.reveal { animation-delay:.08s; }
@keyframes hv2HeroIn { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }

@media (max-width: 1180px) {
  .hv2-hero-grid { grid-template-columns:1fr 1fr;gap:34px; }
  .hv2-hero h1 { font-size:clamp(3.2rem,6vw,4.8rem); }
  .hv2-problem-grid { grid-template-columns:1fr 1fr; }
  .hv2-module-grid { grid-template-columns:1fr 1fr; }
  .hv2-module-featured { grid-column:span 2; }
  .home-v2 .footer-shell { grid-template-columns:1.2fr .8fr 1fr; }
  .home-v2 .footer-social { grid-column:3; }
}

@media (max-width: 900px) {
  .home-v2 { --hv2-container:min(100% - 28px, 760px); }
  .hv2-section { padding:88px 0; }
  .hv2-hero { min-height:auto;padding:62px 0 36px; }
  .hv2-hero-grid,.hv2-product-layout,.hv2-seo-layout,.hv2-final-card { grid-template-columns:1fr; }
  .hv2-hero-copy { text-align:center; }
  .hv2-eyebrow { justify-content:center; }
  .hv2-hero h1,.hv2-lead { margin-left:auto;margin-right:auto; }
  .hv2-actions,.hv2-mini-proof { justify-content:center; }
  .hv2-hero-product { max-width:760px;margin:22px auto 0; }
  .hv2-float-stock { left:10px; }
  .hv2-float-finance { right:10px; }
  .hv2-trust-row { grid-template-columns:repeat(4,1fr);margin-top:42px; }
  .hv2-trust-row span:nth-child(4) { border-right:0; }
  .hv2-trust-row span:nth-child(-n+4) { border-bottom:1px solid var(--hv2-line); }
  .hv2-split-head { grid-template-columns:1fr;gap:20px;align-items:start; }
  .hv2-module-featured { grid-template-columns:1fr; }
  .hv2-module-shot { padding:0 0 0 34px; }
  .hv2-module-shot img { height:auto;width:100%;border-radius:20px 0 0 0; }
  .hv2-product-layout { gap:44px; }
  .hv2-seo-layout { gap:34px; }
  .hv2-final-card { padding:44px; }
  .hv2-final-actions { max-width:440px; }
  .home-v2 .footer-shell { grid-template-columns:1fr 1fr; }
  .home-v2 .footer-social { grid-column:auto; }
}

@media (max-width: 620px) {
  .home-v2 { --hv2-container:calc(100% - 24px); }
  .hv2-section { padding:72px 0; }
  .hv2-hero { padding-top:42px; }
  .hv2-hero h1 { font-size:clamp(3rem,15vw,4rem); }
  .hv2-lead { font-size:1rem;line-height:1.72; }
  .hv2-actions { flex-direction:column;align-items:stretch; }
  .hv2-actions .btn { width:100%; }
  .hv2-mini-proof { display:grid;gap:9px;text-align:left;justify-content:center; }
  .hv2-browser { border-radius:16px;transform:none; }
  .hv2-browser-top { height:34px;grid-template-columns:60px 1fr 60px; }
  .hv2-browser-url { padding:5px 8px;font-size:.55rem; }
  .hv2-float-card { display:none; }
  .hv2-trust-row { grid-template-columns:repeat(2,1fr); }
  .hv2-trust-row span,.hv2-trust-row span:nth-child(4) { border-right:1px solid var(--hv2-line);border-bottom:1px solid var(--hv2-line); }
  .hv2-trust-row span:nth-child(2n) { border-right:0; }
  .hv2-trust-row span:last-child { grid-column:span 2;border-right:0;border-bottom:0; }
  .hv2-split-head h2,.hv2-center-head h2,.hv2-product-copy h2,.hv2-seo-layout h2 { font-size:clamp(2.2rem,11vw,3.1rem); }
  .hv2-problem-grid,.hv2-module-grid,.hv2-web-grid,.hv2-steps { grid-template-columns:1fr; }
  .hv2-problem-card { min-height:240px; }
  .hv2-module-featured { grid-column:auto; }
  .hv2-module-featured,.hv2-module { min-height:auto; }
  .hv2-module-shot { padding-left:26px; }
  .hv2-steps { border-bottom:0; }
  .hv2-steps article { border-right:0;border-bottom:1px solid var(--hv2-line);padding:26px 8px; }
  .hv2-final { padding-bottom:80px; }
  .hv2-final-card { padding:32px 24px;border-radius:22px; }
  .hv2-final h2 { font-size:2.25rem; }
  .home-v2 .footer-shell { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .home-v2 .reveal,.hv2-hero-copy.reveal,.hv2-hero-product.reveal { opacity:1;transform:none;animation:none;transition:none; }
}


/* =========================================================
   AJUSTE V2.1 · CAPTURAS REALES SIN RECORTE
   ========================================================= */
.hv2-hero-product {
  width: 100%;
  max-width: 720px;
  justify-self: end;
}

.hv2-browser {
  transform: none;
}

.hv2-browser img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: top center;
  background: #fff;
}

.hv2-float-stock {
  left: -10px;
  bottom: 8px;
}

.hv2-float-finance {
  right: -10px;
  top: 12%;
}

.hv2-module-shot {
  padding: 34px 18px 18px 0;
  align-items: center;
}

.hv2-module-shot img {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  object-position: top left;
  border-right: 1px solid var(--hv2-line);
  border-bottom: 1px solid var(--hv2-line);
  border-radius: 18px;
}

.hv2-image-frame img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: top center;
}

.hv2-web-shot {
  aspect-ratio: auto;
  min-height: 0;
  background: #0b1020;
}

.hv2-web-shot img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: top center;
}

.hv2-web-card:hover img {
  transform: none;
}

@media (max-width: 980px) {
  .hv2-hero-product {
    justify-self: center;
    max-width: 760px;
  }

  .hv2-module-shot {
    padding: 20px;
  }

  .hv2-module-shot img {
    border-radius: 16px;
  }
}

@media (max-width: 640px) {
  .hv2-float-card {
    display: none;
  }

  .hv2-hero-product {
    padding-inline: 0;
  }
}

/* =========================================================
   AJUSTE V2.2 · MODELO WEB ÚNICO CENTRADO
   ========================================================= */
.hv2-web-grid {
  grid-template-columns: minmax(0, 760px);
  justify-content: center;
}

@media (max-width: 980px) {
  .hv2-web-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
