/* ============================================================
   MONARCA STUDIO — Hoja de estilos principal · TEMA OTOÑO
   Paleta: Crema cálido #FBF3E6 / Taupe #B39C86 / Naranja calabaza #C8702A
   Tipografía: Cormorant Garamond (display) + DM Sans (body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap');

/* ── Variables ─────────────────────────────────────────── */
:root {
  --gold:         #C8702A;
  --gold-light:   #E08E45;
  --gold-dark:    #8F4A17;

  --silver:       #B39C86;
  --silver-light: #DCCBB7;
  --silver-dark:  #7E6652;

  --cream:        #FBF3E6;
  --cream-mid:    #F4E4CC;
  --cream-dark:   #EBD3B0;

  --black:        #1F130C;
  --dark:         #2E1D12;
  --text-body:    #3A2A1F;
  --text-muted:   #84705F;

  --white:        #ffffff;

  --burgundy:     #7A2E2A;
  --olive:        #6B6B2E;

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'DM Sans', sans-serif;

  --radius:    12px;
  --radius-lg: 24px;
  --shadow:    0 8px 40px rgba(0,0,0,.10);
  --shadow-gold:   0 4px 30px rgba(200,112,42,.28);
  --shadow-silver: 0 4px 30px rgba(179,156,134,.30);
  --transition: .35s cubic-bezier(.4,0,.2,1);
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--text-body);
  line-height: 1.65;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a  { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; font-family: inherit; }

/* ── Utilities ─────────────────────────────────────────── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.gold { color: var(--gold); }

.section-label {
  font-family: var(--font-body);
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--silver-dark);
  display: block;
  margin-bottom: .75rem;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 300;
  line-height: 1.15;
  color: var(--black);
}
.section-title em {
  font-style: italic;
  color: var(--gold);
}

/* ── Buttons ───────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 2rem;
  border-radius: 60px;
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: var(--transition);
  border: none;
}
.btn-gold {
  background: linear-gradient(135deg, #E08E45, #C8702A 60%, #A9521B);
  color: var(--white);
  box-shadow: var(--shadow-gold);
  border: 1px solid var(--gold-dark);
}
.btn-gold:hover {
  background: linear-gradient(135deg, #C8702A, #8F4A17);
  border-color: var(--gold-dark);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 8px 40px rgba(200,112,42,.40);
}
.btn-outline {
  background: transparent;
  color: var(--text-body);
  border: 1px solid rgba(58,42,31,.35);
}
.btn-outline:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(200,112,42,.08);
}

/* ── Divider ───────────────────────────────────────────── */
.gold-line {
  width: 60px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 1.5rem 0;
}
.gold-line.center { margin-left: auto; margin-right: auto; }

/* ── Navbar ────────────────────────────────────────────── */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1.25rem 0;
  transition: background var(--transition), padding var(--transition);
}
.navbar.scrolled {
  background: rgba(251,243,230,.96);
  backdrop-filter: blur(12px);
  padding: .85rem 0;
  border-bottom: 1px solid rgba(200,112,42,.25);
  box-shadow: 0 2px 20px rgba(63,32,12,.08);
}
.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.navbar-logo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--black);
}

.navbar-logo img{
    height: 40px;
    position: absolute;
    margin-top: -20px;
}

.footer-logo img{
    height: 50px;
}

.navbar-logo span { color: var(--gold); }
.navbar-nav {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}
.navbar-nav a {
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color var(--transition);
  position: relative;
  left: 300px;
}
.navbar-nav a::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width var(--transition);
}
.navbar-nav a:hover { color: var(--black); }
.navbar-nav a:hover::after { width: 100%; }
.navbar-cta { margin-left: 1rem; }
.navbar-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none; border: none;
  padding: 4px;
}
.navbar-burger span {
  display: block;
  width: 24px; height: 1.5px;
  background: var(--black);
  transition: var(--transition);
}

/* ── Hero ──────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 100px 0 4rem;
  background: var(--cream);
}

.hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, #FFF9EF 0%, var(--cream) 55%, #F1DDBD 100%);
  pointer-events: none;
}
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(200,112,42,.16) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: .5;
}
.hero-ornament { display: none; }

/* ── Hero layout ── */
.hero-body {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1100px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 4rem;
  padding: 0 2.5rem;
}

/* ── Columna izquierda ── */
.hero-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1.5rem;
  min-width: 0;
  margin-top: 240px;
}

/* Logo imagen grande */
.hero-logo-img {
  max-width: 510px;
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  margin-left: -600px;
  margin-top: -210px;
  position: absolute;
}

/* Bloque inferior: divider + textos + botones */
.hero-left-bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-divider {
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  margin-bottom: .75rem;
}

.hero-welcome {
  font-family: var(--font-display);
  font-size: clamp(.95rem, 1.8vw, 1.2rem);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1.2;
  margin-bottom: .1rem;
}

.hero-index-title {
  font-family: var(--font-display);
  font-size: clamp(.95rem, 1.8vw, 1.2rem);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1.2;
  margin-bottom: .5rem;
}

.hero-tagline {
  font-family: var(--font-body);
  font-size: .8rem;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 300px;
  margin-bottom: 1.5rem;
}

.hero-cta-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Ocultar elementos del hero original */
.hero-content,
.hero-stats,
.hero-header,
.hero-logo-col,
.hero-brand-top,
.hero-brand-sub { display: none !important; }

/* ── Columna derecha: lista de categorías ── */
.hero-services-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-service-item {
  display: grid;
  grid-template-columns: 60px 1fr;
  align-items: center;
  gap: 1.1rem;
  padding: 1.1rem 0.5rem 1.1rem 0;
  border-bottom: 1px solid rgba(200,112,42,.22);
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  color: inherit;
}
.hero-service-item:first-child {
  border-top: 1px solid rgba(200,112,42,.22);
}
.hero-service-item:hover {
  padding-left: .75rem;
  background: rgba(200,112,42,.06);
  border-radius: 8px;
}
.hero-service-item:hover .hero-svc-icon {
  border-color: var(--gold);
  background: rgba(200,112,42,.12);
}

.hero-svc-icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(200,112,42,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: var(--transition);
  background: rgba(255,249,239,.8);
}
.hero-svc-icon svg {
  width: 26px; height: 26px;
  stroke: var(--gold);
  color: var(--gold);
}

.hero-svc-name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--black);
  letter-spacing: .03em;
  line-height: 1.2;
}
.hero-svc-desc {
  font-size: .78rem;
  color: var(--text-muted);
  letter-spacing: .02em;
  margin-top: .15rem;
}

/* ── Section base ──────────────────────────────────────── */
.section { padding: 7rem 0; background: var(--cream); }
.section-header { margin-bottom: 4rem; }
.section-header.center { text-align: center; }

/* ── Categories strip ──────────────────────────────────── */
.categories-strip { padding: 0 0 4rem; }
.categories-scroll {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding: .5rem 0;
}
.categories-scroll::-webkit-scrollbar { display: none; }
.cat-chip {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.4rem;
  border-radius: 60px;
  border: 1px solid rgba(179,156,134,.6);
  background: transparent;
  color: var(--text-muted);
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--transition);
}
.cat-chip:hover, .cat-chip.active {
  background: rgba(200,112,42,.08);
  border-color: var(--silver-dark);
  color: var(--black);
}
.cat-chip.active {
  background: linear-gradient(135deg, rgba(200,112,42,.16), rgba(122,46,42,.08));
  border-color: var(--gold);
  color: var(--gold-dark);
}
.cat-chip svg { width: 16px; height: 16px; }

/* ── Services grid ─────────────────────────────────────── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}
.service-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(179,156,134,.30);
  transition: var(--transition);
  position: relative;
  box-shadow: 0 2px 16px rgba(63,32,12,.06);
  display: flex;
  flex-direction: column;
}
.service-card:hover {
  transform: translateY(-6px);
  border-color: rgba(200,112,42,.5);
  box-shadow: 0 20px 50px rgba(63,32,12,.12), 0 0 0 1px rgba(200,112,42,.15);
}
.service-card-img {
  width: 100%; height: 160px;
  object-fit: cover;

  transition: transform .5s ease;
    
}
.service-card:hover .service-card-img { transform: scale(1.04); }
.service-card-img-placeholder {
  width: 100%; height: 220px;
  background: linear-gradient(135deg, var(--cream-mid), var(--cream-dark));
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem;
  color: rgba(200,112,42,.35);
}
.service-badge {
  position: absolute;
  top: 1rem; right: 1rem;
  background: linear-gradient(135deg, #E9A25A, #C8702A);
  color: #fff;
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .3rem .75rem;
  border-radius: 60px;
  border: 1px solid rgba(255,255,255,.5);
  z-index: 3;
}
.service-card-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.service-card-cat {
  font-size: .7rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--silver-dark);
  margin-bottom: .5rem;
}
.service-card-name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--black);
  margin-bottom: .5rem;
}
.service-card-desc {
  font-size: .85rem;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
  line-height: 1.55;
}
.service-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid rgba(179,156,134,.30);
  margin-top: auto;
}
.service-price {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--gold-dark);
}
.service-price span {
  font-family: var(--font-body);
  font-size: .7rem;
  color: var(--text-muted);
  vertical-align: super;
  margin-left: 2px;
}
.service-duration {
  font-size: .75rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: .3rem;
}

/* ── Testimonials ──────────────────────────────────────── */
.testimonials-section {
  background: var(--cream-mid);
  border-top: 1px solid rgba(179,156,134,.3);
  border-bottom: 1px solid rgba(179,156,134,.3);
}
.testimonials-section .section-title { color: var(--black); }
.testimonials-section p { color: var(--text-muted) !important; }

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}
.testimonial-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 2rem;
  border: 1px solid rgba(179,156,134,.3);
  box-shadow: 0 2px 16px rgba(63,32,12,.05);
  transition: var(--transition);
}
.testimonial-card:hover {
  border-color: rgba(200,112,42,.4);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(63,32,12,.10);
}
.testimonial-stars { color: var(--gold); margin-bottom: 1rem; font-size: 1rem; }
.testimonial-text {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--text-body);
  line-height: 1.6;
  margin-bottom: 1.25rem;
}
.testimonial-name {
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--silver-dark);
}

/* ── CTA Banner ────────────────────────────────────────── */
.cta-section {
  position: relative;
  padding: 7rem 0;
  overflow: hidden;
  text-align: center;
  background: linear-gradient(180deg, var(--cream-dark), #E7C79B);
}
.cta-section::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(255,230,190,.55), transparent 70%);
}
.cta-section .section-title { color: var(--black); max-width: 600px; margin: 0 auto 2rem; }
.cta-section .section-title em { color: var(--gold-dark); }
.cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ── Footer ────────────────────────────────────────────── */
footer {
  background: linear-gradient(180deg, #2A1810, #1A0F09);
  border-top: 1px solid rgba(200,112,42,.3);
  padding: 4rem 0 2rem;
}
footer .section-label,
footer .footer-heading { color: var(--silver-light); }
footer .section-title  { color: var(--cream); }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}
.footer-brand-name {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 300;
  color: var(--cream);
  margin-bottom: .5rem;
}
.footer-brand-name span { color: var(--gold); }
.footer-tagline {
  font-style: italic;
  color: rgba(251,243,230,.5);
  font-size: .95rem;
  margin-bottom: 1.5rem;
}
.footer-social { display: flex; gap: 1rem; }
.footer-social a {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(220,203,183,.3);
  display: flex; align-items: center; justify-content: center;
  color: var(--silver-light);
  transition: var(--transition);
}
.footer-social a:hover {
  background: rgba(200,112,42,.2);
  border-color: var(--gold);
  color: var(--gold-light);
}
.footer-heading {
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--silver-light);
  margin-bottom: 1.25rem;
}
.footer-links li { margin-bottom: .75rem; }
.footer-links a {
  font-size: .875rem;
  color: rgba(251,243,230,.5);
  transition: color var(--transition);
}
.footer-links a:hover { color: var(--cream); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .78rem;
  color: rgba(255,255,255,.3);
}

/* ── Floating WhatsApp ─────────────────────────────────── */
.whatsapp-float {
  position: fixed;
  bottom: 2rem; right: 2rem;
  z-index: 50;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25D366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,.35);
  transition: var(--transition);
  animation: pulse-wa 3s infinite;
}
.whatsapp-float:hover { transform: scale(1.1); box-shadow: 0 8px 30px rgba(37,211,102,.5); }
.whatsapp-float svg { width: 28px; height: 28px; fill: #fff; }
@keyframes pulse-wa {
  0%, 100% { box-shadow: 0 4px 20px rgba(37,211,102,.35); }
  50%       { box-shadow: 0 4px 35px rgba(37,211,102,.65); }
}

/* ── Animations ────────────────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s ease, transform .6s ease;
}
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* ── Mobile menu ───────────────────────────────────────── */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(251,243,230,.98);
  backdrop-filter: blur(20px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 300;
  color: var(--black);
  letter-spacing: .04em;
  transition: color var(--transition);
}
.mobile-menu a:hover { color: var(--gold); }
.mobile-menu-close {
  position: absolute;
  top: 1.5rem; right: 1.5rem;
  background: none; border: none;
  color: var(--black);
  font-size: 1.5rem;
  transition: color var(--transition);
}
.mobile-menu-close:hover { color: var(--silver-dark); }

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 900px) {
  .navbar-nav    { display: none; }
  .navbar-burger { display: flex; }
  .footer-grid   { grid-template-columns: 1fr 1fr; }
  .footer-brand  { grid-column: 1 / -1; }
}

@media (max-width: 800px) {
  .navbar-logo img {
    height: 35px;
    position: relative;
    margin-top: 0;
  }
  .navbar-cta { display: none; }

  .hero { padding: 80px 0 3rem; }

  .hero-body {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 0 1.5rem;
  }

  .hero-left {
    align-items: center;
    text-align: center;
    width: 100%;
    margin-top: 0 !important;
    padding-top: 220px;
    position: relative;
  }

  .hero-logo-img {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    max-width: 300px !important;
    width: 250px !important;
  }

  .hero-left-bottom {
    align-items: center;
    width: 100%;
  }

  .hero-divider {
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    margin-left: auto;
    margin-right: auto;
  }

  .hero-tagline { max-width: 100%; }

  .hero-cta-row {
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .btn {
    justify-content: center;
    width: 100%;
    max-width: 280px;
  }

  .hero-services-col { width: 100%; }
  .mobile-menu .btn {
  width: auto;
  max-width: none;
  padding: .85rem 2rem;
  font-size: .875rem;
}
}

@media (max-width: 600px) {
  .footer-grid     { grid-template-columns: 1fr; }
  .hero-cta-row    { flex-direction: column; }
  .btn             { justify-content: center; }
}

/* ============================================================
   OTOÑO · Sobrescribe los colores fijos del modal y de
   algunos estilos que están dentro de index.php
   (el prefijo "body" les da prioridad sobre el <style> del HTML)
   ============================================================ */

body .service-card:hover .service-card-name { color: var(--gold); }

body .svc-modal-overlay { background: rgba(31,19,12,.7); }
body .svc-modal-img-placeholder {
  background: linear-gradient(135deg, #F8E9D2, #EBD3B0);
  color: #C8702A;
}
body .svc-modal-cat,
body .svc-modal-section-title,
body .svc-modal-incluye li::before,
body .svc-modal-extra-price { color: #C8702A; }
body .svc-modal-section-title::after { background: #EFD9BD; }
body .svc-modal-price-row { border-bottom-color: #EFD9BD; }
body .svc-modal-duration { background: #F7EBD8; }
body .svc-modal-extra-item,
body .svc-modal-largo { background: #FCF4E7; border-color: #EFD9BD; }
body .svc-modal-obs {
  background: #FFF6E8;
  border-left-color: #C8702A;
}
body .svc-modal-nivel.basico {
  background: rgba(107,107,46,.12);
  color: #5A5A24;
  border-color: rgba(107,107,46,.45);
}
body .svc-modal-nivel.select {
  background: rgba(200,112,42,.12);
  color: #8F4A17;
  border-color: rgba(200,112,42,.5);
}

/* Estilos escritos directo en el HTML (anticipo, Ver detalles, Maps) */
body .service-card-body div[style*="c9a84c"] { color: #C8702A !important; }
body .service-card-body div[style*="9a7520"] {
  color: #8F4A17 !important;
  background: rgba(200,112,42,.10) !important;
  border-color: rgba(200,112,42,.4) !important;
}
body .cta-section a[href*="share.google"] {
  border-color: rgba(200,112,42,.4) !important;
  background: rgba(200,112,42,.08) !important;
}

/* ══ OTOÑO · Decoración del hero ══════════════════════════ */
.hero-leaf-side {
  position: absolute;
  top: 0;
  height: 100%;
  width: auto;
  max-width: 34vw;
  object-fit: contain;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}
.hero-leaf-right { right: 0; object-position: right center; }
.hero-leaf-left  { left: 0;  object-position: left center; }
.hero-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── Hojitas que caen y desaparecen ── */
.hero-leaves {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}
.fall-leaf {
  position: absolute;
  width: var(--s);
  height: calc(var(--s) / 2);
  opacity: 0;
  animation: leafDrop var(--d) ease-in-out forwards;
  will-change: transform, opacity;
}
.fall-leaf svg { width: 100%; height: 100%; display: block; }
@keyframes leafDrop {
  0%   { opacity: 0;  transform: translate(0, 0) rotate(var(--r)); }
  15%  { opacity: .9; }
  50%  { transform: translate(var(--sx), calc(var(--fall) * .5)) rotate(calc(var(--r) + 110deg)); }
  80%  { opacity: .7; }
  100% { opacity: 0;  transform: translate(calc(var(--sx) * -.7), var(--fall)) rotate(calc(var(--r) + 240deg)); }
}
@media (max-width: 800px) {
  .hero-leaf-side {
    /* En celular el hero es muy alto: las hojas se anclan arriba
       con su tamaño natural en vez de estirarse al centro */
    top: 0;
    height: auto;
    width: 30vw;
    max-width: none;
    opacity: .9;
  }
  .hero-leaf-right { top: 56px; } /* baja la de la derecha para no tapar el menú hamburguesa */
}

/* ══ OTOÑO · Hojas en el fondo de la sección de servicios ══
   La capa se queda fija en pantalla (sticky) mientras haces scroll. */
#servicios { position: relative; isolation: isolate; clip-path: inset(0); }
#servicios > .container { position: relative; z-index: 2; }
.section-leaves {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  margin-bottom: -100vh;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}
/* Tarjetas translúcidas: se ven las hojas que caen detrás */
#servicios .service-card {
  background: rgba(255,255,255,.42);
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
}
#servicios .service-card-body { background: transparent; }

/* ══════════════════════════════════════════════════════════
   OTOÑO · Capa extra de temática (hojas de roble y arce)
   ══════════════════════════════════════════════════════════ */

/* 1. Textura de papel/grano muy sutil sobre todo el sitio */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .06;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 2. Selección de texto y scrollbar en tono otoño */
::selection { background: rgba(200,112,42,.28); color: var(--black); }
html { scrollbar-color: var(--gold) var(--cream-mid); }

/* 3. Divisor con hoja de roble en el centro */
.gold-line {
  position: relative;
  width: 110px;
  height: 1px;
  overflow: visible;
}
.gold-line::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 30px; height: 15px;
  transform: translate(-50%, -50%) rotate(-12deg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3Cpath d='M1 10 H6 C6 8 8 7 9 7 C9 5 11 3.5 13 4.5 C14 2.5 17 2 18.5 4 C20 2 23 2 24 4.2 C26 3 29 3.8 29.5 6 C32 5.5 34.5 7 34.5 8.8 C37 9 39 9.5 39 10 C39 10.5 37 11 34.5 11.2 C34.5 13 32 14.5 29.5 14 C29 16.2 26 17 24 15.8 C23 18 20 18 18.5 16 C17 18 14 17.5 13 15.5 C11 16.5 9 15 9 13 C8 13 6 12 6 10 Z' fill='%23C8702A'/%3E%3Cpath d='M2 10 H35' stroke='white' stroke-opacity='.45' stroke-width='.7' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* 4. Etiqueta de sección con ornamentos a los lados */
.section-header .section-label::before,
.section-header .section-label::after {
  content: '❦';
  color: var(--gold);
  font-size: .9rem;
  margin: 0 .6rem;
  letter-spacing: 0;
}
.section-header .section-label::before { display: inline-block; transform: scaleX(-1); }

/* 5. Onda de transición entre el hero y los servicios */
#servicios::before {
  content: '';
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 70px;
  z-index: 1;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 70' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1200V25C1050 70 900 5 750 30C600 55 450 70 300 35C180 8 80 20 0 45Z' fill='%23F1DDBD'/%3E%3C/svg%3E") top/100% 100% no-repeat;
}

/* 6. Tarjetas: más cálidas, con hoja de arce en la esquina */
.service-card {
  border-bottom: 3px solid rgba(200,112,42,.35);
}
.service-card::after {
  content: '';
  position: absolute;
  right: .9rem; bottom: .9rem;
  width: 30px; height: 30px;
  opacity: .14;
  transform: rotate(-20deg);
  pointer-events: none;
  transition: var(--transition);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 2 L24 11 L33 8 L30 18 L38 19 L30 25 L33 30 L23 29 L22 37 L20 39 L18 37 L17 29 L7 30 L10 25 L2 19 L10 18 L7 8 L16 11 Z' fill='%238F4A17'/%3E%3C/svg%3E") center/contain no-repeat;
}
.service-card:hover::after { opacity: .5; transform: rotate(0deg) scale(1.2); }
.service-card:hover { border-bottom-color: var(--gold); }

/* Badge "Destacado" con forma de hoja */
.service-badge {
  border-radius: 4px 16px 4px 16px;
  box-shadow: 0 3px 10px rgba(143,74,23,.3);
}

/* 7. Chips de categoría: sello más artesanal */
.cat-chip { border-radius: 4px 20px 4px 20px; }
.cat-chip.active { box-shadow: 0 3px 14px rgba(200,112,42,.22); }

/* 8. Lista del hero: el ícono "gira" como hoja al pasar el mouse */
.hero-service-item:hover .hero-svc-icon {
  transform: rotate(-8deg) scale(1.06);
  box-shadow: 0 4px 16px rgba(200,112,42,.25);
}
.hero-svc-name { transition: color var(--transition); }
.hero-service-item:hover .hero-svc-name { color: var(--gold-dark); }

/* 9. Precios con más presencia */
.service-price { font-weight: 400; letter-spacing: .01em; }

/* 10. Sección CTA con halo cálido tipo "luz de atardecer" */
.cta-section {
  background:
    radial-gradient(circle at 15% 20%, rgba(224,142,69,.25), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(143,74,23,.18), transparent 50%),
    linear-gradient(180deg, var(--cream-dark), #E7C79B);
}

/* 11. Footer con borde superior degradado */
footer {
  position: relative;
  border-top: none;
}
footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #8F4A17, #E08E45, #8F4A17, transparent);
}
.footer-tagline { font-family: var(--font-display); font-size: 1.1rem; }

/* 12. Botón dorado con brillo que cruza al pasar el mouse */
.btn-gold { position: relative; overflow: hidden; }
.btn-gold::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .7s ease;
  pointer-events: none;
}
.btn-gold:hover::after { transform: translateX(120%); }

/* 13. Accesibilidad: respeta a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .fall-leaf, .whatsapp-float { animation: none !important; }
  .fall-leaf { display: none; }
  html { scroll-behavior: auto; }
}