/* ====================================================
   1. Variables (paleta Byoko)
==================================================== */
:root{
  --clr-primary:#00c851;           /* verde */
  --clr-primary-light:#2ee37c;
  --clr-dark:#000;
  --clr-grey:#555;
  --clr-light:#f5f5f5;

  --max-w:1200px;
  --radius:.5rem;
  --shadow:0 8px 20px rgba(0,0,0,.08);
  --transition:.3s ease;
}

/* ====================================================
   2. Reset + helpers
==================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  line-height:1.6;
  color:var(--clr-dark);
  background:#fff;
  scroll-behavior:smooth;
  padding-top:72px;                /* hueco para navbar fija */
}
img{display:block;max-width:100%;height:auto}

.container{width:90%;max-width:var(--max-w);margin-inline:auto}
.section{padding:5rem 0}
.section.alt{background:var(--clr-light)}
h1,h2,h3{font-weight:700;line-height:1.2;color:var(--clr-dark)}
h1{font-size:clamp(2rem,5vw,3rem);margin-bottom:1rem}
h2{font-size:2rem;margin-bottom:2rem}
h3{font-size:1.25rem;margin-bottom:1rem}
p{color:var(--clr-grey)}
.hidden{display:none!important}

.btn{
  display:inline-block;
  padding:.75rem 1.5rem;
  border-radius:var(--radius);
  background:var(--clr-primary);
  color:#fff;text-decoration:none;
  font-weight:600;
  transition:var(--transition);
}
.btn:hover{background:var(--clr-primary-light);transform:translateY(-2px)}

/* ====================================================
   3. NAVBAR (fija, full-width, alineada)
==================================================== */
.nav{
  position:fixed;
  top:0;left:0;right:0;
  height:72px;
  z-index:1000;
  background:rgba(255,255,255,.40); /* ① SIEMPRE blanco 90 % */
  display:flex; justify-content:center;
  justify-content:center;          /* centra .nav-inner bloque */
  transition:box-shadow .3s ease;   /* solo animamos sombra */
  border-bottom:none;
}

/* cambia fondo al hacer scroll */
.nav.scrolled{
  background:rgba(255,255,255,.90);/* 2️⃣ blanco 90 % opacidad */
  box-shadow:0 2px 10px rgba(0,0,0,.15);
}

/* contenedor interno */
.nav-inner{
  width:100%;
  max-width:var(--max-w);
  padding:0 .75rem;
  display:flex;
  align-items:center;
  gap:2rem;
}

/* Logo */
.brand{
  font-size:1.5rem;
  font-weight:700;
  color:var(--clr-primary);
  text-decoration:none;
  margin-right:auto;               /* empuja enlaces al centro */
}

/* Enlaces */
.links{
  list-style:none;
  display:flex;
  gap:2rem;
}
.links a{
  text-decoration:none;
  font-weight:500;
  color:var(--clr-dark);                       /* sobre hero */
  transition:color .2s;
}
.nav.scrolled .links a{color:var(--clr-dark);  } /* sigue blanco sobre fondo oscuro */
.links a:hover{color:var(--clr-primary)}

/* Botón */
.nav-btn{
  background:var(--clr-primary);
  color:#fff;
  padding:.6rem 1.25rem;
  border-radius:.4rem;
  font-weight:600;
  white-space:nowrap;
  transition:filter .2s;
}
.nav-btn:hover{filter:brightness(1.1);}

/* Burger (solo móvil) */
#burger{
  display:none;
  background:none;
  border:none;
  font-size:2rem;
  color:#fff;
  cursor:pointer;
}

/* ====================================================
   4. HERO (sin cambios importantes)
==================================================== */
.hero{
  background:url('assets/hero.jpg') center/cover no-repeat;
  min-height:80vh;
  display:flex;
  align-items:center;
  color:#fff;
  text-align:center;
  
}
.hero h1{ color: #fff;}
.hero p { color: #fff;}
.hero-content{max-width:700px}

/* ====================================================
   5. Cards, team, contact, footer  (igual que antes)
==================================================== */
/* Cards */
.cards{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.card{background:#fff;border-radius:var(--radius);padding:2rem;box-shadow:var(--shadow);transition:var(--transition)}
.card:hover{transform:translateY(-4px);box-shadow:0 10px 25px rgba(0,0,0,.12)}

/* Team */
.team{display:flex;flex-wrap:wrap;gap:2rem;margin-top:2rem}
.team figure{flex:1 1 180px;text-align:center}
.team figcaption{margin-top:.5rem;font-weight:600}

/* Contact form */
.contact-form{display:grid;gap:1rem;max-width:600px;margin-inline:auto}
.contact-form input,.contact-form textarea{width:100%;padding:.75rem;border:1px solid #ddd;border-radius:var(--radius)}
.contact-form button{justify-self:start}

/* Footer */
.footer{background:var(--clr-dark);color:#ccc;padding:2rem 0;text-align:center;font-size:.875rem}

/* ====================================================
   6. Responsiveness
==================================================== */
@media(max-width:768px){
  /* burger visible, enlaces colapsan */
  #burger{display:block;margin-left:auto}
  .links{
    position:absolute;top:72px;right:0;
    flex-direction:column;width:220px;
    background:rgba(0,0,0,.95);
    max-height:0;overflow:hidden;
    transition:max-height .3s ease;
    border-bottom-left-radius:.5rem;
  }
  .links.open{max-height:400px;}
  .links a{
    padding:1rem 1.5rem;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .nav-btn{display:none;}          /* oculta botón, opcional mover dentro del menú */
}


/* ====================================================
   7. Overñay
==================================================== */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
  gap: 16px;
}

.team-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  outline: none;
}
.team-card img { display:block; width:100%; height:auto; }

.team-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 16px;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.75), rgba(253, 253, 253, 0.1) 60%, rgba(255, 255, 255, 0));
  color: #fff;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.team-card:hover .team-overlay,
.team-card:focus .team-overlay,
.team-card.open .team-overlay {
  opacity: 1; transform: translateY(0); pointer-events: auto;
}
.team-overlay h3 { margin: 0 0 4px; font-size: 1.1rem; }
.team-overlay .role { margin: 0 0 8px; font-weight: 600; opacity: .9; }
.team-overlay .bio { margin: 0 0 8px; font-size: .95rem; line-height: 1.35; }
.team-overlay a { color: #fff; text-decoration: underline; }

/* ------------- MENÚ MÓVIL (≤ 768 px) ------------- */
@media (max-width: 768px) {
  /* Botón hamburguesa visible solo en móvil */
  #burger {
    display: block;
    background: transparent;
    border: 0;
    font-size: 1.9rem;        /* tamaño cómodo para pulgar */
    color: #111;              /* se vuelve oscuro sobre header blanco */
    z-index: 1050;            /* encima del panel lateral */
    cursor: pointer;
  }

  /* Panel que contiene los <li> cuando se abre */
  #navLinks {
    position: fixed;
    top: 0;
    right: 0;
    width: 78%;              /* 22 % deja ver el sitio de fondo */
    height: 100%;
    padding: 96px 24px 48px; /* hueco para el header */
    display: flex;
    flex-direction: column;
    gap: 24px;
    background: rgba(0,0,0,0.9);   /* negro 90 % opaco */
    backdrop-filter: blur(4px);    /* ligero glassmorphism */
    transform: translateX(100%);
    transition: transform .3s ease;
    z-index: 1040;
  }

  /* Cuando el script añade .open → desliza visible */
  #navLinks.open {
    transform: translateX(0);
  }

  /* Enlaces del menú dentro del panel */
  #navLinks a {
    color: #fff !important;         /* blanco pleno, legible */
    font-size: 1.25rem;
    font-weight: 600;
    text-decoration: none;
  }

  /* Opcional: sub-rayado al hacer tap */
  #navLinks a:active {
    text-decoration: underline;
  }
}