:root {
    --bg-light: #f8f9fa;
    --text-light: #1f2937;
    --card-light: #ffffff;
    --header-light: rgba(255, 255, 255, 0.9);
    --bg-dark: #0D1B2A;
    --text-dark: #E0E1DD;
    --card-dark: #1B263B;
    --header-dark: rgba(27, 38, 59, 0.9);
    --accent: #00A896;
    --accent-hover: #02C39A;
    --image-wrapper-bg: #0D1B2A;
}

body {
    font-family: 'Poppins', sans-serif;
    transition: background-color 0.3s, color 0.3s;
}

body { background-color: var(--bg-light); color: var(--text-light); }
.bg-card { background-color: var(--card-light); }
.text-main { color: var(--text-light); }
.text-secondary { color: #4b5563; }
.text-accent { color: var(--accent); }
.bg-accent { background-color: var(--accent); }
.hover\:bg-accent-hover:hover { background-color: var(--accent-hover); }
.hover\:text-accent:hover { color: var(--accent); }
.border-accent { border-color: var(--accent); }
.bg-header-scrolled { background-color: var(--header-light); }
.form-input { background-color: #ffffff; border-color: #d1d5db; }
.tab-button { border-color: transparent; }
.tab-button.tab-active { background-color: #e0fdfa; color: var(--accent); border-color: var(--accent); }
.tab-button:not(.tab-active):hover { background-color: #f0fdfa; }

html.dark body { background-color: var(--bg-dark); color: var(--text-dark); }
html.dark .bg-card { background-color: var(--card-dark); }
html.dark .text-main { color: var(--text-dark); }
html.dark .text-secondary { color: #a0aec0; }
html.dark .bg-header-scrolled { background-color: var(--header-dark); }
html.dark .form-input { background-color: #2d3748; border-color: #4a5568; color: var(--text-dark); }
html.dark .tab-button.tab-active {
    background-color: var(--accent);
    color: var(--bg-dark);
    border-color: var(--accent);
}
html.dark .tab-button:not(.tab-active):hover {
    background-color: rgba(0, 168, 150, 0.2);
    color: var(--accent-hover);
}
html.dark #mobile-menu { background-color: var(--card-dark); }
html.dark .accordion-item { border-color: #2d3748; }

#main-header.scrolled { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); backdrop-filter: blur(10px); }
.nav-link { position: relative; padding-bottom: 8px; transition: color 0.2s; }
.nav-link::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background-color: var(--accent); transition: width 0.3s ease-in-out; }
.nav-link.nav-active::after,
.nav-link.nav-page-active::after { width: 50%; }
.nav-link.nav-page-active { color: var(--accent) !important; font-weight: 600; }

#nav-contacto.nav-page-active { box-shadow: 0 0 0 2px var(--accent); }

#scroll-to-top {
    position: fixed; bottom: 90px; right: 20px; width: 50px; height: 50px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: white; opacity: 0; visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
    transform: translateY(20px); z-index: 40;
}
#scroll-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }

.btn-click-effect { transition: transform 0.1s ease; }
.btn-click-effect:active { transform: scale(0.95); }

#particles-js { position: absolute; width: 100%; height: 100%; z-index: 1; }
.pcb-background {
    position: absolute; inset: 0; opacity: 0.05;
    background-image: url('https://www.transparenttextures.com/patterns/integrated-circuit.png');
    animation: moveCircuits 60s linear infinite; z-index: 0;
}
html.light .pcb-background { opacity: 0.1; filter: invert(1); }
@keyframes moveCircuits {
    0% { background-position: 0 0; }
    100% { background-position: -1000px 1000px; }
}

.accordion-panel { max-height: 0; overflow: hidden; transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out; }
.accordion-panel.is-open { max-height: 600px; }
.accordion-trigger.is-open .accordion-icon { transform: rotate(180deg); }

#cookie-banner {
    position: fixed; bottom: -100%; left: 0; right: 0;
    transition: bottom 0.5s ease-in-out; z-index: 100;
}
#cookie-banner.visible { bottom: 0; }

/* Badges y servicios foco */
.badge-focus {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.6rem;
    border-radius: 9999px;
    background-color: rgba(0, 168, 150, 0.15);
    color: var(--accent);
    margin-bottom: 0.75rem;
}
html.dark .badge-focus { background-color: rgba(0, 168, 150, 0.25); }

.specialty-bar {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1rem;
    font-size: 0.875rem; color: #6b7280; margin-bottom: 2rem;
}
html.dark .specialty-bar { color: #a0aec0; }
.specialty-bar span::after { content: '·'; margin-left: 1rem; color: var(--accent); }
.specialty-bar span:last-child::after { content: none; }

.image-dark-wrapper {
    background-color: var(--image-wrapper-bg);
    border-radius: 0.5rem;
    overflow: hidden;
    padding: 0.5rem;
}
.image-dark-wrapper img { width: 100%; height: auto; display: block; border-radius: 0.375rem; }

/* Paneles visuales adaptables a claro/oscuro (reemplazan PNG oscuros) */
.card-visual,
.product-visual {
    height: 11rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, rgba(0, 168, 150, 0.14) 0%, rgba(0, 168, 150, 0.04) 100%);
    border-bottom: 1px solid rgba(0, 168, 150, 0.15);
}
html.dark .card-visual,
html.dark .product-visual {
    background: linear-gradient(145deg, rgba(0, 168, 150, 0.22) 0%, rgba(27, 38, 59, 0.95) 100%);
    border-bottom-color: rgba(0, 168, 150, 0.25);
}
.card-visual i,
.product-visual i {
    font-size: 3.5rem;
    color: var(--accent);
    filter: drop-shadow(0 2px 8px rgba(0, 168, 150, 0.35));
}
.product-visual i { font-size: 3rem; }

.hub-card {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: var(--card-light);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
    height: 100%;
}
html.dark .hub-card { background-color: var(--card-dark); }
.hub-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -4px rgb(0 0 0 / 0.15);
}
.hub-card-body { padding: 1.25rem 1.5rem 1.5rem; }
.hub-card-body h3 { font-weight: 700; color: var(--text-light); margin-bottom: 0.5rem; }
html.dark .hub-card-body h3 { color: var(--text-dark); }
.hub-card-body p { font-size: 0.875rem; color: #4b5563; margin-bottom: 0.75rem; line-height: 1.5; }
html.dark .hub-card-body p { color: #a0aec0; }
.hub-card-link { font-size: 0.875rem; font-weight: 600; color: var(--accent); }
.hub-card:hover .hub-card-link { text-decoration: underline; }

.team-hub-diagram {
    position: relative;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    aspect-ratio: 1;
    background: linear-gradient(145deg, rgba(0, 168, 150, 0.1) 0%, rgba(0, 168, 150, 0.03) 100%);
    border-radius: 0.5rem;
    padding: 1.5rem;
}
html.dark .team-hub-diagram {
    background: linear-gradient(145deg, rgba(0, 168, 150, 0.18) 0%, rgba(27, 38, 59, 0.9) 100%);
}
.team-hub-diagram svg { width: 100%; height: 100%; }
.team-hub-diagram .hub-line { stroke: var(--accent); stroke-width: 2; fill: none; opacity: 0.6; }
.team-hub-diagram .hub-node {
    position: absolute;
    width: 3rem; height: 3rem;
    border-radius: 50%;
    background: rgba(0, 168, 150, 0.15);
    border: 2px solid var(--accent);
    display: flex; align-items: center; justify-content: center;
    color: var(--accent);
    font-size: 1.1rem;
}
html.dark .team-hub-diagram .hub-node { background: rgba(0, 168, 150, 0.25); }
.team-hub-diagram .hub-center {
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 4rem; height: 4rem; font-size: 1.25rem;
}
.team-hub-diagram .hub-tl { top: 8%; left: 8%; }
.team-hub-diagram .hub-tr { top: 8%; right: 8%; }
.team-hub-diagram .hub-bl { bottom: 8%; left: 8%; }
.team-hub-diagram .hub-br { bottom: 8%; right: 8%; }

/* Diagrama ciclo holístico */
.holistic-cycle {
    position: relative;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    aspect-ratio: 1;
}
.holistic-cycle svg { width: 100%; height: 100%; }
.holistic-cycle .cycle-arrow {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2.5;
    stroke-linecap: round;
}
.holistic-cycle .cycle-label {
    position: absolute;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
    color: var(--text-light);
    max-width: 110px;
    line-height: 1.3;
}
html.dark .holistic-cycle .cycle-label { color: var(--text-dark); }
.holistic-cycle .label-top { top: 2%; left: 50%; transform: translateX(-50%); }
.holistic-cycle .label-right { top: 50%; right: 0; transform: translateY(-50%); }
.holistic-cycle .label-bottom { bottom: 2%; left: 50%; transform: translateX(-50%); }
.holistic-cycle .label-left { top: 50%; left: 0; transform: translateY(-50%); }

#whatsapp-fab {
    position: fixed; bottom: 20px; right: 20px; z-index: 45;
    width: 56px; height: 56px; border-radius: 50%;
    background-color: #25D366; color: white;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.75rem; box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    transition: transform 0.2s, background-color 0.2s;
}
#whatsapp-fab:hover { transform: scale(1.08); background-color: #20bd5a; }

.breadcrumb { font-size: 0.875rem; color: #6b7280; margin-bottom: 1.5rem; }
.breadcrumb a { color: var(--accent); }
.breadcrumb a:hover { text-decoration: underline; }
html.dark .breadcrumb { color: #a0aec0; }

.landing-section { padding: 5rem 0; }
.landing-hero { padding-top: 8rem; padding-bottom: 4rem; }
.faq-item { border-bottom: 1px solid #e5e7eb; }
html.dark .faq-item { border-color: #2d3748; }

.service-card-link { display: block; text-decoration: none; color: inherit; height: 100%; }
.service-card-link:hover .text-accent-link { text-decoration: underline; }