/* index_ai.css */

/* ===== Fuente global: Inter ===== */
:root,
html {
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    font-feature-settings: "liga", "calt", "ss01", "cv01";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family: inherit;
}

button,
input,
select,
textarea {
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
}

/* ===== Base ===== */
html {
    width: 100vw;
    margin: 0;
    overflow-x: hidden;
}

body {
    height: 100vh !important;
    width: 100vw;
    margin: 0;
    overflow-x: hidden;
}

/* ===== HERO / HEADER ===== */
.artia-hero {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20001;
    background: #ffffff;
    color: #0b0f17;
    padding: 8px 16px 0px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.artia-hero-logo {
    height: 3rem;
}

.artia-hero-inner {
    /* max-width: 960px; */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    text-align: center;
}

.artia-title {
    margin: 0;
    font-weight: 800;
    font-size: 32px;
    line-height: 1;
    letter-spacing: .5px;
}

.artia-subtitle {
    margin: 0;
    font-weight: 500;
    font-size: 14px;
    opacity: .9;
}

.artia-know-more-btn {
    margin-top: 8px;
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.05);
    color: #0b0f17;
    border: 1.5px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s;
    display: inline-block;
    cursor: pointer;
}

.artia-know-more-btn:hover {
    background: rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.3);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.artia-know-more-btn:active {
    transform: translateY(0);
}

.artia-search-card {
    width: 100%;
    max-width: 520px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1.5px solid #E6E8F5;
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .10);
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
    overflow: visible;
}

/* Cuando es un enlace, hacerlo clickeable visualmente */
a.artia-search-card {
    cursor: pointer;
}

a.artia-search-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 2px 4px rgba(16, 24, 40, .08), 0 2px 6px rgba(16, 24, 40, .12);
    transform: translateY(-1px);
}

a.artia-search-card:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .10);
}

.artia-search-text {
    flex: 1;
    font: 700 16px/1.2 Inter, system-ui, sans-serif;
    color: #0f172a;
    background: transparent;
    cursor: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
}


.artia-brand {
    height: 44px;
    width: auto;
    display: block;
    object-fit: contain;
    margin: -8px 0;
}

@media (min-width:768px) {
    .artia-title {
        font-size: 36px;
    }

    .artia-subtitle {
        font-size: 15px;
    }
}

/* Banda de paso */
.step-title {
    position: relative;
    background: #daeac1;
    color: #12375a;
    font-weight: 700;
    font-size: 14px !important; /* Reducir tamaño de fuente */
    line-height: 1.2;
    padding: 6px 12px !important; /* Reducir padding */
    width: 100%;
    text-align: left;
    max-width: 520px;
}

.step-title::after {
    content: "";
    position: absolute;
    top: 0;
    left: -5%;
    right: 0;
    height: 100%;
    width: 110%;
    background: #daeac1;
    z-index: -1;
}

/* Offset para que el contenido no quede bajo el header */
:root {
    --offset-top: 152px;
}

/* ~112 header + 40 banda */
/* @media (min-width:768px) {
    :root {
        --offset-top: 156px;
    }
} */

/* ===== Home ===== */
.home {
    position: fixed;
    top: var(--offset-top, 152px); /* Evitar que el header tape el contenido - se calcula dinámicamente (solo screen-1) */
    left: 0;
    right: 0;
    bottom: 0;
    padding: 12px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Mostrar el contenido desde arriba */
    overflow: hidden; /* El scroll principal se gestiona por bloques internos */
}

/* Screen-1: el bloque principal debe quedar arriba y scrollear si no cabe */
#screen-1 .home {
    justify-content: flex-start !important;
}

#screen-1 .home-container-footer {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-self: stretch;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Screen-2: el header es fixed, igual que en screen-1/3; compensar con offset-top */
#home-s2 {
    top: var(--offset-top, 152px) !important; /* Debajo del header fijo */
    justify-content: flex-start !important; /* Arrancar en la parte superior */
    height: calc(100vh - var(--offset-top, 152px)) !important;
    max-height: calc(100vh - var(--offset-top, 152px)) !important;
    overflow-y: auto !important; /* Scroll cuando falte espacio */
    overflow-x: hidden !important;
    box-sizing: border-box !important; /* Incluir padding en el cálculo de altura */
}

/* Screen-3: el header es fixed, necesita offset-top */
#home-s3 {
    top: var(--offset-top, 152px) !important; /* Compensar el header fijo */
    justify-content: flex-start !important; /* Arrancar en la parte superior */
    height: calc(100vh - var(--offset-top, 152px)) !important; /* Altura estática menos el header */
    max-height: calc(100vh - var(--offset-top, 152px)) !important; /* Limitar altura máxima */
    overflow-y: auto !important; /* Scroll cuando falte espacio */
    overflow-x: hidden !important;
    box-sizing: border-box !important; /* Incluir padding en el cálculo de altura */
}

/* Ocultar spacers auxiliares ya que el posicionamiento se maneja con top del contenedor */
.spacer-auxiliar,
.spacer-auxiliar-s3 {
    display: none !important;
}

#home-s3 {
    justify-content: flex-start !important; /* Mostrar el inicio del contenido */
    align-items: center !important;
    height: calc(100vh - var(--offset-top, 152px)) !important; /* Altura estática menos el header */
    max-height: calc(100vh - var(--offset-top, 152px)) !important; /* Limitar altura máxima */
    overflow-y: auto !important; /* Permitir scroll si es necesario */
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    padding: 1rem !important;
    padding-bottom: 100px !important; /* Espacio para el footer fijo */
    position: relative;
}

/* Contenedor para agrupar el contenido principal de screen-3 */
#home-s3 > *:not(.home-footer-screen-2):not(.spacer-auxiliar-s3) {
    flex: 0 0 auto; /* No tomar espacio extra, solo el necesario */
    max-height: none; /* Sin límite, el padding-bottom del contenedor padre maneja el espacio */
}

#home-s3 #preview-wrap {
    flex: 0 0 auto; /* No tomar todo el espacio, solo el necesario */
    width: 100% !important;
    max-width: 720px;
    overflow: hidden;
    margin: 0;
}

#home-s3 #preview-photo {
    width: 100% !important;
    max-width: 720px !important;
    height: auto !important;
    max-height: calc(100vh - var(--offset-top, 152px) - 120px) !important; /* Reducir altura máxima para dejar más espacio al footer */
    object-fit: contain !important;
    margin: 0;
}


.s3-button-row {
    /* Del estilo que enviaste: */
    max-width: 720px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    background-color: transparent; /* Quitar el color rojo de debug */
    flex: 0 0 auto; /* No tomar espacio extra */
}

/* ---- Topbar Screen 3 (volver) ---- */
.s3-topbar {
    max-width: 720px;
    width: 100%;
    margin: 0 auto 12px auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* Botón circular minimalista */
.arrow-btn {
    position: relative;
    width: 32px;
    height: 32px;
    min-width: 32px;
    flex-shrink: 0;
    border: none;
    border-radius: 9999px;
    background: url("../assets/icons/CircleBack.png") center / cover no-repeat;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 150ms ease, transform 120ms ease;
}

.arrow-btn:hover {
    filter: brightness(1.05);
}

.arrow-btn:active {
    transform: scale(0.96);
}

.arrow-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}


#btn-retake-photo {
    padding: 6px 14px;
    border-radius: 10px;
    border: 1px solid #ccc;
    background: #d9dbe2;
    font-weight: 400;
    cursor: pointer;
}


/* Fondos con crossfade */
.home-bg,
.home-bg-next {
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: opacity 450ms ease;
}

.home-bg {
    opacity: 1;
}

.home-bg-next {
    z-index: -2;
    opacity: 0;
}

.home-bg-gradient {
    position: absolute;
    inset: 0;
    top: -300px;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
}

/* Header de la home */
.home-header {
    background: rgba(0, 0, 0, .3);
    display: inline-flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    border: 2px solid #fff;
    border-radius: 8px;
    overflow: hidden;
}

.home-header h1 {
    color: #FFF;
    font-size: 16px;
    margin-left: 16px;
    font-weight: 400;
    line-height: 120%;
    align-self: center;
}

.home-header img {
    background: #fff;
    padding: 4px 16px;
    height: 24px;
    width: auto;
    object-fit: contain;
}

/* Texto de la obra */
.home-artwork {
    margin-left: 8px;
    gap: 2px;
}

.home-artwork h1 {
    color: #FFF;
    font-size: 26px;
    font-weight: 600;
    line-height: 120%;
    margin: 0 0 2px 0;
}

.home-artwork p {
    margin: 0;
    color: #FFF;
    font-size: 14px;
    font-weight: 300;
    line-height: 120%;
}


.artwork-card-wrapper .artwork-card:first-child {
    margin-left: 12px;
}

.artwork-card-wrapper .artwork-card:last-child {
    margin-right: 12px;
}

.artwork-card {
    position: relative;
    flex-shrink: 0; /* Evitar que se compriman en el flex container */
    display: flex;
    flex-direction: column;
}

.home-artwork-container p {
    margin: 0;
    color: white;
    font-size: 14px;
}

.artwork-card > p {
    margin-top: 8px;
}

/* El título de cada obra no debe ensanchar la tarjeta del carrusel */
.home-artwork-container--mobile .artwork-card > p {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Tamaños portrait - ahora se calculan dinámicamente según cm reales */
.artwork {
    /* width se aplica inline desde JS según dimensiones reales */
    height: auto;
    flex-shrink: 0; /* Evitar que se compriman */
}

/* Selección */
.artwork-card .artwork-thumb {
    position: relative;
    display: inline-block;
    border-radius: inherit;
}

.artwork-card .artwork-thumb>img {
    display: block;
}

.artwork-card.is-active .artwork-thumb,
.artwork-card[data-selected="true"] .artwork-thumb {
    box-shadow: 0 0 0 2px #fff;
    border-radius: inherit;
}

/* CTA */
.home-footer {
    display: flex;
    padding-top: 24px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
}

.home-footer button,
.home-footer-screen-2 button {
    font-size: 18px !important; /* Reducir tamaño de fuente */
    font-weight: 700;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px !important; /* Ajustar padding */
    border-radius: 8px;
    cursor: pointer;
    background: #d1d6dc;
    max-width: 520px;
}

/* El botón back NO debe tener width 100% y debe mantener su aspecto visual */
.footer-buttons-row .arrow-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    flex-shrink: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    background: url("../assets/icons/CircleBack.png") center / cover no-repeat !important;
    border-radius: 9999px !important;
    font-size: 0 !important;
    font-weight: normal !important;
}

/* El botón continuar dentro de footer-buttons-row debe ocupar el espacio restante */
.footer-buttons-row button:not(.arrow-btn) {
    flex: 1;
    width: auto !important;
    max-width: none !important;
}

/* SCREEN 2 */
.home-footer-screen-2 {
    display: flex;
    flex-direction: column;
    /* padding-top: 24px; */
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    flex-shrink: 0; /* No permitir que el footer se comprima */
}

/* Fila de botones en el footer */
.footer-buttons-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    max-width: 520px;
}

/* Footer en screen-2: posición fija, siempre visible */
section#screen-2 .home-footer-screen-2 {
    position: fixed !important; /* Posición fija respecto al viewport */
    bottom: 0 !important; /* Fijo al final de la pantalla */
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1000 !important; /* Por encima de todo */
    background: #0b0f17 !important; /* Fondo para que sea visible */
    padding: 12px !important; /* Padding interno */
    box-sizing: border-box !important;
}

/* Footer en screen-3: posición fija, siempre visible */
#home-s3 .home-footer-screen-2 {
    position: fixed !important; /* Posición fija respecto al viewport */
    bottom: 0 !important; /* Fijo al final de la pantalla */
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1000 !important; /* Por encima de todo */
    background: #0b0f17 !important; /* Fondo para que sea visible */
    padding: 12px !important; /* Padding interno */
    box-sizing: border-box !important;
}

section#screen-2,
section#screen-3 {
    background: #0b0f17 !important;
    width: 100%;
    height: 100%;
}

section#screen-2 .home {
    display: flex;
    justify-content: flex-start !important; /* Mostrar contenido desde arriba */
    flex-direction: column;
    align-items: center;
    height: calc(100vh - var(--offset-top, 152px)) !important; /* Debajo del header fijo */
    max-height: calc(100vh - var(--offset-top, 152px)) !important;
    overflow-y: auto; /* Permitir scroll si es necesario */
    overflow-x: hidden;
    padding: 12px; /* Padding uniforme */
    padding-bottom: 120px !important; /* Espacio para el footer fijo */
    box-sizing: border-box; /* Incluir padding en el cálculo de altura */
}

section#screen-2 .home img {
    width: 70% !important; /* Reducir tamaño de imagen */
    margin: 0 auto;
    height: auto;
    max-height: 40vh !important; /* Limitar altura máxima de la imagen */
    object-fit: contain;
}

#screen-2 .home .artwork-selected-container {
    display: flex;
    gap: 8px; /* Reducir gap */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 1 auto; /* No expandir, solo contraer */
    min-height: 0; /* Permitir que se contraiga si es necesario */
    max-height: none; /* Sin límite, el padding-bottom del contenedor padre maneja el espacio */
    overflow-y: visible; /* Sin scroll interno */
    overflow-x: hidden;
    padding: 0 12px;
    margin: 0 auto; /* Centrar horizontalmente */
    width: 90%;
    max-width: 90%;
}

#screen-2 .home .artwork-selected-container button {
    display: block;
    padding: 6px 14px;
    border-radius: 12px;
    background: #d9dbe2;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
}

.selected-artwork {
    border-radius: 0;
    max-height: 35vh !important; /* Reducir altura máxima de imagen */
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto; /* Centrar imagen */
}

#screen-2 .selected-artwork {
    max-height: 40vh; /* En screen-2, más restrictivo */
}

.home-footer button:hover {
    border-color: #AFC1FF;
    box-shadow: 0 0 0 2px rgba(148, 173, 255, 0.25), 0 0 22px rgba(148, 173, 255, 0.30), 0 8px 24px rgba(0, 0, 0, 0.35) inset;
}

.home-footer button:active {
    transform: translateY(1px);
}

.home-footer button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(148, 173, 255, 0.6), 0 0 0 6px rgba(148, 173, 255, 0.2);
    border-color: #C2D0FF;
}

/* Degradado lateral: oculto por defecto */
.gradient-aux {
    position: fixed;
    display: none;
}

/* Utilidad */
.ocultar {
    display: none !important;
}

.home-artwork-container .scroll-arrow-left,
.home-artwork-container .scroll-arrow-right {
    position: absolute;
    top: 50%;
    left: 12px;
    z-index: 10;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    padding: 10px;
    transform: TranslateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
}


.home-artwork-container .scroll-arrow-right {
    left: auto;
    right: 12px;
    transform: TranslateY(-50%) scaleX(-1);
}

.home-artwork-container [class *='scroll-arrow'] img {
    width: 12px;
    height: 12px;
}

.home-artwork-container {
    position: relative;
}

.artwork-card-wrapper {
    margin: 0;
    display: flex;
    overflow-x: scroll;
    overflow-y: hidden;
    column-gap: 8px;
    align-items: start;
    /* Permite compatibilizar gesto horizontal del carrusel con scroll vertical del contenedor */
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
    margin-top: 1rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* border: red 1px solid; */
    margin-right: -12px;
    margin-left: -12px;
    padding-top: 2px;
}

/* ===== Landscape ≥768px ===== */
@media (min-width:768px) and (orientation:landscape) {
    .home {
        display: grid;
        grid-template-rows: auto 1fr auto;
        row-gap: 12px;
        padding: 16px;
    }

    .home-container-footer {
        grid-template-columns: 1.2fr 1fr;
        gap: 16px;
        align-items: start;
    }

    .home-artwork {
        grid-column: 1;
        margin-left: 0;
    }

    .home-artwork-container {
        position: relative;
        grid-column: 2;
        display: grid;
        gap: 8px;
        margin: 0;
        align-items: start;
    }

    .home-artwork-container-left,
    .home-artwork-container-right {
        display: contents;
    }

    .artwork-card {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .home-artwork-container img,
    .artwork-1,
    .artwork-2,
    .artwork-3,
    .artwork-4 {
        width: 100% !important;
        height: auto !important;
        display: block;
    }

    .home-footer {
        grid-column: 1 / -1;
        padding-top: 12px;
    }
}

/* ===== Landscape (carrusel) ===== */
/* @media (orientation:landscape) { */
@media (min-width:768px) and (max-width:945px) and (orientation:landscape) {
    .home {
        display: grid;
        grid-template-columns: minmax(300px, 42vw) 1fr;
        grid-template-rows: auto 1fr auto;
        column-gap: 20px;
        row-gap: 0;
        padding: 12px 0 12px 12px;
        align-items: start;
        z-index: 100000;
    }

    .home-container-footer {
        display: contents;
    }

    .home-header {
        grid-column: 1;
        grid-row: 1;
    }

    .home-artwork {
        position: relative;
        grid-column: 1;
        grid-row: 2;
        margin: 0;
        align-self: end;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding-left: 18px;
    }

    .home-artwork>img:first-child {
        position: absolute !important;
        top: -3px;
        left: 12px;
        margin: 0 !important;
        transform: none !important;
        pointer-events: none;
    }

    .home-artwork h1 {
        margin-top: 2px;
        margin-bottom: 4px;
    }

    .home-artwork p {
        margin-bottom: 0;
    }

    .home-footer {
        grid-column: 1;
        grid-row: 3;
        padding-top: 12px;
    }

    .home-artwork-container {
        grid-column: 2;
        grid-row: 1 / span 3;
        align-self: stretch;
        height: 99%;
        display: flex;
        align-items: flex-end;
        gap: 11px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding: 8px 6px env(safe-area-inset-bottom) 6px;
        --H: calc(100vh - 32px);
        --max: calc(var(--H) - 16px);
        --big: calc(var(--max) * 0.62);
        --med: calc(var(--big) * 0.6667);
        --sm: calc(var(--big) * 0.5);
    }

    .home-artwork-container-left,
    .home-artwork-container-right {
        display: contents;
    }

    .artwork-card {
        padding-left: 2px;
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        scroll-snap-align: start;
    }

    .home-artwork-container img.artwork-1 {
        height: var(--big) !important;
        width: auto !important;
        display: block;
    }

    .home-artwork-container img.artwork-2 {
        height: var(--sm) !important;
        width: auto !important;
        display: block;
    }

    .home-artwork-container img.artwork-3,
    .home-artwork-container img.artwork-4 {
        height: var(--med) !important;
        width: auto !important;
        display: block;
    }

    .home-artwork-container {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .home-artwork-container::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    .home-artwork-container p {
        margin: 4px 0 0 0;
        text-align: left;
    }

    .gradient-aux {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        width: 100px;
        height: 100%;
        z-index: 10;
        pointer-events: none;
        background: linear-gradient(to right, rgba(0, 0, 0, 0.00) 0%, var(--background, rgba(0, 0, 0, 0.90)) 100%);
    }

    .home-artwork-container img,
    .artwork-1,
    .artwork-2,
    .artwork-3,
    .artwork-4 {
        width: 100% !important;
        height: 100% !important;
        display: block;
    }
}

/* ===== Loading overlay ===== */
.loading {
    position: fixed;
    inset: 0;
    background: #fff;
    z-index: 999999;
    display: none;
}

.loading.is-visible {
    display: grid;
    grid-template-rows: auto 1fr;
}

/* Cabecera opcional del loader antiguo */
.loading .home-header-starter {
    background: #fff;
    border: 1.5px solid #E6E8F5;
    border-radius: 10px;
    margin: 12px 12px 8px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.loading .home-header-starter h1 {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    color: #1b1f29;
}

.loading .starter-logo-box img {
    height: 22px;
    width: auto;
    display: block;
}

/* CUERPO del loader (centrado vertical bajo el header fijo) */
.loading .loading-body {
    /* mismo offset que usabas para que no tape el header fijo */
    padding-top: var(--offset-top, 156px);
    /* altura del área restante y centrado perfecto */
    height: calc(100vh - var(--offset-top, 156px));
    display: grid;
    place-items: center;
    /* centra como el spinner anterior, pero exacto */
    padding-left: 12px;
    padding-right: 12px;
    width: 100%;
    max-width: 520px;
    background-color: #fff;
    justify-self: center;
}

/* Antiguos estilos del spinner (no usados ya, pero los dejamos por compat) */
.loading-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 40%;
}

.loading-spinner {
    width: 160px;
    height: 160px;
    border-radius: 12px;
    border: 1.5px solid #E3E8FF;
    display: grid;
    place-items: center;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1);
}

.loading .loading-icon,
.loading .loading-spinner img {
    width: 88px;
    height: 88px;
    display: block;
    animation: spin 1.1s linear infinite;
    will-change: transform;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion:reduce) {

    .loading .loading-icon,
    .loading .loading-spinner img {
        animation: none;
    }
}

/* Panel: rotar a portrait (solo móviles en landscape) - z-index máximo para estar siempre encima */
#portrait-only-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999999;
    background: #0b0f17;
    color: #fff;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
}

#portrait-only-overlay:not(.ocultar) {
    display: flex;
}

#portrait-only-overlay.ocultar {
    display: none !important;
}

#portrait-only-overlay .mobile-only-inner {
    max-width: 400px;
}

.portrait-rotate-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='2' ry='2'/%3E%3Cline x1='12' y1='18' x2='12.01' y2='18'/%3E%3C/svg%3E") center/contain no-repeat;
    animation: portrait-rotate-pulse 1.5s ease-in-out infinite;
}

@keyframes portrait-rotate-pulse {
    0%, 100% { opacity: 1; transform: rotate(-90deg); }
    50% { opacity: 0.8; transform: rotate(-70deg); }
}

#mobile-only-panel {
    position: fixed;
    inset: 0;
    z-index: 30000;
    background: #0b0f17;
    color: #fff;
    /* (ojo: aquí ya NO hay display:flex) */
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
}

#mobile-only-panel:not(.ocultar) {
    display: flex;
}

#mobile-only-panel.ocultar {
    display: none !important;
}

#error-panel {
    position: fixed;
    inset: 0;
    z-index: 30000;
    background: #0b0f17;
    color: #fff;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
}

#error-panel:not(.ocultar) {
    display: flex;
}

#error-panel.ocultar {
    display: none !important;
}

#error-panel .mobile-only-inner {
    max-width: 500px;
}

#error-panel #error-message {
  margin: 1rem 0;
  color: #fca5a5;
  line-height: 1.5;
}

/* Panel de error de generación */
#generation-error-panel {
  position: fixed;
  inset: 0;
  z-index: 30001;
  background: #0b0f17;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

#generation-error-panel:not(.ocultar) {
  display: flex;
}

#generation-error-panel.ocultar {
  display: none !important;
}

#generation-error-panel .mobile-only-inner {
  text-align: center;
  width: 100%;
  max-width: 500px;
  box-sizing: border-box;
}

#generation-error-panel #generation-error-message {
  margin: 1rem 0;
  color: #fca5a5;
  line-height: 1.5;
  word-break: break-word;
  overflow-wrap: anywhere;
}

#generation-error-panel #generation-error-details {
  text-align: left;
  margin-top: 1rem;
  padding: 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.6;
  word-break: break-word;
  overflow-wrap: anywhere;
}

#generation-error-panel #generation-error-details div {
  margin-bottom: 0.5rem;
}

#generation-error-panel #generation-error-details div:last-child {
  margin-bottom: 0;
}

#generation-error-panel #generation-error-details strong {
  color: #fff;
}

#error-retry-btn:hover {
    background: #1d4ed8 !important;
}

.artwork-info {
    text-align: center;
    max-width: 100%;
    word-wrap: break-word;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    color: white;
    max-width: 520px;
}

#artwork-name {
    font-weight: 700;
}

.artwork-selected-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ===== Nuevo loader PING-PONG ===== */
.ai-pingpong {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 520px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid #E6E8FF;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .10);
}

.ai-pp-logo {
    width: 72px;
    height: 72px;
    display: block;
    object-fit: contain;
}

.ai-pp-tip {
    margin: 0;
    font: 400 13px/1.4 Inter, system-ui, sans-serif;
    color: #64748b;
    text-align: center;
    max-width: 320px;
}

.ai-pp-text {
    margin: 0;
    font: 600 16px/1.25 Inter, system-ui, sans-serif;
    color: #111;
    text-align: center;
}

.ai-pp-track {
    --track-w: 260px;
    --track-h: 6px;
    --dot-size: 16px;

    position: relative;
    width: var(--track-w);
    height: var(--track-h);
    border-radius: 9999px;
    background: linear-gradient(90deg, #e8edff 0%, #dfe7ff 100%);
    overflow: hidden;
    border: 1px solid #cfe0ff;
}

.ai-pp-dot {
    position: absolute;
    top: 50%;
    left: 0;
    width: var(--dot-size);
    height: var(--dot-size);
    border-radius: 50%;
    background: #304a9f;
    box-shadow: 0 4px 10px rgba(48, 74, 159, .35);
    transform: translate(0, -50%);
    animation: aiPingPong 1.15s ease-in-out infinite;
}

@keyframes aiPingPong {
    0% {
        transform: translate(0, -50%);
    }

    50% {
        transform: translate(calc(var(--track-w) - var(--dot-size)), -50%);
    }

    100% {
        transform: translate(0, -50%);
    }
}

/* Flechas: animación suave al mostrar/ocultar */
.scroll-arrow-left,
.scroll-arrow-right {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: auto;
}

.scroll-arrow--hidden {
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
}












@media (min-width: 946px) {

    /* ===== Layout general desktop ===== */
    body {
        display: block;
        min-height: 100vh;
        margin: 0;
        overflow-x: hidden;
        background: #020617;
    }

    section[id^="screen-"] {
        min-height: 100vh;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .artia-hero {
        z-index: 100001;
    }

    .artia-hero-inner {
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
        text-align: center;
    }

    .step-title::after {
        position: relative;
        background: #daeac1;
        color: #12375a;
        font-weight: 700;
        font-size: 16px;
        line-height: 1.2;
        padding: 8px 12px;
        width: 100%;
    }

    .artwork {
        /* width se aplica inline desde JS según dimensiones reales */
        max-width: 260px; /* Límite máximo para desktop */
        height: auto;
        object-fit: cover;
    }

    .artwork-selected-container {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 60%;
        align-self: center;
    }

    .selected-artwork {
        width: 100%;
        max-width: 240px;
        height: auto;
        object-fit: contain;
        border-radius: 12px;
    }

    /* Contenedor que agrupa texto (izq) + grid (dcha) */
    .home-container-footer {
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.5fr);
        gap: 24px;
        align-items: flex-start;
        max-height: 25rem;
    }

    /* Columna IZQUIERDA: info de la obra */
    .home-artwork {
        grid-column: 1;
        margin-left: 0;
        align-self: flex-end;
    }

    /* Ocultar carrusel móvil en desktop */
    .home-artwork-container--mobile {
        display: none !important;
    }

    /* Columna DERECHA: contenedor scrollable de cuadros */
    .home-artwork-container--desktop {
        grid-column: 2;
        position: relative;
        width: 100%;
        height: 100%;
        padding: 0 8px 4px;
        overflow-y: scroll;
        overflow-x: hidden;
        scrollbar-gutter: stable;
    }

    /* escritorio mac */
    .home-artwork-container--desktop::-webkit-scrollbar {
        width: 8px;
    }

    .home-artwork-container--desktop::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.25);
    }

    .home-artwork-container--desktop::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.7);
        border-radius: 9999px;
    }


    .home-artwork-container--desktop .scroll-arrow-left,
    .home-artwork-container--desktop .scroll-arrow-right {
        display: none !important;
    }

    /* Grid de cuadros dentro de la columna derecha */
    .artwork-card-grid {
        display: grid;
        width: 100%;
        height: 100%;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        /* 3 columnas en desktop */
        gap: 16px;
        align-content: flex-start;
        justify-items: stretch;
    }

    .home-artwork-container--desktop .artwork-card {
        display: flex;
        flex-direction: column;
        gap: 6px;
        width: 100%;
    }

    .home-artwork-container--desktop .artwork {
        /* width se aplica inline desde JS según dimensiones reales */
        max-width: 100%; /* Asegurar que no se desborde del grid */
        height: auto;
        object-fit: cover;
    }
}

@media (min-width: 946px) and (min-height: 900px) {
    .home-container-footer {
        max-height: 32rem;
        /* para monitores más altos */
    }
}