/* ============================================================
   BotDynamics — variantes responsive y accesibilidad
   Cargar SIEMPRE al final: estas reglas deben poder sobreescribir
   las utilidades base.
   ============================================================ */

/* ---------- Movil: ajustes de densidad ---------- */
@media (max-width: 768px) {
    .grid-lines { background-size: 25% 100%; }
    .flame-mesh {
        filter: blur(34px);
        animation: none;
        transform: none;
    }
    .flame-orb,
    .grain::after {
        animation: none;
        will-change: auto;
    }
    .grain::after {
        inset: 0;
        opacity: .07;
    }

    /* El hero se excluye: necesita despejar el nav fijo (80px) */
    section:not(.hero-section) {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
    .hero-section {
        padding-top: 7.5rem !important;
        padding-bottom: 3.5rem !important;
    }

    a.btn, button.btn { min-height: 48px; }
}

/* Objetivos tactiles del menu movil */
@media (max-width: 1023px) {
    .tap { min-height: 44px; display: flex; align-items: center; }
}

/* En tactil no hay hover: la barra del mosaico queda fija y mas delgada */
@media (hover: none) {
    .tile-bar { width: 5px; transform: scaleY(1); }
}

/* ---------- sm : >= 640px ---------- */
@media (min-width: 640px) {
    .sm\:block      { display: block; }
    .sm\:flex-row   { flex-direction: row; }
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm\:min-h-19r  { min-height: 19rem; }
    .sm\:p-5        { padding: 1.25rem; }
    .sm\:p-7        { padding: 1.75rem; }
    .sm\:px-6       { padding-left: 1.5rem; padding-right: 1.5rem; }
    .sm\:text-13    { font-size: 13px; }
    .sm\:text-xl    { font-size: 1.25rem; line-height: 1.3; }
    .sm\:space-y-4 > * + * { margin-top: 1rem; }
}

/* ---------- md : >= 768px ---------- */
@media (min-width: 768px) {
    .md\:block        { display: block; }
    .md\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .md\:col-span-3   { grid-column: span 3 / span 3; }
    .md\:col-span-4   { grid-column: span 4 / span 4; }
    .md\:col-span-5   { grid-column: span 5 / span 5; }
}

/* ---------- lg : >= 1024px ---------- */
@media (min-width: 1024px) {
    .lg\:block  { display: block; }
    .lg\:flex   { display: flex; }
    .lg\:hidden { display: none; }

    .lg\:sticky { position: sticky; }
    .lg\:top-28 { top: 7rem; }

    .lg\:grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .lg\:auto-rows-13r { grid-auto-rows: 13.5rem; }

    .lg\:col-span-1 { grid-column: span 1 / span 1; }
    .lg\:col-span-3 { grid-column: span 3 / span 3; }
    .lg\:col-span-4 { grid-column: span 4 / span 4; }
    .lg\:col-span-5 { grid-column: span 5 / span 5; }
    .lg\:col-span-6 { grid-column: span 6 / span 6; }
    .lg\:col-span-7 { grid-column: span 7 / span 7; }

    .lg\:col-start-1  { grid-column-start: 1; }
    .lg\:col-start-2  { grid-column-start: 2; }
    .lg\:col-start-3  { grid-column-start: 3; }
    .lg\:col-start-4  { grid-column-start: 4; }
    .lg\:col-start-6  { grid-column-start: 6; }
    .lg\:col-start-7  { grid-column-start: 7; }
    .lg\:col-start-8  { grid-column-start: 8; }
    .lg\:col-start-9  { grid-column-start: 9; }
    .lg\:col-start-12 { grid-column-start: 12; }

    .lg\:row-start-1 { grid-row-start: 1; }
    .lg\:row-start-2 { grid-row-start: 2; }
    .lg\:row-start-3 { grid-row-start: 3; }

    .lg\:order-1 { order: 1; }
    .lg\:order-2 { order: 2; }

    .lg\:gap-0  { gap: 0; }
    .lg\:gap-8  { gap: 2rem; }

    .lg\:p-10   { padding: 2.5rem; }
    .lg\:px-10  { padding-left: 2.5rem; padding-right: 2.5rem; }
    .lg\:py-36  { padding-top: 9rem; padding-bottom: 9rem; }
    .lg\:py-44  { padding-top: 11rem; padding-bottom: 11rem; }

    /* Colapsan el borde con el tile vecino en una sola linea de 1px */
    .lg\:-mr-px { margin-right: -1px; }
    .lg\:-mb-px { margin-bottom: -1px; }
}

/* ---------- Accesibilidad ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .rv-word,
    [data-fade],
    [data-tile] {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
    }
    .rule-draw { transform: scaleX(1) !important; }
}