/* ============================================================================= TIENDA — hoja de estilos única. Los colores base entran como variables desde assets/js/marca.js; el color de cada fragancia (--jugo) lo escribe tienda.js al abrir su ficha. La casa no tiene fotografía de producto, así que la web no finge tenerla: se sostiene en tipografía, filetes y color. Las tres piezas propias son el ÍNDICE (los trece renglones de la portada y del listado), el ESPÉCIMEN (las materias primas ocupando el sitio de la foto en la ficha) y los ESTRATOS (los tres tiempos dibujados con la altura y el color que les corresponde). Orden: base · tipografía · piezas · apertura de la firma · cabecera · apertura de la casa · índice · espécimen · estratos · series · ticker · ficha · listado y rejilla · carrito · caja · pie · animaciones · móvil. ========================================================================== */ /* Tipografías propias: se sirven desde el propio dominio, sin llamar a terceros. Cormorant Garamond y Jost, ambas bajo licencia SIL OFL (ver assets/fonts/). */ @font-face { font-family: 'Cormorant Garamond'; src: url('../fonts/cormorant-garamond.woff2') format('woff2-variations'); font-weight: 300 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Jost'; src: url('../fonts/jost.woff2') format('woff2-variations'); font-weight: 300 700; font-style: normal; font-display: swap; } /* Los respaldos mientras llegan las woff2, con las métricas ajustadas a las de la casa: Times New Roman estrechada al 96 % mide lo mismo que Cormorant por letra y por línea, y Arial al 93 % lo mismo que Jost en 300, el peso del texto corrido. Así el texto no se reparte distinto al cambiar de fuente (CLS de 0,04 en las legales). Cifras medidas sobre las fuentes: anchura media de un texto en minúsculas, y ascendente/descendente de hhea. */ @font-face { font-family: 'Cormorant respaldo'; src: local('Times New Roman'), local('TimesNewRomanPSMT'), local('Liberation Serif'); size-adjust: 95.9%; ascent-override: 96.4%; descent-override: 29.9%; line-gap-override: 0%; } @font-face { font-family: 'Jost respaldo'; src: local('Arial'), local('ArialMT'), local('Liberation Sans'); size-adjust: 92.7%; ascent-override: 115.4%; descent-override: 40.5%; line-gap-override: 0%; } /* ---------- base ---------------------------------------------------------- */ :root { --tinta: #141210; --tinta-suave: #4f4740; --tinta-tenue: #8d837a; --papel: #f4efe7; --papel-alto: #faf7f2; --papel-hondo: #e9e0d2; --oro: #a8814d; --linea: rgba(20, 18, 16, 0.14); /* El color del jugo de la fragancia abierta. La ficha lo cambia al cargar y con él se tiñe la página entera: es el único acento cromático de la casa. Sin fotografía, el color del líquido es lo que distingue una de otra. */ --jugo: #a8814d; --serif: 'Cormorant Garamond', 'Cormorant respaldo', 'Times New Roman', Georgia, serif; --sans: 'Jost', 'Jost respaldo', 'Helvetica Neue', Arial, sans-serif; --margen: clamp(1.15rem, 4.6vw, 4.75rem); --ancho: 1680px; --curva: cubic-bezier(0.22, 1, 0.36, 1); } /* ---------- el mundo oscuro ------------------------------------------------ El recorrido y la tienda eran dos webs pegadas: se salía de una película y se entraba en un catálogo color crema, y justo en el momento de decidir. Con `oscuro` en el , las páginas de tienda toman el mismo negro #0d0b09 del recorrido y los mismos cremas. Se invierte AQUÍ y no en :root a propósito: recorrido.css usa --papel como color de TEXTO sobre negro, así que darle la vuelta arriba lo dejaría escribiendo en negro sobre negro. */ .oscuro { --tinta: #f4efe7; --tinta-suave: rgba(244, 239, 231, 0.72); --tinta-tenue: rgba(244, 239, 231, 0.5); --papel: #0d0b09; --papel-alto: #141210; --papel-hondo: #080706; --linea: rgba(244, 239, 231, 0.14); } /* `.seccion--tinta` era la banda oscura dentro de una página clara: usa --tinta como FONDO. Con todo en negro ya no hay contraste que hacer, así que se queda al aire; su texto ya venía en crema escrito a mano. */ .oscuro .seccion--tinta { background: transparent; color: var(--tinta); } /* El grano va en `multiply`, que sobre negro no se ve y encima aplasta los oscuros. Sobre negro tiene que sumar luz, no restarla. */ body.oscuro::after { mix-blend-mode: screen; opacity: 0.055; } /* Tres sitios donde el color estaba escrito a mano para papel claro. */ .oscuro .gota { box-shadow: inset 0 0 0 1px rgba(244, 239, 231, 0.28); } .oscuro .cabecera--fija { background: rgba(13, 11, 9, 0.86); } .oscuro .tarjeta__rapido { background: rgba(13, 11, 9, 0.88); color: var(--tinta); } .oscuro .tarjeta__rapido:hover { background: var(--tinta); color: var(--papel); } /* El pie era la banda oscura al final de una página clara: fondo --tinta. Con todo en negro se quedaba crema sobre crema. Ahora va al aire, con un filete que lo separa. */ .oscuro .pie { background: transparent; color: var(--tinta); border-top: 1px solid var(--linea); } /* La cuenta del carrito se pintaba con `difference` sobre una chapa oscura. Con la chapa en crema, la diferencia devuelve claro y el número desaparecía. */ .oscuro .cuenta-carrito span { mix-blend-mode: normal; color: var(--papel); } /* `--claro` y `--papel` son «el boton claro, para las bandas oscuras»: se pintaban con --papel, que era el crema. Con la pagina entera en negro --papel paso a ser el negro y los dos se quedaron invisibles. Aqui el crema es --tinta. */ .oscuro .boton--claro { border-color: var(--tinta); color: var(--tinta); } .oscuro .boton--claro:hover { background: var(--tinta); color: var(--papel); } .oscuro .boton--papel { background: var(--tinta); color: var(--papel); border-color: var(--tinta); } .oscuro .boton--papel:hover { background: transparent; color: var(--tinta); } /* La cabecera inyecta las dos firmas, la de tinta y la clara, y se cruza una con otra. Sobre negro tiene que verse la clara — es lo mismo que ya hace recorrido.css. Sin esto la firma desaparecia en la cabecera. */ .oscuro .cabecera .logo__img--tinta { opacity: 0; } .oscuro .cabecera .logo__img--claro { opacity: 1; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--sans); font-weight: 300; font-size: 16px; line-height: 1.62; overflow-x: hidden; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; } /* Grano de papel sobre todo el documento, sin capturar clics. */ body::after { content: ''; position: fixed; inset: 0; z-index: 9; pointer-events: none; opacity: 0.3; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.2'/%3E%3C/svg%3E"); } img, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } input, select, textarea { font: inherit; color: inherit; } ::selection { background: var(--tinta); color: var(--papel); } :focus-visible { outline: 2px solid var(--jugo); outline-offset: 3px; } a, button, input, select, textarea, label, summary { touch-action: manipulation; } /* Primera parada del tabulador en todas las páginas: saltar la cabecera y plantarse en el contenido. Invisible hasta que se le da el foco. */ .salto { position: fixed; top: 0.75rem; left: 0.75rem; z-index: 999; padding: 0.7rem 1.1rem; background: var(--tinta, #1a1714); color: var(--papel, #f4efe7); font-size: 0.8rem; text-decoration: none; transform: translateY(-200%); } .salto:focus { transform: none; } /* Solo para lectores de pantalla: fuera de la vista, dentro del árbol. */ .solo-lector { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .oculto-visual { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .contenido { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); } .contenido--estrecho { max-width: 1180px; } /* ---------- tipografía ---------------------------------------------------- */ /* Dos voces y ninguna más. La serif dice los nombres; la sans dice los datos. Nada de una tercera para "dar variedad": la casa habla de dos maneras. */ h1, h2, h3, h4 { font-family: var(--serif); font-weight: 300; margin: 0; line-height: 1.02; } .display { font-size: clamp(2.6rem, 7.6vw, 8rem); letter-spacing: -0.024em; } .titulo { font-size: clamp(2.2rem, 5.6vw, 5rem); letter-spacing: -0.016em; } .subtitulo { font-size: clamp(1.5rem, 2.7vw, 2.5rem); letter-spacing: -0.008em; } /* La voz técnica: versalitas muy espaciadas, cifras tabulares. Es la que escribe los números, las familias y todo lo que en un catálogo iría en letra pequeña al pie de la ficha. */ .dato, .antetitulo { font-family: var(--sans); font-size: 0.67rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--tinta-tenue); font-variant-numeric: tabular-nums; } .antetitulo { margin: 0 0 1.5rem; } .dato--tinta { color: var(--tinta); } .parrafo { max-width: 44ch; color: var(--tinta-suave); font-size: 1.04rem; line-height: 1.72; } .parrafo--ancho { max-width: 62ch; } .parrafo strong { font-weight: 400; color: var(--tinta); } .italica { font-family: var(--serif); font-style: italic; font-size: 1.4rem; color: var(--tinta); } /* Guía de puntos: el renglón de un índice impreso. Une un nombre con su dato al otro lado de la línea sin necesidad de una tabla. */ .guia { display: flex; align-items: baseline; gap: 0.9rem; } .guia__puntos { flex: 1; height: 1px; align-self: flex-end; margin-bottom: 0.32rem; background-image: radial-gradient(circle, var(--tinta-tenue) 0.5px, transparent 0.6px); background-size: 5px 1px; background-repeat: repeat-x; opacity: 0.6; } /* ---------- piezas sueltas ------------------------------------------------ */ .boton { display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem; padding: 1.1rem 2.5rem; font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; border: 1px solid var(--tinta); background: var(--tinta); color: var(--papel); transition: background 0.5s var(--curva), color 0.5s var(--curva), opacity 0.3s; } .boton:hover { background: transparent; color: var(--tinta); } .boton[disabled] { opacity: 0.45; pointer-events: none; } .boton--linea { background: transparent; color: var(--tinta); } .boton--linea:hover { background: var(--tinta); color: var(--papel); } .boton--claro { border-color: var(--papel); background: transparent; color: var(--papel); } .boton--claro:hover { background: var(--papel); color: var(--tinta); } .boton--papel { background: var(--papel); color: var(--tinta); border-color: var(--papel); } .boton--papel:hover { background: transparent; color: var(--papel); } .boton--ancho { width: 100%; } /* Enlace con subrayado que se dibuja al pasar por encima. */ .enlace { position: relative; font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; padding-bottom: 0.35rem; white-space: nowrap; } .enlace::after { content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.55s var(--curva); } .enlace:hover::after { transform: scaleX(1); transform-origin: left; } .enlace--activo::after { transform: scaleX(1); } .regla { height: 1px; background: var(--linea); border: 0; margin: 0; } .seccion { padding: clamp(4.5rem, 11vw, 11rem) 0; } .seccion--honda { background: var(--papel-hondo); } .seccion--tinta { background: var(--tinta); color: var(--papel); } .seccion--tinta .parrafo, .seccion--tinta .antetitulo, .seccion--tinta .dato { color: rgba(244, 239, 231, 0.62); } .seccion--pegada { padding-top: 0; } .cabecera-seccion { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(2.5rem, 5vw, 5rem); } /* Una gota del color del jugo. Trece de estas, en columna, son la paleta de la colección de un vistazo — y es lo único con color de la portada. */ .gota { width: 10px; height: 10px; border-radius: 50%; background: var(--fila-jugo, var(--jugo)); box-shadow: inset 0 0 0 1px rgba(20, 18, 16, 0.18); flex: none; } /* ---------- apertura: la firma escribiéndose ------------------------------ */ #apertura { position: fixed; inset: 0; z-index: 100; background: #0f0c0a; display: grid; place-items: center; transition: opacity 1s var(--curva), visibility 1s; } #apertura.cerrada { opacity: 0; visibility: hidden; } /* Un halo cálido detrás, para que el negro no sea plano. */ #apertura::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 50% 48%, rgba(184, 149, 79, 0.20), transparent 70%); } /* El trazo del bolígrafo se usa de MÁSCARA sobre el logotipo, así que estas reglas valen para las dos firmas de la casa —la cortinilla de la tienda y la entrada del recorrido— y el tamaño lo pone cada sitio. */ .firma { display: block; width: 100%; height: auto; } .firma path { fill: none; stroke: #fff; stroke-width: 26; stroke-linecap: round; stroke-linejoin: round; animation-name: escribir; animation-timing-function: linear; animation-fill-mode: forwards; } @keyframes escribir { to { stroke-dashoffset: 0; } } .apertura__firma { position: relative; width: min(58vw, 520px); } .apertura__saltar { position: absolute; right: var(--margen); bottom: clamp(1.5rem, 4vw, 3rem); z-index: 2; color: rgba(246, 243, 238, 0.55); font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase; } .apertura__saltar:hover { color: #fff; } body.con-apertura { overflow: hidden; } /* ---------- cabecera ------------------------------------------------------ */ .cabecera { position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: 1.6rem var(--margen); transition: background 0.6s var(--curva), padding 0.6s var(--curva), color 0.6s var(--curva), box-shadow 0.6s var(--curva); } .cabecera--sobre-video { color: var(--papel); } .cabecera--fija { background: rgba(244, 239, 231, 0.92); backdrop-filter: blur(14px); color: var(--tinta); padding: 1rem var(--margen); box-shadow: 0 1px 0 var(--linea); } .cabecera--oculta { transform: translateY(-100%); } .cabecera { transition: transform 0.6s var(--curva), background 0.6s var(--curva), padding 0.6s var(--curva), color 0.6s var(--curva); } .cabecera__nav, .cabecera__acciones { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.4rem); } .cabecera__acciones { justify-content: flex-end; } .logo { font-family: var(--serif); font-size: clamp(1.1rem, 1.7vw, 1.5rem); letter-spacing: 0.3em; text-align: center; white-space: nowrap; } /* La firma es muy apaisada: se limita por altura, no por anchura, para que la cabecera no crezca y se coma la primera línea de cada página. */ .logo--firma { display: block; position: relative; line-height: 0; } .logo__img { display: block; height: clamp(40px, 3.8vw, 52px); width: auto; } .cabecera--fija .logo__img { height: clamp(34px, 3.1vw, 42px); } .logo__img--claro { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.6s var(--curva); } .cabecera--sobre-video .logo__img--tinta { opacity: 0; } .cabecera--sobre-video .logo__img--claro { opacity: 1; } .logo__img--tinta { transition: opacity 0.6s var(--curva); } .pie__logo--firma .logo__img { height: clamp(46px, 5vw, 64px); opacity: 0.92; } .logo small { display: block; font-family: var(--sans); font-size: 0.55rem; letter-spacing: 0.42em; opacity: 0.6; margin-top: 0.25rem; } .cuenta-carrito { display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 0.35rem; margin-left: 0.5rem; border-radius: 999px; background: currentColor; font-size: 0.62rem; letter-spacing: 0; } .cuenta-carrito span { color: var(--papel); mix-blend-mode: difference; } .hamburguesa { display: none; width: 22px; height: 12px; position: relative; } .hamburguesa i { position: absolute; left: 0; width: 100%; height: 1px; background: currentColor; transition: transform 0.4s var(--curva), opacity 0.3s; } .hamburguesa i:first-child { top: 0; } .hamburguesa i:last-child { bottom: 0; } body.menu-abierto .hamburguesa i:first-child { transform: translateY(5px) rotate(45deg); } body.menu-abierto .hamburguesa i:last-child { transform: translateY(-6px) rotate(-45deg); } /* Menú de pantalla completa en móvil */ .menu-movil { position: fixed; inset: 0; z-index: 39; background: var(--papel); display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; padding: 0 var(--margen); visibility: hidden; transform: translateY(-100%); transition: transform 0.7s var(--curva), visibility 0.7s; } body.menu-abierto .menu-movil { transform: translateY(0); visibility: visible; } .menu-movil a { font-family: var(--serif); font-size: clamp(2.2rem, 11vw, 3.6rem); padding: 0.4rem 0; } .menu-movil .pie-menu { margin-top: 2.5rem; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tinta-suave); } /* ---------- apertura de la casa ------------------------------------------- */ /* No es una portada con foto grande porque no hay foto: es la primera página de un catálogo impreso. La frase, y debajo la ficha técnica de la casa. */ .apertura-casa { position: relative; min-height: 100svh; display: grid; align-content: space-between; padding: calc(9rem + 4vw) var(--margen) clamp(2rem, 4vw, 3.5rem); overflow: hidden; } /* Luz cálida muy tenue, arriba a la izquierda, para que el papel no sea plano. */ .apertura-casa::before { content: ''; position: absolute; inset: -30% -10% auto -20%; height: 90%; background: radial-gradient(ellipse 50% 60% at 30% 40%, rgba(168, 129, 77, 0.16), transparent 68%); pointer-events: none; } .apertura-casa__texto { position: relative; } /* El titular manda, pero tiene que caber con el colofón en la misma pantalla: por eso se mide contra la altura además de contra el ancho. */ .apertura-casa__frase { max-width: 15ch; font-size: clamp(2.5rem, min(7vw, 9.5vh), 7.5rem); line-height: 0.95; letter-spacing: -0.028em; } .apertura-casa__frase em { font-style: italic; color: var(--oro); } .apertura-casa__pie { position: relative; display: grid; gap: clamp(1.6rem, 3vw, 2.6rem); } .apertura-casa__entrada { max-width: 46ch; font-size: 1.06rem; line-height: 1.7; color: var(--tinta-suave); margin: 0; } /* La ficha técnica: tres cifras separadas por filetes, como el colofón de un libro. Dice lo que la casa es antes de que nadie tenga que preguntarlo. */ .colofon { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--linea); } .colofon > div { padding: clamp(1rem, 2vw, 1.6rem) 0 0; } .colofon > div + div { border-left: 1px solid var(--linea); padding-left: clamp(1rem, 2.4vw, 2.2rem); } .colofon dt { font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--tinta-tenue); margin: 0 0 0.5rem; } .colofon dd { margin: 0; font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2.3rem); line-height: 1.05; } .bajar { display: inline-grid; justify-items: center; gap: 0.7rem; font-size: 0.6rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--tinta-tenue); } .bajar i { display: block; width: 1px; height: 40px; background: currentColor; animation: bajar 2.6s var(--curva) infinite; transform-origin: top; } @keyframes bajar { 0% { transform: scaleY(0); } 45% { transform: scaleY(1); } 100% { transform: scaleY(0); transform-origin: bottom; } } /* ---------- la paleta de la portada --------------------------------------- */ /* Las catorce gotas en columna, al margen derecho. Es el muestrario de la casa: toda la colección resumida en su color, antes de leer un solo nombre. En pantallas estrechas desaparece — allí el sitio es para el titular. */ .paleta { position: absolute; right: var(--margen); top: 50%; transform: translateY(-50%); display: grid; gap: clamp(0.55rem, 1.4vh, 1.05rem); justify-items: end; } .paleta__punto { display: flex; align-items: center; gap: 0.85rem; } .paleta__nombre { font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tinta-suave); white-space: nowrap; opacity: 0; transform: translateX(8px); transition: opacity 0.5s var(--curva), transform 0.5s var(--curva); } .paleta__punto:hover .paleta__nombre, .paleta__punto:focus-visible .paleta__nombre { opacity: 1; transform: none; } .paleta__punto .gota { transition: transform 0.6s var(--curva); } .paleta__punto:hover .gota { transform: scale(1.75); } @media (max-width: 900px) { .paleta { display: none; } } /* El vaso de la portada, en el hueco del margen derecho. Debajo de 900 px desaparece: allí el sitio es para el titular, igual que el muestrario. */ .apertura-casa__vaso { position: absolute; right: calc(var(--margen) + clamp(3rem, 7vw, 7rem)); top: calc(9rem + 4vw); transform: none; width: clamp(220px, 22vw, 320px); /* Acaba por encima del colofón: antes el líquido se leía por detrás de "Máximo trece materias". */ height: min(46vh, 400px); pointer-events: none; } @media (max-width: 900px) { .apertura-casa__vaso { display: none; } } /* ---------- el índice ----------------------------------------------------- */ /* La pieza central de la web. Trece renglones, como el sumario de una revista. Cada uno lleva su gota de color, y al pasar por encima se abre y enseña de qué está hecha la fragancia: es la promesa de la casa —publicamos las materias primas— convertida en la manera de navegar. Sin una sola foto. */ .indice { border-top: 1px solid var(--linea); } .indice__fila { position: relative; isolation: isolate; display: grid; grid-template-columns: 10px 4.5rem minmax(7ch, 1.02fr) minmax(0, 1.15fr) auto; align-items: center; gap: clamp(0.9rem, 2.2vw, 2.4rem); padding: clamp(1.35rem, 2.5vw, 2.15rem) var(--margen); border-bottom: 1px solid var(--linea); color: inherit; } /* El velo del color del jugo entra desde la izquierda, como tinta corriéndose. */ .indice__fila::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--fila-jugo, var(--jugo)); opacity: 0; transform: scaleX(0.3); transform-origin: left; transition: opacity 0.7s var(--curva), transform 0.9s var(--curva); } .indice__fila:hover::before, .indice__fila:focus-visible::before { opacity: 0.17; transform: scaleX(1); } .indice__fila .gota { transition: transform 0.7s var(--curva); } .indice__fila:hover .gota { transform: scale(2.1); } .indice__num { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.2em; color: var(--tinta-tenue); transition: color 0.6s var(--curva); } .indice__fila:hover .indice__num { color: var(--tinta); } .indice__nombre { font-family: var(--serif); font-size: clamp(1.7rem, 4.3vw, 3.6rem); line-height: 1; letter-spacing: -0.018em; transition: transform 0.8s var(--curva); } .indice__fila:hover .indice__nombre { transform: translateX(0.55rem); } .indice__firma { display: block; font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--tinta-suave); margin-top: 0.45rem; } /* Las materias primas. Están en el HTML siempre —para quien busque y para quien navegue con teclado— y se descubren al acercarse. */ .indice__materias { font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--tinta-suave); line-height: 2; opacity: 0; transform: translateY(10px); transition: opacity 0.6s var(--curva), transform 0.7s var(--curva); } .indice__fila:hover .indice__materias, .indice__fila:focus-visible .indice__materias { opacity: 1; transform: none; } .indice__materias span + span::before { content: ' · '; color: var(--tinta-tenue); } .indice__cola { display: grid; justify-items: end; gap: 0.4rem; text-align: right; } .indice__familia { font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tinta-tenue); } .indice__precio { font-family: var(--serif); font-size: 1.2rem; white-space: nowrap; } /* Un vial enseña lo que vale, pero debajo dice que solo va dentro del estuche: el precio sin esa línea se leería como que se puede comprar suelto. */ .indice__nota { font-family: var(--sans); font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tinta-tenue); white-space: nowrap; } /* Cuando se filtra, las que no encajan se van sin dejar hueco. */ .indice__fila[hidden] { display: none; } /* ---------- el espécimen -------------------------------------------------- */ /* Esto es lo que ocupa el lugar de la fotografía en la ficha. No es un frasco: es la fórmula. El número de la fragancia enorme y en el color de su jugo, y encima las materias primas con las que está hecha. Cuando lleguen las fotos se pone la foto al lado y este bloque pasa a ser la segunda imagen: no hay que desmontar nada. */ .especimen { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; padding: clamp(1.6rem, 4vw, 3.4rem); background: var(--papel-alto); box-shadow: inset 0 0 0 1px var(--linea); overflow: hidden; } /* El jugo posado en el fondo, como si el líquido hubiera decantado. */ .especimen::after { content: ''; position: absolute; inset: auto 0 0; height: 42%; background: linear-gradient(to top, var(--jugo), transparent); opacity: 0.15; pointer-events: none; } .especimen__num { position: absolute; z-index: 0; font-family: var(--serif); font-weight: 300; font-size: min(30vw, 22rem); line-height: 0.7; color: var(--jugo); opacity: 0.2; user-select: none; pointer-events: none; } .especimen__lista { position: relative; z-index: 1; display: grid; gap: clamp(0.6rem, 1.4vw, 1.1rem); text-align: center; max-width: 24ch; } .especimen__materia { font-family: var(--serif); font-size: clamp(1.02rem, 1.75vw, 1.6rem); line-height: 1.25; } .especimen__sello { position: absolute; z-index: 1; left: 0; right: 0; bottom: clamp(1.1rem, 2.4vw, 2rem); text-align: center; font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--tinta-tenue); } .especimen-pie { margin: 0.9rem 0 0; font-family: var(--sans); font-size: 0.66rem; line-height: 1.7; color: var(--tinta-tenue); } /* ---------- la película --------------------------------------------------- */ /* Banda a todo el ancho, en negro. Es el único sitio de la web donde la imagen manda sobre la tipografía, y por eso va sola: encima el índice, debajo las series. El texto va debajo del marco, como un pie de foto de revista. */ .pelicula { padding: clamp(3rem, 7vw, 6rem) 0 clamp(4.5rem, 11vw, 11rem); } .pelicula__marco { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #0d0b09; overflow: hidden; margin-bottom: clamp(1.8rem, 3.5vw, 3rem); } .pelicula__video { width: 100%; height: 100%; object-fit: cover; display: block; } /* Mientras no hay película, la composición ocupa el marco. Se centra y se le deja aire: un canvas 4:5 estirado a 16:9 quedaría deformado. */ .pelicula__marco--vacio { display: grid; place-items: center; } .pelicula__lienzo { height: 88%; aspect-ratio: 4 / 5; } .pelicula__lienzo .composicion { height: 100%; aspect-ratio: 4 / 5; background: none; } .pelicula__sonido { position: absolute; right: clamp(1rem, 2.4vw, 2rem); bottom: clamp(1rem, 2.4vw, 2rem); z-index: 2; padding: 0.6rem 1.2rem; font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(244, 239, 231, 0.7); border: 1px solid rgba(244, 239, 231, 0.28); background: rgba(13, 11, 9, 0.4); backdrop-filter: blur(6px); transition: color 0.4s, border-color 0.4s, background 0.4s; } .pelicula__sonido:hover, .pelicula__sonido.activo { color: var(--papel); border-color: rgba(244, 239, 231, 0.7); background: rgba(13, 11, 9, 0.7); } .pelicula__duracion { position: absolute; left: clamp(1rem, 2.4vw, 2rem); bottom: clamp(1rem, 2.4vw, 2rem); z-index: 2; font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.24em; color: rgba(244, 239, 231, 0.5); font-variant-numeric: tabular-nums; } .pelicula__texto { display: grid; grid-template-columns: auto 1fr; gap: 0 clamp(2rem, 6vw, 6rem); align-items: end; } .pelicula__texto .antetitulo { grid-column: 1 / -1; margin-bottom: 0.9rem; } .pelicula__texto .parrafo { margin: 0; max-width: 40ch; } @media (max-width: 780px) { /* En el móvil la banda se pone vertical, que es como se ve un vídeo ahí. */ .pelicula__marco { aspect-ratio: 4 / 5; } .pelicula__texto { grid-template-columns: 1fr; gap: 1.2rem; } } /* ---------- la composición ------------------------------------------------ */ /* El único bloque oscuro de la ficha, y a propósito: sobre el fondo hondo el color de las gotas es lo único que brilla en toda la página. */ .composicion { position: relative; margin: 0; aspect-ratio: 4 / 5; background: #0d0b09; overflow: hidden; isolation: isolate; } .composicion canvas { position: absolute; inset: 0; width: 100%; height: 100%; } /* En la portada va sin fondo ni rótulos: el vaso, sobre el papel de la página. */ .composicion--desnuda { background: none; aspect-ratio: auto; height: 100%; } /* El tiempo que está cayendo ahora mismo. */ .composicion__tiempo { position: absolute; top: clamp(1.1rem, 2.6vw, 2rem); left: clamp(1.1rem, 2.6vw, 2rem); margin: 0; z-index: 2; font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(244, 239, 231, 0.5); } /* Las materias, que se imprimen cuando su gota toca el líquido. */ .composicion__notas { position: absolute; left: clamp(1.1rem, 2.6vw, 2rem); bottom: clamp(1.1rem, 2.6vw, 2rem); z-index: 2; margin: 0; padding: 0; list-style: none; display: grid; gap: 0.34rem; max-width: 58%; } .composicion__notas li { font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0; transform: translateY(7px); transition: opacity 0.55s var(--curva), transform 0.55s var(--curva); } .composicion__notas li.dentro { opacity: 1; transform: none; } .composicion__familia { position: absolute; right: clamp(1.1rem, 2.6vw, 2rem); bottom: clamp(1.1rem, 2.6vw, 2rem); z-index: 2; margin: 0; font-family: var(--serif); font-size: clamp(1.1rem, 2vw, 1.7rem); color: rgba(244, 239, 231, 0.9); opacity: 0; transform: translateY(10px); transition: opacity 0.9s var(--curva), transform 0.9s var(--curva); } .composicion__familia.dentro { opacity: 1; transform: none; } .composicion__repetir { position: absolute; top: clamp(1.1rem, 2.6vw, 2rem); right: clamp(1.1rem, 2.6vw, 2rem); z-index: 3; padding: 0.45rem 0.9rem; font-family: var(--sans); font-size: 0.58rem; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(244, 239, 231, 0.55); border: 1px solid rgba(244, 239, 231, 0.22); opacity: 0; transition: opacity 0.4s var(--curva), color 0.4s, border-color 0.4s; } .composicion:hover .composicion__repetir, .composicion__repetir:focus-visible { opacity: 1; } .composicion__repetir:hover { color: var(--papel); border-color: rgba(244, 239, 231, 0.6); } .composicion-pie { margin: 0.9rem 0 0; font-family: var(--sans); font-size: 0.66rem; line-height: 1.7; color: var(--tinta-tenue); } /* ---------- los tres tiempos, en estratos --------------------------------- */ /* Un perfume no se lee de golpe: se abre, se asienta y se queda. Las tres bandas crecen en altura y en color según lo que dura cada tiempo, así que la forma del bloque ya dice lo que el texto explica. */ .estrato { display: grid; gap: 2px; } .estrato__banda { position: relative; display: grid; grid-template-columns: 5.5rem 1fr; gap: clamp(0.9rem, 2vw, 1.8rem); align-items: start; padding: clamp(1rem, 1.8vw, 1.5rem) clamp(1rem, 2vw, 1.6rem); } .estrato__banda::before { content: ''; position: absolute; inset: 0; background: var(--jugo); opacity: var(--densidad); } .estrato__banda > * { position: relative; } .estrato__banda--salida { --densidad: 0.09; min-height: 5rem; } .estrato__banda--corazon { --densidad: 0.18; min-height: 6.8rem; } .estrato__banda--fondo { --densidad: 0.30; min-height: 8.6rem; } .estrato__reloj { font-family: var(--sans); font-size: 0.61rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tinta-suave); padding-top: 0.4rem; } .estrato__nombre { font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--tinta); margin: 0 0 0.5rem; } .estrato__notas { margin: 0; font-family: var(--serif); font-size: clamp(1.15rem, 1.9vw, 1.6rem); line-height: 1.3; } /* ---------- las reglas de la casa ----------------------------------------- */ /* Eran tres citas rotando en un carrusel, y rotar esconde dos de cada tres. Puestas a la vez y numeradas se leen como lo que son: un manifiesto corto. */ .reglas { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: regla; } .reglas li { display: grid; grid-template-columns: 5.5rem 1fr; gap: clamp(1rem, 3vw, 2.6rem); align-items: baseline; padding: clamp(1.6rem, 3vw, 2.6rem) 0; border-top: 1px solid var(--linea); } .reglas li:last-child { border-bottom: 1px solid var(--linea); } .reglas__num { font-family: var(--sans); font-size: 0.67rem; letter-spacing: 0.26em; color: var(--tinta-tenue); } .reglas p { margin: 0; font-family: var(--serif); font-size: clamp(1.35rem, 2.9vw, 2.4rem); line-height: 1.28; max-width: 30ch; } /* ---------- las tres series ----------------------------------------------- */ .series { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--linea); } /* Con FUNDAMENTOS son cuatro series; el oficio de maison sigue siendo de tres. */ .series--cuatro { grid-template-columns: repeat(4, 1fr); } /* Doble clase a propósito: gana al apilado genérico de .series en el media de 1080, que va después en el archivo. Cuatro → dos → una. */ @media (max-width: 1100px) { .series.series--cuatro { grid-template-columns: 1fr 1fr; } .series.series--cuatro .series__pieza:nth-child(odd) { border-left: 0; } } @media (max-width: 640px) { .series.series--cuatro { grid-template-columns: 1fr; } } .series__pieza { display: grid; align-content: start; gap: 1.1rem; padding: clamp(1.8rem, 3.2vw, 3rem) clamp(1.2rem, 2.4vw, 2.4rem) clamp(2.4rem, 4vw, 3.6rem); border-bottom: 1px solid var(--linea); } .series__pieza + .series__pieza { border-left: 1px solid var(--linea); } .series__num { font-family: var(--serif); font-size: clamp(2.6rem, 5vw, 4.6rem); line-height: 0.8; color: var(--oro); opacity: 0.5; } .series__nombre { font-family: var(--serif); font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1; } .series__texto { margin: 0; color: var(--tinta-suave); font-size: 0.97rem; line-height: 1.72; } .series__materias { font-family: var(--sans); font-size: 0.63rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tinta-tenue); line-height: 1.9; } /* ---------- ticker -------------------------------------------------------- */ .ticker { border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); padding: 1rem 0; overflow: hidden; background: var(--papel); } .ticker__pista { display: flex; gap: 3.5rem; width: max-content; animation: correr 38s linear infinite; } .ticker:hover .ticker__pista { animation-play-state: paused; } .ticker span { font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--tinta-suave); white-space: nowrap; display: flex; align-items: center; gap: 3.5rem; } .ticker span::after { content: '·'; color: var(--oro); } @keyframes correr { to { transform: translateX(-50%); } } /* ---------- ficha de producto --------------------------------------------- */ /* La ficha entera se tiñe del color del jugo: tienda.js escribe --jugo en el al abrir. Navegar la colección es ver cambiar el color de la casa. */ .ficha { display: grid; grid-template-columns: 1.04fr 0.96fr; gap: clamp(2rem, 5vw, 5.5rem); padding-top: calc(7.5rem + 3vw); } .ficha__imagen { display: grid; gap: 1rem; align-content: start; } /* El frasco va debajo del espécimen y más pequeño: quien compra quiere verlo, pero el argumento de la casa es la fórmula, no el envase. Cuando lleguen las fotos, la foto sube aquí y el espécimen se queda de segunda imagen. */ .ficha__frasco { margin: clamp(1.2rem, 2.5vw, 2rem) 0 0; width: 62%; margin-left: auto; } .ficha__frasco--solo { width: 100%; margin: 0; } /* La foto de un vial es casi cinco veces más alta que ancha: a lo ancho de la columna ocupaba tres pantallas. Se limita el alto y el vial queda centrado. */ .ficha__frasco img { width: 100%; max-height: 80vh; object-fit: contain; background: var(--papel-hondo); } .ficha__frasco figcaption { margin-top: 0.7rem; text-align: right; font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tinta-tenue); } /* Un vial no se compra suelto: en su ficha, donde iría el botón, van los estuches que lo llevan. El Structure Booster enseña los tres. */ .via-estuche { margin-bottom: 1.8rem; } .ficha__pvp { font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tinta-tenue); } /* La cuenta del estuche: lo que valen los cinco sueltos frente a lo que cuesta el estuche. Es el argumento de venta, así que se lee de un vistazo. */ .cuenta { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 1.5rem; align-items: baseline; margin: 0 0 1.8rem; padding: 1.1rem 1.3rem; background: var(--papel-alto); box-shadow: inset 0 0 0 1px var(--linea); font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--tinta-suave); } .cuenta s { color: var(--tinta-tenue); } .cuenta b { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; color: var(--tinta); } .cuenta__ahorro { grid-column: 1 / -1; padding-top: 0.7rem; border-top: 1px solid var(--linea); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--jugo); } .ficha__datos { position: sticky; top: 6.5rem; align-self: start; } .ficha__nombre { font-size: clamp(2.6rem, 5.4vw, 4.6rem); line-height: 0.98; letter-spacing: -0.02em; margin: 0.6rem 0 0; } .ficha__firma { font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, 1.8vw, 1.5rem); color: var(--tinta-suave); margin: 1rem 0 0; max-width: 34ch; } .ficha__precio { font-size: 1.5rem; font-family: var(--serif); margin: 1.6rem 0 2.2rem; } .tallas { display: flex; gap: 0.7rem; margin-bottom: 1.8rem; flex-wrap: wrap; } .talla { padding: 0.9rem 1.6rem; border: 1px solid var(--linea); font-size: 0.7rem; letter-spacing: 0.16em; transition: border-color 0.4s, background 0.4s, color 0.4s; } .talla[aria-pressed="true"] { background: var(--tinta); color: var(--papel); border-color: var(--tinta); } .cantidad { display: inline-flex; align-items: center; border: 1px solid var(--linea); } .cantidad button { width: 46px; height: 46px; font-size: 1.1rem; } .cantidad span { min-width: 2.4rem; text-align: center; font-size: 0.9rem; } .ficha__compra { display: flex; gap: 0.8rem; align-items: stretch; margin-bottom: 1.6rem; flex-wrap: wrap; } .ficha__compra .boton { flex: 1; min-width: 220px; } .acordeon { border-top: 1px solid var(--linea); } .acordeon__cabeza { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 1.35rem 0; text-align: left; font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; } .acordeon__cabeza i { width: 11px; height: 11px; position: relative; flex: none; } .acordeon__cabeza i::before, .acordeon__cabeza i::after { content: ''; position: absolute; background: currentColor; transition: transform 0.5s var(--curva); } .acordeon__cabeza i::before { top: 5px; left: 0; width: 11px; height: 1px; } .acordeon__cabeza i::after { left: 5px; top: 0; width: 1px; height: 11px; } .acordeon__cabeza[aria-expanded="true"] i::after { transform: scaleY(0); } .acordeon__cuerpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.6s var(--curva); } .acordeon__cuerpo > div { overflow: hidden; } .acordeon__cabeza[aria-expanded="true"] + .acordeon__cuerpo { grid-template-rows: 1fr; } .acordeon__cuerpo p { color: var(--tinta-suave); margin: 0 0 1.2rem; } .acordeon__cuerpo ul { list-style: none; padding: 0; margin: 0 0 1.3rem; } /* Las materias primas, una por renglón, con guía de puntos hasta su papel en la fórmula. Es la tabla que ninguna otra casa publica. */ .materias { display: grid; gap: 0.1rem; } .materias li { padding: 0.62rem 0; border-bottom: 1px solid var(--linea); } .materias .guia__nombre { font-family: var(--serif); font-size: 1.12rem; } .materias .guia__papel { font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tinta-tenue); } /* ---------- cabecera de página y filtros ---------------------------------- */ .cabecera-pagina { padding: calc(7.5rem + 4vw) 0 clamp(2rem, 4vw, 3.2rem); } .cabecera-pagina .display { max-width: 14ch; } /* La barra la rellena el JS. Sin alto reservado, el índice y todo lo de debajo saltaban 77 px al arrancar (CLS 0,12 en la colección): min-height es el alto de una fila de botones más el padding. En estrecho los botones parten en dos filas y la barra crece, pero ya fuera del pliegue. */ .filtros { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; padding-bottom: clamp(1.8rem, 3.5vw, 3rem); min-height: calc(2.4rem + clamp(1.8rem, 3.5vw, 3rem)); } .filtro { padding: 0.6rem 1.2rem; border: 1px solid var(--linea); font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; transition: border-color 0.4s, background 0.4s, color 0.4s; } .filtro:hover { border-color: var(--tinta); } .filtro[aria-pressed="true"] { background: var(--tinta); color: var(--papel); border-color: var(--tinta); } .orden { margin-left: auto; display: flex; align-items: center; gap: 0.7rem; font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; } .orden select { border: 0; border-bottom: 1px solid var(--linea); background: none; padding: 0.4rem 0; letter-spacing: 0.12em; } .recuento { font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tinta-tenue); padding: clamp(1.2rem, 2.5vw, 2rem) 0 0; } /* ---------- rejilla de producto ------------------------------------------- */ /* Solo queda para "también de la casa" al pie de la ficha: el listado y la portada usan el índice. */ .rejilla { display: grid; gap: clamp(1.6rem, 3vw, 2.8rem) clamp(1.2rem, 2vw, 2rem); grid-template-columns: repeat(4, 1fr); } .rejilla--tres { grid-template-columns: repeat(3, 1fr); } .tarjeta { display: flex; flex-direction: column; } .tarjeta__medio { position: relative; } .tarjeta__marco { display: block; position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--papel-hondo); } .tarjeta__marco img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--curva), opacity 0.7s var(--curva); } .tarjeta__marco .reverso { opacity: 0; } .tarjeta:hover .tarjeta__marco .anverso { opacity: 0; transform: scale(1.04); } .tarjeta:hover .tarjeta__marco .reverso { opacity: 1; transform: scale(1.04); } .tarjeta__rapido { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; z-index: 2; padding: 0.85rem; text-align: center; background: rgba(250, 247, 242, 0.94); font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0; transform: translateY(12px); transition: opacity 0.5s var(--curva), transform 0.5s var(--curva); } .tarjeta:hover .tarjeta__rapido, .tarjeta:focus-within .tarjeta__rapido { opacity: 1; transform: translateY(0); } .tarjeta__rapido:hover { background: var(--tinta); color: var(--papel); } .tarjeta__pie { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1.1rem; align-items: baseline; } .tarjeta__num { font-family: var(--sans); font-size: 0.63rem; letter-spacing: 0.2em; color: var(--tinta-tenue); } .tarjeta__nombre { font-family: var(--serif); font-size: 1.45rem; line-height: 1.15; } .tarjeta__familia { font-family: var(--sans); font-size: 0.63rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tinta-tenue); margin-top: 0.3rem; } .tarjeta__precio { font-family: var(--serif); font-size: 1.05rem; white-space: nowrap; } /* ---------- editorial ----------------------------------------------------- */ .editorial { display: grid; grid-template-columns: 1.02fr 0.98fr; align-items: center; gap: clamp(2rem, 6vw, 6rem); } .editorial--invertido .editorial__figura { order: 2; } .editorial__figura { overflow: hidden; aspect-ratio: 4 / 3; margin: 0; } .editorial__figura img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.4s var(--curva); } .editorial:hover .editorial__figura img { transform: scale(1); } .editorial__pie { font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-tenue); margin-top: 0.8rem; } .pareja { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 3rem); } /* ---------- carrito ------------------------------------------------------- */ .velo { position: fixed; inset: 0; z-index: 45; background: rgba(27, 24, 21, 0.45); opacity: 0; visibility: hidden; transition: opacity 0.5s, visibility 0.5s; } body.carrito-abierto .velo { opacity: 1; visibility: visible; } .carrito { position: fixed; top: 0; right: 0; bottom: 0; z-index: 46; width: min(460px, 100%); background: var(--papel); display: flex; flex-direction: column; /* visibility saca el cajón cerrado del orden de tabulación y de los lectores */ visibility: hidden; transform: translateX(100%); transition: transform 0.7s var(--curva), visibility 0.7s; } body.carrito-abierto .carrito { transform: translateX(0); visibility: visible; } .carrito__cabeza { display: flex; justify-content: space-between; align-items: center; padding: 1.6rem var(--margen); border-bottom: 1px solid var(--linea); } .carrito__cabeza h2 { font-size: 1.5rem; } /* overscroll-behavior: al llegar al final de la lista, la rueda dejaba de mover el cajón y empezaba a mover la página de detrás. */ .carrito__lista { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--margen); } .carrito__vacio { padding: 4rem 0; text-align: center; color: var(--tinta-suave); } .linea-carrito { display: grid; grid-template-columns: 78px 1fr auto; gap: 1.1rem; padding: 1.4rem 0; border-bottom: 1px solid var(--linea); animation: entrar-linea 0.5s var(--curva); } @keyframes entrar-linea { from { opacity: 0; transform: translateY(10px); } } .linea-carrito img { width: 78px; aspect-ratio: 4 / 5; object-fit: cover; background: var(--papel-hondo); } .linea-carrito h3 { font-size: 1.2rem; } .linea-carrito .detalle { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-suave); margin: 0.25rem 0 0.7rem; } .linea-carrito .quitar { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-suave); text-decoration: underline; } .carrito__pie { padding: 1.4rem var(--margen) 2rem; border-top: 1px solid var(--linea); } .envio-libre { font-size: 0.7rem; letter-spacing: 0.1em; color: var(--tinta-suave); margin-bottom: 0.8rem; } .barra { height: 2px; background: var(--linea); margin-bottom: 1.4rem; overflow: hidden; } .barra i { display: block; height: 100%; background: var(--oro); width: 0; transition: width 0.8s var(--curva); } .total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1.2rem; font-family: var(--serif); font-size: 1.35rem; } /* Punto que vuela del botón al carrito al añadir. */ .volador { position: fixed; z-index: 60; width: 14px; height: 14px; border-radius: 50%; background: var(--oro); pointer-events: none; } /* ---------- caja ---------------------------------------------------------- */ .caja { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 5vw, 5rem); padding-top: calc(7.5rem + 3vw); align-items: start; } .campo { margin-bottom: 1.2rem; } .campo label { display: block; font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tinta-suave); margin-bottom: 0.5rem; } .campo input, .campo select { width: 100%; padding: 0.95rem 1rem; background: transparent; border: 1px solid var(--linea); transition: border-color 0.4s; } .campo input:focus-visible, .campo select:focus-visible { border-color: var(--tinta); } .campo__falta { margin: 0.45rem 0 0; font-size: 0.76rem; line-height: 1.45; color: #a8443a; } .campo input:invalid:not(:placeholder-shown) { border-color: #a8443a; } .pareja { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .resumen { background: var(--papel-hondo); padding: clamp(1.5rem, 3vw, 2.4rem); position: sticky; top: 6.5rem; } .resumen__linea { display: flex; justify-content: space-between; padding: 0.5rem 0; font-size: 0.92rem; color: var(--tinta-suave); } .resumen__total { display: flex; justify-content: space-between; border-top: 1px solid var(--linea); margin-top: 1rem; padding-top: 1rem; font-family: var(--serif); font-size: 1.4rem; color: var(--tinta); } .paso { display: flex; gap: 1.4rem; font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tinta-suave); margin-bottom: 2.5rem; } .paso b { font-weight: 400; color: var(--tinta); } .confirmacion { text-align: center; padding: clamp(6rem, 14vw, 12rem) 0; } .confirmacion .num-pedido { font-family: var(--serif); font-size: 2rem; color: var(--oro); margin: 1rem 0 2rem; letter-spacing: 0.1em; } /* ---------- pie ----------------------------------------------------------- */ .pie { background: var(--tinta); color: var(--papel); padding: clamp(3.5rem, 7vw, 6rem) 0 2rem; } .pie__rejilla { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: clamp(2rem, 4vw, 4rem); } .pie h3 { font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.6; margin-bottom: 1.4rem; } .pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; } .pie a:hover { color: var(--oro); } .pie__logo { font-family: var(--serif); font-size: 1.6rem; letter-spacing: 0.28em; margin-bottom: 1rem; } .boletin { display: flex; border-bottom: 1px solid rgba(244, 239, 231, 0.3); } .boletin[hidden] { display: none; } .boletin input { flex: 1; background: none; border: 0; padding: 0.8rem 0; color: var(--papel); } .boletin input::placeholder { color: rgba(244, 239, 231, 0.45); } .boletin button { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; padding-left: 1rem; } /* Separador entre dos datos de marca que pueden faltar: solo se pinta si hay algo delante y algo dentro (contacto de maison: teléfono · dirección). */ span:not(:empty) + .tras-punto:not(:empty)::before { content: ' · '; } .pie__legal a { color: inherit; } .pie__legal a:hover { color: var(--papel); } .pie__legal { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.6rem; border-top: 1px solid rgba(244, 239, 231, 0.18); font-size: 0.68rem; letter-spacing: 0.12em; color: rgba(244, 239, 231, 0.55); } /* ---------- el pago del checkout ------------------------------------------- Dos métodos, dos tarjetas grandes que se pueden pulsar enteras. El radio nativo se queda (accesible, teclado), la tarjeta pinta su estado. */ .metodos { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; } .metodo { position: relative; display: block; cursor: pointer; } .metodo input { position: absolute; opacity: 0; } .metodo span { display: grid; gap: 0.25rem; padding: 1rem 1.1rem; border: 1px solid var(--linea); border-radius: 2px; transition: border-color 0.4s var(--curva), background 0.4s var(--curva); } .metodo b { font-family: var(--serif); font-weight: 500; font-size: 1.05rem; } .metodo i { font-style: normal; font-size: 0.7rem; color: var(--tinta-suave); } .metodo input:checked + span { border-color: var(--oro); background: rgba(168, 129, 77, 0.08); } .metodo input:focus-visible + span { outline: 2px solid var(--oro); outline-offset: 2px; } @media (max-width: 560px) { .metodos { grid-template-columns: 1fr; } } .error-envio { margin-top: 1.2rem; font-size: 0.85rem; line-height: 1.6; color: #c96a5e; } .error-envio .enlace { color: inherit; text-decoration: underline; } /* ---------- la compra fija del móvil --------------------------------------- Solo en pantallas estrechas: el precio y la acción a un pulgar, pase lo que pase con el scroll. Se retira sola cuando la compra de la ficha está a la vista. En escritorio no existe. */ .compra-fija { display: none; } @media (max-width: 700px) { .compra-fija { position: fixed; left: 0; right: 0; bottom: 0; z-index: 44; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.8rem var(--margen) calc(0.8rem + env(safe-area-inset-bottom)); background: rgba(13, 11, 9, 0.92); backdrop-filter: blur(12px); border-top: 1px solid rgba(244, 239, 231, 0.14); transform: translateY(0); transition: transform 0.45s var(--curva), visibility 0.45s; } .compra-fija--fuera { transform: translateY(110%); visibility: hidden; } .compra-fija__precio { font-family: var(--serif); font-size: 1.3rem; color: var(--papel); } .compra-fija .boton { padding: 0.75rem 1.4rem; white-space: nowrap; } /* que el pie no quede tapado por la barra */ body:has(.compra-fija:not(.compra-fija--fuera)) .pie { padding-bottom: 5.5rem; } } /* ---------- las páginas legales -------------------------------------------- */ .legal { padding-bottom: clamp(4rem, 8vw, 7rem); } .legal .subtitulo { margin: 2.8rem 0 0.9rem; } .legal .parrafo b { color: var(--papel); font-weight: 500; } /* ---------- animaciones de entrada ---------------------------------------- */ .revelar { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--curva), transform 1s var(--curva); transition-delay: var(--retardo, 0s); } .revelar.dentro { opacity: 1; transform: none; } .revelar-imagen { position: relative; overflow: hidden; } .revelar-imagen::after { content: ''; position: absolute; inset: 0; z-index: 2; background: var(--papel); transform-origin: bottom; transition: transform 1.2s var(--curva); transition-delay: var(--retardo, 0s); } .revelar-imagen.dentro::after { transform: scaleY(0); } .seccion--honda .revelar-imagen::after { background: var(--papel-hondo); } /* Titular que se abre palabra a palabra */ .palabra { display: inline-block; overflow: hidden; vertical-align: bottom; } .palabra > i { display: inline-block; font-style: inherit; transform: translateY(105%); transition: transform 1.1s var(--curva); transition-delay: var(--retardo, 0s); } .listo .palabra > i { transform: translateY(0); } /* Cortinilla entre páginas */ #cortinilla { position: fixed; inset: 0; z-index: 90; background: var(--papel); pointer-events: none; opacity: 1; transition: opacity 0.6s var(--curva); } #cortinilla.abierta { opacity: 0; } #cortinilla.cerrando { opacity: 1; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; } .revelar { opacity: 1; transform: none; } .revelar-imagen::after { display: none; } .palabra > i { transform: none; } } /* ---------- móvil y tablet ------------------------------------------------ */ @media (max-width: 1080px) { .rejilla { grid-template-columns: repeat(3, 1fr); } .pie__rejilla { grid-template-columns: 1fr 1fr; } .ficha { grid-template-columns: 1fr; } .ficha__datos { position: static; } .caja { grid-template-columns: 1fr; } .resumen { position: static; } .series { grid-template-columns: 1fr; } .series__pieza + .series__pieza { border-left: 0; } /* Sin sitio para la columna de materias: pasa debajo del nombre y se queda visible, que en táctil no hay "pasar por encima". */ .indice__fila { grid-template-columns: 10px 3.6rem minmax(0, 1fr) auto; row-gap: 0.7rem; } .indice__materias { grid-column: 3 / -1; opacity: 1; transform: none; line-height: 1.8; } } @media (max-width: 780px) { .cabecera { grid-template-columns: auto 1fr auto; } .cabecera__nav { display: none; } .hamburguesa { display: block; } .rejilla, .rejilla--tres { grid-template-columns: repeat(2, 1fr); } .editorial, .editorial--invertido { grid-template-columns: 1fr; } .editorial--invertido .editorial__figura { order: 0; } .pie__rejilla { grid-template-columns: 1fr; } .tarjeta__rapido { opacity: 1; transform: none; } .cabecera-seccion { align-items: flex-start; } /* En móvil la cabecera solo aguanta menú, logotipo y carrito: el resto vive en el menú. */ .cabecera__acciones a { display: none; } .logo { font-size: 1.05rem; letter-spacing: 0.2em; } .logo small { letter-spacing: 0.3em; } .colofon { grid-template-columns: 1fr; } .reglas li { grid-template-columns: 1fr; gap: 0.6rem; } .colofon > div + div { border-left: 0; border-top: 1px solid var(--linea); padding-left: 0; } .indice__fila { grid-template-columns: 10px 3.2rem 1fr; padding-left: var(--margen); padding-right: var(--margen); } .indice__cola { grid-column: 2 / -1; justify-items: start; text-align: left; grid-auto-flow: column; gap: 1.2rem; align-items: baseline; } .estrato__banda { grid-template-columns: 1fr; gap: 0.45rem; } .estrato__reloj { padding-top: 0; } .pareja { grid-template-columns: 1fr; } } @media (max-width: 460px) { .rejilla, .rejilla--tres { grid-template-columns: 1fr; } .indice__nombre { font-size: 1.55rem; } .especimen { aspect-ratio: 3 / 4; } }