/* ---------- Colores por estilo (se elige en datos.js) ---------- */
:root {
  --fondo: #ffffff;
  --fondo-2: #f4f3ef;
  --banda: #c9d8db;
  --tinta: #242424;
  --tinta-suave: #6a6a68;
  --acento: #2f7565;
  --sobre-acento: #ffffff;
  --linea: rgba(36, 36, 36, 0.14);

  --display: "Fraunces", Georgia, serif;
  --texto: "League Spartan", system-ui, sans-serif;
  --firma: "Ms Madi", "Brush Script MT", cursive;
}
[data-estilo="empolvado"] {
  --fondo-2: #faf4f3;
  --banda: #f1d9da;
  --acento: #9e1238;
}
[data-estilo="salvia"] {
  --fondo-2: #f3f5f0;
  --banda: #d6e0d2;
  --acento: #3d6a4f;
}
/* Champán y dorado, tomado del logo de Lunaria Studio */
[data-estilo="dorado"] {
  --fondo-2: #f8f5f0;
  --banda: #eee5d7;
  --acento: #8a6b3c;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
[hidden] { display: none !important; }

.caja { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 700px) { .caja { padding: 0 32px; } }

.titulo {
  font-family: var(--display);
  font-weight: 300;
  font-variation-settings: "opsz" 120;
  font-size: clamp(2.1rem, 4.6vw, 3.3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 0.45em;
  text-wrap: balance;
}
.titulo em, .portada h1 em { font-style: italic; }
.bajada { color: var(--tinta-suave); max-width: 34rem; margin: 0 0 1.5rem; font-weight: 300; font-size: 1.08rem; }
.etiqueta {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin: 0 0 16px;
}

/* ---------- Botones: píldoras con borde ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.7rem 0.75rem;
  border-radius: 999px;
  font-family: var(--texto);
  font-size: 0.98rem;
  font-weight: 400;
  text-decoration: none;
  border: 1px solid var(--tinta);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.boton-lleno { background: var(--tinta); color: var(--fondo); }
.boton-lleno:hover { background: var(--acento); border-color: var(--acento); }
.boton-linea { background: transparent; color: var(--tinta); }
.boton-linea:hover { background: var(--tinta); color: var(--fondo); }
.boton-chico { padding: 0.55rem 1.2rem 0.45rem; font-size: 0.92rem; }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Aviso de muestra ---------- */
.aviso {
  background: var(--tinta);
  color: var(--fondo);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 7px 16px 5px;
}

/* ---------- Barra superior ---------- */
.barra {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--fondo) 94%, transparent);
  backdrop-filter: blur(8px);
}
.barra-dentro { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.marca {
  font-family: var(--firma);
  font-size: 2.1rem;
  line-height: 1;
  text-decoration: none;
  margin-right: auto;
  padding-top: 6px;
}
.menu { display: none; gap: 26px; }
.menu a { font-size: 0.98rem; text-decoration: none; padding-top: 3px; }
.menu a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
@media (min-width: 900px) { .menu { display: flex; } }

/* ---------- Portada: collage de fotos + firma ---------- */
.collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: minmax(0, 1fr); /* con fotos verticales, que no se estire más que la altura */
  gap: 4px;
  height: clamp(240px, 38vw, 470px);
}
.collage img { width: 100%; height: 100%; object-fit: cover; display: block; min-width: 0; }
.collage img:nth-child(3) { display: none; }
@media (min-width: 760px) {
  .collage { grid-template-columns: 1fr 1.7fr 1fr; }
  .collage img:nth-child(3) { display: block; }
}
.collage:has(img:only-child) { grid-template-columns: 1fr; }

.portada-texto {
  display: grid;
  gap: 8px 56px;
  align-items: center;
  padding-top: 36px;
  padding-bottom: 88px;
}
@media (min-width: 920px) { .portada-texto { grid-template-columns: 1.05fr 1fr; padding-top: 44px; } }
.firma {
  font-family: var(--firma);
  font-size: clamp(6rem, 17vw, 12.5rem);
  line-height: 0.9;
  margin: 0;
  padding: 0.12em 0 0.08em;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.portada .etiqueta { font-size: 1rem; letter-spacing: 0.18em; margin-bottom: 14px; }
.portada h1 {
  font-family: var(--display);
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
.google { margin: 1.4rem 0 0; font-size: 0.95rem; color: var(--tinta-suave); }
.google .estrellas { color: var(--tinta); letter-spacing: 0.1em; }
.estado { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 0; font-size: 0.92rem; color: var(--tinta-suave); }
.estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tinta-suave); }
.estado.abierto::before { background: #3aa864; box-shadow: 0 0 0 4px rgba(58, 168, 100, 0.18); }

/* ---------- Banda de color con el muestrario ---------- */
.banda { background: var(--banda); padding: 88px 0 96px; text-align: center; }
.banda .bajada { margin-inline: auto; color: color-mix(in srgb, var(--tinta) 70%, transparent); }
.muestrario { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 14px; margin-top: 44px; }
.una {
  display: grid;
  justify-items: center;
  gap: 12px;
  width: 78px;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
}
button.una { cursor: pointer; }
.una-forma {
  width: 50px;
  height: 74px;
  border-radius: 50% 50% 12px 12px / 42% 42% 12px 12px;
  background:
    radial-gradient(ellipse 30% 22% at 34% 24%, rgba(255, 255, 255, 0.8), transparent 70%),
    linear-gradient(165deg, color-mix(in srgb, var(--c) 72%, white), var(--c) 48%, color-mix(in srgb, var(--c) 78%, black));
  box-shadow:
    inset 0 -3px 0 rgba(0, 0, 0, 0.1),
    inset 0 0 0 1px rgba(0, 0, 0, 0.08),
    0 12px 20px -10px color-mix(in srgb, var(--c) 80%, black);
  transition: transform 0.25s ease;
}
button.una:hover .una-forma, button.una:focus-visible .una-forma { transform: translateY(-6px) rotate(-6deg); }
.una-nombre { font-size: 0.86rem; line-height: 1.2; text-align: center; }

/* ---------- Servicios ---------- */
.seccion { padding-top: 104px; }
.seccion-cabeza { text-align: center; display: grid; justify-items: center; margin-bottom: 44px; }
.seccion-cabeza .bajada { margin-bottom: 0; }
.servicios { display: grid; gap: 32px; }
@media (min-width: 920px) { .servicios { grid-template-columns: 0.8fr 1.2fr; gap: 72px; align-items: start; } }
.lista { border-top: 1px solid var(--tinta); }
.fila {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 16px;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--linea);
  color: inherit;
  font: inherit;
  padding: 20px 4px;
  cursor: pointer;
  transition: background-color 0.2s, padding 0.2s;
}
.fila:hover { background: var(--fondo-2); padding-inline: 14px; }
.fila-nombre { font-family: var(--display); font-weight: 400; font-size: 1.45rem; letter-spacing: -0.01em; }
.fila-puntos { display: none; }
.fila-precio { font-size: 1.1rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fila-desde { font-size: 0.8rem; color: var(--tinta-suave); margin-right: 5px; }
.fila-detalle { grid-column: 1 / -1; font-size: 0.95rem; font-weight: 300; color: var(--tinta-suave); }

/* ---------- Turno ---------- */
.franja { background: var(--fondo-2); padding: 96px 0; margin-top: 104px; }
.turno-grilla { display: grid; gap: 40px; }
@media (min-width: 920px) {
  .turno-grilla { grid-template-columns: 1.25fr 0.75fr; gap: 64px; align-items: start; }
  .ticket-lugar { position: sticky; top: 96px; }
}
.pasos fieldset { border: 0; padding: 0; margin: 0 0 30px; min-width: 0; }
.pasos legend {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.35rem;
  padding: 0;
  margin-bottom: 12px;
}
.num { font-family: var(--texto); font-size: 0.8rem; letter-spacing: 0.14em; color: var(--tinta-suave); }
.num::before { content: "0"; }

.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opciones.horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.6rem 1.1rem 0.5rem;
  background: var(--fondo);
  border: 1px solid var(--linea);
  border-radius: 999px;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.15s, border-color 0.15s;
}
.chip span:hover { border-color: var(--tinta); }
.chip input:checked + span { background: var(--tinta); color: var(--fondo); border-color: var(--tinta); }
.chip input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 2px; }
.chip small { display: block; font-size: 0.8rem; opacity: 0.75; font-variant-numeric: tabular-nums; }
.colores .chip span { flex-direction: row; gap: 8px; }
.gota { width: 16px; height: 16px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); }
.horas .chip span { padding: 0.55rem 0.4rem 0.45rem; font-variant-numeric: tabular-nums; }
.dias .chip span { min-width: 64px; padding: 0.6rem 0.6rem 0.5rem; border-radius: 22px; }
.dias .chip small:first-child { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; }
.dias .chip b { display: block; font-family: var(--display); font-size: 1.35rem; font-weight: 400; line-height: 1.2; }
.sin-opciones { color: var(--tinta-suave); font-size: 0.95rem; margin: 0; grid-column: 1 / -1; }

.campo { display: grid; gap: 8px; font-family: var(--display); font-size: 1.35rem; max-width: 26rem; }
.campo input {
  font: inherit;
  font-family: var(--texto);
  font-size: 1rem;
  color: var(--tinta);
  background: var(--fondo);
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 0.8rem 1.2rem 0.7rem;
}
.campo input::placeholder { color: var(--tinta-suave); opacity: 0.7; }
.campo input:focus { border-color: var(--tinta); outline: none; }

/* Resumen del turno */
.ticket {
  background: var(--fondo);
  border-radius: 24px;
  padding: 28px 26px 22px;
  box-shadow: 0 1px 0 var(--linea), 0 24px 50px -30px rgba(0, 0, 0, 0.3);
}
.ticket-cabeza {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--tinta);
}
.ticket-negocio { font-family: var(--firma); font-size: 2.2rem; line-height: 1; }
.ticket-rotulo { font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; }
.ticket dl { margin: 6px 0 20px; }
.dato {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 10px 2px 8px;
  border-bottom: 1px solid var(--linea);
}
.dato dt { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-suave); }
.dato dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.dato .vacio { color: var(--tinta-suave); }
.dato.total dd { font-family: var(--display); font-size: 1.35rem; }
.recien { animation: marcar 0.8s ease-out; }
@keyframes marcar { from { background: var(--banda); } to { background: transparent; } }
.boton-ticket { width: 100%; }
.boton-ticket[aria-disabled="true"] { opacity: 0.3; cursor: not-allowed; pointer-events: none; }
.falta { font-size: 0.86rem; color: var(--tinta-suave); text-align: center; margin: 10px 0 0; min-height: 1.2em; }

/* ---------- Galería ---------- */
.fotos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
@media (min-width: 800px) { .fotos { grid-template-columns: repeat(3, 1fr); gap: 8px; } }
.fotos img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.fotos-pie { text-align: right; margin: 16px 0 0; }
.fotos-pie a { text-decoration: none; font-size: 0.98rem; }
.fotos-pie a:hover { text-decoration: underline; text-underline-offset: 5px; }

/* ---------- Reseñas ---------- */
.resenas { display: grid; gap: 28px; }
@media (min-width: 800px) { .resenas { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.resenas blockquote { margin: 0; text-align: center; display: grid; justify-items: center; align-content: start; }
.resenas p { font-family: var(--display); font-weight: 300; font-size: 1.3rem; line-height: 1.4; margin: 0.6rem 0 0.9rem; }
.resenas cite { font-style: normal; font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tinta-suave); }
.resenas .estrellas { letter-spacing: 0.14em; font-size: 0.9rem; }

/* ---------- Contacto ---------- */
.banda-baja { margin-top: 104px; text-align: left; }
.donde { display: grid; gap: 40px; }
@media (min-width: 920px) { .donde { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } }
.direccion { font-family: var(--display); font-size: 1.45rem; font-weight: 400; margin: 0 0 18px; }
.horarios { list-style: none; padding: 0; margin: 0 0 28px; max-width: 28rem; }
.horarios li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0 7px;
  border-bottom: 1px solid color-mix(in srgb, var(--tinta) 18%, transparent);
}
.horarios li span:last-child { font-variant-numeric: tabular-nums; text-align: right; }
.horarios .cerrado span:last-child { color: var(--tinta-suave); }
.horarios .hoy { font-weight: 600; }
.donde .boton { padding: 0.65rem 1.2rem 0.55rem; font-size: 0.92rem; }
.mapa { width: 100%; height: 400px; border: 0; border-radius: 24px; background: var(--fondo-2); }

.pie-dentro {
  display: grid;
  justify-items: center;
  gap: 4px;
  text-align: center;
  padding-top: 48px;
  padding-bottom: 104px;
  font-size: 0.92rem;
  color: var(--tinta-suave);
}
.pie p { margin: 0; }
.pie-marca { font-family: var(--firma); font-size: 2.8rem; line-height: 1.1; color: var(--tinta); }
@media (min-width: 920px) { .pie-dentro { padding-bottom: 48px; } }

.flotante {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--acento);
  color: var(--sobre-acento);
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.35);
  z-index: 10;
}
/* En Lunaria el botón de WhatsApp se ve también en compu (lo pidió al contratar) */
@media (min-width: 920px) { .flotante { right: 28px; bottom: 28px; width: 62px; height: 62px; } }
.flotante:hover { background: var(--tinta); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Logo de Lunaria en lugar del nombre en manuscrita ---------- */
/* El logo tiene fondo blanco: con multiply se funde con cualquier fondo claro */
.logo { display: block; height: auto; mix-blend-mode: multiply; }
.marca { padding-top: 0; }
.marca .logo { height: 30px; width: auto; }
.firma { font-size: 0; padding: 0; white-space: normal; }
.firma .logo { width: 100%; max-width: 560px; margin: 8px 0 24px; }
@media (min-width: 920px) { .firma .logo { margin: 0; } }
.ticket-negocio .logo { height: 26px; width: auto; }
.pie-marca .logo { height: 60px; width: auto; margin: 0 auto 8px; }

/* Galería de 4 fotos: una fila en compu */
@media (min-width: 800px) { .fotos { grid-template-columns: repeat(4, 1fr); } }