/* Lock page when sidebar is open */
html.sidebar-open, body.sidebar-open,
html.modal-open, body.modal-open {
  overflow: hidden !important;
  height: 100%;
  touch-action: none; /* disable touch interactions under overlay */
  overscroll-behavior: contain; /* prevent pull-to-refresh / bounce */
}

/* Custom styles and micro-interactions */
html { scroll-behavior: smooth; }
img { transition: transform .3s ease, box-shadow .3s ease; }
img:hover { transform: scale(1.01); }
.card-hover:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,.08); }

/* Form field readability improvements */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="datetime-local"],
textarea,
select {
  color: #0f172a; /* slate-900: darker text for better contrast */
}

/* Higher-contrast placeholders (keep full opacity for consistency) */
input::placeholder,
textarea::placeholder {
  color: #334155; /* slate-700 */
  opacity: 1;
}

/* Disabled state: clearer contrast against white backgrounds */
input:disabled,
textarea:disabled,
select:disabled {
  color: #475569; /* slate-600 */
  background-color: #f1f5f9; /* slate-100 */
}

/* Appointment modal: enforce black text in date/time and message fields */
#appointmentModal input,
#appointmentModal textarea,
#appointmentModal select {
  color: #000 !important;
  caret-color: #000;
  -webkit-text-fill-color: #000; /* ensure black on WebKit */
  background-color: #fff !important; /* ensure white bg to avoid blend */
  opacity: 1 !important; /* avoid any inherited low opacity */
  font-weight: 500; /* slight weight for readability */
}

/* WebKit-specific parts of datetime-local to ensure black text */
#appointmentModal input[type="datetime-local"]::-webkit-datetime-edit,
#appointmentModal input[type="datetime-local"]::-webkit-datetime-edit-text,
#appointmentModal input[type="datetime-local"]::-webkit-datetime-edit-month-field,
#appointmentModal input[type="datetime-local"]::-webkit-datetime-edit-day-field,
#appointmentModal input[type="datetime-local"]::-webkit-datetime-edit-year-field,
#appointmentModal input[type="datetime-local"]::-webkit-datetime-edit-hour-field,
#appointmentModal input[type="datetime-local"]::-webkit-datetime-edit-minute-field,
#appointmentModal input[type="datetime-local"]::-webkit-datetime-edit-second-field,
#appointmentModal input[type="datetime-local"]::-webkit-datetime-edit-ampm-field {
  color: #000 !important;
}

#appointmentModal input::placeholder,
#appointmentModal textarea::placeholder { color: #334155; opacity: 1; }

/* Autofill handling: keep text black and background white for readability */
#appointmentModal input:-webkit-autofill,
#appointmentModal textarea:-webkit-autofill,
#appointmentModal select:-webkit-autofill {
  -webkit-text-fill-color: #000 !important;
  box-shadow: 0 0 0px 1000px #fff inset; /* override yellow autofill */
  -webkit-box-shadow: 0 0 0px 1000px #fff inset;
}

/* On focus, guarantee black text */
#appointmentModal input:focus,
#appointmentModal textarea:focus,
#appointmentModal select:focus {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
}

/* Dark mode helpers */
.dark .shadow { box-shadow: 0 10px 20px rgba(0,0,0,.4); }

/* Header scroll state */
#siteHeader.header-scrolled { 
  background-color: rgba(255,255,255,0.9);
  box-shadow: 0 6px 16px rgba(2,6,23,0.08);
}
.dark #siteHeader.header-scrolled {
  background-color: rgba(15,23,42,0.85);
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
}

/* Nav underline animation */
.nav-underline { position: relative; }
.nav-underline::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px; height: 2px; width: 0;
  background: #0ea5e9; transition: width .25s ease;
}
.nav-underline:hover::after, .nav-underline.active::after { width: 100%; }

/* Leaf styles - natural and subtle */
#leafLayer { pointer-events: none; }
.leaf-wrap {
  position: absolute;
  top: -10%;
  left: 0;
  transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0);
  will-change: transform;
}
.leaf {
  width: var(--size, 18px);
  height: calc(var(--size, 18px) * 1.8);
  /* Green leaf gradient */
  background: radial-gradient(65% 50% at 50% 35%, #bfe7a7 0%, #7dac66 40%, #5f803f 85%);
  /* Leaf silhouette using clip-path (pointed at top and bottom) */
  clip-path: polygon(50% 0%, 62% 6%, 74% 18%, 82% 32%, 86% 48%, 82% 64%, 74% 78%, 62% 90%, 50% 100%, 38% 90%, 26% 78%, 18% 64%, 14% 48%, 18% 32%, 26% 18%, 38% 6%);
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
  filter: saturate(1.05);
  animation: leaf-fall var(--dur, 18s) linear infinite, leaf-sway 5s ease-in-out infinite;
  transform: rotate(var(--rot, 0deg));
}
.leaf.alt {
  background: radial-gradient(65% 50% at 50% 35%, #d8f1c8 0%, #8ecf70 45%, #51753a 85%);
}
.leaf::after { /* central vein */
  content: "";
  position: absolute;
  left: 50%; top: 8%; bottom: 8%; width: 2px;
  background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.05));
  transform: translateX(-50%);
  opacity: .5;
}

/* Custom Animations for Home Page */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@keyframes pulse-slow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes bounce-slow {
  0%, 100% { 
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% { 
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

@keyframes text-glow {
  0%, 100% { text-shadow: 0 0 20px rgba(125, 172, 102, 0.5); }
  50% { text-shadow: 0 0 30px rgba(125, 172, 102, 0.8), 0 0 40px rgba(125, 172, 102, 0.3); }
}

@keyframes gradient-text {
  0%, 100% { color: #7dac66; }
  33% { color: #bd6c34; }
  66% { color: #676d17; }
}

@keyframes fade-in-up {
  0% { 
    opacity: 0;
    transform: translateY(20px);
  }
  100% { 
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes leaf-fall {
  0%   { transform: translateY(-5vh) rotate(0deg); }
  100% { transform: translateY(105vh) rotate(360deg); }
}
@keyframes leaf-sway {
  0%, 100% { margin-left: -8px; }
  50% { margin-left: 8px; }
}

/* Animation Classes */
.animate-float {
  animation: float 3s ease-in-out infinite;
}

.animate-pulse-slow {
  animation: pulse-slow 3s ease-in-out infinite;
}

.animate-bounce-slow {
  animation: bounce-slow 2s infinite;
}

.animate-text-glow {
  animation: text-glow 4s ease-in-out infinite;
}

.animate-gradient-text {
  animation: gradient-text 3s ease-in-out infinite;
}

.animate-fade-in-up {
  animation: fade-in-up 1s ease-out;
}

.animate-fade-in {
  animation: fade-in 1s ease-out;
}

/* Enhanced hover effects */
.hover\:shadow-3xl:hover {
  box-shadow: 0 35px 60px -12px rgba(0, 0, 0, 0.25);
}

/* Particle effects */
@keyframes particle-float {
  0%, 100% { 
    transform: translateY(0px) rotate(0deg);
    opacity: 0.7;
  }
  50% { 
    transform: translateY(-20px) rotate(180deg);
    opacity: 1;
  }
}

.animate-particle {
  animation: particle-float 4s ease-in-out infinite;
}

/* Parallax support */
#leafLayer.parallax {
  transform: translateY(var(--parallaxY, 0px));
  will-change: transform;
}

/* Utilities: hide scrollbars (for horizontal reels/carousels) */
.scrollbar-hide {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  -webkit-overflow-scrolling: touch; /* iOS momentum */
}
.scrollbar-hide::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

/* Reels: optimize for small screens */
@media (max-width: 639px) { /* below Tailwind sm */
  /* Cambiamos el carrusel horizontal por lista vertical */
  #reelsTrack {
    padding-left: 12px;
    padding-right: 12px;
    display: flex;
    flex-direction: column;
    gap: 14px !important;
    overflow-x: hidden; /* sin scroll horizontal */
    scroll-snap-type: none; /* sin snap horizontal */
  }
  #reelsTrack > article {
    width: 100% !important;
    max-width: 520px; /* limita ancho y mantiene estética */
    margin-left: auto;
    margin-right: auto;
    border-radius: 16px;
  }
  /* Escapar corchetes y la barra para selectores válidos */
  #reelsTrack > article .aspect-\[9\/16\] {
    border-radius: 14px;
    overflow: hidden;
  }
  /* Compactar paddings del texto */
  #reelsTrack > article .p-3 { padding: 10px 12px; }
  /* Ocultar dots y flechas en móvil para simplificar UI */
  #reelsDots { display: none !important; }
  #reelsPrev, #reelsNext { display: none !important; }
}

/* Reel modal video contains fully in small screens */
#reelModal video { max-height: 86vh; }

/* Floating Social FAB */
.social-fab .fab-item {
  transition: opacity .25s ease, transform .25s ease, filter .25s ease;
}
/* Only allow hover-to-open on devices that actually support hover with a fine pointer (desktop/mouse). */
@media (hover: hover) and (pointer: fine) {
  .social-fab:hover .fab-item {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
  }
}
.social-fab.open .fab-item {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}
.social-fab.open #socialFabToggle i {
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  .social-fab .fab-item {
    transition: none;
  }
}

/* Responsive: Quienes Somos hero video fills slide */
#aboutHeroSwiper,
#aboutHeroSwiper .swiper-wrapper,
#aboutHeroSwiper .swiper-slide {
  height: 100% !important;
}
#aboutHeroSwiper .swiper-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}