/* hub-perfiles.css · estilos propios de la super-página /productos/perfiles-silicona
 * Solo lo que app.css no cubre: la rejilla de geometrías y la nota bajo las cards.
 * Breakpoints alineados con el sitio: 900px (tablet) y 540px (móvil). */

/* Nota enlazada bajo la rejilla de fichas */
.hpf-note{
    max-width:760px;
    margin:28px auto 0;
    text-align:center;
    color:var(--ink-2);
}
.hpf-note a{color:var(--black);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.hpf-note a:hover{color:var(--accent)}

/* Rejilla de geometrías: foto cuadrada + pie con nombre y uso */
.hpf-geo{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
    margin-top:40px;
}
.hpf-geo__item{
    margin:0;
    background:var(--bg);
    display:flex;
    flex-direction:column;
}
.hpf-geo__item img{
    width:100%;
    height:auto;
    aspect-ratio:1/1;
    object-fit:cover;
    display:block;
}
.hpf-geo__item figcaption{
    padding:16px 18px 20px;
    display:flex;
    flex-direction:column;
    gap:6px;
    flex:1;
}
.hpf-geo__item figcaption strong{
    color:var(--black);
    font-size:15px;
    letter-spacing:.01em;
}
.hpf-geo__item figcaption span{
    font-size:13.5px;
    line-height:1.55;
    color:var(--ink-3);
}
.hpf-geo__item--more{
    justify-content:center;
    background:var(--ink);
}
.hpf-geo__item--more figcaption{
    flex:1;
    justify-content:center;
    text-align:center;
    align-items:center;
    gap:10px;
    padding:28px 22px;
}
.hpf-geo__item--more figcaption strong{color:#fff;font-size:24px;line-height:1.25}
.hpf-geo__item--more figcaption span{color:rgba(255,255,255,.72)}
.hpf-geo__item--more .hm-link{margin-top:10px;color:var(--accent)}
/* Variante de 3 columnas (hub piezas: 6 figuras en 2 filas de 3) */
.hpf-geo--tres{grid-template-columns:repeat(3,1fr)}
/* Variante a todo el ancho (hub juntas: 4 figuras arriba + esta celda debajo) */
.hpf-geo__item--ancho{grid-column:1/-1}
.hpf-geo__item--ancho figcaption{padding:44px 24px;max-width:640px;margin:0 auto}

/* Tablet: 2 columnas */
@media(max-width:900px){
    .hpf-geo{grid-template-columns:repeat(2,1fr)}
}
/* Móvil: 1 columna, pies más compactos */
@media(max-width:540px){
    .hpf-geo{grid-template-columns:1fr;margin-top:28px}
    .hpf-geo__item figcaption{padding:14px 16px 18px}
    .hpf-note{text-align:left}
}