/* ========================================================================== Wemark — hoja de estilos principal Reconstrucción del sitio Framer "Ora® — Agency" (wemark) ========================================================================== */ /* -------------------------------------------------------------------------- 1. Fuentes -------------------------------------------------------------------------- */ @font-face { font-family: "General Sans"; src: url("../fonts/General-Sans-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "General Sans"; src: url("../fonts/General-Sans-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "General Sans"; src: url("../fonts/General-Sans-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "General Sans"; src: url("../fonts/General-Sans-500-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: "General Sans"; src: url("../fonts/General-Sans-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "General Sans"; src: url("../fonts/General-Sans-700-italic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: "Switzer"; src: url("../fonts/Switzer-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Switzer"; src: url("../fonts/Switzer-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } /* Instrument Sans / Serif: hero de la home y pies superpuestos de las piezas de caso */ @font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("../fonts/Instrument-Sans-variable-normal.woff2") format("woff2"); } @font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/Instrument-Serif-400-italic.woff2") format("woff2"); } /* -------------------------------------------------------------------------- 2. Tokens de diseño -------------------------------------------------------------------------- */ :root { --font-sans: "General Sans", "Helvetica Neue", Arial, sans-serif; --font-display: "Switzer", "General Sans", sans-serif; --color-black: #000; --color-white: #fff; --color-ink: #1a1a1a; /* texto de la frase grande */ --color-grey: #545454; /* botones grises / barra de progreso */ --color-grey-text: #8c8c8c; /* párrafos secundarios */ --color-grey-light: #e1e1e1; /* etiquetas y tarjetas de logos */ --color-grey-input: #2e2e2e; /* campos del formulario */ --color-nav-bg: rgba(251, 251, 251, 0.97); --line-dark: rgba(0, 0, 0, 0.2); --line-light: rgba(255, 255, 255, 0.2); --radius-card: 10px; --radius-pill: 200px; --radius-tag: 55px; --gutter: 15px; /* margen lateral de los contenedores */ --gap: 15px; /* separación entre tarjetas */ --section-bottom: 120px; /* espacio inferior de cada sección */ --color-footer: #3d454a; /* gris pizarra medio (entre el suelo y la pared del hero), en vez de negro */ --nav-height: 67px; --ease: cubic-bezier(0.44, 0, 0.56, 1); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); } /* -------------------------------------------------------------------------- 3. Reset y base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); font-weight: 500; font-size: 14px; line-height: 1.4; color: var(--color-black); background: var(--color-white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.theme-dark { background: var(--color-black); color: var(--color-white); } h1, h2, h3, h4, p { margin: 0; font-weight: inherit; } a { color: inherit; text-decoration: none; } img, video, svg { display: block; max-width: 100%; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } ul { margin: 0; padding: 0; list-style: none; } ::selection { background: var(--color-black); color: var(--color-white); } /* -------------------------------------------------------------------------- 4. Tipografía -------------------------------------------------------------------------- */ .h1 { font-size: 44px; line-height: 1.21; font-weight: 500; letter-spacing: 0; } .h2 { font-size: 30px; line-height: 1; font-weight: 500; } .h3 { font-size: 26px; line-height: 1; font-weight: 400; letter-spacing: -0.01em; } .label { font-size: 14px; line-height: 1; font-weight: 500; } .label--tight { letter-spacing: -0.2px; } .body { font-size: 14px; line-height: 1.4; font-weight: 500; letter-spacing: -0.01em; } .small { font-size: 12px; line-height: 19px; font-weight: 400; letter-spacing: -0.2px; } .muted { opacity: 0.6; } .muted-40 { opacity: 0.4; } .statement { font-family: var(--font-display); font-weight: 500; font-size: clamp(44px, 5.6vw, 84px); line-height: 1.1; letter-spacing: -0.026em; color: var(--color-ink); } /* -------------------------------------------------------------------------- 5. Layout -------------------------------------------------------------------------- */ .container { padding-left: var(--gutter); padding-right: var(--gutter); } .section { padding-bottom: var(--section-bottom); } .section-head { display: flex; flex-direction: column; gap: 15px; margin-bottom: 45px; } .section-head__row { display: flex; align-items: center; justify-content: space-between; gap: 15px; } .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); } .grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); } .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); } .media { position: relative; overflow: hidden; border-radius: var(--radius-card); background: #eee; } .media > img, .media > video { width: 100%; height: 100%; object-fit: cover; } /* iOS Safari dibuja un botón de play sobre los vídeos que aún no han arrancado (tarjetas en espera): se oculta */ video::-webkit-media-controls-start-playback-button, video::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; opacity: 0; pointer-events: none; } video::-webkit-media-controls { display: none !important; } .media--ratio > img, .media--ratio > video { position: absolute; inset: 0; } /* Línea divisoria animada */ .line { height: 1px; width: 100%; background: var(--line-dark); transform-origin: left center; transform: scaleX(0); transition: transform 1.2s var(--ease-out); } .line--light { background: var(--line-light); } .line.is-visible { transform: scaleX(1); } /* Animaciones de aparición */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); } .reveal.is-visible { opacity: 1; transform: none; } .reveal--fade { transform: none; } .reveal[data-delay="1"] { transition-delay: 0.1s; } .reveal[data-delay="2"] { transition-delay: 0.2s; } .reveal[data-delay="3"] { transition-delay: 0.3s; } @media (prefers-reduced-motion: reduce) { .reveal, .line { opacity: 1; transform: none; transition: none; } } /* -------------------------------------------------------------------------- 6. Botones y enlaces -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 11px 18px; border-radius: var(--radius-pill); font-size: 14px; line-height: 1; font-weight: 500; white-space: nowrap; border: 1px solid transparent; transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease); } .btn--grey { background: var(--color-grey); color: var(--color-white); } .btn--grey:hover { background: var(--color-white); color: var(--color-black); } .btn--white { background: var(--color-white); color: var(--color-black); } .btn--white:hover { background: var(--color-black); color: var(--color-white); } .btn--black { background: var(--color-black); color: var(--color-white); } .btn--black:hover { background: transparent; color: var(--color-black); border-color: var(--color-black); } .btn--outline-white { background: var(--color-white); color: var(--color-black); } .btn--outline-white:hover { background: transparent; color: var(--color-white); border-color: var(--color-white); } /* Enlace con subrayado que entra desde la izquierda */ .inline-link { text-decoration: underline; text-underline-offset: 3px; } .ul-link { position: relative; display: inline-block; padding: 4px 0; font-size: 14px; line-height: 1; letter-spacing: -0.2px; overflow: hidden; } .ul-link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: translateX(-101%); transition: transform 0.4s var(--ease); } .ul-link:hover::after { transform: translateX(0); } .ul-link--reverse::after { transform: translateX(0); } .ul-link--reverse:hover::after { transform: translateX(101%); } /* Enlace de sección ("All Articles →") */ .section-link { display: inline-flex; align-items: center; gap: 5px; padding: 5px 0 5px 5px; font-size: 14px; line-height: 1; font-weight: 500; } .section-link__arrow { position: relative; width: 40px; height: 17px; border: 1px solid currentColor; border-radius: 17px; overflow: hidden; display: flex; align-items: center; justify-content: flex-end; padding-right: 12px; } .section-link__arrow svg { width: 15px; height: 8px; flex: none; transition: transform 0.4s var(--ease); } .section-link__arrow svg:first-child { position: absolute; right: 12px; transform: translateX(-29px); } .section-link:hover .section-link__arrow svg:last-child { transform: translateX(29px); } .section-link:hover .section-link__arrow svg:first-child { transform: translateX(0); } /* Etiqueta tipo "pill" */ .tag { display: inline-flex; align-items: center; justify-content: center; padding: 9px 20px; border-radius: var(--radius-tag); background: var(--color-grey-light); font-size: 14px; line-height: 1; font-weight: 500; color: var(--color-black); } /* -------------------------------------------------------------------------- 7. Navegación -------------------------------------------------------------------------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--nav-height); transition: background-color 0.4s var(--ease), color 0.4s var(--ease); } .nav__inner { position: relative; height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gutter); } .nav__links { display: flex; gap: 20px; } .nav__logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100px; height: 21px; } .nav__logo svg { width: 100%; height: 100%; } .nav__line { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0; height: 1px; background: var(--line-light); opacity: 0; transition: opacity 0.4s; } /* Tema blanco (por defecto) */ .nav { background: var(--color-white); color: var(--color-black); } .nav .btn { background: var(--color-black); color: var(--color-white); } .nav .btn:hover { background: transparent; color: var(--color-black); border-color: var(--color-black); } /* Tema transparente (home sobre el vídeo) */ .nav--transparent:not(.is-scrolled) { background: transparent; color: var(--color-white); } .nav--transparent:not(.is-scrolled) .nav__inner { padding: 0 45px; } .nav--transparent:not(.is-scrolled) .nav__line { opacity: 1; } .nav--transparent:not(.is-scrolled) .btn { background: var(--color-white); color: var(--color-black); } .nav--transparent:not(.is-scrolled) .btn:hover { background: var(--color-black); color: var(--color-white); } .nav--transparent.is-scrolled { background: var(--color-nav-bg); } /* Tema negro (contacto) */ .nav--black { background: var(--color-black); color: var(--color-white); } .nav--black .btn { background: var(--color-white); color: var(--color-black); } .nav--black .btn:hover { background: transparent; color: var(--color-white); border-color: var(--color-white); } .nav__mobile { display: none; } .nav__menu-btn { display: none; margin-left: auto; } /* Menú móvil a pantalla completa */ .menu { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; padding: 12px 15px 40px; color: var(--color-white); background: radial-gradient(120% 80% at 50% 0%, #2c2c2c 0%, #111 60%, #000 100%); opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease), visibility 0.4s; } .menu.is-open { opacity: 1; visibility: visible; } .menu__top { display: flex; align-items: center; justify-content: space-between; height: 36px; } .menu__links { margin: auto 0; display: flex; flex-direction: column; gap: 6px; } .menu__links a { font-size: 52px; line-height: 1.2; font-weight: 500; letter-spacing: -0.02em; opacity: 0; transform: translateY(20px); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); } .menu.is-open .menu__links a { opacity: 1; transform: none; } .menu.is-open .menu__links a:nth-child(2) { transition-delay: 0.05s; } .menu.is-open .menu__links a:nth-child(3) { transition-delay: 0.1s; } .menu.is-open .menu__links a:nth-child(4) { transition-delay: 0.15s; } .menu.is-open .menu__links a:nth-child(5) { transition-delay: 0.2s; } body.menu-open { overflow: hidden; } /* -------------------------------------------------------------------------- 8. Footer -------------------------------------------------------------------------- */ .footer { background: var(--color-footer); color: var(--color-white); padding: 100px 14px 14px; } .footer__cta { display: grid; grid-template-columns: 1fr 2fr; gap: 15px; margin-bottom: 120px; } .footer__cta-content { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; } .footer__cta-content .h2 { margin-bottom: -11px; } .footer__row { display: grid; grid-template-columns: 1fr 2fr; gap: 15px; padding-top: 14px; } .footer__cols { display: flex; gap: 80px; } .footer__col { display: flex; flex-direction: column; gap: 15px; } .footer__col ul { display: flex; flex-direction: column; gap: 5px; } .footer__col .ul-link { padding: 4px 0; } .footer__bottom { display: grid; grid-template-columns: 1fr 2fr; gap: 14px; margin-top: 200px; font-size: 10px; line-height: 1; font-weight: 400; } .footer__bottom-right { display: flex; justify-content: space-between; } .footer__copy { color: rgba(255, 255, 255, 0.4); } .footer__logo { width: 96px; height: 20px; } /* -------------------------------------------------------------------------- 9. Tarjetas de proyecto (home / detalle) Dos tarjetas por fila. Al pasar el ratón, la tarjeta crece al 60 % del ancho y la vecina se reduce al 40 %; la imagen mide siempre ese 60 %, de modo que al abrirse la tarjeta se ve la composición completa. -------------------------------------------------------------------------- */ .projects-row { display: flex; gap: var(--gap); padding: 0 var(--gutter) var(--gap); } .projects-row--first { padding-top: var(--gap); } .projects-row--single { display: grid; grid-template-columns: 1fr; } .pcard { position: relative; display: block; flex: 1 1 0; min-width: 0; height: calc((100vw - 45px) * 0.5107); overflow: hidden; border-radius: var(--radius-card); background: #ddd; transition: flex-grow 1s var(--ease-out); } .pcard:hover { flex-grow: 1.5; } .pcard--disabled, .gcard.pcard--disabled { cursor: default; } .pcard--vivid .pcard__media video { filter: saturate(1.25) contrast(1.05); } /* Tarjetas cuyo render salió con el gris cálido (card_cool): se enfría con un velo azulado en modo "color", se aclara un 3 % y el degradado inferior es algo más suave. Provisional hasta reexportar los vídeos. */ .pcard--cool .pcard__media video, .pcard--cool .gcard__media video { filter: brightness(1.03); } .cool-tint { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: #4a6a8e; mix-blend-mode: color; opacity: 0.14; -webkit-mask-image: var(--mask); mask-image: var(--mask); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* card_zoom: en escritorio el vídeo de la tarjeta se acerca (p. ej. 1.15) para igualar el tamaño de los teléfonos entre renders; el velo frío se escala con él para que la máscara siga coincidiendo. En móvil no se aplica. */ @media (min-width: 810px) { [style*="--card-zoom"] > video, [style*="--card-zoom"] > .cool-tint { transform: scale(var(--card-zoom)); transform-origin: 50% 50%; } } .pcard--cool .pcard__overlay, .pcard--cool .gcard__overlay { background: linear-gradient(rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.5) 100%); } @media (max-width: 809px) { .cool-tint { -webkit-mask-image: var(--mask-m, var(--mask)); mask-image: var(--mask-m, var(--mask)); } } .pcard--disabled .btn { pointer-events: none; opacity: 0.85; } .pcard--wide { flex: none; height: auto; aspect-ratio: 1410 / 711; } .pcard__media { position: absolute; top: 0; bottom: 0; width: calc((100vw - 45px) * 0.6); } .pcard--left .pcard__media { left: 0; } .pcard--right .pcard__media { right: 0; } .pcard--wide .pcard__media { inset: 0; width: auto; } .pcard__media img, .pcard__media video { width: 100%; height: 100%; object-fit: cover; } /* Tarjeta compuesta: mockup de dispositivos con el contenido encajado en las pantallas (card_composite) */ .devcomp { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; container-type: size; } .devcomp__frame { position: absolute; inset: 0; } .devcomp__screen { position: absolute; overflow: hidden; background: #fff; } .devcomp__screen > img, .devcomp__screen > video { position: absolute; inset: 0; object-position: top center; } .devcomp__bg, .fit-bg, .fit-img { display: none; } /* Tarjeta ancha con vídeo ajustado (card_mobile_fit): se muestra entero a toda la altura, con los laterales rellenos por su fondo desenfocado */ /* En escritorio la tarjeta ancha muestra el vídeo tal cual, a toda la tarjeta (el vídeo ya viene en su proporción) */ .pcard--wide .pcard__media--fit video { width: 100%; height: 100%; object-fit: cover; } /* Ventana de navegador dentro de una pantalla: barra superior + contenido entero debajo */ .devcomp__browser { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; } .devcomp__chrome { flex: none; height: 3.9cqw; display: flex; align-items: center; gap: 0.45cqw; padding: 0 0.9cqw; background: #ececed; border-bottom: 1px solid #d9d9db; } .devcomp__chrome i { width: 0.7cqw; height: 0.7cqw; border-radius: 50%; background: #fe5f57; } .devcomp__chrome i:nth-child(2) { background: #febc2e; } .devcomp__chrome i:nth-child(3) { background: #28c840; } .devcomp__chrome span { flex: 1; margin: 0 1cqw 0 0.8cqw; height: 2.2cqw; border-radius: 0.6cqw; background: #fff; font-size: 1.05cqw; line-height: 2.2cqw; text-align: center; color: #666; letter-spacing: 0; } .devcomp__browser > video, .devcomp__browser > img { position: relative; flex: 1; min-height: 0; height: auto; width: 100%; object-fit: cover; object-position: top center; } .pcard__media-mobile { display: none; object-position: top center; } .pcard__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.62) 100%); } /* sombra de abajo arriba como en el original; por encima del vídeo ajustado (z-index 1 dentro del medio) */ .pcard__cta { position: absolute; z-index: 2; left: 50%; bottom: 40px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--color-white); text-align: center; white-space: nowrap; } .pcard--wide .pcard__cta { left: 59px; transform: none; align-items: flex-start; text-align: left; } .pcard__text { display: flex; flex-direction: column; gap: 4px; } .pcard__cat { font-size: 14px; line-height: 1; letter-spacing: -0.2px; } .pcard__title { font-size: 24px; line-height: 1.09; letter-spacing: -0.01em; } /* -------------------------------------------------------------------------- 10. Tarjetas de artículo -------------------------------------------------------------------------- */ .acard { display: flex; flex-direction: column; gap: 15px; } .acard__media { aspect-ratio: 1; border-radius: var(--radius-card); overflow: hidden; } .acard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); } .acard:hover .acard__media img { transform: scale(1.04); } .acard__details { display: flex; flex-direction: column; gap: 10px; } .acard__title { font-size: 26px; line-height: 1; font-weight: 400; letter-spacing: -0.01em; } .read-time { display: flex; align-items: center; gap: 10px; margin-top: 0; } .read-time__icon { position: relative; width: 20px; height: 20px; border: 1px solid currentColor; border-radius: 50%; overflow: hidden; flex: none; } .read-time__icon svg { position: absolute; top: 4px; left: 4px; width: 12px; height: 12px; transition: transform 0.4s var(--ease); } .read-time__icon svg:first-child { transform: translateX(-17px); } .acard:hover .read-time__icon svg:last-child { transform: translateX(17px); } .acard:hover .read-time__icon svg:first-child { transform: translateX(0); } .news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } /* -------------------------------------------------------------------------- 11. Home -------------------------------------------------------------------------- */ /* El hero de la home vive en hero.css (perlas Three.js). Aquí quedan los títulos animados que usan las interiores. */ .hero__title { display: flex; flex-direction: column; } .hero__title span { display: block; overflow: hidden; } .hero__title span > span { display: block; transform: translateY(110%); animation: rise 1s var(--ease-out) forwards; } .hero__title span:nth-child(2) > span { animation-delay: 0.1s; } @keyframes rise { to { transform: none; } } .scroll-hint { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; line-height: 1.2; } .scroll-hint__arrows { display: flex; flex-direction: column; gap: 3px; padding-top: 4px; height: 17px; overflow: hidden; } .scroll-hint__arrows svg { width: 10px; height: 7px; animation: bounce-arrows 1.6s var(--ease) infinite; } @keyframes bounce-arrows { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } } /* Frase grande + capacidades */ .statement-section { padding: var(--section-bottom) 20px; overflow: hidden; } /* aire arriba (tras las tarjetas) y abajo (antes del footer) */ .statement-section .statement { padding: 0; } .statement-section .line { margin: 80px 0 80px; } .capabilities { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .capabilities__head { font-family: var(--font-display); font-weight: 400; font-size: 18px; line-height: 1.3; letter-spacing: -0.028em; color: var(--color-ink); } .capabilities__list { display: flex; flex-direction: column; gap: 40px; } .capabilities__item { display: grid; grid-template-columns: 196px 1fr; gap: 10px; position: relative; padding-bottom: 40px; } .capabilities__item:last-child { padding-bottom: 0; } .statement-section .capabilities__item .line { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; background: rgba(207, 207, 207, 0.6); } /* más específico que .statement-section .line (escritorio y móvil) para anular su margen */ .capabilities__item:last-child .line { display: none; } .capabilities__item h3 { font-family: var(--font-display); font-weight: 400; font-size: 18px; line-height: 1.3; letter-spacing: -0.028em; color: var(--color-ink); } .capabilities__item p { font-family: var(--font-display); font-weight: 400; font-size: 18px; line-height: 1.3; letter-spacing: -0.028em; color: var(--color-grey-text); max-width: 300px; } /* Sección de noticias de la home */ .home-news { padding: 75px var(--gutter) 90px; } .home-news .line { margin-bottom: 15px; } .home-news .section-head__row { margin-bottom: 45px; } /* -------------------------------------------------------------------------- 12. Páginas interiores: hero con vídeo encajado -------------------------------------------------------------------------- */ .page-hero { position: relative; padding: 0 var(--gutter) var(--gutter); } .page-hero__media { position: relative; height: calc(100vh - 15px); min-height: 520px; overflow: hidden; border-radius: 0 0 var(--radius-card) var(--radius-card); background: #111; } .page-hero__media video, .page-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .page-hero__overlay { position: absolute; inset: 0; background: linear-gradient(rgba(255, 255, 255, 0) 70%, rgba(0, 0, 0, 0.39) 100%); } .page-hero__content { position: absolute; left: 0; right: 0; bottom: 0; padding: 35px; display: flex; flex-direction: column; align-items: flex-start; gap: 15px; color: var(--color-white); } /* Bloque CTA con vídeo (About / Careers) */ .video-cta { position: relative; overflow: hidden; border-radius: var(--radius-card); aspect-ratio: 1410 / 711; background: #222; color: var(--color-white); } .video-cta video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .video-cta__content { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; } .video-cta__content .h2 { margin-top: -13px; } .video-cta--bleed { border-radius: 0; aspect-ratio: 1440 / 726; } /* -------------------------------------------------------------------------- 13. About -------------------------------------------------------------------------- */ .intro { padding: 45px var(--gutter) var(--section-bottom); } .intro .line { margin-bottom: 15px; } .intro__text { display: grid; grid-template-columns: 460px 460px; gap: 30px; margin-top: 45px; } .approach { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); } .approach__card { display: flex; flex-direction: column; gap: 15px; } .approach__media { aspect-ratio: 460 / 491; } .approach__details { display: flex; flex-direction: column; gap: 15px; } .approach__details .h2 { margin-top: 0; } .approach__details p { max-width: 414px; } /* Acordeón de servicios */ .accordion { display: flex; flex-direction: column; } .accordion__item { border-bottom: 1px solid var(--line-dark); } .accordion__head { display: flex; align-items: center; width: 100%; padding: 15px 0; text-align: left; } .accordion__num { width: 231px; flex: none; font-size: 30px; line-height: 1; } .accordion__title { flex: 1; font-size: 30px; line-height: 1; } .accordion__plus { position: relative; width: 22px; height: 22px; flex: none; } .accordion__plus::before, .accordion__plus::after { content: ""; position: absolute; background: var(--color-black); top: 50%; left: 50%; transition: transform 0.4s var(--ease); } .accordion__plus::before { width: 15px; height: 1px; transform: translate(-50%, -50%); } .accordion__plus::after { width: 1px; height: 15px; transform: translate(-50%, -50%); } .accordion__item.is-open .accordion__plus::after { transform: translate(-50%, -50%) rotate(90deg); } .accordion__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ease); } .accordion__item.is-open .accordion__body { grid-template-rows: 1fr; } .accordion__body > div { overflow: hidden; } .accordion__answer { padding: 0 0 15px 235px; } .accordion__answer p { max-width: 705px; } /* Tarjetas de clientes */ .clients { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); } .client { position: relative; aspect-ratio: 341 / 339; border-radius: var(--radius-card); background: var(--color-grey-light); overflow: hidden; display: flex; align-items: center; justify-content: center; } .client__logo { width: 154px; height: 49px; display: flex; align-items: center; justify-content: center; transition: transform 0.5s var(--ease), opacity 0.5s var(--ease); } .client--small .client__logo { width: 116px; height: 37px; } .client__logo img { width: 100%; height: 100%; object-fit: contain; } .client__text { position: absolute; left: 25px; right: 25px; bottom: 25px; opacity: 0; transform: translateY(12px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); } .client__plus { position: absolute; right: 30px; top: 30px; width: 30px; height: 30px; border-radius: 50%; background: var(--color-black); opacity: 0; transition: opacity 0.5s var(--ease); } .client__plus::before, .client__plus::after { content: ""; position: absolute; background: var(--color-grey-light); top: 50%; left: 50%; transform: translate(-50%, -50%); } .client__plus::before { width: 15px; height: 1px; } .client__plus::after { width: 1px; height: 15px; } .client:hover .client__logo { transform: translateY(-80px); } .client:hover .client__text, .client:hover .client__plus { opacity: 1; transform: none; } /* Equipo */ .team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 45px var(--gap); } .team__card { display: flex; flex-direction: column; gap: 10px; } .team__media { aspect-ratio: 341 / 467; border-radius: 8px; } .team__media img { transition: transform 1s var(--ease-out); } .team__card:hover .team__media img { transform: scale(1.04); } .team__spacer { display: block; } /* Cifras */ .numbers { display: grid; grid-template-columns: 1fr 1fr; gap: 45px 45px; width: 705px; margin-left: auto; } .number { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; } .number__value { font-size: 44px; line-height: 1.36; font-weight: 400; color: #010103; } .number p { max-width: 330px; } /* Testimonios */ .testimonials { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .testimonials__media { position: relative; aspect-ratio: 700 / 591; border-radius: 8px; overflow: hidden; cursor: pointer; } .testimonials__track { display: flex; height: 100%; transition: transform 0.7s var(--ease-out); } .testimonials__track img { width: 100%; height: 100%; flex: none; object-fit: cover; } .testimonials__content { position: relative; display: flex; align-items: center; justify-content: center; } .testimonials__slides { position: relative; width: 420px; min-height: 252px; } .testimonial { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 30px; opacity: 0; transition: opacity 0.6s var(--ease); pointer-events: none; } .testimonial.is-active { opacity: 1; pointer-events: auto; } .testimonial__quote { font-size: 24px; line-height: 1.09; letter-spacing: -0.01em; } .testimonials__dots { position: absolute; left: 0; bottom: -20px; display: flex; gap: 4px; padding: 7px 10px; border-radius: 4px; background: #f3f3f5; } .testimonials__dots button { width: 7px; height: 7px; border-radius: 50%; background: rgba(0, 0, 0, 0.1); transition: background 0.3s; } .testimonials__dots button.is-active { background: var(--color-black); } /* -------------------------------------------------------------------------- 14. Careers -------------------------------------------------------------------------- */ .careers-hero__media { position: relative; height: 50vw; max-height: 720px; min-height: 320px; overflow: hidden; background: #111; } .careers-hero__media video, .careers-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .careers-hero__heading { padding: 15px var(--gutter) 90px; } /* Carrusel infinito de imágenes */ .ticker { overflow: hidden; padding: 90px 0; } .ticker__track { display: flex; align-items: center; gap: 60px; width: max-content; animation: ticker 40s linear infinite; } .ticker:hover .ticker__track { animation-play-state: paused; } .ticker__item { flex: none; border-radius: 7px; overflow: hidden; } .ticker__item img { width: 100%; height: 100%; object-fit: cover; } @keyframes ticker { to { transform: translateX(-50%); } } /* Tabla de vacantes */ .jobs { display: flex; flex-direction: column; gap: 15px; margin-top: 45px; } .jobs__head { display: grid; grid-template-columns: 43% 1fr 1fr; padding: 6px 0 5px; opacity: 0.4; } .jobs__list { display: flex; flex-direction: column; } .job { position: relative; display: grid; grid-template-columns: 43% 1fr 1fr; align-items: center; padding: 20px 0; border-bottom: 1px solid #aaa; } .job__title { font-size: 30px; line-height: 1; } .job__arrow { position: absolute; right: 2px; top: 50%; width: 25px; height: 25px; transform: translateY(-50%) translateX(-10px); opacity: 0; transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); } .job:hover .job__arrow { opacity: 1; transform: translateY(-50%); } .job::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--color-black); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease-out); } .job:hover::after { transform: scaleX(1); } /* Bloque "Student opportunities" */ .students { display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 90px 120px var(--section-bottom); } .students__content { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; max-width: 320px; } .students__heading { font-size: 26px; line-height: 1.12; letter-spacing: -0.01em; } .students__media { aspect-ratio: 600 / 745; border-radius: 11px; } /* -------------------------------------------------------------------------- 15. Case studies (grid) -------------------------------------------------------------------------- */ .grid-page { padding-top: 135px; } .pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); padding: 0 var(--gutter) var(--gap); } .gcard { position: relative; display: block; overflow: hidden; border-radius: var(--radius-card); aspect-ratio: 460 / 590; background: #ddd; } .gcard--wide { grid-column: span 2; aspect-ratio: 935 / 590; } .gcard__media { position: absolute; inset: 0; } .gcard__media img, .gcard__media video { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); } .gcard:hover .gcard__media img, .gcard:hover .gcard__media video { transform: scale(1.03); } .gcard__overlay { position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.62) 100%); } .gcard__cta { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--color-white); text-align: center; white-space: nowrap; } .gcard__text { display: flex; flex-direction: column; gap: 4px; } .gcard__title { font-size: 18px; line-height: 1.1; letter-spacing: -0.01em; } .gcard .pcard__cat { font-size: 12px; opacity: 0.85; } .gcard .btn { padding: 9px 15px; font-size: 13px; } /* Píldora flotante "Case Studies (10)" */ .view-toggle { position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: 20px; padding: 14px 18px 14px 19px; border-radius: var(--radius-card); background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); } .view-toggle__title { display: flex; align-items: flex-start; gap: 2px; font-size: 16px; line-height: 1.2; } .view-toggle__title small { font-size: 10px; line-height: 1.4; letter-spacing: -0.1px; } .view-toggle__btns { display: flex; gap: 5px; } .view-toggle__btn { width: 32px; height: 32px; border-radius: 5px; display: flex; align-items: center; justify-content: center; opacity: 0.4; } .view-toggle__btn.is-active { background: #e8e8e8; opacity: 1; } /* -------------------------------------------------------------------------- 16. Contact -------------------------------------------------------------------------- */ .contact-hero { padding: 210px 45px 30px; } .contact-hero .h1 span { display: block; } .contact-hero__email { color: rgba(255, 255, 255, 0.5); transition: color 0.3s; } .contact-hero__email:hover { color: var(--color-white); } .contact-video { padding: 0 var(--gutter) 90px; } .contact-video__media { position: relative; aspect-ratio: 1.8; border-radius: var(--radius-card); overflow: hidden; background: #111; } .contact-video__media video, .contact-video__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .contact-form-section { padding: 0 var(--gutter) var(--section-bottom); } .contact-form-section .line { margin-bottom: 45px; } .contact-form-section__inner { display: grid; grid-template-columns: 1fr 680px; gap: 50px; align-items: start; } .form { display: grid; gap: 12px; } .form input, .form textarea { width: 100%; padding: 11px 12px 12px; border: 0; border-radius: 6px; background: var(--color-grey-input); color: var(--color-white); font: inherit; font-size: 12px; outline: none; } .form input::placeholder, .form textarea::placeholder { color: rgba(255, 255, 255, 0.6); } .form input:focus, .form textarea:focus { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4); } .form textarea { min-height: 145px; resize: vertical; } .form button { padding: 13px 12px; border-radius: 6px; background: var(--color-grey-input); color: var(--color-white); font-size: 12px; transition: background 0.3s, color 0.3s; } .form button:hover { background: var(--color-white); color: var(--color-black); } .form__success { display: none; padding: 12px; border-radius: 6px; background: var(--color-grey-input); font-size: 12px; } .form.is-sent .form__success { display: block; } .contacts { padding: 0 var(--gutter) var(--section-bottom); } .contacts__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 45px; padding: 45px 0 60px; } .contacts__col { display: flex; flex-direction: column; gap: 18px; } .contacts__col h2 { font-size: 22.5px; line-height: 1.1; letter-spacing: -0.02em; } .contacts__col .ul-link { margin-top: 3px; } .location { display: grid; grid-template-columns: 465px 1fr; gap: var(--gap); padding: 0 var(--gutter) 90px; } .location__office { aspect-ratio: 465 / 531; } .location__map { position: relative; aspect-ratio: 930 / 531; } .location__map img { width: 100%; height: 100%; object-fit: cover; } .map-pin { position: absolute; left: 59%; top: 54.5%; width: 20px; height: 20px; } .map-pin__pulse { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; border-radius: 50%; background: var(--color-grey); transform: translate(-50%, -50%); animation: pulse 2.4s ease-out infinite; } .map-pin__outer { position: absolute; inset: 0; border-radius: 50%; background: var(--color-grey); } .map-pin__inner { position: absolute; inset: 4px; border-radius: 50%; background: rgba(255, 255, 255, 0.6); } .map-pin__card { position: absolute; left: 0; bottom: 28px; width: 217px; padding: 20px; border-radius: 10px; background: var(--color-black); color: var(--color-white); opacity: 0; transform: translateY(6px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); pointer-events: none; } .map-pin:hover .map-pin__card { opacity: 1; transform: none; pointer-events: auto; } .map-pin__card .label { opacity: 0.6; margin-bottom: 4px; } @keyframes pulse { 0% { opacity: 0.4; transform: translate(-50%, -50%) scale(0.4); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.1); } } /* -------------------------------------------------------------------------- 17. News -------------------------------------------------------------------------- */ .news-hero { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 167px 50px 100px; } .news-hero p { max-width: 200px; padding-top: 5px; } .featured { position: relative; display: block; margin: 0 var(--gutter); aspect-ratio: 1410 / 711; border-radius: 15px; overflow: hidden; background: #333; color: var(--color-white); } .featured img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); } .featured:hover img { transform: scale(1.03); } .featured__overlay { position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, 0) 54%, rgba(0, 0, 0, 0.6) 100%); } .featured__details { position: absolute; left: 30px; bottom: 30px; display: flex; flex-direction: column; gap: 15px; max-width: 530px; } .featured__title { font-size: 30px; line-height: 1; font-weight: 400; letter-spacing: -0.01em; } .featured__excerpt { max-width: 400px; } .news-rows { padding: 30px var(--gutter) 90px; display: flex; flex-direction: column; gap: 45px; } .news-rows .news-grid { gap: var(--gap); } /* -------------------------------------------------------------------------- 18. Artículo -------------------------------------------------------------------------- */ .progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--color-grey); z-index: 70; } .article-hero { padding: 150px 45px 0; } .article-hero__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 100px; } .article-hero__head .h1 { max-width: 500px; } .article-hero__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } .article-hero__meta .label { display: flex; gap: 3px; } .article-hero__media { aspect-ratio: 1350 / 601; border-radius: 15px; } .article-body { max-width: 864px; margin: 0 auto; padding: 45px 0; } .article-body h2 { font-size: 26px; line-height: 1.4; font-weight: 400; margin-top: 40px; margin-bottom: 12px; } .article-body h2:first-child { margin-top: 0; } .article-body p { font-size: 16px; line-height: 26px; font-weight: 500; } .article-body p + p { margin-top: 16px; } .article-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); max-width: 864px; margin: 0 auto; } .article-duo .media { aspect-ratio: 425 / 574; } .article-body--last { padding-bottom: var(--section-bottom); } .article-author { display: flex; align-items: center; gap: 5px; margin-top: 30px; font-size: 14px; line-height: 1; } .article-author .muted { display: flex; gap: 5px; } .share-btn { font-size: 14px; line-height: 1; letter-spacing: -0.2px; } .read-more { padding: 0 var(--gutter) 90px; } .read-more .line { margin-bottom: 15px; } .read-more .section-head__row { margin-bottom: 40px; } /* -------------------------------------------------------------------------- 19. Detalle de proyecto -------------------------------------------------------------------------- */ .project-hero { position: sticky; top: 0; height: 100vh; min-height: 520px; overflow: hidden; color: var(--color-white); background: #111; } .project-hero__media { position: absolute; inset: 0; } .project-hero__media img, .project-hero__media video { width: 100%; height: 100%; object-fit: cover; } .project-hero__overlay { position: absolute; inset: 0; background: linear-gradient(rgba(255, 255, 255, 0) 70%, rgba(0, 0, 0, 0.39) 100%); } /* Titular de la portada del caso: solo el nombre, abajo a la izquierda, con el mix tipográfico del hero */ .project-hero__heading { position: absolute; left: 40px; right: 40px; bottom: 40px; } .project-hero__title { font-family: "Instrument Sans", "Helvetica Neue", Arial, sans-serif; font-weight: 400; font-size: clamp(34px, 4.2vw, 64px); line-height: 1.02; letter-spacing: -0.025em; margin: 0; max-width: 14ch; text-wrap: balance; } .project-hero__title em { font-family: "Instrument Serif", Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; letter-spacing: -0.01em; } .project-content { position: relative; z-index: 2; background: var(--color-white); } .project-details { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; padding: 50px var(--gutter) 90px; } .project-details__about { max-width: 520px; display: flex; flex-direction: column; gap: 10px; } .project-details__list { display: flex; flex-direction: column; gap: 30px; margin-left: 48%; } .project-details__row { display: flex; flex-direction: column; gap: 5px; } .project-images { display: flex; flex-direction: column; gap: var(--gap); padding: 0 var(--gutter) 100px; } /* aire antes del bloque de contacto */ .project-images + .project-quote { padding-top: 0; } .project-images .two-col .media { aspect-ratio: 698 / 930; } .project-images .media--wide { aspect-ratio: 1410 / 793; } .figure { margin: 0; display: flex; flex-direction: column; gap: 12px; } .figure__caption { display: flex; gap: 20px; align-items: baseline; padding: 0 5px; } .figure__caption .label { flex: none; } .figure__caption .body { max-width: 520px; } /* Pie superpuesto en las piezas anchas de los casos (escritorio y portátil): título con el mix del hero y el texto debajo. En móvil se oculta y queda el pie de debajo de la imagen (.figure__caption). */ .media__shade { display: none; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.55) 100%); } .media__caption { display: none; position: absolute; left: 40px; right: 40px; bottom: 30px; z-index: 2; color: var(--color-white); max-width: 560px; } .media__title { font-family: "Instrument Sans", "Helvetica Neue", Arial, sans-serif; font-weight: 400; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 8px; } .media__title em { font-family: "Instrument Serif", Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; letter-spacing: -0.01em; } .media__text { font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, 0.78); max-width: 520px; margin: 0; } /* El pie cabe en la franja de la mesa (el 16 % inferior de la pieza) solo a partir de 1200 px; por debajo va bajo la imagen */ @media (min-width: 1200px) { .figure--overlay .media__shade, .figure--overlay .media__caption { display: block; } .figure--overlay .figure__caption { display: none; } } .project-quote { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 30px var(--gutter) var(--section-bottom); } .project-quote__body { display: flex; flex-direction: column; gap: 20px; } .project-quote__body p:first-child { max-width: 460px; } .more-projects { padding: 0 var(--gutter) 50px; } .more-projects .line { margin-bottom: 10px; } .more-projects .section-head__row { padding: 10px 0; } /* -------------------------------------------------------------------------- 20. 404 -------------------------------------------------------------------------- */ .notfound { display: grid; grid-template-columns: 1fr 2fr; gap: 15px; padding: 0 var(--gutter); height: 675px; align-items: center; } .notfound__content { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; } .notfound__content .h2 { margin-bottom: 0; } .notfound__content p { max-width: 200px; } .notfound__content .btn { margin-top: 16px; } /* -------------------------------------------------------------------------- 21. Responsive -------------------------------------------------------------------------- */ @media (max-width: 1199px) { .statement { font-size: clamp(40px, 5.4vw, 100px); } .statement-section { padding: 70px var(--gutter) 80px; } .capabilities { grid-template-columns: 1fr; gap: 45px; } .intro__text { grid-template-columns: 1fr 1fr; } .numbers { width: 100%; } .students { padding: 60px var(--gutter) var(--section-bottom); gap: 30px; } .contact-form-section__inner { grid-template-columns: 1fr 1fr; } .location { grid-template-columns: 1fr 1.5fr; } .clients, .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } .team__spacer { display: none; } .project-details__list { margin-left: 20%; } .nav__links { gap: 16px; } } @media (max-width: 809px) { :root { --section-bottom: 90px; } .h1 { font-size: 30px; } .h2 { font-size: 22px; } .statement { font-size: 34px; letter-spacing: -0.02em; } .pcard__title { font-size: 20px; } .gcard__title { font-size: 18px; } .capabilities__head, .capabilities__item h3, .capabilities__item p { font-size: 16px; } .footer__cta-content .h2 { font-size: 24px; } /* Navegación móvil */ .nav__links, .nav__cta, .nav__line { display: none; } .nav__inner { padding: 0 var(--gutter) !important; height: 60px; } .nav { height: 60px; } .nav__logo { left: var(--gutter); transform: translateY(-50%); width: 95px; height: 20px; } .nav--scrolled-center .nav__logo, .nav.is-scrolled .nav__logo { left: 50%; transform: translate(-50%, -50%); } .nav__menu-btn { display: inline-flex; } .nav .nav__menu-btn { background: var(--color-white); color: var(--color-black); } .nav.is-scrolled .nav__menu-btn, .nav:not(.nav--transparent) .nav__menu-btn { background: var(--color-black); color: var(--color-white); } .nav--black .nav__menu-btn { background: var(--color-white) !important; color: var(--color-black) !important; } /* Home */ .projects-row { flex-direction: column; } .projects-row--first .pcard--left { order: 2; } /* en móvil, Blue Assist (derecha) va antes que Dr. Tapia (izquierda) */ .projects-row--single { grid-template-columns: 1fr; } .pcard, .pcard--wide { flex: none; height: auto; aspect-ratio: 345 / 550; } .pcard__media { inset: 0; width: auto; } /* Tarjeta compuesta en móvil: el mockup entero (teléfono incluido) sobre una copia desenfocada del propio mockup */ .devcomp { min-width: 0; min-height: 0; width: 172%; -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent); } .devcomp__bg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(22px) brightness(0.92); transform: scale(1.15); } .pcard__media-mobile { display: block; } /* Vídeo apaisado en tarjeta vertical (card_mobile_fit): el vídeo entero, centrado, sobre un fotograma desenfocado */ /* Sin transform sobre el