/* ========================================================================= MARCA PRIME ENERGY · la hoja que comparten TODOS los portales ========================================================================= PARA QUE EXISTE ESTE FICHERO Pedido por Alberto el 03/10/2026: «si quieres podemos buscar el codigo de esta pagina y los estilos de fuentes etc para que todos los portales que estemos haciendo sean iguales». Es UN SOLO FICHERO y se copia tal cual. No hay que enlazar un portal con otro: si el portal de clientes dependiera de que el de leads este en pie, una caida se llevaria los dos por delante, y por un fichero de estilos. Se copia, y punto. Lo que cambia, cambia en el original y se vuelve a copiar. LO QUE HAY AQUI Y LO QUE NO · SI: la tipografia, la paleta oficial, las medidas y las piezas que son iguales en todos los portales -la portada de entrada, los campos, los botones, el sol-. · NO: nada que sea de UN portal. Las tablas de leads, las liquidaciones o la ficha de un proveedor viven en su propia pantalla, porque no se parecen a nada del portal de clientes. LA TIPOGRAFIA ES ROBOTO, y es la misma que ya usa clientes.primenergy.es. No se eligio hoy: se comprobo. En el servidor, la app de clientes carga «fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;800;900», y las letras de su portada tienen la «a» de DOS pisos y la «g» de UNO -lo que descarta Poppins, que tambien esta cargada ahi para otra cosa- y son estrechas -lo que descarta Montserrat-. Y LO QUE FALTABA EN LEADS NO ERA LA FAMILIA, ERAN LOS PESOS. Un movil Android ya trae Roboto, asi que la pantalla no salia «en otra fuente»: salia en Roboto SIN los pesos 800 y 900, que el navegador tiene que inventarse engordando el 700. Por eso los titulares se veian mas anchos y mas blandos que los de clientes. Cargando los pesos de verdad, son identicos. SI GOOGLE NO CONTESTA no pasa nada: detras va la pila del sistema, que en Android es Roboto igualmente y en lo demas la de siempre. Una portada sin internet a Google sigue leyendose. ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;800;900&display=swap'); :root{ /* LA PALETA DIGITAL OFICIAL. Es la del PDF de marca, la de pantalla. Las otras dos versiones del PDF -mate y brillo- son de imprenta y NO se usan aqui. */ --verde:#21A645; /* verde de marca */ --lima:#7AB841; --lima2:#B0CB3C; --amar:#DEDE38; --v900:#0b2a1c; --v800:#113929; --v700:#17523a; --v600:#1d6b45; /* Colores de apoyo. NO son de marca: la paleta de marca es toda verde y amarilla, y con eso no se escribe texto corrido ni se marca un error. */ --tinta:#12211a; --gris:#5d6f68; --gris2:#8a9a94; --linea:#e4e9e7; --fondo:#f6f8f7; --blanco:#fff; --rojo:#C0341D; /* EL AMARILLO PALIDO DE LOS CAMPOS. Es de marca y es lo que hace que un formulario de Prime Energy se reconozca de lejos. */ --campo:#F4F2C9; --campo-b:#e7e4a8; --fuente:'Roboto',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI', Arial,sans-serif; --radio:14px; --radio-s:10px; --sombra:0 1px 2px rgba(17,57,41,.06), 0 8px 24px rgba(17,57,41,.07); } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ font-family:var(--fuente); color:var(--tinta); background:var(--blanco); -webkit-font-smoothing:antialiased; } a{color:var(--v700)} /* ========================================================================= LA PORTADA DE ENTRADA · igual en todos los portales ========================================================================= TRES PIEZAS, Y EL ORDEN CAMBIA CON EL ANCHO: en un ordenador en un movil ┌──────────┬───────┐ ┌───────────┐ │ verde │ │ │ verde │ el texto │ texto │ entrar│ ├───────────┤ ├──────────┤ │ │ entrar │ usuario y contraseña │ cajas │ │ ├───────────┤ └──────────┴───────┘ │ cajas │ lo que ofrece el portal └───────────┘ EN EL MOVIL, PRIMERO SE ENTRA Y LUEGO SE LEE. Pedido por Alberto el 03/10/2026 mirando el portal de clientes: «me gusta la distribucion que dimos al portal clientes en el movil: caja verde con texto, usuario-pwd, y debajo las cajas». Y tiene razon: quien abre esto en el movil viene a entrar, no a leer cuatro tarjetas. Antes habia que pasarlas todas para llegar al formulario. Son TRES HERMANOS y no uno dentro de otro, justo para poder reordenarlos sin tocar el HTML ni repetir las cajas dos veces. */ .portada{ display:grid; grid-template-columns:1.12fr 1fr; grid-template-rows:1fr auto; min-height:100vh; } .portada > .lado {grid-column:1;grid-row:1} .portada > .piezas {grid-column:1;grid-row:2} .portada > .entrada{grid-column:2;grid-row:1 / 3} /* El verde de las dos filas de la izquierda ACABA Y EMPIEZA en el mismo tono, para que la juntura no se vea. */ .lado{ position:relative;overflow:hidden;color:#fff;padding:56px 60px 34px; display:flex;flex-direction:column;justify-content:center; background: radial-gradient(1100px 700px at 12% 8%, #1d6b45 0%, rgba(29,107,69,0) 60%), linear-gradient(165deg,#15452f 0%,#113929 55%,#0d3022 100%); } .piezas{ position:relative;overflow:hidden;color:#fff;padding:0 60px 46px; background:linear-gradient(180deg,#0d3022 0%,#0b2a1c 100%); } .lado > *,.piezas > *{position:relative;z-index:1} /* Los aros de fondo. Decorativos: ni se leen ni se pulsan. */ .aro{position:absolute;border:1px solid rgba(255,255,255,.07);border-radius:50%; pointer-events:none} .aro.a1{width:540px;height:540px;left:-190px;top:-150px} .aro.a2{width:360px;height:360px;left:-110px;top:-60px} .aro.a3{width:760px;height:760px;right:-320px;bottom:-330px} /* LA MARCA, en blanco entero sobre el verde y SIN pastilla. La pastilla metia un rectangulo blanco en la unica pantalla que ve alguien que todavia no ha entrado, y partia en dos un fondo hecho para ser de una pieza. */ .marca{background:none;border-radius:0;padding:0;display:inline-block; box-shadow:none;margin-bottom:40px;width:max-content} .marca img{display:block;height:46px;width:auto} .lado h1{font-size:clamp(30px,3.3vw,46px);line-height:1.12;margin:0 0 20px; font-weight:800;letter-spacing:-.02em} .lado h1 em{font-style:normal;color:var(--lima2)} .lado .entradilla{font-size:16.5px;line-height:1.62;color:rgba(255,255,255,.84); max-width:40ch;margin:0} .rejilla{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:640px; margin-top:8px} .pieza{display:flex;gap:14px;align-items:flex-start; background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09); border-radius:var(--radio);padding:15px 16px} .pieza .ic{flex:0 0 36px;height:36px;border-radius:9px;background:rgba(255,255,255,.1); display:grid;place-items:center;color:var(--lima2)} .pieza .ic svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.9; stroke-linecap:round;stroke-linejoin:round} .pieza b{display:block;font-size:14.5px;font-weight:700;margin-bottom:2px} .pieza span{display:block;font-size:13px;color:rgba(255,255,255,.66);line-height:1.45} .piezas .pie{margin:26px 0 0;font-size:13.5px;color:rgba(255,255,255,.6)} /* ---- el lado de entrar ---- EL SOL. Los circulos concentricos con sus cruces, arriba a la derecha, en verde muy claro. Van en el fondo y en SVG: a cualquier tamaño de pantalla se dibujan limpios, y no son una imagen que haya que servir aparte. */ .entrada{ display:flex;align-items:center;justify-content:center;padding:48px 56px; background-color:#fff; background-image: url("data:image/svg+xml;utf8,"), radial-gradient(620px 420px at 100% 0%, #f3f8f4 0%, rgba(243,248,244,0) 62%); background-repeat:no-repeat,no-repeat; background-position:right -96px top -84px,right top; } .caja{width:100%;max-width:430px} .caja h2{font-size:31px;line-height:1.15;margin:0 0 8px;font-weight:800; letter-spacing:-.02em} .caja .sub{font-size:15px;color:var(--gris);margin:0 0 28px;line-height:1.55} label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.09em; text-transform:uppercase;color:var(--gris);margin:0 0 7px} .campo{width:100%;background:var(--campo);border:1px solid var(--campo-b); border-radius:var(--radio-s);padding:14px 15px;font-size:15.5px;color:var(--tinta); font-family:inherit;outline:none;transition:border-color .15s, box-shadow .15s} .campo::placeholder{color:#a9a470} .campo:focus{border-color:var(--verde);box-shadow:0 0 0 3px rgba(33,166,69,.18)} .grupo{margin-bottom:17px} .grupo.con-pista{margin-bottom:9px} .enlace-der{display:block;text-align:right;font-size:13.5px;font-weight:700; color:var(--v600);text-decoration:none;margin:0 0 20px} .enlace-der:hover{text-decoration:underline} /* EL PIE DE LA PORTADA. Lo mismo que en clientes: quien lo hace y con quien. */ .pie-marca{margin:30px 0 0;padding-top:18px;border-top:1px solid var(--linea); font-size:13px;color:var(--gris2);display:flex;gap:14px;align-items:center; flex-wrap:wrap} .pie-marca .socio{display:flex;gap:7px;align-items:center;color:var(--gris); font-weight:700} .pie-marca .socio::before{content:'';width:9px;height:9px;border-radius:50%; background:var(--verde)} /* ========================================================================= EN UNA TABLET Y EN UN MOVIL ========================================================================= */ @media (max-width:980px){ /* UNA COLUMNA, Y EN ESTE ORDEN: el verde con el texto, entrar, y las cajas. Es lo unico que cambia de sitio, y cambia solo con decir en que fila va cada uno. */ .portada{grid-template-columns:1fr;grid-template-rows:auto auto auto;min-height:0} .portada > .lado {grid-column:1;grid-row:1} .portada > .entrada{grid-column:1;grid-row:2} .portada > .piezas {grid-column:1;grid-row:3} .lado{padding:40px 22px 34px} .piezas{padding:30px 22px 40px} .entrada{padding:38px 22px 34px;background-position:right -150px top -150px,right top} .marca{margin-bottom:26px} .marca img{height:40px} .rejilla{grid-template-columns:1fr;max-width:none;margin-top:0} .caja{max-width:none} .aro.a3{display:none} } @media (max-width:620px){ .lado h1{font-size:27px} .lado .entradilla{font-size:15.5px} .caja h2{font-size:26px} }