/* Web Suya: the short home page and the price page (17 Oct 2026).
 *
 * The parts of website-business docs/brand/site-selling-framework.md §4: the
 * three numbers under the H1, the phone that zaps through the examples, the
 * ticker, the comparison, the examples, the three steps and the trust block.
 *
 * Only the tokens of websuya.css (--bg, --surface, --fg, --accent, --hi …), so
 * the brand can change there without touching this file. The example sites keep
 * their own fixed colours (--m-*): they are client looks, not ours.
 *
 * Everything that moves is started by /assets/js/home.js, can be paused, and
 * rests in a complete state without the script or with reduced motion. */

.ws-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- Hero, short ---- */
.ws-hero--v1 { padding: 28px 0 44px; }
.ws-hero--v1 .ws-lead { max-width: 32ch; margin-bottom: 0; }
.ws-hero--v1 .ws-actions { margin-top: 24px; }
.ws-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 24px 0 0; max-width: 540px; }
.ws-stats li { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 12px 14px; min-width: 0; }
.ws-stats b { display: block; font: 800 clamp(2.1rem, 1.6rem + 2vw, 3rem)/1 var(--f-display); letter-spacing: -0.04em; color: var(--accent); font-variant-numeric: tabular-nums; }
.ws-stats span { display: block; font-size: .86rem; line-height: 1.25; color: var(--muted); margin-top: 6px; }
.ws-stats li:last-child { background: var(--fg); border-color: var(--fg); }
.ws-stats li:last-child b { color: var(--hi); }
.ws-stats li:last-child span { color: var(--ink-soft); }
@media (min-width: 960px) { .ws-hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }

/* ---- The phone that zaps through the examples (a light step towards the zapper, 00 #71) ---- */
.ws-tv { justify-self: center; display: grid; justify-items: center; gap: 14px; width: min(320px, 86vw); }
.ws-tv .ws-phone { width: min(290px, 74vw); }
.ws-tv .ws-phone__screen { background: #0E0F12; }
.ws-tv__chans { position: relative; flex: 1; overflow: hidden; }
.ws-chan { position: absolute; inset: 0; visibility: hidden; }
.ws-tv .ws-mini__photo { min-height: 168px; }
.ws-tv .ws-mini__title { font-size: 19px; }
.ws-tv[data-on="0"] .ws-chan:nth-child(1), .ws-tv[data-on="1"] .ws-chan:nth-child(2),
.ws-tv[data-on="2"] .ws-chan:nth-child(3), .ws-tv[data-on="3"] .ws-chan:nth-child(4),
.ws-tv[data-on="4"] .ws-chan:nth-child(5), .ws-tv[data-on="5"] .ws-chan:nth-child(6) {
  visibility: visible; animation: ws-chan-in .46s cubic-bezier(.2, .8, .2, 1);
}
@keyframes ws-chan-in {
  from { clip-path: inset(0 0 100% 0); transform: scale(1.04); filter: saturate(2) brightness(1.3); }
  to { clip-path: inset(0); transform: none; filter: none; }
}
/* The switch: a thin scan line and a short burst of static, one per change (well under WCAG 2.3.1's three a second). */
.ws-tv__chans::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .10) 0 1px, transparent 1px 3px), rgba(14, 15, 18, .55); }
.ws-tv.is-zap .ws-tv__chans::after { animation: ws-static .38s steps(3) 1; }
@keyframes ws-static { 0% { opacity: .9; } 60% { opacity: .35; } 100% { opacity: 0; } }
.ws-tv__bar { display: flex; align-items: center; gap: 10px; width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 6px 6px 14px; font-size: .9rem; }
.ws-tv__live { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #E5484D; box-shadow: 0 0 0 3px rgba(229, 72, 77, .2); }
.ws-tv.is-paused .ws-tv__live { background: var(--muted); box-shadow: none; }
.ws-tv__cap { flex: 1; min-width: 0; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.ws-tv__cap [data-c] { display: none; }
.ws-tv[data-on="0"] [data-c="0"], .ws-tv[data-on="1"] [data-c="1"], .ws-tv[data-on="2"] [data-c="2"],
.ws-tv[data-on="3"] [data-c="3"], .ws-tv[data-on="4"] [data-c="4"], .ws-tv[data-on="5"] [data-c="5"] { display: inline; }
.ws-tv__cap small { color: var(--muted); font-weight: 400; margin-right: 6px; font-variant-numeric: tabular-nums; }

/* Pause / play buttons shared by every moving part. */
.ws-ctl { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font: 700 .88rem/1 var(--f-body); cursor: pointer; }
.ws-ctl:hover { border-color: var(--fg); }
.ws-ctl .ws-ico { width: 16px; height: 16px; }
.ws-ctl .ws-ctl__play, .ws-ctl[aria-pressed="true"] .ws-ctl__pause { display: none; }
.ws-ctl[aria-pressed="true"] .ws-ctl__play { display: inline-flex; }

/* ---- The example sites (fictional, labelled: site plan §6.2) ---- */
.ws-mini { height: 100%; display: flex; flex-direction: column; background: var(--m-bg); color: var(--m-fg); font-family: var(--m-body, var(--f-body)); font-size: 11.5px; line-height: 1.35; overflow: hidden; }
.ws-mini__nav { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--m-line); }
.ws-mini__logo { font: var(--m-weight, 800) 13px/1.05 var(--m-display, var(--f-display)); text-transform: var(--m-case, none); letter-spacing: var(--m-track, -0.02em); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ws-mini__lang { flex: none; display: inline-flex; gap: 2px; font-size: 9.5px; font-weight: 700; }
.ws-mini__lang i { font-style: normal; padding: 2px 5px; border-radius: 4px; color: var(--m-muted); }
[data-ml="es"] .ws-mini__lang i:first-child, [data-ml="en"] .ws-mini__lang i:last-child { background: var(--m-fg); color: var(--m-bg); }
.ws-mini__hero { padding: 12px; display: grid; gap: 10px; }
.ws-mini__photo { display: flex; align-items: flex-end; justify-content: flex-start; min-height: 104px; border-radius: var(--m-radius); padding: 8px; background: var(--m-photo); color: rgba(255, 255, 255, .92); font-size: 9.5px; font-weight: 700; letter-spacing: .02em; }
.ws-mini__kicker { margin: 0; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--m-accent-text, var(--m-accent)); }
.ws-mini__title { margin: 0; font: var(--m-weight, 800) 17px/1.08 var(--m-display, var(--f-display)); text-transform: var(--m-case, none); letter-spacing: var(--m-track, -0.02em); }
.ws-mini__btn { justify-self: start; display: inline-flex; align-items: center; gap: 5px; padding: 7px 11px; border-radius: var(--m-btn-radius); background: var(--m-accent); color: var(--m-on-accent, #fff); font-weight: 700; font-size: 10.5px; }
.ws-mini__btn .ws-ico { width: 12px; height: 12px; }
.ws-mini__list { margin: 0 12px 12px; background: var(--m-surface); border: 1px solid var(--m-line); border-radius: var(--m-radius); }
.ws-mini__list li { display: flex; justify-content: space-between; padding: 8px 10px; border-bottom: 1px solid var(--m-line); font-weight: 700; }
.ws-mini__list li:last-child { border-bottom: 0; }
.ws-mini__list li::after { content: "›"; color: var(--m-muted); font-weight: 400; }
.ws-mini__foot { margin-top: auto; padding: 8px 12px 12px; font-size: 9px; color: var(--m-muted); }
[data-ml="es"] .ws-mini [lang="en"], [data-ml="en"] .ws-mini [lang="es"] { display: none; }
.ws-mini [lang] { animation: ws-lang-in .35s ease; }
@keyframes ws-lang-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* The six looks: the house archetypes of the zapper prototype (placeholder hues; site plan §6.1). */
.ws-look--foto  { --m-bg: #F7F4EE; --m-surface: #FFFFFF; --m-fg: #1B2430; --m-muted: #556070; --m-line: #E2DCD0; --m-accent: #0F5E8C; --m-radius: 14px; --m-btn-radius: 10px; --m-weight: 700; --m-display: system-ui, -apple-system, 'Segoe UI', sans-serif; --m-track: -0.015em;
  --m-photo: linear-gradient(170deg, rgba(15, 94, 140, .15), rgba(15, 94, 140, .75)), linear-gradient(180deg, #8EC5E6 0 46%, #F4C95D 46% 52%, #E9D9B8 52%); }
.ws-look--cafe  { --m-bg: #EDE3D6; --m-surface: #F7F0E6; --m-fg: #3B2417; --m-muted: #6B5040; --m-line: #D3C0A8; --m-accent: #7A3E1D; --m-radius: 22px; --m-btn-radius: 999px; --m-weight: 700; --m-display: 'Trebuchet MS', 'Avenir Next', sans-serif; --m-track: -0.01em;
  --m-photo: radial-gradient(circle at 70% 30%, #F2C894 0 18%, transparent 19%), radial-gradient(circle at 30% 70%, #B9653A 0 24%, transparent 25%), linear-gradient(135deg, #7A3E1D, #C98A57); }
.ws-look--selva { --m-bg: #EEF5EF; --m-surface: #FFFFFF; --m-fg: #0F2E22; --m-muted: #3F5A4C; --m-line: #BFD8C6; --m-accent: #1E6B45; --m-radius: 8px; --m-btn-radius: 6px; --m-weight: 700; --m-display: system-ui, -apple-system, 'Segoe UI', sans-serif; --m-track: -0.025em;
  --m-photo: radial-gradient(ellipse at 80% 20%, rgba(255, 255, 255, .6) 0 22%, transparent 23%), linear-gradient(150deg, #9FE3B8, #1E6B45 75%); }
.ws-look--sol   { --m-bg: #FFFFFF; --m-surface: #FFF7E0; --m-fg: #0B1F3A; --m-muted: #3C4E66; --m-line: #0B1F3A; --m-accent: #B93A0B; --m-radius: 0; --m-btn-radius: 0; --m-weight: 400; --m-case: uppercase; --m-track: .01em; --m-display: Impact, 'Haettenschweiler', 'Arial Narrow Bold', 'Bricolage Grotesque', sans-serif;
  --m-photo: radial-gradient(circle at 76% 34%, #FFD23F 0 15%, transparent 16%), linear-gradient(180deg, #FF8C42 0 40%, #2D9CDB 40% 72%, #1B5E9A 72%); }
.ws-look--noche { --m-bg: #0E0F12; --m-surface: #17191E; --m-fg: #ECE6DA; --m-muted: #A8A094; --m-line: #34363C; --m-accent: #C8A96A; --m-on-accent: #14120E; --m-radius: 2px; --m-btn-radius: 2px; --m-weight: 800; --m-case: uppercase; --m-track: .02em;
  --m-photo: repeating-linear-gradient(135deg, rgba(200, 169, 106, .16) 0 10px, transparent 10px 20px), linear-gradient(160deg, #2A2D34, #0E0F12); }
.ws-look--calido { --m-bg: #F1ECE2; --m-surface: #FBF8F2; --m-fg: #2B2620; --m-muted: #625A4E; --m-line: #D8CFBF; --m-accent: #55663A; --m-radius: 4px; --m-btn-radius: 2px; --m-weight: 500; --m-track: -0.01em; --m-display: Georgia, 'Times New Roman', serif;
  --m-photo: linear-gradient(160deg, rgba(43, 38, 32, .1), rgba(43, 38, 32, .6)), repeating-linear-gradient(90deg, #C9B48E 0 26px, #B79F76 26px 28px), #C9B48E; }

/* ---- Ticker: the short promises, moving ---- */
.ws-ticker { position: relative; background: var(--fg); color: var(--bg); overflow: hidden; }
.ws-ticker__track { display: flex; width: max-content; animation: ws-marquee 42s linear infinite; }
.ws-ticker ul { display: flex; flex: none; padding: 15px 0; }
.ws-ticker li { display: flex; align-items: center; gap: 22px; padding-right: 22px; font: 700 clamp(1.05rem, .95rem + .6vw, 1.45rem)/1.1 var(--f-display); letter-spacing: -0.01em; white-space: nowrap; }
.ws-ticker li::after { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--hi); }
.ws-ticker:hover .ws-ticker__track, .ws-ticker.is-paused .ws-ticker__track { animation-play-state: paused; }
.ws-ticker::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 84px; background: linear-gradient(90deg, rgba(23, 21, 18, 0), var(--fg) 45%); pointer-events: none; }
.ws-ticker .ws-ctl { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); z-index: 1; background: var(--fg); color: var(--bg); border-color: rgba(255, 255, 255, .3); }
@keyframes ws-marquee { to { transform: translateX(-50%); } }

/* ---- The comparison ---- */
.ws-vs-sec h2 { max-width: 22ch; }
.ws-vs-sec .ws-head { margin-bottom: 28px; }
.ws-vs__pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.ws-vs__pick > span { font-weight: 700; color: var(--ink-soft); margin-right: 4px; }
.ws-vs__pick button[data-vs-pick] { min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28); background: transparent; color: var(--bg); font: 700 1rem/1 var(--f-body); cursor: pointer; transition: background .2s ease, color .2s ease; }
.ws-vs__pick button[data-vs-pick]:hover { border-color: var(--bg); }
.ws-vs__pick button[aria-pressed="true"] { background: var(--bg); color: var(--fg); border-color: var(--bg); }
.ws-vs__pick .ws-ctl { margin-left: auto; background: transparent; color: var(--bg); border-color: rgba(255, 255, 255, .28); }
.ws-vs [data-r] { display: none; }
.ws-vs[data-vs="wix"] [data-r="wix"], .ws-vs[data-vs="squarespace"] [data-r="squarespace"],
.ws-vs[data-vs="agency"] [data-r="agency"] { display: inline; }
.ws-vs__board { border-radius: 18px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .14); }
.ws-vs__head, .ws-vs__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ws-vs__head > div { padding: 16px 14px; display: grid; gap: 6px; align-content: start; }
.ws-vs__head .ws-vs__them { background: rgba(255, 255, 255, .06); }
.ws-vs__head .ws-vs__us { background: var(--hi); color: var(--on-hi); }
.ws-vs__name { font: 800 clamp(1.25rem, 1rem + 1vw, 1.7rem)/1 var(--f-display); letter-spacing: -0.03em; }
.ws-vs__them .ws-vs__name { font-size: clamp(1.05rem, .9rem + .8vw, 1.4rem); font-weight: 700; }
.ws-meter { font-size: .86rem; color: var(--ink-soft); }
.ws-meter b { display: inline-block; min-width: 2ch; font: 800 1.35rem/1 var(--f-display); color: #FF9B8F; font-variant-numeric: tabular-nums; }
.ws-vs__us .ws-meter { color: rgba(23, 21, 18, .78); }
.ws-vs__us .ws-meter b { color: var(--on-hi); }
.ws-vs__q { grid-column: 1 / -1; margin: 0; padding: 12px 14px 8px; font-weight: 700; font-size: .84rem; letter-spacing: .06em; text-transform: uppercase; color: var(--hi); border-top: 1px solid rgba(255, 255, 255, .14); }
.ws-vs__row .ws-vs__them, .ws-vs__row .ws-vs__us { margin: 0; padding: 4px 14px 16px; display: flex; gap: 8px; align-items: flex-start; font-size: .98rem; line-height: 1.35; }
.ws-vs__row .ws-vs__them { color: var(--ink-soft); }
.ws-vs__row .ws-vs__us { color: #fff; font-weight: 700; }
.ws-vs__row .ws-ico { flex: none; width: 18px; height: 18px; margin-top: 1px; stroke-width: 3; }
.ws-vs__row .ws-vs__them .ws-ico { color: #FF9B8F; }
.ws-vs__row .ws-vs__us .ws-ico { color: var(--hi); }
.ws-vs__row .ws-vs__us { background: linear-gradient(90deg, rgba(255, 225, 77, .16), rgba(255, 225, 77, .05)); }
@media (min-width: 860px) {
  .ws-vs__head, .ws-vs__row { grid-template-columns: minmax(0, .75fr) minmax(0, 1fr) minmax(0, 1fr); }
  .ws-vs__head::before { content: ""; }
  .ws-vs__q { grid-column: auto; padding: 18px 16px; border-top: 1px solid rgba(255, 255, 255, .14); }
  .ws-vs__row .ws-vs__them, .ws-vs__row .ws-vs__us { padding: 18px 16px; border-top: 1px solid rgba(255, 255, 255, .14); }
}
/* A change of rival: their answers flip in and their crosses land; ours stay put. */
.ws-vs.is-swap .ws-vs__them { animation: ws-flip .5s cubic-bezier(.2, .8, .2, 1) both; }
.ws-vs.is-swap .ws-vs__row .ws-vs__them .ws-ico { animation: ws-stamp .5s cubic-bezier(.3, 1.6, .5, 1) .12s both; }
@keyframes ws-flip { from { opacity: 0; transform: perspective(600px) rotateX(-70deg); transform-origin: top; } to { opacity: 1; transform: none; } }
@keyframes ws-stamp { from { opacity: 0; transform: scale(2.2) rotate(-25deg); } to { opacity: 1; transform: none; } }
.ws-vs__honest { margin: 22px 0 0; font: 700 clamp(1.15rem, 1rem + .6vw, 1.4rem)/1.3 var(--f-display); color: #fff; max-width: 46ch; }
.ws-vs__honest span { color: var(--hi); }
.ws-vs-sec .ws-actions { margin-bottom: 0; }
.ws-sources { margin-top: 22px; font-size: .86rem; color: var(--ink-soft); max-width: 80ch; }
.ws-sources p { margin: 0 0 8px; }
.ws-sources summary { cursor: pointer; font-weight: 700; color: #fff; min-height: 44px; display: inline-flex; align-items: center; }
.ws-sources ul { list-style: disc; padding-left: 1.2em; margin: 6px 0 0; display: grid; gap: 4px; }
.ws-sources a { color: #fff; }

/* ---- Examples ---- */
.ws-head--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; max-width: none; }
.ws-head--row > div { max-width: 640px; }
.ws-langsw { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); }
.ws-langsw button { min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 0; background: transparent; color: var(--muted); font: 700 .95rem/1 var(--f-body); cursor: pointer; }
.ws-langsw button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.ws-langsw .ws-ctl { height: 40px; min-width: 40px; padding: 0 10px; }
.ws-examples { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(268px, 82%); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 14px; margin: 0 -2px; overscroll-behavior-x: contain; }
@media (min-width: 860px) { .ws-examples { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; } }
.ws-ex { scroll-snap-align: start; min-width: 0; }
.ws-browser { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); box-shadow: 0 18px 40px -30px rgba(23, 21, 18, .5); transition: transform .3s ease, box-shadow .3s ease; }
.ws-ex:hover .ws-browser { transform: translateY(-4px); box-shadow: 0 26px 50px -30px rgba(23, 21, 18, .6); }
.ws-browser__bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: var(--surface-2); font-size: .74rem; font-weight: 700; color: var(--muted); }
.ws-browser__bar i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.ws-browser__bar span { margin-left: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-browser__view { position: relative; height: 236px; overflow: hidden; }
/* The site at twice the card's width, shown at half size: a true desktop layout in miniature. */
.ws-browser__view .ws-mini { position: absolute; top: 0; left: 0; width: 200%; height: auto; min-height: 200%; transform: scale(.5); transform-origin: 0 0; transition: transform 2.4s cubic-bezier(.4, 0, .2, 1); font-size: 13px; }
.ws-ex:hover .ws-browser__view .ws-mini { transform: scale(.5) translateY(-38%); }
.ws-browser__view .ws-mini__hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; padding: 22px 22px 16px; gap: 12px 22px; }
.ws-browser__view .ws-mini__photo { grid-column: 2; grid-row: 1 / span 3; min-height: 200px; }
.ws-browser__view .ws-mini__title { font-size: 30px; }
.ws-browser__view .ws-mini__btn { font-size: 13px; padding: 10px 16px; }
.ws-browser__view .ws-mini__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 22px 18px; }
.ws-browser__view .ws-mini__list li { border-bottom: 0; border-right: 1px solid var(--m-line); padding: 14px; }
.ws-browser__view .ws-mini__list li:last-child { border-right: 0; }
.ws-browser__view .ws-mini__nav { padding: 14px 22px; }
.ws-browser__view .ws-mini__logo { font-size: 17px; }
.ws-ex__type { margin: 10px 2px 0; font-weight: 700; }
.ws-ex__type small { display: block; font-weight: 400; color: var(--muted); font-size: .88rem; }
.ws-examples-note { margin: 18px 0 0; color: var(--muted); max-width: 64ch; }

/* ---- Three steps ---- */
.ws-steps3 { display: grid; gap: 12px; counter-reset: s; list-style: none; margin: 0; padding: 0; }
@media (min-width: 860px) { .ws-steps3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ws-steps3 li { position: relative; padding: 20px 20px 22px 66px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; min-width: 0; }
.ws-steps3 li::before { counter-increment: s; content: counter(s); position: absolute; left: 18px; top: 18px; width: 34px; height: 34px; border-radius: 50%; background: var(--fg); color: var(--hi); display: flex; align-items: center; justify-content: center; font: 800 1rem/1 var(--f-display); }
.ws-steps3 h3 { font-size: 1.15rem; margin: 4px 0 6px; }
.ws-steps3 p { color: var(--muted); font-size: .97rem; margin: 0; }
.ws-steps3 li:nth-child(2) { border: 2px solid var(--fg); }
.ws-steps3 li:nth-child(2)::before { background: var(--hi); color: var(--on-hi); box-shadow: inset 0 0 0 2px var(--fg); }
.ws-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-weight: 700; }
.ws-more .ws-ico { width: 18px; height: 18px; }

/* ---- Trust: the founding five and «Funciona con» ---- */
.ws-trust { display: grid; gap: 18px; }
@media (min-width: 960px) { .ws-trust { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: stretch; } }
.ws-panel { background: var(--bg); border: 1px solid var(--line); border-radius: 18px; padding: 24px; min-width: 0; }
.ws-panel h3 { font-size: 1.3rem; margin: 0 0 8px; }
.ws-panel > p { color: var(--muted); margin: 0 0 16px; }
.ws-five { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 18px 0; }
.ws-five li { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 4px; border: 2px dashed var(--line); border-radius: 12px; font-size: .74rem; line-height: 1.15; font-weight: 700; color: var(--muted); animation: ws-slot 3.2s ease-in-out infinite; min-width: 0; overflow-wrap: anywhere; }
.ws-five li:nth-child(2) { animation-delay: .4s; } .ws-five li:nth-child(3) { animation-delay: .8s; }
.ws-five li:nth-child(4) { animation-delay: 1.2s; } .ws-five li:nth-child(5) { animation-delay: 1.6s; }
@keyframes ws-slot { 50% { border-color: var(--hi); color: var(--fg); } }
.ws-five .ws-five__taken { display: none; }
.ws-five[data-taken="1"] li:nth-child(-n+1), .ws-five[data-taken="2"] li:nth-child(-n+2), .ws-five[data-taken="3"] li:nth-child(-n+3),
.ws-five[data-taken="4"] li:nth-child(-n+4), .ws-five[data-taken="5"] li { border-style: solid; border-color: var(--fg); background: var(--fg); color: var(--hi); animation: none; }
.ws-five[data-taken="1"] li:nth-child(-n+1) .ws-five__taken, .ws-five[data-taken="2"] li:nth-child(-n+2) .ws-five__taken, .ws-five[data-taken="3"] li:nth-child(-n+3) .ws-five__taken,
.ws-five[data-taken="4"] li:nth-child(-n+4) .ws-five__taken, .ws-five[data-taken="5"] li .ws-five__taken { display: inline; }
.ws-five[data-taken="1"] li:nth-child(-n+1) .ws-five__free, .ws-five[data-taken="2"] li:nth-child(-n+2) .ws-five__free, .ws-five[data-taken="3"] li:nth-child(-n+3) .ws-five__free,
.ws-five[data-taken="4"] li:nth-child(-n+4) .ws-five__free, .ws-five[data-taken="5"] li .ws-five__free { display: none; }
.ws-five-count { display: flex; align-items: baseline; gap: 10px; margin: 0 0 16px; font-weight: 700; }
.ws-five-count b { font: 800 2.6rem/1 var(--f-display); letter-spacing: -0.04em; color: var(--accent); }
.ws-with { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }
.ws-with__label { margin: 0 0 12px; font-weight: 700; font-size: .84rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
/* Names in plain text, the size and style of the sentence around them: no logos (the brands' own rules, 00 #98). */
.ws-with ul { display: grid; gap: 10px; }
.ws-with li { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.ws-with .ws-ico { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--accent); }
.ws-with__fine { margin: 14px 0 0; font-size: .82rem; color: var(--muted); }
.ws-who--short .ws-ficha { background: var(--surface); }
@media (max-width: 520px) {
  .ws-panel { padding: 20px 16px; }
  .ws-who--short .ws-ficha { padding: 12px 14px; }
  .ws-who--short .ws-ficha div { grid-template-columns: minmax(0, 7em) minmax(0, 1fr); gap: 10px; }
}

/* ---- Closing ---- */
.ws-closing .ws-actions { justify-content: center; }
.ws-closing__contact { margin: 18px auto 0; font-size: .95rem; opacity: .92; }
.ws-closing__contact a { color: inherit; font-weight: 700; }
.ws-btn--onaccent { background: transparent; color: var(--on-hi); border-color: var(--on-hi); }
.ws-btn--onaccent:hover { background: var(--on-hi); color: var(--hi); }

/* ---- The price page's head ---- */
.ws-pagehead { padding: 40px 0 8px; }
.ws-pagehead h1 { font-size: clamp(2.6rem, 1.8rem + 4vw, 4.6rem); letter-spacing: -0.045em; line-height: .98; margin-bottom: 16px; }
.ws-pagehead .ws-intro { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .ws-ticker__track { width: auto; }
  .ws-ticker ul { flex-wrap: wrap; justify-content: center; padding: 12px 16px; row-gap: 10px; flex: 1; }
  .ws-ticker ul[aria-hidden] { display: none; }
  .ws-ticker .ws-ctl { display: none; }
  .ws-ex:hover .ws-browser__view .ws-mini { transform: scale(.5); }
}
@media print {
  .ws-ticker, .ws-tv__bar, .ws-ctl { display: none; }
}