/* Nixfriction Salon-Cita guide — same family as guia.html / decks.html
   (paper background, Figtree body, Fraunces headings, rust pin accent). Mobile-first. */
:root {
  --ink:#161410; --ink-soft:#3c3832; --paper:#f4efe6; --paper-2:#ebe4d6;
  --white:#fbf8f2; --line:rgba(22,20,16,.12); --pin:#c45a3a;
  --ok:#15803d; --warn:#b91c1c;
  --app-bg:#f5efe6; --app-ink:#1e1915; --app-muted:#73675e; --app-card:#fff; --app-line:#e8ded2; --app-soft:#ede4d8;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --chrome-h: 52px;   /* sticky header */
  --chips-h: 48px;    /* sticky section chips */
  --max: 860px;
}

*, *::before, *::after { box-sizing:border-box; }
* { margin:0; padding:0; }

html {
  min-height:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--chrome-h) + var(--chips-h) + var(--safe-t) + 12px);
}

body {
  min-height:100%;
  font:17px/1.5 Figtree,system-ui,sans-serif;
  color:var(--ink);
  background:var(--paper);
  -webkit-text-size-adjust:100%;
}

h1,h2,h3,.wordmark { font-family:Fraunces,Georgia,serif; font-optical-sizing:auto; }
a { color:inherit; }
strong { font-weight:700; }
code {
  font:600 .86em/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:var(--paper-2); color:var(--ink); padding:.12em .4em; border-radius:6px;
  overflow-wrap:anywhere;
}

/* —— Sticky top nav (matches guia.html .nav) —— */
.deck-header {
  position:sticky; top:0; z-index:20;
  width:min(var(--max), calc(100% - 28px)); margin-inline:auto;
  height:calc(var(--chrome-h) + var(--safe-t));
  padding-top:var(--safe-t);
  display:flex; align-items:center; gap:12px;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.wordmark {
  display:flex; align-items:center; gap:10px; flex:0 0 auto;
  text-decoration:none; font-weight:600; font-size:1.05rem; letter-spacing:-.03em;
}
.pin {
  width:12px; height:16px; background:var(--pin);
  border-radius:10px 10px 10px 0; transform:rotate(-45deg); display:inline-block;
}
/* legacy logo image (if still present in markup) */
.deck-header .logo { height:24px; width:auto; display:block; }

/* Back link = guia.html .hub pill */
.deck-header .back-link {
  flex:0 0 auto; margin-left:8px; padding:6px 12px;
  background:var(--paper-2); border-radius:20px;
  font-size:.75rem; font-weight:700; line-height:1.5; text-decoration:none; white-space:nowrap;
}
.deck-header .back-link:hover { background:color-mix(in srgb, var(--pin) 14%, var(--paper-2)); }
.deck-header .back-link:focus-visible,
.section-nav a:focus-visible,
.wordmark:focus-visible { outline:3px solid var(--pin); outline-offset:2px; }

/* Title block: visually hidden on phones (the intro repeats it), shown on wider screens */
.deck-header .titles {
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
.deck-header .eyebrow {
  display:block; color:var(--pin); font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; font-size:.62rem; line-height:1.3;
}
.deck-header h1 {
  font-size:1rem; font-weight:600; letter-spacing:-.02em; line-height:1.25;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.progress-label {
  margin-left:auto; flex:0 0 auto;
  font-size:.8rem; font-weight:700; color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}

@media (min-width:720px) {
  .deck-header .titles {
    position:static; width:auto; height:auto; overflow:hidden; clip:auto;
    flex:1 1 auto; min-width:0; padding-left:14px; margin-left:4px; border-left:1px solid var(--line);
  }
  .progress-label { margin-left:0; }
}

/* —— Section chips (sticky under the nav) —— */
.section-nav {
  position:sticky; top:calc(var(--chrome-h) + var(--safe-t)); z-index:19;
  width:min(var(--max), calc(100% - 28px)); margin-inline:auto;
  height:var(--chips-h);
  display:flex; align-items:center; gap:8px;
  overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
}
.section-nav::-webkit-scrollbar { display:none; }
.section-nav a {
  flex:0 0 auto; padding:6px 12px; border-radius:999px;
  background:var(--paper-2); color:var(--ink);
  font-size:.75rem; font-weight:700; line-height:1.5; white-space:nowrap; text-decoration:none;
  transition:background .15s ease, color .15s ease;
}
.section-nav a:hover { background:color-mix(in srgb, var(--pin) 14%, var(--paper-2)); }
.section-nav a[aria-current="true"] { background:var(--ink); color:var(--paper); }

/* —— Main content —— */
.deck-main {
  width:min(var(--max), calc(100% - 28px)); margin-inline:auto;
  padding:8px 0 calc(96px + var(--safe-b));
}

.section {
  margin:0 0 14px;
  padding:22px 20px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:20px;
  transition:border-color .15s ease;
}
.section:target { border-color:color-mix(in srgb, var(--pin) 55%, var(--line)); }

.section-kicker {
  display:block; margin:0 0 6px;
  color:var(--pin); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.7rem;
}

.section h2 {
  font-size:clamp(1.4rem, 4vw, 1.9rem); font-weight:600; line-height:1.15; letter-spacing:-.02em;
  margin:0 0 10px;
}
.section h3 { font-size:1.12rem; font-weight:600; letter-spacing:-.01em; line-height:1.3; margin:16px 0 6px; }
.section p { color:var(--ink-soft); margin:0 0 12px; }
.section p:last-child { margin-bottom:0; }
.section strong { color:var(--ink); }
.section a { color:var(--pin); font-weight:700; text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere; }

.lead { color:var(--ink-soft); font-size:1.06rem; max-width:38rem; }

/* Intro = guia.html home header (no card) */
.hero.section {
  background:transparent; border:0; border-radius:0;
  padding:28px 0 18px; margin-bottom:6px;
}
.hero .section-kicker { margin-bottom:0; }
.hero h2 { font-size:clamp(1.8rem, 5vw, 2.6rem); line-height:1.1; letter-spacing:-.03em; margin:8px 0 12px; }
.hero .lead { margin-bottom:16px; }

.quote {
  margin:16px 0;
  padding:14px 16px;
  background:var(--white);
  border:1px solid var(--line); border-left:4px solid var(--pin);
  border-radius:14px;
  font:italic 500 1.12rem/1.4 Fraunces,Georgia,serif; color:var(--ink);
}

.template {
  margin:12px 0 0; padding:14px 16px;
  background:var(--paper); border:1px dashed var(--line); border-radius:14px;
  color:var(--ink);
}
.template strong {
  display:block; margin-bottom:4px; color:var(--pin);
  font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; font-style:normal;
}

/* —— Steps / cards —— */
.stack { display:grid; gap:10px; margin:14px 0 0; }
@media (min-width:720px) {
  .stack { grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }
}
.card {
  padding:14px 16px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:14px;
}
.card h3 { display:flex; align-items:center; gap:8px; margin:0 0 4px; font-size:1.08rem; }
.card p { margin:0; font-size:.95rem; }

.step-num {
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:1.6rem; height:1.6rem; border-radius:999px;
  background:var(--pin); color:var(--white);
  font:700 .8rem/1 Figtree,system-ui,sans-serif; letter-spacing:0;
}

.callout {
  margin:14px 0 0; padding:14px 16px;
  background:var(--paper-2);
  border-radius:14px;
}
.callout .label {
  display:block; margin-bottom:4px;
  color:var(--pin); font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.callout p { margin:0; color:var(--ink-soft); }

.rule {
  margin:14px 0 0 !important; padding:12px 16px;
  background:var(--paper); border:1px solid var(--line); border-left:4px solid var(--pin);
  border-radius:14px;
  font-weight:600; font-size:.95rem; color:var(--ink) !important;
}

.hours-badge {
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:4.5rem; padding:8px 12px; margin:8px 0 12px;
  border-radius:14px; background:var(--paper-2); color:var(--pin); line-height:1.1;
}
.hours-badge .big { font:600 1.4rem/1.1 Fraunces,Georgia,serif; color:var(--ink); }
.hours-badge .small { font-size:.65rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }

/* —— Do / Don't lists —— */
.checklist { list-style:none; margin:14px 0 0; display:grid; gap:10px; }
.checklist li {
  position:relative;
  padding:12px 14px 12px 46px;
  background:var(--paper); border:1px solid var(--line); border-radius:14px;
}
.checklist li::before {
  position:absolute; left:14px; top:13px;
  width:22px; height:22px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  font-size:.78rem; font-weight:700; line-height:1;
}
.checklist.dos li::before { content:"✓"; background:color-mix(in srgb, var(--ok) 14%, var(--white)); color:var(--ok); }
.checklist.donts li::before { content:"✕"; background:color-mix(in srgb, var(--warn) 12%, var(--white)); color:var(--warn); }
.checklist strong { display:block; margin-bottom:2px; color:var(--ink); font-size:1rem; }
.checklist span { display:block; color:var(--ink-soft); font-size:.95rem; }

.group-label {
  margin:16px 0 6px; color:var(--pin);
  font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}

/* —— UI mock = light phone-ish card —— */
.ui-mock {
  position:relative;
  width:min(340px, 100%);
  margin:16px 0 0;
  padding:22px 14px 14px;
  background:var(--app-bg);
  border:1px solid var(--app-line);
  border-radius:24px;
  box-shadow:0 18px 40px -26px rgba(22,20,16,.55);
  font-size:.92rem; color:var(--app-ink);
}
.ui-mock::before {
  content:""; position:absolute; top:9px; left:50%; transform:translateX(-50%);
  width:44px; height:5px; border-radius:99px; background:var(--app-line);
}
.ui-mock .app {
  font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--app-muted); margin:0 2px 8px;
}
.ui-mock .title-line {
  padding:12px 14px 4px;
  background:var(--app-card); border:1px solid var(--app-line); border-bottom:0;
  border-radius:14px 14px 0 0;
  font-weight:700; color:var(--app-ink); line-height:1.35;
}
.ui-mock .meta {
  padding:2px 14px 12px;
  background:var(--app-card); border:1px solid var(--app-line); border-top:0;
  border-radius:0 0 14px 14px;
  color:var(--app-muted); font-size:.85rem;
}

.caption { margin:8px 0 0; font-size:.82rem; color:var(--ink-soft); text-align:center; }

/* —— Footer (guia.html footer) —— */
.deck-foot {
  margin-top:22px; padding:22px 0 0;
  border-top:1px solid var(--line);
  color:var(--ink-soft); font-size:.9rem;
}
.deck-foot p { margin:0 0 6px; }

@media (min-width:720px) {
  .section { padding:26px 26px; }
  .hero.section { padding:40px 0 22px; }
}

/* —— WhatsApp FAB (identical to guia.html) —— */
.whatsapp-fab {
  position:fixed; right:calc(16px + env(safe-area-inset-right)); bottom:calc(16px + env(safe-area-inset-bottom)); z-index:50;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:52px; padding:0 16px;
  border-radius:999px; background:#25D366; color:#fff; font:700 .92rem/1 Figtree,system-ui,sans-serif;
  text-decoration:none; box-shadow:0 8px 22px rgba(22,20,16,.22);
}
.whatsapp-fab svg { width:22px; height:22px; flex:0 0 22px; }
.whatsapp-fab:focus-visible { outline:3px solid var(--pin); outline-offset:3px; }
.callout code, .rule code { background:var(--white); }

/* —— v6: panel guide (Citas | Ajustes) additions —— */
/* <p class="group-label"> / captions inside sections: beat `.section p` */
.section .group-label { color:var(--pin); margin:18px 0 6px; }
.section .caption { margin:8px 0 0; font-size:.82rem; color:var(--ink-soft); text-align:center; }
/* standalone cards (not inside .stack) */
.section > .card { margin-top:10px; }
.section > .group-label + .card { margin-top:0; }
/* lists inside the transparent intro sit on paper → lift them to white */
.hero .checklist li { background:var(--white); }
.hero .checklist { margin-bottom:4px; }

/* In-page table of contents (intro) — numbered like guia.html topic numbers */
.toc {
  list-style:none; counter-reset:toc;
  margin:0; padding:8px;
  display:grid; gap:2px;
  background:var(--white); border:1px solid var(--line); border-radius:18px;
}
@media (min-width:720px) {
  .toc { display:block; columns:2; column-gap:8px; }
  .toc li { break-inside:avoid; }
  /* exactly 4 step cards → 2×2 instead of 3+1 */
  .stack:has(> :nth-child(4):last-child) { grid-template-columns:1fr 1fr; }
}
.toc li { counter-increment:toc; }
.section .toc a {
  display:flex; align-items:baseline; gap:10px;
  padding:9px 10px; border-radius:12px;
  color:var(--ink); font-weight:600; font-size:.95rem; line-height:1.35;
  text-decoration:none;
}
.section .toc a::before {
  content:counter(toc, decimal-leading-zero);
  flex:0 0 auto; min-width:1.4em;
  color:var(--pin); font-size:.72rem; font-weight:700; letter-spacing:.06em;
}
.section .toc a:hover { background:var(--paper); color:var(--pin); }
.section .toc a:focus-visible { outline:3px solid var(--pin); outline-offset:1px; }