/* Estilos compartidos de q-pilot.ar. Fuente Inter guardada en /fuentes (nada se carga desde internet). */
@font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap; src: url(/fuentes/Inter-400-latin.woff2) format('woff2'); }
@font-face { font-family: Inter; font-style: normal; font-weight: 500; font-display: swap; src: url(/fuentes/Inter-500-latin.woff2) format('woff2'); }
@font-face { font-family: Inter; font-style: normal; font-weight: 600; font-display: swap; src: url(/fuentes/Inter-600-latin.woff2) format('woff2'); }
@font-face { font-family: Inter; font-style: normal; font-weight: 700; font-display: swap; src: url(/fuentes/Inter-700-latin.woff2) format('woff2'); }
@font-face { font-family: Inter; font-style: normal; font-weight: 800; font-display: swap; src: url(/fuentes/Inter-800-latin.woff2) format('woff2'); }
:root {
    --fondo: #07090e; --fondo-2: #090d16; --linea: rgba(148,163,184,.14); --texto: #f1f5f9; --suave: #94a3b8; --tenue: #64748b;
    --azul: #2563eb; --azul-claro: #60a5fa; --cian: #22d3ee; --verde: #25d366; --vidrio: rgba(15,23,42,.65);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--fondo); color: var(--texto); font-family: Inter, "Segoe UI", system-ui, sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--azul); color: #fff; }
.contenedor { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.degradado { background: linear-gradient(90deg, var(--azul-claro), #67e8f9 50%, #a5b4fc); -webkit-background-clip: text; background-clip: text; color: transparent; }
.resplandor { position: fixed; top: -120px; left: 50%; transform: translateX(-50%); width: 760px; height: 340px; background: rgba(37,99,235,.18); filter: blur(120px); pointer-events: none; z-index: -1; }

/* Encabezado */
header { position: sticky; top: 0; z-index: 40; background: rgba(7,9,14,.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--linea); }
header .contenedor { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.marca { display: flex; align-items: center; gap: 12px; }
.marca img { width: 40px; height: 40px; }
.marca b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.3px; line-height: 1.1; }
.marca small { display: block; font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--suave); }
nav { display: flex; gap: 30px; font-size: 14px; font-weight: 500; color: #cbd5e1; }
nav a:hover { color: #fff; }
@media (max-width: 860px) { nav { display: none; } }

/* Botones */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-size: 14px; font-weight: 700; border-radius: 12px; padding: 14px 26px; transition: transform .15s, background .2s, border-color .2s; }
.boton:active { transform: scale(.97); }
.boton svg { width: 18px; height: 18px; }
.boton-blanco { background: #fff; color: #0b1220; box-shadow: 0 12px 30px rgba(0,0,0,.35); }
.boton-blanco:hover { background: #e2e8f0; }
.boton-borde { border: 1px solid #334155; background: rgba(15,23,42,.6); color: #cbd5e1; }
.boton-borde:hover { border-color: #64748b; color: #fff; }
.boton-wa { background: var(--verde); color: #062b14; box-shadow: 0 10px 26px rgba(37,211,102,.22); }
.boton-wa:hover { background: #2fe476; }
.boton-chico { padding: 10px 18px; font-size: 13px; border-radius: 10px; }

/* Portada */
.portada { position: relative; padding: 96px 0 80px; text-align: center; background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size: 32px 32px; }
.insignia { display: inline-flex; align-items: center; gap: 9px; border: 1px solid rgba(59,130,246,.3); background: rgba(23,37,84,.4); color: #93c5fd; font-size: 12px; font-weight: 500; border-radius: 999px; padding: 7px 15px; margin-bottom: 30px; }
.insignia i { width: 8px; height: 8px; border-radius: 50%; background: var(--cian); animation: latir 2s ease-in-out infinite; }
@keyframes latir { 50% { opacity: .35; } }
h1 { font-size: clamp(38px, 6.4vw, 74px); font-weight: 800; letter-spacing: -2px; line-height: 1.08; max-width: 900px; margin: 0 auto; }
.bajada { max-width: 680px; margin: 24px auto 40px; font-size: 18px; color: var(--suave); }
.acciones { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.datos { margin-top: 80px; padding-top: 40px; border-top: 1px solid var(--linea); display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: left; }
.datos b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.5px; }
.datos span { display: block; font-size: 13px; color: var(--suave); margin-top: 4px; }
@media (max-width: 760px) { .datos { grid-template-columns: repeat(2, 1fr); } .acciones .boton { width: 100%; } }

/* Secciones */
section { padding: 96px 0; border-top: 1px solid var(--linea); }
.alterna { background: rgba(9,13,22,.5); }
.encabezado { max-width: 680px; margin-bottom: 56px; }
.encabezado .rotulo { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--azul-claro); }
.encabezado h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 700; letter-spacing: -1px; line-height: 1.15; margin-top: 8px; }
.encabezado p { color: var(--suave); margin-top: 12px; }
.grilla { display: grid; gap: 24px; }
.g2 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .g3 { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .g2 { grid-template-columns: 1fr; } }

/* Tarjetas de vidrio */
.vidrio { background: var(--vidrio); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.07); border-radius: 18px; padding: 32px; transition: border-color .3s, box-shadow .3s; }
.vidrio:hover { border-color: rgba(59,130,246,.35); box-shadow: 0 0 30px -6px rgba(37,99,235,.2); }
.vidrio h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.vidrio p { font-size: 15px; color: var(--suave); }

/* Productos */
.producto { display: flex; flex-direction: column; }
.producto .cabeza { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.numero { width: 50px; height: 50px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; border: 1px solid; }
.producto .cabeza img { width: 50px; height: 50px; }
.producto .tipo { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--tenue); }
.producto ul { list-style: none; margin: 18px 0 0; display: grid; gap: 7px; flex: 1; }
.producto li { font-size: 14px; color: #cbd5e1; padding-left: 22px; position: relative; }
.producto li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 7px; height: 7px; border-radius: 2px; background: var(--azul-claro); opacity: .8; }
.producto .pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--linea); }
.estado { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; }
.estado i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.enlace { font-size: 13px; font-weight: 700; color: var(--azul-claro); }
.enlace:hover { color: #93c5fd; }
.enlaces { display: flex; gap: 18px; align-items: center; }

/* Íconos */
.icono { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(59,130,246,.1); border: 1px solid rgba(59,130,246,.22); margin-bottom: 20px; }
.icono svg { width: 22px; height: 22px; stroke: var(--azul-claro); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Pasos */
.paso b { display: block; font-size: 42px; font-weight: 800; line-height: 1; margin-bottom: 18px; }

/* Infraestructura */
.infra { padding: 40px; border-radius: 20px; background: linear-gradient(135deg, #0f172a, #020617); border: 1px solid #1e293b; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 30px; }
.infra .texto { max-width: 560px; }
.infra h3 { font-size: 24px; font-weight: 700; margin-bottom: 8px; }
.infra p { font-size: 15px; color: var(--suave); }
.cajitas { display: grid; grid-template-columns: repeat(3, auto); gap: 12px; }
.cajitas div { padding: 16px 18px; border-radius: 12px; background: #0f172a; border: 1px solid #1e293b; text-align: center; }
.cajitas small { display: block; font-size: 12px; color: var(--suave); }
.cajitas b { display: block; font-size: 14px; margin-top: 2px; }
@media (max-width: 760px) { .infra { padding: 28px; } .cajitas { grid-template-columns: 1fr; width: 100%; } }

/* Quién */
.autor { display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center; max-width: 880px; }
.avatar { width: 104px; height: 104px; border-radius: 24px; display: flex; align-items: center; justify-content: center; font-size: 36px; font-weight: 800; background: linear-gradient(135deg, var(--azul), var(--cian)); color: #fff; box-shadow: 0 20px 40px -10px rgba(37,99,235,.45); }
.autor h3 { font-size: 26px; font-weight: 700; }
.autor .cargo { font-size: 14px; color: var(--azul-claro); font-weight: 600; margin: 2px 0 12px; }
.autor p { color: var(--suave); }
@media (max-width: 620px) { .autor { grid-template-columns: 1fr; } }

/* Contacto */
.contacto { text-align: center; padding: 64px 28px; border-radius: 24px; border: 1px solid rgba(59,130,246,.28); background: radial-gradient(circle at 50% 0, rgba(37,99,235,.22), transparent 60%), #0b1120; }
.contacto h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 700; letter-spacing: -1px; }
.contacto p { color: var(--suave); max-width: 560px; margin: 12px auto 32px; }

/* Pie */
footer { border-top: 1px solid var(--linea); background: #05070a; padding: 40px 0; font-size: 13px; color: var(--suave); }
footer .contenedor { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; }
footer .marca img { width: 28px; height: 28px; }
.legales { display: flex; flex-wrap: wrap; gap: 22px; }
.legales a:hover { color: #fff; }
.arrepentimiento { color: #e2e8f0; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* WhatsApp flotante */
.wa-flotante { position: fixed; right: 22px; bottom: 22px; z-index: 50; width: 58px; height: 58px; border-radius: 50%; background: var(--verde); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(37,211,102,.35); }
.wa-flotante svg { width: 30px; height: 30px; fill: #fff; }

/* Aparición al bajar (solo con JavaScript) */
.js .revelar { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.js .revelar.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .revelar { opacity: 1; transform: none; } .insignia i { animation: none; } html { scroll-behavior: auto; } }

/* Grilla de 4 (página de Calidad) */
.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .g4 { grid-template-columns: 1fr; } }

/* Pantalla de ejemplo dibujada (datos inventados) */
.pantalla { max-width: 760px; margin: 64px auto 0; text-align: left; background: #0b1120; border: 1px solid #1e293b; border-radius: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.55); overflow: hidden; }
.pantalla .barra { display: flex; gap: 6px; padding: 12px 14px; border-bottom: 1px solid #1e293b; }
.pantalla .barra span { width: 10px; height: 10px; border-radius: 50%; background: #334155; }
.pantalla .cuerpo { padding: 18px; display: grid; gap: 12px; }
.indicadores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.indicador { background: rgba(15,23,42,.8); border: 1px solid #1e293b; border-radius: 12px; padding: 12px; }
.indicador small { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--suave); }
.indicador b { display: block; font-size: 22px; margin-top: 4px; }
.punto { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.aviso { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: rgba(15,23,42,.8); border: 1px solid #1e293b; border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.aviso em { font-style: normal; font-size: 11px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }