/* ================================================================= TapBox — Sistema visual Dirección: editorial · sobrio · operativo · tecnológico Paleta tomada del logo (navy "Tap" + azul "Box") + neutro bone. ================================================================= */ /* ---------------------------------------------------------------- 0 · Reset ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } /* overflow-x: clip recorta cualquier adorno que sangre fuera del ancho (teléfono 3D, tarjetas, comillas gigantes) SIN romper position: sticky ni crear scroll horizontal. Va en html y body para cazar el desbordamiento venga de donde venga. */ /* fondo del documento en navy: el inicio (voltage) y el final (footer) son oscuros, así el rebote/overscroll del móvil ya no muestra una franja blanca bajo el footer. */ /* el rebote/overscroll del móvil al llegar al final no debe abrir una franja en blanco bajo el footer: el fondo del documento es navy y cortamos el rebote */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; background-color: var(--navy); overscroll-behavior-y: none; } body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video { display: block; max-width: 100%; } button, input { font: inherit; color: inherit; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; padding: 0; } :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 3px; } /* solo lectores de pantalla / crawlers: invisible pero presente */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ---------------------------------------------------------------- 1 · Tokens ---------------------------------------------------------------- */ :root { /* — Marca / neutros — */ --navy: #20282D; /* pizarra: tinta y superficies oscuras */ --navy-deep: #171D21; /* fondo voltage */ --blue: #257554; /* "Box" — verde de marca para TEXTO sobre claro */ --violet-lite: #83D1B0; /* verde aclarado, para texto sobre pizarra */ --signal: #70C7A3; /* verde señal: rellenos, iconos, botones */ --violet-soft: #D3EBE0; /* verde muy tenue: avatares y rellenos */ --blue-press: #1a61bd; --blue-soft: #E8F5EF; /* verde muy tenue: fondos de acento */ --ink: #20282D; /* texto fuerte (pizarra) */ --body: #4A5560; /* texto corrido (pizarra desaturada) */ --muted: #78868A; /* secundario (familia pizarra) */ --faint: #97a0ad; --canvas: #ffffff; --bone: #F6F7F5; /* segundo aire (fondo de la paleta) */ --bone-deep: #ece7db; --cool: #F6F7F5; /* superficie (fondo de la paleta) */ --stone: #BFC9C8; /* gris de la paleta: bordes marcados, apagados */ --line: #DDE3E2; /* hairline (gris de la paleta, aclarado) */ --line-cool: #DDE3E2; /* hairline */ /* — Semánticos — */ --ok: #1c8a5b; --ok-soft: #e7f4ee; --warn: #b8612f; /* clay/atacama */ --warn-soft: #f6ecdf; --clay: #b1502e; /* — Tipografía — */ --f-display: "Schibsted Grotesk", "Inter", system-ui, sans-serif; --f-text: "Inter", system-ui, sans-serif; --f-mono: "IBM Plex Mono", ui-monospace, monospace; /* — Escala fluida — */ --t-hero: clamp(2.5rem, 1.1rem + 4vw, 3.75rem); --t-xl: clamp(2.1rem, 1.3rem + 3.6vw, 3.9rem); --t-lg: clamp(1.85rem, 1.35rem + 2.2vw, 2.9rem); --t-md: clamp(1.3rem, 1.05rem + 1.1vw, 1.7rem); /* — Espacio — */ --pad-x: clamp(20px, 5vw, 64px); --maxw: 1240px; --sect: clamp(72px, 9vw, 132px); --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 30px; /* — Motion — */ --ease: cubic-bezier(.22,.61,.25,1); --ease-out: cubic-bezier(.16,.84,.34,1); --shadow-sm: 0 1px 2px rgba(17,23,34,.05), 0 6px 18px -12px rgba(17,23,34,.22); --shadow-md: 0 24px 60px -30px rgba(15,27,44,.4), 0 8px 24px -18px rgba(15,27,44,.3); --shadow-lg: 0 50px 110px -40px rgba(15,27,44,.55); } /* ---------------------------------------------------------------- 2 · Base ---------------------------------------------------------------- */ body { font-family: var(--f-text); font-size: 16px; line-height: 1.6; color: var(--body); background: var(--canvas); overflow-x: clip; max-width: 100%; } .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x); } .section { padding-block: var(--sect); position: relative; } .skip-link { position: absolute; left: -999px; top: 8px; z-index: 1000; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 8px; } .skip-link:focus { left: 16px; } /* — Grid editorial 12 col — */ .grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(16px, 3vw, 40px); row-gap: 48px; align-items: start; } .col-span-4 { grid-column-end: span 4; } .col-span-5 { grid-column-end: span 5; } .col-span-6 { grid-column-end: span 6; } .col-span-7 { grid-column-end: span 7; } .col-start-6 { grid-column-start: 6; } .col-start-7 { grid-column-start: 7; } /* ---------------------------------------------------------------- 3 · Tipografía utilitaria ---------------------------------------------------------------- */ .eyebrow { font-family: var(--f-mono); font-size: .76rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; } .eyebrow--light { color: rgba(255,255,255,.72); } .eyebrow__num { color: var(--blue); } .eyebrow__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); } .eyebrow--light .eyebrow__dot { box-shadow: 0 0 0 4px rgba(37, 117, 84,.25); } .h-xl { font-family: var(--f-display); font-size: var(--t-xl); line-height: 1.04; letter-spacing: -.02em; font-weight: 500; color: var(--ink); } .h-lg { font-family: var(--f-display); font-size: var(--t-lg); line-height: 1.08; letter-spacing: -.018em; font-weight: 500; color: var(--ink); } .lead { font-size: clamp(1.02rem, .98rem + .3vw, 1.18rem); color: var(--body); max-width: 46ch; margin-top: 22px; line-height: 1.55; } .note { font-size: .92rem; color: var(--muted); margin-top: 18px; } .accent-blue { color: var(--blue); } /* El acento va SOLO por color. El subrayado "tinta" se quitó: sumaba un segundo recurso gráfico sobre algo que el color ya resolvía, y a tamaños grandes se leía como error de impresión más que como énfasis. */ .accent-ink { display: inline; } .inline-link { color: var(--blue); border-bottom: 1px solid color-mix(in srgb, var(--blue) 35%, transparent); transition: border-color .3s; } .inline-link:hover { border-color: var(--blue); } em { font-style: italic; font-variation-settings: "slnt" -8; } /* ---------------------------------------------------------------- 4 · Botones & enlaces ---------------------------------------------------------------- */ .btn { --bg: var(--navy); --fg: #fff; --bd: transparent; position: relative; display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-text); font-weight: 500; font-size: .98rem; padding: 15px 24px; border-radius: 12px; background: var(--bg); color: var(--fg); border: 1px solid var(--bd); cursor: pointer; overflow: hidden; isolation: isolate; transition: transform .45s var(--ease), box-shadow .45s var(--ease), background-color .3s, color .3s, border-color .3s; } .btn svg { transition: transform .4s var(--ease); } .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--blue); transform: translateY(101%); transition: transform .5s var(--ease); } .btn:hover { box-shadow: var(--shadow-md); } .btn:hover::before { transform: translateY(0); } .btn:active { box-shadow: var(--shadow-sm); } .btn--dark { --bg: var(--navy); --fg: #fff; } .btn--dark:hover { color: #fff; } .btn--ghost { --bg: transparent; --fg: var(--ink); --bd: var(--line); } .btn--ghost::before { background: var(--navy); } .btn--ghost:hover { --fg: #fff; color: #fff; border-color: var(--navy); } .btn--light { --bg: #fff; --fg: var(--navy); } .btn--light::before { background: var(--blue); } .btn--light:hover { color: #fff; } .btn--ghost-light { --bg: transparent; --fg: #fff; --bd: rgba(255,255,255,.28); } .btn--ghost-light::before { background: #fff; } .btn--ghost-light:hover { --fg: var(--navy); color: var(--navy); border-color: #fff; } /* CTA primario: azul TapBox sólido — el único botón "lleno" de cada vista */ .btn--primary { --bg: var(--blue); --fg: #fff; box-shadow: 0 10px 26px -12px rgba(37, 117, 84,.55); } .btn--primary::before { background: #1C6146; } .btn--primary:hover { color: #fff; box-shadow: 0 14px 30px -12px rgba(37, 117, 84,.65); } /* Secundario sobre navy: fantasma con borde tenue */ .btn--ghostnavy { --bg: transparent; --fg: rgba(255,255,255,.92); --bd: rgba(255,255,255,.26); } .btn--ghostnavy::before { background: rgba(255,255,255,.1); } .btn--ghostnavy:hover { color: #fff; border-color: rgba(255,255,255,.5); } /* Botón fantasma sobre la sección oscura inicial: texto oscuro legible sobre fondo claro */ .voltage .btn--ghost { --bg: #fff; --fg: var(--ink); --bd: transparent; } .voltage .btn--ghost::before { background: var(--blue); } .voltage .btn--ghost:hover { --fg: #fff; color: #fff; border-color: transparent; } .btn--block { width: 100%; justify-content: center; } .btn--sm { padding: 11px 18px; font-size: .9rem; border-radius: 10px; } .link-quiet { font-size: .92rem; color: var(--muted); font-variant-numeric: tabular-nums; transition: color .3s; } .link-quiet:hover { color: var(--ink); } /* ---------------------------------------------------------------- 5 · Nav ---------------------------------------------------------------- */ .nav { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--canvas) 80%, transparent); backdrop-filter: saturate(150%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .4s, background-color .4s, box-shadow .4s; } .nav.is-scrolled { border-bottom-color: var(--line); background: color-mix(in srgb, var(--canvas) 92%, transparent); box-shadow: 0 10px 30px -24px rgba(15,27,44,.4); } .nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 72px; } .brand { display: inline-flex; align-items: center; gap: 11px; } .brand__mark { display: block; height: 36px; width: auto; object-fit: contain; } .brand--footer .brand__mark { height: 32px; } .brand__word { font-family: var(--f-display); font-weight: 600; font-size: 1.32rem; letter-spacing: -.02em; } .wm-tap { color: var(--navy); } .wm-box { color: var(--blue); } .wm-tap--light { color: #fff; } /* marca SVG — adapta color por contexto */ .tb-mark .doc, .tb-mark .flap-l, .tb-mark .box-l { fill: var(--navy); } .tb-mark .flap-r, .tb-mark .box-r { fill: var(--blue); } .tb-mark .doc-fold { fill: #fff; opacity: .9; } .tb-mark .doc-line { fill: var(--blue); } .tb-mark.is-light .doc, .tb-mark.is-light .flap-l, .tb-mark.is-light .box-l { fill: #fff; } .tb-mark.is-light .doc-line { fill: var(--blue); } .tb-mark.is-light .doc-fold { fill: var(--navy-deep); } .nav__links { display: flex; gap: clamp(18px, 2vw, 34px); } .nav__links a { font-size: .94rem; color: var(--body); position: relative; padding: 4px 0; transition: color .3s; } .nav__links a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1.5px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); } .nav__links a:hover { color: var(--ink); } .nav__links a:hover::after { transform: scaleX(1); } .nav__actions { display: flex; align-items: center; gap: 18px; } .nav__burger { display: none; width: 42px; height: 42px; border: 1px solid var(--line); background: transparent; border-radius: 10px; cursor: pointer; position: relative; } .nav__burger { transition: background-color .3s var(--ease), border-color .3s var(--ease); } /* las dos líneas se posicionan desde el centro exacto del botón (50%,50%): cerradas, separadas ±3px; abiertas, cruzan justo en el centro formando una X perfecta. */ .nav__burger span { position: absolute; left: 50%; top: 50%; width: 20px; height: 1.8px; border-radius: 2px; background: var(--ink); transition: transform .35s var(--ease), opacity .25s, background-color .3s; } .nav__burger span:nth-child(1) { transform: translate(-50%, -50%) translateY(-3px); } .nav__burger span:nth-child(2) { transform: translate(-50%, -50%) translateY(3px); } .nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); } .nav__burger[aria-expanded="true"] span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); } /* En modo cerrar (X), fondo rojo sutil para asociarlo a "cerrar" */ .nav__burger[aria-expanded="true"] { background: rgba(214,69,54,.1); border-color: rgba(214,69,54,.35); } .nav__burger[aria-expanded="true"] span { background: #d64536; } /* hoja móvil — cubre toda la pantalla; su propio botón de cerrar es siempre visible */ .mobile-sheet { position: fixed; inset: 0; z-index: 110; background: var(--canvas); padding: 84px var(--pad-x) 40px; display: flex; flex-direction: column; justify-content: space-between; transform: translateY(-12px); opacity: 0; pointer-events: none; transition: opacity .35s var(--ease), transform .35s var(--ease); } .mobile-sheet[hidden] { display: none; } .mobile-sheet.is-open { opacity: 1; transform: none; pointer-events: auto; } /* botón de cerrar (X) fijo arriba-derecha dentro de la hoja */ .mobile-sheet__close { position: absolute; top: 18px; right: var(--pad-x); z-index: 2; width: 44px; height: 44px; border-radius: 12px; cursor: pointer; background: rgba(214,69,54,.1); border: 1px solid rgba(214,69,54,.35); } .mobile-sheet__close span { position: absolute; top: 50%; left: 50%; width: 20px; height: 1.8px; border-radius: 2px; background: #d64536; } .mobile-sheet__close span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); } .mobile-sheet__close span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); } .mobile-sheet__links { display: flex; flex-direction: column; } .mobile-sheet__links a { font-family: var(--f-display); font-size: 1.5rem; font-weight: 500; color: var(--ink); padding: 14px 0; border-bottom: 1px solid var(--line); } .mobile-sheet__foot { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; } /* ---------------------------------------------------------------- 6 · Hero ---------------------------------------------------------------- */ .hero { padding-top: clamp(48px, 7vw, 90px); position: relative; background: #eef1f6; } .hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; grid-template-areas: "copy visual" "cta visual"; grid-template-rows: auto auto; gap: clamp(32px, 5vw, 72px); column-gap: clamp(32px, 5vw, 72px); row-gap: 28px; align-items: center; min-height: min(78vh, 720px); } .hero__copy { grid-area: copy; align-self: end; } .hero__visual { grid-area: visual; } .hero__cta { grid-area: cta; align-self: start; } .hero__title { font-family: var(--f-display); font-weight: 500; font-size: var(--t-hero); line-height: 1.0; letter-spacing: -.03em; color: var(--ink); margin: 8px 0 0; } .line { display: block; overflow: hidden; padding: .06em 0 .26em; margin-bottom: -.24em; } .line__in { display: block; transform: translateY(110%); transition: transform 1s var(--ease); } .hero__title.is-visible .line__in, .voltage__line.is-visible .line__in { transform: none; } .hero__title em { color: var(--blue); } .hero__kicker { font-family: var(--f-mono); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin-bottom: 18px; } .hero__sub { font-size: clamp(1.02rem, .96rem + .4vw, 1.18rem); color: var(--body); max-width: 50ch; margin-top: 26px; } .hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; } .hero__points { display: flex; flex-direction: column; gap: 12px; margin-top: 38px; border-top: 1px solid var(--line); padding-top: 24px; max-width: 480px; } .hero__points li { display: flex; align-items: center; gap: 11px; font-size: .98rem; font-weight: 500; color: var(--ink); line-height: 1.5; } .hero__points svg { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 7px; color: var(--ok); background: var(--ok-soft); } /* — Escena / mockup — */ .hero__visual { position: relative; } /* ========================================================= Visor 3D: teléfono + tarjeta NFC (arrastrable) ========================================================= */ .viewer3d { --pw: 240px; --ph: 500px; --pd: 13px; /* teléfono: ancho/alto/grosor */ --cw: 300px; --ch: 189px; --cd: 1.5px; /* tarjeta: fina como la 3D movible (ratio CR80) */ position: relative; min-height: 560px; display: flex; align-items: center; justify-content: center; perspective: 1700px; user-select: none; -webkit-user-select: none; } .viewer3d.is-grabbing { cursor: grabbing; } .viewer3d__rotor { position: relative; width: var(--pw); height: var(--ph); transform-style: preserve-3d; /* Teléfono 100% de frente: la pantalla se lee como en una captura real de la app. Sin giros — el volumen lo dan el cuerpo extruido y la sombra. */ transform: translateX(-126px); will-change: transform; } /* —— teléfono: iPhone extruido (esquinas redondeadas continuas, sin huecos) —— */ .dev { position: absolute; inset: 0; transform-style: preserve-3d; } /* cuerpo: rebanadas apiladas en Z → riel metálico con la misma silueta redondeada. Las posiciones translateZ las genera el JS (data-extrude). */ .dev__body { position: absolute; inset: 0; transform-style: preserve-3d; } .dev__slice { position: absolute; inset: 0; border-radius: 47px; background: linear-gradient(180deg, #5d6878 0%, #333e51 30%, #1a212f 66%, #0d1320 100%); } /* cara frontal: bisel negro + isla dinámica + pantalla */ .dev__front { position: absolute; inset: 0; border-radius: 47px; background: #04070d; transform: translateZ(calc(var(--pd) / 2 + 0.35px)); box-shadow: inset 0 0 0 1px rgba(125,145,175,.22); } .dev__island { position: absolute; top: 13px; left: 50%; transform: translateX(-50%); width: 80px; height: 22px; border-radius: 99px; background: #000; z-index: 5; box-shadow: inset 0 0 0 1px #11171f; } .dev__island::after { content: ""; position: absolute; right: 11px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #2a4d75, #060c14); } /* cara trasera: panel grafito + módulo de cámara + marca TapBox */ .dev__back { position: absolute; inset: 0; border-radius: 47px; backface-visibility: hidden; background: linear-gradient(157deg, #28333f 0%, #161e2c 52%, #0c1320 100%); transform: rotateY(180deg) translateZ(calc(var(--pd) / 2 + 0.35px)); display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); } .dev__back-brand { font-family: var(--f-display); font-weight: 600; font-size: 1.05rem; letter-spacing: -.01em; opacity: .92; } /* módulo de cámara estilo Pro: squircle de vidrio + 3 lentes en triángulo + flash + LiDAR */ .dev__cam { position: absolute; top: 20px; left: 20px; width: 78px; height: 78px; border-radius: 24px; background: radial-gradient(130% 130% at 28% 20%, rgba(130,150,185,.20), transparent 52%), linear-gradient(152deg, #2a3344 0%, #141c29 55%, #0a1019 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 1px 1px rgba(255,255,255,.10), 0 5px 14px rgba(0,0,0,.45); } /* lentes: anillo metálico + vidrio profundo + reflejo */ .dev__lens { position: absolute; width: 27px; height: 27px; border-radius: 50%; background: linear-gradient(150deg, #565f6e, #1a212e); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 1px 3px rgba(0,0,0,.5); display: grid; place-items: center; } .dev__lens i { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #7d9cc9 0%, #25406a 34%, #0a1322 78%, #060b14 100%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.5), inset 0 0 4px rgba(0,0,0,.6); position: relative; } .dev__lens i::after { content: ""; position: absolute; top: 2.5px; left: 3px; width: 6px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.5); filter: blur(.4px); transform: rotate(-18deg); } .dev__lens--tl { top: 9px; left: 9px; } .dev__lens--tr { top: 9px; right: 9px; } .dev__lens--b { left: 9px; bottom: 9px; } /* flash bicolor (cuadrante inferior derecho) */ .dev__flash { position: absolute; bottom: 13px; right: 12px; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff7e6, #ffd27a 60%, #c98b2e); box-shadow: inset 0 0 0 1px rgba(0,0,0,.3), 0 0 4px rgba(255,210,130,.45); } /* sensor LiDAR (centro del módulo) */ .dev__lidar { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #4a5566, #0c1119); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); } /* botones laterales */ .dev__btn { position: absolute; left: 50%; border-radius: 2px; background: linear-gradient(180deg, #4c5870, #232b3b); backface-visibility: hidden; } .dev__btn--power { top: 150px; width: calc(var(--pd) - 2px); height: 60px; transform: translateX(-50%) rotateY(90deg) translateZ(calc(var(--pw) / 2 + 0.4px)); } .dev__btn--vol { top: 126px; width: calc(var(--pd) - 2px); height: 38px; transform: translateX(-50%) rotateY(-90deg) translateZ(calc(var(--pw) / 2 + 0.4px)); } .dev__btn--vol2 { top: 174px; width: calc(var(--pd) - 2px); height: 38px; transform: translateX(-50%) rotateY(-90deg) translateZ(calc(var(--pw) / 2 + 0.4px)); } /* pantalla */ /* translateZ(0) + backface-visibility fuerzan una capa de composición propia: evita que la pantalla se vea NEGRA en Safari/Chrome móvil (bug de overflow + border-radius dentro de un ancestro con transform 3D). */ .dev__screen { position: absolute; inset: 8px; border-radius: 39px; background-color: var(--cool); background-image: linear-gradient(180deg, #ffffff, var(--cool)); /* "Pantalla negra" en iOS/Safari: el bug se dispara cuando un elemento redondeado se RECORTA (overflow:hidden / clip-path / mask) dentro de un contexto 3D (preserve-3d). La solución más robusta es NO recortar: el border-radius ya redondea el fondo de la pantalla, y el contenido va con padding interno, así que nunca toca las esquinas. Sin clip, sin máscara. */ transform: translateZ(2px); -webkit-transform: translateZ(2px); } .scr { position: absolute; inset: 0; } .scr--wait { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 30px 20px; text-align: center; } .scr__logo { width: 58px; height: auto; } .scr__brand { margin-top: -4px; font-family: var(--f-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -.02em; line-height: 1; } .scr__brand .wm-tap { color: var(--navy); } .scr__brand .wm-box { color: var(--blue); } .scr__nfc { display: grid; place-items: center; color: var(--blue); margin-top: 8px; } .scr__nfc svg { width: 50px; height: auto; } .scr__nfc path { opacity: .22; animation: nfcWave 1.8s ease-in-out infinite; } .scr__nfc-w1 { animation-delay: 0s; } .scr__nfc-w2 { animation-delay: .22s; } .scr__nfc-w3 { animation-delay: .44s; } @keyframes nfcWave { 0%, 70%, 100% { opacity: .18; } 30% { opacity: 1; } } .scr__hint { font-family: var(--f-mono); font-size: .76rem; letter-spacing: .04em; color: var(--muted); } .scr--ficha { padding: 30px 11px 12px; opacity: 0; } /* Ficha con el sistema TapBox: display para títulos, mono para etiquetas y datos, verde de marca (--ok) para vigente y clay (--warn) para vencimientos. Sin verdes/rojos genéricos: la pantalla se ve como el panel real. */ .afi { display: flex; flex-direction: column; gap: 7px; height: 100%; } /* barra de app: marca TapBox + estado de la lectura */ .afi__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px 7px; border-bottom: 1px solid var(--line-cool); margin-bottom: 1px; } .afi__bar-brand { display: inline-flex; align-items: center; gap: 0; font-family: var(--f-display); font-weight: 700; font-size: .62rem; letter-spacing: -.01em; } .afi__bar-brand .wm-tap { color: var(--navy); } .afi__bar-brand .wm-box { color: var(--blue); } .afi__bar-logo { height: 1.55em; width: auto; display: block; margin-right: .3em; } .afi__bar-tag { font-family: var(--f-mono); font-size: .42rem; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); background: var(--blue-soft); padding: 2px 6px; border-radius: 99px; } .afi__sem { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: var(--r-md); background: var(--ok-soft); border: 1px solid rgba(28,138,91,.2); } .afi__sem-ic { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ok); color: #fff; } .afi__sem-ic svg { width: 15px; height: 15px; } .afi__sem-tx { display: flex; flex-direction: column; line-height: 1.05; } .afi__sem-tx b { font-family: var(--f-display); font-weight: 700; font-size: .88rem; letter-spacing: .04em; color: var(--ok); } .afi__sem-tx i { font-style: normal; font-family: var(--f-mono); font-size: .48rem; color: rgba(28,138,91,.85); margin-top: 2px; } .afi__card { background: #fff; border: 1px solid var(--line-cool); border-radius: var(--r-md); padding: 8px 11px; box-shadow: 0 6px 14px -12px rgba(15,27,44,.4); } .afi__id { display: flex; align-items: center; gap: 9px; } .afi__av { flex: none; width: 34px; height: 34px; border-radius: 9px; overflow: hidden; background: var(--navy); } .afi__av img { width: 100%; height: 100%; object-fit: cover; display: block; } .afi__name { font-family: var(--f-display); font-weight: 600; font-size: .7rem; color: var(--ink); line-height: 1.12; letter-spacing: -.01em; } .afi__role { font-family: var(--f-mono); font-size: .5rem; color: var(--muted); margin-top: 2px; } .afi__label { display: flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: .48rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-bottom: 5px; } .afi__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--blue); flex: none; } .afi__rows { display: flex; flex-direction: column; } .afi__rows li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; font-size: .56rem; border-bottom: 1px solid rgba(15,27,44,.07); } .afi__rows li:last-child { border-bottom: 0; } .afi__rows li span { color: var(--muted); } .afi__rows li b { font-family: var(--f-mono); font-weight: 600; font-size: .55rem; color: var(--ink); } .afi__pill { font-family: var(--f-mono); font-weight: 600; font-size: .46rem; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 99px; } .afi__pill--ok { color: var(--ok); background: var(--ok-soft); } /* "por vencer / vencido" en clay de Atacama, no en rojo genérico */ .afi__pill--bad { color: var(--clay); background: var(--warn-soft); } /* —— tarjeta como caja 3D —— */ .card3d { position: absolute; top: 50%; left: 50%; width: var(--cw); height: var(--ch); transform-style: preserve-3d; } .card3d__face { position: absolute; top: 50%; left: 50%; } .card3d__front, .card3d__back { width: var(--cw); height: var(--ch); border-radius: 14px; box-shadow: 0 1px 0 rgba(0,0,0,.05) inset, 0 26px 46px -24px rgba(15,27,44,.45), 0 8px 20px -12px rgba(15,27,44,.28); } /* el frente usa el diseño unificado .tbcard, a escala de tarjeta del hero */ .card3d__front.tbcard { position: absolute; aspect-ratio: auto; transform: translate(-50%, -50%) translateZ(calc(var(--cd) / 2)); padding: 14px 15px; border-radius: 13px; overflow: visible; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .card3d__front .tbcard__sheen { display: none; } .card3d__front .tbcard__top { font-size: 1.12rem; } .card3d__front .tbcard__logo { height: 1.95em; margin-right: .3em; } .card3d__front .tbcard__chip { width: 30px; height: 23px; left: 15px; } .card3d__front .tbcard__name { font-size: .82rem; } .card3d__front .tbcard__org { font-size: .62rem; } .card3d__back { transform: translate(-50%, -50%) rotateY(180deg) translateZ(calc(var(--cd) / 2)); background: #ffffff; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: visible; border-radius: 13px; display: flex; flex-direction: column; justify-content: space-between; padding: 0 0 13px; } .card3d__stripe { display: block; width: 100%; height: 34px; background: #e0e5ee; margin-top: 18px; } .card3d__url { font-family: var(--f-mono); font-size: .6rem; letter-spacing: .1em; color: rgba(15,27,44,.55); text-align: right; padding-right: 14px; } /* canto fino y unificado: tinte claro de tarjeta, sin esquinas cuadradas marcadas */ .card3d__edge { background: linear-gradient(180deg, #eef1f6, #dfe4ec); } .card3d__edge--r { width: var(--cd); height: calc(var(--ch) - 16px); transform: translate(-50%, -50%) rotateY(90deg) translateZ(calc(var(--cw) / 2)); } .card3d__edge--l { width: var(--cd); height: calc(var(--ch) - 16px); transform: translate(-50%, -50%) rotateY(-90deg) translateZ(calc(var(--cw) / 2)); } .card3d__edge--t { width: calc(var(--cw) - 16px); height: var(--cd); transform: translate(-50%, -50%) rotateX(90deg) translateZ(calc(var(--ch) / 2)); } .card3d__edge--b { width: calc(var(--cw) - 16px); height: var(--cd); transform: translate(-50%, -50%) rotateX(-90deg) translateZ(calc(var(--ch) / 2)); } /* destello de contacto */ .contact-fx { position: absolute; top: 20%; left: 60%; transform: translateZ(34px); opacity: 0; pointer-events: none; } /* sugerencia de arrastre — caption bajo el teléfono, sobre fondo claro */ .viewer3d__hint { display: flex; align-items: center; gap: 10px; width: fit-content; margin: 10px auto 0; font-family: var(--f-text); font-weight: 500; font-size: .92rem; color: var(--ink); background: #fff; padding: 9px 18px 9px 9px; border-radius: 999px; border: 1px solid var(--line-cool); box-shadow: var(--shadow-sm); transition: opacity .45s var(--ease), transform .45s var(--ease); } .viewer3d__hint-ic { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); flex: none; } .viewer3d.is-grabbing ~ .viewer3d__hint { opacity: 0; transform: translateY(5px); } /* —— estados controlados por arrastre (JS): esperar ↔ ficha leída —— */ /* touch-action: none → la tarjeta se arrastra con el dedo (acercar al teléfono), igual que en desktop. Es una pieza pequeña; la página se scrollea por fuera. */ .card3d { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; } .viewer3d.is-grabbing .card3d { cursor: grabbing; } .scr--wait { opacity: 1; transition: opacity .35s var(--ease); } .scr--ficha { opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .4s var(--ease); } .viewer3d.is-scanned .scr--wait { opacity: 0; } .viewer3d.is-scanned .scr--ficha { opacity: 1; transform: translateY(0); } .contact-fx { transition: opacity .3s ease-out; } .viewer3d.is-scanned .contact-fx { opacity: .9; } .ficha { display: flex; flex-direction: column; gap: 13px; height: 100%; } .ficha__scanbar { display: inline-flex; align-items: center; gap: 9px; font-size: .68rem; font-family: var(--f-mono); color: var(--blue); background: var(--blue-soft); padding: 7px 11px; border-radius: 9px; width: fit-content; } .ficha__head { display: flex; gap: 11px; align-items: center; } .ficha__avatar { width: 44px; height: 44px; border-radius: 13px; background: linear-gradient(150deg, var(--navy), #2b2740); color: #fff; display: grid; place-items: center; overflow: hidden; } .ficha__avatar svg { width: 30px; height: 30px; color: var(--violet-soft); } /* foto real del trabajador en los avatares de ficha (como en app.tapbox.cl) */ .ficha__avatar img, .feat__ui-av img, .sph-ficha__av img { width: 100%; height: 100%; object-fit: cover; display: block; } .ficha__name { font-family: var(--f-display); font-weight: 600; font-size: 1.02rem; color: var(--ink); line-height: 1.1; } .ficha__role { font-size: .72rem; color: var(--muted); } .ficha__badge { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 600; color: var(--ok); background: var(--ok-soft); padding: 6px 11px; border-radius: 999px; width: fit-content; } .ficha__rows { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; } .ficha__rows li { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .74rem; padding: 9px 2px; border-bottom: 1px solid var(--line-cool); } .ficha__rows li:last-child { border-bottom: 0; } .ficha__rows span { color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ficha__rows b { color: var(--navy); font-weight: 600; flex: none; white-space: nowrap; } .ficha__rows b.ok { color: var(--ok); } .ficha__rows b.warn { color: var(--warn); } /* tarjeta NFC */ .nfc-card { position: absolute; z-index: 1; left: -6%; bottom: 6%; width: clamp(186px, 19vw, 224px); aspect-ratio: 1.586; background: #ffffff; border-radius: 16px; padding: 16px; color: var(--ink); box-shadow: var(--shadow-md); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; } .nfc-card::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 85% -10%, rgba(255,255,255,.12), transparent 60%); } .nfc-card__top { display: flex; align-items: center; justify-content: space-between; } .nfc-card__brand { font-family: var(--f-display); font-weight: 600; font-size: .92rem; } .nfc-card__brand .wm-tap { color: var(--ink); } .nfc-card__brand .wm-box { color: var(--blue); } .nfc-chip { width: 30px; height: 22px; border-radius: 5px; background: linear-gradient(135deg, #f1d088, #c9a85a); position: relative; } .nfc-chip::before { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(0,0,0,.25); border-radius: 3px; } .nfc-card__label { font-size: .62rem; text-transform: uppercase; letter-spacing: .12em; opacity: .55; font-family: var(--f-mono); } .nfc-card__name { font-size: .82rem; font-weight: 500; } .nfc-card__wave { position: absolute; right: 14px; bottom: 14px; width: 26px; color: rgba(37, 117, 84, .85); } /* — ondas tap — */ .tap-ripple { position: relative; width: 30px; height: 30px; display: inline-grid; place-items: center; flex: none; } .tap-ripple::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); } .tap-ripple i { position: absolute; inset: 0; border: 1.6px solid var(--ok); border-radius: 50%; opacity: 0; animation: ripple 2.6s var(--ease) infinite; } .tap-ripple i:nth-child(2) { animation-delay: .7s; } .tap-ripple i:nth-child(3) { animation-delay: 1.4s; } .tap-ripple i:nth-child(4) { animation-delay: 2.1s; } .tap-ripple--blue::after { background: var(--blue); } .tap-ripple--blue i { border-color: var(--blue); } .tap-ripple--lg { width: 84px; height: 84px; } .tap-ripple--xl { width: 120px; height: 120px; } @keyframes ripple { 0% { transform: scale(.25); opacity: .85; } 100% { transform: scale(1); opacity: 0; } } /* — ticker — */ .ticker { border-block: 1px solid var(--line); padding-block: 18px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .ticker__track { display: inline-flex; align-items: center; gap: 26px; white-space: nowrap; animation: marquee 38s linear infinite; font-family: var(--f-mono); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .ticker__dot { color: var(--blue); } @keyframes marquee { to { transform: translateX(-50%); } } /* ---------------------------------------------------------------- 7 · Problema ---------------------------------------------------------------- */ .problema { background: linear-gradient(180deg, var(--bone) 0%, #efeadf 100%); } .problema__intro { max-width: 760px; margin-bottom: clamp(36px, 4.5vw, 60px); } .problema__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 1.8vw, 20px); } @media (max-width: 720px) { .problema__list { grid-template-columns: 1fr; } } .frictio { position: relative; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; height: 100%; padding: clamp(24px, 2.6vw, 34px) clamp(22px, 2.6vw, 30px); background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.9); border-radius: var(--r-lg); box-shadow: 0 1px 0 rgba(15,27,44,.04), 0 18px 40px -34px rgba(15,27,44,.5); overflow: hidden; cursor: default; transition: transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease); } /* barra de acento que crece desde la izquierda */ .frictio::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--blue), #7af6ff); transform: scaleY(0); transform-origin: top; transition: transform .55s var(--ease); } /* relleno de color que sube al pasar el mouse (sin deformar la tarjeta) */ .frictio::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(155deg, var(--navy) 0%, #1d1a2c 60%, var(--blue) 165%); opacity: 0; transition: opacity .55s var(--ease); } .frictio > * { position: relative; z-index: 1; } /* en desktop el realce es al pasar el mouse; en táctil NO (evita que quede "pegado" al tocar). En móvil lo controla el scroll vía .is-active (JS). */ @media (hover: hover) and (pointer: fine) { .frictio:hover { transform: translateY(-3px); border-color: transparent; box-shadow: 0 30px 60px -28px rgba(15,27,44,.6); } .frictio:hover::before { transform: scaleY(1); } .frictio:hover::after { opacity: 1; } .frictio:hover .frictio__idx { background: rgba(255,255,255,.14); color: #fff; transform: scale(1.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.32); } .frictio:hover h3 { color: #fff; } .frictio:hover p { color: rgba(255,255,255,.82); } } /* realce activo (scroll en móvil o estado controlado): misma apariencia */ .frictio.is-active { transform: translateY(-3px); border-color: transparent; box-shadow: 0 30px 60px -28px rgba(15,27,44,.6); } .frictio.is-active::before { transform: scaleY(1); } .frictio.is-active::after { opacity: 1; } .frictio.is-active .frictio__idx { background: rgba(255,255,255,.14); color: #fff; transform: scale(1.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.32); } .frictio.is-active h3 { color: #fff; } .frictio.is-active p { color: rgba(255,255,255,.82); } .frictio__idx { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; font-family: var(--f-display); font-weight: 600; font-size: 1.05rem; color: var(--blue); background: #fff; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 20%, transparent), 0 6px 16px -10px rgba(37, 117, 84,.5); transition: background-color .55s var(--ease), color .55s var(--ease), box-shadow .55s var(--ease), transform .55s var(--ease); } .frictio h3 { font-family: var(--f-display); font-weight: 500; font-size: 1.22rem; color: var(--ink); line-height: 1.2; transition: color .4s var(--ease); } .frictio p { font-size: .96rem; color: var(--muted); margin-top: 7px; transition: color .4s var(--ease); } /* —— Secuencia scroll: papel → bola → papelero → TapBox —— */ .recycle { position: relative; height: 185vh; margin-top: clamp(32px, 5vw, 64px); } /* Cierre de página: la secuencia de reciclaje sobre el mismo fondo del footer (navy), sin corte visible. La página termina al revelarse el logo + slogan. */ .finale { background: var(--navy); } .finale .recycle { margin-top: 0; } .finale .rc-word__brand .wm-tap { color: #fff; } .finale .rc-word__brand .wm-box { color: var(--violet-lite); } .finale .rc-word__less { color: rgba(255,255,255,.55); } .finale .rc-word__more { color: var(--violet-lite); } .finale .rc-word__more::after { background: linear-gradient(90deg, var(--violet-lite), transparent); } .finale .rc-sheet i:first-child { background: var(--violet-lite); opacity: .6; } .recycle__sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; } .recycle__stage { position: relative; width: min(560px, 92vw); height: 460px; } .recycle__stage > * { position: absolute; left: 50%; top: 50%; will-change: transform, opacity; } /* hojas */ .rc-papers { transform: translate(-50%, -50%); } .rc-sheet { position: absolute; left: 0; top: 0; width: 96px; height: 122px; transform-origin: center; background: #fff; border: 1px solid var(--bone-deep); border-radius: 5px; box-shadow: var(--shadow-sm); padding: 14px 12px; display: flex; flex-direction: column; gap: 7px; } .rc-sheet i { height: 6px; border-radius: 3px; background: var(--bone-deep); } .rc-sheet i:first-child { width: 58%; background: var(--blue); opacity: .5; } /* bola de papel */ .rc-ball { margin: -38px 0 0 -38px; transform: translate3d(0,0,0); opacity: 0; filter: drop-shadow(0 7px 11px rgba(15,27,44,.2)); } /* papelero */ .rc-bin { margin: -66px 0 0 -60px; opacity: 0; } /* desenlace: wordmark grande + claim */ .rc-reveal { transform: translate(-50%, -50%); opacity: 0; } .rc-word { position: relative; display: grid; justify-items: center; gap: 10px; text-align: center; } .rc-word__brand { position: relative; z-index: 1; margin: 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(4.2rem, 13vw, 7.6rem); line-height: .88; letter-spacing: -.045em; } .rc-word__claim { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2px; font-family: var(--f-display); font-weight: 500; font-size: clamp(1.3rem, 4vw, 2.05rem); line-height: 1.1; letter-spacing: -.01em; } .rc-word__less { color: var(--muted); } .rc-word__more { color: var(--blue); position: relative; display: inline-block; width: fit-content; margin: 0 auto; } .rc-word__more::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--blue), color-mix(in srgb, var(--blue) 40%, transparent)); } /* ---------------------------------------------------------------- 8 · Solución ---------------------------------------------------------------- */ .solucion__head { max-width: 820px; margin-bottom: clamp(44px, 5vw, 72px); } .solucion__layout { display: flex; flex-direction: column; gap: clamp(18px, 2.4vw, 28px); } /* A · feature dominante */ .feat { background: linear-gradient(165deg, #1a2d49 0%, var(--navy) 55%, #0d1a2c 100%); color: #fff; border-radius: var(--r-xl); padding: clamp(30px, 3vw, 44px); display: flex; flex-direction: column; position: relative; overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,.08); transition: transform .55s var(--ease), box-shadow .55s var(--ease); } .feat:hover { transform: translateY(-4px); box-shadow: 0 60px 120px -44px rgba(15,27,44,.7); } .feat::after { content: ""; position: absolute; right: -20%; top: -30%; width: 80%; height: 80%; background: radial-gradient(circle, rgba(37, 117, 84,.3), transparent 62%); } .feat::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0); background-size: 22px 22px; } /* feat como banner ancho: copy a la izquierda, mockup a la derecha */ .feat--banner { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 4vw, 64px); align-items: center; } .feat__copy { position: relative; z-index: 1; } .feat--banner .feat__ui { margin-top: 0; padding-top: 0; } @media (max-width: 760px) { .feat--banner { grid-template-columns: 1fr; gap: 30px; } } .feat__top { display: flex; align-items: center; gap: 14px; position: relative; } .feat__idx { font-family: var(--f-display); font-size: 1.1rem; font-weight: 600; color: #fff; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.2); border-radius: 9px; display: grid; place-items: center; } .feat__kicker { font-family: var(--f-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: #8fb8ee; } .feat__title { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem); line-height: 1.06; letter-spacing: -.02em; margin-top: 28px; } .feat__txt { font-size: 1rem; color: rgba(255,255,255,.74); margin-top: 16px; max-width: 40ch; } .feat__ui { margin-top: auto; padding-top: 34px; display: flex; flex-direction: column; gap: 11px; position: relative; } .feat__ui-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.12); } .feat__ui-av { width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(150deg, #2b2740, var(--blue)); display: grid; place-items: center; overflow: hidden; } .feat__ui-av svg { width: 28px; height: 28px; color: #fff; } .feat__ui-head b { display: block; font-size: .95rem; } .feat__ui-head i { font-style: normal; font-size: .76rem; color: rgba(255,255,255,.6); font-family: var(--f-mono); } .feat__ui-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .feat__ui-row > span:first-child { font-size: .8rem; color: rgba(255,255,255,.6); } .feat__ui-bar { width: 92px; height: 8px; border-radius: 4px; background: rgba(255,255,255,.2); } .feat__ui-bar--md { width: 64px; } .feat__ui-bar--sm { width: 44px; } /* "Al día" como timbre de goma: mono, borde doble, levemente girado */ .feat__ui-pill { font-family: var(--f-mono); font-size: .66rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #34d28b; background: transparent; padding: 4px 10px; border: 1.5px solid rgba(52,210,139,.75); border-radius: 6px; box-shadow: 0 0 0 3px rgba(52,210,139,.12); transform: rotate(-2.5deg); display: inline-block; } /* B · C · entradas editoriales — dos tarjetas lado a lado */ .sol-rows { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.8vw, 20px); } .sol-row { position: relative; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; height: 100%; padding: clamp(26px, 2.8vw, 36px); background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 18px 40px -34px rgba(15,27,44,.4); transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); } .sol-row:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(15,27,44,.55); border-color: transparent; } .sol-row__idx { order: 2; display: none; } .sol-row__body { order: 3; } .sol-row__body h3 { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); color: var(--ink); line-height: 1.12; } .sol-row__body p { font-size: .97rem; color: var(--muted); margin-top: 10px; } .sol-row__art { order: 1; width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; flex: none; background: var(--blue-soft); transition: transform .5s var(--ease); } .sol-row:hover .sol-row__art { transform: scale(1.06) rotate(-3deg); } .sol-ico { display: grid; place-items: center; color: var(--navy); } .sol-ico--card svg { width: 38px; height: 28px; } .sol-ico--phone svg { width: 28px; height: 28px; } @media (max-width: 640px) { .sol-rows { grid-template-columns: 1fr; } } /* ---------------------------------------------------------------- 9 · Cómo funciona (sticky) ---------------------------------------------------------------- */ .como__head { margin-bottom: clamp(20px, 2.4vw, 32px); } .como__head .h-lg { max-width: 18ch; } /* misma grilla que "Casos de uso": columna izquierda 4/12, contenido 7/12 con gutter */ .como__grid { row-gap: 0; } .como__sticky { position: sticky; top: clamp(24px, 6vh, 72px); } .como__stage { position: relative; width: 100%; max-width: 440px; aspect-ratio: 1 / 1; margin-inline: auto; background: var(--bone); border: 1px solid var(--bone-deep); border-radius: var(--r-xl); display: grid; place-items: center; overflow: hidden; } .como__stage::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(18,34,55,.06) 1px, transparent 0); background-size: 22px 22px; } .stage { position: absolute; inset: 0; display: grid; place-items: center; padding: 8%; opacity: 0; transform: translateY(20px) scale(.98); transition: opacity .6s var(--ease), transform .6s var(--ease); pointer-events: none; } .stage--active { opacity: 1; transform: none; pointer-events: auto; } .stage-card { width: 100%; max-width: 340px; background: #fff; border-radius: 18px; box-shadow: var(--shadow-md); overflow: hidden; } .stage-card__bar { display: flex; align-items: center; gap: 9px; font-size: .82rem; font-weight: 600; color: var(--ink); padding: 14px 18px; border-bottom: 1px solid var(--line-cool); } .stage-card__bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--blue); } .stage-form { padding: 18px; display: flex; flex-direction: column; gap: 14px; } .sf-row { display: flex; flex-direction: column; gap: 6px; } .sf-row label { font-size: .68rem; font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .sf-input { font-size: .88rem; color: var(--ink); background: var(--cool); border: 1px solid var(--line-cool); border-radius: 8px; padding: 9px 12px; } .sf-chips { display: flex; gap: 7px; flex-wrap: wrap; } .sf-chips span { font-size: .72rem; color: var(--blue); background: var(--blue-soft); padding: 5px 10px; border-radius: 999px; } .stage-link { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; } .ficha-mini { display: flex; align-items: center; gap: 11px; background: #fff; border-radius: 13px; padding: 12px 16px; box-shadow: var(--shadow-sm); width: 84%; } .ficha-mini__av { width: 38px; height: 38px; border-radius: 11px; background: var(--navy); color: #fff; display: grid; place-items: center; overflow: hidden; } .ficha-mini__av svg { width: 26px; height: 26px; color: var(--violet-soft); } .ficha-mini__av img { width: 100%; height: 100%; object-fit: cover; display: block; } .ficha-mini b { display: block; font-size: .9rem; color: var(--ink); } .ficha-mini span { font-size: .72rem; color: var(--muted); font-family: var(--f-mono); } .link-beam { width: 2px; height: 34px; background: var(--line-cool); position: relative; overflow: hidden; border-radius: 2px; } .link-beam span { position: absolute; left: 0; top: 0; width: 100%; height: 40%; background: var(--blue); animation: beam 1.6s var(--ease) infinite; } @keyframes beam { from { transform: translateY(-120%); } to { transform: translateY(320%); } } /* tarjeta mini (pasos 2 y 3): mismo diseño .tbcard que el hero, a escala */ .nfc-card--mini.tbcard { position: relative; width: clamp(220px, 70%, 280px); aspect-ratio: 1.586 / 1; padding: 16px 18px; border-radius: 15px; } .nfc-card--mini .tbcard__top { font-size: 1.05rem; } .nfc-card--mini .tbcard__chip { width: 34px; height: 26px; left: 18px; } .nfc-card--mini .tbcard__name { font-size: .92rem; } .nfc-card--mini .tbcard__org { font-size: .68rem; } .stage-scan { display: flex; flex-direction: column; align-items: center; gap: 22px; } /* aparato blanco → teléfono realista con marco */ .scan-phone { position: relative; width: 150px; height: 308px; border-radius: 34px; padding: 5px; background: linear-gradient(150deg, #3a3f47 0%, #14171c 30%, #0a0c10 70%, #2b2f36 100%); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.10), inset 0 0 2px 1px rgba(0,0,0,.6), 0 40px 70px -30px rgba(8,12,20,.7), 0 18px 36px -18px rgba(8,12,20,.55); } .scan-phone__btn { position: absolute; background: #23272e; border-radius: 2px; box-shadow: inset 0 1px 0 rgba(255,255,255,.12); } .scan-phone__btn--power { right: -2px; top: 92px; width: 3px; height: 46px; border-radius: 2px 0 0 2px; } .scan-phone__btn--vol1 { left: -2px; top: 78px; width: 3px; height: 30px; border-radius: 0 2px 2px 0; } .scan-phone__btn--vol2 { left: -2px; top: 116px; width: 3px; height: 30px; border-radius: 0 2px 2px 0; } .scan-phone__scr { position: absolute; inset: 5px; border-radius: 30px; overflow: hidden; /* color sólido de respaldo: si el degradado no pinta (algunos navegadores móviles dentro de capas transformadas), la pantalla sigue clara, nunca negra */ background-color: #e9f0fb; background-image: radial-gradient(120% 80% at 50% 0%, #eef4ff 0%, #e6eefb 45%, #dde7f7 100%); display: flex; flex-direction: column; align-items: center; transform: translateZ(0); backface-visibility: hidden; } .scan-phone__island { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 56px; height: 17px; border-radius: 99px; background: #0a0c10; z-index: 3; } .scan-phone__time { margin-top: 13px; font-family: var(--f-display); font-weight: 600; font-size: .72rem; color: var(--ink); align-self: flex-start; margin-left: 18px; } .scan-phone__app { position: relative; flex: 1; width: 100%; padding-bottom: 18px; } /* La pantalla alterna entre "leyendo la tarjeta" y la ficha del trabajador. */ .scan-phone__reading, .scan-phone__result { position: absolute; inset: 0; display: flex; flex-direction: column; } .scan-phone__reading { align-items: center; justify-content: center; gap: 14px; text-align: center; animation: sphRead 4.6s ease-in-out infinite; } /* Sincronizado con cardTap (4.6s): la ficha aparece al tocar (36%) y se mantiene. */ .scan-phone__result { align-items: stretch; justify-content: flex-start; gap: 9px; padding: 6px 14px 14px; text-align: left; animation: sphResult 4.6s ease-in-out infinite; } @keyframes sphRead { 0%,28% { opacity: 1; } 37%,74% { opacity: 0; } 83%,100% { opacity: 1; } } @keyframes sphResult { 0%,30% { opacity: 0; transform: scale(.94); } 38% { opacity: 1; transform: scale(1.02); } 44%,72% { opacity: 1; transform: scale(1); } 80%,100% { opacity: 0; transform: scale(.94); } } /* Ficha del trabajador (lo que se ve tras escanear la tarjeta NFC + PIN). */ .sph-ficha__badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; font-family: var(--f-display); font-weight: 700; font-size: .6rem; letter-spacing: .07em; text-transform: uppercase; color: #16a34a; background: rgba(34,197,94,.14); padding: 3px 9px; border-radius: 99px; } .sph-ficha__badge svg { width: 11px; height: 11px; } .sph-ficha__head { display: flex; align-items: center; gap: 8px; } .sph-ficha__av { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--blue); color: #fff; font-family: var(--f-display); font-weight: 700; font-size: .62rem; letter-spacing: .02em; } .sph-ficha__id { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .sph-ficha__id b { font-family: var(--f-display); font-weight: 600; font-size: .66rem; color: var(--ink); line-height: 1.14; } .sph-ficha__id i { font-family: var(--f-mono); font-style: normal; font-size: .52rem; color: var(--muted); } .sph-ficha__rows { display: flex; flex-direction: column; margin-top: 1px; border-top: 1px solid rgba(15,27,44,.09); } .sph-ficha__rows li { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 5px 0; font-size: .56rem; border-bottom: 1px solid rgba(15,27,44,.09); } .sph-ficha__rows li span { color: var(--muted); } .sph-ficha__rows li b { font-family: var(--f-mono); font-weight: 600; font-size: .53rem; color: var(--ink); } .sph-ficha__rows li b.ok { color: #16a34a; } .sph-ficha__foot { font-family: var(--f-mono); font-size: .5rem; color: var(--muted); letter-spacing: .01em; margin-top: 3px; } .scan-phone__brand { font-family: var(--f-display); font-weight: 700; font-size: 1.02rem; letter-spacing: -.02em; } .scan-phone__brand .wm-tap { color: var(--navy); } .scan-phone__brand .wm-box { color: var(--blue); } .scan-phone__nfc { display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%; background: radial-gradient(circle at 50% 45%, #fff 0%, var(--blue-soft) 70%, transparent 72%); color: var(--blue); box-shadow: 0 0 0 1px rgba(37, 117, 84,.18), 0 14px 26px -14px rgba(37, 117, 84,.55); } .scan-phone__nfc svg { width: 40px; height: auto; } .scan-phone__nfc path { opacity: .25; animation: nfcWave 1.8s ease-in-out infinite; } .scan-phone__hint { font-family: var(--f-mono); font-size: .68rem; color: var(--muted); letter-spacing: .02em; } /* paso "Consulta al instante": teléfono protagonista + tarjeta que se acerca por delante */ .hvis .stage-scan { position: relative; width: 100%; height: 100%; } .hvis .stage-scan .scan-phone { position: absolute; top: 50%; left: 50%; transform: translate(-62%, -57%); z-index: 1; } /* halo NFC en el costado del teléfono (punto de contacto) */ .hvis .stage-scan::before { content: ""; position: absolute; z-index: 2; top: 41%; left: 50%; width: 92px; height: 92px; border-radius: 50%; transform: translate(-18%, -50%); background: radial-gradient(circle, color-mix(in srgb, var(--blue) 34%, transparent) 0%, transparent 64%); animation: tapHalo 4.6s ease-in-out infinite; } .hvis .stage-scan .nfc-card--scan.tbcard { position: absolute; top: 50%; left: 50%; width: 198px; padding: 14px 16px; border-radius: 16px; z-index: 3; transform: translate(58%, 22%) rotate(-9deg); box-shadow: -14px 26px 44px -16px rgba(8,12,20,.6); animation: cardTap 4.6s var(--ease) infinite; } .hvis .stage-scan .nfc-card--scan .tbcard__top { gap: 10px; } .hvis .stage-scan .nfc-card--scan .tbcard__top { font-size: .96rem; } .hvis .stage-scan .nfc-card--scan .tbcard__chip { width: 31px; height: 23px; left: 16px; } .hvis .stage-scan .nfc-card--scan .tbcard__name { font-size: .82rem; } .hvis .stage-scan .nfc-card--scan .tbcard__org { font-size: .6rem; white-space: nowrap; } .hvis .stage-scan__txt { /* centrado al teléfono (su centro está 18px a la izquierda del centro del escenario) y ubicado debajo del móvil para no taparlo */ position: absolute; left: calc(50% - 18px); bottom: 4px; transform: translateX(-50%); z-index: 5; width: max-content; max-width: 90%; } @keyframes cardTap { /* reposo: la tarjeta está abajo-derecha, FUERA del teléfono; en el centro de la animación sube y "toca" el costado del teléfono. */ 0%, 100% { transform: translate(58%, 22%) rotate(-9deg); } 36%, 72% { transform: translate(2%, -26%) rotate(-5deg); } } @keyframes tapHalo { 0%, 100% { opacity: 0; transform: translate(-18%, -50%) scale(.6); } 36%, 72% { opacity: 1; transform: translate(-18%, -50%) scale(1); } } @media (max-width: 1024px) { .hvis .stage-scan { transform: scale(.82); } } @media (max-width: 560px) { .hvis .stage-scan { transform: scale(.7); } } .stage-scan__txt { font-family: var(--f-mono); font-size: .78rem; color: var(--ink); background: rgba(255,255,255,.94); padding: 7px 16px; border-radius: 99px; white-space: nowrap; box-shadow: 0 8px 22px -10px rgba(15,27,44,.5), inset 0 0 0 1px var(--line-cool); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .stage-result { width: 100%; max-width: 320px; background: #fff; border-radius: 18px; box-shadow: var(--shadow-md); padding: 20px; display: flex; flex-direction: column; gap: 14px; } .como__steps { display: flex; flex-direction: column; } .step { padding: 30px 0 30px 28px; border-left: 2px solid var(--line); position: relative; opacity: .35; transition: opacity .5s var(--ease); min-height: 58vh; display: flex; flex-direction: column; justify-content: center; } .step::before { content: ""; position: absolute; left: -2px; top: 30px; width: 2px; height: 0; background: var(--blue); transition: height .5s var(--ease); } .step.is-active { opacity: 1; } .step.is-active::before { height: calc(100% - 60px); } .step__num { font-family: var(--f-mono); font-size: .8rem; color: var(--blue); } .step h3 { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); color: var(--ink); margin-top: 8px; line-height: 1.12; } .step p { font-size: .98rem; color: var(--body); margin-top: 10px; max-width: 42ch; } /* ---------------------------------------------------------------- 10 · Beneficios (tablero + aurora) ---------------------------------------------------------------- */ /* ================================================================ 04 · BENEFICIOS — limpio y minimalista, en la línea del sitio (encabezado estándar .eyebrow/.h-lg/.lead · cifras clave sobrias · cuatro tarjetas blancas con icono azul, como el resto de la web). ================================================================ */ .ben { background: var(--cool); } .ben__head { max-width: 640px; margin-bottom: clamp(34px, 4vw, 52px); } /* — Cifras clave — fila sobria entre dos filetes — */ .ben__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 32px); padding-block: clamp(24px, 2.8vw, 34px); border-top: 1px solid var(--line-cool); border-bottom: 1px solid var(--line-cool); margin-bottom: clamp(32px, 4vw, 52px); } .ben__metric { display: flex; flex-direction: column; gap: 8px; } .ben__metric-n { font-family: var(--f-display); font-weight: 600; font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.2rem); line-height: 1; letter-spacing: -.03em; color: var(--navy); font-variant-numeric: tabular-nums; } .ben__metric-l { font-size: .92rem; color: var(--muted); } /* — Tarjetas de beneficio — */ .ben__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 1.8vw, 22px); } .ben__card { background: var(--canvas); border: 1px solid var(--line-cool); border-radius: var(--r-lg); padding: clamp(26px, 2.8vw, 36px); box-shadow: var(--shadow-sm); transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); } .ben__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #d6dde6; } .ben__ic { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; background: var(--blue-soft); color: var(--blue); } .ben__ic svg { width: 26px; height: 26px; } .ben__card h3 { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); color: var(--ink); line-height: 1.16; letter-spacing: -.01em; margin-top: 20px; } .ben__card p { font-size: 1rem; color: var(--body); margin-top: 10px; line-height: 1.6; max-width: 42ch; } /* ── Equipo ─────────────────────────────────────────────── */ .equipo__head { max-width: 640px; margin-bottom: clamp(34px, 4vw, 52px); } .equipo__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 26px); align-items: start; } .tm { position: relative; background: var(--canvas); border: 1px solid var(--line-cool); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease); } .tm:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: #cdd7e3; } .tm__photo { position: relative; aspect-ratio: 4 / 5; background: linear-gradient(158deg, #2b2740, var(--ink)); overflow: hidden; } .tm__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, rgba(15,27,44,.44)); } .tm__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; display: block; } .tm__body { padding: clamp(20px, 2.1vw, 28px); } .tm__name { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.16rem, 1rem + .6vw, 1.46rem); color: var(--ink); line-height: 1.12; letter-spacing: -.02em; } .tm__role { display: inline-flex; align-items: center; gap: 8px; margin-top: 11px; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .02em; color: var(--muted); line-height: 1.35; } .tm__dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px rgba(37, 117, 84,.14); } /* El bloque de contacto se estira suave y fluido al pasar el mouse o tocar. */ .tm__contact { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); } .tm__contact-in { overflow: hidden; min-height: 0; } .tm:hover .tm__contact, .tm:focus-within .tm__contact, .tm.is-open .tm__contact { grid-template-rows: 1fr; } .tm__contact-in > a { display: flex; align-items: center; gap: 9px; font-size: .84rem; color: var(--body); padding-top: 13px; opacity: 0; transition: opacity .4s var(--ease) .06s, color .3s; } .tm:hover .tm__contact-in > a, .tm:focus-within .tm__contact-in > a, .tm.is-open .tm__contact-in > a { opacity: 1; } .tm__contact-in > a:first-child { margin-top: 15px; border-top: 1px solid var(--line-cool); } .tm__contact-in > a:hover { color: var(--blue); } .tm__contact-in svg { width: 16px; height: 16px; flex: none; color: var(--blue); } @media (max-width: 860px) { .equipo__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .equipo__grid { grid-template-columns: 1fr; max-width: 380px; margin-inline: auto; } } @media (max-width: 760px) { .ben__grid { grid-template-columns: 1fr; } } @media (max-width: 520px) { .ben__metrics { grid-template-columns: 1fr; gap: 18px; } } /* ---------------------------------------------------------------- 11 · Casos de uso ---------------------------------------------------------------- */ .casos__head { position: sticky; top: 110px; } .casos__list { display: flex; flex-direction: column; } .caso { position: relative; padding: 32px 0 32px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 210px 1fr; gap: 24px; align-items: start; transition: transform .5s var(--ease); will-change: transform; } .caso:last-child { border-bottom: 1px solid var(--line); } /* línea de acento que se dibuja sobre el borde superior al pasar el mouse */ .caso::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 100%; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease); } /* sin reflow: desplazamiento por transform (evita la distorsión del padding) */ .caso:hover { transform: translateX(14px); } .caso:hover::before { transform: scaleX(1); } .caso__k { grid-column: 1; grid-row: 1 / span 2; font-family: var(--f-mono); font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding-top: 8px; transition: color .45s var(--ease); } .caso:hover .caso__k { color: var(--blue); } .caso h3 { grid-column: 2; grid-row: 1; font-family: var(--f-display); font-weight: 500; font-size: clamp(1.25rem, 1.05rem + .9vw, 1.7rem); color: var(--ink); line-height: 1.14; transition: color .45s var(--ease); } .caso:hover h3 { color: var(--blue-press); } .caso p { grid-column: 2; grid-row: 2; font-size: .98rem; color: var(--muted); margin-top: 8px; max-width: 52ch; } /* ---------------------------------------------------------------- 12 · Voltage band ---------------------------------------------------------------- */ .voltage { background: var(--navy-deep); color: #fff; padding-block: clamp(44px, 7vw, 110px) clamp(96px, 14vw, 200px); position: relative; overflow: hidden; } .voltage::before { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 120% at 78% 12%, rgba(37, 117, 84,.22), transparent 55%); } .voltage__inner { position: relative; display: grid; grid-template-columns: 1.35fr .9fr; grid-template-areas: "copy art" "cta art"; grid-template-rows: auto auto; column-gap: clamp(32px, 5vw, 72px); row-gap: 28px; align-items: center; } .voltage__copy { min-width: 0; grid-area: copy; align-self: center; } .voltage__art { grid-area: art; } .voltage__cta { grid-area: cta; align-self: start; } .voltage__eyebrow { font-family: var(--f-mono); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin-bottom: 26px; } /* H1: una sola promesa, grande, con el rubro rotando en azul */ .voltage__line { font-family: var(--f-display); font-weight: 600; font-size: clamp(2.4rem, 1rem + 4.6vw, 4.4rem); line-height: 1.05; letter-spacing: -.03em; } .voltage__h1 { display: block; } /* la primera línea ("Tu {rubro},") jamás se quiebra: el rotor no mueve el layout */ .voltage__l1 { display: block; white-space: nowrap; } /* Rotor de rubros: una palabra visible; entra desde abajo, sale hacia arriba */ .rotor { position: relative; display: inline-block; vertical-align: bottom; color: var(--blue); } .rotor__word { display: none; white-space: nowrap; position: relative; } .rotor__word::after { /* Sin subrayado: el rotor ya destaca por color y por movimiento. Una tercera señal sobre la misma palabra la sobrecarga. */ content: none; } .rotor__word.is-on { display: inline-block; animation: rotorIn .55s var(--ease-out) both; } .rotor__word.is-off { display: inline-block; position: absolute; left: 0; top: 0; animation: rotorOut .38s var(--ease) both; } @keyframes rotorIn { from { opacity: 0; transform: translateY(.45em); } to { opacity: 1; transform: none; } } @keyframes rotorOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-.4em); } } @media (prefers-reduced-motion: reduce) { .rotor__word.is-on { animation: none; } .rotor__word.is-off { display: none; animation: none; } } /* Subtítulo y fila de confianza */ .voltage__sub { margin-top: 22px; max-width: 46ch; font-size: clamp(1.02rem, .95rem + .45vw, 1.22rem); line-height: 1.62; color: rgba(255,255,255,.78); } .voltage__sub strong { color: #fff; font-weight: 600; } .voltage__proof { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 20px; font-family: var(--f-mono); font-size: .78rem; letter-spacing: .05em; color: rgba(255,255,255,.55); } .voltage__proof i { font-style: normal; color: rgba(255,255,255,.28); } /* —— Tarjeta NFC 3D arrastrable —— */ /* perspectiva más lejana: menos distorsión cónica al girar la tarjeta */ .voltage__art { display: flex; flex-direction: column; align-items: center; gap: 22px; perspective: 1500px; } .voltage__arthint { display: inline-flex; align-items: center; gap: 7px; font-family: var(--f-mono); font-size: .74rem; letter-spacing: .04em; color: rgba(255,255,255,.6); transition: opacity .4s; } .nfc3d.is-grabbing ~ .voltage__arthint, .voltage__art:has(.is-grabbing) .voltage__arthint { opacity: 0; } .nfc3d { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } .nfc3d.is-grabbing { cursor: grabbing; } /* —— Tarjeta NFC TapBox · diseño único reutilizable —— */ .tbcard { position: relative; aspect-ratio: 1.586 / 1; border-radius: 16px; padding: clamp(18px, 1.8vw, 26px); /* Plástico blanco real: nunca es #fff plano. Lleva un degradado muy suave (luz que entra por arriba-izquierda) y se apaga hacia el canto inferior. */ background: radial-gradient(115% 80% at 14% -6%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 58%), linear-gradient(157deg, #ffffff 0%, #fdfeff 36%, #f5f8fc 74%, #eef3f9 100%); color: var(--ink); overflow: hidden; box-shadow: 0 1px 0 rgba(0,0,0,.06) inset, 0 30px 52px -26px rgba(0,0,0,.18), 0 10px 24px -12px rgba(0,0,0,.12); display: flex; flex-direction: column; justify-content: space-between; } /* Grano del PVC: sin esto el blanco se lee como "div", no como plástico. */ .tbcard::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; 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='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); opacity: .055; mix-blend-mode: multiply; } .tbcard__sheen { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.06) 48%, transparent 58%); transform: translateX(-30%); } /* Fila superior: el lockup de marca y la marca NFC comparten eje óptico. `align-items: center` sobre cajas de distinta altura desalineaba el ícono; ahora ambos son cajas de la MISMA altura (--tb-mark) y se centran de verdad. */ .tbcard__top { --tb-mark: 1.9em; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; font-size: 1.35rem; } .tbcard__brand { display: inline-flex; align-items: center; gap: 0; height: var(--tb-mark); font-family: var(--f-display); font-weight: 700; font-size: 1em; letter-spacing: -.02em; line-height: 1; } .tbcard__logo { height: 1.5em; width: auto; display: block; margin-right: .3em; } .tbcard__brand .wm-box { color: var(--blue); } /* Marca de contacto NFC: cuadrada, alineada al eje del lockup y al margen derecho. El punto de origen queda a la izquierda y las ondas se abren hacia el canto, como en la simbología de contactless real. */ .tbcard__wave { width: var(--tb-mark); height: var(--tb-mark); color: var(--blue); flex: none; /* El arco mayor sólo llega al 86% del viewBox: sin compensar, la marca se ve despegada del margen. Se descuenta ese aire para que el trazo —no la caja— quede a ras del mismo margen que el logo. */ margin-right: calc(var(--tb-mark) * -.1375); } /* ondas NFC más grandes en la tarjeta del hero */ .voltage__art .tbcard__top { --tb-mark: 2.15em; } /* El chip dorado se retiró de todas las tarjetas. */ .tbcard__chip { display: none !important; } .tbcard__chip--legacy { position: absolute; top: 50%; left: clamp(18px, 1.8vw, 26px); transform: translateY(-50%); width: 42px; height: 32px; border-radius: 7px; background: linear-gradient(135deg, #f4d488, #c79a3f); box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); } .tbcard__chip::before, .tbcard__chip::after { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(90,60,10,.5); border-radius: 3px; } .tbcard__chip::after { inset: 5px 13px; border-width: 0 1px; } .tbcard__foot { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2px; } /* Relieve sutil, como el grabado láser de una tarjeta personalizada. */ .tbcard__name { font-family: var(--f-display); font-weight: 600; font-size: 1.05rem; color: var(--ink); letter-spacing: -.01em; line-height: 1.12; text-shadow: 0 1px 0 rgba(255,255,255,.9); } .tbcard__org { font-family: var(--f-mono); font-size: .78rem; color: rgba(15,27,44,.58); letter-spacing: .02em; } /* variante arrastrable (banda voltage) — el giro lo controla el JS, doble cara */ .nfc3d { position: relative; transform-style: preserve-3d; } .tbcard--tilt { position: relative; width: clamp(330px, 42vw, 510px); aspect-ratio: 1.586 / 1; transform-style: preserve-3d; will-change: transform; transform: rotateX(8deg) rotateY(-18deg); } .tbcard__face3d { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; /* tarjeta blanca, igual que el resto */ background: #ffffff; /* El borde transparente fuerza el anti-aliasing por hardware: el canto sale limpio al girar en vez de dentado. */ border: 1px solid transparent; background-clip: padding-box; /* Canto de plástico: filo superior iluminado, filo inferior en sombra (la luz viene de arriba), contorno del núcleo, y dos sombras — una de contacto, cerrada, y otra ambiental, amplia. Eso es lo que le da peso al objeto. */ box-shadow: inset 0 1.5px 0 rgba(255,255,255,.95), inset 0 -1.5px 0 rgba(15,27,44,.07), inset 0 0 0 1px rgba(15,27,44,.05), 0 0 0 1px rgba(198,209,223,.75), 0 2px 3px -1px rgba(15,27,44,.14), 0 22px 30px -18px rgba(15,27,44,.28), 0 46px 64px -34px rgba(15,27,44,.32); } /* Guilloche: anillos finísimos que nacen de la marca NFC y se apagan al cruzar la tarjeta — la señal propagándose. Llena el vacío central sin inventarle un chip, y es el tipo de trama fina que llevan las tarjetas de verdad. */ .voltage__art .tbcard__face3d--front::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; background: repeating-radial-gradient(circle at 86% 17%, rgba(37, 117, 84, .06) 0 1px, rgba(37, 117, 84, 0) 1px 13px); /* La máscara arranca transparente en el centro para no ensuciar la marca NFC, abre en el cuerpo de la tarjeta y se apaga antes del canto opuesto. */ -webkit-mask-image: radial-gradient(circle at 86% 17%, transparent 6%, rgba(0,0,0,.55) 26%, rgba(0,0,0,.3) 52%, transparent 80%); mask-image: radial-gradient(circle at 86% 17%, transparent 6%, rgba(0,0,0,.55) 26%, rgba(0,0,0,.3) 52%, transparent 80%); } /* Separación mínima entre caras: evita el z-fighting al quedar de perfil. */ .tbcard__face3d--front { transform: translateZ(1.5px); } .tbcard__face3d--back { transform: rotateY(180deg) translateZ(1.5px); } /* Brillo especular: rebote de luz de estudio. El JS mueve su centro según el ángulo de giro, así el blanco se lee como plástico brillante y no como papel. `overlay` sobre blanco aclara sin teñir (por eso no volvemos al glow azul). */ .tbcard__spec { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 55%); mix-blend-mode: overlay; opacity: 0; } /* Sin movimiento no hay reflejo que seguir: se deja un brillo fijo y suave. */ @media (prefers-reduced-motion: reduce) { .tbcard__spec { opacity: .35; } } .tbcard__face3d .tbcard__sheen { display: none; } /* salvaguarda anti bleed-through: JS alterna estas opacidades según el ángulo */ .tbcard__face3d--front { opacity: 1; } .tbcard__face3d--back { opacity: 0; } .tbcard__face3d--back { align-items: center; justify-content: center; } /* claim al reverso (solo texto) */ .tbcard__claim { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; } .tbcard__claim p { display: flex; flex-direction: column; gap: 4px; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.15rem, 1.6vw, 1.5rem); line-height: 1.14; color: var(--navy); } .tbcard__claim-em { color: var(--blue); } /* sin glow azul: evitaba que el tono variara al girar la tarjeta */ .nfc3d__glow { display: none; } @media (prefers-reduced-motion: reduce) { .tbcard--tilt { transform: rotateX(6deg) rotateY(-14deg); } } /* ---------------------------------------------------------------- 13 · Módulos ---------------------------------------------------------------- */ .modulos__top { row-gap: 0; align-items: center; margin-bottom: clamp(8px, 2vw, 28px); } .modulos__head { max-width: 460px; } .modulos__head .lead { margin-top: 18px; } /* visual destacado: solo el abanico de tarjetas NFC (sin tarjeta contenedora) El abanico se ABRE de forma progresiva con el scroll (móvil) o al hover (desktop). La apertura la controla --fan: 0 = cerrado, 1 = abierto. */ .mod-fan { --fan: 0; position: relative; align-self: start; min-height: 360px; display: flex; align-items: flex-start; justify-content: center; } .fan { position: relative; width: 100%; height: clamp(300px, 32vw, 360px); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } /* el abanico se abre al entrar en pantalla con el scroll (no con el mouse) */ .mod-fan.is-fanned { --fan: 1; } /* .fan-card sólo posiciona; el diseño viene de .tbcard */ .fan-card { position: absolute; left: 50%; bottom: 28%; width: clamp(248px, 26vw, 312px); transform-origin: 50% 185%; will-change: transform; transition: transform .5s var(--ease), box-shadow .5s var(--ease); } .fan-card.tbcard { padding: 18px 20px; border-radius: 16px; background: linear-gradient(158deg, #232328 0%, #131316 52%, #050506 100%); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 30px 56px -24px rgba(0,0,0,.6), 0 12px 26px -12px rgba(0,0,0,.45); } .fan-card .tbcard__top { font-size: 1.3rem; } .fan-card .tbcard__logo { filter: brightness(0) invert(1) drop-shadow(0 1px 1px rgba(0,0,0,.5)); } .fan-card .wm-tap { color: #fff; } .fan-card .tbcard__wave { color: var(--violet-lite); } .fan-card .tbcard__chip { width: 40px; height: 30px; left: 20px; } .fan-card .tbcard__name { font-size: 1.12rem; line-height: 1.1; color: #fff; } .fan-card .tbcard__org { font-size: .82rem; white-space: nowrap; color: rgba(255,255,255,.6); } /* posición = base (cerrado) + delta * --fan (apertura). translateY sube al abrir. */ .fan-card--1 { z-index: 1; opacity: calc(.92 + .08 * var(--fan)); transform: translateX(-50%) rotate(calc(-28deg - 14deg * var(--fan))) translateY(calc(-6px * var(--fan))); } .fan-card--2 { z-index: 2; opacity: calc(.96 + .04 * var(--fan)); transform: translateX(-50%) rotate(calc(-14deg - 7deg * var(--fan))) translateY(calc(-3px * var(--fan))); } .fan-card--3 { z-index: 3; transform: translateX(-50%) rotate(0deg) translateY(calc(-8px * var(--fan))); } .fan-card--4 { z-index: 2; opacity: calc(.96 + .04 * var(--fan)); transform: translateX(-50%) rotate(calc( 14deg + 7deg * var(--fan))) translateY(calc(-3px * var(--fan))); } .fan-card--5 { z-index: 1; opacity: calc(.92 + .08 * var(--fan)); transform: translateX(-50%) rotate(calc( 28deg + 14deg * var(--fan))) translateY(calc(-6px * var(--fan))); } .fan__cap { text-align: center; font-size: .96rem; color: var(--muted); max-width: 36ch; margin-inline: auto; } /* móvil: tarjetas más pequeñas y abanico más cerrado para que TANTO el estado cerrado como el abierto entren completos dentro de la pantalla. */ @media (max-width: 760px) { .mod-fan { min-height: 300px; } .fan { height: 300px; max-width: 360px; margin-inline: auto; } .fan-card { width: clamp(158px, 46vw, 196px); bottom: 30%; transform-origin: 50% 205%; } .fan-card.tbcard { padding: 14px 15px; border-radius: 14px; } .fan-card .tbcard__top { font-size: 1.02rem; } .fan-card .tbcard__chip { width: 30px; height: 23px; left: 15px; } .fan-card .tbcard__name { font-size: .9rem; } .fan-card .tbcard__org { font-size: .68rem; } .fan-card--1 { transform: translateX(-50%) rotate(calc(-20deg - 11deg * var(--fan))) translateY(calc(-5px * var(--fan))); } .fan-card--2 { transform: translateX(-50%) rotate(calc(-10deg - 6deg * var(--fan))) translateY(calc(-3px * var(--fan))); } .fan-card--3 { transform: translateX(-50%) rotate(0deg) translateY(calc(-7px * var(--fan))); } .fan-card--4 { transform: translateX(-50%) rotate(calc( 10deg + 6deg * var(--fan))) translateY(calc(-3px * var(--fan))); } .fan-card--5 { transform: translateX(-50%) rotate(calc( 20deg + 11deg * var(--fan))) translateY(calc(-5px * var(--fan))); } } /* ledger — puntos 01 a 05 como línea de tiempo vertical (rediseñada) */ .ledger { position: relative; margin-top: clamp(28px, 3.5vw, 44px); } /* riel base: centrado en los círculos de 56px (centro = 28px) */ /* el riel va EXACTO del centro del primer círculo al del último (lo fija el JS con --rail-top/--rail-bottom): nunca sobresale por encima del 01 ni por debajo del 05. */ .ledger::before { content: ""; position: absolute; left: 28px; top: var(--rail-top, 28px); bottom: var(--rail-bottom, 28px); width: 2px; background: var(--line); border-radius: 2px; z-index: 0; } /* progreso azul acumulado desde el primer círculo hasta el nodo activo (sin glow, z-index 0, DEBAJO de cada .led, que lo tapa en cada círculo). */ .ledger__fill { position: absolute; left: 28px; top: var(--rail-top, 28px); width: 2px; height: 0; border-radius: 2px; background: linear-gradient(180deg, #7af6ff, var(--blue)); z-index: 0; transition: height .7s var(--ease); } .led { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: clamp(18px, 3vw, 36px); row-gap: 6px; align-items: start; padding: clamp(18px, 2.2vw, 28px) 0; position: relative; z-index: 1; /* todo el ítem (con su círculo opaco) tapa la línea */ } /* separador: solo bajo el texto (columna 2), nunca cruza el riel azul */ .led:not(:first-child)::after { content: ""; position: absolute; top: 0; right: 0; left: calc(56px + clamp(18px, 3vw, 36px)); height: 1px; background: var(--line); } .led__num { grid-row: 1; align-self: center; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; font-family: var(--f-mono); font-weight: 500; font-size: 1rem; letter-spacing: .02em; color: var(--muted); background: var(--canvas); /* anillo fino + halo del color de la sección que recorta el riel detrás */ box-shadow: 0 0 0 5px var(--canvas), inset 0 0 0 1.5px var(--line); position: relative; z-index: 2; transition: color .45s var(--ease), background .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease); } /* pulso suave sólo en el nodo activo */ .led__num::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--blue); opacity: 0; pointer-events: none; } .led.is-active .led__num { color: #fff; transform: scale(1.06); background: linear-gradient(150deg, #4a93ec, var(--blue)); box-shadow: 0 0 0 5px var(--canvas), 0 14px 28px -12px rgba(37, 117, 84,.7); } .led.is-active .led__num::before { animation: ledPulse 1.8s var(--ease) infinite; } @keyframes ledPulse { 0% { opacity: .5; transform: scale(1); } 100% { opacity: 0; transform: scale(1.55); } } .led__title { grid-column: 2; align-self: center; font-family: var(--f-display); font-weight: 500; font-size: clamp(1.3rem, 1.05rem + 1vw, 1.85rem); color: var(--ink); line-height: 1.16; letter-spacing: -.01em; transition: color .45s var(--ease); } .led.is-active .led__title { color: var(--blue-press); } .led__desc { grid-column: 2; font-size: 1rem; color: var(--muted); line-height: 1.55; max-width: 60ch; } @media (prefers-reduced-motion: reduce) { .led.is-active .led__num::before { animation: none; } } @media (max-width: 760px) { .ledger::before, .ledger__fill { left: 25px; } .led { grid-template-columns: 50px 1fr; column-gap: 16px; } .led__num { width: 50px; height: 50px; font-size: .92rem; } .led:not(:first-child)::after { left: calc(50px + 16px); } } /* ---------------------------------------------------------------- 14 · Antes / Después ---------------------------------------------------------------- */ .antes__head { margin-bottom: clamp(32px, 4vw, 52px); } .antes__head .h-lg { max-width: 16ch; } .antes__head .lead { margin-top: 18px; } /* Tarjeta interactiva: el usuario PRESIONA para girar "Con papel" ⇄ "Con TapBox" */ .flipcard { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; perspective: 1400px; font: inherit; text-align: left; -webkit-tap-highlight-color: transparent; } .flipcard__inner { position: relative; min-height: clamp(480px, 52vw, 540px); transform-style: preserve-3d; /* giro simétrico ease-in-out: arranca y asienta suave (más natural) */ transition: transform .9s cubic-bezier(.76, .02, .26, 1); will-change: transform; } /* la tarjeta se acerca levemente hacia el centro del giro, como un naipe real */ .flipcard[aria-pressed="true"] .flipcard__inner { transform: rotateY(180deg); } .flipcard:active .flipcard__inner { transform: scale(.98); } .flipcard[aria-pressed="true"]:active .flipcard__inner { transform: rotateY(180deg) scale(.98); } /* la cara visible no debe interceptar el primer click de la otra */ .flipcard__face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: var(--r-xl); padding: clamp(26px, 3vw, 44px); display: flex; flex-direction: column; justify-content: space-between; gap: clamp(16px, 2vw, 24px); box-shadow: 0 30px 60px -34px rgba(15,27,44,.55); } /* Salvaguarda anti-translucidez: si el navegador no respeta backface-visibility, alternamos la opacidad de cada cara en el punto medio del giro (cara de canto). */ .flipcard__papel, .flipcard__tapbox { transition: opacity 0s linear .45s; } .flipcard__papel { opacity: 1; } .flipcard__tapbox { opacity: 0; } .flipcard[aria-pressed="true"] .flipcard__papel { opacity: 0; } .flipcard[aria-pressed="true"] .flipcard__tapbox { opacity: 1; } /* CARA "Con papel": tono navy + ruido cálido de desorden */ .flipcard__papel { background: linear-gradient(155deg, #1a2438 0%, #0f1a2c 100%); color: #fff; } .flipcard__papel::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .7; border-radius: inherit; background: radial-gradient(60% 80% at 88% 6%, rgba(255,123,90,.22), transparent 55%), repeating-linear-gradient(125deg, rgba(255,255,255,.03) 0 2px, transparent 2px 22px); } /* CARA "Con TapBox": claro, limpio, acento azul */ .flipcard__tapbox { background: linear-gradient(155deg, #ffffff 0%, var(--cool) 100%); transform: rotateY(180deg); } .flipcard__tapbox::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .9; border-radius: inherit; background: radial-gradient(58% 80% at 10% 4%, rgba(37, 117, 84,.14), transparent 55%); } .flipcard__head { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; padding-bottom: clamp(16px, 2vw, 22px); } .flipcard__papel .flipcard__head { border-bottom: 1px solid rgba(255,255,255,.14); } .flipcard__tapbox .flipcard__head { border-bottom: 1px solid var(--line-cool); } .flipcard__brand { display: inline-flex; align-items: center; gap: 10px; } .flipcard__logo { height: 30px; width: auto; } .flipcard__tag { font-family: var(--f-mono); font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; padding: 7px 14px; border-radius: 999px; width: fit-content; } .flipcard__tag--before { background: rgba(255,255,255,.12); color: #fff; } .flipcard__tag--after { background: var(--ok-soft); color: var(--ok); } .flipcard__title { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.4rem, 1rem + 1.3vw, 2rem); line-height: 1.1; letter-spacing: -.02em; color: #fff; } .flipcard__title--good { color: var(--ink); } .flipcard__list { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 11px; max-width: 560px; } .flipcard__list li { display: flex; align-items: center; gap: 13px; font-size: clamp(.95rem, .88rem + .3vw, 1.1rem); font-weight: 500; line-height: 1.3; } .flipcard__papel .flipcard__list li { color: rgba(255,255,255,.9); } .flipcard__tapbox .flipcard__list li { color: var(--ink); } .ci { width: 24px; height: 24px; flex: none; border-radius: 7px; padding: 4px; } .ci--ok { color: var(--ok); background: var(--ok-soft); } .ci--no { color: #ff9b7a; background: rgba(255,255,255,.1); } /* botón "presiona para girar" — claro y prominente */ .flipcard__btn { position: relative; z-index: 1; align-self: flex-start; margin-top: 0; display: inline-flex; align-items: center; gap: 11px; font-family: var(--f-display); font-weight: 600; font-size: 1rem; letter-spacing: -.01em; padding: 13px 22px; border-radius: 999px; transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .35s var(--ease); } .flipcard__btn--bad { background: #fff; color: var(--navy); box-shadow: 0 12px 26px -12px rgba(0,0,0,.6); } .flipcard__btn--good { background: var(--blue); color: #fff; box-shadow: 0 12px 26px -12px rgba(37, 117, 84,.8); } .flipcard:hover .flipcard__btn { transform: translateY(-2px); } .flipcard:hover .flipcard__btn--good { background: var(--blue-press); } .flipcard:active .flipcard__btn { transform: translateY(0) scale(.97); } /* pulso que invita a presionar */ .flipcard__btn-pulse { position: relative; width: 9px; height: 9px; flex: none; } .flipcard__btn-pulse::before, .flipcard__btn-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--blue); } .flipcard__btn-pulse::after { animation: hintPulse 1.8s ease-out infinite; } @keyframes hintPulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(3.4); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .flipcard__inner { transition: none; } .flipcard__btn-pulse::after { animation: none; } } /* ---------------------------------------------------------------- 15 · Testimonios ---------------------------------------------------------------- */ .testimonios { background: var(--bone); } .testimonios__head { margin-bottom: clamp(40px, 5vw, 64px); } .testimonios__head .h-lg { max-width: 16ch; } .testimonios__head .note { max-width: 48ch; } .testi { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: stretch; } /* cita principal */ .testi__lead { position: relative; display: flex; flex-direction: column; padding-top: 8px; } .testi__mark { position: absolute; top: -34px; left: -6px; font-family: var(--f-display); font-size: 7rem; line-height: 1; color: var(--bone-deep); z-index: 0; } .testi__lead blockquote { position: relative; font-family: var(--f-display); font-weight: 500; font-size: clamp(1.5rem, 1.2rem + 1.7vw, 2.4rem); line-height: 1.22; letter-spacing: -.015em; color: var(--ink); } .testi__lead figcaption { display: flex; align-items: center; gap: 14px; margin-top: 32px; } .testi__av { width: 50px; height: 50px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: .92rem; flex: none; } .testi__lead figcaption b { display: block; color: var(--ink); font-size: 1rem; } .testi__lead figcaption i { font-style: normal; font-size: .85rem; color: var(--muted); } /* citas de apoyo */ .testi__side { display: flex; flex-direction: column; justify-content: center; } .testi__mini { padding: 26px 0; border-top: 1px solid var(--bone-deep); } .testi__side .testi__mini:last-child { border-bottom: 1px solid var(--bone-deep); } .testi__mini blockquote { font-size: 1.05rem; line-height: 1.5; color: var(--ink); } .testi__mini figcaption { margin-top: 16px; } .testi__mini figcaption b { color: var(--ink); font-size: .92rem; } .testi__mini figcaption i { font-style: normal; font-size: .8rem; color: var(--muted); display: block; margin-top: 2px; font-family: var(--f-mono); } /* ---------------------------------------------------------------- 16 · FAQ ---------------------------------------------------------------- */ .faq__wrap { max-width: 860px; margin-inline: auto; } .faq__head { text-align: center; margin-bottom: clamp(32px, 4vw, 52px); } .faq__head .lead { margin-inline: auto; } .faq__list { display: flex; flex-direction: column; gap: 12px; } .qa { border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; padding: 0 clamp(18px, 2.2vw, 28px); overflow: hidden; transition: border-color .45s var(--ease), box-shadow .45s var(--ease), background-color .45s var(--ease); } .qa:hover { border-color: color-mix(in srgb, var(--blue) 30%, var(--line)); box-shadow: 0 18px 40px -34px rgba(15,27,44,.5); } .qa[open] { background: linear-gradient(180deg, var(--blue-soft) 0%, #fff 28%); border-color: color-mix(in srgb, var(--blue) 34%, transparent); box-shadow: 0 26px 54px -34px rgba(37, 117, 84,.45); } .qa summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: clamp(20px, 2.2vw, 26px) 0; cursor: pointer; list-style: none; font-family: var(--f-display); font-weight: 500; font-size: clamp(1.08rem, 1rem + .5vw, 1.32rem); color: var(--ink); transition: color .35s var(--ease); -webkit-tap-highlight-color: transparent; user-select: none; } .qa[open] summary { color: var(--blue-press); } .qa summary::-webkit-details-marker { display: none; } /* icono +/- : el signo se transforma con un giro suave y la barra vertical se repliega limpiamente. Mismo easing en todo para una transición fluida. */ .qa__icon { position: relative; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--blue-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 16%, transparent); transition: background-color .3s var(--ease-out); } .qa[open] .qa__icon { background: var(--blue); } .qa__icon::before, .qa__icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 13px; height: 2px; border-radius: 2px; background: var(--blue); transition: transform .4s var(--ease-out), background-color .3s var(--ease-out); } .qa__icon::before { transform: translate(-50%, -50%); } /* barra horizontal (fija) */ .qa__icon::after { transform: translate(-50%, -50%) rotate(90deg); } /* barra vertical → "+" */ .qa[open] .qa__icon::before, .qa[open] .qa__icon::after { background: #fff; } .qa[open] .qa__icon::after { transform: translate(-50%, -50%) rotate(0deg); } /* gira a horizontal → "−" */ .qa__body { overflow: hidden; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); } .qa[open] .qa__body { grid-template-rows: 1fr; } .qa__body > p { min-height: 0; font-size: 1rem; color: var(--body); padding-bottom: 26px; max-width: 60ch; } /* ---------------------------------------------------------------- 17 · CTA final ---------------------------------------------------------------- */ /* ================================================================ 17 · CONTACTO — minimalista y editorial (rediseño completo): sin auras ni mallas; tipografía limpia a la izquierda y canales de contacto como filas sobrias separadas por filetes. ================================================================ */ .ctc { position: relative; background: var(--canvas); color: var(--ink); padding-block: clamp(66px, 9vw, 128px); border-top: 1px solid var(--line-cool); } .ctc__inner { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(48px, 7vw, 100px); row-gap: 44px; align-items: center; } .ctc__title { font-family: var(--f-display); font-weight: 500; font-size: var(--t-xl); line-height: 1.04; letter-spacing: -.028em; margin-top: 18px; color: var(--ink); } .ctc__sub { font-size: 1.1rem; color: var(--body); margin-top: 22px; max-width: 42ch; line-height: 1.6; } .ctc__points { display: flex; flex-direction: column; gap: 13px; margin-top: 30px; } .ctc__points li { display: flex; align-items: center; gap: 12px; font-size: 1rem; color: var(--ink); font-weight: 500; } .ctc__points svg { width: 21px; height: 21px; flex: none; color: var(--blue); background: var(--blue-soft); border-radius: 50%; padding: 3px; } /* tarjeta de contacto: WhatsApp protagonista + canales prolijos */ .ctc__card { background: #fff; border: 1px solid var(--line-cool); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); padding: clamp(20px, 2.4vw, 30px); } .ctc__wa { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 15px; background: linear-gradient(150deg, #25d366, #16a44e); color: #fff; box-shadow: 0 14px 26px -14px rgba(22,164,78,.6); transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .ctc__wa:hover { transform: translateY(-2px); box-shadow: 0 20px 34px -14px rgba(22,164,78,.7); } .ctc__wa-ic { width: 30px; height: 30px; flex: none; } .ctc__wa-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ctc__wa-tx b { font-family: var(--f-display); font-weight: 700; font-size: 1.08rem; letter-spacing: -.01em; } .ctc__wa-tx i { font-style: normal; font-family: var(--f-mono); font-size: .82rem; color: rgba(255,255,255,.88); } .ctc__wa-arrow { flex: none; transition: transform .3s var(--ease); } .ctc__wa:hover .ctc__wa-arrow { transform: translateX(4px); } .ctc__more { display: flex; flex-direction: column; margin-top: 6px; } .ctc__chan { display: flex; align-items: center; gap: 14px; padding: 15px 4px; border-bottom: 1px solid var(--line-cool); transition: padding-left .3s var(--ease); } .ctc__chan:last-child { border-bottom: 0; } .ctc__chan:hover { padding-left: 7px; } .ctc__chan-ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--blue-soft); color: var(--blue); } .ctc__chan-ic svg { width: 21px; height: 21px; } .ctc__chan-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ctc__chan-tx span { font-family: var(--f-mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); } .ctc__chan-tx b { font-family: var(--f-display); font-weight: 600; font-size: 1.02rem; color: var(--ink); letter-spacing: -.01em; } .ctc__chan-arrow { flex: none; color: var(--muted); transition: transform .3s var(--ease), color .3s; } .ctc__chan:hover .ctc__chan-arrow { transform: translateX(4px); color: var(--blue); } @media (max-width: 860px) { .ctc__inner { grid-template-columns: 1fr; row-gap: 34px; } .ctc__sub { max-width: 100%; } } /* ---------------------------------------------------------------- 18 · Footer ---------------------------------------------------------------- */ .footer { position: relative; background: var(--navy); color: rgba(255,255,255,.72); padding-block: clamp(56px, 7vw, 90px) 30px; } .footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(131, 209, 176, .35), transparent); } .footer__inner { display: grid; grid-template-columns: 1.1fr 1.5fr; gap: clamp(36px, 5vw, 72px); padding-bottom: clamp(36px, 4vw, 52px); border-bottom: 1px solid rgba(255,255,255,.1); } .brand--footer { display: inline-flex; align-items: center; gap: 12px; } .brand--footer .brand__word { font-size: 1.55rem; } .footer__tag { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.5rem, 1.2rem + 1vw, 1.95rem); color: #fff; line-height: 1.08; margin-top: 20px; letter-spacing: -.02em; } .footer__tag-em { color: var(--violet-lite); font-weight: 700; } .footer__pitch { font-size: .98rem; line-height: 1.6; color: rgba(255,255,255,.6); margin-top: 14px; max-width: 34ch; } .footer__demo { display: inline-flex; align-items: center; gap: 9px; margin-top: 26px; padding: 13px 22px; border-radius: 12px; font-weight: 600; font-size: .95rem; color: var(--navy); background: #fff; transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .footer__demo:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -14px rgba(0,0,0,.55); } .footer__demo svg { transition: transform .3s var(--ease); } .footer__demo:hover svg { transform: translateX(3px); } .footer__info { display: grid; grid-template-columns: repeat(3, auto); gap: clamp(26px, 3vw, 48px); justify-content: start; align-content: start; } .footer__block { display: flex; flex-direction: column; gap: 11px; } .footer__label { font-family: var(--f-display); font-weight: 600; font-size: .82rem; color: #fff; letter-spacing: .01em; margin-bottom: 5px; } .footer__line { display: inline-flex; align-items: center; gap: 9px; font-size: .95rem; color: rgba(255,255,255,.72); font-variant-numeric: tabular-nums; transition: color .3s; } a.footer__line:hover { color: #fff; } .footer__line svg { width: 17px; height: 17px; flex: none; color: var(--violet-lite); } .footer__sub { font-size: .84rem; color: rgba(255,255,255,.42); padding-left: 26px; margin-top: -4px; } .footer__nav a { font-size: .95rem; color: rgba(255,255,255,.72); transition: color .3s var(--ease), padding-left .3s var(--ease); } .footer__nav a:hover { color: #fff; padding-left: 4px; } .footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 26px; font-size: .82rem; color: rgba(255,255,255,.45); } .footer__made { font-family: var(--f-mono); letter-spacing: .02em; } @media (max-width: 860px) { .footer__inner { grid-template-columns: 1fr; gap: 40px; } .footer__info { grid-template-columns: 1fr 1fr; gap: 30px; } } @media (max-width: 480px) { .footer__info { grid-template-columns: 1fr; } .footer__legal { flex-direction: column; gap: 8px; } } /* ---------------------------------------------------------------- 19 · Motion / reveal ---------------------------------------------------------------- */ [data-reveal] { opacity: 0; transform: translateY(24px) scale(.985); transition: opacity .85s var(--ease), transform .85s var(--ease); will-change: opacity, transform; } [data-reveal].is-visible { opacity: 1; transform: none; } /* ---------------------------------------------------------------- 20 · Responsive ---------------------------------------------------------------- */ @media (max-width: 1024px) { /* móvil: texto → animación de la tarjeta → botones (debajo de la animación) */ .hero__grid { grid-template-columns: 1fr; grid-template-areas: "copy" "visual" "cta"; gap: 32px; row-gap: 32px; min-height: 0; } .hero__copy { align-self: auto; } /* en móvil la tarjeta NFC en reposo asoma por el borde derecho y provoca scroll horizontal → iOS hace zoom-out de toda la página y deja una franja blanca enorme al final. La recortamos aquí (no afecta el arrastre, que va hacia la izquierda, hacia el teléfono). */ .hero__visual { overflow-x: clip; } /* iOS/WebKit no ordena bien las caras de un preserve-3d: las rebanadas 3D del cuerpo del teléfono se pintaban ENCIMA de la pantalla (se veía un bloque oscuro, sin animación). En móvil mostramos sólo la cara frontal —con la pantalla y sus animaciones— de forma plana y fiable. */ .dev { transform-style: flat; } .dev__body, .dev__back, .dev__btn { display: none; } .dev__front { transform: none; } .dev__screen { transform: none; } /* ambos botones apilados, centrados y bajo la animación (con aire a los lados) */ .hero__cta { align-self: auto; width: 100%; flex-direction: column; gap: 12px; margin-top: 4px; } .hero__cta .btn { width: 100%; justify-content: center; padding: 15px 20px; font-size: .95rem; } .solucion__layout { grid-template-columns: 1fr; } .feat { min-height: 0; } .como__grid { grid-template-columns: 1fr; row-gap: 0; } .como__sticky, .como__steps { grid-column: 1 / -1; grid-row: auto; } /* Scrollytelling en móvil: el bloque (título + visual) se fija arriba mientras los pasos avanzan 01→04, luego se libera y sigue el scroll. */ .como__sticky { position: sticky; top: 64px; z-index: 5; order: 1; max-width: 100%; margin-inline: 0; width: 100%; background: var(--canvas); padding-bottom: 14px; } /* Título compacto para dejar espacio al visual y al paso activo */ .como__head { text-align: left; margin-bottom: 12px; } .como__sticky .h-lg { font-size: 1.5rem; max-width: 22ch; } .como__sticky .eyebrow { margin-bottom: 12px; } /* Visual acotado: ocupa la mitad superior; los pasos quedan visibles debajo. El contenido de cada escena se escala para verse completo (no se recorta). */ .como__stage { max-height: 44vh; max-width: min(330px, 84vw); margin-inline: auto; } .como__stage .stage { padding: 4%; } .como__stage .stage > * { transform: scale(.82); transform-origin: center; } .como__steps { order: 2; padding-top: 6px; } /* Cada paso necesita recorrido propio para activarse de a uno al scrollear. Se conserva el atenuado (opacity .35 → 1 activo) como en desktop. */ .step { min-height: 60vh; } .testi { grid-template-columns: 1fr; gap: 40px; } /* móvil: texto → tarjeta ("Mueve la tarjeta") → botones, debajo de todo */ .voltage__inner { grid-template-columns: 1fr; grid-template-areas: "copy" "art" "cta"; row-gap: 36px; } .voltage__cta { align-self: auto; width: 100%; flex-direction: column; gap: 12px; margin-top: 0; } .voltage__cta .btn { width: 100%; justify-content: center; padding: 15px 20px; font-size: .95rem; } } @media (max-width: 860px) { .nav__links, .nav__actions .link-quiet, .nav__actions .btn { display: none; } .nav__burger { display: block; } .grid-12 > [class*="col-"] { grid-column: 1 / -1 !important; } .problema__intro, .casos__head, .faq__head { position: static; } /* transform-origin: top → al escalar, el hueco sobrante queda sólo abajo y lo recupera el min-height reducido (evita el gran espacio gris en el hero). */ .viewer3d { transform: scale(.86); transform-origin: top center; min-height: 430px; } } /* Flip card: más compacta en pantallas chicas */ @media (max-width: 760px) { .flipcard__inner { min-height: 500px; } .flipcard__face { padding: 26px 22px; gap: 16px; } } @media (max-width: 620px) { :root { --sect: 68px; } .hero__title { font-size: clamp(2.6rem, 11vw, 3.4rem); } .viewer3d { transform: scale(.78); transform-origin: top center; min-height: 360px; } .caso { grid-template-columns: 1fr; gap: 8px; } .caso__k, .caso h3, .caso p { grid-column: 1; grid-row: auto; } .caso__k { padding-top: 0; } .frictio { gap: 14px; } /* la tarjeta NFC arrastrable no debe exceder el ancho del teléfono */ .tbcard--tilt { width: clamp(230px, 74vw, 320px); } .footer__grid { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: span 2; } /* Abanico en pantallas chicas: el sistema progresivo --fan (definido en la media de 760px y controlado por el scroll en JS) ya abre el abanico al bajar y mantiene ambos estados dentro de la pantalla. Aquí sólo afinamos el tamaño para teléfonos angostos. */ .modulos__head { margin-bottom: 22px; } .fan-card { width: clamp(150px, 50vw, 184px); } .fan-card .tbcard__org { overflow: hidden; text-overflow: ellipsis; max-width: 100%; } } /* ---------------------------------------------------------------- 21 · Reduce motion ---------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } [data-reveal] { opacity: 1; transform: none; } .line__in { transform: none; } .ticker__track { animation: none; } /* visor 3D: pose estática legible (tarjeta presentada, ficha visible) */ .card3d { animation: none; transform: translate(-50%, -50%) translate3d(176px, 78px, 78px) rotateX(5deg) rotateY(-18deg) rotateZ(-6deg); } .scr--wait { animation: none; opacity: 0; } .scr--ficha { animation: none; opacity: 1; transform: none; } .contact-fx { animation: none; opacity: 0; } } /* ================================================================ PARA QUIÉN · selector de rubro + dashboard interactivo ================================================================ */ .sectores { background: var(--cool); border-block: 1px solid var(--line-cool); } .sectores__head { max-width: 60ch; margin-bottom: clamp(22px, 3vw, 38px); } .sectores__head .lead { margin-top: 16px; } /* aviso "la página se adaptó a tu rubro" + fundido de los textos adaptables */ .sectores__hint { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 8px 14px; border-radius: 99px; background: var(--ok-soft); color: var(--ok); font-size: .84rem; font-weight: 500; animation: hintIn .45s var(--ease-out) both; } .sectores__hint b { font-weight: 700; } .sectores__hint svg { flex: none; } @keyframes hintIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } [data-adapt] { transition: opacity .2s var(--ease); } .is-adapting [data-adapt] { opacity: .15; } .sectores__tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(8px, 1.2vw, 16px); } .sector { font-family: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 9px; padding: clamp(16px, 1.8vw, 22px) 12px; background: var(--canvas); border: 1px solid var(--line-cool); border-radius: var(--r-md); position: relative; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); } .sector { --accent: var(--blue); } .sector:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); } .sector.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-sm); } .sector.is-active::after { content: ""; position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%); width: 34px; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent); } .sector__ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent); transition: background .35s var(--ease), color .35s var(--ease); } .sector.is-active .sector__ic { background: var(--accent); color: #fff; } .sector__ic svg { width: 25px; height: 25px; } .sector__name { font-family: var(--f-display); font-weight: 600; font-size: 1rem; color: var(--ink); line-height: 1.2; } .sector__sub { font-size: .82rem; color: var(--muted); line-height: 1.3; } /* — Dashboard de ejemplo — */ .demo { margin-top: clamp(22px, 3vw, 40px); } .demo__note { margin-top: 14px; font-size: .82rem; color: var(--muted); font-family: var(--f-mono); } .dash { --accent: var(--blue); border: 1px solid var(--line-cool); border-radius: var(--r-lg); overflow: hidden; background: var(--canvas); box-shadow: var(--shadow-md); } .dash__chrome { display: flex; align-items: center; gap: 14px; padding: 11px 16px; background: var(--bone); border-bottom: 1px solid var(--line); } .dash__dots { display: flex; gap: 6px; } .dash__dots span { width: 11px; height: 11px; border-radius: 50%; background: #d8d2c4; } .dash__dots span:nth-child(1) { background: #e6896f; } .dash__dots span:nth-child(2) { background: #e8c06a; } .dash__dots span:nth-child(3) { background: #88c293; } .dash__url { font-family: var(--f-mono); font-size: .76rem; color: var(--muted); background: var(--canvas); border: 1px solid var(--line-cool); padding: 4px 14px; border-radius: 99px; flex: 1; max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dash__body { display: flex; height: 484px; } /* sidebar */ .dash__side { width: 216px; flex-shrink: 0; background: var(--navy); color: #cdd6e4; display: flex; flex-direction: column; padding: 18px 14px; } .dash__brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px; margin-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.08); } .dash__brand-logo { flex-shrink: 0; display: grid; place-items: center; width: 46px; height: 30px; border-radius: 8px; border: 1.5px dashed rgba(255,255,255,.32); color: rgba(255,255,255,.62); font-family: var(--f-mono); font-size: .56rem; letter-spacing: .04em; text-align: center; line-height: 1; } .dash__brand-name { font-family: var(--f-display); font-weight: 600; font-size: .92rem; color: #fff; line-height: 1.1; } .dash__brand-name i { display: block; font-style: normal; font-size: .68rem; font-weight: 400; color: #8a97ab; font-family: var(--f-mono); } .dash__nav { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; } .dash__nav button { font-family: inherit; cursor: pointer; text-align: left; display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px; font-size: .88rem; color: #aab4c4; background: transparent; border: 0; transition: background .25s, color .25s; } .dash__nav button svg { width: 17px; height: 17px; flex-shrink: 0; opacity: .8; } .dash__nav button:hover { background: rgba(255,255,255,.06); color: #fff; } .dash__nav button.is-active { background: color-mix(in srgb, var(--accent) 26%, transparent); color: #fff; } .dash__nav button.is-active svg { opacity: 1; } .dash__user { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px 8px 4px; border-top: 1px solid rgba(255,255,255,.08); } .dash__user-av { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 50%, #fff)); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: .8rem; } .dash__user-txt b { display: block; font-size: .82rem; color: #fff; font-weight: 600; } .dash__user-txt span { font-size: .7rem; color: #8a97ab; font-family: var(--f-mono); } /* main */ .dash__main { flex: 1; min-width: 0; padding: clamp(16px, 1.8vw, 24px); display: flex; flex-direction: column; gap: 16px; overflow-y: auto; } .dash__top { display: flex; align-items: center; gap: 12px; } .dash__search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; background: var(--cool); border: 1px solid var(--line-cool); border-radius: 11px; padding: 0 14px; transition: border-color .25s, box-shadow .25s; } .dash__search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); } .dash__search svg { width: 17px; height: 17px; color: var(--faint); flex-shrink: 0; } .dash__search input { flex: 1; border: 0; background: transparent; outline: none; font-family: inherit; font-size: .9rem; color: var(--ink); padding: 11px 0; } .dash__new { flex-shrink: 0; cursor: pointer; font-family: inherit; font-weight: 600; font-size: .86rem; display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border-radius: 10px; border: 0; background: var(--accent); color: #fff; } .dash__new svg { width: 15px; height: 15px; } .dash__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .dash__kpi { border: 1px solid var(--line-cool); border-radius: 13px; padding: 14px 16px; background: var(--canvas); } .dash__kpi span { font-size: .72rem; font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .dash__kpi b { display: block; margin-top: 4px; font-family: var(--f-display); font-weight: 600; font-size: 1.5rem; color: var(--ink); line-height: 1.1; } .dash__tablewrap { border: 1px solid var(--line-cool); border-radius: 13px; overflow: hidden; } .dash__table { width: 100%; border-collapse: collapse; font-size: .88rem; } .dash__table thead th { text-align: left; font-family: var(--f-mono); font-weight: 500; font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); padding: 11px 16px; background: var(--cool); border-bottom: 1px solid var(--line-cool); } .dash__table tbody td { padding: 12px 16px; border-bottom: 1px solid var(--line-cool); color: var(--body); vertical-align: middle; } .dash__table tbody tr:last-child td { border-bottom: 0; } .dash__table tbody tr { cursor: pointer; transition: background .2s; } .dash__table tbody tr:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); } .dash__table tbody tr.is-sel { background: color-mix(in srgb, var(--accent) 11%, transparent); } .dash__cell-main { display: flex; align-items: center; gap: 11px; } .dash__av { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); display: grid; place-items: center; font-weight: 600; font-size: .78rem; } .dash__cell-main b { color: var(--ink); font-weight: 600; } .dash__mono { font-family: var(--f-mono); font-size: .82rem; } .pill { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 600; padding: 4px 11px; border-radius: 99px; white-space: nowrap; } .pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .pill--ok { color: var(--ok); background: var(--ok-soft); } .pill--warn { color: var(--warn); background: var(--warn-soft); } .pill--bad { color: #b23b3b; background: #f7e7e7; } .pill--neutral { color: var(--muted); background: var(--cool); } .dash__empty { padding: 28px 16px; text-align: center; color: var(--muted); font-size: .9rem; } /* encabezado de vistas secundarias */ .dash__viewhead { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .dash__viewhead h4 { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; color: var(--ink); } .dash__viewhead span { font-size: .82rem; color: var(--muted); font-family: var(--f-mono); } /* formulario "Nuevo" */ .dash__form { border: 1px solid var(--line-cool); border-radius: 13px; padding: 16px; background: var(--cool); } .dash__form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .dash__field { display: flex; flex-direction: column; gap: 5px; } .dash__field span { font-size: .7rem; font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .dash__field input { font-family: inherit; font-size: .9rem; color: var(--ink); background: var(--canvas); border: 1px solid var(--line-cool); border-radius: 9px; padding: 9px 11px; outline: none; transition: border-color .2s, box-shadow .2s; } .dash__field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); } .dash__form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; } .dash__btn-ghost, .dash__btn-go { font-family: inherit; cursor: pointer; font-weight: 600; font-size: .86rem; padding: 9px 18px; border-radius: 9px; border: 1px solid var(--line-cool); } .dash__btn-ghost { background: transparent; color: var(--body); } .dash__btn-ghost:hover { background: var(--canvas); } .dash__btn-go { background: var(--accent); color: #fff; border-color: transparent; } /* calendario */ .dash__cal { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; } .dash__cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .dash__cal-wd { text-align: center; font-family: var(--f-mono); font-size: .66rem; color: var(--faint); padding-bottom: 4px; } .dash__cal-cell { position: relative; aspect-ratio: 1 / 1; min-height: 34px; display: grid; place-items: center; font-size: .82rem; color: var(--body); background: var(--canvas); border: 1px solid var(--line-cool); border-radius: 9px; cursor: pointer; font-family: inherit; transition: background .2s, border-color .2s, color .2s; } .dash__cal-cell.is-empty { background: transparent; border: 0; cursor: default; } .dash__cal-cell:not(.is-empty):hover { border-color: var(--accent); } .dash__cal-cell.is-today { font-weight: 700; color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line-cool)); } .dash__cal-cell.is-sel { background: var(--accent); color: #fff; border-color: transparent; } .dash__cal-dot { position: absolute; bottom: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); } .dash__cal-cell.is-sel .dash__cal-dot { background: #fff; } .dash__cal-day { display: flex; flex-direction: column; gap: 9px; } .dash__ev { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border: 1px solid var(--line-cool); border-radius: 11px; background: var(--canvas); } .dash__ev-time { font-family: var(--f-mono); font-size: .8rem; color: var(--accent); font-weight: 600; flex-shrink: 0; } .dash__ev-body { flex: 1; min-width: 0; } .dash__ev-body b { display: block; font-size: .88rem; color: var(--ink); } .dash__ev-body span { font-size: .76rem; color: var(--muted); } .dash__ev-empty { padding: 18px; text-align: center; color: var(--muted); font-size: .86rem; } @media (max-width: 620px) { .dash__cal { grid-template-columns: 1fr; } } @media (max-width: 880px) { .sectores__tabs { grid-template-columns: repeat(2, 1fr); } .sector__sub { display: none; } } @media (max-width: 760px) { .dash__body { flex-direction: column; height: auto; } .dash__main { overflow-y: visible; } /* barra lateral → fila que ENVUELVE: ningún botón de sección queda oculto */ .dash__side { width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px; } .dash__brand { border-bottom: 0; border-right: 1px solid rgba(255,255,255,.08); padding: 0 14px 0 4px; margin: 0; flex-shrink: 0; } .dash__brand-name i { display: none; } .dash__nav { flex-direction: row; flex-wrap: wrap; gap: 6px; margin: 0; } .dash__nav button { white-space: nowrap; padding: 8px 12px; } .dash__user { display: none; } .dash__kpis { grid-template-columns: repeat(3, 1fr); gap: 10px; } .dash__tablewrap { overflow-x: auto; } .dash__table { min-width: 460px; } } @media (max-width: 560px) { /* 2 columnas + el 5º a lo ancho = los 5 rubros entran completos */ .sectores__tabs { grid-template-columns: repeat(2, 1fr); gap: 8px; } .sector { flex-direction: row; align-items: center; text-align: left; gap: 10px; padding: 11px 12px; min-width: 0; } /* con 4 rubros la grilla 2×2 calza exacta: ya no hace falta el ancho completo */ .sector__sub { display: none; } /* se oculta para que quepan todos */ .sector__ic { flex-shrink: 0; width: 38px; height: 38px; } .sector__name { min-width: 0; font-size: .92rem; line-height: 1.15; } .sector.is-active::after { display: none; } /* — Dashboard en teléfono: que TODO entre sin scroll lateral ni recortes — */ /* Barra lateral → fila que envuelve (nada queda oculto fuera de pantalla) */ .dash__side { flex-wrap: wrap; overflow-x: visible; gap: 8px; } .dash__brand { border-right: 0; width: 100%; padding: 0 0 8px; } .dash__brand-name i { display: block; } /* secciones en grilla 2×2: entran completas, sin salirse de pantalla */ .dash__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; width: 100%; } .dash__nav button { justify-content: flex-start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .8rem; padding: 9px 11px; } /* Cabecera: buscador full y botón "Nuevo" debajo, sin apretarse */ .dash__top { flex-wrap: wrap; } .dash__search { flex: 1 1 100%; } .dash__new { flex: 1 1 100%; justify-content: center; } .dash__url { max-width: none; } /* Tabla → tarjetas apiladas: cada registro es un bloque legible que cabe */ .dash__tablewrap { overflow-x: visible; } .dash__table { min-width: 0; display: block; } .dash__table thead { display: none; } .dash__table tbody, .dash__table tbody tr, .dash__table tbody td { display: block; width: 100%; } .dash__table tbody tr { padding: 13px 15px; border-bottom: 1px solid var(--line-cool); } .dash__table tbody tr:last-child { border-bottom: 0; } .dash__table tbody td { padding: 2px 0; border: 0; } .dash__table tbody td:first-child { margin-bottom: 4px; } .dash__table tbody td:not(:first-child) { font-size: .84rem; color: var(--muted); } .dash__table tbody td .pill { margin-top: 4px; } /* Calendario: celdas más compactas para 7 columnas en pantalla angosta */ .dash__cal-cell { min-height: 30px; font-size: .76rem; } } /* ================================================================ CÓMO FUNCIONA · recorrido horizontal (pin en desktop, swipe móvil) ================================================================ */ .section--flush { padding-bottom: clamp(36px, 5vw, 64px); } .como__intro { margin-bottom: clamp(28px, 4vw, 52px); } .como__intro .lead { margin-top: 16px; } .hflow { position: relative; height: var(--hflow-len, 260vh); } .hflow__pin { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; } .hflow__viewport { overflow: hidden; width: 100%; } .hflow__track { display: flex; will-change: transform; } .hstep { flex: 0 0 100vw; box-sizing: border-box; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: clamp(28px, 5vw, 72px); padding-inline: max(var(--pad-x), calc((100vw - var(--maxw)) / 2 + var(--pad-x))); } .hstep__num { font-family: var(--f-mono); font-size: .9rem; color: var(--blue); } .hstep__text h3 { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem); color: var(--ink); margin-top: 10px; line-height: 1.1; } .hstep__text p { font-size: 1.02rem; color: var(--body); margin-top: 16px; max-width: 44ch; line-height: 1.6; } .hvis { position: relative; width: 100%; max-width: 420px; aspect-ratio: 1 / 1; margin-inline: auto; padding: 8%; background: var(--bone); border: 1px solid var(--bone-deep); border-radius: var(--r-xl); display: grid; place-items: center; overflow: hidden; } .hvis::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(18,34,55,.06) 1px, transparent 0); background-size: 22px 22px; } .hvis > * { position: relative; z-index: 1; } /* controles */ .hflow__nav { margin-top: clamp(20px, 3vh, 38px); display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .hflow__dots { display: flex; gap: 8px; flex-wrap: wrap; } .hflow__dot { font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; font-size: .84rem; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 99px; padding: 7px 14px; transition: color .3s, border-color .3s, background .3s; } .hflow__dot span { font-family: var(--f-mono); font-size: .74rem; color: var(--faint); } .hflow__dot:hover { color: var(--ink); border-color: var(--muted); } .hflow__dot.is-active { color: #fff; background: var(--navy); border-color: var(--navy); } .hflow__dot.is-active span { color: var(--violet-lite); } .hflow__bar { flex: 1; min-width: 120px; height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; } .hflow__bar span { display: block; height: 100%; width: 25%; background: var(--blue); border-radius: 3px; transition: width .25s var(--ease); } /* móvil / tablet: MISMO comportamiento que desktop — la sección se fija (pin) y, al hacer scroll vertical, los pasos avanzan en horizontal y los puntos se marcan. Sólo apilamos el contenido de cada paso (visual arriba, texto). */ @media (max-width: 1024px) { .hstep { grid-template-columns: 1fr; gap: 18px; align-content: center; } .hstep__visual { order: -1; } .hvis { max-width: min(320px, 72vw); } .hflow__nav { padding-inline: var(--pad-x); margin-top: 22px; } .hflow__dot { font-size: .8rem; } } @media (max-width: 560px) { .hstep__text p { font-size: .96rem; } .hflow__dots { width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; } .hflow__dots::-webkit-scrollbar { display: none; } .hflow__dot { flex-shrink: 0; } } /* ================================================================ ANTES / DESPUÉS · comparador pro de doble panel ================================================================ */ .antes__head { margin-bottom: clamp(28px, 4vw, 48px); } .ba { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: clamp(14px, 2vw, 26px); } .ba__panel { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: clamp(24px, 2.6vw, 38px); display: flex; flex-direction: column; } /* — Antes — recesado, papel, tono apagado */ .ba__panel--before { background: var(--bone); border: 1px solid var(--bone-deep); } .ba__panel--before::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: radial-gradient(circle at 1px 1px, rgba(18,34,55,.06) 1px, transparent 0); background-size: 20px 20px; } /* — Después — elevado, premium oscuro con glow azul */ .ba__panel--after { background: linear-gradient(160deg, #16273f 0%, #102036 55%, #0c1a2e 100%); border: 1px solid rgba(255, 255, 255, .1); box-shadow: var(--shadow-lg); } .ba__glow { position: absolute; top: -40%; right: -20%; width: 70%; height: 90%; background: radial-gradient(circle, rgba(37, 117, 84,.34), transparent 62%); pointer-events: none; } .ba__phead { position: relative; z-index: 1; margin-bottom: clamp(18px, 2vw, 26px); } .ba__chip { display: inline-flex; align-items: center; gap: 7px; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .04em; padding: 6px 12px; border-radius: 99px; margin-bottom: 16px; } .ba__chip svg { width: 14px; height: 14px; } .ba__chip--before { background: var(--warn-soft); color: var(--clay); } .ba__chip--after { background: rgba(255,255,255,.08); color: #fff; font-family: var(--f-display); font-weight: 700; letter-spacing: -.01em; font-size: .92rem; } .ba__chip--after .wm-box { color: var(--violet-lite); } .ba__logo { height: 1.15em; width: auto; } .ba__ptitle { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.3rem, 1.1rem + .9vw, 1.85rem); line-height: 1.12; letter-spacing: -.02em; color: var(--ink); } .ba__ptitle--good { color: #fff; } .ba__list { display: flex; flex-direction: column; gap: 13px; position: relative; z-index: 1; } .ba__list li { display: flex; align-items: center; gap: 13px; font-size: .98rem; line-height: 1.4; color: var(--body); } .ba__list--good li { color: rgba(255,255,255,.9); } .ba__ic { flex-shrink: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; } .ba__ic svg { width: 15px; height: 15px; } .ba__ic--no { background: color-mix(in srgb, var(--clay) 16%, transparent); color: var(--clay); } .ba__ic--ok { background: rgba(37, 117, 84,.22); color: #7fb6ff; } .ba__cta { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: .94rem; color: var(--navy); background: #fff; padding: 12px 20px; border-radius: 12px; margin-top: clamp(22px, 3vw, 32px); margin-bottom: 2px; transition: transform .35s var(--ease), box-shadow .35s var(--ease); } .ba__cta:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgba(0,0,0,.5); } .ba__cta svg { transition: transform .35s var(--ease); } .ba__cta:hover svg { transform: translateX(3px); } /* conector central */ .ba__mid { display: grid; place-items: center; } .ba__arrow { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--canvas); border: 1px solid var(--line-cool); color: var(--blue); box-shadow: var(--shadow-md); } .ba__arrow svg { width: 22px; height: 22px; } @media (max-width: 860px) { .ba { grid-template-columns: 1fr; } .ba__panel--after { transform: none; } .ba__mid { padding: 2px 0; } .ba__arrow { transform: rotate(90deg); width: 46px; height: 46px; } } /* ================================================================ 22 · Rendimiento en móvil Las pantallas chicas suelen ser equipos de menor potencia: apagamos los adornos animados más caros (auroras con blur, bordes giratorios con conic-gradient) para evitar tirones al hacer scroll. Sin afectar el layout ni la legibilidad. ================================================================ */ @media (max-width: 760px) { .voltage__brand em { animation: none; } .ticker__track { animation-duration: 60s; } } /* ================================================================= MÓDULOS POR RUBRO (reemplazó al dashboard de ejemplo) Grilla de módulos que cambia al elegir un rubro en el selector. Móvil: una columna. Desde 560px: dos. Desde 900px: tres. ================================================================= */ .mods { margin-top: 26px; } .mods__intro { margin: 0 0 18px; font-size: 15.5px; color: var(--muted); } .mods__grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0; padding: 0; list-style: none; } @media (min-width: 560px) { .mods__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } } @media (min-width: 900px) { .mods__grid { grid-template-columns: repeat(3, 1fr); } } .mod { display: flex; align-items: flex-start; gap: 12px; padding: 15px 16px; background: #fff; border: 1px solid var(--line, #e4e8ee); border-radius: 14px; /* La transición es corta a propósito: la grilla completa se re-renderiza al cambiar de rubro y una animación larga se percibe como lentitud. */ transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .mod:hover { border-color: color-mix(in srgb, var(--accent, var(--blue)) 45%, var(--line, #e4e8ee)); box-shadow: 0 6px 20px -12px color-mix(in srgb, var(--accent, var(--blue)) 60%, transparent); transform: translateY(-1px); } .mod__ic { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: color-mix(in srgb, var(--accent, var(--blue)) 10%, #fff); color: var(--accent, var(--blue)); } .mod__ic svg { width: 20px; height: 20px; } .mod__tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .mod__tx b { font-size: 15px; font-weight: 700; color: var(--ink, #111722); line-height: 1.3; } .mod__tx span { font-size: 13.5px; line-height: 1.5; color: var(--muted, #6c7686); } /* — Núcleo incluido en todos los planes — */ .mods__core { margin-top: 18px; padding: 18px 20px; border-radius: 14px; background: color-mix(in srgb, var(--accent, var(--blue)) 5%, #fff); border: 1px dashed color-mix(in srgb, var(--accent, var(--blue)) 35%, var(--line, #e4e8ee)); } .mods__core-h { margin: 0 0 12px; font-size: 14px; font-weight: 700; color: var(--ink, #111722); } .mods__core-list { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0; padding: 0; list-style: none; } @media (min-width: 700px) { .mods__core-list { grid-template-columns: repeat(3, 1fr); } } .mods__core-list li { display: grid; grid-template-columns: 20px 1fr; grid-template-areas: "ic name" ". txt"; gap: 2px 10px; align-items: center; } .mods__core-list svg { grid-area: ic; width: 18px; height: 18px; color: var(--accent, var(--blue)); } .mods__core-list b { grid-area: name; font-size: 14px; font-weight: 700; color: var(--ink, #111722); } .mods__core-list span { grid-area: txt; font-size: 13px; line-height: 1.45; color: var(--muted, #6c7686); } .mods__note { margin: 16px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--muted, #6c7686); } @media (prefers-reduced-motion: reduce) { .mod { transition: none; } .mod:hover { transform: none; } } /* El aviso de "página adaptada" era inline-flex: cada nodo de texto se volvía un ítem flex y en pantallas angostas se partía en columnas. Vuelve a flujo normal para que el texto envuelva como texto. */ .sectores__hint { display: block; text-align: left; } .sectores__hint svg { display: inline; vertical-align: -1px; margin-right: 6px; } /* ================================================================= PANEL DEL "CENTRO DEL SISTEMA" Antes eran barras grises: se veía como un esqueleto de carga, no como un producto. Ahora muestra datos reales y el estado de las vigencias, que es exactamente lo que TapBox resuelve. ================================================================= */ .feat__ui-row > b { font-size: .86rem; font-weight: 600; color: rgba(255, 255, 255, .92); text-align: right; } .feat__ui-docs { margin-top: 4px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .09); display: flex; flex-direction: column; gap: 9px; } .feat__ui-doc { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 10px; font-size: .78rem; } .feat__ui-dot { width: 7px; height: 7px; border-radius: 50%; background: #34d28b; box-shadow: 0 0 0 3px rgba(52, 210, 139, .16); } /* Ámbar = por vencer. Es el caso que el cliente reconoce como su problema. */ .feat__ui-doc--warn .feat__ui-dot { background: #f5b13d; box-shadow: 0 0 0 3px rgba(245, 177, 61, .18); } .feat__ui-doc-n { color: rgba(255, 255, 255, .88); font-weight: 500; } .feat__ui-doc-d { font-family: var(--f-mono); font-size: .7rem; color: rgba(255, 255, 255, .55); } .feat__ui-doc--warn .feat__ui-doc-d { color: #f5b13d; } .feat__ui-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 4px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .12); } .feat__ui-foot > span:first-child { font-size: .8rem; color: rgba(255, 255, 255, .6); } /* El índice "T" pasa de recuadro neutro a marca: violeta, como el acento. */ .feat__idx { color: var(--violet-lite); border-color: color-mix(in srgb, var(--violet-lite) 45%, transparent); background: color-mix(in srgb, var(--violet-lite) 12%, transparent); } @media (max-width: 420px) { .feat__ui-doc { grid-template-columns: 8px 1fr; row-gap: 2px; } .feat__ui-doc-d { grid-column: 2; } .feat__ui-row > b { font-size: .8rem; } } /* El abanico de tarjetas es casi negro: el violeta de marca queda en 2.8:1 de contraste, ilegible. Sobre fondo oscuro va el tono aclarado. Lo mismo en el reverso de la tarjeta 3D, que traía el "Box" en navy y rompía la marca. */ .fan-card .wm-box, .tbcard__face3d--back .wm-box { color: var(--violet-lite); } /* ================================================================= "TU PANEL DE CONTROL" — rediseño Tenía halo radial + trama de puntos + timbre neón girado: tres recursos de ciencia ficción sobre una tarjeta que debe parecer un documento. Se quitan los tres y la ficha pasa a ser una superficie CLARA sobre el fondo oscuro — que es lo que TapBox realmente es: un papel ordenado, no una consola. ================================================================= */ .feat { background: linear-gradient(168deg, #2A343A 0%, #20282D 60%, #171D21 100%); border: 1px solid rgba(255, 255, 255, .08); } /* fuera el halo y la trama */ .feat::after, .feat::before { content: none; } /* — La ficha, como hoja clara sobre el fondo oscuro — */ .feat--banner .feat__ui { background: #fff; border-radius: 16px; padding: 22px 24px; gap: 0; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55); color: var(--ink); } .feat__ui-head { border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 14px; } .feat__ui-head b { color: var(--ink); font-size: .92rem; } .feat__ui-head i { color: var(--muted); } .feat__ui-av { border-radius: 10px; background: var(--line); } .feat__ui-row { padding: 7px 0; } .feat__ui-row > span:first-child { color: var(--muted); font-size: .78rem; } .feat__ui-row > b { color: var(--ink); font-size: .82rem; } .feat__ui-docs { margin-top: 12px; padding: 12px 14px; background: #f7f8fb; border: 1px solid var(--line); } .feat__ui-doc-n { color: var(--ink); } .feat__ui-doc-d { color: var(--muted); } .feat__ui-doc--warn .feat__ui-doc-d { color: #B54708; } .feat__ui-doc--warn .feat__ui-dot { background: #F5A524; box-shadow: 0 0 0 3px rgba(245, 165, 36, .16); } .feat__ui-dot { background: #17976A; box-shadow: 0 0 0 3px rgba(23, 151, 106, .14); } .feat__ui-foot { border-top: 1px solid var(--line); padding-top: 13px; margin-top: 14px; } .feat__ui-foot > span:first-child { color: var(--muted); } /* El timbre neón girado pasa a etiqueta sobria: sin rotación, sin resplandor. */ .feat__ui-pill { transform: none; color: #17976A; background: rgba(23, 151, 106, .09); border: 1px solid rgba(23, 151, 106, .28); box-shadow: none; letter-spacing: .08em; } /* El índice "T", sobre fondo casi negro, se mantiene en violeta claro. */ .feat__idx { color: var(--violet-lite); border-color: color-mix(in srgb, var(--violet-lite) 40%, transparent); background: color-mix(in srgb, var(--violet-lite) 10%, transparent); } .feat__kicker { color: rgba(255, 255, 255, .58); } /* ================================================================= "CÓMO FUNCIONA" — misma línea que "Tu panel de control" La ficha se lee como documento: hairlines, mono solo para el dato técnico, estados en verde/ámbar sobrios. Sin glow, sin neón. ================================================================= */ .stage-card { border: 1px solid var(--line); box-shadow: 0 24px 50px -28px rgba(16, 16, 20, .35); border-radius: 16px; } /* La barra superior deja de ser un punto de color suelto: pasa a leerse como el encabezado de una ficha, con el estado a la derecha. */ .stage-card__bar { justify-content: space-between; background: #fff; border-bottom: 1px solid var(--line); padding: 15px 18px; letter-spacing: -.01em; } .stage-card__bar span { order: 2; width: auto; height: auto; border-radius: 999px; background: rgba(23, 151, 106, .09); border: 1px solid rgba(23, 151, 106, .28); color: #17976A; font-family: var(--f-mono); font-size: .58rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 4px 9px; } .stage-card__bar span::after { content: "Guardado"; } .stage-form { padding: 18px; gap: 13px; } .sf-row label { font-family: var(--f-text); font-size: .72rem; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted); } /* El valor se ve como dato escrito, no como campo de formulario vacío. */ .sf-input { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 4px 0 8px; font-weight: 600; font-size: .9rem; } .sf-chips span { color: var(--ink); background: #f7f8fb; border: 1px solid var(--line); font-weight: 500; padding: 5px 11px; } /* El lienzo deja el beige por un gris frío: acerca la sección a la tarjeta oscura del panel y quita el aire "plantilla genérica". */ .hvis { background: linear-gradient(168deg, #f7f8fb 0%, #eef0f6 100%); border: 1px solid var(--line); } /* La línea de progreso del paso activo, en violeta y más fina. */ .step::before { width: 2px; background: var(--blue); } .step.is-active h3 { letter-spacing: -.015em; } /* ================================================================= BLOQUE 1 · SISTEMA DE MARCA Y SUPERFICIES ================================================================= */ /* — Logotipo: "Tap" en tinta, "Box" en violeta. El tono se elige por el fondo, no por la sección: sobre claro va el violeta pleno; sobre oscuro el aclarado, porque el pleno cae bajo 3:1 de contraste. — */ .wm-tap { color: var(--ink); } .wm-box { color: var(--blue); } /* El tono lo decide la SUPERFICIE donde se apoya el logotipo, no la sección: dentro del hero oscuro hay tarjetas blancas, y ahí el violeta claro cae a 2:1 de contraste. Por eso se enumeran superficies, no contenedores. */ .wm-tap--light, .finale .wm-tap, .fan-card .wm-tap, .footer .wm-tap { color: #fff; } .finale .wm-box, .fan-card .wm-box, .footer .wm-box, .tbcard__face3d--back .wm-box, .ba__chip--after .wm-box { color: var(--violet-lite); } /* Superficies claras: siempre violeta pleno, aunque estén sobre fondo oscuro. */ .tbcard__brand .wm-box, .dev__back-brand .wm-box, .scan-phone__brand .wm-box, .nfc-card__brand .wm-box, .scr__brand .wm-box, .afi__bar-brand .wm-box { color: var(--blue); } .tbcard__brand .wm-tap, .dev__back-brand .wm-tap, .scan-phone__brand .wm-tap, .nfc-card__brand .wm-tap, .scr__brand .wm-tap, .afi__bar-brand .wm-tap { color: var(--ink); } /* El abanico oscuro es la excepción: su tarjeta SÍ es casi negra. */ .fan-card .wm-box { color: var(--violet-lite); } .fan-card .wm-tap { color: #fff; } /* — Ondas NFC: siempre violeta, ajustado al fondo. — */ .scr__nfc, .scan-phone__nfc, .nfc-card__wave, .tbcard__wave { color: var(--blue); } .fan-card .tbcard__wave, .finale .scr__nfc { color: var(--violet-lite); } /* — Pantalla del teléfono: blanca de verdad. Tenía un degradado azulado que con el cambio de paleta viró a lavanda y ensuciaba toda la pantalla. El violeta queda solo donde aporta: el halo del punto de lectura. — */ .scan-phone__scr { background-color: #fff; background-image: radial-gradient(120% 80% at 50% 0%, #ffffff 0%, #fbfaff 55%, #f4f2fb 100%); } /* ================================================================= NUMERACIÓN DE SECCIÓN Era un "01" suelto en color. Ahora es un índice compuesto: el número en mono sobre una pastilla de hairline, con el rótulo al lado. Se lee como paginación editorial, no como viñeta. ================================================================= */ .eyebrow__num { color: var(--blue); font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: .06em; padding: 4px 9px; border: 1px solid color-mix(in srgb, var(--blue) 22%, transparent); background: color-mix(in srgb, var(--blue) 6%, transparent); border-radius: 7px; line-height: 1; } /* Sobre fondo oscuro la pastilla se invierte: el borde tenue lo da el blanco. */ .voltage .eyebrow__num, .finale .eyebrow__num, .footer .eyebrow__num, .eyebrow--light .eyebrow__num { color: var(--violet-lite); border-color: color-mix(in srgb, var(--violet-lite) 30%, transparent); background: color-mix(in srgb, var(--violet-lite) 10%, transparent); } /* ================================================================= BLOQUE 3 · CONTACTO Era una sección clara más, indistinguible de las anteriores. Ahora repite el gesto de "Tu panel de control": bloque de tinta con una hoja blanca encima. Cierra la página con el mismo lenguaje con que se presentó el producto, y separa el cierre del pie. ================================================================= */ .ctc { background: linear-gradient(168deg, #2A343A 0%, #20282D 62%, #171D21 100%); color: #fff; border-top: 0; } .ctc__title { color: #fff; } .ctc__sub { color: rgba(255, 255, 255, .72); } .ctc .eyebrow { color: rgba(255, 255, 255, .55); } .ctc .eyebrow__num { color: var(--violet-lite); border-color: color-mix(in srgb, var(--violet-lite) 30%, transparent); background: color-mix(in srgb, var(--violet-lite) 10%, transparent); } .ctc__points li { color: rgba(255, 255, 255, .9); } .ctc__points svg { color: var(--violet-lite); background: rgba(131, 209, 176, .13); } /* — La hoja: misma pieza que la ficha del panel de control — */ .ctc__card { border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 40px 80px -36px rgba(0, 0, 0, .6); } /* — WhatsApp: se mantiene verde porque es reconocimiento de marca, pero plano y sin resplandor. El degradado y la sombra de color lo hacían gritar más que el resto de la página. — */ .ctc__wa { background: #1FA855; box-shadow: none; border: 1px solid rgba(0, 0, 0, .06); } .ctc__wa:hover { background: #1B9349; transform: translateY(-1px); box-shadow: 0 10px 22px -14px rgba(0, 0, 0, .5); } .ctc__wa-tx i { color: rgba(255, 255, 255, .82); } /* — Canales: hairlines y el icono en violeta tenue, como el resto — */ .ctc__chan-ic { background: color-mix(in srgb, var(--blue) 7%, #fff); border: 1px solid color-mix(in srgb, var(--blue) 14%, transparent); border-radius: 11px; } .ctc__chan { border-color: var(--line); } .ctc__chan:hover { padding-left: 6px; background: color-mix(in srgb, var(--blue) 3%, transparent); border-radius: 10px; } /* El pie ya no necesita su propia línea superior: viene de un bloque oscuro. */ .footer::before { opacity: .35; } @media (max-width: 860px) { .ctc__inner { grid-template-columns: 1fr; } }