/* FamilyGroupShowcase.css — "Explora por grupo" (vertiente Productos). Nodos 820:36737 (PC),
   820:40435 (tablet), 820:40322 (mobile). Tipografía: site.css.
   El fondo SÍ lleva --container-max-width: el nodo tiene relleno lateral propio, no va a sangre
   completa. */

/* --- Sección: fondo blanco con el contenido acotado. --- */
.FamilyGroupShowcase {
    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: clamp(32px, 4.375vw, 56px) 0; /* Relleno vertical del nodo. */
    /* CONTENCIÓN DE SEGURIDAD: las tiles de PC van en absoluto y su alto lo calcula un ::after. Si
       ese cálculo fallara, sin esto las tiles se pintan sobre las secciones vecinas. */
    overflow: hidden;
}

/* Contenido centrado dentro del techo del sitio. */
.FamilyGroupShowcase-container {
    width: 100%; /* Ocupa el ancho disponible. */
    max-width: var(--container-max-width, 1600px); /* Techo del contenido. */
    margin: 0 auto; /* Centrado. */
    padding: 0 clamp(20px, 3.75vw, 48px); /* Relleno lateral del nodo. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
}

/* --- Encabezado: etiqueta y título, igual en los tres rangos. --- */
.FamilyGroupShowcase-header {
    margin-bottom: clamp(24px, 2.5vw, 32px); /* Separación con la grilla. */
}

/* Etiqueta sobre el título. */
.FamilyGroupShowcase-eyebrow {
    display: flex; /* Cuadradito y texto en línea. */
    align-items: center; /* Centrados entre sí. */
    gap: 10px; /* Separación entre los dos. */
    margin: 0 0 10px; /* Solo separación con el título. */
    font-size: 14px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold del diseño. */
    letter-spacing: 0.5px; /* Apertura del diseño. */
    text-transform: uppercase; /* Se lee como etiqueta. */
    color: #243746; /* Azul oscuro del diseño. */
}

/* Cuadradito que precede a la etiqueta. */
.FamilyGroupShowcase-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. */
.FamilyGroupShowcase-title {
    margin: 0; /* Quita el margen propio del título. */
    font-size: clamp(24px, 2.67vw, 32px); /* Toca los 32px del nodo a partir de 1200px. */
    font-weight: 700; /* Bold del diseño. */
    line-height: 1.2; /* Interlineado de titular. */
    letter-spacing: -0.02em; /* Compactado del nodo. */
    color: #0f0f12; /* Casi negro del diseño. */
}

/* --- Grilla de escritorio: retícula escalonada ("brick"), dos columnas con la derecha desplazada.
   Las medidas del nodo van en porcentaje de la mesa de 1280, nunca en px fijos. --- */
.FamilyGroupShowcase-grid {
    position: relative; /* Origen de las tiles, que van en absoluto. */
    width: 100%; /* Ocupa el ancho del contenedor. */
}

/* Una tile del mosaico escalonado. */
.FamilyGroupShowcase-tile {
    position: absolute; /* Colocada por cálculo, no por el flujo. */
    overflow: hidden; /* Recorta la imagen ampliada contra el borde redondeado. */
    border-radius: 6px; /* Esquinas redondeadas. */
    background-color: #e5e7eb; /* Respaldo si la imagen no trae URL válida. */
    /* Aísla el mix-blend-mode del duotono a esta tile: con varias mezclando a la vez, el navegador
       terminaba pintando toda la sección en blanco. El overflow solo no alcanza. */
    isolation: isolate;
    width: 45.625%; /* 584/1280 del nodo. */
    height: 21.09vw; /* 270/1280 del nodo. */
    max-height: 320px; /* Techo por encima de los 270 del nodo: el contenedor llega a 1600px. */
    left: calc(var(--tile-col) * 47.34%); /* La columna la calcula la vista, para no usar módulo en CSS. */
    /* Paso entre filas de la misma columna más el desfase de la columna derecha. CADA término lleva
       su techo en px: sin eso, en pantallas anchas el alto se congela pero el desfase sigue
       creciendo y las últimas filas se recortan. */
    top: calc((var(--tile-row) * min(22.66vw, 343.9px)) + (var(--tile-col) * min(4.69vw, 71.2px)));
}

/* Foto de la tile. */
.FamilyGroupShowcase-tile-image {
    position: absolute; /* Detrás de las capas. */
    inset: 0; /* Cubre la tile entera. */
    width: 100%; /* Ancho completo. */
    height: 100%; /* Alto completo. */
    max-width: none; /* Anula el max-width de Bootstrap. */
    object-fit: cover; /* Recorta en vez de deformar. */
    object-position: center; /* Conserva el centro al recortar. */
    pointer-events: none; /* No intercepta clics. */
    /* El grayscale es lo que de verdad apaga el color en reposo: el duotono oscurece pero no
       desatura del todo, y una foto con colores fuertes seguía notándose. */
    filter: grayscale(1);
    transform: scale(1); /* Punto de partida del acercamiento. */
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out; /* Suaviza los dos cambios. */
}

/* Con el puntero encima o con el foco, la foto recupera color y se acerca. */
.FamilyGroupShowcase-tile:hover .FamilyGroupShowcase-tile-image,
.FamilyGroupShowcase-tile:focus-within .FamilyGroupShowcase-tile-image {
    filter: grayscale(0); /* Color real. */
    transform: scale(1.08); /* Crece un 8 %. */
}

/* Velo de duotono. VA EN UN ELEMENTO APARTE, ENCIMA de la imagen: puesto en la propia <img> el
   blend se mezclaría con el fondo claro de la tile y la lavaría casi a blanco. */
.FamilyGroupShowcase-tile-tint {
    position: absolute; /* Sobre la foto. */
    inset: 0; /* Cubre la tile entera. */
    z-index: 1; /* Encima de la foto. */
    background-color: rgba(15, 15, 18, 0.55); /* Gris casi negro del nodo. */
    mix-blend-mode: color; /* Tiñe sin tocar la luminosidad. */
    pointer-events: none; /* No intercepta clics. */
    opacity: 1; /* En reposo la foto se ve apagada. */
    transition: opacity 0.3s ease-in-out; /* Suaviza el desvanecido. */
}

/* Con el puntero encima o con el foco, el duotono se atenúa y aparece la foto real. */
.FamilyGroupShowcase-tile:hover .FamilyGroupShowcase-tile-tint,
.FamilyGroupShowcase-tile:focus-within .FamilyGroupShowcase-tile-tint {
    opacity: 0.15; /* Casi transparente. */
}

/* Velo plano para el contraste del texto blanco: el duotono solo no alcanza. */
.FamilyGroupShowcase-tile::before {
    content: ""; /* Necesario para que el pseudoelemento exista. */
    position: absolute; /* Sobre el duotono. */
    inset: 0; /* Cubre la tile entera. */
    z-index: 2; /* Encima del duotono. */
    background-color: rgba(15, 15, 18, 0.32); /* Oscurecido plano. */
    pointer-events: none; /* No intercepta clics. */
}

/* Filete superior, igual criterio que PhotoMosaicGrid. */
.FamilyGroupShowcase-tile-fillet {
    position: absolute; /* Sobre las capas. */
    top: 0; /* Al borde de arriba. */
    left: 0; /* De borde a borde. */
    width: 100%; /* Ancho completo. */
    height: 1px; /* Línea del nodo. */
    z-index: 3; /* Por encima de los velos. */
    background-color: rgba(255, 255, 255, 0.35); /* Blanco tenue. */
    pointer-events: none; /* No intercepta clics. */
}

/* Número de orden de la tile. */
.FamilyGroupShowcase-tile-number {
    position: absolute; /* Esquina superior izquierda. */
    top: 22px; /* Posición del nodo. */
    left: 22px; /* Ídem. */
    z-index: 3; /* Por encima de los velos. */
    font-size: 13px; /* Tamaño del nodo. */
    font-weight: 600; /* Semibold del diseño. */
    letter-spacing: normal; /* El nodo no abre las letras. */
    color: rgba(255, 255, 255, 0.8); /* Blanco atenuado. */
    pointer-events: none; /* No intercepta clics. */
}

/* Bloque acento en la esquina inferior derecha. */
.FamilyGroupShowcase-tile-accent {
    position: absolute; /* Anclado a la esquina. */
    z-index: 3; /* Por encima de los velos. */
    left: 65.92%; /* 385/584 del nodo. */
    bottom: 0; /* Pegado al borde inferior. */
    width: 34.08%; /* 199/584 del nodo. */
    height: 5.19%; /* 14/270 del nodo. */
    background-color: var(--tile-accent, #ff5a1f); /* La fija la vista con el color del editor. */
    pointer-events: none; /* No intercepta clics. */
    transition: left 0.2s ease-in-out, width 0.2s ease-in-out, height 0.2s ease-in-out; /* Suaviza el ensanche. */
}

/* Al pasar el puntero el acento se expande y se afina: es el estado que el mockup congeló en la
   primera tile como ejemplo del hover, no un tamaño fijo de esa tarjeta. */
.FamilyGroupShowcase-tile:hover .FamilyGroupShowcase-tile-accent,
.FamilyGroupShowcase-tile:focus-within .FamilyGroupShowcase-tile-accent {
    left: 0; /* Desde el borde izquierdo. */
    width: 100%; /* Borde a borde. */
    height: 2.96%; /* 8/270 del nodo: más fino. */
}

/* Bloque de texto, anclado al pie de la tile. */
.FamilyGroupShowcase-tile-content {
    position: absolute; /* Sobre las capas. */
    left: 0; /* Ancho completo, anclado abajo. */
    right: 0; /* Ídem. */
    bottom: 0; /* Ídem. */
    z-index: 3; /* Por encima de los velos. */
    display: flex; /* Apila línea, título y descripción. */
    flex-direction: column; /* En columna. */
    align-items: flex-start; /* Texto a la izquierda. */
    gap: 8px; /* Separación entre las piezas. */
    padding: 0 32px 30px; /* Rellenos del nodo. */
}

/* Línea corta de acento, arriba del título. */
.FamilyGroupShowcase-tile-accent-line {
    width: 34px; /* Ancho del nodo. */
    height: 3px; /* Grosor del nodo. */
    background-color: var(--tile-accent, #ff5a1f); /* Mismo color que el bloque acento. */
}

/* Nombre del grupo. */
.FamilyGroupShowcase-tile-title {
    margin: 0; /* Quita el margen propio del título. */
    font-size: clamp(22px, 2.5vw, 32px); /* 32/1280 del nodo. */
    font-weight: 700; /* Bold del diseño. */
    line-height: 1.2; /* Interlineado de titular. */
    color: #ffffff; /* Blanco sobre la foto. */
}

/* Lista de subgrupos, en una línea. */
.FamilyGroupShowcase-tile-description {
    margin: 0; /* Quita el margen propio del párrafo. */
    font-size: 16px; /* Tamaño del nodo. */
    font-weight: 400; /* Regular del diseño. */
    line-height: 1.6; /* Interlineado de lectura. */
    color: rgba(255, 255, 255, 0.85); /* Blanco atenuado. */
    overflow: hidden; /* La lista se corta con puntos en vez de romper la tarjeta. */
    text-overflow: ellipsis; /* Puntos suspensivos al cortar. */
    white-space: nowrap; /* En una sola línea. */
}

/* El CTA solo aparece con el puntero encima o con el foco: el layer "cta hover" del Figma es eso,
   no contenido permanente de una tarjeta. */
.FamilyGroupShowcase-tile-cta {
    display: none; /* Oculto en reposo. */
    align-items: center; /* Leyenda y flecha centradas entre sí. */
    gap: 6px; /* Separación entre las dos. */
    margin-top: 4px; /* Separación con la descripción. */
    font-size: 16px; /* Tamaño del nodo. */
    font-weight: 400; /* Sin negrita, por pedido explícito. */
    text-decoration: none; /* Sin subrayado. */
}

    /* Mismo color en los cuatro estados: le gana al a:hover/a:visited de Bootstrap. */
    .FamilyGroupShowcase-tile-cta,
    .FamilyGroupShowcase-tile-cta:hover,
    .FamilyGroupShowcase-tile-cta:focus,
    .FamilyGroupShowcase-tile-cta:visited {
        color: #ffffff; /* Blanco sobre la foto. */
        text-decoration: none;
    }

/* Flecha estándar del proyecto (line + polyline), igual que LegalLinksSection y las demás. */
.FamilyGroupShowcase-tile-cta-arrow {
    width: 14px;
    height: 14px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* El CTA aparece con el puntero encima o con el foco. */
.FamilyGroupShowcase-tile:hover .FamilyGroupShowcase-tile-cta,
.FamilyGroupShowcase-tile:focus-within .FamilyGroupShowcase-tile-cta {
    display: flex; /* Visible. */
}

/* Alto total de la grilla: todas las tiles son absolutas y sin esto el contenedor colapsa. Se
   calcula con el mismo criterio que el "top" de cada tile. --total-rows la fija la vista con la
   cantidad REAL de tarjetas: con un valor fijo sobraba media sección vacía. */
.FamilyGroupShowcase-grid::after {
    content: ""; /* Necesario para que el pseudoelemento exista. */
    display: block; /* Ocupa su propia línea. */
    height: calc(((var(--total-rows, 1) - 1) * 22.66vw) + 4.69vw + 21.09vw); /* Filas, desfase y una tile. */
    max-height: calc(((var(--total-rows, 1) - 1) * 320px * 22.66 / 21.09) + 71.2px + 320px); /* Mismos techos que la tile. */
    visibility: hidden; /* Solo reserva alto: no se ve. */
    pointer-events: none; /* No intercepta clics. */
}

/* --- Tablet: hasta 1024px. Se simplifica por completo: grilla regular (NO escalonada), sin
   numeración, sin lista de subgrupos y sin CTA. Solo título y "N tipos". --- */
@media (max-width: 1024px) {
    .FamilyGroupShowcase-grid {
        position: static; /* Ya no es origen de nada: las tiles vuelven al flujo. */
        display: grid; /* Cuadrícula regular. */
        grid-template-columns: repeat(3, 1fr); /* Tres columnas. */
        gap: 16px; /* Separación del nodo de tablet. */
    }

    .FamilyGroupShowcase-grid::after {
        content: none; /* Sin tiles absolutas no hace falta reservar el alto. */
    }

    .FamilyGroupShowcase-tile {
        position: relative; /* Vuelve al flujo. */
        inset: auto; /* Suelta los anclajes. */
        left: auto; /* Ídem. */
        top: auto; /* Ídem. */
        width: auto; /* El ancho lo da la columna de la grilla. */
        height: 26.04vw; /* 200/768 del nodo de tablet. */
        max-height: 200px; /* Techo del nodo de tablet. */
    }

    .FamilyGroupShowcase-tile-number,
    .FamilyGroupShowcase-tile-cta,
    .FamilyGroupShowcase-tile-description {
        display: none; /* No están en el nodo de tablet. */
    }

    /* Reposo: valor literal del nodo, pegado al borde izquierdo e inferior. El Figma de tablet no
       documenta hover, pero por pedido explícito se agrega la misma interacción que en PC. */
    .FamilyGroupShowcase-tile-accent {
        left: 0; /* Desde el borde izquierdo. */
        right: auto; /* Suelta el anclaje derecho. */
        bottom: 0; /* Al borde inferior. */
        width: 101px; /* Ancho del nodo de tablet. */
        max-width: 45%; /* Tope en tiles angostas. */
        height: 3px; /* Grosor del nodo. */
        transition: right 0.2s ease-in-out, width 0.2s ease-in-out; /* Suaviza el ensanche. */
    }

    /* Todas las propiedades explícitas, incluida height, para que no se filtre nada de la regla de
       hover de PC, que tiene la misma especificidad. */
    .FamilyGroupShowcase-tile:hover .FamilyGroupShowcase-tile-accent,
    .FamilyGroupShowcase-tile:focus-within .FamilyGroupShowcase-tile-accent {
        left: 0; /* Desde el borde izquierdo. */
        right: 0; /* Borde a borde de verdad. */
        width: auto; /* El ancho lo dan los dos anclajes. */
        max-width: none; /* Sin tope. */
        height: 3px; /* Mismo grosor. */
    }

    .FamilyGroupShowcase-tile-content {
        padding: 0 16px 16px; /* Rellenos del nodo de tablet. */
        gap: 6px; /* Separación más corta. */
    }

    .FamilyGroupShowcase-tile-accent-line {
        display: none; /* No está en el nodo de tablet. */
    }

    .FamilyGroupShowcase-tile-title {
        font-size: clamp(15px, 2.08vw, 16px); /* 16/768 del nodo. */
    }

    /* El conteo SÍ se pinta en tablet y mobile, aunque la descripción larga esté oculta. */
    .FamilyGroupShowcase-tile-content::after {
        content: attr(data-children-count) " tipos"; /* Toma el dato del atributo de la vista. */
        font-size: 11px; /* Tamaño del nodo. */
        font-weight: 400; /* Regular. */
        color: rgba(255, 255, 255, 0.75); /* Blanco atenuado. */
    }
}

/* --- Mobile: hasta 500px. Dos columnas y tiles más chicas. --- */
@media (max-width: 500px) {
    .FamilyGroupShowcase-grid {
        grid-template-columns: repeat(2, 1fr); /* Dos columnas. */
        gap: 12px; /* Separación del nodo de mobile. */
    }

    .FamilyGroupShowcase-tile {
        height: 39.47vw; /* 148/375 del nodo de mobile. */
        max-height: 148px; /* Techo del nodo de mobile. */
    }

    /* Mismo criterio que tablet: valor literal del nodo, al ras del borde. */
    .FamilyGroupShowcase-tile-accent {
        left: 0; /* Desde el borde izquierdo. */
        right: auto; /* Suelta el anclaje derecho. */
        bottom: 0; /* Al borde inferior. */
        width: 73px; /* Ancho del nodo de mobile. */
        max-width: 45%; /* Tope en tiles angostas. */
        height: 3px; /* Grosor del nodo. */
        transition: right 0.2s ease-in-out, width 0.2s ease-in-out; /* Suaviza el ensanche. */
    }

    /* Ensanche borde a borde en este rango. */
    .FamilyGroupShowcase-tile:hover .FamilyGroupShowcase-tile-accent,
    .FamilyGroupShowcase-tile:focus-within .FamilyGroupShowcase-tile-accent {
        left: 0; /* Desde el borde izquierdo. */
        right: 0; /* Borde a borde de verdad. */
        width: auto; /* El ancho lo dan los dos anclajes. */
        max-width: none; /* Sin tope. */
        height: 3px; /* Mismo grosor. */
    }

    .FamilyGroupShowcase-tile-title {
        font-size: clamp(13px, 3.87vw, 14.5px); /* 14.5/375 del nodo. */
    }

    .FamilyGroupShowcase-tile-content::after {
        font-size: 10px; /* Conteo más chico. */
    }
}

/* El marcador del editor usa las clases WidgetPlaceholder de site.css, no este archivo. */