/* =========================================================
   OCEANMIX – CSS FINAL
   Estilo editorial / documental / científico
   ========================================================= */

:root{
  --bg: #2b4a7a;
  --bg2:#325285;
  --card: rgba(255,255,255,0.06);
  --card2: rgba(255,255,255,0.08);
  --stroke: rgba(255,255,255,0.12);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.72);

  --ocean1:#2d4c7c;
  --ocean2:#24567a;
  --aqua:#6b8a35;
  --sea:#8aad3f;
  --algae:#5c7a2e;

  --sand:#f4f1ec;
  --shadow: 0 18px 50px rgba(0,0,0,0.35);
  --shadow2: 0 10px 25px rgba(0,0,0,0.25);

  --radius: 18px;
  --radius2: 26px;
  --max: 1400px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 800px at 20% -10%, rgba(138,173,63,0.15), transparent 55%),
    radial-gradient(900px 700px at 95% 10%, rgba(107,138,53,0.15), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  color: var(--text);
  line-height:1.8;
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

/* =========================================================
   UTILITIES
   ========================================================= */
.center{ text-align:center; }
.muted{ color:var(--muted); }
.tiny{ font-size:0.85rem; }
.accent{ color:var(--sea); }

.lead{
  font-size:clamp(1.1rem, 2.2vw, 1.3rem);
  color:var(--muted);
  max-width:900px;
  line-height:1.7;
}
.lead-sm{
  font-size:1.05rem;
  color:var(--muted);
  max-width:100%;
  margin:0 auto;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 16px;
  border-radius:999px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.12);
  font-size:0.85rem;
  font-weight:600;
  margin-bottom:1.2rem;
  color:var(--muted);
}
.pill .dot{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--sea);
}

.btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:999px;
  background:transparent;
  border:1px solid rgba(255,255,255,0.25);
  color:var(--text);
  font-weight:700;
  cursor:pointer;
  transition:all .2s ease;
}
.btn-ghost:hover{
  background:rgba(255,255,255,0.08);
  border-color:rgba(255,255,255,0.4);
}

.btn-sm{
  padding:8px 16px;
  font-size:0.9rem;
}

.section-soft{
  background:rgba(255,255,255,0.02);
}
.section-cta{
  background:linear-gradient(180deg, transparent, rgba(138,173,63,0.06));
}

.container{
  width:min(var(--max), calc(100% - 40px));
  margin:0 auto;
}

/* =========================================================
   BACKGROUND ORBS
   ========================================================= */
.bg-orb{
  position:fixed;
  border-radius:999px;
  filter: blur(40px);
  opacity:0.28;
  pointer-events:none;
  z-index:-1;
}
.orb-1{ width:420px; height:420px; background: rgba(138,173,63,0.30); top:-120px; left:-120px; }
.orb-2{ width:520px; height:520px; background: rgba(107,138,53,0.25); top:120px; right:-180px; }
.orb-3{ width:360px; height:360px; background: rgba(92,122,46,0.22); bottom:-140px; left:25%; }

/* =========================================================
   NAVBAR
   ========================================================= */
.nav-wrap{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(14px);
  background: rgba(43,74,122,0.85);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
  width:min(var(--max), calc(100% - 40px));
  margin:0 auto;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  letter-spacing:0.3px;
}
.brand-logo{
  height:36px;
  width:36px;
  object-fit:cover;
  border-radius:50%;
}

.cta-logo{
  margin-top:2rem;
  width:200px;
  height:200px;
  border-radius:50%;
  overflow:hidden;
  border:3px solid rgba(138,173,63,0.3);
  box-shadow:0 0 30px rgba(138,173,63,0.15);
}
.cta-logo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 35%;
  transform:scale(1.3);
}

.nav-links{
  display:flex;
  flex-wrap:nowrap;
  gap:12px;
  color: var(--muted);
  align-items:center;
}
.nav-links a{
  padding:8px 12px;
  border-radius:999px;
  font-weight:600;
  font-size:1rem;
  transition:all .25s ease;
}
.nav-links a:hover{
  background: rgba(255,255,255,0.07);
  color:var(--text);
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:999px;
  background: linear-gradient(135deg, var(--sea), var(--aqua));
  color:#04121d;
  font-weight:800;
  border:none;
  cursor:pointer;
  box-shadow: 0 10px 28px rgba(107,138,53,0.30);
  transition:transform .2s ease, filter .2s ease;
}
.btn:hover{ transform:translateY(-1px); filter:brightness(1.05); }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:95vh;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--hero-img);
  background-size:cover;
  background-position:center;
  transform:scale(1.05);
  filter: saturate(1.05) contrast(1.05);
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(26,52,85,0.60), rgba(26,52,85,0.90));
  z-index:1;
}

.hero .container,
.hero .hero-grid,
.hero .hero-copy,
.hero .hero-card{
  position:relative;
  z-index:2;
}

.hero-content{
  position:relative;
  z-index:2;
  width:min(var(--max), calc(100% - 40px));
  margin:0 auto;
}

.hero h1{
  font-size:clamp(2.8rem, 6vw, 4.2rem);
  line-height:1.1;
  margin-bottom:1rem;
  color:#fff !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.8), 0 1px 3px rgba(0,0,0,0.9);
}

/* =========================================================
   HERO LAYOUT: actions + badges (espaciado y responsive)
   ========================================================= */
.hero-actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
  margin-bottom: 44px; /* <-- esto separa de hero-badges */
}

.hero-badges{
  margin-top: 0;        /* ya lo separa hero-actions */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.badge{
  padding: 14px 14px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.15);
  text-align: center;
}

/* En móvil: que los badges no se aplasten */
@media (max-width: 820px){
  .hero-badges{
    grid-template-columns: 1fr;
  }
  .hero-actions{
    margin-bottom: 28px;
  }
}

.hero p,
.hero .pill,
.hero .lead,
.hero .quote,
.hero .quote span,
.hero .hero-card,
.hero .hero-card p,
.hero .hero-card h3,
.hero .mini-stat,
.hero .mini-stat .k,
.hero .mini-stat .v,
.hero .badge,
.hero .badge span,
.hero .badge strong,
.hero-copy *,
.hero-card *{
  color:#fff !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8), 0 1px 2px rgba(0,0,0,0.9);
}

/* =========================================================
   SECTIONS
   ========================================================= */
section{
  padding:5rem 0;
}

.section-title{
  font-size:2.2rem;
  margin-bottom:1.2rem;
  color:#fff;
}

.section-intro{
  max-width:720px;
  color:var(--muted);
}

/* =========================================================
   HERO GRID & COMPONENTS
   ========================================================= */
.hero-grid{
  display:flex;
  flex-direction:column;
  gap:40px;
}

.scroll-hint{
  position:absolute;
  bottom:28px;
  left:50%;
  transform:translateX(-50%);
  z-index:3;
}
.scroll-hint span{
  display:block;
  width:24px;
  height:40px;
  border:2px solid rgba(255,255,255,0.3);
  border-radius:12px;
  position:relative;
}
.scroll-hint span::after{
  content:"";
  width:4px; height:8px;
  background:rgba(255,255,255,0.5);
  border-radius:2px;
  position:absolute;
  top:6px;
  left:50%;
  transform:translateX(-50%);
  animation:scrollBounce 1.8s ease-in-out infinite;
}
@keyframes scrollBounce{
  0%,100%{ transform:translateX(-50%) translateY(0); opacity:1; }
  50%{ transform:translateX(-50%) translateY(12px); opacity:0.3; }
}

.hero-card{
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.04);
  border-radius:var(--radius2);
  padding:28px;
  backdrop-filter:none;
}
.hero-card-top{ margin-bottom:20px; }
.hero-card-top h3{ margin-top:0; margin-bottom:8px; }
.hero-card-top p{ margin:0; font-size:0.95rem; }

.mini-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.mini-stat{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:12px;
  background:rgba(255,255,255,0.02);
  border-radius:12px;
  text-align:center;
}
.mini-stat .k{
  font-size:0.75rem;
  text-transform:uppercase;
  letter-spacing:0.5px;
  opacity:0.7;
}
.mini-stat .v{
  font-weight:700;
  font-size:0.95rem;
}

/* =========================================================
   CALLOUT
   ========================================================= */
.callout{
  margin-top:3rem;
  padding:24px;
  background:rgba(138,173,63,0.08);
  border:1px solid rgba(138,173,63,0.18);
  border-radius:var(--radius);
}
.callout h3{
  margin-top:0;
  margin-bottom:8px;
  color:var(--sea);
}
.callout p{
  margin:0;
  color:var(--muted);
}

/* =========================================================
   IMPACT STRIP
   ========================================================= */
.impact-strip{
  display:flex;
  gap:16px;
  margin-top:3rem;
}
.impact-item{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:16px 12px;
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  text-align:center;
}
.impact-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px; height:48px;
  border-radius:50%;
  background:rgba(138,173,63,0.10);
  border:1px solid rgba(138,173,63,0.18);
}
.impact-item span{ font-weight:600; font-size:0.9rem; }
.impact-item small{ color:var(--muted); font-size:0.8rem; }

/* =========================================================
   COUNTERS
   ========================================================= */
.counters{
  display:flex;
  justify-content:center;
  gap:24px;
  margin-top:3rem;
}
.counter{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--radius2);
  padding:28px 24px;
  flex:1;
  max-width:260px;
  transition:transform 0.3s ease, background 0.3s ease;
}
.counter:hover{
  transform:translateY(-4px);
  background:var(--card2);
}
.counter-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  border-radius:50%;
  background:rgba(138,173,63,0.1);
  margin-bottom:4px;
}
.counter .num{
  font-size:2.8rem;
  font-weight:800;
  background:linear-gradient(135deg, var(--sea), #5bb8d4);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  line-height:1;
}
.counter .label{
  font-size:0.95rem;
  color:var(--muted);
  text-align:center;
}

/* =========================================================
   QUOTE WIDE
   ========================================================= */
.quote-wide{
  margin:3rem auto 0;
  max-width:720px;
  text-align:center;
  font-style:italic;
  font-size:1.1rem;
  color:var(--muted);
  padding:24px;
  border-top:1px solid var(--stroke);
  border-bottom:1px solid var(--stroke);
}
.quote-wide p{ margin:0; }

/* =========================================================
   CTA SECTION
   ========================================================= */
.cta{
  display:grid;
  grid-template-columns:1.2fr 0.8fr;
  gap:40px;
  align-items:start;
}
.cta h2{ margin-top:0; }
.cta-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:1.5rem;
}
.cta-card{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--radius2);
  padding:28px;
}
.cta-card h3{
  margin-top:0;
  color:var(--sea);
}
.cta-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
}
.cta-tags span{
  padding:6px 14px;
  border-radius:999px;
  background:rgba(138,173,63,0.12);
  border:1px solid rgba(138,173,63,0.20);
  font-size:0.8rem;
  font-weight:600;
  color:var(--sea);
}

/* =========================================================
   TEAM / QUIENES SOMOS
   ========================================================= */
.team-hero{
  padding:8rem 0 4rem;
}
.team-hero h1{
  font-size:clamp(2.2rem, 5vw, 3.2rem);
  margin-bottom:1rem;
}

.nav-active{
  color:var(--sea) !important;
}

.team-section-title{
  text-align:center;
  font-size:2.4rem;
  color:#fff;
  margin-bottom:2rem;
}
.team-section-title span{
  background:linear-gradient(135deg, var(--sea), #5bb8d4);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.team-carousel{
  position:relative;
}
.team-carousel .team-card{
  display:none;
  animation:teamFadeIn 0.5s ease;
}
.team-carousel .team-card.active{
  display:block;
}
@keyframes teamFadeIn{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}
.team-nav{
  display:flex;
  justify-content:center;
  gap:16px;
  margin-top:20px;
}
.team-arrow{
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid var(--stroke);
  background:var(--card);
  color:#fff;
  font-size:1.5rem;
  cursor:pointer;
  transition:background 0.3s ease, transform 0.2s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.team-arrow:hover{
  background:var(--sea);
  transform:scale(1.1);
}

.team-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  width:100%;
  margin:0 auto;
}

.team-card{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--radius2);
  padding:36px 28px;
  text-align:center;
  transition:transform 0.3s ease, background 0.3s ease;
}
.team-card:hover{
  transform:translateY(-6px);
  background:var(--card2);
}

.team-photo{
  width:120px;
  height:120px;
  border-radius:50%;
  margin:0 auto 20px;
  overflow:hidden;
  border:3px solid rgba(138,173,63,0.25);
}
.team-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.team-photo.team-photo--logo{
  background:#fff;
  padding:16px;
}
.team-photo--logo img{
  object-fit:contain;
}
.team-photo-placeholder{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(138,173,63,0.12);
  color:var(--sea);
  font-size:2.5rem;
  font-weight:800;
}

.team-card h3{
  margin:0 0 4px;
  color:var(--text);
}
.team-role{
  display:block;
  font-size:0.9rem;
  font-weight:600;
  color:var(--sea);
  margin-bottom:16px;
}
.team-card p{
  margin:0;
  color:var(--muted);
  font-size:0.95rem;
}

/* Lista de investigadores (alineación perfecta) */
.team-list{
  margin-top: 14px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
  max-width: 320px;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
}

.team-list li{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.4;
  transition: transform 0.2s ease, color 0.2s ease;
}

.team-list li::before{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sea);    
  flex-shrink: 0;
}

/* Hover elegante */
.team-list li:hover{
  color: var(--text);
  transform: translateX(2px);
}

/* =========================================================
   CONTACT FORM
   ========================================================= */
.contact-form{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--radius2);
  padding:32px;
}
.contact-form h3{
  margin-top:0;
  margin-bottom:20px;
  color:var(--sea);
}
.form-group{
  margin-bottom:16px;
}
.form-group label{
  display:block;
  font-size:0.85rem;
  font-weight:600;
  color:var(--muted);
  margin-bottom:6px;
}
.form-group input,
.form-group textarea{
  width:100%;
  padding:12px 16px;
  border-radius:12px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,0.04);
  color:var(--text);
  font-family:inherit;
  font-size:0.95rem;
  transition:border-color 0.2s ease, background 0.2s ease;
  outline:none;
}
.form-group input:focus,
.form-group textarea:focus{
  border-color:var(--sea);
  background:rgba(255,255,255,0.07);
}
.form-group input::placeholder,
.form-group textarea::placeholder{
  color:rgba(255,255,255,0.3);
}
.form-group textarea{
  resize:vertical;
  min-height:80px;
}
.contact-form .btn{
  width:100%;
  margin-top:8px;
}

/* =========================================================
   FOOTER LAYOUT
   ========================================================= */
.footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.foot-left{ display:flex; flex-direction:column; gap:4px; }
.footer-brand{ font-size:0.95rem; }
.foot-right{ display:flex; gap:8px; align-items:center; }
.sep{ opacity:0.4; }

/* =========================================================
   TWO COLUMN LAYOUT
   ========================================================= */

.two-col{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}

/* =========================================================
   CARDS
   ========================================================= */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:22px;
  margin-top:3rem;
  margin-bottom:3rem; /* ← agrega esta línea */;
}

.card{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  padding:26px;
  box-shadow:var(--shadow2);
  transition:transform .3s ease, background .3s ease;
}
.card:hover{
  transform:translateY(-6px);
  background:var(--card2);
}
.card h3{
  margin-top:0;
  color:var(--sea);
}

/* =========================================================
   STEPS (Proceso OceanMix)
   ========================================================= */

.steps{
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 3rem;
}

.step{
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 20px 24px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  transition: all 0.3s ease;
  position: relative;
}

.step:hover{
  transform: translateY(-4px);
  background: rgba(255,255,255,0.08);
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}

.step-n{
  min-width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
  background: linear-gradient(135deg, var(--sea), var(--aqua));
  color: #04121d;
  box-shadow: 0 8px 20px rgba(107,138,53,0.4);
  flex-shrink: 0;
}

.step h4{
  margin: 0 0 6px 0;
  color: var(--sea);
}

.step p{
  margin: 0;
  color: var(--muted);
}

/* =========================================================
   QUOTES
   ========================================================= */
.quote{
  margin:4rem auto;
  padding-left:24px;
  border-left:4px solid var(--sea);
  font-style:italic;
  max-width:720px;
  color:var(--muted);
}

/* Testimonials carousel */
.testimonials{
  margin-top:40px;
  padding:0;
  border-left:none;
  position:relative;
  min-height:60px;
  text-align:center;
}
.testimonial{
  font-style:italic;
  color:var(--muted);
  opacity:0;
  position:absolute;
  top:0; left:0; right:0;
  transition: opacity 0.5s ease;
  pointer-events:none;
}
.testimonial.active{
  opacity:1;
  position:relative;
  pointer-events:auto;
}
.testimonial p{ margin:0; }
.testimonial-source{
  display:block;
  margin-top:8px;
  font-size:0.85rem;
  color:var(--muted);
  opacity:0.7;
}
.testimonial-dots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:12px;
}
.t-dot{
  width:8px; height:8px;
  border-radius:50%;
  border:none;
  background:var(--muted);
  opacity:0.3;
  cursor:pointer;
  padding:0;
  transition: opacity 0.3s ease, background 0.3s ease;
}
.t-dot.active{
  opacity:1;
  background:var(--sea);
}

/* =========================================================
   TIMELINE
   ========================================================= */
.timeline{
  position:relative;
  margin-top:3rem;
  padding-left:40px;
  max-width:780px;
  margin-left:auto;
  margin-right:auto;
}
.timeline::before{
  content:"";
  position:absolute;
  left:15px;
  top:0;
  bottom:0;
  width:2px;
  background:linear-gradient(180deg, var(--sea), var(--aqua), transparent);
}

.tl-item{
  position:relative;
  margin-bottom:32px;
}
.tl-item:last-child{ margin-bottom:0; }

.tl-dot{
  position:absolute;
  left:-40px;
  top:24px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--sea), var(--aqua));
  box-shadow:0 0 0 4px rgba(138,173,63,0.15), 0 0 12px rgba(138,173,63,0.25);
  z-index:1;
}

.tl-card{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  padding:24px 28px;
  transition:all 0.3s ease;
}
.tl-card:hover{
  transform:translateX(6px);
  background:var(--card2);
  border-color:rgba(138,173,63,0.25);
  box-shadow:0 12px 30px rgba(0,0,0,0.25);
}
.tl-card h3{
  margin-top:0;
  margin-bottom:8px;
  color:var(--sea);
  font-size:1.1rem;
}
.tl-card p{
  margin:0;
  color:var(--muted);
}

/* =========================================================
   GALLERY
   ========================================================= */
.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px,1fr));
  gap:16px;
  margin-top:3rem;
}
.gallery .g-item{
  margin:0;
  overflow:hidden;
  border-radius:var(--radius);
  aspect-ratio:3/4;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bg);
}
.gallery img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
  border-radius:var(--radius);
  cursor:pointer;
  transition:transform .35s ease;
}
.gallery img:hover{
  transform:scale(1.05);
}

/* =========================================================
   MEDIA (IMAGENES EN SECCION HISTORIA)
   ========================================================= */

.media{
  position: relative;
}

.media img{
  border-radius: 24px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.08);
  transition: transform 0.4s ease;
  mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
  max-height: 480px;
  width: 100%;
  object-fit: cover;
}

.media img:hover{
  transform: scale(1.015);
}

.media-caption{
  margin-top: 16px;
  font-size: 0.9rem;
  color: var(--sand);
  font-style: italic;
  padding-left: 16px;
  border-left: 3px solid var(--sea);
  line-height: 1.5;
}

/* =========================================================
   SECTION SEPARATORS
   ========================================================= */
.section + .section::before{
  content:"";
  display:block;
  width:80px;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--sea), transparent);
  margin:0 auto 3rem;
}

/* =========================================================
   FOOTER
   ========================================================= */
footer{
  padding:4rem 0 2rem;
  font-size:.9rem;
  color:var(--muted);
  border-top:1px solid rgba(255,255,255,0.08);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:32px;
}
.foot-col{ display:flex; flex-direction:column; gap:6px; }
.foot-heading{
  font-weight:700;
  color:var(--text);
  font-size:0.85rem;
  text-transform:uppercase;
  letter-spacing:0.5px;
  margin-bottom:8px;
}
.foot-links a{
  font-size:0.85rem;
  color:var(--muted);
  transition:color 0.2s ease;
}
.foot-links a:hover{ color:var(--sea); }
.foot-social{
  display:flex;
  gap:12px;
  margin-top:12px;
}
.foot-social a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px; height:40px;
  border-radius:50%;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.10);
  color:var(--muted);
  transition:all 0.2s ease;
}
.foot-social a:hover{
  background:rgba(138,173,63,0.15);
  border-color:var(--sea);
  color:var(--sea);
}
.foot-bottom{
  margin-top:2rem;
  padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,0.06);
  text-align:center;
}

/* =========================================================
   REVEAL ANIMATIONS
   ========================================================= */
.reveal{
  opacity:0;
  transform:translateY(30px);
  transition:opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible{
  opacity:1;
  transform:translateY(0);
}

/* =========================================================
   FAQ ACCORDION
   ========================================================= */
.faq{
  max-width:820px;
  margin:3rem auto 0;
}
.faq-item{
  margin-bottom:14px;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--stroke);
  transition:border-color 0.3s ease, box-shadow 0.3s ease;
}
.faq-item:has(.faq-q[aria-expanded="true"]){
  border-color:rgba(138,173,63,0.30);
  box-shadow:0 8px 24px rgba(0,0,0,0.20);
}
.faq-q{
  width:100%;
  background:var(--card);
  border:none;
  border-radius:0;
  padding:20px 28px;
  color:var(--text);
  font-size:1.05rem;
  font-weight:600;
  text-align:left;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  transition:background 0.2s ease;
}
.faq-q:hover{
  background:var(--card2);
}
.faq-q .chev{
  font-size:1.2rem;
  color:var(--sea);
  transition:transform 0.3s ease;
  flex-shrink:0;
}
.faq-q[aria-expanded="true"] .chev{
  transform:rotate(180deg);
}
.faq-q[aria-expanded="true"]{
  background:rgba(138,173,63,0.06);
}
.faq-a{
  max-height:0;
  overflow:hidden;
  transition:max-height 0.3s ease, padding 0.3s ease;
}
.faq-a.open{
  max-height:300px;
  padding:0 28px 20px;
}
.faq-a p{
  margin:0;
  color:var(--muted);
  line-height:1.7;
  padding-left:0;
  border-left:3px solid var(--sea);
  padding-left:16px;
}

/* =========================================================
   LIGHTBOX
   ========================================================= */
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.92);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:opacity 0.3s ease, visibility 0.3s ease;
  z-index:100;
}
.lightbox.active{
  opacity:1;
  visibility:visible;
}
.lb-img{
  max-width:90vw;
  max-height:85vh;
  border-radius:var(--radius);
}
.lb-close, .lb-prev, .lb-next{
  position:absolute;
  background:rgba(255,255,255,0.1);
  border:none;
  color:#fff;
  font-size:1.5rem;
  width:48px;
  height:48px;
  border-radius:50%;
  cursor:pointer;
  transition:background 0.2s ease;
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover{
  background:rgba(255,255,255,0.2);
}
.lb-close{ top:20px; right:20px; }
.lb-prev{ left:20px; top:50%; transform:translateY(-50%); }
.lb-next{ right:20px; top:50%; transform:translateY(-50%); }
.lb-caption{
  position:absolute;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  color:var(--muted);
}

/* =========================================================
   MOBILE NAV
   ========================================================= */
.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:8px;
}
.nav-toggle span{
  width:24px;
  height:2px;
  background:var(--text);
  transition:transform 0.3s ease;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 820px){
  .nav-toggle{ display:flex; }
  .nav-links{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:var(--bg);
    flex-direction:column;
    padding:20px;
    border-bottom:1px solid var(--stroke);
  }
  .nav-links.open{ display:flex; }

  section{ padding:3rem 0; }
  .hero p{ font-size:1.05rem; }

  .two-col{
    grid-template-columns:1fr;
    gap:28px;
  }

  .impact-strip{
    flex-direction:column;
    gap:12px;
  }

  .counters{
    flex-direction:column;
    align-items:center;
    gap:24px;
  }

  .cta{
    grid-template-columns:1fr;
    gap:28px;
  }

  .mini-stats{
    grid-template-columns:1fr;
    gap:8px;
  }

  .footer-grid{
    grid-template-columns:1fr;
    gap:28px;
    text-align:center;
  }
  .foot-col{ align-items:center; }
  .foot-social{ justify-content:center; }

  .team-hero{ padding:6rem 0 2rem; }
  .team-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 560px){
  .team-grid{ grid-template-columns:1fr; }

  .steps{
    gap:20px;
  }
  .step{
    padding:16px;
  }
  .step-n{
    width:36px;
    height:36px;
    font-size:0.9rem;
  }
}