/* =========================================================
   Cypher Intelligence - Apple-inspired redesign
   ========================================================= */

:root{
  --bg-0:#060b10;
  --bg-1:#0a121a;
  --bg-2:#0f1e2b;
  --text:#e9f6ff;
  --muted:#9cb4c7;
  --brand:#63bfff;
  --brand-2:#78e4ff;
  --accent:#5ce3b5;
  --panel:rgba(13,23,33,.68);
  --panel-strong:rgba(12,21,30,.82);
  --border:rgba(120,190,240,.22);
  --border-strong:rgba(130,220,255,.34);
  --radius:26px;
  --radius-sm:16px;
  --shadow:0 20px 55px rgba(0,8,18,.46);
  --copy-lh:1.72;
  --copy-gap:14px;
}

@font-face{
  font-family:"Netron";
  src:url("assets/fonts/Netron.woff2") format("woff2"),
      url("assets/fonts/Netron.woff") format("woff");
  font-display:swap;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  min-height:100vh;
  color:var(--text);
  font:16px/1.65 "SF Pro Text","SF Pro Display","Avenir Next","Helvetica Neue",sans-serif;
  background:
    radial-gradient(1200px 520px at 95% -10%, rgba(99,191,255,.17), transparent 58%),
    radial-gradient(920px 420px at -10% 0%, rgba(92,227,181,.10), transparent 62%),
    linear-gradient(180deg,var(--bg-1),var(--bg-0) 48%,#05090d);
}

body::before,
body::after{
  content:"";
  position:fixed;
  z-index:-1;
  pointer-events:none;
  border-radius:999px;
  filter:blur(44px);
  opacity:.28;
}

body::before{
  width:340px;
  height:340px;
  left:-120px;
  top:20%;
  background:radial-gradient(circle,var(--brand),transparent 62%);
}

body::after{
  width:380px;
  height:380px;
  right:-140px;
  top:52%;
  background:radial-gradient(circle,var(--accent),transparent 62%);
}

a{
  color:#bfe6ff;
  text-decoration:none;
}

a:hover{color:#ddf4ff}

.wrap{
  width:min(1200px,94vw);
  margin:0 auto;
  padding:18px 0 26px;
}

.top{
  position:sticky;
  top:14px;
  z-index:30;
  display:flex;
  align-items:center;
  gap:16px;
  padding:14px 18px;
  margin-bottom:20px;
  border:1px solid var(--border);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(22,34,46,.82),rgba(12,20,29,.72));
  backdrop-filter:blur(14px) saturate(130%);
  box-shadow:var(--shadow);
}

.logo{
  width:76px;
  height:76px;
  border-radius:18px;
  padding:8px;
  background:linear-gradient(180deg,rgba(99,191,255,.15),rgba(99,191,255,.05));
  border:1px solid rgba(123,192,240,.3);
}

.brand{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.brand .title{
  font-family:"Netron","SF Pro Display","Avenir Next","Helvetica Neue",sans-serif;
  font-size:clamp(1.2rem,1.2vw + .85rem,1.95rem);
  letter-spacing:.06em;
  line-height:1.06;
}

.tag{
  font-size:.88rem;
  letter-spacing:.02em;
}

.ops-line{
  margin-top:3px;
  font-size:.9rem;
  letter-spacing:.02em;
  color:#d9eeff;
}

.muted{color:var(--muted)}
.small{font-size:.92rem}

main{
  display:grid;
  gap:22px;
}

.card{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  border:1px solid var(--border);
  padding:clamp(18px,2vw,30px);
  background:
    linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.01) 45%, transparent 72%),
    var(--panel);
  backdrop-filter:blur(12px) saturate(130%);
  box-shadow:var(--shadow);
}

.card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  border:1px solid rgba(255,255,255,.05);
}

.card h1,
.card h2{
  margin:0 0 var(--copy-gap);
  line-height:1.15;
}

.card h1{
  font-size:clamp(1.65rem,2.5vw + .9rem,2.7rem);
  letter-spacing:-.01em;
}

.card h2{
  font-size:clamp(1.22rem,1.3vw + .78rem,1.85rem);
}

.lead{
  margin:0;
  font-size:clamp(1.02rem,1vw + .8rem,1.2rem);
  color:#d8ebf8;
  line-height:var(--copy-lh);
  text-align:justify;
  text-justify:inter-word;
}

.card .tag{
  text-align:justify;
  text-justify:inter-word;
}

.hero{
  padding-block:16px;
}

.btns{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.hero-nav{
  justify-content:center;
  flex-wrap:nowrap;
  gap:clamp(6px,.9vw,10px);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  padding-bottom:2px;
}

.hero-nav .btn{
  flex:0 0 auto;
  white-space:nowrap;
  min-height:38px;
  padding:8px clamp(10px,1vw,14px);
  font-size:clamp(.78rem,.46vw + .64rem,.92rem);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid rgba(125,206,255,.38);
  background:linear-gradient(180deg,rgba(81,153,216,.26),rgba(39,96,146,.2));
  color:#eff8ff;
  font-size:.94rem;
  font-weight:600;
  letter-spacing:.01em;
  transition:transform .18s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.btn:hover{
  transform:translateY(-1px);
  border-color:var(--border-strong);
  background:linear-gradient(180deg,rgba(120,223,255,.32),rgba(57,136,196,.26));
  box-shadow:0 6px 16px rgba(77,172,230,.28);
}

.btn[aria-current="page"]{
  background:linear-gradient(180deg,rgba(99,191,255,.48),rgba(94,160,220,.36));
  border-color:rgba(135,224,255,.72);
  box-shadow:0 0 0 1px rgba(190,240,255,.18), 0 10px 18px rgba(60,166,225,.24);
}

.btn-linkedin{
  min-width:42px;
  width:42px;
  padding:0;
}

.li-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  border-radius:6px;
  font-size:.8rem;
  font-weight:800;
  line-height:1;
  letter-spacing:0;
  color:#0a1118;
  background:linear-gradient(180deg,#9ee2ff,#74c4ff);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
}

.grid-aside{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(250px,.8fr);
  gap:22px;
}

.grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}

ul{
  margin:0;
  padding-left:22px;
}

li{
  line-height:var(--copy-lh);
  text-align:justify;
  text-justify:inter-word;
}

li+li{margin-top:var(--copy-gap)}

p{
  margin:0;
  color:#d9eaf7;
  line-height:var(--copy-lh);
  text-align:justify;
  text-justify:inter-word;
}

p+p{margin-top:var(--copy-gap)}

ul+p,
p+ul,
ul+ul{
  margin-top:var(--copy-gap);
}

#que-hacemos p:last-child{margin-top:var(--copy-gap)}

.qe-eagle-slot{
  float:right;
  width:clamp(170px,28vw,330px);
  aspect-ratio:1/1;
  margin:2px 0 14px 24px;
  border-radius:28px;
  border:1px solid rgba(125,206,255,.3);
  background:
    radial-gradient(170px 120px at 30% 20%, rgba(99,191,255,.12), transparent 80%),
    radial-gradient(180px 130px at 80% 85%, rgba(92,227,181,.12), transparent 82%),
    rgba(8,16,24,.56);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), 0 10px 24px rgba(0,0,0,.3);
  background-image:
    url("assets/ci_eagle.png"),
    radial-gradient(170px 120px at 30% 20%, rgba(99,191,255,.12), transparent 80%),
    radial-gradient(180px 130px at 80% 85%, rgba(92,227,181,.12), transparent 82%);
  background-repeat:no-repeat, no-repeat, no-repeat;
  background-position:center, center, center;
  background-size:contain, cover, cover;
}

#como-participar-card{
  background:
    radial-gradient(560px 180px at 0% 0%, rgba(99,191,255,.12), transparent 70%),
    var(--panel);
}

.tool-suite{
  display:grid;
  gap:20px;
}

.tool-top{
  display:grid;
  grid-template-columns:minmax(210px,280px) 1fr;
  gap:20px;
  align-items:start;
}

.tool-logo-slot{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
  width:100%;
  aspect-ratio:1/1;
  border-radius:26px;
  border:1px dashed rgba(125,206,255,.48);
  background:
    radial-gradient(220px 170px at 30% 20%, rgba(99,191,255,.16), transparent 74%),
    radial-gradient(220px 170px at 75% 82%, rgba(92,227,181,.15), transparent 76%),
    rgba(8,16,24,.52);
  color:#dff3ff;
  font-weight:700;
  letter-spacing:.02em;
}

.tool-logo-image{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:20px;
}

#cypher-intel-lab .tool-logo-slot{
  padding:4px;
  overflow:hidden;
}

#cypher-intel-lab .tool-logo-image{
  object-fit:cover;
}

[id^="cypher-intel-lab"] .tool-logo-slot{
  margin-top:10px;
}

[id^="cypher-intel-lab"] .tool-logo-image{
  object-fit:cover;
  object-position:center 56%;
}

.tool-copy,
.tool-copy-bottom{
  display:grid;
  gap:10px;
}

.tool-video-slot{
  width:100%;
  min-height:220px;
  aspect-ratio:16/9;
  border-radius:22px;
  border:1px dashed rgba(125,206,255,.45);
  background:
    linear-gradient(180deg, rgba(99,191,255,.11), rgba(92,227,181,.08)),
    rgba(8,16,24,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#dff3ff;
  text-align:center;
  padding:18px;
}

.img-square{
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:22px;
  border:1px solid var(--border);
  box-shadow:0 12px 26px rgba(0,0,0,.33);
}

.img-square.small{width:120px}
.img-square.medium{width:190px}
.img-square.large{width:270px}

.float-left{float:left;margin:2px 22px 14px 0}
.float-right{float:right;margin:2px 0 14px 22px}

.narsil::after,
.colaboradores::after{content:"";display:block;clear:both}

.narsil .narsil-shards-intro{
  margin-top:0;
  padding-top:24px;
}

.narsil ul{margin-top:12px}

.sf{
  background:
    radial-gradient(700px 260px at -12% -18%, rgba(99,191,255,.14), transparent 65%),
    radial-gradient(520px 230px at 108% 112%, rgba(92,227,181,.16), transparent 70%),
    var(--panel-strong);
}

.sf-grid{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:start;
  gap:24px;
}

.sf-title{margin:0 0 var(--copy-gap)}
.sf .tag{
  display:block;
  line-height:var(--copy-lh);
}
.sf-desc{margin-top:var(--copy-gap);color:#d4e6f5}

.sf-logo img{
  width:min(180px,32vw);
  filter:drop-shadow(0 0 26px rgba(92,227,181,.34));
}

.sf-btn{
  margin-top:16px;
  background:linear-gradient(180deg,rgba(92,227,181,.44),rgba(72,189,152,.34));
  border-color:rgba(120,239,200,.62);
  color:#eafff6;
}

.team-grid{
  display:grid;
  gap:14px;
  margin-top:16px;
}

.team-member{
  display:grid;
  grid-template-columns:125px 1fr;
  gap:16px;
  align-items:start;
  padding:14px;
  border-radius:20px;
  border:1px solid rgba(124,194,245,.2);
  background:rgba(8,16,23,.48);
}

.member{
  margin:0;
  text-align:center;
}

.member figcaption{
  margin-top:8px;
  line-height:1.3;
}

.member .name{
  display:block;
  font-weight:700;
}

.member .role{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-style:italic;
}

.team-member .logo-thumb{width:105px}
.team-bio p{margin:0}

.brand-banner{
  display:flex;
  justify-content:center;
  margin-top:20px;
}

.brand-banner img{
  width:min(100%,350px);
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.36));
}

.foot{
  margin-top:10px;
  color:#8da5bb;
  text-align:center;
  font-size:.93rem;
  padding-bottom:14px;
}

@media (max-width:980px){
  .top{
    position:relative;
    top:0;
  }

  .grid-aside,
  .grid,
  .sf-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:760px){
  .wrap{width:min(1200px,95vw)}

  .logo{
    width:64px;
    height:64px;
  }

  .float-left,
  .float-right{
    float:none;
    display:block;
    margin:0 auto 14px;
  }

  .qe-eagle-slot{
    float:none;
    width:min(260px,78%);
    margin:8px auto 16px;
  }

  .hero-nav .btn{width:auto}

  .team-member{
    grid-template-columns:1fr;
  }

  .team-member .logo-thumb{
    margin:0 auto;
  }

  .tool-top{
    grid-template-columns:1fr;
  }
}

@media (prefers-reduced-motion:no-preference){
  .card{
    animation:rise .5s ease both;
  }

  .card:nth-of-type(2){animation-delay:.04s}
  .card:nth-of-type(3){animation-delay:.08s}
  .card:nth-of-type(4){animation-delay:.12s}
}

@keyframes rise{
  from{
    opacity:0;
    transform:translateY(10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}