:root{
  --bg: #fcfcfd;
  --text: #102027;
  --muted: #546e7a;
  --primary: #00bfa6; /* turquesa */
  --accent: #ff4d6d; /* rosa */
  --violet: #7b5cff;
  --section-a: #fff7fb; /* soft pink */
  --section-b: #f6fbff; /* soft blue */
  --card: #ffffff;
  --glass: rgba(255,255,255,0.6);
  --maxw: 1100px;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:linear-gradient(180deg,var(--bg),#f7fbfb 60%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}
.container{max-width:var(--maxw);margin:0 auto;padding:2rem}

/* Hero */
.hero{padding:3.5rem 0;background:linear-gradient(135deg, rgba(123,92,255,0.06), rgba(255,77,109,0.03));background-repeat:no-repeat;background-position:center right;background-size:cover;position:relative;min-height:420px;color:white}
.hero::before{content:'';position:absolute;inset:0;pointer-events:none}
.hero-inner{display:flex;gap:2rem;align-items:center}
.hero-copy{flex:1}
.hero-panel{background:rgba(0,0,0,0.42);padding:1.25rem 1.4rem;border-radius:12px;display:flex;flex-direction:column;align-items:center;text-align:center;width:fit-content;max-width:90%}
.hero-visual{flex:1;display:flex;justify-content:center}
.title{font-size:2.25rem;margin:0 0 0.5rem;font-weight:700;letter-spacing:1px}
.tagline{color:rgba(255,255,255,0.95);font-weight:700;margin:0 0 0.5rem}
.subtitle{color:rgba(255,255,255,0.9);margin:0 0 1rem}
.hero-ctas .btn{margin-top:0.5rem}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.7rem 1.1rem;border-radius:10px;border:none;cursor:pointer;font-weight:600;text-decoration:none}
.btn.primary{background:linear-gradient(90deg,var(--primary),var(--violet));color:white;box-shadow:0 6px 18px rgba(123,92,255,0.12);transition:transform .18s ease,box-shadow .18s ease}
.btn.primary:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(123,92,255,0.18)}
.btn.outline{background:transparent;border:2px solid rgba(16,32,39,0.06);color:var(--text)}
/* stronger visibility when outline appears inside a card */
.card .btn.outline{
  background:rgba(255,255,255,0.92); /* light semi-transparent background for contrast */
  color:#28a745; /* green text */
  border:2px solid #28a745; /* green border */
  font-weight:700;
  display:block; /* center via auto margins */
  width:max-content;
  margin:0.6rem auto;
  padding:.6rem 1rem;
  transition:transform .14s ease,box-shadow .14s ease,background .12s ease;
}
.card .btn.outline:hover{background:rgba(255,255,255,1);box-shadow:0 10px 24px rgba(16,32,39,0.08);transform:translateY(-2px)}

.section{padding:3rem 0}
.section:nth-of-type(odd){background:linear-gradient(180deg,var(--section-a),rgba(255,255,255,0.98));}
.section:nth-of-type(even){background:linear-gradient(180deg,var(--section-b),rgba(255,255,255,0.98));}
.section{transition:background .25s ease}
h2{margin:0 0 1rem;font-size:1.5rem}

.about-grid{display:grid;grid-template-columns:1fr 120px;gap:1rem;align-items:center}
.about-visual{display:flex;flex-direction:column;gap:.5rem;align-items:center;color:var(--violet)}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;justify-items:center}
.card{background:var(--card);padding:1rem;border-radius:12px;box-shadow:0 6px 18px rgba(16,32,39,0.06);display:flex;flex-direction:column;gap:.6rem;max-width:320px;width:100%}
.cards{position:relative}
.cards .card{background-size:cover;background-position:center;color:white;position:relative;overflow:hidden}
.cards .card::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.12),rgba(0,0,0,0.14));transition:opacity .2s;pointer-events:none}
.cards .card .btn{position:relative;z-index:3}
.cards .card h3,.cards .card .date{position:relative;z-index:2}
.cards .card .date{background:rgba(255,255,255,0.86);color:rgba(16,32,39,0.82);padding:.32rem .56rem;border-radius:8px;display:inline-block;font-weight:600}
.cards .card h3{color:rgba(255,255,255,0.88);margin:0 0 .35rem;text-shadow:none}

/* Use downloaded images as local backgrounds */
.cards .card:nth-child(1){background-image:linear-gradient(180deg,rgba(0,0,0,0.18),rgba(0,0,0,0.18)), url('assets/images/colonia.jpg');background-size:cover;background-position:center}
.cards .card:nth-child(2){background-image:linear-gradient(180deg,rgba(0,0,0,0.18),rgba(0,0,0,0.18)), url('assets/images/miramar.png');background-size:cover;background-position:center}
.cards .card:nth-child(3){background-image:linear-gradient(180deg,rgba(0,0,0,0.18),rgba(0,0,0,0.18)), url('assets/images/pride_nyc.jpg');background-size:cover;background-position:center}
.cards .card:nth-child(4){background-image:linear-gradient(180deg,rgba(0,0,0,0.18),rgba(0,0,0,0.18)), url('assets/images/love_iguassu.jpg');background-size:cover;background-position:center}

/* Hero uses the local hero image with a soft gradient overlay */
.hero{background-image:linear-gradient(180deg,rgba(0,0,0,0.20),rgba(0,0,0,0.02)), url('assets/images/hero_amsterdam.jpg');background-size:cover;background-position:center}

/* Ensure text contrast on hero */
.hero .title, .hero .tagline, .hero .subtitle{position:relative;z-index:2}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.30),rgba(0,0,0,0.08));pointer-events:none}
.hero .tagline{color:rgba(255,255,255,0.95);font-weight:700;margin:0 0 0.5rem}
.hero .subtitle{color:rgba(255,255,255,0.9);margin:0 0 1rem}
.hero .title{color:white}
.card .date{color:var(--muted);font-size:.90rem;text-align:center}

.testimonials{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.testimonial{background:linear-gradient(180deg,#fff, #fbfdff);padding:1rem;border-radius:10px;box-shadow:0 6px 18px rgba(16,32,39,0.04);font-style:italic}

.join-form{display:flex;gap:.6rem;max-width:560px;margin-top:1rem}
.join-form input[type="email"]{flex:1;padding:.7rem 1rem;border-radius:10px;border:1px solid rgba(16,32,39,0.08);font-size:1rem}
.form-msg{margin-top:.6rem;color:var(--muted)}

.site-footer{border-top:1px solid rgba(16,32,39,0.04);padding:1rem 0;margin-top:2rem;background:transparent}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.socials a{color:var(--muted);margin-left:.6rem;transition:color .15s}
.socials a:hover{color:var(--accent)}

/* Responsive */
@media (max-width:900px){
  .hero-inner{flex-direction:column;text-align:center}
  .about-grid{grid-template-columns:1fr;}
  .cards{grid-template-columns:1fr;}
  .testimonials{grid-template-columns:1fr;}
  .footer-inner{flex-direction:column;align-items:flex-start}
}

@media (prefers-reduced-motion: no-preference){
  .hero-visual svg{transform:translateY(0);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
  .hero:hover .hero-visual svg{transform:translateY(-6px)}
}

/* --- Logo + wave dynamics (new) --- */
.hero{overflow:hidden;position:relative;min-height:520px}
.site-logo{display:block;max-width:420px;width:80%;height:auto;margin:0 0 0.6rem;border-radius:10px;box-shadow:0 20px 40px rgba(16,32,39,0.15);animation:logoFloat 6s ease-in-out infinite}

.wave-wrap{position:absolute;left:0;right:0;bottom:0;height:140px;pointer-events:none;overflow:hidden}
.hero-wave{width:200%;height:100%;transform:translateX(-10%);opacity:0.95;animation:waveMove 10s linear infinite}

@keyframes logoFloat{
  0%{transform:translateY(0) rotate(-0.6deg)}
  25%{transform:translateY(-10px) rotate(0.6deg)}
  50%{transform:translateY(0) rotate(-0.6deg)}
  75%{transform:translateY(8px) rotate(0.3deg)}
  100%{transform:translateY(0) rotate(-0.6deg)}
}

@keyframes waveMove{
  0%{transform:translateX(-5%)}
  50%{transform:translateX(-20%)}
  100%{transform:translateX(-5%)}
}

/* Slightly shift section backgrounds with subtle parallax tied to the wave idea */
main .section{transition:transform .6s ease}
.hero + main .section{transform:translateY(-8px)}

@media (max-width:900px){
  .site-logo{width:68%;max-width:320px}
  .wave-wrap{height:100px}
}

/* Tighten hero layout for small screens to prevent overflow */
@media (max-width:600px){
  .hero{padding:2rem 0;min-height:360px}
  .hero-inner{gap:1rem}
  .hero-panel{padding:1rem;border-radius:10px}
  .site-logo{width:72%;max-width:320px}

  /* Reduce visual stack so the globe/iconography doesn't overflow */
  .people-stack{width:160px;height:160px}
  .grid-globe{font-size:160px}

  /* Reduce orbit radii and icon sizes */
  .people-stack .person-a{ --radius:70px }
  .people-stack .person-b{ --radius:90px }
  .people-stack .person-c{ --radius:60px }
  .people-stack .person-a i{ font-size:34px }
  .people-stack .person-b i{ font-size:46px }
  .people-stack .person-c i{ font-size:32px }

  /* Make the wave fit better on narrow viewports */
  .hero-wave{width:140%;transform:translateX(-8%)}
}

@media (prefers-reduced-motion:reduce){
  .site-logo{animation:none}
  .hero-wave{animation:none}
}

/* Contact link in hero */
.contact-line{margin:0.6rem 0}
.contact-link{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .7rem;border-radius:10px;background:rgba(255,255,255,0.04);color:inherit;text-decoration:none;border:1px solid rgba(255,255,255,0.06);font-weight:700}
.contact-link i{font-size:1.05rem}
.contact-link:hover{background:rgba(255,255,255,0.10)}

@media (max-width:900px){
  .contact-link{padding:.36rem .6rem}
}

/* Ondulating gradient background for Testimonials */
#testimonials{
  position:relative;
  background-image: linear-gradient(180deg, rgba(123,92,255,0.03), rgba(255,77,109,0.02)), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'><defs><linearGradient id='a' x1='0' x2='1'><stop offset='0' stop-color='%23ffb6c1'/><stop offset='1' stop-color='%236ad1e3'/></linearGradient></defs><path fill='url(%23a)' d='M0,64L48,80C96,96,192,128,288,138.7C384,149,480,139,576,117.3C672,96,768,64,864,69.3C960,75,1056,117,1152,133.3C1248,149,1344,139,1392,133.3L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'></path></svg>");
  background-repeat:no-repeat;
  background-position: top center;
  background-size: cover;
}

#testimonials .testimonial{background:rgba(255,255,255,0.92)}

/* Font Awesome rainbow / magenta support for .fa-people-group */
.fa-people-group.rainbow{color:#ff00a8; /* fallback magenta */display:inline-block}

@supports (-webkit-background-clip: text) or (background-clip: text){
  .fa-people-group.rainbow{
    background: linear-gradient(90deg,#e40303 0%,#ff8c00 16%,#ffed00 33%,#008026 50%,#004dff 66%,#750787 83%,#ff00a8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

/* Helper: stacked look (optional) */
.people-stack{
  position:relative;
  display:block;
  width:240px;
  height:240px;
  margin:0 auto;
  perspective:1000px;
  transform-style:preserve-3d;
}
.grid-globe{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) rotateX(12deg) translateZ(-6px);
  z-index:1;
  font-size:420px; /* larger globe */
  color:rgba(255,255,255,0.98);
  opacity:0.48; /* more visible */
  text-shadow:0 2px 6px rgba(0,0,0,0.18);
  filter:blur(.06px);
  pointer-events:none;
  transition:opacity .3s ease, transform .3s ease, filter .3s ease;
}
.orbiter{
  position:absolute;
  left:50%;
  top:50%;
  transform-origin:center center;
  z-index:3;
  will-change:transform,opacity;
  display:block;
}
.orbiter i{
  display:inline-block;
  transform-origin:center center;
  will-change:transform,opacity;
}

/* Smooth continuous orbit: rotate container around center while counter-rotating icons; slower durations */
@keyframes orbit{
  from { transform: translate(-50%,-50%) rotate(0deg) translateX(var(--radius)) rotate(0deg); }
  to   { transform: translate(-50%,-50%) rotate(360deg) translateX(var(--radius)) rotate(-360deg); }
}

/* Continuous orbit only: smooth, linear movement without pulsing */
/* Larger radii so orbiters reach closer to globe edges */
.people-stack .person-a{ --radius:110px; opacity:0.96; animation: orbit 14s linear infinite; }
.people-stack .person-b{ --radius:140px; opacity:1;    animation: orbit 18s linear infinite; }
.people-stack .person-c{ --radius:92px;  opacity:0.94; animation: orbit 10s linear infinite; }

/* Scale animation applied to the inner icon so it doesn't conflict with orbit transform */
@keyframes scalePulse{
  0%{ transform: scale(0.90); }
  50%{ transform: scale(1.12); }
  100%{ transform: scale(0.90); }
}
/* Same min/max scale for all icons, different durations and phase offsets */
.people-stack .person-a i{ font-size:46px; animation: scalePulse 0.9s ease-in-out infinite; animation-delay: 0s; display:inline-block; }
.people-stack .person-b i{ font-size:78px; animation: scalePulse 1.1s ease-in-out infinite; animation-delay: 0.37s; display:inline-block; }
.people-stack .person-c i{ font-size:44px; animation: scalePulse 0.95s ease-in-out infinite; animation-delay: 0.68s; display:inline-block; }

/* Very subtle container tilt for depth */
.people-stack{animation:tilt 28s ease-in-out infinite}
@keyframes tilt{0%{transform:rotateX(6deg)}50%{transform:rotateX(-4deg)}100%{transform:rotateX(6deg)}}

@media (prefers-reduced-motion: reduce){
  .people-stack i{animation:none}
  .people-stack{animation:none}
}