/* ================================================================
   RESPONSIVE — capa de adaptación (cargar la última para que gane
   en la cascada). El sitio original se maquetó solo para escritorio
   con anchos fijos en px; aquí se colapsan los layouts y se fluidifican
   los tamaños para tablet y móvil.
================================================================ */

/* ── Guarda global anti-overflow (siempre activa) ──
   overflow-x:clip recorta el desborde horizontal SIN crear un contenedor
   de scroll (a diferencia de hidden, que junto al height:100% del reset
   convertía el body en un scroller de altura fija). height:auto anula ese
   height:100% para que la página fluya con su contenido. */
html, body {
    overflow-x: hidden;   /* fallback para navegadores sin overflow:clip (Safari < 16) */
    overflow-x: clip;
    max-width: 100%;
    height: auto;
    min-height: 100%;
}

/* ── Tablet y por debajo: colapsar la rejilla de escritorio ── */
@media (max-width: 1024px) {

    /* Padding de sección razonable y sin alturas forzadas */
    section,
    .centralized-section,
    .entities-section,
    .indexes-section,
    .review-section,
    .model-section,
    .relations-section,
    .review-section {
        padding-left: 6% !important;
        padding-right: 6% !important;
        min-height: auto !important;
    }
    .centralized-section { padding-top: 90px !important; padding-bottom: 90px !important; }

    /* Todos los grids multicolumna conocidos → una sola columna */
    .problem-layout,
    .req-grid,
    .entities-grid,
    .model-container,
    .indexes-grid,
    .entity-grid,
    .centralized-container,
    #demo-cluster {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-areas: none !important;
        gap: 28px !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Contenedores de ancho fijo → fluidos */
    .entities-diagram,
    .review-diagram {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Hero apilado y centrado */
    .hero {
        flex-direction: column;
        height: auto;
        padding: 120px 6% 80px;
        gap: 40px;
        text-align: center;
    }
    .hero-text { align-items: center; max-width: 100%; }
    .hero-text p,
    .hero-text h2 { margin-left: auto; margin-right: auto; }
}

/* ── Red de seguridad: nada debe exceder el viewport ── */
@media (max-width: 1024px) {

    /* tope global: ningún elemento más ancho que su contenedor (reset responsive) */
    body * { max-width: 100%; }

    /* sin alturas de viewport forzadas (dejaban grandes huecos verticales) */
    section, [class*="-section"], .hero { min-height: auto !important; }
    /* diagramas con alto fijo → que crezcan con su contenido apilado */
    .entities-diagram, .review-diagram { height: auto !important; }

    /* contenedores e intros con max-width grande en px → fluidos y centrados */
    .entities-container,
    .relations-container,
    .review-container,
    .model-container,
    .entities-intro,
    .relations-intro,
    .review-intro,
    .indexes-intro {
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* diagramas horizontales muy anchos (flujo de pago, arquitectura):
       contener al viewport y permitir scroll interno en vez de romper la página */
    .payment-flow,
    .arquitectura-grid {
        max-width: 100% !important;
        grid-template-columns: 1fr !important;
        overflow-x: auto !important;
    }
}

/* ── Móvil: fluidificar tipografía y arreglar layouts bespoke ── */
@media (max-width: 768px) {

    /* Titulares fluidos para que no fuercen el ancho de página */
    .hero-text h1 { font-size: clamp(40px, 13vw, 96px) !important; letter-spacing: 1px !important; }
    .model-text h2,
    .entities-section h2,
    .relations-section h2,
    .review-section h2,
    .centralized-text h2,
    .flow-title h2,
    #caso .flow-title h2,
    .indexes-title,
    .req-title,
    #problema .req-title,
    #cockroach .req-title,
    #requisitos .req-title {
        font-size: clamp(30px, 8vw, 52px) !important;
        letter-spacing: 1px !important;
    }

    /* Las líneas decorativas bajo los títulos tienen width fijo (380–820px):
       max-width las acota al viewport sin tener que tocar cada selector. */
    h1::after, h2::after, [class*="title"]::after { max-width: 80vw !important; }

    /* Romper palabras largas en vez de desbordar */
    h1, h2, h3, p, li { overflow-wrap: break-word; }

    /* Código siempre dentro del ancho (con scroll interno si hace falta) */
    pre {
        white-space: pre-wrap !important;
        word-break: break-word;
        overflow-x: auto !important;
        max-width: 100% !important;
    }
    .terminal, .resultado, .raft-log { max-width: 100% !important; }

    /* Tarjetas de ancho fijo → fluidas */
    .req-card, .entity-card, .index-card, .relation-card {
        width: auto !important;
        max-width: 100% !important;
    }

    /* Ilustraciones decorativas posicionadas en absoluto que sangran fuera */
    .req-img { display: none !important; }

    /* ENTIDADES: diagrama SVG + nodo central absoluto → flujo simple */
    .entities-lines { display: none !important; }
    .entities-core {
        position: static !important;
        transform: none !important;
        margin: 0 auto 24px !important;
        padding: 18px 28px !important;
        font-size: 22px !important;
    }
    .entities-grid {
        margin-top: 24px !important;
        gap: 20px !important;
    }

    /* DEMO CLUSTER: la red de 3 nodos en columna */
    .cluster-network { flex-direction: column !important; }
    .demo-title { white-space: normal !important; }

    /* FAQ (.review-diagram): 8 cards posicionadas en absoluto que se
       solapan en móvil → apiladas en columna conservando el flip 3D
       (las caras son absolutas inset:0, así que se mantiene la altura). */
    .review-lines { display: none !important; }
    .review-diagram {
        position: static !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 16px !important;
    }
    .review-center {
        position: static !important;
        transform: none !important;
        margin: 0 auto 8px !important;
    }
    .review-icon { width: clamp(120px, 42vw, 200px) !important; }
    .review-question,
    .review-question.reveal,
    .review-question.reveal.visible {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        height: 150px !important;
        left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
    }

    /* FLOW ("caso práctico"): cabecera 2 col → 1, fila de nodos → columna */
    .flow-header { grid-template-columns: 1fr !important; gap: 28px !important; }
    .payment-flow { flex-direction: column !important; gap: 28px !important; }
    .flow-node { width: 100% !important; max-width: 420px !important; }
    .flow-line { display: none !important; }       /* conector horizontal sin sentido apilado */
    .tinerpay-logo img { width: 100% !important; max-width: 70vw !important; }

    /* Pestañas y contenedores que aún exceden → envolver / acotar */
    .sql-tabs, .setup-tabs { flex-wrap: wrap !important; }
    .install-container, .sql-tabs, .setup-tabs, .crud-container {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Colapso robusto vía flex (gana aunque el grid resista): apila a 1 columna */
    .req-grid, .entity-grid, .entities-grid, .indexes-grid, .problem-layout,
    .setup-two-col, .arch-steps, .arch-bottom, .arch-info-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 20px !important;
    }

    /* Paneles de código a ancho completo con scroll horizontal (no romper por carácter) */
    .setup-panel, .sql-panel, .setup-body, .install-terminal, .crud-panel { width: 100% !important; }
    .setup-panel pre, .sql-panel pre, .index-card pre, .install-terminal pre,
    .crud-panel pre, pre {
        white-space: pre !important;
        overflow-x: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

/* ── DIAGRAMAS BESPOKE EN MÓVIL ────────────────────────────────────────────
   Tres maquetas hechas a medida con anchos fijos y posicionado absoluto que
   no caben en móvil: el diagrama de arquitectura (móvil+API+cluster), la red
   de nodos del cluster y el diagrama de entidades. */
@media (max-width: 768px) {

    /* DIAGRAMA ARQUITECTURA: 3 columnas (300/520/520) → apiladas y centradas */
    .arquitectura-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 32px !important;
    }
    .phone-col { transform: none !important; }
    .api-col, .cluster-col { width: 100% !important; }
    .api-large { max-width: 100% !important; padding: 28px 22px !important; }
    /* .cluster-area es 520x480 con nodos en posición absoluta (px fijos):
       no se puede fluidificar, así que se escala para que quepa en pantalla. */
    .cluster-col { overflow: hidden !important; }
    .cluster-area {
        transform: scale(0.64);
        transform-origin: top center;
        margin-bottom: -165px !important;   /* recupera el hueco que deja el escalado */
    }

    /* DEMO INTERACTIVA (#demo-cluster): red de nodos en columna y botones centrados */
    .cluster-network { flex-direction: column !important; }
    .demo-buttons { justify-content: center !important; }
    #demo-cluster { padding: 24px 14px !important; }

    /* DIAGRAMA ENTIDADES: el SVG y el nodo central absoluto ya se ocultan/centran
       en bloques anteriores; aseguramos que el contenedor crezca con su contenido. */
    .entities-diagram { height: auto !important; margin-top: 24px !important; }

    /* DIAGRAMA BACKEND-ARCH: las 3 capas (frontend/backend/db) en columna,
       con las flechas apuntando hacia abajo. */
    .arch-layers { flex-direction: column !important; align-items: center !important; }
    .arch-arrow-wrap { padding-top: 0 !important; transform: rotate(90deg); }
}