/* JOLIE · Landing de clientas — piel "Glovo adulto"
   Misma estructura (cesta, Cesta → Cuándo → Tus datos → Hecho, hojas, carruseles)
   con estética sobria: fondo cálido, tarjetas blancas con borde de 1px, un solo
   acento ciruela y bloques de categoría en tonos apagados con el icono en blanco.
   Móvil primero (320–390). ≥768: hojas como modal centrado. ≥1024: cesta lateral fija.
   Estructura: hero a pantalla completa (sin barra) → al bajar aparecen el menú de
   cristal arriba y la barra fija abajo (body.past-hero, lo pone UN IntersectionObserver).
   Los componentes (.btn, .sheet, .pill, .choice, .stepper, .steps-bar, .cat-block,
   .cat-mini, .ico-tile…) están en css/components.css y styles.css; aquí solo va
   lo propio de esta pantalla. Iconos: siempre currentColor (los pinta el contenedor). */

/* Medidas del menú de cristal (el buscador pegajoso se coloca justo debajo) */
:root {
  --glass-top: calc(10px + env(safe-area-inset-top));
  --glass-h: 56px;
  --tools-top: calc(var(--glass-top) + var(--glass-h) + 6px);
  --dock-h: 82px;       /* WhatsApp a Marcela (sin safe area) */
  --dock-cart-h: 150px; /* + barra de cesta encima */
}

/* La barra fija inferior no tapa el final de la página */
body.cv { padding-bottom: calc(var(--dock-h) + 14px + env(safe-area-inset-bottom)); }
body.cv.has-cart { padding-bottom: calc(var(--dock-cart-h) + 14px + env(safe-area-inset-bottom)); }
html { scroll-padding-top: calc(var(--glass-top) + var(--glass-h) + 12px); }

/* Saltar al contenido (visible solo con teclado) */
.skip {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: var(--z-toast);
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  padding: 0 18px;
  border-radius: var(--r-btn);
  background: var(--plum);
  color: #fff;
  font-weight: 600;
  transition: top var(--dur-1) var(--ease-out);
}
.skip:focus { top: 12px; outline-color: var(--ink); }
#servicios:focus { outline: none; }

/* =========================================================
   Hero a pantalla completa: marca arriba, titular, horario
   y los dos CTA apilados en la zona del pulgar. Sin fotos.
   ========================================================= */
.hero {
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(18px + env(safe-area-inset-top)) var(--pad) calc(6px + env(safe-area-inset-bottom));
  /* Luz cálida muy suave (ciruela arriba, arena abajo): da profundidad sin fotos ni adornos */
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(79, 35, 80, .075), transparent 60%),
    radial-gradient(100% 45% at 0% 100%, rgba(168, 139, 126, .13), transparent 65%),
    var(--bg);
}
.hero-in { flex: 1; width: 100%; display: flex; flex-direction: column; min-width: 0; }
.hero-mark { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.hero-mark b { font-size: 32px; }
/* El texto baja hacia los botones (zona del pulgar); arriba queda aire y la luz del fondo */
.hero-copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 14px;
  padding: 28px 0 30px;
  min-width: 0;
}
/* Titular editorial en tres líneas: «¿Qué te / provoca / hoy?» */
.hero-title {
  font-size: clamp(44px, 15vw, 84px);
  line-height: 1.03;
  letter-spacing: -.01em;
  max-width: 14ch;
}
.hero-title .hl, .hero-title em { display: block; }
.hero-sub {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 34ch;
}
.hero-ctas { display: grid; gap: 10px; }
.hero-ctas .btn { min-height: 56px; }
.hero-down {
  align-self: center;
  width: var(--tap);
  height: var(--tap);
  margin-top: 6px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ink-2);
}
.hero-down .ico { width: 24px; height: 24px; animation: hint-down 2.6s var(--ease-in-out) 1.4s infinite; }
@keyframes hint-down {
  0%, 60%, 100% { transform: none; }
  30% { transform: translateY(5px); }
}
/* Entrada del hero un poco más lenta y escalonada que el resto */
.hero .fade-up { animation-duration: 700ms; animation-delay: calc(var(--i, 0) * 110ms); }

/* "Abierto ahora · cierra a las…": línea discreta que abre el horario */
.open-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  max-width: 100%;
  padding: 0;
  border-radius: var(--r-sm);
  font-size: var(--fs-min);
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink-2);
  text-align: left;
}
.open-line .ol-tx { min-width: 0; }
.open-line .chev { width: 18px; height: 18px; color: var(--ink-2); }
.open-line.closed .dot { background: var(--ink-2); animation: none; }

/* =========================================================
   Menú «liquid glass»: cápsula flotante que baja al salir del hero
   ========================================================= */
.glass-bar {
  position: fixed;
  top: var(--glass-top);
  left: 10px;
  right: 10px;
  z-index: calc(var(--z-sticky) + 5);
  max-width: 720px;
  margin-inline: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(-100% - var(--glass-top)));
  transition: transform 380ms var(--ease-out), opacity var(--dur-1) var(--ease-out), visibility 0s linear 380ms;
}
body.past-hero .glass-bar {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: transform 380ms var(--ease-out), opacity var(--dur-1) var(--ease-out), visibility 0s;
}
/* Con una hoja abierta el menú se retira (igual que la barra inferior): arriba solo queda el velo */
body.past-hero:has(> .sheet.open) .glass-bar {
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(-100% - var(--glass-top)));
  transition: transform 380ms var(--ease-out), opacity var(--dur-1) var(--ease-out), visibility 0s linear 380ms;
}
.glass {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--glass-h);
  padding: 4px 4px 4px 8px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .8),
    0 0 0 .5px rgba(31, 23, 32, .06),
    0 10px 28px -14px rgba(31, 23, 32, .3);
}
/* Sin desenfoque disponible o con «Reducir transparencia»: casi opaco */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass { background: rgba(255, 255, 255, .96); }
}
@media (prefers-reduced-transparency: reduce) {
  .glass {
    background: rgba(255, 255, 255, .97);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
.glass-mark {
  min-height: var(--tap);
  padding: 0 10px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
}
.glass-mark b {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 1;
  letter-spacing: .26em;
  margin-right: -.26em;
  color: var(--ink);
}
.glass-cta {
  min-height: var(--tap);
  padding: 10px 18px;
  border-radius: 18px;
  font-size: var(--fs-min);
  white-space: nowrap;
}

/* =========================================================
   Cuerpo: chips de categoría, carruseles, lista
   ========================================================= */
.cv-body { padding: 0 var(--pad); }
.cv-main { min-width: 0; }

/* Buscador + chips dentro de «Todos los servicios»: se pegan bajo el menú de cristal
   mientras se recorre la lista y se despegan solos al salir de la sección (sticky
   dentro de su <section>). .stuck tapa el hueco entre el techo y el buscador. */
.tools-sentinel { height: 1px; margin-bottom: -1px; }
.list-tools {
  position: sticky;
  top: var(--tools-top);
  z-index: var(--z-sticky);
  margin: 0 calc(-1 * var(--pad)) 12px;
  padding: 0 var(--pad) 2px;
  background: var(--bg);
  transition: box-shadow var(--dur-1) var(--ease-out);
}
.list-tools::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: var(--tools-top);
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
}
.list-tools.stuck { box-shadow: 0 1px 0 var(--line); }
.list-tools.stuck::before { opacity: 1; }
.search {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 4px 0 14px;
  background: var(--fill);
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
  cursor: text;
}
.search:focus-within { background: var(--card); border-color: var(--plum-500); box-shadow: var(--ring); }
.search > .ico { width: 20px; height: 20px; color: var(--ink); }
.search input {
  flex: 1;
  min-width: 0;
  min-height: var(--tap);
  border: 0;
  outline: 0;
  background: none;
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--ink);
}
.search input:focus-visible { outline: none; }
.search input::placeholder { color: var(--ink-2); font-weight: 400; opacity: 1; }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.q-clear {
  width: var(--tap);
  height: var(--tap);
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  flex: none;
  color: var(--ink-2);
}
.q-clear .ico { width: 20px; height: 20px; }

/* Chips de texto (activo = tinta sólida, lo pone .pill[aria-pressed]) */
.catbar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  margin: 6px calc(-1 * var(--pad)) 0;
  padding: 2px var(--pad) 8px;
  scroll-padding: 0 var(--pad);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.catbar::-webkit-scrollbar { display: none; }
.catbar .pill { scroll-snap-align: start; white-space: nowrap; }

/* Titulares de sección: .sec-head (styles.css) con hueco de icono */
.sec { margin-top: 0; }
.sec-head { min-height: var(--tap); margin-bottom: 12px; align-items: center; }
.sec-head .link-btn { align-self: center; }
.sample-note { font-size: var(--fs-min); color: var(--ink-2); }

/* Carruseles */
.rail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin: 0 calc(-1 * var(--pad));
  padding: 2px var(--pad) 6px;
  scroll-padding: 0 var(--pad);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.rail::-webkit-scrollbar { display: none; }

.pcard, .gcard {
  position: relative;
  transition: transform var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.pcard:has(.hit:active), .gcard:has(.hit:active), .srv:has(.hit:active) { transform: scale(.985); }
@media (hover: hover) {
  .pcard:hover, .gcard:hover { border-color: var(--line-2); }
}

/* Tarjeta destacada: bloque apagado + icono de categoría en blanco */
.pcard {
  flex: none;
  width: min(248px, 66vw);
  scroll-snap-align: start;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.pcard .cat-block { border-radius: 0; }
.pc-b {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto auto;
  gap: 2px 10px;
  align-items: end;
  padding: 14px;
}
.pc-b h3 { grid-column: 1 / -1; align-self: start; }
.pc-b .add { grid-column: 2; grid-row: 2 / 4; }

.pc-b h3, .srv-tx h3, .gcard h3 {
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.25;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.meta { font-size: var(--fs-min); color: var(--ink-2); line-height: 1.4; }
.meta .p { color: var(--ink); font-weight: 600; white-space: nowrap; }

/* Etiquetas sobre el bloque de categoría. Llevan un velo oscuro suave para que
   el blanco cumpla AA también sobre --tone-3 (el más claro). */
.cat-block .cat-label, .d-hero .cat-label {
  position: absolute;
  left: 10px;
  top: 10px;
  padding: 5px 8px;
  border-radius: var(--r-xs);
  background: rgba(31, 23, 32, .26);
  font: 600 var(--fs-min)/1.15 var(--f-ui);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  max-width: calc(100% - 20px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cat-flag {
  position: absolute;
  right: 10px;
  top: 10px;
  padding: 4px 8px;
  border-radius: var(--r-xs);
  border: 1px solid rgba(255, 255, 255, .5);
  background: rgba(31, 23, 32, .26);
  font: 600 var(--fs-min)/1.15 var(--f-ui);
  color: #fff;
  white-space: nowrap;
}
/* Si hay etiqueta a la derecha, la de categoría deja sitio */
.cat-block:has(.cat-flag) .cat-label { max-width: calc(100% - 92px); }

/* Botón "+" (cuadrado ciruela de 48 px; con cantidad pasa a tinta) */
.add { position: relative; z-index: 2; }
.add .q { font-weight: 700; font-size: var(--fs-body); line-height: 1; }
.add:active { transform: scale(.92); }

/* Para regalar */
.gcard {
  flex: none;
  width: min(300px, 82vw);
  scroll-snap-align: start;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.g-top { display: flex; gap: 14px; align-items: center; min-width: 0; }
.g-top > div { min-width: 0; }
.g-top p { font-size: var(--fs-min); color: var(--ink-2); line-height: 1.4; }
.g-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.gcard.alt { background: transparent; border-style: dashed; border-color: var(--line-2); }
.g-wa { position: relative; z-index: 2; }

/* Lista de servicios: una tarjeta con filas separadas por línea */
.srv-list { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 0 14px; }
.srv {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  transition: transform var(--dur-1) var(--ease-out);
}
.srv:last-child { border-bottom: 0; }
.srv .hit:focus-visible { outline-offset: -2px; border-radius: var(--r-md); }
.srv-tx { flex: 1; min-width: 0; }
.srv-tx .tag { font-weight: 500; }

/* Cargando: filas fantasma que respiran (sin brillo) */
.sk-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.sk-row:last-child { border-bottom: 0; }
.sk-row > .sk-mini { width: 52px; height: 52px; border-radius: var(--r-chip); background: var(--fill); flex: none; }
.sk-row > div { flex: 1; display: grid; gap: 8px; }
.sk-l { height: 14px; border-radius: 6px; background: var(--fill); width: 70%; }
.sk-l.s { width: 42%; }
.sk-row > .sk-mini, .sk-l { animation: breathe 1.8s ease-in-out infinite; }

/* Vacío y error */
.empty {
  padding: 26px 18px;
  border-radius: var(--r-card);
  background: var(--card);
  border: 1px solid var(--line);
  text-align: center;
  display: grid;
  gap: 10px;
  justify-items: center;
}
.empty p { color: var(--ink-2); }
.empty b { font-family: var(--f-display); font-size: 26px; color: var(--ink); font-weight: 500; line-height: 1.1; }
.empty .btn { max-width: 340px; margin-top: 6px; }

.list-note { color: var(--ink-2); font-size: var(--fs-min); margin-top: 12px; }

/* «¿Aún no lo tienes claro?» */
.advice {
  margin-top: 34px;
  padding: 18px;
  border-radius: var(--r-card);
  background: var(--card);
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}
.advice > .btn { grid-column: 1 / -1; }
.advice h2 { font-size: 26px; line-height: 1.1; }
.advice p { font-size: var(--fs-min); color: var(--ink-2); margin-top: 4px; }

/* El salón: lista agrupada con huecos de icono */
.salon-list { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 0 14px; }
.srow {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  width: 100%;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.srow:last-child { border-bottom: 0; }
.srow:focus-visible { outline-offset: -2px; border-radius: var(--r-md); }
.srow .tx { flex: 1; min-width: 0; }
.srow strong { display: block; font-size: var(--fs-body); font-weight: 600; line-height: 1.3; }
.srow .s { display: block; font-size: var(--fs-min); color: var(--ink-2); line-height: 1.4; }
.srow .chev { width: 20px; height: 20px; color: var(--ink-2); }
.ico-tile.wa { color: var(--green); }

/* Pie */
.cv-foot {
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  text-align: center;
  display: grid;
  gap: 6px;
  justify-items: center;
  color: var(--ink-2);
  font-size: var(--fs-min);
}
.foot-mark { align-items: center; margin-bottom: 8px; }
.foot-mark b { font-size: 26px; }
.cv-foot .legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 6px; }
.cv-foot small { max-width: 36ch; line-height: 1.45; }

/* =========================================================
   Barra fija inferior: «WhatsApp a Marcela» siempre y, si hay cesta,
   la barra ciruela encima. Oculta en el hero y con una hoja abierta.
   ========================================================= */
.dock {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 14px 12px calc(12px + env(safe-area-inset-bottom));
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(100% + 8px));
  transition: transform 380ms var(--ease-out), opacity var(--dur-1) var(--ease-out), visibility 0s linear 380ms;
}
.dock > * { width: 100%; max-width: 640px; margin-inline: auto; }
body.past-hero .dock {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: transform 380ms var(--ease-out), opacity var(--dur-1) var(--ease-out), visibility 0s;
}
/* Hoja abierta → barra fuera. Se mira la hoja (no html.locked, que tarda 450 ms en irse al cerrar)
   para que al cerrar vuelva enseguida y el foco pueda regresar a «Ver cesta». */
body.past-hero:has(> .sheet.open) .dock {
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(100% + 8px));
  transition: transform 380ms var(--ease-out), opacity var(--dur-1) var(--ease-out), visibility 0s linear 380ms;
}
.dock .cart-pill { flex: none; }
.dock-wa { min-height: 56px; box-shadow: 0 10px 26px -14px rgba(31, 23, 32, .38); }
.dock-wa.btn-wa { box-shadow: 0 10px 26px -12px rgba(18, 140, 70, .55); }
.cart-pill { padding: 8px 18px 8px 10px; }
.cart-pill .gt { flex: 1; min-width: 0; font-size: var(--fs-body); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-pill .cp-tot { flex: none; font-size: var(--fs-body); font-weight: 700; white-space: nowrap; }

/* =========================================================
   Cesta lateral (escritorio)
   ========================================================= */
.cart-aside { display: none; }
.ca {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 20px;
  display: grid;
  gap: 14px;
}
.ca h2 { font-size: 28px; line-height: 1; display: flex; align-items: center; gap: 10px; }
.ca h2 .ico { width: 22px; height: 22px; color: var(--plum); }
.ca-items { display: grid; gap: 12px; }
.ca-it { display: flex; gap: 12px; align-items: center; }
.ca-it .cat-mini { width: 44px; height: 44px; }
.ca-it .cat-mini .ico { width: 22px; height: 22px; }
.ca-it .tx { flex: 1; min-width: 0; font-weight: 600; line-height: 1.3; }
.ca-it .tx > span:last-child { display: block; font-size: var(--fs-min); color: var(--ink-2); font-weight: 400; }
.ca-tot { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border-top: 1px solid var(--line); padding-top: 14px; font-weight: 600; }
.ca-tot b { font-size: 19px; font-weight: 700; }
#ca-count { display: inline-block; }
.ca-empty { color: var(--ink-2); display: flex; gap: 12px; align-items: flex-start; }
.ca-empty .ico { width: 20px; height: 20px; color: var(--plum); margin-top: 2px; }

/* =========================================================
   Hoja: detalle de servicio
   ========================================================= */
.sheet-x-top { top: 30px; }
.d-hero {
  position: relative;
  margin: 0 16px;
  height: 180px;
  border-radius: var(--r-card);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.d-hero > .ico { width: 56px; height: 56px; stroke-width: 1.25; }
/* La X de cerrar va arriba a la derecha: la etiqueta "Top/Regalo" baja a la esquina inferior */
.d-hero .cat-flag { top: auto; bottom: 10px; right: auto; left: 10px; }
.d-body { padding: 20px 20px 22px; display: grid; gap: 12px; }
.d-body h2 { font-size: 32px; line-height: 1.05; padding-right: 8px; }
.d-body .desc { color: var(--ink-2); font-size: var(--fs-body); }
.qty-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.qty-row > span { font-weight: 600; }

/* =========================================================
   Hoja del checkout
   ========================================================= */
.sheet.co { height: calc(100vh - 40px); height: calc(100dvh - 40px); max-height: none; }
.co-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 2px 20px 0; }
.co-head h2 { flex: 1; min-width: 0; font-size: 30px; line-height: 1.1; text-align: left; }
.co-head .ghost { display: none; }
#co-title:focus { outline: none; }

/* Pasos: 3 barritas + "Paso 1 de 3 · Cesta" */
.co-steps { flex: none; padding: 0 20px; }
.co-steps .steps-bar { margin: 12px 0 8px; }
.co-steps .steps-bar i { transition: background-color var(--dur-3) var(--ease-out); }
.co-steps .steps-label { margin-bottom: 10px; }

.panes { position: relative; flex: 1; min-height: 0; overflow: hidden; border-top: 1px solid var(--line); }
.pane {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 20px 28px;
  opacity: 0;
  transform: translateX(30px);
  visibility: hidden;
  transition: opacity var(--dur-1) var(--ease-out), transform 450ms var(--ease-out), visibility 0s linear 450ms;
}
.pane.before { transform: translateX(-30px); }
.pane.on {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition: opacity var(--dur-2) var(--ease-out) 60ms, transform 450ms var(--ease-out), visibility 0s;
}
.co-foot { flex: none; padding: 12px 20px 14px; border-top: 1px solid var(--line); background: var(--bg); display: grid; gap: 8px; }

/* Paso 1 · Cesta */
.ci {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px 14px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.ci.gone { opacity: 0; transform: translateX(-16px); }
.ci .cat-mini { width: 44px; height: 44px; }
.ci .cat-mini .ico { width: 22px; height: 22px; }
.ci .tx { min-width: 0; }
.ci .tx strong { display: block; font-weight: 600; line-height: 1.3; }
.ci .tx span { font-size: var(--fs-min); color: var(--ink-2); }
.ci .ctl { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.ci .ctl b { font-weight: 700; font-size: var(--fs-body); }
.more-btn { margin-top: 14px; }
.sum { margin-top: 18px; display: grid; gap: 4px; }
.sum-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-weight: 700; font-size: 19px; }
.sum-row b { font-weight: 700; }
.sum p { font-size: var(--fs-min); color: var(--ink-2); }
.alt-wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--tap);
  margin-top: 14px;
  font-weight: 600;
  color: var(--ink);
  font-size: var(--fs-min);
  text-align: left;
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  border-radius: var(--r-sm);
}
.alt-wa .ico { width: 20px; height: 20px; flex: none; color: var(--green); }
/* El texto va en su propio <span>: si parte en dos líneas, el icono sigue pegado */
.alt-wa span { min-width: 0; }

/* Paso 1 sin cesta · «¿Qué te quieres hacer?»: lista compacta con casillas */
.pick-group .pl { margin: 20px 0 8px; }
.pick-group:first-child .pl { margin-top: 4px; }
.pick-list { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 0 14px; }
.pick {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.pick:last-child { border-bottom: 0; }
.pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pick .box {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--card);
  box-shadow: inset 0 0 0 1.5px var(--lilac-400);
  color: #fff;
  transition: background-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.pick .box .ico {
  width: 18px;
  height: 18px;
  stroke-width: 2.4;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset 350ms var(--ease-out) 50ms;
}
.pick input:checked + .box { background: var(--plum); box-shadow: none; }
.pick input:checked + .box .ico { stroke-dashoffset: 0; }
.pick input:focus-visible + .box { outline: 2px solid var(--plum); outline-offset: 2px; }
.pk-tx { flex: 1; min-width: 0; }
.pk-tx b { display: block; font-weight: 600; line-height: 1.3; }
.pk-tx b .tag { margin-left: 4px; font-weight: 500; }
.pk-tx .meta { display: block; }
#co-pick .sk-row { padding: 14px 0; }

/* Aviso en línea: la carta cambió mientras se reservaba */
.co-notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--plum-soft);
  color: var(--ink);
  font-size: var(--fs-min);
  font-weight: 500;
  line-height: 1.4;
}
.co-notice .ico { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--plum); }
#when-notice, #pick-notice { margin-bottom: 14px; }

/* Paso 2 · Cuándo */
#asap { width: 100%; }
#asap .tx { flex: 1; min-width: 0; }
#asap strong { display: block; font-weight: 600; font-size: var(--fs-body); color: var(--ink); line-height: 1.3; }
#asap .tx span { font-size: var(--fs-min); color: var(--ink-2); }
#asap[aria-pressed="true"] .ico-tile { background: var(--card); }
.pl {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--ink);
  margin: 24px 0 10px;
  line-height: 1.3;
}
.pl .ico { width: 18px; height: 18px; color: var(--plum); }
.pl .opt { color: var(--ink-2); font-weight: 400; }
/* Hueco arriba/abajo para que el anillo de foco no se recorte en el scroll horizontal */
.days { margin: 0 -20px -4px; padding: 4px 20px 8px; scroll-padding: 0 20px; }
.day { width: 78px; }
.day span { white-space: nowrap; }
.franjas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* El plegable recorta lo que sobresale: margen para el anillo de foco */
#fr-wrap { margin: 0 -8px; }
#fr-wrap > div { padding: 0 8px 8px; }
.fr { min-width: 0; }
.fr b, .fr span { text-align: center; }
.slot-chips { padding: 2px; }
.pane .note { margin-top: 22px; }

/* Paso 3 · Tus datos */
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
#form { position: relative; }
#msg-box > div { padding: 2px; }
#msg-box textarea { margin-top: 4px; }
.consent + .field-error { margin-top: 6px; }
.mini {
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--fill);
  font-size: var(--fs-min);
  font-weight: 500;
  color: var(--ink);
  display: flex;
  gap: 10px;
  align-items: center;
}
.mini .ico { width: 20px; height: 20px; color: var(--plum); }
.demo-hint { font-size: var(--fs-min); color: var(--ink-2); text-align: center; }
.error-banner a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Hecho: sobrio, centrado, recibo en tarjeta blanca */
.done { display: grid; justify-items: center; text-align: center; gap: 10px; padding-top: 10px; }
.done .tick { width: 88px; height: 88px; margin-bottom: 4px; }
.done h2 { font-size: 36px; line-height: 1.05; }
.done .lead { font-size: var(--fs-body); color: var(--ink-2); max-width: 30ch; }
.done .btn { max-width: 420px; }
.receipt {
  width: 100%;
  text-align: left;
  margin: 10px 0 8px;
  padding: 16px;
  border-radius: var(--r-card);
  background: var(--card);
  border: 1px solid var(--line);
  display: grid;
  gap: 10px;
}
.receipt .r { display: flex; justify-content: space-between; gap: 12px; font-weight: 500; }
.receipt .r > span:last-child { white-space: nowrap; font-weight: 600; }
.receipt hr { border: 0; border-top: 1px solid var(--line); margin: 2px 0; }
.receipt .k { display: flex; align-items: center; gap: 6px; font-size: var(--fs-min); color: var(--ink-2); }
.receipt .k .ico { width: 18px; height: 18px; color: var(--plum); }
.receipt .v { font-weight: 600; }
.receipt .tot { font-weight: 700; }
.receipt .tot b { font-size: 19px; font-weight: 700; }

/* =========================================================
   Hojas de información: horario, privacidad, QR
   ========================================================= */
.info { padding: 6px 20px 22px; display: grid; gap: 14px; }
.info h2 { display: flex; align-items: center; gap: 12px; padding-right: 56px; font-size: 30px; line-height: 1.1; }
.info p { color: var(--ink-2); }
.info .status-line { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink); }
.hours { list-style: none; display: grid; gap: 2px; }
.hours li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: var(--r-sm); }
.hours li.today { background: var(--fill); font-weight: 600; }
.tz-note { font-size: var(--fs-min); margin-top: -6px; }
.qr-frame { width: min(240px, 100%); margin: 0 auto; padding: 10px; border-radius: var(--r-md); background: #fff; border: 1px solid var(--line); }
.qr-url { overflow-wrap: anywhere; font-size: var(--fs-min); text-align: center; }
.qr-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* =========================================================
   Carta configurable: ofertas, combos y bonos
   Ofertas sin chillar: precio final en ciruela, el de carta tachado en gris
   y una etiqueta suave (ciruela sobre --plum-soft). Nada de rojo.
   ========================================================= */
.now,
.meta .p .now,
.ci .tx .now,
.ca-it .tx .now,
.receipt .now { color: var(--plum); font-weight: 700; }
.was,
.ci .tx .was,
.ca-it .tx .was {
  color: var(--ink-2);
  font-weight: 400;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  white-space: nowrap;
}
.price .now, .price .was, .meta .p .now, .meta .p .was { white-space: nowrap; }
/* Con oferta el precio puede partir entre el final y el tachado (nunca dentro de una cifra) */
.meta .p:has(.now) { white-space: normal; }
.tag.offer,
.ci .tx .tag.offer,
.ca-it .tx .tag.offer {
  background: var(--plum-soft);
  color: var(--plum);
  font-size: var(--fs-min);
  font-weight: 600;
  white-space: nowrap;
  /* Nunca empuja la página a lo ancho (320 px): si no cabe, se recorta con «…» */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}
.price .tag.offer { vertical-align: bottom; }
/* Notas y validez ahora las escribe el equipo (hasta 60 caracteres): el chip parte en líneas, no desborda */
#d-chips .chip { white-space: normal; max-width: 100%; }
.chip.offer { background: var(--plum-soft); color: var(--plum); white-space: normal; }
.chip.offer .ico { color: var(--plum); }
/* Importe del botón «Añadir» (sobre ciruela): el tachado en blanco atenuado */
.btn .amt .was { color: inherit; opacity: .75; font-weight: 500; margin-right: 4px; }

/* Debajo del nombre en la cesta: «Combo · Manicura + Pedicura» */
.kind,
.ci .tx .kind,
.ca-it .tx .kind {
  display: block;
  font-size: var(--fs-min);
  font-weight: 400;
  color: var(--ink-2);
  line-height: 1.35;
}
.ci .tx strong .tag { margin-left: 4px; }
.ci .ctl .ci-sub { display: inline-flex; align-items: baseline; flex-wrap: wrap; justify-content: flex-end; gap: 0 8px; font-size: var(--fs-body); }
.ci .ctl .ci-sub b { font-weight: 700; color: var(--ink); }
.ci .ctl .ci-sub b.now { color: var(--plum); }
.ca-save {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-min);
  color: var(--plum);
}
.ca-save .ico { width: 18px; height: 18px; flex: none; }
.ca-save b { font-weight: 700; }
.save-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--plum);
}
.save-row > span { display: inline-flex; align-items: center; gap: 8px; }
.save-row .ico { width: 18px; height: 18px; flex: none; }
.receipt .r.save-row > span:last-child, .receipt .r.save-row b { color: var(--plum); }

/* Lista: línea «Incluye …» de combos y bonos */
.meta.incl { color: var(--ink-2); }

/* Tarjeta de combo / bono (carruseles «Combos» y «Para regalar») */
.g-top h3 .tag { margin-left: 4px; }
.g-incl {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--fs-min);
  color: var(--ink);
  line-height: 1.4;
}
.g-incl .ico { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--plum); }
.g-incl span { min-width: 0; overflow-wrap: anywhere; }
.g-foot .price { min-width: 0; }

/* Hoja de detalle: «Incluye» de un combo o bono */
.d-incl { padding-top: 4px; }
.d-incl .pl { margin: 4px 0 8px; }
.incl-list { list-style: none; display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r-md); padding: 0 12px; }
.incl-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.incl-list li:last-child { border-bottom: 0; }
.incl-list .ico { width: 18px; height: 18px; flex: none; color: var(--plum); }
.incl-list .tx { flex: 1; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.incl-list li > .num { white-space: nowrap; color: var(--ink-2); }
.incl-list small { font-size: var(--fs-min); }
.incl-sum { margin-top: 8px; font-size: var(--fs-min); color: var(--ink-2); }
.incl-sum b { color: var(--plum); font-weight: 600; }

/* =========================================================
   Pantallas pequeñas
   ========================================================= */
/* iPhone SE y similares: el hero cabe entero en 568 px de alto */
@media (max-height: 640px) {
  .hero-mark { padding-bottom: 12px; }
  .hero-copy { gap: 10px; padding: 12px 0 12px; }
  .hero-down { margin-top: 2px; }
  .hero-title { font-size: clamp(40px, 13.6vw, 84px); }
}

@media (max-width: 359px) {
  .glass-mark { padding: 0 8px; }
  .glass-mark b { font-size: 21px; letter-spacing: .22em; margin-right: -.22em; }
  .glass-cta { padding: 10px 14px; }
  .hero-mark b { font-size: 28px; }
  .srv { gap: 12px; }
  .srv .cat-mini { width: 46px; height: 46px; }
  .srv .cat-mini .ico { width: 24px; height: 24px; }
  .day { width: 72px; }
  .co-head h2 { font-size: 27px; }
  .info h2 { font-size: 27px; }
}

/* =========================================================
   Tablet y escritorio
   ========================================================= */
@media (min-width: 768px) {
  .d-hero { margin: 16px 16px 0; }
  .sheet.co { height: min(780px, 90vh); }
  .co-head { padding-top: 16px; }
  .info { padding-top: 24px; }
  .sheet-x-top { top: 16px; }
}

@media (min-width: 768px) {
  .hero-ctas { max-width: 440px; }
  .hero-sub { font-size: 19px; }
}

@media (min-width: 1024px) {
  /* En escritorio la cesta va en el lateral: abajo solo queda WhatsApp */
  body.cv, body.cv.has-cart { padding-bottom: calc(var(--dock-h) + 14px); }
  .dock .cart-pill { display: none; }
  .dock > * { max-width: 440px; }
  .hero { padding-top: 28px; }
  .cv-body > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 36px; align-items: start; }
  .cart-aside { display: block; position: sticky; top: calc(var(--tools-top) + 8px); margin-top: 20px; }
  .catbar { margin: 6px 0 0; padding: 4px 0 6px; flex-wrap: wrap; overflow: visible; }
  .rail { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); margin: 0; padding: 2px 0 6px; overflow: visible; }
  .rail .pcard, .rail .gcard { width: auto; }
  .rail.gifts { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .cv-foot { padding-bottom: 40px; }
}