/* Cards and carousel shared by the home page and the product / project / news archives. */

/* --- Pegado bajo la cabecera --------------------------------------------
   Para bloques que se quedan arriba mientras pasa su sección. Se apartan lo
   que mide la cabecera (main.js publica su alto) y, cuando esta se retira al
   bajar, suben a ocupar su sitio con la misma curva que ella. El recorrido lo
   limita su contenedor, así que se sueltan al acabar el bloque. */
.sticky-top {
	position: sticky;
	top: var(--header-h, 148px);
	transition: top 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

body:has( .site-header.is-hidden ) .sticky-top { top: 0; }

/* --- Shared pieces ------------------------------------------------------- */

/* Page title: "_Noticias", "_Diseñadores", "_Descargas"… */
.page-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--titular);
	letter-spacing: -0.04em;
	line-height: 1;
}

/* Cabecera de página: el titular a la izquierda y su entradilla a la derecha.
   La comparten diseñadores y descargas; los archivos usan la misma rejilla con
   una foto en lugar del texto. */
.disenadores__hero,
.descargas__hero {
	display: grid;
	grid-template-columns: 40fr 60fr;
	gap: 24px;
	min-height: clamp(180px, 18vw, 262px);
	padding: clamp(20px, 2.2vw, 32px) var(--edge) 24px;
}

/* Entradilla que acompaña a un titular de página: misma medida y mismo cuerpo
   en toda la web (405px y 14px a 1440; 540px y 19px a 1920). */
.disenadores__intro,
.descargas__intro,
.archivo__intro,
.contacto__intro {
	max-width: clamp(280px, 28.1vw, 540px);
	font-size: clamp(14px, 0.97vw, 19px);
	line-height: 1.25;
}

.disenadores__intro,
.descargas__intro { padding-top: 0.6em; }

/* Enlace con la rayita del "_" a su izquierda que, al pasar el ratón, crece
   hasta subrayar todo el texto. El filete se pinta de fondo para poder
   animarlo: text-decoration no se puede hacer crecer. */
.rayita {
	display: inline;
	padding-left: 0.62em;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	/* la caja de una línea baja 0,556em bajo la base (el descendente de la
	   Suisse); el filete va a 0,24em, que es donde cae el guion bajo */
	background-position: 0 calc(100% - 0.316em);
	background-size: 0.5em 0.08em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	transition: background-size 0.35s ease;
}

.rayita:hover,
a:hover > .rayita,
button:hover > .rayita { background-size: 100% 0.08em; }

/* La misma, con la rayita detrás del texto ("Noticia anterior_"): crece
   hacia la izquierda. */
.rayita--derecha {
	padding-left: 0;
	padding-right: 0.62em;
	background-position: 100% calc(100% - 0.316em);
}

@media (prefers-reduced-motion: reduce) {
	.rayita { transition: none; }
}

/* Dark button (link or <button>) */
.button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--c-dark);
	color: var(--c-white);
	border: 0;
	padding: 8px 20px;
	font-family: var(--font-body);
	font-size: clamp(15px, 1.042vw, 20px);
	/* la caja del botón es más baja que en el texto corrido */
	line-height: 1.2;
	cursor: pointer;
	white-space: nowrap;
}

/* Al pasar el ratón el fondo aclara al gris del diseño y la rayita crece
   hasta subrayar el texto (.rayita). Medido en el PNG: #1b1b1a en reposo y
   #727271 al señalar. */
.button { transition: background-color 0.3s ease; }

.button:hover { background: #727271; }

/* Dentro del botón la rayita es un elemento de la caja flexible, no texto en
   línea: su caja mide el interlineado del botón (1,2), no la de la letra, y
   contada desde abajo la raya subía hasta tachar las letras. Se cuenta desde
   el centro, que queda siempre 0,31em por encima de la línea base de la
   Suisse: así cae 0,16em bajo la base, como en el resto de la web. */
.button > .rayita { background-position: 0 calc(50% + 0.512em); }

/* En pantallas estrechas un rótulo largo ensanchaba la página entera y dejaba
   una franja en blanco a la derecha: aquí parte de línea. */
@media (max-width: 600px) {
	.button {
		max-width: 100%;
		white-space: normal;
	}
}

@media (prefers-reduced-motion: reduce) {
	.button { transition: none; }
}

/* "Cargar más" under paginated listings (driven by archive.js) */
.load-more {
	display: flex;
	justify-content: center;
	padding: clamp(28px, 3vw, 44px) 0;
}

.load-more__button {
	font-weight: 300;
	font-size: clamp(15px, 1.042vw, 20px);
	letter-spacing: -0.02em;
}

/* La flecha se queda fuera del subrayado, igual que en los plegables. */

.load-more__button[disabled] { opacity: 0.4; cursor: wait; }

/* Carousel arrows (main.js disables them at either end) */
[data-carousel-prev][disabled],
[data-carousel-next][disabled] {
	opacity: 0.3;
	cursor: default;
}

/* --- Pistas de carrusel --------------------------------------------------
   Se pueden arrastrar con el ratón (main.js) y, al acercar el puntero a un
   lado, aparece la flecha de ese lado, que también mueve el carrusel. */
.novedades__track,
.proyecto__gallery-track { cursor: grab; }

.novedades__track.is-dragging,
.proyecto__gallery-track.is-dragging {
	cursor: grabbing;
	/* mientras se arrastra el imán estorba */
	scroll-snap-type: none;
	user-select: none;
}

.novedades__track.is-dragging img,
.proyecto__gallery-track.is-dragging img { pointer-events: none; }

/* No es una flecha que asoma en el lateral: es el puntero el que se convierte
   en flecha dentro de esa franja, y pinchar en cualquier punto de ella mueve el
   carrusel. La franja ocupa el alto de la pista, que main.js publica. */
.carrusel-flecha {
	position: absolute;
	top: var(--carrusel-arriba, 0);
	height: var(--carrusel-alto, 100%);
	width: 20%;
	z-index: 2;
	padding: 0;
	border: 0;
	background: none;
	color: var(--c-white);
	opacity: 0;
	visibility: hidden;
	cursor: none;
	transition: opacity 0.25s ease, visibility 0s 0.25s;
}

.carrusel-flecha--atras { left: 0; }

.carrusel-flecha--delante { right: 0; }

/* El dibujo va donde esté el ratón, no en el centro de la franja. */
.carrusel-flecha svg {
	position: fixed;
	left: var(--raton-x, 50%);
	top: var(--raton-y, 50%);
	width: clamp(34px, 2.76vw, 53px);
	height: auto;
	display: block;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.carrusel-flecha--atras svg { transform: translate(-50%, -50%) scaleX(-1); }

[data-carousel].hacia-atras .carrusel-flecha--atras,
[data-carousel].hacia-delante .carrusel-flecha--delante {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.25s ease;
}

.carrusel-flecha[hidden] { display: none; }

@media (hover: none) {
	.carrusel-flecha { display: none; }
}

/* --- Product card -------------------------------------------------------- */

/* The photo fills the card and the caption sits on top of it, bottom left. */
.product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	/* 278 x 416 en los PNG del diseno */
	aspect-ratio: 2 / 3;
	padding: 24px;
	overflow: hidden;
	background: var(--c-cream-light);
}

.product-card__media {
	position: absolute;
	inset: 0;
}

/* Hover provisional, a la espera de la segunda foto de cada producto: por
   ahora la que hay se acerca un poco. Cuando lleguen las imágenes, el relevo
   se hace aquí mismo cruzando una sobre otra. */
.product-card__media img {
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-card:hover .product-card__media img,
a:hover > .product-card .product-card__media img {
	transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
	.product-card__media img { transition: none; }
}

.product-card__name,
.product-card__designer { position: relative; }

.product-card__name {
	font-weight: 700;
	font-size: clamp(18px, 2vw, 32px);
	line-height: 1.15;
	margin-bottom: 0;
}

.product-card__designer {
	font-family: var(--font-mono);
	font-size: clamp(13px, 0.903vw, 17.3px);
	color: var(--c-grey-warm);
}

/* --- News card ----------------------------------------------------------- */

.news-card__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--c-cream-light);
	margin-bottom: 16px;
}

.news-card__title {
	font-weight: 700;
	font-size: clamp(18px, 1.25vw, 24px);
	margin-bottom: 8px;
}

.news-card__excerpt {
	font-size: clamp(14px, 0.972vw, 18.7px);
	line-height: 1.5;
	margin-bottom: 12px;
}

/* El icono y la fecha, en la misma línea y del tamaño del texto. Vive aquí y
   no en blog.css porque estas tarjetas salen también en la portada. */
.news-card__date {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-mono);
	font-size: clamp(13px, 0.903vw, 17.3px);
	color: var(--c-dark);
}

.news-card__date svg,
.noticia__date svg {
	flex: none;
	width: 1em;
	height: 1em;
}

/* Every card photo fills its frame */
.product-card__media img,
.news-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Project card --------------------------------------------------------
   Photo fills the tile; name and location sit on it, bottom left, in black. */

.project-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
	min-height: 220px;
	padding: 14px 12px;
	overflow: hidden;
	color: var(--c-dark);
	background: var(--c-cream-light);
}

.project-card__media {
	position: absolute;
	inset: 0;
}

.project-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Los nombres van en negro sobre cualquier foto: un velo claro por abajo
   los mantiene legibles, como en PROYECTOS.png. Al pasar el ratón entra
   otro oscuro por arriba, detrás de los dibujos en blanco. */
.project-card__media::before,
.project-card__media::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.project-card__media::before {
	background: linear-gradient(0deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 32%);
}

.project-card__media::after {
	background: linear-gradient(180deg, rgba(27, 27, 26, 0.5) 0%, rgba(27, 27, 26, 0) 55%);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.project-card:hover .project-card__media::after { opacity: 1; }

/* Los dibujos de los productos usados, como en la ficha del proyecto, pero
   aquí solo al pasar el ratón: en blanco, más pequeños y en tres columnas,
   como en el diseño. */
.project-card__icons {
	position: absolute;
	top: 14px;
	right: 12px;
	display: grid;
	grid-template-columns: repeat(3, clamp(38px, 3.96vw, 76px));
	/* se llenan de derecha a izquierda: con uno o dos productos quedan
	   pegados al borde, no sueltos en la primera columna */
	direction: rtl;
	gap: clamp(10px, 1.1vw, 21px) clamp(12px, 1.94vw, 37px);
	color: var(--c-white);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0s 0.3s;
}

.project-card:hover .project-card__icons {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.3s ease;
}

.project-card__icons > span {
	direction: ltr;
	display: grid;
	justify-items: center;
	gap: 4px;
}

/* Los iconos son dibujos en negro: aquí van calados en blanco. */
.project-card__icons img {
	width: 100%;
	height: auto;
	filter: brightness(0) invert(1);
}

.project-card__icons span span {
	font-family: var(--font-mono);
	font-size: clamp(9px, 0.72vw, 14px);
	line-height: 1.1;
	text-align: center;
}

.project-card__name,
.project-card__location { position: relative; }

.project-card__name {
	font-weight: 700;
	font-size: clamp(15px, 1.3vw, 26px);
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.project-card__name span { font-weight: 300; }

.project-card__location {
	font-family: var(--font-mono);
	font-size: clamp(10px, 0.8vw, 16px);
	line-height: 1.1;
	margin-top: 0;
}

/* --- Novedades carousel --------------------------------------------------
   Full-bleed track with the heading laid over it; four cards and a bit
   fill the viewport, as in the design. */

.novedades {
	position: relative;
	/* el mismo aire por debajo de la barra de puntos que por encima */
	padding-bottom: clamp(28px, 2.2vw, 42px);
}

.novedades__head {
	position: absolute;
	top: 20px;
	left: var(--edge);
	z-index: 1;
	pointer-events: none;
}

.novedades__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--titular);
	line-height: 1;
	letter-spacing: -0.04em;
}

.novedades__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: max(240px, calc(100vw / 4.15));
	gap: 2px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
}

.novedades__track::-webkit-scrollbar { display: none; }
.novedades__item { scroll-snap-align: start; }

.novedades__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	margin-top: 32px;
}

.novedades__prev,
.novedades__next { font-size: 16px; }

.novedades__dots {
	display: flex;
	gap: 6px;
}

.novedades__dots button {
	width: 32px;
	height: 3px;
	background: var(--c-cream);
}

/* En móvil la barra de puntos se salía de la pantalla y ensanchaba la página:
   puntos más cortos, menos hueco y margen a los lados. */
@media (max-width: 720px) {
	.novedades__nav {
		gap: 14px;
		padding: 0 var(--edge);
	}

	.novedades__dots {
		flex: 0 1 auto;
		flex-wrap: wrap;
		justify-content: center;
		gap: 5px;
	}

	.novedades__dots button { width: 20px; }
}

.novedades__dots button.is-active { background: var(--c-dark); }

/* Related products variant: heading in flow, three cards y media por pantalla
   (405px de paso a 1440 en el diseno) y las fotos a sangre. */
.novedades--titled {
	padding-top: 0;
	padding-bottom: clamp(18px, 1.25vw, 24px);
}

.novedades--titled .novedades__head {
	position: static;
	padding: 18px var(--edge) 14px;
	pointer-events: auto;
}

/* 40px a 1440: la P de "Productos" mide 29px en el diseno */
.novedades--titled .novedades__title { font-size: clamp(26px, 2.78vw, 53px); }

.novedades--titled .novedades__track {
	grid-auto-columns: max(240px, calc(28.1% - 4px));
	gap: 4px;
	/* a sangre a cualquier ancho, tambien por encima de 1920 */
	padding: 0;
}

/* --- Productos en espacio ------------------------------------------------
   Horizontal track of context photos at their natural height, top aligned.
   Used by the product archive and the designer page. */

.espacio {
	border-top: 1px solid var(--c-dark);
	padding: 0 max(clamp(8px, 0.6vw, 12px), var(--edge-bleed)) clamp(64px, 8vw, 120px);
}

.espacio__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 0;
}

.espacio__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(18px, 1.6vw, 23px);
	letter-spacing: -0.03em;
}

.espacio__nav {
	display: flex;
	gap: 24px;
	padding-right: 20px;
	font-size: clamp(22px, 1.528vw, 29.3px);
	line-height: 1;
}

.espacio__track {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.espacio__track::-webkit-scrollbar { display: none; }

.espacio__item {
	flex: 0 0 clamp(240px, 27.8%, 420px);
	scroll-snap-align: start;
	background: var(--c-cream-light);
}

.espacio__item img { width: 100%; }

@media (max-width: 900px) {
	.espacio__item { flex-basis: 70%; }
}