.hero {
  min-height: calc(100vh - 80px);
  padding: 6rem 0;

  display: flex;
  align-items: center;

  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 480px);
  gap: 4rem;
  align-items: center;
}

.hero__content {
  max-width: 720px;
}

.hero__eyebrow {
  display: inline-flex;

  margin-bottom: 1rem;
  padding: 0.45rem 0.95rem;

  border-radius: var(--radius-pill);

  background: rgba(231, 121, 151, 0.12);
  color: var(--color-brand);

  font-weight: 900;
}

.hero h1 {
  margin-bottom: 1.2rem;
}

.hero p {
  max-width: 620px;
  margin-bottom: 1.5rem;

  font-size: 1.2rem;
}

.hero__benefits {
  display: grid;
  gap: 0.8rem;

  margin-bottom: 2rem;

  list-style: none;
}

.hero__benefits li {
  display: flex;
  align-items: center;
  gap: 0.7rem;

  color: var(--color-text);
  font-weight: 700;
}

.hero__benefits span {
  width: 1.6rem;
  height: 1.6rem;
  min-width: 1.6rem;

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

  border-radius: 999px;

  background: rgba(231, 121, 151, 0.14);
  color: var(--color-brand);
  font-size: 0.9rem;
  font-weight: 900;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.hero__media {
  position: relative;
}

.hero__image-card {
  position: relative;

  padding: 0.8rem;

  border: 1px solid var(--color-border);
  border-radius: 2rem;

  background: var(--color-surface);
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.12);
}

.hero__image-card::before {
  content: "";

  position: absolute;
  inset: -2rem -2rem auto auto;

  width: 12rem;
  height: 12rem;

  border-radius: 999px;

  background: rgba(231, 121, 151, 0.18);

  z-index: -1;
}

.hero__image-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;

  border-radius: 1.5rem;
}

.hero__floating-card {
  position: absolute;
  left: -2rem;
  bottom: 2rem;

  max-width: 230px;

  padding: 1rem 1.1rem;

  border: 1px solid var(--color-border);
  border-radius: 1.2rem;

  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);

  box-shadow: 0 18px 56px rgba(15, 23, 42, 0.16);
}

.hero__floating-card strong {
  display: block;

  margin-bottom: 0.2rem;

  color: var(--color-brand);
  font-size: 1.1rem;
}

.hero__floating-card span {
  display: block;

  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.4;
}

.hero.section-childish::before {
  opacity: 0.52;

  background-size: 480px auto;
}

.error-page,
.service-detail {
  min-height: calc(100vh - 80px);

  display: flex;
  align-items: center;

  padding: 6rem 0;
}

.error-page__content,
.service-detail__content {
  max-width: 720px;
}

.hero__badge {
  display: inline-flex;

  margin-bottom: 1rem;
  padding: 0.4rem 0.9rem;

  border-radius: var(--radius-pill);

  background: rgba(231, 121, 151, 0.12);
  color: var(--color-brand);

  font-weight: 700;
}

/* .hero__brand{

    margin-bottom:2rem;

    display:flex;

    align-items:center;

    position:relative;
} */

/* .hero__brand::before{

    content:"";

    position:absolute;

    inset:-35px;

    background:

        radial-gradient(

            circle,

            rgba(255,255,255,.72),

            rgba(255,255,255,.18),

            transparent

        );

    z-index:-1;

    border-radius:50%;
} */

/* .hero__brand img{

    width:min(100%,540px);

    height:auto;

    display:block;

    filter:
        drop-shadow(
            0 18px 35px
            rgba(0,0,0,.12)
        );

    animation:
        heroLogoFloat
        6s ease-in-out infinite;
} */

/* @keyframes heroLogoFloat{

    0%{

        transform:
            translateY(0);
    }

    50%{

        transform:
            translateY(-6px);
    }

    100%{

        transform:
            translateY(0);
    }

} */

.error-page h1,
.service-detail h1 {
  margin-bottom: 1.2rem;
}

.error-page p,
.service-detail p {
  max-width: 560px;

  margin-bottom: 2rem;

  font-size: 1.2rem;
}

.error-page__code {
  display: inline-flex;

  margin-bottom: 1rem;

  font-size: 5rem;
  font-weight: 900;
  line-height: 1;

  color: var(--color-brand);
}

@media (max-width: 960px) {
  .hero {
    padding: 4rem 0;
  }

  .hero__grid {
    grid-template-columns: 1fr;
  }

  .hero__media {
    max-width: 520px;
  }
}

@media (max-width: 560px) {
  .hero__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .hero__actions .btn {
    width: 100%;
  }

  .hero__floating-card {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;

    max-width: none;
  }
}

.section-eyebrow {
  display: inline-flex;

  margin-bottom: 1rem;
  padding: 0.45rem 0.95rem;

  border-radius: var(--radius-pill);

  background: rgba(231, 121, 151, 0.12);
  color: var(--color-brand);

  font-weight: 900;
}

.services-section {
  padding: 6rem 0;

  background:
    radial-gradient(
      circle at top left,
      rgba(231, 121, 151, 0.09),
      transparent 34rem
    ),
    var(--color-background);
}

.services-section__header {
  max-width: 720px;

  margin-bottom: 3rem;
}

.services-section__header h2 {
  margin-bottom: 1rem;

  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
}

.services-section__header p {
  font-size: 1.15rem;
}

.services-section__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
}

.services-section.section-childish::before {
  opacity: 0.36;
}

.service-card {
  padding: var(--space-8);

  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.service-card__icon {
  width: 3.25rem;
  height: 3.25rem;

  margin-bottom: var(--space-5);

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

  border-radius: var(--radius-md);

  background: var(--color-brand-soft);

  font-size: var(--font-size-2xl);
}

.service-card h3 {
  margin-bottom: var(--space-3);
  font-size: var(--font-size-xl);
}

.service-card p {
  margin-bottom: var(--space-6);
  color: var(--color-text-muted);
}

.service-card__link {
  margin-top: auto;

  display: inline-flex;
  align-items: center;
  gap: var(--space-2);

  color: var(--color-brand);
  text-decoration: none;

  font-weight: 900;

  transition: gap var(--transition-base);
}

.service-card__link:hover {
  gap: var(--space-3);
}

@media (max-width: 1180px) {
  .services-section__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .services-section__grid {
    grid-template-columns: 1fr;
  }
}

.about-section {
  padding: 6rem 0;

  background: var(--color-surface);
}

.about-section__grid {
  display: grid;
  grid-template-columns: minmax(300px, 480px) minmax(0, 1fr);
  gap: 4rem;
  align-items: center;
}

.about-section__media {
  position: relative;
}

.about-section__image-card {
  padding: 0.75rem;

  border: 1px solid var(--color-border);
  border-radius: 2rem;

  background: var(--color-surface);
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.12);
}

.about-section__image-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;

  border-radius: 1.5rem;
}

.about-section__credential {
  position: absolute;
  right: -1.5rem;
  bottom: 2rem;

  max-width: 260px;

  padding: 1rem 1.1rem;

  border: 1px solid var(--color-border);
  border-radius: 1.2rem;

  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);

  box-shadow: 0 18px 56px rgba(15, 23, 42, 0.16);
}

.about-section__credential strong {
  display: block;

  margin-bottom: 0.25rem;

  color: var(--color-brand);
}

.about-section__credential span {
  display: block;

  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.4;
}

.about-section__content h2 {
  max-width: 680px;

  margin-bottom: 1rem;

  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
}

.about-section__content p {
  max-width: 680px;

  margin-bottom: 1.5rem;

  font-size: 1.15rem;
}

.about-section__highlights {
  display: grid;
  gap: 0.85rem;

  margin-bottom: 2rem;

  list-style: none;
}

.about-section__highlights li {
  display: flex;
  align-items: center;
  gap: 0.7rem;

  color: var(--color-text);
  font-weight: 700;
}

.about-section__highlights span {
  width: 1.6rem;
  height: 1.6rem;

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

  border-radius: 999px;

  background: rgba(231, 121, 151, 0.14);
  color: var(--color-brand);

  font-size: 0.9rem;
  font-weight: 900;
}

.about-section__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

@media (max-width: 960px) {
  .about-section__grid {
    grid-template-columns: 1fr;
  }

  .about-section__media {
    max-width: 520px;
  }
}

@media (max-width: 560px) {
  .about-section__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .about-section__actions .btn {
    width: 100%;
  }

  .about-section__credential {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;

    max-width: none;
  }
}

.trust-section {
  padding: 6rem 0;

  background:
    linear-gradient(180deg, rgba(231, 121, 151, 0.06), rgba(255, 255, 255, 0)),
    var(--color-background);
}

.trust-section__header {
  max-width: 760px;

  margin-bottom: 3rem;
}

.trust-section__header h2 {
  margin-bottom: 1rem;

  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
}

.trust-section__header p {
  font-size: 1.15rem;
}

.trust-section__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;

  margin-bottom: 1.5rem;
}

.trust-card {
  padding: 2rem;

  background: var(--color-surface);

  border: 1px solid var(--color-border);
  border-radius: 1.5rem;

  box-shadow: var(--shadow-sm);

  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.trust-card:hover {
  transform: translateY(-6px);

  border-color: rgba(231, 121, 151, 0.28);

  box-shadow: 0 22px 70px rgba(15, 23, 42, 0.1);
}

.trust-card__icon {
  width: 3.25rem;
  height: 3.25rem;

  margin-bottom: 1.25rem;

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

  border-radius: 1rem;

  background: rgba(231, 121, 151, 0.12);

  font-size: 1.5rem;
}

.trust-card h3 {
  margin-bottom: 0.75rem;

  font-size: 1.25rem;
}

.trust-card p {
  color: var(--color-text-muted);
}

.trust-section__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;

  padding: 1rem;

  border: 1px solid var(--color-border);
  border-radius: 1.5rem;

  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(10px);
}

.trust-stat {
  padding: 1.5rem;

  border-radius: 1rem;

  background: var(--color-surface);

  text-align: center;
}

.trust-stat strong {
  display: block;

  margin-bottom: 0.35rem;

  color: var(--color-brand);

  font-size: clamp(1.8rem, 4vw, 2.5rem);
  line-height: 1;
}

.trust-stat span {
  color: var(--color-text-muted);

  font-weight: 700;
}

@media (max-width: 960px) {
  .trust-section__grid,
  .trust-section__stats {
    grid-template-columns: 1fr;
  }
}

.testimonials-section {
  padding: 6rem 0;

  background: var(--color-surface);
}

.testimonials-section__header {
  max-width: 760px;

  margin-bottom: 3rem;
}

.testimonials-section__header h2 {
  margin-bottom: 1rem;

  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
}

.testimonials-section__header p {
  font-size: 1.15rem;
}

.testimonials-section__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.testimonial-card {
  padding: 2rem;

  display: flex;
  flex-direction: column;
  gap: 1.25rem;

  background: var(--color-background);

  border: 1px solid var(--color-border);
  border-radius: 1.5rem;

  box-shadow: var(--shadow-sm);

  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.testimonial-card:hover {
  transform: translateY(-6px);

  border-color: rgba(231, 121, 151, 0.28);

  box-shadow: 0 22px 70px rgba(15, 23, 42, 0.1);
}

.testimonial-card__rating {
  display: flex;
  gap: 0.15rem;

  color: #f59e0b;
  font-size: 1.1rem;
}

.testimonial-card blockquote {
  color: var(--color-text);
  font-size: 1.05rem;
  line-height: 1.7;
}

.testimonial-card footer {
  margin-top: auto;

  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.testimonial-card strong {
  color: var(--color-text);
}

.testimonial-card span {
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

@media (max-width: 960px) {
  .testimonials-section__grid {
    grid-template-columns: 1fr;
  }
}

.final-cta {
  padding: 6rem 0;

  background:
    radial-gradient(
      circle at top right,
      rgba(231, 121, 151, 0.18),
      transparent 28rem
    ),
    var(--color-background);
}

.final-cta__box {
  padding: clamp(2rem, 6vw, 4rem);

  border: 1px solid var(--color-border);
  border-radius: 2rem;

  background: var(--color-surface);

  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.12);

  text-align: center;
}

.final-cta__box h2 {
  max-width: 820px;

  margin: 0 auto 1rem;

  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.12;
}

.final-cta__box p {
  max-width: 640px;

  margin: 0 auto 2rem;

  font-size: 1.15rem;
}

.final-cta__actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

@media (max-width: 560px) {
  .final-cta__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .final-cta__actions .btn {
    width: 100%;
  }
}

.faq-section {
  padding: 6rem 0;

  background: var(--color-surface);
}

.faq-section__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 4rem;
  align-items: start;
}

.faq-section__header h2 {
  margin-bottom: 1rem;

  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
}

.faq-section__header p {
  max-width: 520px;

  font-size: 1.15rem;
}

.faq.section-childish::before {
  opacity: 0.26;
}

.faq-list {
  display: grid;
  gap: 1rem;
}

.faq-item {
  border: 1px solid var(--color-border);
  border-radius: 1.25rem;

  background: var(--color-background);

  overflow: hidden;
}

.faq-item__button {
  width: 100%;

  padding: 1.25rem 1.4rem;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;

  border: 0;

  background: transparent;
  color: var(--color-text);

  font: inherit;
  font-weight: 900;
  text-align: left;

  cursor: pointer;
}

.faq-item__icon {
  width: 2rem;
  height: 2rem;

  flex: 0 0 auto;

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

  border-radius: 999px;

  background: rgba(231, 121, 151, 0.12);
  color: var(--color-brand);

  font-weight: 900;

  transition:
    transform var(--transition-base),
    background var(--transition-base);
}

.faq-item.is-open .faq-item__icon {
  transform: rotate(45deg);

  background: var(--color-brand);
  color: #ffffff;
}

.faq-item__panel {
  max-height: 0;

  overflow: hidden;

  transition: max-height var(--transition-base);
}

.faq-item__panel p {
  padding: 0 1.4rem 1.25rem;

  color: var(--color-text-muted);
}

@media (max-width: 960px) {
  .faq-section__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

.google-reviews-section {
  overflow: hidden;
}

.google-reviews-section__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: var(--space-8);
  align-items: end;

  margin-bottom: var(--space-12);
}

.google-reviews-section.section-childish::before {
  opacity: 0.3;
}

.google-reviews-summary {
  padding: var(--space-6);

  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);

  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(12px);

  box-shadow: var(--shadow-sm);

  text-align: center;
}

.google-reviews-summary strong {
  display: block;

  color: var(--color-brand);

  font-size: 2.6rem;
  line-height: 1;
}

.google-reviews-summary div {
  margin: var(--space-2) 0;

  color: #f59e0b;
  letter-spacing: 0.08em;
}

.google-reviews-summary small {
  color: var(--color-text-muted);
  font-weight: 800;
}

.google-reviews-section__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

.google-review-card {
  padding: var(--space-8);

  display: flex;
  flex-direction: column;
  gap: var(--space-5);

  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);

  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);

  box-shadow: var(--shadow-sm);

  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.google-review-card:hover {
  transform: translateY(-6px);
  border-color: rgba(231, 121, 151, 0.32);
  box-shadow: var(--shadow-md);
}

.google-review-card__stars {
  color: #f59e0b;
  letter-spacing: 0.06em;
}

.google-review-card blockquote {
  color: var(--color-text);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
}

.google-review-card footer {
  margin-top: auto;

  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.google-review-card footer strong {
  color: var(--color-text);
}

.google-review-card footer span {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: 700;
}

.google-reviews-section__actions {
  margin-top: var(--space-8);

  display: flex;
  justify-content: center;
}

@media (max-width: 960px) {
  .google-reviews-section__header {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .google-reviews-summary {
    max-width: 260px;
  }

  .google-reviews-section__grid {
    grid-template-columns: 1fr;
  }

  .google-reviews-section__actions {
    justify-content: flex-start;
  }
}

.location-section {
  overflow: hidden;
}

.location-section__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
  gap: var(--space-12);
  align-items: center;
}

.location-info-card {
  max-width: 520px;

  margin-top: var(--space-8);
  padding: var(--space-5);

  display: flex;
  align-items: flex-start;
  gap: var(--space-4);

  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);

  background: var(--color-background);
}

.location-info-card > span {
  width: 3rem;
  height: 3rem;

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

  border-radius: var(--radius-md);

  background: var(--color-accent-soft);

  font-size: var(--font-size-2xl);
}

.location-info-card strong {
  display: block;
  margin-bottom: var(--space-1);
}

.location-info-card p {
  margin: 0;
}

.location-section__visual {
  display: grid;
  gap: var(--space-5);
}

.location-map-card {
  min-height: 280px;

  display: grid;
  place-items: center;

  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);

  background:
    linear-gradient(
      135deg,
      rgba(74, 168, 216, 0.14),
      rgba(231, 121, 151, 0.12)
    ),
    var(--color-background);

  text-decoration: none;

  box-shadow: var(--shadow-sm);

  overflow: hidden;

  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.location-map-card:hover {
  transform: translateY(-4px);
  border-color: rgba(74, 168, 216, 0.32);
  box-shadow: var(--shadow-md);
}

.location-map-card__placeholder {
  text-align: center;
}

.location-map-card__placeholder span {
  display: block;

  margin-bottom: var(--space-3);

  font-size: 3rem;
}

.location-map-card__placeholder strong {
  display: block;

  color: var(--color-text);

  font-size: var(--font-size-xl);
}

.location-map-card__placeholder small {
  display: block;

  margin-top: var(--space-1);

  color: var(--color-text-muted);

  font-weight: 700;
}

.location-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.location-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;

  object-fit: cover;

  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);

  background: var(--color-background);

  box-shadow: var(--shadow-sm);
}

@media (max-width: 960px) {
  .location-section__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .location-gallery {
    grid-template-columns: 1fr;
  }
}

.gallery-section {
  overflow: hidden;
}

.gallery-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  grid-auto-rows: 260px;
  gap: var(--space-5);
}

.gallery-card {
  position: relative;

  margin: 0;

  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);

  background: var(--color-surface);

  box-shadow: var(--shadow-sm);

  overflow: hidden;

  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.gallery-card:hover {
  transform: translateY(-6px);
  border-color: rgba(231, 121, 151, 0.32);
  box-shadow: var(--shadow-md);
}

.gallery-card-large {
  grid-row: span 2;
}

.gallery-card img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.gallery-card figcaption {
  position: absolute;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);

  padding: var(--space-3) var(--space-4);

  border-radius: var(--radius-pill);

  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(12px);

  color: var(--color-text);

  font-size: var(--font-size-sm);
  font-weight: 850;

  box-shadow: var(--shadow-sm);
}

@media (max-width: 960px) {
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 240px;
  }

  .gallery-card-large {
    grid-column: span 2;
    grid-row: auto;
  }
}

@media (max-width: 620px) {
  .gallery-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 240px;
  }

  .gallery-card-large {
    grid-column: auto;
  }
}

/**
 * Hero — floating card responsivo
 * Regra estrutural do framework.
 *
 * Mantém o card informativo preso à área visual da Hero em tablets
 * e celulares, evitando que ele saia da imagem.
 */

@media (max-width: 768px) {
  .hero__media {
    position: relative;
    width: min(100%, 560px);
    max-width: 100%;
    margin-inline: auto;
    overflow: visible;
  }

  .hero__image-card {
    position: relative;
  }

  .hero__floating-card {
    position: absolute;
    left: clamp(1rem, 3vw, 1.35rem);
    right: auto;
    bottom: clamp(1rem, 3vw, 1.35rem);
    top: auto;

    width: min(300px, calc(100% - 2rem));
    max-width: min(300px, calc(100% - 2rem));

    margin: 0;
    z-index: 3;
  }
}

@media (max-width: 480px) {
  .hero__floating-card {
    left: 0.9rem;
    right: 0.9rem;
    bottom: 0.9rem;

    width: auto;
    max-width: none;
  }
}