/* ==========================================================================
   responsive.css — breakpoints y correcciones de celular

   Breakpoints usados:
     >= 1180px  escritorio: nav horizontal, sidebar del dashboard, tabla ancha
     <  1180px  hamburguesa, riel de tabs, cards en vez de tabla
     <=  900px  el CTA del header se va al menú (dejaba de entrar en la barra)
     <=  760px  celular
     <=  430px  celular chico
   ========================================================================== */

/* ==========================================================================
   < 1180px — se activa la navegación móvil y el dashboard compacto
   ========================================================================== */
@media (max-width: 1179.98px) {
  .nav-desktop { display: none; }
  .nav-toggle  { display: grid; }
  .nav-island  { display: none; }

  /* El dashboard pierde el sidebar y usa el riel de tabs horizontal */
  .dashboard__nav { display: none; }
  .tab-rail       { display: flex; }

  /* La tabla de 9 columnas no entra: se reemplaza por cards */
  .repo-table { display: none; }
  .repo-cards { display: grid; }

  /* CTA fijo del pie + botón "volver arriba" levantado para no pisarse */
  .sticky-cta { display: block; }
  .back-to-top { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}

/* ==========================================================================
   <= 900px — barra del header
   FIX: el CTA "Quiero conocer Analock" (nowrap, ~200px) más el logo y el
   botón de 46px no entraban en la barra: se apretaban entre sí y empujaban
   el hamburguesa fuera del viewport. Acá el CTA pasa al menú desplegable,
   donde ya está como botón principal, y abajo queda el CTA fijo.
   ========================================================================== */
@media (max-width: 900px) {
  .site-header__bar { gap: 12px; padding: 12px 18px; }
  .btn--header { display: none; }
  .brand__name { font-size: 19px; }
}

/* ==========================================================================
   <= 760px — celular
   ========================================================================== */
@media (max-width: 760px) {
  :root { --gutter: 18px; }

  .section { padding-inline: var(--gutter); }

  /* --- FIX: los CTAs del hero quedaban enormes --------------------------
     Antes: flex 1 1 240px + font-size 17px + padding 16px 26px y, al forzar
     width 100%, quedaban dos bloques gigantes uno arriba del otro.
     Ahora: apilados, ancho completo, pero con tamaño de botón normal. */
  .cta-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .cta-row .btn {
    flex: 0 0 auto;
    width: 100%;
    font-size: 16px;
    padding: 14px 20px;
    min-height: 52px;
    border-radius: var(--r-md);
  }

  .hero__note { margin-bottom: 22px; }

  /* El badge flotante del mockup se salía del borde en pantalla chica */
  .hero__float {
    right: 8px;
    bottom: -14px;
    padding: 8px 12px;
  }
  .hero__float span { font-size: 12px; }

  /* Footer centrado */
  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: 26px;
    text-align: center;
  }
  .site-footer__brand { justify-content: center; }
  .site-footer__desc { margin-inline: auto; }
  .site-footer h3,
  .site-footer__links a,
  .site-footer__links span { text-align: center; }

  /* Tarjetas de "Experiencia previa": una por fila, sin mínimos que desborden */
  .stat-card,
  .stat-card--wide { flex: 1 1 100%; }

  .grid--two-col { gap: 28px; }

  .panel-navy { gap: 24px; }

  /* La barra de progreso de "Exceso / Adecuado / Faltante" se apila */
  .meter {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .meter__value { text-align: left; }

  .dashboard__main { padding: 14px; }
  .tab-rail { margin-inline: -14px; padding-inline: 14px; }

  /* El selector de días pasa a ocupar su propia línea completa */
  .panel-head { gap: 10px; }
  .range-switch {
    margin-left: 0;
    width: 100%;
    justify-content: space-between;
  }
  .range-switch button { flex: 1; }

  .detail { padding: 14px; }
  .detail__horizon { margin-left: 0; width: 100%; }

  .decision__options button { flex: 1 1 calc(50% - 4px); }

  /* Formulario */
  .form-steps span { font-size: 12px; padding: 9px 8px; }
  .form-actions .btn--back,
  .form-actions .btn--submit { flex: 1 1 100%; }

  .value-props { gap: 14px; }
}

/* ==========================================================================
   <= 430px — celular chico
   ========================================================================== */
@media (max-width: 430px) {
  .section { padding-block: 44px; }
  .section--hero { padding-block: 32px 44px; }

  .h1 { font-size: 34px; letter-spacing: -1.2px; }
  .h2 { font-size: 27px; letter-spacing: -.8px; }

  .card { padding: 20px; }
  .step { padding: 20px; }
  .form-card { padding: 18px; border-radius: var(--r-xl); }
  .mock { border-radius: var(--r-lg); }

  .cta-row .btn { font-size: 15.5px; padding: 13px 18px; }

  .nav-mobile { margin-inline: 14px; }

  /* Los chips se ajustan al texto y se reparten la fila; los largos la ocupan
     entera solos. `max-width: 100%` en .chip evita que se salgan de la card. */
  .chip-group { gap: 8px 6px; }
  .chip-group .chip { flex: 0 1 auto; justify-content: flex-start; }

  /* Las 3 métricas de la card de producto se vuelven ilegibles en 3 columnas */
  .repo-card__stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  .decision__options button { flex: 1 1 100%; }

  .kpi-row { padding: 12px; gap: 8px; }
  .kpi__value { font-size: 20px; }

  .form-steps { gap: 6px; }
  .form-steps span { font-size: 11.5px; padding: 8px 6px; }

  .form-success h3 { font-size: 22px; }

  .site-footer__legal { font-size: 12px; }
}

/* ==========================================================================
   Ajustes finos por altura / orientación
   ========================================================================== */
@media (max-height: 480px) and (orientation: landscape) {
  /* En apaisado el CTA fijo se come media pantalla: se oculta */
  .sticky-cta { display: none; }
  .back-to-top { bottom: 20px; }
}

/* ==========================================================================
   >= 1500px — monitores grandes
   ========================================================================== */
@media (min-width: 1500px) {
  .section { padding-block: 116px; }
  .grid--two-col { gap: 80px; }
}

/* ==========================================================================
   Impresión
   ========================================================================== */
@media print {
  .site-header, .nav-island, .back-to-top, .sticky-cta, .nav-mobile { display: none !important; }
  .section { padding-block: 20px; }
  .dashboard, .form-card, .mock { box-shadow: none; }
}