/* CONFIGURACIÓN GENERAL */
.s_hex_nodes {
    --hex-width: 2rem;
    --hex-gap: 0rem;

    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    padding: 4rem 0 5rem;
    background: #FFFFFF;
    overflow-x: clip;
    overflow-y: visible;
    --hex: 615px;

    background-image: url(/oc-snippets/static/src/img/home/top_hex.webp) !important;
    position: relative;
    width: 100%;
    min-height: 100vh;
    height: auto;
    background-size: cover;
    background-position: bottom center !important;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.s_hex_row--bottom > .s_hex_nodes_item:last-child{
  height: var(--hex) !important;
  overflow: hidden !important;
  position: relative;
}

/* ÚLTIMO item de la fila superior = "cap" derecho */
.s_hex_row--top > .s_hex_nodes_item:last-child{
  width: calc(var(--hex) * 0.465 + 2px) !important;  /* mata el espacio en blanco */
  height: var(--hex) !important;
  overflow: hidden !important;
  position: relative;
}

/* El link es el viewport */
.s_hex_row--top > .s_hex_nodes_item:last-child .s_hex_nodes_link{
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
}

/* Metemos un hex FULL dentro (no 100%, FULL 615x615) */
.s_hex_row--top > .s_hex_nodes_item:last-child .s_hex_nodes_hex{
  position: absolute !important;
  top: 0;
  left: 0; /* <- deja visible la MITAD IZQUIERDA (la que tú quieres para el borde derecho) */
  width: var(--hex) !important;
  height: var(--hex) !important;

  /* IMPORTANTÍSIMO: forzamos el hex COMPLETO aunque tengas inline clip-path */
  clip-path: shape(
    from 93.3% 70.93%,
    curve to 89.78% 77.03% with 93.3% 75%,
    line to 53.52% 97.97%,
    curve to 46.48% 97.97% with 50% 100%,
    line to 10.22% 77.03%,
    curve to 6.7% 70.93% with 6.7% 75%,
    line to 6.7% 29.07%,
    curve to 10.22% 22.97% with 6.7% 25%,
    line to 46.48% 2.03%,
    curve to 53.52% 2.03% with 50% 0%,
    line to 89.78% 22.97%,
    curve to 93.3% 29.07% with 93.3% 25%
  ) !important;
}

/* CONTENEDOR SCROLLABLE */
.s_hex_nodes_carousel {
    overflow-x: hidden;
    overflow-y: visible;
    cursor: default;
}

/* CONTENEDOR INTERNO (ANCHO DINÁMICO) */
.s_hex_nodes_rows {
    display: inline-block;
}

/* FILAS SUPERIOR / INFERIOR */
.s_hex_row {
    display: flex;
    gap: var(--hex-gap);
}

/* Fila inferior: se sube y se desplaza a la derecha -> panal */
.s_hex_row--bottom {
    margin-top: calc(var(--hex-width) * -4);
    margin-left: calc(var(--hex-width) * -8.9)
}

/* HEX INDIVIDUAL */
.s_hex_nodes_item {
    position: relative;
    flex: 0 0 auto;
    width: 615px;      /* ancho del hex como en la captura */
    height: 615px;
    margin-left: -45px;
}

/* TODO el hex es clickeable */
.s_hex_nodes_link {
    cursor: default;
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

/* FORMA HEXAGONAL, 6 LADOS UNIFORMES */
.s_hex_nodes_hex {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;

    clip-path: shape(from 93.3% 70.93%,curve to 89.78% 77.03% with 93.3% 75%,line to 53.52% 97.97%,curve to 46.48% 97.97% with 50% 100%,line to 10.22% 77.03%,curve to 6.7% 70.93% with 6.7% 75%,line to 6.7% 29.07%,curve to 10.22% 22.97% with 6.7% 25%,line to 46.48% 2.03%,curve to 53.52% 2.03% with 50% 0%,line to 89.78% 22.97%,curve to 93.3% 29.07% with 93.3% 25%);

}

/* IMAGEN */
.s_hex_nodes_media {
    position: absolute;
    inset: 0;
    background-size: contain;
    background-position: center;
    transform: scale(1.05);
    transition: transform .4s ease, filter .4s ease;
}

/* CAPA OSCURA */
.s_hex_nodes_overlay {
    position: absolute;
    inset: 0;
    mix-blend-mode: multiply;
}

/* CTA con fondo sólido */
.s_hex_nodes_overlay--solid {
    background: #0f1722;
    mix-blend-mode: normal;
}

/* CONTENIDO DE TEXTO */
.s_hex_nodes_content {
    position: absolute;
    inset: 0;
    padding: 8.4rem 4rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #fff;
    pointer-events: none;
}

.s_hex_nodes_title {
    font-family: 'Montserrat' !important;
    font-size: 1.375rem;
    font-weight: 700 !important;
    margin-bottom: 0.5rem;
}

.s_hex_nodes_text {
    font-family: 'Montserrat' !important;
    font-size: 1rem;
    font-weight: 400 !important;
    line-height: 1.875rem;
    opacity: 0.65;
}

/* HOVER */
.s_hex_nodes_item:hover .s_hex_nodes_media {
    transform: scale(1.1);
    filter: brightness(0.9);
}

/* CTA más protagonista */
.s_hex_nodes_cta .s_hex_nodes_content {
    justify-content: center;
    align-items: center;
    text-align: center;
}

.s_hex_nodes_cta .s_hex_nodes_title {
    font-size: 1.3rem;
    margin-bottom: 0.8rem;
}