:root {
  /* Alto de la barra fija en desktop. Lo leen .ico-header y .carousel. */
  --vb-h: 92px;

  /* Altura del header móvil en cada breakpoint de header.css (80/70/65px).
     La tarjeta la usa como margin-top para quedar justo debajo del header fijo. */
  --vb-header-mobile: 80px;

  /* Colores (muestreados de banner.png) */
  --vb-navy: #02214e;    /* fondo dominante */
  --vb-navy-top: #01204d;
  --vb-glow-right: #043270;
  --vb-glow-left: #02568b;
  --vb-cyan: #00e3fe;
  --vb-cyan-num: #03d7fe;
  --vb-btn-a: #00e4fe;
  --vb-btn-b: #2694fe;
  --vb-btn-text: #012156;
  --vb-text: #ffffff;
}


.vbanner [hidden] {
  display: none;
}

@media (min-width: 1001px) {

  /* ---------- Compensaciones del layout existente ---------- */

  /* El header fijo baja para dejar sitio a la barra. */
  .ico-header {
    top: var(--vb-h);
  }

  main {
    padding-top: var(--vb-h);
  }

  body #icon-container {
    top: calc(150px + var(--vb-h) + 30px);
  }

  /* ---------- Barra fija, a todo el ancho ---------- */

  .vbanner {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--vb-h);
    z-index: 1001; /* por encima del header (1000) */
  }

  .vbanner__card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 26px;
    width: 100%;
    height: 100%;
    padding: 0 32px;
    overflow: hidden;
    color: var(--vb-text);
    background:
      radial-gradient(circle at 88% 50%, rgba(4, 50, 112, 0.95) 0%, rgba(4, 50, 112, 0) 58%),
      radial-gradient(circle at 4% 90%, rgba(2, 86, 139, 0.38) 0%, rgba(2, 86, 139, 0) 52%),
      linear-gradient(180deg, var(--vb-navy-top) 0%, var(--vb-navy) 55%, #02224f 100%);
  }

  /* Textura de puntos en la esquina inferior izquierda (como en la referencia). */
  .vbanner__card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(0, 227, 254, 0.18) 1px, transparent 1.2px);
    background-size: 10px 10px;
    -webkit-mask-image: radial-gradient(circle at 1% 100%, #000 0%, transparent 28%);
    mask-image: radial-gradient(circle at 1% 100%, #000 0%, transparent 28%);
  }

  /* ---------- Zona 1: ubicación ---------- */

  .vb-loc {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 0 0 auto;
  }

  /* Anillo dibujado en CSS: pin-ubicacion.png es un pin suelto, sin anillo propio. */
  .vb-loc__ring {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: radial-gradient(circle, #06305f 0%, #01204d 100%);
    box-shadow:
      inset 0 0 0 2px var(--vb-cyan),
      0 0 14px rgba(0, 227, 254, 0.45);
  }

  /* El PNG va recortado a su contenido (40x52), así que el tamaño es exacto. */
  .vb-loc__ring img {
    width: 20px;
    height: 26px;
  }

  .vb-loc__city {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    white-space: nowrap;
  }

  .vb-loc__tag {
    margin-top: 2px;
    font-size: 12px;
    font-weight: 600;
    color: var(--vb-cyan);
    white-space: nowrap;
  }

  /* ---------- Divisor ---------- */

  .vb-div {
    flex: 0 0 auto;
    width: 1px;
    height: 46px;
    background: linear-gradient(180deg, rgba(0, 227, 254, 0) 0%, rgba(0, 227, 254, 0.45) 50%, rgba(0, 227, 254, 0) 100%);
  }

  /* ---------- Zona 2: dato ---------- */

  .vb-data {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
  }

  /* Sin anillo ni glow en CSS: icono-busqueda.png trae los dos horneados.
     El PNG es de 104x103, o sea 2x de esta caja. Es un icono de LÍNEA con el
     trazo en ~1.3px al pintarse, que solo se sostiene por el brillo que lleva
     encima; el anillo ocupa el 92% del cuadro y ese 8% de aire es justamente
     donde se derrama el halo. Si se reemplaza el PNG por uno recortado al ras
     del anillo, el halo se va a ver cortado en los bordes. */
  .vb-data__ic {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
  }

  .vb-data__copy {
    min-width: 0;
  }

  .vb-data__eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.85);
  }

  /* max-width fuerza el quiebre a 2 líneas, como en el diseño de referencia,
     en vez de estirarse en una sola línea y dejar un hueco. */
  .vb-data__line {
    display: block;
    max-width: 34ch;
    margin-top: 1px;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.3;
  }

  .vb-data__count {
    margin-right: 4px;
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--vb-cyan-num);
    vertical-align: -2px;
  }

  /* ---------- Zona 3: CTA ---------- */

  .vb-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    margin-left: auto;
    height: 46px;
    padding: 0 24px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--vb-btn-a) 0%, var(--vb-btn-b) 100%);
    color: var(--vb-btn-text);
    font-size: 14.5px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: 0 4px 18px rgba(0, 180, 255, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  }

  .vb-cta:hover,
  .vb-cta:focus-visible {
    color: var(--vb-btn-text);
    text-decoration: none;
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 6px 22px rgba(0, 180, 255, 0.5);
  }

  .vb-cta:focus-visible {
    outline: 2px solid var(--vb-text);
    outline-offset: 2px;
  }

  .vb-cta svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
  }

  .vb-cta__arrow {
    transition: transform 0.2s ease;
  }

  .vb-cta:hover .vb-cta__arrow {
    transform: translateX(3px);
  }

  /* ---------- Zona 4: Vicky ---------- */

  .vb-avatar {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
    background: radial-gradient(circle, #0a3a72 0%, #01204d 100%);
    box-shadow:
      inset 0 0 0 3px var(--vb-cyan),
      0 0 20px rgba(0, 227, 254, 0.5);
  }

  .vb-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* ---------- Ajuste para pantallas de escritorio angostas ---------- */

  @media (max-width: 1240px) {
    .vbanner__card {
      gap: 16px;
      padding: 0 18px;
    }

    .vb-data__ic {
      width: 46px;
      height: 46px;
    }

    .vb-data__count {
      font-size: 22px;
    }

    .vb-loc__city {
      font-size: 15px;
    }

    .vb-cta {
      padding: 0 18px;
      font-size: 13.5px;
    }
  }
}

/* ==========================================================================
   MÓVIL Y TABLET (<=1000px) · tarjeta vertical en flujo
   Mismo HTML que desktop; el orden se reconstruye con grid-template-areas.
   ========================================================================== */

@media (max-width: 1000px) {

  main > .carousel,
  main > .carousel-mobile,
  main > .port-nosotros,
  main > .port-iso-9k,
  main > .port-iso-14k,
  main > .port-iso-45k,
  main > .port-iso-37k,
  main > .services-carousel,
  main > .empresa-section,
  main > .blog-hero,
  main > .blog-article-page {
    padding-top: 16px;
    margin-top: 0;
  }

  .vbanner {
    display: block;
    /* relative + z-index solo para ganarle a los flotantes (z-index 200): en
       flujo, un elemento estático no puede taparlos. No desplaza nada. */
    position: relative;
    z-index: 201;
    --vb-gutter: 14px;
    padding: calc(var(--vb-header-mobile) + var(--vb-gutter)) var(--vb-gutter) var(--vb-gutter);
    background: #f5f9ef;
  }

  body #icon-container {
    top: auto;
    bottom: 110px;
  }

  .vbanner__card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "loc   vicky"
      "sep   vicky"
      "data  vicky"
      "cta   vicky";
    align-items: center;
    gap: 14px 16px;
    padding: 20px;
    border-radius: 24px;
    overflow: hidden;
    color: var(--vb-text);
    background:
      radial-gradient(circle at 92% 12%, rgba(4, 50, 112, 0.9) 0%, rgba(4, 50, 112, 0) 55%),
      radial-gradient(circle at 6% 92%, rgba(2, 86, 139, 0.3) 0%, rgba(2, 86, 139, 0) 50%),
      linear-gradient(180deg, var(--vb-navy-top) 0%, var(--vb-navy) 60%, #02224f 100%);
  }

  .vbanner__card:has(.vb-data[hidden]) {
    grid-template-areas:
      "loc vicky"
      "cta vicky";
  }

  /* Textura de puntos, aquí arriba a la derecha (como en el diseño). */
  .vbanner__card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(0, 227, 254, 0.2) 1px, transparent 1.2px);
    background-size: 10px 10px;
    -webkit-mask-image: radial-gradient(circle at 100% 0%, #000 0%, transparent 34%);
    mask-image: radial-gradient(circle at 100% 0%, #000 0%, transparent 34%);
  }

  /* ---------- Ubicación ---------- */

  .vb-loc {
    grid-area: loc;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }

  .vb-loc__ring {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--vb-cyan);
  }

  .vb-loc__ring img {
    width: 18px;
    height: 23px;
  }

  .vb-loc__city {
    font-size: clamp(19px, 5.2vw, 27px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    /* El nombre puede ser largo ("Lima Metropolitana"): que parta en 2 líneas
       en vez de desbordar. */
    white-space: normal;
    overflow-wrap: break-word;
  }

  /* La etiqueta "Ubicación detectada" no aparece en la versión móvil. */
  .vb-loc__tag {
    display: none;
  }

  /* ---------- Separador, ahora horizontal ---------- */

  .vb-div {
    grid-area: sep;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(0, 227, 254, 0.45) 0%, rgba(0, 227, 254, 0.06) 100%);
  }

  /* ---------- Dato ---------- */

  .vb-data {
    grid-area: data;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
  }

  .vb-data__ic {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    margin-top: 2px;
  }

  /* "Hoy existen" se omite: el diseño móvil empieza por la cifra. */
  .vb-data__eyebrow {
    display: none;
  }

  .vb-data__line {
    display: block;
    max-width: none;
    margin-top: 0;
  }

  .vb-data__count {
    display: block;
    margin: 0 0 2px;
    font-size: clamp(32px, 9vw, 46px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    vertical-align: baseline;
  }

  .vb-data__text {
    display: block;
    font-size: clamp(13px, 3.6vw, 16px);
    font-weight: 500;
    line-height: 1.3;
  }

  /* La cifra pasa a línea propia, así que la frase debe empezar en mayúscula. */
  .vb-data__text::first-letter {
    text-transform: uppercase;
  }

  /* ---------- CTA a todo el ancho ---------- */

  .vb-cta {
    grid-area: cta;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 52px;
    margin-left: 0;
    padding: 0 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--vb-btn-a) 0%, var(--vb-btn-b) 100%);
    color: var(--vb-btn-text);
    font-size: clamp(14px, 3.9vw, 17px);
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 18px rgba(0, 180, 255, 0.35);
  }

  /* Las reglas de :hover viven en el bloque de escritorio; en móvil no aplican,
     pero el foco sí hace falta para navegación con teclado en tablets. */
  .vb-cta:focus-visible {
    outline: 2px solid var(--vb-text);
    outline-offset: 2px;
  }

  .vb-cta svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
  }

  /* ---------- Vicky, a la derecha y centrada ---------- */

  .vb-avatar {
    grid-area: vicky;
    align-self: center;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: clamp(96px, 30vw, 150px);
    height: clamp(96px, 30vw, 150px);
    border-radius: 50%;
    overflow: hidden;
    background: radial-gradient(circle, #0a3a72 0%, #01204d 100%);
    box-shadow:
      inset 0 0 0 4px var(--vb-cyan),
      0 0 22px rgba(0, 227, 254, 0.45);
  }

  .vb-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* Los dos breakpoints en que header.css reduce el header móvil: la tarjeta
   ajusta su margin-top para seguir quedando justo debajo. */
@media (max-width: 600px) {
  :root {
    --vb-header-mobile: 70px;
  }

  /* Solo el margen lateral. NO usar el shorthand `padding` aquí: borraría el
     hueco que deja pasar el header fijo. */
  .vbanner {
    --vb-gutter: 10px;
  }

  .vbanner__card {
    padding: 16px;
    gap: 12px 12px;
  }
}

@media (max-width: 400px) {
  :root {
    --vb-header-mobile: 65px;
  }

  .vbanner__card {
    padding: 14px;
  }

  .vb-loc__ring {
    width: 36px;
    height: 36px;
  }

  .vb-data__ic {
    width: 38px;
    height: 38px;
  }

  .vb-cta {
    height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vb-cta,
  .vb-cta__arrow {
    transition: none;
  }

  .vb-cta:hover {
    transform: none;
  }

  .vb-cta:hover .vb-cta__arrow {
    transform: none;
  }
}