/**
 * Tua Festa — Design Tokens
 * Fonte: Elementor Kit 6 + página 9
 */

:root {
  /* ── Cores ── */
  --tf-color-primary: #E72196;
  --tf-color-secondary: #AE0067;
  --tf-color-accent: #FF63BF;
  --tf-color-pink: #E03D84;
  --tf-color-purple: #900F99;
  --tf-color-purple-glow: #A600DA;
  --tf-color-white: #FFFFFF;
  --tf-color-black: #000000;
  --tf-color-surface: #101010;
  --tf-color-surface-border: #342562;
  --tf-color-text: #FFFFFF;
  --tf-color-text-muted: rgba(255, 255, 255, 0.85);
  --tf-color-icon: var(--tf-color-purple);

  /* ── Gradientes ── */
  --tf-gradient-brand: linear-gradient(56deg, #E03D84 0%, #900F99 100%);
  --tf-gradient-brand-hover: linear-gradient(145deg, #E03D84 0%, #900F99 100%);
  --tf-gradient-brand-frame: linear-gradient(136deg, #E03D84 0%, #900F99 100%);
  --tf-gradient-hero-overlay: radial-gradient(at center center, #000000 34%, rgba(33, 231, 37, 0.09) 100%);

  /* ── Tipografia ── */
  --tf-font-heading: "Roboto", sans-serif;
  --tf-font-body: "Montserrat", sans-serif;
  --tf-font-accent: "Roboto Slab", serif;

  --tf-text-xs: 12px;
  --tf-text-sm: 13px;
  --tf-text-base: 16px;
  --tf-text-md: 18px;
  --tf-text-lg: 46px;

  --tf-weight-light: 300;
  --tf-weight-regular: 400;
  --tf-weight-medium: 500;
  --tf-weight-semibold: 600;
  --tf-weight-bold: 700;

  --tf-leading-tight: 1.2;
  --tf-leading-normal: 1.4;
  --tf-leading-relaxed: 1.5;

  /* ── Espaçamento ── */
  --tf-space-1: 10px;
  --tf-space-2: 15px;
  --tf-space-3: 20px;
  --tf-space-4: 30px;
  --tf-space-5: 50px;
  --tf-space-6: 60px;
  --tf-space-7: 90px;
  --tf-space-8: 100px;

  /* ── Border radius ── */
  --tf-radius-sm: 10px;
  --tf-radius-md: 20px;
  --tf-radius-pill: 50px;
  --tf-radius-circle: 500px;

  /* ── Sombras ── */
  --tf-shadow-button: 0px 5px 100px -21px #A600DA;
  --tf-shadow-button-alt: 0px 5px 96px -4px #1B1B1B;
  --tf-shadow-glow: 0px 0px 100px -5px #900F99;

  /* ── Layout ── */
  --tf-container: 1140px;
  --tf-container-narrow: 1000px;
  --tf-container-content: 770px;
  --tf-container-footer: 700px;

  /* ── Transições ── */
  --tf-transition: 0.3s ease;

  /* ── Bordas ── */
  --tf-border-brand: 1px solid var(--tf-color-pink);
}

/**
 * Tua Festa — Base styles
 */


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

body {
  margin: 0;
  font-family: var(--tf-font-body);
  font-size: var(--tf-text-base);
  font-weight: var(--tf-weight-light);
  line-height: var(--tf-leading-relaxed);
  color: var(--tf-color-text);
  background-color: var(--tf-color-black);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ── Tipografia ── */

.tf-display {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-text-lg);
  font-weight: var(--tf-weight-semibold);
  line-height: var(--tf-leading-tight);
  color: var(--tf-color-white);
  margin: 0;
}

.tf-heading-1,
.tf-heading-2 {
  font-family: var(--tf-font-heading);
  font-weight: var(--tf-weight-semibold);
  font-style: italic;
  color: var(--tf-color-white);
  margin: 0 0 var(--tf-space-4);
}

.tf-heading-1 {
  font-size: var(--tf-text-lg);
  font-style: normal;
}

.tf-heading-2 {
  font-size: var(--tf-text-md);
  text-align: center;
}

.tf-heading-3,
.tf-heading-4 {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-text-md);
  font-weight: var(--tf-weight-semibold);
  color: var(--tf-color-white);
  margin: 0;
}

.tf-body {
  font-family: var(--tf-font-body);
  font-size: var(--tf-text-base);
  font-weight: var(--tf-weight-light);
  color: var(--tf-color-white);
  margin: 0;
}

.tf-caption {
  font-family: var(--tf-font-body);
  font-size: var(--tf-text-xs);
  font-weight: var(--tf-weight-light);
  line-height: var(--tf-leading-normal);
  color: var(--tf-color-white);
}

.tf-footer-text {
  font-family: var(--tf-font-body);
  font-size: var(--tf-text-sm);
  font-weight: var(--tf-weight-light);
  line-height: var(--tf-leading-normal);
  color: var(--tf-color-white);
  text-align: center;
}

/* ── Layout ── */

.tf-container {
  width: 100%;
  max-width: var(--tf-container);
  margin-inline: auto;
  padding-inline: var(--tf-space-3);
}

.tf-container--narrow {
  max-width: var(--tf-container-narrow);
}

.tf-container--content {
  max-width: var(--tf-container-content);
}

.tf-container--footer {
  max-width: var(--tf-container-footer);
}

.tf-section {
  padding-block: var(--tf-space-8);
}

.tf-section--dark {
  background-color: var(--tf-color-surface);
}

.tf-section--black {
  background-color: var(--tf-color-black);
}

.tf-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--tf-space-1);
}

.tf-grid-products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--tf-space-1);
}

@media (max-width: 767px) {
  .tf-display {
    font-size: 32px;
  }

  .tf-section {
    padding-block: var(--tf-space-5);
  }

  .tf-grid-4,
  .tf-grid-products {
    grid-template-columns: repeat(2, 1fr);
  }
}

/**
 * Tua Festa — Componentes
 */

/* ── Top Bar ── */

.tf-topbar {
  background: var(--tf-gradient-brand);
  padding: var(--tf-space-2) var(--tf-space-3);
  text-align: center;
}

.tf-topbar__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--tf-font-body);
  font-size: var(--tf-text-base);
  font-weight: var(--tf-weight-regular);
  color: var(--tf-color-white);
  transition: opacity var(--tf-transition);
}

.tf-topbar__link:hover {
  opacity: 0.9;
}

/* ── Header ── */

.tf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--tf-color-black);
  padding: var(--tf-space-3);
}

.tf-header__logo {
  max-width: 37%;
}

/* ── Botões ── */

.tf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: var(--tf-font-body);
  font-weight: var(--tf-weight-bold);
  color: var(--tf-color-white);
  background-color: var(--tf-color-primary);
  transition: color var(--tf-transition), box-shadow var(--tf-transition), transform var(--tf-transition);
}

.tf-btn:hover,
.tf-btn:focus {
  color: var(--tf-color-white);
}

.tf-btn--sm {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-text-base);
  font-style: italic;
  font-weight: var(--tf-weight-bold);
  background-color: var(--tf-color-primary);
  padding: 10px 24px;
  border-radius: var(--tf-radius-sm);
}

.tf-btn--lg {
  font-size: var(--tf-text-md);
  padding: var(--tf-space-3) var(--tf-space-5);
  border-radius: var(--tf-radius-pill);
  box-shadow: var(--tf-shadow-button);
}

.tf-btn--lg:hover {
  box-shadow: var(--tf-shadow-button), 0 0 20px rgba(167, 0, 218, 0.4);
}

/* ── Hero ── */

.tf-hero {
  position: relative;
  background-color: var(--tf-color-black);
  padding: var(--tf-space-5) 0 var(--tf-space-8);
}

.tf-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--tf-gradient-hero-overlay);
  opacity: 0.11;
  pointer-events: none;
}

.tf-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 55% 45%;
  gap: var(--tf-space-1);
  align-items: center;
  max-width: var(--tf-container-narrow);
  margin-inline: auto;
  padding-inline: var(--tf-space-3);
}

.tf-hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--tf-space-3);
}

.tf-hero__subtitle {
  max-width: 90%;
}

.tf-hero__image-frame {
  background: var(--tf-gradient-brand-frame);
  border-radius: var(--tf-radius-circle);
  box-shadow: var(--tf-shadow-glow);
  padding: 4px;
  overflow: hidden;
}

@media (max-width: 767px) {
  .tf-hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .tf-hero__subtitle {
    max-width: 100%;
    margin-inline: auto;
  }

  .tf-hero__image-frame {
    margin-inline: 15%;
  }
}

/* ── Trust badges (icon list inline) ── */

.tf-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tf-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.tf-trust__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--tf-text-xs);
  font-weight: var(--tf-weight-light);
  color: var(--tf-color-white);
}

.tf-trust__icon {
  width: 14px;
  height: 14px;
  fill: var(--tf-color-icon);
  flex-shrink: 0;
}

/* ── Feature Card (benefícios) ── */

.tf-feature-card {
  background-color: var(--tf-color-black);
  border: var(--tf-border-brand);
  border-radius: var(--tf-radius-sm);
  padding: var(--tf-space-3);
  margin: var(--tf-space-1);
  text-align: center;
  transition: background var(--tf-transition), border-color var(--tf-transition);
}

.tf-feature-card:hover {
  background: var(--tf-gradient-brand-hover);
  border-color: transparent;
}

.tf-feature-card__icon {
  font-size: 31px;
  color: var(--tf-color-primary);
  margin-bottom: var(--tf-space-2);
}

.tf-feature-card__icon svg {
  width: 31px;
  height: 31px;
  fill: var(--tf-color-primary);
}

.tf-feature-card__text {
  font-size: var(--tf-text-base);
  font-weight: var(--tf-weight-light);
  color: var(--tf-color-white);
}

/* ── Product Card ── */

.tf-product-card {
  display: flex;
  flex-direction: column;
  gap: var(--tf-space-2);
  padding: var(--tf-space-1);
}

.tf-product-card__image {
  border-radius: var(--tf-radius-md);
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.tf-product-card__title {
  text-align: center;
}

/* ── Accordion (FAQ) ── */

.tf-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--tf-space-1);
}

.tf-accordion__item {
  background-color: var(--tf-color-surface);
  border-radius: var(--tf-radius-sm);
  overflow: hidden;
}

.tf-accordion__trigger {
  display: flex;
  align-items: center;
  gap: var(--tf-space-2);
  width: 100%;
  padding: var(--tf-space-2);
  background: var(--tf-color-surface);
  border: none;
  cursor: pointer;
  font-family: var(--tf-font-body);
  font-size: var(--tf-text-base);
  font-weight: var(--tf-weight-semibold);
  line-height: var(--tf-leading-normal);
  color: var(--tf-color-white);
  text-align: left;
  transition: color var(--tf-transition);
}

.tf-accordion__trigger:hover,
.tf-accordion__item.is-open .tf-accordion__trigger {
  color: var(--tf-color-pink);
}

.tf-accordion__icon {
  width: 16px;
  height: 16px;
  fill: var(--tf-color-purple);
  flex-shrink: 0;
  transition: transform var(--tf-transition);
}

.tf-accordion__item.is-open .tf-accordion__icon {
  transform: rotate(180deg);
}

.tf-accordion__panel {
  display: none;
  padding: 0 var(--tf-space-2) var(--tf-space-2);
  font-size: var(--tf-text-base);
  font-weight: var(--tf-weight-light);
  line-height: var(--tf-leading-normal);
  color: var(--tf-color-white);
}

.tf-accordion__item.is-open .tf-accordion__panel {
  display: block;
}

/* ── Steps list (como funciona) ── */

.tf-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--tf-space-3);
}

.tf-steps__item {
  display: flex;
  align-items: flex-start;
  gap: var(--tf-space-2);
  font-size: var(--tf-text-md);
  font-weight: var(--tf-weight-medium);
  color: var(--tf-color-white);
}

.tf-steps__check {
  width: 35px;
  height: 35px;
  fill: var(--tf-color-primary);
  flex-shrink: 0;
}

/* ── Footer ── */

.tf-footer {
  background-color: var(--tf-color-black);
  padding: var(--tf-space-3) 0;
  text-align: center;
}

/* ── Formulários (cotação) ── */

.tf-form {
  display: flex;
  flex-direction: column;
  gap: var(--tf-space-3);
}

.tf-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tf-label {
  font-family: var(--tf-font-body);
  font-size: var(--tf-text-base);
  font-weight: var(--tf-weight-medium);
  color: var(--tf-color-white);
}

/* Elemento + classe para vencer regras do tema Elementor (input[type=*] { border: #666 }) */
input.tf-input,
select.tf-select,
textarea.tf-textarea {
  width: 100%;
  padding: 14px var(--tf-space-2);
  font-family: var(--tf-font-body);
  font-size: var(--tf-text-base);
  font-weight: var(--tf-weight-regular);
  color: var(--tf-color-white);
  background-color: var(--tf-color-surface);
  border: var(--tf-border-brand);
  border-radius: var(--tf-radius-sm);
  outline: none;
  transition: border-color var(--tf-transition), box-shadow var(--tf-transition);
}

input.tf-input::placeholder,
textarea.tf-textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

input.tf-input:focus,
select.tf-select:focus,
textarea.tf-textarea:focus {
  border-color: var(--tf-color-primary);
  box-shadow: 0 0 0 3px rgba(231, 33, 150, 0.2);
}

input.tf-input[type="date"] {
  color-scheme: dark;
}

.tf-textarea {
  min-height: 120px;
  resize: vertical;
}

select.tf-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' fill='%23900F99'%3E%3Cpath d='M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  padding-right: 40px;
}

.tf-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tf-space-3);
}

@media (max-width: 767px) {
  .tf-form__row {
    grid-template-columns: 1fr;
  }
}

.tf-form-card {
  background-color: var(--tf-color-surface);
  border: var(--tf-border-brand);
  border-radius: var(--tf-radius-sm);
  padding: var(--tf-space-5);
  max-width: var(--tf-container-content);
  margin-inline: auto;
}

.tf-form-card__title {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-text-md);
  font-weight: var(--tf-weight-semibold);
  font-style: italic;
  color: var(--tf-color-white);
  margin: 0 0 var(--tf-space-4);
  text-align: center;
}

/* ── CTA Section ── */

.tf-cta {
  background-color: var(--tf-color-black);
  padding: var(--tf-space-4) 0 var(--tf-space-7);
  text-align: center;
}

.tf-cta__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tf-space-2);
}

/* ── Section com gradiente de fundo (FAQ) ── */

.tf-section--faq {
  position: relative;
  background-color: var(--tf-color-black);
  padding: var(--tf-space-8) var(--tf-space-3);
}

.tf-section--faq::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  opacity: 0.11;
  pointer-events: none;
}