/* ========== DISPOSITIVOS PEQUEÑOS (Mobile First) ========== */
@media (max-width: 575.98px) {
  /* Ajustes generales */
  body {
    font-size: 14px;
  }
  
  /* Navbar */
  .navbar-brand img {
    height: 40px;
  }
  
  /* Hero Section */
  .abacus-hero h1 {
    font-size: 2rem;
  }
  
  /* Carrusel */
  .carousel-item img {
    height: 250px;
  }
  
  /* Cards de Beneficios */
  .benefit-card {
    margin-bottom: 15px;
  }
  
  /* Sección de Estadísticas */
  #estadisticas h3 {
    font-size: 2rem;
  }
  
  #estadisticas p {
    font-size: 1rem;
  }
  
  /* Ciclos y Temarios */
  .ciclo-card {
    height: auto;
    flex-direction: column;
    margin-bottom: 20px;
  }
  
  .ciclo-card > div {
    width: 100% !important;
  }
  
  /* Testimonios Hexagonales */
  .hexagon-wrapper {
    width: 70px !important;
    height: 70px !important;
  }
  
  .hexagon-inner {
    width: 60px !important;
    height: 60px !important;
  }
}

/* ========== DISPOSITIVOS MEDIANOS (Tablets) ========== */
@media (min-width: 576px) and (max-width: 991.98px) {
  /* Ajustes generales */
  body {
    font-size: 15px;
  }
  
  /* Hero Section */
  .abacus-hero h1 {
    font-size: 2.5rem;
  }
  
  /* Carrusel */
  .carousel-item img {
    height: 350px;
  }
  
  /* Sección de Beneficios */
  .benefit-card {
    margin-bottom: 20px;
  }
  
  /* Testimonios */
  .testimonial-card {
    margin-bottom: 20px;
  }
  
  /* Footer */
  .footer-premium .row > div {
    padding: 2rem !important;
  }
}

/* ========== DISPOSITIVOS GRANDES (Desktop) ========== */
@media (min-width: 992px) {
  /* Efectos especiales solo para desktop */
  .desktop-only-effect {
    transform: translateY(0);
    transition: transform 0.4s ease;
  }
  
  .desktop-only-effect:hover {
    transform: translateY(-10px);
  }
  
  /* Ajustes de secciones específicas */
  .abacus-hero {
    min-height: 80vh;
    display: flex;
    align-items: center;
  }
}

/* ========== AJUSTES ESPECÍFICOS PARA LANDSCAPE ========== */
@media (max-width: 991.98px) and (orientation: landscape) {
  .abacus-hero {
    padding: 50px 0;
  }
  
  .carousel-item img {
    height: 300px;
  }
  
  /* Reducir altura de secciones */
  section {
    padding: 50px 0 !important;
  }
}

/* ========== DISPOSITIVOS EXTRA GRANDES ========== */
@media (min-width: 1400px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: 1350px;
  }
  
  /* Aumentar tamaño de tipografía */
  h1 {
    font-size: 3.5rem;
  }
  
  .lead {
    font-size: 1.5rem;
  }
}

/* ========== AJUSTES PARA IMPRESIÓN ========== */
@media print {
  .navbar, .footer, .chatbot-container {
    display: none !important;
  }
  
  body {
    font-size: 12pt;
    color: #000;
    background: none;
  }
  
  .container {
    width: auto;
    max-width: 100%;
    padding: 0;
  }
  
  section {
    page-break-inside: avoid;
    padding: 20pt 0 !important;
  }
  
  .card {
    border: 1pt solid #ddd !important;
    box-shadow: none !important;
  }
}