@import url('https://fonts.googleapis.com/css2?family=Exo:wght@600;800&family=Roboto:wght@300;400;500;700&display=swap');

:root{
  --ambiental:#16a296;
  --ambiental-dark:#006165;
  --empresarial:#0f5f70;
  --empresarial-dark:#04111d;
  --base:#d7d7d7;
  --ink:#061827;
  --white:#ffffff;
  --shadow:0 28px 60px rgba(0,0,0,.22);
  --radius:34px;
}

*{box-sizing:border-box}

html,body{min-height:100%}

body{
  margin:0;
  font-family:'Roboto',system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  color:var(--ink);
  background:var(--base);
  transition:background .45s ease,color .35s ease;
}

body.theme-default{background:#d7d7d7;color:#061827}
body.theme-ambiental{background:var(--ambiental);color:#ffffff}
body.theme-empresarial{background:var(--empresarial);color:#ffffff}

.home-shell{
  height:100vh;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 6vw;
  overflow:hidden;
}

.home-shell::before{
  content:"";
  position:absolute;
  inset:-20%;
  opacity:0;
  transition:opacity .45s ease;
  pointer-events:none;
}

body.theme-ambiental .home-shell::before{
  opacity:1;
  background:radial-gradient(circle at 30% 45%, rgba(255,255,255,.18), transparent 28%);
}

body.theme-empresarial .home-shell::before{
  opacity:1;
  background:radial-gradient(circle at 72% 46%, rgba(255,255,255,.12), transparent 30%);
}

.home-content{
  width:min(1080px,100%);
  position:relative;
  z-index:2;
}

.home-header{
  text-align:center;
  margin-bottom:54px;
}

.eyebrow{
  margin:0 0 10px;
  font-family:'Exo','Roboto',sans-serif;
  font-size:.86rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.72;
}

h1{
  margin:0;
  font-family:'Exo','Roboto',sans-serif;
  font-size:clamp(24px,2.5vw,36px);
  line-height:1.05;
  letter-spacing:-.04em;
  font-weight:800;
  max-width:1100px;
  margin-inline:auto;
}

.choice-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(240px,1fr));
  gap:clamp(28px,5vw,90px);
  align-items:center;
}

.choice-card{
  min-height:180px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  border-radius:var(--radius);
  background:rgba(255,255,255,.48);
  border:3px solid #073244;
  box-shadow:22px 14px 0 rgba(0,0,0,.22);
  transition:transform .35s ease, background .35s ease, border-color .35s ease, box-shadow .35s ease, opacity .35s ease, filter .35s ease;
}

.choice-card img{
  width:min(72%,320px);
  height:auto;
  object-fit:contain;
  transition:transform .35s ease, filter .35s ease, opacity .35s ease;
}

.choice-card:hover{
  transform:none;
  box-shadow:28px 20px 0 rgba(0,0,0,.20), var(--shadow);
}

body.theme-ambiental .choice-card--ambiental,
body.theme-empresarial .choice-card--empresarial{
  background:rgba(255,255,255,.12);
  border-color:#ffffff;
  box-shadow:0 0 0 22px rgba(255,255,255,.92), var(--shadow);
}

body.theme-ambiental .choice-card--ambiental img,
body.theme-empresarial .choice-card--empresarial img{
  transform:scale(1.06);
  filter:brightness(0) invert(1);
}

body.theme-ambiental .choice-card--empresarial,
body.theme-empresarial .choice-card--ambiental{
  opacity:.38;
  filter:grayscale(1);
}

.summary-grid{
  display:grid;

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

  gap:clamp(28px,5vw,90px);

  align-items:start;

  margin-top:28px;
  margin-bottom:0px;

  min-height:120px;
}

.summary-card{
  width:100%;
  max-width:100%;

  opacity:0;
  visibility:hidden;

  transition:
    opacity .28s ease,
    visibility .28s ease;

  text-align:left;
}

.summary-card h2{
  margin:0 0 12px;

  font-family:'Exo','Roboto',sans-serif;

  font-size:clamp(20px,1.8vw,26px);

  line-height:1.18;

  letter-spacing:-.03em;
}

.summary-card p{
  margin:0;

  font-size:clamp(15px,1.2vw,19px);

  line-height:1.45;
}

body.theme-ambiental .summary-card--ambiental,
body.theme-empresarial .summary-card--empresarial{
  opacity:1;
  visibility:visible;

  animation:summaryIn .35s ease both;
}

body.theme-ambiental .summary--ambiental,
body.theme-empresarial .summary--empresarial{
  display:block;
  animation:summaryIn .35s ease both;
}

body.theme-ambiental .summary{margin-left:10px}
body.theme-empresarial .summary{margin-left:auto;margin-right:10px}

.home-footer{
  position:fixed;
  right:28px;
  bottom:28px;
  z-index:999;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.float-contact{
  width:66px;
  height:66px;

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

  position:relative;

  border-radius:999px;
  text-decoration:none;

  transition:
    transform .22s ease,
    filter .22s ease;
}

.float-contact img{
  width:100%;
  height:100%;
  object-fit:contain;

  position:relative;
  z-index:2;
}

.float-contact__label{
  position:absolute;

  right:68px;

  max-width:0;

  overflow:hidden;
  white-space:nowrap;

  opacity:0;

  transform:translateX(26px);

  padding:10px 0;

  border-radius:999px;

  color:#061827;
  font-size:20px;
  font-weight:500;

  transition:
    max-width .34s ease,
    opacity .24s ease,
    transform .34s ease,
    padding .34s ease;
}

.float-contact:hover{
  transform:scale(1.04);
}

.float-contact:hover .float-contact__label{
  max-width:420px;

  opacity:1;

  transform:translateX(0);

  padding:10px 18px 10px 18px;
}

@keyframes summaryIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}

@media (max-width:760px){
  .home-shell{
    align-items:flex-start;
    padding:42px 5vw 110px;
  }

  .home-header{
    margin-bottom:36px;
  }

  .choice-grid{
    grid-template-columns:1fr;
    gap:28px;
  }

  .choice-card{
    min-height:168px;
    border-radius:24px;
    box-shadow:12px 10px 0 rgba(0,0,0,.20);
  }

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

  gap:0;

  margin-top:32px;

  min-height:180px;
}

.summary-card{
  grid-column:1;
  grid-row:1;
}

  .home-footer{
    left:5vw;
    right:auto;
    bottom:30px;
    font-size:18px;
  }

  .home-footer{
  right:18px;
  bottom:18px;
  gap:12px;
}

 .float-contact{
  width:54px;
  height:54px;
}

.float-contact__label{
  right:42px;
  font-size:15px;
}

.float-contact:hover .float-contact__label{
  max-width:260px;
}
}