/* Web pública de Espacio La Tesela. Sistema "Mosaico" (docs/BRIEF.md, secciones 4 a 6). */

/* ---------- Base ---------- */

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

html {
  background: var(--blanco);
  color: var(--tinta);
  font-family: var(--fuente-voz);
  -webkit-text-size-adjust: 100%;
}

html.sin-scroll {
  overflow: hidden;
}

body {
  margin: 0;
  font-size: var(--t-cuerpo);
  line-height: 1.6;
}

h1,
h2,
h3,
p,
ul {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

img,
svg {
  display: block;
}

img {
  max-width: 100%;
}

a {
  color: inherit;
}

/* Enlaces dentro de texto: subrayado fino; al pasar el ratón se invierten. */
p a,
li a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: background var(--d-rapido) var(--curva), color var(--d-rapido) var(--curva);
}

p a:hover,
li a:hover {
  background: var(--tinta);
  color: var(--blanco);
}

:focus-visible {
  outline: var(--foco-claro);
  outline-offset: 2px;
}

.saltar {
  position: absolute;
  z-index: 100;
  left: var(--e-4);
  top: var(--e-4);
  padding: var(--e-3) var(--e-4);
  background: var(--tinta);
  color: var(--blanco);
  transform: translateY(-200%);
}

.saltar:focus {
  transform: none;
}

.contenedor {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0 var(--margen);
}

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

.t-display {
  font-size: var(--t-display);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.035em;
}

h1,
.t-h1 {
  font-size: var(--t-h1);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}

h2,
.t-h2 {
  font-size: var(--t-h2);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

h3,
.t-h3 {
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.entradilla {
  max-width: 44ch;
  font-family: var(--fuente-lectura);
  font-size: var(--t-entradilla);
  line-height: 1.4;
}

.lectura {
  max-width: 65ch;
  font-family: var(--fuente-lectura);
  font-size: var(--t-lectura);
  line-height: 1.65;
}

.dato {
  font-family: var(--fuente-dato);
  font-size: var(--t-dato);
  font-weight: 700;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

.nota {
  color: var(--piedra);
  font-size: var(--t-nota);
  line-height: 1.5;
}

/* ---------- Tonos ---------- */
/* Cada tono define también su contrario, que es el que sube al pasar el ratón. */

.tono-blanco,
.tono-filete,
.tono-cal,
.tono-cemento,
.tono-madera,
.tono-pino {
  color: var(--tinta);
  --inverso: var(--tinta);
  --texto-inverso: var(--blanco);
}

.tono-tinta,
.tono-grafito,
.tono-marino {
  color: var(--blanco);
  --inverso: var(--blanco);
  --texto-inverso: var(--tinta);
}

.tono-blanco,
.tono-filete {
  background: var(--blanco);
}

.tono-cal {
  background: var(--cal);
}

.tono-cemento {
  background: var(--cemento);
}

.tono-tinta {
  background: var(--tinta);
}

.tono-grafito {
  background: var(--grafito);
}

.tono-marino {
  background: var(--marino);
}

.tono-madera {
  background: var(--madera);
}

.tono-pino {
  background: var(--pino);
}

.tono-tinta :focus-visible,
.tono-grafito :focus-visible,
.tono-marino :focus-visible,
.tono-tinta:focus-visible,
.tono-grafito:focus-visible,
.tono-marino:focus-visible {
  outline: var(--foco-oscuro);
}

/* ---------- Sello, icono, etiqueta ---------- */

.sello,
.icono {
  flex: none;
}

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  width: fit-content;
  padding: 3px 10px;
  border: 1px solid currentColor;
  font-family: var(--fuente-dato);
  font-size: var(--t-etiqueta);
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

a.etiqueta {
  transition: background var(--d-rapido) var(--curva), color var(--d-rapido) var(--curva);
}

a.etiqueta:hover {
  border-color: var(--tinta);
  background: var(--tinta);
  color: var(--blanco);
}

/* ---------- Botón y enlace con flecha ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 48px;
  padding: var(--e-3) var(--e-5);
  border: var(--linea-fuerte);
  border-radius: var(--radio);
  background: var(--tinta);
  color: var(--blanco);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--d-rapido) var(--curva), color var(--d-rapido) var(--curva);
}

.boton:hover {
  background: var(--blanco);
  color: var(--tinta);
}

.boton--contorno {
  background: transparent;
  color: var(--tinta);
}

.boton--contorno:hover {
  background: var(--tinta);
  color: var(--blanco);
}

.boton:disabled {
  border-color: var(--junta);
  background: var(--junta);
  color: var(--piedra);
  cursor: not-allowed;
}

.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 44px;
  font-weight: 700;
  text-decoration: none;
}

.enlace-flecha span {
  border-bottom: 1px solid currentColor;
}

.enlace-flecha .icono,
.tesela__pie .icono,
.tarjeta-evento > .icono {
  transition: transform var(--d-rapido) var(--curva);
}

.enlace-flecha:hover .icono,
.tesela--enlace:hover .tesela__pie .icono,
.tarjeta-evento:hover > .icono {
  transform: translateX(4px);
}

/* ---------- Tesela y mosaico ---------- */
/* El mosaico (rejilla y junta de 1 px) está definido en tokens.css. */

.mosaico > .t-2 {
  grid-column: span 2;
}

.mosaico > .t-3 {
  grid-column: span 3;
}

.mosaico > .t-4 {
  grid-column: span 4;
}

.mosaico > .t-6 {
  grid-column: span 6;
}

.mosaico > .t-6x3 {
  grid-column: span 6;
  aspect-ratio: 2;
}

.tesela {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  min-width: 0;
  aspect-ratio: 1;
  padding: clamp(var(--e-4), 2vw, var(--e-6));
  text-decoration: none;
  container-type: inline-size;
}

.tono-filete {
  border: var(--filete);
}

/* Sin líneas de separación, una tesela clara necesita un tono para tener forma. */
.mosaico .tono-blanco:not(.hero__frase) {
  background: var(--cal);
}

.tono-pino .mosaico .tono-blanco,
.tono-cal .mosaico .tono-blanco {
  background: var(--blanco);
}

.tesela__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  margin-top: auto;
}

.tesela__titulo {
  font-size: clamp(1rem, 7.5cqi, 1.375rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.tesela__titulo--cursiva {
  font-family: var(--fuente-lectura);
  font-size: clamp(1.125rem, 8.5cqi, 1.5rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

.t-6x3 .tesela__dato {
  font-size: clamp(2rem, 9cqi, 3.25rem);
  letter-spacing: -0.04em;
}

.tesela__dato {
  font-family: var(--fuente-dato);
  font-size: clamp(0.9375rem, 6cqi, 1.125rem);
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.tesela__texto {
  font-size: var(--t-nota);
  line-height: 1.4;
}

.tesela__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  font-family: var(--fuente-dato);
  font-size: var(--t-etiqueta);
  line-height: 1.3;
}

/* Gesto propio: el tono contrario sube desde abajo, como si se colocara la pieza. */
.tesela--enlace::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--inverso);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--d-medio) var(--curva);
}

.tesela--enlace {
  transition: color var(--d-medio) var(--curva);
}

.tesela--enlace:hover,
.tesela--enlace:focus-visible {
  color: var(--texto-inverso);
}

.tesela--enlace:hover::before,
.tesela--enlace:focus-visible::before {
  transform: scaleY(1);
}

.tesela--enlace:focus-visible {
  z-index: 1;
}

.tesela--foto {
  padding: 0;
}

.tesela--foto img,
.tesela--foto video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Foto o vídeo con rótulo encima: el rótulo va en su propia caja, nunca sobre la imagen. */
.tesela--foto .etiqueta {
  position: absolute;
  left: 0;
  bottom: 0;
  border: 0;
  background: var(--blanco);
  color: var(--tinta);
  padding: var(--e-2) var(--e-3);
}

/* Foto con texto: la foto llena la pieza y el texto va en una caja de su tono, como en las cabeceras.
   Al pasar el ratón solo se invierte la caja, para no tapar la foto. */
.tesela--foto-texto {
  padding: 0;
  justify-content: space-between;
}

.tesela--foto-texto > img {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tesela--foto-texto::before {
  display: none;
}

.tesela--foto-texto > .etiqueta {
  align-self: flex-start;
  margin: clamp(var(--e-4), 2vw, var(--e-6));
  background: inherit;
}

.tesela__caja {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  width: min(100%, 520px);
  padding: clamp(var(--e-4), 2vw, var(--e-6));
  background: inherit;
  transition: background-color var(--d-medio) var(--curva);
}

.tesela--foto-texto.tesela--enlace:hover .tesela__caja,
.tesela--foto-texto.tesela--enlace:focus-visible .tesela__caja {
  background: var(--inverso);
}

@media (max-width: 767px) {
  .mosaico > .tesela--foto-texto {
    min-height: 0;
    gap: 0;
  }

  .tesela--foto-texto > img {
    position: static;
    z-index: auto;
    aspect-ratio: 16 / 9;
    height: auto;
  }

  .tesela--foto-texto > .etiqueta {
    position: absolute;
    top: 0;
    left: 0;
  }

  .tesela__caja {
    width: 100%;
  }
}

@media (max-width: 1023px) {
  .mosaico > .t-2,
  .mosaico > .t-3,
  .mosaico > .t-4 {
    grid-column: span 3;
  }
}

@media (max-width: 767px) {
  .mosaico > .t-2,
  .mosaico > .t-3,
  .mosaico > .t-4,
  .mosaico > .t-6,
  .mosaico > .t-6x3 {
    grid-column: span 2;
    aspect-ratio: auto;
    min-height: 168px;
  }
}

/* ---------- Hero mosaico ---------- */
/* Escritorio: frase a la izquierda (6x6) y cuatro teselas de 3x3 a la derecha. */

.hero > .tesela {
  grid-column: span 3;
}

.hero > .hero__frase {
  grid-column: 1 / span 6;
  grid-row: 1 / span 2;
  /* Frase, apoyo y botones juntos, arriba (José, 2026-10-03). */
  justify-content: flex-start;
  aspect-ratio: auto;
  padding: clamp(var(--e-5), 3.5vw, var(--e-7));
}

.hero > .hero__foto {
  grid-column: 7 / span 3;
  grid-row: 1;
}

.hero > .hero__expo {
  grid-column: 10 / span 3;
  grid-row: 1;
}

.hero > .hero__evento {
  grid-column: 7 / span 3;
  grid-row: 2;
}

.hero > .hero__coworking {
  grid-column: 10 / span 3;
  grid-row: 2;
}

.hero__titulo {
  font-size: clamp(2rem, 9.5cqi, 3.5rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.hero__botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-top: var(--e-6);
}

.hero__foto--vacia {
  display: grid;
  grid-template-columns: repeat(2, 24px);
  align-content: center;
  justify-content: center;
  gap: var(--e-2);
}

/* Entrada: las teselas aparecen una a una. */
@media (prefers-reduced-motion: no-preference) {
  .hero > .tesela {
    animation: colocar var(--d-lento) var(--curva) both;
  }

  .hero > .tesela:nth-child(2) {
    animation-delay: 40ms;
  }

  .hero > .tesela:nth-child(3) {
    animation-delay: 80ms;
  }

  .hero > .tesela:nth-child(4) {
    animation-delay: 120ms;
  }

  .hero > .tesela:nth-child(5) {
    animation-delay: 160ms;
  }
}

@keyframes colocar {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* Tableta: la frase ocupa todo el ancho y debajo van las cuatro teselas en 2x2. */
@media (max-width: 1023px) {
  .hero > .tesela {
    grid-column: span 3;
    grid-row: auto;
  }

  .hero > .hero__frase {
    grid-column: 1 / -1;
    min-height: 320px;
  }

  .hero__titulo {
    font-size: clamp(2rem, 6.5cqi, 3rem);
  }
}

/* Móvil: todo apilado. Frase, próximo evento, exposición, coworking y foto. */
@media (max-width: 767px) {
  .hero > .tesela {
    grid-column: 1 / -1;
    aspect-ratio: auto;
    min-height: 176px;
  }

  .hero > .hero__frase {
    min-height: 0;
  }

  .hero__titulo {
    font-size: clamp(1.875rem, 10cqi, 2.5rem);
  }

  .hero > .hero__foto {
    height: 50vw;
    min-height: 176px;
  }
}

/* ---------- Barra de estado ---------- */

.barra-estado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-1) var(--e-5);
  padding: var(--e-2) var(--margen);
  background: var(--tinta);
  color: var(--blanco);
  font-family: var(--fuente-dato);
  font-size: var(--t-etiqueta);
  line-height: 1.4;
}

.barra-estado p {
  display: flex;
  align-items: center;
  gap: var(--e-2) var(--e-4);
}

.barra-estado a {
  display: inline-block;
  padding: var(--e-1) 0;
}

.barra-estado a:hover {
  background: var(--blanco);
  color: var(--tinta);
}

.barra-estado :focus-visible {
  outline: var(--foco-oscuro);
}

@media (max-width: 767px) {
  .barra-estado__datos span {
    display: none;
  }
}

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

.cabecera {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
  padding: var(--e-3) var(--margen);
  background: var(--blanco);
}

.logo {
  width: auto;
  height: 1em;
}

.cabecera__logo {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-size: 1.125rem;
}

.cabecera__nav {
  display: flex;
  align-items: center;
  gap: var(--e-5);
}

.cabecera__nav ul {
  display: flex;
  gap: var(--e-5);
}

.cabecera__nav li a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  background: linear-gradient(currentColor, currentColor) left bottom 10px / 0 1px no-repeat;
  font-weight: 500;
  text-decoration: none;
  transition: background-size var(--d-medio) var(--curva);
}

.cabecera__nav li a:hover,
.cabecera__nav li a[aria-current='page'] {
  background-color: transparent;
  background-size: 100% 1px;
  color: inherit;
}

.cabecera__menu {
  display: none;
  min-height: 48px;
  padding: 0 var(--e-3);
  border: var(--linea-fuerte);
  border-radius: var(--radio);
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.cabecera__menu > span {
  display: flex;
  align-items: center;
  gap: var(--e-2);
}

.cabecera__cerrar,
.cabecera--abierta .cabecera__abrir {
  display: none !important;
}

.cabecera--abierta .cabecera__cerrar {
  display: flex !important;
}

@media (max-width: 1023px) {
  .cabecera__menu {
    display: block;
  }

  .cabecera__nav {
    position: fixed;
    inset: 0;
    z-index: -1;
    display: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    padding: calc(72px + var(--e-6)) var(--margen) var(--e-6);
    overflow-y: auto;
    background: var(--blanco);
  }

  .cabecera--abierta .cabecera__nav {
    display: flex;
  }

  .cabecera__nav ul {
    flex-direction: column;
    gap: 0;
    border-top: var(--linea);
  }

  .cabecera__nav li a {
    width: 100%;
    min-height: 64px;
    border-bottom: var(--linea);
    background: none;
    font-size: var(--t-h2);
    font-weight: 700;
    letter-spacing: -0.02em;
  }
}

/* ---------- Cinta ---------- */

.cinta {
  overflow: hidden;
  background: var(--cal);
}

.cinta__pista {
  display: flex;
  width: max-content;
  animation: cinta 40s linear infinite;
}

.cinta:hover .cinta__pista,
.cinta:focus-within .cinta__pista {
  animation-play-state: paused;
}

.cinta ul {
  display: flex;
}

.cinta li {
  display: flex;
  align-items: center;
  gap: var(--e-5);
  padding: var(--e-3) 0 var(--e-3) var(--e-5);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

@keyframes cinta {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cinta {
    overflow-x: auto;
  }

  .cinta__pista {
    animation: none;
  }

  .cinta ul[aria-hidden] {
    display: none;
  }
}

/* ---------- Tarjeta de evento ---------- */

.lista-eventos {
  border-top: var(--filete);
}

.tarjeta-evento {
  display: grid;
  grid-template-columns: minmax(96px, 148px) 1fr auto;
  align-items: center;
  gap: var(--e-4) var(--e-5);
  padding: var(--e-5) var(--e-4);
  border-bottom: var(--linea);
  text-decoration: none;
  transition: background var(--d-rapido) var(--curva);
}

.tarjeta-evento:hover {
  background: var(--cal);
}

.tarjeta-evento__fecha {
  display: flex;
  flex-direction: column;
  font-family: var(--fuente-dato);
  font-size: var(--t-etiqueta);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tarjeta-evento__dia {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.tarjeta-evento__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  min-width: 0;
}

.tarjeta-evento__datos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1) var(--e-5);
  font-family: var(--fuente-dato);
  font-size: var(--t-nota);
}

.tarjeta-evento__datos span {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
}

.tarjeta-evento--pasado {
  color: var(--piedra);
}

@media (max-width: 479px) {
  .tarjeta-evento {
    grid-template-columns: 72px 1fr;
    padding-inline: 0;
  }

  .tarjeta-evento > .icono {
    display: none;
  }
}

/* ---------- Tarjeta de exposición ---------- */

.rejilla-expos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: var(--e-6) var(--e-5);
}

.tarjeta-expo {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  text-decoration: none;
}

.tarjeta-expo__cartel {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  margin-bottom: var(--e-2);
  overflow: hidden;
  background: var(--cemento);
}

.tarjeta-expo__cartel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tarjeta-expo h3 {
  font-family: var(--fuente-lectura);
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

.tarjeta-expo:hover h3 {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.tarjeta-expo__fechas {
  font-family: var(--fuente-dato);
  font-size: var(--t-nota);
}

/* ---------- Campos de formulario ---------- */

.oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

input[type='text'],
input[type='email'],
input[type='tel'],
input[type='date'],
select,
textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--e-3);
  border: var(--linea-fuerte);
  border-radius: var(--radio);
  background: var(--blanco);
  color: var(--tinta);
  font: inherit;
}

textarea {
  resize: vertical;
}

::placeholder {
  color: var(--piedra);
  opacity: 1;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

.campo label,
.frase__extra label {
  font-weight: 700;
}

label small {
  color: var(--piedra);
  font-size: var(--t-nota);
  font-weight: 400;
}

.casilla {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: 44px;
  cursor: pointer;
}

.casilla input {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  border: var(--linea-fuerte);
  border-radius: var(--radio);
  background: var(--blanco);
  appearance: none;
  cursor: pointer;
}

/* Marcada: el cuadrado se llena, como el sello. */
.casilla input:checked {
  background: var(--tinta);
  outline: 4px solid var(--blanco);
  outline-offset: -5px;
}

.casilla input:focus-visible {
  outline: var(--foco-claro);
  outline-offset: 2px;
}

/* ---------- Tabla de tarifas ---------- */

.tarifas {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}

.tarifas__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
}

.tarifas__conmutador {
  display: flex;
}

.tarifas__conmutador button {
  min-height: 44px;
  padding: 0 var(--e-4);
  border: var(--linea-fuerte);
  border-radius: var(--radio);
  background: transparent;
  color: var(--tinta);
  font-family: var(--fuente-dato);
  font-size: var(--t-etiqueta);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.tarifas__conmutador button + button {
  border-left: 0;
}

.tarifas__conmutador button[aria-pressed='true'] {
  background: var(--tinta);
  color: var(--blanco);
}

.tarifas__tabla {
  width: 100%;
  border-top: var(--filete);
  border-collapse: collapse;
  text-align: left;
}

.tarifas__tabla thead th {
  padding: var(--e-2) var(--e-4) var(--e-2) 0;
  color: var(--piedra);
  font-family: var(--fuente-dato);
  font-size: var(--t-etiqueta);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tarifas__tabla tbody th,
.tarifas__tabla td {
  padding: var(--e-4) var(--e-4) var(--e-4) 0;
  border-top: var(--linea);
  vertical-align: top;
}

.tarifas__tabla tbody th {
  font-size: 1.1875rem;
}

.tarifas__categoria,
.tarifas__nota,
.tarifas__unidad {
  display: block;
  color: var(--piedra);
  font-size: var(--t-nota);
  font-weight: 400;
}

.tarifas__tabla .tarifas__precio {
  padding-right: 0;
  text-align: right;
  white-space: nowrap;
}

.tarifas__con,
.tarifas__sin,
.tarifas__consulta {
  font-family: var(--fuente-dato);
  font-size: 1.125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.tarifas__consulta {
  font-size: var(--t-dato);
}

.tarifas__precio small {
  color: var(--piedra);
  font-size: var(--t-etiqueta);
  font-weight: 400;
}



/* Móvil: cada tarifa es una tarjeta. */
@media (max-width: 767px) {
  .tarifas__tabla thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .tarifas__tabla,
  .tarifas__tabla tbody,
  .tarifas__tabla tr,
  .tarifas__tabla tbody th,
  .tarifas__tabla td {
    display: block;
  }

  .tarifas__tabla tr {
    padding: var(--e-4) 0;
    border-top: var(--linea);
  }

  .tarifas__tabla tbody th,
  .tarifas__tabla td {
    padding: 0 0 var(--e-2);
    border: 0;
  }

  .tarifas__tabla .tarifas__precio {
    padding-top: var(--e-2);
    text-align: left;
  }

  .tarifas__unidad {
    display: inline;
  }
}

/* ---------- Formulario en frase ---------- */

.frase {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  max-width: 760px;
}

.frase__texto {
  font-size: clamp(1.125rem, 1.4vw, 1.5rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.015em;
}

input.frase__hueco {
  display: inline-block;
  width: 9em;
  max-width: 100%;
  min-height: 0;
  padding: 0 var(--e-1);
  border: 0;
  border-bottom: var(--filete);
  background: var(--cal);
  font-weight: 500;
  letter-spacing: 0;
}

input.frase__hueco--largo {
  width: 14em;
}

.frase__hueco[aria-invalid='true'] {
  border-bottom-width: 4px;
}

.frase__intenciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin: 0;
  padding: 0;
  border: 0;
}

.frase__opcion input {
  position: absolute;
  opacity: 0;
}

.frase__opcion span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--e-4);
  border: var(--linea-fuerte);
  font-family: var(--fuente-dato);
  font-size: var(--t-nota);
  cursor: pointer;
  transition: background var(--d-rapido) var(--curva), color var(--d-rapido) var(--curva);
}

.frase__opcion span:hover {
  background: var(--cal);
}

.frase__opcion input:checked + span {
  background: var(--tinta);
  color: var(--blanco);
}

.frase__opcion input:focus-visible + span {
  outline: var(--foco-claro);
  outline-offset: 2px;
}

.frase__extra {
  display: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  align-items: end;
  gap: var(--e-2) var(--e-4);
  padding: var(--e-4);
  border-left: var(--filete);
  background: var(--cal);
}

.frase:has([data-intencion='un-dia']:checked) .frase__extra--un-dia,
.frase:has([data-intencion='reuniones']:checked) .frase__extra--reuniones,
.frase:has([data-intencion='evento']:checked) .frase__extra--evento,
.frase:has([data-intencion='proponer']:checked) .frase__extra--proponer {
  display: grid;
}

.frase__error {
  display: block;
  padding-left: var(--e-3);
  border-left: var(--filete);
  font-size: var(--t-nota);
  font-weight: 700;
}

.frase__trampa {
  position: absolute;
  left: -200vw;
}

.frase__cierre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
}

.frase--enviada {
  padding: var(--e-6);
  border: var(--filete);
}

/* ---------- Burbuja de WhatsApp ---------- */

.burbuja {
  position: relative;
  width: fit-content;
}

.burbuja--fija {
  position: fixed;
  z-index: 30;
  right: var(--e-4);
  bottom: var(--e-4);
}

.burbuja__boton {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 56px;
  padding: 0 var(--e-4);
  border: 1px solid var(--blanco);
  background: var(--tinta);
  color: var(--blanco);
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.burbuja__boton::-webkit-details-marker {
  display: none;
}

.burbuja__boton:focus-visible {
  outline: var(--foco-claro);
}

.burbuja__panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--e-2));
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  width: min(320px, calc(100vw - 2 * var(--e-4)));
  padding: var(--e-4);
  border: var(--filete);
  background: var(--blanco);
}

.burbuja:not(.burbuja--fija) .burbuja__panel {
  position: static;
  margin-top: var(--e-2);
}

.burbuja__pregunta {
  font-size: var(--t-h3);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.burbuja__panel ul {
  border-top: var(--linea);
}

.burbuja__panel li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  min-height: 48px;
  padding: 0 var(--e-2);
  border-bottom: var(--linea);
  font-weight: 500;
  text-decoration: none;
}

.burbuja__cuando {
  color: var(--piedra);
  font-size: var(--t-nota);
}

/* ---------- Ficha de inscripción ---------- */

.inscripcion {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  max-width: 420px;
  padding: var(--e-5);
  border: var(--filete);
  background: var(--blanco);
}

.inscripcion form {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}

.inscripcion__titular {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-family: var(--fuente-dato);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.inscripcion--cerrada,
.inscripcion--libre {
  border: 0;
  background: var(--cal);
}

.inscripcion .boton {
  width: 100%;
}

/* ---------- Línea de tiempo ---------- */

.linea-tiempo {
  margin: 0;
  padding: 0;
  border-top: var(--filete);
  list-style: none;
}

.linea-tiempo__anio {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 3fr;
  gap: var(--e-4) var(--e-6);
  padding: var(--e-5) 0;
  border-bottom: var(--linea);
}

.linea-tiempo__numero {
  font-family: var(--fuente-dato);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}

.linea-tiempo__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}

.linea-tiempo__contador {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-5);
  font-family: var(--fuente-dato);
  font-size: var(--t-nota);
}

.linea-tiempo__contador strong {
  font-size: var(--t-dato);
}

.linea-tiempo__cuerpo li {
  padding: var(--e-1) 0;
}

.linea-tiempo__tipo {
  display: inline-block;
  min-width: 7.5em;
  color: var(--piedra);
  font-family: var(--fuente-dato);
  font-size: var(--t-etiqueta);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (max-width: 479px) {
  .linea-tiempo__anio {
    grid-template-columns: 1fr;
  }
}

/* ---------- Persona de contacto ---------- */

.persona {
  display: grid;
  grid-template-columns: minmax(120px, 200px) 1fr;
  align-items: center;
  gap: var(--e-5) var(--e-6);
  padding: var(--e-6);
}

.persona__foto {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--madera);
}

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

.persona__texto {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

.persona__rotulo {
  font-family: var(--fuente-dato);
  font-size: var(--t-etiqueta);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.persona__nombre {
  font-size: var(--t-h2);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.persona__botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-top: var(--e-3);
}

@media (max-width: 599px) {
  .persona {
    grid-template-columns: 1fr;
    padding: var(--e-5);
  }

  .persona__foto {
    max-width: 120px;
  }
}

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

.pie {
  padding: var(--e-8) var(--margen) var(--e-5);
  background: var(--marino);
  color: var(--blanco);
}

.pie :focus-visible {
  outline: var(--foco-oscuro);
}

.pie a:hover {
  background: var(--blanco);
  color: var(--tinta);
}

.pie__rejilla {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--e-6);
  max-width: var(--ancho-max);
  margin: 0 auto;
}

.pie__rejilla > * {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}

.pie h2 {
  font-family: var(--fuente-dato);
  font-size: var(--t-etiqueta);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pie__logo {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1;
}

.pie__marca p:nth-child(2) {
  max-width: 28ch;
  font-family: var(--fuente-lectura);
  font-size: 1.0625rem;
  line-height: 1.4;
}

.pie__sellos {
  display: flex;
  gap: var(--e-2);
}

.pie li a,
.pie p a {
  display: inline-block;
  padding: var(--e-1) 0;
}

.pie__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-5);
  max-width: var(--ancho-max);
  margin: var(--e-8) auto 0;
  padding-top: var(--e-4);
  border-top: 1px solid var(--cemento);
  font-size: var(--t-nota);
}

.pie__legal span {
  margin-right: auto;
}

@media (max-width: 1023px) {
  .pie__rejilla {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 479px) {
  .pie__rejilla {
    grid-template-columns: 1fr;
  }
}

/* ---------- Estructura de página ---------- */

.portada {
  padding-block: var(--e-5) 0;
}

.portada + .cinta {
  margin-top: var(--e-5);
}

.seccion {
  padding-block: var(--seccion);
}

.seccion--pegada {
  padding-top: 0;
}

.seccion > .contenedor {
  display: flex;
  flex-direction: column;
  gap: var(--e-6);
}

.seccion__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--e-3) var(--e-5);
}

.seccion > .contenedor.dos-columnas,
.seccion > .contenedor.tu-evento,
.seccion > .contenedor.en-sala {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: var(--e-6) var(--e-8);
}

.dos-columnas > div,
.tu-evento > div,
.en-sala__texto {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--e-4);
}

.seccion > .contenedor.en-sala {
  align-items: center;
}

.en-sala__foto img,
.foto-ancha {
  width: 100%;
  height: auto;
}

.en-sala__titulo {
  font-family: var(--fuente-lectura);
  font-size: var(--t-h1);
  font-style: italic;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.en-sala__titulo a {
  text-decoration: none;
}

@media (max-width: 767px) {
  .seccion > .contenedor.dos-columnas,
  .seccion > .contenedor.tu-evento,
  .seccion > .contenedor.en-sala {
    grid-template-columns: 1fr;
  }
}

/* Apertura de página */

.apertura__dentro {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--e-4);
  padding-block: clamp(var(--e-6), 5vw, var(--e-8));
}

.apertura h1 {
  max-width: 18ch;
  font-size: var(--t-display);
  line-height: 0.95;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.apertura h1.titulo-obra {
  font-family: var(--fuente-lectura);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1;
}

.ficha-web .apertura h1 {
  max-width: 22ch;
  font-size: var(--t-h1);
  line-height: 1;
}

.ficha-web .apertura h1.titulo-obra {
  font-size: var(--t-display);
}

.apertura__botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-top: var(--e-3);
}

.apertura.tono-blanco + .seccion:not([class*='tono-']) {
  padding-top: 0;
}

.miga-web,
.rotulo {
  font-family: var(--fuente-dato);
  font-size: var(--t-etiqueta);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.miga-web a::before {
  content: '← ';
}

.rotulo {
  margin-right: var(--e-2);
  color: var(--piedra);
}

.borrador {
  padding: var(--e-3) var(--e-4);
  border: var(--filete);
  background: var(--blanco);
  color: var(--tinta);
  font-family: var(--fuente-voz);
  font-size: var(--t-nota);
  font-weight: 700;
}

/* Las dos puertas de Inicio */

.puertas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.puerta {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  padding: clamp(var(--e-5), 4vw, var(--e-7));
}

.puerta__titulo {
  margin-top: var(--e-6);
  font-size: var(--t-h1);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}

.puerta li {
  border-top: 1px solid currentColor;
}

.puerta .enlace-flecha {
  justify-content: space-between;
  width: 100%;
  min-height: 48px;
  font-size: 1rem;
}

.puerta .enlace-flecha span {
  border: 0;
}

.puerta .enlace-flecha:hover {
  background: transparent;
  color: inherit;
}

@media (max-width: 767px) {
  .puertas {
    grid-template-columns: 1fr;
  }
}

/* Listas y bloques de las páginas */

ul.mosaico > li {
  display: flex;
}

.atajos > li > .tesela {
  flex: 1;
}

.incluye .tesela {
  aspect-ratio: auto;
  min-height: 160px;
}

.pasos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pasos li {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: var(--e-5);
  background: var(--cal);
}

.pasos__numero {
  margin-bottom: var(--e-5);
  font-family: var(--fuente-dato);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
}

@media (max-width: 767px) {
  .pasos {
    grid-template-columns: 1fr;
  }
}

.horario-web {
  width: 100%;
  margin: 0;
  border-top: var(--filete);
}

.horario-web div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e-2) var(--e-5);
  padding: var(--e-3) 0;
  border-bottom: 1px solid currentColor;
}

.horario-web dt {
  font-weight: 700;
}

.horario-web dd {
  margin: 0;
  font-family: var(--fuente-dato);
  font-variant-numeric: tabular-nums;
}

.lineas {
  width: 100%;
  border-top: var(--filete);
}

.lineas li {
  padding: var(--e-3) 0;
  border-bottom: var(--linea);
  font-size: 1.0625rem;
  font-weight: 500;
}

.lectura p + p {
  margin-top: 1em;
}

.faq {
  border-top: var(--filete);
}

.faq details {
  border-bottom: var(--linea);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  min-height: 64px;
  padding: var(--e-3) 0;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '+';
  font-family: var(--fuente-dato);
  font-size: 1.25rem;
  font-weight: 400;
}

.faq details[open] summary::after {
  content: '-';
}

.faq .lectura {
  padding-bottom: var(--e-5);
}

.hueco {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--e-4);
  padding: var(--e-7) var(--e-5);
  background: var(--cal);
}

/* Agenda */

.conmutador {
  display: flex;
}

.conmutador a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin-right: -1px;
  padding: 0 var(--e-5);
  border: var(--linea-fuerte);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
}

.conmutador a[aria-current='page'] {
  background: var(--tinta);
  color: var(--blanco);
}

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
}

.filtros .etiqueta {
  min-height: 44px;
  padding-inline: var(--e-4);
}

.filtros .etiqueta[aria-current='true'] {
  background: var(--tinta);
  color: var(--blanco);
}

.agenda-grupo {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}

.agenda-grupo[hidden],
.tarjeta-evento[hidden] {
  display: none;
}

.agenda-grupo__titulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-4);
}

.agenda-grupo__titulo span {
  color: var(--piedra);
  font-family: var(--fuente-dato);
  font-size: var(--t-nota);
  font-weight: 400;
  letter-spacing: 0;
}

.agenda-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
}

/* Ficha de actividad y de exposición */

.ficha-web__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
  align-items: start;
  gap: var(--e-6) var(--e-8);
  padding-block: var(--e-7) var(--seccion);
}

.apertura:not([class*='tono-']) + .ficha-web__rejilla {
  padding-top: 0;
}

.ficha-web__cuerpo,
.ficha-web__datos {
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
}

.ficha-web__datos {
  position: sticky;
  top: 96px;
}

.ficha-web__datos .inscripcion {
  max-width: none;
}

.datos {
  margin: 0;
  border-top: var(--filete);
}

.datos div {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: var(--e-3);
  padding: var(--e-3) 0;
  border-bottom: var(--linea);
}

.datos dt {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  align-self: start;
  color: var(--piedra);
  font-family: var(--fuente-dato);
  font-size: var(--t-etiqueta);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.datos dd {
  margin: 0;
  font-weight: 500;
}

.datos small {
  color: var(--piedra);
  font-size: var(--t-nota);
  font-weight: 400;
}

.calendario {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-4);
}

.calendario a {
  display: inline-block;
  padding: var(--e-2) 0;
}

@media (max-width: 899px) {
  .ficha-web__rejilla {
    grid-template-columns: 1fr;
  }

  .ficha-web__datos {
    position: static;
    order: -1;
  }
}

/* Tabla de mesas: una columna de precio por tipo de persona */

.tarifas__pago {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin: var(--e-4) 0 0;
  font-size: var(--t-nota);
}

@media (max-width: 767px) {
  .tarifas__tabla--mesas td.tarifas__precio::before {
    content: attr(data-columna);
    display: block;
    color: var(--piedra);
    font-family: var(--fuente-dato);
    font-size: var(--t-etiqueta);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
}

/* ---------- Aviso de obra y página de espera ---------- */

.obra {
  padding: var(--e-2) var(--margen);
  border-bottom: 1px solid var(--piedra);
  background: var(--tinta);
  color: var(--blanco);
  font-family: var(--fuente-dato);
  font-size: var(--t-etiqueta);
}

.obra a:hover {
  background: var(--blanco);
  color: var(--tinta);
}

.obra a:focus-visible {
  outline: var(--foco-oscuro);
}

.espera,
.provisional {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: var(--ancho-max);
  min-height: 100svh;
  margin: 0 auto;
  padding: var(--e-8) var(--margen);
}

.provisional {
  min-height: 60svh;
  gap: var(--e-5);
}

/* Debajo va el coworking: la primera pantalla deja asomar lo siguiente. */
.espera {
  min-height: 85svh;
}

.espera__obra {
  margin-top: var(--e-6);
  color: var(--piedra);
  font-family: var(--fuente-dato);
  font-size: var(--t-etiqueta);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.espera__botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-bottom: var(--e-6);
}

.espera__horario {
  margin: var(--e-6) 0 var(--e-3);
  font-size: var(--t-h3);
}

.espera__marca {
  font-size: 1.375rem;
  line-height: 1;
}

.espera h1,
.provisional h1 {
  max-width: 16ch;
  font-size: var(--t-display);
  line-height: 0.95;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.espera h1 {
  margin: var(--e-3) 0 var(--e-6);
}

.espera__estado {
  max-width: 44ch;
  margin-bottom: var(--e-6);
  font-family: var(--fuente-lectura);
  font-size: var(--t-entradilla);
  line-height: 1.4;
}

.espera__datos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.espera__datos li {
  padding: var(--e-5);
  background: var(--cal);
}

@media (max-width: 767px) {
  .espera__datos {
    grid-template-columns: 1fr;
  }
}

.espera__datos span,
.provisional__rotulo {
  display: block;
  margin-bottom: var(--e-2);
  color: var(--piedra);
  font-family: var(--fuente-dato);
  font-size: var(--t-etiqueta);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.espera__datos a {
  display: inline-block;
  padding: var(--e-2) 0;
}

/* ---------- Guía de estilo (/sistema) ---------- */

.guia {
  padding-block: var(--e-8) var(--seccion);
}

.guia__intro {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  margin-bottom: var(--e-8);
}

.guia__bloque {
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
  padding-block: var(--e-7);
  border-top: var(--filete);
}

.guia__nota {
  color: var(--piedra);
  font-family: var(--fuente-dato);
  font-size: var(--t-etiqueta);
}

.guia__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-4);
}

.guia__tipos {
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
}

.guia__tonos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--e-3);
}

.guia__tonos li {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
}

.guia__tonos code {
  color: var(--piedra);
  font-family: var(--fuente-dato);
  font-size: 0.75rem;
}

.guia__muestra {
  aspect-ratio: 1;
  margin-bottom: var(--e-2);
}

.guia__muestra--blanco {
  border: 1px solid var(--cal);
}

.guia__muestra--tinta {
  background: var(--tinta);
}

.guia__muestra--grafito {
  background: var(--grafito);
}

.guia__muestra--piedra {
  background: var(--piedra);
}

.guia__muestra--cemento {
  background: var(--cemento);
}

.guia__muestra--junta {
  background: var(--junta);
}

.guia__muestra--cal {
  background: var(--cal);
}

.guia__muestra--blanco {
  background: var(--blanco);
}

.guia__muestra--marino {
  background: var(--marino);
}

.guia__muestra--madera {
  background: var(--madera);
}

.guia__muestra--pino {
  background: var(--pino);
}

.guia__formatos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  align-items: end;
  gap: var(--e-5);
}

.guia__formato {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

.guia__marco {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--e-4);
}

.guia__marco--1x1 {
  aspect-ratio: 1;
}

.guia__marco--4x5 {
  aspect-ratio: 4 / 5;
}

.guia__marco--16x9 {
  aspect-ratio: 16 / 9;
}

.guia__columnas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  align-items: start;
  gap: var(--e-5);
}

.guia__simbolo {
  display: grid;
  grid-template-columns: repeat(2, 24px);
  gap: 4px;
  margin-left: var(--e-6);
}

/* ---------- Cierre de página con formulario ---------- */

.cierre .frase input[type='text'],
.cierre .frase input[type='tel'],
.cierre .frase input[type='date'],
.cierre .frase select,
.cierre .frase textarea,
.cierre .casilla input:not(:checked) {
  background: var(--blanco);
}

.cierre input.frase__hueco {
  background: var(--blanco);
}

.cierre .frase__extra {
  background: var(--blanco);
}

.cierre .frase__opcion span:hover {
  background: var(--blanco);
}

.cierre .frase--enviada {
  background: var(--blanco);
}

.cierre__otras {
  font-size: var(--t-nota);
}

.cierre__otras a {
  display: inline-block;
  padding: var(--e-2) 0;
}

.frase__error--general {
  padding: var(--e-3) var(--e-4);
  border: var(--filete);
  background: var(--blanco);
}

.frase:has([data-intencion='exponer']:checked) .frase__extra--exponer {
  display: grid;
}

html {
  scroll-padding-top: 96px;
}

/* Formulario de inscripción: mismos errores que el formulario en frase */
.inscripcion .frase__error {
  margin: 0;
}

.inscripcion [role='status'] {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}

/* ---------- Mesas del coworking ---------- */

.mesas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 4px;
}

.mesa {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  padding: clamp(var(--e-4), 2.5vw, var(--e-6));
  background: var(--blanco);
}

.mesa__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2) var(--e-3);
}

.mesa--completa .mesa__cabecera .etiqueta {
  background: var(--tinta);
  color: var(--blanco);
}

.mesa__precios {
  margin: 0;
  border-top: var(--filete);
}

.mesa__precios div {
  display: flex;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-3) 0;
  border-bottom: var(--linea);
}

.mesa__precios dt {
  font-weight: 700;
}

.mesa__precios dd {
  margin: 0;
  text-align: right;
}

.mesa__incluye {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-2) var(--e-4);
  margin-top: auto;
  font-size: var(--t-nota);
}

.mesa__incluye li {
  display: flex;
  align-items: center;
  gap: var(--e-2);
}

.aviso-web {
  display: flex;
  align-items: start;
  gap: var(--e-3);
  padding: var(--e-4) var(--e-5);
  /* En negro para que destaque (José, 2026-10-03). */
  background: var(--tinta);
  color: var(--blanco);
  font-weight: 500;
}

.aviso-web .sello {
  margin-top: 5px;
}

/* ---------- Asociación ---------- */

.valores {
  width: 100%;
  margin: 0;
  border-top: var(--filete);
}

.valores div {
  padding: var(--e-3) 0;
  border-bottom: var(--linea);
}

.valores dt {
  font-weight: 700;
}

.valores dd {
  margin: 0;
  color: var(--piedra);
}

.derechos {
  margin: 0;
  padding: 0 0 var(--e-5) 1.5em;
  font-family: var(--fuente-lectura);
  font-size: var(--t-lectura);
  line-height: 1.65;
}

/* ---------- Formulario en frase, versión de una sola frase ---------- */
/* Los huecos van dentro del texto: campos subrayados y desplegables donde hay que elegir. */

.frase__texto {
  line-height: 1.9;
}

.frase__texto label {
  font-weight: 700;
}

select.frase__hueco--lista {
  display: inline-block;
  width: auto;
  max-width: 100%;
  min-height: 0;
  padding: 0 1.6em 0 var(--e-1);
  border: 0;
  border-bottom: var(--filete);
  border-radius: 0;
  background-color: var(--cal);
  /* Flecha del desplegable, dibujada: deja claro que ahí se elige. */
  background-image: linear-gradient(45deg, transparent 50%, var(--tinta) 50%), linear-gradient(135deg, var(--tinta) 50%, transparent 50%);
  background-position: calc(100% - 0.85em) 55%, calc(100% - 0.5em) 55%;
  background-size: 0.35em 0.35em;
  background-repeat: no-repeat;
  color: var(--tinta);
  font: inherit;
  font-weight: 500;
  letter-spacing: 0;
  appearance: none;
  cursor: pointer;
}

input.frase__hueco[type='date'] {
  width: auto;
}

input.frase__hueco--corto {
  width: 3.5em;
  text-align: center;
}

.frase__punto {
  margin-left: -0.15em;
}

/* Los trozos de frase que dependen de lo elegido en el desplegable. */
.frase__texto .frase__extra {
  display: none;
  padding: 0;
  border: 0;
  background: none;
}

.frase:has(select[name='intencion'] option[value='un-dia']:checked) .frase__extra--un-dia,
.frase:has(select[name='intencion'] option[value='reuniones']:checked) .frase__extra--reuniones,
.frase:has(select[name='intencion'] option[value='evento']:checked) .frase__extra--evento,
.frase:has(select[name='intencion'] option[value='proponer']:checked) .frase__extra--proponer,
.frase:has(select[name='intencion'] option[value='exponer']:checked) .frase__extra--exponer {
  display: inline;
}

.cierre select.frase__hueco--lista {
  background-color: var(--blanco);
}

.cierre .frase__texto .frase__extra {
  background: none;
}

.mesa--bono {
  background: var(--cal);
}

.mesa__precio-unico {
  padding: var(--e-3) 0;
  border-block: var(--linea);
  border-top: var(--filete);
}

/* ---------- Formularios sin caja de fondo ---------- */
/* Los campos no llevan relleno: se ve el fondo de la sección y el campo lo marca su línea. */

input[type='text'],
input[type='email'],
input[type='tel'],
input[type='date'],
select,
textarea,
input.frase__hueco,
select.frase__hueco--lista,
.cierre .frase input[type='text'],
.cierre .frase input[type='tel'],
.cierre .frase input[type='date'],
.cierre .frase select,
.cierre .frase textarea,
.cierre input.frase__hueco,
.cierre select.frase__hueco--lista,
.cierre .casilla input:not(:checked),
.casilla input {
  background-color: transparent;
}

.frase__opcion span:hover,
.cierre .frase__opcion span:hover {
  background: transparent;
}

.frase__extra,
.cierre .frase__extra,
.cierre .frase--enviada,
.frase__error--general,
.inscripcion,
.inscripcion--cerrada,
.inscripcion--libre {
  background: transparent;
}

.inscripcion--cerrada,
.inscripcion--libre {
  border: var(--linea);
}

/* Casilla marcada: un cuadrado negro dentro del marco, sin anillo de color. */
.casilla input:checked {
  padding: 3px;
  background: var(--tinta) content-box;
  outline: none;
}

.casilla input:checked:focus-visible {
  outline: var(--foco-claro);
  outline-offset: 2px;
}

/* ---------- Cabecera de página con foto ---------- */
/* La foto ocupa todo el fondo y el texto va en su propia caja, abajo a la izquierda. */

.apertura--foto {
  position: relative;
  display: flex;
  align-items: end;
  min-height: clamp(420px, 62vh, 640px);
  padding-block: var(--e-6);
  background: var(--grafito);
}

.apertura__fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.apertura--foto .contenedor {
  position: relative;
  width: 100%;
}

.apertura__caja {
  width: min(100%, 640px);
  padding: clamp(var(--e-5), 3vw, var(--e-7));
}

.apertura--foto + .seccion:not([class*='tono-']) {
  padding-top: var(--seccion);
}

@media (max-width: 767px) {
  .apertura--foto {
    display: block;
    min-height: 0;
    padding-block: 0;
  }

  .apertura__fondo {
    position: static;
    aspect-ratio: 16 / 9;
    height: auto;
  }

  .apertura--foto .contenedor {
    padding: 0;
  }

  .apertura__caja {
    width: 100%;
    padding: var(--e-5) var(--margen);
  }
}

/* ---------- Cabecera de las páginas principales: foto con velo blanco ---------- */
/* Como el fondo de la portada (José, 2026-10-05): la foto muy suave detrás y el texto encima, sin caja.
   Excepción pedida por José a la regla de no poner transparencias sobre foto. */
.apertura--velo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--blanco);
}

.apertura__velo {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.16;
}

.apertura--velo + .seccion:not([class*='tono-']) {
  padding-top: var(--seccion);
}

/* ---------- Galería ---------- */

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 4px;
}

.galeria a {
  display: block;
  overflow: hidden;
}

.galeria img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform var(--d-lento) var(--curva);
}

.galeria a:hover img {
  transform: scale(1.04);
}

.galeria a:hover {
  background: none;
}

@media (max-width: 479px) {
  .galeria {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Un solo borde izquierdo ---------- */
/* Todo lo que va a ancho completo (barras, cabecera, pie) se alinea con el contenido. */

.contenedor {
  max-width: none;
  padding-inline: var(--borde);
}

.barra-estado,
.cabecera,
.obra,
.pie {
  padding-inline: var(--borde);
}

.pie__rejilla,
.pie__legal {
  max-width: none;
  margin-inline: 0;
}

.espera,
.provisional {
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--borde);
}

@media (max-width: 1023px) {
  .cabecera__nav {
    padding-inline: var(--margen);
  }
}

.hueco {
  padding-inline: 0;
  background: none;
}

/* ---------- Ajustes pedidos por José ---------- */

/* Lo que incluye una mesa: cada cosa en una sola línea. */
.mesa__incluye {
  grid-template-columns: repeat(auto-fill, minmax(9.5em, 1fr));
}

.mesa__incluye li {
  white-space: nowrap;
}

/* La frase de portada arranca en el mismo borde izquierdo que el logo. */
.hero > .hero__frase {
  padding-left: 0;
}

/* Logo más grande. */
.cabecera__logo {
  font-size: 1.75rem;
}

@media (max-width: 479px) {
  .cabecera__logo {
    font-size: 1.5rem;
  }
}

/* Dirección de la barra superior: enlace al mapa. */
.barra-estado__direccion {
  display: inline-flex !important;
  align-items: center;
  gap: var(--e-2);
}

.barra-estado__llegar {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

@media (max-width: 767px) {
  .barra-estado__direccion span {
    display: none;
  }
}

/* ---------- Visor de fotos de la galería ---------- */

/* Visor de galería (José, 2026-10-04): como una sala a oscuras. La foto con aire alrededor, una cartela
   en cursiva de lectura, el número en monoespaciada, flechas finas que no tapan la obra y una tira de
   miniaturas para saltar. */
.visor {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: var(--e-4) var(--e-5) var(--e-5);
  border: 0;
  background: var(--tinta);
  color: var(--blanco);
  overflow: hidden;
}

.visor[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: var(--e-3);
}

.visor::backdrop {
  background: var(--tinta);
}

.con-visor {
  overflow: hidden;
}

.visor :focus-visible {
  outline: var(--foco-oscuro);
}

.visor button {
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.visor__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  min-height: 44px;
}

.visor__cuenta {
  font-family: var(--fuente-dato);
  font-size: var(--t-etiqueta);
  letter-spacing: 0.12em;
  color: var(--cemento);
}

.visor__cerrar {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 44px;
  padding: 0 var(--e-2);
  font-family: var(--fuente-dato);
  font-size: var(--t-etiqueta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.visor__cerrar span {
  font-size: 1.5rem;
  line-height: 1;
}

.visor__cerrar:hover {
  color: var(--madera);
}

/* La sala: la foto en el centro y las flechas a los lados, cada una sobre su mitad de pantalla. */
.visor__sala {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
}

.visor__obra {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  margin: 0;
  padding: var(--e-2) clamp(var(--e-2), 6vw, 96px);
}

.visor__obra img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: opacity 160ms ease;
}

.visor__img--saliendo {
  opacity: 0;
}

.visor__paso {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  width: 50%;
  padding: 0 var(--e-2);
  opacity: 0.55;
  transition: opacity 160ms ease;
}

.visor__paso--anterior {
  left: 0;
  justify-content: flex-start;
  cursor: w-resize;
}

.visor__paso--siguiente {
  right: 0;
  justify-content: flex-end;
  cursor: e-resize;
}

.visor__paso:hover,
.visor__paso:focus-visible {
  opacity: 1;
}

/* Flecha de trazo fino, dibujada con dos bordes. */
.visor__paso span {
  display: block;
  width: 22px;
  height: 22px;
  border-top: 1.5px solid currentColor;
  border-left: 1.5px solid currentColor;
}

.visor__paso--anterior span {
  transform: rotate(-45deg);
}

.visor__paso--siguiente span {
  transform: rotate(135deg);
}

.visor--una .visor__paso,
.visor--una .visor__tira {
  display: none;
}

.visor__cartela {
  min-height: 1.5em;
  font-family: var(--fuente-lectura);
  font-size: var(--t-lectura);
  font-style: italic;
  text-align: center;
  color: var(--cal);
}

/* Tira de miniaturas: la que se ve, encendida; las demás, apagadas. */
.visor__tira {
  display: flex;
  justify-content: safe center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.visor__tira button {
  flex: none;
  width: 52px;
  height: 52px;
  padding: 0;
  opacity: 0.4;
  transition: opacity 160ms ease;
}

.visor__tira button:hover,
.visor__tira button[aria-current] {
  opacity: 1;
}

.visor__tira button[aria-current] {
  outline: 1px solid var(--blanco);
  outline-offset: 2px;
}

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

@media (max-width: 599px) {
  .visor {
    padding: var(--e-3) var(--e-3) var(--e-4);
  }

  .visor__obra {
    padding-inline: 0;
  }

  .visor__paso {
    width: 30%;
    opacity: 0.8;
  }

  .visor__tira button {
    width: 40px;
    height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .visor__obra img,
  .visor__paso,
  .visor__tira button {
    transition: none;
  }
}

/* ---------- Piezas con foto ---------- */

.piezas-foto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 4px;
}

.pieza-foto {
  display: flex;
  flex-direction: column;
  text-decoration: none;
}

.pieza-foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.pieza-foto__texto {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--e-4);
  padding: clamp(var(--e-4), 2.5vw, var(--e-6));
}

.pieza-foto__titulo {
  margin-top: auto;
  font-size: var(--t-h2);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.pieza-foto .tesela__pie .icono {
  transition: transform var(--d-rapido) var(--curva);
}

.pieza-foto:hover .tesela__pie .icono {
  transform: translateX(4px);
}

.pieza-foto:hover img {
  filter: none;
}

.hero__apoyo {
  max-width: 32ch;
  margin-top: var(--e-4);
}

/* ---------- Coworking: "somos pocos" ---------- */
/* Cada mesa es una tesela: llena si tiene dueño, en hueco si espera a alguien. */

.pocos .rotulo {
  color: var(--madera);
}

.pocos .boton {
  border-color: var(--blanco);
  background: var(--blanco);
  color: var(--tinta);
}

.pocos .boton:hover {
  background: transparent;
  color: var(--blanco);
}

.seccion > .contenedor.dos-columnas:has(.pocos__mesas) {
  align-items: end;
}

.pocos__mesas {
  width: 100%;
}

.pocos__puestos {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 360px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pocos__puestos li {
  width: 36px;
  height: 36px;
  background: var(--blanco);
}

.pocos__puestos .libre {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--madera);
}

.pocos .pocos__pie {
  color: var(--pino);
}

/* ---------- Puestos al mes: las tres mesas, idénticas en reparto (José, 2026-10-03) ---------- */
/* Cada pieza ocupa cuatro filas compartidas: cabecera, texto, precios e incluye, a la misma altura. */
.mesas--puestos {
  grid-template-rows: repeat(4, auto);
  row-gap: 0;
}

.mesas--puestos > .mesa {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  row-gap: var(--e-4);
}

/* El nombre arriba y, debajo, cuántas quedan: igual en todas, quepa o no en una línea. */
.mesas--puestos .mesa__cabecera {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.mesas--puestos .mesa__descripcion {
  margin: 0;
}

.mesas--puestos .mesa__incluye {
  align-self: start;
  margin-top: 0;
}

/* Teletrabajo y emprendedor: su icono junto al precio y, debajo, qué es cada uno en dos piezas. */
.mesa__precios dt {
  display: flex;
  align-items: center;
  gap: var(--e-2);
}

.perfiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 4px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.perfil {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-1) var(--e-4);
  align-content: start;
  padding: clamp(var(--e-4), 2.5vw, var(--e-5));
  background: var(--pino);
  font-size: var(--t-nota);
}

.perfil .icono {
  grid-row: span 2;
}

.perfil p {
  margin: 0;
}

.perfil__nombre {
  font-family: var(--fuente-dato);
  font-size: var(--t-etiqueta);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}


/* En las mesas, la cifra nunca se parte: el "IVA incluido" baja con la unidad. */
.mesa__precios .tarifas__con {
  white-space: nowrap;
}

.mesa__precios .tarifas__con small {
  display: block;
  color: var(--piedra);
  font-family: var(--fuente-voz);
  font-size: var(--t-nota);
  font-weight: 400;
}

/* Plano del coworking (parte plano_mesas): solo las sillas, como teselas, colocadas como en la sala. */
.plano {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
}

.plano__silla {
  fill: var(--blanco);
}

.plano__silla--libre {
  fill: none;
  stroke: var(--madera);
  stroke-width: 2;
}

/* Banda de mesas libres de Coworking (parte banda_mesas): fija abajo y estrecha (José, 2026-10-03). */
.banda-mesas {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  padding-block: var(--e-2);
  background: var(--madera);
  color: var(--tinta);
  font-size: var(--t-nota);
}

/* Que la banda no tape el final de la página. */
body:has(.banda-mesas) {
  padding-bottom: 56px;
}

.banda-mesas__dentro {
  display: flex;
  align-items: center;
  gap: var(--e-2) var(--e-5);
}

.banda-mesas__sillas {
  flex: none;
  width: auto;
  height: 12px;
}

.banda-mesas__sillas .ocupada {
  fill: var(--tinta);
}

.banda-mesas__sillas .libre {
  fill: none;
  stroke: var(--tinta);
  stroke-width: 1.5;
}

.banda-mesas__texto {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.banda-mesas__texto strong {
  font-weight: 700;
}

.banda-mesas .boton {
  flex: none;
  min-height: 36px;
  padding: var(--e-1) var(--e-4);
  font-size: var(--t-nota);
}

/* En el móvil, solo la cifra y el botón. */
@media (max-width: 767px) {
  .banda-mesas__sillas,
  .banda-mesas__resto {
    display: none;
  }
}

.banda-mesas--llena {
  background: var(--tinta);
  color: var(--blanco);
}

.banda-mesas--llena .ocupada {
  fill: var(--blanco);
}

.banda-mesas--llena .boton {
  border-color: var(--blanco);
  background: var(--blanco);
  color: var(--tinta);
}


/* Casilla de novedades en los formularios, encima de la de privacidad. */
.frase__novedades {
  margin-top: var(--e-4);
}

/* Inscripción: género y edad, opcionales y plegados. */
.inscripcion__publico summary {
  cursor: pointer;
  font-weight: 700;
}

.inscripcion__publico[open] summary {
  margin-bottom: var(--e-2);
}

.inscripcion__persona {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-2);
  margin: var(--e-3) 0 0;
  padding: 0;
  border: 0;
}

.inscripcion__persona[hidden] {
  display: none;
}

.inscripcion__persona legend {
  margin-bottom: var(--e-1);
  padding: 0;
  font-size: var(--t-nota);
}

.inscripcion__persona select {
  width: 100%;
  min-width: 0;
}

/* ---------- Transparencia ---------- */
.transp h3 {
  margin: var(--e-7) 0 var(--e-3);
}

.transp__anios {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: var(--e-5);
}

.transp__anios a {
  padding: var(--e-2) var(--e-4);
  border: var(--linea-fuerte);
  font-family: var(--fuente-dato);
  text-decoration: none;
}

.transp__anios a[aria-current='page'] {
  background: var(--tinta);
  color: var(--blanco);
}

.transp__titulo {
  margin: 0;
  font-size: var(--t-h1);
}

.transp__aprobado,
.transp__nota {
  color: var(--piedra);
  font-size: var(--t-nota);
}

.transp__cifras {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin: var(--e-5) 0;
  padding: 0;
  list-style: none;
}

.transp__cifras--tres {
  grid-template-columns: repeat(3, 1fr);
}

.transp__cifras li {
  padding: var(--e-4);
  background: var(--cal);
}

.transp__cifras strong {
  display: block;
  font-family: var(--fuente-dato);
  font-size: var(--t-h2);
  line-height: 1.1;
}

.transp__cifras span {
  font-size: var(--t-nota);
}

.transp__tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-nota);
}

.transp__tabla caption {
  margin-bottom: var(--e-2);
  font-weight: 700;
  text-align: left;
}

.transp__tabla th,
.transp__tabla td {
  padding: var(--e-1) var(--e-2) var(--e-1) 0;
  text-align: left;
  font-weight: 400;
  vertical-align: middle;
}

.transp__tabla thead th {
  font-family: var(--fuente-dato);
  font-size: var(--t-etiqueta);
  text-transform: uppercase;
}

.transp__tabla td:last-child {
  font-family: var(--fuente-dato);
  text-align: right;
  white-space: nowrap;
}

.transp__tabla td:has(.transp__barra) {
  width: 40%;
}

.transp__barra {
  display: block;
  width: 100%;
  height: 10px;
  background: var(--cal);
  fill: var(--marino);
}

.transp__dos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-6);
}

.transp__lista {
  padding-left: 1.2em;
}

@media (max-width: 700px) {
  .transp__cifras,
  .transp__dos {
    grid-template-columns: 1fr 1fr;
  }

  .transp__dos {
    grid-template-columns: 1fr;
  }
}

/* Al escribir el campo no cambia: ni recuadro ni línea más gruesa (José, 2026-10-04). Basta el cursor. */
:is(input:not([type='checkbox']):not([type='radio']), select, textarea):focus {
  outline: none;
}

/* Fondo de la portada: La Tesela vista desde la calle, muy suave detrás del mosaico (José, 2026-10-04).
   Excepción pedida por José a la regla de no poner transparencias sobre foto. La frase va sin fondo
   para que se vea la calle detrás; las demás teselas siguen en su tono. */
.portada-fondo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.portada-fondo__foto {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.16;
}

.portada-fondo .hero > .hero__frase {
  background: transparent;
}

/* Formulario en frase ordenado a todo el ancho y sin grises (José, 2026-10-04).
   Arriba la frase; abajo, en pantallas anchas, el mensaje a la izquierda y el envío a la derecha. */
.frase {
  max-width: none;
}

.frase .nota,
.frase__envio .nota {
  color: var(--tinta);
}

/* Los ejemplos de los huecos, en negro y sin cursiva (José, 2026-10-04). Van en trazo normal y lo escrito en medio. */
.frase ::placeholder {
  color: var(--tinta);
  font-style: normal;
  font-weight: 400;
}

/* El mensaje: título visible encima y caja fina a todo el ancho. */
.frase__etiqueta {
  display: block;
  margin-bottom: var(--e-2);
  font-weight: 700;
}

.frase__etiqueta span {
  font-weight: 400;
}

/* Bloque plano en blanco roto, sin borde: se ve dónde escribir sin que la caja pese. */
.frase textarea,
.cierre .frase textarea {
  min-height: 5.5rem;
  padding: var(--e-3);
  border: 0;
  background: var(--blanco);
}

.frase__abajo {
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
  margin-top: var(--e-4);
}

/* Casillas, botón y texto legal: pequeños, debajo del mensaje. */
.frase__envio {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  font-size: var(--t-nota);
}

.frase__envio > .nota {
  margin-top: var(--e-3);
}

.frase__envio .frase__novedades {
  margin-top: 0;
}

.frase__envio .casilla {
  min-height: 28px;
}

.frase__envio .casilla input {
  width: 18px;
  height: 18px;
}

.frase__envio .boton {
  min-height: 40px;
  padding: 0 var(--e-4);
  font-size: var(--t-nota);
}

/* La segunda frase (email y teléfono) empieza en su propia línea, salvo en el móvil. */
@media (max-width: 599px) {
  .frase__salto {
    display: none;
  }
}

/* Lo que incluye una sala: la misma lista con iconos que las mesas, algo más grande. */
.sala__incluye {
  max-width: 760px;
  margin-top: 0;
  font-size: var(--t-cuerpo);
}

.lectura + .sala__incluye {
  margin-top: var(--e-6);
}

/* ---------- Asociación: cómo nació ---------- */
.como-nacio__subtitulo {
  margin-top: var(--e-7);
  margin-bottom: var(--e-4);
}

.como-nacio__obra {
  max-width: 760px;
  margin-bottom: var(--e-5);
}

.fundadores {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--e-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fundador {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  padding-bottom: var(--e-4);
}

.fundador img,
.fundador__sin-foto {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  margin-bottom: var(--e-3);
  background: var(--madera);
}

.fundador__nombre {
  font-weight: 700;
}

.fundador__texto {
  font-size: var(--t-nota);
}

@media (max-width: 767px) {
  .fundadores {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- Comunidad de WhatsApp ---------- */
/* Una pieza de media anchura: no hace falta que sea cuadrada. */
.mosaico > .comunidad {
  aspect-ratio: auto;
  min-height: 220px;
}

/* ---------- Iniciativas ---------- */
.ficha-web__rejilla--sola {
  grid-template-columns: minmax(0, 860px);
}

/* Con foto de fondo en la cabecera, el texto de la iniciativa no va pegado a ella. */
.apertura.apertura--foto + .ficha-web__rejilla.ficha-web__rejilla--sola {
  padding-top: var(--e-7);
}

/* Aviso de que el archivo se está completando (José, 2026-10-05). */
.archivo-nota {
  margin: 0 0 var(--e-5);
}