/* Responsive utilities and common layout for static pages */
:root{
  /* Uso casi total del ancho de pantalla, con márgenes laterales seguros */
  --maxw:min(100vw - 32px, 1720px);
  --pad:clamp(16px, 2.2vw, 40px);
  --accent:#0b6b63;
  --muted:#6b7280;
}
*{box-sizing:border-box}
html,body{height:100%}
.container,.site{
  max-width:var(--maxw);
  width:100%;
  margin-left:auto;
  margin-right:auto;
  padding:var(--pad);
}
img{max-width:100%;height:auto;display:block}
header .site-header, .site-header{display:flex;align-items:center;gap:16px;padding:12px 0}
nav{display:flex;flex-wrap:wrap;gap:8px}
nav a{display:inline-block;padding:6px 8px}

.hero, .card-grid{display:flex;flex-wrap:wrap;gap:18px}
.card{flex:1 1 280px}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
/* Forms */
form{width:100%}
input[type=file]{display:block}
select,input,button{font:inherit}
button{cursor:pointer}
/* Result panels */
#result{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,32vw);gap:16px;align-items:start}
@media (max-width:900px){
  .site, .container{padding-left:max(12px,var(--pad));padding-right:max(12px,var(--pad))}
  header .site-header{flex-direction:column;align-items:flex-start}
  #result{grid-template-columns:1fr}
  .hero{flex-direction:column}
  nav{gap:6px}
}