/* ==========================================================================
   Adaptación a móvil y tableta de shoutad.com
   --------------------------------------------------------------------------
   El diseño está maquetado con estilos en línea (style="..."), que ganan a
   cualquier hoja de estilos. Por eso las reglas de aquí van con !important y
   seleccionan por el contenido del atributo style: es la forma de adaptar la
   maquetación sin reescribir los 260 elementos uno a uno.

   Sin este fichero la web se veía en versión escritorio encogida, porque las
   páginas no declaraban <meta name="viewport">.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Menú desplegable: casilla oculta + etiqueta, sin depender de JavaScript.
   La casilla no se oculta con "hidden" para que siga siendo accesible con el
   teclado; se saca de la vista pero conserva el foco.
   -------------------------------------------------------------------------- */
.mnu-check { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.mnu-btn   { display: none; }


@media (max-width: 880px) {

  /* ------------------------------------------------ cabecera */
  header > div {
    padding: 0 16px !important;
    height: 56px !important;
    gap: 12px !important;
  }

  /* En pantallas estrechas la marca larga no cabe junto al botón de menú */
  .marca-larga { display: none !important; }

  .mnu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: -8px;
    border-radius: 12px;
    color: #0c0e14;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mnu-btn:active { background: rgba(12, 14, 20, 0.06); }
  .mnu-check:focus-visible + .mnu-btn { outline: 2px solid #5b3df5; outline-offset: 2px; }

  .mnu-btn .cerrar { display: none; }
  .mnu-check:checked + .mnu-btn .abrir { display: none; }
  .mnu-check:checked + .mnu-btn .cerrar { display: block; }

  /* El menú horizontal pasa a ser un panel desplegable bajo la cabecera */
  header nav {
    display: none !important;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    background: #fff;
    border-bottom: 1px solid rgba(12, 14, 20, 0.09);
    box-shadow: 0 26px 50px -34px rgba(12, 14, 20, 0.55);
    padding: 4px 16px 14px !important;
    max-height: calc(100vh - 56px);
    overflow-y: auto;
  }
  .mnu-check:checked ~ nav { display: flex !important; }

  header nav a {
    font-size: 16px !important;
    padding: 14px 4px !important;
    border-bottom: 1px solid rgba(12, 14, 20, 0.06);
  }
  /* El selector de idioma queda como botón, separado del listado */
  header nav a[hreflang] {
    border-bottom: 0 !important;
    align-self: flex-start;
    margin-top: 12px;
    padding: 8px 18px !important;
    font-size: 15px !important;
  }
}


@media (max-width: 720px) {

  /* ------------------------------------------------ respiro de las secciones */
  [style*="padding:104px 24px 92px"] { padding: 44px 18px 52px !important; }
  [style*="padding:92px 24px 100px"] { padding: 52px 18px 56px !important; }
  [style*="padding:24px 24px 100px"] { padding: 20px 18px 56px !important; }
  [style*="padding:96px 24px"]       { padding: 52px 18px !important; }
  [style*="padding:34px 24px 46px"]  { padding: 30px 18px 38px !important; }

  /* ------------------------------------------------ tarjetas */
  [style*="padding:44px 40px"] { padding: 26px 20px !important; }
  [style*="padding:34px 30px"] { padding: 24px 20px !important; }
  [style*="padding:32px 28px"] { padding: 22px 18px !important; }
  [style*="padding:26px 28px"] { padding: 22px 18px !important; }
  [style*="padding:26px 22px"] { padding: 18px 16px !important; }

  /* ------------------------------------------------ rejillas */
  /* Año a la izquierda y texto a la derecha no funciona en 375 px: se apila */
  [style*="grid-template-columns:minmax(120px,180px) 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
  [style*="gap:56px"] { gap: 32px !important; }
  [style*="gap:40px"] { gap: 26px !important; }

  /* ------------------------------------------------ tipografía */
  [style*="font-size:38px"] { font-size: 29px !important; }
  [style*="font-size:30px"] { font-size: 25px !important; }

  /* ------------------------------------------------ botones a lo ancho */
  [style*="padding:14px 26px"] {
    padding: 14px 22px !important;
    text-align: center;
  }
}


/* --------------------------------------------------------------------------
   Móviles estrechos
   -------------------------------------------------------------------------- */
@media (max-width: 420px) {
  /* Las dos columnas de datos del encabezado se quedan sin aire */
  [style*="grid-template-columns:repeat(2,minmax(0,1fr))"] { gap: 10px !important; }
  [style*="padding:26px 22px"] { padding: 16px 13px !important; }
}


/* --------------------------------------------------------------------------
   Comodidad de uso en pantalla táctil, en cualquier tamaño
   -------------------------------------------------------------------------- */
@media (hover: none) {
  /* iOS amplía el zoom al enfocar un campo con letra menor de 16px */
  input, textarea, select { font-size: 16px !important; }
}

/* Nada debe provocar desplazamiento horizontal */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, table { max-width: 100%; }


/* --------------------------------------------------------------------------
   reCAPTCHA
   Google inyecta un recuadro fijo de 304 px de ancho. En un movil de 375 px
   la columna del formulario mide 273 px, asi que el widget se salia de la
   tarjeta. Se reduce a escala para que quepa; la altura se fija a mano porque
   transform no cambia el espacio que el elemento ocupa.
   -------------------------------------------------------------------------- */
@media (max-width: 430px) {
  /* zoom en lugar de transform: transform solo escala el dibujo, el hueco
     reservado sigue midiendo 304 px y seguia ensanchando la columna desde
     dentro. zoom si reduce la caja de maquetacion. */
  .g-recaptcha { zoom: 0.85; }
}
@media (max-width: 360px) {
  .g-recaptcha { zoom: 0.78; }
}


/* --------------------------------------------------------------------------
   Legibilidad y comodidad tactil
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {

  /* Los rotulos pequenos ("01 - Que hago", "Proyecto operativo") quedaban
     por debajo del minimo comodo de lectura en pantalla pequena */
  [style*="font-size:12px"]   { font-size: 13px !important; }
  [style*="font-size:11.5px"] { font-size: 12.5px !important; }

  /* Los enlaces del pie eran de 16 px de alto: imposibles de acertar */
  footer a {
    display: inline-block;
    padding: 12px 0 !important;
  }
}


/* --------------------------------------------------------------------------
   Rejillas con ancho mínimo
   --------------------------------------------------------------------------
   La maquetación usa repeat(auto-fit, minmax(340px, 1fr)). Ese "340px" es un
   mínimo real: la columna nunca baja de ahí, aunque la pantalla sea menor. En
   un móvil de 320 px el contenido se salía 20 px por la derecha y quedaba
   cortado (no se veía scroll porque el contenedor lleva overflow-x:hidden).

   Por debajo de 430 px ninguna de estas rejillas cabría a dos columnas de
   todas formas, así que forzar una sola no cambia el diseño: solo evita el
   recorte. La de 180px se deja como está, porque a ese ancho aún entra a dos.
   -------------------------------------------------------------------------- */
@media (max-width: 430px) {
  [style*="minmax(340px,1fr)"],
  [style*="minmax(320px,1fr)"],
  [style*="minmax(300px,1fr)"],
  [style*="minmax(280px,1fr)"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Un elemento de rejilla no baja de su ancho minimo de contenido salvo que se
   le permita: sin esto, cualquier cosa ancha de dentro (una tarjeta, un
   widget) vuelve a estirar la columna aunque la pantalla no de para tanto. */
@media (max-width: 720px) {
  [style*="auto-fit"] > *,
  [style*="repeat(2,minmax(0,1fr))"] > * { min-width: 0; }
}


/* --------------------------------------------------------------------------
   Filtros por tema del blog
   Median 33 px de alto: demasiado justo para el dedo. Se suben a 40, que es
   el equilibrio razonable aqui (son siete y ya ocupan tres lineas).
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  button[data-tema] {
    min-height: 40px;
    padding-block: 9px !important;
  }
}


/* --------------------------------------------------------------------------
   Titular del encabezado
   El estilo en linea es clamp(40px,5.6vw,78px): en un movil el 5.6vw no llega
   nunca al minimo, asi que se quedaba clavado en 40 px y se veia pequeno para
   lo que es. Aqui se le da una escala propia de pantalla estrecha.
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  [style*="font-size:clamp(40px,5.6vw,78px)"] {
    font-size: clamp(38px, 12.8vw, 60px) !important;
    line-height: 1.04 !important;
  }
}