/*grid de 7 secciones*/
.siete-grid { 
    display:grid; 
    grid-template-columns:repeat(3,1fr); 
    gap:1px; 
    background:var(--line); 
    border:1px solid var(--line); 
    margin:2.5rem 0;
}

.sec7,
.sec7--full {
    background: var(--bg);
    position: relative;
    overflow: hidden;
    transition: background .3s;
}

.sec7 {
    padding: 2rem 2.2rem;
}

.sec7--full {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2.5rem 2.2rem;
}

.sec7::after,
.sec7--full::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--orange);
    transition: width .4s ease;
}

.sec7:hover,
.sec7--full:hover {
    background: var(--light);
}

.sec7:hover::after,
.sec7--full:hover::after {
    width: 100%;
}

.sec7:hover::after { 
    width:100%; 
}

.sec7-num { font-family:var(--mono); font-size:.56rem; color:var(--orange); letter-spacing:.14em; text-transform:uppercase; display:block; margin-bottom:.7rem; }
.sec7-name { font-family:var(--mono); font-size:.95rem; font-weight:500; color:var(--black); margin-bottom:.8rem; }
.sec7-desc { font-size:.8rem; font-weight:300; color:var(--gray); line-height:1.7; margin-bottom:1rem; }
.sec7-ejemplos { display:flex; flex-wrap:wrap; gap:.4rem; }
.sec7-ejemplos span { font-family:var(--mono); font-size:.56rem; background:var(--light); padding:.2rem .6rem; color:var(--gray); border:1px solid var(--line); }

/*grid de plataformas*/
.plat-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin:2.5rem 0; }
.plat { background:var(--bg); padding:0; }
.plat-header { display:flex; align-items:center; gap:.9rem; padding:1.2rem 1.8rem; border-bottom:1px solid var(--line); background:var(--light); }
.plat-icon { font-family:var(--mono); font-size:1.1rem; font-weight:500; color:var(--orange); width:32px; height:32px; display:flex; align-items:center; justify-content:center; border:1px solid var(--orange); flex-shrink:0; }
.plat-name { font-family:var(--fd); font-size:.85rem; font-weight:700; color:var(--black); letter-spacing:.02em; text-transform:uppercase; }
.plat-tree { padding:1.4rem 1.8rem; font-family:var(--mono); font-size:.74rem; line-height:2; }
.plat-tree .dir { color:var(--black); font-weight:500; display:block; }
.plat-tree .file { color:var(--gray); padding-left:1.2rem; display:block; }

/*bloques de caso*/
.caso-bloque { border:1px solid var(--line); margin:2.5rem 0; }
.caso-header { padding:1.8rem 2rem; border-bottom:1px solid var(--line); background:var(--light); }
.caso-num { font-family:var(--mono); font-size:.56rem; color:var(--orange); letter-spacing:.16em; text-transform:uppercase; display:block; margin-bottom:.5rem; }
.caso-title { font-family:var(--fd); font-size:1.1rem; font-weight:700; color:var(--black); margin-bottom:.5rem; }
.caso-desc { font-size:.8rem; font-weight:300; color:var(--gray); line-height:1.65; }
.caso-body { padding:2rem; }
.caso-body .pop-tree { margin:0; }

img { 
    max-width:100%; 
    display:block; 
    margin:2rem auto; 
}

@media (max-width:900px) {
    .siete-grid { grid-template-columns:1fr; }
    .sec7--full { grid-column:1; }
    .plat-grid { grid-template-columns:1fr; }
    .caso-header { padding:1.4rem; }
    .caso-body { padding:1.4rem; }
}