/* Enova Soluções — Contatos, Sobre nós e Gestão de redes sociais (complementa style.css) */

/* ---------- Hero com foto ---------- */
.page-hero .hero-title { max-width: 15ch; }
.page-visual { position: relative; width: 100%; max-width: 580px; margin-inline: auto; padding: 0 0 2.2rem 1.4rem; }
.page-photo {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border: 6px solid var(--surface); border-radius: calc(var(--radius) * 1.4);
  background: linear-gradient(150deg, var(--accent), var(--primary-deep));
  box-shadow: 0 30px 60px -28px color-mix(in srgb, var(--secondary) 60%, transparent);
  color: transparent;
}
.float-card {
  position: absolute; left: 0; bottom: 0;
  display: flex; align-items: center; gap: .85rem;
  max-width: 18rem; padding: .9rem 1.2rem .9rem .9rem;
  background: var(--surface); border-radius: 1rem; box-shadow: var(--shadow);
  font-size: .86rem; font-weight: 600; line-height: 1.3; color: var(--text);
  transition: transform .3s ease;
}
.float-card small { display: block; margin-top: .15rem; font-size: .74rem; font-weight: 500; color: var(--muted); }
.page-visual:hover .float-card { transform: translateY(-4px); }

/* ---------- Cards com ícone e descrição ---------- */
.info-grid { display: grid; gap: 1.5rem; margin-top: 3rem; }
@media (min-width: 640px) { .info-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) {
  .info-grid { grid-template-columns: repeat(3, 1fr); }
  .info-grid-4 { grid-template-columns: repeat(4, 1fr); }
}
.info-card { display: flex; flex-direction: column; gap: 1rem; padding: 2rem 1.6rem; }
.info-card:hover .hex-icon { transform: translateY(-4px) rotate(-4deg); }
.info-card h3 { font-size: 1.05rem; font-weight: 700; line-height: 1.3; color: var(--text); }
.info-card p { margin: 0; font-size: .9rem; color: var(--muted); }
.section-head { max-width: 40rem; }
.section-head-center { margin-inline: auto; text-align: center; }
.section-head-center .section-text { margin-inline: auto; }

/* ---------- Contato ---------- */
.contact-grid { display: grid; gap: 1.5rem; align-items: stretch; margin-top: 3rem; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1.1fr 1fr; } }
.contact-main {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1rem;
  padding: 2.4rem 2rem; border-radius: var(--radius);
  background: var(--secondary); color: var(--surface); box-shadow: var(--shadow);
}
.contact-main::before {
  content: ""; position: absolute; z-index: -1; right: -6rem; top: -6rem; width: 18rem; height: 18rem;
  border-radius: 50%; background: color-mix(in srgb, var(--primary) 14%, transparent);
}
.contact-main h3 { font-size: 1.4rem; font-weight: 700; line-height: 1.25; }
.contact-main p { margin: 0; color: color-mix(in srgb, var(--surface) 72%, transparent); font-size: .95rem; }
.contact-number { font-size: clamp(1.4rem, 3vw, 1.8rem); font-weight: 700; letter-spacing: -.01em; color: var(--primary); }
.contact-main .btn { margin-top: .6rem; }
.contact-main :focus-visible { outline-color: var(--primary); }
.contact-topics { padding: 2.4rem 2rem; }
.contact-topics h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 1.4rem; }
.contact-topics .checks { margin-bottom: 0; font-size: .92rem; }

/* ---------- Missão ---------- */
.prose p { margin: 1rem 0 0; max-width: 36rem; color: var(--muted); font-size: .98rem; }
.mission-card {
  display: flex; flex-direction: column; gap: 1.1rem;
  padding: 2.4rem 2rem; border-radius: var(--radius);
  background: var(--secondary); color: var(--surface); box-shadow: var(--shadow);
}
.mission-card .section-label { margin: 0; color: var(--primary); }
.mission-card blockquote { margin: 0; font-size: clamp(1.15rem, 2.2vw, 1.4rem); font-weight: 600; line-height: 1.4; letter-spacing: -.01em; }

/* ---------- Passos (3 itens) ---------- */
@media (min-width: 720px) { .steps-3 { grid-template-columns: repeat(3, 1fr); } }
.step-text { margin: -.6rem 0 0; max-width: 15rem; font-size: .84rem; color: var(--muted); line-height: 1.5; }

/* ---------- Faixa de chamada final ---------- */
.cta-band {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; gap: 1.8rem; align-items: center;
  padding: 2.6rem 2rem; border-radius: calc(var(--radius) * 1.4);
  background: var(--primary); box-shadow: var(--shadow);
}
.cta-band::before {
  content: ""; position: absolute; z-index: -1; right: -8rem; top: -10rem; width: 26rem; height: 26rem;
  border-radius: 50%; background: radial-gradient(circle, var(--accent) 0%, transparent 65%);
}
.cta-band .section-label { color: var(--secondary); }
.cta-band .section-title { color: var(--secondary); }
.cta-band .section-text { color: color-mix(in srgb, var(--secondary) 80%, transparent); }
.cta-band .chips { margin: 0; gap: .75rem; }
.btn-outline { color: var(--secondary); background: none; box-shadow: inset 0 0 0 2px var(--secondary); }
.btn-outline:hover {
  background: color-mix(in srgb, var(--surface) 35%, transparent);
  box-shadow: inset 0 0 0 2px var(--secondary), var(--shadow-sm);
}
@media (min-width: 900px) {
  .cta-band { grid-template-columns: 1.3fr auto; padding: 3.2rem 3rem; }
}

/* ---------- Criação de sites: hero com layouts sobrepostos ---------- */
@keyframes lx-float { 50% { translate: 0 -8px; } }
.lx-stack { position: relative; width: 100%; max-width: 620px; margin-inline: auto; aspect-ratio: 1.12; }
.lx-stack .win { overflow: visible; }
.lx-stack .win > .ms { border-radius: 0 0 .8rem .8rem; }
.lx-stack .win-bar { border-radius: .8rem .8rem 0 0; }
.lx-land { left: 12%; top: 0; width: 70%; aspect-ratio: 1.3; z-index: 1; }
.lx-land .ms { font-size: 2.6cqw; }
.lx-shop { left: 0; top: 46%; width: 50%; aspect-ratio: 1.2; z-index: 2; transform: rotate(-4deg); animation: lx-float 7s ease-in-out infinite; }
.lx-shop .ms { font-size: 4cqw; }
.lx-port { right: 0; top: 32%; width: 40%; aspect-ratio: .78; z-index: 3; transform: rotate(4deg); animation: lx-float 6s ease-in-out 1.2s infinite; }
.lx-port .ms { font-size: 4.8cqw; }
.lx-stack:hover .lx-land { transform: translateY(-6px); }

.lx-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8em; padding: .9em 1.4em 1.2em; }
.lx-row i { display: block; height: 3.2em; border-radius: .7em; background: var(--primary-soft); border: 1px solid var(--line); }

.lx-bag { margin-left: .4em; font-size: 1.1em; color: var(--secondary); }
.lx-shop-body { flex: 1; display: flex; flex-direction: column; padding: .9em 1.1em 1em; min-height: 0; }
.lx-shop-body .ms-title { font-size: 1.25em; margin-bottom: .6em; }
.lx-products { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: .6em; min-height: 0; }
.lx-products span { display: flex; flex-direction: column; min-height: 0; }
.lx-products i { flex: 1; min-height: 2.5em; border-radius: .6em; background: linear-gradient(160deg, var(--accent), var(--primary-deep)); }
.lx-products span:nth-child(2) i { background: linear-gradient(160deg, var(--secondary), color-mix(in srgb, var(--primary) 30%, var(--secondary))); }
.lx-products span:nth-child(3) i { background: linear-gradient(160deg, var(--primary-soft), var(--primary)); }
.lx-products span:nth-child(4) i { background: linear-gradient(160deg, var(--surface), var(--primary-soft)); border: 1px solid var(--line); }
.lx-products .ms-line { width: 90%; margin: .5em 0 .3em; }
.lx-products b { display: block; width: 55%; height: .55em; border-radius: .3em; background: var(--primary); }

.lx-port-body { flex: 1; display: flex; flex-direction: column; padding: .9em 1em 1em; min-height: 0; }
.lx-port-body .ms-title { font-size: 1.4em; }
.lx-gallery { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1.3fr 1fr; gap: .5em; margin-top: .7em; min-height: 0; }
.lx-gallery i { display: block; border-radius: .6em; background: linear-gradient(160deg, var(--primary), var(--primary-deep)); }
.lx-gallery i:nth-child(2) { grid-row: span 2; background: linear-gradient(160deg, color-mix(in srgb, var(--surface) 22%, var(--secondary)), var(--secondary)); border: 1px solid color-mix(in srgb, var(--surface) 14%, transparent); }
.lx-gallery i:nth-child(3) { background: linear-gradient(160deg, var(--accent), var(--primary)); }
.lx-gallery i:nth-child(4) { grid-column: 1 / -1; background: color-mix(in srgb, var(--surface) 14%, var(--secondary)); }

.lx-tag {
  position: absolute; left: 50%; bottom: -.9rem; transform: translateX(-50%); z-index: 1;
  padding: .35rem .85rem; border-radius: 999px; white-space: nowrap;
  background: var(--secondary); color: var(--primary);
  font-size: .72rem; font-weight: 600; letter-spacing: .02em; line-height: 1.2;
  box-shadow: var(--shadow-sm);
}
.lx-port .lx-tag { background: var(--primary); color: var(--secondary); }
@media (max-width: 479px) {
  .lx-tag { font-size: .62rem; padding: .3rem .6rem; bottom: -.75rem; }
}

/* ================= Sobre nós (layout aprovado) ================= */
/* Everything on this page shows right away (no scroll reveal) */
body[data-page="sobre"] .reveal { opacity: 1; transform: none; }

.sb-label { color: var(--secondary); letter-spacing: .24em; }
.sb-title {
  font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 800;
  line-height: 1.08; letter-spacing: -.035em; color: var(--text);
}

/* ---------- Hero ---------- */
.sb-hero { position: relative; display: grid; background: var(--bg); overflow: hidden; }
.sb-hero-panel { position: relative; z-index: 1; background: var(--primary); }
.sb-hero-copy { width: min(1180px, 100% - 2.5rem); margin-inline: auto; padding: 3.2rem 0 3.4rem; }
.sb-hero-title {
  max-width: 11ch; margin: 0;
  font-size: clamp(2.6rem, 6.4vw, 4.4rem); font-weight: 800;
  line-height: 1; letter-spacing: -.045em; color: var(--secondary);
}
.sb-hero-text { margin: 1.3rem 0 0; font-size: 1.05rem; font-weight: 500; color: var(--secondary); }
.sb-hero-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; margin-top: 1.8rem; }
.sb-link {
  display: inline-flex; align-items: center; gap: .5rem; padding: .3rem 0;
  font-size: .92rem; font-weight: 700; color: var(--secondary); text-decoration: none;
  border-bottom: 2px solid transparent; transition: border-color .25s ease;
}
.sb-link .bi { transition: transform .25s ease; }
.sb-link:hover { border-color: var(--secondary); }
.sb-link:hover .bi { transform: translateX(3px); }
.sb-hero-note { margin: 2.2rem 0 0; font-size: .78rem; color: color-mix(in srgb, var(--secondary) 75%, transparent); }
.sb-hero-photo { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; object-position: 60% 40%; }

@media (min-width: 960px) {
  .sb-hero { min-height: clamp(520px, 44vw, 640px); }
  .sb-hero-photo {
    position: absolute; inset: 0 0 0 auto; width: 62%; height: 100%; aspect-ratio: auto;
    object-position: 70% 35%;
  }
  .sb-hero-panel {
    display: flex; align-items: center; width: 56%;
    padding-left: max(1.25rem, calc((100vw - 1180px) / 2));
    clip-path: ellipse(100% 175% at 0% 0%);
  }
  .sb-hero-copy { width: auto; margin: 0; padding: 4rem 6rem 4rem 0; }
  .sb-hero-actions { gap: 1.3rem; }
}

/* ---------- Quem somos ---------- */
.sb-who { padding-top: 4.5rem; }
.sb-who-grid { display: grid; gap: 2rem; align-items: stretch; }
.sb-who-copy { align-self: center; min-width: 0; }
.sb-who-copy .section-text { max-width: 22rem; }
.sb-who-figure { margin: 0; min-width: 0; }
.sb-who-figure img {
  display: block; width: 100%; height: 100%; min-height: 18rem; aspect-ratio: 4 / 3;
  object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow);
}
.sb-mission {
  display: flex; flex-direction: column; justify-content: center; gap: .9rem;
  padding: 2.4rem 2rem; border-radius: var(--radius);
  background: var(--secondary); color: var(--surface); box-shadow: var(--shadow);
  transition: transform .3s ease;
}
.sb-mission:hover { transform: translateY(-4px); }
.sb-mission-icon { font-size: 2.6rem; line-height: 1; color: var(--primary); }
.sb-mission-label { margin: .4rem 0 0; color: var(--primary); letter-spacing: .2em; }
.sb-mission-text { margin: 0; font-size: 1.1rem; font-weight: 600; line-height: 1.45; }
@media (min-width: 720px) {
  .sb-who-grid { grid-template-columns: 1.3fr 1fr; }
  .sb-who-copy { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .sb-who-grid { grid-template-columns: 1fr 1.15fr .75fr; gap: 1.6rem; }
  .sb-who-copy { grid-column: auto; padding-right: 1.5rem; }
  .sb-who-figure img { aspect-ratio: auto; min-height: 22rem; }
}

/* ---------- Valores ---------- */
.sb-values { padding-top: 1rem; }
.sb-val-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; margin-top: 2.4rem; }
@media (min-width: 1000px) { .sb-val-grid { grid-template-columns: repeat(4, 1fr); gap: 1.1rem; } }
.sb-val {
  min-width: 0; padding: 2rem 1.2rem 1.8rem; text-align: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius) * .7);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.sb-val:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--primary); }
.sb-val-icon {
  display: grid; place-items: center; width: 3.4rem; height: 3.4rem; margin: 0 auto 1rem;
  border-radius: 50%; background: var(--primary-soft);
  font-size: 1.7rem; line-height: 1; color: var(--secondary);
  transition: background-color .3s ease;
}
.sb-val:hover .sb-val-icon { background: var(--primary); }
.sb-val h3 { font-size: 1rem; font-weight: 700; line-height: 1.3; color: var(--text); }
.sb-val p { margin: .45rem auto 0; max-width: 12rem; font-size: .86rem; color: var(--muted); }

/* ---------- Como trabalhamos ---------- */
.sb-how { padding-top: 1rem; }
.sb-how-title { max-width: 16ch; }
.sb-steps { display: grid; gap: 1.6rem; margin-top: 2.6rem; counter-reset: none; }
.sb-step { position: relative; display: flex; align-items: center; gap: 1rem; min-width: 0; }
.sb-step-num {
  position: relative; z-index: 1; flex: none;
  display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--primary); color: var(--secondary); font-size: .92rem; font-weight: 800;
  box-shadow: 0 0 0 6px var(--bg); transition: transform .25s ease;
}
.sb-step:hover .sb-step-num { transform: scale(1.08); }
.sb-step-name { font-size: .98rem; font-weight: 700; line-height: 1.3; color: var(--text); }
/* Vertical line on mobile */
.sb-step:not(:last-child)::after {
  content: ""; position: absolute; left: 1.5rem; top: 3rem; width: 1px; height: 1.6rem;
  background: color-mix(in srgb, var(--text) 25%, transparent);
}
@media (min-width: 760px) {
  .sb-steps { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
  .sb-step { flex-direction: column; text-align: center; gap: 1rem; }
  .sb-step-name { max-width: 10rem; }
  .sb-step:not(:last-child)::after {
    left: calc(50% + 2.4rem); right: calc(-50% + 2.4rem); top: 1.5rem; width: auto; height: 1px;
  }
}

/* ---------- Chamada final ---------- */
.sb-cta-wrap { padding: 1rem 0 5rem; }
.sb-cta {
  position: relative; overflow: hidden; isolation: isolate; display: grid;
  border-radius: calc(var(--radius) * 1.5); background: var(--primary); box-shadow: var(--shadow);
}
.sb-cta-photo { display: block; order: 2; width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; }
.sb-cta-panel {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem;
  padding: 2.6rem 1.6rem; background: var(--primary);
}
.sb-cta-title {
  max-width: 11ch; font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 800;
  line-height: 1.05; letter-spacing: -.035em; color: var(--secondary);
}
.sb-cta-text { margin: 0 0 .4rem; font-size: 1rem; font-weight: 500; color: var(--secondary); }
.sb-phone {
  display: inline-flex; align-items: center; gap: .6rem; padding: .3rem .2rem;
  font-size: 1.05rem; font-weight: 700; letter-spacing: .04em; color: var(--secondary); text-decoration: none;
  border-bottom: 2px solid transparent; transition: border-color .25s ease;
}
.sb-phone:hover { border-color: var(--secondary); }
@media (min-width: 900px) {
  .sb-cta { min-height: 26rem; }
  .sb-cta-photo { position: absolute; inset: 0 0 0 auto; z-index: -1; width: 62%; height: 100%; aspect-ratio: auto; object-position: 60% 50%; }
  .sb-cta-panel {
    justify-content: center; width: 56%; padding: 3.4rem 7rem 3.4rem 3.2rem;
    clip-path: ellipse(100% 175% at 0% 0%);
  }
}
@media (max-width: 479px) {
  .sb-hero-actions .btn, .sb-cta-panel .btn { width: 100%; }
}