/* Theme Name: JB Template Theme URI: https://joaquinbruna.com Author: Joaquin Bruna Description: Marca personal — consultoría boutique. Portada inmersiva + cabecera global numerada; español en el front. Version: 1.15.19 Requires at least: 6.0 Tested up to: 6.6 Requires PHP: 7.4 Text Domain: joaquin-bruna */ :root { /* Chrome móvil: hueco bajo el layout vs visualViewport (barra inferior). Lo actualiza jb-header.js */ --jb-vv-inset-bottom: 0px; --jb-bg: #0a0a0a; --jb-surface: #111111; --jb-surface-soft: #181818; --jb-text: #f5f5f5; --jb-text-soft: #a3a3a3; --jb-accent: #e5e5e5; --jb-border: #262626; --jb-max-width: 1240px; --jb-font-display: "Inter", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; --jb-font-body: "Inter", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; --jb-header-h: 3.75rem; } /* * Theme toggle (jb-theme-toggle.js sets data-jb-theme on ): * Light palette applies ONLY to chrome — sticky header, mobile drawer, footer. * Page body and ACF modules keep :root variables (original module colors). */ html[data-jb-theme="light"] .jb-header--global, html[data-jb-theme="light"] .jb-footer, html[data-jb-theme="light"] .jb-header__drawer { color-scheme: light; --jb-bg: #ffffff; --jb-surface: #f6f3ec; --jb-surface-soft: #efe9df; --jb-text: #141414; --jb-text-soft: #5c5a56; --jb-accent: #1a1a1a; --jb-border: #e6e3dc; } html[data-jb-theme="dark"] { color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 4.75rem; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } html, body { margin: 0; padding: 0; -webkit-text-size-adjust: 100%; } body { position: relative; font-family: var(--jb-font-body); font-weight: 400; background: var(--jb-bg); color: var(--jb-text); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } /* * Portada / plantilla page-home: evita franjas entre hero (#050508) y el color global del body (#0a0a0a). * Los márgenes en 0 siguen siendo la solución principal; esto solo suaviza costuras si algo filtra 1px. */ body.jb-immersive-home { background-color: #050508; } /* Cualquier página que use el stack de módulos ACF (no solo la portada “immersive”). */ body:has(.jb-page-modules.jb-stack), body:has(.jb-home-modules.jb-stack) { background-color: #050508; } /* Misma intención sin depender de :has() (clase en functions.php · jb_body_class). */ body.jb-modular-stack { background-color: #050508; } /* * main.jb-page llevaba padding-bottom: 4rem → franja del color del body bajo el último módulo. * El contenido modular ya define sus propios márgenes en cada fila ACF. */ main.jb-page:has(.jb-page-modules.jb-stack), #main-content:has(.jb-home-modules.jb-stack), body.jb-modular-stack main.jb-page, body.jb-modular-stack #main-content { padding-bottom: 0; padding-top: 0; } img { max-width: 100%; height: auto; } /* Sin textura: superficie limpia, tipo editorial */ .jb-theme > * { position: relative; z-index: 1; } .jb-theme > .jb-header--global { z-index: 60; } h1, h2, h3, .jb-brand, .jb-kicker, .jb-title, .jb-page-title, .jb-button, .jb-text-link, .jb-nav-list a { font-family: var(--jb-font-display); } .jb-skip-link { position: absolute; left: -9999px; top: 0.75rem; z-index: 100; padding: 0.5rem 1rem; background: var(--jb-accent); color: #0f0f0f; font-size: 0.8rem; font-weight: 600; border-radius: 0.25rem; } .jb-skip-link:focus { left: 0.75rem; outline: 2px solid var(--jb-text); outline-offset: 2px; } a { color: inherit; text-decoration: none; } .jb-container { width: min(100% - 2.5rem, var(--jb-max-width)); margin-inline: auto; } .jb-header--global { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--jb-bg) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--jb-border); } body.jb-drawer-open .jb-header--global { z-index: 220; } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .jb-header--global { background: color-mix(in srgb, var(--jb-bg) 98%, transparent); } } .jb-immersive-home .jb-header--global { background: color-mix(in srgb, var(--jb-bg) 78%, transparent); border-bottom-color: color-mix(in srgb, var(--jb-border) 55%, transparent); } @media (max-width: 1023px) { /* Chrome: blur sobre un hero con foto grande → parches / “arrastre” al hacer scroll */ .jb-header--global { backdrop-filter: none; -webkit-backdrop-filter: none; background: color-mix(in srgb, var(--jb-bg) 97%, transparent); } .jb-immersive-home .jb-header--global { background: color-mix(in srgb, var(--jb-bg) 94%, transparent); border-bottom-color: var(--jb-border); } } .jb-header__bar { position: relative; width: min(100% - 2rem, 1320px); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--jb-header-h); padding: 0.65rem 0; } .jb-header__brand-slot { flex: 0 0 auto; z-index: 2; min-width: 0; } .jb-header__brand { font-family: var(--jb-font-display); text-transform: uppercase; letter-spacing: 0.22em; color: var(--jb-text); white-space: nowrap; transition: opacity 0.4s ease, max-width 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .jb-header__brand--full { display: none; font-size: 0.625rem; font-weight: 500; max-width: 16rem; overflow: hidden; } .jb-header__brand--short { display: inline-block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.32em; } @media (min-width: 900px) { .jb-header__brand--full { display: inline-block; } .jb-header__brand--short { display: none; } } /* Portada inmersiva: misma marca que en el resto del sitio (móvil: nombre completo, tipografía compacta). */ @media (max-width: 899px) { body.jb-immersive-home .jb-header__brand--full { display: inline-block; font-size: 0.52rem; font-weight: 500; letter-spacing: 0.14em; line-height: 1.25; max-width: min(11.5rem, 52vw); white-space: normal; } body.jb-immersive-home .jb-header__brand--short { display: none; } } .jb-header__brand:hover { color: var(--jb-text-soft); } /* Menú 01–n centrado en la barra (editable vía Apariencia → Menús · «Menú principal») */ .jb-primary-nav-slot { display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: min(94vw, 52rem); pointer-events: none; z-index: 1; } @media (min-width: 1024px) { .jb-primary-nav-slot { display: block; } } .jb-primary-nav-slot > * { pointer-events: auto; } .jb-top-nav { display: none; align-items: center; justify-content: center; flex-wrap: wrap; row-gap: 0.35rem; column-gap: clamp(0.5rem, 1.8vw, 2rem); max-width: 100%; } .jb-top-nav:not(.jb-top-nav--stack) { flex-wrap: wrap; } @media (min-width: 1024px) { .jb-top-nav:not(.jb-top-nav--stack) { display: flex; position: static; transform: none; } } @media (min-width: 1024px) and (max-width: 1199px) { .jb-top-nav:not(.jb-top-nav--stack) { column-gap: clamp(0.45rem, 1.2vw, 1.25rem); } .jb-top-nav:not(.jb-top-nav--stack) .jb-top-nav__label { font-size: 0.5rem; letter-spacing: 0.14em; } } .jb-top-nav > * { pointer-events: auto; } .jb-top-nav__item { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 0.35rem 0.25rem; font-family: var(--jb-font-display); color: var(--jb-text-soft); text-align: center; transition: color 0.3s ease; } .jb-top-nav__item:hover { color: var(--jb-text); } .jb-top-nav__n { font-family: var(--jb-font-body); font-size: 0.5625rem; font-weight: 500; letter-spacing: 0.14em; color: var(--jb-text-soft); opacity: 0.85; } .jb-top-nav__label { font-size: 0.5625rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.3; } .jb-header__actions { flex: 0 0 auto; z-index: 2; display: flex; align-items: center; gap: 1rem; margin-left: auto; } .jb-header__mail { font-family: var(--jb-font-body); font-size: clamp(0.7rem, 1.6vw, 0.8125rem); font-weight: 400; color: var(--jb-text-soft); letter-spacing: 0.03em; white-space: nowrap; } .jb-header__mail:hover { color: var(--jb-text); } .jb-header__theme-toggle { display: flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; margin: 0; padding: 0; border: 1px solid transparent; background: transparent; color: var(--jb-text-soft); cursor: pointer; border-radius: 999px; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease; } .jb-header__theme-toggle:hover { color: var(--jb-text); border-color: var(--jb-border); background: color-mix(in srgb, var(--jb-text) 7%, transparent); } .jb-header__theme-toggle:focus-visible { outline: 2px solid var(--jb-text); outline-offset: 2px; } .jb-header__theme-toggle-inner { display: grid; place-items: center; width: 100%; height: 100%; } .jb-header__theme-icon { grid-area: 1 / 1; } .jb-header__theme-icon--moon { display: none; } .jb-header__theme-icon--sun { display: block; } html[data-jb-theme="light"] .jb-header__theme-icon--sun { display: none; } html[data-jb-theme="light"] .jb-header__theme-icon--moon { display: block; } @media (max-width: 1023px) { .jb-header__actions .jb-header__mail { display: none; } } .jb-header__menu-toggle { display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; margin: 0; padding: 0; border: none; background: transparent; color: var(--jb-text); cursor: pointer; border-radius: 2px; } .jb-header__menu-toggle:focus-visible { outline: 2px solid var(--jb-text); outline-offset: 2px; } @media (min-width: 1024px) { .jb-header__menu-toggle { display: none; } } .jb-header__menu-bars { position: relative; display: block; width: 1.15rem; height: 1px; background: currentColor; transition: background 0.3s ease; } .jb-header__menu-bars::before, .jb-header__menu-bars::after { content: ""; position: absolute; left: 0; width: 100%; height: 1px; background: currentColor; transition: transform 0.3s ease, top 0.3s ease; } .jb-header__menu-bars::before { top: -0.38rem; } .jb-header__menu-bars::after { top: 0.38rem; } .jb-header--open .jb-header__menu-bars { background: transparent; } .jb-header--open .jb-header__menu-bars::before { top: 0; transform: rotate(45deg); } .jb-header--open .jb-header__menu-bars::after { top: 0; transform: rotate(-45deg); } .jb-header__menu-toggle { position: relative; } /* Drawer móvil (fuera de
para no quedar recortado por backdrop-filter) */ .jb-header__drawer { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; background: var(--jb-bg); opacity: 0; visibility: hidden; pointer-events: none; transform: translate3d(0, 12px, 0); transition: opacity 0.32s ease, visibility 0.32s ease, transform 0.38s cubic-bezier(0.22, 1, 0.36, 1); } body.jb-drawer-open .jb-header__drawer { opacity: 1; visibility: visible; pointer-events: auto; transform: translate3d(0, 0, 0); } .jb-header__drawer-backdrop { position: absolute; inset: 0; z-index: 0; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; } @media (min-width: 1024px) { .jb-header__drawer { display: none; } } .jb-header__drawer-inner { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; min-height: 0; width: 100%; max-width: 32rem; margin-inline: auto; padding: calc(var(--jb-header-h) + 0.75rem) 1.35rem calc(3.75rem + env(safe-area-inset-bottom, 0px)); overflow-y: auto; -webkit-overflow-scrolling: touch; gap: 0.25rem; } .jb-header__drawer-kicker { margin: 0 0 0.35rem; font-family: var(--jb-font-display); font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--jb-text-soft); } .jb-header__drawer-kicker--footer { margin-top: 0; margin-bottom: 0.5rem; } .jb-header__drawer-footer { margin-top: auto; margin-bottom: 0.35rem; padding-top: 1.5rem; padding-bottom: 0.5rem; border-top: 1px solid var(--jb-border); } .jb-top-nav--stack { position: static; transform: none; display: flex; flex-direction: column; align-items: stretch; gap: 0; max-width: none; pointer-events: auto; } .jb-top-nav--stack .jb-top-nav__item { flex-direction: row; justify-content: flex-start; align-items: center; gap: 1.25rem; min-height: 3.35rem; padding: 1.1rem 0; border-bottom: 1px solid var(--jb-border); text-align: left; color: var(--jb-text); } .jb-top-nav--stack .jb-top-nav__n { font-size: 0.6875rem; letter-spacing: 0.2em; color: var(--jb-text-soft); } .jb-top-nav--stack .jb-top-nav__label { font-size: 0.75rem; letter-spacing: 0.07em; line-height: 1.3; } .jb-top-nav--stack .jb-top-nav__item:hover { color: var(--jb-text-soft); } .jb-header__drawer-mail { display: inline-block; font-family: var(--jb-font-display); font-size: clamp(1rem, 4.2vw, 1.2rem); font-weight: 500; letter-spacing: 0.04em; color: var(--jb-text); word-break: break-word; } .jb-header__drawer-mail:hover { color: var(--jb-text-soft); } body.jb-drawer-open { overflow: hidden; } /* Fallback menú WP (si se usa en otro sitio) */ .jb-nav-wrap .jb-nav-list { display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } .jb-nav-list a { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.24em; font-weight: 600; color: var(--jb-text-soft); } .jb-nav-list a:hover { color: var(--jb-text); } .jb-immersive-home #main-content { padding-bottom: 0; overflow-x: hidden; } #sobre-mi, #palabras, #contacto { scroll-margin-top: 0.75rem; scroll-margin-bottom: 1rem; } .jb-hero { position: relative; padding: 0; min-height: 85vh; min-height: 85svh; display: grid; align-items: stretch; } @media (min-width: 960px) { .jb-hero--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } } .jb-hero-visual { position: relative; min-height: 42vh; min-height: 42svh; background: var(--jb-surface); } @media (min-width: 960px) { .jb-hero-visual { min-height: auto; } } .jb-leica { position: relative; height: 100%; min-height: 42vh; min-height: 42svh; overflow: hidden; background: var(--jb-surface-soft); } .jb-leica img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.35) contrast(1.05); transform: scale(1.01); transition: filter 0.7s ease, transform 1s ease; } .jb-leica:hover img, .jb-leica:focus-within img { filter: grayscale(0) contrast(1); transform: scale(1.04); } .jb-leica--banner { min-height: 200px; max-height: 420px; border-radius: 2px; border: 1px solid var(--jb-border); } .jb-leica--banner img { max-height: 420px; object-position: center; } .jb-hero-copy { display: flex; flex-direction: column; justify-content: center; padding: 4.5rem 0 4rem; } @media (min-width: 960px) { .jb-hero-copy { padding: 6rem 0 5rem 2.5rem; } } .jb-kicker { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.28em; font-weight: 700; color: var(--jb-text-soft); margin: 0 0 1.25rem; } .jb-title { margin: 0; font-size: clamp(2.35rem, 7.5vw, 5.75rem); font-weight: 800; line-height: 0.92; letter-spacing: -0.04em; text-transform: uppercase; } .jb-title-line { display: block; } .jb-subtitle { margin-top: 1.75rem; max-width: 36rem; color: var(--jb-text-soft); font-family: var(--jb-font-body); font-size: clamp(1.05rem, 2vw, 1.35rem); font-weight: 300; line-height: 1.55; } .jb-subtitle-strong { display: block; margin-top: 0.65rem; color: var(--jb-text); font-weight: 500; } .jb-hero-meta { margin-top: 0; padding: 1.25rem min(2.5rem, 5vw) 2.5rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.22em; font-weight: 700; color: var(--jb-text-soft); opacity: 0.85; } @media (min-width: 960px) { .jb-hero-meta { position: absolute; bottom: 2.5rem; right: 2.5rem; align-items: flex-end; text-align: right; } } .jb-section { padding: 4.5rem 0; border-top: 1px solid var(--jb-border); } .jb-section h2 { margin: 0 0 1.2rem; font-size: clamp(1.5rem, 3.2vw, 2.65rem); font-weight: 600; line-height: 1.08; letter-spacing: -0.03em; text-transform: none; } .jb-section-intro { margin: 0 0 2rem; color: var(--jb-text-soft); max-width: 48rem; } .jb-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .jb-card { background: var(--jb-surface); border: 1px solid var(--jb-border); padding: 1.25rem; border-radius: 2px; overflow: hidden; } .jb-card--media { padding: 0; display: flex; flex-direction: column; } .jb-card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--jb-surface-soft); } .jb-card-media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.3); transition: filter 0.6s ease, transform 0.8s ease; } .jb-card--media:hover .jb-card-media img { filter: grayscale(0); transform: scale(1.03); } .jb-card-body { padding: 1.25rem; } .jb-card h3 { margin: 0 0 0.75rem; font-size: 1rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .jb-card p { margin: 0; color: var(--jb-text-soft); font-size: 0.95rem; } .jb-quote { margin: 0; padding: 1.4rem; background: var(--jb-surface-soft); border-left: 3px solid var(--jb-accent); border-radius: 0.5rem; } .jb-quote p { margin: 0 0 0.9rem; } .jb-quote cite { color: var(--jb-text-soft); font-style: normal; font-size: 0.9rem; } .jb-cta { margin-top: 1.6rem; } .jb-button { display: inline-block; border: 1px solid var(--jb-accent); color: var(--jb-accent); padding: 0.85rem 1.35rem; border-radius: 2px; text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.625rem; font-weight: 700; } .jb-button:hover { background: var(--jb-accent); color: var(--jb-bg); } .jb-button--ghost { background: transparent; border-color: var(--jb-border); color: var(--jb-text-soft); } .jb-button--ghost:hover { border-color: var(--jb-text-soft); background: rgba(255, 255, 255, 0.04); color: var(--jb-text); } .jb-hero-actions { margin-top: 2rem; } .jb-text-link { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; color: var(--jb-accent); border-bottom: 1px solid transparent; } .jb-text-link:hover { border-bottom-color: var(--jb-accent); } .jb-card-link-wrap { margin-top: 1rem; } .jb-cta--row { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; } .jb-page { padding-bottom: 4rem; overflow-x: hidden; } .jb-page-banner { margin-bottom: 2rem; } .jb-page-hero { padding: 3.5rem 0 2rem; border-bottom: 1px solid var(--jb-border); } .jb-page-title { margin: 0 0 1rem; font-size: clamp(1.85rem, 4.2vw, 3.15rem); font-weight: 600; line-height: 1.08; letter-spacing: -0.04em; text-transform: none; } .jb-section-intro--hero { margin-bottom: 0; font-size: 1.05rem; } .jb-section--tight { padding-top: 3rem; padding-bottom: 3rem; } .jb-prose { padding: 2.5rem 0 0; max-width: 42rem; color: var(--jb-text-soft); } .jb-prose--compact { padding: 0; margin-top: 0.5rem; font-size: 0.95rem; } .jb-prose a { color: var(--jb-accent); text-decoration: underline; text-underline-offset: 3px; } .jb-list { margin: 0; padding-left: 1.2rem; color: var(--jb-text-soft); max-width: 40rem; } .jb-list li { margin-bottom: 0.55rem; } .jb-card--highlight { background: var(--jb-surface-soft); border-color: var(--jb-accent); } .jb-card--post { margin-bottom: 1rem; } .jb-card-post-title { margin: 0 0 0.35rem; font-size: 1.15rem; } .jb-card-post-title a { color: var(--jb-text); } .jb-card-post-title a:hover { color: var(--jb-accent); } .jb-card-post-meta { margin: 0 0 0.5rem; font-size: 0.8rem; color: var(--jb-text-soft); text-transform: uppercase; letter-spacing: 0.08em; } /* Rejilla de figuras (páginas Travel / Photo) — no confundir con el módulo ACF .jb-gallery */ .jb-figure-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; } .jb-figure { margin: 0; background: var(--jb-surface); border: 1px solid var(--jb-border); border-radius: 0.5rem; overflow: hidden; } .jb-figure img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; filter: grayscale(0.25); transition: filter 0.6s ease; } .jb-figure:hover img { filter: grayscale(0); } .jb-figure figcaption { padding: 0.65rem 0.85rem; font-size: 0.78rem; color: var(--jb-text-soft); line-height: 1.35; white-space: pre-line; } .jb-video { position: relative; width: 100%; max-width: 960px; margin-top: 1rem; border-radius: 0.5rem; overflow: hidden; border: 1px solid var(--jb-border); aspect-ratio: 16 / 9; background: #000; } .jb-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .jb-cta-block .jb-cta { margin-top: 1.25rem; } .jb-pagination { margin-top: 2rem; } .jb-pagination .nav-links { display: flex; gap: 0.75rem; flex-wrap: wrap; } .jb-pagination a, .jb-pagination span { display: inline-block; padding: 0.35rem 0.65rem; border: 1px solid var(--jb-border); border-radius: 0.25rem; font-size: 0.85rem; color: var(--jb-text-soft); } .jb-pagination a:hover { color: var(--jb-accent); border-color: var(--jb-accent); } .jb-pagination span.current { color: var(--jb-bg); background: var(--jb-accent); border-color: var(--jb-accent); } .jb-footer { border-top: 1px solid var(--jb-border); padding: 2.5rem 0 3rem; color: var(--jb-text-soft); font-size: 0.75rem; letter-spacing: 0.06em; } .jb-back-to-top { --jb-btt-bg: #111111; --jb-btt-arrow: #f5f5f5; position: fixed; bottom: calc(1.35rem + env(safe-area-inset-bottom, 0px)); z-index: 210; width: 2.8rem; height: 2.8rem; border: 1px solid color-mix(in srgb, var(--jb-btt-bg) 72%, #ffffff 22%); background: var(--jb-btt-bg); color: var(--jb-btt-arrow); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(10px); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28); transition: opacity 0.22s ease, transform 0.24s ease, background 0.2s ease; } .jb-back-to-top--left { left: clamp(0.75rem, 2.6vw, 1.5rem); } .jb-back-to-top--right { right: clamp(0.75rem, 2.6vw, 1.5rem); } .jb-back-to-top--circle { border-radius: 999px; } .jb-back-to-top--square { border-radius: 0.35rem; } .jb-back-to-top svg { width: 1.2rem; height: 1.2rem; } .jb-back-to-top.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .jb-back-to-top:hover, .jb-back-to-top:focus-visible { background: color-mix(in srgb, var(--jb-btt-bg) 82%, #ffffff 18%); } .jb-back-to-top:focus-visible { outline: 2px solid var(--jb-btt-arrow); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .jb-back-to-top { transition: opacity 0.15s linear, visibility 0.15s linear; transform: none; } } .jb-immersive-home .jb-footer { position: relative; z-index: 65; background: var(--jb-bg); padding-bottom: clamp(2.5rem, 8vh, 4rem); padding-bottom: clamp(2.5rem, 8svh, 4rem); } @media (max-width: 1023px) { body.jb-immersive-home .jb-footer { padding-bottom: calc( clamp(2.5rem, 8svh, 4rem) + env(safe-area-inset-bottom, 0px) ); } } /* —— Portada cinematográfica —— */ .jb-cine-hero { position: relative; /* 100svh: altura estable cuando Chrome muestra/oculta la barra de URL (evita “saltos”). */ min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(var(--jb-header-h) + 1rem) 1.5rem clamp(2.75rem, 7vw, 4.5rem); background-color: #050508; } /* Márgenes ACF en 0: la foto (.jb-cine-hero__bg) llega al borde; el aire va al bloque de texto. */ .jb-cine-hero--flush-margin-top { padding-top: 0; } .jb-cine-hero--flush-margin-bottom { padding-bottom: 0; } .jb-cine-hero--flush-margin-top .jb-cine-hero__inner { padding-top: calc(var(--jb-header-h) + 1rem); } .jb-cine-hero--flush-margin-bottom .jb-cine-hero__inner { padding-bottom: clamp(2.75rem, 7vw, 4.5rem); } /* Foto del hero en capa propia: Chrome compone mejor que background en el
+ header sticky */ .jb-cine-hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-color: #050508; background-size: cover; background-position: center 32%; background-repeat: no-repeat; transform: translateZ(0); } .jb-cine-hero__veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient( 180deg, rgba(5, 5, 8, 0.35) 0%, rgba(5, 5, 8, 0.5) 45%, rgba(5, 5, 8, 0.82) 100% ); pointer-events: none; } .jb-cine-hero__inner { position: relative; z-index: 2; text-align: center; max-width: 22rem; } @media (min-width: 640px) { .jb-cine-hero__inner { max-width: 42rem; } } .jb-cine-hero__mark { margin: 0 0 2rem; font-family: var(--jb-font-display); font-size: clamp(0.5625rem, 1.1vw, 0.6875rem); font-weight: 400; letter-spacing: 0.38em; text-transform: uppercase; color: rgba(255, 255, 255, 0.78); } .jb-cine-hero__title { margin: 0; font-family: var(--jb-font-display); font-size: clamp(2rem, 6.5vw, 4rem); font-weight: 200; line-height: 1.08; letter-spacing: 0.02em; color: #fafafa; text-shadow: 0 2px 48px rgba(0, 0, 0, 0.45); } .jb-cine-hero__sub { margin: 1.75rem auto 0; max-width: 32ch; font-family: var(--jb-font-body); font-size: clamp(0.9375rem, 1.85vw, 1.0625rem); font-weight: 300; line-height: 1.55; letter-spacing: 0.02em; color: rgba(245, 245, 245, 0.62); } .jb-cine-hero__ctas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 1rem; margin-top: 2.5rem; } .jb-cine-hero__ctas--stack { flex-direction: column; align-items: stretch; } .jb-cine-hero__cta { display: inline-block; margin-top: 0; padding: 0.65rem 1.85rem; font-family: var(--jb-font-display); font-size: 0.625rem; font-weight: 400; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255, 255, 255, 0.92); border: 1px solid rgba(255, 255, 255, 0.32); border-radius: 999px; transition: border-color 0.35s ease, background 0.35s ease, color 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .jb-cine-hero__cta:hover { border-color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.08); transform: translateY(-2px); } .jb-cine-hero__cta--secondary { border-color: rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.82); } .jb-cine-hero__cta--secondary:hover { border-color: rgba(255, 255, 255, 0.55); color: rgba(255, 255, 255, 0.95); } @media (prefers-reduced-motion: reduce) { .jb-header__drawer { transition: none; transform: none; } .jb-header__menu-bars::before, .jb-header__menu-bars::after { transition: none; } .jb-cine-hero__cta:hover { transform: none; } .jb-cine-hero__bg { transform: none; } } @media (max-width: 1023px) { :root { --jb-header-h: 4.25rem; } /* Chrome móvil/WebViews: evita resize del hero cuando aparece/desaparece la barra URL. */ .jb-cine-hero { min-height: clamp(34rem, 128vw, 46rem); padding-top: calc(var(--jb-header-h) + 0.65rem); padding-bottom: clamp(2.5rem, 8vw, 4rem); } .jb-cine-hero--flush-margin-top { padding-top: 0; } .jb-cine-hero--flush-margin-bottom { padding-bottom: 0; } .jb-cine-hero--flush-margin-top .jb-cine-hero__inner { padding-top: calc(var(--jb-header-h) + 0.65rem); } .jb-cine-hero--flush-margin-bottom .jb-cine-hero__inner { padding-bottom: clamp(2.5rem, 8vw, 4rem); } .jb-header__bar { width: min(100% - 1rem, 1320px); } .jb-header__drawer-inner { padding: calc(var(--jb-header-h) + 0.65rem) 1.1rem calc(3.5rem + env(safe-area-inset-bottom, 0px)); } } @media (max-width: 1023px) { .jb-stack > .jb-cine-hero:first-child:not(.jb-cine-hero--flush-margin-top) { margin-top: 0 !important; padding-top: calc(var(--jb-header-h) + 0.65rem) !important; } .jb-stack > .jb-cine-hero:first-child.jb-cine-hero--flush-margin-top { margin-top: 0 !important; padding-top: 0 !important; } } @media (max-width: 680px) { .jb-cine-hero { min-height: clamp(31rem, 152vw, 40rem); } .jb-cine-hero__bg { background-position: center 24%; } .jb-cine-hero__inner { max-width: 20rem; } .jb-triptych__figure { max-height: min(380px, 130vw); } } .jb-ed-band { padding: clamp(5rem, 14vw, 10rem) 0; border-top: 1px solid var(--jb-border); } .jb-ed-band__inner { margin-left: clamp(1.25rem, 14vw, 20vw); max-width: 34rem; padding-right: 1.5rem; } .jb-ed-label { margin: 0 0 1.5rem; font-family: var(--jb-font-display); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--jb-text); } .jb-ed-label--dim { color: var(--jb-text-soft); } .jb-ed-prose { margin: 0; font-family: var(--jb-font-body); font-size: 1.0625rem; font-weight: 300; line-height: 1.75; color: var(--jb-text-soft); } /* Tríptico full-bleed (portada, bajo Sobre mí) */ .jb-triptych { width: 100%; margin: 0; padding: 0; } .jb-triptych__grid { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; padding: 0; } @media (min-width: 640px) { .jb-triptych--cols-2 .jb-triptych__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .jb-triptych--cols-3 .jb-triptych__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .jb-triptych--cols-3 .jb-triptych__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 520px) { .jb-triptych--cols-4 .jb-triptych__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .jb-triptych--cols-4 .jb-triptych__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .jb-triptych__link { display: block; color: inherit; text-decoration: none; outline-offset: -2px; } .jb-triptych__link--lightbox { width: 100%; border: 0; padding: 0; background: none; text-align: left; cursor: default; } .jb-triptych__link:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.85); z-index: 1; } .jb-triptych__figure { position: relative; margin: 0; width: 100%; overflow: hidden; background: var(--jb-tile-bg, var(--jb-surface)); aspect-ratio: 3 / 4; /* Sin vh/svh: al redimensionar la barra de Chrome el tope no “salta”. */ max-height: min(520px, 120vw); } .jb-triptych__color-fill { width: 100%; height: 100%; background: var(--jb-tile-bg, var(--jb-surface)); } .jb-triptych__figure img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: center; transform: scale(1.001); transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1); } .jb-triptych__figure--has-hover img { position: relative; z-index: 0; } .jb-triptych__link:hover .jb-triptych__figure:not(.jb-triptych__figure--has-hover) img, .jb-triptych__link:focus-visible .jb-triptych__figure:not(.jb-triptych__figure--has-hover) img { transform: scale(1.04); } .jb-triptych__cap { position: absolute; inset: auto 0 0 0; margin: 0; padding: clamp(1.25rem, 3.5vw, 2rem) clamp(0.85rem, 2.2vw, 1.35rem); background: linear-gradient( 180deg, transparent 0%, rgba(5, 5, 8, 0.55) 38%, rgba(5, 5, 8, 0.88) 100% ); font-family: var(--jb-font-display); font-size: 0.5625rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; line-height: 1.45; color: var(--jb-tile-text, rgba(255, 255, 255, 0.95)); text-align: left; z-index: 3; transition: opacity 0.35s ease; } .jb-triptych__figure--has-hover .jb-triptych__cap { pointer-events: none; } .jb-triptych__label { display: block; max-width: 100%; white-space: pre-line; } .jb-triptych__figure--has-hover::before { content: ''; position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, 0); transition: background 0.35s ease; pointer-events: none; } .jb-triptych__figure--has-hover:hover::before, .jb-triptych__link:hover .jb-triptych__figure--has-hover::before, .jb-triptych__link:focus-within .jb-triptych__figure--has-hover::before { background: rgba(0, 0, 0, 0.5); } .jb-triptych__hover { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 3vw, 2rem); opacity: 0; transition: opacity 0.35s ease; pointer-events: none; } .jb-triptych__figure--has-hover:hover .jb-triptych__hover, .jb-triptych__link:hover .jb-triptych__hover, .jb-triptych__link:focus-within .jb-triptych__hover { opacity: 1; } .jb-triptych__hover-text { margin: 0; max-width: min(36ch, 90%); font-family: var(--jb-font-body); font-size: clamp(0.9375rem, 1.6vw, 1.0625rem); font-weight: 400; line-height: 1.45; color: var(--jb-tile-text, #fafafa); text-align: center; letter-spacing: 0.02em; white-space: pre-line; } .jb-triptych__figure--cap-hover_only .jb-triptych__cap { opacity: 0; } .jb-triptych__figure--cap-hover_only:hover .jb-triptych__cap, .jb-triptych__link:hover .jb-triptych__figure--cap-hover_only .jb-triptych__cap, .jb-triptych__link:focus-within .jb-triptych__figure--cap-hover_only .jb-triptych__cap { opacity: 1; } .jb-triptych__figure--cap-hide_on_hover:hover .jb-triptych__cap, .jb-triptych__link:hover .jb-triptych__figure--cap-hide_on_hover .jb-triptych__cap, .jb-triptych__link:focus-within .jb-triptych__figure--cap-hide_on_hover .jb-triptych__cap { opacity: 0; } .jb-triptych__figure--has-hover.is-pinned::before { background: rgba(0, 0, 0, 0.5); } .jb-triptych__figure--has-hover.is-pinned .jb-triptych__hover { opacity: 1; } .jb-triptych__figure--has-hover.is-pinned .jb-triptych__cap { opacity: 0; } .jb-triptych__figure--cap-hide_on_hover:hover .jb-triptych__cap, .jb-triptych__link:hover .jb-triptych__figure--cap-hide_on_hover .jb-triptych__cap, .jb-triptych__link:focus-within .jb-triptych__figure--cap-hide_on_hover .jb-triptych__cap { opacity: 0; } .jb-triptych__figure--has-hover:hover img, .jb-triptych__link:hover .jb-triptych__figure--has-hover img, .jb-triptych__link:focus-within .jb-triptych__figure--has-hover img { transform: scale(1.001); } .jb-triptych__figure--no-motion img, .jb-triptych__figure--no-motion:hover img, .jb-triptych__link:hover .jb-triptych__figure--no-motion img, .jb-triptych__link:focus-within .jb-triptych__figure--no-motion img { transform: none !important; } .jb-triptych__figure--no-motion.jb-triptych__figure--has-hover::before, .jb-triptych__figure--no-motion.jb-triptych__figure--has-hover:hover::before, .jb-triptych__link:hover .jb-triptych__figure--no-motion.jb-triptych__figure--has-hover::before, .jb-triptych__link:focus-within .jb-triptych__figure--no-motion.jb-triptych__figure--has-hover::before, .jb-triptych__figure--no-motion.jb-triptych__figure--has-hover.is-pinned::before { background: rgba(0, 0, 0, 0) !important; } .jb-triptych__figure--no-motion .jb-triptych__hover-text { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.85); } @media (prefers-reduced-motion: reduce) { .jb-triptych__figure img { transition: none; } .jb-triptych__link:hover .jb-triptych__figure:not(.jb-triptych__figure--has-hover) img, .jb-triptych__link:focus-within .jb-triptych__figure:not(.jb-triptych__figure--has-hover) img { transform: none; } .jb-triptych__figure--has-hover::before, .jb-triptych__hover, .jb-triptych__cap { transition: none; } } .jb-ed-section { padding: clamp(5rem, 12vw, 9rem) clamp(1.25rem, 5vw, 3rem); padding-left: clamp(1.25rem, 7vw, 7rem); border-top: 1px solid var(--jb-border); } .jb-ed-section__head { margin-bottom: 3rem; max-width: 20rem; } .jb-ed-pillars { list-style: none; margin: 0; padding: 0; max-width: 52rem; } .jb-ed-pillars li { display: grid; grid-template-columns: 1fr; gap: 0.35rem 2rem; padding: 2rem 0; border-bottom: 1px solid var(--jb-border); } @media (min-width: 720px) { .jb-ed-pillars li { grid-template-columns: 1fr auto; align-items: baseline; } } .jb-ed-pillar__link { display: inline-flex; align-items: baseline; gap: 1.25rem; color: var(--jb-text); } .jb-ed-pillar__link:hover .jb-ed-pillar__title { color: var(--jb-text-soft); } .jb-ed-pillar__n { font-family: var(--jb-font-body); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.12em; color: var(--jb-text-soft); min-width: 1.5rem; } .jb-ed-pillar__title { font-family: var(--jb-font-display); font-size: clamp(1.35rem, 2.8vw, 2.125rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; transition: color 0.2s ease; } .jb-ed-pillar__hint { font-family: var(--jb-font-body); font-size: 0.8125rem; font-weight: 300; color: var(--jb-text-soft); } @media (min-width: 720px) { .jb-ed-pillar__hint { text-align: right; } } .jb-ed-quotes { --jb-quote-line: #d7dbe3; --jb-quote-text: #e5e7eb; --jb-quote-author: #d7dbe3; --jb-quote-line-soft: rgba(215, 219, 227, 0.38); padding: clamp(5rem, 12vw, 10rem) clamp(1.25rem, 5vw, 3rem); padding-left: clamp(1.25rem, 7vw, 7rem); } .jb-ed-quotes__topline { display: flex; align-items: center; gap: 1.1rem; margin-bottom: clamp(1.4rem, 3.8vw, 2.6rem); } .jb-ed-quotes__glyph { font-size: clamp(3rem, 7vw, 5rem); line-height: 0.8; color: var(--jb-quote-line); font-family: Georgia, serif; } .jb-ed-quotes__line { height: 1px; flex: 1; background: var(--jb-quote-line-soft); } .jb-ed-quotes__carousel { max-width: min(56rem, 100%); margin-inline: auto; } .jb-ed-quotes__viewport, .jb-ed-quotes__track { min-width: 0; } .jb-ed-quotes__viewport { width: 100%; overflow: hidden; touch-action: pan-y; } .jb-ed-quotes__track { display: flex; transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: transform; } /* * Cada slide debe ocupar el 100% del .jb-ed-quotes__viewport (sin max-width aquí). * Si el artículo fuera más estrecho que el viewport, el JS seguiría moviendo el track * por el ancho completo del viewport y se vería el siguiente slide a la derecha. */ .jb-ed-quotes__slide { display: grid; gap: clamp(1.25rem, 4vw, 2rem); align-items: start; box-sizing: border-box; flex: 0 0 100%; width: 100%; min-width: 100%; max-width: none; } .jb-ed-quotes__slide[hidden] { display: none !important; } .jb-ed-quote { margin: 0; border: none; padding: 0; } .jb-ed-quote p { margin: 0; color: var(--jb-quote-text); font-family: var(--jb-font-body); font-weight: 300; line-height: 1.35; font-size: clamp(0.98rem, 1.75vw, 1.48rem); letter-spacing: -0.01em; max-width: 32ch; } .jb-ed-quote--lead p { padding-left: 0; border-left: none; } .jb-ed-quotes--with-rule .jb-ed-quote--lead p { padding-left: 1.1rem; border-left: 1px solid var(--jb-quote-line-soft); } .jb-ed-quotes__author { display: flex; flex-direction: column; align-items: center; gap: 0.95rem; } .jb-ed-quotes__media { margin: 0; width: clamp(7.5rem, 14vw, 10.5rem); height: clamp(7.5rem, 14vw, 10.5rem); overflow: hidden; } .jb-ed-quotes__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .jb-ed-quotes__media--round { border-radius: 50%; } .jb-ed-quotes__media--square { border-radius: 0.45rem; } .jb-ed-quotes__caption { display: grid; gap: 0.2rem; text-align: center; width: 100%; max-width: 100%; } .jb-ed-quotes__author-name { color: var(--jb-quote-author); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; display: block; white-space: normal; overflow-wrap: anywhere; } .jb-ed-quotes__author-meta { color: color-mix(in oklab, var(--jb-quote-author) 70%, #9ca3af); font-size: 0.76rem; letter-spacing: 0.05em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 0.45rem; white-space: normal; overflow-wrap: anywhere; } .jb-ed-quotes__author-meta--link { text-decoration: none; color: color-mix(in oklab, var(--jb-quote-author) 70%, #9ca3af); transition: color 0.2s ease; } .jb-ed-quotes__author-meta-arrow { opacity: 0.82; transition: transform 0.2s ease; } .jb-ed-quotes__arrow { appearance: none; -webkit-appearance: none; border: none; border-radius: 999px; background: transparent; color: color-mix(in oklab, var(--jb-quote-line) 66%, #d1d5db); font-size: 1.15rem; font-family: inherit; font-weight: 400; line-height: 1; cursor: pointer; padding: 0; width: 2.25rem; height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; position: relative; transition: color 0.2s ease, transform 0.2s ease; } .jb-ed-quotes__arrow-ring { position: absolute; inset: 0; border-radius: 999px; background: rgba(8, 8, 12, 0.32); border: 1px solid color-mix(in oklab, var(--jb-quote-line) 52%, transparent); transition: background 0.2s ease, border-color 0.2s ease; } .jb-ed-quotes__arrow-icon { position: relative; z-index: 1; display: block; } .jb-ed-quotes__arrow:hover, .jb-ed-quotes__arrow:focus-visible { color: var(--jb-quote-text); } .jb-ed-quotes__arrow:hover .jb-ed-quotes__arrow-ring, .jb-ed-quotes__arrow:focus-visible .jb-ed-quotes__arrow-ring { background: rgba(8, 8, 12, 0.54); border-color: color-mix(in oklab, var(--jb-quote-line) 65%, transparent); } .jb-ed-quotes__arrow:active { transform: scale(0.96); } .jb-ed-quotes__controls { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: clamp(5rem, 9vh, 6.8rem); width: min(56rem, 100%); margin-inline: auto; touch-action: pan-y; } .jb-ed-quotes__dots { display: inline-flex; align-items: center; gap: 0.5rem; } .jb-ed-quotes__dot { appearance: none; -webkit-appearance: none; width: 0.6rem; height: 0.6rem; border-radius: 50%; border: none; padding: 0; background: color-mix(in oklab, var(--jb-quote-line) 28%, #2d313a); cursor: pointer; transition: transform 0.2s ease, background 0.2s ease; } .jb-ed-quotes__dot.is-active { background: color-mix(in oklab, var(--jb-quote-line) 78%, #f4f4f5); transform: scale(1.15); } /* —— Topics: texto izquierda / imagen derecha (DOM: copy → visual), mismo ancho que carrusel Quotes —— */ .jb-ed-quotes.jb-ed-topics { padding-left: clamp(1.25rem, 5vw, 3rem); padding-right: clamp(1.25rem, 5vw, 3rem); } .jb-ed-quotes.jb-ed-topics .jb-ed-quotes__carousel, .jb-ed-quotes.jb-ed-topics .jb-ed-quotes__controls { max-width: min(56rem, 100%); width: 100%; } .jb-ed-quotes.jb-ed-topics .jb-ed-quotes__controls { margin-inline: auto; } .jb-ed-quotes.jb-ed-topics .jb-ed-quotes__slide { align-items: center; } .jb-ed-topics__slide-shell { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; width: 100%; max-width: min(56rem, 100%); margin-inline: auto; box-sizing: border-box; } @media (min-width: 900px) { .jb-ed-topics__slide-shell { grid-template-columns: minmax(0, 0.54fr) minmax(0, 0.46fr); } /* Opción ACF “imagen izquierda”: invertir columnas */ .jb-ed-topics--image-left .jb-ed-topics__visual { order: 1; } .jb-ed-topics--image-left .jb-ed-topics__copy { order: 2; } } .jb-ed-topics__visual { min-width: 0; display: flex; align-items: center; } .jb-ed-topics--shape-circle .jb-ed-topics__visual { justify-content: center; } .jb-ed-topics__copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(0.85rem, 2vw, 1.15rem); text-align: left; } .jb-ed-topics__figure { margin: 0; } .jb-ed-topics__figure--landscape { width: 100%; border-radius: 0.45rem; overflow: hidden; aspect-ratio: 4 / 3; } .jb-ed-topics__figure--landscape img { display: block; width: 100%; height: 100%; object-fit: cover; } .jb-ed-topics__eyebrow { margin: 0; font-family: var(--jb-font-body); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--jb-text-soft); } .jb-ed-topics__text { margin: 0; font-family: var(--jb-font-body); font-weight: 300; line-height: 1.42; font-size: clamp(0.82rem, 1.05vw, 0.98rem); letter-spacing: -0.008em; color: var(--jb-quote-text); text-align: left; max-width: none; width: 100%; } @media (max-width: 899px) { .jb-ed-quotes { padding-left: clamp(1.25rem, 7vw, 2rem); } .jb-ed-quotes.jb-ed-topics { padding-left: clamp(1.25rem, 5vw, 2rem); padding-right: clamp(1.25rem, 5vw, 2rem); } .jb-ed-quotes.jb-ed-topics .jb-ed-quotes__slide { justify-items: stretch; } .jb-ed-topics__slide-shell { grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 2rem); } .jb-ed-topics__visual { order: -1; width: 100%; } .jb-ed-quotes__slide { justify-items: center; gap: 2rem; } .jb-ed-quote { width: 100%; } .jb-ed-quote p { font-size: clamp(0.92rem, 3.95vw, 1.1rem); line-height: 1.4; max-width: 100%; } .jb-ed-topics__text { font-size: clamp(0.84rem, 3.2vw, 0.96rem); line-height: 1.42; max-width: 100%; } .jb-ed-quotes__author-name { font-size: 0.72rem; } .jb-ed-quotes__author-meta { font-size: 0.65rem; } .jb-ed-quotes__controls { gap: 0.85rem; margin-top: clamp(5.2rem, 12vw, 6.4rem); } .jb-ed-quotes__author { margin-top: 0.7rem; gap: 1.2rem; } .jb-ed-quotes__media { width: clamp(7.25rem, 26vw, 8.6rem); height: clamp(7.25rem, 26vw, 8.6rem); } .jb-ed-quotes__author-name, .jb-ed-quotes__author-meta { text-align: center; } } @media (min-width: 900px) { .jb-ed-quotes__slide { grid-template-columns: minmax(0, 1fr) minmax(14.25rem, 16.75rem); gap: clamp(1.8rem, 3.2vw, 3.3rem); } .jb-ed-quotes__author { align-items: flex-start; padding-left: clamp(1.25rem, 3vw, 2rem); border-left: none; } .jb-ed-quotes--with-rule .jb-ed-quotes__author { border-left: 1px solid var(--jb-quote-line-soft); } .jb-ed-quotes__caption { text-align: left; } .jb-ed-quotes__controls { justify-content: center; } .jb-ed-quotes__author-meta--link:hover, .jb-ed-quotes__author-meta--link:focus-visible { color: var(--jb-quote-author); } .jb-ed-quotes__author-meta--link:hover .jb-ed-quotes__author-meta-arrow, .jb-ed-quotes__author-meta--link:focus-visible .jb-ed-quotes__author-meta-arrow { transform: translate3d(1px, -1px, 0); } /* Topics: no usar la rejilla quote+autor; la slide es una sola celda (.jb-ed-topics__slide-shell hace las 2 columnas). */ .jb-ed-quotes.jb-ed-topics .jb-ed-quotes__slide { grid-template-columns: minmax(0, 1fr); gap: 0; align-items: stretch; } } .jb-ed-close { padding: clamp(5rem, 12vw, 10rem) clamp(1.25rem, 7vw, 7rem); padding-bottom: clamp(6rem, 18vh, 12rem); padding-bottom: clamp(6rem, 18svh, 12rem); } .jb-module-contact { border-top: 1px solid var(--jb-border); } /* --- Contacto: sin marco exterior; 1–2 columnas; tarjetas “flotantes”; tono oscuro/claro --- */ .jb-module-contact--columns { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } .jb-module-contact--columns .jb-contact-layout { margin-top: 1.25rem; } .jb-contact-layout { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } .jb-contact-grid { display: grid; width: 100%; align-items: start; } .jb-contact-grid--1 { grid-template-columns: minmax(0, 1fr); gap: clamp(1rem, 3vw, 2rem); } /* * Dos columnas: 50 % / 50 %; contenido centrado en su mitad (canales y formulario). * Fila 1: «CONTACTO» en la mitad izquierda; fila 2: canales | formulario alineados arriba. */ .jb-contact-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: clamp(1.5rem, 4vw, 3rem); row-gap: 1.5rem; } .jb-contact-grid--2 .jb-contact-grid__label { grid-column: 1; grid-row: 1; margin: 0; align-self: start; justify-self: center; width: 100%; max-width: min(22rem, 100%); text-align: left; box-sizing: border-box; } .jb-contact-grid--2 .jb-contact-grid__top-spacer { grid-column: 2; grid-row: 1; min-height: 0; pointer-events: none; } .jb-contact-grid--2 .jb-contact-grid__col[data-jb-contact-col='1'] { grid-column: 1; grid-row: 2; align-self: start; align-items: center; gap: 1.75rem; } .jb-contact-grid--2 .jb-contact-grid__col[data-jb-contact-col='1'] > * { width: min(22rem, 100%); max-width: min(22rem, 100%); align-self: center; } .jb-contact-grid--2 .jb-contact-grid__col[data-jb-contact-col='2'] { grid-column: 2; grid-row: 2; align-self: start; align-items: center; width: 100%; min-width: 0; } .jb-contact-grid--2 .jb-contact-grid__col[data-jb-contact-col='2'] > * { width: min(34rem, 100%); max-width: min(34rem, 100%); align-self: center; } .jb-contact-grid__col { min-width: 0; width: 100%; display: flex; flex-direction: column; gap: 0.65rem; } .jb-contact-stack__item { margin: 0; } .jb-contact-stack__item--form { margin-top: 0; } .jb-contact-card { margin: 0; } .jb-contact-card__panel { display: grid; grid-template-columns: auto 1fr; column-gap: 0.85rem; row-gap: 0.35rem; align-items: start; padding: 0.65rem 0.15rem 0.65rem 0; border: 1px solid transparent; border-radius: 10px; background: transparent; transition: border-color 0.18s ease, background 0.18s ease; } .jb-module-contact .jb-contact-card__panel { align-items: center; } .jb-contact-card__kicker, .jb-contact-card__value, .jb-contact-card__cta { grid-column: 2; } .jb-module-contact--tone-dark .jb-contact-card--channel:hover .jb-contact-card__panel, .jb-module-contact--tone-dark .jb-contact-card--channel:focus-within .jb-contact-card__panel { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.08); } .jb-module-contact--tone-light .jb-contact-card--channel:hover .jb-contact-card__panel, .jb-module-contact--tone-light .jb-contact-card--channel:focus-within .jb-contact-card__panel { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.08); } .jb-contact-card__icon { grid-row: 1 / -1; align-self: start; margin-top: 0.05rem; width: 2.5rem; height: 2.5rem; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--jb-border); border-radius: 999px; font-size: 0.68rem; font-weight: 600; color: var(--jb-text-soft); background: transparent; } .jb-module-contact--tone-light .jb-contact-card__icon { border-color: rgba(0, 0, 0, 0.12); color: #525252; } .jb-module-contact .jb-contact-card__icon { align-self: center; margin-top: 0; } .jb-contact-card__kicker { margin: 0; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--jb-text-soft); line-height: 1.2; } .jb-contact-card__value { margin: 0; font-size: 0.88rem; line-height: 1.4; color: var(--jb-text); word-break: break-word; } .jb-contact-card__value-link { text-decoration: none; } .jb-contact-card__cta { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.15rem; padding: 0.4rem 0.75rem; border: 1px solid var(--jb-border); border-radius: 8px; background: var(--jb-surface-soft); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.04em; color: var(--jb-text); text-decoration: none; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; } .jb-module-contact .jb-contact-card__cta { margin-top: 0.1rem; padding: 0.28rem 0.5rem; border-radius: 6px; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.06em; gap: 0.25rem; width: fit-content; max-width: 100%; } .jb-contact-card__cta:hover, .jb-contact-card__cta:focus-visible { border-color: var(--jb-text-soft); color: var(--jb-text-soft); background: var(--jb-surface); outline: none; } .jb-module-contact--tone-light .jb-contact-card__cta { border-color: #d4d4d4; background: #e5e5e5; color: #0a0a0a; } .jb-module-contact--tone-light .jb-contact-card__cta:hover, .jb-module-contact--tone-light .jb-contact-card__cta:focus-visible { border-color: #a3a3a3; color: #0a0a0a; background: #f5f5f5; } .jb-module-contact--tone-light .jb-ed-label { color: #525252; } .jb-module-contact--tone-light .jb-contact-card__kicker { color: #737373; } .jb-module-contact--tone-light .jb-contact-card__value { color: #171717; } .jb-module-contact--tone-light .jb-enq__head-kicker { color: #737373; } .jb-module-contact--tone-light .jb-enq__head-title { color: #0a0a0a; } .jb-module-contact--tone-light .jb-enq__head { border-bottom-color: #e5e5e5; } .jb-module-contact--tone-light .jb-enq__notice { color: #525252; } .jb-module-contact--tone-light .jb-contact-interactive__field label, .jb-module-contact--tone-light .jb-enq label { color: #525252; } .jb-module-contact--tone-light .jb-contact-interactive__field input, .jb-module-contact--tone-light .jb-contact-interactive__field textarea, .jb-module-contact--tone-light .jb-enq input, .jb-module-contact--tone-light .jb-enq textarea { background: #fff; border-color: #d4d4d4; color: #0a0a0a; } .jb-module-contact--tone-light .jb-enq input:focus, .jb-module-contact--tone-light .jb-enq textarea:focus, .jb-module-contact--tone-light .jb-contact-interactive__field input:focus, .jb-module-contact--tone-light .jb-contact-interactive__field textarea:focus { border-color: #737373; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); } .jb-module-contact--tone-light .jb-contact-interactive__submit, .jb-module-contact--tone-light .jb-enq__submit { background: #0a0a0a; color: #fafafa; } .jb-module-contact--tone-light .jb-contact-interactive__submit:hover:not(:disabled), .jb-module-contact--tone-light .jb-contact-interactive__submit:focus-visible:not(:disabled), .jb-module-contact--tone-light .jb-enq__submit:hover:not(:disabled), .jb-module-contact--tone-light .jb-enq__submit:focus-visible:not(:disabled) { filter: brightness(1.12); background: #171717; color: #fafafa; } .jb-contact-row__cta { font-size: 0.72rem; color: var(--jb-text-soft); background: var(--jb-surface-soft); border: 1px solid var(--jb-border); border-radius: 6px; padding: 0.4rem 0.85rem; cursor: pointer; font-family: inherit; transition: border-color 0.2s ease, color 0.2s ease; } .jb-contact-row__cta:hover, .jb-contact-row__cta:focus-visible { border-color: var(--jb-text-soft); color: var(--jb-text); outline: none; } a.jb-contact-row__cta--link { display: inline-block; text-decoration: none; } .jb-contact-row__form-title { margin: 0 0 0.35rem; font-size: 0.65rem; letter-spacing: 0.16em; color: var(--jb-text-soft); } .jb-contact-row__form-lede { margin: 0 0 1rem; font-size: 0.78rem; color: var(--jb-text-soft); line-height: 1.45; } .jb-contact-row__embed, .jb-contact-row__iframe-wrap { max-width: 100%; } .jb-contact-row__iframe { display: block; width: 100%; min-height: min(14rem, 42vh); border: 1px solid var(--jb-border); border-radius: 8px; background: var(--jb-bg); } /* Campos formulario (tema + plugin JB Enquiry) */ .jb-enq__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem 0.85rem; margin-bottom: 0.25rem; } .jb-enq__field--full { grid-column: 1 / -1; } /* * Formulario JB Enquiry (.jb-enq--pro): alineación tipo referencia * (NOMBRE | EMAIL, TELÉFONO solo columna izquierda, ASUNTO / RESUMEN a ancho completo). */ .jb-enquiry-form.jb-enq--pro .jb-enq__fields { column-gap: 1rem; row-gap: 0.75rem; } .jb-enquiry-form.jb-enq--pro .jb-enquiry-form__field--name { grid-column: 1; } .jb-enquiry-form.jb-enq--pro .jb-enquiry-form__field--email { grid-column: 2; } .jb-enquiry-form.jb-enq--pro .jb-enquiry-form__field--phone { grid-column: 1; } .jb-enquiry-form.jb-enq--pro .jb-enquiry-form__field--company, .jb-enquiry-form.jb-enq--pro .jb-enquiry-form__field--website { grid-column: 1 / -1; } .jb-enquiry-form.jb-enq--pro .jb-enquiry-form__math { margin-top: 0.2rem; } .jb-enquiry-form.jb-enq--pro .jb-enquiry-form__submit { margin-top: 0.7rem; border-radius: 8px; letter-spacing: 0.1em; } .jb-enquiry-form.jb-enq--pro .jb-enquiry-form__field--message textarea { min-height: 7.5rem; resize: vertical; } /* Formulario en módulo contacto: más aire vertical (evita filas “achatadas”). */ .jb-module-contact .jb-enquiry-form.jb-enq--pro .jb-enq__fields { row-gap: 1rem; } .jb-module-contact .jb-enquiry-form.jb-enq--pro .jb-contact-interactive__field input, .jb-module-contact .jb-enquiry-form.jb-enq--pro .jb-contact-interactive__field textarea { padding: 0.68rem 0.75rem; } .jb-module-contact .jb-enquiry-form.jb-enq--pro .jb-enquiry-form__math { margin-top: 0.35rem; margin-bottom: 0.15rem; } .jb-module-contact .jb-enquiry-form.jb-enq--pro .jb-enquiry-form__math input { max-width: min(9rem, 42%); } .jb-module-contact .jb-enquiry-form.jb-enq--pro .jb-contact-interactive__field label, .jb-module-contact .jb-enquiry-form.jb-enq--pro .jb-enq label { margin-bottom: 0.45rem; } .jb-contact-interactive__form, .jb-enq { max-width: 100%; } .jb-contact-interactive__field label, .jb-enq label { display: block; font-size: 0.62rem; letter-spacing: 0.1em; color: var(--jb-text-soft); margin-bottom: 0.35rem; } .jb-contact-interactive__field input, .jb-contact-interactive__field textarea, .jb-enq input, .jb-enq textarea { width: 100%; box-sizing: border-box; background: var(--jb-bg); border: 1px solid var(--jb-border); border-radius: 6px; color: var(--jb-text); font: inherit; font-size: 0.85rem; padding: 0.55rem 0.65rem; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .jb-module-contact .jb-contact-interactive__field input:focus, .jb-module-contact .jb-contact-interactive__field textarea:focus, .jb-module-contact .jb-enq input:focus, .jb-module-contact .jb-enq textarea:focus { border-color: var(--jb-text-soft); box-shadow: 0 0 0 1px color-mix(in srgb, var(--jb-border) 90%, transparent); } .jb-contact-interactive__submit, .jb-enq__submit { width: 100%; margin-top: 0.5rem; padding: 0.65rem 0.85rem; border: none; border-radius: 6px; background: var(--jb-accent); color: var(--jb-bg); font: inherit; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; cursor: pointer; transition: filter 0.2s ease, opacity 0.2s ease; } .jb-contact-interactive__submit:hover:not(:disabled), .jb-contact-interactive__submit:focus-visible:not(:disabled), .jb-enq__submit:hover:not(:disabled), .jb-enq__submit:focus-visible:not(:disabled) { filter: brightness(1.06); outline: none; } .jb-contact-interactive__submit:disabled, .jb-enq__submit:disabled { opacity: 0.45; cursor: not-allowed; } .jb-contact-interactive__form-hint { margin: 0.65rem 0 0; font-size: 0.68rem; color: var(--jb-text-soft); line-height: 1.4; } @media (max-width: 720px) { .jb-contact-grid--2 { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 1.35rem; column-gap: 0; } .jb-contact-grid--2 .jb-contact-grid__label { grid-column: 1; grid-row: auto; justify-self: start; max-width: none; width: 100%; } .jb-contact-grid--2 .jb-contact-grid__top-spacer { display: none; } .jb-contact-grid--2 .jb-contact-grid__col[data-jb-contact-col='1'], .jb-contact-grid--2 .jb-contact-grid__col[data-jb-contact-col='2'] { grid-column: 1; grid-row: auto; } .jb-contact-grid--2 .jb-contact-grid__col[data-jb-contact-col='1'] { gap: 1.25rem; } .jb-contact-grid--2 .jb-contact-grid__col[data-jb-contact-col='1'] > *, .jb-contact-grid--2 .jb-contact-grid__col[data-jb-contact-col='2'] > * { width: 100%; max-width: none; align-self: stretch; } .jb-enq__fields { grid-template-columns: 1fr; } .jb-enquiry-form.jb-enq--pro .jb-enquiry-form__field--name, .jb-enquiry-form.jb-enq--pro .jb-enquiry-form__field--email, .jb-enquiry-form.jb-enq--pro .jb-enquiry-form__field--phone, .jb-enquiry-form.jb-enq--pro .jb-enquiry-form__field--company, .jb-enquiry-form.jb-enq--pro .jb-enquiry-form__field--website { grid-column: auto; } .jb-module-contact .jb-enquiry-form.jb-enq--pro .jb-enquiry-form__math input { max-width: 10rem; } } .jb-ed-mail { display: inline-block; margin-top: 0.5rem; font-family: var(--jb-font-display); font-size: clamp(1.25rem, 3.5vw, 2.75rem); font-weight: 600; letter-spacing: -0.03em; color: var(--jb-text); border-bottom: 1px solid transparent; transition: border-color 0.2s ease, color 0.2s ease; } .jb-ed-mail:hover { border-bottom-color: var(--jb-text-soft); color: var(--jb-text-soft); } .jb-contact-links { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.8rem; } .jb-contact-link { display: inline-flex; align-items: center; gap: 0.75rem; color: var(--jb-text); font-size: clamp(1rem, 2vw, 1.25rem); letter-spacing: 0.01em; } .jb-contact-link__icon { width: 1.6rem; height: 1.6rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--jb-border); border-radius: 999px; font-size: 0.72rem; color: var(--jb-text-soft); } .jb-contact-link:hover .jb-contact-link__icon { border-color: var(--jb-text-soft); } .jb-lightbox { position: fixed; inset: 0; z-index: 150; padding: 0; } .jb-lightbox[hidden] { display: none !important; } .jb-lightbox__backdrop { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 42%, rgba(18, 18, 26, 0.12) 0%, rgba(2, 2, 6, 0.88) 70%), rgba(0, 0, 0, 0.45); backdrop-filter: blur(22px) saturate(1.1); -webkit-backdrop-filter: blur(22px) saturate(1.1); } @media (max-width: 1023px) { .jb-lightbox__backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; background: radial-gradient(ellipse at 50% 42%, rgba(18, 18, 26, 0.12) 0%, rgba(2, 2, 6, 0.92) 70%), rgba(0, 0, 0, 0.68); } } .jb-lightbox__shell { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: max(0.75rem, env(safe-area-inset-top, 0px)) max(0.75rem, env(safe-area-inset-right, 0px)) max(1rem, env(safe-area-inset-bottom, 0px)) max(0.75rem, env(safe-area-inset-left, 0px)); pointer-events: none; } .jb-lightbox__stage-wrap { position: relative; width: fit-content; max-width: min(96vw, 1120px); margin: 0 auto; pointer-events: auto; } .jb-lightbox__nav { position: absolute; top: 50%; z-index: 4; transform: translateY(-50%); width: 2.75rem; height: 2.75rem; margin: 0; padding: 0; border: 0; border-radius: 999px; background: rgba(8, 8, 12, 0.55); color: rgba(255, 255, 255, 0.92); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; line-height: 0; transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease; } .jb-lightbox__nav:hover, .jb-lightbox__nav:focus-visible { background: rgba(8, 8, 12, 0.82); color: #fff; outline: none; } .jb-lightbox__nav[hidden] { display: none !important; } .jb-lightbox__nav--prev { left: clamp(0.15rem, 1.5vw, 0.65rem); } .jb-lightbox__nav--next { right: clamp(0.15rem, 1.5vw, 0.65rem); } .jb-lightbox__nav-icon { font-size: 1.65rem; font-weight: 200; line-height: 1; margin-top: -0.08em; } @media (max-width: 1023px) { .jb-lightbox__nav { background: rgba(8, 8, 12, 0.78); } } .jb-lightbox__stage { max-width: 100%; max-height: min(78vh, 860px); max-height: min(78svh, 860px); display: flex; align-items: center; justify-content: center; } .jb-lightbox__image { display: block; max-width: 100%; max-height: min(78vh, 860px); max-height: min(78svh, 860px); width: auto; height: auto; object-fit: contain; border-radius: 3px; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04); } .jb-lightbox__close { position: absolute; top: 0.25rem; right: 0.25rem; z-index: 3; width: 2.25rem; height: 2.25rem; margin: 0; padding: 0; border: 0; background: transparent; color: rgba(255, 255, 255, 0.94); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; line-height: 0; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.75)); transition: color 0.2s ease, transform 0.2s ease, opacity 0.2s ease; } .jb-lightbox__close:hover { color: #fff; opacity: 1; transform: scale(1.05); } .jb-lightbox__close-x { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 1.75rem; font-weight: 200; line-height: 1; } .jb-lightbox__caption { pointer-events: auto; margin: 0.65rem 0 0; max-width: min(42rem, 92vw); padding: 0 0.75rem; color: rgba(245, 245, 245, 0.78); text-align: center; font-size: 0.8125rem; letter-spacing: 0.06em; line-height: 1.45; white-space: pre-line; } @media (max-width: 680px) { .jb-lightbox--image-grid .jb-lightbox__stage-wrap { width: min(92vw, 430px); max-width: min(92vw, 430px); touch-action: pan-x pinch-zoom; } .jb-lightbox--image-grid .jb-lightbox__stage { width: 100%; max-height: none; } .jb-lightbox--image-grid .jb-lightbox__image { width: 100%; max-width: 100%; aspect-ratio: 9 / 10; height: auto; max-height: none; object-fit: cover; object-position: center; } } body.jb-lightbox-open { overflow: hidden; position: fixed; inset: 0; top: var(--jb-scroll-lock-top, 0); width: 100%; overscroll-behavior: none; } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .jb-lightbox__backdrop { background: rgba(4, 4, 8, 0.94); } } @media (max-width: 900px) { .jb-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 680px) { .jb-grid-3 { grid-template-columns: 1fr; } .jb-hero { min-height: unset; } .jb-hero-copy { padding-top: 3.5rem; } } /* —— ACF page modules (flexible stack) —— */ .jb-page-modules.jb-stack, .jb-home-modules.jb-stack { display: flex; flex-direction: column; gap: 0; align-items: stretch; width: 100%; max-width: none; } /* * Los márgenes superior/inferior vienen del style="" de cada módulo ACF. * Un margin en la
deja ver el color del body fuera del fondo del bloque → “franja”. * margin-block con !important gana al atributo style sin !important (no tocamos margin-inline: bleed). */ .jb-page-modules.jb-stack > section, .jb-home-modules.jb-stack > section { margin-block-start: 0 !important; margin-block-end: 0 !important; } /* Primer hero en portada/páginas: pegado al header (sin franja superior). */ .jb-stack > .jb-cine-hero:first-child { margin-top: 0 !important; } .jb-module--richtext { padding-block: 0; } /* .jb-prose tiene padding superior por defecto; en módulos ACF parece “margen” entre secciones. */ .jb-module--richtext .jb-container > .jb-prose { padding-top: 0; padding-bottom: 0; } /* Refuerzo cuando ACF marca margen 0 (inline + !important por si otro regla pisa el margin). */ .jb-module--flush-mt { margin-top: 0 !important; } .jb-module--flush-mb { margin-bottom: 0 !important; } .jb-service-cards { padding: clamp(4rem, 10vw, 7.5rem) 0; border-top: 1px solid var(--jb-border); } .jb-service-cards__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .jb-service-cards__label, .jb-service-cards__count { margin: 0; font-family: var(--jb-font-display); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--jb-text-soft); } .jb-service-cards__title { margin: 0; font-family: var(--jb-font-display); font-size: clamp(1.45rem, 3.4vw, 2.45rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.12; color: var(--jb-text); max-width: 20ch; } .jb-service-cards__intro { margin: 0.95rem 0 2rem; max-width: 56ch; font-size: 0.95rem; color: var(--jb-text-soft); line-height: 1.65; } .jb-service-cards__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; border: 1px solid var(--jb-border); background: var(--jb-border); overflow: hidden; } .jb-service-cards__item { position: relative; display: flex; flex-direction: column; gap: 0.85rem; min-height: 260px; padding: 1.4rem 1.15rem 1.2rem; background: color-mix(in srgb, var(--jb-bg) 94%, var(--jb-surface) 6%); color: var(--jb-text); text-decoration: none; transition: background 0.2s ease; } .jb-service-cards__item:hover, .jb-service-cards__item:focus-visible { background: color-mix(in srgb, var(--jb-surface-soft) 80%, var(--jb-bg) 20%); } .jb-service-cards__item:focus-visible { outline: 2px solid var(--jb-text); outline-offset: -2px; } .jb-service-cards__kicker { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--jb-text-soft); } .jb-service-cards__item-title { margin: 0; font-family: var(--jb-font-display); font-size: clamp(1rem, 1.7vw, 1.2rem); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; } .jb-service-cards__desc { margin: 0; color: var(--jb-text-soft); font-size: 0.85rem; line-height: 1.6; flex: 1; } .jb-service-cards__tag { align-self: flex-start; display: inline-flex; align-items: center; min-height: 1.7rem; padding: 0.2rem 0.7rem; border: 1px solid var(--jb-border); border-radius: 999px; font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--jb-text-soft); } .jb-service-cards__arrow { position: absolute; top: 1.05rem; right: 1rem; color: var(--jb-text-soft); opacity: 0; transition: opacity 0.2s ease; } .jb-service-cards__item:hover .jb-service-cards__arrow, .jb-service-cards__item:focus-visible .jb-service-cards__arrow { opacity: 1; } @media (max-width: 720px) { .jb-service-cards__row { grid-auto-flow: column; grid-auto-columns: minmax(80vw, 1fr); grid-template-columns: none; overflow-x: auto; scrollbar-width: thin; } } /* —— Home: Texto + imagen —— */ .jb-split-panel__inner { padding: clamp(4rem, 12vw, 9rem) 0; } .jb-split-panel__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; } @media (min-width: 900px) { .jb-split-panel--desktop-normal .jb-split-panel__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .jb-split-panel--desktop-reverse .jb-split-panel__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .jb-split-panel--desktop-reverse .jb-split-panel__a { order: 2; } .jb-split-panel--desktop-reverse .jb-split-panel__b { order: 1; } .jb-split-panel--desktop-reverse .jb-split-panel__grid > .jb-split-panel__a:only-child { grid-column: 2; justify-self: end; width: 100%; max-width: 40rem; } .jb-split-panel--desktop-reverse .jb-split-panel__grid > .jb-split-panel__b:only-child { grid-column: 1; justify-self: start; width: 100%; max-width: 40rem; } .jb-split-panel--desktop-normal .jb-split-panel__grid > .jb-split-panel__slot:only-child { grid-column: 1 / -1; max-width: 44rem; } } .jb-split-panel__figure { margin: 0; } .jb-split-panel__figure img { display: block; width: 100%; height: auto; border-radius: 2px; } .jb-split-panel__kicker { margin: 0 0 0.5rem; font-family: var(--jb-font-body); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--jb-split-text-color, var(--jb-text-soft)); } .jb-split-panel__slot-title { margin: 0 0 1rem; font-family: var(--jb-font-display); font-size: clamp(1.25rem, 2.2vw, 1.75rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--jb-split-text-color, var(--jb-text)); } .jb-split-panel__slot-title--media { display: block; margin-bottom: 0.75rem; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--jb-split-text-color, var(--jb-text-soft)); } .jb-split-panel__figcaption--top { margin-bottom: 0.75rem; } .jb-split-panel__figcaption--top .jb-split-panel__kicker { display: block; margin-bottom: 0.35rem; } .jb-split-panel__slot--empty { min-height: 0; } @media (max-width: 899px) { .jb-split-panel__grid > .jb-split-panel__slot:only-child { width: 100%; } .jb-split-panel__grid { display: flex; flex-direction: column; gap: clamp(1.5rem, 4vw, 2.5rem); } .jb-split-panel--m-ba .jb-split-panel__grid { flex-direction: column-reverse; } .jb-split-panel--m-hide_a .jb-split-panel__a { display: none; } .jb-split-panel--m-hide_b .jb-split-panel__b { display: none; } } .jb-triptych__link--static { cursor: default; text-decoration: none; color: inherit; } /* Galería en parrilla (Instagram): rejilla 3 columnas, celdas pegadas, fila incompleta alineada al inicio. */ .jb-image-grid .jb-triptych__grid { gap: 1px; background: var(--jb-bg, var(--jb-surface)); justify-items: stretch; } /* Parrilla a ancho viewport (como galería carrusel); los márgenes ACF siguen en la
. */ .jb-image-grid--bleed { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); position: relative; box-sizing: border-box; } @media (max-width: 1023px) { .jb-image-grid.jb-triptych--cols-3 .jb-triptych__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .jb-image-grid .jb-triptych__figure { aspect-ratio: 4 / 5; max-height: none; } } @media (min-width: 1024px) { .jb-image-grid.jb-triptych--cols-3 .jb-triptych__grid { justify-content: start; } } /* —— Quotes: ocultar línea vertical (borde en el párrafo lead) —— */ .jb-ed-quote.jb-ed-quote--no-rule p { border-left: none; padding-left: 0; } /* —— Galería de imágenes (módulo ACF · carrusel scroll-snap) —— */ .jb-gallery { --jb-gallery-arrow: #fafafa; display: block; width: 100%; max-width: 100%; min-width: 0; } /* * Full-bleed: el módulo a veces vive bajo flex/grid con ancho mal resuelto; 100vw + centrado * fuerza el ancho real del viewport (como el tríptico de categorías). */ .jb-gallery--bleed { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); position: relative; box-sizing: border-box; } /* Hijo de .jb-stack (flex column): sin min-width:0 el ancho colapsa al min-content de la imagen */ .jb-stack > .jb-gallery { align-self: stretch; width: 100%; max-width: none; min-width: 0; } .jb-stack > .jb-gallery.jb-gallery--bleed { width: 100vw; max-width: none; } .jb-gallery__stage { position: relative; width: 100%; min-width: 0; } .jb-gallery__viewport { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; width: 100%; min-width: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y pinch-zoom; overscroll-behavior-x: none; } .jb-gallery__viewport::-webkit-scrollbar { display: none; } .jb-gallery__slide { position: relative; width: 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; box-sizing: border-box; } .jb-gallery__media { position: relative; width: 100%; overflow: hidden; background: var(--jb-surface-soft); aspect-ratio: 2.35 / 1; /* Altura solo desde ratio + ancho: evita saltos al variar la barra de URL en móvil. */ min-height: clamp(200px, 42vw, 560px); } @media (max-width: 680px) { .jb-gallery__media { aspect-ratio: 1 / 1.12; min-height: 0; max-height: none; } } .jb-gallery__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .jb-gallery__veil { position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 185deg, rgba(5, 5, 8, 0.05) 0%, rgba(5, 5, 8, 0.25) 42%, rgba(5, 5, 8, 0.72) 100% ); } .jb-gallery__caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; box-sizing: border-box; max-width: none; width: 100%; padding: clamp(1.1rem, 3.5vw, 2.75rem) clamp(1rem, 3vw, 2.5rem); text-align: left; } .jb-gallery__label { margin: 0 0 0.55rem; font-family: var(--jb-font-display); font-size: 0.5625rem; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(250, 250, 250, 0.78); white-space: pre-line; } .jb-gallery__title { margin: 0 0 0.4rem; font-family: var(--jb-font-display); font-size: clamp(1.35rem, 3.8vw, 2.85rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.08; color: #fafafa; white-space: pre-line; } .jb-gallery__subtitle { margin: 0; font-family: var(--jb-font-body); font-size: clamp(0.8125rem, 1.5vw, 0.9375rem); font-weight: 300; letter-spacing: 0.04em; color: rgba(250, 250, 250, 0.78); white-space: pre-line; } .jb-gallery__nav { position: absolute; top: 50%; z-index: 4; transform: translateY(-50%); width: 3rem; height: 3rem; padding: 0; border: none; border-radius: 50%; cursor: pointer; color: var(--jb-gallery-arrow); background: transparent; display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease, opacity 0.2s ease; } .jb-gallery__nav--prev { left: clamp(0.45rem, 2.2vw, 1.35rem); } .jb-gallery__nav--next { right: clamp(0.45rem, 2.2vw, 1.35rem); } .jb-gallery__nav-ring { position: absolute; inset: 0; border-radius: 50%; background: rgba(8, 8, 12, 0.42); backdrop-filter: blur(10px); transition: background 0.25s ease; } @media (max-width: 1023px) { .jb-gallery__nav-ring { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(8, 8, 12, 0.78); } } .jb-gallery__nav:hover .jb-gallery__nav-ring, .jb-gallery__nav:focus-visible .jb-gallery__nav-ring { background: rgba(8, 8, 12, 0.62); } .jb-gallery__nav-icon { position: relative; z-index: 1; display: block; } .jb-gallery__nav:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.65); outline-offset: 3px; } .jb-gallery__nav:disabled { opacity: 0.3; cursor: default; transform: translateY(-50%); } .jb-gallery__nav:active:not(:disabled) { transform: translateY(-50%) scale(0.96); } @media (prefers-reduced-motion: reduce) { .jb-gallery__viewport { scroll-behavior: auto; } .jb-gallery__nav { transition: none; } }