/* GGM Soluciones - estilos de las paginas de servicio y zonas */ :root { --fondo: #00020f; --fondo-alt: #060b22; --borde: #131a3a; --texto: #a7adbe; --titulo: #ffffff; --azul: #4c75ff; --azul-osc: #1a4fff; --verde: #25d366; /* Cifras destacadas (ingresos/gastos, beneficio, alertas) fuera de los chips: mismos colores que antes en oscuro, pero como variable para poder oscurecerlos en el tema claro sin tocar cada plantilla. */ --cifra-ok: #4ade80; --cifra-aviso: #fbbf24; --cifra-mal: #f87171; --azul-texto: #8fabff; } /* Tema claro: se activa con data-tema="claro" en , guardado en localStorage por el interruptor del menu lateral (solo panel admin). */ :root[data-tema="claro"] { --fondo: #f4f6fb; --fondo-alt: #ffffff; --borde: #e1e5f0; --texto: #495178; --titulo: #12162e; --azul: #3556d6; --azul-osc: #24408f; --cifra-ok: #0a7a3f; --cifra-aviso: #8a5000; --cifra-mal: #c2231c; --azul-texto: #2a56d6; } * { box-sizing: border-box; } body { margin: 0; background: var(--fondo); color: var(--texto); font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased; } .contenedor { width: 100%; max-width: 900px; margin: 0 auto; padding: 0 24px; } h1, h2, h3 { color: var(--titulo); line-height: 1.25; margin: 0 0 16px; } h1 { font-size: clamp(30px, 5vw, 46px); letter-spacing: -.02em; } h2 { font-size: clamp(23px, 3.4vw, 31px); margin-top: 52px; letter-spacing: -.01em; } h3 { font-size: 19px; margin-top: 30px; } p { margin: 0 0 18px; } a { color: var(--azul); } /* Cabecera */ .cab { position: sticky; top: 0; z-index: 50; background: rgba(0, 2, 15, .88); backdrop-filter: blur(12px); border-bottom: 1px solid var(--borde); } .cab .contenedor { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; padding-bottom: 14px; } .cab img { height: 38px; width: auto; display: block; } .btn { display: inline-block; padding: 13px 24px; border-radius: 100px; background: linear-gradient(180deg, var(--azul) 0%, var(--azul-osc) 100%); color: #fff; font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; transition: transform .2s ease, box-shadow .2s ease; } .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(76, 117, 255, .4); } .btn-wa { background: var(--verde); } .btn-wa:hover { box-shadow: 0 8px 26px rgba(37, 211, 102, .4); } /* Migas */ .migas { font-size: 14px; padding: 22px 0 0; color: #6b7392; } .migas a { color: #6b7392; text-decoration: none; } .migas a:hover { color: var(--azul); } /* Portada de la pagina */ .portada { padding: 34px 0 10px; } .entradilla { font-size: 19px; color: #c3c9dc; } /* Bloques */ .tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; margin: 26px 0; } .tarjeta { border: 1px solid var(--borde); border-radius: 16px; padding: 24px; background: var(--fondo-alt); } .tarjeta h3 { margin-top: 0; } .tarjeta p:last-child { margin-bottom: 0; } ul.lista { list-style: none; padding: 0; margin: 0 0 20px; } ul.lista li { position: relative; padding-left: 26px; margin-bottom: 11px; } ul.lista li::before { content: "+"; position: absolute; left: 0; color: var(--azul); font-weight: 700; } /* Llamada a la accion */ .cta { margin: 56px 0; padding: 38px 30px; border: 1px solid var(--borde); border-radius: 20px; background: radial-gradient(120% 140% at 50% 0%, #0d1636 0%, var(--fondo-alt) 60%); text-align: center; } .cta h2 { margin-top: 0; } .cta .acciones { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 22px; } /* Preguntas frecuentes */ details { border-bottom: 1px solid var(--borde); padding: 16px 0; } details summary { color: var(--titulo); font-weight: 600; cursor: pointer; list-style: none; } details summary::-webkit-details-marker { display: none; } details summary::before { content: "+ "; color: var(--azul); font-weight: 700; } details[open] summary::before { content: "− "; } details p { margin: 14px 0 0; } /* Pie */ .pie { margin-top: 70px; border-top: 1px solid var(--borde); padding: 40px 0; font-size: 15px; } .pie-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 28px; } .pie h3 { font-size: 15px; margin: 0 0 12px; } .pie ul { list-style: none; padding: 0; margin: 0; } .pie li { margin-bottom: 9px; } .pie a { color: var(--texto); text-decoration: none; } .pie a:hover { color: var(--azul); } .pie-legal { margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--borde); font-size: 14px; color: #6b7392; } @media (max-width: 600px) { body { font-size: 16px; } .cab .contenedor { padding-top: 11px; padding-bottom: 11px; } .cab img { height: 32px; } .btn { padding: 11px 18px; font-size: 14px; } .cta { padding: 30px 20px; } }