/* WEB FINAL de RAKS OFFICE — hoja de estilos * Diseño y código propios de RAKS OFFICE. * Tipos de la marca RAKS (brandbook): Reversal Bold para titulares y Reem Kufi para textos. * Colores: paleta del brandbook RAKS. */ @font-face { font-family: "Sans"; src: url("../assets/fonts/ReemKufi-var.woff2") format("woff2"); font-weight: 400 700; font-display: swap; } @font-face { font-family: "Serif"; src: url("../assets/fonts/Reversal-Bold.woff2") format("woff2"); font-weight: 400 700; font-display: swap; } @font-face { font-family: "Reversal"; src: url("../assets/fonts/Reversal-Bold.woff2") format("woff2"); font-weight: 700; font-display: block; } @font-face { font-family: "Reem Kufi"; src: url("../assets/fonts/ReemKufi-var.woff2") format("woff2"); font-weight: 400 700; font-display: block; } /* ---------- Paleta RAKS (brandbook) ---------- */ :root { --raks-morado: #7B46F8; --raks-lima: #BCF621; --raks-lavanda: #BDA3FB; --raks-naranja: #FE8618; --raks-naranja-claro: #FEB26B; --raks-rosa: #FB51A2; --raks-crema: #FFFDF1; --raks-negro: #1D1C1F; } /* ---------- Temas ---------- * Cada sección declara data-theme; main.js copia el tema de la sección que cruza * el centro de la pantalla al , y el fondo se funde de un color a otro. * --acc / --acc-fg: filtro activo, logo grande y selección de texto. */ :root { --pad: 48px; --gap: 8px; --radius: 16px; --radius-lg: 32px; --header-h: 50px; --ease: cubic-bezier(.22, .61, .36, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --sans: "Sans", "Helvetica Neue", Arial, sans-serif; --serif: "Serif", "Arial Black", sans-serif; --brand: "Reversal", "Arial Black", sans-serif; } [data-theme="morado"] { --bg: #7B46F8; --fg: #FFFDF1; --muted: #EAE2FF; --line: rgba(255,253,241,.24); --pill: rgba(255,253,241,.16); --btn-bg: #BCF621; --btn-fg: #1D1C1F; --acc: #BCF621; --acc-fg: #1D1C1F; } [data-theme="lima"] { --bg: #BCF621; --fg: #1D1C1F; --muted: #3F4A12; --line: rgba(29,28,31,.18); --pill: rgba(29,28,31,.1); --btn-bg: #7B46F8; --btn-fg: #FFFDF1; --acc: #7B46F8; --acc-fg: #FFFDF1; } [data-theme="lavanda"] { --bg: #BDA3FB; --fg: #1D1C1F; --muted: #3B2670; --line: rgba(29,28,31,.18); --pill: rgba(29,28,31,.1); --btn-bg: #7B46F8; --btn-fg: #FFFDF1; --acc: #7B46F8; --acc-fg: #FFFDF1; } [data-theme="naranja"] { --bg: #FE8618; --fg: #1D1C1F; --muted: #4F2600; --line: rgba(29,28,31,.2); --pill: rgba(29,28,31,.12); --btn-bg: #1D1C1F; --btn-fg: #FFFDF1; --acc: #1D1C1F; --acc-fg: #FE8618; } [data-theme="crema"] { --bg: #FFFDF1; --fg: #1D1C1F; --muted: #6E6A63; --line: rgba(29,28,31,.13); --pill: rgba(123,70,248,.1); --btn-bg: #7B46F8; --btn-fg: #FFFDF1; --acc: #7B46F8; --acc-fg: #FFFDF1; } [data-theme="negro"] { --bg: #1D1C1F; --fg: #FFFDF1; --muted: #A5A1AC; --line: rgba(255,253,241,.16); --pill: rgba(255,253,241,.12); --btn-bg: #BCF621; --btn-fg: #1D1C1F; --acc: #BCF621; --acc-fg: #1D1C1F; } [data-theme="rosa"] { --bg: #FB51A2; --fg: #1D1C1F; --muted: #4E0F2E; --line: rgba(29,28,31,.18); --pill: rgba(29,28,31,.1); --btn-bg: #1D1C1F; --btn-fg: #FFFDF1; --acc: #1D1C1F; --acc-fg: #FB51A2; } /* nombres anteriores, apuntando a la paleta RAKS */ [data-theme="dark"] { --bg: #1D1C1F; --fg: #FFFDF1; --muted: #A5A1AC; --line: rgba(255,253,241,.16); --pill: rgba(255,253,241,.12); --btn-bg: #BCF621; --btn-fg: #1D1C1F; --acc: #BCF621; --acc-fg: #1D1C1F; } [data-theme="paper"], [data-theme="light"] { --bg: #FFFDF1; --fg: #1D1C1F; --muted: #6E6A63; --line: rgba(29,28,31,.13); --pill: rgba(123,70,248,.1); --btn-bg: #7B46F8; --btn-fg: #FFFDF1; --acc: #7B46F8; --acc-fg: #FFFDF1; } @media (max-width: 899px) { :root { --pad: 24px; --radius-lg: 24px; } } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; font-synthesis: none; -webkit-tap-highlight-color: transparent; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 16px; line-height: 1.5; letter-spacing: .02em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color .7s var(--ease), color .7s var(--ease); overflow-x: clip; } img, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; padding: 0; } ul, ol { list-style: none; } ::selection { background: var(--acc, var(--fg)); color: var(--acc-fg, var(--bg)); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--fg); color: var(--bg); padding: 8px 12px; border-radius: 999px; } .skip:focus { left: 8px; } :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } /* Las secciones heredan el tema del body mientras no lo pidan explícitamente, * así el fundido de color ocurre en un solo sitio. */ .section { position: relative; background: transparent; color: inherit; } .wrap { padding-left: var(--pad); padding-right: var(--pad); } /* ---------- Tipografía ---------- */ .label { font-family: var(--sans); font-stretch: 75%; font-size: 12px; line-height: 16px; letter-spacing: .11em; text-transform: uppercase; font-weight: 450; } .label--md { font-size: 14px; line-height: 20px; letter-spacing: .08em; } .muted { color: var(--muted); } .t-body { font-size: 16px; line-height: 24px; letter-spacing: .02em; } .t-body-lg { font-size: 19px; line-height: 28px; letter-spacing: .01em; } .t-h3 { font-size: 28px; line-height: 32px; letter-spacing: -.01em; font-weight: 400; } .t-h2 { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.1; letter-spacing: -.025em; font-weight: 400; } .t-lead { font-size: clamp(22px, 2.2vw, 32px); line-height: 1.12; letter-spacing: -.01em; } .t-serif { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; } .t-serif-xl { font-family: var(--serif); font-size: clamp(30px, 3.7vw, 56px); line-height: 1.06; letter-spacing: -.015em; font-weight: 700; } .t-serif-xxl { font-family: var(--serif); font-size: clamp(44px, 10vw, 150px); line-height: .95; letter-spacing: -.025em; font-weight: 700; overflow-wrap: break-word; } em, .italic { font-family: var(--serif); font-style: normal; } @media (max-width: 899px) { .t-h3 { font-size: 24px; line-height: 28px; } .t-body-lg { font-size: 17px; line-height: 26px; } } /* ---------- Botones ---------- */ .btn { display: inline-flex; align-items: center; gap: 14px; height: 48px; padding: 0 22px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-fg); font-size: 18px; line-height: 1; letter-spacing: .02em; transition: gap .35s var(--ease-out), background-color .7s var(--ease), color .7s var(--ease); white-space: nowrap; } .btn:hover { gap: 20px; } .btn .arrow { width: 18px; height: 12px; flex: none; opacity: .7; } .btn--sm { height: 35px; padding: 0 22px; font-size: 15px; } .btn--ghost { background: var(--pill); color: var(--fg); } .btn--xl { height: 46px; font-size: 20px; letter-spacing: .02em; text-transform: uppercase; } @media (min-width: 900px) { .btn--xl { height: 52px; font-size: 22px; } } .pill { display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 12px; border-radius: 999px; background: var(--pill); color: var(--fg); transition: background-color .25s var(--ease), color .25s var(--ease); white-space: nowrap; } .pill:hover { background: color-mix(in srgb, var(--fg) 22%, transparent); } .pill.is-active, .pill[aria-pressed="true"], .pill[aria-current="page"] { background: var(--acc, var(--fg)); color: var(--acc-fg, var(--bg)); } .pill svg { width: 14px; height: 14px; } .arrow-link { display: inline-flex; gap: 4px; align-items: center; color: var(--muted); transition: color .2s, gap .3s var(--ease-out); } .arrow-link:hover { color: var(--fg); gap: 8px; } /* ---------- Cabecera ---------- */ .header { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--pad); color: var(--fg); transition: transform .5s var(--ease-out), background-color .7s var(--ease), color .7s var(--ease); } .header.is-scrolled { background: var(--bg); } .header.is-hidden { transform: translateY(-100%); } .header__nav { display: flex; gap: 10px; } .header__nav--right { justify-content: flex-end; } .header__center { position: relative; height: 24px; display: flex; align-items: center; justify-content: center; min-width: 210px; } .header__logo, .header__marquee { transition: opacity .35s var(--ease), transform .45s var(--ease-out); } .header__logo { display: block; height: 24px; } .header__logo .wordmark-svg { height: 100%; width: auto; fill: currentColor; } .header__marquee { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; } .header__marquee a { text-decoration: underline; text-underline-offset: 3px; color: var(--muted); margin-left: 4px; } .header__marquee a:hover { color: var(--fg); } /* En portada el logo pequeño espera a que el grande salga de pantalla */ .header--large .header__logo { opacity: 0; transform: translateY(8px); pointer-events: none; } .header--large.is-compact .header__logo { opacity: 1; transform: none; pointer-events: auto; } .header--large.is-compact .header__marquee { opacity: 0; transform: translate(-50%, -110%); pointer-events: none; } .header:not(.header--large) .header__marquee { display: none; } .header__burger { display: none; } .bigmark { padding: 4px var(--pad) 28px; margin-top: var(--header-h); } .bigmark__svg { display: block; width: 100%; height: auto; fill: var(--acc, currentColor); transition: fill .7s var(--ease); } @media (max-width: 899px) { .header { grid-template-columns: 1fr auto; } .header__nav, .header__marquee { display: none; } .header__center { justify-content: flex-start; min-width: 0; height: 22px; } .header--large .header__logo { opacity: 1; transform: none; pointer-events: auto; } .header__burger { display: block; position: relative; width: 38px; height: 20px; z-index: 2; } .header__burger span { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .45s var(--ease-out), top .45s var(--ease-out), opacity .2s; } .header__burger span:nth-child(1) { top: 3px; } .header__burger span:nth-child(2) { top: 9px; } .header__burger span:nth-child(3) { top: 15px; } .menu-open .header__burger span:nth-child(1) { top: 9px; transform: rotate(18deg); } .menu-open .header__burger span:nth-child(2) { opacity: 0; } .menu-open .header__burger span:nth-child(3) { top: 9px; transform: rotate(-18deg); } .bigmark { display: none; } .header { height: 64px; } :root { --header-h: 64px; } } /* Menú móvil */ .menu { position: fixed; inset: 0; z-index: 45; background: var(--bg); color: var(--fg); padding: calc(var(--header-h) + 64px) var(--pad) 24px; display: flex; flex-direction: column; justify-content: space-between; visibility: hidden; opacity: 0; transition: opacity .35s var(--ease), visibility 0s linear .35s; overflow-y: auto; } .menu-open .menu { visibility: visible; opacity: 1; transition: opacity .35s var(--ease); } .menu-open { overflow: hidden; } .menu__list > li { border-bottom: 1px solid var(--line); } .menu__link { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; font-size: 30px; line-height: 1.2; letter-spacing: -.01em; } .menu__link svg { width: 38px; height: 14px; } .menu__sub { padding: 0 0 12px 24px; } .menu__sub a { display: block; padding: 6px 0; font-size: 24px; line-height: 1.3; color: var(--muted); } .menu__list > li, .menu__social { opacity: 0; transform: translateY(16px); filter: blur(6px); transition: opacity .5s var(--ease), transform .6s var(--ease-out), filter .6s var(--ease); } .menu-open .menu__list > li, .menu-open .menu__social { opacity: 1; transform: none; filter: none; } .menu__social { display: flex; justify-content: space-between; padding-top: 32px; } @media (min-width: 900px) { .menu { display: none; } } /* ---------- Secciones comunes ---------- */ .sec-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-top: 20px; border-top: 1px solid var(--line); } .sec-head__filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .sec-head--split { justify-content: space-between; } .sec-space { padding-top: 128px; } .sec-space-sm { padding-top: 80px; } @media (max-width: 899px) { .sec-space { padding-top: 80px; } .sec-space-sm { padding-top: 56px; } } .breadcrumb { display: flex; gap: 8px; padding: 0 0 16px; border-bottom: 1px solid var(--line); } .breadcrumb a { color: var(--fg); } .breadcrumb span[aria-current] { color: var(--muted); } .breadcrumb .sep { color: var(--muted); } .breadcrumb-row { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .breadcrumb-row .breadcrumb { border: 0; padding: 0; } /* Aparición al hacer scroll */ .js [data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease), transform 1.2s var(--ease-out); } .js [data-reveal].is-in { opacity: 1; transform: none; } .js [data-reveal-stagger] > * { opacity: 0; transform: translateY(40px); transition: opacity .9s var(--ease), transform 1.1s var(--ease-out); } .js [data-reveal-stagger].is-in > * { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { [data-reveal], [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ---------- Medios ---------- */ .media { position: relative; overflow: hidden; border-radius: var(--radius); background: color-mix(in srgb, var(--fg) 8%, transparent); } .media img, .media video { width: 100%; height: 100%; object-fit: cover; } .media--r0 { border-radius: 0; } .media__ratio { position: relative; } .media__ratio > img, .media__ratio > video { position: absolute; inset: 0; } .play-toggle { position: absolute; left: 24px; bottom: 24px; z-index: 3; width: 32px; height: 32px; border-radius: 50%; background: var(--fg); color: var(--bg); display: grid; place-items: center; } .play-toggle svg { width: 10px; height: 10px; fill: currentColor; } .play-toggle .i-play { display: none; } .is-paused .play-toggle .i-play { display: block; } .is-paused .play-toggle .i-pause { display: none; } /* ---------- Slideshow ---------- */ .slideshow { position: relative; overflow: hidden; } .slideshow__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s var(--ease); } .slideshow__slide.is-active { opacity: 1; z-index: 1; } .slideshow__slide img, .slideshow__slide video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 7s linear; } .slideshow__slide.is-active img, .slideshow__slide.is-active video { transform: scale(1); } .slideshow__bars { position: absolute; right: 24px; bottom: 38px; z-index: 3; display: flex; gap: 4px; } .slideshow__bar { width: 44px; height: 2px; background: rgba(255,255,255,.3); overflow: hidden; } .slideshow__bar i { display: block; height: 100%; width: 100%; background: #fff; transform: scaleX(0); transform-origin: left; } .slideshow__caption { position: absolute; right: 24px; bottom: 56px; z-index: 3; color: #fff; text-align: right; text-shadow: 0 1px 16px rgba(0,0,0,.35); } .slideshow__caption a { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; } .slideshow__caption .label { display: flex; gap: 10px; } @media (max-width: 899px) { .slideshow__bar { width: 24px; } .slideshow__caption { display: none; } } /* ---------- Portada ---------- */ .hero { padding: 0; } .hero__stage { height: calc(100svh - 250px); min-height: 520px; border-radius: var(--radius-lg); } @media (max-width: 899px) { .hero__stage { height: 62svh; min-height: 360px; margin-top: calc(var(--header-h) + 4px); border-radius: var(--radius-lg); } } .hero__title { position: absolute; left: 32px; bottom: 32px; z-index: 3; color: #fff; } .tout { text-align: center; padding: 168px var(--pad) 128px; } .tout__text { max-width: 900px; margin: 0 auto 40px; text-wrap: balance; } @media (max-width: 899px) { .tout { text-align: left; padding: 64px var(--pad) 56px; } .tout__text { margin-bottom: 24px; } } /* ---------- Tarjetas de trabajo ---------- */ .card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px var(--gap); padding-top: 28px; } @media (max-width: 1100px) { .card-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 599px) { .card-grid { grid-template-columns: 1fr; gap: 40px; } } .card { display: block; } .card__media { aspect-ratio: 4 / 5; } .card__media video { position: absolute; inset: 0; opacity: 0; transition: opacity .4s var(--ease); } .card.is-playing .card__media video { opacity: 1; } .card__media img { transition: transform 1.2s var(--ease-out); } .card:hover .card__media img { transform: scale(1.03); } .card__title { font-weight: 400; margin-top: 16px; font-size: 19px; line-height: 24px; letter-spacing: .005em; } .card__tags { margin-top: 8px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 0 10px; } .card-grid.is-switching .card { opacity: 0; transform: translateY(24px); } .card-grid .card { transition: opacity .5s var(--ease), transform .7s var(--ease-out); } /* Vista “Pila”: collage escalonado de proyectos destacados */ .stack { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); row-gap: 96px; padding-top: 48px; align-items: start; } .stack .card__media { aspect-ratio: auto; } .stack .card:nth-child(4n+1) { grid-column: 1 / span 8; } .stack .card:nth-child(4n+1) .card__media { aspect-ratio: 16 / 10; } .stack .card:nth-child(4n+2) { grid-column: 9 / span 4; } .stack .card:nth-child(4n+2) .card__media { aspect-ratio: 4 / 5; } .stack .card:nth-child(4n+3) { grid-column: 2 / span 4; margin-top: 120px; } .stack .card:nth-child(4n+3) .card__media { aspect-ratio: 4 / 5; } .stack .card:nth-child(4n+4) { grid-column: 7 / span 6; } .stack .card:nth-child(4n+4) .card__media { aspect-ratio: 5 / 4; } .stack .card__title { font-size: 15px; line-height: 20px; } .stack .card__intro { font-size: 15px; line-height: 20px; max-width: 420px; } @media (max-width: 899px) { .stack { grid-template-columns: 1fr; row-gap: 48px; } .stack .card:nth-child(n) { grid-column: 1; margin-top: 0; } .stack .card:nth-child(n) .card__media { aspect-ratio: 4 / 5; } } .work-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 20px; border-top: 1px solid var(--line); } .work-toolbar__group { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .work-toolbar__group .label:first-child { margin-right: 4px; } .work-intro { padding: 56px 0 0; max-width: 1320px; } .archive { padding-top: 80px; } .archive li { display: flex; justify-content: space-between; padding: 14px 0; border-top: 1px solid var(--line); } /* ---------- Clientes (rotador) ---------- */ .clients { display: grid; grid-template-columns: repeat(6, 1fr); padding: 120px 0 104px; } .clients__cell { position: relative; height: 88px; display: grid; place-items: center; overflow: hidden; } .clients__name { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font-size: 21px; line-height: 1.05; letter-spacing: -.01em; padding: 0 16px; text-wrap: balance; transition: opacity .6s var(--ease), transform .8s var(--ease-out), filter .6s var(--ease); } .clients__name.is-out { opacity: 0; transform: translateY(-40%); filter: blur(6px); } .clients__name.is-pre { opacity: 0; transform: translateY(40%); filter: blur(6px); transition: none; } .clients__name--serif { font-family: var(--serif); font-size: 28px; } .clients__name--brand { font-family: var(--brand); font-size: 18px; letter-spacing: .02em; } .clients__name--label { font-stretch: 75%; text-transform: uppercase; letter-spacing: .12em; font-size: 18px; } @media (max-width: 899px) { .clients { grid-template-columns: repeat(3, 1fr); padding: 48px 0; row-gap: 16px; } } /* ---------- Díptico ---------- */ .diptych { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: center; padding: 96px 0 128px; } .diptych__text { grid-column: 1 / span 4; } .diptych__text .t-h3 { margin-bottom: 24px; } .diptych__text p + p { margin-top: 16px; } .diptych__text .btn { margin-top: 32px; } .diptych__media { grid-column: 7 / span 6; aspect-ratio: 4 / 3; } .diptych--rev .diptych__text { grid-column: 8 / span 5; grid-row: 1; } .diptych--rev .diptych__media { grid-column: 1 / span 6; grid-row: 1; } @media (max-width: 899px) { .diptych { grid-template-columns: 1fr; row-gap: 32px; padding: 48px 0 64px; } .diptych .diptych__text, .diptych .diptych__media { grid-column: 1; grid-row: auto; } .diptych__media { order: -1; } } /* ---------- Tira de disciplinas ---------- */ .strip { display: grid; grid-template-columns: repeat(5, 1fr); padding: 96px 0 120px; } .strip__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 0 12px; } .strip__num { font-family: var(--serif); color: var(--acc); font-size: 72px; line-height: .9; letter-spacing: -.03em; } @media (max-width: 899px) { .strip { grid-template-columns: repeat(2, 1fr); row-gap: 40px; padding: 48px 0 64px; } } /* ---------- Propósito: tipografía gigante ---------- */ .purpose { position: relative; padding: 112px 0 80px; overflow: hidden; } .purpose__words { color: color-mix(in srgb, var(--acc, var(--fg)) 22%, var(--bg)); pointer-events: none; } .purpose__copy { z-index: 1; } .purpose__line { font-size: clamp(76px, 19vw, 300px); line-height: .85; letter-spacing: -.05em; white-space: nowrap; will-change: transform; } .purpose__line--1 { font-family: var(--serif); text-align: right; padding-right: 7vw; } .purpose__line--2 { font-family: var(--sans); font-weight: 400; letter-spacing: -.06em; } .purpose__line--3 { font-family: var(--serif); text-align: right; color: color-mix(in srgb, var(--acc, var(--fg)) 55%, var(--bg)); } .purpose__copy { position: absolute; left: var(--pad); width: min(530px, 40vw); font-size: 19px; line-height: 28px; } .purpose__copy--a { top: 216px; } .purpose__copy--b { bottom: 96px; } .purpose__copy .btn { margin-top: 24px; } @media (max-width: 899px) { .purpose { padding: 56px 0 48px; } .purpose__copy { position: static; width: auto; padding: 32px var(--pad) 0; font-size: 17px; line-height: 26px; } .purpose__line--1 { padding-right: 0; } } /* ---------- Novedades ---------- */ .latest-head { text-align: center; padding: 112px 0 104px; } .latest-head h2 { margin-bottom: 32px; } .post-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 56px var(--gap); padding-top: 28px; } @media (max-width: 1100px) { .post-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 599px) { .post-grid { grid-template-columns: 1fr; } } .post__meta { display: flex; gap: 16px; padding-bottom: 12px; } .post .card__media { aspect-ratio: 1 / 1; } .post__text { margin-top: 24px; font-size: 19px; line-height: 24px; } .post__text span { color: var(--muted); } /* ---------- Cierre ---------- */ .closing { padding-block: 144px 96px; background: var(--bg); color: var(--fg); } .closing .t-h2 { max-width: 900px; margin-bottom: 32px; text-wrap: pretty; } @media (max-width: 899px) { .closing { padding-block: 80px 64px; } } /* ---------- Pie ---------- */ .footer { padding: 56px var(--pad) 28px; background: var(--bg); color: var(--fg); transition: background-color .7s var(--ease); } .footer__top { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); padding-bottom: 56px; } .footer__news { grid-column: 1 / span 4; } .footer__lead a { text-decoration: underline; text-underline-offset: 3px; } .footer__news h2, .footer__lead { font-size: 23px; line-height: 28px; letter-spacing: -.005em; font-weight: 400; margin-bottom: 26px; } .footer__cols { grid-column: 7 / span 6; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--gap); } .footer__col h2 { margin-bottom: 26px; } .footer__col li + li { margin-top: 4px; } .footer__col a { color: var(--muted); transition: color .2s; } .footer__col a:hover { color: var(--fg); } .footer__bottom { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 11px; letter-spacing: .05em; } .footer__bottom .muted { margin-left: 0; } @media (max-width: 899px) { .footer__top { grid-template-columns: 1fr; row-gap: 48px; } .footer__news, .footer__cols { grid-column: 1; } .footer__cols { grid-template-columns: 1fr; row-gap: 32px; } } /* ---------- Página interior: encabezado centrado ---------- */ .page-top { padding-top: calc(var(--header-h) + 40px); } .page-hero { text-align: center; padding: 72px var(--pad) 96px; } .page-hero h1 { text-wrap: balance; max-width: 1100px; margin: 0 auto; } .page-hero .btn { margin-top: 32px; } .page-hero p.t-body { margin-top: 24px; } @media (max-width: 899px) { .page-hero { padding: 40px var(--pad) 56px; } } /* ---------- Servicios ---------- */ .reel { display: flex; gap: 24px; align-items: center; padding: 40px 0 120px; overflow: hidden; } .reel__track { display: flex; gap: 24px; align-items: center; animation: reel 60s linear infinite; } .reel:hover .reel__track { animation-play-state: paused; } .reel__item { flex: none; width: 340px; } .reel__item:nth-child(3n+2) { width: 280px; } .reel__item:nth-child(3n+3) { width: 400px; } .reel__item .media { aspect-ratio: 4 / 5; } .reel__item:nth-child(3n+3) .media { aspect-ratio: 16 / 11; } @keyframes reel { to { transform: translateX(calc(-50% - 12px)); } } .offer { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: center; padding: 88px 0; } .offer + .offer { border-top: 1px solid var(--line); } .offer__text { grid-column: 1 / span 4; } .offer__text h3 { font-family: var(--serif); font-size: clamp(44px, 3.9vw, 56px); line-height: 1; letter-spacing: -.02em; font-weight: 400; margin-bottom: 20px; } .offer__text p { font-size: 19px; line-height: 24px; max-width: 320px; } .offer__text ul { margin-top: 20px; color: var(--muted); } .offer__text .pill { margin-top: 24px; } .offer__works { grid-column: 6 / span 7; display: grid; grid-template-columns: 5fr 7fr; gap: var(--gap); align-items: start; } .offer__works .card:first-child .card__media { aspect-ratio: 4 / 3; } .offer__works .card:last-child .card__media { aspect-ratio: 4 / 5; } .offer:nth-of-type(even) .offer__works { grid-template-columns: 7fr 5fr; } .offer:nth-of-type(even) .offer__works .card:first-child .card__media { aspect-ratio: 4 / 5; } .offer:nth-of-type(even) .offer__works .card:last-child .card__media { aspect-ratio: 4 / 3; } .offer .card__title { font-size: 15px; line-height: 20px; margin-top: 12px; } .offer .card__tags { font-size: 12px; } @media (max-width: 899px) { .offer { grid-template-columns: 1fr; row-gap: 32px; padding: 56px 0; } .offer__text, .offer__works { grid-column: 1; } } .quote { text-align: center; padding-block: 160px 128px; } .quote blockquote { font-size: clamp(26px, 2.5vw, 36px); line-height: 1.1; letter-spacing: -.02em; max-width: 980px; margin: 0 auto 28px; text-wrap: balance; } .quote cite { font-style: normal; display: block; } .tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--gap); padding: 28px 0 0; } .tile__box { aspect-ratio: 1; border-radius: var(--radius); background: color-mix(in srgb, var(--fg) 8%, transparent); display: grid; place-items: center; padding: 16px; text-align: center; } .tile__num { font-family: var(--serif); font-size: 64px; line-height: 1; } .tile p { margin-top: 12px; font-size: 13px; line-height: 18px; color: var(--muted); } .tile p strong { color: var(--fg); font-weight: 400; display: block; } @media (max-width: 899px) { .tiles { grid-template-columns: repeat(2, 1fr); row-gap: 24px; } } .cta { padding-block: 144px 120px; } .cta h2 { margin-bottom: 24px; } /* ---------- Nosotros ---------- */ .about-lead { padding: 0 0 48px; max-width: 1060px; } .float-panel { position: relative; height: min(620px, 70vw); border-radius: var(--radius); overflow: hidden; background: var(--panel, #BCF621); } .float-panel__item { position: absolute; width: var(--w, 64px); aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; will-change: transform; box-shadow: 0 8px 24px rgba(0,0,0,.08); } .float-panel__item img { width: 100%; height: 100%; object-fit: cover; } .stats { padding: 88px 0 64px; } .stats__row { display: grid; grid-template-columns: 1fr 240px; align-items: center; gap: 24px; padding: 4px 0; } .stats__big { font-family: var(--serif); font-size: clamp(56px, 8.4vw, 120px); line-height: 1; letter-spacing: -.03em; color: color-mix(in srgb, var(--fg) 28%, var(--bg)); transition: color .8s var(--ease); } .stats__row p { font-size: 13px; line-height: 18px; color: color-mix(in srgb, var(--fg) 28%, var(--bg)); transition: color .8s var(--ease); } .stats__row.is-lit .stats__big { color: var(--fg); } .stats__row.is-lit p { color: var(--muted); } @media (max-width: 899px) { .stats__row { grid-template-columns: 1fr; gap: 0; padding-bottom: 12px; } } .team { display: flex; gap: 24px; overflow-x: auto; padding: 48px var(--pad) 120px; scroll-snap-type: x mandatory; scrollbar-width: none; } .team::-webkit-scrollbar { display: none; } .team__card { flex: none; width: 344px; scroll-snap-align: start; } .team__card .media { aspect-ratio: 4 / 5; } .team__card h3 { margin-top: 12px; font-size: 13px; line-height: 18px; font-weight: 400; } .team__card p { font-size: 13px; line-height: 18px; color: var(--muted); } @media (max-width: 899px) { .team__card { width: 74vw; } } /* ---------- Empleo ---------- */ .jobs-hero { text-align: center; padding: 72px var(--pad) 72px; } .jobs-hero h1 { margin-bottom: 24px; } .jobs-hero__row { display: inline-flex; gap: 16px; align-items: center; flex-wrap: wrap; justify-content: center; } .why { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); padding-block: 120px; } .why__label { grid-column: 4 / span 2; } .why__list { grid-column: 6 / span 5; } .why__list li + li { margin-top: 24px; } .why__list h3 { font-size: 16px; font-weight: 500; margin-bottom: 4px; } @media (max-width: 899px) { .why { grid-template-columns: 1fr; row-gap: 24px; padding-block: 64px; } .why__label, .why__list { grid-column: 1; } } .duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); } .duo .media { aspect-ratio: 4 / 3; } @media (max-width: 599px) { .duo { grid-template-columns: 1fr; } } .accordion { border-top: 1px solid var(--line); } .accordion__item { border-bottom: 1px solid var(--line); } .accordion__btn { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 16px 0; text-align: left; font-size: 19px; line-height: 24px; } .accordion__btn svg { width: 16px; height: 16px; transition: transform .4s var(--ease-out); } .accordion__item.is-open .accordion__btn svg { transform: rotate(45deg); } .accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease-out); } .accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; } .accordion__panel > div { overflow: hidden; } .accordion__panel p { padding: 0 0 24px; max-width: 640px; color: var(--muted); } .groups { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); padding-block: 120px; } .groups__title { grid-column: 1 / span 4; } .groups .accordion { grid-column: 1 / span 12; margin-top: 32px; } @media (min-width: 900px) { .groups .accordion { grid-column: 1 / span 12; } } .openings { padding-block: 120px; } .openings h2 { text-align: center; margin-bottom: 48px; } .jobs-table { margin-top: 24px; } .jobs-table a { display: grid; grid-template-columns: 5fr 2fr 2fr 2fr; gap: 16px; align-items: center; padding: 14px 16px; border-radius: 8px; margin-top: 4px; background: color-mix(in srgb, var(--fg) 6%, transparent); transition: background-color .25s; } .jobs-table a:hover { background: color-mix(in srgb, var(--fg) 12%, transparent); } @media (max-width: 899px) { .jobs-table a { grid-template-columns: 1fr; gap: 4px; } } /* ---------- Contacto ---------- */ .contact-hero { text-align: center; padding: 120px var(--pad) 120px; } .contact-hero h1 { font-size: clamp(46px, 11vw, 150px); } .contact-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; padding: 28px 0 44px; } .contact-media { aspect-ratio: 16 / 9; } .offices { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--gap); padding: 48px 0 160px; } .office h2 { font-size: 23px; line-height: 28px; font-weight: 400; margin-bottom: 8px; } .office h2 time { color: var(--muted); margin-left: 16px; } .office p { font-size: 15px; line-height: 22px; } @media (max-width: 899px) { .offices { grid-template-columns: 1fr; row-gap: 40px; padding-bottom: 96px; } .contact-hero { padding: 64px var(--pad); } } /* ---------- Proyecto ---------- */ .case-hero { text-align: center; padding: calc(var(--header-h) + 150px) var(--pad) 140px; } .case-hero h1 { text-wrap: balance; } .case-intro { padding: 36px 0 56px; font-size: clamp(22px, 2.2vw, 32px); line-height: 1.1; letter-spacing: -.01em; } .case-cover { aspect-ratio: 16 / 9; border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .case-facts { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); padding-block: 96px; } .case-facts__title { grid-column: 1 / span 4; } .case-facts__title h2 { font-size: 16px; font-weight: 500; } .case-facts__body { grid-column: 5 / span 5; } .case-facts__body p + p { margin-top: 16px; } .case-facts__meta { grid-column: 11 / span 2; display: flex; flex-direction: column; gap: 16px; } @media (max-width: 899px) { .case-facts { grid-template-columns: 1fr; row-gap: 24px; padding-block: 56px; } .case-facts > * { grid-column: 1 !important; } } .gallery { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); padding: 0 var(--pad); } .gallery .media { border-radius: var(--radius); } .gallery__full { grid-column: 1 / -1; } @media (max-width: 599px) { .gallery { grid-template-columns: 1fr; } } .next-case { display: block; text-align: center; padding: 160px var(--pad) 200px; margin-top: 120px; border-top: 1px solid var(--line); } .next-case .label { display: block; margin-bottom: 24px; } .next-case h2 { transition: letter-spacing .8s var(--ease-out); } .next-case:hover h2 { letter-spacing: -.01em; } /* ===================================================================== WEB FINAL ===================================================================== */ .u { text-decoration: underline; text-underline-offset: 3px; } .pill sup { font-size: 9px; margin-left: 2px; opacity: .6; transform: translateY(-3px); } /* ---------- Portada: todos los proyectos, animados ---------- */ .showcase { padding-bottom: 120px; } .showcase__head { position: relative; } .showcase__all { margin-left: auto; } .showcase__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 44px var(--gap); padding-top: 28px; } .showcase .card__tags { color: var(--muted); } @media (min-width: 1680px) { .showcase__grid { grid-template-columns: repeat(5, 1fr); } } @media (max-width: 1099px) { .showcase__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 599px) { .showcase__grid { grid-template-columns: repeat(2, 1fr); gap: 28px var(--gap); } } @media (max-width: 899px) { .showcase { padding: calc(var(--header-h) + 8px) 0 72px; } .showcase__all { display: none; } } .showcase__grid .card[hidden] { display: none; } .js .showcase__grid .card { opacity: 0; transform: translateY(48px); transition: opacity .9s var(--ease), transform 1.1s var(--ease-out); } .js .showcase__grid .card.is-in { opacity: 1; transform: none; } .js .showcase__grid .card.is-out { opacity: 0; transform: translateY(20px); transition-duration: .3s; transition-delay: 0s !important; } @media (max-width: 599px) { .showcase__grid .card__title { font-size: 15px; line-height: 19px; margin-top: 10px; } .showcase__grid .card__tags { font-size: 10px; line-height: 14px; gap: 0 6px; } } @media (prefers-reduced-motion: reduce) { .js .showcase__grid .card { opacity: 1 !important; transform: none !important; } } /* ---------- Slideshows con enlace ---------- */ .slideshow__slide { display: block; } .slideshow__caption { bottom: 38px; left: 24px; right: auto; text-align: left; } .slideshow__caption .label { color: #fff; } .play-toggle { left: auto; right: 24px; bottom: 56px; } .slideshow__bars { bottom: 24px; } /* ---------- Ficha de proyecto ---------- */ .case-hero { padding: calc(var(--header-h) + 120px) var(--pad) 110px; } .case-tags { display: flex; flex-wrap: wrap; gap: 0 10px; } .case-head { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); padding: 48px var(--pad) 24px; align-items: start; } .case-head__anim { grid-column: 1 / span 5; aspect-ratio: 4 / 5; } .case-head__anim video { width: 100%; height: 100%; object-fit: cover; } .case-head__text { grid-column: 7 / span 6; } .case-head .case-intro { padding: 0 0 48px; font-size: clamp(24px, 2.4vw, 36px); line-height: 1.12; letter-spacing: -.015em; text-wrap: pretty; } .case-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; margin: 0; padding-top: 20px; border-top: 1px solid var(--line); font-size: 16px; line-height: 22px; } .case-meta dt { margin-bottom: 4px; } .case-meta dd { margin: 0; } .case-meta a { text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 899px) { .case-hero { padding: calc(var(--header-h) + 56px) var(--pad) 48px; } .case-head { grid-template-columns: 1fr; row-gap: 32px; padding-top: 32px; } .case-head__anim, .case-head__text { grid-column: 1; } .breadcrumb-row { flex-direction: column; align-items: flex-start; gap: 8px; } } .case-body { padding: 0 var(--pad); } .blk { margin-top: var(--gap); } .blk-text { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); margin: 128px 0 56px; } .blk-text:first-child { margin-top: 96px; } .blk-text__head { grid-column: 1 / span 4; } .blk-text__title { font-size: 19px; line-height: 26px; font-weight: 500; letter-spacing: .005em; } .blk-text__body { grid-column: 5 / span 7; } .blk-text__body p { font-size: 19px; line-height: 28px; color: var(--muted); max-width: 46em; } .blk-text__body p:first-child { color: var(--fg); } .blk-text__body p + p { margin-top: 18px; } @media (max-width: 899px) { .blk-text { grid-template-columns: 1fr; row-gap: 14px; margin: 72px 0 32px; } .blk-text:first-child { margin-top: 56px; } .blk-text__head, .blk-text__body { grid-column: 1; } .blk-text__body p { font-size: 17px; line-height: 26px; } } .blk-title { font-family: var(--sans); font-stretch: 75%; font-size: 12px; line-height: 16px; letter-spacing: .11em; text-transform: uppercase; font-weight: 450; margin: 56px 0 16px; padding-top: 16px; border-top: 1px solid var(--line); } .blk-quote { margin: 96px 0; font-family: var(--serif); font-size: clamp(32px, 3.4vw, 52px); line-height: 1.08; letter-spacing: -.02em; max-width: 1100px; text-wrap: balance; } .blk-note { margin: 16px 0 0; color: var(--muted); font-size: 13px; line-height: 18px; } .blk--vertical .pieza-wrap { max-width: min(520px, 100%); margin: 0 auto; } .blk-par { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: start; } @media (max-width: 599px) { .blk-par { grid-template-columns: 1fr; } } .pieza-wrap { margin: 0; } .pieza { position: relative; overflow: hidden; border-radius: var(--radius); background: color-mix(in srgb, var(--fg) 6%, transparent); } .pieza img, .pieza video { display: block; width: 100%; height: auto; } .pieza--lamina { display: flex; align-items: center; justify-content: center; padding: 8% 10%; background: var(--proyecto); } .pieza--lamina img, .pieza--lamina video { width: auto; max-width: 100%; max-height: 78vh; object-fit: contain; } .pieza--cuadro { aspect-ratio: 1 / 1; padding: 12%; } .pieza--cuadro img, .pieza--cuadro video { width: 100%; height: 100%; max-height: none; object-fit: contain; } .pieza__pie { padding-top: 10px; color: var(--muted); font-size: 14px; line-height: 1.35; } .rejilla { display: grid; gap: 28px var(--gap); grid-template-columns: repeat(2, 1fr); } .rejilla--1 { grid-template-columns: 1fr; gap: var(--gap); } @media (min-width: 900px) { .rejilla--3 { grid-template-columns: repeat(3, 1fr); } .rejilla--4 { grid-template-columns: repeat(4, 1fr); } .rejilla--5 { grid-template-columns: repeat(5, 1fr); } .rejilla--6 { grid-template-columns: repeat(6, 1fr); } } @media (max-width: 599px) { .rejilla--5, .rejilla--6 { grid-template-columns: repeat(3, 1fr); } } .rejilla--libre { align-items: start; } .rejilla .pieza__pie { font-size: 13px; } .paleta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px var(--gap); } @media (min-width: 768px) { .paleta { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1240px) { .paleta { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } } .paleta__muestra { aspect-ratio: 4 / 5; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line); } .paleta__info { display: flex; flex-direction: column; gap: 2px; padding-top: 10px; font-size: 13px; color: var(--muted); line-height: 1.3; } .paleta__info strong { color: var(--fg); font-weight: 400; font-size: 15px; } .tipos { display: grid; gap: var(--gap); } @media (min-width: 768px) { .tipos { grid-template-columns: repeat(2, 1fr); } } .tipo { background: #f3eee3; color: #151515; padding: 28px; border-radius: var(--radius); display: flex; flex-direction: column; justify-content: space-between; gap: 26px; min-height: 280px; } .tipo__img img { max-width: 100%; max-height: 180px; width: auto; height: auto; display: block; } .tipo__vivo { display: flex; flex-direction: column; gap: 6px; } .tipo__nombre { font-size: clamp(40px, 6vw, 84px); line-height: 1; } .tipo__abc { font-size: 26px; opacity: .7; } .tipo__meta { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: #555; } .tipo__meta strong { color: #151515; font-weight: 500; font-size: 16px; } /* muestras tipográficas de las fichas */ @font-face { font-family: "Bungee"; src: url("../assets/fonts/muestras/Bungee-400.woff2") format("woff2"); font-display: swap; } @font-face { font-family: "Open Sans"; src: url("../assets/fonts/muestras/OpenSans-400.woff2") format("woff2"); font-display: swap; } @font-face { font-family: "Erica One"; src: url("../assets/fonts/muestras/EricaOne-400.woff2") format("woff2"); font-display: swap; } @font-face { font-family: "Montserrat"; font-weight: 400; src: url("../assets/fonts/muestras/Montserrat-400.woff2") format("woff2"); font-display: swap; } @font-face { font-family: "Montserrat"; font-weight: 600; src: url("../assets/fonts/muestras/Montserrat-600.woff2") format("woff2"); font-display: swap; } @font-face { font-family: "Quicksand"; font-weight: 400; src: url("../assets/fonts/muestras/Quicksand-400.woff2") format("woff2"); font-display: swap; } @font-face { font-family: "Quicksand"; font-weight: 700; src: url("../assets/fonts/muestras/Quicksand-700.woff2") format("woff2"); font-display: swap; } @font-face { font-family: "Rubik"; font-weight: 400; src: url("../assets/fonts/muestras/Rubik-400.woff2") format("woff2"); font-display: swap; } @font-face { font-family: "Rubik"; font-weight: 700; src: url("../assets/fonts/muestras/Rubik-700.woff2") format("woff2"); font-display: swap; } @font-face { font-family: "Poppins"; src: url("../assets/fonts/muestras/Poppins-400.woff2") format("woff2"); font-display: swap; } @font-face { font-family: "Jost"; src: url("../assets/fonts/muestras/Jost-400.woff2") format("woff2"); font-display: swap; } @font-face { font-family: "Z3NITH Pixel Mono"; font-weight: 300; src: url("../assets/fonts/muestras/Z3NITHPixelMono-Light.woff2") format("woff2"); } @font-face { font-family: "Z3NITH Pixel Mono"; font-weight: 400; src: url("../assets/fonts/muestras/Z3NITHPixelMono-Regular.woff2") format("woff2"); } @font-face { font-family: "Z3NITH Pixel Mono"; font-weight: 700; src: url("../assets/fonts/muestras/Z3NITHPixelMono-Bold.woff2") format("woff2"); } @font-face { font-family: "Z3NITH Pixel Mono Hollow"; src: url("../assets/fonts/muestras/Z3NITHPixelMono-Hollow.woff2") format("woff2"); } /* Z3NITH Pixel Mono: espécimen vivo */ .pm-light, .pm-regular, .pm-bold { font-family: "Z3NITH Pixel Mono", monospace; -webkit-font-smoothing: none; } .pm-light { font-weight: 300; } .pm-regular { font-weight: 400; } .pm-bold { font-weight: 700; } .pm-hollow { font-family: "Z3NITH Pixel Mono Hollow", monospace; -webkit-font-smoothing: none; } .pm-hero { padding: 60px 32px; background: #0e0e0e; border-radius: var(--radius); overflow: hidden; } .pm-hero__big { font-family: "Z3NITH Pixel Mono", monospace; font-weight: 700; font-size: clamp(72px, 19vw, 300px); line-height: 1; color: #fff; -webkit-font-smoothing: none; } .pm-hero__sub { margin-top: 20px; font-family: "Z3NITH Pixel Mono", monospace; font-size: 20px; color: #D7F75B; -webkit-font-smoothing: none; } .pm-pesos { display: grid; gap: 2px; border-radius: var(--radius); overflow: hidden; } .pm-peso { display: flex; flex-direction: column; gap: 10px; padding: 26px 32px; background: #121212; overflow: hidden; } .pm-peso__label { font-family: var(--sans); font-size: 14px; color: #8b8b90; } .pm-peso__txt { font-size: 40px; line-height: 1.15; color: #fff; word-break: break-all; } .pm-peso__txt--min { font-size: 20px; color: #bdbdbd; } @media (max-width: 767px) { .pm-peso__txt { font-size: 20px; } } .pm-tester__pesos { display: flex; gap: 8px; padding: 0 0 14px; } .pm-tester__pesos button { height: 26px; padding: 0 12px; border-radius: 999px; background: var(--pill); font-size: 13px; } .pm-tester__pesos button.is-active { background: var(--fg); color: var(--bg); } .pm-tester { padding: 30px; min-height: 180px; border-radius: var(--radius); background: #D7F75B; color: #0e0e0e; font-size: 60px; line-height: 1.15; outline: none; word-break: break-word; } @media (max-width: 767px) { .pm-tester { font-size: 40px; } } .pm-glifos { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 1px; background: #1d1d1d; border: 1px solid #1d1d1d; border-radius: var(--radius); overflow: hidden; } .pm-glifos span { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; background: #0e0e0e; color: #fff; font-size: 40px; transition: background .15s, color .15s; } .pm-glifos span:hover { background: #D7F75B; color: #0e0e0e; } .next-case__title { display: block; transition: letter-spacing .8s var(--ease-out); } .next-case:hover .next-case__title { letter-spacing: -.01em; } .related { padding-block: 24px 120px; } /* ---------- Nosotros: equipo ---------- */ .team__you { display: grid; place-items: center; text-align: center; } .team__card h3 { font-size: 15px; line-height: 20px; } @media (min-width: 1100px) { .team { overflow: visible; } .team__card { width: calc((100% - 4 * 24px) / 5); } } /* ---------- Empleo ---------- */ .jobs-note { padding-block: 120px 40px; max-width: 1040px; } .jobs-note p + p { margin-top: 20px; } @media (max-width: 899px) { .jobs-note { padding-block: 64px 24px; } } .duo .media a, .jobs-hero + .wrap .media a { display: block; height: 100%; } @media (max-width: 899px) { .offices { grid-template-columns: 1fr; } } /* ===================================================================== Fichas con la identidad de cada proyecto Colores y tipografías llegan como variables en el desde _fuente/identidades.py ===================================================================== */ [data-theme="proyecto"] { --bg: var(--p-bg); --fg: var(--p-fg); --muted: color-mix(in srgb, var(--p-fg) 66%, var(--p-bg)); --line: color-mix(in srgb, var(--p-fg) 22%, transparent); --pill: color-mix(in srgb, var(--p-fg) 14%, transparent); --btn-bg: var(--p-fg); --btn-fg: var(--p-bg); } [data-theme="proyecto-alt"] { --bg: var(--p-alt); --fg: var(--p-alt-fg); --muted: color-mix(in srgb, var(--p-alt-fg) 66%, var(--p-alt)); --line: color-mix(in srgb, var(--p-alt-fg) 22%, transparent); --pill: color-mix(in srgb, var(--p-alt-fg) 14%, transparent); --btn-bg: var(--p-alt-fg); --btn-fg: var(--p-alt); } body.is-case { font-family: var(--p-body); font-weight: var(--p-bw); } .is-case .label { font-family: var(--p-head); font-stretch: normal; font-weight: var(--p-hw); } .is-case ::selection { background: var(--p-acc); color: var(--p-bg); } .is-case .footer__news h2, .is-case .footer__lead { font-family: var(--p-body); } .cx-rotulo, .cx-kicker, .cx-crumb, .cx-num, .cx-cap, .cx-meta dt, .cx-link, .cx-type__meta, .cx-pal__c { font-family: var(--p-head); font-weight: var(--p-hw); text-transform: var(--p-hc); letter-spacing: var(--p-ht); } .cx-title, .cx-h, .cx-quote blockquote, .cx-site__url, .cx-more__t { font-family: var(--p-display); font-weight: var(--p-dw); font-style: var(--p-ds); text-transform: var(--p-dc); letter-spacing: var(--p-dt); } /* ---------- Portada del proyecto ---------- */ .cx-hero { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); min-height: 100svh; } .cx-hero__text { grid-column: 1 / span 7; display: flex; flex-direction: column; justify-content: flex-end; padding: calc(var(--header-h) + 72px) var(--pad) 56px; } .cx-crumb { font-size: 11px; line-height: 16px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px; } .cx-crumb a:hover { color: var(--fg); } .cx-kicker { margin-top: auto; padding-top: 48px; font-size: 13px; line-height: 18px; color: var(--p-acc); } .cx-title { --tw: 56vw; font-size: clamp(40px, min(7.2vw, calc(var(--tw) / (var(--tl, 8) * .62))), 136px); line-height: 1.04; margin: 18px 0 32px; text-wrap: balance; hyphens: none; } @media (max-width: 899px) { .cx-title { --tw: 88vw; font-size: clamp(34px, min(13vw, calc(var(--tw) / (var(--tl, 8) * .62))), 96px); } } .cx-intro { font-size: clamp(18px, 1.55vw, 24px); line-height: 1.42; max-width: 34em; text-wrap: pretty; } .cx-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 16px; margin: 40px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 15px; line-height: 21px; } .cx-meta dt { font-size: 11px; line-height: 16px; color: var(--muted); margin-bottom: 6px; } .cx-meta dd { margin: 0; } .cx-meta a { text-decoration: underline; text-decoration-color: var(--p-acc); text-underline-offset: 3px; } .cx-hero__media { grid-column: 8 / span 5; position: relative; margin-top: calc(var(--header-h) + 12px); overflow: hidden; } .cx-hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cx-link { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; margin-top: 32px; padding: 14px 22px; border-radius: 999px; background: var(--p-acc); color: var(--p-bg); font-size: 13px; line-height: 1; transition: gap .35s var(--ease-out), transform .35s var(--ease-out); } .cx-link:hover { gap: 16px; } @media (max-width: 899px) { .cx-hero { grid-template-columns: 1fr; min-height: 0; } .cx-hero__text { grid-column: 1; padding: calc(var(--header-h) + 32px) var(--pad) 40px; } .cx-kicker { padding-top: 32px; } .cx-hero__media { grid-column: 1; aspect-ratio: 4 / 5; margin-top: 0; } .cx-meta { grid-template-columns: 1fr 1fr; } } /* ---------- Capítulos de texto ---------- */ .cx-text { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); padding: clamp(88px, 11vw, 176px) var(--pad) clamp(56px, 6vw, 96px); } .cx-text__head { grid-column: 1 / span 5; } .cx-num { display: block; margin-bottom: 18px; font-size: 13px; color: var(--p-acc); } .cx-h { font-size: clamp(34px, 3.9vw, 70px); line-height: 1.02; text-wrap: balance; } .cx-text__body { grid-column: 7 / span 6; padding-top: 34px; } .cx-text__body p { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.6; color: var(--muted); text-wrap: pretty; } .cx-text__body p:first-child { color: var(--fg); } .cx-text__body p + p { margin-top: 18px; } @media (max-width: 899px) { .cx-text { grid-template-columns: 1fr; row-gap: 18px; } .cx-text__head, .cx-text__body { grid-column: 1; } .cx-text__body { padding-top: 0; } } /* ---------- Piezas ---------- */ .cx-body figure { margin: 0; } .cx-body img, .cx-body video { display: block; } .cx-cap { font-size: 11px; line-height: 16px; opacity: .78; } .cx-bleed img, .cx-bleed video { width: 100%; height: auto; } .cx-bleed .cx-cap { padding: 12px var(--pad) 0; color: var(--muted); opacity: 1; } .cx-bleed + .cx-bleed, .cx-spread + .cx-spread, .cx-bleed + .cx-spread, .cx-spread + .cx-bleed { margin-top: 0; } .cx-band { display: flex; flex-direction: column; align-items: center; padding: clamp(48px, 7vw, 128px) var(--pad); } .cx-band__in { width: 100%; display: flex; justify-content: center; } .cx-band__in img, .cx-band__in video { width: 100%; height: auto; max-height: 86vh; object-fit: contain; } .cx-band > .cx-cap { margin-top: 18px; text-align: center; } .cx-band--vertical .cx-band__in { max-width: 520px; } .cx-band .cx-rotulo { align-self: stretch; margin-bottom: clamp(24px, 3vw, 40px); padding-bottom: 12px; border-bottom: 1px solid color-mix(in srgb, currentColor 25%, transparent); font-size: 12px; } /* filas justificadas: cada pieza completa y a la misma altura que sus vecinas */ .cx-row { display: flex; align-items: flex-start; } .cx-cell { min-width: 0; } .cx-cell img, .cx-cell video { width: 100%; height: auto; } .cx-cell .cx-cap { margin-top: 10px; } .cx-band--grid, .cx-band--par { --g: clamp(8px, 1.2vw, 18px); } .cx-band--grid .cx-row, .cx-band--par .cx-row { gap: var(--g); align-self: flex-start; } .cx-band--grid .cx-row + .cx-row { margin-top: var(--g); } .cx-band--grid .cx-row { justify-content: flex-start; } .cx-lam { display: flex; align-items: center; justify-content: center; padding: 9%; } .cx-spread .cx-cell .cx-cap { padding: 0 var(--pad); color: var(--muted); } @media (max-width: 599px) { .cx-band--grid .cx-row:has(> :nth-child(3)) { flex-wrap: wrap; row-gap: var(--g); } .cx-band--grid .cx-row:has(> :nth-child(3)) > .cx-cell { flex: 1 1 calc(50% - var(--g)) !important; } .cx-spread .cx-row { flex-direction: column; } .cx-spread .cx-cell { flex: none !important; width: 100%; } } /* láminas cuadradas en rejilla (iconografía, variaciones) */ .cx-tiles { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: clamp(20px, 2.4vw, 36px) clamp(12px, 1.6vw, 24px); width: 100%; align-items: start; } .cx-tile { display: flex; flex-direction: column; gap: 12px; margin: 0; min-width: 0; } .cx-tile__box { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: 10%; } .cx-tile__box img, .cx-tile__box video { width: 100%; height: 100%; object-fit: contain; } .cx-tile .cx-cap { text-align: center; line-height: 1.4; text-wrap: balance; } .cx-tiles--2 { --n: 2; } .cx-tiles--3 { --n: 3; } .cx-tiles--4 { --n: 4; } .cx-tiles--5 { --n: 5; } .cx-tiles--6 { --n: 6; } @media (max-width: 599px) { .cx-tiles { --n: 2 !important; } } /* ---------- Paleta a sangre ---------- */ .cx-pal { padding-top: clamp(72px, 9vw, 140px); } .cx-pal > .cx-rotulo { margin: 0 var(--pad) clamp(20px, 2.5vw, 36px); padding-bottom: 14px; border-bottom: 1px solid var(--line); font-size: 12px; } .cx-pal__row { display: flex; min-height: clamp(300px, 58vh, 640px); } .cx-pal__c { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; padding: 22px 18px; font-size: 11px; line-height: 15px; } .cx-pal__c strong { font-family: var(--p-body); font-weight: 500; font-size: 16px; line-height: 20px; letter-spacing: .02em; margin-bottom: 4px; } .cx-pal > .cx-note { padding: 16px var(--pad) 0; } @media (max-width: 899px) { .cx-pal__row { flex-wrap: wrap; min-height: 0; } .cx-pal__c { flex: 1 1 50%; min-height: 170px; } } /* ---------- Tipografía viva ---------- */ .cx-band--types { align-items: stretch; } .cx-types { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(32px, 4vw, 64px) var(--gap); } @media (max-width: 899px) { .cx-types { grid-template-columns: 1fr; } } .cx-type { display: flex; flex-direction: column; justify-content: space-between; gap: 22px; padding-top: 22px; border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent); } .cx-type__aa { display: block; font-size: clamp(110px, 15vw, 250px); line-height: .9; } .cx-type__abc { display: block; margin-top: 18px; font-size: clamp(16px, 1.5vw, 22px); line-height: 1.4; overflow-wrap: anywhere; } .cx-type__img { background: #F3EEE3; padding: clamp(20px, 3vw, 40px); } .cx-type__img img { max-width: 100%; max-height: 220px; width: auto; height: auto; } .cx-type__meta { display: flex; flex-direction: column; gap: 2px; font-size: 11px; line-height: 16px; } .cx-type__meta strong { font-family: var(--p-body); font-weight: 500; font-size: 17px; line-height: 22px; letter-spacing: 0; text-transform: none; } /* ---------- Cita, notas ---------- */ .cx-quote { padding: clamp(80px, 11vw, 176px) var(--pad); text-align: center; } .cx-quote blockquote { font-size: clamp(32px, 4vw, 68px); line-height: 1.06; max-width: 1200px; margin: 0 auto; text-wrap: balance; } .cx-note { padding: 14px var(--pad) 0; color: var(--muted); font-size: 13px; line-height: 19px; } /* ---------- Z3NITH Pixel Mono dentro de su ficha ---------- */ .cx-pm { padding: 0 var(--pad); --radius: 0; } .cx-pm .blk-text__title { font-family: var(--p-display); font-size: clamp(28px, 3vw, 48px); line-height: 1.05; } .cx-pm .blk-title { font-family: var(--p-head); } /* ---------- Sitio del proyecto, siguiente y más trabajo ---------- */ .cx-site { display: block; margin-top: clamp(72px, 9vw, 140px); padding: clamp(64px, 9vw, 150px) var(--pad); background: var(--p-alt); color: var(--p-alt-fg); } .cx-site .cx-rotulo { display: block; font-size: 12px; margin-bottom: 18px; } .cx-site__url { display: block; font-size: clamp(56px, 11vw, 200px); line-height: .9; transition: letter-spacing .8s var(--ease-out); } .cx-site:hover .cx-site__url { letter-spacing: calc(var(--p-dt) + .02em); } .cx-next { display: block; margin-top: clamp(72px, 9vw, 140px); padding: clamp(88px, 12vw, 200px) var(--pad); text-align: center; background: var(--n-bg); color: var(--n-fg); } .cx-site + .cx-next { margin-top: 0; } .cx-next .cx-rotulo { display: block; font-size: 12px; margin-bottom: 26px; color: var(--n-acc); } .cx-next__title { display: block; hyphens: none; overflow-wrap: normal; font-family: var(--n-display); font-weight: var(--n-dw); font-style: var(--n-ds); text-transform: var(--n-dc); letter-spacing: var(--n-dt); font-size: clamp(52px, 9.5vw, 176px); line-height: 1.04; text-wrap: balance; transition: transform .9s var(--ease-out); } .cx-next:hover .cx-next__title { transform: translateY(-6px); } .cx-next__s { display: block; margin-top: 24px; font-size: 15px; opacity: .75; } .cx-more { padding: clamp(72px, 8vw, 128px) var(--pad) clamp(56px, 6vw, 96px); } .cx-more .cx-rotulo { font-size: 12px; padding-bottom: 14px; } .cx-more li { border-top: 1px solid var(--line); } .cx-more li:last-child { border-bottom: 1px solid var(--line); } .cx-more li a { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 18px 0; transition: color .25s, padding .45s var(--ease-out); } .cx-more li a:hover { color: var(--p-acc); padding-left: 12px; } .cx-more__t { font-size: clamp(26px, 3vw, 48px); line-height: 1.05; } .cx-more__s { font-size: 13px; color: var(--muted); text-align: right; } @media (max-width: 599px) { .cx-more li a { flex-direction: column; gap: 4px; } .cx-more__s { text-align: left; } } /* ===================================================================== Marca RAKS: ajustes tipográficos y formatos (móvil, iPad, escritorio) ===================================================================== */ .clients__name--serif { font-size: 26px; letter-spacing: -.01em; } .offer__text h3, .tile__num, .stats__big, .strip__num { letter-spacing: -.02em; } .offer__text h3 { font-size: clamp(34px, 3.3vw, 48px); line-height: 1.02; } .latest-head h2, .tout__text { text-wrap: balance; } .card__title { font-weight: 500; } /* iPhone con muesca / isla */ .header { padding-left: max(var(--pad), env(safe-area-inset-left)); padding-right: max(var(--pad), env(safe-area-inset-right)); } .footer { padding-bottom: max(28px, env(safe-area-inset-bottom)); } /* iPad horizontal y portátiles pequeños: la cabecera completa cabe sin apretarse */ @media (min-width: 900px) and (max-width: 1199px) { .header__nav { gap: 6px; } .header .pill { padding: 0 9px; font-size: 11px; letter-spacing: .08em; } .header__center { min-width: 150px; } .header__marquee { display: none; } .cx-meta { grid-template-columns: 1fr 1fr; } .cx-hero__text { grid-column: 1 / span 7; } .offer__works { grid-column: 6 / span 7; } .tiles { grid-template-columns: repeat(3, 1fr); row-gap: 24px; } } /* iPad vertical (600–899): tres columnas de proyectos y textos a lo ancho */ @media (min-width: 600px) and (max-width: 899px) { .card-grid { grid-template-columns: repeat(3, 1fr); } .post-grid { grid-template-columns: repeat(2, 1fr); } .team__card { width: 42vw; } .strip { grid-template-columns: repeat(3, 1fr); } .tiles { grid-template-columns: repeat(3, 1fr); } .clients { grid-template-columns: repeat(3, 1fr); } .cx-hero__media { aspect-ratio: 16 / 13; } } @media (max-width: 599px) { .clients { grid-template-columns: repeat(2, 1fr); } .clients__name { font-size: 17px; padding: 0 8px; } .clients__name--serif { font-size: 20px; } .clients__name--brand, .clients__name--label { font-size: 15px; } } /* LinkedIn en las tarjetas del equipo */ .team__li { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; color: var(--fg); opacity: .75; transition: opacity .2s; } .team__li:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; } .team__li svg { width: 14px; height: 14px; } .cx-limite { width: 100%; margin: 0 auto; display: flex; flex-direction: column; } /* Equipo en teléfono e iPad: cuadrícula con todas las tarjetas completas (no carrusel cortado) */ @media (max-width: 1099px) { .team { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 12px; overflow: visible; padding: 32px var(--pad) 88px; scroll-snap-type: none; } .team__card { width: auto; min-width: 0; } .team__card h3 { margin-top: 10px; font-size: 15px; line-height: 20px; } .team__card p { font-size: 13px; line-height: 18px; } .team__card:last-child { grid-column: 1 / -1; } .team__card:last-child .media { aspect-ratio: 2 / 1; } } @media (min-width: 600px) and (max-width: 1099px) { .team { grid-template-columns: repeat(3, 1fr); gap: 36px 16px; } .team__card:last-child { grid-column: auto / span 2; } .team__card:last-child .media { aspect-ratio: auto; height: calc(100% - 64px); } } .cx-type__link { margin-top: 8px; font-family: var(--p-body); text-transform: none; letter-spacing: 0; font-size: 14px; text-decoration: underline; text-decoration-color: var(--p-acc); text-underline-offset: 3px; } .cx-type__vivo[style*="Pixel Mono"] { -webkit-font-smoothing: none; } /* ---------- Menú de teléfono e iPad: secciones grandes + columna de servicios y contacto ---------- */ @media (max-width: 899px) { .menu { display: grid; grid-template-columns: 1fr; align-content: start; gap: 40px; padding: calc(var(--header-h) + 28px) var(--pad) max(28px, env(safe-area-inset-bottom)); } .menu__link { font-family: var(--serif); font-size: clamp(30px, 8.4vw, 64px); line-height: 1.08; letter-spacing: -.01em; padding: 12px 0; } .menu__link svg { width: clamp(28px, 5vw, 44px); } .menu__list > li:first-child { border-top: 1px solid var(--line); } .menu__side { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 20px; align-content: start; } .menu__group, .menu__side .menu__social { opacity: 0; transform: translateY(16px); filter: blur(6px); transition: opacity .5s var(--ease), transform .6s var(--ease-out), filter .6s var(--ease); } .menu-open .menu__group, .menu-open .menu__side .menu__social { opacity: 1; transform: none; filter: none; } .menu__title { color: var(--muted); margin-bottom: 10px; } .menu__side .menu__sub { padding: 0; } .menu__side .menu__sub a { padding: 3px 0; font-size: 17px; line-height: 1.35; color: var(--fg); } .menu__contact { display: block; font-size: 17px; line-height: 1.5; overflow-wrap: anywhere; } .menu__contact:hover, .menu__side .menu__sub a:hover { color: var(--acc, var(--fg)); } .menu__city { margin-top: 4px; font-size: 14px; color: var(--muted); } .menu__side .menu__social { grid-column: 1 / -1; display: flex; gap: 20px; justify-content: flex-start; padding-top: 20px; border-top: 1px solid var(--line); } } @media (min-width: 600px) and (max-width: 899px) { .menu { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 56px; align-content: stretch; } .menu__side { grid-template-columns: 1fr; align-content: space-between; padding-top: 6px; } .menu__side .menu__sub a { font-size: 19px; } } @media (max-width: 599px) { .menu__contact { font-size: clamp(13px, 3.7vw, 17px); overflow-wrap: normal; white-space: nowrap; } } @media (min-width: 600px) and (max-width: 899px) { .menu__link { font-size: clamp(34px, 6.8vw, 58px); padding: 18px 0; gap: 16px; } .menu { align-items: center; } .menu__side { align-content: start; gap: 44px; } } /* ---------- Formulario de contacto ---------- */ .contact-form { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); row-gap: 32px; padding: 72px 0 96px; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 24px); } .contact-form__intro { grid-column: 1 / span 5; } .contact-form__intro h2 { margin-bottom: 20px; } .cf { grid-column: 7 / span 6; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 14px; } .cf__f { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .cf__f span { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; } .cf__f--full { grid-column: 1 / -1; } .cf input, .cf select, .cf textarea { width: 100%; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: color-mix(in srgb, var(--fg) 6%, transparent); color: var(--fg); font: inherit; font-size: 16px; outline: none; transition: border-color .2s, background-color .2s; } .cf select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 22px) 55%, calc(100% - 16px) 55%; background-size: 6px 6px; background-repeat: no-repeat; } .cf textarea { resize: vertical; min-height: 140px; } .cf input:focus, .cf select:focus, .cf textarea:focus { border-color: var(--fg); background: color-mix(in srgb, var(--fg) 10%, transparent); } .cf [aria-invalid="true"] { border-color: #B3003C; } .cf__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 20px; margin-top: 6px; } .cf__msg { font-size: 15px; } .cf__hp { position: absolute; left: -9999px; } .cf.is-sent input, .cf.is-sent select, .cf.is-sent textarea { opacity: .5; } @media (max-width: 899px) { .contact-form { grid-template-columns: 1fr; padding: 48px 0 64px; } .contact-form__intro, .cf { grid-column: 1; } } @media (max-width: 599px) { .cf { grid-template-columns: 1fr; } } /* Aviso de la cabecera: nunca invade los botones del menú */ .header__marquee { max-width: min(34vw, 460px); overflow: hidden; text-overflow: ellipsis; } @media (max-width: 1279px) { .header__marquee { display: none; } } /* ---------- Piezas de redes dentro de un iPhone ---------- */ .cx-phones { display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; gap: clamp(28px, 6vw, 96px); width: 100%; } .cx-phone-wrap { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 18px; } .cx-phone-wrap .cx-cap { max-width: 300px; text-align: center; } .cx-phone { position: relative; width: clamp(220px, 22vw, 310px); aspect-ratio: 9 / 19.5; padding: 11px; border-radius: 46px; background: linear-gradient(145deg, #3a3a3f, #16161a 40%, #2b2b30); box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 40px 70px -20px rgba(0,0,0,.45), 0 12px 24px rgba(0,0,0,.25); } .cx-phone::before { content: ""; position: absolute; z-index: 2; top: 20px; left: 50%; width: 31%; height: 24px; transform: translateX(-50%); border-radius: 999px; background: #000; } .cx-phone::after { content: ""; position: absolute; right: -3px; top: 26%; width: 3px; height: 12%; border-radius: 0 3px 3px 0; background: #2b2b30; } .cx-phone__screen { height: 100%; border-radius: 36px; overflow: hidden; background: #000; display: flex; align-items: center; } .cx-phone__screen img { width: 100%; height: auto; display: block; } @media (max-width: 599px) { .cx-phone { width: min(72vw, 280px); } } .cx-mosaico { height: clamp(320px, 62vh, 640px); background-repeat: repeat; } /* Rótulo «Siguiente proyecto» y cifras de Nosotros: nunca más anchos que la pantalla */ .cx-next__title { font-size: clamp(34px, min(9.5vw, calc(88vw / (var(--tl, 8) * .68))), 176px); overflow-wrap: normal; } @media (max-width: 599px) { .stats__big { font-size: clamp(34px, 10.5vw, 120px); } } .home-form .contact-form { border-top: 0; padding: 112px 0 120px; } @media (max-width: 899px) { .home-form .contact-form { padding: 64px 0 72px; } } /* ---------- Nosotros: perfiles del equipo (foto, cargo y descripción) ---------- */ .perfiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px 48px; padding: 48px var(--pad) 120px; } .perfil { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 28px; align-items: start; } .perfil__foto { aspect-ratio: 4 / 5; } .perfil__foto img { width: 100%; height: 100%; object-fit: cover; } .perfil__nombre { font-family: var(--serif); font-size: clamp(24px, 2vw, 32px); line-height: 1.05; font-weight: 700; letter-spacing: -.01em; } .perfil__cargo { margin-top: 10px; font-size: 12px; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; color: var(--fg); } .perfil__bio { margin-top: 16px; } .perfil__bio p { font-size: 15px; line-height: 1.6; color: var(--muted); } .perfil__bio p + p { margin-top: 12px; } .perfil__li { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 13px; opacity: .8; transition: opacity .2s; } .perfil__li:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; } .perfil__li svg { width: 14px; height: 14px; } .perfil--tu { grid-column: 1 / -1; grid-template-columns: minmax(0, 18%) minmax(0, 1fr); align-items: center; } .perfil--tu .perfil__foto { aspect-ratio: 1; } @media (max-width: 1099px) { .perfiles { grid-template-columns: 1fr; gap: 56px; } .perfil--tu { grid-template-columns: minmax(0, 30%) minmax(0, 1fr); } } @media (max-width: 599px) { .perfiles { padding: 32px var(--pad) 80px; gap: 48px; } .perfil { grid-template-columns: 1fr; gap: 18px; } .perfil__foto { width: 78%; } .perfil--tu { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); } .perfil--tu .perfil__foto { width: 100%; } } /* ---------- Cambio de idioma ---------- */ .lang-switch { margin-left: 6px; background: transparent; box-shadow: inset 0 0 0 1px var(--line); } .lang-switch:hover { background: var(--pill); } .header__lang { display: none; } @media (max-width: 899px) { .header { grid-template-columns: 1fr auto auto; column-gap: 14px; } .header__lang { display: inline-flex; align-items: center; justify-content: center; height: 28px; padding: 0 11px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font-size: 11px; letter-spacing: .12em; } }