/* Compactación para móvil de las webs de demostración: menos aire, letras y bloques más pequeños.
   Se carga la última en cada demo. Usa !important porque pisa los estilos propios de cada propuesta. */
@media (max-width:720px){
  html{font-size:14px!important}
  body{font-size:15px!important;line-height:1.45!important}
  main>section,main>div>section,main>article,body>section{padding-top:clamp(1.2rem,5vw,1.7rem)!important;padding-bottom:clamp(1.2rem,5vw,1.7rem)!important}
  h1{font-size:clamp(1.85rem,8.6vw,2.4rem)!important;line-height:1.06!important}
  h2{font-size:clamp(1.4rem,6.2vw,1.75rem)!important;line-height:1.1!important}
  h3{font-size:1.02rem!important;line-height:1.2!important}
  section p{line-height:1.45;margin-block:.5em}
  section li{line-height:1.4}
  main>section:not(.hero):not([class*=portada]):not(#inicio),main>div>section:not(.hero):not([class*=portada]):not(#inicio){min-height:0!important}
  main img:not([class*=logo]):not([class*=brand]):not([class*=ico]){max-height:260px;object-fit:cover}
  iframe[title^="Mapa"],[class*=map]{min-height:0!important}
  iframe[title^="Mapa"]{height:220px!important}
  [class*=map]:has(iframe){height:220px!important}
  [class*=grid],[class*=list]{gap:.7rem!important}
  [class*=card],[class*=box]:not(#box){padding:.9rem!important}
  .btn,button.btn,a.btn{padding:.65rem 1.1rem!important;font-size:.85rem!important}

  body{padding-bottom:2rem!important}

  /* listas de tarjetas: dos por fila en lugar de una gigante */
  .cards:has(>.pc),.srv-grid,div.mas,.cards:has(>.card){display:grid!important;grid-template-columns:1fr 1fr!important;gap:.7rem!important}
  .pc,.cards>.card{min-width:0}
  .pc img{aspect-ratio:1/1!important;height:auto!important;max-height:none!important;width:100%;object-fit:cover}
  .pc{padding:.6rem!important}.pc h3{font-size:.95rem!important}.pc p,.pc li{font-size:.8rem!important}
  .pc dl{display:none!important}
  .pc .pie{flex-direction:column!important;align-items:stretch!important;gap:.4rem!important}
  .pc .add{width:100%}
  .cards:has(>.card)>:last-child:nth-child(odd){grid-column:1/-1}
  /* formularios y listas largas */
  input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{padding:.55rem .7rem!important;font-size:15px!important}
  form,fieldset{gap:.7rem!important}
  form label,fieldset label{gap:.25rem!important}
  fieldset{padding:.8rem!important;margin:0!important}
  [class*=chip],[class*=check]{gap:.4rem!important}
  [class*=chip] *,[class*=check] label{padding-block:.35rem!important}
  ol>li,ul[class*=menu]>li,[class*=tl]>li{padding-block:.5rem!important;margin-block:0!important}
  ol,ul{margin-block:.5rem}
  .hero img,[class*=hero] img{max-height:230px}
}

/* Escritorio y tableta: todo un poco más pequeño para ver más cosas a la vez */
@media (min-width:721px){
  html{zoom:.92}
  main>section,main>div>section,body>section{padding-top:clamp(2rem,3.6vw,3.2rem)!important;padding-bottom:clamp(2rem,3.6vw,3.2rem)!important}
  main>section:not(.hero):not([class*=portada]):not(#inicio),main>div>section:not(.hero):not([class*=portada]):not(#inicio){min-height:0!important}
  h1{font-size:clamp(2.3rem,4.4vw,3.6rem)!important;line-height:1.05!important}
  h2{font-size:clamp(1.7rem,2.8vw,2.4rem)!important;line-height:1.1!important}
  h3{font-size:1.15rem!important}
  .wrap{width:min(1240px,100% - 3rem)!important}
  body{padding-bottom:2.2rem!important}
  .cards:has(>.pc){gap:1rem!important}
}
@media (min-width:1100px){
  html{zoom:.84}
}

/* Las portadas con foto mantienen su altura (casi toda la pantalla) y compensan el zoom */
@media (max-width:720px){main>section.hero,main>section#inicio,main>section.portada{min-height:max(640px,calc(100svh - 6.5rem))!important}}
@media (min-width:721px){main>section.hero,main>section#inicio,main>section.portada{min-height:max(560px,calc((100svh - 3rem) / .92))!important}}
@media (min-width:1100px){main>section.hero,main>section#inicio,main>section.portada{min-height:max(560px,calc((100svh - 3rem) / .84))!important}}