/* 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 {
  /* negro, gris y blanco, como el logo del doctor (27/9/2026). Antes era
     papel calido y cobre. --marca es el acento: casi negro. */
  --papel:      #FFFFFF;
  --papel-alto: #F3F3F3;
  --papel-caja: #FFFFFF;
  --arena:      #E4E4E4;
  --tinta:      #111111;
  --tinta-suave:#3A3A3A;
  --gris:       #5F5F5F;
  --gris-tenue: #767676;
  --marca:      #1F1F1F;
  --marca-alto: #4A4A4A;
  --noche:      #111111;
  --linea:      #E1E1E1;

  --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(255, 255, 255, .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(255, 255, 255, .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; }

/* min-width:0 en los tres para que el nombre se pueda achicar (con el
   text-overflow de abajo) en vez de empujar "Pedir turno" fuera de la
   pantalla: html/body tienen overflow-x:hidden (para no dejar scroll
   horizontal de nada), asi que lo que no entra no se ve -ni con scroll-, se
   corta directo. En un iPhone chico "Dr. Jonathan Lozano" sin poder achicarse
   hacia el boton (27/9, reportado por un visitante real). */
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; min-width: 0; }
.marca img { width: 36px; height: 36px; border-radius: 2px; object-fit: cover; flex: 0 0 auto; }
.marca__texto { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
/* la misma fuente que .titulo (27/9): la "J" de imprenta de Fraunces a este
   tamaño se ve con un gancho marcado que el cliente leyó como "chueca". Acá
   el nombre es mas chico, pero es la misma letra "J" del mismo apellido, asi
   que tiene el mismo problema si se deja en Fraunces. */
/* max-width explicito ademas de min-width:0 en los contenedores: en un
   iPhone con Chrome (motor igual a Safari, pero reportado distinto -
   Emiliano, 27/9) el achique por flex-shrink solo no alcanzaba y el nombre
   llegaba a tocar el icono de al lado. Con un limite fijo en por ciento del
   ancho de pantalla, el texto SIEMPRE tiene que entrar en ese espacio y el
   "…" se activa sin depender de como cada motor resuelva el flex-shrink. */
.marca__nombre { font-family: 'Playfair Display', Georgia, serif; font-size: 1.16rem; font-weight: 600; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; max-width: 44vw; white-space: nowrap; }
.marca__zona { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gris); }

.barra__enlaces { display: flex; gap: 26px; }
/* nunca se achican: es mejor que el nombre se corte con "…" a que el botón
   de pedir turno -lo unico realmente urgente del header- se achique o, peor,
   quede afuera de la pantalla sin poder hacerle scroll. */
.barra__acciones { flex-shrink: 0; }
.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(--marca); 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(--marca); transform: translateY(-1px); }
.boton--linea { border-color: var(--gris-tenue); color: var(--tinta-suave); }
.boton--linea:hover { border-color: var(--marca); color: var(--marca); 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(255,255,255,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(--marca); margin: 0 0 22px; }

.titulo { font-family: 'Playfair Display', Georgia, serif; 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(--marca); 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(--marca); font-style: italic; }
.seccion__bajada { color: var(--gris); max-width: 58ch; margin-bottom: 42px; }

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

/* qué hago: los servicios, en dos columnas por grupo. La lista la escribe
   el HTML y js/turnos.js la reemplaza por la de la agenda, con la descripcion
   que el doctor cargue en el panel. */
.servicios { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 34px 44px; align-items: start; }
.servicios__titulo { font-size: 1.35rem; margin-bottom: 4px; }
.servicios__donde { font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--marca); margin: 0 0 14px; }
/* cada grupo entero ("Servicios médicos", "Servicios de cosmiatría") es
   tambien un desplegable, cerrado por defecto: "así abro lo que me
   interesa" (Emiliano, 27/9). El chevron es mas grande que el de cada
   servicio individual (jerarquia: esto abre un grupo entero, no una sola
   descripción) y el titulo/dónde quedan igual que siempre adentro del
   <summary>, así que closed o open se ven exactamente igual arriba. */
.servicios__resumen { cursor: pointer; list-style: none; position: relative; padding-right: 34px; }
.servicios__resumen::-webkit-details-marker { display: none; }
.servicios__resumen::after {
  content: ''; position: absolute; top: 9px; right: 2px; width: 11px; height: 11px;
  border-right: 2px solid var(--gris); border-bottom: 2px solid var(--gris);
  transform: rotate(45deg); transition: transform var(--rapido) var(--curva);
}
.servicios__desplegable[open] .servicios__resumen::after { transform: rotate(-135deg); }
.servicios__resumen:hover::after { border-color: var(--marca); }
.servicios__lista { list-style: none; margin: 0; padding: 0; }
.servicio { padding: 13px 0; border-top: 1px solid var(--linea); }
.servicio:last-child { border-bottom: 1px solid var(--linea); }
/* el precio va SIEMPRE en su propia linea, debajo del nombre, nunca al lado:
   se probaron dos variantes lado a lado (flex con wrap, despues grid de 2
   columnas) y las dos se rompian con nombres largos como "Plasma rico en
   plaquetas capilar" -en la lista de dos columnas del grupo medico esa fila
   quedaba angosta y el precio terminaba pegado contra el nombre cortado a la
   mitad (Emiliano, 27/9, dos capturas distintas: "esto no puede pasar, queda
   desprolijo"). Apilado siempre se ve igual sin importar cuanto mida el
   nombre ni cuan angosta sea la columna. */
.servicio__cabeza { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.servicio__titulos { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.servicio__nombre { font-family: 'Fraunces', Georgia, serif; font-size: 1.08rem; }
/* la excepcion ("Sólo Belgrano") va pegada al nombre, en gris firme y de
   corrido, no como nota al pie: el grupo dice "en las dos sedes" y eso es lo
   primero que se lee, asi que el unico servicio que no cumple esa regla
   necesita marcarse donde el ojo ya esta (Emiliano, 27/9: se leia como si la
   sueroterapia fuera de las dos sedes). */
.servicio__solo {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  background: var(--gris); color: var(--papel);
  font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.servicio__dato { color: var(--gris); font-size: .86rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.servicio__detalle { color: var(--gris); font-size: .93rem; margin: 6px 0 0; }

/* la lista es larga (20 servicios entre los dos grupos) y cada uno traia su
   descripcion completa siempre visible: quedaba muy larga para escanear.
   Ahora el <summary> es la misma cabecera de siempre -nombre, duracion,
   precio- y la descripcion se abre al tocarlo, con <details> nativo: no hace
   falta JS aparte y el lector de pantalla ya sabe que es expandible. */
/* el chevron va con position:absolute, fuera de la grilla de 2 columnas: si
   fuera un tercer elemento de la grilla/flex, en una fila donde el nombre y
   el precio ya usan todo el ancho no tiene donde entrar y se cae solo a una
   linea nueva, debajo de todo (le paso a Emiliano con captura: el de
   "Toxina botulinica funcional" bajaba solo). Con absolute nunca compite por
   espacio con el resto. */
.servicio summary { cursor: pointer; list-style: none; position: relative; padding-right: 22px; }
.servicio summary::-webkit-details-marker { display: none; }
.servicio summary::after {
  content: ''; position: absolute; top: 6px; right: 0; width: 8px; height: 8px;
  border-right: 1.5px solid var(--gris); border-bottom: 1.5px solid var(--gris);
  transform: rotate(45deg); transition: transform var(--rapido) var(--curva);
}
.servicio details[open] summary::after { transform: rotate(-135deg); }
.servicio summary:hover::after { border-color: var(--marca); }

/* toxina botulinica: tres de las cuatro variantes tenian la palabra por
   palabra la misma descripcion. En vez de repetirla tres veces, las que
   comparten nombre hasta la coma ("Toxina botulinica, X") y describen lo
   mismo se agrupan bajo un encabezado unico, con sus precios en una lista
   chica adentro. armar-servicios.py y pintarServicios() arman esto igual. */
.servicio__variantes { list-style: none; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px dashed var(--linea); display: grid; gap: 7px; }
/* mismo apilado que .servicio__cabeza y la misma razon: al lado del nombre,
   con nombres de distinto largo ("Tercio superior" vs "Full face") unas
   variantes quedaban en una linea y otras en dos, sin ningun criterio. */
.servicio__variantes li { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.servicio__variante { font-size: .93rem; }

/* un grupo largo (mas de 7 servicios, como "medicos") se parte en dos columnas
   internas, para no quedar mucho mas alto que los grupos cortos de al lado.
   break-inside evita que un mismo servicio quede cortado entre columnas. Solo
   desde 640px: mas angosto, dos columnas de precios y nombres largos no entran. */
@media (min-width: 640px) {
  .servicios__grupo--largo .servicios__lista { columns: 2; column-gap: 32px; }
  .servicios__grupo--largo .servicio { break-inside: avoid; }
}

/* 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(--marca); 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 18%;
  /* casi en blanco y negro, para que la foto quede acorde a la paleta del sitio */
  filter: grayscale(.88) contrast(1.05) brightness(1.02);
}

/* 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; }
/* el mira de la portada va encima del degrade y las particulas, y queda claro
   al pasar el mouse que la foto se puede ver mas grande */
.mira--portada { z-index: 2; }
.mira--portada:hover, .mira--portada:focus-visible { background: rgba(17, 17, 17, .06); }

/* visor */

.visor { border: 0; padding: 0; background: transparent; max-width: min(92vw, 900px); }
.visor::backdrop { background: rgba(17, 17, 17, .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(255, 255, 255,.5); background: rgba(17, 17, 17,.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(--marca-alto); font-style: italic; }
.cierre p { color: #C4C4C4; max-width: 50ch; margin: 0 auto 34px; }
.cierre .boton--fuerte { background: var(--papel); color: var(--noche); }
.cierre .boton--fuerte:hover { background: var(--marca-alto); color: var(--papel); }

/* pie */

.pie { background: var(--noche); color: #C4C4C4; padding: 34px 0; border-top: 1px solid rgba(255, 255, 255,.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(--marca); border-color: var(--marca); transform: translateY(-2px); }
.pie .red { border-color: rgba(255, 255, 255,.24); color: var(--papel); }
.pie .red:hover { color: var(--marca-alto); border-color: var(--marca-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(--marca);
  padding: 6px 14px; border-radius: 2px;
  font-variant-numeric: tabular-nums;
}

/* 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(255,255,255,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; }
  .wa-fijo { display: flex; }
  .mapa__lienzo { height: 320px; }
  .ficha--cerca { margin-left: 0; }
  /* en mobile la galería es un carrusel horizontal, no la grilla irregular de
     escritorio: una sola columna angosta hacía que las fotos quedaran muy
     chicas y en un orden raro (Emiliano, 27/9). La frase del medio
     (.grilla-hueco__hueco) se saca -no es una foto, rompía el desplazamiento-
     y cada figura ocupa la mayor parte del ancho, con un poco de la
     siguiente asomando para que se note que se puede seguir deslizando. En
     escritorio esto no se toca: sigue siendo la grilla de siempre. */
  .grilla-hueco { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin-inline: -20px; padding: 0 20px 6px; scroll-padding-inline: 20px; scrollbar-width: thin; }
  .grilla-hueco figure { flex: 0 0 78%; scroll-snap-align: center; }
  .grilla-hueco__hueco { display: none; }
  .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(17, 17, 17, .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(--marca); }
.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(--marca); color: var(--marca); }
.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(--marca); }

.chincheta { position: relative; }
.chincheta__punto { position: absolute; inset: 0; margin: auto; width: 11px; height: 11px; border-radius: 50%; background: var(--marca); box-shadow: 0 0 0 3px rgba(255,255,255,.9); }
.chincheta__aro { position: absolute; inset: -9px; border: 1px solid var(--marca); 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(255, 255, 255,.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(--marca); }

/* armador de turnos: el de la fabrica (plantilla/turnos.css, pegado abajo).
   Habla en la paleta de la fabrica, asi que aca van los alias a la de este
   sitio. --gris-firme es el borde de lo que usan los estados apagados
   (:disabled): el gris tenue da 3,6:1 sobre blanco, arriba del piso de 3:1.

   --acento-boton es el gris de fondo de un chip/dia/hora TODAVIA sin elegir
   -el mismo gris de «Reservá tu turno» apagado-, y --acento es el negro de
   uno YA elegido -el mismo negro de «Reservá tu turno» habilitado-. La
   primera version (27/9/2026) dejaba lo sin elegir en blanco con borde, y
   sólo lo elegido en gris; a Emiliano no le cerraba: «esto tiene que estar
   de este color [el gris de Reservá tu turno] por default antes de
   seleccionar. Cuando selecciono, el gris se transforma en negro» (mismo
   día, con capturas). El gris es el mismo --gris que ya usa el sitio para
   texto secundario: 6,4:1 de contraste, blanco encima se lee bien tanto
   sobre el gris como sobre el negro. */
:root {
  --acento: var(--marca); --acento-boton: var(--gris); --acento-texto: var(--marca);
  --sobre-acento: var(--papel); --texto: var(--tinta);
  --gris-firme: var(--gris-tenue); --caja-alta: var(--papel-caja); --radio: 2px;
}

.turnos__pie { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }



/* El video de fondo del hero tipografico: va detras del texto y con un velo,
   porque ahi el protagonista es la tipografia y no la imagen. Sin el velo, un
   video claro se come el titulo. */
.portada__video--fondo { z-index: 0; opacity: 0; }
.portada__video--fondo.portada__video--vivo { opacity: .5; }
.portada { position: relative; }

/* OJO: acá había un `.portada > *:not(.portada__video) { position: relative }`
   para dejar el contenido por encima del video. Le pegaba a TODOS los hijos,
   incluido el canvas de partículas, que es una capa `absolute` y pasaba a
   ocupar una celda de la grilla: en el hero de dos columnas quedaban tres
   piezas en dos columnas, el panel de la foto se iba a una segunda fila y se
   aplastaba a 31 px. Se veía negro y sólo arriba de 900 px de ancho. */
.portada__interior { position: relative; z-index: 3; }
.portada__panel { z-index: 1; }

/* El hero con video no pinta la foto de abajo: es la de respaldo, no tiene que
   ver con el video, y asomaba unas decimas antes de que arrancara. La pone y la
   saca motor.js: si el video falla, la foto vuelve. */
.hero-con-video .portada__foto { background-image: none; }

/* turnos: el armador en una sola pantalla.

   Solo lo llevan los sitios con 'turnos' en la receta: generar.py lo pega antes
   de la pantalla chica, y los demas sitios generan la misma hoja de siempre.

   Todo sale de la paleta, asi que anda igual en sitio claro y oscuro. Los
   bordes de lo que se toca van con --gris-firme, el mismo del boton
   secundario: por debajo de 3:1 contra el fondo no se leen como botones. El
   movimiento usa la curva del sitio y lo apaga el bloque de reduced-motion. */

/* cualquier regla con display le gana al hidden del navegador */
[hidden] { display: none !important; }

.armador__respaldo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 26px;
  background: var(--caja-alta); border: 1px solid var(--gris-firme); border-radius: var(--radio);
  padding: 26px 26px;
}
.armador__respaldo p { margin: 0; max-width: 52ch; }

.armador__form { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(270px, 1fr); gap: 30px; align-items: start; }
.armador__campos { display: grid; gap: 28px; min-width: 0; }
.armador__campo { min-width: 0; }
.armador__campo--doble { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.armador__etiqueta { display: block; margin-bottom: 10px; font-size: .95rem; font-weight: 700; color: var(--texto); }
.armador__ayuda { margin: 8px 0 0; font-size: .85rem; color: var(--gris); }

.armador__entrada {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 1rem;
  color: var(--texto); background: var(--caja-alta);
  border: 1.5px solid var(--gris-firme); border-radius: var(--radio);
  transition: border-color var(--rapido) var(--curva);
}
.armador__entrada:hover { border-color: var(--acento); }
.armador__entrada::placeholder { color: var(--gris); opacity: 1; }

.armador button:focus-visible, .armador a:focus-visible,
.armador input:focus-visible, .armador select:focus-visible,
.armador__listo:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* los servicios, los dias y las horas: elegible en gris (el mismo de
   «Reservá tu turno» apagado, --acento-boton), elegido en negro (el mismo
   --acento de «Reservá tu turno» habilitado). Antes el default era un
   recuadro blanco con borde, y sólo lo elegido se llenaba de color: quedaba
   parecido a un campo vacío, no a una opción para tocar. Pedido de Emiliano
   del 27/9/2026, con capturas: «esto tiene que estar de este color [el gris
   de Reservá tu turno] por default antes de seleccionar. Cuando selecciono,
   el gris se transforma en negro». */

.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chips__grupo { flex-basis: 100%; margin: 8px 0 -2px; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.chips__grupo:first-child { margin-top: 0; }
.chip {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  padding: 10px 15px; border-radius: var(--radio); cursor: pointer;
  border: 1.5px solid transparent; background: var(--acento-boton); color: var(--sobre-acento);
  font-size: .93rem; font-weight: 700; line-height: 1.3;
  transition: background var(--rapido) var(--curva), color var(--rapido) var(--curva), filter var(--rapido) var(--curva);
}
.chip:hover { filter: brightness(1.08); }
.chip__dato { font-size: .78rem; font-weight: 500; color: var(--sobre-acento); opacity: .82; font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] { background: var(--acento); color: var(--sobre-acento); }
.chip[aria-pressed="true"] .chip__dato { opacity: 1; }

/* la tira de dias: corre de costado en el celular */

.dias { display: flex; gap: 8px; overflow-x: auto; padding: 3px 3px 10px; margin: -3px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.dia {
  flex: 0 0 auto; width: 64px; display: grid; justify-items: center; gap: 3px;
  padding: 9px 4px 8px; border-radius: var(--radio); cursor: pointer; scroll-snap-align: start;
  border: 1.5px solid transparent; background: var(--acento-boton); color: var(--sobre-acento);
  transition: background var(--rapido) var(--curva), color var(--rapido) var(--curva), filter var(--rapido) var(--curva);
}
.dia:hover:not(:disabled) { filter: brightness(1.08); }
.dia__sem { font-size: .68rem; font-weight: 700; letter-spacing: .1em; color: var(--sobre-acento); opacity: .78; }
.dia__num { font-size: 1.25rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dia__promo { min-height: 1.35em; padding: 0 6px; font-size: .68rem; font-weight: 700; line-height: 1.35; border-radius: var(--radio); }
/* la placa del descuento tiene que distinguirse del fondo del dia, que ahora
   ya es gris o negro: siempre en papel, nunca en el mismo color que pisa */
.dia__promo:not(:empty) { background: var(--sobre-acento); color: var(--acento-texto); }
.dia[aria-pressed="true"] { background: var(--acento); color: var(--sobre-acento); }
.dia[aria-pressed="true"] .dia__sem { opacity: 1; }
.dia:disabled { cursor: not-allowed; opacity: .42; background: transparent; border-color: var(--gris-firme); border-style: dashed; color: var(--texto); }
.dia:disabled .dia__sem { color: var(--gris); opacity: 1; }

/* la grilla de horas */

.horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.hora {
  display: grid; justify-items: center; gap: 1px; padding: 10px 6px;
  border-radius: var(--radio); cursor: pointer;
  border: 1.5px solid transparent; background: var(--acento-boton); color: var(--sobre-acento);
  font-size: .98rem; font-weight: 700; font-variant-numeric: tabular-nums;
  transition: background var(--rapido) var(--curva), color var(--rapido) var(--curva), filter var(--rapido) var(--curva);
}
.hora:hover { filter: brightness(1.08); }
.hora small { font-size: .74rem; font-weight: 500; color: var(--sobre-acento); opacity: .82; }
.hora--promo { box-shadow: inset 0 0 0 1.5px var(--sobre-acento); }
.hora--promo small { opacity: 1; font-weight: 700; }
.hora[aria-pressed="true"] { background: var(--acento); color: var(--sobre-acento); }
.hora[aria-pressed="true"] small { opacity: 1; }
/* apagada porque se superpone con el otro turno del modo multi, no porque no
   haya lugar: mismo trato visual que un dia sin lugar */
.hora:disabled { cursor: not-allowed; opacity: .42; background: transparent; border-color: var(--gris-firme); border-style: dashed; color: var(--texto); }
.hora:disabled small { color: var(--gris); opacity: 1; }

.armador__vacio {
  margin: 0; padding: 15px 17px; font-size: .92rem; color: var(--gris);
  border: 1.5px dashed var(--gris-firme); border-radius: var(--radio);
}

/* el turno unico (Qué día + A qué hora) y, cuando lo elegido necesita mas de
   una persona, los varios turnos que lo reemplazan: un fieldset por persona,
   cada uno con su propia tira y su propia grilla, mismo espaciado que el
   resto de los campos para que no se note el cambio de modo. */

.armador__uno, .armador__multi { display: grid; gap: 28px; }

.armador__turno {
  display: grid; gap: 16px; min-width: 0; margin: 0; padding: 18px;
  border: 1.5px solid var(--gris-firme); border-radius: var(--radio);
}
.armador__turno__titulo { padding: 0; margin: 0; font-size: .95rem; font-weight: 700; color: var(--texto); }
.armador__turno__servicios { margin: 0; font-size: .85rem; color: var(--gris); }

/* el resumen */

.armador__resumen {
  position: sticky; top: 92px; display: grid; gap: 14px;
  background: var(--caja-alta); border: 1px solid var(--gris-firme); border-radius: var(--radio);
  padding: 24px 22px;
}
.armador__resumen h3 { font-size: 1.2rem; }
.resumen { display: grid; gap: 8px; margin: 0; }
.resumen__fila { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; font-size: .92rem; }
.resumen__fila dt { color: var(--gris); }
.resumen__fila dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.resumen__fila--promo dt, .resumen__fila--promo dd { color: var(--texto); font-weight: 700; }
.resumen__fila--turno dt, .resumen__fila--turno dd { color: var(--texto); font-weight: 700; }
.resumen__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 4px 0 0; font-size: 1.2rem; font-weight: 700; }
.resumen__total strong { color: var(--texto); font-variant-numeric: tabular-nums; }
.resumen__tachado { margin-right: 9px; font-size: .92rem; font-weight: 500; color: var(--gris); }
.armador__boton { width: 100%; justify-content: center; }
.armador__boton:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.armador__falta { margin: 0; font-size: .84rem; color: var(--gris); text-align: center; }
.armador__estado { margin: 0; font-size: .9rem; font-weight: 600; }
.armador__estado--mal { padding: 10px 12px; border: 1.5px solid var(--acento); border-radius: var(--radio); color: var(--texto); }

/* la confirmacion */

.armador__listo {
  max-width: 640px; padding: 30px 28px;
  background: var(--caja-alta); border: 1.5px solid var(--acento); border-radius: var(--radio);
}
.armador__sello { margin: 0 0 8px; font-size: .74rem; font-weight: 700; letter-spacing: .19em; text-transform: uppercase; color: var(--acento-texto); }
.armador__listo h3 { margin-bottom: 18px; font-size: clamp(1.45rem, 3.4vw, 2rem); }
.armador__listo dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; margin: 0 0 18px; }
.armador__listo dt { color: var(--gris); }
.armador__listo dd { margin: 0; font-weight: 600; }
.armador__codigo { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; }
.armador__listo__turno { margin: 0 0 22px; padding-bottom: 20px; border-bottom: 1px solid var(--gris-firme); }
.armador__listo__turno:last-of-type { margin-bottom: 18px; padding-bottom: 0; border-bottom: none; }
.armador__listo__turno h4 { margin: 0 0 10px; font-size: 1.05rem; font-weight: 700; }
.armador__nota { color: var(--gris); font-size: .92rem; }
.armador__acciones { display: flex; flex-wrap: wrap; gap: 10px; }

/* el aviso de la seña antes de reservar: tapa la pantalla porque es una
   decision de plata, no un dato mas del resumen */
.armador__velo {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  padding: 20px; background: color-mix(in srgb, var(--tinta) 55%, transparent);
}
.armador__dialogo {
  max-width: 440px; width: 100%; padding: 28px 26px;
  background: var(--caja-alta); border-radius: var(--radio);
}
.armador__dialogo:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.armador__dialogo h3 { margin: 0 0 12px; font-size: 1.25rem; }
.armador__dialogo p { margin: 0 0 22px; color: var(--tinta-suave); }
.armador__dialogo__acciones { display: flex; flex-wrap: wrap-reverse; gap: 10px; }
.armador__dialogo__acciones .boton { flex: 1 1 auto; justify-content: center; }

@media (max-width: 900px) {
  .armador__form { grid-template-columns: 1fr; }
  .armador__resumen { position: static; }
}

@media (max-width: 620px) {
  .armador__campo--doble { grid-template-columns: 1fr; }
  .dias { margin-inline: -19px; padding-inline: 19px; scroll-padding-inline: 19px; }
  .horas { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
  .armador__listo { padding: 24px 20px; }
}