/* ==========================================================================
   imallen.dev · Landing "showcase"
   Tarjetas altas, carrusel con scroll-snap, fondo gris cálido y marco blanco.
   ========================================================================== */

:root {
    --sc-surface: #FFFFFF;
    --sc-ink: #111111;
    --sc-ink-2: #3A3A38;
    --sc-muted: #8E8B84;
    --sc-soft: #F2F1ED;
    --sc-beige: #EFEBE3;
    --sc-beige-2: #E3DED3;
    --sc-accent: #7C3AED;        /* morado principal: texto blanco encima = 5.7:1 */
    --sc-accent-soft: #EDE9FE;   /* tinte para fondos suaves */
    --sc-accent-strong: #6D28D9; /* hover / presionado: texto blanco = 7.1:1 */
    --sc-accent-light: #A78BFA;  /* acento sobre fondos negros: 7:1 contra #111 */
    --sc-on-accent: #FFFFFF;
    --sc-radius-frame: 40px;
    --sc-radius-card: 30px;
    --sc-gap: 16px;
    --sc-frame-pad: 40px;
    --sc-page-max: 1360px;
    --sc-phone-w: min(292px, 78vw); /* ancho fijo de las tarjetas-celular en todas las resoluciones */
    --sc-font: 'Manrope', 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --sc-ease: cubic-bezier(.2, .7, .2, 1);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 24px; }

body.sc-body {
    margin: 0;
    overflow-x: clip;
    background: var(--sc-surface);
    color: var(--sc-ink);
    font-family: var(--sc-font);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }

:focus-visible { outline: 3px solid var(--sc-ink); outline-offset: 3px; border-radius: 12px; }
.sc-frame--dark :focus-visible { outline-color: var(--sc-accent-light); }

::selection { background: var(--sc-accent); color: var(--sc-on-accent); }

.sc-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

/* ---------- Layout (ancho completo, sin marco) ---------- */
.sc-page {
    max-width: var(--sc-page-max);
    margin: 0 auto;
    padding: 0 var(--sc-frame-pad);
}

.sc-frame { position: relative; padding: 88px 0 0; }
.sc-frame--hero { padding-top: 24px; }

/* Los carruseles ocupan todo el ancho de la pantalla (se pueden arrastrar de orilla a orilla),
   pero la primera y la última tarjeta quedan alineadas con el contenedor de ancho máximo. */
.sc-carousel { --sc-bleed: max(var(--sc-frame-pad), calc((100vw - var(--sc-page-max)) / 2 + var(--sc-frame-pad))); margin-inline: calc(50% - 50vw); }
.sc-carousel .sc-track {
    padding-inline: var(--sc-bleed);
    scroll-padding-inline: var(--sc-bleed);
    border-radius: 0;
}

.sc-frame--dark {
    margin-top: 88px;
    padding: 48px;
    border-radius: var(--sc-radius-frame);
    background: var(--sc-ink);
    color: #fff;
}

/* ---------- Typography ---------- */
.sc-eyebrow {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sc-muted);
    margin-bottom: 16px;
}
.sc-eyebrow--light { color: rgba(255, 255, 255, .55); }

.sc-section-title {
    font-size: clamp(2rem, 3.6vw, 3.25rem);
    font-weight: 700;
    letter-spacing: -.045em;
    line-height: 1.02;
}

.sc-section-sub {
    margin-top: 16px;
    max-width: 52ch;
    color: var(--sc-muted);
    font-size: .98rem;
    font-weight: 500;
}
.sc-frame--dark .sc-section-sub { color: rgba(255, 255, 255, .62); }

/* ---------- Pills, chips, icon buttons ---------- */
.sc-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 11px 20px;
    border-radius: 999px;
    border: 0;
    font-size: .84rem;
    font-weight: 700;
    letter-spacing: -.01em;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .25s var(--sc-ease), background-color .25s, color .25s;
}
.sc-pill i { font-size: .7rem; }
.sc-pill:hover { transform: translateY(-1px); }
.sc-pill--soft { background: var(--sc-soft); color: var(--sc-ink); }
.sc-pill--soft:hover { background: var(--sc-beige-2); }
.sc-pill--dark { background: var(--sc-ink); color: #fff; }
.sc-pill--dark:hover { background: #2a2a2a; }
.sc-pill--accent { background: var(--sc-accent); color: var(--sc-on-accent); }
.sc-pill--accent:hover { background: var(--sc-accent-strong); }

.sc-chip {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: #fff;
    color: var(--sc-ink);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: -.005em;
    white-space: nowrap;
}
.sc-chip--dark { background: var(--sc-ink); color: #fff; }

.sc-icon-btn {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 0;
    background: var(--sc-soft);
    color: var(--sc-ink);
    font-size: .9rem;
    cursor: pointer;
    transition: background-color .25s;
}
.sc-icon-btn:hover { background: var(--sc-beige-2); }

.sc-burger,
.sc-burger::after {
    display: block;
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .3s var(--sc-ease);
}
.sc-burger { position: relative; transform: translateY(-3px); }
.sc-burger::after { content: ''; position: absolute; left: 0; top: 6px; }
.sc-menu-toggle[aria-expanded="true"] .sc-burger { transform: translateY(0) rotate(45deg); }
.sc-menu-toggle[aria-expanded="true"] .sc-burger::after { transform: translateY(-6px) rotate(-90deg); }

/* ---------- Nav ---------- */
.sc-nav {
    position: relative;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 14px;
}

.sc-logo { display: inline-flex; align-items: center; gap: 12px; border-radius: 999px; }
.sc-logo__mark {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--sc-accent);
    color: var(--sc-on-accent);
    font-size: .95rem;
}
.sc-logo__word { display: none; }

.sc-nav__links {
    display: flex;
    gap: 2px;
    padding: 5px;
    border-radius: 999px;
    background: var(--sc-soft);
    margin-right: auto;
}
.sc-nav__links a {
    padding: 8px 16px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--sc-ink-2);
    transition: background-color .25s, color .25s;
}
.sc-nav__links a:hover { background: #fff; color: var(--sc-ink); }

.sc-nav__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.sc-nav__cta { margin-right: 18px; }

.sc-mobile-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: min(320px, 100%);
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 24px 60px -20px rgba(17, 17, 17, .28), 0 0 0 1px rgba(17, 17, 17, .05);
}
.sc-mobile-menu[hidden] { display: none; }
.sc-mobile-menu a:not(.sc-pill) {
    padding: 12px 16px;
    border-radius: 16px;
    font-weight: 600;
}
.sc-mobile-menu a:not(.sc-pill):hover { background: var(--sc-soft); }
.sc-mobile-menu .sc-pill { margin-top: 6px; padding: 14px 20px; }

/* ---------- Hero ---------- */
.sc-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 48px;
    margin: 52px 0 32px;
}
.sc-hero__text { flex: 1 1 auto; min-width: 0; }
.sc-hero__title {
    font-size: clamp(2.5rem, 5vw, 4.4rem);
    font-weight: 700;
    letter-spacing: -.05em;
    line-height: 1;
}
.sc-hero__aside {
    display: flex;
    align-items: flex-end;
    gap: 28px;
    flex: 0 0 380px;
}
.sc-hero__subtitle {
    flex: 1 1 auto;
    max-width: 34ch;
    color: var(--sc-muted);
    font-size: .88rem;
    font-weight: 500;
    line-height: 1.5;
}

/* ---------- Carousel ---------- */
.sc-carousel-controls { display: flex; gap: 8px; flex-shrink: 0; }
.sc-carousel-controls.is-static { visibility: hidden; }

.sc-arrow {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--sc-ink);
    color: #fff;
    font-size: .78rem;
    cursor: pointer;
    transition: transform .25s var(--sc-ease), opacity .25s;
}
.sc-arrow:hover:not(:disabled) { transform: scale(1.06); }
.sc-arrow:disabled { opacity: .25; cursor: default; }

.sc-track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--sc-gap);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    border-radius: var(--sc-radius-card);
}
.sc-track::-webkit-scrollbar { display: none; }
.sc-track:focus-visible { outline-offset: 4px; }

/* ---------- Cards ---------- */
.sc-card {
    flex: 0 0 clamp(280px, calc((100% - 3 * var(--sc-gap)) / 3.4), 380px);
    min-height: 540px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    border-radius: var(--sc-radius-card);
    background: var(--sc-beige);
    overflow: hidden;
    isolation: isolate;
}
.sc-card--accent { background: var(--sc-accent); color: var(--sc-on-accent); }
.sc-card--dark { background: var(--sc-ink); color: #fff; }

.sc-card__top { padding: 18px 20px 26px; }
.sc-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.sc-card__icon {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-left: auto;
    border-radius: 50%;
    background: var(--sc-beige-2);
    color: #fff;
    font-size: .8rem;
    flex-shrink: 0;
    transition: transform .25s var(--sc-ease);
}
.sc-card--accent .sc-card__icon { background: var(--sc-on-accent); color: var(--sc-accent-strong); }
.sc-card--dark .sc-card__icon { background: var(--sc-accent); color: var(--sc-on-accent); }
.sc-card--dark .sc-chip { background: rgba(255, 255, 255, .12); color: #fff; }
.sc-card--project:not(.sc-card--accent) .sc-card__icon { background: var(--sc-ink); color: #fff; }
.sc-card__icon--link:hover { transform: rotate(-12deg) scale(1.06); }

.sc-card__title {
    margin-top: 30px;
    font-size: clamp(1.75rem, 2.5vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -.045em;
    line-height: 1;
    text-wrap: balance;
}
.sc-card__desc {
    margin-top: 14px;
    max-width: 30ch;
    font-size: .82rem;
    font-weight: 500;
    line-height: 1.45;
    color: rgba(17, 17, 17, .62);
}
.sc-card--accent .sc-card__desc { color: rgba(255, 255, 255, .88); }
.sc-card--dark .sc-card__desc { color: rgba(255, 255, 255, .62); }
.sc-card__desc--clamp {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 44ch;
}

.sc-card__media {
    position: relative;
    flex: 1 1 auto;
    min-height: 250px;
    border-radius: var(--sc-radius-card);
    overflow: hidden;
    background: var(--sc-beige-2);
}
.sc-card__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s var(--sc-ease);
}
.sc-card:hover .sc-card__media img { transform: scale(1.04); }
.sc-card__media:has(img)::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 45%;
    background: linear-gradient(to top, rgba(17, 17, 17, .45), transparent);
    pointer-events: none;
}

.sc-card__media--pattern {
    background:
        radial-gradient(circle at 30% 30%, rgba(124, 58, 237, .95), rgba(124, 58, 237, .55) 45%, transparent 70%),
        radial-gradient(rgba(255, 255, 255, .14) 1.2px, transparent 1.4px) 0 0 / 14px 14px,
        #1d1d1b;
}
.sc-big-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -62%);
    font-size: 4.5rem;
    color: var(--sc-ink);
}
.sc-card--project .sc-big-icon { color: var(--sc-muted); }
.sc-card__media--pattern .sc-big-icon { color: var(--sc-on-accent); }

.sc-glass-btn {
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 6px 6px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .26);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    transition: background-color .25s;
}
.sc-glass-btn:hover { background: rgba(255, 255, 255, .38); }
.sc-glass-btn__icon {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    color: var(--sc-ink);
    font-size: .72rem;
    transition: transform .25s var(--sc-ease);
}
.sc-glass-btn:hover .sc-glass-btn__icon { transform: translateX(2px); }
.sc-card__media--pattern .sc-glass-btn { background: rgba(17, 17, 17, .55); }

/* Projects (hero carousel): each card is a phone screenshot with browser chrome */
/* Todas las tarjetas del carrusel de proyectos: mismo ancho y proporción de celular en cualquier resolución */
.sc-track--projects .sc-card {
    flex: 0 0 var(--sc-phone-w);
    width: var(--sc-phone-w);
    min-height: 0;
    aspect-ratio: 9 / 18.5;
}
.sc-phone {
    position: relative;
    background: #0f0f0e;
    color: #fff;
    border-radius: 34px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.sc-phone__status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 22px 6px 26px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: -.01em;
}
.sc-phone__icons { display: inline-flex; align-items: center; gap: 6px; }
.sc-phone__icons svg { fill: currentColor; }
.sc-phone__bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 14px 10px;
}
.sc-phone__url {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: #262624;
    color: rgba(255, 255, 255, .55);
    font-size: .76rem;
    font-weight: 600;
}
.sc-phone__lock { flex-shrink: 0; fill: currentColor; }
.sc-phone__host { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #fff; }
.sc-phone__reload { flex-shrink: 0; }
.sc-phone__tabs {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 1.6px solid rgba(255, 255, 255, .8);
    border-radius: 6px;
    font-size: .62rem;
    font-weight: 800;
    flex-shrink: 0;
}
.sc-phone__dots { display: inline-flex; flex-direction: column; gap: 2.5px; padding: 0 2px; flex-shrink: 0; }
.sc-phone__dots i { width: 3.5px; height: 3.5px; border-radius: 50%; background: rgba(255, 255, 255, .8); }
.sc-phone__screen {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0 6px 6px;
    border-radius: 0 0 28px 28px;
    overflow: hidden;
    background:
        radial-gradient(circle at 75% 20%, rgba(124, 58, 237, .32), transparent 55%),
        linear-gradient(160deg, #2a2a27, #111);
    isolation: isolate;
}
.sc-phone__screen img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    z-index: -1;
    transition: transform .8s var(--sc-ease);
}
/* Imagen que no es captura móvil (p. ej. mockup horizontal): se recorta al centro. */
.sc-phone__screen img.is-fitted { object-position: center center; }
.sc-card:hover .sc-phone__screen img { transform: scale(1.03); }
.sc-phone__screen::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to bottom,
        rgba(10, 10, 10, 0) 26%,
        rgba(10, 10, 10, .7) 46%,
        rgba(10, 10, 10, .94) 60%,
        rgba(10, 10, 10, .97) 100%);
    pointer-events: none;
}
.sc-phone .sc-big-icon { color: rgba(255, 255, 255, .22); transform: translate(-50%, -110%); z-index: -1; }
.sc-phone__info {
    position: absolute;
    inset: auto 0 0 0;
    padding: 0 18px 30px;
}
.sc-phone__home {
    position: absolute;
    left: 50%;
    bottom: 9px;
    width: 34%;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .7);
    transform: translateX(-50%);
}
.sc-phone .sc-card__meta { margin-bottom: 14px; flex-wrap: nowrap; overflow: hidden; }
.sc-phone .sc-chip {
    height: 26px;
    padding: 0 10px;
    background: rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
    color: #fff;
    font-size: .68rem;
}
.sc-phone .sc-chip--accent { background: var(--sc-accent); color: var(--sc-on-accent); box-shadow: none; }
.sc-phone .sc-card__title {
    margin-top: 0;
    font-size: clamp(1.5rem, 2vw, 1.85rem);
    color: #fff;
}
.sc-phone .sc-card__desc { margin-top: 10px; color: rgba(255, 255, 255, .78); }
.sc-phone .sc-glass-btn { position: relative; left: auto; bottom: auto; margin-top: 16px; }
.sc-phone .sc-glass-btn__icon { background: var(--sc-accent); color: var(--sc-on-accent); }

/* ---------- Section heads ---------- */
.sc-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin: 8px 0 36px;
}
.sc-section-head--center { justify-content: center; text-align: center; }
.sc-section-head--center .sc-section-sub { margin-left: auto; margin-right: auto; }

/* ---------- Plans ---------- */
.sc-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--sc-gap);
}
.sc-plan {
    display: flex;
    flex-direction: column;
    padding: 26px 26px 24px;
    border-radius: var(--sc-radius-card);
    background: var(--sc-beige);
}
.sc-plan--popular { background: var(--sc-accent); color: var(--sc-on-accent); }
.sc-plan--popular .sc-plan__old { color: rgba(255, 255, 255, .7); }
.sc-plan--popular .sc-plan__period { color: rgba(255, 255, 255, .82); }
.sc-plan--popular .sc-plan__features { border-top-color: rgba(255, 255, 255, .25); }
.sc-plan--popular .sc-plan__features li.is-off { color: rgba(255, 255, 255, .72); }
.sc-plan--popular .sc-plan__features li.is-off i { background: rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .85); }
.sc-plan__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sc-plan__name { font-size: 1.35rem; font-weight: 700; letter-spacing: -.03em; }
.sc-plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 26px 0 22px; }
.sc-plan__old { color: rgba(17, 17, 17, .45); font-weight: 600; font-size: 1.05rem; }
.sc-plan__amount { font-size: clamp(2.6rem, 4vw, 3.4rem); font-weight: 800; letter-spacing: -.055em; line-height: 1; }
.sc-plan__period { color: rgba(17, 17, 17, .55); font-weight: 600; }
.sc-plan__features {
    list-style: none;
    margin: 0 0 28px;
    padding: 18px 0 0;
    border-top: 1px solid rgba(17, 17, 17, .1);
    display: grid;
    gap: 10px;
    font-size: .9rem;
    font-weight: 500;
}
.sc-plan__features li { display: flex; align-items: flex-start; gap: 10px; }
.sc-plan__features i {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--sc-ink);
    color: #fff;
    font-size: .6rem;
}
.sc-plan--popular .sc-plan__features i { background: var(--sc-on-accent); color: var(--sc-accent-strong); }
.sc-plan__features li.is-off { color: rgba(17, 17, 17, .4); }
.sc-plan__features li.is-off i { background: rgba(17, 17, 17, .12); color: rgba(17, 17, 17, .45); }
.sc-plan__btn { margin-top: auto; width: 100%; padding: 14px 20px; }
.sc-plan:not(.sc-plan--popular) .sc-plan__btn { background: #fff; }

/* ---------- FAQ ---------- */
.sc-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: 48px; }
.sc-faq__intro .sc-pill { margin-top: 28px; }
.sc-faq__list { display: grid; gap: 10px; align-content: start; }
.sc-faq__item { border-radius: 24px; background: var(--sc-beige); transition: background-color .25s; }
.sc-faq__item[open] { background: var(--sc-soft); }
.sc-faq__item summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 18px 18px 24px;
    font-weight: 700;
    letter-spacing: -.02em;
    cursor: pointer;
    border-radius: 24px;
}
.sc-faq__item summary::-webkit-details-marker { display: none; }
.sc-faq__plus {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    font-size: .75rem;
    transition: transform .3s var(--sc-ease), background-color .25s;
}
.sc-faq__item[open] .sc-faq__plus { transform: rotate(45deg); background: var(--sc-accent); color: var(--sc-on-accent); }
.sc-faq__answer { padding: 0 24px 22px; color: var(--sc-ink-2); font-size: .94rem; max-width: 64ch; }

/* ---------- Contact ---------- */
.sc-contact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 48px;
}
.sc-contact__info { padding-top: 8px; }
.sc-contact__list { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 14px; font-weight: 600; }
.sc-contact__list li { display: flex; align-items: center; gap: 14px; }
.sc-contact__list .sc-card__icon { margin-left: 0; background: var(--sc-accent); color: var(--sc-on-accent); }

.sc-contact__card { background: #fff; color: var(--sc-ink); border-radius: var(--sc-radius-card); padding: 30px; }
.sc-form__fields { display: grid; gap: 20px; }
.sc-form__fields[hidden] { display: none; }
.sc-field { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.sc-field label,
.sc-field legend { padding: 0; font-size: .84rem; font-weight: 700; letter-spacing: -.01em; }
.sc-field legend { margin-bottom: 8px; }
.sc-field__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sc-optional { color: var(--sc-muted); font-weight: 500; }

.sc-field input,
.sc-field select,
.sc-field textarea {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid transparent;
    border-radius: 16px;
    background: var(--sc-soft);
    font-size: .95rem;
    font-weight: 500;
    transition: border-color .2s, background-color .2s;
}
.sc-field textarea { resize: vertical; min-height: 92px; }
.sc-field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--sc-ink) 50%), linear-gradient(135deg, var(--sc-ink) 50%, transparent 50%); background-position: calc(100% - 22px) 52%, calc(100% - 17px) 52%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 44px; }
.sc-field input::placeholder,
.sc-field textarea::placeholder { color: #a7a49d; }
.sc-field input:focus,
.sc-field select:focus,
.sc-field textarea:focus { outline: none; border-color: var(--sc-ink); background: #fff; }
.sc-field input[aria-invalid="true"] { border-color: #e5484d; }
.sc-field input[hidden] { display: none; }

.sc-toggle { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--sc-soft); }
.sc-toggle button {
    border: 0;
    background: transparent;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
    color: var(--sc-muted);
    cursor: pointer;
}
.sc-toggle button.is-active { background: var(--sc-ink); color: #fff; }

.sc-slots { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-slots.is-invalid .sc-slot { box-shadow: inset 0 0 0 1px #e5484d; }
.sc-slot {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-width: 64px;
    padding: 9px 14px;
    border: 0;
    border-radius: 16px;
    background: var(--sc-soft);
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .2s, transform .2s var(--sc-ease);
}
.sc-slot small { font-size: .66rem; font-weight: 600; color: var(--sc-muted); text-transform: uppercase; letter-spacing: .04em; }
.sc-slot:hover { background: var(--sc-beige-2); }
.sc-slot[aria-pressed="true"] { background: var(--sc-accent); color: var(--sc-on-accent); }
.sc-slot[aria-pressed="true"] small { color: rgba(255, 255, 255, .85); }

/* Multistep */
.sc-steps { display: flex; align-items: center; gap: 12px; }
.sc-steps__bar { flex: 1 1 auto; height: 6px; border-radius: 999px; background: var(--sc-soft); overflow: hidden; }
.sc-steps__fill { display: block; width: 33.33%; height: 100%; border-radius: inherit; background: var(--sc-accent); transition: width .35s var(--sc-ease); }
.sc-steps__label { flex-shrink: 0; color: var(--sc-muted); font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.sc-step { display: grid; gap: 20px; }
.sc-step[hidden] { display: none; }
.sc-step.is-active { animation: sc-step-in .35s var(--sc-ease); }
@keyframes sc-step-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
.sc-step__actions { display: flex; gap: 10px; }
.sc-step__actions .sc-form__submit { flex: 1 1 auto; width: auto; }
.sc-step__back { flex: 0 0 auto; padding: 16px 20px; }
.sc-field[hidden] { display: none; }
.sc-toggle button i { margin-right: 4px; font-size: .7rem; }
.sc-slots--scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    margin: -4px;
    padding: 4px;
}
.sc-slots--scroll::-webkit-scrollbar { display: none; }
.sc-slots--scroll .sc-slot { flex: 0 0 auto; min-width: 62px; scroll-snap-align: start; }
.sc-slot b { font-size: 1.05rem; font-weight: 800; }
.sc-time { display: grid; gap: 12px; }
.sc-time__row { display: grid; gap: 6px; }
.sc-time__label { color: var(--sc-muted); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

.sc-form__error { margin: 0; padding: 12px 16px; border-radius: 14px; background: #fdecec; color: #b42318; font-size: .86rem; font-weight: 600; }
.sc-form__error[hidden] { display: none; }
.sc-form__submit { width: 100%; padding: 16px 22px; font-size: .92rem; }
.sc-form__submit:disabled { opacity: .6; cursor: progress; }

.sc-form__success { text-align: center; padding: 40px 12px; }
.sc-form__success[hidden] { display: none; }
.sc-form__success:focus { outline: none; }
.sc-form__success-icon { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--sc-accent); color: var(--sc-on-accent); font-size: 1.4rem; margin-bottom: 18px; }
.sc-form__success h3 { font-size: 1.8rem; letter-spacing: -.04em; margin-bottom: 10px; }
.sc-form__success p { color: var(--sc-ink-2); max-width: 40ch; margin: 0 auto; }

/* ---------- Footer ---------- */
.sc-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 24px;
    margin-top: 48px;
    padding: 28px 0 36px;
    border-top: 1px solid rgba(17, 17, 17, .08);
    color: rgba(17, 17, 17, .6);
    font-size: .84rem;
    font-weight: 500;
}
.sc-footer__links { display: flex; gap: 18px; font-weight: 600; color: var(--sc-ink); }
.sc-footer__links a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (min-width: 1280px) {
    .sc-logo__word { display: inline-flex; }
    .sc-nav__links { margin-left: 10px; }
}

@media (min-width: 769px) {
    .sc-card__top { min-height: 232px; }
}

/* Tablet: el subtítulo sigue a la derecha del título (como en escritorio); solo en celular baja debajo del título */
@media (min-width: 768px) and (max-width: 1279px) {
    .sc-hero { gap: 32px; }
    .sc-hero__aside { flex: 0 0 clamp(220px, 30vw, 300px); flex-direction: column; align-items: flex-end; gap: 18px; }
    .sc-hero__subtitle { max-width: none; }
}

@media (max-width: 1024px) {
    .sc-nav__links { display: none; }
    .sc-faq, .sc-contact { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 768px) {
    :root { --sc-radius-frame: 30px; --sc-radius-card: 26px; --sc-frame-pad: 18px; --sc-gap: 12px; }
    .sc-frame { padding-top: 64px; }
    .sc-frame--hero { padding-top: 14px; }
    .sc-frame--dark { margin-top: 64px; }
    .sc-nav__cta { display: none; }
    .sc-icon-btn, .sc-logo__mark { width: 42px; height: 42px; }

    .sc-hero { margin: 44px 0 24px; }

    .sc-section-head { flex-direction: column; align-items: stretch; gap: 20px; margin-bottom: 24px; }
    .sc-section-head .sc-carousel-controls { justify-content: flex-end; }
    .sc-section-title br { display: none; }

    .sc-card { flex-basis: 85%; min-height: 0; }
    .sc-track--projects .sc-phone { border-radius: 30px; }
    .sc-phone .sc-card__title { margin-top: 0; font-size: 1.7rem; }
    .sc-card__title { margin-top: 24px; font-size: 1.95rem; }
    .sc-card__media { flex: 0 0 auto; height: 300px; min-height: 0; }

    .sc-plans { grid-template-columns: 1fr; }
    .sc-contact { padding: 26px 18px 18px; }
    .sc-contact__card { padding: 22px 18px; }
    .sc-faq__item summary { padding: 16px 14px 16px 18px; }
    .sc-faq__answer { padding: 0 18px 18px; }
    .sc-footer { flex-direction: column; text-align: center; }
}

/* Celular: el subtítulo baja justo debajo del título */
@media (max-width: 767px) {
    .sc-hero { flex-direction: column; align-items: stretch; gap: 22px; }
    .sc-hero__title { font-size: clamp(2.15rem, 10.2vw, 3rem); letter-spacing: -.05em; }
    .sc-hero__title br { display: none; }
    .sc-hero__aside { flex: 0 0 auto; flex-direction: column; align-items: stretch; gap: 18px; }
    .sc-hero__subtitle { font-size: .92rem; max-width: none; }
    .sc-hero .sc-carousel-controls { justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
    html, .sc-track { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
    .sc-card:hover .sc-card__media img { transform: none; }
}

/* ==========================================================================
   Detalle de proyecto (/proyectos/{slug}) · mobile-first
   ========================================================================== */
.sc-pd { padding-bottom: 8px; }

.sc-pd__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 22px 0 26px;
}
.sc-pd__back { padding: 10px 18px 10px 14px; }
.sc-pd__counter { font-size: .9rem; font-weight: 800; letter-spacing: -.02em; }
.sc-pd__counter span { color: var(--sc-muted); font-weight: 600; }

/* Hero: texto arriba, celular abajo (móvil) · dos columnas (escritorio) */
.sc-pd__hero { display: grid; gap: 32px; }
.sc-pd__intro { min-width: 0; }
.sc-pd__title {
    font-size: clamp(2.4rem, 11vw, 4.6rem);
    font-weight: 800;
    letter-spacing: -.055em;
    line-height: .96;
    overflow-wrap: anywhere;
}
.sc-pd__lead {
    margin-top: 16px;
    max-width: 48ch;
    color: var(--sc-ink-2);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
}
.sc-pd__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}
.sc-pd__chips .sc-chip { background: var(--sc-soft); }
.sc-pd__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.sc-pd__cta { padding: 14px 22px; }
.sc-pd__cta--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); }
.sc-pd__cta--ghost:hover { background: rgba(255, 255, 255, .08); }

.sc-pd__visual {
    display: grid;
    place-items: center;
    padding: 28px 0;
    border-radius: var(--sc-radius-frame);
    background:
        radial-gradient(circle at 70% 25%, rgba(124, 58, 237, .38), transparent 55%),
        radial-gradient(circle at 20% 85%, var(--sc-accent-soft), transparent 50%),
        var(--sc-beige);
}

/* Marco de celular reutilizable (misma piel que las tarjetas del carrusel) */
.sc-pd-phone {
    display: flex;
    flex-direction: column;
    margin: 0;
    overflow: hidden;
    box-shadow: 0 30px 60px -30px rgba(17, 17, 17, .55), inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.sc-pd-phone--hero { width: min(78%, 300px); aspect-ratio: 9 / 18.5; }
.sc-pd-phone__screen {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0 6px 6px;
    border-radius: 0 0 28px 28px;
    overflow: hidden;
    background: linear-gradient(160deg, #2a2a27, #111);
}
.sc-pd-phone__screen img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}
.sc-pd-phone__screen img.is-fitted { object-position: center center; }
.sc-pd-phone__screen--natural img { position: static; height: auto; }
.sc-pd-phone .sc-phone__home { z-index: 1; background: rgba(17, 17, 17, .45); }

/* Secciones */
.sc-pd__section { margin-top: 56px; }
.sc-pd__section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.sc-pd__h2 { font-size: clamp(1.6rem, 6vw, 2.4rem); font-weight: 700; letter-spacing: -.045em; line-height: 1.05; }

/* Galería: carrusel con scroll-snap en móvil, cuadrícula en escritorio */
.sc-pd__gallery {
    display: flex;
    align-items: flex-start;
    gap: var(--sc-gap);
    margin: 0 calc(-1 * var(--sc-frame-pad));
    padding: 4px var(--sc-frame-pad) 12px;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--sc-frame-pad);
    scrollbar-width: none;
}
.sc-pd__gallery::-webkit-scrollbar { display: none; }
/* Todas las tarjetas a la misma altura; el ancho sale de la proporción de cada captura (--ar = ancho/alto).
   El marco de celular tiene más cromo que el de navegador, así que su imagen es --pd-phone-extra más baja. */
.sc-pd__gallery { --pd-img-h: 380px; --pd-phone-extra: 48px; }
.sc-pd__shot { --pd-shot-img-h: var(--pd-img-h); flex: 0 0 auto; scroll-snap-align: start; }
.sc-pd__shot.is-mobile { --pd-shot-img-h: calc(var(--pd-img-h) - var(--pd-phone-extra)); }
.sc-pd__shot .sc-pd-browser { width: calc(var(--pd-shot-img-h) * var(--ar, 1.6)); }
.sc-pd__shot .sc-pd-phone { width: calc(var(--pd-shot-img-h) * var(--ar, .5625) + 12px); }
.sc-pd__shot .sc-pd-browser img,
.sc-pd__shot .sc-pd-phone__screen--natural img { width: 100%; height: auto; max-width: none; }
.sc-pd__shot .sc-phone__bar { gap: 6px; padding-left: 8px; padding-right: 8px; }
.sc-pd__shot figcaption { max-width: 100%; }
.sc-pd__shot figure { margin: 0; }
.sc-pd__shot figcaption { margin-top: 10px; color: var(--sc-muted); font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sc-pd__shot .sc-pd-phone { border-radius: 30px; }

.sc-pd-browser {
    overflow: hidden;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(17, 17, 17, .08), 0 24px 50px -30px rgba(17, 17, 17, .45);
}
.sc-pd-browser__bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: var(--sc-soft);
}
.sc-pd-browser__dots { display: inline-flex; gap: 5px; flex-shrink: 0; }
.sc-pd-browser__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--sc-beige-2); }
.sc-pd-browser__dots i:first-child { background: #ff5f57; }
.sc-pd-browser__dots i:nth-child(2) { background: #febc2e; }
.sc-pd-browser__dots i:last-child { background: #28c840; }
.sc-pd-browser__url {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 4px 12px;
    border-radius: 999px;
    background: #fff;
    color: var(--sc-ink-2);
    font-size: .7rem;
    font-weight: 600;
    text-align: center;
}
.sc-pd-browser__url i { font-size: .6rem; color: var(--sc-muted); margin-right: 4px; }
.sc-pd-browser img { width: 100%; height: auto; }

/* Descripción + ficha */
.sc-pd__about { display: grid; gap: 32px; }
.sc-pd__prose { margin-top: 16px; color: var(--sc-ink-2); font-size: 1rem; font-weight: 500; line-height: 1.65; }
.sc-pd__prose p + p { margin-top: 14px; }
.sc-pd__facts { display: grid; gap: 14px; align-content: start; }
.sc-pd__fact { padding: 20px; border-radius: var(--sc-radius-card); background: var(--sc-soft); }
.sc-pd__fact h3 { color: var(--sc-muted); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sc-pd__fact .sc-pd__chips { margin-top: 12px; }
.sc-pd__fact .sc-pd__chips .sc-chip { background: #fff; }
.sc-pd__links { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.sc-pd__links a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px 10px 10px;
    border-radius: 18px;
    background: #fff;
    font-size: .86rem;
    transition: transform .25s var(--sc-ease);
}
.sc-pd__links a:hover { transform: translateY(-1px); }
.sc-pd__links a > i { margin-left: auto; color: var(--sc-muted); font-size: .72rem; }
.sc-pd__link-icon { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--sc-ink); color: var(--sc-accent-light); flex-shrink: 0; }
.sc-pd__link-text { display: grid; min-width: 0; }
.sc-pd__link-text span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--sc-muted); font-size: .76rem; font-weight: 600; }

/* Anterior / siguiente: botones de texto, sin imágenes.
   Etiqueta pegada arriba, título debajo (puede ocupar varias líneas), flecha abajo en la esquina. */
.sc-pd__pager { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; gap: 10px; }
.sc-pd__pager-link {
    display: flex;
    align-items: stretch;
    gap: 10px;
    min-width: 0;
    min-height: 64px;
    padding: 12px;
    border-radius: 24px;
    background: var(--sc-soft);
    color: var(--sc-ink);
    -webkit-tap-highlight-color: transparent;
    transition: background-color .25s, transform .25s var(--sc-ease);
}
.sc-pd__pager-link--next { justify-content: flex-end; text-align: right; }
.sc-pd__pager-arrow {
    display: inline-grid;
    place-items: center;
    align-self: flex-end;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--sc-ink);
    color: #fff;
    font-size: .8rem;
    transition: background-color .25s, color .25s, transform .25s var(--sc-ease);
}
.sc-pd__pager-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: space-between; /* etiqueta al borde superior, título al borde inferior */
    gap: 6px;
    min-width: 0;
    padding: 2px 4px;
}
.sc-pd__pager-label { color: var(--sc-muted); font-size: .68rem; font-weight: 800; letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; }
.sc-pd__pager-text strong {
    font-size: .98rem;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.2;
    overflow-wrap: break-word; /* solo parte palabras que no caben solas; sin guiones */
    text-wrap: balance;
}
.sc-pd__pager-link:hover,
.sc-pd__pager-link:focus-visible { background: var(--sc-accent); color: var(--sc-on-accent); }
.sc-pd__pager-link:hover .sc-pd__pager-label,
.sc-pd__pager-link:focus-visible .sc-pd__pager-label { color: rgba(255, 255, 255, .82); }
.sc-pd__pager-link:hover .sc-pd__pager-arrow { color: var(--sc-accent-light); }
.sc-pd__pager-link--prev:hover .sc-pd__pager-arrow { transform: translateX(-2px); }
.sc-pd__pager-link--next:hover .sc-pd__pager-arrow { transform: translateX(2px); }
.sc-pd__pager-link:active { background: var(--sc-accent-strong); color: var(--sc-on-accent); transform: scale(.98); }

.sc-pd__contact .sc-pd__ctas { margin-top: 28px; }
.sc-body--project .sc-frame--dark { margin-top: 56px; padding: 30px 20px; }

/* Tarjeta del carrusel: enlace a detalle en toda la tarjeta + icono al sitio en vivo */
.sc-phone__cover { position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.sc-phone__info { pointer-events: none; }
.sc-phone__info a { pointer-events: auto; }
.sc-phone__external {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    margin: -4px -4px -4px 0;
    border-radius: 50%;
    color: rgba(255, 255, 255, .85);
    font-size: .72rem;
    transition: background-color .25s, color .25s;
}
.sc-phone__external:hover,
.sc-phone__external:focus-visible { background: var(--sc-accent); color: var(--sc-on-accent); }

@media (min-width: 769px) {
    .sc-pd__topbar { margin: 34px 0 40px; }
    .sc-pd__lead { font-size: 1.1rem; }
    .sc-pd__section { margin-top: 88px; }
    /* Escritorio: misma fila deslizable, más alta, sangrando hasta el borde derecho como los carruseles del showcase */
    .sc-pd__gallery {
        --pd-img-h: clamp(360px, 32vw, 460px);
        gap: 24px;
        margin: 0 calc(50% - 50vw) 0 0;
        padding: 4px calc(50vw - 50%) 12px 0;
        scroll-padding: 0;
    }
    .sc-pd__about { grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 48px; }
    .sc-pd__pager { display: flex; justify-content: space-between; align-items: stretch; gap: 24px; }
    .sc-pd__pager-link { flex: 0 1 auto; width: min(360px, calc(50% - 12px)); min-height: 96px; padding: 16px; border-radius: 28px; }
    .sc-pd__pager-link--next { margin-left: auto; }
    .sc-pd__pager-arrow { width: 52px; height: 52px; }
    .sc-pd__pager-text { padding: 2px 6px; }
    .sc-pd__pager-text strong { font-size: 1.25rem; }
    .sc-body--project .sc-frame--dark { margin-top: 88px; padding: 56px; }
}

@media (min-width: 1025px) {
    .sc-pd__hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 56px; }
    .sc-pd__visual { padding: 48px 0; }
    .sc-pd-phone--hero { width: min(64%, 320px); }
}

/* Barra superior: solo el wordmark IMALLEN.DEV (sin el círculo </>) en todos los tamaños */
.sc-nav .sc-logo { min-height: 44px; padding: 0 2px; }
.sc-nav .sc-logo__word { display: inline-flex; align-items: center; }
@media (min-width: 1280px) { .sc-nav .sc-logo { margin-right: 8px; } }