/* Colores de docs/diseno/specs/tokens.json (cliente) */
:root {
  --agua600: #0B7A87;
  --agua500: #12A3B0;
  --agua100: #D7F1F2;
  --tinta: #10282E;
  --texto2: #566A6E;
  --arena50: #FBF7F0;
  --arena100: #F5EDE0;
  --borde: #EFE5D3;
  --blanco: #FFFFFF;
  --fondo: var(--arena50);
  --superficie: var(--blanco);
  --texto: var(--tinta);
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0E1A1D;
    --superficie: #16262A;
    --texto: #EEF3F3;
    --texto2: #A9B8BA;
    --borde: #24383D;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
}
a { color: var(--agua500); font-weight: 800; }
.contenedor { max-width: 960px; margin: 0 auto; padding: 0 16px; }
.fila { display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
.cabecera { background: var(--agua600); }
.cabecera a { color: var(--blanco); text-decoration: none; }
.marca { display: inline-flex; align-items: center; gap: 10px; font-size: 26px; font-weight: 900; }
.marca img { display: block; }
.marca { letter-spacing: -0.02em; }
.tld { color: var(--agua100); font-weight: 800; }
.enlace { font-weight: 800; padding: 10px 0; }
.heroe { background: var(--agua600); color: var(--blanco); padding: 40px 0 56px; }
.heroe h1 { font-size: clamp(28px, 5vw, 44px); line-height: 1.15; font-weight: 900; margin: 0 0 14px; max-width: 18ch; }
.subtitulo { font-size: 18px; max-width: 56ch; margin: 0 0 18px; opacity: .95; }
.pronto { display: inline-block; background: var(--blanco); color: var(--agua600); font-weight: 900; border-radius: 999px; padding: 8px 16px; margin: 0; }
.servicios { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: -28px; }
.servicios article { background: var(--superficie); border: 1px solid var(--borde); border-radius: 18px; padding: 16px 18px; }
.servicios h2 { font-size: 18px; margin: 0 0 6px; }
.servicios p { margin: 0; color: var(--texto2); }
.contacto { padding: 32px 16px; }
.contacto h2 { margin: 0 0 8px; }
.contacto ul { margin: 0; padding-left: 18px; }
.pie { border-top: 1px solid var(--borde); color: var(--texto2); font-size: 14px; padding: 18px 0 28px; }
.pie a { color: inherit; }
.legal { padding: 28px 16px 40px; max-width: 760px; }
.legal h1 { font-size: 30px; margin: 0 0 4px; }
.legal h2 { font-size: 19px; margin: 24px 0 6px; }
.legal .fecha { color: var(--texto2); margin: 0 0 16px; }