/* style.css */

/*---------------------------------------------------------------------
    1. Base Styles & Variables
    2. Tailwind Component Overrides/Customizations (Optional)
    3. Custom Utility Classes
    4. Navigation Styles
    5. Hero Section Styles
    6. About Section Styles
    7. Services Section Styles
    8. Consultation Section Styles
    9. Gallery Section Styles (Removed, but keeping number for consistency)
    10. Testimonials Section Styles
    11. FAQ Section Styles (Updated for max-height transition)
    12. Contact Section Styles
    13. Footer Styles
    14. Animations & Effects
    15. Responsive Adjustments
    16. Floating Actions & Shanti Styles (HOTFIX APPLIED)
---------------------------------------------------------------------*/

/* 1. Base Styles & Variables */
:root {
  --primary-purple: #8a2be2; /* BlueViolet */
  --primary-green: #3cb371; /* MediumSeaGreen */
  --light-purple: #d8bfd8; /* Thistle */
  --light-green: #98fb98; /* PaleGreen */
  --dark-purple: #4b0082; /* Indigo */
  --dark-green: #006400; /* DarkGreen */
  --text-dark: #333;
  --text-light: #f8f9fa;
  --text-muted: #6c757d;
  --bg-light: #ffffff;
  --bg-soft: #f5f7fa;
  --border-color: #e2e8f0;

  /* Gradients */
  --gradient-primary: linear-gradient(
    135deg,
    var(--primary-purple),
    var(--primary-green)
  );
  --gradient-secondary: linear-gradient(
    135deg,
    var(--light-purple),
    var(--light-green)
  );
  --gradient-footer: linear-gradient(
    135deg,
    var(--dark-purple),
    var(--dark-green)
  );
  --gradient-hero: linear-gradient(
    135deg,
    #f3e8ff 0%,
    #e6fff0 100%
  ); /* Lighter gradient for hero */
  --gradient-section-1: linear-gradient(
    135deg,
    rgba(216, 191, 216, 0.3) 0%,
    rgba(152, 251, 152, 0.3) 100%
  );
  --gradient-section-2: linear-gradient(
    135deg,
    rgba(152, 251, 152, 0.3) 0%,
    rgba(216, 191, 216, 0.3) 100%
  );
}

html {
  scroll-behavior: smooth; /* Let JS handle smooth scroll for offsets */
}

body {
  font-family: "Montserrat", sans-serif;
  color: var(--text-dark);
  line-height: 1.7; /* Slightly increased line-height */
  overflow-x: hidden; /* Prevent horizontal scroll */
  background-color: var(--bg-soft); /* Base background */
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Lora", serif;
  font-weight: 600; /* Default heading weight */
  line-height: 1.4; /* Added for better descender spacing */
  padding-bottom: 0.1em; /* Added to prevent descender clipping */
}

/* 2. Tailwind Component Overrides/Customizations (Example) */
/* If needed, you can customize base Tailwind elements here */
/* .container { max-width: 1140px; } */

/* 3. Custom Utility Classes */
.gradient-text {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block; /* Important for background clip */
}

.hero-gradient-bg {
  background: var(--gradient-hero);
}

.section-gradient-1 {
  background: var(--gradient-section-1);
}

.section-gradient-2 {
  background: var(--gradient-section-2);
}

.footer-gradient-bg {
  background: var(--gradient-footer);
}

/* Buttons */
.btn-primary {
  /* Changed to inline-flex and added centering */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-primary);
  color: var(--text-light);
  transition: all 0.3s ease;
  border-radius: 30px;
  padding: 0.75rem 1.5rem; /* 12px 24px */
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  border: none;
  cursor: pointer;
  text-align: center; /* Ensure text itself is centered if it wraps */
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 7px 20px rgba(138, 43, 226, 0.3); /* Purple shadow */
}

.btn-secondary {
  display: inline-flex; /* Use flex for icon alignment */
  align-items: center;
  justify-content: center; /* Added for consistency */
  padding: 0.75rem 1.5rem; /* 12px 24px */
  background-color: var(--bg-light);
  border: 2px solid var(--primary-purple);
  border-radius: 30px;
  color: var(--primary-purple);
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  text-align: center; /* Ensure text itself is centered if it wraps */
}

.btn-secondary:hover {
  background-color: var(--primary-purple);
  color: var(--text-light);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

/* Cards */
.card {
  transition: all 0.3s ease;
  border-radius: 1rem; /* 16px */
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  background-color: var(--bg-light);
}

.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
}

/* 4. Navigation Styles */
.nav-container {
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}
/* Add class via JS on scroll */
.nav-scrolled {
  background-color: rgba(255, 255, 255, 0.98);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  padding-top: 0.5rem; /* 8px */
  padding-bottom: 0.5rem; /* 8px */
}

.nav-link {
  position: relative;
  transition: color 0.3s ease;
  padding-bottom: 8px; /* Space for underline */
  font-weight: 500;
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: 0; /* Position underline at the bottom */
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gradient-primary);
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

.nav-link:hover {
  color: var(--primary-purple); /* Match hover color */
}

/* Mobile Menu Specific */
#mobile-menu {
  transition: transform 0.3s ease-in-out; /* Ensure transition is defined */
}
#mobile-menu.open {
  transform: translateX(0);
}

.mobile-nav-link {
  transition: color 0.3s ease;
}

/* 5. Hero Section Styles */
.doctor-image {
  transition: all 0.5s ease;
  border-radius: 1.5rem; /* 24px */
}

.doctor-image:hover {
  transform: scale(1.03) rotate(1deg);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

/* 6. About Section Styles */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem; /* 8px */
  background-color: rgba(216, 191, 216, 0.2); /* Light purple bg */
  padding: 0.5rem 1rem; /* 8px 16px */
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--dark-purple);
}

.quote {
  font-style: italic;
  color: var(--text-muted);
  border-left: 4px solid var(--primary-purple);
  padding-left: 1.5rem; /* 24px */
  margin-top: 2rem; /* 32px */
}
.quote p {
  margin-bottom: 0.5rem; /* 8px */
}
.quote cite {
  display: block;
  margin-top: 0.5rem; /* 8px */
  font-size: 0.9em;
  font-style: normal;
  color: var(--primary-green);
}

/* 7. Services Section Styles */
.service-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem; /* 64px */
  height: 4rem; /* 64px */
  border-radius: 50%;
  background-color: rgba(138, 43, 226, 0.1); /* Lighter purple */
  margin-bottom: 1.5rem; /* 24px */
  transition: all 0.3s ease;
}

.service-icon {
  color: var(--primary-purple);
  font-size: 1.75rem; /* 28px */
  transition: all 0.3s ease;
}

.card:hover .service-icon-wrapper {
  background-color: var(--primary-purple);
}

.card:hover .service-icon {
  color: var(--text-light);
  transform: scale(1.1);
}

.service-link {
  display: inline-flex;
  align-items: center;
  color: var(--primary-purple);
  font-weight: 600;
  transition: all 0.3s ease;
}

.service-link:hover {
  color: var(--primary-green);
  transform: translateX(4px);
}

/* 8. Consultation Section Styles */
.consultation-card {
  position: relative; /* Needed for absolute positioning of badge */
}

.consultation-icon {
  font-size: 2.5rem; /* 40px */
  color: var(--primary-purple);
  transition: all 0.3s ease;
  margin-bottom: 1rem; /* Add space below icon */
}

.consultation-card:hover .consultation-icon {
  color: var(--primary-green);
  transform: translateY(-5px);
}

.consultation-price {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem; /* 16px */
  gap: 0.25rem; /* Smaller gap now */
}

.currency-icon {
  /* Only used for hover effect now */
  font-size: 1.1rem;
  transition: transform 0.3s ease;
}
.currency-icon:hover {
  transform: scale(1.2);
}

.recommended-card {
  border: 2px solid var(--primary-purple);
  box-shadow: 0 10px 30px rgba(138, 43, 226, 0.15);
}

.recommended-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--primary-purple);
  color: white;
  font-size: 0.75rem; /* 12px */
  font-weight: bold;
  padding: 0.25rem 0.75rem; /* 4px 12px */
  border-radius: 0 0 0 0.5rem; /* Rounded bottom-left */
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Schedule & Payment Info Box */
.info-title {
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 1rem; /* 16px */
  display: flex;
  align-items: center;
  color: var(--dark-purple);
}

.info-icon {
  color: var(--primary-purple);
  margin-right: 0.75rem; /* 12px */
  font-size: 1.2rem;
}

.info-list {
  list-style: none;
  padding-left: 0; /* Remove default padding */
}
.info-list li {
  align-items: center;
  padding-left: 0;
  position: relative;
  font-size: 0.95rem;
  min-height: 1.5rem;
}
.info-list li i,
.info-list li svg {
  font-size: 1rem;
  width: 1.25rem; /* 20px */
  text-align: center;
  margin-right: 0.5rem; /* 8px */
  flex-shrink: 0;
}
.info-list li span {
  flex-grow: 1;
}

/* 9. Gallery Section Styles (REMOVED) */

/* 10. Testimonials Section Styles */
.testimonial {
  position: relative; /* For pseudo-element */
  transition: transform 0.3s ease;
}

.testimonial::before {
  content: '"'; /* Use opening quote */
  position: absolute;
  top: -10px;
  left: 15px;
  font-size: 5rem; /* 80px */
  font-family: "Lora", serif;
  color: rgba(138, 43, 226, 0.08); /* Very light purple */
  z-index: 0;
  line-height: 1;
}

.testimonial:hover {
  transform: translateY(-5px);
}

.testimonial-stars {
  display: flex;
  color: #ffc107; /* Amber/Yellow */
  margin-bottom: 1rem; /* 16px */
  font-size: 1.1rem;
}

.testimonial-author {
  display: flex;
  align-items: center;
  margin-top: 1.5rem; /* 24px */
}

.testimonial-author img {
  width: 3rem; /* 48px */
  height: 3rem; /* 48px */
  border-radius: 50%;
  object-fit: cover; /* Ensure image covers the circle */
  margin-right: 1rem; /* 16px */
  flex-shrink: 0;
}

/* 11. FAQ Section Styles (Updated for max-height transition) */
.faq-item .faq-answer {
  max-height: 0; /* Start closed */
  overflow: hidden;
  transition: max-height 0.5s ease-in-out; /* Smooth transition */
}

.faq-item.active .faq-question i {
  transform: rotate(180deg);
}
/* Ensure icon transition */
.faq-question i {
  transition: transform 0.3s ease-in-out;
}

/* 12. Contact Section Styles */
.contact-info-item {
  margin-bottom: 1.5rem; /* 24px */
}
.contact-info-item:last-child {
  margin-bottom: 0;
}

.contact-link {
  color: var(--text-dark);
  transition: color 0.3s ease;
  word-break: break-all; /* Break long emails/links */
}
.contact-link:hover {
  color: var(--primary-purple);
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem; /* 40px */
  height: 2.5rem; /* 40px */
  border-radius: 50%;
  color: var(--text-light);
  transition: all 0.3s ease;
  font-size: 1.1rem;
}
.social-icon.instagram {
  background: linear-gradient(
    45deg,
    #f09433 0%,
    #e6683c 25%,
    #dc2743 50%,
    #cc2366 75%,
    #bc1888 100%
  );
}
.social-icon.whatsapp {
  background-color: #25d366;
}
.social-icon.tiktok {
  background-color: #000000;
}

.social-icon:hover {
  transform: scale(1.15);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Form Styles */
.form-label {
  display: block;
  color: var(--text-dark);
  font-weight: 500;
  margin-bottom: 0.5rem; /* 8px */
  font-size: 0.9rem;
}

.form-input,
.form-select, /* Added for consistency */
textarea.form-input {
  /* Target textarea specifically */
  width: 100%;
  padding: 0.85rem 1rem; /* Slightly larger padding */
  border: 1px solid var(--border-color);
  border-radius: 0.5rem; /* 8px */
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  font-size: 1rem;
  background-color: #f8f9fa; /* Light background for inputs */
}

.form-input:focus,
.form-select:focus,
textarea.form-input:focus {
  outline: none;
  border-color: var(--primary-purple);
  box-shadow: 0 0 0 3px rgba(138, 43, 226, 0.15);
}

/* Map Placeholder Styling */
.map-placeholder img {
  border-radius: 0.75rem; /* 12px */
}

/* 13. Footer Styles */
.footer-link {
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.3s ease, transform 0.3s ease;
  display: inline-block;
}

.footer-link:hover {
  color: var(--light-green);
  transform: translateY(-2px);
}

.footer-social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem; /* 40px */
  height: 2.5rem; /* 40px */
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.15);
  color: var(--text-light);
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.footer-social-icon:hover {
  background-color: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

/* Footer Logo Legibility Enhancement */
footer img[alt*="Footer"] {
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.7))
    drop-shadow(0 0 3px rgba(255, 255, 255, 0.5));
  /* Adjust color (e.g., rgba(200, 200, 200, 0.6)) and blur (e.g., 2px) as needed */
}

/* 14. Animations & Effects */

/* Floating animation for decorative elements */
@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-12px);
  }
  100% {
    transform: translateY(0px);
  }
}
.float-animation {
  animation: float 5s ease-in-out infinite;
}

/* Fade-in animation (used by Intersection Observer) */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.645, 0.045, 0.355, 1),
    transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.fade-in.appear {
  opacity: 1;
  transform: translateY(0);
}

/* WhatsApp Float Button */
.whatsapp-float-button {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #00a884 0%, #25d366 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 5px 15px rgba(37, 211, 102, 0.4);
  transition: all 0.3s ease;
  z-index: 999;
  animation: pulse 2s infinite;
}

.whatsapp-float-button:hover {
  transform: scale(1.1) rotate(10deg);
  box-shadow: 0 8px 25px rgba(37, 211, 102, 0.5);
}

.whatsapp-float-button::after {
  content: "Shanti";
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 10px;
  padding: 5px 10px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.whatsapp-float-button:hover::after {
  opacity: 1;
}

/* Back to Top Button */
#back-to-top {
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 0;
  transform: translateY(20px);
}
#back-to-top.show {
  opacity: 1;
  transform: translateY(0);
}

/* 15. Responsive Adjustments */
@media (max-width: 768px) {
  /* Adjust padding for smaller screens */
  section {
    padding-top: 4rem; /* 64px */
    padding-bottom: 4rem; /* 64px */
  }
  .hero-section {
    padding-top: 6rem; /* More padding top for hero on mobile */
  }

  /* Stack columns in hero and about sections */
  .hero-section .flex-col,
  .about-section .flex-col {
    /* Tailwind handles stacking, but ensure text alignment */
    text-align: center;
  }
  .hero-section .justify-start {
    justify-content: center;
  }

  /* Adjust heading sizes */
  h1 {
    font-size: 2.5rem;
  } /* 40px */
  h2 {
    font-size: 2rem;
  } /* 32px */

  /* Center consultation price details */
  .consultation-price {
    /* flex-direction: column; */ /* Removed - let flex wrap handle */
    gap: 0.5rem;
  }

  /* Adjust footer layout */
  footer .flex-col {
    gap: 1.5rem; /* Add gap between stacked footer items */
  }
  footer .text-center {
    text-align: center !important; /* Ensure footer text is centered */
  }

  /* Ensure map placeholder maintains aspect ratio */
  .map-placeholder img {
    height: 300px; /* Adjust height for mobile */
  }
  /* Ensure iframe map maintains aspect ratio */
  section#contacto iframe {
    height: 350px; /* Adjust height for mobile */
  }

  /* Adjust float button position if needed */
  .whatsapp-float-button {
    width: 55px;
    height: 55px;
    bottom: 20px;
    right: 20px;
  }
  #back-to-top {
    bottom: 1rem;
    left: 1rem;
    width: 3rem;
    height: 3rem;
  }
}

/*---------------------------------------------------------------------
    16. Floating Actions & Shanti Styles (HOTFIX APPLIED)
---------------------------------------------------------------------*/

/* --- Estilos para Shanti (Legibilidad Mejorada) --- */

.shanti-text,
.shanti-name {
  color: #4a148c !important; /* Color sólido púrpura oscuro */
  font-weight: 700;
  display: inline-block;
}

.btn-primary.shanti-btn span {
  color: white !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.btn-secondary.shanti-hero-btn span {
  color: var(--primary-purple);
}

.btn-secondary.shanti-hero-btn strong {
  color: #4a148c !important;
  font-weight: 700;
}

.btn-secondary.shanti-hero-btn:hover span,
.btn-secondary.shanti-hero-btn:hover strong,
.btn-secondary.shanti-hero-btn:hover i {
  color: white !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* --- Estilos para Jornada DIU (Diseño Armónico) --- */

#jornada-diu .text-green-600 {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: linear-gradient(
    135deg,
    rgba(34, 197, 94, 0.1) 0%,
    rgba(16, 185, 129, 0.1) 100%
  );
  border-radius: 30px;
  margin-top: 0.5rem;
}

/* --- Estilos Base de Botones Flotantes (Escritorio) --- */

.floating-actions {
  position: fixed;
  bottom: 110px;
  right: 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 998;
  animation: fadeInSoft 1.5s ease-out 1s backwards;
}

.action-btn {
  display: flex;
  align-items: center;
  background: white;
  border-radius: 50px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 12px;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  text-decoration: none;
  position: relative;
  overflow: visible; /* Cambiado para permitir el tooltip */
}

.booking-btn {
  animation: gentleBreath 4s ease-in-out infinite;
}

.action-btn:hover {
  transform: translateX(-5px) scale(1.02);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.btn-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: white;
  transition: transform 0.6s ease;
  z-index: 2;
  flex-shrink: 0; /* Evita que el icono se encoja */
}

.action-btn:hover .btn-icon {
  transform: scale(1.05);
}

.booking-btn .btn-icon {
  background: linear-gradient(135deg, #006bff 0%, #4a90e2 100%);
}

.btn-label {
  white-space: nowrap;
  font-weight: 600;
  font-size: 14px;
  color: #333;
}

/* --- Lógica de Hover vs. Toggle para el Botón de Agendar (HOTFIX) --- */

/* 1. Estado base y de toggle (controlado por JS) */
.booking-btn .btn-label {
  max-width: 0;
  opacity: 0;
  margin-left: 0;
  transition: max-width 0.4s ease, opacity 0.3s ease, margin-left 0.4s ease;
}
.booking-btn.is-open .btn-label {
  max-width: 120px;
  opacity: 1;
  margin-left: 12px;
}

/* 2. Estado hover SÓLO para dispositivos con mouse (escritorio) */
@media (hover: hover) and (min-width: 769px) {
  .booking-btn:hover .btn-label {
    max-width: 120px;
    opacity: 1;
    margin-left: 12px;
  }
}

/* --- Estilos para el Botón Back to Top --- */
.back-to-top-zen {
  position: fixed;
  bottom: 30px;
  left: 30px;
  width: 50px;
  height: 50px;
  background: linear-gradient(
    135deg,
    rgba(138, 43, 226, 0.9) 0%,
    rgba(60, 179, 113, 0.9) 100%
  );
  border: none;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  z-index: 997;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(138, 43, 226, 0.3);
  overflow: hidden;
}

.back-to-top-zen.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top-zen:hover {
  transform: translateY(-5px) scale(1.1);
  box-shadow: 0 8px 25px rgba(138, 43, 226, 0.4);
}

.zen-icon {
  position: relative;
  z-index: 2;
  color: white;
  transition: transform 0.3s ease;
  animation: gentleFloat 3s ease-in-out infinite;
}

.back-to-top-zen:hover .zen-icon {
  transform: translateY(-3px);
  animation-play-state: paused;
}

.zen-ripple {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.3) 0%,
    transparent 70%
  );
  transform: scale(0);
  opacity: 0;
}

.back-to-top-zen:hover .zen-ripple {
  animation: zenRipple 0.6s ease-out;
}

.back-to-top-zen::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    transparent 30%,
    rgba(255, 255, 255, 0.05) 70%
  );
  animation: rotate 20s linear infinite;
  pointer-events: none;
}

/* --- Animaciones --- */

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}
@keyframes gentleBreath {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
  50% {
    transform: scale(1.03);
    box-shadow: 0 6px 16px rgba(0, 107, 255, 0.2);
  }
}
@keyframes fadeInSoft {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes zenRipple {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}
@keyframes gentleFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes zenRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.fa-spa {
  display: inline-block;
  transition: transform 0.6s ease;
}
.btn-primary:hover .fa-spa,
.btn-secondary:hover .fa-spa {
  animation: zenRotate 2s ease-in-out;
}
.shanti-glow {
  text-shadow: 0 0 10px rgba(138, 43, 226, 0.3);
}

/* --- Media Queries (Ajustes para Móviles) --- */

@media (max-width: 768px) {
  .floating-actions {
    bottom: 90px;
    right: 20px;
    gap: 10px;
  }

  .action-btn {
    padding: 10px;
  }

  .btn-icon {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  .back-to-top-zen {
    width: 45px;
    height: 45px;
    bottom: 20px;
    left: 20px;
  }

  .whatsapp-float-button {
    width: 55px;
    height: 55px;
    bottom: 20px;
    right: 20px;
  }
}

@media (max-width: 480px) {
  .floating-actions {
    bottom: 90px;
    right: 12px;
  }

  .whatsapp-float-button {
    bottom: 20px;
    right: 20px;
  }
}