/* =========================
   Growht — styles.css (FULL)
   ========================= */

/* ---- Reset / Base ---- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

:root {
    --bg: #f4f4f4;
    --card: #ffffff;
    --text: #0b0c0f;
    --muted: rgba(11, 12, 15, .62);

    --line: rgba(10, 10, 10, .10);
    --line2: rgba(10, 10, 10, .14);

    --shadow: 0 22px 60px rgba(0, 0, 0, .12);
    --shadow2: 0 10px 30px rgba(0, 0, 0, .10);

    --r-xl: 28px;
    --r-lg: 22px;
    --r-md: 18px;
    --r-sm: 14px;

    --max: 1200px;
    --pad: 22px;
}

body {
    margin: 0;
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    background: var(--bg);
    color: var(--text);
    overflow-x: hidden;
}

/* Evitar selección en elementos interactivos */
button,
.topnav__inner,
.langswitch,
.deck__card,
.deck__nav,
.heroSlide__nav,
.acc__btn {
    user-select: none;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

.muted {
    color: var(--muted);
}

.page {
    padding-bottom: 80px;
}

/* =========================
   NAVBAR "ISLA" (tamaños)  ✅ FIX: MAS CHICA + SIN 3 PUNTOS + LINKS CENTRADOS
========================= */

.topnav {
    position: sticky;
    top: 14px;
    /* 👈 un poco mas arriba */
    z-index: 9999;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
}

.topnav__inner {
    width: min(1120px, calc(100% - 48px));
    margin: 0 auto;

    height: 64px;
    /* ✅ MAS CHICA (antes 78px) */
    padding: 0 18px;
    /* ✅ menos padding */
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 22px 60px rgba(0, 0, 0, .16);
    border: 1px solid rgba(0, 0, 0, .06);

    display: flex;
    align-items: center;
    justify-content: center;
    /* ✅ links centrados */
    gap: 18px;

    position: relative;
    /* ✅ para ubicar brand a la izquierda */
}

/* Brand fijo a la izquierda dentro de la isla */
.topnav__brand {
    position: absolute;
    left: 18px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    z-index: 1001; /* Above mobile menu */
}

.topnav__brand img {
    height: 18px;
    /* ✅ mas chico */
    width: auto;
    display: block;
}

/* Links centrados */
.topnav__links {
    display: flex;
    align-items: center;
    gap: 30px;
    /* ✅ mas compacto */
}

.topnav__links a {
    font-weight: 800;
    font-size: 16px;
    /* ✅ mas chico */
    letter-spacing: -0.02em;
    text-decoration: none;
    color: #111;
}

.topnav__links a:hover {
    opacity: .75;
}

/* Responsive Nav Links Fix */
@media (max-width: 900px) {
    .topnav__inner {
        height: 60px;
        padding: 0 14px;
        justify-content: flex-end;
    }

    .topnav__brand {
        left: 14px;
    }

    .topnav__links {
        gap: 16px; /* reducelo para que entre en telefonos */
    }

    .topnav__links a {
        font-size: 14px; /* un poquito mas chico para celular */
    }
}

/* =========================
   LANG SWITCH (tamaño + posición) ✅ FIX: MAS CHICO
========================= */

.langbar {
    position: sticky;
    top: 88px;
    /* ✅ mas cerca del navbar (antes 112px) */
    z-index: 9998;
    background: transparent;
    border: 0;
    margin: 12px 0 0;
    padding: 0;
}

.langbar__inner {
    width: min(1120px, calc(100% - 48px));
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.langswitch {
    position: relative;

    width: 420px;
    /* ✅ MAS CHICO (antes 520px) */
    height: 46px;
    /* ✅ MAS CHICO (antes 54px) */
    border-radius: 999px;
    background: rgba(255, 255, 255, .86);
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .14);
    display: flex;
    align-items: center;
    padding: 5px;
    /* ✅ mas chico */
    gap: 6px;
    overflow: hidden;
}

.langswitch__pill {
    position: absolute;
    top: 5px;
    left: 5px;
    height: calc(100% - 10px);
    width: calc(50% - 6px);
    border-radius: 999px;
    background: linear-gradient(180deg, #0b0c10, #111);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
    transition: transform .28s ease;
    transform: translateX(0);
}

.langswitch__btn {
    position: relative;
    z-index: 2;
    width: 50%;
    height: 100%;
    border: 0;
    background: transparent;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: .02em;
    cursor: pointer;
    color: #777;
    font-size: 13px;
    /* ✅ mas chico */
}

.langswitch__btn.active {
    color: #fff;
}

@media (max-width: 640px) {
    .langswitch {
        width: min(360px, 100%);
        height: 44px;
        padding: 5px;
    }
}

/* estado EN */
.langswitch.is-en .langswitch__pill {
    transform: translateX(100%);
}

/* =========================
   ✅ Spacing top para que el contenido no quede bajo la isla
   ========================= */
.hero {
    padding-top: 150px;
    /* ✅ ajustado a tamaños nuevos (antes 170px) */
    padding-bottom: 34px;
}

/* =========================
   HERO
   ========================= */
.hero__grid {
    width: min(var(--max), calc(100% - 2*var(--pad)));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 38px;
    align-items: center;
}

.hero__pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, .86);
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .08);
}

.hero__pillDot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .72);
}

.hero__title {
    margin: 22px 0 10px;
    line-height: .95;
    letter-spacing: -0.04em;
}

.hero__titleLight {
    display: block;
    font-size: clamp(44px, 5.4vw, 86px);
    font-weight: 900;
    color: rgba(0, 0, 0, .30);
}

.hero__titleStrong {
    display: block;
    font-size: clamp(44px, 5.4vw, 86px);
    font-weight: 900;
    color: #0b0c0f;
}

.hero__subtitle {
    margin: 0 0 18px;
    max-width: 520px;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(0, 0, 0, .75);
}

.hero__actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .9);
    box-shadow: none;
    font-weight: 900;
}

.cta__badge {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #0b0c0f;
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 900;
}

/* right stack */
.hero__right {
    position: relative;
    min-height: 380px;
    display: grid;
    place-items: center;
}

.hero__dot {
    position: absolute;
    top: 10%;
    right: 12%;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .70);
}

.stack {
    position: relative;
    width: min(520px, 100%);
    height: 360px;
}

.stack__card {
    position: absolute;
    inset: 0;
    border-radius: 34px;
    background: rgba(255, 255, 255, .76);
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 30px 60px rgba(0, 0, 0, .12);
    transform-origin: center;
}

.stack__inner {
    position: absolute;
    inset: 18px;
    border-radius: 26px;
    background: rgba(255, 255, 255, .88);
    border: 1px solid rgba(0, 0, 0, .08);
    overflow: hidden;
}

.stack__label {
    position: absolute;
    top: 14px;
    left: 16px;
    font-weight: 900;
    color: rgba(0, 0, 0, .55);
}

.stack__mock {
    position: absolute;
    inset: 60px 28px 28px 28px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(0, 0, 0, .06), rgba(0, 0, 0, .02));
    border: 1px solid rgba(0, 0, 0, .10);
}

.stack__card--back {
    transform: translate(22px, 14px) rotate(-7deg);
    opacity: .55;
}

.stack__card--mid {
    transform: translate(10px, 8px) rotate(-2deg);
    opacity: .68;
}

.stack__card--front {
    transform: translate(0px, 0px) rotate(4deg);
    opacity: 1;
}

/* brand strip */
.brandstrip {
    margin-top: 26px;
}

.brandstrip__inner {
    width: min(var(--max), calc(100% - 2*var(--pad)));
    margin: 0 auto;
    background: rgba(255, 255, 255, .88);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: none;
    padding: 18px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.brandstrip__left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.stars {
    letter-spacing: 2px;
    font-weight: 900;
}

.brandstrip__line {
    font-weight: 900;
}

.logos {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
}

.logoPh {
    width: 92px;
    height: 14px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .08);
}

/* =========================
   UPDATES / PROCESO
   ========================= */
.updates {
    padding: 48px 0;
}

.updates__inner {
    width: min(var(--max), calc(100% - 2*var(--pad)));
    margin: 0 auto;
    text-align: center;
}

.updates__top {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .86);
}

.updates__chip {
    font-weight: 900;
}

.updates__dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .65);
}

.updates__big {
    margin: 22px auto 10px;
    max-width: 860px;
    font-size: clamp(28px, 3.4vw, 52px);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.05;
}

.updates__small {
    margin: 0 auto 20px;
    max-width: 640px;
    line-height: 1.6;
}

.updates__grid {
    margin-top: 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    justify-content: center;
}

.updates__card {
    text-align: left;
    background: rgba(255, 255, 255, .88);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 18px 18px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .07);
}

.updates__cardTitle {
    font-weight: 900;
    margin-bottom: 10px;
}

.updates__list {
    margin: 0;
    padding-left: 18px;
    line-height: 1.9;
}

/* =========================
   SERVICES
   ========================= */
.sv {
    padding: 42px 0;
}

.sv__inner {
    width: min(var(--max), calc(100% - 2*var(--pad)));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: start;
}

.sv__title {
    margin: 0 0 10px;
    letter-spacing: -0.04em;
    line-height: 1.0;
}

.sv__titleLight {
    display: block;
    font-size: clamp(44px, 5.2vw, 80px);
    font-weight: 900;
    color: rgba(0, 0, 0, .30);
}

.sv__titleStrong {
    display: inline-block;
    font-size: clamp(44px, 5.2vw, 80px);
    font-weight: 900;
    color: #0b0c0f;
}

.sv__titleDot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .78);
    transform: translateY(-10px);
    margin-left: 6px;
}

.sv__desc {
    margin: 0 0 14px;
    line-height: 1.6;
    max-width: 540px;
}

.sv__tools {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.toolpill {
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    border: 1px solid var(--line);
    font-weight: 800;
    font-size: 13px;
}

.sv__right {
    display: grid;
    gap: 12px;
}

.svc {
    display: flex;
    gap: 14px;
    align-items: center;
    background: rgba(255, 255, 255, .88);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 16px 16px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .07);
}

.svc__icon {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: #0b0c0f;
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 900;
}

.svc__title {
    font-weight: 900;
    margin-bottom: 2px;
}

.svc__sub {
    line-height: 1.45;
}

/* =========================
   PRICING
   ========================= */
.pr {
    padding: 50px 0 34px;
}

.pr__inner {
    width: min(var(--max), calc(100% - 2*var(--pad)));
    margin: 0 auto;
}

.pr__top {
    display: grid;
    grid-template-columns: 1fr .9fr;
    gap: 18px;
    align-items: start;
}

.pr__title {
    margin: 0;
    letter-spacing: -0.04em;
    line-height: 1.0;
}

.pr__titleLight {
    display: block;
    font-size: clamp(34px, 4.2vw, 66px);
    font-weight: 900;
    color: rgba(0, 0, 0, .30);
}

.pr__titleStrong {
    display: block;
    font-size: clamp(34px, 4.2vw, 66px);
    font-weight: 900;
}

.pr__sideText {
    margin: 10px 0 0;
    line-height: 1.6;
}

.pr__sideStrong {
    font-weight: 900;
}

.pr__steps {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.step__head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 900;
}

.step__icon {
    opacity: .75;
}

.step__dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .75);
    display: inline-block;
}

.step__desc {
    margin: 8px 0 0;
    line-height: 1.6;
}

.pr__cards {
    margin-top: 22px;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 16px;
}

.cardA,
.cardB {
    background: rgba(255, 255, 255, .9);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: 0 22px 60px rgba(0, 0, 0, .10);
    padding: 20px 20px;
}

.cardA__chip {
    display: inline-flex;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    font-weight: 900;
    background: rgba(0, 0, 0, .04);
}

.cardA__big {
    margin-top: 14px;
    font-size: 26px;
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.cardA__text {
    margin: 10px 0 14px;
    line-height: 1.6;
}

.cardA__btn {
    display: inline-flex;
    padding: 12px 14px;
    border-radius: 999px;
    background: #0b0c0f;
    color: #fff;
    font-weight: 900;
}

.cardB__title {
    font-weight: 900;
    font-size: 20px;
}

.cardB__sub {
    margin: 8px 0 14px;
    line-height: 1.6;
}

.cardB__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.checklist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.checklist li {
    padding-left: 18px;
    position: relative;
    margin: 8px 0;
    line-height: 1.5;
    color: rgba(0, 0, 0, .78);
    font-weight: 600;
}

.checklist li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    opacity: .8;
}

.cardB__foot {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cardB__pill {
    flex: 1;
    padding: 12px 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(0, 0, 0, .03);
}

.cardB__pillTitle {
    font-weight: 900;
}

.cardB__round {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .9);
    display: grid;
    place-items: center;
    font-weight: 900;
}

/* =========================
   FAQ
   ========================= */
.faq {
    padding: 54px 0 60px;
}

.faq__inner {
    width: min(var(--max), calc(100% - 2*var(--pad)));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 18px;
    align-items: start;
}

.faq__title {
    margin: 0 0 18px;
    letter-spacing: -0.04em;
    line-height: 1.0;
}

.faq__titleStrong {
    display: block;
    font-size: clamp(38px, 5vw, 86px);
    font-weight: 900;
}

.faq__titleLight {
    display: block;
    font-size: clamp(38px, 5vw, 86px);
    font-weight: 900;
    color: rgba(0, 0, 0, .30);
}

.acc {
    background: rgba(255, 255, 255, .9);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .07);
    overflow: hidden;
    margin-bottom: 12px;
}

.acc__btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 16px;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-weight: 900;
    text-align: left;
    font-size: 16px;
    list-style: none;
}

.acc__btn::-webkit-details-marker {
    display: none;
}

.acc__icon {
    font-weight: 900;
    font-size: 20px;
    opacity: .75;
    transition: transform 0.2s ease;
    display: inline-block;
}

.acc[open] .acc__icon {
    transform: rotate(45deg);
}

.acc__panel {
    padding: 0 16px 16px 16px;
}

.acc__panel p {
    margin: 0;
    line-height: 1.7;
}

/* card derecha */
.faqcard {
    position: sticky;
    top: 170px;
    /* debajo de la isla */
    background: rgba(255, 255, 255, .92);
    border: 1px solid var(--line);
    border-radius: 26px;
    box-shadow: var(--shadow);
    padding: 18px 18px;
}

.faqcard__badge {
    width: 54px;
    height: 54px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .95);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.faqcard__badge img {
    height: 18px;
}

.faqcard__kicker {
    margin-top: 12px;
    font-weight: 800;
}

.faqcard__title {
    font-weight: 900;
    font-size: 24px;
    margin-top: 4px;
}

.faqcard__text {
    margin: 10px 0 14px;
    line-height: 1.7;
}

.faqcard__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.ctaSmall {
    display: inline-flex;
    padding: 12px 14px;
    border-radius: 999px;
    background: #0b0c0f;
    color: #fff;
    font-weight: 900;
}

.ctaGhost {
    display: inline-flex;
    padding: 12px 14px;
    border-radius: 999px;
    border: 1px solid var(--line2);
    background: rgba(255, 255, 255, .9);
    font-weight: 900;
}

.faqcard__note {
    margin-top: 12px;
    font-size: 13px;
}

/* =========================
   ✅ FOOTER full width black
   ========================= */
.gfooter {
    background: #000;
    color: #fff;
    padding: 70px 0 54px;
}

.gfooter__inner {
    width: min(var(--max), calc(100% - 2*var(--pad)));
    margin: 0 auto;
}

.gfooter__headline {
    margin: 0 0 24px;
    line-height: .95;
    letter-spacing: -0.04em;
}

.gfooter__headlineStrong {
    display: block;
    font-size: clamp(44px, 5vw, 86px);
    font-weight: 900;
    color: #fff;
}

.gfooter__headlineLight {
    display: block;
    font-size: clamp(44px, 5vw, 86px);
    font-weight: 900;
    color: rgba(255, 255, 255, .35);
}

.gfooter__cols {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    margin-top: 18px;
}

.gfooter__label {
    font-size: 12px;
    letter-spacing: .12em;
    opacity: .6;
    font-weight: 900;
    margin-bottom: 10px;
}

.gfooter__value {
    font-weight: 900;
    opacity: .95;
}

.gfooter__social {
    display: flex;
    gap: 10px;
}

.gfooter__socialBtn {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .20);
    display: grid;
    place-items: center;
    font-weight: 900;
    color: #fff;
}

.gfooter__hr {
    height: 1px;
    background: rgba(255, 255, 255, .12);
    margin: 28px 0 22px;
}

.gfooter__bottom {
    display: grid;
    grid-template-columns: 1fr 1fr 1.3fr;
    gap: 18px;
    align-items: start;
}

.gfooter__links {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.gfooter__links a {
    color: rgba(255, 255, 255, .85);
    font-weight: 800;
}

.gfooter__copyText {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, .75);
    font-weight: 700;
    justify-content: flex-end;
    width: 100%;
}

.gfooter__dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .55);
    display: inline-block;
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 980px) {
    .hero__grid {
        grid-template-columns: 1fr;
    }

    .sv__inner {
        grid-template-columns: 1fr;
    }

    .pr__top {
        grid-template-columns: 1fr;
    }

    .pr__steps {
        grid-template-columns: 1fr;
    }

    .pr__cards {
        grid-template-columns: 1fr;
    }

    .faq__inner {
        grid-template-columns: 1fr;
    }

    .faqcard {
        position: relative;
        top: 0;
    }

    .gfooter__cols {
        grid-template-columns: 1fr;
    }

    .gfooter__bottom {
        grid-template-columns: 1fr;
    }

    .gfooter__copyText {
        justify-content: flex-start;
    }

    .topnav__links {
        gap: 8px;
    }

    .topnav__links a {
        padding: 8px 10px;
        font-size: 14px;
    }
}

@media (max-width: 560px) {
    .topnav__inner {
        padding: 0 12px;
        height: 58px;
    }

    .topnav__brand {
        left: 12px;
    }

    .langbar {
        top: 78px;
        /* ✅ acompaña el navbar mas chico */
    }

    .hero {
        padding-top: 140px;
    }
}

/* =========================
   FIX: langbar NO bloquea clicks + tamaños mas chicos
   ========================= */

/* SOLO isla + switch clickeables (evita que una capa sticky tape FAQ) */
.langbar {
    pointer-events: none;
}

.langbar__inner,
.langswitch,
.langswitch * {
    pointer-events: auto;
}

/* achicar isla navbar */
.topnav {
    top: 14px;
}

.topnav__inner {
    width: min(980px, calc(100% - 40px));
    height: 64px;
    padding: 0 22px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .14);
}

.topnav__brand img {
    height: 20px;
}

.topnav__links {
    gap: 34px;
}

.topnav__links a {
    font-size: 16px;
}

/* borrar 3 puntos */
.topnav__dots {
    display: none !important;
}

/* switch mas chico y mas cerca del navbar */
.langbar {
    top: 92px;
    margin-top: 10px;
}

.langswitch {
    width: min(440px, calc(100% - 40px));
    height: 46px;
    padding: 5px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .12);
}

.langswitch__pill {
    top: 5px;
    left: 5px;
    height: calc(100% - 10px);
    width: calc(50% - 5px);
}

/* ✅ FIX: que la pastilla no bloquee el click */
.langswitch__pill {
    pointer-events: none;
}

.langswitch__btn {
    font-size: 13px;
}

/* para que el contenido no quede tapado */
.hero {
    padding-top: 150px;
}

/* =========================
   SECTION DIVIDERS + SPACING (FIX)
   Pegalo al FINAL del CSS
   ========================= */

/* Más aire general entre secciones */
.updates,
.sv,
.pr,
.faq {
    padding-top: 70px;
    padding-bottom: 70px;
}

/* La hero ya tiene su padding propio, no la tocamos */
.updates,
.sv,
.pr,
.faq {
    position: relative;
}

/* Linea divisoria superior para cada seccion (menos la primera) */
.updates::before,
.sv::before,
.pr::before,
.faq::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(0, 0, 0, .10);
}

/* Para que la linea no quede pegada al contenido interno */
.updates__inner,
.sv__inner,
.pr__inner,
.faq__inner {
    padding-top: 34px;
}

/* Ajustes finos para que no quede “amontonado” dentro de cada bloque */
.sv__desc {
    margin-bottom: 18px;
}

.pr__steps {
    margin-top: 26px;
}

.pr__cards {
    margin-top: 26px;
}

.faq__title {
    margin-bottom: 26px;
}

/* Responsive: menos padding pero mantiene separacion */
@media (max-width: 980px) {

    .updates,
    .sv,
    .pr,
    .faq {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .updates__inner,
    .sv__inner,
    .pr__inner,
    .faq__inner {
        padding-top: 26px;
    }
}





/* =========================================
   FIX MOBILE URGENTE — NO HORIZONTAL SCROLL
   pegar AL FINAL del styles.css
========================================= */

html,
body {
    width: 100%;
    overflow-x: hidden !important;
    /* mata el “pantalla más ancha” */
}

/* evita que cualquier bloque se vaya de 100vw */
.page,
.hero,
.hero__grid,
.brandstrip,
.brandstrip__inner,
.updates,
.sv,
.pr,
.faq,
.gfooter,
.topnav,
.langbar {
    max-width: 100vw;
    overflow-x: hidden;
}

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

    /* NAVBAR isla: que entre sí o sí */
    .topnav {
        top: 12px;
    }

    .topnav__inner {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        height: 58px !important;
        padding: 0 12px !important;
        gap: 10px !important;
        border-radius: 999px !important;
    }

    .topnav__brand img {
        height: 18px !important;
    }

    /* links en una fila, con scroll suave si no entran */
    .topnav__links {
        min-width: 0;
        gap: 14px !important;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        scrollbar-width: none;
    }

    .topnav__links::-webkit-scrollbar {
        display: none;
    }

    .topnav__links a {
        flex: 0 0 auto;
        font-size: 13px !important;
        padding: 8px 6px !important;
    }

    /* SWITCH: más chico y más arriba */
    .langbar {
        top: 78px !important;
        margin-top: 8px !important;
    }

    .langbar__inner {
        width: calc(100vw - 20px) !important;
    }

    .langswitch {
        width: min(360px, calc(100vw - 20px)) !important;
        height: 42px !important;
        padding: 5px !important;
    }

    .langswitch__btn {
        font-size: 12px !important;
    }

    .langswitch__pill {
        top: 5px !important;
        left: 5px !important;
        height: calc(100% - 10px) !important;
        width: calc(50% - 5px) !important;
    }

    /* HERO padding para que no quede tapado */
    .hero {
        padding-top: 140px !important;
    }

    /* 🔥 CLAVE: el stack con translate/rotate genera overflow horizontal */
    .hero__right {
        overflow: hidden !important;
    }

    /* recorta lo que se vaya afuera */
    .stack {
        width: min(360px, 100%) !important;
    }

    /* reducimos el “desplazamiento” de las cartas en mobile */
    .stack__card--back {
        transform: translate(10px, 8px) rotate(-6deg) !important;
    }

    .stack__card--mid {
        transform: translate(6px, 4px) rotate(-2deg) !important;
    }

    .stack__card--front {
        transform: translate(0px, 0px) rotate(4deg) !important;
    }

    /* brandstrip en mobile: que no empuje ancho */
    .brandstrip__inner {
        flex-wrap: wrap;
        gap: 12px;
    }

    .logos {
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .logos::-webkit-scrollbar {
        display: none;
    }
}

/* =========================
   MOBILE: isla mas alta / menos invasiva
========================= */
@media (max-width: 768px) {
    .topnav {
        top: 10px !important;
    }

    .topnav__inner {
        height: 54px !important;
        padding: 0 14px !important;
    }

    /* switch mas cerca del navbar pero sin bajar tanto */
    .langbar {
        top: 70px !important;
        margin-top: 8px !important;
    }

    /* el contenido arranca mas arriba (no tan abajo) */
    .hero {
        padding-top: 118px !important;
    }
}



/* =========================
   HERO RIGHT — SLIDER (clean, NO gigantismo)
   ========================= */

/* aseguramos NO sombra en islas */
.topnav__inner,
.langswitch {
    box-shadow: none !important;
}

/* el contenedor derecho no debe desbordar */
.hero__right {
    overflow: hidden;
}

.heroSlide {
    width: min(560px, 100%);
    border-radius: 32px;
    border: 1px solid rgba(0, 0, 0, .08);
    background: rgba(255, 255, 255, .78);
    display: grid;
    grid-template-columns: 52px 1fr 52px;
    align-items: center;
    padding: 16px;
}

.heroSlide__viewport {
    min-height: 420px;
    /* “cuadrado hacia abajo” */
    display: grid;
    grid-template-rows: 1fr auto;
}

.heroSlide__track {
    position: relative;
    height: 100%;
}

.heroSlide__panel {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .28s ease, transform .28s ease;
    pointer-events: none;
}

.heroSlide__panel.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.heroSlide__icon {
    width: 150px;
    height: 150px;
    border-radius: 34px;
    background: rgba(0, 0, 0, .04);
    border: 1px solid rgba(0, 0, 0, .08);
    display: grid;
    place-items: center;
    margin-bottom: 18px;
}

.heroSlide__icon svg {
    width: 92px;
    height: 92px;
    fill: #0b0c0f;
    opacity: .92;
}

.heroSlide__text {
    text-align: center;
    max-width: 360px;
}

.heroSlide__title {
    font-weight: 900;
    font-size: 22px;
    letter-spacing: -0.02em;
}

.heroSlide__kicker {
    margin-top: 6px;
    font-weight: 800;
    color: rgba(11, 12, 15, .62);
}

.heroSlide__desc {
    margin-top: 10px;
    line-height: 1.6;
    color: rgba(11, 12, 15, .78);
}

.heroSlide__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding-top: 14px;
}

.heroSlide__dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, .14);
    background: rgba(0, 0, 0, .10);
    cursor: pointer;
}

.heroSlide__dot.is-active {
    background: rgba(0, 0, 0, .75);
    border-color: rgba(0, 0, 0, .18);
}

.heroSlide__nav {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, .12);
    background: rgba(255, 255, 255, .92);
    font-weight: 900;
    font-size: 22px;
    cursor: pointer;
}

.heroSlide__nav:hover {
    opacity: .8;
}

@media (max-width: 900px) {
    .heroSlide {
        grid-template-columns: 46px 1fr 46px;
        width: 100%;
        margin-top: 18px;
    }

    .heroSlide__viewport {
        min-height: 360px;
    }

    .heroSlide__icon {
        width: 120px;
        height: 120px;
    }

    .heroSlide__icon svg {
        width: 76px;
        height: 76px;
    }
}

/* =========================
   FIX: solo texto seleccionable + selects gris/negro
   Pegar AL FINAL de styles.css
========================= */

/* 1) Por defecto: nada seleccionable */
*,
*::before,
*::after {
    -webkit-user-select: none;
    user-select: none;
}

/* 2) Solo texto seleccionable (lo “copiable”) */
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
a,
li,
strong,
em,
small,
label,
.muted,
.brandstrip__line,
.updates__big,
.updates__small,
.svc__title,
.svc__sub,
.pr__title,
.step__desc,
.acc__panel p,
.faqcard__text,
.gfooter__value,
.gfooter__copyText {
    -webkit-user-select: text;
    user-select: text;
}

/* Inputs/textarea: que el usuario pueda seleccionar lo que escribe */
input,
textarea {
    -webkit-user-select: text;
    user-select: text;
}

/* 3) Selects: color gris/negro (texto y placeholder) */
select {
    color: rgba(11, 12, 15, 0.92);
    /* gris/negro */
    font-weight: 800;
}

/* Opcional: opciones del dropdown */
select option {
    color: #0b0c0f;
}

/* =========================
   SELECTS gris/negro (texto + borde + flecha + fondo)
   Pegar AL FINAL de styles.css
========================= */

select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    width: 100%;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 0, 0, 0.22);
    border-radius: 14px;

    color: rgba(11, 12, 15, 0.92);
    /* gris/negro */
    font-weight: 800;

    padding: 12px 44px 12px 14px;
    /* espacio para la flecha */
    line-height: 1.2;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
    cursor: pointer;

    /* flecha gris */
    background-image:
        linear-gradient(45deg, transparent 50%, rgba(11, 12, 15, 0.72) 50%),
        linear-gradient(135deg, rgba(11, 12, 15, 0.72) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 52%,
        calc(100% - 12px) 52%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

select:hover {
    border-color: rgba(0, 0, 0, 0.32);
}

select:focus {
    outline: none;
    border-color: rgba(0, 0, 0, 0.44);
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.08), 0 10px 26px rgba(0, 0, 0, 0.10);
}

/* opciones del dropdown */
select option {
    color: #0b0c0f;
}

/* =========================
   Color de seleccion (NO azul)
   Pegar AL FINAL de styles.css
========================= */

/* Chrome / Edge / Safari */
::selection {
    background: rgba(0, 0, 0, 0.14);
    /* gris */
    color: #0b0c0f;
    /* negro */
}

/* Firefox */
::-moz-selection {
    background: rgba(0, 0, 0, 0.14);
    color: #0b0c0f;
}

/* =========================
   NAV/LANG HIDE (animacion real)
   pegar AL FINAL del styles.css
========================= */
.topnav,
.langbar {
    transition: transform 220ms ease, opacity 220ms ease, filter 220ms ease;
    will-change: transform, opacity;
}

.topnav.is-hidden,
.langbar.is-hidden {
    opacity: 0;
    transform: translateY(-18px);
    pointer-events: none;
    filter: blur(2px);
}

/* --- FIX: flechas del hero slider clickeables (anti overlay) --- */
.heroSlide {
    position: relative;
}

.heroSlide__viewport {
    position: relative;
    z-index: 1;
}

.heroSlide__nav {
    position: relative;
    z-index: 10;
    pointer-events: auto;
}

/* =========================================
   SCROLL ANIMATIONS (FADE-UP)
========================================= */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger base para listas/grid rápidos */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }