/* estilos.css — Sistema visual de las páginas públicas (reserva, Mis reservas,
   accesos). Mobile first. Cada negocio cambia --acento, --fondo y las
   tipografías desde su ficha; el resto se deriva de ahí. */

:root {
  --acento: #a4683f;
  --sobre-acento: #ffffff;
  --acento-texto: var(--acento);
  --fondo: #f8f4ef;
  --superficie: #ffffff;
  --superficie-2: color-mix(in srgb, var(--fondo) 55%, #ffffff);
  --tinta: #221e1a;
  --tinta-2: #5d554c;
  --tinta-3: #8b8278;
  --linea: rgba(40, 32, 24, 0.10);
  --linea-fuerte: rgba(40, 32, 24, 0.20);
  --acento-suave: color-mix(in srgb, var(--acento) 9%, var(--superficie));
  --acento-medio: color-mix(in srgb, var(--acento) 20%, var(--superficie));
  --ok: #2f7a55; --ok-suave: #e7f3ec;
  --error: #b2413a; --error-suave: #fbeceb;
  --aviso: #8a5d0c; --aviso-suave: #fbf1dc;
  --radio: 20px; --radio-s: 14px; --radio-xs: 10px;
  --sombra-1: 0 1px 2px rgba(30, 24, 16, 0.05), 0 4px 14px -6px rgba(30, 24, 16, 0.10);
  --sombra-2: 0 18px 40px -18px rgba(30, 24, 16, 0.35);
  --fuente: 'Jost', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fuente-titulo: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --alto-barra: 0px;
  color-scheme: light;
}
/* Negocios con fondo oscuro: el texto y las tarjetas se invierten solos. */
:root[data-tema="oscuro"] {
  --superficie: color-mix(in srgb, var(--fondo) 86%, #ffffff);
  --superficie-2: color-mix(in srgb, var(--fondo) 92%, #ffffff);
  --tinta: #f5f0ea; --tinta-2: #cfc6bb; --tinta-3: #a59b90;
  --linea: rgba(255, 255, 255, 0.12); --linea-fuerte: rgba(255, 255, 255, 0.24);
  --acento-suave: color-mix(in srgb, var(--acento) 18%, var(--superficie));
  --acento-medio: color-mix(in srgb, var(--acento) 32%, var(--superficie));
  --ok-suave: rgba(47, 122, 85, 0.22); --error-suave: rgba(178, 65, 58, 0.22); --aviso-suave: rgba(138, 93, 12, 0.25);
  --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.3); --sombra-2: 0 18px 40px -18px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.55;
  background: var(--fondo);
  color: var(--tinta);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
img { max-width: 100%; display: block; }
a { color: var(--acento-texto); }
button { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--fuente-titulo); font-weight: 500; letter-spacing: -0.01em; line-height: 1.12; margin: 0; }
p { margin: 0; }
.oculto { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.campo-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ---------- Iconos (SVG en línea) ---------- */
.ico { width: 1.15em; height: 1.15em; flex: none; display: inline-block; vertical-align: -0.2em; }
.ico svg { width: 100%; height: 100%; display: block; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 52px; padding: 0 1.6rem;
  border: 0; border-radius: 999px;
  background: var(--acento); color: var(--sobre-acento);
  font-weight: 600; font-size: 1rem; letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer;
  transition: transform 0.15s var(--ease), box-shadow 0.2s var(--ease), background 0.2s, opacity 0.2s;
  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--acento) 70%, transparent);
}
.btn:active { transform: scale(0.98); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.btn-bloque { width: 100%; }
.btn-sec {
  background: transparent; color: var(--tinta); box-shadow: none;
  border: 1.5px solid var(--linea-fuerte);
}
.btn-sec:hover { border-color: var(--acento); }
.btn-suave { background: var(--acento-suave); color: var(--acento-texto); box-shadow: none; }
.btn-fantasma { background: transparent; color: var(--tinta-2); box-shadow: none; min-height: 44px; padding: 0 0.9rem; }
.btn-fantasma:hover { color: var(--tinta); }
.btn-wa { background: #1f8f5a; color: #fff; box-shadow: 0 8px 20px -10px rgba(31, 143, 90, 0.7); }
.btn-peligro { background: var(--error); color: #fff; box-shadow: none; }
.btn-peligro-sec { background: transparent; color: var(--error); border: 1.5px solid color-mix(in srgb, var(--error) 40%, transparent); box-shadow: none; }
.btn-chico { min-height: 40px; padding: 0 1rem; font-size: 0.92rem; }
.btn .giro { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: giro 0.7s linear infinite; }
@keyframes giro { to { transform: rotate(360deg); } }

.enlace { background: none; border: 0; padding: 0; color: var(--acento-texto); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---------- Formularios ---------- */
.campo { display: block; margin: 0 0 1.05rem; }
.campo > span:first-child, .etq { display: block; font-size: 0.86rem; font-weight: 600; color: var(--tinta-2); margin: 0 0 0.4rem; letter-spacing: 0.01em; }
.campo .opc { font-weight: 400; color: var(--tinta-3); }
.entrada, .campo input, .campo select, .campo textarea {
  width: 100%; min-height: 52px; padding: 0.8rem 1rem;
  border: 1.5px solid var(--linea-fuerte); border-radius: var(--radio-s);
  background: var(--superficie); color: var(--tinta);
  font: inherit; font-size: 16px; /* evita el zoom de iOS */
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none; appearance: none;
}
.campo textarea { min-height: 88px; resize: vertical; }
.campo select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23887f75' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 18px; padding-right: 2.6rem; }
.entrada:focus, .campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--acento);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 16%, transparent);
}
.campo.con-error input, .campo.con-error textarea { border-color: var(--error); }
.ayuda { display: block; font-size: 0.82rem; color: var(--tinta-3); margin-top: 0.35rem; }
.campo.con-error .ayuda { color: var(--error); }

/* ---------- Avisos ---------- */
.aviso { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.85rem 1rem; border-radius: var(--radio-s); font-size: 0.93rem; line-height: 1.45; margin: 0 0 1rem; }
.aviso .ico { margin-top: 0.12em; }
.aviso.ok { background: var(--ok-suave); color: var(--ok); }
.aviso.error { background: var(--error-suave); color: var(--error); }
.aviso.info { background: var(--acento-suave); color: var(--tinta-2); }
.aviso.info .ico { color: var(--acento-texto); }
.aviso.atencion { background: var(--aviso-suave); color: var(--aviso); }

/* ---------- Esqueletos de carga ---------- */
.esq { position: relative; overflow: hidden; background: color-mix(in srgb, var(--tinta) 7%, transparent); border-radius: var(--radio-s); }
.esq::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent); animation: brillo 1.3s infinite; }
@keyframes brillo { to { transform: translateX(100%); } }

/* ---------- Selector de idioma ---------- */
.idiomas { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.idiomas button { border: 0; background: transparent; color: inherit; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; padding: 0.38rem 0.7rem; border-radius: 999px; cursor: pointer; opacity: 0.75; min-height: 32px; }
.idiomas button[aria-pressed="true"] { background: #fff; color: #1d1915; opacity: 1; }
.idiomas.sobre-claro { background: var(--superficie); border-color: var(--linea); }
.idiomas.sobre-claro button[aria-pressed="true"] { background: var(--tinta); color: var(--fondo); }

/* ---------- Avisos flotantes (toast) ---------- */
#toasts { position: fixed; left: 50%; bottom: calc(24px + var(--alto-barra) + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 90; display: grid; gap: 8px; width: min(92vw, 420px); pointer-events: none; }
.toast { background: #1f1b17; color: #fff; padding: 0.85rem 1.1rem; border-radius: 14px; font-size: 0.93rem; box-shadow: var(--sombra-2); display: flex; gap: 0.6rem; align-items: center; animation: toastEntra 0.3s var(--ease); pointer-events: auto; }
.toast.error { background: #8f2f29; }
.toast .ico { color: #9fe0bd; }
.toast.error .ico { color: #ffd2cd; }
@keyframes toastEntra { from { opacity: 0; transform: translateY(10px); } }

/* ---------- Hoja inferior (modal) ---------- */
.velo { position: fixed; inset: 0; background: rgba(20, 16, 12, 0.45); z-index: 80; opacity: 0; transition: opacity 0.25s; backdrop-filter: blur(2px); }
.velo.visible { opacity: 1; }
.hoja {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 81;
  max-height: 92svh; overflow: auto; overscroll-behavior: contain;
  background: var(--superficie); color: var(--tinta);
  border-radius: 24px 24px 0 0; padding: 0.6rem 1.25rem calc(1.4rem + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform 0.32s var(--ease);
  box-shadow: 0 -10px 40px -10px rgba(0, 0, 0, 0.3);
}
.hoja.visible { transform: none; }
.hoja-asa { width: 40px; height: 4px; border-radius: 4px; background: var(--linea-fuerte); margin: 0 auto 0.9rem; }
.hoja-cab { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.hoja-cab h2 { font-size: 1.55rem; }
.hoja-cerrar { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--superficie-2); cursor: pointer; display: grid; place-items: center; color: var(--tinta-2); flex: none; }
@media (min-width: 720px) {
  .hoja { left: 50%; right: auto; bottom: auto; top: 50%; width: min(560px, 92vw); max-height: 88vh; border-radius: 24px; transform: translate(-50%, -46%); opacity: 0; transition: transform 0.3s var(--ease), opacity 0.25s; padding-bottom: 1.6rem; }
  .hoja.visible { transform: translate(-50%, -50%); opacity: 1; }
  .hoja.ancha { width: min(760px, 94vw); }
  .hoja-asa { display: none; }
}

/* =====================================================================
   PÁGINA DE RESERVA
   ===================================================================== */
.reserva-pg { min-height: 100svh; }

/* Portada */
.portada {
  position: relative; isolation: isolate;
  min-height: clamp(260px, 42svh, 420px);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(14px + env(safe-area-inset-top)) 20px 52px;
  color: #fff; overflow: hidden;
  background: #2a231d;
}
.portada-foto { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; transform: scale(1.04); animation: portadaZoom 9s var(--ease) forwards; }
@keyframes portadaZoom { to { transform: scale(1); } }
.portada::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(15, 12, 9, 0.35) 0%, rgba(15, 12, 9, 0.05) 35%, rgba(15, 12, 9, 0.68) 100%); }
.portada.sin-foto { color: var(--tinta); background: var(--fondo); }
.portada.sin-foto::after {
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--acento) 26%, transparent) 0%, transparent 60%),
    radial-gradient(90% 70% at 0% 100%, color-mix(in srgb, var(--acento) 14%, transparent) 0%, transparent 70%);
}
.portada.sin-foto .idiomas { background: var(--superficie); border-color: var(--linea); color: var(--tinta); }
.portada.sin-foto .idiomas button[aria-pressed="true"] { background: var(--tinta); color: var(--fondo); }
.portada.sin-foto .portada-enlace { background: var(--superficie); border-color: var(--linea); color: var(--tinta); }
.portada-arriba { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.portada-enlace { display: inline-flex; align-items: center; gap: 0.4rem; color: inherit; text-decoration: none; font-size: 0.85rem; font-weight: 500; padding: 0.45rem 0.85rem; border-radius: 999px; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); min-height: 38px; }
.portada-texto { max-width: 560px; }
.portada-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.22em; font-weight: 500; opacity: 0.9; margin-bottom: 0.7rem; }
.portada-eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: 0.8; }
.portada h1 { font-size: clamp(2.3rem, 9.5vw, 3.6rem); line-height: 1.02; }
.portada-sub { margin-top: 0.6rem; font-size: 1.02rem; opacity: 0.9; max-width: 34ch; }
.palabra { display: inline-block; opacity: 0; transform: translateY(0.4em); animation: palabraEntra 0.7s var(--ease) forwards; }
@keyframes palabraEntra { to { opacity: 1; transform: none; } }

/* Contenedor del flujo: una "hoja" que sube sobre la portada */
.flujo {
  position: relative; z-index: 2;
  margin-top: -28px;
  background: var(--fondo);
  border-radius: 26px 26px 0 0;
  padding: 22px 18px calc(120px + env(safe-area-inset-bottom));
  min-height: 60svh;
}
.flujo-interior { max-width: 620px; margin: 0 auto; }
body.embed .flujo { margin-top: 0; border-radius: 0; min-height: 0; padding-top: 16px; }

/* Barra de pasos */
.pasos-cab { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1.3rem; min-height: 44px; }
.atras { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linea); background: var(--superficie); display: grid; place-items: center; cursor: pointer; color: var(--tinta); flex: none; transition: transform 0.15s; }
.atras:active { transform: scale(0.94); }
.atras[hidden] { display: none; }
.pasos { flex: 1; }
.pasos-txt { font-size: 0.78rem; color: var(--tinta-3); letter-spacing: 0.04em; margin-bottom: 0.45rem; display: flex; justify-content: space-between; }
.pasos-txt b { color: var(--tinta-2); font-weight: 600; }
.pasos-barra { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pasos-barra i { height: 4px; border-radius: 4px; background: var(--linea-fuerte); overflow: hidden; position: relative; }
.pasos-barra i::after { content: ""; position: absolute; inset: 0; background: var(--acento); transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease); }
.pasos-barra i.hecho::after { transform: scaleX(1); }
.flujo-idioma { margin-left: auto; }

.paso { animation: pasoEntra 0.42s var(--ease); }
@keyframes pasoEntra { from { opacity: 0; transform: translateY(10px); } }
.paso-titulo { font-size: clamp(1.75rem, 6.5vw, 2.2rem); margin-bottom: 0.35rem; }
.paso-sub { color: var(--tinta-2); margin-bottom: 1.4rem; }
.grupo-titulo { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--tinta-3); font-weight: 600; margin: 1.6rem 0 0.75rem; }
.grupo-titulo:first-child { margin-top: 0; }

/* Servicios */
.servicios { display: grid; gap: 12px; }
.servicio {
  display: flex; align-items: center; gap: 1rem; width: 100%; text-align: left;
  padding: 1.1rem 1.1rem 1.1rem 1.2rem;
  background: var(--superficie); border: 1.5px solid transparent; border-radius: var(--radio);
  box-shadow: var(--sombra-1); cursor: pointer;
  transition: border-color 0.2s, transform 0.18s var(--ease), box-shadow 0.2s;
}
.servicio:hover { border-color: color-mix(in srgb, var(--acento) 40%, transparent); }
.servicio:active { transform: scale(0.99); }
.servicio[aria-pressed="true"] { border-color: var(--acento); background: var(--acento-suave); }
.servicio-txt { flex: 1; min-width: 0; }
.servicio-nombre { display: block; font-family: var(--fuente-titulo); font-size: 1.3rem; line-height: 1.2; font-weight: 500; }
.servicio-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--tinta-2); font-size: 0.9rem; margin-top: 0.25rem; }
.servicio-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; margin-top: 0.55rem; font-size: 0.82rem; color: var(--tinta-3); }
.servicio-meta span { display: inline-flex; align-items: center; gap: 0.3rem; }
.servicio-lado { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; flex: none; }
.precio { font-weight: 600; font-size: 1.02rem; white-space: nowrap; }
.servicio-flecha { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--acento-suave); color: var(--acento-texto); }
.insignia { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.18rem 0.6rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; background: var(--acento-suave); color: var(--acento-texto); }

/* Resumen corto del servicio elegido (paso 2) */
.elegido { display: flex; align-items: center; gap: 0.8rem; padding: 0.8rem 0.9rem 0.8rem 1rem; border-radius: var(--radio-s); background: var(--superficie); border: 1px solid var(--linea); margin-bottom: 1.4rem; }
.elegido-txt { flex: 1; min-width: 0; }
.elegido-txt b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.elegido-txt span { font-size: 0.85rem; color: var(--tinta-3); }

/* Selector de fechas */
.fechas-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.7rem; }
.mes { font-family: var(--fuente-titulo); font-size: 1.35rem; }
.mes::first-letter { text-transform: uppercase; }
.fechas-flechas { display: none; gap: 6px; }
.fechas-flechas button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--linea); background: var(--superficie); cursor: pointer; display: grid; place-items: center; }
.fechas {
  display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity;
  padding: 4px 18px 10px; margin: 0 -18px 1.2rem;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent);
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent);
}
.fechas::-webkit-scrollbar { display: none; }
.fecha {
  flex: none; width: 62px; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 0.65rem 0 0.6rem; border-radius: 16px;
  background: var(--superficie); border: 1.5px solid var(--linea); cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.fecha-dia { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tinta-3); font-weight: 600; }
.fecha-num { font-size: 1.35rem; font-weight: 600; line-height: 1.2; }
.fecha-punto { width: 5px; height: 5px; border-radius: 50%; background: var(--acento); opacity: 0.8; }
.fecha:disabled { cursor: default; background: transparent; border-style: dashed; }
.fecha:disabled .fecha-num { color: var(--tinta-3); font-weight: 400; }
.fecha:disabled .fecha-punto { visibility: hidden; }
.fecha[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); transform: translateY(-2px); box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--acento) 80%, transparent); }
.fecha[aria-pressed="true"] .fecha-dia { color: inherit; opacity: 0.85; }
.fecha[aria-pressed="true"] .fecha-punto { background: var(--sobre-acento); }

/* Horas */
.franja { margin-bottom: 1.2rem; }
.franja-titulo { display: flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; color: var(--tinta-3); font-weight: 600; margin-bottom: 0.6rem; }
.horas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hora {
  min-height: 50px; border-radius: 14px; border: 1.5px solid var(--linea);
  background: var(--superficie); cursor: pointer; font-weight: 600; font-size: 0.98rem;
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.12s;
}
.hora:hover { border-color: var(--acento); }
.hora:active { transform: scale(0.97); }
.hora[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.vacio { text-align: center; padding: 2rem 1rem; color: var(--tinta-2); background: var(--superficie); border-radius: var(--radio); border: 1px dashed var(--linea-fuerte); }
.vacio .ico { width: 34px; height: 34px; color: var(--tinta-3); margin: 0 auto 0.6rem; display: block; }
.vacio b { display: block; color: var(--tinta); font-weight: 600; margin-bottom: 0.25rem; }
.vacio .btn { margin-top: 1rem; }

/* Sesiones de taller */
.sesiones { display: grid; gap: 10px; }
.sesion {
  display: flex; gap: 1rem; align-items: center; width: 100%; text-align: left;
  padding: 0.95rem 1rem; border-radius: var(--radio); cursor: pointer;
  background: var(--superficie); border: 1.5px solid var(--linea);
  transition: border-color 0.2s, background 0.2s;
}
.sesion[aria-pressed="true"] { border-color: var(--acento); background: var(--acento-suave); }
.sesion:disabled { cursor: default; opacity: 0.55; }
.sesion-cal { flex: none; width: 58px; text-align: center; border-radius: 14px; overflow: hidden; background: var(--superficie-2); border: 1px solid var(--linea); }
.sesion-cal small { display: block; background: var(--acento); color: var(--sobre-acento); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 0; }
.sesion-cal b { display: block; font-size: 1.45rem; font-weight: 600; padding: 4px 0 5px; line-height: 1.1; }
.sesion-txt { flex: 1; min-width: 0; }
.sesion-txt strong { display: block; font-weight: 600; text-transform: capitalize; }
.sesion-txt > span { display: block; font-size: 0.88rem; color: var(--tinta-2); }
.plazas { height: 5px; border-radius: 5px; background: var(--linea); margin: 0.55rem 0 0.3rem; overflow: hidden; }
.plazas i { display: block; height: 100%; background: var(--acento); border-radius: 5px; }
.sesion-txt .plazas-txt { font-size: 0.8rem; color: var(--tinta-3); }
.sesion-txt .plazas-txt.pocas { color: var(--aviso); font-weight: 600; }

/* Resumen de la reserva */
.resumen { background: var(--superficie); border-radius: var(--radio); padding: 1.1rem 1.2rem; box-shadow: var(--sombra-1); margin-bottom: 1.4rem; }
.resumen-titulo { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.7rem; }
.resumen-titulo h3 { font-size: 1.35rem; }
.filas { display: grid; gap: 0.55rem; margin: 0; }
.fila { margin: 0; display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.95rem; }
.fila .ico { color: var(--acento-texto); margin-top: 0.15em; }
.fila .v { flex: 1; min-width: 0; }
.fila .v::first-letter { text-transform: uppercase; }
.resumen-total { display: flex; justify-content: space-between; margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px dashed var(--linea-fuerte); font-weight: 600; }

/* Barra de acción inferior (móvil) */
.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--superficie) 88%, transparent);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-top: 1px solid var(--linea);
  display: flex; align-items: center; gap: 12px;
  transform: translateY(110%); visibility: hidden;
  transition: transform 0.35s var(--ease), visibility 0s linear 0.35s;
}
.barra.visible { transform: none; visibility: visible; transition: transform 0.35s var(--ease), visibility 0s; }
.barra-txt { flex: 1; min-width: 0; line-height: 1.3; }
.barra-txt b { display: block; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-txt span { font-size: 0.82rem; color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.barra .btn { flex: none; min-width: 140px; }

.politica { display: flex; gap: 0.6rem; font-size: 0.85rem; color: var(--tinta-2); margin: 0.3rem 0 1.2rem; line-height: 1.45; }
.politica .ico { color: var(--acento-texto); margin-top: 0.1em; }
.politica + .politica { margin-top: -0.7rem; color: var(--tinta-3); }

/* Confirmación */
.exito { text-align: center; }
.exito-cab {
  position: relative; border-radius: var(--radio); overflow: hidden; margin-bottom: 1.5rem;
  min-height: 180px; display: grid; place-items: center; isolation: isolate;
  background:
    radial-gradient(100% 80% at 50% 0%, color-mix(in srgb, var(--acento) 30%, transparent), transparent 70%),
    var(--acento-suave);
}
.exito-cab.con-foto { min-height: 210px; }
.exito-cab.con-foto::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--foto) center/cover; }
.exito-cab.con-foto::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(20, 16, 12, 0.35); }
.check { width: 76px; height: 76px; border-radius: 50%; background: var(--superficie); display: grid; place-items: center; box-shadow: var(--sombra-2); animation: checkEntra 0.5s var(--ease) both; }
.check svg { width: 38px; height: 38px; }
.check path { fill: none; stroke: var(--acento); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; animation: trazo 0.55s 0.3s var(--ease) forwards; }
@keyframes checkEntra { from { transform: scale(0.6); opacity: 0; } }
@keyframes trazo { to { stroke-dashoffset: 0; } }
.exito h2 { font-size: clamp(2rem, 7vw, 2.5rem); margin-bottom: 0.4rem; }
.exito > p { color: var(--tinta-2); margin-bottom: 1.4rem; }
.exito .resumen { text-align: left; }
.codigo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; border-radius: var(--radio); border: 1.5px dashed color-mix(in srgb, var(--acento) 55%, transparent); background: var(--acento-suave); text-align: left; margin-bottom: 0.5rem; }
.codigo small { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--tinta-3); }
.codigo b { font-size: 1.7rem; letter-spacing: 0.2em; font-weight: 600; font-variant-numeric: tabular-nums; }
.codigo-nota { font-size: 0.84rem; color: var(--tinta-3); margin-bottom: 1.5rem; text-align: left; }
.acciones { display: grid; gap: 10px; }
.acciones-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Pie */
.pie { text-align: center; font-size: 0.8rem; color: var(--tinta-3); padding: 2.2rem 1rem 0; }
.pie a { color: inherit; }

/* ---------- Escritorio: portada a la izquierda, flujo a la derecha ---------- */
@media (min-width: 980px) {
  .reserva-pg:not(.embed) { display: grid; grid-template-columns: minmax(380px, 44%) 1fr; }
  .reserva-pg:not(.embed) .portada { position: sticky; top: 0; height: 100vh; min-height: 0; padding: 32px 44px 56px; }
  .reserva-pg:not(.embed) .portada h1 { font-size: clamp(3rem, 4.6vw, 4.6rem); }
  .reserva-pg:not(.embed) .flujo { margin: 0; border-radius: 0; padding: 48px 48px 130px; min-height: 100vh; }
  .fechas-flechas { display: flex; }
  .horas { grid-template-columns: repeat(4, 1fr); }
  .barra { left: auto; width: calc(56% - 0px); }
  .reserva-pg.embed .barra { width: auto; left: 0; }
}
@media (min-width: 980px) and (max-width: 1180px) { .barra { width: 56%; } }

/* =====================================================================
   MIS RESERVAS
   ===================================================================== */
.mis-pg .portada { min-height: clamp(200px, 30svh, 280px); }
.tarjeta { background: var(--superficie); border-radius: var(--radio); padding: 1.3rem 1.2rem; box-shadow: var(--sombra-1); margin-bottom: 1rem; }
.tarjeta h2 { font-size: 1.6rem; margin-bottom: 0.35rem; }
.tarjeta > p.sub { color: var(--tinta-2); margin-bottom: 1.2rem; }
.estado { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; font-weight: 600; padding: 0.25rem 0.7rem; border-radius: 999px; background: var(--ok-suave); color: var(--ok); }
.estado.cancelada { background: var(--error-suave); color: var(--error); }

/* =====================================================================
   ACCESOS (login) Y PORTADA DE LA PLATAFORMA
   ===================================================================== */
.acceso-pg { min-height: 100svh; display: grid; }
.acceso-arte { display: none; }
.acceso-caja { display: flex; flex-direction: column; justify-content: center; padding: calc(28px + env(safe-area-inset-top)) 22px 40px; max-width: 460px; width: 100%; margin: 0 auto; }
.acceso-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: auto; padding-bottom: 2.5rem; }
.marca-plataforma { font-family: var(--fuente-titulo); font-size: 1.35rem; letter-spacing: 0.02em; }
.marca-plataforma small { font-family: var(--fuente); font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--tinta-3); display: block; }
.acceso-caja h1 { font-size: clamp(2.3rem, 9vw, 3rem); margin-bottom: 0.5rem; }
.acceso-caja .sub { color: var(--tinta-2); margin-bottom: 2rem; }
.acceso-pie { margin-top: auto; padding-top: 2.5rem; font-size: 0.8rem; color: var(--tinta-3); }
.ver-clave { position: relative; }
.ver-clave input { padding-right: 3.2rem; }
.ver-clave button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border: 0; background: transparent; color: var(--tinta-3); cursor: pointer; display: grid; place-items: center; border-radius: 50%; }
@media (min-width: 900px) {
  .acceso-pg { grid-template-columns: 1.1fr 1fr; }
  .acceso-arte {
    display: flex; flex-direction: column; justify-content: flex-end; padding: 56px; color: #f7f1ea;
    background:
      radial-gradient(80% 60% at 80% 10%, rgba(214, 170, 120, 0.35), transparent 60%),
      radial-gradient(70% 70% at 0% 100%, rgba(164, 104, 63, 0.45), transparent 65%),
      #1e1915;
  }
  .acceso-arte h2 { font-size: clamp(2.6rem, 4vw, 3.8rem); max-width: 12ch; }
  .acceso-arte p { margin-top: 1rem; max-width: 36ch; opacity: 0.8; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .palabra { opacity: 1; transform: none; }
}

/* =====================================================================
   v5 — Guía con vídeo, recordatorios, enlace de la cita y condiciones
   ===================================================================== */
/* "¿Primera vez?": miniatura del vídeo + texto */
.guia {
  display: flex; gap: 0.95rem; align-items: center; padding: 0.85rem; margin: 0 0 1.6rem;
  background: var(--superficie); border-radius: var(--radio); box-shadow: var(--sombra-1);
  border: 1px solid color-mix(in srgb, var(--acento) 18%, transparent);
  animation: subeSuave 0.5s 0.15s var(--ease) both; transition: opacity 0.25s, transform 0.25s;
}
.guia.saliendo { opacity: 0; transform: translateY(-6px); }
.guia-video {
  position: relative; flex: none; width: 86px; aspect-ratio: 9 / 13; border: 0; padding: 0; cursor: pointer;
  border-radius: 14px; overflow: hidden; color: #fff;
  background: radial-gradient(120% 90% at 20% 10%, color-mix(in srgb, var(--acento) 70%, #fff) 0%, var(--acento) 55%, color-mix(in srgb, var(--acento) 70%, #000) 100%);
}
.guia-video::before { /* teléfono dibujado dentro de la miniatura */
  content: ""; position: absolute; left: 50%; top: 14%; width: 44%; height: 66%; transform: translateX(-50%);
  border-radius: 9px; border: 2px solid rgba(255,255,255,0.85); background: rgba(255,255,255,0.12);
}
.guia-play {
  position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%;
  background: #fff; color: var(--acento); display: grid; place-items: center; box-shadow: 0 6px 16px -6px rgba(0,0,0,0.5);
}
.guia-play .ico { width: 15px; height: 15px; margin-left: 2px; }
.guia-play svg path { fill: currentColor; }
.guia-dur { position: absolute; right: 6px; bottom: 5px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; background: rgba(0,0,0,0.35); padding: 0 5px; border-radius: 6px; }
.guia-txt { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.guia-txt b { font-family: var(--fuente-titulo); font-weight: 500; font-size: 1.22rem; line-height: 1.15; }
.guia-txt > span { font-size: 0.86rem; color: var(--tinta-2); line-height: 1.4; }
.guia-botones { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.45rem; }
.guia-botones .btn .ico svg path { fill: currentColor; }
@keyframes subeSuave { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Hoja del vídeo */
.video-caja { position: relative; margin: 0 auto; width: min(100%, 320px); aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; background: #15110e; box-shadow: var(--sombra-2); }
.video-guia { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-repetir {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 1rem; border-radius: 999px; border: 0; cursor: pointer; background: rgba(255,255,255,0.92); color: #1d1915; font-weight: 600; font-size: 0.88rem;
}
.pasos-app { list-style: none; padding: 0; margin: 0.4rem 0 0; display: grid; gap: 0.55rem; }
.pasos-app li { display: grid; grid-template-columns: 26px 22px 1fr; gap: 0.6rem; align-items: start; font-size: 0.92rem; color: var(--tinta-2); line-height: 1.4; }
.pasos-app li .ico { color: var(--acento-texto); width: 20px; height: 20px; margin-top: 2px; }
.pasos-app-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 0.78rem; font-weight: 700; background: var(--acento-suave); color: var(--acento-texto); }

/* Tarjeta del recordatorio */
.tarjeta-aviso {
  display: flex; gap: 0.85rem; align-items: flex-start; text-align: left; padding: 1rem 1.05rem; margin: 0 0 1.1rem;
  border-radius: var(--radio); background: var(--acento-suave); border: 1px solid color-mix(in srgb, var(--acento) 22%, transparent);
}
.tarjeta-aviso > .ico { width: 24px; height: 24px; color: var(--acento-texto); margin-top: 0.1rem; }
.tarjeta-aviso > div { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.tarjeta-aviso b { font-weight: 600; }
.tarjeta-aviso > div > span { font-size: 0.89rem; color: var(--tinta-2); line-height: 1.45; }
.tarjeta-aviso .tarjeta-aviso-nota { font-size: 0.82rem; color: var(--tinta-3); }
.tarjeta-aviso-botones { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.55rem; }
.tarjeta-aviso.activo { background: var(--ok-suave); border-color: transparent; }
.tarjeta-aviso.activo > .ico, .tarjeta-aviso.activo b { color: var(--ok); }

/* Confirmación pendiente (solicitud) */
.check circle { fill: none; stroke: var(--acento); stroke-width: 2.2; }
.exito-cab.pendiente .check path { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
.estado.pendiente { background: var(--aviso-suave); color: var(--aviso); }

/* Enlace de la cita */
.pregunta { font-family: var(--fuente-titulo); font-size: 1.45rem; line-height: 1.2; margin: 0.2rem 0 0.35rem; }
.cita-plazo { font-size: 0.9rem; color: var(--tinta-2); margin-bottom: 1rem; }

/* Condiciones */
.condiciones h3 { font-size: 1.2rem; margin: 1.1rem 0 0.3rem; }
.condiciones h3:first-child { margin-top: 0; }
.condiciones p { color: var(--tinta-2); font-size: 0.93rem; line-height: 1.55; }
.condiciones .condiciones-pie { margin-top: 1.2rem; font-size: 0.85rem; color: var(--tinta-3); }

@media (prefers-reduced-motion: reduce) { .guia { animation: none; } }

/* Confirmación sin código y "Mis reservas" (citas guardadas en el teléfono) */
.guarda-cita { display: flex; gap: 0.6rem; text-align: left; font-size: 0.86rem; color: var(--tinta-3); line-height: 1.45; margin: 0 0 1.2rem; }
.guarda-cita .ico { color: var(--acento-texto); margin-top: 0.1em; }
.mis-citas { display: grid; gap: 10px; margin-bottom: 1rem; }
.mi-cita {
  display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 0.9rem; border-radius: var(--radio);
  background: var(--superficie); box-shadow: var(--sombra-1); color: inherit; text-decoration: none;
  border: 1px solid transparent; transition: border-color 0.2s, transform 0.15s;
}
.mi-cita:hover { border-color: var(--linea-fuerte); }
.mi-cita:active { transform: scale(0.995); }
.mi-cita.apagada { opacity: 0.62; box-shadow: none; border-color: var(--linea); }
.mi-cita-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; align-items: flex-start; }
.mi-cita-txt b { font-weight: 600; }
.mi-cita-txt > span:not(.estado) { font-size: 0.88rem; color: var(--tinta-2); }
.mi-cita-txt .mi-cita-negocio { color: var(--tinta-3); font-size: 0.82rem; }
.mi-cita-txt .estado { margin-top: 0.3rem; }

/* v6: mover la cita, "Tus citas" y lista de espera */
.estado.reservada { background: var(--acento-suave); color: var(--acento-texto); }
.cita-ayuda { margin: 0.2rem 0 0.4rem; font-size: 0.84rem; color: var(--tinta-3); line-height: 1.45; }
.hora.actual { cursor: default; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.05rem; line-height: 1.1;
  background: repeating-linear-gradient(-45deg, var(--superficie-2), var(--superficie-2) 6px, var(--superficie) 6px, var(--superficie) 12px);
  border-style: dashed; color: var(--tinta-3); }
.hora.actual small { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.02em; }
.sesion.actual { border-style: dashed; }
.hoja-pie-fijo { position: sticky; bottom: calc(-1.4rem - env(safe-area-inset-bottom)); margin: 1rem -1.25rem calc(-1.4rem - env(safe-area-inset-bottom));
  padding: 0.8rem 1.25rem calc(1rem + env(safe-area-inset-bottom)); background: var(--superficie); border-top: 1px solid var(--linea); z-index: 2; }
.tus-citas { margin: 0 0 1.4rem; padding: 1rem; border-radius: var(--radio); background: var(--superficie); box-shadow: var(--sombra-1); }
.tus-citas-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.7rem; }
.tus-citas-cab b { font-family: var(--fuente-titulo); font-size: 1.3rem; font-weight: 500; }
.tus-citas-cab .enlace { font-size: 0.88rem; }
.mi-cita.mi-cita-mini { box-shadow: none; background: var(--acento-suave); padding: 0.7rem 0.75rem; margin-bottom: 8px; }
.mi-cita.mi-cita-mini .sesion-cal { width: 50px; background: var(--superficie); }
.tus-citas-ayuda { font-size: 0.82rem; color: var(--tinta-3); margin: 0.1rem 0 0; }
.espera-mini { display: flex; align-items: center; gap: 0.6rem; font-size: 0.88rem; color: var(--tinta-2); padding: 0.55rem 0.2rem 0; }
.espera-mini span { flex: 1; min-width: 0; }
.espera-mini .ico { color: var(--acento-texto); flex: none; }
.espera-cta { display: flex; gap: 0.85rem; align-items: flex-start; margin: 1.4rem 0 0; padding: 1rem 1.05rem; border-radius: var(--radio); border: 1px dashed var(--linea-fuerte); background: var(--superficie); }
.espera-cta > .ico { width: 24px; height: 24px; color: var(--acento-texto); flex: none; margin-top: 0.1rem; }
.espera-cta > div { display: flex; flex-direction: column; gap: 0.25rem; align-items: flex-start; min-width: 0; }
.espera-cta b { font-weight: 600; }
.espera-cta span { font-size: 0.88rem; color: var(--tinta-2); line-height: 1.45; }
.espera-cta .btn { margin-top: 0.55rem; }
.espera-cta.activa { border-style: solid; border-color: transparent; background: var(--ok-suave); }
.espera-cta.activa > .ico, .espera-cta.activa b { color: var(--ok); }
.espera-srv { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 0.9rem; border-radius: var(--radio-s); background: var(--acento-suave); margin-bottom: 0.9rem; }
.espera-srv .ico { color: var(--acento-texto); }
.espera-hecha { text-align: center; padding: 0.4rem 0 1rem; }
.espera-hecha .check { margin: 0 auto 0.9rem; }
.espera-hecha h3 { font-size: 1.45rem; margin-bottom: 0.35rem; }
.espera-hecha p { color: var(--tinta-2); }
.aviso-hueco { animation: subeSuave 0.4s var(--ease) both; }

/* v6: animación "cómo instalar" (teléfono dibujado; ver RA.app.animInstalar) */
.ai { --ai-t: 9s; display: flex; gap: 14px; align-items: center; margin: 0.4rem 0 0.2rem; text-align: left; -webkit-text-size-adjust: none; text-size-adjust: none; }
.ai-tel * { -webkit-text-size-adjust: none; text-size-adjust: none; max-height: 1000000px; }
.ai-tel { flex: none; width: 128px; height: 236px; padding: 4px; border-radius: 24px; background: #1f1b18; box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.5); }
.ai-pan { position: relative; width: 120px; height: 228px; border-radius: 20px; overflow: hidden; background: color-mix(in srgb, var(--fondo) 85%, #fff); }
.ai-web { position: absolute; inset: 0; }
.ai-chrome { position: absolute; top: 8px; left: 6px; right: 6px; height: 16px; border-radius: 8px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); }
.ai-url { position: absolute; left: 6px; right: 18px; top: 5px; height: 5px; border-radius: 3px; background: rgba(0, 0, 0, 0.12); }
.ai-mas { position: absolute; right: 4px; top: 2px; width: 8px; height: 11px; display: grid; justify-items: center; align-content: space-evenly; }
.ai-mas i { width: 2.4px; height: 2.4px; border-radius: 50%; background: #333; }
.ai-hero { position: absolute; left: 0; right: 0; top: 28px; height: 56px; display: grid; place-items: center; background: linear-gradient(135deg, var(--acento), color-mix(in srgb, var(--acento) 60%, #000)); }
.ai-ios .ai-hero { top: 0; height: 74px; }
.ai-hero b { font-family: var(--fuente-titulo); color: #fff; font-size: 22px; font-weight: 500; opacity: 0.95; }
.ai-lin { position: absolute; left: 10px; right: 30px; top: 94px; height: 6px; border-radius: 3px; background: rgba(0, 0, 0, 0.14); }
.ai-lin.corta { top: 106px; right: 56px; background: rgba(0, 0, 0, 0.08); }
.ai-tarj { position: absolute; left: 8px; right: 8px; top: 120px; height: 28px; border-radius: 8px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
.ai-tarj + .ai-tarj { top: 154px; }
.ai-safari { position: absolute; left: 0; right: 0; bottom: 0; height: 32px; background: rgba(248, 248, 248, 0.97); border-top: 1px solid rgba(0, 0, 0, 0.08); }
.ai-safari .ai-url { left: 14px; right: 14px; top: 4px; height: 7px; }
.ai-iconos { position: absolute; left: 0; right: 0; bottom: 4px; height: 14px; display: flex; justify-content: space-around; align-items: center; }
.ai-iconos i { width: 8px; height: 8px; border-radius: 2px; border: 1.5px solid #2f7cf6; opacity: 0.55; }
.ai-compartir { position: relative; width: 9px; height: 9px; border: 1.5px solid #2f7cf6; border-top-color: transparent; border-radius: 1px; }
.ai-compartir::before { content: ""; position: absolute; left: 2px; top: -6px; width: 1.5px; height: 8px; background: #2f7cf6; }
.ai-compartir::after { content: ""; position: absolute; left: 0.2px; top: -6px; width: 4px; height: 4px; border-left: 1.5px solid #2f7cf6; border-top: 1.5px solid #2f7cf6; transform: rotate(45deg); }
.ai-menu { position: absolute; top: 20px; right: 6px; width: 82px; padding: 4px; border-radius: 6px; background: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22); transform-origin: top right; opacity: 0; animation: ai-menu var(--ai-t) infinite; }
.ai-menu span, .ai-hoja span { display: block; height: 14px; border-radius: 4px; }
.ai-menu span:not(.ai-op), .ai-hoja span:not(.ai-op) { margin: 3px 4px; height: 6px; background: rgba(0, 0, 0, 0.1); }
.ai-op { display: flex !important; align-items: center; gap: 4px; padding: 0 5px; font-size: 6.6px; font-weight: 700; color: #222; white-space: nowrap; animation: ai-op var(--ai-t) infinite; }
.ai-hoja { position: absolute; left: 4px; right: 4px; bottom: 0; height: 74px; padding: 10px 6px; border-radius: 12px 12px 0 0; background: #f2f2f4; box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.18); transform: translateY(105%); animation: ai-hoja var(--ai-t) infinite; }
.ai-hoja .ai-op { height: 18px; background: #fff; }
.ai-hoja .ai-op em { width: 8px; height: 8px; border-radius: 2px; border: 1.3px solid #555; flex: none; }
.ai-inicio { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 18px); gap: 12px 8px; padding: 34px 14px; align-content: start;
  background: linear-gradient(160deg, #cdb9a7, #8d796a); opacity: 0; animation: ai-inicio var(--ai-t) infinite; }
.ai-inicio i { width: 18px; height: 18px; border-radius: 5px; background: rgba(255, 255, 255, 0.38); }
.ai-app { width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; background: var(--acento); color: #fff; font-size: 10px; font-weight: 600; font-family: var(--fuente-titulo); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); transform: scale(0); animation: ai-app var(--ai-t) infinite; }
.ai-noti { position: absolute; top: 8px; left: 6px; right: 6px; display: flex; gap: 5px; align-items: center; padding: 6px; border-radius: 10px; background: rgba(255, 255, 255, 0.97); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2); transform: translateY(-160%); animation: ai-noti var(--ai-t) infinite; }
.ai-noti b { flex: none; width: 15px; height: 15px; border-radius: 4px; display: grid; place-items: center; background: var(--acento); color: #fff; font-size: 8px; font-family: var(--fuente-titulo); }
.ai-noti span { display: flex; flex-direction: column; font-size: 6.2px; line-height: 1.25; color: #444; min-width: 0; }
.ai-noti strong { font-size: 6.8px; color: #111; }
.ai-dedo { position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: rgba(40, 40, 40, 0.38); border: 2px solid rgba(255, 255, 255, 0.85); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); opacity: 0; animation: ai-dedo-and var(--ai-t) infinite; }
.ai-ios .ai-dedo { animation-name: ai-dedo-ios; }
.ai-lado { flex: 1; min-width: 0; }
.ai-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ai-pasos li { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; border-radius: 10px; font-size: 0.84rem; line-height: 1.35; color: var(--tinta-3); }
.ai-pasos li span { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 0.72rem; font-weight: 700; background: var(--superficie-2); color: var(--tinta-2); }
.ai-pasos .ai-p1 { animation: ai-p1 var(--ai-t) infinite; }
.ai-pasos .ai-p2 { animation: ai-p2 var(--ai-t) infinite; }
.ai-pasos .ai-p3 { animation: ai-p3 var(--ai-t) infinite; }
.ai-so { display: inline-flex; margin: 8px 0 0 6px; padding: 2px; border-radius: 999px; border: 1px solid var(--linea); background: var(--superficie); }
.ai-so button { border: 0; background: transparent; padding: 4px 10px; border-radius: 999px; font: inherit; font-size: 0.76rem; font-weight: 600; color: var(--tinta-3); cursor: pointer; }
.ai-so button[aria-pressed="true"] { background: var(--tinta); color: var(--superficie); }
.ai.ai-pausa *, .ai.ai-pausa *::before, .ai.ai-pausa *::after { animation-play-state: paused !important; }
.tarjeta-aviso.tarjeta-instalar { flex-wrap: wrap; }
.tarjeta-instalar > div:not(.ai-caja):not(.ai-titulo) { flex: 1; }
.tarjeta-instalar .ai-caja, .tarjeta-instalar .ai-titulo, .tarjeta-instalar .ai-instalar { flex-basis: 100%; }
.tarjeta-instalar .ai-titulo { margin-top: 0.4rem; padding-top: 0.8rem; border-top: 1px solid color-mix(in srgb, var(--acento) 18%, transparent); font-size: 0.88rem; font-weight: 600; color: var(--tinta-2); }
.tarjeta-instalar .ai-instalar { justify-self: start; margin-top: 0.4rem; flex-basis: auto; }
@keyframes ai-menu { 0%, 12% { opacity: 0; transform: scale(0.85); } 15%, 31% { opacity: 1; transform: none; } 34%, 100% { opacity: 0; transform: scale(0.95); } }
@keyframes ai-hoja { 0%, 12% { transform: translateY(105%); } 16%, 31% { transform: none; } 35%, 100% { transform: translateY(105%); } }
@keyframes ai-op { 0%, 22% { background-color: transparent; } 25%, 33% { background-color: var(--acento-medio); } 36%, 100% { background-color: transparent; } }
@keyframes ai-inicio { 0%, 34% { opacity: 0; } 38%, 94% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes ai-app { 0%, 39% { transform: scale(0); } 43% { transform: scale(1.2); } 46%, 100% { transform: scale(1); } }
@keyframes ai-noti { 0%, 60% { transform: translateY(-160%); } 65%, 90% { transform: none; } 95%, 100% { transform: translateY(-160%); } }
@keyframes ai-dedo-and {
  0%, 3% { opacity: 0; transform: translate(97px, 5px) scale(1.4); }
  7% { opacity: 0.95; transform: translate(97px, 5px) scale(1); }
  10% { transform: translate(97px, 5px) scale(0.72); }
  13% { opacity: 0.95; transform: translate(97px, 5px) scale(1); }
  20% { opacity: 0.95; transform: translate(63px, 34px) scale(1); }
  26% { transform: translate(63px, 34px) scale(0.72); }
  29% { opacity: 0.95; transform: translate(63px, 34px) scale(1); }
  33%, 46% { opacity: 0; transform: translate(63px, 34px) scale(1.3); }
  49% { opacity: 0.95; transform: translate(64px, 92px) scale(1); }
  53% { transform: translate(64px, 92px) scale(0.72); }
  56% { opacity: 0.95; transform: translate(64px, 92px) scale(1); }
  60%, 100% { opacity: 0; transform: translate(64px, 92px) scale(1.3); }
}
@keyframes ai-dedo-ios {
  0%, 3% { opacity: 0; transform: translate(49px, 199px) scale(1.4); }
  7% { opacity: 0.95; transform: translate(49px, 199px) scale(1); }
  10% { transform: translate(49px, 199px) scale(0.72); }
  13% { opacity: 0.95; transform: translate(49px, 199px) scale(1); }
  20% { opacity: 0.95; transform: translate(49px, 177px) scale(1); }
  26% { transform: translate(49px, 177px) scale(0.72); }
  29% { opacity: 0.95; transform: translate(49px, 177px) scale(1); }
  33%, 46% { opacity: 0; transform: translate(49px, 177px) scale(1.3); }
  49% { opacity: 0.95; transform: translate(64px, 92px) scale(1); }
  53% { transform: translate(64px, 92px) scale(0.72); }
  56% { opacity: 0.95; transform: translate(64px, 92px) scale(1); }
  60%, 100% { opacity: 0; transform: translate(64px, 92px) scale(1.3); }
}
@keyframes ai-p1 { 0%, 14% { color: var(--tinta); background: var(--superficie); box-shadow: var(--sombra-1); } 17%, 100% { color: var(--tinta-3); background: transparent; box-shadow: none; } }
@keyframes ai-p2 { 0%, 14% { color: var(--tinta-3); background: transparent; box-shadow: none; } 17%, 34% { color: var(--tinta); background: var(--superficie); box-shadow: var(--sombra-1); } 37%, 100% { color: var(--tinta-3); background: transparent; box-shadow: none; } }
@keyframes ai-p3 { 0%, 34% { color: var(--tinta-3); background: transparent; box-shadow: none; } 37%, 96% { color: var(--tinta); background: var(--superficie); box-shadow: var(--sombra-1); } 99%, 100% { color: var(--tinta-3); background: transparent; box-shadow: none; } }
@media (prefers-reduced-motion: reduce) {
  .ai *, .ai *::before, .ai *::after { animation: none !important; }
  .ai-inicio, .ai-app, .ai-noti { opacity: 1; transform: none; }
  .ai-dedo { display: none; }
  .ai-pasos li { color: var(--tinta); }
}

/* v6: confirmación guiada ("Antes de irte") */
.exito-sub { font-family: var(--fuente-titulo); font-size: 1.35rem; font-weight: 500; text-align: left; margin: 0.4rem 0 0.8rem; }
.paso-final { display: flex; gap: 0.85rem; align-items: flex-start; text-align: left; padding: 1rem 1.05rem; margin: 0 0 1.1rem; border-radius: var(--radio); background: var(--superficie); box-shadow: var(--sombra-1); }
.paso-final > .ico { width: 24px; height: 24px; color: var(--acento-texto); margin-top: 0.1rem; flex: none; }
.paso-final > div { flex: 1; min-width: 0; }
.paso-final b { display: block; font-weight: 600; }
.paso-final > div > span { display: block; font-size: 0.89rem; color: var(--tinta-2); line-height: 1.45; margin: 0.15rem 0 0.7rem; }
.paso-final .acciones-2 { grid-template-columns: 1fr; gap: 8px; }

/* v7: botón "Ayuda" de la cabecera */
.portada-der { display: inline-flex; align-items: center; gap: 0.45rem; }
.boton-ayuda { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 38px; padding: 0 0.8rem 0 0.6rem; border-radius: 999px; font: inherit; font-size: 0.85rem; font-weight: 500; color: inherit; cursor: pointer;
  background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.boton-ayuda .ico { width: 18px; height: 18px; }
.portada.sin-foto .boton-ayuda, .boton-ayuda.sobre-claro { background: var(--superficie); border-color: var(--linea); color: var(--tinta); }
.pasos-cab .boton-ayuda { margin-left: 0.4rem; min-height: 36px; padding: 0 0.6rem; }
.pasos-cab .boton-ayuda span { display: none; }
@media (max-width: 380px) { .portada-arriba .boton-ayuda span { display: none; } .portada-arriba .boton-ayuda { padding: 0 0.55rem; } }

/* v7: recordatorio en 2 pasos (1 instalar, 2 activar) */
.tarjeta-aviso.recordar { display: block; padding: 1.05rem 1.05rem 0.9rem; border-width: 1.5px; border-color: color-mix(in srgb, var(--acento) 36%, transparent); }
.tarjeta-aviso.recordar > .rp-cab { display: flex; flex-direction: row; gap: 0.85rem; align-items: flex-start; }
.rp-cab > .ico { width: 26px; height: 26px; color: var(--acento-texto); margin-top: 0.1rem; flex: none; }
.rp-cab > div { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.rp-cab b { font-family: var(--fuente-titulo); font-weight: 500; font-size: 1.28rem; line-height: 1.15; }
.rp-cab > div > span:last-child { font-size: 0.89rem; color: var(--tinta-2); line-height: 1.45; }
.rp-eyebrow { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--acento-texto); }
.rp-social { margin: 0.8rem 0 0; }
.rp-pasos { list-style: none; margin: 0.95rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.rp-paso { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.75rem 0.8rem; border-radius: var(--radio-s); background: var(--superficie); }
.rp-n { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 0.92rem; background: var(--acento); color: var(--sobre-acento); }
.rp-n .ico { width: 17px; height: 17px; }
.rp-txt { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1; }
.rp-txt b { font-weight: 600; font-size: 0.97rem; line-height: 1.3; }
.rp-txt > span { font-size: 0.86rem; color: var(--tinta-2); line-height: 1.45; }
.rp-btn { align-self: flex-start; margin-top: 0.45rem; }
.rp-paso.hecho { background: var(--ok-suave); }
.rp-paso.hecho .rp-n { background: var(--ok); color: #fff; }
.rp-paso.hecho b { color: var(--ok); }
.rp-paso.pendiente .rp-n { background: var(--superficie-2); color: var(--tinta-2); border: 1.5px solid var(--linea-fuerte); }
.rp-anim { padding: 0 0.2rem; }
.rp-anim .ai { margin: 0.1rem 0 0.1rem; }
.rp-orden { display: flex; gap: 0.55rem; align-items: flex-start; margin: 0.75rem 0 0; font-size: 0.84rem; font-weight: 500; line-height: 1.4; color: var(--aviso); }
.rp-orden .ico { flex: none; margin-top: 0.05rem; }
.rp-video { display: flex; align-items: center; gap: 0.6rem; width: 100%; margin: 0.8rem 0 0; padding: 0.55rem 0.7rem; border-radius: 999px; border: 1px solid var(--linea-fuerte);
  background: var(--superficie); color: var(--tinta); font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; min-height: 44px; }
.rp-video small { margin-left: auto; font-size: 0.78rem; font-weight: 600; color: var(--tinta-3); }
.rp-play { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--acento); color: var(--sobre-acento); flex: none; }
.rp-play .ico { width: 14px; height: 14px; margin-left: 2px; }
.rp-play svg path, .ayuda-mini .guia-play svg path { fill: currentColor; }
.paso-final .rp-eyebrow { margin-bottom: 0.1rem; color: var(--tinta-3); }
.duda { display: flex; gap: 0.5rem; justify-content: center; align-items: center; margin: 1.3rem 0 0.2rem; font-size: 0.85rem; color: var(--tinta-3); }
.duda .ico { width: 16px; height: 16px; }
.duda a { font-weight: 600; }

/* v7: hoja de ayuda (vídeos + preguntas) */
.ayuda-videos { display: grid; gap: 10px; }
.ayuda-video { display: flex; align-items: center; gap: 0.85rem; width: 100%; padding: 0.6rem 0.75rem 0.6rem 0.6rem; border-radius: var(--radio); border: 1px solid var(--linea);
  background: var(--superficie); color: var(--tinta); font: inherit; text-align: left; cursor: pointer; }
.ayuda-video:hover { border-color: color-mix(in srgb, var(--acento) 40%, transparent); }
.ayuda-video > .ico { color: var(--tinta-3); flex: none; }
.ayuda-mini { position: relative; flex: none; width: 54px; height: 86px; border-radius: 12px; overflow: hidden; background: #1c1814; }
.ayuda-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ayuda-mini .guia-play { top: 50%; width: 30px; height: 30px; }
.ayuda-mini .guia-play .ico { width: 13px; height: 13px; margin-left: 2px; }
.ayuda-txt { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; flex: 1; }
.ayuda-txt b { font-weight: 600; line-height: 1.3; }
.ayuda-txt small { font-size: 0.8rem; color: var(--tinta-2); line-height: 1.35; }
.ayuda-videos + .hoja-sub, .hoja-sub.ayuda-sub { font-family: var(--fuente-titulo); font-weight: 500; font-size: 1.25rem; margin: 1.5rem 0 0.7rem; }
.faq { display: grid; gap: 8px; }
.faq details { border-radius: var(--radio-s); background: var(--superficie); border: 1px solid var(--linea); }
.faq summary { list-style: none; cursor: pointer; padding: 0.85rem 2.4rem 0.85rem 0.95rem; font-weight: 600; font-size: 0.94rem; position: relative; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0.95rem; top: 50%; transform: translateY(-50%); font-size: 1.2rem; font-weight: 400; color: var(--acento-texto); }
.faq details[open] summary::after { content: "–"; }
.faq p { padding: 0 0.95rem 0.95rem; margin: 0; font-size: 0.9rem; color: var(--tinta-2); line-height: 1.5; }

/* =====================================================================
   v7.1 — Que se vea a la primera dónde está el vídeo
   ===================================================================== */
/* Miniatura con la portada real del vídeo */
.guia-video.con-portada { background: #1c1814; box-shadow: 0 10px 22px -12px rgba(0,0,0,0.55); }
.guia-video.con-portada::before { display: none; }
.guia-portada { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.guia-video.con-portada::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.45)); pointer-events: none; }
.guia-tag, .guia-dur, .guia-video.con-portada .guia-play { z-index: 2; }
.guia-tag {
  position: absolute; left: 6px; top: 6px; display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px 2px 4px;
  border-radius: 6px; background: rgba(0,0,0,0.55); color: #fff; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.guia-tag .ico { width: 10px; height: 10px; }
.guia-tag svg path { fill: currentColor; }
/* El play late suave para llamar la atención (sin exagerar) */
.guia-video.con-portada .guia-play { animation: latePlay 2.4s ease-out infinite; }
@keyframes latePlay {
  0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.75), 0 6px 16px -6px rgba(0,0,0,0.5); }
  70% { box-shadow: 0 0 0 14px rgba(255,255,255,0), 0 6px 16px -6px rgba(0,0,0,0.5); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0), 0 6px 16px -6px rgba(0,0,0,0.5); }
}
/* Cartelito encima del título: «Empieza por aquí · toca el vídeo» */
.guia-txt > .guia-cartel, .guia-cartel {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 0.35rem; margin-bottom: 0.15rem;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--acento-texto); line-height: 1.3;
}
.guia-cartel::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: puntoVivo 1.6s ease-in-out infinite; }
@keyframes puntoVivo { 50% { opacity: 0.25; } }
/* La tarjeta: miniatura | texto, y la pista ocupa la fila de abajo */
.guia { display: grid; grid-template-columns: auto minmax(0, 1fr); }
.guia > .pista-ayuda { grid-column: 1 / -1; margin: 0.1rem 0 0; padding-top: 0.65rem; border-top: 1px dashed var(--linea-fuerte); }
/* «Si te quedó alguna duda, está en Ayuda» */
.pista-ayuda { display: flex; gap: 0.5rem; align-items: flex-start; margin: 0.8rem 0 0; font-size: 0.8rem; line-height: 1.4; color: var(--tinta-3); }
.pista-ayuda .ico { flex: none; width: 16px; height: 16px; margin-top: 0.05rem; color: var(--acento-texto); }
.hoja .pista-ayuda { justify-content: center; text-align: left; margin: 0.75rem auto 0; max-width: 320px; }

/* Recordatorio: el vídeo como tarjeta, arriba, antes de los pasos */
.rp-video {
  display: flex; align-items: center; gap: 0.85rem; width: 100%; margin: 0.9rem 0 0.2rem; padding: 0.6rem 0.75rem 0.6rem 0.6rem;
  border-radius: var(--radio); border: 1.5px solid color-mix(in srgb, var(--acento) 45%, transparent); background: var(--superficie);
  color: var(--tinta); font: inherit; text-align: left; cursor: pointer; box-shadow: var(--sombra-1); min-height: 0;
}
.rp-video > .ico { flex: none; color: var(--acento); }
.rp-mini { width: 58px; aspect-ratio: 9 / 15; border-radius: 12px; pointer-events: none; }
.rp-mini .guia-play { width: 28px; height: 28px; }
.rp-mini .guia-play .ico { width: 12px; height: 12px; }
.rp-mini .guia-tag { display: none; }
.rp-video-txt { display: flex; flex-direction: column; gap: 0.12rem; flex: 1; min-width: 0; }
.rp-video-cartel { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--acento-texto); }
.rp-video-txt b { font-family: var(--fuente-titulo); font-weight: 500; font-size: 1.12rem; line-height: 1.15; }
.rp-video-txt small { font-size: 0.78rem; color: var(--tinta-3); margin: 0; }
.rp-video small { margin-left: 0; }

/* El botón de Ayuda late un momento para que se sepa dónde está */
.boton-ayuda.llama, .icono-btn.llama, .btn.llama { animation: llamaAyuda 1.3s ease-out 3; }
@keyframes llamaAyuda {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acento) 70%, transparent); }
  80% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--acento) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .guia-video.con-portada .guia-play, .guia-cartel::before, .llama { animation: none !important; }
}

/* =====================================================================
   v8 — Anticipo con tarjeta (reserva y cita), tope del plan Gratis,
   recordatorio por WhatsApp
   ===================================================================== */
/* Paso 3: lo que se paga ahora y lo que se paga en el salón */
.resumen-pago { margin-top: 0.85rem; padding: 0.75rem 0.85rem; border-radius: var(--radio-s); background: var(--acento-suave); display: grid; gap: 0.4rem; }
.resumen-pago-fila { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: 0.93rem; color: var(--tinta-2); }
.resumen-pago-fila > span { display: inline-flex; align-items: center; gap: 0.5rem; }
.resumen-pago-fila .ico { color: var(--acento-texto); }
.resumen-pago-fila.ahora { color: var(--tinta); font-weight: 600; }
.resumen-pago-fila.ahora b { font-size: 1.12rem; }
.politica.pago-seguro .ico { color: var(--ok); }
.pago-marcas { text-align: center; font-size: 0.78rem; color: var(--tinta-3); margin: 0.6rem 0 0; letter-spacing: 0.01em; }

/* "Te llevamos al pago seguro…" y "Confirmando tu pago…" */
.yendo-pago { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; padding: 2.4rem 1rem; }
.yendo-pago .giro { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--acento); border-right-color: transparent; animation: giro 0.8s linear infinite; margin-bottom: 0.6rem; }
.yendo-pago b { font-family: var(--fuente-titulo); font-weight: 500; font-size: 1.5rem; }
.yendo-pago > span { color: var(--tinta-2); font-size: 0.95rem; max-width: 34ch; }
.yendo-pago .enlace { margin-top: 0.6rem; }

/* Página de la cita: falta pagar el anticipo */
.pago-pendiente { display: grid; gap: 0.55rem; padding: 1rem; border-radius: var(--radio-s); background: var(--aviso-suave); border: 1px solid color-mix(in srgb, var(--aviso) 22%, transparent); }
.pago-pendiente > b { font-family: var(--fuente-titulo); font-weight: 500; font-size: 1.3rem; line-height: 1.2; color: var(--tinta); }
.pago-pendiente > span { font-size: 0.9rem; color: var(--tinta-2); line-height: 1.45; margin-bottom: 0.3rem; }
.pago-pendiente .pago-marcas { margin: -0.1rem 0 0; }
.fila.fila-pago .ico { color: var(--ok); }

/* Plan Gratis lleno: pedir la cita por WhatsApp */
.tope-mes { display: flex; gap: 0.85rem; align-items: flex-start; padding: 1rem 1.05rem; margin: 0 0 1.2rem; border-radius: var(--radio); background: var(--aviso-suave); border: 1px solid color-mix(in srgb, var(--aviso) 22%, transparent); }
.tope-mes > .ico { width: 24px; height: 24px; color: var(--aviso); margin-top: 0.1rem; }
.tope-mes > div { display: flex; flex-direction: column; gap: 0.25rem; align-items: flex-start; min-width: 0; }
.tope-mes b { font-weight: 600; }
.tope-mes span { font-size: 0.9rem; color: var(--tinta-2); line-height: 1.45; }
.tope-mes .btn { margin-top: 0.5rem; }

/* Recordatorio por WhatsApp (página de la cita) */
.tarjeta-aviso.wa { background: color-mix(in srgb, #1f8f5a 9%, var(--superficie)); border-color: color-mix(in srgb, #1f8f5a 24%, transparent); }
.tarjeta-aviso.wa > .ico { color: #1f8f5a; }
.tarjeta-aviso.wa.activo b { color: #1f8f5a; }
.check rect { fill: none; stroke: var(--acento); stroke-width: 2.2; }

/* =====================================================================
   v8 — Páginas legales (/legal/...), enlaces legales del pie y casilla
   de aceptación de las condiciones antes de pagar
   ===================================================================== */
.legal-pg { max-width: 760px; margin: 0 auto; padding: calc(22px + env(safe-area-inset-top)) 20px 48px; }
.legal-cab { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.4rem; }
.legal-cab .marca-plataforma { color: var(--tinta); text-decoration: none; }
.legal-nav { display: flex; gap: 0.4rem; overflow-x: auto; scrollbar-width: none; margin: 0 -20px 1.6rem; padding: 0 20px 0.2rem; }
.legal-nav::-webkit-scrollbar { display: none; }
.legal-nav a { flex: none; font-size: 0.86rem; padding: 0.45rem 0.85rem; border-radius: 999px; border: 1px solid var(--linea-fuerte); color: var(--tinta-2); text-decoration: none; white-space: nowrap; }
.legal-nav a[aria-current="page"] { background: var(--tinta); border-color: var(--tinta); color: var(--fondo); }
.legal-doc h1 { font-size: clamp(2.1rem, 8vw, 2.9rem); line-height: 1.08; margin-bottom: 0.4rem; }
.legal-fecha { font-size: 0.85rem; color: var(--tinta-3); margin: 0 0 1.2rem; }
.legal-intro { font-size: 1.04rem; color: var(--tinta-2); margin: 0 0 1.6rem; line-height: 1.6; }
.legal-doc section { padding: 1.25rem 0; border-top: 1px solid var(--linea); }
.legal-doc h2 { font-family: var(--fuente); font-weight: 600; font-size: 1.04rem; letter-spacing: 0; margin: 0 0 0.6rem; }
.legal-doc p, .legal-doc li { font-size: 0.97rem; line-height: 1.62; color: var(--tinta-2); overflow-wrap: anywhere; }
.legal-doc p { margin: 0 0 0.6rem; }
.legal-doc ul { margin: 0 0 0.6rem; padding-left: 1.15rem; display: grid; gap: 0.45rem; }
.legal-doc b { color: var(--tinta); font-weight: 600; }
.legal-pg .acceso-pie { text-align: center; }

/* Enlaces legales discretos (portada, accesos, página de reserva) */
.pie-legal { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; font-size: 0.78rem; color: var(--tinta-3); }
.pie-legal a { color: inherit; text-decoration: none; }
.pie-legal a:hover { color: var(--tinta-2); text-decoration: underline; }
.acceso-pie .pie-legal { margin-top: 0.45rem; }
.pie .pie-legal { justify-content: center; margin-top: 0.55rem; }

/* Paso 3 con anticipo: casilla de aceptación de las condiciones */
.acepto { display: flex; gap: 0.7rem; align-items: flex-start; margin: 0.9rem 0 1rem; padding: 0.8rem 0.9rem; border-radius: var(--radio-s); border: 1.5px solid var(--linea-fuerte); background: var(--superficie); cursor: pointer; font-size: 0.92rem; line-height: 1.45; color: var(--tinta-2); }
.acepto input { width: 20px; height: 20px; margin: 0.05rem 0 0; flex: none; accent-color: var(--acento); }
.acepto .enlace { font-size: inherit; }
.acepto.falta { border-color: var(--error); background: var(--error-suave); }
.acepto.falta span { color: var(--error); }
/* «¿No te salió en la pantalla?»: consejo plegado (lo decide el teléfono, no la web) */
.consejo-pantalla { margin-top: 0.6rem; font-size: 0.86rem; color: var(--tinta-2); }
.consejo-pantalla summary { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; font-weight: 600; color: var(--acento-texto); list-style: none; min-height: 32px; }
.consejo-pantalla summary::-webkit-details-marker { display: none; }
.consejo-pantalla summary .ico { width: 1.05em; height: 1.05em; flex: none; }
.consejo-pantalla p { margin: 0.25rem 0 0; line-height: 1.5; }
.tarjeta-aviso > div > span.aviso-prueba { color: var(--tinta); font-weight: 500; margin-top: 0.2rem; }

/* Casilla opcional dentro de un "¿Seguro?" (p. ej. «Me pidió cancelar») */
.confirmar-casilla { margin: 1rem 0 1.2rem; }
.confirmar-casilla span { color: var(--tinta); font-weight: 500; }
.confirmar-casilla small { display: block; font-weight: 400; font-size: 0.82rem; color: var(--tinta-3); margin-top: 0.15rem; }

/* v8b: solicitud sin cobro con tarjeta → «Confírmala por WhatsApp» (semiautomático) */
.confirma-wa { display: grid; gap: 0.8rem; margin: 1rem 0 1.2rem; padding: 1rem 1rem 1.05rem; border-radius: var(--radio-s); background: color-mix(in srgb, #1f8f5a 9%, var(--superficie)); border: 1.5px solid color-mix(in srgb, #1f8f5a 30%, transparent); text-align: left; }
.confirma-wa-cab { display: flex; gap: 0.75rem; align-items: flex-start; }
.confirma-wa-cab > .ico { width: 24px; height: 24px; color: #1f8f5a; flex: none; margin-top: 0.1rem; }
.confirma-wa-cab b { display: block; font-weight: 700; margin-bottom: 0.15rem; }
.confirma-wa-cab span { display: block; font-size: 0.9rem; color: var(--tinta-2); line-height: 1.45; }

/* Fotos de referencia al reservar (plan Pro) */
.fotos-ref { display: flex; flex-wrap: wrap; gap: 0.55rem; margin: 0.35rem 0 0.3rem; }
.foto-ref { position: relative; width: 84px; height: 84px; margin: 0; border-radius: var(--radio-s); overflow: hidden; box-shadow: var(--sombra-1); }
.foto-ref img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-ref-quitar { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: var(--tinta); display: grid; place-items: center; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.foto-ref-quitar .ico { width: 16px; height: 16px; }
.foto-ref-anadir { width: 84px; height: 84px; border: 1.5px dashed var(--linea-fuerte); border-radius: var(--radio-s); background: var(--superficie); color: var(--acento-texto); display: grid; place-items: center; align-content: center; gap: 0.2rem; cursor: pointer; font: inherit; font-size: 0.74rem; font-weight: 600; line-height: 1.15; text-align: center; padding: 0.3rem; }
.foto-ref-anadir .ico { width: 22px; height: 22px; }
.foto-ref-anadir:active { background: var(--superficie-2); }

/* Portada, acceso y registro */
.acceso-prueba { text-align: center; font-size: 0.88rem; color: var(--tinta-3); margin: 0.6rem 0 0; }
.acceso-alt { margin-top: 1.4rem; font-size: 0.92rem; color: var(--tinta-2); text-align: center; }
.acceso-alt a { font-weight: 600; color: var(--acento-texto); }
.acceso-caja .acepto { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.9rem; color: var(--tinta-2); margin: 0.8rem 0 0.2rem; }
.acceso-caja .acepto input { width: 20px; height: 20px; margin-top: 0.1rem; accent-color: var(--acento); flex: none; }
.acceso-caja .acepto.con-error { color: var(--error); }
.acceso-caja .campo.con-error input { border-color: var(--error); }
.acceso-caja .campo .ayuda { display: block; font-size: 0.8rem; color: var(--tinta-3); margin-top: 0.25rem; }
.registro-incluye { margin-top: 1.4rem; }
.registro-incluye summary { cursor: pointer; font-weight: 600; color: var(--tinta-2); font-size: 0.92rem; }
.registro-incluye .plan-lista { list-style: none; padding: 0; margin: 0.6rem 0 0; display: grid; gap: 0.4rem; font-size: 0.9rem; color: var(--tinta-2); }
.registro-incluye .plan-lista li::before { content: '✓'; color: var(--ok); font-weight: 700; margin-right: 0.45rem; }
/* Entrar con Google: botón según las normas de Google (fondo blanco, borde gris,
   logotipo «G» a la izquierda; versión oscura en negocios de fondo oscuro). */
.campo[hidden], .con-google[hidden], .g-cuenta[hidden] { display: none; }
.con-google { margin: 0 0 0.4rem; }
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 0.7rem;
  width: 100%; min-height: 52px; padding: 0 1.2rem; border-radius: 999px;
  background: #ffffff; color: #1f1f1f; border: 1px solid #747775;
  font-family: Roboto, Arial, system-ui, sans-serif; font-weight: 500; font-size: 1rem; letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer; transition: background 0.2s, box-shadow 0.2s;
}
.btn-google:hover { background: #f8faff; box-shadow: 0 1px 3px rgba(60, 64, 67, 0.25); }
.btn-google:active { background: #eef3fd; }
.btn-google .g-logo { flex: none; }
:root[data-tema="oscuro"] .btn-google { background: #131314; color: #e3e3e3; border-color: #8e918f; }
.separador { display: flex; align-items: center; gap: 0.8rem; margin: 1.1rem 0 1rem; font-size: 0.85rem; color: var(--tinta-3); }
.separador::before, .separador::after { content: ''; flex: 1; height: 1px; background: var(--linea-fuerte, var(--linea)); }
.g-en-app { margin-bottom: 0.7rem; }
.g-cuenta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 1rem; padding: 0.8rem 1rem; margin: 0 0 1.05rem; border-radius: var(--radio-s); background: var(--superficie); box-shadow: var(--sombra-1); }
.g-cuenta-txt { min-width: 0; }
.g-cuenta-txt small { display: block; font-size: 0.8rem; color: var(--tinta-3); }
.g-cuenta-txt b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.g-aparte { flex-basis: 100%; display: flex; gap: 0.5rem; align-items: flex-start; margin: 0.3rem 0 0; font-size: 0.86rem; color: var(--tinta-2); }
.g-aparte .ico { flex: none; color: var(--acento-texto); margin-top: 0.1em; }
.g-aparte a { font-weight: 600; color: var(--acento-texto); }
.elegir-negocio h2 { margin: 0 0 0.4rem; }
.elegir-negocio .items { margin: 1rem 0; }
.elegir-negocio .items { display: grid; gap: 10px; }
.elegir-negocio .item { display: flex; align-items: center; gap: 0.9rem; width: 100%; text-align: left; padding: 1rem 0.8rem 1rem 1.05rem; border-radius: var(--radio-s); background: var(--superficie); box-shadow: var(--sombra-1); border: 1px solid transparent; cursor: pointer; font: inherit; color: inherit; }
.elegir-negocio .item-txt { flex: 1; min-width: 0; }
.elegir-negocio .item-txt b { display: block; font-weight: 600; }
.elegir-negocio .item-txt span { font-size: 0.86rem; color: var(--tinta-3); display: block; }
.elegir-negocio .item-lado { display: flex; align-items: center; color: var(--tinta-3); }
.elegir-negocio .item-icono { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--acento-suave); color: var(--acento-texto); flex: none; }