/* Base */
:root{
  --header-h: 72px;
  --pad-x: 24px;
  --container: 1100px;
}
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';
  color:#fff;
  background:#000;
  overflow-x:hidden;
}

/* Header fijo */
.site-header{
  position:fixed; inset:0 0 auto 0; height:var(--header-h);
  display:grid; grid-template-columns: 1fr auto 1fr; align-items:center;
  gap:16px; padding: 10px var(--pad-x);
  background: linear-gradient(to bottom, rgba(10,12,20,.7), rgba(10,12,20,.35));
  border-bottom:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
  z-index:1000;
}
.brand{display:flex; align-items:center; gap:12px}
.brand .logo img{height:56px; width:auto; object-fit:contain; filter:drop-shadow(0 0 8px rgba(0,224,255,.35))}
.brand .title{font-weight:800; letter-spacing:.3px; font-size:clamp(22px,3vw,34px); background:linear-gradient(90deg,#00e0ff,#9d4edd); -webkit-background-clip:text; background-clip:text; color:transparent}
.main-nav{justify-self:center; display:flex; gap:16px; flex-wrap:wrap}
.main-nav a{color:#dfe9ff; text-decoration:none; font-weight:600; opacity:.9}
.main-nav a:hover, .main-nav a.active{color:#fff}
/* En escritorio el Discord del header lo pone .actions. El de dentro de la nav
   solo aparece en el panel movil, donde .actions esta oculto: si no, salen dos. */
.main-nav .btn-discord{display:none}
.actions{justify-self:end}
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:8px 14px;
  border-radius:999px; text-decoration:none; font-weight:700; color:#fff;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(90deg,#06b6d4,#3b82f6);
  box-shadow:0 0 10px rgba(59,130,246,.35);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 0 16px rgba(59,130,246,.5)}
.btn.outline{background:transparent; border-color:rgba(255,255,255,.35)}
.btn.outline:hover{background:rgba(255,255,255,.1)}
.btn-discord{background:linear-gradient(90deg,#5865F2,#4752C4); box-shadow:0 0 10px rgba(88,101,242,.4)}
.btn-discord:hover{box-shadow:0 0 18px rgba(88,101,242,.6)}
.btn-lg{padding:14px 26px; font-size:17px}

/* Foco visible para navegación por teclado */
a:focus-visible, button:focus-visible{
  outline:3px solid #00e0ff; outline-offset:3px; border-radius:6px;
}

/* Botón hamburguesa (solo móvil) */
.nav-toggle{
  display:none;
  justify-self:end;
  align-items:center; justify-content:center;
  width:44px; height:44px; padding:0;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.22);
  border-radius:12px;
  color:#fff; cursor:pointer;
  transition: background-color .2s ease;
}
.nav-toggle:hover{background:rgba(255,255,255,.16)}
.nav-toggle .bars{position:relative; display:block; width:20px; height:2px; background:currentColor; border-radius:2px}
.nav-toggle .bars::before,
.nav-toggle .bars::after{
  content:''; position:absolute; left:0; width:20px; height:2px;
  background:currentColor; border-radius:2px;
  transition: transform .25s ease, top .25s ease;
}
.nav-toggle .bars::before{top:-6px}
.nav-toggle .bars::after{top:6px}
.nav-toggle[aria-expanded="true"] .bars{background:transparent}
.nav-toggle[aria-expanded="true"] .bars::before{top:0; transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .bars::after{top:0; transform:rotate(-45deg)}

/* Portada */
.hero{
  min-height: calc(100dvh - var(--header-h));
  display:grid; place-items:center;
  padding:48px var(--pad-x) 64px;
  text-align:center;
  background:
    radial-gradient(70% 55% at 50% 38%, rgba(0,224,255,.20), transparent 70%),
    radial-gradient(60% 50% at 50% 62%, rgba(157,78,221,.22), transparent 70%),
    #080b14;
}
.hero-inner{display:grid; justify-items:center; gap:0}
.hero-logo{
  width:min(260px, 52vw); height:auto;
  filter: drop-shadow(0 0 40px rgba(0,224,255,.35));
}
.hero-title{
  margin:14px 0 0; font-size:clamp(44px,9vw,104px); font-weight:800; letter-spacing:-.02em;
  background:linear-gradient(90deg,#00e0ff,#9d4edd);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-claim{
  margin:2px 0 0; font-size:clamp(20px,3.6vw,34px); font-weight:700;
}
.hero-sub{
  margin:16px 0 0; max-width:46ch;
  font-size:clamp(16px,2.2vw,19px); opacity:.85;
}
.hero .btn-xl{margin-top:30px; padding:18px 34px; font-size:19px}
.hero-scroll{
  margin-top:38px; display:grid; justify-items:center; gap:4px;
  color:#9fd1ff; text-decoration:none; font-size:14px; font-weight:600;
}
.hero-scroll:hover{color:#cfe6ff}
.hero-arrow{font-size:20px; line-height:1}

/* Layout principal */
main{padding-top:var(--header-h)}
.container{width:min(var(--container), calc(100% - 2*var(--pad-x))); margin-inline:auto}
.section h2{font-size:clamp(28px,5vw,48px); margin:0 0 12px}
.section p{font-size:clamp(16px,2.2vw,18px); opacity:.95; max-width:70ch}
.section .lead{font-size:clamp(17px,2.4vw,20px); opacity:1}

/* Secciones: foto de fondo + velo tintado del color de la sección.
   El velo es lo que mantiene el texto legible sobre cualquier foto;
   --tint conserva la identidad de color de cada sección. */
.section{
  min-height:100vh; display:flex; align-items:center;
  padding: 64px 0;
  --tint: 15,23,42;
  background-color: rgb(var(--tint));
  background-image:
    linear-gradient(180deg, rgba(var(--tint),.72), rgba(var(--tint),.88)),
    var(--photo, none);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.section + .section{border-top:1px solid rgba(255,255,255,.08)}

#que-somos     { --tint:  15,23,42;  --photo: url('img/fondo-que.jpg') }
#quienes-somos { --tint:  30,41,59;  --photo: url('img/fondo-quienes.jpg') }
#herramientas  { --tint:  76,29,149; --photo: url('img/fondo-herramientas.jpg') }
#proyectos     { --tint:   6,78,59;  --photo: url('img/fondo-proyectos.jpg') }
#galeria       { --tint: 127,29,29;  --photo: url('img/fondo-galeria.jpg') }
#redes         { --tint:  30,58,138; --photo: url('img/fondo-redes.jpg') }
#parche        { --tint: 124,45,18;  --photo: url('img/fondo-experiencias.jpg') }

/* Componentes */
.chips{display:flex; gap:10px; flex-wrap:wrap; list-style:none; padding:0; margin:20px 0 0}
.chips li{padding:8px 12px; border-radius:999px; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.24); max-width:100%}

.grid{display:grid; gap:16px; margin-top:24px}
.cards{grid-template-columns: repeat(auto-fit, minmax(240px,1fr))}
.card{padding:18px; border-radius:14px; background:rgba(0,0,0,.32); border:1px solid rgba(255,255,255,.24)}
.card h3{margin:0 0 8px}
.card p{margin:0; font-size:16px}

/* Tarjetas del squad, una por color.
   --c es el color vivo (acentos) y --c-deep el oscuro (fondo). Los oscuros estan
   elegidos para pasar AA con texto blanco: los vivos no aguantan texto encima. */
.squad{grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr))}
.member{
  --c: 0,224,255; --c-deep: 15,23,42;
  padding:22px; border-radius:16px;
  background:
    linear-gradient(160deg, rgba(var(--c),.14), rgba(var(--c),0) 60%),
    rgba(var(--c-deep),.92);
  border:1px solid rgba(var(--c),.42);
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
}
/* Los --c van deliberadamente claros: se usan en texto pequeno (el rol y los <dt>)
   sobre el fondo oscuro, y los tonos medios se quedaban en 3.6-4.1:1. */
.member--wally { --c: 196,181,253; --c-deep:  76,29,149 }
.member--markuz{ --c: 252,165,165; --c-deep: 127,29, 29 }
.member--jonks { --c: 147,197,253; --c-deep:  30,58,138 }
.member--choko { --c: 110,231,183; --c-deep:   6,78, 59 }

.member-head{display:flex; align-items:center; gap:14px; margin-bottom:16px}
/* .avatar sirve tanto para la cabeza del skin (<img>) como para la inicial (<div>) */
.member .avatar{
  flex:0 0 auto; width:64px; height:64px;
  display:grid; place-items:center;
  border-radius:14px; font-weight:800; font-size:26px;
  background:rgba(var(--c),.9); color:rgba(var(--c-deep),1);
  border:1px solid rgba(var(--c),.5);
}
img.avatar{
  object-fit:cover;
  image-rendering: pixelated; /* las cabezas son de 8x8: sin esto salen borrosas */
  background:rgba(var(--c),.28);
}
.member h3{margin:0; font-size:21px}
.member .role{font-size:14px; font-weight:700; color:rgb(var(--c))}

.member-facts{margin:0; display:grid; gap:4px}
.member-facts dt{
  font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:rgb(var(--c)); opacity:.9;
}
.member-facts dd{margin:0 0 12px; font-size:15px; line-height:1.5}
.member-facts dd:last-child{margin-bottom:0}

/* Redes de cada miembro */
.member-social{
  list-style:none; margin:16px 0 0; padding:14px 0 0;
  display:flex; flex-wrap:wrap; gap:8px;
  border-top:1px solid rgba(var(--c),.28);
}
.member-social a{
  display:inline-flex; align-items:baseline; gap:6px;
  padding:7px 12px; border-radius:999px;
  text-decoration:none; font-size:13px;
  background:rgba(var(--c),.16);
  border:1px solid rgba(var(--c),.45);
  color:rgb(var(--c));
  transition: background-color .2s ease, transform .2s ease;
}
.member-social a:hover{background:rgba(var(--c),.3); transform:translateY(-1px)}
.member-social strong{font-weight:800}
.member-social span{opacity:.85}

/* Herramienta destacada (el Launcher) */
.hero-tool{
  margin-top:28px; padding:28px;
  border-radius:20px;
  background:
    linear-gradient(135deg, rgba(0,224,255,.16), rgba(157,78,221,.16)),
    rgba(0,0,0,.42);
  border:1px solid rgba(255,255,255,.3);
  box-shadow: 0 16px 46px rgba(0,0,0,.34);
}
.hero-tool .badge{
  display:inline-block; margin-bottom:12px;
  padding:6px 12px; border-radius:999px;
  font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  background:linear-gradient(90deg,#00e0ff,#9d4edd); color:#08111f;
}
.hero-tool h3{margin:0 0 10px; font-size:clamp(24px,3.6vw,34px)}
.hero-tool p{margin:0 0 12px; max-width:62ch}
.hero-tool .hero-tool-note{font-weight:700; opacity:1}
.hero-tool .btn{margin-top:8px}

/* Linea de tiempo de proyectos */
.timeline{position:relative; margin-top:32px; padding-left:34px}
.timeline::before{
  content:''; position:absolute; left:9px; top:6px; bottom:6px; width:3px;
  border-radius:3px;
  background:linear-gradient(180deg,#00e0ff,#9d4edd);
  transform-origin: top center;
}
.tl-group{position:relative; margin-bottom:34px}
.tl-group:last-child{margin-bottom:0}
.tl-title{
  margin:0 0 14px; font-size:13px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; opacity:.9;
}
.tl-title::before{
  content:''; position:absolute; left:-34px; top:2px;
  width:21px; height:21px; border-radius:50%;
  background:#0b0f1a; border:3px solid #00e0ff;
}
.tl-items{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.tl-item{
  padding:16px 18px; border-radius:14px;
  background:rgba(0,0,0,.32); border:1px solid rgba(255,255,255,.24);
}
.tl-item h4{margin:0 0 6px; font-size:18px}
.tl-item p{margin:0; font-size:15px; line-height:1.5}

/* El unico activo se distingue del resto */
.tl-group--live .tl-title{color:#6ee7b7; opacity:1}
.tl-group--live .tl-title::before{border-color:#34d399; box-shadow:0 0 0 6px rgba(52,211,153,.22)}
.tl-item--live{
  background:linear-gradient(135deg, rgba(52,211,153,.18), rgba(0,0,0,.32));
  border-color:rgba(52,211,153,.55);
}
.tl-item--live h4::after{
  content:'EN LÍNEA'; margin-left:10px; vertical-align:middle;
  padding:3px 9px; border-radius:999px;
  font-size:10px; font-weight:800; letter-spacing:.08em;
  background:#34d399; color:#04231a;
}

/* Tarjeta de herramienta enlazable */
.tool-card{
  display:block; text-decoration:none; color:inherit;
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}
.tool-card:hover{transform:translateY(-3px); border-color:rgba(255,255,255,.5); background:rgba(0,0,0,.42)}
.tool-card .go{display:inline-block; margin-top:12px; font-weight:700; color:#7fe6ff}

/* Galería: funciona con y sin fotos */
.gallery{grid-template-columns: repeat(auto-fit, minmax(220px,1fr))}
.gallery img{width:100%; height:220px; object-fit:cover; border-radius:12px; border:1px solid rgba(255,255,255,.25)}
.gallery-empty{
  margin-top:24px; padding:40px 24px; text-align:center;
  border:2px dashed rgba(255,255,255,.32); border-radius:16px;
  background:rgba(0,0,0,.24);
}
.gallery-empty p{margin:0 auto; max-width:52ch}

/* Discord: es donde esta centralizado todo, asi que no compite con las demas redes */
.discord-block{
  display:flex; align-items:center; gap:18px;
  margin-top:26px; padding:24px;
  border-radius:20px; text-decoration:none; color:inherit;
  background:linear-gradient(135deg, #5865F2, #4752C4);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 16px 40px rgba(23,30,90,.45);
  transition: transform .2s ease, box-shadow .2s ease;
}
.discord-block:hover{transform:translateY(-3px); box-shadow:0 20px 50px rgba(23,30,90,.6)}
.discord-block-icon{flex:0 0 auto; width:56px; height:56px; color:#fff}
.discord-block-icon svg{width:100%; height:100%}
.discord-block-text{display:grid; gap:6px}
.discord-block-text strong{font-size:clamp(20px,2.6vw,26px)}
.discord-block-text span{font-size:15px; line-height:1.5; opacity:.95}
.discord-block-go{flex:0 0 auto; font-size:30px; font-weight:800; opacity:.85}

.social-label{margin:26px 0 0; font-size:15px; opacity:.85}
.social{display:flex; gap:12px; flex-wrap:wrap; margin-top:12px}

/* Enlace dentro de un hito de la linea de tiempo */
.tl-cta{
  display:inline-block; margin-top:10px;
  font-weight:700; color:#6ee7b7; text-decoration:none;
}
.tl-cta:hover{text-decoration:underline}

.hero-tool-where{margin:12px 0 0; font-size:14px; opacity:.85}

/* Boton flotante: el Discord a un toque desde cualquier punto.
   Oculto mientras la portada esta a la vista, donde repetiria su propio boton.
   Lo enciende onepage.js al perder de vista .hero. */
.discord-float{
  position:fixed; right:20px; bottom:20px; z-index:1500;
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 20px; border-radius:999px;
  background:linear-gradient(135deg,#5865F2,#4752C4); color:#fff;
  text-decoration:none; font-weight:800;
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 12px 30px rgba(0,0,0,.45);
  opacity:0; visibility:hidden; transform:translateY(14px) scale(.94);
  pointer-events:none;
  transition: opacity .25s ease, transform .25s ease, visibility .25s, box-shadow .2s ease;
}
.discord-float.is-visible{
  opacity:1; visibility:visible; transform:none; pointer-events:auto;
}
.discord-float:hover{transform:translateY(-2px) scale(1.03); box-shadow:0 16px 38px rgba(23,30,90,.6)}
.discord-float svg{width:22px; height:22px; flex:0 0 auto}

/* Footer */
.site-footer{padding:20px var(--pad-x); background:#0b0f1a; color:#c8d3e8}
.site-footer .container{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.back-to-top{color:#9fd1ff; text-decoration:none}
.back-to-top:hover{color:#cfe6ff}

/* Scroll reveal (contenido) */
.reveal{opacity:0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; will-change: transform, opacity}
.reveal.visible{opacity:1; transform:none}

/* Fade entre transiciones (secciones completas) */
.section.fade-init{opacity:0; transform: translateY(32px); transition: opacity 2.5s ease, transform 1.05s ease; will-change: transform, opacity}
.section.fade-in{opacity:1; transform:none}

/* ---------- Animaciones ligadas al scroll ----------
   Corren en el compositor, fuera del hilo principal, asi que aguantan 60fps en
   movil mucho mejor que cualquier libreria JS. Solo se anima transform y opacity:
   cualquier otra propiedad fuerza repintados y tira la fluidez justo en el celular,
   que es donde se va a abrir esta web.

   Todo va dentro de @supports. Donde no exista animation-timeline, el
   IntersectionObserver de onepage.js sigue dando el reveal basico y nadie ve una
   web rota. */

@keyframes rise-in  { from{opacity:0; transform:translateY(52px)}             to{opacity:1; transform:none} }
@keyframes pop-in   { from{opacity:0; transform:translateY(38px) scale(.94)}  to{opacity:1; transform:none} }
@keyframes draw-line{ from{transform:scaleY(0)}                               to{transform:scaleY(1)} }
@keyframes drift-up { from{transform:translateY(30px)}                        to{transform:translateY(-20px)} }
@keyframes progress { from{transform:scaleX(0)}                               to{transform:scaleX(1)} }

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){

    /* Barra de progreso de lectura, arriba del todo */
    body::after{
      content:''; position:fixed; inset:0 0 auto 0; height:4px; z-index:2000;
      background:linear-gradient(90deg,#00e0ff,#9d4edd);
      transform-origin:left center;
      animation: progress linear both;
      animation-timeline: scroll(root block);
    }

    /* El reveal pasa a depender del scroll. Las clases que pone el IO dejan de
       mandar porque las animaciones ganan en la cascada. */
    .reveal, .reveal.visible{
      transition:none;
      animation: rise-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }

    /* Con lo anterior, el fade de seccion por JS sobra */
    .section.fade-init, .section.fade-in{opacity:1; transform:none; transition:none}

    /* Cada tarjeta lleva su propia linea de tiempo, asi que el escalonado sale
       solo del scroll en vez de a base de delays fijos */
    .member, .tl-item, .card, .hero-tool, .gallery-empty, .chips li{
      animation: pop-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 95%;
    }

    /* El eje de la linea de tiempo se dibuja solo conforme se baja */
    .timeline::before{
      animation: draw-line linear both;
      animation-timeline: view();
      animation-range: entry 30% cover 72%;
    }

    /* Los titulares se mueven mas despacio que el resto: parallax */
    .section h2{
      animation: drift-up linear both;
      animation-timeline: view();
      animation-range: entry cover;
    }
  }
}

/* Navegación: compensación del header para anclas */
section{scroll-margin-top: calc(var(--header-h) + 16px)}

/* Responsivo */
@media (max-width: 820px){
  .site-header{grid-template-columns: auto 1fr auto}
  .brand{gap:8px}
  .brand .logo img{height:48px}
  .brand .title{display:block; font-size:clamp(16px,4.5vw,22px); white-space:nowrap}

  /* La nav pasa a panel desplegable controlado por .nav-toggle */
  .nav-toggle{display:inline-flex}
  .actions{display:none}
  .main-nav{
    /* backdrop-filter en .site-header lo vuelve el bloque contenedor de este
       position:fixed, asi que hereda el grid del header: hay que anular el
       justify-self:center y forzar el ancho, o el panel sale angosto y centrado. */
    justify-self:stretch; align-self:start; width:100%;
    position:fixed; inset:var(--header-h) 0 auto 0;
    display:grid; gap:0;
    padding:8px var(--pad-x) 16px;
    background:rgba(10,12,20,.97);
    border-bottom:1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(8px);
    max-height:calc(100dvh - var(--header-h));
    overflow-y:auto;
    transform:translateY(-8px);
    opacity:0; visibility:hidden; pointer-events:none;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .main-nav[data-open="true"]{
    opacity:1; visibility:visible; pointer-events:auto; transform:none;
  }
  .main-nav a{padding:14px 4px; border-bottom:1px solid rgba(255,255,255,.08); font-size:17px}
  .main-nav a:last-of-type{border-bottom:0}
  /* Aqui si: .actions esta oculto, asi que este es el unico Discord del header */
  .main-nav .btn-discord{display:inline-flex; margin-top:14px; justify-content:center; padding:14px}

  .section{min-height:auto; padding:72px 0}

  .discord-block{gap:14px; padding:18px}
  .discord-block-icon{width:42px; height:42px}
  .discord-block-go{display:none}

  .discord-float{right:14px; bottom:14px; padding:12px 18px}
  /* Que el boton flotante no tape el pie */
  .site-footer{padding-bottom:84px}
}

/* Accesibilidad: reducir animaciones si el usuario lo prefiere */
/* Accesibilidad: con animaciones tan marcadas esto deja de ser un detalle. El
   movimiento intenso ligado al scroll produce mareo a bastante gente, asi que
   todo lo de arriba esta detras de (prefers-reduced-motion: no-preference) y
   aqui ademas se apaga cualquier resto. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal, .section.fade-init{transition:none; transform:none; opacity:1}
  .btn, .tool-card, .main-nav, .nav-toggle .bars::before, .nav-toggle .bars::after{transition:none}
  .reveal, .member, .tl-item, .card, .hero-tool, .gallery-empty, .chips li,
  .timeline::before, .section h2, body::after{animation:none; transform:none; opacity:1}
}