/* * Pagina publica de WaryPOS. * * Mismo sistema visual que la aplicacion ("libro contable"): papel calido, * tinta casi negra, lineas finas en lugar de cajas con sombra y un solo color * de accion, el verde petroleo de la marca. Verde, ambar y rojo quedan para * estados. Los valores de color son los de frontend/src/index.css del sistema, * en canales RGB, para los dos temas. * * El tema se elige con data-tema en ("claro" u "oscuro"). Sin JS, lo * decide prefers-color-scheme. */ /* ---------- Fuentes (autoalojadas, subconjunto latin) ---------- */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fuentes/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); 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; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fuentes/ibm-plex-sans-latin-500-normal.woff2') format('woff2'); 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; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fuentes/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); 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; } @font-face { font-family: 'IBM Plex Serif'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fuentes/ibm-plex-serif-latin-500-normal.woff2') format('woff2'); 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; } @font-face { font-family: 'IBM Plex Serif'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fuentes/ibm-plex-serif-latin-600-normal.woff2') format('woff2'); 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; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fuentes/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); 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; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fuentes/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); 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; } /* ---------- Colores del sistema ---------- */ :root { color-scheme: light; --c-white: 255 253 248; --c-slate-50: 243 239 230; --c-slate-100: 235 229 216; --c-slate-200: 221 213 198; --c-slate-300: 201 191 172; --c-slate-400: 138 129 112; --c-slate-500: 101 95 84; --c-slate-600: 74 69 60; --c-slate-700: 58 54 47; --c-slate-800: 42 39 34; --c-slate-900: 29 27 23; --c-marca-50: 234 242 242; --c-marca-100: 211 229 229; --c-marca-200: 170 205 206; --c-marca-600: 19 95 102; --c-marca-700: 13 79 86; --c-marca-800: 11 64 70; --c-marca-900: 9 50 56; --c-exito-50: 236 253 243; --c-exito-700: 10 107 69; --c-aviso-50: 255 248 235; --c-aviso-700: 138 81 6; /* Rellenos de la marca: en claro, el propio petroleo con letra de papel. */ --relleno-marca: var(--c-marca-700); --relleno-marca-fuerte: var(--c-marca-800); --sobre-relleno: var(--c-white); --papel: rgb(var(--c-slate-50)); --hoja: rgb(var(--c-white)); --hoja-2: rgb(var(--c-slate-100)); --linea: rgb(var(--c-slate-200)); --linea-fuerte: rgb(var(--c-slate-300)); --borde-control: rgb(var(--c-slate-400)); --tinta: rgb(var(--c-slate-900)); --tinta-2: rgb(var(--c-slate-600)); --tinta-3: rgb(var(--c-slate-500)); --enlace: rgb(var(--c-marca-800)); --foco: rgb(var(--c-marca-600)); --marca-suave: rgb(var(--c-marca-50)); --marca-linea: rgb(var(--c-marca-200)); --radio: 3px; --radio-md: 4px; --radio-lg: 6px; --ancho: 1200px; --margen: clamp(1.25rem, 0.6rem + 2.6vw, 2.5rem); --sans: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --serif: 'IBM Plex Serif', ui-serif, Georgia, Cambria, 'Times New Roman', serif; --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* Tema oscuro: las escalas se invierten en luminosidad, como en el sistema. */ @media screen and (prefers-color-scheme: dark) { :root:not([data-tema='claro']) { color-scheme: dark; --c-white: 33 31 27; --c-slate-50: 22 21 18; --c-slate-100: 27 26 22; --c-slate-200: 48 45 39; --c-slate-300: 67 63 55; --c-slate-400: 127 120 108; --c-slate-500: 168 161 148; --c-slate-600: 191 184 171; --c-slate-700: 210 204 192; --c-slate-800: 226 221 211; --c-slate-900: 239 235 227; --c-marca-50: 16 39 42; --c-marca-100: 21 50 54; --c-marca-200: 29 68 73; --c-marca-600: 122 185 189; --c-marca-700: 143 200 203; --c-marca-800: 171 216 218; --c-marca-900: 199 231 232; --c-exito-50: 14 38 27; --c-exito-700: 114 211 163; --c-aviso-50: 43 32 10; --c-aviso-700: 240 192 92; --relleno-marca: 26 98 105; --relleno-marca-fuerte: 18 76 82; --sobre-relleno: 248 245 239; } } @media screen { :root[data-tema='oscuro'] { color-scheme: dark; --c-white: 33 31 27; --c-slate-50: 22 21 18; --c-slate-100: 27 26 22; --c-slate-200: 48 45 39; --c-slate-300: 67 63 55; --c-slate-400: 127 120 108; --c-slate-500: 168 161 148; --c-slate-600: 191 184 171; --c-slate-700: 210 204 192; --c-slate-800: 226 221 211; --c-slate-900: 239 235 227; --c-marca-50: 16 39 42; --c-marca-100: 21 50 54; --c-marca-200: 29 68 73; --c-marca-600: 122 185 189; --c-marca-700: 143 200 203; --c-marca-800: 171 216 218; --c-marca-900: 199 231 232; --c-exito-50: 14 38 27; --c-exito-700: 114 211 163; --c-aviso-50: 43 32 10; --c-aviso-700: 240 192 92; --relleno-marca: 26 98 105; --relleno-marca-fuerte: 18 76 82; --sobre-relleno: 248 245 239; } } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; } body { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--sans); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } img { height: auto; } h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; } /* Sin especificidad: asi las clases de cada lista pueden fijar su relleno. */ :where(ul[class], ol[class]) { padding: 0; list-style: none; } a { color: var(--enlace); text-decoration-thickness: 1px; text-underline-offset: 0.18em; } a:hover { text-decoration-thickness: 2px; } :focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: var(--radio); } ::selection { background: rgb(var(--c-marca-200)); color: var(--tinta); } strong { font-weight: 600; } abbr[title] { text-decoration: none; } .visualmente-oculto { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .saltar { position: absolute; left: 1rem; top: -4rem; z-index: 100; display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; background: rgb(var(--relleno-marca)); color: rgb(var(--sobre-relleno)); font-weight: 600; border-radius: var(--radio-md); text-decoration: none; } .saltar:focus { top: 0.75rem; } .contenedor { width: 100%; max-width: calc(var(--ancho) + 2 * var(--margen)); margin: 0 auto; padding: 0 var(--margen); } .cifras { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .rotulo { font-size: 0.75rem; line-height: 1rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--tinta-2); } /* ---------- Botones ---------- */ .boton { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 1.125rem; border: 1px solid transparent; border-radius: var(--radio-md); font: inherit; font-size: 0.9375rem; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; white-space: nowrap; } .boton svg { flex: none; width: 1.125rem; height: 1.125rem; } .boton-principal { background: rgb(var(--relleno-marca)); color: rgb(var(--sobre-relleno)); } .boton-principal:hover { background: rgb(var(--relleno-marca-fuerte)); text-decoration: none; } .boton-secundario { background: var(--hoja); color: var(--tinta); border-color: var(--borde-control); } .boton-secundario:hover { background: var(--hoja-2); } .boton-grande { min-height: 3.25rem; padding: 0 1.5rem; font-size: 1rem; } /* ---------- Cabecera ---------- */ .cabecera { position: sticky; top: 0; z-index: 50; background: var(--papel); border-bottom: 1px solid var(--linea); } .cabecera-fila { display: flex; align-items: center; gap: 1rem; min-height: 4rem; } .marca-enlace { display: inline-flex; align-items: center; min-height: 2.75rem; margin-right: auto; border-radius: var(--radio); } .marca-enlace img { width: 150px; height: auto; } .logo-oscuro { display: none !important; } :root[data-tema='oscuro'] .logo-claro { display: none !important; } :root[data-tema='oscuro'] .logo-oscuro { display: block !important; } @media (prefers-color-scheme: dark) { :root:not([data-tema]) .logo-claro { display: none !important; } :root:not([data-tema]) .logo-oscuro { display: block !important; } } .navegacion ul { margin: 0; padding: 0; list-style: none; display: flex; align-items: center; gap: 0.25rem; } .navegacion a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.75rem; color: var(--tinta); font-size: 0.9375rem; font-weight: 500; text-decoration: none; border-radius: var(--radio); } .navegacion a:hover { color: var(--enlace); text-decoration: underline; } .cabecera-acciones { display: flex; align-items: center; gap: 0.5rem; } .boton-icono { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; background: var(--hoja); color: var(--tinta); border: 1px solid var(--linea-fuerte); border-radius: var(--radio-md); cursor: pointer; } .boton-icono:hover { background: var(--hoja-2); } .boton-icono svg { width: 1.25rem; height: 1.25rem; } /* El boton de tema solo tiene sentido con JS: sin JS no se muestra. */ .boton-tema, .boton-menu { display: none; } .js .boton-tema { display: inline-flex; } .icono-sol { display: none; } :root[data-tema='oscuro'] .icono-sol { display: block; } :root[data-tema='oscuro'] .icono-luna { display: none; } @media (max-width: 1080px) { .cabecera-cta { display: none; } } @media (max-width: 900px) { .cabecera-fila { flex-wrap: wrap; gap: 0.5rem; } .js .boton-menu { display: inline-flex; } /* El boton de menu va antes de la navegacion en el HTML (para que Tab entre en el menu recien abierto), pero se ve a la derecha. */ .cabecera-acciones { order: 1; } .boton-menu { order: 2; } /* Sin JS, la navegacion se muestra siempre, en una fila que se ajusta. */ .navegacion { order: 3; width: 100%; padding-bottom: 0.5rem; } .navegacion ul { flex-wrap: wrap; gap: 0; } .js .navegacion { display: none; } .js .navegacion.abierta { display: block; border-top: 1px solid var(--linea); padding: 0.5rem 0 1rem; } .js .navegacion.abierta ul { flex-direction: column; align-items: stretch; } .js .navegacion.abierta a { width: 100%; padding: 0 0.25rem; font-size: 1rem; border-bottom: 1px solid var(--linea); border-radius: 0; } .js .navegacion.abierta li:last-child a { border-bottom: 0; } .navegacion .nav-cta { display: none; } .js .navegacion.abierta .nav-cta { display: block; margin-top: 0.75rem; } .js .navegacion.abierta .nav-cta a { justify-content: center; color: rgb(var(--sobre-relleno)); border-bottom: 0; border-radius: var(--radio-md); padding: 0 1rem; } } @media (min-width: 901px) { .navegacion .nav-cta { display: none; } } /* ---------- Secciones ---------- */ .seccion { padding: clamp(3.5rem, 2.5rem + 4vw, 6.5rem) 0; border-top: 1px solid var(--linea); } .seccion-hoja { background: var(--hoja); } .seccion-cabeza { display: grid; gap: 0.875rem; max-width: 46rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.25rem); } .seccion-cabeza .rotulo { display: flex; align-items: center; gap: 0.625rem; } .seccion-cabeza .rotulo::before { content: ''; width: 1.5rem; height: 1px; background: currentColor; } .titulo-seccion { font-family: var(--serif); font-weight: 500; font-size: clamp(1.75rem, 1.25rem + 1.8vw, 2.5rem); line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; } .entradilla { color: var(--tinta-2); font-size: 1.0625rem; max-width: 42rem; text-wrap: pretty; } /* ---------- Heroe ---------- */ .heroe { padding: clamp(2.5rem, 1.5rem + 4vw, 5rem) 0 clamp(3rem, 2rem + 4vw, 5.5rem); overflow: hidden; } .heroe-rejilla { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; } .heroe-texto { display: grid; gap: 1.5rem; justify-items: start; } .heroe h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.25rem, 1.35rem + 3.4vw, 3.75rem); line-height: 1.06; letter-spacing: -0.022em; text-wrap: balance; } .heroe h1 em { font-style: normal; color: var(--enlace); } .heroe-entradilla { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); color: var(--tinta-2); max-width: 36rem; text-wrap: pretty; } .heroe-acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; } .heroe-claves { display: grid; gap: 0; width: 100%; max-width: 36rem; border-top: 1px solid var(--linea-fuerte); } .heroe-claves li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--linea); font-size: 0.9375rem; color: var(--tinta-2); } .heroe-claves strong { color: var(--tinta); } .heroe-claves svg { width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; color: var(--enlace); } .heroe-visual { position: relative; min-height: 34rem; display: flex; justify-content: flex-end; align-items: flex-end; } .heroe-persona { position: relative; z-index: 1; width: min(100%, 25rem); margin-right: -1rem; } .heroe-fondo { position: absolute; z-index: 0; right: 0; bottom: 0; width: 88%; height: 78%; border: 1px solid var(--linea-fuerte); border-radius: var(--radio-lg); background: repeating-linear-gradient(to bottom, transparent 0 31px, var(--linea) 31px 32px), var(--hoja); } .heroe-fondo::before { content: ''; position: absolute; top: 0; bottom: 0; left: 2.5rem; width: 1px; background: rgb(var(--c-marca-200)); } /* ---------- Maqueta de pantalla (estilo libro contable) ---------- */ .maqueta { background: var(--hoja); border: 1px solid var(--linea-fuerte); border-radius: var(--radio-lg); color: var(--tinta); font-size: 0.8125rem; line-height: 1.4; box-shadow: 0 1px 2px 0 rgb(18 17 14 / 0.08), 0 18px 48px -12px rgb(18 17 14 / 0.3); } .heroe .maqueta { position: absolute; z-index: 2; left: 0; bottom: 2.5rem; width: min(21rem, 70%); } .maqueta-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 1rem 0.625rem; border-bottom: 1px solid var(--linea); } .maqueta-titulo { font-family: var(--serif); font-weight: 600; font-size: 1rem; } .maqueta-sub { color: var(--tinta-2); font-size: 0.75rem; } .ejemplo { display: inline-block; padding: 0.0625rem 0.375rem; border: 1px dashed var(--borde-control); border-radius: var(--radio); color: var(--tinta-2); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } .maqueta-filas { padding: 0.25rem 1rem; } .maqueta-filas li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem; align-items: baseline; padding: 0.4375rem 0; border-bottom: 1px solid var(--linea); } .maqueta-filas li:last-child { border-bottom: 0; } .maqueta-filas .nota { display: block; color: var(--tinta-2); font-size: 0.75rem; } .maqueta-pie { display: grid; gap: 0.375rem; padding: 0.625rem 1rem 0.875rem; border-top: 1px solid var(--linea-fuerte); background: rgb(var(--c-slate-50) / 0.6); border-radius: 0 0 var(--radio-lg) var(--radio-lg); } .maqueta-pie .fila { display: flex; justify-content: space-between; gap: 0.75rem; } .maqueta-pie .total { font-weight: 600; font-size: 0.9375rem; } .estado { display: inline-flex; align-items: center; gap: 0.3125rem; padding: 0.0625rem 0.4375rem; border-radius: var(--radio); font-size: 0.6875rem; font-weight: 600; white-space: nowrap; } .estado::before { content: ''; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: currentColor; } .estado-exito { background: rgb(var(--c-exito-50)); color: rgb(var(--c-exito-700)); } .estado-aviso { background: rgb(var(--c-aviso-50)); color: rgb(var(--c-aviso-700)); } .estado-marca { background: var(--marca-suave); color: var(--enlace); } /* ---------- Tres ideas ---------- */ .ideas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--linea-fuerte); border-bottom: 1px solid var(--linea-fuerte); } .idea { display: grid; align-content: start; gap: 0.5rem; padding: 1.75rem 1.75rem 1.75rem 0; } .idea + .idea { padding-left: 1.75rem; border-left: 1px solid var(--linea); } .idea .num { color: var(--tinta-2); font-size: 0.8125rem; } .idea h3 { font-family: var(--serif); font-weight: 500; font-size: 1.3125rem; line-height: 1.3; } .idea p { color: var(--tinta-2); font-size: 0.9375rem; } /* ---------- Rubros ---------- */ .rubros { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr)); gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: var(--radio-lg); overflow: hidden; } .rubro { display: grid; align-content: start; gap: 0.75rem; padding: 1.5rem; background: var(--hoja); } .rubro-cabeza { display: flex; align-items: center; gap: 0.75rem; } .rubro-icono { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; flex: none; border: 1px solid var(--marca-linea); border-radius: var(--radio-md); background: var(--marca-suave); color: var(--enlace); } .rubro-icono svg { width: 1.375rem; height: 1.375rem; } .rubro h3 { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; } .rubro p { color: var(--tinta-2); font-size: 0.9375rem; } .lista-puntos { display: grid; gap: 0.375rem; font-size: 0.9375rem; } .lista-puntos li { position: relative; padding-left: 1rem; } .lista-puntos li::before { content: ''; position: absolute; left: 0; top: 0.72em; width: 0.4375rem; height: 1px; background: var(--tinta-2); } /* ---------- Funciones ---------- */ .grupo-funciones + .grupo-funciones { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); } .grupo-titulo { display: flex; align-items: baseline; gap: 1rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--tinta); font-family: var(--serif); font-weight: 500; font-size: 1.375rem; line-height: 1.3; } .grupo-titulo .cifras { font-size: 0.875rem; color: var(--tinta-2); font-family: var(--mono); } .funciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 1rem + 3vw, 4rem); } .funcion { display: grid; align-content: start; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0 1rem; padding: 1.5rem 0; border-bottom: 1px solid var(--linea); } .funcion-icono { grid-row: span 3; color: var(--enlace); padding-top: 0.125rem; } .funcion-icono svg { width: 1.5rem; height: 1.5rem; } .funcion h4 { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; margin-bottom: 0.375rem; } .funcion p { color: var(--tinta-2); font-size: 0.9375rem; } .funcion .lista-puntos { margin-top: 0.625rem; color: var(--tinta); font-size: 0.9063rem; } .funcion .plan-pro { margin-left: 0.375rem; vertical-align: 0.1em; } .etiqueta-plan { display: inline-block; padding: 0 0.375rem; border: 1px solid var(--marca-linea); border-radius: var(--radio); background: var(--marca-suave); color: var(--enlace); font-size: 0.6875rem; font-weight: 600; line-height: 1.25rem; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; } /* Maqueta del comprobante junto a la facturacion */ .destacado-sunat { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: center; margin-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border: 1px solid var(--linea-fuerte); border-radius: var(--radio-lg); background: var(--hoja); } .destacado-sunat h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); line-height: 1.25; margin-bottom: 0.75rem; } .destacado-sunat > div > p { color: var(--tinta-2); } .destacado-sunat .lista-puntos { margin-top: 1rem; } .documentos { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; } .documentos li { padding: 0.25rem 0.625rem; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); font-size: 0.8125rem; font-weight: 500; background: var(--papel); } .comprobante { position: relative; font-size: 0.8125rem; } .comprobante .maqueta-cabeza { display: grid; gap: 0.25rem; justify-items: start; } .comprobante-serie { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; width: 100%; justify-content: space-between; } .comprobante-serie .cifras { font-size: 1rem; font-weight: 500; } /* ---------- Privacidad ---------- */ .privacidad-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } .hoja { padding: clamp(1.25rem, 1rem + 1.2vw, 2rem); border: 1px solid var(--linea-fuerte); border-radius: var(--radio-lg); background: var(--hoja); } .seccion-hoja .hoja { background: var(--papel); } .hoja h3 { display: flex; align-items: center; gap: 0.625rem; font-size: 1.125rem; font-weight: 600; margin-bottom: 0.5rem; } .hoja h3 svg { width: 1.375rem; height: 1.375rem; color: var(--enlace); flex: none; } .hoja > p { color: var(--tinta-2); font-size: 0.9375rem; } .hoja .lista-puntos { margin-top: 1rem; } .nota-al-pie { margin-top: 1.5rem; color: var(--tinta-2); font-size: 0.9375rem; } /* ---------- Precios ---------- */ .planes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; align-items: stretch; } .plan { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 1.25rem; padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); border: 1px solid var(--linea-fuerte); border-radius: var(--radio-lg); background: var(--hoja); } .plan-pro-tarjeta { border: 2px solid rgb(var(--c-marca-600)); } .plan-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; } .plan h3 { font-family: var(--serif); font-weight: 600; font-size: 1.5rem; line-height: 1.2; } .precio { display: flex; align-items: baseline; gap: 0.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--linea); } .precio .cifras { font-size: clamp(2.25rem, 1.8rem + 1.5vw, 2.75rem); font-weight: 500; line-height: 1; letter-spacing: -0.03em; } .precio .periodo { color: var(--tinta-2); font-size: 0.9375rem; } .plan-descripcion { color: var(--tinta-2); font-size: 0.9375rem; } .lista-incluye { display: grid; gap: 0.625rem; font-size: 0.9375rem; align-content: start; } .lista-incluye li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: 0.625rem; } .lista-incluye svg { width: 1.125rem; height: 1.125rem; margin-top: 0.2rem; color: rgb(var(--c-exito-700)); } .plan .boton { width: 100%; white-space: normal; text-align: center; padding-top: 0.5rem; padding-bottom: 0.5rem; } .precios-notas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 1.5rem; } .precios-notas .hoja h3 { font-size: 1.0625rem; } .precios-notas .hoja p + p { margin-top: 0.625rem; } /* ---------- Pasos ---------- */ .pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); counter-reset: paso; border-top: 2px solid var(--tinta); } .paso { display: grid; align-content: start; gap: 0.75rem; padding: 1.75rem 1.75rem 0 0; } .paso + .paso { padding-left: 1.75rem; border-left: 1px solid var(--linea); } .paso-num { font-family: var(--mono); font-size: 2rem; font-weight: 500; line-height: 1; color: var(--enlace); } .paso h3 { font-family: var(--serif); font-weight: 500; font-size: 1.375rem; line-height: 1.25; } .paso p { color: var(--tinta-2); font-size: 0.9375rem; } .paso .lista-puntos { color: var(--tinta); } .paso .boton { justify-self: start; margin-top: 0.5rem; } /* ---------- Preguntas ---------- */ .preguntas-rejilla { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: start; } .preguntas-rejilla .seccion-cabeza { position: sticky; top: 6rem; margin-bottom: 0; } .preguntas { border-top: 1px solid var(--linea-fuerte); } .pregunta { border-bottom: 1px solid var(--linea-fuerte); } .pregunta summary { display: grid; grid-template-columns: minmax(0, 1fr) 1.5rem; gap: 1rem; align-items: center; min-height: 3.5rem; padding: 0.875rem 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.4; cursor: pointer; list-style: none; } .pregunta summary::-webkit-details-marker { display: none; } .pregunta summary:hover { color: var(--enlace); } .pregunta summary svg { width: 1.25rem; height: 1.25rem; color: var(--tinta-2); transition: transform 0.2s ease; } .pregunta[open] summary svg { transform: rotate(45deg); } .respuesta { display: grid; gap: 0.75rem; padding: 0 2.5rem 1.5rem 0; color: var(--tinta-2); } .respuesta .lista-puntos { color: var(--tinta-2); } /* ---------- Cierre ---------- */ .cierre { padding: clamp(3.5rem, 2.5rem + 4vw, 6rem) 0; background: rgb(var(--relleno-marca)); color: rgb(var(--sobre-relleno)); } .cierre-rejilla { display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 2rem; align-items: center; } .cierre h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; } .cierre p { margin-top: 0.875rem; font-size: 1.0625rem; max-width: 40rem; opacity: 0.92; } .cierre-acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; } .cierre .boton-claro { background: rgb(var(--sobre-relleno)); color: rgb(var(--relleno-marca-fuerte)); } .cierre .boton-claro:hover { background: rgb(var(--c-marca-50)); } :root[data-tema='oscuro'] .cierre .boton-claro:hover { background: rgb(226 221 211); } .cierre .boton-borde { background: transparent; color: rgb(var(--sobre-relleno)); border-color: rgb(var(--sobre-relleno) / 0.7); } .cierre .boton-borde:hover { background: rgb(0 0 0 / 0.15); } .cierre :focus-visible { outline-color: rgb(var(--sobre-relleno)); } /* ---------- Pie ---------- */ .pie { padding: 3rem 0 2rem; border-top: 1px solid var(--linea); font-size: 0.9375rem; } .pie-rejilla { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 2rem; } .pie-marca { display: grid; gap: 1rem; justify-items: start; align-content: start; } .pie-marca img { width: 140px; } .pie-marca p { color: var(--tinta-2); max-width: 26rem; } .pie h2 { margin-bottom: 0.5rem; } .pie-lista { display: grid; } .pie ul a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--tinta); text-decoration: none; } .pie ul a:hover { color: var(--enlace); text-decoration: underline; } .pie-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--linea); color: var(--tinta-2); font-size: 0.875rem; } /* ---------- Pagina de privacidad ---------- */ .documento { padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) 0 clamp(3.5rem, 2.5rem + 4vw, 6rem); } .documento-cuerpo { max-width: 46rem; } .documento h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; margin: 0.75rem 0 1rem; } .documento-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; padding: 0.75rem 0; margin-bottom: 2rem; border-top: 1px solid var(--linea-fuerte); border-bottom: 1px solid var(--linea-fuerte); color: var(--tinta-2); font-size: 0.875rem; } .documento h2 { font-family: var(--serif); font-weight: 500; font-size: 1.375rem; line-height: 1.3; margin: 2.25rem 0 0.75rem; } .documento p, .documento li { font-size: 1.0625rem; line-height: 1.7; } .documento p + p { margin-top: 1rem; } .documento .lista-puntos { margin-top: 0.75rem; gap: 0.5rem; } .documento .lista-puntos li::before { top: 0.85em; } .documento .lista-puntos + p { margin-top: 1rem; } .documento p.rotulo { font-size: 0.75rem; line-height: 1rem; } /* Pie corto (privacidad y 404): solo la linea legal, sin doble raya. */ .pie > .contenedor > .pie-legal:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .marcador { padding: 0.0625rem 0.375rem; border: 1px dashed rgb(var(--c-aviso-700)); border-radius: var(--radio); background: rgb(var(--c-aviso-50)); color: rgb(var(--c-aviso-700)); font-family: var(--mono); font-size: 0.9em; font-weight: 500; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .aviso-caja { margin-top: 2.5rem; padding: 1.25rem 1.5rem; border: 1px solid var(--linea-fuerte); border-left: 3px solid rgb(var(--c-marca-600)); border-radius: var(--radio-md); background: var(--hoja); color: var(--tinta-2); } .documento .acciones-error { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; } .volver { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.75rem; font-weight: 500; } .volver svg { width: 1rem; height: 1rem; } /* ---------- Responsive ---------- */ @media (max-width: 1080px) { .heroe-rejilla { grid-template-columns: minmax(0, 1fr); } .heroe-visual { min-height: 0; max-width: 40rem; width: 100%; margin: 0 auto; } .destacado-sunat { grid-template-columns: minmax(0, 1fr); } .preguntas-rejilla { grid-template-columns: minmax(0, 1fr); } .preguntas-rejilla .seccion-cabeza { position: static; } } @media (max-width: 860px) { .ideas, .pasos { grid-template-columns: minmax(0, 1fr); } .idea, .idea + .idea, .paso, .paso + .paso { padding: 1.5rem 0; border-left: 0; } .idea + .idea, .paso + .paso { border-top: 1px solid var(--linea); } .funciones, .privacidad-rejilla, .planes, .precios-notas { grid-template-columns: minmax(0, 1fr); } .cierre-rejilla { grid-template-columns: minmax(0, 1fr); } .pie-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pie-marca { grid-column: 1 / -1; } } @media (max-width: 560px) { .heroe-visual { display: grid; justify-items: center; gap: 0; } .heroe-persona { width: 15rem; margin: 0 auto; } .heroe-fondo { width: 100%; height: 62%; top: auto; } .heroe .maqueta { position: relative; left: auto; bottom: auto; width: 100%; margin-top: -2.5rem; } .heroe-acciones .boton { flex: 1 1 100%; } .respuesta { padding-right: 0; } .cierre-acciones .boton { flex: 1 1 100%; } } /* ---------- Movimiento reducido e impresion ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; /* Sin transicion alguna: el cambio de tema es inmediato. */ transition: none !important; } } @media print { .cabecera, .cierre, .saltar, .boton-tema, .boton-menu { display: none !important; } .pregunta:not([open]) .respuesta { display: grid; } }