:root{
  --vao-navy:#1e2a38;
  --vao-red:#d2414a;
  --vao-bdr:#e6e8eb;

  --wr-radius: 18px;
  --wr-shadow: 0 18px 50px rgba(0,0,0,.28);
  --wr-shadow-soft: 0 12px 30px rgba(0,0,0,.18);
}

/* HERO moderno + legible */
.vao-hero-wr{
  position: relative;
  color:#fff;
  background-image: var(--bg);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;

  min-height: clamp(420px, 52vh, 720px);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  overflow:hidden;
  isolation:isolate;
}

/* Overlay en capas (mejor legibilidad en thumbnails claros) */
.vao-hero-wr::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(1200px 520px at 50% 20%, rgba(0,0,0,.10) 0%, rgba(0,0,0,.60) 55%, rgba(0,0,0,.78) 100%),
    linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.70) 78%, rgba(0,0,0,.85) 100%);
  z-index:0;
}

.vao-hero__overlay{
  position:absolute;
  inset:0;
  /* ligera “vibra premium” sin depender del fondo */
  background:
    linear-gradient(120deg, rgba(210,65,74,.14) 0%, rgba(30,42,56,.16) 55%, rgba(0,0,0,0) 100%);
  z-index:1;
  pointer-events:none;
}

/* Contenedor */
.vao-hero__inner{
  position:relative;
  z-index:2;
  width:100%;
  padding: clamp(28px, 4vw, 56px) 0;
}

/* Caja de contenido (glass + sombra) */
.vao-hero__content{
  width:min(980px, 100%);
  margin: 0 auto;
  padding: clamp(18px, 3vw, 30px);
  border-radius: var(--wr-radius);

  background: rgba(17,24,39,.40);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--wr-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Pill superior */
.vao-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background: rgba(255,255,255,.92);
  color: var(--vao-navy);
  padding: 7px 12px;
  border-radius:999px;
  font-weight:900;
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom: 10px;
}

/* Título: más contraste y “peso” */
.vao-hero__title{
  color:#ffffff;
  font-size: clamp(1.9rem, 3.6vw, 3.2rem);
  font-weight: 900;
  margin: 0 0 12px;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* Meta en pills (mejor lectura y orden visual) */
.vao-hero__meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  list-style:none;
  margin: 0 0 18px;
  padding:0;
}

.vao-meta-pill{
  display:inline-flex;
  align-items:center;
  padding: 8px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  font-size: .92rem;
  font-weight: 700;
  box-shadow: var(--wr-shadow-soft);
}

/* CTAs */
.vao-hero__cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

/* Botones más premium */
.vao-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  padding: 11px 16px;
  border-radius: 12px;
  font-weight: 900;
  text-decoration:none;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, background .16s ease;
  will-change: transform;
}

.vao-btn--primary{
  color:#fff;
  background: linear-gradient(180deg, #d2414a 0%, #b0373f 100%);
  box-shadow: 0 14px 34px rgba(210,65,74,.32);
}

.vao-btn--ghost{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.28);
  color:#fff;
}

.vao-btn--primary:hover,
.vao-btn--ghost:hover{
  transform: translateY(-2px);
  filter: brightness(1.05);
}

.vao-btn--primary:hover{
  box-shadow: 0 18px 46px rgba(210,65,74,.42);
}

.vao-btn--ghost:hover{
  box-shadow: 0 16px 40px rgba(0,0,0,.24);
}

/* Responsive fino */
@media (max-width: 768px){
  .vao-hero__content{
    border-radius: 16px;
    padding: 18px;
  }
  .vao-meta-pill{ font-size: .9rem; }
}