/* Global styles · base aplicada a todas las páginas. NOTA: los sub-ficheros CSS YA NO se cargan por @import aquí (la versión quedaba hardcodeada y rompía el cache-busting). Ahora se cargan como versionados desde partials/head.php. Este fichero solo tiene reglas propias. */ @font-face { font-family: 'Nunito'; src: url('../fonts/Nunito-variable.woff2') format('woff2'); font-weight: 400 900; font-style: normal; font-display: swap; } body { font-size: var(--fs-body); line-height: 1.5; background: var(--zander-white-soft); color: var(--zander-black); transition: background-color var(--theme-fade), color var(--theme-fade); } /* ========================================================= ESCALA TIPOGRÁFICA GLOBAL · jerarquía estándar Aplica como base para todas las páginas. Componentes pueden sobreescribir solo cuando hay justificación visual real. ========================================================= */ h1, .h1 { font-size: var(--fs-h1); font-weight: 700; line-height: 1.05; letter-spacing: -.015em; margin: 0; } h2, .h2 { font-size: var(--fs-h2); font-weight: 700; line-height: 1.1; letter-spacing: -.01em; margin: 0; } h3, .h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; letter-spacing: -.005em; margin: 0; } h4, .h4 { font-size: var(--fs-h4); font-weight: 700; line-height: 1.25; margin: 0; } p { font-size: var(--fs-body); line-height: 1.5; margin: 0; } small, .small { font-size: var(--fs-small); } body.site--dark { background: var(--zander-black); color: var(--zander-white-soft); } /* ========================================================= SISTEMA DE TEMA POR BLOQUE (todas las páginas v2) Cada sección lleva data-theme="dark|light". JS detecta la sección dominante y setea body[data-theme]. El body transiciona color de fondo; las secciones son transparentes (en cualquier página que use el sistema) y heredan del body — los bloques contiguos al activo se "tiñen" del color del dominante. Override opcional por sección: data-activation="0..1" (default 0.4). ========================================================= */ /* Paleta cruda por tema (sin semántica de fondo/texto todavía). Definida en el ATRIBUTO: la heredan el body Y cualquier sección con data-theme, de modo que una sección solid puede pintar su propio fondo/texto desde su propio tema. */ [data-theme="dark"] { --theme-bg: var(--zander-black); --theme-ink: var(--zander-white-soft); --theme-ink-soft: rgba(251, 251, 251, .7); } [data-theme="light"] { --theme-bg: var(--zander-white-soft); --theme-ink: var(--zander-black); --theme-ink-soft: rgba(29, 29, 27, .7); } body[data-theme] { transition: background-color var(--theme-fade), color var(--theme-fade); } body[data-theme="dark"], body[data-theme="light"] { background-color: var(--theme-bg); color: var(--theme-ink); --section-text: var(--theme-ink); --section-text-soft: var(--theme-ink-soft); } /* Bloques del sistema (MODO MORPH): transparentes para que el body se vea a través. Los background-image y pseudoelementos decorativos (pattern hero, embers, etc.) se mantienen porque solo neutralizamos background-color. Se desactiva en modo fijo (body[data-theme-mode="solid"]). */ body[data-theme]:not([data-theme-mode="solid"]) [data-theme]:not(body) { background-color: transparent !important; transition: background-color var(--theme-fade), color var(--theme-fade); } /* ========================================================= MODO FIJO (solid) — cada bloque pinta SU PROPIO fondo y texto desde su data-theme. Sin morph, sin animación, texto siempre legible. Se activa de dos formas: - GLOBAL: → toda la web fija (default actual, se setea en partials/head.php). Para volver al morph: quita ese atributo. - POR SECCIÓN: data-theme-solid en una sección concreta (útil aunque el resto esté en morph). */ body[data-theme-mode="solid"] [data-theme], body[data-theme] [data-theme-solid] { background-color: var(--theme-bg) !important; color: var(--theme-ink); --section-text: var(--theme-ink); --section-text-soft: var(--theme-ink-soft); } /* ========================================================= COORDINACIÓN FONDO ↔ TEXTO (arregla el texto invisible) Todo texto que sigue el tema debe cruzar su color a la vez que el fondo del body. Sin esto, el texto que usa var(--section-text) "salta" al color nuevo al instante mientras el fondo aún anima → texto del color nuevo sobre fondo viejo = invisible ~500ms. :where() = especificidad 0: solo añade el timing, no toca el color, así los acentos (amarillo, etc.) conservan el suyo. Cualquier elemento de texto nuevo queda cubierto sin tocar este archivo. Solo elementos de texto de bloque: no incluimos a/button/span para no pisar sus transiciones de hover (transition es shorthand). El texto en línea (strong, em, span) hereda el color del padre y acompaña su transición sin necesitar la propia. */ body[data-theme] :where(h1, h2, h3, h4, h5, h6, p, li, blockquote, figcaption, dt, dd, td, th) { transition: color var(--theme-fade); } /* Override de textos hardcoded para que sigan al body via var(--section-text). Acentos amarillos, badges e iconos decorativos se conservan (no listados). */ body[data-theme] .zw-servicios, body[data-theme] .zw-servicios h2.title, body[data-theme] .zw-servicios .sc h3, body[data-theme] .zw-servicios .sc p, body[data-theme] .zw-servicios .bento-b .b-hero p, body[data-theme] .zw-servicios .bento-b .b-medium p, body[data-theme] .zw-trust__title, body[data-theme] .zw-trust__card h3, body[data-theme] .zw-trust__card p, body[data-theme] .zwsi-faq__title, body[data-theme] .zw-intro__title, body[data-theme] .zw-intro__text, body[data-theme] .zw-proyectos__title, body[data-theme] .zw-hero-dark__title, body[data-theme] .zw-hero-tag, body[data-theme] .hero__subtitle, body[data-theme] .zw-intro-band__title, body[data-theme] .zw-intro-band__title em, body[data-theme] .zw-portfolio-header__title, body[data-theme] .zw-section__title, body[data-theme] .zw-precios-section__title, body[data-theme] .zw-sectores__title, body[data-theme] .zw-sector-card h3, body[data-theme] .zander-method-section-final h2, body[data-theme] .zander-method-section-final h3, body[data-theme] .ms-massive-title .ms-color-black, body[data-theme] .ms-step-content h3 { color: var(--section-text) !important; transition: color var(--theme-fade); } body[data-theme] .zw-servicios .subtitle, body[data-theme] .zw-intro-band__copy p, body[data-theme] .zw-section__subtitle, body[data-theme] .zw-precios-section__subtitle, body[data-theme] .zw-sector-card p, body[data-theme] .zander-method-section-final p, body[data-theme] .ms-step-content p { color: var(--section-text-soft) !important; transition: color var(--theme-fade); } /* Override masivo para páginas de servicio individual (servicio-individual.css) Pisa los colores hardcoded para que todos los títulos/textos sigan al body. Los acentos amarillos (var(--svc-y), --zander-yellow) se mantienen. */ body[data-theme] .zw-section__title--dark, body[data-theme] .zw-promise__intro, body[data-theme] .zw-promise__intro strong, body[data-theme] .zw-promise__body, body[data-theme] .zw-promise__body strong, body[data-theme] .zw-promise li, body[data-theme] .zw-promise ul li, body[data-theme] .zw-promise__list li, body[data-theme] .zw-promise__check-list li, body[data-theme] .zw-bento h3, body[data-theme] .zw-bento p, body[data-theme] .zw-bento .b-hero h3, body[data-theme] .zw-bento .b-hero p, body[data-theme] .zw-bento .b-medium h3, body[data-theme] .zw-bento .b-medium p, body[data-theme] .zw-includes h3, body[data-theme] .zw-includes p, body[data-theme] .zw-includes li, body[data-theme] .zw-includes ul li, body[data-theme] .zw-includes__list li, body[data-theme] .zw-includes__text, body[data-theme] .zw-includes__intro, body[data-theme] .zw-process h2, body[data-theme] .zw-process h3, body[data-theme] .zw-process p, body[data-theme] .zw-projects h2, body[data-theme] .zw-projects h3, body[data-theme] .zw-team h2, body[data-theme] .zw-team h3, body[data-theme] .zw-team__name, body[data-theme] .zw-team__role, body[data-theme] .zw-pricing h2, body[data-theme] .zw-pricing h3, body[data-theme] .zw-pricing p, body[data-theme] .zw-faq h2, body[data-theme] .zw-form h2, body[data-theme] .zw-form h3, body[data-theme] .zw-form p, body[data-theme] .zw-form label, body[data-theme] .zw-hero__title, body[data-theme] .zw-hero__lead, body[data-theme] .zw-hero__trust-item strong, body[data-theme] .zw-hero__trust-item span, body[data-theme] .zw-calc-open-btn { color: var(--section-text) !important; transition: color var(--theme-fade); } body[data-theme] .zw-calc-open-btn:hover { color: var(--zander-black) !important; } body[data-theme] .zw-section__subtitle--dark { color: var(--section-text-soft) !important; transition: color var(--theme-fade); } .container { max-width: var(--container-max); margin: 0 auto; padding-left: var(--container-padding); padding-right: var(--container-padding); } .section { padding: var(--space-16) 0; } .section--lg { padding: var(--space-24) 0; } /* === Selección de texto con marca === */ ::selection { background: var(--zander-yellow); color: var(--zander-black); } /* === Focus visible accesible === */ :focus-visible { outline: 2px solid var(--zander-yellow); outline-offset: 3px; border-radius: 2px; } /* ========================================================= FAQ (zwsi-faq) — componente global ========================================================= */ .zwsi-faq { background: var(--zander-white-soft); padding: 100px 0; } .zwsi-faq__inner { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-padding); } .zwsi-faq__header { margin-bottom: 56px; } .zwsi-faq__title { font-weight: 700; color: var(--zander-black); line-height: 1.1; letter-spacing: -.01em; margin: 0; } .zwsi-faq__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; } .zwsi-faq__item { background: #fff; border: 1px solid rgba(29,29,27,.08); border-radius: 20px; overflow: hidden; transition: border-color var(--t-fast), box-shadow var(--t-fast); } .zwsi-faq__item:hover { border-color: rgba(29,29,27,.18); } .zwsi-faq__item[open] { border-color: rgba(252,198,28,.35); box-shadow: 0 14px 32px rgba(29,29,27,.06); } .zwsi-faq__summary { list-style: none; cursor: pointer; padding: 22px 24px; display: flex; justify-content: space-between; align-items: center; gap: 14px; font-weight: 700; color: var(--zander-black); letter-spacing: -.005em; } .zwsi-faq__summary::-webkit-details-marker { display: none; } .zwsi-faq__arrow { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; border: 1px solid rgba(29,29,27,.12); display: grid; place-items: center; color: var(--zander-black); transition: all var(--t-fast); } .zwsi-faq__arrow svg { width: 12px; height: 12px; transition: transform var(--t-fast); } .zwsi-faq__item[open] .zwsi-faq__arrow { background: var(--zander-yellow); border-color: var(--zander-yellow); } .zwsi-faq__item[open] .zwsi-faq__arrow svg { transform: rotate(180deg); } .zwsi-faq__answer { padding: 0 24px 22px; line-height: 1.6; color: rgba(29,29,27,.7); margin: 0; } /* FAQ home: título centrado + 2 columnas en vez de 3 */ .page-home .zwsi-faq__title { text-align: center; } .page-home .zwsi-faq__list { grid-template-columns: repeat(2, 1fr); } @media (max-width: 899.98px) { .zwsi-faq__list { grid-template-columns: 1fr; } .page-home .zwsi-faq__list { grid-template-columns: 1fr; } } @media (max-width: 689.98px) { .zwsi-faq { padding: 60px 0; } } /* FAQ stagger · aparecen uno tras otro al entrar en viewport */ .zwsi-faq__item { opacity: 0; transform: translateY(14px); transition: opacity 450ms cubic-bezier(0.16, 1, 0.3, 1), transform 450ms cubic-bezier(0.16, 1, 0.3, 1); } .zwsi-faq__item.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .zwsi-faq__item { opacity: 1; transform: none; transition: none; } } /* Sectores: sección con fondo blanco propio — no debe volverse transparente */ body[data-theme] .zw-sectores[data-theme] { background-color: var(--zander-white-soft) !important; } /* CTA fullscreen: texto sigue --section-text igual que el resto de secciones */ body[data-theme] .massive-title .weight-400:not(.highlight-yellow), body[data-theme] .massive-title .weight-900:not(.highlight-yellow) { color: var(--section-text) !important; transition: color var(--theme-fade); } /* ===== ZONAS · marquee de enlaces internos (site-wide, antes del footer) ===== Auto-scroll infinito; pausa al pasar el cursor o al enfocar con teclado. Mismo lenguaje visual que el marquee de sectores de /proyectos. */ .zw-zonas { background: var(--zander-black, #1D1D1B); padding: 64px 0; overflow: hidden; } .zw-zonas__header { max-width: var(--container-max, 1200px); margin: 0 auto 32px; padding: 0 var(--container-padding, 24px); text-align: center; } .zw-zonas__eyebrow { display: block; color: var(--zander-yellow, #FCC61C); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; margin-bottom: 8px; } .zw-zonas__sub { color: var(--zander-white-soft, rgba(255, 255, 255, .7)); margin: 0; } .zw-zonas__wrap { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); } .zw-zonas__track { display: flex; align-items: center; width: max-content; animation: zw-zonas-scroll 30s linear infinite; } /* Pausa al pasar el cursor por la cinta o al enfocar un enlace con teclado */ .zw-zonas__wrap:hover .zw-zonas__track, .zw-zonas__track:focus-within { animation-play-state: paused; } @keyframes zw-zonas-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .zw-zonas__item { display: inline-flex; align-items: center; padding: 12px 28px; font-size: var(--fs-body, 1rem); font-weight: 700; color: rgba(255, 255, 255, .92); white-space: nowrap; text-decoration: none; border: 1px solid rgba(255, 255, 255, .12); border-radius: 100px; margin: 0 8px; transition: background .2s ease, color .2s ease, border-color .2s ease; } .zw-zonas__item:hover, .zw-zonas__item:focus-visible { background: var(--zander-yellow, #FCC61C); color: var(--zander-black, #1D1D1B); border-color: var(--zander-yellow, #FCC61C); } .zw-zonas__sep { color: rgba(252, 198, 28, .4); font-size: 20px; } /* Accesibilidad: sin animación si el usuario reduce el movimiento */ @media (prefers-reduced-motion: reduce) { .zw-zonas__wrap { -webkit-mask-image: none; mask-image: none; } .zw-zonas__track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; gap: 4px; } }