/* === Custom font utility classes ============================== */
.font-lato     { font-family: 'Lato', sans-serif; }
.font-oswald   { font-family: 'Oswald', sans-serif; }
.font-playfair { font-family: 'Playfair Display', serif; }

/* === Global === */
html { scroll-behavior: smooth; }
::-webkit-scrollbar        { width: 8px; }
::-webkit-scrollbar-track  { background: #f1f1f1; }
::-webkit-scrollbar-thumb  { background: #3D3741; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #2BAB9F; }

/* === Header & nav === */
#main-header {
  transition: background-color .4s ease-out, box-shadow .4s ease-out, padding .4s ease-out;
  padding: 1.5rem 0;
}
#main-header.header-scrolled {
  background-color: #FFF;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  padding: 1rem 0;
}
#main-header.header-transparent .nav-link { 
  color: #FFF; 
  text-shadow: 0 1px 3px rgba(0,0,0,.6); 
}
#main-header.header-transparent .logo-img { 
  filter: brightness(0) invert(1); 
}
#main-header.header-transparent .mobile-menu-icon { 
  stroke: #FFF; 
}

#main-header.header-scrolled .nav-link { 
  color: #3D3741; 
  text-shadow: none; 
}
#main-header.header-scrolled .logo-img { 
  filter: none; 
}
#main-header.header-scrolled .mobile-menu-icon { 
  stroke: #3D3741; 
}

.logo-img {
  transition: filter 0.4s ease, opacity 0.4s ease;
}
.logo-img.logo-img-fade {
  opacity: 0;
}

/* nav-link underline animation */
.nav-link {
  position: relative; 
  transition: color .3s ease; 
}
.nav-link::after {
  content: '';
  position: absolute; 
  width: 0; 
  height: 2px; 
  bottom: -4px; 
  left: 50%;
  transform: translateX(-50%);
  background: #ED1164; 
  transition: width .3s ease-out;
}
.nav-link:hover::after, 
.nav-link.active::after { 
  width: 70%; 
}

#menu { 
  background: #FFF; 
  display: none;
}
#menu a { 
  color: #3D3741; 
}
#menu-toggle:checked + #menu { 
  display: block; 
}
#menu-toggle:checked + #menu .nav-link { 
  color: #3D3741; 
} 

/* === Solid header when it overlaps light backgrounds === */
.header--solid {
  background: #3D3741;
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .10);
  transition: background .3s ease, box-shadow .3s ease;
}

/* === Hero === */
#inicio {
  background: #3D3741;
  display: flex; 
  align-items: flex-end; 
  justify-content: center;
}
#inicio .hero-content { 
  padding-bottom: 10vh; 
  width: 100%; 
}
#inicio .hero-content h1 span { 
  display: inline-block; 
}
#inicio .hero-content .cta-button {
  transition: transform .3s ease, box-shadow .3s ease;
}
#inicio .hero-content .cta-button:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 10px 20px rgba(237,17,100,.3);
}

/* === Factsheet cards === */
#factsheet .fact-item {
  transition: transform .3s ease-out, box-shadow .3s ease-out;
  border: 1px solid #e5e7eb; 
  border-radius: .75rem;
}
#factsheet .fact-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0,0,0,.05);
}
#factsheet .fact-item span { 
  transition: transform .3s ease; 
}
#factsheet .fact-item:hover span { 
  transform: scale(1.1); 
}

/* === Nosotros parallax section === */
#nosotros {
  background-size: cover; 
  background-position: center; 
  background-attachment: fixed; 
  position: relative;
}
#nosotros .overlay {
  background: linear-gradient(to bottom, rgba(45,55,72,.7), rgba(45,55,72,.9));
  position: absolute; 
  inset: 0; 
  z-index: 1;
}
#nosotros .content-container { 
  position: relative; 
  z-index: 2; 
}
#nosotros .quote {
  font-family: 'Merriweather', serif; 
  font-style: italic;
  color: #E5E7EB; 
  border-left: 4px solid #ED1164;
  padding-left: 1.5rem; 
  margin: 1.5rem 0;
}

/* === Flip cards - IMPROVED FOR SAFARI & MOBILE ============== */
.flip-card {
  position: relative;
  width: 100%;
  height: 350px;
  perspective: 1000px;
  border-radius: .75rem;
  /* Remove cursor pointer - will be handled by JS */
  touch-action: manipulation; /* Better touch handling */
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  /* Improved transition for Safari */
  transition: transform .5s cubic-bezier(.25,.46,.45,.94);
  border-radius: .75rem;
  box-shadow: 0 10px 25px rgba(0,0,0,.1), 0 5px 10px rgba(0,0,0,.04);
  /* Hardware acceleration for Safari */
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}

/* Flipped state - controlled by JS */
.flip-card.is-flipped .flip-card-inner {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}

/* ── Faces ──────────────────────────────────────────────────── */
.flip-card-front,
.flip-card-back {
  position: absolute;
  inset: 0;
  border-radius: .75rem;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Improve rendering on Safari */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* Fill each face with a real image */
.flip-card-front img,
.flip-card-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Turn the back face so it's upright after the flip */
.flip-card-back {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}
.flip-card-back img {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}

/* Visual feedback for interactive state */
.flip-card:hover .flip-card-inner {
  cursor: pointer;
}

/* Mobile-specific improvements */
@media (max-width: 768px) {
  .flip-card {
    /* Ensure proper touch targets */
    min-height: 350px;
  }
  
  .flip-card-inner {
    /* Slightly faster transition on mobile */
    transition: transform .4s cubic-bezier(.25,.46,.45,.94);
  }
}

/* === Contact CTA ============================================== */
#contacto-cta .cta-button { 
  box-shadow: 0 4px 15px rgba(237,17,100,.35); 
}
#contacto-cta .cta-button:hover { 
  box-shadow: 0 6px 20px rgba(237,17,100,.45); 
}

/* === Footer =================================================== */
footer .footer-link { 
  transition: color .3s ease, letter-spacing .3s ease; 
}
footer .footer-link:hover { 
  color: #F27BA9; 
  letter-spacing: .5px; 
}

/* Footer social icons */
footer .social-icon { 
  transition: transform .3s ease, color .3s ease; 
}
footer .social-icon:hover { 
  transform: scale(1.15); 
  color: #F27BA9; 
}
footer .social-icon img {
  transition: filter 0.3s;
}
footer .social-icon:hover img,
footer .social-icon:focus img {
  /* Pink, matching #F27BA9 */
  filter: invert(62%) sepia(71%) saturate(362%) hue-rotate(292deg) brightness(97%) contrast(92%);
}

/* === Scroll-in animations ======================================== */
.animate-on-scroll {
  opacity: 0; 
  transform: translateY(30px);
  transition: opacity .6s ease-out, transform .6s ease-out;
}
.animate-on-scroll.is-visible { 
  opacity: 1; 
  transform: translateY(0); 
}

/* === Glassmorphism utility ======================================= */
.glassmorph {
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.20);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.glassmorph-light {
  background: rgba(255,255,255,.35);
  border: 1px solid rgba(0,0,0,.20);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.glassmorph-lite { 
  background: rgba(0,0,0,.35); 
  backdrop-filter: blur(10px); 
  -webkit-backdrop-filter: blur(10px); 
  box-shadow: 0 8px 24px rgba(0,0,0,.25); 
}

/* === Pill tab bar ============================================== */
#tabs-wrapper {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .5rem;
  margin-bottom: 2rem;
  border-radius: 9999px;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 6px 14px -4px rgba(0,0,0,.25);
}
.tab-btn {
  position: relative;
  font-family: "Oswald", sans-serif;
  font-size: .875rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .55rem 1.6rem;
  border-radius: 9999px;
  color: #ffffffd0;
  transition: all .25s ease;
}
.tab-btn:hover {
  background: rgba(255,255,255,.15);
  color: #fff;
}
.tab-btn.is-active {
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  background: rgba(255,255,255,.34);
  color: #AD1D4C;
  box-shadow: 0 0 0 2px rgba(237,17,100,.35) inset;
}
@media (max-width: 768px) {
  #tabs-wrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    border-radius: 1rem;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
  .tab-btn {
    width: 100%;
  }
}

/* === Logo marquee ========================================= */
.logo-marquee {
  animation: marquee 30s linear infinite;
  width: 200%;
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
#marquee-track:hover {
  animation-play-state: paused;
}

/* === Enhanced fact-item component ========================= */
.fact-item {
  position: relative;
  padding: 2rem;
  text-align: center;
  border-radius: 1rem;
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
}
.fact-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.05);
}

/* Negative stats variant */
.fact-item--negative {
  background: linear-gradient(135deg, rgba(220,38,38,0.1) 0%, rgba(185,28,28,0.15) 100%);
  border: 1px solid rgba(220,38,38,0.2);
  backdrop-filter: blur(4px);
}
.fact-item--negative:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 12px 24px rgba(220,38,38,0.15);
}
.fact-item__number {
  font-family: 'Oswald', sans-serif;
  font-weight: 900;
  font-size: 3.5rem;
  line-height: 1;
  margin-bottom: 0.5rem;
  color: #374151;
}
.fact-item--negative .fact-item__number {
  color: #dc2626;
}
.fact-item__unit {
  font-size: 2rem;
  font-weight: 400;
}
.fact-item__description {
  font-size: 0.875rem;
  line-height: 1.5;
  color: #6b7280;
  margin-bottom: 0.75rem;
}
.fact-item--negative .fact-item__description {
  color: #4b5563;
}
.fact-item__source {
  font-size: 0.75rem;
  font-weight: 500;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.fact-item--negative .fact-item__source {
  color: #dc2626;
  opacity: 0.8;
}
@media (min-width: 768px) {
  .fact-item__number {
    font-size: 4rem;
  }
}

/* Positive stats variant */
.fact-item--positive {
  background: linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(240,249,255,0.95) 100%);
  border: 1px solid rgba(34,197,94,0.2);
  backdrop-filter: blur(4px);
}
.fact-item--positive:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 12px 24px rgba(36,128,116,0.18);
}
.fact-item--positive .fact-item__number {
  color: #248074;
}
.fact-item--positive .fact-item__description {
  color: #3D3741;
}
.fact-item--positive .fact-item__source {
  color: #2BAB9F;
  opacity: 0.8;
}

/* Icon styling */
.fact-item__icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  display: block;
  filter: grayscale(20%);
  transition: filter 0.3s ease, transform 0.3s ease;
}
.fact-item:hover .fact-item__icon {
  filter: grayscale(0%);
  transform: scale(1.1);
}

/* Qualitative variant for non-numeric data */
.fact-item--qualitative .fact-item__highlight {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.2;
  margin-bottom: 0.5rem;
  color: #3D3741;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}
.fact-item--positive.fact-item--qualitative .fact-item__highlight {
  color: #248074;
}
.fact-item--negative.fact-item--qualitative .fact-item__highlight {
  color: #dc2626;
}
.fact-item--qualitative .fact-item__number {
  display: none;
}
.fact-item--qualitative .fact-item__description {
  font-size: 1rem;
  font-weight: 500;
}

/* === Hide scroll bar utility ================================ */
.hide-scroll-bar::-webkit-scrollbar { display: none; }
.hide-scroll-bar { 
  -ms-overflow-style: none; 
  scrollbar-width: none; 
}

/* === Mesh-gradient backdrop ================================== */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -10;
  background:
    radial-gradient(60% 70% at 18% 32%, rgba(43,171,159,0.55) 0 80%, transparent 100%),
    radial-gradient(70% 80% at 78% 78%, rgba(237,17,100,0.50) 0 85%, transparent 100%),
    radial-gradient(50% 60% at 60% 20%, rgba(255, 200, 87, 0.35) 0 70%, transparent 100%),
    linear-gradient(180deg, rgba(61,55,65,0.18) 0%, rgba(0,0,0,0.28) 100%);
  background-repeat: no-repeat;
  background-size: 130% 130%, 120% 120%, 140% 140%, 100% 100%;
  animation: meshFlow 20s cubic-bezier(.77,0,.18,1) infinite alternate;
  filter: blur(70px);
  will-change: background-position, background-size;
}
@keyframes meshFlow {
  0% {
    background-position: 0% 0%, 100% 100%, 50% 0%, 0% 0%;
    background-size: 130% 130%, 120% 120%, 140% 140%, 100% 100%;
  }
  50% {
    background-position: 40% 60%, 60% 40%, 70% 30%, 0% 100%;
    background-size: 120% 120%, 130% 130%, 120% 120%, 100% 100%;
  }
  100% {
    background-position: 100% 100%, 0% 0%, 100% 50%, 100% 100%;
    background-size: 140% 140%, 120% 120%, 130% 130%, 100% 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}

/* Panel backgrounds */
.panel-skin:nth-of-type(odd) { background: rgba(255,255,255,.12); }
.panel-skin:nth-of-type(even) { background: rgba(0,0,0,.03); }

/* === Hide utility that wins over any Tailwind display utility = */
.is-hidden { display: none !important; }

/* === Leaflet Map Styles ======================================= */
.custom-popup .leaflet-popup-content-wrapper {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.custom-popup .leaflet-popup-tip {
  background: white;
}
.custom-div-icon {
  background: transparent;
  border: none;
}
#communities-map {
  min-height: 300px;
  height: 24rem;
  width: 100%;
}
@media (max-width: 768px) {
  #communities-map {
    height: 300px;
  }
}
#communities-map .leaflet-container {
  height: 100% !important;
  width: 100% !important;
}