/**
 * Objetivo: presentar la tienda de laboratorio como una vitrina comercial clara.
 * Criterio: mantener navegación compacta, jerarquía visual y adaptación móvil.
 */
:root {
    --lab-ink: #14213d;
    --lab-muted: #64748b;
    --lab-primary: #1947c7;
    --lab-primary-dark: #102f88;
    --lab-accent: #ffb703;
    --lab-surface: #f5f7fb;
    --lab-line: #e2e8f0;
}

html { scroll-behavior: smooth; }
body { background: var(--lab-surface); color: var(--lab-ink); }
.page-header {
    background: rgb(255 255 255 / 96%);
    border-bottom: 1px solid var(--lab-line);
    box-shadow: 0 8px 28px rgb(15 23 42 / 5%);
}
.page-header .navigation {
    border-top: 1px solid var(--lab-line);
    overflow: hidden;
    width: 100%;
}
.page-header .navigation > div {
    overflow-x: auto;
    scrollbar-width: none;
    width: 100%;
}
.page-header .navigation > div::-webkit-scrollbar { display: none; }
.page-header .navigation nav { min-width: max-content; }
.page-header .navigation nav > ul {
    flex-wrap: nowrap !important;
    gap: 1.5rem;
    padding-block: .65rem;
}
.page-header .navigation .level-0 { white-space: nowrap; }
.cms-home .page-main {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    margin-top: 0;
    max-width: none;
    padding: 0;
}
.cms-home .column.main { padding: 0; }
.lab-home { overflow: hidden; }
.lab-home h1,
.lab-home h2,
.lab-home p { margin: 0; }
.lab-hero,
.lab-section,
.lab-promo,
.lab-benefits {
    margin-inline: auto;
    max-width: 1280px;
}
.lab-hero {
    align-items: center;
    display: grid;
    gap: 4rem;
    grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr);
    min-height: 610px;
    padding: 5rem 2rem;
}
.lab-eyebrow {
    color: var(--lab-primary);
    display: inline-block;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .12em;
    margin-bottom: 1rem;
    text-transform: uppercase;
}
.lab-hero h1 {
    font-size: clamp(2.8rem, 5vw, 5rem);
    font-weight: 800;
    letter-spacing: -.055em;
    line-height: .98;
    max-width: 760px;
}
.lab-hero__content > p {
    color: var(--lab-muted);
    font-size: 1.125rem;
    line-height: 1.75;
    margin-top: 1.5rem;
    max-width: 650px;
}
.lab-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 2rem;
}
.lab-action {
    align-items: center;
    border-radius: .75rem;
    display: inline-flex;
    font-weight: 750;
    justify-content: center;
    min-height: 48px;
    padding: .75rem 1.25rem;
    transition: transform .2s ease, box-shadow .2s ease;
}
.lab-action:hover { transform: translateY(-2px); text-decoration: none; }
.lab-action--primary {
    background: var(--lab-primary);
    box-shadow: 0 12px 24px rgb(25 71 199 / 24%);
    color: #fff;
}
.lab-action--secondary {
    background: #fff;
    border: 1px solid var(--lab-line);
    color: var(--lab-ink);
}
.lab-action--light { background: #fff; color: var(--lab-primary-dark); }
.lab-hero__trust {
    color: #475569;
    display: flex;
    flex-wrap: wrap;
    font-size: .82rem;
    gap: 1.25rem;
    margin-top: 1.75rem;
}
.lab-hero__visual {
    background: linear-gradient(145deg, #dbe7ff, #eff4ff);
    border-radius: 2.5rem;
    min-height: 430px;
    padding: 3rem;
    position: relative;
}
.lab-product-card {
    background: #fff;
    border: 1px solid rgb(255 255 255 / 70%);
    border-radius: 1.5rem;
    box-shadow: 0 30px 55px rgb(30 64 175 / 15%);
    display: flex;
    flex-direction: column;
    inset: 50% auto auto 50%;
    padding: 1.5rem;
    position: absolute;
    transform: translate(-50%, -50%) rotate(-3deg);
    width: min(72%, 310px);
}
.lab-product-card__tag {
    align-self: flex-start;
    background: #fff1bf;
    border-radius: 999px;
    color: #8a5a00;
    font-size: .7rem;
    font-weight: 800;
    padding: .35rem .65rem;
    text-transform: uppercase;
}
.lab-product-card__shape {
    background: linear-gradient(145deg, var(--lab-primary), #6d94ff);
    border-radius: 1rem;
    height: 145px;
    margin-block: 1rem;
    position: relative;
}
.lab-product-card__shape::after {
    background: rgb(255 255 255 / 26%);
    border-radius: 50%;
    content: "";
    height: 90px;
    position: absolute;
    right: 1.25rem;
    top: 1.25rem;
    width: 90px;
}
.lab-product-card strong { font-size: 1.15rem; }
.lab-product-card > span:last-child { color: var(--lab-muted); font-size: .8rem; margin-top: .35rem; }
.lab-floating-card {
    background: #fff;
    border: 1px solid var(--lab-line);
    border-radius: 1rem;
    box-shadow: 0 16px 32px rgb(15 23 42 / 12%);
    color: var(--lab-muted);
    font-size: .72rem;
    padding: .85rem 1rem;
    position: absolute;
}
.lab-floating-card strong { color: var(--lab-ink); font-size: .9rem; }
.lab-floating-card--top { right: 1.25rem; top: 2rem; transform: rotate(3deg); }
.lab-floating-card--bottom { bottom: 2rem; left: 1rem; transform: rotate(-2deg); }
.lab-section { padding: 4.5rem 2rem; }
.lab-section__heading {
    align-items: end;
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
}
.lab-section h2,
.lab-promo h2 { font-size: clamp(2rem, 3vw, 3rem); font-weight: 800; letter-spacing: -.035em; }
.lab-section__hint { color: var(--lab-muted); font-size: .82rem; }
.lab-category-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.lab-category-card {
    border: 1px solid transparent;
    border-radius: 1.25rem;
    color: var(--lab-ink);
    display: grid;
    gap: .35rem;
    min-height: 170px;
    padding: 1.4rem;
    transition: transform .2s ease, box-shadow .2s ease;
}
.lab-category-card:hover {
    box-shadow: 0 18px 38px rgb(15 23 42 / 10%);
    color: var(--lab-ink);
    text-decoration: none;
    transform: translateY(-4px);
}
.lab-category-card__icon {
    align-items: center;
    background: rgb(255 255 255 / 72%);
    border-radius: .8rem;
    display: flex;
    font-size: .75rem;
    font-weight: 900;
    height: 42px;
    justify-content: center;
    margin-bottom: .75rem;
    width: 42px;
}
.lab-category-card strong { font-size: 1.05rem; }
.lab-category-card small { color: #526175; }
.lab-category-card--blue { background: #e8efff; border-color: #cedbff; }
.lab-category-card--amber { background: #fff4d7; border-color: #ffe4a0; }
.lab-category-card--green { background: #e5f7ed; border-color: #c3ecd4; }
.lab-category-card--violet { background: #f0eaff; border-color: #ded0ff; }
.lab-category-card--rose { background: #ffe9ed; border-color: #ffcfd8; }
.lab-category-card--cyan { background: #e2f7fa; border-color: #bceaf0; }
.lab-promo {
    align-items: center;
    background: linear-gradient(125deg, #102f88, #1947c7 58%, #3c6ee8);
    border-radius: 2rem;
    color: #fff;
    display: grid;
    gap: 3rem;
    grid-template-columns: 1.1fr .9fr;
    padding: 4rem;
}
.lab-eyebrow--light { color: #bed0ff; }
.lab-promo p { color: #dbe5ff; line-height: 1.7; margin: 1rem 0 1.5rem; max-width: 620px; }
.lab-promo__stats { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); }
.lab-promo__stats div {
    background: rgb(255 255 255 / 10%);
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: 1rem;
    padding: 1.25rem .75rem;
    text-align: center;
}
.lab-promo__stats strong { display: block; font-size: 1.5rem; }
.lab-promo__stats span { color: #dbe5ff; font-size: .7rem; }
.lab-benefits {
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(3, 1fr);
    padding: 4rem 2rem 5rem;
}
.lab-benefits > div {
    border-left: 1px solid var(--lab-line);
    display: grid;
    gap: .25rem;
    padding: .5rem 2rem;
}
.lab-benefits > div:first-child { border-left: 0; }
.lab-benefits span { color: var(--lab-primary); font-size: .75rem; font-weight: 800; }
.lab-benefits strong { font-size: 1rem; }
.lab-benefits small { color: var(--lab-muted); }
.page-footer { background: var(--lab-ink); }

@media (max-width: 1023px) {
    .lab-hero { gap: 2rem; grid-template-columns: 1fr; padding-top: 3rem; }
    .lab-hero__visual { min-height: 360px; }
    .lab-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lab-promo { border-radius: 0; grid-template-columns: 1fr; margin-inline: 0; }
}

@media (max-width: 639px) {
    .lab-hero { min-height: auto; padding: 2.75rem 1.1rem; }
    .lab-hero h1 { font-size: 2.75rem; }
    .lab-hero__actions { display: grid; }
    .lab-hero__trust { display: grid; gap: .5rem; }
    .lab-hero__visual { min-height: 320px; padding: 1.5rem; }
    .lab-floating-card--top { right: .5rem; top: 1rem; }
    .lab-floating-card--bottom { bottom: 1rem; left: .5rem; }
    .lab-section { padding: 3.5rem 1.1rem; }
    .lab-section__heading { align-items: start; display: grid; gap: .75rem; }
    .lab-category-grid {
        display: flex;
        margin-right: -1.1rem;
        overflow-x: auto;
        padding-bottom: .75rem;
        scroll-snap-type: x mandatory;
    }
    .lab-category-card { flex: 0 0 76vw; scroll-snap-align: start; }
    .lab-promo { padding: 3rem 1.1rem; }
    .lab-promo__stats { grid-template-columns: 1fr; }
    .lab-benefits { grid-template-columns: 1fr; padding: 3rem 1.1rem; }
    .lab-benefits > div { border-left: 0; border-top: 1px solid var(--lab-line); padding: 1.25rem 0; }
    .lab-benefits > div:first-child { border-top: 0; }
}