/* Móvil: redes al final y en fila (opcional) */
@media (max-width:760px){
footer .socials{
    order:2;
    flex-direction:row;
    }
}
@media (prefers-reduced-motion:reduce){ .btn,.card{ transition:none } }

/* Ajuste en pantallas pequeñas: controles un poco más chicos */
@media (max-width: 576px){
    #carouseltestimonios { --ctrlW: 2.2rem; }
}

/* =========================================
   Herramientas — SOLO MÓVILES
   (deja desktop igual)
========================================= */
@media (max-width: 768px){
  .hero{ 
    background: radial-gradient(700px 700px at 80% -80px, #8eff87 0, transparent 70%), 
    linear-gradient(120deg, #ecfff0 0%, #ebffef 40%, #f6fff8 100%);
    /* radial-gradient(850px 650px at -10% 40%, #8eff87  0, transparent 60%),  */
    
  }
}

/* ===== Medios fluidos SOLO en móvil ===== */
@media (max-width: 768px){
  img, svg, video, canvas {
    max-width: 100%;
    height: auto;
  }
}

/* En desktop: no capar el ancho de las imágenes por defecto */
@media (min-width: 769px){
  img, svg, video, canvas {
    height: auto;     /* mantiene proporción */
    max-width: none;  /* permite tamaño natural */
  }
}

@media (max-width: 576px){
  .laptop, img.laptop {
    width: min(100%, 460px);
  }
}

/* Contenedores con padding más chico en móvil */
@media (max-width: 576px){
  .container-title,
  .container-data,
  .container-packages,
  .container-coment {
    padding-left: 14px;
    padding-right: 14px;
  }
}

@media (max-width: 760px){
  .brand img{ width: 104px; }

  .kicker{
    font-size: 13px;
  }

  /* Apilar columnas del header y permitir que los links se muevan en scroll horizontal */
  .site-nav .row{
    flex-wrap: wrap;
    align-items: center;
  }

  /* Mostrar los links en móvil como carrusel horizontal (sin JS) */
  .nav-links{
    display: flex !important;           /* anula el display:none que tenías */
    order: 3;                            /* envía los links debajo */
    width: 100%;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6px 0 2px;
    scrollbar-width: thin;
  }
  .nav-links a{
    white-space: nowrap;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: .45rem .7rem;
    font-weight: 700;
    font-size: .95rem;
  }

  /* Botón login se mantiene visible a la derecha */
  .btn.btn-login{
    margin-left: auto;
    padding: .5rem .9rem;
    font-size: .95rem;
  }

  /* Dropdown más usable en pantallas angostas */
  .dropdown-menu{
    min-width: 220px !important;
    border-radius: 14px !important;
  }
}

@media (max-width: 760px){
  footer .links{
    margin-left: 0;          /* anula el empuje grande en móvil */
    gap: 8px;
  }
  footer .socials{
    order: 2;
    flex-direction: row;
    gap: 12px;
  }
  footer .socials a{
    font-size: 1.4rem;
  }
  footer small{
    font-size: .95rem;
  }
  footer img{
    width: 120px;
    height: auto;
  }
}

/* ===== Tablas/Resultados (por si hay tablas dentro del contenido) ===== */
@media (max-width: 576px){
  table{ display: block; width: 100%; overflow-x: auto; }
}

@media (max-width: 520px){
  .tool-circle{ width: 92px; height: 92px; }
}

/* Teléfonos en general (≤ 640px) */
@media (max-width: 640px){
  /* Fondo y espacios más compactos */
  .tools{
    padding: 40px 0 36px;
    background-position: 65% 0;   /* centra mejor la imagen en móvil */
    background-size: cover;        /* por si algún navegador ignora shorthand */
  }

  .tools .intro{ 
    margin-bottom: 18px; 
    padding: 0 6px; 
  }
  .tools-title{ 
    font-size: 1.4rem; 
  }
  .tools-subtitle{
    font-size: .95rem; 
    line-height: 1.45; 
    padding: 0 8px;
  }

  /* 2 columnas y menos espacio entre items */
  .tools-grid-round{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  /* Botones redondos un poco más chicos (mantienen el borde dorado) */
  .tool-circle{
    width: 104px;
    height: 104px;
    box-shadow: 0 6px 16px rgba(0,0,0,.18);
  }
  .tool-circle::before{ padding: 2px; }

  /* Tamaño de icono/imagen interno */
  .tool-img{  width: 76%; height: 76%; }
  .tools-img{ font-size: 42px; }

  /* Texto bajo el botón */
  .tool-title{ font-size: .95rem; }

  /* Badge “Pronto” dentro del círculo para que no se corte */
  .tool-badge{
    top: 2px;
    right: 8px;
    transform: none;
  }
}

/* Teléfonos muy pequeños (≤ 360px): 1 columna */
@media (max-width: 360px){
  .tools-grid-round{
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .tool-circle{ width: 96px; height: 96px; }
  .tools-img{ font-size: 38px; }
  .tool-title{ font-size: .9rem; }
}

  /* ===== Sidebar móvil ===== */
@media (max-width: 760px){
    .nav-links{ display:none !important; } /* ocultar nav de escritorio */
}

  /* Teléfonos muy angostos: un poquito más ancho */
@media (max-width: 360px){
  .offcanvas{ --bs-offcanvas-width: 92vw; }
}

/* No se rompa en 2 filas en desktop */
@media (min-width: 761px){
  .site-nav .row{ flex-wrap: nowrap; }
}

/* Botón del header: visible en desktop, oculto en móvil */
.header-login{ display: inline-flex; }
@media (max-width: 760px){
  .header-login{ display: none !important; }
}

@media (min-width: 768px){
  #carouselPaquetesDesktop{ display:block !important; }
  #carouselPaquetesMobile{  display:none  !important; }
}
@media (max-width: 767.98px){
  #carouselPaquetesDesktop{ display:none  !important; }
  #carouselPaquetesMobile{  display:block !important; }
}

@media (max-width: 330px){
  #carouselPaquetesMobile .paquete {
    height: 345px;
  }

   #carouseltestimoniosMobile .coment {
    height: 450px;
    align-content: center;
  }  
}

@media (max-width: 300px){
  #carouselPaquetesMobile .paquete {
    height: 345px;
  }
}

/* Tarjetas más compactas en phone */
@media (max-width:576px){
  .pricing{ padding:28px 0 48px; }
  .price-card{ padding:18px; border-radius:16px; }
  .price-card h3{ font-size:1.2rem; }
  .price{ font-size:1.4rem; margin:2px 0 10px; }
  .price-card ul{ font-size:.95rem; padding-left:16px; }
}


@media (min-width: 768px){
  #carouseltestimonios{ display:block !important; }
  #carouseltestimoniosMobile{  display:none  !important; }
}
@media (max-width: 767.98px){
  #carouseltestimonios{ display:none  !important; }
  #carouseltestimoniosMobile{  display:block !important; }
}

  /* Responsividad de modal*/
  @media (max-width: 576px) {
    .modal-dialog {
    margin: 10px;
    }
            
  .modal-header,
  .modal-body {
    padding: 20px;
    }
            
  .rate-card {
    flex-direction: column;
    text-align: center;
    gap: 16px;
    }
            
  .rate-info {
    flex-direction: column;
    gap: 12px;
  }
            
  .rate-value {
      font-size: 1.5rem;
    }
  }