/* ════════════════════════════════════════════════════════════
   Landing Hpe — estilos scopeados bajo .hpe-lp
   Tema (dark/light) e idioma (es/en) viven en el wrapper .hpe-lp
   para no colisionar con The7.
   Generado a partir de landings/hpe.html
════════════════════════════════════════════════════════════ */

/* The7 wrapper a ancho completo en esta plantilla */
body.page-template-page-hpe-php .wf-wrap {
  width: 100% !important;
}


/* ═══════════════════════════════
   TOKENS — Brand Book Datahaus + HPE
   Azul DH:    #0B66F3
   Casi negro: #262626
   Gris:       #999999
   Gris claro: #f3f3f3
   Verde HPE:  #00B388
   Tipografía: Inter
═══════════════════════════════ */

/* ── DARK (default) ── */
.hpe-lp[data-theme="dark"] {
  --bg:#0d0f1a; --bg2:#141828; --card:#1a1f30; --card2:#1f2538;
  --border:rgba(255,255,255,.08); --border2:rgba(255,255,255,.16);
  --txt:#f2f4f8; --txt2:#a8b0c2; --muted:#6b7488;
  --accent:#00B388; --accent2:#01A982; --glow:rgba(0,179,136,.2);
  --dh-blue:#0B66F3; --dh-glow:rgba(11,102,243,.2);
  --teal:#00d4b4; --nav-bg:rgba(13,15,26,.88);
}

/* ── LIGHT ── */
.hpe-lp[data-theme="light"] {
  --bg:#f3f3f3; --bg2:#ffffff; --card:#ffffff; --card2:#eef5f2;
  --border:#dde4ec; --border2:#b8d4cc;
  --txt:#262626; --txt2:#4b5468; --muted:#999999;
  --accent:#00B388; --accent2:#01A982; --glow:rgba(0,179,136,.15);
  --dh-blue:#0B66F3; --dh-glow:rgba(11,102,243,.16);
  --teal:#00876f; --nav-bg:rgba(243,243,243,.92);
}

/* ── IDIOMA ── */
.hpe-lp[data-lang="es"] .en {display:none!important;}

.hpe-lp[data-lang="en"] .es {display:none!important;}

.hpe-lp, .hpe-lp *, .hpe-lp *::before, .hpe-lp *::after {box-sizing:border-box;margin:0;padding:0;}

html {scroll-behavior:smooth;font-size:16px;}

.hpe-lp {
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  background:var(--bg);color:var(--txt);
  line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  transition:background .3s,color .3s;
}

.hpe-lp[data-theme="dark"]::before {
  content:"";position:fixed;inset:0;
  background:radial-gradient(ellipse 900px 500px at 10% -5%,var(--glow),transparent 60%),
             radial-gradient(ellipse 600px 400px at 95% 25%,rgba(0,179,136,.05),transparent 60%);
  pointer-events:none;z-index:0;
}

.hpe-lp a {color:inherit;text-decoration:none;}

.hpe-lp ul {list-style:none;}

.hpe-lp section,
.hpe-lp header,
.hpe-lp footer,
.hpe-lp nav {position:relative;z-index:1;}

.hpe-lp img {max-width:100%;display:block;}

.hpe-lp .wrap {max-width:1180px;margin:0 auto;padding:0 24px;}

/* ── TIPOGRAFÍA ── */
.hpe-lp h1,
.hpe-lp h2,
.hpe-lp h3,
.hpe-lp h4 {font-weight:700;letter-spacing:-.02em;line-height:1.15;}

.hpe-lp h2 {font-size:clamp(1.75rem,3vw,2.55rem);}

.hpe-lp h3 {font-size:1.1rem;}

.hpe-lp h4 {font-size:.98rem;}

.hpe-lp p {font-weight:400;}

.hpe-lp .eyebrow {
  display:inline-flex;align-items:center;gap:8px;
  font-size:.74rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);
}

.hpe-lp .eyebrow::before {content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);}

/* ═══ HEADER ═══ */
.hpe-lp header {position:sticky;top:0;z-index:100;background:var(--nav-bg);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);transition:background .3s;}

.hpe-lp .nav {max-width:1180px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px;}

.hpe-lp .logo {display:flex;flex-direction:column;line-height:1.1;flex-shrink:0;text-decoration:none;}

.hpe-lp .logo .parent {font-size:.55rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);}

.hpe-lp .logo .name {font-weight:800;font-size:1rem;letter-spacing:-.01em;}

.hpe-lp .logo .name span {color:var(--accent);}

.hpe-lp .nav-links {display:flex;gap:22px;}

.hpe-lp .nav-links a {font-size:.88rem;font-weight:500;color:var(--txt2);transition:color .2s;white-space:nowrap;}

.hpe-lp .nav-links a:hover {color:var(--accent);}

.hpe-lp .nav-controls {display:flex;gap:8px;align-items:center;flex-shrink:0;}

.hpe-lp .toggle-btn {
  display:flex;align-items:center;gap:5px;
  padding:7px 12px;border:1px solid var(--border);border-radius:999px;
  background:transparent;color:var(--txt2);
  font-size:.75rem;font-weight:700;letter-spacing:.04em;
  cursor:pointer;font-family:'Inter',sans-serif;transition:all .2s;white-space:nowrap;
}

.hpe-lp .toggle-btn:hover {border-color:var(--accent);color:var(--txt);}

.hpe-lp .nav-wa {display:flex;align-items:center;gap:6px;font-size:.82rem;font-weight:600;color:var(--txt2);padding:8px 14px;border:1px solid var(--border);border-radius:999px;transition:all .2s;white-space:nowrap;}

.hpe-lp .nav-wa:hover {border-color:var(--border2);color:var(--txt);}

.hpe-lp .nav-cta {background:var(--dh-blue);color:#fff!important;padding:9px 18px;border-radius:999px;font-size:.84rem;font-weight:700;transition:transform .15s,box-shadow .15s;white-space:nowrap;}

.hpe-lp .nav-cta:hover {transform:translateY(-1px);box-shadow:0 8px 24px var(--dh-glow);}

/* ═══ BOTONES ═══ */
.hpe-lp .btn {padding:13px 26px;border-radius:999px;font-weight:700;font-size:.92rem;display:inline-flex;align-items:center;gap:8px;transition:transform .15s,box-shadow .15s;cursor:pointer;}

.hpe-lp .btn-p {background:var(--dh-blue);color:#fff;}

.hpe-lp .btn-p:hover {transform:translateY(-2px);box-shadow:0 10px 28px var(--dh-glow);}

.hpe-lp .btn-g {background:transparent;color:var(--txt);border:1.5px solid var(--border2);}

.hpe-lp .btn-g:hover {background:var(--card);}

.hpe-lp .btn-accent {background:var(--accent);color:#fff;}

.hpe-lp .btn-accent:hover {transform:translateY(-2px);box-shadow:0 10px 28px var(--glow);}

.hpe-lp .btn-white {background:#fff;color:var(--accent2);font-weight:700;}

.hpe-lp .btn-white:hover {transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.18);}

.hpe-lp[data-theme="light"] .btn-white {background:var(--accent);color:#fff;}

.hpe-lp .btn-sm {padding:9px 18px;border-radius:999px;font-size:.84rem;font-weight:700;display:inline-flex;align-items:center;gap:7px;transition:all .2s;}

.hpe-lp .btn-sm-p {background:var(--dh-blue);color:#fff;}

.hpe-lp .btn-sm-p:hover {transform:translateY(-1px);box-shadow:0 6px 18px var(--dh-glow);}

.hpe-lp .btn-sm-g {background:transparent;color:var(--txt2);border:1.5px solid var(--border);}

.hpe-lp .btn-sm-g:hover {border-color:var(--border2);color:var(--txt);}

.hpe-lp .btn-row {display:flex;gap:14px;flex-wrap:wrap;}

.hpe-lp .btn-row-c {display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}

/* ═══ HERO ═══ */
.hpe-lp .hero {padding:80px 0 64px;}

.hpe-lp .hero-inner {display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;}

.hpe-lp .hero-badge {display:inline-flex;align-items:center;gap:8px;background:rgba(0,179,136,.12);border:1px solid rgba(0,179,136,.3);border-radius:999px;padding:6px 16px;font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);margin-bottom:22px;}

.hpe-lp .hero h1 {font-size:clamp(2rem,4.2vw,3.3rem);font-weight:800;margin-bottom:18px;}

.hpe-lp .hero h1 em {font-style:normal;color:var(--accent);}

.hpe-lp .hero .lead {font-size:1.04rem;font-weight:400;color:var(--txt2);max-width:520px;margin-bottom:32px;}

.hpe-lp .hero .btn-row {margin-bottom:44px;}

.hpe-lp .metrics {display:flex;gap:36px;flex-wrap:wrap;}

.hpe-lp .metric-num {font-size:1.6rem;font-weight:800;letter-spacing:-.02em;color:var(--txt);}

.hpe-lp .metric-label {font-size:.74rem;font-weight:500;color:var(--muted);margin-top:2px;}

/* Hero visual */
.hpe-lp .hero-visual {position:relative;aspect-ratio:4/3;border-radius:20px;background:linear-gradient(155deg,var(--card),var(--bg2));border:1px solid var(--border);display:flex;align-items:center;justify-content:center;overflow:hidden;transition:background .3s,border-color .3s;}

.hpe-lp[data-theme="dark"] .hero-visual::before {content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 39px,rgba(255,255,255,.03) 40px),repeating-linear-gradient(90deg,transparent,transparent 39px,rgba(255,255,255,.03) 40px);}

.hpe-lp .hero-visual img {position:relative;z-index:1;width:95%;max-width:500px;object-fit:contain;filter:drop-shadow(0 8px 32px rgba(0,179,136,.3));}

.hpe-lp .hero-img-fallback {display:none;position:relative;z-index:1;width:88%;max-width:460px;align-items:center;justify-content:center;}

/* ═══ STRIP ═══ */
.hpe-lp .strip {border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg2);transition:background .3s;}

.hpe-lp .strip-inner {max-width:1180px;margin:0 auto;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}

.hpe-lp .strip-inner h2 {font-size:.97rem;font-weight:700;}

.hpe-lp .strip-inner p {font-size:.85rem;color:var(--muted);}

.hpe-lp .strip-links {display:flex;gap:10px;flex-wrap:wrap;}

.hpe-lp .strip-links a {font-size:.84rem;font-weight:600;padding:8px 16px;border-radius:999px;border:1px solid var(--border);color:var(--txt2);transition:all .2s;}

.hpe-lp .strip-links a:hover {border-color:var(--accent);color:var(--txt);}

/* ═══ SECTIONS ═══ */
.hpe-lp .section {padding:88px 0;}

.hpe-lp .section.alt {background:var(--bg2);transition:background .3s;}

.hpe-lp .section-head {max-width:640px;margin-bottom:48px;}

.hpe-lp .section-head.center {margin-left:auto;margin-right:auto;text-align:center;max-width:700px;}

.hpe-lp .section-head .eyebrow {margin-bottom:14px;}

.hpe-lp .section-head p {color:var(--txt2);margin-top:14px;font-size:.98rem;}

/* ═══ WHY ═══ */
.hpe-lp .why-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}

.hpe-lp .why-card {background:var(--card);border:1px solid var(--border);border-radius:14px;padding:28px;transition:transform .2s,border-color .2s,background .3s;}

.hpe-lp .why-card:hover {transform:translateY(-4px);border-color:var(--accent);background:var(--card2);}

.hpe-lp .why-icon {font-size:1.55rem;margin-bottom:14px;}

.hpe-lp .why-card h3 {margin-bottom:8px;}

.hpe-lp .why-card p {font-size:.86rem;color:var(--txt2);}

/* ═══ PRODUCTS ═══ */
.hpe-lp .prod-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start;}

.hpe-lp .prod-card {background:var(--card);border:1px solid var(--border);border-radius:14px;padding:36px;display:flex;flex-direction:column;gap:0;transition:border-color .2s,background .3s;}

.hpe-lp .prod-card:hover {border-color:rgba(0,179,136,.4);}

.hpe-lp .prod-badge-col {display:grid;grid-template-columns: auto auto auto;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap;}

.hpe-lp .prod-level {font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:999px;border:1px solid;text-align:center;white-space:nowrap;line-height:1.4;}

.hpe-lp .level-entry {color:#22c55e;border-color:rgba(34,197,94,.4);background:rgba(34,197,94,.08);}

.hpe-lp .level-mid {color:var(--dh-blue);border-color:rgba(11,102,243,.4);background:rgba(11,102,243,.1);}

.hpe-lp .level-high {color:#f59e0b;border-color:rgba(245,158,11,.4);background:rgba(245,158,11,.08);}

.hpe-lp .prod-icon-box {margin: 0 auto;font-size:1.8rem;width:60px;height:60px;border-radius:14px;background:rgba(0,179,136,.1);border:1px solid rgba(0,179,136,.25);display:flex;align-items:center;justify-content:center;}

.hpe-lp .ff {font-size:.67rem;color:var(--muted);text-align:center;line-height:1.5;}

.hpe-lp .prod-tag {font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:8px;}

.hpe-lp .prod-img-wrap {width:100%;border-radius:10px;overflow:hidden;background:var(--bg2);border:1px solid var(--border);margin-bottom:18px;display:flex;align-items:center;justify-content:center;min-height:110px;padding:10px;}

.hpe-lp .prod-img-wrap img {width:100%;max-height:110px;object-fit:contain;filter:drop-shadow(0 4px 12px rgba(0,179,136,.2));}

.hpe-lp .prod-body h3 {font-size:1.3rem;margin-bottom:8px;}

.hpe-lp .prod-desc {font-size:.91rem;color:var(--txt2);margin-bottom:22px;}

.hpe-lp .specs-grid {display:flex;flex-direction:column;gap:0;margin-bottom:22px;border:1px solid var(--border);border-radius:10px;overflow:hidden;}

.hpe-lp .spec {display:flex;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid var(--border);background:transparent;transition:background .2s;}
.hpe-lp .spec:last-child {border-bottom:none;}
.hpe-lp .spec:hover {background:var(--bg2);}

.hpe-lp .spec-key {font-size:.72rem;color:var(--muted);font-weight:700;min-width:90px;flex-shrink:0;display:flex;align-items:center;gap:5px;white-space:nowrap;}

.hpe-lp .spec-val {font-size:.81rem;color:var(--txt);font-weight:500;flex:1;line-height:1.4;}

.hpe-lp .prod-ctas {display:flex;gap:12px;flex-wrap:wrap;}

/* ═══ SECTORS ═══ */
.hpe-lp .sector-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}

.hpe-lp .sector-card {background:var(--card);border:1px solid var(--border);border-radius:14px;padding:28px;transition:transform .2s,border-color .2s,background .3s;}

.hpe-lp .sector-card:hover {transform:translateY(-3px);border-color:var(--border2);}

.hpe-lp .sector-icon {font-size:1.7rem;margin-bottom:14px;}

.hpe-lp .sector-card h3 {font-size: .98rem; margin-bottom:8px;}

.hpe-lp .sector-card p {font-size:.84rem;color:var(--txt2);}

/* ═══ VIRT ═══ */
.hpe-lp .virt-grid {display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;}

.hpe-lp .virt-info .eyebrow {margin-bottom:14px;}

.hpe-lp .virt-info h2 {margin-bottom:14px;}

.hpe-lp .virt-info>p {color:var(--txt2);font-size:.94rem;margin-bottom:22px;}

.hpe-lp .tags {display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px;}

.hpe-lp .tag {display:inline-flex;align-items:center;padding:6px 14px;border-radius:999px;background:rgba(0,179,136,.1);border:1px solid rgba(0,179,136,.25);font-size:.77rem;font-weight:600;color:var(--teal);}

.hpe-lp .virt-card {background:var(--card);border:1px solid var(--border);border-radius:14px;padding:28px;transition:background .3s,border-color .3s;}

.hpe-lp .spec-list {display:flex;flex-direction:column;gap:8px;margin-bottom:22px;}

.hpe-lp .spec-row {display:flex;gap:12px;font-size:.82rem;}

.hpe-lp .sk {color:var(--muted);min-width:90px;flex-shrink:0;font-weight:500;}

.hpe-lp .sv {color:var(--txt);font-weight:600;}

/* ═══ WHICH ═══ */
.hpe-lp .which-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}

.hpe-lp .which-card {background:var(--card);border:1px solid var(--border);border-radius:14px;padding:28px;transition:background .3s,border-color .3s;}

.hpe-lp .which-icon {font-size:1.5rem;margin-bottom:14px;}

.hpe-lp .which-card h3 {font-size: .98rem; margin-bottom:8px;}

.hpe-lp .which-card p {font-size:.83rem;color:var(--txt2);}

.hpe-lp .which-cta {margin-top:48px;border-radius:20px;padding:44px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:linear-gradient(120deg,rgba(0,160,120,.75),rgba(0,179,136,.5));border:1px solid rgba(0,179,136,.35);}

.hpe-lp[data-theme="light"] .which-cta {background:linear-gradient(120deg,rgba(0,179,136,.1),rgba(0,179,136,.06));border-color:rgba(0,179,136,.25);}

.hpe-lp .which-cta h3 {font-size:1.25rem;margin-bottom:8px;}

.hpe-lp .which-cta p {font-size:.88rem;color:rgba(255,255,255,.82);}

.hpe-lp[data-theme="light"] .which-cta p {color:var(--txt2);}

.hpe-lp .which-actions {display:flex;gap:12px;flex-wrap:wrap;}

/* ═══ HOW ═══ */
.hpe-lp .how-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;}

.hpe-lp .how-grid::before {content:"";position:absolute;top:22px;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,var(--border2) 8%,var(--border2) 92%,transparent);}

.hpe-lp .how-step {padding-right:20px;position:relative;z-index:1;}

.hpe-lp .how-num {width:44px;height:44px;border-radius:50%;background:var(--card);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.88rem;color:var(--accent);margin-bottom:18px;transition:background .3s;}

.hpe-lp .how-step h3 {font-size: .98rem; margin-bottom:6px;}

.hpe-lp .how-step p {font-size:.84rem;color:var(--txt2);}

/* ═══ FAQ ═══ */
.hpe-lp .faq-list {display:flex;flex-direction:column;gap:12px;max-width:820px;margin:0 auto;}

.hpe-lp .faq-item {background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:background .3s,border-color .3s;}

.hpe-lp .faq-q {width:100%;background:none;border:none;padding:20px 24px;text-align:left;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-family:'Inter',sans-serif;font-size:.94rem;font-weight:700;color:var(--txt);gap:16px;}

.hpe-lp .faq-arr {font-size:1rem;color:var(--accent);flex-shrink:0;transition:transform .25s;}

.hpe-lp .faq-item.open .faq-arr {transform:rotate(180deg);}

.hpe-lp .faq-a {max-height:0;overflow:hidden;transition:max-height .35s ease;}

.hpe-lp .faq-item.open .faq-a {max-height:600px;}

.hpe-lp .faq-a-inner {padding:0 24px 20px;font-size:.87rem;color:var(--txt2);line-height:1.78;}

.hpe-lp .faq-a-inner a {color:var(--accent);}

.hpe-lp .faq-a-inner strong {color:var(--txt);}

/* ═══ RESELLERS ═══ */
.hpe-lp .resell-grid {display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;}

.hpe-lp .resell-info h2 {margin-bottom:14px;}

.hpe-lp .resell-info>p {color:var(--txt2);margin-bottom:26px;font-size:.93rem;}

.hpe-lp .perks {display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:28px;}

.hpe-lp .perk {background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px;transition:background .3s,border-color .3s;}

.hpe-lp .perk-icon {font-size:1.4rem;margin-bottom:10px;}

.hpe-lp .perk h3 {font-size:.87rem;margin-bottom:4px;}

.hpe-lp .perk p {font-size:.78rem;color:var(--muted);}

.hpe-lp .resell-actions {display:flex;gap:12px;flex-wrap:wrap;}

.hpe-lp .resell-card {background:linear-gradient(155deg,rgba(0,160,120,.35),var(--card));border:1px solid rgba(0,179,136,.3);border-radius:20px;padding:36px;text-align:center;transition:background .3s;}

.hpe-lp[data-theme="light"] .resell-card {background:linear-gradient(155deg,rgba(0,179,136,.07),var(--card));}

.hpe-lp .resell-big {font-size:2.8rem;margin-bottom:16px;}

.hpe-lp .resell-card h3 {font-size:1.1rem;margin-bottom:10px;}

.hpe-lp .resell-card p {font-size:.86rem;color:var(--txt2);margin-bottom:14px;}

/* ═══ FINAL CTA ═══ */
.hpe-lp .final-wrap {max-width:700px;margin:0 auto;padding:72px 32px;background:radial-gradient(ellipse at top,var(--glow),transparent 70%),var(--card);border:1px solid var(--border);border-radius:20px;text-align:center;transition:background .3s,border-color .3s;}

.hpe-lp .final-wrap .eyebrow {margin-bottom:16px;}

.hpe-lp .final-wrap h2 {margin-bottom:14px;}

.hpe-lp .final-wrap p {color:var(--txt2);margin-bottom:32px;}

/* ═══ FOOTER ═══ */
.hpe-lp footer {border-top:1px solid var(--border);padding:52px 0 28px;background:var(--bg2);transition:background .3s;}

.hpe-lp .footer-inner {display:flex;justify-content:space-between;flex-wrap:wrap;gap:36px;margin-bottom:40px;}

.hpe-lp .footer-col h3 {line-height: 1.25; font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:16px;font-weight:700;}

.hpe-lp .footer-col a,
.hpe-lp .footer-col p {display:block;font-size:.86rem;color:var(--txt2);margin-bottom:8px;font-weight:400;}

.hpe-lp .footer-col a:hover {color:var(--accent);}

.hpe-lp .footer-bottom {border-top:1px solid var(--border);padding-top:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:.78rem;color:var(--muted);}

.hpe-lp .social {display:flex;gap:12px;}

.hpe-lp .social a {width:34px;height:34px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.9rem;transition:border-color .2s;}

.hpe-lp .social a:hover {border-color:var(--accent);}

/* ═══ RESPONSIVE ═══ */
@media(max-width:1040px) {
.hpe-lp .nav-links {display:none;}

}

@media(max-width:900px) {
  .hpe-lp .hero-inner,
.hpe-lp .virt-grid,
.hpe-lp .resell-grid {grid-template-columns:1fr;}

  .hpe-lp .hero-visual {order:-1;aspect-ratio:16/9;max-height:280px;}

  .hpe-lp .hero h1 {font-size:clamp(1.8rem,5vw,2.4rem);}

  .hpe-lp .why-grid,
.hpe-lp .which-grid,
.hpe-lp .sector-grid {grid-template-columns:1fr 1fr;}

  .hpe-lp .how-grid {grid-template-columns:1fr 1fr;row-gap:36px;}

  .hpe-lp .how-grid::before {display:none;}

  .hpe-lp .specs-grid {grid-template-columns:1fr 1fr;}

  .hpe-lp .perks {grid-template-columns:1fr;}

.hpe-lp .prod-grid {grid-template-columns:1fr 1fr;}

}

@media(max-width:600px) {
  .hpe-lp .wrap {padding:0 16px;}

  .hpe-lp .section {padding:60px 0;}

  .hpe-lp .hero {padding:52px 0 44px;}

  .hpe-lp .hero h1 {font-size:clamp(1.6rem,6.5vw,2rem);}

  .hpe-lp .hero .lead {font-size:.96rem;}

  .hpe-lp .metrics {gap:22px;}

  .hpe-lp .metric-num {font-size:1.35rem;}

  .hpe-lp .nav {padding:0 16px;height:58px;}

  .hpe-lp .nav-wa {display:none;}

  .hpe-lp .toggle-btn {padding:6px 10px;font-size:.7rem;}

  .hpe-lp .nav-cta {padding:8px 14px;font-size:.8rem;}

  .hpe-lp .why-grid,
.hpe-lp .sector-grid,
.hpe-lp .which-grid {grid-template-columns:1fr;}

  .hpe-lp .how-grid {grid-template-columns:1fr;}

  .hpe-lp .specs-grid {grid-template-columns:1fr;}

  .hpe-lp .prod-card {grid-template-columns:1fr;padding:24px;}

  .hpe-lp .prod-badge-col {flex-direction:row;align-items:center;}

  .hpe-lp .which-cta {flex-direction:column;padding:24px;}

  .hpe-lp .btn {padding:11px 20px;font-size:.88rem;}

  .hpe-lp .btn-row {flex-direction:column;}

  .hpe-lp .btn-row>.btn {width:100%;justify-content:center;}

  .hpe-lp .faq-q {font-size:.88rem;padding:16px 18px;}

  .hpe-lp .faq-a-inner {padding:0 18px 16px;}

  .hpe-lp .footer-inner {flex-direction:column;gap:28px;}

  .hpe-lp .final-wrap {padding:44px 20px;}

.hpe-lp .prod-grid {grid-template-columns:1fr;}

}

@media(max-width:380px) {
  .hpe-lp .hero h1 {font-size:1.45rem;}

  .hpe-lp .nav-cta {padding:7px 12px;font-size:.76rem;}

  .hpe-lp .metrics {gap:16px;}

  .hpe-lp .metric-num {font-size:1.2rem;}

}

/* ══════════════════════════════════════════════════════════
   INTEGRACIÓN CON THE7
   La nav pasa de sticky a fixed y el JS sincroniza su "top"
   con el borde inferior del header de The7 (igual que asus/daas).
══════════════════════════════════════════════════════════ */
.hpe-lp header {
  position: fixed;
  top: 130px; /* fallback inicial; el JS lo sincroniza */
  left: 0; right: 0;
  z-index: 100;
  transition: background .3s, transform .3s ease;
}
.hpe-lp header.is-hidden { transform: translateY(-120%); }
/* La nav pasa a fixed, asi que el hero compensa lo que ocupaba en el flujo.
   >=1201px: The7 muestra su header de escritorio (100px) y el JS baja la nav ahi,
   con lo cual la nav tapa sus 65px del wrapper -> 65 + los 80px originales.
   <=1200px: The7 pasa a su header mobile (60px) y la nav queda pegada arriba,
   asi que solo hay que compensar los ~25px que sobresalen.
   En los tres casos quedan los mismos 80px entre la nav y el hero que en la landing original. */
.hpe-lp .hero { padding-top: 85px; }
@media (min-width: 1201px) { .hpe-lp .hero { padding-top: 145px; } }
@media (max-width: 600px)  { .hpe-lp .hero { padding-top: 52px; } }

/* Hamburguesa + menú mobile (no existían en el HTML standalone) */
.hpe-lp .hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
}
.hpe-lp .hamburger span {
  display: block;
  width: 22px; height: 2px;
  border-radius: 2px;
  background: var(--txt);
  transition: all .3s;
}
.hpe-lp .mobile-menu {
  display: none;
  position: fixed;
  top: 194px; /* fallback; el JS lo sincroniza al borde inferior de la nav */
  left: 0; right: 0;
  z-index: 99;
  flex-direction: column;
  gap: 14px;
  padding: 20px 24px;
  background: var(--nav-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
.hpe-lp .mobile-menu.open { display: flex; }
.hpe-lp .mobile-menu a {
  font-size: .95rem;
  font-weight: 600;
  color: var(--txt2);
}
.hpe-lp .mobile-menu a:hover { color: var(--accent); }

@media (max-width: 1040px) {
  .hpe-lp .hamburger { display: flex; }
}
@media (max-width: 900px) {
  .hpe-lp .nav-wa { display: none; }
}

/* La fila de la nav no entra en pantallas chicas: se aliviana */
@media (max-width: 700px) {
  .hpe-lp .nav { gap: 10px; }
  .hpe-lp .logo-meta { display: none; }
  .hpe-lp .logo svg { max-width: 110px; height: auto; }
  .hpe-lp .nav-cta { padding: 8px 12px; font-size: .78rem; }
}
@media (max-width: 430px) {
  .hpe-lp .nav-cta { display: none; }
}

/* >>> the7-color-inherit */

/* ══════════════════════════════════════════════════════════
   COLOR DE TÍTULOS
   The7 (y el kit de Elementor) pintan h1..h6 con su propio color de
   títulos, y esta hoja nunca les asigna uno: heredaban del tema en vez
   del wrapper y quedaban casi negros sobre el fondo oscuro.
   Especificidad (0,1,1) y sin !important, así que cualquier regla propia
   más específica (.fc h5, .hero h1 em, …) sigue mandando.
══════════════════════════════════════════════════════════ */
.hpe-lp h1,
.hpe-lp h2,
.hpe-lp h3,
.hpe-lp h4,
.hpe-lp h5,
.hpe-lp h6 {
  color: inherit;
}
/* <<< the7-color-inherit */