/* ===== FONTS ===== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Inter:wght@300;400;500;600&family=Outfit:wght@300;400;500;600;700&display=swap');

/* ===== CSS VARIABLES ===== */
:root {
  --green-dark: #2D5A3D;
  --green-medium: #3A7D53;
  --green-light: #4A9D68;
  --green-pale: #E8F5E9;
  --green-mint: #F0F9F1;
  --white: #FFFFFF;
  --off-white: #FAFCFA;
  --cream: #F5F7F2;
  --text-dark: #1A2E1F;
  --text-medium: #4A5D4F;
  --text-light: #7A8D7F;
  --shadow-soft: 0 4px 20px rgba(45, 90, 61, 0.08);
  --shadow-medium: 0 8px 32px rgba(45, 90, 61, 0.12);
  --shadow-hover: 0 12px 40px rgba(45, 90, 61, 0.18);
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ===== RESET ===== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--off-white);
  color: var(--text-dark);
  overflow-x: hidden;
  line-height: 1.6;
}

/* ===== HAMBURGER BUTTON ===== */
.hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  z-index: 1001;
}

.hamburger-btn span {
  display: block;
  height: 2.5px;
  width: 100%;
  background: var(--green-dark);
  border-radius: 2px;
  transition: var(--transition);
}

.hamburger-btn:hover span {
  background: var(--green-medium);
}

/* ===== MOBILE MENU OVERLAY ===== */
.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 46, 31, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

.mobile-menu-content {
  text-align: center;
  transform: scale(0.85);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mobile-menu-overlay.active .mobile-menu-content {
  transform: scale(1);
}

.mobile-menu-close {
  position: absolute;
  top: 24px;
  right: 28px;
  background: none;
  border: none;
  font-size: 2.4rem;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: var(--transition);
}

.mobile-menu-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
}

.mobile-menu-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.mobile-menu-links a {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--white);
  text-decoration: none;
  letter-spacing: 2px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: relative;
}

.mobile-menu-overlay.active .mobile-menu-links a {
  opacity: 1;
  transform: translateY(0);
}

.mobile-menu-links a:nth-child(1) { transition-delay: 0.1s; }
.mobile-menu-links a:nth-child(2) { transition-delay: 0.2s; }
.mobile-menu-links a:nth-child(3) { transition-delay: 0.3s; }

.mobile-menu-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--green-light);
  transition: width 0.3s ease;
}

.mobile-menu-links a:hover::after {
  width: 100%;
}

@media (max-width: 768px) {
  .hamburger-btn {
    display: flex;
  }

  .navbar-links {
    display: none;
  }
}

/* ===== NAVBAR ===== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 16px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(45, 90, 61, 0.08);
  transition: var(--transition);
}

.navbar.scrolled {
  padding: 10px 48px;
  box-shadow: var(--shadow-soft);
}

.navbar-logo {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}

.navbar-logo img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--green-pale);
  transition: var(--transition);
}

.navbar-logo:hover img {
  transform: scale(1.05);
  border-color: var(--green-medium);
}

.navbar-brand {
  display: flex;
  flex-direction: column;
}

.navbar-brand-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--green-dark);
  letter-spacing: 1px;
}

.navbar-brand-tagline {
  font-size: 0.7rem;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 500;
}

.navbar-links {
  display: flex;
  align-items: center;
  gap: 36px;
  list-style: none;
}

.navbar-links a {
  text-decoration: none;
  color: var(--text-medium);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  position: relative;
  padding: 4px 0;
  transition: var(--transition);
}

.navbar-links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--green-medium);
  border-radius: 2px;
  transition: var(--transition);
}

.navbar-links a:hover {
  color: var(--green-dark);
}

.navbar-links a:hover::after {
  width: 100%;
}

/* ===== BOTÓN ADMIN (navbar) ===== */
.navbar-admin-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--green-dark);
  color: var(--white) !important;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  box-shadow: var(--shadow-soft);
  transition: var(--transition);
}

.navbar-admin-btn svg {
  width: 16px;
  height: 16px;
}

.navbar-admin-btn:hover {
  background: var(--green-medium);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
}

/* Quita el subrayado animado heredado de los enlaces del navbar */
.navbar-admin-btn::after {
  display: none !important;
}

/* ===== HERO SECTION ===== */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--white) 0%, var(--green-mint) 50%, var(--green-pale) 100%);
  padding-top: 116px;
}

.hero-bg-shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero-shape {
  position: absolute;
  border-radius: 50%;
  opacity: 0.15;
  animation: floatShape 8s ease-in-out infinite;
}

.hero-shape:nth-child(1) {
  width: 400px;
  height: 400px;
  background: var(--green-medium);
  top: -100px;
  right: -100px;
  animation-delay: 0s;
}

.hero-shape:nth-child(2) {
  width: 250px;
  height: 250px;
  background: var(--green-light);
  bottom: -50px;
  left: -80px;
  animation-delay: 2s;
}

.hero-shape:nth-child(3) {
  width: 150px;
  height: 150px;
  background: var(--green-dark);
  top: 40%;
  right: 20%;
  animation-delay: 4s;
}

@keyframes floatShape {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(5deg); }
}

.hero-content {
  text-align: center;
  z-index: 2;
  padding: 0 24px;
  animation: fadeInUp 1s ease-out;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-logo {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--white);
  box-shadow: var(--shadow-medium);
  margin-bottom: 28px;
  animation: pulseGlow 3s ease-in-out infinite;
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(45, 90, 61, 0.15); }
  50% { box-shadow: 0 0 40px rgba(45, 90, 61, 0.25); }
}

.hero-title {
  font-family: 'Playfair Display', serif;
  font-size: 3.8rem;
  font-weight: 700;
  color: var(--green-dark);
  margin-bottom: 12px;
  letter-spacing: 2px;
}

.hero-subtitle {
  font-family: 'Outfit', sans-serif;
  font-size: 1.15rem;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 6px;
  font-weight: 400;
  margin-bottom: 32px;
}

.hero-divider {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--green-medium), var(--green-light));
  margin: 0 auto 28px;
  border-radius: 3px;
}

.hero-description {
  font-size: 1.05rem;
  color: var(--text-medium);
  max-width: 520px;
  margin: 0 auto 40px;
  line-height: 1.8;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 36px;
  background: var(--green-dark);
  color: var(--white);
  text-decoration: none;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 1px;
  transition: var(--transition);
  box-shadow: 0 4px 16px rgba(45, 90, 61, 0.3);
}

.hero-cta:hover {
  background: var(--green-medium);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(45, 90, 61, 0.35);
}

.hero-cta svg {
  width: 18px;
  height: 18px;
  transition: transform 0.3s ease;
}

.hero-cta:hover svg {
  transform: translateX(4px);
}

.scroll-indicator {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  animation: bounce 2s infinite;
}

.scroll-indicator span {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--text-light);
}

.scroll-indicator div {
  width: 24px;
  height: 38px;
  border: 2px solid var(--green-medium);
  border-radius: 12px;
  position: relative;
}

.scroll-indicator div::after {
  content: '';
  width: 4px;
  height: 8px;
  background: var(--green-medium);
  border-radius: 2px;
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  animation: scrollDot 2s infinite;
}

@keyframes scrollDot {
  0% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(14px); }
}

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-8px); }
}

/* ===== SECTION HEADER ===== */
.section-header {
  text-align: center;
  margin-bottom: 64px;
  position: relative;
}

.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--green-pale);
  color: var(--green-dark);
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 20px;
}

.section-badge::before {
  content: '🌿';
}

.section-title {
  font-family: 'Playfair Display', serif;
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--green-dark);
  margin-bottom: 16px;
  line-height: 1.2;
}

.section-subtitle {
  font-size: 1rem;
  color: var(--text-light);
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ===== CATALOG SECTION ===== */
.catalog-section {
  padding: 100px 48px 120px;
  background: var(--off-white);
  position: relative;
}

.catalog-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--green-pale), transparent);
}

/* ===== PLANT CARDS GRID ===== */
.plants-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  max-width: 960px;
  margin: 0 auto;
}

/* ===== PLANT CARD ===== */
.plant-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: var(--transition);
  position: relative;
  display: flex;
  flex-direction: row;
}

.plant-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
}

.plant-card:nth-child(even) {
  flex-direction: row-reverse;
}

/* Card geometric layout with image */
.card-visual {
  position: relative;
  width: 360px;
  min-height: 400px;
  flex-shrink: 0;
  overflow: hidden;
}

.card-visual-bg {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.card-visual-bg .block {
  transition: var(--transition);
}

.card-visual-bg .block-green {
  background: var(--green-dark);
}

.card-visual-bg .block-white {
  background: var(--white);
}

.card-visual-bg .block-light {
  background: var(--green-pale);
}

.card-visual-bg .block-medium {
  background: var(--green-medium);
}

.card-image-wrapper {
  position: absolute;
  inset: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.card-image {
  width: 85%;
  height: 85%;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-medium);
  transition: var(--transition);
}

.plant-card:hover .card-image {
  transform: scale(1.03);
}

.card-tag {
  position: absolute;
  top: 20px;
  right: 24px;
  z-index: 3;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--green-dark);
}

/* Card info */
.card-info {
  padding: 40px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card-category {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--green-medium);
  font-weight: 600;
  margin-bottom: 8px;
}

.card-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--green-dark);
  margin-bottom: 4px;
}

.card-scientific {
  font-style: italic;
  font-size: 0.88rem;
  color: var(--text-light);
  margin-bottom: 16px;
}

.card-description {
  font-size: 0.92rem;
  color: var(--text-medium);
  line-height: 1.7;
  margin-bottom: 20px;
  flex: 1;
}

/* Care icons */
.card-care {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid var(--green-pale);
}

.care-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--text-light);
  font-weight: 500;
}

.care-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--green-medium);
}

/* ===== PLANT PRICE ===== */
.plant-price {
  position: absolute;
  bottom: 20px;
  left: 20px;
  display: flex;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--green-dark);
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  padding: 6px 12px;
  border-radius: 16px;
  z-index: 3;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.plant-price-currency {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-light);
}

/* ===== POT SELECTOR (en tarjetas de plantas) ===== */
.card-pots {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--green-pale);
}

.card-pots-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-light);
  font-weight: 600;
  margin-bottom: 10px;
}

.pot-options {
  display: flex;
  gap: 10px;
}

.pot-thumb {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  border: 2px solid var(--green-pale);
  cursor: pointer;
  transition: var(--transition);
  background: var(--cream);
}

.pot-thumb:hover {
  border-color: var(--green-medium);
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(45, 90, 61, 0.15);
}

/* ===== POTS GALLERY ===== */
.pots-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 0;
}

.pot-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: var(--transition);
  width: 280px;
  display: flex;
  flex-direction: column;
}

.pot-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-hover);
}

.pot-image-wrapper {
  width: 100%;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--cream) 0%, var(--green-pale) 100%);
  overflow: hidden;
  position: relative;
}

.pot-card-image {
  width: 90%;
  height: 90%;
  object-fit: cover;
  border-radius: var(--radius-md);
  transition: var(--transition);
  cursor: pointer;
}

.pot-card:hover .pot-card-image {
  transform: scale(1.08);
}

/* Franja inferior de la tarjeta: nombre + botón "Me encanta".
   Así el botón NO se superpone a la foto del producto. */
.pot-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px 20px;
  background: var(--white);
  flex: 1;
}

.pot-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--green-dark);
  text-align: left;
  flex: 1;
}

/* ===== POT POPUP ===== */
.pot-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.pot-popup-overlay.active {
  opacity: 1;
  visibility: visible;
}

.pot-popup-content {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 24px;
  max-width: 420px;
  width: 90%;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
  transform: scale(0.7) translateY(30px);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-align: center;
  position: relative;
}

.pot-popup-overlay.active .pot-popup-content {
  transform: scale(1) translateY(0);
}

.pot-popup-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1.6rem;
  color: var(--text-light);
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: var(--transition);
}

.pot-popup-close:hover {
  background: var(--green-pale);
  color: var(--green-dark);
}

.pot-popup-image {
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  border-radius: var(--radius-md);
  margin-bottom: 16px;
}

.pot-popup-image-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

/* Pie del pop-up: nombre a la izquierda y "Me encanta" a la derecha,
   debajo de la foto, para no taparla. */
.pot-popup-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  margin-top: 4px;
}

.pot-popup-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--green-dark);
  flex: 1;
}

/* ===== WHATSAPP FLOATING BUTTON ===== */
.whatsapp-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 1500;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4);
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition);
  animation: whatsappPulse 2s ease-in-out infinite;
}

.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.5);
}

.whatsapp-float svg {
  width: 32px;
  height: 32px;
  fill: white;
}

@keyframes whatsappPulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4); }
  50% { box-shadow: 0 4px 24px rgba(37, 211, 102, 0.6), 0 0 0 8px rgba(37, 211, 102, 0.1); }
}

/* ===== FAVORITES CONSULT BUTTON ===== */
.favorites-consult-btn {
  position: fixed;
  bottom: 98px;
  right: 28px;
  z-index: 1500;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--green-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 4px 16px rgba(58, 125, 83, 0.4);
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.favorites-consult-btn.active {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  animation: favoritesPulse 2s ease-in-out infinite;
}

.favorites-consult-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 24px rgba(58, 125, 83, 0.5);
}

.favorites-consult-btn svg {
  width: 24px;
  height: 24px;
  fill: white;
}

.favorites-consult-btn span {
  font-size: 10px;
  color: white;
  font-weight: 600;
  text-align: center;
  line-height: 1;
}

@keyframes favoritesPulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(58, 125, 83, 0.4); }
  50% { box-shadow: 0 4px 24px rgba(58, 125, 83, 0.6), 0 0 0 8px rgba(58, 125, 83, 0.1); }
}

@media (max-width: 768px) {
  .favorites-consult-btn {
    bottom: 72px;
    right: 20px;
    width: 52px;
    height: 52px;
  }
  .favorites-consult-btn svg {
    width: 20px;
    height: 20px;
  }
  .favorites-consult-btn span {
    font-size: 9px;
  }
}

/* ===== FAVORITES MODAL ===== */
.favorites-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 46, 31, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.favorites-modal-content {
  background: white;
  border-radius: var(--radius-lg);
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 32px;
  box-shadow: var(--shadow-hover);
  position: relative;
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.favorites-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: var(--text-light);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: var(--transition);
}

.favorites-modal-close:hover {
  background: var(--green-pale);
  color: var(--green-dark);
}

.favorites-modal-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  color: var(--green-dark);
  margin-bottom: 24px;
  padding-right: 40px;
}

.favorites-list {
  margin-bottom: 28px;
  max-height: 400px;
  overflow-y: auto;
}

.favorites-list::-webkit-scrollbar {
  width: 6px;
}

.favorites-list::-webkit-scrollbar-track {
  background: var(--green-pale);
  border-radius: 3px;
}

.favorites-list::-webkit-scrollbar-thumb {
  background: var(--green-medium);
  border-radius: 3px;
}

.favorite-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--green-pale);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  border-left: 4px solid var(--green-medium);
}

.favorite-item-content {
  flex: 1;
}

.favorite-item-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--green-dark);
  margin: 0 0 4px 0;
}

.favorite-item-scientific {
  font-size: 0.85rem;
  color: var(--text-light);
  font-style: italic;
  margin: 0;
}

/* --- Lista de favoritos organizada por grupos (Interior/Exterior/…) --- */
.favorites-group {
  margin-bottom: 20px;
}
.favorites-group:last-child {
  margin-bottom: 0;
}
.favorites-group-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--green-medium);
  margin: 0 0 10px 2px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--green-pale);
}

/* Miniatura de la imagen del producto en la lista de favoritos */
.favorite-item-thumb {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 10px;
  background: var(--white);
  border: 1px solid rgba(45, 90, 61, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}
.favorite-item-thumb--empty {
  color: var(--green-light);
}

/* Línea "🪴 Con maceta: …" bajo el nombre de la planta */
.favorite-item-pot {
  font-size: 0.82rem;
  color: var(--green-medium);
  margin: 3px 0 0 0;
  line-height: 1.35;
}

.favorites-modal-actions {
  display: flex;
  gap: 12px;
  flex-direction: column;
}

.btn-clear-favorites,
.btn-send-whatsapp {
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  border: none;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-clear-favorites {
  background: #FFE0E0;
  color: #C41C3B;
}

.btn-clear-favorites:hover {
  background: #FFB8B8;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(196, 28, 59, 0.2);
}

.btn-send-whatsapp {
  background: #25D366;
  color: white;
}

.btn-send-whatsapp:hover {
  background: #20ba58;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}

@media (max-width: 768px) {
  .favorites-modal-content {
    width: 95%;
    padding: 24px;
  }

  .favorites-modal-title {
    font-size: 1.3rem;
  }

  .btn-clear-favorites,
  .btn-send-whatsapp {
    font-size: 0.9rem;
    padding: 10px 16px;
  }
}

@media (max-width: 480px) {
  .favorites-modal-content {
    max-height: 90vh;
  }
}


@media (max-width: 768px) {
  .whatsapp-float {
    bottom: 20px;
    right: 20px;
    width: 52px;
    height: 52px;
  }
  .whatsapp-float svg {
    width: 28px;
    height: 28px;
  }
}

/* ===== CONTACT SECTION ===== */
.contact-section {
  background: var(--off-white);
  padding: 100px 48px;
}

.contact-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.contact-title {
  font-family: 'Playfair Display', serif;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--green-dark);
  margin-bottom: 8px;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px;
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  border-left: 4px solid var(--green-medium);
  transition: var(--transition);
}

.contact-item:hover {
  transform: translateX(6px);
  box-shadow: var(--shadow-medium);
}

.contact-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green-pale);
  border-radius: 50%;
}

.contact-icon svg {
  width: 24px;
  height: 24px;
  color: var(--green-dark);
}

.contact-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-light);
  font-weight: 600;
}

.contact-value {
  font-size: 1rem;
  color: var(--text-dark);
  font-weight: 500;
  text-decoration: none;
  transition: var(--transition);
  line-height: 1.5;
}

a.contact-value:hover {
  color: var(--green-medium);
}

.contact-address-link {
  display: inline;
}

.contact-address-link br {
  display: block;
  margin-top: 4px;
}

.address-reference {
  font-size: 0.85rem;
  color: var(--text-light);
  font-style: italic;
}

.schedule-days {
  display: block;
  margin-top: 4px;
  font-size: 0.9rem;
  color: var(--text-light);
  font-style: italic;
}

.contact-socials {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.social-link {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--green-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  transition: var(--transition);
}

.social-link svg {
  width: 20px;
  height: 20px;
  color: var(--green-medium);
}

.social-link:hover {
  background: var(--green-dark);
  border-color: var(--green-dark);
  transform: translateY(-3px);
}

.social-link:hover svg {
  color: var(--white);
}

.contact-map {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-medium);
  height: 100%;
}

.contact-map iframe {
  width: 100%;
  height: 100%;
  min-height: 400px;
  border: 0;
}

/* ===== FOOTER ===== */
.footer {
  background: var(--green-dark);
  color: rgba(255, 255, 255, 0.7);
  padding: 40px 48px 24px;
  text-align: center;
}

.footer-content {
  max-width: 800px;
  margin: 0 auto;
}

.footer-logo {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, 0.2);
  margin-bottom: 12px;
}

.footer-brand {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  color: var(--white);
  margin-bottom: 4px;
}

.footer-tagline {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 4px;
  margin-bottom: 20px;
  color: rgba(255, 255, 255, 0.5);
}

.footer-socials {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 20px;
}

.footer-social {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.7);
  transition: var(--transition);
}

.footer-social:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--white);
  transform: translateY(-3px);
}

.footer-social svg {
  width: 18px;
  height: 18px;
}

.footer-divider {
  width: 80px;
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
  margin: 0 auto 16px;
}

.footer-copy {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.3);
}

/* ===== RESPONSIVE ===== */

.footer-socials {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 32px;
}

.footer-social {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.7);
  transition: var(--transition);
}

.footer-social:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--white);
  transform: translateY(-3px);
}

.footer-social svg {
  width: 18px;
  height: 18px;
}

.footer-divider {
  width: 80px;
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
  margin: 0 auto 20px;
}

.footer-copy {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.4);
}

/* ===== MOTHERS DAY BANNER ===== */
/* ===== BANNER DÍA DE LA MADRE ===== */
/* Barra fija arriba con fondo degradado animado que ocupa todo el ancho. */
.mothers-banner {
  position: fixed;              /* Se mantiene fijo en la parte superior al hacer scroll */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1100;               /* Por encima del resto de elementos (incluido el navbar) */
  /* Degradado de rosas/rojos; es más ancho que el banner (300%) para poder animarlo */
  background: linear-gradient(90deg, #c2185b, #e91e8c, #e53935, #c2185b);
  background-size: 300% 100%;
  animation: bannerGradient 6s ease infinite;  /* Mueve el degradado de un lado a otro */
  overflow: hidden;            /* Oculta el texto que se sale por los lados */
  height: 36px;
  display: flex;
  align-items: center;         /* Centra verticalmente el texto */
}

/* Anima la posición del degradado de fondo para dar efecto de color en movimiento */
@keyframes bannerGradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Pista del texto: se desplaza horizontalmente en bucle (efecto marquee) */
.mothers-banner-track {
  display: flex;
  white-space: nowrap;         /* Mantiene todo el texto en una sola línea */
  animation: bannerScroll 24s linear infinite;  /* Desplazamiento continuo */
  will-change: transform;      /* Pista al navegador para optimizar la animación */
}

/* Estilos del texto del banner */
.mothers-banner-track span {
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.25);  /* Sombra suave para legibilidad */
  padding-right: 48px;         /* Separación entre repeticiones del mensaje */
}

/* Mueve la pista hasta la mitad de su ancho; como el texto está duplicado,
   el bucle parece continuo y sin saltos. */
@keyframes bannerScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ===== CANVAS DE LA ANIMACIÓN (capa de flores/corazones) ===== */
/* Lienzo a pantalla completa superpuesto donde caen las partículas. */
#heartsCanvas {
  position: fixed;             /* Cubre la ventana aunque se haga scroll */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;       /* Deja pasar los clics: no bloquea la interacción con la página */
  z-index: 999;               /* Por encima del contenido, por debajo del banner */
}

/* ===== ANIMATIONS ON SCROLL ===== */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .plants-grid {
    max-width: 900px;
  }
  
  .card-visual {
    width: 360px;
    min-height: 380px;
  }
  
  .hero-title {
    font-size: 2.8rem;
  }
  
  .section-title {
    font-size: 2.2rem;
  }
}

@media (max-width: 768px) {
  .navbar {
    padding: 12px 24px;
  }

  .navbar-links {
    display: none;
  }

  .hero-title {
    font-size: 2.2rem;
  }

  .hero-subtitle {
    font-size: 0.9rem;
    letter-spacing: 4px;
  }

  .contact-section {
    padding: 60px 24px;
  }

  .contact-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .contact-map iframe {
    min-height: 300px;
  }

  .catalog-section {
    padding: 60px 20px 80px;
  }

  .plant-card,
  .plant-card:nth-child(even) {
    flex-direction: column;
  }

  .card-visual {
    width: 100%;
    min-height: 480px;
    height: 480px;
  }

  .card-image {
    width: 90%;
    height: 90%;
  }

  .footer {
    padding: 32px 24px 20px;
  }

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

  .footer-brand {
    font-size: 1.2rem;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 1.8rem;
  }
  
  .card-visual {
    height: 280px;
    min-height: 280px;
  }
  
  .card-info {
    padding: 24px;
  }
  
  .section-title {
    font-size: 1.8rem;
  }
}

/* ===== BOTÓN "ME ENCANTA" ===== */
/* Botón circular con corazón. Al marcarlo: rebote del botón + anillo
   expansivo + explosión de corazones (partículas que crea ui.js) +
   etiqueta flotante "¡Me encanta!". */
.favorite-btn {
  --fav-size: 48px;
  position: relative;
  width: var(--fav-size);
  height: var(--fav-size);
  flex-shrink: 0;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 64, 129, 0.3);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* El corazón se dibuja con ::before (vacío ♡ / lleno ♥) */
.favorite-btn::before {
  content: '♡';
  font-size: 24px;
  line-height: 1;
  color: var(--text-light);
  transition: transform 0.25s ease, color 0.3s ease;
}

.favorite-btn:hover {
  transform: scale(1.1);
  border-color: #FF4081;
  box-shadow: 0 6px 18px rgba(255, 64, 129, 0.25);
}

.favorite-btn:hover::before {
  color: #FF4081;
}

.favorite-btn.active {
  background: linear-gradient(135deg, #FF4081, #FF6B9D);
  border-color: transparent;
  box-shadow: 0 6px 20px rgba(255, 64, 129, 0.4);
}

.favorite-btn.active::before {
  content: '♥';
  color: var(--white);
  animation: heartBeat 0.8s ease-in-out;
}

@keyframes heartBeat {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.35); }
  45% { transform: scale(0.95); }
  65% { transform: scale(1.15); }
}

/* Rebote del botón al marcar/desmarcar */
.favorite-btn.fav-pop {
  animation: favPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes favPop {
  0% { transform: scale(1); }
  30% { transform: scale(1.35); }
  60% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

/* Anillo expansivo al marcar */
.favorite-btn.fav-pop::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 2px solid #FF4081;
  animation: favRing 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes favRing {
  from { opacity: 0.8; transform: scale(1); }
  to { opacity: 0; transform: scale(2); }
}

/* Partículas (mini corazones, hojas y destellos) que salen disparadas */
.fav-particula {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 15px;
  line-height: 1;
  pointer-events: none;
  z-index: 20;
  transform: translate(-50%, -50%) scale(0.4);
  opacity: 0;
  animation: favVolar 0.85s ease-out forwards;
}

@keyframes favVolar {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.4);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1.2) rotate(var(--rot));
  }
}

/* Etiqueta flotante "¡Me encanta!" (alineada a la derecha del botón para
   que no se corte en el borde de la tarjeta) */
.fav-etiqueta {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  background: linear-gradient(135deg, #FF4081, #FF6B9D);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 5px 14px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(255, 64, 129, 0.35);
  pointer-events: none;
  z-index: 21;
  animation: favEtiqueta 1.4s ease forwards;
}

@keyframes favEtiqueta {
  0% { opacity: 0; transform: translateY(8px) scale(0.8); }
  15% { opacity: 1; transform: translateY(0) scale(1); }
  75% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-12px) scale(1); }
}

/* --- Posición del botón según dónde aparece --- */

/* En cada tarjeta de planta: esquina inferior derecha de la foto
   (el precio ocupa la esquina inferior izquierda) */
.card-visual .favorite-btn {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 4;
}

/* En macetas/sustratos y en el pop-up, el botón vive en la franja del
   nombre (.pot-footer / .pot-popup-footer), así que no necesita posición
   especial: nunca tapa la foto. */

/* Responsive */
@media (max-width: 768px) {
  .favorite-btn {
    --fav-size: 44px;
  }

  .favorite-btn::before {
    font-size: 21px;
  }

  .card-visual .favorite-btn {
    bottom: 16px;
    right: 16px;
  }
}
/* ===== ESTADO "AGOTADO" ===== */
/* Se activa solo cuando un producto tiene stock: "agotado" en data/catalogo.json
   (lo controlas desde el panel admin). Si todo está disponible, no se ve nada. */
.card-agotado-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 5;
  background: #6b7280;
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* Atenúa TODO el panel de los productos agotados (imagen, textos, precio…),
   dejando solo el badge "Agotado" bien visible. Así queda claro de un vistazo
   que no está disponible. El botón "Me encanta" ni siquiera se muestra (lo
   controla js/ui.js: los productos agotados no se pueden marcar como favoritos). */
.plant-card[data-stock="agotado"] .card-visual > *:not(.card-agotado-badge),
.plant-card[data-stock="agotado"] .card-info {
  opacity: 0.5;
  filter: grayscale(0.6);
}
.pot-card[data-stock="agotado"] .pot-image-wrapper > *:not(.card-agotado-badge),
.pot-card[data-stock="agotado"] .pot-footer {
  opacity: 0.5;
  filter: grayscale(0.6);
}
/* La tarjeta agotada no se "levanta" al pasar el mouse (se siente inactiva). */
.plant-card[data-stock="agotado"]:hover,
.pot-card[data-stock="agotado"]:hover {
  transform: none;
}