/* ============================================================================= Cribattia — portal web Extiende el sistema de diseño de la app (src/styles/tokens.css): grafito neutro sin tinte + ámbar de marca. Aquí sí se permite decorar: es marketing. ========================================================================== */ :root { /* Base heredada de la app */ --bg: #101011; --bg-2: #171718; --panel: #1E1E20; --panel-2: #252528; --raised: #2C2C30; --line: #303034; --line-2: #3C3C42; --fg: #E4E4E6; --fg-2: #A0A0A6; --fg-3: #6E6E76; --amber: #EE9B2F; --amber-2: #F5A840; --amber-soft: rgba(238, 155, 47, .13); --ok: #4E9E7A; --run: #5B8DBE; --warn: #C9A227; --err: #C4544C; --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace; --r: 6px; --r-2: 10px; --r-3: 16px; --wrap: 1160px; --nav-h: 62px; --ease: cubic-bezier(.22, .61, .36, 1); } /* ------------------------------- Reset ---------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } /* overflow-y: scroll -> barra de scroll siempre reservada, así el contenido centrado (nav incluida) no se desplaza entre páginas cortas y largas. overflow-x: hidden aquí (no solo en body): al no ser el "visible", el recorte horizontal deja de heredarse desde y hay que fijarlo aquí. */ html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 18px); overflow-x: hidden; overflow-y: scroll; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } ul, ol { list-style: none; } table { border-collapse: collapse; width: 100%; } :focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 3px; } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .ic { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .ic .brand, symbol.brand { stroke: none; } .mono { font-family: var(--mono); font-variant-ligatures: none; } .amber { color: var(--amber); } .dim { color: var(--fg-3); } .sp { flex: 1; } code { font-family: var(--mono); font-size: .92em; } /* ------------------------------ Layout ---------------------------------- */ .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; } .wrap.narrow { max-width: 800px; } .sec { padding: 104px 0; position: relative; } .sec.alt { background: var(--bg-2); border-block: 1px solid var(--line); } .sec-head { max-width: 720px; margin: 0 auto 56px; text-align: center; } .kicker { display: inline-block; margin-bottom: 14px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--amber); } .sec-head h2 { margin-bottom: 14px; } .sec-head p { color: var(--fg-2); font-size: 16.5px; } h1, h2, h3 { line-height: 1.15; letter-spacing: -.025em; font-weight: 600; } h1 { font-size: clamp(38px, 5.6vw, 62px); font-weight: 700; letter-spacing: -.035em; } h2 { font-size: clamp(28px, 3.6vw, 42px); } h3 { font-size: 18px; letter-spacing: -.015em; } /* ------------------------------- Logo ----------------------------------- */ .mark { font-size: 20px; font-weight: 600; letter-spacing: -.005em; color: var(--fg); white-space: nowrap; } .mark b { color: var(--amber); font-weight: 700; } .mark.sm { font-size: 12px; } /* ------------------------------ Botones --------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--panel-2); color: var(--fg-2); font-size: 14.5px; font-weight: 500; white-space: nowrap; transition: background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease); } .btn .ic { font-size: 17px; } .btn:hover { background: var(--raised); color: var(--fg); transform: translateY(-1px); } .btn.pri { background: var(--amber); border-color: var(--amber); color: #1E1405; font-weight: 600; box-shadow: 0 4px 20px -6px rgba(238, 155, 47, .5); } .btn.pri:hover { background: var(--amber-2); border-color: var(--amber-2); box-shadow: 0 8px 28px -6px rgba(238, 155, 47, .6); } .btn.ghost { background: transparent; } .btn.ghost:hover { background: var(--panel-2); border-color: var(--fg-3); } .btn.lg { height: 50px; padding: 0 26px; font-size: 16px; border-radius: 8px; } .btn.wide { width: 100%; } .btn.is-disabled { background: var(--panel-2); border-color: var(--line); color: var(--fg-3); box-shadow: none; cursor: default; pointer-events: none; } /* -------------------------------- Nav ----------------------------------- */ .nav { position: sticky; top: 0; z-index: 100; height: var(--nav-h); background: rgba(16, 16, 17, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s, background .2s; } .nav.stuck { border-bottom-color: var(--line); background: rgba(16, 16, 17, .9); } .nav-in { display: flex; align-items: center; gap: 28px; height: var(--nav-h); } .nav-links { display: flex; align-items: center; gap: 26px; margin-left: 12px; } .nav-links a { font-size: 14.5px; color: var(--fg-2); position: relative; padding: 4px 0; transition: color .16s; } .nav-links a:hover, .nav-links a.on { color: var(--fg); } .nav-links a.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--amber); } /* "Mi cuenta" en la lista vive para el menú móvil; en escritorio va el botón de .nav-cta, así que se oculta aquí para no duplicarlo. */ .nav-links a[href="/cuenta"] { display: none; } .nav-cta { display: flex; align-items: center; gap: 10px; margin-left: auto; } .nav-cta .btn { height: 36px; padding: 0 15px; font-size: 14px; } .nav-burger { display: none; font-size: 24px; color: var(--fg-2); padding: 6px; } /* Cuenta: el botón "Mi cuenta" y el desplegable "Cerrar sesión" forman un único control partido. Lo monta main.js cuando hay sesión. */ .nav-acct { position: relative; display: flex; align-items: center; } .nav-acct .btn.ghost { border-top-right-radius: 0; border-bottom-right-radius: 0; } .nav-acct-toggle { height: 36px; width: 26px; padding: 0; line-height: 1; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-2); border-left: 0; border-radius: 0 var(--r) var(--r) 0; background: transparent; color: var(--fg-2); font-size: 11px; cursor: pointer; transition: background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease); } .nav-acct-toggle:hover, .nav-acct-toggle[aria-expanded="true"] { background: var(--panel-2); border-color: var(--fg-3); color: var(--fg); } .nav-acct-menu { position: absolute; top: calc(100% + 3px); right: 0; z-index: 101; min-width: 172px; padding: 6px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .55); } .nav-acct-menu button { display: flex; align-items: center; width: 100%; padding: 9px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--err); font: inherit; font-size: 14px; text-align: left; cursor: pointer; transition: background .14s var(--ease), color .14s var(--ease); } .nav-acct-menu button:hover { background: var(--panel-2); color: var(--err); } /* "Cerrar sesión" del menú móvil: oculto en escritorio (ahí va el desplegable). */ .nav-links-logout { display: none; } @media (max-width: 940px) { .nav-links { position: fixed; inset: var(--nav-h) 0 auto; margin: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--bg-2); border-bottom: 1px solid var(--line); padding: 8px 24px 18px; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; } .nav-links.open { opacity: 1; transform: none; pointer-events: auto; } .nav-links a { padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 16px; } .nav-links a[href="/cuenta"] { display: block; } .nav-burger { display: block; } .nav-links-logout { display: block; width: 100%; padding: 13px 0; font-size: 16px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--err); font-family: inherit; text-align: left; cursor: pointer; } } /* La cuenta va también en el menú móvil; el botón del header se oculta cuando no cabe junto al de "Descargar". */ @media (max-width: 560px) { .nav-cta .btn.ghost, .nav-cta .nav-acct { display: none; } } /* ------------------------------- Reveal --------------------------------- */ .js .reveal { opacity: 0; transform: translateY(22px); } .js .reveal.in { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); } .js .reveal.delay-1.in { transition-delay: .09s; } .js .reveal.delay-2.in { transition-delay: .18s; } @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } } /* ================================= HERO ================================== */ .hero { position: relative; padding: 66px 0 90px; overflow: hidden; } .hero-bg { position: absolute; inset: 0; pointer-events: none; } .hero-bg .glow { position: absolute; top: -320px; left: 50%; transform: translateX(-50%); width: 1100px; height: 760px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(238, 155, 47, .16) 0%, rgba(238, 155, 47, .05) 42%, transparent 70%); filter: blur(20px); } .hero-bg .grid { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(255, 255, 255, .028) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, .028) 1px, transparent 1px); background-size: 62px 62px; mask-image: radial-gradient(ellipse 90% 60% at 50% 20%, #000 25%, transparent 78%); -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 20%, #000 25%, transparent 78%); } .hero-in { position: relative; text-align: center; } .pill { display: inline-flex; align-items: center; gap: 9px; height: 30px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--panel); font-family: var(--mono); font-size: 11.5px; color: var(--fg-2); margin-bottom: 26px; } .pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); flex: none; box-shadow: 0 0 0 3px rgba(78, 158, 122, .18); } .hero h1 { margin-bottom: 22px; } .lead { max-width: 640px; margin: 0 auto; color: var(--fg-2); font-size: 18px; line-height: 1.62; } .lead b { color: var(--fg); font-weight: 500; } .lead.sm { font-size: 16.5px; margin: 0 0 26px; } .hero-actions { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; justify-content: center; } .hero-actions.center { justify-content: center; } .hero-note { margin-top: 18px; font-size: 13px; color: var(--fg-3); } /* ---------------------------- Franja de datos --------------------------- */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 88px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-2); overflow: hidden; } .stats li { background: var(--bg-2); padding: 24px 18px; text-align: center; } .stats b { display: block; font-family: var(--mono); font-size: 34px; font-weight: 600; color: var(--amber); line-height: 1.1; letter-spacing: -.03em; } .stats span { display: block; margin-top: 6px; font-size: 13px; color: var(--fg-3); } @media (max-width: 720px) { .stats { grid-template-columns: repeat(2, 1fr); } } /* =========================== MAQUETA DE LA APP =========================== */ .hero-shot { position: relative; margin-top: 62px; } .shot-glow { position: absolute; inset: 12% 6% -8%; z-index: -1; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(238, 155, 47, .16), transparent 68%); filter: blur(60px); } .win { border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; background: var(--bg-2); text-align: left; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .03); font-size: 12px; } .win-bar { display: flex; align-items: center; justify-content: center; height: 28px; background: var(--bg-2); border-bottom: 1px solid var(--line); position: relative; } .win-bar::before { content: ''; position: absolute; left: 12px; width: 38px; height: 8px; border-radius: 99px; background: radial-gradient(circle 4px at 4px 4px, #3C3C42 98%, transparent), radial-gradient(circle 4px at 19px 4px, #3C3C42 98%, transparent), radial-gradient(circle 4px at 34px 4px, #3C3C42 98%, transparent); } .win-title { font-size: 11px; color: var(--fg-3); } .app-top { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; background: var(--panel); border-bottom: 1px solid var(--line); } .chip { font-size: 10px; color: var(--fg-3); border: 1px solid var(--line-2); border-radius: 999px; padding: 2px 8px; } .ring { position: relative; width: 28px; height: 28px; display: grid; place-items: center; flex: none; } .ring svg { position: absolute; inset: 0; width: 28px; height: 28px; } .ring .rt { fill: none; stroke: var(--line); stroke-width: 2.5; } .ring .ra { fill: none; stroke: var(--amber); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 58 85; transform: rotate(-90deg); transform-origin: 50% 50%; } .ring .av { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-2); border: 1px solid var(--line-2); font-family: var(--mono); font-size: 9px; font-style: normal; color: var(--fg-2); } .app-body { display: grid; grid-template-columns: 152px minmax(0, 1fr); min-height: 430px; } .app-side { background: var(--panel); border-right: 1px solid var(--line); padding: 9px 7px; display: flex; flex-direction: column; gap: 1px; } .grp { font-family: var(--mono); font-size: 9px; letter-spacing: .11em; text-transform: uppercase; color: var(--fg-3); padding: 9px 7px 4px; } .item { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 8px; border-radius: 5px; color: var(--fg-2); font-size: 11.5px; } .item .ic { font-size: 13px; color: var(--fg-3); } .item.on { background: var(--raised); color: var(--fg); } .item .n { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--fg-3); } .tdot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; display: inline-block; } .app-main { display: flex; flex-direction: column; min-width: 0; } .app-titlebar { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; background: var(--panel); border-bottom: 1px solid var(--line); min-width: 0; } .crumb, .csep { font-size: 11.5px; color: var(--fg-3); flex: none; } .cnow { font-size: 12.5px; font-weight: 600; color: var(--fg); flex: none; } .app-titlebar .sub { margin-left: auto; font-size: 10px; color: var(--fg-3); flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-actionbar { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; background: var(--panel-2); border-bottom: 1px solid var(--line); } .mini { font-size: 10.5px; color: var(--fg-2); height: 22px; padding: 0 9px; display: inline-flex; align-items: center; border-radius: 5px; border: 1px solid var(--line-2); background: var(--panel-2); white-space: nowrap; } .mini.on { background: var(--raised); color: var(--fg); } .app-editor { flex: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) 9px minmax(0, 1fr); gap: 0; padding: 12px 14px 14px; min-height: 0; } .ed-left { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .ed-split { position: relative; } .ed-split::before { content: ''; position: absolute; top: 4px; bottom: 4px; left: 50%; width: 3px; transform: translateX(-50%); border-radius: 2px; background: var(--line); } .ed-right { display: flex; flex-direction: column; gap: 8px; min-width: 0; } /* -------- Fotogramas simulados (CSS art, no hay capturas del producto) ---- */ .shot, .sthumb, .mgrid i { position: relative; overflow: hidden; background: #0B0B0C; } .shot { aspect-ratio: 16 / 9; border-radius: 6px; border: 1px solid var(--line); } .shot::after, .sthumb::after, .mgrid i::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 120% 80% at 50% 40%, transparent 30%, rgba(0, 0, 0, .55) 100%); } .shot-ice { background: linear-gradient(180deg, #7FA8C4 0%, #A9C6D8 34%, #E3EDF2 35%, #C9D9E2 62%, #8FA9B8 100%), #8FA9B8; } .shot-sea { background: linear-gradient(180deg, #2E4A5E 0%, #3E6580 40%, #6E93A8 41%, #23394A 100%), #23394A; } .shot-warm { background: linear-gradient(180deg, #2A1E1A 0%, #8A4A20 44%, #EE9B2F 52%, #C4682A 62%, #2B1D16 100%), #C4682A; } .shot-cliff { background: linear-gradient(115deg, #26262A 0%, #4A4A52 38%, #9B9BA4 52%, #35353C 72%, #1B1B1F 100%), #35353C; } .shot-night { background: linear-gradient(180deg, #0D1420 0%, #16324A 30%, #2E7F6E 44%, #4E9E7A 50%, #10202E 74%, #080C12 100%), #10202E; } .ed-video { display: flex; flex-direction: column; gap: 5px; } .shot .tc { position: absolute; z-index: 2; left: 8px; top: 8px; background: rgba(0, 0, 0, .68); color: #fff; font-size: 9.5px; padding: 2px 6px; border-radius: 3px; } .shot .pbtn { position: absolute; z-index: 2; inset: 0; margin: auto; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(16, 16, 17, .55); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(3px); color: #fff; font-size: 20px; } .shot.big .pbtn { width: 62px; height: 62px; font-size: 28px; } .shot.big .tc { font-size: 12px; left: 12px; top: 12px; padding: 3px 9px; } .ed-scrub { position: relative; height: 4px; border-radius: 2px; background: var(--line-2); } .ed-scrub i { display: block; height: 100%; border-radius: 2px; background: var(--amber); } .ed-scrub u { position: absolute; top: -3px; width: 2px; height: 10px; background: var(--fg); border-radius: 1px; transform: translateX(-1px); } .ed-scrub.big { height: 6px; border-radius: 3px; } .ed-scrub.big u { top: -4px; width: 3px; height: 14px; } .ed-range { position: relative; height: 6px; border-radius: 3px; background: var(--line-2); margin-top: 3px; } .ed-range i { position: absolute; left: 22%; right: 44%; top: 0; bottom: 0; background: var(--amber); border-radius: 3px; } .ed-range b { position: absolute; top: 50%; width: 11px; height: 11px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--fg); border: 2px solid var(--panel); box-shadow: 0 0 0 1px var(--amber); } .ed-range .h1 { left: 22%; } .ed-range .h2 { left: 56%; } /* Panel "Procesar" de la maqueta */ .proc { display: flex; flex-direction: column; gap: 6px; margin-top: 3px; } .proc-h { display: flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 9px; letter-spacing: .09em; text-transform: uppercase; color: var(--fg-3); } .proc-h .ic { font-size: 12px; color: var(--amber); } .proc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .pcard { border: 1px solid var(--line); border-radius: 7px; background: var(--panel); padding: 8px 9px; display: flex; flex-direction: column; gap: 7px; } .pcard.done { border-color: color-mix(in srgb, var(--ok) 42%, var(--line)); } .pc-t { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--fg); } .pc-t .ic { font-size: 13px; color: var(--amber); } .pc-b { display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 24px; padding: 0 8px; border-radius: 5px; border: 1px solid var(--line-2); background: var(--panel-2); font-size: 10.5px; font-weight: 500; color: var(--fg-2); } .pc-b em { font-style: normal; font-size: 9px; background: var(--bg); color: var(--fg-3); border-radius: 999px; padding: 1px 6px; } .pc-b.amber { background: var(--amber); border-color: var(--amber); color: #1E1405; font-weight: 600; } .pc-b.amber em { background: rgba(0, 0, 0, .18); color: #1E1405; } .ed-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); padding-bottom: 5px; } .ed-tabs span { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--fg-3); padding: 4px 7px; border-radius: 5px; } .ed-tabs .ic { font-size: 12px; } .ed-tabs span.on { background: var(--raised); color: var(--fg); } .ed-panel { display: flex; flex-direction: column; gap: 3px; overflow: hidden; } /* Filas de escena / recorte */ .srow, .crow { display: flex; align-items: center; gap: 9px; padding: 6px 7px; border-radius: 6px; border: 1px solid transparent; } .srow.on, .crow.on { background: var(--amber-soft); border-color: color-mix(in srgb, var(--amber) 40%, transparent); } .srow:not(.on):hover, .crow:not(.on):hover { background: var(--panel-2); } .sthumb { width: 46px; height: 26px; border-radius: 3px; flex: none; } .st { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 1px; } .st b { font-size: 11.5px; font-weight: 600; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .st em { font-style: normal; font-size: 10.5px; color: var(--fg-3); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stc { font-size: 10px; color: var(--fg-3); flex: none; } /* ============================ FUNCIONALIDADES ============================ */ .feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 16px; } .feat { border: 1px solid var(--line); border-radius: var(--r-2); background: var(--panel); padding: 24px 22px 26px; position: relative; overflow: hidden; transition: border-color .2s var(--ease), transform .2s var(--ease), background .2s var(--ease); } .feat::before { content: ''; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(238, 155, 47, .5), transparent); opacity: 0; transition: opacity .25s; } .feat:hover { border-color: var(--line-2); background: var(--panel-2); transform: translateY(-3px); } .feat:hover::before { opacity: 1; } .fico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 9px; background: var(--amber-soft); color: var(--amber); font-size: 21px; margin-bottom: 16px; border: 1px solid color-mix(in srgb, var(--amber) 22%, transparent); } .feat h3 { margin-bottom: 8px; } .feat p { font-size: 14.5px; color: var(--fg-2); line-height: 1.55; } .feat .mono { font-size: 12.5px; color: var(--fg-3); } /* ============================== EL EDITOR ================================ */ .editor-demo { border: 1px solid var(--line-2); border-radius: var(--r-3); overflow: hidden; background: var(--panel); box-shadow: 0 30px 70px -34px rgba(0, 0, 0, .9); } .ed-nav { display: flex; gap: 4px; padding: 10px 12px; background: var(--panel-2); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; } .ed-nav::-webkit-scrollbar { display: none; } .ed-nav button { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; height: 32px; padding: 0 13px; border-radius: var(--r); font-size: 13.5px; color: var(--fg-3); border: 1px solid transparent; transition: background .16s, color .16s, border-color .16s; } .ed-nav .ic { font-size: 15px; } .ed-nav button:hover { color: var(--fg-2); background: var(--raised); } .ed-nav button.on { background: var(--amber-soft); color: var(--amber); border-color: color-mix(in srgb, var(--amber) 34%, transparent); } .ed-stage { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 20px; padding: 20px; min-height: 400px; } .ed-stage-video { display: flex; flex-direction: column; gap: 8px; } .ed-stage-panel { border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg-2); padding: 12px; overflow: hidden; } .dpanel { display: none; flex-direction: column; gap: 4px; } .dpanel.on { display: flex; animation: fade .3s var(--ease); } @keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .dhint { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; color: var(--fg-3); } /* Ficha */ .fsec { border-bottom: 1px solid var(--line); padding: 4px 0 10px; margin-bottom: 8px; } .fsec:last-of-type { border-bottom: 0; } .fsec > b { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); font-weight: 500; } .fsec .ic { font-size: 13px; } .fsec dl { display: grid; grid-template-columns: 96px 1fr; gap: 6px 10px; } .fsec dt { font-size: 12.5px; color: var(--fg-3); } .fsec dd { font-size: 12.5px; color: var(--fg); display: flex; align-items: center; gap: 6px; } .sdot { width: 7px; height: 7px; border-radius: 50%; flex: none; } .sdot.ok { background: var(--ok); } /* Transcripción */ .trow { display: grid; grid-template-columns: 58px 1fr; gap: 10px; align-items: start; padding: 7px 8px; border-radius: 6px; border: 1px solid transparent; } .trow .mono { font-size: 11px; color: var(--fg-3); padding-top: 1px; } .trow span:last-child { font-size: 13px; color: var(--fg-2); line-height: 1.5; } .trow b { color: var(--amber); font-weight: 600; } .trow.on { background: var(--amber-soft); border-color: color-mix(in srgb, var(--amber) 36%, transparent); } .trow.on span:last-child { color: var(--fg); } .trow:not(.on):hover { background: var(--panel-2); } /* Miniaturas */ .mgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .mgrid i { aspect-ratio: 16 / 9; border-radius: 4px; display: block; } .ed-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 20px; } .ed-notes div { border-left: 2px solid var(--amber); padding: 4px 0 4px 16px; } .ed-notes b { display: block; font-size: 14.5px; margin-bottom: 3px; } .ed-notes span { font-size: 13.5px; color: var(--fg-3); line-height: 1.5; } /* ============================= AUTOMATISMOS ============================== */ .autos { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 20px; } .auto-col { border: 1px solid var(--line); border-radius: var(--r-3); background: var(--panel); padding: 24px; display: flex; flex-direction: column; gap: 12px; } .auto-col.ia { border-color: color-mix(in srgb, var(--amber) 32%, var(--line)); background: linear-gradient(180deg, rgba(238, 155, 47, .06), transparent 42%), var(--panel); } .auto-h { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; padding-bottom: 14px; border-bottom: 1px solid var(--line); } .auto-h .ic { font-size: 19px; color: var(--amber); } .auto-col.free .auto-h .ic { color: var(--fg-2); } .tagline { margin-left: auto; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--amber); background: var(--amber-soft); border-radius: 999px; padding: 3px 9px; border: 1px solid color-mix(in srgb, var(--amber) 26%, transparent); } .tagline.ok { color: var(--ok); background: rgba(78, 158, 122, .12); border-color: rgba(78, 158, 122, .3); } .acard { display: grid; grid-template-columns: 38px 1fr auto; gap: 14px; align-items: start; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg-2); } .aico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; background: var(--panel-2); color: var(--fg-2); font-size: 19px; border: 1px solid var(--line-2); } .auto-col.ia .aico { background: var(--amber-soft); color: var(--amber); border-color: color-mix(in srgb, var(--amber) 24%, transparent); } .acard h3 { font-size: 15px; margin-bottom: 4px; } .acard p { font-size: 13.5px; color: var(--fg-3); line-height: 1.5; } .cost { font-size: 15px; font-weight: 600; color: var(--amber); white-space: nowrap; background: var(--amber-soft); border-radius: 6px; padding: 4px 10px; border: 1px solid color-mix(in srgb, var(--amber) 26%, transparent); } .cost em { font-style: normal; font-size: 10px; color: var(--fg-3); } .cost.ok { color: var(--ok); background: rgba(78, 158, 122, .12); border-color: rgba(78, 158, 122, .28); } .auto-foot { margin-top: auto; padding-top: 6px; font-size: 13px; color: var(--fg-3); line-height: 1.55; } .auto-foot b { color: var(--fg-2); } /* ============================== PRIVACIDAD =============================== */ .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: 56px; align-items: center; } @media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 40px; } } .split h2 { margin-bottom: 16px; } /* Las listas con icono usan padding + icono absoluto, no grid: así el texto puede llevar //dentro sin que cada inline se convierta en un elemento de rejilla por su cuenta. */ .checks { display: flex; flex-direction: column; gap: 12px; } .checks li { position: relative; padding-left: 32px; font-size: 14.5px; color: var(--fg-2); line-height: 1.5; } .checks .ic { position: absolute; left: 0; top: 3px; font-size: 15px; color: var(--ok); background: rgba(78, 158, 122, .12); border-radius: 50%; width: 20px; height: 20px; padding: 3px; } .checks em { font-style: italic; color: var(--fg); } .flow { display: flex; flex-direction: column; gap: 6px; } .fnode { display: grid; grid-template-columns: 42px 1fr; column-gap: 14px; row-gap: 3px; align-items: center; border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--panel); padding: 16px 18px; } /* El icono ocupa las dos filas (título + descripción) y queda centrado. */ .fnode .fico { margin: 0; width: 42px; height: 42px; grid-row: 1 / 3; align-self: center; } .fnode b { grid-column: 2; grid-row: 1; font-size: 15px; align-self: end; } .fnode em { grid-column: 2; grid-row: 2; align-self: start; font-style: normal; font-size: 13px; color: var(--fg-3); line-height: 1.45; } .fnode.ghost { border-style: dashed; background: transparent; } .fnode.ghost .fico { background: var(--panel-2); color: var(--fg-3); border-color: var(--line); } .farrow { display: flex; align-items: center; gap: 10px; padding-left: 20px; font-size: 11px; color: var(--fg-3); } .farrow .ic { font-size: 17px; color: var(--amber); } .farrow.rev .ic { transform: rotate(180deg); } /* =============================== DESCARGAS =============================== */ .dl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; } .dl { position: relative; text-align: center; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--panel); padding: 34px 24px 24px; transition: border-color .2s var(--ease), transform .2s var(--ease); } .dl:hover { border-color: var(--line-2); transform: translateY(-3px); } .dl.is-you { border-color: color-mix(in srgb, var(--amber) 46%, transparent); background: linear-gradient(180deg, rgba(238, 155, 47, .07), transparent 44%), var(--panel); } .dl-badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; background: var(--amber); color: #1E1405; font-weight: 600; border-radius: 999px; padding: 3px 12px; white-space: nowrap; } .dl-ico { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line-2); color: var(--fg); font-size: 30px; } .dl.is-you .dl-ico { background: var(--amber-soft); border-color: color-mix(in srgb, var(--amber) 30%, transparent); color: var(--amber); } .dl h3 { font-size: 21px; margin-bottom: 6px; } .dl-meta { font-size: 12px; color: var(--fg-3); margin-bottom: 18px; } .dl-req { margin-top: 12px; font-size: 12.5px; color: var(--fg-3); } .dl-more { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; text-align: left; } .dl-more summary { display: flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; list-style: none; font-size: 13px; font-weight: 500; color: var(--fg-2); } .dl-more summary::-webkit-details-marker { display: none; } .dl-more summary:hover { color: var(--amber); } .dl-more summary .ic { font-size: 16px; transition: transform .22s var(--ease); } .dl-more[open] summary .ic { transform: rotate(180deg); } .dl-more ul { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; } .dl-more li { position: relative; padding-left: 24px; font-size: 13px; color: var(--fg-2); line-height: 1.45; } .dl-more li .ic { position: absolute; left: 0; top: 3px; font-size: 14px; color: var(--ok); } .dl-note { margin-top: 14px; padding: 10px 12px; border-radius: var(--r); background: color-mix(in srgb, var(--warn) 10%, var(--panel-2)); border: 1px solid color-mix(in srgb, var(--warn) 28%, transparent); font-size: 12.5px; color: var(--fg-2); line-height: 1.5; } .dl-note b { color: var(--fg); } .dl-note code { color: var(--amber); font-size: 12px; } /* ------------------------- Tablas comparativas -------------------------- */ .cmp { margin-top: 56px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--panel); overflow: hidden; } .cmp-head { padding: 24px 26px 18px; border-bottom: 1px solid var(--line); } .cmp-head h3 { font-size: 20px; margin-bottom: 6px; } .cmp-head p { font-size: 14px; color: var(--fg-2); } .table { font-size: 14px; } .table th, .table td { padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--line); } .table thead th { font-size: 12px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-3); background: var(--panel-2); white-space: nowrap; } .table thead th .ic { display: inline-block; vertical-align: -2px; margin-right: 7px; font-size: 15px; } .table td:first-child { color: var(--fg-2); } .table th:not(:first-child), .table td:not(:first-child) { text-align: center; width: 20%; } .table tbody tr:last-child td { border-bottom: 0; } .table tbody tr:hover td { background: var(--panel-2); } .table td.y { color: var(--ok); font-weight: 500; } .table td.n { color: var(--fg-3); } .table td.mono { font-size: 13px; color: var(--fg); } .table td em { display: block; font-size: 11px; margin-top: 2px; font-style: normal; } /* En la columna de concepto el matiz («1× min») va en la misma línea. */ .table td:first-child em { display: inline; margin: 0 0 0 5px; } .plans-table th.hl, .plans-table td.hl { background: var(--amber-soft); } .plans-table thead th.hl { color: var(--amber); } .plans-table tbody tr:hover td.hl { background: color-mix(in srgb, var(--amber) 18%, var(--panel-2)); } .cmp-foot { padding: 18px 26px; font-size: 14px; color: var(--fg-2); border-top: 1px solid var(--line); } .cmp-foot a { color: var(--amber); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; } .cmp-foot a:hover { text-decoration: underline; } .cmp-foot .ic { font-size: 15px; } /* --------------------------- Historial de versiones ---------------------- */ .hist-wrap { max-height: 430px; overflow-y: auto; } .hist-table td:not(:first-child), .hist-table th:not(:first-child) { text-align: center; width: auto; } .hist-table td:first-child, .hist-table th:first-child { white-space: nowrap; } .hist-table td.notes { text-align: left; color: var(--fg-2); } .hist-ver { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); color: var(--fg); } .hist-badge { font-size: 10px; letter-spacing: .05em; text-transform: uppercase; font-weight: 600; color: var(--amber); background: var(--amber-soft); border-radius: 999px; padding: 2px 8px; } .hist-date { display: block; font-size: 11px; color: var(--fg-3); margin-top: 2px; } .hist-dl { color: var(--fg-2); font-size: 18px; } .hist-dl:hover { color: var(--amber); } .hist-dl.n { color: var(--line-2); pointer-events: none; } @media (max-width: 680px) { .cmp { overflow-x: auto; } .table { min-width: 560px; } } /* ================================ PRECIOS ================================ */ /* Bloque del nivel gratuito: la app no se paga, solo los minutos de IA. */ .freebox { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 36px; align-items: center; border: 1px solid color-mix(in srgb, var(--amber) 34%, var(--line)); border-radius: var(--r-3); background: linear-gradient(120deg, rgba(238, 155, 47, .09), transparent 58%), var(--panel); padding: 32px 34px; } .freebox-main .pill { margin-bottom: 16px; } .freebox-main h3 { font-size: clamp(22px, 2.6vw, 30px); margin-bottom: 10px; } .freebox-main p { font-size: 15px; color: var(--fg-2); line-height: 1.6; max-width: 58ch; } .freebox-side { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding-left: 34px; border-left: 1px solid var(--line); } .freebox-side .price { margin: 0 0 6px; justify-content: center; } .freebox-side .price b { font-size: 54px; } .freebox-note { font-size: 12px; color: var(--fg-3); text-align: center; } @media (max-width: 820px) { .freebox { grid-template-columns: 1fr; gap: 24px; padding: 26px 22px; } .freebox-side { padding-left: 0; padding-top: 22px; border-left: 0; border-top: 1px solid var(--line); } } /* Cabecera de los packs */ .packs-head { text-align: center; margin: 64px 0 34px; } .packs-head h3 { font-size: clamp(21px, 2.4vw, 27px); margin-bottom: 8px; } .packs-head p { font-size: 15px; color: var(--fg-2); max-width: 58ch; margin: 0 auto; } .plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; align-items: start; } .plan { position: relative; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--panel); padding: 30px 26px 28px; transition: border-color .2s var(--ease), transform .2s var(--ease); } .plan:hover { border-color: var(--line-2); } .plan.best { border-color: var(--amber); background: linear-gradient(180deg, rgba(238, 155, 47, .08), transparent 38%), var(--panel); box-shadow: 0 24px 60px -34px rgba(238, 155, 47, .55); } .plan-flag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; background: var(--amber); color: #1E1405; font-weight: 600; border-radius: 999px; padding: 4px 14px; white-space: nowrap; } .plan h3 { font-size: 20px; margin-bottom: 6px; } .plan-sub { font-size: 13.5px; color: var(--fg-3); line-height: 1.5; min-height: 42px; } .price { display: flex; align-items: baseline; gap: 6px; margin: 18px 0 4px; } .price b { font-size: 46px; font-weight: 600; letter-spacing: -.04em; color: var(--fg); line-height: 1; } /* El símbolo va fuera del monoespaciado: un espacio en IBM Plex Mono a 46px abre un hueco enorme entre la cifra y el €. */ .price .cur { font-style: normal; font-size: 27px; font-weight: 500; color: var(--fg-2); margin-left: -2px; } .price > span { font-size: 14px; color: var(--fg-3); } .price-note { font-size: 12px; color: var(--fg-3); min-height: 18px; margin-bottom: 6px; } .plan .btn { margin-top: 16px; height: 44px; } .plan-list { margin-top: 24px; display: flex; flex-direction: column; gap: 11px; } .plan-list li { position: relative; padding-left: 26px; font-size: 14px; color: var(--fg-2); line-height: 1.45; } .plan-list b { color: var(--fg); font-weight: 600; } .plan-list .ic { position: absolute; left: 0; top: 3px; font-size: 15px; color: var(--ok); } .plan-list li.off { color: var(--fg-3); } .plan-list li.off .ic { color: var(--fg-3); } .plan.best .plan-list .ic { color: var(--amber); } .plans-extra { margin-top: 26px; text-align: center; font-size: 14px; color: var(--fg-3); line-height: 1.6; } .plans-extra b { color: var(--fg-2); } /* ================================== FAQ ================================== */ .faq { display: flex; flex-direction: column; gap: 10px; } .faq details { border: 1px solid var(--line); border-radius: var(--r-2); background: var(--panel); transition: border-color .2s; } .faq details[open] { border-color: var(--line-2); } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; padding: 18px 22px; font-size: 15.5px; font-weight: 500; color: var(--fg); } .faq summary::-webkit-details-marker { display: none; } .faq summary:hover { color: var(--amber); } .faq summary .ic { font-size: 19px; color: var(--fg-3); transition: transform .22s var(--ease); } .faq details[open] summary .ic { transform: rotate(180deg); color: var(--amber); } .faq p { padding: 0 22px 20px; font-size: 14.5px; color: var(--fg-2); line-height: 1.65; max-width: 66ch; } .faq a { color: var(--amber); } .faq a:hover { text-decoration: underline; } /* ================================= CTA =================================== */ .cta { position: relative; padding: 110px 0; overflow: hidden; border-top: 1px solid var(--line); } .cta-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 100% at 50% 130%, rgba(238, 155, 47, .2), transparent 62%), var(--bg-2); } .cta-in { position: relative; text-align: center; } .cta h2 { margin-bottom: 16px; } .cta p { color: var(--fg-2); font-size: 17px; } /* ================================ FOOTER ================================= */ .foot { border-top: 1px solid var(--line); background: var(--bg); padding: 56px 0 26px; } .foot-in { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 2fr); gap: 40px; } .foot-brand p { margin-top: 12px; font-size: 13.5px; color: var(--fg-3); max-width: 30ch; line-height: 1.55; } .foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .foot-cols div { display: flex; flex-direction: column; gap: 10px; } .foot-cols b { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); font-weight: 500; margin-bottom: 2px; } .foot-cols a { font-size: 14px; color: var(--fg-2); } .foot-cols a:hover { color: var(--amber); } .foot-bot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--fg-3); } @media (max-width: 760px) { .foot-in { grid-template-columns: 1fr; gap: 34px; } .foot-cols { grid-template-columns: repeat(2, 1fr); } } /* ============================== RESPONSIVE =============================== */ @media (max-width: 1000px) { .ed-stage { grid-template-columns: 1fr; } .app-body { grid-template-columns: 1fr; } .app-side { display: none; } } @media (max-width: 820px) { .sec { padding: 78px 0; } .hero { padding: 46px 0 70px; } .app-editor { grid-template-columns: 1fr; gap: 12px; } .ed-split { display: none; } .app-titlebar .sub { display: none; } .stats { margin-top: 62px; } .stats b { font-size: 28px; } } @media (max-width: 560px) { .wrap { padding: 0 18px; } .hero-actions .btn { width: 100%; } .win { font-size: 11px; } .proc-row { grid-template-columns: 1fr; } .mgrid { grid-template-columns: repeat(3, 1fr); } .acard { grid-template-columns: 34px 1fr; } .acard .cost { grid-column: 2; justify-self: start; } .fsec dl { grid-template-columns: 84px 1fr; } .price b { font-size: 40px; } }