:root{
  --navy:#0A3D62;
  --navy-2:#0F2740;
  --bone:#F5F7FA;
  --accent:#F79F1F;
  --ink:#0d1b2a;
}
.nosotros-ztarkweb .container{ max-width:1100px; margin:0 auto; padding:0 20px }

/* HERO */
.n-hero{
  position:relative;
  background: radial-gradient(1200px 700px at 70% -10%, rgba(255,255,255,.06), transparent 60%),
              linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
  color:#fff;
  padding:72px 0 56px;
  overflow:hidden;
}
.n-hero .badge{
  display:inline-block; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  padding:6px 10px; border-radius:999px; font-weight:700; margin-bottom:10px
}
.n-hero h1{ font-size:clamp(28px,5vw,48px); margin:0 0 10px; line-height:1.1 }
.n-hero h1 .muted{ opacity:.75; font-weight:400; font-size:.8em }
.n-hero p{ opacity:.95; max-width:56ch }
.hero-grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap:28px; align-items:center }
.hero-cta{ display:flex; gap:12px; margin:16px 0 10px }
.hero-badges{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 0; padding:0; list-style:none }
.hero-badges li{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); padding:8px 12px; border-radius:999px }

/* foto */
.hero-photo{
  margin:0; text-align:center; position:relative; filter:drop-shadow(0 24px 48px rgba(0,0,0,.35));
}
.hero-photo img{
  width:320px; height:320px; object-fit:cover; border-radius:50%;
  border:4px solid rgba(255,255,255,.14);
  box-shadow:0 0 0 8px rgba(247,159,31,.12), inset 0 0 60px rgba(255,255,255,.06);
  transition:transform .25s ease;
}
.hero-photo figcaption{ margin-top:10px; opacity:.85 }

/* chips flotantes */
.c-hero__fx{ position:absolute; inset:0; pointer-events:none }
.c-hero__fx .chip{
  position:absolute; left:var(--x); top:var(--y);
  transform:translate(-50%,-50%) scale(var(--sz,1));
  padding:8px 12px; border-radius:999px;
  font-weight:800; font-size:12px; color:rgba(255,255,255,.9);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2);
  animation:floatY var(--d,16s) ease-in-out infinite alternate;
  transition: left var(--t,13s) linear, top var(--t,13s) linear, transform .15s ease;
  opacity:.3; backdrop-filter: blur(2px);
}
@keyframes floatY{ 0%{transform:translate(-50%,-50%) translateY(-8px) scale(var(--sz,1))}
  100%{transform:translate(-50%,-50%) translateY(10px) scale(var(--sz,1))} }

/* BOTONES */
.btn{ display:inline-block; padding:12px 18px; border-radius:12px; font-weight:800; text-decoration:none; cursor:pointer; transition:.2s ease }
.btn--primary{ background:#fff; color:var(--navy); border:2px solid #fff }
.btn--primary:hover{ transform:translateY(-1px); opacity:.95 }
.btn--ghost{ background:transparent; border:2px solid #fff; color:#fff }
.btn--ghost:hover{ background:#fff; color:var(--navy) }
.btn--whatsapp{ background:#25D366; color:#fff; border:0 }
.btn--whatsapp:hover{ filter:brightness(.95); transform:translateY(-1px) }

/* STATS */
.n-stats{ background:var(--bone); padding:26px 0 }
.stats-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:14px }
.stat{
  background:#fff; border-radius:14px; padding:18px; text-align:center;
  box-shadow:0 12px 28px rgba(10,31,51,.06); border:1px solid #eef2f7;
  font-weight:800; color:var(--navy)
}
.stat b{ display:block; font-size:clamp(26px,4.5vw,42px); line-height:1 }
.stat small{ display:block; opacity:.75 }

/* EXPERIENCIA */
.n-experience{ background:#fff; padding:48px 0 }
.n-experience h2{ text-align:center; margin:0 0 18px }
.h-timeline{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(280px, 1fr);
  gap:16px; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:4px
}
.t-card{
  scroll-snap-align:start; border-radius:14px; background:linear-gradient(180deg,#0A3D62 0%,#0F2740 100%);
  color:#fff; padding:18px; border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 44px rgba(10,31,51,.25); min-height:190px
}
.t-card h3{ margin:0 0 6px; font-size:18px }
.t-card h3 small{ font-weight:400; opacity:.85 }
.t-card p{ margin:0 0 8px; opacity:.9 }
.pill{ display:inline-block; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); padding:6px 10px; border-radius:999px }

/* SKILLS */
.n-skills{ background:linear-gradient(180deg,#0F2740,#0A3D62); color:#fff; padding:48px 0 }
.n-skills h2{ text-align:center; margin:0 0 18px }
.skills-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:16px; margin-bottom:16px }
.ring{
  --val:80;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); border-radius:16px;
  text-align:center; padding:18px; position:relative;
}
.ring::before{
  content:""; position:absolute; inset:14px; border-radius:50%;
  background:
  conic-gradient(var(--accent) calc(var(--val)*1%), rgba(255,255,255,.12) 0);
  -webkit-mask: radial-gradient(circle at center, transparent 54%, #000 55%);
          mask: radial-gradient(circle at center, transparent 54%, #000 55%);
}
.ring span{ display:block; font-weight:800; margin-top:92px }
.ring small{ opacity:.9 }
.stack{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; list-style:none; padding:0; margin:0; margin-top: 10px; }
.stack li{ background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); padding:8px 12px; border-radius:999px }

/* LOGROS */
.n-achievements{ background:#fff; padding:48px 0 }
.ach-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:16px }
.ach{
  background:#fff; border:1px solid #eef2f7; border-radius:14px; padding:16px;
  box-shadow:0 14px 28px rgba(10,31,51,.08)
}

/* REFERENCIAS */
.n-refs{ background:var(--bone); padding:48px 0 }
.refs-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px }
.ref{
  background:#fff; border:1px solid #eef2f7; border-radius:14px; padding:16px;
  box-shadow:0 12px 26px rgba(10,31,51,.06)
}
.ref a{ color:var(--navy); text-decoration:none; font-weight:800 }

/* CTA */
.n-cta{ background:linear-gradient(180deg, var(--navy), var(--navy-2)); color:#fff; text-align:center; padding:50px 0 }
.n-cta .cta-actions{ display:flex; gap:12px; justify-content:center; margin-top:10px }

/* Reveal (animación entrada) */
[data-reveal]{ opacity:0; transform:translateY(18px); transition: .5s ease }
.revealed{ opacity:1; transform:none }

/* Responsive */
@media (max-width: 960px){
  .hero-grid{ grid-template-columns:1fr }
  .hero-photo img{ width:260px; height:260px }
  .stats-grid{ grid-template-columns: repeat(2,1fr) }
  .skills-grid{ grid-template-columns: repeat(2,1fr) }
  .ach-grid{ grid-template-columns: repeat(2,1fr) }
  .refs-grid{ grid-template-columns: 1fr 1fr }
}
@media (max-width: 560px){
  .stats-grid, .skills-grid, .ach-grid, .refs-grid{ grid-template-columns:1fr }
  .hero-cta{ flex-direction:column }
  .btn{ width:100%; text-align:center }
  .c-hero__fx .chip{ opacity:.2 }
}


.n-skills {
  background: linear-gradient(180deg, #0A3D62, #0F2740);
  padding: 60px 20px;
  color: #fff;
}

.n-skills h2 {
  text-align: center;
  margin-bottom: 40px;
  font-size: 2rem;
}

.skills-grid {
  display: grid;
  gap: 28px;
  max-width: 800px;
  margin: auto;
}

.skill {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.skill-info {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
}

.skill-bar {
  position: relative;
  height: 14px;
  background: rgba(255,255,255,.1);
  border-radius: 999px;
  overflow: hidden;
}

.skill-fill {
  height: 100%;
  width: var(--val, 0);
  background: linear-gradient(90deg, #F79F1F, #FFD97D);
  border-radius: inherit;
  animation: fillBar 2s ease forwards;
}

@keyframes fillBar {
  from { width: 0; }
  to   { width: var(--val, 0); }
}

/**/

/* ===== Experiencia / Slider infinito ===== */
.n-experience{
  padding: 56px 0;
  background: linear-gradient(180deg, #0A3D62, #0F2740);
  color: #fff;
}
.n-experience h2{
  text-align:center;
  margin-bottom: 28px;
  font-size: clamp(1.6rem, 2.2vw, 2.1rem);
}

/* Contenedor del carril */
.exp-marquee{
  overflow: hidden;
  position: relative;
  padding: 8px 0 4px;
}

/* Fade en bordes (opcional y muy suave) */
.exp-marquee::before,
.exp-marquee::after{
  content:"";
  position:absolute; top:0; bottom:0; width:40px; z-index:2; pointer-events:none;
}
.exp-marquee::before{
  left:0;
  background: linear-gradient(to right, rgba(10,15,25, .85), transparent);
}
.exp-marquee::after{
  right:0;
  background: linear-gradient(to left, rgba(10,15,25, .85), transparent);
}

/* Pista */
.exp-track{
  display:flex;
  gap: 18px;
  width: max-content;
  will-change: transform;
  list-style: none;
  /* animate con duración calculada en JS (var --dur) */
  animation: expScroll var(--dur, 30s) linear infinite;
}

/* Pausa al hover para que el usuario lea con calma */
.exp-marquee:hover .exp-track{
  animation-play-state: paused;
}

/* Loop perfecto: la pista (duplicada) se mueve media “longitud” */
@keyframes expScroll{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}

/* Tarjetas */
.exp-card{
  flex: 0 0 340px; /* ancho fijo para loop estable */
  min-height: 180px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 18px 18px 16px;
  color: #fff;
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
  backdrop-filter: blur(2px);
}

.exp-card h3{ 
  margin: 0 0 8px; 
  font-size: 1.15rem; 
  line-height:1.2; 
}
.exp-card h3 small{ 
  display:inline-block; 
  margin-left:6px; 
  opacity:.8; 
  font-weight:600; 
}
.exp-card p{ 
  margin: 0 0 12px; 
  opacity: .92; 
  line-height: 1.48; 
}
.exp-card .pill{
  display: inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.08);
  font-weight: 700;
}

/* Hover cute */
.exp-card:hover{
  transform: translateY(-6px);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  border-color: rgba(247,159,31,.5);
  box-shadow: 0 16px 34px rgba(10,61,98,.45);
}

/* Responsive */
@media (max-width: 720px){
  .exp-card{ flex-basis: 78vw; }
}