/*
 * El aspecto común de las páginas por oficio (lixai.es/servicios, /tiendas,
 * /restaurantes, /clases): los colores de /negocios, el chat como WhatsApp,
 * cada hora con su teléfono y su cambio, y en el móvil la hoja dentro del
 * teléfono. Lo de cada oficio (la agenda, las mesas…) va en su página.
 * Las fotos del negocio llegan por la variable --foto en el propio HTML.
 */
@font-face {
  font-family: "Jakarta";
  src: url("/fonts/plus-jakarta-sans-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
:root {
  --fondo: #f6f8fc;
  --tinta: #081a2b;
  --suave: #52637a;
  --tenue: #8796a8;
  --linea: #e2e8f0;
  --blanco: #ffffff;
  --rosa: #c462bd;
  --cian: #05f9f2;
  --rosa-oscuro: #a43f9e;
  --cian-oscuro: #0a97a6;
  --marca: linear-gradient(135deg, #c462bd, #05f9f2);
  --sobre-marca: #081a2b;
  --verde: #16a34a;
  --rojo: #dc2626;
  --wa-cab: #075e54;
  --wa-fondo: #efeae2;
  --wa-mio: #d9fdd3;
  --sombra: 0 30px 60px -25px rgba(8, 26, 43, 0.28), 0 8px 20px -10px rgba(8, 26, 43, 0.12);
}
* { box-sizing: border-box; }
/* Lo oculto, oculto: si no, el display de cada fila le gana a [hidden]. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 120px; }
body {
  margin: 0; font-family: "Jakarta", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--tinta);
  background: var(--fondo); -webkit-font-smoothing: antialiased; overflow-x: hidden; line-height: 1.5;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
em { font-style: normal; background: linear-gradient(90deg, var(--rosa-oscuro), var(--cian-oscuro)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.envoltorio { width: min(1180px, 100% - 32px); margin: 0 auto; }
.luz { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.45; pointer-events: none; z-index: 0; }
.luz.rosa { background: #e9a6e4; }
.luz.cian { background: #8ff3f0; }

/* ── Cabecera ─────────────────────────────────────────────── */
.barra { position: sticky; top: 0; z-index: 50;
  background: rgba(246, 248, 252, 0.97); border-bottom: 1px solid rgba(226, 232, 240, 0.7); }
.barra .envoltorio { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; font-size: 1.35rem; letter-spacing: -0.02em; }
/* La cabecera lleva solo el nombre; la burbuja es el icono de la pestaña y de la app. */
.logo i { display: none; }
.menu-top { display: none; gap: 26px; font-weight: 600; font-size: 0.93rem; color: var(--suave); }
.menu-top a { text-decoration: none; }
.menu-top a:hover, .menu-top a[aria-current] { color: var(--tinta); }
.barra-der { display: flex; align-items: center; gap: 14px; font-weight: 600; font-size: 0.93rem; }
.barra-der .entrar { text-decoration: none; color: var(--suave); }
@media (min-width: 860px) { .menu-top { display: flex; } }

.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  border: 0; border-radius: 999px; padding: 15px 26px; font-size: 1rem; background: var(--marca); color: var(--sobre-marca);
  box-shadow: 0 12px 28px -12px rgba(196, 98, 189, 0.7); transition: transform 0.2s, box-shadow 0.2s; }
.boton:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(196, 98, 189, 0.8); }
.boton.chico { padding: 9px 18px; font-size: 0.9rem; }
.boton.claro { background: var(--blanco); color: var(--tinta); box-shadow: 0 0 0 1px var(--linea), 0 10px 24px -14px rgba(8, 26, 43, 0.3); }
.boton:focus-visible { outline: 3px solid var(--cian-oscuro); outline-offset: 3px; }

/* ── Portada ──────────────────────────────────────────────── */
.portada { position: relative; padding: 40px 0 60px; overflow: hidden; }
.portada .luz.rosa { width: 520px; height: 520px; top: -160px; left: -160px; }
.portada .luz.cian { width: 560px; height: 560px; bottom: -220px; right: -160px; }
.portada .envoltorio { position: relative; z-index: 1; display: grid; gap: 40px; align-items: center; }
@media (min-width: 980px) { .portada .envoltorio { grid-template-columns: 1.02fr 1fr; gap: 30px; } .portada { padding: 70px 0 90px; } }
.etiqueta { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border-radius: 999px; background: var(--blanco);
  box-shadow: 0 0 0 1px var(--linea); font-size: 0.85rem; font-weight: 600; color: var(--suave); }
.etiqueta b { background: var(--marca); color: var(--sobre-marca); border-radius: 999px; padding: 2px 9px; font-size: 0.75rem; }
h1 { font-size: clamp(2.4rem, 6.4vw, 4.5rem); line-height: 1.02; letter-spacing: -0.045em; margin: 18px 0 18px; font-weight: 800; }
.entrada { font-size: clamp(1.05rem, 2.2vw, 1.25rem); color: var(--suave); max-width: 34rem; margin: 0 0 28px; }
.entrada strong { color: var(--tinta); }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; }

.escenario { position: relative; height: 600px; max-width: 640px; width: 100%; margin: 0 auto; }
.movil { position: absolute; left: 0; top: 10px; width: 282px; height: 570px; border-radius: 46px; background: #0b141a; padding: 11px;
  box-shadow: var(--sombra), inset 0 0 0 2px #2a3942; z-index: 2; }
.movil::before { content: ""; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 92px; height: 26px; border-radius: 20px; background: #0b141a; z-index: 3; }
.pantalla { width: 100%; height: 100%; border-radius: 36px; overflow: hidden; background: var(--wa-fondo); display: flex; flex-direction: column; }
.wa-cab { background: var(--wa-cab); color: #fff; padding: 46px 14px 11px; display: flex; align-items: center; gap: 10px; }
.wa-cab .avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #a78bfa, #22d3ee); display: grid; place-items: center; font-size: 17px; }
.wa-cab b { display: block; font-size: 0.95rem; }
.wa-cab small { font-size: 0.72rem; opacity: 0.85; }
.wa-lista { flex: 1; padding: 12px 10px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; overflow: hidden; }
.burbuja { max-width: 88%; padding: 7px 10px 6px; border-radius: 10px; background: #fff; font-size: 0.83rem; line-height: 1.38; flex: none;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13); align-self: flex-start; animation: entra 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
.burbuja.mia { align-self: flex-end; background: var(--wa-mio); }
.burbuja .hora { display: block; text-align: right; font-size: 0.66rem; color: #667781; margin-top: 2px; }
.burbuja .check { color: #53bdeb; }
.burbuja > img { border-radius: 7px; margin-bottom: 4px; width: 150px; height: 96px; object-fit: cover; }
.burbuja .hecho { color: var(--verde); font-weight: 700; }
.escribiendo { align-self: flex-start; background: #fff; border-radius: 10px; padding: 10px 12px; display: flex; gap: 4px; flex: none; animation: entra 0.3s both; }
.escribiendo i { width: 6px; height: 6px; border-radius: 50%; background: #8696a0; animation: punto 1s infinite; }
.escribiendo i:nth-child(2) { animation-delay: 0.15s; }
.escribiendo i:nth-child(3) { animation-delay: 0.3s; }
.wa-pie { display: flex; gap: 6px; align-items: center; padding: 8px; background: #f0f2f5; }
.wa-caja { flex: 1; background: #fff; border-radius: 20px; padding: 9px 14px; font-size: 0.82rem; color: #667781; min-height: 36px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-caja.escribe { color: var(--tinta); text-overflow: clip; }
.wa-caja.escribe::after { content: "|"; margin-left: 1px; animation: parpadeo 0.8s infinite; }
.wa-boton { width: 36px; height: 36px; border-radius: 50%; background: #00a884; color: #fff; display: grid; place-items: center; font-size: 15px; flex: none; }

/* Lo que el asistente enseña dentro del chat: piezas, tarjetas y el «Sí». */
.pz { margin: 4px 0 2px; border-radius: 8px; background: #f6f8fc; padding: 7px 9px; display: grid; gap: 3px; font-size: 0.76rem; }
.pz b.t { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tenue); }
.pz div { display: flex; justify-content: space-between; gap: 8px; }
.pz .grande { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.03em; }
.pz .verde { color: var(--verde); font-weight: 700; }
.si-no { display: flex; gap: 6px; margin-top: 6px; }
.si-no button { font: inherit; font-weight: 700; font-size: 0.78rem; border: 0; border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.si-no .si { background: #00a884; color: #fff; animation: llama 1.4s ease-in-out infinite; }
.si-no .no { background: #eef2f7; color: var(--suave); }
.si-no button:disabled { animation: none; opacity: 0.55; cursor: default; }
.aviso-rojo { display: block; margin-top: 4px; color: #b91c1c; font-weight: 700; font-size: 0.75rem; }
.deshacer { font: inherit; font-size: 0.72rem; font-weight: 700; color: var(--cian-oscuro); background: none; border: 0; padding: 0; margin-left: 6px; cursor: pointer; text-decoration: underline; }
.deshacer:disabled { color: var(--tenue); text-decoration: none; cursor: default; }
.enlace-wa { margin-top: 5px; display: grid; grid-template-columns: 38px 1fr; gap: 8px; align-items: center; padding: 7px; border-radius: 8px; background: #f0f2f5; }
.enlace-wa span { width: 38px; height: 38px; border-radius: 8px; background: var(--marca); display: grid; place-items: center; font-size: 1.1rem; }
.enlace-wa b { display: block; font-size: 0.78rem; }
.enlace-wa small { color: #667781; font-size: 0.68rem; }
.foto-bote { display: grid; place-items: center; width: 150px; height: 96px; border-radius: 7px; margin-bottom: 4px; position: relative;
  background: linear-gradient(135deg, #fce7f3, #e0f2fe); font-size: 2.4rem; color: #9d174d; }
.foto-bote::after { content: ""; position: absolute; right: 10px; bottom: 10px; width: 46px; height: 22px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, #111 0 2px, #fff 2px 3px, #111 3px 4px, #fff 4px 6px) , #fff; box-shadow: 0 0 0 3px #fff; }

.web { position: absolute; right: 0; top: 70px; width: 320px; border-radius: 16px; background: #fff; box-shadow: var(--sombra); overflow: hidden; z-index: 1;
  transform: perspective(1200px) rotateY(-9deg) rotateX(2deg); }
.web-barra { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #f1f4f8; border-bottom: 1px solid var(--linea); }
.web-barra i { width: 9px; height: 9px; border-radius: 50%; background: #d4dae3; }
.web-barra span { margin-left: 8px; flex: 1; background: #fff; border-radius: 6px; font-size: 0.68rem; color: var(--tenue); padding: 3px 8px; }
.web-foto { position: relative; height: 128px; overflow: hidden; }
.web-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.8s; }
.web-foto img.nueva { opacity: 0; }
.web.foto-nueva .web-foto img.nueva { opacity: 1; }
.web-foto b { position: absolute; left: 22px; bottom: 10px; color: #fff; font-size: 1.15rem; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); }
.web-cuerpo { padding: 12px 14px 16px; display: grid; gap: 12px; }
.web-cuerpo h4 { margin: 0 0 6px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tenue); }
.fila { display: flex; justify-content: space-between; font-size: 0.8rem; padding: 4px 0; border-bottom: 1px dashed var(--linea); border-radius: 4px; }
.fila.nueva { display: none; }
.web.cerrado .fila.nueva { display: flex; animation: brilla 1.6s ease; color: #be123c; font-weight: 700; }
.web .precio { display: inline-block; }
.web.precio-nuevo .precio { animation: cambia 0.7s ease; }
.fila.cambio { animation: brilla 1.6s ease; }
.web .reservar { margin-top: 2px; text-align: center; background: var(--marca); color: var(--sobre-marca); font-weight: 700; font-size: 0.8rem; border-radius: 999px; padding: 8px; }

.hecho-pastilla { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 9px; border-radius: 999px;
  background: #fff; box-shadow: var(--sombra); font-weight: 700; font-size: 0.85rem; opacity: 0; transform: translateY(10px) scale(0.95); pointer-events: none;
  transition: opacity 0.35s, transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.3); white-space: nowrap; }
.hecho-pastilla.ve { opacity: 1; transform: none; }
.hecho-pastilla i { width: 24px; height: 24px; border-radius: 50%; background: var(--verde); color: #fff; display: grid; place-items: center; font-size: 14px; font-style: normal; }
#pastilla-portada { right: 26px; top: 20px; }
@media (min-width: 980px) { .portada .web { right: -48px; } #pastilla-portada { right: -20px; } }

.aviso-flota { position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 16px;
  background: #fff; box-shadow: var(--sombra); font-size: 0.82rem; font-weight: 600;
  animation: flota 6s ease-in-out infinite; }
.aviso-flota > span { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-size: 1.1rem; background: var(--tono); flex: none; }
.aviso-flota small { display: block; color: var(--tenue); font-weight: 600; font-size: 0.72rem; }
.aviso-flota.a1 { right: 10px; top: -6px; --tono: #fef3c7; }
.aviso-flota.a2 { left: 120px; bottom: -44px; --tono: #dff7f8; animation-delay: -2s; }
.aviso-flota.a3 { right: -30px; bottom: -10px; --tono: #dcfce7; animation-delay: -4s; }
@media (max-width: 1080px) { .aviso-flota.a1, .aviso-flota.a2 { display: none; } }
@media (max-width: 560px) {
  .cobro { grid-template-columns: 32px 1fr auto; } .cobro .est { grid-column: 2 / 4; justify-self: start; }
  .aviso-flota { display: none; }
  .portada .escenario { height: 560px; }
  .portada .movil { width: 270px; height: 540px; left: 50%; transform: translateX(-50%); }
  .portada .web { display: none; }
  #pastilla-portada { right: 50%; transform: translateX(50%) translateY(10px); top: auto; bottom: -6px; }
  #pastilla-portada.ve { transform: translateX(50%); }
}

/* ── El reloj del día: a qué hora vas ──────────────────────── */
.reloj-dia { position: sticky; top: 64px; z-index: 40; background: rgba(246, 248, 252, 0.97);
  border-bottom: 1px solid var(--linea); }
.reloj-dia .envoltorio { display: flex; gap: 6px; overflow-x: auto; padding: 10px 0; scrollbar-width: none; }
.reloj-dia .envoltorio::-webkit-scrollbar { display: none; }
.reloj-dia a { flex: none; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; padding: 7px 13px; border-radius: 999px;
  font-weight: 700; font-size: 0.85rem; color: var(--suave); background: #fff; box-shadow: 0 0 0 1px var(--linea); transition: background 0.3s, color 0.3s; }
.reloj-dia a b { font-variant-numeric: tabular-nums; color: var(--tinta); }
.reloj-dia a[aria-current="true"] { background: var(--tinta); color: #fff; box-shadow: none; }
.reloj-dia a[aria-current="true"] b { color: var(--cian); }
@media (max-width: 700px) { .reloj-dia a span { display: none; } }

/* ── Cada hora del día ─────────────────────────────────────── */
section.hora { position: relative; padding: 80px 0 70px; border-bottom: 1px solid var(--linea); overflow: hidden; }
section.hora:nth-of-type(even) { background: #fff; }
.cabeza-hora { text-align: center; max-width: 760px; margin: 0 auto; }
.reloj { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--tinta); color: #fff; font-weight: 800; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
h2 { font-size: clamp(2rem, 5vw, 3.3rem); line-height: 1.05; letter-spacing: -0.04em; margin: 14px 0 10px; font-weight: 800; }
.cabeza-hora p { color: var(--suave); font-size: 1.06rem; margin: 0 auto; max-width: 620px; }
.peticiones { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 26px auto 34px; max-width: 900px; align-items: center; }
.peticiones > small { width: 100%; text-align: center; font-weight: 700; color: var(--tenue); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; }
.peticion { font: inherit; font-weight: 700; font-size: 0.92rem; cursor: pointer; border: 0; padding: 10px 16px; border-radius: 16px 16px 4px 16px;
  background: var(--wa-mio); color: var(--tinta); box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13), 0 10px 20px -16px rgba(8, 26, 43, 0.5);
  transition: transform 0.2s, opacity 0.3s, background 0.3s; display: inline-flex; align-items: center; gap: 8px; }
.peticion::before { content: "💬"; }
.peticion:hover:not(:disabled) { transform: translateY(-2px); }
.peticion:focus-visible { outline: 3px solid var(--cian-oscuro); outline-offset: 2px; }
.peticion:disabled { cursor: default; opacity: 0.5; }
.peticion.hecha { background: #fff; box-shadow: 0 0 0 1px var(--linea); opacity: 0.75; }
.peticion.hecha::before { content: "✓"; color: var(--verde); font-weight: 800; }
.peticion.todo { background: var(--marca); color: var(--sobre-marca); }
.peticion.todo::before { content: "✨"; }

.mesa { display: grid; gap: 34px; align-items: start; justify-items: center; }
@media (min-width: 900px) { .mesa { grid-template-columns: 272px minmax(0, 660px); gap: 64px; justify-content: center; justify-items: stretch; } }
.mesa .movil { position: relative; left: auto; top: auto; width: 272px; height: 560px; transform: none; }
/* En el móvil, más bajo pero con la misma forma (alto ≈ 2 × ancho). */
@media (max-width: 899px) { .mesa .movil { width: 240px; height: 490px; border-radius: 40px; } .mesa .pantalla { border-radius: 31px; } }
.cambio { position: relative; width: 100%; max-width: 680px; min-width: 0; }
.cambio .hecho-pastilla { left: 50%; top: -18px; transform: translate(-50%, 10px) scale(0.95); }
.cambio .hecho-pastilla.ve { transform: translate(-50%, 0); }
.resalta { animation: resalta 1.6s ease; }
.hoja-cab { display: none; }

/* En el móvil no caben el teléfono y el cambio a la vez: el cambio sube como
   una hoja dentro del teléfono, como abre sus pantallas el Chat de verdad.
   El script mueve .cambio dentro de .pantalla; en el ordenador, nada de esto. */
@media (max-width: 899px) {
  .peticiones { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 22px -16px 16px; padding: 4px 16px 10px; scrollbar-width: none; scroll-snap-type: x proximity; }
  .peticiones::-webkit-scrollbar { display: none; }
  .peticiones > small { display: none; }
  .peticion { flex: none; white-space: nowrap; scroll-snap-align: start; }
  /* El ancho sale del alto: siempre con forma de teléfono (alto ≈ 2,08 × ancho). */
  .mesa .movil { --alto: clamp(460px, calc(100svh - 210px), 620px); height: var(--alto); width: min(calc(var(--alto) / 2.08), 86vw); border-radius: 42px; }
  .mesa .pantalla { position: relative; border-radius: 34px; }
  .pantalla .cambio { position: absolute; left: 0; right: 0; bottom: 0; top: 64px; z-index: 5; max-width: none; background: #fff;
    border-radius: 20px 20px 0 0; box-shadow: 0 -12px 30px -10px rgba(8, 26, 43, 0.35); overflow-y: auto; overscroll-behavior: contain;
    padding: 0 10px 14px; transform: translateY(102%); transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .pantalla .cambio.abierta { transform: none; }
  .pantalla .cambio > :not(.hoja-cab):not(.hecho-pastilla) { zoom: 0.8; }
  .pantalla .cambio .navegador, .pantalla .cambio .ig, .pantalla .cambio .gg { box-shadow: 0 0 0 1px var(--linea); }
  /* Dentro de la hoja, sin tarjeta dentro de la tarjeta: todo el ancho para el contenido. */
  .pantalla .cambio .tp { background: none; box-shadow: none; padding: 0; }
  .pantalla .tp > .tp-cab.repite { display: none; }
  .pantalla .ph { grid-template-columns: 34px 1fr; gap: 10px; padding: 10px; }
  .pantalla .ph-ico { width: 34px; height: 34px; font-size: 1rem; }
  .pantalla .ph-estado { grid-column: 2; justify-self: start; }
  .pantalla .ag { grid-template-columns: 38px 1fr 1fr; gap: 0 6px; }
  .pantalla .ag-cita { padding: 2px 6px; }
  /* El aviso «✓ …», abajo y quieto: arriba tapaba la cabecera. */
  .pantalla .cambio.abierta { transform: translateY(0); }
  .pantalla .cambio .hecho-pastilla { position: fixed; top: auto; bottom: 14px; left: 50%; margin: 0; transform: translate(-50%, 8px) scale(0.95); }
  .pantalla .cambio .hecho-pastilla.ve { transform: translate(-50%, 0); }
  .pantalla .hoja-cab { display: flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 2; margin: 0 -10px 8px; padding: 14px 12px 8px;
    background: #fff; font-weight: 800; font-size: 0.82rem; white-space: nowrap; }
  .pantalla .hoja-cab::before { content: ""; position: absolute; left: 50%; top: 5px; width: 36px; height: 4px; margin-left: -18px; border-radius: 4px; background: #cbd5e1; }
  .pantalla .hoja-cab button { margin-left: auto; font: inherit; font-size: 0.75rem; font-weight: 700; border: 0; border-radius: 999px; padding: 5px 11px; background: #e2e8f0; color: var(--tinta); cursor: pointer; white-space: nowrap; }
}

/* La tarjeta del panel: lo que el dueño vería si entrara a mirar. */
.tp { background: #fff; border-radius: 22px; box-shadow: var(--sombra), 0 0 0 1px var(--linea); padding: 18px; display: grid; gap: 10px; }
.tp-cab { display: flex; align-items: center; gap: 10px; }
.tp-cab b { font-size: 1.05rem; }
.tp-cab small { color: var(--tenue); font-weight: 600; margin-left: auto; font-size: 0.8rem; }
.contador { min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; background: var(--rojo); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 0.85rem; transition: background 0.4s; }
.contador.cero { background: #e2e8f0; color: var(--suave); }

/* 9:00 · Por hacer */
.ph { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: start; padding: 12px; border-radius: 16px; background: #fff7f7;
  box-shadow: 0 0 0 1px #fde2e2; transition: background 0.5s, box-shadow 0.5s; }
.ph-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 1.2rem; background: var(--t); }
.ph b { display: block; font-size: 0.93rem; }
.ph small { color: var(--suave); font-size: 0.83rem; display: block; }
.ph-estado { font-size: 0.72rem; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: #fee2e2; color: #b91c1c; white-space: nowrap; }
.ph-res { display: none; margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: #fff; border-left: 3px solid var(--verde); font-size: 0.83rem; }
.ph.ok { background: #f0fdf4; box-shadow: 0 0 0 1px #bbf7d0; }
.ph.ok .ph-estado { background: #dcfce7; color: #15803d; }
.ph.ok .ph-res { display: block; animation: entra 0.5s both; }
.ph-fin { display: none; text-align: center; padding: 14px; border-radius: 16px; background: linear-gradient(135deg, #fdf4ff, #ecfeff); font-weight: 800; font-size: 1.05rem; }
.tp.al-dia .ph-fin { display: block; animation: entra 0.6s both; }

/* 10:00 · La web del negocio, con sus mandos de estilo */
.navegador { border-radius: 18px; overflow: hidden; background: #fff; box-shadow: var(--sombra), 0 0 0 1px var(--linea); }
.mw { --a: #b4537a; --a-suave: #fbeef3; --fondo-w: #ffffff; --rb: 6px; --rf: 10px; --letra: "Jakarta", system-ui, sans-serif; --cols: 2;
  background: var(--fondo-w); font-family: var(--letra); transition: background 0.8s; color: #1f2937; }
.mw * { transition: background 0.8s, color 0.8s, border-radius 0.7s, border-color 0.8s; }
.mw-nav { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
.mw-nav b { font-size: 1.05rem; color: var(--a); letter-spacing: -0.01em; }
.mw-nav span { font-size: 0.75rem; color: #6b7280; margin-left: auto; }
@media (max-width: 560px) { .mw-nav span { display: none; } .mw-nav .mw-btn { margin-left: auto; } }
.mw-btn { display: inline-block; font-style: normal; font-weight: 700; font-size: 0.78rem; padding: 8px 14px; border-radius: var(--rb); background: var(--a); color: #fff; }
.mw-hero { position: relative; height: 165px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 6px; padding: 18px; color: #fff;
  background: linear-gradient(transparent 20%, rgba(0, 0, 0, 0.6)), var(--foto) center/cover; }
.mw-hero h3 { margin: 0; font-size: 1.6rem; letter-spacing: -0.02em; line-height: 1.1; font-weight: 800; }
.mw-hero p { margin: 0 0 6px; font-size: 0.85rem; opacity: 0.92; }
.mw-sec { padding: 14px 16px 4px; }
.mw-sec h4 { margin: 0 0 10px; font-size: 0.95rem; color: var(--a); }
.mw-servicios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mw-serv { text-align: center; font-size: 0.78rem; }
.mw-serv img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rf); margin: 0 auto 6px; transition: border-radius 0.7s, width 0.7s; }
.mw.circulo .mw-serv img { border-radius: 50%; aspect-ratio: 1; width: 78%; }
.mw-serv b { display: block; }
.mw-serv span { color: var(--a); font-weight: 700; }
.mw-galeria { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 6px; padding-bottom: 16px; }
.mw-galeria img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: calc(var(--rf) * 0.6); }
.mw-galeria img:nth-child(n+5) { display: none; }
.mw.tres .mw-galeria img:nth-child(n+5) { display: block; }
.mw.tres .mw-galeria img { aspect-ratio: 4 / 3; }

/* 11:00 · Servicios y productos */
.srv-grupo { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tenue); margin-top: 6px; }
.srv { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; padding: 10px 12px; border-radius: 12px; background: #f6f8fc; font-size: 0.92rem; }
.srv b { font-weight: 700; }
.srv small { color: var(--tenue); font-weight: 600; }
.srv .eur { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 72px; text-align: right; }
.srv .eur s { color: var(--tenue); font-weight: 600; font-size: 0.8rem; margin-right: 4px; }
.srv .nuevo { font-size: 0.68rem; font-weight: 800; color: #fff; background: var(--verde); padding: 2px 7px; border-radius: 999px; margin-left: 6px; vertical-align: 2px; }
.srv[hidden] { display: none; }
.prod { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: #fdf4ff; }
.prod > span:first-child { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; font-size: 1.5rem; background: linear-gradient(135deg, #fce7f3, #e0f2fe); color: #9d174d; }
.prod small { display: block; color: var(--suave); font-size: 0.78rem; }
.vacio { padding: 14px; border-radius: 12px; border: 2px dashed var(--linea); text-align: center; color: var(--tenue); font-weight: 600; font-size: 0.88rem; }

/* 13:00 · La agenda del día */
.ag { display: grid; grid-template-columns: 44px 1fr 1fr; gap: 0 8px; }
.ag-horas, .ag-col { position: relative; height: calc(11 * var(--fila)); --fila: 46px; }
.ag-horas span { position: absolute; right: 4px; font-size: 0.7rem; font-weight: 700; color: var(--tenue); transform: translateY(-50%); font-variant-numeric: tabular-nums; }
.ag-col { background: repeating-linear-gradient(#f6f8fc 0 calc(var(--fila) - 1px), #e8edf3 calc(var(--fila) - 1px) var(--fila)); border-radius: 10px; }
.ag-quien { text-align: center; font-weight: 800; font-size: 0.85rem; padding-bottom: 6px; }
.ag-cita { position: absolute; left: 4px; right: 4px; top: calc(var(--i) * var(--fila) + 2px); height: calc(var(--d) * var(--fila) - 4px); border-radius: 9px;
  padding: 3px 8px; font-size: 0.74rem; line-height: 1.2; background: var(--c, #fae8f8); border-left: 4px solid var(--b, var(--rosa)); overflow: hidden;
  transition: top 1s cubic-bezier(0.5, 0, 0.2, 1); }
.ag-cita b { display: block; font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-cita.bloqueo { background: repeating-linear-gradient(45deg, #f1f5f9 0 6px, #e2e8f0 6px 12px); border-left-color: #64748b; color: #334155; display: none; }
.ag-cita.bloqueo.ve { display: block; animation: entra 0.5s both; }

/* 16:00 · Los números: las piezas que pide */
.num-vacio { min-height: 220px; display: grid; place-items: center; text-align: center; color: var(--tenue); font-weight: 600; border: 2px dashed var(--linea); border-radius: 18px; padding: 20px; }
.num-pieza { display: grid; gap: 10px; padding: 16px; border-radius: 16px; background: #f6f8fc; animation: entra 0.6s both; }
.num-pieza > b { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tenue); }
.num-cifra { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.num-cifra strong { font-size: 2.4rem; letter-spacing: -0.04em; line-height: 1; }
.num-cifra span { color: var(--suave); font-weight: 600; font-size: 0.9rem; }
.num-cifra .sube { color: var(--verde); font-weight: 800; }
.barras { display: flex; align-items: flex-end; gap: 5px; height: 120px; }
.barras i { flex: 1; border-radius: 6px 6px 3px 3px; background: linear-gradient(#d8b4e2, #a5f3fc); height: var(--h); transform-origin: bottom; animation: crece 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.1) both; }
.barras i.hoy { background: var(--marca); }
.ejes { display: flex; justify-content: space-between; font-size: 0.68rem; color: var(--tenue); font-weight: 700; }
.comp { display: grid; grid-template-columns: 90px 1fr auto; gap: 10px; align-items: center; font-size: 0.85rem; font-weight: 700; }
.comp i { height: 18px; border-radius: 6px; width: var(--w); background: #cbd5e1; transform-origin: left; animation: ancho 0.8s both; }
.comp i.este { background: var(--marca); }
.rank { display: grid; grid-template-columns: 130px 1fr auto; gap: 10px; align-items: center; font-size: 0.85rem; }
.rank i { height: 14px; border-radius: 5px; width: var(--w); background: linear-gradient(90deg, #c462bd, #67e8f9); transform-origin: left; animation: ancho 0.8s both; }
.rank b { font-variant-numeric: tabular-nums; }

/* 18:00 · Cobros */
.cobro { display: grid; grid-template-columns: 36px 1fr auto auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: #f6f8fc; font-size: 0.9rem; transition: background 0.5s; }
.cobro > span:first-child { width: 36px; height: 36px; border-radius: 50%; background: #e0f2fe; display: grid; place-items: center; font-weight: 800; font-size: 0.85rem; color: #0369a1; }
.cobro small { display: block; color: var(--tenue); font-size: 0.76rem; font-weight: 600; }
.cobro .eur { font-weight: 800; font-variant-numeric: tabular-nums; }
.cobro .est { font-size: 0.7rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: #dcfce7; color: #15803d; white-space: nowrap; }
.cobro .est.espera { background: #fef3c7; color: #a16207; }
.cobro .est.devuelto { background: #fee2e2; color: #b91c1c; }
.cobro.devuelto .eur { text-decoration: line-through; color: var(--tenue); }
.cobro[hidden] { display: none; }
.total-hoy { margin-left: auto; font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* 19:00 · Instagram y Google */
.redes { display: grid; gap: 16px; }
@media (min-width: 640px) { .redes { grid-template-columns: 1.1fr 1fr; } }
.ig { background: #fff; border-radius: 22px; box-shadow: var(--sombra), 0 0 0 1px var(--linea); padding: 14px; }
.ig-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ig-cab .av { width: 42px; height: 42px; border-radius: 50%; padding: 2px; background: linear-gradient(45deg, #f59e0b, #ec4899, #8b5cf6); }
.ig-cab .av i { display: block; width: 100%; height: 100%; border-radius: 50%; border: 2px solid #fff; background: var(--foto) center/cover; }
.ig-cab b { display: block; font-size: 0.9rem; }
.ig-cab small { color: var(--tenue); font-size: 0.75rem; }
.ig-rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.ig-rejilla > * { aspect-ratio: 1; width: 100%; object-fit: cover; border-radius: 3px; }
.ig-rejilla .nueva-pub { position: relative; animation: entra 0.6s both, resalta 1.8s 0.3s; }
.ig-rejilla .nueva-pub img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
.ig-rejilla .nueva-pub span { position: absolute; left: 4px; bottom: 4px; font-size: 0.62rem; font-weight: 800; background: rgba(255, 255, 255, 0.92); padding: 2px 6px; border-radius: 999px; }
.ig-rejilla .programada { display: grid; place-items: center; text-align: center; font-size: 0.68rem; font-weight: 800; color: var(--suave); background: repeating-linear-gradient(45deg, #f8fafc 0 6px, #eef2f7 6px 12px); border: 2px dashed #cbd5e1; animation: entra 0.6s both; }
.gg { background: #fff; border-radius: 22px; box-shadow: var(--sombra), 0 0 0 1px var(--linea); padding: 16px; display: grid; gap: 10px; align-content: start; }
.gg-cab { display: flex; align-items: center; gap: 10px; }
.gg-cab img { width: 26px; height: 26px; }
.gg-cab b { display: block; font-size: 0.95rem; }
.gg-nota { font-size: 0.85rem; color: var(--suave); }
.gg-nota strong { color: var(--tinta); font-size: 1.05rem; }
.gg-nota .estrellas { color: #f59e0b; letter-spacing: 1px; }
.gg-pub { border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px var(--linea); font-size: 0.82rem; }
.gg-pub img { width: 100%; height: 110px; object-fit: cover; }
.gg-pub p { margin: 0; padding: 8px 10px; }
.gg-pub small { display: block; padding: 0 10px 8px; color: var(--tenue); font-weight: 600; }
.gg-pub[hidden] { display: none; }
.gg-pub.ve { animation: entra 0.6s both, resalta 1.8s 0.3s; }

/* 21:00 · El día, cerrado */
.cierre { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.cierre div { background: #fff; border-radius: 20px; padding: 18px; box-shadow: 0 0 0 1px var(--linea); opacity: 0.25; filter: grayscale(1); transition: opacity 0.6s, filter 0.6s, transform 0.6s; }
.cierre.ve div { opacity: 1; filter: none; }
.cierre div:nth-child(2) { transition-delay: 0.15s; } .cierre div:nth-child(3) { transition-delay: 0.3s; } .cierre div:nth-child(4) { transition-delay: 0.45s; }
.cierre div:nth-child(5) { transition-delay: 0.6s; } .cierre div:nth-child(6) { transition-delay: 0.75s; }
.cierre b { display: block; font-size: 2rem; letter-spacing: -0.04em; line-height: 1.1; }
.cierre span { color: var(--suave); font-weight: 600; font-size: 0.88rem; }
.cierre .ia { background: linear-gradient(#fff, #fff) padding-box, var(--marca) border-box; border: 2px solid transparent; box-shadow: none; }

/* 23:00 · Lo que Lía se encuentra al despertar */
.wa-cab .avatar.foto { background: var(--foto) center/cover; }
.tarjeta-ia { margin-top: 6px; display: grid; grid-template-columns: 44px 1fr; gap: 8px; align-items: center; padding: 6px; border-radius: 8px; background: #f6f8fc; }
.tarjeta-ia img { width: 44px; height: 44px; border-radius: 7px; object-fit: cover; }
.tarjeta-ia b { display: block; font-size: 0.78rem; }
.tarjeta-ia small { color: #667781; font-size: 0.7rem; }
.tarjeta-ia em { grid-column: 1 / -1; font-style: normal; text-align: center; font-weight: 700; font-size: 0.76rem; color: #fff; background: #00a884; border-radius: 999px; padding: 5px; }
.bandeja { display: grid; gap: 8px; }
.msj { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: #f6f8fc; animation: entra 0.5s both; }
.msj > span:first-child { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: #e0f2fe; color: #0369a1; }
.msj b { display: block; font-size: 0.9rem; }
.msj small { color: var(--suave); font-size: 0.8rem; display: block; }
.msj .est { font-size: 0.68rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: #dcfce7; color: #15803d; white-space: nowrap; }
.msj .est.espera { background: #fee2e2; color: #b91c1c; }
.msj[hidden], .cita-nueva[hidden] { display: none; }
.cita-nueva { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #f0fdf4; border-left: 4px solid var(--verde); font-weight: 600; font-size: 0.9rem; animation: entra 0.5s both; }
.cita-nueva small { margin-left: auto; font-size: 0.7rem; font-weight: 800; color: #fff; background: var(--verde); padding: 2px 8px; border-radius: 999px; }
.dormida { text-align: center; padding: 16px; color: var(--tenue); font-weight: 600; font-size: 0.9rem; }

/* Empezar: la cuenta, montándose */
.montaje { display: grid; gap: 12px; }
.barra-pc { height: 12px; border-radius: 999px; background: #eef2f7; overflow: hidden; }
.barra-pc i { display: block; height: 100%; width: var(--pc, 5%); background: var(--marca); border-radius: 999px; transition: width 1s cubic-bezier(0.2, 0.8, 0.2, 1); }
.paso-m { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: #f6f8fc; font-size: 0.9rem; transition: background 0.5s; }
.paso-m > span { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #fff; font-size: 1rem; box-shadow: 0 0 0 1px var(--linea); }
.paso-m small { display: block; color: var(--tenue); font-size: 0.78rem; font-weight: 600; }
.paso-m em { font-style: normal; font-size: 0.7rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: #eef2f7; color: var(--suave); white-space: nowrap; }
.paso-m.ok { background: #f0fdf4; }
.paso-m.ok em { background: #dcfce7; color: #15803d; }
.mini-fotos { display: flex; gap: 6px; }
.mini-fotos img { width: 54px; height: 40px; border-radius: 8px; object-fit: cover; animation: entra 0.5s both; }
.lista-papel { display: grid; gap: 4px; width: 150px; height: 96px; padding: 10px 12px; border-radius: 7px; margin-bottom: 4px; background: #fffdf7;
  box-shadow: inset 0 0 0 1px #eadfc8; transform: rotate(-2deg); font-size: 0.6rem; font-weight: 700; color: #5b4b2a; font-family: Georgia, serif; }
.lista-papel div { display: flex; justify-content: space-between; border-bottom: 1px dotted #d6c7a5; }
.tres-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; width: 150px; margin-bottom: 4px; }
.tres-fotos img { width: 100%; height: 48px; object-fit: cover; border-radius: 5px; }

/* Tú mandas */
.mandas { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); max-width: 1000px; margin: 0 auto; }
.mandas div { background: #fff; border-radius: 22px; padding: 22px; box-shadow: 0 0 0 1px var(--linea); }
.mandas i { font-size: 1.5rem; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 12px; background: var(--t); color: var(--c); }
.mandas b { display: block; font-size: 1.08rem; margin-bottom: 4px; }
.mandas p { margin: 0; color: var(--suave); font-size: 0.93rem; }
.titulo-bloque { text-align: center; max-width: 760px; margin: 0 auto 34px; }
.titulo-bloque p { color: var(--suave); font-size: 1.06rem; margin: 0; }

/* Y además */
.ademas { max-width: 940px; margin: 26px auto 0; text-align: center; }
.ademas b { display: block; color: var(--suave); margin-bottom: 12px; }
.ademas div { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ademas span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--linea); font-weight: 600; font-size: 0.88rem; }
.ademas span i { font-size: 1.05rem; color: var(--rosa-oscuro); }

/* Los papeles: el panel de Documentos al lado del móvil y la rejilla común tras «Ver más» */
.paso-m[hidden], .insp[hidden] { display: none; }
.paso-m.mal { background: #fef2f2; }
.paso-m.mal em { background: #fee2e2; color: #b91c1c; }
.paso-m.ojo { background: #fffbeb; }
.paso-m.ojo em { background: #fef3c7; color: #a16207; }
.paso-m.ve { animation: entra 0.5s both; }
.al-mes { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px 12px; border-radius: 12px; background: linear-gradient(135deg, #fdf4ff, #ecfeff); font-size: 0.88rem; color: var(--suave); font-weight: 600; }
.al-mes b { font-size: 1.25rem; color: var(--tinta); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.insp { display: grid; gap: 6px; padding: 12px; border-radius: 14px; background: #f6f8fc; font-size: 0.86rem; animation: entra 0.5s both; }
.insp > b { font-size: 0.9rem; }
.insp div { display: flex; gap: 8px; color: var(--suave); }
.insp div span { margin-left: auto; white-space: nowrap; font-weight: 700; color: #15803d; }
.insp div.falta span { color: #a16207; }
.insp .zip { margin-top: 4px; align-items: center; padding: 9px 12px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--linea); font-weight: 700; color: var(--tinta); }
.insp .zip i { font-size: 1.15rem; color: var(--cian-oscuro); }
.insp .zip small { margin-left: auto; color: var(--tenue); font-weight: 600; white-space: nowrap; }
.papeles-todos { position: relative; max-width: 1060px; margin: 26px auto 0; overflow: hidden; max-height: 150px; transition: max-height 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.papeles-todos.abierto { max-height: var(--alto, 2000px); }
.papeles-todos:not(.abierto)::after { content: ""; position: absolute; inset: auto 0 0; height: 90px; background: linear-gradient(rgba(246, 248, 252, 0), var(--fondo)); pointer-events: none; }
section.hora:nth-of-type(even) .papeles-todos:not(.abierto)::after { background: linear-gradient(rgba(255, 255, 255, 0), #fff); }
.rejilla-papeles { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.rejilla-papeles div { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto 1fr; gap: 2px 12px; align-items: start; background: #fff; border-radius: 18px; padding: 14px; box-shadow: 0 0 0 1px var(--linea); }
.rejilla-papeles span { grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 1.15rem; background: var(--t, #f3e8f2); }
.rejilla-papeles b { font-size: 0.95rem; }
.rejilla-papeles small { color: var(--suave); font-size: 0.83rem; }
.papeles-pie { display: grid; justify-items: center; gap: 14px; margin-top: 18px; text-align: center; }
.papeles-pie p { margin: 0; color: var(--suave); font-size: 1.02rem; max-width: 640px; }
.papeles-pie p b { color: var(--tinta); }
.papeles-pie .boton[hidden] { display: none; }

/* ── Precio y final (como /negocios) ─────────────────────── */
section.bloque { position: relative; padding: 90px 0; overflow: hidden; }
.precio-caja { position: relative; max-width: 940px; margin: 0 auto; border-radius: 34px; padding: 3px; background: var(--marca); box-shadow: var(--sombra); }
.precio-dentro { border-radius: 31px; background: #fff; padding: 38px 30px; display: grid; gap: 30px; align-items: center; }
@media (min-width: 820px) { .precio-dentro { grid-template-columns: 1fr 1fr; padding: 46px; } }
.importe { display: flex; align-items: baseline; gap: 12px; margin: 14px 0 4px; }
.importe b { font-size: 4.2rem; letter-spacing: -0.05em; line-height: 1; }
.importe span { color: var(--suave); font-weight: 600; }
.precio-dentro p { color: var(--suave); margin: 0 0 22px; }
.incluye { display: grid; gap: 9px; grid-template-columns: 1fr 1fr; }
.incluye div { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.92rem; }
.incluye i { color: var(--verde); }
.final { text-align: center; }
.final .luz.rosa { width: 460px; height: 460px; left: 50%; top: 50%; transform: translate(-80%, -50%); }
.final .luz.cian { width: 460px; height: 460px; left: 50%; top: 50%; transform: translate(-10%, -40%); }
.final .envoltorio { position: relative; z-index: 1; }
.final .acciones { justify-content: center; margin-top: 30px; }
.final p { color: var(--suave); font-size: 1.08rem; }
.final .nota { margin-top: 22px; font-size: 0.95rem; }
.final .nota a { font-weight: 700; }
.pie { text-align: center; padding: 28px 16px 40px; color: var(--tenue); font-size: 0.82rem; border-top: 1px solid var(--linea); }
.pie a { color: var(--suave); }
.pie-enlaces { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin-top: 8px; }
.pie-enlaces button { font: inherit; color: var(--suave); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
#cookie-banner { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; padding: 14px 16px; background: #fff; border-radius: 18px;
  box-shadow: var(--sombra), 0 0 0 1px var(--linea); color: var(--suave); font-size: 0.85rem; max-width: 760px; margin: 0 auto; }
#cookie-banner .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
#cookie-banner p { margin: 0; flex: 1 1 280px; }
#cookie-banner a { color: var(--tinta); }
#cookie-banner .d-flex { display: flex; gap: 8px; }
#cookie-banner button { font: inherit; font-weight: 700; font-size: 0.85rem; padding: 9px 15px; border-radius: 999px; cursor: pointer; border: 0; background: #eef2f7; color: var(--tinta); }
#cookie-banner #cookie-accept { background: var(--marca); color: var(--sobre-marca); }

@keyframes entra { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes punto { 0%, 60%, 100% { transform: none; opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes parpadeo { 50% { opacity: 0; } }
@keyframes brilla { 0% { background: rgba(5, 249, 242, 0.45); } 100% { background: transparent; } }
@keyframes resalta { 0% { box-shadow: 0 0 0 0 rgba(5, 249, 242, 0); } 25% { box-shadow: 0 0 0 6px rgba(5, 249, 242, 0.55); } 100% { box-shadow: 0 0 0 14px rgba(5, 249, 242, 0); } }
@keyframes cambia { 0% { transform: none; } 40% { transform: scale(1.35); color: var(--rosa-oscuro); } 100% { transform: none; } }
@keyframes crece { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes ancho { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes flota { 50% { transform: translateY(-10px); } }
@keyframes llama { 50% { box-shadow: 0 0 0 6px rgba(0, 168, 132, 0.25); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; animation-delay: 0s !important; transition-duration: 0.001s !important; transition-delay: 0s !important; }
  html { scroll-behavior: auto; }
}

/* Filas con foto: platos, productos, servicios, clases. */
.ff { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; padding: 8px 12px 8px 8px; border-radius: 14px; background: #f6f8fc; font-size: 0.92rem; transition: background 0.5s; }
.ff > img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; }
.ff b { display: block; font-weight: 700; }
.ff small { display: block; color: var(--tenue); font-weight: 600; font-size: 0.78rem; }
.ff .eur { font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.ff .eur s { color: var(--tenue); font-weight: 600; font-size: 0.8rem; margin-right: 4px; }
.ff .eur small { color: var(--tenue); }
.ff[hidden] { display: none; }
.ff .etq { display: inline-block; font-size: 0.66rem; font-weight: 800; color: #fff; background: var(--verde); padding: 2px 7px; border-radius: 999px; margin-left: 6px; vertical-align: 2px; }
.ff .etq.roja { background: #dc2626; }
.ff .etq.ambar { background: #d97706; }
.ff.apagada > img { filter: grayscale(1); opacity: 0.6; }