/* ============================================================
   APEMAR – Hoja de Estilos Principal
   Design System: Warm Professional / Senior Care
   ============================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Nunito:wght@400;500;600;700&display=swap');

/* ── CSS Custom Properties ── */
:root {
  --green-500: #22c55e;
  --green-600: #16a34a;
  --green-700: #15803d;
  --green-800: #166534;
  --green-900: #14532d;
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Nunito', system-ui, sans-serif;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,.10);
  --shadow-lg: 0 10px 40px rgba(0,0,0,.13);
  --shadow-xl: 0 20px 60px rgba(0,0,0,.16);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;
}

/* ── Base ── */
html { scroll-behavior: auto; }
body { font-family: var(--font-body); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--font-heading); letter-spacing: -0.01em; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 5px; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #22c55e, #15803d); border-radius: 5px; border: 2px solid #f1f5f9; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #16a34a, #166534); }
* { scrollbar-width: thin; scrollbar-color: #22c55e #f1f5f9; }
.scrollable-content { overflow-y: auto; scrollbar-width: thin; scrollbar-color: #22c55e #f1f5f9; }
.scrollable-content::-webkit-scrollbar { width: 7px; }
.scrollable-content::-webkit-scrollbar-track { background: #f8fafc; border-radius: 4px; }
.scrollable-content::-webkit-scrollbar-thumb { background: #22c55e; border-radius: 4px; }
.modal-content::-webkit-scrollbar { width: 7px; }
.modal-content::-webkit-scrollbar-track { background: #f8fafc; border-radius: 4px; }
.modal-content::-webkit-scrollbar-thumb { background: #22c55e; border-radius: 4px; }

/* ── FAQ Animations ── */
.faq-item {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item:hover {
  border-color: var(--green-500) !important;
}

.faq-item summary {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-item summary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.15), transparent);
  transition: left 0.6s ease;
}

.faq-item summary:hover::before {
  left: 100%;
}

.faq-item[open] {
  animation: expandOpen 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item[open] summary {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
  border-bottom: 3px solid var(--green-500);
}

.faq-item[open] .fa-chevron-down {
  transform: rotate(180deg) scale(1.1);
  color: var(--green-600);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item .fa-chevron-down {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animació fluida del contingut (desplegar / plegar) */
.faq-item > div {
  display: block;
  overflow: hidden;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  transition: max-height 0.4s ease-out, padding 0.4s ease-out;
  will-change: max-height, padding;
}

/* IMPORTANT: <details> per defecte amaga el contingut amb display:none.
   Ho sobrescrivim (per a TOTS els fills no-summary) per poder animar el plegat/desplegat. */
.faq-item:not([open]) > *:not(summary) {
  display: block !important;
}

@keyframes expandOpen {
  0% {
    transform: scale(1);
    box-shadow: 0 4px 16px rgba(0,0,0,.10);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 8px 25px rgba(34, 197, 94, 0.2);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 12px 40px rgba(34, 197, 94, 0.15);
  }
}

/* Icon animations */
.faq-item .fa-info-circle,
.faq-item .fa-hand-holding-heart,
.faq-item .fa-clock,
.faq-item .fa-briefcase-medical,
.faq-item .fa-users {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}

.faq-item:hover .fa-info-circle { 
  transform: rotate(15deg) scale(1.3); 
  color: var(--green-600); 
  filter: drop-shadow(0 4px 8px rgba(34, 197, 94, 0.3));
}

.faq-item:hover .fa-hand-holding-heart { 
  transform: scale(1.3); 
  color: #ec4899; 
  filter: drop-shadow(0 4px 8px rgba(236, 72, 153, 0.3));
}

.faq-item:hover .fa-clock { 
  transform: rotate(360deg) scale(1.2); 
  color: #3b82f6; 
  filter: drop-shadow(0 4px 8px rgba(59, 130, 246, 0.3));
}

.faq-item:hover .fa-briefcase-medical { 
  transform: translateY(-5px) scale(1.2); 
  color: #8b5cf6; 
  filter: drop-shadow(0 4px 8px rgba(139, 92, 246, 0.3));
}

.faq-item:hover .fa-users { 
  transform: scale(1.2); 
  color: #f59e0b; 
  filter: drop-shadow(0 4px 8px rgba(245, 158, 11, 0.3));
}

/* Title animation */
#preguntes-frequents h2 {
  position: relative;
  animation: titleGlow 3s ease-in-out infinite;
}

@keyframes titleGlow {
  0%, 100% { 
    transform: scale(1);
    text-shadow: 0 0 20px rgba(34, 197, 94, 0.1);
  }
  50% { 
    transform: scale(1.02);
    text-shadow: 0 0 30px rgba(34, 197, 94, 0.2);
  }
}

/* Section entrance animation */
#preguntes-frequents {
  animation: none;
}

/* (Removed entrance/stagger animations to avoid interfering with open/close transitions) */

/* ── Navigation ── */
nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

/* Add padding to body to account for fixed navigation */
body {
  padding-top: 64px !important;
}

.nav-link { 
  position: relative; 
  transition: color 0.3s ease, transform 0.2s ease;
}
.nav-link::after {
  content: ''; position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%);
  width: 0; height: 2px; background: linear-gradient(90deg, #22c55e, #16a34a);
  border-radius: 1px; transition: width 0.3s ease;
}
.nav-link:hover { 
  color: #16a34a; 
  transform: translateY(-1px);
}
.nav-link:hover::after { width: 80%; }

/* ── Scroll Progress Bar ── */
#scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px;
  background: linear-gradient(90deg, #22c55e, #15803d);
  z-index: 9999; width: 0%; transition: width 0.1s linear;
}

/* ── Section Headers ── */
.section-title { position: relative; margin-bottom: 3rem; font-family: var(--font-heading); }
.section-title::after {
  content: ''; position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%);
  width: 56px; height: 3px; background: linear-gradient(90deg, #22c55e, #16a34a); border-radius: 2px;
}

/* ── Animations ── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(32px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes bounceY {
  0%,20%,50%,80%,100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  60% { transform: translateY(-5px); }
}
@keyframes pulseScale {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
@keyframes float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}
@keyframes blink {
  0%,100% { opacity: 1; }
  50%     { opacity: 0; }
}
@keyframes spin { to { transform: rotate(360deg); } }

.fade-in        { animation: fadeInUp 0.9s ease-out both; }
.slide-in-left  { animation: fadeInLeft 0.8s ease-out both; }
.slide-in-right { animation: fadeInRight 0.8s ease-out both; }
.bounce         { animation: bounceY 2s infinite; }
.pulse          { animation: pulseScale 2s infinite; }

/* ── Scroll Reveal ── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.65s ease, transform 0.65s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-left { opacity: 0; transform: translateX(-28px); transition: opacity 0.65s ease, transform 0.65s ease; }
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(28px); transition: opacity 0.65s ease, transform 0.65s ease; }
.reveal-right.visible { opacity: 1; transform: translateX(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ── Cards ── */
.card-hover { transition: transform 0.4s ease, box-shadow 0.4s ease; border-radius: var(--radius-md); }
.card-hover:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); }
.card-hover:active { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

/* Service card accent line */
.service-card { position: relative; overflow: hidden; }
.service-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #22c55e, #15803d);
  transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease;
}
.service-card:hover::before { transform: scaleX(1); }

/* ── Buttons ── */
button, a.btn-animation:not(.card-hover):not(.nav-link), a.click-animation:not(.card-hover):not(.nav-link), a.inline-block:not(.card-hover):not(.nav-link) {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

button::before, a.btn-animation:not(.card-hover):not(.nav-link)::before, a.click-animation:not(.card-hover):not(.nav-link)::before, a.inline-block:not(.card-hover):not(.nav-link)::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  transform: translate(-50%, -50%);
  transition: width 0.4s ease, height 0.4s ease, opacity 0.3s ease;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}

button:hover::before, a.btn-animation:not(.card-hover):not(.nav-link):hover::before, a.click-animation:not(.card-hover):not(.nav-link):hover::before, a.inline-block:not(.card-hover):not(.nav-link):hover::before {
  width: 300px;
  height: 300px;
  opacity: 1;
}

button:not(:hover)::before, a.btn-animation:not(.card-hover):not(.nav-link):not(:hover)::before, a.click-animation:not(.card-hover):not(.nav-link):not(:hover)::before, a.inline-block:not(.card-hover):not(.nav-link):not(:hover)::before {
  opacity: 0;
  width: 0;
  height: 0;
}

.btn-animation {
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
.btn-animation:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(22,163,74,.35); }
.btn-animation:active { transform: scale(0.97); box-shadow: none; }
.click-animation { transition: transform 0.3s ease; }
.click-animation:active { transform: scale(0.96); }

.btn-primary {
  background: linear-gradient(135deg, #22c55e, #15803d); color: #fff;
  border-radius: var(--radius-full); padding: 0.75rem 2rem; font-weight: 600;
  position: relative; overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(22,163,74,.4); filter: brightness(1.05); }

/* ── Green Button Gradients ── */
.bg-green-600 {
  background: linear-gradient(135deg, #16a34a, #15803d) !important;
}

.bg-green-600:hover {
  background: linear-gradient(135deg, #15803d, #166534) !important;
}

.transparencia-btn.active.bg-green-600 {
  background: linear-gradient(135deg, #16a34a, #15803d) !important;
}

.transparencia-btn.active.bg-green-600:hover {
  background: linear-gradient(135deg, #15803d, #166534) !important;
}

/* ── Gradient BG ── */
.gradient-bg { background: linear-gradient(135deg, #16a34a, #166534); }

/* ── Selectable ── */
.selectable { transition: background-color 0.2s ease, transform 0.2s ease; cursor: pointer; }
.selectable:hover { background-color: rgba(34,197,94,.09); transform: translateX(3px); }
.selectable:active { background-color: rgba(34,197,94,.18); transform: scale(0.98); }

/* ── Form ── */
.form-input { transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.form-input:focus { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(34,197,94,.12); border-color: #22c55e !important; outline: none; }

/* ── Section padding ── */
.section-padding { padding: 5rem 0; }

/* ── Collaborators ── */
.collab-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.collab-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* ── Typewriter ── */
.typewriter-cursor { display: inline-block; width: 2px; height: 1em; background: currentColor; margin-left: 2px; animation: blink 1s step-end infinite; vertical-align: text-bottom; }

/* ── Green Glow ── */
.green-glow-cursor {
  position: fixed; width: 260px; height: 260px; left: 0; top: 0; pointer-events: none;
  border-radius: 50%; transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(255,255,255,.38) 0%, rgba(255,255,255,.14) 35%, rgba(255,255,255,0) 70%);
  opacity: 0; transition: opacity 0.15s ease; z-index: 9999;
  display: none !important; /* Ocultar completamente */
}
.green-glow-cursor.is-visible { opacity: 1; }

/* Ocultar cursor verde en modales */
#servicioModal .green-glow-cursor,
#serviciosProgramaModal .green-glow-cursor {
  display: none !important;
}

/* Ocultar botón "Volver arriba" en modales de servicios */
#servicioModal #back-to-top,
#serviciosProgramaModal #back-to-top {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Mejora de calidad para carrusel - fotos de alta calidad */
#carouselImg {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: auto;
  image-rendering: -webkit-optimize-contrast;
  backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -webkit-font-smoothing: antialiased;
}

/* Efectos optimizados para imágenes de alta calidad */
.relative.h-80 img {
  filter: contrast(1.08) brightness(1.03) saturate(1.1);
  transition: filter 0.3s ease;
}

.relative.h-80:hover img {
  filter: contrast(1.12) brightness(1.05) saturate(1.15);
}

/* Regla adicional para asegurar que se oculte */
body:has(#servicioModal:not(.hidden)) #back-to-top,
body:has(#serviciosProgramaModal:not(.hidden)) #back-to-top {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ── Modal animations ── */
#servicioModal.modal-enter { opacity: 0; transform: translateY(12px); }
#servicioModal.modal-enter-active { transition: opacity 0.3s ease, transform 0.3s ease; opacity: 1; transform: translateY(0); }
#servicioModal.modal-exit-active { transition: opacity 0.6s ease; opacity: 0; }

#serviciosProgramaModal.modal-enter { opacity: 0; transform: translateY(12px); }
#serviciosProgramaModal.modal-enter-active { transition: opacity 0.3s ease, transform 0.3s ease; opacity: 1; transform: translateY(0); }
#serviciosProgramaModal.modal-exit-active { transition: opacity 0.6s ease; opacity: 0; }

#menuModal.modal-enter { opacity: 0; transform: translateY(12px); }
#menuModal.modal-enter-active { transition: opacity 0.3s ease, transform 0.3s ease; opacity: 1; transform: translateY(0); }
#menuModal.modal-exit-active { transition: opacity 0.6s ease; opacity: 0; }

/* ── Details / Accordion ── */
details.bg-green-50 {
  transition: all 0.3s ease-out; overflow: hidden; height: 60px;
  border-radius: var(--radius-md); box-shadow: 0 2px 8px rgba(34,197,94,.1); position: relative;
}
details.bg-green-50:hover { box-shadow: 0 4px 14px rgba(34,197,94,.2); transform: translateY(-1px); }
details.bg-green-50[open] { height: 200px; box-shadow: 0 4px 18px rgba(34,197,94,.25); }
details.bg-green-50 summary {
  cursor: pointer; user-select: none; list-style: none; padding: 0; width: 100%; height: 60px;
  display: flex; align-items: center; justify-content: center;
  position: absolute; top: 0; left: 0; right: 0; z-index: 10; transition: top 0.3s ease-out;
}
details.bg-green-50 summary::-webkit-details-marker { display: none; }
details.bg-green-50[open] summary { top: 10px; }
details.bg-green-50:not([open]) div { opacity: 0; transform: translateY(12px) scale(0.96); transition: all 0.35s ease-out; }
details.bg-green-50[open] div { opacity: 1; transform: translateY(0) scale(1); transition: all 0.35s ease-out; padding: 12px 16px; text-align: center; margin-top: 60px; }

/* ── Service modal content ── */
.service-intro p { line-height: 1.8; }
.service-columns > div { background: #fff; border: 1px solid rgba(17,24,39,.06); border-radius: var(--radius-md); padding: 16px; }
.service-columns ul { line-height: 1.75; }
.service-columns li { padding: 4px 0; }

/* ── Icons ── */
.icon-bounce { animation: bounceY 2s infinite; }
.icon-pulse  { animation: pulseScale 2s infinite; }
.pulse-on-hover:hover { animation: pulseScale 0.5s ease-in-out; }
.rotate-180 { transform: rotate(180deg); }

/* ── Hero badge ── */
.hero-badge {
  display: inline-block; background: rgba(255,255,255,.18); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.35); border-radius: var(--radius-full);
  padding: 0.35rem 1rem; font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 1rem;
}

/* ── Transparencia tabs ── */
.transparencia-btn { 
  transition: all 0.4s cubic-bezier(.34,1.56,.64,1);
  transform-style: preserve-3d;
}

.transparencia-btn:hover:not(.active) { 
  transform: translateY(-4px) scale(1.02); 
  box-shadow: 0 12px 24px rgba(34,197,94,.2);
}

.transparencia-btn:active:not(.active) {
  transform: translateY(-2px) scale(0.98);
  transition: all 0.15s ease;
}

.transparencia-btn.active {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(34,197,94,.3);
  animation: pulseActive 2s infinite;
}

@keyframes pulseActive {
  0%, 100% { 
    box-shadow: 0 8px 20px rgba(34,197,94,.3);
  }
  50% { 
    box-shadow: 0 8px 25px rgba(34,197,94,.4);
  }
}

.transparencia-btn.active:hover {
  transform: translateY(-4px) scale(1.02);
  animation: none;
}

/* ── Social Media Icons ── */
.social-icon {
  transition: all 0.3s cubic-bezier(.34,1.56,.64,1);
  position: relative;
  overflow: hidden;
}

.social-icon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.4s ease, height 0.4s ease;
  z-index: 0;
}

.social-icon:hover::before {
  width: 100%;
  height: 100%;
}

.social-icon i {
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease;
}

.social-icon:hover i {
  transform: scale(1.2) rotate(5deg);
}

.social-icon:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

/* Specific social media colors */
.social-icon.facebook:hover { background: linear-gradient(135deg, #1877f2, #0c5ebd) !important; }
.social-icon.instagram:hover { background: linear-gradient(135deg, #e4405f, #c13584) !important; }
.social-icon.youtube:hover { background: linear-gradient(135deg, #ff0000, #cc0000) !important; }
.social-icon.tiktok:hover { background: linear-gradient(135deg, #000000, #1a1a1a) !important; }
.social-icon.twitter:hover { background: linear-gradient(135deg, #1da1f2, #0c85d0) !important; }

/* ── Notification ── */
.notification {
  position: fixed; top: 80px; right: 24px; padding: 1rem 1.5rem;
  border-radius: var(--radius-md); font-family: var(--font-body); font-weight: 600; font-size: 0.9rem;
  z-index: 10000; box-shadow: var(--shadow-lg); transform: translateX(120%);
  transition: transform 0.35s cubic-bezier(.34,1.56,.64,1);
}
.notification.show   { transform: translateX(0); }
.notification.success{ background: #16a34a; color: #fff; }
.notification.error  { background: #dc2626; color: #fff; }

/* ── Loading spinner ── */
.loading-spinner {
  width: 20px; height: 20px; border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff; border-radius: 50%;
  display: inline-block; animation: spin 0.7s linear infinite; margin-right: 8px;
}

/* ── Cookie Banner ── */
#cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: rgba(17,24,39,.97); backdrop-filter: blur(10px); color: #fff;
  padding: 1rem 1.5rem; z-index: 9999; transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(.34,1.1,.64,1);
  border-top: 1px solid rgba(255,255,255,.08);
}
#cookie-banner.visible { transform: translateY(0); }

/* ── Back to Top ── */
#back-to-top {
  position: fixed; bottom: 2rem; right: 2rem; width: 44px; height: 44px;
  background: linear-gradient(135deg, #22c55e, #15803d); color: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: var(--shadow-md); opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; z-index: 500; border: none;
}
#back-to-top.visible { opacity: 1; pointer-events: auto; }
#back-to-top:hover   { 
  transform: translateY(-5px) scale(1.1); 
  box-shadow: var(--shadow-lg); 
  background: linear-gradient(135deg, #16a34a, #15803d);
}
#back-to-top:active {
  transform: translateY(-2px) scale(1.05);
  box-shadow: var(--shadow-md);
}
#back-to-top i {
  transition: transform 0.3s ease;
}

/* ── Modal details always visible ── */
#modalContenido details { margin-bottom: 1.5rem; width: 100%; pointer-events: none !important; }
#modalContenido details summary {
  display: none !important; pointer-events: none !important; visibility: hidden !important;
  opacity: 0 !important; height: 0 !important; overflow: hidden !important;
  position: absolute !important; left: -9999px !important; top: -9999px !important;
}
#modalContenido details > div,
#modalContenido details > p,
#modalContenido details > span,
#modalContenido details > section,
#modalContenido details > ul,
#modalContenido details > li,
#modalContenido details > h1, #modalContenido details > h2, #modalContenido details > h3,
#modalContenido details > h4, #modalContenido details > h5, #modalContenido details > h6 {
  display: block !important; visibility: visible !important; opacity: 1 !important;
  height: auto !important; overflow: visible !important; pointer-events: auto !important;
  position: static !important; padding: 22px 18px 26px; font-size: 1rem; line-height: 1.8;
  color: #1f2937; background: #fff; border: 2px solid #22c55e; border-radius: var(--radius-md);
  margin: 14px 4px 0; word-wrap: break-word; overflow-wrap: break-word;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* ── Tablet ── */
@media (min-width: 769px) and (max-width: 1024px) {
  #modalContenido { padding: 2rem; }
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .fade-in { animation-duration: 0.6s; }
  .card-hover { transition: transform 0.3s ease, box-shadow 0.3s ease; }
  .card-hover:active { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0,0,0,.1); }
  .btn-animation:hover { transform: none; box-shadow: none; }
  .btn-animation:active { transform: scale(0.97); }
  details.bg-green-50 { height: auto !important; overflow: visible !important; position: static !important; }
  details.bg-green-50 summary { position: static !important; height: auto !important; padding: 12px 16px !important; justify-content: flex-start !important; }
  details.bg-green-50:not([open]) div { opacity: 1 !important; transform: none !important; }
  details.bg-green-50[open] div { margin-top: 0 !important; }
}

/* ── Touch devices ── */
@media (hover: none) and (pointer: coarse) {
  .nav-link:hover, button:hover, .card-hover:hover { transform: none; }
  .nav-link:active { color: #22c55e; }
  button:active, .card-hover:active { transform: translateY(-1px) scale(0.98); }
  .green-glow-cursor { display: none; }
}

/* ── iOS ── */
@supports (-webkit-touch-callout: none) {
  .mobile-menu { -webkit-overflow-scrolling: touch; }
  #modalContenido { -webkit-overflow-scrolling: touch; }
  .vh-100 { height: 100vh; height: -webkit-fill-available; }
}

/* ── Scroll Spy & Navigation Indicator ── */
.scroll-spy-indicator {
  position: absolute;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, #22c55e, #15803d);
  border-radius: 2px;
  transition: all 0.4s cubic-bezier(.34,1.56,.64,1);
  z-index: 10;
}

.nav-link.active {
  color: #16a34a !important;
  font-weight: 600;
}

/* ── 3D Tilt Cards ── */
.tilt-card {
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: transform 0.1s ease-out;
}

.tilt-card-inner {
  transform: translateZ(20px);
  transition: transform 0.1s ease-out;
}

.tilt-card:hover {
  transition: transform 0.15s ease-out;
}

/* ── Confetti Burst Effect - REMOVED */
/* .confetti-particle styles removed as requested */

/* ── Page Transition Panel ── */
.page-transition-panel {
  position: fixed;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #15803d, #166534);
  z-index: 99999;
  transition: transform 0.6s cubic-bezier(.34,1.56,.64,1);
}

.page-transition-panel.exit {
  transform: translateX(100%);
}

.page-transition-panel.enter {
  transform: translateX(0);
}

/* ── Magnetic Buttons - REMOVED */
/* .magnetic-btn styles removed as requested */

/* Prevent shadow color change on contact cards */
#contacto .card-hover:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

/* ── Animated Stat Counters ── */
.stat-counter {
  font-size: 2.5rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.5rem;
  font-family: var(--font-heading);
}

.stat-label {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.9);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stat-item {
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
}

.stat-item.visible {
  opacity: 1;
  transform: translateY(0);
}

.stat-item.pulse .stat-counter {
  animation: stat-pulse 0.3s ease;
}

@keyframes stat-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); color: #22ff55; }
}

/* ── Enhanced Micro-interactions ── */
.enhanced-hover {
  transition: all 0.3s cubic-bezier(.34,1.56,.64,1);
  position: relative;
  overflow: hidden;
}

.enhanced-hover::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(34,197,94,0.15);
  transform: translate(-50%, -50%);
  transition: width 0.5s ease, height 0.5s ease;
  z-index: 0;
}

.enhanced-hover:hover::before {
  width: 400px;
  height: 400px;
}

.enhanced-hover:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(34,197,94,0.25);
}

.enhanced-hover:active {
  transform: translateY(-3px) scale(0.98);
  transition: all 0.1s ease;
}

/* Enhanced Button Interactions */
.btn-enhanced {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(.34,1.56,.64,1);
  transform-style: preserve-3d;
}

.btn-enhanced::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  transform: translate(-50%, -50%);
  transition: width 0.4s ease, height 0.4s ease, opacity 0.3s ease;
  z-index: 1;
  opacity: 0;
}

.btn-enhanced:hover::after {
  width: 300px;
  height: 300px;
  opacity: 1;
}

.btn-enhanced:hover {
  transform: translateY(-4px) rotateX(2deg);
  box-shadow: 0 12px 24px rgba(34,197,94,0.35);
}

.btn-enhanced:active {
  transform: translateY(-1px) scale(0.96);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .green-glow-cursor { display: none; }
}

/* ============================================================
   MOBILE OPTIMIZATION PATCH
   ============================================================ */

/* ── 1. iOS viewport height fix (--vh custom property) ── */
section#inicio {
  height: calc(var(--vh, 1vh) * 100) !important;
  min-height: calc(var(--vh, 1vh) * 100) !important;
}

/* Fallback modern: dvh para iOS 15.4+ y Android Chrome */
@supports (height: 100dvh) {
  section#inicio {
    height: 100dvh !important;
    min-height: 100dvh !important;
  }
}

/* ── 2. Modal flex layout fix (scroll correcto en mobile) ── */
/* El header sticky + contenido scrollable no deben sumar más de 100vh */
#serviciosProgramaModal:not(.hidden),
#consejosFamiliesModal:not(.hidden) {
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
}

#serviciosProgramaModal > div:nth-child(2),
#consejosFamiliesModal > div:nth-child(2) {
  flex: 1 1 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Scroll correcto en modal de servicios (servicioModal) */
#servicioModal {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ── 3. Safe area insets (iPhones con notch / Dynamic Island) ── */
#cookie-banner {
  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
}

body {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* ── 4. Botó X de cierre - safe area en mobile ── */
@media (max-width: 768px) {
  #modal-close-btn {
    top: calc(12px + env(safe-area-inset-top, 0px)) !important;
    right: 14px !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 18px !important;
  }
}

/* ── 5. FAQ - fix animació amb <details> a iOS ── */
/* iOS Safari té el seu propi behavior per a <details>. Desactivem
   l'animació max-height: 0 en mobile per evitar conflictes */
@media (max-width: 768px) {
  .faq-item > div {
    max-height: none !important;
    overflow: visible !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    transition: none !important;
  }
  .faq-item[open] > div {
    padding: 1rem 1.5rem 1.5rem !important;
  }
  .faq-item:not([open]) > div {
    display: none !important;
  }
}

/* ── 6. Touch targets mínims 44px (WCAG) ── */
@media (hover: none) and (pointer: coarse) {
  .mobile-menu a {
    min-height: 44px;
    display: flex !important;
    align-items: center;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  
  /* Botons principals */
  button,
  a[class*="px-"][class*="py-"] {
    -webkit-tap-highlight-color: transparent;
  }
  
  /* Xarxes socials - ícones prou grans */
  .social-icon {
    width: 48px !important;
    height: 48px !important;
  }
}

/* ── 7. Hero text - escales per a pantalles molt petites ── */
@media (max-width: 380px) {
  section#inicio h1 {
    font-size: 2.6rem !important;
  }
  section#inicio .hero-badge {
    font-size: 0.7rem !important;
    padding: 0.3rem 0.75rem !important;
  }
  section#inicio p {
    font-size: 1rem !important;
  }
}

/* ── 8. Prevenir overflow horitzontal global ── */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* ── 9. Millora de la navegació mòbil ── */
/* Menú mòbil - animació suau d'obertura */
.mobile-menu {
  transition: max-height 0.25s ease-out, opacity 0.2s ease;
  overflow: hidden;
}

.mobile-menu:not(.hidden) {
  display: block !important;
}

/* Nav bar - safe area top */
nav {
  padding-top: env(safe-area-inset-top, 0px) !important;
}

/* ── 10. Calendari - lletra prou llegible en mobile ── */
@media (max-width: 480px) {
  #calendario .grid.grid-cols-7 > div {
    font-size: 0.65rem;
  }
}

/* ── 11. Targetes de contacte - botons no se tallen ── */
@media (max-width: 480px) {
  #contacte .flex-col.sm\:flex-row {
    gap: 0.75rem;
  }
  #contacte a[class*="px-8"] {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    font-size: 0.875rem;
    text-align: center;
    width: 100%;
  }
}

/* ── 12. Modal de serveis - contingut no queda sota el nav ── */
#servicioModal > section:first-of-type {
  /* El hero del modal no ha de quedar tapat pel nav fix */
  margin-top: 0;
}

/* ── 13. Transparència tabs - scroll horitzontal si fa falta ── */
@media (max-width: 480px) {
  #transparencia .flex.flex-wrap.justify-center.gap-4 {
    flex-direction: column;
    align-items: stretch;
  }
  #transparencia .flex.flex-wrap.justify-center.gap-4 button {
    width: 100%;
  }
}

/* ── 14. Grid serveis - imatges no desborden en mobile ── */
@media (max-width: 640px) {
  #serveis img.w-full.h-48 {
    height: 10rem;
  }
}

/* ── 15. Eliminar hover effects que no funcionen en touch ── */
@media (hover: none) and (pointer: coarse) {
  .card-hover:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  .collab-card:hover {
    transform: none !important;
    box-shadow: var(--shadow-sm) !important;
  }
  .transparencia-btn:hover:not(.active) {
    transform: none !important;
    box-shadow: none !important;
  }
  .faq-item summary::before {
    display: none;
  }
}