/*
 * MOBILE-SIMPLE.CSS
 * Versión móvil completamente simplificada
 * Filosofía: SIMPLICIDAD, CONFIABILIDAD, FUNCIONALIDAD
 */

/* ==========================================
   SOLO PARA MÓVILES (≤768px)
   ========================================== */

@media (max-width: 768px) {
  
  /* ========================================
     1. OCULTAR SLIDERS COMPLETAMENTE
     ======================================== */
  
  .kenburns-section,
  .vegas-container,
  .vegas-wrapper,
  .vegas-slide,
  .vegas-overlay,
  .slider-container,
  [class*="slider"],
  [class*="carousel"],
  [class*="vegas"],
  [class*="kenburn"],
  .owl-carousel,
  .swiper-container {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
  }
  
  /* Ocultar headers con backgrounds complejos */
  header.bg-img,
  header[data-overlay-dark],
  .header-section,
  .header-slider,
  .hero-section {
    display: none !important;
  }
  
  /* ========================================
     2. CONTENEDOR DE IMAGEN MÓVIL
     ======================================== */
  
  .mobile-hero-image {
    width: 100%;
    height: auto;
    display: block !important;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
  }
  
  .mobile-hero-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain; /* Cambiado de cover a contain para mostrar imagen completa */
    max-height: none; /* Removido límite de altura para no cortar la imagen */
  }
  
  /* ========================================
     3. CONTENEDOR DE TEXTO MÓVIL
     ======================================== */
  
  .mobile-content {
    background: #ffffff;
    padding: 30px 20px;
    text-align: center;
    width: 100%;
    display: block !important;
    position: relative;
  }
  
  .mobile-content * {
    max-width: 100%;
  }
  
  /* ========================================
     4. TEXTO VISIBLE Y LEGIBLE
     ======================================== */
  
  .mobile-content h1,
  .mobile-content h2,
  .mobile-content h3,
  .mobile-content h4,
  .mobile-content h5,
  .mobile-content h6,
  .mobile-content p,
  .mobile-content li,
  .mobile-content span,
  .mobile-content a,
  .mobile-content div {
    color: #2c3e50 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 1 !important;
  }
  
  /* Sin sombras de texto que puedan causar problemas */
  .mobile-content * {
    text-shadow: none !important;
  }
  
  /* ========================================
     5. TAMAÑOS DE FUENTE LEGIBLES
     ======================================== */
  
  .mobile-content h1 {
    font-size: 22px !important; /* Reducido de 28px a 22px para evitar desbordamiento */
    line-height: 1.3 !important;
    margin-bottom: 20px !important;
    font-weight: 700 !important;
    word-wrap: break-word !important; /* Prevenir overflow */
    overflow-wrap: break-word !important; /* Prevenir overflow */
  }
  
  .mobile-content h2 {
    font-size: 24px !important;
    line-height: 1.3 !important;
    margin-bottom: 18px !important;
    font-weight: 600 !important;
  }
  
  .mobile-content h3 {
    font-size: 20px !important;
    line-height: 1.4 !important;
    margin-bottom: 16px !important;
    font-weight: 600 !important;
  }
  
  .mobile-content h4 {
    font-size: 18px !important;
    line-height: 1.4 !important;
    margin-bottom: 14px !important;
    font-weight: 500 !important;
  }
  
  .mobile-content p {
    font-size: 16px !important;
    line-height: 1.6 !important;
    margin-bottom: 15px !important;
    font-weight: 400 !important;
  }
  
  .mobile-content li {
    font-size: 16px !important;
    line-height: 1.6 !important;
    margin-bottom: 10px !important;
  }
  
  /* ========================================
     6. BOTONES
     ======================================== */
  
  .mobile-content .btn,
  .mobile-content a.btn,
  .mobile-content button {
    display: inline-block !important;
    padding: 12px 30px !important;
    margin: 10px 5px !important;
    font-size: 16px !important;
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border: 2px solid #1a1a1a !important;
    border-radius: 5px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
  }
  
  .mobile-content .btn:hover,
  .mobile-content a.btn:hover,
  .mobile-content button:hover {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
  }
  
  /* ========================================
     7. MENÚ HAMBURGUESA
     ======================================== */
  
  /* Mostrar botón hamburguesa */
  .navbar-toggler {
    display: block !important;
    background-color: transparent !important;
    border: none !important; /* CORREGIDO: Removido el borde para que no tenga marco */
    padding: 8px 12px !important;
    cursor: pointer !important;
    border-radius: 4px !important;
  }
  
  /* Icono de 3 rayas */
  .navbar-toggler-icon {
    display: block !important;
    width: 25px !important;
    height: 2px !important;
    background-color: #1a1a1a !important;
    position: relative !important;
  }
  
  /* CORREGIDO: Ocultar el icono de fuente para que solo se vean las 3 barras CSS */
  .navbar-toggler-icon i {
    display: none !important;
  }
  
  .navbar-toggler-icon::before,
  .navbar-toggler-icon::after {
    content: '' !important;
    display: block !important;
    width: 25px !important;
    height: 2px !important;
    background-color: #1a1a1a !important;
    position: absolute !important;
    left: 0 !important;
  }
  
  .navbar-toggler-icon::before {
    top: -8px !important;
  }
  
  .navbar-toggler-icon::after {
    bottom: -8px !important;
  }
  
  /* Menú colapsado por defecto */
  .navbar-collapse {
    display: none !important;
    width: 100% !important;
    background-color: #ffffff !important;
    padding: 20px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
  }
  
  /* Menú expandido */
  .navbar-collapse.show {
    display: block !important;
  }
  
  /* Items del menú vertical */
  .navbar-nav {
    flex-direction: column !important;
    width: 100% !important;
  }
  
  .nav-item {
    width: 100% !important;
    margin: 5px 0 !important;
  }
  
  .nav-link {
    color: #2c3e50 !important;
    font-size: 16px !important;
    padding: 10px 15px !important;
    display: block !important;
    text-decoration: none !important;
    border-bottom: 1px solid #f0f0f0 !important;
  }
  
  .nav-link:hover {
    background-color: #f8f9fa !important;
    color: #1a1a1a !important;
  }
  
  /* ========================================
     8. IMÁGENES Y LOGOS
     ======================================== */
  
  .mobile-content img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 15px auto !important;
  }
  
  /* Logo UNAM */
  .mobile-content img[src*="unam"] {
    max-width: 150px !important;
  }
  
  /* ========================================
     9. LISTAS
     ======================================== */
  
  .mobile-content ul,
  .mobile-content ol {
    padding-left: 20px !important;
    margin-bottom: 20px !important;
    text-align: left !important;
    display: block !important;
  }
  
  /* ========================================
     10. FORMULARIOS
     ======================================== */
  
  .mobile-content form {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .mobile-content input,
  .mobile-content textarea,
  .mobile-content select {
    width: 100% !important;
    padding: 12px !important;
    margin-bottom: 15px !important;
    font-size: 16px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
  }
  
  .mobile-content textarea {
    min-height: 120px !important;
    resize: vertical !important;
  }
  
  /* ========================================
     11. SECCIONES Y DIVS
     ======================================== */
  
  .mobile-content section,
  .mobile-content .section,
  .mobile-content .row,
  .mobile-content .col {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 0 !important;
    margin: 0 !important;
  }
  
  /* ========================================
     12. ASEGURAR QUE NO HAY OVERFLOW
     ======================================== */
  
  body {
    overflow-x: hidden !important;
  }
  
  .mobile-hero-image,
  .mobile-content,
  .mobile-content * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* ========================================
     13. FOOTER
     ======================================== */
  
  footer {
    width: 100% !important;
    padding: 30px 20px !important;
    text-align: center !important;
    background-color: #f8f9fa !important;
  }
  
  footer p,
  footer a {
    font-size: 14px !important;
    color: #666 !important;
    line-height: 1.6 !important;
  }
  
  /* ========================================
     14. UTILIDADES DE ESPACIADO
     ======================================== */
  
  .mobile-content .mb-1 { margin-bottom: 10px !important; }
  .mobile-content .mb-2 { margin-bottom: 20px !important; }
  .mobile-content .mb-3 { margin-bottom: 30px !important; }
  .mobile-content .mt-1 { margin-top: 10px !important; }
  .mobile-content .mt-2 { margin-top: 20px !important; }
  .mobile-content .mt-3 { margin-top: 30px !important; }
  
  /* ========================================
     15. OCULTAR ELEMENTOS DECORATIVOS
     ======================================== */
  
  .bg-img,
  .bg-image,
  .parallax,
  .video-background,
  [data-background],
  [data-overlay-dark],
  [data-overlay-light] {
    background-image: none !important;
    background-color: #ffffff !important;
  }
  
  /* ========================================
     16. ASEGURAR VISIBILIDAD DE CONTENIDO
     ======================================== */
  
  .mobile-content {
    min-height: auto !important;
    height: auto !important;
  }
  
  .mobile-content > * {
    position: relative !important;
    z-index: 10 !important;
  }
}

/* ==========================================
   CORRECCIONES AGRESIVAS - VERSIÓN FINAL
   Estas reglas SOBRESCRIBIRÁN TODO con !important
   ========================================== */

@media (max-width: 768px) {
  
  /* ========================================
     CORRECCIÓN 1: IMAGEN COMPLETA EN ABOUT.HTML
     - La imagen 1c.jpg debe mostrarse COMPLETA
     - Sin zoom, sin cortes
     ======================================== */
  
  .mobile-hero-image {
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    max-height: none !important;
  }
  
  .mobile-hero-image img,
  .mobile-hero-image img[src*="1c.jpg"],
  img[src*="1c.jpg"] {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    margin: 0 auto !important;
    padding: 0 !important;
    transform: none !important;
    scale: 1 !important;
  }
  
  /* ========================================
     CORRECCIÓN 2: REDUCIR TEXTO "MIS ANTECEDENTES"
     - Texto muy grande que desborda
     - Reducir drásticamente el tamaño
     ======================================== */
  
  .mobile-content h1,
  .mobile-content h2,
  .mobile-content h3,
  .mobile-content h4 {
    font-size: 18px !important;
    line-height: 1.4 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding: 0 15px !important;
    margin: 10px 0 !important;
    box-sizing: border-box !important;
  }
  
  /* Títulos específicos que causan problemas */
  .mobile-content h3,
  .titulo-antecedentes {
    font-size: 16px !important;
    font-weight: 600 !important;
  }
  
  /* ========================================
     CORRECCIÓN 3: TÍTULO EN SERVICES.HTML
     - "Asistencia jurídica personalizada" muy grande
     - Reducir tamaño drásticamente
     ======================================== */
  
  .mobile-content h1,
  .mobile-content .titulo-principal,
  .mobile-content h1:first-of-type {
    font-size: 18px !important;
    line-height: 1.3 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    padding: 0 15px !important;
    margin: 15px 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }
  
  /* ========================================
     CORRECCIÓN 4: MENÚ HAMBURGUESA SIEMPRE VISIBLE
     - Header sticky en la parte superior
     - Menú visible desde el inicio (sin scroll)
     ======================================== */
  
  /* Navbar sticky */
  .navbar,
  nav.navbar,
  header,
  .header,
  nav {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    background: #1a1a2e !important;
    width: 100% !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Asegurar que el botón hamburguesa sea visible */
  .navbar-toggler,
  .navbar-toggler-icon,
  button.navbar-toggler {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 10000 !important;
    background: transparent !important;
  }
  
  /* ========================================
     CORRECCIÓN 5: REMOVER MARCO DEL MENÚ
     - Sin bordes cuando se selecciona el menú
     - Sin outline, sin box-shadow
     ======================================== */
  
  .navbar-toggler,
  .navbar-toggler:focus,
  .navbar-toggler:active,
  .navbar-toggler:hover,
  button.navbar-toggler,
  button.navbar-toggler:focus,
  button.navbar-toggler:active,
  button.navbar-toggler:hover {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
  }
  
  /* Remover borde del menú desplegado */
  .navbar-collapse,
  .navbar-collapse.show,
  .navbar-collapse.collapsing {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
  }
  
  /* Remover cualquier border/outline de Bootstrap */
  .navbar-toggler:not(:disabled):not(.disabled) {
    border: none !important;
    outline: none !important;
  }
  
  /* ========================================
     CORRECCIÓN ADICIONAL: PREVENIR OVERFLOW
     ======================================== */
  
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  
  .mobile-content,
  .mobile-content *,
  .mobile-hero-image,
  .mobile-hero-image * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* ========================================
     CORRECCIÓN ADICIONAL: TEXTO VISIBLE
     ======================================== */
  
  .mobile-content h1,
  .mobile-content h2,
  .mobile-content h3,
  .mobile-content h4,
  .mobile-content h5,
  .mobile-content h6,
  .mobile-content p,
  .mobile-content span,
  .mobile-content div,
  .mobile-content li,
  .mobile-content a {
    color: #2c3e50 !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    text-shadow: none !important;
  }
  
  /* ========================================
     CORRECCIÓN ADICIONAL: PÁRRAFOS LEGIBLES
     ======================================== */
  
  .mobile-content p {
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin-bottom: 15px !important;
    padding: 0 15px !important;
    text-align: justify !important;
  }
}

/* ==========================================
   FIN DE CORRECCIONES AGRESIVAS
   ========================================== */

/* ==========================================
   FIN DE ESTILOS MÓVILES
   ========================================== */