.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 3rem;
  border: 1px solid transparent;
  padding: .72rem 1.05rem;
  border-radius: var(--radius-small);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .055em;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.button svg,
.text-link svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.button .icon-whatsapp { display: block; width: 1.1rem; height: 1.1rem; flex: 0 0 1.1rem; object-fit: contain; transition: transform var(--transition-fast); }
.button:hover { transform: translateY(-2px); }
.button svg { transition: transform var(--transition-fast); }
.button:hover svg,
.button:hover .icon-whatsapp { transform: translateX(.1rem); }
.button:active { transform: translateY(0); }
.button-primary { background: var(--color-primary); color: var(--color-white); }
.button-primary:hover { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-primary-deep); }
.button-primary .icon-whatsapp { filter: brightness(0) invert(1); }
.button-accent:hover .icon-whatsapp { filter: brightness(0) invert(1); }
.button-accent { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-primary-deep); }
.button-accent:hover { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-white); }
.button-light { background: var(--color-white); color: var(--color-primary); }
.button-light:hover { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-primary-deep); }
.button-white { background: var(--color-white); color: var(--color-primary); }
.button-white:hover { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-primary-deep); }
.button-outline { border-color: var(--color-primary); color: var(--color-primary); }
.button-outline:hover { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-primary-deep); }
.button-ghost { border-color: var(--color-white-soft); color: var(--color-white); }
.button-ghost:hover { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-primary-deep); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: .48rem;
  color: var(--color-primary);
  font-size: .77rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.text-link svg { transition: transform var(--transition-fast); }
.text-link:hover svg { color: var(--color-accent-deep); transform: translateX(.25rem); }

.tag-list { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.7rem 0 1.9rem; }
.tag-list li { border: 1px solid var(--color-line); padding: .34rem .65rem; color: var(--color-primary); font-size: .77rem; font-weight: 500; }

.check-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem 1.4rem; margin: 1.7rem 0; color: var(--color-primary); font-size: .9rem; font-weight: 500; }
.check-list li { display: flex; align-items: center; gap: .48rem; }
.check-list svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; transition: transform var(--transition-fast), stroke var(--transition-fast); }
.check-list li:hover svg { transform: scale(1.1); stroke: var(--color-accent-deep); }

.faq-list { border-top: 1px solid var(--color-line); }
.faq-list details { border-bottom: 1px solid var(--color-line); transition: background var(--transition-fast); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.18rem 0; cursor: pointer; color: var(--color-primary); font-family: var(--font-heading); font-size: 1rem; font-weight: 600; line-height: 1.35; list-style: none; transition: color var(--transition-fast), padding-inline var(--transition-fast); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { position: relative; width: 1rem; height: 1rem; flex: 0 0 1rem; }
.faq-list summary span::before,
.faq-list summary span::after { position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: currentColor; content: ""; transition: transform var(--transition-fast); }
.faq-list summary span::after { transform: rotate(90deg); }
.faq-list details[open] summary span::after { transform: rotate(0deg); }
.faq-list details[open] { background: var(--color-accent-soft); }
.faq-list details[open] summary { color: var(--color-primary-deep); }
@media (hover: hover) { .faq-list summary:hover { color: var(--color-accent-deep); padding-inline: .5rem; } }
.faq-list details p { padding: 0 2rem 1.25rem 0; color: var(--color-muted); font-size: .88rem; line-height: 1.65; }

.contact-fallback { font-size: .76rem; line-height: 1.55; }
.contact-fallback a { border-bottom: 1px solid var(--color-contact-line); color: var(--color-white); }

.toast { position: fixed; z-index: var(--z-toast); right: 1rem; bottom: 5.1rem; max-width: min(22rem, calc(100vw - 2rem)); padding: .8rem 1rem; border-radius: var(--radius-small); background: var(--color-primary); color: var(--color-white); font-size: .88rem; opacity: 0; pointer-events: none; transform: translateY(.75rem); transition: opacity var(--transition-fast), transform var(--transition-fast); }
.toast.is-visible { opacity: 1; transform: translateY(0); }

.whatsapp-float { position: fixed; z-index: var(--z-floating); right: 1.2rem; bottom: 1.2rem; display: grid; width: 3.1rem; height: 3.1rem; place-items: center; border: 1px solid var(--color-white-soft); border-radius: 50%; background: var(--color-primary); box-shadow: var(--shadow-soft); color: var(--color-white); transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast); }
.whatsapp-float:hover { transform: translateY(-3px); background: var(--color-accent); color: var(--color-primary-deep); }
.whatsapp-float svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.whatsapp-float .icon-whatsapp { display: block; width: 1.5rem; height: 1.5rem; object-fit: contain; filter: brightness(0) invert(1); }