/* ============================================================
   MethodVS — animations.css
   Animaciones y efectos visuales — Beauty & Aesthetics Edition
   ============================================================ */

/* ----------------------------------------------------------
   KEYFRAMES BASE
   ---------------------------------------------------------- */

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

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

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

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

@keyframes slideRight {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* ----------------------------------------------------------
   SCROLL-TRIGGERED ANIMATIONS
   (Elements start hidden, .visible class added by JS)
   ---------------------------------------------------------- */

.fade-in,
.slide-up,
.slide-left,
.slide-right,
.scale-in {
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}

.fade-in   { }
.slide-up  { transform: translateY(28px); }
.slide-left { transform: translateX(32px); }
.slide-right { transform: translateX(-32px); }
.scale-in  { transform: scale(0.94); }

.fade-in.visible,
.slide-up.visible,
.slide-left.visible,
.slide-right.visible,
.scale-in.visible {
  opacity: 1;
  transform: none;
}

/* Delay utilities */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }
.delay-500 { transition-delay: 0.5s; }
.delay-600 { transition-delay: 0.6s; }

/* ----------------------------------------------------------
   HERO ANIMATED BACKGROUND
   ---------------------------------------------------------- */

@keyframes gradientDrift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes gradientShift {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}

@keyframes subtleFloat {
  0%, 100% { transform: translateY(0px) scale(1); }
  50%       { transform: translateY(-8px) scale(1.01); }
}

.hero-animated-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 55% at 15% 85%, rgba(196,149,106,0.14) 0%, transparent 60%),
    radial-gradient(ellipse 45% 40% at 85% 20%, rgba(196,149,106,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 30% 30% at 50% 50%, rgba(196,149,106,0.05) 0%, transparent 70%),
    linear-gradient(135deg, rgba(196,149,106,0.08) 0%, transparent 35%, rgba(196,149,106,0.06) 65%, transparent 100%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 400% 400%;
  animation: gradientDrift 16s ease infinite;
  z-index: 0;
  pointer-events: none;
}

/* ----------------------------------------------------------
   HERO — SHIMMER LINE (decorative moving light)
   ---------------------------------------------------------- */

@keyframes shimmerSlide {
  0%   { transform: translateX(-100%) skewX(-15deg); }
  100% { transform: translateX(300%) skewX(-15deg); }
}

.hero-content::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(196,149,106,0.05) 40%,
    rgba(255,255,255,0.08) 50%,
    rgba(196,149,106,0.05) 60%,
    transparent 100%
  );
  animation: shimmerSlide 5s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

/* ----------------------------------------------------------
   HERO BADGE — Soft glow pulse
   ---------------------------------------------------------- */

@keyframes badgeGlow {
  0%, 100% { box-shadow: 0 0 16px rgba(196,149,106,0.20), inset 0 0 10px rgba(196,149,106,0.06); border-color: rgba(196,149,106,0.35); }
  50%       { box-shadow: 0 0 32px rgba(196,149,106,0.35), inset 0 0 16px rgba(196,149,106,0.10); border-color: rgba(196,149,106,0.60); }
}

.hero-badge {
  animation: badgeGlow 2.8s ease infinite;
}

/* ----------------------------------------------------------
   SCROLL ARROW — Elegant bounce
   ---------------------------------------------------------- */

@keyframes scrollArrow {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.3; }
  50%       { transform: translateX(-50%) translateY(10px); opacity: 0.8; }
}

.scroll-indicator span {
  display: inline-block;
  animation: scrollArrow 2.2s ease infinite;
}

/* ----------------------------------------------------------
   BUTTON PULSE (CTA buttons)
   ---------------------------------------------------------- */

@keyframes btnPulse {
  0%   { box-shadow: 0 4px 20px rgba(196,149,106,0.35), 0 0 0 0 rgba(196,149,106,0.40); }
  70%  { box-shadow: 0 4px 20px rgba(196,149,106,0.30), 0 0 0 18px rgba(196,149,106,0); }
  100% { box-shadow: 0 4px 20px rgba(196,149,106,0.35), 0 0 0 0 rgba(196,149,106,0); }
}

.btn-pulse {
  animation: btnPulse 2.5s ease infinite;
}
.btn-pulse:hover {
  animation: none;
  box-shadow: 0 12px 40px rgba(196,149,106,0.45);
}

/* ----------------------------------------------------------
   BUTTON GLOW on hover
   ---------------------------------------------------------- */

@keyframes btnGlow {
  0%, 100% { box-shadow: 0 4px 15px rgba(196,149,106,0.18); }
  50%       { box-shadow: 0 6px 35px rgba(196,149,106,0.38); }
}

/* ----------------------------------------------------------
   BUTTON — Shine sweep on hover
   ---------------------------------------------------------- */

@keyframes btnShine {
  0%   { left: -100%; }
  100% { left: 200%; }
}

.btn-primary {
  position: relative;
  overflow: hidden;
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.2) 50%,
    transparent 100%
  );
  transition: none;
  pointer-events: none;
}

.btn-primary:hover::before {
  animation: btnShine 0.6s ease forwards;
}

/* ----------------------------------------------------------
   SERVICE CARD — Hover lift + glow border + overlay
   ---------------------------------------------------------- */

.service-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), box-shadow 0.4s ease, border-color 0.4s ease;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(44,31,36,0.10), 0 0 0 1px rgba(196,149,106,0.12);
}

.service-card .service-icon-wrap {
  font-size: 2.2rem;
  margin-bottom: 1rem;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: block;
}
.service-card:hover .service-icon-wrap {
  transform: scale(1.15) rotate(-8deg);
}

.service-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(196,149,106,0.88) 0%, transparent 100%);
  color: #fff;
  font-weight: 700;
  font-size: 0.88rem;
  text-align: center;
  padding: 1.4rem 1rem 0.85rem;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
}
.service-card:hover .service-card-overlay {
  transform: translateY(0);
}

/* Service card — top glow line on hover */
.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-vivid, #daa520), var(--gold-light, #e2c060), var(--copper-light, #d48840));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
  z-index: 2;
  box-shadow: 0 2px 8px rgba(196,149,106,0.40);
}
.service-card:hover::before {
  transform: scaleX(1);
}

/* ----------------------------------------------------------
   RESULT CARD — Image zoom + overlay
   ---------------------------------------------------------- */

.result-card-img {
  position: relative;
  overflow: hidden;
}

.result-card-img img {
  transition: transform 0.6s cubic-bezier(0.4,0,0.2,1), filter 0.4s ease;
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
}

.result-card-img:hover img {
  transform: scale(1.08);
  filter: brightness(1.05);
}

.result-card-img::before {
  content: 'Ver resultado';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  background: linear-gradient(135deg, var(--rose), var(--gold));
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 2;
  pointer-events: none;
  box-shadow: 0 4px 20px rgba(196,149,106,0.35);
}

.result-card-img:hover::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ----------------------------------------------------------
   DOCTOR PHOTO — Elegant hover
   ---------------------------------------------------------- */

.dr-photo-wrapper {
  overflow: hidden;
}

.dr-photo-wrapper img {
  transition: transform 0.7s cubic-bezier(0.4,0,0.2,1);
}

.dr-photo-wrapper:hover img {
  transform: scale(1.04);
}

/* Doctor badge — float animation */
@keyframes floatBadge {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-4px); }
}

.dr-badge {
  animation: floatBadge 3s ease infinite;
}

/* ----------------------------------------------------------
   TRUST VALUES — Count-up glow
   ---------------------------------------------------------- */

@keyframes trustGlow {
  0%, 100% { text-shadow: 0 0 8px rgba(196,149,106,0.18); }
  50%       { text-shadow: 0 0 20px rgba(196,149,106,0.35); }
}

.trust-value {
  animation: trustGlow 3s ease infinite;
}

/* ----------------------------------------------------------
   TESTIMONIAL CARD
   ---------------------------------------------------------- */

.testimonial {
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), box-shadow 0.4s ease;
}
.testimonial:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(45,36,24,0.1);
}

/* ----------------------------------------------------------
   FLOAT IN — page load animation
   ---------------------------------------------------------- */

@keyframes floatIn {
  0%   { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ----------------------------------------------------------
   SECTION TITLE — Elegant underline grow
   ---------------------------------------------------------- */

.section-title::after {
  transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
}

.section-header.visible .section-title::after,
.fade-in.visible .section-title::after {
  animation: underlineGrow 0.8s cubic-bezier(0.4,0,0.2,1) forwards;
}

@keyframes underlineGrow {
  from { width: 0; }
  to   { width: 56px; }
}

/* ----------------------------------------------------------
   CREDENTIAL BADGE — Stagger float-in
   ---------------------------------------------------------- */

.credential-badges .credential-badge {
  opacity: 0;
  transform: translateY(10px) scale(0.95);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.visible .credential-badges .credential-badge,
.slide-left.visible .credential-badges .credential-badge {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.credential-badges .credential-badge:nth-child(1) { transition-delay: 0.05s; }
.credential-badges .credential-badge:nth-child(2) { transition-delay: 0.1s; }
.credential-badges .credential-badge:nth-child(3) { transition-delay: 0.15s; }
.credential-badges .credential-badge:nth-child(4) { transition-delay: 0.2s; }
.credential-badges .credential-badge:nth-child(5) { transition-delay: 0.25s; }
.credential-badges .credential-badge:nth-child(6) { transition-delay: 0.3s; }
.credential-badges .credential-badge:nth-child(7) { transition-delay: 0.35s; }
.credential-badges .credential-badge:nth-child(8) { transition-delay: 0.4s; }

/* ----------------------------------------------------------
   FEATURE ITEM — Icon pulse on hover
   ---------------------------------------------------------- */

@keyframes iconPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.feature-item:hover .feature-icon-wrap {
  animation: iconPulse 0.5s ease;
  background: rgba(196,149,106,0.16);
  border-color: rgba(196,149,106,0.30);
}

.feature-item {
  transition: transform 0.3s ease;
}

.feature-item:hover {
  transform: translateX(6px);
}

/* ----------------------------------------------------------
   ACCORDION — Smooth open with fade
   ---------------------------------------------------------- */

@keyframes accordionOpen {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.accordion-item {
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.accordion-item.open {
  border-color: rgba(196,149,106,0.18);
  box-shadow: 0 4px 20px rgba(196,149,106,0.06);
}

/* ----------------------------------------------------------
   WHATSAPP / CHATBOT BUTTON — Entrance
   ---------------------------------------------------------- */

@keyframes bounceIn {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.1); opacity: 1; }
  80%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

@keyframes waPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(37,211,102,0.4); }
  50%       { box-shadow: 0 4px 35px rgba(37,211,102,0.7); }
}

@keyframes chatPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(196,149,106,0.30); }
  50%       { box-shadow: 0 4px 35px rgba(196,149,106,0.50); }
}

/* ----------------------------------------------------------
   LANGUAGE SELECTOR
   ---------------------------------------------------------- */

.lang-selector {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: 1rem;
}

.lang-btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 6px;
  color: rgba(255,255,255,0.7);
  padding: 0.3rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}

.lang-btn:hover {
  border-color: var(--rose);
  color: var(--rose-light);
  background: rgba(196,149,106,0.1);
}

.lang-btn.active {
  border-color: var(--rose);
  color: var(--rose);
  background: rgba(196,149,106,0.12);
}

.lang-flag { font-size: 1rem; }
.lang-code { letter-spacing: 0.03em; }

/* Mobile lang selector */
.mobile-menu .lang-selector {
  margin-left: 0;
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  justify-content: center;
}

/* ----------------------------------------------------------
   BLOG CARD — Hover with glow
   ---------------------------------------------------------- */

.blog-card {
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), box-shadow 0.4s ease;
  overflow: hidden;
  border-radius: var(--radius, 14px);
}
.blog-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 20px 55px rgba(44,31,36,0.10);
}
.blog-card-image {
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
}
.blog-card:hover .blog-card-image {
  transform: scale(1.04);
}

/* Blog card — top line on hover */
.blog-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--rose), var(--gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
}
.blog-card:hover::after {
  transform: scaleX(1);
}

/* ----------------------------------------------------------
   COUNTER NUMBERS
   ---------------------------------------------------------- */

@keyframes countPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.12); color: var(--rose); }
  100% { transform: scale(1); }
}

/* ----------------------------------------------------------
   PROGRESS BAR (for forms)
   ---------------------------------------------------------- */

@keyframes progressFill {
  from { width: 0; }
  to   { width: 100%; }
}

/* ----------------------------------------------------------
   TOOLTIP
   ---------------------------------------------------------- */

@keyframes tooltipFadeIn {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ----------------------------------------------------------
   STAR RATING
   ---------------------------------------------------------- */

@keyframes starFill {
  0%, 100% { color: var(--rose); }
  50%       { color: #f2d9dc; transform: scale(1.2); }
}

/* ----------------------------------------------------------
   PHILOSOPHY QUOTE — Left border grow
   ---------------------------------------------------------- */

.philosophy-quote {
  position: relative;
  overflow: hidden;
}

.philosophy-quote::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(196,149,106,0.05) 0%, transparent 50%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
  pointer-events: none;
}

.visible .philosophy-quote::after,
.slide-left.visible .philosophy-quote::after {
  transform: translateX(0);
}

/* ----------------------------------------------------------
   FORM INPUT — Focus glow animation
   ---------------------------------------------------------- */

@keyframes inputFocusGlow {
  0%   { box-shadow: 0 0 0 3px rgba(196,149,106,0); }
  50%  { box-shadow: 0 0 0 4px rgba(196,149,106,0.12); }
  100% { box-shadow: 0 0 0 3px rgba(196,149,106,0.08); }
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  animation: inputFocusGlow 0.6s ease forwards;
}

/* ----------------------------------------------------------
   FORM SUCCESS — Celebration
   ---------------------------------------------------------- */

@keyframes successPop {
  0%   { transform: scale(0); opacity: 0; }
  50%  { transform: scale(1.1); }
  70%  { transform: scale(0.95); }
  100% { transform: scale(1); opacity: 1; }
}

.form-success.show {
  display: block;
}

.form-success.show .form-success-icon {
  animation: successPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ----------------------------------------------------------
   NAVBAR — Smooth entrance on load
   ---------------------------------------------------------- */

@keyframes navSlideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.navbar {
  animation: navSlideDown 0.6s cubic-bezier(0.4,0,0.2,1) forwards;
}

/* ----------------------------------------------------------
   STAT CARD — Hover glow
   ---------------------------------------------------------- */

.stat-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(196,149,106,0.10);
}

/* ----------------------------------------------------------
   UBICACION PHOTO — Ken Burns subtle
   ---------------------------------------------------------- */

@keyframes kenBurns {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

.ubicacion-photo-wrap img {
  animation: kenBurns 12s ease infinite;
}

/* ----------------------------------------------------------
   SOCIAL LINKS — Stagger entrance
   ---------------------------------------------------------- */

.social-links .social-link {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, border-color 0.3s ease;
}

.social-links .social-link:hover {
  transform: translateY(-4px) scale(1.05);
}

/* ----------------------------------------------------------
   SECTION BACKGROUND — Subtle texture overlay
   ---------------------------------------------------------- */

.bg-cream::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(196,149,106,0.03) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(196,149,106,0.03) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.bg-cream {
  position: relative;
}

.bg-cream > .container {
  position: relative;
  z-index: 1;
}

/* ----------------------------------------------------------
   ALLY BENEFIT — Stagger entrance
   ---------------------------------------------------------- */

.ally-benefits .ally-benefit {
  transition: transform 0.3s ease, background 0.3s ease;
}

.ally-benefits .ally-benefit:hover {
  transform: translateX(4px);
  background: rgba(196,149,106,0.05);
}

/* ----------------------------------------------------------
   CONTACT FORM CARD — Ambient glow
   ---------------------------------------------------------- */

@keyframes formGlow {
  0%, 100% { box-shadow: 0 0 30px rgba(196,149,106,0.04); }
  50%       { box-shadow: 0 0 50px rgba(196,149,106,0.08); }
}

.contact-form {
  animation: formGlow 5s ease infinite;
}

/* ----------------------------------------------------------
   FOOTER LINK — Underline slide-in
   ---------------------------------------------------------- */

.footer-links a {
  position: relative;
}

.footer-links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--rose);
  transition: width 0.3s ease;
}

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

/* ----------------------------------------------------------
   CAROUSEL DOT — Active expand animation
   ---------------------------------------------------------- */

@keyframes dotExpand {
  from { width: 8px; }
  to   { width: 24px; }
}

.carousel-dot.active {
  animation: dotExpand 0.3s ease forwards;
}

/* ----------------------------------------------------------
   REDUCED MOTION
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .fade-in,
  .slide-up,
  .slide-left,
  .slide-right,
  .scale-in {
    opacity: 1;
    transform: none;
  }

  .hero-content::after,
  .bg-cream::before {
    display: none;
  }
}