@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&display=swap'); /* ========================================================================== FACTORY MIND — Sistema de diseño / Design system Tech-industrial. Marino + verde. Alto contraste, sin degradados llamativos. Todo el color y la métrica viven en las variables de :root. ========================================================================== */ :root { /* --- Color institucional --- */ --fm-navy: #14293E; /* fondo principal — ÚNICO marino de la paleta */ --fm-navy-alt: #1F3A56; /* tarjetas / secciones alternas */ --fm-border: #345476; /* bordes */ --fm-accent: #27C46B; /* acento: botones, íconos, links */ --fm-accent-hover: #34D67C; /* acento hover */ --fm-accent-soft: rgba(39, 196, 107, 0.12); --fm-white: #FFFFFF; /* títulos */ --fm-muted: #A3B4C7; /* texto secundario gris azulado */ --fm-danger: #FF8A7A; /* --- Header marino: TODO referencia la paleta, sin hex sueltos, para que el tono no vuelva a desviarse. El logo transparente se funde con este fondo. --- */ --fm-header-bg: var(--fm-navy); /* #14293E exacto */ --fm-header-ink: var(--fm-muted); /* navegación sobre marino */ --fm-header-line: var(--fm-border); /* separadores/bordes sobre marino */ /* --- Tipografía --- Toda la escala está en rem: depende del font-size de (131.25% = ~21px), así que subir o bajar ese único valor reescala el sitio entero. */ --fm-font: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --fm-fs-display: clamp(2rem, 6vw, 4rem); --fm-fs-h1: clamp(1.75rem, 4.4vw, 3rem); --fm-fs-h2: clamp(1.4rem, 3vw, 2.125rem); --fm-fs-h3: 1.125rem; --fm-fs-body: 1rem; --fm-fs-sm: 0.875rem; --fm-fs-eyebrow: 0.75rem; /* --- Métrica (en rem para que acompañe al aumento tipográfico) --- */ --fm-header-h: 3.6rem; --fm-radius: 10px; --fm-radius-sm: 6px; --fm-gap: 1.5rem; --fm-section-y: clamp(3rem, 8vw, 6rem); --fm-maxw: 1240px; --fm-transition: 160ms ease; /* --- Fondo industrial --- Fuente única para todos los heros y la franja de stats: web-files/produccion-industria-fabrica.jpg -> /produccion-industria-fabrica.jpg Si el archivo faltara, el ::before queda transparente y el velo rgba(20,41,62,.78) sobre var(--fm-navy) da exactamente #14293E: nada se rompe. Para desactivarlo a propósito, poner --fm-bg-industrial: none; */ --fm-bg-industrial: url('/produccion-industria-fabrica.jpg'); --fm-bg-veil: rgba(20, 41, 62, 0.78); } /* ========================================================================== 1. Base ========================================================================== */ html { box-sizing: border-box; height: auto; font-family: var(--fm-font); -webkit-text-size-adjust: 100%; /* Escala tipográfica global: 131.25% de 16px = 21px (+30%). En % y no en px para respetar el tamaño de fuente que el usuario haya configurado en su navegador (accesibilidad). */ font-size: 131.25%; } *, *::before, *::after { box-sizing: inherit; } body { margin: 0; padding-top: var(--fm-header-h); background-color: var(--fm-navy); color: var(--fm-muted); font-family: var(--fm-font); font-size: var(--fm-fs-body); line-height: 1.6; text-align: left; -webkit-font-smoothing: antialiased; overflow-x: hidden; } legend { color: var(--fm-white); font-family: var(--fm-font); border: 0; } h1, h2, h3, h4, h5, h6, .page_section h1, .page_section h2, .page_section h3 { color: var(--fm-white); font-family: var(--fm-font); font-weight: 700; line-height: 1.18; letter-spacing: -0.015em; margin: 0 0 0.5em; } h1 { font-size: var(--fm-fs-h1); } h2 { font-size: var(--fm-fs-h2); } h3 { font-size: var(--fm-fs-h3); font-weight: 600; } p { margin: 0 0 1rem; font-size: inherit; } p:last-child { margin-bottom: 0; } a, a:hover, a:focus { color: var(--fm-accent); text-decoration: none; transition: color var(--fm-transition); } a:hover, a:focus { color: var(--fm-accent-hover); } a:not(.btn) { text-decoration: none; } img, svg { max-width: 100%; } :focus-visible { outline: 2px solid var(--fm-accent); outline-offset: 3px; border-radius: 2px; } /* Neutraliza el chrome claro que arrastra el layout base de Power Pages */ .wrapper-body, .page-copy, .page_section, #mainContent, main { background-color: transparent; color: inherit; margin: 0; min-height: 0; } /* ========================================================================== 2. Bilingüe — visibilidad por idioma La clase fm-lang-xx se coloca en por JS antes del pintado. Solo se OCULTA el idioma inactivo, así el activo conserva su display natural. ========================================================================== */ html.fm-lang-es [data-lang='en'], html.fm-lang-en [data-lang='es'] { display: none !important; } /* Sin JS el sitio queda en español y no se duplica el texto */ html:not(.fm-lang-es):not(.fm-lang-en) [data-lang='en'] { display: none !important; } /* ========================================================================== 3. Layout ========================================================================== */ .fm-container { width: 100%; max-width: var(--fm-maxw); margin-inline: auto; padding-inline: 1.25rem; } .fm-section { padding-block: var(--fm-section-y); background-color: var(--fm-navy); } .fm-section--alt { background-color: var(--fm-navy-alt); } .fm-section--tight { padding-block: clamp(2.5rem, 5vw, 3.5rem); } .fm-section + .fm-section { border-top: 1px solid rgba(52, 84, 118, 0.35); } .fm-section__head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); } .fm-section__head--center { margin-inline: auto; text-align: center; } .fm-eyebrow { display: block; margin-bottom: 0.75rem; color: var(--fm-accent); font-size: var(--fm-fs-eyebrow); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; } .fm-lead { color: var(--fm-muted); font-size: clamp(1rem, 1.6vw, 1.125rem); } .fm-grid { display: grid; gap: var(--fm-gap); grid-template-columns: 1fr; } @media (min-width: 640px) { .fm-grid--2, .fm-grid--3, .fm-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 960px) { .fm-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fm-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ========================================================================== 4. Header fijo ========================================================================== */ .fm-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1040; height: var(--fm-header-h); /* Fondo marino EXACTO #14293E (= fondo del logo blanco): el rectángulo del PNG se funde con la barra sin borde. Opaco a propósito, para que se lea al hacer scroll y sobre las secciones con foto industrial. */ background-color: var(--fm-header-bg); border-bottom: 1px solid var(--fm-header-line); } .fm-header__inner { display: flex; align-items: center; gap: 1rem; height: 100%; } .fm-skip { position: absolute; left: -9999px; top: 0; z-index: 1100; padding: 0.6rem 1rem; background-color: var(--fm-accent); color: var(--fm-navy); font-weight: 600; } .fm-skip:focus { left: 0; color: var(--fm-navy); } /* --- Logo --- Genérico: sirve tanto para la imagen del header como para el wordmark de texto que sigue usando el footer (marino). --- */ .fm-logo { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--fm-white); font-size: 1.2rem; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; flex: 0 0 auto; } .fm-logo, .fm-logo:hover, .fm-logo:focus { color: var(--fm-white); text-decoration: none; } /* Imagen del header: altura ~50px en desktop; width:auto conserva la proporción; max-height la ata a la barra por si el rem cambia. display:block evita el hueco inline bajo la imagen. */ .fm-logo__img { display: block; height: 2.4rem; width: auto; max-height: calc(var(--fm-header-h) - 1.2rem); } /* Wordmark de texto (footer) */ .fm-logo__mark { height: 1.6rem; width: auto; display: block; } .fm-logo__light { font-weight: 400; } .fm-logo__bold { font-weight: 800; } /* --- Navegación --- */ .fm-nav { display: flex; align-items: center; gap: 0.25rem; margin: 0 0 0 auto; list-style: none; padding: 0; } .fm-nav__link { display: block; padding: 0.5rem 0.85rem; border-radius: var(--fm-radius-sm); color: var(--fm-header-ink); font-size: 0.9375rem; font-weight: 600; transition: color var(--fm-transition), background-color var(--fm-transition); } .fm-nav__link:hover, .fm-nav__link:focus { color: var(--fm-white); background-color: rgba(52, 84, 118, 0.35); } .fm-nav__link.is-active { color: var(--fm-white); box-shadow: inset 0 -2px 0 var(--fm-accent); } /* --- Chip de idioma ES | EN (adaptado a fondo claro) --- */ .fm-lang { display: inline-flex; align-items: center; margin-left: 0.75rem; padding: 2px; border: 1px solid var(--fm-accent); border-radius: 999px; background-color: transparent; flex: 0 0 auto; } .fm-lang__btn { -webkit-appearance: none; appearance: none; border: 0; background-color: transparent; border-radius: 999px; padding: 0.2rem 0.65rem; color: var(--fm-header-ink); font-family: inherit; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; cursor: pointer; transition: background-color var(--fm-transition), color var(--fm-transition); } .fm-lang__btn:hover { color: var(--fm-white); } .fm-lang__btn[aria-pressed='true'] { background-color: var(--fm-accent); color: var(--fm-navy); } .fm-lang__sep { color: var(--fm-header-line); font-size: 0.75rem; line-height: 1; pointer-events: none; } /* --- Hamburguesa (barras blancas sobre barra marino) --- */ .fm-burger { display: none; width: 2.2rem; height: 2rem; padding: 0; border: 1px solid var(--fm-header-line); border-radius: var(--fm-radius-sm); background-color: transparent; color: var(--fm-white); cursor: pointer; flex: 0 0 auto; } .fm-burger__bar { display: block; width: 18px; height: 2px; margin: 3px auto; background-color: currentColor; transition: transform var(--fm-transition), opacity var(--fm-transition); } /* --- Dropdowns ERP / CRM (cascada) --- */ .fm-nav__group { position: relative; } .fm-nav__row { display: flex; align-items: center; } /* Caret: botón propio (patrón split-button) para que el link principal siga navegando y el submenú tenga un control accesible con aria-expanded. */ .fm-nav__caret { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; padding: 0.4rem 0.3rem; border: 0; border-radius: var(--fm-radius-sm); background-color: transparent; color: var(--fm-header-ink); cursor: pointer; } .fm-nav__caret svg { width: 0.85rem; height: 0.85rem; transition: transform 150ms ease; } .fm-nav__caret:hover { color: var(--fm-white); } .fm-nav__group:hover .fm-nav__caret svg, .fm-nav__group:focus-within .fm-nav__caret svg, .fm-nav__group.is-open .fm-nav__caret svg { transform: rotate(180deg); } /* Panel (desktop): flotante bajo el grupo. Aparece con fade + deslizamiento ~150ms. El ::before es un puente invisible que evita que el hover se corte en el hueco entre el link y el panel. */ .fm-dropdown { position: absolute; top: calc(100% + 0.4rem); left: 0; z-index: 1050; min-width: 16rem; padding: 0.45rem; background-color: var(--fm-navy-alt); border: 1px solid var(--fm-border); border-radius: var(--fm-radius-sm); box-shadow: 0 14px 30px rgba(20, 41, 62, 0.5); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 150ms ease, transform 150ms ease, visibility 0s linear 150ms; } .fm-dropdown::before { content: ''; position: absolute; top: -0.5rem; left: 0; right: 0; height: 0.5rem; } .fm-nav__group:hover .fm-dropdown, .fm-nav__group:focus-within .fm-dropdown, .fm-nav__group.is-open .fm-dropdown { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 150ms ease, transform 150ms ease, visibility 0s; } /* Items: entran escalonados (delay incremental) cuando el panel abre */ .fm-dropdown__item { display: block; padding: 0.5rem 0.75rem; border-left: 2px solid transparent; border-radius: 4px; color: var(--fm-muted); font-size: 0.875rem; font-weight: 500; white-space: nowrap; opacity: 0; transform: translateY(-4px); transition: opacity 150ms ease, transform 150ms ease, color var(--fm-transition), background-color var(--fm-transition), border-color var(--fm-transition); } .fm-nav__group:hover .fm-dropdown__item, .fm-nav__group:focus-within .fm-dropdown__item, .fm-nav__group.is-open .fm-dropdown__item { opacity: 1; transform: translateY(0); } /* cascada: ~25ms por item */ .fm-dropdown__item:nth-child(2) { transition-delay: 25ms; } .fm-dropdown__item:nth-child(3) { transition-delay: 50ms; } .fm-dropdown__item:nth-child(4) { transition-delay: 75ms; } .fm-dropdown__item:nth-child(5) { transition-delay: 100ms; } .fm-dropdown__item:nth-child(6) { transition-delay: 125ms; } .fm-dropdown__item:nth-child(7) { transition-delay: 150ms; } .fm-dropdown__item:nth-child(8) { transition-delay: 175ms; } .fm-dropdown__item:nth-child(9) { transition-delay: 200ms; } .fm-dropdown__item:nth-child(10) { transition-delay: 225ms; } .fm-dropdown__item:nth-child(11) { transition-delay: 250ms; } .fm-dropdown__item:hover, .fm-dropdown__item:focus-visible { color: var(--fm-white); background-color: rgba(39, 196, 107, 0.10); border-left-color: var(--fm-accent); } .fm-dropdown__sep { height: 1px; margin: 0.4rem 0.5rem; background-color: var(--fm-border); } .fm-dropdown__item--accent { color: var(--fm-accent); font-weight: 600; } .fm-dropdown__item--accent:hover, .fm-dropdown__item--accent:focus-visible { color: var(--fm-accent-hover); } /* Los anchors de módulos quedan tapados por el header fijo sin este margen */ [id] { scroll-margin-top: calc(var(--fm-header-h) + 1.25rem); } @media (prefers-reduced-motion: reduce) { .fm-dropdown, .fm-dropdown__item, .fm-nav__caret svg { transition: none; transition-delay: 0s; } } @media (max-width: 899px) { .fm-burger { display: block; order: 3; } .fm-lang { order: 2; margin-left: auto; margin-right: 0.5rem; } /* Logo horizontal (6:1): al aparecer el hamburguesa, se limita por ancho además de por alto para no invadir el chip ni el botón. height:auto conserva la proporción (nunca se estira). */ .fm-logo__img { height: auto; width: auto; max-height: 2.2rem; max-width: 48vw; } .fm-nav { position: fixed; top: var(--fm-header-h); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 0.5rem 1.25rem 1.25rem; background-color: var(--fm-header-bg); border-bottom: 1px solid var(--fm-header-line); box-shadow: 0 8px 16px rgba(20, 41, 62, 0.10); max-height: calc(100vh - var(--fm-header-h)); overflow-y: auto; display: none; } .fm-nav.is-open { display: flex; } .fm-nav__link { padding: 0.85rem 0.25rem; border-bottom: 1px solid var(--fm-header-line); border-radius: 0; font-size: 1rem; } .fm-nav__link.is-active { box-shadow: inset 3px 0 0 var(--fm-accent); padding-left: 0.75rem; } .fm-header[data-nav-open='true'] .fm-burger__bar:nth-child(1) { transform: translateY(5px) rotate(45deg); } .fm-header[data-nav-open='true'] .fm-burger__bar:nth-child(2) { opacity: 0; } .fm-header[data-nav-open='true'] .fm-burger__bar:nth-child(3) { transform: translateY(-5px) rotate(-45deg); } /* --- Dropdowns como acordeones en el panel móvil --- */ .fm-nav__group { border-bottom: 1px solid var(--fm-header-line); } .fm-nav__group .fm-nav__link { border-bottom: 0; flex: 1 1 auto; } .fm-nav__caret { padding: 0.85rem 0.9rem; } .fm-dropdown { position: static; min-width: 0; padding: 0 0 0 0.85rem; background-color: transparent; border: 0; border-radius: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; max-height: 0; overflow: hidden; transition: max-height 200ms ease; } .fm-dropdown::before { display: none; } /* en acordeón el hover del grupo no abre nada: solo .is-open (caret). Se re-declara la transición para que los selectores :hover/:focus-within de desktop no la pisen en táctil. */ .fm-nav__group:hover .fm-dropdown, .fm-nav__group:focus-within .fm-dropdown, .fm-nav__group.is-open .fm-dropdown { transition: max-height 200ms ease; } .fm-nav__group.is-open .fm-dropdown { max-height: 40rem; padding-bottom: 0.6rem; } .fm-dropdown__item { opacity: 1; transform: none; transition-delay: 0s; white-space: normal; padding: 0.6rem 0.75rem; } } /* Con la tipografía al 131% el trío logo + chip + hamburguesa ya no cabe en pantallas angostas: se comprime el logo y el chip, no la tipografía del contenido. */ @media (max-width: 479px) { .fm-header__inner { gap: 0.5rem; } .fm-container { padding-inline: 1rem; } .fm-logo__img { max-height: 1.9rem; max-width: 44vw; } .fm-lang { margin-left: auto; margin-right: 0.35rem; } .fm-lang__btn { padding: 0.2rem 0.45rem; font-size: 0.7rem; } } /* ========================================================================== 5. Botones ========================================================================== */ .fm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.8rem 1.5rem; border: 1px solid transparent; border-radius: var(--fm-radius-sm); font-family: inherit; font-size: 0.9375rem; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: background-color var(--fm-transition), border-color var(--fm-transition), color var(--fm-transition); } .fm-btn--primary, .fm-btn--primary:hover, .fm-btn--primary:focus { background-color: var(--fm-accent); color: var(--fm-navy); } .fm-btn--primary:hover, .fm-btn--primary:focus { background-color: var(--fm-accent-hover); } .fm-btn--ghost { background-color: transparent; border-color: var(--fm-border); color: var(--fm-white); } .fm-btn--ghost:hover, .fm-btn--ghost:focus { border-color: var(--fm-accent); color: var(--fm-accent); } .fm-btn--block { width: 100%; } .fm-btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; } /* --- .btn-demo-glow: brillo animado de los botones de demo — CSS puro --- Clase reutilizable para TODOS los "Agenda una demo" / "Book a demo". a) Filo de luz que recorre el contorno: un conic-gradient (transparente -> verde claro #7FEBAF -> transparente) gira detrás del botón animando el ángulo registrado con @property. El fondo OPACO del botón tapa el centro, así solo queda visible un anillo de ~2px en la orilla (enmascarado por oclusión: más robusto entre navegadores que mask-image). En navegadores sin @property el filo queda estático: sin parpadeos ni roturas. b) box-shadow verde suave con pulso lento (3s alternate). La intensidad vive en variables para poder subirla por contexto (heros con foto). c) hover: sube 2px y el glow se intensifica (el pulso se pausa para que la sombra del hover no pelee con la animación). d) Velocidad del recorrido: 3.5s por vuelta. */ @property --fm-glow-angle { syntax: ''; inherits: false; initial-value: 0deg; } .btn-demo-glow { /* intensidad del pulso (alfa mín/máx) y del hover */ --glow-a1: 0.20; --glow-a2: 0.35; --glow-hover: 0.55; position: relative; z-index: 0; box-shadow: 0 0 24px rgba(39, 196, 107, var(--glow-a2)); animation: fm-glow-pulse 3s ease-in-out infinite alternate; transition: transform var(--fm-transition), box-shadow var(--fm-transition), background-color var(--fm-transition); } .btn-demo-glow::before { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; z-index: -1; border-radius: calc(var(--fm-radius-sm) + 2px); background: conic-gradient(from var(--fm-glow-angle), transparent 0deg, transparent 290deg, #7FEBAF 325deg, transparent 360deg); animation: fm-glow-spin 3.5s linear infinite; pointer-events: none; } @keyframes fm-glow-spin { to { --fm-glow-angle: 360deg; } } @keyframes fm-glow-pulse { from { box-shadow: 0 0 14px rgba(39, 196, 107, var(--glow-a1)); } to { box-shadow: 0 0 24px rgba(39, 196, 107, var(--glow-a2)); } } .btn-demo-glow:hover, .btn-demo-glow:focus-visible { animation: none; /* la sombra del hover manda sobre el pulso */ transform: translateY(-2px); box-shadow: 0 0 32px rgba(39, 196, 107, var(--glow-hover)); } .btn-demo-glow:hover::before, .btn-demo-glow:focus-visible::before { animation-duration: 2.25s; /* el filo acelera un poco al pasar el cursor */ } /* Sobre heros con foto (fm-media-bg) el fondo es más ruidoso: se sube la intensidad del glow para que no se pierda. */ .fm-media-bg .btn-demo-glow { --glow-a1: 0.30; --glow-a2: 0.50; --glow-hover: 0.70; } /* e) Usuarios con movimiento reducido: sin animaciones, glow estático suave */ @media (prefers-reduced-motion: reduce) { .btn-demo-glow, .btn-demo-glow::before { animation: none; } .btn-demo-glow:hover, .btn-demo-glow:focus-visible { transform: none; } } /* ========================================================================== 6. Hero ========================================================================== */ .fm-hero { position: relative; padding-block: clamp(4rem, 11vw, 8rem); background-color: var(--fm-navy); overflow: hidden; } /* Retícula técnica sutil — plano, sin degradados de color */ .fm-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(rgba(52, 84, 118, 0.22) 1px, transparent 1px), linear-gradient(90deg, rgba(52, 84, 118, 0.22) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 40%, transparent 100%); mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 40%, transparent 100%); pointer-events: none; } .fm-hero__inner { position: relative; max-width: 52rem; } .fm-hero__title { color: var(--fm-white); font-size: var(--fm-fs-display); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; } .fm-hero__text { max-width: 40rem; margin-top: 1.25rem; /* color explícito: sin esto hereda el #0D0D0D que portalbasictheme.css aplica a

y el párrafo queda ilegible sobre el marino */ color: var(--fm-muted); font-size: clamp(1rem, 1.8vw, 1.1875rem); } .fm-hero__cta { margin-top: 2.25rem; } /* ========================================================================== 6b. Fondo industrial (estilo flyer): foto difuminada + velo marino -------------------------------------------------------------------------- Se usa con la clase .fm-media-bg en cualquier

. ::before -> la foto, pre-difuminada por CSS (blur + scale para que el desenfoque no deje bordes translúcidos). ::after -> el velo marino + la retícula técnica, en una sola capa. Sin la imagen, ::before queda vacío y el velo rgba(20,41,62,.78) sobre var(--fm-navy) da exactamente #14293E: el fallback es invisible. ========================================================================== */ .fm-media-bg { position: relative; overflow: hidden; background-color: var(--fm-navy); } .fm-media-bg::before { content: ''; position: absolute; top: -4%; left: -4%; right: -4%; bottom: -4%; background-image: var(--fm-bg-industrial); background-size: cover; background-position: center; background-repeat: no-repeat; filter: blur(8px); transform: scale(1.06); -webkit-mask-image: none; mask-image: none; pointer-events: none; } .fm-media-bg::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--fm-bg-veil); background-image: linear-gradient(rgba(52, 84, 118, 0.22) 1px, transparent 1px), linear-gradient(90deg, rgba(52, 84, 118, 0.22) 1px, transparent 1px); background-size: 64px 64px; pointer-events: none; } /* El contenido siempre por encima de las dos capas */ .fm-media-bg > * { position: relative; z-index: 1; } /* fondo con imagen — revertir prueba: la franja de stats del Home hoy va en sólido #14293E (se quitó fm-media-bg de su section). Para revertir basta restaurar esa clase en el markup; estas reglas translúcidas solo aplican cuando la sección lleva fm-media-bg, por eso se conservan activas. */ .fm-media-bg .fm-strip__item { background-color: rgba(31, 58, 86, 0.82); } .fm-media-bg .fm-strip { border-color: rgba(52, 84, 118, 0.8); background-color: rgba(52, 84, 118, 0.5); } @media (prefers-reduced-motion: no-preference) { .fm-media-bg { background-attachment: scroll; } } /* Hero de Contacto: usa su propia foto (planeación de producción) en lugar de la global. Solo redefine la variable de imagen; hereda blur + velo marino rgba(20,41,62,0.78) + rejilla de .fm-media-bg. background-size:cover y position:center ya vienen del ::before de .fm-media-bg. */ .fm-hero--photo-contact { --fm-bg-industrial: url('/ProductionPlanningimage.jpg'); } /* En móvil se sube el velo a 0.85 para blindar la legibilidad del texto blanco/verde sobre una foto más comprimida. */ @media (max-width: 640px) { .fm-hero--photo-contact { --fm-bg-veil: rgba(20, 41, 62, 0.85); } } /* ========================================================================== 7. Tarjetas ========================================================================== */ .fm-card { display: flex; flex-direction: column; padding: 1.75rem; background-color: var(--fm-navy-alt); border: 1px solid var(--fm-border); border-radius: var(--fm-radius); transition: border-color var(--fm-transition); } .fm-section--alt .fm-card { background-color: var(--fm-navy); } .fm-card:hover { border-color: var(--fm-accent); } .fm-card__title { margin-bottom: 0.5rem; color: var(--fm-white); font-size: 1.0625rem; font-weight: 600; } .fm-card__text { color: var(--fm-muted); font-size: var(--fm-fs-sm); margin: 0; } .fm-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; margin-bottom: 1.125rem; border-radius: var(--fm-radius-sm); background-color: var(--fm-accent-soft); color: var(--fm-accent); flex: 0 0 auto; } .fm-card__icon svg { width: 1.2rem; height: 1.2rem; display: block; } /* --- Tarjeta de producto (ERP / CRM) --- */ .fm-product { padding: 2rem; } .fm-product__tag { display: inline-block; margin-bottom: 1rem; padding: 0.2rem 0.6rem; border: 1px solid var(--fm-accent); border-radius: 999px; color: var(--fm-accent); font-size: var(--fm-fs-eyebrow); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .fm-product__title { font-size: 1.5rem; margin-bottom: 0.75rem; } .fm-product__list { margin: 1.25rem 0 1.75rem; padding: 0; list-style: none; font-size: var(--fm-fs-sm); } .fm-product__list li { position: relative; padding-left: 1.5rem; margin-bottom: 0.45rem; } .fm-product__list li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 2px; background-color: var(--fm-accent); } .fm-product__cta { margin-top: auto; } /* --- Módulo (detalle ERP / CRM) --- */ .fm-module { padding: 1.5rem; } .fm-module__head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.9rem; } .fm-module__num { color: var(--fm-border); font-size: var(--fm-fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; } .fm-module__title { margin: 0; color: var(--fm-white); font-size: 1.0625rem; font-weight: 600; } .fm-module__list { margin: 0; padding-left: 1.1rem; color: var(--fm-muted); font-size: var(--fm-fs-sm); } .fm-module__list li { margin-bottom: 0.3rem; } .fm-module__list li::marker { color: var(--fm-accent); } /* ========================================================================== 8. Formulario ========================================================================== */ .fm-form-wrap { max-width: 46rem; margin-inline: auto; padding: clamp(1.5rem, 4vw, 2.5rem); background-color: var(--fm-navy-alt); border: 1px solid var(--fm-border); border-radius: var(--fm-radius); } .fm-form { display: grid; gap: 1.25rem; grid-template-columns: 1fr; } @media (min-width: 720px) { .fm-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fm-field--full { grid-column: 1 / -1; } } .fm-field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; } .fm-label { color: var(--fm-white); font-size: var(--fm-fs-sm); font-weight: 600; margin: 0; } .fm-label .fm-req { color: var(--fm-accent); margin-left: 0.15rem; } .fm-input, .fm-select { width: 100%; height: auto; padding: 0.7rem 0.85rem; background-color: var(--fm-navy); border: 1px solid var(--fm-border); border-radius: var(--fm-radius-sm); box-shadow: none; color: var(--fm-white); font-family: inherit; font-size: 0.9375rem; line-height: 1.4; transition: border-color var(--fm-transition), box-shadow var(--fm-transition); } .fm-input::placeholder { color: rgba(163, 180, 199, 0.55); } .fm-input:focus, .fm-select:focus { outline: none; border-color: var(--fm-accent); box-shadow: 0 0 0 3px var(--fm-accent-soft); } .fm-select { -webkit-appearance: none; appearance: none; padding-right: 2.25rem; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2327C46B' stroke-width='2' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.85rem center; background-size: 12px 8px; cursor: pointer; } .fm-select option { background-color: var(--fm-navy); color: var(--fm-white); } /* --- Checkboxes de productos --- */ .fm-check-grid { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); margin: 0; padding: 0; border: 0; } .fm-check-grid > legend { padding: 0; margin: 0 0 0.6rem; border: 0; color: var(--fm-white); font-size: var(--fm-fs-sm); font-weight: 600; line-height: 1.4; grid-column: 1 / -1; } .fm-check { display: flex; align-items: center; gap: 0.6rem; margin: 0; padding: 0.6rem 0.75rem; background-color: var(--fm-navy); border: 1px solid var(--fm-border); border-radius: var(--fm-radius-sm); color: var(--fm-muted); font-size: var(--fm-fs-sm); font-weight: 400; cursor: pointer; transition: border-color var(--fm-transition), color var(--fm-transition); } .fm-check:hover { border-color: var(--fm-accent); color: var(--fm-white); } .fm-check input[type='checkbox'] { width: 1rem; height: 1rem; margin: 0; accent-color: var(--fm-accent); flex: 0 0 auto; } .fm-check.is-checked { border-color: var(--fm-accent); color: var(--fm-white); } /* --- Validación --- */ .fm-error { display: none; color: var(--fm-danger); font-size: 0.8125rem; line-height: 1.4; } .fm-check-grid .fm-error { grid-column: 1 / -1; margin: 0; } .fm-field.has-error .fm-error, .fm-check-grid.has-error .fm-error { display: block; } .fm-field.has-error .fm-input, .fm-field.has-error .fm-select { border-color: var(--fm-danger); } .fm-form-note { color: var(--fm-muted); font-size: 0.8125rem; } .fm-form-status { display: none; padding: 0.9rem 1rem; border: 1px solid var(--fm-accent); border-radius: var(--fm-radius-sm); background-color: var(--fm-accent-soft); color: var(--fm-white); font-size: var(--fm-fs-sm); } .fm-form-status.is-visible { display: block; } /* ========================================================================== 9. Franja de datos ========================================================================== */ /* 6 tarjetas + 1 celda de GIF. Grid explícito: - móvil : 2 col -> tarjetas 2×3 y el GIF a fila completa debajo - tablet : 3 col -> tarjetas 3×2 y el GIF a fila completa debajo - desktop: 4 col -> fila 1 = 4 tarjetas; fila 2 = Cloud, IA + GIF (span 2) El gap de 1px deja ver el borde de fondo como separador entre celdas. */ .fm-strip { display: grid; gap: 1px; background-color: var(--fm-border); border: 1px solid var(--fm-border); border-radius: var(--fm-radius); overflow: hidden; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 560px) { .fm-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 960px) { .fm-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Cada tarjeta: columna centrada H y V. Todas quedan a la misma altura (grid stretch). El orden vertical es: cuerpo (dato + caption) y el ícono AL FINAL. */ .fm-strip__item { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.85rem; padding: 1.5rem 1rem; background-color: var(--fm-navy-alt); } /* El cuerpo (dato + caption) crece para ocupar todo el espacio menos el ícono y centra su contenido. Como todas las tarjetas tienen la misma altura, el cuerpo mide igual en las 6 -> el ícono queda a la MISMA altura visual, aunque el caption use 1 o 2 líneas o falte el dato (tarjeta de impuestos). */ .fm-strip__body { display: flex; flex: 1 1 auto; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; } .fm-strip__value { display: block; color: var(--fm-accent); font-size: 1.75rem; font-weight: 800; line-height: 1.1; } .fm-strip__label { display: block; color: var(--fm-muted); font-size: var(--fm-fs-sm); line-height: 1.35; } /* Ícono de línea, ~32px de diseño = 2rem. currentColor = var(--fm-accent) = verde #27C46B. Cuadrado fijo: nunca se deforma al angostar la celda. */ .fm-strip__icon { display: block; width: 2rem; height: 2rem; color: var(--fm-accent); flex: 0 0 auto; } .fm-strip__icon svg { display: block; width: 100%; height: 100%; } /* En desktop (4 columnas) se compactan un poco padding y tipografía para que los captions largos fluyan a 2 líneas sin desbordar. */ @media (min-width: 960px) { .fm-strip__item { padding: 1.4rem 0.85rem; gap: 0.7rem; } .fm-strip__value { font-size: 1.6rem; } .fm-strip__label { font-size: 0.8125rem; } } /* --- Celda del GIF de proceso --- Es una celda más del panel (mismos bordes/radios/separadores por el grid). Fondo sólido #1F3A56 = fondo del GIF, para que la imagen se funda sin que se vea el rectángulo (aquí NO se aplica la translucidez de .fm-media-bg). */ .fm-strip__media { grid-column: 1 / -1; /* móvil y tablet: fila completa */ display: flex; align-items: center; justify-content: center; padding: 0.75rem 1rem; background-color: var(--fm-navy-alt); } @media (min-width: 960px) { .fm-strip__media { grid-column: span 2; } /* desktop: las 2 celdas junto a Cloud/IA */ } /* La imagen centrada, sin recorte ni deformación; nunca desborda su celda. */ .fm-strip__gif { display: block; width: 100%; height: 100%; max-width: 100%; object-fit: contain; object-position: center; } /* ========================================================================== 10. CTA de cierre ========================================================================== */ .fm-cta { padding: clamp(2rem, 5vw, 3rem); background-color: var(--fm-navy-alt); border: 1px solid var(--fm-border); border-left: 3px solid var(--fm-accent); border-radius: var(--fm-radius); text-align: center; } .fm-cta h2 { margin-bottom: 0.75rem; } .fm-cta .fm-btn-row { justify-content: center; margin-top: 1.5rem; } /* ========================================================================== 10b. Flyer / one-pager (ERP y CRM) -------------------------------------------------------------------------- Dos columnas: texto + flyer vertical. El flyer del idioma inactivo se oculta por la regla data-lang global, así solo pesa/renderiza uno. ========================================================================== */ .fm-flyer { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; grid-template-columns: 1fr; } @media (min-width: 860px) { .fm-flyer { grid-template-columns: 1.1fr 0.9fr; } .fm-flyer--right .fm-flyer__media { order: 2; } } .fm-flyer__body { min-width: 0; } .fm-flyer__media { display: flex; justify-content: center; } /* El enlace envuelve la imagen; abre el flyer completo en otra pestaña */ .fm-flyer__link { display: inline-block; position: relative; max-width: 420px; width: 100%; border: 1px solid var(--fm-border); border-radius: var(--fm-radius); overflow: hidden; background-color: var(--fm-navy-alt); transition: border-color var(--fm-transition), transform var(--fm-transition); } .fm-flyer__link:hover, .fm-flyer__link:focus-visible { border-color: var(--fm-accent); transform: translateY(-3px); } .fm-flyer__img { display: block; width: 100%; height: auto; } .fm-flyer__badge { position: absolute; left: 0.75rem; bottom: 0.75rem; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.7rem; border-radius: 999px; background-color: rgba(20, 41, 62, 0.85); /* = #14293E con alfa (marino de paleta) */ border: 1px solid var(--fm-accent); color: var(--fm-white); font-size: 0.75rem; font-weight: 600; } .fm-flyer__badge svg { width: 0.9rem; height: 0.9rem; } /* ========================================================================== 10c. Banner de cierre a todo el ancho (wallpaper) + banda cover -------------------------------------------------------------------------- full-width real dentro del contenedor centrado: se saca con márgenes negativos calculados y padding para que la imagen llegue a los bordes. La imagen ya trae logo + tagline, así que encima va solo el CTA. ========================================================================== */ .fm-band { position: relative; border-radius: var(--fm-radius); overflow: hidden; border: 1px solid var(--fm-border); background-color: var(--fm-navy); isolation: isolate; } .fm-band__img { display: block; width: 100%; height: auto; } /* Banner de cierre: la imagen es el fondo, el CTA se superpone abajo */ .fm-closing { display: grid; } .fm-closing__img { grid-area: 1 / 1; display: block; width: 100%; height: 100%; max-height: 26rem; object-fit: cover; } /* PRUEBA fondo sólido: sin imagen, el fondo lo da .fm-band (var(--fm-navy) = #14293E exacto) y el contenido se centra en el bloque. */ .fm-closing__overlay { grid-area: 1 / 1; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; text-align: center; padding: clamp(2rem, 6vw, 3.5rem); /* fondo con imagen — revertir prueba: descomentar el velo de abajo, volver a justify-content: flex-end y padding clamp(1.5rem, 5vw, 3rem), y descomentar el img del wallpaper en el Home. justify-content: flex-end; background: linear-gradient(to top, rgba(20, 41, 62, 0.92) 0%, rgba(20, 41, 62, 0.35) 55%, rgba(20, 41, 62, 0) 100%); */ } /* ========================================================================== 10d. Modal de módulos (lightbox ERP) -------------------------------------------------------------------------- Un solo shell (.fm-modal) con 9 vistas internas; el JS de la página activa la vista del módulo elegido. Cierre: X, overlay, Escape. El foco regresa a la tarjeta que abrió. body.fm-scroll-lock congela el scroll de fondo. ========================================================================== */ .fm-scroll-lock { overflow: hidden; } .fm-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 1rem; opacity: 0; visibility: hidden; transition: opacity 200ms ease, visibility 0s linear 200ms; } .fm-modal.is-open { opacity: 1; visibility: visible; transition: opacity 200ms ease, visibility 0s; } .fm-modal__overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(20, 41, 62, 0.85); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); cursor: pointer; } .fm-modal__dialog { position: relative; width: min(900px, 92vw); max-height: 90vh; overflow-y: auto; background-color: var(--fm-navy-alt); border: 1px solid var(--fm-border); border-radius: var(--fm-radius); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); transform: scale(0.96); transition: transform 200ms ease; } .fm-modal.is-open .fm-modal__dialog { transform: scale(1); } /* X de cierre: área táctil >= 44px, siempre visible sobre la imagen */ .fm-modal__close { -webkit-appearance: none; appearance: none; position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--fm-border); border-radius: 999px; background-color: rgba(20, 41, 62, 0.85); color: var(--fm-white); cursor: pointer; transition: border-color var(--fm-transition), color var(--fm-transition), background-color var(--fm-transition); } .fm-modal__close:hover, .fm-modal__close:focus-visible { border-color: var(--fm-accent); color: var(--fm-accent); } .fm-modal__close svg { width: 1.1rem; height: 1.1rem; } .fm-modal__view { display: none; } .fm-modal__view.is-active { display: block; } .fm-modal__img { display: block; width: 100%; max-height: min(48vh, 24rem); object-fit: cover; border-radius: calc(var(--fm-radius) - 1px) calc(var(--fm-radius) - 1px) 0 0; } .fm-modal__body { padding: clamp(1.25rem, 3.5vw, 2rem); } .fm-modal__title { margin-bottom: 0.5rem; color: var(--fm-white); font-size: 1.35rem; font-weight: 700; } .fm-modal__text { margin-bottom: 1.4rem; color: var(--fm-muted); font-size: var(--fm-fs-body); } /* Las tarjetas que abren modal muestran afordancia de clic (aplica a módulos del ERP y a las tarjetas de servicios del Home) */ .fm-card.is-clickable { cursor: pointer; } .fm-card.is-clickable:focus-visible { outline: 2px solid var(--fm-accent); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .fm-modal, .fm-modal__dialog { transition: none; transform: none; } } /* ========================================================================== 10e. Variante escenario (lightbox de solo imagen — Servicios del Home) -------------------------------------------------------------------------- Misma ventana para todas las imágenes: escenario 3:2 de ancho fijo con object-fit: contain. Las de 1200x800 lo llenan exacto; la de 1180x800 queda con un letterbox marino imperceptible (mismo #14293E del fondo). La imagen trae su propio texto y logo: sin título ni descripción encima. ========================================================================== */ .fm-modal__dialog--stage { width: min(1000px, 92vw); background-color: var(--fm-navy); /* #14293E: escenario y letterbox iguales */ overflow: hidden; } .fm-modal__stage { width: 100%; aspect-ratio: 3 / 2; max-height: 78vh; /* pantallas bajas: crece el letterbox, la imagen sigue completa */ } .fm-modal__img--fit { width: 100%; height: 100%; max-height: none; object-fit: contain; border-radius: 0; } /* CTA opcional bajo la imagen: discreto, no compite con el contenido */ .fm-modal__stagefoot { display: flex; justify-content: center; padding: 0.75rem 1rem 1rem; } .fm-modal__stagefoot .fm-btn { padding: 0.45rem 1.25rem; font-size: 0.9rem; } @media (max-width: 640px) { .fm-modal__dialog--stage { width: 94vw; } } /* ========================================================================== 11. Footer ========================================================================== */ .fm-footer { background-color: var(--fm-navy); border-top: 1px solid var(--fm-border); padding-top: clamp(2.5rem, 6vw, 4rem); padding-bottom: 1.5rem; color: var(--fm-muted); margin: 0; } .fm-footer__grid { display: grid; gap: 2rem; grid-template-columns: 1fr; } @media (min-width: 720px) { .fm-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } } .fm-footer__tagline { margin-top: 0.9rem; color: var(--fm-muted); font-size: var(--fm-fs-sm); max-width: 22rem; } .fm-footer__title { margin-bottom: 0.9rem; color: var(--fm-white); font-size: var(--fm-fs-eyebrow); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .fm-footer__list { margin: 0; padding: 0; list-style: none; font-size: var(--fm-fs-sm); } .fm-footer__list li { margin-bottom: 0.5rem; } .fm-footer__list a { color: var(--fm-muted); } .fm-footer__list a:hover, .fm-footer__list a:focus { color: var(--fm-accent); } .fm-footer__bottom { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; justify-content: space-between; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(52, 84, 118, 0.5); font-size: 0.8125rem; } /* ========================================================================== 12. Utilidades ========================================================================== */ .fm-accent { color: var(--fm-accent); } .fm-text-center { text-align: center; } .fm-mt-lg { margin-top: clamp(2rem, 4vw, 3rem); } .fm-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ========================================================================== 13. Compatibilidad con el chrome de Power Pages / Bootstrap 3 ========================================================================== */ /* El navbar heredado ya no se usa; se neutraliza por si el layout base lo emite */ .navbar-static-top.navbar-inverse, .navbar-fixed-top.navbar-inverse { background-color: var(--fm-navy); border-color: var(--fm-border); box-shadow: none; } .breadcrumb, .page-header { display: none; } /* Formularios Dataverse (basic form) heredan la identidad */ .crmEntityFormView, .entitylist, .entity-form { background-color: transparent; border: 0; color: var(--fm-muted); } .crmEntityFormView label, .crmEntityFormView legend { color: var(--fm-white); } .crmEntityFormView input[type='text'], .crmEntityFormView input[type='email'], .crmEntityFormView input[type='tel'], .crmEntityFormView input[type='number'], .crmEntityFormView textarea, .crmEntityFormView select { background-color: var(--fm-navy); border: 1px solid var(--fm-border); border-radius: var(--fm-radius-sm); box-shadow: none; color: var(--fm-white); } .crmEntityFormView .btn-primary, .entity-form .btn-primary, .btn.button-submit, .btn-primary { background-color: var(--fm-accent); border-color: var(--fm-accent); color: var(--fm-navy); font-weight: 600; } .crmEntityFormView .btn-primary:hover, .crmEntityFormView .btn-primary:focus, .entity-form .btn-primary:hover, .btn.button-submit:hover, .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--fm-accent-hover); border-color: var(--fm-accent-hover); color: var(--fm-navy); } .validation-summary-errors, .crmEntityFormView .validator-text, .help-block.error { color: var(--fm-danger); } .help-block { color: var(--fm-muted); } /* ========================================================================== 14. Capa de contraste -------------------------------------------------------------------------- La plataforma carga portalbasictheme.css, que pinta texto oscuro pensado para fondo claro: h1, .h1, .page_section h1, .color-inverse h1 color:#0D0D0D (0,1,1) h2 / h3 / h4 / h5 color:#0D0D0D (0,0,1) p, .page_section p color:#0D0D0D (0,1,1) a, .a color:#14293E (0,0,1) legend color:#000000 (0,0,1) ::placeholder color:#000 !important Nuestras reglas de elemento (h1 {...} = 0,0,1) empatan y pierden por orden de carga, y contra .page_section h1 (0,1,1) pierden siempre. Solución sin !important: anclar en #mainContent, que es el id que emite 'Default studio template'. Eso da (1,0,1) y gana a cualquier (0,1,1) del tema base. Header y footer viven fuera de #mainContent, así que ahí basta con la clase del componente. Única excepción con !important: ::placeholder, porque el tema base ya lo declara !important y la especificidad no alcanza. ========================================================================== */ /* --- Contenido: títulos siempre blancos, cuerpo siempre gris azulado --- */ #mainContent h1, #mainContent h2, #mainContent h3, #mainContent h4, #mainContent h5, #mainContent h6 { color: var(--fm-white); font-family: var(--fm-font); } #mainContent h1 { font-size: var(--fm-fs-h1); font-weight: 700; } #mainContent h2 { font-size: var(--fm-fs-h2); font-weight: 700; } #mainContent h3 { font-size: var(--fm-fs-h3); font-weight: 600; } #mainContent p, #mainContent li, #mainContent dd, #mainContent dt, #mainContent td, #mainContent th, #mainContent figcaption, #mainContent legend, #mainContent .help-block { color: var(--fm-muted); font-family: var(--fm-font); } #mainContent p { font-size: inherit; } /* --- Componentes que necesitan otro color o tamaño, al mismo peso --- */ #mainContent .fm-hero__title { color: var(--fm-white); font-size: var(--fm-fs-display); font-weight: 800; } #mainContent .fm-product__title { font-size: 1.5rem; } #mainContent .fm-card__title, #mainContent .fm-module__title { font-size: 1.0625rem; font-weight: 600; } #mainContent .fm-label, #mainContent .fm-check-grid > legend, #mainContent .fm-form-status { color: var(--fm-white); } #mainContent .fm-eyebrow, #mainContent .fm-accent, #mainContent .fm-strip__value, #mainContent .fm-product__tag, #mainContent .fm-label .fm-req { color: var(--fm-accent); } #mainContent .fm-error { color: var(--fm-danger); } #mainContent .fm-btn--primary { color: var(--fm-navy); } #mainContent .fm-btn--ghost { color: var(--fm-white); } #mainContent .fm-btn--ghost:hover, #mainContent .fm-btn--ghost:focus { color: var(--fm-accent); } #mainContent .fm-check { color: var(--fm-muted); } #mainContent .fm-check.is-checked, #mainContent .fm-check:hover { color: var(--fm-white); } #mainContent .fm-product__list li, #mainContent .fm-module__list li { color: var(--fm-muted); } /* --- Footer (marino, fuera de #mainContent) --- */ .fm-footer .fm-logo { color: var(--fm-white); } .fm-footer .fm-footer__title { color: var(--fm-white); font-size: var(--fm-fs-eyebrow); } .fm-footer p, .fm-footer li { color: var(--fm-muted); } .fm-footer .fm-footer__list a { color: var(--fm-muted); } .fm-footer .fm-footer__list a:hover, .fm-footer .fm-footer__list a:focus { color: var(--fm-accent); } /* --- Header marino: navegación gris azulado, hover/activo blanco (el activo lleva además el subrayado verde del bloque base). Sobrescribe el `a { color:#14293E }` de portalbasictheme.css (0,0,1) con (0,2,x), sin !important. --- */ .fm-header .fm-nav__link { color: var(--fm-header-ink); } .fm-header .fm-nav__link:hover, .fm-header .fm-nav__link:focus, .fm-header .fm-nav__link.is-active { color: var(--fm-white); } /* --- Placeholders: el tema base los fuerza a negro con !important --- */ .fm-input::placeholder, #mainContent .fm-input::placeholder { color: rgba(163, 180, 199, 0.6) !important; } .fm-input::-webkit-input-placeholder { color: rgba(163, 180, 199, 0.6) !important; } .fm-input::-moz-placeholder { color: rgba(163, 180, 199, 0.6) !important; opacity: 1; } /* --- Basic form de Dataverse: .form-control llega con fondo claro forzado --- */ #mainContent .crmEntityFormView .form-control, #mainContent .entity-form .form-control { background-color: var(--fm-navy) !important; color: var(--fm-white); border: 1px solid var(--fm-border); } @media print { .fm-header, .fm-footer { display: none; } body { padding-top: 0; background-color: #fff; color: #000; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }