/* 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; }
@media (hover: hover) and (pointer: fine) {
  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; }

/* Selector de idioma: visible también en celular (a diferencia de .nav-link) */
.lang-switch { font-size: 13px; font-weight: 700; letter-spacing: .08em; padding: 6px 8px; border: 2px solid var(--color-text); line-height: 1; }
@media (hover: hover) and (pointer: fine) { .lang-switch:hover { background: var(--color-text); color: var(--color-bg); } }

/* Partículas que recorren la página (DataTravel en main.js): encima del contenido, sin capturar clics */
.data-travel { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 30; }

/* 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; }
}

/* Motion accents stay on the existing architectural lines. */
[data-figcanvas] { contain: strict; }
[data-step] { transition: background-color .3s ease, border-color .3s ease !important; }
.btn svg { transition: transform .2s ease; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover svg { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { transform: none !important; transition: opacity .2s ease !important; }
  .btn svg { transform: none !important; transition: none; }
}
/* Service cards retain their full text on short and narrow screens. */
@media (max-width: 640px), (max-height: 700px) {
  [data-htrack] > article { overflow-y: auto; }
  [data-htrack] > article > span { font-size: 64px !important; }
  [data-hpin] > div > div:first-child { padding-top: 80px !important; padding-bottom: 18px !important; }
}

@media (prefers-reduced-motion: reduce) {
  [data-step], .btn { transition: none !important; }
}