/* ============================================================
   RESPONSIVE — estrategia por orientación
   - Tablet horizontal (landscape, >1024 ancho): se comporta como desktop
   - Tablet vertical (portrait) y móvil: layout apilado
   - <480px: ajustes finos para iPhone SE
   Usamos un media query con OR para que tablet portrait reciba todo
   el tratamiento "móvil". El split SQL y el manifesto sí necesitan un
   ajuste también en landscape estrecho (≤1024), por eso van aparte.
   ============================================================ */

/* ============================================================
   TABLET ESTRECHO (≤1024px) — solo lo justo
   En landscape solo rompemos el split SQL (necesita >1024 para encajar)
   y el manifesto a 1 columna. El resto sigue siendo desktop.
   ============================================================ */
@media (max-width: 1024px) {
    .split-scheme-section {
        flex-direction: column;
        padding-right: 0;
        width: 100%;
        margin-right: 0;
    }

    .split-left,
    .split-right {
        width: 100%;
        min-height: 50vh;
        margin: 0;
        padding: 3rem 2rem;
        clip-path: none;
    }

    .split-left    { justify-content: flex-end; }
    .giant-sql {
        font-size: 40vw;
        transform: translateY(0);
        /* Espacio entre el título y el texto marketing para que no
           se solapen al pasar a flex-column. */
        margin-bottom: 1.5rem;
    }
    /* La imagen ocupa todo el polaroid para que no haya tanto marco */
    .tower-graphic { width: 100%; transform: rotate(0deg); }

    .manifesto        { grid-template-columns: 1fr; gap: 3rem; padding: 6rem 3rem; }
    .manifesto-visual { height: 50vh; }

    .exp-grid { gap: 1.5rem; }
}

/* ============================================================
   "MOBILE-LIKE": móviles + tablet en vertical (portrait)
   Aquí reseteamos casi todo el posicionamiento absoluto y apilamos
   las secciones complejas en columna.
   ============================================================ */
@media (max-width: 768px),
       (max-width: 1024px) and (orientation: portrait) {

    /* ---- Globales ---- */
    html { font-size: 14px; }

    *,
    *::before,
    *::after { cursor: auto; }

    .cursor,
    .cursor-follower,
    .marquee-container { display: none; }

    section { padding-right: 0; }

    .mega-title         { font-size: 18vw; }
    .mega-title.outline { -webkit-text-stroke-width: 1px; }

    /* ---- Intro ---- */
    .intro-word { font-size: clamp(2.5rem, 12vw, 5rem); width: 90%; }

    /* ---- Hero ---- */
    .hero-cover.neo-folklore {
        padding: 1.5rem 1.5rem 6rem 1.5rem;
        min-height: 100vh;
    }

    .sacred-center  { width: 62vw; height: 62vw; }
    .sacred-halo    { width: 82vw; height: 82vw; }


    .meta-header {
        font-size: 1rem;
        gap: 0.5rem;
        padding-bottom: 0.6rem;
        top: 1.2rem;
        letter-spacing: 0.15em;
    }

    .meta-separator { display: none; }

    .meta-footer {
        flex-direction: row;
        padding-right: 0;
        bottom: 1rem;
        width: calc(100% - 3rem);
        font-size: 0.85rem;
    }

    .footer-col h3 { font-size: 1rem; margin-bottom: 0.2rem; }
    .footer-col p  { font-size: 0.8rem; }

    .pop-sticker { font-size: 1rem; padding: 0.5rem 1.1rem; }
    .sticker-1   { top: 14%;   right: 5%; }
    .sticker-2   { bottom: 20%; left: 5%; }
    .sticker-3   { top: 22%;   left: 5%; }

    .folklore-scroll        { display: none; }
    .folklore-scroll-mobile { display: flex; }

    /* ---- Manifiesto ---- */
    .manifesto         { display: block; padding: 4rem 2rem; }
    .manifesto-visual  { height: 40vh; margin-bottom: 2rem; }
    .manifesto-header  { font-size: 2.5rem; padding-top: 0; }
    .manifesto-body    { font-size: 1.1rem; }

    .sticker {
        position: relative;
        top: 0;
        left: 0;
        display: inline-block;
        margin-bottom: 1rem;
        transform: rotate(-4deg);
    }

    /* ---- Fashion ---- */
    .fashion    { height: 70vh; }
    .fashion-bg { object-position: 52% center; }

    /* ---- Spreads (chaos) ---- */
    .spread {
        display: flex;
        flex-direction: column;
        padding: 2.5rem 1.5rem 3.5rem;
        min-height: auto;
        gap: 2.5rem;
        align-items: center;
        overflow: visible;
        background: var(--cream);
    }

    .spread.ai-spread { background: var(--intense-red); }

    .spread .has-tape,
    .spread .spread-text-block {
        position: relative;
        left: auto; right: auto; top: auto; bottom: auto;
        width: 88%;
        max-width: 100%;
        align-self: center;
        transform: none;
    }

    .spread-text-block {
        width: 100%;
        padding: 1.5rem;
        box-shadow: 8px 8px 0 var(--noir);
    }

    .spread-img {
        position: relative;
        width: 100%;
        height: 48vw;
        object-fit: cover;
        box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.25);
    }

    /* En móvil todas las imágenes van en color por defecto: el hover
       no existe en táctil, así que el filtro grayscale no aporta. */
    .spread-img,
    .manifesto-img,
    .tower-graphic,
    .sacred-statue,
    .postman-img,
    .ai-bigdata-img,
    .finale-bg,
    .fashion-bg {
        filter: none;
    }

    /* La estatua del hero pierde el grayscale pero mantiene contraste */
    .sacred-statue { filter: contrast(1.05); }

    .spread-img.main-img {
        height: 64vw;
        object-position: top center;
    }

    /* Python spread: vuelve a flex column, intercalando imagen-texto */
    .python-spread {
        display: flex;
        flex-direction: column;
        gap: 2.5rem;
        padding: 2.5rem 1.5rem 3.5rem;
    }

    .python-spread > .python-img-wrap { order: 1; width: 88%; align-self: center; transform: none; }
    .python-spread > .python-text     { order: 2; width: 100%; transform: none; }
    .python-spread > .mongo-img-wrap  { order: 3; width: 88%; align-self: center; transform: none; }
    .python-spread > .mongo-text      { order: 4; width: 100%; transform: none; }

    .sticker-tag { font-size: 0.65rem; white-space: nowrap; padding: 0.4rem 0.8rem; }
    .wild-title  { font-size: 3.5rem; }

    .diagonal-stripe,
    .vertical-text,
    .mega-overlay-text { display: none; }

    /* ---- AI spread ---- */
    .ai-spread {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 3rem 1.5rem 4rem;
        min-height: auto;
        gap: 2.5rem;
    }

    .ai-spread .has-tape,
    .ai-spread .ai-sidebar,
    .ai-spread .big-data-info,
    .ai-spread .sticker-tag,
    .ai-spread .ai-giant-title {
        position: relative;
        top: auto; right: auto; bottom: auto; left: auto;
        transform: none;
        width: 100%;
    }

    .ai-spread .has-tape .spread-img {
        width: 100%;
        height: 50vw;
        object-fit: cover;
    }

    .ai-spread .ai-statue-wrap        { width: 92%; order: 2; }
    .ai-spread .ai-statue-wrap .spread-img {
        height: 110vw;
        object-position: top center;
    }

    .ai-spread .ai-vol {
        align-self: flex-end;
        transform: rotate(3deg);
        margin-bottom: -1rem;
        width: auto;
    }

    .ai-spread .ai-bigdata-wrap {
        width: 60%;
        align-self: flex-start;
        transform: rotate(-3deg);
        order: 5;
    }

    .ai-spread .ai-bigdata-img {
        opacity: 1;
        mix-blend-mode: normal;
    }

    .ai-giant-title {
        font-size: 18vw;
        text-align: center;
        order: 3;
        white-space: normal;
        line-height: 0.85;
    }

    .ai-spread .big-data-info { order: 4; transform: rotate(-1deg); }
    .ai-spread .ai-sidebar    { order: 6; }

    /* ---- API finale ---- */
    .api-finale {
        display: flex;
        flex-direction: column-reverse;
        background: var(--noir);
        padding: 3rem 1.5rem;
        gap: 2rem;
    }

    .giant-split-title.left,
    .giant-split-title.right { display: none; }

    .terminal-box,
    .sticky-note-box {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        margin: 2rem auto;
        transform: none;
        width: 100%;
        max-width: 100%;
    }

    .api-finale .postman-img-wrap {
        position: relative;
        width: 100%;
        max-width: 100%;
        transform: none;
    }

    .api-finale .corner-stamp {
        position: relative;
        align-self: flex-end;
    }

    /* ---- Article body: una sola columna ---- */
    .article-body { columns: 1; text-align: left; }

    /* ---- Experiencia ---- */
    .experience-chaos { padding: 4rem 1.5rem; }
    .exp-grid         { grid-template-columns: 1fr; padding: 0 1rem; gap: 1.5rem; }
    .exp-card         { padding: 2rem; transform: rotate(0deg); }
    .exp-number       { font-size: 5rem; }

    /* ---- Timeline ---- */
    .timeline-section { padding: 4rem 1.5rem; }
    .timeline-mega    { font-size: 18vw; }
    .timeline         { padding-left: 2rem; }
    .timeline-item    { flex-direction: column; gap: 0.5rem; }
    .timeline-year    { text-align: left; min-width: auto; }
    .timeline-item::before { left: -2rem; }

    /* ---- Grand finale ---- */
    .grand-finale     { padding: 4rem 1rem 6rem 1rem; }
    .finale-name      { font-size: 30vw; }
    .finale-quote     { font-size: 1.2rem; }
    .finale-year      { right: 1rem; }
    .finale-link      { width: 100%; text-align: center; }
    .finale-marquee .marquee-track { font-size: 0.6rem; }
}

/* ============================================================
   MÓVIL PEQUEÑO (≤480px) — ajustes finos iPhone SE
   ============================================================ */
@media (max-width: 480px) {
    html { font-size: 13px; }

    .sacred-center  { width: 60vw; height: 60vw; }
    .sacred-halo    { width: 80vw; height: 80vw; }

    .meta-header    { font-size: 1rem; letter-spacing: 0.12em; }

    .manifesto-header { font-size: 2rem; }

    .wild-title       { font-size: 3rem; }
    .wild-title--md   { font-size: 3rem; }
    .ai-giant-title   { font-size: 4.5rem; }
    .giant-split-title{ font-size: 6rem; }

    .exp-number       { font-size: 4rem; }

    .finale-name      { font-size: 35vw; }
    .finale-quote     { font-size: 1rem; }
    .finale-link      { font-size: 0.75rem; padding: 0.6rem 1rem; }

    .timeline { padding-left: 1.5rem; }
}