/* Patch: fixes and additions applied on top of the Lovable build without touching the generated bundle. */

/* Bug fix: the "história + fundadora" grid in #about only gets an explicit
   grid-template-columns from the "lg:grid-cols-2" utility (desktop). Below that
   breakpoint no column template is set at all, so the browser sizes the single
   implicit column to fit its content's min-content width instead of the viewport
   — long paragraphs push the column wider than the screen and get clipped.
   Forcing a safe 1fr column below lg fixes it; lg:grid-cols-2 still takes over
   at desktop widths since this rule is scoped below that breakpoint. */
@media (max-width: 1023px) {
  #about .grid.lg\:grid-cols-2 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Bug fix: ".founder-photo-lg" (the founder's photo in #about) sets a fixed
   width:32rem AND height:32rem, with only the width capped by max-width:90vw.
   Below ~569px viewports the width shrinks but the height stays at 32rem,
   distorting the circle into an oval and pushing it past its card and off the
   edge of the screen. Forcing width/height together keeps it square and inside
   its card at every phone size; desktop (where 90vw already exceeds 32rem, so
   the original rule never had this bug) is left untouched. */
@media (max-width: 640px) {
  .founder-photo-lg {
    width: min(16rem, 70vw);
    height: min(16rem, 70vw);
    max-width: 100%;
  }
}

/* Bug fix: the mobile-only ".h-16" utility class (logo height in the fixed header)
   was dropped by the Tailwind build. Only "md:h-20" survived, so below the md
   breakpoint the logo <img> had no explicit height and rendered at its natural
   (huge) size, overlapping the hero content. Restoring the missing rule fixes it. */
.h-16 {
  height: 4rem;
}

/* Services dropdown (desktop navbar) */
.gi-nav-item {
  position: relative;
  display: inline-flex;
}

.gi-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 260px;
  background: #ffffff;
  border: 1px solid hsl(47 69% 35% / 0.15);
  border-radius: 0.75rem;
  box-shadow: 0 20px 40px -10px rgb(0 0 0 / 0.25);
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 60;
}

.gi-nav-item.gi-open .gi-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(4px);
}

.gi-dropdown a {
  display: block;
  padding: 0.6rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.85rem;
  line-height: 1.3;
  color: #1f2937;
  font-weight: 500;
  text-align: left;
  white-space: normal;
}

.gi-dropdown a:hover {
  background: hsl(47 69% 35% / 0.1);
  color: hsl(47 69% 35%);
}

/* Quote-request modal */
.gi-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 0.6);
  backdrop-filter: blur(2px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.gi-modal-overlay.gi-open {
  opacity: 1;
  pointer-events: auto;
}

.gi-modal {
  width: 100%;
  max-width: 440px;
  background: #220b0f;
  border: 1px solid hsl(47 69% 35% / 0.3);
  border-radius: 1rem;
  padding: 1.75rem;
  color: #f2f2f2;
  transform: translateY(12px);
  transition: transform 0.2s ease;
  max-height: 90vh;
  overflow-y: auto;
}

.gi-modal-overlay.gi-open .gi-modal {
  transform: translateY(0);
}

.gi-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent;
  border: none;
  color: #f2f2f2;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
}

.gi-modal-close:hover {
  opacity: 1;
}

.gi-modal h3 {
  font-family: "Playfair Display", serif;
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 0.4rem;
}

.gi-modal p.gi-modal-sub {
  font-size: 0.875rem;
  color: rgb(242 242 242 / 0.75);
  margin: 0 0 1.25rem;
}

.gi-field {
  margin-bottom: 1rem;
}

.gi-field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: hsl(47 69% 55%);
}

.gi-field input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.65rem 0.8rem;
  border-radius: 0.5rem;
  border: 1px solid rgb(242 242 242 / 0.2);
  background: rgb(242 242 242 / 0.06);
  color: #f2f2f2;
  font-size: 0.9rem;
  font-family: inherit;
}

.gi-field input::placeholder {
  color: rgb(242 242 242 / 0.4);
}

.gi-field input:focus {
  outline: none;
  border-color: hsl(47 69% 45%);
  background: rgb(242 242 242 / 0.1);
}

.gi-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: rgb(242 242 242 / 0.75);
  margin-bottom: 1.25rem;
}

.gi-consent input {
  margin-top: 0.2rem;
}

.gi-submit {
  width: 100%;
  border: none;
  border-radius: 0.5rem;
  padding: 0.8rem 1rem;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  background: hsl(47 69% 35%);
  color: #220b0f;
  transition: filter 0.15s ease;
}

.gi-submit:hover {
  filter: brightness(1.08);
}

.gi-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.gi-error {
  color: #ff9b9b;
  font-size: 0.75rem;
  margin-top: 0.3rem;
  display: none;
}

.gi-field.gi-invalid input {
  border-color: #ff9b9b;
}

.gi-field.gi-invalid .gi-error {
  display: block;
}

.gi-chevron {
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  margin-left: 0.35em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.18s ease;
  vertical-align: middle;
}

.gi-nav-item.gi-open .gi-chevron {
  transform: translateY(1px) rotate(225deg);
}

/* ===== Services section: ledger-spread redesign ===== */

.gi-spread {
  max-width: 840px;
  margin: 0 auto;
}

.gi-rule {
  position: relative;
  height: 1px;
  background: #e7dcc4;
  max-width: 840px;
  margin: 0 auto;
}

.gi-rule::after {
  content: "";
  position: absolute;
  inset: 0;
  background: hsl(var(--primary));
  transform-origin: center;
  transform: scaleX(0);
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.gi-rule.gi-visible::after {
  transform: scaleX(1);
}

.gi-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  align-items: center;
  padding: 3rem 0;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.gi-block.gi-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (min-width: 760px) {
  .gi-block {
    grid-template-columns: minmax(200px, 240px) 1fr;
    gap: 3rem;
  }
  .gi-block.gi-flip {
    grid-template-columns: 1fr minmax(200px, 240px);
  }
  .gi-block.gi-flip .gi-emblem-col {
    order: 2;
  }
  .gi-block.gi-flip .gi-text-col {
    order: 1;
    text-align: right;
  }
  .gi-block.gi-flip .gi-chips {
    justify-content: flex-end;
  }
  .gi-block.gi-flip .gi-text-col p {
    margin-left: auto;
  }
}

.gi-emblem-col {
  display: flex;
  justify-content: center;
}

.gi-emblem {
  position: relative;
  width: 140px;
  height: 140px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gi-emblem .gi-ring-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.gi-emblem .gi-ring-track {
  fill: none;
  stroke: hsl(var(--primary));
  stroke-opacity: 0.22;
  stroke-width: 2.5;
}

.gi-emblem .gi-ring-fill {
  fill: none;
  stroke: hsl(var(--primary));
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 389.6;
  stroke-dashoffset: 389.6;
  transition: stroke-dashoffset 0.2s linear, filter 0.4s ease;
}

.gi-emblem.gi-complete .gi-ring-fill {
  filter: drop-shadow(0 0 5px hsl(47 69% 55%));
}

.gi-emblem .gi-spark {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background: hsl(var(--primary));
  opacity: 0.35;
  clip-path: polygon(50% 0%, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0% 50%, 35% 35%);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.gi-emblem.gi-complete .gi-spark {
  opacity: 1;
  transform: translateX(-50%) rotate(45deg) scale(1.15);
}

.gi-emblem svg.gi-icon {
  width: 52px;
  height: 52px;
  stroke: hsl(var(--primary));
  position: relative;
  z-index: 1;
}

.gi-text-col h3 {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 1.35rem;
  color: #220b0f;
  margin: 0 0 0.6rem;
}

.gi-text-col p {
  font-size: 0.92rem;
  line-height: 1.6;
  color: #3b2a22;
  margin: 0 0 1.1rem;
  max-width: 46ch;
}

.gi-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.gi-chip {
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid hsl(var(--primary));
  color: hsl(var(--primary));
  background: transparent;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .gi-block,
  .gi-rule::after,
  .gi-emblem .gi-ring-fill,
  .gi-emblem .gi-spark {
    transition: none;
  }
  .gi-block {
    opacity: 1;
    transform: none;
  }
  .gi-rule::after {
    transform: scaleX(1);
  }
}

/* ===== About section: pillar + Mercado de Atuação redesign ===== */

.gi-market-tile {
  background: rgba(151, 124, 28, 0.08);
  border: 1px solid rgba(151, 124, 28, 0.22);
  border-radius: 0.9rem;
  padding: 1.05rem 1.15rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease, background 0.2s ease, border-color 0.2s ease;
}

.gi-market-tile.gi-visible {
  opacity: 1;
  transform: translateY(0);
}

.gi-market-tile:hover {
  background: rgba(151, 124, 28, 0.15);
  border-color: rgba(151, 124, 28, 0.45);
}

.gi-market-badge {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1.5px solid hsl(var(--primary));
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(151, 124, 28, 0.12);
}

.gi-market-badge svg {
  width: 20px;
  height: 20px;
  stroke: hsl(47 69% 55%);
}

.gi-market-tile .gi-market-label {
  font-size: 0.83rem;
  line-height: 1.4;
  font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
  .gi-market-tile {
    transition: none;
    opacity: 1;
    transform: none;
  }
}