/* Mobile-first overrides – file: assets/css/mobile.css */
/* comments in english */

/* Hide mobile-only elements by default (desktop/tablet) */
.only-mobile { display: none; }

/* Base: smaller typography, comfortable line-height */
@media screen and (max-width: 736px) {
  html, body {
    font-size: 16px;
    line-height: 1.6;
    background: #0f1113;
    color: #f5f7fa;
  }

  /* Header: compact, centered brand, hidden desktop nav */
  #header {
    background: rgba(15, 17, 19, 0.95);
    box-shadow: none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  #header h1 a, #header h1 { color: #f5f7fa; }

  /* Sections: remove parallax feel, add solid backgrounds */
  .main {
    background-attachment: scroll !important;
  }

  /* Intro: clean hero with darker overlay via solid color */
  #intro {
    background: #0f1113 !important;
  }

  /* Content boxes: add translucent dark card look */
  .box {
    background: rgba(255,255,255,0.06) !important;
    color: #f5f7fa !important;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(4px);
  }
  .box.style2 { background: rgba(255,255,255,0.08) !important; }

  /* Buttons: flat, high-contrast */
  .button, button, input[type="submit"], input[type="button"], input[type="reset"] {
    background-color: #0ea5e9 !important;
    border: none !important;
    color: #0b1220 !important;
  }
  .button.style2 { border-color: rgba(255,255,255,0.2) !important; }

  /* Typography scale */
  h2 { font-size: 1.6rem !important; }
  p { font-size: 1rem !important; }

  /* Gallery: single column, larger touch targets, no transitions */
  .gallery { gap: 12px; }
  .gallery article {
    width: 100% !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .image:before { display: none; }

  /* Mobile inline heroes visible only on small screens */
  .only-mobile { display: block !important; }
  .image.fit.only-mobile { display: block !important; }
  .image.fit.mobile-hero.only-mobile { display: block !important; }
  .mobile-hero { margin-bottom: 1rem; }
  .mobile-hero img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
  }

  /* Background images in sections: switch to contained images or none */
  #one, #two {
    background: #0f1113 !important;
  }

  /* Work section (Mi Trabajo): black text on light background */
  #work, #work .content, #work h2, #work p, #work a {
    color: #0b0d0f !important;
  }

  /* Forms: clear contrast */
  input, textarea, select {
    border-color: rgba(255,255,255,0.2) !important;
    color: #f5f7fa !important;
  }
  ::placeholder { color: rgba(245,247,250,0.6); }

  /* Footer */
  #footer { background: #0b0d0f !important; color: rgba(245,247,250,0.6) !important; }
  #footer a { color: #c2e9ff !important; }

  /* Contact: dark background and high-contrast fields */
  #contact { background: #0f1113 !important; }
  #contact .box {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
  }
  #contact input,
  #contact textarea,
  #contact select {
    background-color: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.25) !important;
    color: #f5f7fa !important;
  }
  #contact ::placeholder { color: rgba(245,247,250,0.8) !important; }
}