/* Mobile fixes - deveam.es - v2.0 */

/* === MOBILE HEADER FIX - Cabecera cuadrada y alineada === */
@media(max-width:968px){
/* Mobile menu toggle - button approach (checkbox removed) */
.nav-links.nav-open{ display:flex!important; flex-direction:column!important; position:absolute!important; top:100%!important; left:0!important; right:0!important; background:white!important; padding:16px!important; box-shadow:0 10px 30px rgba(0,0,0,0.15)!important; gap:4px!important; border-radius:0 0 8px 8px!important; z-index:999!important; animation:slideDown 0.3s ease-out!important; }
.mobile-toggle{ display:flex!important; align-items:center!important; justify-content:center!important; width:48px!important; height:48px!important; border-radius:10px!important; background:rgba(30,41,59,0.06)!important; border:none!important; color:#1e293b!important; font-size:1.6rem!important; cursor:pointer!important; position:relative!important; z-index:1001!important; -webkit-tap-highlight-color:rgba(0,0,0,0.1)!important; user-select:none!important; -webkit-user-select:none!important; }

  /* Nav container - perfect alignment */
  nav .container{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    padding:0 16px!important;
    min-height:56px!important;
    position:relative!important;
  }
  /* Logo perfectly centered vertically */
  .logo{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    font-size:1.4rem!important;
    flex-shrink:0!important;
  }
  .logo-icon{
    width:36px!important;
    height:36px!important;
    font-size:1.1rem!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:8px!important;
  }
  /* Hamburger toggle - perfectly squared and aligned */
  .mobile-toggle{ display:flex!important; align-items:center!important; justify-content:center!important; width:44px!important; height:44px!important; border-radius:10px!important; background:rgba(30,41,59,0.06)!important; border:none!important; color:#1e293b!important; font-size:1.5rem!important; cursor:pointer!important; position:relative!important; z-index:1001!important; touch-action:manipulation!important; -webkit-tap-highlight-color:transparent!important; pointer-events:auto!important; }
  .mobile-toggle:active{
    background:rgba(16,185,129,0.15)!important;
    transform:scale(0.95)!important;
  }
  /* Nav CTA hidden on mobile - use hamburger */
  .nav-cta{display:none!important}
  /* Mobile menu - clean dropdown */
  .nav-links{
    width:calc(100% - 32px)!important;
    left:16px!important;
    right:16px!important;
    padding:16px!important;
    border-radius:12px!important;
    box-shadow:0 8px 32px rgba(0,0,0,0.12)!important;
    border:1px solid rgba(0,0,0,0.06)!important;
  }
  .nav-links a{
    padding:14px 16px!important;
    font-size:1rem!important;
    border-radius:8px!important;
    transition:background 0.2s!important;
  }
}

@media(max-width:768px){
  /* Topbar compacto y centrado */
  .topbar{padding:4px 0!important;font-size:11px!important;line-height:1.3!important}
  .topbar .container{flex-direction:row!important;flex-wrap:wrap!important;padding:0 12px!important;gap:2px 10px!important;align-items:center!important;justify-content:center!important}
  .topbar-left{gap:4px 10px!important;font-size:11px!important;flex-wrap:wrap!important;justify-content:center!important}
  .topbar-left span{white-space:nowrap}
  .topbar-right{display:none!important}

  /* Fuentes legibles */
  body{font-size:16px!important}
  h1,.hero h1,.hero-content h1{font-size:1.7rem!important;line-height:1.2!important}
  h2,.section-title,section h2{font-size:1.4rem!important;line-height:1.3!important}
  h3{font-size:1.15rem!important}
  p,li,.card p,.feature p,section p{font-size:0.95rem!important;line-height:1.6!important}
  .hero p,.hero-content p{font-size:1rem!important}

  /* Hero visual - cards stack properly */
  .hero-visual{margin-top:20px!important}
  .hero-card{width:100%!important;padding:16px!important;border-radius:12px!important}

  /* Stats row */
  .hero-stats{gap:12px!important;flex-wrap:wrap!important;justify-content:center!important}
  .hero-stat .num{font-size:1.3rem!important}

  /* Services grid */
  .services-grid{grid-template-columns:1fr!important;gap:20px!important}
  .service-card{border-radius:12px!important}

  /* Blog grid */
  .blog-grid{grid-template-columns:1fr!important;gap:20px!important}

  /* Contact */
  .contact-grid{grid-template-columns:1fr!important}
  .form-row{flex-direction:column!important;gap:12px!important}

  /* Footer */
  .footer-grid{grid-template-columns:1fr!important;text-align:center!important}
  .footer-bottom{flex-direction:column!important;gap:12px!important;text-align:center!important}
}

@media(max-width:480px){
  .hero-buttons{flex-direction:column!important;gap:10px!important}
  .hero-buttons .btn{width:100%!important;text-align:center!important;justify-content:center!important}
  .topbar{font-size:10px!important}
  .counter-grid{grid-template-columns:1fr 1fr!important}
}

/* ===== iOS Safari hamburger fix ===== */
.mobile-toggle,
.hamburger {
  display: none;
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  padding: 8px 12px;
  z-index: 10001;
  position: relative;
  color: #1a2332;
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
}

@media (max-width: 968px) {
  .mobile-toggle,
  .hamburger {
    display: block !important;
  }
}

/* ===== Blog card image fix for Safari ===== */
.blog-card {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden;
  border-radius: 12px;
}
.blog-card-img {
  height: 200px !important;
  min-height: 200px !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  display: block !important;
  width: 100% !important;
}

@media (max-width: 968px) {
  html #blog-preview .container>div:not(.section-header):not(.blog-card-img):not(.blog-card-content) {
    display: block !important;
  }
  #blog-preview .container {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }
  #blog-preview .container > .section-header {
    display: block !important;
  }
  .blog-card-img {
    height: 180px !important;
    min-height: 180px !important;
  }
}
/* CSS-only hamburger toggle */
#nav-check:checked ~ .nav-links {
  display: flex !important;
  flex-direction: column !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  background: white !important;
  padding: 16px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
  gap: 4px !important;
  border-radius: 0 0 8px 8px !important;
  z-index: 999 !important;
  animation: slideDown 0.3s ease-out !important;
}
#nav-check {
  display: none !important;
}
label.mobile-toggle, label.hamburger {
  -webkit-tap-highlight-color: rgba(0,0,0,0.1) !important;
  touch-action: manipulation !important;
}