/* ============================================================ PROENERGY — SISTEMA DE DISEÑO (Fase 4) Hoja de estilos central. Toda decisión visual del sitio sale de estas variables. Si un valor no está aquí, no se usa. Requiere en el de cada página (además de esta hoja): ============================================================ */ /* ------------ TIPOGRAFÍAS DE LA IDENTIDAD ------------ */ /* Sinkin Sans: misma fuente del material impreso (autoalojada) */ @font-face { font-family: 'Sinkin Sans'; src: url('../Fonts/SinkinSans/SinkinSans-700Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Sinkin Sans'; src: url('../Fonts/SinkinSans/SinkinSans-800Black.otf') format('opentype'); font-weight: 800; font-style: normal; font-display: swap; } /* ------------ VARIABLES (tokens del sistema) ------------ */ :root { /* Color — paleta oficial PE_paleta-de-color */ --pe-crema: #F0EEE9; /* fondo base */ --pe-marino: #151F2F; /* secciones de contraste */ --pe-teal: #11363E; /* secundario */ --pe-naranja: #FE4306; /* EXCLUSIVO CTA principal — máx. 1 por pantalla */ --pe-naranja-hover: #d93800; --pe-carbon: #292C2D; /* texto sobre fondos claros */ --pe-blanco: #FFFFFF; --pe-whatsapp: #25D366; /* solo el botón flotante */ /* Tipografía */ --pe-font-head: 'Sinkin Sans', 'Arial Black', sans-serif; /* titulares 700/800 */ --pe-font-body: 'Instrument Sans', 'Segoe UI', sans-serif; /* texto */ --pe-font-num: 'JetBrains Mono', 'Consolas', monospace; /* TODAS las cifras */ /* Escala tipográfica — 6 niveles, sin excepciones */ --pe-fs-display: clamp(2.1rem, 6vw, 3.25rem); /* 1. Hero */ --pe-fs-title: clamp(1.55rem, 4.5vw, 2.25rem);/* 2. Título de sección */ --pe-fs-subtitle: clamp(1.15rem, 3vw, 1.4rem); /* 3. Subtítulo / título de tarjeta */ --pe-fs-lead: clamp(1.05rem, 2.5vw, 1.2rem); /* 4. Texto destacado */ --pe-fs-body: 1rem; /* 5. Texto normal */ --pe-fs-small: 0.85rem; /* 6. Etiquetas / notas */ /* Geometría — idéntica en todo el sitio */ --pe-radius: 12px; /* esquinas (heredado del impreso) */ --pe-shadow: 0 8px 24px rgba(21, 31, 47, 0.12); /* única sombra permitida */ /* Ritmo */ --pe-space-section: clamp(4rem, 9vw, 6.5rem); /* respiración vertical de secciones */ --pe-container: 1140px; /* ancho máximo uniforme */ --pe-content: 820px; /* ancho máximo de texto corrido */ } /* ------------ BASE ------------ */ .pe-body, body.pe { background-color: var(--pe-crema); color: var(--pe-carbon); font-family: var(--pe-font-body); font-size: var(--pe-fs-body); line-height: 1.7; margin: 0; } /* ------------ ESCALA TIPOGRÁFICA ------------ */ .pe-display { font-family: var(--pe-font-head); font-weight: 800; font-size: var(--pe-fs-display); line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 1rem 0; } .pe-title { font-family: var(--pe-font-head); font-weight: 700; font-size: var(--pe-fs-title); line-height: 1.2; margin: 0 0 1rem 0; } .pe-subtitle { font-family: var(--pe-font-head); font-weight: 700; font-size: var(--pe-fs-subtitle); line-height: 1.3; margin: 0 0 0.6rem 0; } .pe-lead { font-family: var(--pe-font-body); font-size: var(--pe-fs-lead); line-height: 1.7; margin: 0 0 1rem 0; } .pe-text { font-family: var(--pe-font-body); font-size: var(--pe-fs-body); line-height: 1.7; margin: 0 0 1rem 0; } .pe-small { font-family: var(--pe-font-body); font-size: var(--pe-fs-small); line-height: 1.5; } /* TODAS las cifras del sitio: pesos, kWp, años, porcentajes */ .pe-num { font-family: var(--pe-font-num); font-weight: 700; font-variant-numeric: tabular-nums; } /* ------------ CONTENEDORES Y RITMO ------------ */ .pe-container { max-width: var(--pe-container); margin: 0 auto; padding: 0 1.25rem; } .pe-content { max-width: var(--pe-content); margin: 0 auto; } .pe-section { padding: var(--pe-space-section) 0; background-color: var(--pe-crema); color: var(--pe-carbon); } /* Sección de contraste: marino con texto crema */ .pe-section--dark { background-color: var(--pe-marino); color: var(--pe-crema); } /* Cuadrícula sutil heredada de los one-pagers (solo sobre marino) */ .pe-grid-pattern { background-image: linear-gradient(rgba(240, 238, 233, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(240, 238, 233, 0.055) 1px, transparent 1px); background-size: 36px 36px; } /* ------------ ETIQUETA DE SECCIÓN (kicker) ------------ */ .pe-tag { display: inline-block; font-family: var(--pe-font-body); font-weight: 600; font-size: var(--pe-fs-small); letter-spacing: 2px; text-transform: uppercase; color: var(--pe-teal); margin-bottom: 0.9rem; } .pe-section--dark .pe-tag { color: var(--pe-crema); opacity: 0.7; } /* ------------ BOTONES (solo estos dos) ------------ */ .pe-btn { display: inline-block; font-family: var(--pe-font-head); font-weight: 700; font-size: var(--pe-fs-body); text-decoration: none; text-align: center; padding: 0.95rem 1.9rem; border-radius: var(--pe-radius); border: 2px solid transparent; cursor: pointer; transition: background-color 0.25s ease, color 0.25s ease, transform 0.15s ease; } .pe-btn:hover, .pe-btn:focus { transform: translateY(-2px); } /* Primario: naranja. REGLA DURA: máx. un elemento naranja por pantalla. */ .pe-btn--primary { background-color: var(--pe-naranja); color: var(--pe-blanco); } .pe-btn--primary:hover, .pe-btn--primary:focus { background-color: var(--pe-naranja-hover); color: var(--pe-blanco); } /* Secundario: contorno. Toma el color del fondo donde vive. */ .pe-btn--secondary { background-color: transparent; border-color: var(--pe-marino); color: var(--pe-marino); } .pe-btn--secondary:hover, .pe-btn--secondary:focus { background-color: var(--pe-marino); color: var(--pe-crema); } .pe-section--dark .pe-btn--secondary { border-color: var(--pe-crema); color: var(--pe-crema); } .pe-section--dark .pe-btn--secondary:hover, .pe-section--dark .pe-btn--secondary:focus { background-color: var(--pe-crema); color: var(--pe-marino); } .pe-btn i { margin-right: 0.5rem; } @media (max-width: 576px) { .pe-btn { display: block; width: 100%; max-width: 420px; margin-left: auto; margin-right: auto; } } /* ------------ TARJETA (un solo estilo) ------------ */ .pe-card { background-color: var(--pe-blanco); border-radius: var(--pe-radius); box-shadow: var(--pe-shadow); padding: 1.75rem 1.5rem; } .pe-section--dark .pe-card { background-color: var(--pe-teal); color: var(--pe-crema); box-shadow: none; } /* ------------ CHIP (borde naranja, heredado del impreso) ------------ */ .pe-chip { display: inline-block; font-family: var(--pe-font-body); font-weight: 600; font-size: var(--pe-fs-small); color: var(--pe-carbon); border: 1.5px solid var(--pe-naranja); border-radius: var(--pe-radius); padding: 0.4rem 0.9rem; margin: 0.2rem 0.25rem 0.2rem 0; } .pe-section--dark .pe-chip { color: var(--pe-crema); } /* ------------ FOTO CON VELO A MARINO ------------ */ .pe-photo { position: relative; border-radius: var(--pe-radius); overflow: hidden; display: block; } .pe-photo img { display: block; width: 100%; height: 100%; object-fit: cover; } .pe-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(21, 31, 47, 0.65), rgba(21, 31, 47, 0.08) 55%); pointer-events: none; } /* Variante hero: velo completo para poner texto encima */ .pe-photo--hero::after { background: linear-gradient(rgba(21, 31, 47, 0.78), rgba(21, 31, 47, 0.78)); } /* ------------ ACORDEÓN (FAQ) — sobre marcado de Bootstrap ------------ */ .pe-accordion .accordion-item { background-color: var(--pe-blanco); border: none; border-radius: var(--pe-radius) !important; margin-bottom: 0.75rem; box-shadow: var(--pe-shadow); overflow: hidden; } .pe-accordion .accordion-button { background-color: var(--pe-blanco); color: var(--pe-marino); font-family: var(--pe-font-head); font-weight: 700; font-size: var(--pe-fs-body); padding: 1.1rem 1.25rem; box-shadow: none; } .pe-accordion .accordion-button:not(.collapsed) { background-color: var(--pe-teal); color: var(--pe-crema); } .pe-accordion .accordion-button:focus { box-shadow: none; } .pe-accordion .accordion-button:not(.collapsed)::after { filter: brightness(0) invert(1); } .pe-accordion .accordion-body { font-family: var(--pe-font-body); color: var(--pe-carbon); font-size: var(--pe-fs-body); line-height: 1.75; padding: 1.1rem 1.25rem; } /* ------------ PASOS NUMERADOS ------------ */ .pe-step { display: flex; align-items: flex-start; gap: 1.1rem; padding: 1.3rem 1.25rem; border-radius: var(--pe-radius); margin-bottom: 0.9rem; } .pe-step-number { flex-shrink: 0; width: 46px; height: 46px; border-radius: var(--pe-radius); background-color: var(--pe-teal); color: var(--pe-crema); font-family: var(--pe-font-num); font-weight: 700; font-size: 1.25rem; display: flex; align-items: center; justify-content: center; } .pe-step--highlight { background-color: var(--pe-teal); box-shadow: var(--pe-shadow); } .pe-step--highlight .pe-step-number { background-color: var(--pe-crema); color: var(--pe-teal); } /* ------------ CIFRAS GRANDES (barra de credibilidad, specs) ------------ */ .pe-stat { text-align: center; } .pe-stat .pe-stat-value { font-family: var(--pe-font-num); font-weight: 700; font-size: clamp(1.6rem, 5vw, 2.4rem); line-height: 1.15; } .pe-stat .pe-stat-label { font-family: var(--pe-font-body); font-size: var(--pe-fs-small); opacity: 0.75; margin-top: 0.3rem; } /* ------------ BASE PARA PÁGINAS HEREDADAS ------------ */ /* Con class="pe" en el , las páginas del desarrollador original adoptan las tipografías y colores del sistema sin reescribir todo su marcado. */ .pe h1, .pe h2, .pe h3, .pe h4, .pe h5, .pe h6 { font-family: var(--pe-font-head); font-weight: 700; } .pe footer { background-color: var(--pe-marino); color: var(--pe-crema); padding: 2rem 0; } .pe footer p { margin: 0; } .pe .text-primary { color: var(--pe-teal) !important; } .pe .bg-light { background-color: var(--pe-crema) !important; } /* ------------ BOTÓN FLOTANTE DE WHATSAPP ------------ */ .whatsapp-float { position: fixed; right: 18px; bottom: 18px; z-index: 9000; width: 60px; height: 60px; border-radius: 50%; background-color: var(--pe-whatsapp); color: var(--pe-blanco); display: flex; align-items: center; justify-content: center; font-size: 2rem; box-shadow: var(--pe-shadow); text-decoration: none; transition: transform 0.2s ease; } .whatsapp-float:hover, .whatsapp-float:focus { color: var(--pe-blanco); transform: scale(1.08); } @media (max-width: 576px) { .whatsapp-float { width: 56px; height: 56px; font-size: 1.8rem; right: 14px; bottom: 14px; } }