/* ============================================================ PLC 3D: Homepage (Inicio) rediseño fiel a referencias. Estilos scoped (prefijo i-). Reusa tokens de plc.css. ============================================================ */ /* tipografía de títulos: Manrope (cargada en el de index.html) */ :root{ --i-display:'Manrope','Sora',sans-serif; } .i-wide{ max-width:1700px; } .wrap.i-wide{ padding:0 clamp(20px,2.8vw,56px); } /* footer: 5 columnas (marca + Producto/Ecosistema/Legal/Soporte) sólo en index */ body > .footer .footer-grid{ grid-template-columns:1.6fr repeat(4,1fr); } @media (max-width:1080px){ body > .footer .footer-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:620px){ body > .footer .footer-grid{ grid-template-columns:1fr; } } /* ritmo vertical amplio y cinematográfico */ .i-sec{ position:relative; padding:clamp(86px,9vw,150px) 0; } .i-sec.tight{ padding:clamp(60px,6vw,96px) 0; } /* etiqueta técnica centrada con líneas a los lados */ .i-eyebrow-c{ display:flex; align-items:center; justify-content:center; gap:14px; font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.28em; text-transform:uppercase; color:var(--blue-2); } .i-eyebrow-c::before,.i-eyebrow-c::after{ content:""; width:60px; height:1px; background:linear-gradient(90deg,transparent,var(--line-blue)); } .i-eyebrow-c::after{ background:linear-gradient(90deg,var(--line-blue),transparent); } .i-eyebrow-c .dotc{ width:4px; height:4px; border-radius:50%; background:var(--blue); box-shadow:0 0 8px var(--blue-glow); } .i-h2{ font-family:var(--i-display); font-weight:800; letter-spacing:-.035em; line-height:1.02; font-size:clamp(38px,3.6vw,62px); text-wrap:balance; } .i-blue{ color:var(--blue-2); } .i-grad{ background:linear-gradient(100deg,var(--blue-2),var(--blue) 70%); -webkit-background-clip:text; background-clip:text; color:transparent; } /* ---------- mockup primitives ---------- */ .i-win{ position:relative; border-radius:16px; border:1px solid var(--line-2); overflow:hidden; background:linear-gradient(180deg,#0c1424,#080e1b); box-shadow:0 40px 100px -50px rgba(0,0,0,.9); } .i-win-bar{ display:flex; align-items:center; gap:10px; padding:11px 14px; border-bottom:1px solid var(--line); background:rgba(9,14,26,.9); } .i-dots{ display:flex; gap:6px; } .i-dots i{ width:11px; height:11px; border-radius:50%; display:block; } .i-tlight{ display:flex; gap:6px; } .i-tlight i{ width:11px; height:11px; border-radius:50%; display:block; } .i-win-brand{ display:flex; align-items:center; gap:9px; font-family:var(--display); font-weight:700; font-size:15px; } .i-win-brand b{ color:var(--blue-2); } .i-win-brand .sub{ font-family:var(--mono); font-weight:500; font-size:11px; letter-spacing:.18em; color:var(--dim); } .i-pill-sel{ display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--text); background:rgba(255,255,255,.04); border:1px solid var(--line-2); border-radius:8px; padding:6px 10px; } .i-pill-sel svg{ width:12px; height:12px; color:var(--dim); } .i-pill-sel .k{ color:var(--dim); font-size:11px; } .i-online{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; color:var(--cyan); } .i-online .dot{ width:6px; height:6px; } /* riel de iconos vertical */ .i-rail{ display:flex; flex-direction:column; gap:4px; padding:10px 8px; border-right:1px solid var(--line); background:rgba(7,11,20,.7); } .i-rail i{ width:34px; height:34px; border-radius:9px; display:grid; place-items:center; color:var(--dim); border:1px solid transparent; transition:.2s; } .i-rail i svg{ width:17px; height:17px; } .i-rail i.on{ color:var(--blue-2); background:var(--blue-soft); border-color:var(--line-blue); } /* viewport 3D con foto industrial */ .i-view{ position:relative; background:#06080f center/cover no-repeat; } .i-view .scrim{ position:absolute; inset:0; background:radial-gradient(70% 80% at 50% 40%,transparent,rgba(4,7,14,.55)); } /* callout / etiqueta de equipo en el visor */ .i-lbl{ position:absolute; z-index:3; display:flex; align-items:center; gap:8px; background:rgba(8,13,24,.86); backdrop-filter:blur(6px); border:1px solid var(--line-blue); border-radius:9px; padding:7px 11px; box-shadow:0 10px 26px -12px rgba(0,0,0,.8); } .i-lbl .led{ width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan); flex:none; } .i-lbl .lt{ font-family:var(--mono); font-weight:600; font-size:11px; letter-spacing:.06em; color:#fff; } .i-lbl .la{ font-family:var(--mono); font-size:10.5px; color:var(--cyan); margin-top:1px; } /* barra inferior estilo simulador */ .i-simbar{ display:flex; align-items:center; gap:12px; padding:11px 14px; border-top:1px solid var(--line); background:rgba(9,14,26,.92); flex-wrap:wrap; } .i-stat-run{ display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11.5px; font-weight:600; color:var(--ok); background:rgba(47,210,122,.1); border:1px solid rgba(47,210,122,.28); border-radius:7px; padding:5px 10px; } .i-stat-run .dot{ background:var(--ok); width:6px; height:6px; } .i-meta-mono{ font-family:var(--mono); font-size:11.5px; color:var(--muted); } .i-meta-mono b{ color:var(--text); font-weight:600; } .i-mini-sel{ display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px; color:var(--text); background:rgba(255,255,255,.04); border:1px solid var(--line-2); border-radius:7px; padding:5px 9px; } .i-mini-sel svg{ width:11px; height:11px; color:var(--dim); } .i-icbtn{ width:30px; height:30px; border-radius:8px; display:grid; place-items:center; color:var(--muted); border:1px solid var(--line-2); background:rgba(255,255,255,.03); } .i-icbtn svg{ width:15px; height:15px; } /* tanque HMI */ .i-tank{ position:relative; width:54px; height:90px; border-radius:10px 10px 12px 12px; border:1.5px solid var(--line-2); background:rgba(255,255,255,.03); overflow:hidden; } .i-tank .fill{ position:absolute; left:0; right:0; bottom:0; background:linear-gradient(180deg,#39e3d8,#1f9f8f); box-shadow:0 0 18px rgba(57,227,216,.4) inset; } .i-tank.blue .fill{ background:linear-gradient(180deg,var(--blue-2),var(--blue)); box-shadow:0 0 18px rgba(46,123,255,.4) inset; } .i-tank.grn .fill{ background:linear-gradient(180deg,#3fd07a,#1f8a52); } .i-tank .ln{ position:absolute; left:0; right:0; height:1px; background:rgba(255,255,255,.12); } /* segmento AUTO/MANUAL/RESET */ .i-seg{ display:inline-flex; border:1px solid var(--line-2); border-radius:8px; overflow:hidden; } .i-seg span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; padding:6px 11px; color:var(--dim); border-right:1px solid var(--line); } .i-seg span:last-child{ border-right:0; } .i-seg span.on{ background:rgba(47,210,122,.16); color:var(--ok); } /* =========================================================== HERO =========================================================== */ .i-hero{ position:relative; padding:clamp(44px,5vw,76px) 0 clamp(44px,4vw,64px); overflow:hidden; } .i-hero-grid{ display:grid; grid-template-columns:1fr 1.12fr; gap:clamp(28px,3vw,52px); align-items:center; min-height:780px; } .i-eyebrow-chip{ display:inline-flex; align-items:center; gap:9px; padding:8px 15px; border-radius:999px; border:1px solid var(--line-blue); background:var(--blue-soft); font-size:13px; color:var(--blue-2); font-weight:500; } .i-eyebrow-chip svg{ width:15px; height:15px; } .i-eyebrow-chip .sep{ color:var(--dim); } .i-h1{ font-family:var(--i-display); font-weight:800; letter-spacing:-.045em; line-height:.98; font-size:clamp(44px,5.2vw,84px); margin:26px 0 24px; text-wrap:balance; } .i-hero .i-lead{ color:var(--muted); font-size:clamp(17px,1.3vw,20px); line-height:1.6; max-width:46ch; } .i-hero-actions{ display:flex; gap:13px; margin-top:30px; flex-wrap:wrap; } .i-compat{ margin-top:36px; } .i-compat .lbl{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); } .i-brands{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; margin-top:14px; } .i-brand{ display:inline-flex; align-items:center; gap:9px; color:var(--muted); } .i-brand .ra{ width:26px; height:26px; border-radius:50%; border:1.5px solid var(--muted); display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:11px; letter-spacing:-.02em; } .i-brand .wm{ font-family:var(--display); font-weight:700; font-size:16px; letter-spacing:.02em; color:#cdd7e8; } .i-brand .wm.sie{ letter-spacing:.06em; } .i-brand .mmark{ display:flex; gap:1px; } .i-brand .mmark span{ width:9px; height:9px; background:#c4ccd9; clip-path:polygon(50% 0,100% 100%,0 100%); } .i-brand .wm.mit{ font-size:13px; line-height:1; } .i-brand .wm.mit small{ display:block; font-size:9px; letter-spacing:.14em; color:var(--dim); font-weight:600; } .i-chips{ display:flex; gap:9px; flex-wrap:wrap; margin-top:18px; } .i-chip{ display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:11px; border:1px solid var(--line-2); background:rgba(255,255,255,.025); font-size:13px; color:var(--muted); } .i-chip svg{ width:14px; height:14px; color:var(--blue-2); } .i-chip.lang{ font-family:var(--mono); font-size:12px; padding:7px 11px; } .i-chip.lang.ld svg{ color:#3fd07a; } .i-chip.lang.fbd svg{ color:#b88bff; } .i-chip.lang.sfc svg{ color:var(--blue-2); } .i-chip.lang.st svg{ color:var(--cyan); } /* composición visual derecha */ .i-stage{ position:relative; min-height:620px; } .i-stage .glowbg{ position:absolute; inset:-8% -4% -4% 6%; z-index:0; border-radius:24px; background:radial-gradient(60% 60% at 70% 30%,rgba(46,123,255,.16),transparent 65%); filter:blur(10px); } /* ventana simulador principal */ .i-sim-main{ position:absolute; top:0; right:0; width:74%; z-index:2; } .i-sim-main .body{ display:flex; } .i-sim-main .i-view{ flex:1; min-height:268px; } .i-perf{ position:absolute; top:46px; right:14px; z-index:4; width:172px; padding:13px 14px; border-radius:12px; background:rgba(8,13,24,.92); border:1px solid var(--line-2); box-shadow:0 16px 40px -18px rgba(0,0,0,.8); } .i-perf .pt{ font-family:var(--display); font-weight:700; font-size:13px; margin-bottom:11px; } .i-perf .row{ display:flex; align-items:center; gap:9px; margin-top:9px; } .i-perf .row .k{ font-family:var(--mono); font-size:11px; color:var(--muted); width:26px; } .i-perf .bar{ flex:1; height:6px; border-radius:4px; background:rgba(255,255,255,.08); overflow:hidden; } .i-perf .bar i{ display:block; height:100%; border-radius:4px; background:linear-gradient(90deg,var(--blue),var(--blue-2)); } .i-perf .row .v{ font-family:var(--mono); font-size:11px; color:var(--blue-2); width:32px; text-align:right; } /* ventana generador (abajo-izq) */ .i-gen{ position:absolute; bottom:6%; left:0; width:46%; z-index:5; } .i-gen .hd{ display:flex; align-items:center; justify-content:space-between; padding:10px 13px; border-bottom:1px solid var(--line); background:rgba(9,14,26,.9); } .i-gen .hd .t{ display:flex; align-items:center; gap:8px; font-family:var(--display); font-weight:600; font-size:13px; } .i-gen .hd .ia{ font-family:var(--mono); font-size:10px; color:var(--cyan); border:1px solid var(--cyan-soft); border-radius:6px; padding:2px 7px; } .i-gen .canvas{ background:#0a1018; padding:14px 10px; } /* panel HMI builder (der) */ .i-hmi{ position:absolute; top:30%; right:-3%; width:33%; z-index:6; } .i-hmi .hd{ display:flex; align-items:center; justify-content:space-between; padding:11px 13px; border-bottom:1px solid var(--line); background:rgba(9,14,26,.92); } .i-hmi .hd .t{ display:flex; align-items:center; gap:8px; font-family:var(--display); font-weight:600; font-size:13px; } .i-hmi .hd .sv{ font-family:var(--mono); font-size:10px; color:var(--ok); display:inline-flex; align-items:center; gap:5px; } .i-hmi .bd{ display:flex; } .i-hmi .bd .mini-rail{ display:flex; flex-direction:column; gap:8px; padding:12px 9px; border-right:1px solid var(--line); color:var(--dim); } .i-hmi .bd .mini-rail svg{ width:15px; height:15px; } .i-hmi .bd .content{ flex:1; padding:14px; } .i-hmi .gauge-row{ display:flex; gap:13px; align-items:center; } .i-kv{ font-family:var(--mono); } .i-kv .k{ font-size:10px; color:var(--dim); letter-spacing:.04em; } .i-kv .v{ font-family:var(--display); font-weight:800; font-size:22px; line-height:1.1; } .i-kv .s{ font-size:10.5px; color:var(--cyan); margin-top:2px; } /* tarjeta analizador (abajo-der) */ .i-anz{ position:absolute; bottom:0; right:9%; width:30%; z-index:7; padding:14px 15px; border-radius:13px; background:linear-gradient(180deg,#101a30,#0a1120); border:1px solid var(--line-2); box-shadow:0 22px 50px -24px rgba(0,0,0,.85); } .i-anz .top{ display:flex; align-items:center; gap:9px; } .i-anz .ic{ width:30px; height:30px; border-radius:8px; display:grid; place-items:center; color:var(--blue-2); background:var(--blue-soft); border:1px solid var(--line-blue); } .i-anz .ic svg{ width:16px; height:16px; } .i-anz .tt{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:var(--dim); text-transform:uppercase; } .i-anz .vv{ font-family:var(--display); font-weight:700; font-size:14px; } .i-anz p{ font-size:11.5px; color:var(--muted); margin-top:8px; line-height:1.4; } /* loxi + etiqueta */ .i-loxi{ position:absolute; left:30%; top:34%; z-index:8; width:30%; filter:drop-shadow(0 30px 50px rgba(46,123,255,.45)); animation:iFloat 6s ease-in-out infinite; } .i-loxi-lab{ position:absolute; left:22%; top:50%; z-index:9; background:rgba(8,13,24,.9); border:1px solid var(--line-2); border-radius:11px; padding:9px 13px; box-shadow:var(--shadow); } .i-loxi-lab .nm{ font-family:var(--display); font-weight:800; font-size:14px; color:var(--blue-2); letter-spacing:.02em; } .i-loxi-lab .ds{ font-size:11px; color:var(--muted); margin-top:1px; } @keyframes iFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12px) } } /* =========================================================== BARRA DE MÉTRICAS =========================================================== */ .i-metrics{ display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:var(--r-lg); background:linear-gradient(180deg,rgba(18,26,46,.6),rgba(10,16,28,.6)); overflow:hidden; } .i-metric{ display:flex; align-items:center; gap:18px; padding:26px 28px; border-left:1px solid var(--line); } .i-metric:first-child{ border-left:0; } .i-metric .mi{ width:46px; height:46px; flex:none; border-radius:12px; display:grid; place-items:center; color:var(--blue-2); border:1px solid var(--line-blue); background:var(--blue-soft); } .i-metric .mi svg{ width:24px; height:24px; } .i-metric .mn{ font-family:var(--display); font-weight:800; font-size:30px; line-height:1; letter-spacing:-.02em; } .i-metric .ml{ color:var(--muted); font-size:13px; margin-top:5px; line-height:1.35; } /* =========================================================== ECOSISTEMA =========================================================== */ .i-eco-head{ text-align:center; max-width:880px; margin:0 auto 46px; } .i-eco-head .i-h2{ margin:18px 0 16px; } .i-eco-head p{ color:var(--muted); font-size:17px; line-height:1.6; max-width:62ch; margin:0 auto; } .i-eco-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; } .i-eco-card{ position:relative; border:1px solid var(--line); border-radius:var(--r-lg); background:linear-gradient(180deg,var(--panel-2),var(--panel)); padding:20px; display:flex; flex-direction:column; transition:.25s; } .i-eco-card:hover{ border-color:var(--line-blue); transform:translateY(-4px); box-shadow:0 30px 60px -34px var(--blue-glow); } .i-eco-num{ position:absolute; top:30px; left:30px; z-index:5; width:26px; height:26px; border-radius:8px; display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:13px; color:#fff; background:linear-gradient(180deg,var(--blue-2),var(--blue)); box-shadow:0 6px 16px -6px var(--blue-glow); } .i-eco-mock{ border-radius:12px; overflow:hidden; border:1px solid var(--line-2); height:220px; background:#0a1018; position:relative; } .i-eco-card h3{ font-family:var(--display); font-weight:700; font-size:21px; margin:20px 0 10px; } .i-eco-card p{ color:var(--muted); font-size:14.5px; line-height:1.6; flex:1; } .i-eco-badges{ display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; } .i-eco-badges span{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--muted); border:1px solid var(--line-2); border-radius:8px; padding:5px 9px; background:rgba(255,255,255,.02); } .i-eco-badges svg{ width:12px; height:12px; color:var(--blue-2); } /* mockup mini ecosistema: HMI */ .i-mock-hmi{ display:flex; flex-direction:column; height:100%; } .i-mock-hmi .tabs{ display:flex; gap:7px; padding:8px 10px; border-bottom:1px solid var(--line); background:rgba(9,14,26,.85); } .i-mock-hmi .tabs span{ font-family:var(--mono); font-size:9px; color:var(--dim); } .i-mock-hmi .body{ display:flex; flex:1; } .i-mock-hmi .leftcol{ display:flex; flex-direction:column; gap:9px; padding:11px 9px; font-family:var(--mono); font-size:8.5px; } .i-mock-hmi .leftcol .st{ display:flex; align-items:center; gap:5px; color:var(--dim); } .i-mock-hmi .leftcol .st i{ width:5px; height:5px; border-radius:50%; } .i-mock-hmi .main{ flex:1; padding:12px 8px; } /* mockup mini: diagrama (lienzo blanco) */ .i-mock-dia{ display:flex; flex-direction:column; height:100%; } .i-mock-dia .tb{ display:flex; gap:8px; padding:7px 10px; border-bottom:1px solid var(--line); background:rgba(9,14,26,.85); font-family:var(--mono); font-size:8.5px; color:var(--dim); } .i-mock-dia .paper{ flex:1; background:#f4f6f8; position:relative; background-image:linear-gradient(rgba(0,40,90,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(0,40,90,.06) 1px,transparent 1px); background-size:11px 11px; } /* mockup mini: analizador */ .i-mock-anz{ display:flex; flex-direction:column; height:100%; font-size:9px; } .i-mock-anz .hd{ display:flex; align-items:center; justify-content:space-between; padding:9px 11px; border-bottom:1px solid var(--line); background:rgba(9,14,26,.85); } .i-mock-anz .hd .t{ font-family:var(--display); font-weight:600; font-size:11px; } .i-mock-anz .hd .ok{ font-family:var(--mono); font-size:8px; color:var(--ok); display:inline-flex; align-items:center; gap:4px; } .i-mock-anz .cols{ display:flex; flex:1; } .i-mock-anz .c1{ flex:1; padding:11px; border-right:1px solid var(--line); } .i-mock-anz .c2{ flex:1; padding:11px; } .i-mock-anz .big{ font-family:var(--display); font-weight:800; font-size:18px; } .i-mock-anz .lvl{ display:flex; align-items:center; gap:6px; margin-top:7px; font-family:var(--mono); font-size:9px; } .i-mock-anz .lvl i{ width:6px; height:6px; border-radius:50%; } .i-mock-anz .kv{ display:flex; justify-content:space-between; margin-top:6px; font-family:var(--mono); font-size:8.5px; color:var(--muted); } .i-mock-anz .kv b{ color:var(--text); font-weight:600; } /* ghost tech frames flanking ecosistema eyebrow */ .i-eco-techline{ display:flex; align-items:center; justify-content:center; gap:0; width:100%; margin-bottom:12px; } .i-eco-techline .tl-ghost{ width:56px; height:56px; flex:none; border-radius:14px; display:grid; place-items:center; border:1px solid var(--line-blue); background:rgba(14,20,36,.7); color:var(--blue-2); } .i-eco-techline .tl-line{ flex:1; height:1px; background:var(--line-blue); max-width:120px; } .i-eco-techline .tl-dot{ width:6px; height:6px; flex:none; border-radius:50%; background:var(--blue-2); box-shadow:0 0 8px var(--blue-glow); margin:0 6px; } /* línea conectora entre tarjetas */ .i-eco-connector{ position:relative; margin:0 0 0; height:32px; display:flex; align-items:center; } .i-eco-connector .line{ position:absolute; left:12.5%; right:12.5%; top:50%; height:1px; background:linear-gradient(90deg,transparent 0%,var(--line-blue) 8%,var(--line-blue) 92%,transparent 100%); } .i-eco-connector .dots{ position:absolute; left:12.5%; right:12.5%; top:50%; display:flex; justify-content:space-between; transform:translateY(-50%); } .i-eco-connector .dots span{ width:8px; height:8px; border-radius:50%; background:var(--blue-2); box-shadow:0 0 10px var(--blue-glow); display:block; flex:none; } /* conector */ .i-eco-link{ display:flex; justify-content:center; margin:20px 0 0; } .i-eco-link .pill{ display:inline-flex; align-items:center; gap:11px; padding:14px 24px; border-radius:999px; border:1px solid var(--line-blue); background:linear-gradient(180deg,rgba(18,26,46,.7),rgba(10,16,28,.7)); font-family:var(--display); font-weight:600; font-size:16px; box-shadow:0 18px 44px -24px var(--blue-glow); } .i-eco-link .pill svg{ width:18px; height:18px; color:var(--blue-2); } /* tira de beneficios inferior */ .i-benstrip{ position:relative; margin-top:34px; border:1px solid var(--line); border-radius:var(--r-lg); background:rgba(10,16,28,.5); padding:28px 30px; display:grid; grid-template-columns:repeat(4,1fr); gap:26px; } .i-benstrip .ben{ display:flex; gap:14px; align-items:flex-start; } .i-benstrip .ben .ic{ width:40px; height:40px; flex:none; border-radius:11px; display:grid; place-items:center; color:var(--blue-2); border:1px solid var(--line-2); background:rgba(255,255,255,.02); } .i-benstrip .ben .ic svg{ width:20px; height:20px; } .i-benstrip .ben h5{ font-family:var(--display); font-weight:600; font-size:15px; } .i-benstrip .ben p{ color:var(--muted); font-size:13px; margin-top:4px; line-height:1.45; } .i-eco-loxi{ position:absolute; right:-18px; bottom:-10px; width:120px; z-index:3; filter:drop-shadow(0 18px 30px rgba(46,123,255,.4)); pointer-events:none; } /* =========================================================== SIMULADOR EN LA NUBE =========================================================== */ .i-simsec{ display:grid; grid-template-columns:0.68fr 1.32fr; gap:clamp(28px,3vw,52px); align-items:start; padding-top:8px; } .i-eyebrow-pill{ display:inline-flex; align-items:center; gap:11px; font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); } .i-eyebrow-pill .tag{ font-family:var(--display); font-weight:800; font-size:12px; letter-spacing:0; color:var(--blue-2); border:1px solid var(--line-blue); border-radius:7px; padding:3px 8px; background:var(--blue-soft); } .i-eyebrow-pill .tag b{ color:#fff; } .i-simsec .i-h2{ margin:20px 0 18px; } .i-simsec .i-lead{ color:var(--muted); font-size:17px; line-height:1.6; max-width:44ch; } .i-sim-hi{ display:flex; gap:30px; flex-wrap:wrap; margin-top:30px; } .i-sim-hi .hi{ display:flex; gap:11px; align-items:center; } .i-sim-hi .hi .ic{ width:32px; height:32px; flex:none; border-radius:9px; display:grid; place-items:center; color:var(--blue-2); border:1px solid var(--line-2); background:rgba(255,255,255,.02); } .i-sim-hi .hi .ic svg{ width:17px; height:17px; } .i-sim-hi .hi .hv{ font-family:var(--display); font-weight:700; font-size:14px; } .i-sim-hi .hi .hl{ font-size:11.5px; color:var(--dim); } .i-bigsim .body{ display:flex; } .i-bigsim .i-view{ flex:1; min-height:460px; } .i-bigsim-top{ display:flex; align-items:center; gap:14px; padding:12px 16px; border-bottom:1px solid var(--line); background:rgba(9,14,26,.92); flex-wrap:wrap; } .i-bigsim-top .right{ margin-left:auto; display:flex; align-items:center; gap:9px; } .i-zoom{ font-family:var(--mono); font-size:11px; color:var(--muted); } .i-simcards{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:26px; } .i-simcard{ border:1px solid var(--line); border-radius:var(--r-lg); background:linear-gradient(180deg,var(--panel-2),var(--panel)); padding:26px 24px; display:flex; gap:20px; align-items:flex-start; } .i-simcard .ic{ width:48px; height:48px; flex:none; border-radius:12px; display:grid; place-items:center; color:var(--blue-2); border:1px solid var(--line-2); background:rgba(255,255,255,.02); margin-top:2px; } .i-simcard .ic svg{ width:24px; height:24px; } .i-simcard .body{ flex:1; } .i-simcard h4{ font-family:var(--display); font-weight:700; font-size:17px; } .i-simcard p{ color:var(--muted); font-size:13.5px; margin-top:7px; line-height:1.5; } .i-simcard .accent{ height:2px; width:40px; margin-top:14px; border-radius:2px; background:linear-gradient(90deg,var(--blue),transparent); } /* =========================================================== COMUNIDAD =========================================================== */ .i-com-grid{ display:grid; grid-template-columns:1fr 1.12fr; gap:42px; align-items:start; } .i-com-eyebrow{ font-family:var(--mono); font-size:12.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--blue-2); display:inline-flex; align-items:center; gap:9px; } .i-com-eyebrow svg{ width:18px; height:18px; } .i-com-eyebrow span{ color:var(--dim); } .i-com-grid .i-h2{ margin:18px 0 18px; } .i-com-lead{ color:var(--muted); font-size:16.5px; line-height:1.6; max-width:46ch; } .i-com-mini{ display:flex; flex-wrap:wrap; gap:22px 30px; margin:26px 0 28px; } .i-com-mini .m{ display:inline-flex; align-items:center; gap:9px; font-size:13.5px; color:var(--text); } .i-com-mini .m svg{ width:18px; height:18px; color:var(--blue-2); } .i-tcards{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .i-tcard{ border:1px solid var(--line); border-radius:14px; background:linear-gradient(180deg,var(--panel-2),var(--panel)); padding:18px; display:flex; flex-direction:column; } .i-tcard .tphd{ display:flex; align-items:flex-start; justify-content:space-between; } .i-tcard .stars{ display:flex; gap:2px; color:#f5b544; } .i-tcard .stars svg{ width:13px; height:13px; } .i-tcard .qmark{ font-family:var(--display); font-weight:800; font-size:26px; color:var(--line-2); line-height:.6; } .i-tcard .q{ font-size:12.5px; line-height:1.55; color:var(--muted); margin:11px 0 0; flex:1; } .i-tcard .q b{ color:var(--blue-2); font-weight:600; } .i-tcard .who{ display:flex; align-items:center; gap:10px; margin-top:15px; } .i-tcard .av{ width:34px; height:34px; border-radius:50%; flex:none; display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:12px; color:#fff; } .i-tcard .nm{ font-family:var(--display); font-weight:600; font-size:13px; } .i-tcard .ro{ font-size:11px; color:var(--dim); } .i-tcard .badge{ display:inline-flex; align-items:center; gap:6px; margin-top:13px; font-family:var(--mono); font-size:10px; color:var(--blue-2); border:1px solid var(--line-blue); border-radius:7px; padding:5px 9px; background:var(--blue-soft); align-self:flex-start; } /* panel comunidad */ .i-companel{ border:1px solid var(--line-2); border-radius:var(--r-lg); background:linear-gradient(180deg,#0e1626,#0a111e); overflow:hidden; } .i-companel .ph{ display:flex; align-items:flex-start; gap:14px; padding:22px 24px; } .i-companel .ph .ic{ width:46px; height:46px; flex:none; border-radius:12px; display:grid; place-items:center; color:var(--blue-2); border:1px solid var(--line-blue); background:var(--blue-soft); } .i-companel .ph .ic svg{ width:23px; height:23px; } .i-companel .ph h3{ font-family:var(--display); font-weight:700; font-size:21px; } .i-companel .ph p{ color:var(--muted); font-size:13.5px; margin-top:4px; max-width:42ch; } .i-companel .ph .vc{ margin-left:auto; white-space:nowrap; } .i-comstats{ display:grid; grid-template-columns:repeat(4,1fr); margin:0 24px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.02); overflow:hidden; } .i-comstat{ display:flex; align-items:center; gap:11px; padding:16px 16px; border-left:1px solid var(--line); } .i-comstat:first-child{ border-left:0; } .i-comstat .ic{ color:var(--dim); } .i-comstat .ic svg{ width:20px; height:20px; } .i-comstat .sn{ font-family:var(--display); font-weight:800; font-size:20px; line-height:1; } .i-comstat .sl{ font-size:11px; color:var(--dim); margin-top:3px; } .i-comtabs{ display:flex; align-items:center; gap:6px; padding:18px 24px 10px; } .i-comtabs .tab{ font-size:13px; font-weight:600; color:var(--muted); padding:8px 13px; border-radius:9px; background:none; border:0; font-family:var(--body); } .i-comtabs .tab.active{ color:#fff; background:var(--blue-soft); border:1px solid var(--line-blue); } .i-comtabs .all{ margin-left:auto; font-family:var(--mono); font-size:12px; color:var(--blue-2); } .i-prj{ display:flex; align-items:center; gap:14px; padding:13px 24px; border-top:1px solid var(--line); } .i-prj .thumb{ width:74px; height:52px; flex:none; border-radius:9px; overflow:hidden; border:1px solid var(--line-2); background:#0a1018; } .i-prj .thumb img{ width:100%; height:100%; object-fit:cover; } .i-prj .info{ flex:1; min-width:0; } .i-prj .info .t{ font-family:var(--display); font-weight:600; font-size:14px; } .i-prj .info .meta{ font-family:var(--mono); font-size:11px; color:var(--dim); margin-top:2px; } .i-prj .tags{ display:flex; gap:6px; margin-top:7px; flex-wrap:wrap; } .i-prj .tags span{ font-family:var(--mono); font-size:9.5px; color:var(--muted); border:1px solid var(--line-2); border-radius:6px; padding:2px 7px; } .i-prj .tags span.b{ color:var(--blue-2); border-color:var(--line-blue); background:var(--blue-soft); } .i-prj .who{ display:flex; align-items:center; gap:8px; flex:none; } .i-prj .who .av{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:10px; color:#fff; } .i-prj .who .nm{ font-size:11.5px; font-weight:600; } .i-prj .who .tm{ font-family:var(--mono); font-size:10px; color:var(--dim); } .i-prj .react{ display:flex; gap:12px; flex:none; font-family:var(--mono); font-size:11px; color:var(--dim); } .i-prj .react span{ display:inline-flex; align-items:center; gap:4px; } .i-prj .react svg{ width:12px; height:12px; } .i-com-foot{ display:flex; align-items:center; gap:12px; padding:16px 24px; border-top:1px solid var(--line); background:rgba(255,255,255,.015); } .i-com-foot .lk{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--muted); } .i-com-foot .lk svg{ width:17px; height:17px; color:var(--blue-2); } .i-com-foot .up{ margin-left:auto; font-family:var(--mono); font-size:12.5px; color:var(--blue-2); display:inline-flex; align-items:center; gap:7px; } .i-com-foot .up svg{ width:14px; height:14px; } /* tira métricas comunidad */ .i-com-strip{ margin-top:30px; border:1px solid var(--line); border-radius:var(--r-lg); background:rgba(10,16,28,.5); padding:30px; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; } .i-com-strip .cell{ display:flex; gap:16px; align-items:center; } .i-com-strip .cell .ic{ width:54px; height:54px; flex:none; border-radius:50%; display:grid; place-items:center; color:var(--blue-2); border:1px solid var(--line-2); background:rgba(255,255,255,.02); } .i-com-strip .cell .ic svg{ width:24px; height:24px; } .i-com-strip .cell .cn{ font-family:var(--display); font-weight:800; font-size:26px; color:var(--blue-2); line-height:1; } .i-com-strip .cell .ct{ font-family:var(--display); font-weight:600; font-size:14px; margin-top:3px; } .i-com-strip .cell .cd{ font-size:12px; color:var(--dim); margin-top:2px; } .i-com-close{ text-align:center; margin-top:24px; display:flex; align-items:center; justify-content:center; gap:10px; font-size:15px; color:var(--muted); } .i-com-close svg{ width:18px; height:18px; color:var(--blue-2); } /* =========================================================== PRICING =========================================================== */ .i-price-head{ display:grid; grid-template-columns:1fr auto 1fr; gap:30px; align-items:center; margin-bottom:40px; } .i-price-plate{ border:1px solid var(--line); border-radius:18px; background:rgba(10,16,28,.5); padding:20px 22px; max-width:340px; } .i-price-plate .row{ display:flex; gap:14px; align-items:flex-start; } .i-price-plate .scan{ width:54px; height:54px; flex:none; border-radius:12px; position:relative; display:grid; place-items:center; border:1px solid var(--line-blue); background:radial-gradient(circle at 50% 45%,rgba(46,123,255,.25),transparent 70%); } .i-price-plate .scan img{ width:74%; } .i-price-plate h4{ font-family:var(--display); font-weight:700; font-size:16px; } .i-price-plate h4 b{ color:var(--blue-2); display:block; } .i-price-plate p{ font-size:12.5px; color:var(--muted); margin-top:7px; line-height:1.45; } .i-price-center{ text-align:center; } .i-price-steps{ font-family:var(--mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--dim); display:flex; justify-content:center; gap:14px; } .i-price-steps .dotc{ color:var(--blue); } .i-price-center .i-h2{ margin:16px 0 14px; } .i-price-center p.sub{ color:var(--muted); font-size:15.5px; line-height:1.55; max-width:54ch; margin:0 auto; } .i-toggle-row{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:24px; } .i-toggle{ display:inline-flex; padding:5px; border-radius:999px; border:1px solid var(--line-2); background:rgba(255,255,255,.03); } .i-toggle button{ border:0; background:none; font-family:var(--body); font-weight:600; font-size:14px; color:var(--muted); padding:9px 22px; border-radius:999px; transition:.2s; } .i-toggle button.on{ background:linear-gradient(180deg,var(--blue-2),var(--blue)); color:#fff; box-shadow:0 6px 16px -8px var(--blue-glow); } .i-save{ display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:12.5px; color:var(--cyan); } .i-save svg{ width:14px; height:14px; } .i-price-side{ display:flex; flex-direction:column; align-items:flex-end; gap:14px; position:relative; } .i-price-loxi{ width:150px; filter:drop-shadow(0 22px 40px rgba(46,123,255,.45)); animation:iFloat 6s ease-in-out infinite; } .i-badge{ border:1px solid var(--line-2); border-radius:12px; background:rgba(10,16,28,.7); padding:11px 14px; } .i-badge .bt{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); } .i-badge .bv{ font-family:var(--display); font-weight:700; font-size:13px; margin-top:3px; } .i-plans{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; align-items:stretch; } .i-plan{ position:relative; border:1px solid var(--line); border-radius:var(--r-lg); background:linear-gradient(180deg,var(--panel-2),var(--panel)); padding:26px 24px; display:flex; flex-direction:column; } .i-plan.pro{ border-color:var(--line-blue); background:linear-gradient(180deg,#13243f,#0d1a30); box-shadow:0 0 0 1px var(--line-blue),0 40px 80px -40px var(--blue-glow); } .i-plan-badge{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:6px 15px; border-radius:999px; color:#fff; background:linear-gradient(180deg,var(--blue-2),var(--blue)); box-shadow:0 10px 22px -8px var(--blue-glow); white-space:nowrap; } .i-plan-hd{ display:flex; align-items:center; gap:12px; padding-bottom:18px; border-bottom:1px solid var(--line); } .i-plan-ic{ width:42px; height:42px; flex:none; border-radius:11px; display:grid; place-items:center; color:var(--blue-2); border:1px solid var(--line-blue); background:var(--blue-soft); } .i-plan-ic svg{ width:21px; height:21px; } .i-plan-hd .nm{ font-family:var(--display); font-weight:700; font-size:19px; } .i-plan-hd .tg{ font-size:12px; color:var(--muted); margin-top:2px; line-height:1.3; } .i-price{ display:flex; align-items:flex-start; gap:5px; margin:22px 0 4px; } .i-price .cur{ font-family:var(--display); font-weight:600; font-size:22px; color:var(--muted); margin-top:8px; } .i-price .amt{ font-family:var(--display); font-weight:800; font-size:46px; letter-spacing:-.02em; line-height:1; } .i-price .per{ font-family:var(--mono); font-size:12px; color:var(--dim); align-self:flex-end; margin-bottom:6px; } .i-price .per .mxn{ color:var(--muted); } .i-annual{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12.5px; color:var(--muted); min-height:22px; } .i-annual .off{ font-family:var(--mono); font-size:11px; font-weight:600; color:var(--blue-2); border:1px solid var(--line-blue); border-radius:6px; padding:2px 7px; background:var(--blue-soft); } .i-once{ font-family:var(--mono); font-size:12.5px; color:var(--muted); } .i-plan-feat{ list-style:none; display:flex; flex-direction:column; gap:11px; margin:22px 0; flex:1; } .i-plan-feat li{ display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--text); } .i-plan-feat li.head{ font-weight:700; color:#fff; } .i-plan-feat .ck{ flex:none; width:18px; height:18px; border-radius:50%; display:grid; place-items:center; background:rgba(57,227,216,.14); margin-top:1px; } .i-plan-feat .ck svg{ width:11px; height:11px; color:var(--cyan); } .i-plan .cta{ width:100%; } .i-disc{ border:1px solid var(--line-2); border-radius:12px; background:rgba(214,178,94,.06); padding:13px 14px; display:flex; gap:11px; margin-bottom:16px; } .i-disc .star{ color:#d6b25e; flex:none; } .i-disc .star svg{ width:18px; height:18px; } .i-disc p{ font-size:11.5px; color:var(--muted); line-height:1.45; } .i-wa{ width:100%; background:linear-gradient(180deg,#2ea84f,#1d8a3e) !important; border:0 !important; } .i-wa:hover{ box-shadow:0 14px 30px -10px rgba(46,168,79,.5) !important; } /* tira de confianza pricing */ .i-trust-strip{ margin-top:26px; border:1px solid var(--line); border-radius:var(--r-lg); background:rgba(10,16,28,.5); display:grid; grid-template-columns:repeat(5,1fr); } .i-trust-cell{ display:flex; gap:13px; align-items:center; padding:22px 22px; border-left:1px solid var(--line); } .i-trust-cell:first-child{ border-left:0; } .i-trust-cell .ic{ color:var(--blue-2); flex:none; } .i-trust-cell .ic svg{ width:24px; height:24px; } .i-trust-cell h6{ font-family:var(--display); font-weight:600; font-size:14px; } .i-trust-cell p{ font-size:12px; color:var(--dim); margin-top:2px; } /* =========================================================== CTA FINAL =========================================================== */ .i-cta{ position:relative; text-align:center; padding:72px 40px; border-radius:var(--r-xl); overflow:hidden; background:radial-gradient(120% 150% at 50% -10%,rgba(46,123,255,.16),transparent 60%),linear-gradient(180deg,var(--panel-2),var(--panel)); border:1px solid var(--line-blue); } .i-cta .i-h2{ max-width:20ch; margin:16px auto 16px; } .i-cta p{ color:var(--muted); font-size:17px; max-width:60ch; margin:0 auto 30px; line-height:1.6; } .i-cta-actions{ display:flex; gap:13px; justify-content:center; flex-wrap:wrap; } /* =========================================================== RESPONSIVE =========================================================== */ @media (max-width:1180px){ .i-eco-grid{ grid-template-columns:repeat(2,1fr); } .i-simcards{ grid-template-columns:repeat(2,1fr); } .i-trust-strip{ grid-template-columns:repeat(3,1fr); } .i-trust-cell:nth-child(4){ border-left:0; } } @media (max-width:1024px){ .i-hero-grid{ grid-template-columns:1fr; gap:34px; } .i-stage{ min-height:440px; order:2; transform:scale(.94); transform-origin:top center; } .i-simsec{ grid-template-columns:1fr; gap:32px; } .i-com-grid{ grid-template-columns:1fr; gap:34px; } .i-plans{ grid-template-columns:repeat(2,1fr); } .i-price-head{ grid-template-columns:1fr; gap:24px; justify-items:center; text-align:center; } .i-price-side{ align-items:center; flex-direction:row; flex-wrap:wrap; justify-content:center; } .i-price-plate{ order:3; } .i-eco-loxi{ display:none; } } @media (max-width:760px){ .i-metrics{ grid-template-columns:repeat(2,1fr); } .i-metric:nth-child(3){ border-left:0; } .i-metric:nth-child(n+3){ border-top:1px solid var(--line); } .i-benstrip{ grid-template-columns:1fr 1fr; gap:20px; } .i-com-strip{ grid-template-columns:1fr 1fr; gap:22px; } .i-tcards{ grid-template-columns:1fr; } .i-comstats{ grid-template-columns:1fr 1fr; } .i-comstat:nth-child(3){ border-left:0; } .i-trust-strip{ grid-template-columns:1fr 1fr; } .i-stage{ display:none; } .i-simcards{ grid-template-columns:1fr; } } @media (max-width:560px){ .i-eco-grid{ grid-template-columns:1fr; } .i-plans{ grid-template-columns:1fr; } .i-plan.pro{ order:-1; } .i-metrics{ grid-template-columns:1fr; } .i-metric{ border-left:0; border-top:1px solid var(--line); } .i-metric:first-child{ border-top:0; } .i-benstrip,.i-com-strip{ grid-template-columns:1fr; } .i-prj .react{ display:none; } .i-prj .who .nm,.i-prj .who .tm{ display:none; } } /* ===== Manrope headings: MUST be last to win cascade over per-class rules ===== */ .i-eco-card h3, .i-simcard h4, .i-companel .ph h3, .i-comstat .sn, .i-com-strip .cell .cn, .i-com-strip .cell .ct, .i-metric .mn, .i-plan-hd .nm, .i-price .amt, .i-price .cur, .i-price-plate h4, .i-trust-cell h6, .i-benstrip .ben h5, .i-eco-link .pill, .i-sim-hi .hi .hv{ font-family:var(--i-display) !important; }