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

/* ── Variables ─────────────────────────────────────────── */
:root {
  --primary:  #344724;
  --medium:   #617a4c;
  --light:    #a8c49a;
  --cream:    #e8ece0;
  --offwhite: #f5f7f2;
  --dark:     #2d4a25;
  --ink:      #1a2e14;
}

/* ── Reset & Base ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background-color: var(--offwhite);
  color: #161616;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
ul { list-style: none; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ── Animations ────────────────────────────────────────── */
.animate {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate.visible { opacity: 1; transform: translateY(0); }

.animate-fade {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.animate-fade.visible { opacity: 1; }

.animate-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-left.visible,
.animate-right.visible { opacity: 1; transform: translateX(0); }

.delay-1 { transition-delay: 0.12s; }
.delay-2 { transition-delay: 0.24s; }
.delay-3 { transition-delay: 0.36s; }
.delay-4 { transition-delay: 0.48s; }

/* ── Video Intro ───────────────────────────────────────── */
.video-intro {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
  background: #000;
}
.video-intro video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Navbar ────────────────────────────────────────────── */
.navbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background-color: var(--dark);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.navbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo visible solo en móvil */
.navbar-logo-mobile .logo-img {
  height: 42px;
  width: auto;
  filter: brightness(0) invert(1);
}

/* Nav centrada con logo en el medio — desktop */
.navbar-links {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  width: 100%;
}
.navbar-links a {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: rgba(255,255,255,.88);
  padding: .5rem 1rem;
  border-radius: .5rem;
  transition: color .2s, background .2s;
  white-space: nowrap;
  letter-spacing: .03em;
}
.navbar-links li:not(.nav-logo-item) a:hover,
.navbar-links li:not(.nav-logo-item) a.nav-active { color: #fff; background: rgba(255,255,255,.08); }

/* Logo centrado dentro de la ul */
.nav-logo-item { margin: 0 .75rem; }
.nav-logo-item a { padding: 0; }
.nav-logo-item a:hover { background: none; }
.nav-logo-item .logo-img {
  height: 52px;
  width: auto;
  filter: brightness(0) invert(1);
  display: block;
}

/* Hamburger */
.hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: .5rem;
  border-radius: .5rem;
  transition: background .2s;
  flex-shrink: 0;
}
.hamburger:hover { background: rgba(255,255,255,.1); }
.hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .3s, opacity .3s;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display: none;
  background: var(--dark);
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 2rem 1.5rem;
}
.mobile-menu.open { display: block; }
.mobile-menu .mobile-links { display: flex; flex-direction: column; gap: .25rem; margin-bottom: 2rem; }
.mobile-menu .mobile-links a {
  display: block;
  font-size: 1.125rem;
  color: rgba(255,255,255,.75);
  padding: .75rem;
  border-radius: .5rem;
  transition: color .2s, background .2s;
}
.mobile-menu .mobile-links a:hover { color: #fff; background: rgba(255,255,255,.05); }
.mobile-cta {
  display: block;
  text-align: center;
  font-weight: 600;
  background: var(--light);
  color: var(--ink);
  padding: 1rem 1.5rem;
  border-radius: 9999px;
}

/* ── Buttons ───────────────────────────────────────────── */
/* Base compartida — todas las variantes heredan esto */
.btn-primary,
.btn-dark,
.btn-white,
.btn-outline-white,
.btn-outline-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .875rem 1.75rem;
  border-radius: 9999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
  white-space: nowrap;
}

/* Verde claro — CTA principal sobre fondos claros */
.btn-primary { background: var(--light); color: var(--ink); }
.btn-primary:hover { background: var(--medium); color: #fff; }

/* Verde oscuro — acción secundaria sobre fondos claros */
.btn-dark { background: var(--primary); color: #fff; }
.btn-dark:hover { background: var(--dark); }

/* Blanco sólido — sobre fondos oscuros */
.btn-white { background: #fff; color: var(--ink); }
.btn-white:hover { background: var(--cream); }

/* Contorno blanco — sobre fondos oscuros, acción secundaria */
.btn-outline-white { border-color: rgba(255,255,255,.35); color: rgba(255,255,255,.85); }
.btn-outline-white:hover { background: rgba(255,255,255,.1); color: #fff; }

/* Contorno blanco semitransparente — para secciones CTA oscuras */
.btn-outline-dark { border-color: rgba(255,255,255,.35); color: rgba(255,255,255,.85); }
.btn-outline-dark:hover { background: rgba(255,255,255,.1); color: #fff; }

/* ── Hero ──────────────────────────────────────────────── */
.hero {
  background: var(--offwhite);
  padding: 5rem 0;
}
.hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 5rem;
}
.hero-image {
  width: 46%;
  flex-shrink: 0;
  border-radius: 1.25rem;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-content {
  flex: 1;
}
.hero-label {
  font-size: .75rem;
  color: var(--medium);
  text-transform: uppercase;
  letter-spacing: .25em;
  margin-bottom: 1.5rem;
}
.hero-h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 700;
  color: var(--dark);
  line-height: .95;
  margin-bottom: 2rem;
  font-size: clamp(3rem, 4.5vw, 6rem);
}
.hero-h1 em { color: var(--medium); font-style: italic; }
.hero-desc {
  color: rgba(45,74,37,.7);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 28rem;
  margin-bottom: 2.5rem;
}
.hero-actions { display: flex; flex-direction: row; gap: 1rem; flex-wrap: wrap; }

/* ── Services Highlight ────────────────────────────────── */
.services-highlight {
  position: relative;
  padding: 6rem 1rem;
  background-color: var(--cream);
  background-image: radial-gradient(circle, rgba(168,196,154,.13) 1px, transparent 1px);
  background-size: 28px 28px;
}
.sh-inner { max-width: 1152px; margin: 0 auto; }
.sh-header {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 4rem;
}
.sh-label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--medium);
}
.sh-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--dark);
  margin-top: .5rem;
  line-height: 1.2;
}
.sh-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--primary);
  transition: gap .2s;
}
.sh-link:hover { gap: .75rem; }
.sh-link svg { width: 1rem; height: 1rem; }
.sh-cards { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.service-card {
  background: #fff;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  transition: box-shadow .3s;
}
.service-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.service-card-bar {
  height: 6px;
  background: linear-gradient(to right, var(--primary), var(--medium));
}
.service-card-body { padding: 2rem; }
.service-icon {
  width: 3.5rem; height: 3.5rem;
  background: var(--cream);
  border-radius: .75rem;
  display: flex; align-items: center; justify-content: center;
  color: var(--primary);
  margin-bottom: 1.5rem;
  transition: background .3s, color .3s;
}
.service-card:hover .service-icon { background: var(--primary); color: #fff; }
.service-icon svg,
.service-icon i { width: 1.75rem; height: 1.75rem; font-size: 1.75rem; }
.service-card-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: .75rem;
}
.service-card-desc {
  font-size: .875rem;
  color: var(--medium);
  line-height: 1.6;
}
.service-card-link {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  margin-top: 1.5rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--primary);
}
.service-card-link svg { width: .875rem; height: .875rem; }

/* ── Dynamic Banners / Carousel ────────────────────────── */
.carousel {
  position: relative;
  overflow: hidden;
}
.carousel-viewport { overflow: hidden; }
.carousel-track {
  display: flex;
  transition: transform .4s ease;
}
.carousel-slide {
  flex: 0 0 100%;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 1.5rem;
}
.carousel-slide-label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: rgba(255,255,255,.5);
  margin-bottom: .75rem;
}
.carousel-slide-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 700;
  color: #fff;
  max-width: 40rem;
  line-height: 1.2;
}
.carousel-slide-desc {
  margin-top: 1rem;
  font-size: 1.125rem;
  color: rgba(255,255,255,.7);
  max-width: 36rem;
}
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,.1);
  color: #fff;
  width: 2.5rem; height: 2.5rem;
  border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.carousel-btn:hover { background: rgba(255,255,255,.2); }
.carousel-btn svg { width: 1.25rem; height: 1.25rem; }
.carousel-prev { left: 1rem; }
.carousel-next { right: 1rem; }
.carousel-dots {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex; gap: .5rem;
}
.carousel-dot {
  height: .5rem;
  border-radius: 9999px;
  background: rgba(255,255,255,.4);
  width: .5rem;
  transition: width .3s, background .3s;
}
.carousel-dot.active { background: #fff; width: 1.5rem; }

/* ── Photo Grid ────────────────────────────────────────── */
.photo-grid-section { background: var(--ink); overflow: hidden; }
.photo-grid-header {
  max-width: 1280px;
  margin: 0 auto;
  padding: 3.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.photo-grid-label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .35em;
  color: var(--light);
  margin-bottom: .5rem;
}
.photo-grid-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 700;
  color: #fff;
  font-size: clamp(2.5rem, 5vw, 5rem);
  line-height: 1;
}
.photo-grid-title em { color: var(--light); font-style: normal; }
.photo-grid-sub {
  font-size: .875rem;
  color: rgba(255,255,255,.5);
  line-height: 1.6;
  max-width: 20rem;
}
.photo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.photo-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.photo-cell-overlay {
  position: absolute;
  inset: 0;
  background: rgba(45,74,37,.2);
  transition: background .5s;
}
.photo-cell:hover .photo-cell-overlay { background: transparent; }
.photo-cell-label {
  font-size: .75rem;
  color: rgba(255,255,255,.3);
  text-transform: uppercase;
  letter-spacing: .2em;
  text-align: center;
  padding: 0 1rem;
  position: relative;
  z-index: 1;
  transition: color .3s;
}
.photo-cell:hover .photo-cell-label { color: rgba(255,255,255,.5); }

/* ── Why Choose Us ─────────────────────────────────────── */
.why-section {
  background: var(--offwhite);
  padding: 5rem 1.5rem;
}
.why-inner { max-width: 1280px; margin: 0 auto; }
.why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.why-item {
  padding: 2.5rem 0;
  border-bottom: 1px solid rgba(168,196,154,.3);
}
.why-item:last-child { border-bottom: none; }
.why-icon { font-size: 1.75rem; margin-bottom: 1rem; display: block; color: var(--primary); }
.why-title {
  font-size: .875rem;
  font-weight: 700;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: .75rem;
}
.why-desc { font-size: .875rem; color: var(--medium); line-height: 1.6; }

/* ── Testimonials ──────────────────────────────────────── */
.testimonials-section {
  background: var(--dark);
  padding: 6rem 1.5rem;
  overflow: hidden;
}
.testimonials-inner { max-width: 64rem; margin: 0 auto; position: relative; }
.testimonials-quote-mark {
  position: absolute;
  top: -1rem;
  left: -1rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 12rem;
  line-height: 1;
  color: rgba(52,71,36,.2);
  pointer-events: none;
  user-select: none;
}
.testimonials-content { position: relative; z-index: 1; }
.testimonials-stars { display: flex; gap: .25rem; margin-bottom: 2rem; }
.testimonials-stars span { color: var(--light); font-size: 1.25rem; }
.testimonials-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 2.5rem;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
}
.testimonials-author { display: flex; align-items: center; gap: 1rem; }
.testimonials-line { width: 2.5rem; height: 1px; background: var(--light); }
.testimonials-name {
  font-size: .875rem;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.testimonials-role { font-size: .75rem; color: rgba(255,255,255,.4); margin-top: .125rem; }

/* ── Special Offers ────────────────────────────────────── */
.offers-section { padding: 6rem 1rem; background: var(--offwhite); }
.offers-inner { max-width: 1152px; margin: 0 auto; }
.offers-header { text-align: center; margin-bottom: 4rem; }
.offers-label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--medium);
}
.offers-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--dark);
  margin-top: .75rem;
}
.offers-sub { margin-top: 1rem; font-size: .9375rem; color: var(--medium); max-width: 36rem; margin-left: auto; margin-right: auto; }
.offers-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; }
.offer-card {
  border-radius: 1.5rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
}
.offer-card--regular { background: #fff; color: var(--dark); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.offer-card--highlight { background: var(--primary); color: #fff; box-shadow: 0 25px 50px rgba(0,0,0,.2); }
.offer-badge {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  background: rgba(255,255,255,.2);
  color: #fff;
  padding: .25rem .75rem;
  border-radius: 9999px;
  display: inline-block;
  margin-bottom: 1rem;
  align-self: flex-start;
}
.offer-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
}
.offer-name--regular { color: var(--dark); }
.offer-name--highlight { color: #fff; }
.offer-desc {
  font-size: .875rem;
  margin-top: .25rem;
  margin-bottom: 1.5rem;
}
.offer-desc--regular { color: var(--medium); }
.offer-desc--highlight { color: rgba(255,255,255,.7); }
.offer-price {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.875rem;
  font-weight: 700;
  margin-bottom: 2rem;
}
.offer-price--regular { color: var(--primary); }
.offer-price--highlight { color: var(--light); }
.offer-features { list-style: none; display: flex; flex-direction: column; gap: .75rem; flex: 1; }
.offer-feature { display: flex; align-items: center; gap: .75rem; font-size: .875rem; }
.offer-check { width: 1rem; height: 1rem; flex-shrink: 0; }
.offer-feature span { color: var(--dark); }
.offer-feature--highlight span { color: rgba(255,255,255,.85); }
.offer-cta {
  margin-top: 2rem;
  text-align: center;
  font-weight: 600;
  font-size: .9375rem;
  padding: .75rem 1.5rem;
  border-radius: 9999px;
  transition: background .2s, color .2s;
  display: block;
}
.offer-cta--regular {
  border: 2px solid var(--primary);
  color: var(--primary);
}
.offer-cta--regular:hover { background: var(--primary); color: #fff; }
.offer-cta--highlight { background: #fff; color: var(--primary); }
.offer-cta--highlight:hover { background: var(--cream); }
.offers-note { text-align: center; margin-top: 2.5rem; font-size: .875rem; color: var(--medium); }

/* ── Our Promise ───────────────────────────────────────── */
.promise-section { background: var(--offwhite); padding: 6rem 1.5rem; }
.promise-inner { max-width: 64rem; margin: 0 auto; }
.promise-title-wrap { text-align: center; margin-bottom: 5rem; }
.promise-box {
  display: inline-block;
  border: 2px solid var(--primary);
  padding: 2.5rem 3rem;
  border-radius: 2px;
}
.promise-box-label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .35em;
  color: var(--medium);
  margin-bottom: 1rem;
}
.promise-box-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 700;
  color: var(--ink);
  font-size: clamp(2.5rem, 5vw, 5rem);
  line-height: 1;
}
.promise-box-sub {
  font-size: .875rem;
  color: var(--medium);
  margin-top: 1rem;
  max-width: 24rem;
  margin-left: auto;
  margin-right: auto;
}
.promise-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; }
.promise-item { display: flex; flex-direction: column; align-items: center; text-align: center; }
.promise-number {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: rgba(52,71,36,.4);
  margin-bottom: 1rem;
}
.promise-item-title {
  font-size: .875rem;
  font-weight: 700;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: .75rem;
}
.promise-item-desc { font-size: .875rem; color: var(--medium); line-height: 1.6; }

/* ── Statement Section ─────────────────────────────────── */
.statement-section {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--dark);
}
.statement-bg {
  position: absolute;
  inset: 0;
}
.statement-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--dark), rgba(45,74,37,.85), rgba(45,74,37,.6));
}
.statement-pattern {
  position: absolute;
  inset: 0;
  opacity: .05;
  background-image: repeating-linear-gradient(-45deg, #617a4c 0, #617a4c 1px, transparent 0, transparent 50%);
  background-size: 16px 16px;
}
.statement-content {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 6rem 1.5rem;
  width: 100%;
}
.statement-label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .35em;
  color: var(--light);
  margin-bottom: 1.5rem;
}
.statement-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 700;
  color: #fff;
  line-height: .92;
  margin-bottom: 2.5rem;
  max-width: 48rem;
  font-size: clamp(3rem, 6vw, 6.5rem);
}
.statement-title em { color: var(--light); font-style: normal; }
.statement-actions { display: flex; flex-direction: column; gap: 1rem; }

/* ── Quote CTA ─────────────────────────────────────────── */
.quote-cta {
  background: var(--cream);
  padding: 5rem 1.5rem;
}
.quote-cta-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.quote-cta-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 700;
  color: var(--ink);
  font-size: clamp(2.5rem, 5.5vw, 6rem);
  line-height: 1;
}
.quote-cta-underline {
  border-bottom: 4px solid var(--primary);
  padding-right: .5rem;
}
.quote-cta-24 { color: var(--primary); }
.quote-cta-links { display: flex; flex-direction: column; gap: 1rem; }
.quote-cta-all {
  text-align: center;
  font-size: .875rem;
  color: var(--medium);
  letter-spacing: .05em;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color .2s;
}
.quote-cta-all:hover { color: var(--ink); }

/* ── WhatsApp CTA ──────────────────────────────────────── */
.whatsapp-float {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 50;
  background: #25D366;
  color: #fff;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  transition: transform .2s;
}
.whatsapp-float:hover { transform: scale(1.1); }
.whatsapp-float svg { width: 1.5rem; height: 1.5rem; }


/* ── Contact Form ──────────────────────────────────────── */
.contact-form-section { padding: 6rem 1rem; background: var(--dark); }
.contact-form-inner { max-width: 42rem; margin: 0 auto; }
.form-header { text-align: center; margin-bottom: 3rem; }
.form-label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--light);
}
.form-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: #fff;
  margin-top: .75rem;
}
.form-sub { margin-top: 1rem; color: rgba(255,255,255,.6); }
.form-group { margin-bottom: 1.25rem; }
.form-input,
.form-textarea {
  width: 100%;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .9375rem;
  color: var(--dark);
  background: #fff;
  border: 1px solid rgba(168,196,154,.5);
  border-radius: .75rem;
  padding: .75rem 1rem;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.form-input:focus,
.form-textarea:focus {
  border-color: rgba(52,71,36,.5);
  box-shadow: 0 0 0 3px rgba(52,71,36,.15);
}
.form-input::placeholder,
.form-textarea::placeholder { color: rgba(97,122,76,.5); }
.form-input.error { border-color: #f87171; }
.form-input.error:focus { box-shadow: 0 0 0 3px rgba(248,113,113,.2); }
.form-textarea { resize: none; }
.form-error { margin-top: .25rem; font-size: .75rem; color: #f87171; }
.form-submit {
  width: 100%;
  background: var(--light);
  color: var(--dark);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .9375rem;
  font-weight: 600;
  padding: 1rem;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  transition: background .2s;
}
.form-submit:hover { background: #fff; }
.form-submit:disabled { opacity: .6; cursor: not-allowed; }
.form-success {
  text-align: center;
  font-size: .875rem;
  color: var(--light);
  margin-top: 1rem;
  display: none;
}
.form-success.visible { display: block; }

/* ── Footer ────────────────────────────────────────────── */
.footer {
  background: var(--dark);
  color: #fff;
  padding: 3rem 1rem;
}
.footer-inner {
  max-width: 1152px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2rem;
  align-items: center;
  text-align: center;
}
.footer-col {
  min-width: 0;
}
.footer-col-left,
.footer-col-right {
  display: flex;
  justify-content: center;
}
.footer-col-left { justify-content: flex-start; text-align: left; }
.footer-col-right { justify-content: flex-end; text-align: right; }
.footer-links {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.footer-links a {
  color: rgba(255,255,255,.75);
  font-size: .95rem;
  transition: color .2s;
}
.footer-links a:hover {
  color: var(--light);
}
.footer-logo-img {
  max-height: 3rem;
  width: auto;
  display: block;
  margin: 0 auto;
  filter: brightness(0) invert(1);
}
.footer-social {
  display: flex;
  justify-content: center;
  gap: .75rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.footer-social a {
  display: inline-flex;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.08);
  color: #fff;
  transition: background .2s, transform .2s, color .2s;
}
.footer-social a:hover {
  background: var(--light);
  color: var(--dark);
  transform: translateY(-2px);
}
.footer-social svg {
  width: 1rem;
  height: 1rem;
}
.footer-bottom {
  max-width: 1152px;
  margin: 2.5rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex;
  justify-content: center;
  text-align: center;
}
.footer-copy {
  font-size: .85rem;
  color: rgba(255,255,255,.65);
  margin: 0;
}
@media (max-width: 768px) {
  .footer-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .footer-col-left,
  .footer-col-right {
    justify-content: center;
    text-align: center;
  }
  .footer-bottom {
    padding-top: 1rem;
  }
}

/* ── Page Hero (interior pages) ───────────────────────── */
.page-hero {
  background: #ffffff;
  padding: 5rem 1rem 5rem;
  text-align: center;
}
.page-hero-label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--medium);
  display: block;
  margin-bottom: 1rem;
}
.page-hero-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 700;
  color: var(--dark);
}
.page-hero-sub {
  margin-top: 1rem;
  font-size: 1.125rem;
  color: var(--medium);
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}

/* ── About ─────────────────────────────────────────────── */
.about-origin { padding: 6rem 1rem; background: var(--cream); }
.about-origin-inner {
  max-width: 1152px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4rem;
  align-items: center;
}
.about-photo-placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 1.5rem;
  background: rgba(52,71,36,.1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-photo-placeholder p { font-size: .875rem; color: var(--medium); text-align: center; padding: 2rem; }
.about-origin-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .2em; color: var(--medium); }
.about-origin-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--dark);
  margin-top: .75rem;
  margin-bottom: 1.5rem;
}
.about-origin-text { display: flex; flex-direction: column; gap: 1rem; font-size: .9375rem; color: var(--medium); line-height: 1.6; }

.mvv-section { padding: 6rem 1rem; background: var(--dark); }
.mvv-inner { max-width: 1152px; margin: 0 auto; }
.mvv-header { text-align: center; margin-bottom: 4rem; }
.mvv-header-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .2em; color: var(--light); }
.mvv-header-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: #fff;
  margin-top: .75rem;
}
.mvv-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.mvv-card {
  border-radius: 1.5rem;
  padding: 2rem;
}
.mvv-card--regular { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.mvv-card--highlight { background: rgba(52,71,36,.3); border: 1px solid rgba(52,71,36,.4); }
.mvv-card-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .2em; color: var(--light); }
.mvv-card-text { margin-top: 1rem; font-size: .9375rem; color: rgba(255,255,255,.7); line-height: 1.6; }
.mvv-values-list { margin-top: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.mvv-value { display: flex; align-items: flex-start; gap: .75rem; }
.mvv-value-icon { color: var(--light); flex-shrink: 0; margin-top: .125rem; }
.mvv-value-icon svg,
.mvv-value-icon i { width: 1.25rem; height: 1.25rem; font-size: 1.25rem; }
.mvv-value-text { font-size: .875rem; color: rgba(255,255,255,.7); line-height: 1.5; }
.mvv-value-text strong { color: #fff; }

.team-section { padding: 6rem 1rem; background: var(--offwhite); }
.team-inner { max-width: 1152px; margin: 0 auto; }
.team-header { margin-bottom: 4rem; }
.team-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .2em; color: var(--medium); }
.team-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--dark);
  margin-top: .75rem;
}
.team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.team-member { display: flex; flex-direction: column; align-items: center; text-align: center; }
.team-avatar {
  width: 6rem;
  height: 6rem;
  border-radius: 9999px;
  background: rgba(52,71,36,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.team-avatar span {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
}
.team-member-name { font-size: .875rem; font-weight: 600; color: var(--dark); }
.team-member-role { font-size: .75rem; color: var(--medium); margin-top: .25rem; }

.page-cta { padding: 6rem 1rem; background: var(--dark); text-align: center; }
.page-cta-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .2em; color: var(--light); }
.page-cta-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: #fff;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.page-cta-sub { color: rgba(255,255,255,.6); max-width: 28rem; margin: 0 auto 2.5rem; }
.page-cta-actions { display: flex; flex-direction: column; gap: 1rem; align-items: center; }

/* ── Services Page ─────────────────────────────────────── */
.service-detail { padding: 5rem 1rem; }
.service-detail--cream { background: var(--cream); }
.service-detail--dark { background: var(--dark); }
.service-detail-inner {
  max-width: 1152px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  align-items: center;
}
.service-detail-img {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 1.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.service-detail-img--cream { background: rgba(52,71,36,.1); }
.service-detail-img--dark { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.service-detail-img svg { opacity: .3; }
.service-detail-img p { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; }
.service-detail-img p--cream { color: rgba(52,71,36,.3); }
.service-detail-img p--dark { color: rgba(255,255,255,.2); }
.service-detail-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.service-detail-icon--cream { background: rgba(52,71,36,.1); color: var(--primary); }
.service-detail-icon--dark { background: rgba(255,255,255,.1); color: var(--light); }
.service-detail-icon svg { width: 1.75rem; height: 1.75rem; }
.service-detail-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  margin-bottom: 1rem;
}
.service-detail-title--cream { color: var(--dark); }
.service-detail-title--dark { color: #fff; }
.service-detail-desc { font-size: .9375rem; line-height: 1.6; margin-bottom: 2rem; }
.service-detail-desc--cream { color: var(--medium); }
.service-detail-desc--dark { color: rgba(255,255,255,.65); }
.service-detail-list { list-style: none; display: flex; flex-direction: column; gap: .75rem; margin-bottom: 2.5rem; }
.service-detail-list li { display: flex; align-items: center; gap: .75rem; font-size: .875rem; }
.service-detail-list li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  flex-shrink: 0;
}
.service-detail-list--cream li { color: var(--dark); }
.service-detail-list--cream li::before { background: var(--primary); }
.service-detail-list--dark li { color: rgba(255,255,255,.75); }
.service-detail-list--dark li::before { background: var(--light); }
.service-detail-cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  font-size: .9375rem;
  padding: .75rem 1.75rem;
  border-radius: 9999px;
  transition: background .2s, color .2s;
}
.service-detail-cta svg { width: 1rem; height: 1rem; }
.service-detail-cta--cream { background: var(--primary); color: #fff; }
.service-detail-cta--cream:hover { background: var(--medium); }
.service-detail-cta--dark { background: var(--light); color: var(--dark); }
.service-detail-cta--dark:hover { background: #fff; }

/* ── Contact Page ──────────────────────────────────────── */
.contact-info-section { padding: 5rem 1rem; background: var(--cream); }
.contact-info-inner { max-width: 56rem; margin: 0 auto; }
.contact-cards { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-bottom: 3rem; }
.contact-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: #fff;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.contact-card-icon {
  width: 2.5rem;
  height: 2.5rem;
  background: rgba(52,71,36,.1);
  border-radius: .75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  flex-shrink: 0;
}
.contact-card-icon svg,
.contact-card-icon i { width: 1.25rem; height: 1.25rem; font-size: 1.25rem; }
.contact-card-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--medium); margin-bottom: .25rem; }
.contact-card-value { font-size: .9375rem; color: var(--dark); }
.contact-map-placeholder {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 1.5rem;
  background: rgba(52,71,36,.1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-map-placeholder p { font-size: .875rem; color: var(--medium); text-align: center; padding: 2rem; }

/* ── Locations Page ────────────────────────────────────── */
.locations-section { padding: 6rem 1rem; background: var(--cream); }
.locations-inner { max-width: 1152px; margin: 0 auto; }
.locations-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.location-card {
  background: #fff;
  border-radius: 1.5rem;
  padding: 1.75rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  transition: box-shadow .3s;
}
.location-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.1); }
.location-card-header { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.location-icon {
  width: 2.25rem;
  height: 2.25rem;
  background: rgba(52,71,36,.1);
  border-radius: .75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}
.location-icon svg,
.location-icon i { width: 1rem; height: 1rem; font-size: 1rem; }
.location-city {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--dark);
}
.location-areas { display: flex; flex-direction: column; gap: .5rem; }
.location-area { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--medium); }
.location-area::before { content: ''; width: 4px; height: 4px; background: var(--primary); border-radius: 9999px; flex-shrink: 0; }
.locations-cta { margin-top: 3.5rem; text-align: center; }
.locations-cta-note { font-size: .9375rem; color: var(--medium); margin-bottom: 1.5rem; }

/* ── Responsive ────────────────────────────────────────── */
@media (min-width: 640px) {
  .hero-actions { flex-direction: row; }
  .statement-actions { flex-direction: row; }
  .page-cta-actions { flex-direction: row; }
  .why-item { border-bottom: none; }
  .why-grid { grid-template-columns: 1fr 1fr; gap: 0; }
  .why-item { border-right: 1px solid rgba(168,196,154,.3); border-bottom: 1px solid rgba(168,196,154,.3); padding: 2.5rem 2rem; }
  .why-item:nth-child(2), .why-item:nth-child(4) { border-right: none; }
  .why-item:nth-child(3), .why-item:nth-child(4) { border-bottom: none; }
  .locations-grid { grid-template-columns: 1fr 1fr; }
  .team-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 767px) {
  .hero-inner {
    flex-direction: column;
    gap: 2.5rem;
    padding: 0 1.5rem;
  }
  .hero-image {
    width: 100%;
    aspect-ratio: 3 / 2;
  }
  .hero-content { width: 100%; }
  .hero-actions { flex-direction: column; }
}

@media (min-width: 768px) {
  .navbar-links { display: flex; }
  .navbar-logo-mobile { display: none; }
  .hamburger { display: none; }

  .sh-header { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .sh-cards { grid-template-columns: repeat(2, 1fr); }


  .photo-grid-header { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .photo-grid {
    grid-template-columns: repeat(4, 1fr);
    height: clamp(400px, 60vw, 700px);
    gap: 4px;
  }
  .photo-cell { aspect-ratio: auto; }
  .photo-cell:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .photo-cell:nth-child(4) { grid-row: span 2; }
  .photo-cell:nth-child(6) { grid-column: span 2; }

  .why-grid { grid-template-columns: repeat(4, 1fr); }
  .why-item { border-right: 1px solid rgba(168,196,154,.3); border-bottom: none; padding: 0 2rem; }
  .why-item:first-child { padding-left: 0; }
  .why-item:last-child { border-right: none; padding-right: 0; }
  .why-item:nth-child(2), .why-item:nth-child(4) { border-right: 1px solid rgba(168,196,154,.3); }
  .why-item:nth-child(2) { border-right: 1px solid rgba(168,196,154,.3); }
  .why-item:nth-child(3) { border-bottom: none; }
  .why-item:nth-child(4) { border-right: none; }

  .promise-grid { grid-template-columns: repeat(3, 1fr); }
  .mvv-grid { grid-template-columns: repeat(3, 1fr); }
  .contact-cards { grid-template-columns: repeat(3, 1fr); }
  .locations-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-inner { grid-template-columns: repeat(3, 1fr); }
  .footer-bottom { flex-direction: row; justify-content: space-between; }

  .about-origin-inner { flex-direction: row; }
  .about-photo-placeholder { width: 50%; }

  .quote-cta-inner { flex-direction: row; align-items: center; justify-content: space-between; }

  .carousel-slide { min-height: 420px; }
}

@media (min-width: 1024px) {
  .sh-cards { grid-template-columns: repeat(4, 1fr); }
  .offers-grid { grid-template-columns: repeat(3, 1fr); }
  .service-detail-inner { flex-direction: row; }
  .service-detail-inner--reverse { flex-direction: row-reverse; }
  .service-detail-img { width: 50%; }
  .service-detail-text { width: 50%; }
}
.photo-cell-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Mantiene la proporción de la foto adaptándose al contenedor */
    display: block;
}