/* Ajustes propios del sitio sobre el sistema Modernist. */
html, body { margin: 0; background: var(--color-bg); }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
a { color: var(--color-text); text-decoration: none; }
a:hover { color: var(--color-accent-700); }
a.btn-primary:hover { color: #fff; }

/* Reemplazos de los style-hover del prototipo (hover solo con mouse: en touch el tap dispara hovers falsos) */
.hov-surface { transition: background-color .3s ease; }
.btn-invert { background: #fff; color: var(--color-text); }
@media (hover: hover) and (pointer: fine) {
  .hov-surface:hover { background: var(--color-surface); }
  .btn-invert:hover { background: var(--color-text); color: #fff; }
}
#contacto :focus-visible { outline-color: #fff; }

/* Respuesta al presionar */
.btn { transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), background-color .2s ease, color .2s ease; }
.btn:active { transform: scale(0.97); }

/* Áreas: 4 columnas → 2 → 1, con las reglas de 2px del sistema */
.area-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.area-col { border-right: 2px solid var(--color-text); }
.area-col:last-child { border-right: none; }
@media (min-width: 1101px) { .area-col h3 { min-height: 2em; } } /* alinea las listas aunque un título ocupe 2 líneas */
@media (max-width: 1100px) {
  .area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .area-col:nth-child(2n) { border-right: none; }
  .area-col:nth-child(-n+2) { border-bottom: 2px solid var(--color-text); }
}
@media (max-width: 640px) {
  .area-grid { grid-template-columns: minmax(0, 1fr); }
  .area-col { border-right: none; border-bottom: 2px solid var(--color-text); }
  .area-col:last-child { border-bottom: none; }
}

/* Celular */
@media (max-width: 640px) {
  .nav-link { display: none; }
  #top h1 { font-size: clamp(44px, 13vw, 56px) !important; }
  [data-process] [style*="repeat(4"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; row-gap: 40px; }
  [data-process] [data-reveal]:nth-child(n+3) [data-step] { margin-top: 0 !important; }
  [data-closetext] { font-size: clamp(44px, 13vw, 56px) !important; }
  #contacto .btn-invert { min-width: 0 !important; width: 100%; box-sizing: border-box; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:active { transform: none; }
}