/* ================================================================
   LABORATORIO — Diseño radical
   Dark-editorial. Secciones alternadas. Glow cards. Tipografía oversized.
   ================================================================ */

/* ────────────────────────────────────────────────────────────────
   HERO — full dark inmersivo
──────────────────────────────────────────────────────────────── */

.lab-shell {
    position: relative;
    padding: 0;
    overflow: hidden;
    color: white;
    background: var(--gradient-brand);
}

/* ruido de textura */
.lab-shell::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0) 30%);
    background-size: 28px 28px, auto;
    pointer-events: none;
    z-index: 0;
}

/* glow de luces de color */
.lab-shell-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-halo-top);
    pointer-events: none;
    z-index: 0;
}

/* línea degradada inferior del hero */
.lab-shell::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(184,93,119,0.8) 15%,
        rgba(212,168,92,0.9) 50%,
        rgba(91,159,177,0.8) 85%,
        transparent 100%);
    z-index: 3;
}

.lab-shell-inner {
    position: relative;
    z-index: 2;
    max-width: 1320px;
    margin: 0 auto;
    min-height: 620px;
    padding: 6rem 3.5rem 6rem 3rem;
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(260px, 0.62fr);
    gap: 3rem;
    align-items: center;
}

.lab-overline {
    margin: 0 0 1.4rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.36);
}

.lab-display {
    margin: 0;
    font-family: var(--font-brand);
    color: white;
    position: relative;
    display: inline-block;
    font-size: clamp(4.5rem, 8vw, 8.5rem);
    line-height: 0.86;
    letter-spacing: -0.025em;
}

/* palabra con gradiente de color */
.lab-display em {
    font-style: normal;
    background: linear-gradient(135deg, var(--brand-pink) 0%, var(--brand-yellow) 50%, var(--brand-cyan) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.lab-display::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -16px;
    width: 100%;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--brand-pink), var(--brand-yellow), var(--brand-cyan));
    box-shadow: 0 0 24px rgba(184,93,119,0.6), 0 0 48px rgba(212,168,92,0.35);
}

.lab-lead {
    max-width: 660px;
    margin: 2.6rem 0 0;
    font-size: 1.12rem;
    line-height: 2;
}

.lab-hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2.5rem;
}

/* ── Panel lateral hero ── */

.lab-hero-panel {
    padding: 1.75rem;
    border-radius: 28px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(20px) saturate(1.4);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.03) inset,
        0 32px 80px rgba(0,0,0,0.4);
}

.lab-summary-panel {
    height: 100%;
    background: var(--gradient-card);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-surface);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.lab-summary-panel .lab-panel-head {
    color: var(--text-soft);
}

.lab-summary-panel .lab-panel-matrix div {
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(27, 58, 75, 0.08);
}

.lab-summary-panel .lab-panel-matrix strong {
    color: var(--primary-dark);
    text-shadow: none;
}

.lab-summary-panel .lab-panel-matrix span {
    color: var(--medium-gray);
}

.lab-panel-head {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 1.4rem;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
}

.lab-panel-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--brand-yellow);
    box-shadow: 0 0 0 6px rgba(212,168,92,0.18), 0 0 16px rgba(212,168,92,0.55);
}

.lab-panel-matrix {
    display: grid;
    gap: 0.7rem;
}

.lab-panel-matrix div {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 0.85rem;
    align-items: center;
    padding: 0.9rem 1rem;
    border-radius: 18px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    transition: background 200ms, border-color 200ms;
}

.lab-panel-matrix div:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(212,168,92,0.22);
}

.lab-panel-matrix strong {
    font-family: var(--font-brand);
    font-size: 1.75rem;
    color: var(--brand-yellow);
    text-shadow: 0 0 24px rgba(212,168,92,0.5);
}

.lab-panel-matrix span {
    color: rgba(255,255,255,0.8);
    line-height: 1.4;
    font-size: 0.88rem;
}

.lab-panel-note {
    margin: 1.2rem 0 0;
    color: rgba(255,255,255,0.42);
    line-height: 1.8;
    font-size: 0.9rem;
}

/* ────────────────────────────────────────────────────────────────
   BODY — fondo blanco limpio, secciones alternadas
──────────────────────────────────────────────────────────────── */

.lab-main { background: #f4f7f9; }

.lab-main { background: var(--section-wash); }

.lab-section { padding: 5.5rem 0; }

.lab-section-heading {
    max-width: 860px;
    margin-bottom: 3rem;
}

.lab-section-heading h2 {
    margin-bottom: 0.8rem;
    color: var(--primary-dark);
    font-size: clamp(2rem, 3.5vw, 2.9rem);
    line-height: 1.15;
}

.lab-section-heading p {
    font-size: 1.1rem;
    line-height: 1.95;
    color: var(--medium-gray);
    margin: 0;
}

/* ── Sección de principios — fondo oscuro dramático ── */

.lab-section--principles {
    background: var(--section-wash-alt);
    color: var(--text-strong);
    clip-path: none;
    padding: 5.5rem 0;
}

.lab-section--principles .lab-section-heading h2 { color: var(--primary-dark); }
.lab-section--principles .lab-section-heading p  { color: var(--medium-gray); }

/* ────────────────────────────────────────────────────────────────
   METHOD FRAME
──────────────────────────────────────────────────────────────── */

.lab-method-frame {
    position: relative;
    max-width: 1020px;
    padding: 2.6rem 3rem;
    border-radius: 28px;
    overflow: hidden;
    background: var(--gradient-card);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-surface);
}

/* borde degradado */
.lab-method-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 28px;
    padding: 1.5px;
    background: linear-gradient(135deg,
        rgba(184,93,119,0.7),
        rgba(212,168,92,0.7),
        rgba(91,159,177,0.65));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* glow interior */
.lab-method-frame::after {
    content: '';
    position: absolute;
    top: -30%;
    right: -10%;
    width: 50%;
    height: 150%;
    background: radial-gradient(ellipse, rgba(212,168,92,0.12), transparent 60%);
    pointer-events: none;
}

.lab-method-badge {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    margin-bottom: 1.2rem;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.84);
    color: var(--primary-dark);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border: 1px solid rgba(27, 58, 75, 0.1);
}

.lab-method-copy {
    position: relative;
    z-index: 1;
    max-width: 820px;
    margin: 0;
    font-size: 1.28rem;
    line-height: 1.95;
    color: var(--text-body);
    font-style: normal;
}

/* ────────────────────────────────────────────────────────────────
   CARDS — Principios (sobre fondo oscuro)
──────────────────────────────────────────────────────────────── */

.lab-principles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.lab-principle-card {
    position: relative;
    padding: 2rem 1.8rem 1.8rem;
    border-radius: 24px;
    background: var(--gradient-card);
    border: 1px solid var(--border-soft);
    overflow: hidden;
    transition: transform 220ms ease, background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
    cursor: default;
}

.lab-principle-card:hover {
    transform: translateY(-6px);
    border-color: rgba(91, 159, 177, 0.22);
    box-shadow: var(--shadow-float);
}

.lab-principle-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-pink), var(--brand-yellow), var(--brand-cyan));
}

.lab-principle-card::after {
    content: '';
    position: absolute;
    bottom: 0; right: 0;
    width: 120px; height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(184,93,119,0.12), transparent 70%);
    pointer-events: none;
    transition: opacity 300ms;
    opacity: 0;
}

.lab-principle-card:hover::after { opacity: 1; }

.lab-principle-index {
    display: inline-block;
    margin-bottom: 1.1rem;
    font-family: var(--font-brand);
    font-size: 3rem;
    line-height: 1;
    color: rgba(23, 50, 65, 0.12);
}

.lab-principle-card h3 {
    color: var(--primary-dark);
    margin-bottom: 0.75rem;
    font-size: 1.12rem;
}

.lab-principle-card p {
    margin: 0;
    color: var(--medium-gray);
    line-height: 1.75;
    font-size: 0.97rem;
}

/* ────────────────────────────────────────────────────────────────
   CAPACIDADES (sobre fondo claro)
──────────────────────────────────────────────────────────────── */

.lab-capabilities {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

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

.lab-capability-card {
    position: relative;
    padding: 2rem 1.8rem 1.8rem;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid rgba(27,58,75,0.07);
    box-shadow: 0 4px 6px rgba(27,58,75,0.04), 0 20px 50px rgba(27,58,75,0.07);
    overflow: hidden;
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
    cursor: default;
}

.lab-capability-card:hover {
    transform: translateY(-5px);
    border-color: rgba(184,93,119,0.2);
    box-shadow: 0 8px 16px rgba(27,58,75,0.06), 0 32px 72px rgba(27,58,75,0.12);
}

/* Distinción editorial del laboratorio */
.lab-shell {
    background:
        radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0) 24%),
        linear-gradient(135deg, #183243 0%, #234a5f 52%, #163140 100%);
    background-size: 28px 28px, auto, auto;
}

.lab-shell::before,
.lab-shell-inner::before {
    background:
        radial-gradient(ellipse 42% 28% at 10% 0%, rgba(184,93,119,0.34) 0%, transparent 72%),
        radial-gradient(ellipse 26% 18% at 46% 0%, rgba(212,168,92,0.22) 0%, transparent 74%),
        radial-gradient(ellipse 34% 20% at 84% 0%, rgba(91,159,177,0.3) 0%, transparent 72%),
        linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 36%);
}

.lab-display {
    letter-spacing: -0.025em;
    text-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
}

.lab-lead {
    color: var(--text-inverse-soft);
}

.lab-hero-panel {
    background: rgba(8, 23, 31, 0.62);
    border-color: rgba(255,255,255,0.1);
    backdrop-filter: blur(22px) saturate(1.3);
    -webkit-backdrop-filter: blur(22px) saturate(1.3);
    box-shadow: 0 34px 90px rgba(5, 14, 20, 0.38);
}

.lab-panel-matrix div {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.1);
}

.lab-panel-matrix div:hover {
    border-color: rgba(91,159,177,0.34);
    box-shadow: 0 0 34px rgba(91,159,177,0.12), 0 30px 70px rgba(0,0,0,0.32);
}

.lab-capability-card {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,249,251,0.94)),
        radial-gradient(circle at top right, rgba(91,159,177,0.08), transparent 26%);
    border-radius: 28px;
}

.lab-capability-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-pink), var(--brand-yellow), var(--brand-cyan));
}

.lab-capability-card::after {
    content: '';
    position: absolute;
    top: -60%; left: -20%;
    width: 140%; height: 140%;
    background: radial-gradient(circle at 50% 0%, rgba(184,93,119,0.06), transparent 50%);
    opacity: 0;
    transition: opacity 400ms;
    pointer-events: none;
}

.lab-capability-card:hover::after { opacity: 1; }

.lab-capability-card h3 {
    color: var(--primary-dark);
    margin-bottom: 0.75rem;
    font-size: 1.12rem;
}

.lab-capability-card p {
    margin: 0;
    color: var(--medium-gray);
    line-height: 1.75;
    font-size: 0.97rem;
}

/* ────────────────────────────────────────────────────────────────
   SECCIONES
──────────────────────────────────────────────────────────────── */

.lab-section--feature {
    background: #ffffff;
}

.lab-section--feature .lab-section-heading,
.lab-section--video .lab-section-heading,
.lab-section--shots .lab-section-heading {
    max-width: 920px;
}

.lab-section--video {
    background: #f4f7f9;
}

.lab-section--shots {
    background:
        radial-gradient(ellipse 80% 60% at 0% 50%, rgba(184,93,119,0.07), transparent 50%),
        radial-gradient(ellipse 60% 70% at 100% 30%, rgba(91,159,177,0.07), transparent 50%),
        #0d1a24;
    color: white;
    clip-path: polygon(0 3.5vw, 100% 0, 100% calc(100% - 3.5vw), 0 100%);
    padding: calc(5.5rem + 3.5vw) 0;
}

.lab-section--shots .lab-section-heading h2 { color: white; }
.lab-section--shots .lab-section-heading p  { color: rgba(255,255,255,0.6); }

/* ────────────────────────────────────────────────────────────────
   TABS
──────────────────────────────────────────────────────────────── */

.lab-tabs { display: grid; gap: 1.75rem; }

.lab-tabs[data-active-theme="social"] .lab-tab-list {
    background: rgba(184,93,119,0.08);
    border-color: rgba(184,93,119,0.14);
}

.lab-tabs[data-active-theme="social"] .lab-tab-button.active {
    background: linear-gradient(135deg, #8e3156, #c06a8a);
    box-shadow: 0 14px 36px rgba(184,93,119,0.28);
}

.lab-tabs[data-active-theme="social"] .lab-project-list {
    background: linear-gradient(180deg, rgba(255,243,248,0.97), rgba(255,250,253,0.93));
    border-color: rgba(184,93,119,0.11);
}

.lab-tabs[data-active-theme="social"] .lab-project-card.active {
    background: linear-gradient(135deg, #8e3156, #c06a8a 55%, #d898b0 100%);
    border-color: rgba(184,93,119,0.45);
    box-shadow: 0 22px 52px rgba(184,93,119,0.25);
}

.lab-tabs[data-active-theme="social"] .lab-project-detail.active {
    background:
        radial-gradient(ellipse at top right, rgba(184,93,119,0.08), transparent 30%),
        linear-gradient(180deg, rgba(255,250,253,0.98), rgba(255,255,255,0.94));
    border-color: rgba(184,93,119,0.1);
}

.lab-tabs[data-active-theme="social"] .lab-inline-label,
.lab-tabs[data-active-theme="social"] .lab-list-label,
.lab-tabs[data-active-theme="social"] .lab-feature-meta span {
    color: #ae4d72;
}

.lab-tab-list {
    display: inline-flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.5rem;
    border-radius: 999px;
    background: rgba(23,50,65,0.07);
    border: 1px solid rgba(27,58,75,0.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}

.lab-tab-button {
    border: 0;
    border-radius: 999px;
    padding: 0.9rem 1.4rem;
    background: transparent;
    color: var(--primary-dark);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 140ms, color 140ms, box-shadow 140ms;
}

.lab-tab-button:hover,
.lab-tab-button:focus-visible {
    background: rgba(255,255,255,0.8);
    outline: none;
}

.lab-tab-button.active {
    color: white;
    background: linear-gradient(135deg, #0d1a24, #1a3a4f);
    box-shadow: 0 12px 28px rgba(13,26,36,0.28), 0 0 0 1px rgba(255,255,255,0.08) inset;
}

.lab-tab-panel[hidden] { display: none; }

/* ────────────────────────────────────────────────────────────────
   SHOWCASE GRID
──────────────────────────────────────────────────────────────── */

.lab-showcase-grid {
    display: grid;
    grid-template-columns: 310px minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}

.lab-project-list {
    display: grid;
    gap: 0.85rem;
    align-content: start;
    position: sticky;
    top: 6.5rem;
    padding: 1rem;
    border-radius: 28px;
    background: #ffffff;
    border: 1px solid rgba(27,58,75,0.08);
    box-shadow: 0 20px 50px rgba(27,58,75,0.08);
}

.lab-list-header { padding: 0.3rem 0.3rem 0.15rem; }

.lab-list-header h3 {
    margin: 0.35rem 0 0;
    color: var(--primary-dark);
    font-size: 1.3rem;
}

.lab-list-label {
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brand-pink);
}

.lab-project-card {
    text-align: left;
    width: 100%;
    border: 1px solid rgba(27,58,75,0.07);
    border-radius: 22px;
    padding: 1.2rem 1.35rem;
    background: #f7fafb;
    cursor: pointer;
    transition: transform 150ms, border-color 150ms, box-shadow 150ms, background 150ms;
}

.lab-project-card:hover,
.lab-project-card:focus-visible {
    transform: translateY(-2px);
    background: #fff;
    border-color: rgba(184,93,119,0.24);
    box-shadow: 0 12px 32px rgba(27,58,75,0.1);
    outline: none;
}

.lab-project-card.active {
    background: linear-gradient(135deg, #0d1a24, #1a3a4f);
    border-color: rgba(26,58,79,0.65);
    box-shadow: 0 22px 50px rgba(7,15,22,0.25);
}

.lab-project-card strong,
.lab-project-card p { display: block; }

.lab-project-card strong {
    margin-bottom: 0.55rem;
    color: var(--primary-dark);
    font-size: 1.02rem;
}

.lab-project-card p {
    margin: 0;
    color: var(--medium-gray);
    line-height: 1.65;
    font-size: 0.92rem;
}

.lab-project-card.active strong,
.lab-project-card.active p,
.lab-project-card.active .lab-project-kicker { color: white; }

.lab-project-kicker {
    display: inline-flex;
    margin-bottom: 0.85rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brand-pink);
}

.lab-project-panels { position: relative; min-width: 0; }

.lab-project-detail {
    display: none;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    padding: 2.2rem 2.4rem;
    border-radius: 30px;
    background: #ffffff;
    border: 1px solid rgba(27,58,75,0.08);
    box-shadow: 0 30px 70px rgba(27,58,75,0.1);
    min-width: 0;
}

.lab-project-detail.active { display: grid; }

.lab-project-copy h3 {
    margin-bottom: 0.9rem;
    color: var(--primary-dark);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
}

.lab-project-copy { max-width: 980px; }

.lab-project-copy > p:not(.lab-inline-label) {
    margin-top: 0;
    line-height: 1.85;
}

.lab-project-intro { font-size: 1.04rem; color: var(--medium-gray); }

.lab-project-media { display: grid; gap: 1.35rem; min-width: 0; }

.lab-project-media-heading h4 {
    margin: 0.35rem 0 0;
    color: var(--primary-dark);
    font-size: 1.18rem;
}

.lab-feature-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
    gap: 2.5rem;
    align-items: center;
}

.lab-inline-label {
    margin: 0 0 0.9rem;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brand-pink);
}

.lab-feature-copy > p { max-width: 760px; }

.lab-feature-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
    margin-top: 1.5rem;
}

.lab-feature-meta div {
    padding: 1.1rem;
    border-radius: 18px;
    background: #f4f7f9;
    border: 1px solid rgba(27,58,75,0.07);
}

.lab-feature-meta span {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--brand-pink);
}

.lab-feature-meta strong {
    display: block;
    color: var(--primary-dark);
    line-height: 1.45;
    font-size: 0.96rem;
}

.lab-feature-list {
    display: grid;
    gap: 0.85rem;
    margin-top: 1.8rem;
}

.lab-feature-list div {
    padding: 1.1rem 1.2rem;
    border-left: 3px solid var(--brand-pink);
    background: #f7fafb;
    border-radius: 0 16px 16px 0;
    transition: background 160ms, border-color 160ms;
}

.lab-feature-list div:hover {
    background: #fff;
    border-color: var(--brand-cyan);
}

.lab-feature-list h3 {
    margin-bottom: 0.3rem;
    color: var(--primary-dark);
    font-size: 1rem;
}

.lab-feature-list p { margin: 0; font-size: 0.94rem; line-height: 1.7; }

.lab-feature-visual { position: relative; }

.lab-feature-visual::before {
    content: '';
    position: absolute;
    inset: -22px;
    border-radius: 34px;
    background: linear-gradient(135deg,
        rgba(184,93,119,0.07),
        rgba(212,168,92,0.05),
        rgba(91,159,177,0.06));
}

/* ────────────────────────────────────────────────────────────────
   SCREENS decorativos
──────────────────────────────────────────────────────────────── */

.lab-screen {
    position: relative;
    z-index: 1;
    width: 100%;
    border-radius: 26px;
    overflow: hidden;
    background: linear-gradient(180deg, #0d1a24, #1a3a4f);
    box-shadow: 0 28px 64px rgba(7,15,22,0.3);
}

.lab-screen--alt   { background: linear-gradient(180deg, #1a2e3d, #2b4d60); }
.lab-screen--brand { background: linear-gradient(180deg, #301e1c, #5e3c2e 55%, #292a37); }
.lab-screen--minimal { background: linear-gradient(180deg, #14292f, #224245 60%, #162d38); }

.lab-screen-top {
    display: flex;
    gap: 0.45rem;
    padding: 0.95rem 1.1rem;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.lab-screen-top span {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
}

.lab-screen-body { padding: 1.5rem; }

.lab-screen-kpi {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 1.4rem;
}

.lab-screen-kpi strong {
    font-family: var(--font-brand);
    font-size: 2.8rem;
    color: white;
}

.lab-screen-kpi span { color: rgba(255,255,255,0.7); }

.lab-screen-chart {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: end;
    gap: 0.65rem;
    height: 170px;
    margin-bottom: 1.4rem;
}

.lab-screen-chart .bar {
    border-radius: 14px 14px 4px 4px;
    background: linear-gradient(180deg, var(--brand-cyan), var(--brand-pink));
}

.bar-a { height: 42%; }
.bar-b { height: 68%; }
.bar-c { height: 84%; }
.bar-d { height: 58%; }

.lab-screen-lines { display: grid; gap: 0.75rem; }

.lab-screen-lines span {
    height: 9px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
}

/* ────────────────────────────────────────────────────────────────
   VIDEO FRAME
──────────────────────────────────────────────────────────────── */

.lab-video-frame {
    position: relative;
    padding: 1rem;
    border-radius: 32px;
    background: linear-gradient(135deg,
        rgba(184,93,119,0.22),
        rgba(212,168,92,0.16),
        rgba(91,159,177,0.18));
    box-shadow: 0 32px 80px rgba(7,15,22,0.18);
}

.lab-video-frame--social {
    background: linear-gradient(135deg,
        rgba(184,93,119,0.3),
        rgba(241,180,197,0.22),
        rgba(255,220,195,0.18));
}

.lab-video-frame--private {
    background: linear-gradient(135deg,
        rgba(13,26,36,0.35),
        rgba(55,102,130,0.22),
        rgba(212,168,92,0.14));
}

.lab-video-frame::before {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 31px;
    background: linear-gradient(180deg, rgba(7,15,22,0.99), rgba(20,58,79,0.97));
}

.lab-video-placeholder {
    position: relative;
    z-index: 1;
    min-height: 460px;
    padding: 2.4rem;
    border-radius: 26px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 20% 24%, rgba(91,159,177,0.28), transparent 24%),
        radial-gradient(ellipse at 80% 18%, rgba(184,93,119,0.24), transparent 26%),
        linear-gradient(135deg, #07111a 0%, #0f2333 52%, #172e42 100%);
}

.lab-video-placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 34px 34px;
    pointer-events: none;
}

.lab-video-asset {
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 4 / 3;
    min-height: 700px;
    max-height: 820px;
    display: block;
    object-fit: cover;
    background: #07111a;
    filter: saturate(0.92) contrast(1.03);
    border-radius: 26px;
    object-position: top center;
}

.lab-video-caption {
    position: absolute;
    left: 1.8rem;
    right: 1.8rem;
    bottom: 1.8rem;
    z-index: 2;
    padding: 1.2rem 1.4rem;
    border-radius: 20px;
    background: rgba(7,15,22,0.74);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.09);
}

.lab-video-caption strong {
    display: block;
    margin-bottom: 0.3rem;
    color: white;
    font-size: 1.08rem;
}

.lab-video-caption span {
    color: rgba(255,255,255,0.7);
    line-height: 1.7;
    font-size: 0.93rem;
}

.lab-video-placeholder strong {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--font-brand);
    font-size: clamp(1.8rem, 3vw, 2.7rem);
    line-height: 1.02;
    color: white;
    text-transform: uppercase;
}

.lab-video-placeholder span {
    display: block;
    color: rgba(255,255,255,0.7);
    line-height: 1.8;
}

.lab-video-play {
    position: relative;
    z-index: 1;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    background: linear-gradient(135deg, var(--brand-pink), var(--brand-yellow));
    box-shadow: 0 0 0 12px rgba(255,255,255,0.07), 0 20px 44px rgba(184,93,119,0.4);
    flex-shrink: 0;
    transition: transform 200ms, box-shadow 200ms;
}

.lab-video-play:hover {
    transform: scale(1.07);
    box-shadow: 0 0 0 18px rgba(255,255,255,0.09), 0 24px 50px rgba(184,93,119,0.5);
}

.lab-video-play svg { width: 34px; height: 34px; margin-left: 4px; }

/* ────────────────────────────────────────────────────────────────
   PROCESS CAROUSEL
──────────────────────────────────────────────────────────────── */

.lab-process-carousel {
    position: relative;
    min-height: 0;
    padding: clamp(0.85rem, 1.3vw, 1.1rem);
    border-radius: 30px;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.85rem, 1.3vw, 1.1rem);
    background:
        radial-gradient(ellipse at 0% 0%, rgba(184,93,119,0.14), transparent 45%),
        radial-gradient(ellipse at 100% 0%, rgba(212,168,92,0.1), transparent 45%),
        radial-gradient(ellipse at 100% 100%, rgba(91,159,177,0.1), transparent 45%),
        #ffffff;
    box-shadow:
        0 40px 100px rgba(7,15,22,0.14),
        0 0 0 1px rgba(255,255,255,0.9) inset;
    transition: transform 280ms ease, box-shadow 280ms ease;
}

.lab-process-carousel::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(135deg,
        rgba(184,93,119,0.55),
        rgba(212,168,92,0.5),
        rgba(91,159,177,0.5));
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.7;
    transition: opacity 280ms;
}

.lab-process-carousel:hover {
    transform: translateY(-5px);
    box-shadow:
        0 54px 120px rgba(7,15,22,0.18),
        0 0 0 1px rgba(255,255,255,0.95) inset;
}

.lab-process-carousel:hover::before { opacity: 1; }

.lab-process-slide {
    position: relative;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    border-radius: 20px;
    overflow: hidden;
    background: white;
    border: 1px solid rgba(255,255,255,0.85);
    box-shadow: 0 2px 12px rgba(7,15,22,0.08), inset 0 1px 0 white;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition:
        opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 240ms,
        box-shadow 240ms;
}

.lab-process-slide.active { opacity: 1; transform: none; }

.lab-process-slide:hover {
    border-color: rgba(91,159,177,0.35);
    box-shadow: 0 6px 22px rgba(7,15,22,0.1), inset 0 1px 0 white;
}

.lab-process-slide img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    min-height: 0;
    display: block;
    object-fit: cover;
    object-position: top center;
    padding: 0;
    background: #f4f7f9;
    transition: transform 260ms, filter 260ms;
}

.lab-process-carousel:hover .lab-process-slide img {
    filter: saturate(1.04) contrast(1.02);
}

.lab-process-caption {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 0;
    padding: 0.85rem 1.05rem 0.75rem;
    background: white;
    border-top: 1px solid rgba(27,58,75,0.07);
}

.lab-process-caption strong {
    display: block;
    margin-bottom: 0.32rem;
    color: var(--primary-dark);
    font-size: clamp(0.9rem, 1.1vw, 1.02rem);
    line-height: 1.25;
}

.lab-process-caption strong::before {
    content: '';
    display: inline-block;
    width: 1.8rem;
    height: 3px;
    margin-right: 0.6rem;
    border-radius: 999px;
    vertical-align: middle;
    background: linear-gradient(90deg, var(--brand-pink), var(--brand-yellow), var(--brand-cyan));
    box-shadow: 0 0 12px rgba(184,93,119,0.3);
}

.lab-process-caption p {
    margin: 0;
    color: var(--medium-gray);
    font-size: 0.85rem;
    line-height: 1.58;
}

.lab-process-dots {
    display: none;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 999px;
    background: rgba(7,15,22,0.3);
    border: 1px solid rgba(255,255,255,0.18);
    backdrop-filter: blur(12px);
}

.lab-process-dots button {
    width: 0.62rem;
    height: 0.62rem;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,0.76);
    cursor: pointer;
    transition: width 180ms, background 180ms;
}

.lab-process-dots button.active {
    width: 1.7rem;
    background: linear-gradient(90deg, var(--brand-pink), var(--brand-yellow), var(--brand-cyan));
}

.lab-process-dots button:hover,
.lab-process-dots button:focus-visible {
    outline: 2px solid rgba(91,159,177,0.36);
    outline-offset: 3px;
}

/* ────────────────────────────────────────────────────────────────
   SHOTS — sobre fondo oscuro
──────────────────────────────────────────────────────────────── */

.lab-shots-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.lab-shot-card {
    padding: 1rem;
    border-radius: 24px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 20px 48px rgba(0,0,0,0.2);
    transition: transform 200ms, box-shadow 200ms, border-color 200ms;
}

.lab-shot-card:hover {
    transform: translateY(-5px);
    border-color: rgba(184,93,119,0.35);
    box-shadow: 0 0 30px rgba(184,93,119,0.1), 0 30px 64px rgba(0,0,0,0.3);
}

.lab-shot-card h3 {
    margin: 1.1rem 0 0.4rem;
    color: white;
}

.lab-shot-card p {
    margin: 0;
    color: rgba(255,255,255,0.6);
    font-size: 0.94rem;
}

.lab-shot-placeholder {
    min-height: 240px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.8);
    background:
        radial-gradient(ellipse at 18% 22%, rgba(184,93,119,0.26), transparent 24%),
        radial-gradient(ellipse at 82% 18%, rgba(212,168,92,0.22), transparent 26%),
        linear-gradient(135deg, #0d1a24 0%, #1a3a4f 56%, #0d1a24 100%);
    overflow: hidden;
    position: relative;
}

.lab-shot-placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 26px 26px;
}

.lab-shot-placeholder svg { position: relative; z-index: 1; width: 48px; height: 48px; }

/* ────────────────────────────────────────────────────────────────
   CTA CARD — el más dramático
──────────────────────────────────────────────────────────────── */

.lab-cta-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2.5rem;
    align-items: center;
    padding: 3rem 3.5rem;
    border-radius: 30px;
    overflow: hidden;
    background: #07111a;
    box-shadow: 0 50px 120px rgba(7,15,22,0.5);
}

/* borde degradado brillante */
.lab-cta-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 30px;
    padding: 2px;
    background: linear-gradient(135deg,
        var(--brand-pink),
        var(--brand-yellow),
        var(--brand-cyan),
        var(--brand-pink));
    background-size: 300% 300%;
    animation: gradientShift 6s ease infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

@keyframes gradientShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* glow de luz interior */
.lab-cta-card::after {
    content: '';
    position: absolute;
    top: -40%;
    left: 20%;
    width: 60%;
    height: 180%;
    background: radial-gradient(ellipse, rgba(184,93,119,0.1), transparent 60%);
    pointer-events: none;
}

.lab-cta-card h2,
.lab-cta-card p,
.lab-cta-card .lab-inline-label { color: white; }

.lab-cta-card p {
    max-width: 700px;
    color: rgba(255,255,255,0.65);
    margin-bottom: 0;
    line-height: 1.85;
}

.lab-cta-actions {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex-shrink: 0;
}

.lab-cta-actions .button {
    color: var(--primary-dark);
}

.lab-cta-actions .button-secondary {
    border-color: rgba(255,255,255,0.25);
    color: var(--primary-dark);
}

.lab-cta-actions .button-secondary:hover {
    border-color: var(--brand-pink);
    background: rgba(184,93,119,0.1);
}

/* ================================================================
   RESPONSIVE
================================================================ */

@media (max-width: 1100px) {
    .lab-shell-inner,
    .lab-feature-grid,
    .lab-cta-card,
    .lab-showcase-grid,
    .lab-project-detail { grid-template-columns: 1fr; }

    .lab-hero-panel { max-width: 600px; }
    .lab-project-list { position: static; }

    .lab-principles,
    .lab-capabilities,
    .lab-shots-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .lab-feature-meta { grid-template-columns: 1fr; }
    .lab-cta-actions { justify-content: flex-start; }
}

@media (max-width: 900px) {
    .lab-shell-inner { min-height: auto; padding: 3.5rem 2rem; }
    .lab-display { font-size: clamp(3.2rem, 13vw, 5rem); }
    .lab-lead { font-size: 1.05rem; }
    .lab-video-placeholder { min-height: 360px; }
    .lab-video-asset { aspect-ratio: 4 / 3; min-height: 520px; max-height: none; }
    .lab-process-carousel { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 24px; }

    .lab-section--principles,
    .lab-section--shots { clip-path: polygon(0 0, 100% 5vw, 100% 100%, 0 calc(100% - 5vw)); }
}

@media (max-width: 720px) {
    .lab-principles,
    .lab-capabilities,
    .lab-shots-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .lab-shell-inner { padding: 3.5rem 1.25rem; }
    .lab-section { padding: 3.5rem 0; }


.lab-shell {
    background:
        radial-gradient(circle at 1px 1px, rgba(255,255,255,0.06) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 24%),
        var(--gradient-brand);
    background-size: 28px 28px, auto, auto;
}

.lab-shell::before,
.lab-shell-inner::before {
    background: var(--gradient-halo-top);
}

.lab-shell-inner {
    max-width: 1320px;
    padding: clamp(5rem, 8vw, 6.5rem) var(--section-padding-x);
}

.lab-lead,
.lab-panel-note,
.lab-panel-matrix span {
    color: var(--text-inverse-soft);
}

.lab-hero-panel,
.lab-card,
.lab-timeline-card,
.lab-feature-card,
.lab-panel-matrix div {
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-glow);
}
    .lab-section--principles,
    .lab-section--shots { clip-path: none; padding: 3.5rem 0; }

    .lab-hero-actions,
    .lab-cta-actions { flex-direction: column; }

    .lab-hero-actions .button,
    .lab-cta-actions .button { width: 100%; }

    .lab-hero-panel,
    .lab-method-frame,
    .lab-project-detail,
    .lab-cta-card { padding: 1.4rem; }

    .lab-tab-list { display: grid; border-radius: 22px; }
    .lab-tab-button { width: 100%; }
    .lab-video-frame { padding: 0.75rem; border-radius: 22px; }
    .lab-process-carousel { grid-template-columns: 1fr; border-radius: 22px; }
    .lab-process-slide { border-radius: 16px; }
    .lab-process-caption { padding: 0.7rem 0.9rem 0.6rem; }
    .lab-video-placeholder { min-height: 300px; padding: 1.4rem; border-radius: 18px; }
    .lab-video-asset { aspect-ratio: 1 / 1; min-height: 340px; }
    .lab-video-caption { left: 1.2rem; right: 1.2rem; bottom: 1.2rem; padding: 0.95rem; }
    .lab-video-play { width: 72px; height: 72px; }
    .lab-video-play svg { width: 28px; height: 28px; }
    .lab-shot-placeholder { min-height: 190px; }
}

@media (max-width: 480px) {
    .lab-shell-inner { padding-top: 3rem; padding-bottom: 3rem; }
    .lab-display { font-size: clamp(2.2rem, 11vw, 3.2rem); line-height: 0.92; overflow-wrap: anywhere; }
    .lab-lead { font-size: 0.97rem; line-height: 1.78; }
    .lab-video-asset { aspect-ratio: 4 / 5; min-height: 280px; border-radius: 18px; }
    .lab-project-copy h3 { font-size: clamp(1.45rem, 7vw, 2rem); overflow-wrap: anywhere; }
}

@media (max-width: 360px) {
    .lab-shell-inner,
    .lab-section { padding-left: 1rem; padding-right: 1rem; }
}

/* ─── SECCIÓN INTRO — fondo oscuro dramático con diagonal ─── */
.lab-section--intro {
    background:
        radial-gradient(ellipse 80% 60% at 0% 50%, rgba(184,93,119,0.12), transparent 50%),
        radial-gradient(ellipse 60% 70% at 100% 30%, rgba(91,159,177,0.1), transparent 50%),
        #0d1a24;
    color: white;
    clip-path: polygon(0 0, 100% 3.5vw, 100% 100%, 0 calc(100% - 3.5vw));
    padding: calc(5.5rem + 3.5vw) 0;
    margin-top: -1px;
}

.lab-section--intro .lab-section-heading h2 { color: white; }
.lab-section--intro .lab-section-heading p  { color: rgba(255,255,255,0.6); }

/* ─── SECCIÓN FEATURE — fondo claro con acento ─── */
.lab-section--feature {
    background:
        radial-gradient(ellipse at 100% 0%, rgba(91,159,177,0.06), transparent 40%),
        #f4f7f9;
    padding: 5.5rem 0;
}

/* Cohesion with global premium social-tech system */
.lab-shell {
    background:
        radial-gradient(circle at 12% 0%, rgba(184, 93, 119, 0.14), transparent 26%),
        radial-gradient(circle at 82% 2%, rgba(91, 159, 177, 0.18), transparent 28%),
        linear-gradient(135deg, #102733 0%, #183a4b 52%, #102b38 100%);
}

.lab-shell h1,
.lab-shell h2,
.lab-shell h3,
.lab-shell .lab-overline {
    color: white;
}

.lab-shell p,
.lab-lead,
.lab-panel-note {
    color: rgba(255, 255, 255, 0.76);
}

.lab-main,
.lab-section {
    background:
        radial-gradient(circle at 10% 0%, rgba(184, 93, 119, 0.045), transparent 22%),
        radial-gradient(circle at 90% 8%, rgba(91, 159, 177, 0.065), transparent 24%),
        linear-gradient(180deg, #fbfdff 0%, #f3f9fc 100%);
}

.lab-project-detail,
.lab-project-list,
.lab-method-frame,
.lab-principle-card,
.lab-capability-card,
.lab-panel-matrix div,
.lab-cta-card {
    border-radius: 24px;
    border: 1px solid rgba(37, 92, 120, 0.12);
    box-shadow: 0 24px 60px rgba(15, 43, 58, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.lab-project-detail:not(.active),
.lab-tab-panel[hidden] {
    display: none;
}

.lab-section:not(.lab-section--intro):not(.lab-section--shots) h2,
.lab-section:not(.lab-section--intro):not(.lab-section--shots) h3 {
    color: #0f2b3a;
}

.lab-section:not(.lab-section--intro):not(.lab-section--shots) p {
    color: rgba(15, 43, 58, 0.72);
}

.lab-section--intro,
.lab-section--shots,
.lab-cta-card {
    color: white;
    background:
        radial-gradient(circle at 12% 0%, rgba(184, 93, 119, 0.16), transparent 26%),
        radial-gradient(circle at 84% 4%, rgba(91, 159, 177, 0.18), transparent 28%),
        linear-gradient(135deg, #102733 0%, #183a4b 52%, #102b38 100%);
}

.lab-section--intro h2,
.lab-section--intro h3,
.lab-section--shots h2,
.lab-section--shots h3,
.lab-cta-card h2,
.lab-cta-card h3 {
    color: white !important;
}

.lab-section--intro p,
.lab-section--shots p,
.lab-cta-card p {
    color: rgba(255, 255, 255, 0.74) !important;
}

.lab-cta-card .lab-inline-label {
    color: white !important;
}

/* ─── SECCIÓN CONTACT — oscura e impactante ─── */
.lab-section--contact {
    background:
        radial-gradient(ellipse 80% 60% at 0% 50%, rgba(184,93,119,0.10), transparent 50%),
        radial-gradient(ellipse 60% 70% at 100% 30%, rgba(91,159,177,0.08), transparent 50%),
        #07111a;
    clip-path: polygon(0 3.5vw, 100% 0, 100% 100%, 0 100%);
    padding: calc(5.5rem + 3.5vw) 0 5.5rem;
    margin-bottom: -1px;
}

@media (max-width: 900px) {
    .lab-section--intro,
    .lab-section--contact { clip-path: none; padding: 4rem 0; }
}