/* ==========================================================================
   Components
   ========================================================================== */
@layer components {

  /* ---------- Logo ---------- */
  .logo { display: inline-flex; align-items: center; gap: var(--sp-2); text-decoration: none; color: inherit; line-height: 1; }
  .logo svg { height: 2.6rem; width: auto; }
  .logo__mark { font-family: var(--font-display); font-weight: 800; font-style: italic; font-size: 2rem; letter-spacing: -0.02em; }
  .logo__mark i { color: var(--red-500); font-style: inherit; }
  .logo__tag { display: flex; flex-direction: column; font-family: var(--font-display); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted); line-height: 1.15; }

  /* ---------- Buttons ---------- */
  .btn {
    --btn-bg: var(--accent); --btn-fg: var(--accent-fg); --btn-bd: transparent;
    position: relative; isolation: isolate; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    padding: 0.8rem 1.4rem; border-radius: var(--radius-sm);
    font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); letter-spacing: 0.02em; text-transform: uppercase;
    text-decoration: none; white-space: nowrap; line-height: 1;
    color: var(--btn-fg); background: var(--btn-bg); border: 1.5px solid var(--btn-bd);
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base), color var(--dur-base), border-color var(--dur-base);
  }
  .btn::after { /* sheen */
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / 0.25) 50%, transparent 70%);
    transform: translateX(-120%); transition: transform var(--dur-slow) var(--ease-out);
  }
  .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .btn:hover::after { transform: translateX(120%); }
  .btn:active { transform: translateY(0) scale(0.98); }
  .btn svg { width: 1.15em; height: 1.15em; flex: none; }

  .btn--primary:hover { --btn-bg: var(--accent-hover); }
  .btn--primary:hover { box-shadow: var(--shadow-glow); }
  .btn--dark { --btn-bg: var(--ink-900); --btn-fg: var(--white); }
  .btn--light { --btn-bg: var(--white); --btn-fg: var(--ink-900); }
  .btn--ghost { --btn-bg: transparent; --btn-fg: var(--fg); --btn-bd: var(--border-strong); }
  .btn--ghost:hover { --btn-bg: var(--accent-soft); --btn-bd: var(--accent); }
  .btn--whatsapp { --btn-bg: var(--whatsapp); --btn-fg: #05301a; }
  .btn--whatsapp:hover { --btn-bg: #1fbf5b; }
  .btn--sm { padding: 0.55rem 0.95rem; font-size: var(--fs-md); }
  .btn--lg { padding: 1.05rem 1.9rem; font-size: var(--fs-xl); }
  .btn--block { width: 100%; }
  .btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

  /* Text link with arrow */
  .link-arrow { display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none; color: var(--accent); }
  .link-arrow svg { width: 1.1em; height: 1.1em; transition: transform var(--dur-base) var(--ease-out); }
  .link-arrow:hover svg { transform: translateX(4px); }

  /* ---------- Header ---------- */
  .site-header {
    position: relative;
    background: color-mix(in oklab, var(--ink-950) 82%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
    color: var(--steel-100); border-bottom: 1px solid rgb(255 255 255 / 0.06);
  }
  .site-header .container { display: flex; align-items: center; gap: var(--sp-6); min-height: 4.5rem; }
  .site-header .logo__tag { color: var(--steel-400); }
  .nav { display: none; margin-inline-start: auto; }
  .nav ul { display: flex; gap: var(--sp-1); list-style: none; margin: 0; padding: 0; }
  .nav a {
    display: block; padding: 0.55rem 0.8rem; border-radius: var(--radius-sm);
    font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); letter-spacing: 0.03em; text-transform: uppercase; text-decoration: none;
    color: var(--steel-300); position: relative; transition: color var(--dur-fast);
  }
  .nav a::after { content: ""; position: absolute; left: 0.8rem; right: 0.8rem; bottom: 0.3rem; height: 2px; background: var(--red-500); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-out); }
  .nav a:hover, .nav a[aria-current="page"] { color: var(--white); }
  .nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
  .header-actions { display: flex; align-items: center; gap: var(--sp-2); margin-inline-start: auto; }
  .nav + .header-actions { margin-inline-start: 0; }
  .header-actions .btn--ghost { --btn-fg: var(--steel-100); --btn-bd: rgb(255 255 255 / 0.18); }
  .header-actions .btn--ghost:hover { --btn-bg: rgb(255 255 255 / 0.08); }
  .menu-toggle { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid rgb(255 255 255 / 0.18); border-radius: var(--radius-sm); background: transparent; color: var(--white); }
  .menu-toggle svg { width: 1.4rem; height: 1.4rem; }
  @media (min-width: 64rem) { .nav { display: block; } .menu-toggle { display: none; } }

  /* Mobile drawer */
  .drawer { position: fixed; inset: 0; z-index: var(--z-overlay); display: grid; grid-template-columns: 1fr min(22rem, 85vw); background: rgb(10 11 14 / 0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
  .drawer[hidden] { display: none; }
  .drawer__scrim { border: 0; background: transparent; }
  .drawer__panel { background: var(--ink-900); color: var(--steel-100); padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-6); animation: drawer-in var(--dur-base) var(--ease-out); border-left: 1px solid rgb(255 255 255 / 0.08); }
  @keyframes drawer-in { from { transform: translateX(100%); } }
  .drawer__panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
  .drawer__panel a:not(.btn) { display: block; padding: 0.75rem 0.5rem; font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 600; text-transform: uppercase; text-decoration: none; color: var(--steel-200); border-bottom: 1px solid rgb(255 255 255 / 0.06); }
  .drawer__panel a[aria-current="page"] { color: var(--red-400); }
  .drawer__close { align-self: flex-end; }

  /* ---------- Footer ---------- */
  .site-footer { background: var(--ink-950); color: var(--steel-300); padding-block: var(--sp-16) var(--sp-8); border-top: 4px solid var(--red-500); }
  .site-footer .footer-grid { display: grid; gap: var(--sp-10); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
  .site-footer h4 { color: var(--white); font-size: var(--fs-md); text-transform: uppercase; letter-spacing: var(--tracking-caps); margin-bottom: var(--sp-4); }
  .site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
  .site-footer a { text-decoration: none; color: var(--steel-300); }
  .site-footer a:hover { color: var(--white); }
  .site-footer .logo__tag { color: var(--steel-500); }
  .footer-bottom { margin-top: var(--sp-12); padding-top: var(--sp-6); border-top: 1px solid rgb(255 255 255 / 0.08); display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between; font-size: var(--fs-sm); color: var(--steel-500); }
  .footer-notice { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-4); border: 1px solid rgb(255 255 255 / 0.1); border-radius: var(--radius-md); background: rgb(255 255 255 / 0.03); font-size: var(--fs-sm); }
  .footer-notice svg { width: 1.25rem; height: 1.25rem; color: var(--red-400); flex: none; margin-top: 0.15em; }

  /* ---------- Cards ---------- */
  .card {
    background: var(--bg-elev); color: var(--fg); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: var(--sp-6); box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base);
  }
  .card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: color-mix(in oklab, var(--accent) 40%, var(--border)); }
  .card--accent-bar::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); transform: scaleY(0); transform-origin: bottom; transition: transform var(--dur-base) var(--ease-out); }
  .card--accent-bar:hover::before { transform: scaleY(1); }
  .card__icon { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent); margin-bottom: var(--sp-4); }
  .card__icon svg { width: 1.5rem; height: 1.5rem; }
  .card h3 { margin-bottom: var(--sp-2); }
  .card p { color: var(--fg-muted); font-size: var(--fs-sm); }
  .card--dark { --bg-elev: var(--ink-800); --fg: var(--steel-100); --fg-muted: var(--steel-400); --border: rgb(255 255 255 / 0.08); }

  /* Service card with big number */
  .service-card { display: grid; gap: var(--sp-3); }
  .service-card__num { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-2xl); color: var(--border-strong); line-height: 1; transition: color var(--dur-base); }
  .service-card:hover .service-card__num { color: var(--accent); }

  /* ---------- Feature photo frame ---------- */
  .frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: var(--ar, 4 / 3); background: var(--ink-800); }
  .frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
  .frame:hover img { transform: scale(1.04); }
  .frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgb(10 11 14 / 0.6)); pointer-events: none; }
  .frame__caption { position: absolute; inset: auto 0 0 0; padding: var(--sp-5); color: var(--white); z-index: 1; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); text-shadow: 0 1px 8px rgb(0 0 0 / 0.5); }
  .frame--slant { clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%); border-radius: 0; }
  .frame--accent::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--red-500); z-index: 2; }

  /* ---------- Chips / badges ---------- */
  .chip { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.35rem 0.75rem; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); letter-spacing: 0.04em; text-transform: uppercase; background: var(--bg-elev); color: var(--fg); }
  .chip--accent { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
  .badge { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.2rem 0.55rem; border-radius: var(--radius-sm); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; }
  .badge--success { background: color-mix(in oklab, var(--success) 14%, transparent); color: var(--success); }
  .badge--warning { background: color-mix(in oklab, var(--warning) 16%, transparent); color: #9a5b00; }
  .badge--info { background: color-mix(in oklab, var(--info) 12%, transparent); color: var(--info); }
  .badge--danger { background: color-mix(in oklab, var(--danger) 12%, transparent); color: var(--danger); }
  .badge--neutral { background: var(--bg-alt); color: var(--fg-muted); border: 1px solid var(--border); }
  [data-surface="dark"] .badge--warning { color: #ffc35c; }

  /* Demo banner */
  .demo-banner { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-md); background: color-mix(in oklab, var(--warning) 14%, var(--bg-elev)); border: 1px dashed color-mix(in oklab, var(--warning) 60%, transparent); font-size: var(--fs-sm); color: var(--fg); }
  .demo-banner svg { width: 1.25rem; height: 1.25rem; color: #b45309; flex: none; }
  .demo-banner strong { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; }

  /* ---------- Forms ---------- */
  .field { display: grid; gap: var(--sp-2); }
  .field label, .field__label { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); }
  .field label .req { color: var(--accent); }
  .input, .select, .textarea {
    width: 100%; padding: 0.8rem 0.95rem; border-radius: var(--radius-sm); border: 1.5px solid var(--border-strong); background: var(--bg-elev); color: var(--fg);
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  }
  .input:hover, .select:hover, .textarea:hover { border-color: var(--fg-subtle); }
  .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring); }
  .input[aria-invalid="true"] { border-color: var(--danger); }
  .textarea { min-height: 8rem; resize: vertical; }
  .select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--fg-muted) 50%), linear-gradient(135deg, var(--fg-muted) 50%, transparent 50%); background-position: calc(100% - 1.2rem) 55%, calc(100% - 0.85rem) 55%; background-size: 0.35rem 0.35rem; background-repeat: no-repeat; padding-right: 2.5rem; }
  .field__hint { font-size: var(--fs-xs); color: var(--fg-subtle); }
  .field__error { font-size: var(--fs-xs); color: var(--danger); display: none; }
  .field[data-invalid] .field__error { display: block; }
  .form-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
  .form-grid .field--full { grid-column: 1 / -1; }
  .plate { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.12em; }

  /* Selectable option tiles (radio-like) */
  .option-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); }
  .option { position: relative; display: grid; gap: var(--sp-2); padding: var(--sp-4); border-radius: var(--radius-md); border: 1.5px solid var(--border-strong); background: var(--bg-elev); cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast) var(--ease-out); }
  .option:hover { border-color: var(--fg-subtle); transform: translateY(-2px); }
  .option input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
  .option svg { width: 1.6rem; height: 1.6rem; color: var(--accent); }
  .option__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); line-height: 1.1; }
  .option__desc { font-size: var(--fs-xs); color: var(--fg-muted); }
  .option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px var(--ring); }
  .option:has(input:focus-visible) { outline: 3px solid var(--ring); outline-offset: 2px; }

  /* Time slots */
  .slots { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr)); }
  .slot { padding: 0.6rem 0.4rem; border-radius: var(--radius-sm); border: 1.5px solid var(--border-strong); background: var(--bg-elev); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); text-align: center; transition: all var(--dur-fast); }
  .slot:hover:not([disabled]) { border-color: var(--accent); color: var(--accent); }
  .slot[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
  .slot[disabled] { opacity: 0.35; text-decoration: line-through; cursor: not-allowed; }

  /* Calendar */
  .cal { display: grid; gap: var(--sp-3); }
  .cal__head { display: flex; align-items: center; justify-content: space-between; }
  .cal__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl); text-transform: capitalize; }
  .cal__nav { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: var(--radius-sm); border: 1.5px solid var(--border-strong); background: var(--bg-elev); }
  .cal__nav svg { width: 1.1rem; height: 1.1rem; }
  .cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.3rem; }
  .cal__dow { text-align: center; font-family: var(--font-display); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-subtle); padding-block: 0.25rem; }
  .cal__day { aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--radius-sm); border: 1.5px solid transparent; background: transparent; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md); position: relative; transition: all var(--dur-fast); }
  .cal__day[data-available] { background: var(--bg-elev); border-color: var(--border); }
  .cal__day[data-available]:hover { border-color: var(--accent); color: var(--accent); }
  .cal__day[data-available][data-few]::after { content: ""; position: absolute; bottom: 0.3rem; width: 0.3rem; height: 0.3rem; border-radius: 50%; background: var(--warning); }
  .cal__day[disabled] { color: var(--fg-subtle); opacity: 0.45; cursor: not-allowed; }
  .cal__day[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
  .cal__day[data-today] { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }

  /* Stepper */
  .stepper { display: grid; grid-template-columns: repeat(var(--steps, 5), 1fr); gap: var(--sp-2); counter-reset: step; margin-bottom: var(--sp-8); }
  .stepper__item { display: grid; gap: var(--sp-2); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-subtle); }
  .stepper__item::before { content: ""; height: 4px; border-radius: 2px; background: var(--border); transition: background var(--dur-base); }
  .stepper__item[data-state="done"] { color: var(--fg-muted); }
  .stepper__item[data-state="done"]::before, .stepper__item[data-state="active"]::before { background: var(--accent); }
  .stepper__item[data-state="active"] { color: var(--accent); }
  @media (max-width: 40rem) { .stepper__item span { display: none; } }

  /* Summary list */
  .summary { display: grid; gap: var(--sp-3); }
  .summary__row { display: grid; grid-template-columns: 9rem 1fr; gap: var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border); }
  .summary__row dt { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--fs-xs); color: var(--fg-subtle); font-weight: 600; }
  .summary__row dd { margin: 0; font-weight: 500; }

  /* Ticket */
  .ticket { border: 2px dashed var(--border-strong); border-radius: var(--radius-lg); padding: var(--sp-6); text-align: center; display: grid; gap: var(--sp-2); background: repeating-linear-gradient(-45deg, transparent 0 12px, var(--bg-alt) 12px 13px); }
  .ticket__code { font-family: var(--font-mono); font-size: var(--fs-2xl); letter-spacing: 0.2em; font-weight: 700; color: var(--accent); }

  /* ---------- Stats ---------- */
  .stats { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
  .stat { border-left: 3px solid var(--accent); padding-left: var(--sp-4); }
  .stat__value { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-3xl); line-height: 1; letter-spacing: -0.02em; }
  .stat__value small { font-size: 0.5em; color: var(--accent); vertical-align: top; }
  .stat__label { color: var(--fg-muted); font-size: var(--fs-sm); margin-top: var(--sp-1); }

  /* ---------- Marquee ---------- */
  .marquee { --gap: var(--sp-10); overflow: hidden; display: flex; gap: var(--gap); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
  .marquee__track { display: flex; gap: var(--gap); flex: none; min-width: 100%; justify-content: space-around; animation: marquee 40s linear infinite; }
  .marquee:hover .marquee__track { animation-play-state: paused; }
  .marquee__item { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-2xl); text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-subtle); white-space: nowrap; transition: color var(--dur-base); }
  .marquee__item:hover { color: var(--fg); }
  @keyframes marquee { to { transform: translateX(calc(-100% - var(--gap))); } }

  /* ---------- Icon list ---------- */
  .icon-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
  .icon-list li { display: flex; gap: var(--sp-3); align-items: flex-start; }
  .icon-list svg { width: 1.35rem; height: 1.35rem; color: var(--accent); flex: none; margin-top: 0.1em; }

  /* Contact row */
  .contact-row { display: flex; gap: var(--sp-4); align-items: flex-start; padding: var(--sp-4) 0; border-bottom: 1px solid var(--border); }
  .contact-row:last-child { border-bottom: 0; }
  .contact-row__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent); flex: none; }
  .contact-row__icon svg { width: 1.3rem; height: 1.3rem; }
  .contact-row strong { display: block; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--fs-xs); color: var(--fg-subtle); font-weight: 600; margin-bottom: 0.15rem; }
  .contact-row a { text-decoration: none; font-weight: 500; }
  .contact-row a:hover { color: var(--accent); }

  /* Timeline */
  .timeline { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: var(--sp-8); }
  .timeline::before { content: ""; position: absolute; left: 0.6rem; top: 0.5rem; bottom: 0.5rem; width: 2px; background: var(--border-strong); }
  .timeline li { position: relative; padding-left: var(--sp-10); }
  .timeline li::before { content: ""; position: absolute; left: 0; top: 0.35rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--bg); border: 3px solid var(--accent); box-shadow: 0 0 0 4px var(--bg); }
  .timeline__year { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-2xl); color: var(--accent); line-height: 1; }
  .timeline h3 { margin: var(--sp-1) 0 var(--sp-2); }
  .timeline p { color: var(--fg-muted); }

  /* Toast */
  .toast { position: fixed; left: 50%; bottom: var(--sp-6); transform: translate(-50%, 20px); z-index: var(--z-toast); background: var(--ink-900); color: var(--white); padding: var(--sp-3) var(--sp-5); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); opacity: 0; transition: opacity var(--dur-base), transform var(--dur-base) var(--ease-out); pointer-events: none; display: flex; gap: var(--sp-3); align-items: center; font-size: var(--fs-sm); max-width: min(90vw, 28rem); }
  .toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
  .toast svg { width: 1.2rem; height: 1.2rem; color: var(--whatsapp); flex: none; }

  /* Floating WhatsApp */
  .wa-float { position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: var(--z-header); display: inline-flex; align-items: center; gap: var(--sp-2); padding: 0.7rem 1rem 0.7rem 0.8rem; border-radius: var(--radius-pill); background: var(--whatsapp); color: #05301a; text-decoration: none; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; box-shadow: 0 10px 30px -8px rgb(37 211 102 / 0.7); transition: transform var(--dur-base) var(--ease-spring); }
  .wa-float:hover { transform: scale(1.05); }
  .wa-float svg { width: 1.5rem; height: 1.5rem; }
  .wa-float::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--whatsapp); animation: wa-pulse 2.2s ease-out infinite; }
  @keyframes wa-pulse { to { transform: scale(1.35); opacity: 0; } }
  @media (max-width: 40rem) { .wa-float span { display: none; } .wa-float { padding: 0.85rem; } }

  /* Accordion (native details) */
  .accordion { border-top: 1px solid var(--border); }
  .accordion details { border-bottom: 1px solid var(--border); }
  .accordion summary { list-style: none; cursor: pointer; padding: var(--sp-4) 0; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); }
  .accordion summary::-webkit-details-marker { display: none; }
  .accordion summary::after { content: "+"; font-size: 1.5em; color: var(--accent); transition: transform var(--dur-base) var(--ease-out); line-height: 1; }
  .accordion details[open] summary::after { transform: rotate(45deg); }
  .accordion details > :not(summary) { padding-bottom: var(--sp-4); color: var(--fg-muted); }
  .accordion details::details-content { block-size: 0; overflow: hidden; transition: block-size var(--dur-base) var(--ease-out), content-visibility var(--dur-base) allow-discrete; }
  .accordion details[open]::details-content { block-size: auto; }

  /* Table */
  .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); }
  .table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
  .table th, .table td { text-align: left; padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--border); vertical-align: top; }
  .table th { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--fs-xs); color: var(--fg-subtle); background: var(--bg-alt); }
  .table tr:last-child td { border-bottom: 0; }

  /* Tabs */
  .tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--border); margin-bottom: var(--sp-6); overflow-x: auto; }
  .tab { padding: 0.7rem 1rem; border: 0; background: none; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); text-transform: uppercase; letter-spacing: 0.03em; color: var(--fg-muted); border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
  .tab[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
  .tabpanel[hidden] { display: none; }
}

@layer components {
  @media (max-width: 40rem) { .hide-sm { display: none; } }
  body.is-scrolled .site-header { box-shadow: 0 8px 30px -12px rgb(0 0 0 / 0.6); }
  .nav a[href="design-system.html"] { display: none; }
}