/* =========================
   BASE.CSS — SOLO HEADER & FOOTER
   ========================= */

/* Reset mínimo para evitar herencias raras */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* ===== HEADER (estructura del include) ===== */
.nav-container{
  display:flex; align-items:center; justify-content:flex-start;
  background-color:#a8def3; padding:10px 20px; flex-wrap:wrap;
}
.nav-container img{ height:60px; margin-right:20px; }

.menu{ display:flex; gap:20px; list-style:none; }
.menu li a{ color:#000; text-decoration:none; font-weight:bold; }
.menu-cta{
  background-color:#ff5733; color:#fff; padding:10px 16px; border-radius:6px;
  font-weight:bold; transition: background-color .3s;
}
.menu-cta:hover{ background-color:#e14e2d; }

/* ===== FOOTER (estructura del include) ===== */
.site-footer{
  background:#FFF; color:#000; padding:40px 20px 20px; font-size:.95rem;
  border:2px solid #2196F3; border-radius:2px; -webkit-font-smoothing: antialiased;
}
.footer-top{
  max-width:1200px; margin:auto; display:flex; flex-wrap:nowrap;
  justify-content:space-evenly; gap:25px;
}
.footer-bottom{
  max-width:1200px; margin:30px auto 0; text-align:center;
  padding-top:25px; border-top:1px solid #ddd;
}
.footer-col{ flex:1 1 220px; }
.footer-left{  text-align:left;  display:flex; flex-direction:column; gap:8px; }
.footer-menu{ text-align:left; display:flex; flex-direction:column; gap:8px; }
.footer-legal{ text-align:left; display:flex; flex-direction:column; gap:8px; }
.footer-center{ text-align:center; display:flex; flex-direction:column; gap:10px; align-items:center; }
.footer-right{  text-align:right; display:flex; flex-direction:column; gap:10px; align-items:flex-end; }

/* Navegación del footer */
.footer-nav{ display:flex; flex-direction:column; gap:6px; }
.footer-nav a{ color:#2196F3; text-decoration:none; padding:2px 0; font-size:.9rem; }
.footer-nav a:hover{ text-decoration:underline; color:#003a4a; }
.footer-menu h4, .footer-legal h4{ color:#2196F3; margin:0 0 8px; font-size:1rem; font-weight:600; }

.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:70px; }
.brand h4{ color:#2196F3; font-size:1.2rem; margin:0; }

.info-line{ display:flex; align-items:center; gap:8px; margin:4px 0; }
.info-line img{ width:16px; height:16px; }
.info-line a{ color:#2196F3; text-decoration:none; }
.info-line a:hover{ text-decoration:underline; color:#003a4a; }

.hours{ color:#666; font-size:.85rem; margin-top:8px; }

.social-icons{ display:flex; gap:8px; margin:10px 0; }
.social-icons a{ display:block; transition:opacity .3s; }
.social-icons a:hover{ opacity:.7; }
.social-icons img{ width:24px; height:24px; }

.payment-mark{ margin-top:10px; }
.payment-mark img{ max-width:200px; height:auto; border-radius:4px; }

.mitur{ width:80px; height:auto; margin-bottom:10px; }
.mitur-text{ color:#666; font-size:.85rem; line-height:1.4; text-align:center; }
.copyright{ color:#999; font-size:.8rem; margin-top:15px; }

/* Responsive Footer */
@media (max-width:768px){
  .footer-top{
    flex-direction:column; text-align:center; gap:20px;
  }
  .footer-left, .footer-menu, .footer-legal, .footer-right{
    text-align:center; align-items:center;
  }
  .footer-right{ align-items:center; }
  .social-icons{ justify-content:center; }
}

/* Header adjustments */
.main-header{
  background:linear-gradient(135deg,#003366 0%,#004d80 50%,#0066b3 100%);
  color:white; padding:1rem 0; position:relative; z-index:100;
  box-shadow:0 2px 15px rgba(0,51,102,0.3);
}

.header-container{
  max-width:1200px; margin:0 auto; padding:0 1rem;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
}

.header-logo{ height:50px; }

.header-menu-container{ display:flex; align-items:center; gap:1rem; }

.mobile-menu-button{
  background:#ff5733; color:white; border:none; padding:8px 12px;
  border-radius:6px; cursor:pointer; font-size:18px; display:none;
}

.mobile-menu{
  background:white; border-radius:8px; padding:1rem; margin-top:0.5rem;
  box-shadow:0 4px 20px rgba(0,0,0,0.1);
}
.mobile-menu a{
  display:block; padding:0.5rem 0; color:#333; text-decoration:none;
  border-bottom:1px solid #eee;
}
.mobile-menu a:hover{ color:#ff5733; }
.mobile-section-title{ font-weight:bold; color:#003366; display:block; margin:0.5rem 0; }

@media (max-width:768px){
  .mobile-menu-button{ display:block !important; }
  .header-container{ flex-direction:column; gap:1rem; }
}