/* ═══════════════════════════════════════════════════════════════════════
   ELEMENT POTTERY GYM · sistema visual de la web
   Ficheros estáticos generados con construir.mjs; aquí no hay build.

   El papel y los tonos salen del logo definitivo y de los correos Galería:
   papel #EBE1D7, tinta y granate. Los contrastes están medidos con
   contraste.mjs y ninguna letra baja de 4,5. La terracota clara (#9B6440),
   la de agosto (#C08457) y el gris topo de los correos (#8A7A6E) NO se usan
   para letra: no llegan.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --el-papel:     #EBE1D7;   /* el papel del logo */
  --el-crema:     #F7F1E7;   /* fondo general */
  --el-tarjeta:   #FCF8F2;
  --el-arena:     #EDE2D2;   /* días con hueco del calendario */
  --el-arena-2:   #E0D2BD;
  --el-tinta:     #2B211C;
  --el-tinta-2:   #6D5B4F;
  --el-vino:      #46261F;   /* botón principal, titulares */
  --el-vino-2:    #5B3329;
  --el-claro:     #FBF6EC;   /* texto sobre granate */
  --el-claro-2:   #E6D8CA;
  --el-terracota: #7E4E30;   /* etiquetas y enlaces */
  --el-alerta:    #8C4222;   /* errores y «pocas plazas» */
  --el-filete:    #D9CDBF;
  --el-pendiente: #F3E6D8;

  /* Del sistema de la previsualización (12-sep) */
  --el-barro:        #C08457;   /* terracota clara · acento */
  --el-ambar:        #E8B06B;   /* la luz · sobre granate */
  --el-ambar-claro:  #F3CC94;   /* el ámbar sobre la terracota (errores de la preapertura) */
  --el-salvia:       #879279;
  --el-tierra:       #C2AE91;  --el-tierra-tinta: #9C875F;
  --el-fuego:        #BE6E45;  --el-fuego-tinta:  #A85C36;
  --el-agua:         #8FA3A3;  --el-agua-tinta:   #6F8887;
  --el-aire:         #E4DAC7;  --el-aire-tinta:   #B8A882;
  /* Solo para LETRA en las tarjetas de los elementos (su papel y sus
     etiquetas): cada tinta, oscurecida sin cambiar el tono hasta pasar de
     4,5 sobre el lavado de su color. Las cuatro tintas de arriba no llegan
     (2,1 a 3,7) y se quedan para trazos y figuras. */
  --el-tierra-texto: #746547;
  --el-fuego-texto:  #914F2F;
  --el-agua-texto:   #556867;
  --el-aire-texto:   #796944;

  --el-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --el-sans:  'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --el-s1: .5rem;  --el-s2: 1rem;   --el-s3: 1.5rem;  --el-s4: 2rem;
  --el-s5: 3rem;   --el-s6: 4rem;   --el-s7: 6rem;    --el-s8: 8rem;

  --el-maxw: 1180px;
  --el-radio: 3px;      /* casi recto: el local es de líneas rectas */
  --el-cab-h: 72px;
}

/* ── Base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--el-cab-h) + 1rem);   /* la cabecera fija no tapa el ancla */
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0; background: var(--el-crema); color: var(--el-tinta);
  font-family: var(--el-sans); font-weight: 300;
  font-size: 16px;            /* nunca menos: por debajo, iOS hace zoom solo */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 768px) { body { font-size: 17px; } }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--el-terracota); text-underline-offset: .18em; }
a:hover { color: var(--el-vino); }
h1, h2, h3 { font-family: var(--el-serif); font-weight: 400; line-height: 1.12; margin: 0; color: var(--el-vino); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
strong, b { font-weight: 500; }

/* Foco SIEMPRE visible. Quitarlo deja la web inservible con teclado. */
:focus-visible { outline: 2px solid var(--el-terracota); outline-offset: 3px; border-radius: 2px; }
main:focus { outline: none; }   /* el destino de «Salta al contenido» */
/* La terracota (#7E4E30) sobre el granate (#46261F) de la banda del bono da
   1,94:1: no llega al 3:1 que pide WCAG 1.4.11 para un anillo de foco. */
.el-bono :focus-visible { outline-color: var(--el-claro); }

.el-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.el-saltar {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  padding: .7rem 1rem; background: var(--el-vino); color: var(--el-claro); text-decoration: none;
}
.el-saltar:focus { top: 1rem; color: var(--el-claro); }

/* Solo en el borrador: la franja de arriba y las etiquetas de lo que falta. */
.el-franja {
  background: var(--el-vino); color: var(--el-claro); text-align: center;
  padding: .55rem 1rem; font-size: .85rem; line-height: 1.5;
}
.el-pendiente {
  display: inline-block; padding: .12em .55em; border: 1px dashed var(--el-terracota);
  border-radius: var(--el-radio); background: var(--el-pendiente); color: var(--el-terracota);
  font-family: var(--el-sans); font-style: normal; font-weight: 400; font-size: .78rem;
  letter-spacing: .04em; line-height: 1.5; text-transform: none; vertical-align: middle;
}

/* ── Maquetación ───────────────────────────────────────────────────── */
.el-wrap { width: 100%; max-width: var(--el-maxw); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }
.el-estrecho { max-width: 820px; }
.el-seccion { padding: clamp(3.5rem, 8vw, var(--el-s8)) 0; }
.el-seccion--papel { background: var(--el-papel); }
.el-centro { text-align: center; }
.el-etiqueta {
  font-size: .78rem; font-weight: 400; letter-spacing: .3em; text-transform: uppercase;
  color: var(--el-terracota); margin-bottom: .9rem;
}
.el-h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); }
.el-h3 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem); }
.el-lead { color: var(--el-tinta-2); font-size: clamp(1.02rem, .98rem + .3vw, 1.15rem); max-width: 60ch; margin-top: 1rem; }
.el-centro .el-lead { margin-inline: auto; }

/* ── Botones ───────────────────────────────────────────────────────── */
.el-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .8rem 1.7rem; border: 1px solid var(--el-vino); border-radius: 2px;
  background: var(--el-vino); color: var(--el-claro);
  font-family: var(--el-sans); font-weight: 400; font-size: .85rem; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; white-space: nowrap; touch-action: manipulation;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.el-btn:hover:not(:disabled) { background: var(--el-vino-2); border-color: var(--el-vino-2); color: var(--el-claro); }
.el-btn:disabled { opacity: .45; cursor: not-allowed; }
.el-btn--linea { background: transparent; color: var(--el-vino); }
.el-btn--linea:hover:not(:disabled) { background: var(--el-vino); border-color: var(--el-vino); color: var(--el-claro); }
.el-btn--claro { background: var(--el-claro); border-color: var(--el-claro); color: var(--el-vino); }
.el-btn--claro:hover:not(:disabled) { background: var(--el-papel); border-color: var(--el-papel); color: var(--el-vino); }
.el-btn--pequeno { min-height: 44px; padding: .55rem 1.1rem; font-size: .78rem; }

/* ── Cabecera ──────────────────────────────────────────────────────── */
.el-cab {
  position: sticky; top: 0; z-index: 40; background: var(--el-papel);
  border-bottom: 1px solid transparent;
  transition: background-color 180ms ease, border-color 180ms ease;
}
.el-cab--baja { background: var(--el-crema); border-bottom-color: var(--el-filete); }
.el-cab__in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: var(--el-cab-h); }
.el-cab__marca { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; justify-content: center; }
.el-cab__marca img { height: 40px; width: auto; }
/* Preapertura: junto al símbolo, el nombre, espaciado como en el logo.
   El margen negativo quita el espacio de la última letra. */
.el-cab__marca--nombre { gap: .75rem; text-decoration: none; }
.el-cab__nombre {
  font-family: var(--el-serif); font-weight: 500; font-size: 1.2rem; line-height: 1;
  letter-spacing: .38em; margin-right: -.38em; text-transform: uppercase; color: var(--el-vino);
}
.el-cab__acciones { display: flex; align-items: center; gap: 1rem; }
.el-nav { display: none; gap: clamp(1rem, 2vw, 2rem); }
.el-nav a, .el-idioma a {
  color: var(--el-vino); text-decoration: none; font-size: .78rem; font-weight: 400;
  letter-spacing: .16em; text-transform: uppercase;
}
.el-nav a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; }
.el-nav a:hover, .el-idioma a:hover { color: var(--el-terracota); }
.el-idioma { display: none; align-items: center; gap: .1rem; color: var(--el-tinta-2); font-size: .78rem; }
.el-idioma a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.el-idioma a[aria-current="page"] { color: var(--el-tinta); text-decoration: underline; text-underline-offset: .4em; }
/* Preapertura: la cabecera no tiene menú, así que el cambio de idioma se
   ve en todas las anchuras (en la web completa, en el móvil va en el menú). */
.el-cab--pre .el-idioma { display: flex; }
/* «Accés» al panel (formación del 14-oct): discreto, sin fondo, para que no
   compita con «Reservar». En todas las anchuras, arriba a la derecha. */
.el-acceso {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  min-width: 44px; min-height: 44px; color: var(--el-tinta-2); text-decoration: none;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
}
.el-acceso:hover { color: var(--el-terracota); }
.el-acceso svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* En la web completa, por debajo de 375 px, «Reservar», el menú y el texto
   no caben en una fila: queda el candado (el nombre lo da el aria-label). */
@media (max-width: 374px) {
  .el-cab:not(.el-cab--pre) .el-acceso__texto { display: none; }
}
.el-menu-boton {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  background: none; border: 0; color: var(--el-vino); cursor: pointer;
}
.el-menu-boton svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
/* Con los seis enlaces (desde «Els elements», 12-sep) la fila entera pide
   unos 1.160 px: por debajo de 1.200 los enlaces se partían en dos líneas. */
@media (min-width: 1200px) {
  .el-nav, .el-cab .el-idioma { display: flex; }
  .el-cab .el-menu-boton { display: none; }
}

/* Menú del móvil: pantalla completa, sobre papel. */
.el-menu {
  position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; gap: 2rem;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem) 2rem; background: var(--el-papel); overflow-y: auto;
}
.el-menu__cab { display: flex; align-items: center; justify-content: space-between; min-height: var(--el-cab-h); }
.el-menu__cab img { height: 40px; width: auto; }
.el-menu__nav { display: flex; flex-direction: column; }
.el-menu__nav a {
  font-family: var(--el-serif); font-size: 1.9rem; color: var(--el-vino); text-decoration: none;
  padding: .55rem 0; border-bottom: 1px solid var(--el-filete);
}
.el-menu .el-idioma { display: flex; }
.el-menu .el-btn { align-self: flex-start; }
.el-sin-scroll { overflow: hidden; }

/* ── Pie ───────────────────────────────────────────────────────────── */
.el-pie { background: var(--el-vino); color: var(--el-claro); padding: clamp(3rem, 6vw, 4.5rem) 0 1.5rem; font-size: .95rem; }
.el-pie a { color: var(--el-claro); text-decoration: none; }
.el-pie a:hover { text-decoration: underline; }
/* La terracota del foco por defecto no llega al 3:1 sobre el granate: aquí,
   como en la banda del bono, el anillo pasa a claro. */
.el-pie :focus-visible { outline-color: var(--el-claro); }
/* Tres cortes: una columna en el móvil, dos en la tablet (si no, entre 560
   y 899 px el pie era una tira de más de 1100 px con media pantalla vacía)
   y las cuatro a partir de 900. Con dos columnas quedan 2×2: la marca y
   «El web» arriba, «Contacte» y «Legal» debajo. */
.el-pie__rejilla { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .el-pie__rejilla { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .el-pie__rejilla { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
/* Preapertura: su pie solo tiene la marca, el lema y lo legal (Sergi,
   14-sep: sobraba aire). Arriba, la tarjeta con el lema al lado; lo legal,
   en una fila con el © en la línea final. */
.el-pie--pre { padding-top: clamp(2.2rem, 4.5vw, 3rem); }
.el-pie__rejilla--pre { align-items: center; gap: 1.2rem 2.5rem; }
@media (min-width: 700px) { .el-pie__rejilla--pre { grid-template-columns: auto 1fr; } }
.el-pie__rejilla--pre .el-pie__logo { justify-self: start; }
.el-pie__rejilla--pre .el-pie__logo img { width: 130px; }
.el-pie__rejilla--pre .el-pie__lema { margin-top: 0; }
.el-pie--pre .el-pie__fin { margin-top: 1.8rem; padding-top: .4rem; align-items: center; }
.el-pie__legal--fila { list-style: none; display: flex; flex-wrap: wrap; gap: 0 1.6rem; margin: 0; padding: 0; }
.el-pie__legal--fila a, .el-pie__legal--fila .el-pie__boton {
  display: inline-flex; align-items: center; min-height: 44px; font-size: .85rem; color: var(--el-claro);
}
/* El logo va suelto sobre el granate, sin fondo: por eso el PNG es el crema
   (logo-crema.png) y no el de tinta, que ahí no se leería. */
.el-pie__logo { display: inline-block; }
.el-pie__logo img { width: 180px; height: auto; }
.el-pie__lema { color: var(--el-claro-2); max-width: 34ch; margin-top: 1.1rem; }
.el-pie__mantra { font-family: var(--el-serif); font-style: italic; color: var(--el-ambar); margin-top: .7rem; }
.el-pie__t {
  font-family: var(--el-sans); font-variant: small-caps; font-size: .85rem; font-weight: 500; letter-spacing: .14em;
  color: var(--el-ambar); margin-bottom: .6rem;
}
.el-pie__lista { list-style: none; display: grid; gap: .1rem; }
.el-pie__lista a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; }
.el-pie__fin {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem;
  margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid rgba(251, 246, 236, .18);
  color: var(--el-claro-2); font-size: .8rem;
}

/* ── Aviso de cookies ──────────────────────────────────────────────── */
/* El mapa de Google Maps no se carga sin permiso (LSSI 22.2): el aviso
   queda pegado abajo con `sticky`, no `fixed`, porque la sección va la
   última del `body`, justo después del pie — así, al llegar al final de
   la página de verdad, entra en el flujo normal y nunca tapa el propio
   enlace «Cookies» del pie ni el resto de la lista legal.
   z-index 50: por debajo del menú del móvil (60, `.el-menu`, pantalla
   completa) para que el menú abierto quede siempre por encima, y por
   encima de la cabecera (40, `.el-cab`). */
.el-cookies {
  position: sticky; inset: auto 0 0 0; z-index: 50;
  background: var(--el-tarjeta); border-top: 1px solid var(--el-filete);
  box-shadow: 0 -8px 24px -16px rgba(43, 33, 28, .35);
}
.el-cookies__in {
  display: flex; flex-direction: column; gap: 1rem; align-items: stretch;
  padding-block: 1.2rem;
}
.el-cookies__texto { color: var(--el-tinta); max-width: 62ch; }
.el-cookies__botones { display: flex; gap: .8rem; }
.el-cookies__botones .el-btn { min-height: 44px; flex: 1; justify-content: center; }
@media (min-width: 700px) {
  .el-cookies__in { flex-direction: row; align-items: center; justify-content: space-between; gap: 2rem; }
  .el-cookies__botones .el-btn { flex: 0 0 auto; }
}
/* El botón «Cookies» del pie: se ve como los enlaces de al lado, sin
   fondo ni borde propios (nada de aspecto de botón). */
.el-pie__boton {
  display: inline-flex; align-items: center; min-width: 44px; min-height: 44px;
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  font: inherit; text-underline-offset: .18em; color: var(--el-claro);
}
.el-pie__boton:hover { text-decoration: underline; }

/* ── Páginas legales ───────────────────────────────────────────────── */
.el-legal { max-width: 780px; }
.el-legal .el-etiqueta { margin-bottom: .6rem; }
.el-legal h1 { font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.2rem); }
.el-legal h2 { font-size: 1.6rem; margin: 2.6rem 0 .8rem; }
.el-legal h3 { font-family: var(--el-sans); font-weight: 500; font-size: 1.05rem; color: var(--el-tinta); margin: 1.6rem 0 .4rem; }
.el-legal p + p { margin-top: .8rem; }
.el-legal ul { padding-left: 1.2rem; margin: .8rem 0; display: grid; gap: .4rem; }
.el-legal__sub { color: var(--el-tinta-2); margin-top: .6rem; font-size: 1.1rem; }
.el-legal__fecha { color: var(--el-tinta-2); margin-top: 2.5rem; font-size: .9rem; }
.el-tabla { overflow-x: auto; margin: 1rem 0; }
.el-tabla table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: .95rem; }
.el-tabla th, .el-tabla td { text-align: left; vertical-align: top; padding: .6rem .8rem .6rem 0; border-bottom: 1px solid var(--el-filete); }
.el-tabla th { font-weight: 500; }

/* ═══ Página de reservas ═══════════════════════════════════════════════ */
.el-titular { background: var(--el-papel); text-align: center; padding: clamp(2.4rem, 6vw, 4rem) 0 clamp(2rem, 5vw, 3rem); }
.el-titular h1 { font-style: italic; font-size: clamp(2.4rem, 1.6rem + 3vw, 3.6rem); }
.el-titular p { color: var(--el-tinta-2); margin: 1rem auto 0; max-width: 56ch; }
.el-reservas { max-width: 780px; padding-top: clamp(2rem, 5vw, 3.5rem); padding-bottom: clamp(3rem, 7vw, 5rem); }

h2.el-t { font-family: var(--el-serif); font-weight: 500; font-size: 1.9rem; color: var(--el-vino); margin: 0 0 .4rem; }
h3.el-t { font-family: var(--el-serif); font-weight: 500; font-size: 1.35rem; color: var(--el-vino); margin: 0; }
.el-intro { color: var(--el-tinta-2); margin: 0 0 var(--el-s3); max-width: 58ch; line-height: 1.7; }
.el-dia {
  font-size: .82rem; font-weight: 400; letter-spacing: .12em; text-transform: uppercase;
  color: var(--el-tinta-2); margin: 0 0 .6rem; padding-bottom: .4rem; border-bottom: 1px solid var(--el-filete);
}

/* Calendario · rejilla de mes */
.el-cal { background: var(--el-tarjeta); border: 1px solid var(--el-filete); border-radius: var(--el-radio); padding: var(--el-s3); }
.el-cal-cab { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: var(--el-s2); }
/* Sin text-transform: con «setembre del 2026» pondría «Del». La mayúscula la pone reservas-textos.js. */
.el-cal-mes { font-family: var(--el-serif); font-size: 1.35rem; font-weight: 500; color: var(--el-vino); margin: 0; }
.el-cal-nav {
  width: 44px; height: 44px; display: grid; place-items: center; background: none;
  border: 1px solid var(--el-filete); border-radius: var(--el-radio); color: var(--el-vino);
  font-size: 1.1rem; cursor: pointer; transition: border-color 160ms ease;
}
.el-cal-nav:hover:not(:disabled) { border-color: var(--el-terracota); }
.el-cal-nav:disabled { opacity: .3; cursor: not-allowed; }
.el-cal table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.el-cal th { padding: .4rem 0 .6rem; font-size: .7rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--el-tinta-2); }
.el-cal td { padding: 2px; text-align: center; }
/* En pantallas estrechas el relleno de la caja y de las celdas le come el
   ancho a las casillas: a 375 px bajaban a 40,8 px y a 320 px a 33 px, por
   debajo de los 44 px de área táctil. Con .25rem de relleno en la caja y
   las celdas sin relleno propio, a 375 px llegan a los 44 px; a 320 px no
   hay sitio físico para 7 × 44 px más los bordes, así que se queda lo más
   cerca posible. Va DESPUÉS de las reglas de arriba para ganarles: misma
   especificidad, y aquí manda el orden. */
@media (max-width: 480px) {
  .el-cal { padding: var(--el-s2) .25rem; }
  .el-cal td { padding: 0; }
}
.el-dia-btn {
  width: 100%; min-height: 44px; padding: .3rem .1rem; display: grid; place-content: center;
  background: none; border: 1px solid transparent; border-radius: var(--el-radio); color: var(--el-tinta);
  font-family: var(--el-sans); font-size: 1rem; font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease;
}
/* Los días CON hueco van con fondo y la cifra más gruesa: la diferencia no
   es solo de color. */
.el-dia-btn.hay { background: var(--el-arena); border-color: var(--el-filete); font-weight: 500; }
.el-dia-btn.hay:hover { background: var(--el-arena-2); border-color: var(--el-terracota); }
/* Un día lleno que se abre solo para la lista de espera: sin el fondo de
   los días con hueco (no promete nada) pero con el borde discontinuo de lo
   que está completo. En terracota, no en filete: el filete sobre la tarjeta
   del calendario da 1,48:1 y el borde es el ÚNICO indicio que tiene la
   casilla (WCAG 1.4.11 pide 3:1). La pareja está en contraste.mjs. */
.el-dia-btn.espera { border-color: var(--el-terracota); border-style: dashed; }
/* Al pasar el ratón, más oscuro; sin coger el fondo de los días con hueco,
   que es lo que este día justamente no es. */
.el-dia-btn.espera:hover { border-color: var(--el-vino); }
.el-dia-btn:disabled { color: var(--el-tinta-2); opacity: .4; cursor: default; }
.el-dia-btn[aria-pressed="true"] { background: var(--el-vino); border-color: var(--el-vino); color: var(--el-claro); }
.el-hoy { box-shadow: inset 0 0 0 2px var(--el-terracota); }
/* Dos entradas: cada muestra pegada a su texto, y en un móvil una debajo
   de la otra en vez de una línea larguísima. */
.el-cal-pie { margin: var(--el-s2) 0 0; font-size: .8rem; color: var(--el-tinta-2); display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; }
.el-cal-leyenda { display: flex; align-items: center; gap: .5rem; }
.el-muestra { width: 22px; height: 18px; flex-shrink: 0; background: var(--el-arena); border: 1px solid var(--el-filete); border-radius: var(--el-radio); }
/* El mismo cuadrito que la casilla de un día completo: sin relleno y con
   el borde discontinuo de terracota (6,57:1, en contraste.mjs). */
.el-muestra--espera { background: none; border-color: var(--el-terracota); border-style: dashed; }

/* Cuántas personas: antes del calendario (reservas por horas) */
.el-grupo { max-width: 14rem; margin: 0 0 .5rem; }
/* «Més de 6 persones» (formación del 14-oct): la caja que ocupa el sitio del
   calendario, con «Trucar» y «WhatsApp». */
.el-grupo-mas { max-width: 34rem; margin: var(--el-s2) 0 var(--el-s3); }
.el-grupo-mas p { margin: 0 0 var(--el-s2); }

/* Huecos del día elegido, en dos bloques: Matí y Tarda */
.el-huecos-caja { margin-top: var(--el-s3); }
.el-huecos-caja .el-aviso { margin: 0 0 var(--el-s2); }
.el-bloque + .el-bloque { margin-top: var(--el-s3); }
.el-bloque__t { margin: 0 0 .5rem; font-family: var(--el-sans); font-size: .95rem; font-weight: 500; color: var(--el-vino); }
.el-huecos { display: flex; flex-wrap: wrap; gap: .6rem; }
.el-hueco {
  min-height: 48px; min-width: 116px; padding: .55rem .9rem; display: grid; gap: .1rem; text-align: left;
  background: var(--el-tarjeta); color: var(--el-tinta); border: 1px solid var(--el-filete); border-radius: var(--el-radio);
  font-family: var(--el-sans); cursor: pointer; transition: background-color 160ms ease, border-color 160ms ease;
}
.el-hueco:hover { border-color: var(--el-terracota); }
.el-hueco[aria-pressed="true"] { background: var(--el-vino); color: var(--el-claro); border-color: var(--el-vino); }
.el-hora { font-size: 1rem; font-variant-numeric: tabular-nums; }
.el-plazas { font-size: .8rem; color: var(--el-tinta-2); }
.el-plazas.pocas { color: var(--el-alerta); font-weight: 400; }
.el-hueco[aria-pressed="true"] .el-plazas { color: var(--el-claro-2); }
/* Una hora en la que no cabe el grupo: no se pulsa, con borde discontinuo
   y el texto «Completa» (la diferencia no es solo de color). */
.el-hueco:disabled { cursor: default; background: var(--el-crema); border-style: dashed; }
.el-hueco:disabled:hover { border-color: var(--el-filete); }
/* Una hora llena de «Pinta» SÍ se pulsa: abre la lista de espera. Se ve
   distinta de una libre (fondo y borde discontinuo, como la apagada) pero
   viva: el texto dice «Completa · Avisa’m si queda lloc». */
.el-hueco[data-espera="true"] { background: var(--el-crema); border-style: dashed; }
.el-hueco[data-espera="true"]:hover { border-color: var(--el-terracota); }
.el-hueco[data-espera="true"] .el-plazas { color: var(--el-terracota); }
.el-hueco[data-espera="true"][aria-pressed="true"] { background: var(--el-vino); border-style: solid; }
.el-hueco[data-espera="true"][aria-pressed="true"] .el-plazas { color: var(--el-claro-2); }
/* «Completa · Avisa’m si queda lloc» es largo: que parta en dos líneas y
   no ensanche la fila de horas en un móvil de 320. Solo ahí: «6 places» o
   «última plaça» caben de sobra en una línea. */
.el-hueco[data-espera="true"] .el-plazas { max-width: 18ch; }

/* ── Reservas · el primer paso: la feria o Pinta (migración 21) ──────── */
.el-eleccion__opciones { display: grid; gap: var(--el-s2); margin-top: var(--el-s3); }
@media (min-width: 640px) { .el-eleccion__opciones { grid-template-columns: 1fr 1fr; } }
.el-opcion {
  display: grid; gap: .4rem; align-content: start; min-height: 44px; padding: var(--el-s3); text-align: left;
  background: var(--el-tarjeta); border: 1px solid var(--el-filete); border-radius: var(--el-radio);
  color: var(--el-tinta); font: inherit; cursor: pointer;
}
.el-opcion:hover { border-color: var(--el-terracota); }
.el-opcion__t { font-family: var(--el-serif); font-size: clamp(1.3rem, 1.1rem + .8vw, 1.6rem); color: var(--el-vino); }
.el-opcion__x { color: var(--el-tinta-2); font-size: .95rem; }
/* En el móvil, las dos opciones se tienen que ver al llegar (desde el QR de
   la feria), sin bajar: el titular de la página de reservas y la elección
   se compactan. Solo aquí: los demás titulares no cambian. */
@media (max-width: 639px) {
  .el-titular--reservas { padding: 1.1rem 0 .9rem; }
  .el-titular--reservas h1 { font-size: 2rem; }
  .el-titular--reservas p { margin-top: .3rem; font-size: .95rem; line-height: 1.45; }
  .el-titular--reservas + .el-reservas { padding-top: 1.1rem; }
  .el-eleccion h2.el-t { font-size: 1.5rem; margin-bottom: 0; }
  .el-eleccion__opciones { margin-top: .75rem; gap: .75rem; }
  .el-opcion { gap: .2rem; padding: .9rem 1.1rem; }
  .el-opcion__x { font-size: .9rem; line-height: 1.45; }
}
.el-cambiar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin: 0 0 var(--el-s3); font-weight: 500; }
.el-cambiar .el-enlace { min-height: 44px; }

/* Formulario */
.el-caja { padding: var(--el-s4); background: var(--el-tarjeta); border: 1px solid var(--el-filete); border-radius: var(--el-radio); }
@media (max-width: 480px) { .el-caja { padding: var(--el-s3) var(--el-s2); } }
.el-form-caja { margin-top: var(--el-s5); }
.el-form-cuando { margin: 0 0 var(--el-s3); }
.el-campo { display: grid; gap: var(--el-s2); }
.el-rot { display: block; margin-bottom: .35rem; font-size: .82rem; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--el-tinta-2); }
.el-in {
  width: 100%; min-height: 44px; padding: .8rem .9rem; background: var(--el-crema); color: var(--el-tinta);
  border: 1px solid var(--el-filete); border-radius: var(--el-radio); font-family: var(--el-sans); font-size: 1rem;
}
.el-in:focus { border-color: var(--el-terracota); }
.el-in[aria-invalid="true"] { border-color: var(--el-alerta); }
.el-in--codigo { letter-spacing: .14em; text-transform: uppercase; }
textarea.el-in { min-height: 80px; resize: vertical; }
.el-dos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--el-s2); }
@media (max-width: 480px) { .el-dos { grid-template-columns: 1fr; } }
.el-ayuda, .el-err { margin: .3rem 0 0; font-size: .88rem; }
.el-ayuda { color: var(--el-tinta-2); }
.el-err { color: var(--el-alerta); font-weight: 400; }
.el-consiento { display: flex; gap: .6rem; align-items: flex-start; min-height: 44px; font-size: .92rem; line-height: 1.6; color: var(--el-tinta-2); cursor: pointer; }
.el-consiento input { width: 20px; height: 20px; margin-top: .15rem; flex-shrink: 0; }
.el-enlace {
  display: inline-flex; align-items: center; min-height: 44px; padding: .6rem 0; background: none; border: none;
  color: var(--el-terracota); font-family: var(--el-sans); font-size: .92rem; text-decoration: underline; cursor: pointer;
}
.el-acciones { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }

/* Avisos */
.el-aviso {
  margin: .5rem 0 0; padding: .6rem .8rem; background: rgba(140, 66, 34, .08);
  border-left: 3px solid var(--el-alerta); border-radius: var(--el-radio); font-size: .9rem; color: var(--el-vino);
}
.el-vacio {
  display: grid; justify-items: center; gap: .6rem; padding: var(--el-s4); text-align: center;
  background: var(--el-tarjeta); border: 1px dashed var(--el-filete); border-radius: var(--el-radio);
}

/* Reserva hecha */
.el-hecha { padding: var(--el-s5) var(--el-s4); text-align: center; }
.el-hecha h2.el-t { font-size: 2rem; }
.el-hecha__cuando { margin: 0 0 var(--el-s3); }
.el-codigo { display: inline-block; padding: .9rem 1.6rem; margin: 0 0 var(--el-s3); background: var(--el-crema); border: 1px dashed var(--el-terracota); border-radius: var(--el-radio); }
.el-codigo .el-rot { margin-bottom: .2rem; }
.el-codigo strong { display: block; font-size: 1.6rem; font-weight: 400; letter-spacing: .18em; color: var(--el-vino); font-variant-numeric: tabular-nums; }
.el-hecha .el-ayuda { max-width: 46ch; margin: 0 auto var(--el-s3); line-height: 1.7; }

/* Cancelar */
.el-cancelar { border-top: 1px solid var(--el-filete); margin-top: var(--el-s5); padding-top: var(--el-s3); }
.el-cancelar form { max-width: 420px; }

/* Página de asistencia del recordatorio (migración 27): la reserva en tres
   filas, como las del correo, y debajo el botón y el otro camino. */
.el-asistencia__datos { max-width: 520px; margin: var(--el-s3) 0 0; border-bottom: 1px solid var(--el-filete); }
.el-asistencia__datos > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem 1rem; padding: .7rem 0; border-top: 1px solid var(--el-filete); }
.el-asistencia__datos dt { font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--el-tinta-2); }
.el-asistencia__datos dd { margin: 0; color: var(--el-tinta); overflow-wrap: anywhere; }
.el-asistencia__acciones { margin-top: var(--el-s3); }
.el-asistencia__acciones .el-btn { white-space: normal; text-align: center; }

/* Campo cebo del antispam: fuera de la vista y fuera del tabulador. */
.el-trampa { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.el-oculto { display: none !important; }

/* Página de paso /qr (migración 22): el logo y «Un moment…» mientras
   qr.js pregunta a dónde ir; sin JavaScript, el botón a las reservas. */
.el-paso { min-height: 100dvh; display: grid; place-items: center; padding: 2rem 1.25rem; background: var(--el-papel); }
.el-paso__caja { display: grid; justify-items: center; gap: 1.5rem; text-align: center; }
.el-paso__caja img { width: 150px; height: auto; }
.el-paso__texto { margin: 0; font-family: var(--el-serif); font-style: italic; font-size: 1.6rem; color: var(--el-vino); }

/* Quien haya pedido menos movimiento, que no lo tenga. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .el-vale { transform: none; }
}