/* ============================================================
   TELEMETRY INSIGHT · RESPONSIVE · adaptaciones globales para tablet, móvil y reduced-motion
   ============================================================ */

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:980px){
  .present-grid{grid-template-columns:1fr;gap:34px}
  .present-visual{aspect-ratio:16/10;max-height:420px}
  .contact-grid{grid-template-columns:1fr}
  .contact-visual{min-height:220px}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .footer-top{grid-template-columns:1fr 1fr;gap:32px}
  .footer-brand{grid-column:1/-1}
}
@media(max-width:760px){
  .nav-links{display:none}
  .burger{display:flex}
  .mobile-menu{display:block;position:fixed;inset:0 0 0 auto;width:min(320px,84vw);z-index:80;
    background:var(--bg-panel);border-left:1px solid color-mix(in srgb,var(--overlay) 10%,transparent);
    transform:translateX(100%);transition:transform .3s;padding:90px 26px 40px;overflow-y:auto}
  .mobile-menu.open{transform:translateX(0)}
  /* Tema e idioma: en escritorio viven en la barra (.nav-tools, oculta desde 900px);
     aquí se repiten para que sigan alcanzables una vez que el menú de escritorio desaparece. */
  .mm-tools{display:flex;align-items:center;gap:10px;padding:0 4px 18px;margin-bottom:18px;
    border-bottom:1px solid color-mix(in srgb,var(--overlay) 7%,transparent)}
  .mm-tools .lang-btn{flex:1}
  .mobile-menu a{display:block;padding:14px 4px;font-size:1.05rem;border-bottom:1px solid color-mix(in srgb,var(--overlay) 7%,transparent);color:var(--text-light)}
  .mobile-menu a .tag{font-size:.7rem;color:var(--accent);margin-left:6px}
  .mm-heading{font-family:'Mont',sans-serif;font-size:.68rem;font-weight:700;text-transform:uppercase;
    letter-spacing:.14em;color:var(--brand-bright);margin:22px 0 4px;padding:0 4px}
  .mm-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:75}
  .mm-backdrop.open{display:block}
  .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger.open span:nth-child(2){opacity:0}
  .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .cat-grid{grid-template-columns:1fr}
  .switch-opt{padding:12px 22px}
  .present-stats{gap:18px}
  .carousel-controls{bottom:16px;gap:12px;padding:7px 12px}
  .footer-top{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;text-align:center}
  .wa-float{bottom:18px;right:18px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.05ms!important}
  .promo-track{animation:none;position:static;justify-content:center}
}

/* ============================================================
   REFUERZO RESPONSIVE — QA de desajustes en móvil
   Ajustes finos para móviles medianos y pequeños, y prevención
   de desbordamientos horizontales.
   ============================================================ */

/* --- Prevención global de desbordes horizontales --- */
html,body{max-width:100%;overflow-x:hidden}
img,video,svg{max-width:100%;height:auto}
*{min-width:0}

/* --- Móvil mediano (hasta 600px) --- */
@media(max-width:600px){
  /* El hero/carrusel baja de altura para no comer toda la pantalla */
  .carousel{height:clamp(460px,82vh,560px)}
  .slide-content{max-width:100%;padding-right:8px}
  .slide h1{font-size:clamp(2rem,8vw,2.8rem)}
  .slide p{font-size:clamp(.98rem,4vw,1.1rem)}
  /* Contenedores con padding lateral cómodo */
  .wrap,.container,section{padding-left:18px;padding-right:18px}
  /* Botones a ancho cómodo, sin desbordar */
  .slide-cta,.btn{width:auto;max-width:100%}
  /* Tarjetas del catálogo a una columna con buen aire */
  .cat-grid{gap:16px}
  /* Estadísticas en columna si aprietan */
  .present-stats{flex-wrap:wrap;gap:14px}
}

/* --- Móvil pequeño (hasta 400px) --- */
@media(max-width:400px){
  .slide h1{font-size:clamp(1.8rem,9vw,2.3rem);line-height:1.08}
  .brand-logo .txt span{font-size:.58rem;letter-spacing:.28em}
  /* Evita que tablas o precios se salgan */
  .plan-price,.plan-card{word-break:break-word}
  /* Menú móvil ocupa un poco más para dedos grandes */
  .mobile-menu{width:min(300px,90vw)}
}

/* --- Ajuste de imágenes de tarjeta en móvil (evita recortes raros) --- */
@media(max-width:760px){
  .cat-card__img,.blog-card__img{aspect-ratio:16/10}
  .cat-card__img img,.blog-card__img img{width:100%;height:100%;object-fit:cover}
}