/* Dr. Jonathan Lozano, medicina estética y funcional.

   Primer sitio de otro rubro. No es un gimnasio: no hay sedes, ni clases, ni
   grilla de horarios, y el lenguaje visual va para el otro lado. Donde los
   gimnasios empujan, acá se acompaña: serif, mucho aire, línea de pelo en vez
   de barras, y una paleta cálida de consultorio.

   La paleta está en un bloque solo, para poder cambiarla de una vez si después
   se consigue el logo y se muestrean sus colores. */

:root {
  --papel:      #FBF8F5;
  --papel-alto: #F4EDE6;
  --papel-caja: #FFFFFF;
  --arena:      #E7DCD1;
  --tinta:      #1D1815;
  --tinta-suave:#463C34;
  --gris:       #675C53;
  --gris-tenue: #8A7F75;
  --cobre:      #8F5F2E;
  --cobre-alto: #A97442;
  --noche:      #221C18;
  --linea:      #E3D8CD;

  --curva:  cubic-bezier(.22, .78, .32, 1);
  --rapido: .3s;
  --medio:  .66s;
  --ancho:  1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: hidden; }
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }

body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 17px; line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 600; line-height: 1.08; margin: 0; letter-spacing: -.015em; }
p { margin: 0 0 1em; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; }

.envoltorio { max-width: var(--ancho); margin-inline: auto; padding-inline: 28px; }
.doble { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }

/* barra */

.barra {
  position: sticky; top: 0; z-index: 40;
  background: rgba(251, 248, 245, .86); backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: background var(--rapido) var(--curva), border-color var(--rapido) var(--curva);
}
.barra--compacta { background: rgba(251, 248, 245, .97); border-bottom-color: var(--linea); }
.barra__interior { display: flex; align-items: center; gap: 18px; min-height: 76px; transition: min-height var(--rapido) var(--curva); }
.barra--compacta .barra__interior { min-height: 62px; }

.marca { display: flex; align-items: baseline; gap: 10px; text-decoration: none; margin-right: auto; }
.marca__nombre { font-family: 'Fraunces', Georgia, serif; font-size: 1.16rem; font-weight: 600; letter-spacing: -.01em; }
.marca__zona { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gris); }

.barra__enlaces { display: flex; gap: 26px; }
.enlace-barra { position: relative; text-decoration: none; font-size: .88rem; letter-spacing: .02em; color: var(--tinta-suave); transition: color var(--rapido) var(--curva); }
.enlace-barra::after {
  content: ''; position: absolute; left: 0; bottom: -5px; width: 100%; height: 1px;
  background: var(--cobre); transform: scaleX(0); transform-origin: left;
  transition: transform var(--rapido) var(--curva);
}
.enlace-barra:hover { color: var(--tinta); }
.enlace-barra:hover::after { transform: scaleX(1); }

.barra__acciones { display: flex; align-items: center; gap: 10px; }

/* botones. El borde llega a 3:1 contra el fondo, o no se lee como botón. */

.boton {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 24px; border-radius: 2px;
  font-size: .92rem; font-weight: 600; letter-spacing: .015em;
  text-decoration: none; cursor: pointer;
  border: 1px solid transparent; background: transparent; font-family: inherit;
  white-space: nowrap;
  transition: background var(--rapido) var(--curva), color var(--rapido) var(--curva),
              border-color var(--rapido) var(--curva), transform var(--rapido) var(--curva);
}
.boton--fuerte { background: var(--tinta); color: var(--papel); }
.boton--fuerte:hover { background: var(--cobre); transform: translateY(-1px); }
.boton--linea { border-color: var(--gris-tenue); color: var(--tinta-suave); }
.boton--linea:hover { border-color: var(--cobre); color: var(--cobre); transform: translateY(-1px); }
.boton--chico { padding: 9px 16px; font-size: .84rem; }
.boton--grande { padding: 17px 32px; font-size: 1.02rem; }

/* portada */

/* El hero va en dos columnas: el texto sobre papel sólido y la foto en un
   panel al costado. Antes la foto iba a sangre con un velo encima y el texto
   arriba: por más que el contraste diera bien, el texto competía con la foto y
   con el efecto de fondo, y se leía mal. Separarlos lo resuelve de raíz y no
   hay opacidad que ajustar. */
.portada {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  min-height: min(88vh, 780px);
  border-bottom: 1px solid var(--linea);
}
.portada__panel { position: relative; align-self: stretch; overflow: hidden; }
.portada__foto {
  position: absolute; inset: 0;
  background: url('../img/portada.jpg') center 38% / cover no-repeat;
  filter: saturate(.94) contrast(1.03);
}
/* un degradado finito sólo en el borde, para que la foto no corte con un filo */
.portada__panel::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, var(--papel) 0%, rgba(251,248,245,0) 16%);
}
.particulas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.8s var(--curva); pointer-events: none; z-index: 1; }
.particulas--vivo { opacity: 1; }

.portada__interior {
  position: relative; z-index: 3;
  padding: 96px 56px 88px max(28px, calc((100vw - var(--ancho)) / 2 + 28px));
  justify-self: start; width: 100%;
}

.rotulo { font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--cobre); margin: 0 0 22px; }

.titulo { font-size: clamp(2.9rem, 7vw, 5.1rem); margin: 0 0 26px; }
.titulo__linea { display: block; overflow: visible; }
.titulo__masa { display: inline-block; }
/* La segunda línea se distingue por la itálica, no por el color: el cobre
   sobre la piel cálida de la foto tiene casi el mismo tono y se ve embarrado.
   El cobre queda para el rótulo y los acentos, que van sobre papel casi opaco. */
.titulo__masa--italica { font-style: italic; font-weight: 500; }
.letra { display: inline-block; }
.palabra { display: inline-block; white-space: nowrap; }

.portada__lema { font-family: 'Fraunces', Georgia, serif; font-size: clamp(1.15rem, 2.4vw, 1.5rem); font-weight: 500; margin: 0 0 14px; }
.portada__sub { color: var(--gris); max-width: 52ch; margin: 0 0 34px; }
.portada__acciones { display: flex; flex-wrap: wrap; gap: 12px; }

/* respaldo si no corre GSAP: lo que se ve al cargar no puede depender de nada */
html:not(.gsap) .titulo__masa,
html:not(.gsap) .rotulo,
html:not(.gsap) .portada__lema,
html:not(.gsap) .portada__sub,
html:not(.gsap) .portada__acciones > * { opacity: 1; }

/* banda corrida */

.banda { overflow: hidden; border-block: 1px solid var(--linea); background: var(--papel-alto); padding: 15px 0; }
.banda__via { display: flex; gap: 30px; width: max-content; animation: desfilar calc(var(--cuantas, 6) * 7s) linear infinite; }
.banda:hover .banda__via { animation-play-state: paused; }
.banda__via span { font-family: 'Fraunces', Georgia, serif; font-size: .92rem; font-style: italic; color: var(--tinta-suave); white-space: nowrap; }
.banda__via i { color: var(--cobre); font-style: normal; font-size: .6rem; align-self: center; }
@keyframes desfilar { to { transform: translateX(-50%); } }

/* secciones */

.seccion { padding: 96px 0; }
.seccion--arena { background: var(--papel-alto); }
.seccion__titulo { font-size: clamp(1.9rem, 4vw, 2.9rem); margin-bottom: 14px; }
.seccion__titulo em { color: var(--cobre); font-style: italic; }
.seccion__bajada { color: var(--gris); max-width: 58ch; margin-bottom: 42px; }

/* lo que hace: dos áreas, las dos declaradas por él */

.areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px; align-items: stretch; }
.area {
  display: flex; flex-direction: column;
  background: var(--papel-caja); border: 1px solid var(--linea); border-radius: 2px;
  padding: 34px 32px;
  transition: border-color var(--medio) var(--curva), transform var(--medio) var(--curva);
}
.area:hover { border-color: var(--cobre); transform: translateY(-3px); }
.area__n { font-family: 'Fraunces', Georgia, serif; font-size: .9rem; font-style: italic; color: var(--cobre); margin-bottom: 16px; }
.area h3 { font-size: 1.35rem; margin-bottom: 10px; }
.area p { color: var(--gris); font-size: .96rem; margin: 0; }

/* quién es: la credencial, en su voz */

.credencial { display: grid; gap: 0; }
.credencial li { list-style: none; display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--linea); }
.credencial li:first-child { border-top: 1px solid var(--linea); }
.credencial__n { font-family: 'Fraunces', Georgia, serif; font-style: italic; color: var(--cobre); font-size: .95rem; min-width: 2.4em; }
.credencial__q { font-family: 'Fraunces', Georgia, serif; font-size: 1.1rem; }
.credencial__d { display: block; color: var(--gris); font-size: .93rem; margin-top: 4px; }

/* La foto acompaña el alto de la columna de texto, en vez de quedar como un
   bloque bajo al medio. Se recorta con object-fit y no se deforma. */
.retrato {
  border-radius: 2px; border: 1px solid var(--linea);
  align-self: stretch; height: 100%; min-height: 420px;
  object-fit: cover; object-position: center 45%;
}

/* galería: cuadrícula con un hueco, que lleva una línea de texto */

.grilla-hueco { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.grilla-hueco figure { margin: 0; position: relative; overflow: hidden; border-radius: 2px; }
.grilla-hueco img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--curva); }
.grilla-hueco figure:hover img { transform: scale(1.045); }
.grilla-hueco__hueco {
  display: flex; align-items: center; padding: 26px;
  border: 1px solid var(--linea); border-radius: 2px; background: var(--papel-caja);
}
.grilla-hueco__hueco p { font-family: 'Fraunces', Georgia, serif; font-style: italic; color: var(--tinta-suave); font-size: 1.02rem; margin: 0; }
.mira { position: absolute; inset: 0; border: 0; background: transparent; cursor: zoom-in; }

/* visor */

.visor { border: 0; padding: 0; background: transparent; max-width: min(92vw, 900px); }
.visor::backdrop { background: rgba(29, 24, 21, .82); backdrop-filter: blur(4px); }
.visor__img { width: 100%; height: auto; border-radius: 2px; }
.visor__cerrar {
  position: absolute; top: 12px; right: 12px; width: 40px; height: 40px;
  border: 1px solid rgba(251,248,245,.5); background: rgba(29,24,21,.6); color: var(--papel);
  border-radius: 2px; cursor: pointer; font-size: 1.1rem; line-height: 1;
}
.visor__pie { color: var(--papel); font-size: .88rem; margin-top: 10px; text-align: center; }

/* cierre */

.cierre { background: var(--noche); color: var(--papel); padding: 104px 0; text-align: center; }
.cierre h2 { font-size: clamp(2rem, 4.6vw, 3.1rem); margin-bottom: 16px; }
.cierre h2 em { color: var(--cobre-alto); font-style: italic; }
.cierre p { color: #C8BCB1; max-width: 50ch; margin: 0 auto 34px; }
.cierre .boton--fuerte { background: var(--papel); color: var(--noche); }
.cierre .boton--fuerte:hover { background: var(--cobre-alto); color: var(--papel); }

/* pie */

.pie { background: var(--noche); color: #C8BCB1; padding: 34px 0; border-top: 1px solid rgba(251,248,245,.1); }
.pie__interior { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; font-size: .86rem; }
.pie a { color: var(--papel); text-decoration: none; }
.pie a:hover { text-decoration: underline; }
.pie__redes { display: flex; gap: 10px; }

/* logos de redes: SVG en línea con currentColor, así siguen la paleta */

.red {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 2px;
  border: 1px solid var(--linea); color: var(--tinta-suave);
  transition: color var(--rapido) var(--curva), border-color var(--rapido) var(--curva), transform var(--rapido) var(--curva);
}
.red:hover { color: var(--cobre); border-color: var(--cobre); transform: translateY(-2px); }
.pie .red { border-color: rgba(251,248,245,.24); color: var(--papel); }
.pie .red:hover { color: var(--cobre-alto); border-color: var(--cobre-alto); }
.glifo { width: 18px; height: 18px; fill: currentColor; }
.boton .glifo { width: 16px; height: 16px; flex: 0 0 auto; }

/* precio de un área: nace vacío y con hidden, así que si no hay precios no se
   dibuja nada. Con margin-top auto quedan a la misma altura entre tarjetas. */
.precio {
  align-self: flex-start; margin-top: auto;
  font-family: 'Fraunces', Georgia, serif; font-size: .96rem; font-weight: 600;
  color: var(--papel); background: var(--cobre);
  padding: 6px 14px; border-radius: 2px;
  font-variant-numeric: tabular-nums;
}
.area .precio { margin-top: 20px; }

/* video de portada: la foto de arriba queda de poster */
.portada__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; opacity: 0; transition: opacity 1.1s var(--curva); }
.portada__video--vivo { opacity: 1; }

/* entradas */

[data-anim] { will-change: transform, opacity; }

/* pantalla chica */

@media (max-width: 900px) {
  .doble { grid-template-columns: 1fr; gap: 40px; }
  .retrato { min-height: 260px; max-height: 340px; }
  .grilla-hueco { grid-template-columns: repeat(2, 1fr); }
  /* en una columna la foto va arriba y el texto abajo, sobre papel */
  .portada { grid-template-columns: 1fr; min-height: 0; }
  .portada__panel { order: -1; min-height: 46vh; }
  .portada__panel::before { background: linear-gradient(180deg, rgba(251,248,245,0) 72%, var(--papel) 100%); }
  .portada__interior { max-width: none; padding: 44px 24px 64px; justify-self: stretch; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .seccion { padding: 68px 0; }
  .envoltorio { padding-inline: 20px; }
  .barra__enlaces { display: none; }
  .marca__zona { display: none; }
  .marca__nombre { white-space: nowrap; }
  .wa-fijo { display: flex; }
  .mapa__lienzo { height: 320px; }
  .ficha--cerca { margin-left: 0; }
  .turnos { padding: 22px 18px; }
  .turnos__datos { grid-template-columns: 1fr; }
  .turnos__resumen { grid-template-columns: 1fr; gap: 0; }
  .turnos__resumen dd { border-top: 0; padding-top: 0; }
  .grilla-hueco { grid-template-columns: 1fr; }
  .grilla-hueco__hueco { padding: 22px; }
  .area { padding: 26px 22px; }
  .credencial li { grid-template-columns: 1fr; gap: 6px; }
  .cierre { padding: 76px 0; }
}

/* todo el movimiento se apaga si el sistema lo pide. No es opcional. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
  .banda__via { animation: none; }
  .particulas { display: none; }
  [data-anim] { opacity: 1 !important; transform: none !important; filter: none !important; }
  .grilla-hueco figure:hover img { transform: none; }
}

/* tabla de horarios. La sección nace oculta y sólo aparece si se cargan. */
.horario { width: 100%; border-collapse: collapse; max-width: 620px; }
.horario th, .horario td { text-align: left; padding: 17px 0; border-bottom: 1px solid var(--linea); font-weight: 400; }
.horario th { font-family: 'Fraunces', Georgia, serif; font-size: 1.02rem; }
.horario td { color: var(--gris); font-variant-numeric: tabular-nums; }

/* botón fijo de WhatsApp: sólo en celular, que es donde no hay barra visible */
.wa-fijo {
  display: none; position: fixed; right: 16px; bottom: 16px; z-index: 50;
  align-items: center; gap: 9px; padding: 13px 18px; border-radius: 2px;
  background: var(--tinta); color: var(--papel); text-decoration: none;
  font-size: .9rem; font-weight: 600;
  box-shadow: 0 14px 34px -14px rgba(29, 24, 21, .5);
}
.wa-fijo .glifo { width: 19px; height: 19px; }

/* dónde atiende. Las acciones van con margin-top auto para que los botones
   queden alineados aunque una tarjeta tenga una línea más que la otra. */
.sedes { display: grid; align-items: stretch; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; margin-bottom: 34px; }
.sede {
  display: flex; flex-direction: column;
  background: var(--papel-caja); border: 1px solid var(--linea); border-radius: 2px;
  padding: 30px 28px;
  transition: border-color var(--medio) var(--curva);
}
.sede:hover { border-color: var(--cobre); }
.sede__nombre { font-size: 1.3rem; margin-bottom: 8px; }
.sede__dato { color: var(--gris); font-size: .95rem; margin: 0 0 4px; }
.sede__dato--tenue { color: var(--gris-tenue); font-size: .87rem; font-style: italic; }
.sede__acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 20px; }

.mapa { position: relative; }
.mapa__mando { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ficha {
  padding: 9px 15px; border-radius: 2px; cursor: pointer; font-size: .84rem; font-weight: 500;
  background: transparent; border: 1px solid var(--linea); color: var(--tinta-suave);
  transition: background var(--rapido) var(--curva), color var(--rapido) var(--curva), border-color var(--rapido) var(--curva);
}
.ficha:hover { border-color: var(--cobre); color: var(--cobre); }
.ficha.activo { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.ficha--cerca { margin-left: auto; }
.mapa__lienzo {
  height: 460px; border: 1px solid var(--linea); border-radius: 2px; overflow: hidden;
  background: var(--papel-alto);
}
.mapa__lienzo .leaflet-tile-pane { filter: grayscale(.62) sepia(.14) brightness(1.03) contrast(.94); }
.mapa__salida { margin: 14px 0 0; color: var(--gris); font-size: .93rem; }
.mapa__salida strong { color: var(--tinta); }
.mapa__salida a { color: var(--cobre); }

.chincheta { position: relative; }
.chincheta__punto { position: absolute; inset: 0; margin: auto; width: 11px; height: 11px; border-radius: 50%; background: var(--cobre); box-shadow: 0 0 0 3px rgba(251,248,245,.9); }
.chincheta__aro { position: absolute; inset: -9px; border: 1px solid var(--cobre); border-radius: 50%; opacity: .5; }
.chincheta__texto {
  position: absolute; left: 50%; top: 18px; transform: translateX(-50%);
  white-space: nowrap; font-size: .74rem; font-weight: 600; letter-spacing: .04em;
  color: var(--tinta); background: rgba(251,248,245,.94); padding: 2px 7px; border-radius: 2px;
  border: 1px solid var(--linea);
}
.chincheta--yo .chincheta__punto { background: var(--tinta); }
.chincheta--yo .chincheta__aro { border-color: var(--tinta); }
.leaflet-popup-content-wrapper { border-radius: 2px; font-family: 'Inter', system-ui, sans-serif; }
.leaflet-popup-content { font-size: .9rem; line-height: 1.5; }
.leaflet-popup-content a { color: var(--cobre); }

/* armador de turnos. Una sola pantalla: los campos a la vista, no cuatro pasos
   encadenados. Cada paso encadenado es un lugar donde alguien abandona. */
.turnos { background: var(--papel-caja); border: 1px solid var(--linea); border-radius: 2px; padding: 30px 32px; }
.turnos__form { display: grid; gap: 26px; }
.turnos__campo { display: grid; gap: 10px; }
.turnos__etiqueta { font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }

.turnos__opciones { display: flex; flex-wrap: wrap; gap: 10px; }
.turnos__opcion {
  display: grid; gap: 2px; text-align: left; cursor: pointer;
  padding: 12px 18px; border-radius: 2px;
  background: transparent; border: 1px solid var(--linea); color: var(--tinta);
  transition: border-color var(--rapido) var(--curva), background var(--rapido) var(--curva);
}
.turnos__opcion:hover { border-color: var(--cobre); }
.turnos__opcion.activo { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.turnos__opcion-txt { font-size: .96rem; font-weight: 600; }
.turnos__opcion-pie { font-size: .8rem; color: var(--gris); }
.turnos__opcion.activo .turnos__opcion-pie { color: var(--arena); }

.turnos__tira { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.turnos__dia {
  flex: 0 0 auto; display: grid; gap: 1px; justify-items: center; cursor: pointer;
  width: 58px; padding: 10px 0; border-radius: 2px;
  background: transparent; border: 1px solid var(--linea); color: var(--tinta);
  transition: border-color var(--rapido) var(--curva), background var(--rapido) var(--curva);
}
.turnos__dia:hover { border-color: var(--cobre); }
.turnos__dia.activo { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.turnos__dia-sem { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.turnos__dia.activo .turnos__dia-sem { color: var(--arena); }
.turnos__dia-num { font-family: 'Fraunces', Georgia, serif; font-size: 1.2rem; font-weight: 600; }

.turnos__horas { display: flex; flex-wrap: wrap; gap: 8px; }
.turnos__hora {
  cursor: pointer; padding: 10px 15px; border-radius: 2px;
  font-variant-numeric: tabular-nums; font-size: .93rem; font-weight: 500;
  background: transparent; border: 1px solid var(--linea); color: var(--tinta);
  transition: border-color var(--rapido) var(--curva), background var(--rapido) var(--curva);
}
.turnos__hora:hover { border-color: var(--cobre); }
.turnos__hora.activo { background: var(--cobre); border-color: var(--cobre); color: var(--papel); }

.turnos__datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; }
.turnos__entrada {
  width: 100%; padding: 12px 14px; font: inherit; font-size: .96rem;
  color: var(--tinta); background: var(--papel);
  border: 1px solid var(--linea); border-radius: 2px;
}
.turnos__entrada:focus { outline: 0; border-color: var(--cobre); box-shadow: 0 0 0 3px rgba(143, 95, 46, .18); }

.turnos__vacio { color: var(--gris); font-size: .94rem; margin: 0; }
.turnos__estado { margin: 0; font-size: .92rem; color: var(--gris); }
.turnos__estado--mal { color: #A32A1E; font-weight: 600; }
.turnos__pie { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }

.turnos__listo { display: grid; gap: 16px; }
.turnos__sello { margin: 0; font-size: .74rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--cobre); }
.turnos__listo-titulo { font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
.turnos__resumen { display: grid; grid-template-columns: auto 1fr; gap: 0 22px; margin: 0; }
.turnos__resumen dt { padding: 13px 0; border-top: 1px solid var(--linea); font-size: .84rem; color: var(--gris); }
.turnos__resumen dd { padding: 13px 0; border-top: 1px solid var(--linea); margin: 0; font-weight: 600; }
.turnos__nota { margin: 0; color: var(--gris); font-size: .94rem; }
.turnos__acciones { display: flex; flex-wrap: wrap; gap: 10px; }