/* Estilos de las secciones de abajo (carga sin bloquear). Lo de la primera pantalla está en línea en index.html. */
/* ---------- Secciones ---------- */
.section { padding-block: clamp(64px, 9vw, 120px); border-top: 1.5px dashed var(--line-strong); }
.sec-head { display: grid; gap: 12px; margin-bottom: clamp(28px, 4vw, 48px); max-width: 860px; }
/* Etiqueta de sección: pastilla en minúsculas con la estrella de Loto (antes: mono en mayúsculas de 12 px con tracking .14em) */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; justify-self: start; width: fit-content; padding: 5px 12px 5px 10px; border-radius: 999px; background: var(--etq-bg); color: var(--ink); font: 700 var(--t-sm)/1.3 var(--f-body); letter-spacing: .01em; }
.eyebrow::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--ink-2); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }
.sec-head h2 { font-size: var(--t-3xl); }
.sec-sub { color: var(--ink-muted); max-width: 60ch; font-size: var(--t-lg); }

/* Sellos postales: perforados, se levantan, se inclinan y reciben matasellos */
#servicios { overflow-x: clip; }
.stamps { display: grid; gap: 28px 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.stamp-wrap { position: relative; transition: transform .5s cubic-bezier(.3, 1.5, .5, 1); }
.stamp-wrap:nth-child(odd) { transform: rotate(-.8deg); }
.stamp-wrap:nth-child(even) { transform: rotate(.7deg); }
.stamp-wrap::before {
  content: "";
  position: absolute;
  inset: 16px 10px -10px;
  border-radius: 8px;
  background: var(--shadow-ink);
  filter: blur(16px);
  opacity: 0;
  transition: opacity .3s ease;
  z-index: -1;
}
.stamp-wrap:hover, .stamp-wrap:focus-within { transform: translateY(-12px) rotate(-2.4deg) scale(1.015); }
.stamp-wrap:nth-child(even):hover, .stamp-wrap:nth-child(even):focus-within { transform: translateY(-12px) rotate(2.2deg) scale(1.015); }
.stamp-wrap:hover::before, .stamp-wrap:focus-within::before { opacity: 1; }
.stamp {
  --hole: 5px;
  --step: 14px;
  height: 100%;
  background: var(--paper-2);
  padding: 7px;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    radial-gradient(circle var(--hole), #0000 96%, #000) calc(var(--step) / -2) calc(var(--step) / -2) / var(--step) var(--step) round border-box;
  mask:
    linear-gradient(#000 0 0) content-box,
    radial-gradient(circle var(--hole), #0000 96%, #000) calc(var(--step) / -2) calc(var(--step) / -2) / var(--step) var(--step) round border-box;
}
.stamp-in {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 22px 18px;
  border: 1.5px solid var(--line-strong);
  border-radius: 4px;
}
.stamp-top { display: flex; justify-content: space-between; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.stamp h3 { font-size: var(--t-xl); font-weight: 800; letter-spacing: -.01em; }
.stamp p:not(.stamp-top) { color: var(--ink-muted); }
.incl { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.incl li { font: 600 var(--t-sm)/1.3 var(--f-body); padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--ink); }
.stamp .go { margin-top: auto; }
.stamp .stamp-go { margin-top: auto; display: flex; flex-wrap: wrap; gap: 0 22px; }
.stamp .stamp-go .go { margin-top: 0; }
.postmark {
  position: absolute;
  top: -22px;
  right: -16px;
  width: 118px;
  height: 118px;
  color: var(--ink-2);
  mix-blend-mode: var(--pm-blend);
  filter: url(#lc-riso);
  opacity: 0;
  transform: scale(1.6) rotate(-34deg);
  transition: opacity .16s ease, transform .34s cubic-bezier(.2, 1.7, .4, 1);
  pointer-events: none;
}
.stamp-wrap:hover .postmark, .stamp-wrap:focus-within .postmark { opacity: .9; transform: scale(1) rotate(-14deg); }
.stamp-wrap:hover .ico-xl, .stamp-wrap:focus-within .ico-xl { animation: misreg .55s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes misreg {
  0% { filter: url(#lc-riso) drop-shadow(6px -5px 0 var(--spot)); transform: translate(-3px, 2px) rotate(-4deg); }
  45% { filter: url(#lc-riso) drop-shadow(-4px 3px 0 var(--spot)); transform: translate(2px, -1px) rotate(3deg); }
  100% { filter: url(#lc-riso) drop-shadow(2px 2px 0 var(--spot)); transform: none; }
}

/* ---------- Demo: conversación de ejemplo del asistente ---------- */
.demo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "copy" "phone" "acts";
  gap: 22px;
  margin-top: clamp(48px, 7vw, 88px);
  padding-top: clamp(32px, 5vw, 56px);
  border-top: 1.5px dashed var(--line-strong);
}
@media (min-width: 900px) {
  .demo { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); grid-template-areas: "copy phone" "acts phone"; gap: 26px 64px; align-items: start; }
}
.demo-copy { grid-area: copy; display: grid; gap: 14px; align-content: start; min-width: 0; }
.demo-acts { grid-area: acts; display: grid; gap: 14px; justify-items: start; align-content: start; min-width: 0; }
.demo-tag {
  justify-self: start;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--spot);
  color: #1B2558;
  font: 700 .8125rem/1.3 var(--f-body);
  letter-spacing: .01em;
}
.demo-title { font-family: var(--f-display); font-weight: 400; font-size: var(--t-2xl); line-height: 1.05; max-width: 18ch; text-shadow: .05em .05em 0 var(--misreg); }
.demo-sub { color: var(--ink-muted); font-size: var(--t-lg); max-width: 48ch; }
.demo-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
/* en dos columnas, si queda una pestaña sola al final ocupa el renglón completo */
.demo-tabs button:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 480px) { .demo-tabs { display: flex; flex-wrap: wrap; } }
.demo-tabs button {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  background: transparent;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.demo-tabs button:hover { background: var(--line); }
.demo-tabs button[aria-selected="true"] { background: var(--btn-bg); color: var(--btn-fg); box-shadow: 3px 3px 0 var(--spot); }
.demo-note { color: var(--ink-muted); max-width: 46ch; }
.chat-ctrl { display: flex; flex-wrap: wrap; gap: 8px; }
.chat-ctrl[hidden] { display: none; }
.chat-btn {
  min-height: 44px;
  padding: 0 16px;
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  font: 600 var(--t-sm)/1 var(--f-body);
  cursor: pointer;
}
.chat-btn:hover { border-color: var(--ink); }

/* El teléfono: impreso en una tinta, con el registro corrido en amarillo */
.phone {
  grid-area: phone;
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 420px;
  display: grid;
  border: 2px solid var(--ink);
  border-radius: 30px;
  background: var(--paper-2);
  box-shadow: 6px 6px 0 var(--spot);
  overflow: hidden;
  scroll-margin-bottom: 12px;
}
.phone-tag {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--spot);
  color: #1B2558;
  font: 700 .8125rem/1.2 var(--f-body);
  letter-spacing: .01em;
  transform: rotate(4deg);
}
.chat-bar { display: flex; align-items: center; gap: 10px; padding: 14px 64px 12px 16px; background: var(--paper); border-bottom: 1.5px dashed var(--line-strong); }
.chat-av { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--spot); font-size: 21px; line-height: 1; }
.chat-who { display: grid; min-width: 0; line-height: 1.25; }
.chat-name { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-status { font-size: var(--t-sm); color: var(--ink-muted); }
.chat-log {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: clamp(300px, 46vh, 380px);
  height: clamp(300px, 46svh, 380px);
  padding: 16px 14px;
  overflow-y: auto;
  scrollbar-width: thin;
  background: radial-gradient(circle, var(--line) 1.2px, transparent 1.7px) 0 0 / 14px 14px, var(--paper-2);
}
/* los mensajes se apilan desde abajo, como en el chat de verdad */
.chat-log > :first-child { margin-top: auto; }
.chat-log:focus-visible { outline-offset: -4px; }
.msg {
  max-width: 84%;
  padding: 9px 13px 10px;
  border-radius: 16px;
  font-size: 1rem;
  line-height: 1.4;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.msg.is-bot { align-self: flex-start; background: var(--paper); color: var(--ink); border: 1.5px solid var(--line-strong); border-bottom-left-radius: 4px; }
.msg.is-them { align-self: flex-end; background: var(--btn-bg); color: var(--btn-fg); border-bottom-right-radius: 4px; }
.msg.is-file { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.msg.is-file .file-ico { flex: none; display: grid; place-items: center; width: 34px; height: 40px; border-radius: 6px; background: var(--spot); color: #1B2558; font: 500 10px/1 var(--f-mono); letter-spacing: .04em; }
.msg-note {
  align-self: center;
  margin-block: 4px;
  padding: 4px 10px;
  border: 1px dashed var(--line-strong);
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink-muted);
  font: 600 .8125rem/1.35 var(--f-body);
  text-align: center;
}
/* El asistente pasa la plática a una persona: nota marcada y burbuja de la persona en amarillo, con su nombre */
.msg-note.is-handoff { border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink); }
.msg.is-human { align-self: flex-start; background: var(--spot); color: #1B2558; border-bottom-left-radius: 4px; }
.msg-who { display: block; margin-bottom: 2px; font: 700 .8125rem/1.3 var(--f-body); }
.msg.is-new, .msg-note.is-new { animation: msg-in .3s cubic-bezier(.2, .8, .3, 1) both; }
.msg.is-them.is-new { transform-origin: bottom right; }
.msg.is-bot.is-new { transform-origin: bottom left; }
@keyframes msg-in { from { opacity: 0; transform: translateY(8px) scale(.97); } }
.typing { align-self: flex-start; display: inline-flex; gap: 5px; padding: 13px 14px; border-radius: 16px; border-bottom-left-radius: 4px; background: var(--paper); border: 1.5px solid var(--line-strong); }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-2); animation: typing-dot 1s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
/* Respuestas sugeridas: alto fijo (dos renglones) para que el teléfono no cambie de tamaño */
.chat-replies {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
  height: 120px;
  padding: 12px;
  overflow: hidden;
  background: var(--paper);
  border-top: 1.5px dashed var(--line-strong);
}
.chat-replies:focus { outline: none; }
.chat-replies:empty::before {
  content: "Aquí aparecen respuestas para tocar";
  content: "Aquí aparecen respuestas para tocar" / "";
  align-self: center;
  width: 100%;
  font: 600 var(--t-sm)/1.3 var(--f-body);
  text-align: center;
  color: var(--ink-muted);
  opacity: .8;
}
.chat-replies button {
  position: relative;
  overflow: hidden;
  min-height: 44px;
  max-width: 100%;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  background: var(--paper-2);
  color: var(--ink);
  font-size: var(--t-sm);
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.chat-replies button:hover { background: var(--btn-bg); color: var(--btn-fg); }
/* la primera sugerencia se manda sola si nadie toca: la barra amarilla marca cuánto falta */
.chat-replies button.is-auto::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--spot);
  transform-origin: left;
  animation: auto-pick var(--auto-ms, 5000ms) linear both;
}
.phone.is-held .chat-replies button.is-auto::after, .phone.is-held .typing i { animation-play-state: paused; }
@keyframes auto-pick { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .chat-log { height: auto; max-height: none; }
  .chat-replies { display: none; }
}

/* ---------- Bienvenida: paso 2 y recomendación (el bloque y los chips van en línea en index.html) ---------- */
.bv-paso { display: grid; gap: 14px; min-width: 0; }
.bv-paso:empty { display: none; }
@keyframes bv-in { from { opacity: 0; transform: translateY(10px); } }
.bv-step, .bv-res { animation: bv-in .34s cubic-bezier(.2, .8, .2, 1) both; }
.bv-step { display: grid; gap: 12px; min-width: 0; }
.bv-qh, .bv-res-h { font-family: var(--f-display); font-weight: 400; line-height: 1.08; text-shadow: .05em .05em 0 var(--misreg); scroll-margin-top: calc(var(--head-h) + 24px); }
.bv-qh { font-size: var(--t-xl); }
.bv-paso-n { font: 700 var(--t-sm)/1.3 var(--f-body); letter-spacing: .01em; text-transform: none; color: var(--ink-muted); }
.bv-recordado { color: var(--ink-muted); font-size: var(--t-md); }
.bv-qh:focus, .bv-res-h:focus { outline: none; }
.bv-qh:focus-visible, .bv-res-h:focus-visible { outline: 3px solid var(--ink-2); outline-offset: 4px; }
.bv-ctx { color: var(--ink-muted); }
.bv-opts { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.bv-opts > li { display: flex; min-width: 0; }
.bv-opt {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 60px;
  padding: 10px 16px 10px 10px;
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  font: 700 var(--t-md)/1.3 var(--f-body);
  text-align: left;
  cursor: pointer;
  transition: box-shadow .18s ease, transform .18s ease, background-color .18s ease, color .18s ease;
}
.bv-opt > span { min-width: 0; overflow-wrap: anywhere; }
.bv-opt:hover { box-shadow: 3px 3px 0 var(--spot); transform: translate(-1px, -1px); }
.bv-opt:active { transform: translateY(1px); }
.bv-opt[aria-pressed="true"] { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); box-shadow: 3px 3px 0 var(--spot); }
.bv-opt[aria-pressed="true"] .lc-ico { color: var(--btn-fg); }
.bv-oi { width: 38px; height: 38px; flex: none; }
.bv-opt-skip { justify-content: center; border-style: dashed; border-color: var(--line-strong); background: transparent; color: var(--ink-muted); font-weight: 600; text-align: center; }
.bv-opt-skip:hover { color: var(--ink); box-shadow: none; transform: none; border-color: var(--ink); }

/* Tarjeta de recomendación: lo recomendado y por qué · precio y región · acciones */
.bv-res {
  display: grid;
  gap: 16px;
  min-width: 0;
  padding: clamp(18px, 3vw, 28px);
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 5px 5px 0 var(--spot);
}
.bv-res-main, .bv-res-lado { display: grid; gap: 10px; align-content: start; min-width: 0; }
.bv-res-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bv-res-ico { width: 44px; height: 44px; flex: none; }
.bv-res-et { font: 700 var(--t-sm)/1.3 var(--f-body); letter-spacing: .01em; text-transform: none; color: var(--ink-muted); }
.bv-res-h { font-size: var(--t-2xl); overflow-wrap: anywhere; }
.bv-res-linea { font-size: var(--t-md); }
.bv-porque { color: var(--ink-muted); }
.bv-porque b { color: var(--ink); }
.bv-mini {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 0 2px;
  border: 0;
  background: none;
  color: var(--ink);
  font: 700 var(--t-md)/1.2 var(--f-body);
  text-decoration: underline;
  text-decoration-color: var(--ink-2);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  vertical-align: middle;
  cursor: pointer;
}
.bv-mini:hover { text-decoration-color: var(--spot); }
/* “Cambiar” dentro del renglón: se ve como enlace de texto y su área de toque crece sin agrandar el renglón */
.bv-porque .bv-mini { position: relative; min-height: 0; vertical-align: baseline; }
.bv-porque .bv-mini::after { content: ""; position: absolute; inset: -12px -10px; }
.bv-precio {
  display: grid;
  gap: 3px;
  align-content: start;
  min-height: 138px;
  padding: 14px 16px 16px;
  border: 1.5px dashed var(--line-strong);
  border-radius: 10px;
  background: var(--paper-2);
  font-variant-numeric: tabular-nums;
}
.bv-num { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.bv-desde { font: 700 var(--t-sm)/1.3 var(--f-body); letter-spacing: .01em; text-transform: none; color: var(--ink-muted); }
.bv-total { font-weight: 700; color: var(--ink); }
.bv-honesto { font-size: var(--t-sm); line-height: 1.45; color: var(--ink-muted); }
.bv-num b { font-size: 1.875rem; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }
.bv-iva { font-weight: 600; color: var(--ink-muted); }
.bv-nota { font-size: var(--t-sm); line-height: 1.45; color: var(--ink-muted); }
.bv-ox { font-size: var(--t-sm); font-weight: 700; color: var(--ink); }
.bv-sk { display: block; height: 1.1rem; width: 60%; margin-block: 4px; border-radius: 6px; background: var(--line); }
.bv-sk.is-num { height: 2rem; width: 45%; }
.bv-region { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.bv-region legend { float: left; width: 100%; margin-bottom: 6px; padding: 0; font-size: var(--t-sm); font-weight: 600; color: var(--ink-muted); }
.bv-rchips { clear: both; display: flex; flex-wrap: wrap; gap: 6px; }
.bv-rchip { position: relative; display: inline-flex; }
.bv-rchip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.bv-rchip span { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--line-strong); border-radius: 999px; font-size: var(--t-sm); font-weight: 700; transition: background-color .18s ease, color .18s ease, border-color .18s ease; }
.bv-rchip:hover span { border-color: var(--ink); }
.bv-rchip input:checked + span { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
.bv-rchip input:checked + span::before { content: "✓"; font-weight: 800; }
.bv-rchip input:focus-visible + span { outline: 3px solid var(--ink-2); outline-offset: 2px; }
.bv-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; }
.bv-acts .btn { flex: 1 1 100%; }
.bv-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; padding-top: 6px; border-top: 1.5px dashed var(--line-strong); color: var(--ink-muted); font-size: var(--t-sm); }
.bv-pie .bv-mini { font-size: var(--t-sm); font-weight: 600; }
@media (min-width: 560px) { .bv-acts .btn { flex: 0 1 auto; } .bv-res-linea { font-size: var(--t-lg); } }
@media (min-width: 900px) {
  .bv-res { grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr); grid-template-areas: "main lado" "acts lado" "pie pie"; gap: 18px 40px; }
  .bv-res-main { grid-area: main; }
  .bv-res-lado { grid-area: lado; }
  .bv-acts { grid-area: acts; align-self: end; }
  .bv-pie { grid-area: pie; }
}
/* Teléfono: con un giro elegido, los chips se pliegan al elegido + “Cambiar” (la pregunta queda junto al dedo).
   La tarjeta no anida otra caja dentro del sobre: ocupa todo su ancho y el botón cabe en un renglón desde 360 px */
@media (max-width: 699px) {
  .bv-res { margin-inline: -12px; padding: 18px 12px 14px; border-inline: 0; border-radius: 0; box-shadow: 0 5px 0 var(--spot); }
  .bv-acts .btn { padding-inline: 16px; }
  .bv[data-plegado] .bv-chips > li:not(.is-on):not(.bv-cambiar) { display: none; }
  .bv[data-plegado] .bv-cambiar { display: flex; }
  .bv[data-plegado] .bv-sub { display: none; }
}
/* el botón flotante de WhatsApp se guarda mientras el flujo está a la vista (tiene su propio botón y tapaba los chips) */
.js .wa-fab.is-bv { opacity: 0; transform: translateY(24px) scale(.8); pointer-events: none; }
.bv-chip-cambiar { justify-content: center; border-style: dashed; background: transparent; font-weight: 600; text-align: center; }

/* Servicios: el sello recomendado para el giro del visitante va primero y lleva etiqueta */
.stamp-rec { align-self: flex-start; padding: 5px 10px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-fg); font: 700 .8125rem/1.3 var(--f-body); letter-spacing: .01em; }

/* Demo: nota honesta cuando el ejemplo es de otro giro */
.demo-nota-giro { max-width: 48ch; padding: 10px 14px; border-left: 4px solid var(--spot); background: var(--paper-2); border-radius: 0 8px 8px 0; color: var(--ink); }
/* Trabajo: nota honesta del giro arriba del índice (de noche: tintas de la zona) */
.pf-giro-nota { max-width: 60ch; margin-bottom: 14px; padding: 10px 14px; border-left: 4px solid var(--spot); background: var(--paper-2); border-radius: 0 8px 8px 0; color: var(--ink); }
/* Precios: el paquete recomendado para el giro */
.lc-precios .lp-card[data-giro-rec] { border-color: var(--ink); box-shadow: 4px 4px 0 var(--spot); }
.lp-rec { align-self: flex-start; padding: 5px 10px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-fg); font: 700 .8125rem/1.3 var(--f-body); letter-spacing: .01em; }
.stamp-wrap.is-rec .stamp-in { border: 2px solid var(--ink); }

/* ---------- Canal Loto ---------- */
.canal-grid { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
.canal-head { margin-bottom: 0; position: relative; }
.canal-head .btn { justify-self: start; margin-top: 6px; }
.note-tv { position: relative; font-size: 1.6rem; align-items: center; transform: rotate(-3deg); margin-top: 6px; }
.note-tv .arrow { width: 48px; }
@media (min-width: 980px) { .canal-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
@media (max-width: 979px) { .note-tv { display: none; } }

/* ---------- Trabajo: zona nocturna ---------- */
.night-zone { border-top: 0; padding-block: 34vh; }
.work-head { display: grid; gap: 28px; margin-bottom: clamp(36px, 5vw, 64px); }
.work-head .sec-head { margin-bottom: 0; }
@media (min-width: 1000px) { .work-head { grid-template-columns: minmax(0, .85fr) minmax(0, 1.35fr); align-items: center; gap: 48px; } }

.chart {
  position: relative;
  aspect-ratio: 1000 / 620;
  max-width: 100%;
  border-radius: var(--radius);
  border: 1.5px dashed var(--line-strong);
}
.chart-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.grat rect, .grat path { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 5; }
.grat rect { stroke-dasharray: none; stroke: var(--line-strong); }
.grat-lab text { font-size: 13px; fill: var(--ink-muted); }
.dust circle { fill: var(--ink-2); }
.refs circle { fill: none; stroke: var(--ink-2); stroke-width: 1.5; }
.refs text { font-size: 14px; fill: var(--ink-muted); }
.const path { fill: none; stroke: var(--ink-2); stroke-width: 2.4; stroke-linecap: round; }
.const-dash { stroke-dasharray: 2 9; }

.star {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  text-decoration: none;
  color: var(--ink);
  z-index: 1;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.2) rotate(-40deg);
  transition: opacity .3s ease, transform .6s cubic-bezier(.3, 1.7, .5, 1);
}
.star.on { opacity: 1; transform: translate(-50%, -50%); }
.star-glyph { width: 30px; height: 40px; fill: var(--spot); stroke: var(--ink); stroke-width: .9; overflow: visible; transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.star::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  border: 1.5px dashed var(--ink-2);
  opacity: 0;
  transform: scale(.6);
  transition: opacity .25s ease, transform .4s cubic-bezier(.3, 1.6, .5, 1);
}
.star:hover .star-glyph, .star:focus-visible .star-glyph { transform: scale(1.3) rotate(10deg); }
.star:hover::before, .star:focus-visible::before { opacity: 1; transform: scale(1); }
.star-open .star-glyph { fill: transparent; stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 1.4 1.2; }
.star-lab { position: absolute; top: 50%; display: grid; gap: 1px; white-space: nowrap; transform: translateY(-50%); pointer-events: none; line-height: 1.2; }
.star[data-side="right"] .star-lab { left: calc(100% - 4px); justify-items: start; }
.star[data-side="left"] .star-lab { right: calc(100% - 4px); justify-items: end; text-align: right; }
.star-lab b { font-size: var(--t-sm); font-weight: 800; background: var(--paper); padding: 0 5px; border-radius: 4px; }
.star-lab small { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--ink-muted); padding: 0 5px; }
.star:hover .star-lab b, .star:focus-visible .star-lab b { background: var(--spot); color: #1B2558; }
@media (max-width: 699px) {
  .star { width: 44px; height: 44px; }
  .star-glyph { width: 18px; height: 24px; }
  .star-lab small { display: none; }
  .star-lab b { font-size: var(--t-xs); }
  .star-lab .lg { display: none; }
  .grat-lab text { font-size: 20px; }
  .grat-lab text[text-anchor="end"], .refs text { display: none; }
}

/* Módulo de portafolio con las tintas de A2: sigue los tokens del momento (día o noche) */
body .pf {
  --pf-bg: var(--paper);
  --pf-ink: var(--ink);
  --pf-muted: var(--ink-muted);
  --pf-line: var(--line-strong);
  --pf-brand: var(--ink-2);
  --pf-accent: var(--spot);
  --pf-accent-ink: #1B2558;
  --pf-surface: var(--paper-2);
  --pf-sheet: var(--paper);
  --pf-sheet-ink: var(--ink);
  --pf-screen: var(--paper-2);
  --pf-device: #0B1233;
  --pf-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 22px 50px rgba(5, 10, 40, .32);
  --pf-display: var(--f-display);
  --pf-body: var(--f-body);
  --pf-mono: var(--f-mono);
  --pf-name-size: clamp(46px, 9.4vw, 150px);
}
body .pf .pf-name { text-shadow: .045em .045em 0 var(--misreg); }
body .pf .pf-next .pf-name { text-shadow: none; }
body .pf .pf-case h3 { text-shadow: .045em .045em 0 var(--misreg); }
/* Copia invisible del botón de cerrar: resuelve la fuente de la ✕ antes del primer toque (main.js) */
.pf-warm { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); contain: strict; pointer-events: none; }

/* ---------- Cielo de la zona nocturna ---------- */
/* La noche es el fondo de la sección: entra con una banda de semitono (atardecer) y sale igual (amanecer) */
.night-zone {
  position: relative;
  isolation: isolate;
  color: var(--ink);
  background:
    linear-gradient(to bottom, transparent 0, var(--night) 30vh, var(--night) calc(100% - 30vh), transparent 100%);
}
.night-zone::before, .night-zone::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 30vh;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle, var(--night) 42%, transparent 46%) 0 0 / 11px 11px;
}
.night-zone::before { top: 0; -webkit-mask: linear-gradient(to bottom, transparent, #000 85%); mask: linear-gradient(to bottom, transparent, #000 85%); }
.night-zone::after { bottom: 0; -webkit-mask: linear-gradient(to top, transparent, #000 85%); mask: linear-gradient(to top, transparent, #000 85%); }
.zone-sky { position: sticky; top: 0; height: 100vh; margin-bottom: -100vh; pointer-events: none; z-index: 0; }
.sky-stars { width: 100%; height: 100%; display: block; opacity: 0; will-change: opacity; }
.zone-in { position: relative; z-index: 1; }
.site-head, .wa-fab { color: var(--ink); }
.site-head.tok-night { border-bottom-color: var(--line-strong); }

/* El cursor de estrella vive en shared/cursor/cursor.css (lo carga shared/cursor/cursor.js solo en computadora) */

/* ---------- Proceso ---------- */
.trail { position: relative; }
.trail-path { position: absolute; left: 0; right: 0; top: -12px; width: 100%; height: 120px; overflow: visible; }
.trail-path path { fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-dasharray: 2 10; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.trail-sky { position: absolute; right: -6px; top: -36px; width: 48px; height: 48px; fill: var(--spot); filter: drop-shadow(2px 2px 0 var(--ink-2)); animation: twinkle 3.2s ease-in-out infinite; }
/* fuera de pantalla no parpadea (main.js pone .is-on mientras se ve): no gasta un cuadro de estilos cada 16 ms */
.js .trail-sky:not(.is-on) { animation-play-state: paused; }
.steps { position: relative; display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); padding-top: 72px; }
.steps li { display: grid; gap: 8px; align-content: start; }
.steps li:nth-child(2) { margin-top: -18px; }
.steps li:nth-child(3) { margin-top: -38px; }
.steps li:nth-child(4) { margin-top: -54px; }
.num { font-family: var(--f-hand); font-size: 4.4rem; line-height: .7; color: var(--ink-2); }
.steps h3 { font-size: var(--t-xl); font-weight: 800; }
.steps p { color: var(--ink-muted); max-width: 32ch; }
@media (max-width: 760px) {
  .trail-path { display: none; }
  .trail-sky { top: -8px; right: 0; width: 36px; height: 36px; }
  .steps { padding-top: 24px; border-left: 2px dashed var(--ink-2); padding-left: 22px; margin-left: 8px; }
  .steps li { margin-top: 0 !important; }
  .num { font-size: 3.4rem; }
}

/* ---------- Reglas claras (bloque de confianza) ---------- */
.pact {
  display: grid;
  gap: 20px;
  margin-top: clamp(56px, 8vw, 96px);
  padding: clamp(22px, 3.5vw, 40px);
  border: 1.5px solid var(--line-strong);
  border-radius: 6px;
  background: var(--paper-2);
}
@media (min-width: 900px) { .pact { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 48px; align-items: start; } }
.pact-head { display: grid; gap: 10px; align-content: start; }
.pact-title { font-family: var(--f-display); font-weight: 400; font-size: var(--t-2xl); line-height: 1.05; max-width: 14ch; text-shadow: .05em .05em 0 var(--misreg); }
.pact-list { display: grid; border-top: 2px solid var(--ink); }
.pact-list li { position: relative; padding: 14px 0 14px 32px; border-bottom: 1.5px dashed var(--line-strong); color: var(--ink-muted); }
.pact-list li b { color: var(--ink); font-weight: 800; }
.pact-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 18px;
  width: 18px;
  height: 18px;
  background: var(--spot);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}

/* ---------- Testimonios ---------- */
.tms { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.tm { position: relative; display: grid; gap: 18px; align-content: space-between; margin: 0; padding: clamp(22px, 3vw, 32px); border-radius: var(--radius); background: var(--paper-2); border: 1.5px solid var(--line-strong); box-shadow: 6px 6px 0 var(--spot); }
.tm blockquote { margin: 0; }
.tm blockquote p { font-size: var(--t-lg); line-height: 1.55; color: var(--ink); text-wrap: pretty; }
.tm figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.tm-av { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--ink); color: var(--paper); font: 400 1.05rem/1 var(--f-display); }
.tm-quien { display: grid; gap: 2px; flex: 1 1 200px; font-size: var(--t-sm); color: var(--ink-muted); line-height: 1.35; }
.tm-quien b { font-size: var(--t-md); color: var(--ink); }
.tm-caso { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-decoration: underline; text-decoration-color: var(--spot); text-decoration-thickness: 2px; text-underline-offset: 4px; }
/* Borrador: visible solo en revisión local; producción no publica los testimonios sin aprobar */
.tm-borrador { display: none; justify-self: start; margin: 0; padding: 4px 10px; border-radius: 999px; background: #FFE08A; color: #1B2558; font: 700 .8125rem/1.3 var(--f-body); }
.tm[data-aprobado="no"] { border-style: dashed; }
.tm[data-aprobado="no"] .tm-borrador { display: inline-flex; }

/* ---------- Cobertura ---------- */
/* El módulo del mapa (shared/mapa) es una carta de noche en ambos temas; aquí solo toma la segunda tinta de A2 */
.lc-mapa .lm-titulo { font-size: var(--t-2xl); text-shadow: .05em .05em 0 rgba(85, 111, 182, .95); }
.lc-mapa .lm-carta { border-radius: var(--radius); }

/* ---------- Precios: módulo compartido (shared/precios) con las tintas de A2, de día y de noche ---------- */
body .lc-precios {
  --pf-ink: var(--ink);
  --pf-muted: var(--ink-muted);
  --pf-line: var(--line-strong);
  --pf-surface: var(--paper-2);
  --pf-brand: var(--ink-2);
  --pf-accent: var(--spot);
  --pf-accent-ink: #1B2558;
  --pf-display: var(--f-display);
  --pf-body: var(--f-body);
  --pf-mono: var(--f-mono);
}
/* el anillo amarillo del módulo casi no se ve sobre papel crema: se usa el de A2 */
.lc-precios :focus-visible { outline-color: var(--ink-2); }
.lc-precios .lp-h3, .lc-precios .lp-precio b { text-shadow: .05em .05em 0 var(--misreg); }
.lc-precios .lp-tabs button .lc-ico { color: currentColor; --lc-accent: var(--spot); }
.lc-precios .lp-tabs button:not([aria-selected="true"]):hover { background: var(--line); }
.lc-precios .lp-card, .lc-precios .lp-combo { border-radius: 6px; }
.lc-precios .lp-pagos { border-radius: 6px; border-color: var(--line-strong); }
.lc-precios .lp-fallback { font-size: var(--t-lg); max-width: 52ch; }
.precios-pie { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: clamp(28px, 4vw, 44px); }
.precios-pie > p:first-child { flex: 1 1 320px; max-width: 52ch; font-size: var(--t-lg); }
.note-price { position: relative; font-size: 1.6rem; transform: rotate(-3deg); }

/* ---------- Preguntas ---------- */
.faq { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: start; }
.card {
  background:
    linear-gradient(var(--spot), var(--spot)) top / 100% 5px no-repeat,
    var(--paper-2);
  border: 1.5px solid var(--line-strong);
  border-radius: 6px;
}
.card summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 16px 18px 12px;
  cursor: pointer;
  list-style: none;
}
.card summary::-webkit-details-marker { display: none; }
.card summary h3 { font-size: var(--t-lg); font-weight: 800; line-height: 1.3; }
.plus { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--ink); }
.plus::before, .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--ink); transform: translate(-50%, -50%); transition: transform .25s ease; }
.plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.card[open] .plus::after { transform: translate(-50%, -50%) rotate(0); }
.card p {
  margin: 0 18px 20px;
  line-height: 32px;
  color: var(--ink-muted);
  /* renglones de ficha bajo cada línea de texto */
  background: repeating-linear-gradient(to bottom, transparent 0 31px, var(--line) 31px 32px);
}
.card p a { color: var(--ink); font-weight: 600; text-decoration-color: var(--spot); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.card p a:hover { text-decoration-color: var(--ink-2); }
.card p b { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Cierre ---------- */
.closer { padding-block: clamp(24px, 4vw, 40px) clamp(24px, 4vw, 48px); }
.closer-correo { max-width: 46ch; font-size: var(--t-md); color: var(--closer-fg); opacity: .92; }
.closer-correo a { color: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: var(--closer-ink2); text-decoration-thickness: 2px; text-underline-offset: 4px; overflow-wrap: anywhere; }
.closer-in {
  display: grid;
  gap: 24px;
  align-items: center;
}
.closer-in > * { min-width: 0; }
.closer-copy {
  background: var(--closer-bg);
  color: var(--closer-fg);
  border-radius: 28px;
  padding: clamp(28px, 5vw, 64px);
  display: grid;
  gap: 18px;
  justify-items: start;
}
.closer-copy h2 { font-size: var(--t-3xl); color: var(--closer-fg); text-shadow: .05em .05em 0 var(--closer-ink2); }
.closer-copy p { font-size: var(--t-lg); max-width: 44ch; }
.closer-art { display: grid; place-items: center; }
.closer-art .lc-ico { color: var(--ink-2); --lc-accent: var(--spot); }
@media (min-width: 900px) { .closer-in { grid-template-columns: 1.4fr 1fr; } }
@media (max-width: 899px) { .closer-art { display: none; } }

/* ---------- Footer ---------- */

/* Serie de video: estrella de ocho puntas que orbita al sitio del mismo cliente */
.star-video .star-glyph { width: 30px; height: 30px; fill: var(--ink-2); stroke: var(--paper); stroke-width: .8; }
.star-video .star-lab small { font-style: normal; }
.closer-copy .display[data-ink]::after { color: var(--closer-ink2); }


/* Teléfono: sellos deslizables y zona nocturna más corta (pareja de las reglas críticas en index.html) */
@media (max-width: 640px) {
  /* Servicios: los cuatro sellos en una fila que se desliza (de ~4 pantallas a ~1) */
  .stamps {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--gutter)) calc(-1 * var(--gutter-r));
    padding: 26px var(--gutter-r) 22px var(--gutter);
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .stamps::-webkit-scrollbar { display: none; }
  .stamp-wrap { flex: 0 0 84%; scroll-snap-align: start; }
  .stamp-wrap:nth-child(odd), .stamp-wrap:nth-child(even) { transform: none; }
  .stamp-in { padding: 14px 18px 16px; gap: 10px; }
  .ico-xl { width: 64px; height: 64px; }
  .incl li { font-size: var(--t-sm); }
  .stamps-dots { display: flex; justify-content: center; gap: 8px; margin-top: 4px; }
  .stamps-dots i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--ink-2); transition: background-color .2s ease, transform .2s ease; }
  .stamps-dots i.on { background: var(--ink-2); transform: scale(1.2); }
  /* al quedar al centro, el sello recibe su matasellos (en lugar del hover) */
  .stamp-wrap.is-seen .postmark { opacity: .9; transform: scale(1) rotate(-14deg); }
  .stamp-wrap.is-seen .ico-xl { animation: misreg .55s cubic-bezier(.2, 1.4, .4, 1) both; }
  .postmark { top: -14px; right: -6px; width: 92px; height: 92px; }

  /* Con la demo del chat a la vista, el botón flotante se guarda (tapaba las respuestas sugeridas);
     la demo tiene su propio “Quiero esto en mi negocio” */
  .js .wa-fab.is-tucked { opacity: 0; transform: translateY(24px) scale(.8); pointer-events: none; }

  /* Zona nocturna: atardecer y amanecer más cortos, menos pantalla vacía */
  .night-zone { padding-block: 20vh; background: linear-gradient(to bottom, transparent 0, var(--night) 18vh, var(--night) calc(100% - 18vh), transparent 100%); }
  .night-zone::before, .night-zone::after { height: 18vh; background-size: 9px 9px; }

}