:root { --navy: #071d33; --navy2: #0e304d; --orange: #ff721b; --sky: #9bdcff; --paper: #f5f8fb; --ink: #12263a; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; color: var(--ink); background: var(--paper); line-height: 1.55; }
.topbar { min-height: 88px; padding: 0 clamp(24px, 6vw, 90px); display: flex; align-items: center; justify-content: space-between; background: var(--navy); color: #fff; position: relative; z-index: 10; }
.brand { display: flex; flex-direction: column; text-decoration: none; color: #fff; line-height: 1; }
.brand strong { font-size: 28px; }
.brand strong span, .eyebrow { color: var(--orange); }
.brand small { font-size: 9px; letter-spacing: 2.5px; margin-top: 5px; }
.topbar nav { display: flex; gap: 28px; align-items: center; }
.topbar nav a, footer a { color: #fff; text-decoration: none; }
.topbar nav a:hover, .topbar nav a:focus-visible { color: var(--sky); }
.menu-toggle { display: none; }
.hero { min-height: 620px; padding: 90px clamp(24px, 8vw, 120px); background: linear-gradient(125deg,var(--navy) 0%,#0b2945 72%,#154b6a 100%); color: #fff; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr); gap: 8vw; align-items: center; }
.eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 2px; }
.hero h1 { font-size: clamp(42px, 6vw, 78px); line-height: 1.02; margin: 18px 0 24px; max-width: 900px; }
.lead { font-size: 20px; color: #cdeeff; max-width: 720px; }
.cta { display: inline-block; margin-top: 20px; padding: 14px 24px; border-radius: 8px; background: var(--orange); color: #fff; text-decoration: none; font-weight: 700; }
.hero aside { border: 1px solid #35627f; border-radius: 20px; padding: 28px; display: grid; gap: 12px; background: #08223a; }
.hero aside span { color: var(--sky); font-size: 13px; }
.hero aside strong { font-size: 22px; border-top: 1px solid #244861; padding-top: 12px; }
.section { padding: 90px clamp(24px, 8vw, 120px); }
.section h2, .contact h2 { font-size: clamp(34px, 4vw, 54px); line-height: 1.08; margin: 10px 0 36px; }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cards article { padding: 28px; background: #fff; border: 1px solid #dbe5ed; border-radius: 18px; }
.cards article > b { color: var(--orange); }
.cards h3 { font-size: 21px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 9vw; background: #e8f1f7; }
.split p { font-size: 18px; }
.text-link { display:inline-block; margin-top:10px; color:#075f91; font-size:17px; font-weight:800; text-decoration:none; }
.text-link:hover,.text-link:focus-visible { text-decoration:underline; }
.contact { padding: 70px clamp(24px, 8vw, 120px); display: flex; justify-content: space-between; align-items: end; background: #fff; }
.contact div:last-child { display: grid; gap: 8px; text-align: right; }
.contact a { color: #0b5f91; font-size: 20px; }
footer { padding: 26px clamp(24px, 8vw, 120px); display: flex; justify-content: space-between; background: var(--navy); color: #b9d6e9; }
footer span:last-child { display: flex; gap: 22px; }
@media (max-width: 850px) {
  .topbar { min-height: 82px; padding: 14px 22px; }
  .menu-toggle { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 8px 12px; border: 1px solid #35627f; border-radius: 8px; background: #0e304d; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
  .menu-toggle:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
  .menu-icon { width: 20px; display: grid; gap: 4px; }
  .menu-icon span { display: block; height: 2px; border-radius: 2px; background: currentColor; }
  .topbar nav { display: none; position: absolute; top: 100%; left: 0; right: 0; padding: 10px 22px 18px; gap: 6px; flex-direction: column; align-items: stretch; background: var(--navy); border-top: 1px solid #244861; box-shadow: 0 12px 24px rgba(0,0,0,.22); }
  .topbar nav.is-open { display: flex; }
  .topbar nav a { min-height: 46px; padding: 11px 14px; border-radius: 8px; background: #0e304d; }
  .topbar nav .platform-link { background: var(--orange); color: #fff; font-weight: 800; }
  .topbar nav .platform-link:hover, .topbar nav .platform-link:focus-visible { background: #ff873e; color: #fff; }
  .hero { grid-template-columns: 1fr; padding-top: 64px; }
  .cards { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; }
  .contact { align-items: start; gap: 30px; flex-direction: column; }
  .contact div:last-child { text-align: left; }
}
@media (max-width: 520px) {
  .cards { grid-template-columns: 1fr; }
  .hero h1 { font-size: 40px; }
  footer { gap: 18px; flex-direction: column; }
}

/* BHP v6: identidad de la tarjeta y vista ilustrativa del dashboard. */
.brand img { display:block; width:190px; height:auto; }
.topbar { min-height:110px; gap:24px; }
.hero { position:relative; overflow:hidden; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:5vw; min-height:700px; padding-top:85px; padding-bottom:85px; background:radial-gradient(ellipse at 90% 35%,#163d57 0%,transparent 54%),linear-gradient(135deg,#041729,#0b2945); }
.hero::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.17; background-image:radial-gradient(#69b2d3 1px,transparent 1px); background-size:25px 25px; mask-image:linear-gradient(120deg,transparent 35%,#000); }
.hero-copy,.dashboard-scene { position:relative; z-index:1; min-width:0; }
.hero h1 { font-size:clamp(40px,4.8vw,70px); letter-spacing:-2px; line-height:1.07; }
.hero-signature { display:flex; align-items:center; gap:18px; }
.hero-signature .eyebrow { font-size:11px; line-height:1.6; max-width:240px; }
.growth-bars { height:54px; display:inline-flex; align-items:flex-end; gap:6px; flex-shrink:0; }
.growth-bars i { display:block; width:13px; background:var(--orange); border-radius:3px 3px 0 0; height:24px; }
.growth-bars i:nth-child(2) { height:39px; }.growth-bars i:nth-child(3) { height:54px; }
.hero .lead { font-size:19px; max-width:550px; color:#c6d8e5; }
.hero-actions { display:flex; align-items:center; gap:25px; flex-wrap:wrap; margin-top:28px; }
.hero-actions .cta { margin:0; color:#091c2d; }
.demo-cta { color:#fff; text-decoration:none; font-weight:bold; padding:12px 0; }
.demo-cta span { color:#ff8b3d; margin-left:7px; }.demo-cta:hover { text-decoration:underline; }
.hero-note { margin-top:27px; font-size:12px; color:#b5ccdc; letter-spacing:.4px; }
.dashboard-scene { perspective:1100px; padding:30px 0; }
.dashboard-glow { position:absolute; inset:5% -10%; border-radius:50%; background:#137594; filter:blur(90px); opacity:.24; }
.preview-dashboard { background:#f5f8fc; border:1px solid #728a9c; border-radius:16px; overflow:hidden; color:#17334a; transform:rotate(-5deg) rotateY(-9deg); box-shadow:0 35px 70px #0007,12px 12px 0 #ffffff07; }
.preview-top { padding:14px 18px; background:#102c44; color:#c4d8e6; display:flex; justify-content:space-between; align-items:center; font-size:12px; gap:10px; }
.preview-top b { color:white; font-size:19px; }.preview-tag { color:#ffc094; font-size:8px; letter-spacing:1px; border:1px solid #a36c48; padding:4px 7px; border-radius:4px; }
.preview-body { padding:24px; }.preview-label { font-size:8px; color:#587084; font-weight:bold; letter-spacing:1px; margin:0; }
.preview-body h2 { font-size:27px; margin:5px 0 0; letter-spacing:-.8px; }.preview-sub { font-size:10px; color:#637a8d; margin:3px 0 22px; }
.preview-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }.preview-metrics > div { background:#fff; border:1px solid #e0e8ef; padding:13px 10px; border-radius:8px; }
.preview-metrics span { display:block; font-size:8px; color:#5e7386; }.preview-metrics strong { display:block; font-size:27px; margin-top:5px; line-height:1.1; }.preview-metrics small { color:#ef802c; font-size:17px; }
.preview-chart { margin-top:14px; padding:16px; border:1px solid #e0e8ef; background:white; border-radius:9px; }.chart-title { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:10px; }.chart-title span { font-size:8px; color:#6a7e90; }
.chart-bars { height:115px; display:flex; align-items:flex-end; justify-content:space-around; gap:10px; margin-top:18px; background:repeating-linear-gradient(to top,#e9eff5 0,#e9eff5 1px,transparent 1px,transparent 28px); border-bottom:1px solid #d7e3ec; }.chart-bars i { display:block; height:var(--h); width:22px; background:#244e6c; border-radius:4px 4px 0 0; }.chart-bars i:nth-last-child(-n+3) { background:#fb862e; }
.chart-axis { display:flex; justify-content:space-between; font-size:8px; color:#748698; margin-top:6px; }.preview-action { display:flex; align-items:center; gap:10px; background:#e8f0f5; border-radius:8px; padding:13px; margin-top:14px; font-size:10px; }.preview-action div { flex:1; }.preview-action div span { display:block; font-size:9px; color:#607486; }.action-dot { width:8px; height:8px; border-radius:50%; background:#fb862e; }
.scene-caption { color:#b4cddb; font-size:11px; text-align:center; margin:30px 0 0; }.contact-name { font-size:25px; font-weight:bold; margin:0; }.contact-name + p { margin-top:6px; }
a:focus-visible { outline:3px solid #ff9c57; outline-offset:5px; }
@media(max-width:1100px) { .topbar nav { gap:17px; font-size:14px; }.hero { padding-left:6vw; padding-right:6vw; }.preview-body { padding:18px; } }
@media(max-width:850px) { .topbar { min-height:100px; }.brand img { width:175px; }.hero { grid-template-columns:1fr; padding:50px 28px 60px; gap:35px; }.hero-copy { max-width:620px; }.hero h1 { max-width:630px; font-size:clamp(40px,7vw,60px); }.dashboard-scene { width:100%; max-width:510px; margin:auto; padding:18px 12px; }.preview-dashboard { transform:rotate(-3deg); }.scene-caption { margin-top:25px; }.preview-body { padding:22px; } }
@media(max-width:400px) { .hero { padding-left:22px; padding-right:22px; }.hero h1 { font-size:39px; }.brand img { width:158px; }.hero-actions { gap:18px; }.preview-body { padding:15px; }.preview-tag { letter-spacing:0; }.preview-metrics { gap:5px; }.preview-metrics > div { padding:10px 7px; }.preview-body h2 { font-size:25px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* Luque Business IQ v7: identidad visible de la portada. */
.topbar { gap:24px; }
.brand { flex-shrink:0; }
.brand img { width:300px; height:auto; display:block; border-radius:8px; }
.preview-brand { display:flex; align-items:baseline; gap:4px; flex-wrap:wrap; }
.preview-brand strong { color:#ff8615; font-size:17px; }
.preview-tag { flex-shrink:0; }
@media (min-width:851px) and (max-width:1100px) {
  .topbar { padding-left:24px; padding-right:24px; gap:18px; }
  .brand img { width:240px; }
  .topbar nav { gap:12px; font-size:13px; }
}
@media (max-width:850px) {
  .topbar { padding:8px 22px; gap:14px; }
  .brand img { width:230px; }
}
@media (max-width:400px) {
  .topbar { padding:8px 14px; gap:8px; }
  .brand img { width:200px; }
  .menu-toggle { padding:8px; }
  .preview-top { padding:12px; gap:6px; }
  .preview-brand { font-size:10px; }
  .preview-brand b { font-size:16px; }
  .preview-tag { font-size:7px; padding:4px; }
}

/* Integra los márgenes del logo sobre el navy original del encabezado. */
.brand img { border-radius:0; mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 17%,#000 82%,transparent); mask-composite:intersect; }
/* Luque: tipografía geométrica de apoyo; el logo conserva su diseño. */
@font-face { font-family:'Luque Heading'; src:url('fonts/Rajdhani-SemiBold.ttf') format('truetype'); font-style:normal; font-weight:600; font-display:swap; }
@font-face { font-family:'Luque Heading'; src:url('fonts/Rajdhani-Bold.ttf') format('truetype'); font-style:normal; font-weight:700; font-display:swap; }
h1,h2,h3,.topbar nav,.menu-toggle,.cta,.demo-cta,.text-link,.contact-name { font-family:'Luque Heading',Arial,sans-serif; }
.hero h1 { font-weight:700; font-size:clamp(46px,5.2vw,76px); line-height:1.02; letter-spacing:-.025em; }
.section h2,.contact h2 { font-weight:700; font-size:clamp(38px,4.4vw,60px); line-height:1.04; letter-spacing:-.02em; }
.cards h3 { font-size:26px; font-weight:700; line-height:1.12; margin-top:18px; margin-bottom:14px; }
.topbar nav { font-size:17px; font-weight:600; }
.cta,.demo-cta,.text-link { font-size:19px; font-weight:700; }
.contact-name { font-size:29px; font-weight:700; }
.preview-body h2 { font-weight:700; letter-spacing:-.02em; }
@media (min-width:851px) and (max-width:1100px) { .topbar nav { font-size:15px; } }
@media (max-width:850px) { .hero h1 { font-size:clamp(44px,8vw,66px); } }
@media (max-width:400px) { .hero h1 { font-size:44px; } .hero-actions { gap:16px; } .cta,.demo-cta { font-size:18px; } }

/* Luque Business IQ v9: fondo aprobado de dashboards. */
.hero{background:#071d33 url('luque-dashboard-background.png') center center/cover no-repeat}
.hero::before{opacity:1;background:linear-gradient(90deg,rgba(3,18,33,.8),rgba(3,18,33,.15));mask-image:none}
.hero-copy{text-shadow:0 2px 12px #00101f}
.dashboard-glow{opacity:.12}
@media(max-width:850px){.hero{background-size:auto 100%;background-position:60% top}.hero::before{background:linear-gradient(180deg,rgba(3,18,33,.35),rgba(3,18,33,.65))}}