/* ═══════════════════════════════════════════════════════════════
   TORCAZA — «Salón de las Ocho»
   ───────────────────────────────────────────────────────────────
   El café argentino de siempre a las ocho de la mañana: pared a la
   cal, zócalo de madera verde inglés, bronce en los herrajes.

   La página es tranquila por construcción. No hay ni un patrón de
   fondo: el color vive en dos o tres regiones grandes y el resto es
   aire. La calidez la ponen las fotos, no el fondo.

   El fondo es cal fría (#E9EBE4), no crema. Es a propósito: crema
   + serif de alto contraste + terracota es donde cae por defecto
   cualquier café de especialidad, y es de donde esta demo viene
   saliendo. Por eso la serif es de bajo contraste y el fondo tira
   a verde grisáceo, no a papel viejo.

   La firma es la línea de zócalo: un filete de bronce a la altura
   de cada título, que arranca donde termina la palabra y cruza
   hasta el borde. Aparece en todas las secciones, siempre igual.

   OJO con el atajo `padding` en los bloques que también son
   `.hoja`: ese contenedor pone el margen lateral con
   `padding-inline`. Para el espacio vertical va `padding-block`.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. FICHAS ─────────────────────────────────────────────────── */

:root {
  --cal:          #E9EBE4;   /* la pared, fondo de todo */
  --cal-alta:     #F2F3EE;   /* un escalón más clara */
  --tinta:        #1C201C;
  --tenue:        #5A6159;   /* secundario sobre cal: 5.3:1 */

  --verde:        #1E4034;   /* el zócalo */
  --verde-alto:   #2A5A49;
  --verde-texto:  #A8C0B4;   /* secundario sobre verde: 5.9:1 */

  /* El bronce es herraje: rellenos, filetes y subrayados. Nunca
     texto sobre cal, ahí no llega a contraste (2.7:1). */
  --bronce:       #B08A3E;
  --bronce-alto:  #C9A253;

  --linea:        #C9CCC2;

  --t:            clamp(52px, 7vw, 86px);
  --hoja-max:     1120px;
  --margen:       clamp(20px, 5vw, 44px);

  /* Lo que hay entre el borde derecho del contenedor y el borde de
     la ventana. Sirve para que una foto adentro de `.hoja` pueda
     sangrar hasta el borde sin desalinear el texto de al lado. */
  --sangria-der:  calc((100vw - min(100vw, var(--hoja-max))) / 2 + var(--margen));

  --suave:        cubic-bezier(.22, .85, .3, 1);
  --paso:         200ms;

  /* Radio chico en lo que se toca, y sólo ahí. Las fotos y los
     bloques van a canto vivo. Importa mantenerlo: la otra demo va a
     0px en absolutamente todo, y si acá también fuera 0 las dos se
     empezarían a parecer. Ver demos/README.md §6. */
  --radio:        3px;
}

/* ── 2. BASE ───────────────────────────────────────────────────── */

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

html { -webkit-text-size-adjust: 100%; overflow-x: clip }

body {
  margin: 0;
  font-family: 'Archivo', system-ui, sans-serif;
  font-variation-settings: 'wght' 400, 'wdth' 100;
  font-size: clamp(16px, 1.05vw, 17.5px);
  line-height: 1.65;
  color: var(--tinta);
  background: var(--cal);
  font-variant-numeric: tabular-nums;
}

img { display: block; max-width: 100%; height: auto }
figure { margin: 0 }

/* ── 3. SUPERFICIES DEL NAVEGADOR ──────────────────────────────── */

::selection { background: var(--bronce); color: #fff }

:root { accent-color: var(--verde); caret-color: var(--verde) }

html { scrollbar-color: var(--verde) var(--cal); scrollbar-width: thin }
::-webkit-scrollbar { width: 12px; height: 12px }
::-webkit-scrollbar-track { background: var(--cal) }
::-webkit-scrollbar-thumb { background: var(--verde); border: 3px solid var(--cal) }
::-webkit-scrollbar-thumb:hover { background: var(--bronce) }

:focus-visible { outline: 3px solid var(--bronce); outline-offset: 3px }

a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px }

/* ── 4. TIPOGRAFÍA ─────────────────────────────────────────────────
   Petrona para lo que se mira, Archivo para lo que se lee y para
   todas las cifras. La serif es de bajo contraste a propósito. */

h1, h2, h3 {
  margin: 0;
  font-family: 'Petrona', Georgia, serif;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.014em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 5.6vw, 4.2rem); line-height: 1.02 }
h2 { font-size: clamp(1.85rem, 3.4vw, 2.7rem) }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 650 }

p { margin: 0 0 1.1em }
p:last-child { margin-bottom: 0 }

.medida { max-width: 66ch }

.rotulo {
  font-family: 'Archivo', system-ui, sans-serif;
  font-variation-settings: 'wght' 640, 'wdth' 88;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.2;
  margin: 0;
  color: var(--tenue);
}

.subrayado {
  text-decoration: underline;
  text-decoration-color: var(--bronce);
  text-decoration-thickness: 2px;
}

/* ── 5. LA LÍNEA DE ZÓCALO ─────────────────────────────────────────
   La firma de la página. El filete arranca donde termina el título
   y cruza hasta el borde. Está en todas las secciones, siempre a
   la misma altura respecto del título. */

.titulo {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 28px);
  margin-bottom: .62em;
}
.titulo::after {
  content: '';
  flex: 1 1 auto;
  min-width: 2rem;
  height: 1px;
  background: var(--bronce);
  opacity: .6;
}
.tramo--verde .titulo::after { opacity: .85 }

/* ── 6. CONTENEDOR ─────────────────────────────────────────────── */

.hoja {
  width: 100%;
  max-width: var(--hoja-max);
  margin-inline: auto;
  padding-inline: var(--margen);
}

.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 40;
  padding: 14px 20px;
  background: var(--verde);
  color: var(--cal);
  font-variation-settings: 'wght' 700, 'wdth' 92;
  text-decoration: none;
}
.saltar:focus { left: 0 }

/* ── 7. TRAMOS ─────────────────────────────────────────────────────
   Cada sección es un tramo de pared. Los verdes son el zócalo: el
   color ocupa la región entera, no un borde ni una tarjeta. */

.tramo {
  position: relative;
  padding-block: calc(var(--t) * 1.05) calc(var(--t) * .95);
}
.tramo + .tramo { border-top: 1px solid var(--linea) }

.tramo--verde {
  background: var(--verde);
  color: var(--cal);
  border-top: 0 !important;
}
.tramo--verde + .tramo { border-top: 0 }
.tramo--verde .tenue { color: var(--verde-texto) }
.tramo--verde .rotulo { color: var(--verde-texto) }

.tenue { color: var(--tenue) }

/* ── 8. CABECERA ───────────────────────────────────────────────────
   Estática, no sigue al scroll: la otra demo tiene barra pegajosa
   y ésta no. Es una moldura fina arriba de la pared. */

.chapa {
  position: relative;
  background: var(--cal-alta);
  border-bottom: 1px solid var(--linea);
}

.chapa__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(12px, 2vw, 24px);
  padding-block: clamp(14px, 1.6vw, 20px);
}

.chapa__marca {
  display: flex;
  align-items: baseline;
  gap: .65em;
  text-decoration: none;
  font-family: 'Petrona', Georgia, serif;
  font-weight: 650;
  font-size: 1.3rem;
  letter-spacing: -.012em;
}
.chapa__bajada {
  font-family: 'Archivo', system-ui, sans-serif;
  font-variation-settings: 'wght' 520, 'wdth' 88;
  font-size: .7rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tenue);
}

.chapa__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(14px, 2.2vw, 26px);
  margin-inline-start: auto;
}
.chapa__nav a {
  font-variation-settings: 'wght' 560, 'wdth' 92;
  font-size: .84rem;
  text-decoration: none;
  padding-block: .3em;
  border-bottom: 2px solid transparent;
  transition: border-color var(--paso) var(--suave);
}
.chapa__nav a:hover { border-bottom-color: var(--bronce) }

.chapa__hoy {
  font-variation-settings: 'wght' 600, 'wdth' 88;
  font-size: .74rem;
  letter-spacing: .06em;
  color: var(--verde);
  white-space: nowrap;
  padding-inline-start: clamp(12px, 2vw, 22px);
  border-inline-start: 1px solid var(--linea);
}

/* ── 9. LA APERTURA ────────────────────────────────────────────────
   Texto a la izquierda alineado al contenedor, foto sangrando por
   el borde derecho. Asimétrica y tranquila; nada de foto a sangre
   con el título encima. */

/* La sección es un `.hoja`, así que el texto arranca exactamente
   donde arranca el de todas las demás secciones. La foto se sale
   del contenedor con margen negativo hasta el borde de la
   ventana: sangra sin arrastrar la alineación del texto. */
.piso {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 42%);
  align-items: stretch;
  gap: clamp(28px, 4vw, 60px);
  padding-block: calc(var(--t) * 1.1) calc(var(--t) * 1.05);
  border-bottom: 1px solid var(--linea);
}

.piso__texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: calc(var(--t) * .3) 0;
}

.piso__nombre {
  font-size: clamp(3.1rem, 8vw, 6rem);
  font-weight: 600;
  line-height: .98;
  letter-spacing: -.022em;
  margin: 0 0 .18em;
}

.piso__dicho {
  font-family: 'Petrona', Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: 1.32;
  color: var(--verde);
  max-width: 22ch;
  margin: 0 0 .9em;
}

.piso__texto > p:not(.piso__dicho) { max-width: 44ch; color: var(--tenue) }

.piso__foto {
  position: relative;
  min-height: calc(var(--t) * 4.4);
  margin-inline-end: calc(-1 * var(--sangria-der));
}
.piso__foto img { width: 100%; height: 100%; object-fit: cover }

.piso__epi {
  position: absolute;
  left: 0;
  bottom: 0;
  margin: 0;
  padding: .55em .9em;
  background: var(--verde);
  color: var(--cal);
  font-variation-settings: 'wght' 560, 'wdth' 86;
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.piso__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: calc(var(--t) * .42);
}

/* ── 10. LLAMADOS ──────────────────────────────────────────────── */

.llamado {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .92em 1.6em;
  background: var(--verde);
  color: var(--cal);
  font-variation-settings: 'wght' 640, 'wdth' 96;
  font-size: .88rem;
  text-decoration: none;
  border: 1px solid var(--verde);
  border-radius: var(--radio);
  cursor: pointer;
  transition: background-color var(--paso) var(--suave),
              color var(--paso) var(--suave),
              transform var(--paso) var(--suave);
}
.llamado:hover, .llamado:focus-visible {
  background: var(--verde-alto);
  border-color: var(--verde-alto);
  transform: translateY(-2px);
}
.llamado:active { transform: translateY(0) }

/* el secundario es sólo la moldura, sin relleno */
.llamado--linea {
  background: transparent;
  color: var(--verde);
  border-color: var(--linea);
}
.llamado--linea:hover, .llamado--linea:focus-visible {
  background: transparent;
  border-color: var(--verde);
  color: var(--verde);
}
.tramo--verde .llamado {
  background: var(--bronce);
  border-color: var(--bronce);
  color: var(--tinta);
}
.tramo--verde .llamado:hover { background: var(--bronce-alto); border-color: var(--bronce-alto) }

.llamado__flecha { font-variation-settings: 'wght' 600, 'wdth' 100 }

/* ── 11. EL ESTADO EN VIVO ─────────────────────────────────────────
   Es lo único de bronce macizo en toda la página, porque es el
   único dato que se recalcula solo en cada carga. */

.estado {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  margin: 0;
  padding: .62em 1.05em;
  font-variation-settings: 'wght' 560, 'wdth' 92;
  font-size: .84rem;
  align-self: flex-start;
  border-radius: var(--radio);
}
.estado b { font-variation-settings: 'wght' 760, 'wdth' 96 }

.estado--abierto { background: var(--bronce); color: var(--tinta) }
.estado--cerrado {
  background: var(--cal-alta);
  color: var(--tenue);
  border: 1px solid var(--linea);
}
.tramo--verde .estado--cerrado { background: transparent; color: var(--verde-texto) }

.estado__punto {
  width: .55em;
  height: .55em;
  flex: none;
  border-radius: 50%;
  background: currentColor;
}
.estado--abierto .estado__punto { animation: latir 3.6s var(--suave) infinite }

@keyframes latir {
  0%, 66%, 100% { opacity: 1 }
  80%           { opacity: .25 }
}

/* ── 12. RENGLONES DE CARTA ────────────────────────────────────────
   La línea de puntos es la convención de carta de café de toda la
   vida, y acá cumple: liga el nombre con su precio cuando el
   renglón es ancho. Va en bronce, como los herrajes. */

.renglon {
  display: flex;
  align-items: baseline;
  gap: .7em;
  padding-block: .78em;
  text-decoration: none;
  color: inherit;
  border-top: 1px solid var(--linea);
}
.tramo--verde .renglon,
.tramo--verde .horas li { border-top-color: rgba(233, 235, 228, .22) }

.renglon__n {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .6em;
  flex: 0 1 auto;
  font-variation-settings: 'wght' 560, 'wdth' 100;
  font-size: clamp(1rem, 1.4vw, 1.1rem);
}

.renglon__pts {
  flex: 1 1 auto;
  min-width: 1.5rem;
  align-self: baseline;
  border-bottom: 1px dotted var(--bronce);
  opacity: .7;
  transform: translateY(-.28em);
}

.renglon__p {
  flex: none;
  font-variation-settings: 'wght' 680, 'wdth' 94;
  font-size: 1rem;
  white-space: nowrap;
  color: var(--verde);
  transition: color var(--paso) var(--suave);
}
.tramo--verde .renglon__p { color: var(--bronce-alto) }

a.renglon:hover .renglon__n,
a.renglon:focus-visible .renglon__n { text-decoration: underline; text-decoration-color: var(--bronce) }
a.renglon:hover .renglon__p { color: var(--bronce) }

.renglon__nota {
  margin: -.35em 0 .9em;
  font-size: .88rem;
  color: var(--tenue);
  max-width: 58ch;
}
.tramo--verde .renglon__nota { color: var(--verde-texto) }

.lista-limpia { list-style: none; margin: 0; padding: 0 }

/* El filete del título tiene que terminar donde termina la lista;
   si el título cruza todo el ancho y la lista no, no cierran. */
.columna { max-width: 44rem }

.sello {
  padding: .22em .55em;
  background: var(--bronce);
  color: var(--tinta);
  border-radius: var(--radio);
  font-variation-settings: 'wght' 640, 'wdth' 84;
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── 13. TEXTO A DOS COLUMNAS Y CAPITULAR ──────────────────────────
   Dos columnas de verdad con capitular; la otra demo va a una
   columna. La capitular es sólo la letra en bronce, sin caja. */

.doble { columns: 2; column-gap: calc(var(--t) * .8); max-width: 62rem }
.doble p { break-inside: avoid }

.doble > p:first-child::first-letter {
  float: left;
  margin: .06em .12em 0 0;
  font-family: 'Petrona', Georgia, serif;
  font-weight: 600;
  font-style: normal;
  color: var(--bronce-alto);
  font-size: 3.4em;
  line-height: .86;
}

/* ── 14. LAS TRES CIFRAS ───────────────────────────────────────────
   No son tarjetas: son tres datos colgados de la misma moldura. */

.hilada {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 44px);
  margin: calc(var(--t) * .8) 0 0;
  padding-top: calc(var(--t) * .34);
  border-top: 1px solid rgba(233, 235, 228, .28);
}

.hilada dt {
  font-family: 'Petrona', Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 2.7vw, 2.05rem);
  line-height: 1;
  letter-spacing: -.02em;
  margin-bottom: .4em;
}
.hilada dd {
  margin: 0;
  font-size: .86rem;
  line-height: 1.5;
  color: var(--verde-texto);
}

/* ── 15. MOSAICO DE FOTOS ──────────────────────────────────────── */

.mosaico {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: calc(var(--t) * .96);
  gap: clamp(10px, 1.4vw, 18px);
}

.pieza { position: relative; margin: 0; overflow: hidden }
.pieza img { width: 100%; height: 100%; object-fit: cover }

.pieza--ancha { grid-column: span 4; grid-row: span 3 }
.pieza--alta  { grid-column: span 2; grid-row: span 5 }
.pieza--baja  { grid-column: span 4; grid-row: span 2 }

.pieza figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: .5em .85em;
  background: var(--verde);
  color: var(--cal);
  font-variation-settings: 'wght' 560, 'wdth' 86;
  font-size: .68rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* ── 16. CÓMO LLEGAR ───────────────────────────────────────────── */

.visita {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.direccion {
  font-family: 'Petrona', Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0 0 .45em;
}

.contactos { display: grid; gap: .1em; margin-top: calc(var(--t) * .42) }
.contactos .rotulo { margin-top: 1.05em }
.contactos .rotulo:first-child { margin-top: 0 }
.contactos a {
  justify-self: start;
  font-variation-settings: 'wght' 580, 'wdth' 98;
  font-size: 1.05rem;
  text-decoration: underline;
  text-decoration-color: var(--bronce);
  text-decoration-thickness: 2px;
}
.contactos a:hover { color: var(--bronce-alto) }

.horas { list-style: none; margin: 0; padding: 0 }
.horas li {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  padding: .62em 0;
  border-top: 1px solid rgba(233, 235, 228, .22);
  font-size: .98rem;
}
.horas .dia { font-variation-settings: 'wght' 520, 'wdth' 96 }
.horas .rango { font-variation-settings: 'wght' 620, 'wdth' 90 }

/* hoy va en bronce, igual que el estado en vivo: es el mismo dato */
.horas li.hoy .dia,
.horas li.hoy .rango { color: var(--bronce-alto); font-variation-settings: 'wght' 720, 'wdth' 94 }

/* ── 17. EL PIE ────────────────────────────────────────────────── */

.zocalo {
  background: var(--cal-alta);
  border-top: 1px solid var(--linea);
  padding-block: calc(var(--t) * .85);
}

.zocalo__nombre {
  font-family: 'Petrona', Georgia, serif;
  font-weight: 620;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1;
  letter-spacing: -.02em;
  margin: 0 0 .6em;
}

.zocalo__nav {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 2.4vw, 30px);
  margin-bottom: 1.5em;
}
.zocalo__nav a {
  font-variation-settings: 'wght' 560, 'wdth' 92;
  font-size: .86rem;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: .18em;
  transition: border-color var(--paso) var(--suave);
}
.zocalo__nav a:hover { border-bottom-color: var(--bronce) }

.zocalo__legal { font-size: .84rem; color: var(--tenue); margin: 0 }
.zocalo__legal a { text-decoration: underline; text-decoration-color: var(--bronce) }

/* ── 18. CHAPITA DE DEMO Y AVISOS ──────────────────────────────────
   Abajo a la derecha; la de la peluquería va a la izquierda. */

.demo {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  align-items: baseline;
  gap: .45em;
  padding: .7em 1.1em;
  background: var(--verde);
  color: var(--cal);
  font-size: .74rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color var(--paso) var(--suave);
}
.demo b { font-variation-settings: 'wght' 720, 'wdth' 94 }
.demo span { color: var(--verde-texto) }
.demo:hover { background: var(--bronce); color: var(--tinta) }
.demo:hover span { color: var(--tinta) }

.aviso {
  position: fixed;
  left: 50%;
  bottom: calc(var(--t) * .5);
  z-index: 35;
  transform: translate(-50%, 12px);
  max-width: min(92vw, 34rem);
  padding: .9em 1.3em;
  background: var(--verde);
  color: var(--cal);
  font-variation-settings: 'wght' 520, 'wdth' 96;
  font-size: .9rem;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 10px 30px rgba(28, 32, 28, .22);
  transition: opacity var(--paso) var(--suave),
              transform var(--paso) var(--suave);
}
.aviso.ver { opacity: 1; transform: translate(-50%, 0) }

/* ── 19. PÁGINA DE LA CARTA ────────────────────────────────────── */

.carta__cab { padding-block: calc(var(--t) * 1.05) calc(var(--t) * .6) }
.carta__cab p { max-width: 54ch; font-size: 1.06rem; color: var(--tenue) }

/* El lomo sí se pega al scroll, y no contradice a la cabecera: la
   cabecera del sitio sigue siendo estática. Esto es el índice de
   una carta de seis categorías y sirve mientras bajás por ella. */
.carta__lomo {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--cal-alta);
  border-block: 1px solid var(--linea);
}
.indice__in {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.indice__in::-webkit-scrollbar { display: none }
.indice__in a {
  padding: .95em 1.05em;
  color: var(--tenue);
  font-variation-settings: 'wght' 580, 'wdth' 90;
  font-size: .8rem;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--paso) var(--suave),
              border-color var(--paso) var(--suave);
}
.indice__in a:hover { color: var(--tinta) }
.indice__in a[aria-current="true"] {
  color: var(--verde);
  border-bottom-color: var(--bronce);
  font-variation-settings: 'wght' 700, 'wdth' 90;
}

.tanda { padding-block: calc(var(--t) * .85) }
.tanda + .tanda { border-top: 1px solid var(--linea) }

.tanda__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(26px, 4vw, 64px);
  align-items: start;
}
.tanda__cab p { color: var(--tenue); max-width: 40ch; font-size: .96rem }
.tanda__cab img { margin-top: calc(var(--t) * .34) }

/* categoría sin foto ni intro: título arriba, lista a lo ancho */
.tanda--sola .tanda__in { grid-template-columns: minmax(0, 1fr); gap: calc(var(--t) * .3) }
.tanda--sola .tanda__lista { max-width: 46rem }

.carta__nota {
  background: var(--verde);
  color: var(--cal);
  padding-block: calc(var(--t) * .7);
}
.carta__nota p { max-width: 62ch; font-size: .94rem; color: var(--verde-texto) }
.carta__nota strong { color: var(--cal); font-variation-settings: 'wght' 700, 'wdth' 96 }
.carta__nota a { color: var(--cal); text-decoration-color: var(--bronce) }

/* ── 20. ADAPTACIÓN ────────────────────────────────────────────── */

@media (max-width: 900px) {
  .piso {
    grid-template-columns: 1fr;
    gap: 0;
    padding-block: calc(var(--t) * .8) 0;
  }
  .piso__texto { padding-block: 0 calc(var(--t) * .8) }
  /* en el celular la foto sangra por los dos lados */
  .piso__foto {
    min-height: calc(var(--t) * 4.2);
    margin-inline: calc(-1 * var(--margen));
  }
  .visita, .tanda__in { grid-template-columns: 1fr }
  .doble { columns: 1 }
  .mosaico { grid-template-columns: repeat(4, minmax(0, 1fr)) }
  .pieza--ancha { grid-column: span 4; grid-row: span 3 }
  .pieza--alta  { grid-column: span 2; grid-row: span 3 }
  .pieza--baja  { grid-column: span 2; grid-row: span 3 }
  .pieza figcaption { font-size: .62rem; padding: .42em .62em }
}

@media (max-width: 620px) {
  .chapa__nav { width: 100%; margin-inline-start: 0; gap: 16px }
  .chapa__hoy { padding-inline-start: 0; border-inline-start: 0 }
  .hilada { grid-template-columns: 1fr; gap: clamp(16px, 4vw, 26px) }
  .piso__acciones { flex-direction: column; align-items: stretch }
  .llamado { justify-content: center }
  .demo { font-size: .68rem; padding: .6em .85em }
}

/* ── 21. MOVIMIENTO ────────────────────────────────────────────────
   No hay apariciones al scrollear, a propósito: la otra demo las
   tiene y ésta no. Se mueve lo que tocás, y el dato que cambia. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .llamado:hover, .llamado:focus-visible { transform: none }
}

@media (prefers-contrast: more) {
  :root { --tenue: #3B423A; --linea: #9BA396 }
}

@media print {
  .demo, .aviso, .saltar, .chapa__nav { display: none }
  body, .tramo--verde, .carta__nota { background: #fff; color: #000 }
}