/* BrandCharacteristics.css -- Encabezado y tarjetas con las características de una marca. Nodos
   4944:4919 (PC) y 4944:5004 (mobile); tablet sin nodo. Rellenos y encabezado del estándar del
   proyecto (CaptionedImageGrid). Tipografía base: site.css. */

/* --- Sección: fondo blanco a sangre completa. El relleno lateral va acá, no en el contenedor. --- */
.BrandCharacteristics {
    width: 100%; /* Ocupa el ancho de la ventana. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
    background-color: #ffffff; /* Fondo del diseño. */
    padding: 30px 48px; /* 30px arriba y abajo de sección; lados estándar. */
}

/* Contenido centrado dentro del techo del sitio: encabezado y grilla apilados. */
.BrandCharacteristics-container {
    display: flex; /* Encabezado y grilla en columna. */
    flex-direction: column; /* En vertical. */
    gap: 24px; /* Separación del nodo entre encabezado y tarjetas. */
    max-width: var(--container-max-width); /* Techo del contenido. */
    margin-inline: auto; /* Centrado. */
}

/* --- Encabezado. --- */
.BrandCharacteristics-header {
    display: flex; /* Piezas apiladas. */
    flex-direction: column; /* En vertical. */
    align-items: flex-start; /* Pegadas al borde de inicio. */
    gap: 9px; /* Separación estándar del encabezado. */
    min-width: 0; /* No fuerza el ancho. */
}

/* Ninguna pieza pasa del ancho de su columna. */
.BrandCharacteristics-header > * {
    max-width: 100%; /* Techo del ancho de la columna. */
}

/* Etiqueta con el cuadrado de marca. */
.BrandCharacteristics-eyebrow {
    display: flex; /* Cuadrado y texto en línea. */
    align-items: flex-start; /* Cuadrado arriba si el texto parte renglón. */
    gap: 10px; /* Separación del diseño. */
    margin: 0; /* El 0 es obligatorio: es un <p> usado como ítem de flex. */
}

/* Cuadrado de la etiqueta. */
.BrandCharacteristics-eyebrow-mark {
    flex-shrink: 0; /* No se comprime. */
    width: 7px; /* Lado del diseño. */
    height: 7px; /* Cuadrado. */
    margin-top: 6px; /* Centrado en el primer renglón: (14 x 1,35 - 7) / 2. */
    background-color: var(--color-cool-neutral-02); /* Azul de marca. */
}

/* Texto de la etiqueta: el estándar. */
.BrandCharacteristics-eyebrow-text {
    min-width: 0; /* Cede ancho al cuadrado. */
    font-size: 14px; /* Tamaño estándar. */
    font-weight: 700; /* Bold. */
    line-height: 1.35; /* Interlineado estándar. */
    letter-spacing: 0.5px; /* Apertura estándar. */
    text-transform: uppercase; /* Se lee como etiqueta. */
    color: var(--color-cool-neutral-02); /* Azul de marca. */
    overflow-wrap: break-word; /* Una palabra larga no desborda. */
}

/* Título: 36px estándar al piso del rango de escritorio. */
.BrandCharacteristics-title {
    margin: 0; /* La separación la da el gap. */
    font-size: clamp(24px, 3vw, 36px); /* 36 / 1200 * 100. */
    font-weight: 700; /* Bold. */
    line-height: 1.2; /* Interlineado de titular. */
    letter-spacing: -0.02em; /* Cierre del diseño. */
    color: #0f0f12; /* Casi negro. */
    overflow-wrap: break-word; /* Una palabra larga no desborda. */
}

/* --- Grilla: de 1 a 5 tarjetas por fila en escritorio (3 por defecto). --- */
.BrandCharacteristics-grid {
    display: grid; /* Grilla. */
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* Tres por fila, como el nodo. */
    gap: 20px; /* Separación del nodo. */
    margin: 0; /* Sin el margen de la lista. */
    padding: 0; /* Sin la sangría de la lista. */
    list-style: none; /* Sin viñetas. */
}

.BrandCharacteristics--cols-1 .BrandCharacteristics-grid {
    grid-template-columns: minmax(0, 1fr); /* Una por fila. */
}

.BrandCharacteristics--cols-2 .BrandCharacteristics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* Dos por fila. */
}

.BrandCharacteristics--cols-4 .BrandCharacteristics-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* Cuatro por fila. */
}

.BrandCharacteristics--cols-5 .BrandCharacteristics-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)); /* Cinco por fila. */
}

/* --- Tarjeta: borde tenue y esquinas de 6px; las de una misma fila miden lo mismo. --- */
.BrandCharacteristics-card {
    display: flex; /* Imagen y texto apilados. */
    flex-direction: column; /* En vertical. */
    min-width: 0; /* Deja que el texto envuelva. */
    overflow: hidden; /* La imagen respeta las esquinas. */
    border: 1px solid rgba(15, 15, 18, 0.1); /* Contorno del nodo. */
    border-radius: 6px; /* Radio del nodo. */
    background-color: #ffffff; /* Fondo del nodo. */
}

/* Recuadro de la imagen: 170px de alto; la foto lo llena de lado a lado. */
.BrandCharacteristics-media {
    position: relative; /* Origen de la imagen. */
    flex: 0 0 auto; /* No se comprime. */
    height: 170px; /* Alto del nodo. */
    overflow: hidden; /* El zoom no se sale del recuadro. */
}

.BrandCharacteristics-image {
    position: absolute; /* Cubre el recuadro. */
    inset: 0; /* Sin márgenes. */
    width: 100%; /* Ancho completo. */
    height: 100%; /* Alto completo. */
    object-fit: cover; /* Llena el recuadro; recorta lo que sobre, sin deformar. */
    transition: transform 0.3s ease; /* Zoom suave. */
}

/* Característica sin imagen cargada. */
.BrandCharacteristics-image-pending {
    position: absolute; /* Cubre el recuadro. */
    inset: 0; /* Sin márgenes. */
    display: flex; /* Para centrar la leyenda. */
    align-items: center; /* Centrada en vertical. */
    justify-content: center; /* Centrada en horizontal. */
    background-color: #f5f5f5; /* Gris, solo cuando falta la imagen. */
    font-size: 14px; /* Tamaño discreto. */
    color: rgba(15, 15, 18, 0.45); /* Gris tenue. */
}

/* Texto de la tarjeta. */
.BrandCharacteristics-body {
    display: flex; /* Título y descripción apilados. */
    flex-direction: column; /* En vertical. */
    gap: 6px; /* Separación del nodo. */
    padding: 16px 20px 20px; /* Rellenos del nodo. */
}

.BrandCharacteristics-card-title {
    margin: 0; /* La separación la da el gap. */
    font-size: 20px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold. */
    line-height: normal; /* Interlineado del nodo. */
    color: #0f0f12; /* Casi negro del nodo. */
    overflow-wrap: break-word; /* Una palabra larga no desborda. */
}

/* Descripción RECORTADA A 3 RENGLONES, con puntos suspensivos si sobra texto: así una descripción
   larga no descuadra la tarjeta en ningún ancho. Mismo recorte que ApplicationShowcaseGrid. */
.BrandCharacteristics-card-text {
    margin: 0; /* La separación la da el gap. */
    display: -webkit-box; /* Necesario para que -webkit-line-clamp tenga efecto. */
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* Techo de tres renglones, en los tres anchos. */
    line-clamp: 3; /* Propiedad estándar, para los navegadores que ya no necesitan el prefijo. */
    overflow: hidden; /* Recorta el cuarto renglón en adelante. */
    font-size: 16px; /* Tamaño del nodo. */
    font-weight: 400; /* Regular. */
    line-height: normal; /* Interlineado del nodo. */
    color: rgba(15, 15, 18, 0.55); /* Gris del nodo. */
    overflow-wrap: break-word; /* Una palabra larga no desborda. */
}

/* Acercamiento de la foto; acotado a punteros finos: en táctil el hover emulado queda pegado. */
@media (hover: hover) and (pointer: fine) {
    .BrandCharacteristics-card:hover .BrandCharacteristics-image {
        transform: scale(1.045); /* Zoom estándar. */
    }
}

/* --- Tablet: hasta 1024px. Sin nodo: hasta 2 por fila (con 1 elegida sigue siendo 1), como
   CaptionedImageGrid. --- */
@media (max-width: 1024px) {
    .BrandCharacteristics {
        padding: 30px 40px; /* 30px arriba y abajo; lados estándar de tablet. */
    }

    .BrandCharacteristics-container {
        gap: 20px; /* Separación de tablet. */
    }

    .BrandCharacteristics-header {
        gap: 6px; /* Separación de tablet. */
    }

    .BrandCharacteristics .BrandCharacteristics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* Dos columnas iguales. */
        gap: 16px; /* Separación de tablet. */
    }

    .BrandCharacteristics--cols-1 .BrandCharacteristics-grid {
        grid-template-columns: minmax(0, 1fr); /* Una por fila. */
    }

    .BrandCharacteristics-card-title {
        font-size: 18px; /* Intermedio entre PC y mobile. */
    }

    .BrandCharacteristics-card-text {
        font-size: 14px; /* Intermedio entre PC y mobile. */
    }
}

/* --- Mobile: hasta 500px. Una tarjeta por fila a todo el ancho, como el nodo. --- */
@media (max-width: 500px) {
    .BrandCharacteristics {
        padding: 30px 20px; /* 30px arriba y abajo; lados del nodo. */
    }

    .BrandCharacteristics-title {
        font-size: 24px; /* Tamaño de mobile estándar. */
    }

    .BrandCharacteristics .BrandCharacteristics-grid {
        grid-template-columns: minmax(0, 1fr); /* A todo el ancho. */
    }

    .BrandCharacteristics-card-title {
        font-size: 17px; /* Tamaño del nodo de mobile. */
    }

    .BrandCharacteristics-card-text {
        font-size: 12.5px; /* Tamaño del nodo de mobile. */
    }
}

/* Sin animación para quien la desactivó en el sistema. */
@media (prefers-reduced-motion: reduce) {
    .BrandCharacteristics-image {
        transition: none; /* Sin interpolación. */
    }
}