/* style.css - Green Nop One Page Scroll
   Paleta:
   Fondo oscuro: #0D0D0D
   Verde neón:  #00FF7F
   Verde medio: #2E7D32
   Verde claro: #A5D6A7
   Blanco:      #FFFFFF
   Gris claro:  #E0E0E0
*/

/* ---- Root variables ---- */
:root{
  --bg: #0D0D0D;
  --neon: #00FF7F;
  --mid: #2E7D32;
  --light: #A5D6A7;
  --white: #FFFFFF;
  --muted: #E0E0E0;
  --glass: rgba(255,255,255,0.04);
  --container: 1200px;
  --radius: 14px;
  --transition: 350ms cubic-bezier(.2,.9,.3,1);
}

/* ---- Basic reset ---- */
*{box-sizing:border-box}
html,body{
  height:100%;
  margin:0;
  background:var(--bg);
  color:var(--muted);
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  scroll-behavior:smooth;
  overflow-y:overlay;
}

/* Visually hidden for accessibility */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* Particle canvas fills background */
#particles{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  mix-blend-mode:screen;
}

/* ---- Header ---- */
.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:40;
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(13, 83, 6, 0.859), rgba(13,13,13,0.18));
  border-bottom: 1px solid rgba(255,255,255,0.02);
}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:1.2rem;
}

/* header inner */
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.logo img{
  height:44px;
  display:block;
  filter: drop-shadow(0 6px 18px rgba(0,255,127,0.06));
}

.main-nav a{
  color:var(--muted);
  text-decoration:none;
  margin-left:1rem;
  padding:0.35rem 0.5rem;
  border-radius:8px;
  font-weight:600;
  transition:var(--transition);
  font-size:0.95rem;
}
.main-nav a:hover{
  color:var(--white);
  text-shadow: 0 0 12px rgba(0,255,127,0.18);
  transform:translateY(-2px);
}

/* ---- Snap sections ---- */
.snap-wrapper{
  scroll-snap-type:y mandatory;
  height:100vh;
  overflow-y:auto;
  position:relative;
  z-index:10;
}

.section{
  min-height:100vh;
  padding:80px 1.2rem;
  display:flex;
  align-items:center;
  scroll-snap-align:start;
  position:relative;
  z-index:2;
}

/* Alternative section background */
.section-alt{
  background: linear-gradient(180deg, rgba(46,125,50,0.05), transparent);
}

/* general inner layout for sections */
.section-inner{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
}

/* ---- HERO ---- */
.hero{
  display:flex;
  align-items:center;
  justify-content:center;
  padding-top:120px;
  padding-bottom:120px;
  gap:2rem;
  position:relative;
  overflow:visible;
}

.hero-inner{
  display:flex;
  gap:3rem;
  align-items:center;
  justify-content:space-between;
  width:100%;
  flex-wrap:wrap;
}

.hero-content{
  flex:1 1 520px;
  max-width:640px;
}

.neon{
  font-family: "Poppins", sans-serif;
  font-weight:800;
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  color:var(--neon);
  letter-spacing: -0.6px;
  text-shadow:
    0 0 6px rgba(0,255,127,0.25),
    0 6px 30px rgba(0,255,127,0.04);
  margin:0 0 0.6rem 0;
}

.lead{
  color:var(--muted);
  font-size:1.05rem;
  margin-bottom:1rem;
}

.cta-row{ display:flex; gap:0.9rem; flex-wrap:wrap; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0.65rem 1rem;
  border-radius:10px;
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
  border:1px solid transparent;
  transition:var(--transition);
}

.btn-primary{
  background: linear-gradient(90deg, rgba(0,255,127,0.12), rgba(165,214,167,0.04));
  color:var(--neon);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 28px rgba(0,255,127,0.035);
}
.btn-primary:hover{
  transform:translateY(-4px);
  box-shadow: 0 12px 42px rgba(0,255,127,0.08);
}

.btn-ghost{
  background: linear-gradient(90deg, rgba(0,255,127,0.12), rgba(165,214,167,0.04));
  color:var(--neon);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 28px rgba(0,255,127,0.035);
}
.btn-ghost:hover{
    transform:translateY(-4px);
  box-shadow: 0 12px 42px rgba(0,255,127,0.08);
 }

/* hero image */
.hero-image{
  flex:1 1 420px;
  max-width:520px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-image img{
  max-width:100%;
  border-radius:12px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.02);
}

/* ---- PROCESO timeline ---- */
.timeline{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:1.2rem;
  margin-top:1.2rem;
}

.timeline-item{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.03));
  border-radius:12px;
  padding:1rem;
  box-shadow: 0 8px 30px rgba(2,6,6,0.6);
  border:1px solid rgba(0,255,127,0.03);
}
.timeline-item .icon{
  font-size:1.6rem;
  filter: drop-shadow(0 6px 20px rgba(0,255,127,0.04));
}

/* ---- IMPACTO ---- */
.section-impact{
  background: linear-gradient(180deg, rgba(46,125,50,0.12), rgba(13,13,13,0.02));
  color:var(--muted);
}

.impact-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:1rem;
  margin-top:1rem;
}

.impact-card{
  padding:1.1rem;
  border-radius:12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.02));
  border:1px solid rgba(255,255,255,0.02);
  text-align:left;
}
.impact-icon{ font-size:1.6rem; margin-bottom:0.6rem; }

/* counter */
.counter-wrap{
  margin-top:1.6rem;
  display:flex;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
}
.counter-label{ font-weight:600; color:var(--light) }
.counter-value{
  font-family: "Poppins", sans-serif;
  font-size:2.2rem;
  color:var(--neon);
  font-weight:800;
  text-shadow: 0 6px 30px rgba(0,255,127,0.06);
}

/* ---- TEAM ---- */
.team-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:1.1rem;
  margin-top:1rem;
}

.team-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
  border-radius:12px;
  padding:1rem;
  text-align:center;
  transition:var(--transition);
  border:1px solid rgba(0,255,127,0.03);
}
.team-card img{
  width:84px;
  height:84px;
  object-fit:cover;
  border-radius:50%;
  display:block;
  margin:0 auto 0.6rem;
  border:2px solid rgba(255,255,255,0.02);
}
.team-card:hover{
  transform:translateY(-6px);
  box-shadow: 0 18px 60px rgba(0,255,127,0.04);
}

/* ---- CONTACT / FOOTER ---- */
.footer-section{
  padding-bottom:140px;
}
.contact-left{ flex:1 1 380px; }
.contact-right{ flex:1 1 360px; }

.contact-form{
  display:flex;
  flex-direction:column;
  gap:0.6rem;
  margin-top:0.6rem;
}
.contact-form input,
.contact-form textarea{
  background:var(--glass);
  border:1px solid rgba(255,255,255,0.03);
  padding:0.7rem;
  border-radius:8px;
  color:var(--muted);
  outline:none;
}
.contact-form input:focus,
.contact-form textarea:focus{
  border-color: var(--neon);
  box-shadow: 0 8px 24px rgba(0,255,127,0.04);
}

/* ---- Back to top ---- */
#backToTop{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:60;
  width:48px;
  height:48px;
  border-radius:12px;
  border:none;
  background:linear-gradient(180deg, rgba(0,255,127,0.12), rgba(0,255,127,0.06));
  color:var(--neon);
  font-weight:800;
  cursor:pointer;
  display:none;
  align-items:center;
  justify-content:center;
  box-shadow: 0 12px 40px rgba(0,255,127,0.04);
}

/* ---- Reveal animations ---- */
.reveal{
  opacity:0;
  transform: translateY(16px);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(.2,.9,.3,1);
}
.reveal.in-view{
  opacity:1;
  transform: translateY(0);
}

/* Small floating animation for subtle life */
@keyframes floaty {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0px); }
}
.hero-image img{ animation: floaty 6s ease-in-out infinite; }

/* ---- Responsive ---- */
@media (max-width:900px){
  .hero-inner{ gap:1rem; }
  .main-nav{ display:none; }
  .header-inner{ padding:0.3rem 0; }
  .hero{ padding-top:100px; padding-bottom:80px; }
  .hero-content{ text-align:center; }
  .hero-image{ order:2; margin-top:1rem; }
}
@media (max-width:520px){
  .neon{ font-size:1.6rem; }
  .counter-value{ font-size:1.4rem; }
  .container{ padding-left:0.9rem; padding-right:0.9rem; }
}

/* --- SECCIÓN ¿QUÉ ES GREEN NOP? --- */
#que-es .section-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
}

#que-es .text-block {
  flex: 1 1 50%;
  text-align: left;
}

#que-es .illustration {
  flex: 1 1 45%;
  display: flex;
  justify-content: center;
}

#que-es .illustration img {
  max-width: 100%;
  border-radius: 14px;
  box-shadow: 0 8px 40px rgba(0, 255, 127, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Título verde llamativo */
#que-es h2 {
  color: var(--neon); /* verde neón definido en tu paleta */
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  margin-bottom: 0.8rem;
  text-shadow: 0 0 10px rgba(0, 255, 127, 0.15);
}

/* --- EFECTO HOVER INDIVIDUAL EN LAS CARDS DEL PROCESO --- */
.timeline-item {
  transition: transform 0.3s ease, box-shadow 0.4s ease, border-color 0.3s ease;
}

.timeline-item:hover {
  transform: scale(1.05);
  box-shadow: 0 0 25px rgba(0, 255, 127, 0.4);
  border-color: rgba(0, 255, 127, 0.4);
}

/* --- EFECTO HOVER INDIVIDUAL EN LAS CARDS DE IMPACTO --- */
.impact-card {
  transition: transform 0.3s ease, box-shadow 0.4s ease, border-color 0.3s ease;
}

.impact-card:hover {
  transform: scale(1.06);
  box-shadow: 0 0 30px rgba(0, 255, 127, 0.6);
  border-color: rgba(0, 255, 127, 0.5);
}

/* ---- TEAM / EQUIPO ---- */
.team-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:1.1rem;
  margin-top:1rem;
}

.team-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
  border-radius:12px;
  padding:1rem;
  text-align:center;
  border:1px solid rgba(0,255,127,0.03);
  transition: transform 0.3s ease, box-shadow 0.4s ease, border-color 0.3s ease;
}

.team-card img{
  width:84px;
  height:84px;
  object-fit:cover;
  border-radius:50%;
  display:block;
  margin:0 auto 0.6rem;
  border:2px solid rgba(255,255,255,0.02);
  transition: border-color 0.3s ease;
}

.team-card h4{
  margin:0.5rem 0 0.3rem;
  color: var(--white);
  font-weight:600;
}

.team-card .role{
  font-size:0.9rem;
  color: var(--light);
  margin-bottom:0.6rem;
}

.team-card .bio{
  font-size:0.85rem;
  color: var(--muted);
  margin-bottom:0.5rem;
}

.team-card .contacto{
  font-size:0.85rem;
  color: var(--neon);
  margin-top:0.3rem;
}

/* Hover efecto similar a impact-card */
.team-card:hover{
  transform: scale(1.06); /* crecer un poco */
  box-shadow: 0 0 30px rgba(0,255,127,0.6); /* resplandor verde */
  border-color: rgba(0,255,127,0.5); /* borde verde */
}

.team-card:hover img{
  border-color: var(--neon); /* borde verde en la imagen al pasar mouse */
}

/* ---- CONTACT CARD ---- */
.contact-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
  border-radius:12px;
  padding:2rem;
  text-align:center;
  max-width:480px;
  border:1px solid rgba(0,255,127,0.03);
  transition: transform 0.3s ease, box-shadow 0.4s ease, border-color 0.3s ease;
}

.contact-card h2{
  color: var(--white);
  margin-bottom:0.5rem;
}

.contact-card p{
  color: var(--muted);
  margin-bottom:0.5rem;
}

.contact-card a{
  color: var(--neon);
  text-decoration:none;
}

.contact-card button{
  margin-top:0.8rem;
}

.contact-card:hover{
  transform: scale(1.03);
  box-shadow: 0 0 25px rgba(0,255,127,0.5);
  border-color: var(--neon);
}

/* Formulario dentro de la carta */
.contact-card .contact-form input,
.contact-card .contact-form textarea{
  background:var(--glass);
  border:1px solid rgba(255,255,255,0.03);
  padding:0.7rem;
  border-radius:8px;
  color:var(--muted);
  outline:none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-card .contact-form input:focus,
.contact-card .contact-form textarea:focus{
  border-color: var(--neon);
  box-shadow: 0 8px 24px rgba(0,255,127,0.08);
}
/* --- Ajuste de tamaño del logo principal en el header --- */
.logo img {
  height: 50px; /* antes 44px */
  transition: transform 0.3s ease;
}

.logo img:hover {
  transform: scale(1.05);
}

/* --- Ajuste de tamaño del logo en la sección hero --- */
.hero-image img {
  max-width: 250%; /* agranda la imagen dentro del hero */
  width: 250%;
  animation: floaty 6s ease-in-out infinite;
}