/* MioMobili — Empresa / About V1
   Complemento visual da Home V5.3.3
*/

.about-hero{
  position:relative;
  min-height:430px;
  overflow:hidden;
  background:#292626;
}
.about-hero-photo{
  position:absolute;
  inset:0 0 0 39%;
  background:url("miomobili-v5-assets/about/empresa-hero.jpg") center/cover no-repeat;
}
.about-hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(38,35,35,.98) 0%,rgba(38,35,35,.93) 38%,rgba(38,35,35,.55) 58%,rgba(38,35,35,.12) 100%);
}
.about-hero-inner{
  position:relative;
  min-height:430px;
  display:flex;
  align-items:center;
}
.about-hero-copy{
  width:min(590px,56%);
  padding:62px 0;
  color:#fff;
}
.kicker-light{color:#e16a70}
.about-hero h1{
  margin:0;
  max-width:580px;
  font-size:clamp(36px,4.3vw,50px);
  line-height:1.08;
  letter-spacing:-.035em;
}
.about-hero p{
  max-width:525px;
  margin:0;
  color:rgba(255,255,255,.82);
  font-size:16px;
}

/* História */
.story-grid{
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:78px;
  align-items:center;
}
.story-photo{
  position:relative;
  min-height:520px;
}
.story-photo > img{
  width:88%;
  height:500px;
  object-fit:cover;
  border-radius:3px;
}
.story-mark{
  position:absolute;
  right:0;
  bottom:-5px;
  width:170px;
  height:170px;
  display:grid;
  place-items:center;
  background:var(--cream);
}
.story-mark img{
  width:92px;
  height:auto;
  opacity:.68;
}
.story-copy h2{
  max-width:610px;
  margin-bottom:24px;
}
.story-copy p{
  margin:0 0 17px;
  color:var(--muted);
  font-size:15px;
}
.story-copy .lead-about{
  color:var(--ink);
  font-size:18px;
  line-height:1.7;
}

/* Princípios */
.principles{
  background:var(--cream-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.principles-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.principle-card{
  padding:30px 27px 32px;
  background:#fff;
  border-top:3px solid var(--red);
  box-shadow:0 5px 20px rgba(38,31,28,.035);
}
.principle-number{
  display:block;
  margin-bottom:28px;
  color:#c9c2be;
  font-size:28px;
  font-weight:700;
}
.principle-card h3{
  margin:0 0 9px;
  color:var(--ink);
  font-size:14px;
  text-transform:uppercase;
}
.principle-card p{
  margin:0;
  color:var(--muted);
  font-size:13px;
}

/* Jeito de fazer */
.craft-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:78px;
  align-items:center;
}
.craft-copy h2{
  margin-bottom:24px;
}
.craft-copy p{
  margin:0 0 17px;
  color:var(--muted);
  font-size:15px;
}
.craft-copy .btn{
  margin-top:14px;
}
.craft-images{
  position:relative;
  min-height:530px;
}
.craft-img-main{
  position:absolute;
  right:0;
  top:0;
  width:82%;
  height:440px;
  object-fit:cover;
  border-radius:3px;
}
.craft-img-small{
  position:absolute;
  left:0;
  bottom:0;
  width:48%;
  height:245px;
  object-fit:cover;
  border:12px solid #fff;
  box-shadow:var(--shadow);
}

/* Confiança */
.trust-band{
  padding:62px 0;
  background:#2a2727;
  color:rgba(255,255,255,.76);
}
.trust-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:80px;
  align-items:center;
}
.trust-title h2{
  color:#fff;
  max-width:580px;
}
.trust-grid > p{
  margin:0;
  max-width:520px;
  font-size:16px;
  line-height:1.75;
}

/* Header WhatsApp consistency */
.whatsapp-link{
  display:inline-flex;
  align-items:center;
  gap:9px;
}
.whatsapp-icon{
  width:21px;
  height:21px;
  flex:0 0 21px;
  fill:var(--red);
}
.phone-number{color:var(--ink)}

@media(max-width:980px){
  .story-grid,.craft-grid,.trust-grid{
    grid-template-columns:1fr;
    gap:48px;
  }
  .principles-grid{grid-template-columns:repeat(2,1fr)}
  .story-photo{max-width:680px}
  .craft-images{max-width:680px;width:100%}
}
@media(max-width:680px){
  .about-hero,.about-hero-inner{min-height:470px}
  .about-hero-photo{inset:0;opacity:.5}
  .about-hero-overlay{background:rgba(38,35,35,.78)}
  .about-hero-copy{width:100%;padding:55px 0}
  .about-hero h1{font-size:37px}
  .story-photo{min-height:390px}
  .story-photo > img{width:92%;height:370px}
  .story-mark{width:125px;height:125px}
  .story-mark img{width:68px}
  .principles-grid{grid-template-columns:1fr}
  .craft-images{min-height:410px}
  .craft-img-main{width:88%;height:330px}
  .craft-img-small{height:185px;border-width:8px}
}


/* About V1.1 — Missão, Visão, Valores e 35 anos */
.years-highlight{
  display:flex;
  align-items:center;
  gap:18px;
  margin-top:30px;
  padding-top:24px;
  border-top:1px solid var(--line);
}
.years-highlight strong{
  color:var(--red);
  font-size:52px;
  line-height:1;
  letter-spacing:-.05em;
}
.years-highlight span{
  color:var(--ink);
  font-size:13px;
  font-weight:700;
  line-height:1.35;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.mvv-top{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
  margin-bottom:18px;
}
.mvv-card{
  min-height:235px;
  padding:34px 34px 38px;
  background:#fff;
  border-top:3px solid var(--red);
  box-shadow:0 5px 20px rgba(38,31,28,.035);
}
.mvv-card h3,
.values-card h3{
  margin:0 0 12px;
  color:var(--ink);
  font-size:16px;
  text-transform:uppercase;
}
.mvv-card p{
  margin:0;
  max-width:500px;
  color:var(--text);
  font-size:16px;
  line-height:1.65;
}
.values-card{
  padding:34px;
  background:#fff;
  border-top:3px solid var(--red);
  box-shadow:0 5px 20px rgba(38,31,28,.035);
}
.values-heading{
  display:flex;
  gap:22px;
  align-items:flex-start;
  margin-bottom:28px;
}
.values-heading .principle-number{
  margin:0;
}
.values-heading .kicker{
  margin-bottom:4px;
}
.values-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:0;
  border-top:1px solid var(--line);
}
.value-item{
  padding:24px 20px 8px;
  border-right:1px solid var(--line);
}
.value-item:last-child{border-right:0}
.value-item span{
  display:block;
  margin-bottom:10px;
  color:var(--red);
  font-size:11px;
  font-weight:700;
}
.value-item p{
  margin:0;
  color:var(--ink);
  font-size:13px;
  line-height:1.45;
}

@media(max-width:980px){
  .values-grid{grid-template-columns:repeat(2,1fr)}
  .value-item{border-bottom:1px solid var(--line)}
}
@media(max-width:680px){
  .mvv-top{grid-template-columns:1fr}
  .mvv-card,.values-card{padding:28px 24px}
  .values-grid{grid-template-columns:1fr}
  .value-item{border-right:0}
  .years-highlight strong{font-size:46px}
}