.extras-showcase{position:relative;overflow:hidden;padding:120px 0;background:linear-gradient(180deg,#071013,#0a1518)}.extras-showcase:before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(34,189,199,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(34,189,199,.025) 1px,transparent 1px);background-size:48px 48px}.extras-heading{position:relative;display:grid;grid-template-columns:1.25fr .75fr;align-items:end;gap:70px;margin-bottom:48px}.extras-heading h2{max-width:720px;margin:17px 0 0;color:#f7fbfc;font-size:clamp(40px,5vw,64px);line-height:1.04;letter-spacing:-.055em}.extras-heading h2 em{font-style:normal;background:linear-gradient(100deg,var(--blue),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}.extras-heading>p{max-width:440px;color:#8ca1a8;font-size:15px;line-height:1.8}.extras-grid{position:relative;display:grid;grid-template-columns:repeat(12,1fr);gap:16px}.extra-card{grid-column:span 5;min-height:300px;padding:24px;border:1px solid #203b42;border-radius:20px;background:linear-gradient(145deg,rgba(15,31,36,.96),rgba(8,20,24,.98));box-shadow:0 24px 55px rgba(0,0,0,.2);transition:transform .25s ease,border-color .25s ease}.extra-card:nth-child(3),.extra-card:nth-child(5){grid-column:span 4}.extra-card--wide{grid-column:span 7}.extra-card:nth-child(6){grid-column:span 8}.extra-card:hover{transform:translateY(-4px);border-color:#2b626c}.extra-card-top{display:flex;align-items:center;justify-content:space-between}.extra-number{color:#56808a;font-size:8px;font-weight:800;letter-spacing:.16em}.extra-card-top>i{display:grid;place-items:center;width:38px;height:38px;border:1px solid #27505a;border-radius:10px;background:#10262c;color:var(--cyan);font-size:17px;font-style:normal}.extra-card h3{margin:20px 0 8px;color:#f6fafb;font-size:22px;letter-spacing:-.035em}.extra-card>p{max-width:560px;color:#8da1a8;font-size:12px;line-height:1.7}.extra-visual-slot{position:relative;display:flex;align-items:flex-end;justify-content:space-between;min-height:105px;margin-top:18px;padding:16px;border:1px dashed #28515a;border-radius:14px;background:rgba(34,189,199,.035)}.extra-visual-slot>span{position:absolute;top:12px;left:14px;color:#557a83;font-size:6px;font-weight:800;letter-spacing:.14em}.extra-sync-lines{display:grid;width:100%;gap:7px}.extra-sync-lines i{display:block;width:var(--line,88%);height:7px;border-radius:5px;background:linear-gradient(90deg,#1fb4c1,rgba(31,180,193,.1))}.extra-sync-lines i:nth-child(2){--line:71%}.extra-sync-lines i:nth-child(3){--line:92%}.extra-sync-lines i:nth-child(4){--line:58%}.extra-visual-slot--files{justify-content:flex-start;gap:8px}.extra-visual-slot--files b{display:grid;place-items:center;width:54px;height:45px;border:1px solid #31525a;border-radius:9px;color:#94b4bb;font-size:8px}.extra-visual-slot--notice{align-items:center;justify-content:center;gap:10px}.extra-visual-slot--notice b{color:var(--cyan);font-size:40px}.extra-visual-slot--notice small{max-width:70px;color:#9db2b8;font-size:9px;line-height:1.2}.extra-visual-slot--admin>div{display:flex;flex-wrap:wrap;gap:7px}.extra-visual-slot--admin b{padding:7px 10px;border:1px solid #2d5058;border-radius:99px;color:#9bb2b8;font-size:8px;font-weight:600}.extra-card--catalog{background:radial-gradient(circle at 85% 20%,rgba(34,189,199,.13),transparent 35%),linear-gradient(145deg,#0f1f24,#081418)}.extra-catalog-number{display:grid;align-content:center;min-height:124px}.extra-catalog-number strong{color:var(--cyan);font-size:68px;line-height:.9;letter-spacing:-.07em}.extra-catalog-number span{margin-top:10px;color:#729099;font-size:7px;font-weight:800;letter-spacing:.18em}.extra-visual-slot--storage>div{display:flex;align-items:flex-end;width:100%;height:58px;gap:10px}.extra-visual-slot--storage i{display:block;width:30%;height:var(--value);border-radius:7px 7px 3px 3px;background:linear-gradient(#2bc7cf,#12606a)}html[data-theme="light"] .extras-showcase{background:linear-gradient(180deg,#f7fbfc,#eef7f8)}html[data-theme="light"] .extras-heading h2,html[data-theme="light"] .extra-card h3{color:#102b32}html[data-theme="light"] .extras-heading>p,html[data-theme="light"] .extra-card>p{color:#5d747c}html[data-theme="light"] .extra-card{border-color:#c5dce0;background:rgba(255,255,255,.9);box-shadow:0 22px 50px rgba(45,88,97,.1)}html[data-theme="light"] .extra-visual-slot{border-color:#acd0d6;background:#f2fafb}html[data-theme="light"] .extra-card-top>i{border-color:#b6d5da;background:#e9f7f8}html[data-theme="light"] .extra-card--catalog{background:radial-gradient(circle at 85% 20%,rgba(34,189,199,.13),transparent 35%),#fff}@media(max-width:900px){.extras-heading{grid-template-columns:1fr;gap:20px}.extra-card,.extra-card--wide,.extra-card:nth-child(3),.extra-card:nth-child(5),.extra-card:nth-child(6){grid-column:span 6}}@media(max-width:600px){.extras-showcase{padding:90px 0}.extras-grid{grid-template-columns:1fr}.extra-card,.extra-card--wide,.extra-card:nth-child(3),.extra-card:nth-child(5),.extra-card:nth-child(6){grid-column:1;min-height:0}.extras-heading h2{font-size:40px}.extra-card{padding:20px}.extra-card h3{font-size:21px}}
.extra-real-media{position:relative;overflow:hidden;min-height:150px;margin-top:18px;border:1px solid #294750;border-radius:14px;background:#071115}.extra-real-media img{display:block;width:100%;height:100%;min-height:150px;object-fit:cover}.extra-real-media>span{position:absolute;top:10px;left:10px;padding:6px 8px;border:1px solid rgba(255,255,255,.22);border-radius:99px;background:rgba(6,20,23,.86);color:#dff8fa;font-size:6px;font-weight:800;letter-spacing:.12em;backdrop-filter:blur(8px)}.extra-real-media--setlist img{object-position:center top}.extra-real-media--resources img{object-position:center}.extra-notification-flow{position:relative;display:grid;grid-template-columns:1.25fr 20px .75fr;align-items:center;gap:7px;height:180px;margin-top:18px}.extra-notification-flow figure{position:relative;overflow:hidden;height:100%;margin:0;border:1px solid #294750;border-radius:13px;background:#edf4f6}.extra-notification-flow figure>span{position:absolute;z-index:2;top:7px;left:7px;padding:5px 6px;border-radius:7px;background:rgba(7,22,25,.88);color:#e6f8fa;font-size:5px;font-weight:800;letter-spacing:.1em}.extra-notification-flow img{display:block;width:100%;height:100%;object-fit:cover}.extra-notification-flow figure:first-child img{object-position:center top}.extra-notification-flow figure:last-child img{object-position:center 18%}.extra-notification-flow>b{display:grid;place-items:center;width:24px;height:24px;margin-left:-2px;border-radius:50%;background:#12323a;color:var(--cyan);font-size:11px}html[data-theme="light"] .extra-real-media,html[data-theme="light"] .extra-notification-flow figure{border-color:#bad5da;background:#fff}@media(max-width:600px){.extra-real-media{min-height:135px}.extra-real-media img{min-height:135px}.extra-notification-flow{grid-template-columns:1fr 18px .62fr;height:170px}}
.extra-card--notifications{grid-column:span 7!important;position:relative;overflow:hidden;border-color:#28616b;background:radial-gradient(circle at 15% 12%,rgba(34,189,199,.15),transparent 34%),linear-gradient(145deg,#10262c,#081519)}.extra-card:nth-child(4){grid-column:span 5}.extra-card--notifications:before{content:"";position:absolute;right:-70px;bottom:-90px;width:220px;height:220px;border:1px solid rgba(34,189,199,.12);border-radius:50%;box-shadow:0 0 0 38px rgba(34,189,199,.025),0 0 0 76px rgba(34,189,199,.02)}.extra-card--notifications>*{position:relative;z-index:1}.extra-featured-label{margin-left:auto;margin-right:10px;padding:6px 9px;border:1px solid #2a626c;border-radius:99px;background:rgba(34,189,199,.08);color:#67d1d8;font-size:6px;font-weight:800;letter-spacing:.13em}.extra-card--notifications .extra-notification-flow{height:245px;grid-template-columns:1.1fr 24px .72fr}.extra-card--notifications h3{font-size:25px}.extra-notification-note{display:flex;align-items:center;gap:9px;margin-top:16px;padding:11px 12px;border:1px solid #28515a;border-radius:10px;background:rgba(34,189,199,.055);color:#a8c0c6;font-size:9px}.extra-notification-note i{width:7px;height:7px;border-radius:50%;background:#2bdd9a;box-shadow:0 0 0 4px rgba(43,221,154,.1)}html[data-theme="light"] .extra-card--notifications{border-color:#9bcbd2;background:radial-gradient(circle at 15% 12%,rgba(34,189,199,.12),transparent 34%),#fff}html[data-theme="light"] .extra-featured-label{border-color:#abd3d8;background:#edf9fa;color:#168a97}html[data-theme="light"] .extra-notification-note{border-color:#b7d8dd;background:#eef9fa;color:#4f6f77}@media(max-width:900px){.extra-card--notifications,.extra-card:nth-child(4){grid-column:span 6!important}}@media(max-width:600px){.extra-card--notifications,.extra-card:nth-child(4){grid-column:1!important}.extra-card--notifications .extra-notification-flow{height:220px}.extra-featured-label{font-size:5px}.extra-card--notifications h3{font-size:23px}}

/* Las dos pantallas deben conservar suficiente altura para explicar el flujo. */
.extra-card--notifications .extra-notification-flow{height:360px;grid-template-columns:1fr 28px .86fr;gap:10px}
.extra-card--notifications .extra-notification-flow figure{background:linear-gradient(180deg,#edf4f6,#dfe9ec)}
.extra-card--notifications .extra-notification-flow img{object-fit:contain;object-position:center top}
@media(max-width:900px){.extra-card--notifications .extra-notification-flow{height:330px}}
@media(max-width:600px){.extra-card--notifications .extra-notification-flow{grid-template-columns:1fr 20px .82fr;height:300px;gap:6px}}

/* Primera fila asimétrica: repertorio protagonista y aportes en formato móvil. */
.extras-grid>.extra-card:first-child{grid-column:span 8}
.extra-card--resources{grid-column:span 4;display:flex;flex-direction:column}
.extra-card--resources .extra-real-media--resources{display:flex;justify-content:center;height:360px;min-height:360px;padding:0;background:linear-gradient(180deg,#152126,#091316)}
.extra-card--resources .extra-real-media--resources img{width:auto;max-width:100%;height:100%;min-height:0;object-fit:contain;object-position:center top}
.extra-card--resources h3{margin-top:18px}
html[data-theme="light"] .extra-card--resources .extra-real-media--resources{background:#e9f0f2}
@media(max-width:900px){.extras-grid>.extra-card:first-child,.extra-card--resources{grid-column:span 6}.extra-card--resources .extra-real-media--resources{height:330px;min-height:330px}}
@media(max-width:600px){.extras-grid>.extra-card:first-child,.extra-card--resources{grid-column:1}.extra-card--resources .extra-real-media--resources{height:390px;min-height:390px}}

.extra-admin-checklist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:22px}.extra-admin-checklist span{display:flex;align-items:center;gap:9px;padding:11px 12px;border:1px solid #294b53;border-radius:10px;background:rgba(34,189,199,.04);color:#b5c9ce;font-size:10px;font-weight:650}.extra-admin-checklist span:before{content:"✓";display:grid;place-items:center;flex:0 0 19px;width:19px;height:19px;border:1px solid #23707b;border-radius:50%;color:var(--cyan);font-size:10px}.extra-card--admin h3{margin-top:22px}html[data-theme="light"] .extra-admin-checklist span{border-color:#c4dce0;background:#f3fafb;color:#38545b}
.extra-storage-real{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}.extra-storage-real figure{position:relative;overflow:hidden;height:220px;margin:0;border:1px solid #294a52;border-radius:13px;background:#eef3f5}.extra-storage-real img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}.extra-storage-real figure>span{position:absolute;left:9px;bottom:9px;padding:6px 8px;border:1px solid rgba(255,255,255,.2);border-radius:99px;background:rgba(6,20,23,.88);color:#dff8fa;font-size:6px;font-weight:800;letter-spacing:.11em;backdrop-filter:blur(7px)}html[data-theme="light"] .extra-storage-real figure{border-color:#bdd7dc}
@media(max-width:600px){.extra-admin-checklist{grid-template-columns:1fr}.extra-storage-real{grid-template-columns:1fr}.extra-storage-real figure{height:190px}}

/* Administración: recorrido vertical, con el título como cierre del bloque. */
.extra-card--admin{display:flex;flex-direction:column}.extra-card--admin .extra-admin-checklist{position:relative;grid-template-columns:1fr;gap:7px;margin:22px 0 20px;padding-left:14px}.extra-card--admin .extra-admin-checklist:before{content:"";position:absolute;top:18px;bottom:18px;left:23px;width:1px;background:linear-gradient(transparent,var(--cyan) 14%,var(--cyan) 86%,transparent);opacity:.35}.extra-card--admin .extra-admin-checklist span{position:relative;z-index:1;min-height:38px;padding:9px 12px;background:linear-gradient(90deg,rgba(34,189,199,.09),rgba(34,189,199,.025))}.extra-card--admin h3{margin-top:auto;margin-bottom:2px;padding-top:17px;border-top:1px solid rgba(72,135,146,.28)}.extra-card--admin>p{display:none}html[data-theme="light"] .extra-card--admin .extra-admin-checklist span{background:linear-gradient(90deg,#e9f8f9,#f8fcfc)}

/* Reequilibrio final: administración compacta en dos columnas y descripción visible. */
.extra-card--admin .extra-admin-checklist{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:22px 0 20px;padding-left:0}.extra-card--admin .extra-admin-checklist:before{display:none}.extra-card--admin .extra-admin-checklist span{min-height:49px;padding:10px 11px;font-size:12px;line-height:1.25}.extra-card--admin .extra-admin-checklist span:before{flex-basis:22px;width:22px;height:22px;font-size:11px}.extra-card--admin h3{margin-top:auto;margin-bottom:7px}.extra-card--admin>p{display:block;font-size:11px;line-height:1.55}
/* La biblioteca funciona como acento; el panel operativo recibe el espacio principal. */
.extras-grid>.extra-card--catalog{grid-column:span 3!important}.extras-grid>.extra-card--storage{grid-column:span 9!important}.extra-card--catalog h3{font-size:20px;line-height:1.18}.extra-card--catalog .extra-catalog-number strong{font-size:62px}.extra-card--storage .extra-storage-real figure{height:250px}
@media(max-width:900px){.extras-grid>.extra-card--catalog,.extras-grid>.extra-card--storage{grid-column:span 6!important}.extra-card--storage .extra-storage-real{grid-template-columns:1fr}.extra-card--storage .extra-storage-real figure{height:230px}}
@media(max-width:600px){.extra-card--admin .extra-admin-checklist{grid-template-columns:1fr}.extras-grid>.extra-card--catalog,.extras-grid>.extra-card--storage{grid-column:1!important}.extra-card--storage .extra-storage-real figure{height:190px}}