/* ============================================================
   Ximets & Dolçets — hoja de estilo del tema
   Blanco roto de fondo, azul cobalto en los detalles. El color del
   azulejo se queda en las piezas de marca; la interfaz va a dos tintas.
   ============================================================ */

:root {
	--hueso:    #F6F3EC;
	--hueso-2:  #FBF9F4;
	--nata:     #FFFFFF;
	--linea:    #E4DFD2;

	--azul:     #1E3D8F;
	--azul-osc: #14265C;
	--azul-luz: #DCE3F2;
	--tinta:    #16224A;
	--humo:     #6E6A62;

	--display: "Playfair Display", Georgia, "Times New Roman", serif;
	--texto:   "Jost", "Futura", "Century Gothic", -apple-system, sans-serif;

	--marco: clamp(1.25rem, 5vw, 5rem);
	--ancho: 1280px;
	--curva: cubic-bezier(.22, 1, .36, 1);
	--cabecera-alto: 78px;
	--cenefa-banda: url("../img/cenefa-banda.svg");
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 92px; }

body {
	margin: 0;
	background: var(--hueso);
	color: var(--tinta);
	font-family: var(--texto);
	font-weight: 300;
	font-size: clamp(1rem, .95rem + .22vw, 1.08rem);
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--azul); color: #fff; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }

.saltar { position: absolute; left: -9999px; top: 0; z-index: 200;
	background: var(--tinta); color: var(--hueso); padding: .75rem 1.25rem; }
.saltar:focus { left: 0; }

/* ---------- Tipografía ---------- */

h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.08; margin: 0; }
h2 { font-size: clamp(2.1rem, 1.3rem + 2.8vw, 3.6rem); }
h3 { font-size: clamp(1.3rem, 1.1rem + .7vw, 1.7rem); }

.epigrafe {
	font-family: var(--texto); font-size: .68rem; font-weight: 400;
	letter-spacing: .34em; text-transform: uppercase;
	color: var(--azul); margin: 0 0 1.1rem; padding-left: .34em;
}

.parrafo { margin: 0 0 1.1rem; color: var(--humo); max-width: 62ch; }
.parrafo--centrado { margin-inline: auto; text-align: center; }

.filete { display: block; width: 54px; height: 2px; border: 0;
	background: var(--azul); margin: 1.5rem 0; }
.filete--centrado { margin-inline: auto; }

.enlace {
	background-image: linear-gradient(var(--azul), var(--azul));
	background-repeat: no-repeat; background-size: 0 1px; background-position: 0 100%;
	transition: background-size .45s var(--curva); padding-bottom: 2px; color: var(--azul);
}
.enlace:hover { background-size: 100% 1px; }

/* La marca de lo que el cliente aún no ha confirmado. Tiene que cantar. */
.borrador {
	display: inline-block; vertical-align: baseline;
	font-family: var(--texto); font-size: .62rem; font-weight: 500;
	letter-spacing: .16em; text-transform: uppercase;
	color: var(--azul-osc); background: var(--azul-luz);
	border: 1px solid #C3CFE8; border-radius: 2px;
	padding: .16rem .5rem; margin-left: .4rem; line-height: 1.5;
}

/* ---------- Contenedores ---------- */

.envoltura { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--marco); }
.envoltura--estrecha { max-width: 780px; }
.seccion { padding-block: clamp(4.5rem, 10vw, 9rem); position: relative; }
.seccion--hueso { background: var(--hueso-2); }
.seccion--centro { min-height: 70vh; display: flex; align-items: center; }

.titular { text-align: center; max-width: 46rem; margin: 0 auto clamp(2.5rem, 5vw, 4rem); }
.titular__pie { color: var(--humo); font-size: .94rem; margin: 1rem 0 0; }

/* ---------- Botones ---------- */

.boton {
	display: inline-block; font-family: var(--texto);
	font-size: .72rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
	padding: 1.05rem 2.2rem; border: 1px solid var(--azul); color: #fff;
	/* el relleno sube desde abajo, y va como fondo: una capa con ::after tapa el texto */
	background-color: var(--azul);
	background-image: linear-gradient(var(--azul-osc), var(--azul-osc));
	background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 0;
	transition: background-size .45s var(--curva), color .4s var(--curva);
}
.boton:hover { background-size: 100% 100%; }
.boton--linea { background-color: transparent; color: var(--azul); }
.boton--linea:hover { color: #fff; }

/* ---------- Cabecera ---------- */

.cabecera {
	position: fixed; inset: 0 0 auto; z-index: 100; background: transparent;
	transition: background .5s var(--curva), box-shadow .5s var(--curva);
}
.cabecera__caja {
	max-width: var(--ancho); margin-inline: auto; padding: 0 var(--marco);
	min-height: var(--cabecera-alto);
	display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.cabecera.esta-fijada { background: rgba(246, 243, 236, .95); box-shadow: 0 1px 22px rgba(22, 34, 74, .08); }

.marca { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.marca__sello { width: 46px; flex: none; }
/* Si el logotipo del cliente entra como imagen, se ajusta al hueco del texto */
.logotipo { display: block; }
img.logotipo { width: auto; height: 1.5em; }
.pie__nombre img.logotipo { height: 1.5em; filter: brightness(0) invert(1); }
.marca__textos { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.marca__nombre { font-family: var(--display); font-weight: 800; font-size: 1.42rem; line-height: 1.1; }
.marca__oficio { font-size: .58rem; letter-spacing: .3em; text-transform: uppercase; color: var(--azul); padding-left: .3em; }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.2rem); }
.nav a {
	font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
	position: relative; padding-bottom: 4px;
}
.nav a::after {
	content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
	background: var(--azul); transition: width .4s var(--curva);
}
.nav a:hover::after { width: 100%; }

.hamburguesa { display: none; width: 30px; height: 20px; position: relative; }
.hamburguesa span {
	position: absolute; left: 0; width: 100%; height: 2px; background: var(--tinta);
	transition: transform .4s var(--curva), opacity .3s;
}
.hamburguesa span:first-child { top: 3px; }
.hamburguesa span:last-child  { bottom: 3px; }
.menu-abierto .hamburguesa span:first-child { transform: translateY(6px) rotate(45deg); }
.menu-abierto .hamburguesa span:last-child  { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Menú de móvil ---------- */

.velo {
	position: fixed; inset: 0; z-index: 90;
	background: var(--hueso);
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 1.6rem; padding: 2rem;
	/* 100% se queda corto con la barra del navegador; dvh es lo que se ve de verdad */
	height: 100vh; height: 100dvh;
	opacity: 0; visibility: hidden; transition: opacity .45s var(--curva), visibility .45s;
}
.menu-abierto .velo { opacity: 1; visibility: visible; }
.velo__sello { width: 92px; opacity: .5; }
.velo__nav { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.velo__nav a { font-family: var(--display); font-weight: 600; font-size: 2rem; font-variation-settings: "opsz" 10; }
.velo__pie { text-align: center; color: var(--humo); font-size: .9rem; }
.velo__pie p { margin: .3rem 0 0; }

/* ---------- Portada ---------- */

.hero {
	position: relative; min-height: 100svh; display: flex; align-items: center;
	padding-block: calc(var(--cabecera-alto) + 3rem) 5rem; overflow: hidden;
}
.hero__caja { position: relative; z-index: 3; max-width: var(--ancho);
	margin-inline: auto; padding-inline: var(--marco); width: 100%; }
.hero__epigrafe {
	font-size: .66rem; letter-spacing: .34em; text-transform: uppercase;
	color: var(--azul); margin: 0 0 1.6rem; padding-left: .34em;
}
.hero__nombre {
	font-family: var(--display); font-weight: 800;
	font-size: clamp(3.2rem, 1.2rem + 11vw, 11rem);
	line-height: .92; margin: 0; letter-spacing: -.01em;
}
.hero__nombre span { display: block; }
.hero__amp { color: var(--azul); font-style: italic; }
.hero__claim { font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem); color: var(--humo);
	margin: 1.8rem 0 2.4rem; max-width: 34ch; }
.hero__botones { display: flex; flex-wrap: wrap; gap: .9rem; }

.hero__pieza {
	position: absolute; z-index: 1; right: calc(var(--marco) * -.2); bottom: 0;
	width: clamp(260px, 42vw, 620px); margin: 0;
}
.hero__pieza .foto, .hero__pieza .hueco { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }

.hero__sello {
	position: absolute; z-index: 4; right: clamp(1rem, 6vw, 5rem); top: 20vh;
	width: clamp(110px, 14vw, 200px);
}
.hero__baja { position: absolute; left: 50%; bottom: 2rem; z-index: 4; width: 1px; height: 46px; }
.hero__baja span { display: block; width: 1px; height: 100%; background: var(--azul); opacity: .5;
	transform-origin: top; animation: baja 2.4s var(--curva) infinite; }
@keyframes baja { 0% { transform: scaleY(0); } 45% { transform: scaleY(1); } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- Cenefa ----------
   Es la misma del rótulo de la fachada: banda azul, acanto en ocre, filetes.
   Va de separador entre bloques; el color está escrito en el propio SVG porque
   dentro de un background-image no llega currentColor. */

.friso {
	height: clamp(46px, 5vw, 66px);
	background: var(--cenefa-banda) repeat-x 0 50%;
	background-size: auto 100%;
	overflow: hidden;
}
/* Deriva lenta: además de separar, hace de elemento vivo, sin meter una
   segunda banda en marcha. */
.friso--deriva { animation: deriva 90s linear infinite; }
@keyframes deriva { to { background-position: -1440px 50%; } }

/* ---------- Escena de la palabra grande ---------- */

.escena { position: relative; padding-block: clamp(5rem, 12vw, 11rem); overflow: hidden; }
.escena__palabra {
	font-weight: 900;
	position: absolute; left: 26%; top: 46%; z-index: 0; margin: 0;
	transform: translate(-50%, -50%);
	font-family: var(--display); font-weight: 500;
	font-size: clamp(4.5rem, 16vw, 17rem); line-height: .82;
	color: var(--azul); opacity: .08;
	white-space: nowrap; pointer-events: none; user-select: none;
	will-change: transform;
}
.escena__reja {
	position: relative; z-index: 2;
	display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.escena__foto { margin: 0; }
.escena__foto .foto, .escena__foto .hueco { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }

.lista-marcas { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: .9rem; }
.lista-marcas li { display: flex; gap: .9rem; align-items: baseline; color: var(--humo);
	border-top: 1px solid var(--linea); padding-top: .9rem; }
.lista-marcas span { font-size: .68rem; letter-spacing: .2em; color: var(--azul); }

/* ---------- La vitrina ---------- */


/* ---------- Filtro de la vitrina ----------
   Se queda pegado bajo la cabecera para poder saltar de familia sin subir.
   Es scroll horizontal en móvil: ocho familias no caben en una línea. */

.filtro {
	position: sticky; top: var(--cabecera-alto); z-index: 40;
	display: flex; gap: .5rem; flex-wrap: nowrap; overflow-x: auto;
	padding: .9rem 0 1.4rem; margin-bottom: .6rem;
	background: linear-gradient(var(--hueso-2) 72%, rgba(251, 249, 244, 0));
	scrollbar-width: none;
}
.filtro::-webkit-scrollbar { display: none; }

.filtro__chip {
	flex: 0 0 auto;
	font-family: var(--texto); font-size: .7rem; font-weight: 500;
	letter-spacing: .14em; text-transform: uppercase; padding-left: .14em;
	color: var(--azul); background: var(--nata);
	border: 1px solid var(--linea); border-radius: 100px;
	padding: .62rem 1.15rem;
	transition: background .3s var(--curva), color .3s var(--curva), border-color .3s var(--curva);
}
.filtro__chip:hover { border-color: var(--azul); }
.filtro__chip.esta-activo { background: var(--azul); color: #fff; border-color: var(--azul); }

/* Al filtrar no se toca `display`: se saca del flujo de columnas para que el
   mosaico se recomponga solo y no queden huecos donde estaba la familia. */
.grupo[hidden] { display: none; }

/* La vitrina se empaqueta por COLUMNAS, no por rejilla: las familias tienen
   16 productos y 2, y con grid quedaban huecos enormes debajo de las cortas.
   Con `columns` los bloques suben y encajan como un mosaico. */
.vitrina__reja { columns: 3; column-gap: clamp(1.4rem, 3vw, 2.6rem); }

/* Cada familia, una tesela: papel, filete fino y aire. Da el aire de azulejo
   sin meter un solo ornamento más. */
.grupo {
	break-inside: avoid; -webkit-column-break-inside: avoid;
	background: var(--nata); border: 1px solid var(--linea);
	padding: clamp(1.3rem, 2.4vw, 1.9rem);
	margin: 0 0 clamp(1.4rem, 3vw, 2.6rem);
}
.grupo__titulo { font-size: 1.35rem; line-height: 1.15; }
/* El filete corto en cobalto es el guiño al rótulo, y separa sin ruido. */
.grupo__titulo::after {
	content: ""; display: block; width: 38px; height: 2px;
	background: var(--azul); margin: .7rem 0 0;
}
.grupo__nota {
	font-family: var(--display); font-style: italic; font-weight: 500;
	font-size: .95rem; color: var(--azul); margin: .8rem 0 1.3rem;
}
.piezas { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.pieza { border-bottom: 1px solid var(--linea); padding: .62rem 0; }
.pieza:last-child { border-bottom: 0; padding-bottom: 0; }
/* Sin guía de puntos ni guion: mientras no haya precios, la línea de puntos
   hace que la carta parezca un listado a medio rellenar. */
.pieza__linea { display: flex; align-items: baseline; gap: .6rem; }
.pieza__n { font-weight: 400; }
.pieza__p { color: var(--azul); font-variant-numeric: tabular-nums; margin-left: auto; }
.pieza__d { display: block; font-size: .86rem; color: var(--humo); margin-top: .2rem; }

/* ---------- Franja ---------- */

.franja { position: relative; min-height: 58vh; display: grid; place-items: center;
	overflow: hidden; padding: 5rem var(--marco); }
.franja__fondo { position: absolute; inset: -12% 0; z-index: 0; }
.franja__fondo .foto, .franja__fondo .hueco { width: 100%; height: 100%; object-fit: cover; }
.franja__velo {
	position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(rgba(246, 243, 236, .58), rgba(246, 243, 236, .78));
}
.franja__cita { position: relative; z-index: 2; margin: 0; text-align: center; color: var(--tinta); max-width: 26ch; }
.franja__cita p { font-family: var(--display); font-weight: 700; font-variation-settings: "opsz" 14; font-size: clamp(1.7rem, 1rem + 3vw, 3.2rem);
	line-height: 1.15; margin: 0 0 1.2rem; }
.franja__cita cite { font-style: normal; font-size: .68rem; letter-spacing: .28em;
	text-transform: uppercase; color: var(--azul); }

/* ---------- Encargos ---------- */

.encargos__caja { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.encargos__formulario { background: var(--hueso-2); border: 1px solid var(--linea); padding: clamp(1.4rem, 3vw, 2.4rem); }

/* ---------- Visitarnos ---------- */

.visitar__reja { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.tabla-horario { width: 100%; border-collapse: collapse; margin-top: .5rem; }
.tabla-horario th, .tabla-horario td { text-align: left; padding: .7rem 0;
	border-bottom: 1px solid var(--linea); font-weight: 300; }
.tabla-horario th { color: var(--tinta); }
.tabla-horario td { color: var(--azul); text-align: right; }

.mapa__caja { position: relative; margin-top: 1.8rem; background: var(--hueso);
	border: 1px solid var(--linea); min-height: 260px;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 2rem; }
.mapa__hueco { width: 92px; opacity: .55; }
.mapa__aviso { font-size: .78rem; color: var(--humo); margin: 0; text-align: center; }
.mapa--vivo { width: 100%; height: 320px; border: 0; }
.mapa__caja.esta-vivo { padding: 0; min-height: 0; }
.mapa__caja.esta-vivo .mapa__hueco, .mapa__caja.esta-vivo .mapa__aviso { display: none; }

/* ---------- Huecos de foto ---------- */

.hueco {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
	background: var(--hueso-2); border: 1px solid var(--linea); padding: 2rem; min-height: 220px;
}
.hueco__marca { width: 104px; opacity: .5; }
.hueco__pie { font-size: .76rem; line-height: 1.5; color: var(--humo); text-align: center; max-width: 30ch; }

/* ---------- Entradas y páginas ---------- */

.entradas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 2.4rem; }
.entrada { min-width: 0; }
.entrada h2 { font-size: 1.5rem; margin: 1rem 0 .5rem; }
.pagina__titulo { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.6rem); margin: 0; }
.prosa { margin-top: 2rem; }
.prosa p { color: var(--humo); }
.prosa a { color: var(--azul); text-decoration: underline; }

/* ---------- Pie ---------- */

.pie { background: var(--tinta); color: var(--hueso); padding-top: clamp(3.5rem, 7vw, 6rem); }
.pie__reja { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: clamp(2rem, 4vw, 3.4rem); padding-bottom: 3.5rem; }
.pie__marca { display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; min-width: 0; }
.pie__sello { width: 84px; opacity: .8; }
.pie__sello svg .sello, .pie__sello svg { color: inherit; }
.pie__nombre { font-family: var(--display); font-weight: 700; font-size: 1.6rem; font-variation-settings: "opsz" 8; }
.pie__oficio { font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; opacity: .7; padding-left: .26em; }
.pie__bloque h3 { font-size: .68rem; letter-spacing: .28em; text-transform: uppercase;
	font-family: var(--texto); font-weight: 500; margin: 0 0 1.1rem; opacity: .7; padding-left: .28em; }
.pie__bloque p { margin: 0 0 .5rem; opacity: .9; display: flex; gap: .6rem; flex-wrap: wrap; }
.pie__bloque span { opacity: .6; }
.pie__falta { opacity: .85; }
.pie__legal { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between;
	align-items: center; border-top: 1px solid rgba(246, 243, 236, .16); padding-block: 1.6rem; }
.pie__legal p { margin: 0; font-size: .8rem; opacity: .7; }
.pie__legal nav { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.pie__legal a { font-size: .78rem; opacity: .7; }
.pie__legal a:hover { opacity: 1; }


/* ---------- Aparición al entrar en pantalla ---------- */

.revela { opacity: 0; transform: translateY(26px); }
.revela.dentro { opacity: 1; transform: none; transition: opacity .9s var(--curva), transform .9s var(--curva); }
.revela[data-tarde="1"].dentro { transition-delay: .09s; }
.revela[data-tarde="2"].dentro { transition-delay: .18s; }
.revela[data-tarde="3"].dentro { transition-delay: .27s; }
.revela[data-tarde="4"].dentro { transition-delay: .36s; }
.revela[data-tarde="5"].dentro { transition-delay: .45s; }

[data-gira] { animation: gira 44s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ---------- Móvil ---------- */

@media (max-width: 1100px) { .vitrina__reja { columns: 2; } }

@media (max-width: 900px) {
	.vitrina__reja { columns: 1; }
	.nav { display: none; }
	.hamburguesa { display: block; }
	.escena__reja { grid-template-columns: minmax(0, 1fr); }
	.hero { min-height: 0; flex-direction: column; align-items: stretch; }
	.hero__pieza {
		position: relative; right: auto; bottom: auto; width: auto;
		margin: 2.5rem var(--marco) 0;
	}
	.hero__sello { top: auto; bottom: auto; right: var(--marco); margin: 2rem 0 0 auto; position: relative; width: 96px; }
	.hero__baja { display: none; }
}

/* ---------- Reducir movimiento ---------- */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.revela { opacity: 1; transform: none; }
	.friso--deriva, [data-gira], .hero__baja span { animation: none; }
	*, *::before, *::after { transition-duration: .01ms !important; }
}

/* ---------- Modo captura ----------
   Sin esto las capturas mienten: el navegador sin ventana no dispara las
   animaciones de entrada y sale media web en blanco. */

.is-shot .revela { opacity: 1; transform: none; transition: none; }
.is-shot .friso--deriva, .is-shot [data-gira], .is-shot .hero__baja span { animation: none; }
.is-shot * { transition: none !important; }
.is-shot .hero { min-height: 96svh; }
.is-shot #gl-cookies { display: none !important; }

/* ---------- Tablet en horizontal ----------
   La pantalla es ancha pero baja: el nombre, calculado solo con el ancho, se
   comía la portada entera y los botones se quedaban fuera. Aquí el tamaño lo
   limita también la altura de la ventana. */

@media (orientation: landscape) and (max-height: 900px) and (min-width: 901px) {
	.hero { padding-block: calc(var(--cabecera-alto) + 1.4rem) 3rem; }
	.hero__epigrafe { margin-bottom: 1rem; }
	.hero__nombre { font-size: min(clamp(3.2rem, 1.2rem + 11vw, 11rem), 13.5vh); }
	.hero__claim { margin: 1.1rem 0 1.7rem; }
	.hero__sello { top: 13vh; width: clamp(90px, 11vw, 150px); }
	.hero__pieza { width: clamp(240px, 36vw, 460px); }
	.hero__baja { display: none; }
}