* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Urbanist', sans-serif;
}

/* ===== PAGE WRAPPER ===== */
/* Reference design canvas: 2002px wide (Figma desktop frame) */

.page {
  position: relative;
  width: 100%;
}

/* ===== LOADING PAGE ===== */

.loading-page {
  position: fixed;
  inset: 0;
  z-index: 9999;
  width: 100%;
  height: 100vh;
  background-color: #9482e2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease;
}

.loading-page.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.loading-page__art {
  width: 224px;
  height: 224px;
  animation: loading-spin 4s linear infinite;
}

@media (max-width: 600px) {
  .loading-page__art {
    width: 178px;
    height: 178px;
  }
}

@keyframes loading-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ===== HERO ===== */

.hero {
  position: relative;
  width: 100%;
  height: 1467px;
  background-color: #c5cc8c;
  overflow: hidden;
}

.back-to-top {
  position: fixed;
  left: 67px;
  top: 36.61px;
  z-index: 1000;
  display: block;
  cursor: pointer;
}

.back-to-top img {
  width: 81px;
  height: 85.02px;
  display: block;
}

.hero__logo {
  position: absolute;
  right: 57px;
  top: 0;
  width: 191px;
  height: 118px;
}

.hero__nav {
  position: absolute;
  left: 50%;
  top: 67.03px;
  transform: translateX(-50%);
  width: 621.57px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 48.858px;
}

.hero__nav a {
  font-family: 'Urbanist', sans-serif;
  font-weight: 700;
  font-size: 24.878px;
  line-height: 22.114px;
  letter-spacing: 1.2439px;
  color: #31443c;
  text-decoration: none;
  white-space: nowrap;
}

.hero__title {
  position: absolute;
  left: 50%;
  top: 251px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 900;
  font-size: 124px;
  line-height: 111.033px;
}

.hero__title-line {
  display: block;
  white-space: nowrap;
}

.hero__title-line--dark {
  color: #31443c;
}

.hero__title-line--pink {
  color: #e5cede;
  -webkit-text-stroke: 10px #31443c;
  paint-order: stroke fill;
}

.hero__dogs {
  position: absolute;
  left: 50%;
  top: 453.06px;
  transform: translateX(-50%);
  width: 971.26px;
  height: 728.09px;
  object-fit: cover;
  pointer-events: none;
}

.hero__pelusa {
  position: absolute;
  width: 111.56px;
  height: 111.65px;
  animation: pelusa-spin 3.67s linear infinite;
}

.hero__pelusa--1 {
  left: calc(50% + 116px);
  top: 175px;
}

.hero__pelusa--2 {
  left: calc(50% - 396px);
  top: 333px;
}

@keyframes pelusa-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.hero__cta {
  position: absolute;
  left: 50%;
  top: 1236.85px;
  transform: translateX(-50%);
  width: 588.43px;
  height: 96.43px;
  background-color: #e9ccde;
  border: 6.28px solid #31443c;
  border-radius: 8.574px;
  font-family: 'Urbanist', sans-serif;
  font-weight: 800;
  font-size: 45.45px;
  line-height: 41.867px;
  letter-spacing: 1.3635px;
  color: #31443c;
  text-align: center;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.hero__hamburger {
  display: none;
}

.hero__mobile-menu {
  display: none;
}

@media (max-width: 600px) {
  .hero {
    height: 780px;
  }

  .back-to-top {
    left: 28.135px;
    top: 73.943px;
  }

  .back-to-top img {
    width: 47.865px;
    height: 50.241px;
  }

  .hero:has(.hero__mobile-menu.is-open) .back-to-top {
    display: none;
  }

  .hero__nav {
    display: none;
  }

  .hero__hamburger {
    display: block;
    position: fixed;
    right: 28.135px;
    top: 90px;
    width: 27px;
    height: 20px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 1000;
  }

  .hero__hamburger img {
    width: 100%;
    height: 100%;
    display: block;
  }

  .hero__mobile-menu {
    display: flex;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    background-color: #2c453b;
    z-index: 999;
    transform: translateX(100%);
    visibility: hidden;
    pointer-events: none;
    transition: transform 300ms linear, visibility 0s linear 300ms;
  }

  .hero__mobile-menu.is-open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    transition: transform 300ms linear, visibility 0s linear 0s;
  }

  .hero__mobile-menu a {
    font-family: 'Urbanist', sans-serif;
    font-weight: 900;
    font-size: 45px;
    color: #ffffff;
    text-decoration: none;
  }

  .hero__mobile-menu-fluff {
    width: 92px;
    margin-top: 8px;
  }

  .hero__mobile-menu-fluff img {
    display: block;
    width: 100%;
    height: auto;
  }

  .hero__logo {
    left: 50%;
    right: auto;
    top: 65px;
    transform: translateX(-50%);
    width: 165px;
    height: 69.6px;
  }

  .hero__title {
    top: 175px;
    font-size: 45px;
    line-height: 40px;
  }

  .hero__title-line--pink {
    -webkit-text-stroke: 4px #31443c;
  }

  .hero__dogs {
    left: calc(50% - 295px);
    top: 236px;
    width: 596px;
    height: 447px;
    transform: none;
  }

  .hero__pelusa {
    width: 47.6px;
    height: 47.6px;
  }

  .hero__pelusa--1 {
    left: calc(50% + 45.29px);
    top: 149px;
  }

  .hero__pelusa--2 {
    left: calc(50% - 155.98px);
    top: 212.99px;
  }

  .hero__cta {
    left: 50%;
    top: 674px;
    width: auto;
    height: 46px;
    padding: 0 28px;
    border-width: 3px;
    border-radius: 7px;
    font-size: 26px;
    line-height: 24px;
    letter-spacing: 0.6514px;
    font-weight: 700;
    white-space: nowrap;
  }
}

/* ===== RECIPE FOR PURRFECTION ===== */

.recipe {
  position: relative;
  width: 100%;
  height: 1625px;
  background-color: #9482e2;
  overflow: hidden;
}

.recipe__heart {
  width: 124.54px;
  height: 128.08px;
  flex-shrink: 0;
  animation: heart-bob 1.4s ease-in-out infinite;
}

.recipe__heart--left {
  transform: scaleX(-1) rotate(-11.11deg);
}

.recipe__heart--right {
  transform: rotate(11.11deg);
}

@keyframes heart-bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -15px; }
}

.recipe__title {
  position: absolute;
  left: 50%;
  top: 166px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 900;
  font-size: 124px;
  line-height: 111.033px;
  color: #ffffff;
  white-space: nowrap;
  text-align: center;
}

.recipe__title-line--top {
  display: flex;
  align-items: center;
  gap: 28px;
}

.recipe__subtitle {
  position: absolute;
  left: 50%;
  top: 443px;
  transform: translateX(-50%);
  width: 837px;
  font-weight: 700;
  font-size: 21px;
  line-height: 23px;
  letter-spacing: -0.21px;
  color: #ffffff;
  text-align: center;
}

/* ===== SERVICES ACCORDION ===== */

.services {
  position: absolute;
  left: 50%;
  top: 624px;
  transform: translateX(-50%);
  width: 1793px;
  height: 848px;
  display: flex;
  gap: 20px;
}

.service-card {
  position: relative;
  height: 848px;
  flex: 0 0 118px;
  border: 4px solid #2c453b;
  border-radius: 17px;
  overflow: hidden;
  transition: flex-basis 400ms ease;
}

.service-card--full-groom { background-color: #c5cc8c; flex-basis: 1379px; }
.service-card--short-coat { background-color: #e9ccde; }
.service-card--shedding { background-color: #e9ccde; }
.service-card--add-ons { background-color: #ffffff; }

.service-card__collapsed {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 250ms ease;
}

.service-card__opened {
  position: absolute;
  inset: 0;
  padding: 50px 55px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms ease;
}

.service-card--full-groom .service-card__collapsed { opacity: 0; }
.service-card--full-groom .service-card__opened { opacity: 1; pointer-events: auto; }

/* Only the card the pointer is actually over expands; everything else (incl.
   gaps between cards) leaves the default (Full Groom open) untouched. */
.services:has(.service-card--short-coat:hover) .service-card--full-groom,
.services:has(.service-card--shedding:hover) .service-card--full-groom,
.services:has(.service-card--add-ons:hover) .service-card--full-groom {
  flex-basis: 118px;
}
.services:has(.service-card--short-coat:hover) .service-card--full-groom .service-card__opened,
.services:has(.service-card--shedding:hover) .service-card--full-groom .service-card__opened,
.services:has(.service-card--add-ons:hover) .service-card--full-groom .service-card__opened {
  opacity: 0;
  pointer-events: none;
}
.services:has(.service-card--short-coat:hover) .service-card--full-groom .service-card__collapsed,
.services:has(.service-card--shedding:hover) .service-card--full-groom .service-card__collapsed,
.services:has(.service-card--add-ons:hover) .service-card--full-groom .service-card__collapsed {
  opacity: 1;
}

.service-card--short-coat:hover,
.service-card--shedding:hover,
.service-card--add-ons:hover {
  flex-basis: 1379px;
}
.service-card--short-coat:hover .service-card__collapsed,
.service-card--shedding:hover .service-card__collapsed,
.service-card--add-ons:hover .service-card__collapsed {
  opacity: 0;
}
.service-card--short-coat:hover .service-card__opened,
.service-card--shedding:hover .service-card__opened,
.service-card--add-ons:hover .service-card__opened {
  opacity: 1;
  pointer-events: auto;
}

.service-card__collapsed-logo {
  height: 85px;
  width: auto;
  display: block;
  transform: rotate(-90deg);
}

.service-card__collapsed-logo--small {
  height: 65px;
}

.service-card__collapsed-group {
  display: flex;
  align-items: center;
  gap: 24px;
  transform: rotate(-90deg);
}

.service-card__collapsed-group img {
  height: 55px;
  width: auto;
  display: block;
}

.service-card__collapsed-label {
  white-space: nowrap;
  font-weight: 700;
  font-size: 21.65px;
  color: #2c453b;
}

.service-card__title-img--full-groom {
  height: 70px;
  display: block;
  margin-bottom: 30px;
}

.service-card__title-img--bath-basics {
  height: 55px;
  display: block;
}

.service-card__subtitle {
  display: block;
  font-weight: 700;
  font-size: 21.65px;
  color: #2c453b;
  margin: 6px 0 30px;
}

.service-card__description {
  font-weight: 500;
  font-size: 21px;
  line-height: 23px;
  letter-spacing: -0.21px;
  color: #2c453b;
  max-width: 520px;
  text-align: justify;
  position: absolute;
  top: 60px;
  right: 55px;
  width: 420px;
}

.service-card__pricing {
  list-style: none;
  margin-top: 40px;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.service-card__pricing li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 3px dashed #2c453b;
  padding-bottom: 6px;
}

.service-card__size {
  font-weight: 700;
  font-size: 42px;
  color: #2c453b;
  white-space: nowrap;
}

.service-card__size em {
  font-style: normal;
  font-weight: 500;
  font-size: 25.645px;
  letter-spacing: -1.54px;
  margin-left: 6px;
}

.service-card__price {
  font-weight: 700;
  font-size: 42px;
  color: #2c453b;
  white-space: nowrap;
}

.service-card__deco {
  position: absolute;
  pointer-events: none;
}

.service-card--full-groom .service-card__deco--bubbles1 { width: 166px; height: 131px; left: 95px; bottom: 55px; transform: rotate(-164deg); }
.service-card--full-groom .service-card__deco--bubbles2 { width: 166px; height: 131px; left: 1090px; bottom: 55px; transform: rotate(152deg); }
.service-card--full-groom .service-card__deco--scissors1 { width: 85px; height: 86px; left: 610px; bottom: 46px; }
.service-card--full-groom .service-card__deco--scissors2 { width: 85px; height: 86px; left: 685px; bottom: 97px; transform: rotate(-165deg); }

.service-card--short-coat .service-card__deco--pelusa1,
.service-card--shedding .service-card__deco--pelusa1 { width: 86px; height: 86px; left: 124px; bottom: 79px; }
.service-card--short-coat .service-card__deco--pelusa2,
.service-card--shedding .service-card__deco--pelusa2 { width: 86px; height: 86px; left: 653px; bottom: 79px; }
.service-card--short-coat .service-card__deco--pelusa3,
.service-card--shedding .service-card__deco--pelusa3 { width: 86px; height: 86px; left: 1182px; bottom: 79px; }
.service-card--short-coat .service-card__deco--stars1,
.service-card--shedding .service-card__deco--stars1 { width: 68px; height: 50px; left: 396px; bottom: 95px; }
.service-card--short-coat .service-card__deco--stars2,
.service-card--shedding .service-card__deco--stars2 { width: 68px; height: 50px; left: 941px; bottom: 95px; }

.service-card__opened--add-ons {
  padding: 45px 50px;
}

.service-card__title-img--add-ons {
  height: 65px;
  display: block;
  margin-bottom: 30px;
}

.addons-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 45px;
}

.addons-item {
  margin-bottom: 26px;
}

.addons-item__name {
  font-weight: 700;
  font-size: 34px;
  line-height: 1.05;
  color: #2c453b;
  display: block;
}

.addons-item__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 2px dashed #2c453b;
  padding-bottom: 4px;
  margin-top: 6px;
  gap: 8px;
}

.addons-item__row:has(.addons-item__name) {
  border-bottom: 2px dashed #2c453b;
}

.addons-item__price {
  font-weight: 700;
  font-size: 34px;
  color: #2c453b;
  white-space: nowrap;
}

.addons-item__sub {
  font-weight: 500;
  font-size: 15px;
  color: #2c453b;
}

.addons-item__price-group {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.addons-item__sub--inline {
  line-height: 1.2;
  text-align: right;
}

.service-card__deco--pawfect {
  width: 130px;
  right: 40px;
  bottom: 35px;
}

.services-mobile {
  display: none;
}

.recipe__subtitle--mobile {
  display: none;
}

@media (max-width: 600px) {
  .recipe {
    height: auto;
    padding-bottom: 0;
  }

  .recipe__title {
    top: 130px;
    font-size: 45px;
    line-height: 40px;
    letter-spacing: -1.2px;
  }

  .recipe__title-line--top {
    gap: 4px;
  }

  .recipe__heart {
    width: 24px;
    height: 24.7px;
  }

  .recipe__subtitle--desktop {
    display: none;
  }

  .recipe__subtitle--mobile {
    display: block;
    position: absolute;
    left: 50%;
    top: 257px;
    transform: translateX(-50%);
    width: 298px;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.3px;
    color: #ffffff;
    text-align: center;
  }

  .recipe__subtitle-underline {
    text-decoration: underline;
  }

  .services {
    display: none;
  }

  .services-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;
    width: 100%;
    padding: 325px 11px 26px;
    background-color: #9482e2;
  }

  .service-row {
    width: 100%;
    max-width: 408px;
    border: 4px solid #2c453b;
    border-radius: 17px;
    overflow: hidden;
  }

  .service-row--full-groom { background-color: #c5cc8c; }
  .service-row--short-coat,
  .service-row--shedding { background-color: #e9ccde; }
  .service-row--add-ons { background-color: #ffffff; }

  .service-row__toggle {
    width: 100%;
    min-height: 93px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 20px;
    background: none;
    border: none;
    cursor: pointer;
  }

  .service-row__collapsed-title {
    height: 29px;
    width: auto;
    display: block;
  }

  .service-row__collapsed-subtitle {
    font-weight: 600;
    font-size: 14.2px;
    color: #2c453b;
  }

  .service-row__panel {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 600ms ease;
  }

  .service-row.is-open .service-row__panel {
    grid-template-rows: 1fr;
  }

  .service-row__panel-inner {
    overflow: hidden;
    min-height: 0;
  }

  .service-row__panel-inner > * {
    padding-left: 24px;
    padding-right: 24px;
  }

  .service-row__desc {
    font-weight: 500;
    font-size: 17.5px;
    line-height: 20px;
    letter-spacing: -1.05px;
    color: #2c453b;
    margin-top: 16px;
  }

  .service-row__pricing {
    list-style: none;
    margin-top: 16px;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .service-row__pricing li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 2px dashed #2c453b;
    padding-bottom: 4px;
  }

  .service-row__size {
    font-weight: 600;
    font-size: 20px;
    color: #2c453b;
  }

  .service-row__size em {
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    margin-left: 3px;
  }

  .service-row__price {
    font-weight: 600;
    font-size: 20px;
    color: #2c453b;
    white-space: nowrap;
  }

  .service-row__note {
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    color: #2c453b;
    margin: 16px 0 20px;
  }


  .addons-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    border-bottom: 2px dashed #2c453b;
    padding: 12px 24px;
  }

  .addons-row--sub {
    padding: 6px 24px;
  }

  .addons-row--header {
    border-bottom: none;
    padding-bottom: 4px;
  }

  .addons-row--last {
    align-items: flex-start;
    margin-bottom: 24px;
  }

  .addons-row:first-child {
    margin-top: 24px;
  }

  .addons-row__name {
    font-weight: 700;
    font-size: 18px;
    line-height: 1.15;
    color: #2c453b;
  }

  .addons-row__price {
    font-weight: 700;
    font-size: 18px;
    color: #2c453b;
    white-space: nowrap;
  }

  .addons-row__price-group {
    display: flex;
    align-items: baseline;
    gap: 8px;
  }

  .addons-row__sub {
    font-weight: 500;
    font-size: 12px;
    color: #2c453b;
    text-align: right;
    line-height: 1.2;
  }

  .addons-row__sub-label {
    font-weight: 500;
    font-size: 14px;
    color: #2c453b;
  }

  .addons-row__sub--right {
    max-width: 130px;
  }
}

/* ===== REVIEWS ===== */

.reviews {
  position: relative;
  width: 100%;
  height: 1326px;
  background-color: #ffffff;
  overflow: hidden;
}

.reviews__chispitas {
  position: absolute;
  animation: chispitas-pulse 1.1s linear infinite;
}

.reviews__chispitas--left {
  left: calc(50% - 636px);
  top: 166.84px;
  width: 152.9px;
  height: 124.2px;
}

@keyframes chispitas-pulse {
  0% { scale: 1.2 1.2; }
  54.545% { scale: 1 1; }
  100% { scale: 1.2 1.2; }
}

.reviews__title {
  position: absolute;
  left: 50%;
  top: 235px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 900;
  font-size: 124px;
  line-height: 111.033px;
  color: #9482e2;
  white-space: nowrap;
  text-align: center;
}

.reviews__subtitle {
  position: absolute;
  left: 50%;
  top: 512px;
  transform: translateX(-50%);
  width: 837px;
  font-weight: 700;
  font-size: 21px;
  line-height: 23px;
  letter-spacing: -0.21px;
  color: #9482e2;
  text-align: center;
}

.reviews__carousel {
  position: absolute;
  left: 0;
  top: 660px;
  width: 100%;
  overflow-x: auto;
  cursor: grab;
  scrollbar-width: none;
}

.reviews__carousel.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

.reviews__carousel::-webkit-scrollbar {
  display: none;
}

.reviews__track {
  display: flex;
  gap: 76px;
  width: max-content;
  padding: 0 104px;
}

.reviews__card {
  width: 721.18px;
  height: 368.57px;
  flex-shrink: 0;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
}

.reviews-mobile {
  display: none;
}

@media (max-width: 600px) {
  .reviews {
    height: 1220px;
  }

  .reviews__chispitas--left,
  .reviews__title,
  .reviews__subtitle,
  .reviews__carousel {
    display: none;
  }

  .reviews-mobile {
    display: block;
  }

  .reviews-mobile__chispitas {
    position: absolute;
    left: calc(50% - 159px);
    top: 89px;
    width: 79.337px;
    height: 61.604px;
    animation: chispitas-pulse 1.1s linear infinite;
  }

  .reviews-mobile__title {
    position: absolute;
    left: calc(50% - 5.5px);
    top: 129px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 900;
    font-size: 45px;
    line-height: 40px;
    color: #9482e2;
    white-space: nowrap;
    text-align: center;
  }

  .reviews-mobile__list {
    position: absolute;
    left: calc(50% - 182px);
    top: 273px;
    width: 364px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .reviews-mobile__card {
    box-sizing: border-box;
    width: 310.912px;
    background-color: #eaddff;
    border: 2.442px solid #2c453b;
    border-radius: 19.534px;
    padding: 19.534px;
    box-shadow: 0px 3.256px 0px rgba(44, 69, 59, 0.15);
    display: flex;
    flex-direction: column;
    gap: 13.022px;
  }

  .reviews-mobile__stars {
    display: block;
    height: 14.65px;
    width: 86.274px;
  }

  .reviews-mobile__text {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 12.209px;
    line-height: 17.906px;
    color: #31443c;
  }

  .reviews-mobile__divider {
    width: 100%;
    height: 0.814px;
    background-color: #2c453b;
    opacity: 0.2;
  }

  .reviews-mobile__author {
    display: flex;
    align-items: center;
    gap: 6.511px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 11.395px;
    letter-spacing: 0.8139px;
    color: #31443c;
    text-transform: uppercase;
  }

  .reviews-mobile__heart {
    display: block;
    width: 11.395px;
    height: 11.395px;
  }
}

/* ===== ABOUT / MEET TATIANA ===== */

.about {
  position: relative;
  width: 100%;
  height: 1762px;
  background-color: #c5cc8c;
  overflow: hidden;
}

.about__title {
  position: absolute;
  left: 50%;
  top: 195px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 900;
  font-size: 124px;
  line-height: 111.033px;
  white-space: nowrap;
  text-align: center;
}

.about__title-line--dark {
  color: #2c453b;
}

.about__title-line--pink {
  color: #e5cede;
  -webkit-text-stroke: 10px #2c453b;
  paint-order: stroke fill;
}

.about__title-line--with-heart {
  display: flex;
  align-items: center;
  gap: 24px;
}

.about__heart {
  width: 127.82px;
  height: 131.15px;
  flex-shrink: 0;
  transform: scaleX(-1) rotate(-13.32deg);
  animation: heart-bob 1.4s ease-in-out infinite;
}

.about__card-title-line--with-chispitas {
  display: flex;
  align-items: center;
  gap: 20px;
}

.about__chispitas {
  width: 152.9px;
  height: 124.22px;
  flex-shrink: 0;
  animation: chispitas-pulse 1.1s linear infinite;
}

.about__card {
  position: absolute;
  left: calc(50% - 779px);
  top: 555px;
  width: 1015px;
  height: 791px;
  background-color: #f5f5f3;
}

.about__badge {
  position: absolute;
  left: -68px;
  top: 35.03px;
  width: 351.71px;
  height: 159.13px;
  background-color: #e9ccde;
  transform: rotate(-11.88deg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.about__badge-label {
  font-family: 'Gaegu', cursive;
  font-weight: 700;
  font-size: 48.979px;
  line-height: 0.62;
  color: #2c453b;
  text-align: center;
  text-transform: uppercase;
}

.about__card-title {
  position: absolute;
  left: 60px;
  top: 131px;
  width: 877px;
  display: flex;
  flex-direction: column;
  font-weight: 900;
  font-size: 124px;
  line-height: 111.033px;
  color: #2c453b;
  white-space: nowrap;
}

.about__card-text {
  position: absolute;
  left: 68px;
  top: 400px;
  width: 780px;
  font-weight: 500;
  font-size: 42px;
  line-height: 41px;
  color: #2c453b;
}

.about__dog-photo {
  position: absolute;
  left: 240px;
  top: 600.6px;
  width: 453.39px;
  height: 453.39px;
  border-radius: 50%;
  border: 8px solid #9482e2;
  overflow: hidden;
  transform: rotate(-26.75deg);
}

.about__dog-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about__tati-photo {
  position: absolute;
  left: calc(50% + 227.21px);
  top: 488.7px;
  width: 606.545px;
  height: 889.491px;
  transform: rotate(4.34deg);
  overflow: hidden;
}

.about__tati-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about__pushpin {
  position: absolute;
  width: 140px;
  height: 200px;
}

.about__pushpin img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.about__pushpin--left {
  left: calc(50% - 864.45px);
  top: 980.88px;
  transform: scaleY(-1) rotate(152deg);
}

.about__pushpin--right {
  left: calc(50% - 10.56px);
  top: 1172.31px;
  transform: rotate(28deg);
}

.about__title--mobile {
  display: none;
}

.about__collar {
  display: none;
}

.about__card-heart-mobile {
  display: none;
}

@media (max-width: 600px) {
  .about {
    height: 800px;
  }

  .about__title--desktop {
    display: none;
  }

  .about__title--mobile {
    display: flex;
  }

  .about__title {
    left: 50%;
    top: 165px;
    font-size: 45px;
    line-height: 40px;
  }

  .about__title-line--pink {
    -webkit-text-stroke: 4px #2c453b;
  }

  .about__collar {
    display: block;
    position: absolute;
    left: 50%;
    top: 310px;
    transform: translateX(-50%);
    width: 300px;
    height: 59.5px;
  }

  .about__card {
    left: calc(50% - 165px);
    top: 390px;
    width: 333px;
    height: 314px;
  }

  .about__badge {
    left: -10px;
    top: -6px;
    width: 112.378px;
    height: 50.846px;
    transform: rotate(-11.88deg);
  }

  .about__badge-label {
    font-size: 15.65px;
  }

  .about__card-title {
    left: 24px;
    top: 45px;
    width: 150px;
    font-weight: 700;
    font-size: 22px;
    line-height: 21px;
  }

  .about__card-title-line--with-chispitas {
    gap: 6px;
  }

  .about__chispitas {
    width: 30px;
    height: 24.4px;
  }

  .about__card-heart-mobile {
    display: block;
    position: absolute;
    left: 130px;
    top: 8px;
    width: 26px;
    height: 27px;
    transform: rotate(24.06deg);
  }

  .about__card-text {
    left: 27px;
    top: 195px;
    width: 270px;
    font-size: 17.5px;
    line-height: 20px;
    letter-spacing: -1.05px;
  }

  .about__dog-photo {
    left: 103px;
    top: 280px;
    width: 130px;
    height: 130px;
    border-width: 5px;
    transform: rotate(-26.75deg);
  }

  .about__tati-photo {
    left: calc(50% - 10px);
    top: 310px;
    width: 210px;
    height: 291px;
    transform: rotate(4.34deg);
  }

  .about__pushpin {
    width: 52.051px;
    height: 57.625px;
  }

  .about__pushpin--left {
    left: calc(50% - 197px);
    top: 615.5px;
  }

  .about__pushpin--right {
    left: calc(50% + 142px);
    top: 691.5px;
  }
}

/* ===== FOOTER ===== */

.footer {
  position: relative;
  width: 100%;
  height: 1743px;
  background-color: #c5cc8c;
  overflow: hidden;
}

.footer__title {
  position: absolute;
  left: 50%;
  top: 109px;
  transform: translateX(-50%);
  font-weight: 700;
  font-size: 42px;
  line-height: 36px;
  color: #2c453b;
  white-space: nowrap;
  text-align: center;
}

.footer__social {
  position: absolute;
  top: 317px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 58.392px;
}

.footer__social-icon {
  width: 75.909px;
  height: 75.909px;
  display: block;
}

.footer__social a,
.footer__social p {
  font-weight: 500;
  font-size: 46.256px;
  line-height: 41.117px;
  color: #31443c;
  text-align: center;
  white-space: nowrap;
}

.footer__social a {
  text-decoration: underline;
  cursor: pointer;
}

.footer__social--ig {
  left: calc(50% - 704px);
  top: 337.57px;
}

.footer__social--tiktok {
  left: calc(50% - 186.68px);
}

.footer__social--tiktok .footer__social-icon {
  width: 81.748px;
  height: 91.967px;
}

.footer__social--whatsapp {
  left: calc(50% + 315px);
}

.footer__social--whatsapp .footer__social-icon {
  width: 91px;
  height: 91px;
}

.footer__scroller {
  position: absolute;
  left: 0;
  top: 700px;
  width: 100%;
  height: 613px;
  overflow: hidden;
}

.footer__scroller-track {
  display: flex;
  align-items: center;
  gap: 17.023px;
  width: max-content;
  height: 100%;
  animation: scroller-loop 13000ms linear infinite;
}

.footer__scroller-track img {
  height: 612.34px;
  width: auto;
  display: block;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 8px;
}

@keyframes scroller-loop {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.footer__credits {
  position: absolute;
  left: 40px;
  right: 40px;
  top: 1634.5px;
  display: flex;
  justify-content: space-between;
  font-family: 'Urbanist', sans-serif;
  font-weight: 700;
  font-size: 29.553px;
  color: #31443c;
  white-space: nowrap;
}

.footer__title--mobile {
  display: none;
}

@media (max-width: 600px) {
  .footer {
    height: 1030px;
  }

  .footer__title--desktop {
    display: none;
  }

  .footer__title--mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .footer__title {
    top: 45px;
    font-weight: 900;
    font-size: 45px;
    line-height: 40px;
    color: #e5cede;
    -webkit-text-stroke: 4px #2c453b;
    paint-order: stroke fill;
  }

  .footer__social {
    top: auto;
    left: 50%;
    transform: translateX(-50%);
    gap: 20px;
  }

  .footer__social--ig {
    top: 190px;
  }

  .footer__social--tiktok {
    top: 369px;
  }

  .footer__social--whatsapp {
    top: 548px;
  }

  .footer__social-icon {
    width: 47.982px;
    height: 47.982px;
  }

  .footer__social--tiktok .footer__social-icon {
    width: 51.673px;
    height: 58.132px;
  }

  .footer__social--whatsapp .footer__social-icon {
    width: 47.982px;
    height: 47.982px;
  }

  .footer__social a,
  .footer__social p {
    font-size: 21px;
    line-height: 19px;
  }

  .footer__scroller {
    top: 700px;
    height: 220px;
  }

  .footer__scroller-track img {
    height: 220px;
  }

  .footer__credits {
    top: 950px;
    left: 24px;
    right: 24px;
    font-size: 15px;
  }
}