/* Pages outside the app (landing, sign-in, invite, waitlist, email links, legal) and the in-app welcome.
   Only the tokens and components of /qiu/styles.css, plus the layouts these pages need. */

/* ---------- shell ---------- */
body.entry { display: flex; flex-direction: column; min-height: 100dvh; }
.entry-top, .entry-main { position: relative; z-index: 1; width: 100%; max-width: 1120px; margin: 0 auto; }
.entry-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(16px + var(--safe-t)) calc(20px + var(--safe-r)) 8px calc(20px + var(--safe-l)); }
.entry-main { flex: 1; padding: 20px calc(16px + var(--safe-r)) 64px calc(16px + var(--safe-l)); }
.entry-foot {
  position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 22px;
  padding: 22px 16px calc(22px + var(--safe-b)); border-top: 1px solid var(--line); color: var(--muted); font-size: calc(13px * var(--fs, 1));
}
.entry-foot nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.entry-foot a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; color: inherit; text-underline-offset: 3px; }
.entry-foot a:hover { color: var(--fg); }
.entry-lang { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font: inherit; }
.entry-lang select { width: auto; field-sizing: content; min-height: 44px; padding: 6px 32px 6px 8px; border-color: transparent; background-color: transparent; background-position: right 10px center; color: var(--fg-2); font-size: calc(13px * var(--fs, 1)); }
.entry-lang select:hover { background-color: var(--surface-2); }
.btn.big { min-height: 54px; padding: 10px 26px; font-size: calc(16px * var(--fs, 1)); }
.btn .ico { flex: none; }
/* Long labels (French, German…) wrap instead of pushing the page sideways on a 320 px phone. */
body.entry .btn, .welcome .btn { white-space: normal; text-wrap: balance; text-align: center; line-height: 1.25; }
.brandmark { width: 20px; height: 20px; flex: none; }
.btn.is-soon { opacity: .55; cursor: default; pointer-events: none; } .btn.is-soon .soon { font-size: calc(12px * var(--fs, 1)); font-weight: 600; padding: 1px 7px; border-radius: 999px; border: 1px solid currentColor; margin-inline-start: 0; white-space: nowrap; } /* WhatsApp apagado: sin enlace, sin hover, con su etiqueta */
:root:not([data-theme="light"]):not([data-theme="papel"]) .brandmark { filter: invert(1); }
.btn:not(.ghost, .quiet) .brandmark { filter: brightness(0) invert(1); }
/* tres :root para ganar a la regla de arriba (que tiene 0,4,0): sin esto el icono de Telegram salia blanco sobre blanco con el tema por defecto */
@media (prefers-color-scheme: light) { :root:root:root[data-theme="system"] .brandmark { filter: none; } :root:root:root[data-theme="system"] .btn:not(.ghost, .quiet) .brandmark { filter: brightness(0) invert(1); } }
/* Google's logos keep their colours (its brand rules), on a white disc where they sit on a colour. */
.brandmark:is([src$="/google.svg"], [src$="/gmail.svg"], [src$="/googlecalendar.svg"], [src$="/googledrive.svg"]) { filter: none !important; }
.btn:not(.ghost, .quiet) .brandmark[src$="/google.svg"] { box-sizing: content-box; padding: 3px; border-radius: 50%; background: #fff; }
.orb { display: block; width: 88px; height: 88px; margin: 0 auto; filter: drop-shadow(0 18px 30px var(--orb-shadow)); }

/* ---------- one-card pages (sign-in, invite, waitlist, notes) ---------- */
.entry-card { max-width: 460px; margin: clamp(8px, 4vh, 40px) auto 0; display: grid; gap: 22px; text-align: center; }
.entry-card h1 { font-size: calc(clamp(28px, 6.4vw, 38px) * var(--fs, 1)); }
.entry-card .lead { color: var(--fg-2); font-size: calc(16.5px * var(--fs, 1)); }
.entry-card .panel { display: grid; gap: 14px; padding: 20px; text-align: left; }
.entry-card .hint { color: var(--muted); font-size: calc(14px * var(--fs, 1)); }
.entry-card .hint b { color: var(--fg-2); font-weight: 600; }
.entry-card .hint a { color: var(--brand-text); font-weight: 600; text-underline-offset: 3px; }
.entry-card > *, .entry-card .panel > * { min-width: 0; }
.addr { display: block; margin: 6px 0; color: var(--fg); font-weight: 700; overflow-wrap: anywhere; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: calc(13px * var(--fs, 1)); }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--line-2); }
.badge-ico { display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto; border-radius: 22px; background: var(--brand-soft); color: var(--brand-text); border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent); }
.badge-ico .ico { width: 30px; height: 30px; }
.badge-ico.warn { background: color-mix(in srgb, var(--amber) 13%, transparent); color: var(--amber); border-color: color-mix(in srgb, var(--amber) 30%, transparent); }
.badge-ico.ok { background: color-mix(in srgb, var(--green) 13%, transparent); color: var(--green); border-color: color-mix(in srgb, var(--green) 30%, transparent); }
.feats { display: grid; gap: 4px; text-align: left; }
.feats .row { min-height: 0; padding: 12px 16px; align-items: flex-start; }
.feats .tile { color: var(--brand-text); background: var(--brand-soft); border-color: transparent; }
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice .btn { width: 100%; }
.choice:has(> .btn:only-child) { grid-template-columns: minmax(0, 320px); justify-content: center; }
[data-state] > [data-show] { display: none; }
[data-state="ok"] > [data-show~="ok"], [data-state="used"] > [data-show~="used"], [data-state="invalid"] > [data-show~="invalid"],
[data-state="self"] > [data-show~="self"], [data-state="guest"] > [data-show~="guest"], [data-state="expired"] > [data-show~="expired"] { display: grid; gap: 22px; }
[data-mail="off"] [data-need-mail] { display: none !important; }
[data-mail]:not([data-mail="off"]) [data-mail-off] { display: none; }
[data-via-show][hidden] { display: none !important; }
/* Sign-in: email or Telegram, then the 6-digit code; WhatsApp and SMS are shown, switched off, as coming soon. */
.si-via { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
.si-via button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; font-size: calc(14px * var(--fs, 1)); }
.si-via .ico, .si-via .brandmark { width: 17px; height: 17px; }
.si-code { display: grid; gap: 10px; text-align: left; }
.si-code label { color: var(--fg-2); font-size: calc(14px * var(--fs, 1)); }
.si-code input { text-align: center; font: 700 calc(24px * var(--fs, 1))/1 var(--font-display); letter-spacing: .3em; font-variant-numeric: tabular-nums; }
.err { color: var(--red); font-size: calc(14px * var(--fs, 1)); min-height: 0; }
.err:empty { display: none; }

/* ---------- landing ---------- */
.hero { display: grid; gap: 28px; align-items: center; padding-top: clamp(4px, 3vh, 28px); }
@media (min-width: 900px) { .hero { grid-template-columns: 1.08fr .92fr; gap: 48px; padding-top: 7vh; } }
/* .chapa: a small blue label; the plan cards put the «Q» and the plan's name in it */
.pill, .chapa { display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin: 0; padding: 6px 13px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-text); font: 700 calc(11px * var(--fs, 1))/1.3 var(--font); letter-spacing: .14em; text-transform: uppercase; }
.chapa .cuadrada { font-size: calc(12px * var(--fs, 1)); }
.q-logo { flex: none; width: 22px; height: 22px; margin: -3px 0 -3px -7px; padding: 3px; border-radius: 50%; background: #fff; } /* the Q has no white version: on black it sits on a white disc */
.hero .brand-h { display: flex; align-items: center; gap: 14px; font-size: calc(28px * var(--fs, 1)); margin: 0 0 22px; }
.hero .brand-h img { border-radius: 14px; }
.hero .display { font-size: calc(clamp(38px, 5.2vw, 62px) * var(--fs, 1)); line-height: 1.02; letter-spacing: -.028em; margin: 20px 0 18px; text-wrap: balance; }
.hero .lead { font-size: calc(clamp(17px, 2.2vw, 19.5px) * var(--fs, 1)); color: var(--fg-2); max-width: 32em; text-wrap: pretty; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.cta-sub { margin-top: 14px; color: var(--muted); font-size: calc(14px * var(--fs, 1)); }
/* Qiu's black block (black belongs to Qiu), in both themes */
.stage { position: relative; display: grid; place-items: center; min-height: clamp(330px, 44vw, 460px); padding: 20px; isolation: isolate; overflow: hidden;
  background: #000; border: 1px solid #26262B; border-radius: var(--r-xl); box-shadow: 0 22px 56px rgba(10, 10, 12, .30); }
.stage .halo { position: absolute; z-index: -1; width: min(88vw, 470px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(0, 65, 245, .45), rgba(89, 132, 248, .12) 46%, transparent 68%); filter: blur(14px); animation: breathe 3.6s ease-in-out infinite; }
.stage .orb { width: min(52vw, 300px); height: auto; aspect-ratio: 1; filter: drop-shadow(0 40px 60px var(--orb-shadow)); }
.stage .say { position: absolute; max-width: min(66%, 290px); padding: 11px 15px; border-radius: 20px; font-size: calc(14.5px * var(--fs, 1)); line-height: 1.45; box-shadow: var(--shadow-2); animation: pop var(--t) var(--ease) both; }
.stage .say.me { top: 6%; left: 5%; background: var(--brand); color: #fff; border-bottom-right-radius: 6px; }
.stage .say.qiu { bottom: 6%; right: 5%; display: flex; gap: 10px; align-items: flex-start; background: var(--glass); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); border: 1px solid var(--line-2); border-bottom-left-radius: 6px; animation-delay: .5s; }
.stage .say.qiu img { width: 24px; height: 24px; flex: none; }
.section { margin-top: clamp(64px, 10vw, 112px); display: grid; gap: 22px; }
.section-h { font-size: calc(clamp(24px, 2.8vw, 38px) * var(--fs, 1)); line-height: 1.1; text-wrap: balance; }
.examples { display: grid; gap: 14px; }
@media (min-width: 820px) { .examples { grid-template-columns: repeat(3, 1fr); } }
.example { display: grid; gap: 10px; align-content: start; padding: 16px; }
.example .bubble { max-width: 100%; animation: none; }
.example .reply { display: flex; gap: 10px; align-items: flex-end; }
.example .reply img { width: 26px; height: 26px; flex: none; }
/* «Un equipo que trabaja por ti»: los tres casos de uso con su frase de ejemplo */
.crew > .pill { justify-self: start; }
.crew-lead { margin: 0; max-width: 62ch; color: var(--fg-2); }
.crew-card .tile { width: 42px; height: 42px; border-radius: 14px; color: var(--brand-text); background: var(--brand-soft); border-color: transparent; }
.crew-card h3 { margin: 0; font-size: calc(19px * var(--fs, 1)); }
.crew-card h3 .soon { display: inline-block; vertical-align: middle; font-size: calc(12px * var(--fs, 1)); font-weight: 600; padding: 1px 8px; border-radius: 999px; border: 1px solid currentColor; color: var(--muted); white-space: nowrap; }
.crew-card p { margin: 0; color: var(--fg-2); }
.crew-card .bubble { align-self: end; color: var(--fg); }
.crew-note { margin: 0; color: var(--muted); font-size: calc(13px * var(--fs, 1)); }
.bento { display: grid; gap: 14px; }
@media (min-width: 820px) { .bento { grid-template-columns: 1.25fr 1fr; } .bento .big { grid-row: span 2; } }
.feature { display: grid; gap: 10px; align-content: start; padding: 22px; }
.feature .tile { width: 46px; height: 46px; border-radius: 15px; color: var(--brand-text); background: var(--brand-soft); border-color: transparent; }
.feature h3 { font-size: calc(19px * var(--fs, 1)); }
.feature p { color: var(--fg-2); }
.feature.big { align-content: space-between; gap: 28px; min-height: 250px; background: var(--surface-2); }
.feature.big h3 { font-size: calc(clamp(22px, 3vw, 28px) * var(--fs, 1)); }
.feature-text { display: grid; gap: 10px; }
@media (min-width: 820px) { .feature.big { grid-template-rows: 1fr auto; } .feature.big .mock { align-self: center; } }
.mock { display: grid; gap: 10px; max-width: 380px; padding: 16px; border-radius: 22px; background: var(--glass); border: 1px solid var(--line-2); box-shadow: var(--shadow-2);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transform: rotate(-1.5deg); transform-origin: left top; }
.mock-h { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); }
.mock-h img { width: 26px; height: 26px; }
.mock p { color: var(--fg-2); font-size: calc(14px * var(--fs, 1)); }
.mock-b { display: flex; justify-content: flex-end; gap: 8px; }
.mock-b .btn { pointer-events: none; }
.logos { display: flex; flex-wrap: wrap; gap: 10px; }
.logos span { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 15px; background: var(--surface); border: 1px solid var(--line); transition: transform var(--t) var(--spring), border-color var(--t-fast); }
.logos span:hover { transform: translateY(-3px); border-color: var(--line-2); }
.logos .brandmark { width: 22px; height: 22px; opacity: .9; }
.team { display: grid; gap: 18px; padding: clamp(22px, 4vw, 36px); }
@media (min-width: 820px) { .team { grid-template-columns: auto 1fr; align-items: center; gap: 32px; } }
.team .faces { display: flex; }
.team .faces .avatar { --s: 54px; font-size: calc(19px * var(--fs, 1)); }
.team .faces .avatar + .avatar { margin-left: -14px; }
.team .faces .avatar:nth-child(2) { background: #25262B; }
.team .faces .avatar:nth-child(3) { background: #5C5C63; }
.team .faces .avatar:last-child { background: #000; }
.team .faces .avatar:last-child img { position: static; width: 40px; height: 40px; }
.team p { color: var(--fg-2); font-size: calc(16.5px * var(--fs, 1)); margin-top: 8px; max-width: 40em; }
/* the closing call to open QIU: Qiu's black block too, with the outline pill in white on black */
.band { display: grid; gap: 14px; justify-items: center; text-align: center; padding: clamp(30px, 6vw, 56px) 20px; border-radius: var(--r-xl); border: 1px solid #26262B;
  background: #000; color: #F5F5F7; }
.band p { color: #C7C7CC; max-width: 32em; }
.band .suave { color: #8FBBFF; }
.band .btn.ghost { color: #fff; border-color: rgba(255, 255, 255, .35); }
.band .btn.ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.band .btn { margin-top: 8px; }

.band .cta-row { margin-top: 8px; justify-content: center; }

/* ---------- /planes ---------- */
.plans-hero { display: grid; gap: 18px; justify-items: start; max-width: 780px; padding-top: clamp(4px, 3vh, 28px); }
.plans-hero .display { font-size: calc(clamp(34px, 6.6vw, 60px) * var(--fs, 1)); line-height: 1.04; letter-spacing: -.03em; text-wrap: balance; }
.plans-hero .lead { font-size: calc(clamp(17px, 2.2vw, 19px) * var(--fs, 1)); color: var(--fg-2); text-wrap: pretty; }
.plans { display: grid; gap: 16px; margin-top: 34px; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, 1fr); } }
.plan { position: relative; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 14px; padding: clamp(24px, 3vw, 34px); scroll-margin-top: 24px; }
.plan h2 { font-size: calc(21px * var(--fs, 1)); line-height: 1.28; }
.plan-d { color: var(--fg-2); }
.plan .btn { width: 100%; }
.plan:target { box-shadow: 0 0 0 3px var(--brand); }
.plan-free { margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 14px 20px; }
.plan-free p { margin: 0; color: var(--fg-2); }
.plan-free strong { color: var(--fg); }
.plan-free + .plans { margin-top: 16px; }
.plan.mine, .plan-free.mine { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand); }
.plan > .pill { position: absolute; top: -12px; left: 20px; } /* out of the grid flow: the 5 rows stay put */
.plan.featured { border-color: var(--brand); box-shadow: 0 20px 50px rgba(0, 65, 245, .10); }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; align-content: start; font-size: calc(15px * var(--fs, 1)); }
.ticks li { display: flex; gap: 9px; align-items: flex-start; }
.ticks .ico { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--brand-text); }
.plans-note { margin-top: 16px; padding: 12px 16px; border-radius: var(--r); background: var(--brand-soft); color: var(--brand-text); font-weight: 600; }
.plans-note:empty { display: none; }
.plans-page .err { margin-top: 12px; }
.plans-legend { color: var(--fg-2); max-width: 46em; line-height: 1.9; }
.kind { display: inline-block; padding: 2px 9px; border-radius: 999px; font: 600 calc(12px * var(--fs, 1))/1.5 var(--font); vertical-align: 2px; white-space: nowrap; }
.kind.app { background: var(--surface-2); color: var(--fg-2); }
.kind.dfy { background: var(--brand-soft); color: var(--brand-text); }
.incl { display: grid; gap: 12px; }
@media (min-width: 820px) { .incl { grid-template-columns: 1fr 1fr; } }
.incl > .card:not(.feature) { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding: 18px; }
.incl .tile { color: var(--brand-text); background: var(--brand-soft); border-color: transparent; }
.incl h3 { font-size: calc(17px * var(--fs, 1)); margin-bottom: 6px; }
.incl p { color: var(--fg-2); }
.faq { display: grid; gap: 10px; max-width: 780px; }
.faq details { padding: 7px 18px; }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; border-radius: 12px; cursor: pointer; list-style: none; font-weight: 700; font-size: calc(16.5px * var(--fs, 1)); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--muted); font-weight: 500; }
.faq details[open] summary::after { content: '−'; }
.faq p { margin-top: 10px; color: var(--fg-2); }

/* ---------- documents (legal pages, feedback) ---------- */
.doc { max-width: 720px; margin: 0 auto; display: grid; gap: 14px; color: var(--fg-2); font-size: calc(15.5px * var(--fs, 1)); line-height: 1.65; }
.doc h1 { color: var(--fg); margin-bottom: 4px; }
.doc h2 { color: var(--fg); margin-top: 18px; }
.doc ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.doc a { color: var(--brand-text); text-underline-offset: 3px; }
.doc strong { color: var(--fg); }
.doc table { width: 100%; border-collapse: collapse; font-size: .95em; }
.doc th, .doc td { text-align: start; vertical-align: top; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); }
.doc th { color: var(--fg); }
@media (max-width: 640px) { /* phone: each permission is a block, no sideways scroll */
  .doc thead { display: none; }
  .doc tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .doc td { display: block; border: 0; padding: 2px 0; }
  .doc td:first-child { color: var(--fg); font-weight: 600; }
}
.legal-note { padding: 12px 14px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line); }
.legal-note:empty { display: none; }
.fb-list { display: grid; gap: 12px; }
.fb-item { display: grid; gap: 10px; padding: 18px; scroll-margin: 96px; }
.fb-item.focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft), var(--shadow-1); }
.fb-item .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.fb-item .reply { padding: 12px 14px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line); white-space: pre-wrap; color: var(--fg); }
.fb-item .reply b { display: block; margin-bottom: 4px; color: var(--brand-text); font-size: calc(13px * var(--fs, 1)); }

/* ---------- the in-app welcome (/app/welcome) ---------- */
body[data-screen="welcome"] #tabbar, body[data-screen="welcome"] #split { display: none !important; }
body[data-screen="welcome"] #app { display: block; }
body[data-screen="welcome"] #view { padding: calc(14px + var(--safe-t)) calc(16px + var(--safe-r)) calc(24px + var(--safe-b)) calc(16px + var(--safe-l)); }
.welcome { max-width: 500px; min-height: calc(100dvh - 40px - var(--safe-t) - var(--safe-b)); margin: 0 auto; display: grid; grid-template-rows: auto 1fr; gap: 16px; }
.w-top { display: flex; align-items: center; gap: 14px; min-height: 44px; }
.w-progress { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.w-progress i { height: 4px; border-radius: 2px; background: var(--surface-3); transition: background var(--t) var(--ease); }
.w-progress i.on { background: linear-gradient(90deg, var(--brand), var(--cyan)); }
.w-step { display: grid; gap: 22px; align-content: center; text-align: center; padding-bottom: 8vh; animation: view-in var(--t) var(--ease); }
.w-step h1 { font-size: calc(clamp(28px, 7vw, 36px) * var(--fs, 1)); }
.w-step .lead { color: var(--fg-2); font-size: calc(16px * var(--fs, 1)); }
.w-step form, .w-step .left { display: grid; gap: 14px; text-align: left; }
.w-step .orb { width: 116px; height: 116px; }
/* Qiu says hello (sphere + bubble) when the welcome starts straight at Google */
.w-greet { display: flex; align-items: center; gap: 12px; text-align: left; }
.w-greet img { flex: none; filter: drop-shadow(0 10px 18px var(--orb-shadow)); }
.w-greet > div { flex: 1; padding: 12px 14px; border-radius: 6px 20px 20px 20px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-1); }
.w-greet-h { font: 700 calc(16px * var(--fs, 1))/1.3 var(--font-display); margin-bottom: 3px; }
.w-tile { display: grid; place-items: center; width: 80px; height: 80px; margin: 0 auto; border-radius: 26px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-1); }
.w-tile .brandmark { width: 36px; height: 36px; }
.w-tile:has(.brandmark[src$="/google.svg"]) { background: #fff; }
.w-tile.tg { background: #229ED9; border-color: transparent; }
.w-tile.tg .brandmark { filter: invert(1); }
.w-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.w-chips span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--fg-2); font-size: calc(13.5px * var(--fs, 1)); font-weight: 500; }
.w-chips .brandmark { width: 15px; height: 15px; }
.w-qr { width: 176px; margin: 0 auto; padding: 14px; border-radius: 20px; background: #fff; box-shadow: var(--shadow-2); }
.w-qr svg { width: 100%; height: auto; }
.w-actions { display: grid; gap: 10px; }
.w-channels { text-align: left; }
.w-channels .row.off { opacity: .55; } /* WhatsApp: shown, switched off, until the channel exists */
.w-done { display: inline-flex; margin: 0 auto; }
.w-ex .row .title { font-weight: 500; }
.w-ex .tile { color: var(--brand-text); background: var(--brand-soft); border-color: transparent; }
@media (max-width: 767px) { .w-qr, .w-qr-cap { display: none !important; } } /* on a phone, the button already opens Telegram */

/* public pages: on a phone, «request access» stays pinned to the bottom (src/pages.js; public/web/comun.js moves it aside
   while another button, the questions or the footer are on screen), and the focus never hides under it */
.entry-cta { display: none; }
@media (max-width: 767px) {
  .entry-cta { display: flex; position: fixed; left: 16px; right: 16px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 20; justify-content: center; }
  body:has(.entry-cta) { padding-bottom: 76px; }
  html:has(.entry-cta) { scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}
/* the public pages' header: the website's menu (src/pages.js NAV); on a phone the pinned button is the call to action */
.entry-top { flex-wrap: wrap; }
.entry-top .wordmark, .entry-top .btn.sm { min-height: 44px; }
.entry-nav { display: flex; flex-wrap: wrap; column-gap: 24px; margin-right: auto; font-size: calc(14px * var(--fs, 1)); font-weight: 600; }
.entry-nav a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--fg-2); text-decoration: none; }
.entry-nav a:hover, .entry-nav a[aria-current] { color: var(--fg); }
/* «Entrar»: a plain link beside the button, always 44 px; on a narrow phone the menu keeps only «Planes» (the rest is in the footer) so it fits. */
.entry-in { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; font-size: calc(14px * var(--fs, 1)); font-weight: 600; color: var(--fg); text-decoration: none; }
/* The landing already opens with the big QIU logo and name (what Google checks for the brand): no second one in the header. */
body[data-page=index] .entry-top .wordmark { display: none; }
.entry-in:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 520px) { .entry-nav a:nth-child(-n+2) { display: none; } .entry-in { white-space: nowrap; } }
@media (max-width: 767px) { .entry-top .entry-try { display: none; } .entry-nav { column-gap: 16px; } }
.hint > a:only-child { display: inline-flex; align-items: center; min-height: 44px; } /* a link alone on its line (the 404) */
.doc details > summary { padding-block: 10px; cursor: pointer; border-radius: 12px; }
@media (min-width: 900px) { .plans.two { grid-template-columns: repeat(2, 1fr); } }
.en-corto { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--fg-2); }
.en-corto strong { color: var(--fg); }
.en-corto-pro { padding-left: 0; } .en-corto-pro ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; } .en-corto-pro small { color: var(--muted); font-size: calc(13px * var(--fs, 1)); } /* Qiu Pro una vez, las dos opciones debajo y el IVA en una nota aparte */

/* Home: one use case in a business (section «caso») */
.caso { display: grid; gap: 24px; padding: clamp(22px, 4vw, 36px); align-items: center; }
@media (min-width: 820px) { .caso { grid-template-columns: 1.1fr .9fr; gap: 40px; } }
.caso h3 { font-size: calc(clamp(24px, 3.4vw, 34px) * var(--fs, 1)); line-height: 1.1; letter-spacing: -.02em; margin: 14px 0 12px; }
.caso p { color: var(--fg-2); max-width: 34em; text-wrap: pretty; }
.caso .cta-row { margin-top: 20px; }
.caso-img { width: 100%; max-width: 300px; height: auto; aspect-ratio: 9 / 16; justify-self: center; border-radius: 22px; box-shadow: 0 18px 50px rgba(0, 0, 0, .22); }

/* Same muted grey as the website pages (3-oct): public pages are always light. */
:root[data-theme="light"] body.entry { --muted: #5C5C63; }
/* The pinned «Probar QIU» bar (phone) never hides the end of the page. */
@media (max-width: 767px) { body.entry .entry-foot { padding-bottom: calc(22px + 52px + 32px + var(--safe-b)); } }
/* 4-oct (Marcelino): zonas tactiles de 44 px tambien en la cabecera y en los enlaces sueltos. */
.entry-top .btn.sm, .entry-top a.btn { min-height: 44px; min-width: 44px; justify-content: center; }
/* La web publica sigue el tema del sistema (4-oct): la regla del gris de la web clara, tambien con el sistema en claro. */
@media (prefers-color-scheme: light) { :root[data-theme="system"] body.entry { --muted: #5C5C63; } }
.entry-main p a:not(.btn), .entry-main li a:not(.btn), .entry-main .faq a { padding-block: 11px; }
.w-mode[aria-pressed="true"] { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }

/* ---------- 12-oct (Carla: «sin márgenes, sin ser responsive, sin ser apaisada») ----------
   The public pages are as wide as the website (public/web .env: 1760 px) and share its side margins, which never go under 20 px. */
body.entry { --gut: clamp(20px, 4vw, 60px); }
body.entry .entry-top, body.entry .entry-main { max-width: 1760px; }
body.entry .entry-top { padding-left: calc(var(--gut) + var(--safe-l)); padding-right: calc(var(--gut) + var(--safe-r)); }
body.entry .entry-main { padding-left: calc(var(--gut) + var(--safe-l)); padding-right: calc(var(--gut) + var(--safe-r)); }
body.entry .entry-foot { padding-left: calc(var(--gut) + var(--safe-l)); padding-right: calc(var(--gut) + var(--safe-r)); }
/* The way back, first thing in the page (src/pages.js backLink). The arrow icon points right: it is flipped. */
.entry-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-bottom: 8px; color: var(--fg-2); font-size: calc(14px * var(--fs, 1)); font-weight: 600; text-decoration: none; }
.entry-back:hover { color: var(--fg); }
.entry-back .ico { flex: none; transform: scaleX(-1); }
[dir="rtl"] .entry-back .ico { transform: none; }
/* /planes on a computer: the headline beside the summary, the two prices side by side with air, four «included» in a row, the questions in two columns. */
.plans-hero { max-width: none; }
.plans-hero .lead { max-width: 44em; text-wrap: wrap; } /* plain lines: «pretty» left the second one a word short */
.plan-free + .plans { margin-top: 30px; } /* room for «Tu plan actual», which sits on the card's top edge */
.plan > .pill { top: -13px; z-index: 1; background: var(--brand); color: #fff; }
.faq { max-width: none; }
@media (min-width: 1100px) {
  .plans-hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); column-gap: clamp(40px, 5vw, 96px); align-items: end; }
  .plans-hero > * { grid-column: 1; }
  .plans-hero > .en-corto { grid-column: 2; grid-row: 2 / span 2; align-self: end; padding: 22px 24px 22px 42px; border-radius: var(--r-lg); background: var(--surface-2); }
  .plans-hero > .en-corto-pro { padding-left: 24px; }
  .plans.two { gap: 24px; }
  .plans.two .plan { padding: clamp(30px, 2.6vw, 44px); }
  .faq { grid-template-columns: 1fr 1fr; align-items: start; }
}
@media (min-width: 1400px) { .incl { grid-template-columns: repeat(4, 1fr); } }

/* Personal / Negocio: cada tarjeta ya lleva su borde; el de la lista que las envuelve las dejaba con doble marco */
.w-step .list:has(> .w-mode) { display: grid; gap: 12px; background: none; border: 0; box-shadow: none; overflow: visible; }

/* 13-oct (Carla): Qiu destaca sobre el fondo con una luz azul suave (familia #0041F5), en claro y en oscuro */
.orb-halo { position: relative; display: block; width: 88px; margin: 0 auto; }
.orb-halo::before { content: ''; position: absolute; inset: -52px; border-radius: 50%; background: radial-gradient(circle, rgba(47, 130, 255, .55) 0, rgba(0, 65, 245, .24) 42%, transparent 70%); filter: blur(14px); z-index: 0; pointer-events: none; }
.orb-halo .orb { position: relative; z-index: 1; }
/* entrar como ChatGPT y Claude: botones apilados de ancho completo, el correo debajo y la contraseña como enlace pequeño */
.si-stack { display: grid; gap: 10px; }
.si-stack .btn { margin-top: 0 !important; }
.si-small { text-align: center; margin: 2px 0 0; }

/* «Más opciones»: Telegram y WhatsApp plegados bajo Google y Apple (14-oct, Carla) */
.si-more { margin: 10px 0 0; }
.si-more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; color: var(--muted, #6b7280); font-size: .92em; font-weight: 600; -webkit-tap-highlight-color: transparent; }
.si-more > summary::-webkit-details-marker { display: none; }
.si-more > summary::after { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.si-more[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.si-more-list { display: grid; gap: 10px; padding-top: 4px; }
/* diseño v1 (punto 20): Qiu en HTML en Entrar, Pide acceso y el código; sin anillo ni rejilla, solo un halo suave */
.e-qiu { width: 160px; height: 163px; margin: -20px auto -22px; }
.e-qiu > img { width: 160px; height: 160px; }
.e-qiu .qiu-mascot { --qiu-max: 100%; --qiu-glow: rgba(40, 90, 200, .14); --shadow-ink: rgba(0, 8, 40, .28); }
.entry-card.has-qiu [data-sent] .badge-ico { display: none; }
.si-code input { text-align: center; font-weight: 700; letter-spacing: .5em; min-height: 56px; border-radius: 12px; }
.si-code input:focus { border-color: var(--brand); }
.entry-card.has-qiu[data-mail="off"] a.btn.ghost[href*="t.me/"] { background: var(--brand); border-color: transparent; color: #fff; } /* sin correo, pedir acceso por Telegram es LA acción */
.entry-card.has-qiu[data-mail="off"] a.btn.ghost[href*="t.me/"] .brandmark { filter: brightness(0) invert(1); }

/* diseño v2 · Planes (maqueta 09-planes-*-propuesta): titular en una línea con el degradado, resumen y «Gratis» como tarjetas blancas con borde,
   las dos tarjetas de precio iguales (solo «Tu plan actual» va en azul) y las chapas con la letra de la marca. */
.entry-main:has(.plans-page) .entry-back { color: var(--brand-text); }
.plans-page .pill, .plans-page .chapa { font-family: var(--font-mark); font-weight: 600; letter-spacing: .2em; }
.plans-page .chapa { gap: 6px; padding: 6px 12px; }
.plans-page .chapa .cuadrada { font-size: calc(11px * var(--fs, 1)); }
.plans-page .chapa .q-logo { display: none; }
.plans-hero { gap: 14px; }
.plans-hero .display { font-size: calc(clamp(34px, 4.2vw, 52px) * var(--fs, 1)); margin: 0; }
.plans-hero .display .suave { display: inline; }
.plans-hero .lead { font-size: calc(clamp(16px, 1.4vw, 17px) * var(--fs, 1)); line-height: 1.5; }
.plans-hero > .en-corto, .plan-free, .plans .plan { border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-1); }
.plans-hero > .en-corto { padding: 20px 22px; gap: 10px; }
.plans-hero > .en-corto-pro ul { list-style: none; padding-left: 0; font-size: calc(14.5px * var(--fs, 1)); }
.plans-hero > .en-corto-pro li { position: relative; padding-left: 24px; }
.plans-hero > .en-corto-pro li::before { content: ''; position: absolute; left: 3px; top: .3em; width: 10px; height: 5px; border-left: 2px solid var(--brand-text); border-bottom: 2px solid var(--brand-text); transform: rotate(-45deg); }
.plan-free { flex-wrap: nowrap; gap: 18px; padding: 16px 22px; }
.plan-free > .chapa { flex: none; }
.plan-free p { font-size: calc(14.5px * var(--fs, 1)); line-height: 1.45; }
.plans .plan { gap: 12px; padding: clamp(22px, 2vw, 28px); }
.plans.two .plan { padding: clamp(22px, 2vw, 28px); }
.plans .plan.featured { border-color: var(--line); box-shadow: var(--shadow-1); }
.plans .plan.mine { border: 2px solid var(--brand); box-shadow: var(--shadow-1); }
.plans .plan h2 { font-size: calc(20px * var(--fs, 1)); }
.plans .plan .plan-d { font-size: calc(14.5px * var(--fs, 1)); }
.plans .plan .ticks { font-size: calc(14.5px * var(--fs, 1)); }
.plans-page .incl > .card, .plans-page .faq > .card { border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-1); }
@media (min-width: 1100px) {
  .plans-hero { align-items: start; }
  .plans-hero > .en-corto { grid-row: 1 / span 3; align-self: center; justify-self: end; padding: 22px 26px; background: var(--surface); }
  .plans-hero > .en-corto-pro ul { list-style: disc; padding-left: 18px; }
  .plans-hero > .en-corto-pro li { padding-left: 0; }
  .plans-hero > .en-corto-pro li::before { content: none; }
}
@media (max-width: 767px) {
  .plan-free { flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px 20px; }
}

/* diseño v2 · ronda 2 (15-oct). Código de Telegram (maqueta 12b): título y explicación fuera de la tarjeta, 6 casillas y los enlaces en azul */
.si-sent { display: grid; gap: 22px; } .si-sent[hidden] { display: none; }
.si-sent-h { display: grid; gap: 10px; text-align: center; }
.si-sent-h h1 .suave { display: inline; }
.si-sent-h h1 .suave, .pa-card h1 .hl { background: var(--grad-hl, linear-gradient(90deg, #1A4FCC, #2F82FF 50%, #45B4FF)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.otp { --b: 42px; --g: 8px; position: relative; display: flex; gap: var(--g); width: calc(6 * var(--b) + 5 * var(--g)); height: 54px; margin: 2px auto 4px; direction: ltr; }
.otp-b { flex: none; width: var(--b); border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.otp-b.on { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.si-code .otp input { position: absolute; top: 0; left: 0; width: calc(100% + 24px); height: 100%; min-height: 0; margin: 0; padding: 0 0 0 calc((var(--b) - 1ch) / 2); border: 0; border-radius: 0; background: none; box-shadow: none;
  font: 700 calc(24px * var(--fs, 1))/1 var(--font-display); font-size: calc(24px * var(--fs, 1)) !important; font-variant-numeric: tabular-nums; letter-spacing: calc(var(--b) + var(--g) - 1ch); text-align: left; caret-color: transparent; color: var(--fg); }
.si-code .otp input:focus, .si-code .otp input:focus-visible { outline: 0; box-shadow: none; border: 0; }
@media (max-width: 340px) { .otp { --b: 36px; --g: 6px; } }
.si-links { margin: 14px 0 0; text-align: center; color: var(--muted); }
.si-links a, .si-links .linkish, .entry-card .hint a { color: var(--brand-text); font-weight: 600; text-decoration: none; }
.si-links .linkish:disabled { opacity: .5; cursor: default; }
.si-sent .si-small .linkish { color: var(--muted); font-size: calc(14px * var(--fs, 1)); }
/* Entrar (maqueta 12): el campo con borde y fondo de tarjeta, no gris; el logo «QIU.» con su punto */
.entry-card .field input { background: var(--surface); border: 1px solid var(--line-2); }
.entry-top .wordmark span::after { content: '.'; }
/* Pide acceso (maqueta 11, /signup sin invitación): una sola acción y «¿Ya tienes cuenta? Entrar» debajo */
.pa-card { text-align: center; }
.pa-go { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.pa-go .ico { width: 20px; height: 20px; }