/* =========================================================
   IN+ Instalación Integral — Styles (optimizado + performance)
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  --bg:#0b1220;
  --bg-2:#0e1628;
  --ink:#e9f1ff;
  --muted:#b7c6e6;
  --brand:#2b7cff;
  --brand-2:#19c2ff;
  --ok:#4ade80;
  --warn:#f59e0b;
  --danger:#fb7185;
  --shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.02);
  --radius:22px;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1180px,94vw); margin-inline:auto}

body{
  margin:0;
  font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);

  /* === Fondo blueprint (rejillas + SVG + glows + degradado) === */
  background:
    /* Rejilla fina (24px) — muy tenue */
    repeating-linear-gradient(0deg,  rgba(255,255,255,.020) 0, rgba(255,255,255,.020) 1px, transparent 1px, transparent 24px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.020) 0, rgba(255,255,255,.020) 1px, transparent 1px, transparent 24px),

    /* Rejilla principal (120px) — tenue */
    repeating-linear-gradient(0deg,  rgba(43,124,255,.12) 0, rgba(43,124,255,.12) 1.5px, transparent 1.5px, transparent 120px),
    repeating-linear-gradient(90deg, rgba(43,124,255,.12) 0, rgba(43,124,255,.12) 1.5px, transparent 1.5px, transparent 120px),

    /* Capa de cotas/arcos/fórmulas (SVG embebido) */
    url("data:image/svg+xml;utf8,\
      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'>\
        <defs>\
          <marker id='arr' viewBox='0 0 10 10' refX='9' refY='5' markerWidth='6' markerHeight='6' orient='auto-start-reverse'>\
            <path d='M 0 0 L 10 5 L 0 10 z' fill='%232b7cff' opacity='0.9'/>\
          </marker>\
          <style>\
            .d{stroke:%2319c2ff;stroke-width:1.6;opacity:.8}\
            .a{stroke:%23b7c6e6;stroke-width:1.2;opacity:.55;stroke-dasharray:6 8}\
            .t{fill:%23b7c6e6;opacity:.8;font-family:Montserrat, Arial, sans-serif;font-size:22px}\
          </style>\
        </defs>\
        <path class='a' d='M 50 650 Q 500 200 1100 250 T 1550 600' fill='none'/>\
        <path class='a' d='M 0 380 Q 400 540 820 460 T 1600 380' fill='none'/>\
        <line class='d' x1='140' y1='120' x2='1460' y2='120' marker-start='url(%23arr)' marker-end='url(%23arr)'/>\
        <text class='t' x='800' y='95' text-anchor='middle'>L = 9.60 m</text>\
        <line class='d' x1='200' y1='170' x2='200' y2='770' marker-start='url(%23arr)' marker-end='url(%23arr)'/>\
        <text class='t' x='222' y='470' transform='rotate(-90 222,470)'>H = 4.00 m</text>\
        <path class='a' d='M 320 230 H 1280 M 320 520 H 1280 M 560 180 V 780 M 1040 180 V 780' fill='none'/>\
        <text class='t' x='1220' y='250'>P = V · I  → 380V · 32A</text>\
        <text class='t' x='1240' y='290'>ΣI = I1 + I2 + …</text>\
        <text class='t' x='1220' y='330'>ΔT ≈ 7 °C</text>\
      </svg>"),

    /* Halos suaves + degradado base */
    radial-gradient(1200px 600px at 70% -10%, rgba(25,194,255,.10), transparent 60%),
    radial-gradient(1000px 800px at -20% 10%, rgba(43,124,255,.20), transparent 55%),
    linear-gradient(180deg,var(--bg),var(--bg-2));
  background-repeat: repeat, repeat, repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: auto, auto, auto, auto, cover, 100% 100%, 100% 100%, 100% 100%;

  /* PERF: evitamos 'fixed' (costoso al scroll) */
  background-attachment: scroll, scroll, scroll, scroll, scroll, scroll, scroll, scroll;

  background-blend-mode:overlay, overlay, overlay, overlay, normal, normal, normal, normal;
  overflow-x:hidden;
}

/* Velo oscuro sutil en toda la página (no interrumpe clicks) */
body::after{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:
    radial-gradient(1400px 800px at 50% 15%, rgba(0,0,0,.18), transparent 60%),
    radial-gradient(1200px 800px at 50% 85%, rgba(0,0,0,.20), transparent 65%);
}

/* ---------- NAV ---------- */
header{
  position:sticky; top:0; z-index:50; backdrop-filter: blur(10px);
  background:linear-gradient(180deg, rgba(11,18,32,.85), rgba(11,18,32,.55));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:10px 0}
.brand{display:flex; align-items:center; gap:14px}
.brand img{width:48px; height:48px; object-fit:contain; filter:drop-shadow(0 6px 16px rgba(43,124,255,.3))}
.brand .title{display:flex; flex-direction:column; line-height:1}
.brand .title b{font-weight:800; letter-spacing:.3px}
.brand .title span{font-size:12px; color:var(--muted)}
.nav a.btn{padding:10px 16px; border-radius:14px; background:linear-gradient(135deg,var(--brand),var(--brand-2)); font-weight:700; box-shadow:var(--shadow)}
.nav .links{display:none; gap:18px}
.nav .links a{color:var(--muted)}
@media (min-width:880px){.nav .links{display:flex}}

/* ---------- HERO ---------- */
.hero{position:relative; isolation:isolate; overflow:hidden}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background: radial-gradient(680px 460px at 24% 45%, rgba(0,0,0,.42), transparent 70%);
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:-1;
  background:
    radial-gradient(600px 320px at 10% 10%, rgba(43,124,255,.18), transparent 60%),
    radial-gradient(520px 280px at 90% 90%, rgba(25,194,255,.16), transparent 60%);
  animation: float 11s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}

.hero-inner{display:grid; gap:26px; padding:64px 0 36px}
@media (min-width:980px){.hero-inner{grid-template-columns:1.1fr .9fr; align-items:center; padding:82px 0 60px}}
.headline{font-size:clamp(28px,5vw,46px); font-weight:800; letter-spacing:.2px; color:#f7fbff; text-shadow:0 2px 14px rgba(0,0,0,.45)}
.sub{color:#cfe0ff; font-size:clamp(14px,2.2vw,18px)}
.highlight{background:linear-gradient(135deg,var(--brand),var(--brand-2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.cta-row{display:flex; gap:14px; flex-wrap:wrap; margin-top:10px}
.btn{display:inline-flex; align-items:center; gap:10px; padding:14px 18px; border-radius:16px; font-weight:700; border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow)}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-2)); box-shadow:0 10px 28px rgba(43,124,255,.42), 0 1px 0 rgba(255,255,255,.06) inset; border-color:rgba(255,255,255,.10)}
.btn.ghost{background:rgba(0,0,0,.32); border-color:rgba(255,255,255,.10)}
.trust{display:flex; flex-wrap:wrap; gap:18px; align-items:center; margin-top:22px; color:#dfe9ff}
.trust .bullet{display:flex; align-items:center; gap:10px}

/* ====== HERO video responsive ====== */
/* Panel: control por breakpoint para que el video no quede “al ras” en desktop */
.hero .panel{ overflow:hidden; }
@media (max-width:760px){ .hero .panel{ padding:0; } }
@media (min-width:1100px){ .hero .panel{ padding:12px; } }

/* Contenedor y video: NO recortar jamás (contain + altura natural) */
.hero-media{
  position: relative;
  width: 100%;
  aspect-ratio: auto;
  background:#000;
  border-radius: var(--radius);
  overflow: hidden;
}
.hero-media video{
  position: static;              /* sin absolute para no forzar recorte */
  display: block;
  width: 100%;
  height: auto;                  /* mantiene proporción real del archivo */
  object-fit: contain;           /* nunca recorta; agrega letterbox si hace falta */
  background:#000;
  border: 0;
}
@media (max-width:760px){ .hero-media{ max-height:420px; } }

/* ---------- Secciones / Cards ---------- */
.section{padding:54px 0; position:relative}
.section h2{font-size:clamp(22px,4.2vw,34px); margin:0 0 12px; color:#f5f8ff; text-shadow:0 2px 12px rgba(0,0,0,.45)}
.section p.lead{color:#d7e3ff; margin:0 0 26px}

.grid{display:grid; gap:16px}
@media (min-width:700px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.grid{grid-template-columns:repeat(3,1fr)}}

.card{
  background:rgba(15,27,47,.88);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius); padding:20px; box-shadow:0 20px 40px rgba(0,0,0,.35); position:relative; overflow:hidden
}
.card .icon{
  width:46px; height:46px; display:grid; place-items:center; border-radius:12px;
  background:linear-gradient(135deg,rgba(43,124,255,.2),rgba(25,194,255,.18));
  border:1px solid rgba(255,255,255,.12); margin-bottom:10px
}
.card h3{margin:6px 0 6px; font-size:18px; color:#fff}
.card p{color:#cdd9f6; margin:0}

/* ---------- Split / Panel ---------- */
.split{display:grid; gap:20px; align-items:center}
@media (min-width:960px){.split{grid-template-columns:1.1fr .9fr}}
.panel{
  background:rgba(12,20,36,.92);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius); padding:22px; box-shadow:0 18px 36px rgba(0,0,0,.32)
}

/* ---------- FAQ ---------- */
.faq .item{border:1px solid rgba(255,255,255,.10); background:rgba(0,0,0,.28); border-radius:16px; margin-bottom:12px; overflow:hidden}
.faq .q{display:flex; justify-content:space-between; gap:12px; padding:16px 18px; cursor:pointer; font-weight:600}
.faq .a{max-height:0; overflow:hidden; transition:max-height .35s ease; padding:0 18px}
.faq .item.open .a{max-height:240px; padding:0 18px 16px}

/* ---------- Footer ---------- */
footer{border-top:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg, rgba(10,16,29,.92), rgba(10,16,29,.98)); padding:26px 0 60px}
.foot{display:grid; gap:16px}
@media (min-width:820px){.foot{grid-template-columns:1.2fr 1fr 1fr}}
.mini{color:var(--muted); font-size:14px}

/* ---------- Reveal anims ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.reveal.show{opacity:1; transform:none}

/* ---------- WhatsApp float ---------- */
.wapp{
  position:fixed; right:18px; bottom:18px; width:56px; height:56px; border-radius:16px; display:grid; place-items:center;
  background:#25d366; color:white; font-weight:800; box-shadow:0 10px 30px rgba(0,0,0,.4); z-index:60
}
.wapp span{font-size:0}

/* ---------- Badge ---------- */
.badge{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:rgba(0,0,0,.40);
  border:1px solid rgba(255,255,255,.08); color:#dfe9ff; font-weight:600; font-size:12px}

/* ---------- Forms ---------- */
form{display:grid; gap:12px}
input, textarea, select{
  background:rgba(255,255,255,.06); color:var(--ink); border:1px solid rgba(255,255,255,.18); border-radius:12px; padding:14px; font:inherit
}
textarea{min-height:110px; resize:vertical}
.row{display:grid; gap:12px}
@media (min-width:760px){.row{grid-template-columns:1fr 1fr}}
.note{color:var(--muted); font-size:13px}

/* ---------- Gallery ---------- */
.gallery{display:grid; grid-template-columns:repeat(6,1fr); gap:8px}
.gallery div{aspect-ratio:1.1/1; border-radius:14px; background:linear-gradient(135deg, rgba(43,124,255,.18), rgba(255,255,255,.06)); border:1px solid rgba(255,255,255,.08)}
@media (max-width:860px){.gallery{grid-template-columns:repeat(3,1fr)}}

/* ---------- Mobile tuning / perf ---------- */
@media (max-width:760px){
  .container{width:min(100%, 92vw)}
  header .nav{padding:12px 0}
  .brand img{width:40px;height:40px}
  .brand .title b{font-size:16px}
  .brand .title span{font-size:11px}
  .headline{font-size:clamp(24px,7vw,32px); line-height:1.15; text-shadow:0 2px 16px rgba(0,0,0,.55)}
  .sub{font-size:15px}
  .hero-inner{padding:46px 0 24px}
  .section{padding:36px 0}
  .panel{padding:16px}
  .btn{padding:14px 16px; border-radius:14px}
  .btn.primary{width:100%}
  .btn.ghost{flex:1; background:rgba(0,0,0,.45)}
  .cta-row{gap:10px}
  .grid{grid-template-columns:1fr !important}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .faq .q{padding:14px 14px; font-size:15px}
  .mini{font-size:13px}
  .wapp{right:14px; bottom:14px; width:56px; height:56px; border-radius:14px}
  .trust{gap:12px}
  .trust .bullet{font-size:13px}
  .row{grid-template-columns:1fr !important}

  /* En móviles, evitamos backgrounds fijos pesados (ya forzado arriba) */
}

/* ---------- Ultrafine devices ---------- */
@media (max-width:380px){
  .headline{font-size:22px}
  .badge{font-size:11px}
  .gallery{grid-template-columns:1fr}
}

/* ---------- Accesibilidad ---------- */
@media (prefers-reduced-motion: reduce){
  .hero::after{animation:none}
  .reveal{transition:none}
}

/* ===== Desktop polish (mejora de composición) ===== */
@media (min-width: 1100px){
  .hero-inner{
    grid-template-columns: minmax(520px, 700px) 1fr;
    gap: 36px;
    align-items: center;
  }
  .hero .reveal:first-child{ max-width: 720px; }
  .headline{
    font-size: clamp(36px, 4.2vw, 56px);
    line-height: 1.06;
    margin: 0 0 8px;
  }
  .sub{ font-size: 18px; max-width: 60ch; }
  .panel{
    background: rgba(12,20,36,.55);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 30px 60px rgba(0,0,0,.35);
  }
  .hero-media{
    max-width: 640px;
    margin-left: auto;
    border-radius: 18px;
  }
  .badge{ transform: translateY(-2px); }
  .trust{ margin-top: 18px; gap: 14px; }
}

/* Scrim de contraste más fuerte detrás del texto en pantallas grandes */
@media (min-width: 1100px){
  .hero::before{
    background: radial-gradient(900px 520px at 24% 45%, rgba(0,0,0,.58), transparent 72%);
  }
}

/* =========================================================
   BLOQUE DE RENDIMIENTO
   - content-visibility para diferir render de secciones
   - Modo "perf-lite" para bajar efectos (activar con JS)
   - Opción de fondo raster en modo perf-lite (bg-blueprint.webp)
   ========================================================= */

/* Diferir el render de lo que no está en viewport */
.hero, .section, footer { content-visibility:auto; contain-intrinsic-size:800px; }

/* perf-lite: header sin blur, sombras más livianas, sin animaciones */
.perf-lite header{ backdrop-filter:none !important; background:rgba(11,18,32,.92) !important; }
.perf-lite .panel, .perf-lite .card, .perf-lite .wapp{ box-shadow:0 8px 20px rgba(0,0,0,.25) !important; }
.perf-lite .hero::after{ animation:none !important; }

/* perf-lite: fondo usando imagen raster (añadí assets/bg-blueprint.webp) */
.perf-lite body{
  background:
    repeating-linear-gradient(0deg, rgba(43,124,255,.10) 0, rgba(43,124,255,.10) 1px, transparent 1px, transparent 120px),
    repeating-linear-gradient(90deg, rgba(43,124,255,.10) 0, rgba(43,124,255,.10) 1px, transparent 1px, transparent 120px),
    url("assets/bg-blueprint.webp"),
    radial-gradient(1000px 600px at 70% -10%, rgba(25,194,255,.10), transparent 60%),
    radial-gradient(800px 600px at -20% 10%, rgba(43,124,255,.18), transparent 55%),
    linear-gradient(180deg,var(--bg),var(--bg-2)) !important;
  background-size:auto, auto, cover, 100% 100%, 100% 100%, 100% 100%;
  background-repeat:repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-attachment:scroll, scroll, scroll, scroll, scroll, scroll !important;
}