/* css/styles.css */
:root{
  --bg: #070b12;
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.60);

  --blue: #2f6bff;
  --blue2: #1f4fe0;

  --stroke: rgba(255,255,255,.10);
  --glass: rgba(10,15,24,.38);

  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --shadow2: 0 10px 30px rgba(0,0,0,.45);

  /* ✅ CAMBIA IMÁGENES AQUÍ */
  --hero-bg: url("../images/hero.png");
  --about-bg: url("../images/about.png");

  --p1: url("../images/project1.jpg");
  --p2: url("../images/project3.png");
  --p3: url("../images/project2.jpg");
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* ===== WRAP ===== */
.wrap{ width: min(1200px, 92vw); margin: 0 auto; }
.page{ background: radial-gradient(900px 500px at 20% 10%, rgba(47,107,255,.10), transparent 60%); }

/* ===== HERO ===== */
.hero{
  overflow: hidden;
  position: relative;
  min-height: 620px;
  padding-bottom: 30px;
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero__overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(1100px 600px at 15% 25%, rgba(47,107,255,.22), transparent 55%),
    linear-gradient(90deg, rgba(6,10,16,.92) 0%, rgba(6,10,16,.80) 45%, rgba(6,10,16,.45) 70%, rgba(6,10,16,.35) 100%),
    linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.45) 100%);
}
.hero__glow{
  position:absolute;
  filter: blur(60px);
  opacity:.9;
  pointer-events:none;
}
.hero__glow--left{
  width: 560px; height: 560px;
  left: -180px; top: 180px;
  background: radial-gradient(circle, rgba(47,107,255,.45), transparent 60%);
}
.hero__glow--right{
  width: 520px; height: 520px;
  right: -220px; top: -120px;
  background: radial-gradient(circle, rgba(47,107,255,.22), transparent 60%);
}
.hero__noise{
  position:absolute;
  inset:0;
  opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.85'/%3E%3C/svg%3E");
  pointer-events:none;
}
.hero > .wrap{ position: relative; z-index: 2; }

/* NAV */
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 26px 0;
}
.nav__left{ display:flex; align-items:center; gap:12px; }
.nav__badge{
  width: 44px; height: 36px;
  display:grid;
  place-items:center;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset;
  font-weight: 800;
  letter-spacing:.6px;
}
.nav__name{ font-size: 15px; color: rgba(255,255,255,.84); font-weight: 500; }
.nav__right{ display:flex; gap:10px; }
.nav__btn{
  text-decoration:none;
  color: rgba(255,255,255,.78);
  font-size: 13px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);
  box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.nav__btn:hover{
  transform: translateY(-1px);
  border-color: rgba(47,107,255,.55);
  background: rgba(0,0,0,.30);
}

/* HERO texto */
.hero__content{ padding: 90px 0 40px; }
.hero__text{ max-width: 760px; }
.hero__title{
  font-size: clamp(44px, 6.2vw, 88px);
  font-weight: 900;
  letter-spacing: .5px;
}
.hero__role{
  margin-top: 12px;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
  font-weight: 600;
  letter-spacing: .6px;
  font-size: clamp(14px, 1.7vw, 20px);
}
.hero__roleBlue{ color: rgba(47,107,255,.95); }
.hero__roleSep{ opacity:.55; }
.hero__roleWhite{ color: rgba(255,255,255,.80); }
.hero__desc{
  margin-top: 18px;
  max-width: 640px;
  line-height: 1.6;
  font-size: clamp(14px, 1.4vw, 18px);
  color: rgba(255,255,255,.68);
}
.hero__micro{
  margin-top: 12px;
  font-size: 12px;
  color: rgba(255,255,255,.52);
}

/* Buttons */
.hero__actions{
  margin-top: 26px;
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 12px;
  text-decoration:none;
  font-weight: 700;
  font-size: 14px;
  border: 1px solid transparent;
  user-select:none;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.btn__arrow{ font-size: 20px; transform: translateY(-1px); opacity:.95; }
.btn__icon{ opacity:.9; }
.btn--primary{
  color:#fff;
  background: linear-gradient(180deg, rgba(47,107,255,1) 0%, rgba(31,79,224,1) 100%);
  box-shadow: 0 14px 36px rgba(47,107,255,.18), 0 0 0 1px rgba(255,255,255,.07) inset;
}
.btn--primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 44px rgba(47,107,255,.22), 0 0 0 1px rgba(255,255,255,.09) inset;
}
.btn--ghost{
  color: rgba(255,255,255,.86);
  background: rgba(0,0,0,.25);
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset;
}
.btn--ghost:hover{
  transform: translateY(-1px);
  border-color: rgba(47,107,255,.55);
  background: rgba(0,0,0,.33);
}
.btn--outline{
  color: rgba(255,255,255,.86);
  background: rgba(0,0,0,.20);
  border-color: rgba(47,107,255,.55);
  box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset;
}
.btn--outline:hover{
  transform: translateY(-1px);
  background: rgba(0,0,0,.30);
}

/* KPI STRIP */
.kpis{
  margin-top: 22px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}
.kpi{
  flex: 1 1 180px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset;
}
.kpi b{
  display:block;
  font-size: 18px;
  letter-spacing:.3px;
}
.kpi span{
  display:block;
  margin-top: 2px;
  font-size: 12px;
  color: rgba(255,255,255,.62);
}

/* SECTIONS */
.section{ padding: 56px 0 10px; }
.kicker{
  font-size: 12px;
  letter-spacing: 2.2px;
  color: rgba(255,255,255,.55);
  font-weight: 800;
}
.title{
  font-size: 12px;
  letter-spacing: 2.2px;
  color: rgba(255,255,255,.62);
  font-weight: 900;
}

/* ABOUT */
.about{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 28px;
  align-items:center;
}
.about__lead{
  margin-top: 10px;
  color: rgba(255,255,255,.78);
  line-height: 1.6;
  max-width: 560px;
  font-size: 14px;
}
.list{
  margin-top: 14px;
  list-style:none;
  display:grid;
  gap: 10px;
  color: rgba(255,255,255,.70);
  font-size: 14px;
}
.tick{
  width: 18px; height: 18px;
  display:inline-grid;
  place-items:center;
  margin-right: 10px;
  border-radius: 6px;
  background: rgba(47,107,255,.14);
  border: 1px solid rgba(47,107,255,.35);
  color: rgba(47,107,255,.95);
  font-weight: 900;
  font-size: 12px;
}
.meta{
  margin-top: 14px;
  display:flex;
  gap: 18px;
  flex-wrap: wrap;
  color: rgba(255,255,255,.62);
  font-size: 13px;
}
.meta__item{ display:flex; gap: 8px; align-items:center; }
.meta__icon{ opacity:.9; }

/* frame about */
.frame{
  position: relative;
  border-radius: 18px;
  overflow:hidden;
  min-height: 260px;
  box-shadow: var(--shadow);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.frame--about{
  background-image:
    radial-gradient(900px 260px at 30% 20%, rgba(47,107,255,.10), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.40) 100%),
    var(--about-bg);
}
.frame__shine{
  position:absolute;
  inset:0;
  background:
    radial-gradient(800px 320px at 30% 20%, rgba(255,255,255,.14), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.26) 100%);
}
.frame__border{
  position:absolute;
  inset:0;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 0 0 1px rgba(47,107,255,.18) inset, 0 0 40px rgba(47,107,255,.08);
}

/* PROJECTS */
.projects{
  margin-top: 16px;
  display:grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  gap: 16px;
}
.card{
  position: relative;
  border-radius: 16px;
  overflow:hidden;
  min-height: 200px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
  box-shadow: var(--shadow2);
  transition: transform .18s ease;
}
.card:hover{ transform: translateY(-2px); }

.card__bg{ position:absolute; inset:0; z-index:0;
  background-size: cover; background-position:center; background-repeat:no-repeat;
  transform: scale(1.03); filter: contrast(1.02) brightness(.90);
}
.card__bg--p1{ background-image: var(--p1); }
.card__bg--p2{ background-image: var(--p2); }
.card__bg--p3{ background-image: var(--p3); }

.card__overlay{ position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.72) 88%),
    radial-gradient(900px 380px at 20% 30%, rgba(47,107,255,.14), transparent 55%);
}

.card__content{
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 18px 18px 16px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.card__content h3{ font-size: 16px; font-weight: 900; margin-bottom: 10px; }
.card__content p{
  font-size: 13px;
  color: rgba(255,255,255,.70);
  line-height: 1.4;
  margin-top: 4px;
}
.card__content ul{
  list-style:none;
  display:grid;
  gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,.72);
}
.dot{ color: rgba(47,107,255,.95); margin-right: 8px; font-weight: 900; }
.card--center{ min-height: 230px; }

.cta{ display:flex; justify-content:center; margin-top: 18px; }

/* SERVICES */
.services{
  margin-top: 16px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.svc{
  border-radius: 14px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset;
  padding: 14px;
  min-height: 110px;
  position:relative;
  overflow:hidden;
  transition: transform .18s ease;
}
.svc:hover{ transform: translateY(-2px); }
.svc__head{ display:flex; align-items:center; gap: 10px; }
.svc__icon{
  width: 26px; height: 26px;
  display:grid; place-items:center;
  border-radius: 10px;
  background: rgba(47,107,255,.12);
  border: 1px solid rgba(47,107,255,.28);
  color: rgba(47,107,255,.95);
  font-weight: 900;
}
.svc h4{ font-size: 13px; font-weight: 900; color: rgba(255,255,255,.88); }
.svc__body{
  margin-top: 10px;
  display:grid;
  gap: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.62);
}

/* Footer */
.footer{
  padding: 22px 0 30px;
  text-align:center;
  color: rgba(255,255,255,.45);
  font-size: 12px;
}
.footer__line{
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  margin: 10px 0 14px;
}

/* =========================
   ✅ DESTELLO BORDE (scanner)
========================= */
.card, .svc{ isolation: isolate; }

.card::after,
.svc::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  z-index: 5;
  box-shadow:
    0 0 0 1px rgba(47,107,255,.16) inset,
    0 0 30px rgba(47,107,255,.06);
  opacity: .9;
}

.card::before,
.svc::before{
  content:"";
  position:absolute;
  z-index: 6;
  pointer-events:none;

  width: 120px;
  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(235,245,255,.95),
    rgba(47,107,255,.60),
    transparent
  );

  opacity: .70;
  filter:
    blur(.08px)
    drop-shadow(0 0 10px rgba(47,107,255,.28))
    drop-shadow(0 0 18px rgba(47,107,255,.14));

  top: 0;
  left: -140px;

  animation: borderScan 7.2s linear infinite;
}

.projects .card:nth-child(1)::before{ animation-delay: 0s; }
.projects .card:nth-child(2)::before{ animation-delay: -2.4s; }
.projects .card:nth-child(3)::before{ animation-delay: -4.8s; }

.services .svc:nth-child(1)::before{ animation-delay: -0.9s; }
.services .svc:nth-child(2)::before{ animation-delay: -2.8s; }
.services .svc:nth-child(3)::before{ animation-delay: -4.1s; }
.services .svc:nth-child(4)::before{ animation-delay: -6.0s; }

@keyframes borderScan{
  0%   { top: 0; left: -140px; transform: rotate(0deg); }
  22%  { top: 0; left: calc(100% + 20px); transform: rotate(0deg); }

  25%  { top: -140px; left: calc(100% - 1px); transform: rotate(90deg); }
  47%  { top: calc(100% + 20px); left: calc(100% - 1px); transform: rotate(90deg); }

  50%  { top: calc(100% - 1px); left: calc(100% + 20px); transform: rotate(180deg); }
  72%  { top: calc(100% - 1px); left: -140px; transform: rotate(180deg); }

  75%  { top: calc(100% + 20px); left: 0; transform: rotate(270deg); }
  97%  { top: -140px; left: 0; transform: rotate(270deg); }

  100% { top: 0; left: -140px; transform: rotate(0deg); }
}

.card:hover::before,
.svc:hover::before{
  opacity: 1;
  filter:
    blur(.06px)
    drop-shadow(0 0 14px rgba(47,107,255,.35))
    drop-shadow(0 0 22px rgba(47,107,255,.18));
}

/* =========================
   ✅ MOUSE GLOW (wow)
========================= */
.card .mouseGlow, .svc .mouseGlow{
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  pointer-events:none;
  background: radial-gradient(220px 220px at var(--mx, 50%) var(--my, 50%),
    rgba(47,107,255,.22),
    transparent 55%);
  opacity: 0;
  transition: opacity .18s ease;
  z-index: 4;
}
.card:hover .mouseGlow,
.svc:hover .mouseGlow{ opacity: 1; }

/* =========================
   ✅ REVEAL ON SCROLL
========================= */
.reveal{
  opacity: 0;
  transform: translateY(18px);
  filter: blur(6px);
  transition: opacity .7s ease, transform .7s ease, filter .7s ease;
  will-change: opacity, transform, filter;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* accesibilidad */
@media (prefers-reduced-motion: reduce){
  .card::before, .svc::before{ animation: none; opacity: .25; }
  .card .mouseGlow, .svc .mouseGlow{ display:none; }
  .reveal{ opacity:1; transform:none; filter:none; }
}

/* RESPONSIVE */
@media (max-width: 980px){
  .hero{ min-height: 560px; }
  .hero__content{ padding: 70px 0 30px; }

  .about{ grid-template-columns: 1fr; }
  .projects{ grid-template-columns: 1fr; }
  .card--center{ min-height: 220px; }

  .services{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px){
  .nav__right{ gap: 8px; }
  .nav__btn{ padding: 9px 10px; font-size: 12px; }

  .hero__actions{ flex-direction: column; align-items:flex-start; }
  .btn{ width: 100%; justify-content:center; }

  .services{ grid-template-columns: 1fr; }
}