/* ===================================================================== KingsTV — sistema de diseño (tema oscuro/claro, blanco y negro) Escrito desde cero. Sin color de marca: el contraste blanco/negro ES el acento. Tipografía: Cormorant Garamond (display) + Work Sans (cuerpo) + IBM Plex Mono (datos / lecturas de señal). Dos temas viven en las mismas variables: el atributo data-theme en decide cuál set de valores se usa. Por defecto: oscuro. ===================================================================== */ :root, :root[data-theme="dark"]{ /* Le dice al navegador explícitamente "esto YA está en oscuro" — sin esto, el modo oscuro forzado de Android/Chrome puede intentar re-colorear el sitio por su cuenta y termina invirtiendo solo una parte (típicamente el texto de los botones, no el fondo), dejando texto invisible. Esta es la causa más común de "no se ve el texto del botón" en celulares Android. */ color-scheme: dark; --bg: #000000; --bg-2: #0c0c0c; --bg-3: #161616; --border: rgba(255,255,255,.14); --border-2: rgba(255,255,255,.22); --ink: #FFFFFF; --ink-dim: #A6A6A6; --ink-faint: #8C8C8C; --accent: #FFFFFF; /* el "color" de marca es blanco sobre negro */ --accent-ink: #000000; /* texto/icono sobre superficies de acento */ --live: #FFFFFF; --shadow-card: 0 18px 40px -20px rgba(0,0,0,.85); } :root[data-theme="light"]{ color-scheme: light; --bg: #FFFFFF; --bg-2: #F4F4F4; --bg-3: #ECECEC; --border: rgba(0,0,0,.14); --border-2: rgba(0,0,0,.24); --ink: #0A0A0A; --ink-dim: #4A4A4A; --ink-faint: #6E6E6E; --accent: #0A0A0A; /* en claro, el acento es negro sobre blanco */ --accent-ink: #FFFFFF; --live: #0A0A0A; --shadow-card: 0 18px 36px -22px rgba(0,0,0,.22); } :root{ /* type */ --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-body: 'Work Sans', system-ui, -apple-system, Segoe UI, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* layout */ --container: 1160px; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; /* feedback de formularios: única excepción de color, son señales de sistema (éxito/error), no parte de la identidad de marca */ --ok: #3FAE6A; --ok-bg: rgba(63,174,106,.14); --bad: #E5484D; --bad-bg:rgba(229,72,77,.14); } /* ---------- reset ---------- */ *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } } body{ margin:0; } img,svg{ display:block; max-width:100%; } a{ color:inherit; text-decoration:none; } ul{ margin:0; padding:0; list-style:none; } button{ font:inherit; appearance:none; -webkit-appearance:none; -moz-appearance:none; background:none; border:none; } input,textarea,select{ font:inherit; color:inherit; } body{ background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; transition:background-color .2s ease, color .2s ease; } h1,h2,h3{ font-family:var(--font-display); color:var(--ink); margin:0 0 .5em; line-height:1.1; font-weight:600; } h1{ font-size:clamp(2.4rem,4.2vw + 1rem,4.2rem); letter-spacing:-.01em; } h2{ font-size:clamp(1.9rem,2.6vw + 1rem,2.7rem); } h3{ font-size:1.3rem; font-weight:700; } p{ margin:0 0 1em; color:var(--ink-dim); } .kt-lead{ font-size:1.15rem; color:var(--ink); max-width:46ch; opacity:.85; } :focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:4px; } .kt-skip{ position:absolute; left:-999px; top:auto; background:var(--accent); color:var(--accent-ink); padding:.6em 1em; border-radius:6px; z-index:200; } .kt-skip:focus{ left:1rem; top:1rem; } .kt-container{ max-width:var(--container); margin:0 auto; padding:0 1.5rem; } .kt-eyebrow{ display:inline-flex; align-items:center; gap:.5em; font-family:var(--font-mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-dim); } .kt-eyebrow .kt-dot{ width:7px; height:7px; border-radius:50%; background:var(--ink); box-shadow:0 0 0 3px var(--border); } .kt-section-head{ max-width:62ch; margin-bottom:2.6rem; } .kt-section-head h2{ margin-top:.35em; } .kt-section-head p{ margin-top:.6em; } .kt-section-head a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--border-2); } .kt-section{ padding:5rem 0; } .kt-section-alt{ background:var(--bg-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); } /* ---------- buttons ---------- */ .kt-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; font-family:var(--font-body); font-weight:600; font-size:.95rem; padding:.85em 1.6em; border-radius:999px; border:1px solid transparent; cursor:pointer; transition:transform .15s ease, background .2s ease, border-color .2s ease, opacity .2s ease; white-space:nowrap; /* Evita que Chrome Android "modo oscuro forzado" pise el color del texto de forma independiente al fondo — causa del botón negro sin texto visible */ forced-color-adjust:none; } .kt-btn:hover{ transform:translateY(-1px); } .kt-btn-primary{ background:var(--accent); color:var(--accent-ink); /* -webkit-text-fill-color tiene precedencia sobre color en Chrome/Safari; aunque el forced dark mode toque 'color', este valor no lo puede pisar */ -webkit-text-fill-color:var(--accent-ink); } .kt-btn-primary:hover{ opacity:.86; } .kt-btn-ghost{ background:transparent; border-color:var(--border-2); color:var(--ink); -webkit-text-fill-color:var(--ink); } .kt-btn-ghost:hover{ border-color:var(--ink); } .kt-btn-sm{ padding:.6em 1.2em; font-size:.85rem; } .kt-btn-lg{ padding:1em 2em; font-size:1.02rem; } .kt-btn-block{ width:100%; } .kt-btn-danger{ background:var(--bad); color:#fff; -webkit-text-fill-color:#fff; } .kt-btn-danger:hover{ opacity:.88; } /* ===================================================================== THEME TOGGLE ===================================================================== */ .kt-theme-toggle{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; width:38px; height:38px; border-radius:999px; border:1px solid var(--border); background:transparent; color:var(--ink); cursor:pointer; flex-shrink:0; } .kt-theme-toggle:hover{ border-color:var(--border-2); } .kt-theme-icon-light{ display:none; } :root[data-theme="light"] .kt-theme-icon-dark{ display:none; } :root[data-theme="light"] .kt-theme-icon-light{ display:inline; } .kt-theme-toggle-label{ display:none; } .kt-theme-toggle-mobile{ width:auto; justify-content:flex-start; gap:.7em; padding:.7rem 0; border:0; border-bottom:1px solid var(--border); border-radius:0; margin-top:.4rem; } .kt-theme-toggle-mobile .kt-theme-toggle-label{ display:inline; font-size:1rem; } /* ===================================================================== HEADER ===================================================================== */ .kt-header{ position:sticky; top:0; z-index:100; background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--border); } .kt-header-inner{ display:flex; align-items:center; gap:1.2rem; height:74px; } .kt-brand{ display:flex; align-items:center; gap:.6rem; flex-shrink:0; } .kt-brand-word{ font-family:var(--font-display); font-weight:700; font-size:1.4rem; color:var(--ink); letter-spacing:.01em; } .kt-brand-accent{ color:var(--ink-dim); } .kt-nav{ display:flex; align-items:center; gap:1.5rem; margin-right:auto; } .kt-nav a{ font-size:.92rem; color:var(--ink-dim); transition:color .15s ease; } .kt-nav a:hover, .kt-nav a.is-active{ color:var(--ink); } .kt-header-actions{ display:flex; align-items:center; gap:1.1rem; margin-left:auto; } .kt-header-actions .kt-theme-toggle{ margin-right:.3rem; } .kt-header-actions > *:nth-last-child(2){ margin-right:-.35rem; } .kt-lang-switch{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.05em; border:1px solid var(--border); border-radius:999px; padding:.35em .7em; color:var(--ink-dim); } .kt-lang-switch:hover{ border-color:var(--border-2); color:var(--ink); } .kt-header-login{ font-size:.92rem; color:var(--ink-dim); } .kt-header-login:hover{ color:var(--ink); } .kt-nav-toggle{ display:none; background:none; border:0; padding:.4rem; cursor:pointer; } .kt-nav-toggle span{ display:block; width:22px; height:2px; background:var(--ink); margin:4px 0; border-radius:2px; } .kt-mobile-nav{ display:none; flex-direction:column; gap:.2rem; padding:1rem 1.5rem 1.5rem; border-top:1px solid var(--border); background:var(--bg); } .kt-mobile-nav a{ padding:.7rem 0; color:var(--ink); border-bottom:1px solid var(--border); font-size:1rem; } .kt-mobile-nav .kt-btn{ margin-top:.8rem; } .kt-mobile-nav-hint{ margin-top:.8rem; font-size:.85rem; } .kt-mobile-nav.is-open{ display:flex; } @media (max-width:880px){ .kt-nav, .kt-header-trial, .kt-header-login{ display:none; } .kt-nav-toggle{ display:block; } .kt-header-actions{ gap:.7rem; margin-right:-.5rem; } } @media (max-width:420px){ .kt-lang-switch{ display:none; } /* sigue disponible dentro del menú ☰ */ .kt-header-actions{ gap:.5rem; margin-right:-.7rem; } .kt-header-actions .kt-theme-toggle{ margin-right:.1rem; } .kt-btn-sm{ padding:.55em .9em; font-size:.8rem; } } /* ===================================================================== HERO + PANEL DE SEÑAL ===================================================================== */ .kt-hero{ padding:4.5rem 0 3rem; } .kt-hero-inner{ display:grid; grid-template-columns:1.15fr .85fr; gap:3rem; align-items:start; } .kt-hero h1{ margin-top:.5em; } .kt-hero h1 .kt-accent{ color:var(--ink); font-style:italic; } .kt-hero-ctas{ display:flex; gap:1rem; flex-wrap:wrap; margin:2rem 0 2.4rem; } .kt-hero-stats{ display:grid; grid-template-columns:repeat(4,auto); gap:1.6rem; font-family:var(--font-mono); } .kt-hero-stats .kt-stat-num{ display:block; font-size:1.5rem; color:var(--ink); font-weight:600; } .kt-hero-stats .kt-stat-label{ display:block; font-size:.72rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.06em; margin-top:.2em; } .kt-panel{ background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.6rem 1.7rem; box-shadow:var(--shadow-card); } .kt-panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.1rem; } .kt-panel-head h3{ font-family:var(--font-mono); font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-dim); margin:0; font-weight:600; } .kt-panel-live{ display:inline-flex; align-items:center; gap:.45em; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; color:var(--ink); } .kt-dot-live{ width:8px; height:8px; border-radius:50%; background:var(--live); box-shadow:0 0 0 0 var(--border-2); animation:kt-pulse 1.8s ease-in-out infinite; } @keyframes kt-pulse{ 0%{ box-shadow:0 0 0 0 var(--border-2); } 70%{ box-shadow:0 0 0 7px transparent; } 100%{ box-shadow:0 0 0 0 transparent; } } @media (prefers-reduced-motion: reduce){ .kt-dot-live{ animation:none; } } .kt-panel-row{ display:flex; align-items:baseline; justify-content:space-between; padding:.55rem 0; border-top:1px dashed var(--border); font-family:var(--font-mono); font-size:.92rem; } .kt-panel-row:first-of-type{ border-top:none; } .kt-panel-row .kt-row-label{ color:var(--ink-faint); letter-spacing:.04em; } .kt-panel-row .kt-row-value{ color:var(--ink); font-weight:600; } .kt-panel-note{ margin-top:1rem; font-size:.8rem; color:var(--ink-faint); } @media (max-width:920px){ .kt-hero-inner{ grid-template-columns:1fr; gap:2.4rem; } .kt-hero-stats{ grid-template-columns:repeat(2,auto); } } /* ---------- ticker ---------- */ .kt-ticker-wrap{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--bg-2); overflow:hidden; } .kt-ticker{ display:flex; white-space:nowrap; padding:.85rem 0; } .kt-ticker-track{ display:flex; align-items:center; gap:.9rem; animation:kt-marquee 38s linear infinite; } .kt-ticker-wrap:hover .kt-ticker-track{ animation-play-state:paused; } .kt-ticker-track span{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.06em; color:var(--ink-dim); text-transform:uppercase; } .kt-ticker-track .kt-tick-sep{ color:var(--ink-faint); } @keyframes kt-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } @media (prefers-reduced-motion: reduce){ .kt-ticker-track{ animation:none; flex-wrap:wrap; white-space:normal; } } /* ===================================================================== FEATURES ===================================================================== */ .kt-feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; } .kt-feature{ background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-md); padding:1.8rem; } .kt-feature-icon{ width:46px; height:46px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; margin-bottom:1rem; font-size:1.15rem; background:var(--bg-3); color:var(--ink); border:1px solid var(--border); } .kt-feature h3{ margin-bottom:.4em; } .kt-feature p{ margin:0; font-size:.95rem; } @media (max-width:920px){ .kt-feature-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:620px){ .kt-feature-grid{ grid-template-columns:1fr; } } /* ===================================================================== COVERAGE CHIPS ===================================================================== */ .kt-chips{ display:flex; flex-wrap:wrap; gap:.7rem; } .kt-chip{ display:inline-flex; align-items:center; gap:.5em; background:var(--bg-2); border:1px solid var(--border); border-radius:999px; padding:.55em 1.1em; font-size:.88rem; color:var(--ink); } .kt-chip i{ color:var(--ink-dim); font-size:.85em; } /* ===================================================================== PAÍSES ===================================================================== */ .kt-countries-band{ display:flex; flex-direction:column; gap:2.4rem; } .kt-country-region-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:1rem; border-bottom:1px solid var(--border); padding-bottom:.6rem; } .kt-country-region-head h3{ margin:0; } .kt-country-count{ font-family:var(--font-mono); font-size:.78rem; color:var(--ink-faint); } .kt-country-grid{ display:flex; flex-wrap:wrap; gap:.55rem; } .kt-country-chip{ display:inline-flex; align-items:center; gap:.5em; background:var(--bg-2); border:1px solid var(--border); border-radius:8px; padding:.45em .8em; font-size:.85rem; } .kt-country-flag{ font-size:1em; } /* ===================================================================== PRICING CTA BAND ===================================================================== */ .kt-cta-band{ display:flex; align-items:center; justify-content:space-between; gap:1.6rem; flex-wrap:wrap; background:var(--bg-3); border-radius:var(--radius-lg); padding:2.4rem 2.6rem; border:1px solid var(--border); } .kt-cta-band h2{ margin:0 0 .3rem; font-size:1.8rem; } .kt-cta-band p{ margin:0; max-width:46ch; } /* ===================================================================== STEPS — CADENA DE SEÑAL ===================================================================== */ .kt-chain{ display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:0; } .kt-chain-step{ background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-md); padding:1.8rem; } .kt-chain-tag{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-dim); } .kt-chain-step h3{ margin:.4em 0 .4em; } .kt-chain-step p{ margin:0; font-size:.93rem; } .kt-chain-arrow{ display:flex; align-items:center; justify-content:center; color:var(--ink-faint); font-size:1.3rem; padding:0 .4rem; } @media (max-width:880px){ .kt-chain{ grid-template-columns:1fr; gap:1rem; } .kt-chain-arrow{ transform:rotate(90deg); padding:.2rem 0; } } /* ===================================================================== FOOTER ===================================================================== */ .kt-footer{ background:var(--bg-2); border-top:1px solid var(--border); padding:3.6rem 0 0; } .kt-footer-inner{ display:grid; grid-template-columns:1.3fr 2fr; gap:3rem; padding-bottom:2.4rem; } .kt-footer-tagline{ max-width:38ch; margin-top:1rem; } .kt-footer-contact{ font-size:.88rem; } .kt-footer-contact a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--border-2); } .kt-footer-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; } .kt-footer-col h4{ font-family:var(--font-mono); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 .9rem; } .kt-footer-col a{ display:block; color:var(--ink-dim); padding:.35rem 0; font-size:.93rem; } .kt-footer-col a:hover{ color:var(--ink); } .kt-footer-bottom{ display:flex; align-items:center; justify-content:space-between; gap:1rem; border-top:1px solid var(--border); padding:1.4rem 0; flex-wrap:wrap; } .kt-footer-bottom small{ color:var(--ink-faint); font-size:.82rem; } .kt-footer-status{ display:inline-flex; align-items:center; gap:.5em; } @media (max-width:880px){ .kt-footer-inner{ grid-template-columns:1fr; } .kt-footer-cols{ grid-template-columns:repeat(3,1fr); } } @media (max-width:560px){ .kt-footer-cols{ grid-template-columns:1fr 1fr; } } /* ===================================================================== PÁGINAS INTERIORES — encabezado simple ===================================================================== */ .kt-page-head{ padding:3.6rem 0 1rem; } .kt-page-head h1{ max-width:24ch; } .kt-page-head .kt-lead{ max-width:58ch; } /* ===================================================================== PRICING PAGE ===================================================================== */ .kt-calc{ background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.8rem; margin-bottom:3rem; display:grid; grid-template-columns:1fr 1.4fr; gap:2rem; align-items:center; } .kt-calc-input label{ display:block; font-size:.85rem; color:var(--ink-dim); margin-bottom:.5rem; } .kt-stepper{ display:flex; align-items:stretch; gap:0; max-width:260px; border-radius:8px; box-shadow:0 0 0 2px #7f1d1d, 0 0 22px -4px rgba(127,29,29,.55); } .kt-stepper-btn{ flex-shrink:0; width:46px; border:1px solid var(--border); background:var(--bg); color:var(--ink); font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; } .kt-stepper-btn:first-child{ border-radius:8px 0 0 8px; border-right:0; } .kt-stepper-btn:last-child{ border-radius:0 8px 8px 0; border-left:0; } .kt-stepper-btn:hover{ background:var(--bg-3); } .kt-stepper input{ flex:1; min-width:0; text-align:center; background:var(--bg); border:1px solid var(--border); border-left:0; border-right:0; padding:.7em .5em; color:var(--ink); font-family:var(--font-mono); font-size:1.05rem; -moz-appearance:textfield; } .kt-stepper input::-webkit-outer-spin-button, .kt-stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; } .kt-calc-hint{ font-size:.78rem; color:var(--ink-faint); margin-top:.6rem; } .kt-calc-hint-msg{ color:var(--ink); } .kt-calc-result{ display:flex; flex-direction:column; gap:.7rem; } .kt-calc-expression{ display:flex; align-items:baseline; gap:.5rem; font-family:var(--font-mono); font-size:clamp(1.6rem, 2.4vw + 1rem, 2.4rem); color:var(--ink); font-weight:600; flex-wrap:wrap; } .kt-calc-expr-x, .kt-calc-expr-eq{ color:var(--ink-faint); font-size:.7em; } #kt-calc-expr-qty{ color:var(--ink-dim); } #kt-calc-expr-total{ color:var(--ink); } .kt-calc-expr-month{ font-family:var(--font-mono); font-size:.85rem; color:var(--ink-faint); margin-top:-.4rem; } .kt-calc-badge-row{ display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; margin-top:.4rem; } .kt-calc-badge{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; background:var(--accent); color:var(--accent-ink); padding:.3em .8em; border-radius:999px; font-weight:700; } .kt-calc-upsell{ font-size:.85rem; color:var(--ink-dim); } @media (max-width:780px){ .kt-calc{ grid-template-columns:1fr; } } /* ---------- checkout: métodos de pago ---------- */ .kt-checkout{ background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.8rem; margin-bottom:3rem; } .kt-checkout h3{ margin-bottom:1.1rem; } .kt-pay-methods{ display:grid; grid-template-columns:repeat(4,1fr); gap:.7rem; margin-bottom:1.4rem; } .kt-pay-method{ display:flex; align-items:center; justify-content:center; gap:.5em; text-align:center; border:1px solid var(--border); border-radius:var(--radius-sm); padding:.8em .6em; font-size:.85rem; color:var(--ink-dim); cursor:pointer; position:relative; } .kt-pay-method input{ position:absolute; opacity:0; inset:0; cursor:pointer; margin:0; } .kt-pay-method:has(input:checked), .kt-pay-method.is-checked{ border-color:var(--ink); color:var(--ink); background:var(--bg-3); } .kt-pay-method i{ font-size:1rem; } .kt-pay-panel{ border-top:1px solid var(--border); padding-top:1.4rem; } .kt-pay-panel p{ font-size:.93rem; } .kt-pay-panel code{ font-family:var(--font-mono); background:var(--bg); border:1px solid var(--border); padding:.15em .5em; border-radius:5px; word-break:break-all; } .kt-notify-form .kt-field{ margin-bottom:.9rem; } @media (max-width:680px){ .kt-pay-methods{ grid-template-columns:repeat(2,1fr); } } .kt-tiers{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; margin-bottom:3rem; } .kt-tier{ background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-md); padding:1.8rem; position:relative; transition:border-color .15s ease, background .15s ease; } .kt-tier.is-popular{ border-color:var(--border-2); } .kt-tier.is-active{ border-color:var(--ink); background:var(--bg-3); } .kt-tier-badge{ position:absolute; top:-.7rem; right:1.4rem; background:var(--accent); color:var(--accent-ink); font-family:var(--font-mono); font-size:.65rem; letter-spacing:.06em; text-transform:uppercase; padding:.3em .7em; border-radius:999px; font-weight:700; } .kt-tier h3{ margin-bottom:.15em; } .kt-tier-range{ font-family:var(--font-mono); font-size:.78rem; color:var(--ink-faint); } .kt-tier-price{ margin:1.1rem 0 .2rem; font-family:var(--font-mono); } .kt-tier-price .kt-price-num{ font-size:2rem; color:var(--ink); font-weight:600; } .kt-tier-price .kt-price-unit{ font-size:.78rem; color:var(--ink-faint); display:block; } .kt-included{ background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-md); padding:1.8rem 2rem; margin-bottom:3rem; } .kt-included ul{ display:grid; grid-template-columns:repeat(2,1fr); gap:.7rem 1.6rem; margin-top:1rem; } .kt-included li{ display:flex; gap:.6em; font-size:.93rem; color:var(--ink); } .kt-included li i{ color:var(--ink-dim); margin-top:.2em; } @media (max-width:980px){ .kt-tiers{ grid-template-columns:repeat(2,1fr); } } @media (max-width:620px){ .kt-tiers{ grid-template-columns:1fr; } .kt-included ul{ grid-template-columns:1fr; } } /* ===================================================================== CHANNELS PAGE ===================================================================== */ .kt-cat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:3.4rem; } .kt-cat-card{ background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:1.1rem 1.3rem; display:flex; align-items:center; gap:.8rem; } .kt-cat-card i{ color:var(--ink-dim); font-size:1.1rem; width:1.4em; text-align:center; } @media (max-width:820px){ .kt-cat-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .kt-cat-grid{ grid-template-columns:1fr; } } /* ===================================================================== NEWS / LOG ===================================================================== */ .kt-news-list{ display:flex; flex-direction:column; gap:1.6rem; max-width:70ch; } .kt-news-item{ border-left:2px solid var(--border); padding-left:1.4rem; position:relative; } .kt-news-item::before{ content:''; position:absolute; left:-5px; top:.4rem; width:8px; height:8px; border-radius:50%; background:var(--ink); } .kt-news-date{ font-family:var(--font-mono); font-size:.75rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em; } .kt-news-item h3{ margin:.3em 0 .3em; } .kt-news-item p{ margin:0; } /* ===================================================================== FAQ —
/ ===================================================================== */ .kt-faq-list{ max-width:74ch; display:flex; flex-direction:column; gap:.8rem; } .kt-faq-item{ background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:.2rem 1.4rem; } .kt-faq-item summary{ cursor:pointer; list-style:none; padding:1.1rem 0; font-weight:600; color:var(--ink); display:flex; align-items:center; justify-content:space-between; gap:1rem; } .kt-faq-item summary::-webkit-details-marker{ display:none; } .kt-faq-item summary::after{ content:'+'; font-family:var(--font-mono); font-size:1.3rem; color:var(--ink-dim); flex-shrink:0; transition:transform .2s ease; } .kt-faq-item[open] summary::after{ content:'\2212'; } .kt-faq-item p{ padding-bottom:1.1rem; margin:0; } /* ===================================================================== HELP GUIDES ===================================================================== */ .kt-guide-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem; } .kt-guide{ background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-md); padding:1.8rem; } .kt-guide h3{ display:flex; align-items:center; gap:.6em; } .kt-guide h3 i{ color:var(--ink-dim); } .kt-guide p{ margin:0; font-size:.94rem; } @media (max-width:780px){ .kt-guide-grid{ grid-template-columns:1fr; } } /* ===================================================================== FORMS — contacto, login, signup, trial, admin ===================================================================== */ .kt-form-layout{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start; } .kt-form{ background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-lg); padding:2rem; } .kt-field{ margin-bottom:1.2rem; } .kt-field label{ display:block; font-size:.85rem; color:var(--ink-dim); margin-bottom:.45rem; } .kt-field input, .kt-field textarea, .kt-field select{ width:100%; background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:.75em .9em; color:var(--ink); font-size:.96rem; } .kt-field textarea{ min-height:120px; resize:vertical; } .kt-field input:focus, .kt-field textarea:focus, .kt-field select:focus{ border-color:var(--ink); } .kt-field-hint{ font-size:.78rem; color:var(--ink-faint); margin-top:.4rem; } .kt-form-note{ font-size:.82rem; color:var(--ink-faint); margin-top:1rem; } .kt-form-msg{ border-radius:8px; padding:.8em 1em; font-size:.9rem; margin-bottom:1.2rem; } .kt-form-msg.success{ background:var(--ok-bg); border:1px solid var(--ok); color:var(--ink); } .kt-form-msg.error{ background:var(--bad-bg); border:1px solid var(--bad); color:var(--ink); } /* honeypot anti-spam: visible solo a bots que ignoran las reglas de accesibilidad */ .kt-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } .kt-side-card{ background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-md); padding:1.8rem; } .kt-side-card h3{ margin-bottom:.6rem; } .kt-side-contact{ display:flex; flex-direction:column; gap:.9rem; margin-top:1rem; } .kt-side-contact a{ display:flex; align-items:center; gap:.7em; color:var(--ink); font-size:.95rem; } .kt-side-contact i{ color:var(--ink-dim); width:1.3em; text-align:center; } @media (max-width:880px){ .kt-form-layout{ grid-template-columns:1fr; } } .kt-auth-wrap{ max-width:440px; margin:0 auto; } .kt-auth-foot{ text-align:center; margin-top:1.2rem; font-size:.9rem; } /* ===================================================================== LEGAL PAGES ===================================================================== */ .kt-legal{ max-width:72ch; } .kt-legal h2{ font-size:1.4rem; margin-top:2em; } .kt-legal p{ font-size:.97rem; } .kt-legal-meta{ font-family:var(--font-mono); font-size:.78rem; color:var(--ink-faint); margin-bottom:2rem; } .kt-legal-disclaimer{ border-left:2px solid var(--border-2); padding-left:1rem; font-size:.85rem; color:var(--ink-faint); margin-top:2.4rem; } /* ===================================================================== ADMIN PANEL ===================================================================== */ .kt-admin-bar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; background:var(--bg-2); border-bottom:1px solid var(--border); padding:1rem 1.5rem; } .kt-admin-bar .kt-brand-word{ font-size:1.1rem; } .kt-admin-bar-right{ display:flex; align-items:center; gap:1rem; font-size:.85rem; color:var(--ink-dim); } .kt-admin-bar-right a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--border-2); } .kt-admin-wrap{ max-width:880px; margin:0 auto; padding:2.6rem 1.5rem 4rem; } .kt-admin-wrap h1{ font-size:1.9rem; } .kt-admin-card{ background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.8rem 2rem; margin-bottom:1.6rem; } .kt-admin-card h2{ font-size:1.2rem; margin-bottom:1rem; } .kt-admin-tier-row{ display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:1rem; align-items:end; padding:1.1rem 0; border-top:1px solid var(--border); } .kt-admin-tier-row:first-of-type{ border-top:none; } .kt-admin-tier-row .kt-field{ margin-bottom:0; } .kt-admin-tier-name{ font-family:var(--font-mono); font-size:.9rem; color:var(--ink); align-self:center; font-weight:600; } .kt-admin-meta-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; } .kt-admin-actions{ display:flex; gap:1rem; align-items:center; margin-top:1.4rem; } .kt-admin-updated{ font-family:var(--font-mono); font-size:.78rem; color:var(--ink-faint); } .kt-admin-login-wrap{ max-width:380px; margin:6rem auto; padding:0 1.5rem; } .kt-admin-login-wrap h1{ font-size:1.6rem; text-align:center; } @media (max-width:780px){ .kt-admin-tier-row{ grid-template-columns:1fr; gap:.6rem; } .kt-admin-meta-row{ grid-template-columns:1fr; } } /* ===================================================================== UTILIDADES ===================================================================== */ .kt-mt-0{ margin-top:0; } .kt-text-center{ text-align:center; } /* ===================================================================== LOGO MARK (isotipo) — monocromático, sigue el tema activo ===================================================================== */ .kt-mark-bg{ fill:var(--bg-3); } .kt-mark-bar{ fill:var(--ink); } /* ===================================================================== DASHBOARD DE CLIENTE (Fase 2) — reutiliza los mismos tokens del sistema de diseño existente, no introduce ningún color nuevo salvo los semánticos ya usados en los formularios (--ok/--bad). ===================================================================== */ .kt-dash-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:1.4rem; flex-wrap:wrap; margin-bottom:1.6rem; } .kt-dash-head h1{ margin-bottom:.2em; } .kt-dash-banner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; background:var(--bg-3); border:1px solid var(--border-2); border-radius:var(--radius-sm); padding:.9rem 1.2rem; margin-bottom:1.6rem; font-size:.92rem; } .kt-dash-banner a{ text-decoration:underline; text-decoration-color:var(--border-2); white-space:nowrap; } .kt-dash-grid{ display:grid; grid-template-columns:2fr 1fr; gap:1.6rem; align-items:start; } .kt-dash-card{ background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-md); padding:1.6rem 1.8rem; margin-bottom:1.6rem; } .kt-dash-card h2{ font-size:1.25rem; margin-bottom:1rem; } .kt-dash-card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; } .kt-dash-card-head h2{ margin:0; } .kt-dash-empty{ text-align:center; padding:2rem 1rem; color:var(--ink-dim); } .kt-dash-empty p{ margin-bottom:1.2rem; } .kt-line-item{ border-top:1px solid var(--border); padding:1.1rem 0; } .kt-line-item:first-child{ border-top:none; padding-top:0; } .kt-line-item-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:.6rem; } .kt-line-item-head strong{ font-family:var(--font-mono); font-size:1rem; } .kt-line-meta{ display:flex; flex-wrap:wrap; gap:1.4rem; font-size:.85rem; color:var(--ink-dim); margin-bottom:.8rem; } .kt-line-meta span{ display:block; } .kt-line-meta .kt-row-label{ display:block; color:var(--ink-faint); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:.15em; } .kt-line-actions{ display:flex; gap:.7rem; flex-wrap:wrap; } .kt-status-badge{ display:inline-flex; align-items:center; gap:.4em; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; border:1px solid var(--border-2); border-radius:999px; padding:.3em .8em; color:var(--ink-dim); } .kt-status-badge.is-good{ border-color:var(--ok); color:var(--ok); } .kt-status-badge.is-bad{ border-color:var(--bad); color:var(--bad); } .kt-account-rows{ display:flex; flex-direction:column; gap:.5rem; font-size:.92rem; } .kt-account-rows .kt-panel-row{ font-family:var(--font-body); } .kt-quicklinks{ display:flex; flex-direction:column; gap:0; } .kt-quicklinks a{ display:flex; align-items:center; gap:.7em; padding:.8em 0; border-top:1px solid var(--border); color:var(--ink); font-size:.94rem; } .kt-quicklinks a:first-child{ border-top:none; } .kt-quicklinks a i{ color:var(--ink-dim); width:1.3em; text-align:center; } .kt-dash-soon{ font-size:.85rem; color:var(--ink-faint); } @media (max-width:880px){ .kt-dash-grid{ grid-template-columns:1fr; } } /* ===================================================================== DASHBOARD — shell con barra lateral (Fase 3) ===================================================================== */ .kt-dash-shell{ display:grid; grid-template-columns:240px 1fr; gap:2rem; align-items:start; } .kt-dash-sidebar{ position:sticky; top:90px; } .kt-dash-nav-section{ margin-bottom:1.6rem; } .kt-dash-nav-section h4{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 .6rem; padding-left:.2rem; } .kt-dash-nav-section a{ display:flex; align-items:center; gap:.65em; padding:.55em .7em; border-radius:8px; color:var(--ink-dim); font-size:.9rem; margin-bottom:.1rem; } .kt-dash-nav-section a i{ width:1.2em; text-align:center; color:var(--ink-faint); font-size:.92em; } .kt-dash-nav-section a:hover{ background:var(--bg-2); color:var(--ink); } .kt-dash-nav-section a.is-active{ background:var(--bg-3); color:var(--ink); font-weight:600; } .kt-dash-nav-section a.is-active i{ color:var(--ink); } .kt-dash-nav-badge{ margin-left:auto; background:var(--ink); color:var(--bg); font-family:var(--font-mono); font-size:.68rem; font-weight:700; border-radius:999px; padding:.05em .5em; } .kt-dash-mobile-select{ display:none; } @media (max-width:980px){ .kt-dash-shell{ grid-template-columns:1fr; gap:1.2rem; } .kt-dash-sidebar{ position:static; } .kt-dash-sidebar .kt-dash-nav-full{ display:none; } .kt-dash-mobile-select{ display:block; margin-bottom:.5rem; } .kt-dash-mobile-select select{ width:100%; background:var(--bg-2); border:1px solid var(--border); color:var(--ink); padding:.8em 1em; border-radius:10px; font-size:.95rem; } } /* ---------- piezas reutilizadas por los módulos nuevos ---------- */ .kt-module-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.6rem; } .kt-module-head h1{ margin-bottom:.2em; } .kt-list-card{ background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-md); } .kt-list-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.1rem 1.5rem; border-top:1px solid var(--border); flex-wrap:wrap; } .kt-list-row:first-child{ border-top:none; } .kt-list-row a.kt-list-row-link{ flex:1; min-width:0; } .kt-list-row-title{ font-weight:600; color:var(--ink); margin-bottom:.2em; } .kt-list-row-meta{ font-size:.82rem; color:var(--ink-faint); font-family:var(--font-mono); } .kt-empty-state{ text-align:center; padding:3rem 1.5rem; color:var(--ink-dim); } .kt-empty-state i{ font-size:1.8rem; color:var(--ink-faint); margin-bottom:1rem; display:block; } .kt-empty-state p{ margin-bottom:1.2rem; } .kt-ticket-thread{ display:flex; flex-direction:column; gap:1rem; margin-bottom:1.6rem; } .kt-ticket-msg{ background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:1rem 1.2rem; max-width:80%; } .kt-ticket-msg.is-admin{ align-self:flex-start; border-color:var(--border-2); } .kt-ticket-msg.is-user{ align-self:flex-end; background:var(--bg-3); } .kt-ticket-msg-meta{ font-family:var(--font-mono); font-size:.7rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.4em; } .kt-tabs{ display:flex; gap:.5rem; margin-bottom:1.6rem; border-bottom:1px solid var(--border); } .kt-tabs a{ padding:.7em 1.1em; font-size:.9rem; color:var(--ink-dim); border-bottom:2px solid transparent; margin-bottom:-1px; } .kt-tabs a.is-active{ color:var(--ink); border-bottom-color:var(--ink); font-weight:600; } .kt-key-reveal{ background:var(--bg-3); border:1px solid var(--border-2); border-radius:8px; padding:1rem 1.2rem; font-family:var(--font-mono); font-size:.85rem; word-break:break-all; margin-bottom:1rem; } .kt-notif-item{ display:flex; gap:.8em; padding:1rem 1.5rem; border-top:1px solid var(--border); } .kt-notif-item:first-child{ border-top:none; } .kt-notif-item.is-unread{ background:var(--bg-3); } .kt-notif-dot{ width:8px; height:8px; border-radius:50%; background:var(--ink); margin-top:.4em; flex-shrink:0; } .kt-notif-item.is-read .kt-notif-dot{ background:var(--border-2); } .kt-tool-output{ background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:1rem; font-family:var(--font-mono); font-size:.82rem; max-height:340px; overflow:auto; white-space:pre-wrap; word-break:break-all; } /* ===== Menú de cuenta simplificado (post-login) ===== */ .kt-acc-menu-wrap{ position:relative; } .kt-acc-avatar-btn{ width:38px; height:38px; border-radius:50%; border:none; cursor:pointer; background:linear-gradient(135deg,#3b82f6,#8b5cf6); color:#fff; font-weight:700; font-size:.95rem; display:flex; align-items:center; justify-content:center; -webkit-text-fill-color:#fff; appearance:none; -webkit-appearance:none; flex-shrink:0; } .kt-acc-menu{ display:none; position:absolute; top:calc(100% + 12px); right:0; width:250px; max-width:calc(100vw - 2rem); box-sizing:border-box; background:var(--bg-2); border:1px solid var(--border-2); border-radius:14px; box-shadow:0 18px 40px -16px rgba(0,0,0,.55); padding:.5rem; z-index:500; } .kt-acc-menu.on{ display:block; } .kt-acc-menu-head{ padding:.7rem .9rem .8rem; border-bottom:1px solid var(--border); margin-bottom:.4rem; } .kt-acc-menu-head strong{ display:block; font-size:.92rem; } .kt-acc-menu-head span{ display:block; font-size:.78rem; color:var(--ink-dim); margin-top:.1rem; word-break:break-all; } .kt-acc-menu-item{ display:flex; align-items:center; gap:.7rem; padding:.65rem .8rem; border-radius:9px; font-size:.88rem; font-weight:600; color:var(--ink); transition:background .12s; } .kt-acc-menu-item:hover{ background:var(--bg-3); } .kt-acc-menu-item.is-danger{ color:#ef4444; -webkit-text-fill-color:#ef4444; } .kt-acc-menu-ic{ width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:.95rem; flex-shrink:0; } .kt-acc-menu-ic.ic-blue{ background:rgba(59,130,246,.15); } .kt-acc-menu-ic.ic-teal{ background:rgba(20,184,166,.15); } .kt-acc-menu-ic.ic-purple{ background:rgba(139,92,246,.15); } .kt-acc-menu-ic.ic-blue2{ background:rgba(99,102,241,.15); } .kt-acc-menu-ic.ic-red{ background:rgba(239,68,68,.15); }