/* ========================================================================== Storefront — capa de marca sobre Phoenix. Se carga después de theme.min.css. Todo va scopeado bajo .sf-storefront ( del layout público) porque este archivo también lo cargan el admin, el login y las páginas de error, que deben conservar el tema Phoenix. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Design tokens -------------------------------------------------------------------------- */ .sf-storefront { --sf-font-display: "Jost", "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --sf-font-body: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --sf-track-xs: 0.08em; --sf-track-sm: 0.16em; --sf-track-md: 0.26em; --sf-track-lg: 0.38em; --sf-gutter: clamp(1.25rem, 4vw, 4.5rem); --sf-section-y: clamp(3.75rem, 8vw, 8rem); --sf-max-w: 1560px; /* El header tiene dos filas: la barra (marca + buscador + acciones) y la de categorías, que solo existe en escritorio. --sf-header-h es la altura total y la usan el padding del body, el hero y los sticky del catálogo. */ --sf-header-bar-h: 4.25rem; --sf-header-nav-h: 0rem; /* +1px = el borde inferior del header; el de la fila de categorías va sumado dentro de --sf-header-nav-h en el breakpoint de escritorio. */ --sf-header-h: calc(var(--sf-header-bar-h) + var(--sf-header-nav-h) + 1px); --sf-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --sf-speed: 0.45s; /* Paleta clara: blanco puro, tinta casi negra, grises neutros. */ --sf-surface: #ffffff; --sf-surface-alt: #f4f3f1; --sf-surface-sunken: #ebe9e6; --sf-ink: #0b0b0b; --sf-ink-soft: #4c4c4c; --sf-muted: #6e6e6e; /* #8b8b8b daba ~3.4:1 sobre blanco, bajo WCAG AA (4.5:1); ~4.6:1 corregido */ --sf-line: #e2e0dc; --sf-line-strong: #c6c3be; --sf-header-solid: rgba(255, 255, 255, 0.94); --sf-header-solid-fg: var(--sf-ink); --sf-focus: #0b0b0b; /* Único acento de la marca (dorado champagne, a juego con los herrajes que aparecen en las fotos de producto). Marca estado, nunca decora. El dorado de marca #c9a66b da 2.3:1 sobre blanco —lejos del 4.5:1 que pide WCAG AA para texto pequeño—, así que en tema claro se usa el mismo tono bajado en luminosidad (~4.9:1) y #c9a66b queda para el tema oscuro. */ --sf-accent: #8c6b34; } .sf-storefront[data-bs-theme="dark"] { /* Paleta oscura: negro real (no el azul marino de Phoenix). */ --sf-surface: #000000; --sf-surface-alt: #0d0d0d; --sf-surface-sunken: #151515; --sf-ink: #ffffff; --sf-ink-soft: #b8b8b8; --sf-muted: #7c7c7c; --sf-line: #232323; --sf-line-strong: #3a3a3a; --sf-header-solid: rgba(0, 0, 0, 0.92); --sf-header-solid-fg: #ffffff; --sf-focus: #ffffff; /* Sobre negro el dorado de marca rinde 9.1:1: se usa tal cual. */ --sf-accent: #c9a66b; } @media (min-width: 992px) { .sf-storefront { --sf-header-bar-h: 5.25rem; --sf-header-nav-h: calc(3rem + 1px); } } /* -------------------------------------------------------------------------- 2. Remapeo de los tokens Phoenix El :not() evita competir con el bloque dark de Phoenix por especificidad. -------------------------------------------------------------------------- */ .sf-storefront:not([data-bs-theme="dark"]), .sf-storefront[data-bs-theme="dark"] { --phoenix-body-font-family: var(--sf-font-body); --phoenix-body-line-height: 1.7; --phoenix-body-bg: var(--sf-surface); --phoenix-body-color: var(--sf-ink-soft); --phoenix-emphasis-bg: var(--sf-surface); --phoenix-emphasis-color: var(--sf-ink); --phoenix-heading-color: var(--sf-ink); --phoenix-body-highlight-bg: var(--sf-surface-alt); --phoenix-body-highlight-color: var(--sf-ink); --phoenix-secondary-color: var(--sf-ink-soft); --phoenix-tertiary-color: var(--sf-muted); --phoenix-quaternary-color: var(--sf-muted); --phoenix-secondary-bg: var(--sf-surface-alt); --phoenix-tertiary-bg: var(--sf-surface-sunken); --phoenix-primary: var(--sf-ink); --phoenix-primary-dark: var(--sf-ink); --phoenix-primary-darker: var(--sf-ink); --phoenix-primary-light: var(--sf-ink-soft); --phoenix-primary-lighter: var(--sf-muted); --phoenix-primary-text-emphasis: var(--sf-ink); --phoenix-primary-bg-subtle: var(--sf-surface-alt); --phoenix-primary-border-subtle: var(--sf-line); --phoenix-link-color: var(--sf-ink); --phoenix-link-hover-color: var(--sf-ink-soft); --phoenix-border-color: var(--sf-line); --phoenix-border-color-translucent: var(--sf-line); --phoenix-card-bg: var(--sf-surface); --phoenix-card-border-color: var(--sf-line); --phoenix-card-border-radius: 0; --phoenix-card-box-shadow: none; --phoenix-dropdown-bg: var(--sf-surface); --phoenix-dropdown-border-color: var(--sf-line); --phoenix-dropdown-link-color: var(--sf-ink-soft); --phoenix-dropdown-link-hover-color: var(--sf-ink); --phoenix-dropdown-link-hover-bg: var(--sf-surface-alt); --phoenix-border-radius: 0; --phoenix-border-radius-sm: 0; --phoenix-border-radius-lg: 0; --phoenix-border-radius-xl: 0; --phoenix-border-radius-2xl: 0; --phoenix-border-radius-xxl: 0; --phoenix-focus-ring-color: rgba(var(--phoenix-emphasis-color-rgb), 0.35); } /* -------------------------------------------------------------------------- 3. Base tipográfica -------------------------------------------------------------------------- */ .sf-storefront body { background-color: var(--sf-surface); color: var(--sf-ink-soft); font-family: var(--sf-font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* :where() deja el scope en especificidad 0: así cualquier regla de componente de una sola clase (.sf-hero-title, .sf-tile-title…) gana sin pelear. */ :where(.sf-storefront) h1, :where(.sf-storefront) h2, :where(.sf-storefront) h3, :where(.sf-storefront) h4, :where(.sf-storefront) h5, :where(.sf-storefront) h6 { font-family: var(--sf-font-display); font-weight: 300; letter-spacing: var(--sf-track-xs); line-height: 1.18; color: var(--sf-ink); } :where(.sf-storefront) p { color: var(--sf-ink-soft); } /* Los .fw-* de Phoenix llegan hasta 900: el lenguaje de marca nunca pasa de 500. */ .sf-storefront .fw-bold, .sf-storefront .fw-bolder, .sf-storefront .fw-semibold, .sf-storefront .fw-black { font-weight: 500 !important; } .sf-storefront ::selection { background-color: var(--sf-ink); color: var(--sf-surface); } .sf-skip-link { position: absolute; top: 0; left: 0; z-index: 2000; padding: 0.75rem 1.25rem; background: var(--sf-ink); color: var(--sf-surface); font-family: var(--sf-font-display); font-size: 0.75rem; letter-spacing: var(--sf-track-sm); text-transform: uppercase; text-decoration: none; transform: translateY(-120%); transition: transform 0.2s var(--sf-ease); } .sf-skip-link:focus { transform: translateY(0); color: var(--sf-surface); } .sf-storefront :focus-visible { outline: 1px solid var(--sf-focus); outline-offset: 3px; } /* -------------------------------------------------------------------------- 4. Layout helpers -------------------------------------------------------------------------- */ .sf-container { width: 100%; max-width: var(--sf-max-w); margin-inline: auto; padding-inline: var(--sf-gutter); } .sf-container--narrow { max-width: 1120px; } .sf-section { padding-block: var(--sf-section-y); } .sf-section--tight { padding-block: calc(var(--sf-section-y) * 0.55); } .sf-section--alt { background-color: var(--sf-surface-alt); } /* El header es fijo en todas las páginas: el body siempre compensa su altura. */ .sf-body { padding-top: var(--sf-header-h); } .sf-eyebrow { display: block; margin-bottom: 1rem; font-family: var(--sf-font-display); font-size: 0.6875rem; font-weight: 400; letter-spacing: var(--sf-track-md); line-height: 1.4; text-transform: uppercase; color: var(--sf-muted); } .sf-title { margin-bottom: 0; font-family: var(--sf-font-display); font-size: clamp(1.5rem, 1rem + 1.9vw, 2.6rem); font-weight: 300; letter-spacing: var(--sf-track-sm); line-height: 1.15; text-transform: uppercase; color: var(--sf-ink); } .sf-title--sm { font-size: clamp(1.15rem, 0.9rem + 1vw, 1.6rem); } .sf-lede { max-width: 46ch; margin-bottom: 0; font-size: 0.9375rem; line-height: 1.85; color: var(--sf-ink-soft); } .sf-section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); } .sf-section-head--center { flex-direction: column; align-items: center; text-align: center; } .sf-rule { height: 1px; margin: 0; border: 0; background-color: var(--sf-line); opacity: 1; } /* -------------------------------------------------------------------------- 5. Botones y enlaces -------------------------------------------------------------------------- */ .sf-storefront .btn { --phoenix-btn-border-radius: 0; font-family: var(--sf-font-display); font-weight: 400; letter-spacing: var(--sf-track-sm); text-transform: uppercase; box-shadow: none; transition: background-color var(--sf-speed) var(--sf-ease), color var(--sf-speed) var(--sf-ease), border-color var(--sf-speed) var(--sf-ease); } .sf-storefront .btn-primary, .sf-storefront .btn-phoenix-primary, .sf-storefront .btn-phoenix-secondary, .sf-storefront .btn-secondary, .sf-storefront .btn-dark { --phoenix-btn-color: var(--sf-surface); --phoenix-btn-bg: var(--sf-ink); --phoenix-btn-border-color: var(--sf-ink); --phoenix-btn-hover-color: var(--sf-ink); --phoenix-btn-hover-bg: transparent; --phoenix-btn-hover-border-color: var(--sf-ink); --phoenix-btn-active-color: var(--sf-ink); --phoenix-btn-active-bg: transparent; --phoenix-btn-active-border-color: var(--sf-ink); --phoenix-btn-disabled-color: var(--sf-surface); --phoenix-btn-disabled-bg: var(--sf-muted); --phoenix-btn-disabled-border-color: var(--sf-muted); --phoenix-btn-disabled-custom-color: var(--sf-surface); --phoenix-btn-disabled-custom-background: var(--sf-muted); --phoenix-btn-border-width: 1px; } .sf-storefront .btn-phoenix-primary, .sf-storefront .btn-phoenix-secondary { --phoenix-btn-color: var(--sf-ink); --phoenix-btn-bg: transparent; --phoenix-btn-hover-color: var(--sf-surface); --phoenix-btn-hover-bg: var(--sf-ink); --phoenix-btn-active-color: var(--sf-surface); --phoenix-btn-active-bg: var(--sf-ink); } .sf-storefront .btn-lg { --phoenix-btn-padding-y: 1rem; --phoenix-btn-padding-x: 2.75rem; --phoenix-btn-font-size: 0.75rem; } .sf-storefront .btn-sm { --phoenix-btn-padding-y: 0.6rem; --phoenix-btn-padding-x: 1.25rem; --phoenix-btn-font-size: 0.6875rem; } .sf-storefront .btn:not(.btn-sm):not(.btn-lg) { --phoenix-btn-padding-y: 0.8rem; --phoenix-btn-padding-x: 2rem; --phoenix-btn-font-size: 0.72rem; } /* Enlace de texto con subrayado que crece: reemplaza al btn-link azul de Phoenix. */ .sf-link { display: inline-flex; align-items: center; gap: 0.6rem; padding-bottom: 0.35rem; font-family: var(--sf-font-display); font-size: 0.72rem; font-weight: 400; letter-spacing: var(--sf-track-md); text-transform: uppercase; text-decoration: none; color: var(--sf-ink); background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 1px; transition: background-size var(--sf-speed) var(--sf-ease), color var(--sf-speed) var(--sf-ease); } .sf-link:hover, .sf-link:focus-visible { color: var(--sf-ink); background-size: 0 1px; background-position: 100% 100%; } .sf-link--light { color: #fff; } .sf-link--light:hover, .sf-link--light:focus-visible { color: #fff; } /* -------------------------------------------------------------------------- 6. Header -------------------------------------------------------------------------- */ .sf-header { --sf-header-bg: var(--sf-surface); --sf-header-fg: var(--sf-ink); --sf-header-fg-dim: var(--sf-ink-soft); --sf-header-line: var(--sf-line); position: fixed; inset: 0 0 auto 0; z-index: 1035; background-color: var(--sf-header-bg); border-bottom: 1px solid var(--sf-header-line); color: var(--sf-header-fg); transition: background-color var(--sf-speed) var(--sf-ease), border-color var(--sf-speed) var(--sf-ease), color var(--sf-speed) var(--sf-ease); } /* El modo transparente sobre el hero se retiró (QA cliente): el menú se perdía contra la foto. El header arranca sólido también en la home. */ .sf-header.is-stuck { --sf-header-bg: var(--sf-header-solid); --sf-header-fg: var(--sf-header-solid-fg); --sf-header-fg-dim: color-mix(in srgb, var(--sf-header-solid-fg) 68%, transparent); --sf-header-line: var(--sf-line); backdrop-filter: saturate(1.2) blur(14px); -webkit-backdrop-filter: saturate(1.2) blur(14px); } /* space-between mantiene las acciones pegadas al borde derecho aunque el buscador esté oculto (<768px); el margen auto del buscador se encarga de que en escritorio quede junto a la marca y no centrado. */ /* Grid de 3 columnas en vez de flex space-between: logo y acciones tienen anchos distintos, así que un justify-content:center simple no centraría el buscador respecto al ancho total. Con 1fr auto 1fr la columna central queda equidistante sin importar cuánto pesen los extremos. */ .sf-header-bar { display: grid; /* La columna central es minmax(0, 38rem), no auto: un track "auto" se ajusta al min-content del buscador (el input encoge a su flex:1 mínimo) y el max-width del hijo nunca llega a aplicarse. Con minmax el track sí crece con el espacio disponible hasta 38rem. */ grid-template-columns: 1fr minmax(0, 38rem) 1fr; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); height: var(--sf-header-bar-h); } .sf-brand { display: inline-flex; align-items: center; flex: 0 0 auto; line-height: 0; text-decoration: none; justify-self: start; } /* El logotipo manda la escala: alto fijo, ancho por proporción. */ .sf-brand-logo { display: block; width: auto; height: clamp(1.9rem, 1.2rem + 1.8vw, 2.9rem); } /* Dual-theme sin JS: Phoenix escribe data-bs-theme en . */ .sf-brand-logo--dark, .sf-storefront[data-bs-theme="dark"] .sf-brand-logo--light { display: none; } .sf-storefront[data-bs-theme="dark"] .sf-brand-logo--dark { display: block; } /* Fila de categorías: separada de la barra por una hairline, como en la referencia aprobada por el cliente. */ .sf-header-nav { border-top: 1px solid var(--sf-header-line); } .sf-nav { display: flex; align-items: center; gap: clamp(0.85rem, 1.7vw, 2.25rem); margin: 0; padding: 0; list-style: none; } /* El -1px descuenta el borde superior de la fila, ya contado en el token. justify-content:center agrupa las categorías al centro del .sf-container en vez de dejarlas pegadas al borde izquierdo. */ .sf-header-nav .sf-nav { height: calc(var(--sf-header-nav-h) - 1px); justify-content: center; } .sf-nav-link { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0; border: 0; background: none; font-family: var(--sf-font-display); font-size: 0.72rem; font-weight: 400; letter-spacing: var(--sf-track-md); text-transform: uppercase; text-decoration: none; white-space: nowrap; color: var(--sf-header-fg-dim); /* Subrayado hairline que crece de izquierda a derecha, como .sf-link. */ background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 calc(100% - 0.15rem); background-size: 0 1px; transition: color 0.3s var(--sf-ease), background-size 0.4s var(--sf-ease); } .sf-nav-link::after { display: none; } /* Hover, foco y dropdown abierto: solo suben el contraste del texto del header. */ .sf-nav-link:hover, .sf-nav-link:focus-visible, .sf-nav-link.show { color: var(--sf-header-fg); background-size: 100% 1px; } /* Sección actual: acento dorado, el único color del sitio fuera del B/N. Va después del bloque de hover —misma especificidad, gana el orden— para que el indicador no desaparezca al pasar el puntero por encima ni al abrir el desplegable (el enlace de la categoría en curso lleva .is-active y .show a la vez). El subrayado usa currentColor, así que se vuelve dorado sin regla extra. */ .sf-nav-link.is-active { color: var(--sf-accent); background-size: 100% 1px; } /* Entre 992 y 1199px el catálogo puede traer muchas categorías: se aprieta el tracking y el gap en vez de dejar que la fila desborde el contenedor. Con estos valores entran ~10 entradas antes de quedarse sin sitio. */ @media (min-width: 992px) and (max-width: 1199.98px) { .sf-header-nav .sf-nav { gap: 0.75rem; } .sf-header-nav .sf-nav-link { font-size: 0.68rem; letter-spacing: var(--sf-track-xs); } } .sf-header-actions { display: flex; align-items: center; gap: 0.25rem; justify-self: end; } .sf-icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; background: none; color: var(--sf-header-fg-dim); text-decoration: none; transition: color 0.3s var(--sf-ease); } .sf-icon-btn:hover, .sf-icon-btn:focus-visible { color: var(--sf-header-fg); } .sf-icon-btn .fab, .sf-icon-btn .fas, .sf-icon-btn .svg-inline--fa { font-size: 0.95rem; } .sf-cart-count { position: absolute; top: 0.35rem; right: 0.25rem; min-width: 1.05rem; padding: 0 0.25rem; border-radius: 999px; background-color: var(--sf-header-fg); color: var(--sf-header-bg, var(--sf-surface)); font-family: var(--sf-font-display); font-size: 0.625rem; font-weight: 500; line-height: 1.05rem; text-align: center; } /* El toggle de tema de Phoenix hereda el color del header sin perder su lógica. */ .sf-header .theme-control-toggle .theme-control-toggle-label { width: 2.5rem; height: 2.5rem; border-radius: 0; background: none; color: var(--sf-header-fg-dim); } .sf-header .theme-control-toggle .theme-control-toggle-label:hover { background: none; color: var(--sf-header-fg); } .sf-header .theme-control-toggle .icon { width: 1rem; height: 1rem; stroke-width: 1.5; } /* Buscador siempre visible (antes era un panel colapsable tras la lupa). Los colores salen de los tokens del header para que funcione igual sobre el header normal, el sólido del scroll y los dos temas. */ .sf-search { display: flex; align-items: center; border: 1px solid var(--sf-header-line); background-color: color-mix(in srgb, var(--sf-header-fg) 5%, transparent); transition: border-color 0.3s var(--sf-ease), background-color 0.3s var(--sf-ease); } .sf-search:hover { border-color: var(--sf-line-strong); } .sf-search:focus-within { border-color: var(--sf-header-fg); outline: 1px solid var(--sf-header-fg); outline-offset: -2px; } /* Columna central del grid: se centra sola (justify-self:center en .sf-header-bar) y crece hasta max-width sin invadir logo ni acciones. */ .sf-search--bar { width: 100%; min-width: 9rem; } /* En el menú móvil va a lo ancho, antes de los enlaces. */ .sf-search--block { width: 100%; margin-bottom: 1.5rem; } .sf-search-input { flex: 1; min-width: 0; padding: 0.6rem 0.9rem; border: 0; background: none; color: var(--sf-header-fg); font-family: var(--sf-font-display); font-size: 0.8rem; font-weight: 400; letter-spacing: var(--sf-track-xs); } .sf-search-input::placeholder { color: var(--sf-header-fg-dim); opacity: 1; } .sf-search-input:focus { outline: none; } /* Cruz nativa de Safari/Chrome en type=search: hereda el color del header. */ .sf-search-input::-webkit-search-cancel-button { filter: var(--sf-search-cancel-filter, none); } .sf-storefront[data-bs-theme="dark"] .sf-search-input::-webkit-search-cancel-button { --sf-search-cancel-filter: invert(1) grayscale(100%); } .sf-search-submit { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 2.5rem; align-self: stretch; padding: 0; border: 0; background: none; color: var(--sf-header-fg-dim); font-size: 0.8rem; transition: color 0.3s var(--sf-ease); } .sf-search-submit:hover, .sf-search-submit:focus-visible { color: var(--sf-accent); } /* El offcanvas no hereda los tokens del header: usa los de superficie. */ .sf-offcanvas .sf-search { border-color: var(--sf-line); background-color: var(--sf-surface-alt); } .sf-offcanvas .sf-search-input { color: var(--sf-ink); } .sf-offcanvas .sf-search-input::placeholder, .sf-offcanvas .sf-search-submit { color: var(--sf-muted); } .sf-offcanvas .sf-search:focus-within { border-color: var(--sf-ink); outline-color: var(--sf-ink); } /* -------------------------------------------------------------------------- 7. Desplegable de categoría El mega menú de ancho completo se retiró (QA cliente): cada categoría raíz abre ahora su propio menú de una columna, colocado por Popper bajo su enlace. -------------------------------------------------------------------------- */ /* Bootstrap muestra el dropdown de golpe: un fade corto lo acerca al resto de transiciones de la marca. Solo opacity — transform lo gestiona Popper. */ .sf-nav-dropdown.dropdown-menu.show { animation: sf-fade-in 0.28s var(--sf-ease); } @keyframes sf-fade-in { from { opacity: 0; } } .sf-nav-dropdown.dropdown-menu { min-width: 15rem; max-width: 22rem; margin-top: 0; padding: 0.5rem 0; border: 1px solid var(--sf-line); border-radius: 0; background-color: var(--sf-surface); box-shadow: 0 18px 36px rgba(0, 0, 0, 0.14); } /* Los enlaces llevan también .dropdown-item para que Bootstrap los recorra con las flechas del teclado; el doble selector gana a los estilos de Phoenix. */ .sf-nav-dropdown .sf-nav-dropdown-link { display: block; width: 100%; padding: 0.5rem 1.25rem; background: none; font-size: 0.85rem; text-decoration: none; white-space: normal; color: var(--sf-muted); transition: color 0.3s var(--sf-ease), background-color 0.3s var(--sf-ease); } .sf-nav-dropdown .sf-nav-dropdown-link:hover, .sf-nav-dropdown .sf-nav-dropdown-link:focus, .sf-nav-dropdown .sf-nav-dropdown-link:active { background-color: var(--sf-surface-alt); color: var(--sf-ink); } /* Cierre del menú: acceso a la categoría completa, con el mismo tratamiento tipográfico de los enlaces del nav. */ .sf-nav-dropdown .sf-nav-dropdown-all { display: block; width: 100%; margin-top: 0.5rem; padding: 0.85rem 1.25rem 0.35rem; border-top: 1px solid var(--sf-line); background: none; font-family: var(--sf-font-display); font-size: 0.68rem; font-weight: 400; letter-spacing: var(--sf-track-sm); text-transform: uppercase; text-decoration: none; white-space: normal; color: var(--sf-ink); transition: color 0.3s var(--sf-ease); } /* Categoría todavía sin hijas: el "Ver todo" es el único ítem del panel, así que el separador no tiene nada que separar y el aire de arriba sobra. */ .sf-nav-dropdown .sf-nav-dropdown-all:only-child { margin-top: 0; padding-top: 0.35rem; border-top: 0; } .sf-nav-dropdown .sf-nav-dropdown-all:hover, .sf-nav-dropdown .sf-nav-dropdown-all:focus, .sf-nav-dropdown .sf-nav-dropdown-all:active { background: none; color: var(--sf-accent); } /* La flecha acompaña al texto aunque el nombre de la categoría haga dos líneas. */ .sf-nav-dropdown-all .fas { margin-inline-start: 0.4rem; } /* -------------------------------------------------------------------------- 8. Navegación móvil (offcanvas) -------------------------------------------------------------------------- */ .sf-offcanvas.offcanvas { --phoenix-offcanvas-bg: var(--sf-surface); --phoenix-offcanvas-color: var(--sf-ink); --phoenix-offcanvas-border-color: var(--sf-line); --phoenix-offcanvas-width: min(24rem, 88vw); background-color: var(--sf-surface); color: var(--sf-ink); } .sf-offcanvas .offcanvas-header { border-bottom: 1px solid var(--sf-line); } .sf-offcanvas .btn-close { filter: var(--sf-close-filter, none); } .sf-storefront[data-bs-theme="dark"] .sf-offcanvas .btn-close { --sf-close-filter: invert(1) grayscale(100%); } .sf-offcanvas-link { display: block; padding: 1rem 0; border-bottom: 1px solid var(--sf-line); font-family: var(--sf-font-display); font-size: 0.85rem; font-weight: 400; letter-spacing: var(--sf-track-sm); text-transform: uppercase; text-decoration: none; color: var(--sf-ink); } .sf-offcanvas-sublink { display: block; padding: 0.4rem 0; font-size: 0.85rem; text-decoration: none; color: var(--sf-muted); } .sf-offcanvas-sublink:hover { color: var(--sf-ink); } .sf-offcanvas-sublist { padding: 0.75rem 0 1rem; } .sf-offcanvas-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; border-width: 0 0 1px; border-style: solid; border-color: var(--sf-line); background: none; text-align: left; } .sf-offcanvas-toggle > :last-child { transition: transform 0.3s var(--sf-ease); } .sf-offcanvas-toggle[aria-expanded="true"] > :last-child { transform: rotate(180deg); } /* -------------------------------------------------------------------------- 9. Hero fullscreen -------------------------------------------------------------------------- */ /* padding:0 anula el relleno vertical que Phoenix aplica a todo
. La altura descuenta el header fijo (el body ya reserva ese espacio) para que el hero llene la ventana sin generar scroll sobrante. */ .sf-hero { position: relative; height: calc(100vh - var(--sf-header-h)); height: calc(100svh - var(--sf-header-h)); min-height: 32rem; padding: 0; background-color: #000; } .sf-hero .swiper, .sf-hero .swiper-wrapper, .sf-hero .swiper-slide { height: 100%; } .sf-hero-slide { position: relative; display: block; height: 100%; overflow: hidden; text-decoration: none; } .sf-hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 9s linear; } .swiper-slide-active .sf-hero-media { transform: scale(1); } /* Tres capas: lateral izquierdo para el bloque de texto, inferior para el CTA y superior como viñeta que asienta la foto bajo el header. */ .sf-hero-scrim { position: absolute; inset: 0; /* Las dos capas que cubren .sf-hero-body van calibradas para el peor caso (mármol blanco, tapicería clara): en la esquina inferior izquierda suman ~0.83 de negro, que deja el texto blanco por encima de 12:1. El alcance vertical llega al 58% para cubrir títulos de hasta tres líneas, y ambas caen a cero antes del centro-derecha para no apagar el producto. */ background: linear-gradient(90deg, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.34) 46%, rgba(0, 0, 0, 0) 78%), linear-gradient(0deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.58) 22%, rgba(0, 0, 0, 0.18) 42%, rgba(0, 0, 0, 0) 58%), linear-gradient(180deg, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0) 18%); } .sf-hero-body { position: absolute; inset: auto 0 0 0; padding-bottom: clamp(3.5rem, 9vh, 7rem); color: #fff; } .sf-hero-eyebrow { display: block; margin-bottom: 0.9rem; font-family: var(--sf-font-display); font-size: 0.6875rem; font-weight: 400; letter-spacing: var(--sf-track-lg); text-transform: uppercase; color: rgba(255, 255, 255, 0.78); } /* Los títulos vienen del nombre del producto y pueden ser largos: se recortan a tres líneas para que el bloque de texto no invada la fotografía. */ .sf-hero-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-width: min(46rem, 58vw); margin-bottom: 1.75rem; font-family: var(--sf-font-display); font-size: clamp(1.6rem, 0.9rem + 2.6vw, 3.25rem); font-weight: 300; letter-spacing: var(--sf-track-sm); line-height: 1.1; text-transform: uppercase; color: #fff; } .sf-hero-price { margin-bottom: 1.5rem; font-family: var(--sf-font-display); font-size: 0.9rem; font-weight: 300; letter-spacing: var(--sf-track-sm); color: rgba(255, 255, 255, 0.85); } /* Especificidad alta a propósito: Phoenix estiliza .swiper-theme-container .swiper-nav [class*=swiper-] con borde y fondo propios. */ .sf-hero .swiper-nav { position: static; } .sf-hero .swiper-nav .sf-hero-arrow { position: absolute; top: 50%; z-index: 3; display: flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; margin: 0; padding: 0; border: 0; background: none; color: rgba(255, 255, 255, 0.7); transform: translateY(-50%); cursor: pointer; transition: color 0.3s var(--sf-ease); } .sf-hero .swiper-nav .sf-hero-arrow:hover, .sf-hero .swiper-nav .sf-hero-arrow:focus { background: none; color: #fff; } .sf-hero .swiper-nav .sf-hero-arrow--prev { left: max(0.25rem, calc(var(--sf-gutter) - 1.75rem)); right: auto; } .sf-hero .swiper-nav .sf-hero-arrow--next { right: max(0.25rem, calc(var(--sf-gutter) - 1.75rem)); left: auto; } .sf-hero .swiper-nav .sf-hero-arrow::after, .sf-hero .swiper-nav .sf-hero-arrow::before { display: none; } .sf-hero-pagination { position: absolute; bottom: clamp(1.5rem, 4vh, 2.5rem); left: 0; right: 0; z-index: 3; display: flex; justify-content: center; gap: 0.75rem; } .sf-hero-pagination .swiper-pagination-bullet { width: 2.25rem; height: 1px; margin: 0 !important; border-radius: 0; background: rgba(255, 255, 255, 0.4); opacity: 1; transition: background-color 0.3s var(--sf-ease); } .sf-hero-pagination .swiper-pagination-bullet-active { background: #fff; } @media (prefers-reduced-motion: reduce) { .sf-hero-media, .swiper-slide-active .sf-hero-media { transform: none; transition: none; } } /* -------------------------------------------------------------------------- 10. Hero de página interior -------------------------------------------------------------------------- */ .sf-page-hero { position: relative; display: flex; align-items: flex-end; min-height: clamp(18rem, 42vh, 30rem); padding: 0; overflow: hidden; background-color: #000; } .sf-page-hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .sf-page-hero-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.25) 60%, rgba(0, 0, 0, 0.35) 100%); } .sf-page-hero-body { position: relative; width: 100%; padding-block: clamp(2.5rem, 6vw, 4.5rem); color: #fff; } .sf-page-hero .sf-title, .sf-page-hero .sf-eyebrow { color: #fff; } .sf-page-hero .sf-eyebrow { color: rgba(255, 255, 255, 0.75); } /* Cabecera plana para páginas sin fotografía (carrito, checkout, gracias). */ .sf-page-head { padding-top: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: clamp(1.5rem, 3vw, 2.5rem); } .sf-storefront .breadcrumb { --phoenix-breadcrumb-divider-color: var(--sf-muted); --phoenix-breadcrumb-item-active-color: var(--sf-ink); margin-bottom: 1rem; font-family: var(--sf-font-display); font-size: 0.68rem; letter-spacing: var(--sf-track-sm); text-transform: uppercase; } .sf-storefront .breadcrumb a { color: var(--sf-muted); text-decoration: none; } .sf-storefront .breadcrumb a:hover { color: var(--sf-ink); } /* El nombre de la pieza puede ocupar tres líneas en móvil y el h1 justo debajo ya lo repite: en pantallas chicas la miga muestra solo la ruta. */ @media (max-width: 575.98px) { .sf-storefront .breadcrumb .breadcrumb-item.active { display: none; } } .sf-page-hero .breadcrumb a { color: rgba(255, 255, 255, 0.7); } .sf-page-hero .breadcrumb a:hover, .sf-page-hero .breadcrumb .breadcrumb-item.active { color: #fff; } /* -------------------------------------------------------------------------- 11. Grid editorial de categorías -------------------------------------------------------------------------- */ /* Fotografías a sangre separadas solo por una hendidura del color de la página: así una fila incompleta no deja bloques de relleno visibles. */ .sf-grid { display: grid; gap: 1px; } .sf-grid--categories { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); } .sf-grid--projects { grid-template-columns: 1fr; } @media (min-width: 576px) { .sf-grid--projects { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 992px) { .sf-grid--projects { grid-template-columns: repeat(3, 1fr); } } .sf-tile { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background-color: var(--sf-surface-alt); text-decoration: none; } .sf-tile--wide { aspect-ratio: 4 / 3; } .sf-tile-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--sf-ease); } .sf-tile:hover .sf-tile-media, .sf-tile:focus-visible .sf-tile-media { transform: scale(1.05); } .sf-tile-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0.05) 100%); background-color: rgba(0, 0, 0, 0); transition: background-color 0.5s var(--sf-ease); } /* El zoom de la foto va acompañado de un oscurecido leve: confirma el hover sin recurrir a colores de acento. */ .sf-tile:hover .sf-tile-scrim, .sf-tile:focus-visible .sf-tile-scrim { background-color: rgba(0, 0, 0, 0.18); } .sf-tile-body { position: absolute; inset: auto 0 0 0; padding: clamp(1.5rem, 3vw, 2.5rem); color: #fff; } .sf-tile-title { margin-bottom: 0.35rem; font-family: var(--sf-font-display); font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.6rem); font-weight: 300; letter-spacing: var(--sf-track-md); line-height: 1.2; text-transform: uppercase; color: #fff; } .sf-tile-meta { margin-bottom: 0; font-family: var(--sf-font-display); font-size: 0.68rem; letter-spacing: var(--sf-track-sm); text-transform: uppercase; color: rgba(255, 255, 255, 0.7); } /* -------------------------------------------------------------------------- 12. Tarjeta de producto -------------------------------------------------------------------------- */ .sf-product { position: relative; display: flex; flex-direction: column; height: 100%; } .sf-product-figure { position: relative; margin-bottom: 1.15rem; aspect-ratio: 3 / 4; overflow: hidden; background-color: var(--sf-surface-alt); } .sf-product-media { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--sf-ease), opacity 0.4s var(--sf-ease); } .sf-product:hover .sf-product-media { transform: scale(1.04); } .sf-product-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--sf-muted); } .sf-product-actions { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 0.75rem; } /* Colores absolutos, no tokens de tema: este botón vive siempre sobre la fotografía del producto, nunca sobre el fondo de la página. */ .sf-product-actions .btn { width: 100%; --phoenix-btn-color: #0b0b0b; --phoenix-btn-bg: rgba(255, 255, 255, 0.94); --phoenix-btn-border-color: transparent; --phoenix-btn-hover-color: #fff; --phoenix-btn-hover-bg: #0b0b0b; --phoenix-btn-hover-border-color: #0b0b0b; --phoenix-btn-active-color: #fff; --phoenix-btn-active-bg: #0b0b0b; } @media (hover: hover) and (min-width: 768px) { .sf-product-actions { opacity: 0; transform: translateY(0.75rem); transition: opacity 0.35s var(--sf-ease), transform 0.35s var(--sf-ease); } .sf-product:hover .sf-product-actions, .sf-product:focus-within .sf-product-actions { opacity: 1; transform: translateY(0); } } .sf-product-category { display: block; margin-bottom: 0.4rem; font-family: var(--sf-font-display); font-size: 0.65rem; letter-spacing: var(--sf-track-md); text-transform: uppercase; text-decoration: none; color: var(--sf-muted); transition: color 0.3s var(--sf-ease); } /* En la ficha de producto la categoría es un enlace: mismo look, hover visible. */ a.sf-product-category:hover, a.sf-product-category:focus-visible { color: var(--sf-ink); } .sf-product-name { margin-bottom: 0.5rem; font-family: var(--sf-font-display); font-size: 0.95rem; font-weight: 400; letter-spacing: var(--sf-track-xs); line-height: 1.4; } .sf-product-name a { color: var(--sf-ink); text-decoration: none; } .sf-product-price { margin-bottom: 0; font-family: var(--sf-font-display); font-size: 0.9rem; font-weight: 300; letter-spacing: var(--sf-track-xs); color: var(--sf-ink-soft); } .sf-product-variants { margin: 0.35rem 0 0; font-family: var(--sf-font-display); font-size: 0.65rem; letter-spacing: var(--sf-track-sm); text-transform: uppercase; color: var(--sf-muted); } .sf-catalog-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: clamp(2rem, 4vw, 3rem); padding-bottom: 1.25rem; border-bottom: 1px solid var(--sf-line); } .sf-pagination { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 2rem; border-top: 1px solid var(--sf-line); } /* Estructura de pagination::storefront: números centrados, resumen debajo. */ .sf-pager { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; } .sf-pager .pagination { margin-bottom: 0; } .sf-pager-summary { margin-bottom: 0; font-family: var(--sf-font-display); font-size: 0.65rem; letter-spacing: var(--sf-track-md); text-transform: uppercase; color: var(--sf-muted); } .swiper-nav.sf-slider-nav { position: static; } .sf-slider-nav .sf-slider-arrow { position: absolute; top: calc(50% - 5rem); z-index: 3; display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; margin: 0; padding: 0; border: 1px solid var(--sf-line-strong); border-radius: 0; background-color: var(--sf-surface); color: var(--sf-ink); transform: translateY(-50%); transition: background-color 0.3s var(--sf-ease), color 0.3s var(--sf-ease); } .sf-slider-nav .sf-slider-arrow::after, .sf-slider-nav .sf-slider-arrow::before { display: none; } .sf-slider-nav .sf-slider-arrow:hover, .sf-slider-nav .sf-slider-arrow:focus { background-color: var(--sf-ink); color: var(--sf-surface); } .sf-slider-nav .sf-slider-arrow.swiper-button-prev { left: -1.375rem; right: auto; } .sf-slider-nav .sf-slider-arrow.swiper-button-next { right: -1.375rem; left: auto; } .sf-slider-nav .sf-slider-arrow.swiper-button-disabled { opacity: 0; pointer-events: none; } @media (max-width: 991.98px) { .sf-slider-nav .sf-slider-arrow { display: none; } } .sf-product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.75rem) clamp(1rem, 2vw, 2rem); } @media (min-width: 768px) { .sf-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1200px) { .sf-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1500px) { .sf-product-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* -------------------------------------------------------------------------- 13. Detalle de producto -------------------------------------------------------------------------- */ .sf-detail { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 4.5rem); } @media (min-width: 992px) { .sf-detail { grid-template-columns: 1.15fr 0.85fr; align-items: start; } .sf-detail-aside { position: sticky; top: calc(var(--sf-header-h) + 2rem); } } .sf-gallery-main { margin-bottom: 0.75rem; background-color: var(--sf-surface-alt); overflow: hidden; } .sf-gallery-main img { width: 100%; height: auto; display: block; } .sf-gallery-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); gap: 0.75rem; } .sf-gallery-thumb { aspect-ratio: 1 / 1; overflow: hidden; background-color: var(--sf-surface-alt); } .sf-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; } .sf-detail-title { margin-bottom: 1.25rem; font-family: var(--sf-font-display); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem); font-weight: 300; letter-spacing: var(--sf-track-sm); line-height: 1.15; text-transform: uppercase; } .sf-detail-price { margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--sf-line); font-family: var(--sf-font-display); font-size: 1.35rem; font-weight: 300; letter-spacing: var(--sf-track-sm); color: var(--sf-ink); } .sf-detail-copy { margin-bottom: 2.5rem; font-size: 0.95rem; line-height: 1.9; color: var(--sf-ink-soft); } .sf-gallery-empty { aspect-ratio: 3 / 4; } .sf-field { margin-bottom: 2rem; } .sf-field--narrow { max-width: 8rem; } /* -------------------------------------------------------------------------- 14. Formularios, tablas, alertas y paginación -------------------------------------------------------------------------- */ .sf-storefront .form-label { margin-bottom: 0.25rem; font-family: var(--sf-font-display); font-size: 0.68rem; font-weight: 400; letter-spacing: var(--sf-track-sm); text-transform: uppercase; color: var(--sf-muted); } /* Menos padding superior que inferior: el texto queda pegado a su label y la línea base conserva aire, en vez de flotar a medio camino entre ambos. */ .sf-storefront .form-control, .sf-storefront .form-select { padding: 0.45rem 0 0.65rem; border: 0; border-bottom: 1px solid var(--sf-line-strong); border-radius: 0; background-color: transparent; color: var(--sf-ink); font-family: var(--sf-font-body); font-size: 0.95rem; box-shadow: none; } .sf-storefront .form-select { padding-right: 1.5rem; } .sf-storefront .form-control:focus, .sf-storefront .form-select:focus { border-bottom-color: var(--sf-ink); background-color: transparent; box-shadow: none; outline: none; } .sf-storefront .form-control::placeholder { color: var(--sf-muted); } /* Error de validación: se marca solo con la línea inferior en el rojo de Phoenix, sin el icono de fondo que rompe el input hairline. */ .sf-storefront .form-control.is-invalid, .sf-storefront .form-select.is-invalid { padding-right: 0; border-bottom-color: var(--phoenix-danger); background-image: none; } .sf-storefront .form-check-input { border-color: var(--sf-line-strong); background-color: transparent; } .sf-storefront .form-check-input:checked { border-color: var(--sf-ink); background-color: var(--sf-ink); } .sf-storefront .alert { border-radius: 0; border: 1px solid var(--sf-line); background-color: var(--sf-surface-alt); color: var(--sf-ink); font-size: 0.9rem; } .sf-storefront .alert-subtle-danger, .sf-storefront .alert-danger { border-left: 2px solid var(--sf-ink); } .sf-storefront .card { border-radius: 0; border: 1px solid var(--sf-line); background-color: var(--sf-surface); box-shadow: none; } .sf-storefront .table { --phoenix-table-border-color: var(--sf-line); --phoenix-table-color: var(--sf-ink-soft); color: var(--sf-ink-soft); } .sf-storefront .table > thead th { padding-block: 1rem; font-family: var(--sf-font-display); font-size: 0.65rem; font-weight: 400; letter-spacing: var(--sf-track-md); text-transform: uppercase; color: var(--sf-muted); } .sf-storefront .pagination { --phoenix-pagination-border-radius: 0; flex-wrap: wrap; gap: 0.35rem; justify-content: center; } .sf-storefront .page-link { min-width: 2.5rem; padding: 0.5rem 0.75rem; border: 1px solid transparent; border-radius: 0; background-color: transparent; color: var(--sf-muted); font-family: var(--sf-font-display); font-size: 0.78rem; letter-spacing: var(--sf-track-xs); text-align: center; box-shadow: none; } .sf-storefront .page-link:hover { border-color: var(--sf-line); background-color: transparent; color: var(--sf-ink); } .sf-storefront .page-item.active .page-link { border-color: var(--sf-ink); background-color: transparent; color: var(--sf-ink); } .sf-storefront .page-item.disabled .page-link { color: var(--sf-line-strong); } /* Estado vacío: caja hairline con mucho aire, sin ilustración ni color. */ .sf-empty { padding: clamp(3rem, 8vw, 6rem) 1.5rem; border: 1px solid var(--sf-line); text-align: center; } .sf-empty-title { margin-bottom: 0.75rem; font-family: var(--sf-font-display); font-size: 1.1rem; font-weight: 300; letter-spacing: var(--sf-track-md); text-transform: uppercase; } .sf-empty-text { max-width: 34ch; margin: 0 auto; font-size: 0.9rem; color: var(--sf-muted); } /* -------------------------------------------------------------------------- 15. Carrito y checkout -------------------------------------------------------------------------- */ .sf-summary { padding: clamp(1.75rem, 3vw, 2.5rem); border: 1px solid var(--sf-line); background-color: var(--sf-surface-alt); } .sf-summary-title { margin-bottom: 1.75rem; padding-bottom: 1rem; border-bottom: 1px solid var(--sf-line); font-family: var(--sf-font-display); font-size: 0.8rem; font-weight: 400; letter-spacing: var(--sf-track-md); text-transform: uppercase; } .sf-summary-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; font-size: 0.875rem; } .sf-summary-row dt, .sf-summary-row span:first-child { color: var(--sf-muted); font-weight: 400; } .sf-summary-row dd, .sf-summary-row span:last-child { margin: 0; color: var(--sf-ink); font-family: var(--sf-font-display); } .sf-summary-divider { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--sf-line); } .sf-summary-total { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--sf-line-strong); font-size: 1rem; } .sf-summary-total span:last-child { font-size: 1.15rem; } .sf-checkout-layout { display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 5vw, 4rem); align-items: start; } @media (min-width: 992px) { .sf-checkout-layout { grid-template-columns: minmax(0, 1.7fr) minmax(20rem, 0.9fr); } .sf-checkout-layout > .sf-summary { position: sticky; top: calc(var(--sf-header-h) + 2rem); } } .sf-cart-controls { display: flex; align-items: center; gap: 1rem; } .sf-cart-line { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1.25rem; padding-block: 1.5rem; border-bottom: 1px solid var(--sf-line); } /* En móvil el precio cae a una segunda fila alineada bajo la descripción. */ .sf-cart-price { grid-column: 2; justify-self: end; } @media (min-width: 768px) { .sf-cart-line { grid-template-columns: 7rem 1fr auto; align-items: center; gap: 2rem; } .sf-cart-price { grid-column: auto; } } .sf-cart-thumb { aspect-ratio: 3 / 4; overflow: hidden; background-color: var(--sf-surface-alt); } .sf-cart-thumb img { width: 100%; height: 100%; object-fit: cover; } .sf-cart-name { margin-bottom: 0.3rem; font-family: var(--sf-font-display); font-size: 0.95rem; font-weight: 400; letter-spacing: var(--sf-track-xs); } .sf-cart-name a { color: var(--sf-ink); text-decoration: none; } .sf-cart-sku { display: block; margin-bottom: 1rem; font-family: var(--sf-font-display); font-size: 0.65rem; letter-spacing: var(--sf-track-sm); text-transform: uppercase; color: var(--sf-muted); } .sf-qty { display: inline-flex; align-items: center; gap: 0.5rem; } .sf-qty input { width: 4rem; padding: 0.5rem 0.25rem; border: 1px solid var(--sf-line-strong); border-radius: 0; background: transparent; color: var(--sf-ink); font-family: var(--sf-font-display); font-size: 0.85rem; text-align: center; } .sf-qty input:focus { outline: none; border-color: var(--sf-ink); } .sf-icon-action { padding: 0.35rem; border: 0; background: none; color: var(--sf-muted); transition: color 0.3s var(--sf-ease); } .sf-icon-action:hover, .sf-icon-action:focus-visible { color: var(--sf-ink); } .sf-cart-price { font-family: var(--sf-font-display); font-size: 1rem; font-weight: 300; color: var(--sf-ink); white-space: nowrap; } .sf-receipt { text-align: center; } .sf-receipt-summary { max-width: 26rem; margin-inline: auto; text-align: left; } .sf-receipt-strong { color: var(--sf-ink); font-family: var(--sf-font-display); } .sf-fieldset { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); padding: 0; border: 0; } .sf-fieldset-title { float: none; width: 100%; margin-bottom: 1.75rem; padding-bottom: 1rem; border-bottom: 1px solid var(--sf-line); font-family: var(--sf-font-display); font-size: 0.75rem; font-weight: 400; letter-spacing: var(--sf-track-md); text-transform: uppercase; } .sf-quote { padding: clamp(1.75rem, 3vw, 2.5rem); border: 1px solid var(--sf-line); background-color: var(--sf-surface-alt); } .sf-option { display: flex; align-items: center; gap: 0.85rem; padding-block: 0.9rem; border-bottom: 1px solid var(--sf-line); } .sf-option label { flex: 1; margin: 0; font-size: 0.9rem; color: var(--sf-ink-soft); cursor: pointer; } .sf-option .sf-option-price { font-family: var(--sf-font-display); font-size: 0.9rem; color: var(--sf-ink); } /* -------------------------------------------------------------------------- 16. Filosofía, proyectos y editorial -------------------------------------------------------------------------- */ .sf-split { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } @media (min-width: 992px) { .sf-split { grid-template-columns: 1fr 1fr; } } .sf-split-media { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1px; background-color: var(--sf-line); } .sf-split-media img { width: 100%; height: 100%; object-fit: cover; } .sf-figure { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background-color: var(--sf-surface-alt); } .sf-figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--sf-ease); } .sf-figure:hover img { transform: scale(1.04); } .sf-figure figcaption { position: absolute; inset: auto 0 0 0; padding: 1.5rem; background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%); font-family: var(--sf-font-display); font-size: 0.72rem; letter-spacing: var(--sf-track-sm); text-transform: uppercase; color: #fff; } .sf-editorial { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: clamp(2rem, 3vw, 2.5rem); } .sf-article-media { margin-bottom: 1.25rem; aspect-ratio: 4 / 3; overflow: hidden; background-color: var(--sf-surface-alt); } .sf-article-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--sf-ease); } .sf-article:hover .sf-article-media img { transform: scale(1.04); } .sf-article-title { margin-bottom: 0.75rem; font-family: var(--sf-font-display); font-size: 1rem; font-weight: 400; letter-spacing: var(--sf-track-xs); line-height: 1.4; } .sf-article-excerpt { margin-bottom: 1.25rem; font-size: 0.875rem; line-height: 1.8; color: var(--sf-muted); } /* -------------------------------------------------------------------------- 17. Footer -------------------------------------------------------------------------- */ .sf-footer { background-color: #000000; color: rgba(255, 255, 255, 0.62); } .sf-footer-cta { padding-block: clamp(3.5rem, 8vw, 6.5rem); border-bottom: 1px solid rgba(255, 255, 255, 0.12); text-align: center; } .sf-footer-cta .sf-link { margin-top: 1.75rem; } .sf-footer-cta-title { margin-bottom: 0; font-family: var(--sf-font-display); font-size: clamp(1.15rem, 0.8rem + 1.7vw, 2.35rem); font-weight: 300; letter-spacing: var(--sf-track-md); line-height: 1.3; text-transform: uppercase; color: #ffffff; } .sf-footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: clamp(2.25rem, 4vw, 3.5rem); padding-block: clamp(3rem, 6vw, 4.5rem); } .sf-footer-heading { margin-bottom: 1.5rem; font-family: var(--sf-font-display); font-size: 0.68rem; font-weight: 400; letter-spacing: var(--sf-track-md); text-transform: uppercase; color: rgba(255, 255, 255, 0.55); } .sf-footer-link { display: block; margin-bottom: 0.75rem; font-size: 0.875rem; text-decoration: none; color: rgba(255, 255, 255, 0.75); transition: color 0.3s var(--sf-ease); } .sf-footer-link:hover, .sf-footer-link:focus-visible { color: #ffffff; } .sf-footer-place { margin-bottom: 1.25rem; } .sf-footer-place-name { display: block; margin-bottom: 0.3rem; font-family: var(--sf-font-display); font-size: 0.75rem; letter-spacing: var(--sf-track-sm); text-transform: uppercase; color: #ffffff; } .sf-footer-place-address { margin-bottom: 0; font-size: 0.8125rem; line-height: 1.7; color: rgba(255, 255, 255, 0.55); } .sf-footer-intro { max-width: 32ch; margin-bottom: 0; font-size: 0.8125rem; line-height: 1.8; color: rgba(255, 255, 255, 0.55); } .sf-footer-socials { display: flex; gap: 0.5rem; margin-top: 1.25rem; } .sf-footer-social { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border: 1px solid rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.75); text-decoration: none; transition: background-color 0.3s var(--sf-ease), color 0.3s var(--sf-ease), border-color 0.3s var(--sf-ease); } .sf-footer-social:hover, .sf-footer-social:focus-visible { border-color: #ffffff; background-color: #ffffff; color: #000000; } .sf-footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 1.5rem; padding-block: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.12); font-family: var(--sf-font-display); font-size: 0.68rem; letter-spacing: var(--sf-track-sm); text-transform: uppercase; text-align: center; color: rgba(255, 255, 255, 0.45); } .sf-footer-brand { display: inline-block; margin-bottom: 1.5rem; font-family: var(--sf-font-display); font-size: 1.35rem; font-weight: 300; letter-spacing: var(--sf-track-md); text-transform: uppercase; text-decoration: none; color: #ffffff; } /* -------------------------------------------------------------------------- 18. WhatsApp FAB -------------------------------------------------------------------------- */ .sf-whatsapp { position: fixed; right: clamp(1rem, 2vw, 1.75rem); bottom: clamp(1rem, 2vw, 1.75rem); z-index: 1040; display: flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; border: 1px solid var(--sf-line-strong); background-color: var(--sf-surface); color: var(--sf-ink); text-decoration: none; transition: background-color 0.3s var(--sf-ease), color 0.3s var(--sf-ease), border-color 0.3s var(--sf-ease); } .sf-whatsapp:hover, .sf-whatsapp:focus-visible { border-color: var(--sf-ink); background-color: var(--sf-ink); color: var(--sf-surface); } .sf-whatsapp .fab, .sf-whatsapp .svg-inline--fa { font-size: 1.4rem; } /* -------------------------------------------------------------------------- 18b. WhatsApp Popup (CTA automático) -------------------------------------------------------------------------- */ .sf-wa-popup { position: fixed; inset: 0; z-index: 1050; display: flex; align-items: flex-end; justify-content: flex-end; padding: clamp(1rem, 2vw, 1.75rem); background-color: rgba(0, 0, 0, 0); pointer-events: none; transition: background-color var(--sf-speed) var(--sf-ease); } .sf-wa-popup.is-visible { pointer-events: auto; background-color: rgba(0, 0, 0, 0.24); } .sf-wa-popup-card { position: relative; width: 100%; max-width: 22rem; padding: 1.75rem 1.5rem 1.5rem; background-color: var(--sf-surface); border: 1px solid var(--sf-line-strong); box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.18); opacity: 0; transform: translateY(0.75rem); transition: opacity var(--sf-speed) var(--sf-ease), transform var(--sf-speed) var(--sf-ease); } .sf-wa-popup.is-visible .sf-wa-popup-card { opacity: 1; transform: translateY(0); } .sf-wa-popup-close { position: absolute; top: 0.5rem; right: 0.75rem; border: 0; background: none; color: var(--sf-muted); font-size: 1.5rem; line-height: 1; cursor: pointer; } .sf-wa-popup-close:hover, .sf-wa-popup-close:focus-visible { color: var(--sf-ink); } .sf-wa-popup-eyebrow { margin: 0 0 0.35rem; font-size: 0.7rem; letter-spacing: var(--sf-track-md); text-transform: uppercase; color: var(--sf-muted); } .sf-wa-popup-title { margin: 0 0 0.5rem; font-size: 1.05rem; line-height: 1.35; color: var(--sf-ink); } .sf-wa-popup-text { margin: 0 0 1.1rem; font-size: 0.875rem; line-height: 1.5; color: var(--sf-ink-soft); } .sf-wa-popup-cta { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--sf-ink); background-color: var(--sf-ink); color: var(--sf-surface); text-decoration: none; font-size: 0.875rem; transition: background-color var(--sf-speed) var(--sf-ease), color var(--sf-speed) var(--sf-ease); } .sf-wa-popup-cta:hover, .sf-wa-popup-cta:focus-visible { background-color: var(--sf-surface); color: var(--sf-ink); } /* -------------------------------------------------------------------------- 19. Utilidades -------------------------------------------------------------------------- */ .sf-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sf-clamp-3 { -webkit-line-clamp: 3; } .sf-muted { color: var(--sf-muted); } .sf-stretched::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* Los zooms de fotografía son decorativos: se apagan si el usuario pidió menos movimiento. Los cambios de color y opacidad se conservan porque comunican estado. */ @media (prefers-reduced-motion: reduce) { .sf-nav-dropdown.dropdown-menu.show { animation: none; } .sf-tile-media, .sf-product-media, .sf-figure img, .sf-article-media img, .sf-offcanvas-toggle > :last-child { transition: none; } .sf-tile:hover .sf-tile-media, .sf-tile:focus-visible .sf-tile-media, .sf-product:hover .sf-product-media, .sf-figure:hover img, .sf-article:hover .sf-article-media img { transform: none; } }