/* Piedra Antigua · Las Garrochas — hoja base.
   Los colores salen de la etiqueta: teal del logotipo, papel crema, tinta del
   grabado. El tema oscuro no cambia de familia cromática: oscurece el papel.
   Ver MARCA-Y-VOZ.md §1.

   La página se lee casi siempre en un celular, de pie, después de escanear un
   QR. Todo está dimensionado para esa mano, no para un escritorio. */

/* ---------------------------------------------------------------- tokens */
:root {
  --papel:        #f4efe5;
  --papel-2:      #eae2d3;
  --papel-3:      #ded4c1;
  --tinta:        #1f1e1b;
  --tinta-suave:  #57534a;
  --teal:         #127878;
  --teal-fuerte:  #0d5f5f;
  --sobre-teal:   #ffffff;
  --borde:        #d6cbb6;
  /* Acento cálido para el fuego, que es de lo que habla toda la página. Sale
     del naranja del agave de la etiqueta de pechuga, no de una paleta nueva. */
  --lumbre:       #8e5419;
  --error:        #a3323f;
  --sombra:       0 1px 2px rgba(31, 30, 27, .06), 0 8px 24px rgba(31, 30, 27, .06);

  --ancho:        68rem;
  --ancho-angosto: 40rem;
  --ritmo:        clamp(3.25rem, 8vw, 6rem);

  /* [PENDIENTE] Sustituir por las fuentes locales con preload. Mientras sean
     stacks del sistema, el sitio se ve distinto en cada teléfono. */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --papel:       #17181a;
    --papel-2:     #1f2124;
    --papel-3:     #2a2d31;
    --tinta:       #ece7dd;
    --tinta-suave: #a49d91;
    --teal:        #2fa5a3;
    --teal-fuerte: #3dbcb9;
    /* Sobre el teal claro del tema oscuro, el blanco solo da 2.99:1. */
    --sobre-teal:  #12252a;
    --borde:       #33363b;
    --lumbre:      #d37d25;
    --error:       #e2707c;
    --sombra:      0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
  }
}

:root[data-tema="oscuro"] {
  --papel:       #17181a;
  --papel-2:     #1f2124;
  --papel-3:     #2a2d31;
  --tinta:       #ece7dd;
  --tinta-suave: #a49d91;
  --teal:        #2fa5a3;
  --teal-fuerte: #3dbcb9;
  --sobre-teal:  #12252a;
  --borde:       #33363b;
  --lumbre:      #d37d25;
  --error:       #e2707c;
  --sombra:      0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
/* hidden siempre gana, aunque la clase del elemento le ponga display. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 clamp(1rem, .97rem + .16vw, 1.075rem)/1.65 var(--sans);
  padding-bottom: env(safe-area-inset-bottom);
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
  text-wrap: balance;
}

h2 { font-size: clamp(1.6rem, 1.25rem + 1.6vw, 2.4rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--teal-fuerte); }

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

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 2px;
}

.salto {
  position: absolute; left: -9999px;
  background: var(--teal); color: var(--sobre-teal);
  padding: .7rem 1.1rem; z-index: 100; border-radius: 0 0 6px 0;
}
.salto:focus { left: 0; top: 0; }

/* ---------------------------------------------------------------- estructura */
.envoltura {
  width: min(100% - 2.5rem, var(--ancho));
  margin-inline: auto;
}
.envoltura--angosta { width: min(100% - 2.5rem, var(--ancho-angosto)); }

.seccion { padding-block: var(--ritmo); }
.seccion--maestro { background: var(--papel-2); }
.seccion--objeciones { border-top: 1px solid var(--borde); }

.letra-chica { font-size: .85rem; color: var(--tinta-suave); }

/* ---------------------------------------------------------------- encabezado */
.encabezado {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  width: min(100% - 2.5rem, var(--ancho));
  margin-inline: auto;
  padding-block: 1.25rem;
}
.encabezado__acciones { display: flex; align-items: center; gap: .6rem; }

/* ---------------------------------------------------------------- marca */
/* Los dos elementos del logo real (ver MARCA-Y-VOZ.md §1) se sirven por
   separado a propósito: el bloque teal funciona igual en los dos temas, pero
   el grabado es tinta negra y en oscuro hay que invertirlo. */
.marca-bloque { display: block; height: 3.9rem; width: auto; }
.encabezado--minimo .marca-bloque { height: 3rem; }

.monolito { display: block; width: auto; }
:root[data-tema="oscuro"] .monolito { filter: invert(1); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .monolito { filter: invert(1); }
}

/* Lockup completo: bloque arriba, monolito abajo, como en la etiqueta.
   Las proporciones son las del original (bloque 239 de ancho, piedra 189). */
.marca-lockup {
  --bloque: 8.5rem;
  display: grid; justify-items: center; gap: .15rem;
  margin: 0 0 2rem;
}
.marca-lockup .marca-bloque { height: auto; width: var(--bloque); }
.marca-lockup .monolito     { width: calc(var(--bloque) * 189 / 239); }

.logotipo {
  display: block;
  font-family: var(--serif);
  font-size: 1.3rem;
  font-variant-caps: small-caps;
  letter-spacing: .1em;
  color: var(--teal);
}
.logotipo__bajada {
  display: block;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
/* EN / ES. Segmentado y siempre a la vista: un huésped mexicano no tiene por
   qué navegar en inglés porque su teléfono está configurado así. */
.idiomas {
  display: inline-flex;
  border: 1px solid var(--borde);
  border-radius: 2px;
  overflow: hidden;
  font-size: .8rem;
  letter-spacing: .08em;
}
.idiomas__opcion {
  display: grid; place-items: center;
  min-width: 2.75rem; min-height: 2.4rem;
  padding: 0 .6rem;
  color: var(--tinta-suave);
  text-decoration: none;
}
.idiomas__opcion + .idiomas__opcion { border-left: 1px solid var(--borde); }
.idiomas__opcion:hover { color: var(--teal); }
.idiomas__opcion[aria-current] { background: var(--teal); color: var(--sobre-teal); }

.tema-boton {
  width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center;
  border: 1px solid var(--borde); border-radius: 50%;
  background: transparent; color: var(--tinta);
  cursor: pointer;
}
.tema-boton__icono {
  width: .95rem; height: .95rem; border-radius: 50%;
  background: var(--tinta);
  box-shadow: inset -.32rem -.12rem 0 0 var(--papel);
}

/* ---------------------------------------------------------------- botones */
.boton {
  display: inline-block;
  background: var(--teal); color: var(--sobre-teal);
  padding: .8rem 1.4rem;
  border: 1px solid var(--teal);
  border-radius: 2px;
  font: 500 .95rem/1 var(--sans);
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease;
}
.boton:hover { background: var(--teal-fuerte); border-color: var(--teal-fuerte); color: var(--sobre-teal); }
.boton--fantasma { background: transparent; color: var(--teal); }
.boton--fantasma:hover { background: transparent; color: var(--teal-fuerte); }
.boton--chico { padding: .55rem 1rem; font-size: .85rem; }
.boton--grande { padding: 1.05rem 2rem; font-size: 1.05rem; }
.boton--bloque { display: block; width: 100%; text-align: center; }

/* ---------------------------------------------------------------- cortesía */
/* La franja del hotel que regaló la botella. Va antes que nada y en teal
   sólido: es el sello de quien te está haciendo el regalo. Se pinta solo
   cuando el código del QR ya tiene alojamiento asignado. */
.cortesia {
  margin: 0;
  background: var(--teal);
  color: var(--sobre-teal);
  text-align: center;
  font-size: .88rem;
  line-height: 1.4;
  padding: .8rem 1.25rem;
}

/* ---------------------------------------------------------------- portada */
.portada { padding-block: clamp(2.5rem, 7vw, 5rem) var(--ritmo); }

.titular {
  font-size: clamp(2.5rem, 1.6rem + 4vw, 4.4rem);
  max-width: 13ch;
  margin-bottom: .3em;
}

/* La segunda mitad del concepto de campaña. Va en serif y en teal porque es
   la promesa, no un subtítulo: es lo que la persona tiene que recordar. */
.promesa {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem);
  line-height: 1.3;
  color: var(--teal);
  max-width: 24ch;
  margin-bottom: 1.2em;
}

.entrada {
  font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem);
  color: var(--tinta-suave);
  max-width: 46ch;
}

.portada__acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.portada__acciones--centradas { justify-content: center; }

.destacado {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
  line-height: 1.5;
}

/* ---------------------------------------------------------------- video */
/* Va dentro de la portada, justo debajo del titular (11-sep). Del ancho del
   video y pegada a la izquierda, sobre el mismo filo que el titular y el texto;
   el pie queda centrado bajo el video. */
.video-figura { margin: 1.5rem 0 2rem; max-width: 22rem; }

.video-maestro {
  display: block;
  width: min(100%, 22rem);
  height: auto;
  margin-inline: auto;
  aspect-ratio: 9 / 16;
  background: var(--papel-3);
  border: 1px solid var(--borde);
  border-radius: 2px;
}

.video-pie {
  margin-top: .75rem;
  text-align: center;
  font-size: .82rem;
  color: var(--tinta-suave);
}

/* ---------------------------------------------------------------- experiencias */
.experiencias {
  list-style: none; margin: 2.5rem 0 0; padding: 0;
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.experiencia {
  display: flex; flex-direction: column;
  background: var(--papel-2);
  border: 1px solid var(--borde);
  border-top: 3px solid var(--teal);
  padding: 1.5rem 1.5rem 1.5rem;
}

/* La hora encabeza cada tarjeta. Leídas en fila —10 am, 1 pm, 4 pm— las tres
   tarjetas son un horario, y eso ordena la elección antes del texto. */
.experiencia__hora {
  font-family: var(--serif);
  font-size: 2rem;
  line-height: 1;
  color: var(--teal);
  margin: 0 0 .6rem;
}

.experiencia__nombre { margin: 0 0 .3rem; font-size: 1.3rem; }

/* La segunda mitad del nombre ("Mezcal & Comida") solo baja de tono: el nombre
   es uno solo y se escribe igual en toda la página. Siempre en su renglón, para
   que las tres tarjetas se vean iguales. */
.experiencia__bajada { display: block; color: var(--tinta-suave); }
.experiencia__lema {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--teal);
  margin-bottom: .8em;
}
.experiencia__texto { color: var(--tinta-suave); font-size: .95rem; }

/* La frase que distingue esta experiencia de las otras dos. Va marcada porque
   es lo que decide la compra. */
.experiencia__aparte {
  font-size: .9rem;
  color: var(--lumbre);
  border-left: 2px solid var(--lumbre);
  padding-left: .7rem;
  margin-top: 1rem;
}

/* Con cuatro tarjetas (Cata Rápida, 29-sep) el auto-fit deja 3 + 1 en
   escritorio; 2 x 2 se lee parejo. En el celular sigue siendo una columna. */
@media (min-width: 40rem) {
  .experiencias { grid-template-columns: repeat(2, 1fr); }
}

.experiencias__entrada {
  font-size: clamp(1.05rem, 1rem + .35vw, 1.2rem);
  color: var(--tinta-suave);
  max-width: 52ch;
}

/* Dónde es, cuando no es en Las Garrochas. Se marca con el lugar, no con
   otro color: sigue siendo una de las cuatro. */
.experiencia__lugar {
  align-self: flex-start;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--teal);
  border: 1px solid var(--teal);
  border-radius: 2px;
  padding: .15rem .45rem;
  margin: 0 0 .7rem;
}

.experiencia__mapa {
  display: block;
  margin-top: .75rem;
  padding-block: .35rem;
  text-align: center;
  font-size: .9rem;
}

/* La diferencia entre las cuatro, arriba de las tarjetas. */
.distincion {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem);
  line-height: 1.45;
  border-left: 3px solid var(--teal);
  padding-left: 1.25rem;
  margin: 2rem 0 0;
  max-width: 52ch;
}

/* Condiciones: letra chica de verdad, sin título y sin adorno. Quien las lee ya
   decidió y solo quiere saber a qué atenerse; no compiten con nada. */
.condiciones {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--borde);
}
.condiciones ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .35rem 1.5rem;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--tinta-suave);
}
.condiciones li { padding-left: 1rem; position: relative; }
.condiciones li::before {
  content: "·"; position: absolute; left: .25rem; color: var(--teal);
}

/* Registro operativo: neutro, tabular, sin adorno. No se mezcla con el copy de
   marca (MARCA-Y-VOZ.md §2). */
.experiencia__datos {
  margin: auto 0 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--borde);
  font-size: .85rem;
}
.experiencia__datos:empty { border-top: 0; padding-top: 0; margin-bottom: 1rem; }
.experiencia__datos > div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .25rem 0;
}
.experiencia__datos dt { color: var(--tinta-suave); }
.experiencia__datos dd { margin: 0; }


/* Marca de dato faltante. Solo se pinta fuera de producción: al huésped nunca
   se le enseña un hueco (WEBDESIGN §6). */
.pendiente {
  display: block;
  font-family: var(--sans);
  font-size: .75rem;
  letter-spacing: .04em;
  color: var(--lumbre);
  border: 1px dashed var(--lumbre);
  border-radius: 2px;
  padding: .2rem .45rem;
  margin: .3rem 0;
}

/* ---------------------------------------------------------------- objeciones */
/* Las dos preguntas que frenan una reserva de grupo. Deliberadamente sobrias:
   aquí se resuelve una duda, no se cuenta una historia. */
.objeciones {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.objecion { border-left: 3px solid var(--teal); padding-left: 1.25rem; }
/* Es un <h2> por jerarquía del documento, pero pesa como un subtítulo: el
   tamaño lo fija aquí y no la etiqueta. */
.objecion__titulo { font-size: 1.1rem; margin-bottom: .35em; }
.objecion p { color: var(--tinta-suave); font-size: .95rem; margin: 0; }

/* ---------------------------------------------------------------- cierre */
.seccion--cierre { background: var(--papel-2); border-top: 1px solid var(--borde); }
.experiencia .boton--bloque { margin-top: auto; }

/* La única anáfora de la página (MARCA-Y-VOZ.md §2). Se compone como letanía
   —líneas sueltas, centradas, en serif— porque es lo que la vuelve deliberada
   en vez de repetitiva. */
.letania {
  list-style: none; margin: 2rem 0; padding: 0;
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(1.4rem, 1.15rem + 1.1vw, 2rem);
  line-height: 1.45;
  color: var(--teal);
}

/* Las tres preguntas que todo el mundo hace, resueltas justo antes del botón. */
.condiciones-linea {
  margin: 0 0 1rem;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--tinta-suave);
}

/* ---------------------------------------------------------------- reserva */
/* Fecha, experiencia y personas antes de abrir WhatsApp. Tres preguntas
   cortas, ninguna obligatoria: el mensaje llega con lo que se contestó. */
.cierre-cta {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--borde);
}
.cierre-cta__texto { color: var(--tinta-suave); }

.reserva__campo { border: 0; margin: 0 0 1.5rem; padding: 0; min-width: 0; }
.reserva__pregunta {
  display: block;
  padding: 0;
  font-size: .85rem;
  color: var(--tinta-suave);
  margin-bottom: .6rem;
}
.reserva__nota { display: block; font-size: .78rem; color: var(--tinta-suave); margin-top: .4rem; }

.reserva__fecha {
  display: block;
  width: 100%;
  max-width: 16rem;
  min-height: 2.9rem;
  padding: .55rem .8rem;
  font: inherit;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: 2px;
  /* Que el calendario nativo respete el tema del sitio, no el del sistema. */
  color-scheme: light;
}
:root[data-tema="oscuro"] .reserva__fecha { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .reserva__fecha { color-scheme: dark; }
}
.reserva__fecha:focus-visible { border-color: var(--teal); }

.reserva__lista { display: grid; gap: .5rem; }
.reserva__chips { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Cada opción es un radio de verdad escondido detrás de su etiqueta: se usa
   con el teclado y con lector de pantalla igual que un radio normal. */
.opcion { position: relative; display: block; cursor: pointer; }
.opcion input {
  position: absolute; opacity: 0;
  width: 1px; height: 1px; margin: 0;
}
.opcion > span {
  display: block;
  min-width: 2.9rem;
  padding: .55rem .8rem;
  text-align: center;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: 2px;
  font-size: .95rem;
  line-height: 1.35;
}
/* Hora a la izquierda y nombre en su columna: si el nombre se parte en dos
   renglones, el segundo no se mete debajo de la hora. */
.opcion--fila > span {
  display: flex; align-items: baseline; gap: .75rem;
  text-align: left; padding: .7rem .9rem;
}
.opcion:hover > span { border-color: var(--teal); }
.opcion input:checked + span {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--sobre-teal);
}
.opcion input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 3px; }

.opcion__hora {
  flex: none;
  min-width: 4.25rem;
  font-family: var(--serif);
  color: var(--teal);
}
.opcion input:checked + span .opcion__hora { color: inherit; }

/* ---------------------------------------------------------------- firma */
/* Cierra en primera persona: el argumento de venta es que hay alguien detrás
   de la botella, y una firma lo dice mejor que un párrafo. */
.firma {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--borde);
  display: grid; gap: .15rem;
}
.firma__nombre {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--tinta);
}
.firma__cargo, .firma__lugar { font-size: .82rem; color: var(--tinta-suave); }

/* ---------------------------------------------------------------- edad */
/* Solo en las páginas que la piden ('edad' => true en su contenido); la
   landing de la experiencia no la lleva desde el 11-sep y la tienda sí la
   llevará. Donde va, se muestra por omisión y el script inline del <head> la
   oculta si ya se verificó: si el JS falla, la puerta queda cerrada, no abierta. */
.portada-edad {
  display: grid; place-items: center;
  position: fixed; inset: 0; z-index: 90;
  background: var(--papel);
  padding: 1.5rem;
  overflow-y: auto;
}
.con-edad body { overflow: hidden; }

.edad-ok .portada-edad { display: none; }
.con-edad.edad-ok body { overflow: visible; }

.portada-edad__caja { width: min(100%, 30rem); text-align: center; }
/* En la puerta, el selector va arriba a la derecha, donde está en el
   encabezado: el mismo lugar antes y después de entrar. */
.portada-edad > .idiomas { position: absolute; top: 1.25rem; right: 1.25rem; }
/* No es un <h1>: el H1 real de la página es el del contenido, y solo puede
   haber uno. Aquí solo se toma su apariencia. */
.portada-edad__titulo {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.6rem);
  line-height: 1.12;
  margin: 0 0 .5em;
}
.portada-edad__botones {
  display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap;
  margin: 2rem 0 1.5rem;
}

/* ---------------------------------------------------------------- legales */
.legal h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }
.legal h2 { font-size: clamp(1.2rem, 1.1rem + .5vw, 1.45rem); margin-top: 2.5rem; }
.legal p { max-width: 60ch; }

/* ---------------------------------------------------------------- pie */
.pie {
  background: var(--papel-2);
  border-top: 1px solid var(--borde);
  padding-block: 3rem 1.5rem;
  margin-top: var(--ritmo);
}
.pie__interior {
  width: min(100% - 2.5rem, var(--ancho));
  margin-inline: auto;
  display: flex; flex-wrap: wrap; gap: 2rem;
  justify-content: space-between;
}
.pie__marca { display: flex; align-items: flex-start; gap: 1rem; }
.monolito--pie { width: 3.25rem; flex: none; opacity: .85; }
.logotipo--pie { margin: 0 0 .2rem; }
.pie__enlaces { display: flex; flex-direction: column; gap: .5rem; font-size: .9rem; }
.pie__moderacion {
  width: min(100% - 2.5rem, var(--ancho));
  margin: 2.5rem auto 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--borde);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

/* ---------------------------------------------------------------- reservar */
/* Formulario de reserva en línea y estado de la reserva (PLAN.md §10). Reusa
   las opciones del cierre (.opcion, .reserva__campo) para que se sienta parte
   de la misma página y no un sistema aparte. */
.reservar h1 { font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem); }
/* Hotel del código ?h= (cartel de recepción): arriba de la entrada */
.reservar .recomendacion { color: var(--teal); font-weight: 600; max-width: 46ch; margin-bottom: .35em; }
.formulario { margin-top: 2rem; }

.campo {
  display: block;
  width: 100%;
  min-height: 2.9rem;
  padding: .55rem .8rem;
  font: inherit;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: 2px;
  color-scheme: light;
}
:root[data-tema="oscuro"] .campo { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .campo { color-scheme: dark; }
}
.campo:focus-visible { border-color: var(--teal); }
.campo[aria-invalid="true"] { border-color: var(--error); }
.campo--corto { max-width: 16rem; }
.campo--mini { max-width: 7rem; }

.reserva__sub { margin-top: 1rem; }
.reserva__pregunta--grupo { font-size: 1rem; color: var(--tinta); }
.campo-error { display: block; font-size: .85rem; color: var(--error); margin-top: .4rem; }
.aviso-error {
  border-left: 3px solid var(--error);
  padding: .7rem 1rem;
  background: var(--papel-2);
  color: var(--tinta);
}
.aviso {
  border-left: 3px solid var(--teal);
  padding: .7rem 1rem;
  background: var(--papel-2);
}

.casilla { display: flex; gap: .65rem; align-items: flex-start; cursor: pointer; }
.casilla input { width: 1.15rem; height: 1.15rem; margin: .2rem 0 0; flex: none; accent-color: var(--teal); }

.opcion__precio { display: block; font-size: .82rem; color: var(--tinta-suave); }
.opcion input:checked + span .opcion__precio { color: inherit; opacity: .85; }
.opcion__libres { font-size: .75rem; opacity: .8; }
.opcion input:disabled + span { opacity: .45; cursor: not-allowed; text-decoration: line-through; }

/* Trampa para bots: fuera de la vista y del orden del teclado. */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.resumen {
  margin: 0 0 1.5rem;
  padding: 1rem 1.1rem;
  background: var(--papel-2);
  border: 1px solid var(--borde);
}
.resumen dl, .ficha { margin: 0; display: grid; gap: .45rem; }
.resumen dl > div, .ficha > div { display: flex; justify-content: space-between; gap: 1rem; }
.resumen dt, .ficha dt { color: var(--tinta-suave); font-size: .9rem; }
.resumen dd, .ficha dd { margin: 0; text-align: right; }
.resumen__hoy { padding-top: .45rem; border-top: 1px solid var(--borde); font-weight: 600; }
.ficha { margin: 1.5rem 0; padding: 1rem 0; border-block: 1px solid var(--borde); }

.reservar__alterno, .experiencia__alterno { font-size: .9rem; margin-top: 1rem; text-align: center; }
.experiencia__alterno { display: block; margin-top: .6rem; }

/* Lo que solo hace falta leer cuando no corre el JavaScript del formulario. */
.js .sin-js { display: none; }

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Pasos del formulario. La numeración es real: se contestan en orden. */
.paso { padding-block: 1.75rem .5rem; border-top: 1px solid var(--borde); }
.paso:first-of-type { border-top: 0; padding-top: .5rem; }
.paso__titulo {
  display: flex; align-items: center; gap: .7rem;
  font-size: 1.35rem; margin-bottom: 1.25rem;
}
.paso__num {
  flex: none; display: grid; place-items: center;
  width: 2rem; height: 2rem; border-radius: 50%;
  font: 600 .95rem/1 var(--sans); letter-spacing: 0;
  color: var(--sobre-teal); background: var(--teal);
}

/* Tarjeta de experiencia: el nombre manda, hora y precio en una sola línea. */
.opcion--exp > span { text-align: left; padding: .85rem 1rem; }
.opcion__nombre { display: block; font-family: var(--serif); font-size: 1.15rem; line-height: 1.25; }
.opcion__meta { display: block; font-size: .85rem; color: var(--tinta-suave); margin-top: .15rem; }
.opcion input:checked + span .opcion__meta { color: inherit; opacity: .9; }

.reserva__turnos { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.opcion--turno > span { padding: .7rem .4rem; }
.opcion__libres { display: block; font-size: .72rem; opacity: .8; margin-top: .1rem; }
.reserva__libres { margin: .5rem 0 0; font-size: .9rem; font-weight: 600; color: var(--teal); }
.reserva__libres:empty { display: none; }

/* Personas: botones grandes a los lados del número. */
.contador { display: flex; align-items: stretch; gap: .5rem; max-width: 13rem; }
.contador__campo { text-align: center; font-size: 1.2rem; font-weight: 600; max-width: 5rem; -moz-appearance: textfield; }
.contador__campo::-webkit-inner-spin-button, .contador__campo::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.contador__boton {
  flex: none; width: 3rem; min-height: 2.9rem;
  font: 400 1.5rem/1 var(--sans); color: var(--teal);
  background: var(--papel); border: 1px solid var(--borde); border-radius: 2px; cursor: pointer;
}
.contador__boton:hover { border-color: var(--teal); }

.casilla--tarjeta {
  padding: .85rem 1rem; border: 1px solid var(--borde); border-radius: 2px; background: var(--papel);
}
.casilla--tarjeta:has(input:checked) { border-color: var(--teal); }
.casilla small { display: block; font-size: .8rem; color: var(--tinta-suave); margin-top: .2rem; }

.resumen__titulo { font-family: var(--serif); font-size: 1.1rem; margin-bottom: .6rem; }
.resumen__hoy dd { font-size: 1.15rem; color: var(--teal); }
.reserva__nota--centro { text-align: center; margin-top: .75rem; }

/* Barra de pago fija, solo en el celular. Deja su lugar al pie para no tapar nada. */
.barra-pago { display: none; }
@media (max-width: 48rem) {
  .barra-pago:not([hidden]) {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    position: fixed; inset: auto 0 0 0; z-index: 80;
    padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
    background: var(--papel); border-top: 1px solid var(--borde);
    box-shadow: 0 -6px 20px rgba(31, 30, 27, .06);
  }
  .barra-pago .boton { padding: .85rem 1.3rem; }
  body:has(.barra-pago) .pie { padding-bottom: 5.5rem; }
}
.barra-pago__monto { display: flex; flex-direction: column; line-height: 1.2; }
.barra-pago__etiqueta { font-size: .78rem; color: var(--tinta-suave); }
.barra-pago__monto strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- boleto */
/* El comprobante como boleto de entrada: cuerpo con qué, cuándo y dónde;
   un corte con muescas; y el talón con el folio y lo que falta pagar. Es la
   única pieza con forma propia de todas las pantallas de reserva. */
.boleto {
  --muesca: 12px;
  margin: 2rem 0 1.5rem;
  background: var(--papel-2);
  border: 1px solid var(--borde);
  border-radius: 6px;
  box-shadow: var(--sombra);
}
.boleto__cuerpo { padding: 1.5rem 1.4rem 1.1rem; border-top: 5px solid var(--teal); border-radius: 6px 6px 0 0; }
.boleto__exp { font-family: var(--serif); font-size: 1.75rem; line-height: 1.1; margin: 0; }
.boleto__bajada { color: var(--tinta-suave); margin: .25rem 0 0; }
.boleto__cuando {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem;
  margin: 1.4rem 0 1.1rem; padding-block: .9rem; border-block: 1px solid var(--borde);
}
.boleto__dia { font-size: 1.05rem; }
.boleto__hora { font-family: var(--serif); font-size: 2.1rem; line-height: 1; color: var(--teal); }
.boleto__datos { display: grid; gap: .55rem; margin: 0; }
.boleto__datos > div { display: flex; justify-content: space-between; gap: 1rem; }
.boleto__datos dt { color: var(--tinta-suave); font-size: .9rem; }
.boleto__datos dd { margin: 0; text-align: right; }
.boleto__recogida dd { font-weight: 600; }

/* El corte: línea punteada y una muesca a cada lado, del color de la página,
   como si el talón se pudiera desprender. */
.boleto { position: relative; overflow: visible; }
.boleto__corte {
  position: relative; height: calc(var(--muesca) * 2);
  margin-inline: calc(var(--muesca) + 4px);
  background: repeating-linear-gradient(90deg, var(--borde) 0 8px, transparent 8px 14px) center / 100% 2px no-repeat;
}
.boleto__corte::before, .boleto__corte::after {
  content: ""; position: absolute; top: 0;
  width: calc(var(--muesca) * 2); height: calc(var(--muesca) * 2);
  background: var(--papel); border: 1px solid var(--borde); border-radius: 50%;
}
.boleto__corte::before { left: calc(var(--muesca) * -2 - 5px); clip-path: inset(0 0 0 50%); }
.boleto__corte::after { right: calc(var(--muesca) * -2 - 5px); clip-path: inset(0 50% 0 0); }
.boleto__talon {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem;
  padding: 1rem 1.4rem 1.3rem;
}
.boleto__talon > div { display: flex; flex-direction: column; }
.boleto__etiqueta { font-size: .78rem; color: var(--tinta-suave); }
.boleto__folio { font: 600 1.1rem/1.2 var(--sans); letter-spacing: .02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.boleto__pago { text-align: right; align-items: flex-end; }
.boleto__pago > span:nth-child(2) { font-size: 1.15rem; font-weight: 600; }
.boleto__saldo { font-size: .85rem; color: var(--lumbre); font-weight: 600; }

.boleto__acciones { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .6rem; }

@media print {
  .encabezado, .pie, .cta-movil, .barra-pago, .boleto__acciones, .salto { display: none !important; }
  .boleto { box-shadow: none; }
}

/* ---------------------------------------------------------------- panel */
/* Herramienta del equipo, no página de venta: densa, legible al sol y con
   todo al alcance del pulgar. En el celular la navegación va abajo. */
.panel__barra {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--borde);
  background: var(--papel-2);
}
.panel__marca { font-family: var(--serif); font-size: 1.3rem; color: var(--tinta); text-decoration: none; }
.panel__salir { display: flex; align-items: baseline; gap: .6rem; margin: 0; }
.enlace-boton {
  background: none; border: 0; padding: .3rem 0; cursor: pointer;
  font: inherit; font-size: .9rem; color: var(--teal); text-decoration: underline; text-underline-offset: .18em;
}
.panel__tabs { display: flex; gap: .25rem; }
.panel__tab {
  display: flex; align-items: center; gap: .35rem;
  padding: .5rem .8rem; border-radius: 2px;
  font-size: .95rem; color: var(--tinta); text-decoration: none;
}
.panel__tab:hover { color: var(--teal); }
.panel__tab--activa { background: var(--papel); color: var(--teal); font-weight: 600; box-shadow: inset 0 -2px 0 var(--teal); }
.panel__mas {
  display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  font: 600 1rem/1 var(--sans); color: var(--sobre-teal); background: var(--teal);
}

@media (max-width: 48rem) {
  .panel__tabs {
    position: fixed; inset: auto 0 0 0; z-index: 80;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0;
    padding: .35rem .5rem calc(.35rem + env(safe-area-inset-bottom));
    background: var(--papel); border-top: 1px solid var(--borde);
    box-shadow: 0 -6px 20px rgba(31, 30, 27, .06);
  }
  .panel__tab { flex-direction: column; justify-content: center; gap: .2rem; padding: .45rem .2rem; font-size: .78rem; text-align: center; min-height: 3.2rem; }
  .panel__tab--activa { background: transparent; box-shadow: inset 0 3px 0 var(--teal); }
  .panel__tab:not(:has(.panel__mas))::before {
    content: ""; width: .45rem; height: .45rem; margin-block: .575rem; border-radius: 50%; background: var(--borde);
  }
  .panel__tab--activa:not(:has(.panel__mas))::before { background: var(--teal); }
  .panel__mas { width: 1.6rem; height: 1.6rem; font-size: 1.2rem; }
  .panel__cuerpo { padding-bottom: 5rem; }
}

.panel__cuerpo { width: min(100% - 2rem, 46rem); margin: 1.25rem auto 4rem; }
.panel__cuerpo h1 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); }
.panel__cuerpo h2 { font-size: 1.2rem; }
.panel__entrar { max-width: 22rem; margin: 3rem auto; }
.panel__buscar { display: flex; gap: .5rem; margin-bottom: 1rem; }
.panel__buscar .campo { flex: 1; min-height: 2.6rem; }
.volver { margin: 0 0 1rem; font-size: .95rem; }
.volver a { text-decoration: none; }

/* Semana: siete días, el elegido en teal; los días con gente se marcan. */
.semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; margin-bottom: 1.25rem; }
.semana__dia {
  display: flex; flex-direction: column; align-items: center; gap: .05rem;
  padding: .4rem .1rem; font-size: .7rem; text-decoration: none;
  color: var(--tinta-suave); border: 1px solid var(--borde); border-radius: 2px; background: var(--papel);
}
.semana__num { font-size: 1.05rem; color: var(--tinta); }
.semana__dia strong { font-size: .8rem; color: var(--tinta-suave); font-weight: 400; }
.semana__dia--con strong { color: var(--teal); font-weight: 700; }
.semana__dia--elegido { background: var(--teal); border-color: var(--teal); }
.semana__dia--elegido, .semana__dia--elegido .semana__num, .semana__dia--elegido strong { color: var(--sobre-teal); }

.agenda__dia { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.agenda__dia h1 { margin: 0; text-align: center; }
.agenda__flecha {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  font-size: 1.8rem; line-height: 1; text-decoration: none;
  border: 1px solid var(--borde); border-radius: 50%; background: var(--papel);
}
.agenda__resumen { margin: .25rem 0 0; text-align: center; font-size: .9rem; color: var(--tinta-suave); }
.agenda__por-cobrar { color: var(--lumbre); font-weight: 600; }

.agenda__bloque { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--borde); }
.agenda__cabeza { display: grid; grid-template-columns: 4.6rem 1fr auto; align-items: baseline; gap: .5rem; }
.agenda__hora { font-family: var(--serif); font-size: 1.15rem; color: var(--teal); white-space: nowrap; }
.agenda__exp { margin: 0; font-size: 1.1rem; }
.agenda__ocupacion { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--teal); }
.agenda__ocupacion--lleno { color: var(--lumbre); }
/* Un horario sin nadie se lee en una línea, sin ocupar media pantalla. */
.agenda__bloque--vacio { padding-top: .6rem; margin-top: .6rem; }
.agenda__bloque--vacio .agenda__hora, .agenda__bloque--vacio .agenda__exp, .agenda__bloque--vacio .agenda__ocupacion { color: var(--tinta-suave); font-weight: 400; }
.agenda__bloque--vacio .agenda__exp { font-size: 1rem; }

.medidor { height: 4px; margin: .6rem 0 0 5.1rem; background: var(--papel-3); border-radius: 2px; overflow: hidden; }
.medidor__barra { display: block; height: 100%; background: var(--teal); }
.medidor__barra--100, .agenda__bloque--cerrado .medidor__barra { background: var(--lumbre); }
.medidor__barra--0 { width: 0%; }
.medidor__barra--5 { width: 5%; }
.medidor__barra--10 { width: 10%; }
.medidor__barra--15 { width: 15%; }
.medidor__barra--20 { width: 20%; }
.medidor__barra--25 { width: 25%; }
.medidor__barra--30 { width: 30%; }
.medidor__barra--35 { width: 35%; }
.medidor__barra--40 { width: 40%; }
.medidor__barra--45 { width: 45%; }
.medidor__barra--50 { width: 50%; }
.medidor__barra--55 { width: 55%; }
.medidor__barra--60 { width: 60%; }
.medidor__barra--65 { width: 65%; }
.medidor__barra--70 { width: 70%; }
.medidor__barra--75 { width: 75%; }
.medidor__barra--80 { width: 80%; }
.medidor__barra--85 { width: 85%; }
.medidor__barra--90 { width: 90%; }
.medidor__barra--95 { width: 95%; }
.medidor__barra--100 { width: 100%; }

.agenda__cerrado { margin: .5rem 0 0 5.1rem; font-size: .88rem; font-weight: 600; color: var(--lumbre); }
.agenda__camioneta { font-size: .88rem; color: var(--tinta-suave); margin: .4rem 0 0 5.1rem; }
.agenda__camioneta--alerta { color: var(--error); font-weight: 600; }
.agenda__lista { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .4rem; }
.agenda__reserva {
  display: flex; gap: .8rem; align-items: center;
  padding: .7rem .8rem; text-decoration: none; color: var(--tinta);
  background: var(--papel-2); border: 1px solid var(--borde); border-radius: 4px;
}
.agenda__reserva:hover { border-color: var(--teal); color: var(--tinta); }
.agenda__personas {
  flex: none; width: 2.6rem; height: 2.6rem; display: grid; place-items: center;
  font: 600 1.1rem/1 var(--sans); background: var(--papel); border: 1px solid var(--borde); border-radius: 50%;
}
.agenda__quien { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.agenda__quien strong { font-weight: 600; }
.agenda__etiquetas { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .3rem; }
.agenda__ir { font-size: 1.6rem; color: var(--tinta-suave); line-height: 1; }
.agenda__agregar { margin-top: 1.5rem; }

.etiqueta {
  display: inline-block; padding: .1rem .45rem;
  font: 500 .72rem/1.4 var(--sans); letter-spacing: .02em;
  border: 1px solid var(--borde); border-radius: 2px; color: var(--tinta-suave);
  vertical-align: middle; background: var(--papel);
}
.etiqueta--saldo { border-color: var(--lumbre); color: var(--lumbre); }
.etiqueta--apartada { border-style: dashed; }
.etiqueta--cancelada, .etiqueta--expirada, .etiqueta--no_se_presento { border-color: var(--error); color: var(--error); }
.etiqueta--pagada, .etiqueta--completada { border-color: var(--teal); color: var(--teal); }

/* Detalle: arriba lo que se necesita en la puerta, luego lo de todos los días,
   y al final lo que casi no se usa. Cancelar va al último y en rojo. */
.tarjeta-reserva {
  padding: 1.2rem 1.2rem 1rem; margin-bottom: 1rem;
  background: var(--papel-2); border: 1px solid var(--borde); border-top: 4px solid var(--teal); border-radius: 4px;
}
.tarjeta-reserva__folio { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin: 0 0 .6rem; font-size: .9rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.tarjeta-reserva__nombre { margin: 0; }
.tarjeta-reserva__exp { margin: .15rem 0 0; color: var(--tinta-suave); }
.tarjeta-reserva__cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: 1rem 0 .25rem; padding-top: .9rem; border-top: 1px solid var(--borde); }
.tarjeta-reserva__cifras > div { display: flex; flex-direction: column; }
.tarjeta-reserva__dato { font-family: var(--serif); font-size: 1.45rem; line-height: 1.1; }
.tarjeta-reserva__dato--saldo { color: var(--lumbre); }
.tarjeta-reserva__recogida { margin: .8rem 0 0; padding: .6rem .75rem; background: var(--papel); border-radius: 2px; font-size: .95rem; }
.tarjeta-reserva__nota { margin: .6rem 0 0; padding: .6rem .75rem; border-left: 3px solid var(--teal); background: var(--papel); font-size: .95rem; }
.tarjeta-reserva__contacto { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .4rem; margin-top: 1rem; }
.tarjeta-reserva__contacto .boton { padding: .7rem .4rem; text-align: center; font-size: .9rem; }

.acciones { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.acciones form { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.acciones--principales { flex-direction: column; }
.acciones--principales form { width: 100%; }
.acciones__par { display: grid !important; grid-template-columns: 1fr 1fr; }
.acciones__par .boton { text-align: center; }
.acciones__grupo { margin: .6rem 0; border: 1px solid var(--borde); border-radius: 4px; background: var(--papel); }
.acciones__grupo summary {
  cursor: pointer; font-weight: 600; padding: .9rem 1rem; list-style: none;
  display: flex; justify-content: space-between; align-items: center;
}
.acciones__grupo summary::-webkit-details-marker { display: none; }
.acciones__grupo summary::after { content: "+"; font-size: 1.3rem; font-weight: 400; color: var(--tinta-suave); }
.acciones__grupo[open] summary::after { content: "−"; }
.acciones__grupo > form, .acciones__grupo > dl { display: grid; gap: .8rem; padding: 0 1rem 1rem; margin: 0; }
.acciones__grupo > form .boton { justify-self: start; }
.acciones__grupo > dl + form { padding-top: .25rem; }
.acciones__grupo--peligro summary { color: var(--error); }
.boton--peligro { background: var(--error); border-color: var(--error); color: #fff; }
.boton--peligro:hover { background: var(--error); border-color: var(--error); filter: brightness(.92); color: #fff; }
.boton--peligro.boton--fantasma { background: transparent; color: var(--error); }
.ficha--suelta { border: 0; padding: 0; margin: 0; }

.bitacora__titulo { margin-top: 2rem; }
.bitacora { list-style: none; padding: 0; display: grid; gap: .6rem; font-size: .9rem; }
.usuario { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; padding: .6rem 0; border-bottom: 1px solid var(--borde); }
.usuario--inactivo { opacity: .55; }
.usuario form { display: grid; gap: .5rem; margin-top: .5rem; }
.panel__exportar { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--borde); display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; }
.panel__exportar h2 { width: 100%; margin: 0; }
.panel .cta-movil { display: none; }
.etiqueta--nota { border-color: var(--teal); color: var(--teal); }
.notas { display: grid; gap: .5rem; }
.notas .boton { justify-self: start; }
.cierre { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--borde); }
.cierre ul { margin: .3rem 0 0; padding-left: 1.1rem; font-size: .9rem; }
.cierre__alerta { margin: .6rem 0 0; font-size: .88rem; font-weight: 600; color: var(--error); }
.panel textarea.campo { min-height: 5rem; resize: vertical; }
.panel .paso__titulo { font-size: 1.15rem; }

/* ---------------------------------------------------------------- CTA móvil */
/* Reserva su espacio con padding en el pie para no generar CLS ni tapar nada. */
.cta-movil { display: none; }

@media (max-width: 48rem) {
  .cta-movil {
    display: block;
    position: fixed; inset: auto 0 0 0; z-index: 80;
    padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
    background: var(--papel);
    border-top: 1px solid var(--borde);
  }
  .pie { padding-bottom: 5.5rem; }
  .encabezado__acciones .boton--chico { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}