/* ===== VARIABLES ===== */
:root {
  --pink: #FF4DA6;
  --pink-light: #FFB3D9;
  --pink-pale: #FFF0F7;
  --pink-dark: #cc3d86;
  --gold: #D4AF37;
  --gold-light: #FFE680;
  --white: #ffffff;
  --dark: #1a1a1a;
  --gray: #666;
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Nunito', sans-serif; color: var(--dark); overflow-x: hidden; cursor: none; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; cursor: none; }

/* ===== CUSTOM CURSOR ===== */
#cursor {
  position: fixed;
  width: 28px; height: 28px;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  font-size: 22px;
  transition: transform 0.15s ease;
  filter: drop-shadow(0 0 6px rgba(255,77,166,0.8));
}
#cursor.hover { transform: translate(-50%,-50%) scale(1.6); }
#cursorTrail {
  position: fixed;
  width: 14px; height: 14px;
  background: rgba(255,77,166,0.35);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%,-50%);
  transition: width 0.2s, height 0.2s;
}

/* ===== KEYFRAMES ===== */
@keyframes float {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-18px) rotate(5deg); }
}
@keyframes floatReverse {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(-5deg); }
}
@keyframes heartbeat {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}
@keyframes fadeUp {
  from { opacity:0; transform:translateY(40px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes zoomIn {
  from { opacity:0; transform:scale(0.85); }
  to { opacity:1; transform:scale(1); }
}
@keyframes bounce {
  0%,100% { transform:translateY(0); }
  25% { transform:translateY(-8px); }
  75% { transform:translateY(4px); }
}
@keyframes pulse-ring {
  0% { transform:scale(0.8); opacity:1; }
  100% { transform:scale(2.2); opacity:0; }
}
@keyframes confettiFall {
  0% { transform:translateY(-20px) rotate(0deg); opacity:1; }
  100% { transform:translateY(105vh) rotate(720deg); opacity:0; }
}
@keyframes sparkleAnim {
  0% { opacity:0; transform:scale(0) rotate(0deg); }
  40% { opacity:1; transform:scale(1.2) rotate(180deg); }
  100% { opacity:0; transform:scale(0) rotate(360deg); }
}
@keyframes shimmer {
  0% { background-position:-200% center; }
  100% { background-position:200% center; }
}
@keyframes typewriterBlink {
  0%,100% { border-color: var(--pink); }
  50% { border-color: transparent; }
}
@keyframes slideInLeft {
  from { opacity:0; transform:translateX(-60px); }
  to { opacity:1; transform:translateX(0); }
}
@keyframes slideInRight {
  from { opacity:0; transform:translateX(60px); }
  to { opacity:1; transform:translateX(0); }
}
@keyframes pkgSpark {
  0% { opacity:1; transform:translateY(0) scale(1); }
  100% { opacity:0; transform:translateY(-40px) scale(0.5); }
}
@keyframes glowPulse {
  0%,100% { box-shadow: 0 0 20px rgba(255,77,166,0.4); }
  50% { box-shadow: 0 0 40px rgba(255,77,166,0.8), 0 0 80px rgba(255,77,166,0.3); }
}
@keyframes ribbonWave {
  0%,100% { transform:skewX(0deg); }
  50% { transform:skewX(-3deg); }
}

/* ===== ANNOUNCEMENT BAR ===== */
#announcementBar {
  background: linear-gradient(90deg, #D4AF37, #FF4DA6, #D4AF37, #FF4DA6);
  background-size: 300% 100%;
  animation: shimmer 4s linear infinite;
  color: var(--white);
  text-align: center;
  padding: 10px 48px;
  font-size: 0.9rem;
  font-weight: 800;
  position: relative;
  z-index: 1001;
  letter-spacing: 0.5px;
  transition: max-height 0.4s, padding 0.4s;
  max-height: 60px;
}
#announcementBar a { color: var(--white); text-decoration: underline; margin-left: 8px; }
#closeAnnouncement {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--white); font-size: 1.2rem; cursor: none; opacity: 0.8;
}

/* ===== CONFETTI ===== */
.confetti-piece {
  position: fixed;
  top: -30px;
  z-index: 99997;
  pointer-events: none;
  animation: confettiFall linear forwards;
}

/* ===== SPARKLE PARTICLES ===== */
.sparkle-particle {
  position: absolute;
  pointer-events: none;
  animation: sparkleAnim ease-in-out infinite;
  user-select: none;
  z-index: 1;
}

/* ===== NAVBAR ===== */
#navbar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000; padding: 16px 24px;
  display: flex; align-items: center; justify-content: space-between;
  transition: all 0.4s ease; background: transparent;
}
#navbar.scrolled {
  background: rgba(255,77,166,0.97);
  backdrop-filter: blur(10px);
  padding: 10px 24px;
  box-shadow: 0 4px 20px rgba(255,77,166,0.4);
}
.nav-logo { font-family:'Pacifico',cursive; font-size:1.4rem; color:var(--white); text-shadow:2px 2px 4px rgba(0,0,0,0.3); line-height:1.1; }
.nav-logo span { font-family:'Dancing Script',cursive; font-size:1rem; display:block; color:var(--gold-light); }
.nav-links { display:flex; gap:24px; align-items:center; list-style:none; }
.nav-links a { color:var(--white); font-weight:700; font-size:0.9rem; text-transform:uppercase; letter-spacing:0.5px; text-shadow:1px 1px 3px rgba(0,0,0,0.3); transition:color 0.3s; }
.nav-links a:hover { color:var(--gold-light); }
.nav-reservar { background:var(--gold); color:var(--dark)!important; padding:8px 18px; border-radius:50px; text-shadow:none!important; transition:all 0.3s!important; }
.nav-reservar:hover { background:var(--gold-light)!important; transform:scale(1.05); }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:none; padding:4px; }
.hamburger span { display:block; width:26px; height:3px; background:var(--white); border-radius:3px; transition:all 0.3s; }
.hamburger.open span:nth-child(1) { transform:translateY(8px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }

.mobile-menu { display:none; position:fixed; inset:0; background:rgba(255,77,166,0.97); z-index:999; flex-direction:column; align-items:center; justify-content:center; gap:32px; }
.mobile-menu.open { display:flex; animation:fadeUp 0.3s ease; }
.mobile-menu a { color:var(--white); font-family:'Pacifico',cursive; font-size:1.8rem; text-shadow:2px 2px 4px rgba(0,0,0,0.2); }
.mobile-menu a:hover { color:var(--gold-light); }
.mobile-close { position:absolute; top:20px; right:24px; font-size:2rem; color:var(--white); cursor:none; background:none; border:none; }

/* ===== HERO ===== */
#hero {
  min-height: 100vh; position:relative; display:flex; align-items:center; overflow:hidden;
  background: linear-gradient(135deg, #FF4DA6 0%, #ff6eb4 30%, #FFB3D9 60%, #FFF0F7 100%);
}
#hero::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse at 30% 50%, rgba(212,175,55,0.15) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 20%, rgba(255,255,255,0.2) 0%, transparent 50%);
}
.hero-bg, .hero-overlay { display:none; }
.hero-inner {
  position:relative; z-index:2; width:100%; max-width:1360px; margin:0 auto;
  padding:130px 60px 80px;
  display:grid; grid-template-columns:1fr 460px; gap:60px; align-items:center;
}
.hero-content { position:relative; z-index:2; }
.hero-badge {
  display:inline-block; background:var(--gold); color:var(--dark);
  font-weight:800; font-size:0.8rem; text-transform:uppercase; letter-spacing:2px;
  padding:7px 20px; border-radius:50px; margin-bottom:20px;
  animation:bounce 2s ease-in-out infinite;
  box-shadow: 0 4px 16px rgba(212,175,55,0.5);
}
.hero-title {
  font-family:'Pacifico',cursive; font-size:clamp(2.2rem,4.5vw,3.8rem); color:var(--white);
  text-shadow:3px 3px 10px rgba(0,0,0,0.2); line-height:1.1; margin-bottom:8px;
  animation:slideInLeft 0.9s ease forwards;
}
.hero-subtitle {
  font-family:'Dancing Script',cursive; font-size:clamp(1.6rem,3vw,2.6rem);
  color:var(--gold-light); text-shadow:1px 1px 6px rgba(0,0,0,0.2); margin-bottom:16px;
  animation:slideInLeft 0.9s 0.15s ease both;
}
.hero-typing-line {
  font-size:1.15rem; font-weight:800; color:var(--white); margin-bottom:14px;
  animation:fadeUp 0.8s 0.3s ease both; min-height:32px; display:flex; align-items:center; gap:6px;
}
#typingText {
  border-right:3px solid var(--pink);
  padding-right:4px;
  animation:typewriterBlink 0.8s step-end infinite;
  color:var(--gold-light);
  text-shadow:0 0 12px rgba(255,230,128,0.6);
}
.hero-tagline {
  font-size:0.98rem; color:rgba(255,255,255,0.92); font-weight:700; margin-bottom:32px;
  line-height:1.7; animation:fadeUp 0.8s 0.4s ease both;
}
.hero-buttons { display:flex; gap:16px; flex-wrap:wrap; animation:fadeUp 0.8s 0.55s ease both; }

.hero-flyer {
  position:relative; z-index:2; display:flex; align-items:center; justify-content:center;
  animation:slideInRight 0.9s 0.2s ease both;
}
.hero-flyer img {
  width:100%; max-width:400px; border-radius:28px;
  box-shadow:0 30px 70px rgba(0,0,0,0.3), 0 0 0 6px rgba(255,255,255,0.25), 0 0 60px rgba(255,77,166,0.4);
  animation:float 6s ease-in-out infinite;
  animation-delay: 0.5s;
}
.hero-flyer::before {
  content:''; position:absolute;
  width:120%; height:120%; border-radius:50%;
  background:radial-gradient(ellipse, rgba(212,175,55,0.2) 0%, transparent 70%);
  animation:glowPulse 3s ease-in-out infinite;
  pointer-events:none;
}

.hero-scroll-hint {
  position:absolute; bottom:30px; left:50%; transform:translateX(-50%);
  z-index:2; display:flex; flex-direction:column; align-items:center; gap:6px;
  color:var(--white); font-size:0.8rem; font-weight:700; opacity:0.8;
  animation:bounce 2s ease-in-out infinite;
}
.hero-scroll-hint svg { width:24px; height:24px; fill:var(--white); }

/* ===== BUTTONS ===== */
.btn-primary {
  background:linear-gradient(135deg, var(--pink), var(--pink-dark));
  color:var(--white); font-weight:800; font-size:1rem; padding:14px 32px;
  border-radius:50px; border:none; cursor:none; transition:all 0.3s;
  box-shadow:0 6px 20px rgba(255,77,166,0.5); text-transform:uppercase; letter-spacing:1px;
  display:inline-block; position:relative; overflow:hidden;
}
.btn-primary::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
  opacity:0; transition:opacity 0.3s;
}
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 12px 32px rgba(255,77,166,0.6); }
.btn-primary:hover::after { opacity:1; }
.btn-secondary {
  background:transparent; color:var(--white); font-weight:800; font-size:1rem;
  padding:13px 32px; border-radius:50px; border:3px solid rgba(255,255,255,0.8);
  cursor:none; transition:all 0.3s; text-transform:uppercase; letter-spacing:1px; display:inline-block;
}
.btn-secondary:hover { background:var(--white); color:var(--pink); transform:translateY(-3px); }

/* ===== SECTIONS ===== */
.section { padding:90px 40px; scroll-margin-top:80px; }
#agendar { scroll-margin-top:80px; }
.section-alt { background:var(--pink-pale); }
.section-pink { background:linear-gradient(135deg, var(--pink) 0%, var(--pink-light) 100%); }
.container { max-width:1360px; margin:0 auto; width:100%; }

.section-title { text-align:center; margin-bottom:60px; }
.section-title h2 { font-family:'Pacifico',cursive; font-size:clamp(2rem,4vw,3rem); color:var(--pink); margin-bottom:12px; }
.section-title.light h2 { color:var(--white); }
.section-title .separator { display:flex; align-items:center; justify-content:center; gap:10px; margin:12px 0; }
.section-title .separator span { font-size:1.3rem; }
.section-title .line { width:60px; height:3px; background:var(--gold); border-radius:3px; }
.section-title p { color:var(--gray); font-size:1.05rem; max-width:550px; margin:0 auto; }
.section-title.light p { color:rgba(255,255,255,0.85); }

.reveal { opacity:0; transform:translateY(40px); transition:opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-left { opacity:0; transform:translateX(-50px); transition:opacity 0.7s ease, transform 0.7s ease; }
.reveal-left.visible { opacity:1; transform:translateX(0); }
.reveal-right { opacity:0; transform:translateX(50px); transition:opacity 0.7s ease, transform 0.7s ease; }
.reveal-right.visible { opacity:1; transform:translateX(0); }

/* ===== SERVICIOS ===== */
.services-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:28px; }
.service-card {
  background:var(--white); border-radius:24px; padding:36px 28px; text-align:center;
  box-shadow:0 8px 32px rgba(255,77,166,0.1); transition:box-shadow 0.3s ease;
  border:2px solid transparent; position:relative; overflow:hidden;
  transform-style:preserve-3d; will-change:transform;
}
.service-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--pink), var(--gold), var(--pink));
  background-size:200% 100%; animation:shimmer 3s linear infinite;
}
.service-card:hover { border-color:var(--pink-light); box-shadow:0 20px 50px rgba(255,77,166,0.25); }
.service-icon { font-size:3.5rem; margin-bottom:16px; display:block; animation:float 4s ease-in-out infinite; }
.service-card:nth-child(2) .service-icon { animation-delay:0.5s; }
.service-card:nth-child(3) .service-icon { animation-delay:1s; }
.service-card:nth-child(4) .service-icon { animation-delay:1.5s; }
.service-card:nth-child(5) .service-icon { animation-delay:2s; }
.service-card:nth-child(6) .service-icon { animation-delay:2.5s; }
.service-card h3 { font-family:'Pacifico',cursive; font-size:1.2rem; color:var(--pink); margin-bottom:10px; }
.service-card p { color:var(--gray); font-size:0.95rem; line-height:1.6; }

/* ===== PAQUETES ===== */
.packages-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:28px; align-items:start; }
.pkg-card {
  border-radius:28px; padding:36px 28px; text-align:center; position:relative; overflow:hidden;
  transition:transform 0.4s ease, box-shadow 0.4s ease; cursor:none;
}
.pkg-card:hover { transform:translateY(-12px) scale(1.02); }
.pkg-card-img { padding:0; display:flex; flex-direction:column; }
.pkg-flyer-img { width:100%; border-radius:28px 28px 0 0; display:block; object-fit:cover; }
.pkg-card-img .pkg-btn { border-radius:0 0 22px 22px; margin:0; width:100%; box-sizing:border-box; }
.mariachis-section { margin-top:44px; display:flex; flex-direction:column; align-items:center; gap:0; max-width:420px; margin-left:auto; margin-right:auto; border-radius:28px; overflow:hidden; box-shadow:0 12px 40px rgba(212,175,55,0.25); }
.mariachis-img { width:100%; display:block; object-fit:cover; }
.mariachis-btn { width:100%; box-sizing:border-box; border-radius:0 0 22px 22px; background:linear-gradient(135deg,var(--gold),#c9a227); color:#fff; }
.pkg-card.basic { background:var(--white); border:2px solid var(--pink-light); box-shadow:0 8px 30px rgba(255,77,166,0.1); }
.pkg-card.popular {
  background:linear-gradient(135deg, var(--pink), #ff6eb4);
  box-shadow:0 16px 50px rgba(255,77,166,0.5); border:none;
  animation:glowPulse 3s ease-in-out infinite;
}
.pkg-card.premium {
  background:linear-gradient(135deg, #1a1a1a, #2d1a2d);
  border:2px solid var(--gold); box-shadow:0 16px 50px rgba(212,175,55,0.3);
}
.pkg-badge {
  position:absolute; top:-1px; left:50%; transform:translateX(-50%);
  background:var(--gold); color:var(--dark); font-weight:800; font-size:0.75rem;
  padding:5px 18px; border-radius:0 0 16px 16px; text-transform:uppercase; letter-spacing:1px;
  white-space:nowrap;
}
.pkg-icon { font-size:3.5rem; margin-bottom:16px; display:block; animation:float 4s ease-in-out infinite; }
.pkg-card.popular .pkg-icon { animation-delay:0.5s; }
.pkg-card.premium .pkg-icon { animation-delay:1s; }
.pkg-name { font-family:'Pacifico',cursive; font-size:1.4rem; margin-bottom:8px; }
.pkg-card.basic .pkg-name { color:var(--pink); }
.pkg-card.popular .pkg-name, .pkg-card.premium .pkg-name { color:var(--white); }
.pkg-price { font-family:'Pacifico',cursive; font-size:2.4rem; margin:16px 0 4px; }
.pkg-card.basic .pkg-price { color:var(--dark); }
.pkg-card.popular .pkg-price { color:var(--gold-light); }
.pkg-card.premium .pkg-price { color:var(--gold); }
.pkg-price-sub { font-size:0.85rem; font-weight:700; opacity:0.7; margin-bottom:20px; }
.pkg-card.basic .pkg-price-sub { color:var(--gray); }
.pkg-card.popular .pkg-price-sub, .pkg-card.premium .pkg-price-sub { color:rgba(255,255,255,0.8); }
.pkg-features { list-style:none; margin-bottom:28px; text-align:left; }
.pkg-features li { padding:8px 0; font-size:0.92rem; border-bottom:1px solid rgba(0,0,0,0.06); display:flex; gap:8px; }
.pkg-card.popular .pkg-features li, .pkg-card.premium .pkg-features li { color:rgba(255,255,255,0.9); border-bottom-color:rgba(255,255,255,0.1); }
.pkg-btn {
  display:block; width:100%; padding:13px; border-radius:50px; border:none;
  font-family:'Nunito',sans-serif; font-weight:800; font-size:1rem; cursor:none;
  text-transform:uppercase; letter-spacing:1px; transition:all 0.3s; text-decoration:none;
}
.pkg-card.basic .pkg-btn { background:var(--pink); color:var(--white); box-shadow:0 6px 20px rgba(255,77,166,0.4); }
.pkg-card.basic .pkg-btn:hover { background:var(--pink-dark); transform:scale(1.03); }
.pkg-card.popular .pkg-btn { background:var(--white); color:var(--pink); box-shadow:0 6px 20px rgba(0,0,0,0.2); }
.pkg-card.popular .pkg-btn:hover { background:var(--gold-light); transform:scale(1.03); }
.pkg-card.premium .pkg-btn { background:var(--gold); color:var(--dark); box-shadow:0 6px 20px rgba(212,175,55,0.5); }
.pkg-card.premium .pkg-btn:hover { background:var(--gold-light); transform:scale(1.03); }
.pkg-spark { position:absolute; pointer-events:none; animation:pkgSpark 0.8s ease forwards; }

/* ===== MASCOTAS ===== */
.mascotas-section { margin-top:44px; text-align:center; }
.mascotas-title { font-family:'Dancing Script',cursive; font-size:1.5rem; color:var(--pink); margin-bottom:16px; font-weight:700; }
.mascotas-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.mascota-chip {
  background:linear-gradient(135deg,#fff0f7,#ffe0ef);
  border:2px solid var(--pink-light);
  color:var(--pink-dark);
  font-weight:800;
  font-size:0.95rem;
  padding:10px 20px;
  border-radius:50px;
  box-shadow:0 4px 14px rgba(255,77,166,0.15);
  transition:transform 0.2s,box-shadow 0.2s;
}
.mascota-chip:hover { transform:translateY(-4px) scale(1.06); box-shadow:0 8px 22px rgba(255,77,166,0.3); }

/* ===== EXTRAS BAR ===== */
.extras-bar {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
  margin-top:36px;
  background:linear-gradient(135deg,#fff0f7,#ffe8f4);
  border:2px solid var(--pink-light);
  border-radius:20px;
  padding:24px 28px;
}
.extra-item { display:flex; align-items:center; gap:14px; }
.extra-item > span { font-size:2rem; flex-shrink:0; }
.extra-item strong { font-size:1rem; color:var(--dark); display:block; }
.extra-item p { font-size:0.85rem; color:var(--gray); margin-top:2px; }
.extra-item strong em { color:var(--pink); font-style:normal; }

/* ===== ABOUT ===== */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.about-img-wrapper { position:relative; border-radius:30px; overflow:hidden; box-shadow:0 20px 60px rgba(255,77,166,0.3); }
.about-img-wrapper img { width:100%; height:500px; object-fit:cover; }
.about-img-badge {
  position:absolute; bottom:24px; right:-10px; background:var(--gold); color:var(--dark);
  font-weight:800; padding:12px 20px; border-radius:16px; font-size:1.1rem;
  box-shadow:0 8px 24px rgba(212,175,55,0.5); text-align:center; line-height:1.2;
}
.about-content h2 { font-family:'Pacifico',cursive; font-size:2.2rem; color:var(--pink); margin-bottom:16px; line-height:1.2; }
.about-content .tagline { font-family:'Dancing Script',cursive; font-size:1.5rem; color:var(--gold); margin-bottom:20px; }
.about-content p { color:var(--gray); line-height:1.8; font-size:1rem; margin-bottom:16px; }
.about-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:32px; }
.stat-box { text-align:center; background:var(--white); border-radius:16px; padding:20px 12px; box-shadow:0 4px 16px rgba(255,77,166,0.1); transition:transform 0.3s; }
.stat-box:hover { transform:translateY(-4px); }
.stat-num { font-family:'Pacifico',cursive; font-size:2rem; color:var(--pink); display:block; }
.stat-label { font-size:0.8rem; color:var(--gray); font-weight:700; }

/* ===== GALERÍA ===== */
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.gallery-item {
  position:relative; border-radius:16px; overflow:hidden; cursor:none;
  aspect-ratio:1; background:var(--pink-pale);
  box-shadow:0 4px 16px rgba(255,77,166,0.15); transition:transform 0.4s ease, box-shadow 0.4s ease;
}
.gallery-item:hover { transform:scale(1.04); box-shadow:0 16px 40px rgba(255,77,166,0.3); }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease; }
.gallery-item:hover img { transform:scale(1.1); }
.gallery-overlay {
  position:absolute; inset:0; background:rgba(255,77,166,0.7);
  display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity 0.3s;
}
.gallery-item:hover .gallery-overlay { opacity:1; }
.gallery-overlay span { font-size:2.5rem; }
.gallery-placeholder {
  width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; background:linear-gradient(135deg, var(--pink-pale), var(--pink-light));
  color:var(--pink); font-size:0.85rem; font-weight:700;
}
.gallery-placeholder span { font-size:2.5rem; }

#lightbox { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.92); z-index:2000; align-items:center; justify-content:center; }
#lightbox.open { display:flex; }
#lightbox img { max-width:90vw; max-height:85vh; border-radius:16px; object-fit:contain; animation:zoomIn 0.3s ease; }
.lightbox-close { position:absolute; top:20px; right:24px; font-size:2.5rem; color:var(--white); cursor:none; background:none; border:none; line-height:1; }
.lightbox-prev, .lightbox-next {
  position:absolute; top:50%; transform:translateY(-50%);
  font-size:2.5rem; color:var(--white); cursor:none; background:rgba(255,255,255,0.1);
  border:none; border-radius:50%; width:56px; height:56px; display:flex; align-items:center; justify-content:center; transition:background 0.3s;
}
.lightbox-prev:hover, .lightbox-next:hover { background:rgba(255,77,166,0.6); }
.lightbox-prev { left:20px; } .lightbox-next { right:20px; }

/* ===== VIDEOS ===== */
.videos-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:24px; }
.video-thumb {
  position:relative; border-radius:20px; overflow:hidden; cursor:none;
  background:var(--dark); aspect-ratio:16/9;
  box-shadow:0 8px 24px rgba(0,0,0,0.2); transition:transform 0.3s, box-shadow 0.3s;
}
.video-thumb:hover { transform:translateY(-8px) scale(1.02); box-shadow:0 20px 50px rgba(255,77,166,0.4); }
.video-thumb img { width:100%; height:100%; object-fit:cover; opacity:0.8; transition:opacity 0.3s; }
.video-thumb:hover img { opacity:0.6; }
.video-play {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:68px; height:68px; background:rgba(255,77,166,0.9); border-radius:50%;
  display:flex; align-items:center; justify-content:center; transition:all 0.3s;
  box-shadow:0 0 0 0 rgba(255,77,166,0.4); animation:pulse-ring 2s ease-out infinite;
}
.video-thumb:hover .video-play { background:var(--pink); transform:translate(-50%,-50%) scale(1.15); }
.video-play svg { width:28px; height:28px; fill:var(--white); margin-left:4px; }
.video-title { position:absolute; bottom:0; left:0; right:0; padding:16px; background:linear-gradient(transparent,rgba(0,0,0,0.8)); color:var(--white); font-weight:700; font-size:0.9rem; }
.video-placeholder { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:linear-gradient(135deg,#2d1b2d,#3d1a3d); color:var(--pink-light); font-size:0.85rem; font-weight:700; }
.video-placeholder span { font-size:3rem; }

.video-local {
  border-radius:20px; overflow:hidden;
  box-shadow:0 8px 32px rgba(255,77,166,0.2);
  background:#1a1a1a; transition:transform 0.3s, box-shadow 0.3s;
}
.video-local:hover { transform:translateY(-6px); box-shadow:0 20px 50px rgba(255,77,166,0.35); }
.video-local video {
  width:100%; display:block; aspect-ratio:16/9; background:#000;
}
.video-label {
  padding:12px 16px; font-weight:800; font-size:0.95rem;
  color:var(--white); background:linear-gradient(135deg,var(--pink),#ff6eb4);
  text-align:center;
}

#videoModal { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.95); z-index:2000; align-items:center; justify-content:center; }
#videoModal.open { display:flex; }
.video-modal-inner { position:relative; width:min(800px,90vw); aspect-ratio:16/9; border-radius:16px; overflow:hidden; animation:zoomIn 0.3s ease; }
.video-modal-inner iframe { width:100%; height:100%; border:none; }
.modal-close { position:absolute; top:-50px; right:0; font-size:2rem; color:var(--white); cursor:none; background:none; border:none; }

/* ===== TESTIMONIOS ===== */
.testimonials-wrapper { position:relative; overflow:hidden; }
.testimonials-track { display:flex; transition:transform 0.5s cubic-bezier(0.4,0,0.2,1); }
.testimonial-card { min-width:100%; padding:0 16px; }
.testimonial-inner {
  background:rgba(255,255,255,0.15); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.3); border-radius:24px; padding:40px;
  max-width:700px; margin:0 auto; text-align:center;
}
.testimonial-avatar {
  width:72px; height:72px; border-radius:50%; background:var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-family:'Pacifico',cursive; font-size:1.6rem; color:var(--dark);
  margin:0 auto 16px; box-shadow:0 4px 16px rgba(212,175,55,0.5);
}
.testimonial-stars { color:var(--gold-light); font-size:1.4rem; margin-bottom:16px; }
.testimonial-text { font-size:1.05rem; color:var(--white); line-height:1.8; font-style:italic; margin-bottom:20px; }
.testimonial-name { font-family:'Pacifico',cursive; font-size:1.1rem; color:var(--gold-light); }
.testimonial-city { font-size:0.85rem; color:rgba(255,255,255,0.7); }
.testimonial-dots { display:flex; justify-content:center; gap:10px; margin-top:32px; }
.dot { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,0.4); cursor:none; transition:all 0.3s; }
.dot.active { background:var(--gold); transform:scale(1.4); }

/* ===== CONTACTO ===== */
.contact-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:60px; align-items:start; }
.contact-info h3 { font-family:'Pacifico',cursive; font-size:1.6rem; color:var(--pink); margin-bottom:24px; }
.contact-item {
  display:flex; align-items:center; gap:14px; margin-bottom:20px;
  padding:16px; background:var(--pink-pale); border-radius:16px; transition:transform 0.3s, box-shadow 0.3s;
}
.contact-item:hover { transform:translateX(8px); box-shadow:0 4px 16px rgba(255,77,166,0.2); }
.contact-item .icon { font-size:1.6rem; }
.contact-item-text strong { display:block; font-weight:800; color:var(--dark); font-size:0.85rem; text-transform:uppercase; }
.contact-item-text a, .contact-item-text span { color:var(--gray); font-size:0.95rem; }
.contact-form { background:var(--white); border-radius:24px; padding:36px; box-shadow:0 8px 40px rgba(255,77,166,0.12); }
.contact-form h3 { font-family:'Pacifico',cursive; color:var(--pink); margin-bottom:24px; font-size:1.4rem; }
.form-group { margin-bottom:18px; }
.form-group label { display:block; font-weight:800; font-size:0.85rem; color:var(--dark); margin-bottom:6px; text-transform:uppercase; }
.form-group input, .form-group textarea, .form-group select {
  width:100%; padding:12px 16px; border:2px solid var(--pink-light); border-radius:12px;
  font-family:'Nunito',sans-serif; font-size:0.95rem; color:var(--dark); background:var(--white);
  transition:border-color 0.3s, box-shadow 0.3s; outline:none; cursor:none;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  border-color:var(--pink); box-shadow:0 0 0 4px rgba(255,77,166,0.1);
}
.form-group textarea { resize:vertical; min-height:100px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.btn-whatsapp {
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:15px;
  background:linear-gradient(135deg, #25D366, #1da851); color:var(--white); border:none; border-radius:50px;
  font-family:'Nunito',sans-serif; font-size:1rem; font-weight:800; cursor:none; transition:all 0.3s;
  text-transform:uppercase; letter-spacing:1px; box-shadow:0 6px 20px rgba(37,211,102,0.4); text-decoration:none;
}
.btn-whatsapp:hover { transform:translateY(-3px); box-shadow:0 12px 32px rgba(37,211,102,0.5); }
.btn-whatsapp svg { width:24px; height:24px; fill:var(--white); flex-shrink:0; }

/* ===== AGENDAR ===== */
.agendar-wrapper {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: start;
}
.agendar-card {
  background: var(--white);
  border-radius: 28px;
  box-shadow: 0 12px 50px rgba(255,77,166,0.15);
  overflow: hidden;
  border: 2px solid var(--pink-light);
}
.agendar-header {
  background: linear-gradient(135deg, var(--pink), #ff6eb4);
  padding: 28px 32px;
  text-align: center;
  color: var(--white);
}
.agendar-icon { font-size: 3rem; display: block; margin-bottom: 8px; animation: float 4s ease-in-out infinite; }
.agendar-header h3 { font-family: 'Pacifico', cursive; font-size: 1.6rem; margin-bottom: 6px; }
.agendar-header p { opacity: 0.9; font-size: 0.95rem; }
.agendar-form { padding: 28px 32px; }
.agendar-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.agendar-form .form-group { margin-bottom: 16px; }
.agendar-form label { display: block; font-weight: 800; font-size: 0.85rem; color: var(--dark); margin-bottom: 6px; }
.agendar-form input,
.agendar-form select,
.agendar-form textarea {
  width: 100%; padding: 11px 14px;
  border: 2px solid var(--pink-light); border-radius: 12px;
  font-family: 'Nunito', sans-serif; font-size: 0.95rem; color: var(--dark);
  outline: none; transition: border-color 0.3s, box-shadow 0.3s; cursor: none;
}
.agendar-form input:focus,
.agendar-form select:focus,
.agendar-form textarea:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 4px rgba(255,77,166,0.1);
}
.agendar-form textarea { min-height: 90px; resize: vertical; }
.btn-agendar {
  width: 100%; padding: 15px; border: none; border-radius: 50px; cursor: none;
  background: linear-gradient(135deg, #25D366, #1da851);
  color: var(--white); font-family: 'Nunito', sans-serif;
  font-size: 1.05rem; font-weight: 800; letter-spacing: 0.5px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 6px 24px rgba(37,211,102,0.4);
  transition: all 0.3s; margin-top: 8px;
}
.btn-agendar:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(37,211,102,0.5); }

.agendar-info { display: flex; flex-direction: column; gap: 20px; }
.agendar-feature {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--white); border-radius: 16px; padding: 18px;
  box-shadow: 0 4px 16px rgba(255,77,166,0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}
.agendar-feature:hover { transform: translateX(6px); box-shadow: 0 8px 24px rgba(255,77,166,0.2); }
.agendar-feature > span { font-size: 2rem; flex-shrink: 0; }
.agendar-feature strong { display: block; font-weight: 800; color: var(--dark); margin-bottom: 3px; }
.agendar-feature p { font-size: 0.88rem; color: var(--gray); margin: 0; }
.agendar-whatsapp-direct {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #25D366; color: var(--white); border-radius: 50px; padding: 14px 20px;
  font-weight: 800; font-size: 0.95rem; text-decoration: none;
  box-shadow: 0 6px 20px rgba(37,211,102,0.4); transition: all 0.3s; cursor: none;
}
.agendar-whatsapp-direct:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(37,211,102,0.5); }

@media (max-width: 900px) {
  .agendar-wrapper { grid-template-columns: 1fr; }
  .agendar-row { grid-template-columns: 1fr; }
}

/* ===== FOOTER ===== */
footer { background:var(--pink); color:var(--white); padding:60px 40px 200px; }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:40px; max-width:1360px; margin:0 auto 40px; }
.footer-brand h3 { font-family:'Pacifico',cursive; font-size:1.6rem; margin-bottom:6px; }
.footer-brand p { font-size:0.9rem; opacity:0.85; line-height:1.7; margin-top:12px; }
.footer-col h4 { font-weight:800; text-transform:uppercase; letter-spacing:1px; font-size:0.85rem; margin-bottom:16px; color:var(--gold-light); }
.footer-col ul { list-style:none; }
.footer-col ul li { margin-bottom:10px; }
.footer-col ul li a { opacity:0.85; font-size:0.95rem; transition:opacity 0.3s; }
.footer-col ul li a:hover { opacity:1; color:var(--gold-light); }
.social-links { display:flex; gap:12px; margin-top:16px; }
.social-link {
  width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,0.15);
  display:flex; align-items:center; justify-content:center; font-size:1.2rem;
  transition:all 0.3s; text-decoration:none; cursor:none;
}
.social-link:hover { background:var(--gold); transform:scale(1.15) rotate(8deg); }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.2); padding-top:24px; text-align:center; font-size:0.85rem; opacity:0.8; max-width:1200px; margin:0 auto; }
.footer-bottom span { color:var(--gold-light); }

/* ===== WHATSAPP FLOAT ===== */
#whatsapp-float {
  position:fixed; bottom:28px; right:28px; z-index:999;
  width:66px; height:66px; background:#25D366; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 28px rgba(37,211,102,0.6); text-decoration:none;
  animation:heartbeat 2.5s ease-in-out infinite; transition:transform 0.3s;
}
#whatsapp-float::before {
  content:''; position:absolute; inset:0; border-radius:50%; background:#25D366;
  animation:pulse-ring 2s ease-out infinite;
}
#whatsapp-float:hover { transform:scale(1.2); }
#whatsapp-float svg { width:34px; height:34px; fill:var(--white); position:relative; z-index:1; }

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

/* Tablets / pantallas medianas */
@media (max-width:1024px) {
  .hero-inner { padding:120px 40px 70px; gap:40px; }
  .hero-inner { grid-template-columns:1fr 380px; }
  .section { padding:80px 32px; }
}

/* Landscape móvil / tablets pequeñas */
@media (max-width:900px) {
  .hero-inner { grid-template-columns:1fr; text-align:center; padding:110px 24px 60px; gap:32px; }
  .hero-content { text-align:center; }
  .hero-buttons { justify-content:center; }
  .hero-flyer { order:-1; }
  .hero-flyer img { max-width:280px; }
  .hero-typing-line { justify-content:center; }
  .packages-grid { grid-template-columns:1fr; max-width:420px; margin:0 auto; }
  .agendar-wrapper { grid-template-columns:1fr; }
  .agendar-row { grid-template-columns:1fr; }
  .extras-bar { grid-template-columns:1fr; }
}

/* Móvil estándar */
@media (max-width:768px) {
  .nav-links { display:none; }
  .hamburger { display:flex; }
  .about-grid { grid-template-columns:1fr; }
  .about-img-wrapper img { height:280px; }
  .contact-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; gap:28px; }
  .footer-bottom { font-size:0.78rem; }
  .form-row { grid-template-columns:1fr; }
  .mascotas-grid { gap:8px; }
  .mascota-chip { font-size:0.85rem; padding:8px 14px; }
  #cursor, #cursorTrail { display:none; }
  body, a, button { cursor:auto; }
  .section { padding:60px 20px; }
  footer { padding:50px 20px 24px; }
}

/* Móvil 375px (iPhone SE / estándar) */
@media (max-width:480px) {
  .section { padding:52px 16px; }
  .section-title { margin-bottom:40px; }
  .section-title h2 { font-size:1.7rem; }
  .section-title p { font-size:0.92rem; }

  #announcementBar { font-size:0.75rem; padding:8px 36px 8px 12px; text-align:center; }

  .hero-inner { padding:100px 16px 50px; gap:24px; }
  .hero-badge { font-size:0.7rem; padding:6px 14px; }
  .hero-title { font-size:2rem; }
  .hero-subtitle { font-size:1.4rem; }
  .hero-typing-line { font-size:0.95rem; }
  .hero-tagline { font-size:0.88rem; }
  .hero-flyer img { max-width:220px; border-radius:20px; }
  .btn-primary, .btn-secondary { font-size:0.85rem; padding:12px 22px; }
  .hero-buttons { gap:10px; flex-direction:column; align-items:center; }

  .services-grid { grid-template-columns:1fr; gap:16px; }
  .service-card { padding:28px 20px; }
  .service-icon { font-size:2.8rem; }

  .packages-grid { max-width:100%; }
  .pkg-card { padding:28px 20px; }
  .pkg-price { font-size:2.2rem; }
  .mascotas-title { font-size:1.2rem; }
  .mascota-chip { font-size:0.78rem; padding:7px 12px; }
  .extras-bar { padding:18px 16px; }
  .extra-item > span { font-size:1.6rem; }

  .about-stats { grid-template-columns:1fr 1fr; gap:12px; }
  .stat-box { padding:18px 12px; }
  .stat-num { font-size:2rem; }

  .gallery-grid { grid-template-columns:1fr 1fr; gap:10px; }

  .videos-grid { grid-template-columns:1fr; gap:16px; }

  .testimonial-inner { padding:24px 16px; }
  .testimonial-text { font-size:0.9rem; }

  .agendar-card { padding:24px 16px; }
  .agendar-header h3 { font-size:1.3rem; }
  .btn-agendar { font-size:0.92rem; padding:13px; }

  .contact-item { gap:12px; }
  .contact-item .icon { font-size:1.5rem; width:44px; height:44px; }

  .footer-grid { gap:20px; }
  .footer-brand h3 { font-size:1.3rem; }
  footer { padding:40px 16px 20px; }
  .footer-bottom { font-size:0.72rem; }

  #whatsapp-float { width:54px; height:54px; bottom:20px; right:16px; }
  #whatsapp-float svg { width:26px; height:26px; }

  /* navbar en 375px */
  #navbar { padding:14px 16px; }
  #navbar.scrolled { padding:10px 16px; }
  .nav-logo { font-size:1.1rem; }
  .nav-logo span { font-size:0.82rem; }

  /* mobile menu links más pequeños */
  .mobile-menu a { font-size:1.4rem; }
  .mobile-menu { gap:24px; }
}
