:root { --ink:#10213d; --muted:#61708a; --line:#dfe7f2; --blue:#2764e7; --navy:#0b1730; --surface:#fff; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); font:16px/1.5 Inter,system-ui,sans-serif; background:radial-gradient(circle at 82% 12%,#e6efff 0,transparent 26rem),#f7faff; }
.page-shell { width:min(1160px,calc(100% - 40px)); margin:24px auto; padding:0 42px; border:1px solid #e8eef7; border-radius:24px; background:rgba(255,255,255,.92); box-shadow:0 20px 60px rgba(22,46,85,.1); }
.header,.footer { display:flex; justify-content:space-between; align-items:center; margin-inline:calc(50% - 50vw); padding-inline:max(24px,calc((100vw - 1076px)/2)); background:#000; color:#fff; }.header { min-height:94px; }.footer { min-height:76px; }.brand { display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none; }.brand img { width:46px; height:46px; border-radius:13px; }.brand strong,.brand small { display:block; }.brand strong { font-size:20px; letter-spacing:-.6px; }.brand small { color:rgba(255,255,255,.72); font-size:12px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:10px 16px; border:0; border-radius:10px; cursor:pointer; font:600 14px Inter,sans-serif; text-decoration:none; transition:transform .2s,box-shadow .2s,background .2s; }.btn:hover { transform:translateY(-2px); }.btn-primary { background:var(--blue); color:#fff; box-shadow:0 8px 18px rgba(39,100,231,.25); }.btn-primary:hover { background:#1f55c7; }.btn-ghost { border:1px solid var(--line); background:#fff; color:var(--ink); }.btn-secondary { border:1px solid #cdd9ee; background:#fff; color:var(--ink); }.version { padding-left:7px; border-left:1px solid rgba(255,255,255,.35); font-size:12px; }
.hero { display:grid; grid-template-columns:1.08fr .92fr; gap:64px; align-items:center; padding:78px 0 66px; }.eyebrow { display:flex; align-items:center; gap:7px; margin:0 0 14px; color:var(--blue); font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }.eyebrow .material-symbols-outlined { font-size:18px; }.hero h1 { max-width:600px; margin:0; font-size:clamp(42px,5vw,64px); line-height:1.08; letter-spacing:-.065em; }.hero h1 span { color:var(--blue); }.lead { max-width:550px; margin:22px 0 0; color:var(--muted); font-size:18px; }.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }.download-note { display:flex; gap:7px; align-items:center; margin:17px 0 0; color:var(--muted); font-size:13px; }.download-note .material-symbols-outlined { color:#17a266; font-size:18px; }
.app-preview { overflow:hidden; border:8px solid var(--navy); border-radius:28px; background:#f4f8fe; box-shadow:0 24px 45px rgba(14,31,62,.24); transform:rotate(2deg); }.preview-header { display:flex; justify-content:space-between; align-items:center; padding:17px 18px; background:var(--navy); color:#fff; font-size:14px; font-weight:700; }.status { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:500; color:#c7d5f2; }.status i { width:7px; height:7px; border-radius:50%; background:#46d890; }.map-grid { position:relative; height:245px; overflow:hidden; background-color:#e8f1e8; background-image:linear-gradient(28deg,transparent 48%,#fff 49%,#fff 51%,transparent 52%),linear-gradient(110deg,transparent 46%,#d2e6d0 47%,#d2e6d0 53%,transparent 54%),linear-gradient(#d9ead6 1px,transparent 1px),linear-gradient(90deg,#d9ead6 1px,transparent 1px); background-size:160px 130px,130px 120px,28px 28px,28px 28px; }.map-pin { position:absolute; z-index:2; top:94px; left:48%; color:#ed4d54; font-size:44px; filter:drop-shadow(0 3px 2px rgba(0,0,0,.2)); }.route { position:absolute; width:150px; height:82px; border:3px dashed #2764e7; border-left:0; border-bottom:0; border-radius:0 70px 0 0; transform:rotate(-24deg); }.route-one { top:52px; left:43px; }.route-two { right:37px; bottom:38px; transform:rotate(130deg); }.device-card { display:flex; align-items:center; gap:10px; margin:14px; padding:12px; border-radius:12px; background:#fff; box-shadow:0 3px 14px rgba(19,47,85,.1); }.device-card strong,.device-card small { display:block; }.device-card strong { font-size:13px; }.device-card small { color:var(--muted); font-size:11px; }.device-icon { padding:8px; border-radius:9px; background:#eaf0ff; color:var(--blue); }.arrow { margin-left:auto; color:var(--muted); }
.features { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:28px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.feature { display:flex; gap:12px; padding:14px; }.icon { color:var(--blue); }.feature h2,.guide h2 { margin:0; font-size:16px; }.feature p { margin:4px 0 0; color:var(--muted); font-size:13px; }.guide { display:flex; justify-content:space-between; gap:32px; align-items:center; padding:44px 0; }.guide .eyebrow { margin-bottom:6px; }.guide h2 { font-size:24px; }.guide ol { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:620px; padding:0; margin:0; list-style:none; color:var(--muted); font-size:13px; }.guide li { display:flex; gap:8px; }.guide li span { display:grid; flex:0 0 23px; width:23px; height:23px; place-items:center; border-radius:50%; background:#eaf0ff; color:var(--blue); font-size:11px; font-weight:700; }.footer { font-size:12px; }
.modal-backdrop { position:fixed; inset:0; z-index:10; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(6,18,40,.58); }.modal { position:relative; width:min(100%,430px); padding:30px; border-radius:18px; background:#fff; box-shadow:0 20px 60px rgba(0,0,0,.25); }.modal[hidden] { display:none; }.modal h2 { margin:0; }.modal>p { margin:6px 0 22px; color:var(--muted); font-size:14px; }.modal-close { position:absolute; top:14px; right:14px; display:grid; place-items:center; width:34px; height:34px; border:0; border-radius:8px; background:#f2f5f9; color:var(--muted); cursor:pointer; }.form-row { display:grid; gap:6px; margin-bottom:14px; }.form-row label { font-size:13px; font-weight:600; }.form-row input { width:100%; padding:11px 12px; border:1px solid #cfd9e8; border-radius:8px; font:inherit; }.form-row input:focus { outline:2px solid #b7ccff; border-color:var(--blue); }.field-help { color:var(--muted); font-size:11px; }.submit-btn { width:100%; margin-top:6px; }.text-link { display:block; width:100%; margin:16px 0 0; padding:0; border:0; background:transparent; color:var(--blue); cursor:pointer; font:600 12px Inter,sans-serif; text-align:center; }
@media (max-width:800px) { .page-shell { width:100%; margin:0; padding:0 24px; border:0; border-radius:0; }.hero { grid-template-columns:1fr; gap:45px; padding:58px 0; }.app-preview { width:min(390px,100%); margin:auto; }.features { grid-template-columns:1fr; }.guide { align-items:flex-start; flex-direction:column; }.guide ol { grid-template-columns:1fr; }.footer { gap:12px; }.feature { padding-left:0; } }
@media (max-width:460px) { .header { min-height:78px; }.brand small { display:none; }.btn-ghost { padding:8px 11px; }.hero h1 { font-size:40px; }.actions .btn { width:100%; }.footer { align-items:flex-start; flex-direction:column; } }

/* Tema monocromático y barras alineadas al borde de la ventana. */
:root { --ink:#000; --muted:#333; --line:#000; --blue:#000; --navy:#000; --surface:#fff; }
body { background:#fff; }
.page-shell { width:100%; margin:0; padding:94px 42px 0; border:0; border-radius:0; background:#fff; box-shadow:none; }
.header { position:fixed; inset:0 0 auto; z-index:5; width:100%; min-height:94px; margin:0; padding-inline:42px; background:#000; color:#fff; }
.footer { min-height:76px; margin-inline:calc(50% - 50vw); padding-inline:max(24px,calc((100vw - 1076px)/2)); background:#000; color:#fff; }
.btn { border-radius:0; }.btn-primary { background:#000; color:#fff; box-shadow:none; }.btn-primary:hover { background:#222; }.btn-secondary,.btn-ghost { border-color:#000; background:#fff; color:#000; }.btn-ghost { background:#000; color:#fff; border-color:#fff; }.hero h1 span,.eyebrow,.icon,.device-icon,.text-link { color:#000; }.download-note .material-symbols-outlined { color:#000; }
.app-preview { border-color:#000; border-radius:0; background:#fff; box-shadow:none; transform:none; filter:grayscale(1) contrast(1.25); }.preview-header { background:#000; }.map-grid { background-color:#fff; background-image:linear-gradient(28deg,transparent 48%,#000 49%,#000 51%,transparent 52%),linear-gradient(110deg,transparent 46%,#000 47%,#000 53%,transparent 54%),linear-gradient(#000 1px,transparent 1px),linear-gradient(90deg,#000 1px,transparent 1px); opacity:.9; }.map-pin,.device-icon { color:#000; }.route { border-color:#000; }.device-card { border:1px solid #000; box-shadow:none; }.device-icon { border:1px solid #000; background:#fff; }.guide li span { border:1px solid #000; border-radius:0; background:#fff; color:#000; }
.modal-backdrop { background:rgba(0,0,0,.72); }.modal { border:2px solid #000; border-radius:0; box-shadow:none; }.modal-close { border:1px solid #000; border-radius:0; background:#fff; color:#000; }.form-row input { border-color:#000; border-radius:0; }.form-row input:focus { outline:2px solid #000; border-color:#000; }
@media (max-width:800px) { .page-shell { padding:94px 24px 0; }.header,.footer { padding-inline:24px; }.footer { align-items:flex-start; flex-direction:column; justify-content:center; gap:5px; padding-block:18px; text-align:left; }.footer span:last-child { max-width:280px; } }

/* Mapa monocromático con una inclinación sutil de panel. */
html,body { overflow-x:hidden; }
.app-preview { filter:none; transform:rotate(3deg); transform-origin:center; }
.map-grid { background-color:#fff; background-image:linear-gradient(28deg,transparent 48%,#000 49%,#000 51%,transparent 52%),linear-gradient(110deg,transparent 46%,#d9d9d9 47%,#d9d9d9 53%,transparent 54%),linear-gradient(#e7e7e7 1px,transparent 1px),linear-gradient(90deg,#e7e7e7 1px,transparent 1px); opacity:1; }
.map-pin { color:#000; }.route { border-color:#000; }.device-icon { border:1px solid #000; background:#fff; color:#000; }.status i { background:#fff; }
@media (max-width:800px) { .app-preview { transform:rotate(2deg); } }

/* Indicador de seguridad y confirmación de contraseña. */
.password-strength { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; align-items:center; margin-top:4px; }.strength-bar { height:4px; background:#d6d6d6; }.strength-label { grid-column:1/-1; color:var(--muted); font-size:11px; }.password-strength[data-score="1"] .strength-bar:nth-child(-n+1),.password-strength[data-score="2"] .strength-bar:nth-child(-n+2),.password-strength[data-score="3"] .strength-bar:nth-child(-n+3),.password-strength[data-score="4"] .strength-bar { background:#000; }.field-help.is-error { color:#b00020; }

/* Sin rutas diagonales: solo la cuadrícula del mapa. */
.route-two { display:none; }.map-pin,.route { display:block; }.map-grid { background-image:linear-gradient(#e7e7e7 1px,transparent 1px),linear-gradient(90deg,#e7e7e7 1px,transparent 1px); background-size:28px 28px; }

/* Margen seguro y desplazamiento interno para formularios altos en móvil. */
.modal-backdrop { padding:clamp(20px,5vw,48px); overflow-y:auto; }
.modal { width:min(100%,430px); max-height:calc(100dvh - clamp(40px,10vw,96px)); margin:auto; overflow-y:auto; }

/* Registro compacto: todo el formulario permanece visible sin scroll interno. */
.modal-backdrop { padding:20px; overflow:hidden; }
.modal { width:min(calc(100vw - 40px),680px); max-height:none; overflow:visible; }
#registerForm { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:16px; }
#registerForm .form-row { min-width:0; }
#registerForm .form-row:nth-of-type(n+3) { grid-column:1/-1; }
#registerForm .submit-btn,#registerForm .text-link { grid-column:1/-1; }
.modal { border-radius:16px; }
.modal-close,.form-row input,.btn { border-radius:9px; }
@media (max-width:420px) { .modal { padding:22px; }.modal>p { margin-bottom:14px; }.form-row { margin-bottom:9px; }.field-help { display:none; } }