/* ==========================================================
   SERVICOS.CSS
   ONEPA — Serviços
   ========================================================== */


/* ==========================================================
   COLORS
   ========================================================== */

:root{

  --onepa-blue:#0a3776;

  --onepa-dark:#0a1b33;

  --onepa-blue-light:#eef4fb;

  --onepa-orange:#f36b3d;

  --onepa-text:#3d4a5c;

  --onepa-border:#e2e7ee;

  --onepa-white:#ffffff;

  /*
   * Main paragraph color.
   * This is the same color used by the paragraph
   * in the FALE CONNOSCO section.
   */
  --onepa-paragraph:#111111;

}


/* ==========================================================
   PAGE
   ========================================================== */

.servicos-page{

  width:100%;

  overflow:hidden;

  background:#ffffff;

  color:var(--onepa-dark);

}


/* ==========================================================
   GENERAL CONTAINER
   ========================================================== */

.servicos-container{

  width:100%;

  max-width:1210px;

  margin:0 auto;

  padding-left:32px;

  padding-right:32px;

  box-sizing:border-box;

}


/* ==========================================================
   HERO
   ========================================================== */

.servicos-hero{

  position:relative;

  width:100%;

  height:calc(100vh - 76px);

  min-height:560px;

  max-height:820px;

  overflow:hidden;

  background:#0a1b33;

}


/* ==========================================================
   HERO IMAGE
   ========================================================== */

.servicos-hero-image{

  position:absolute;

  inset:0;

  width:100%;

  height:100%;

  display:block;

  object-fit:cover;

  object-position:center;

  z-index:1;

}


/* ==========================================================
   INTRO / O QUE FAZEMOS
   ========================================================== */

.servicos-intro{

  width:100%;

  padding:100px 0;

  background:#ffffff;

}


/* ==========================================================
   SECTION HEADING
   ========================================================== */

.servicos-section-heading{

  max-width:720px;

  margin:0 auto 58px;

  text-align:center;

}


/* ==========================================================
   SECTION KICKER
   ========================================================== */

.section-kicker{

  display:block;

  margin-bottom:13px;

  color:var(--onepa-blue);

  font-size:12px;

  font-weight:700;

  letter-spacing:1.8px;

  line-height:1.4;

  text-transform:uppercase;

  -webkit-font-smoothing:antialiased;

  text-rendering:optimizeLegibility;

}


/* ==========================================================
   INTRO TITLE
   ========================================================== */

.servicos-section-heading h2{

  margin:0 0 16px;

  color:var(--onepa-dark);

  font-size:36px;

  font-weight:800;

  line-height:1.15;

  -webkit-font-smoothing:antialiased;

  text-rendering:optimizeLegibility;

}


/* ==========================================================
   INTRO DESCRIPTION
   ========================================================== */

.servicos-section-heading p{

  max-width:700px;

  margin:0 auto;

  color:var(--onepa-text);

  font-size:15px;

  font-weight:400;

  line-height:1.75;

  -webkit-font-smoothing:antialiased;

  text-rendering:optimizeLegibility;

}


/* ==========================================================
   SERVICES GRID
   ========================================================== */

.services-grid{

  width:100%;

  display:grid;

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

  gap:20px;

}


/* ==========================================================
   SERVICE CARD
   ========================================================== */

.service-card{

  position:relative;

  min-height:300px;

  padding:28px;

  box-sizing:border-box;

  background:#ffffff;

  border:1px solid var(--onepa-border);

  border-radius:6px;

  box-shadow:
    0 12px 30px rgba(10,55,118,.07);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;

}


/* ==========================================================
   ORANGE CARD TOP LINE
   ========================================================== */

.service-card::before{

  content:"";

  position:absolute;

  left:0;

  top:0;

  width:0;

  height:3px;

  background:var(--onepa-orange);

  transition:width .3s ease;

}


/* ==========================================================
   CARD HOVER
   ========================================================== */

.service-card:hover{

  transform:translateY(-5px);

  border-color:#d8e1ec;

  box-shadow:
    0 18px 38px rgba(10,55,118,.12);

}


.service-card:hover::before{

  width:100%;

}


/* ==========================================================
   CARD TOP
   ========================================================== */

.service-card-top{

  display:flex;

  align-items:center;

  justify-content:space-between;

  margin-bottom:26px;

}


/* ==========================================================
   SERVICE ICON
   ========================================================== */

.service-icon{

  width:50px;

  height:50px;

  border-radius:6px;

  display:flex;

  align-items:center;

  justify-content:center;

  background:var(--onepa-blue-light);

  color:var(--onepa-blue);

}


.service-icon svg{

  width:25px;

  height:25px;

}


/* ==========================================================
   SERVICE NUMBER
   ========================================================== */

.service-number{

  color:#aeb8c6;

  font-size:12px;

  font-weight:700;

  letter-spacing:1px;

}


/* ==========================================================
   CARD TITLE
   ========================================================== */

.service-card h3{

  margin:0 0 12px;

  color:var(--onepa-blue);

  font-size:20px;

  font-weight:800;

  line-height:1.25;

  -webkit-font-smoothing:antialiased;

  text-rendering:optimizeLegibility;

}


/* ==========================================================
   CARD DESCRIPTION
   ========================================================== */

.service-card p{

  margin:0;

  color:var(--onepa-text);

  font-size:15px;

  font-weight:400;

  line-height:1.7;

  -webkit-font-smoothing:antialiased;

  text-rendering:optimizeLegibility;

}


/* ==========================================================
   CARD ORANGE LINE
   ========================================================== */

.service-card-line{

  width:36px;

  height:2px;

  margin-top:24px;

  background:var(--onepa-orange);

}


/* ==========================================================
   CARD SMALL TEXT
   ========================================================== */

.service-card-link{

  display:block;

  margin-top:11px;

  color:#7a8797;

  font-size:12px;

  font-weight:600;

}


/* ==========================================================
   DYNAMIC TEXT SECTION

   IMPORTANT:
   The section remains the same light grey/blue color.
   ========================================================== */

.servicos-details-section{

  position:relative;

  width:100%;

  height:560px;

  padding:0;

  box-sizing:border-box;

  background:#eef4fb;

  overflow:hidden;

  display:flex;

  align-items:center;

}


/* ==========================================================
   DYNAMIC SECTION CONTAINER
   ========================================================== */

.servicos-details-section
.servicos-container{

  width:100%;

  height:100%;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

}


/* ==========================================================
   DYNAMIC PARAGRAPH AREA
   ========================================================== */

.dynamic-paragraph-area{

  position:relative;

  width:100%;

  max-width:1120px;

  height:350px;

  margin:0 auto;

  overflow:hidden;

}


/* ==========================================================
   DYNAMIC PARAGRAPH

   IMPORTANT:
   No transform is used here.

   This prevents the browser from leaving the text
   rendered on a transformed sub-pixel position,
   which can make the font appear blurry.
   ========================================================== */

.dynamic-paragraph{

  position:absolute;

  left:0;

  top:-220px;

  width:100%;

  padding:0 35px;

  box-sizing:border-box;

  opacity:0;

  text-align:center;

  pointer-events:none;

  will-change:top,opacity;

}


/* ==========================================================
   ACTIVE DYNAMIC PARAGRAPH
   ========================================================== */

.dynamic-paragraph.active{

  animation:
    dynamicParagraphCycle
    8s
    ease-in-out
    forwards;

}


/* ==========================================================
   DYNAMIC ANIMATION

   The paragraph:

   1. Starts ABOVE the visible area
   2. Comes DOWN
   3. Stops in the center
   4. Remains there
   5. Continues DOWN
   6. Disappears

   No transform is used.
   ========================================================== */

@keyframes dynamicParagraphCycle{

  0%{

    top:-220px;

    opacity:0;

  }


  12.5%{

    top:92px;

    opacity:1;

  }


  87.5%{

    top:92px;

    opacity:1;

  }


  100%{

    top:420px;

    opacity:0;

  }

}


/* ==========================================================
   DYNAMIC PARAGRAPH TEXT

   SAME COLOR AS THE CTA PARAGRAPH

   Larger, cleaner and sharper.
   ========================================================== */

.dynamic-paragraph p{

  width:100%;

  max-width:980px;

  margin:0 auto;

  padding:0;

  color:#111111;

  font-size:20px;

  font-family:inherit;

  font-weight:400;

  line-height:1.9;

  letter-spacing:0;

  text-align:center;

  -webkit-font-smoothing:antialiased;

  -moz-osx-font-smoothing:grayscale;

  text-rendering:optimizeLegibility;

}


/* ==========================================================
   DYNAMIC SLIDE INDICATORS
   ========================================================== */

.dynamic-paragraph-indicators{

  display:flex;

  align-items:center;

  justify-content:center;

  gap:9px;

  margin-top:10px;

}


/* ==========================================================
   INDICATOR
   ========================================================== */

.dynamic-indicator{

  width:8px;

  height:8px;

  padding:0;

  border:0;

  border-radius:50%;

  background:var(--onepa-blue);

  opacity:.35;

  cursor:pointer;

  appearance:none;

  -webkit-appearance:none;

  transition:
    width .25s ease,
    opacity .25s ease;

}


/* ==========================================================
   ACTIVE INDICATOR
   ========================================================== */

.dynamic-indicator.active{

  width:24px;

  height:8px;

  border-radius:10px;

  background:var(--onepa-blue);

  opacity:1;

}


/* ==========================================================
   INDICATOR HOVER
   ========================================================== */

.dynamic-indicator:hover{

  background:var(--onepa-blue);

  opacity:1;

}


/* ==========================================================
   CTA / CONTACT SECTION
   ========================================================== */

.servicos-cta{

  width:100%;

  padding:90px 0;

  background:#ffffff;

}


/* ==========================================================
   CTA INNER
   ========================================================== */

.servicos-cta-inner{

  width:100%;

  max-width:900px;

  margin:0 auto;

  padding:0 32px;

  box-sizing:border-box;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  text-align:center;

}


/* ==========================================================
   CTA TEXT
   ========================================================== */

.servicos-cta-text{

  width:100%;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  text-align:center;

}


/* ==========================================================
   CTA SUBTITLE
   ========================================================== */

.servicos-cta .section-kicker{

  margin:0 0 16px;

  color:var(--onepa-blue);

  font-size:12px;

  font-weight:700;

  letter-spacing:1.8px;

  text-transform:uppercase;

}


/* ==========================================================
   CTA PARAGRAPH

   THIS IS THE REFERENCE PARAGRAPH COLOR
   ========================================================== */

.servicos-cta p{

  width:100%;

  max-width:700px;

  margin:0;

  color:#111111;

  font-family:inherit;

  font-size:15px;

  font-weight:400;

  line-height:1.7;

  text-align:center;

  -webkit-font-smoothing:antialiased;

  -moz-osx-font-smoothing:grayscale;

  text-rendering:optimizeLegibility;

}


/* ==========================================================
   CONTACT BUTTON
   ========================================================== */

.servicos-cta-button{

  width:140px;

  height:48px;

  margin-top:30px;

  display:flex;

  align-items:center;

  justify-content:center;

  box-sizing:border-box;

  background:var(--onepa-blue);

  color:#ffffff;

  border:2px solid var(--onepa-blue);

  border-radius:5px;

  text-decoration:none;

  font-size:14px;

  font-weight:700;

  white-space:nowrap;

  cursor:pointer;

  transition:none;

}


/* ==========================================================
   BUTTON HOVER
   STAYS BLUE
   ========================================================== */

.servicos-cta-button:hover{

  background:var(--onepa-blue);

  color:#ffffff;

  border-color:var(--onepa-blue);

  transform:none;

  box-shadow:none;

}


/* ==========================================================
   BUTTON FOCUS
   ========================================================== */

.servicos-cta-button:focus{

  background:var(--onepa-blue);

  color:#ffffff;

  border-color:var(--onepa-blue);

  transform:none;

  box-shadow:none;

  outline:none;

}


/* ==========================================================
   BUTTON ACTIVE
   ========================================================== */

.servicos-cta-button:active{

  background:var(--onepa-blue);

  color:#ffffff;

  border-color:var(--onepa-blue);

  transform:none;

  box-shadow:none;

}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width:1000px){

  .services-grid{

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

  }


  .dynamic-paragraph p{

    font-size:19px;

  }


  .servicos-cta{

    padding:80px 0;

  }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width:700px){

  .servicos-container{

    padding-left:20px;

    padding-right:20px;

  }


  /* ========================================================
     HERO
     ======================================================== */

  .servicos-hero{

    height:calc(100vh - 70px);

    min-height:520px;

  }


  /* ========================================================
     INTRO
     ======================================================== */

  .servicos-intro{

    padding:70px 0;

  }


  .servicos-section-heading{

    margin-bottom:40px;

  }


  .servicos-section-heading h2{

    font-size:32px;

  }


  /* ========================================================
     SERVICES
     ======================================================== */

  .services-grid{

    grid-template-columns:1fr;

    gap:16px;

  }


  .service-card{

    min-height:auto;

    padding:25px;

  }


  /* ========================================================
     DYNAMIC SECTION
     ======================================================== */

  .servicos-details-section{

    height:580px;

  }


  .dynamic-paragraph-area{

    height:430px;

  }


  .dynamic-paragraph{

    padding:0 10px;

  }


  /* ========================================================
     MOBILE DYNAMIC ANIMATION

     Larger vertical movement for mobile screens.
     ======================================================== */

  @keyframes dynamicParagraphCycle{

    0%{

      top:-260px;

      opacity:0;

    }


    12.5%{

      top:105px;

      opacity:1;

    }


    87.5%{

      top:105px;

      opacity:1;

    }


    100%{

      top:480px;

      opacity:0;

    }

  }


  .dynamic-paragraph p{

    max-width:900px;

    font-size:18px;

    line-height:1.85;

    color:#111111;

    font-family:inherit;

    font-weight:400;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

    text-rendering:optimizeLegibility;

  }


  .dynamic-paragraph-indicators{

    margin-top:5px;

  }


  /* ========================================================
     CTA
     ======================================================== */

  .servicos-cta{

    padding:70px 0;

  }


  .servicos-cta-inner{

    padding-left:20px;

    padding-right:20px;

  }


  .servicos-cta p{

    font-size:15px;

    line-height:1.7;

    color:#111111;

  }


  .servicos-cta-button{

    width:150px;

    height:48px;

    margin-top:30px;

    background:var(--onepa-blue);

    color:#ffffff;

    border-color:var(--onepa-blue);

  }


  .servicos-cta-button:hover,
  .servicos-cta-button:focus,
  .servicos-cta-button:active{

    background:var(--onepa-blue);

    color:#ffffff;

    border-color:var(--onepa-blue);

    transform:none;

    box-shadow:none;

  }

}


/* ==========================================================
   SMALL MOBILE
   ========================================================== */

@media (max-width:430px){

  .servicos-hero{

    min-height:480px;

  }


  .servicos-details-section{

    height:600px;

  }


  .dynamic-paragraph-area{

    height:450px;

  }


  .dynamic-paragraph p{

    font-size:17px;

    line-height:1.85;

    color:#111111;

  }


  .servicos-cta{

    padding:60px 0;

  }


  .servicos-cta h2{

    font-size:26px;

  }


  .servicos-cta-button{

    width:150px;

  }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion:reduce){

  .dynamic-paragraph.active{

    animation:none;

    opacity:1;

    top:92px;

  }


  .dynamic-paragraph:not(.active){

    display:none;

  }


  .dynamic-indicator{

    transition:none;

  }


  .service-card{

    transition:none;

  }


  .service-card::before{

    transition:none;

  }

}


/* ==========================================================
   LAPTOP CTA / CONTACT SECTION
   ==========================================================

   The CTA content is rendered as real HTML inside the
   transparent display area of the laptop PNG.

   IMPORTANT:
   - The laptop frame is visual only.
   - pointer-events:none keeps the frame from blocking clicks.
   - The Contacte-nos link therefore remains fully clickable.
   ========================================================== */

.servicos-cta{
  position:relative;
  width:100%;
  padding:55px 0 80px;
  background:#ffffff;
  overflow:hidden;
}

.servicos-laptop-stage{
  position:relative;
  width:min(1100px,94vw);
  aspect-ratio:3 / 2;
  margin:0 auto;
  isolation:isolate;
}

.servicos-laptop-screen{
  position:absolute;
  z-index:1;

  left:16.1%;
  top:5.1%;
  width:67.2%;
  height:60.0%;

  display:flex;
  align-items:center;
  justify-content:center;

  background:#ffffff;
  overflow:hidden;

  box-sizing:border-box;
}

.servicos-laptop-screen .servicos-cta-inner{
  width:100%;
  max-width:none;
  height:100%;
  margin:0;
  padding:0 7%;
  box-sizing:border-box;

  display:flex;
  align-items:center;
  justify-content:center;
}

.servicos-laptop-screen .servicos-cta-text{
  width:100%;
  max-width:720px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.servicos-laptop-screen .section-kicker{
  margin:0 0 13px;
  color:var(--onepa-blue);
  font-size:12px;
  font-weight:700;
  letter-spacing:1.8px;
  line-height:1.4;
  text-transform:uppercase;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.servicos-laptop-screen .servicos-cta-text p{
  width:100%;
  max-width:700px;
  margin:0;
  color:#111111;
  font-family:inherit;
  font-size:15px;
  font-weight:400;
  line-height:1.7;
  text-align:center;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

.servicos-laptop-screen .servicos-cta-button{
  width:140px;
  height:48px;
  margin-top:30px;

  display:flex;
  align-items:center;
  justify-content:center;

  box-sizing:border-box;

  background:var(--onepa-blue);
  color:#ffffff;

  border:2px solid var(--onepa-blue);
  border-radius:5px;

  text-decoration:none;
  font-size:14px;
  font-weight:700;
  white-space:nowrap;

  cursor:pointer;
  transition:none;

  position:relative;
  z-index:10;
}

.servicos-laptop-screen .servicos-cta-button:hover,
.servicos-laptop-screen .servicos-cta-button:focus,
.servicos-laptop-screen .servicos-cta-button:active{
  background:var(--onepa-blue);
  color:#ffffff;
  border-color:var(--onepa-blue);
  transform:none;
  box-shadow:none;
}

.servicos-laptop-frame{
  position:absolute;
  z-index:2;
  inset:0;

  width:100%;
  height:100%;

  display:block;
  object-fit:contain;

  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}


/* ==========================================================
   LAPTOP CTA — TABLET
   ========================================================== */

@media (max-width:1000px){

  .servicos-cta{
    padding:45px 0 65px;
  }

  .servicos-laptop-stage{
    width:min(950px,96vw);
  }

  .servicos-laptop-screen .section-kicker{
    font-size:11px;
    margin-bottom:10px;
  }

  .servicos-laptop-screen .servicos-cta-text p{
    font-size:14px;
    line-height:1.6;
  }

  .servicos-laptop-screen .servicos-cta-button{
    width:130px;
    height:44px;
    margin-top:22px;
    font-size:13px;
  }

}


/* ==========================================================
   LAPTOP CTA — MOBILE
   ========================================================== */

@media (max-width:700px){

  .servicos-cta{
    padding:30px 0 45px;
  }

  .servicos-laptop-stage{
    width:96vw;
    aspect-ratio:3 / 2;
  }

  .servicos-laptop-screen{
    left:16.1%;
    top:5.1%;
    width:67.2%;
    height:60%;
  }

  .servicos-laptop-screen .servicos-cta-inner{
    padding:0 5%;
  }

  .servicos-laptop-screen .section-kicker{
    font-size:7px;
    letter-spacing:1px;
    margin-bottom:6px;
  }

  .servicos-laptop-screen .servicos-cta-text p{
    max-width:100%;
    font-size:8px;
    line-height:1.45;
  }

  .servicos-laptop-screen .servicos-cta-button{
    width:75px;
    height:27px;
    margin-top:9px;
    border-width:1px;
    border-radius:3px;
    font-size:7px;
  }

}


/* ==========================================================
   LAPTOP CTA — SMALL MOBILE
   ========================================================== */

@media (max-width:430px){

  .servicos-cta{
    padding:25px 0 35px;
  }

  .servicos-laptop-stage{
    width:98vw;
  }

  .servicos-laptop-screen .section-kicker{
    font-size:6.5px;
    letter-spacing:.8px;
    margin-bottom:5px;
  }

  .servicos-laptop-screen .servicos-cta-text p{
    font-size:7px;
    line-height:1.4;
  }

  .servicos-laptop-screen .servicos-cta-button{
    width:68px;
    height:25px;
    margin-top:8px;
    font-size:6.5px;
  }

}