:root{
  --bg:          #0C1420;
  --bg-2:        #101A29;
  --surface:     #142032;
  --surface-2:   #1B2B41;
  --line:        rgba(226,238,252,.11);
  --line-strong: rgba(226,238,252,.24);

  --text:        #E8F1FB;
  --text-2:      #B4C6DC;
  --muted:       #7C90A8;

  --accent:      #4FD1C5;
  --accent-2:    #7DE8DC;
  --accent-deep: #2A9D92;
  --on-accent:   #06121B;
  --glow:        rgba(79,209,197,.34);
  --glow-soft:   rgba(79,209,197,.11);

  --vidrio:        linear-gradient(165deg,rgba(226,238,252,.075),rgba(226,238,252,.02));
  --vidrio-fuerte: linear-gradient(165deg,rgba(226,238,252,.13),rgba(226,238,252,.045));
  --campo-bg:      rgba(12,20,32,.55);

  --tracking-h:  -.022em;

  --radius:      6px;
  --radius-sm:   4px;
  --radius-pill: 999px;

  --sh-depth: 0 8px 34px rgba(0,0,0,.66);
  --sh-lit:   0 0 26px rgba(79,209,197,.30);
  --sh-hover: 0 0 24px rgba(125,232,220,.8);
  --sh-suave: 0 2px 14px rgba(0,0,0,.55);
  --sombra-panel: 0 40px 90px -60px #000;

  --grano-op: .055;
  --vineta: radial-gradient(125% 96% at 50% 42%, transparent 44%, rgba(3,8,16,.56) 100%);
}

.bg-static{ opacity:.55 }
.hero__grid{ display:none }

.h1, .h2, .h3{
  font-family:'Archivo', Inter, system-ui, sans-serif;
  font-weight:600;
  text-transform:uppercase;
  font-feature-settings:'liga' 0;
  font-variant-numeric:lining-nums;
}

.h1{ font-size:clamp(2rem,6.2vw,5.6rem); line-height:1.02; letter-spacing:.012em; max-width:12.5em }
.h2{ font-size:clamp(1.5rem,3.2vw,2.7rem); line-height:1.1;  letter-spacing:.05em;  max-width:15em }
.h3{ font-size:clamp(1rem,1.6vw,1.25rem);  line-height:1.25; letter-spacing:.075em; font-weight:600 }

.h1 em, .h2 em, .h3 em{
  font-family:inherit; font-style:normal; font-weight:300;
  letter-spacing:inherit; color:var(--accent-2);
}

.lead{ max-width:58ch }

.eyebrow{
  font-family:'Archivo', Inter, system-ui, sans-serif;
  color:var(--accent); letter-spacing:.2em; font-weight:500;
}

.hero{ padding-top:calc(var(--header-h) + clamp(3rem,9vh,6rem)) }
.hero__banda img{ filter:saturate(.9) contrast(1.04) brightness(.92) }

.hero__banda{ height:clamp(380px, 76vh, 820px) }

@media (max-width:760px){
  .hero__banda img{ object-position:25% 50% }
}

.hero__banda::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,
    var(--bg) 0%,
    rgba(12,20,32,.55) 9%,
    rgba(12,20,32,0)   26%,
    rgba(12,20,32,0)   68%,
    rgba(12,20,32,.72) 92%,
    var(--bg) 100%);
}

.galeria img, .hero__media img{
  filter:saturate(.86) brightness(.88) contrast(1.06);
}

.credenciales b{
  font-variant-numeric:tabular-nums;
  color:var(--accent-2);
  letter-spacing:-.02em;
}

.tarjeta{ position:relative; overflow:hidden }
.tarjeta::before{
  content:''; position:absolute; inset:0 auto auto 0;
  width:100%; height:2px;
  background:linear-gradient(90deg,var(--accent),transparent);
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .6s var(--ease);
}
@media (hover:hover){ .tarjeta:hover::before{ transform:scaleX(1) } }

.paso__punto{ box-shadow:0 0 0 4px rgba(79,209,197,.14) }

.form{ backdrop-filter:blur(6px) }

.reflejo{
  --rf-1: var(--text);
  --rf-2: var(--accent-2);
  --rf-3: var(--text);
  --rf-luz: 8s;
}

.tarjeta-gira{
  --gira-fondo:rgba(79,209,197,.16);
  --gira-color:var(--accent);
  --gira-tinta:#06121B;
}
.tarjeta-gira .gira__frente{
  border-color:rgba(79,209,197,.30);

  box-shadow:inset 0 1px 0 rgba(125,232,220,.28);
}

.gira__dorso h4{ font-weight:600; letter-spacing:-.025em }

.fichas{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(.8rem,1.8vw,1.2rem);
  margin-top:clamp(2rem,4vw,3rem);
}
@media (max-width:1080px){ .fichas{ grid-template-columns:1fr 1fr } }
@media (max-width:560px) { .fichas{ grid-template-columns:1fr } }

.ficha{
  padding:clamp(1.1rem,2.2vw,1.5rem);
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--vidrio);

  transition:border-color .5s var(--ease);
}
@media (hover:hover){
  .ficha:hover{ border-color:var(--accent); background:var(--vidrio-fuerte) }
}
.ficha__cab{ display:flex; align-items:center; gap:.7rem; margin-bottom:.9rem }
.ficha__quien{ display:flex; flex-direction:column; line-height:1.3 }
.ficha__quien b{ font-size:.95rem; font-weight:600; letter-spacing:-.01em }

.ficha__quien > span{ font-size:.76rem; color:var(--muted); letter-spacing:.04em }
.ficha p{ font-size:.88rem; color:var(--text-2); line-height:1.6 }