/* Advise · advise.ec v2 · "Un día en tu empresa" ------------------------------------------------ */ @font-face { font-family: Figtree; src: url("../assets/fonts/figtree-latin-var.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Respaldo con métricas cercanas para que el cambio de fuente no mueva el texto */ @font-face { font-family: "Figtree Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); size-adjust: 97%; ascent-override: 96%; descent-override: 25%; line-gap-override: 0%; } :root { --navy: #02162F; --accent: #0E80C4; --celeste: #4BA9E8; --profundo: #002E4E; --hueso: #F2F0E9; --gris: #6B7A8A; --blanco: #fff; --noche: #010D1C; --ink: #02162F; --ink-2: #3D4B5C; --ink-3: #56626F; --on-d: #fff; --on-d-2: rgba(255,255,255,.72); --on-d-3: rgba(255,255,255,.58); --hair: rgba(2,22,47,.12); --hair-d: rgba(255,255,255,.14); --accent-ink: #0A6DA8; --hdr: 56px; --bar: 0px; /* En un iPhone acostado, el margen nunca queda dentro de la zona del notch o de la isla dinámica */ --gut: max(clamp(20px, 4.6vw, 72px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); --maxw: 1440px; --ease: cubic-bezier(.2,.75,.12,1); --ease-io: cubic-bezier(.62,0,.22,1); --radius: 12px; --font: Figtree, "Figtree Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color-scheme: only light; } @media (max-width: 860px) { :root { --hdr: 52px; --bar: calc(68px + env(safe-area-inset-bottom)); } html { scroll-padding-bottom: 170px; } } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 12px); } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; background: var(--navy); color: var(--ink); font: 400 17px/1.5 var(--font); letter-spacing: -.006em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; -webkit-tap-highlight-color: transparent; padding-bottom: var(--bar); } img { display: block; max-width: 100%; height: auto; } a { color: inherit; } p, h1, h2, h3, ol, ul, figure { margin: 0; } ol, ul { padding: 0; list-style: none; } h1, h2, h3 { font-weight: 700; text-wrap: balance; } p, li { text-wrap: pretty; } button { font: inherit; color: inherit; } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .ico { width: 1em; height: 1em; flex: none; fill: currentColor; } .mono { font-family: inherit; font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.005em; } .vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .wrap { width: min(100% - 2 * var(--gut), var(--maxw)); margin-inline: auto; } :focus-visible { outline: 2px solid var(--celeste); outline-offset: 3px; border-radius: 6px; } [tabindex="-1"]:focus { outline: none; } html:not(.js) .js-only, .safe .js-only { display: none; } /* Sobre fondos claros el anillo celeste no llega a 3:1: allí va en azul profundo */ :is(.exec, .cli, .base, .met, .trust, .faq, .sheet, .mbar) :focus-visible { outline-color: var(--accent-ink); } /* iOS no convierte números de factura o RUC en enlaces de llamada */ a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; pointer-events: none; } .skip { position: fixed; left: 12px; top: -80px; z-index: 100; background: #fff; color: var(--navy); padding: 12px 18px; border-radius: 10px; font-weight: 600; text-decoration: none; } .skip:focus { top: 10px; } /* Tipografía de capítulos */ .h1x { font-size: clamp(44px, 6.4vw, 112px); line-height: .96; letter-spacing: -.036em; } .h2 { font-size: clamp(38px, 4.8vw, 76px); line-height: 1; letter-spacing: -.042em; } .h3x { font-size: clamp(27px, 2.7vw, 42px); line-height: 1.06; letter-spacing: -.032em; } @media (max-width: 359px) { .h1x { font-size: 40px; } .exec .exec-h { font-size: 11.6vw; } } /* Botones: acento con texto blanco de 19 px en negrita (texto grande: AA sobre #0E80C4) */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 0; border-radius: var(--radius); background: var(--accent); color: #fff; font: 700 19px/1 var(--font); letter-spacing: -.012em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .2s, transform .25s var(--ease), opacity .2s, scale var(--ap-pulsar-duracion, 100ms) ease-out; } /* (la respuesta al pulsar la da la capa común, css/capa-apple.css: encoge con la propiedad scale en 100 ms) */ .btn-lg { min-height: 58px; padding: 0 30px; } .btn-block { width: 100%; } .lnk { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; font-weight: 600; font-size: 18px; letter-spacing: -.01em; text-decoration: none; } .lnk .ico { transition: transform .35s var(--ease); } @media (hover: hover) { .btn:hover { background: #0B72AF; } .lnk:hover .ico { transform: translateY(3px); } } /* Encabezado: siempre navy (el logo blanco nunca pisa el acento) ------------------------------ */ .hdr { position: fixed; inset: 0 0 auto; z-index: 40; height: var(--hdr); background: var(--navy); border-bottom: 1px solid rgba(255,255,255,.08); } .hdr-in { height: 100%; display: flex; align-items: center; gap: 30px; width: min(100% - 2 * var(--gut), 1440px); margin-inline: auto; } .hdr-logo { display: flex; align-items: center; min-height: 44px; min-width: 44px; } .hdr-logo img { height: 20px; width: auto; } .hdr-nav { display: flex; gap: 28px; margin-left: auto; } .hdr-nav a { color: rgba(255,255,255,.76); text-decoration: none; font-size: 15px; font-weight: 600; letter-spacing: -.005em; padding: 12px 0; transition: color .2s; } .hdr-nav a[aria-current] { color: #fff; } /* La acción del encabezado es discreta (los CTA de la página mandan). A 15 px el texto no es "grande": el fondo va en el azul profundo de la marca para que el blanco pase AA (5,6:1) */ .btn-hdr { min-height: 34px; padding: 0 14px; border-radius: var(--radius); font-size: 15px; font-weight: 600; letter-spacing: -.005em; background: var(--accent-ink); } @media (hover: hover) { .btn-hdr:hover { background: #095F93; } } .hdr-menu { display: none; } html:not(.js) .hdr-menu { display: none !important; } /* sin JS el menú no abre: no se muestra */ @media (hover: hover) { .hdr-nav a:hover { color: #fff; } } @media (max-width: 1080px) and (min-width: 861px) { .hdr-nav { gap: 20px; } .hdr-nav a { font-size: 14px; } } @media (max-width: 860px) { .hdr-in { gap: 12px; } .hdr-logo img { height: 19px; } .hdr-nav, .btn-hdr { display: none; } .hdr-menu { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; min-height: 44px; min-width: 64px; padding: 0 2px 0 14px; background: none; border: 0; color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; } } /* ════════════════════════════════════════════════════════════════════════════════════════════ 1 · PORTADA + PELÍCULA Estático por defecto (sin JS, movimiento reducido, impresión): una fila por momento. Con .film-live: un escenario fijo con un solo dispositivo. ════════════════════════════════════════════════════════════════════════════════════════════ */ .film { position: relative; background: var(--navy); color: #fff; } .stage { position: relative; isolation: isolate; } .stage-bands { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; -webkit-mask-image: linear-gradient(#000 55%, transparent 96%); mask-image: linear-gradient(#000 55%, transparent 96%); } .stage-bands i { position: absolute; top: -20%; height: 150%; background: #000; transform: skewX(-27deg); } .stage-bands i:nth-child(1) { left: 14%; width: 6vw; opacity: .14; } .stage-bands i:nth-child(2) { left: 52%; width: 13vw; opacity: .16; } .stage-bands i:nth-child(3) { left: 84%; width: 4vw; opacity: .11; } .stage-grid { display: none; } .frame { display: none; } /* Estático: rejilla por filas (escritorio) */ .stage { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(32px, 5vw, 96px); align-items: center; width: min(100% - 2 * var(--gut), 1320px); margin-inline: auto; padding: calc(var(--hdr) + clamp(48px, 9vh, 110px)) 0 clamp(72px, 12vh, 140px); } .caps, .dev { display: contents; } .cap, .screen, .film-title { grid-row: var(--row); } .cap, .film-title { grid-column: 1; } .screen { grid-column: 2; justify-self: center; } .film-title { grid-column: 1 / -1; padding: clamp(80px, 12vh, 140px) 0 8px; border-top: 1px solid var(--hair-d); margin-top: clamp(64px, 10vh, 120px); } .cap:not(.cap-hero) { padding: clamp(44px, 7vh, 80px) 0; } .screen:not(.scr-lock) { margin: clamp(44px, 7vh, 80px) 0; } .film-bar { display: none; } /* Portada */ .cap-hero { padding-bottom: 24px; } .hero-t { font-size: clamp(46px, 6.3vw, 108px); line-height: .95; letter-spacing: -.036em; font-weight: 700; max-width: 11.5ch; } .hero-t span { display: block; } @media (min-width: 861px) { .hero-l1 { max-width: 9.2em; } .hero-l2 { white-space: nowrap; } .hero-t { max-width: none; } } .hero-l2 { color: var(--celeste); margin-top: .04em; } .hero-lead { margin-top: clamp(22px, 3.4vh, 34px); max-width: 29em; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.45; color: var(--on-d-2); letter-spacing: -.012em; } .hero-ctas { margin-top: clamp(26px, 4.2vh, 42px); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 30px; } .hero-ctas .lnk { color: #fff; } .hero-meta { margin-top: clamp(26px, 5vh, 56px); font-size: 14px; font-weight: 600; color: var(--on-d-3); display: flex; flex-wrap: wrap; } .hero-meta span + span::before { content: "·"; margin: 0 .55em; } .js.motion:not(.film-live):not(.film-pre) .cap-hero > * { animation: rise 1.1s var(--ease) both; } .js.motion:not(.film-live):not(.film-pre) .cap-hero > :nth-child(2) { animation-delay: .1s; } .js.motion:not(.film-live):not(.film-pre) .cap-hero > :nth-child(3) { animation-delay: .18s; } .js.motion:not(.film-live):not(.film-pre) .cap-hero > :nth-child(4) { animation-delay: .26s; } @keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } .film-h { font-size: clamp(38px, 4.8vw, 76px); line-height: 1; letter-spacing: -.042em; } .film-sub { margin-top: 16px; font-size: clamp(18px, 1.5vw, 22px); color: var(--on-d-2); letter-spacing: -.012em; } /* Leyenda de cada momento */ /* Cuatro niveles: hora + módulo · verbo · qué hace · qué se mide */ .cap-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--on-d-2); letter-spacing: -.01em; text-wrap: wrap; } .cap-time { font-size: 22px; font-weight: 600; color: var(--celeste); font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .cap-verb { margin-top: 8px; font-size: clamp(56px, 6.6vw, 116px); font-weight: 700; line-height: .98; letter-spacing: -.036em; } .cap-ask { font-size: clamp(36px, 3.7vw, 62px); line-height: 1.04; letter-spacing: -.04em; max-width: 12.5em; text-wrap: balance; } .cap-d { margin-top: 18px; width: min(100%, 390px); max-width: 28em; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.45; letter-spacing: -.012em; color: #fff; } .cap-k { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--hair-d); width: min(100%, 26em); font-size: 15px; font-weight: 600; color: #fff; line-height: 1.4; } .cap-k span { color: var(--on-d-3); font-weight: 600; } .qt::after { content: none; } /* ── Pantallas (estilos compartidos, estático y en vivo) ────────────────────────────────── */ .screen { position: relative; overflow: hidden; container-type: inline-size; } .scr-in { height: 100%; } .scr-phone { width: min(360px, 100%); height: 700px; border-radius: 38px; border: 10px solid #0A0E14; box-shadow: 0 40px 80px -40px rgba(0,0,0,.7); background: #0A0E14; } .scr-phone .scr-in { border-radius: 28px; overflow: hidden; } .scr-phone::after { content: ""; position: absolute; top: 9px; left: 50%; width: 30%; height: 25px; border-radius: 99px; background: #000; transform: translateX(-50%); z-index: 3; pointer-events: none; } .film-live .scr-phone::after { content: none; } .scr-lock { height: 560px; } .scr-app { width: 100%; max-width: 820px; border-radius: 16px; box-shadow: 0 40px 80px -44px rgba(0,0,0,.7); } /* Pantalla bloqueada */ .lock { position: relative; display: flex; flex-direction: column; align-items: center; background: var(--navy); color: #fff; font-size: clamp(10px, 4.4cqw, 15px); overflow: hidden; overflow-anchor: none; isolation: isolate; } /* todo cabe también en el teléfono chico de las laptops bajas */ .lock::before, .lock::after { content: ""; position: absolute; top: -20%; height: 150%; background: #000; transform: skewX(-27deg); z-index: -1; } .lock::before { left: 10%; width: 22%; opacity: .2; } .lock::after { left: 62%; width: 12%; opacity: .14; } .lock-st { align-self: stretch; height: 3.2em; display: flex; justify-content: flex-end; align-items: center; padding: 0 1.8em; } .lock-ic { display: flex; gap: .35em; align-items: center; } .lock-ic svg, .ph-ic svg { fill: currentColor; color: currentColor; height: .8em; } .i-sig { width: 1.2em; } .i-wifi { width: 1.1em; } .i-batt { width: 1.85em; } .lock-pad { width: 1.2em; height: 1.2em; margin-top: .6em; color: rgba(255,255,255,.85); } .lock-date { margin-top: .5em; min-height: 1.3em; font-size: .95em; font-weight: 600; color: rgba(255,255,255,.85); letter-spacing: -.005em; } .lock-clock { margin-top: 0; font-size: 5.2em; font-weight: 600; letter-spacing: -.03em; line-height: 1.02; font-variant-numeric: tabular-nums; } .lock-notes { align-self: stretch; margin-top: 1.4em; padding: 0 .75em; display: flex; flex-direction: column; } .ntf-wrap { margin-bottom: .5em; } .ntf { display: grid; grid-template-columns: 2.6em minmax(0, 1fr); gap: .7em; align-items: start; padding: .8em .9em .85em; border-radius: 1.3em; background: #F4F5F6; color: #0B1B2E; box-shadow: 0 .8em 1.6em -1em rgba(0,0,0,.6); } .ntf-app { width: 2.6em; height: 2.6em; border-radius: .7em; background: var(--navy); display: grid; place-items: center; } .ntf-app img { width: 62%; height: auto; } .ntf-h { display: flex; justify-content: space-between; gap: .6em; font-size: .86em; color: #5B6674; } .ntf-h b { font-weight: 600; } .ntf-t { margin-top: .1em; font-weight: 700; letter-spacing: -.01em; } .ntf-b { margin-top: .1em; font-size: .94em; color: #334152; line-height: 1.35; } .ntf-0 { opacity: .94; } .lock-foot { margin-top: auto; align-self: stretch; display: flex; justify-content: space-between; padding: 1em 2.4em .9em; } .lock-btn { width: 2.6em; height: 2.6em; border-radius: 50%; background: rgba(255,255,255,.13); display: grid; place-items: center; } .lock-btn svg { width: 1.15em; height: 1.15em; color: #fff; fill: none; } .lock-home { flex: none; display: block; width: 35%; height: .3em; margin-bottom: .55em; border-radius: 1em; background: rgba(255,255,255,.85); } /* WhatsApp */ .chat { display: flex; flex-direction: column; background: #EFEAE2; color: #111B21; font-size: clamp(12.5px, 4.5cqw, 15px); line-height: 1.32; letter-spacing: -.004em; } .ph-st { flex: none; height: 3.1em; padding: 0 1.9em 0 2.2em; display: flex; align-items: center; justify-content: space-between; background: #fff; font-weight: 600; font-size: .95em; font-variant-numeric: tabular-nums; } .ph-ic { display: flex; align-items: center; gap: .35em; } .chat-hd { flex: none; display: flex; align-items: center; gap: .55em; padding: .3em .9em .6em .5em; background: #fff; border-bottom: 1px solid #E9EDEF; } .chat-hd > .ico { width: 1.3em; height: 1.3em; color: #0A6DA8; } .chat-av { width: 2.2em; height: 2.2em; border-radius: 50%; background: #DFE5EA; color: #6B7A86; display: grid; place-items: center; flex: none; } .chat-av .ico { width: 1.3em; height: 1.3em; } .chat-who { display: flex; flex-direction: column; line-height: 1.15; } .chat-who small { font-size: .78em; color: #5F6F79; } .chat-body { flex: 1; min-height: 0; padding: .8em .8em; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; } /* Como un chat real: lo más nuevo queda abajo y lo anterior sube (en vivo lo mueve site.js) */ .chat-scroll { position: relative; flex: none; display: flex; flex-direction: column; gap: .45em; } .chat-day { align-self: center; font-size: .76em; color: #4B5B65; background: #fff; padding: .25em .75em; border-radius: .6em; box-shadow: 0 1px .5px rgba(11,20,26,.1); margin-bottom: .2em; } .slot { position: relative; display: flex; flex-direction: column; } .msg { position: relative; max-width: 84%; padding: .45em .65em .38em; border-radius: .8em; box-shadow: 0 1px .5px rgba(11,20,26,.13); } .msg time { float: right; font-size: .68em; color: #5F6F79; margin: .6em 0 -.2em .7em; line-height: 1; font-variant-numeric: tabular-nums; } .msg.me { align-self: flex-end; background: #D9FDD3; border-top-right-radius: .2em; } .msg.them { align-self: flex-start; background: #fff; border-top-left-radius: .2em; } .msg-by { align-self: flex-end; margin: -.2em .2em .1em 0; font-size: .7em; font-weight: 600; color: #54656F; } .typing { position: absolute; left: 0; top: 0; display: none; gap: .3em; padding: .8em .9em; background: #fff; border-radius: .8em; border-top-left-radius: .2em; box-shadow: 0 1px .5px rgba(11,20,26,.13); } .typing i { width: .45em; height: .45em; border-radius: 50%; background: #8696A0; animation: dot 1.2s infinite ease-in-out; } .typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; } @keyframes dot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-.15em); } } .bk { display: flex; flex-direction: column; gap: .45em; min-width: 74%; padding-top: .6em; } .bk-h { display: flex; align-items: center; gap: .4em; font-weight: 700; color: var(--accent-ink); } .bk-h .ico { width: 1.25em; height: 1.25em; padding: .2em; border-radius: 50%; background: var(--accent); color: #fff; } .bk-r { display: flex; flex-wrap: wrap; gap: .3em; } .bk-r b { background: var(--hueso); padding: .2em .5em; border-radius: .4em; font-size: .92em; font-weight: 600; } .bk-l { display: flex; justify-content: space-between; gap: 1em; padding-top: .35em; border-top: 1px solid #EEF0F2; font-size: .95em; } .bk-l span { color: #4B5B65; } .bk-l b { font-weight: 600; } .chat-in { flex: none; display: flex; align-items: center; gap: .6em; padding: .55em .8em 1.4em; background: #F0F2F5; color: #54656F; } .chat-in span { flex: 1; background: #fff; border-radius: 1.2em; padding: .45em .9em; font-size: .95em; color: #7D8B95; } .chat-in .ico { width: 1.3em; height: 1.3em; } /* Aplicación genérica de los agentes (tamaño en em: escala con la pantalla) */ .app { display: flex; flex-direction: column; background: #F3F5F7; color: #0B1B2E; font-size: clamp(12.5px, 2.02cqw, 16px); line-height: 1.35; letter-spacing: -.004em; } .app-bar { flex: none; height: 3.3em; display: flex; align-items: center; gap: .65em; padding: 0 1.1em 0 .9em; background: #fff; border-bottom: 1px solid #E3E8ED; white-space: nowrap; } .app-mark { flex: none; width: 1.9em; height: 1.9em; border-radius: .5em; background: var(--navy); display: grid; place-items: center; } .app-mark img { width: 64%; height: auto; } .app-bar b { font-size: 1.04em; font-weight: 700; } .app-crumb { color: #5E6B7A; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .app-crumb::before { content: "/"; margin-right: .55em; color: #C3CAD3; } .app-st { margin-left: auto; display: grid; justify-items: end; } .app-st > * { grid-area: 1 / 1; } .chip { display: inline-flex; align-items: center; gap: .35em; height: 2em; padding: 0 .8em; border-radius: 1em; font-size: .88em; font-weight: 700; white-space: nowrap; } .chip .ico { width: 1.05em; height: 1.05em; } .chip-ok { background: #E1EFF8; color: var(--accent-ink); } .chip-wait { background: #EAEEF2; color: #475466; } .chip-wait::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: var(--accent); animation: pulse 1.1s infinite ease-in-out; } .chip-flag { background: var(--navy); color: #fff; } @keyframes pulse { 50% { opacity: .25; } } .app-body { flex: 1; min-height: 0; padding: 1.1em 1.2em; overflow: hidden; } .app-foot { flex: none; display: flex; align-items: center; gap: .55em; min-height: 3em; padding: 0 1.2em; background: #fff; border-top: 1px solid #E3E8ED; color: #3D4B5C; } .app-foot .ico { width: 1.4em; height: 1.4em; padding: .24em; border-radius: 50%; background: var(--accent); color: #fff; } .app-foot b { color: #0B1B2E; } /* Estado final visible por defecto; las piezas "mientras tanto" solo existen en vivo */ [data-until] { display: none !important; } /* CxP: factura ↔ orden de compra */ .cmp { background: #fff; border: 1px solid #E3E8ED; border-radius: .8em; overflow: hidden; } .cmp-hd { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2em; padding: .9em 1em .8em; border-bottom: 1px solid #EEF1F4; } .cmp-hd p { display: flex; flex-direction: column; gap: .12em; } .cmp-hd small { font-size: .86em; color: #5E6B7A; } .cmp-hd b { font-size: 1.1em; } .cmp-sub { font-size: .9em; color: #3D4B5C; } .sri { display: inline-flex; align-items: center; gap: .3em; margin-top: .2em; color: var(--accent-ink); font-weight: 700; font-size: .92em; } .cmp-r { display: grid; grid-template-columns: minmax(0, 1.5fr) 3.2em 6em 2.4em 3.2em 6em; align-items: center; column-gap: .6em; min-height: 2.65em; padding: 0 1em; border-top: 1px solid #EEF1F4; } .cmp-r > span:nth-child(n+2):not(.ok) { text-align: right; } .cmp-cols { min-height: 2.2em; border-top: 0; font-weight: 700; color: #5E6B7A; } .cmp-cols > span { font-size: .82em; } .cmp-r .ok { justify-self: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; } .cmp-r .ok .ico { width: 1em; height: 1em; } .cmp-tot { font-weight: 700; background: #FAFBFC; } .cmp-tot .ok { background: var(--navy); } .post { margin-top: .8em; display: flex; align-items: center; gap: .8em; padding: .7em .9em; background: #fff; border: 1px solid #E3E8ED; border-radius: .8em; } .post-erp { flex: none; width: 2.6em; height: 2.6em; border-radius: .6em; background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .82em; letter-spacing: .04em; } .post > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; min-width: 0; } .post small { color: #5E6B7A; font-size: .9em; } .post .chip { margin-left: auto; } /* Conciliación */ .conc { display: flex; flex-direction: column; gap: .45em; } .conc > p { display: grid; grid-template-columns: minmax(0, 1fr) 2.4em minmax(0, 1fr); align-items: center; gap: .4em; } .conc-hd { font-weight: 700; color: #5E6B7A; } .conc-hd > span { font-size: .86em; } .conc-hd > span:not(:empty) { padding: 0 1.047em; border: 1px solid transparent; } /* = .9em de la fila: el rótulo empieza donde empieza el texto de la celda */ .conc-r > span:not(.c-m) { display: flex; align-items: center; gap: .7em; min-height: 3em; padding: 0 .9em; background: #fff; border: 1px solid #E3E8ED; border-radius: .6em; white-space: nowrap; overflow: hidden; } .conc-r i { font-style: normal; color: #5E6B7A; font-size: .9em; font-variant-numeric: tabular-nums; } .conc-r b { margin-left: auto; font-weight: 600; } .conc-r em { font-style: normal; color: var(--navy); font-weight: 700; white-space: normal; line-height: 1.2; } .c-m { justify-self: center; width: 1.7em; height: 1.7em; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; } .c-m .ico { width: 1em; height: 1em; } .conc-flag .c-m { background: var(--navy); } .conc-flag .c-r { border-style: dashed !important; border-color: #8C99A8 !important; background: #FAFBFC !important; } /* Copiloto */ .cop { display: flex; flex-direction: column; gap: .9em; } .q { align-self: flex-end; max-width: 76%; background: var(--navy); color: #fff; padding: .7em 1em; border-radius: 1em 1em .3em 1em; font-size: 1.04em; } .a { background: #fff; border: 1px solid #E3E8ED; border-radius: 1em; padding: 1em 1.2em 1.1em; max-width: 90%; } .a-src { display: flex; align-items: center; gap: .45em; font-size: .9em; color: #475466; font-weight: 700; } .a-src .ico { color: var(--accent); width: 1.2em; height: 1.2em; } .bars { margin: .9em 0 .8em; display: flex; flex-direction: column; gap: .5em; } .bar { display: grid; grid-template-columns: 5.2em 1fr; align-items: center; gap: .6em; font-size: .92em; color: #3D4B5C; } .bar i { display: block; height: .85em; border-radius: .45em; background: #C9DDEE; transform-origin: left; transform: scaleX(var(--v)); } .bar-top i { background: var(--accent); } .a-t { font-size: 1.02em; line-height: 1.45; } .a-chips { display: flex; flex-wrap: wrap; gap: .45em; margin-top: .9em; } .a-chips span { border: 1px solid #D2DAE3; border-radius: 1em; padding: .3em .8em; font-size: .88em; font-weight: 600; color: #3D4B5C; } .app-ask { flex: none; margin: 0 1.2em 1.1em; display: flex; align-items: center; justify-content: space-between; background: #fff; border: 1px solid #DCE2E8; border-radius: .9em; padding: .5em .55em .5em 1em; color: #6D7A88; } .app-ask .ico { width: 1.9em; height: 1.9em; padding: .45em; border-radius: 50%; background: var(--accent); color: #fff; } /* CRM */ .crm { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 1em; align-items: stretch; height: 100%; } .crm-side { align-self: start; display: flex; flex-direction: column; gap: .8em; min-width: 0; } .act { background: #fff; border: 1px solid #E3E8ED; border-radius: .8em; padding: .75em 1em .35em; } .act-h { font-size: .86em; font-weight: 700; color: #5E6B7A; margin-bottom: .25em; } .act-r { display: flex; align-items: center; gap: .5em; min-height: 2.15em; border-top: 1px solid #EEF1F4; font-size: .95em; font-weight: 600; } .act-r .ico { width: 1.05em; height: 1.05em; color: var(--accent-ink); } @media (min-width: 861px) and (max-height: 760px) { .act { display: none; } } .lead { background: #fff; border: 1px solid #E3E8ED; border-radius: .8em; padding: .9em 1em 1em; display: flex; flex-direction: column; gap: .5em; } .lead-h { display: flex; justify-content: space-between; align-items: baseline; gap: .6em; } .lead-h span { font-size: .86em; color: #5E6B7A; white-space: nowrap; } .lead-q { padding: .6em .75em; background: #F3F5F7; border-radius: .6em; font-size: .96em; line-height: 1.4; } .lead-c { display: flex; align-items: center; gap: .5em; font-weight: 600; } .lead-c .ico { width: 1.35em; height: 1.35em; padding: .22em; border-radius: 50%; background: var(--accent); color: #fff; } .lead-f { display: flex; align-items: center; justify-content: space-between; gap: .5em; padding-top: .55em; border-top: 1px solid #EEF1F4; font-weight: 700; } /* --pg: espacio entre columnas · --pp: margen interior de columna (la tarjeta viva salta de columna en columna) */ .pipe { --pg: .6em; --pp: .6em; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pg); } .pipe-col { background: #E8ECF0; border-radius: .7em; padding: .7em var(--pp) .6em; display: flex; flex-direction: column; gap: .5em; min-height: 15.5em; } .pc-slot { display: block; height: 0; margin-bottom: -.5em; flex: none; transition: height .8s var(--ease-io), margin-bottom .8s var(--ease-io); } .pipe-col:nth-child(3) .pc-slot { height: 4.6em; margin-bottom: 0; } .pipe-h { font-size: .86em; font-weight: 700; color: #3D4B5C; margin-bottom: .1em; } .pc { background: #fff; border: 1px solid #DDE3E9; border-radius: .55em; padding: .55em .65em; display: flex; flex-direction: column; gap: .15em; } .pc b { font-size: .95em; font-weight: 700; } .pc span { font-size: .84em; color: #5E6B7A; } .pipe-col .pc b { color: #475466; font-weight: 600; } .pc-live { position: absolute; left: var(--pp); top: 2.55em; height: 4.6em; width: calc((100% - 2 * var(--pg)) / 3 - 2 * var(--pp)); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 .6em 1.2em -.8em rgba(2,22,47,.5); z-index: 2; transition: transform .8s var(--ease-io); } .pc-live span { display: none; color: var(--accent-ink); font-weight: 600; } .pc-live .pc-s2 { display: block; } .pipe-step, .pipe-step2 { display: none; } /* Estado final (estático): cita agendada */ .pc-live { transform: translateX(calc(200% + 4 * var(--pp) + 2 * var(--pg))); } /* Legal */ .lg { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1em; align-items: start; } .paper { background: #fff; border: 1px solid #E3E8ED; border-radius: .6em; padding: 1.1em 1.3em 1.2em; } .pp-t { font-weight: 700; text-align: center; font-size: 1.02em; margin-bottom: .4em; letter-spacing: .01em; } .pp-c { margin-top: .8em; font-size: .92em; line-height: 1.5; color: #3D4B5C; } .pp-c b { display: block; margin-bottom: .15em; font-size: 1em; color: #0B1B2E; } .pp-c b { width: fit-content; padding: 0 .25em; margin-left: -.25em; border-radius: .25em; background: #DCEBF6; transition: background-color .45s, color .45s; } .pp-risk b { background: var(--navy); color: #fff; } .cl-list { background: #fff; border: 1px solid #E3E8ED; border-radius: .6em; padding: .9em 1em 1em; display: flex; flex-direction: column; } .cl-h { font-weight: 700; margin-bottom: .3em; } .cl-r { display: flex; justify-content: space-between; align-items: center; gap: .6em; min-height: 2.7em; border-top: 1px solid #EEF1F4; } .cl-r em { display: inline-flex; align-items: center; gap: .3em; font-style: normal; font-weight: 700; white-space: nowrap; font-size: .92em; } .cl-r em.ok { color: var(--accent-ink); } .cl-r em.fl { color: var(--navy); } .cl-r .ico { width: 1.1em; height: 1.1em; } .cl-btn { margin-top: .8em; background: var(--navy); color: #fff; text-align: center; border-radius: .55em; padding: .7em 1em; font-weight: 700; } /* Cumplimiento */ .au { display: flex; flex-direction: column; } .au-tabs { display: flex; flex-wrap: wrap; gap: .45em; margin-bottom: .9em; } .au-tabs span { display: inline-flex; align-items: center; gap: .35em; height: 2.1em; padding: 0 .8em; border-radius: 1.05em; background: #fff; border: 1px solid #DCE2E8; font-weight: 700; font-size: .88em; } .au-tabs .ico { color: var(--accent); } .au-r { display: grid; grid-template-columns: 3.2em minmax(0,1.05fr) minmax(0,1.1fr) minmax(0,.9fr) minmax(0,1.6fr); gap: .6em; align-items: center; min-height: 2.35em; padding: 0 .8em; background: #fff; border-bottom: 1px solid #EEF1F4; white-space: nowrap; } .au-r > span { overflow: hidden; text-overflow: ellipsis; } .au-hd { min-height: 2.3em; background: transparent; font-weight: 700; color: #5E6B7A; border-bottom: 1px solid #DCE2E8; } .au-hd > span { font-size: .84em; } .au-hd + .au-r { border-radius: .6em .6em 0 0; } .au-r:last-child { border-radius: 0 0 .6em .6em; border-bottom: 0; } .au-r .dim { color: #9AA5B1; } .au-r .sup { display: inline-flex; align-items: center; gap: .35em; font-weight: 700; color: var(--navy); white-space: normal; line-height: 1.2; } .au-r .sup .ico { color: var(--accent); flex: none; } .au-h { background: #F7F5EF; } /* Pantallas angostas (tarjeta en móvil) */ @container (max-width: 560px) { .app { font-size: 12.5px; } .app-bar { padding: 0 .9em 0 .8em; } .app-crumb { display: none; } .app-body { padding: .9em; } .cmp-hd { gap: .8em; padding: .8em .85em .7em; } .cmp-r { grid-template-columns: minmax(0, 1fr) 5.6em 2.2em 5.6em; padding: 0 .85em; column-gap: .45em; } .cmp-r > span:nth-child(2), .cmp-r > span:nth-child(5) { display: none; } .conc-r > span:not(.c-m) { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; padding: .45em .7em; white-space: normal; } .conc-hd > span:not(:empty) { padding: 0 .814em; } .conc-r b { margin-left: 0; } .conc-r i { display: none; } .crm { grid-template-columns: 1fr; gap: .7em; } .act { display: none; } .pipe-col { min-height: 7.6em; } .pipe-col .pc:nth-child(n+4) { display: none; } .pc-live { height: 3.2em; } .pipe-col:nth-child(3) .pc-slot { height: 3.2em; } .pipe-col .pc span { display: none; } .pc-live { top: 2.4em; } .pc-live .pc-s2 { font-size: .8em; } .pc-live { padding-inline: .45em; } .pc-live b, .pc-live span, .pipe-h { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lg { grid-template-columns: 1fr; gap: .7em; } .paper { padding: .8em .95em .9em; } .pp-t { display: none; } .pp-c { margin-top: .45em; font-size: .9em; } .pp-c:first-of-type { margin-top: 0; } .pp-c:not(.pp-risk) { display: none; } .au-r { grid-template-columns: 3.1em minmax(0,1fr) minmax(0,1.35fr); white-space: normal; padding-block: .45em; line-height: 1.25; } .au-r > span:nth-child(3), .au-r > span:nth-child(4) { display: none; } .au-tabs span { font-size: .82em; } .a, .q { max-width: 100%; } .a-chips span:nth-child(3) { display: none; } } /* Tarjetas muy angostas: los estados se acortan ("2 riesgos", "Registrada") en vez de cortarse */ @container (max-width: 420px) { .chip-x { display: none; } } @container (max-width: 330px) { .app-bar { height: auto; min-height: 3.3em; flex-wrap: wrap; row-gap: .35em; padding-block: .55em; } .app-st { flex-basis: 100%; justify-items: start; margin-left: 0; } .pipe { --pg: .45em; --pp: .4em; } .pipe-h { font-size: .78em; letter-spacing: -.01em; } .pc-live { padding-inline: .35em; } .pc-live b { font-size: .88em; letter-spacing: -.01em; } .pc-live .pc-s2, .pc-live span { font-size: .72em; letter-spacing: -.01em; } } /* Móvil estático: una columna */ @media (max-width: 860px) { .stage { display: flex; flex-direction: column; align-items: stretch; padding: calc(var(--hdr) + 28px) 0 64px; } .cap, .screen, .film-title { order: var(--o); } .screen { align-self: center; } .scr-phone { width: min(340px, 100%); height: clamp(420px, calc(100svh - var(--hdr) - var(--bar) - 44px), 640px); } /* El teléfono de la portada asoma ya en el primer cuadro (también en Safari con sus barras) */ .cap-hero { padding-bottom: 0; } .scr-lock { height: 540px; margin-top: 26px; } .cap:not(.cap-hero) { padding: 56px 0 24px; } .screen:not(.scr-lock) { margin: 0; } .film-title { padding-top: 72px; margin-top: 56px; } /* "Datos que deciden." mide 8,14 em: el titular se ajusta para que esa línea nunca se parta */ .hero-t { font-size: min(calc((100vw - 2 * var(--gut)) / 8.35), 60px); line-height: .97; max-width: none; } .hero-l2 { white-space: nowrap; } .hero-meta { flex-direction: column; gap: 1px; margin-top: 16px; font-size: 15px; } .hero-meta span + span::before { content: none; } .hero-lead { margin-top: 16px; font-size: 17px; } .hero-ctas { margin-top: 22px; } .cap-verb { font-size: clamp(48px, 13vw, 64px); } .cap-ask { font-size: clamp(30px, 8.4vw, 40px); min-height: 0; } .cap-d { font-size: 17px; } } @media (max-width: 560px) { .hero-ctas .lnk { display: none; } } /* en el teléfono el día empieza justo debajo */ /* ════════ Teléfonos: el día en un carrusel horizontal ═════════════════════════════════════ site.js arma .day (fila de horas + carrusel) y mueve cada leyenda con su pantalla a una tarjeta */ .day { order: 4; margin: 28px calc(-1 * var(--gut)) 0; } .rail-on .film-title { padding-top: 64px; margin-top: 48px; } .day .film-nav { position: sticky; top: var(--hdr); z-index: 4; display: flex; justify-content: flex-start; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 10px var(--gut); background: var(--navy); } .day .film-nav::-webkit-scrollbar { display: none; } .day .film-nav a { flex: none; flex-direction: row; align-items: center; gap: 7px; min-height: 44px; min-width: 0; padding: 0 16px; border: 1px solid rgba(255,255,255,.22); border-radius: 22px; color: #fff; font-size: 15px; font-weight: 600; transition: background-color .25s, color .25s, border-color .25s, scale var(--ap-pulsar-duracion, 100ms) ease-out; } .day .film-nav a::before, .day .film-nav a::after { content: none; } .day .film-nav time { display: inline; font-size: 13px; color: var(--celeste); } .day .film-nav a[aria-current] { background: #fff; border-color: #fff; color: var(--navy); } .day .film-nav a[aria-current] time { color: var(--accent-ink); } .rail { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); padding: 12px var(--gut) 4px; scrollbar-width: none; } .rail::-webkit-scrollbar { display: none; } .rail:focus-visible { outline-offset: -4px; border-radius: 16px; } .slide { display: flex; flex-direction: column; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; } /* La pantalla y su leyenda caben juntas entre la fila de horas y la barra inferior (--capH lo mide site.js) */ .slide > .screen { order: 0; align-self: stretch; width: 100%; max-width: none; margin: 0; height: clamp(250px, calc(100svh - var(--hdr) - 64px - 12px - var(--bar) - var(--capH, 200px) - 12px), 540px); } .slide > .scr-phone { width: min(100%, 360px); align-self: center; border-width: 8px; border-radius: 34px; } /* en tablet el teléfono no se estira */ .slide > .scr-phone .scr-in { border-radius: 26px; } .slide > .scr-app { border-radius: 14px; } .slide > .scr-app .scr-in { overflow: hidden; border-radius: inherit; width: calc(100% / var(--rk, 1)); height: calc(100% / var(--rk, 1)); transform: scale(var(--rk, 1)); transform-origin: 0 0; } /* Teléfonos de 320–359 px: tarjetas más anchas (menos asomo de la siguiente) */ @media (max-width: 359px) { .rail { gap: 8px; padding-inline: 14px; scroll-padding-inline: 14px; grid-auto-columns: calc(100% - 18px); } } .slide > .cap { order: 1; padding: 14px 2px 0; } .slide .cap-meta { font-size: 15px; gap: 0 10px; } .slide .cap-time { font-size: 17px; } .slide .cap-verb { margin-top: 2px; font-size: clamp(34px, 10vw, 44px); } .slide .cap-ask { font-size: clamp(22px, 6.4vw, 28px); line-height: 1.08; } .slide .cap-d { margin-top: 6px; width: auto; font-size: 16px; line-height: 1.4; } .slide .cap-k { margin-top: 10px; padding-top: 8px; width: auto; font-size: 14px; line-height: 1.35; } /* Teléfonos bajos (Safari con sus barras): el verbo y la medida; "qué hace" lo cuenta la pantalla (sigue en el lector) */ @media (max-width: 560px) and (max-height: 800px) { .slide .cap-d { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; } } /* iPhone chico con barras (375×553): queda el verbo; la medida también sigue en el lector */ @media (max-width: 560px) and (max-height: 600px) { .slide .cap-k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; padding: 0; border: 0; } } /* Tablet vertical: la pantalla de app no se estira (sin áreas vacías), se centra con su medida de diseño */ @media (min-width: 561px) and (max-width: 860px) { .slide > .scr-app { width: min(100%, 540px); align-self: center; height: clamp(400px, 46svh, 500px); } .slide > .cap { width: min(100%, 540px); align-self: center; } } /* ════════ Película en vivo ════════════════════════════════════════════════════════════════ */ .film-live .film { height: var(--film-h, 900vh); } /* Mientras site.js arma la película solo esperan los dispositivos: la portada se pinta desde el primer cuadro (LCP) */ .film-pre .dev, .film-pre .caps > :not(.cap-hero), .film-pre .film-bar { opacity: 0 !important; } .film-live:not(.film-pre) .dev { animation: devIn .5s ease backwards; } @keyframes devIn { from { opacity: 0; } } .no-tr .stage, .no-tr .stage * { transition: none !important; } .film-live .stage { display: block; position: sticky; top: var(--hdr); width: 100%; max-width: none; margin: 0; padding: 0; height: calc(100svh - var(--hdr) - var(--bar)); overflow: hidden; } .film-live .stage-grid { display: grid; position: absolute; inset: 0; margin-inline: auto; visibility: hidden; pointer-events: none; width: min(100% - 2 * var(--gut), var(--maxw)); grid-template-columns: minmax(0, 4.3fr) minmax(0, 7.7fr); column-gap: clamp(28px, 3.4vw, 72px); padding: 28px 0 88px; } .film-live .stage-grid-hero { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); padding: 28px 0 40px; } .film-live .caps, .film-live .dev { display: block; } .film-live .screen { justify-self: auto; align-self: auto; } .film-live .cap, .film-live .film-title { position: absolute; left: var(--cx); top: var(--cy); width: var(--cw); height: var(--ch); margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } /* Antes de que site.js mida, la portada ya ocupa su celda (misma rejilla que .stage-grid-hero) */ .film-live .cap-hero { left: var(--hx, max(var(--gut), (100% - var(--maxw)) / 2)); top: var(--hy, 28px); width: var(--hw, calc((min(100% - 2 * var(--gut), var(--maxw)) - clamp(28px, 3.4vw, 72px)) * 7 / 11)); height: var(--hh, calc(100% - 68px)); } .film-live .cap:not(.cap-hero) { opacity: 0; pointer-events: none; transform: translateY(18px); transition: opacity .28s ease, transform .5s var(--ease); } .film-live .cap.is-on { opacity: 1; transform: none; transition: opacity .55s ease .12s, transform .8s var(--ease) .12s; } .film-live .cap-hero { will-change: transform, opacity; } .film-live .cap-hero .hero-t { font-size: clamp(50px, min(6vw, 10.4svh), 108px); } /* Título de la película: su propio momento entre la portada y las 23:41, en la columna de las leyendas */ .film-live .film-title { opacity: 0; transform: translateY(18px); pointer-events: none; transition: opacity .3s ease, transform .5s var(--ease); } .film-live .film-title.is-on { opacity: 1; transform: none; transition: opacity .6s ease .1s, transform .9s var(--ease) .1s; } .film-live .film-h { font-size: clamp(44px, 4.6vw, 80px); line-height: .98; letter-spacing: -.04em; } .film-live .film-sub { margin-top: clamp(16px, 2.6vh, 26px); max-width: 17em; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.4; } .film-bar-l { display: none; } .film-live .film-bar { display: flex; align-items: center; gap: 16px; position: absolute; left: 0; right: 0; bottom: 0; height: 76px; margin-inline: auto; width: min(100% - 2 * var(--gut), var(--maxw)); opacity: 0; pointer-events: none; transition: opacity .4s ease; z-index: 6; } .film-live.film-started .film-bar, .film-live .film-bar:focus-within { opacity: 1; pointer-events: auto; transition: opacity .6s ease .1s; } .film-live .film-bar-l { display: block; flex: none; width: 210px; font-size: 14px; line-height: 1.3; letter-spacing: -.005em; font-weight: 600; color: var(--on-d-2); text-wrap: balance; } .film-nav { display: flex; flex: 1; justify-content: center; gap: 2px; } .film-nav a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 48px; min-width: 44px; padding: 0 12px 8px; text-decoration: none; color: var(--on-d-3); font-size: 13px; font-weight: 600; letter-spacing: 0; transition: color .3s, scale var(--ap-pulsar-duracion, 100ms) ease-out; } .film-nav time { font-size: 11px; font-variant-numeric: tabular-nums; } .film-nav a::before, .film-nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 1px; background: rgba(255,255,255,.16); } .film-nav a::after { background: #fff; transform-origin: left; transform: scaleX(var(--f, 0)); } .film-nav a[aria-current] { color: #fff; } @media (hover: hover) { .film-nav a:hover { color: #fff; } } .film-prog { display: none; } .film-live-l { flex: none; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--on-d-2); } .film-live-l .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--celeste); } .paused .film-live-l .dot { background: rgba(255,255,255,.4); } .film-pause { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 16px 0 14px; border: 1px solid rgba(255,255,255,.22); border-radius: 22px; background: transparent; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color .2s, border-color .2s, scale var(--ap-pulsar-duracion, 100ms) ease-out; } .film-pause .ico { width: 13px; height: 13px; } .film-pause .i-r, .film-pause[aria-pressed="true"] .i-p { display: none; } .film-pause[aria-pressed="true"] .i-r { display: block; } @media (hover: hover) { .film-pause:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.34); } } @media (max-width: 1240px) { .film-live .film-bar-l { display: none; } .film-nav a { padding-inline: 8px; } .film-nav a::before, .film-nav a::after { left: 8px; right: 8px; } } @media (max-width: 1060px) { .film-nav time { display: none; } .film-live-l { display: none; } } /* Dispositivos */ .film-live .dev { position: absolute; inset: 0; pointer-events: none; will-change: transform, opacity; } .film-live .dev-phone { transform-origin: calc(var(--px) + var(--pw) / 2) calc(var(--py) + var(--ph) / 2); } /* El teléfono sale por el borde superior de la barra (máscara), nunca pasa por debajo de los controles */ .dev-clip { display: contents; } .film-live .dev-clip { display: block; position: absolute; inset: 0; z-index: 3; pointer-events: none; } .film-live.film-started .dev-clip { clip-path: inset(-50vh -50vw 76px -50vw); } .film-live .dev-laptop { z-index: 2; } .film-live .frame { display: block; position: absolute; } .film-live .frame-phone { left: var(--px); top: var(--py); width: var(--pw); height: var(--ph); border-radius: calc(var(--pw) * .16); background: #0A0E14; border: 1px solid #2B3542; box-shadow: 0 50px 90px -40px rgba(0,0,0,.75); } .film-live .frame-phone::after { content: ""; position: absolute; top: calc(var(--pw) * .052); left: 50%; width: calc(var(--pw) * .28); height: calc(var(--pw) * .085); border-radius: 99px; background: #000; transform: translateX(-50%); z-index: 8; } .film-live .scr-phone { position: absolute; left: calc(var(--px) + var(--pb)); top: calc(var(--py) + var(--pb)); width: calc(var(--pw) - 2 * var(--pb)); height: calc(var(--ph) - 2 * var(--pb)); border: 0; border-radius: calc(var(--pw) * .13); box-shadow: none; margin: 0; background: transparent; } .film-live .scr-phone .scr-in { border-radius: inherit; } .film-live .chat-body { justify-content: flex-start; } .film-live .chat-scroll { transform: translate3d(0, var(--sy, 0px), 0); transition: transform .7s var(--ease); } .film-live .frame-laptop { left: var(--lx); top: var(--ly); width: var(--lw); height: var(--lh); border-radius: 18px 18px 8px 8px; background: #0A0E14; border: 1px solid #2B3542; } .film-live .lap-base { position: absolute; left: -5%; right: -5%; top: 100%; height: calc(var(--lw) * .026); background: #B7BEC7; border-radius: 0 0 16px 16px / 0 0 10px 10px; box-shadow: inset 0 -5px 0 #8E97A2, 0 40px 70px -30px rgba(0,0,0,.7); } .film-live .lap-base::before { content: ""; position: absolute; top: 0; left: 43%; width: 14%; height: 36%; background: #9BA3AD; border-radius: 0 0 8px 8px; } /* La pantalla de la laptop se dibuja a un ancho de diseño fijo y se escala: igual en 1024 que en 1920 */ .film-live .scr-app { position: absolute; left: calc(var(--lx) + var(--lb)); top: calc(var(--ly) + var(--lb)); width: var(--aw); height: var(--ah); max-width: none; transform: scale(var(--ak, 1)); transform-origin: 0 0; border-radius: 9px; box-shadow: none; margin: 0; } .film-live .scr-app .scr-in { border-radius: inherit; overflow: hidden; transform: scale(var(--z, 1)); transform-origin: var(--zo, 50% 50%); } /* La laptop se aleja sobre su propio centro (Cumplimiento) */ .film-live .dev-laptop { transform-origin: calc(var(--lx) + var(--lw) / 2) calc(var(--ly) + var(--lh) / 2); } .film-live .screen { opacity: 0; z-index: 1; transition: opacity 0s linear .5s; } .film-live .screen.is-on { opacity: 1; z-index: 2; transition: opacity .5s ease; } .film-live .scr-lock { opacity: 1; z-index: 3; transition: none; } .film-live .scr-lock .scr-in { will-change: transform; } /* Piezas que se revelan con el avance del momento (.anim = película en vivo o reproducción al entrar en pantalla) */ .film-live .cap .cl { color: rgba(255,255,255,.5); transition: color .5s ease; } .film-live .cap .cl.on { color: #fff; } .anim .screen [data-at] { opacity: 0; transform: translateY(.55em); transition: opacity .42s ease, transform .6s var(--ease); } .anim .screen [data-at].on { opacity: 1; transform: none; } .anim .screen [data-until] { display: flex !important; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; } .anim .screen [data-until].on { opacity: 1; visibility: visible; transition: opacity .3s ease; } .anim .screen .chip[data-at]:not(.on) { transform: scale(.94); } .anim .screen .cmp-r[data-at], .anim .screen .conc-r[data-at], .anim .screen .au-r[data-at], .anim .screen .cl-r[data-at], .anim .screen .lead-c[data-at] { opacity: .34; transform: none; } .anim .screen .cmp-r[data-at].on, .anim .screen .conc-r[data-at].on, .anim .screen .au-r[data-at].on, .anim .screen .cl-r[data-at].on, .anim .screen .lead-c[data-at].on { opacity: 1; } .anim .screen .cmp-r[data-at].on:not(.cmp-tot) { background: #F4F9FD; } .anim .screen [data-at] .ok, .anim .screen [data-at] .c-m, .anim .screen .cl-r[data-at] em, .anim .screen .lead-c[data-at] .ico, .anim .screen .au-r[data-at] .sup .ico { transform: scale(0); transition: transform .5s var(--ease); } .anim .screen [data-at].on .ok, .anim .screen [data-at].on .c-m, .anim .screen .cl-r[data-at].on em, .anim .screen .lead-c[data-at].on .ico, .anim .screen .au-r[data-at].on .sup .ico { transform: none; } .anim .screen .pp-c[data-at] { opacity: 1; transform: none; } .anim .screen .pp-c[data-at] b { background: transparent; color: inherit; } .anim .screen .pp-c[data-at].on b { background: #DCEBF6; } .anim .screen .pp-risk[data-at].on b { background: var(--navy); color: #fff; } .anim .screen .bars[data-at] { opacity: 1; transform: none; } .anim .screen .bars[data-at] .bar i { transform: scaleX(0); transition: transform 1s var(--ease) .1s; } .anim .screen .bars[data-at].on .bar i { transform: scaleX(var(--v)); } .anim .screen .au-tabs span[data-at] { opacity: .45; transform: none; } .anim .screen .au-tabs span[data-at].on { opacity: 1; } .anim .screen .au-tabs span[data-at] .ico { transform: scale(0); transition: transform .45s var(--ease); } .anim .screen .au-tabs span[data-at].on .ico { transform: none; } .anim .screen .pc-live { transform: none; } .anim .screen .pipe-col:nth-child(3) .pc-slot { height: 0; margin-bottom: -.5em; } .anim .screen .pipe:not(:has(.pipe-step.on)) .pipe-col:nth-child(1) .pc-slot, .anim .screen .pipe:has(.pipe-step.on):not(:has(.pipe-step2.on)) .pipe-col:nth-child(2) .pc-slot, .anim .screen .pipe:has(.pipe-step2.on) .pipe-col:nth-child(3) .pc-slot { height: 4.6em; margin-bottom: 0; } @container (max-width: 560px) { .anim .screen .pipe:not(:has(.pipe-step.on)) .pipe-col:nth-child(1) .pc-slot, .anim .screen .pipe:has(.pipe-step.on):not(:has(.pipe-step2.on)) .pipe-col:nth-child(2) .pc-slot, .anim .screen .pipe:has(.pipe-step2.on) .pipe-col:nth-child(3) .pc-slot { height: 3.2em; } } .anim .screen .pc-live span { display: none; } .anim .screen .pc-live .pc-s0 { display: block; } .anim .screen .pipe:has(.pipe-step.on) .pc-live { transform: translateX(calc(100% + 2 * var(--pp) + var(--pg))); } .anim .screen .pipe:has(.pipe-step.on) .pc-live .pc-s0 { display: none; } .anim .screen .pipe:has(.pipe-step.on) .pc-live .pc-s1 { display: block; } .anim .screen .pipe:has(.pipe-step2.on) .pc-live { transform: translateX(calc(200% + 4 * var(--pp) + 2 * var(--pg))); } .anim .screen .pipe:has(.pipe-step2.on) .pc-live .pc-s1 { display: none; } .anim .screen .pipe:has(.pipe-step2.on) .pc-live .pc-s2 { display: block; } .film-live .qt.typing-now::after { content: ""; display: inline-block; width: .06em; height: .9em; margin-left: .04em; background: var(--celeste); vertical-align: -.08em; animation: caret .9s steps(1) infinite; } @keyframes caret { 50% { opacity: 0; } } /* Notificaciones de la portada: cotización → pedido → reserva; la más nueva entra arriba y empuja */ .anim .ntf-wrap { display: grid; grid-template-rows: 1fr; margin-bottom: .5em; transition: grid-template-rows .75s var(--ease), margin-bottom .75s var(--ease); } .anim .ntf-clip { min-height: 0; overflow: hidden; } /* sin esto, la tarjeta que entra se pinta encima de la de abajo */ .anim .ntf { transition: opacity .55s ease, transform .8s var(--ease); } .anim .lock:not(.n2) .w2, .anim .lock:not(.n1) .w1 { grid-template-rows: 0fr; margin-bottom: 0; } .anim .lock:not(.n2) .ntf-2, .anim .lock:not(.n1) .ntf-1, .anim .lock:not(.n0) .ntf-0 { opacity: 0; transform: translateY(-.8em) scale(.94); } /* Pausa: las animaciones infinitas se detienen */ .paused .typing i, .paused .chip-wait::before, .paused .qt::after { animation-play-state: paused !important; } /* Escritorio bajo (1366×600 y similares) */ @media (min-width: 861px) and (max-height: 760px) { .film-live .stage-grid { padding: 18px 0 64px; } .film-live .cap-hero { top: var(--hy, 18px); height: var(--hh, calc(100% - 82px)); } /* misma celda que medirá site.js: la portada no salta */ .film-live .film-bar { height: 60px; } .film-live.film-started .dev-clip { clip-path: inset(-50vh -50vw 60px -50vw); } .film-live .film-h { font-size: clamp(40px, 8.4svh, 64px); } .film-live .cap-verb { font-size: clamp(48px, 11svh, 84px); } .film-live .cap-ask { font-size: clamp(30px, 6.2svh, 44px); } .film-live .cap-meta { font-size: 15px; } .film-live .cap-d { font-size: 16px; margin-top: 12px; } .film-live .cap-k { margin-top: 10px; padding-top: 10px; font-size: 14px; } .film-live .cap-time { font-size: 19px; } .film-live .cap-hero .hero-lead { margin-top: 18px; font-size: 18px; } .film-live .cap-hero .hero-ctas { margin-top: 22px; } .film-live .cap-hero .hero-meta { margin-top: 20px; } } /* Teléfonos: siempre la versión apilada (cada momento se reproduce al entrar en pantalla). Una película fijada no cabe en la altura real de Safari con sus barras ni en el navegador de WhatsApp. */ /* ════════ ¿Tu proceso no está en la lista? ════════════════════════════════════════════════ */ .out { background: var(--navy); color: #fff; padding: clamp(64px, 10vh, 120px) 0 calc(clamp(80px, 13vh, 150px) + 28px); } /* El cierre del día: la pregunta, su respuesta y los ocho procesos… más el tuyo */ .out-q { max-width: 14em; font-size: clamp(38px, 4.8vw, 76px); line-height: 1; letter-spacing: -.042em; } .out-a { margin-top: clamp(16px, 2.4vh, 24px); max-width: 26em; font-size: clamp(20px, 2vw, 28px); line-height: 1.35; color: var(--on-d-2); letter-spacing: -.016em; } .coda { margin-top: clamp(36px, 6vh, 64px); display: flex; flex-wrap: wrap; gap: 8px; } .coda li { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 60px; padding: 8px 16px 9px; border: 1px solid rgba(255,255,255,.2); border-radius: 14px; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: -.005em; color: #fff; } .coda time { font-size: 13px; color: var(--celeste); font-variant-numeric: tabular-nums; } .coda .coda-x { border: 1px dashed rgba(255,255,255,.45); color: #fff; } .coda .coda-x .ico { width: 14px; height: 14px; color: var(--celeste); } /* Escritorio ancho: los nueve en una sola fila de la rejilla, del mismo ancho */ @media (min-width: 1100px) { .coda { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); } .coda li { min-height: 76px; padding: 12px 16px 13px; font-size: 17px; } .coda time { font-size: 14px; } } .js.motion .coda li { opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .8s var(--ease); } .js.motion .coda.in li { opacity: 1; transform: none; } .js.motion .coda li:nth-child(2) { transition-delay: .05s; } .js.motion .coda li:nth-child(3) { transition-delay: .1s; } .js.motion .coda li:nth-child(4) { transition-delay: .15s; } .js.motion .coda li:nth-child(5) { transition-delay: .2s; } .js.motion .coda li:nth-child(6) { transition-delay: .25s; } .js.motion .coda li:nth-child(7) { transition-delay: .3s; } .js.motion .coda li:nth-child(8) { transition-delay: .35s; } .js.motion .coda li:nth-child(9) { transition-delay: .75s; } @media (max-width: 860px) { .out { padding-top: 64px; } .coda { gap: 6px; } .coda li { min-height: 52px; padding: 6px 12px 7px; font-size: 14px; border-radius: 12px; } .coda time { font-size: 12px; } } /* ════════ No entregamos informes ══════════════════════════════════════════════════════════ */ /* Ejecución y empresas: un solo capítulo blanco (la hoja entra redondeada sobre el navy) */ .exec { position: relative; z-index: 2; margin-top: -28px; border-radius: 28px 28px 0 0; background: #fff; color: var(--ink); padding: clamp(96px, 15vh, 170px) 0 clamp(40px, 6vh, 72px); } .exec-h { font-size: clamp(46px, 8.2vw, 148px); line-height: .94; letter-spacing: -.036em; } .exec-h > span { display: block; } .exec-1 { color: var(--gris); } .exec-2 { overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; } .exec-2i { display: block; color: var(--navy); } .js.motion .exec .exec-2i { transform: translateY(105%); transition: transform 1.1s var(--ease) .3s; } .js.motion .exec.in .exec-2i { transform: none; } .js.motion .exec .exec-1 { transition: color .8s ease .2s; color: var(--navy); } .js.motion .exec.in .exec-1 { color: var(--gris); } /* ════════ Empresas que confían en nuestro equipo ═════════════════════════════════════════ */ .cli { background: #fff; color: var(--ink); padding: clamp(72px, 11vh, 130px) 0 clamp(80px, 12vh, 140px); } .cli-head { text-align: center; } .cli-head .h2 { max-width: 11em; margin-inline: auto; } /* Los sectores, como pie del muro de logos (una línea centrada) */ .cli-sub { margin: 40px auto 0; max-width: 46em; text-align: center; font-size: 15px; line-height: 1.5; color: var(--ink-3); text-wrap: balance; } /* En pantallas anchas el muro conserva la medida de 1440 (7/7/5), sin acortar la línea de arriba */ .logos { padding-inline: max(0px, (100% - 1308px) / 2); } .logos { margin-top: clamp(48px, 8vh, 88px); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: clamp(28px, 4vw, 64px); row-gap: clamp(28px, 4.6vh, 48px); padding-top: clamp(40px, 6vh, 64px); border-top: 1px solid var(--hair); } .logos li { flex: none; display: flex; align-items: center; justify-content: center; height: 76px; --k: 1; } .logos img { width: calc(var(--w) * var(--k) * 1px); height: auto; } .logos .plate img { border-radius: 6px; } @media (max-width: 860px) { .logos { column-gap: 26px; row-gap: 22px; } .cli-sub { margin-top: 32px; } .logos li { --k: .72; height: 60px; } .logos .plate { --k: .86; } } @media (max-width: 380px) { .logos li { --k: .64; } .logos { column-gap: 20px; } } @media (min-width: 561px) and (max-width: 860px) { .logos li { --k: .86; } .logos { column-gap: 36px; } } /* ════════ Primero, la base ════════════════════════════════════════════════════════════════ */ /* Momento de producto: cinco fuentes reales (un asiento, un XML del SRI, una tarjeta del CRM, un mensaje, una hoja) entran sueltas, se juntan en una sola franja "Tu data, integrada con AI" y encima caen los ocho módulos */ .base { background: var(--hueso); color: var(--ink); overflow-x: clip; } .base-stage { padding: clamp(100px, 16vh, 180px) 0; } .base-pre { font-size: clamp(20px, 1.9vw, 28px); font-weight: 600; line-height: 1.3; letter-spacing: -.02em; color: var(--ink-3); max-width: 22em; } .base-head .h1x { margin-top: 10px; } .base-fig { margin-top: clamp(40px, 7vh, 80px); } .base-mods { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; } .base-mods a { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 60px; padding: 8px; border-radius: 12px; background: #fff; color: var(--navy); font-size: 15px; font-weight: 700; letter-spacing: -.01em; text-decoration: none; border: 1px solid rgba(2,22,47,.08); transition: background-color .2s, color .2s, transform .5s var(--ease), opacity .5s ease, scale var(--ap-pulsar-duracion, 100ms) ease-out; } @media (hover: hover) { .base-mods a:hover { background: var(--accent-ink); color: #fff; border-color: var(--accent-ink); } } .base-slab { position: relative; margin-top: 8px; } .base-sys { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); } .base-sys::before { content: ""; position: absolute; inset: 0; border-radius: 14px; background: var(--navy); transition: opacity .5s ease; } .base-sys li { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; padding: 18px 14px 16px; color: #fff; transition: transform .9s var(--ease-io), opacity .6s ease; } .base-sys li + li::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px; background: rgba(255,255,255,.16); transition: opacity .5s ease; } .sys-l { margin-top: 14px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; transition: opacity .5s ease; } .base-slab-l { margin-top: 14px; text-align: center; font-size: 15px; font-weight: 700; color: var(--ink-2); letter-spacing: -.005em; transition: opacity .5s ease; } /* Artefactos: pequeños, planos, con rótulos genéricos */ .art { display: flex; align-items: center; justify-content: center; width: 100%; height: 66px; } .art > span { width: min(100%, 176px); height: 100%; background: #fff; color: #0B1B2E; border-radius: 9px; font-size: 11.5px; line-height: 1.3; letter-spacing: -.004em; text-align: left; box-shadow: 0 10px 22px -14px rgba(0,0,0,.55); } .art-erp { padding: 7px 10px; display: flex; flex-direction: column; justify-content: center; gap: 3px; } .art-erp > span { display: flex; justify-content: space-between; gap: 8px; padding-top: 3px; border-top: 1px solid #EEF1F4; } .art-erp > span:first-child { border-top: 0; padding-top: 0; } .art-erp i { font-style: normal; color: #5E6B7A; } .art-erp b { font-weight: 700; } .art-xml { padding: 7px 10px; display: flex; flex-direction: column; justify-content: center; gap: 1px; color: var(--accent-ink); font-weight: 600; } .art-xml i { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .art-xml i.in { padding-left: 10px; } .art-xml u { text-decoration: none; color: #9AA5B1; font-weight: 400; } .art-xml .mono { color: #0B1B2E; font-weight: 600; } .art-crm { padding: 9px 10px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 5px; } .art-crm b { font-weight: 700; font-size: 1.08em; white-space: nowrap; } .art-crm em { font-style: normal; font-weight: 700; font-size: .92em; color: var(--accent-ink); background: #E1EFF8; padding: 2px 8px; border-radius: 10px; } .art > .art-wa { background: #EFEAE2; padding: 9px; display: flex; align-items: center; } .art-bub { display: block; width: fit-content; max-width: 92%; background: #fff; padding: 5px 8px; border-radius: 8px; border-top-left-radius: 2px; color: #111B21; box-shadow: 0 1px .5px rgba(11,20,26,.13); } .art-xls { padding: 0; overflow: hidden; display: grid; grid-template-columns: 16px repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); } .art-xls i { min-height: 0; border-right: 1px solid #E3E8ED; border-bottom: 1px solid #E3E8ED; font-style: normal; font-size: 10px; font-weight: 600; color: #7A8794; display: grid; place-items: center; } .art-xls i:nth-child(4n) { border-right: 0; } .art-xls i:nth-last-child(-n+4) { border-bottom: 0; } .art-xls .h, .art-xls .n { background: #F3F5F7; } .art-xls .on { box-shadow: inset 0 0 0 2px var(--accent); } /* Ensamblaje (solo con movimiento): artefactos sueltos → franja; luego caen los módulos */ .js.motion .base:not(.s1) .base-sys li:nth-child(1) { transform: translate(-40px, -34px) rotate(-5deg); } .js.motion .base:not(.s1) .base-sys li:nth-child(2) { transform: translate(-14px, 38px) rotate(3deg); } .js.motion .base:not(.s1) .base-sys li:nth-child(3) { transform: translate(0, -44px) rotate(-2deg); } .js.motion .base:not(.s1) .base-sys li:nth-child(4) { transform: translate(16px, 32px) rotate(4deg); } .js.motion .base:not(.s1) .base-sys li:nth-child(5) { transform: translate(40px, -26px) rotate(5deg); } .js.motion .base .base-sys li:nth-child(2) { transition-delay: .05s; } .js.motion .base .base-sys li:nth-child(3) { transition-delay: .1s; } .js.motion .base .base-sys li:nth-child(4) { transition-delay: .15s; } .js.motion .base .base-sys li:nth-child(5) { transition-delay: .2s; } .js.motion .base:not(.s2) .base-sys::before, .js.motion .base:not(.s2) .base-slab-l, .js.motion .base:not(.s2) .sys-l, .js.motion .base:not(.s2) .base-sys li + li::before { opacity: 0; } .js.motion .base:not(.s3) .base-mods a { opacity: 0; transform: translateY(-26px); } .js.motion .base.s3 .base-mods li:nth-child(1) a { transition-delay: 0s, 0s, .00s, .00s; } .js.motion .base.s3 .base-mods li:nth-child(2) a { transition-delay: 0s, 0s, .05s, .05s; } .js.motion .base.s3 .base-mods li:nth-child(3) a { transition-delay: 0s, 0s, .10s, .10s; } .js.motion .base.s3 .base-mods li:nth-child(4) a { transition-delay: 0s, 0s, .15s, .15s; } .js.motion .base.s3 .base-mods li:nth-child(5) a { transition-delay: 0s, 0s, .20s, .20s; } .js.motion .base.s3 .base-mods li:nth-child(6) a { transition-delay: 0s, 0s, .25s, .25s; } .js.motion .base.s3 .base-mods li:nth-child(7) a { transition-delay: 0s, 0s, .30s, .30s; } .js.motion .base.s3 .base-mods li:nth-child(8) a { transition-delay: 0s, 0s, .35s, .35s; } /* Con teclado: si el foco entra en la base, la escena se muestra completa (nunca un enlace invisible) */ .js.motion .base:focus-within .base-sys li:nth-child(n), .js.motion .base:focus-within .base-mods li:nth-child(n) a { opacity: 1; transform: none; transition-delay: 0s; } .js.motion .base:focus-within .base-sys::before, .js.motion .base:focus-within .base-slab-l, .js.motion .base:focus-within .sys-l, .js.motion .base:focus-within .base-sys li + li::before { opacity: 1; } @media (min-width: 861px) and (min-height: 600px) { .js.motion .base-run { height: calc(100svh + 55vh); } .js.motion .base-stage { position: sticky; top: var(--hdr); height: calc(100svh - var(--hdr)); display: flex; flex-direction: column; justify-content: center; padding: 0; } } @media (min-width: 1100px) and (min-height: 761px) { .base-mods { gap: 10px; } .base-mods a { min-height: 72px; font-size: 18px; border-radius: 14px; } .base-slab { margin-top: 10px; } .base-sys li { padding: 22px 18px 20px; } .art { height: 72px; } .art > span { width: min(100%, 200px); font-size: 12.5px; } .sys-l { font-size: 19px; } .base-slab-l { margin-top: 18px; font-size: 16px; } } @media (min-width: 861px) and (max-height: 760px) { .base-pre { font-size: 18px; } .base-fig { margin-top: 24px; } .base-mods a { min-height: 46px; font-size: 14px; } .base-sys li { padding: 12px 10px; } .art { height: 54px; } .art > span { font-size: 10.5px; } .sys-l { margin-top: 8px; font-size: 15px; } .base-head .h1x { font-size: clamp(44px, 10svh, 80px); } } @media (max-width: 860px) { /* Teléfono: los módulos son una línea de rótulos que descansa sobre la base (no un menú de botones) */ .base-mods { display: flex; flex-wrap: wrap; gap: 6px; } .base-mods a { min-height: 44px; padding: 0 14px; background: transparent; border: 1px solid rgba(2,22,47,.16); font-weight: 600; font-size: 15px; } .base-slab { margin-top: 6px; } .base-sys { grid-template-columns: 1fr; } .base-sys li { flex-direction: row; align-items: center; gap: 14px; padding: 12px 14px; text-align: left; } .base-sys li + li::before { left: 14px; right: 14px; top: 0; bottom: auto; width: auto; height: 1px; } .art { flex: none; width: 138px; height: 64px; } .sys-l { margin-top: 0; font-size: 16px; } .base-stage { padding: 88px 0 96px; } .js.motion .base:not(.s1) .base-sys li:nth-child(n) { opacity: 0; transform: translateY(26px); } } @media (max-width: 359px) { .art { width: 118px; } .art > span { font-size: 10.5px; } } /* ════════ 60 días (campo de acento) ═══════════════════════════════════════════════════════ */ /* Cada cambio de campo de color entra como una hoja redondeada (60, método, tus datos, equipo, preguntas, demo) */ .sixty, .met, .team, .faq { position: relative; z-index: 2; margin-top: -28px; border-radius: 28px 28px 0 0; } .sixty { overflow: hidden; isolation: isolate; background: var(--accent); color: #fff; min-height: min(100svh, 980px); display: flex; flex-direction: column; justify-content: flex-end; padding: calc(var(--hdr) + 32px) 0 clamp(64px, 11vh, 120px); } .sixty-stripes { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .sixty-stripes i { position: absolute; top: -30%; height: 160%; background: #000; transform: skewX(-27deg); } .sixty-stripes i:nth-child(1) { left: 20%; width: 15vw; opacity: .08; } .sixty-stripes i:nth-child(2) { left: 48%; width: 9vw; opacity: .1; } .sixty-stripes i:nth-child(3) { left: 78%; width: 5vw; opacity: .07; } /* El 60 se alinea con la rejilla de 1440 (no con el borde de la pantalla) */ .sixty-n { position: absolute; left: calc(max(var(--gut), (100% - var(--maxw)) / 2) - .055em); bottom: clamp(40px, 8vh, 96px); font-size: clamp(240px, min(44vw, 70svh), 760px); font-weight: 700; line-height: .74; letter-spacing: -.07em; color: #fff; pointer-events: none; } .sixty-n span { display: block; transform-origin: 0 100%; will-change: transform; } .sixty-copy { position: relative; display: flex; flex-direction: column; align-items: flex-end; } .sixty-copy > * { width: min(40%, 540px); } .sixty-t { font-size: clamp(34px, 4vw, 66px); line-height: 1.02; letter-spacing: -.04em; } @media (max-width: 860px) { .sixty { min-height: 0; padding: 112px 0 64px; justify-content: flex-start; } .sixty-n { position: relative; left: auto; bottom: auto; margin: 0 0 0 calc(var(--gut) - .05em); font-size: clamp(200px, 64vw, 330px); line-height: .76; } .sixty-copy { align-items: flex-start; margin-top: 30px; } .sixty-copy > * { width: 100%; } .sixty-t { font-size: clamp(34px, 9.4vw, 46px); max-width: 13ch; } } /* ════════ Método: el calendario cuenta todo el método (antes → 1–30 → 31–60 → cada mes) ════════ */ .met { background: #fff; color: var(--ink); padding: clamp(88px, 13vh, 150px) 0 clamp(88px, 13vh, 150px); } .cal { margin-top: clamp(48px, 8vh, 88px); } .cal-row { display: grid; grid-template-columns: minmax(0, 3.2fr) minmax(0, 8.8fr); gap: 24px 3.4vw; align-items: center; padding: clamp(18px, 2.6vh, 26px) 0; border-top: 1px solid var(--hair); } .cal-row-m { border-bottom: 1px solid var(--hair); } .cal-k { font-size: 14px; font-weight: 700; color: var(--accent-ink); font-variant-numeric: tabular-nums; } .cal-lab h3 { margin-top: 2px; font-size: clamp(21px, 1.7vw, 26px); line-height: 1.15; letter-spacing: -.025em; } .cal-lab p:last-child { margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--ink-2); } .cal-grid { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 6px; } .cal-grid i { position: relative; aspect-ratio: 1; border-radius: 6px; background: var(--accent); display: grid; place-items: center; font: 600 12px/1 var(--font); font-style: normal; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.0); transition: background-color .35s ease, color .35s ease; } .cal-row-b .cal-grid i { background: var(--navy); } .cal-grid i.k1, .cal-grid i.k15, .cal-grid i.k60 { color: #fff; font-size: 13px; font-weight: 700; } .cal-grid i.k15::after { content: ""; position: absolute; inset: -4px; border: 2px solid var(--navy); border-radius: 9px; } /* El día 60 es la meta: su propio campo celeste */ .cal-row-b .cal-grid i.k60 { background: var(--celeste); color: var(--navy); } /* Filas de antes y de cada mes: bloques que no se cuentan como días */ .cal-x i { aspect-ratio: 3.2; grid-column: span 3; } .cal-x i.k0 { background: var(--hueso); border: 1px solid rgba(2,22,47,.12); color: var(--navy); font-size: 13px; font-weight: 700; } .cal-x i.km { background: transparent; border: 1.5px solid rgba(2,22,47,.2); } .cal-x i.km-x { border-style: dashed; } /* Notas junto a sus celdas: día 1 bajo la columna 1; días 15 y 60 bajo la columna 15 */ .cal-notes { margin-top: 16px; display: flex; justify-content: space-between; gap: 16px 32px; } .ck { display: flex; gap: 10px; align-items: flex-start; max-width: 25em; font-size: 15px; line-height: 1.45; color: var(--ink-2); transition: opacity .5s ease; } .ck15, .ck60 { margin-left: auto; width: min(100%, 23em); } .ck b { display: block; font-size: 15px; color: var(--navy); font-variant-numeric: tabular-nums; } .sw { flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 5px; font: 700 10px/1 var(--font); font-style: normal; font-variant-numeric: tabular-nums; } .ck1 .sw { background: var(--accent); color: #fff; } .ck15 .sw { background: #fff; color: var(--navy); box-shadow: inset 0 0 0 2px var(--navy); } .ck60 .sw { background: var(--celeste); color: var(--navy); } .js.motion .cal-grid:not(.cal-x) i:not(.f) { background: #E9EDF1; color: rgba(2,22,47,.0); } .js.motion .cal-grid i.k1:not(.f), .js.motion .cal-grid i.k15:not(.f), .js.motion .cal-grid i.k60:not(.f) { color: rgba(2,22,47,.45); } .js.motion .cal-grid i.k15:not(.f)::after { border-color: rgba(2,22,47,.2); } .js.motion .cal:not(.c1) .ck1, .js.motion .cal:not(.c15) .ck15, .js.motion .cal:not(.c60) .ck60 { opacity: .35; } /* Una idea por tiempo: la frase de los sesenta días, sola y centrada */ .stmt { margin: clamp(88px, 13vh, 150px) auto 0; max-width: 34em; text-align: center; } .stmt .h3x { max-width: 17em; margin-inline: auto; } .stmt p { margin: 18px auto 0; max-width: 30em; font-size: clamp(18px, 1.4vw, 20px); line-height: 1.5; color: var(--ink-2); } .meas { margin-top: clamp(88px, 13vh, 150px); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px 6vw; align-items: center; } .meas-copy p { margin-top: 20px; font-size: clamp(18px, 1.4vw, 20px); line-height: 1.5; color: var(--ink-2); max-width: 30em; } .rep { background: #fff; border: 1px solid var(--hair); border-radius: 22px; padding: 26px 28px 22px; box-shadow: 0 30px 60px -40px rgba(2,22,47,.35); } .rep-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 14px; } .rep-h b { font-size: 21px; letter-spacing: -.02em; } .rep-h span { font-size: 14px; font-weight: 700; color: var(--accent-ink); } .rep-r, .rep-f { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--hair); font-size: 15px; } .rep-r span, .rep-f span { color: var(--ink-3); } .rep-r b, .rep-f b { text-align: right; } .rep-f { border-top: 2px solid var(--navy); margin-top: 6px; } @media (max-width: 860px) { .meas { grid-template-columns: 1fr; } .cal-row { grid-template-columns: 1fr; gap: 14px; } .cal-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; } .cal-grid i { border-radius: 5px; font-size: 11px; } .cal-grid i.k1, .cal-grid i.k15, .cal-grid i.k60 { font-size: 11px; } .cal-x i { grid-column: span 2; aspect-ratio: 2.2; } .cal-notes { flex-direction: column; gap: 12px; } .ck15, .ck60 { margin-left: 0; width: auto; } .stmt { margin-top: 72px; } .meas { margin-top: 72px; } .rep { padding: 22px 20px 18px; } .rep-r, .rep-f { flex-direction: column; gap: 2px; } .rep-r b, .rep-f b { text-align: left; } } /* Tablet vertical: dos filas de 15, como en escritorio (no dos muros de cuadros estirados) */ @media (min-width: 600px) and (max-width: 860px) { .cal-grid { grid-template-columns: repeat(15, minmax(0, 1fr)); max-width: 620px; } .cal-x i { grid-column: span 3; aspect-ratio: 3.2; } .cal-notes { max-width: 620px; flex-direction: row; } .ck15, .ck60 { margin-left: auto; width: min(100%, 20em); } } /* ════════ Tus datos y tu gente ═══════════════════════════════════════════════════════════ */ /* Del blanco del método al hueso: una hoja nueva que entra redondeada (nunca una costura recta entre dos claros) */ .trust { position: relative; z-index: 2; margin-top: -28px; border-radius: 28px 28px 0 0; background: var(--hueso); color: var(--ink); padding: clamp(96px, 14vh, 160px) 0 clamp(88px, 13vh, 150px); } .trust-t { max-width: 13em; } /* Titular → pantalla → titular → pantalla: bloques apilados, sin zigzag */ .tp { margin-top: clamp(72px, 11vh, 120px); } .tp-copy { max-width: 30em; margin-inline: auto; text-align: center; } .tp-copy p { margin: 18px auto 0; font-size: clamp(18px, 1.4vw, 20px); line-height: 1.5; color: var(--ink-2); max-width: 28em; } .tp .flow, .tp .appr { margin-top: clamp(36px, 5vh, 56px); } .vows-l { margin-top: 22px; font-size: 15px; line-height: 1.5; color: var(--ink-2); text-align: center; } @media (max-width: 860px) { .tp-copy, .vows-l { text-align: left; } .tp-copy p { margin-left: 0; } } .vows-l > span:not(.vh) + span:not(.vh)::before { content: "·"; margin: 0 .6em; color: var(--ink-3); } @media (max-width: 860px) { .vows-l > span:not(.vh) { display: block; } .vows-l > span:not(.vh) + span:not(.vh)::before { content: none; } .vows-l > span + span { margin-top: 4px; } } .flow { display: grid; grid-template-columns: minmax(0, 1fr) clamp(128px, 11vw, 168px) minmax(0, 1fr); align-items: stretch; } .flow-home { background: #fff; border-radius: 22px; padding: clamp(20px, 2vw, 28px); box-shadow: 0 30px 60px -44px rgba(2,22,47,.4); } .flow-model { background: var(--navy); color: #fff; border-radius: 22px; padding: clamp(20px, 2vw, 28px); } .flow-h { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; margin-bottom: 12px; } .flow-h .ico { width: 16px; height: 16px; } .flow-r { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 50px; border-top: 1px solid var(--hair); font-size: clamp(15px, 1.15vw, 17px); font-weight: 600; letter-spacing: -.01em; } .flow-model .flow-r { border-color: rgba(255,255,255,.14); } .flow-r em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--ink-3); white-space: nowrap; } .flow-model .flow-r em { color: var(--on-d-3); } .flow-model .flow-r span { color: var(--celeste); } .flow-z { margin-top: 14px; font-size: 14px; font-weight: 700; display: inline-block; padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,.1); } .flow-z-h { background: var(--hueso); color: var(--navy); } .flow-gate { position: relative; display: flex; align-items: center; justify-content: center; } .flow-gate::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--navy); transform-origin: left; } .flow-gate span { position: relative; background: var(--hueso); padding: 8px 10px; font-size: 13px; font-weight: 700; line-height: 1.25; text-align: center; color: var(--navy); border: 1.5px solid var(--navy); border-radius: 10px; max-width: calc(100% - 12px); } .js.motion .flow .flow-home .flow-r, .js.motion .flow .flow-model .flow-r, .js.motion .flow .flow-z { opacity: 0; transform: translateX(-10px); transition: opacity .5s ease, transform .7s var(--ease); } .js.motion .flow .flow-gate::before { transform: scaleX(0); transition: transform .7s var(--ease-io) .7s; } .js.motion .flow .flow-gate span { opacity: 0; transition: opacity .5s ease .9s; } .js.motion .flow.in .flow-r, .js.motion .flow.in .flow-z, .js.motion .flow.in .flow-gate span { opacity: 1; transform: none; } .js.motion .flow.in .flow-gate::before { transform: none; } .js.motion .flow .flow-home .flow-r:nth-child(3) { transition-delay: .12s; } .js.motion .flow .flow-home .flow-r:nth-child(4) { transition-delay: .24s; } .js.motion .flow .flow-home .flow-r:nth-child(5) { transition-delay: .36s; } .js.motion .flow .flow-model .flow-r:nth-child(2) { transition-delay: 1.15s; } .js.motion .flow .flow-model .flow-r:nth-child(3) { transition-delay: 1.27s; } .js.motion .flow .flow-model .flow-r:nth-child(4) { transition-delay: 1.39s; } .js.motion .flow .flow-model .flow-r:nth-child(5) { transition-delay: 1.51s; } .js.motion .flow .flow-z { transition-delay: 1.8s; } .js.motion .flow .flow-z-h { transition-delay: .5s; } .appr { background: #fff; border-radius: 22px; padding: 24px 26px 22px; box-shadow: 0 30px 60px -40px rgba(2,22,47,.4); max-width: 460px; width: 100%; margin-inline: auto; } .appr-top { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; } .appr-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); } .appr-when { margin-left: auto; font-size: 14px; color: var(--ink-3); font-weight: 600; font-variant-numeric: tabular-nums; } .appr-amt { margin: 14px 0 10px; font-size: 34px; font-weight: 600; letter-spacing: -.02em; color: var(--navy); } .appr-amt::before { content: "$ "; color: var(--ink-3); font-size: .6em; vertical-align: .3em; } .appr-r { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid var(--hair); font-size: 15px; } .appr-r .ico { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--accent); color: #fff; } .appr-wait { color: var(--ink-2); align-items: flex-start; line-height: 1.4; } .appr-st { position: relative; flex: none; width: 18px; height: 18px; margin-top: 1px; } .appr-st > * { position: absolute; inset: 0; } .appr-sp { border-radius: 50%; border: 2px solid var(--hair); border-top-color: var(--navy); opacity: 0; } .appr-r .appr-ok { width: 18px; height: 18px; } .appr-sw { display: grid; } .appr-sw > span { grid-area: 1 / 1; } .appr-w1 { opacity: 0; } .appr-end { display: grid; margin-top: 14px; } .appr-end > * { grid-area: 1 / 1; } .appr-btns { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; opacity: 0; visibility: hidden; } .appr-btns span { display: grid; place-items: center; min-height: 48px; border-radius: 12px; font-weight: 700; font-size: 17px; } .appr-no { background: var(--hueso); color: var(--navy); } .appr-yes { background: var(--accent); color: #fff; font-size: 19px !important; } .appr-done { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; border-radius: 12px; background: #EAF4FB; font-size: 16px; font-weight: 700; color: var(--navy); letter-spacing: -.01em; } .appr-done .ico { width: 20px; height: 20px; color: var(--accent-ink); } /* En vivo, en tres tiempos que nunca se pisan: 1) el agente dejó todo listo y espera (0–1,4 s) · 2) una persona pulsa Aprobar (1,4 s) 3) se van los botones y la espera (1,9 s) y recién entonces aparece "Aprobado por una persona" (2,25 s) */ .js.motion .appr .appr-sp { opacity: 1; animation: spin 1s linear infinite; transition: opacity .25s ease 1.9s; } .js.motion .appr .appr-ok { opacity: 0; transform: scale(.4); transition: opacity .3s ease 2.25s, transform .5s var(--ease) 2.25s; } .js.motion .appr .appr-w1 { opacity: 1; transition: opacity .25s ease 1.9s; } .js.motion .appr .appr-w2 { opacity: 0; transition: opacity .35s ease 2.25s; } .js.motion .appr .appr-btns { opacity: 1; visibility: visible; transition: opacity .25s ease 1.9s, visibility 0s linear 2.15s; } .js.motion .appr .appr-done { opacity: 0; transform: translateY(6px); transition: opacity .4s ease 2.25s, transform .6s var(--ease) 2.25s; } .js.motion .appr.in .appr-sp, .js.motion .appr.in .appr-w1, .js.motion .appr.in .appr-btns { opacity: 0; } .js.motion .appr.in .appr-btns { visibility: hidden; } .js.motion .appr.in .appr-ok, .js.motion .appr.in .appr-w2, .js.motion .appr.in .appr-done { opacity: 1; transform: none; } .js.motion .appr.in .appr-yes { animation: press .5s var(--ease) 1.4s; } @keyframes press { 45% { transform: scale(.94); background: #0A6DA8; } } @keyframes spin { to { transform: rotate(360deg); } } @media (max-width: 860px) { .flow { grid-template-columns: 1fr; } .flow-gate { height: 76px; } .flow-gate::before { left: 50%; right: auto; top: 0; bottom: 0; width: 2px; height: auto; transform-origin: top; } .js.motion .flow .flow-gate::before { transform: scaleY(0); } .flow-gate span { max-width: none; } .appr { padding: 22px 20px 20px; } } /* ════════ La AI y las utilidades (datos de mercado): una cifra por pantalla, sobre hueso ═══ */ /* Entra como una hoja redondeada sobre el blanco de las empresas y sigue, sin costura, en "Primero, la base" */ .mkt { position: relative; z-index: 2; margin-top: -28px; border-radius: 28px 28px 0 0; background: var(--hueso); color: var(--ink); padding: clamp(96px, 15vh, 170px) 0 clamp(16px, 3vh, 40px); text-align: center; } .mkt-t { margin-inline: auto; max-width: 16ch; font-size: clamp(38px, 4.8vw, 76px); line-height: 1; letter-spacing: -.042em; } .stats { margin-top: clamp(16px, 3vh, 40px); } .stat { min-height: min(76svh, 760px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(40px, 7vh, 80px) 0; } .stat-pre { margin-bottom: .4em; font-size: clamp(21px, 2vw, 30px); font-weight: 600; letter-spacing: -.022em; color: var(--ink-2); } .stat-n { font-size: clamp(140px, 20vw, 300px); font-weight: 700; line-height: .8; letter-spacing: -.045em; color: var(--navy); font-variant-numeric: tabular-nums; } .stat-d { margin-top: clamp(22px, 3.4vh, 36px); max-width: 21em; font-size: clamp(21px, 2vw, 30px); line-height: 1.25; letter-spacing: -.022em; font-weight: 600; color: var(--ink); text-wrap: balance; } .src { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--ink-3); text-decoration: underline; text-decoration-color: rgba(2,22,47,.28); text-underline-offset: 3px; } @media (hover: hover) { .src:hover { color: var(--ink); text-decoration-color: currentColor; } } .mask { display: inline-block; overflow: hidden; padding: .06em .03em .06em; margin: -.06em -.03em -.06em; vertical-align: bottom; } .mask > span { display: inline-block; } .js.motion .rv .mask > span { transform: translateY(105%); transition: transform 1.2s var(--ease) .08s; } .js.motion .rv.in .mask > span { transform: none; } .mkt-so { margin: clamp(24px, 4vh, 48px) auto 0; max-width: 17ch; font-size: clamp(30px, 3.6vw, 58px); line-height: 1.04; letter-spacing: -.038em; font-weight: 700; color: var(--navy); text-wrap: balance; } /* ════════ Equipo: una sola idea (de Watson a los agentes, de izquierda a derecha) ════════════ */ .team { isolation: isolate; overflow: hidden; background: var(--navy); color: #fff; padding: clamp(88px, 13vh, 150px) 0 clamp(120px, 18vh, 200px); } /* El isotipo oficial (recorte de la portada) sangra por la esquina de abajo; la lección le deja el lugar libre */ /* El isotipo queda dentro del navy (sus trazos terminan planos, como en la marca) y sangra solo por la derecha */ .team-mark { position: absolute; right: 0; bottom: clamp(56px, 9vh, 110px); width: min(24vw, 380px); z-index: -1; pointer-events: none; } .team-mark img { width: 100%; } .team-t { max-width: 11ch; } .team-s { margin-top: 16px; font-size: clamp(24px, 2.6vw, 42px); font-weight: 600; line-height: 1.12; letter-spacing: -.03em; color: var(--on-d-2); text-wrap: balance; } .eras { margin-top: clamp(56px, 9vh, 110px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3.4vw, 56px); } .era { padding-top: clamp(20px, 3vh, 30px); border-top: 2px solid rgba(255,255,255,.18); transition: border-color .6s ease; } .era:last-child { border-top-color: var(--celeste); } .era-w { font-size: clamp(36px, 3.8vw, 60px); font-weight: 700; line-height: 1; letter-spacing: -.036em; transition: color .6s ease; } .era-b { margin-top: clamp(14px, 2vh, 20px); max-width: 24em; } .era-k { font-size: 15px; font-weight: 700; color: var(--celeste); margin-bottom: 6px; } .era-b p:last-child { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.45; color: var(--on-d-2); transition: color .6s ease; } .js.motion .era:not(.on) .era-w { color: rgba(255,255,255,.2); } .js.motion .era:not(.on) .era-b p:last-child { color: rgba(255,255,255,.4); } .js.motion .era:nth-child(2) .era-w, .js.motion .era:nth-child(2) .era-b p { transition-delay: .25s; } .js.motion .era:nth-child(3) .era-w, .js.motion .era:nth-child(3) .era-b p { transition-delay: .5s; } .lesson { margin-top: clamp(64px, 10vh, 110px); font-size: clamp(28px, 3.3vw, 52px); line-height: 1.1; letter-spacing: -.035em; font-weight: 600; color: var(--on-d-3); max-width: 21ch; text-wrap: balance; } .lesson em { font-style: normal; color: #fff; } @media (max-width: 860px) { .exec, .cli, .met, .trust, .team, .faq, .demo { padding-top: 72px; padding-bottom: 72px; } .mkt { padding-top: 80px; } .faq, .out { padding-bottom: 100px; } .team-mark { display: none; } /* en el teléfono quedaría detrás de la barra inferior */ .eras { grid-template-columns: 1fr; gap: 36px; } .stat { min-height: 0; padding: 56px 0 44px; } .stat-n { font-size: clamp(120px, 38vw, 170px); } .stat-d { font-size: 20px; } } /* ════════ Preguntas ══════════════════════════════════════════════════════════════════════ */ .faq { background: #fff; color: var(--ink); padding: clamp(88px, 13vh, 150px) 0 calc(clamp(88px, 13vh, 150px) + 28px); } .faq-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px 6vw; align-items: start; } .faq-list { border-top: 1px solid var(--hair); } .faq details { border-bottom: 1px solid var(--hair); } .faq summary { position: relative; list-style: none; cursor: pointer; padding: 26px 56px 26px 0; font-size: clamp(19px, 1.6vw, 24px); font-weight: 600; letter-spacing: -.02em; line-height: 1.3; min-height: 44px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::before, .faq summary::after { content: ""; position: absolute; right: 10px; top: 50%; width: 16px; height: 2px; margin-top: -1px; border-radius: 1px; background: var(--navy); transition: transform .4s var(--ease); } .faq summary::after { transform: rotate(90deg); } .faq details[open] summary::after { transform: rotate(0); } .faq-a { padding: 0 56px 28px 0; } .faq-a p { font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 36em; } .faq details::details-content { block-size: 0; overflow: clip; transition: block-size .45s var(--ease), content-visibility .45s allow-discrete; } .faq details[open]::details-content { block-size: auto; } @supports (interpolate-size: allow-keywords) { .faq { interpolate-size: allow-keywords; } } @media (hover: hover) { .faq summary:hover { color: var(--accent-ink); } } @media (max-width: 860px) { .faq-in { grid-template-columns: 1fr; } .faq-a { padding-right: 0; } .faq summary { padding-right: 44px; } } /* ════════ La demo ════════════════════════════════════════════════════════════════════════ */ .demo { position: relative; z-index: 2; margin-top: -28px; border-radius: 28px 28px 0 0; background: var(--navy); color: #fff; padding: clamp(88px, 13vh, 150px) 0 clamp(88px, 13vh, 140px); overflow: clip; /* clip, no hidden: el pie fijo del agendador necesita que la página sea la que se desplaza */ isolation: isolate; } .demo-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px 6vw; align-items: end; } .demo-head .h1x { max-width: 9ch; } .three { counter-reset: t; } .three li { counter-increment: t; display: flex; gap: 16px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--hair-d); font-size: clamp(19px, 1.6vw, 23px); font-weight: 600; letter-spacing: -.02em; line-height: 1.3; } .three li::before { content: counter(t); font-size: 15px; font-weight: 700; color: var(--celeste); font-variant-numeric: tabular-nums; min-width: 1ch; } .demo-p { grid-column: 1 / -1; font-size: 17px; line-height: 1.5; color: var(--on-d-2); max-width: 34em; } .nojs { margin-top: 40px; } .nojs-t { font-size: 20px; font-weight: 600; margin-bottom: 18px; } .js .nojs { display: none; } .safe .nojs { display: block; } .safe .agenda-mount { display: none; } .safe .hdr-menu { display: none !important; } .agenda-mount:empty { display: none; } #agenda-inline { margin-top: clamp(48px, 8vh, 88px); } @media (max-width: 860px) { .demo-head { grid-template-columns: 1fr; } } /* ════════ Agendador ══════════════════════════════════════════════════════════════════════ */ .ag fieldset { border: 0; padding: 0; margin: 0; min-width: 0; } .ag legend { padding: 0; font-size: 15px; font-weight: 700; letter-spacing: -.005em; } .ag legend small { font-weight: 600; font-size: 14px; margin-left: 4px; } .ag-opt { position: relative; display: block; cursor: pointer; } .ag-opt input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; } .ag-face { display: flex; flex-direction: column; transition: background-color .2s, color .2s, border-color .2s; } /* (cada opción del agendador es ap-pulsable: la capa común la encoge al pulsarla) */ .ag-grp { margin-top: 14px; } .ag-grp-t { font-size: 14px; font-weight: 700; margin-bottom: 8px; } .ag-tz { margin-top: 12px; font-size: 14px; } .ag-foot { margin-top: 26px; display: flex; align-items: center; gap: 20px 28px; flex-wrap: wrap; } .ag-sum { flex: 1 1 320px; min-width: 0; } .ag-sum-l { font-size: 13px; font-weight: 700; letter-spacing: .01em; } .ag-sum-t { margin-top: 2px; font-size: 20px; font-weight: 700; letter-spacing: -.018em; line-height: 1.3; } .ag-sum-x { margin-top: 3px; font-size: 15px; } .ag-cta { flex: none; } .ag-cta[aria-disabled="true"] { cursor: not-allowed; } .ag-state { margin-top: 14px; min-height: 0; } .ag-state:empty { display: none; } .ag-ok { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px; } .ag-ok .ico { width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: var(--accent); color: #fff; } .ag-ok b { display: block; font-size: 18px; letter-spacing: -.015em; } .ag-ok span { display: block; font-size: 14px; margin-top: 2px; } .ag-empty { font-size: 16px; } /* Versión grande (final de la página, sobre navy) */ .ag-grand { color: #fff; } .ag-grand legend small, .ag-grand .ag-grp-t, .ag-grand .ag-tz, .ag-grand .ag-sum-l, .ag-grand .ag-sum-x, .ag-grand .ag-ok span { color: var(--on-d-2); } .ag-grand .ag-days { margin-top: 14px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; } .ag-grand .ag-day { padding: 18px 20px 16px; min-height: 164px; justify-content: space-between; border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); } .ag-grand .ag-day .d1 { font-size: 15px; font-weight: 700; } .ag-grand .ag-day .d2 { font-size: clamp(56px, 6vw, 96px); font-weight: 700; letter-spacing: -.04em; line-height: .9; font-variant-numeric: tabular-nums; } .ag-grand .ag-day .d3 { font-size: 14px; font-weight: 600; color: var(--on-d-3); } .ag-grand .ag-hours { margin-top: 34px; } .ag-grand .ag-times { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; } /* la tarde se alinea bajo la mañana */ @media (min-width: 861px) and (max-width: 1100px) { .ag-grand .ag-times { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .ag-grand .ag-time { align-items: center; justify-content: center; min-height: 64px; padding: 8px; border: 1px solid rgba(255,255,255,.2); border-radius: 12px; font-size: 26px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .ag-grand .ag-time small { margin-top: 3px; font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--on-d-2); text-align: center; line-height: 1.2; } /* Elegido: anillo blanco de 2 px (el botón "Agendar demo" sigue siendo lo más brillante) */ .ag-grand .ag-opt input:checked + .ag-face { background: rgba(255,255,255,.06); color: #fff; border-color: #fff; box-shadow: inset 0 0 0 1px #fff; } .ag-grand .ag-opt input:checked + .ag-face .d3, .ag-grand .ag-opt input:checked + .ag-face small { color: var(--on-d-2); } .ag-grand .ag-opt input:focus-visible + .ag-face { outline: 2px solid var(--celeste); outline-offset: -2px; } .ag-grand .ag-opt input:checked:focus-visible + .ag-face { outline-color: var(--celeste); outline-offset: 3px; } .ag-grand .ag-foot { padding-top: 24px; border-top: 1px solid var(--hair-d); } .ag-grand .ag-sum-t.muted { color: var(--on-d-3); font-weight: 600; } .ag-grand .ag-cta { min-height: 60px; padding: 0 34px; } .ag-grand .ag-cta[aria-disabled="true"] { background: transparent; color: rgba(255,255,255,.78); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); } .ag-grand .ag-ok { background: rgba(255,255,255,.08); } @media (hover: hover) { .ag-grand .ag-opt:hover input:not(:checked) + .ag-face { background: rgba(255,255,255,.07); } } @media (max-width: 860px) { .ag-grand .ag-days { gap: 6px; } .ag-grand .ag-day { padding: 12px 4px 10px; min-height: 104px; align-items: center; text-align: center; } .ag-grand .ag-day .d1 { font-size: 13px; } .ag-grand .ag-day .d2 { font-size: clamp(34px, 10vw, 46px); } .ag-grand .ag-day .d3 { font-size: 12px; } .ag-grand .ag-times { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ag-grand .ag-time { min-height: 52px; font-size: 19px; } .ag-grand .ag-cta { width: 100%; } .ag-sum { flex-basis: 100%; } /* Día, hora y botón a la vista a la vez: el resumen y "Agendar demo" quedan fijos abajo, como en la hoja */ .ag-grand .ag-foot { position: sticky; bottom: 0; z-index: 2; margin: 22px calc(-1 * var(--gut)) 0; padding: 12px var(--gut) calc(12px + env(safe-area-inset-bottom)); gap: 10px; background: var(--navy); border-top: 1px solid var(--hair-d); } .ag-grand .ag-sum-t { font-size: 16px; } .ag-grand .ag-cta { min-height: 54px; } } /* 320 px: siguen 4 columnas (2 + 2 filas, sin una hora huérfana), con la letra un poco menor */ @media (max-width: 359px) { .ag-grand .ag-time { padding: 8px 2px; font-size: 17px; } .ag-grand .ag-time small { font-size: 12px; } } /* Versión compacta (hoja del botón "Agendar demo") */ .ag-compact { color: var(--ink); } .ag-compact legend small, .ag-compact .ag-grp-t, .ag-compact .ag-tz, .ag-compact .ag-sum-l, .ag-compact .ag-sum-x, .ag-compact .ag-ok span { color: var(--ink-3); } .ag-compact .ag-days { margin-top: 12px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; } .ag-compact .ag-day { align-items: center; justify-content: center; gap: 1px; min-height: 80px; border-radius: 14px; background: var(--hueso); color: var(--navy); } .ag-compact .ag-day .d1 { font-size: 13px; font-weight: 700; color: var(--ink-3); } .ag-compact .ag-day .d2 { font-size: 28px; font-weight: 700; letter-spacing: -.035em; line-height: 1.05; font-variant-numeric: tabular-nums; } .ag-compact .ag-day .d3 { font-size: 12px; font-weight: 600; color: var(--ink-3); } .ag-compact .ag-hours { margin-top: 24px; } .ag-compact .ag-times { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .ag-compact .ag-time { align-items: center; justify-content: center; min-height: 50px; border-radius: 12px; background: #F2F4F6; color: var(--navy); font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; } .ag-compact .ag-time small { font-size: 11.5px; font-weight: 600; color: var(--ink-3); margin-top: 1px; text-align: center; line-height: 1.2; } .ag-compact.dual .ag-time { min-height: 58px; } .ag-compact .ag-opt input:checked + .ag-face { background: var(--navy); color: #fff; } .ag-compact .ag-opt input:checked + .ag-face .d1, .ag-compact .ag-opt input:checked + .ag-face .d3, .ag-compact .ag-opt input:checked + .ag-face small { color: rgba(255,255,255,.8); } .ag-compact .ag-opt input:focus-visible + .ag-face { outline: 2px solid var(--accent); outline-offset: 2px; } .ag-compact .ag-foot { margin-top: 20px; flex-direction: column; align-items: stretch; gap: 12px; } .ag-compact .ag-sum { flex: none; padding: 14px 16px; border-radius: 14px; background: #F2F4F6; min-height: 74px; display: flex; flex-direction: column; justify-content: center; } .ag-compact .ag-sum-t { font-size: 17px; color: var(--navy); } .ag-compact .ag-sum-t.muted { color: var(--ink-3); font-weight: 600; } .ag-compact .ag-sum-x { color: var(--ink-2); font-size: 14px; } .ag-compact .ag-cta { width: 100%; min-height: 56px; } .ag-compact .ag-cta[aria-disabled="true"] { background: #D8DEE5; color: #4A5664; } .ag-compact .ag-ok { background: #EAF4FB; color: var(--navy); } /* En la hoja, el resumen y el botón quedan fijos abajo: nunca hay que adivinar que la hoja se desplaza */ .sheet .ag-compact .ag-foot { position: sticky; bottom: 0; z-index: 2; margin: 20px -30px 0; padding: 14px 30px 20px; background: #fff; box-shadow: 0 -1px 0 rgba(2,22,47,.09); } .sheet .ag-compact .ag-state { margin: 4px 0 24px; } @media (hover: hover) { .ag-compact .ag-opt:hover input:not(:checked) + .ag-day { background: #E8E5DB; } .ag-compact .ag-opt:hover input:not(:checked) + .ag-time { background: #E7EBEF; } } @media (max-width: 400px) { .ag-compact .ag-day { min-height: 74px; } .ag-compact .ag-day .d2 { font-size: 25px; } .ag-compact .ag-time { font-size: 16px; } } @media (max-width: 359px) { .ag-compact .ag-time { font-size: 15px; padding-inline: 2px; } .ag-compact .ag-time small { font-size: 11px; } } /* — bloque copiado de _tools/reserva/bloque-reserva.css: no editar aquí */ /* ─── Reserva: datos y confirmación (11-nov-2026) ───────────────────────────────────────────────── MISMO bloque en css/site.css y css/producto.css: se edita en _tools/reserva/bloque-reserva.css y se pega con `python3 _tools/reserva/pegar.py`. Dos pasos más dentro de cada agenda (.ag): los datos y la confirmación. */ .ag.paso-datos > .ag-days-f, .ag.paso-datos > .ag-hours, .ag.paso-datos > .ag-tz, .ag.paso-datos > .ag-foot, .ag.paso-datos > .ag-state, .ag.paso-listo > .ag-days-f, .ag.paso-listo > .ag-hours, .ag.paso-listo > .ag-tz, .ag.paso-listo > .ag-foot, .ag.paso-listo > .ag-state { display: none; } .ag-datos[hidden], .ag-listo[hidden] { display: none; } .ag-datos { position: relative; } .ag-elegida { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; padding: 14px 16px; border-radius: 14px; } .ag-elegida-in { min-width: 0; } .ag-elegida-t { margin-top: 2px; font-size: 17px; font-weight: 700; letter-spacing: -.012em; line-height: 1.3; } .ag-elegida-x { margin-top: 2px; font-size: 14px; } .ag-cambiar { flex: none; appearance: none; -webkit-appearance: none; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 10px 4px; min-height: 44px; } .ag-datos-t { margin-top: 22px; font-size: 20px; font-weight: 700; letter-spacing: -.018em; line-height: 1.25; outline: none; } .ag-campos { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; } .ag-campo { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 700; letter-spacing: 0; } .ag-campo input { width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 12px; border: 1px solid #C9D2DC; background: #fff; color: var(--navy); font: 500 16px/1.3 var(--font); } .ag-campo input::placeholder { color: #8A96A3; } .ag-campo input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } .ag-campo input[aria-invalid="true"] { border-color: #B42318; box-shadow: inset 0 0 0 1px #B42318; } .ag-trampa { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } .ag-permiso { margin-top: 16px; display: flex; gap: 10px; align-items: flex-start; font-size: 14px; font-weight: 500; line-height: 1.45; cursor: pointer; } .ag-permiso input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); cursor: pointer; } .ag-permiso input[aria-invalid="true"] { outline: 2px solid #B42318; outline-offset: 2px; } .ag-permiso a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .ag-error { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: #FDECEC; color: #8A1C1C; font-size: 14px; font-weight: 600; line-height: 1.45; } .ag-error a { color: inherit; font-weight: 700; text-decoration: underline; } .ag-confirmar { margin-top: 18px; width: 100%; min-height: 56px; } .ag-confirmar:disabled { opacity: .72; cursor: progress; } .ag-nota { margin-top: 10px; font-size: 13px; text-align: center; } .ag-listo-in { display: flex; flex-direction: column; align-items: flex-start; } .ag-listo-ico { width: 56px; height: 56px; flex: none; } .ag-listo-ico circle { fill: none; stroke: var(--accent); stroke-width: 3; stroke-dasharray: 151; stroke-dashoffset: 151; animation: ag-trazo .6s var(--ease) forwards; } .ag-listo-ico path { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 36; stroke-dashoffset: 36; animation: ag-trazo .36s .42s var(--ease) forwards; } @keyframes ag-trazo { to { stroke-dashoffset: 0; } } .ag-listo-t { margin-top: 14px; font-size: clamp(25px, 3vw, 34px); font-weight: 700; letter-spacing: -.026em; line-height: 1.12; outline: none; } .ag-listo-s { margin-top: 6px; font-size: 17px; line-height: 1.45; } .ag-listo-cita { margin-top: 18px; width: 100%; padding: 18px 20px; border-radius: 16px; } .ag-listo-cita .k { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .ag-listo-cita .f { margin-top: 6px; font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; } .ag-listo-cita .h { margin-top: 3px; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; } .ag-listo-cita .x { margin-top: 2px; font-size: 14px; } .ag-listo-cita .x[hidden] { display: none; } .ag-listo-correo { margin-top: 14px; font-size: 15px; line-height: 1.5; } .ag-listo-correo b { overflow-wrap: anywhere; } .ag-listo-acc { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; } .ag-listo-ics { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .ag-pasos { list-style: none; margin: 22px 0 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .ag-pasos li { padding: 14px 14px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.35; } .ag-pasos li::before { content: ""; display: block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--accent); margin-bottom: 10px; } .ag-pasos li.hecho::before { background: var(--accent); } .ag-pasos b { display: block; font-size: 14px; letter-spacing: -.005em; } .ag-pasos span { display: block; margin-top: 2px; } .ag-listo-nota { margin-top: 14px; font-size: 13px; } @media (max-width: 700px) { .ag-campos { grid-template-columns: minmax(0, 1fr); } .ag-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ag-listo-acc .btn { width: 100%; } } @media (prefers-reduced-motion: reduce) { .ag-listo-ico circle, .ag-listo-ico path { animation: none; stroke-dashoffset: 0; } } /* Versión grande (fondo navy) */ .ag-grand .ag-elegida { background: rgba(255,255,255,.08); } .ag-grand .ag-sum-l, .ag-grand .ag-elegida-x, .ag-grand .ag-nota, .ag-grand .ag-listo-nota, .ag-grand .ag-listo-cita .x, .ag-grand .ag-pasos span, .ag-grand .ag-listo-correo, .ag-grand .ag-listo-s, .ag-grand .ag-campo, .ag-grand .ag-permiso { color: var(--on-d-2); } .ag-grand .ag-listo-correo b, .ag-grand .ag-pasos b { color: #fff; } .ag-grand .ag-cambiar, .ag-grand .ag-listo-ics { color: #fff; } .ag-grand .ag-campo input { border-color: transparent; } .ag-grand .ag-campo input:focus { outline-color: var(--celeste); border-color: transparent; } .ag-grand .ag-listo-cita, .ag-grand .ag-pasos li { background: rgba(255,255,255,.07); } .ag-grand .ag-listo-cita .k { color: var(--celeste); } .ag-grand .ag-listo-ico circle, .ag-grand .ag-listo-ico path { stroke: var(--celeste); } .ag-grand .ag-pasos li::before { border-color: var(--celeste); } .ag-grand .ag-pasos li.hecho::before { background: var(--celeste); } .ag-grand .ag-datos, .ag-grand .ag-listo { max-width: 760px; } /* Versión compacta (hoja blanca) */ .ag-compact .ag-elegida { background: #F2F4F6; } .ag-compact .ag-elegida-t, .ag-compact .ag-datos-t, .ag-compact .ag-listo-t { color: var(--navy); } .ag-compact .ag-elegida-x, .ag-compact .ag-nota, .ag-compact .ag-listo-nota, .ag-compact .ag-listo-cita .x, .ag-compact .ag-pasos span { color: var(--ink-3); } .ag-compact .ag-listo-s, .ag-compact .ag-listo-correo, .ag-compact .ag-permiso { color: var(--ink-2); } .ag-compact .ag-cambiar, .ag-compact .ag-listo-ics { color: var(--accent-ink); } .ag-compact .ag-campo { color: var(--ink-2); } .ag-compact .ag-listo-cita { background: #EAF4FB; color: var(--navy); } .ag-compact .ag-listo-cita .k { color: var(--accent-ink); } .ag-compact .ag-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ag-compact .ag-pasos li { background: #F2F4F6; color: var(--navy); } .ag-compact .ag-campos { grid-template-columns: minmax(0, 1fr); } .sheet .ag-compact .ag-datos, .sheet .ag-compact .ag-listo { padding-bottom: 24px; } /* */ /* ════════ Pie ════════════════════════════════════════════════════════════════════════════ */ .ftr { background: var(--navy); color: #fff; padding: 64px 0 calc(40px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,.08); position: relative; z-index: 2; } .ftr-in { display: grid; grid-template-columns: auto 1fr; gap: 28px 48px; align-items: center; } .ftr-logo { width: 170px; } .ftr-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 26px; } .ftr-nav a { color: rgba(255,255,255,.74); text-decoration: none; font-size: 15px; font-weight: 600; padding: 12px 0; } @media (hover: hover) { .ftr-nav a:hover { color: #fff; } } .ftr-c { grid-column: 1 / -1; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); font-size: 14px; color: rgba(255,255,255,.62); } @media (max-width: 700px) { .ftr-in { grid-template-columns: 1fr; } .ftr-nav { justify-content: flex-start; gap: 0 22px; } } /* ════════ Barra inferior (móvil) ═════════════════════════════════════════════════════════ */ .mbar { display: none; } @media (max-width: 860px) { .mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 38; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: var(--bar); padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom)); /* el botón se alinea con el margen de todo lo demás */ background: #fff; border-top: 1px solid rgba(2,22,47,.1); color: var(--ink); transition: transform .4s var(--ease), visibility 0s linear 0s; } .mbar-t { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .mbar-t b { font-size: 16px; letter-spacing: -.012em; } .mbar-t span { font-size: 14px; color: var(--ink-3); font-weight: 600; } .mbar .btn { min-height: 48px; padding: 0 20px; } .js .mbar.off { transform: translateY(105%); visibility: hidden; transition: transform .35s var(--ease-io), visibility 0s linear .35s; } } @media (max-width: 359px) { .mbar-t b { font-size: 15px; line-height: 1.2; } .mbar-t span { display: none; } .mbar .btn { padding: 0 16px; } } /* ════════ Hoja del agendador y menú ══════════════════════════════════════════════════════ */ dialog { padding: 0; border: 0; color: var(--ink); } .sheet { width: min(620px, calc(100% - 48px)); max-width: none; max-height: calc(100svh - 48px); border-radius: 24px; background: #fff; overflow: auto; overscroll-behavior: contain; box-shadow: 0 40px 90px -30px rgba(0,0,0,.55); } .sheet::backdrop { background: rgba(1, 13, 28, .62); } .sheet[open] { animation: sheetIn .5s var(--ease) both; } .sheet[open]::backdrop { animation: fade .4s ease both; } .sheet.closing { animation: sheetOut .26s ease both; } .sheet.closing::backdrop { animation: fade .26s ease reverse both; } @keyframes sheetIn { from { opacity: 0; transform: translateY(24px) scale(.985); } to { opacity: 1; transform: none; } } @keyframes sheetOut { to { opacity: 0; transform: translateY(16px) scale(.985); } } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } .sheet-in { padding: 28px 30px 0; } .sheet-grab { display: none; } .sheet-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; } .sheet-t { font-size: 30px; line-height: 1.08; letter-spacing: -.035em; } .sheet-s { margin-top: 6px; font-size: 15px; color: var(--ink-3); font-weight: 600; } .sheet-s span + span::before { content: "· "; } @media (max-width: 700px) { .sheet-s span { display: block; } .sheet-s span + span::before { content: none; } } .sheet-x { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -6px -8px 0 0; border: 0; border-radius: 50%; background: #F1F3F5; color: var(--navy); cursor: pointer; } .sheet-x .ico { width: 16px; height: 16px; } @media (hover: hover) { .sheet-x:hover { background: #E5E9ED; } } @media (max-width: 700px) { .sheet { width: 100%; max-width: 100%; margin: auto 0 0; max-height: 92svh; border-radius: 22px 22px 0 0; box-shadow: none; } .sheet[open] { animation: sheetUp .5s var(--ease) both; } .sheet.closing { animation: sheetDown .3s var(--ease-io) both; } .sheet-in { padding: 0 18px; } .sheet-grab { display: block; position: relative; width: 38px; height: 5px; border-radius: 3px; background: #D0D6DD; margin: 10px auto 14px; touch-action: none; cursor: grab; } .sheet-grab::before { content: ""; position: absolute; inset: -12px -60px -10px; } .sheet-hd { touch-action: none; } .sheet .ag-compact .ag-foot { margin-inline: -18px; padding: 10px 18px calc(12px + env(safe-area-inset-bottom)); gap: 10px; } .sheet .ag-compact .ag-sum { min-height: 0; padding: 0; background: none; border-radius: 0; } .sheet .ag-compact .ag-sum-t { font-size: 15.5px; line-height: 1.3; } .sheet .ag-compact .ag-sum-l { font-size: 12px; } .sheet .ag-compact .ag-cta { min-height: 52px; } .sheet .ag-compact .ag-state { margin-bottom: calc(18px + env(safe-area-inset-bottom)); } .sheet-t { font-size: 25px; } .sheet-s { font-size: 14px; } .sheet-hd { margin-bottom: 16px; } } /* Ventanas bajas (teléfono acostado): pie compacto en una fila; los días y la primera fila de horas a la vista */ @media (max-height: 500px) { .sheet { max-height: calc(100svh - 16px); } .sheet-in { padding-top: 16px; } .sheet-grab { margin: 6px auto 8px; } .sheet-hd { margin-bottom: 10px; } .sheet-t { font-size: 22px; } .sheet-s { display: none; } .sheet .ag-compact .ag-days { margin-top: 8px; } .sheet .ag-compact .ag-day { min-height: 62px; } .sheet .ag-compact .ag-hours { margin-top: 14px; } .sheet .ag-compact .ag-foot { flex-direction: row; align-items: center; gap: 16px; padding-top: 8px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); margin-top: 12px; } .sheet .ag-compact .ag-sum { flex: 1; min-width: 0; min-height: 0; padding: 0; background: none; } .sheet .ag-compact .ag-sum-l { display: none; } .sheet .ag-compact .ag-sum-t { font-size: 15px; } .sheet .ag-compact .ag-cta { width: auto; min-height: 48px; padding: 0 24px; } } .sheet.drag { animation: none; } .sheet.drag.closing { animation: sheetDown .28s var(--ease-io) both; } @keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } } @keyframes sheetDown { to { transform: translateY(100%); } } .menu { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; background: var(--navy); color: #fff; } .menu::backdrop { background: var(--navy); } .menu[open] { animation: fade .28s ease both; } .menu.closing { animation: fade .2s ease reverse both; } .menu-in { min-height: 100%; display: flex; flex-direction: column; padding: 0 var(--gut) calc(28px + env(safe-area-inset-bottom)); } .menu-hd { height: var(--hdr); display: flex; align-items: center; justify-content: space-between; } .menu-hd img { height: 19px; width: auto; } .sheet-x-d { background: rgba(255,255,255,.1); color: #fff; margin: 0 -6px 0 0; } .menu-nav { display: flex; flex-direction: column; margin: 24px 0 auto; } .menu-nav a { display: flex; align-items: center; min-height: 58px; font-size: 32px; font-weight: 700; letter-spacing: -.035em; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.1); } .menu .btn { margin-top: 32px; } html.locked, html.locked body { overflow: hidden; } /* ════════ Capa común de interacción (css/capa-apple.css y js/capa-apple.js) ═══════════════════ */ /* Los diálogos y las preguntas los mueve el resorte de la capa (html.ap-resorte): fuera las animaciones de CSS, que quedan solo como respaldo si la capa no carga. El velo sigue al resorte con --ap-velo. */ .ap-resorte .sheet[open], .ap-resorte .sheet.closing, .ap-resorte .menu[open], .ap-resorte .menu.closing, .ap-resorte .sheet[open]::backdrop, .ap-resorte .sheet.closing::backdrop, .ap-resorte .menu[open]::backdrop, .ap-resorte .menu.closing::backdrop { animation: none; } .ap-resorte .sheet::backdrop, .ap-resorte .menu::backdrop { opacity: var(--ap-velo, 1); } /* La agarradera y el encabezado de la hoja son una sola zona de arrastre; la barra que se ve es .sheet-grab. */ .sheet-asa { display: block; min-height: 0; cursor: auto; touch-action: auto; } .sheet-asa::before { content: none; } @media (max-width: 700px) { .sheet-asa { touch-action: none; cursor: grab; } } .ap-resorte .faq details::details-content { transition: none; } .ap-resorte .faq details[open]:not(.ap-abierta) summary::after { transform: rotate(90deg); } .ap-resorte .faq details.ap-abierta summary::after { transform: rotate(0); } .ap-resorte .faq-a { padding-bottom: 0; } .ap-resorte .faq-a::after { content: ""; display: block; height: 28px; } /* Texto pequeño de la interfaz (14 px o menos): espaciado algo positivo. Los rótulos de la película y de la coda van a cero, porque un espaciado positivo los parte en dos líneas en el portátil; las pantallas de ejemplo de la película y de la base (.app, .art, .cal-grid, .flow, .appr, .rep) conservan el suyo, medido para que quepan. */ :is(.hdr-nav a, .hero-meta, .film-nav time, .film-live-l, .film-pause, .cal-k, .src, .ag legend small, .ag-grp-t, .ag-tz, .ag-ok span, .ag-day .d1, .ag-day .d3, .ag-time small, .ag-sum-x, .ftr-c, .mbar-t span, .sheet-s) { letter-spacing: .01em; } :is(.film-live .film-bar-l, .cap-k, .coda time, .coda li) { letter-spacing: 0; } /* Las pantallas de ejemplo (teléfonos de la película y calendario) tienen alto fijo y su texto está medido para caber: conservan el interlineado y el espaciado que heredan, en lugar de los de la capa para el texto corrido. */ :where(.scr-in, .cal) :where(p, li, small) { line-height: inherit; letter-spacing: inherit; } /* Más contraste: textos secundarios, líneas y bordes más marcados, velo más denso y foco de 3 px. */ @media (prefers-contrast: more) { :root { --ink-2: #26323F; --ink-3: #2F3B48; --gris: #4A5866; --on-d-2: rgba(255,255,255,.94); --on-d-3: rgba(255,255,255,.88); --hair: rgba(2,22,47,.45); --hair-d: rgba(255,255,255,.5); } :focus-visible { outline-width: 3px; } .hdr { border-bottom-color: rgba(255,255,255,.5); } .hdr-nav a, .ftr-nav a, .ftr-c { color: #fff; } .film-nav a::before { background: rgba(255,255,255,.5); } .day .film-nav a, .film-pause, .coda li, .ag-grand .ag-day, .ag-grand .ag-time { border-color: rgba(255,255,255,.75); } .base-mods a { border-color: var(--navy); } .mbar { border-top-color: var(--navy); } .src { text-decoration-color: currentColor; } .sheet::backdrop { background: rgba(1, 13, 28, .88); } /* cada opción del agendador lleva el borde en su cara, que tiene las esquinas redondeadas */ .ag-opt.ap-pulsable { outline: none; } .ag-compact .ag-face { box-shadow: inset 0 0 0 1px var(--navy); } } /* Transparencia reducida: el velo de la hoja deja de dejar ver la página. */ @media (prefers-reduced-transparency: reduce) { .sheet::backdrop { background: rgba(1, 13, 28, .88); } } /* ════════ Revelados ══════════════════════════════════════════════════════════════════════ */ .js.motion .rv { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform 1.1s var(--ease); } .js.motion .rv.in { opacity: 1; transform: none; } .js.motion .stats .stat:nth-child(2) { transition-delay: .06s; } .js.motion .stats .stat:nth-child(3) { transition-delay: .12s; } .js.motion .logos li { opacity: 0; transform: translateY(12px); transition: opacity .8s ease, transform 1s var(--ease); } .js.motion .logos.in li { opacity: 1; transform: none; } .js.motion .logos li:nth-child(4n+2) { transition-delay: .05s; } .js.motion .logos li:nth-child(4n+3) { transition-delay: .1s; } .js.motion .logos li:nth-child(4n) { transition-delay: .15s; } /* Seguro: si el JS no terminó de arrancar, todo visible */ .safe .rv, .safe .logos li, .safe .rv .mask > span, .safe .exec *, .safe .flow *, .safe .base *, .safe .cal * { opacity: 1 !important; transform: none !important; } .safe .exec-1 { color: var(--gris) !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } .btn, .ag-face { transition: none; } } /* ════════ Impresión: todo visible, con sus fondos ════════════════════════════════════════ */ @media print { * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } body { padding: 0; } .hdr, .mbar, .skip, dialog, .film-bar, .agenda-mount, .stage-bands, .team-mark { display: none !important; } .rv, .logos li, .mask > span, [data-at], .exec *, .flow *, .base *, .cal-grid i { opacity: 1 !important; transform: none !important; animation: none !important; } .appr .appr-sp, .appr .appr-w1, .appr .appr-btns { opacity: 0 !important; visibility: hidden !important; } .appr .appr-ok, .appr .appr-w2, .appr .appr-done { opacity: 1 !important; transform: none !important; } .stage { padding-top: 40px; } .cap, .screen, .terms li, .stat, .era, .tp { break-inside: avoid; } .nojs { display: block !important; } .exec, .demo, .mkt, .trust, .sixty, .met, .team, .faq { margin-top: 0; border-radius: 0; } .faq details::details-content { block-size: auto !important; content-visibility: visible !important; } .coda li, .base-sys li, .sys-l, .base-sys::before { opacity: 1 !important; transform: none !important; } .rail { display: block !important; overflow: visible !important; padding: 0 !important; } .slide { margin-bottom: 28px; break-inside: avoid; } .day .film-nav { display: none !important; } .stat { min-height: 0 !important; } .sixty { min-height: 0; padding: 60px 0; } .sixty-n { position: relative; top: auto; bottom: auto; left: auto; margin: 36px 0 0 calc(var(--gut) - .05em); font-size: 200px; line-height: .8; } } /* ── 11-nov-2026 · SEO: enlaces a las páginas de solución (chips del final de la película, «Ver todas las preguntas» y mapa del pie). Aditivo: no cambia nada de lo que ya estaba. Lo aplica _tools/seo/portada.py. ── */ .coda li { position: relative; } .coda a { color: inherit; text-decoration: none; } .coda a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .coda a:focus-visible { outline: none; } .coda li:has(a:focus-visible) { outline: 2px solid var(--celeste); outline-offset: 3px; } @media (hover: hover) { .coda li:has(a):hover { border-color: rgba(255,255,255,.55); } } .faq-mas { margin-top: 18px; } .faq-mas .lnk { color: var(--accent-ink); } .ftr-sol { grid-column: 1 / -1; contain: inline-size; justify-content: flex-start; gap: 0 22px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.1); } .ftr-sol a { font-size: 14px; color: rgba(255,255,255,.66); }