/* ============================================================ HiCash · tokens de la web hicash.cl Valores tomados de la app (ui/estilos.py). Listos para producción. Roboto autoalojado + system-ui de respaldo. Sin dependencias externas. ============================================================ */ :root{ /* --- tipografía (Roboto se carga desde el ) --------------------------------------------------- */ --fuente: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif; --t-11:11px; --t-13:13px; --t-16:16px; --t-19:19px; --t-23:23px; --t-28:28px; --t-33:33px; --t-40:40px; --t-48:48px; --t-58:58px; /* extensión web, razón 1,2 */ --peso-cuerpo:400; --peso-enfasis:600; --peso-heroe:700; /* --- espaciado (rejilla de 4) y radios ----------------------------- */ --e-0:0; --e-2:2px; --e-4:4px; --e-8:8px; --e-12:12px; --e-16:16px; --e-24:24px; --e-32:32px; --r-4:4px; /* marcas, puntos, barras finas */ --r-12:12px; /* chips, campos, botones, casillas de calendario */ --r-18:18px; /* tarjetas */ --r-22:22px; /* paneles, cabecera, tarjeta héroe */ /* --- medidas de página --------------------------------------------- */ --ancho-max:1120px; --margen-lateral:clamp(16px,3cqw,32px); --alto-seccion:clamp(40px,5.5cqw,80px); --ancho-lectura:46em; /* columna de texto legal y FAQ */ --icono-16:16px; --icono-19:19px; --icono-23:23px; --icono-48:48px; /* --- neutros CLARO -------------------------------------------------- */ --bg1:#DDD0B7; --bg2:#E8DDC7; --pg1:#CFC0A2; --pg2:#DCCFB5; --pg:#DCCFB5; --fr:#8C9496; --fr-e:#7E8688; --fr-t:#1E2325; --fr-d:rgba(0,0,0,.42); /* marco del teléfono de la maqueta */ /* fondo de página: un paso más oscuro que el de la app */ --bg:#E8DDC7; --bga:#F5EDD7; --sf:#FEFCF8; --sf95:rgba(254,252,248,.95); --sfa:#FCF6EC; --sfa94:rgba(252,246,236,.94); --bd:#D8CFBD; --dv:#E6DFD0; --tx:#342E25; --tx2:#696157; --tx3:#8E867B; /* --- roles CLARO: TEXTO / FILL / TINTE ------------------------------ */ --ma-t:#258173; --ma-f:#31A391; --ma-i:#DBF0EB; /* MARCA */ --in-t:#248351; --in-f:#30A668; --in-i:#E0F0E5; /* INGRESO */ --ga-t:#DC2C3A; --ga-f:#F5625F; --ga-i:#FDE7E4; /* GASTO */ --ah-t:#755AEE; --ah-f:#9D80F2; --ah-i:#EFE9F8; /* AHORRO */ --av-t:#A96218; --av-f:#D57D22; --av-i:#F8E9DE; /* AVISO */ --nf-t:#2C7AAC; --nf-f:#399AD8; --nf-i:#E1EDFA; /* INFO */ /* --- degradado de marca (dos colores, sin azul) --------------------- */ --gr1:#19976D; --gr2:#18958B; --degradado:linear-gradient(135deg,var(--gr1),var(--gr2)); /* --- matices por sección (barra inferior de la app) ------------------ */ --n1a:#258173; --n1o:#6F938B; --n1p:#DBF0EB; /* Inicio */ --n2a:#755AEE; --n2o:#9088A0; --n2p:#EFE9F8; /* Ahorros */ --n3a:#2C7AAC; --n3o:#788EA3; --n3p:#E1EDFA; /* Movimientos */ --n4a:#277E8F; --n4o:#6C929B; --n4p:#DAF0F5; /* Calendario */ --n5a:#43821B; --n5o:#838F78; --n5p:#E6EEE0; /* Estadísticas */ --n6a:#B45188; --n6o:#A18392; --n6p:#F9E7EF; /* Simulador */ /* --- serie de gráficos (sin significado semántico) ------------------- */ --s1:#1FBBA6; --s2:#BD98DE; --s3:#E1981C; --s4:#63AEE5; --s5:#E28DB7; --s6:#72B941; --s7:#A2A2DB; --s8:#D9987B; /* --- cantos y sombras (Fluent/Mica: canto claro, sombra corta) ------- */ --edge:rgba(255,255,255,.55); --bar-edge:rgba(255,255,255,.65); --edge-heroe:rgba(255,255,255,.22); --agua:rgba(255,255,255,.14); /* marca de agua de la billetera */ --shc:0 1px 2px rgba(52,46,37,.06),0 10px 28px rgba(110,91,62,.13); /* tarjeta */ --shb:0 8px 20px rgba(25,151,109,.22); /* cabecera y héroe */ --shbar:0 -4px 16px rgba(0,0,0,.16); /* barra inferior */ } @media (prefers-color-scheme: dark){ :root{ --bg1:#0B1617; --bg2:#142122; --pg1:#0B1617; --pg2:#142122; --pg:#0B1617; --fr:#2C3233; --fr-e:#8A9294; --fr-t:rgba(255,255,255,.9); --fr-d:rgba(255,255,255,.5); --bg:#0B1617; --bga:#142122; --sf:#1B2C2D; --sf95:rgba(27,44,45,.95); --sfa:#233637; --sfa94:rgba(35,54,55,.94); --bd:#394A4B; --dv:#2E3C3D; --tx:#EEF1F2; --tx2:#A0ACB0; --tx3:#808E93; --ma-t:#36B29E; --ma-f:#247F71; --ma-i:#273834; --in-t:#35B572; --in-f:#238150; --in-i:#2C382F; --ga-t:#F67B74; --ga-f:#D92B39; --ga-i:#41312F; --ah-t:#AB8FF4; --ah-f:#7258EE; --ah-i:#37333F; --av-t:#E78826; --av-f:#A66118; --av-i:#3D332A; --nf-t:#3FA8EB; --nf-f:#2B78A9; --nf-i:#2B3640; --gr1:#265E4C; --gr2:#245C57; --n1a:#3BBFAA; --n1o:#62867E; --n1p:#2E3F3C; --n2a:#B79DF5; --n2o:#837B92; --n2p:#3E3A46; --n3a:#56B3F5; --n3o:#6B8196; --n3p:#333D48; --n4a:#3EBAD2; --n4o:#5F858E; --n4p:#2C3F44; --n5a:#65C12C; --n5o:#76836C; --n5p:#383E32; --n6a:#F687C3; --n6o:#937785; --n6p:#47383F; --edge:rgba(255,255,255,.07); --bar-edge:rgba(255,255,255,.10); --shc:0 1px 2px rgba(0,0,0,.30),0 12px 30px rgba(0,0,0,.45); --shb:0 8px 20px rgba(0,0,0,.35); } } /* ============================================================ Reglas de uso (no son CSS, son el contrato del sistema) · TEXTO → solo texto (≥4,5:1) · FILL → iconos, insignias, barras, puntos, bordes (3:1) · TINTE → fondo de recuadros (≤1,2:1) Un FILL nunca pinta una superficie grande: ahí va TINTE. · Proporción: neutros ~75 % · MARCA ~15 % · los cinco roles ~10 %. · Peso 700 una sola vez por pantalla: la cifra héroe. · Blanco sobre el degradado claro da 3,69:1 → solo ≥19 px y peso 600. · Un importe negativo va SIEMPRE en --ga-t. ============================================================ */ /* ============================================================ Reposición base ============================================================ */ *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;background:var(--pg);color:var(--tx);font-family:var(--fuente);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased} img{max-width:100%} p{text-wrap:pretty} a{color:var(--ma-t);text-decoration:none} a:hover{text-decoration:underline} summary{list-style:none} summary::-webkit-details-marker{display:none} ::selection{background:var(--ma-i);color:var(--ma-t)} /* ============================================================ Ritmo de la página y aparición al desplazar Añadido el 12/09/2026. Felipe, viendo el sitio: «le faltan animaciones a la página, y que no se vea como un solo lienzo cuando vaya bajando, si no que con espacios uniformes entre cada una». **Por qué se veía como un lienzo, medido y no supuesto:** las bandas alternaban `var(--pg)` con `linear-gradient(var(--pg1),var(--pg2))`, y `--pg2` es EXACTAMENTE `--pg` (#DCCFB5). O sea que cada degradado terminaba en el color con el que empezaba la banda siguiente: la costura no existía. Se arregla con una línea de separación real, no subiendo el contraste del fondo —que rompería la paleta de la app. ============================================================ */ .seccion{ padding:var(--alto-seccion) 0; /* el MISMO alto para todas: ese es el punto */ border-top:1px solid var(--dv); } .seccion:first-of-type{border-top:0} /* La cinta de la sección: solo el nombre. Hasta el 26/09 llevaba un número delante (1 · El problema, 2 · Cómo funciona…); Felipe pidió quitarlo y dejar solo el título. */ .paso{ display:inline-flex;align-items:center;gap:8px; font-size:var(--t-11);font-weight:var(--peso-enfasis); letter-spacing:.09em;text-transform:uppercase; padding:8px 12px;border-radius:var(--r-12); } /* --- aparición al desplazar --------------------------------------- Sin librería y sin `animation` en bucle: una transición que se dispara una vez. Lo que se mueve es poco a propósito —18 px y una opacidad— porque una landing que salta al desplazarse se lee peor, no mejor. */ .rev{opacity:0;transform:translateY(18px); transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1)} .rev.dentro{opacity:1;transform:none} /* Escalonado dentro de una misma banda: las tarjetas entran una tras otra en vez de todas de golpe. */ .rev[data-retraso="1"]{transition-delay:.08s} .rev[data-retraso="2"]{transition-delay:.16s} .rev[data-retraso="3"]{transition-delay:.24s} /* **Sin JavaScript no se esconde nada.** Si el script no corre, `.rev` se queda invisible y la página desaparece entera: por eso el estado oculto lo enciende el propio script poniendo `js` en el . */ html:not(.js) .rev{opacity:1;transform:none} /* Y quien pide menos movimiento no lo recibe: el contenido aparece sin transición, no «más despacio». */ @media (prefers-reduced-motion: reduce){ .rev,.rev.dentro{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} } /* ============================================================ Movimiento de la página (26/09/2026) Felipe: «quiero que añadas animaciones a la página». Todo es de una sola vez o responde al puntero: nada se mueve en bucle mientras se lee. Y todo se apaga con prefers-reduced-motion, al final. ============================================================ */ /* La cabecera baja y la portada sube al cargar. Con `both` el estado inicial se aplica desde el primer cuadro: no hay parpadeo. */ @keyframes hc-baja{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}} @keyframes hc-sube{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}} @keyframes hc-aparece{from{opacity:0}to{opacity:1}} header{animation:hc-baja .55s cubic-bezier(.22,.61,.36,1) both} .heroe > div > *{animation:hc-sube .7s cubic-bezier(.22,.61,.36,1) both} .heroe > div > *:nth-child(2){animation-delay:.15s} .heroe > div > *:nth-child(3){animation-delay:.3s} .portada > div > *{animation:hc-sube .6s cubic-bezier(.22,.61,.36,1) both} .portada > div > *:nth-child(2){animation-delay:.08s} .portada > div > *:nth-child(3){animation-delay:.16s} /* Botones: se levantan al pasar y se hunden al pulsar. */ .boton{transition:transform .2s cubic-bezier(.22,.61,.36,1),box-shadow .2s,filter .2s} .boton:hover{transform:translateY(-2px);filter:brightness(1.04);text-decoration:none} .boton:active{transform:translateY(0) scale(.98)} .boton .material-icons{transition:transform .25s cubic-bezier(.22,.61,.36,1)} .boton:hover .material-icons{transform:translateX(3px)} /* Enlaces del pie y del índice lateral: un subrayado que crece. */ footer a,aside nav a{background-image:linear-gradient(currentColor,currentColor); background-size:0 1px;background-repeat:no-repeat;background-position:0 100%; transition:background-size .25s ease} footer a:hover,aside nav a:hover{background-size:100% 1px;text-decoration:none} /* Preguntas frecuentes: la respuesta entra al abrir, y el título se desplaza un poco al pasar. */ details > summary{transition:color .2s,padding-left .2s} details > summary:hover{color:var(--ma-t);padding-left:4px} details[open] > :not(summary){animation:hc-sube .35s cubic-bezier(.22,.61,.36,1) both} /* ---------- La ventana de contacto (sitio.js) ---------- */ .contacto-fondo{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center; padding:16px;background:rgba(20,18,14,.45);opacity:0;visibility:hidden; transition:opacity .25s,visibility 0s linear .25s} .contacto-fondo.abierto{opacity:1;visibility:visible;transition:opacity .25s} .contacto-caja{position:relative;width:100%;max-width:420px;background:var(--sf);color:var(--tx); border:1px solid var(--edge);border-radius:var(--r-22);box-shadow:var(--shc); padding:32px 24px 24px;text-align:center; transform:translateY(16px) scale(.97);transition:transform .3s cubic-bezier(.22,.61,.36,1)} .contacto-fondo.abierto .contacto-caja{transform:none} .contacto-caja h2{font-size:var(--t-23);font-weight:600;margin:12px 0 0} .contacto-caja p{font-size:var(--t-16);color:var(--tx2);margin:8px 0 0} .contacto-icono{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:24px; background:var(--ma-i);color:var(--ma-t)} .contacto-correo{margin:16px 0 0;padding:12px;border-radius:var(--r-12);background:var(--sfa); border:1px solid var(--bd);font-size:var(--t-19);font-weight:600;color:var(--ma-t); word-break:break-all;user-select:all} .contacto-botones{display:flex;flex-direction:column;gap:8px;margin-top:16px} .contacto-b{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px; padding:12px 16px;border-radius:var(--r-12);border:1px solid var(--bd);background:var(--sf); color:var(--ma-t);font:600 var(--t-16)/1.2 var(--fuente);cursor:pointer;text-decoration:none; transition:transform .15s,background-color .2s,border-color .2s} .contacto-b:hover{text-decoration:none;background:var(--ma-i);border-color:var(--ma-i)} .contacto-b:active{transform:scale(.98)} .contacto-b.principal{background:var(--degradado);color:#fff;border-color:transparent} .contacto-b.principal:hover{filter:brightness(1.06);background:var(--degradado)} .contacto-b.ok{background:var(--in-f);border-color:var(--in-f);color:#fff} .contacto-b .material-icons-round{font-size:19px;line-height:1} .contacto-x{position:absolute;top:12px;right:12px;width:40px;height:40px;border:0;border-radius:20px; background:transparent;color:var(--tx2);cursor:pointer;display:grid;place-items:center; transition:background-color .2s} .contacto-x:hover{background:var(--sfa)} /* Quien pide menos movimiento no recibe nada de lo de arriba. */ @media (prefers-reduced-motion: reduce){ header,.heroe > div > *,.portada > div > *,details[open] > :not(summary){animation:none} .boton,.boton:hover,.boton:active,.boton .material-icons{transition:none;transform:none} .contacto-fondo,.contacto-caja{transition:none} } /* ============================================================ El video (26/09/2026) Un botón con la miniatura, no un