/* CorporateBlockGrid.css — Retícula de bloques corporativos. Nodos 1535:30334 (PC), 1535:29899
   (tablet), 1535:30107 (mobile). Tipografía: site.css.

   LOS TRES NODOS TRAEN LOS MISMOS CUERPOS, RELLENOS Y HUECOS: 30/28px de relleno del panel, 10.5px
   de volanta, 46/38/34/30 de título, 13.5 de descripción y 14.5/14 de enlace, idénticos en los tres.
   Lo único que cambia entre rangos son las columnas de la retícula, el relleno lateral de la sección
   (48 / 18 / 10) y la cobertura del panel, que solo en escritorio deja ver la foto a la derecha.

   El fondo va a sangre completa y el CONTENIDO se acota a --container-max-width, así que el relleno
   lateral vive en la sección: si viviera en el contenedor, arriba de 1696px el encabezado quedaría
   48px adentro de la línea de los 1600 en vez de apoyar sobre ella.

   Las variantes se seleccionan por atributo de datos ([data-width], [data-placement]...) y no por
   clases concatenadas: los valores ya vienen validados contra listas blancas en el ViewComponent. */

/* --- Sección: fondo blanco y variables compartidas por todo el widget. --- */
.CorporateBlockGrid {
    --CorporateBlockGrid-pad: min(3.75vw, 48px); /* Relleno lateral del nodo de PC (48/1280). */
    --CorporateBlockGrid-gap: min(1.25vw, 16px); /* Hueco entre bloques, igual en los tres nodos. */
    --CorporateBlockGrid-panel-gap: min(0.78vw, 10px); /* Hueco entre los textos del panel. */
    --CorporateBlockGrid-photo-window: 416px; /* Franja de foto que deja ver el panel parcial. */
    --CorporateBlockGrid-motion: 200ms ease-out; /* Duración y curva del hover de los enlaces. */
    width: 100%; /* Ocupa el ancho de la ventana. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
    background-color: #ffffff; /* Fondo de la sección. */
    padding-block: min(4.375vw, 56px) min(3.125vw, 40px); /* Aire arriba y abajo del nodo. */
    padding-inline: var(--CorporateBlockGrid-pad); /* Relleno lateral. */
    /* CONTENCIÓN DE SEGURIDAD: recorta cualquier desborde lateral sin convertir la sección en
       contenedor de desplazamiento, que es lo que haría overflow: hidden. */
    overflow-x: clip;
}

/* Contenido centrado dentro del techo del sitio. */
.CorporateBlockGrid-container {
    max-width: var(--container-max-width, 1600px); /* Techo del contenido. */
    margin-inline: auto; /* Centrado. */
    display: flex; /* Apila encabezado y retícula. */
    flex-direction: column; /* En columna. */
    gap: min(2.34vw, 30px); /* Separación del nodo entre el encabezado y la retícula. */
}

/* --- Encabezado de la sección. --- */

/* Etiqueta sobre el título. */
.CorporateBlockGrid-eyebrow {
    display: flex; /* Cuadradito y texto en línea. */
    align-items: center; /* Centrados entre sí. */
    gap: 10px; /* Separación del nodo entre los dos. */
    margin: 0 0 10px; /* Sin margen propio salvo la separación con el título. */
    font-size: 11px; /* Cuerpo del nodo. */
    font-weight: 700; /* Bold del diseño. */
    text-transform: uppercase; /* Se lee como etiqueta, igual que en el resto de los widgets. */
    color: #243746; /* Azul oscuro del diseño. */
}

/* Cuadradito que precede a la etiqueta. */
.CorporateBlockGrid-eyebrow-dot {
    width: 7px; /* Lado del nodo. */
    height: 7px; /* Cuadrado. */
    flex: none; /* No se comprime. */
    background-color: #243746; /* Acompaña al color de la etiqueta. */
}

/* Título de la sección. */
.CorporateBlockGrid-title {
    margin: 0; /* Quita el margen propio del título. */
    /* Los tres nodos lo dibujan en 44px, así que el clamp toca el techo ya en 375px de ventana
       (44/375*100 = 11.73vw) y solo achica por debajo de ese ancho. */
    font-size: clamp(34px, 11.73vw, 44px);
    font-weight: 900; /* El black del nodo. */
    line-height: normal; /* El interlineado por defecto del nodo. */
    color: #0f0f12; /* Casi negro del diseño. */
}

/* --- Retícula: 6 columnas en escritorio, y cada bloque abarca 2, 3, 4 o las 6. --- */
.CorporateBlockGrid-grid {
    display: grid; /* Retícula real, no posicionamiento absoluto. */
    grid-template-columns: repeat(6, 1fr); /* Las 6 columnas del nodo. */
    gap: var(--CorporateBlockGrid-gap); /* Hueco del nodo, en las dos direcciones. */
}

/* --- Un bloque: la foto de fondo con el panel de color encima. --- */
.CorporateBlockGrid-block {
    position: relative; /* Origen de la foto, que va en absoluto. */
    display: flex; /* Coloca el panel dentro del bloque. */
    box-sizing: border-box; /* El relleno de la variante en banda entra dentro del alto. */
    overflow: hidden; /* Recorta la foto contra el borde redondeado. */
    border-radius: 6px; /* Radio del nodo. */
    /* Respaldo gris cuando el bloque no tiene foto. NO se usa negro: sobre una tarjeta con velo
       translúcido, un respaldo oscuro se lee como un borde negro alrededor del bloque. */
    background-color: #e5e7eb;
    min-height: 222px; /* Piso: el alto del bloque más bajo del nodo. FIJO, ver la nota de la banda. */
}

/* Anchos del nodo sobre la retícula de 6 columnas: 384, 584, 784 y 1184px en la mesa de 1280. */
.CorporateBlockGrid-block[data-width="third"] {
    grid-column: span 2; /* Un tercio. */
}

.CorporateBlockGrid-block[data-width="half"] {
    grid-column: span 3; /* La mitad. */
}

.CorporateBlockGrid-block[data-width="twoThirds"] {
    grid-column: span 4; /* Dos tercios. */
}

.CorporateBlockGrid-block[data-width="full"] {
    grid-column: span 6; /* El ancho completo. */
}

/* Foto de fondo. Va en absoluto para que el relleno de la variante en banda no la encoja: el bloque
   posicionado es su contenedor, y inset se resuelve contra la caja de relleno completa. */
.CorporateBlockGrid-block-image {
    position: absolute; /* Fuera del flujo del panel. */
    inset: 0; /* Cubre el bloque entero. */
    width: 100%; /* Ancho completo. */
    height: 100%; /* Alto completo. */
    object-fit: cover; /* Llena sin deformar. */
    pointer-events: none; /* No intercepta el clic de los enlaces del panel. */
}

/* Panel de color con los textos. */
.CorporateBlockGrid-block-panel {
    position: relative; /* Se apila sobre la foto. */
    z-index: 1; /* Por encima de la foto. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
    display: flex; /* Apila los textos. */
    flex-direction: column; /* En columna. */
    gap: var(--CorporateBlockGrid-panel-gap); /* Hueco del nodo entre textos. */
    padding: min(2.19vw, 28px) min(2.34vw, 30px); /* Relleno del nodo, igual en los tres. */
    min-width: 0; /* Deja que un texto largo envuelva en vez de estirar el panel. */
    /* El color sale del módulo del CMS, así que lo inyecta la vista en la propiedad personalizada.
       El respaldo es el gris pizarra del diseño, el que usan cuatro de los siete bloques. */
    background-color: var(--CorporateBlockGrid-veil, rgba(91, 103, 112, 0.78));
}

/* Cobertura completa: el panel tapa todo el bloque. Es lo que hacen cinco de los siete del nodo. */
.CorporateBlockGrid-block[data-coverage="full"] .CorporateBlockGrid-block-panel {
    width: 100%; /* Todo el ancho del bloque. */
}

/* Cobertura parcial: la foto queda a la vista en una franja a la derecha.
   La franja es de ancho FIJO y el panel se queda con el resto, en vez de repartir por porcentaje:
   en el nodo mide 408px en el bloque de dos tercios y 424px en el de ancho completo, así que un
   único valor de 416 cae a 8px de los dos, y el mismo bloque se ve igual en cualquier ancho. */
.CorporateBlockGrid-block[data-coverage="photoAtRight"] .CorporateBlockGrid-block-panel {
    width: calc(100% - var(--CorporateBlockGrid-photo-window)); /* El resto del bloque. */
    min-width: 320px; /* Piso: por debajo de este ancho el panel deja de ser legible. */
}

/* Apoyo de alto completo: el panel llega de borde a borde y centra su contenido. */
.CorporateBlockGrid-block[data-placement="fullHeight"] .CorporateBlockGrid-block-panel {
    align-self: stretch; /* Toma todo el alto del bloque. */
    justify-content: center; /* Contenido centrado, como en el nodo. */
}

/* Apoyo en banda: el panel mide lo que su contenido y la foto asoma arriba y abajo.
   EL RELLENO ES SIMÉTRICO: la franja de foto tiene que medir lo mismo arriba que abajo. El nodo
   la dibuja empujada 13px hacia abajo (49px de foto arriba contra 23 abajo en un bloque, 39 contra
   13 en otro) y eso se corrige a propósito: acá el diseño no manda. Los 23px son el promedio de
   los dos valores del nodo, así que el relleno total no cambia y la banda conserva su tamaño. */
.CorporateBlockGrid-block[data-placement="band"] {
    align-items: center; /* La banda queda centrada en el alto sobrante. */
    /* EN PÍXELES FIJOS Y NO EN vw: los tres nodos dejan asomar la MISMA cantidad de foto (los
       "top" de la banda van de 11 a 49px en los tres, sin escalar con el ancho de la mesa). Con un
       valor proporcional, en un teléfono la franja de foto caía a 10px y la banda se comía el
       bloque entero.
       MISMO VALOR ARRIBA Y ABAJO: con el centrado, el sobrante se reparte en partes iguales, así
       que las dos franjas de foto quedan idénticas a cualquier alto de bloque. */
    padding-block: 23px;
}

.CorporateBlockGrid-block[data-placement="band"] .CorporateBlockGrid-block-panel {
    align-self: center; /* Mide lo que su contenido, no lo que el bloque. */
}

/* --- Textos del panel. --- */

/* Volanta numerada del bloque. El número lo pone el renderer por posición. */
.CorporateBlockGrid-block-eyebrow {
    margin: 0; /* Un párrafo dentro de un flex trae 16px abajo que descentran la columna. */
    font-size: 10.5px; /* Cuerpo del nodo, igual en los tres. */
    font-weight: 700; /* Bold del diseño. */
    letter-spacing: 1.5px; /* Apertura del nodo. */
    line-height: normal; /* Interlineado por defecto del nodo. */
    text-transform: uppercase; /* Se lee como etiqueta. */
    color: rgba(255, 255, 255, 0.8); /* Blanco atenuado del diseño. */
}

/* Título del bloque. Los cuatro cuerpos del nodo, cada uno como una variante.
   Igual que el título de la sección, los tres nodos usan el MISMO cuerpo, así que cada clamp toca
   su techo ya en 375px de ventana (cuerpo/375*100) y solo achica por debajo de ese ancho. */
.CorporateBlockGrid-block-title {
    margin: 0; /* Quita el margen propio del título. */
    font-weight: 700; /* Bold del diseño. */
    line-height: normal; /* Interlineado por defecto del nodo. */
    color: #ffffff; /* Blanco pleno del diseño. */
}

.CorporateBlockGrid-block[data-title-size="small"] .CorporateBlockGrid-block-title {
    font-size: clamp(24px, 8vw, 30px); /* Los 30px del nodo. */
}

.CorporateBlockGrid-block[data-title-size="medium"] .CorporateBlockGrid-block-title {
    font-size: clamp(27px, 9.07vw, 34px); /* Los 34px del nodo. */
}

.CorporateBlockGrid-block[data-title-size="large"] .CorporateBlockGrid-block-title {
    font-size: clamp(30px, 10.13vw, 38px); /* Los 38px del nodo. */
}

.CorporateBlockGrid-block[data-title-size="extraLarge"] .CorporateBlockGrid-block-title {
    font-size: clamp(36px, 12.27vw, 46px); /* Los 46px del nodo. */
}

/* Descripción bajo el título. */
.CorporateBlockGrid-block-description {
    margin: 0; /* Mismo motivo que la volanta. */
    font-size: 13.5px; /* Cuerpo del nodo. */
    font-weight: 400; /* Regular del diseño. */
    line-height: normal; /* Interlineado por defecto del nodo. */
    color: rgba(255, 255, 255, 0.88); /* Blanco atenuado del diseño. */
}

/* --- Filas: las tres listas comparten el reseteo de la lista. --- */
.CorporateBlockGrid-block-links,
.CorporateBlockGrid-block-numbers {
    margin: 0; /* Una lista dentro de un flex trae margen propio que descentra la columna. */
    padding: 0; /* Sin la sangría de viñeta. */
    list-style: none; /* Sin viñetas. */
    display: flex; /* Apila las filas. */
    flex-direction: column; /* En columna. */
    gap: var(--CorporateBlockGrid-panel-gap); /* Mismo hueco que el resto del panel. */
}

/* --- Lista de enlaces vertical: etiqueta a la izquierda y flecha contra el margen derecho. --- */
.CorporateBlockGrid-link {
    /* En línea y no en bloque: el enlace mide lo que su contenido, así la FLECHA QUEDA PEGADA AL
       TEXTO. El nodo la manda contra el margen derecho del panel (el texto va con flex-[1_0_0]);
       esto es una decisión posterior del equipo, no lo que dibuja el diseño. De paso, el área
       clickeable deja de ser la franja vacía que había entre el texto y el borde. */
    display: inline-flex;
    align-items: center; /* Etiqueta y flecha centradas entre sí. */
    gap: 8px; /* Separación del nodo. */
    padding-block: 2px; /* Aire del nodo arriba y abajo. */
    max-width: 100%; /* Un texto largo envuelve dentro del panel en vez de desbordarlo. */
    color: inherit; /* No hereda el azul de Bootstrap. */
}

/* LOS CINCO ESTADOS SE DECLARAN JUNTOS: el a:hover de Bootstrap le gana a la clase suelta y pinta
   el enlace de azul y subrayado. En este sitio los enlaces NO van subrayados en ningún estado. */
a.CorporateBlockGrid-link,
a.CorporateBlockGrid-link:link,
a.CorporateBlockGrid-link:visited,
a.CorporateBlockGrid-link:hover,
a.CorporateBlockGrid-link:focus,
a.CorporateBlockGrid-link:active {
    text-decoration: none; /* Sin subrayado, en ningún estado. */
    color: inherit; /* Sin el azul de Bootstrap, en ningún estado. */
}

/* Etiqueta del enlace. */
.CorporateBlockGrid-link-text {
    flex: 0 1 auto; /* Mide lo que su texto y solo se encoge si no entra: no empuja la flecha. */
    min-width: 0; /* Deja que un texto largo envuelva en vez de desbordar. */
    font-size: 14.5px; /* Cuerpo del nodo. */
    font-weight: 700; /* Bold del diseño. */
    line-height: normal; /* Interlineado por defecto del nodo. */
    color: rgba(255, 255, 255, 0.95); /* Blanco casi pleno del diseño. */
    transition: color var(--CorporateBlockGrid-motion); /* Acompaña al hover. */
}

/* Flecha del enlace. */
.CorporateBlockGrid-link-arrow {
    flex: none; /* No se comprime ni se estira. */
    display: inline-flex; /* Centra el dibujo contra la línea del texto. */
    align-items: center; /* Ídem. */
    color: rgba(255, 255, 255, 0.8); /* Blanco atenuado del diseño. */
    transition: transform var(--CorporateBlockGrid-motion); /* Acompaña al hover. */
}

/* El dibujo de la flecha: el estándar del proyecto, el mismo de los otros widgets. */
.CorporateBlockGrid-link-arrow-icon {
    width: 14px; /* Tamaño visual, el cuerpo que le da el nodo a la flecha. */
    height: 14px; /* Cuadrada. */
    stroke: currentColor; /* Toma el color del enlace que la contiene. */
    stroke-width: 3; /* Es lo único que hay que tocar para engrosarla. */
    fill: none; /* Sin esto el navegador rellenaría de negro lo que encierra la punta. */
    stroke-linecap: round; /* Extremos redondeados. */
    stroke-linejoin: round; /* Vértice redondeado. */
}

/* Hover y foco: la etiqueta llega al blanco pleno y la flecha avanza. El nodo no dibuja este
   estado -- es el mismo gesto contenido que usan los demás widgets del sitio. */
a.CorporateBlockGrid-link:hover .CorporateBlockGrid-link-text,
a.CorporateBlockGrid-link:focus-visible .CorporateBlockGrid-link-text {
    color: #ffffff; /* Blanco pleno. */
}

a.CorporateBlockGrid-link:hover .CorporateBlockGrid-link-arrow,
a.CorporateBlockGrid-link:focus-visible .CorporateBlockGrid-link-arrow {
    transform: translateX(4px); /* La flecha avanza. */
}

/* Foco visible. El anillo es BLANCO y no oscuro: sobre una tarjeta con foto, un anillo oscuro se
   lee como un borde negro alrededor del enlace. */
a.CorporateBlockGrid-link:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.9); /* Anillo claro. */
    outline-offset: 2px; /* Separado del texto. */
}

/* Una fila sin destino se pinta como texto: mismo aspecto, sin cursor de mano. */
.CorporateBlockGrid-link--plain {
    cursor: default; /* No promete un clic que no existe. */
}

/* --- Enlaces en línea: la fila que envuelve, la del bloque de showrooms. --- */
.CorporateBlockGrid-block[data-content="inlineLinks"] .CorporateBlockGrid-block-links {
    flex-direction: row; /* En fila y no en columna. */
    flex-wrap: wrap; /* Envuelve cuando no entran. */
    align-items: center; /* Centrados entre sí. */
    gap: 8px 22px; /* Huecos del nodo: 8 entre filas, 22 entre enlaces. */
    padding-top: 8px; /* Aire del nodo contra la descripción. */
}

.CorporateBlockGrid-block[data-content="inlineLinks"] .CorporateBlockGrid-link {
    gap: 7px; /* Separación del nodo, más ajustada que en la lista vertical. */
    padding-block: 0; /* Sin el aire de la lista vertical. */
    white-space: nowrap; /* El enlace no se parte a la mitad al envolver. */
}

.CorporateBlockGrid-block[data-content="inlineLinks"] .CorporateBlockGrid-link-text {
    color: #ffffff; /* Blanco pleno del nodo en esta variante. */
}

.CorporateBlockGrid-block[data-content="inlineLinks"] .CorporateBlockGrid-link-arrow {
    color: rgba(255, 255, 255, 0.9); /* Blanco algo más pleno que en la lista vertical. */
}

/* --- Cifras: número grande y rótulo al costado. --- */
.CorporateBlockGrid-number {
    display: flex; /* Número y rótulo en línea. */
    align-items: center; /* Centrados entre sí. */
    gap: 10px; /* Separación del nodo. */
    padding-block: 3px; /* Aire del nodo arriba y abajo. */
}

/* El número. */
.CorporateBlockGrid-number-value {
    flex: none; /* Nunca se comprime: es el dato. */
    font-size: clamp(24px, 8vw, 30px); /* Los 30px del nodo, con el mismo criterio que los títulos. */
    font-weight: 700; /* Bold del diseño. */
    line-height: normal; /* Interlineado por defecto del nodo. */
    color: #ffffff; /* Blanco pleno del diseño. */
}

/* El rótulo del número. */
.CorporateBlockGrid-number-label {
    flex: 1 1 auto; /* Se queda con el sobrante. */
    min-width: 0; /* Deja que un rótulo largo envuelva. */
    font-size: 10.5px; /* Cuerpo del nodo. */
    font-weight: 700; /* Bold del diseño. */
    letter-spacing: 1.2px; /* Apertura del nodo. */
    line-height: normal; /* Interlineado por defecto del nodo. */
    text-transform: uppercase; /* Se lee como etiqueta. */
    color: rgba(255, 255, 255, 0.75); /* Blanco atenuado del diseño. */
}

/* --- Tablet (hasta 1024px, cubre el iPad Pro en vertical): dos bloques por fila. --- */
@media (max-width: 1024px) {
    .CorporateBlockGrid {
        --CorporateBlockGrid-pad: 18px; /* Relleno lateral del nodo de tablet. */
    }

    .CorporateBlockGrid-grid {
        grid-template-columns: repeat(2, 1fr); /* Dos columnas. */
    }

    /* Los tres anchos parciales colapsan a media fila; solo el completo sigue ocupándola entera. */
    .CorporateBlockGrid-block[data-width="third"],
    .CorporateBlockGrid-block[data-width="half"],
    .CorporateBlockGrid-block[data-width="twoThirds"] {
        grid-column: span 1; /* Media fila. */
    }

    .CorporateBlockGrid-block[data-width="full"] {
        grid-column: span 2; /* La fila entera. */
    }

    /* LA COBERTURA PARCIAL ES SOLO DE ESCRITORIO: en el nodo de tablet todos los paneles cubren el
       ancho completo del bloque -- varios incluso se pasan del borde, porque el diseño no los
       redimensionó al bajar de tamaño. */
    .CorporateBlockGrid-block[data-coverage="photoAtRight"] .CorporateBlockGrid-block-panel {
        width: 100%; /* Cubre todo el bloque. */
        min-width: 0; /* Sin el piso del escritorio. */
    }
}

/* --- Mobile (hasta 500px): un bloque por fila. --- */
@media (max-width: 500px) {
    .CorporateBlockGrid {
        --CorporateBlockGrid-pad: 10px; /* Relleno lateral del nodo de mobile. */
    }

    .CorporateBlockGrid-grid {
        grid-template-columns: 1fr; /* Una sola columna. */
    }

    /* Los cuatro anchos ocupan la fila entera: no hay con quién compartirla. */
    .CorporateBlockGrid-block[data-width="third"],
    .CorporateBlockGrid-block[data-width="half"],
    .CorporateBlockGrid-block[data-width="twoThirds"],
    .CorporateBlockGrid-block[data-width="full"] {
        grid-column: span 1; /* La fila entera. */
    }
}

/* --- Sin animación para quien la desactivó en su sistema. --- */
@media (prefers-reduced-motion: reduce) {
    .CorporateBlockGrid-link-text,
    .CorporateBlockGrid-link-arrow {
        transition: none; /* El cambio es instantáneo. */
    }

    a.CorporateBlockGrid-link:hover .CorporateBlockGrid-link-arrow,
    a.CorporateBlockGrid-link:focus-visible .CorporateBlockGrid-link-arrow {
        transform: none; /* La flecha no se mueve. */
    }
}