/* justovargas.com — Estilo inspirado en NV Solutions (oscuro + gradientes) */
:root{
  --bg: #0b1020;
  --bg-2: #0e1530;
  --fg: #e9eefb;
  --muted:#aab3cf;
  --brand:#7aa2ff;
  --accent:#9f7bff;
  --accent-2:#ff6b6b;
  --card:#161b31;
  --glass: rgba(255,255,255,.06);
  --radius: 18px;
}

*{box-sizing:border-box}
/*html,body{margin:0;padding:0;background: radial-gradient(60vw 60vw at 80% -10%, rgba(159,123,255,.25), transparent 60%), linear-gradient(180deg,var(--bg),var(--bg-2));color:var(--fg);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;scroll-behavior:smooth}*/
html,body {
  margin: 0;
  padding: 0;
  background: linear-gradient(180deg, var(--bg), var(--bg-2)); /* fondo oscuro base */
  color: var(--fg);
  font-family: Inter, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  scroll-behavior: smooth;
  position: relative; /* necesario para el ::before */
  z-index: 0;
}

.wrap{
  max-width:1100px;
  margin-inline:auto;
  padding:0 40px; /* antes era 20px */
}

.site-header{position:sticky;top:0;z-index:50;backdrop-filter:saturate(140%) blur(8px);background:linear-gradient(180deg,rgba(11,16,32,.9),rgba(11,16,32,.6));border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:space-between;padding:14px 20px}
.brand{font-weight:800;letter-spacing:.6px}
.brand span{color:var(--brand)}


.nav{display:flex;gap:18px;align-items:center}
.nav a{color:var(--fg);text-decoration:none;font-size:14px;opacity:.9}
.nav a.btn-small{padding:.45rem .8rem;border-radius:999px;border:1px solid var(--glass)}
.nav-toggle{display:none;background:none;border:0;color:var(--fg);font-size:22px}

.section{padding:80px 0}
.section-dark{background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));}
h1,h2,h3{margin:0 0 12px}
h1{font-size:clamp(28px,6vw,54px);line-height:1.05;font-weight:900}
h1 span{background: linear-gradient(90deg, var(--brand), var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent}
h2{font-size:clamp(22px,4vw,36px);font-weight:800}
.lead{color:var(--muted);max-width:640px}
.kicker{letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-size:12px;margin-bottom:8px}

.btn{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(90deg,var(--brand),var(--accent));color:white;text-decoration:none;border:0;border-radius:999px;padding:.9rem 1.2rem;font-weight:700;box-shadow:0 8px 24px rgba(127,145,255,.25);transition:.25s}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(127,145,255,.35)}
.btn.ghost{background:transparent;border:1px solid var(--glass);color:var(--fg)}
.btn.small{padding:.55rem .9rem;font-size:.9rem}

.grid.two{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.hero-art{position:relative;min-height:320px}
.orb{position:absolute;filter:blur(20px);opacity:.8;border-radius:50%}
.orb-a{width:220px;height:220px;background:radial-gradient(circle at 30% 30%, #7aa2ff, transparent 60%);top:20px;right:40px}
.orb-b{width:180px;height:180px;background:radial-gradient(circle at 30% 30%, #9f7bff, transparent 60%);bottom:10px;right:180px}
.orb-c{width:120px;height:120px;background:radial-gradient(circle at 30% 30%, #ff6b6b, transparent 60%);bottom:60px;right:40px}

.feature-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
.card{background:var(--glass);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:18px}
.card h3{font-size:18px;margin:0 0 6px}

.product-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:14px}
.p-card{background:var(--glass);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:10px}
.p-tag{align-self:flex-start;padding:.35rem .7rem;border-radius:999px;font-size:.75rem;opacity:.9;background:rgba(255,255,255,.06)}
.p-x39{background:linear-gradient(90deg,#6fb1fc33,#9f7bff33)}
.p-x49{background:linear-gradient(90deg,#9f7bff33,#ff6b6b33)}
.p-desc{color:var(--muted)}
.p-ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}

.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px}
blockquote{margin:0;padding:16px;border-radius:var(--radius);background:var(--glass);border:1px solid rgba(255,255,255,.06)}
blockquote footer{color:var(--muted);margin-top:8px;font-size:.9rem}
.note,.legal{color:var(--muted);font-size:.95rem}
.max-620{max-width:620px}

.resource-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:10px}
.r-card{display:block;background:var(--glass);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:18px;color:var(--fg);text-decoration:none}
.r-card:hover{border-color:rgba(159,123,255,.5)}

.contact-section .wrap{max-width:980px}
.contact-copy{margin-bottom:16px}
.contact-form{background:var(--glass);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:18px}
.contact-form .row{display:flex;gap:16px;margin-bottom:12px;flex-wrap:wrap}
.field{flex:1;display:flex;flex-direction:column;gap:6px}
.field.full{flex-basis:100%}
label{font-size:.9rem;opacity:.9}
input,textarea{background:#0e1530;border:1px solid rgba(255,255,255,.08);color:var(--fg);border-radius:12px;padding:.85rem}
input:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(122,162,255,.15)}
.row.end{justify-content:flex-end;align-items:center;gap:12px}
.form-status{font-size:.95rem;color:var(--muted)}

.site-footer{border-top:1px solid rgba(255,255,255,.06);padding:40px 0}
.site-footer p{margin:.25rem 0;color:var(--muted)}
/* === PRODUCT IMAGES (versión final funcional) === */
.p-card img.p-img {
  width: 75%;                /* antes 100% */
  height: auto;
  max-height: 150px;         /* antes 200px */
  object-fit: contain;
  display: block;
  margin: 0 auto 14px;       /* centra horizontalmente */
  border-radius: 12px;
  background-color: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  padding: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}


.p-card img.p-img:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}
/* === SECCIÓN SOBRE MÍ (debajo del Hero) === */
.about-section {
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  padding: 100px 0;
  border-top: 1px solid rgba(255,255,255,.05);
}

.about-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  flex-wrap: wrap;
}

.about-photo {
  flex: 1 1 300px;
  text-align: center;
}

.about-photo img {
  width: 260px;
  height: 260px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 0 60px rgba(159,123,255,0.25),
              0 0 100px rgba(122,162,255,0.2);
  border: 2px solid rgba(255,255,255,.1);
}

.about-text {
  flex: 2 1 400px;
  color: var(--fg);
}

.about-text h2 {
  font-size: clamp(26px, 4vw, 38px);
  margin-bottom: 18px;
  font-weight: 800;
}

.about-text p {
  color: var(--muted);
  margin-bottom: 18px;
  line-height: 1.6;
}
/* === FONDO GLOBAL DE ENERGÍA SUAVE === */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(40% 40% at 70% 10%, rgba(122,162,255,0.25), transparent 60%),
    radial-gradient(30% 30% at 20% 80%, rgba(159,123,255,0.2), transparent 60%),
    radial-gradient(25% 25% at 90% 60%, rgba(255,107,107,0.15), transparent 60%);
  z-index: -1; /* <-- aquí el cambio importante */
  pointer-events: none;
  filter: blur(40px);
}
/* === LOGO IMAGEN === */
.logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.logo-img {
  height: 20px;           /* puedes ajustar el tamaño */
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4)); /* efecto sutil */
  transition: transform 0.3s ease;
}

.logo-img:hover {
  transform: scale(1.03);
}
/* === LUZ EN ESQUINA SUPERIOR DERECHA DE CADA .r-card === */
.r-card {
  position: relative;
  overflow: hidden;
}

.r-card::after {
  content: "";
  position: absolute;
  /* súbela y pégala a la esquina */
  top: -40px;         /* antes -10px */
  right: -30px;       /* antes -10px */
  width: 160px;       /* antes 180px: tamaño más fino */
  height: 160px;
  background: url("https://justovargas.com/img/light.png") no-repeat top right;
  background-size: contain;   /* antes cover; evita que se “baje” por encaje */
  pointer-events: none;
  mix-blend-mode: screen;     /* opcional para integrarla con el fondo oscuro */
  opacity: .45;               /* ajusta a gusto o quítalo */
  z-index: 0;                 /* debajo del texto */
}

/* asegura que el texto quede encima de la luz */
.r-card > * {
  position: relative;
  z-index: 1;
}
/* === LUZ EN ESQUINA SUPERIOR DERECHA DE CADA TESTIMONIO (EXPERIENCIAS) === */
.testimonials blockquote {
  position: relative;
  overflow: hidden;
}

.testimonials blockquote::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -30px;
  width: 150px;
  height: 150px;
  background: url("https://justovargas.com/img/light.png") no-repeat top right;
  background-size: contain;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .45;
  z-index: 0;
}

/* asegura que el texto esté encima de la luz */
.testimonials blockquote > * {
  position: relative;
  z-index: 1;
}


/* Responsive */
@media (max-width: 940px){
  .grid.two{grid-template-columns:1fr}
  .feature-cards{grid-template-columns:1fr}
  .product-grid{grid-template-columns:1fr}
  .testimonials{grid-template-columns:1fr}
  .resource-grid{grid-template-columns:1fr}
  .nav{display:none}
  .nav.show{display:flex;flex-direction:column;position:absolute;top:60px;right:14px;background:var(--card);padding:14px;border-radius:12px;border:1px solid rgba(255,255,255,.08)}
  .nav-toggle{display:block}
}