/* ===================================================================
   PEGAVIDA WEBSITE V2 · THIRD EDITION REVISED FINAL
   Home-only stylesheet.
   Approved visual references are used directly; HTML remains bilingual.
   =================================================================== */

:root{
  --pv-red:#ef0018;
  --pv-red-deep:#cc0015;
  --pv-navy:#0b4178;
  --pv-ink:#20252b;
  --pv-muted:#66788b;
  --pv-line:#e7e9ec;
}

body.home-final{background:#fff}
body.home-final .topbar{display:none}
body.home-final .float-mail{display:none}

/* Header */
body.home-final .header{
  background:#fff;
  border-bottom:1px solid #eceff1;
  box-shadow:0 3px 18px rgba(20,42,66,.04);
}
body.home-final .header-in{
  height:80px;
  max-width:1240px;
}
body.home-final .brandmark img{
  height:45px;
  max-width:205px;
}
body.home-final .nav{
  gap:28px;
  color:var(--pv-navy);
}
body.home-final .nav a{
  font-weight:750;
}
body.home-final .nav a:first-child{
  color:var(--pv-red);
}
body.home-final .nav a:first-child:after{
  bottom:-26px;
}
body.home-final .lang{
  border-color:#e0e4e8;
}

/* ---------------------------------------------------------------
   1. Hero Banner
   Use the approved full visual as the background.
   Only a controlled left white panel covers the embedded text.
   The family image / curve keep their approved proportions.
   --------------------------------------------------------------- */
.hero-final{
  width:min(1424px, calc(100% - 32px));
  margin:0 auto;
  position:relative;
  aspect-ratio:1423 / 739;
  min-height:0;
  overflow:hidden;
  background:#fff url('assets/brand/v3-hero-family.png') center / 100% 100% no-repeat;
}
.hero-final .hero-mask{
  position:absolute;
  z-index:1;
  inset:0 auto 0 0;
  width:51%;
  background:
    linear-gradient(90deg,
      #fff 0%,
      #fff 88%,
      rgba(255,255,255,.98) 91%,
      rgba(255,255,255,.72) 95%,
      rgba(255,255,255,0) 100%);
  pointer-events:none;
}
.hero-final .hero-content{
  position:absolute;
  z-index:2;
  left:5.4%;
  top:9.5%;
  width:41%;
}
.hero-final .eyebrow{
  color:var(--pv-red);
  font-size:12px;
  letter-spacing:3.1px;
  font-weight:900;
  margin-bottom:24px;
}
.hero-final h1{
  color:var(--pv-navy);
  font-size:clamp(39px,3.35vw,55px);
  line-height:1.02;
  letter-spacing:-1.7px;
  margin:0 0 20px;
}
.hero-final h1 .accent{color:var(--pv-red)}
.hero-final .hero-desc{
  color:var(--pv-muted);
  font-size:16.5px;
  line-height:1.58;
  max-width:545px;
  margin:0;
}
.hero-final .hero-categories{
  margin-top:18px;
  color:var(--pv-navy);
  font-size:16px;
  line-height:1.45;
  font-weight:900;
}
.hero-final .hero-actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:24px;
}
.hero-final .hero-actions .btn{
  min-width:178px;
  padding:12px 19px;
}
.hero-final .hero-values{
  width:485px;
  max-width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  margin-top:27px;
  border-top:1px solid var(--pv-line);
}
.hero-final .hero-value{
  min-height:68px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:10px 12px 9px 0;
  border-bottom:1px solid var(--pv-line);
  color:var(--pv-navy);
  font-size:12.5px;
  font-weight:800;
}
.hero-final .hero-value:nth-child(even){
  border-left:1px solid var(--pv-line);
  padding-left:13px;
}
.hero-final .hero-value svg{
  width:30px;height:30px;
  fill:none;
  stroke:var(--pv-navy);
  stroke-width:1.8;
  flex:0 0 auto;
}
.hero-final .hero-value .arr{
  color:var(--pv-red);
  font-size:18px;
  font-weight:900;
  margin-left:-3px;
}

/* ---------------------------------------------------------------
   Restored original V2 catalog functionality
   --------------------------------------------------------------- */
body.home-final section{padding-top:70px;padding-bottom:70px}
body.home-final .categories .cat{
  border-top:4px solid var(--pv-red);
}
body.home-final .categories .cat:nth-child(even){
  border-top-color:var(--pv-navy);
}
body.home-final .products-section{
  background:#fafafa;
}
body.home-final .chip.active{
  background:var(--pv-red);
  border-color:var(--pv-red);
}
body.home-final .card:hover{
  border-color:#f2c7cd;
}

/* ---------------------------------------------------------------
   3. Featured PC-071
   Fixed 72 / 28 structure.
   Approved picture is used directly in the large left card.
   No separate white-background product overlay.
   --------------------------------------------------------------- */
.feature-final-section{background:#fff}
.feature-final-grid{
  display:grid;
  grid-template-columns:minmax(0,72fr) minmax(250px,28fr);
  gap:20px;
  align-items:stretch;
}
.feature-final-main,
.feature-final-side{
  min-width:0;
}
.feature-final-main{
  position:relative;
  overflow:hidden;
  border:1px solid #e5e8eb;
  border-radius:27px;
  aspect-ratio:1672 / 941;
  background:#fff url('assets/brand/final-pc071-approved.webp') center / 100% 100% no-repeat;
  box-shadow:0 15px 36px rgba(25,45,65,.055);
}
.feature-final-main .feature-mask{
  position:absolute;
  z-index:1;
  left:0;top:0;bottom:0;
  width:39.5%;
  background:
    linear-gradient(90deg,
      #fff 0%,
      #fff 92%,
      rgba(255,255,255,.98) 95%,
      rgba(255,255,255,0) 100%);
}
.feature-final-copy{
  position:absolute;
  z-index:2;
  left:4.5%;
  top:11%;
  width:31.5%;
}
.feature-final-copy .code{
  font-size:15px;
  margin-bottom:23px;
}
.feature-final-copy h2{
  margin:0 0 14px;
  color:#172635;
  font-size:clamp(29px,2.2vw,38px);
  line-height:1.08;
}
.feature-final-copy .tag{
  color:#657486;
  font-size:16.5px;
  line-height:1.45;
  margin-bottom:23px;
}
.feature-final-copy .btn{
  padding:11px 17px;
}
.feature-final-points{
  margin-top:26px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  width:100%;
  gap:0;
}
.feature-final-point{
  min-width:0;
  padding-right:10px;
}
.feature-final-point+.feature-final-point{
  border-left:1px solid #dfe2e5;
  padding-left:10px;
}
.feature-final-point .ico{
  color:var(--pv-red);
  font-size:22px;
  margin-bottom:5px;
}
.feature-final-point strong{
  display:block;
  color:#263544;
  font-size:12px;
  line-height:1.28;
}
.feature-final-point span{
  display:block;
  color:#8b949e;
  font-size:10.5px;
  line-height:1.3;
  margin-top:4px;
}
.feature-final-link{
  position:absolute;
  z-index:5;
  inset:0;
}
.feature-final-side{
  display:grid;
  grid-template-rows:1fr 1fr;
  gap:20px;
}
.feature-final-card{
  border:1px solid #e5e8eb;
  border-radius:25px;
  overflow:hidden;
  background:#fff;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:10px;
  padding:21px;
  min-height:0;
  transition:.2s ease;
}
.feature-final-card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 32px rgba(22,44,65,.07);
}
.feature-final-card .code{
  color:var(--pv-red);
  font-weight:900;
  font-size:12px;
}
.feature-final-card h3{
  color:var(--pv-navy);
  margin:7px 0 8px;
  font-size:19px;
  line-height:1.15;
}
.feature-final-card p{
  color:#788491;
  font-size:12px;
  line-height:1.45;
  margin:0;
}
.feature-final-card img{
  width:100%;
  height:190px;
  object-fit:contain;
}

/* ---------------------------------------------------------------
   2. Sobre Pegavida
   Final approved family scene + live bilingual copy.
   --------------------------------------------------------------- */
.about-final{
  display:grid;
  grid-template-columns:.98fr 1.02fr;
  gap:54px;
  align-items:center;
}
.about-final .about-photo{
  min-height:460px;
  border-radius:29px;
  overflow:hidden;
  background:#fff url('assets/brand/final-about-approved.webp') center / cover no-repeat;
  box-shadow:0 15px 38px rgba(20,45,70,.07);
}
.about-final .about-copy{
  padding-right:10px;
}
.about-final .about-copy .eyebrow{
  color:var(--pv-red);
  letter-spacing:2.2px;
}
.about-final .about-copy h2{
  color:var(--pv-ink);
  font-size:45px;
  line-height:1.06;
  margin:14px 0 23px;
}
.about-final .about-copy p{
  color:#707c89;
  font-size:17px;
  line-height:1.76;
  margin:0 0 17px;
}
.about-final .about-copy .promise{
  color:#667384;
  font-weight:900;
  font-size:18px;
}
.about-final .about-rule{
  width:76px;
  height:4px;
  margin-top:21px;
  border-radius:999px;
  background:var(--pv-red);
}

/* B2B CTA */
body.home-final .b2b{
  background:linear-gradient(105deg,var(--pv-red) 0%,var(--pv-red-deep) 80%,var(--pv-navy) 145%);
}
body.home-final .footer{
  border-top:5px solid var(--pv-red);
}

/* Mobile: true reflow, not desktop scaling */
@media(max-width:900px){
  body.home-final .header-in{height:72px}
  body.home-final .brandmark img{height:40px}

  .hero-final{
    width:100%;
    aspect-ratio:auto;
    background:#fff;
    padding:0 16px 35px;
  }
  .hero-final .hero-mask{display:none}
  .hero-final .hero-content{
    position:relative;
    left:auto;top:auto;width:100%;
    padding:46px 0 25px;
  }
  .hero-final h1{font-size:42px}
  .hero-final .hero-values{width:100%}
  .hero-final:after{
    content:"";
    display:block;
    width:100%;
    aspect-ratio:1423/739;
    border-radius:24px;
    background:url('assets/brand/final-hero-approved.webp') center / cover no-repeat;
  }

  .feature-final-grid{
    grid-template-columns:1fr;
  }
  .feature-final-main{
    aspect-ratio:1672/941;
  }
  .feature-final-side{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto;
  }
  .about-final{
    grid-template-columns:1fr;
    gap:28px;
  }
}
@media(max-width:600px){
  body.home-final .header-in{height:64px}
  body.home-final .brandmark img{height:35px}
  .hero-final h1{font-size:38px}
  .hero-final .hero-actions .btn{min-width:0;flex:1}
  .hero-final .hero-value{font-size:11.5px}

  .feature-final-main{
    background:none;
    aspect-ratio:auto;
    border:none;
    box-shadow:none;
  }
  .feature-final-main .feature-mask,
  .feature-final-main .feature-final-copy{
    display:none;
  }
  .feature-final-main .feature-mobile-image{
    display:block;
    width:100%;
    height:auto;
    border-radius:20px;
    border:1px solid #e5e8eb;
  }
  .feature-final-side{
    grid-template-columns:1fr;
  }
  .feature-final-card{
    grid-template-columns:1fr 1fr;
  }
  .about-final .about-photo{min-height:330px}
  .about-final .about-copy h2{font-size:35px}
}
.feature-mobile-image{display:none}