/* Portada adaptable a pantallas grandes: por ahora SOLO en vista-previa-inicio.html (26/09/2026).
   Pedido: "no se adapta a los distintos tamaños, la imagen es chica, mucho espacio en blanco, los íconos son pequeños".
   En 1920x940 el banner medía 526 px de alto con 492 px en blanco a cada lado, y todo lo demás tenía el mismo tamaño
   en una notebook que en un monitor grande. Si el cliente lo aprueba, se carga también en index.html. */

/* 1) Desde ~1460 px de ancho la letra base crece con la pantalla (16 px → ~18,5 px en 1920 → 20 px desde 2200 px),
      así el menú, los íconos, las tarjetas y la columna crecen parejo. En notebook, tablet y celular queda igual. */
html { font-size: clamp(1rem, calc(.5rem + .55vw), 1.25rem); }

/* 2) Banner más alto: la pantalla menos el menú y ~8rem, para que la frase de Miguel se siga asomando abajo
      (antes era el 56% del alto). Sigue en 16:9, así el cartel y la foto quedan juntos. */
@media (min-width: 700px) {
  main:has(#necesitas) #hero-stage {
    height: min(56.25vw, max(56svh, calc(100svh - 15.5rem)));
    padding-inline: max(0px, calc((100vw - max(56svh, calc(100svh - 15.5rem)) * 1.7778) / 2));
  }
}

/* 3) Íconos más grandes en compu */
@media (min-width: 1100px) {
  .in-boton .sv-servicio-icono { width: 3.2rem; height: 3.2rem; border-radius: 14px; }
  .in-boton .sv-servicio-icono .ms { font-size: 1.85rem; }
  .in-boton b { font-size: 1.1rem; }
  #site-nav .red { width: 2.6rem; height: 2.6rem; font-size: 1.05rem; }
}