/* ============================================================
   VerticalHeroBanner.css — Estilos propios del widget VerticalHeroBanner
   Bticino Mx · Sitefinity Renderer
   ============================================================

   Widget GENERAL, reutilizable como Hero de cualquier página de vertiente (Productos, Marcas,
   Soluciones, etc.) -- se identificó por primera vez en el nodo "HERO" (499:29606) del Figma de
   Productos, pero no es exclusivo de esa vertiente. NO es el Hero del Home (ese es HeroBanner.css).

   NO se declara font-family. La tipografía la resuelve site.css reasignando --bs-body-font-family
   en :root, y el body la hereda.

   Todos los tamaños, colores y espaciados de este archivo salen de get_design_context sobre el nodo
   499:29606 -- no son aproximaciones a ojo del screenshot.

   El alto real de la sección es 471px sobre una mesa de trabajo de 1280 -- todos los % de este
   archivo están calculados contra esa proporción.

   Sin velo ni scrim propios: el contraste del texto sobre la imagen lo tiene que traer ya resuelto
   la imagen que cargue el editor, no una capa que ponga el widget.

   Estándar de fondo/contenido del sitio (site.css, sección "Contenedor centrado"): a diferencia
   del HeroBanner del Home (que se acota completo, fondo incluido), este Hero va a sangre completa
   -- así están el resto de las secciones de Productos (QuoteBanner, HelpCalloutSection) y así lo
   confirmó el usuario. Solo el CONTENIDO (.VerticalHeroBanner-content) se centra dentro del techo
   del sitio.

   Breakpoints del @media propio de este widget: mobile hasta 500px, tablet hasta 1024px, laptop
   hasta 1200px, desktop de 1201px en adelante sin @media.

   En escritorio y tablet el contenido se centra VERTICALMENTE dentro de la sección: la imagen de
   fondo es más alta que el contenido y todo el aire sobrante quedaba abajo. En mobile sigue anclado
   arriba con su padding-top fijo. La letra del título se ajusta al ancho real
   (VerticalHeroBanner.js, fitTitle); ninguna caja cambia de tamaño.
   ============================================================ */

.VerticalHeroBanner {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    /* clamp() y no un 560px fijo: ese valor sale de una mesa de trabajo de 1280px de ancho
       (560/1280 = 43.75% de proporción). El fondo de esta sección va a sangre completa (ver el
       comentario de arriba) y puede llegar a medir más de 1280px reales -- con un alto fijo, la
       sección se ve más achatada de lo que se ve en Figma en cualquier pantalla más ancha que esa
       mesa de trabajo, el mismo problema que ya se corrigió en QuoteBanner. El piso de 560px es el
       de Figma; el techo de 760px evita una sección absurdamente alta en un monitor ultrawide. */
    min-height: clamp(471px, 36.8vw, 640px);
    background-color: #1a1d24; /* Color de respaldo si se usa sin imagen de fondo. */
    overflow: hidden;
    display: flex;
    /* Contenido centrado verticalmente. No recorta nunca: la sección no tiene height fijo sino
       min-height, así que crece si el contenido pasa ese piso. En mobile vuelve a flex-start. */
    align-items: center;
}

.VerticalHeroBanner-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none; /* Anula el max-width:100% que Bootstrap le pone a las imágenes. */
    object-fit: cover;
    object-position: center;
    pointer-events: none;
}

/* Recuadro traslúcido decorativo (nodo "cuadro de contraste"). Tamaño y posición 100% fijos --
   igual en cualquier vertiente, sin importar el texto real. Coincide con el alto fijo de
   VerticalHeroBanner-headline (más abajo): la letra se ajusta adentro, el recuadro no se mueve.

   Se posiciona contra la caja de contenido y NO contra la sección: al centrar el contenido, un
   recuadro anclado a la sección se quedaba arriba y dejaba de coincidir con el título. El borde
   superior de la caja de contenido coincide con el de la sección, así que top y height son los
   mismos valores de siempre.

   left:0 sigue cayendo sobre el borde real de la sección (la caja de contenido arranca en x:0 y
   solo tiene padding). El ancho, en cambio, ahora es un % de la caja de contenido y no de la
   sección: 78.52% de la sección / 75.63% que mide la caja = 103.82%. */
.VerticalHeroBanner-offset-panel {
    position: absolute;
    /* Detrás del texto y delante de la imagen: la caja de contenido tiene z-index propio, así que
       un valor negativo acá no saca al recuadro de ese contexto de apilado. */
    z-index: -1;
    left: 0;
    width: 103.82%;
    top: 64px;
    height: 341px;
    background-color: rgba(36, 55, 70, 0.8);
    border-radius: 0 10px 10px 0;
    pointer-events: none;
}

/* Línea de acento decorativa, esquina inferior izquierda (557px/560px de alto de la mesa de
   trabajo -- prácticamente pegada al borde). Ancho fijo del diseño (384px), no proporcional al
   ancho de la sección. */
.VerticalHeroBanner-accent-line {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 384px;
    max-width: 30%;
    height: 3px;
    background-color: #ff5a1f;
    pointer-events: none;
}

/* Franja de fondo de la etiqueta vertical, del ancho del nodo "etiqueta vertical" (46px) del
   diseño, a todo el alto de la sección. Es solo el fondo -- el texto va en su propia caja
   (side-label-wrap) posicionada de forma independiente, no centrada dentro de esta franja. */
.VerticalHeroBanner-side-label-strip {
    position: absolute;
    inset: 0 0 0 auto;
    width: 46px;
    background-color: rgba(15, 15, 18, 0.3);
    pointer-events: none;
}

/* Caja de posicionamiento del texto rotado. El nodo "Frame" 820:36713 del Figma da
   left:1263px, top:302px, w:13px, h:218px sobre un frame de 1280×471 -- pero top+height=520px,
   MÁS de los 471px del propio frame. Es un desborde real del diseño (invisible en Figma porque el
   texto real es angosto y nunca llega a ocupar toda la caja), que si se copia literal empuja la
   caja entera por debajo del Hero.

   Se ancla desde ABAJO (bottom) en vez de desde arriba (top) para que nunca se salga de la
   sección, conservando la idea del diseño (la etiqueta va en la mitad inferior, no centrada) sin
   heredar el desborde: bottom:4% deja un margen de seguridad chico, height se achica un poco
   (40% en vez de 46.28%) para que el total (4%+40%=44%) quede bien lejos del 100%. */
.VerticalHeroBanner-side-label-wrap {
    position: absolute;
    left: 98.67%; /* 1263px / 1280px. */
    bottom: 4%;
    width: 1.02%; /* 13px / 1280px. */
    height: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* Texto vertical rotado, centrado dentro de la caja ya posicionada arriba. La rotación deja el
   texto leyéndose de abajo hacia arriba, como en el diseño. */
.VerticalHeroBanner-side-label {
    margin: 0;
    transform: rotate(-90deg);
    font-size: 11px;
    font-weight: 700; /* Acumin Pro Bold del diseño. */
    letter-spacing: 0.44px;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    pointer-events: none;
}

.VerticalHeroBanner-content {
    position: relative; /* Por encima de la imagen, el velo y la franja lateral. */
    z-index: 1;
    width: 100%;
    /* Sin centrado dentro de --container-max-width: el texto va pegado al borde izquierdo real. */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    max-width: 75.63%; /* Ya deja despejada la franja de la etiqueta vertical -- no hace falta padding-right. */
    padding: 40px 0 40px 40px;
}

.VerticalHeroBanner-breadcrumb {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    font-weight: 500; /* Acumin Pro Medium del diseño. */
    color: rgba(255, 255, 255, 0.6);
}

.VerticalHeroBanner-breadcrumb-current {
    font-weight: 600; /* Acumin Pro Semibold del diseño. */
    color: rgba(255, 255, 255, 0.95);
}

.VerticalHeroBanner-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 700; /* Acumin Pro Bold del diseño. */
    letter-spacing: 0.22px;
    color: #ffffff;
}

/* Sin texto, la fila sigue ocupando su espacio (visibility, no display) para que el título no suba. */
.VerticalHeroBanner-eyebrow--empty {
    visibility: hidden;
}

.VerticalHeroBanner-eyebrow-dot {
    width: 7px;
    height: 7px;
    background-color: #ffffff;
    flex-shrink: 0;
}

/* Caja de alto FIJO para título + descripción -- coincide con el alto útil del recuadro. Los
   botones (más abajo en el flujo) siempre arrancan después de esta caja, exista o no texto largo
   adentro. overflow:hidden es la contención de seguridad si algún texto no llegara a entrar. */
.VerticalHeroBanner-headline {
    display: flex;
    flex-direction: column;
    gap: 18px;
    height: 316px;
    overflow: hidden;
}

/* El font-size no usa clamp(vw): VerticalHeroBanner.js (fitTitle) lo reduce según el largo real
   del título, arrancando siempre desde el máximo declarado acá. */
.VerticalHeroBanner-title {
    margin: 0;
    display: flex;
    flex-direction: column;
    /* flex-start, no stretch (el default): cada línea tiene que medir su propio ancho de texto --
       con stretch, la línea se estira al ancho del contenedor y scrollWidth (lo que usa
       VerticalHeroBanner.js para saber si el texto entra) deja de reflejar el ancho real del texto. */
    align-items: flex-start;
    gap: 18px;
}

.VerticalHeroBanner-title-line {
    margin: 0;
    white-space: nowrap; /* Una sola línea; el ajuste de tamaño evita que se envuelva. */
    font-size: 84px;
    font-weight: 600; /* Acumin Pro Semibold del diseño. */
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: rgba(255, 255, 255, 0.98);
}

.VerticalHeroBanner-title-line--highlight {
    font-size: 96px;
    font-weight: 700; /* Acumin Pro Bold del diseño. */
}

.VerticalHeroBanner-description {
    margin: 0;
    max-width: min(660px, 100%); /* Ancho de línea del diseño, sin superar el 100% en mobile. */
    font-size: 17px;
    font-weight: 400; /* Acumin Pro Regular del diseño. */
    line-height: 1.53; /* 26px sobre 17px del diseño. */
    color: rgba(255, 255, 255, 0.82);
}

.VerticalHeroBanner-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* Flecha del botón principal, igual patrón que ResourceCardsGrid-arrow. Solo el botón primario la
   lleva -- el secundario ("Buscar por marca") no tiene flecha en el diseño. */
.VerticalHeroBanner-button-arrow {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
}

.VerticalHeroBanner-button-arrow-icon {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 3;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.VerticalHeroBanner-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 17px 30px;
    border-radius: 6px;
    font-size: 20px;
    font-weight: 400; /* Acumin Pro Regular del diseño. */
    text-decoration: none;
    white-space: nowrap;
    /* Mismo acercamiento sutil que los botones de HelpCalloutSection, pedido para este banner
       también -- transform en vez de cambiar width/height, para no disparar reflow. */
    transform: scale(1);
    transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

    .VerticalHeroBanner-button:hover,
    .VerticalHeroBanner-button:focus-visible,
    .VerticalHeroBanner-button:active {
        /* :active cubre el toque en tablet/mobile, igual que en HelpCalloutSection. */
        transform: scale(1.05);

        /* Mismo bug y misma corrección que HelpCalloutSection: Bootstrap trae
           "a:hover { text-decoration: underline; }" por defecto, que le gana en especificidad a
           .VerticalHeroBanner-button (una sola clase) y pintaba una raya bajo el texto del botón
           que el Figma no tiene. */
        text-decoration: none;
    }

.VerticalHeroBanner-button--primary {
    background-color: #429cde;
    color: #ffffff;
    border: none;
}

    .VerticalHeroBanner-button--primary:hover {
        color: #ffffff;
        background-color: #3a8bc4; /* Un punto más oscuro, sin salir del azul de marca. */
    }

.VerticalHeroBanner-button--secondary {
    background-color: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.45);
    color: #ffffff;
    backdrop-filter: blur(9px);
}

    .VerticalHeroBanner-button--secondary:hover {
        color: #ffffff;
        background-color: rgba(255, 255, 255, 0.24);
    }

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------
   El breadcrumb y la etiqueta lateral rotada no van en tablet/mobile; el resto sí, en su propio
   tamaño y posición.
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
    /* Piezas que no están en el diseño de tablet/mobile. */
    .VerticalHeroBanner-breadcrumb,
    .VerticalHeroBanner-side-label-strip,
    .VerticalHeroBanner-side-label-wrap {
        display: none;
    }

    .VerticalHeroBanner {
        min-height: clamp(420px, 59.5vw, 620px);
    }

    .VerticalHeroBanner-content {
        padding-top: 32px;
        max-width: 92.97%;
        gap: 16px;
        padding-right: 0;
        padding-bottom: 32px;
        padding-left: 4.17%; /* 32px / 768px. */
    }

    .VerticalHeroBanner-eyebrow {
        font-size: 14px;
    }

    .VerticalHeroBanner-title-line {
        font-size: 52px;
        line-height: 1.1;
    }

    .VerticalHeroBanner-title-line--highlight {
        font-size: 58px;
    }

    .VerticalHeroBanner-description {
        max-width: 100%;
        font-size: 16px;
        line-height: 1.4;
    }

    .VerticalHeroBanner-headline {
        height: 187px;
    }

    .VerticalHeroBanner-offset-panel {
        left: 0;
        width: 101.12%; /* 94.01% de la sección / 92.97% que mide la caja de contenido. */
        top: 61px;
        height: 203px; /* Deja el mismo margen contra los botones que desktop/mobile (8px). */
    }

    /* Línea de acento: 230×3px, pegada al borde inferior de la imagen de fondo (440px de alto
       sobre una mesa de 457px -- 17px de aire debajo). */
    .VerticalHeroBanner-accent-line {
        width: 230px;
        bottom: 17px;
    }
}

@media (max-width: 500px) {
    /* Alto de la mesa de trabajo de mobile (440px sobre 375px de ancho = 117.3%). */
    .VerticalHeroBanner {
        min-height: clamp(400px, 117.3vw, 480px);
        align-items: flex-start; /* En mobile el contenido va anclado arriba, como en el diseño. */
    }

    /* Padding-top fijo: "contenido" arranca en top:24px sobre la mesa de trabajo de mobile. */
    .VerticalHeroBanner-content {
        padding-top: 24px;
        width: 100%;
        max-width: 100%;
        align-items: stretch;
        gap: 18px;
        padding-right: 5.33%; /* 20px / 375px. */
        padding-bottom: 5.9%; /* 26px / 440px. */
        padding-left: 5.33%;
    }

    .VerticalHeroBanner-eyebrow {
        font-size: 14px;
    }

    .VerticalHeroBanner-title-line {
        font-size: 38px;
        line-height: 1.1;
    }

    .VerticalHeroBanner-title-line--highlight {
        font-size: 44px;
    }

    .VerticalHeroBanner-headline {
        gap: 16px;
        height: 185px;
    }

    .VerticalHeroBanner-title {
        gap: 16px;
    }

    .VerticalHeroBanner-description {
        font-size: 15px;
        line-height: 1.4;
    }


    /* Los botones se apilan centrados, uno debajo del otro (puede haber uno o dos), con más
       padding que en desktop/tablet (40px/20px). */
    .VerticalHeroBanner-buttons {
        width: 100%;
        flex-direction: column;
        align-items: center;
    }

    .VerticalHeroBanner-button {
        width: min(267px, 71.2%);
        padding: 20px 40px;
    }

    .VerticalHeroBanner-offset-panel {
        left: 0;
        width: 100%; /* La caja de contenido mide el 100% de la sección: no hay que reconvertir. */
        top: 53px;
        height: 198px;
    }

    /* Línea de acento: pegada al borde inferior real de la sección (no de la imagen), ancho total
       menos 235px libres a la derecha. */
    .VerticalHeroBanner-accent-line {
        left: 0;
        right: 235px;
        width: auto;
        max-width: none;
        bottom: 0;
    }
}

/* El marcador de posición que este widget muestra en el editor cuando no tiene contenido NO se
   estiliza acá: usa las clases WidgetPlaceholder de site.css, comunes a todos los widgets. */