/* =========================================================================== PROPARTES — Hoja de estilos para Elementor Valores tomados del rediseño (Propartes Rediseno.dc.html), sin normalizar. --------------------------------------------------------------------------- INSTALACIÓN 1. Elementor > Site Settings > Global Colors / Global Fonts: registra los valores de la sección 3 en el kit (recomendado, así los widgets nativos heredan la marca sin CSS extra). 2. Elementor > Custom Code (o el CSS del tema hijo): pega este archivo. El puente de la sección 3 deja el kit alineado incluso si el paso 1 no se hizo. 3. En cada widget, campo "CSS Classes": usa las clases pp-* de abajo. TEMAS Azul es el tema por defecto. Para rojo dominante, agrega .pp-theme-red en el contenedor (Section / Container) o en . =========================================================================== */ /* =========================================================================== 1. TOKENS =========================================================================== */ :root { /* --- Paleta azul (institucional) --- */ --pp-blue-50: #EAF2FE; --pp-blue-100: #C9DDFB; --pp-blue-200: #92BAF6; --pp-blue-500: #1656C7; --pp-blue-600: #0E45A8; --pp-blue-700: #093588; --pp-blue-800: #062768; --pp-blue-900: #041A4A; /* --- Paleta roja (acento / campañas) --- */ --pp-red-50: #FCEBED; --pp-red-100: #F8C8CD; --pp-red-500: #D7263D; --pp-red-600: #B71C30; --pp-red-700: #951426; --pp-red-900: #4D0813; /* --- Neutros --- */ --pp-white: #FFFFFF; --pp-bg-soft: #F7F8FA; /* fondo de página */ --pp-bg-mute: #F0F2F5; /* fondo de chip / celda */ --pp-line: #E5E7EB; /* borde sutil */ --pp-line-2: #D1D5DB; /* borde de control */ --pp-ink-3: #6B7280; /* texto terciario */ --pp-ink-2: #374151; /* texto de cuerpo */ --pp-ink: #111827; /* texto principal / footer */ /* --- Roles semánticos (los reasigna .pp-theme-red) --- */ --pp-primary: var(--pp-blue-500); --pp-primary-hover: var(--pp-blue-600); --pp-primary-deep: var(--pp-blue-900); --pp-primary-soft: var(--pp-blue-50); --pp-primary-ink: var(--pp-blue-700); --pp-accent: var(--pp-red-500); --pp-accent-hover: var(--pp-red-600); --pp-accent-soft: var(--pp-red-50); --pp-accent-ink: var(--pp-red-700); --pp-on-primary: var(--pp-white); --pp-on-accent: var(--pp-white); /* --- Tipografía --- */ --pp-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --pp-fw-regular: 400; --pp-fw-medium: 500; --pp-fw-semi: 600; --pp-fw-bold: 700; --pp-fw-black: 800; --pp-text-display: 56px; /* H1 de página interna */ --pp-text-hero: 44px; /* titular de slider */ --pp-text-h2: 40px; --pp-text-h3: 32px; /* encabezado de sección */ --pp-text-stat: 36px; /* cifra destacada */ --pp-text-h4: 24px; --pp-text-h5: 20px; --pp-text-lead: 17px; --pp-text-body: 16px; --pp-text-btn: 15px; --pp-text-sm: 14px; --pp-text-xs: 13px; --pp-text-2xs: 12px; --pp-text-eyebrow: 11px; --pp-text-micro: 10px; --pp-lh-tight: 1.05; --pp-lh-snug: 1.35; --pp-lh-body: 1.55; --pp-lh-loose: 1.6; --pp-ls-display: -0.035em; --pp-ls-h3: -0.025em; --pp-ls-h4: -0.02em; --pp-ls-h5: -0.015em; --pp-ls-eyebrow: 0.12em; --pp-ls-logo: 0.18em; /* --- Radios --- */ --pp-radius-card: 14px; --pp-radius-btn: 8px; --pp-radius-input: 8px; --pp-radius-icon: 12px; --pp-radius-pill: 999px; /* --- Sombras --- */ --pp-shadow-card: 0 1px 2px rgba(17, 24, 39, .05), 0 1px 1px rgba(17, 24, 39, .04); --pp-shadow-active: 0 4px 12px rgba(17, 24, 39, .08); --pp-shadow-elevated: 0 12px 32px rgba(17, 24, 39, .12); /* --- Espaciado (escala del rediseño) --- */ --pp-space-1: 4px; --pp-space-2: 8px; --pp-space-3: 12px; --pp-space-4: 16px; --pp-space-5: 20px; --pp-space-6: 24px; --pp-space-7: 28px; --pp-space-8: 32px; --pp-space-10: 40px; --pp-space-12: 48px; --pp-space-14: 56px; --pp-space-16: 64px; --pp-space-18: 72px; --pp-space-20: 80px; /* --- Grid --- */ --pp-container: 1320px; --pp-gutter: 32px; --pp-gap-tight: 12px; --pp-gap: 20px; --pp-gap-wide: 40px; --pp-section-y: 64px; /* --- Alturas de chrome --- */ --pp-topbar-h: 36px; --pp-brand-h: 92px; --pp-nav-h: 52px; --pp-input-h: 44px; --pp-transition: .2s ease; } /* =========================================================================== 2. VARIANTES DE TEMA Uso: clase en Section/Container/body. Los tokens de paleta no cambian; solo se reasignan los roles. =========================================================================== */ .pp-theme-red { --pp-primary: var(--pp-red-500); --pp-primary-hover: var(--pp-red-600); --pp-primary-deep: var(--pp-red-900); --pp-primary-soft: var(--pp-red-50); --pp-primary-ink: var(--pp-red-700); --pp-accent: var(--pp-blue-500); --pp-accent-hover: var(--pp-blue-600); --pp-accent-soft: var(--pp-blue-50); --pp-accent-ink: var(--pp-blue-700); } /* Esquinas rectas: variante opcional para campañas o landing técnicas. */ .pp-theme-sharp { --pp-radius-card: 0px; --pp-radius-btn: 4px; --pp-radius-input: 4px; --pp-radius-icon: 4px; } /* Bloques sobre fondo oscuro (hero, footer): invierte el texto. */ .pp-on-dark { --pp-ink: #FFFFFF; --pp-ink-2: rgba(255, 255, 255, .85); --pp-ink-3: rgba(255, 255, 255, .70); --pp-line: rgba(255, 255, 255, .15); --pp-line-2: rgba(255, 255, 255, .30); color: #FFFFFF; } /* Degradados del rediseño, para fondos de Section (background > classic > CSS). */ .pp-grad-blue { background-image: linear-gradient(135deg, #041A4A 0%, #093588 50%, #0E45A8 100%); } .pp-grad-red { background-image: linear-gradient(135deg, #4D0813 0%, #951426 60%, #D7263D 100%); } .pp-grad-steel { background-image: linear-gradient(135deg, #1A1D24 0%, #2D3340 50%, #475266 100%); } .pp-grad-marine { background-image: linear-gradient(135deg, #03253D 0%, #064572 50%, #0E7BBB 100%); } .pp-grad-soft { background-image: linear-gradient(135deg, var(--pp-blue-50), var(--pp-bg-mute)); } /* =========================================================================== 3. PUENTE CON EL KIT DE ELEMENTOR Registra estos mismos valores en Site Settings para que los widgets nativos los hereden. Este bloque los fuerza si el kit quedó con los defaults. --------------------------------------------------------------------------- Global Colors Primary #1656C7 · Secondary #D7263D Text #374151 · Accent #093588 Global Fonts Primary Inter 800 · Secondary Inter 600 Text Inter 400 · Accent Inter 600 =========================================================================== */ body { --e-global-color-primary: var(--pp-blue-500); --e-global-color-secondary: var(--pp-red-500); --e-global-color-text: var(--pp-ink-2); --e-global-color-accent: var(--pp-blue-700); --e-global-typography-primary-font-family: 'Inter'; --e-global-typography-primary-font-weight: 800; --e-global-typography-secondary-font-family: 'Inter'; --e-global-typography-secondary-font-weight: 600; --e-global-typography-text-font-family: 'Inter'; --e-global-typography-text-font-weight: 400; --e-global-typography-accent-font-family: 'Inter'; --e-global-typography-accent-font-weight: 600; } /* =========================================================================== 4. BASE =========================================================================== */ /* Todas las clases pp-* miden borde y padding dentro del ancho declarado, sin depender del reset global del tema. */ [class^="pp-"], [class*=" pp-"], .pp-scope *, .pp-scope *::before, .pp-scope *::after { box-sizing: border-box; } body { font-family: var(--pp-font); font-size: var(--pp-text-body); line-height: var(--pp-lh-body); color: var(--pp-ink); background: var(--pp-bg-soft); -webkit-font-smoothing: antialiased; } .pp-scope h1, .pp-scope h2, .pp-scope h3, .pp-scope h4, .pp-scope h5, .pp-scope h6 { font-family: var(--pp-font); color: var(--pp-ink); line-height: var(--pp-lh-tight); margin: 0; } .pp-scope a { color: var(--pp-primary); text-decoration: none; transition: opacity var(--pp-transition); } .pp-scope a:hover { color: var(--pp-primary-hover); opacity: .85; } .pp-scope img { max-width: 100%; display: block; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--pp-line-2); border-radius: var(--pp-radius-pill); } @keyframes pp-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .pp-fade-up { animation: pp-fade-up .4s ease both; } /* =========================================================================== 5. TIPOGRAFÍA Aplica al widget Heading / Text Editor desde "CSS Classes". =========================================================================== */ .pp-display { font-size: var(--pp-text-display); font-weight: var(--pp-fw-black); letter-spacing: var(--pp-ls-display); line-height: var(--pp-lh-tight); } .pp-hero-title { font-size: var(--pp-text-hero); font-weight: var(--pp-fw-black); letter-spacing: var(--pp-ls-h3); line-height: var(--pp-lh-tight); } .pp-h2 { font-size: var(--pp-text-h2); font-weight: var(--pp-fw-black); letter-spacing: var(--pp-ls-h3); line-height: 1.1; } .pp-h3 { font-size: var(--pp-text-h3); font-weight: var(--pp-fw-black); letter-spacing: var(--pp-ls-h3); line-height: 1.15; } .pp-h4 { font-size: var(--pp-text-h4); font-weight: var(--pp-fw-bold); letter-spacing: var(--pp-ls-h4); } .pp-h5 { font-size: var(--pp-text-h5); font-weight: var(--pp-fw-bold); letter-spacing: var(--pp-ls-h5); } /* Antetítulo: siempre encima de un H2/H3, en acento o primario. */ .pp-eyebrow { font-size: var(--pp-text-eyebrow); font-weight: var(--pp-fw-semi); letter-spacing: var(--pp-ls-eyebrow); text-transform: uppercase; color: var(--pp-accent); line-height: 1.2; } .pp-eyebrow--primary { color: var(--pp-primary); } .pp-eyebrow--mute { color: var(--pp-ink-3); } .pp-lead { font-size: var(--pp-text-lead); line-height: var(--pp-lh-body); color: var(--pp-ink-2); } .pp-body { font-size: var(--pp-text-body); line-height: var(--pp-lh-loose); color: var(--pp-ink-2); } .pp-text-sm { font-size: var(--pp-text-sm); line-height: var(--pp-lh-body); color: var(--pp-ink-2); } .pp-text-xs { font-size: var(--pp-text-xs); color: var(--pp-ink-3); } .pp-text-2xs { font-size: var(--pp-text-2xs); color: var(--pp-ink-3); } /* Cifra de indicador. Pareja: .pp-stat + .pp-eyebrow */ .pp-stat { font-size: var(--pp-text-stat); font-weight: var(--pp-fw-black); letter-spacing: var(--pp-ls-h4); line-height: 1; color: var(--pp-primary); } .pp-stat--sm { font-size: 28px; } .pp-ink { color: var(--pp-ink); } .pp-ink-2 { color: var(--pp-ink-2); } .pp-ink-3 { color: var(--pp-ink-3); } .pp-primary { color: var(--pp-primary); } .pp-accent { color: var(--pp-accent); } .pp-pretty { text-wrap: pretty; } /* =========================================================================== 6. BOTONES Widget Button > Advanced > CSS Classes. Quita el estilo nativo con .pp-btn si el widget trae skin propio. =========================================================================== */ .pp-btn, .elementor-button.pp-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--pp-space-2); padding: 14px 24px; font-family: var(--pp-font); font-size: var(--pp-text-btn); font-weight: var(--pp-fw-semi); line-height: 1.2; border-radius: var(--pp-radius-btn); border: 1px solid transparent; background: transparent; color: var(--pp-ink); cursor: pointer; text-decoration: none; transition: background var(--pp-transition), color var(--pp-transition), border-color var(--pp-transition), transform var(--pp-transition); } .pp-btn:focus-visible { outline: 2px solid var(--pp-primary); outline-offset: 2px; } .pp-btn--primary, .elementor-button.pp-btn--primary { background: var(--pp-primary); color: var(--pp-on-primary); } .pp-btn--primary:hover { background: var(--pp-primary-hover); color: var(--pp-on-primary); } .pp-btn--accent, .elementor-button.pp-btn--accent { background: var(--pp-accent); color: var(--pp-on-accent); } .pp-btn--accent:hover { background: var(--pp-accent-hover); color: var(--pp-on-accent); } .pp-btn--outline { border-color: var(--pp-line-2); color: var(--pp-ink); } .pp-btn--outline:hover { border-color: var(--pp-primary); color: var(--pp-primary); } /* Sobre hero o fondo oscuro. */ .pp-btn--ghost-light { border-color: rgba(255, 255, 255, .3); color: #FFFFFF; } .pp-btn--ghost-light:hover { background: rgba(255, 255, 255, .1); color: #FFFFFF; } /* Botón blanco sobre degradado (CTA de tienda virtual). */ .pp-btn--invert { background: #FFFFFF; color: var(--pp-ink); } .pp-btn--invert:hover { background: var(--pp-bg-mute); color: var(--pp-ink); } .pp-btn--sm { padding: 7px 12px; font-size: var(--pp-text-xs); } .pp-btn--md { padding: 10px 18px; font-size: var(--pp-text-sm); } .pp-btn--block { width: 100%; } /* Chip filtrable (red comercial). Estado activo: agregar .is-active. */ .pp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--pp-radius-pill); border: 1px solid var(--pp-line-2); background: #FFFFFF; color: var(--pp-ink-2); font-size: var(--pp-text-2xs); font-weight: var(--pp-fw-bold); cursor: pointer; transition: all var(--pp-transition); } .pp-chip:hover { border-color: var(--pp-primary); color: var(--pp-primary); } .pp-chip.is-active { background: var(--pp-primary); border-color: var(--pp-primary); color: var(--pp-on-primary); } .pp-chip--accent.is-active { background: var(--pp-accent); border-color: var(--pp-accent); } .pp-chip__count { background: var(--pp-bg-mute); color: var(--pp-ink-3); font-size: var(--pp-text-micro); padding: 1px 6px; border-radius: var(--pp-radius-pill); } .pp-chip.is-active .pp-chip__count { background: rgba(255, 255, 255, .25); color: #FFFFFF; } /* =========================================================================== 7. FORMULARIOS Cubre Elementor Forms (.elementor-field) y markup propio. =========================================================================== */ .pp-field { display: flex; flex-direction: column; gap: 6px; } .pp-label { font-size: var(--pp-text-eyebrow); font-weight: var(--pp-fw-semi); letter-spacing: var(--pp-ls-eyebrow); text-transform: uppercase; color: var(--pp-ink-2); } .pp-input, .pp-select, .pp-textarea, .pp-form .elementor-field-textual { width: 100%; height: var(--pp-input-h); padding: 0 14px; font-family: var(--pp-font); font-size: var(--pp-text-sm); color: var(--pp-ink); background: #FFFFFF; border: 1px solid var(--pp-line-2); border-radius: var(--pp-radius-input); transition: border-color var(--pp-transition), box-shadow var(--pp-transition); } .pp-textarea, .pp-form textarea.elementor-field-textual { height: auto; min-height: 120px; padding: 12px 14px; line-height: var(--pp-lh-body); resize: vertical; } .pp-input:focus, .pp-select:focus, .pp-textarea:focus, .pp-form .elementor-field-textual:focus { outline: none; border-color: var(--pp-primary); box-shadow: 0 0 0 3px var(--pp-primary-soft); } .pp-input::placeholder, .pp-textarea::placeholder, .pp-form .elementor-field-textual::placeholder { color: var(--pp-ink-3); } .pp-input:disabled, .pp-select:disabled { background: var(--pp-bg-mute); color: var(--pp-ink-3); cursor: not-allowed; } .pp-input--error { border-color: var(--pp-red-500); } .pp-help { font-size: var(--pp-text-2xs); color: var(--pp-ink-3); } .pp-error { font-size: var(--pp-text-2xs); color: var(--pp-red-600); font-weight: var(--pp-fw-semi); } /* Buscador embebido: input + icono dentro de una caja. */ .pp-search { display: flex; align-items: center; gap: var(--pp-space-2); height: var(--pp-input-h); padding: 0 14px; background: var(--pp-bg-soft); border: 1px solid var(--pp-line-2); border-radius: var(--pp-radius-input); } .pp-search input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; font-family: var(--pp-font); font-size: var(--pp-text-xs); color: var(--pp-ink); } .pp-search:focus-within { border-color: var(--pp-primary); } /* Fila de finder por aplicación (marca / modelo / año). */ .pp-finder { display: flex; flex-wrap: wrap; gap: var(--pp-space-4); align-items: center; } .pp-finder .pp-select { width: 200px; height: 42px; } /* Botón de envío de Elementor Forms. */ .pp-form .elementor-button[type="submit"] { padding: 14px 24px; font-size: var(--pp-text-btn); font-weight: var(--pp-fw-semi); border-radius: var(--pp-radius-btn); background: var(--pp-primary); color: var(--pp-on-primary); } .pp-form .elementor-button[type="submit"]:hover { background: var(--pp-primary-hover); } /* =========================================================================== 8. HEADER Y NAVEGACIÓN Para header armado con Elementor Theme Builder: una Section por franja. =========================================================================== */ /* Franja de contacto superior, 36px, fondo tinta. */ .pp-topbar { background: var(--pp-ink); color: rgba(255, 255, 255, .85); font-size: var(--pp-text-2xs); min-height: var(--pp-topbar-h); } .pp-topbar a { color: rgba(255, 255, 255, .85); opacity: .85; } .pp-topbar a:hover { color: #FFFFFF; opacity: 1; } /* Franja de marca, 92px, fondo blanco con borde inferior. */ .pp-brandbar { background: #FFFFFF; border-bottom: 1px solid var(--pp-line); min-height: var(--pp-brand-h); } .pp-brandbar--primary { background: var(--pp-primary); border-bottom: none; } .pp-logo { height: 48px; width: auto; } .pp-logo--footer { height: 42px; } /* Acción de header: icono + subtítulo + etiqueta. */ .pp-action { display: flex; align-items: center; gap: var(--pp-space-3); padding: 8px 14px; border-radius: var(--pp-radius-input); cursor: pointer; transition: background var(--pp-transition); } .pp-action:hover { background: var(--pp-bg-mute); } .pp-action__icon { flex: none; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--pp-radius-input); background: var(--pp-bg-mute); color: var(--pp-primary); } .pp-action__sub { font-size: var(--pp-text-2xs); color: var(--pp-ink-3); line-height: 1.2; } .pp-action__label { font-size: var(--pp-text-xs); font-weight: var(--pp-fw-bold); color: var(--pp-ink); line-height: 1.3; } /* Barra de navegación, 52px. Aplicar a la Section que contiene el menú. */ .pp-navbar { background: #FFFFFF; border-top: 1px solid var(--pp-line); border-bottom: 1px solid var(--pp-line); min-height: var(--pp-nav-h); } .pp-navbar--primary { background: var(--pp-primary); border: none; } .pp-navbar--accent { background: var(--pp-accent); border: none; } /* Ítems del widget Nav Menu dentro de .pp-navbar. */ .pp-navbar .elementor-nav-menu .elementor-item { padding: 0 18px; height: var(--pp-nav-h); display: flex; align-items: center; font-size: var(--pp-text-sm); font-weight: var(--pp-fw-semi); color: var(--pp-ink-2); border-bottom: 3px solid transparent; transition: all var(--pp-transition); } .pp-navbar .elementor-nav-menu .elementor-item:hover { color: var(--pp-primary); } .pp-navbar .elementor-nav-menu .elementor-item.elementor-item-active, .pp-navbar .elementor-nav-menu .elementor-item.highlighted { font-weight: var(--pp-fw-bold); color: var(--pp-primary); background: var(--pp-bg-mute); border-bottom-color: var(--pp-primary); } .pp-navbar--primary .elementor-nav-menu .elementor-item, .pp-navbar--accent .elementor-nav-menu .elementor-item { color: #FFFFFF; } .pp-navbar--primary .elementor-nav-menu .elementor-item.elementor-item-active, .pp-navbar--accent .elementor-nav-menu .elementor-item.elementor-item-active { color: #FFFFFF; background: rgba(0, 0, 0, .18); border-bottom-color: #FFFFFF; } /* Enlace destacado a la derecha del menú (Concursos, promos). */ .pp-nav-highlight { display: inline-flex; align-items: center; gap: 6px; font-size: var(--pp-text-xs); font-weight: var(--pp-fw-bold); color: var(--pp-accent); } .pp-navbar--primary .pp-nav-highlight, .pp-navbar--accent .pp-nav-highlight { color: #FFFFFF; } /* Pestañas de segmento (página Productos). */ .pp-tabs { display: flex; gap: var(--pp-space-1); overflow-x: auto; } .pp-tab { display: flex; align-items: center; gap: var(--pp-space-3); padding: 18px 22px; background: transparent; border: none; border-bottom: 3px solid transparent; font-size: var(--pp-text-sm); font-weight: var(--pp-fw-bold); color: var(--pp-ink-3); white-space: nowrap; cursor: pointer; } .pp-tab:hover { color: var(--pp-ink); } .pp-tab.is-active { color: var(--pp-ink); border-bottom-color: var(--pp-accent); } .pp-tab__count { background: var(--pp-bg-mute); color: var(--pp-ink-3); font-size: var(--pp-text-eyebrow); font-weight: var(--pp-fw-bold); padding: 2px 8px; border-radius: var(--pp-radius-pill); } .pp-tab.is-active .pp-tab__count { background: var(--pp-accent); color: #FFFFFF; } /* Miga de pan. */ .pp-breadcrumb { display: flex; align-items: center; gap: var(--pp-space-2); font-size: var(--pp-text-xs); color: var(--pp-ink-3); } .pp-breadcrumb a { color: var(--pp-primary); } .pp-on-dark .pp-breadcrumb, .pp-on-dark .pp-breadcrumb a { color: rgba(255, 255, 255, .7); } .pp-on-dark .pp-breadcrumb strong { color: #FFFFFF; font-weight: var(--pp-fw-semi); } /* =========================================================================== 9. GRID Y ESPACIADO En Elementor: define el Container width global en 1320 y el padding en 32. Estas clases replican lo mismo para bloques HTML propios. =========================================================================== */ .pp-container { width: 100%; max-width: var(--pp-container); margin-inline: auto; padding-inline: var(--pp-gutter); } .pp-container--narrow { max-width: 920px; } .pp-section { padding-block: var(--pp-section-y); } .pp-section--sm { padding-block: var(--pp-space-8); } .pp-section--lg { padding-block: var(--pp-space-18); } .pp-section--white { background: #FFFFFF; } .pp-section--soft { background: var(--pp-bg-soft); } .pp-section--ruled { border-top: 1px solid var(--pp-line); border-bottom: 1px solid var(--pp-line); } /* Encabezado de sección: antetítulo + título a la izquierda, enlace a la derecha. */ .pp-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--pp-space-4); margin-bottom: var(--pp-space-7); flex-wrap: wrap; } .pp-section-head__text { display: flex; flex-direction: column; gap: 6px; } .pp-section-link { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--pp-fw-semi); color: var(--pp-primary); } .pp-grid { display: grid; gap: var(--pp-gap); } .pp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pp-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pp-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--pp-gap-tight); } .pp-grid--8 { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; } .pp-grid--sidebar { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--pp-space-4); } .pp-grid--split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pp-gap-wide); } .pp-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pp-space-3); } .pp-row--tight { gap: var(--pp-space-2); } .pp-row--wide { gap: var(--pp-space-8); } .pp-stack { display: flex; flex-direction: column; gap: var(--pp-space-4); } .pp-stack--tight { gap: var(--pp-space-2); } .pp-divider-v { width: 1px; align-self: stretch; background: var(--pp-line-2); } @media (max-width: 1024px) { .pp-grid--4, .pp-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pp-grid--8 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pp-grid--sidebar, .pp-grid--split { grid-template-columns: minmax(0, 1fr); } .pp-display { font-size: 40px; } .pp-hero-title { font-size: 34px; } .pp-h2, .pp-h3 { font-size: 26px; } } @media (max-width: 767px) { :root { --pp-gutter: 20px; --pp-section-y: 40px; } .pp-grid--2, .pp-grid--3, .pp-grid--4 { grid-template-columns: minmax(0, 1fr); } .pp-grid--6, .pp-grid--8 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pp-display { font-size: 32px; } .pp-btn { width: 100%; } .pp-row--wide { gap: var(--pp-space-5); } } /* =========================================================================== 10. ICONOGRAFÍA El rediseño usa iconos de trazo (stroke 1.5, esquinas redondeadas). En Elementor: widget Icon con la librería del sitio; estas clases fijan tamaño, color y contenedor. No incluye SVG propios. =========================================================================== */ .pp-icon { display: inline-flex; align-items: center; justify-content: center; color: currentColor; } .pp-icon svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .pp-icon--fill svg { fill: currentColor; stroke: none; } .pp-icon--xs { font-size: 12px; } .pp-icon--sm { font-size: 14px; } .pp-icon--md { font-size: 18px; } .pp-icon--lg { font-size: 28px; } .pp-icon--xl { font-size: 48px; } .pp-icon--2xl { font-size: 64px; } /* Icono en caja suave: tarjetas de guía técnica, acciones de header. */ .pp-icon-box { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--pp-radius-icon); background: var(--pp-primary-soft); color: var(--pp-primary); } .pp-icon-box--sm { width: 44px; height: 44px; border-radius: var(--pp-radius-btn); } .pp-icon-box--circle { border-radius: var(--pp-radius-pill); background: var(--pp-bg-mute); } .pp-icon-box--solid { background: var(--pp-primary); color: var(--pp-on-primary); } .pp-icon-box--accent { background: var(--pp-accent-soft); color: var(--pp-accent); } .pp-on-dark .pp-icon-box { background: rgba(255, 255, 255, .06); color: var(--pp-accent); } /* Marca de agua decorativa (iconos gigantes al borde de una tarjeta). */ .pp-icon-watermark { position: absolute; right: -28px; bottom: -28px; color: var(--pp-primary-soft); pointer-events: none; font-size: 160px; } .pp-on-dark .pp-icon-watermark { color: rgba(255, 255, 255, .12); } /* Iconos sociales de la topbar. */ .pp-social { display: flex; gap: 10px; opacity: .7; } .pp-social:hover { opacity: 1; }