/* cierre-ejemplo-gv1.css · 26/10/2026 · Programador web. Diagrama de ejemplo del cierre de la portada
   (Logística Ardelvia, S. L., empresa ficticia; maqueta del Diseñador UX/UI cierre-resultado-v1). Solo afecta a .v7-cierre. */
.v7-cierre{--carbon:var(--v7-carbon);--naranja:var(--v7-naranja);--naranja-tinte:var(--v7-naranja-tinte);--accion:var(--v7-accion);--borde:var(--v7-borde);--blanco:var(--v7-blanco);--niebla:var(--v7-niebla);--artico:var(--v7-artico);--texto-2:var(--v7-texto-2);--radio-m:var(--v7-radio-m);--f-txt:var(--v7-f-txt);--f-tit:var(--v7-f-tit)}
.v7-cierre .cierre-grid{display:grid;gap:32px}
.v7-cierre .cierre-grid>*{max-width:820px}
.v7-cierre .ejemplo{margin:0;min-width:0}
.v7-cierre .ejemplo-etq{display:inline-flex;align-items:center;gap:8px;margin:0 0 10px;font:700 13px/1.3 var(--f-txt);letter-spacing:.04em;text-transform:uppercase;color:var(--carbon)}
.v7-cierre .ejemplo-etq::before{content:"";width:24px;height:3px;border-radius:2px;background:var(--naranja)}
.v7-cierre .ventana{position:relative;background:var(--blanco);border:1px solid var(--borde);border-radius:var(--radio-m);box-shadow:0 14px 36px rgba(62,74,89,.12);overflow:hidden}
.v7-cierre .ventana-barra{display:flex;gap:6px;align-items:center;height:28px;padding:0 12px;background:var(--niebla);border-bottom:1px solid var(--borde)}
.v7-cierre .ventana-barra span{width:10px;height:10px;border-radius:50%;background:var(--blanco);box-shadow:inset 0 0 0 1px var(--borde)}
.v7-cierre .ventana-cuerpo{padding:12px 8px 10px}
.v7-cierre .dg-cab{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 4px 10px}
.v7-cierre .dg-cod{font:700 12px/1 var(--f-txt);letter-spacing:.04em;color:var(--carbon);background:var(--niebla);border:1px solid var(--borde);border-radius:6px;padding:5px 8px}
.v7-cierre .dg-tit{font:700 15px/1.3 var(--f-tit);color:var(--carbon)}
.v7-cierre .dg{display:block;width:100%;height:auto;font-family:var(--f-txt)}
.v7-cierre .dg-h{display:none}
.v7-cierre .dg-v{max-width:420px;margin:0 auto}
.v7-cierre .dg-lane{fill:var(--blanco);stroke:var(--borde)}
.v7-cierre .dg-band{fill:var(--artico);stroke:var(--borde)}
.v7-cierre .dg-l{font-size:13px;font-weight:700;fill:var(--texto-2);text-anchor:middle}
.v7-cierre .dg-izq{text-anchor:start}
.v7-cierre .dg-e{font-size:13px;font-weight:600;fill:var(--carbon)}
.v7-cierre .dg-c{text-anchor:middle}
.v7-cierre .dg-k{fill:var(--blanco);stroke:var(--carbon);stroke-width:1.5}
.v7-cierre .dg-t{font-weight:600;fill:var(--carbon);text-anchor:middle}
.v7-cierre .dg-n{fill:var(--carbon)}
.v7-cierre .dg-nt{font-size:12px;font-weight:700;fill:var(--blanco);text-anchor:middle}
.v7-cierre .dg-bd{fill:var(--naranja-tinte);stroke:var(--naranja)}
.v7-cierre .dg-b{font-weight:700;fill:var(--accion);text-anchor:middle}
.v7-cierre .dg-fl{fill:none;stroke:var(--carbon);stroke-width:1.5}
.v7-cierre .dg-ah{fill:var(--carbon)}
.v7-cierre .dg-msg{fill:none;stroke:var(--carbon);stroke-width:1.5;stroke-dasharray:5 4}
.v7-cierre .dg-am{fill:var(--blanco);stroke:var(--carbon);stroke-width:1.5;stroke-linejoin:round}
.v7-cierre .dg-ini{fill:var(--blanco);stroke:var(--carbon);stroke-width:1.5}
.v7-cierre .dg-fin{fill:var(--blanco);stroke:var(--carbon);stroke-width:3.5}
.v7-cierre .ejemplo figcaption{margin-top:12px;font-size:15px;line-height:1.5;color:var(--texto-2)}
@media (min-width:640px){
.v7-cierre .dg-h{display:block}
.v7-cierre .dg-v{display:none}
.v7-cierre .ventana-cuerpo{padding:16px 14px 14px}
}
@media (min-width:900px){
.v7-cierre .cierre-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);gap:56px;align-items:center}
.v7-cierre .cierre-grid>*{max-width:none}
}
.v7-cierre .dg-h .dg-l,.v7-cierre .dg-h .dg-e,.v7-cierre .dg-h .dg-nt{font-size:14px}
.v7-cierre .dg-emp{flex-basis:100%;font-size:13px;line-height:1.3;color:var(--texto-2)}
.v7-cierre .cierre-grid .v7-in-txt>*{max-width:none}