/* ============================================================ 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; } /* ------------ GARANTÍA DE POR VIDA (diferenciador) ------------ */ /* Recuadro destacado: fondo blanco con la barra lateral naranja del sistema */ .pe-warranty-life { background-color: var(--pe-blanco); border-left: 5px solid var(--pe-naranja); border-radius: var(--pe-radius); box-shadow: var(--pe-shadow); padding: 1rem 1.25rem; margin-top: 0.9rem; } /* ------------ 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: 3.5rem 1.5rem; } .pe footer p { margin: 0; } .pe-footer-inner { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2rem; } .pe-footer-offices { width: 100%; } .pe-footer-offices-label { font-family: var(--pe-font-num); font-size: 0.67rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(240, 238, 233, 0.38); display: block; text-align: center; margin-bottom: 1.25rem; } .pe-footer-offices-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.25rem 3rem; max-width: 720px; margin: 0 auto; } .pe-footer-office-name { font-family: var(--pe-font-num); font-size: 0.67rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(240, 238, 233, 0.48); display: block; margin-bottom: 0.35rem; } .pe-footer-office-addr { font-style: normal; font-size: 0.82rem; color: rgba(240, 238, 233, 0.72); line-height: 1.55; margin: 0; } .pe-footer-copy { font-size: 0.78rem; color: rgba(240, 238, 233, 0.32); } @media (max-width: 640px) { .pe-footer-offices-grid { grid-template-columns: 1fr; gap: 1.25rem; text-align: center; } } .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; } } /* ------------ CIFRAS DE CREDIBILIDAD SOBRE FONDO CLARO ------------ */ /* Sobre fondo crema, los valores numéricos de .pe-stat se muestran en teal */ .pe-section .pe-stat .pe-stat-value { color: var(--pe-teal); } /* ------------ BADGE DE PASO DESTACADO — va con .pe-step ------------ */ .step-badge { display: inline-block; font-family: var(--pe-font-body); font-weight: 700; font-size: 0.75rem; letter-spacing: 1px; text-transform: uppercase; background-color: var(--pe-crema); color: var(--pe-teal); padding: 0.3rem 0.8rem; border-radius: var(--pe-radius); margin-bottom: 0.6rem; } /* ------------ TARJETAS DE MICRO-PRUEBA (layout 2 + 1) ------------ */ .pe-proof-layout { display: flex; flex-direction: column; gap: 1rem; margin-top: 2rem; } .pe-proof-row { display: flex; flex-direction: column; gap: 1rem; } @media (min-width: 640px) { .pe-proof-row { flex-direction: row; align-items: stretch; } } /* .pe-proof-card extiende .pe-card; diseño editorial centrado */ .pe-proof-card { flex: 1; display: flex; flex-direction: row; align-items: center; text-align: left; gap: 1.25rem; padding: 1.25rem 1.5rem; box-shadow: 0 4px 20px rgba(21, 31, 47, 0.12); transition: transform 0.2s ease, box-shadow 0.2s ease; } @media (hover: hover) { .pe-proof-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(21, 31, 47, 0.18); } } .pe-proof-card-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 64px; height: 64px; border-radius: var(--pe-radius); background-color: rgba(17, 54, 62, 0.08); color: var(--pe-teal); } .pe-proof-card-body { flex: 1; min-width: 0; } .pe-proof-card-title { font-family: var(--pe-font-head); font-weight: 700; font-size: var(--pe-fs-subtitle); color: var(--pe-marino); margin: 0; line-height: 1.3; } .pe-proof-card-title::after { content: ''; display: block; width: calc(100% - 96px); height: 3px; background-color: var(--pe-teal); margin: 0.65rem 0; } .pe-proof-card-text { font-size: var(--pe-fs-small); color: var(--pe-carbon); opacity: 0.72; margin: 0; line-height: 1.6; } /* Franja protagonista: cifra $120,000 — enlace a calculadora */ .pe-proof-climax { background-color: var(--pe-teal); border-radius: var(--pe-radius); padding: 1.4rem 2rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; color: var(--pe-crema); text-decoration: none; cursor: pointer; transition: transform 0.25s ease, filter 0.25s ease; } @media (hover: hover) { .pe-proof-climax:hover { transform: translateY(-3px); filter: brightness(1.09); } } .pe-proof-climax-icon { color: var(--pe-naranja); margin-bottom: 0.5rem; } .pe-proof-climax-qualifier { font-family: var(--pe-font-body); font-size: var(--pe-fs-small); font-weight: 500; opacity: 0.75; } .pe-proof-climax-num { font-family: var(--pe-font-num); font-weight: 700; font-size: clamp(4rem, 11vw, 6.5rem); line-height: 1; } .pe-proof-climax-sub { font-family: var(--pe-font-body); font-size: var(--pe-fs-body); opacity: 0.72; margin-top: 0.25rem; } /* ------------ CAJA DE URGENCIA (siempre sobre marino) ------------ */ .pe-urgency-box { border-left: 4px solid var(--pe-teal); background-color: rgba(17, 54, 62, 0.5); border-radius: 0 var(--pe-radius) var(--pe-radius) 0; padding: 1.25rem 1.5rem; margin: 1.75rem auto; max-width: var(--pe-content); text-align: left; } .pe-urgency-box p { margin: 0; color: var(--pe-crema); font-size: var(--pe-fs-body); line-height: 1.7; opacity: 0.92; } /* ------------ TESTIMONIO PLACEHOLDER ------------ */ .pe-testimonial-placeholder { border: 2px solid rgba(21, 31, 47, 0.18); border-radius: var(--pe-radius); padding: 1.5rem 1.75rem; margin: 2.5rem auto 0 auto; max-width: var(--pe-content); background-color: rgba(21, 31, 47, 0.03); text-align: left; } .pe-testimonial-placeholder .pe-testimonial-quote { font-style: italic; font-size: var(--pe-fs-lead); line-height: 1.8; color: var(--pe-carbon); opacity: 0.35; margin: 0 0 0.5rem 0; } .pe-testimonial-placeholder .pe-testimonial-attr { font-size: var(--pe-fs-small); color: var(--pe-carbon); opacity: 0.3; margin: 0; } /* Variante sobre sección oscura */ .pe-section--dark .pe-testimonial-placeholder { border-color: rgba(240, 238, 233, 0.2); background-color: rgba(240, 238, 233, 0.06); } .pe-section--dark .pe-testimonial-placeholder .pe-testimonial-quote { color: var(--pe-crema); } .pe-section--dark .pe-testimonial-placeholder .pe-testimonial-attr { color: var(--pe-crema); } /* ------------ BLOQUE QUIÉNES SOMOS ------------ */ .qs-stats { display: flex; gap: 2.5rem; flex-wrap: wrap; margin: 1.5rem 0 1.25rem; } .qs-stat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.2rem; } .qs-stat-num { font-family: var(--pe-font-num); font-size: clamp(1.6rem, 5vw, 2.4rem); font-weight: 700; color: var(--pe-teal); line-height: 1; margin: 0; } .qs-stat-label { font-size: var(--pe-fs-small); color: var(--pe-carbon); opacity: 0.7; margin: 0; letter-spacing: 0.02em; } .qs-human { font-size: var(--pe-fs-small); color: var(--pe-marino); font-weight: 500; opacity: 0.8; margin-bottom: 1.75rem; max-width: 46ch; } @media (max-width: 991.98px) { .qs-stats { gap: 1.75rem; } .qs-stat-num { font-size: 1.9rem; } }