/** * orbe-base.css — Overrides y componentes que no pueden vivir en theme.json. * * Dirección "Noche de Cuero" (ADR-009): base oscura cálida, acentos coñac/ámbar. * El motor de diseño (color, tipografía, spacing) está en theme.json; aquí solo: * cabecera sticky, componentes propios (variantes, pago, 360°, FAQ, marquee), * overrides WooCommerce para fondo oscuro y micro-interacciones sobrias. * Convención BEM modificada. Mobile-first. Sin !important salvo overrides WooCommerce. * * Reglas de contraste (verificadas en tools/verify_redesign.py): * - coñac (#A35D2A) sobre base: SOLO texto >= 24px (3.53:1). * - enlaces y focos usan ámbar (5.87:1); texto normal usa tinta o tinta-suave. */ /* ---------- Tipografía: optical sizing de Fraunces (no expresable en theme.json) ---------- */ h1, h2, h3, h4, h5, h6, .wp-block-post-title, .wp-block-site-title { font-optical-sizing: auto; } /* ---------- Guarda anti-overflow horizontal (Ola 3) ---------- Hardening preventivo: ningún hijo que se desborde puede provocar scroll horizontal (frecuente en móvil con anchos fijos o media sin contención). Se usa `clip` y NO `hidden`: `clip` no crea contenedor de scroll, así que la cabecera position:sticky sigue funcionando; con overflow-x:clip el eje Y permanece `visible` (combinación válida), por lo que el scroll vertical de la página es normal. El bloqueo de scroll del modal (.orbe-no-scroll) sigue intacto: añade overflow:hidden temporal al body. */ html, body { overflow-x: clip; } /* ---------- Fallbacks de métricas ajustadas (Ola 1.1) ---------- Eliminan el CLS del swap de fuente: el fallback se escala (size-adjust) y se ajustan sus métricas verticales para ocupar el MISMO espacio que la webfont, de modo que al cargar Inter/Fraunces no haya reflujo (las line-height del tema son unitless, así que el shift venía del ancho de avance -> distinto nº de líneas al envolver). Valores calculados con la metodología capsize (tools/ recon, ponderación por frecuencia). local() múltiple por cobertura (Windows/macOS/Android). Soporte: size-adjust y *-override en navegadores modernos; en Safari < 17 se ignoran y degrada al comportamiento previo (no empeora). */ @font-face { font-family: "Inter Fallback"; src: local("Arial"), local("Roboto"), local("Helvetica Neue"); size-adjust: 107.08%; ascent-override: 90.47%; descent-override: 22.53%; line-gap-override: 0%; } @font-face { font-family: "Fraunces Fallback"; src: local("Times New Roman"), local("Times"), local("Georgia"); size-adjust: 114.42%; ascent-override: 85.47%; descent-override: 22.29%; line-gap-override: 0%; } /* ---------- Etiqueta editorial (eyebrow) ---------- Estilo único de las etiquetas pequeñas sobre los titulares de sección (Novedades, Colecciones, Nuestra historia…). Centraliza lo que antes se repetía como estilo inline en cada patrón. El color (ámbar) y el tamaño (small) siguen viniendo de los presets via clases has-*. */ .orbe-eyebrow { font-weight: 450; letter-spacing: 0.1em; text-transform: uppercase; } /* ---------- Transición entre páginas (View Transitions API, cross-document) ---------- MPA: el navegador anima la navegación catálogo ↔ ficha sin JS. Progresivo: los navegadores sin soporte navegan de forma normal. La entrada por fade del (más abajo) queda como fallback SOLO para navegadores sin esta API. */ @view-transition { navigation: auto; } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none; } } /* ---------- Cabecera sticky ---------- */ .orbe-header { position: sticky; top: 0; z-index: 100; } /* WCAG 2.4.11: que el foco/anclas nunca queden bajo la cabecera fija. La altura real de la cabecera (logo 150 + padding spacing|20) ronda los ~4rem; 5rem deja holgura sin abrir un hueco visible al saltar a un ancla. */ html { scroll-padding-top: 5rem; } .orbe-header__wa .wp-block-button__link { white-space: nowrap; } /* Buscador del header: compacto y sobrio sobre oscuro. */ .orbe-header .wp-block-search__input { background: var(--wp--preset--color--superficie); color: var(--wp--preset--color--tinta); border: 1px solid var(--wp--preset--color--taupe); border-radius: 2px; } .orbe-header .wp-block-search__input:focus-visible { outline: 2px solid var(--wp--preset--color--ambar); outline-offset: 2px; } /* ---------- Separadores ---------- */ .wp-block-separator { opacity: 0.45; } /* ---------- Enlaces del footer ---------- */ .orbe-footer__links { list-style: none; padding-left: 0; } .orbe-footer a { color: var(--wp--preset--color--tinta-suave); text-decoration: none; /* WCAG 2.5.8: target >= 24px de alto (texto small ~21px sin padding). */ display: inline-block; padding-block: 0.3rem; min-height: 24px; } .orbe-footer a:hover, .orbe-footer a:focus-visible { color: var(--wp--preset--color--ambar); text-decoration: underline; } /* ---------- PDP: rejilla y galería sticky ---------- */ @media (min-width: 782px) { .orbe-pdp__sticky { position: sticky; top: 90px; } } /* El visor 360° es la media principal del PDP. La galería nativa de WooCommerce se mantiene en el DOM —es la fuente de fotogramas del visor (lee data-large_image)— pero se oculta para no duplicar la imagen del producto apilada bajo el 360. */ .orbe-pdp__media .wp-block-woocommerce-product-image-gallery { display: none; } /* ---------- Selector de variantes accesible ---------- */ .orbe-variants { margin-block: var(--wp--preset--spacing--30); display: grid; gap: var(--wp--preset--spacing--30); } /* Defensa wpautop: los

/
huérfanos que inserta en la salida del * shortcode se vuelven filas del grid con gap — se anulan. */ .orbe-variants > p:empty, .orbe-variants > br { display: none; } .orbe-variants__group { border: 0; margin: 0; padding: 0; } .orbe-variants__legend { font-weight: 450; letter-spacing: 0.04em; text-transform: uppercase; font-size: var(--wp--preset--font-size--small); margin-block-end: var(--wp--preset--spacing--20); } .orbe-variants__options { display: flex; flex-wrap: wrap; gap: 0.5rem; } /* La etiqueta es el objetivo táctil (>= 24x24, recomendado 44). El radio se oculta visualmente pero permanece accesible al teclado y a lectores de pantalla. */ .orbe-variants__option { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 3rem; min-height: 3rem; padding: 0 0.75rem; border: 1px solid var(--wp--preset--color--taupe); border-radius: 2px; color: var(--wp--preset--color--tinta); cursor: pointer; user-select: none; transition: background-color 200ms var(--wp--custom--ease, ease), color 200ms ease, border-color 200ms ease; } .orbe-variants__option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .orbe-variants__option:has(input:checked) { background-color: var(--wp--preset--color--tinta); border-color: var(--wp--preset--color--tinta); color: var(--wp--preset--color--base); } .orbe-variants__option:has(input:focus-visible) { outline: 2px solid var(--wp--preset--color--ambar); outline-offset: 2px; } .orbe-variants__option[aria-disabled="true"], .orbe-variants__option:has(input:disabled) { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; } .orbe-variants__help { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--tinta-suave); margin-block-start: var(--wp--preset--spacing--20); } .orbe-variants__submit { background-color: var(--wp--preset--color--tinta); color: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--tinta); border-radius: 2px; padding: 0.9rem 1.5rem; font: inherit; font-weight: 450; text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; transition: background-color 200ms ease, color 200ms ease; } .orbe-variants__submit:hover:not([disabled]), .orbe-variants__submit:focus-visible:not([disabled]) { background-color: transparent; color: var(--wp--preset--color--tinta); } .orbe-variants__submit:focus-visible { outline: 2px solid var(--wp--preset--color--ambar); outline-offset: 2px; } .orbe-variants__submit[disabled] { opacity: 0.45; cursor: not-allowed; } .orbe-variants__status { font-size: var(--wp--preset--font-size--small); min-height: 1.5em; } /* ---------- Pago (Wompi / WhatsApp) ---------- */ .orbe-pago { display: inline-block; box-sizing: border-box; /* width:100% + padding desbordaba 3rem el viewport móvil */ width: 100%; margin-top: 0.75rem; padding: 0.9rem 1.5rem; border-radius: 2px; font: inherit; font-weight: 450; text-align: center; text-decoration: none; text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; transition: background-color 200ms ease, color 200ms ease; } .orbe-pago--wompi { background-color: var(--wp--preset--color--tinta); color: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--tinta); } .orbe-pago--wompi:hover, .orbe-pago--wompi:focus-visible { background-color: transparent; color: var(--wp--preset--color--tinta); } .orbe-pago--wa { background-color: transparent; color: var(--wp--preset--color--tinta); border: 1px solid var(--wp--preset--color--taupe); } .orbe-pago--wa:hover, .orbe-pago--wa:focus-visible { border-color: var(--wp--preset--color--tinta); background-color: var(--wp--preset--color--superficie); } .orbe-pago:focus-visible { outline: 2px solid var(--wp--preset--color--ambar); outline-offset: 2px; } .orbe-pago__nota { margin-top: 0.5rem; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--tinta-suave); } /* ---------- Visor 360° ---------- */ .orbe-360__viewer { position: relative; margin: 0; background-color: var(--wp--preset--color--superficie); border: 1px solid var(--wp--preset--color--taupe); border-radius: 4px; overflow: hidden; touch-action: pan-y; } .orbe-360__frame { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; cursor: grab; } .orbe-360__viewer.is-dragging .orbe-360__frame { cursor: grabbing; } .orbe-360__controls { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem; } .orbe-360__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; font-size: 1.5rem; line-height: 1; background: transparent; border: 1px solid var(--wp--preset--color--taupe); border-radius: 2px; color: var(--wp--preset--color--tinta); cursor: pointer; } .orbe-360__btn:focus-visible { outline: 2px solid var(--wp--preset--color--ambar); outline-offset: 2px; } .orbe-360__range { flex: 1 1 auto; accent-color: var(--wp--preset--color--ambar); } .orbe-360__hint { margin: 0; padding: 0 0.75rem 0.5rem; font-size: 0.8rem; color: var(--wp--preset--color--tinta-suave); text-align: center; } /* ---------- Pop-up interstitial de carrito ---------- */ .orbe-no-scroll { overflow: hidden; } .orbe-interstitial { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; /* Velo: token --base con alfa vía color-mix (rgba = fallback). */ background: rgba(26, 23, 20, 0.7); background: color-mix(in srgb, var(--wp--preset--color--base) 70%, transparent); } .orbe-interstitial__dialog { position: relative; width: min(420px, 100%); background: var(--wp--preset--color--superficie); color: var(--wp--preset--color--tinta); border: 1px solid var(--wp--preset--color--taupe); border-radius: 4px; padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40); text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); } .orbe-interstitial__close { position: absolute; inset-block-start: 0.5rem; inset-inline-end: 0.5rem; min-width: 2.75rem; min-height: 2.75rem; font-size: 1.5rem; line-height: 1; background: transparent; border: 0; color: var(--wp--preset--color--tinta); cursor: pointer; } .orbe-interstitial__close:focus-visible, .orbe-interstitial__continue:focus-visible, .orbe-interstitial__cart:focus-visible { outline: 2px solid var(--wp--preset--color--ambar); outline-offset: 2px; } .orbe-interstitial__check { font-size: 2rem; margin: 0 0 0.25rem; color: var(--wp--preset--color--ambar); } .orbe-interstitial__title { margin: 0 0 0.25rem; font-family: var(--wp--preset--font-family--display); font-optical-sizing: auto; color: var(--wp--preset--color--tinta); } .orbe-interstitial__detail { margin: 0 0 var(--wp--preset--spacing--30); color: var(--wp--preset--color--tinta-suave); } .orbe-interstitial__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; } .orbe-interstitial__continue, .orbe-interstitial__cart { min-height: 2.75rem; padding: 0.7rem 1.25rem; border-radius: 2px; font: inherit; font-weight: 450; text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; cursor: pointer; } .orbe-interstitial__cart { background: var(--wp--preset--color--tinta); color: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--tinta); } .orbe-interstitial__continue { background: transparent; color: var(--wp--preset--color--tinta); border: 1px solid var(--wp--preset--color--taupe); } /* ---------- Recomendador de tallas ---------- */ .orbe-recommender { display: grid; gap: 0.5rem; max-width: 420px; padding: var(--wp--preset--spacing--30); border: 1px solid var(--wp--preset--color--taupe); border-radius: 4px; } .orbe-recommender__label { font-weight: 450; } .orbe-recommender__input { font: inherit; padding: 0.6rem 0.75rem; min-height: 2.75rem; border: 1px solid var(--wp--preset--color--taupe); border-radius: 2px; background: var(--wp--preset--color--superficie); color: var(--wp--preset--color--tinta); } .orbe-recommender__input:focus-visible { outline: 2px solid var(--wp--preset--color--ambar); outline-offset: 2px; } .orbe-recommender__result:not(:empty) { font-weight: 450; color: var(--wp--preset--color--ambar); } /* ---------- Ficha técnica ---------- */ .orbe-ficha__list { list-style: none; padding-left: 0; line-height: 1.9; } /* ---------- Marquee (tira de sellos) ---------- */ .orbe-marquee { background-color: var(--wp--preset--color--oxblood); color: var(--wp--preset--color--tinta); padding-block: 0.85rem; overflow: hidden; white-space: nowrap; } .orbe-marquee__track { display: inline-flex; animation: orbe-marquee-scroll 30s linear infinite; will-change: transform; } .orbe-marquee:hover .orbe-marquee__track { animation-play-state: paused; } @keyframes orbe-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .orbe-marquee__item { display: inline-flex; align-items: center; gap: 0.85rem; padding-inline: 1.25rem; font-size: var(--wp--preset--font-size--small); letter-spacing: 0.04em; text-transform: uppercase; } .orbe-marquee__sep { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.55; } @media (prefers-reduced-motion: reduce) { .orbe-marquee { white-space: normal; } .orbe-marquee__track { animation: none; flex-wrap: wrap; } } /* ---------- Colecciones (grid asimétrico) ---------- */ .orbe-collection-card { transition: transform 300ms var(--wp--custom--ease-out, cubic-bezier(0.16, 1, 0.3, 1)); } .orbe-collection-card:hover { transform: translateY(-4px); } @media (prefers-reduced-motion: reduce) { .orbe-collection-card, .orbe-collection-card:hover { transition: none; transform: none; } } /* Botón outline sobre tarjetas con foto: forzar contraste claro. */ .orbe-collection-card .wp-block-button.is-style-outline .wp-block-button__link { color: var(--wp--preset--color--tinta); border-color: var(--wp--preset--color--tinta); } .orbe-collection-card .wp-block-button.is-style-outline .wp-block-button__link:hover, .orbe-collection-card .wp-block-button.is-style-outline .wp-block-button__link:focus-visible { background-color: var(--wp--preset--color--tinta); color: var(--wp--preset--color--base); } /* Tarjetas sobre foto: scrim inferior para legibilidad (WCAG AA). La foto queda vívida arriba; el degradado da contraste al texto en la base. */ .orbe-collection-card .wp-block-cover__inner-container { position: relative; z-index: 1; } .orbe-collection-card .wp-block-cover__inner-container::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient( to bottom, rgba(26, 23, 20, 0) 30%, rgba(26, 23, 20, 0.72) 100% ); background: linear-gradient( to bottom, color-mix(in srgb, var(--wp--preset--color--base) 0%, transparent) 30%, color-mix(in srgb, var(--wp--preset--color--base) 72%, transparent) 100% ); } /* ---------- Storytelling de taller (30 años) ---------- */ .orbe-heritage__number { margin: 0; } .orbe-heritage__pillars { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); counter-reset: orbe-pilar; } .orbe-heritage__pillars .orbe-pillar { /* Hairline de rol (no rgba fijo): así también funciona en la variación clara. */ border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--tinta) 16%, transparent); padding-top: 0.9rem; counter-increment: orbe-pilar; } /* Numeración editorial 01.-04. Va en CSS y no en el patrón a propósito: es decoración de jerarquía, no contenido — así no entra en lo traducible ni se desincroniza si se reordenan los pilares. */ .orbe-pillar::before { content: counter(orbe-pilar, decimal-leading-zero) "."; display: block; margin-block-end: 0.15rem; font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--large); font-weight: 500; line-height: 1; color: var(--wp--preset--color--ambar); } .orbe-heritage__pillars .orbe-pillar h3 { margin: 0 0 0.35rem; } .orbe-heritage__pillars .orbe-pillar p { margin: 0; } @media (max-width: 781px) { .orbe-heritage__pillars { grid-template-columns: 1fr; } } /* ---------- FAQ (PDP) — acordeón accesible sincronizado con FAQPage schema ---------- */ .orbe-faq { max-width: var(--wp--style--global--content-size, 720px); margin-inline: auto; margin-block-start: var(--wp--preset--spacing--50); } .orbe-faq__title { margin-block-end: var(--wp--preset--spacing--30); } .orbe-faq__item { border-block-end: 1px solid var(--wp--preset--color--taupe); padding-block: var(--wp--preset--spacing--20); } .orbe-faq__question { cursor: pointer; font-weight: 450; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .orbe-faq__question::after { content: '+'; font-size: 1.5em; line-height: 1; transition: transform 200ms var(--wp--custom--ease, ease); } /* Abierto: el mismo '+' rota a '×' — sin salto de glifo (antes alternaba a en-dash, de ancho y altura ópticas distintas). */ .orbe-faq__item[open] .orbe-faq__question::after { transform: rotate(45deg); } .orbe-faq__answer { margin-block-start: var(--wp--preset--spacing--20); color: var(--wp--preset--color--tinta-suave); } @media (prefers-reduced-motion: reduce) { .orbe-faq__question::after { transition: none; } } /* ---------- Textura de grano editorial (muy sutil) ---------- */ .orbe-header, .orbe-footer, .wp-block-cover { position: relative; } .orbe-header::before, .orbe-footer::before { content: ''; position: absolute; inset: 0; opacity: 0.025; pointer-events: none; z-index: 1; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); } /* ---------- Hero editorial (split: panel de texto | foto) ---------- El texto vive sobre color sólido, no sobre la foto. Eso elimina el scrim con blur que hacía falta antes para cumplir AA, y sobre todo cambia el LCP: al apilarse en móvil el fold es texto, que pinta sin esperar red. */ .orbe-hero-editorial { margin-block-start: 0; } .orbe-hero-editorial__panel { display: flex; flex-direction: column; justify-content: center; } /* La columna debe estirarse: se sube la especificidad a (0,2,0) porque el CSS de core emite `.wp-block-column.is-vertically-aligned-*` con ese mismo peso y, sin esto, la foto queda centrada a tamaño intrínseco en vez de cubrir la mitad. */ .orbe-hero-editorial .orbe-hero-editorial__media { align-self: stretch; } /* La figura del bloque de imagen no hereda altura por sí sola: se encadena display:flex hasta el para que la foto cubra toda la columna. */ .orbe-hero-editorial__media, .orbe-hero-editorial__media .wp-block-image { display: flex; flex: 1 1 auto; margin-block: 0; } .orbe-hero-editorial__media img { flex: 1 1 auto; width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: center; } @media (min-width: 782px) { .orbe-hero-editorial { min-height: 82vh; } /* Intercambio responsivo del hero: el src del bloque es la variante móvil (46KB) porque el preload scanner SIEMPRE descarga el src — el swap por content:url en max-width hacía que móvil bajara ambas imágenes (medido en Lighthouse staging). Desktop, con ancho de banda holgado, carga la grande. */ .orbe-hero-editorial__media img { content: url('../images/hero-editorial.webp'); } } /* En móvil la foto se recorta a una banda: el protagonista es el texto. */ @media (max-width: 781px) { .orbe-hero-editorial__media img { max-height: 46vh; } } /* Entrada fina del contenido del hero (solo con JS activo). */ .js-enabled .orbe-hero-editorial__panel { opacity: 0; transform: translateY(15px); transition: opacity 1000ms var(--wp--custom--ease-out, cubic-bezier(0.16, 1, 0.3, 1)), transform 1000ms var(--wp--custom--ease-out, cubic-bezier(0.16, 1, 0.3, 1)); transition-delay: 200ms; } .js-enabled body.orbe-loaded .orbe-hero-editorial__panel { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .js-enabled .orbe-hero-editorial__panel { opacity: 1; transform: none; transition: none; } } /* ---------- Transición de entrada de página (fallback sin View Transitions) ---------- Donde el navegador soporta View Transitions, la navegación la anima esa API (ver @view-transition arriba) y este fade se omite para no duplicar el efecto. Solo con JS activo (clase js-enabled del bootstrap inline). */ @supports not (view-transition-name: none) { .js-enabled body { opacity: 0; transition: opacity 500ms var(--wp--custom--ease-out, ease); } .js-enabled body.orbe-loaded { opacity: 1; } @media (prefers-reduced-motion: reduce) { .js-enabled body { opacity: 1; transition: none; } } } /* ---------- WhatsApp flotante (bottom-right) ---------- */ .orbe-wa-float { position: fixed; inset-inline-end: 1.25rem; inset-block-end: 1.25rem; z-index: 90; display: inline-flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--wp--preset--color--tinta); color: var(--wp--preset--color--base); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); transition: transform 200ms var(--wp--custom--ease-out, ease), background-color 200ms ease; } .orbe-wa-float:hover { transform: translateY(-3px); background: var(--wp--preset--color--ambar); } .orbe-wa-float:focus-visible { outline: 2px solid var(--wp--preset--color--ambar); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .orbe-wa-float, .orbe-wa-float:hover { transition: none; transform: none; } } /* ---------- Reveal con scroll — SOLO progressive enhancement ---------- */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .orbe-reveal { animation: orbe-rise both; animation-timeline: view(); animation-range: entry 0% entry 35%; } @keyframes orbe-rise { from { opacity: 0.001; transform: translateY(18px); } to { opacity: 1; transform: none; } } } } /* Fallback para navegadores SIN scroll-driven (Firefox/Safari): orbe-enhance.js añade .is-visible al entrar en viewport (IntersectionObserver). Gated en .js-enabled para que SIN JS el contenido se vea siempre, y solo con movimiento permitido. En Chromium este bloque no aplica (el @supports de arriba gana). */ @supports not (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .js-enabled .orbe-reveal { opacity: 0.001; transform: translateY(18px); transition: opacity 600ms var(--wp--custom--ease-out, cubic-bezier(0.16, 1, 0.3, 1)), transform 600ms var(--wp--custom--ease-out, cubic-bezier(0.16, 1, 0.3, 1)); } .js-enabled .orbe-reveal.is-visible { opacity: 1; transform: none; } } } /* ---------- Container queries: las tarjetas responden a SU ancho, no al viewport ---------- La tarjeta de colección angosta (columna Hombre 42%, o apilada en móvil) compacta su titular para que respire igual que la ancha. Progresivo: sin soporte, el titular mantiene su tamaño x-large. La containment inline es segura en items de grid/columna con ancho definido. */ @supports (container-type: inline-size) { .orbe-collection-card { container-type: inline-size; container-name: orbe-card; } @container orbe-card (max-width: 320px) { .orbe-collection-card .wp-block-cover__inner-container :is(h2, h3) { font-size: var(--wp--preset--font-size--large); } } } /* ---------- Servicios especializados (maquila B2B + asesoría) ---------- */ .orbe-servicios .orbe-servicio { /* Mismo hairline de rol que los pilares: unifica el lenguaje de bloque corto. */ border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--tinta) 16%, transparent); padding-top: var(--wp--preset--spacing--20); } .orbe-servicios .orbe-servicio h3 { margin-block: 0 0.6rem; } /* ---------- Franja de confianza: iconos (decorativos) ---------- Eran SVG inline de trazo a 28px; desde 2026-08-07 son fotográficos y redondos. La clase va en la

del bloque de imagen, no en el : el esquema de core/image guarda className en el contenedor, y una clase suelta en el haría saltar la validación del bloque al guardarlo en el editor. El recorte circular y el tamaño viven aquí y no en `style` inline por el mismo motivo. */ .orbe-confianza__icon { margin-block: 0 var(--wp--preset--spacing--20); } .orbe-confianza__icon img { display: block; width: 60px; height: 60px; border-radius: 50%; object-fit: cover; } /* ---------- PDP: franja de confianza compacta bajo el buy box ---------- */ .orbe-pdp__trust { margin-block-start: var(--wp--preset--spacing--30); padding-block-start: var(--wp--preset--spacing--30); border-top: 1px solid var(--wp--preset--color--taupe); gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30); } .orbe-pdp__trust-item { flex: 1 1 42%; gap: 0.5rem; color: var(--wp--preset--color--tinta-suave); } .orbe-pdp__trust-item p { margin: 0; } .orbe-pdp__trust-item svg { flex: none; width: 20px; height: 20px; color: var(--wp--preset--color--ambar); } /* ════════════════════════════════════════════════════════════════════ Overrides WooCommerce — justificados: el CSS de Woo asume fondo claro y la tienda no usa reseñas. (Únicos !important permitidos.) ════════════════════════════════════════════════════════════════════ */ /* Ocultar valoraciones/estrellas (la tienda no las usa). */ .woocommerce .star-rating, .woocommerce .woocommerce-product-rating, .woocommerce #reviews, .woocommerce-Reviews, .wc-block-components-product-rating { display: none !important; } /* Formularios Woo (checkout clásico, cupones, dirección) sobre fondo oscuro. */ .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .woocommerce-page select { background-color: var(--wp--preset--color--superficie) !important; color: var(--wp--preset--color--tinta) !important; border: 1px solid var(--wp--preset--color--taupe) !important; border-radius: 2px; min-height: 2.75rem; } .woocommerce form .form-row input.input-text:focus-visible, .woocommerce form .form-row textarea:focus-visible, .woocommerce form .form-row select:focus-visible { outline: 2px solid var(--wp--preset--color--ambar) !important; outline-offset: 2px; } /* Avisos Woo sobre fondo oscuro. */ .woocommerce-message, .woocommerce-info, .woocommerce-error { background-color: var(--wp--preset--color--superficie) !important; color: var(--wp--preset--color--tinta) !important; border-top-color: var(--wp--preset--color--conac) !important; } /* Mini-cart (drawer) sobre fondo oscuro. */ .wc-block-mini-cart__drawer, .wp-block-woocommerce-mini-cart-contents { background-color: var(--wp--preset--color--superficie) !important; color: var(--wp--preset--color--tinta) !important; } /* ---------- Jerarquía de CTAs del PDP (T17) ---------- * UNA acción primaria: el pago (Wompi o, sin link, WhatsApp). "Añadir al * carrito" y el pago alterno pasan a outline — mismos tokens, menos peso. */ .orbe-variants__submit, .orbe-pago--secundario { background: transparent; border: 1px solid var(--wp--preset--color--taupe); color: var(--wp--preset--color--tinta); } .orbe-variants__submit:hover, .orbe-pago--secundario:hover { border-color: var(--wp--preset--color--ambar); color: var(--wp--preset--color--ambar); background: transparent; } /* Hint del CTA deshabilitado (T19): visible hasta elegir talla. */ .orbe-variants__hint { margin: 0; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--tinta-suave); } /* ---------- Barra CTA móvil del PDP (T18) ---------- */ .orbe-cta-bar { display: none; } @media (max-width: 781px) { .orbe-cta-bar { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 90; display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--20); padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30); background: var(--wp--preset--color--superficie); border-top: 1px solid var(--wp--preset--color--taupe); } .orbe-cta-bar__precio { color: var(--wp--preset--color--tinta); font-size: var(--wp--preset--font-size--medium); } .orbe-cta-bar__btn { min-height: 44px; display: inline-flex; align-items: center; } /* Que la barra no tape el flotante de WhatsApp ni el final del documento. */ .single-product .orbe-wa-float { inset-block-end: 5.75rem; } .single-product { padding-bottom: 5rem; } } @media (prefers-reduced-motion: no-preference) { .orbe-cta-bar__btn { transition: opacity 0.2s; } } /* ---------- WCAG 1.4.10 Reflow — alturas cortas (landscape / zoom 400%) (Ola 4) ---------- Con viewport muy bajo (móvil en horizontal, o zoom ~400% que reduce el alto a ~200px), el contenido quedaría atrapado entre la cabecera sticky (arriba) y la barra CTA fija (abajo). Se libera ese cromado para que el contenido reflúya a una sola columna sin scroll en dos ejes. Umbral 30rem (480px): NO afecta a móviles en vertical (600px+); solo a alturas genuinamente cortas. */ @media (max-height: 30rem) { .orbe-header { position: static; } html { scroll-padding-top: 1rem; } .orbe-cta-bar { position: static; } } /* ---------- Formularios WC (mi cuenta / login) sobre oscuro (T23) ---------- */ .woocommerce form .show-password-input { min-width: 24px; min-height: 24px; } .woocommerce form .form-row label { color: var(--wp--preset--color--tinta); } .woocommerce form .form-row .required { color: var(--wp--preset--color--ambar); text-decoration: none; } /* ---------- Tablas (guía de tallas) ---------- * El estilo core "stripes" pinta las filas impares con #f0f0f0 (claro fijo), * que sobre texto tinta (crema) da 1.04:1 — ilegible en el tema oscuro. * Se re-mapea la franja a tokens DE ROL para que funcione también en la * variación clara (claro.json intercambia los valores, los roles quedan). */ .wp-block-table.is-style-stripes { border-bottom: 1px solid var(--wp--preset--color--taupe); } .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background-color: var(--wp--preset--color--superficie); } .wp-block-table.is-style-stripes tbody tr:nth-child(even) { background-color: transparent; } .wp-block-table thead th { color: var(--wp--preset--color--tinta); border-bottom: 1px solid var(--wp--preset--color--taupe); } .wp-block-table td, .wp-block-table th { color: var(--wp--preset--color--tinta); } /* ════════════════════════════════════════════════════════════════════ Pulido cosmético (v0.4.18) — tarjetas de producto y tipografía editorial. Solo CSS y tokens de rol; sin !important (no son overrides de fondo claro Woo). ════════════════════════════════════════════════════════════════════ */ /* ---------- Tarjetas de producto (catálogo, novedades, relacionados) ---------- Las fichas no compartían el lenguaje de hover del resto del sitio. Se les da: ratio uniforme (rejilla pareja aunque las fotos varíen de proporción) y un zoom contenido al hover/focus, recortado dentro del bloque imagen para que no desborde. */ .wp-block-woocommerce-product-image { overflow: clip; border-radius: var(--wp--custom--radius-m, 4px); } .wp-block-woocommerce-product-image img, .wc-block-components-product-image img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; } @media (prefers-reduced-motion: no-preference) { .wp-block-woocommerce-product-image img { transition: transform 500ms var(--wp--custom--ease-out, cubic-bezier(0.16, 1, 0.3, 1)); } .wp-block-woocommerce-product-image:hover img, .wp-block-woocommerce-product-image:focus-within img { transform: scale(1.04); } } /* El recorte del zoom (overflow:clip) recortaría también el anillo de foco del enlace de la imagen. Se dibuja hacia DENTRO (offset negativo) para que siga visible (a11y). */ .wp-block-woocommerce-product-image a:focus-visible { outline: 2px solid var(--wp--preset--color--ambar); outline-offset: -2px; } /* Nombres de modelo en serif italic (guía de marca). En las cards de listado y el PDP se fija por markup; en los bloques renderizados por WC (relacionados, carrito, checkout, mini-cart) por CSS — ahí el nombre del producto ES el modelo. */ .woocommerce-loop-product__title, .wc-block-grid__product-title, .wc-block-components-product-name { font-style: italic; } /* ---------- Tipografía editorial: balanceo de líneas ---------- balance reparte mejor las líneas de los titulares serif (evita la última línea corta colgando); pretty evita huérfanas al final de los párrafos. Progresivo: los navegadores sin soporte mantienen el wrap normal. */ h1, h2, h3, h4, .wp-block-heading, .wp-block-post-title { text-wrap: balance; } p { text-wrap: pretty; }