/* ========================================================================= HERMEZ · Landing comercial — Sistema de diseño Estética: griego moderno, editorial, premium, sobrio. Basado en el logo (marfil + azul noche + dorado sobrio). Sin degradados neón, sin emojis. ========================================================================= */ /* ---------- Reset ligero ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 92px; } body { margin: 0; } img, svg { display: block; max-width: 100%; } button { font: inherit; color: inherit; cursor: pointer; } a { color: inherit; text-decoration: none; } ul { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4, p { margin: 0; } /* ---------- Tokens ---------- */ :root { /* Paleta (del logo) */ --bg: #F5F2EB; /* marfil principal */ --bg-soft: #EFEBE1; /* marfil apagado (bandas) */ --card: #FAF8F2; /* marfil de cards */ --navy: #111D31; /* azul noche principal */ --navy-2: #0B1628; /* azul oscuro alterno */ --ink: #111D31; /* texto principal */ --text-2: #4B515B; /* texto secundario */ --text-3: #666D75; /* texto gris suave (AA sobre marfil) */ --border: #D8D3C7; /* bordes suaves */ --border-2: #E4DFD4; /* bordes muy suaves */ --gold: #B89B5E; /* dorado sobrio — DECORATIVO (líneas, rombos, bordes, sobre navy) */ --gold-ink: #7A6428; /* dorado para TEXTO sobre marfil (AA ~5:1) */ --gold-2: #C8AD6A; /* dorado claro (sobre navy) */ --green: #2F7D68; /* verde operativo */ --red: #B45C52; /* rojo incidencia */ --amber: #C49A45; /* ámbar pendiente */ --blue: #3C5A7A; /* azul estado en-ruta (sobrio) */ /* Sobre navy */ --on-navy: #EDE7D8; --on-navy-soft: #A9B2C0; /* Tipografía */ --serif: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; /* fuente de titulares (Manrope) — nombre --serif conservado por compatibilidad */ --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; /* Radios y sombras */ --r-sm: 8px; --r: 14px; --r-lg: 22px; --sh-1: 0 1px 2px rgba(17,29,49,.04), 0 4px 14px rgba(17,29,49,.05); --sh-2: 0 10px 30px rgba(17,29,49,.08), 0 2px 8px rgba(17,29,49,.05); --sh-3: 0 30px 70px rgba(17,29,49,.14), 0 8px 24px rgba(17,29,49,.08); /* Layout */ --maxw: 1200px; --gutter: clamp(20px, 5vw, 40px); --sec-y: clamp(72px, 9vw, 132px); } /* ---------- Base ---------- */ body { font-family: var(--sans); color: var(--ink); background: var(--bg); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } /* Skip-link accesible (visible solo al enfocar con teclado) */ .skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--navy); color: var(--on-navy); padding: 10px 16px; border-radius: 10px; font-weight: 600; font-size: 14px; transition: top .2s; } .skip:focus { top: 12px; } .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .container--wide { max-width: 1320px; } /* ---------- Tipografía de secciones ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-ink); } .eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--gold); opacity: .7; } .eyebrow--center { justify-content: center; } .headline { font-family: var(--serif); font-weight: 700; color: var(--ink); line-height: 1.16; letter-spacing: -.02em; font-size: clamp(30px, 4.6vw, 54px); } .headline--xl { font-size: clamp(38px, 6.4vw, 76px); line-height: 1.1; font-weight: 800; } .headline em { font-style: normal; font-weight: 800; color: var(--gold-ink); } .sub { font-size: clamp(16px, 1.6vw, 20px); color: var(--text-2); line-height: 1.6; max-width: 62ch; margin-top: 16px; } .lead { font-size: 18px; color: var(--text-2); } /* overflow-x clip: los estados ocultos de las animaciones 3D (translateX) sobresalían del viewport y creaban scroll lateral en tablets */ .section { padding-block: var(--sec-y); position: relative; overflow-x: clip; } /* grano de papel finisimo sobre toda la pagina (estetica tinta/porcelana) */ body::after { content: ""; position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; opacity: .05; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); } .section--soft { background: var(--bg-soft); } .section-head { max-width: 760px; } .section-head--center { margin-inline: auto; text-align: center; } .section-head .headline { margin-top: 16px; } .section-head .sub { margin-top: 18px; } .section-head--center .sub { margin-inline: auto; } /* Divisor griego: línea con rombo */ .rule { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--gold); } .rule::before, .rule::after { content: ""; height: 1px; width: min(120px, 22vw); background: linear-gradient(90deg, transparent, var(--border)); } .rule::after { background: linear-gradient(90deg, var(--border), transparent); } .rule i { width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); display: block; } /* ---------- Botones ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 22px; border-radius: 999px; font-weight: 600; font-size: 15px; border: 1px solid transparent; transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease; white-space: nowrap; letter-spacing: .005em; } .btn svg { width: 17px; height: 17px; } .btn--primary { background: var(--navy); color: var(--on-navy); box-shadow: var(--sh-1); } .btn--primary:hover { background: var(--navy-2); transform: translateY(-2px); box-shadow: var(--sh-2); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--border); } .btn--ghost:hover { border-color: var(--navy); background: rgba(17,29,49,.03); transform: translateY(-2px); } .btn--gold { background: var(--gold); color: #2A2308; box-shadow: var(--sh-1); } .btn--gold:hover { background: var(--gold-2); transform: translateY(-2px); box-shadow: var(--sh-2); } .btn--onnavy { background: var(--on-navy); color: var(--navy); } .btn--onnavy:hover { background: #fff; transform: translateY(-2px); } .btn--onnavy-ghost { background: transparent; color: var(--on-navy); border-color: rgba(237,231,216,.28); } .btn--onnavy-ghost:hover { border-color: var(--on-navy); background: rgba(237,231,216,.06); transform: translateY(-2px); } /* botón WhatsApp: verde reconocible al instante */ .btn--wa { background: #25D366; color: #06301A; box-shadow: 0 8px 22px rgba(37,211,102,.28); } .btn--wa:hover { background: #22C55E; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(37,211,102,.34); } .btn--wa svg { width: 20px; height: 20px; } .btn--lg { padding: 16px 28px; font-size: 16px; } .btn--block { width: 100%; } .btn-row { display: flex; flex-wrap: wrap; gap: 14px; } /* ---------- Pills / badges ---------- */ .badge { display: inline-flex; align-items: center; gap: 9px; padding: 8px 15px; border-radius: 999px; font-size: 13.5px; font-weight: 500; background: rgba(184,155,94,.10); color: #7A6428; border: 1px solid rgba(184,155,94,.35); } .badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(184,155,94,.18); } .badge--onnavy { background: rgba(200,173,106,.12); color: var(--gold-2); border-color: rgba(200,173,106,.35); } .pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; letter-spacing: .01em; } .pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .pill--green { background: rgba(47,125,104,.12); color: var(--green); } .pill--blue { background: rgba(60,90,122,.12); color: var(--blue); } .pill--amber { background: rgba(196,154,69,.14); color: #9A7726; } .pill--red { background: rgba(180,92,82,.12); color: var(--red); } .pill--gray { background: rgba(124,131,140,.12); color: var(--text-3); } /* ---------- Navbar ---------- */ .nav { position: sticky; top: 0; z-index: 60; background: rgba(245,242,235,.82); backdrop-filter: saturate(1.2) blur(12px); border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s, background .3s; } .nav.is-scrolled { border-bottom-color: var(--border-2); box-shadow: 0 1px 0 rgba(17,29,49,.02), 0 8px 24px rgba(17,29,49,.04); } /* la nav se esconde al bajar y reaparece al subir */ .nav { transition: border-color .3s, box-shadow .3s, background .3s, transform .35s cubic-bezier(.3,.7,.3,1); } .nav.is-hidden { transform: translateY(-100%); } /* hebra dorada de progreso de lectura */ .readbar { position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 200; background: none; pointer-events: none; } .readbar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-2)); transform-origin: 0 50%; transform: scaleX(0); } .nav__inner { display: flex; align-items: center; justify-content: space-between; height: 74px; gap: 24px; } .nav__logo { display: inline-flex; align-items: center; gap: 11px; } .nav__logo .mark { width: 26px; height: 32px; color: var(--navy); } .nav__word { font-family: var(--serif); font-weight: 600; font-size: 24px; letter-spacing: .20em; color: var(--navy); padding-left: 2px; } .nav__links { display: flex; align-items: center; gap: 28px; } .nav__links a { font-size: 14.5px; font-weight: 500; color: var(--text-2); transition: color .2s; position: relative; } .nav__links a:hover { color: var(--ink); } .nav__right { display: flex; align-items: center; gap: 18px; } .nav__signin { font-size: 14.5px; font-weight: 600; color: var(--ink); } .nav__signin:hover { color: var(--gold); } .nav__burger { display: none; width: 42px; height: 42px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); align-items: center; justify-content: center; } .nav__burger svg { width: 20px; height: 20px; color: var(--ink); } .nav__mobile { display: none; } /* ---------- Hero ---------- */ .hero { position: relative; padding-top: clamp(48px, 6vw, 84px); padding-bottom: clamp(56px, 7vw, 96px); overflow: hidden; } /* Columna izquierda con ancho para que el CTA y su chip convivan en UNA fila, y centrado vertical para que ninguna columna deje un hueco muerto abajo. */ .hero__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.3fr); gap: clamp(28px, 3.6vw, 52px); align-items: start; } .hero__copy { max-width: 600px; } /* El mockup arranca a la misma altura que el titular (que tiene margin-top:22px), no centrado: con la columna de texto más alta, centrar lo dejaba caído ~56px. */ .hero__art { margin-top: 22px; } /* Rotador de dolores: los mensajes se apilan en el mismo lugar; la altura la fija el JS con el mensaje más alto para que NADA salte al cambiar */ .hero__rotator { position: relative; overflow: hidden; touch-action: pan-y; } /* carrusel horizontal: avanzar = entra desde la derecha y sale por la izquierda; retroceder (swipe) = el sentido inverso */ .hero__slide { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transform: translateX(44px); pointer-events: none; transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1); } .hero__slide.from-left { transition: none; transform: translateX(-44px); } .hero__slide.is-active { position: relative; opacity: 1; transform: none; pointer-events: auto; } .hero__slide.is-leaving { opacity: 0; transform: translateX(-44px); } .hero__slide.is-leaving-r { opacity: 0; transform: translateX(44px); } .hero__dots { display: flex; gap: 8px; margin-top: 20px; } .hero__dots button { width: 8px; height: 8px; border-radius: 999px; background: var(--border); border: none; cursor: pointer; padding: 0; transition: background .3s, width .3s; position: relative; overflow: hidden; } .hero__dots button.on { width: 30px; background: var(--border); } .hero__dots button.on::after { content: ""; position: absolute; inset: 0; border-radius: 999px; background: var(--gold); transform-origin: 0 50%; transform: scaleX(0); animation: hzDotFill 7s linear forwards; } .hero__dots.is-paused button.on::after { animation-play-state: paused; } @keyframes hzDotFill { to { transform: scaleX(1); } } .hero .headline { margin-top: 22px; } .hero .sub { margin-top: 22px; font-size: clamp(17px, 1.7vw, 21px); } .hero__extra { margin-top: 14px; color: var(--text-3); font-size: 15.5px; max-width: 54ch; } .hero .btn-row { margin-top: 30px; } .micro { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--text-3); font-size: 13.5px; } .micro span { display: inline-flex; align-items: center; gap: 7px; } .micro span::before { content: ""; width: 5px; height: 5px; background: var(--gold); transform: rotate(45deg); } /* Fondo geométrico sutil del hero */ .hero__bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .hero__bg .flute { position: absolute; top: -8%; right: 6%; width: 1px; height: 116%; background: linear-gradient(180deg, transparent, var(--border), transparent); opacity: .6; } .hero__bg .flute:nth-child(2) { right: 12%; opacity: .35; } .hero__bg .flute:nth-child(3) { right: 18%; opacity: .22; } .hero__bg .ring { position: absolute; border: 1px solid var(--border); border-radius: 50%; opacity: .5; } .hero__bg .ring--1 { width: 420px; height: 420px; top: -180px; left: -160px; } .hero__bg .ring--2 { width: 260px; height: 260px; top: -120px; left: -80px; opacity: .3; } .hero > .container { position: relative; z-index: 1; } /* ---------- Ventana de app (marco de dashboard) ---------- */ .win { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-3), inset 0 1px 0 rgba(255,255,255,.6); overflow: hidden; } /* filo de luz superior: las superficies claras se leen como vidrio pulido */ .plan, .compare__card, .pain, .feature, .diff, .dm, .faq__item { box-shadow: var(--sh-1), inset 0 1.5px 0 rgba(255,255,255,.65); } .compare__card--good { box-shadow: var(--sh-2), inset 0 1.5px 0 rgba(255,255,255,.65); } .win__bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: linear-gradient(180deg, #FBFAF5, #F3EFE6); border-bottom: 1px solid var(--border-2); } .win__dots { display: inline-flex; gap: 7px; } .win__dots i { width: 11px; height: 11px; border-radius: 50%; background: #D9D3C6; display: block; } .win__dots i:nth-child(1){ background: #D9AFA9; } .win__dots i:nth-child(2){ background: #D9C9A0; } .win__dots i:nth-child(3){ background: #A9C6BB; } .win__addr { flex: 1; text-align: center; font-size: 12px; color: var(--text-3); font-weight: 500; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .win__addr span { color: var(--ink); } .win__body { padding: 0; } /* ---------- Mockup toolkit (interior de la ventana) ---------- */ .mk { display: grid; grid-template-columns: 190px 1fr; min-height: 380px; font-size: 13px; } .mk--nosidebar { grid-template-columns: 1fr; } .mk__side { background: var(--navy); color: var(--on-navy-soft); padding: 16px 12px; } .mk__brand { display: flex; align-items: center; gap: 8px; color: var(--on-navy); font-family: var(--serif); font-weight: 600; letter-spacing: .16em; font-size: 15px; padding: 4px 8px 14px; } .mk__brand .mark { width: 15px; height: 19px; } .mk__nav { display: flex; flex-direction: column; gap: 2px; } .mk__nav a { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; color: var(--on-navy-soft); font-weight: 500; cursor: pointer; transition: background .18s, color .18s; } .mk__nav a svg { width: 15px; height: 15px; opacity: .8; } .mk__nav a:hover { background: rgba(237,231,216,.06); color: var(--on-navy); } .mk__nav a.is-active { background: rgba(237,231,216,.10); color: #fff; } .mk__nav a.is-active svg { color: var(--gold-2); opacity: 1; } .mk__main { animation: mkfade .35s ease; } @keyframes mkfade { from { opacity: .35; } to { opacity: 1; } } .mk__main { padding: 18px 20px; background: var(--card); min-width: 0; } .mk__toprow { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .mk__h { font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--ink); } .mk__sh { font-size: 12px; color: var(--text-3); } .mk-kpis { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; } .mk-kpi { min-width: 0; background: var(--bg); border: 1px solid var(--border-2); border-radius: 12px; padding: 12px 13px; } .mk-kpi__l { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; } .mk-kpi__v { font-family: var(--sans); font-variant-numeric: lining-nums tabular-nums; font-size: 25px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); line-height: 1.1; margin-top: 4px; } .mk-kpi__d { font-size: 11px; margin-top: 2px; font-weight: 600; } .mk-kpi__d.up { color: var(--green); } .mk-kpi__d.dn { color: var(--red); } .mk-kpi__d .caret { width: 10px; height: 10px; display: inline-block; vertical-align: -1px; margin-right: 3px; } .mk-kpi--gold { border-color: rgba(184,155,94,.4); background: rgba(184,155,94,.06); } .mk-2col { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: 14px; margin-top: 14px; } .mk-2col--rutas { grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); } .mk-card { background: var(--bg); border: 1px solid var(--border-2); border-radius: 12px; padding: 13px 14px; } .mk-card__t { font-size: 12.5px; font-weight: 700; color: var(--ink); margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; } .mk-card__t span { font-size: 11px; color: var(--text-3); font-weight: 500; } .mk-row { display: grid; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border-2); } .mk-row:first-of-type { border-top: none; } .mk-list--pedidos .mk-row { grid-template-columns: 14px minmax(0,1fr) auto auto; } .mk-list--pedidos .mk-row > div { min-width: 0; } .mk-dot { width: 9px; height: 9px; border-radius: 50%; } .mk-dot--a { background: #B98A57; } .mk-dot--b { background: #6E8CAF; } .mk-dot--c { background: #7BA48F; } .mk-dot--d { background: #4E6B87; } .mk-name { font-weight: 600; color: var(--ink); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mk-sub { color: var(--text-3); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mk-amt { font-weight: 700; font-size: 12.5px; color: var(--ink); } /* barras de método de pago */ .mk-bars { display: flex; flex-direction: column; gap: 9px; } .mk-bar { display: grid; grid-template-columns: 46px minmax(0,1fr) 38px; align-items: center; gap: 8px; font-size: 11.5px; } .mk-bar__l { color: var(--text-2); font-weight: 500; } .mk-bar__track { display: block; height: 8px; background: var(--border-2); border-radius: 999px; overflow: hidden; } .mk-bar__fill { display: block; height: 100%; border-radius: 999px; background: var(--navy); } .mk-bar__fill.g { background: var(--green); } .mk-bar__fill.a { background: var(--amber); } .mk-bar__fill.gold { background: var(--gold); } .mk-bar__v { text-align: right; font-weight: 700; color: var(--ink); } /* mini-mapa (rutas) */ .mk-map { position: relative; background: #EEEAE0; border: 1px solid var(--border-2); border-radius: 12px; height: 100%; min-height: 210px; overflow: hidden; } .mk-map svg { width: 100%; height: 100%; } .mk-legend { position: absolute; left: 12px; bottom: 12px; background: rgba(250,248,242,.92); border: 1px solid var(--border-2); border-radius: 9px; padding: 8px 10px; font-size: 10.5px; display: flex; flex-direction: column; gap: 5px; box-shadow: var(--sh-1); } .mk-legend span { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-weight: 500; } .mk-legend i { width: 9px; height: 9px; border-radius: 50%; } /* chips motorizados / zonas */ .mk-chips { display: flex; flex-wrap: wrap; gap: 8px; } .mk-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--border-2); background: var(--bg); font-size: 11.5px; font-weight: 600; color: var(--ink); } .mk-chip .av { width: 18px; height: 18px; border-radius: 50%; background: var(--navy); color: var(--on-navy); font-size: 9px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; } .mk-table { width: 100%; font-size: 12px; } .mk-table .th { display: grid; gap: 10px; padding: 6px 0; color: var(--text-3); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; border-bottom: 1px solid var(--border); } .mk-progress { height: 6px; background: var(--border-2); border-radius: 999px; overflow: hidden; } .mk-progress i { display: block; height: 100%; background: var(--green); border-radius: 999px; } /* ---------- Secciones de demo (una por demo, ya no en pestañas) ---------- */ .demo-sec__grid { margin-top: 44px; align-items: start; } .funcs-more { margin-top: 30px; text-align: center; } .funcs-more p { font-size: 14.5px; color: var(--text-2); margin-bottom: 14px; } /* Destacado editorial + CTA en la columna de texto de cada demo (tipografía sans clara: la versión serif cursiva no se leía) */ .panel__callout { margin-top: 24px; border-left: 3px solid var(--gold); background: var(--card); border-radius: 0 12px 12px 0; padding: 13px 17px; font-family: var(--sans); font-size: 14.5px; line-height: 1.6; color: var(--text-2); font-weight: 500; } .panel__callout b { color: var(--red); font-weight: 800; } .panel__cta { margin-top: 24px; display: flex; gap: 6px 12px; flex-wrap: wrap; align-items: center; } .panel__cta--center { justify-content: center; text-align: center; margin-top: 26px; } .panel__cta--center .cta-note { flex-basis: 100%; } .cta-note { flex-basis: 100%; font-size: 11.5px; color: var(--text-3); } /* Lista de seguridad ligera (sin cajas): 2 columnas dentro del texto */ .sec-list.sec-list--plain { grid-template-columns: 1fr 1fr; gap: 9px 18px; margin-top: 24px; } .sec-list.sec-list--plain li { background: none; border: none; padding: 3px 0; font-size: 14.5px; } @media (max-width: 560px) { .sec-list.sec-list--plain { grid-template-columns: 1fr; } } /* Botón principal con la promesa integrada (14 días · sin tarjeta) */ .btn--stack { flex-direction: column; gap: 2px; padding-top: 12px; padding-bottom: 12px; line-height: 1.25; } .btn--stack > span { display: inline-flex; align-items: center; gap: 9px; } .btn--stack small { font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--gold-2); text-transform: uppercase; } /* Chips bajo el dashboard del hero: índice de las 3 demos (llenan el vacío y llevan directo a cada una) */ .hero__chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; } .hero__chip { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--border-2); border-radius: 12px; padding: 10px 12px; transition: border-color .2s, transform .2s, box-shadow .2s; } .hero__chip:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: var(--sh-1); } .hero__chip svg { width: 19px; height: 19px; color: var(--navy); flex: none; } .hero__chip b { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink); } .hero__chip em { display: block; font-style: normal; font-size: 10.5px; color: var(--text-3); } @media (max-width: 900px) { .hero__chips { grid-template-columns: 1fr; gap: 8px; } } /* Portal de tiendas: ventana a escala mayor para equilibrar con el texto */ .mk__main--lg { padding: 22px 24px; } .mk__main--lg .mk__h { font-size: 24px; } .mk__main--lg .mk-kpi__v { font-size: 29px; } .mk__main--lg .mk-kpi { padding: 14px 16px; } .mk__main--lg .mk-card { padding: 16px; } .mk__main--lg .mk-name { font-size: 13.5px; } .mk__main--lg .mk-sub { font-size: 12px; } .mk__main--lg .mk-amt { font-size: 13.5px; } .mk__main--lg .mk-bar { font-size: 12.5px; grid-template-columns: 76px minmax(0,1fr) 60px; } /* En desktop, el texto acompaña a la demo mientras scrolleas (mata el vacío) */ @media (min-width: 901px) { .demo-sec__grid .panel__copy { position: sticky; top: 110px; } /* Carril de ALTURA FIJA: mientras el autopiloto asigna y vacía grupos, la caja no respira — la lista scrollea por dentro y el mapa absorbe el espacio sobrante de su columna */ .asig__body { height: 620px; } .asig__side { display: flex; flex-direction: column; min-height: 0; } .asig__map { flex: 1; height: auto; min-height: 320px; } } /* ---------- Demos interactivas: Caja & conciliación / Liquidación ---------- */ .dm { padding: 16px 16px 14px; } .dm__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .dm__h { font-family: var(--serif); font-size: 19px; font-weight: 600; } .dm__sh { font-family: var(--sans); font-size: 11.5px; color: var(--text-3); font-weight: 500; } .dm__chip { font-size: 11px; font-weight: 700; background: rgba(184,155,94,.12); color: var(--gold-ink); border: 1px solid rgba(184,155,94,.3); padding: 4px 11px; border-radius: 999px; } .dm__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; } .dm__kpis > div { background: var(--bg); border: 1px solid var(--border-2); border-radius: 11px; padding: 8px 11px; display: flex; flex-direction: column; gap: 1px; min-width: 0; } .dm__kpis span { font-size: 9px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--text-3); } .dm__kpis b { font-size: 16px; font-weight: 800; font-variant-numeric: lining-nums tabular-nums; } .dm__kpis b.is-ok { color: var(--green); } .dm__kpis b.is-bad { color: var(--red); } .dm__row { background: var(--card); border: 1px solid var(--border-2); border-radius: 12px; padding: 9px 11px; margin-bottom: 7px; transition: border-color .2s, background .2s; } .dm__row.is-bad { border-color: rgba(180,92,82,.45); background: rgba(180,92,82,.04); } .dm__row.is-ok { border-color: rgba(47,125,104,.35); } .dm__row.is-locked { opacity: .85; } .dm__rowtop { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .dm__who { min-width: 0; } .dm__who b { font-size: 13px; font-weight: 700; display: block; } .dm__who span { font-size: 11px; color: var(--text-3); } /* total a recaudar por motorizado (efectivo + Yape + Plin), cifra destacada */ .dm__who .dm__total { display: inline-flex; align-items: baseline; gap: 5px; margin-top: 4px; font-size: 10.5px; font-weight: 600; color: var(--text-2); } .dm__who .dm__total b { display: inline; font-size: 13.5px; font-weight: 800; color: var(--navy); } .dm__st { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; flex: none; } .dm__st.ok { background: rgba(47,125,104,.12); color: var(--green); } .dm__st.bad { background: rgba(180,92,82,.13); color: var(--red); } .dm__st.warn { background: rgba(196,154,69,.15); color: #9A7726; } .dm__paych { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .dm__pchip { font-size: 10.5px; font-weight: 600; color: var(--text-2); background: var(--bg); border: 1px solid var(--border-2); border-radius: 999px; padding: 3px 9px; } .dm__pchip b { font-weight: 800; } .dm__pchip.is-v { color: var(--green); border-color: rgba(47,125,104,.3); } .dm__act { display: flex; align-items: center; gap: 9px; margin-top: 10px; flex-wrap: wrap; } .dm__lbl { font-size: 11px; color: var(--text-3); font-weight: 600; } .dm__step { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); padding: 2px; } .dm__step button { width: 26px; height: 26px; border-radius: 50%; border: none; background: var(--card); font-weight: 800; font-size: 14px; cursor: pointer; color: var(--ink); transition: background .15s, color .15s; } .dm__step button:hover:not(:disabled) { background: var(--navy); color: var(--on-navy); } .dm__step button:disabled { opacity: .4; cursor: default; } .dm__step b { min-width: 62px; text-align: center; font-size: 12.5px; font-weight: 800; font-variant-numeric: lining-nums tabular-nums; } .dm__val { margin-left: auto; background: var(--navy); color: var(--on-navy); border: none; border-radius: 999px; padding: 7px 13px; font-size: 11px; font-weight: 700; cursor: pointer; transition: background .18s; } .dm__val:hover:not(:disabled) { background: var(--navy-2); } .dm__val.is-bad { background: var(--red); } .dm__val:disabled { opacity: .7; cursor: default; } .dm__note { margin-top: 8px; font-size: 10.5px; color: var(--red); font-weight: 600; } .dm__foot { margin-top: 10px; font-size: 10.5px; color: var(--text-3); line-height: 1.5; } .dm__reset { background: none; border: none; color: var(--gold-ink); font-size: 10.5px; font-weight: 700; text-decoration: underline; cursor: pointer; } /* liquidación */ .dm__lqhead { display: flex; align-items: center; gap: 9px; cursor: pointer; } .dm__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; } .dm__lqname { min-width: 0; flex: 1; } .dm__lqname b { display: block; font-size: 13px; font-weight: 700; } .dm__lqname span { font-size: 10.5px; color: var(--text-3); } .dm__neto { font-weight: 800; font-size: 13px; font-variant-numeric: lining-nums tabular-nums; flex: none; } .dm__lqdet { border-top: 1px solid var(--border-2); margin-top: 10px; padding-top: 9px; animation: fadeUp .25s ease; } .dm__ln { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; color: var(--text-2); padding: 3px 0; } .dm__ln b { font-variant-numeric: lining-nums tabular-nums; } .dm__ln.is-strong { border-top: 1px solid var(--border-2); margin-top: 4px; padding-top: 7px; color: var(--ink); font-weight: 700; } .dm__hist { margin-top: 7px; font-size: 10.5px; color: var(--text-3); } .dm__depbtn { margin-top: 10px; margin-left: 0; } @media (max-width: 560px) { .dm { padding: 13px 12px 12px; } .dm__kpis b { font-size: 14px; } .dm__val { margin-left: 0; } } /* ---------- Demo interactiva: Asignación & rutas ---------- */ .asig [hidden], .asig__win [hidden] { display: none !important; } /* La demo de Asignación es AUTÓNOMA en todos los dispositivos: el autopiloto corre indefinidamente y ningún clic/toque la altera (decisión Nestor 12-jul). El scroll de página pasa a través sin problema. */ .asig__body { pointer-events: none; } .asig-intro { max-width: 720px; margin: 40px auto 0; text-align: center; } .asig-intro h3 { font-family: var(--serif); font-size: clamp(24px, 2.8vw, 34px); font-weight: 600; line-height: 1.12; } .asig-intro .p { margin-top: 10px; color: var(--text-2); font-size: 15.5px; } .asig { margin-top: 26px; } .asig__win .win__body { position: relative; } .asig__body { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(0,1fr); } .asig__main { padding: 16px 18px 20px; min-width: 0; } .asig__side { border-left: 1px solid var(--border-2); background: var(--bg); padding: 14px 16px 16px; min-width: 0; } .asig__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .asig__title { font-family: var(--serif); font-size: 20px; font-weight: 600; } .asig__autobtn { display: inline-flex; align-items: center; gap: 7px; background: var(--navy); color: var(--on-navy); border: none; border-radius: 999px; padding: 8px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: transform .18s, background .2s; } .asig__autobtn:hover { background: var(--navy-2); transform: translateY(-1px); } .asig__autobtn svg { width: 15px; height: 15px; } .asig__legend { margin-left: auto; font-size: 11px; color: var(--text-3); display: inline-flex; align-items: center; gap: 5px; } .asig__ldot { width: 8px; height: 8px; border-radius: 50%; background: #B98A57; display: inline-block; } .asig__lwin { font-size: 9.5px; font-weight: 700; background: rgba(60,90,122,.12); color: var(--blue); border-radius: 999px; padding: 1px 7px; } .asig__banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: rgba(60,90,122,.08); border: 1px solid rgba(60,90,122,.28); border-radius: 12px; padding: 9px 12px; font-size: 12.5px; margin-bottom: 12px; animation: fadeUp .3s ease; } .asig__banner-btns { display: inline-flex; gap: 8px; } .asig__banner-btns button { border-radius: 999px; font-size: 11.5px; font-weight: 700; padding: 6px 12px; border: 1px solid transparent; cursor: pointer; } #asigAllOk { background: var(--navy); color: var(--on-navy); } #asigAllNo { background: none; border-color: rgba(180,92,82,.45); color: var(--red); } /* sin animación de entrada: los grupos se repintan en cada acción y re-animarlos daba sensación de "recarga" (feedback de Nestor 12-jul) */ .asig__group { background: var(--card); border: 1px solid var(--border-2); border-radius: 14px; padding: 12px; margin-bottom: 12px; } .asig__group--prop { border-color: rgba(60,90,122,.4); box-shadow: var(--sh-1); } .asig__ghead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .asig__gname { font-weight: 700; font-size: 13.5px; display: inline-flex; align-items: center; gap: 7px; } .asig__gname .tag { font-size: 9.5px; font-weight: 700; color: var(--gold-ink); background: rgba(184,155,94,.14); padding: 2px 8px; border-radius: 999px; white-space: nowrap; } .asig__ghead .spacer { flex: 1; } .asig__order { border: 1px solid var(--border); background: var(--card); border-radius: 999px; padding: 5px 11px; font-size: 11px; font-weight: 700; color: var(--text-2); display: inline-flex; gap: 5px; align-items: center; cursor: pointer; transition: border-color .18s, color .18s; } .asig__order:hover { border-color: var(--navy); color: var(--ink); } .asig__drvsel { border: 1px solid var(--border); background: var(--bg); border-radius: 9px; padding: 5px 8px; font-size: 11.5px; font-weight: 600; color: var(--ink); max-width: 132px; } .asig__gassign { background: var(--navy); color: var(--on-navy); border: none; border-radius: 999px; padding: 6px 13px; font-size: 11.5px; font-weight: 700; cursor: pointer; } .asig__gassign:hover { background: var(--navy-2); } .asig__gdiscard { background: none; border: 1px solid rgba(180,92,82,.4); color: var(--red); border-radius: 999px; padding: 6px 12px; font-size: 11.5px; font-weight: 700; cursor: pointer; } .asig__gn { font-size: 11px; color: var(--text-3); font-weight: 700; } .asig__gmeta { font-size: 11px; color: var(--green); font-weight: 600; margin: 8px 2px 4px; } .asig__gmeta.is-bad { color: var(--red); } .asig__rows { margin-top: 2px; } .asig__row { display: grid; grid-template-columns: auto auto auto auto minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 8px 6px; border-top: 1px solid var(--border-2); cursor: pointer; border-radius: 9px; transition: background .15s; } .asig__grip { color: var(--text-3); font-size: 11px; letter-spacing: -1.5px; cursor: grab; user-select: none; -webkit-user-select: none; padding: 0 1px; } .asig__row.is-drag { opacity: .4; } .asig__row.over-top { box-shadow: 0 -2.5px 0 0 var(--gold); } .asig__row.over-bot { box-shadow: 0 2.5px 0 0 var(--gold); } .asig__lgrip { font-style: normal; letter-spacing: -1.5px; color: var(--text-3); } .asig__rows .asig__row:first-child { border-top: none; } .asig__row:hover { background: rgba(17,29,49,.03); } .asig__row.is-sel { background: rgba(60,90,122,.08); } .asig__chk { width: 15px; height: 15px; border: 1.5px solid var(--border); border-radius: 4px; background: #fff; position: relative; flex: none; transition: background .15s, border-color .15s; } .asig__row.is-sel .asig__chk { background: var(--navy); border-color: var(--navy); animation: hzChkPop .32s cubic-bezier(.3,1.6,.5,1); } @keyframes hzChkPop { 0% { transform: scale(.4); } 60% { transform: scale(1.22); } 100% { transform: scale(1); } } .asig__row.is-sel .asig__chk::after { content: ""; position: absolute; left: 3px; top: 5px; width: 7px; height: 3.5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); } .asig__num { width: 20px; height: 20px; border-radius: 50%; background: var(--navy); color: var(--on-navy); font-size: 10px; font-weight: 800; display: grid; place-items: center; font-variant-numeric: lining-nums; } .asig__dot { width: 8px; height: 8px; border-radius: 50%; } .asig__who { min-width: 0; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .asig__who b { font-weight: 700; } .asig__who span { color: var(--text-2); } .asig__winchip { font-size: 9.5px; font-weight: 700; background: rgba(60,90,122,.12); color: var(--blue); border-radius: 999px; padding: 1px 7px; white-space: nowrap; margin-left: 4px; } .asig__winchip.is-bad { background: rgba(180,92,82,.14); color: var(--red); } .asig__amt { font-weight: 800; font-size: 12px; font-variant-numeric: lining-nums tabular-nums; } .asig__empty { text-align: center; padding: 26px 10px; color: var(--text-3); font-size: 13px; } .asig__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; background: var(--card); border: 1px solid var(--border-2); border-radius: 12px; padding: 10px 12px; } .asig__stats > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .asig__stats b { font-size: 18px; font-weight: 800; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.01em; } .asig__stats span { font-size: 9px; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; } .asig__gan { color: var(--green); } .asig__driver { margin-top: 10px; background: rgba(47,125,104,.08); border: 1px solid rgba(47,125,104,.28); border-radius: 12px; padding: 9px 12px; font-size: 12px; color: var(--ink); animation: fadeUp .25s ease; } .asig__driver b { font-weight: 800; } /* sin selección: el slot queda RESERVADO con un texto neutro (la caja no salta) */ .asig__driver.is-empty { background: none; border-color: var(--border-2); color: var(--text-3); animation: none; } .asig__map { margin-top: 10px; border: 1px solid var(--border-2); border-radius: 12px; overflow: hidden; height: 390px; } .asig__map, .pm-nav__map, .mk-map { background: linear-gradient(110deg, #EDE9DE 30%, #F8F6F0 45%, #EDE9DE 60%); background-size: 220% 100%; animation: hzShimmer 1.8s linear infinite; } @keyframes hzShimmer { from { background-position: 130% 0; } to { background-position: -90% 0; } } .asig__map .leaflet-control-attribution { font-size: 9px; background: rgba(255,255,255,.72); } /* Pines del mapa (divIcon de Leaflet, calcados del panel real) */ .hz-pin-wrap { background: none; border: none; } /* pins que CAEN al poblarse el mapa por primera vez */ .asig__map.is-borning .leaflet-overlay-pane path.leaflet-interactive { animation: hzPinDrop .55s cubic-bezier(.3,1.4,.5,1) backwards; } .asig__map.is-borning .leaflet-overlay-pane path.leaflet-interactive:nth-child(2) { animation-delay: .05s; } .asig__map.is-borning .leaflet-overlay-pane path.leaflet-interactive:nth-child(3) { animation-delay: .1s; } .asig__map.is-borning .leaflet-overlay-pane path.leaflet-interactive:nth-child(4) { animation-delay: .15s; } .asig__map.is-borning .leaflet-overlay-pane path.leaflet-interactive:nth-child(5) { animation-delay: .2s; } .asig__map.is-borning .leaflet-overlay-pane path.leaflet-interactive:nth-child(6) { animation-delay: .25s; } .asig__map.is-borning .leaflet-overlay-pane path.leaflet-interactive:nth-child(7) { animation-delay: .3s; } .asig__map.is-borning .leaflet-overlay-pane path.leaflet-interactive:nth-child(8) { animation-delay: .35s; } .asig__map.is-borning .leaflet-overlay-pane path.leaflet-interactive:nth-child(9) { animation-delay: .4s; } .asig__map.is-borning .leaflet-overlay-pane path.leaflet-interactive:nth-child(10) { animation-delay: .45s; } .asig__map.is-borning .leaflet-overlay-pane path.leaflet-interactive:nth-child(n+11) { animation-delay: .5s; } @keyframes hzPinDrop { from { opacity: 0; transform: translateY(-16px); } } /* el trazo de la ruta entra con un fundido suave al actualizarse */ .hz-route { animation: hzRouteIn .3s ease; } @keyframes hzRouteIn { from { opacity: 0; } } .hz-routepin { width: 26px; height: 26px; border-radius: 50%; background: #2B5AA6; border: 2.5px solid #fff; color: #fff; font: 800 12px/21px Inter, sans-serif; text-align: center; box-shadow: 0 1px 5px rgba(0,0,0,.35); } .hz-routepin.is-bad { background: #C43C2E; } .hz-depot { width: 30px; height: 30px; border-radius: 8px; background: #111D31; border: 2px solid #fff; color: #EDE7D8; display: grid; place-items: center; box-shadow: 0 1px 6px rgba(0,0,0,.4); } .hz-depot svg { width: 16px; height: 16px; } .asig__note { margin-top: 10px; font-size: 10.5px; color: var(--text-3); line-height: 1.5; } .asig__red { color: var(--red); } #asigBarGo { background: var(--on-navy); color: var(--navy); font-weight: 800; border: none; border-radius: 999px; padding: 8px 16px; font-size: 12.5px; margin-left: auto; cursor: pointer; } #asigBarGo:hover { background: #fff; } #asigBarX { background: none; border: none; color: var(--on-navy-soft); font-size: 14px; cursor: pointer; } .asig__done { background: rgba(47,125,104,.07); border: 1px solid rgba(47,125,104,.3); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; display: flex; align-items: center; gap: 9px; font-size: 12.5px; flex-wrap: wrap; animation: fadeUp .3s ease; } .asig__done .ok, .asig__morph .ok { width: 22px; height: 22px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font-size: 12px; flex: none; } /* METAMORFOSIS grupo → tarjeta: al asignarse, el grupo se encoge y se tiñe de verde hasta quedar como la tarjeta "Ruta de …" (se entiende de dónde proviene). El swap real ocurre al terminar, en la misma posición. */ .asig__group.is-morphing { overflow: hidden; position: relative; background: rgba(47,125,104,.07); border-color: rgba(47,125,104,.3); transition: height .75s cubic-bezier(.45,.05,.25,1), background .5s ease, border-color .5s ease; } .asig__group.is-morphing .asig__ghead, .asig__group.is-morphing .asig__gmeta, .asig__group.is-morphing .asig__rows { opacity: 0; transition: opacity .3s ease; } .asig__morph { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; gap: 9px; padding: 10px 12px; font-size: 12.5px; color: var(--ink); opacity: 0; animation: hzMorphIn .45s ease .3s forwards; } .asig__morph b { font-weight: 800; } @keyframes hzMorphIn { to { opacity: 1; } } .asig__done .undo { margin-left: auto; background: none; border: none; color: var(--text-3); font-size: 11.5px; font-weight: 700; text-decoration: underline; cursor: pointer; } .asig__toast { position: absolute; top: 56px; left: 50%; transform: translateX(-50%); z-index: 6; background: var(--navy); color: var(--on-navy); border-radius: 999px; padding: 8px 16px; font-size: 12.5px; font-weight: 600; box-shadow: var(--sh-2); animation: fadeUp .25s ease; white-space: nowrap; max-width: 92%; overflow: hidden; text-overflow: ellipsis; } /* ===== Celebración "Ruta asignada" (overlay sobre el mapa) ===== */ .asig__cele { position: absolute; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 14px; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .34s ease, visibility .34s; background: radial-gradient(120% 92% at 50% 28%, rgba(237,233,222,.42), rgba(237,233,222,.68)); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .asig__cele.is-on { opacity: 1; visibility: visible; } .asig__cele-card { position: relative; z-index: 1; width: min(342px, 94%); background: var(--card); border: 1px solid var(--border-2); border-radius: 16px; box-shadow: 0 18px 46px rgba(17,29,49,.22); padding: 0 18px 16px; overflow: hidden; } .asig__cele.is-on .asig__cele-card { animation: celeCard .5s cubic-bezier(.2,.9,.3,1.2) backwards; } @keyframes celeCard { from { transform: translateY(10px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } } /* escena de la moto en marcha */ .asig__cele-scene { position: relative; height: 92px; margin: 0 -18px 12px; overflow: hidden; background: linear-gradient(180deg, rgba(43,90,166,.09), rgba(43,90,166,0)); } .asig__cele-sun { position: absolute; top: 12px; left: 50%; width: 46px; height: 46px; margin-left: -23px; border-radius: 50%; background: radial-gradient(circle, rgba(184,155,94,.42), rgba(184,155,94,0) 70%); } .asig__cele-road { position: absolute; left: 0; right: 0; bottom: 15px; height: 2px; background: repeating-linear-gradient(90deg, var(--text-3) 0 13px, transparent 13px 30px); opacity: .5; animation: celeRoad .5s linear infinite; } @keyframes celeRoad { to { background-position: -30px 0; } } .asig__cele-moto { position: absolute; left: 50%; bottom: 6px; width: 69px; height: 65px; margin-left: -33px; color: var(--navy); animation: celeBob .5s ease-in-out infinite; } .asig__cele-moto img { width: 69px; height: 65px; display: block; object-fit: contain; } @keyframes celeBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } .asig__cele-dust { position: absolute; left: -2px; bottom: 10px; width: 26px; height: 20px; } .asig__cele-dust i { position: absolute; height: 2px; background: var(--text-3); border-radius: 2px; opacity: 0; right: 0; } .asig__cele-dust i:nth-child(1) { width: 11px; bottom: 2px; animation: celeDust .6s linear infinite; } .asig__cele-dust i:nth-child(2) { width: 7px; bottom: 8px; animation: celeDust .6s linear infinite .2s; } .asig__cele-dust i:nth-child(3) { width: 13px; bottom: -3px; animation: celeDust .6s linear infinite .4s; } @keyframes celeDust { 0% { opacity: .5; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-22px); } } /* cabecera: avatar + nombre + "Ruta asignada" */ .asig__cele-head { display: flex; align-items: center; gap: 11px; } .asig__cele-av { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: var(--on-navy); font-weight: 800; font-size: 13px; letter-spacing: .02em; box-shadow: 0 0 0 3px rgba(43,90,166,.16); } .asig__cele-ht { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .asig__cele-name { font-size: 16px; font-weight: 800; color: var(--ink); line-height: 1.12; } .asig__cele-sub { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--green); } .asig__cele-sub svg { width: 13px; height: 13px; } .asig__cele.is-on .asig__cele-sub svg { animation: hzChkPop .4s .18s backwards; } /* indicadores */ .asig__cele-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 13px; background: var(--bg); border: 1px solid var(--border-2); border-radius: 11px; padding: 10px 8px; } .asig__cele-stats > div { display: flex; flex-direction: column; gap: 2px; text-align: center; min-width: 0; } .asig__cele-stats b { font-size: 16px; font-weight: 800; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.01em; } .asig__cele-stats .asig__cele-gan { color: var(--green); } .asig__cele-stats span { font-size: 8.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; } .asig__cele.is-on .asig__cele-stats > div { animation: celeStat .4s backwards; } .asig__cele.is-on .asig__cele-stats > div:nth-child(1) { animation-delay: .12s; } .asig__cele.is-on .asig__cele-stats > div:nth-child(2) { animation-delay: .19s; } .asig__cele.is-on .asig__cele-stats > div:nth-child(3) { animation-delay: .26s; } .asig__cele.is-on .asig__cele-stats > div:nth-child(4) { animation-delay: .33s; } @keyframes celeStat { from { opacity: 0; transform: translateY(8px); } } /* confeti (canvas, por delante de la tarjeta) */ .asig__cele-confetti { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .asig__cele-moto, .asig__cele-road, .asig__cele-dust i, .asig__cele.is-on .asig__cele-card, .asig__cele.is-on .asig__cele-stats > div, .asig__cele.is-on .asig__cele-sub svg { animation: none !important; } .asig__cele.is-on .asig__cele-card, .asig__cele.is-on .asig__cele-stats > div { opacity: 1; transform: none; } } @media (max-width: 900px) { .asig__body { grid-template-columns: 1fr; } .asig__side { border-left: none; border-top: 1px solid var(--border-2); } .asig__map { height: 240px; } /* celebración compacta para que quepa en el mapa de 240px */ .asig__cele-card { width: min(300px, 96%); padding: 0 14px 12px; } .asig__cele-scene { height: 70px; margin: 0 -14px 9px; } .asig__cele-moto { transform: scale(.8); transform-origin: bottom center; } .asig__cele-av { width: 32px; height: 32px; font-size: 12px; } .asig__cele-name { font-size: 14.5px; } .asig__cele-sub { font-size: 11px; } .asig__cele-stats { margin-top: 10px; padding: 8px 6px; gap: 5px; } .asig__cele-stats b { font-size: 13.5px; } .asig__cele-stats span { font-size: 7.5px; } /* tarjetas de ruta asignada COMPACTAS: sin detalle, una linea, Deshacer al lado */ .asig__done { padding: 8px 11px; font-size: 12px; gap: 8px; flex-wrap: nowrap; align-items: center; } .asig__done .ok { width: 18px; height: 18px; font-size: 10px; } .asig__done-det { display: none; } .asig__done-txt { flex: 1; min-width: 0; } .asig__done .undo { flex: none; margin-left: 0; } /* también en móvil/tablet la lista scrollea en un carril FIJO: la demo no respira */ .asig__main { padding: 14px 12px 10px; height: 440px; overflow-y: auto; scrollbar-width: thin; } } @media (max-width: 560px) { .asig__who { white-space: normal; } .asig__legend { display: none; } .asig__stats b { font-size: 16px; } .asig__drvsel { max-width: 110px; } } /* ---------- Ayuda bajo CTAs del hero ---------- */ .btn-help { margin-top: 14px; font-size: 13.5px; color: var(--text-3); max-width: 52ch; } .btn-help b { color: var(--ink); font-weight: 700; } /* ---------- Decisión inteligente: capas de valor ---------- */ .value-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 42px; } .value-stat { background: var(--card); border: 1px solid var(--border-2); border-radius: 16px; padding: 24px 22px; box-shadow: var(--sh-1); } .value-stat__v { display: block; font-family: var(--sans); font-variant-numeric: lining-nums tabular-nums; font-weight: 800; font-size: clamp(26px, 3vw, 34px); color: var(--navy); letter-spacing: -.02em; } .value-stat__l { display: block; margin-top: 8px; font-size: 13.5px; color: var(--text-2); line-height: 1.5; } .value-close { max-width: 780px; margin: 36px auto 0; text-align: center; font-family: var(--serif); font-size: clamp(19px, 2.2vw, 25px); line-height: 1.45; color: var(--ink); } .value-close b { color: var(--gold-ink); font-weight: 600; } /* ---------- Prueba de valor (comparación) ---------- */ .compare { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 46px; } .compare__card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 30px 28px; position: relative; box-shadow: var(--sh-1); } .compare__card--good { border-color: rgba(184,155,94,.5); box-shadow: var(--sh-2); background: linear-gradient(180deg, #FBF8F0, #FAF8F2); } .compare__tag { font-family: var(--serif); font-size: 23px; font-weight: 600; color: var(--ink); margin-bottom: 4px; display: flex; align-items: center; gap: 10px; } .compare__tag .k { font-size: 12px; font-family: var(--sans); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink); } .compare__price { font-size: 13.5px; color: var(--text-3); margin-bottom: 20px; } .compare__list li { display: flex; gap: 11px; padding: 9px 0; border-top: 1px solid var(--border-2); font-size: 15px; color: var(--text-2); } .compare__list li:first-child { border-top: none; } .compare__list .ic { flex: none; width: 20px; height: 20px; margin-top: 1px; } .compare__list--bad .ic { color: var(--red); } .compare__list--good .ic { color: var(--green); } .compare__list--good li { color: var(--ink); } /* ---------- Problema (dolores) ---------- */ .pains { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; } .pain { background: var(--card); border: 1px solid var(--border-2); border-radius: var(--r); padding: 26px 24px; transition: transform .3s, box-shadow .3s, border-color .3s; } .pain:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--border); } .pain__ic { width: 46px; height: 46px; border-radius: 12px; background: rgba(180,92,82,.08); color: var(--red); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .pain__ic svg { width: 23px; height: 23px; } .pain h3 { font-family: var(--serif); font-size: 21px; font-weight: 600; margin-bottom: 6px; } .pain p { font-size: 14.5px; color: var(--text-2); } /* ---------- Qué es (3 superficies) ---------- */ .surfaces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 46px; } .surface { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 30px 28px; box-shadow: var(--sh-1); transition: transform .3s, box-shadow .3s; } .surface:hover { transform: translateY(-5px); box-shadow: var(--sh-2); } .surface__n { font-family: var(--sans); font-variant-numeric: lining-nums; font-size: 13px; color: var(--gold-ink); font-weight: 700; letter-spacing: .12em; } .surface__ic { width: 54px; height: 54px; border-radius: 14px; background: #fff; border: 1px solid var(--border); color: var(--navy); display: flex; align-items: center; justify-content: center; margin: 14px 0 18px; box-shadow: var(--sh-1); } .surface__ic svg { width: 26px; height: 26px; } .surface h3 { font-family: var(--serif); font-size: 25px; font-weight: 600; margin-bottom: 8px; } .surface p { font-size: 15px; color: var(--text-2); } .surface__tag { display: inline-block; margin-top: 14px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-ink); background: rgba(184,155,94,.12); border: 1px solid rgba(184,155,94,.3); padding: 3px 10px; border-radius: 999px; } .flowline { margin-top: 40px; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; } .flowline .node { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); font-weight: 600; font-size: 14px; box-shadow: var(--sh-1); } .flowline .node svg { width: 17px; height: 17px; color: var(--navy); } .flowline .arrow { color: var(--text-3); width: 26px; height: 16px; flex: none; } /* ---------- Producto en acción (tabs) ---------- */ .product { } .tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 40px auto 0; } .tab { padding: 10px 18px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); font-weight: 600; font-size: 14px; color: var(--text-2); transition: all .22s; } .tab:hover { border-color: var(--navy); color: var(--ink); } .tab.is-active { background: var(--navy); color: var(--on-navy); border-color: var(--navy); box-shadow: var(--sh-1); } .panels { margin-top: 40px; } /* Sin JS: se muestran todos los paneles apilados (contenido accesible). Con JS: tabs. */ .panel { display: block; } .js .panel { display: none; } .js .panel.is-active { display: block; animation: fadeUp .5s ease both; } .panel__grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(28px, 4vw, 56px); align-items: center; } /* Los hijos de estos grids deben poder encoger por debajo de su min-content (textos nowrap dentro de los mockups); sin esto el marco desborda el viewport en móvil */ .panel__grid > *, .split > *, .security__grid > *, .founders__grid > * { min-width: 0; } .panel__copy h3 { font-family: var(--serif); font-size: clamp(26px, 3vw, 38px); font-weight: 600; line-height: 1.08; } .panel__copy .p { margin-top: 14px; color: var(--text-2); font-size: 16px; } .panel__copy ul { margin-top: 22px; display: flex; flex-direction: column; gap: 13px; } .panel__copy li { display: flex; gap: 12px; font-size: 15.5px; color: var(--ink); align-items: flex-start; } .panel__copy li .ic { flex: none; width: 22px; height: 22px; color: var(--navy); margin-top: 1px; } .panel__shot { position: relative; } .shot-note { margin-top: 12px; font-size: 12px; color: var(--text-3); text-align: center; } /* Clones de la marquesina de funciones: solo existen para el bucle infinito en móvil; si el viewport crece (rotación a horizontal) se ocultan */ @media (min-width: 561px) { .feature--clone { display: none; } } /* Hint de carrusel (solo se muestra en móvil, donde hay carruseles) */ .swipe-hint { display: none; align-items: center; justify-content: center; gap: 7px; margin-top: 6px; font-size: 12.5px; color: var(--text-3); font-weight: 500; } .swipe-hint svg { width: 15px; height: 15px; flex: none; animation: hintNudge 1.8s ease-in-out infinite; } @keyframes hintNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } } /* ---------- Cómo funciona: stepper interactivo ---------- */ .flow { margin-top: 56px; display: grid; grid-template-columns: repeat(5, 1fr); position: relative; } .flow__step { position: relative; z-index: 2; } .flow__svg { position: absolute; top: 0; left: 0; width: 100%; height: 54px; z-index: 0; overflow: visible; } .flow__path-bg { fill: none; stroke: var(--border); stroke-width: 2.5; } .flow__path-fill { fill: none; stroke: var(--navy); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .55s cubic-bezier(.4,.1,.2,1); } .flow__step { position: relative; z-index: 1; background: none; border: none; text-align: center; padding: 0 16px; display: flex; flex-direction: column; align-items: center; cursor: pointer; } .flow__num { width: 54px; height: 54px; border-radius: 50%; border: 1.5px solid var(--border); color: var(--navy); background: #fff; font-family: var(--sans); font-variant-numeric: lining-nums; font-weight: 700; font-size: 20px; display: grid; place-items: center; margin-bottom: 18px; position: relative; box-shadow: var(--sh-1); transition: transform .3s, background .3s, color .3s, border-color .3s, box-shadow .3s; } .flow__num-n, .flow__num-ic { grid-area: 1 / 1; transition: opacity .25s, transform .25s; } .flow__num-ic { width: 24px; height: 24px; opacity: 0; transform: scale(.6); } .flow__step.is-done .flow__num { border-color: var(--navy); color: var(--navy); } .flow__step.is-active .flow__num { background: var(--navy); border-color: var(--navy); color: var(--on-navy); transform: scale(1.34); box-shadow: 0 14px 30px rgba(17,29,49,.26); } .flow__step.is-active .flow__num-n { opacity: 0; transform: scale(.6); } .flow__step.is-active .flow__num-ic { opacity: 1; transform: scale(1); color: #fff; } .flow__t { font-family: var(--serif); font-size: 20px; font-weight: 600; margin-bottom: 7px; transition: color .25s; } .flow__p { font-size: 14px; color: var(--text-2); max-width: 24ch; } .flow__step.is-active .flow__t { color: var(--navy); } /* ---------- Funciones (grid) ---------- */ .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 48px; } @media (min-width: 721px) { .feature--clone { display: none; } } /* Entrada sofisticada 3D/espiral de las 12 funciones. El estado oculto se gatea con :not(.in) para que al añadir .in NINGUNA regla de transform inicial (incluida la de :nth-child(even)) gane por especificidad. */ .features--3d { perspective: 1300px; } .features--3d .feature { transition: opacity .7s ease, transform .9s cubic-bezier(.16,.72,.18,1); will-change: transform, opacity; transform-origin: 50% 120%; } .js .features--3d:not(.in) .feature { opacity: 0; transform: translateY(52px) rotateX(26deg) rotateZ(-3deg) scale(.9); } .js .features--3d:not(.in) .feature:nth-child(even) { transform: translateY(52px) rotateX(26deg) rotateZ(3deg) scale(.9); } .features--3d.in .feature:nth-child(1) { transition-delay: .04s; } .features--3d.in .feature:nth-child(2) { transition-delay: .11s; } .features--3d.in .feature:nth-child(3) { transition-delay: .18s; } .features--3d.in .feature:nth-child(4) { transition-delay: .16s; } .features--3d.in .feature:nth-child(5) { transition-delay: .23s; } .features--3d.in .feature:nth-child(6) { transition-delay: .30s; } .features--3d.in .feature:nth-child(7) { transition-delay: .28s; } .features--3d.in .feature:nth-child(8) { transition-delay: .35s; } .features--3d.in .feature:nth-child(9) { transition-delay: .42s; } .features--3d.in .feature:nth-child(10) { transition-delay: .40s; } .features--3d.in .feature:nth-child(11) { transition-delay: .47s; } .features--3d.in .feature:nth-child(12) { transition-delay: .54s; } .feature { background: var(--card); border: 1px solid var(--border-2); border-radius: var(--r); padding: 24px 22px; transition: transform .3s, box-shadow .3s, border-color .3s; } .feature:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--border); } .feature__ic { width: 44px; height: 44px; border-radius: 11px; background: rgba(17,29,49,.05); color: var(--navy); display: flex; align-items: center; justify-content: center; margin-bottom: 15px; } .feature__ic svg { width: 22px; height: 22px; } .feature h3 { font-family: var(--serif); font-size: 20px; font-weight: 600; margin-bottom: 5px; } .feature p { font-size: 14px; color: var(--text-2); } /* ---------- App motorizado + Portal (dos columnas) ---------- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; } .split--rev .split__media { order: 2; } .split__copy .headline { margin-top: 16px; } .split__copy .sub { margin-top: 16px; } .split__copy ul { margin-top: 24px; display: grid; gap: 13px; } .split__copy li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; color: var(--ink); } .split__copy li .ic { flex: none; width: 22px; height: 22px; color: var(--navy); margin-top: 1px; } /* Teléfono — app del motorizado (demo interactiva) */ .phone { width: 300px; max-width: 82%; margin-inline: auto; background: var(--navy); border-radius: 42px; padding: 12px; border: 1px solid rgba(17,29,49,.6); /* sombra en dos capas para que el celular FLOTE sobre el fondo suave */ box-shadow: 0 42px 80px -26px rgba(17,29,49,.4), 0 18px 36px -14px rgba(17,29,49,.22), 0 2px 8px rgba(17,29,49,.1); } .phone__screen { background: var(--bg); border-radius: 32px; overflow: hidden; position: relative; } /* encendido del teléfono: pantalla oscura → logo → app */ .phone__boot { position: absolute; inset: 0; z-index: 12; display: grid; place-items: center; background: #0C1526; opacity: 0; pointer-events: none; transition: opacity .5s ease; } .phone__boot .mark { width: 40px; height: 49px; color: #C8AD6A; opacity: 0; transform: scale(.82); transition: opacity .45s ease .15s, transform .6s cubic-bezier(.3,1.3,.5,1) .15s; } .phone__boot.is-on { opacity: 1; pointer-events: auto; } .phone__boot.is-on .mark { opacity: 1; transform: scale(1); } /* Barra de estado del celular: hora + isla + señal/wifi/batería. Con WhatsApp abierto (.is-wsp) se tiñe de verde, como en un teléfono real. */ .phone__status { position: relative; height: 30px; display: flex; align-items: center; justify-content: space-between; padding: 4px 18px 0; font-size: 11.5px; font-weight: 700; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; transition: background .25s, color .25s; } .phone__isle { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); width: 66px; height: 15px; border-radius: 999px; background: rgba(17,29,49,.9); } .phone__sig { display: inline-flex; align-items: center; gap: 4.5px; } .phone__sig svg { width: 13px; height: 12px; } .phone.is-wsp .phone__status { background: #0D5D52; color: #E6F2EF; } .phone.is-wsp .phone__isle { background: rgba(0,0,0,.5); } /* navegación abierta: la barra de estado toma el verde del banner de giro */ .phone.is-nav .phone__status { background: var(--green); color: #EAF3EF; } .phone.is-nav .phone__isle { background: rgba(0,0,0,.45); } .pm-app { position: relative; height: 532px; } .pm-view { position: absolute; inset: 0 0 62px 0; display: none; flex-direction: column; } .pm-view.is-active { display: flex; animation: fadeUp .28s ease; } .pm-head { display: flex; align-items: center; gap: 10px; padding: 6px 14px 11px; border-bottom: 1px solid var(--border-2); } .pm-h { font-family: var(--serif); font-weight: 600; font-size: 17px; } .pm-sub { font-size: 11px; color: var(--text-3); } .pm-count { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--gold-ink); background: rgba(184,155,94,.12); padding: 3px 9px; border-radius: 999px; } .pm-back { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--card); display: grid; place-items: center; cursor: pointer; } .pm-back svg { width: 15px; height: 15px; transform: rotate(180deg); color: var(--ink); } .pm-scroll { flex: 1; overflow-y: auto; padding: 13px 14px; display: flex; flex-direction: column; gap: 10px; } .pm-scroll::-webkit-scrollbar { width: 0; } /* Paradas de la ruta */ .pm-parada { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--border-2); border-radius: 12px; padding: 11px 12px; cursor: pointer; transition: border-color .2s, transform .2s, box-shadow .2s; } .pm-parada:hover { border-color: var(--gold); transform: translateY(-1px); box-shadow: var(--sh-1); } .pm-parada.is-done { opacity: .5; } .pm-parada__n { width: 24px; height: 24px; border-radius: 50%; background: var(--navy); color: var(--on-navy); font-size: 11px; font-weight: 700; display: grid; place-items: center; flex: none; } .pm-parada.is-done .pm-parada__n { background: var(--green); } .pm-parada__b { flex: 1; min-width: 0; } .pm-parada__name { display: block; font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pm-parada__addr { display: block; font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pm-parada__r { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; } .pm-parada__amt { font-weight: 700; font-size: 12px; } /* Detalle */ .pm-tienda { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-2); margin: 8px 0 0; } .pm-tienda svg { width: 14px; height: 14px; color: var(--navy); } .pm-prod { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink); font-weight: 600; margin: 8px 0 2px; } .pm-prod svg { width: 15px; height: 15px; color: var(--navy); flex: none; } .pm-parada__prod { display: block; font-size: 10.5px; color: var(--gold-ink); font-weight: 600; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Botones app */ .pm-btn { border: none; border-radius: 11px; padding: 12px; font-weight: 700; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; transition: transform .18s, background .2s, filter .2s; } .pm-btn svg { width: 16px; height: 16px; } .pm-btn:hover { transform: translateY(-1px); } .pm-btn--p { background: var(--navy); color: var(--on-navy); } .pm-btn--g { background: var(--card); border: 1px solid var(--border); color: var(--ink); } .pm-btn--ghost { background: none; color: var(--red); } .pm-btn--warn { background: rgba(196,154,69,.18); color: #7E611B; } .pm-btn--wide { width: 100%; } .pm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } /* Cards (reutilizadas por detalle/caja/cuenta) */ .pm-card { background: var(--card); border: 1px solid var(--border-2); border-radius: 14px; padding: 13px; box-shadow: var(--sh-1); } .pm-card__name { font-weight: 700; font-size: 15px; } .pm-card__addr { font-size: 12px; color: var(--text-3); margin-top: 2px; } .pm-card__row { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-2); font-size: 12px; } .pm-card__amt { font-weight: 800; font-size: 15px; } /* Campos de cobro / novedad */ .pm-field { display: flex; flex-direction: column; gap: 7px; } .pm-field > label { font-size: 10.5px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; } .pm-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .pm-method { border: 1px solid var(--border); background: var(--card); border-radius: 9px; padding: 9px 4px; font-size: 11.5px; font-weight: 600; color: var(--text-2); cursor: pointer; transition: all .18s; } .pm-method:hover { border-color: var(--navy); } .pm-method.is-active { background: var(--navy); color: var(--on-navy); border-color: var(--navy); } .pm-amount { font-family: var(--sans); font-variant-numeric: lining-nums tabular-nums; font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); } .pm-split { border: 1px dashed var(--border); background: none; border-radius: 9px; padding: 9px; font-size: 12px; font-weight: 600; color: var(--gold-ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .pm-split svg { width: 14px; height: 14px; } .pm-evid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .pm-evid__b { border: 1px solid var(--border); background: var(--card); border-radius: 9px; padding: 11px; font-size: 12px; font-weight: 600; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: border-color .18s; } .pm-evid__b:hover { border-color: var(--gold); } .pm-evid__b svg { width: 15px; height: 15px; color: var(--gold-ink); } .pm-motivos { display: flex; flex-direction: column; gap: 6px; } .pm-motivo { text-align: left; border: 1px solid var(--border); background: var(--card); border-radius: 9px; padding: 10px 12px; font-size: 12.5px; font-weight: 600; color: var(--text-2); cursor: pointer; transition: all .18s; } .pm-motivo.is-active { border-color: var(--gold); background: rgba(184,155,94,.08); color: var(--ink); } /* Caja / cuenta */ .pm-cash { background: var(--navy); color: var(--on-navy); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 2px; } .pm-cash__l { font-size: 11px; color: var(--on-navy-soft); } .pm-cash__v { font-family: var(--sans); font-variant-numeric: lining-nums tabular-nums; font-size: 27px; font-weight: 800; letter-spacing: -.02em; } .pm-line { display: flex; justify-content: space-between; font-size: 12.5px; padding: 7px 0; color: var(--text-2); } .pm-line b { color: var(--ink); font-weight: 700; } .pm-line--top { border-top: 1px solid var(--border-2); margin-top: 4px; padding-top: 9px; } .pm-perfil { display: flex; align-items: center; gap: 12px; } .pm-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--navy); color: var(--on-navy); display: grid; place-items: center; font-weight: 700; font-size: 15px; font-family: var(--serif); } .pm-perfil__name { font-weight: 700; font-size: 15px; } .pm-perfil__sub { font-size: 11.5px; color: var(--text-3); } /* Chat WhatsApp simulado (vista de la app del motorizado) */ .pm-view--full { inset: 0 !important; z-index: 5; } .wsp { display: flex; flex-direction: column; height: 100%; background: #EDE6DB; } .wsp__actions { margin-left: auto; display: inline-flex; align-items: center; gap: 16px; } .wsp__actions svg { width: 19px; height: 19px; color: #fff; } .wsp__head { flex: none; display: flex; align-items: center; gap: 9px; padding: 7px 12px 9px; background: #0D5D52; color: #fff; } .wsp__back { background: none; border: none; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; padding: 0 6px 2px 2px; } .wsp__av { width: 30px; height: 30px; border-radius: 50%; background: #C8AD6A; color: #2A2308; font-weight: 800; font-size: 11px; display: grid; place-items: center; flex: none; } .wsp__who { min-width: 0; } .wsp__who b { display: block; font-size: 13px; } .wsp__who span { display: block; font-size: 10.5px; color: #B9D8D2; } .wsp__chat { flex: 1; overflow-y: auto; padding: 12px 10px; display: flex; flex-direction: column; gap: 7px; } .wsp__chat::-webkit-scrollbar { width: 0; } .wsp__msg { max-width: 84%; padding: 7px 10px; border-radius: 10px; font-size: 12px; line-height: 1.45; box-shadow: 0 1px 1px rgba(0,0,0,.08); animation: fadeUp .25s ease; } .wsp__msg.out { align-self: flex-end; background: #D9FDD3; border-top-right-radius: 3px; color: #111; } .wsp__msg.in { align-self: flex-start; background: #fff; border-top-left-radius: 3px; color: #111; } .wsp__time { display: block; font-size: 9px; color: rgba(17,29,49,.45); text-align: right; margin-top: 3px; } .wsp__dots { display: inline-flex; gap: 4px; padding: 2px 2px; } .wsp__dots i { width: 6px; height: 6px; border-radius: 50%; background: #9AA49F; animation: wspdot 1s infinite; } .wsp__dots i:nth-child(2) { animation-delay: .15s; } .wsp__dots i:nth-child(3) { animation-delay: .3s; } @keyframes wspdot { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } } .wsp__loc { display: flex; gap: 8px; align-items: center; } .wsp__loc > svg { width: 26px; height: 26px; color: #C43C2E; flex: none; } .wsp__loc b { display: block; font-size: 12px; } .wsp__loc span span { display: block; font-size: 10.5px; color: #5B655F; } .wsp__bottombar { flex: none; display: flex; align-items: center; gap: 7px; margin: 7px 8px 9px; } .wsp__field { flex: 1; display: flex; align-items: center; gap: 9px; background: #fff; border-radius: 999px; padding: 8px 12px; font-size: 12.5px; color: #8B948E; box-shadow: 0 1px 1px rgba(0,0,0,.06); } .wsp__field span { flex: 1; } .wsp__field svg { width: 19px; height: 19px; color: #8B948E; flex: none; } .wsp__mic { flex: none; width: 38px; height: 38px; border-radius: 50%; border: none; background: #0FA884; color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.2); } .wsp__mic svg { width: 18px; height: 18px; } /* Botón de reinicio de la demo del teléfono */ .pm-resetdemo { display: block; margin: 10px auto 0; background: none; border: 1px solid var(--border); border-radius: 999px; padding: 7px 16px; font-size: 12px; font-weight: 700; color: var(--text-2); cursor: pointer; transition: border-color .18s, color .18s; } .pm-resetdemo:hover { border-color: var(--navy); color: var(--ink); } /* Tab bar */ .pm-tabbar { position: absolute; left: 0; right: 0; bottom: 0; height: 62px; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--card); border-top: 1px solid var(--border-2); } .pm-tab { border: none; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10px; font-weight: 600; color: var(--text-3); cursor: pointer; } .pm-tab svg { width: 20px; height: 20px; } .pm-tab.is-active { color: var(--navy); } .pm-tab.is-active svg { color: var(--navy); } /* Mapa / navegación estilo Google Maps (falsa perspectiva, SVG) */ .pm-nav { display: flex; flex-direction: column; height: 100%; } .pm-nav__banner { flex: none; display: flex; align-items: center; gap: 11px; padding: 13px 14px; background: var(--green); color: #EAF3EF; } .pm-nav__turnic { width: 36px; height: 36px; border-radius: 9px; background: rgba(255,255,255,.18); display: grid; place-items: center; flex: none; } .pm-nav__turnic svg { width: 20px; height: 20px; color: #fff; transition: transform .3s; } .pm-nav__turntext { flex: 1; min-width: 0; } .pm-nav__turntext b { display: block; font-size: 13.5px; color: #fff; } .pm-nav__turntext span { display: block; font-size: 11px; color: #C4E0D6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pm-nav__near { font-family: var(--sans); font-variant-numeric: lining-nums; font-weight: 800; font-size: 17px; flex: none; color: #fff; } .pm-nav__scene { position: relative; flex: 1; overflow: hidden; isolation: isolate; background: #E9E6DE; perspective: 820px; perspective-origin: 50% 62%; } /* horizonte difuminado del 3D: profundo, esconde la distancia y los bordes del lienzo al girar */ .pm-nav__scene::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 34%; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(233,230,222,1) 0%, rgba(233,230,222,.85) 35%, rgba(233,230,222,0) 100%); } /* Mapa de navegación en vivo, estilo cabina: el plano se INCLINA (3D) y ROTA según el rumbo — la moto siempre mira al frente y en las curvas gira el mundo, no la flecha. El lienzo es 2x para que nunca se vean bordes al rotar; su centro (donde va el puck) cae al 62% de la escena. */ /* Lienzo calculado para cubrir todos los giros SIN pasarse del límite de textura de iOS (~4096px @3x): 260% x 150%, centro clavado al punto de cámara (50% / 62% de la escena). */ .pm-nav__map { position: absolute; left: -80%; top: -13%; width: 260%; height: 150%; z-index: 1; transform: rotateX(40deg) rotateZ(var(--nav-rot, 0deg)); transform-origin: 50% 50%; } .pm-nav__map .leaflet-pane, .pm-nav__map .leaflet-control-container { pointer-events: none; } /* puck del motorizado, estilo app de viajes: disco blanco + flecha navy + halo. Es un overlay FIJO de la escena: siempre mira al frente; el mapa gira debajo. */ .nav-puck { position: relative; width: 34px; height: 34px; display: grid; place-items: center; } .nav-puck--fixed { position: absolute; left: 50%; top: 62%; transform: translate(-50%, -50%); z-index: 3; pointer-events: none; } .nav-puck::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(43,90,166,.28); animation: navPulse 1.9s ease-out infinite; } .nav-puck svg { position: relative; width: 26px; height: 26px; background: #fff; border-radius: 50%; box-shadow: 0 2px 8px rgba(17,29,49,.4); padding: 4px; } .nav-puck svg path { fill: #2B5AA6; } @keyframes navPulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } } /* pin de destino */ .nav-dest { width: 20px; height: 20px; border-radius: 50%; background: #C43C2E; border: 3.5px solid #fff; box-shadow: 0 2px 8px rgba(17,29,49,.4); } .mz-map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; } .mz-st { font-family: var(--sans); font-size: 5.4px; fill: #9A9484; font-weight: 600; letter-spacing: .2px; } .mz-poitx { font-family: var(--sans); font-size: 6.4px; font-weight: 700; } .mz-moto { animation: mzpulse 2.4s ease-in-out infinite; } @keyframes mzpulse { 0%, 100% { opacity: 1; } 50% { opacity: .82; } } .mz-ctrls { position: absolute; right: 11px; top: 52px; z-index: 6; display: flex; flex-direction: column; gap: 8px; } .mz-ctrl { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.95); box-shadow: var(--sh-1); display: grid; place-items: center; } .mz-ctrl svg { width: 16px; height: 16px; } .pm-nav__hud { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 6; transform: translateZ(0); background: rgba(250,248,242,.96); border: 1px solid var(--border-2); border-radius: 12px; padding: 9px 12px; display: flex; align-items: center; flex-wrap: nowrap; gap: 7px; font-size: 12px; color: var(--text-2); box-shadow: var(--sh-2); } .pm-nav__hud b { font-family: var(--sans); font-variant-numeric: lining-nums; font-weight: 800; font-size: 15px; color: var(--green); white-space: nowrap; } .pm-nav__hud > span:not(.pm-nav__dest) { color: var(--border); } .pm-nav__dest { flex: 1; min-width: 0; text-align: right; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pm-nav__backbtn { position: absolute; left: 12px; top: 12px; z-index: 7; transform: translateZ(0); width: 34px; height: 34px; border-radius: 9px; border: none; background: rgba(250,248,242,.95); box-shadow: var(--sh-1); display: grid; place-items: center; cursor: pointer; } .pm-nav__backbtn svg { width: 16px; height: 16px; transform: rotate(180deg); color: var(--navy); } /* ---------- Diferenciadores ---------- */ .diffs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 48px; } .diff { background: var(--card); border: 1px solid var(--border-2); border-radius: var(--r); padding: 24px 20px; transition: transform .3s, box-shadow .3s; } .diff:hover { transform: translateY(-4px); box-shadow: var(--sh-2); } .diff__ic { width: 40px; height: 40px; color: var(--navy); margin-bottom: 14px; } .diff__ic svg { width: 40px; height: 40px; } .diff h3 { font-family: var(--serif); font-size: 19px; font-weight: 600; margin-bottom: 6px; } .diff p { font-size: 13.5px; color: var(--text-2); } /* ---------- Planes ---------- */ /* Toggle de facturación mensual/anual */ .billing { display: inline-flex; position: relative; margin: 26px auto 0; background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 5px; gap: 4px; box-shadow: var(--sh-1); } .billing__opt { position: relative; z-index: 1; border: none; background: none; padding: 10px 20px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--text-2); display: inline-flex; align-items: center; gap: 8px; transition: color .25s; } .billing__opt.is-active { color: var(--on-navy); } .billing__save { font-size: 11px; font-weight: 700; background: rgba(47,125,104,.14); color: var(--green); padding: 2px 8px; border-radius: 999px; transition: background .25s, color .25s; } .billing__opt.is-active .billing__save { background: rgba(200,173,106,.9); color: #2A2308; } .billing__slider { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 5px; width: 100px; background: var(--navy); border-radius: 999px; transition: left .3s cubic-bezier(.4,.1,.2,1), width .3s cubic-bezier(.4,.1,.2,1); } .plan__cycle { font-size: 12px; color: var(--gold-ink); font-weight: 600; margin: -6px 0 14px; min-height: 15px; } .plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 40px; align-items: start; } .plan { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 28px 24px; display: flex; flex-direction: column; box-shadow: var(--sh-1); transition: transform .3s, box-shadow .3s; } .plan:hover { transform: translateY(-4px); box-shadow: var(--sh-2); } .plan--featured { border-color: var(--navy); box-shadow: var(--sh-3); position: relative; } .plan--featured::before { content: "Más recomendado"; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--gold); color: #2A2308; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; padding: 5px 14px; border-radius: 999px; white-space: nowrap; box-shadow: var(--sh-1); } .plan__name { font-family: var(--sans); font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); } .plan__price { font-family: var(--sans); font-variant-numeric: lining-nums tabular-nums; font-size: 38px; font-weight: 800; letter-spacing: -.03em; color: var(--ink); line-height: 1; margin: 12px 0 2px; } .plan__price small { font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--text-3); } .plan__for { font-size: 13.5px; color: var(--text-2); min-height: 58px; margin-bottom: 16px; } .plan__list { display: flex; flex-direction: column; gap: 9px; margin-bottom: 22px; flex: 1; } .plan__list li { display: flex; gap: 9px; font-size: 13.5px; color: var(--text-2); align-items: flex-start; } .plan__list li .ic { flex: none; width: 17px; height: 17px; color: var(--green); margin-top: 3px; } .plan .btn { margin-top: auto; } .plans-note { margin-top: 34px; text-align: center; } .plans-note .big { display: inline-flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: clamp(20px,2.4vw,26px); font-weight: 600; color: var(--ink); } .plans-note .big i { width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg); } .plans-note p { margin-top: 12px; color: var(--text-2); max-width: 62ch; margin-inline: auto; font-size: 15px; } /* ---------- Seguridad ---------- */ .security__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,60px); align-items: center; } .sec-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 8px; } .sec-list li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; color: var(--ink); background: var(--card); border: 1px solid var(--border-2); border-radius: 12px; padding: 14px 15px; } .sec-list li .ic { flex: none; width: 20px; height: 20px; color: var(--navy); margin-top: 1px; } /* diagrama de accesos por rol */ .roles { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--sh-2); } .role-row { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--border-2); } .role-row:first-child { border-top: none; } .role-badge { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13.5px; } .role-badge .ic { width: 20px; height: 20px; color: var(--navy); } .role-scope { font-size: 13px; color: var(--text-2); } .role-bar { height: 7px; border-radius: 999px; background: var(--border-2); overflow: hidden; margin-top: 7px; } .role-bar i { display: block; height: 100%; background: var(--navy); border-radius: 999px; } .role-bar i.gold { background: var(--gold); } /* ---------- Founders / prueba social ---------- */ .founders__inner { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: clamp(30px,4vw,54px); box-shadow: var(--sh-2); position: relative; overflow: hidden; } .founders__inner .watermark { position: absolute; right: -30px; bottom: -40px; width: 260px; color: var(--navy); opacity: .04; } .founders__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; position: relative; z-index: 1; } .founders__benefits { display: grid; gap: 12px; } .founders__benefits li { display: flex; gap: 11px; align-items: center; font-size: 15px; font-weight: 500; } .founders__benefits .ic { flex: none; width: 22px; height: 22px; color: var(--gold); } /* ---------- Prueba social (ya en operación) ---------- */ /* el atributo hidden debe ganar sobre display:grid/inline-flex de estas clases (si no, el andamiaje de WhatsApp y prueba social se muestra vacío) */ [data-wa][hidden], [data-proof][hidden] { display: none !important; } .proof-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 46px; } .proof-stat { text-align: center; background: var(--card); border: 1px solid var(--border-2); border-radius: 16px; padding: 26px 18px; box-shadow: var(--sh-1); } .proof-stat__v { display: block; font-family: var(--sans); font-variant-numeric: lining-nums tabular-nums; font-weight: 800; font-size: clamp(32px, 4vw, 46px); color: var(--navy); letter-spacing: -.02em; line-height: 1; } .proof-stat__l { display: block; margin-top: 9px; font-size: 13.5px; color: var(--text-2); } .proof-quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 22px; } .proof-quote { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 28px; box-shadow: var(--sh-1); } .proof-quote blockquote { font-family: var(--serif); font-size: 20px; line-height: 1.42; color: var(--ink); margin: 0 0 18px; } .proof-quote figcaption { display: flex; align-items: center; gap: 12px; } .proof-quote .av { width: 42px; height: 42px; border-radius: 50%; background: var(--navy); color: var(--on-navy); display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; } .proof-quote .who b { display: block; font-size: 14px; } .proof-quote .who span { font-size: 12.5px; color: var(--text-3); } /* ---------- FAQ ---------- */ .faq { max-width: 820px; margin: 44px auto 0; } .faq__item { border-bottom: 1px solid var(--border); } .faq__q { width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 4px; font-family: var(--serif); font-size: clamp(18px,2.1vw,22px); font-weight: 600; color: var(--ink); background: none; border: none; } .faq__q .chev { flex: none; width: 22px; height: 22px; color: var(--gold); transition: transform .3s; } .faq__item.is-open .faq__q .chev { transform: rotate(45deg); } .faq__a { overflow: hidden; transition: max-height .35s ease; } .js .faq__a { max-height: 0; } .faq__a p { padding: 0 4px 22px; color: var(--text-2); font-size: 16px; max-width: 70ch; } /* ---------- CTA final (navy) ---------- */ .cta { background: var(--navy); color: var(--on-navy); position: relative; overflow: hidden; } .cta__bg { position: absolute; inset: 0; opacity: .5; pointer-events: none; } .cta__bg .ln { position: absolute; top: -20%; width: 1px; height: 140%; background: linear-gradient(180deg, transparent, rgba(200,173,106,.35), transparent); } /* rutas doradas de fondo: constelación logística animándose lentísimo */ .cta__routes { position: absolute; inset: 0; width: 100%; height: 100%; } .cta__routes path { fill: none; stroke: rgba(200,173,106,.16); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 10 14; animation: hzRouteFlow 46s linear infinite; } .cta__routes path:nth-child(2) { animation-duration: 60s; animation-direction: reverse; stroke-dasharray: 8 18; } .cta__routes path:nth-child(3) { animation-duration: 52s; } .cta__routes circle { fill: rgba(200,173,106,.4); animation: hzNodePulse 4.5s ease-in-out infinite; } .cta__routes circle:nth-of-type(2) { animation-delay: 1.4s; } .cta__routes circle:nth-of-type(3) { animation-delay: 2.8s; } @keyframes hzRouteFlow { to { stroke-dashoffset: -480; } } @keyframes hzNodePulse { 0%, 100% { opacity: .25; } 50% { opacity: .85; } } .cta .container { position: relative; z-index: 1; text-align: center; } .cta .headline { color: #fff; } .cta .sub { color: var(--on-navy-soft); margin: 18px auto 0; } .cta .btn-row { justify-content: center; margin-top: 32px; } .cta .micro { justify-content: center; color: var(--on-navy-soft); } .cta .micro span::before { background: var(--gold-2); } /* ---------- Footer ---------- */ .footer { background: var(--bg-soft); border-top: 1px solid var(--border); padding-block: 56px 30px; } .footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; } .footer__brand .nav__logo { margin-bottom: 12px; } .footer__slogan { font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--text-2); } .footer__col h4 { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 14px; } .footer__col a { display: block; padding: 6px 0; font-size: 14.5px; color: var(--text-2); } .footer__col a:hover { color: var(--gold); } .footer__bottom { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--text-3); font-size: 13.5px; } /* ---------- Hero: hint interactivo + botón demo ---------- */ .hero__demo { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; flex-wrap: wrap; } .hero__demo-hint { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-3); font-weight: 500; } .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(47,125,104,.5); animation: pulse 2.2s infinite; flex: none; } /* El dot "bota" (scale) mientras el halo se expande y se apaga: señal de demo viva. */ @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(47,125,104,.5); transform: scale(1); } 70% { box-shadow: 0 0 0 7px rgba(47,125,104,0); transform: scale(1.3); } 100% { box-shadow: 0 0 0 0 rgba(47,125,104,0); transform: scale(1); } } /* Nota de demo con dot en vivo, centrado (app del motorizado) */ .shot-note--live { display: flex; align-items: center; justify-content: center; gap: 7px; } .btn--demo { padding: 11px 18px; font-size: 14px; } /* ---------- Modal: plataforma completa (demo) ---------- */ .demo { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: clamp(0px, 2vw, 26px); } .demo[hidden] { display: none; } .demo__overlay { position: absolute; inset: 0; background: rgba(11,22,40,.55); backdrop-filter: blur(4px); animation: fadeIn .25s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .demo__win { position: relative; width: 100%; max-width: 1260px; height: 100%; max-height: 900px; background: var(--bg); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; box-shadow: var(--sh-3); display: flex; flex-direction: column; animation: demoIn .3s cubic-bezier(.2,.7,.2,1); } @keyframes demoIn { from { opacity: 0; transform: translateY(16px) scale(.99); } to { opacity: 1; transform: none; } } .demo__topbar { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; background: var(--card); border-bottom: 1px solid var(--border); } .demo__brand { display: flex; align-items: center; gap: 11px; } .demo__brand .mark { width: 20px; height: 25px; color: var(--navy); } .demo__brand b { font-family: var(--serif); font-size: 18px; letter-spacing: .02em; } .demo__chip { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; color: var(--gold-ink); background: rgba(184,155,94,.12); padding: 4px 11px; border-radius: 999px; } .demo__topright { display: flex; align-items: center; gap: 16px; } .demo__date { font-size: 12.5px; color: var(--text-3); } .demo__close { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); display: grid; place-items: center; cursor: pointer; transition: background .18s; } .demo__close:hover { background: var(--bg-soft); } .demo__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; } .demo__body { flex: 1; display: grid; grid-template-columns: 236px 1fr; min-height: 0; } .demo__side { background: var(--navy); color: var(--on-navy-soft); padding: 16px 12px; display: flex; flex-direction: column; gap: 3px; overflow-y: auto; } .demo__side a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 9px; font-size: 13.5px; font-weight: 500; color: var(--on-navy-soft); cursor: pointer; transition: background .18s, color .18s; white-space: nowrap; } .demo__side a svg { width: 17px; height: 17px; opacity: .85; flex: none; } .demo__side a:hover { background: rgba(237,231,216,.06); color: var(--on-navy); } .demo__side a.is-active { background: rgba(237,231,216,.1); color: #fff; } .demo__side a.is-active svg { color: var(--gold-2); opacity: 1; } .demo__side-foot { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px; border-top: 1px solid rgba(237,231,216,.12); } .demo__side-foot b { display: block; font-size: 13px; color: var(--on-navy); } .demo__side-foot > div span { font-size: 11px; color: var(--on-navy-soft); } .demo__main { overflow-y: auto; padding: 26px 30px 40px; background: var(--bg); } .demo__main .mk-h { font-family: var(--serif); font-size: 26px; font-weight: 600; } .demo__main .mk__toprow { margin-bottom: 20px; } .demo__main .mk-kpis { gap: 14px; } .demo__main .mk-kpi { padding: 16px 18px; border-radius: 14px; } .demo__main .mk-kpi__v { font-size: 30px; } .demo__main .mk-kpi__l { font-size: 11.5px; } .demo__main .mk-2col { gap: 18px; margin-top: 18px; } .demo__main .mk-card { padding: 18px; border-radius: 14px; } .demo__main .mk-card__t { font-size: 14px; margin-bottom: 12px; } .demo__main .mk-name { font-size: 13.5px; } .demo__main .mk-sub { font-size: 12px; } .demo__main .mk-amt { font-size: 13.5px; } .demo__main .mk-bar { font-size: 12.5px; grid-template-columns: 64px minmax(0,1fr) 52px; } .demo__main .mk-bar__track { height: 9px; } .demo__main .mk-chip { font-size: 12.5px; padding: 7px 13px; } .demo__main .mk-table .th, .demo__main .mk-row { font-size: 13px; } .dsh-sec-title { font-family: var(--serif); font-size: 26px; font-weight: 600; } .dsh-sec-sub { font-size: 13.5px; color: var(--text-3); margin-top: 2px; } .dsh-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 16px 0 14px; } .dsh-search { flex: 1; min-width: 180px; display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 9px 13px; color: var(--text-3); font-size: 13px; } .dsh-pill-btn { display: inline-block; white-space: nowrap; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 9px 14px; font-size: 13px; font-weight: 600; color: var(--text-2); cursor: pointer; } .dsh-pill-btn.is-active { background: var(--navy); color: var(--on-navy); border-color: var(--navy); } .dsh-grid { display: grid; gap: 14px; } .dsh-grid--3 { grid-template-columns: repeat(3, 1fr); } .dsh-grid--2 { grid-template-columns: repeat(2, 1fr); } .dsh-tienda { background: var(--card); border: 1px solid var(--border-2); border-radius: 14px; padding: 16px; box-shadow: var(--sh-1); } .dsh-tienda__top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .dsh-tienda__logo { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: #fff; flex: none; } .dsh-tienda__name { font-weight: 700; font-size: 14.5px; } .dsh-tienda__meta { font-size: 11.5px; color: var(--text-3); } .dsh-tienda__row { display: flex; justify-content: space-between; font-size: 12.5px; padding: 5px 0; color: var(--text-2); } .dsh-tienda__row b { color: var(--ink); font-variant-numeric: lining-nums tabular-nums; } .dsh-bars { display: flex; flex-direction: column; gap: 12px; } .dsh-hbar { display: grid; grid-template-columns: 120px minmax(0,1fr) 46px; align-items: center; gap: 12px; font-size: 13px; } .dsh-hbar__l { color: var(--text-2); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dsh-hbar__track { height: 12px; background: var(--border-2); border-radius: 999px; overflow: hidden; } .dsh-hbar__fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--navy), var(--accent2, #114b5f)); } .dsh-hbar__v { text-align: right; font-weight: 700; font-variant-numeric: lining-nums tabular-nums; color: var(--ink); } .dsh-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 16px; } .demo__main table.dsh { width: 100%; border-collapse: collapse; font-size: 13px; } .demo__main table.dsh th { text-align: left; padding: 9px 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); border-bottom: 1px solid var(--border); font-weight: 700; } .demo__main table.dsh td { padding: 11px 10px; border-bottom: 1px solid var(--border-2); vertical-align: middle; } .demo__main table.dsh td b, .dsh-num { font-variant-numeric: lining-nums tabular-nums; } .demo__main table.dsh tr:hover td { background: var(--card); } .dsh-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 7px; vertical-align: middle; } body.demo-open { overflow: hidden; } @media (max-width: 820px) { .demo { padding: 0; } .demo__win { max-height: none; border-radius: 0; height: 100%; } .demo__body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .demo__side { flex-direction: row; overflow-x: auto; padding: 10px; gap: 6px; } .demo__side a { flex-direction: column; gap: 5px; font-size: 10.5px; padding: 8px 10px; text-align: center; } .demo__side a svg { width: 20px; height: 20px; } .demo__side-foot { display: none; } .demo__main { padding: 18px 16px 32px; } .demo__main .mk-kpis { grid-template-columns: repeat(2, 1fr); } .demo__main .mk-2col { grid-template-columns: 1fr; } .dsh-grid--3, .dsh-grid--2 { grid-template-columns: 1fr; } .demo__main .mk-h, .dsh-sec-title { font-size: 22px; } } .demo__tablewrap { overflow-x: auto; } /* ---------- Modal: componentes de los 12 apartados fieles ---------- */ .dsh-pend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .dsh-pend__card { border: 1px solid var(--border-2); background: var(--bg); border-radius: 11px; padding: 10px 8px; text-align: center; cursor: pointer; transition: border-color .18s, transform .18s; } .dsh-pend__card:hover { border-color: var(--gold); transform: translateY(-2px); } .dsh-pend__card b { display: block; font-size: 18px; font-weight: 800; font-variant-numeric: lining-nums tabular-nums; } .dsh-pend__card b.is-red { color: var(--red); } .dsh-pend__card b.is-amber { color: #9A7726; } .dsh-pend__card span { display: block; font-size: 10px; color: var(--text-3); font-weight: 600; margin-top: 2px; line-height: 1.3; } .dsh-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 6px; } .dsh-method { border: 1px solid var(--border); background: var(--card); border-radius: 13px; padding: 14px 12px; text-align: left; cursor: pointer; transition: border-color .2s, box-shadow .2s; } .dsh-method svg { width: 20px; height: 20px; color: var(--navy); } .dsh-method b { display: block; font-size: 13.5px; margin-top: 8px; } .dsh-method span { display: block; font-size: 11px; color: var(--text-3); margin-top: 2px; } .dsh-method.is-active { border-color: var(--navy); box-shadow: var(--sh-1); background: rgba(17,29,49,.03); } .dsh-parse { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 12px; align-items: start; } .dsh-parse__raw { background: var(--bg); border: 1px dashed var(--border); border-radius: 11px; padding: 11px 13px; } .dsh-parse__raw > b, .dsh-parse__fields > b { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin-bottom: 7px; } .dsh-parse__raw p { font-size: 12.5px; line-height: 1.6; color: var(--text-2); font-style: italic; } .dsh-parse__arrow { align-self: center; font-size: 20px; color: var(--gold-ink); font-weight: 700; } .dsh-parse__fields { background: rgba(47,125,104,.05); border: 1px solid rgba(47,125,104,.25); border-radius: 11px; padding: 11px 13px; } .dsh-field { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; padding: 3.5px 0; color: var(--text-2); } .dsh-field b { color: var(--ink); font-weight: 700; text-align: right; } .dsh-toggle { border: 1px solid var(--border); background: var(--bg); border-radius: 999px; padding: 4px 12px; font-size: 11px; font-weight: 700; color: var(--text-3); cursor: pointer; transition: all .18s; } .dsh-toggle.is-on { background: rgba(47,125,104,.12); border-color: rgba(47,125,104,.4); color: var(--green); } .dsh-bulk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: rgba(17,29,49,.05); border: 1px solid var(--border); border-radius: 11px; padding: 8px 13px; margin-bottom: 12px; font-size: 12.5px; animation: fadeUp .25s ease; } .dsh-chk { width: 15px; height: 15px; accent-color: var(--navy); cursor: pointer; } .dsh-rowbtn { cursor: pointer; } .dsh-rowbtn:hover td { background: var(--card); } .dsh-chev { display: inline-block; font-weight: 800; color: var(--text-3); transition: transform .2s; margin-right: 2px; } .dsh-rowbtn.is-open .dsh-chev { transform: rotate(90deg); color: var(--navy); } .dsh-detbox { background: var(--bg); border: 1px solid var(--border-2); border-radius: 11px; padding: 12px 14px; margin: 4px 2px 8px; } .dsh-detbox > b { font-size: 12.5px; } .dsh-detbox p { font-size: 12px; color: var(--text-2); margin: 6px 0; } @media (max-width: 820px) { .dsh-pend { grid-template-columns: repeat(2, 1fr); } .dsh-methods { grid-template-columns: 1fr; } .dsh-parse { grid-template-columns: 1fr; } .dsh-parse__arrow { transform: rotate(90deg); justify-self: center; } } /* ---------- Animaciones de entrada ---------- */ /* Estado oculto SOLO si el JS está activo (clase .js en ). Si el JS falla, el contenido queda visible por defecto (no dependemos del script para verlo). */ .reveal { transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); } .js .reveal { opacity: 0; transform: translateY(24px); } .reveal.in { opacity: 1; transform: none; } .reveal[data-d="1"] { transition-delay: .08s; } .reveal[data-d="2"] { transition-delay: .16s; } .reveal[data-d="3"] { transition-delay: .24s; } .reveal[data-d="4"] { transition-delay: .32s; } @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } /* ---------- Responsive ---------- */ @media (max-width: 1040px) { .plans { grid-template-columns: repeat(2, 1fr); } .diffs { grid-template-columns: repeat(2, 1fr); } .features { grid-template-columns: repeat(2, 1fr); } .flow__p { font-size: 13px; } } @media (max-width: 900px) { .nav__links, .nav__right .nav__signin, .nav__right .btn { display: none; } .nav__burger { display: flex; } .nav__mobile { display: none; position: absolute; top: 74px; left: 0; right: 0; background: var(--bg); border-bottom: 1px solid var(--border); padding: 12px var(--gutter) 22px; box-shadow: var(--sh-2); } .nav__mobile.is-open { display: block; animation: fadeUp .3s ease both; } .nav__mobile a { display: block; padding: 13px 4px; font-weight: 600; border-bottom: 1px solid var(--border-2); } .nav__mobile .btn { margin-top: 16px; width: 100%; } .hero__grid { grid-template-columns: 1fr; } .hero__art { margin-top: 8px; } .panel__grid { grid-template-columns: 1fr; } .panel__copy { order: 1; } .panel__shot { order: 2; } .split { grid-template-columns: 1fr; } .split--rev .split__media { order: 0; } .security__grid { grid-template-columns: 1fr; } .founders__grid { grid-template-columns: 1fr; gap: 26px; } .footer__top { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } } @media (max-width: 720px) { :root { --sec-y: clamp(56px, 12vw, 84px); } .compare, .pains, .surfaces { grid-template-columns: 1fr; } /* ===== Lenguaje de animación móvil: cada sección tiene SU efecto ===== Curva con rebote (backOut) + recorridos largos + opacity 0 para que cada entrada se SIENTA. Todo transform/opacity → compositor. */ .reveal { transition-duration: .7s; transition-timing-function: cubic-bezier(.26,1.25,.42,1); } .js .reveal:not(.in) { transform: translateY(60px); } /* — HERO: el dashboard cae desde atrás en 3D (luego respira en loop) — */ .js .hero__art.reveal:not(.in) { transform: perspective(1000px) rotateX(24deg) translateY(90px) scale(.9); transform-origin: 50% 100%; } .hero__art.reveal { transition-duration: .9s; } /* — VALOR (3 cifras): fichas que se voltean desde abajo, en cascada — */ .value-stat { transition: transform .65s cubic-bezier(.26,1.25,.42,1), opacity .45s ease; } .js .value-stats.reveal:not(.in) .value-stat { opacity: 0; transform: perspective(700px) rotateX(74deg); transform-origin: 50% 100%; } .value-stats.in .value-stat:nth-child(2) { transition-delay: .14s; } .value-stats.in .value-stat:nth-child(3) { transition-delay: .28s; } /* — COMPARATIVA: duelo — A entra por la izquierda, B por la derecha girando en Y; el ganador (HERMEZ) remata con un pulso — */ .js .compare .compare__card.reveal:not(.in) { transform: perspective(900px) translateX(-80px) rotateY(26deg); } .js .compare .compare__card--good.reveal:not(.in) { transform: perspective(900px) translateX(80px) rotateY(-26deg); } .compare__card--good.in { animation: hz-winner .8s cubic-bezier(.3,1.5,.5,1) .55s backwards; } /* — DOLORES: deck apilado; las cartas caen volteándose y quedan con un leve tilt alterno, como cartas lanzadas sobre la mesa — */ .pain { position: sticky; box-shadow: var(--sh-2); } .pain:nth-child(1) { top: 88px; } .pain:nth-child(2) { top: 100px; } .pain:nth-child(3) { top: 112px; } .pain:nth-child(4) { top: 124px; } .pain:nth-child(5) { top: 136px; } .pain:nth-child(6) { top: 148px; } .pain.reveal.in:nth-child(odd) { transform: rotate(-.7deg); } .pain.reveal.in:nth-child(even) { transform: rotate(.7deg); } .js .pains .pain.reveal:not(.in) { transform: perspective(900px) translateY(100px) rotateX(-30deg) scale(.94); transform-origin: 50% 0; } /* — QUÉ ES HERMEZ (01/02/03): péndulo — cuelgan de una esquina y entran balanceándose desde lados alternos — */ .surface { transform-origin: 12% 0; } .surface:nth-child(even) { transform-origin: 88% 0; } .js .surfaces .surface.reveal:not(.in) { transform: rotate(-7deg) translateY(70px); opacity: 0; } .js .surfaces .surface.reveal:nth-child(even):not(.in) { transform: rotate(7deg) translateY(70px); } /* — DIFERENCIADORES: barrido lateral 3D alterno, marcado — */ .js .diffs .diff.reveal:not(.in) { transform: perspective(800px) translateX(-90px) rotateY(34deg) scale(.94); } .js .diffs .diff.reveal:nth-child(even):not(.in) { transform: perspective(800px) translateX(90px) rotateY(-34deg) scale(.94); } /* — CÓMO FUNCIONA: dominó — cada paso entra girando desde la izquierda, uno tras otro — */ .flow__step { transition: transform .6s cubic-bezier(.26,1.25,.42,1), opacity .4s ease; } .js .flow.reveal:not(.in) .flow__step { opacity: 0; transform: perspective(700px) translateX(-56px) rotateY(24deg); } .flow.in .flow__step:nth-of-type(2) { transition-delay: .09s; } .flow.in .flow__step:nth-of-type(3) { transition-delay: .18s; } .flow.in .flow__step:nth-of-type(4) { transition-delay: .27s; } .flow.in .flow__step:nth-of-type(5) { transition-delay: .36s; } /* — PLANES: se levantan en 3D desde muy abajo; la insignia del recomendado cae con rebote al final — */ .js .plan.reveal:not(.in) { transform: perspective(900px) rotateX(18deg) translateY(90px) scale(.92); transform-origin: 50% 100%; } .plan--featured.in::before { animation: hz-badge .65s cubic-bezier(.3,1.6,.5,1) .6s backwards; } /* — SEGURIDAD: las barras de acceso por rol crecen de 0 al entrar — */ .role-bar i { transform-origin: 0 50%; transition: transform .9s cubic-bezier(.25,.9,.3,1); } .js .roles.reveal:not(.in) .role-bar i { transform: scaleX(0); } .roles.in .role-row:nth-child(2) .role-bar i { transition-delay: .15s; } .roles.in .role-row:nth-child(3) .role-bar i { transition-delay: .3s; } .roles.in .role-row:nth-child(4) .role-bar i { transition-delay: .45s; } .js .roles.reveal:not(.in) { transform: perspective(900px) translateY(70px) rotateX(14deg); } /* — PRUEBA SOCIAL (4 cifras): paneles que giran como marcador de aeropuerto, en cascada + contador numérico — */ .proof-stat { transition: transform .65s cubic-bezier(.26,1.25,.42,1), opacity .4s ease; } .js .proof-stats.reveal:not(.in) .proof-stat { opacity: 0; transform: perspective(700px) rotateY(62deg); } .proof-stats.in .proof-stat:nth-child(2) { transition-delay: .12s; } .proof-stats.in .proof-stat:nth-child(3) { transition-delay: .24s; } .proof-stats.in .proof-stat:nth-child(4) { transition-delay: .36s; } /* — TESTIMONIOS: entran balanceándose (swing) — */ .proof-quote { transition: transform .7s cubic-bezier(.26,1.3,.4,1), opacity .45s ease; } .js .proof-quotes.reveal:not(.in) .proof-quote { opacity: 0; transform: rotate(-3deg) translateY(56px); } .js .proof-quotes.reveal:not(.in) .proof-quote:nth-child(even) { transform: rotate(3deg) translateY(56px); } .proof-quotes.in .proof-quote:nth-child(2) { transition-delay: .15s; } /* — FAQ: barrido en cascada — */ .faq__item { transition: transform .5s cubic-bezier(.26,1.2,.45,1), opacity .35s ease; } .js .faq.reveal:not(.in) .faq__item { opacity: 0; transform: translateX(-36px); } .faq.in .faq__item:nth-child(2) { transition-delay: .06s; } .faq.in .faq__item:nth-child(3) { transition-delay: .12s; } .faq.in .faq__item:nth-child(4) { transition-delay: .18s; } .faq.in .faq__item:nth-child(5) { transition-delay: .24s; } .faq.in .faq__item:nth-child(6) { transition-delay: .3s; } .faq.in .faq__item:nth-child(7) { transition-delay: .36s; } .faq.in .faq__item:nth-child(8) { transition-delay: .42s; } /* — CTA final: las líneas doradas laten en loop — */ .cta__bg .ln { animation: hz-shimmer 5.5s ease-in-out infinite; } .cta__bg .ln:nth-child(2) { animation-delay: 1.8s; } .cta__bg .ln:nth-child(3) { animation-delay: 3.6s; } /* — Titulares de sección: se levantan en 3D + la línea dorada se dibuja — */ .js .section-head.reveal:not(.in) { transform: perspective(700px) translateY(44px) rotateX(14deg) scale(.97); transform-origin: 50% 100%; } .eyebrow::before { transition: width .8s cubic-bezier(.2,.7,.2,1) .2s; } .js .section-head.reveal:not(.in) .eyebrow::before { width: 0; } /* — Hero: titular palabra por palabra (el JS parte el texto en .hw) — */ .hero .headline .hw { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; } .hero .headline .hw > span { display: inline-block; transform: translateY(108%) rotateX(-45deg); opacity: 0; transition: transform .75s cubic-bezier(.25,1.25,.4,1), opacity .5s ease; } .hero .headline.hw-in .hw > span { transform: none; opacity: 1; } .proof-stats { grid-template-columns: repeat(2, 1fr); } .proof-quotes { grid-template-columns: 1fr; } .value-stats { grid-template-columns: 1fr; } .mk { grid-template-columns: 1fr; } .mk__side { display: none; } .mk-kpis { grid-template-columns: repeat(2, 1fr); } .mk-2col, .mk-2col--rutas { grid-template-columns: 1fr; } .flow { grid-template-columns: 1fr; gap: 4px; } .flow__svg { display: none; } /* riel vertical para la moto fantasma en móvil */ .flow::before { content: ""; position: absolute; left: 22px; top: 34px; bottom: 34px; border-left: 2px dashed var(--border); z-index: 0; } /* En móvil el paso se re-arma en 2 filas: [número + título] arriba, descripción debajo. Sin esto, número/título/descripción quedan como 3 columnas apretadas. */ .flow__step { flex-direction: row; flex-wrap: wrap; align-items: center; text-align: left; gap: 4px 16px; padding: 12px 0; } .flow__num { margin-bottom: 0; width: 46px; height: 46px; font-size: 19px; flex: none; } .flow__num-ic { width: 20px; height: 20px; } .flow__t { flex: 1; min-width: 0; margin-bottom: 0; text-align: left; } .flow__p { flex-basis: 100%; margin-left: 62px; max-width: none; text-align: left; } } @media (max-width: 560px) { .plans, .diffs { grid-template-columns: 1fr; } .footer__top { grid-template-columns: 1fr; } /* Funciones: marquesina infinita — se desliza sola (JS la mueve y duplica las tarjetas para el bucle perfecto); el usuario puede tomarla y explorar */ .features { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 70%; overflow-x: auto; padding: 6px 2px 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .features::-webkit-scrollbar { display: none; } /* Testimonios: mismo patrón de carrusel */ .proof-quotes { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 85%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .proof-quotes::-webkit-scrollbar { display: none; } .proof-quote { scroll-snap-align: center; } .swipe-hint { display: flex; } /* Flujo Pedido→Courier→Motorizado→Tienda: los nodos flipean en 3D en cascada */ .flowline .node { transition: transform .6s cubic-bezier(.2,.7,.25,1.08), opacity .45s ease; } .js .flowline.reveal:not(.in) .node { opacity: 0; transform: perspective(600px) rotateY(-58deg) translateY(8px); } .flowline.in .node:nth-of-type(2) { transition-delay: .09s; } .flowline.in .node:nth-of-type(3) { transition-delay: .18s; } .flowline.in .node:nth-of-type(4) { transition-delay: .27s; } .footer__bottom { flex-direction: column; align-items: flex-start; } .btn-row .btn { flex: 1 1 auto; } /* Listas de seguridad: 2 columnas quedan ilegibles en teléfono */ .sec-list { grid-template-columns: 1fr; } /* Precio de planes: que "/ mes" no se parta y "Desde S/1,500" quepa en una línea */ .plan__price { font-size: 32px; } .plan__price .amt { white-space: nowrap; } .plan__price small { white-space: nowrap; } .plan__for { min-height: 0; } /* Tarjetas compactas (dolores, funciones, diferenciadores): icono junto al título en vez de apilado — recorta ~1/3 del scroll total de la página */ .pain, .feature, .diff { display: grid; grid-template-columns: auto 1fr; column-gap: 13px; align-items: center; padding: 16px; } .pain__ic, .feature__ic, .diff__ic { margin-bottom: 0; width: 40px; height: 40px; } .pain__ic svg { width: 21px; height: 21px; } .diff__ic svg { width: 32px; height: 32px; } .diff__ic { width: 32px; height: 32px; } .pain h3, .feature h3, .diff h3 { margin-bottom: 0; } .pain p, .feature p, .diff p { grid-column: 1 / -1; margin-top: 8px; } /* Flujo Pedido→Courier→Motorizado→Tienda: rejilla 2×2 sin flechas colgantes */ .flowline { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .flowline .arrow { display: none; } .flowline .node { justify-content: center; } /* Teléfono de la demo del motorizado: proporción alta de celular real (300×~600) con interiores compactados para que los textos quepan */ .phone { width: 300px; max-width: 100%; } .pm-app { height: 560px; } .pm-scroll { padding: 11px; } .pm-parada { padding: 10px; gap: 8px; } .pm-parada__prod { white-space: normal; } /* Mockups del panel (ventana de navegador): compactar para que las tablas (Liquidación, Motorizados) no desborden el marco */ .mk__main { padding: 14px 12px; } .mk-card { padding: 11px 10px; } .mk__toprow { flex-wrap: wrap; gap: 6px; } .mk-table { overflow-x: auto; } .mk-table .th { font-size: 9.5px; gap: 6px; letter-spacing: .03em; } .mk-row { gap: 6px; } .pill { font-size: 9.5px; padding: 2px 6px; } .mk-kpi__v { font-size: 21px; } .mk-bar { grid-template-columns: 42px minmax(0,1fr) 36px; } } /* ---------- Micro-interacciones táctiles (solo pantallas touch) ---------- */ @media (hover: none) and (pointer: coarse) { .btn:active { transform: scale(.97); transition-duration: .12s; } .tab:active, .billing__opt:active { transform: scale(.95); } .pain:active, .feature:active, .diff:active, .surface:active, .plan:active, .proof-quote:active { transform: scale(.985); transition-duration: .15s; } } /* ---------- Sistema 3D ligado al scroll (móvil) ---------- Todas las animaciones son transform/opacity → corren en el compositor (GPU), nunca bloquean el hilo principal ni causan reflow. Chrome/Edge/Android: scroll-driven animations nativas (cero JS). Safari/otros: el fallback JS de hermez.js reproduce los mismos efectos. */ @keyframes hz-stand { from { opacity: .25; transform: rotateX(18deg) translateY(48px) scale(.93); } to { opacity: 1; transform: none; } } @keyframes hz-cover { 0% { transform: rotateY(16deg) scale(.92); opacity: .5; } 50% { transform: none; opacity: 1; } 100% { transform: rotateY(-16deg) scale(.92); opacity: .5; } } @keyframes hz-breathe { 0%, 100% { transform: perspective(1200px) rotateX(.7deg) rotateY(-1deg); } 50% { transform: perspective(1200px) rotateX(-.7deg) rotateY(1deg); } } @keyframes hz-par { to { transform: translateY(-90px); } } @keyframes hz-par2 { to { transform: translateY(-150px); } } @keyframes hz-winner { 0% { transform: scale(1); } 45% { transform: scale(1.04); } 100% { transform: scale(1); } } @keyframes hz-badge { from { transform: translateX(-50%) translateY(-26px) scale(.4); opacity: 0; } to { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; } } @keyframes hz-shimmer { 0%, 100% { opacity: .2; } 50% { opacity: .9; } } @supports (animation-timeline: view()) { @media (max-width: 720px) { /* Los mockups se "paran" en 3D conforme entran (scrubbed por el scroll, no por tiempo: avanzan y retroceden con el dedo) */ .panel__shot, .split__media { perspective: 950px; } .panel__shot .win:not(.asig__win), .split__media .win { transform-origin: 50% 100%; animation: hz-stand 1s linear both; animation-timeline: view(); animation-range: entry 0% cover 42%; } /* El celular del motorizado se mantiene plano al entrar (sin hz-phone3d): por preferencia no debe "levantarse" en 3D. */ /* Parallax de profundidad en los anillos del hero */ .hero__bg .ring--1 { animation: hz-par 1s linear both; animation-timeline: scroll(); animation-range: 0px 700px; } .hero__bg .ring--2 { animation: hz-par2 1s linear both; animation-timeline: scroll(); animation-range: 0px 700px; } } @media (max-width: 560px) { /* Coverflow real: cada tarjeta del carrusel gira en Y según su posición horizontal (view-timeline de eje inline) */ .features { perspective: 900px; } .feature { animation: hz-cover 1s linear both; animation-timeline: view(inline); animation-range: cover 0% cover 100%; } } } /* Respiración 3D del dashboard del hero (time-based: corre en todo navegador) */ @media (max-width: 720px) { .hero__art .win { animation: hz-breathe 10s ease-in-out infinite; } } /* ---------- Entradas 3D notorias por componente (también en desktop) ---------- Tres lenguajes distintos: Funciones = caída 3D con giro alterno (deal-out); Diferenciadores = barrido lateral en Y; Superficies (Qué es / Hecho en la calle) = volteo desde abajo. Solo transform/opacity (compositor). */ .features--3d .feature { transition: opacity 1s ease, transform 1.4s cubic-bezier(.2,1.2,.3,1); } .js .features--3d:not(.in) .feature { opacity: 0; transform: translateY(100px) rotateX(58deg) rotateZ(-5deg) scale(.78); } .js .features--3d:not(.in) .feature:nth-child(even) { transform: translateY(100px) rotateX(58deg) rotateZ(5deg) scale(.78); } /* Hero: entrada más pausada para que se aprecie al recargar */ .hero__copy.reveal, .hero__art.reveal, .hero__chips.reveal { transition-duration: 1.3s; } .hero .headline .hw { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; } .hero .headline .hw > span { display: inline-block; transform: translateY(108%) rotateX(-45deg); opacity: 0; transition: transform 1.05s cubic-bezier(.25,1.2,.4,1), opacity .7s ease; } .hero .headline.hw-in .hw > span { transform: none; opacity: 1; } /* Chip "sin tarjeta" junto al CTA del hero */ /* Nota informativa del CTA: sin caja ni borde para que NUNCA parezca un botón deshabilitado — es información del botón de al lado. */ .hero__nocard { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--text-2); letter-spacing: .01em; } .hero__nocard svg { width: 17px; height: 17px; color: var(--green); background: rgba(47,125,104,.13); border-radius: 50%; padding: 3.5px; flex: none; } /* rampa suave de WhatsApp: no compite con el CTA principal */ .hero__wa { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; font-size: 14.5px; color: var(--text-2); cursor: pointer; transition: color .2s; } .hero__wa:hover { color: var(--ink); } .hero__wa:hover .hero__wa-arrow { transform: translateX(3px); } .hero__wa b { color: var(--ink); font-weight: 700; } .hero__wa > svg:first-child { width: 21px; height: 21px; color: #25D366; flex: none; } .hero__wa-arrow { width: 14px; height: 14px; color: var(--gold-ink); transition: transform .2s; } /* enlace de WhatsApp en el menú móvil */ .nav__mobile-wa { display: inline-flex; align-items: center; gap: 9px; color: #128C4B !important; font-weight: 600; } .nav__mobile-wa svg { width: 19px; height: 19px; } /* botón flotante de WhatsApp (aparece al bajar) */ .wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 150; width: 56px; height: 56px; border-radius: 50%; background: #25D366; display: grid; place-items: center; box-shadow: 0 10px 26px rgba(37,211,102,.42); opacity: 0; transform: translateY(20px) scale(.85); pointer-events: none; transition: opacity .35s ease, transform .35s cubic-bezier(.3,1.3,.5,1); } .wa-float.is-shown { opacity: 1; transform: none; pointer-events: auto; } .wa-float svg { width: 30px; height: 30px; color: #fff; position: relative; z-index: 1; } .wa-float__pulse { position: absolute; inset: 0; border-radius: 50%; background: #25D366; animation: waPulse 2.4s ease-out infinite; } @keyframes waPulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.8); opacity: 0; } } @media (max-width: 560px) { .wa-float { width: 52px; height: 52px; right: 16px; bottom: 16px; } } /* En anchos medios se compacta la fila del CTA para que la nota siga AL COSTADO del botón, nunca debajo. Tres escalones: 961-1140 (iPad chico horizontal) muy compacto con grid reequilibrado; 1141-1400 compacto; y de 901-960 el hero pasa a UNA columna (no hay espacio honesto). */ @media (max-width: 960px) { .hero__grid { grid-template-columns: 1fr; } .hero__art { margin-top: 8px; } .hero__copy { max-width: none; } } @media (min-width: 961px) and (max-width: 1140px) { .hero__grid { grid-template-columns: minmax(0,1.05fr) minmax(0,1.2fr); } .hero .btn-row { gap: 10px; } .hero .btn-row .btn--lg { padding: 14px 18px; font-size: 14.5px; } .hero__nocard { font-size: 11px; } /* el dashboard queda angosto: KPIs a 2 columnas y tarjetas apiladas para que ningún número se corte */ .hero__art .mk-kpis { grid-template-columns: repeat(2, minmax(0,1fr)); } .hero__art .mk-2col { grid-template-columns: minmax(0,1fr); } } @media (min-width: 1141px) and (max-width: 1400px) { .hero .btn-row { gap: 12px; } .hero .btn-row .btn--lg { padding: 15px 21px; font-size: 15.5px; } .hero__nocard { font-size: 12px; } } /* Botón "Explorar la plataforma completa" — vivo */ .btn--live { position: relative; gap: 11px; box-shadow: 0 10px 30px rgba(17,29,49,.25); animation: liveGlow 2.6s ease-in-out infinite; } .btn--live em { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .12em; color: var(--gold-2); border: 1px solid rgba(200,173,106,.5); border-radius: 999px; padding: 2px 8px; } @keyframes liveGlow { 0%, 100% { box-shadow: 0 10px 30px rgba(17,29,49,.25); } 50% { box-shadow: 0 10px 34px rgba(47,125,104,.4); } } /* Alineación de cifras en los KPIs del hero y del portal (etiquetas de 1 o 2 líneas ya no desalinean los números) */ .hero__art .mk-kpi__l, .mk__main--lg .mk-kpi__l { min-height: 30px; display: flex; align-items: flex-end; } /* Barra de capacidad con etiqueta ancha (vista Asignación del hero) */ .mk-bar--wide { grid-template-columns: 72px minmax(0,1fr) 44px; } @media (min-width: 901px) { /* Diferenciadores: barrido lateral girando en Y, lados alternos */ .diff.reveal { transition-duration: 1.25s; transition-timing-function: cubic-bezier(.22,1.25,.34,1); } .js .diffs .diff.reveal:not(.in) { opacity: 0; transform: perspective(950px) rotateY(-55deg) translateX(-80px) scale(.85); } .js .diffs .diff.reveal:nth-child(even):not(.in) { transform: perspective(950px) rotateY(55deg) translateX(80px) scale(.85); } /* Superficies (Qué es HERMEZ): volteo desde abajo */ .surface.reveal { transition-duration: 1.2s; transition-timing-function: cubic-bezier(.22,1.25,.34,1); } .js .surfaces .surface.reveal:not(.in) { opacity: 0; transform: perspective(950px) rotateX(-58deg) translateY(90px) scale(.94); transform-origin: 50% 100%; } /* Hecho en la calle: variante DISTINTA — caen volteando desde arriba con giro */ .js .surfaces--alt .surface.reveal:not(.in) { opacity: 0; transform: perspective(950px) rotateX(50deg) rotateZ(-4deg) translateY(-70px) scale(.9); transform-origin: 50% 0%; } .js .surfaces--alt .surface.reveal:nth-child(even):not(.in) { transform: perspective(950px) rotateX(50deg) rotateZ(4deg) translateY(-70px) scale(.9); } /* Dolores: cartas lanzadas — caen con giro en Z alterno */ .pain.reveal { transition-duration: 1.15s; transition-timing-function: cubic-bezier(.24,1.3,.35,1); } .js .pains .pain.reveal:not(.in) { opacity: 0; transform: perspective(950px) translateY(100px) rotate(-7deg) rotateX(30deg) scale(.85); } .js .pains .pain.reveal:nth-child(even):not(.in) { transform: perspective(950px) translateY(100px) rotate(7deg) rotateX(30deg) scale(.85); } /* Cifras de valor (~30% / 1–3 meses / S/12k–25k): fichas que se voltean */ .value-stat { transition: transform 1.1s cubic-bezier(.24,1.25,.35,1), opacity .7s ease; } .js .value-stats.reveal:not(.in) .value-stat { opacity: 0; transform: perspective(800px) rotateX(72deg) translateY(30px); transform-origin: 50% 100%; } .value-stats.in .value-stat:nth-child(2) { transition-delay: .2s; } .value-stats.in .value-stat:nth-child(3) { transition-delay: .4s; } /* Planes: se levantan en 3D desde abajo (stagger vía data-d ya existente) */ .js .plan.reveal:not(.in) { opacity: 0; transform: perspective(1000px) rotateX(24deg) translateY(100px) scale(.9); transform-origin: 50% 100%; } .plan.reveal { transition-duration: 1.2s; transition-timing-function: cubic-bezier(.24,1.25,.35,1); } /* App del motorizado y Portal: el dispositivo entra girando desde su lado */ .split__media.reveal { transition-duration: 1.35s; transition-timing-function: cubic-bezier(.24,1.2,.35,1); } .js .split__media.reveal:not(.in) { opacity: 0; transform: perspective(1100px) rotateY(-38deg) translateX(-70px) scale(.92); } .js .split--rev .split__media.reveal:not(.in) { transform: perspective(1100px) rotateY(38deg) translateX(70px) scale(.92); } /* Roles: la tarjeta gira como puerta desde la derecha */ .js .roles.reveal:not(.in) { opacity: 0; transform: perspective(1100px) rotateY(32deg) translateX(60px); transform-origin: 100% 50%; } .roles.reveal { transition-duration: 1.25s; transition-timing-function: cubic-bezier(.24,1.25,.35,1); } /* Las DEMOS interactivas (Caja / Liquidación / Asignación) también entran en 3D */ .js .panel__shot.reveal:not(.in) { opacity: 0; transform: perspective(1300px) rotateX(32deg) translateY(120px) scale(.9); transform-origin: 50% 100%; } .panel__shot.reveal { transition-duration: 1.35s; transition-timing-function: cubic-bezier(.24,1.2,.35,1); } .js .asig.reveal:not(.in) { opacity: 0; transform: perspective(1400px) rotateX(26deg) translateY(130px) scale(.92); transform-origin: 50% 100%; } .asig.reveal { transition-duration: 1.4s; transition-timing-function: cubic-bezier(.24,1.2,.35,1); } /* Asignación: lista con scroll interno; la altura la fija el carril del body */ .asig__main { overflow-y: auto; scrollbar-width: thin; } /* FAQ: cascada lateral */ .faq__item { transition: transform .5s cubic-bezier(.26,1.2,.45,1), opacity .35s ease; } .js .faq.reveal:not(.in) .faq__item { opacity: 0; transform: translateX(-36px); } .faq.in .faq__item:nth-child(2) { transition-delay: .06s; } .faq.in .faq__item:nth-child(3) { transition-delay: .12s; } .faq.in .faq__item:nth-child(4) { transition-delay: .18s; } .faq.in .faq__item:nth-child(5) { transition-delay: .24s; } .faq.in .faq__item:nth-child(6) { transition-delay: .3s; } .faq.in .faq__item:nth-child(7) { transition-delay: .36s; } .faq.in .faq__item:nth-child(8) { transition-delay: .42s; } } /* ---------- "Y todo lo demás": card 3D giratoria ---------- */ #todo-demas[hidden] { display: none !important; } /* La sección va pegada a otra suave: padding corto para no dejar un vacío */ #todo-demas { padding-block: clamp(46px, 5.5vw, 76px) var(--sec-y); } .spin { margin-top: 38px; display: flex; flex-direction: column; align-items: center; } .spin__stage { perspective: 1700px; width: 100%; display: grid; place-items: center; min-height: 470px; } .spin__card { position: relative; width: 740px; height: 385px; max-width: 94vw; cursor: pointer; outline: none; transition: width .65s cubic-bezier(.3,.85,.3,1), height .65s cubic-bezier(.3,.85,.3,1); } .spin__card:focus-visible .spin__face { box-shadow: var(--sh-3), 0 0 0 3px rgba(184,155,94,.5); } /* La cara es una VENTANA del panel (misma estética que hero/portal/demos) */ .spin__face { position: absolute; inset: 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-3); overflow: hidden; display: flex; flex-direction: column; backface-visibility: hidden; will-change: transform; transform: rotateY(0); transition: transform .64s cubic-bezier(.16,.84,.32,1.03), opacity .25s ease, box-shadow .3s; } .spin__card:hover .spin__face { box-shadow: var(--sh-3), 0 0 0 2px rgba(184,155,94,.4); } .spin__face.is-out { transform: rotateY(-90deg); transition: transform .6s cubic-bezier(.55,.06,.78,.44), opacity .25s ease; } .spin__face.is-in { transition: none; transform: rotateY(90deg); } .spin__face .win__bar { flex: none; } .spin__scr { flex: 1; min-height: 0; padding: 14px 18px 16px; background: var(--card); overflow: hidden; display: flex; flex-direction: column; } .spin__scr .mk__toprow { margin-bottom: 10px; } .spin__scr .dsh-hbar { margin: 4px 0; } .spin__scr .mk-card { margin: 0; } .spin__hint { margin-top: 22px; font-size: 12.5px; font-weight: 600; color: var(--text-3); display: inline-flex; align-items: center; gap: 8px; } @media (max-width: 720px) { .spin__stage { min-height: 520px; perspective: 1100px; } .spin__card { max-width: 92vw; } .spin__scr { padding: 12px 13px 14px; } /* columnas secundarias fuera en pantallas angostas */ .spin__scr .spin-hm { display: none; } } @media (prefers-reduced-motion: reduce) { /* Menos movimiento ≠ página muerta: se eliminan giros y desplazamientos pero se conservan FUNDIDOS suaves — la página sigue sintiéndose viva en equipos con "efectos de animación" desactivados. */ * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } .js .reveal { transform: none !important; transition: opacity .45s ease !important; } .js .reveal:not(.in) { opacity: 0; } .reveal.in { opacity: 1; } .features--3d .feature { opacity: 1 !important; transform: none !important; transition: opacity .45s ease !important; } .hero .headline .hw > span { opacity: 1 !important; transform: none !important; } .hero__slide { transform: none !important; transition: opacity .45s ease !important; } .cta__routes { display: none !important; } } /* ======================= MODAL · LISTA DE ESPERA (captador de leads) ======================= */ .hzw{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:20px;} .hzw.open{display:flex;} .hzw__bg{position:absolute;inset:0;background:rgba(11,22,40,.55);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);} .hzw.open .hzw__bg{animation:hzwFade .35s ease both;} .hzw__card{position:relative;background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg); box-shadow:var(--sh-3),inset 0 1.5px 0 rgba(255,255,255,.65);padding:32px 30px 26px;max-width:456px;width:100%;overflow:hidden;} .hzw.open .hzw__card{animation:hzwIn .5s cubic-bezier(.16,1,.3,1) both;} .hzw__eyebrow{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--gold-ink);background:rgba(184,155,94,.14);padding:6px 12px;border-radius:999px;margin-bottom:14px;} .hzw__eyebrow svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;} .hzw__card h3{font-family:var(--serif);font-size:24px;line-height:1.14;letter-spacing:-.01em;color:var(--ink);margin:0 0 8px;font-weight:700;} .hzw__lead{font-family:var(--sans);color:var(--text-2);font-size:14.5px;line-height:1.5;margin:0 0 20px;} .hzw__form{display:flex;flex-direction:column;gap:13px;} .hzf{display:flex;flex-direction:column;gap:6px;} .hzf>label{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink);} .hzf input,.hzf select{font-family:var(--sans);font-size:15px;color:var(--ink);background:#fff;border:1px solid var(--border);border-radius:10px;padding:12px 13px;width:100%;transition:border-color .18s,box-shadow .18s;} .hzf input::placeholder{color:#9a978d;} .hzf input:focus,.hzf select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,155,94,.2);} .hzf--phone .hzf__row{display:grid;grid-template-columns:auto 1fr;gap:8px;} .hzf--phone select{width:auto;} .hzf--phone input{font-variant-numeric:tabular-nums;} .hzf.err input,.hzf.err select{border-color:var(--red);box-shadow:0 0 0 3px rgba(180,92,82,.16);} .hzf__err{font-family:var(--sans);font-size:12.5px;color:var(--red);display:none;} .hzf.err .hzf__err{display:block;} .hzw__submit{width:100%;justify-content:center;margin-top:5px;font-size:15px;gap:9px;} .hzw__submit[disabled]{opacity:.75;cursor:progress;} .hzw__spin{width:17px;height:17px;border-radius:50%;border:2px solid rgba(237,231,216,.45);border-top-color:var(--on-navy);animation:hzwSpin .7s linear infinite;display:none;} .hzw.is-sending .hzw__spin{display:inline-block;} .hzw.is-sending .hzw__submit .hzw__label{display:none;} .hzw__formerr{font-family:var(--sans);font-size:13px;color:var(--red);text-align:center;min-height:2px;} .hzw__fine{display:block;margin-top:14px;font-family:var(--sans);font-size:12px;color:var(--text-2);text-align:center;opacity:.85;} .hzw__fine svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.7;vertical-align:-2px;margin-right:3px;} .hzw__hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;opacity:0;pointer-events:none;} .hzw__x{position:absolute;top:14px;right:14px;width:36px;height:36px;border:1px solid var(--border);border-radius:50%;background:var(--card);color:var(--text-2);cursor:pointer;display:grid;place-items:center;z-index:2;transition:border-color .18s,color .18s;} .hzw__x:hover{border-color:var(--gold);color:var(--ink);} .hzw__x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;} .hzw__ok{display:none;flex-direction:column;align-items:center;text-align:center;padding:6px 0 4px;} .hzw.done .hzw__eyebrow,.hzw.done .hzw__card>h3,.hzw.done .hzw__lead,.hzw.done .hzw__form,.hzw.done .hzw__fine{display:none;} .hzw.done .hzw__ok{display:flex;animation:hzwIn .5s cubic-bezier(.16,1,.3,1) both;} .hzw__okmark{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--green),#3A9077);display:grid;place-items:center;margin-bottom:14px;box-shadow:0 12px 28px -10px rgba(47,125,104,.5);} .hzw__okmark svg{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:2.4;} .hzw__ok h3{font-family:var(--serif);font-size:22px;color:var(--ink);margin:0 0 6px;font-weight:700;} .hzw__ok p{font-family:var(--sans);color:var(--text-2);font-size:14px;line-height:1.5;margin:0;} @keyframes hzwIn{from{opacity:0;transform:translateY(18px) scale(.97);}to{opacity:1;transform:none;}} @keyframes hzwFade{from{opacity:0;}to{opacity:1;}} @keyframes hzwSpin{to{transform:rotate(360deg);}} @media (prefers-reduced-motion:reduce){.hzw.open .hzw__card,.hzw.open .hzw__bg,.hzw.done .hzw__ok{animation-duration:.01ms;}}