:root {
    --bg-dark: #020c1b;
    --bg-card: #112240;
    --text-primary: #ccd6f6;
    --text-secondary: #8892b0;
    --accent: #64ffda;
    --accent-glow: rgba(100, 255, 218, 0.1);
    --white: #e6f1ff;
    --font-main: 'Outfit', sans-serif;
    --nav-height: 80px;
    --transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* SolveNova Custom Font */
@font-face {
    font-family: 'SolveNova';
    src: url('../assets/fonts/SolveNova-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--nav-height);
}

body {
    background-color: var(--bg-dark);
    color: var(--text-primary);
    font-family: var(--font-main);
    line-height: 1.6;
    overflow-x: hidden;
    cursor: default;
}

/* Scroll Progress Bar */
#scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: var(--accent);
    z-index: 10000;
    box-shadow: 0 0 10px var(--accent);
}

/* Typography */
h1,
h2,
h3,
h4 {
    color: var(--white);
    font-weight: 600;
    margin-bottom: 1rem;
}

h1 {
    font-size: clamp(40px, 8vw, 80px);
    line-height: 1.1;
}

h2 {
    font-size: clamp(26px, 5vw, 42px);
    position: relative;
    display: inline-block;
    margin-bottom: 2rem;
}

h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 60px;
    height: 4px;
    background-color: var(--accent);
}

p {
    margin-bottom: 1rem;
    color: var(--text-secondary);
    font-size: 1.1rem;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
    cursor: pointer;
}

ul {
    list-style: none;
}

/* Utility */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section-title {
    margin-top: 0;
}

/* Header */
header {
    position: fixed;
    top: 0;
    width: 100%;
    height: var(--nav-height);
    display: flex;
    align-items: center;
    padding: 0 50px;
    z-index: 1000;
    background: rgba(2, 12, 27, 0.85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

nav {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    gap: 40px;
}

.logo {
    font-size: 1.8rem;
    font-weight: normal;
    color: white;
    letter-spacing: 0.05em;
    z-index: 2;
    font-family: 'SolveNova', sans-serif;
}

.logo a {
    color: white;
}

.nav-links {
    display: flex;
    gap: 30px;
}

.nav-links a {
    font-size: 0.9rem;
    font-weight: 400;
}

.nav-links a:hover {
    color: var(--accent);
}

.nav-links a.active {
    color: var(--accent);
}

.header-social {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-social a {
    color: var(--text-primary);
    transition: var(--transition);
    display: flex;
    align-items: center;
}

.header-social a:hover {
    color: var(--accent);
    transform: translateY(-2px);
}

.header-social i {
    width: 20px;
    height: 20px;
}

/* Language Switcher */
.lang-switcher {
    display: flex;
    flex-direction: row;
    gap: 6px;
    align-items: center;
    align-self: center;
}

.lang-flag {
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    font-family: var(--font-main);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 0;
    display: flex;
    align-items: center;
    transition: var(--transition);
    text-transform: uppercase;
    line-height: 1;
}

.lang-flag:hover {
    color: var(--accent);
    transform: translateY(-2px);
}

.lang-flag.active {
    color: var(--accent);
}

/* Hero Section */
.hero-section {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 0 20px;
    text-align: center;
    background: radial-gradient(circle at center, #112240 0%, #020c1b 100%);
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(100, 255, 218, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(100, 255, 218, 0.1) 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: center 0;
    opacity: 0.4;
    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
}

.hero-subtitle {
    margin: 20px 0 40px;
    color: var(--accent);
    font-family: monospace;
    font-size: 1rem;
}

.cta-button {
    display: inline-block;
    padding: 1rem 2rem;
    border: 1px solid var(--accent);
    color: var(--accent);
    border-radius: 4px;
    font-weight: 600;
    margin-top: 20px;
}

.cta-button:hover {
    background: var(--accent-glow);
}

.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    opacity: 0.7;
    animation: bounce 2s infinite;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    40% {
        transform: translateX(-50%) translateY(-10px);
    }

    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}

/* Sections General */
section {
    padding: 30px 0;
}

/* About & Values Continuity */
.about-section {
    background: linear-gradient(rgba(2, 12, 27, 0.9), rgba(2, 12, 27, 0.9)), url('../assets/images/office.png');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    border-top: 1px solid #112240;
}

/* Disable fixed background attachment on iOS / mobile (causes stretching on Hostinger) */
@media (max-width: 1024px),
(hover: none) {

    .about-section,
    .values-section,
    .services-section,
    .research-section {
        background-attachment: scroll;
    }
}

/* About Section */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.about-visual .tech-box {
    width: 100%;
    height: 400px;
    background: url('../assets/images/office.png');
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    position: relative;
    box-shadow: 0 10px 30px -10px rgba(2, 12, 27, 0.7);
}

.about-visual .tech-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--accent);
    opacity: 0.1;
    border-radius: 8px;
    mix-blend-mode: screen;
}

/* Mission & Vision */
.split-layout {
    display: flex;
    gap: 30px;
}

.card {
    background: var(--bg-card);
    padding: 40px;
    border-radius: 8px;
    flex: 1;
    transition: var(--transition);
    border: 1px solid transparent;
}

.card:hover {
    transform: translateY(-5px);
    border-color: var(--accent);
}

/* Values */
.values-section {
    background: linear-gradient(rgba(2, 12, 27, 0.9), rgba(2, 12, 27, 0.9)), url('../assets/images/office.png');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.value-item {
    text-align: center;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    background: rgba(17, 34, 64, 0.3);
}

.value-icon {
    width: 48px;
    height: 48px;
    color: var(--accent);
    margin-bottom: 20px;
}

/* Services & Impulsa Continuity */
.services-section {
    background: linear-gradient(rgba(2, 12, 27, 0.97), rgba(2, 12, 27, 0.97)), url('../assets/images/satellite.png');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    border-top: 1px solid #112240;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr;
    }
}

.service-card {
    background: var(--bg-card);
    padding: 30px;
    border-radius: 8px;
    transition: var(--transition);
}

.service-card:hover {
    background: #1d3356;
}

.service-icon {
    color: var(--accent);
    margin-bottom: 15px;
    width: 32px;
    height: 32px;
}

.service-card ul {
    margin-top: 15px;
    font-size: 0.9rem;
}

.service-card li {
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
}

.service-card li::before {
    content: '▹';
    position: absolute;
    left: 0;
    color: var(--accent);
}

/* Office / Work */
.work-section {
    background: linear-gradient(rgba(2, 12, 27, 0.9), rgba(2, 12, 27, 0.9)), url('../assets/images/satellite.png');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    text-align: center;
    padding: 80px 0 40px;
}

.work-section h2::after {
    display: none;
}

.office-gallery {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 20px;
}

.office-img-placeholder {
    min-width: 300px;
    height: 200px;
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--accent);
    color: var(--accent);
}

/* Research / Trabajando en */
.research-section {
    background: linear-gradient(rgba(2, 12, 27, 0.97), rgba(2, 12, 27, 0.97)), url('../assets/images/satellite.png');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}

.research-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

@media (max-width: 900px) {
    .research-cards {
        grid-template-columns: 1fr;
    }
}

.research-card {
    background: var(--bg-card);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(100, 255, 218, 0.08);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

.research-card:hover {
    transform: translateY(-6px);
    border-color: rgba(100, 255, 218, 0.4);
    box-shadow: 0 10px 30px -10px rgba(100, 255, 218, 0.12);
}

.research-card-image {
    position: relative;
    width: 100%;
    height: 200px;
    min-height: 200px;
    max-height: 200px;
    overflow: hidden;
    flex-shrink: 0;
}

/* El selector ampliado previene que Hostinger, LiteSpeed u otro optimizador
que envuelva las imágenes (e.g. con <picture> o ponga lazy-loaded spans) rompa el tamaño */
.research-card-image img,
.research-card-image picture,
.research-card-image picture img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 200px !important;
    max-height: 200px !important;
    object-fit: cover !important;
    object-position: center !important;
    filter: grayscale(20%) brightness(0.8);
    transition: var(--transition);
}

.research-card:hover .research-card-image img {
    filter: grayscale(0%) brightness(1);
}

.research-card-image--empty {
    background: rgba(17, 34, 64, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.research-empty-icon {
    width: 56px;
    height: 56px;
    color: rgba(100, 255, 218, 0.2);
    stroke-width: 1.5;
}

.research-badge-bar {
    display: block;
    width: 100%;
    text-align: center;
    background: rgba(100, 255, 218, 0.08);
    color: var(--accent);
    border-top: 1px solid rgba(100, 255, 218, 0.25);
    border-bottom: 1px solid rgba(100, 255, 218, 0.25);
    padding: 7px 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-family: monospace;
}

.research-badge-bar--soon {
    background: rgba(255, 200, 100, 0.06);
    color: #ffc864;
    border-color: rgba(255, 200, 100, 0.25);
}

.research-card--clickable {
    cursor: pointer;
}

.research-card-zoom {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(2, 12, 27, 0.45);
    opacity: 0;
    transition: var(--transition);
}

.research-card-zoom i {
    width: 40px;
    height: 40px;
    color: var(--accent);
    filter: drop-shadow(0 0 8px rgba(100, 255, 218, 0.6));
}

.research-card--clickable:hover .research-card-zoom {
    opacity: 1;
}

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(2, 12, 27, 0.93);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
    backdrop-filter: blur(6px);
}

.lightbox.active {
    opacity: 1;
    pointer-events: all;
}

.lightbox img {
    max-width: 90vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7);
    transform: scale(0.92);
    transition: transform 0.28s ease;
}

.lightbox.active img {
    transform: scale(1);
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 24px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-primary);
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: var(--transition);
}

.lightbox-close:hover {
    opacity: 1;
    color: var(--accent);
}

.lightbox-close i {
    width: 28px;
    height: 28px;
}

.research-card-body {
    padding: 20px 24px 24px;
    flex: 1;
}

.research-card-body h3 {
    font-size: 1rem;
    color: var(--white);
    margin-bottom: 8px;
    font-weight: 600;
}

.research-card-body p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.65;
}

/* Footer */
footer {
    padding: 0 0 30px;
    background: #020c1b;
    border-top: 1px solid #112240;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.contact-info {
    width: 100%;
}

.footer-divider {
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(100, 255, 218, 0.2), transparent);
    margin: 10px 0;
}

.copyright {
    text-align: center;
    opacity: 0.6;
}

.copyright p {
    font-size: 0.85rem;
    margin: 0;
    color: var(--text-secondary);
}

/* Ribbon Interface */
/* Ribbon Interface */
.ribbon-interface-container {
    padding: 1px;
    background: var(--bg-card);
    border-radius: 8px;
    box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 30px;
}

.ribbon-interface {
    display: flex;
    flex-direction: column;
    background: var(--bg-dark);
    border-radius: 6px;
    overflow: hidden;
    height: 650px;
    font-family: var(--font-main);
}

/* Tabs */
.ribbon-tabs {
    display: flex;
    background: #0a192f;
    /* Deep Navy Header */
    padding: 5px 5px 0 5px;
    gap: 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.ribbon-tab {
    padding: 5px 15px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border: 1px solid transparent;
    opacity: 0.8;
}

.ribbon-tab:hover {
    background: rgba(100, 255, 218, 0.1);
    color: var(--accent);
    opacity: 1;
}

.ribbon-tab.active {
    background: var(--bg-card);
    color: var(--accent);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 2px solid var(--bg-card);
    /* Seamless connection */
    opacity: 1;
    font-weight: 600;
}

.custom-scrollbar-outer {
    display: none;
}

/* Toolbar Area */
.ribbon-toolbar {
    background: var(--bg-card);
    /* Dark panel bg */
    display: flex;
    padding: 5px 10px;
    height: 120px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.ribbon-group {
    display: flex;
    gap: 5px;
    padding: 0 10px;
    align-items: flex-start;
    position: relative;
    height: 100%;
}

.ribbon-group-title {
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    opacity: 0.6;
}

.ribbon-separator {
    width: 2px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    margin: 0 10px;
    height: 80%;
    align-self: center;
}

/* Big Buttons */
.ribbon-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 5px 8px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-primary);
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
    font-size: 0.8rem;
    height: 75px;
    /* Reduced height */
    min-width: 60px;
    /* Reduced width */
    border-radius: 4px;
    box-shadow: none;
}

.ribbon-btn i {
    width: 32px;
    height: 32px;
    color: var(--accent);
    opacity: 0.8;
    transition: all 0.2s;
}

.ribbon-btn:hover {
    background: rgba(100, 255, 218, 0.05);
    border: 1px solid rgba(100, 255, 218, 0.2);
    box-shadow: 0 0 10px rgba(100, 255, 218, 0.05);
}

.ribbon-btn:hover i {
    opacity: 1;
    transform: scale(1.1);
}

.ribbon-btn.active {
    background: rgba(100, 255, 218, 0.1);
    border: 1px solid var(--accent);
    color: var(--white);
}

.ribbon-btn.active i {
    opacity: 1;
    filter: drop-shadow(0 0 5px var(--accent));
}

/* Small Buttons (Row) */
.ribbon-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    justify-content: flex-start;
    /* Align top */
    padding-top: 5px;
    height: 100px;
    /* More space */
}

.ribbon-btn-small {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--text-secondary);
    border-radius: 3px;
    min-width: 100px;
    text-align: left;
}

.ribbon-btn-small i {
    width: 14px;
    height: 14px;
    color: var(--accent);
    opacity: 0.7;
}

.ribbon-btn-small:hover {
    background: rgba(100, 255, 218, 0.05);
    color: var(--white);
    border: 1px solid rgba(100, 255, 218, 0.1);
}

.ribbon-select {
    appearance: none;
    -webkit-appearance: none;
    background-color: transparent;
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 4px 28px 4px 10px;
    border-radius: 4px;
    font-family: var(--font-main);
    font-size: 0.8rem;
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease;
    margin-top: 2px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364ffda' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 14px;
    width: 100%;
}

.ribbon-select:hover {
    border-color: var(--accent);
    background-color: rgba(100, 255, 218, 0.05);
}

.ribbon-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(100, 255, 218, 0.1);
}

.ribbon-select option {
    background-color: var(--bg-card);
    color: var(--text-primary);
}

.ribbon-display {
    flex: 1;
    position: relative;
    background: #020c1b;
    /* Darkest bg for content */
    overflow: hidden;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
}

.display-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
    display: flex;
    align-items: flex-end;
    padding: 40px;
    background-size: cover;
    background-position: center;
}

.display-view.active {
    opacity: 1;
    visibility: visible;
}

/* Backgrounds for views */
#view-struct {
    position: relative;
    --scale: 1;
    /* Pure CSS Isometric shape via pseudo-element */
    /* Main BG + SVG Coordinate System (Bottom Right) */
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='50' y1='80' x2='50' y2='30' stroke='%23384c6e' /%3E%3Ctext x='42' y='25' fill='%23384c6e' font-family='monospace' font-size='14' font-weight='bold' stroke='none'%3EZ%3C/text%3E%3Cline x1='50' y1='80' x2='15' y2='65' stroke='%23384c6e' /%3E%3Ctext x='2' y='70' fill='%23384c6e' font-family='monospace' font-size='14' font-weight='bold' stroke='none'%3EY%3C/text%3E%3Cline x1='50' y1='80' x2='85' y2='65' stroke='%23384c6e' /%3E%3Ctext x='88' y='70' fill='%23384c6e' font-family='monospace' font-size='14' font-weight='bold' stroke='none'%3EX%3C/text%3E%3C/svg%3E"),
        radial-gradient(circle at center, #1a202c 0%, #000 100%);
    background-position: bottom 20px right 20px, center;
    background-size: 100px 100px, cover;
    background-repeat: no-repeat;
}

#view-struct::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--width);
    height: var(--height);
    border: 2px solid var(--accent);
    --face-color: var(--bg-card);
    /* Tiled background: 4 corners + 3 fills to prevent overlap lines (quadrants) */
    background-image:
        radial-gradient(circle at 50px 50px, var(--bg-dark) var(--hole-radius), var(--accent) var(--hole-radius), var(--accent) var(--hole-radius-plus-two), var(--face-color) var(--hole-radius-plus-two)),
        radial-gradient(circle at 50px 50px, var(--bg-dark) var(--hole-radius), var(--accent) var(--hole-radius), var(--accent) var(--hole-radius-plus-two), var(--face-color) var(--hole-radius-plus-two)),
        radial-gradient(circle at 50px 50px, var(--bg-dark) var(--hole-radius), var(--accent) var(--hole-radius), var(--accent) var(--hole-radius-plus-two), var(--face-color) var(--hole-radius-plus-two)),
        radial-gradient(circle at 50px 50px, var(--bg-dark) var(--hole-radius), var(--accent) var(--hole-radius), var(--accent) var(--hole-radius-plus-two), var(--face-color) var(--hole-radius-plus-two)),
        linear-gradient(var(--face-color), var(--face-color)),
        linear-gradient(var(--face-color), var(--face-color)),
        linear-gradient(var(--face-color), var(--face-color));
    background-position:
        top left, top right, bottom left, bottom right,
        top center, bottom center, center;
    background-size:
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        calc(var(--width) - 200px) 100px, calc(var(--width) - 200px) 100px, 100% calc(var(--height) - 200px);
    background-repeat: no-repeat;
    transform: translate(-50%, -50%) scale(var(--mobile-scale, 1)) rotateX(60deg) rotateZ(45deg);
    /* Double thickness with variable layers */
    box-shadow: var(--box-shadow);
    z-index: 2;
    pointer-events: none;
}

#view-electric .table-row {
    display: none;
}

#view-electric .table-row.current {
    display: table-row;
}

#view-electric .table-row.fastener-row {
    display: table-row;
}

#view-electric {
    /* Pure CSS Isometric shape via pseudo-element */
    /* Main BG + SVG Coordinate System (Bottom Right) */
    --face-color: var(--bg-card);
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='50' y1='80' x2='50' y2='30' stroke='%23384c6e' /%3E%3Ctext x='42' y='25' fill='%23384c6e' font-family='monospace' font-size='14' font-weight='bold' stroke='none'%3EZ%3C/text%3E%3Cline x1='50' y1='80' x2='15' y2='65' stroke='%23384c6e' /%3E%3Ctext x='2' y='70' fill='%23384c6e' font-family='monospace' font-size='14' font-weight='bold' stroke='none'%3EY%3C/text%3E%3Cline x1='50' y1='80' x2='85' y2='65' stroke='%23384c6e' /%3E%3Ctext x='88' y='70' fill='%23384c6e' font-family='monospace' font-size='14' font-weight='bold' stroke='none'%3EX%3C/text%3E%3C/svg%3E"),
        radial-gradient(circle at center, #1a202c 0%, #000 100%);
    background-position: bottom 20px right 20px, center;
    background-size: 100px 100px, cover;
    background-repeat: no-repeat;
}

#view-electric::before,
#view-electric::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--width);
    height: var(--height);
    border: 2px solid var(--accent);
    --hole-inner-color: #0a192f;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

#view-electric::before {
    transform: translate(-50%, -50%) scale(var(--mobile-scale, 1)) rotateX(60deg) rotateZ(45deg);
    box-shadow: var(--box-shadow);
    z-index: 2;
    background-image:
        radial-gradient(circle at 50px 50px, var(--bg-dark) var(--hole-radius), var(--accent) var(--hole-radius), var(--accent) var(--hole-radius-plus-two), var(--face-color) var(--hole-radius-plus-two)),
        radial-gradient(circle at 50px 50px, var(--bg-dark) var(--hole-radius), var(--accent) var(--hole-radius), var(--accent) var(--hole-radius-plus-two), var(--face-color) var(--hole-radius-plus-two)),
        radial-gradient(circle at 50px 50px, var(--bg-dark) var(--hole-radius), var(--accent) var(--hole-radius), var(--accent) var(--hole-radius-plus-two), var(--face-color) var(--hole-radius-plus-two)),
        radial-gradient(circle at 50px 50px, var(--bg-dark) var(--hole-radius), var(--accent) var(--hole-radius), var(--accent) var(--hole-radius-plus-two), var(--face-color) var(--hole-radius-plus-two)),
        linear-gradient(var(--face-color), var(--face-color)),
        linear-gradient(var(--face-color), var(--face-color)),
        linear-gradient(var(--face-color), var(--face-color));
    background-position:
        top left, top right, bottom left, bottom right,
        top center, bottom center, center;
    background-size:
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        calc(var(--width) - 200px) 100px, calc(var(--width) - 200px) 100px, 100% calc(var(--height) - 200px);
    background-repeat: no-repeat;
}

#view-electric::after {
    display: none;
    z-index: 1;
    /* Local transform: align, scale context, then rotate and displace. Displacement now inherits scale context. */
    transform: translate(-50%, -50%) scale(var(--mobile-scale, 1)) rotateX(60deg) rotateZ(45deg) translate(var(--thickness-main, 30px), var(--thickness-main, 30px));
    /* Mirrored hole logic for concentric alignment */
    background-image:
        radial-gradient(circle at 50px 50px, transparent var(--hole-radius), var(--border-alt) var(--hole-radius), var(--border-alt) var(--hole-radius-plus-two), var(--bg-alt) var(--hole-radius-plus-two)),
        radial-gradient(circle at 50px 50px, transparent var(--hole-radius), var(--border-alt) var(--hole-radius), var(--border-alt) var(--hole-radius-plus-two), var(--bg-alt) var(--hole-radius-plus-two)),
        radial-gradient(circle at 50px 50px, transparent var(--hole-radius), var(--border-alt) var(--hole-radius), var(--border-alt) var(--hole-radius-plus-two), var(--bg-alt) var(--hole-radius-plus-two)),
        radial-gradient(circle at 50px 50px, transparent var(--hole-radius), var(--border-alt) var(--hole-radius), var(--border-alt) var(--hole-radius-plus-two), var(--bg-alt) var(--hole-radius-plus-two)),
        linear-gradient(var(--bg-alt), var(--bg-alt)),
        linear-gradient(var(--bg-alt), var(--bg-alt)),
        linear-gradient(var(--bg-alt), var(--bg-alt));
    background-position:
        top left, top right, bottom left, bottom right,
        top center, bottom center, center;
    background-size:
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        calc(var(--width) - 200px) 100px, calc(var(--width) - 200px) 100px, 100% calc(var(--height) - 200px);
    background-repeat: no-repeat;
    box-shadow: var(--box-shadow-alt);
    border-color: var(--border-alt, rgba(70, 130, 180, 0.6));
    margin: 0;
}

#view-electric.has-alternative::after {
    display: block;
}

#view-electric .control-table .table-row.alt-part-row {
    display: table-row !important;
}

#view-code {
    background: radial-gradient(circle at center, #1a202c 0%, #000 100%);
    font-family: monospace;
    color: var(--accent);
}

#view-code .view-overlay {
    position: absolute;
    bottom: 40px;
    left: 40px;
}

.console-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: pre-wrap;
    line-height: 2;
    text-align: left;
    opacity: 0.5;
    font-size: 1rem;
}

.view-overlay {
    background: rgba(2, 12, 27, 0.9);
    padding: 20px 30px;
    border-radius: 6px;
    border: 1px solid #64ffda;
    max-width: 400px;
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.5s 0.2s;
    z-index: 15;
    backdrop-filter: blur(5px);
}

.display-view.active .view-overlay {
    transform: translateY(0);
    opacity: 1;
}

.view-overlay h3 {
    color: #64ffda;
    margin-bottom: 5px;
    font-size: 1.2rem;
    text-align: center;
    white-space: nowrap;
}

.view-overlay p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-primary);
    white-space: nowrap;
}

.table-instruction {
    position: absolute;
    bottom: 10px;
    left: 10px;
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-primary);
    z-index: 10;
}

.control-table {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(2, 12, 27, 0.95);
    padding: 4px 8px;
    border-radius: 5px;
    border: 1px solid rgba(100, 255, 218, 0.25);
    color: #ccd6f6;
    font-size: 0.75rem;
    /* display:table aligns columns correctly since children are display:table-row */
    display: table;
    z-index: 10;
    pointer-events: all;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
}

/* max-width to avoid spilling under the toggle button (40px wide, 10px right) */
#view-struct .control-table {
    max-width: calc(100% - 60px);
}

#view-electric .control-table {
    max-width: calc(100% - 60px);
}

.control-table-inner {
    display: table;
    width: 100%;
}

#view-electric .control-table {
    min-width: 250px;
}

#view-electric .table-header {
    display: table-header-group;
}



.table-header {
    display: table-row;
    font-weight: bold;
}

.table-row {
    display: table-row;
    cursor: pointer;
}

.table-row:hover div {
    background: rgba(100, 255, 218, 0.1);
    border-radius: 3px;
}

.table-row.active div {
    background: rgba(100, 255, 218, 0.2);
    border-radius: 3px;
}

.table-header div,
.table-row div {
    display: table-cell;
    padding: 8px 12px;
    text-align: left;
    /* Alineado a la izquierda como en la captura */
    vertical-align: middle;
    white-space: nowrap;
    /* Evita que el texto rompa la fila */
    transition: background 0.2s;
}

#view-struct .table-header div,
#view-struct .table-row div {
    text-align: center;
    /* La tabla de medidas suele ir mejor centrada */
}

#view-electric .table-header div,
#view-electric .table-row div {
    flex: 1;
}

/* Tree Text */
.tree-text {
    position: absolute;
    top: 40px;
    left: 60px;
    font-family: monospace;
    font-size: 0.9rem;
    color: #64ffda;
    line-height: 2.0;
    text-shadow: 0 0 5px rgba(100, 255, 218, 0.5);
    z-index: 10;
    margin: 0;
}

/* Toggle button for tables on small screens */
.table-toggle-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(100, 255, 218, 0.15);
    border: 1.5px solid var(--accent);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 11;
    transition: all 0.3s ease;
    color: var(--accent);
    animation: table-pulse 2s infinite;
}

.table-toggle-btn.active {
    animation: none;
    background: rgba(255, 100, 100, 0.15);
    border-color: #ff6464;
    color: #ff6464;
}

@keyframes table-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(100, 255, 218, 0.5);
        transform: scale(1);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(100, 255, 218, 0);
        transform: scale(1.05);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(100, 255, 218, 0);
        transform: scale(1);
    }
}

.table-toggle-btn:hover {
    background: rgba(100, 255, 218, 0.3);
    transform: scale(1.1);
}

.table-toggle-btn i {
    width: 20px;
    height: 20px;
}

.table-close-btn {
    display: none;
    width: 100%;
    background: rgba(100, 255, 218, 0.08);
    border: none;
    border-radius: 0 0 4px 4px;
    color: var(--accent);
    padding: 3px 10px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 0.72rem;
    font-family: monospace;
    letter-spacing: 0.08em;
    transition: background 0.2s;
}

.table-close-btn:hover {
    background: rgba(100, 255, 218, 0.18);
}

.table-close-btn i {
    width: 14px;
    height: 14px;
}

/* Responsive tables and overlays - Fase 1: Pantallas medianas */
@media (max-width: 1200px) {
    .control-table {
        display: none;
        /* When hidden, revert to block so flex-direction:column works on .visible */
    }

    .control-table.visible {
        display: table;
        /* Mantiene alineación de columnas */
        max-width: 95%;
        /* Aprovecha el espacio pero con margen */
        max-height: 70vh;
        overflow: auto;
        backdrop-filter: blur(10px);
        top: 60px;
        /* Baja la tabla para no chocar con el botón (40px + 20px margen) */
        right: 10px;
        left: auto;
    }

    .control-table.visible .table-close-btn {
        display: flex;
    }

    .table-toggle-btn {
        display: flex;
    }

    .tree-text {
        font-size: 0.8rem;
        left: 20px;
        top: 20px;
    }

    .view-overlay {
        max-width: 320px;
        padding: 18px 25px;
    }

    .view-overlay h3 {
        font-size: 1.1rem;
    }

    .view-overlay p {
        font-size: 0.85rem;
    }
}

/* Fase 2: Pantallas pequeñas */
@media (max-width: 900px) {
    .display-view {
        padding: 15px;
        justify-content: flex-start;
        align-items: flex-end;
    }

    #view-struct::before,
    #view-electric::before,
    #view-electric::after,
    .fasteners-overlay {
        top: 50% !important;
        /* Restaurado al 50% para coincidir con la lógica de ordenador */
    }

    #view-struct,
    #view-electric {
        background-position: bottom 15px right 15px, center;
        background-size: 45px 45px, cover;
        /* Ejes significativamente más pequeños */
    }

    .view-overlay {
        max-width: none;
        padding: 10px 12px;
        text-align: left;
        bottom: 15px;
        left: 20px;
        transform: none;
        top: auto;
    }

    .view-overlay h3 {
        font-size: 1rem;
        margin-bottom: 3px;
    }

    .view-overlay p {
        font-size: 0.8rem;
        margin: 0;
    }

    .tree-text {
        font-size: 0.7rem;
        line-height: 1.4;
        top: 10px;
        /* Subido más a la esquina para evitar el modelo 3D */
        left: 15px;
        transform: scale(0.8);
        /* Escala 0.8 para máxima seguridad contra colisiones */
        transform-origin: top left;
        pointer-events: none;
    }

    .control-table {
        font-size: 0.8rem;
        padding: 8px;
    }

    .table-header div,
    .table-row div {
        padding: 4px 6px;
    }

    #view-struct,
    #view-electric,
    #view-code {
        --mobile-scale: 0.55;
        /* Bajado a 0.55 para dar aire al árbol lateral */
    }

    #view-code {
        flex-direction: column;
        justify-content: center;
        gap: 30px;
        padding: 20px;
    }
}

/* Fase 3: Mucho zoom o pantallas muy pequeñas */
@media (max-width: 650px) {
    .display-view {
        padding: 10px;
    }

    .view-overlay {
        max-width: 55%;
        padding: 12px 15px;
        left: 15px;
        bottom: 15px;
        text-align: left;
    }

    .view-overlay h3 {
        font-size: 0.9rem;
        margin-bottom: 2px;
        line-height: 1.2;
    }

    .view-overlay p {
        font-size: 0.7rem;
        line-height: 1.3;
    }

    .tree-text {
        font-size: 0.7rem;
        line-height: 1.6;
        left: 10px;
        top: 10px;
        transform: scale(0.75);
        /* Aún más pequeño en pantallas pequeñas */
        transform-origin: top left;
    }

    .control-table {
        font-size: 0.65rem;
        padding: 5px;
        top: 5px;
        right: 5px;
    }

    .table-header div,
    .table-row div {
        padding: 2px 4px;
    }
}

/* Fasteners overlay */
.fasteners-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--width);
    height: var(--height);
    transform: translate(-50%, -50%) scale(var(--mobile-scale, 1)) rotateX(60deg) rotateZ(45deg);
    pointer-events: none;
    z-index: 3;
    transition: opacity 0.3s ease;
}

.show-washer .fasteners-overlay {
    background-image:
        /* Arandelas - capas superiores para dar altura */
        radial-gradient(circle at 47px 47px, transparent 8px, var(--accent) 8px, var(--accent) 10px, rgba(17, 34, 64, 0.95) 10px, rgba(17, 34, 64, 0.95) 26px, var(--accent) 26px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 47px 47px, transparent 8px, var(--accent) 8px, var(--accent) 10px, rgba(17, 34, 64, 0.95) 10px, rgba(17, 34, 64, 0.95) 26px, var(--accent) 26px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 47px 47px, transparent 8px, var(--accent) 8px, var(--accent) 10px, rgba(17, 34, 64, 0.95) 10px, rgba(17, 34, 64, 0.95) 26px, var(--accent) 26px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 47px 47px, transparent 8px, var(--accent) 8px, var(--accent) 10px, rgba(17, 34, 64, 0.95) 10px, rgba(17, 34, 64, 0.95) 26px, var(--accent) 26px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 48px 48px, transparent 8px, var(--accent) 8px, var(--accent) 10px, rgba(17, 34, 64, 0.95) 10px, rgba(17, 34, 64, 0.95) 26px, var(--accent) 26px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 48px 48px, transparent 8px, var(--accent) 8px, var(--accent) 10px, rgba(17, 34, 64, 0.95) 10px, rgba(17, 34, 64, 0.95) 26px, var(--accent) 26px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 48px 48px, transparent 8px, var(--accent) 8px, var(--accent) 10px, rgba(17, 34, 64, 0.95) 10px, rgba(17, 34, 64, 0.95) 26px, var(--accent) 26px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 48px 48px, transparent 8px, var(--accent) 8px, var(--accent) 10px, rgba(17, 34, 64, 0.95) 10px, rgba(17, 34, 64, 0.95) 26px, var(--accent) 26px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 49px 49px, transparent 8px, var(--accent) 8px, var(--accent) 10px, rgba(17, 34, 64, 0.95) 10px, rgba(17, 34, 64, 0.95) 26px, var(--accent) 26px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 49px 49px, transparent 8px, var(--accent) 8px, var(--accent) 10px, rgba(17, 34, 64, 0.95) 10px, rgba(17, 34, 64, 0.95) 26px, var(--accent) 26px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 49px 49px, transparent 8px, var(--accent) 8px, var(--accent) 10px, rgba(17, 34, 64, 0.95) 10px, rgba(17, 34, 64, 0.95) 26px, var(--accent) 26px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 49px 49px, transparent 8px, var(--accent) 8px, var(--accent) 10px, rgba(17, 34, 64, 0.95) 10px, rgba(17, 34, 64, 0.95) 26px, var(--accent) 26px, var(--accent) 28px, transparent 28px),
        /* Arandelas - capa principal con borde resaltado */
        radial-gradient(circle at 50px 50px, transparent 8px, var(--accent) 8px, var(--accent) 10px, rgba(17, 34, 64, 0.95) 10px, rgba(17, 34, 64, 0.95) 26px, var(--accent) 26px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 50px 50px, transparent 8px, var(--accent) 8px, var(--accent) 10px, rgba(17, 34, 64, 0.95) 10px, rgba(17, 34, 64, 0.95) 26px, var(--accent) 26px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 50px 50px, transparent 8px, var(--accent) 8px, var(--accent) 10px, rgba(17, 34, 64, 0.95) 10px, rgba(17, 34, 64, 0.95) 26px, var(--accent) 26px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 50px 50px, transparent 8px, var(--accent) 8px, var(--accent) 10px, rgba(17, 34, 64, 0.95) 10px, rgba(17, 34, 64, 0.95) 26px, var(--accent) 26px, var(--accent) 28px, transparent 28px),
        /* Capas de profundidad hacia abajo-derecha - color acento */
        radial-gradient(circle at 51px 51px, transparent 8px, var(--accent) 8px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 51px 51px, transparent 8px, var(--accent) 8px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 51px 51px, transparent 8px, var(--accent) 8px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 51px 51px, transparent 8px, var(--accent) 8px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 52px 52px, transparent 8px, var(--accent) 8px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 52px 52px, transparent 8px, var(--accent) 8px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 52px 52px, transparent 8px, var(--accent) 8px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 52px 52px, transparent 8px, var(--accent) 8px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 53px 53px, transparent 8px, var(--accent) 8px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 53px 53px, transparent 8px, var(--accent) 8px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 53px 53px, transparent 8px, var(--accent) 8px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 53px 53px, transparent 8px, var(--accent) 8px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 54px 54px, transparent 8px, var(--accent) 8px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 54px 54px, transparent 8px, var(--accent) 8px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 54px 54px, transparent 8px, var(--accent) 8px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 54px 54px, transparent 8px, var(--accent) 8px, var(--accent) 28px, transparent 28px);
    background-position:
        top left, top right, bottom left, bottom right,
        top left, top right, bottom left, bottom right,
        top left, top right, bottom left, bottom right,
        top left, top right, bottom left, bottom right,
        top left, top right, bottom left, bottom right,
        top left, top right, bottom left, bottom right,
        top left, top right, bottom left, bottom right;
    background-size:
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px;
    background-repeat: no-repeat;
}

/* Arandelas individuales */
.show-washer .fasteners-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        /* Arandelas - capas superiores para dar altura */
        radial-gradient(circle at 47px 47px, transparent 8px, var(--accent) 8px, var(--accent) 10px, rgba(17, 34, 64, 0.95) 10px, rgba(17, 34, 64, 0.95) 26px, var(--accent) 26px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 47px 47px, transparent 8px, var(--accent) 8px, var(--accent) 10px, rgba(17, 34, 64, 0.95) 10px, rgba(17, 34, 64, 0.95) 26px, var(--accent) 26px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 47px 47px, transparent 8px, var(--accent) 8px, var(--accent) 10px, rgba(17, 34, 64, 0.95) 10px, rgba(17, 34, 64, 0.95) 26px, var(--accent) 26px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 47px 47px, transparent 8px, var(--accent) 8px, var(--accent) 10px, rgba(17, 34, 64, 0.95) 10px, rgba(17, 34, 64, 0.95) 26px, var(--accent) 26px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 48px 48px, transparent 8px, var(--accent) 8px, var(--accent) 10px, rgba(17, 34, 64, 0.95) 10px, rgba(17, 34, 64, 0.95) 26px, var(--accent) 26px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 48px 48px, transparent 8px, var(--accent) 8px, var(--accent) 10px, rgba(17, 34, 64, 0.95) 10px, rgba(17, 34, 64, 0.95) 26px, var(--accent) 26px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 48px 48px, transparent 8px, var(--accent) 8px, var(--accent) 10px, rgba(17, 34, 64, 0.95) 10px, rgba(17, 34, 64, 0.95) 26px, var(--accent) 26px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 48px 48px, transparent 8px, var(--accent) 8px, var(--accent) 10px, rgba(17, 34, 64, 0.95) 10px, rgba(17, 34, 64, 0.95) 26px, var(--accent) 26px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 49px 49px, transparent 8px, var(--accent) 8px, var(--accent) 10px, rgba(17, 34, 64, 0.95) 10px, rgba(17, 34, 64, 0.95) 26px, var(--accent) 26px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 49px 49px, transparent 8px, var(--accent) 8px, var(--accent) 10px, rgba(17, 34, 64, 0.95) 10px, rgba(17, 34, 64, 0.95) 26px, var(--accent) 26px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 49px 49px, transparent 8px, var(--accent) 8px, var(--accent) 10px, rgba(17, 34, 64, 0.95) 10px, rgba(17, 34, 64, 0.95) 26px, var(--accent) 26px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 49px 49px, transparent 8px, var(--accent) 8px, var(--accent) 10px, rgba(17, 34, 64, 0.95) 10px, rgba(17, 34, 64, 0.95) 26px, var(--accent) 26px, var(--accent) 28px, transparent 28px),
        /* Arandelas - capa principal con borde resaltado */
        radial-gradient(circle at 50px 50px, transparent 8px, var(--accent) 8px, var(--accent) 10px, rgba(17, 34, 64, 0.95) 10px, rgba(17, 34, 64, 0.95) 26px, var(--accent) 26px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 50px 50px, transparent 8px, var(--accent) 8px, var(--accent) 10px, rgba(17, 34, 64, 0.95) 10px, rgba(17, 34, 64, 0.95) 26px, var(--accent) 26px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 50px 50px, transparent 8px, var(--accent) 8px, var(--accent) 10px, rgba(17, 34, 64, 0.95) 10px, rgba(17, 34, 64, 0.95) 26px, var(--accent) 26px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 50px 50px, transparent 8px, var(--accent) 8px, var(--accent) 10px, rgba(17, 34, 64, 0.95) 10px, rgba(17, 34, 64, 0.95) 26px, var(--accent) 26px, var(--accent) 28px, transparent 28px),
        /* Capas de profundidad hacia abajo-derecha - color acento */
        radial-gradient(circle at 51px 51px, transparent 8px, var(--accent) 8px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 51px 51px, transparent 8px, var(--accent) 8px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 51px 51px, transparent 8px, var(--accent) 8px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 51px 51px, transparent 8px, var(--accent) 8px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 52px 52px, transparent 8px, var(--accent) 8px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 52px 52px, transparent 8px, var(--accent) 8px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 52px 52px, transparent 8px, var(--accent) 8px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 52px 52px, transparent 8px, var(--accent) 8px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 53px 53px, transparent 8px, var(--accent) 8px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 53px 53px, transparent 8px, var(--accent) 8px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 53px 53px, transparent 8px, var(--accent) 8px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 53px 53px, transparent 8px, var(--accent) 8px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 54px 54px, transparent 8px, var(--accent) 8px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 54px 54px, transparent 8px, var(--accent) 8px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 54px 54px, transparent 8px, var(--accent) 8px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 54px 54px, transparent 8px, var(--accent) 8px, var(--accent) 28px, transparent 28px);
    background-position:
        top left, top right, bottom left, bottom right,
        top left, top right, bottom left, bottom right,
        top left, top right, bottom left, bottom right,
        top left, top right, bottom left, bottom right,
        top left, top right, bottom left, bottom right,
        top left, top right, bottom left, bottom right,
        top left, top right, bottom left, bottom right;
    background-size:
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px;
    background-repeat: no-repeat;
}

/* Tuercas hexagonales individuales */
.show-nut .fasteners-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.show-bolt .fasteners-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        /* Cabeza de tornillo - 18 capas (26-43px) más abajo y reborde superior 2px */
        radial-gradient(circle at 26px 26px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 26px 26px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 26px 26px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 26px 26px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 27px 27px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 27px 27px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 27px 27px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 27px 27px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 28px 28px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 28px 28px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 28px 28px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 28px 28px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 29px 29px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 29px 29px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 29px 29px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 29px 29px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 30px 30px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 30px 30px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 30px 30px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 30px 30px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 31px 31px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 31px 31px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 31px 31px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 31px 31px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 32px 32px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 32px 32px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 32px 32px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 32px 32px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 33px 33px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 33px 33px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 33px 33px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 33px 33px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 34px 34px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 34px 34px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 34px 34px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 34px 34px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 35px 35px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 35px 35px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 35px 35px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 35px 35px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 36px 36px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 36px 36px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 36px 36px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 36px 36px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 37px 37px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 37px 37px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 37px 37px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 37px 37px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 38px 38px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 38px 38px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 38px 38px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 38px 38px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 39px 39px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 39px 39px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 39px 39px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 39px 39px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 40px 40px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 40px 40px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 40px 40px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 40px 40px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 41px 41px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 41px 41px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 41px 41px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 41px 41px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 42px 42px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 42px 42px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 42px 42px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 42px 42px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 43px 43px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 43px 43px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 43px 43px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 43px 43px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px);
    background-position:
        top left, top right, bottom left, bottom right,
        top left, top right, bottom left, bottom right,
        top left, top right, bottom left, bottom right,
        top left, top right, bottom left, bottom right,
        top left, top right, bottom left, bottom right,
        top left, top right, bottom left, bottom right,
        top left, top right, bottom left, bottom right,
        top left, top right, bottom left, bottom right,
        top left, top right, bottom left, bottom right,
        top left, top right, bottom left, bottom right,
        top left, top right, bottom left, bottom right,
        top left, top right, bottom left, bottom right,
        top left, top right, bottom left, bottom right,
        top left, top right, bottom left, bottom right,
        top left, top right, bottom left, bottom right,
        top left, top right, bottom left, bottom right,
        top left, top right, bottom left, bottom right,
        top left, top right, bottom left, bottom right;
    background-size:
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px;
    background-repeat: no-repeat;
}

/* Mostrar todos los fasteners apilados */
.show-fasteners .fasteners-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        /* Arandelas - capas superiores para dar altura */
        radial-gradient(circle at 47px 47px, transparent 8px, var(--accent) 8px, var(--accent) 10px, rgba(17, 34, 64, 0.95) 10px, rgba(17, 34, 64, 0.95) 26px, var(--accent) 26px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 47px 47px, transparent 8px, var(--accent) 8px, var(--accent) 10px, rgba(17, 34, 64, 0.95) 10px, rgba(17, 34, 64, 0.95) 26px, var(--accent) 26px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 47px 47px, transparent 8px, var(--accent) 8px, var(--accent) 10px, rgba(17, 34, 64, 0.95) 10px, rgba(17, 34, 64, 0.95) 26px, var(--accent) 26px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 47px 47px, transparent 8px, var(--accent) 8px, var(--accent) 10px, rgba(17, 34, 64, 0.95) 10px, rgba(17, 34, 64, 0.95) 26px, var(--accent) 26px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 48px 48px, transparent 8px, var(--accent) 8px, var(--accent) 10px, rgba(17, 34, 64, 0.95) 10px, rgba(17, 34, 64, 0.95) 26px, var(--accent) 26px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 48px 48px, transparent 8px, var(--accent) 8px, var(--accent) 10px, rgba(17, 34, 64, 0.95) 10px, rgba(17, 34, 64, 0.95) 26px, var(--accent) 26px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 48px 48px, transparent 8px, var(--accent) 8px, var(--accent) 10px, rgba(17, 34, 64, 0.95) 10px, rgba(17, 34, 64, 0.95) 26px, var(--accent) 26px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 48px 48px, transparent 8px, var(--accent) 8px, var(--accent) 10px, rgba(17, 34, 64, 0.95) 10px, rgba(17, 34, 64, 0.95) 26px, var(--accent) 26px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 49px 49px, transparent 8px, var(--accent) 8px, var(--accent) 10px, rgba(17, 34, 64, 0.95) 10px, rgba(17, 34, 64, 0.95) 26px, var(--accent) 26px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 49px 49px, transparent 8px, var(--accent) 8px, var(--accent) 10px, rgba(17, 34, 64, 0.95) 10px, rgba(17, 34, 64, 0.95) 26px, var(--accent) 26px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 49px 49px, transparent 8px, var(--accent) 8px, var(--accent) 10px, rgba(17, 34, 64, 0.95) 10px, rgba(17, 34, 64, 0.95) 26px, var(--accent) 26px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 49px 49px, transparent 8px, var(--accent) 8px, var(--accent) 10px, rgba(17, 34, 64, 0.95) 10px, rgba(17, 34, 64, 0.95) 26px, var(--accent) 26px, var(--accent) 28px, transparent 28px),
        /* Arandelas - capa principal con borde resaltado */
        radial-gradient(circle at 50px 50px, transparent 8px, var(--accent) 8px, var(--accent) 10px, rgba(17, 34, 64, 0.95) 10px, rgba(17, 34, 64, 0.95) 26px, var(--accent) 26px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 50px 50px, transparent 8px, var(--accent) 8px, var(--accent) 10px, rgba(17, 34, 64, 0.95) 10px, rgba(17, 34, 64, 0.95) 26px, var(--accent) 26px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 50px 50px, transparent 8px, var(--accent) 8px, var(--accent) 10px, rgba(17, 34, 64, 0.95) 10px, rgba(17, 34, 64, 0.95) 26px, var(--accent) 26px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 50px 50px, transparent 8px, var(--accent) 8px, var(--accent) 10px, rgba(17, 34, 64, 0.95) 10px, rgba(17, 34, 64, 0.95) 26px, var(--accent) 26px, var(--accent) 28px, transparent 28px),
        /* Capas de profundidad hacia abajo-derecha - color acento */
        radial-gradient(circle at 51px 51px, transparent 8px, var(--accent) 8px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 51px 51px, transparent 8px, var(--accent) 8px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 51px 51px, transparent 8px, var(--accent) 8px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 51px 51px, transparent 8px, var(--accent) 8px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 52px 52px, transparent 8px, var(--accent) 8px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 52px 52px, transparent 8px, var(--accent) 8px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 52px 52px, transparent 8px, var(--accent) 8px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 52px 52px, transparent 8px, var(--accent) 8px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 53px 53px, transparent 8px, var(--accent) 8px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 53px 53px, transparent 8px, var(--accent) 8px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 53px 53px, transparent 8px, var(--accent) 8px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 53px 53px, transparent 8px, var(--accent) 8px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 54px 54px, transparent 8px, var(--accent) 8px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 54px 54px, transparent 8px, var(--accent) 8px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 54px 54px, transparent 8px, var(--accent) 8px, var(--accent) 28px, transparent 28px),
        radial-gradient(circle at 54px 54px, transparent 8px, var(--accent) 8px, var(--accent) 28px, transparent 28px);
    background-position:
        top left, top right, bottom left, bottom right,
        top left, top right, bottom left, bottom right,
        top left, top right, bottom left, bottom right,
        top left, top right, bottom left, bottom right,
        top left, top right, bottom left, bottom right,
        top left, top right, bottom left, bottom right,
        top left, top right, bottom left, bottom right;
    background-size:
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px;
    background-repeat: no-repeat;
}

.show-fasteners .fasteners-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        /* Cabeza de tornillo - 18 capas (26-43px) más abajo y reborde superior 2px */
        radial-gradient(circle at 26px 26px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 26px 26px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 26px 26px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 26px 26px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 27px 27px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 27px 27px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 27px 27px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 27px 27px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 28px 28px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 28px 28px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 28px 28px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 28px 28px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 29px 29px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 29px 29px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 29px 29px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 29px 29px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 30px 30px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 30px 30px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 30px 30px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 30px 30px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 31px 31px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 31px 31px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 31px 31px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 31px 31px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 32px 32px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 32px 32px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 32px 32px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 32px 32px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 33px 33px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 33px 33px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 33px 33px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 33px 33px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 34px 34px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 34px 34px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 34px 34px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 34px 34px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 35px 35px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 35px 35px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 35px 35px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 35px 35px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 36px 36px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 36px 36px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 36px 36px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 36px 36px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 37px 37px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 37px 37px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 37px 37px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 37px 37px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 38px 38px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 38px 38px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 38px 38px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 38px 38px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 39px 39px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 39px 39px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 39px 39px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 39px 39px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 40px 40px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 40px 40px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 40px 40px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 40px 40px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 41px 41px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 41px 41px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 41px 41px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 41px 41px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 42px 42px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 42px 42px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 42px 42px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 42px 42px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 43px 43px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 43px 43px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 43px 43px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px),
        radial-gradient(circle at 43px 43px, var(--accent) 0px, var(--accent) 2px, rgba(17, 34, 64, 0.95) 2px, rgba(17, 34, 64, 0.95) 14px, var(--accent) 14px, var(--accent) 16px, transparent 16px);
    background-position:
        top left, top right, bottom left, bottom right,
        top left, top right, bottom left, bottom right,
        top left, top right, bottom left, bottom right,
        top left, top right, bottom left, bottom right,
        top left, top right, bottom left, bottom right,
        top left, top right, bottom left, bottom right,
        top left, top right, bottom left, bottom right,
        top left, top right, bottom left, bottom right,
        top left, top right, bottom left, bottom right,
        top left, top right, bottom left, bottom right,
        top left, top right, bottom left, bottom right,
        top left, top right, bottom left, bottom right,
        top left, top right, bottom left, bottom right,
        top left, top right, bottom left, bottom right,
        top left, top right, bottom left, bottom right,
        top left, top right, bottom left, bottom right,
        top left, top right, bottom left, bottom right,
        top left, top right, bottom left, bottom right;
    background-size:
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        100px 100px, 100px 100px, 100px 100px, 100px 100px;
    background-repeat: no-repeat;
}


/* Highlighting Logic for Assembly Table Selection */
/* Item 1: Main Plate Selected */
#view-electric.selected-main {
    --accent: #ff9800 !important;
    --shadow-color-1: #ff9800 !important;
    --face-color: #e68a00 !important;
}

#view-electric.selected-main::before {
    /* Force repaint with new variables */
    --hole-inner-color: #cc7a00 !important;
    background-image:
        radial-gradient(circle at 50px 50px, var(--bg-dark) var(--hole-radius), var(--accent) var(--hole-radius), var(--accent) var(--hole-radius-plus-two), var(--face-color) var(--hole-radius-plus-two)),
        radial-gradient(circle at 50px 50px, var(--bg-dark) var(--hole-radius), var(--accent) var(--hole-radius), var(--accent) var(--hole-radius-plus-two), var(--face-color) var(--hole-radius-plus-two)),
        radial-gradient(circle at 50px 50px, var(--bg-dark) var(--hole-radius), var(--accent) var(--hole-radius), var(--accent) var(--hole-radius-plus-two), var(--face-color) var(--hole-radius-plus-two)),
        radial-gradient(circle at 50px 50px, var(--bg-dark) var(--hole-radius), var(--accent) var(--hole-radius), var(--accent) var(--hole-radius-plus-two), var(--face-color) var(--hole-radius-plus-two)),
        linear-gradient(var(--face-color), var(--face-color)),
        linear-gradient(var(--face-color), var(--face-color)),
        linear-gradient(var(--face-color), var(--face-color));
    background-position:
        top left, top right, bottom left, bottom right,
        top center, bottom center, center;
    background-size:
        100px 100px, 100px 100px, 100px 100px, 100px 100px,
        calc(var(--width) - 200px) 100px, calc(var(--width) - 200px) 100px, 100% calc(var(--height) - 200px);
    background-repeat: no-repeat;
}

/* Protect Alternative Plate and Fasteners from Item 1 highlight */
#view-electric.selected-main::after {
    --bg-alt: rgba(17, 34, 64, 0.8) !important;
    --border-alt: rgba(70, 130, 180, 0.6) !important;
    --shadow-color-2: rgba(17, 34, 64, 0.8) !important;
}

#view-electric.selected-main .fasteners-overlay {
    --accent: #64ffda !important;
}

/* Item 2: Alternative Plate Selected */
#view-electric.selected-alt {
    --bg-alt: rgba(255, 152, 0, 0.8) !important;
    --border-alt: #ff9800 !important;
    --shadow-color-2: rgba(255, 152, 0, 0.8) !important;
}

/* Protect Main Plate and Fasteners from Item 2 highlight */
#view-electric.selected-alt::before {
    --accent: #64ffda !important;
    --shadow-color-1: #64ffda !important;
}

#view-electric.selected-alt .fasteners-overlay {
    --accent: #64ffda !important;
}

/* Tree Selection Color */
.tree-highlight {
    color: #ff9800 !important;
    text-shadow: 0 0 8px rgba(255, 152, 0, 0.6);
}

#fasteners-overlay-assembly.selected-washer::before {
    filter: sepia(1) saturate(10) hue-rotate(-35deg) brightness(1.2);
}

#fasteners-overlay-assembly.selected-screw::after {
    filter: sepia(1) saturate(10) hue-rotate(-35deg) brightness(1.2);
}

#fasteners-overlay-assembly.selected-nut::after {
    /* No highlighting for nuts on 3D component */
    filter: none;
}

.table-row.selected-row div {
    background: rgba(255, 152, 0, 0.3) !important;
}

/* Contact Page Styles */
.contact-hero,
.privacy-hero {
    height: auto !important;
    min-height: 350px;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: calc(var(--nav-height) + 60px) !important;
    padding-bottom: 60px !important;
    text-align: center;
}

.contact-section {
    padding: 100px 0;
    background: radial-gradient(circle at center, #112240 0%, #020c1b 100%);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 60px;
    align-items: start;
}

.contact-info-panel {
    background: var(--bg-card);
    padding: 40px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.info-item {
    display: flex;
    gap: 20px;
    margin-top: 30px;
}

.info-item i {
    color: var(--accent);
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.info-item h3 {
    font-size: 1.1rem;
    margin-bottom: 5px;
    color: var(--white);
}

.info-item p {
    font-size: 0.95rem;
    margin: 0;
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 40px;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background: rgba(17, 34, 64, 0.5);
    border: 1px solid #233554;
    border-radius: 8px;
    color: var(--accent);
    transition: var(--transition);
}

.social-icon:hover {
    background: var(--accent-glow);
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(100, 255, 218, 0.1);
}

.social-icon i {
    width: 22px;
    height: 22px;
}

.form-container {
    background: rgba(17, 34, 64, 0.3);
    padding: 40px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.form-group {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.form-group label {
    position: absolute;
    left: 15px;
    top: 15px;
    font-size: 0.95rem;
    color: var(--text-secondary);
    pointer-events: none;
    transition: var(--transition);
    font-weight: 400;
    text-transform: uppercase;
}

.form-group input,
.form-group textarea {
    padding: 15px;
    background: #0a192f;
    border: 1px solid #233554;
    border-radius: 6px;
    color: var(--white);
    font-family: var(--font-main);
    font-size: 1rem;
    transition: var(--transition);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 10px rgba(100, 255, 218, 0.1);
}

/* Hide label when typing logic */
.form-group input:focus~label,
.form-group textarea:focus~label,
.form-group input:not(:placeholder-shown)~label,
.form-group textarea:not(:placeholder-shown)~label {
    opacity: 0;
    transform: translateY(-5px);
}

.form-group textarea {
    min-height: 120px;
    resize: vertical;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: transparent;
}

/* Autofill style override */
.form-group input:-webkit-autofill,
.form-group input:-webkit-autofill:hover,
.form-group input:-webkit-autofill:focus,
.form-group input:-webkit-autofill:active,
.form-group textarea:-webkit-autofill,
.form-group textarea:-webkit-autofill:hover,
.form-group textarea:-webkit-autofill:focus,
.form-group textarea:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #0a192f inset !important;
    -webkit-text-fill-color: var(--white) !important;
    caret-color: var(--white) !important;
    transition: background-color 5000s ease-in-out 0s;
}

.checkbox-group {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

.checkbox-group label {
    position: relative;
    top: 0;
    left: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    opacity: 1;
    pointer-events: auto;
    text-transform: none;
    cursor: pointer;
}

.checkbox-group input:focus~label,
.checkbox-group input:not(:placeholder-shown)~label {
    opacity: 1;
    transform: none;
}

.checkbox-group input {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    cursor: pointer;
}

.checkbox-group label {
    font-size: 0.85rem;
    cursor: pointer;
}

.checkbox-group a {
    color: var(--accent);
    text-decoration: underline;
}

.submit-btn {
    width: 100%;
    cursor: pointer;
    background: transparent;
    text-align: center;
    font-size: 1rem;
    letter-spacing: 1px;
}

.submit-btn:hover {
    background: var(--accent-glow);
    transform: translateY(-2px);
}

/* Responsive Contact Page */
@media (max-width: 992px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .contact-section {
        padding: 60px 0;
    }

    .form-container,
    .contact-info-panel {
        padding: 25px;
    }

    .contact-hero,
    .privacy-hero {
        min-height: 350px;
        padding-top: calc(var(--nav-height) + 40px) !important;
        padding-bottom: 40px !important;
    }

    .hero-title {
        font-size: clamp(32px, 10vw, 48px) !important;
    }

    .form-row {
        grid-template-columns: 1fr;
    }
}

/* ================================
   NAV TOGGLE (hamburger) - base
   ================================ */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.nav-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Hamburger → X animation */
.nav-toggle.open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.nav-toggle.open span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* ================================
   MOBILE LAYOUT (≤768px)
   ================================ */
@media (max-width: 768px) {

    /* Header: reduce horizontal padding */
    header {
        padding: 0 20px;
    }

    /* Nav: reduce gap so elements don't overflow */
    nav {
        gap: 12px;
    }

    /* Show hamburger */
    .nav-toggle {
        display: flex;
    }

    /* Hide inline nav links — they become a dropdown */
    .nav-links {
        display: none;
        position: fixed;
        top: var(--nav-height);
        left: 0;
        width: 100%;
        background: rgba(2, 12, 27, 0.98);
        backdrop-filter: blur(12px);
        flex-direction: column;
        align-items: center;
        gap: 0;
        padding: 10px 0 20px;
        border-bottom: 1px solid rgba(100, 255, 218, 0.15);
        z-index: 999;
    }

    .nav-links.open {
        display: flex;
    }

    .nav-links li {
        width: 100%;
        text-align: center;
    }

    .nav-links a {
        display: block;
        padding: 14px 20px;
        font-size: 1.05rem;
    }

    .nav-links a:hover {
        color: var(--accent);
        background: rgba(100, 255, 218, 0.05);
    }

    /* About: stack image below text */
    .about-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    /* Mission / Vision: stack vertically */
    .split-layout {
        flex-direction: column;
    }

    /* Fix background-attachment: fixed (broken on iOS Safari) */
    .about-section,
    .values-section,
    .services-section,
    .work-section {
        background-attachment: scroll;
    }
}

/* ================================
   3D VIEWER RESPONSIVE (MOBILE)
   ================================ */
@media (max-width: 900px) {
    .ribbon-interface {
        height: 600px;
    }

    .ribbon-toolbar {
        overflow-x: scroll; /* Forzamos scroll en lugar de auto */
        -webkit-overflow-scrolling: touch;
        padding-bottom: 15px; /* Más espacio para la scrollbar */
        scrollbar-width: thin;
        scrollbar-color: var(--accent) rgba(255, 255, 255, 0.1);
        position: relative;
    }

    .ribbon-toolbar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
    }

    .ribbon-toolbar::-webkit-scrollbar {
        display: none !important; /* Chrome/Safari */
    }

    /* Custom Persistent Scrollbar (HTML based) */
    .custom-scrollbar-outer {
        display: block;
        width: calc(100% - 40px);
        margin: 5px auto 15px;
        height: 6px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 10px;
        position: relative;
        overflow: hidden;
    }

    .custom-scrollbar-thumb {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 30%; /* Will be updated by JS */
        background: var(--accent);
        border-radius: 10px;
        box-shadow: 0 0 10px var(--accent);
        transition: transform 0.1s linear;
    }

    /* Custom Scrollbar for Ribbon Toolbar (Chrome/Safari) */
    .ribbon-toolbar::-webkit-scrollbar {
        height: 6px;
    }

    .ribbon-toolbar::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 10px;
    }

    .ribbon-toolbar::-webkit-scrollbar-thumb {
        background: var(--accent) !important;
        border-radius: 10px;
    }

    @keyframes scrollPulse {
        0% {
            opacity: 1;
            box-shadow: 0 0 5px var(--accent);
        }

        50% {
            opacity: 0.4;
            box-shadow: 0 0 15px var(--accent);
        }

        100% {
            opacity: 1;
            box-shadow: 0 0 5px var(--accent);
        }
    }

    .ribbon-group {
        padding: 0 4px;
        gap: 3px;
        flex-shrink: 0;
    }

    .ribbon-btn {
        height: 62px;
        min-width: 52px;
        padding: 4px 5px;
        font-size: 0.7rem;
        flex-shrink: 0;
    }

    .ribbon-btn i {
        width: 24px;
        height: 24px;
    }

    .ribbon-separator {
        margin: 0 4px;
    }

    .ribbon-btn-small {
        min-width: 0;
        font-size: 0.7rem;
        padding: 3px 5px;
        gap: 5px;
    }

    .ribbon-btn-small i {
        width: 12px;
        height: 12px;
    }

    #view-struct,
    #view-electric {
        background-size: 45px 45px, cover !important;
        background-position: bottom 10px right 10px, center !important;
    }

    .tree-text {
        transform: scale(0.8) !important;
        transform-origin: top left !important;
        top: 10px !important;
        left: 10px !important;
    }

    .view-overlay {
        max-width: none !important;
        left: 10px !important;
        transform: none !important;
        text-align: left !important;
        bottom: 10px !important;
        padding: 8px 10px !important;
        background: rgba(10, 25, 47, 0.9) !important;
    }

    .view-overlay h3 {
        font-size: 0.8rem !important;
        /* Texto más pequeño para no chocar */
        margin-bottom: 2px !important;
        line-height: 1.1 !important;
    }

    .view-overlay p {
        font-size: 0.65rem !important;
        line-height: 1.2 !important;
    }

    #view-struct,
    #view-electric,
    #view-code {
        --mobile-scale: 0.55;
        /* Bajado un poco más para evitar que la esquina inferior izquierda choque con el texto */
    }

    #view-code {
        flex-direction: column;
        justify-content: center;
        gap: 30px;
        padding: 20px;
    }

    .console-text {
        margin-left: 0;
        font-size: 0.85rem;
        line-height: 1.8;
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 650px) {
    .ribbon-interface {
        height: 550px;
    }

    .view-overlay {
        max-width: none !important;
        left: 10px !important;
        bottom: 10px !important;
    }

    .view-overlay h3 {
        font-size: 0.75rem !important;
    }

    .view-overlay p {
        font-size: 0.6rem !important;
    }

    #view-struct,
    #view-electric,
    #view-code {
        --mobile-scale: 0.5;
        /* Escala reducida para ganar espacio */
    }

    .tree-text {
        transform: scale(0.75) !important;
    }

    .console-text {
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .ribbon-interface {
        height: 500px;
    }

    #view-struct,
    #view-electric,
    #view-code {
        --mobile-scale: 0.45;
    }

    .view-overlay {
        max-width: none !important;
    }

    .view-overlay h3 {
        font-size: 0.7rem !important;
    }

    .view-overlay p {
        font-size: 0.55rem !important;
    }

    .console-text {
        font-size: 0.65rem;
    }
}