/* ============================================================
FELIPÃO — LUXURY CONTEMPORARY SCULPTURE
Design System · Mobile-First
============================================================ */
/* Las fuentes se declaran en /fonts/fonts.css y se cargan con su propio
en layouts/site.blade.php. No se hace @import aquí: uno encadena
la descarga (el navegador tiene que bajar y leer ESTA hoja para
enterarse de que existen), mientras que dos van en paralelo. */
/* ── Variables ────────────────────────────────────────────── */
:root {
--c-bg: #FAFAF8;
--c-bg-2: #F2F2EF;
--c-surface: #EAEAE7;
--c-border: #E0E0DC;
--c-text: #0C0C0A;
--c-text-2: #5C5C57;
--c-text-3: #9C9C96;
--c-gold: #C4954A;
--c-gold-light: #DEB97A;
--c-white: #FFFFFF;
--c-red: #E0162B;
--c-circle: #BDB76B;
/* Tenor Sans es una sans humanista, así que los respaldos también lo son:
con los de antes (Constantia/Georgia) una caída habría cambiado los
titulares a una romana, que es otra cosa muy distinta. */
--font-display: 'Tenor Sans', 'Optima', 'Candara', 'Segoe UI', sans-serif;
--font-body: 'DM Sans', sans-serif;
--nav-h: 68px;
--max-w: 1440px;
--ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
--t-fast: 0.2s var(--ease-out);
--t-base: 0.45s var(--ease-out);
--t-slow: 0.8s var(--ease-out);
--shadow-s: 0 2px 12px rgba(0,0,0,0.06);
--shadow-m: 0 8px 32px rgba(0,0,0,0.09);
--shadow-l: 0 20px 64px rgba(0,0,0,0.12);
/* ── Colores del logo Felipão (F·E·L·I·P·A·O) ── */
--logo-f: #df241e; /* F */
--logo-e: #dca202; /* E */
--logo-l: #5aac8a; /* L */
--logo-i: #614480; /* I */
--logo-p: #df241e; /* P */
--logo-a: #614480; /* A */
--logo-o: #dca202; /* O */
}
/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { font-family: var(--font-body); background: var(--c-bg); color: var(--c-text); line-height: 1.65; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
/* Imágenes sueltas insertadas dentro de un editor de texto (concepto de la
obra, cuerpo de una noticia, "más detalles" de una colección...): a
diferencia de una miniatura, aquí no hay ningún recorte fijo — se
respeta la proporción real de la imagen tal cual se subió. Sin límite,
una foto más alta que ancha se veía a su altura natural completa, que en
una foto de móvil puede ser más alta que la pantalla entera. Con el
límite, se ve completa pero más estrecha y centrada, como una foto de
revista dentro del texto; una imagen apaisada no llega ni de lejos a este
tope, así que no cambia en nada. */
.accordion-text img,
.news-article__body img,
.event-article__body img,
.artist-body img,
.legal-body img,
.collab-block__intro img {
max-height: min(640px, 70vh);
width: auto;
margin: 1.5rem auto;
}
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul, ol { list-style: none; }
input, select { font-family: inherit; }
/* ── Loader ───────────────────────────────────────────────── */
#loader {
position: fixed; inset: 0; z-index: 9999;
display: none; /* SE OCULTA EL LOADER QUITARLO SI SE DESEA QUE SE VEA , PARA QUE FUNCIONE DESCOMENTAR LO DEL LOADER DENTRO DE MAIN.JS* Y DESCOENTAR EL HTML DEL LOADER EN CADA PLANTILLA */
background: var(--c-bg);
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 28px;
transition: opacity 0.6s var(--ease-in-out), visibility 0.6s;
}
#loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader__logo {
font-family: var(--font-display);
font-size: clamp(2rem, 6vw, 4rem);
font-weight: 300;
letter-spacing: 0.35em;
color: var(--c-text);
text-transform: uppercase;
}
.loader__bar {
width: 120px; height: 1px;
background: var(--c-border);
position: relative; overflow: hidden;
}
.loader__bar::after {
content: '';
position: absolute; left: -100%; top: 0;
width: 100%; height: 100%;
background: var(--c-gold);
animation: barLoad 1.2s var(--ease-in-out) forwards;
}
@keyframes barLoad { to { left: 100%; } }
/* ── Custom Cursor (desktop) ──────────────────────────────── */
/*
@media (hover: hover) and (pointer: fine) {
body { cursor: none; }
a, button, [role="button"] { cursor: none; }
}
#cursor {
display: none;
position: fixed; z-index: 9998;
pointer-events: none;
*/
/* Sin mix-blend-mode: el cursor se ve siempre */
/*
}
@media (hover: hover) and (pointer: fine) {
#cursor { display: block; }
}
/* Punto central — siempre visible gracias al halo blanco */
/*
.cursor__dot {
position: absolute;
width: 7px; height: 7px;
background: var(--c-text);
border-radius: 50%;
transform: translate(-50%, -50%);
*/
/* Halo blanco: hace el punto visible sobre fondos oscuros */
/*
box-shadow: 0 0 0 2px rgba(255,255,255,0.85),
0 0 0 3px rgba(0,0,0,0.12);
transition: width 0.3s var(--ease-out),
height 0.3s var(--ease-out),
opacity 0.3s var(--ease-out),
transform 0.15s var(--ease-out);
will-change: left, top;
}
*/
/* Anillo exterior con lag */
/*
.cursor__ring {
position: absolute;
width: 42px; height: 42px;
border: 1.5px solid var(--c-text);
border-radius: 50%;
transform: translate(-50%, -50%);
opacity: 0.75;
*/
/* Sombra blanca exterior: visible sobre fondos oscuros */
/*
box-shadow: 0 0 0 1px rgba(255,255,255,0.45);
transition: width 0.45s var(--ease-out),
height 0.45s var(--ease-out),
opacity 0.3s var(--ease-out),
border-color 0.3s var(--ease-out),
background 0.3s var(--ease-out);
will-change: left, top;
}
*/
/* Estado hover: punto se contrae, anillo crece y toma color dorado */
/*
body.cursor--hover .cursor__dot {
width: 4px; height: 4px;
opacity: 0.55;
}
body.cursor--hover .cursor__ring {
width: 58px; height: 58px;
opacity: 1;
border-color: var(--c-gold);
background: rgba(196, 149, 74, 0.07);
box-shadow: 0 0 0 1px rgba(255,255,255,0.35),
inset 0 0 0 1px rgba(196,149,74,0.15);
}
*/
/* ── Custom Cursor (desktop) ──────────────────────────────── */
/* Todo va colgado de .has-custom-cursor, que el layout solo pone si el
puntero personalizado está activado en Ajustes generales. Sin esa
condición, al desactivarlo el "cursor: none" seguiría escondiendo el
puntero del sistema y la web se quedaría sin ninguno. */
@media (hover: hover) and (pointer: fine) {
body.has-custom-cursor { cursor: none; }
body.has-custom-cursor a,
body.has-custom-cursor button,
body.has-custom-cursor [role="button"] { cursor: none; }
}
#cursor {
display: none;
position: fixed; z-index: 99999;
pointer-events: none;
mix-blend-mode: difference;
}
@media (hover: hover) and (pointer: fine) {
#cursor { display: block; }
}
/* Punto central */
.cursor__dot {
position: absolute;
width: 6px; height: 6px;
background: #ffffff;
border-radius: 50%;
transform: translate(-50%, -50%);
transition: transform 0.2s var(--ease-out), opacity 0.2s var(--ease-out);
will-change: left, top;
}
/* Elemento exterior: Rombo */
.cursor__ring {
position: absolute;
width: 34px; height: 34px;
border: 2.5px solid #ffffff;
border-radius: 0%;
transform: translate(-50%, -50%) rotate(45deg);
opacity: 1;
transition: width 0.15s cubic-bezier(0.25, 1, 0.5, 1),
height 0.15s cubic-bezier(0.25, 1, 0.5, 1),
opacity 0.15s ease,
border-color 0.15s ease,
background 0.15s ease,
border-radius 0.15s ease;
will-change: left, top;
}
/* ── ESTADO HOVER: El rombo muta a Círculo Dorado ── */
body.cursor--hover .cursor__dot {
transform: translate(-50%, -50%) scale(0.5);
opacity: 0.3;
}
body.cursor--hover .cursor__ring {
width: 46px; height: 46px;
opacity: 1;
border-color: #ffffff;
border-radius: 0%;
transform: translate(-50%, -50%) rotate(45deg);
background: transparent;
}
/* Excepción: punto congelado sobre tarjetas del grid */
body:has(.collection-card:hover) .cursor__dot,
body:has(.news-card:hover) .cursor__dot,
body:has(.event-card:hover) .cursor__dot {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
/* ── Navigation ───────────────────────────────────────────── */
#nav {
position: fixed; top: 0; left: 0; right: 0;
height: var(--nav-h);
z-index: 500;
display: flex; align-items: center; justify-content: space-between;
padding: 0 clamp(20px, 4vw, 56px);
transition: background 0.4s var(--ease-out), box-shadow 0.4s;
}
#nav.scrolled {
background: rgba(250, 250, 248, 0.92);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow: 0 1px 0 var(--c-border);
}
/* .nav__logo {
font-family: var(--font-display);
font-size: 1.45rem;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--c-text);
position: relative; z-index: 2;
} */
/* 🌟 MODIFICADO: Adaptado para contener la imagen del logo en la cabecera */
.nav__logo {
display: flex;
align-items: center;
position: relative;
z-index: 2;
margin-right: auto; /* empuja enlaces, idioma y carrito a la derecha */
/* Definimos la altura máxima que tendrá el logo en la cabecera */
height: 28px;
}
/* 🌟 NUEVO: Controla el tamaño y comportamiento de la imagen del logo en el nav */
.nav__logo-img {
height: 100%;
width: auto;
display: block;
object-fit: contain;
}
/* Oculta el logo del header solo en la portada. Descomentar si se quiere
volver a ocultar (p. ej. porque el hero ya muestra el logo grande). */
/* html.page-index .nav__logo {
visibility: hidden;
} */
.nav__links {
display: none;
gap: 40px;
align-items: center;
}
@media (min-width: 768px) { .nav__links { display: flex; } }
.nav__links a {
font-size: 0.75rem;
font-weight: 400;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--c-text-2);
transition: color var(--t-fast);
position: relative;
}
.nav__links a::after {
content: '';
position: absolute; bottom: -3px; left: 0; right: 100%;
height: 1px; background: var(--c-gold);
transition: right 0.3s var(--ease-out);
}
.nav__links a:hover { color: var(--c-text); }
.nav__links a:hover::after { right: 0; }
.nav__menu-btn {
width: 32px; height: 20px;
position: relative; z-index: 2;
display: flex; flex-direction: column; justify-content: space-between;
margin-left: 16px;
}
@media (min-width: 768px) { .nav__menu-btn { display: none; } }
.nav__menu-btn span {
display: block; width: 100%; height: 3px;
background: var(--c-text);
box-shadow: 1px 1px 0 #ffffff;
transition: transform 0.4s var(--ease-in-out), opacity 0.3s;
transform-origin: center;
}
#nav.menu-open .nav__menu-btn span:first-child { transform: translateY(9.5px) rotate(45deg); }
#nav.menu-open .nav__menu-btn span:last-child { transform: translateY(-9.5px) rotate(-45deg); }
/* ── Selector de idioma (desktop) ─────────────────────────── */
.nav__lang {
display: none;
align-items: center; gap: 8px;
margin-left: clamp(20px, 2.5vw, 36px);
}
@media (min-width: 768px) { .nav__lang { display: flex; } }
.nav__lang-btn {
font-size: 0.72rem; letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--c-text-3);
background: none; border: none; padding: 0;
transition: color var(--t-fast);
}
.nav__lang-btn:hover { color: var(--c-text); }
.nav__lang-btn.active { color: var(--c-text); font-weight: 500; }
.nav__lang-sep { color: var(--c-border); font-size: 0.72rem; }
/* ── Buscador del nav (escritorio): lupa + panel desplegable ─ */
.nav__search {
position: relative;
display: none;
margin-left: clamp(14px, 1.8vw, 22px);
}
@media (min-width: 768px) { .nav__search { display: block; } }
.nav__search-btn {
display: inline-flex; align-items: center; justify-content: center;
color: var(--c-text);
transition: opacity var(--t-fast);
}
.nav__search-btn:hover,
.nav__search-btn[aria-expanded="true"] { opacity: 0.55; }
.nav__search-btn svg { display: block; width: 20px; height: 20px; }
.nav-search-panel {
position: absolute; top: calc(100% + 20px); right: -12px;
width: min(360px, 88vw);
background: var(--c-white);
border: 1px solid var(--c-border);
box-shadow: var(--shadow-m);
padding: 14px;
}
.nav-search-panel[hidden] { display: none; }
.nav-search-panel__field,
.mobile-menu__search-field {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px;
border: 1px solid var(--c-border);
color: var(--c-text-3);
}
.nav-search-panel__field svg,
.mobile-menu__search-field svg { width: 16px; height: 16px; flex-shrink: 0; }
.nav-search-panel__input,
.mobile-menu__search-input {
flex: 1; min-width: 0;
border: none; background: none; outline: none;
font-size: 0.85rem; color: var(--c-text);
font-family: inherit;
}
.nav-search-panel__input::placeholder,
.mobile-menu__search-input::placeholder { color: var(--c-text-3); }
/* Cromo por defecto del navegador en el botón de borrar de un input
search — se sustituye por uno propio más sobrio en :hover del campo. */
.nav-search-panel__input::-webkit-search-cancel-button,
.mobile-menu__search-input::-webkit-search-cancel-button { cursor: pointer; }
.nav-search-panel__results {
margin-top: 4px;
max-height: 60vh;
overflow-y: auto;
}
.search-result-empty {
padding: 16px 4px;
font-size: 0.78rem; color: var(--c-text-3);
text-align: center;
}
.search-result {
display: flex; align-items: center; gap: 12px;
padding: 10px 4px;
border-top: 1px solid var(--c-border);
transition: opacity var(--t-fast);
}
.nav-search-panel__results .search-result:first-child,
.mobile-menu__search-results .search-result:first-child { border-top: none; }
.search-result:hover { opacity: 0.7; }
.search-result__img {
width: 44px; height: 44px; flex-shrink: 0;
background-size: cover; background-position: center;
background-color: var(--c-bg-2);
}
.search-result__body { min-width: 0; flex: 1; }
.search-result__name {
font-size: 0.82rem; color: var(--c-text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-result__meta {
display: flex; align-items: baseline; gap: 6px;
margin-top: 2px;
}
.search-result__collection {
font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--c-gold);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-result__detail {
font-size: 0.7rem; color: var(--c-text-3);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-result__price {
flex-shrink: 0;
font-size: 0.78rem; color: var(--c-text);
font-variant-numeric: tabular-nums;
}
/* ── Buscador del nav (móvil): dentro del propio menú, sin desplegable ── */
.mobile-menu__search {
width: min(320px, 80vw);
margin-top: 8px;
}
.mobile-menu__search-results {
max-height: 34vh;
overflow-y: auto;
}
.mobile-menu__search-results:not(:empty) { margin-top: 4px; }
/* Selector de idioma (menú móvil) */
.mobile-menu__lang {
display: flex; align-items: center; gap: 12px;
margin-bottom: 18px;
}
.mobile-menu__lang-btn {
font-size: 0.95rem; letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--c-text-3);
background: none; border: none; padding: 0;
transition: color var(--t-fast);
}
.mobile-menu__lang-btn:hover { color: var(--c-text); }
.mobile-menu__lang-btn.active { color: var(--c-text); font-weight: 500; }
.mobile-menu__lang-sep { color: var(--c-border); }
/* ── Icono de carrito (header, siempre visible) ───────────── */
.nav__cart {
position: relative;
display: inline-flex; align-items: center; justify-content: center;
color: var(--c-text);
margin-left: clamp(14px, 1.8vw, 22px);
transition: opacity var(--t-fast);
}
.nav__cart:hover { opacity: 0.55; }
.nav__cart svg { display: block; width: 22px; height: 22px; }
@media (max-width: 767px) {
.nav__cart svg { width: 27px; height: 27px; }
}
.nav__cart-count {
position: absolute; top: -5px; right: -8px;
min-width: 16px; height: 16px; padding: 0 4px;
display: flex; align-items: center; justify-content: center;
font-size: 0.6rem; font-weight: 600; line-height: 1;
color: #fff; background: var(--c-red);
border-radius: 100px;
}
.nav__cart-count[hidden] { display: none; }
/* ── Icono de lista de deseos (header) ────────────────────── */
.nav__wish {
position: relative;
display: inline-flex; align-items: center; justify-content: center;
color: var(--c-text);
margin-left: clamp(14px, 1.8vw, 22px);
transition: opacity var(--t-fast);
}
.nav__wish:hover { opacity: 0.55; }
.nav__wish svg { display: block; width: 22px; height: 22px; }
@media (max-width: 767px) { .nav__wish svg { width: 26px; height: 26px; } }
.nav__wish-count {
position: absolute; top: -5px; right: -8px;
min-width: 16px; height: 16px; padding: 0 4px;
display: flex; align-items: center; justify-content: center;
font-size: 0.6rem; font-weight: 600; line-height: 1;
color: #fff; background: var(--c-red);
border-radius: 100px;
}
.nav__wish-count[hidden] { display: none; }
/* ── Mobile Menu ──────────────────────────────────────────── */
#mobile-menu {
position: fixed; inset: 0; z-index: 400;
background: var(--c-bg);
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 8px;
opacity: 0; visibility: hidden;
transition: opacity 0.4s var(--ease-in-out), visibility 0.4s;
}
/* z-index por encima del banner de cookies (2000): al añadir el buscador
el menú creció lo bastante para que su parte baja quedara detrás del
banner mientras estuviera sin responder — con esto, abierto, tapa
cualquier otra cosa fija de la página, banner incluido. */
#mobile-menu.open { opacity: 1; visibility: visible; z-index: 2001; }
.mobile-menu__link {
font-family: var(--font-display);
font-size: clamp(2.4rem, 8vw, 4rem);
font-weight: 300;
letter-spacing: 0.08em;
color: var(--c-text);
padding: 12px 0;
transform: translateY(20px); opacity: 0;
transition: color var(--t-fast), transform 0.5s var(--ease-out), opacity 0.5s var(--ease-out);
}
#mobile-menu.open .mobile-menu__link { transform: translateY(0); opacity: 1; }
#mobile-menu.open .mobile-menu__link:nth-child(2) { transition-delay: 0.05s; }
#mobile-menu.open .mobile-menu__link:nth-child(3) { transition-delay: 0.1s; }
#mobile-menu.open .mobile-menu__link:nth-child(4) { transition-delay: 0.15s; }
.mobile-menu__link:hover { color: var(--c-gold); }
.mobile-menu__sub {
margin-top: 32px;
font-size: 0.8rem;
letter-spacing: 0.15em;
color: var(--c-text-3);
text-transform: uppercase;
}
/* ── Hero ─────────────────────────────────────────────────── */
.hero {
height: 100svh; min-height: 600px;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
padding: 0 24px;
text-align: center;
position: relative;
overflow: hidden;
}
/* 🌟 NUEVO: Estilos para que el vídeo ocupe todo el fondo sin deformarse */
.hero__video {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
object-fit: cover; /* Hace que funcione como un background-size: cover */
transform: translate(-50%, -50%);
z-index: 1; /* Se queda al fondo */
}
@media (max-width: 767px) {
.hero__video { object-position: left center; }
}
/* 🌟 NUEVO: Capa clara para garantizar el contraste de las letras de lujo */
.hero__overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*background: rgba(255, 255, 255, 0.20);*/
/* background: rgba(0, 0, 0, 0.55); */
background: rgba(255, 255, 255, 0.4);
z-index: 2; /* Por encima del vídeo */
}
/* 🌟 MODIFICADO: Añadido z-index: 3 y posición relativa para flotar sobre el vídeo */
.hero__eyebrow {
position: relative;
z-index: 3;
font-size: 0.7rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--c-gold);
margin-bottom: 20px;
opacity: 0; transform: translateY(10px);
animation: fadeUp 0.8s 0.3s var(--ease-out) forwards;
}
/* 🌟 MODIFICADO: Añadido z-index: 3 y posición relativa */
/* .hero__title {
position: relative;
z-index: 3;
font-family: var(--font-display);
font-size: clamp(5rem, 18vw, 16rem);
font-weight: 300;
letter-spacing: 0.18em;
line-height: 0.92;
text-transform: uppercase;
color: var(--c-text);
opacity: 0; transform: translateY(30px);
animation: fadeUp 1s 0.5s var(--ease-out) forwards;
} */
/* 🌟 MODIFICADO: Adaptado para contener una imagen con animación */
.hero__title {
position: relative;
z-index: 3;
width: 100%;
max-width: 550px; /* Controla el ancho máximo del logo en pantallas grandes */
margin: 0 auto;
opacity: 0;
transform: translateY(30px);
animation: fadeUp 1s 0.5s var(--ease-out) forwards;
}
/* 🌟 NUEVO: Asegura que el logo sea responsivo y se vea nítido */
.hero__logo-img {
width: 100%;
height: auto;
display: block;
}
/* 🌟 MODIFICADO: Añadido z-index: 3 y posición relativa */
.hero__subtitle {
position: relative;
z-index: 3;
margin-top: 24px;
font-size: clamp(0.8rem, 1.5vw, 0.95rem);
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--c-text-2);
font-weight: 300;
opacity: 0; transform: translateY(10px);
animation: fadeUp 0.8s 0.9s var(--ease-out) forwards;
}
/* 🌟 MODIFICADO: Añadido z-index: 3 (La posición absolute ya la tenía) */
.hero__scroll {
z-index: 3;
position: absolute; bottom: 40px; left: 50%;
transform: translateX(-50%);
display: flex; flex-direction: column;
align-items: center; gap: 12px;
opacity: 0;
animation: fadeUp 0.8s 1.3s var(--ease-out) forwards;
}
.hero__scroll span {
font-size: 0.65rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--c-text-3);
}
.hero__scroll-line {
width: 1px; height: 50px;
background: var(--c-border);
position: relative; overflow: hidden;
}
.hero__scroll-line::after {
content: '';
position: absolute; top: -100%; left: 0;
width: 100%; height: 100%;
background: var(--c-gold);
animation: scrollLine 1.5s 2s var(--ease-in-out) infinite;
}
@keyframes scrollLine {
0% { top: -100%; }
50% { top: 0; }
100% { top: 100%; }
}
/* ── Section Header ───────────────────────────────────────── */
.section-header {
padding: clamp(48px, 8vw, 100px) clamp(24px, 6vw, 80px) clamp(32px, 5vw, 60px);
display: flex; flex-direction: column; gap: 8px;
}
@media (min-width: 768px) {
.section-header { flex-direction: row; align-items: baseline; justify-content: space-between; }
}
.section-header__title {
font-family: var(--font-display);
font-size: clamp(1.8rem, 4vw, 3rem);
font-weight: 400;
letter-spacing: 0.04em;
}
.section-header__meta {
font-size: 0.75rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--c-text-3);
}
/* ── Collections Grid ─────────────────────────────────────── */
.collections-grid {
display: grid;
grid-template-columns: 1fr;
grid-auto-rows: 100vh;
gap: 15px;
background: var(--c-surface);
margin: 0;
}
@media (min-width: 1100px) {
.collections-grid { grid-template-columns: repeat(3, 1fr); }
/* Anchura del elemento dentro del grid de 3 columnas */
.collections-grid .double { grid-column: span 2; }
.collections-grid .triple { grid-column: span 3; }
}
/* ── Collection Card ──────────────────────────────────────── */
.collection-card {
display: block;
position: relative;
overflow: hidden;
height: 100%;
background: var(--c-white);
will-change: transform;
}
.card__media {
position: absolute; inset: 0;
transition: transform var(--t-slow);
transform: scale(1.04);
}
.collection-card:hover .card__media { transform: scale(1.12); }
.card__media-layer {
position: absolute; inset: 0;
background-size: cover; background-position: center;
opacity: 0;
transition: opacity 0.9s ease;
}
.card__media-layer--active { opacity: 1; }
.card__overlay {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(8,8,6,0.72) 0%, rgba(8,8,6,0.30) 35%, transparent 70%);
transition: opacity var(--t-base);
}
.collection-card:hover .card__overlay { opacity: 0.9; }
.card__info {
position: absolute; bottom: 0; left: 0; right: 0;
padding: clamp(20px, 3vw, 36px);
color: var(--c-white);
display: flex; flex-direction: column; gap: 6px;
transform: translateY(0);
transition: transform var(--t-base);
}
.card__count {
font-size: 1.05rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255,255,255,1);
transition: color var(--t-base);
}
.collection-card:hover .card__count { color: rgba(255,255,255,1); }
.card__title {
font-family: var(--font-display);
font-size: clamp(2.4rem, 5.25vw, 3.9rem);
font-weight: 400;
letter-spacing: 0.04em;
line-height: 1.1;
}
.card__arrow {
display: inline-flex; align-items: center; gap: 10px;
font-size: 1.08rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255,255,255,0.0);
margin-top: 4px;
transition: color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.card__arrow svg { width: 22px; height: 8px; }
.collection-card:hover .card__arrow { color: rgba(255,255,255,0.85); transform: translateX(4px); }
/* ── About Strip ──────────────────────────────────────────── */
.about-strip {
padding: clamp(60px, 10vw, 120px) clamp(24px, 8vw, 120px);
display: grid; gap: 48px;
align-items: center;
}
@media (min-width: 900px) {
.about-strip { grid-template-columns: 1fr 1fr; gap: 80px; }
}
.about-strip__label {
font-size: 0.7rem; letter-spacing: 0.25em;
text-transform: uppercase; color: var(--c-gold);
margin-bottom: 20px;
}
.about-strip__title {
font-family: var(--font-display);
font-size: clamp(2rem, 4.5vw, 3.6rem);
font-weight: 400; line-height: 1.2;
letter-spacing: 0.02em;
}
.about-strip__body {
font-size: clamp(0.9rem, 1.2vw, 1rem);
color: var(--c-text-2); line-height: 1.85;
margin-top: 20px;
}
.about-strip__cta {
display: inline-flex; align-items: center; gap: 12px;
margin-top: 32px;
font-size: 0.78rem; letter-spacing: 0.16em;
text-transform: uppercase; font-weight: 500;
color: var(--c-text);
border-bottom: 1px solid var(--c-text);
padding-bottom: 4px;
transition: color var(--t-fast), border-color var(--t-fast);
}
.about-strip__cta:hover { color: var(--c-gold); border-color: var(--c-gold); }
.about-strip__image {
aspect-ratio: 4/5;
background: linear-gradient(135deg, #C4954A 0%, #DEB97A 50%, #E8C88A 100%);
border-radius: 2px;
overflow: hidden;
}
/* ── Stats ────────────────────────────────────────────────── */
.stats {
padding: clamp(48px, 7vw, 80px) clamp(24px, 6vw, 80px);
border-top: 1px solid var(--c-border);
border-bottom: 1px solid var(--c-border);
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px 0;
}
@media (min-width: 768px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { text-align: center; }
.stat__num {
font-family: var(--font-display);
font-size: clamp(2.4rem, 5vw, 4rem);
font-weight: 300;
letter-spacing: 0.05em;
color: var(--c-text);
display: block;
}
.stat__label {
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--c-text-3);
margin-top: 6px;
}
/* ── Modal Precio Bajo Solicitud ──────────────────────────── */
.modal-sol {
position: fixed; inset: 0; z-index: 500;
display: flex; align-items: center; justify-content: center;
}
.modal-sol[hidden] { display: none; }
.modal-sol:not([hidden]) { animation: modalFadeIn 300ms ease both; }
@keyframes modalFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.modal-sol__overlay {
position: absolute; inset: 0;
background: rgba(10,10,8,0.6);
backdrop-filter: blur(4px);
}
.modal-sol__panel {
position: relative; z-index: 1;
background: var(--c-bg);
width: min(92vw, 960px);
max-height: 90svh;
overflow-y: auto;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
}
@media (max-width: 700px) {
.modal-sol__panel { grid-template-columns: 1fr; width: 100%; max-height: 100svh; }
}
.modal-sol__close {
position: absolute; top: 20px; right: 20px;
width: 36px; height: 36px;
display: flex; align-items: center; justify-content: center;
color: var(--c-text-2); z-index: 2;
transition: color var(--t-fast);
}
.modal-sol__close:hover { color: var(--c-text); }
/* Columna izquierda: datos de la obra */
.modal-sol__obra {
background: var(--c-bg-2);
padding: clamp(40px, 5vw, 60px) clamp(28px, 4vw, 48px);
display: flex; flex-direction: column; justify-content: center;
}
.modal-sol__obra-img {
width: 100%; aspect-ratio: 4/3;
background-size: cover; background-position: center;
background-color: var(--c-bg-2);
margin-bottom: 24px;
}
.modal-sol__obra-col {
font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--c-gold); margin-bottom: 12px;
}
.modal-sol__obra-title {
font-family: var(--font-display);
font-size: clamp(1.6rem, 3vw, 2.2rem);
line-height: 1.1; margin-bottom: 28px;
}
.modal-sol__obra-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; margin-bottom: 28px; }
.modal-sol__spec dt {
font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--c-text-3); margin-bottom: 4px;
}
.modal-sol__spec dd { font-size: 0.88rem; color: var(--c-text); }
.modal-sol__obra-nota {
font-size: 0.8rem; color: var(--c-text-3); line-height: 1.7;
border-top: 1px solid var(--c-border); padding-top: 20px; margin-top: auto;
}
/* Columna derecha: formulario */
.modal-sol__form {
padding: clamp(40px, 5vw, 60px) clamp(28px, 4vw, 48px);
display: flex; flex-direction: column; gap: 16px;
}
.modal-sol__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 480px) { .modal-sol__row { grid-template-columns: 1fr; } }
.modal-sol__field { display: flex; flex-direction: column; gap: 6px; }
.modal-sol__label {
font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-text-3);
}
.modal-sol__input {
border: 1px solid var(--c-border);
background: var(--c-bg);
color: var(--c-text);
padding: 11px 14px;
font-size: 0.88rem;
font-family: var(--font-body);
outline: none;
transition: border-color var(--t-fast);
}
.modal-sol__input:focus { border-color: var(--c-text); }
.modal-sol__textarea { resize: vertical; min-height: 100px; }
.modal-sol__submit {
margin-top: 4px;
background: var(--c-text); color: var(--c-white);
padding: 16px; font-size: 0.78rem;
letter-spacing: 0.2em; text-transform: uppercase;
transition: background var(--t-fast);
}
.modal-sol__submit:hover { background: var(--c-gold); }
.modal-sol__legal {
font-size: 0.68rem; color: var(--c-text-3); line-height: 1.6;
}
/* ── Footer ───────────────────────────────────────────────── */
footer {
background: var(--c-text);
color: var(--c-white);
padding: clamp(48px, 8vw, 80px) clamp(24px, 6vw, 80px) 32px;
}
.footer__grid {
display: grid; gap: 40px;
margin-bottom: 60px;
}
@media (min-width: 768px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr; } }
/* .footer__brand {
font-family: var(--font-display);
font-size: 1.6rem; font-weight: 300;
letter-spacing: 0.3em; text-transform: uppercase;
margin-bottom: 16px;
} */
/* 🌟 MODIFICADO: Adaptado para contener la imagen del logo en el footer */
.footer__brand {
max-width: 180px; /* Controla el ancho del logo en el pie de página */
height: auto;
margin-bottom: 20px; /* Espacio con el texto de abajo */
}
/* 🌟 NUEVO: Asegura que la imagen sea responsiva dentro del footer */
.footer__brand-img {
width: 100%;
height: auto;
display: block;
}
.footer__tagline { font-size: 0.85rem; color: rgba(255,255,255,0.45); line-height: 1.7; }
.footer__heading {
font-size: 0.65rem; letter-spacing: 0.22em;
text-transform: uppercase; color: rgba(255,255,255,0.35);
margin-bottom: 20px;
}
.footer__links { display: flex; flex-direction: column; gap: 12px; }
.footer__links a {
font-size: 0.85rem; color: rgba(255,255,255,0.6);
transition: color var(--t-fast);
}
.footer__links a:hover { color: var(--c-white); }
.footer__social {
display: flex; flex-direction: row; gap: 20px;
margin-top: 24px;
}
.footer__social a {
color: rgba(255,255,255,0.5);
transition: color var(--t-fast);
display: flex; align-items: center;
}
.footer__social svg { width: 24px; height: 24px; }
.footer__social a:hover { color: var(--c-white); }
.footer__bottom {
display: flex; flex-direction: column; gap: 8px;
border-top: 1px solid rgba(255,255,255,0.08);
padding-top: 28px;
font-size: 0.72rem; color: rgba(255,255,255,0.25);
}
@media (min-width: 600px) {
.footer__bottom { flex-direction: row; justify-content: space-between; }
}
/* ═══════════════════════════════════════════════════════════
COLLECTION PAGE
═══════════════════════════════════════════════════════════ */
.collection-hero {
min-height: 80svh;
display: grid;
/* minmax(0, 1fr) y no solo "1fr": una columna auto/1fr sin el mínimo a 0
crece para caber el max-content de sus hijos (aquí, los 480px fijos de
.collection-hero__desc), y en móvil eso es más ancho que la pantalla —
toda la cabecera se salía por la derecha. Con el mínimo a 0 la columna
se queda en el ancho real disponible y el texto envuelve dentro. */
grid-template-columns: minmax(0, 1fr);
position: relative;
overflow: hidden;
}
@media (min-width: 900px) {
.collection-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-top: var(--nav-h); }
}
.collection-hero__media {
order: -1;
margin-top: var(--nav-h);
min-height: 50vw;
background-size: cover; background-position: center;
position: relative;
}
@media (max-width: 899px) {
.collection-hero__media {
min-height: unset;
aspect-ratio: 1;
background-size: contain;
background-color: var(--c-bg);
}
}
@media (min-width: 900px) {
.collection-hero__media { order: 1; min-height: unset; margin-top: 0; }
}
.collection-hero__content {
padding: clamp(40px, 6vw, 80px) clamp(24px, 6vw, 80px);
display: flex; flex-direction: column; justify-content: center;
/* Refuerzo del arreglo de arriba: por defecto, un hijo de grid/flex no se
encoge por debajo del contenido que no puede partirse (una palabra muy
larga, por ejemplo), y eso también puede forzar el ancho hacia fuera. */
min-width: 0;
}
.collection-hero__label {
font-size: 0.7rem; letter-spacing: 0.25em;
text-transform: uppercase; color: var(--c-gold);
margin-bottom: 20px;
}
.collection-hero__title {
font-family: var(--font-display);
font-size: clamp(3rem, 7vw, 6rem);
font-weight: 400; letter-spacing: 0.04em;
line-height: 1;
}
.collection-hero__desc {
margin-top: 24px;
font-size: clamp(0.9rem, 1.2vw, 1.05rem);
color: var(--c-text-2); line-height: 1.85;
/* min() y no solo max-width:480px: en pantallas más estrechas que 480px
(todos los móviles) se queda en el 100% real disponible en vez de en
ese fijo. Cinturón y tirantes junto al minmax(0,1fr) de .collection-hero
de arriba, por si algún navegador no calculase igual el ancho del grid. */
max-width: min(480px, 100%);
overflow-wrap: break-word;
}
.collection-hero__meta {
display: flex; flex-wrap: wrap; gap: 24px;
margin-top: 36px;
}
.meta-item { display: flex; flex-direction: column; gap: 4px; }
.meta-item__value {
font-family: var(--font-display);
font-size: 1.5rem; font-weight: 400;
}
.meta-item__label {
font-size: 0.65rem; letter-spacing: 0.2em;
text-transform: uppercase; color: var(--c-text-3);
}
/* ── Filters ──────────────────────────────────────────────── */
.filters-wrap {
position: sticky; top: var(--nav-h);
z-index: 100;
background: rgba(250,250,248,0.95);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--c-border);
}
.filters-bar {
padding: 0 clamp(20px, 4vw, 56px);
display: flex; align-items: stretch;
gap: 0;
overflow-x: auto;
scrollbar-width: none;
}
.filters-bar::-webkit-scrollbar { display: none; }
.filter-group {
display: flex; align-items: center;
gap: 0;
border-right: 1px solid var(--c-border);
padding: 14px 18px;
flex-shrink: 0;
}
.filter-group:first-child { padding-left: 0; }
.filter-group:last-child { border-right: none; }
.filter-group__label {
font-size: 0.65rem; letter-spacing: 0.2em;
text-transform: uppercase; color: var(--c-text-3);
margin-right: 14px; white-space: nowrap;
}
.filter-chips { display: flex; gap: 6px; }
/* Chips uniformes para todos los filtros */
.chip {
padding: 6px 15px;
font-size: 0.72rem; letter-spacing: 0.1em;
text-transform: uppercase; white-space: nowrap;
border: 1px solid var(--c-border);
border-radius: 100px;
color: var(--c-text-2);
background: transparent;
transition: all var(--t-fast);
}
.chip__unit { text-transform: lowercase; }
.chip:hover { border-color: var(--c-text); color: var(--c-text); }
.chip.active {
background: var(--c-text); color: var(--c-white);
border-color: var(--c-text);
}
/* Disparador del desplegable de color — mismo tamaño que un chip */
.color-trigger {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 15px;
font-size: 0.72rem; letter-spacing: 0.1em;
text-transform: uppercase; white-space: nowrap;
border: 1px solid var(--c-border);
border-radius: 100px;
color: var(--c-text-2);
background: transparent;
transition: all var(--t-fast);
}
.color-trigger:hover,
.color-trigger[aria-expanded="true"] { border-color: var(--c-text); color: var(--c-text); }
.color-trigger__dot {
width: 14px; height: 14px; border-radius: 50%;
border: 1px solid rgba(0,0,0,0.15);
background: var(--sw, transparent);
flex-shrink: 0;
}
.color-trigger__dot--all {
background: conic-gradient(#D7263D, #E87820, #F2C040, #3DA35D, #3AADA8, #2E5EAA, #7B4A9F, #E36BA0, #D7263D);
}
.color-trigger__chevron { color: currentColor; }
/* Panel desplegable de colores — debajo de la barra, ancho completo */
.color-panel {
display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
padding: 18px clamp(20px, 4vw, 56px);
border-top: 1px solid var(--c-border);
background: var(--c-bg);
}
.color-panel[hidden] { display: none; }
/* Desktop — desplegable flotante centrado bajo el disparador, sin ocupar espacio */
@media (min-width: 768px) {
.color-panel {
position: absolute;
top: 100%;
left: var(--color-panel-left, 50%);
transform: translateX(-50%);
width: max-content;
max-width: min(360px, 90vw);
margin-top: -1px;
padding: 18px 20px;
justify-content: center;
border: 1px solid var(--c-border);
border-radius: 4px;
box-shadow: var(--shadow-m);
z-index: 200;
}
}
.color-swatch {
width: 26px; height: 26px; border-radius: 50%;
background: var(--sw, transparent);
border: 1px solid rgba(0,0,0,0.12);
position: relative;
transition: transform var(--t-fast);
flex-shrink: 0;
}
.color-swatch:hover { transform: scale(1.15); }
.color-swatch::after {
content: '';
position: absolute; inset: -4px;
border-radius: 50%; border: 1px solid transparent;
transition: border-color var(--t-fast);
}
.color-swatch.active::after { border-color: var(--c-text); }
.color-swatch--all {
width: auto; height: 26px; border-radius: 100px;
padding: 0 14px;
display: inline-flex; align-items: center;
font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--c-text-2); background: transparent;
}
.color-swatch--all:hover { transform: none; border-color: var(--c-text); color: var(--c-text); }
.color-swatch--all.active {
background: var(--c-text); color: var(--c-white); border-color: var(--c-text);
}
.color-swatch--all::after { display: none; }
/* Tooltip de nombre de color — solo en dispositivos con hover */
@media (hover: hover) {
.color-swatch:not(.color-swatch--all)::before {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: var(--c-text);
color: var(--c-white);
font-size: 0.62rem;
letter-spacing: 0.12em;
text-transform: uppercase;
white-space: nowrap;
padding: 4px 9px;
border-radius: 3px;
pointer-events: none;
opacity: 0;
transition: opacity 0.15s;
z-index: 300;
}
.color-swatch:not(.color-swatch--all):hover::before {
opacity: 1;
transition-delay: 750ms;
}
}
/* ── Filtros — segunda banda (Color + Edición) ────────────── */
.filters-wrap-2 {
position: sticky;
top: calc(var(--nav-h) + var(--filters-1-h, 61px));
z-index: 99;
background: rgba(250,250,248,0.95);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--c-border);
}
/* ── Filtros — tercera banda ("Otros filtros") ────────────── */
.filters-wrap-3 {
position: sticky;
top: calc(var(--nav-h) + var(--filters-1-h, 61px) + var(--filters-2-h, 53px));
z-index: 98;
background: rgba(250,250,248,0.95);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--c-border);
}
.filters-bar-2 {
padding: 0 clamp(20px, 4vw, 56px);
display: flex; align-items: stretch; gap: 0;
overflow-x: auto;
scrollbar-width: none;
}
.filters-bar-2::-webkit-scrollbar { display: none; }
.more-filters-toggle {
display: inline-flex; align-items: center; gap: 8px;
padding: 13px 0;
font-size: 0.7rem; letter-spacing: 0.18em;
text-transform: uppercase; white-space: nowrap;
color: var(--c-text-2);
transition: color var(--t-fast);
}
.more-filters-toggle:hover,
.more-filters-toggle[aria-expanded="true"] { color: var(--c-text); }
.more-filters-toggle__chevron { transition: transform var(--t-fast); }
.more-filters-toggle[aria-expanded="true"] .more-filters-toggle__chevron { transform: rotate(180deg); }
.extra-filters {
display: flex; align-items: stretch; gap: 0;
margin-left: 18px; padding-left: 18px;
border-left: 1px solid var(--c-border);
}
.extra-filters[hidden] { display: none; }
/* Disparador y panel desplegable genéricos (colección) */
.dropdown-trigger {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 15px;
font-size: 0.72rem; letter-spacing: 0.1em;
text-transform: uppercase; white-space: nowrap;
border: 1px solid var(--c-border);
border-radius: 100px;
color: var(--c-text-2);
background: transparent;
transition: all var(--t-fast);
}
.dropdown-trigger:hover,
.dropdown-trigger[aria-expanded="true"] { border-color: var(--c-text); color: var(--c-text); }
.dropdown-trigger__chevron { color: currentColor; }
.dropdown-panel {
display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
padding: 18px clamp(20px, 4vw, 56px);
border-top: 1px solid var(--c-border);
background: var(--c-bg);
}
.dropdown-panel[hidden] { display: none; }
.dropdown-option {
padding: 6px 15px;
font-size: 0.72rem; letter-spacing: 0.1em;
text-transform: uppercase; white-space: nowrap;
border: 1px solid var(--c-border);
border-radius: 100px;
color: var(--c-text-2);
background: transparent;
transition: all var(--t-fast);
}
.dropdown-option:hover { border-color: var(--c-text); color: var(--c-text); }
.dropdown-option.active {
background: var(--c-text); color: var(--c-white); border-color: var(--c-text);
}
/* Desktop — panel flotante centrado bajo el disparador, sin ocupar espacio */
@media (min-width: 768px) {
.dropdown-panel {
position: absolute;
top: 100%;
left: var(--dropdown-left, 50%);
transform: translateX(-50%);
width: max-content; max-width: min(560px, 92vw);
margin-top: -1px;
padding: 18px 20px;
justify-content: flex-start;
border: 1px solid var(--c-border);
border-radius: 4px;
box-shadow: var(--shadow-m);
z-index: 200;
}
}
/* ── Carrito ──────────────────────────────────────────────── */
.cart-page {
max-width: var(--max-w); margin: 0 auto;
padding: calc(var(--nav-h) + clamp(40px, 6vw, 72px)) clamp(20px, 4vw, 56px) clamp(60px, 8vw, 100px);
}
.cart-page__title {
font-family: var(--font-display);
font-size: clamp(2.6rem, 6vw, 4.5rem);
font-weight: 300; line-height: 1; margin-bottom: 8px;
}
.cart-page__sub {
font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--c-text-3); margin-bottom: 48px;
}
.cart-empty { padding: 50px 0; color: var(--c-text-2); font-size: 1.05rem; line-height: 1.7; }
.cart-empty[hidden] { display: none; }
.cart-empty a {
display: inline-block; margin-top: 20px;
font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--c-text); border-bottom: 1px solid var(--c-gold); padding-bottom: 4px;
}
.cart-layout { display: grid; grid-template-columns: 1fr; gap: 48px; }
@media (min-width: 900px) { .cart-layout { grid-template-columns: 1fr 320px; align-items: start; } }
.cart-list { display: flex; flex-direction: column; }
.cart-item {
display: grid;
grid-template-columns: 84px 1fr auto;
grid-template-areas: "media info remove" "media qty subtotal";
gap: 8px 18px; align-items: center;
padding: 24px 0; border-bottom: 1px solid var(--c-border);
}
@media (min-width: 600px) {
.cart-item {
grid-template-columns: 96px 1fr auto auto auto;
grid-template-areas: "media info qty subtotal remove";
gap: 24px;
}
}
.cart-item__media {
grid-area: media;
width: 84px; height: 96px;
background: var(--c-surface) center/cover no-repeat;
}
@media (min-width: 600px) { .cart-item__media { width: 96px; height: 112px; } }
.cart-item__info { grid-area: info; }
.cart-item__collection { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-text-3); margin-bottom: 4px; }
.cart-item__name { font-family: var(--font-display); font-size: 1.35rem; font-weight: 400; line-height: 1.1; }
.cart-item__variant { font-size: 0.8rem; color: var(--c-text-2); margin-top: 4px; }
.cart-item__unit { font-size: 0.8rem; color: var(--c-text-3); margin-top: 6px; }
@media (min-width: 600px) { .cart-item__unit { display: none; } }
.cart-item__qty {
grid-area: qty; display: inline-flex; align-items: center;
border: 1px solid var(--c-border); width: max-content;
}
.cart-item__qty button {
width: 32px; height: 32px; font-size: 1rem; color: var(--c-text);
display: flex; align-items: center; justify-content: center;
transition: background var(--t-fast);
}
.cart-item__qty button:hover { background: var(--c-surface); }
.cart-item__qty-val { min-width: 34px; text-align: center; font-size: 0.9rem; }
.cart-item__subtotal { grid-area: subtotal; font-size: 0.95rem; font-weight: 500; white-space: nowrap; text-align: right; }
.cart-item__remove {
grid-area: remove; justify-self: end;
width: 28px; height: 28px; font-size: 1.3rem; line-height: 1;
color: var(--c-text-3); transition: color var(--t-fast);
}
.cart-item__remove:hover { color: var(--c-text); }
.cart-summary { background: var(--c-bg-2); padding: 28px; }
.cart-summary[hidden] { display: none; }
.cart-summary__heading { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-text-3); margin-bottom: 20px; }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 20px; border-bottom: 1px solid var(--c-border); }
.cart-total__label { font-size: 0.95rem; }
.cart-total__value { font-family: var(--font-display); font-size: 1.6rem; }
.cart-summary__note { font-size: 0.72rem; color: var(--c-text-3); line-height: 1.6; margin: 16px 0 24px; }
.cart-checkout {
width: 100%; padding: 18px;
display: flex; align-items: center; justify-content: center; gap: 10px;
font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500;
background: var(--c-text); color: var(--c-white);
transition: background var(--t-fast);
}
.cart-checkout:hover { background: var(--c-gold); }
.cart-card {
margin-top: 20px;
display: block;
font-size: 0.78rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--c-text);
margin-bottom: 12px;
}
.cart-card-summary {
font-size: 0.72rem; color: var(--c-text); line-height: 1.6; margin: 16px 0 24px;
}
.cart-card-summary a:hover{
color: var(--c-gold);
}
/* ── Lista de deseos ──────────────────────────────────────── */
.wishlist-list { display: flex; flex-direction: column; }
.wishlist-list[hidden] { display: none; }
.wishlist-empty { padding: 50px 0; color: var(--c-text-2); font-size: 1.05rem; line-height: 1.7; }
.wishlist-empty[hidden] { display: none; }
.wishlist-empty a {
display: inline-block; margin-top: 20px;
font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--c-text); border-bottom: 1px solid var(--c-gold); padding-bottom: 4px;
}
.wishlist-item {
display: grid;
grid-template-columns: 84px 1fr;
grid-template-areas: "media info" "media actions";
gap: 12px 18px; align-items: center;
padding: 24px 0; border-bottom: 1px solid var(--c-border);
}
@media (min-width: 600px) {
.wishlist-item {
grid-template-columns: 96px 1fr auto;
grid-template-areas: "media info actions";
gap: 24px;
}
}
.wishlist-item__media {
grid-area: media; width: 84px; height: 96px;
background: var(--c-surface) center/cover no-repeat;
}
@media (min-width: 600px) { .wishlist-item__media { width: 96px; height: 112px; } }
.wishlist-item__info { grid-area: info; }
.wishlist-item__collection { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-text-3); margin-bottom: 4px; }
.wishlist-item__name { font-family: var(--font-display); font-size: 1.35rem; font-weight: 400; line-height: 1.1; }
.wishlist-item__variant { font-size: 0.8rem; color: var(--c-text-2); margin-top: 4px; }
.wishlist-item__price { font-size: 0.95rem; font-weight: 500; margin-top: 6px; }
.wishlist-item__actions { grid-area: actions; display: flex; align-items: center; gap: 14px; }
.wishlist-item__add {
padding: 10px 18px; font-size: 0.72rem; letter-spacing: 0.14em;
text-transform: uppercase; white-space: nowrap;
border: 1px solid var(--c-text); color: var(--c-text); background: transparent;
transition: all var(--t-fast);
}
.wishlist-item__add:hover { background: var(--c-text); color: var(--c-white); }
.wishlist-item__remove {
width: 28px; height: 28px; font-size: 1.3rem; line-height: 1;
color: var(--c-text-3); transition: color var(--t-fast);
}
.wishlist-item__remove:hover { color: var(--c-text); }
/* ── Products Grid ────────────────────────────────────────── */
.products-grid {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
background: var(--c-bg-2);
padding: 12px;
}
@media (min-width: 768px) { .products-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .products-grid { grid-template-columns: repeat(4, 1fr); } }
.product-card {
display: block;
background: var(--c-white);
overflow: hidden;
position: relative;
transition: box-shadow var(--t-base);
}
.product-card:hover { box-shadow: var(--shadow-m); z-index: 2; }
.product-card__media {
aspect-ratio: 3/4;
overflow: hidden;
position: relative;
}
.product-card__img {
width: 100%; height: 100%;
object-fit: cover;
background-size: cover; background-position: center;
transition: transform var(--t-slow);
}
.product-card:hover .product-card__img { transform: scale(1.06); }
/* Cinta promocional ("Oferta"…), atravesando en diagonal la esquina
superior izquierda de la miniatura. Se dibuja con CSS (banda girada
-45°) en vez de con la imagen ribbon_red.png: así los 4 colores son
colores de la propia marca (ver felipao-admin-design-system en memoria)
y añadir uno nuevo el día de mañana es una línea de CSS, no un archivo
de imagen nuevo que encargar y volver a alinear a mano. */
.product-card__ribbon {
position: absolute;
top: 43px; left: -43px;
width: 200px;
padding: 10px 0;
transform: rotate(-45deg);
transform-origin: center;
text-align: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.25);
pointer-events: none;
z-index: 1;
}
.product-card__ribbon--red { background: linear-gradient(135deg, #E0162B, #A80F1F); }
.product-card__ribbon--green { background: linear-gradient(135deg, #3DA35D, #276B3C); }
.product-card__ribbon--golden { background: linear-gradient(135deg, #C4954A, #96712F); }
.product-card__ribbon--silver { background: linear-gradient(135deg, #B9BEC5, #888D94); }
.product-card__ribbon-text {
display: block;
color: #fff;
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
line-height: 1;
text-shadow: 0 1px 1px rgba(0,0,0,0.25);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 6px;
}
.product-card__quick {
/* Antes ponía "inset-x: 0", que no es CSS —es un nombre de utilidad de
Tailwind— así que el navegador lo ignoraba: sin left ni right, el
bloque se quedaba en su posición estática, abajo a la izquierda, justo
encima del precio. Anclado a la derecha, el precio queda a la vista. */
position: absolute; right: 0; bottom: 0;
padding: 16px;
display: flex; gap: 8px; align-items: stretch;
background: rgba(250,250,248,0.9);
backdrop-filter: blur(8px);
transform: translateY(100%);
transition: transform 0.35s var(--ease-out);
}
.product-card:hover .product-card__quick { transform: translateY(0); }
.btn-quick {
flex: 1;
padding: 12px;
font-size: 0.72rem; letter-spacing: 0.14em;
text-transform: uppercase; font-weight: 500;
background: var(--c-text); color: var(--c-white);
transition: background var(--t-fast);
}
.btn-quick:hover { background: var(--c-gold); }
.btn-quick-wish {
flex-shrink: 0;
width: 44px;
display: flex; align-items: center; justify-content: center;
background: var(--c-text); color: var(--c-white);
transition: background var(--t-fast);
}
.btn-quick-wish:hover { background: var(--c-gold); }
.btn-quick-wish svg { width: 18px; height: 18px; }
.btn-quick-wish.is-active svg { fill: var(--c-white); stroke: var(--c-white); }
.product-card__body {
padding: 16px clamp(12px, 2vw, 20px) 20px;
}
.product-card__name {
font-family: var(--font-display);
font-size: clamp(1rem, 1.8vw, 1.2rem);
font-weight: 400; letter-spacing: 0.02em;
}
.product-card__variant {
font-size: 0.72rem; color: var(--c-text-3);
margin-top: 4px; letter-spacing: 0.08em;
}
.product-card__price {
font-size: 0.88rem; font-weight: 500;
color: var(--c-text); margin-top: 10px;
}
/* ═══════════════════════════════════════════════════════════
PRODUCT DETAIL PAGE
═══════════════════════════════════════════════════════════ */
.breadcrumb {
padding: calc(var(--nav-h) + 20px) clamp(20px,4vw,56px) 0;
display: flex; gap: 8px; align-items: center;
flex-wrap: wrap;
}
.breadcrumb a, .breadcrumb span {
font-size: 0.72rem; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--c-text-3);
transition: color var(--t-fast);
}
.breadcrumb a:hover { color: var(--c-text); }
.breadcrumb__sep { color: var(--c-border); font-size: 0.7rem; }
.breadcrumb__current { color: var(--c-text-2); }
.product-layout {
display: grid;
gap: 0;
padding: 24px clamp(20px, 4vw, 56px) 120px;
}
@media (min-width: 900px) {
.product-layout { grid-template-columns: 56% 1fr; gap: 60px; padding-bottom: 80px; }
}
@media (min-width: 1200px) { .product-layout { gap: 100px; } }
/* Gallery */
.gallery {
display: flex; flex-direction: column; gap: 10px;
}
@media (min-width: 900px) {
.gallery {
position: sticky;
top: var(--nav-h);
height: calc(100svh - var(--nav-h));
}
}
.gallery__main {
aspect-ratio: 4/5;
overflow: hidden; border-radius: 2px;
position: relative; background: var(--c-bg-2);
}
@media (min-width: 900px) {
.gallery__main {
flex: 1;
min-height: 0;
aspect-ratio: unset;
}
}
.gallery__main-img {
width: 100%; height: 100%;
object-fit: cover; background-size: cover; background-position: center;
transition: transform var(--t-slow), opacity 0.3s;
cursor: zoom-in;
}
.gallery__thumbs {
display: flex; gap: 8px; overflow-x: auto;
scrollbar-width: none;
}
.gallery__thumbs::-webkit-scrollbar { display: none; }
.gallery__thumb {
flex-shrink: 0;
width: clamp(60px, 18%, 90px);
aspect-ratio: 4/5;
border-radius: 2px;
border: 1.5px solid transparent;
overflow: hidden; cursor: pointer;
background-size: cover; background-position: center;
transition: border-color var(--t-fast), opacity var(--t-fast);
opacity: 0.55;
}
.gallery__thumb.active { border-color: var(--c-text); opacity: 1; }
.gallery__thumb:hover { opacity: 0.85; }
/* Product Info */
.product-info {
padding-top: 8px;
}
@media (min-width: 900px) { .product-info { padding-top: 16px; } }
.product-info__collection {
font-size: 0.68rem; letter-spacing: 0.25em;
text-transform: uppercase; color: var(--c-gold);
margin-bottom: 14px;
}
.product-info__title {
font-family: var(--font-display);
font-size: clamp(2rem, 4.5vw, 3.4rem);
font-weight: 400; letter-spacing: 0.03em;
line-height: 1.05;
}
.product-info__edition {
margin-top: 12px;
font-size: 0.75rem; letter-spacing: 0.15em;
text-transform: uppercase; color: var(--c-text-3);
}
.product-info__price {
margin-top: 28px;
font-family: var(--font-display);
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-weight: 400; letter-spacing: 0.05em;
}
.product-info__price-note {
font-size: 0.72rem; color: var(--c-text-3);
margin-top: 4px; letter-spacing: 0.1em;
}
.product-info__divider {
height: 1px; background: var(--c-border);
margin: 28px 0;
}
/* Variant selectors */
.variant-section { margin-bottom: 24px; }
.variant-label {
font-size: 0.68rem; letter-spacing: 0.2em;
text-transform: uppercase; color: var(--c-text-3);
margin-bottom: 12px;
display: flex; align-items: center; gap: 8px;
}
.variant-selected {
color: var(--c-text); font-weight: 500;
text-transform: none; letter-spacing: 0.05em;
}
.color-swatches {
display: flex; flex-wrap: wrap; gap: 10px;
}
.swatch {
width: 34px; height: 34px; border-radius: 50%;
position: relative; cursor: pointer;
transition: transform var(--t-fast);
}
.swatch::after {
content: ''; position: absolute; inset: -2px; top: -2px;
border-radius: 50%; border: 1.5px solid var(--c-circle);
transition: border-color var(--t-fast);
}
.swatch.active::after {inset: -4px; border: 2.5px solid var(--c-text); }
.swatch:hover { transform: scale(1.12); }
.size-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.size-btn {
padding: 10px 20px;
font-size: 0.75rem; letter-spacing: 0.12em;
text-transform: uppercase; font-weight: 400;
border: 1px solid var(--c-border);
color: var(--c-text-2);
transition: all var(--t-fast);
}
.size-btn:hover { border-color: var(--c-text); color: var(--c-text); }
.size-btn.active {
background: var(--c-text); color: var(--c-white);
border-color: var(--c-text);
}
.size-btn.unavailable { opacity: 0.3; pointer-events: none; }
.material-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.material-btn {
padding: 10px 20px;
font-size: 0.75rem; letter-spacing: 0.12em;
text-transform: uppercase; font-weight: 400;
border: 1px solid var(--c-border);
color: var(--c-text-2);
transition: all var(--t-fast);
}
.material-btn:hover { border-color: var(--c-text); color: var(--c-text); }
.material-btn.active {
background: var(--c-text); color: var(--c-white);
border-color: var(--c-text);
}
/* CTA Buttons */
.btn-primary {
width: 100%;
padding: 18px 32px;
font-size: 0.8rem; letter-spacing: 0.2em;
text-transform: uppercase; font-weight: 500;
background: var(--c-text); color: var(--c-white);
transition: background var(--t-fast);
display: flex; align-items: center; justify-content: center; gap: 12px;
}
.btn-primary:hover { background: #1C1C1A; }
.btn-secondary {
width: 100%;
margin-top: 10px;
padding: 16px 32px;
font-size: 0.78rem; letter-spacing: 0.18em;
text-transform: uppercase; font-weight: 400;
border: 1px solid var(--c-border); color: var(--c-text-2);
transition: all var(--t-fast);
display: flex; align-items: center; justify-content: center; gap: 12px;
}
.btn-secondary:hover { border-color: var(--c-text); color: var(--c-text); }
.btn-wishlist__icon { transition: fill var(--t-fast), stroke var(--t-fast); }
.btn-wishlist.is-active { border-color: var(--c-text); color: var(--c-text); }
.btn-wishlist.is-active .btn-wishlist__icon { fill: var(--c-red); stroke: var(--c-red); }
.sticky-cta__wish.is-active svg { fill: var(--c-red); stroke: var(--c-red); }
/* Sticky CTA (mobile) */
.sticky-cta {
display: none;
position: fixed; bottom: 0; left: 0; right: 0;
z-index: 300;
padding: 16px 20px;
background: rgba(250,250,248,0.97);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-top: 1px solid var(--c-border);
gap: 12px;
align-items: center;
transform: translateY(100%);
transition: transform 0.4s var(--ease-out);
}
.sticky-cta.visible { transform: translateY(0); }
@media (max-width: 899px) { .sticky-cta { display: flex; } }
.sticky-cta__price {
font-family: var(--font-display);
font-size: 1.3rem; font-weight: 400;
white-space: nowrap;
}
.sticky-cta__btn {
flex: 1;
padding: 15px 20px;
font-size: 0.75rem; letter-spacing: 0.16em;
text-transform: uppercase; font-weight: 500;
background: var(--c-text); color: var(--c-white);
transition: background var(--t-fast);
}
.sticky-cta__btn:hover { background: var(--c-gold); }
/* Accordion */
.accordion {
border-top: 1px solid var(--c-border);
margin-top: 8px;
}
.accordion-item {
border-bottom: 1px solid var(--c-border);
}
.accordion-trigger {
width: 100%;
display: flex; align-items: center; justify-content: space-between;
padding: 18px 0;
font-size: 0.78rem; letter-spacing: 0.15em;
text-transform: uppercase; font-weight: 500;
color: var(--c-text);
transition: color var(--t-fast);
}
.accordion-trigger:hover { color: var(--c-gold); }
.accordion-icon {
width: 16px; height: 16px; position: relative; flex-shrink: 0;
}
.accordion-icon::before, .accordion-icon::after {
content: '';
position: absolute;
background: currentColor;
transition: transform 0.3s var(--ease-out);
}
.accordion-icon::before { width: 16px; height: 1px; top: 7.5px; left: 0; }
.accordion-icon::after { width: 1px; height: 16px; top: 0; left: 7.5px; }
.accordion-item.open .accordion-icon::after { transform: rotate(90deg); }
.accordion-content {
display: grid; grid-template-rows: 0fr;
transition: grid-template-rows 0.4s var(--ease-out);
}
.accordion-item.open .accordion-content { grid-template-rows: 1fr; }
.accordion-inner {
overflow: hidden;
padding-bottom: 0;
transition: padding 0.4s var(--ease-out);
}
.accordion-item.open .accordion-inner { padding-bottom: 20px; }
.specs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
.spec-item__key {
font-size: 0.68rem; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--c-text-3);
margin-bottom: 4px;
}
.spec-item__val { font-size: 0.88rem; color: var(--c-text); }
.accordion-text { font-size: 0.88rem; color: var(--c-text-2); line-height: 1.85; }
/* ── Scroll Reveal Animations ─────────────────────────────── */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
.reveal {
opacity: 0; transform: translateY(32px);
transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
/* ── Utilities ────────────────────────────────────────────── */
.sr-only {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.container { max-width: var(--max-w); margin: 0 auto; }
.text-gold { color: var(--c-gold); }
.gap-top { margin-top: clamp(60px, 10vw, 120px); }
/* ═══════════════════════════════════════════════════════════
NEWS PAGE
═══════════════════════════════════════════════════════════ */
.news-header {
padding: calc(var(--nav-h) + clamp(20px, 3vw, 36px)) clamp(24px, 6vw, 80px) clamp(14px, 2vw, 24px);
display: flex; flex-direction: column; gap: 8px;
}
@media (min-width: 768px) {
.news-header { flex-direction: row; align-items: baseline; justify-content: space-between; }
}
.news-header__title {
font-family: var(--font-display);
font-size: clamp(1.5rem, 3vw, 2.2rem);
font-weight: 400; letter-spacing: 0.04em;
}
.news-header__meta {
font-size: 0.75rem; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--c-text-3);
}
/* News grid */
.news-grid {
display: grid;
grid-template-columns: 1fr;
gap: 28px;
background: var(--c-bg-2);
padding: 30px 15px;
margin: 0 0 clamp(32px, 5vw, 60px);
}
@media (min-width: 600px) {
.news-grid {
grid-template-columns: repeat(2, 1fr);
padding: 28px;
margin: 0 clamp(20px, 6vw, 80px) clamp(32px, 5vw, 60px);
}
}
@media (min-width: 1000px) { .news-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1300px) { .news-grid { grid-template-columns: repeat(4, 1fr); } }
/* News card */
.news-card {
display: flex; flex-direction: column;
background: var(--c-white);
overflow: hidden;
transition: box-shadow var(--t-base);
}
.news-card:hover { box-shadow: var(--shadow-m); }
.news-card__media {
aspect-ratio: 3/2;
overflow: hidden;
flex-shrink: 0;
position: relative;
}
/* Diapositivas una junto a otra, cada una a ancho completo; con una sola
imagen (el caso normal) esto se comporta como una imagen fija de
siempre — el carrusel solo se nota cuando hay más de una. */
.news-card__track {
display: flex;
width: 100%; height: 100%;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-ms-overflow-style: none;
scrollbar-width: none;
}
.news-card__track::-webkit-scrollbar { display: none; }
.news-card__slide {
flex: 0 0 100%;
height: 100%;
scroll-snap-align: start;
display: block;
}
.news-card__img {
width: 100%; height: 100%;
object-fit: cover;
/* object-position: top y no el "center" por defecto: la caja es más
ancha que alta (aspect-ratio 3/2 en .news-card__media) y una foto más
alta que ancha, al recortarse centrada, se comía la cabeza por arriba
igual que por abajo. Ancladas arriba, se conserva siempre la parte
alta de la foto — apenas cambia nada en una foto ya apaisada. */
object-position: top;
display: block;
transition: transform var(--t-slow);
}
.news-card:hover .news-card__img { transform: scale(1.06); }
/* Flechas: solo se pintan (el @if de la vista) cuando hay más de una
imagen, y solo se muestran a quien tiene ratón — en táctil se desliza
con el dedo, que es el gesto natural ahí y no necesita botón. */
.news-card__arrow {
display: none;
position: absolute; top: 50%; transform: translateY(-50%);
width: 32px; height: 32px;
border-radius: 50%;
border: none;
background: rgba(255,255,255,0.85);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
align-items: center; justify-content: center;
color: var(--c-text);
cursor: pointer;
opacity: 0;
transition: opacity var(--t-fast), background var(--t-fast);
z-index: 2;
}
@media (hover: hover) and (pointer: fine) {
.news-card__arrow { display: flex; }
.news-card__media:hover .news-card__arrow { opacity: 1; }
.news-card__arrow:hover { background: var(--c-white); }
}
.news-card__arrow--prev { left: 10px; }
.news-card__arrow--next { right: 10px; }
.news-card__dots {
position: absolute; left: 0; right: 0; bottom: 10px;
display: flex; justify-content: center; gap: 6px;
z-index: 2;
}
.news-card__dot {
width: 5px; height: 5px; border-radius: 50%;
background: rgba(255,255,255,0.6);
transition: background var(--t-fast), transform var(--t-fast);
}
.news-card__dot--active { background: var(--c-white); transform: scale(1.3); }
.news-card__body {
padding: clamp(16px, 2vw, 24px);
display: flex; flex-direction: column; flex: 1;
}
.news-card__meta {
font-size: 0.68rem; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--c-text-3);
margin-bottom: 10px;
}
.news-card__title {
font-family: var(--font-display);
font-size: clamp(1.5rem, 2.2vw, 1.9rem);
font-weight: 400; letter-spacing: 0.02em; line-height: 1.25;
color: var(--c-text);
margin-bottom: 12px;
text-decoration: underline;
text-decoration-color: transparent;
text-underline-offset: 4px;
transition: color var(--t-base), text-decoration-color var(--t-base);
}
.news-card:hover .news-card__title {
color: var(--c-gold);
text-decoration-color: var(--c-gold);
}
.news-card__excerpt {
font-size: 0.85rem; color: var(--c-text-2); line-height: 1.75;
display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
overflow: hidden;
flex: 1;
}
.news-card__cta {
display: inline-flex; align-items: center; gap: 8px;
margin-top: 18px;
font-size: 0.7rem; letter-spacing: 0.16em;
text-transform: uppercase; font-weight: 500;
color: var(--c-text);
border-bottom: 1px solid var(--c-text);
padding-bottom: 2px;
transition: color var(--t-fast), border-color var(--t-fast);
align-self: flex-start;
}
.news-card:hover .news-card__cta { color: var(--c-gold); border-color: var(--c-gold); }
/* ═══════════════════════════════════════════════════════════
EVENTS PAGE
═══════════════════════════════════════════════════════════ */
.events-grid {
display: grid;
grid-template-columns: 1fr;
gap: 28px;
background: var(--c-bg-2);
padding: 30px 15px;
margin: 0 0 clamp(32px, 5vw, 60px);
}
@media (min-width: 600px) {
.events-grid {
grid-template-columns: repeat(2, 1fr);
padding: 28px;
margin: 0 clamp(20px, 6vw, 80px) clamp(32px, 5vw, 60px);
}
}
@media (min-width: 1000px) { .events-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1300px) { .events-grid { grid-template-columns: repeat(4, 1fr); } }
/* Event card */
.event-card {
display: flex; flex-direction: column;
background: var(--c-white);
overflow: hidden;
transition: box-shadow var(--t-base);
}
.event-card:hover { box-shadow: var(--shadow-m); }
.event-card__header {
display: grid;
grid-template-columns: 1fr 1fr;
height: clamp(160px, 20vw, 220px);
background: var(--c-text);
}
.event-card__date {
display: flex; flex-direction: column; justify-content: center; align-items: center;
padding: clamp(16px, 2vw, 24px);
text-align: center;
background: var(--c-white);
border: 1px solid var(--card-color, var(--c-text));
}
.event-card__day {
font-family: var(--font-display);
font-size: clamp(4.5rem, 7vw, 6.5rem);
font-weight: 300; line-height: 0.9;
color: var(--card-color, var(--c-text)); letter-spacing: -0.02em;
}
.event-card__month-year {
font-size: 0.9rem; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--card-color, var(--c-text));
margin-top: 8px;
}
.event-card__media {
overflow: hidden;
height: 100%;
}
.event-card__img {
width: 100%; height: 100%;
object-fit: cover; display: block;
transition: transform var(--t-slow);
}
.event-card:hover .event-card__img { transform: scale(1.06); }
.event-card__divider {
height: 1px; background: var(--c-border);
margin: clamp(14px, 2vw, 20px) clamp(16px, 2vw, 24px) 0;
}
.event-card__body {
padding: clamp(12px, 1.5vw, 18px) clamp(16px, 2vw, 24px) clamp(16px, 2vw, 24px);
display: flex; flex-direction: column; flex: 1;
}
.event-card__title {
font-family: var(--font-display);
font-size: clamp(1.3rem, 2vw, 1.6rem);
font-weight: 400; letter-spacing: 0.02em; line-height: 1.2;
color: var(--c-text); margin-bottom: 14px;
text-decoration: underline;
text-decoration-color: transparent;
text-underline-offset: 4px;
transition: color var(--t-base), text-decoration-color var(--t-base);
}
.event-card:hover .event-card__title {
color: var(--c-gold);
text-decoration-color: var(--c-gold);
}
.event-card__meta {
display: flex; flex-direction: column; gap: 8px;
}
.event-card__meta-item {
display: flex; align-items: center; gap: 8px;
font-size: 0.84rem; color: var(--c-text-2); line-height: 1.4;
}
.event-card__meta-icon {
width: 14px; height: 14px;
color: var(--c-gold); flex-shrink: 0;
}
.event-card__excerpt {
font-size: 0.85rem; color: var(--c-text-2); line-height: 1.75;
display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
overflow: hidden;
margin-top: 10px;
flex: 1;
}
.event-card__cta {
display: inline-flex; align-items: center; gap: 8px;
margin-top: 18px;
font-size: 0.7rem; letter-spacing: 0.16em;
text-transform: uppercase; font-weight: 500;
color: var(--c-text);
border-bottom: 1px solid var(--c-text);
padding-bottom: 2px;
transition: color var(--t-fast), border-color var(--t-fast);
align-self: flex-start;
}
.event-card:hover .event-card__cta { color: var(--c-gold); border-color: var(--c-gold); }
/* Event detail page */
.event-article {
max-width: 1100px;
margin: 0 auto;
padding: calc(var(--nav-h) + clamp(32px, 5vw, 60px)) clamp(24px, 5vw, 60px) clamp(80px, 10vw, 120px);
}
.event-article__back {
display: inline-flex; align-items: center; gap: 8px;
font-size: 0.72rem; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--c-text-3);
margin-bottom: 40px;
transition: color var(--t-fast);
}
.event-article__back:hover { color: var(--c-text); }
.event-article__header {
display: grid; gap: clamp(24px, 4vw, 48px);
margin-bottom: 0;
align-items: center;
}
@media (min-width: 700px) {
.event-article__header { grid-template-columns: 1fr 2fr; }
}
.event-article__date-block {
display: flex; flex-direction: column;
}
.event-article__day {
font-family: var(--font-display);
font-size: clamp(4rem, 10vw, 8rem);
font-weight: 300; line-height: 0.85;
color: var(--c-text); letter-spacing: -0.02em;
}
.event-article__month-year {
font-size: 1rem; letter-spacing: 0.2em;
text-transform: uppercase; color: var(--c-text-3);
margin-top: 12px;
}
.event-article__title {
font-family: var(--font-display);
font-size: clamp(2rem, 4vw, 3.5rem);
font-weight: 400; letter-spacing: 0.02em; line-height: 1.1;
}
.event-article__meta {
display: flex; flex-direction: column; gap: 14px;
margin-top: 28px;
}
.event-article__meta-item {
display: flex; align-items: center; gap: 12px;
font-size: 0.95rem; color: var(--c-text-2);
}
.event-article__meta-icon {
width: 18px; height: 18px; color: var(--c-gold); flex-shrink: 0;
}
.event-article__img-wrap {
width: 100%;
margin: 2.5rem 0;
text-align: center;
}
/* Mismo límite que las imágenes sueltas del editor y el carrusel de
noticias: una foto más alta que ancha se ve completa pero más estrecha
y centrada, en vez de a su altura real completa. Una apaisada no llega
a este tope y sigue a ancho completo, como antes. */
.event-article__img-wrap img {
width: auto;
max-width: 100%;
max-height: min(640px, 70vh);
display: block;
}
.event-article__divider {
height: 1px; background: var(--c-border); margin: 40px 0;
}
.event-article__body p {
font-size: clamp(0.95rem, 1.3vw, 1.1rem);
color: var(--c-text-2); line-height: 1.9; margin-bottom: 24px;
}
.event-article__body p:last-child { margin-bottom: 0; }
/* Pagination */
.pagination {
display: flex; align-items: center; justify-content: center; gap: 6px;
padding: 12px clamp(24px, 5vw, 60px) clamp(16px, 2.5vw, 28px);
}
.pagination__btn {
display: flex; align-items: center; justify-content: center;
min-width: 40px; height: 40px;
padding: 0 8px;
font-size: 0.78rem; letter-spacing: 0.08em; font-weight: 400;
color: var(--c-text-2);
border: 1px solid var(--c-border);
background: transparent;
transition: all var(--t-fast);
}
.pagination__btn:hover:not(.active):not(.disabled) {
border-color: var(--c-text); color: var(--c-text);
}
.pagination__btn.active {
background: var(--c-text); color: var(--c-white);
border-color: var(--c-text);
pointer-events: none;
}
.pagination__btn.disabled {
opacity: 0.3; pointer-events: none;
}
/* News detail page */
.news-detail-hero {
width: 100%;
aspect-ratio: 21/9;
overflow: hidden;
margin-top: var(--nav-h);
}
.news-detail-hero img {
width: 100%; height: 100%;
object-fit: cover; display: block;
}
.news-article {
max-width: 1100px;
margin: 0 auto;
padding: calc(var(--nav-h) + clamp(32px, 5vw, 60px)) clamp(24px, 5vw, 60px) clamp(80px, 10vw, 120px);
}
.news-article__back {
display: inline-flex; align-items: center; gap: 8px;
font-size: 0.72rem; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--c-text-3);
margin-bottom: 36px;
transition: color var(--t-fast);
}
.news-article__back:hover { color: var(--c-text); }
.news-article__meta {
font-size: 0.7rem; letter-spacing: 0.2em;
text-transform: uppercase; color: var(--c-gold);
margin-bottom: 16px;
}
.news-article__title {
font-family: var(--font-display);
font-size: clamp(2rem, 5vw, 3.8rem);
font-weight: 400; letter-spacing: 0.02em; line-height: 1.1;
margin-bottom: 32px;
}
.news-article__divider {
height: 1px; background: var(--c-border); margin-bottom: 32px;
}
/* Galería de la noticia: con una sola imagen se ve exactamente igual que
antes (a ancho completo, sin recortar); con varias se convierte en
carrusel, cada diapositiva a su altura natural — no se fuerza ningún
recorte, a diferencia de la miniatura de la tarjeta del listado. */
.news-gallery {
position: relative;
margin: 2.5rem 0;
}
.news-gallery__track {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-ms-overflow-style: none;
scrollbar-width: none;
}
.news-gallery__track::-webkit-scrollbar { display: none; }
.news-gallery__slide {
flex: 0 0 100%;
scroll-snap-align: start;
display: flex;
justify-content: center;
/* align-items: center y no el "stretch" por defecto de flex: sin esto,
la imagen se estiraba para llenar el alto del carrusel (el de la
diapositiva más alta) en vez de respetar su propia proporción —
deformaba las fotos apaisadas. */
align-items: center;
}
/* Mismo límite de altura que las imágenes sueltas del cuerpo del texto
(ver la regla ".accordion-text img, ..." del reset, arriba del todo):
una foto más alta que ancha se ve completa pero más estrecha, en vez de
a su altura real completa. Una apaisada no llega a este tope y sigue a
ancho completo, como antes. */
.news-gallery__slide img {
width: auto;
max-width: 100%;
max-height: min(640px, 70vh);
display: block;
}
.news-gallery__arrow {
display: none;
position: absolute; top: 50%; transform: translateY(-50%);
width: 44px; height: 44px;
border-radius: 50%;
border: 1px solid var(--c-border);
background: rgba(250,250,248,0.9);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
align-items: center; justify-content: center;
color: var(--c-text);
cursor: pointer;
transition: all var(--t-fast);
z-index: 2;
}
@media (hover: hover) and (pointer: fine) {
.news-gallery__arrow { display: flex; }
}
.news-gallery__arrow:hover { background: var(--c-text); color: var(--c-white); border-color: var(--c-text); }
.news-gallery__arrow--prev { left: clamp(4px, 2vw, 20px); }
.news-gallery__arrow--next { right: clamp(4px, 2vw, 20px); }
.news-gallery__dots {
position: absolute; left: 0; right: 0; bottom: 16px;
display: flex; justify-content: center; gap: 8px;
z-index: 2;
}
.news-gallery__dot {
width: 6px; height: 6px; border-radius: 50%;
background: rgba(255,255,255,0.6);
box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
transition: background var(--t-fast), transform var(--t-fast);
}
.news-gallery__dot--active { background: var(--c-gold); transform: scale(1.3); }
.news-article__body p {
font-size: clamp(0.95rem, 1.3vw, 1.1rem);
color: var(--c-text-2); line-height: 1.9;
margin-bottom: 24px;
}
.news-article__body p:last-child { margin-bottom: 0; }
/* ═══════════════════════════════════════════════════════════
COLLABORATIONS PAGE
═══════════════════════════════════════════════════════════ */
.collab-block {
padding: clamp(48px, 8vw, 96px) 0;
border-top: 1px solid var(--c-border);
}
.collab-block:first-of-type { border-top: none; }
.collab-block--alt { background: var(--c-bg-2); }
.collab-block__brand {
display: flex; flex-direction: column; align-items: center;
margin-bottom: clamp(32px, 5vw, 56px);
padding: 0 clamp(20px, 6vw, 80px);
}
.collab-block__brand-mark {
font-family: var(--font-display);
font-size: clamp(2rem, 4.5vw, 3.4rem);
font-weight: 400; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--c-text);
text-align: center;
}
/* El nombre de la marca enlazado se ve igual que sin enlace; solo al pasar
por encima se subraya, que es la única pista de que se puede pulsar. */
.collab-block__brand-link {
color: inherit;
text-decoration: none;
transition: color var(--t-fast);
}
.collab-block__brand-link:hover,
.collab-block__brand-link:focus-visible {
text-decoration: underline;
text-underline-offset: 0.12em;
text-decoration-thickness: 1px;
}
/* Logo de la marca, bajo su nombre. Altura fija y ancho automático: los
logos llegan en proporciones muy dispares —cuadrados, alargados,
apaisados— y así todos ocupan lo mismo en vertical y la página no baila.
Se queda por debajo del tamaño del título para no competir con él. */
.collab-block__logo-wrap {
margin-top: clamp(14px, 2vw, 20px);
margin-bottom: clamp(14px, 2vw, 20px);
line-height: 0;
}
.collab-block__logo {
display: block;
height: 75px;
width: auto;
max-width: 100%;
object-fit: contain;
}
/* Mismo criterio que el título: solo se nota que enlaza al pasar por
encima, aquí con un leve apagado en lugar de un subrayado. */
.collab-block__logo-link {
display: inline-block;
transition: opacity var(--t-fast);
}
.collab-block__logo-link:hover,
.collab-block__logo-link:focus-visible { opacity: 0.65; }
.collab-block__intro {
max-width: 560px;
margin-top: 16px;
font-size: clamp(0.95rem, 1.3vw, 1.05rem);
color: var(--c-text-2);
line-height: 1.75;
text-align: center;
}
.collab-block__rule {
width: 48px; height: 2px; background: var(--c-gold);
margin-top: 20px;
}
.collab-carousel { position: relative; }
.collab-carousel__track {
display: flex; gap: clamp(12px, 2vw, 20px);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding: 0 clamp(20px, 6vw, 80px);
-ms-overflow-style: none;
scrollbar-width: none;
}
.collab-carousel__track::-webkit-scrollbar { display: none; }
.collab-carousel__slide {
flex: 0 0 auto;
width: 100%;
height: clamp(420px, 62vh, 640px);
scroll-snap-align: start;
overflow: hidden;
background: var(--c-bg-2);
}
@media (min-width: 768px) {
.collab-carousel__slide { height: clamp(560px, 78vh, 820px); }
}
.collab-carousel__slide img {
width: 100%; height: 100%;
object-fit: cover; display: block;
transition: transform var(--t-slow);
}
.collab-carousel__slide:hover img { transform: scale(1.06); }
.collab-carousel__arrow {
position: absolute; top: 50%;
width: 44px; height: 44px;
transform: translateY(-50%);
border-radius: 50%;
border: 1px solid var(--c-border);
background: rgba(250,250,248,0.9);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
display: flex; align-items: center; justify-content: center;
color: var(--c-text);
transition: all var(--t-fast);
z-index: 2;
}
.collab-carousel__arrow:hover { background: var(--c-text); color: var(--c-white); border-color: var(--c-text); }
.collab-carousel__arrow--prev { left: clamp(4px, 2vw, 24px); }
.collab-carousel__arrow--next { right: clamp(4px, 2vw, 24px); }
@media (max-width: 640px) {
.collab-carousel__arrow { display: none; }
}
/* ═══════════════════════════════════════════════════════════
CONTACT PAGE
═══════════════════════════════════════════════════════════ */
.contact-layout {
display: grid;
grid-template-columns: 1fr;
padding-top: var(--nav-h);
}
@media (min-width: 900px) {
.contact-layout {
grid-template-columns: 1fr 1fr;
min-height: 100vh;
padding-top: 0;
}
}
/* Info panel */
.contact-info {
padding: clamp(48px, 6vw, 80px) clamp(32px, 6vw, 72px) clamp(60px, 8vw, 80px);
background: var(--c-bg-2);
display: flex; flex-direction: column;
}
@media (min-width: 900px) {
.contact-info { padding-top: calc(var(--nav-h) + clamp(48px, 6vw, 80px)); }
}
.contact-info__label {
font-size: 0.85rem; letter-spacing: 0.25em;
text-transform: uppercase; color: var(--c-gold);
margin-bottom: 20px;
}
.contact-info__title {
font-family: var(--font-display);
font-size: clamp(4.5rem, 9vw, 8rem);
font-weight: 300; letter-spacing: 0.02em; line-height: 0.9;
}
.contact-info__desc {
font-size: clamp(0.95rem, 1.3vw, 1.1rem);
color: var(--c-text-2); line-height: 1.85;
margin-top: 28px; max-width: 380px;
}
.contact-info__details {
margin-top: 44px;
display: flex; flex-direction: column; gap: 26px;
}
.contact-info__item {
display: flex; align-items: flex-start; gap: 16px;
}
.contact-info__icon {
width: 22px; height: 22px;
color: var(--c-gold); flex-shrink: 0; margin-top: 2px;
}
.contact-info__text {
font-size: 1.05rem; color: var(--c-text-2); line-height: 1.65;
}
.contact-info__text a { color: var(--c-text-2); transition: color var(--t-fast); }
.contact-info__text a:hover { color: var(--c-gold); }
.contact-info__visit {
margin-top: 28px;
margin-bottom: 16px;
padding: 20px 24px;
border-left: 2px solid var(--c-gold);
font-size: clamp(1.15rem, 1.8vw, 1.55rem); color: var(--c-text-2); line-height: 1.75;
font-style: italic;
}
.contact-info__visit strong { font-style: normal; color: var(--c-text); }
.contact-info__custom {
margin-bottom: 40px;
padding: 20px 24px;
border-left: 2px solid var(--c-text);
background: var(--c-bg-2);
font-size: clamp(1.15rem, 1.8vw, 1.55rem); color: var(--c-text-2); line-height: 1.75;
}
.contact-info__custom strong { color: var(--c-text); }
.contact-info__custom a { color: var(--c-gold); text-decoration: underline; text-underline-offset: 3px; }
.contact-info__custom a:hover { color: var(--c-text); }
/* Form panel */
.contact-form-wrap {
padding: clamp(48px, 6vw, 80px) clamp(32px, 6vw, 72px) clamp(60px, 8vw, 80px);
background: var(--c-bg);
display: flex; flex-direction: column;
}
@media (min-width: 900px) {
.contact-form-wrap { padding-top: calc(var(--nav-h) + clamp(48px, 6vw, 80px)); }
}
.contact-form__title {
font-family: var(--font-display);
font-size: clamp(2rem, 3.5vw, 3rem);
font-weight: 400; letter-spacing: 0.02em;
margin-bottom: 44px;
}
.form-group { margin-bottom: 32px; }
.form-group label {
display: block;
font-size: 0.78rem; letter-spacing: 0.2em;
text-transform: uppercase; color: var(--c-text-3);
margin-bottom: 12px;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 14px 0;
border: none; border-bottom: 1px solid var(--c-border);
background: transparent;
font-family: var(--font-body); font-size: 1.1rem; color: var(--c-text);
outline: none;
transition: border-color var(--t-fast);
border-radius: 0;
-webkit-appearance: none;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--c-text-3); }
.form-group input:focus,
.form-group textarea:focus { border-bottom-color: var(--c-text); }
.form-group textarea { resize: none; height: 160px; line-height: 1.7; }
.form-required { color: var(--c-gold); font-style: normal; }
.form-hint { color: var(--c-text-3); font-style: normal; text-transform: none; letter-spacing: 0; }
.contact-form__submit {
margin-top: 12px; width: 100%;
padding: 20px 32px;
display: flex; align-items: center; justify-content: center; gap: 12px;
font-size: 0.85rem; letter-spacing: 0.22em;
text-transform: uppercase; font-weight: 500;
background: var(--c-text); color: var(--c-white);
transition: background var(--t-fast);
}
.contact-form__submit:hover { background: var(--c-gold); }
.form-group--checkbox { margin-bottom: 36px; }
.form-group--checkbox .form-checkbox {
display: flex; flex-direction: row; align-items: center; gap: 14px;
cursor: pointer;
margin-bottom: 0;
}
.form-checkbox input[type="checkbox"] {
position: absolute; opacity: 0; width: 0; height: 0;
}
.form-checkbox__box {
flex-shrink: 0;
width: 18px; height: 18px;
border: 1px solid var(--c-border);
background: transparent;
transition: border-color var(--t-fast), background var(--t-fast);
margin-top: 2px;
display: flex; align-items: center; justify-content: center;
}
.form-checkbox input:checked ~ .form-checkbox__box {
border-color: var(--c-gold);
background: var(--c-gold);
}
.form-checkbox__box::after {
content: '';
width: 5px; height: 9px;
border: 1.5px solid #fff;
border-top: none; border-left: none;
transform: rotate(45deg) translate(-1px, -1px);
opacity: 0;
transition: opacity var(--t-fast);
}
.form-checkbox input:checked ~ .form-checkbox__box::after { opacity: 1; }
.form-checkbox__label {
font-size: 0.88rem; color: var(--c-text-2); line-height: 1.6;
}
/* Map — ancho completo */
.contact-map {
height: 420px;
background: var(--c-surface);
margin: 0;
}
.contact-map iframe { width: 100%; height: 100%; border: none; display: block; }
/* ═══════════════════════════════════════════════════════════
ARTIST PAGE
═══════════════════════════════════════════════════════════ */
/* Mobile: columna única, imagen arriba */
.artist-split {
display: flex;
flex-direction: column;
padding-top: var(--nav-h);
}
.artist-split__image {
width: 100%;
aspect-ratio: 4 / 3;
background-size: cover;
background-position: center;
}
/* ── Carrusel de la página del artista ────────────────────────
Va DENTRO de .artist-split__image, que conserva su tamaño de siempre
(4:3 en móvil, columna fija a pantalla completa en escritorio). Aquí
solo se coloca el contenido: las fotos rellenan la caja con object-fit
cover, que recorta igual que el background-size: cover que había. */
.artist-carousel { position: relative; overflow: hidden; }
.artist-carousel__track {
display: flex;
width: 100%; height: 100%;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-ms-overflow-style: none;
}
.artist-carousel__track::-webkit-scrollbar { display: none; }
/* flex: 0 0 100% — cada foto ocupa la caja entera; el arrastre con el dedo
en móvil es el del propio navegador, no hace falta JS para eso. */
.artist-carousel__slide {
flex: 0 0 100%;
height: 100%;
scroll-snap-align: center;
}
.artist-carousel__slide img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.artist-carousel__arrow {
position: absolute; top: 50%;
transform: translateY(-50%);
width: 40px; height: 40px;
display: flex; align-items: center; justify-content: center;
background: rgba(250,250,248,0.85);
color: var(--c-text);
border: none; cursor: pointer;
opacity: 0; /* aparecen al pasar por encima; en táctil se desliza */
transition: opacity var(--t-fast), background var(--t-fast);
}
.artist-carousel:hover .artist-carousel__arrow,
.artist-carousel__arrow:focus-visible { opacity: 1; }
.artist-carousel__arrow:hover { background: var(--c-white); }
.artist-carousel__arrow--prev { left: 12px; }
.artist-carousel__arrow--next { right: 12px; }
.artist-carousel__dots {
position: absolute; bottom: 16px; left: 0; right: 0;
display: flex; justify-content: center; gap: 8px;
}
.artist-carousel__dot {
width: 7px; height: 7px;
padding: 0; border: none; border-radius: 50%;
background: rgba(250,250,248,0.55);
cursor: pointer;
transition: background var(--t-fast), transform var(--t-fast);
}
.artist-carousel__dot.is-active {
background: var(--c-white);
transform: scale(1.3);
}
/* Sin ratón no hay hover: las flechas se dejan visibles para que se vea
que hay más fotos, aunque lo natural ahí sea deslizar. */
@media (hover: none) {
.artist-carousel__arrow { opacity: 1; }
}
.artist-split__content {
padding: clamp(40px, 6vw, 72px) clamp(24px, 6vw, 80px) clamp(80px, 10vw, 120px);
}
/* Desktop: split screen asimétrico con imagen sticky */
@media (min-width: 1200px) {
.artist-split {
flex-direction: row;
align-items: flex-start;
padding-top: 0;
min-height: 100vh;
}
.artist-split__image {
width: 45%;
flex-shrink: 0;
aspect-ratio: unset;
position: sticky;
top: var(--nav-h);
height: calc(100vh - var(--nav-h));
}
.artist-split__content {
flex: 1;
padding: calc(var(--nav-h) + clamp(48px, 6vw, 80px)) clamp(24px, 6vw, 80px) clamp(80px, 10vw, 120px);
}
}
/* Estilos tipográficos */
.artist-layout__label {
font-size: 0.7rem; letter-spacing: 0.25em;
text-transform: uppercase; color: var(--c-gold);
margin-bottom: 20px;
}
.artist-layout__name {
width: 100%;
height: auto;
display: block;
}
@media (min-width: 900px) {
.artist-layout__name { width: 50%; }
}
.artist-layout__tagline {
font-family: var(--font-display);
font-size: clamp(1.2rem, 2.2vw, 1.8rem);
font-weight: 400; font-style: italic;
color: var(--c-text-2); line-height: 1.4;
margin-top: 24px;
}
.artist-layout__divider {
height: 1px; background: var(--c-border);
margin: 36px 0;
}
.artist-layout__body {
font-size: clamp(0.9rem, 1.2vw, 1.05rem);
color: var(--c-text-2); line-height: 1.9;
margin-bottom: 20px;
}
/* Mobile carousel — hidden on desktop by default */
.embla-mobile-container { display: none; }
/* ═══════════════════════════════════════════════════════════
NEWSLETTER BAND — banda de suscripción antes del footer
═══════════════════════════════════════════════════════════ */
.newsletter-band {
background: var(--c-bg-2);
border-top: 1px solid var(--c-border);
padding: clamp(56px, 9vw, 110px) clamp(24px, 6vw, 80px);
text-align: center;
}
.newsletter-band__inner { max-width: 680px; margin: 0 auto; }
.newsletter-band__label {
font-size: 0.7rem; letter-spacing: 0.28em;
text-transform: uppercase; color: var(--c-text-3);
margin-bottom: 20px;
}
.newsletter-band__title {
font-family: var(--font-display);
font-size: clamp(2.4rem, 5vw, 4rem);
font-weight: 300; line-height: 1.05;
letter-spacing: 0.01em;
margin-bottom: 22px;
}
.newsletter-band__desc {
font-size: clamp(0.95rem, 1.3vw, 1.1rem);
color: var(--c-text-2); line-height: 1.7;
max-width: 480px; margin: 0 auto 44px;
}
.newsletter-band__form {
display: flex; flex-direction: column; gap: 18px;
max-width: 520px; margin: 0 auto;
}
@media (min-width: 600px) {
/* Dos campos (nombre y correo) más el botón necesitan más ancho del que
bastaba cuando solo se pedía el correo. */
.newsletter-band__form { flex-direction: row; align-items: center; max-width: 720px; }
}
.newsletter-band__input {
flex: 1;
padding: 16px 0;
border: none; border-bottom: 1px solid var(--c-border);
background: transparent;
font-family: var(--font-body); font-size: 1.05rem; color: var(--c-text);
outline: none; border-radius: 0; -webkit-appearance: none; appearance: none;
text-align: center;
transition: border-color var(--t-fast);
}
@media (min-width: 600px) { .newsletter-band__input { text-align: left; } }
.newsletter-band__input::placeholder { color: var(--c-text-3); }
.newsletter-band__input:focus { border-bottom-color: var(--c-text); }
.newsletter-band__submit {
padding: 18px 36px;
display: inline-flex; align-items: center; justify-content: center; gap: 12px;
font-size: 0.8rem; letter-spacing: 0.22em;
text-transform: uppercase; font-weight: 500;
background: var(--c-text); color: var(--c-white);
white-space: nowrap;
transition: background var(--t-fast);
}
.newsletter-band__submit:hover { background: var(--c-gold); }
/* ============================================================
MÓVIL — Lienzo para carrusel Embla
Aplica únicamente en viewports <= 767px.
============================================================ */
@media (max-width: 767px) {
/* 1. Congelar el lienzo: solo en index.html (clase page-index en ) */
html.page-index,
html.page-index body {
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
position: fixed !important;
}
/* 2. Ocultar secciones de escritorio: solo en index.html */
html.page-index .hero,
html.page-index .collections-grid,
html.page-index .section-header,
html.page-index .newsletter-band,
html.page-index footer {
display: none !important;
}
/* 3. Header flotante por encima de todo */
#nav {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
z-index: 1000 !important;
}
/* 4. Embla Mobile Container */
html.page-index .embla-mobile-container {
display: block;
position: fixed;
top: 0; left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
/* 5. Estructura Embla Vertical */
.embla-vertical {
overflow: hidden;
width: 100svw !important;
height: 100svh !important;
}
.embla-vertical__container {
display: flex;
flex-direction: column;
height: 100%;
}
.embla-vertical__slide {
flex: 0 0 100%;
width: 100svw !important;
height: 100svh !important;
position: relative;
box-sizing: border-box;
overflow: hidden;
}
/* 6. Slide Hero Móvil — logo centrado sobre el vídeo */
.embla-vertical__slide--hero .hero__brand {
position: absolute;
z-index: 3;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 55%;
max-width: 220px;
}
/* 7. Overlay más oscuro en slides de colección para legibilidad del texto */
.embla-vertical__slide .card__overlay {
background: linear-gradient(to top,
rgba(0, 0, 0, 0.72) 0%,
rgba(0, 0, 0, 0.35) 38%,
transparent 75%);
}
/* Slides de colección — textos visibles sin hover y escalados para móvil */
.embla-vertical__slide .card__info {
padding: 32px 28px 48px;
gap: 12px;
}
.embla-vertical__slide .card__count {
font-size: 0.78rem;
letter-spacing: 0.22em;
}
.embla-vertical__slide .card__title {
font-size: clamp(3.2rem, 13vw, 5rem);
line-height: 1.05;
}
.embla-vertical__slide .card__arrow {
color: rgba(255, 255, 255, 0.85);
font-size: 0.78rem;
letter-spacing: 0.18em;
margin-top: 6px;
}
.embla-vertical__slide .card__arrow svg {
flex-shrink: 0;
}
/* 8. Bullets de paginación vertical */
.embla-bullets {
position: fixed;
right: 16px;
top: 50%;
transform: translateY(-50%);
z-index: 100;
display: flex;
flex-direction: column;
align-items: center;
gap: 7px;
}
.embla-bullet {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(80, 80, 80, 0.55);
transition: height 0.35s var(--ease-out),
border-radius 0.35s var(--ease-out),
background 0.35s var(--ease-out);
flex-shrink: 0;
}
.embla-bullet--active {
height: 22px;
border-radius: 3px;
background: rgba(20, 20, 20, 0.9);
}
/* 9. Carrusel horizontal interno — scroll nativo + scroll-snap
Embla vertical establece touch-action: pan-x en su contenedor,
lo que permite que el browser gestione el deslizamiento horizontal
sobre este scroll container sin conflicto con Embla vertical. */
.embla-horizontal {
position: absolute;
inset: 0;
overflow: hidden;
touch-action: pan-y;
}
.embla-horizontal__container {
display: flex;
flex-direction: row;
height: 100%;
will-change: transform;
transition: transform 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.embla-horizontal__slide {
flex: 0 0 100svw;
height: 100%;
}
/* El overlay y el bloque de info flotan visualmente sobre el carrusel
horizontal pero no deben interceptar los eventos táctiles, de lo
contrario el touch nunca llega al scroll container. */
.embla-vertical__slide .card__overlay {
pointer-events: none;
}
.embla-vertical__slide .card__info {
pointer-events: none;
}
.embla-vertical__slide .card__arrow,
.embla-vertical__slide .card__title {
pointer-events: auto;
cursor: pointer;
}
/* 10. Bullets de navegación horizontal */
.h-bullets {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: 36px;
}
.h-bullet {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
transition: width 0.3s var(--ease-out),
border-radius 0.3s var(--ease-out),
background 0.3s var(--ease-out);
flex-shrink: 0;
}
.h-bullet--active {
width: 20px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.88);
}
}
/* ═══════════════════════════════════════════════════════════
AVISO DE COOKIES
Franja inferior fija. El marcador del mapa ocupa el mismo
hueco que ocupará el iframe, para que no salte el diseño
al aceptar. Ver partials/cookie-banner.blade.php.
═══════════════════════════════════════════════════════════ */
.cookie-banner {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 2000;
background: var(--c-bg-2, #fff);
border-top: 1px solid var(--c-border);
box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.08);
padding: clamp(18px, 3vw, 26px) clamp(20px, 5vw, 56px);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 16px;
}
@media (min-width: 900px) {
.cookie-banner__inner { flex-direction: row; align-items: center; gap: 32px; }
.cookie-banner__text { flex: 1; }
}
.cookie-banner__title {
font-size: 0.72rem; letter-spacing: 0.22em;
text-transform: uppercase; color: var(--c-text-3);
margin-bottom: 8px;
}
.cookie-banner__desc {
font-size: 0.85rem; line-height: 1.7; color: var(--c-text-2);
}
.cookie-banner__link { color: var(--c-text); text-decoration: underline; }
.cookie-banner__actions {
display: flex; flex-wrap: wrap; gap: 10px;
flex-shrink: 0;
}
.cookie-banner__btn {
padding: 12px 24px;
font-size: 0.75rem; letter-spacing: 0.16em;
text-transform: uppercase; font-weight: 500;
cursor: pointer;
white-space: nowrap;
transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.cookie-banner__btn--ghost {
background: transparent; color: var(--c-text-2);
border: 1px solid var(--c-border);
}
.cookie-banner__btn--ghost:hover { border-color: var(--c-text); color: var(--c-text); }
.cookie-banner__btn--solid {
background: var(--c-text); color: var(--c-white); border: 1px solid var(--c-text);
}
.cookie-banner__btn--solid:hover { background: var(--c-gold); border-color: var(--c-gold); }
/* Marcador que ocupa el sitio del mapa mientras no haya consentimiento */
.map-blocked {
height: 100%;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 10px; text-align: center;
padding: 24px;
background: var(--c-bg-2);
border-top: 1px solid var(--c-border);
}
.map-blocked__title {
font-size: 0.72rem; letter-spacing: 0.22em;
text-transform: uppercase; color: var(--c-text-3);
}
.map-blocked__text {
font-size: 0.85rem; color: var(--c-text-2);
max-width: 420px; line-height: 1.7;
}
.map-blocked__btn {
margin-top: 6px;
padding: 12px 26px;
font-size: 0.75rem; letter-spacing: 0.16em;
text-transform: uppercase; font-weight: 500;
background: var(--c-text); color: var(--c-white);
border: 1px solid var(--c-text); cursor: pointer;
transition: background var(--t-fast), border-color var(--t-fast);
}
.map-blocked__btn:hover { background: var(--c-gold); border-color: var(--c-gold); }
/* ── Vídeo de YouTube incrustado en un contenido ───────────── */
/* Proporción 16:9 sin trucos de padding: aspect-ratio la soportan
todos los navegadores actuales. */
.video-embed {
position: relative;
aspect-ratio: 16 / 9;
width: 100%;
margin: 28px 0;
background: var(--c-bg-2);
overflow: hidden;
}
.video-embed iframe {
position: absolute; inset: 0;
width: 100%; height: 100%;
border: 0;
}
/* Aviso cuando aún no se han aceptado las cookies de terceros.
Mismo lenguaje visual que el mapa bloqueado de Contacto. */
.video-blocked {
height: 100%;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 10px; text-align: center;
padding: 24px;
border: 1px solid var(--c-border);
}
.video-blocked__title {
font-size: 0.72rem; letter-spacing: 0.22em;
text-transform: uppercase; color: var(--c-text-3);
}
.video-blocked__text {
font-size: 0.85rem; color: var(--c-text-2);
max-width: 420px; line-height: 1.7;
}
.video-blocked__btn {
margin-top: 6px;
padding: 12px 26px;
font-size: 0.75rem; letter-spacing: 0.16em;
text-transform: uppercase; font-weight: 500;
background: var(--c-text); color: var(--c-white);
border: 1px solid var(--c-text); cursor: pointer;
transition: background var(--t-fast), border-color var(--t-fast);
}
.video-blocked__btn:hover { background: var(--c-gold); border-color: var(--c-gold); }
/* ═══════════════════════════════════════════════════════════
VISOR DE IMAGEN AMPLIADA (LIGHTBOX)
Compartido por la ficha de obra, la de evento y la de noticia
— ver partials/lightbox.blade.php e initLightbox() en main.js.
═══════════════════════════════════════════════════════════ */
.lightbox {
position: fixed; inset: 0;
z-index: 3000;
/* Opaco del todo y no rgba(...,0.94): con transparencia, elementos fijos
de la propia página (el banner de cookies, sobre todo, por su alto
contraste) se transparentaban ligeramente por debajo — detectado en
móvil, donde el visor ocupa toda la pantalla y coincide con él. */
background: rgb(12, 12, 10);
display: flex; align-items: center; justify-content: center;
}
.lightbox[hidden] { display: none; }
.lightbox__stage {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
padding: clamp(24px, 6vw, 64px);
}
.lightbox__img {
max-width: 100%; max-height: 100%;
width: auto; height: auto;
object-fit: contain;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.lightbox__close {
position: absolute; top: clamp(14px, 3vw, 28px); right: clamp(14px, 3vw, 28px);
width: 40px; height: 40px;
display: flex; align-items: center; justify-content: center;
color: rgba(255, 255, 255, 0.85);
transition: color var(--t-fast);
z-index: 1;
}
.lightbox__close:hover { color: #fff; }
.lightbox__close svg { width: 22px; height: 22px; }
.lightbox__arrow {
position: absolute; top: 50%; transform: translateY(-50%);
width: 48px; height: 48px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: #fff;
background: rgba(255, 255, 255, 0.1);
transition: background var(--t-fast);
z-index: 1;
}
.lightbox__arrow:hover { background: rgba(255, 255, 255, 0.2); }
.lightbox__arrow[hidden] { display: none; }
.lightbox__arrow--prev { left: clamp(8px, 3vw, 32px); }
.lightbox__arrow--next { right: clamp(8px, 3vw, 32px); }
.lightbox__counter {
position: absolute; left: 0; right: 0; bottom: clamp(14px, 3vw, 28px);
text-align: center;
font-size: 0.75rem; letter-spacing: 0.1em;
color: rgba(255, 255, 255, 0.7);
}
.lightbox__counter[hidden] { display: none; }
/* Cursor y, en los que la llevan, la lupita que asoma al pasar por
encima — indican que la imagen se puede ampliar. En táctil no hay hover,
así que ahí basta con que la imagen entera sea la zona de toque. */
.lightbox-trigger { cursor: zoom-in; }
/* Envoltorio que se ajusta al tamaño real de la imagen (no al de la caja
que la contiene) para que la lupita se coloque sobre la esquina de la
foto de verdad — necesario en la imagen de evento y en la galería de
noticia, donde la imagen se recorta en altura y se centra, así que
puede acabar bastante más estrecha que su contenedor. En la galería de
obra no hace falta: ahí la imagen rellena su caja entera. */
.lightbox-frame { position: relative; display: inline-block; max-width: 100%; }
.lightbox-zoom-badge {
position: absolute; z-index: 2;
right: 16px; bottom: 16px;
width: 40px; height: 40px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
background: rgba(12, 12, 10, 0.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
color: #fff;
opacity: 0;
transition: opacity var(--t-fast);
pointer-events: none;
}
.lightbox-zoom-badge svg { width: 18px; height: 18px; display: block; }
@media (hover: hover) and (pointer: fine) {
.lightbox-zoom-badge-host:hover .lightbox-zoom-badge { opacity: 1; }
}
@media (hover: none) {
.lightbox-zoom-badge { opacity: 1; background: rgba(12, 12, 10, 0.4); }
}