/* ═══════════════════════════════════════════════════════════════════════
   ELEMENT POTTERY GYM · portada
   Solo la carga index.html (las dos lenguas). element.css lo carga
   también el panel (gestio): lo que es solo de la portada vive aquí.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Inicio · sin imagen, de momento (decisión de Sergi, 12-sep) ───── */
/* Tipografía sobre papel: antetítulo en versalitas, el titular en cursiva
   grande y el lema debajo, también en cursiva, más pequeño y más suave. */
.el-inicio { background: var(--el-papel); text-align: center; padding-block: clamp(4rem, 10vw, 8rem); }
/* Sin foto, la cinta de los cuatro colores del logo abre la portada (la
   misma que la previsualización usa de separador). El aire va en su tinta:
   su crema no se ve sobre el papel. Decorativa: solo CSS. */
.el-inicio__in::before {
  content: ''; display: block; width: clamp(96px, 12vw, 140px); height: 4px;
  margin: 0 auto clamp(1.6rem, 3.5vw, 2.4rem);
  background: linear-gradient(90deg,
    var(--el-tierra) 0 25%, var(--el-agua) 25% 50%, var(--el-aire-tinta) 50% 75%, var(--el-fuego) 75% 100%);
}
.el-inicio__ante {
  font-family: var(--el-sans); font-weight: 500; font-variant-caps: all-small-caps;
  font-size: clamp(1rem, .95rem + .25vw, 1.12rem); letter-spacing: .16em; line-height: 1.5;
  text-wrap: balance; color: var(--el-terracota);
}
.el-inicio h1 {
  font-style: italic; font-weight: 400; font-size: clamp(2.8rem, 2rem + 4vw, 5.2rem);
  line-height: 1.02; text-wrap: balance; margin-top: clamp(1rem, 2.5vw, 1.5rem);
}
.el-inicio__sub {
  font-family: var(--el-serif); font-style: italic; font-weight: 400; color: var(--el-tinta-2);
  font-size: clamp(1.4rem, 1.15rem + 1vw, 2rem); line-height: 1.25; margin-top: clamp(.6rem, 1.5vw, 1rem);
}
.el-inicio__frase { color: var(--el-tinta-2); font-size: clamp(1.02rem, .98rem + .3vw, 1.18rem); max-width: 42ch; margin: clamp(1.4rem, 3vw, 2rem) auto 0; }
.el-inicio__cta { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: clamp(2rem, 4vw, 2.6rem); }
.el-inicio__datos {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.1rem;
  margin-top: clamp(1.8rem, 4vw, 2.4rem); color: var(--el-tinta-2);
  font-size: .76rem; font-weight: 400; letter-spacing: .16em; text-transform: uppercase;
}
.el-inicio__datos li + li::before { content: '·'; margin-right: 1.1rem; }
@media (max-width: 559px) {
  .el-inicio__cta { flex-direction: column; align-items: stretch; max-width: 22rem; margin-inline: auto; }
}
/* Los tres datos en fila piden unos 720 px: de 561 a 781 px se partían en
   dos líneas y la segunda empezaba por el «·» (medido en CA y ES, 12-sep).
   Hasta 819 px van uno debajo de otro, como en el móvil. */
@media (max-width: 819px) {
  .el-inicio__datos { flex-direction: column; }
  .el-inicio__datos li + li::before { content: none; }
}

/* ── Los cuatro elementos ──────────────────────────────────────────── */
.el-seccion--crema2 { background: var(--el-tarjeta); }
/* Rejilla con filetes de 1 px entre tarjetas: el hueco deja ver el fondo. */
.el-elementos {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--el-filete); border: 1px solid var(--el-filete); margin-top: clamp(2rem, 4vw, 3rem);
}
/* Color de cada tarjeta: --c el del elemento, --ci su tinta y --ct su letra
   (la tinta oscurecida hasta pasar de 4,5 sobre el lavado; ver contraste.mjs). */
.el-el--tierra { --c: var(--el-tierra); --ci: var(--el-tierra-tinta); --ct: var(--el-tierra-texto); }
.el-el--fuego  { --c: var(--el-fuego);  --ci: var(--el-fuego-tinta);  --ct: var(--el-fuego-texto); }
.el-el--aire   { --c: var(--el-aire);   --ci: var(--el-aire-tinta);   --ct: var(--el-aire-texto); --borde: var(--ci); }
.el-el--agua   { --c: var(--el-agua);   --ci: var(--el-agua-tinta);   --ct: var(--el-agua-texto); }
.el-el {
  position: relative; background: var(--el-tarjeta);
  padding: clamp(1.5rem, 2.5vw, 2.1rem);
  display: flex; flex-direction: column; gap: .9rem; min-height: 100%;
  /* El crema del aire no se ve como filo sobre crema: su borde va en su tinta. */
  border-top: 3px solid var(--borde, var(--c, var(--el-barro)));
}
/* Un lavado muy leve del color del elemento, para que cada tarjeta se
   reconozca de un vistazo sin romper la calma del conjunto. */
.el-el::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--c, transparent) 0%, transparent 42%);
  opacity: .12; transition: opacity .25s ease;
}
.el-el:hover::after { opacity: .2; }
.el-el > * { position: relative; z-index: 1; }
.el-el__arriba { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.el-el__simbolo { flex: 0 0 auto; }
.el-el__nombre { font-family: var(--el-serif); font-size: 1.55rem; }
.el-el__papel { font-size: .78rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--ct, var(--el-terracota)); }
.el-el__fig { display: flex; justify-content: center; padding: .2rem 0 .4rem; }
.el-el__fig svg { display: block; }
.el-el__texto { font-size: .95rem; color: var(--el-tinta-2); line-height: 1.65; }
.el-el__tags { list-style: none; margin-top: auto; padding-top: .9rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.el-tag {
  font-size: .75rem; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--el-tinta-2);
  border: 1px solid var(--el-arena-2); padding: .28rem .6rem; border-radius: 100px;
}
/* Fondo opaco (su color al 14 % sobre la tarjeta), no translúcido: así el
   contraste de la letra no depende de si la etiqueta cae sobre el lavado. */
.el-el .el-tag {
  border-color: color-mix(in srgb, var(--c, var(--el-arena-2)) 55%, transparent);
  color: var(--ct, var(--el-tinta-2));
  background: color-mix(in srgb, var(--c, var(--el-tarjeta)) 14%, var(--el-tarjeta));
}
/* Corte propio en 980 px, no el de 559/560 del resto de la página: con
   cuatro tarjetas en fila, a 2 columnas hace falta más ancho para que cada
   una respire (el resto de rejillas solo tiene 2 o 3 piezas). */
@media (max-width: 980px) { .el-elementos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 559px) { .el-elementos { grid-template-columns: 1fr; } }

/* ── La tira de viñetas (la historia de los cinco elementos) ───────── */
/* Pasada de la previsualización. Registro adulto: nada de bocadillos de
   cómic infantil. Rótulo en versalitas, escena tranquila y diálogo en
   cursiva con filete. Ningún texto baja de 12 px y los diálogos, de 14. */
.el-vinetas { margin-top: clamp(2.5rem, 5vw, 4rem); }
.el-vinetas__banda {
  text-align: center; font-size: .78rem; font-weight: 400; letter-spacing: .26em; text-transform: uppercase;
  text-wrap: balance; color: var(--el-terracota); padding-bottom: 1.6rem; position: relative;
}
.el-vinetas__banda::after {
  content: ''; position: absolute; left: 50%; bottom: .6rem; transform: translateX(-50%);
  width: 46px; height: 1px; background: var(--el-arena-2);
}
/* Filetes de 1 px entre viñetas, como la rejilla de las tarjetas. Todas las
   filas miden lo mismo (1fr): la tira se lee como una sola pieza. */
.el-vinetas__rejilla {
  display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 1px;
  background: var(--el-filete); border: 1px solid var(--el-filete);
}
.el-panel {
  margin: 0; min-width: 0; background: var(--el-tarjeta); padding: 1.4rem clamp(.9rem, 1.4vw, 1.3rem) 1.5rem;
  display: flex; flex-direction: column; gap: .9rem; min-height: 260px;
}
.el-panel__rotulo {
  align-self: flex-start; font-size: .75rem; font-weight: 400; line-height: 1.4; letter-spacing: .2em; text-transform: uppercase;
  color: var(--el-vino); background: var(--el-arena); padding: .3rem .6rem;
}
.el-panel__escena {
  position: relative; flex: 1; display: flex; align-items: flex-end; justify-content: center;
  min-height: 150px; padding-bottom: .6rem; overflow: hidden;
  background: var(--el-crema); border: 1px solid var(--el-filete);
}
.el-panel__fondo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.el-panel__escena > *:not(.el-panel__fondo, .el-panel__suelo) { position: relative; z-index: 1; }
.el-panel__escena > svg:not(.el-panel__fondo) { display: block; }
.el-panel__suelo {
  position: absolute; left: 6%; right: 6%; bottom: 8px; height: 1px;
  background: var(--el-arena-2); z-index: 1;
}
/* Si la viñeta es más estrecha que la fila de figuras, las figuras se
   encogen todas en la misma proporción en vez de cortarse por los lados. */
.el-panel__fila { display: flex; align-items: flex-end; gap: .35rem; max-width: 100%; }
.el-panel__fila--junta { gap: 0; }
.el-panel__fila svg { display: block; flex: 0 1 auto; min-width: 0; height: auto; }
.el-panel__dialogo {
  font-family: var(--el-serif); font-style: italic; font-weight: 400; font-size: 1.02rem; line-height: 1.4;
  color: var(--el-tinta); border-left: 2px solid var(--el-barro); padding-left: .8rem;
}
.el-panel__dialogo strong { font-style: normal; letter-spacing: .04em; }
/* El hueco del quinto ocupa su sitio al final de la fila: un círculo
   discontinuo con fondo propio, el sitio vacío de la figura que falta. En
   la previsualización iba suelto a la derecha y caía encima de la gota de
   agua y del horno. Decorativo (aria-hidden). Se encoge con las figuras
   (nunca parece más grande que ellas) y la «?» va en terracota: el barro
   da 2,97 sobre la tarjeta y no llega ni a 3. */
.el-panel__hueco {
  /* width (no solo flex-basis): si no, la fila se mide con el ancho de la
     «?» y todas las figuras de la quinta se encogen aunque quepan. */
  flex: 0 1 auto; width: 2.5rem; min-width: 1.75rem; aspect-ratio: 1; align-self: flex-end;
  display: grid; place-items: center; margin: 0 0 .15rem .2rem; border-radius: 50%;
  border: 1.5px dashed var(--el-barro); background: var(--el-tarjeta);
  font-family: var(--el-serif); font-size: 1.4rem; line-height: 1; color: var(--el-terracota);
}
/* Las cuatro voces, sobre un velo claro encima del taller. El velo es casi
   opaco (94 %) para que cada voz pase de 4,5 aunque debajo caiga la
   lámpara, lo más oscuro de la escena (ver contraste.mjs). */
.el-panel__voces {
  list-style: none; margin: 0; padding: .7rem; display: grid; gap: .5rem; width: 100%;
  background: rgba(252, 248, 242, .94); backdrop-filter: blur(1px);
}
.el-panel__voces li {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--el-serif); font-style: italic; font-weight: 400; font-size: .98rem; line-height: 1.3;
}
.el-panel__voces svg { flex: 0 0 auto; display: block; }
/* Letra de cada voz: la tinta del elemento no llega a 4,5 sobre claro
   (2,1 a 3,7), así que va su versión de texto, la de las tarjetas. */
.el-voz--tierra { color: var(--el-tierra-texto); }
.el-voz--agua   { color: var(--el-agua-texto); }
.el-voz--aire   { color: var(--el-aire-texto); }
.el-voz--fuego  { color: var(--el-fuego-texto); }

.el-panel__cierre { text-align: center; width: 100%; align-self: center; padding: 1rem .5rem; }
.el-panel__marca {
  font-family: var(--el-serif); font-size: 1.9rem; line-height: 1.1; letter-spacing: .14em;
  text-transform: uppercase; color: var(--el-tinta);
}
.el-panel__mantra {
  font-size: .75rem; font-weight: 400; line-height: 1.5; letter-spacing: .14em; text-transform: uppercase;
  color: var(--el-terracota); margin-top: .5rem; text-wrap: balance;
}
.el-panel__cta {
  font-family: var(--el-serif); font-style: italic; font-weight: 400; font-size: 1.05rem; line-height: 1.4;
  margin-top: 1.1rem; color: var(--el-tinta-2); text-wrap: balance;
}
/* 4 columnas desde 1150 px, 2 de 560 a 1149 y 1 por debajo de 560 (el
   corte de las tarjetas y del quinto). Con los cortes de la previsualización
   (1000 y 480), justo después de cada uno las figuras bajaban al 62-68 %. */
@media (max-width: 1149px) { .el-vinetas__rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 559px) { .el-vinetas__rejilla { grid-template-columns: 1fr; } .el-panel { min-height: 220px; } }

/* ── El quinto elemento · bloque granate bajo la tira ──────────────── */
.el-quinto {
  margin-top: 1px; background: var(--el-vino); color: var(--el-claro);
  padding: clamp(2rem, 4vw, 3.2rem); display: grid; gap: clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: auto 1fr; align-items: center; border: 1px solid var(--el-vino);
}
.el-quinto__marca {
  display: grid; place-items: center; width: clamp(84px, 12vw, 128px); height: clamp(84px, 12vw, 128px);
  border: 1px solid rgba(232, 176, 107, .5); border-radius: 50%; color: var(--el-ambar);
}
.el-quinto__marca svg { display: block; }
.el-quinto .el-etiqueta { margin-bottom: 0; }
.el-etiqueta--ambar { color: var(--el-ambar); }
.el-quinto h3 {
  color: var(--el-claro); font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem); margin-top: .6rem; text-wrap: balance;
}
.el-quinto p:not(.el-etiqueta) { color: var(--el-claro-2); max-width: 60ch; margin-top: .7rem; }
@media (max-width: 559px) { .el-quinto { grid-template-columns: 1fr; } }

/* La cinta de los cuatro colores del logo, en el orden de la del inicio
   (tierra, agua, aire, fuego). Sobre claro, el aire va en su tinta (su
   crema no se ve); sobre el granate del quinto elemento, en su crema,
   como en la previsualización. Decorativa. */
.el-cuatro { display: flex; height: 4px; width: clamp(120px, 22vw, 220px); margin-bottom: 1.2rem; }
.el-cuatro span { flex: 1; }
.el-cuatro span:nth-child(1) { background: var(--el-tierra); }
.el-cuatro span:nth-child(2) { background: var(--el-agua); }
.el-cuatro span:nth-child(3) { background: var(--el-aire-tinta); }
.el-cuatro span:nth-child(4) { background: var(--el-fuego); }
.el-quinto .el-cuatro span:nth-child(3) { background: var(--el-aire); }

/* ── Pinta tu pieza · cuatro pasos, uno por elemento ───────────────── */
/* Pasada de .el-steps de la previsualización. Cada paso lleva arriba un
   filete de 3 px del color de su elemento: en fila, los cuatro dibujan la
   cinta del logo. El aire va en su tinta (su crema no se ve sobre la
   arena), como en .el-cuatro. El número, en terracota: el barro no llega. */
.el-seccion--arena { background: var(--el-arena); }
.el-pasos4 {
  list-style: none; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.2rem, 2.4vw, 2rem); margin-top: clamp(2.5rem, 5vw, 4rem);
}
.el-paso4--tierra { --c: var(--el-tierra); }
.el-paso4--agua   { --c: var(--el-agua); }
.el-paso4--aire   { --c: var(--el-aire-tinta); }
.el-paso4--fuego  { --c: var(--el-fuego); }
.el-paso4 { border-top: 3px solid var(--c, var(--el-barro)); padding-top: 1.1rem; }
.el-paso4__n { font-family: var(--el-serif); font-size: 1.1rem; line-height: 1.3; color: var(--el-terracota); font-variant-numeric: lining-nums; }
.el-paso4 h3 { font-size: clamp(1.3rem, 1.15rem + .5vw, 1.5rem); margin: .4rem 0 .5rem; text-wrap: balance; }
.el-paso4 p:not(.el-paso4__n) { font-size: .95rem; color: var(--el-tinta-2); }
@media (max-width: 899px) { .el-pasos4 { grid-template-columns: repeat(2, 1fr); row-gap: 2.4rem; } }
@media (max-width: 559px) { .el-pasos4 { grid-template-columns: 1fr; row-gap: 2rem; } }

/* ── Qué hacemos · tres tarjetas ───────────────────────────────────── */
/* Pasada de las tarifas de la previsualización. La rejilla estira las tres
   a la misma altura y el botón baja al pie de cada una. Pinta tu pieza, la
   principal, va destacada: filete de barro (2 px en total), sombra y botón
   lleno; el curso y el torno, con botón de línea. De 560 a 900 px la
   destacada ocupa la fila entera y las otras dos van debajo, a la par. */
.el-planes {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.5vw, 2rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.el-plan {
  display: flex; flex-direction: column; min-width: 0; background: var(--el-tarjeta);
  border: 1px solid var(--el-filete); border-radius: var(--el-radio); padding: clamp(1.6rem, 2.5vw, 2.2rem);
}
.el-plan--destacado {
  border-color: var(--el-barro);
  box-shadow: 0 0 0 1px var(--el-barro), 0 18px 44px -30px rgba(70, 38, 31, .5);
}
.el-plan__flag {
  font-size: .75rem; font-weight: 400; line-height: 1.5; letter-spacing: .2em; text-transform: uppercase;
  color: var(--el-terracota); margin-bottom: .8rem;
}
.el-plan h3 { font-size: clamp(1.55rem, 1.35rem + .6vw, 1.85rem); text-wrap: balance; }
.el-plan > p:not(.el-plan__flag) { color: var(--el-tinta-2); font-size: .95rem; margin-top: .9rem; }
.el-plan__precio { margin-top: 1rem; }
.el-plan__cifra {
  font-family: var(--el-serif); font-size: 2.6rem; line-height: 1; color: var(--el-vino);
  font-variant-numeric: lining-nums;
}
.el-plan__desde {
  font-family: var(--el-sans); font-size: .75rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase;
  color: var(--el-tinta-2); margin-right: .35rem; vertical-align: .45em;
}
.el-plan__nota { color: var(--el-tinta-2); font-size: .95rem; margin-top: .6rem; }
.el-foto--plan { margin-top: 1.4rem; aspect-ratio: 16 / 10; }
.el-plan > :nth-last-child(2) { margin-bottom: 1.8rem; }
.el-plan > :nth-last-child(3):has(+ [hidden]) { margin-bottom: 1.8rem; }
.el-plan .el-btn { margin-top: auto; width: 100%; }
@media (max-width: 899px) {
  .el-planes { grid-template-columns: repeat(2, 1fr); }
  .el-plan--destacado { grid-column: 1 / -1; }
}
@media (max-width: 559px) { .el-planes { grid-template-columns: 1fr; } }

/* Un hueco de foto (migración 20): la foto lo llena entero y el nombre del
   hueco es su alt. Los huecos sin foto no se ven (hidden). */
.el-foto { position: relative; overflow: hidden; border-radius: var(--el-radio); }
.el-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Bono regalo · el único momento oscuro ─────────────────────────── */
.el-bono { background: var(--el-vino); color: var(--el-claro); padding: clamp(3.5rem, 8vw, var(--el-s7)) 0; }
.el-bono__in { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) { .el-bono__in { grid-template-columns: 1.1fr .9fr; } }
.el-bono h2 { color: var(--el-claro); font-style: italic; }
.el-bono p { color: var(--el-claro-2); margin-top: 1rem; max-width: 52ch; }
.el-etiqueta--clara { color: var(--el-claro-2); }
.el-bono .el-btn { margin-top: 1.8rem; }
/* La tarjeta regalo, como el «sello» de los correos. */
.el-vale {
  width: 100%; max-width: 420px; aspect-ratio: 16 / 10; margin-inline: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  background: var(--el-papel); color: var(--el-vino); border-radius: var(--el-radio);
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .55); transform: rotate(-2deg);
}
.el-vale img { width: 42%; }
.el-vale span { font-size: .78rem; font-weight: 400; letter-spacing: .3em; text-transform: uppercase; }

/* ── La quintaesencia · de dónde viene el nombre ───────────────────── */
/* Pasada de la cita de la previsualización (.el-quote): la cinta, la
   etiqueta y la cita, centradas; los dos párrafos, a la izquierda en una
   columna de lectura. La cita, en granate, como los titulares. */
.el-quintaesencia .el-wrap { max-width: 50rem; text-align: center; }
.el-quintaesencia .el-cuatro { margin: 0 auto 1.4rem; }
.el-quintaesencia blockquote {
  margin: 1.2rem auto 0; max-width: 22em;
  font-family: var(--el-serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.5rem); line-height: 1.28; color: var(--el-vino); text-wrap: balance;
}
.el-quintaesencia p:not(.el-etiqueta) { text-align: left; max-width: 58ch; margin-inline: auto; color: var(--el-tinta-2); }
.el-quintaesencia blockquote + p { margin-top: clamp(1.8rem, 3.5vw, 2.4rem); }
.el-quintaesencia p + p { margin-top: 1.1rem; }

/* ── El espacio ────────────────────────────────────────────────────── */
/* Un mosaico cerrado (Sergi, 9-oct: opción C, «dos protagonistas»): cada
   foto tiene su sitio fijo y el bloque cierra por los cuatro lados.
   Móvil: dos columnas sin alto fijo; mandan las formas de cada pieza, así
   las parejas miden lo mismo. Desde 640 px: un cuadrado de 4 × 4 y cada
   pieza se estira a su área (unos píxeles de más o de menos por el hueco:
   la foto va con object-fit: cover). Las formas son las de assets/gestio/
   espacio-huecos.js: navegador-espacio.mjs mira que coincidan. El panel
   («Espacio», gestio.css) repite estas áreas. */
.el-galeria {
  list-style: none; display: grid; gap: .75rem; margin-top: clamp(2rem, 4vw, 3rem);
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "taller taller" "manos estanterias" "cafe piezas" "grupo grupo";
}
.el-galeria .el-foto { min-width: 0; }
@media (min-width: 640px) {
  /* Cuadrado, pero sin pasar de ~860 px (a 1280 cabe casi entero en
     pantalla); centrado, y con él la etiqueta y el título de la sección. */
  #espacio .el-wrap { text-align: center; }
  .el-galeria {
    gap: 1rem; aspect-ratio: 1 / 1; max-width: 860px; margin-inline: auto; text-align: left;
    grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr));
    grid-template-areas:
      "taller taller manos cafe"
      "taller taller manos piezas"
      "estanterias grupo grupo grupo"
      "estanterias grupo grupo grupo";
  }
  .el-galeria .el-foto { align-self: stretch; justify-self: stretch; min-height: 0; }
}
.el-foto[data-hueco="taller"] { grid-area: taller; aspect-ratio: 1 / 1; }
.el-foto[data-hueco="piezas"] { grid-area: piezas; aspect-ratio: 1 / 1; }
.el-foto[data-hueco="cafe"] { grid-area: cafe; aspect-ratio: 1 / 1; }
.el-foto[data-hueco="manos"] { grid-area: manos; aspect-ratio: 1 / 2; }
.el-foto[data-hueco="estanterias"] { grid-area: estanterias; aspect-ratio: 1 / 2; }
.el-foto[data-hueco="grupo"] { grid-area: grupo; aspect-ratio: 3 / 2; }
/* El nombre de la pieza, abajo a la izquierda, dentro de la foto: crema
   sobre una franja que va de transparente a tinta. Bajo las letras la
   tinta está al 78 % y no baja de ahí, así que aun sobre una foto blanca
   el contraste es de 7:1 (contraste.mjs). */
.el-foto__nombre {
  position: absolute; inset: auto 0 0; z-index: 1;
  padding: 2.4rem .75rem .65rem; overflow-wrap: anywhere;
  font-family: var(--el-sans); font-size: .7rem; font-weight: 400; line-height: 1.35;
  letter-spacing: .16em; text-transform: uppercase; color: var(--el-claro);
  background: linear-gradient(to top, rgba(43, 33, 28, .78) 0, rgba(43, 33, 28, .78) 2rem, rgba(43, 33, 28, 0) 100%);
}
@media (min-width: 640px) {
  .el-foto__nombre { padding: 3rem 1rem .85rem; font-size: .74rem; letter-spacing: .22em; background:
    linear-gradient(to top, rgba(43, 33, 28, .78) 0, rgba(43, 33, 28, .78) 2.2rem, rgba(43, 33, 28, 0) 100%); }
}
/* Un hueco de la galería que aún no tiene foto: papel con el símbolo de
   Element, de la misma forma que tendrá la foto (espacio.js), y su nombre
   en tinta, sin franja. */
.el-foto--vacia { background: var(--el-tarjeta); border: 1px solid var(--el-filete); }
.el-foto--vacia::after {
  content: ''; position: absolute; inset: 0; opacity: .35;
  /* Por el ancho de la pieza (en las altas, 1:2, no crece de más) y sin
     pasar de 7rem en las grandes. */
  background: url('img/simbolo-tinta.png') center / min(36%, 7rem) auto no-repeat;
}
.el-foto--vacia .el-foto__nombre { background: none; color: var(--el-tinta); }

/* ── Preguntas frecuentes ──────────────────────────────────────────── */
/* Pasada de la previsualización: la pregunta en la serif y un chevrón de
   filete que gira al abrir. El foco es el general (:focus-visible). */
.el-faq { margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--el-filete); }
.el-faq details { border-bottom: 1px solid var(--el-filete); }
.el-faq summary {
  position: relative; display: flex; align-items: center; min-height: 56px;
  padding: 1.1rem 2.5rem 1.1rem 0; cursor: pointer; list-style: none;
  font-family: var(--el-serif); font-weight: 400; font-size: clamp(1.15rem, 1.05rem + .4vw, 1.35rem);
  line-height: 1.3; color: var(--el-tinta);
}
.el-faq summary::-webkit-details-marker { display: none; }
.el-faq summary::after {
  content: ''; position: absolute; right: .5rem; top: 50%; width: 11px; height: 11px;
  border-right: 1.5px solid var(--el-terracota); border-bottom: 1.5px solid var(--el-terracota);
  transform: translateY(-70%) rotate(45deg); transition: transform .25s ease;
}
.el-faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.el-faq details p { color: var(--el-tinta-2); padding-right: 2.5rem; max-width: 66ch; }
.el-faq details p:last-child { padding-bottom: 1.4rem; }
.el-faq details a { display: inline-flex; align-items: center; min-height: 44px; }

/* ── Contacto ──────────────────────────────────────────────────────── */
.el-contacto { display: grid; gap: clamp(2.5rem, 5vw, 4rem); margin-top: 2.5rem; }
@media (min-width: 900px) { .el-contacto { grid-template-columns: 1fr 1fr; align-items: start; } }
.el-datos { list-style: none; display: grid; gap: 1.4rem; }
.el-dato { display: grid; grid-template-columns: 28px 1fr; gap: 1rem; align-items: start; }
.el-dato svg { width: 24px; height: 24px; margin-top: .2rem; fill: none; stroke: var(--el-vino); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.el-dato__t { display: block; font-size: .74rem; font-weight: 400; letter-spacing: .24em; text-transform: uppercase; color: var(--el-terracota); margin-bottom: .2rem; }
/* Correo y teléfono: el enlace es la fila entera (icono + texto). */
.el-dato--enlace { align-items: center; min-height: 44px; }
.el-dato--enlace svg { margin-top: 0; }

/* Redes: tres iconos, cada uno de 44 × 44 px como mínimo. */
.el-redes { margin-top: 2rem; }
.el-redes__lista { list-style: none; display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .6rem; }
.el-red {
  display: inline-flex; align-items: center; justify-content: center; inline-size: 48px; block-size: 48px;
  border: 1px solid var(--el-filete); border-radius: 50%; color: var(--el-vino);
  transition: background-color .2s ease, border-color .2s ease;
}
.el-red:hover { background: var(--el-tarjeta); border-color: var(--el-terracota); color: var(--el-vino); }
.el-red svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* «Dónde estamos»: a lo ancho, debajo de las dos columnas. */
.el-donde { margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--el-filete); }
.el-donde__t { font-family: var(--el-sans); font-size: .74rem; font-weight: 400; letter-spacing: .24em; text-transform: uppercase; color: var(--el-terracota); margin: 0 0 1rem; }
.el-donde__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.25rem; margin-top: .4rem; }
.el-donde__dir { margin: 0; color: var(--el-tinta); }
.el-donde__pie a { display: inline-flex; align-items: center; min-height: 44px; }

/* Formulario «Escríbenos»: las piezas son las de reservas (element.css). */
.el-contacto__form .el-t { margin-bottom: 1rem; }
/* El textarea del mensaje es alto; en pantallas muy bajas el desplazamiento
   automático al enfocar no sabe que el aviso de cookies (sticky, al fondo)
   ocupa parte del alto visible, así que se le da de sobra. */
.el-contacto__form .el-in { scroll-margin-bottom: 12rem; }
.el-contacto__ok {
  padding: var(--el-s3); background: var(--el-tarjeta); border: 1px solid var(--el-filete); border-radius: var(--el-radio);
  color: var(--el-tinta); line-height: 1.7;
}
.el-contacto__ok strong { font-weight: 500; color: var(--el-vino); overflow-wrap: anywhere; }

/* Mapa: una imagen fija de la propia web (herramientas/mapa-estatico.py),
   siempre a la vista y sin cookies ni peticiones a terceros. Si se aceptan
   las cookies, web.js pone el iframe de Google en el mismo hueco
   (.el-mapa--cargado) y el fijo se esconde. */
.el-mapa-fig {
  margin: 0; max-inline-size: 1280px;          /* 1280 = ancho real de la imagen */
  /* Sin esto, al ser una columna de la rejilla de #contacto, su anchura
     mínima automática se calcula por el contenido y puede empujar la
     página entera a un scroll horizontal. */
  min-width: 0;
}
.el-mapa {
  position: relative; aspect-ratio: 3 / 2; overflow: hidden;
  background: var(--el-arena); border: 1px solid var(--el-filete); border-radius: var(--el-radio);
}
/* A lo ancho, una banda: con 5 × 2 teselas la imagen da para 5:2 sin
   quedarse corta (la página mide como mucho 1180 px). */
@media (min-width: 700px) { .el-mapa { aspect-ratio: 5 / 2; } }
.el-mapa iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; display: block; }
.el-mapa__fijo { position: absolute; inset: 0; display: block; }
/* La imagen, a su tamaño real y centrada: no se escala, así las calles se
   leen; en pantallas estrechas se recorta por los lados. */
.el-mapa__fijo img { inline-size: 100%; block-size: 100%; object-fit: none; object-position: 50% 50%; display: block; }
/* La chincheta: el taller queda a +22 px y -39 px del centro de la imagen
   (lo imprime mapa-estatico.py). La punta del alfiler, justo en ese punto. */
.el-mapa__pin {
  position: absolute; left: calc(50% + 22px); top: calc(50% - 39px);
  transform: translate(-50%, -100%); filter: drop-shadow(0 2px 3px rgba(43, 33, 28, .35));
}
.el-mapa__pin path { fill: var(--el-vino); stroke: var(--el-claro); stroke-width: 2; }
.el-mapa__pin circle { fill: var(--el-claro); }
/* El hueco recorta (overflow: hidden): el anillo de foco va por dentro. */
.el-mapa__fijo:focus-visible { outline-offset: -4px; }
.el-mapa--cargado .el-mapa__fijo { display: none; }
.el-mapa__credito { margin-top: .2rem; font-size: .75rem; color: var(--el-tinta-2); text-align: right; }
.el-mapa__credito a { display: inline-flex; align-items: center; min-height: 44px; }
/* Con el mapa de Google, el crédito es el suyo (va dentro del iframe). */
#mapa.el-mapa--cargado + .el-mapa__credito { display: none; }

/* ── Eventos: el local entero; la lista, los datos y los dos botones en fila ── */
.el-eventos__tipos { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; padding: 0; }
.el-eventos__tipos li {
  padding: .45rem 1rem; border: 1px solid var(--el-filete); border-radius: 999px;
  background: var(--el-crema); color: var(--el-tinta); font-size: .95rem;
}
.el-eventos__datos, .el-eventos__nota { color: var(--el-tinta-2); max-width: 60ch; margin-top: 1.2rem; }
.el-eventos__botones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
@media (max-width: 559px) {
  .el-eventos__botones { flex-direction: column; }
  .el-eventos__botones .el-btn { width: 100%; }
}