/* =========================================================
   FRIZA GELO
   SECTIONS.CSS
   Composição visual das seções
========================================================= */


/* =========================================================
   1. HEADER
========================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);

  width: 100%;

  background: rgba(255, 255, 255, 0.92);

  border-bottom: 1px solid rgba(220, 234, 243, 0.8);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}


.header-container {
  display: flex;

  align-items: center;
  justify-content: space-between;

  min-height: 76px;

  gap: var(--space-8);
}


/* =========================================================
   2. HERO
========================================================= */

.brand-logo {
  display: block;
  width: 170px;
  max-height: 54px;
  object-fit: contain;
}

.hero {
  position: relative;

  overflow: hidden;

  padding-top: 72px;
  padding-bottom: 88px;

  background:
    radial-gradient(
      circle at top left,
      rgba(191, 232, 255, 0.35),
      transparent 38%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f9fcfe 100%
    );
}


.hero::before {
  content: "";

  position: absolute;

  top: -180px;
  right: -180px;

  width: 420px;
  height: 420px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(31, 120, 209, 0.08),
      transparent 68%
    );

  pointer-events: none;
}


.hero-container {
  position: relative;
  z-index: 1;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(400px, 0.82fr);

  align-items: center;

  gap: clamp(48px, 6vw, 88px);

  width: 100%;
  max-width: 1120px;

  margin-inline: auto;

  padding-inline: 28px;
}


.hero-content {
  max-width: 680px;
}


.hero-content h1 {
  max-width: 680px;

  margin-bottom: var(--space-6);
}


/* Título principal do hero
   Estrutura esperada no HTML:
   <h1 class="hero-title">
     <span class="hero-title-small">Gelo com entrega em</span>
     <span class="hero-title-highlight">Salvador e Região</span>
   </h1>
*/

.hero-title {
  max-width: 680px;

  font-size: clamp(3rem, 5vw, 4.75rem);
  line-height: 0.98;
  letter-spacing: -0.045em;

  color: var(--color-navy);
}


.hero-title-small {
  display: block;

  font-size: 0.78em;
  line-height: 1.05;

  white-space: nowrap;
}


.hero-title-highlight {
  display: block;

  margin-top: 0.06em;

  color: var(--color-blue);
}


.hero-subtitle {
  max-width: 620px;

  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.6;

  color: var(--color-text-muted);
}


/* =========================================================
   3. PRODUTOS
========================================================= */

.products {
  background: var(--color-surface-soft);
}


.products .section-heading {
  text-align: center;
}


.products .section-heading h2 {
  margin-inline: auto;
}


.products-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: var(--space-8);

  max-width: 900px;

  margin-inline: auto;
}


.product-card {
  text-align: center;
}


.product-card h3 {
  text-align: center;
}


/* =========================================================
   4. COMO FUNCIONA
========================================================= */

.how-it-works {
  background: var(--color-white);
}


.how-it-works .section-heading {
  text-align: center;
}


.how-it-works .section-heading h2 {
  margin-inline: auto;
}


.steps-flow {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto
    minmax(0, 1fr)
    auto
    minmax(0, 1fr)
    auto
    minmax(0, 1fr);

  align-items: start;

  gap: clamp(12px, 2vw, 24px);
}


.step-item {
  min-width: 0;

  padding-inline: var(--space-2);
}


.step-arrow {
  min-height: 64px;

  padding-top: 10px;
}


/* =========================================================
   5. OPERAÇÃO / CONFIANÇA
========================================================= */

.trust-section {
  position: relative;

  min-height: 600px;

  display: flex;

  align-items: center;

  overflow: hidden;

  padding-top: 0;
  padding-bottom: 0;

  background: var(--color-navy);
}


.trust-background-placeholder {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  min-height: 100%;

  background:
    linear-gradient(
      135deg,
      rgba(13, 59, 102, 0.5),
      rgba(31, 120, 209, 0.15)
    ),
    var(--color-surface-blue);

  color: rgba(13, 59, 102, 0.6);
}


.trust-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(4, 28, 52, 0.88) 0%,
      rgba(7, 42, 76, 0.72) 35%,
      rgba(7, 42, 76, 0.30) 68%,
      rgba(7, 42, 76, 0.08) 100%
    );

  pointer-events: none;
}


.trust-content {
  position: relative;
  z-index: 2;

  display: flex;

  align-items: center;

  min-height: 600px;
}


.trust-copy {
  max-width: 660px;

  padding-block: 96px;
}


.trust-copy h2 {
  margin-bottom: var(--space-6);

  color: var(--color-white);

  font-size: clamp(2.4rem, 5vw, 4.4rem);
  letter-spacing: -0.04em;
}


.trust-copy p {
  max-width: 560px;

  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  line-height: 1.6;

  color: rgba(255, 255, 255, 0.86);
}


/* =========================================================
   6. ÁREA DE ATENDIMENTO
========================================================= */

.service-area {
  background: var(--color-white);
}


.service-area-container {
  display: grid;

  grid-template-columns:
    minmax(0, 0.8fr)
    minmax(420px, 1.2fr);

  align-items: center;

  gap: clamp(48px, 7vw, 96px);
}


.service-area-content {
  max-width: 520px;
}


.service-area-content h2 {
  margin-bottom: var(--space-6);
}


.service-map-placeholder {
  min-height: 460px;

  background:
    radial-gradient(
      circle at center,
      rgba(191, 232, 255, 0.55),
      rgba(255, 255, 255, 0.95)
    );

  box-shadow: var(--shadow-md);
}


/* =========================================================
   7. FAQ
========================================================= */

.faq {
  background: var(--color-surface-soft);
}


.faq-container {
  max-width: 960px;
}


.faq .section-heading {
  text-align: center;
}


.faq .section-heading h2 {
  margin-inline: auto;
}


/* =========================================================
   8. CTA FINAL
========================================================= */

.final-cta {
  position: relative;

  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      var(--color-navy) 0%,
      #0f4f87 100%
    );
}


.final-cta::before {
  content: "";

  position: absolute;

  top: -160px;
  right: -120px;

  width: 420px;
  height: 420px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(191, 232, 255, 0.18),
      transparent 65%
    );
}


.final-cta::after {
  content: "";

  position: absolute;

  bottom: -220px;
  left: -140px;

  width: 420px;
  height: 420px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(31, 120, 209, 0.2),
      transparent 68%
    );
}


.final-cta-container {
  position: relative;
  z-index: 1;
}


.final-cta-content {
  max-width: 760px;

  margin-inline: auto;

  text-align: center;
}


.final-cta h2 {
  margin-bottom: var(--space-5);

  color: var(--color-white);
}


.final-cta p {
  margin-bottom: var(--space-8);

  font-size: var(--text-md);

  color: rgba(255, 255, 255, 0.82);
}


/* =========================================================
   9. FOOTER
========================================================= */

.site-footer {
  color: rgba(255, 255, 255, 0.82);

  background: #082a49;
}


.footer-container {
  display: grid;

  grid-template-columns:
    minmax(0, 1.4fr)
    minmax(180px, 0.8fr)
    minmax(220px, 0.8fr);

  gap: clamp(32px, 6vw, 72px);

  padding-top: 64px;
  padding-bottom: 48px;
}


.footer-brand {
  max-width: 360px;
}


.footer-brand p {
  margin-top: var(--space-5);

  line-height: 1.6;

  color: rgba(255, 255, 255, 0.72);
}


.footer-title {
  color: var(--color-white);
}


.footer-contact a {
  color: rgba(255, 255, 255, 0.78);
}


.footer-contact a:hover {
  color: var(--color-ice);
}


.footer-area p {
  line-height: 1.8;

  color: rgba(255, 255, 255, 0.72);
}


.footer-bottom {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: var(--space-6);

  padding-top: var(--space-6);
  padding-bottom: var(--space-6);

  border-top: 1px solid rgba(255, 255, 255, 0.1);
}


.footer-bottom p,
.footer-bottom a {
  font-size: var(--text-sm);

  color: rgba(255, 255, 255, 0.6);
}


.footer-bottom a:hover {
  color: var(--color-ice);
}


/* =========================================================
   10. PLACEHOLDER DE LOGO NO FOOTER
========================================================= */

.site-footer .footer-logo-placeholder {
  color: rgba(255, 255, 255, 0.7);

  border-color: rgba(255, 255, 255, 0.18);

  background:
    rgba(255, 255, 255, 0.06);
}


/* =========================================================
   11. AJUSTES VISUAIS ENTRE SEÇÕES
========================================================= */

.products + .how-it-works,
.how-it-works + .trust-section,
.trust-section + .service-area,
.service-area + .faq,
.faq + .final-cta {
  scroll-margin-top: 90px;
}


/* =========================================================
   12. TABLET
========================================================= */

@media (max-width: 1024px) {

  .hero {
    padding-top: 64px;
    padding-bottom: 72px;
  }


  .hero-container {
    grid-template-columns: 1fr 1fr;

    gap: 40px;
  }


  .steps-flow {
    gap: 12px;
  }


  .step-item p {
    max-width: 190px;
  }


  .trust-section,
  .trust-content {
    min-height: 560px;
  }


  .service-area-container {
    grid-template-columns: 0.9fr 1.1fr;

    gap: 48px;
  }


  .service-map-placeholder {
    min-height: 400px;
  }


  .footer-container {
    grid-template-columns:
      1.2fr
      0.8fr
      0.8fr;
  }

}


/* =========================================================
   13. TABLET / MOBILE GRANDE
========================================================= */

@media (max-width: 900px) {

  .main-nav {
    display: none;
  }


  .hero-container {
    grid-template-columns: 1fr;

    gap: 40px;
  }


  .hero-content {
    max-width: 760px;
  }


  .order-form-wrapper {
    max-width: 680px;
  }


  .products-grid {
    gap: var(--space-6);
  }


  .steps-flow {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);

    gap: var(--space-10) var(--space-8);
  }


  .step-arrow {
    display: none;
  }


  .service-area-container {
    grid-template-columns: 1fr;

    gap: var(--space-10);
  }


  .service-area-content {
    max-width: 700px;
  }


  .service-map-placeholder {
    min-height: 380px;
  }


  .footer-container {
    grid-template-columns:
      1fr
      1fr;

    gap: var(--space-10);
  }


  .footer-brand {
    grid-column: 1 / -1;
  }

}


/* =========================================================
   14. MOBILE
========================================================= */

@media (max-width: 768px) {

  .site-header {
    position: relative;
  }


  .header-container {
    min-height: 68px;
  }


  .hero {
    padding-top: 36px;
    padding-bottom: 56px;
  }


  .hero-container {
    gap: var(--space-8);
  }


  .hero-content h1 {
    margin-bottom: var(--space-5);
  }


  .hero-title {
    font-size: clamp(2.55rem, 7vw, 3.8rem);
    line-height: 1;
  }


  .hero-title-small {
    font-size: 0.76em;
  }


  .hero-title-highlight {
    margin-top: 0.08em;
  }


  .hero-subtitle {
    font-size: 1rem;

    line-height: 1.55;
  }


  .products-grid {
    grid-template-columns: 1fr;

    max-width: 520px;
  }


  .steps-flow {
    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 0;
  }


  .step-item {
    position: relative;

    padding: 0 0 48px;
  }


  .step-item:not(:last-child)::after {
    content: "↓";

    position: absolute;

    left: 50%;
    bottom: 12px;

    transform: translateX(-50%);

    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);

    color: var(--color-blue);

    opacity: 0.75;
  }


  .step-item:last-child {
    padding-bottom: 0;
  }


  .step-item p {
    max-width: 280px;
  }


  .trust-section,
  .trust-content {
    min-height: 520px;
  }


  .trust-overlay {
    background:
      linear-gradient(
        180deg,
        rgba(4, 28, 52, 0.40) 0%,
        rgba(4, 28, 52, 0.68) 42%,
        rgba(4, 28, 52, 0.92) 100%
      );
  }


  .trust-content {
    align-items: flex-end;
  }


  .trust-copy {
    max-width: 100%;

    padding-top: 180px;
    padding-bottom: 64px;
  }


  .trust-copy h2 {
    font-size: clamp(2.2rem, 10vw, 3.4rem);
  }


  .trust-copy p {
    font-size: 1rem;
  }


  .service-area-container {
    gap: var(--space-8);
  }


  .service-area-content {
    text-align: center;
  }


  .service-area-list {
    justify-content: center;
  }


  .service-map-placeholder {
    min-height: 320px;
  }


  .final-cta-content {
    max-width: 560px;
  }


  .footer-container {
    grid-template-columns: 1fr;

    gap: var(--space-8);

    padding-top: 48px;
    padding-bottom: 40px;
  }


  .footer-brand {
    grid-column: auto;
  }


  .footer-bottom {
    flex-direction: column;

    align-items: flex-start;

    gap: var(--space-3);
  }

}


/* =========================================================
   15. MOBILE PEQUENO
========================================================= */

@media (max-width: 480px) {

  .hero {
    padding-top: 28px;
    padding-bottom: 48px;
  }


  .hero-container {
    gap: var(--space-6);
  }


  .hero-title {
    font-size: clamp(2.2rem, 9vw, 2.8rem);
    letter-spacing: -0.04em;
  }


  .hero-title-small {
    font-size: 0.72em;
  }


  .hero-title-highlight {
    margin-top: 0.1em;
  }


  .hero-subtitle {
    font-size: 0.98rem;
    line-height: 1.5;
  }


  .products-grid {
    gap: var(--space-5);
  }


  .step-item {
    padding-bottom: 44px;
  }


  .trust-section,
  .trust-content {
    min-height: 500px;
  }


  .trust-copy {
    padding-top: 160px;
    padding-bottom: 48px;
  }


  .service-map-placeholder {
    min-height: 280px;
  }


  .final-cta p {
    font-size: 1rem;
  }

}