/**
 * SismoRed - Responsive Architecture & Mobile 9:16 Hierarchy
 */

/* ═══ TABLETS Y PANTALLAS MEDIANAS (<= 992px) ═══ */
@media (max-width: 992px) {
  .hero-section-container {
    gap: 36px;
    padding: 56px 0 52px;
  }
}

/* ═══ MÓVILES Y PANTALLAS VERTICALES 9:16 (<= 768px) ═══ */
@media (max-width: 768px) {
  .content-wrapper,
  .content-wrapper-legal {
    padding: 0 16px !important;
  }

  /* Una sola barra: el logotipo y los tres enlaces en la misma fila. Antes los
     enlaces iban a un renglón aparte y la cabecera se comía 202 px de los 812
     de un móvil antes de que empezara nada. */
  .nav-container {
    padding: 10px 0 !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
  }

  .nav-largo { display: none; }
  .nav-corto { display: inline; }

  /* El logotipo es 3:2, así que a 148 px de ancho mide 99 de alto. `flex:none`
     es imprescindible: como elemento flexible lo encogía la fila de enlaces
     hasta dejarlo en 12 px a 320 px de ancho. */
  .nav-container img {
    width: 84px !important;
    flex: none !important;
  }

  .footer-container img {
    width: 108px !important;
  }

  .nav-links {
    gap: 0 13px !important;
    width: auto !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
  }

  /* El relleno vertical es para el pulgar, no para el ojo: sin él el enlace
     mide 13 px de alto y no hay forma de acertarle. */
  .nav-link {
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
    padding: 10px 0 !important;
    white-space: nowrap !important;
  }

  /* El botón de descargar del menú cae justo encima del mismo botón del hero:
     en un móvil se leía «Descargar» dos veces en la misma pantalla. Los
     enlaces de sección sí siguen sirviendo, porque llevan a otro sitio. */
  .nav-links .btn-nav {
    display: none !important;
  }

  /* ═══ JERARQUÍA DEL HERO 9:16 ═══ */
  .hero-section-container {
    grid-template-columns: 1fr !important;
    padding: 28px 0 44px !important;
    gap: 28px !important;
  }

  /* Todo el hero al centro. En una columna sola, el texto pegado a la
     izquierda y la maqueta del móvil centrada justo debajo no casaban. */
  .hero-content {
    text-align: center !important;
  }

  .hero-content .status-chip {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* En escritorio los titulares van en líneas cortas forzadas a mano, y con un
     interlineado de 0,92 quedan bien. Aquí el texto fluye y se parte solo, y
     con ese valor quedaban a 4,1 px de distancia: medido con TextMetrics, la
     línea de arriba baja 4 px por la cola de la Q y la de abajo sube 36 por el
     acento de la Ó, sobre un cuerpo de 39. Por eso se veían pegados. */
  .hero-title {
    font-size: clamp(38px, 9.6vw, 56px) !important;
    line-height: 1.28 !important;
    letter-spacing: -0.015em !important;
    margin-top: 24px !important;
  }

  /* Lo mismo para el resto de titulares, que tenían el problema idéntico. */
  .content-wrapper h2,
  .content-wrapper-legal h1,
  .content-wrapper-legal h2 {
    line-height: 1.22 !important;
  }

  .hero-description {
    font-size: 16px !important;
    line-height: 1.5 !important;
    margin: 20px auto 0 !important;
    max-width: 34ch !important;
  }

  .hero-aviso {
    justify-content: center !important;
    text-align: left !important;
    margin: 20px auto 0 !important;
  }

  /* Botones apilados y táctiles para el pulgar */
  .hero-actions {
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
    margin-top: 22px !important;
  }

  /* `.btn-code` faltaba aquí: en la sección de descarga quedaba a 66 px de alto
     y 20 px de letra justo al lado de uno de 56 y 18. La altura fija es porque
     la Saira en cursiva y la redonda no dan la misma caja con el mismo cuerpo,
     y dos botones apilados con 2 px de diferencia se notan. */
  .btn-primary,
  .btn-secondary,
  .btn-code {
    width: 100% !important;
    min-height: 56px !important;
    padding: 14px 20px !important;
    font-size: 18px !important;
    text-align: center !important;
  }

  /* Badges técnicos en fila compacta */
  .hero-badges {
    gap: 10px 18px !important;
    margin-top: 20px !important;
    font-size: 10px !important;
    justify-content: center !important;
  }

  /* Mockup del teléfono centrado y proporcional para 9:16 */
  .phone-mockup-wrapper {
    max-width: 290px !important;
    margin: 6px auto 0 !important;
    border-width: 6px !important;
    border-radius: 34px !important;
  }

  /* Secciones inferiores */
  .section-divider {
    padding: 48px 0 !important;
  }

  .section-title {
    font-size: clamp(28px, 7.5vw, 42px) !important;
  }

  /* Los saltos de línea de los titulares están puestos a mano para el ancho de
     escritorio. En un móvil parten la frase donde no toca y dejan la mitad de
     la columna vacía —el titular del hero llenaba 161 px de 347 y parecía
     descuadrado—. Quitándolos, `text-wrap: balance` reparte las líneas él solo
     con el ancho que hay. */
  .hero-title br,
  .section-divider h2 br {
    display: none;
  }

  .section-desc {
    font-size: 16px !important;
  }

  /* Un solo relleno para todo lo que parece una tarjeta. Medido en el sitio
     en producción, en la misma pantalla convivían 18, 20 y 24 px según de qué
     componente viniera cada caja. */
  .card-panel,
  .card-panel-chamfer,
  .callout-box,
  .callout-danger,
  .callout-verified,
  .regla-card {
    padding: 20px !important;
  }

  .radar-container {
    width: 180px !important;
    height: 180px !important;
  }

  /* En el pie la altura no estorba, así que aquí los enlaces sí pueden tener
     el tamaño que pide un dedo. */
  .footer-container {
    padding: 26px 0 34px !important;
    gap: 14px !important;
  }

  .footer-container .nav-link {
    padding: 11px 0 !important;
  }
}

/* ═══ SMARTPHONES ESTRECHOS (<= 420px) ═══ */
@media (max-width: 420px) {
  .content-wrapper,
  .content-wrapper-legal {
    padding: 0 14px !important;
  }

  .hero-title {
    font-size: clamp(34px, 10.5vw, 44px) !important;
  }

  .phone-mockup-wrapper {
    max-width: 260px !important;
  }

  .hero-badges {
    gap: 8px 14px !important;
    font-size: 10.5px !important;
  }

  .nav-container img {
    width: 74px !important;
  }

  .footer-container img {
    width: 98px !important;
  }

  .nav-links {
    gap: 0 11px !important;
  }

  .card-panel,
  .card-panel-chamfer,
  .callout-box,
  .callout-danger,
  .callout-verified,
  .regla-card {
    padding: 17px !important;
  }
}

/* ═══ TABLA RESPONSIVA LEGAL ═══ */
.table-responsive-container {
  border: 1px solid var(--color-border);
  /* Era --radius-lg, que no existe: la declaración entera se caía y la tabla
     quedaba con esquinas rectas al lado de tarjetas redondeadas. */
  border-radius: var(--radius-card);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 26px;
}

.table-responsive-inner {
  min-width: 540px;
}