/* ============================================================
   BERATIEL — styles_sp/nosotros.css  v2.1
   3 secciones · Hero impactante · ¿Por qué? · Proceso
   Mobile-first · Sin degradados · Variables :root
   ============================================================ */


/* ── 0. Base ── */
#nos-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: .6;
}

body {
    background: #080f1c;
}


/* ── Reveal ── */
.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .6s ease, transform .6s ease;
    transition-delay: var(--delay, 0s);
}

.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}


/* ── Label de sección ── */
.section__label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: var(--beratiel-primary);
    padding: var(--space-1) var(--space-4);
    border: 1px solid rgba(56, 189, 248, .22);
    border-radius: var(--radius-pill);
    background: rgba(56, 189, 248, .05);
    margin-bottom: var(--space-4);
}

/* ── Accent ── */
.nos-accent {
    color: var(--beratiel-primary);
}

/* ── Sección base ── */
.nos-section {
    position: relative;
    z-index: 1;
    padding: var(--section-padding);
}

.nos-section__inner {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding-x);
}

.nos-section__header {
    text-align: center;
    margin-bottom: var(--space-16);
}

.nos-section__title {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: var(--fw-extrabold);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--beratiel-text-inverse);
    margin-bottom: var(--space-5);
}

.nos-section__subtitle {
    font-size: var(--text-md);
    color: rgba(255, 255, 255, .85);
    max-width: 560px;
    margin-inline: auto;
    line-height: var(--lh-relaxed);
}


/* ============================================================
   1. HERO
   ============================================================ */
.nos-hero {
    position: relative;
    z-index: 1;
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding: calc(var(--navbar-height) + var(--space-12)) var(--container-padding-x) var(--space-16);
}

.nos-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 30% 50%, rgba(56, 189, 248, .06), transparent 70%);
    pointer-events: none;
}

.nos-hero__inner {
    max-width: var(--container-max);
    margin-inline: auto;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-12);
    align-items: center;
}

/* Título impactante y corto */
.nos-hero__title {
    font-family: var(--font-display);
    font-size: var(--text-hero);
    font-weight: var(--fw-black);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--beratiel-text-inverse);
    margin-bottom: var(--space-6);
}

.nos-hero__desc {
    font-size: var(--text-md);
    color: rgba(255, 255, 255, .85);
    line-height: var(--lh-relaxed);
    max-width: 520px;
    margin-bottom: var(--space-4);
}

.nos-hero__desc strong {
    color: rgba(255, 255, 255, .95);
    font-weight: var(--fw-semibold);
}

/* Chips */
.nos-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.nos-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    border: 1px solid rgba(56, 189, 248, .2);
    background: rgba(56, 189, 248, .05);
    font-size: var(--text-xs);
    font-weight: var(--fw-medium);
    color: rgba(255, 255, 255, .85);
    letter-spacing: var(--ls-wide);
}

.nos-chip i {
    color: var(--beratiel-primary);
    font-size: 11px;
}

/* Visual */
.nos-hero__visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.nos-card-stack {
    position: relative;
    width: 100%;
    max-width: 380px;
    height: 260px;
}

.nos-card {
    position: absolute;
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255, 255, 255, .08);
    overflow: hidden;
}

/* Tarjeta trasera — browser */
.nos-card--back {
    width: 88%;
    height: 210px;
    bottom: 0;
    right: 0;
    background: rgba(255, 255, 255, .03);
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    transform: rotate(-3deg) translateY(8px);
}

.nos-card__bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.nos-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-circle);
}

.nos-dot--r {
    background: rgba(255, 94, 87, .55);
}

.nos-dot--y {
    background: rgba(255, 188, 46, .55);
}

.nos-dot--g {
    background: rgba(40, 200, 64, .55);
}

.nos-card__url {
    flex: 1;
    height: 14px;
    background: rgba(255, 255, 255, .06);
    border-radius: 4px;
    font-size: 9px;
    font-family: var(--font-mono);
    color: rgba(255, 255, 255, .22);
    display: flex;
    align-items: center;
    padding: 0 6px;
    letter-spacing: .02em;
    overflow: hidden;
    white-space: nowrap;
}

.nos-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1;
}

.nos-card__hero-block {
    flex: 1;
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(56, 189, 248, .08), rgba(99, 102, 241, .06));
    border: 1px solid rgba(255, 255, 255, .04);
}

.nos-card__row {
    height: 8px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .05);
}

.nos-card__row--w {
    width: 88%;
}

.nos-card__row--m {
    width: 60%;
}

.nos-card__blocks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
}

.nos-card__block {
    height: 32px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .04);
}

.nos-card__block--blue {
    background: rgba(56, 189, 248, .1);
}

/* Tarjeta frontal */
.nos-card--front {
    width: 72%;
    top: 0;
    left: 0;
    background: rgba(10, 18, 35, .97);
    border-color: rgba(56, 189, 248, .18);
    padding: var(--space-5) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    box-shadow: 0 16px 48px rgba(0, 0, 0, .45);
}

.nos-card__icon {
    display: inline-flex;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    background: rgba(56, 189, 248, .1);
    border: 1px solid rgba(56, 189, 248, .18);
    align-items: center;
    justify-content: center;
    color: var(--beratiel-primary);
    font-size: 1.1rem;
    margin-bottom: var(--space-1);
}

.nos-card__kpi-label {
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, .55);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
}

.nos-card__kpi-value {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--fw-bold);
    color: var(--beratiel-text-inverse);
}

.nos-card__kpi-sub {
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, .55);
    letter-spacing: var(--ls-wide);
}

.nos-card__bar-wrap {
    margin-top: var(--space-3);
    height: 4px;
    background: rgba(255, 255, 255, .07);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.nos-card__bar-fill {
    height: 100%;
    width: var(--w, 0%);
    background: var(--beratiel-primary);
    border-radius: var(--radius-pill);
    animation: barGrow 1.6s ease .8s both;
}

@keyframes barGrow {
    from {
        width: 0;
    }

    to {
        width: var(--w);
    }
}


/* ============================================================
   2. ¿POR QUÉ NOSOTROS?
   ============================================================ */
.nos-why {
    background: radial-gradient(ellipse 70% 50% at 85% 40%, rgba(99, 102, 241, .04), transparent 70%);
}

.nos-why__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

.nos-why__card {
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    transition: border-color var(--transition-base), transform var(--transition-base);
}

.nos-why__card:hover {
    border-color: rgba(56, 189, 248, .2);
    transform: translateY(-4px);
}

.nos-why__icon {
    display: inline-flex;
    width: 50px;
    height: 50px;
    border-radius: var(--radius-md);
    background: rgba(56, 189, 248, .1);
    border: 1px solid rgba(56, 189, 248, .18);
    align-items: center;
    justify-content: center;
    color: var(--beratiel-primary);
    font-size: 1.2rem;
    flex-shrink: 0;
    transition: background var(--transition-base), box-shadow var(--transition-base);
}

.nos-why__card:hover .nos-why__icon {
    background: rgba(56, 189, 248, .16);
    box-shadow: 0 0 20px rgba(56, 189, 248, .2);
}

.nos-why__title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--fw-semibold);
    color: var(--beratiel-text-inverse);
}

.nos-why__text {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, .85);
    line-height: var(--lh-relaxed);
}


/* ============================================================
   3. PROCESO — Timeline vertical
   ============================================================ */
.nos-process {
    background: radial-gradient(ellipse 70% 50% at 15% 60%, rgba(56, 189, 248, .04), transparent 70%);
}

.nos-process__list {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 760px;
    margin-inline: auto;
    position: relative;
}

.nos-process__step {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: var(--space-6);
    position: relative;
    padding-bottom: var(--space-10);
}

/* Línea vertical entre pasos */
.nos-process__line {
    position: absolute;
    left: 27px;
    top: 56px;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, rgba(56, 189, 248, .3), rgba(56, 189, 248, .05));
    border-radius: var(--radius-pill);
}

/* Círculo con ícono */
.nos-process__left {
    display: flex;
    justify-content: center;
}

.nos-process__circle {
    width: 54px;
    height: 54px;
    border-radius: var(--radius-circle);
    background: rgba(10, 18, 35, .95);
    border: 2px solid rgba(56, 189, 248, .3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--beratiel-primary);
    font-size: 1.1rem;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    transition: border-color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);
}

.nos-process__step:hover .nos-process__circle {
    border-color: var(--beratiel-primary);
    background: rgba(56, 189, 248, .08);
    box-shadow: 0 0 24px rgba(56, 189, 248, .25);
}

/* Contenido del paso */
.nos-process__content {
    padding-top: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.nos-process__meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.nos-process__num {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--fw-black);
    color: var(--beratiel-primary);
    line-height: 1;
    opacity: .4;
}

.nos-process__tag {
    display: inline-flex;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background: rgba(56, 189, 248, .08);
    border: 1px solid rgba(56, 189, 248, .18);
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    color: var(--beratiel-primary);
    letter-spacing: var(--ls-wide);
}

.nos-process__step-title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--fw-bold);
    color: var(--beratiel-text-inverse);
    line-height: var(--lh-snug);
}

.nos-process__step-text {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, .85);
    line-height: var(--lh-relaxed);
    max-width: 540px;
}

/* CTA final */
.nos-process__cta {
    display: flex;
    justify-content: center;
    margin-top: var(--space-12);
}

.nos-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-pill);
    background: var(--beratiel-primary);
    color: #040c18;
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    letter-spacing: var(--ls-wide);
    box-shadow: 0 4px 24px rgba(56, 189, 248, .28);
    transition: background var(--transition-fast), transform var(--transition-base), box-shadow var(--transition-base);
}

.nos-cta-btn:hover {
    background: #7dd3fc;
    color: #040c18;
    transform: translateY(-2px);
    box-shadow: 0 8px 36px rgba(56, 189, 248, .45);
}

.nos-cta-btn i {
    font-size: var(--text-xs);
    transition: transform var(--transition-fast);
}

.nos-cta-btn:hover i {
    transform: translateX(3px);
}


/* ============================================================
   4. TECNOLOGÍAS
   ============================================================ */
.nos-tech {
    background: radial-gradient(ellipse 70% 50% at 80% 50%,
            rgba(56, 189, 248, .04), transparent 70%);
}

.nos-tech__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
}

.nos-tech__card {
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: var(--radius-xl);
    padding: var(--space-8) var(--space-6);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    text-align: center;
    transition: border-color var(--transition-base),
        transform var(--transition-base),
        background var(--transition-base);
}

.nos-tech__card:hover {
    border-color: rgba(56, 189, 248, .22);
    background: rgba(56, 189, 248, .03);
    transform: translateY(-5px);
}

.nos-tech__img-wrap {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-base);
}

.nos-tech__card:hover .nos-tech__img-wrap {
    transform: scale(1.1);
}

.nos-tech__img-wrap img {
    width: 58px;
    height: 58px;
    object-fit: contain;
    filter: grayscale(100%) brightness(.6);
    transition: filter var(--transition-base);
}

.nos-tech__card:hover .nos-tech__img-wrap img {
    filter: grayscale(0%) brightness(1);
}

.nos-tech__name {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--fw-bold);
    color: var(--beratiel-text-inverse);
    line-height: 1;
}

.nos-tech__desc {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, .65);
    line-height: var(--lh-snug);
    max-width: 180px;
}


/* ============================================================
   RESPONSIVE — MOBILE FIRST
   ============================================================ */

/* 640px: 2 cols en ¿Por qué? */
@media (min-width: 640px) {
    .nos-why__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .nos-tech__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 1024px: Desktop */
@media (min-width: 1024px) {
    .nos-hero__inner {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-16);
    }

    .nos-why__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .nos-tech__grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* iPhone 14 Pro Max / Plus ≤ 430px */
@media (max-width: 430px) {
    .nos-hero {
        padding-top: calc(var(--navbar-height) + var(--space-8));
    }

    .nos-hero__title {
        font-size: var(--text-3xl);
    }

    .nos-card-stack {
        height: 220px;
    }

    .nos-card--back {
        height: 175px;
    }

    .nos-card--front {
        padding: var(--space-4) var(--space-5);
    }

    .nos-why__card {
        padding: var(--space-6);
    }

    .nos-process__step {
        grid-template-columns: 46px 1fr;
        gap: var(--space-4);
    }

    .nos-process__circle {
        width: 46px;
        height: 46px;
        font-size: 1rem;
    }

    .nos-process__line {
        left: 22px;
        top: 46px;
    }
}

/* iPhone XR ≤ 414px */
@media (max-width: 414px) {
    .nos-hero__title {
        font-size: clamp(2rem, 9vw, 2.8rem);
    }

    .nos-hero__desc {
        font-size: var(--text-base);
    }
}

/* iPhone 12 Pro / 14 / 14 Pro ≤ 393px */
@media (max-width: 393px) {
    .nos-hero__chips {
        gap: var(--space-2);
    }

    .nos-chip {
        font-size: 10px;
        padding: var(--space-1) var(--space-3);
    }

    .nos-process__step-title {
        font-size: var(--text-lg);
    }
}

/* iPhone SE / 12 mini ≤ 375px */
@media (max-width: 375px) {
    .nos-hero__title {
        font-size: var(--text-2xl);
    }

    .nos-section__title {
        font-size: var(--text-3xl);
    }

    .nos-card-stack {
        height: 200px;
    }

    .nos-card--back {
        height: 160px;
    }

    .nos-why__card,
    .nos-process__content {
        padding-inline: 0;
    }

    .nos-why__card {
        padding: var(--space-5);
    }

    .nos-cta-btn {
        padding: var(--space-3) var(--space-6);
        font-size: var(--text-sm);
    }
}

/* < 320px */
@media (max-width: 320px) {
    .nos-hero__title {
        font-size: var(--text-xl);
    }

    .nos-section__label {
        font-size: 9px;
    }

    .nos-process__step {
        grid-template-columns: 40px 1fr;
        gap: var(--space-3);
    }

    .nos-process__circle {
        width: 40px;
        height: 40px;
        font-size: .9rem;
    }

    .nos-process__line {
        left: 19px;
    }
}

/* Movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    .reveal {
        transition: none;
        opacity: 1;
        transform: none;
    }

    .nos-card__bar-fill {
        animation: none;
        width: var(--w);
    }

    #nos-canvas {
        display: none;
    }
}