/* =========================================================================
   hero-marca.css — EL HERO DE MARCA, UNA SOLA IMPLEMENTACION
   =========================================================================
   Creado el 2026-08-19. El bloque venia integro de `vendor-solucion.css`
   (donde se escribio el 2026-08-10 como "Hero Aurora"); aqui no se rediseno
   nada, se MUDO para que lo pueda usar tambien `vendor-micro.php`.

   QUE PINTA. El fondo del `.banner` (los 345 px de arriba) y el contenido que
   va dentro. Reusa el `.banner` que ya define `micrositios.css` —345 px de
   alto, `overflow:hidden`, `top:-60px`— y SOLO le cambia el fondo. El header
   (logo/nav) no se toca: sigue por encima con su z-index.

   POR QUE DEGRADADO Y NO FOTO (2026-08-19). Las 33 marcas traian
   `background:url(../micrositios/banner-*.jpg)`. Medido contra produccion el
   dia del cambio: 5.59 MB entre los 27 archivos vivos, 212 KB de promedio,
   538 KB el peor (Adobe), y sobredimensionados para una banda de 345 px
   (Quest venia en 2560x850). Peor que el peso: como es `background` de CSS y
   no un `<img>`, el navegador no lo descubre hasta que parsea la hoja, asi
   que el LCP de cada pagina de marca llegaba tarde y sin `preload` posible.
   El degradado son 0 bytes de red y pinta en el primer frame.

   Y ARREGLA UNA MENTIRA. Seis marcas se presentaban con la foto de otra:
   autodesk usaba banner-net2phone.jpg; suse, ibm y hpinc compartian
   banner-msp360cloudberry.jpg; broadcom usaba banner-symantec.jpg; iterati
   tiraba de ../img/soluciones.jpg. Y dos pares eran el MISMO archivo con
   distinto nombre (md5 identico): oracle=microfocus, apc=amazonaws. Un
   degradado derivado del token de marca no se puede asignar mal.

   DE DONDE SALE EL COLOR: `--vs-hero-a` / `--vs-hero-b` de `marca-tokens.css`,
   que hay que cargar ANTES que esta hoja. NO se usa `--vs-accent` crudo a
   proposito: aqui el texto va en blanco fijo, y con el acento sin oscurecer
   7 de las 34 marcas no llegaban al 4.5:1 de la AA. La medicion y los
   porcentajes estan en ese archivo.
   ========================================================================= */

.banner.vs-banner{
  isolation:isolate;
  background:
    linear-gradient(100deg, rgba(0,0,0,.36) 0%, rgba(0,0,0,.10) 48%, rgba(0,0,0,0) 76%),
    linear-gradient(125deg, var(--vs-hero-a), var(--vs-hero-b));
}
.banner.vs-banner::before{
  content:"";position:absolute;inset:-35%;z-index:-1;
  background:
    radial-gradient(38% 58% at 16% 24%, color-mix(in srgb,var(--vs-hero-b) 52%,#fff) 0%, transparent 60%),
    radial-gradient(42% 62% at 86% 14%, color-mix(in srgb,var(--vs-hero-b) 30%,#fff) 0%, transparent 55%),
    radial-gradient(52% 78% at 74% 96%, color-mix(in srgb,var(--vs-hero-b) 72%,#000) 0%, transparent 55%),
    radial-gradient(20% 30% at 40% 10%, rgba(255,255,255,.30) 0%, transparent 60%);
  filter:saturate(1.08);
  animation:vsAurora 20s ease-in-out infinite alternate;
}
@keyframes vsAurora{to{transform:translate3d(3%,2.5%,0) scale(1.09)}}
@media (prefers-reduced-motion:reduce){.banner.vs-banner::before{animation:none;}}

/* Contenido anclado al FONDO del banner: así siempre queda debajo del header
   (translúcido, viewport 43–133px) aunque el banner cambie de posición por vendor. */
.vs-banner .margenes{display:flex;align-items:flex-end;}
.vs-banner-inner{display:flex;align-items:flex-end;gap:28px;width:100%;padding:0 0 12px;color:#fff;}
.vs-banner-main{flex:1 1 auto;min-width:0;}
.vs-banner-kick{display:inline-block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;opacity:.92;margin-bottom:9px;}
.vs-banner-title{margin:0;font-size:28px;line-height:1.08;font-weight:800;letter-spacing:-.02em;color:#fff;text-transform:capitalize;text-shadow:0 1px 20px rgba(0,0,0,.18);max-width:22ch;width:auto;z-index:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.vs-banner-lead{margin:6px 0 0;font-size:14.5px;line-height:1.45;opacity:.95;max-width:52ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.vs-banner-actions{display:flex;align-items:center;gap:18px;margin-top:12px;flex-wrap:wrap;}
.vs-banner-btn{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--vs-accent-strong);font-weight:700;font-size:14px;padding:12px 24px;border-radius:999px;text-decoration:none;transition:transform .16s,box-shadow .16s;box-shadow:0 8px 24px -10px rgba(0,0,0,.4);}
.vs-banner-btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px -10px rgba(0,0,0,.5);color:var(--vs-accent-strong);}
.vs-banner-glass{flex:0 0 auto;background:rgba(255,255,255,.14);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.28);border-radius:16px;padding:16px 22px;color:#fff;text-align:right;}
.vs-banner-glass-label{font-size:10px;text-transform:uppercase;letter-spacing:.1em;opacity:.85;font-weight:600;}
.vs-banner-glass-value{font-size:20px;font-weight:800;letter-spacing:-.01em;margin-top:3px;white-space:nowrap;}
@media(max-width:720px){
  .vs-banner-inner{flex-direction:column;align-items:flex-start;gap:12px;padding:0 0 16px;}
  .vs-banner-title{font-size:24px;}
}

/* =========================================================
   VARIANTE HUB — el H1 de /marcas/{marca}/  (2026-08-19)
   =========================================================
   El titulo base esta afinado para el cruce, que es corto y nominal
   ("Microsoft — Analytics"): por eso lleva `capitalize` y una medida de 22ch
   a dos lineas. El hub tiene otro tipo de H1, una frase completa que ya
   estaba escrita y que NO se toca porque es la que trabaja en el SERP:
   "Microsoft en Mexico: licencias, soluciones y soporte".

   Sin esta variante pasan las dos cosas: `capitalize` lo convierte en
   "En Mexico: Licencias, Soluciones Y Soporte" —con la "Y" en mayuscula, que
   es lo que delata que fue el CSS y no un humano—, y las 22ch con
   `line-clamp:2` lo CORTAN con puntos suspensivos. Un H1 truncado en
   pantalla no es un detalle estetico: es la promesa de la pagina a medias.
   ========================================================= */
.vs-banner-title--hub{
  text-transform:none;
  max-width:34ch;
  -webkit-line-clamp:3;
}
@media(max-width:720px){
  .vs-banner-title--hub{max-width:100%;}
}

/* En el hub la tarjeta de vidrio existe (en el cruce el marcado no la usa). En
   escritorio hereda el `align-items:flex-end` del inner y queda a la altura del
   boton, que es lo que se busca. En movil el inner se vuelve columna y la
   tarjeta, con `text-align:right`, quedaba con su texto pegado al borde
   derecho de una caja alineada a la izquierda: se ve como un error de
   maquetado. Aqui se endereza. */
@media(max-width:720px){
  .vs-banner-inner--hub .vs-banner-glass{align-self:flex-start;text-align:left;}
}