/* ============================================================
   Adaptación a pantallas pequeñas.

   El layout de index.html está escrito con estilos inline, que
   ganan por especificidad sobre cualquier hoja de estilos. Por eso
   estas reglas usan !important: es la única forma de sobreescribir
   un style="" sin reescribir todo el HTML.

   Todo vive dentro de @media, así que el escritorio no se toca.
   ============================================================ */

/* ---------- Tablet y móvil (≤ 900px) ---------- */
@media (max-width: 900px) {

  /* Márgenes laterales: 40px se come el ancho de un teléfono */
  header > div,
  main > section,
  footer,
  #opp-detail-view,
  #insight-detail-view {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Cualquier rejilla de varias columnas pasa a una sola */
  main [style*="grid-template-columns: 1fr 1fr"],
  main [style*="grid-template-columns: 1.1fr 1fr"],
  main [style*="grid-template-columns: 1.5fr 1fr"],
  main [style*="grid-template-columns: 180px 1fr"],
  main [style*="minmax(392px"],
  main [style*="minmax(300px"],
  main [style*="minmax(268px"],
  main [style*="minmax(240px"] {
    grid-template-columns: 1fr !important;
  }

  /* Equipo y métricas aguantan dos columnas antes de colapsar */
  main [style*="minmax(190px"],
  main [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Las métricas se separaban con una línea vertical entre columnas;
     apiladas, esa línea pasa a ser horizontal */
  [data-counter] [style*="border-left"] {
    border-left: none !important;
    border-top: 1px solid rgba(255,255,255,0.16) !important;
    padding: 20px 0 4px !important;
  }
  [data-counter] [style*="grid-template-columns: repeat(4"] > div:first-child {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Fotos del equipo: son retratos de 328x350, pero la caja de 210px
     de alto queda apaisada al ocupar el ancho completo y cover
     recortaba cabeza y torso. Se le da a la caja la misma proporción
     que la imagen, así entra completa. */
  #equipo [style*="height: 210px"] {
    height: auto !important;
    aspect-ratio: 328 / 350;
  }
  #equipo [style*="height: 210px"] img { object-position: center top !important; }

  /* Titulares: 68px y 44px desbordan en pantallas angostas */
  #home-view h1 { font-size: 40px !important; }
  #deals-view h1 { font-size: 32px !important; }
  main h2 { font-size: 30px !important; }
  #opp-detail-view h1 { font-size: 30px !important; }
  #insight-detail-view h1 { font-size: 28px !important; }

  /* Menú hamburguesa: el nav se despliega bajo el header */
  header > div {
    gap: 12px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  header img { height: 34px !important; }

  #nav-toggle { display: grid !important; flex: 0 0 auto; }

  #main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 6px 20px 14px !important;
    background: rgba(246,245,241,0.98);
    border-bottom: 1px solid rgba(42,42,42,0.1);
    box-shadow: 0 12px 24px rgba(42,42,42,0.08);
  }
  #main-nav[data-open="false"] { display: none !important; }
  #main-nav[data-open="true"] { display: flex !important; }

  #main-nav button {
    width: 100% !important;
    text-align: left !important;
    padding: 13px 4px !important;
    font-size: 15.5px !important;
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(42,42,42,0.08) !important;
  }
  /* "Hablemos" conserva su forma de botón */
  #main-nav button:last-child {
    margin: 12px 0 0 !important;
    padding: 13px 20px !important;
    text-align: center !important;
    border: none !important;
    border-radius: 999px !important;
  }

  /* Banner de aliados: rótulo arriba y logos debajo, en dos filas.
     En escritorio van en una sola fila (nowrap) y aquí se salían. */
  #alianzas > div { padding: 26px 20px !important; gap: 18px !important; }
  #alianzas > div > div:last-child {
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 22px 12px !important;
  }
  #alianzas img { max-width: 38% !important; max-height: 46px !important; }

  /* Filas flex que no envolvían: el texto se salía de su tarjeta */
  [style*="display: flex"][style*="justify-content: space-between"][style*="align-items: flex-end"] {
    flex-wrap: wrap !important;
    gap: 16px !important;
  }
  #deals-view [style*="max-width: 380px"] { max-width: 100% !important; }

  /* Cabecera del Deal Room */
  #deals-view > div:first-child { padding: 24px 20px 12px !important; }
  #deals-view > div:first-child > div { padding: 28px 24px !important; }

  /* Filtros del Deal Room, uno debajo de otro */
  #deals-view label { width: 100% !important; }
  #deals-view select { width: 100% !important; min-width: 0 !important; }

  /* Los filtros pegajosos tapaban contenido con el header envuelto */
  #deals-view > div[style*="position: sticky"] {
    position: static !important;
  }

  /* Pie: la alineación de 74px solo tiene sentido con columnas al lado */
  footer [style*="margin-top: 74px"] { margin-top: 0 !important; }
  footer > div > div:first-child { gap: 28px !important; }

  /* Modales: 40px de padding dejan la tarjeta sin aire */
  #modal-overlay,
  #empresa-overlay {
    padding: 12px !important;
    align-content: start !important;
    overflow-y: auto !important;
  }
  #modal-content,
  #empresa-overlay > div { max-width: 100% !important; }
  #modal-form > div[style*="grid-template-columns"],
  #empresa-form > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Detalle del teaser: las rejillas las arma app.js, por eso van aparte */
  #opp-detail-view [style*="repeat(3, 1fr)"],
  #opp-detail-view [style*="repeat(2, 1fr)"],
  #opp-detail-view [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Imagen de cabecera del teaser: el título montaba sobre el badge */
  #opp-detail-view [style*="height: 400px"] { height: 260px !important; }
  #opp-detail-view [style*="height: 400px"] h1 { font-size: 24px !important; }
  #opp-detail-view [style*="height: 400px"] [style*="padding: 40px"] { padding: 20px !important; }
}

/* ---------- Teléfono (≤ 560px) ---------- */
@media (max-width: 560px) {

  main [style*="minmax(190px"],
  main [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  #home-view h1 { font-size: 32px !important; }
  main h2 { font-size: 26px !important; }

  /* Banda fotográfica: 420px de alto es media pantalla */
  main [style*="height: 420px"] { height: 240px !important; }

  #alianzas img { max-width: 46% !important; }

  /* Pie de página en una sola columna */
  footer > div > div:first-child { grid-template-columns: 1fr !important; }

  #opp-detail-view > div > div,
  #insight-detail-view article { padding: 24px 20px !important; }

  /* El botón de volver arriba estorba en pantallas cortas */
  #to-top { right: 16px !important; bottom: 16px !important; }
}