/* ===================================================
   SECTIONS — hero, services, team, contact, social, footer
   =================================================== */

/* ===================================================
   1. HERO
   =================================================== */
.hero-section {
  position: relative;
  min-height: 100svh;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: linear-gradient(145deg, var(--cream) 0%, var(--cream-light) 60%, var(--warm-beige) 100%);
  overflow: hidden;
  padding-top: var(--header-height);
}

/* Decorative blobs */
.hero-bg-decorations {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-blob {
  position: absolute;
  width: clamp(260px, 40vw, 520px);
}
.hero-blob-1 { top: -8%; right: -4%; opacity: .7; }
.hero-blob-2 { bottom: -12%; left: -6%; opacity: .6; }

.hero-leaf {
  position: absolute;
  width: clamp(40px, 5vw, 72px);
}
.hero-leaf-1 { top: 18%; right: 30%; transform: rotate(25deg); }
.hero-leaf-2 { bottom: 28%; left: 8%; transform: rotate(-15deg); }

.hero-paw {
  position: absolute;
  width: clamp(36px, 4vw, 60px);
}
.hero-paw-1 { top: 35%; left: 4%; transform: rotate(10deg); }
.hero-paw-2 { bottom: 20%; right: 28%; transform: rotate(-20deg); }

/* Hero layout */
.hero-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--s12);
  padding-top: var(--s12);
  padding-bottom: calc(var(--s12) + 60px); /* account for wave */
}
@media (min-width: 768px) {
  .hero-content {
    grid-template-columns: 1fr 1fr;
    padding-top: var(--s16);
    padding-bottom: calc(var(--s16) + 80px);
  }
}

/* Hero text */
.hero-eyebrow {
  font-family: var(--font-ui);
  font-size: .875rem;
  font-weight: 600;
  color: var(--olive);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: var(--s4);
}

.hero-title {
  font-size: clamp(2.5rem, 7vw, 4.25rem);
  font-weight: 700;
  color: var(--olive-dark);
  line-height: 1.08;
  margin-bottom: var(--s6);
}
.hero-highlight {
  color: var(--gold);
  display: inline-block;
}
.hero-heart {
  display: inline-block;
  width: clamp(28px, 4vw, 44px);
  height: auto;
  vertical-align: middle;
  margin-left: var(--s2);
  margin-top: -4px;
  animation: heartbeat 2.4s ease-in-out infinite;
}
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14%       { transform: scale(1.18); }
  28%       { transform: scale(1); }
  42%       { transform: scale(1.12); }
  70%       { transform: scale(1); }
}

.hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.1875rem);
  color: var(--text-medium);
  font-weight: 300;
  line-height: 1.7;
  margin-bottom: var(--s8);
}

/* Hero illustration */
.hero-illustration {
  display: none;
  justify-content: center;
  align-items: center;
}
@media (min-width: 768px) { .hero-illustration { display: flex; } }

.hero-circle {
  position: relative;
  width: clamp(200px, 28vw, 380px);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-circle-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: float 6s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-14px); }
}
.hero-paw-large {
  position: relative;
  z-index: 1;
  width: 55%;
  opacity: .9;
  animation: float 6s ease-in-out infinite .8s;
}

/* Hero wave */
.section-wave {
  position: absolute;
  bottom: -1px;
  left: 0; right: 0;
}

/* ===================================================
   2. SERVICES
   =================================================== */
.services-section {
  position: relative;
  background: var(--cream-light);
  padding: var(--s24) 0 calc(var(--s24) + 40px);
}
@media (max-width: 767px) { .services-section { padding: var(--s16) 0 calc(var(--s16) + 40px); } }

.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s6);
}
@media (min-width: 768px) {
  .services-grid { grid-template-columns: 1fr 1fr; gap: var(--s8); }
}

/* Service card */
.service-card {
  background: var(--cream);
  border: 1.5px solid var(--warm-beige);
  border-radius: var(--r-lg);
  padding: var(--s8);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t), box-shadow var(--t);
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.service-card-header {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin-bottom: var(--s6);
  padding-bottom: var(--s6);
  border-bottom: 2px solid var(--warm-beige);
}

.service-icon-wrap {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-icon-wrap svg { width: 26px; height: 26px; }
.service-icon-clinic {
  background: rgba(92,94,60,.1);
  color: var(--olive-dark);
}
.service-icon-salon {
  background: rgba(184,144,122,.12);
  color: var(--heart-mauve);
}

.service-card-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--olive-dark);
}

/* Service list */
.service-list {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.service-item {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-size: .9375rem;
  color: var(--text-medium);
  padding: var(--s2) 0;
  border-bottom: 1px dashed rgba(232,223,200,.8);
  transition: color var(--t);
}
.service-item:last-child { border-bottom: none; }
.service-item:hover { color: var(--text-dark); }
.service-item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--gold); }

.service-item-highlight {
  font-weight: 600;
  color: var(--olive-dark);
}

/* Sub-text inside service item (e.g. tosa modalidades) */
.service-item-tosa { align-items: flex-start; }
.service-item-sub {
  display: block;
  font-size: .78rem;
  color: var(--text-medium);
  font-weight: 400;
  margin-top: 2px;
  line-height: 1.5;
  opacity: .85;
}
.service-badge {
  font-family: var(--font-ui);
  font-size: .72rem;
  font-weight: 600;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: #fff;
  padding: 2px 8px;
  border-radius: var(--r-full);
  margin-left: var(--s2);
  vertical-align: middle;
}

/* Bottom wave of services */
.section-wave-cream svg { display: block; }

/* ===================================================
   3. TEAM
   =================================================== */
.team-section {
  position: relative;
  background: var(--cream);
  padding: var(--s24) 0;
}
@media (max-width: 767px) { .team-section { padding: var(--s16) 0; } }

.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s8);
}
@media (min-width: 768px) {
  .team-grid { grid-template-columns: 1fr 1fr; gap: var(--s8); }
}

.team-card {
  background: var(--cream-light);
  border: 1.5px solid var(--warm-beige);
  border-radius: var(--r-lg);
  padding: var(--s8);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s6);
  transition: transform var(--t), box-shadow var(--t);
}
.team-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}
@media (min-width: 480px) {
  .team-card {
    flex-direction: row;
    text-align: left;
    align-items: stretch;
  }
}

/* Photo wrapper */
.team-photo-wrap {
  position: relative;
  flex-shrink: 0;
  align-self: flex-start;
}

.team-photo-placeholder {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--warm-beige), var(--cream));
  border: 3px solid var(--gold);
  box-shadow: 0 0 0 4px rgba(196,163,90,.18);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.team-photo-placeholder svg { width: 80%; height: 80%; }

.team-photo {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--gold);
  box-shadow: 0 0 0 4px rgba(196,163,90,.18);
  display: block;
}

.team-photo-badge {
  position: absolute;
  bottom: 4px; right: 4px;
  width: 28px; height: 28px;
  background: var(--olive-dark);
  border-radius: 50%;
  border: 2px solid var(--cream-light);
  display: flex;
  align-items: center;
  justify-content: center;
}
.team-photo-badge svg { width: 14px; height: 14px; color: var(--cream-light); }
.team-photo-badge-salon { background: var(--heart-mauve); }

/* Photo position variant (top-focus for portraits) */
.team-photo-top { object-position: center top; }

/* Team info — flex column so WA button aligns at bottom */
.team-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Team info */
.team-name {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: var(--s1);
}
.team-role {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: .875rem;
  color: var(--gold);
  margin-bottom: 2px;
}
.team-credential {
  font-size: .8125rem;
  color: var(--text-medium);
  margin-bottom: var(--s4);
  font-family: var(--font-ui);
}
.team-bio {
  font-size: .9375rem;
  color: var(--text-medium);
  line-height: 1.7;
  font-weight: 300;
  margin-bottom: var(--s4);
}

/* WhatsApp button inside team cards */
.btn-team-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  font-family: var(--font-ui);
  font-size: .875rem;
  font-weight: 600;
  color: #25D366;
  border: 1.5px solid #25D366;
  padding: .55rem 1.1rem;
  border-radius: var(--r-full);
  transition: background var(--t), color var(--t);
  margin-top: auto;
  text-decoration: none;
  align-self: flex-start;
}
.btn-team-whatsapp svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn-team-whatsapp:hover { background: #25D366; color: #fff; }

/* ===================================================
   4. CONTACT
   =================================================== */
.contact-section {
  position: relative;
  background: linear-gradient(160deg, var(--cream-light) 0%, var(--warm-beige) 100%);
  padding: 0 0 var(--s24);
}
@media (max-width: 767px) { .contact-section { padding-bottom: var(--s16); } }

.section-wave-top {
  display: block;
  line-height: 0;
  overflow: hidden;
  margin-bottom: var(--s24);
}
@media (max-width: 767px) { .section-wave-top { margin-bottom: var(--s16); } }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s8);
}
@media (min-width: 768px) {
  .contact-grid {
    grid-template-columns: 1.1fr 1fr;
    gap: var(--s12);
    align-items: start;
  }
  /* Hours row spans full width below map + info */
  .contact-hours-row {
    grid-column: 1 / -1;
  }
}

/* Map */
.map-embed {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1.5px solid var(--warm-beige);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--s6);
}
.map-embed iframe { display: block; width: 100%; height: 280px; }
@media (min-width: 768px) { .map-embed iframe { height: 320px; } }

/* Contact items */
.contact-address { display: flex; flex-direction: column; gap: var(--s4); }

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--s4);
  font-size: .9375rem;
}
.contact-item > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.contact-item strong {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: .8125rem;
  color: var(--text-medium);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.contact-item a,
.contact-item span {
  color: var(--text-dark);
  font-size: .9375rem;
  transition: color var(--t);
}
.contact-item a:hover { color: var(--olive-dark); text-decoration: underline; }

.contact-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: var(--cream);
  border: 1.5px solid var(--warm-beige);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--olive);
  margin-top: 2px;
}
.contact-icon svg { width: 18px; height: 18px; }
.contact-icon-whatsapp { color: #25D366; }

/* Hours card */
.hours-card {
  background: var(--cream);
  border: 1.5px solid var(--warm-beige);
  border-radius: var(--r-lg);
  padding: var(--s8);
  box-shadow: var(--shadow-md);
  position: relative;
}

.hours-header {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s6);
  padding-bottom: var(--s4);
  border-bottom: 2px solid var(--warm-beige);
}
.hours-header svg { width: 22px; height: 22px; color: var(--gold); flex-shrink: 0; }
.hours-header h3 { font-size: 1.125rem; color: var(--olive-dark); }

.hours-list { display: flex; flex-direction: column; gap: var(--s2); }
.hours-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-sm);
  font-size: .9375rem;
}
.hours-item-open { background: rgba(107,158,79,.07); }
.hours-item-closed { background: rgba(196,89,74,.05); }

.hours-day {
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--text-dark);
}
.hours-time { color: var(--olive); font-weight: 600; }
.hours-closed { color: var(--error); }

.hours-cta {
  margin-top: var(--s6);
  padding-top: var(--s6);
  border-top: 2px dashed var(--warm-beige);
  text-align: center;
}
.hours-cta p {
  font-size: .875rem;
  color: var(--text-medium);
  margin-bottom: var(--s4);
}

/* Hours cards — stacked mobile, side-by-side on wider screens */
.hours-cards-stack {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}
@media (min-width: 640px) {
  .hours-cards-stack {
    flex-direction: row;
    align-items: stretch;
    gap: var(--s8);
  }
  .hours-cards-stack .hours-card {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }
  /* Push CTA to the bottom so both cards align */
  .hours-cards-stack .hours-cta {
    margin-top: auto;
  }
}

/* Salon hours card variant */
.hours-card-salon {
  border-color: rgba(184,144,122,.35);
}
.hours-header-salon {
  border-bottom-color: rgba(184,144,122,.25);
}
.hours-header-salon svg { color: var(--heart-mauve); }
.hours-header-salon h3 { color: var(--heart-mauve); }

/* Name tag under hours card title */
.hours-tag {
  font-family: var(--font-ui);
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-medium);
  display: block;
  margin-top: 1px;
}

/* Header with two lines (title + tag) */
.hours-header > div { display: flex; flex-direction: column; }

/* Salon CTA button */
.btn.btn-salon,
.btn-salon {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--font-ui);
  font-size: .9375rem;
  font-weight: 600;
  background: linear-gradient(135deg, var(--heart-mauve), #c9a090);
  color: #fff;
  border: none;
  padding: .75rem 1.5rem;
  border-radius: var(--r-full);
  cursor: pointer;
  text-decoration: none;
  transition: opacity var(--t), transform var(--t), box-shadow var(--t);
}
.btn-salon:hover { opacity: .88; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-salon svg { width: 20px; height: 20px; flex-shrink: 0; }

/* Contact persons grid (below address) */
.contact-persons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s4);
}
@media (max-width: 479px) {
  .contact-persons { grid-template-columns: 1fr; }
}

.contact-person { display: flex; flex-direction: column; gap: var(--s2); }

.contact-person-label {
  font-family: var(--font-ui);
  font-size: .75rem;
  font-weight: 600;
  color: var(--olive);
  text-transform: uppercase;
  letter-spacing: .05em;
  padding-bottom: var(--s2);
  border-bottom: 1.5px solid var(--warm-beige);
  margin-bottom: var(--s1);
}

.contact-person .contact-item { gap: var(--s3); }

.contact-decor {
  position: absolute;
  bottom: -24px;
  right: -12px;
  width: 100px;
  height: 100px;
  pointer-events: none;
  opacity: .7;
}

/* ===================================================
   5. SOCIAL
   =================================================== */
.social-section {
  position: relative;
  background: var(--cream-light);
  padding: 0 0 var(--s24);
}
@media (max-width: 767px) { .social-section { padding-bottom: var(--s16); } }

/* Social link buttons */
.social-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s4);
  margin-bottom: var(--s12);
}

.social-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: .9375rem;
  padding: .75rem 1.375rem;
  border-radius: var(--r-full);
  border: 2px solid transparent;
  transition: transform var(--t), box-shadow var(--t), background var(--t), color var(--t);
}
.social-link svg { width: 20px; height: 20px; }
.social-link:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.social-link-instagram {
  background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: #fff;
  border: none;
}
.social-link-facebook  { background: #1877F2; color: #fff; }
.social-link-whatsapp  { background: #25D366; color: #fff; }

/* Instagram gallery */
.instagram-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s3);
}
@media (min-width: 480px) { .instagram-gallery { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .instagram-gallery { grid-template-columns: repeat(6, 1fr); gap: var(--s4); } }

.gallery-item {
  aspect-ratio: 1;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--warm-beige);
  border: 1.5px solid var(--warm-beige);
  transition: transform var(--t), box-shadow var(--t);
}
.gallery-item:hover {
  transform: scale(1.04);
  box-shadow: var(--shadow-md);
}

.gallery-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--warm-beige), var(--cream));
}
.gallery-placeholder svg { width: 65%; height: 65%; }

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.instagram-cta {
  display: flex;
  justify-content: center;
  margin-top: var(--s8);
}
.instagram-cta-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) var(--s6);
  border-radius: var(--r-full);
  background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: opacity var(--t), transform var(--t);
}
.instagram-cta-link svg { width: 18px; height: 18px; }
.instagram-cta-link:hover { opacity: 0.88; transform: translateY(-1px); }

/* ===================================================
   6. FOOTER
   =================================================== */
.site-footer {
  background: var(--olive-dark);
  color: rgba(248,244,234,.8);
}

.footer-wave { line-height: 0; overflow: hidden; }

.footer-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s8);
  padding-top: var(--s12);
  padding-bottom: var(--s12);
}
@media (min-width: 640px)  { .footer-content { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer-content { grid-template-columns: 2fr 1fr 1fr 1fr; } }

/* Brand column */
.footer-logo img { height: 36px; width: auto; filter: brightness(0) invert(1); opacity: .9; margin-bottom: var(--s4); }
.footer-brand-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--gold-light);
  letter-spacing: 0.02em;
  margin-bottom: var(--s4);
}
.footer-tagline {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--gold-light);
  margin-bottom: var(--s3);
}
.footer-desc {
  font-size: .875rem;
  line-height: 1.7;
  color: rgba(248,244,234,.6);
}

/* Nav columns */
.footer-nav-title {
  font-family: var(--font-ui);
  font-size: .75rem;
  font-weight: 600;
  color: var(--gold-light);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: var(--s4);
}

.footer-nav ul,
.footer-contact ul {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.footer-nav a {
  font-size: .9rem;
  color: rgba(248,244,234,.65);
  transition: color var(--t);
}
.footer-nav a:hover { color: var(--gold-light); }

/* Contact column */
.footer-contact li {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: .875rem;
  color: rgba(248,244,234,.65);
}
.footer-contact svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--gold); opacity: .8; }
.footer-contact a:hover { color: var(--gold-light); }

/* Employee CTA */
.footer-employee {
  display: flex;
  align-items: flex-start;
}
.btn-employee-footer {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--font-ui);
  font-size: .875rem;
  font-weight: 600;
  color: rgba(248,244,234,.85);
  padding: .75rem 1.25rem;
  border: 1.5px solid rgba(248,244,234,.2);
  border-radius: var(--r-full);
  transition: background var(--t), border-color var(--t), color var(--t);
}
.btn-employee-footer svg { width: 16px; height: 16px; }
.btn-employee-footer:hover {
  background: rgba(248,244,234,.08);
  border-color: rgba(196,163,90,.5);
  color: var(--gold-light);
}

/* Footer bottom bar */
.footer-bottom {
  border-top: 1px solid rgba(248,244,234,.1);
  padding: var(--s4) 0;
  text-align: center;
}
.footer-bottom p {
  font-size: .8125rem;
  color: rgba(248,244,234,.4);
}