/* ─── NiCitas — web pública ─────────────────────────────────────────────────────────────── */

.demo { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; align-items: center; justify-content: center; text-align: center;
  padding: 0.6rem 1rem; background: var(--texto); color: var(--fondo); font-size: 0.875rem; line-height: 1.35; }
.demo a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* Barra superior: capa translúcida, el contenido pasa por debajo. Sin línea dura: se funde. */
.barra { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 1rem;
  padding: 0.6rem max(1.1rem, env(safe-area-inset-left)) 0.6rem max(1.1rem, env(safe-area-inset-right));
  background: var(--cristal); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 0 transparent; transition: box-shadow 240ms ease; }
.barra.despegada { box-shadow: 0 1px 0 var(--linea); }
.marca { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 700; font-size: 1.125rem; letter-spacing: -0.02em; margin-right: auto; }
.marca-sello { display: grid; place-items: center; width: 1.85rem; height: 1.85rem; border-radius: 0.55rem; background: var(--acento); color: var(--acento-tinta); font-size: 1rem; }
.barra-nav { display: none; gap: 1.6rem; font-size: 0.9375rem; color: var(--texto-2); }
.barra-nav a { transition: color 140ms ease; }
.barra-nav a:hover { color: var(--texto); }
.barra-cta { min-height: 2.25rem; padding: 0 1rem; font-size: 0.9375rem; }
@media (min-width: 760px) { .barra-nav { display: flex; margin-right: 0.6rem; } .barra { padding-inline: max(2rem, calc((100vw - var(--ancho)) / 2)); } }

/* Portada */
.portada { max-width: var(--ancho); margin: 0 auto; padding: clamp(2.5rem, 7vw, 5.5rem) 1.25rem clamp(2.5rem, 6vw, 5rem);
  display: grid; gap: 2.5rem; align-items: center; }
.portada-texto { display: grid; gap: 1.15rem; justify-items: start; }
.portada-texto .t-cuerpo-g { max-width: 32rem; }
.portada-acciones { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 0.5rem; }
.portada-estado { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin-top: 0.25rem; }
@media (min-width: 900px) { .portada { grid-template-columns: 1.08fr 0.92fr; gap: 3rem; padding-inline: 2rem; } }

.portada-arte { position: relative; height: 25.5rem; max-width: 30rem; width: 100%; margin: 0 auto; isolation: isolate; }
.halo { position: absolute; border-radius: 50%; filter: blur(46px); z-index: -1; }
.halo-1 { width: 68%; aspect-ratio: 1; left: 2%; top: 4%; background: color-mix(in srgb, var(--acento) 62%, #ffd9a8); opacity: 0.62; }
.halo-2 { width: 54%; aspect-ratio: 1; right: 0; bottom: 0; background: color-mix(in srgb, var(--acento) 38%, #c9a8ff); opacity: 0.5; }
.ficha { position: absolute; border-radius: var(--r-l); padding: 1rem 1.15rem; background: var(--cristal);
  -webkit-backdrop-filter: saturate(170%) blur(24px); backdrop-filter: saturate(170%) blur(24px);
  box-shadow: var(--sombra-2), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.ficha-hueco { left: 0; top: 0; width: min(15.5rem, 62%); animation: flota 9s ease-in-out infinite; }
.ficha-hora { font-size: clamp(2.4rem, 6vw, 3.2rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.05; margin-top: 0.15rem; }
.ficha-cita { right: 0; top: 9.4rem; display: flex; align-items: center; gap: 0.8rem; width: min(19.5rem, 86%); animation: flota 11s ease-in-out -3s infinite; }
.ficha-titulo { font-weight: 650; letter-spacing: -0.015em; }
.ficha-avatar, .persona-avatar { display: grid; place-items: center; border-radius: 50%; color: #fff; font-weight: 700; flex: none;
  background: linear-gradient(140deg, color-mix(in srgb, var(--c) 78%, #fff), var(--c)); }
.ficha-avatar { width: 2.75rem; height: 2.75rem; font-size: 0.95rem; }
.ficha-ok { margin-left: auto; width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; background: var(--ok); color: #fff; flex: none; }
.ficha-ok svg { width: 0.95rem; height: 0.95rem; }
.ficha-pasos { left: 7%; top: 15.6rem; width: min(15rem, 66%); animation: flota 10s ease-in-out -6s infinite; }
.ficha-pasos ol { margin: 0.45rem 0 0; padding: 0; list-style: none; counter-reset: paso; display: grid; gap: 0.35rem; font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em; }
.ficha-pasos li { counter-increment: paso; display: flex; align-items: center; gap: 0.55rem; }
.ficha-pasos li::before { content: counter(paso); display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%;
  background: var(--acento-suave); color: var(--acento); font-size: 0.75rem; font-weight: 700; }
/* Movimiento muy lento y corto: da vida sin distraer (y se apaga con «reducir movimiento») */
@keyframes flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* Secciones */
.seccion { max-width: var(--ancho); margin: 0 auto; padding: clamp(2.5rem, 6vw, 4.5rem) 1.25rem; }
.seccion-cab { display: grid; gap: 0.6rem; margin-bottom: 1.6rem; max-width: 40rem; }
@media (min-width: 900px) { .seccion { padding-inline: 2rem; } }

.filtros { display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.15rem 1.25rem 0.9rem; margin: 0 -1.25rem; scrollbar-width: none; }
.filtros::-webkit-scrollbar { display: none; }
.filtro { min-height: 2.25rem; padding: 0 1rem; border-radius: 999px; background: var(--relleno); color: var(--texto-2); font-weight: 600; font-size: 0.9375rem;
  white-space: nowrap; transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--salida); }
.filtro:active { transform: scale(0.95); transition-duration: 60ms; }
.filtro.activo { background: var(--texto); color: var(--fondo); }

.servicios { list-style: none; margin: 0; padding: 0.35rem 0; overflow: hidden; }
.servicio { display: flex; align-items: center; gap: 1rem; padding: 1.05rem 1.25rem; position: relative; }
.servicio + .servicio::before { content: ""; position: absolute; top: 0; left: 1.25rem; right: 0; height: 1px; background: var(--linea); }
.servicio-texto { flex: 1; min-width: 0; display: grid; gap: 0.2rem; }
.servicio h3 { font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.015em; }
.servicio p { color: var(--texto-2); font-size: 0.9375rem; line-height: 1.4; }
.servicio-datos { color: var(--texto-3) !important; font-size: 0.875rem !important; }
.servicio-datos strong { color: var(--texto); font-weight: 650; }
.servicio.oculto { display: none; }

.equipo { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); }
.persona { padding: 1.6rem 1.4rem; display: grid; gap: 0.3rem; justify-items: start; }
.persona-avatar { width: 4.5rem; height: 4.5rem; font-size: 1.5rem; letter-spacing: -0.02em; margin-bottom: 0.7rem; }
.persona h3 { font-size: 1.1875rem; font-weight: 650; letter-spacing: -0.018em; }
.persona p { color: var(--texto-2); }

.visita { display: grid; gap: 1rem; }
@media (min-width: 820px) { .visita { grid-template-columns: 1fr 1fr; } }
.visita > .tarjeta { padding: 1.6rem 1.5rem; }
.visita-direccion { font-size: 1.375rem; font-weight: 650; letter-spacing: -0.02em; line-height: 1.25; margin: 0.5rem 0 1.1rem; }
.visita-acciones { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.visita-contacto { margin-top: 1.1rem; }
.visita-contacto a { color: var(--acento); font-weight: 600; }
.visita-horario dl { margin: 0.6rem 0 0; display: grid; }
.visita-horario dl > div { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 0.55rem 0; border-top: 1px solid var(--linea); color: var(--texto-2); }
.visita-horario dl > div:first-child { border-top: 0; }
.visita-horario dt { display: flex; align-items: center; gap: 0.5rem; }
.visita-horario dd { margin: 0; text-align: right; }
.visita-horario .hoy { color: var(--texto); font-weight: 650; }

.cierre { max-width: var(--ancho); margin: 1rem auto 0; padding: clamp(3rem, 8vw, 5.5rem) 1.25rem; display: grid; gap: 1.4rem; justify-items: center; text-align: center; }
.pie { max-width: var(--ancho); margin: 0 auto; padding: 1.5rem 1.25rem calc(2.5rem + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem;
  justify-content: space-between; color: var(--texto-3); font-size: 0.8125rem; border-top: 1px solid var(--linea); }
.pie a { color: var(--texto-2); }
.pie a:hover { color: var(--texto); }

/* ── Reserva (dentro de la hoja) ── */
.pasos-barra { height: 3px; margin: 0 1.25rem 0.5rem; border-radius: 999px; background: var(--relleno); overflow: hidden; flex: none; }
.pasos-barra span { display: block; height: 100%; width: 20%; border-radius: inherit; background: var(--acento); transition: width 420ms var(--salida); }
.paso-titulo { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; margin: 0.5rem 0 0.25rem; }
.paso-sub { color: var(--texto-2); margin-bottom: 1rem; }
.entra { animation: entra 320ms var(--salida) both; }
.entra.atras { animation-name: entra-atras; }
@keyframes entra { from { opacity: 0; transform: translateX(22px); } }
@keyframes entra-atras { from { opacity: 0; transform: translateX(-22px); } }

.opciones { display: grid; gap: 0.5rem; }
.opcion { display: flex; align-items: center; gap: 0.85rem; width: 100%; text-align: left; padding: 0.85rem 1rem; border-radius: var(--r-m);
  background: var(--relleno); transition: transform 160ms var(--salida), background-color 160ms ease, box-shadow 160ms ease; }
.opcion:hover { background: var(--relleno-2); }
.opcion:active { transform: scale(0.985); transition-duration: 60ms; }
.opcion.elegida { background: var(--acento-suave); box-shadow: inset 0 0 0 2px var(--acento); }
.opcion-texto { flex: 1; min-width: 0; display: grid; gap: 0.05rem; }
.opcion-texto strong { font-weight: 650; letter-spacing: -0.012em; }
.opcion-texto small { color: var(--texto-2); font-size: 0.875rem; }
.opcion-precio { font-weight: 650; white-space: nowrap; }
.opcion .ficha-avatar { width: 2.5rem; height: 2.5rem; font-size: 0.875rem; }
.grupo-titulo { margin: 1.1rem 0 0.5rem; }
.grupo-titulo:first-child { margin-top: 0.25rem; }

.dias { display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.25rem 1.25rem 0.75rem; margin: 0 -1.25rem; scroll-snap-type: x proximity; scrollbar-width: none; }
.dias::-webkit-scrollbar { display: none; }
.dia { flex: none; width: 3.9rem; padding: 0.6rem 0 0.65rem; border-radius: var(--r-m); background: var(--relleno); display: grid; justify-items: center; gap: 0.1rem;
  scroll-snap-align: center; transition: transform 160ms var(--salida), background-color 160ms ease, color 160ms ease; }
.dia small { font-size: 0.75rem; font-weight: 600; color: var(--texto-3); text-transform: capitalize; }
.dia strong { font-size: 1.3125rem; font-weight: 650; letter-spacing: -0.02em; line-height: 1.15; }
.dia em { font-style: normal; font-size: 0.6875rem; color: var(--texto-3); }
.dia:active { transform: scale(0.94); transition-duration: 60ms; }
.dia.elegida { background: var(--acento); color: var(--acento-tinta); }
.dia.elegida small, .dia.elegida em { color: inherit; opacity: 0.85; }
.dia[disabled] { opacity: 0.35; }
.horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr)); gap: 0.5rem; }
.hora { min-height: 2.75rem; border-radius: var(--r-s); background: var(--relleno); font-weight: 600; font-variant-numeric: tabular-nums;
  transition: transform 160ms var(--salida), background-color 160ms ease, color 160ms ease; }
.hora:hover { background: var(--relleno-2); }
.hora:active { transform: scale(0.94); transition-duration: 60ms; }
.hora.elegida { background: var(--acento); color: var(--acento-tinta); }
.vacio { padding: 1.5rem 0.5rem; text-align: center; color: var(--texto-2); }

.resumen { border-radius: var(--r-m); background: var(--relleno); padding: 0.9rem 1rem; display: grid; gap: 0.5rem; margin-bottom: 1.1rem; }
.resumen div { display: flex; justify-content: space-between; gap: 1rem; }
.resumen span { color: var(--texto-2); }
.resumen strong { font-weight: 650; text-align: right; letter-spacing: -0.01em; }
.formulario { display: grid; gap: 0.9rem; }

.hecho { display: grid; justify-items: center; text-align: center; gap: 0.6rem; padding: 1.2rem 0 0.5rem; }
.hecho-marca { width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; margin-bottom: 0.5rem;
  animation: aparece 520ms var(--salida) both; }
.hecho-marca svg { width: 2.2rem; height: 2.2rem; stroke-dasharray: 30; stroke-dashoffset: 30; animation: traza 420ms 180ms ease-out forwards; }
@keyframes aparece { from { transform: scale(0.6); opacity: 0; } }
@keyframes traza { to { stroke-dashoffset: 0; } }
.hecho .resumen { width: 100%; text-align: left; margin-top: 0.8rem; }

@media (prefers-reduced-motion: reduce) {
  .ficha { animation: none !important; }
  .entra, .hecho-marca { animation-name: solo-fundido !important; animation-duration: 160ms !important; }
  .hecho-marca svg { stroke-dashoffset: 0; animation: none; }
  @keyframes solo-fundido { from { opacity: 0; } }
}

/* ── Galería de trabajos ── */
.galeria { columns: 2; column-gap: 0.75rem; }
@media (min-width: 640px) { .galeria { columns: 3; column-gap: 1rem; } }
@media (min-width: 1000px) { .galeria { columns: 4; } }
.foto { display: block; width: 100%; margin: 0 0 0.75rem; break-inside: avoid; position: relative; border-radius: var(--r-l); overflow: hidden;
  background: var(--relleno); box-shadow: var(--sombra-1); transition: transform 220ms var(--salida), box-shadow 220ms ease; }
@media (min-width: 640px) { .foto { margin-bottom: 1rem; } }
.foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.foto span { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem 0.9rem 0.7rem; text-align: left; color: #fff; font-weight: 600; font-size: 0.9375rem; letter-spacing: -0.01em;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.62), transparent); }
.foto:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); }
.foto:active { transform: scale(0.98); transition-duration: 60ms; }
.foto.oculto { display: none; }

.visor { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; background: rgba(0, 0, 0, 0); transition: background-color 260ms ease; touch-action: none; }
.visor.abierto { background: rgba(0, 0, 0, 0.9); }
.visor-figura { margin: 0; display: grid; justify-items: center; gap: 0.8rem; max-width: 100vw; will-change: transform; }
.visor-figura img { display: block; max-width: min(94vw, 1100px); max-height: 80dvh; width: auto; height: auto; border-radius: var(--r-m); user-select: none; -webkit-user-drag: none; }
.visor-figura figcaption { color: #fff; font-weight: 600; letter-spacing: -0.01em; min-height: 1.5rem; opacity: 0; transition: opacity 200ms ease; }
.visor.abierto figcaption { opacity: 1; }
.visor .redondo { position: absolute; z-index: 2; background: rgba(255, 255, 255, 0.16); color: #fff; width: 2.75rem; height: 2.75rem; opacity: 0; transition: opacity 200ms ease, transform 160ms var(--salida), background-color 160ms ease;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.visor.abierto .redondo { opacity: 1; }
.visor .redondo:hover { background: rgba(255, 255, 255, 0.28); }
.visor-cerrar { top: calc(1rem + env(safe-area-inset-top)); right: 1rem; }
.visor-ant { left: 1rem; top: 50%; margin-top: -1.375rem; }
.visor-sig { right: 1rem; top: 50%; margin-top: -1.375rem; }
@media (max-width: 640px) { .visor-flecha { display: none !important; } }   /* en móvil se pasa deslizando */

/* ── Logo y fotos de perfil ── */
.marca-logo { height: 2.1rem; width: auto; max-width: 9rem; object-fit: contain; }
.con-foto { background: var(--relleno); overflow: hidden; }
.con-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.persona-avatar.con-foto { width: 6rem; height: 6rem; }

/* ── Venta de NiCitas (solo en la demo) ── */
.demo a + a { opacity: 0.85; }
.venta { max-width: var(--ancho); margin: 3rem auto 0; padding: clamp(2.5rem, 7vw, 5rem) clamp(1.25rem, 5vw, 4rem); border-radius: clamp(1.5rem, 4vw, 2.5rem); background: #101012; color: #f5f5f7;
  display: grid; gap: 1.5rem; justify-items: start; scroll-margin-top: 5rem; }
.venta .t-etiqueta { color: color-mix(in srgb, var(--acento) 60%, #fff); }
.venta h2 { font-size: clamp(2.4rem, 7vw, 4.75rem); font-weight: 700; letter-spacing: -0.045em; line-height: 1.02; }
.venta-intro { font-size: clamp(1.0625rem, 2.2vw, 1.3125rem); line-height: 1.4; color: #c7c7cc; max-width: 40rem; letter-spacing: -0.012em; }
.venta-tres { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); width: 100%; }
.venta-tres div { padding: 1.3rem 1.25rem; border-radius: var(--r-l); background: rgba(255, 255, 255, 0.07); display: grid; gap: 0.35rem; align-content: start; }
.venta-tres strong { font-size: 1.3125rem; font-weight: 700; letter-spacing: -0.025em; }
.venta-tres span { color: #a1a1a6; font-size: 0.9375rem; line-height: 1.4; }
.venta-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem 2rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); width: 100%; color: #e8e8ed; }
.venta-lista li { position: relative; padding-left: 1.7rem; }
.venta-lista li::before { content: ""; position: absolute; left: 0; top: 0.3rem; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--acento)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 70% no-repeat; }
.venta-acciones { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.5rem; }
.venta-acciones .btn:not(.btn-p) { background: rgba(255, 255, 255, 0.14); color: #fff; }
.venta-firma { color: #86868b; font-size: 0.875rem; }
.venta-firma a { color: #c7c7cc; text-decoration: underline; text-underline-offset: 3px; }