/* ============================================================
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.woff2') format('woff2'),
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.woff2') format('woff2'),
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 */
/* Texto de botones (T19): ≥18.66px bold = "texto grande" WCAG, cuyo umbral
AA es 3:1 — así el blanco sobre el naranja de marca #FE4306 (3.5:1)
cumple sin alterar el color del impreso. No bajar de 1.17rem. */
--pe-fs-btn: 1.17rem;
/* Geometría — idéntica en todo el sitio */
--pe-radius: 12px; /* esquinas (heredado del impreso) */
--pe-radius-petalo: 44px 12px 44px 12px; /* geometría del isotipo — EXCLUSIVA de tarjetas de servicio y destacadas */
--pe-shadow: 0 1px 2px rgba(21, 31, 47, 0.05), 0 12px 32px rgba(21, 31, 47, 0.07); /* sombra en dos capas: contacto + difusa */
--pe-shadow-hover: 0 2px 4px rgba(21, 31, 47, 0.06), 0 18px 44px rgba(21, 31, 47, 0.11);
--pe-border-card: 1px solid rgba(21, 31, 47, 0.10);
/* 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;
}
/* ------------ ICONOS SVG INLINE (includes/iconos-svg.php) ------------ */
/* Réplica del render del webfont FA que sustituyen: tamaño por font-size
del contexto (height=1em en el SVG) y color por currentColor; el
vertical-align es el mismo que usaba FA. */
.pe-ico {
display: inline-block;
vertical-align: -0.125em;
}
/* ------------ 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;
}
/* Fix overflow horizontal de 4px por lado (T24) — una fila Bootstrap con
gutter g-5 dentro de .pe-container aplica margen negativo de -1.5rem (24px)
por lado, que rebasa el padding del contenedor (1.25rem = 20px) y saca 4px
de cada lado: jaloneo horizontal en el teléfono, clipado sin barra visible
en el resto del rango.
El techo NO es un breakpoint de Bootstrap, se deriva de la caja: mientras el
contenedor tenga menos de 4px de margen propio, el sobresaliente de 4px cae
fuera del viewport. Margen del contenedor = (vw - 1140) / 2, así que el
desborde vive por debajo de 1140 + 2*(24 - 20) = 1148px — medido: a 1147 el
borde izquierdo de la fila queda en -0.50px y a 1148 en 0.00px.
La primera versión de este fix (auditoría móvil) cortaba en 767.98px y dejaba
768-1147.98 sin cubrir.
Reducir SOLO el gutter horizontal a 2.5rem (margen -1.25rem = exactamente el
padding del contenedor) elimina el desborde: en móvil las columnas ya están
apiladas y no se nota, y de 768 a 1147.98 la separación entre columnas pasa
de 48 a 40px. Arriba de 1148 el contenedor ya tiene margen de sobra y el
gutter se queda en los 3rem del diseño aprobado. */
@media (max-width: 1147.98px) {
.pe-container .row.g-5 { --bs-gutter-x: 2.5rem; }
}
.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);
}
/* Ritmo: dos secciones claras contiguas comparten respiración — el corte
visual lo da el cambio de color, no el aire. Las juntas con cambio de
color conservan el padding completo. La respiración se reparte entre los
dos lados de la junta: la sección superior recorta su padding inferior y la
inferior su padding superior, para que el hueco lea como UNA respiración y
no como dos paddings apilados. */
.pe-section:not(.pe-section--dark) + .pe-section:not(.pe-section--dark) {
padding-top: calc(var(--pe-space-section) * 0.2);
}
.pe-section:not(.pe-section--dark):has(+ .pe-section:not(.pe-section--dark)) {
padding-bottom: calc(var(--pe-space-section) * 0.5);
}
/* Excepción puntual: junta clara-clara que necesita el aire completo */
.pe-section--full-gap {
padding-top: var(--pe-space-section) !important;
}
/* 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-btn);
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;
}
.pe-btn svg {
margin-right: 0.5rem;
vertical-align: -0.2em;
}
@media (max-width: 576px) {
.pe-btn {
display: block;
width: 100%;
max-width: 420px;
margin-left: auto;
margin-right: auto;
}
}
/* ------------ ENLACE-CTA (.pe-link-cta) — la vía secundaria en texto ------------
Tercer nivel de llamada a la acción, por debajo del botón de contorno:
para el segundo camino que SÍ debe estar a la vista pero NO debe pesar como
botón (§6 — un naranja por viewport, y dos botones lado a lado empatan el
siguiente paso en lugar de jerarquizarlo). No sustituye a .pe-btn--secondary:
ése sigue siendo el segundo camino cuando compite de tú a tú.
Toma el color de su fondo con el mismo criterio que .pe-btn--secondary:
teal sobre crema, crema sobre superficies oscuras (el teal se pierde contra
el marino). El subrayado va por text-decoration con offset propio para poder
adelgazarlo y despegarlo de la línea base; en navegadores sin soporte de
text-underline-offset queda un subrayado normal — degradación limpia.
La flecha (→) vive en el copy (clave de idioma), no en el CSS: así el
traductor decide si la frase la lleva. El anillo de foco lo da la regla
global de :focus-visible (T19), incluida su rama crema sobre oscuro. ------------ */
.pe-link-cta {
display: inline-block;
font-family: var(--pe-font-body);
font-weight: 600;
font-size: var(--pe-fs-body);
letter-spacing: 0.01em;
/* área táctil de ~44px sin separar el subrayado del texto */
padding: 0.55rem 0.25rem;
color: var(--pe-teal);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.3em;
text-decoration-color: rgba(17, 54, 62, 0.40);
transition: color 0.25s ease, text-decoration-color 0.25s ease;
}
.pe-link-cta:hover,
.pe-link-cta:focus {
color: var(--pe-teal);
text-decoration-color: currentColor;
}
/* Sobre superficies oscuras (secciones marino, panel marino y los heros de
foto con velo, que no son .pe-section--dark y van por clase de página —
misma lista que el foco visible y el CTA pegajoso). */
.pe-section--dark .pe-link-cta,
.pe-card--marino .pe-link-cta,
.home-hero .pe-link-cta,
.svc-hero .pe-link-cta,
.sol-hero .pe-link-cta,
.ps-hero .pe-link-cta,
.ele-hero .pe-link-cta,
.rsc-hero .pe-link-cta,
.bess-hero .pe-link-cta,
.calc-hero .pe-link-cta {
color: var(--pe-crema);
text-decoration-color: rgba(240, 238, 233, 0.50);
}
.pe-section--dark .pe-link-cta:hover,
.pe-section--dark .pe-link-cta:focus,
.pe-card--marino .pe-link-cta:hover,
.pe-card--marino .pe-link-cta:focus,
.home-hero .pe-link-cta:hover,
.home-hero .pe-link-cta:focus,
.svc-hero .pe-link-cta:hover,
.svc-hero .pe-link-cta:focus,
.sol-hero .pe-link-cta:hover,
.sol-hero .pe-link-cta:focus,
.ps-hero .pe-link-cta:hover,
.ps-hero .pe-link-cta:focus,
.ele-hero .pe-link-cta:hover,
.ele-hero .pe-link-cta:focus,
.rsc-hero .pe-link-cta:hover,
.rsc-hero .pe-link-cta:focus,
.bess-hero .pe-link-cta:hover,
.bess-hero .pe-link-cta:focus,
.calc-hero .pe-link-cta:hover,
.calc-hero .pe-link-cta:focus {
color: var(--pe-crema);
text-decoration-color: currentColor;
}
/* ============================================================
ACCESIBILIDAD — FOCO VISIBLE (T19)
Anillo de foco SOLO para navegación por teclado (:focus-visible):
el clic/tap no lo pinta. :where() deja la especificidad en cero,
así cualquier regla de componente posterior lo afina sin pelear.
Teal sobre fondos claros; sobre superficies oscuras pasa a crema
(el teal se pierde: 11363E ≈ 151F2F — misma regla que botones e
isotipo). Los heros de foto con velo van por clase de página
(ninguno es .pe-section--dark; misma lista que el CTA pegajoso).
============================================================ */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
outline: 2px solid var(--pe-teal);
outline-offset: 2px;
}
.pe-section--dark :focus-visible,
.pe footer :focus-visible,
.pe-card--marino :focus-visible,
.pe-step--highlight :focus-visible,
.pe-diag-response :focus-visible,
.pe-sticky-cta :focus-visible,
.pe-lightbox :focus-visible,
.home-hero :focus-visible,
.svc-hero :focus-visible,
.sol-hero :focus-visible,
.ps-hero :focus-visible,
.ele-hero :focus-visible,
.rsc-hero :focus-visible,
.bess-hero :focus-visible,
.calc-hero :focus-visible,
.calc-results :focus-visible,
.calc-mt-panel :focus-visible,
.marsa-hero :focus-visible,
.marsa-cta :focus-visible {
outline-color: var(--pe-crema);
}
/* Botón flotante de WhatsApp: vive sobre fondo variable (crema o marino
según el scroll) → anillo doble: blanco pegado + halo teal, visible
sobre cualquiera de los dos. */
.whatsapp-float:focus-visible {
outline: 2px solid var(--pe-blanco);
outline-offset: 2px;
box-shadow: 0 0 0 7px rgba(17, 54, 62, 0.55);
}
/* ------------ TARJETA — una familia base (borde 1px + sombra en dos capas +
hover de elevación). Variante pétalo+ficha (--pe-radius-petalo) EXCLUSIVA de
tarjetas de servicio y tarjetas destacadas. Panel marino: máximo UNA tarjeta
por página, para destacar. ------------ */
.pe-card {
background-color: var(--pe-blanco);
border: var(--pe-border-card);
border-radius: var(--pe-radius);
box-shadow: var(--pe-shadow);
padding: 1.75rem 1.5rem;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
@media (hover: hover) {
.pe-card:hover {
transform: translateY(-4px);
box-shadow: var(--pe-shadow-hover);
}
}
.pe-section--dark .pe-card {
background-color: var(--pe-teal);
color: var(--pe-crema);
border: 1px solid rgba(240, 238, 233, 0.12);
box-shadow: none;
}
/* ---- Variante pétalo + ficha técnica (SOLO tarjetas de servicio) ---- */
.pe-card--servicio {
display: flex;
flex-direction: column;
padding: 0;
overflow: hidden;
border-radius: var(--pe-radius-petalo);
}
.pe-card-servicio-body {
flex: 1;
display: flex;
flex-direction: column;
padding: 28px 26px 20px;
}
.pe-card-servicio-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 18px 6px 18px 6px; /* eco del pétalo a escala */
background-color: rgba(17, 54, 62, 0.08);
color: var(--pe-teal);
margin-bottom: 0.9rem;
}
.pe-card--servicio .pe-btn {
border-radius: 16px 6px 16px 6px; /* eco del pétalo, solo en estas tarjetas */
margin-top: auto;
}
/* Franja técnica inferior */
.pe-card-ficha {
background-color: var(--pe-crema);
border-top: 1px solid rgba(21, 31, 47, 0.08);
padding: 11px 26px 13px;
display: flex;
flex-wrap: wrap;
gap: 4px 16px;
font-family: var(--pe-font-num);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--pe-teal);
}
/* Panel marino — máximo UNA tarjeta por página */
.pe-card--marino {
background-color: var(--pe-marino);
background-size: 24px 24px; /* retícula pe-grid-pattern más fina dentro de la tarjeta */
color: var(--pe-crema);
}
.pe-card--marino .pe-card-servicio-icon {
background-color: rgba(240, 238, 233, 0.10);
color: var(--pe-crema);
}
.pe-card--marino .pe-card-ficha {
background-color: rgba(240, 238, 233, 0.07);
border-top-color: rgba(240, 238, 233, 0.12);
color: rgba(240, 238, 233, 0.85);
}
.pe-card--marino .pe-btn--secondary {
border-color: var(--pe-crema);
color: var(--pe-crema);
}
.pe-card--marino .pe-btn--secondary:hover,
.pe-card--marino .pe-btn--secondary:focus {
background-color: var(--pe-crema);
color: var(--pe-marino);
}
/* ---- Banda de arte en la cabeza de la tarjeta de servicio (.pe-card--arte)
Reutiliza el idioma estructural de .pe-card--proyecto (arte arriba, cuerpo
al centro, ficha al pie). El pétalo NO se toca: el overflow:hidden de
.pe-card--servicio recorta la banda con el radio 44/12, así que el marcador
de "esto es una línea de servicio" se ve DENTRO del arte.
La imagen arriba pasa a ser vocabulario COMPARTIDO entre servicio y
proyecto (decisión de Ricardo, 28-jul-2026): el separador entre las dos
familias sigue siendo el pétalo, como ya decía el comentario de abajo.
El nombre es --arte y no --lamina por una razón que YA NO EXISTE: cuando
esto nació (T27), .pe-card--lamina era la lámina de plano de T21. T36 la
purgó, así que el nombre está libre — pero renombrar ahora tocaría ocho
tarjetas publicadas para no ganar nada. Se queda --arte. ---- */
.pe-card-servicio-arte {
position: relative;
display: block;
flex-shrink: 0;
aspect-ratio: 16 / 9;
overflow: hidden;
background-color: var(--pe-marino); /* color de reposo mientras carga */
}
.pe-card-servicio-arte img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Con banda, el icono de 44px sobra: dos marcadores apilados se leen como
relleno. En las tarjetas montadas el