:root {
  --tinta: #fff;
  --tinta-suave: rgba(255, 255, 255, .82);
  --cristal: rgba(255, 255, 255, .13);
  --boton: #fff;
  --boton-tinta: #1b1a18;
  --gutter: clamp(20px, 3.6vw, 56px);

  --crema: #f8f0e1;
  --arena: #e6d3ae;
  --cafe: #2b2017;
  --cafe-suave: #6a5847;
  --atlantico: #0f3c50;
  --terracota: #a8553a;
  --serif: Fraunces, Georgia, serif;
}

body[data-tema="bisuteria"] {
  --tinta: #2b2017;
  --tinta-suave: rgba(43, 32, 23, .8);
  --cristal: rgba(43, 32, 23, .1);
  --boton: #2b2017;
  --boton-tinta: #f7ecd6;
}

* { box-sizing: border-box; }

html, body { margin: 0; }
html { scroll-behavior: smooth; }

body {
  min-height: 100dvh;
  overflow-x: hidden;
  background: var(--crema);
  color: var(--cafe);
  font-family: "DM Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p { margin: 0; }
img { display: block; max-width: 100%; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* Cabecera */
.cabecera {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: clamp(12px, 2vh, 20px) var(--gutter);
  color: var(--tinta);
  transition: color .5s ease;
}
.pagina-inicio .cabecera, .pagina-sobre .cabecera { position: absolute; inset: 0 0 auto; }
.marca { display: block; width: fit-content; }
.marca img { display: block; width: auto; height: clamp(62px, 9.5vh, 80px); transition: filter .5s ease; }
/* el logo es crema: sobre fondos claros se oscurece para que se lea */
body[data-tema="bisuteria"] .marca img { filter: brightness(.36) saturate(1.5); }

.menu { display: flex; gap: 2px; padding: 5px; border-radius: 999px; background: var(--cristal); backdrop-filter: blur(10px); transition: background .5s; }
.menu a { padding: 8px 18px; border-radius: 999px; font-size: 14px; font-weight: 500; white-space: nowrap; transition: background .35s, color .35s; }
.menu a:hover { background: var(--cristal); }
.menu a[aria-current="page"] { background: var(--boton); color: var(--boton-tinta); }
.accesos { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.idiomas { display: flex; margin-right: 6px; font-size: 13px; font-weight: 500; letter-spacing: .04em; }
.idiomas a { padding: 8px 6px; opacity: .72; transition: opacity .25s; }
.idiomas a:hover { opacity: 1; }
.idiomas a[aria-current="true"] { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.icono, .flechas button {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--cristal); backdrop-filter: blur(10px); transition: transform .2s, background .5s;
}
.icono:hover, .flechas button:hover { transform: scale(1.08); }
.icono:active, .flechas button:active { transform: scale(.94); }

/* Escaparate */
.hero {
  position: relative; overflow: hidden;
  height: calc(100svh - 34px); min-height: 600px;
  color: var(--tinta); background: var(--atlantico);
  transition: color .5s ease;
}
.fondo, #escena { position: absolute; inset: 0; width: 100%; height: 100%; }
.fondo { z-index: 0; overflow: hidden; }
.fondo__capa { position: absolute; inset: 0; opacity: 0; transition: opacity .9s cubic-bezier(.3, 0, .2, 1); }
.fondo__capa.activa { opacity: 1; }
.fondo__grano {
  position: absolute; inset: 0; opacity: .13; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

#escena { z-index: 1; touch-action: pan-y; cursor: grab; }
#escena.arrastrando { cursor: grabbing; }

#respaldo {
  position: absolute; z-index: 1; left: 50%; top: 52%; transform: translate(-50%, -50%);
  max-width: 46vw; max-height: 74%; object-fit: contain;
}

/* Contenido sobre la escena: el lienzo sigue recibiendo el arrastre */
.contenido { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.contenido a, .contenido button { pointer-events: auto; }

.relato {
  position: absolute; left: var(--gutter); top: 52%; transform: translateY(-50%);
  width: min(30vw, 420px);
}
.selector { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-bottom: 22px; }
.flechas { display: flex; gap: 8px; }
.colecciones { display: flex; gap: 16px; }
#pausa[hidden] { display: none; }
#pausa .pausa__seguir, #pausa[aria-pressed="true"] .pausa__parar { display: none; }
#pausa[aria-pressed="true"] .pausa__seguir { display: inline; }
.colecciones button { padding: 4px 0; font-size: 14px; font-weight: 500; opacity: .72; border-bottom: 1px solid transparent; transition: opacity .3s, border-color .3s; }
.colecciones button:hover { opacity: 1; }
.colecciones button[aria-current="true"] { opacity: 1; border-color: currentColor; }
.titular {
  margin: 0 0 18px;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(38px, 4.5vw, 72px); line-height: 1.02; letter-spacing: -.02em;
}
.linea { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; white-space: nowrap; }
.linea > span { display: block; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.linea:nth-child(2) > span { transition-delay: .05s; }
.texto { font-size: 15.5px; line-height: 1.55; color: var(--tinta-suave); margin-bottom: 26px; max-width: 36ch; transition: opacity .4s; }
.boton {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 20px 13px 24px; border-radius: 999px;
  background: var(--boton); color: var(--boton-tinta);
  font-size: 14.5px; font-weight: 500;
  transition: transform .2s, background .4s, color .4s;
}
.boton:hover { transform: translateY(-2px); }
.boton:active { transform: scale(.97); }
.boton--claro { background: var(--crema); color: var(--cafe); }

body.cambiando .linea > span { transform: translateY(112%); transition-duration: .22s; transition-timing-function: ease-in; transition-delay: 0s; }
body.cambiando .texto, body.cambiando .ficha__nombre, body.cambiando .lema, body.cambiando .ficha__num { opacity: 0; }

.ficha { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); width: 200px; text-align: right; }
.ficha__num { font-family: var(--serif); font-size: 58px; line-height: 1; letter-spacing: -.02em; transition: opacity .3s; font-variant-numeric: tabular-nums; }
.ficha__num small { font-size: 20px; letter-spacing: 0; opacity: .7; margin-left: 4px; }
.ficha__nombre { margin-top: 10px; font-size: 16px; font-weight: 500; transition: opacity .4s; }
.ficha__tienda { margin-top: 30px; font-size: 14px; line-height: 1.45; }
.ficha__tienda p { color: var(--tinta-suave); margin-bottom: 4px; }
.ficha__tienda a { font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.lema {
  position: absolute; left: 50%; bottom: clamp(14px, 3vh, 30px); transform: translateX(-50%);
  text-align: center; font-family: var(--serif); font-size: clamp(16px, 1.5vw, 21px); line-height: 1.2;
  white-space: nowrap; transition: opacity .4s;
}
.redes { position: absolute; left: var(--gutter); bottom: clamp(16px, 3.2vh, 32px); display: flex; gap: 20px; font-size: 13.5px; font-weight: 500; }
.redes a { text-underline-offset: 3px; }
.redes a:hover { text-decoration: underline; }

.proxima { position: absolute; right: 0; bottom: 0; width: 190px; height: 190px; }

/* Piezas comunes de las secciones */
.seccion { padding: clamp(64px, 7vw, 170px) var(--gutter); max-width: 2600px; margin-inline: auto; }
.antetitulo { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--terracota); margin-bottom: 14px; }
main h1, main h2 { margin: 0; font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; text-wrap: balance; }
main h1 { font-size: clamp(40px, 6vw, 84px); line-height: 1.02; }
main h2 { font-size: clamp(30px, 3.6vw, 52px); line-height: 1.08; }
main section p:not(.antetitulo):not(.nota) { line-height: 1.6; color: var(--cafe-suave); }
.enlace { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; font-size: 15px; border-bottom: 1px solid currentColor; padding-bottom: 3px; transition: gap .25s; }
.enlace:hover { gap: 15px; }
.enlace--claro { color: var(--crema); }

.aparece { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .9s cubic-bezier(.2, .8, .2, 1); }
.aparece.visible { opacity: 1; transform: none; }

/* Elementos decorativos de fondo */
.seccion { position: relative; }
.seccion > *:not(.deco) { position: relative; z-index: 1; }
.deco { position: absolute; z-index: 0; height: auto; opacity: .5; pointer-events: none; user-select: none; will-change: transform; }
.deco--collage-caballito { width: clamp(90px, 10vw, 140px); right: 2%; bottom: 2%; }
.deco--collage-concha { width: clamp(70px, 9vw, 130px); left: 1%; top: 44%; opacity: .5; }
.deco--esquina { width: clamp(100px, 13vw, 190px); right: var(--gutter); top: clamp(30px, 4vw, 60px); }
.deco--bloque-derecha { width: clamp(90px, 12vw, 170px); right: 2%; bottom: 2%; }
.deco--bloque-izquierda { width: clamp(70px, 7vw, 105px); left: 42%; top: 3%; opacity: .42; }
.deco--contacto-caballito { width: clamp(60px, 5.4vw, 76px); left: 38%; bottom: 3%; opacity: .55; }
.deco--contacto-concha { width: clamp(70px, 8vw, 120px); left: 1%; bottom: 3%; opacity: .45; }

/* Tira de categorías */
.tira {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px clamp(22px, 4vw, 58px);
  list-style: none; margin: 0; padding: 18px var(--gutter);
  font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
  border-bottom: 1px solid rgba(43, 32, 23, .13);
}

/* Collage editorial */
.collage {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(12px, 2vw, 28px);
  grid-template-rows: auto auto auto;
}
.collage__intro { grid-column: 1 / span 5; grid-row: 1; align-self: start; padding-right: 3vw; }
.collage__intro h2 { margin-bottom: 18px; }
.collage__intro p:last-child { max-width: 42ch; }
.collage__foto { margin: 0; overflow: hidden; }
.collage__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.collage__foto:hover img { transform: scale(1.035); }
.collage__foto--a { grid-column: 6 / span 7; grid-row: 1 / span 2; aspect-ratio: 3 / 2; }
.collage__foto--b { grid-column: 2 / span 5; grid-row: 3; margin-top: clamp(-150px, -10vw, -40px); aspect-ratio: 1; position: relative; z-index: 1; box-shadow: 0 0 0 clamp(8px, 1vw, 14px) var(--crema); }
.nota { font-family: var(--serif); font-style: italic; font-size: clamp(19px, 2vw, 28px); line-height: 1.15; color: var(--terracota); }
.nota svg { display: block; width: clamp(70px, 8vw, 110px); height: auto; stroke-width: 1.5; }
.nota--a { grid-column: 8 / span 4; grid-row: 3; align-self: start; padding-top: 14px; }
.nota--a svg { margin-bottom: 6px; }
.nota--b { grid-column: 7 / span 4; grid-row: 3; align-self: end; padding: 0 0 clamp(16px, 3vw, 44px) 16px; }
.nota--b svg { margin-bottom: 8px; }

/* Banda de historia */
.historia { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 5fr); background: var(--arena); }
.historia__foto { width: 100%; height: 100%; min-height: 340px; object-fit: cover; }
.historia__texto { padding: clamp(36px, 4.5vw, 72px) clamp(24px, 3.6vw, 56px); align-self: center; }
.historia__texto h2 { margin-bottom: 16px; font-size: clamp(28px, 3vw, 44px); }
main section.historia p:not(.antetitulo):not(.nota) { margin-bottom: 22px; color: #4c3d2d; }
.historia .antetitulo { color: #84402a; }
.valores { display: grid; grid-template-columns: repeat(4, 1fr); align-self: center; list-style: none; margin: 0; padding: clamp(24px, 3vw, 44px) clamp(24px, 3vw, 44px) clamp(24px, 3vw, 44px) 0; gap: 12px; }
.valores li { text-align: center; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; line-height: 1.4; }
.valores svg { display: block; width: 40px; height: 40px; margin: 0 auto 12px; stroke-width: 1.15; }

/* Colecciones */
.encabezado { margin-bottom: clamp(30px, 4vw, 52px); }
.tarjetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.6vw, 22px); }
.tarjeta { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; }
.tarjeta img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.tarjeta:hover img { transform: scale(1.05); }
.tarjeta::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(to top, rgba(30, 20, 12, .62), transparent); }
.tarjeta span { position: absolute; z-index: 1; left: clamp(16px, 2vw, 28px); bottom: clamp(14px, 1.8vw, 24px); color: #fff; font-family: var(--serif); font-size: clamp(24px, 2.6vw, 38px); }

/* Detalles */
.detalles { padding-top: 0; }
.mosaico { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto; gap: clamp(18px, 2.2vw, 30px) clamp(10px, 1.6vw, 22px); }
.mosaico figure { margin: 0; display: flex; flex-direction: column; min-height: 0; }
.mosaico__grande { grid-row: 1 / span 2; position: relative; }
.mosaico img { flex: 1; width: 100%; min-height: 0; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 25%; }
.mosaico__grande img { position: absolute; inset: 0 0 auto; aspect-ratio: auto; height: calc(100% - 40px); object-position: 50% 47%; }
.mosaico__grande figcaption { position: absolute; left: 0; bottom: 0; margin: 0; }
.mosaico figcaption { margin-top: 10px; font-family: var(--serif); font-style: italic; font-size: clamp(17px, 1.6vw, 22px); color: var(--terracota); }

/* Visita */
.visita { display: grid; grid-template-columns: 1fr 1fr; background: var(--atlantico); color: var(--crema); }
.visita img { width: 100%; height: 100%; min-height: 380px; object-fit: cover; }
.visita__texto { padding: clamp(40px, 6vw, 96px) clamp(24px, 5vw, 80px); align-self: center; }
.visita .antetitulo { color: #e8b48f; }
.visita h2 { margin-bottom: 18px; }
main section.visita p:not(.antetitulo):not(.nota) { color: rgba(248, 240, 225, .85); margin-bottom: 28px; }
.visita__botones { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; }

/* Sobre Nosotros: entrada por la puerta. Sin JS ni animaciones queda la foto del interior con el título */
.entrada { --texto: 1; --pista: 0; position: relative; background: var(--crema); }
.entrada--activa { --texto: 0; --pista: 1; height: 300svh; }
.entrada__escena { position: sticky; top: 0; height: 100svh; min-height: 320px; overflow: hidden; }
.entrada__respaldo, #entrada-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.entrada--lista .entrada__respaldo { visibility: hidden; }
.entrada:not(.entrada--activa) #entrada-lienzo, .entrada:not(.entrada--activa) .entrada__saltar { display: none; }
.entrada__velo { position: absolute; inset: 30% 0 0; opacity: var(--texto); background: linear-gradient(to top, rgba(26, 17, 10, .86), rgba(26, 17, 10, .5) 45%, transparent); pointer-events: none; }
.entrada__texto {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(30px, 7vh, 72px);
  display: grid; grid-template-columns: 7fr 5fr; column-gap: 40px; align-items: end;
  color: var(--crema); opacity: var(--texto); transform: translateY(calc((1 - var(--texto)) * 22px));
}
.entrada__texto .antetitulo { grid-column: 1 / -1; color: #f0c3a1; }
main section.entrada p.antetitulo + h1 + p { max-width: 42ch; font-size: 17px; color: rgba(248, 240, 225, .92); }
.entrada__pista, .entrada__saltar { position: absolute; bottom: clamp(18px, 3.4vh, 32px); color: #2b2017; font-size: 14px; font-weight: 500; }
main section.entrada p.entrada__pista {
  left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 9px 12px 9px 18px; border-radius: 999px; background: rgba(248, 240, 225, .88); backdrop-filter: blur(8px);
  opacity: var(--pista); color: #2b2017; line-height: 1.2;
}
.entrada__pista svg { animation: bajar 1.8s ease-in-out infinite; }
@keyframes bajar { 50% { transform: translateY(3px); } }
.entrada__saltar {
  right: var(--gutter); padding: 9px 18px; border-radius: 999px; background: rgba(248, 240, 225, .88); backdrop-filter: blur(8px);
  transition: transform .2s, opacity .3s;
}
.entrada__saltar:hover { transform: translateY(-2px); }
.entrada__saltar:active { transform: scale(.96); }
.entrada--final .entrada__saltar { opacity: 0; pointer-events: none; }

/* Sobre Nosotros */
.portada { padding: clamp(24px, 4vw, 60px) var(--gutter) 0; max-width: 1440px; margin-inline: auto; }
.portada__texto { display: grid; grid-template-columns: 7fr 5fr; column-gap: 40px; align-items: end; margin-bottom: clamp(26px, 4vw, 56px); }
.portada__texto .antetitulo { grid-column: 1 / -1; }
.portada__texto p:last-child { max-width: 42ch; font-size: 17px; }
.portada__foto { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
.bloque { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 96px); align-items: center; padding-block: clamp(50px, 6vw, 90px); }
.bloque > img:not(.deco) { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.bloque h2 { margin-bottom: 20px; }
.bloque p + p { margin-top: 14px; }
.bloque--inverso > img:not(.deco) { order: 2; }

/* Contacto */
.contacto { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 7vw, 110px); padding-top: clamp(30px, 4vw, 60px); align-items: start; }
.contacto h1 { font-size: clamp(38px, 4.8vw, 68px); margin-bottom: 16px; }
.contacto__datos img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; margin-bottom: 26px; }
.contacto__datos h2 { font-size: clamp(26px, 2.6vw, 36px); margin-bottom: 10px; }
.formulario { display: grid; gap: 20px; margin-top: 30px; }
.formulario label { display: grid; gap: 8px; font-size: 14px; font-weight: 500; }
.formulario input, .formulario textarea {
  width: 100%; padding: 13px 14px; border: 1px solid rgba(43, 32, 23, .28); border-radius: 8px;
  background: rgba(255, 255, 255, .55); color: var(--cafe); font: 400 16px/1.45 "DM Sans", system-ui, sans-serif; resize: vertical;
}
.formulario input:focus, .formulario textarea:focus { outline: 2px solid var(--terracota); outline-offset: 1px; border-color: transparent; }
.formulario .boton { justify-self: start; }
.formulario small { color: var(--cafe-suave); font-size: 13px; line-height: 1.5; }
.datos { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid rgba(43, 32, 23, .15); }
.datos li { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 13px 0; border-bottom: 1px solid rgba(43, 32, 23, .15); font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.datos span { color: var(--cafe-suave); }
.datos a { font-weight: 500; }
.datos a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Aviso legal */
.seccion.legal { max-width: 860px; padding-top: clamp(30px, 4vw, 60px); }
.legal h1 { margin-bottom: 40px; font-size: clamp(38px, 4.8vw, 68px); }
main .legal h2 { margin: 42px 0 12px; font-size: clamp(23px, 2vw, 32px); }
.legal p + p { margin-top: 12px; }
.legal p:not(.antetitulo) { line-height: 1.65; color: var(--cafe-suave); }
.legal a { text-decoration: underline; text-underline-offset: 3px; }
.legal__datos { margin: 0; border-top: 1px solid rgba(43, 32, 23, .15); }
.legal__datos div { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 13px 0; border-bottom: 1px solid rgba(43, 32, 23, .15); overflow-wrap: anywhere; }
.legal__datos dt { color: var(--cafe-suave); }
.legal__datos dd { margin: 0; font-weight: 500; }

/* Pie */
.pie {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.5fr) max-content; gap: 36px clamp(20px, 4vw, 60px);
  padding: clamp(46px, 6vw, 80px) var(--gutter) 24px;
  background: var(--cafe); color: var(--crema); font-size: 14.5px;
}
.pie__marca img { height: 104px; width: auto; margin-bottom: 14px; }
.pie__marca p { max-width: 34ch; line-height: 1.55; color: rgba(248, 240, 225, .72); }
.pie__redes { display: flex; gap: 10px; margin-top: 18px; }
.pie__redes a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(248, 240, 225, .1); transition: background .25s, transform .2s; }
.pie__redes a:hover { background: rgba(248, 240, 225, .2); transform: scale(1.06); }
.pie__redes a:active { transform: scale(.94); }
.pie__redes svg { width: 20px; height: 20px; }
.pie .pie__comercio { display: flex; align-items: center; gap: 10px; align-self: start; width: fit-content; }
.pie .pie__comercio:hover { text-decoration: none; opacity: .85; }
.pie__comercio img { width: 100px; height: auto; }
.pie__comercio span { display: flex; flex-direction: column; color: #fff; font-size: 20px; font-weight: 900; line-height: 1; text-transform: uppercase; }
.pie__comercio small { font-size: 20px; font-weight: 500; margin-top: 2px; }
.pie h2 { margin: 0 0 14px; font: 500 12.5px/1 "DM Sans", system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #e8b48f; }
.pie nav a, .pie div:not(.pie__marca):not(.pie__legal):not(.pie__redes) a { display: block; padding: 4px 0; overflow-wrap: anywhere; }
.pie a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pie__legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 24px; padding-top: 22px; border-top: 1px solid rgba(248, 240, 225, .16); font-size: 13px; color: rgba(248, 240, 225, .72); }

.pie__copyright { margin-left: auto; }

@media (hover: none) { .icono:hover, .flechas button:hover, .boton:hover { transform: none; } .menu a:hover { background: none; } }

/* Pantallas grandes: el contenido crece con la pantalla en lugar de quedarse pequeño */
@media (min-width: 1700px) {
  :root { --gutter: 4vw; }
  .marca img { height: clamp(80px, 4.6vw, 112px); }
  .cabecera { padding-block: 26px; }
  .menu a { padding: 11px 26px; font-size: 16.5px; }
  .idiomas { font-size: 15px; }
  .icono, .flechas button { width: 50px; height: 50px; }
  .relato { width: 29vw; max-width: 780px; }
  .colecciones { gap: 22px; }
  .colecciones button { font-size: 16.5px; }
  .titular { font-size: clamp(72px, 4.3vw, 118px); margin-bottom: 26px; }
  .texto { font-size: clamp(17px, .95vw, 23px); margin-bottom: 34px; }
  .boton { padding: 17px 26px 17px 32px; font-size: 17px; }
  .ficha { width: clamp(220px, 15vw, 340px); }
  .ficha__num { font-size: clamp(66px, 4vw, 104px); }
  .ficha__num small { font-size: 26px; }
  .ficha__nombre { font-size: 19px; }
  .ficha__tienda { font-size: 16.5px; }
  .lema { font-size: clamp(21px, 1.25vw, 30px); }
  .redes { font-size: 16px; }
  .proxima { width: 260px; height: 260px; }

  .tira { font-size: 14.5px; padding-block: 22px; }
  .antetitulo { font-size: 14.5px; }
  main h2 { font-size: clamp(48px, 3.3vw, 88px); }
  main h1 { font-size: clamp(84px, 5vw, 136px); }
  main section p:not(.antetitulo):not(.nota) { font-size: clamp(17px, .98vw, 24px); }
  .collage__intro p:last-child { max-width: 46ch; }
  .nota { font-size: clamp(28px, 1.7vw, 44px); }
  .nota svg { width: clamp(110px, 6vw, 170px); }
  .deco--collage-caballito { width: 9vw; }
  .deco--collage-concha { width: 7vw; }
  .deco--esquina { width: 10vw; }
  .deco--bloque-derecha { width: 9vw; }
  .deco--bloque-izquierda { width: 5.5vw; }
  .deco--contacto-caballito { width: 5vw; }
  .deco--contacto-concha { width: 6vw; }
  .historia__texto h2 { font-size: clamp(44px, 2.7vw, 74px); }
  .valores li { font-size: 14.5px; }
  .valores svg { width: 58px; height: 58px; }
  .mosaico figcaption { font-size: clamp(22px, 1.25vw, 32px); }
  .mosaico__grande img { height: calc(100% - 50px); }
  .tarjeta span { font-size: clamp(38px, 2.4vw, 64px); }
  .enlace { font-size: 17px; }
  .bloque { padding-block: clamp(90px, 5vw, 150px); }
  .contacto h1 { font-size: clamp(68px, 4vw, 104px); }
  .contacto__datos h2 { font-size: clamp(36px, 2.1vw, 56px); }
  .formulario label, .datos li { font-size: 17px; }
  .formulario input, .formulario textarea { font-size: 18px; padding: 16px 18px; }
  .formulario small { font-size: 15px; }
  .datos li { grid-template-columns: 130px 1fr; padding-block: 17px; }
  .entrada__pista, .entrada__saltar { font-size: 16px; }
  main section.entrada p.antetitulo + h1 + p { font-size: clamp(19px, 1.1vw, 27px); }

  .pie { font-size: 16.5px; padding-block: 90px 30px; }
  .pie__marca img { height: clamp(120px, 6.5vw, 170px); }
  .pie__marca p { font-size: 17px; }
  .pie h2 { font-size: 14px; }
  .pie__redes a { width: 50px; height: 50px; }
  .pie__redes svg { width: 24px; height: 24px; }
  .pie__legal { font-size: 14.5px; }
  .pie__comercio img { width: 130px; }
  .pie__comercio span, .pie__comercio small { font-size: 25px; }
}

@media (min-width: 1700px) {
  .seccion.legal { max-width: 1040px; }
}

@media (max-width: 1100px) {
  .historia { grid-template-columns: 1fr 1fr; }
  .valores { grid-column: 1 / -1; padding: 8px 24px 40px; }
  .pie { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) max-content; }
  .pie__marca { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .cabecera { grid-template-columns: auto 1fr; column-gap: 8px; padding: 8px 16px 0; }
  .marca img { height: 48px; }
  .menu { justify-self: end; padding: 4px; }
  .menu a { padding: 7px 10px; font-size: 13px; }
  .accesos { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
  .icono { display: none; }
  .idiomas { margin: -4px 0 0 -6px; }
  .deco { opacity: .42; }
  .deco--collage-concha, .deco--contacto-concha { display: none; }
  .deco--collage-caballito { width: 86px; right: 16px; top: 44px; bottom: auto; }
  .deco--bloque-derecha { bottom: auto; top: 12px; width: 76px; }
  .deco--bloque-izquierda { left: auto; right: 16px; top: 12px; width: 62px; }
  .deco--contacto-caballito { left: auto; right: 16px; top: 14px; bottom: auto; width: 70px; }

  .hero { height: calc(100svh - 30px); min-height: 600px; }
  .relato { top: auto; bottom: 18px; left: 16px; right: 16px; width: auto; transform: none; }
  .flechas { order: 2; margin-left: auto; }
  #anterior, #siguiente { display: none; }
  #pausa { width: 36px; height: 36px; }
  .selector { margin-bottom: 10px; }
  .colecciones { gap: 20px; }
  .colecciones button { font-size: 14.5px; padding: 8px 0; }
  .titular { display: flex; flex-wrap: wrap; column-gap: .22em; font-size: clamp(32px, 9.4vw, 46px); margin-bottom: 8px; }
  .linea { display: inline-block; vertical-align: top; }
  .texto { font-size: 14.5px; line-height: 1.45; margin-bottom: 14px; max-width: none; }
  .relato .boton { display: flex; justify-content: center; width: 100%; }
  .ficha { top: 68px; right: 16px; width: auto; transform: none; }
  .ficha__num { font-size: 26px; }
  .ficha__num small { font-size: 13px; }
  .ficha__nombre, .ficha__tienda, .redes, .lema { display: none; }
  .proxima { width: 110px; height: 110px; bottom: 300px; }

  .tira { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; padding-inline: 16px; scrollbar-width: none; }
  .tira::-webkit-scrollbar { display: none; }
  .seccion { padding-inline: 16px; }

  .collage { display: flex; flex-direction: column; }
  .collage__intro { order: 0; }
  .collage__foto--a { order: 1; }
  .nota--a { order: 2; }
  .collage__foto--b { order: 3; }
  .nota--b { order: 4; }
  .collage__intro { padding-right: 0; margin-bottom: 28px; }
  .collage__foto--a { aspect-ratio: 4 / 3; }
  .collage__foto--b { width: 74%; margin: 18px 0 0 auto; box-shadow: none; }
  .nota--a { padding: 12px 0 0; }
  .nota--a svg { display: none; }
  .nota--b { padding: 14px 0 0; text-align: right; }
  .nota--b svg { display: none; }

  .historia, .visita, .bloque, .contacto, .portada__texto { grid-template-columns: 1fr; }
  .legal__datos div { grid-template-columns: 1fr; gap: 2px; }
  .entrada--activa { height: 260svh; }
  .entrada__texto { grid-template-columns: 1fr; left: 16px; right: 16px; bottom: 76px; }
  .entrada:not(.entrada--activa) .entrada__texto { bottom: 28px; }
  main section.entrada p.antetitulo + h1 + p { margin-top: 12px; font-size: 15.5px; }
  .entrada__saltar { right: 16px; }
  .historia__foto { height: 280px; min-height: 0; }
  .valores { padding-inline: 16px; }
  .visita img { height: 280px; min-height: 0; }
  .portada { padding-inline: 16px; }
  .portada__texto p:last-child { margin-top: 16px; }
  .portada__foto { aspect-ratio: 4 / 3; }
  .bloque--inverso > img:not(.deco) { order: 0; }
  .pie { grid-template-columns: 1fr 1fr; padding-inline: 16px; }
  .pie__marca { grid-column: 1 / -1; }
  .pie .pie__comercio { grid-column: 1 / -1; }
  .pie__copyright { margin-left: 0; width: 100%; }
}

@media (max-width: 360px) {
  .cabecera { padding-inline: 10px; column-gap: 4px; }
  .marca img { height: 40px; }
  .menu a { padding: 6px 7px; font-size: 12px; }
}

@media (max-width: 600px) {
  .mosaico { grid-template-columns: 1fr 1fr; }
  .mosaico__grande { grid-row: auto; grid-column: 1 / -1; }
  .mosaico__grande { position: static; }
  .mosaico__grande img { position: static; aspect-ratio: 4 / 3; height: auto; }
  .mosaico__grande figcaption { position: static; margin-top: 10px; }
  .valores { grid-template-columns: repeat(2, 1fr); gap: 26px 12px; }
  .tarjetas { grid-template-columns: 1fr; }
  .tarjeta { aspect-ratio: 5 / 4; }
}

/* Móvil en horizontal: texto a la izquierda y pieza a la derecha */
@media (max-width: 960px) and (max-height: 520px) and (orientation: landscape) {
  .accesos { grid-row: 1; grid-column: 1; justify-self: end; margin-right: -4px; }
  .icono { display: none; }
  .cabecera { grid-template-columns: auto auto 1fr; padding: 8px 16px 0; }
  .menu { grid-column: 3; justify-self: end; }
  .marca img { height: 44px; }
  .hero { height: 100svh; min-height: 340px; }
  .relato { left: 16px; right: auto; bottom: auto; top: 76px; width: 46%; }
  .selector { margin-bottom: 4px; }
  .titular { font-size: 28px; }
  .texto { display: none; }
  .relato .boton { display: inline-flex; width: auto; padding-block: 10px; margin-top: 6px; }
  .ficha { display: none; }
  .proxima { width: 90px; height: 90px; bottom: 0; }
  .entrada__texto { grid-template-columns: 7fr 5fr; bottom: 62px; }
  main section.entrada h1 { font-size: 34px; }
  main section.entrada .antetitulo { margin-bottom: 6px; }
  main section.entrada p.antetitulo + h1 + p { font-size: 14px; margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; }
  .entrada__pista svg { animation: none; }
  .aparece { opacity: 1; transform: none; }
}