/* ==========================================================================
   SERVICOS.CSS - Proffunda Service Page Styles
   Premium corporate design inspired by kiewit.com. Mobile-first.
   Breakpoints: 480px, 768px, 1024px.

   Design tokens from style.css:
     --cor-verde: #367630
     --cor-verde-escuro: #2A5E24
     --cor-verde-claro: #428a3a
     --cor-grafite: #1A1A1A
     --cor-cinza-escuro: #2D2D2D
     --cor-cinza-medio: #6B6B6B
     --cor-off-white: #F5F5F5
     --cor-branco: #FFFFFF
     --cor-preto: #0D0D0D
     --font-principal: 'Poppins', sans-serif
     --texto-h2, --texto-h3, --texto-h4, --texto-body, --texto-small, --texto-overline
     --peso-regular, --peso-medium, --peso-semibold, --peso-bold, --peso-extrabold

   Page-level tokens defined here:
     --cor-stats-bg: #1B3D2E (dark green for process section)
     --superficie-escura: #191919 (dark alternating section bg)
     --font-heading: 'Merriweather', Georgia, serif

   KEY: Alternating sections use WHITE / #191919 (truly dark) pattern.
   CTAs use link-arrow style (text + arrow) as primary pattern.
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. PAGE-LEVEL CUSTOM PROPERTIES
   -------------------------------------------------------------------------- */

.servico-detalhe,
.servico-processo {
  --font-heading: 'Merriweather', Georgia, serif;
  --cor-stats-bg: #1B3D2E;
  --cor-verde-accent: #4A9E42;
}


/* --------------------------------------------------------------------------
   1. SERVICE DETAIL BLOCKS  (.servico-detalhe)
   --------------------------------------------------------------------------
   Alternating: white (#FFFFFF) -> dark (#191919) -> white (#FFFFFF)
   .servico-detalhe--alt triggers the DARK variant.
   -------------------------------------------------------------------------- */

.servico-detalhe {
  background-color: var(--cor-branco);
  padding: 64px 0;
  overflow: hidden;
}

/* DARK alternating section -- NOT off-white, real dark background */
.servico-detalhe--alt {
  background-color: #191919;
}


/* --------------------------------------------------------------------------
   2. SERVICE DETAIL GRID
   --------------------------------------------------------------------------
   Mobile: single column, stacked (image on top).
   Desktop (768px+): 2 columns, 50/50.
   --reverse: swaps visual order so image is on right.
   -------------------------------------------------------------------------- */

.servico-detalhe-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: stretch;
}

.servico-detalhe-grid--reverse {
  /* Reversed on desktop via media query */
}


/* --------------------------------------------------------------------------
   3. IMAGE COLUMN  (.servico-detalhe-image)
   -------------------------------------------------------------------------- */

.servico-detalhe-image {
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.07),
    0 10px 20px -2px rgba(0, 0, 0, 0.05);
  position: relative;
}

.servico-detalhe-image img {
  display: block;
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 10px;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.servico-detalhe-image:hover img {
  transform: scale(1.04);
}

/* Dark section: stronger shadow on image */
.servico-detalhe--alt .servico-detalhe-image {
  box-shadow:
    0 6px 12px -2px rgba(0, 0, 0, 0.25),
    0 16px 40px -4px rgba(0, 0, 0, 0.2);
}


/* --------------------------------------------------------------------------
   4. TEXT COLUMN  (.servico-detalhe-text)
   -------------------------------------------------------------------------- */

.servico-detalhe-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  padding: 8px 0;
}

/* ---- Overline (green label above title) ---- */
.servico-detalhe-text .overline {
  color: var(--cor-verde);
  letter-spacing: 0.12em;
  margin-bottom: -8px;
}

/* Dark section: overline stays green (high contrast on dark) */
.servico-detalhe--alt .servico-detalhe-text .overline {
  color: var(--cor-verde-accent, #4A9E42);
}

/* ---- Section Title (SERIF: Merriweather) ---- */
.servico-detalhe-text .section-title {
  font-family: var(--font-heading);
  font-weight: var(--peso-bold);
  margin-bottom: 0;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* Dark section: white title */
.servico-detalhe--alt .servico-detalhe-text .section-title {
  color: var(--cor-branco);
}

/* ---- Paragraph ---- */
.servico-detalhe-text p {
  font-family: var(--font-principal);
  font-size: var(--texto-body);
  font-weight: var(--peso-regular);
  line-height: 1.85;
  color: var(--cor-cinza-medio);
  margin: 0;
  max-width: 540px;
}

/* Dark section: lighter paragraph text */
.servico-detalhe--alt .servico-detalhe-text p {
  color: rgba(255, 255, 255, 0.7);
}

/* ---- CTA: link-arrow style (PRIMARY pattern) ---- */
.servico-detalhe-text .link-arrow {
  align-self: flex-start;
  margin-top: 4px;
}

/* Dark section: green link-arrow is readable on dark, slightly brighter */
.servico-detalhe--alt .servico-detalhe-text .link-arrow {
  color: var(--cor-verde-accent, #4A9E42);
}

.servico-detalhe--alt .servico-detalhe-text .link-arrow::after {
  background-color: var(--cor-verde-accent, #4A9E42);
}

.servico-detalhe--alt .servico-detalhe-text .link-arrow:hover {
  color: var(--cor-branco);
}

.servico-detalhe--alt .servico-detalhe-text .link-arrow:hover::after {
  background-color: var(--cor-branco);
}

/* ---- CTA: btn-primary fallback (still supported) ---- */
.servico-detalhe-text .btn-primary {
  align-self: flex-start;
  margin-top: 4px;
}


/* --------------------------------------------------------------------------
   5. FEATURE LIST  (.feature-list)
   -------------------------------------------------------------------------- */

.feature-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--font-principal);
  font-size: var(--texto-body);
  font-weight: var(--peso-regular);
  line-height: 1.65;
  color: var(--cor-cinza-escuro);
}

.feature-list li span {
  flex: 1;
}

/* Corporate left-bar indicator via ::before pseudo-element */
.feature-list li::before {
  content: '';
  width: 16px;
  height: 2px;
  background-color: var(--cor-verde, #367630);
  flex-shrink: 0;
  margin-top: 0.7em;
}

/* ---- Dark section: white text for feature list items ---- */
.servico-detalhe--alt .feature-list li {
  color: rgba(255, 255, 255, 0.85);
}

/* Dark section: green bar stays green for contrast */
.servico-detalhe--alt .feature-list li::before {
  background-color: var(--cor-verde-accent, #4A9E42);
}


/* --------------------------------------------------------------------------
   6. PROCESSO / TIMELINE SECTION  (.servico-processo)
   --------------------------------------------------------------------------
   Background: #1B3D2E (deep corporate green).
   Vertical timeline on mobile, horizontal on desktop (1024px+).
   -------------------------------------------------------------------------- */

.servico-processo {
  background-color: #1B3D2E;
  padding: 80px 0;
  overflow: hidden;
}

/* Section title inside processo: serif, white */
.servico-processo .section-title {
  font-family: var(--font-heading);
  color: var(--cor-branco);
}

/* Overline inside processo */
.servico-processo .overline {
  color: #5CB854;
}

.servico-processo .overline::before {
  background: #5CB854;
}

/* ---- Timeline Wrapper (vertical on mobile) ---- */
.processo-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: 44px;
  margin-top: 48px;
}

/* Vertical connecting line (mobile) */
.processo-timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 23px;
  width: 2px;
  background: linear-gradient(
    to bottom,
    var(--cor-verde-accent, #4A9E42),
    rgba(74, 158, 66, 0.2)
  );
  border-radius: 2px;
}

/* ---- Individual Step ---- */
.processo-step {
  position: relative;
  padding: 0 0 48px 20px;
  transition: transform 0.3s ease;
}

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

/* Numbered circle */
.processo-step-number {
  position: absolute;
  left: -36px;
  top: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--cor-verde);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-principal);
  font-size: 1rem;
  font-weight: var(--peso-bold);
  color: var(--cor-branco);
  z-index: 2;
  box-shadow: 0 4px 14px rgba(54, 118, 48, 0.35);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.processo-step:hover .processo-step-number {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(54, 118, 48, 0.5);
}

/* Step title */
.processo-step-title {
  font-family: var(--font-principal);
  font-size: var(--texto-h4);
  font-weight: var(--peso-semibold);
  color: var(--cor-branco);
  margin: 4px 0 8px;
  line-height: 1.3;
}

/* Step description */
.processo-step-text {
  font-family: var(--font-principal);
  font-size: var(--texto-small);
  font-weight: var(--peso-regular);
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.7;
  margin: 0;
  max-width: 300px;
}


/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */


/* --------------------------------------------------------------------------
   480px -- Large Phones
   -------------------------------------------------------------------------- */
@media (min-width: 480px) {

  .servico-detalhe {
    padding: 72px 0;
  }

  .servico-detalhe-image img {
    height: 380px;
  }

  .servico-detalhe-text {
    gap: 22px;
  }

  .processo-step-text {
    max-width: 340px;
  }
}


/* --------------------------------------------------------------------------
   768px -- Tablets
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {

  .servico-detalhe {
    padding: 88px 0;
  }

  /* Two-column 50/50 layout */
  .servico-detalhe-grid {
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: stretch;
  }

  /* Reverse layout: swap column visual order */
  .servico-detalhe-grid--reverse {
    direction: rtl;
  }

  .servico-detalhe-grid--reverse > * {
    direction: ltr;
  }

  /* Image fills entire column height */
  .servico-detalhe-image {
    height: 100%;
    min-height: 420px;
  }

  .servico-detalhe-image img {
    height: 100%;
    min-height: 420px;
    position: absolute;
    top: 0;
    left: 0;
  }

  .servico-detalhe-text {
    gap: 24px;
    padding: 24px 0;
  }

  /* Feature list refinement */
  .feature-list {
    gap: 16px;
  }

  /* Process section */
  .servico-processo {
    padding: 96px 0;
  }

  .processo-timeline {
    margin-top: 56px;
  }
}


/* --------------------------------------------------------------------------
   1024px -- Desktop
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {

  .servico-detalhe {
    padding: 104px 0;
  }

  /* Wider gap for desktop */
  .servico-detalhe-grid {
    gap: 72px;
  }

  .servico-detalhe-image {
    min-height: 480px;
  }

  .servico-detalhe-image img {
    min-height: 480px;
  }

  .servico-detalhe-text {
    gap: 24px;
    padding: 32px 0;
  }

  .servico-detalhe-text p {
    font-size: 1.05rem;
    line-height: 1.85;
  }

  /* Feature list spacing */
  .feature-list li {
    font-size: 1rem;
  }

  /* ---- Horizontal timeline on desktop ---- */
  .processo-timeline {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding-left: 0;
    padding-top: 72px;
    margin-top: 64px;
    gap: 0;
  }

  /* Horizontal connecting line */
  .processo-timeline::before {
    top: 23px;
    bottom: auto;
    left: 40px;
    right: 40px;
    width: auto;
    height: 2px;
    background: linear-gradient(
      to right,
      var(--cor-verde-accent, #4A9E42),
      rgba(74, 158, 66, 0.2)
    );
  }

  /* Steps become equal-width columns */
  .processo-step {
    flex: 1;
    text-align: center;
    padding: 0 16px;
    padding-bottom: 0;
  }

  /* Numbered circle repositioned above */
  .processo-step-number {
    position: relative;
    left: auto;
    top: auto;
    margin: -96px auto 24px;
    width: 52px;
    height: 52px;
    font-size: 1.05rem;
  }

  .processo-step-title {
    font-size: 1.15rem;
    margin: 0 0 10px;
  }

  .processo-step-text {
    max-width: 220px;
    margin-left: auto;
    margin-right: auto;
    font-size: 0.9rem;
  }

  .servico-processo {
    padding: 112px 0;
  }
}


/* --------------------------------------------------------------------------
   Accessibility & Motion Preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

  .processo-step-number {
    transition: none;
  }

  .processo-step {
    transition: none;
  }

  .servico-detalhe-image img {
    transition: none;
  }

  .servico-detalhe-image:hover img {
    transform: none;
  }
}