/* ============================================================================ SYNESYS — Layout y componentes Depende de brand.css. Sin degradados, sin texturas ajenas, bloques sólidos. ========================================================================== */ /* ---------- Reset ligero ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } /* Fondo del lienzo del navegador: en móvil, la franja entre la barra de URL y la página (y el rebote del overscroll) muestra el fondo de ; en navy de marca en lugar del blanco por defecto. El body blanco cubre el contenido normal. */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background-color: var(--synesys-navy); } body { font-family: var(--font-main); font-weight: var(--fw-reg); font-size: var(--fs-body); line-height: 1.55; color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, picture, video, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: 0; background: none; } ul { list-style: none; padding: 0; } :focus-visible { outline: 3px solid var(--synesys-magenta); outline-offset: 3px; } /* ---------- Tipografía base ---------- */ h1, h2, h3 { line-height: 1.04; font-weight: var(--fw-black); letter-spacing: -0.02em; } .display { font-family: var(--font-display); font-weight: var(--fw-black); text-transform: uppercase; } .eyebrow { font-weight: var(--fw-bold); font-size: var(--fs-small); letter-spacing: 0.18em; text-transform: uppercase; } /* ---------- Layout helpers ---------- */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: clamp(3.5rem, 8vw, 7rem); } .section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); } .stack > * + * { margin-top: var(--space-3); } /* Bloques de color sólido — reservados a botones/CTA/apoyos (ComentariosRev §4) */ .bg-blue { background: var(--synesys-blue); color: var(--synesys-white); } .bg-magenta { background: var(--synesys-magenta); color: var(--synesys-white); } .bg-orange { background: var(--synesys-orange); color: var(--synesys-white); } .bg-ink { background: var(--synesys-ink); color: var(--synesys-white); } .bg-white { background: var(--synesys-white); color: var(--synesys-ink); } .on-dark a { color: var(--synesys-white); } /* Degradados de marca = lenguaje principal de fondos (ComentariosRev §2/§4/§11) */ .bg-grad-brand { background: var(--grad-brand); color: var(--synesys-white); } .bg-grad-bm { background: var(--grad-bm); color: var(--synesys-white); } .bg-grad-mo { background: var(--grad-mo); color: var(--synesys-white); } .bg-grad-bo { background: var(--grad-bo); color: var(--synesys-white); } .bg-grad-dark { background: var(--grad-dark); color: var(--synesys-white); } .bg-grad-orange { background: var(--grad-orange); color: var(--synesys-white); } /* Fondo con imagen de degradado del Media Kit (la imagen + velo se ponen inline) */ .bg-media { color: var(--synesys-white); background-size: cover; background-position: center; } /* .tint = velo de legibilidad encima del degradado (para texto de cuerpo) */ .bg-grad-brand.tint { background-image: var(--grad-scrim), var(--grad-brand); } .bg-grad-bm.tint { background-image: var(--grad-scrim), var(--grad-bm); } .bg-grad-mo.tint { background-image: var(--grad-scrim), var(--grad-mo); } .bg-grad-bo.tint { background-image: var(--grad-scrim), var(--grad-bo); } /* Deriva lenta opcional del degradado (movimiento elegante, ComentariosRev §7) */ .bg-grad-anim { background-size: 180% 180%; animation: grad-drift 18s var(--ease) infinite alternate; } @keyframes grad-drift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } } @media (prefers-reduced-motion: reduce) { .bg-grad-anim { animation: none; } } /* Tensión narrativa (Home): el problema del cliente antes de la solución. Fondo = imagen de degradado del Media Kit tintada con velo de marca (1.md §2) para integrarse con el hero y el resto del sitio. */ .tension { color: #fff; background-size: cover; background-position: center; } .tension .section-head h2 { color: #fff; } .tension__body { max-width: 62ch; margin: 0 auto; text-align: center; font-size: var(--fs-lead); color: rgba(255,255,255,.9); } .tension__pivot { max-width: 58ch; margin: 1.6rem auto 0; text-align: center; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: clamp(1.3rem, 2.6vw, 2.05rem); line-height: 1.2; color: #fff; } /* ============================================================================ HEADER / NAV El menú se integra DENTRO del Hero: sin barra/contenedor que lo separe (ajuste 2026-06-21, punto 2). Dos modos: --overlay → home: transparente sobre el video; se vuelve sólido al hacer scroll fuera del Hero (.is-stuck) para mantener la navegación útil. --solid → páginas internas: barra blanca fija desde el inicio. ========================================================================== */ .site-header { position: absolute; inset-block-start: 0; inset-inline: 0; z-index: 100; height: var(--header-h); display: flex; align-items: center; background: transparent; transition: background .3s var(--ease), box-shadow .3s var(--ease); } .header-inner { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--logo-safe); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } /* Margen de seguridad respetado: el logo nunca toca el borde (diap. 6) */ .brand-link { display: inline-flex; align-items: center; padding-block: var(--space-1); } /* Isotipo/wordmark del header: ALTERNA 1-a-1 el LOGO ORIGINAL ANIMADO (el wordmark oficial que se ensambla — image2.gif, con su movimiento) con la versión EN COLORES (degradado tricolor en movimiento, ComentariosRev §2). Ambas capas derivan del MISMO artwork (image2.gif) → alineación perfecta del wordmark ensamblado: solo cambia el relleno. Fondo del header oscuro/azul → contorno claro para legibilidad de la fase azul. */ /* La caja = tamaño del wordmark ENSAMBLADO (aspect 1590/182). overflow visible para que el rebote de la "S" del original literal sobresalga ~19px hacia el aire del header (76px). */ .brand-logo-swap { position: relative; display: block; height: 38px; aspect-ratio: 1590 / 182; overflow: visible; } .brand-logo { position: absolute; left: 0; display: block; width: 100%; filter: drop-shadow(0 0 1.5px rgba(255,255,255,.6)) drop-shadow(0 2px 8px rgba(0,0,0,.4)); } /* Crossfade entre capas — la alternancia 1-a-1 la orquesta main.js (reinicia el GIF en cada turno del original para que la animación literal completa se vea intencionalmente). */ .brand-logo--orig, .brand-logo--color { opacity: 0; transition: opacity .5s ease; } /* Capa ORIGINAL: GIF con la animación LITERAL completa (rebote de la "S" + ensamble). Recorte 1590×274 → se ancla por abajo (bottom:0, alto natural) para que el wordmark ensamblado coincida con la caja/colores y el rebote sobresalga por arriba. Transparente. */ .brand-logo--orig { bottom: 0; top: auto; height: auto; object-fit: fill; } /* Capa EN COLORES: degradado tricolor en movimiento, enmascarado con el MISMO trazo del wordmark. Visible por defecto (si JS no corre, se ve el wordmark en colores). */ .brand-logo--color { top: 0; height: 100%; opacity: 1; background: linear-gradient(90deg, var(--synesys-magenta) 0%, var(--synesys-orange) 33%, var(--synesys-blue) 66%, var(--synesys-magenta) 100%); background-size: 300% 100%; -webkit-mask: url('/assets/logo/logo-orig-mask.png') center / 100% 100% no-repeat; mask: url('/assets/logo/logo-orig-mask.png') center / 100% 100% no-repeat; animation: brand-hue 6s linear infinite; } @keyframes brand-hue { from { background-position: 0% 50%; } to { background-position: 300% 50%; } } .brand-logo-swap.is-orig .brand-logo--orig { opacity: 1; } .brand-logo-swap.is-orig .brand-logo--color { opacity: 0; } .brand-logo-swap.is-color .brand-logo--color { opacity: 1; } .brand-logo-swap.is-color .brand-logo--orig { opacity: 0; } @media (prefers-reduced-motion: reduce) { /* sin alternancia ni movimiento: se muestra el wordmark en colores, estático */ .brand-logo--orig { display: none; } .brand-logo--color { opacity: 1 !important; animation: none; background-position: 33% 50%; } } .brand-logo--dark { display: none; } /* (legado del wordmark estático) */ .nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.2rem); } .nav a { font-weight: var(--fw-med); font-size: .95rem; letter-spacing: .01em; padding-block: 4px; position: relative; color: var(--synesys-ink); } .nav a::after { content: ''; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; background: var(--synesys-blue); transition: width .25s var(--ease); } .nav a:hover::after, .nav a.is-active::after { width: 100%; } /* El CTA dentro del nav es un botón: el color del botón debe ganar */ .nav a.btn { color: #fff; } .nav a.btn::after { display: none; } .nav a.btn--ghost { color: var(--synesys-blue); } /* ---------- Modo OVERLAY (home, integrado en el Hero) ---------- */ .site-header--overlay .nav a:not(.btn) { color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.45); } .site-header--overlay .nav a::after { background: #fff; } .site-header--overlay .brand-link .brand-logo { filter: drop-shadow(0 2px 11px rgba(0,0,0,.6)); } /* Header sticky en AZUL institucional (2.md): color oficial de marca, consistente durante todo el scroll. Nav en blanco + CTA magenta conservan buen contraste. */ .site-header--overlay.is-stuck { position: fixed; background: var(--synesys-blue); box-shadow: 0 8px 26px rgba(0,0,0,.22); } .site-header--overlay.is-stuck .nav a:not(.btn) { color: #fff; text-shadow: none; } .site-header--overlay.is-stuck .nav a::after { background: #fff; } .site-header--overlay.is-stuck .brand-link .brand-logo { filter: drop-shadow(0 0 1.5px rgba(255,255,255,.6)) drop-shadow(0 2px 8px rgba(0,0,0,.4)); } /* ---------- Modo SÓLIDO (páginas internas) — bloque AZUL institucional ---------- */ .site-header--solid { position: fixed; background: var(--synesys-blue); } .site-header--solid.is-scrolled { box-shadow: 0 8px 26px rgba(0,0,0,.18); } .site-header--solid .nav a:not(.btn) { color: #fff; } .site-header--solid .nav a::after { background: #fff; } /* CTA del menú: nunca azul sobre header azul → magenta */ .site-header .nav a.btn { background: var(--synesys-magenta); color: #fff; } .site-header .nav a.btn:hover { background: var(--synesys-orange); } .nav-toggle { display: none; width: 44px; height: 44px; flex-direction: column; gap: 5px; align-items: center; justify-content: center; } .nav-toggle span { width: 24px; height: 2px; background: var(--synesys-ink); transition: transform .25s var(--ease), opacity .2s; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ============================================================================ BOTONES (diap. 4.6) ========================================================================== */ .btn { display: inline-flex; align-items: center; gap: .5rem; font-weight: var(--fw-bold); font-size: .98rem; letter-spacing: .01em; padding: .85rem 1.5rem; border-radius: var(--radius); border: 2px solid transparent; transition: transform .15s var(--ease), background .2s, color .2s; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--synesys-blue); color: #fff; } .btn--primary:hover { background: var(--synesys-magenta); } .btn--magenta { background: var(--synesys-magenta); color: #fff; } .btn--magenta:hover { background: var(--synesys-blue); } .btn--blue { background: var(--synesys-blue); color: #fff; } /* sólido azul para secciones magenta/naranja */ .btn--blue:hover { background: var(--synesys-orange); } .btn--ghost { background: transparent; color: var(--synesys-blue); border-color: var(--synesys-blue); } .btn--ghost:hover { background: var(--synesys-blue); color: #fff; } /* Sin botones blancos/negros: paleta oficial (ajuste 2026-06-21 11:59) */ .btn--orange { background: var(--synesys-orange); color: #fff; } .btn--orange:hover { background: var(--synesys-magenta); } .btn--on-dark { background: var(--synesys-orange); color: #fff; } /* antes blanco */ .btn--on-dark:hover { background: var(--synesys-magenta); color: #fff; } .btn--ghost-light { background: transparent; color: #fff; border-color: var(--synesys-orange); } .btn--ghost-light:hover { background: var(--synesys-orange); color: #fff; border-color: var(--synesys-orange); } /* ============================================================================ HERO — video de contenido + ícono institucional + copy fuerte ========================================================================== */ /* Hero "tal cual el video": sin fondo azul, sin overlay ni máscara que oculte la animación (ajuste 2026-06-21, punto 4). El video es protagonista a opacidad plena; la legibilidad del copy se resuelve con sombra de texto, no con velos. */ .hero { position: relative; min-height: 100svh; display: grid; align-items: end; /* El relleno inferior deja libre la costura curva (diag-band .seam) que arranca la "S" */ padding-block: calc(var(--header-h) + 2rem) max(var(--space-7), var(--seam-h)); background: #000; /* respaldo mientras carga el video (el matiz azul lo aporta .hero__media::after) */ color: #fff; overflow: hidden; } .hero__media { position: absolute; inset: 0; z-index: 0; } .hero__media video { width: 100%; height: 100%; object-fit: cover; opacity: 1; filter: brightness(.8) saturate(1.05); } /* Matiz azul: gradación de color del propio video con el azul de marca (mezcla 'multiply', no un velo gris plano) para integrarlo al sitio. Subir/bajar 'opacity' regula la intensidad del tinte. */ .hero__media::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--synesys-blue); mix-blend-mode: multiply; opacity: .62; } .hero__inner { position: relative; z-index: 1; text-shadow: 0 2px 28px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.35); } /* Isotipo animado como elemento visual del Hero (punto 3, image32.gif) */ .hero__isotipo { height: clamp(64px, 9vw, 104px); width: auto; margin-bottom: var(--space-3); filter: drop-shadow(0 4px 18px rgba(0,0,0,.45)); } .hero__eyebrow { color: #fff; opacity: .92; margin-bottom: var(--space-3); display: flex; align-items: center; gap: .8rem; } .hero h1 { font-family: var(--font-display); font-size: var(--fs-mega); text-transform: uppercase; max-width: 22ch; } .hero h1 .accent { color: var(--synesys-magenta); } /* Manifiesto como titular del Hero (misma jerarquía de color que la versión sobre azul) */ .hero h1 .line { display: block; } .hero h1 .line:nth-child(2) { color: var(--synesys-orange); } .hero h1 .line:nth-child(3) { color: var(--synesys-magenta); } .hero__lead { font-size: var(--fs-lead); font-weight: var(--fw-med); max-width: 52ch; margin-top: var(--space-3); } .hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); } /* ============================================================================ PAGE-HERO — encabezado sólido de páginas internas (bajo el header fijo) ========================================================================== */ /* El color de fondo lo aporta la utilidad .bg-* en el marcado (bg-blue por defecto en el HTML); aquí no se fija para no sobrescribir bg-ink/bg-magenta. */ .page-hero { color: #fff; /* Relleno inferior ≥ costura para que la primera sección curve sin tapar el texto */ padding-block: calc(var(--header-h) + var(--space-6)) max(var(--space-6), var(--seam-h)); } /* Hero con foto del Media Kit tintada por el velo de marca (imagen + degradado) */ .page-hero--media { position: relative; background-size: cover; background-position: center; color: #fff; } .page-hero .eyebrow { color: rgba(255,255,255,.85); display: block; margin-bottom: var(--space-2); } .page-hero h1 { font-family: var(--font-display); text-transform: uppercase; font-size: var(--fs-h1); max-width: 20ch; } .page-hero p { max-width: 62ch; margin-top: var(--space-3); font-size: var(--fs-lead); } .page-hero.bg-magenta .eyebrow, .page-hero.bg-orange .eyebrow { color: rgba(255,255,255,.9); } /* Breadcrumb mínimo opcional dentro del page-hero */ .page-hero__crumbs { font-size: var(--fs-small); opacity: .8; margin-bottom: var(--space-3); } .page-hero__crumbs a:hover { text-decoration: underline; } /* ============================================================================ NAVCARDS — accesos a secciones desde el Inicio (multipágina) ========================================================================== */ .navcards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; background: rgba(0,0,0,.08); border: 1px solid rgba(0,0,0,.08); } .navcard { background: var(--synesys-white); padding: clamp(1.5rem, 3vw, 2.5rem); display: flex; flex-direction: column; gap: var(--space-2); transition: background .25s var(--ease), color .25s var(--ease); } .navcard__n { font-family: var(--font-display); font-weight: var(--fw-black); font-size: 1.1rem; color: var(--synesys-magenta); transition: color .25s; } .navcard h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); } .navcard p { color: #555; transition: color .25s; } .navcard__go { margin-top: auto; font-weight: var(--fw-bold); color: var(--synesys-blue); transition: color .25s; } .navcard__go::after { content: ' →'; } .navcard:hover { background: var(--synesys-blue); color: #fff; } .navcard:hover p, .navcard:hover .navcard__n, .navcard:hover .navcard__go { color: #fff; } /* ============================================================================ CTA-BAND — banda de cierre reutilizable (lleva a Contacto) ========================================================================== */ .cta-band { text-align: center; } .cta-band h2 { font-size: var(--fs-h1); max-width: 22ch; margin-inline: auto; } .cta-band p { max-width: 56ch; margin: var(--space-3) auto var(--space-4); font-size: var(--fs-lead); } /* ============================================================================ MANIFIESTO (publisher / creator / platform / culture) ========================================================================== */ .manifesto { text-align: center; } .manifesto__lines { display: grid; gap: .2rem; } .manifesto__lines .line { font-family: var(--font-display); font-weight: var(--fw-black); text-transform: uppercase; font-size: clamp(1.8rem, 6vw, 4.2rem); line-height: 1.02; letter-spacing: -0.02em; color: var(--synesys-ink); } .manifesto__lines .line:nth-child(2) { color: var(--synesys-blue); } .manifesto__lines .line:nth-child(3) { color: var(--synesys-magenta); } .manifesto__lines .line:nth-child(4) { color: var(--synesys-orange); } .manifesto p { max-width: 56ch; margin: var(--space-4) auto 0; font-size: var(--fs-lead); } /* ============================================================================ SECCIÓN ¿POR QUÉ SYNESYS? — bloque sólido ========================================================================== */ .why__grid { display: grid; gap: var(--space-4); grid-template-columns: 1.1fr 1fr; align-items: center; } .why h2 { font-size: var(--fs-h1); } .why .lead { font-size: var(--fs-lead); margin-top: var(--space-3); font-weight: var(--fw-med); } .why__list { display: grid; gap: var(--space-2); margin-top: var(--space-4); } .why__list li { display: flex; gap: .8rem; font-weight: var(--fw-med); } .why__list li::before { content: ''; flex: 0 0 auto; width: 1.05em; height: 1.05em; margin-top: .12em; background: var(--synesys-orange); -webkit-mask: url('/assets/logo/symbol-white.png') center / contain no-repeat; mask: url('/assets/logo/symbol-white.png') center / contain no-repeat; } .why__media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/5; } .why__media img { width: 100%; height: 100%; object-fit: cover; } /* Video de fondo de "Lo que nos hace distintos" (4.md): autoplay/loop/mute, con velo de marca para legibilidad; el contenido va por encima. Más alto para que respire. */ .why--video { position: relative; overflow: hidden; padding-block: clamp(4rem, 8vw, 7rem); color: var(--synesys-white); } .why--video h2, .why--video .lead, .why--video .why__list li { color: #fff; } .why--video .eyebrow { color: rgba(255,255,255,.9); } .why--video > .container { position: relative; z-index: 1; } .why__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .why__bg video { width: 100%; height: 100%; object-fit: cover; } /* Velo de marca parejo (texto a todo el ancho): oscuro arriba, cálido abajo */ .why__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(10,0,32,.82) 0%, rgba(70,0,66,.7) 55%, rgba(170,45,0,.58) 100%); } /* Encabezado y diferenciadores en columnas (sin imagen, texto sobre el video) */ .why__head { max-width: 62ch; margin-bottom: var(--space-5); } .why__head h2 { margin-top: var(--space-2); } .why__list--cols { grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.6rem); margin-top: 0; } .why__list--cols li { flex-direction: column; gap: .7rem; align-items: flex-start; background: rgba(6,0,24,.34); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); padding: clamp(1.2rem, 2vw, 1.8rem); backdrop-filter: blur(2px); } .why__list--cols li strong { font-size: 1.08rem; } @media (prefers-reduced-motion: reduce) { .why__bg video { display: none; } .why--video { background: var(--grad-mo); } } /* ============================================================================ SERVICIOS / CAPACIDADES ========================================================================== */ .section-head { max-width: 60ch; margin-bottom: var(--space-5); } .section-head h2 { font-size: var(--fs-h1); } .section-head .eyebrow { color: var(--synesys-magenta); display: block; margin-bottom: var(--space-2); } .section-head p { margin-top: var(--space-2); font-size: var(--fs-lead); color: #444; } .services { display: grid; gap: 2px; grid-template-columns: repeat(2, 1fr); background: rgba(0,0,0,.08); border: 1px solid rgba(0,0,0,.08); } .service { background: var(--synesys-white); padding: clamp(1.5rem, 3vw, 2.5rem); display: flex; flex-direction: column; gap: var(--space-2); transition: background .25s var(--ease), color .25s var(--ease); } .service__n { font-family: var(--font-display); font-weight: var(--fw-black); font-size: 1.1rem; color: var(--synesys-magenta); transition: color .25s; } .service h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); } .service p { color: #555; transition: color .25s; } .service__k { margin-top: auto; display: flex; flex-wrap: wrap; gap: .4rem; padding-top: var(--space-2); } .service__k span { font-size: .72rem; font-weight: var(--fw-bold); letter-spacing: .1em; text-transform: uppercase; border: 1.5px solid currentColor; padding: .25rem .6rem; border-radius: 999px; opacity: .7; } .service:hover { background: var(--synesys-blue); color: #fff; } .service:hover p, .service:hover .service__n { color: #fff; } /* ============================================================================ CONTENIDO EN MOVIMIENTO — moodboard / collage editorial ========================================================================== */ .mood { background: var(--synesys-ink); color: #fff; } .mood__grid { display: grid; gap: 10px; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 180px; } .mood__item { position: relative; overflow: hidden; border-radius: var(--radius); background: #15151f; } .mood__item img, .mood__item video { width: 100%; height: 100%; object-fit: cover; } .mood__item > img:not(.mood__swap) { transition: transform .5s var(--ease); } .mood__item:hover > img:not(.mood__swap) { transform: scale(1.05); } .mood__item.tall { grid-row: span 2; } .mood__item.wide { grid-column: span 2; } /* Crossfade de mosaico vivo (mood.js): la imagen entrante aparece con leve escala */ .mood__swap { position: absolute; inset: 0; z-index: 1; opacity: 0; transform: scale(1.06); transition: opacity .9s var(--ease), transform 1.15s var(--ease); } .mood__swap.is-in { opacity: 1; transform: scale(1); } /* ============================================================================ METODOLOGÍA — 3 columnas sólidas ========================================================================== */ .method { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; } .method__col { padding: clamp(2rem, 4vw, 3.5rem); min-height: 320px; display: flex; flex-direction: column; } /* "Cómo trabajamos" con video de fondo por tarjeta + overlay de color SÓLIDO (5.md: sin degradados aquí). Tarjetas contenidas y separadas → las diagonales de las costuras fluyen por el fondo sólido de la sección sin interrupción. */ /* Relleno inferior ≥ costura para que las tarjetas libren la curva siguiente. */ #metodologia { padding-bottom: calc(var(--seam-h) + var(--space-4)); } #metodologia .section-head { margin-bottom: var(--space-4) !important; } .method--video { gap: clamp(1rem, 2vw, 1.6rem); } .method--video .method__col { position: relative; overflow: hidden; border-radius: 12px; min-height: clamp(300px, 34vw, 380px); isolation: isolate; box-shadow: 0 12px 32px rgba(0,0,0,.3); /* profundidad + separa la tarjeta azul del fondo azul */ } .method__col__bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } /* Overlay: color institucional sólido con opacidad (contraste con la sección anterior) */ .method--video .method__col::after { content: ''; position: absolute; inset: 0; z-index: 1; } .method--video .method__col.bg-blue::after { background: rgba(0,0,255,.72); } .method--video .method__col.bg-magenta::after { background: rgba(252,0,255,.64); } .method--video .method__col.bg-orange::after { background: rgba(255,70,0,.66); } .method--video .method__col > .k, .method--video .method__col > p, .method--video .method__col > .num { position: relative; z-index: 2; } @media (prefers-reduced-motion: reduce) { .method__col__bg { display: none; } } /* "No empezamos ayer" — momento de descanso: sin video, texto limpio + partners en texto */ #powered-ole { padding-block: clamp(4.5rem, 9vw, 8rem); } .powered-ole__brands { margin-top: var(--space-4); font-weight: var(--fw-bold); letter-spacing: .14em; text-transform: uppercase; font-size: .82rem; color: rgba(255,255,255,.72); } .method__col .k { font-family: var(--font-display); font-weight: var(--fw-black); text-transform: uppercase; font-size: clamp(1.6rem, 3vw, 2.4rem); } .method__col p { margin-top: var(--space-2); font-weight: var(--fw-med); } .method__col .num { margin-top: auto; font-size: .8rem; font-weight: var(--fw-bold); letter-spacing: .2em; opacity: .8; } /* ============================================================================ CLIENTES — logos oficiales (nunca texto) ========================================================================== */ .clients { text-align: center; } /* Logos de clientes en versión blanca (knockout) → panel sólido oscuro para que sean legibles SIN recolorearlos (son marcas de terceros). */ .clients__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: rgba(255,255,255,.10); border: 1px solid var(--synesys-ink); margin-top: var(--space-5); border-radius: var(--radius); overflow: hidden; } .clients__cell { background: var(--synesys-ink); aspect-ratio: 3/2; display: grid; place-items: center; padding: 1.4rem; } .clients__cell img { max-height: 44px; width: auto; object-fit: contain; opacity: .8; transition: opacity .25s, transform .25s var(--ease); } .clients__cell:hover img { opacity: 1; transform: scale(1.06); } .clients__note { margin-top: var(--space-3); font-size: var(--fs-small); color: #888; } /* ============================================================================ CASOS ========================================================================== */ /* Collage audiovisual de casos (SLIDE 22): teselas 16:9 (2 col) y 9:16 (2 filas) */ .cases-collage { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense; grid-auto-rows: clamp(110px, 13vw, 190px); gap: clamp(.6rem, 1.2vw, 1rem); margin-top: var(--space-4); } .ctile { position: relative; margin: 0; border-radius: 16px; overflow: hidden; background: rgba(255,255,255,.08); box-shadow: 0 12px 30px rgba(0,0,0,.3); } .ctile--v { grid-row: span 2; } .ctile--h { grid-column: span 2; } .ctile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ctile figcaption { position: absolute; left: .7rem; bottom: .6rem; z-index: 1; font-size: .7rem; font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,.45); padding: .25rem .65rem; border-radius: 999px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* Métricas con conteo ascendente (casos.js) */ .case-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.6rem, 6vw, 5rem); margin-top: var(--space-5); text-align: center; color: #fff; } .case-stat b { display: block; font-family: var(--font-display); font-weight: var(--fw-black); font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1; font-variant-numeric: tabular-nums; } .case-stat span { display: block; margin-top: .45rem; font-size: .84rem; opacity: .85; letter-spacing: .06em; text-transform: uppercase; } .cases { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, 1fr); } .case { border: 1px solid rgba(0,0,0,.12); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.5rem); display: flex; flex-direction: column; gap: var(--space-2); } .case__tag { color: var(--synesys-magenta); font-weight: var(--fw-bold); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; } .case h3 { font-size: var(--fs-h3); font-weight: var(--fw-black); } .case p { color: #555; font-size: .96rem; } .case__metrics { display: flex; gap: var(--space-3); margin-top: var(--space-2); flex-wrap: wrap; } .case__metrics b { display: block; font-family: var(--font-display); font-weight: var(--fw-black); font-size: 1.8rem; color: var(--synesys-blue); } .case__metrics span { font-size: .78rem; color: #777; } /* ============================================================================ CTA / CONTACTO + FORM ========================================================================== */ .contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; } .contact__grid > * { min-width: 0; } /* evita que el contenido imponga ancho intrínseco y desborde */ .contact h2 { font-size: var(--fs-h1); } .contact .lead { font-size: var(--fs-lead); margin-top: var(--space-3); } .contact__points { margin-top: var(--space-4); display: grid; gap: var(--space-2); } .contact__points li { display: flex; gap: .7rem; font-weight: var(--fw-med); } .contact__points li::before { content: ''; flex: 0 0 auto; width: 1.05em; height: 1.05em; margin-top: .12em; background: var(--synesys-orange); -webkit-mask: url('/assets/logo/symbol-white.png') center / contain no-repeat; mask: url('/assets/logo/symbol-white.png') center / contain no-repeat; } .form { display: grid; gap: var(--space-2); background: #fff; color: var(--synesys-ink); padding: clamp(1.5rem, 3vw, 2.2rem); border-radius: var(--radius); min-width: 0; } .field { display: grid; gap: .35rem; min-width: 0; } .field label { font-size: .82rem; font-weight: var(--fw-bold); letter-spacing: .02em; } .field input, .field select, .field textarea { font: inherit; padding: .75rem .9rem; border: 1.5px solid rgba(0,0,0,.2); border-radius: var(--radius); background: #fff; color: var(--synesys-ink); transition: border-color .2s; /* width:100% + min-width:0 → el control nunca impone su ancho intrínseco (p.ej. el