/* ========================================================================== JURISIA - Sistema de diseno Neobrutalista Usado por: index.html (acceso) y pricing.html (planes). No toca landing.css, que sigue sirviendo a payment-result.html. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Reset -------------------------------------------------------------------------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } img, svg { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } button { background: none; border: none; cursor: pointer; } ul, ol { list-style: none; } a { color: inherit; } /* -------------------------------------------------------------------------- 2. Tokens -------------------------------------------------------------------------- */ /* La paleta real vive en nb-tokens.css (fuente unica). Aqui solo se le dan los nombres cortos que usa esta hoja: las custom properties se resuelven en tiempo de uso, asi que el orden de carga entre ambas hojas es indiferente. */ :root { --paper: var(--nb-paper); --paper-2: var(--nb-paper-2); --white: var(--nb-white); --ink: var(--nb-ink); --ink-2: var(--nb-ink-2); --ink-soft: var(--nb-ink-soft); /* Ojo: --gold y --gold-deep NO se re-declaran aqui. Son nombres que info_pages.css ya usaba con otro sentido (ambar de texto) y que nb-tokens.css puentea asi; declararlos crearia una colision. Esta hoja usa var(--nb-gold) / var(--nb-gold-deep) directamente. */ --terracotta: var(--nb-terracotta); --azure: var(--nb-azure); --bd: var(--nb-bd); --bd-thick: var(--nb-bd-thick); --radius: var(--nb-radius); --sx: var(--nb-sx); --ease: var(--nb-ease); --font-display: var(--nb-font-display); --font-ui: var(--nb-font-ui); --pad-brand: clamp(26px, 3.2vw, 56px); --pad-auth: clamp(24px, 3.6vw, 64px); } /* -------------------------------------------------------------------------- 3. Base -------------------------------------------------------------------------- */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } body { /* Sin overflow-x aqui a proposito: en convierte el documento en contenedor de scroll y eso ROMPE position:sticky en los descendientes (la cabecera se iba con el scroll y dejaba la barra de lectura flotando a media pagina). El sitio ya se mide sin desbordamiento horizontal en 390/360/768, asi que la red de seguridad no hace falta. */ min-height: 100vh; min-height: 100dvh; background: var(--paper); color: var(--ink); font-family: var(--font-ui); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; } h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.02; letter-spacing: -0.02em; } strong { font-weight: 700; } ::selection { background: var(--nb-gold); color: var(--ink); } /* Scrollbar en la misma gramatica: bloque macizo, borde grueso, sin radio */ * { scrollbar-color: var(--ink) var(--paper-2); scrollbar-width: thin; } ::-webkit-scrollbar { width: 14px; height: 14px; } ::-webkit-scrollbar-track { background: var(--paper-2); border-left: var(--bd) solid var(--ink); } ::-webkit-scrollbar-thumb { background: var(--ink); border: var(--bd) solid var(--paper-2); } /* Foco visible: anillo azul desplazado, nunca eliminado */ :focus-visible { outline: var(--bd) solid var(--azure); outline-offset: 3px; } .skip-link { position: absolute; top: -100px; left: 12px; z-index: 100; padding: 12px 18px; background: var(--ink); color: var(--paper); border: var(--bd) solid var(--ink); font-weight: 700; text-decoration: none; transition: top .18s var(--ease); } .skip-link:focus-visible { top: 12px; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- 4. Primitivas -------------------------------------------------------------------------- */ /* Boton. Hover levanta 2px y engorda la sombra; :active lo hunde exactamente sobre la sombra (translate == --sx) y la anula: el bloque toca la pagina. --sx SIEMPRE deriva de --nb-sx: el peso del relieve se regula desde el token, y cada variante solo declara su distancia relativa a el. */ .nb-btn { --sx: var(--nb-sx); /* El COLOR de la sombra, como token. Estaba escrito a mano en las tres reglas -base, hover y active-, asi que tenir la sombra de una variante obligaba a reescribir las tres y era cuestion de tiempo que una se quedara atras y el boton cambiara de color al pulsarlo. */ --sx-color: var(--ink); display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; padding: 13px 20px; background: var(--white); color: var(--ink); border: var(--bd) solid var(--ink); border-radius: var(--radius); box-shadow: var(--sx) var(--sx) 0 var(--sx-color); font-family: var(--font-ui); font-size: 15px; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: transform .13s var(--ease), box-shadow .13s var(--ease), background-color .13s var(--ease); } .nb-btn:hover { transform: translate(-2px, -2px); box-shadow: calc(var(--sx) + 2px) calc(var(--sx) + 2px) 0 var(--sx-color); } .nb-btn:active { transform: translate(var(--sx), var(--sx)); box-shadow: 0 0 0 var(--sx-color); } .nb-btn[disabled], .nb-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: var(--sx) var(--sx) 0 var(--ink); } /* Unico boton con mas peso que el resto: es la accion principal de la pagina. */ .nb-btn--lg { --sx: calc(var(--nb-sx) + 2px); min-height: 62px; padding: 16px 22px; border-width: var(--bd-thick); font-size: 16px; } .nb-btn--sm { --sx: calc(var(--nb-sx) - 1px); width: auto; min-height: 42px; padding: 9px 15px; font-size: 13px; } .nb-btn--gold { background: var(--nb-gold); } .nb-btn--gold:hover { background: var(--nb-gold-deep); } .nb-btn--ink { background: var(--ink); color: var(--paper); } .nb-btn--ink:hover { background: var(--ink-2); } .nb-btn--paper { background: var(--paper-2); } .nb-btn--paper:hover { background: var(--paper); } /* Chip: etiqueta rigida. Plano mientras solo informa; el relieve llega unicamente si es o