/* Converclima home refinements. Every rule is scoped to .template-home (body class). */

.template-home {
  --cc-accent: #8fdcff;
  --cc-cyan-btn: #0797e0;
  --cc-bar: 7rem;
  --hm-depth: linear-gradient(100deg, var(--navy) 0%, #0b4a93 46%, var(--blue) 82%);
}

/* Hero: full-bleed room photo under the transparent header (shared rules in redesign.css), centred headline */

.template-home .ab-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(max(43rem, 30vw), 88svh, 58rem);
  padding: calc(var(--header-height) + 48px) 0 72px;
  overflow: hidden;
  background: #0b2748;
  color: #fff;
  text-align: center;
}

.template-home .ab-hero__photo { position: absolute; z-index: -1; inset: 0; overflow: hidden; }
.template-home .ab-hero__photo picture { display: contents; }
.template-home .ab-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 75% 42%;
}
.template-home .ab-hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 55% at 50% 52%, rgb(0 20 45 / .65) 0%, rgb(0 20 45 / .3) 60%, rgb(0 20 45 / .1) 100%),
    linear-gradient(180deg, rgb(0 20 45 / .35) 0%, rgb(0 20 45 / 0) 30%, rgb(0 20 45 / .35) 100%);
}

.template-home .ab-hero__inner { display: flex; flex-direction: column; align-items: center; }
.template-home .ab-hero__nowrap { white-space: nowrap; }

.template-home .ab-hero__title {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: clamp(2rem, 1rem + 3.4vw, 4rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 24px rgb(0 0 0 / .45);
}

.template-home .ab-hero__title .ab-hero__sub {
  display: block;
  margin-top: .35em;
  font-family: "Public Sans", sans-serif;
  font-size: .56em;
  font-weight: 300;
  letter-spacing: .01em;
  text-transform: none;
}

.template-home .ab-hero__lead {
  max-width: 42rem;
  margin: 22px 0 0;
  font-size: clamp(1rem, .95rem + .3vw, 1.1875rem);
  line-height: 1.6;
  color: #fff;
  text-shadow: 0 1px 12px rgb(0 0 0 / .55);
  text-wrap: balance;
}

/* The WhatsApp float stays hidden while the hero is in view (home.js) */

.whatsapp-float { transition: opacity .25s ease, visibility .25s ease; }
body.cc-hero-in-view .whatsapp-float { opacity: 0; visibility: hidden; }


@media (max-width: 720px) {
  .template-home .ab-hero { min-height: clamp(34rem, 150vw, 39rem); align-items: center; padding: calc(var(--header-height) + 96px) 0 40px; }
  .template-home .ab-hero__photo img { object-position: 68% 50%; }
  .template-home .ab-hero__title { font-size: clamp(1.55rem, 8.1vw, 2.75rem); line-height: 1.1; letter-spacing: 0; }
  .template-home .ab-hero__title .ab-hero__sub { font-size: .6em; }
  .template-home .ab-hero__lead { font-size: 1.0625rem; }
}

/* Service cards: height follows content; the arrow uses the brand blue instead of grey */
.template-home .identity-services .identity-heading > p { max-width: 46rem; margin-inline: auto; text-wrap: balance; }
.template-home .identity-service-card { min-height: 0; }
/* Four services: one row on wide screens, two by two on mid widths; narrower widths keep the stacked layout */
@media (min-width: 1181px) {
  .template-home .identity-service-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; row-gap: 58px; }
  .template-home .identity-service-card { padding-inline: 28px; }
}
@media (max-width: 1180px) and (min-width: 901px) {
  .template-home .identity-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; margin-inline: auto; }
}
.template-home .circle-link { background: var(--blue); }
.template-home .circle-link:hover { background: var(--navy); }

/* Visit band follows the hero depth instead of indigo; WhatsApp green meets 4.5:1 with white */
.template-home .visit-band { background: var(--hm-depth); }
.template-home .visit-band p { color: #fff; }
.template-home .visit-band .button--whatsapp { border-color: #15803d; background: #15803d; }
.template-home .visit-band .button--whatsapp:hover { border-color: #116b33; background: #116b33; }

/* Decorative waves and dot grids were clipped at the page edge and ran under the text */
.template-home .home-about.section-decor::before,
.template-home .home-about.section-decor::after,
.template-home .home-blog.section-decor::before,
.template-home .home-blog.section-decor::after { display: none; }

/* Mission photo: the caption band spans the photo edge to edge */
.template-home .mission-visual { padding: 0 0 56px; }
.template-home .mission-visual > p { left: 0; right: 0; width: auto; border-radius: 0 0 4px 4px; }

/* Blog header: the button sits on the heading baseline and never wraps */
.template-home .home-blog .identity-heading--split { align-items: flex-end; }
.template-home .home-blog .identity-heading--split > .button { flex: none; white-space: nowrap; }

/* Tablet and phone: one consistent centred column for headings and copy */
@media (max-width: 720px) {
  .template-home .identity-copy,
  .template-home .mission-copy,
  .template-home .visit-band__grid > div:first-child,
  .template-home .home-blog .identity-heading--split { text-align: center; }
  .template-home .identity-copy h2,
  .template-home .mission-copy h2 { margin-inline: auto; }
  .template-home .identity-list { justify-content: center; text-align: left; }
  .template-home .mission-list { max-width: 26rem; margin-inline: auto; text-align: left; }
  .template-home .visit-band__grid { grid-template-columns: minmax(0, 1fr); }
  .template-home .visit-band__actions { display: grid; grid-template-columns: minmax(0, 1fr); justify-self: stretch; width: 100%; }
  .template-home .visit-band__actions .button { width: 100%; }
  .template-home .home-blog .identity-heading--split { flex-direction: column; align-items: center; gap: 20px; }
  .template-home .home-blog .identity-heading--split > .button { width: auto; }
  .template-home .original-collage { width: 100%; max-width: 30rem; margin-inline: auto; padding-bottom: 0; }
  .template-home .original-collage__small { display: none; }
  .template-home .original-collage__main { width: 100%; border-radius: 4px 4px 0 0; box-shadow: none; }
  .template-home .original-collage__caption,
  .template-home .mission-visual > p { position: static; width: 100%; margin: 0; padding: 16px 20px; border-radius: 0 0 4px 4px; box-shadow: none; font-size: .9375rem; line-height: 1.5; text-align: left; }
  .template-home .mission-visual { max-width: 30rem; padding: 0; }
  .template-home .mission-visual > img { border-radius: 4px 4px 0 0; box-shadow: none; }
}

.template-home .hm-nowrap { white-space: nowrap; }
.template-home .identity-copy .text-link { min-height: 44px; margin-top: 12px; }

/* Headings and intro copy on the service pages' type (service.css .sv-h2, installation.css .ig-text) */
.template-home .identity-heading h2,
.template-home .identity-copy h2,
.template-home .mission-copy > h2,
.template-home .visit-band h2 { font-family: "Open Sans", Arial, sans-serif; font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.4rem); font-weight: 800; line-height: 1.12; letter-spacing: -.028em; text-wrap: balance; }
.template-home .visit-band h2 { color: #fff; }
.template-home .identity-copy > p,
.template-home .identity-services .identity-heading > p { font-size: clamp(1.08rem, 1rem + .35vw, 1.25rem); line-height: 1.7; color: var(--ink); text-wrap: pretty; }
.template-home .text-link { transition: color .2s ease; }
.template-home .text-link:hover { color: var(--navy); }

/* Intro collage: the caption band runs under the whole main photo, the inset photo covers its right end and both end on one line */
.template-home .original-collage__caption { font-family: "Poppins", sans-serif; }
@media (min-width: 721px) {
  .template-home .original-collage { padding-bottom: 0; }
  .template-home .original-collage__main { display: block; border-radius: 4px 4px 0 0; }
  .template-home .original-collage__small { position: absolute; right: 0; bottom: 0; margin: 0; }
  .template-home .original-collage__caption { width: 85%; margin: 0; padding: 22px calc(32% + 24px) 24px 28px; border-radius: 0 0 4px 4px; }
}
/* The intro heading sits as far from its text as on the service pages (installation.css .ig-text) */
.template-home .identity-copy > h2 + p { margin-top: 24px; }

/* Services: one focusable link per card (the title covers the card, the arrow that hangs below it is a mouse-only copy); hover only lights up */
.template-home .identity-service-card { transition: box-shadow .2s ease; }
.template-home .identity-service-card:hover { box-shadow: 0 0 0 1px #b9cde3, 0 0 15px rgb(6 3 62 / .07); }
.template-home .identity-service-card:hover .circle-link { background: var(--navy); }
.template-home .identity-service-card h3 { font-family: "Poppins", sans-serif; font-size: 1.2rem; font-weight: 600; line-height: 1.35; }
.template-home .identity-service-card h3 a { color: var(--navy); }
.template-home .identity-service-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.template-home .identity-service-card h3 a:focus-visible { outline: 0; }
.template-home .identity-service-card:has(a:focus-visible) { outline: 3px solid var(--blue); outline-offset: 3px; }
.template-home .identity-service-card p { font-size: 1rem; line-height: 1.6; }

/* Mission list on the same heading font; the photo stays after its copy on tablets and phones */
.template-home .mission-list h3 { font-family: "Poppins", sans-serif; font-size: 1.1rem; font-weight: 600; }
.template-home .mission-list p { font-size: 1rem; line-height: 1.6; }
@media (max-width: 1024px) {
  .template-home .mission-visual { order: 0; }
}

/* Tips: the same card as the blog and the posts' "Leia também", a rounded photo over the title with no frame; the
   title lights up on hover */
.template-home .home-blog .post-card { padding: 0; border: 0; background: none; }
.template-home .home-blog .post-card__image { height: auto; aspect-ratio: 16 / 10; border-radius: 14px; }
.template-home .home-blog .post-card__body { padding: 16px 0 0; }
.template-home .home-blog .post-card h3 { font-family: "Poppins", sans-serif; font-size: 1.05rem; font-weight: 600; line-height: 1.4; }
.template-home .home-blog .post-card h3 a { color: var(--navy); transition: color .2s ease; }
.template-home .home-blog .post-card:hover h3 a { color: var(--blue); }