/* ════ PALETA Y SISTEMA DE DISEÑO BASE (TOKENS) ════ */
:root {
  --lino: #FAF7F2; 
  --crema: #EDE3D5; 
  --rosa: #C9A89A; 
  --tierra: #8B6F5E;
  --tierra-deep: #5b4638; 
  --salvia: #8A9E87; 
  --grafito: #4A4040;
  --verde-atardecer: #3a4a3f; 
  --burdeos: #6e3b3b;
  --accent-color: #a4b39e;
  
  --e-out: cubic-bezier(0.22, 1, 0.36, 1); 
  --e-out-lg: cubic-bezier(0.16, 1, 0.30, 1);
  --e-inout: cubic-bezier(0.76, 0, 0.24, 1); 
  --e-soft: cubic-bezier(0.33, 0, 0.20, 1);
  
  --d-micro: 0.32s; 
  --d-comp: 0.6s; 
  --d-hero: 1.1s; 
  --pad: clamp(1.25rem, 5vw, 6rem);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { color-scheme: light only; overflow-x: clip; }
body { 
  background: var(--lino); 
  color: var(--grafito); 
  font-family: 'Lato', system-ui, -apple-system, sans-serif; 
  line-height: 1.65; 
  -webkit-font-smoothing: antialiased; 
  overflow-x: clip; 
}

h1, h2, h3, .display { 
  font-family: 'Cormorant Garamond', Georgia, serif; 
  font-weight: 600; 
  line-height: 1.06; 
  letter-spacing: -0.01em; 
  text-wrap: balance; 
}
.accent { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 400; }
.eyebrow { font-family: 'Lato', sans-serif; font-size: 0.72rem; letter-spacing: 0.26em; text-transform: uppercase; font-weight: 700; color: var(--tierra); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: rgba(201,168,154,0.32); color: var(--tierra-deep); }
:focus-visible { outline: 2px solid var(--rosa); outline-offset: 3px; border-radius: 2px; }

body::before { 
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"); 
}
#bgwash { position: fixed; inset: 0; z-index: 0; background: var(--lino); pointer-events: none; will-change: background-color; }
#petals { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
main { position: relative; z-index: 2; }

html.preload *, html.preload *::before, html.preload *::after { transition: none !important; }

/* NAVEGACIÓN FLOTANTE */
.nav { 
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000; display: flex; align-items: center; justify-content: space-between; 
  padding: 1rem var(--pad); height: 74px; color: var(--lino); 
  transition: background var(--d-comp) var(--e-soft), color var(--d-comp) var(--e-soft), box-shadow var(--d-comp) var(--e-soft); 
}
.nav.is-scrolled { background: rgba(250,247,242,0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--grafito); box-shadow: 0 1px 0 rgba(74,64,64,0.08); }
.nav__brand { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.55rem; font-weight: 700; transition: opacity 0.3s; }
.nav__brand:hover { opacity: 0.8; }
.nav__links { display: flex; gap: 1.8rem; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; align-items: center; font-weight: 700; }
.nav__links a:not(.nav__cta) { position: relative; padding-bottom: 3px; transition: color 0.3s; }
.nav__links a:not(.nav__cta)::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--d-comp) var(--e-soft); }
.nav__links a:not(.nav__cta):hover { color: var(--rosa); }
.nav.is-scrolled .nav__links a:not(.nav__cta):hover { color: var(--tierra); }
.nav__links a:not(.nav__cta):hover::after { transform: scaleX(1); }

.nav__cta { display: inline-flex; border: 1px solid currentColor; border-radius: 100px; padding: 0.62rem 1.25rem; line-height: 1; transition: all 0.3s var(--e-soft); }
.nav__cta:hover { transform: translateY(-1px); background-color: var(--rosa) !important; color: var(--tierra-deep) !important; border-color: var(--rosa) !important; }

.nav__burger { display: none; position: relative; z-index: 1001; width: 34px; height: 22px; padding: 0; background: none; border: 0; color: inherit; cursor: pointer; }
.nav__burger span { position: absolute; left: 2px; right: 2px; height: 2.5px; background: currentColor; border-radius: 2px; transition: all var(--d-comp) var(--e-soft); }
.nav__burger span:nth-child(1) { top: 3px; } .nav__burger span:nth-child(2) { top: 10px; } .nav__burger span:nth-child(3) { top: 17px; }
.nav.is-open .nav__burger span:nth-child(1) { top: 10px; transform: rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__burger span:nth-child(3) { top: 10px; transform: rotate(-45deg); }

@media (max-width: 820px) {
  .nav__burger { display: block; }
  .nav__brand { position: relative; z-index: 1001; }
  .nav.is-open { color: var(--lino); }
  .nav.is-open.is-scrolled { background: transparent; box-shadow: none; }
  .nav__links { position: fixed; inset: 0; height: 100svh; z-index: 1000; flex-direction: column; justify-content: center; background: var(--verde-atardecer); color: var(--lino); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all var(--d-comp) var(--e-out); }
  .nav.is-open .nav__links { opacity: 1; visibility: visible; transform: none; }
  .nav__links a:not(.nav__cta) { font-family: 'Cormorant Garamond', serif; font-size: 1.7rem; letter-spacing: 0.01em; text-transform: none; }
}

.btn { position: relative; display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.95rem 1.9rem; border-radius: 100px; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1; text-decoration: none; cursor: pointer; transition: all var(--d-comp) var(--e-soft); }
.btn:hover { transform: translateY(-2px); }
.btn--solid { background-color: var(--rosa) !important; color: #38291d !important; border: 1px solid var(--rosa); }
.btn--solid:hover { background-color: var(--tierra-deep) !important; border-color: var(--tierra-deep); color: var(--lino) !important; }

.logo-circle { width: 110px; height: 110px; border-radius: 50%; border: 2px solid var(--salvia); overflow: hidden; margin: 0 auto 1.4rem auto; display: flex; align-items: center; justify-content: center; background-color: white; box-shadow: 0 10px 24px rgba(0,0,0,0.2); position: relative; z-index: 2; transition: transform 0.3s ease; }
.logo-circle:hover { transform: scale(1.05); }
.logo-image { width: 100%; height: 100%; object-fit: cover; }

/* ════ HERO SECTION EDITORIAL CON CORTE INFERIOR EN #F9F6F1 ════ */
.hero { 
  position: relative; 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  align-items: center; 
  text-align: center; 
  background: var(--verde-atardecer); 
  color: var(--lino); 
  overflow: hidden; 
}

.hero__content {
  position: relative;
  width: 100%;
  min-height: calc(100svh - 120px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 7rem var(--pad) 4rem;
}

.hero__glow { 
  position: absolute; 
  inset: 0; 
  background: radial-gradient(120% 90% at 50% 40%, rgba(201,168,154,0.22), transparent 62%); 
  pointer-events: none; 
}

.hero h1 { font-size: clamp(2.3rem, 5.2vw, 4.5rem); max-width: min(94vw, 24ch); margin-inline: auto; position: relative; z-index: 2; font-weight: 600; }
.hero h1 .accent { color: #E6CDBF; }
.hero__line { display: block; overflow: hidden; }
.hero__line > span { display: inline-block; will-change: transform; }
.hero__sub { margin-top: 1.4rem; font-size: clamp(1rem, 1.4vw, 1.25rem); max-width: 68ch; margin-inline: auto; color: rgba(250,247,242,0.9); position: relative; z-index: 2; line-height: 1.6; }

.info-links { margin-top: 2rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 950px; position: relative; z-index: 2; }
.info-btn { font-family: 'Lato', sans-serif; font-size: 0.78rem; letter-spacing: 0.05em; background: rgba(250,247,242,0.12); color: #E6CDBF; padding: 10px 18px; border-radius: 100px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: all 0.3s var(--e-soft); border: 1px solid rgba(230,205,191,0.3); backdrop-filter: blur(8px); font-weight: 700; }
.info-btn:hover { background: var(--rosa); color: var(--tierra-deep); border-color: var(--rosa); transform: translateY(-2px); }
.info-btn--primary { background: var(--rosa); color: var(--tierra-deep); border-color: var(--rosa); }
.info-btn--primary:hover { background: var(--lino); color: var(--verde-atardecer); border-color: var(--lino); }

.hero__bottom {
  position: relative;
  width: 100%;
  background-color: #F9F6F1;
  color: var(--tierra-deep);
  padding: 2.5rem var(--pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.scrollcue { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  gap: 0.6rem; 
  font-size: 0.66rem; 
  letter-spacing: 0.22em; 
  text-transform: uppercase; 
  color: var(--tierra-deep); 
}
.scrollcue__line { 
  width: 1px; 
  height: 38px; 
  background: linear-gradient(var(--tierra-deep), transparent); 
  transform-origin: top; 
}

/* SECCIONES GENERALES */
.section { padding: clamp(4.5rem, 10vh, 8rem) var(--pad); position: relative; }
.section--crema { background: transparent; }
.section-head { margin-bottom: clamp(2rem, 5vh, 3.5rem); max-width: 58rem; margin-inline: auto; text-align: center; }
.section-head h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); color: var(--verde-atardecer); }
.section-head p { margin: 1.2rem auto 0; max-width: 68ch; color: rgba(74,64,64,0.84); font-size: clamp(0.95rem, 1.2vw, 1.1rem); }

/* PANEL DE CONTROL UNIFICADO */
.map-wrapper { max-width: 1000px; margin: 0 auto; }

.map-dashboard-card {
  background: #ffffff;
  border: 1px solid var(--crema);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(74, 64, 64, 0.07);
  margin-bottom: 2rem;
  transition: border-color var(--d-comp) var(--e-soft), box-shadow var(--d-comp) var(--e-soft);
}

.map-dashboard-card:hover {
  border-color: var(--rosa);
  box-shadow: 0 16px 44px rgba(74, 64, 64, 0.1);
}

.map-dashboard-header {
  padding: 1.8rem 1.8rem 1.2rem 1.8rem;
  background: #ffffff;
}

.map-dashboard-header .widget-header h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--verde-atardecer);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.map-dashboard-header .widget-header h3 i {
  color: var(--rosa);
}

.map-dashboard-header .widget-header p {
  font-size: 0.92rem;
  color: rgba(74, 64, 64, 0.88);
  margin-top: 0.4rem;
  line-height: 1.5;
}

.map-presets-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  background: var(--lino);
  padding: 0.8rem 1.8rem;
  border-top: 1px solid var(--crema);
  border-bottom: 1px solid var(--crema);
  box-shadow: none;
  margin-bottom: 0;
  border-radius: 0;
}

.presets-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tierra-deep);
  margin-right: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.preset-btn {
  background: #ffffff;
  border: 1px solid var(--crema);
  border-radius: 100px;
  padding: 0.45rem 1rem;
  font-family: 'Lato', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--grafito);
  cursor: pointer;
  transition: all 0.3s var(--e-soft);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.preset-btn:hover {
  background: var(--rosa);
  color: var(--tierra-deep);
  border-color: var(--rosa);
  transform: translateY(-1px);
}

.preset-btn.active {
  background: var(--verde-atardecer) !important;
  color: var(--lino) !important;
  border-color: var(--verde-atardecer) !important;
  box-shadow: 0 4px 12px rgba(58,74,63,0.25);
}

.map-frame {
  position: relative;
  width: 100%;
}

#map {
  height: 60vh;
  max-height: 680px;
  width: 100%;
  border-radius: 0;
  border: none;
  box-shadow: none;
  z-index: 10;
  position: relative;
}

.map-dashboard-card .climate-accordion-item {
  border: none;
  border-radius: 0;
  box-shadow: none;
  border-top: 1px solid var(--crema);
}

.accordion-group-climate {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-bottom: 2rem;
}

.climate-accordion-item {
  background: #ffffff;
  border: 1px solid var(--crema);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(74,64,64,0.04);
  transition: border-color var(--d-comp) var(--e-soft), box-shadow var(--d-comp) var(--e-soft);
}

.climate-accordion-item.is-open {
  border-color: var(--rosa);
  box-shadow: 0 12px 32px rgba(74,64,64,0.09);
}

.climate-accordion-header {
  width: 100%;
  background: #ffffff;
  border: none;
  outline: none;
  padding: 1.4rem 1.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  text-align: left;
  user-select: none;
  transition: background-color 0.3s var(--e-soft);
}

.climate-accordion-header:hover {
  background-color: var(--lino);
}

.climate-accordion-header-left {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.climate-accordion-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--lino);
  border: 1px solid var(--crema);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--verde-atardecer);
  flex-shrink: 0;
  transition: background-color 0.3s var(--e-soft), color 0.3s var(--e-soft), border-color 0.3s var(--e-soft);
}

.climate-accordion-item.is-open .climate-accordion-icon,
.climate-accordion-header:hover .climate-accordion-icon {
  background: var(--rosa);
  color: var(--tierra-deep);
  border-color: var(--rosa);
}

.climate-accordion-title-group h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  font-weight: 700;
  color: var(--verde-atardecer);
}

.climate-accordion-chevron {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--lino);
  border: 1px solid var(--crema);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--verde-atardecer);
  font-size: 0.9rem;
  transition: transform var(--d-comp) var(--e-out), background-color 0.3s, color 0.3s;
}

.climate-accordion-item.is-open .climate-accordion-chevron {
  transform: rotate(180deg);
  background: var(--rosa);
  color: var(--tierra-deep);
  border-color: var(--rosa);
}

.climate-accordion-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--d-comp) var(--e-out);
}

.climate-accordion-item.is-open .climate-accordion-wrapper {
  grid-template-rows: 1fr;
}

.climate-accordion-content {
  overflow: hidden;
}

.climate-accordion-body {
  padding: 1rem 1.8rem 1.8rem 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  border-top: 1px dashed var(--crema);
  background: #faf8f5;
}

.climate-info-text {
  font-size: 0.92rem;
  color: var(--grafito);
  line-height: 1.6;
}

.climate-info-text a {
  color: var(--tierra-deep);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}

.climate-info-text a:hover {
  color: var(--rosa);
}

.climate-input-block {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: #ffffff;
  padding: 1.2rem;
  border-radius: 12px;
  border: 1px solid var(--crema);
}

.buscador-item {
  display: flex;
  flex-direction: column;
  position: relative;
}
.buscador-item label {
  display: block;
  font-size: 0.72rem;
  color: var(--tierra-deep);
  margin-bottom: 6px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.buscador-item label i { color: var(--tierra); margin-right: 3px; }
.buscador-item input {
  width: 100%;
  padding: 0.8rem 1rem;
  font-size: 0.88rem;
  font-family: 'Lato', sans-serif;
  border-radius: 8px;
  border: 1px solid var(--crema);
  background: var(--lino);
  color: var(--grafito);
  outline: none;
  transition: all 0.3s var(--e-soft);
}
.buscador-item input::placeholder { color: rgba(74,64,64,0.5); }
.buscador-item input:focus {
  background: #ffffff;
  border-color: var(--rosa);
  box-shadow: 0 0 0 3px rgba(201,168,154,0.18);
}

#lista-sugerencias {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 1000;
  display: none;
  background: #ffffff;
  list-style: none;
  padding: 0.5rem 0;
  margin: 0;
  border: 1px solid var(--crema);
  max-height: 220px;
  overflow-y: auto;
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(74,64,64,0.12);
}
#lista-sugerencias li { padding: 0.7rem 1rem; cursor: pointer; border-bottom: 1px solid var(--lino); color: var(--grafito); font-size: 0.85rem; transition: background 0.2s; }
#lista-sugerencias li:hover { background-color: var(--lino); color: var(--tierra-deep); }
#lista-sugerencias li em { font-style: italic; font-weight: 400; color: var(--tierra); margin-left: 4px; }

.input-status {
  font-size: 0.72rem;
  font-weight: 700;
  margin-top: 6px;
  display: block;
  color: var(--tierra);
  letter-spacing: 0.02em;
  transition: color 0.3s ease;
}
.input-status.success { color: var(--salvia); }
.input-status.error { color: var(--burdeos); }

.leaflet-popup-content { font-family: 'Lato', sans-serif; font-size: 0.9rem; text-align: center; margin: 12px; }

.map-custom-btn { background: #ffffff; border: 1px solid var(--crema); border-radius: 8px; cursor: pointer; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--tierra-deep); font-size: 1.1rem; box-shadow: 0 4px 12px rgba(74,64,64,0.08); transition: all 0.3s var(--e-soft); }
.map-custom-btn:hover { background: var(--rosa); color: #ffffff; border-color: var(--rosa); transform: scale(1.05); }
.map-custom-btn.active { background: var(--verde-atardecer) !important; color: #ffffff !important; border-color: var(--verde-atardecer) !important; }
.fa-spin-fast { animation: fa-spin 0.7s infinite linear; }
.smn-marker-icon { background: var(--verde-atardecer); border: 2px solid #ffffff; border-radius: 50%; color: #ffffff; text-align: center; line-height: 26px; font-size: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }

/* BOTONERA DE ZONAS USDA */
.zone-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(65px, 1fr));
  gap: 0.5rem;
  margin-top: 1.2rem;
}

.zone-grid button {
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 8px;
  padding: 0.6rem 0.2rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.25s var(--e-soft);
  font-family: 'Lato', sans-serif;
}

.zone-grid button span { font-weight: 700; font-size: 0.92rem; color: inherit; }
.zone-grid button small { font-size: 0.68rem; opacity: 0.85; color: inherit; margin-top: 1px; }

.zone-grid button:not(.active) {
  background: #e5e2dc !important;
  color: #8c857b !important;
  border-color: #d2ccc2 !important;
  opacity: 0.65;
  box-shadow: none;
  transform: none;
}

.zone-grid button:not(.active):hover {
  opacity: 1;
  background: #d8d3c8 !important;
  color: var(--grafito) !important;
  outline: 1px solid var(--tierra);
}

.zone-grid button.active:hover {
  transform: translateY(-3px) scale(1.05);
  filter: brightness(1.1);
  outline: 2px solid var(--tierra-deep);
  box-shadow: 0 8px 18px rgba(0,0,0,0.2);
  z-index: 3;
}

.zone-grid button.active {
  outline: 3px solid var(--tierra-deep);
  outline-offset: 1px;
  transform: scale(1.08);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  z-index: 2;
  opacity: 1;
}

#geo-tip {
  position: fixed;
  z-index: 3000;
  pointer-events: none;
  background: var(--verde-atardecer);
  color: var(--lino);
  font-family: 'Lato', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  border: 1px solid var(--rosa);
  transition: opacity 0.1s ease;
}

/* Mapeo de Colores Oficiales USDA */
.zone-grid button.hz1a.active  { background: #3c3c3c; color: #ffffff; }
.zone-grid button.hz1b.active  { background: #ffffff; color: #000000; border-color: #cccccc; }
.zone-grid button.hz2a.active  { background: #DDDFE3; color: #000000; }
.zone-grid button.hz2b.active  { background: #B8BABE; color: #000000; }
.zone-grid button.hz3a.active  { background: #EBD8FD; color: #000000; }
.zone-grid button.hz3b.active  { background: #F779E0; color: #000000; }
.zone-grid button.hz4a.active  { background: #B979D1; color: #ffffff; }
.zone-grid button.hz4b.active  { background: #D6EDFD; color: #000000; }
.zone-grid button.hz5a.active  { background: #77A7F0; color: #000000; }
.zone-grid button.hz5b.active  { background: #77DCFD; color: #000000; }
.zone-grid button.hz6a.active  { background: #779FB7; color: #000000; }
.zone-grid button.hz6b.active  { background: #DCF1CB; color: #000000; }
.zone-grid button.hz7a.active  { background: #A2F97D; color: #000000; }
.zone-grid button.hz7b.active  { background: #8AB37D; color: #000000; }
.zone-grid button.hz8a.active  { background: #F7F97D; color: #000000; }
.zone-grid button.hz8b.active  { background: #F7CE7D; color: #000000; }
.zone-grid button.hz9a.active  { background: #B19F7D; color: #000000; }
.zone-grid button.hz9b.active  { background: #CB797D; color: #000000; }
.zone-grid button.hz10a.active { background: #F7B9BD; color: #000000; }
.zone-grid button.hz10b.active { background: #F7797D; color: #000000; }
.zone-grid button.hz11a.active { background: #D81B60; color: #ffffff; }

.zone-feedback {
  margin-top: 1.2rem;
  padding: 0.9rem 1.2rem;
  background: var(--lino);
  border-left: 4px solid var(--rosa);
  border-radius: 6px;
  font-size: 0.88rem;
  color: var(--grafito);
  transition: all 0.2s ease;
}

/* TARJETAS Y DIRECTORIO DE ESPECIES EN VENTA */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: clamp(1.2rem, 2.5vw, 2.2rem); max-width: 1200px; margin-inline: auto; }
.card { background: #ffffff; border: 1px solid var(--crema); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: transform var(--d-comp) var(--e-soft), box-shadow var(--d-comp) var(--e-soft), border-color 0.3s; }
.card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(74,64,64,0.09); border-color: var(--rosa); }

/* ════ CONTENEDOR SPLIT: FOTO + MINI-MAPA LADO A LADO ════ */
.card-media-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 180px;
  width: 100%;
  background: var(--crema);
  border-bottom: 1px solid var(--crema);
  overflow: hidden;
  position: relative;
}

.card-media-split .card-img {
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: block;
  position: relative;
  border-right: 1px solid rgba(237, 227, 213, 0.6);
}

.card-media-split .card-img img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  transition: transform 0.5s var(--e-soft); 
}

.card:hover .card-media-split .card-img img { 
  transform: scale(1.08); 
}

.card-media-split .mini-mapa-container {
  height: 100%;
  width: 100%;
  border: none;
  border-radius: 0;
  margin: 0;
  position: relative;
  z-index: 1;
  background-color: #e5e3df;
}

.mini-mapa-container .leaflet-control-attribution {
  display: none !important;
}

.mini-mapa-container .leaflet-control-zoom {
  border: none !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
  margin: 6px !important;
}

.mini-mapa-container .leaflet-control-zoom a {
  width: 22px !important;
  height: 22px !important;
  line-height: 22px !important;
  font-size: 11px !important;
  border-radius: 4px !important;
}

.card-body { padding: 1.4rem 1.3rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.card-body h3 { font-size: 1.25rem; color: var(--verde-atardecer); line-height: 1.2; font-family: 'Cormorant Garamond', serif; font-weight: 700; }
.card-body p { color: rgba(74,64,64,0.85); font-size: 0.9rem; flex: 1; margin: 0; line-height: 1.5; }
.card-body .more { font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tierra); margin-top: 0.4rem; display: inline-flex; align-items: center; gap: 0.4rem; transition: color 0.3s; }
.card-body .more:hover { color: var(--tierra-deep); }
.card.is-hidden { display: none !important; }

.zone-badge {
  display: inline-block;
  background: var(--lino);
  border: 1px solid var(--crema);
  color: var(--tierra-deep);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 100px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  align-self: flex-start;
}

/* TOOLBAR DEL CATÁLOGO */
.species-toolbar-panel {
  max-width: 1000px;
  margin: 0 auto 1.8rem auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.species-count-banner {
  background: #ffffff;
  border: 1px solid var(--crema);
  border-left: 4px solid var(--salvia);
  padding: 1rem 1.4rem;
  border-radius: 8px;
  font-size: 0.92rem;
  color: var(--grafito);
  box-shadow: 0 4px 14px rgba(74,64,64,0.04);
  line-height: 1.5;
}

.species-jump-box {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: #ffffff;
  padding: 0.82rem 1.2rem;
  border-radius: 100px;
  border: 1px solid var(--crema);
  box-shadow: 0 4px 14px rgba(74,64,64,0.04);
  flex-wrap: wrap;
}

.species-jump-box label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tierra-deep);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.species-select {
  flex: 1;
  min-width: 260px;
  padding: 0.65rem 1rem;
  font-family: 'Lato', sans-serif;
  font-size: 0.88rem;
  border: 1px solid var(--crema);
  border-radius: 6px;
  background: var(--lino);
  color: var(--grafito);
  outline: none;
  cursor: pointer;
  transition: all 0.3s var(--e-soft);
}

.species-select:focus {
  background: #ffffff;
  border-color: var(--rosa);
  box-shadow: 0 0 0 3px rgba(201,168,154,0.18);
}

/* ESTADO VACÍO */
.species-empty-card {
  max-width: 620px;
  margin: 2rem auto;
  background: #ffffff;
  border: 1px solid var(--crema);
  border-radius: 16px;
  padding: 2.5rem 2rem;
  text-align: center;
  box-shadow: 0 12px 32px rgba(74,64,64,0.06);
}

.species-empty-card .empty-icon {
  font-size: 2.6rem;
  color: var(--rosa);
  margin-bottom: 0.8rem;
}

.species-empty-card h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.8rem;
  color: var(--verde-atardecer);
  margin-bottom: 0.6rem;
  font-weight: 700;
}

.species-empty-card p {
  color: rgba(74,64,64,0.85);
  font-size: 0.98rem;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

/* FAQ ACORDEÓN */
.faq { max-width: 1000px; margin-inline: auto; }
.faq__item { border-bottom: 1px solid rgba(139,111,94,0.26); background: #ffffff; border-radius: 8px; margin-bottom: 12px; padding: 0 22px; box-shadow: 0 4px 12px rgba(74,64,64,0.04); transition: border-color 0.3s; border: 1px solid transparent; }
.faq__item[open] { border-color: var(--rosa); box-shadow: 0 12px 32px rgba(74,64,64,0.08); }
.faq__q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 1.6rem 0; display: flex; justify-content: space-between; gap: 1rem; align-items: center; font-family: 'Cormorant Garamond', serif; font-size: clamp(1.3rem, 2.4vw, 1.65rem); font-weight: 700; color: var(--verde-atardecer); list-style: none; outline: none; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q .ic { flex: none; width: 22px; height: 22px; position: relative; }
.faq__q .ic::before, .faq__q .ic::after { content: ""; position: absolute; background: var(--tierra); }
.faq__q .ic::before { left: 0; top: 10px; width: 22px; height: 2px; }
.faq__q .ic::after { left: 10px; top: 0; width: 2px; height: 22px; transition: transform var(--d-comp) var(--e-inout); }
.faq__item[open] .ic::after { transform: scaleY(0); }
.faq__a { padding: 0 0 1.8rem; color: rgba(74,64,64,0.85); font-size: 0.98rem; line-height: 1.65; }
.faq__a h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; color: var(--tierra-deep); margin-top: 1.5rem; margin-bottom: 0.8rem; }
.faq__a ul { padding-left: 20px; margin-bottom: 1rem; }
.faq__a li { margin-bottom: 0.5rem; }
.faq__a a { color: var(--tierra); font-weight: 700; border-bottom: 1px solid var(--tierra); padding-bottom: 1px; transition: color 0.3s; }
.faq__a a:hover { color: var(--tierra-deep); }

/* CTA FINAL Y FOOTER */
.cta { background: var(--tierra-deep); color: var(--lino); text-align: center; }
.cta h2 { font-size: clamp(2.4rem, 6vw, 4.6rem); max-width: 26ch; margin-inline: auto; color: var(--lino); }
.cta p { margin: 1.4rem auto 2.4rem; max-width: 50ch; color: rgba(250,247,242,0.85); }

.footer-full { background: var(--verde-atardecer); width: 100%; color: rgba(250,247,242,0.8); padding: 4rem 0 2rem; position: relative; z-index: 2; }
.footer { width: 100%; max-width: 1200px; margin-inline: auto; padding: 0 var(--pad); display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; font-size: 0.86rem; align-items: start; }
.footer__brand { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.6rem; color: var(--lino); margin-bottom: 0.4rem; font-weight: 700; }
.footer h4 { font-family: 'Lato', sans-serif; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(250,247,242,0.6); margin-bottom: 0.7rem; font-weight: 700; }
.footer__tag { font-family: 'Playfair Display', serif; font-style: italic; color: var(--rosa); font-size: 1.2rem; }
.footer__socials { display: flex; justify-content: center; gap: 0.9rem; margin-top: 1.2rem; flex-wrap: wrap; }
.footer__socials a { width: 38px; height: 38px; border-radius: 50%; background: rgba(250,247,242,0.08); border: 1px solid rgba(250,247,242,0.18); display: grid; place-items: center; color: var(--lino); transition: all 0.3s; }
.footer__socials a:hover { background: var(--rosa); border-color: var(--rosa); color: var(--tierra-deep); transform: translateY(-2px); }
.footer__credit { width: 100%; max-width: 1200px; margin: 2.5rem auto 0; padding: 1.5rem var(--pad) 0; border-top: 1px solid rgba(250,247,242,0.12); font-size: 0.76rem; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(250,247,242,0.5); text-align: center; }

@media (max-width: 760px) { .footer { grid-template-columns: 1fr; gap: 2rem; } }

.wa-float { position: fixed; right: 1.3rem; bottom: 1.3rem; z-index: 1050; width: 56px; height: 56px; border-radius: 50%; background-color: var(--tierra-deep) !important; color: var(--lino); border: 1.5px solid rgba(250,247,242,0.32); display: grid; place-items: center; box-shadow: 0 10px 26px rgba(74,64,64,0.35); transition: all var(--d-comp) var(--e-soft); }
.wa-float:hover { transform: scale(1.08); background-color: var(--verde-atardecer) !important; }
.wa-float svg { width: 26px; height: 26px; }

.js-motion .section-head { opacity: 1; transform: none; clip-path: none; }
.js-motion .section-head.is-in .eyebrow { transition-delay: 0s; }
.js-motion .section-head.is-in h2 { transition-delay: 0.12s; }
.js-motion .section-head.is-in p { transition-delay: 0.24s; }
.js-motion .section-head .eyebrow { position: relative; display: inline-block; }
.js-motion .section-head .eyebrow::after { content: ""; position: absolute; left: 50%; bottom: -0.5rem; width: 2.2rem; height: 1px; background: var(--rosa); transform: translateX(-50%) scaleX(0); transform-origin: center; transition: transform var(--d-hero) var(--e-out) 0.3s; }
.js-motion .section-head.is-in .eyebrow::after { transform: translateX(-50%) scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .js-motion .reveal, .js-motion .stagger > * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .scrollcue__line { display: none; }
}