/* ═══════════════════════════════════════════════════════════════════
   4-components.css — Componentes Visuais
   Blocos reutilizáveis: cards, pricing, nav, forms, gallery, etc.
   Cada seção tem um comentário de cabeçalho identificando o componente.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Menu lateral ────────────────────────────────────────────────── */
.side_menu { display: block !important; }

/* ── Overlay "velvet" (fundo degradê) ────────────────────────────── */
.bg_velvet {
  background: radial-gradient(
    ellipse at 70% 50%,
    rgba(253, 208,  37, 0.18)  0%,
    rgba(118, 165, 175, 0.08) 40%,
    rgba( 54, 101, 110, 0.12) 70%,
    rgba( 26,  28,  23, 0.06) 100%
  );
  opacity: 1;
}

/* ── Tabs de navegação ───────────────────────────────────────────── */
.nav-tabs .nav-link {
  color: var(--clr-ink-muted);
  font-weight: 600;
  border: 1px solid var(--clr-surface-border);
  border-radius: var(--radius-sm);
  margin-right: var(--space-2);
  padding: var(--space-2) var(--space-4);
}

.nav-tabs .nav-link.active {
  background: var(--clr-apricot) !important;
  color: var(--clr-white) !important;
  border-color: var(--clr-apricot) !important;
}

/* ── Botões e links do tema ──────────────────────────────────────── */
._btn, ._btn span {
  background-color: var(--clr-apricot);
  border-color:     var(--clr-apricot);
  color:            var(--clr-yellow);
}

._link, ._link span, ._link span.material-symbols-outlined {
  color: var(--clr-apricot);
}

._btn.animate-btn span { color: var(--clr-yellow); }

._link:hover, ._link:hover span,
.side_menu ul li a:hover,
.side_menu ul li a.active { color: var(--clr-teal); }

/* ── Redes sociais (header) ──────────────────────────────────────── */
.top_header ul.left li a[href*="facebook"] {
  color: var(--clr-facebook);
  font-weight: 700;
}
.top_header ul.left li a[href*="facebook"]:hover { color: var(--clr-facebook-h); }

.top_header ul.left li a[href*="instagram"] {
  color: var(--clr-instagram);
  font-weight: 700;
}
.top_header ul.left li a[href*="instagram"]:hover { color: var(--clr-instagram-h); }

/* ── Hero da homepage ────────────────────────────────────────────── */
.home_sec .home_div h1 { color: var(--clr-ink); }

.home_sec .home_div ul.inner_page_link li {
  border-bottom: 1px solid var(--clr-ink-ghost);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
}

.home_sec .home_div ul.inner_page_link li:last-child { border-bottom: none; }

.home_sec .home_div ul.inner_page_link li a {
  color: var(--clr-ink);
  font-weight: 600;
  font-size: var(--text-base);
  text-decoration: none;
  transition: color var(--duration-s);
}

.home_sec .home_div ul.inner_page_link li a:hover { color: var(--clr-apricot); }

.home_sec .home_div ul.inner_page_link li::after {
  background-color: var(--clr-yellow);
}

/* ── Headings de seção ───────────────────────────────────────────── */
.what_wedo_sec .sec_head h2, .service_sec  .sec_head h2,
.protfolio_sec .sec_head h2, .blog_sec     .sec_head h2,
.contact_sec   .sec_head h2 { color: var(--clr-ink); }

/* ── Texto de corpo das seções ───────────────────────────────────── */
.what_wedo_sec .content_div p, .service_sec  .content_div p,
.protfolio_sec .content_div p, .blog_sec     .content_div p,
.contact_sec   .content_div p {
  color: var(--clr-ink-muted);
  font-size: var(--text-base);
  line-height: var(--leading-loose);
}

/* ── Cards de serviço / item ─────────────────────────────────────── */
.item_div {
  border: 1px solid var(--clr-surface-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--clr-surface-lowest);
}

.img_content figure {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  overflow: hidden;
}

.img_content figure img,
.img_content figure .lazyload {
  width: 100%; height: auto; display: block;
}

/* ── Cards de blog ───────────────────────────────────────────────── */
.blog_content {
  border-radius: var(--radius-md);
  overflow: hidden;
}

.blog_content a { color: var(--clr-ink); text-decoration: none; }

.blog_content h3 {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--clr-ink);
  line-height: var(--leading-snug);
}

.blog_content .date_rtime p {
  font-size: var(--text-sm);
  color: var(--clr-ink-muted);
}

/* ── Depoimentos / portfolio ─────────────────────────────────────── */
.port_head h2 { font-size: var(--text-xl); font-weight: 700; color: var(--clr-ink); }

.port_content p {
  font-size: 0.95rem;
  color: var(--clr-ink-muted);
  line-height: var(--leading-loose);
  font-style: italic;
}

/* ── Inputs de formulário ────────────────────────────────────────── */
.form-input {
  border-radius: var(--radius-sm);
  border: 1px solid rgba(209, 198, 172, 0.50);
  background: var(--clr-surface-low);
  color: var(--clr-ink);
  font-size: 0.95rem;
  padding: var(--space-3) var(--space-4);
  transition: border-color var(--duration-s), background var(--duration-s);
}

.form-input:focus {
  border-color: var(--clr-yellow);
  background: var(--clr-surface-lowest);
  outline: none;
}

.form-label { color: var(--clr-ink); font-weight: 600; font-size: 0.9rem; }

/* ── Sidebar das páginas de preços (visual) ──────────────────────── */
.service_inner_page.inner_page.inner_content .service_content .heading,
.service_inner_page.inner_page.inner_content .timeline_content .heading {
  background: rgba(27, 28, 23, 0.95);
  box-shadow: var(--shadow-inset);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

@media (max-width: 1023.98px) {
  .service_inner_page.inner_page.inner_content .timeline_content .heading {
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }
}

/* Texto dentro da sidebar dark */
.service_page .service_head_div .heading h1,
.service_page .service_content  .heading h1  { 
  color: var(--clr-white);
  font-size: clamp(1.75rem, 3.5vw, 2.25rem) !important;
}

.service_page .service_head_div .heading label,
.service_page .service_content  .heading label {
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--clr-yellow);
  margin-bottom: var(--space-4);
}

.service_page .service_head_div .heading p,
.service_page .service_content  .heading p {
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.70);
  line-height: var(--leading-body);
  margin-bottom: var(--space-2);
}

.service_page .service_head_div .heading a._link,
.service_page .service_content  .heading a._link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--clr-yellow);
  font-weight: 600;
  text-decoration: none;
  margin-top: var(--space-5);
}

.service_page .service_head_div .heading a._link:hover,
.service_page .service_content  .heading a._link:hover { color: var(--clr-white); }

/* ── Área de conteúdo das páginas de preços ──────────────────────── */
.service_inner_page.inner_page.inner_content .service_content .contents_div {
  background: var(--clr-teal-body);
}

/* ── Pricing cards ───────────────────────────────────────────────── */
.pricing {
  width: 280px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  background: var(--clr-surface-lowest);
  color: var(--clr-ink);
  transition: transform var(--duration-m) var(--ease-out),
              box-shadow var(--duration-m) var(--ease-out);
}

.pricing:hover {
  transform: translateY(-0.5rem);
  box-shadow: var(--shadow-card-h);
}

.pricing_highlighted {
  box-shadow: 0 8px 32px var(--clr-yellow-glow);
  transform: scale(1.05);
}

.pricing_highlighted:hover {
  transform: scale(1.05) translateY(-0.5rem);
}

@media (max-width: 1023.98px) {
  .pricing { width: 90%; max-width: 320px; }
  .pricing_highlighted { transform: none; }
  .pricing_highlighted:hover { transform: translateY(-0.5rem); }
}

.pricing_special {
  padding: var(--space-2);
  text-align: center;
  font-weight: 700;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--clr-white);
  background: var(--clr-apricot);
}

.pricing_header {
  padding: var(--space-6);
  background: var(--clr-yellow);
  color: var(--clr-ink);
  text-align: center;
}

.pricing_title {
  font-size: var(--text-4xl);
  font-weight: 800;
  color: var(--clr-ink);
  margin: 0;
  line-height: 1;
}

.pricing_summary {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--clr-ink-muted);
  margin: var(--space-2) 0 0;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.pricing_description { padding: var(--space-5); }

.pricing_list { list-style: none; padding: 0; margin: 0; }

.pricing_feature {
  margin: 0;
  padding: var(--space-2) 0 var(--space-2) var(--space-5);
  position: relative;
  font-size: 0.9rem;
  color: var(--clr-ink-muted);
  line-height: var(--leading-snug);
}

.pricing_feature:not(:last-child) { margin-bottom: var(--space-1); }

.pricing_feature::before {
  content: "\2714";
  color: var(--clr-yellow);
  position: absolute;
  left: 0;
  font-weight: bold;
}

.pricing_action {
  padding: var(--space-5);
  border-top: 1px solid var(--clr-surface-border);
  text-align: center;
  width: 100%;
}

.pricing_action p {
  display: block;
  width: 100%;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--clr-ink-muted);
  opacity: 0.6;
  margin: 0 0 var(--space-4);
}

.price_grid { display: flex; flex-direction: column; gap: var(--space-2); }

.price_row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--clr-surface-border-h);
}

.price_row:last-child { border-bottom: none; }

.price_label  { font-size: var(--text-sm);  color: var(--clr-ink-muted); font-weight: 500; }
.price_value  { font-size: var(--text-lg);  font-weight: 700; color: var(--clr-apricot); }
.price_value span { font-size: var(--text-xs); font-weight: 400; color: var(--clr-ink-muted); opacity: 0.7; }

.pricing_cta {
  padding: var(--space-6) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin-top: var(--space-6);
  text-align: center;
}

.pricing_cta p { margin-bottom: var(--space-5); color: var(--clr-white); font-size: var(--text-base); opacity: 0.8; }

.related_pages { padding: var(--space-6) 0; margin-top: var(--space-4); }
.related_pages p {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--clr-white);
  opacity: 0.5;
  margin-bottom: var(--space-4);
}

/* ── Imagem mobile nas páginas de preços ─────────────────────────── */
.service_inner_page.inner_page.inner_content .for_mob_only { display: none; }

@media (max-width: 1023.98px) {
  .service_inner_page.inner_page.inner_content .for_mob_only {
    display: block;
    margin-top: var(--space-5);
  }
  .service_inner_page.inner_page.inner_content .for_mob_only figure {
    width: 100%; height: auto;
    border-radius: var(--radius-md);
    overflow: hidden;
  }
}

/* ── Botão de fechar serviço ─────────────────────────────────────── */
.cls-btn { display: block; }

/* ── Página 404 ───────────────────────────────────────────────────── */
.error-page {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
  padding: var(--space-9) var(--space-6);
}

.error-page h1 { font-size: 8rem; margin-bottom: 0; color: var(--clr-apricot); }
.error-page h2 { margin-top: var(--space-4); }

/* ── Breadcrumb ──────────────────────────────────────────────────── */
.breadcrumb { margin-bottom: var(--space-4); }

.breadcrumb ol {
  list-style: none;
  display: flex;
  gap: var(--space-2);
  font-size: var(--text-sm);
  opacity: 0.7;
  padding: 0;
}

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

/* ── Gallery items ───────────────────────────────────────────────── */
.gallery__item {
  margin: 0 3vw;
  display: grid;
  grid-template-areas: '. .' '. gallery-image' '. .';
  grid-template-columns: 8rem 21vmax;
  grid-template-rows: 8rem 28vmax 3rem;
}

.gallery__item:nth-child(even) { padding-top: 10vh; }

.gallery__item-img {
  grid-area: gallery-image;
  width: 100%; height: 100%;
  overflow: hidden;
  position: relative;
  transform-origin: 50% 100%;
}

.gallery__item-imginner {
  background-size: cover;
  background-position: 50% 0;
  width: 100%; height: 100%;
}

.gallery__item-caption {
  grid-area: 1 / 1 / 4 / 3;
  display: grid;
  grid-template-areas:
    'gallery-number gallery-title'
    'gallery-link .'
    'gallery-link gallery-tags';
  grid-template-columns: 8rem auto;
  grid-template-rows: 8rem auto 3rem;
}

.gallery__item-number {
  grid-area: gallery-number;
  font-size: clamp(2.5rem, 9vw, 6.5rem);
  justify-self: end;
  padding-right: var(--space-6);
  color: var(--clr-ink-muted);
}

.gallery__item-title {
  grid-area: gallery-title;
  margin: 0;
  font-size: clamp(2rem, 5vw, 4rem);
  color: var(--clr-ink);
}

.gallery__item-number,
.gallery__item-title,
.gallery__text {
  font-family: 'Playfair Display', serif;
  font-weight: 800;
  font-style: italic;
  align-self: center;
}

.gallery__item-link {
  grid-area: gallery-link;
  align-self: end;
  font-size: var(--text-2xl);
  background: var(--clr-apricot);
  color: var(--clr-surface);
  text-decoration: underline;
  width: 120px; height: 120px;
  border-radius: var(--radius-full);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.gallery__item-link:focus,
.gallery__item-link:hover {
  background: var(--clr-apricot-dark);
  color: var(--clr-yellow);
  text-decoration: none;
}

.gallery__item-tags {
  grid-area: gallery-tags;
  justify-self: end;
  font-size: var(--text-2xl);
  display: grid;
  grid-auto-flow: column;
  grid-gap: var(--space-4);
  cursor: pointer;
}

.gallery__text {
  font-size: 20vw;
  line-height: 0.8;
  margin: 0 10vw 0 14vw;
  text-transform: lowercase;
  -webkit-text-stroke: 1px var(--clr-gray-text);
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.gallery__text-inner { display: block; }

/* ── About Page Sections ───────────────────────────────────────────── */
.about_sec {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 100vh !important;
  padding: var(--space-8) var(--space-7) !important;
  position: relative !important;
}

.about_sec .abt_div {
  flex: 1 !important;
  max-width: 55% !important;
  padding-right: var(--space-8) !important;
}

.about_sec .abt_image {
  flex-shrink: 0 !important;
  width: 35vw !important;
  max-width: 500px !important;
  height: 80vh !important;
  max-height: 600px !important;
  overflow: hidden !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-card-h) !important;
  position: relative !important;
  z-index: var(--z-cards) !important;
}

.about_sec .abt_image figure {
  width: 100% !important;
  height: 100% !important;
}

.about_sec .abt_image figure img,
.about_sec .abt_image figure .lazyload {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* About - História Section */
.about_sec h1 {
  font-size: clamp(2.5rem, 5vw, 4rem) !important;
  font-weight: 800 !important;
  color: var(--clr-ink) !important;
  margin-bottom: var(--space-5) !important;
  line-height: 1.1 !important;
}

.about_sec .abt_div p {
  font-size: var(--text-lg) !important;
  line-height: var(--leading-loose) !important;
  color: var(--clr-ink-muted) !important;
  margin-bottom: var(--space-4) !important;
}

/* Quem Somos - modern card layout */
.testimonial_sec.awards_sec {
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  padding: var(--space-8) var(--space-7) !important;
  background: var(--clr-surface) !important;
}

.testimonial_sec.awards_sec .img_wraper {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  width: 45% !important;
  height: 100% !important;
  z-index: var(--z-base) !important;
}

.testimonial_sec.awards_sec .img_wraper span {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.testimonial_sec.awards_sec .row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: var(--space-8) !important;
  width: 100% !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  position: relative !important;
  z-index: var(--z-cards) !important;
}

.testimonial_sec.awards_sec .content_div {
  background: var(--clr-surface-lowest) !important;
  padding: var(--space-6) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-card) !important;
}

.testimonial_sec.awards_sec .sec_head h2 {
  font-size: var(--text-4xl) !important;
  color: var(--clr-apricot) !important;
  margin-bottom: var(--space-4) !important;
}

.testimonial_sec.awards_sec .col_item {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-5) !important;
}

.testimonial_sec.awards_sec .item_div {
  background: var(--clr-surface-lowest) !important;
  padding: var(--space-5) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-card) !important;
  border-left: 4px solid var(--clr-yellow) !important;
}

.testimonial_sec.awards_sec .port_head h2 {
  font-size: var(--text-xl) !important;
  color: var(--clr-ink) !important;
  margin-bottom: var(--space-3) !important;
}

/* Missão & Visão - side by side */
.testimonial_sec#filosofia .row {
  display: grid !important;
  grid-template-columns: 1fr 1.5fr !important;
  gap: var(--space-8) !important;
}

.testimonial_sec#filosofia .col_item {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: var(--space-5) !important;
}

.testimonial_sec#filosofia .item_div {
  background: linear-gradient(135deg, var(--clr-surface-lowest) 0%, var(--clr-surface-low) 100%) !important;
  padding: var(--space-6) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-card) !important;
  transition: transform var(--duration-m) var(--ease-out), box-shadow var(--duration-m) var(--ease-out) !important;
}

.testimonial_sec#filosofia .item_div:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-card-h) !important;
}

/* Valores section */
.join_us {
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: var(--space-9) var(--space-7) !important;
  background: var(--clr-apricot) !important;
  position: relative !important;
}

.join_us .img_wraper {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 40% !important;
  height: 100% !important;
  opacity: 0.3 !important;
}

.join_us_div {
  max-width: 800px !important;
  text-align: center !important;
  position: relative !important;
  z-index: var(--z-cards) !important;
  background: rgba(255, 255, 255, 0.95) !important;
  padding: var(--space-8) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-card-h) !important;
}

.join_us_div h3 {
  font-size: var(--text-2xl) !important;
  color: var(--clr-apricot) !important;
  margin-bottom: var(--space-6) !important;
}

.join_us_div p {
  font-size: var(--text-base) !important;
  color: var(--clr-ink-muted) !important;
  margin-bottom: var(--space-3) !important;
  line-height: var(--leading-body) !important;
}

.join_us_div p b {
  color: var(--clr-apricot) !important;
}

/* Mobile responsive */
@media (max-width: 1023.98px) {
  .about_sec {
    flex-direction: column !important;
    padding: var(--space-6) var(--space-4) !important;
  }

  .about_sec .abt_div {
    max-width: 100% !important;
    padding-right: 0 !important;
    margin-bottom: var(--space-5) !important;
  }

  .about_sec .abt_image {
    width: 100% !important;
    max-width: none !important;
    height: 50vh !important;
  }

  .testimonial_sec.awards_sec .row {
    grid-template-columns: 1fr !important;
  }

  .testimonial_sec#filosofia .row {
    grid-template-columns: 1fr !important;
  }

  .testimonial_sec#filosofia .col_item {
    grid-template-columns: 1fr !important;
  }

  .join_us .img_wraper {
    width: 100% !important;
    opacity: 0.2 !important;
  }

  .join_us_div {
    padding: var(--space-5) !important;
  }
}