/* ===============================================
   MOBILE-ONLY DESKTOP CLONE via MEDIA QUERIES
   - Forces desktop look (1280px width) on phones
   - Scales per common viewport widths (no JS)
   - Forces light mode on mobile only
   - Desktop (>1024px) = NO EFFECT
   =============================================== */

@media (max-width: 1024px) {
  :root { color-scheme: light; }
  @media (prefers-color-scheme: dark) {
    :root { color-scheme: light !important; }
  }

  html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
            text-size-adjust: 100%;
  }
  body { width: 1280px; transform-origin: top left; }
}

/* Ranged fallbacks */
@media (max-width: 320px) { body { transform: scale(0.25); min-height: calc(100dvh / 0.25); } }
@media (min-width: 321px) and (max-width: 360px) { body { transform: scale(0.28125); min-height: calc(100dvh / 0.28125); } }
@media (min-width: 361px) and (max-width: 375px) { body { transform: scale(0.29296875); min-height: calc(100dvh / 0.29296875); } }
@media (min-width: 376px) and (max-width: 390px) { body { transform: scale(0.3046875); min-height: calc(100dvh / 0.3046875); } }
@media (min-width: 391px) and (max-width: 412px) { body { transform: scale(0.321875); min-height: calc(100dvh / 0.321875); } }
@media (min-width: 413px) and (max-width: 428px) { body { transform: scale(0.334375); min-height: calc(100dvh / 0.334375); } }
@media (min-width: 429px) and (max-width: 480px) { body { transform: scale(0.375); min-height: calc(100dvh / 0.375); } }
@media (min-width: 481px) and (max-width: 540px) { body { transform: scale(0.421875); min-height: calc(100dvh / 0.421875); } }
@media (min-width: 541px) and (max-width: 576px) { body { transform: scale(0.45); min-height: calc(100dvh / 0.45); } }
@media (min-width: 577px) and (max-width: 600px) { body { transform: scale(0.46875); min-height: calc(100dvh / 0.46875); } }
@media (min-width: 601px) and (max-width: 640px) { body { transform: scale(0.5); min-height: calc(100dvh / 0.5); } }
@media (min-width: 641px) and (max-width: 720px) { body { transform: scale(0.5625); min-height: calc(100dvh / 0.5625); } }
@media (min-width: 721px) and (max-width: 768px) { body { transform: scale(0.6); min-height: calc(100dvh / 0.6); } }
@media (min-width: 769px) and (max-width: 820px) { body { transform: scale(0.640625); min-height: calc(100dvh / 0.640625); } }
@media (min-width: 821px) and (max-width: 912px) { body { transform: scale(0.7125); min-height: calc(100dvh / 0.7125); } }
@media (min-width: 913px) and (max-width: 960px) { body { transform: scale(0.75); min-height: calc(100dvh / 0.75); } }
@media (min-width: 961px) and (max-width: 1024px) { body { transform: scale(0.8); min-height: calc(100dvh / 0.8); } }

@media (max-width: 1024px) { body { -webkit-transform: translateZ(0); } }

/* --- Calibrated exact widths (override fallbacks when matched) --- */
@media (width: 320px) { body { transform: scale(0.25); min-height: calc(100dvh / 0.25); } }
@media (width: 360px) { body { transform: scale(0.28125); min-height: calc(100dvh / 0.28125); } }
@media (width: 375px) { body { transform: scale(0.29296875); min-height: calc(100dvh / 0.29296875); } }
@media (width: 384px) { body { transform: scale(0.3); min-height: calc(100dvh / 0.3); } }
@media (width: 390px) { body { transform: scale(0.3046875); min-height: calc(100dvh / 0.3046875); } }
@media (width: 393px) { body { transform: scale(0.30703125); min-height: calc(100dvh / 0.30703125); } }
@media (width: 400px) { body { transform: scale(0.3125); min-height: calc(100dvh / 0.3125); } }
@media (width: 411px) { body { transform: scale(0.32109375); min-height: calc(100dvh / 0.32109375); } }
@media (width: 412px) { body { transform: scale(0.321875); min-height: calc(100dvh / 0.321875); } }
@media (width: 414px) { body { transform: scale(0.3234375); min-height: calc(100dvh / 0.3234375); } }
@media (width: 428px) { body { transform: scale(0.334375); min-height: calc(100dvh / 0.334375); } }
@media (width: 430px) { body { transform: scale(0.3359375); min-height: calc(100dvh / 0.3359375); } }
@media (width: 432px) { body { transform: scale(0.3375); min-height: calc(100dvh / 0.3375); } }
@media (width: 440px) { body { transform: scale(0.34375); min-height: calc(100dvh / 0.34375); } }
@media (width: 450px) { body { transform: scale(0.3515625); min-height: calc(100dvh / 0.3515625); } }
@media (width: 460px) { body { transform: scale(0.359375); min-height: calc(100dvh / 0.359375); } }
@media (width: 480px) { body { transform: scale(0.375); min-height: calc(100dvh / 0.375); } }
@media (width: 540px) { body { transform: scale(0.421875); min-height: calc(100dvh / 0.421875); } }
@media (width: 568px) { body { transform: scale(0.44375); min-height: calc(100dvh / 0.44375); } }
@media (width: 575px) { body { transform: scale(0.44921875); min-height: calc(100dvh / 0.44921875); } }
@media (width: 600px) { body { transform: scale(0.46875); min-height: calc(100dvh / 0.46875); } }
@media (width: 640px) { body { transform: scale(0.5); min-height: calc(100dvh / 0.5); } }
@media (width: 667px) { body { transform: scale(0.52109375); min-height: calc(100dvh / 0.52109375); } }
@media (width: 720px) { body { transform: scale(0.5625); min-height: calc(100dvh / 0.5625); } }
@media (width: 768px) { body { transform: scale(0.6); min-height: calc(100dvh / 0.6); } }
@media (width: 800px) { body { transform: scale(0.625); min-height: calc(100dvh / 0.625); } }
@media (width: 820px) { body { transform: scale(0.640625); min-height: calc(100dvh / 0.640625); } }
@media (width: 834px) { body { transform: scale(0.6515625); min-height: calc(100dvh / 0.6515625); } }
@media (width: 844px) { body { transform: scale(0.659375); min-height: calc(100dvh / 0.659375); } }
@media (width: 853px) { body { transform: scale(0.66640625); min-height: calc(100dvh / 0.66640625); } }
@media (width: 896px) { body { transform: scale(0.7); min-height: calc(100dvh / 0.7); } }
@media (width: 900px) { body { transform: scale(0.703125); min-height: calc(100dvh / 0.703125); } }
@media (width: 912px) { body { transform: scale(0.7125); min-height: calc(100dvh / 0.7125); } }
@media (width: 926px) { body { transform: scale(0.7234375); min-height: calc(100dvh / 0.7234375); } }
@media (width: 960px) { body { transform: scale(0.75); min-height: calc(100dvh / 0.75); } }
@media (width: 1024px) { body { transform: scale(0.8); min-height: calc(100dvh / 0.8); } }


/* --- FIX: eliminar espacio entre #proyecto y el footer (solo esto) --- */
#proyecto { margin-bottom: 0 !important; padding-bottom: 0 !important; }
#proyecto > .container, #proyecto > .content, #proyecto .container:last-child { margin-bottom: 0 !important; padding-bottom: 0 !important; }
#proyecto + footer { margin-top: 0 !important; padding-top: 0 !important; }
/* Si hay un div separador entre #proyecto y el footer, sin tocar su contenido: */
#proyecto + *:not(footer) { margin-bottom: 0 !important; padding-bottom: 0 !important; height: auto !important; }
#proyecto + *:not(footer) + footer { margin-top: 0 !important; padding-top: 0 !important; }